Mobiles Website-Design: Responsive vs Adaptive

Mobiles Website-Design: Responsive vs Adaptive

Design mobiler Websites: Responsive vs Adaptive 1

2017 war das erste Jahr in der Geschichte des Internets, in dem Smartphones und Tablets weltweit mehr als nicht mobile GerĂ€te sind. Es ist vielleicht nicht ĂŒberraschend, dass diese Zahl 2018 erneut gestiegen ist und wahrscheinlich noch einige Zeit weiter zunehmen wird.

Um der wachsenden Verbreitung des mobilen Verkehrs Rechnung zu tragen, mussten sich die Webdesign-Techniken erheblich Ă€ndern. Suchmaschinen wie Google haben in erster Linie damit begonnen, mobile Versionen von Websites zu crawlen, und werden Websites, die mit kleineren Bildschirmen nicht kompatibel sind, aktiv bestrafen. Daher ist es fĂŒr Unternehmen wichtiger denn je, eine fĂŒr mobile GerĂ€te optimierte Website zu haben.

Die beiden grundlegenden Methoden der mobilen Optimierung sind als Responsive Web Design und Adaptive Web Design bekannt. WÀhrend beide Methoden dem gleichen Zweck dienen, können sich ihre Implementierungen und Ergebnisse erheblich unterscheiden.

Was ist der Unterschied zwischen reaktionsschnell und adaptiv?

Einige Designs eignen sich möglicherweise besser fĂŒr responsives Webdesign, wĂ€hrend andere besser fĂŒr adaptives Webdesign geeignet sind. Aber wie vergleichen sie sich?

GrundsĂ€tzlich ist der Unterschied zwischen reaktionsschnellem und adaptivem Webdesign fließend. Wenn Sie einen Webbrowser verwenden und die Ecken ziehen, um die FenstergrĂ¶ĂŸe anzupassen, achten Sie darauf, was mit dem Seiteninhalt passiert.

Wenn Ihr Text, Ihre Rahmen und Bilder mit abnehmender FenstergrĂ¶ĂŸe reibungslos verkleinert oder gemischt werden, reagiert Ihr Design wahrscheinlich. Wenn sich jedoch nichts Ă€ndert, bis Sie bestimmte “Sprungpunkte” erreichen – an denen sich plötzlich alles bewegt -, wird das Design höchstwahrscheinlich angepasst. (Es ist erwĂ€hnenswert, dass responsives Webdesign auch Sprungpunkte haben kann.)

Adaptives Webdesign

Beim Erstellen einer adaptiven Website erstellen Entwickler normalerweise eine Handvoll verschiedener statischer Seitenlayouts und lassen die Seite das entsprechende Layout laden, das auf der Auflösung oder GrĂ¶ĂŸe des Bildschirms basiert, auf dem die Seite angezeigt wird. Beispielsweise können Sie ein definiertes Layout mit einer Bildschirmbreite von 320 Pixel oder 960 Pixel oder 1200 Pixel usw. haben. Der Benutzer sieht dann eine andere gerĂ€teoptimierte Version der Seite, wenn er die Seite auf einem iPad oder Google Pixel oder einem Desktop-Computer mit einem Breitbildmonitor besucht.

Der Nachteil dieser Methode ist, dass stĂ€ndig neue GerĂ€te und damit neue BildschirmgrĂ¶ĂŸen entwickelt und veröffentlicht werden. Denken Sie nur daran, wie oft sich die BildschirmgrĂ¶ĂŸe des iPhone im Laufe der Jahre geĂ€ndert hat. Beim adaptiven Design mĂŒssen Sie fĂŒr jedes GerĂ€t einen neuen Chip erstellen, und diese Arbeit summiert sich. Sie können einfach ein Layout so nah wie möglich an das vorhandene GerĂ€t heranfĂŒhren, das Sie jedoch fĂŒr Unvollkommenheiten und Inkonsistenzen offen lĂ€sst. Und das will niemand.

Flexibles Website-Design

Die Lösung fĂŒr dieses Problem besteht darin, eine Website mit ansprechendem Webdesign zu erstellen. Responsive Design wird aus einem einzigen Layout erstellt und basierend auf der GerĂ€teauflösung mithilfe von Techniken wie Medienabfragen und CSS-Manipulation entsprechend verkleinert (oder vergrĂ¶ĂŸert). Sie können es beispielsweise so erstellen, dass ein Bild auf einer Seite unabhĂ€ngig von der Bildschirmbreite immer 30 Prozent einer Seite ausmacht und die restlichen 70 Prozent entsprechend skaliert werden. Auf diese Weise können Sie garantiert alle Möglichkeiten nutzen und eine fĂŒr jedes GerĂ€t optimierte Seite anzeigen.

