Android

Responsive vs Adaptive Webdesign - Was ist besser?

Responsive Webdesign ohne Media Queries | Jonas Hellwig

Responsive Webdesign ohne Media Queries | Jonas Hellwig

Inhaltsverzeichnis:

Anonim

Frühe Website-Entwickler mussten sich keine Gedanken über das Entwerfen von Websites machen, da die Benutzer sie auf Computern anzeigen würden und diese Computer eine feste Bildschirmauflösung hatten. Mit der mobilen Revolution suchen immer mehr Menschen auf ihren mobilen Geräten - Tablets oder Handys - nach Informationen. Daher ist es für Website-Entwickler notwendig geworden, eine Website zu erstellen, die alles von Windows-PC bis zu mobilen Geräten abdeckt. Dieser Artikel erklärt den Unterschied zwischen adaptivem und responsivem Webdesign und ermöglicht Ihnen zu entscheiden, welcher für Sie und Ihre Organisation besser geeignet ist.

Es gibt zwei Methoden zum Erstellen von Websites, um unterschiedliche Bildschirmauflösungen zu berücksichtigen: Von PCs zu Mobiltelefonen. Die Methoden sind Adaptives Webdesign und Responsives Webdesign. In beiden Fällen ist das Endziel die Erstellung einer Website, die auf jeder Bildschirmauflösung angezeigt werden kann. Das Ziel ist es, die Informationen auf einer Reihe von Geräten zu präsentieren - vom PC über Tablets bis hin zu Mobiltelefonen.

Responsive Web Design

Responsive Web Design beinhaltet zusätzliche Codierung und verwendet sogenannte "Fluid Grids". Die Zahlen sind in "Prozent" und nicht in der genauen Anzahl der Pixel angegeben. Dadurch wird derselbe Website-Code auf einem PC-Bildschirm und auf einem Handy-Bildschirm richtig dargestellt. Unabhängig davon, wie Sie die Größe Ihres Bildschirms ändern, wird die gleiche Website leicht lesbar dargestellt. Bei kleineren Websites fließen Text und Bilder leicht in den Bildschirmbereich ein und passen hinein, ohne die Website zu unterbrechen oder Teile der Website zu beschneiden.

Ein reaktionsschneller Webdesignansatz macht die Verwendung von CSS3 anstelle von CSS zwingend erforderlich. Es nutzt auch skalierbare Bilder und Fluid-Grids, die ein wenig schwierig zu codieren sind.

Adaptives Webdesign

Adaptives Webdesign konzentriert sich auch darauf, neben PC-Bildschirmen auch sichtbare Tablets und Mobiltelefone zu präsentieren. Der Ansatz ist jedoch ein wenig anders. Im responsiven Webdesign war es die Flexibilität, die den freien Textfluss und die Größenanpassung der Bilder an die verschiedenen Bildschirme ermöglichte.

Im adaptiven Webdesign verwenden die Entwickler vorher festgelegte Bildschirmgrößen und kodieren entsprechend. Das heißt, wenn ein Benutzer auf der Website landet, bestimmt die Website den Typ des verwendeten Geräts und präsentiert die Website, die für die Bildschirmgröße dieses bestimmten Geräts ausgelegt ist. Der Inhalt kann in einigen Fällen zwischen den Geräten variieren.

Zum Beispiel würden die Entwickler 1280 × 800 Pixel für PCs, 8 "für Tablets und 5" für Handys in Betracht ziehen. Der frühe Code des adaptiven Webdesigns enthält die Identifizierung von Bildschirmen. Wenn es sich um einen PC handelt, zeigen Sie die PC-Version der Website an. Wenn es sich um ein Tablet mit 8 "handelt, zeigen Sie die Tablet-Version der Website an. Wenn das Gerät ein Mobiltelefon ist, zeigen Sie die mobile Version der Website an. Dies wird durch die Angabe" IF "gefolgt von verschiedenen Dimensionen erreicht genau in Pixeln anstatt prozentual.

Wenn neue Geräte mit unterschiedlicher Bildschirmauflösung kommen, müssen die Entwickler auf Coding zurück greifen, um die neueren Bildschirmauflösungen zu integrieren, so dass adaptives Webdesign einige Chancen hat, zuzuschneiden kleinere Geräte, wenn die Entwickler nicht vorsichtig sind.

Im Vergleich zu Responsive Webdesign, adaptive Web-Design in einfacher zu Code und die meisten Entwickler wählen letztere gegenüber dem responsive Webdesign.

Responsive vs Adaptive Webdesign

Responsive Websites sind schwer zu programmieren, der Code ist komplex und verwendet Prozentwerte anstelle von festen Pixelwerten.Es braucht eine gute Konzentration, um eine Website zu erstellen, die entsprechend der Bildschirmgröße der Geräte skaliert wird, im Gegenteil, i Es ist einfacher, verschiedene Websites für verschiedene Geräte zu erstellen, wie dies beim adaptiven Webdesign der Fall ist. Obwohl die Arbeit mehr im adaptiven Webdesign liegt, da die Entwickler unterschiedliche Websites für verschiedene Gerätegrößen erstellen würden, ist es im Vergleich zum responsiven Webdesign immer noch einfacher.

Da es zu viele mobile Geräte auf dem Markt gibt, können die Entwickler nicht unbedingt alle Arten von Bildschirmauflösungen einschließen. Das führt dazu, dass Webseiten mit einem adaptiven Web-Design-Ansatz auf kleineren Bildschirmen beschnitten werden.

Adaptive Websites sind etwas langsam beim Laden, da die Website zuerst herausfinden muss, welches Gerät und welche Bildschirmauflösung verwendet wird. Auf dieser Grundlage wird die entsprechende Version der Website auf den Bildschirm des Geräts geladen. Bei reaktionsschnellem Webdesign wird ein einzelner Code verwendet, der automatisch an die mobilen Bildschirme angepasst wird.

Sie können diesen Beitrag auch auf MSDN mit dem Titel ansehen. Warum ich adaptives Webdesign gegenüber Responsive bevorzuge Webdesign.