Responsive Webdesign & Mobile first

0
Teilen.

Über den Autor/ die Autorin

Avatar

Responsive Webdesign

Eine mittels Responsive Webdesign aufgebaute Website passt sich der vorhandenen Displaygrösse fliessend an. So wird der gleiche Inhalt auf einem grossen Display anders dargestellt als auf einem Smartphone – der zur Verfügung stehende Platz wird dabei optimal genutzt.

Dazu werden im Quellcode alle notwendigen Informationen für alle möglichen Darstellungsvarianten ausgegeben. Das führt jedoch dazu, dass viel mehr Code und grössere Bilder als für die Darstellung (z.B. auf einem Smartphone) nötig wären über die begrenzte Bandbreite transportiert werden. Weiter muss auf dem Gerät mehr Code verarbeitet werden. Beides zusammen kann zu spürbaren Performance-Einbussen führen.

Fazit

Trotz der Performance-Nachteile ist für mich eine Responsive Webdesign-Umsetzung ein sinnvoller Weg für keine bis mittlere Webprojekte.

 

Mobile first!

Bisher wurden Websites für die aktuellsten Webbrowser, grosse Displays und leistungsstarke Systeme entwickelt – man will ja zeigen was man kann! Ältere Browser, Tablets, Smartphones und langsamere Internetverbindungen wurden oft – wenn überhapt – zu einem späteren Zeitpunkt berücksichtigt.

graceful-degradation

Mit dem «Mobile First» Prinzip wird die Website zuerst für Geräte mit kleinem Display und begrenzter Bandbreite konzipiert, also fürs Smartphone.

progressive-enhancement

Dabei steht der Inhalt an erster Stelle! Dieser wird unter Berücksichtigung der Display-Grösse erstellt. Dieses Vorgehen führt zwangsläufig zu relevanteren und präziseren Inhalten – für überflüssige Inhalte bleibt kein Platz.

Weniger ist mehr – nicht nur für kleine Bildschirme!

Das gleiche gilt auch für die Tiefe der Navigation und die Anzahl der Unterseiten. Die Folge sind leicht verständliche und übersichtliche Navigationsstrukturen.

inhalt-darstellung-verhalten-1

Die technische Umsetzung erfolgt nach der Aufbereitung des Inhalts. Dabei wird mit der Smartphone-Version begonnen, also mit dem kleinsten Display. Davon ausgehend werden die nächst grösseren Devices umgesetzt – zum Beispiel mittels Responsive Webdesign.

Fazit

Weniger ist mehr – nicht nur für kleine Bildschirme! Die Relevanz der Information ändert sich nicht, so profitiert auch die Desktop-Version von den kürzeren aber prägnanteren Inhalten der Smartphone-Version.

«Mobile First» erfordert in der Konzeption aus heutiger Sicht ein starkes Umdenken. Dafür profitieren alle Nutzer unabhängig vom Device von guten und prägnanten Inhalten, einer optimalen Darstellung und Performance.

Weiterführende Informatione zum Thema  «Mobile First – Progressive Enhancement vs. Graceful Degradation»


Kommentar hinterlassen