WĂ€hrend das Entwerfen von beispielsweise sechs oder sieben einzelnen Layouts mit einem adaptiven Ansatz viel Arbeit zu bedeuten scheint, ist der reaktionsschnelle Ansatz auch eine Menge Arbeit, da Sie theoretisch unendliche Layouts fĂŒr unendliche BildschirmgrĂ¶ĂŸen entwerfen, und dies erfordert insgesamt viel mehr Code-Arbeit – zumindest am Anfang.

Ein wichtiger Faktor, den Sie berĂŒcksichtigen sollten, ist, dass es viel einfacher ist, Ihr Design ansprechbar als anpassungsfĂ€hig zu halten, sobald Ihre Website betriebsbereit ist. Dies liegt daran, dass Änderungen am Inhalt einer reaktionsfĂ€higen Seite nur in einer Version vorgenommen werden mĂŒssen. Wenn die Implementierung erfolgreich ist, werden die Änderungen bei allen Auflösungen reibungslos ausgefĂŒhrt. Das Aktualisieren eines adaptiven Designs ist viel aufwĂ€ndiger, da Sie alle verschiedenen Iterationen Ihrer Site ĂŒberprĂŒfen mĂŒssen, um sicherzustellen, dass nichts ĂŒber mehrere Layouts hinweg bricht. WĂ€hrend es zunĂ€chst mehr Arbeit ist, wird der gesamte reaktionsschnelle Entwurfsaufwand durch weniger laufende Wartung ausgeglichen.

Modernisierung gegen von Grund auf neu

Aus diesem Grund ist reaktionsschnelles Webdesign normalerweise die bessere Wahl, wenn Sie eine neue Website von Grund auf neu starten. Wenn Sie jedoch Ihre vorhandene Website mit mobiler Optimierung modernisieren möchten, ist es einfacher, einen adaptiven Ansatz zu implementieren, und Sie werden ebenso viele Vorteile sehen.

Wenn Sie bereits eine Website haben und diese mit einem adaptiven Ansatz Ă€ndern möchten, empfiehlt es sich, eine GerĂ€teprĂŒfung durchzufĂŒhren, um festzustellen, welche GerĂ€te bei Ihren Besuchern am beliebtesten sind. Software wie Google Analytics kann Ihnen zeigen, welche GerĂ€te fĂŒr den Zugriff auf Ihre Website verwendet werden, und bietet Ihnen eine Grundlage fĂŒr die Erstellung Ihrer ersten gerĂ€tespezifischen Layouts.

Es sei daran erinnert, dass die meisten Hosting-Unternehmen jetzt DIY-Website-Erstellungsdienste anbieten, bei denen Sie eine Website erstellen können, indem Sie aus einer Vielzahl von Vorlagen auswĂ€hlen und Komponenten per Drag & Drop an ihren Platz ziehen. Wenn Sie das GlĂŒck haben, eine neue Site zu erstellen, aber noch nicht ĂŒber das Budget fĂŒr eine professionell erstellte Site verfĂŒgen, sind diese Services ein großartiger Ort, um Ihre neue Site schnell zum Laufen zu bringen. DarĂŒber hinaus reagieren ihre Vorlagen normalerweise immer, sodass die ganze harte Arbeit bereits fĂŒr Sie erledigt wurde.

Responsive vs Adaptive: Welche Methode soll ich verwenden?

Letztendlich kommt die ideale Methode auf einen individuellen Anwendungsfall an. Wenn Sie Ihre Website von Grund auf neu starten, ziehen Sie eine reaktionsschnelle Lösung in Betracht, die von Ihrem Hosting-Unternehmen entwickelt wurde, oder lassen Sie sich von einem Entwickler helfen, um etwas wirklich Einzigartiges zu schaffen. Wenn Sie nur versuchen, Ihre aktuelle Site auf kleineren Bildschirmen zum Laufen zu bringen, kann ein adaptiver Ansatz am pragmatischsten sein.

Neal Thoms, Kampagnenmanager, Fasthosts