Mobile first
Weil weniger mehr ist

Früher war es bei der trendmarke so, dass eine Webseite zuerst für große Monitore entwickelt wurde. Dieses Verfahren heißt „graceful degradation“, was so viel bedeutet wie teilweise Herabsetzung. Mit der Entwicklung kleinerer Bildschirme und Displays, wie sie bei Tablets oder Smartphones üblich sind, wurden dann die großen Webseiten einfach adaptiert.

Bei Webseiten mit umfangreicher Navigation ist zu erkennen, dass hier als Zielgruppe Besucher mit großem Monitor angesprochen werden sollen. Schließlich beinhalten diese Seiten viel zu viele Informationen, um sie perfekt auf einem kleinen Bildschirm darzustellen, trotz Kompromissen. Graceful degradation wirkt sich nachteilig in Bezug auf Responsive Design aus.

Bei der Darstellung der „großen“ Webseiten auf kleinerer Anzeige gingen Informationen verloren. Slideshows, Grafiken und Hintergründe von PC-Endgeräten mussten ausgeblendet werden, was zulasten von Performance und Ladezeiten ging. Bei graceful degradation wurde das Programm fertiggestellt und dann ein Teil des Quellcodes überschrieben, damit eine einigermaßen akzeptable Darstellung auf mobilen Endgeräten möglich ist.

Doch die Arbeiten des trendamrke Teams zeigen, es geht auch andersherum: Mobile first heißt der neue Ansatz. Dabei wird erst die Webseite mit geringstem technischen Aufwand für kleinere Displays aufgebaut, also für Smartphones optimiert. Sie eignet sich dadurch auch für die Anzeige mithilfe älterer Browser, wie dem Internet Explorer 6. Ebenso wird die Website auf Displays mit geringer Leistungsfähigkeit und/oder niedriger Bandbreite angezeigt.

Anschließend wird das Programm Stück für Stück um Funktionen ergänzt und ausgebaut, es werden Grafiken, Animationen und Slide Shows hinzugefügt. Diese können dann bequem auf dem großen Monitor des Desktops angeschaut werden. Der Fokus liegt dabei auf einer kompakten Navigation, einer einwandfreien Performance und relevanten Inhalten.

Vorteile von mobile first:

– Erstellung der Website in der leistungsärmsten, komprimiertesten Version

– Basis bilden die Navigationsstruktur, die Performance und absolut relevante Inhalte

– Informationen sind für jeden User zugänglich, unabhängig von Endgerät und Browser

– Erweiterung der soliden Ausgangsbasis für leistungsstarke Systeme

– nachträglicher Einbau von Scripten, Grafiken, Animationen, Slideshows usw.

Der Aufbau von Websites von innen nach außen ist im mobile first responsive design besonders wichtig. An erster Stelle stehen die Inhalte und die Semantik, es wird die html-Struktur der Website aufgebaut. Dann wird nachgeschaut, ob alles logisch ist und alle Inhalte vorhanden sind. Im dritten Schritt wird überprüft, ob die semantische Struktur stimmt.

Schließlich wird getestet, ob blinde Besucher und Suchmaschinen die Inhalte optimal aufnehmen können. Dann geht es ans Design, wobei zunächst die elementare Gestaltung der Webseite im Vordergrund steht. Die Bildschirmgrößen werden etwas zurückgestellt. Im vorletzten Step erfolgt die Erweiterung der Webseite für PC-Monitore, wobei zuerst Wert auf den Content gelegt wird.

Es wird ein Prototyp skizziert, alle Funktionen und die Navigation überprüft. Erst im letzten Schritt wird die Website in ein Design gekleidet und durchläuft anschließend bei Bedarf Korrekturschleifen.

Bei der Programmierung des Quellcodes werden Passagen, die für Smartphones nicht zutreffen, in Klammern eingesetzt. Diese Art zu programmieren bietet den Vorteil, dass z. B. die Hintergrundgrafik auf dem Handy nicht abgerufen wird. Es wird mit Media Querys (Querverweisen) gearbeitet. Sind diese nicht lesbar, wie beispielsweise bei alten Internet-Explorer-Versionen, dann wird nur die elementare Basis-Darstellung der Webseite geladen.

Da der IE dann das Bild verzerrt, wird ein Script namens „Respond“ genutzt. Es wird über das Script Tag im html-Code eingebunden. Anschließend kann der Internet Explorer in den Versionen 6 bis 8 auch die Media Querys berücksichtigen. Um Kompatibilitätsprobleme mit dem Internet Explorer zu vermeiden, sollte immer, wenn in der Programmierung „min width“ auftaucht, das Respond Script eingebaut werden. Mit procssor.com lassen sich schlecht lesbare CSS-Codes umwandeln. Diese Art der Programmierung bewirkt, dass Grafiken nur geladen werden, wenn das Display eine bestimmte Größe erreicht. Einfache Navigationsstrukturen erleichtern die Übersicht.

Auch der Inhalt wird auf das Wesentliche reduziert. Ist er so interessant, dass wir ihn einem User mit geringer Bandbreite, geringer Performance und kleinem Display zumuten können? Hier sind relevante, kurz gefasste Informationen gefragt, die der ohnehin geringen Aufmerksamkeitsspanne des Besuchers entgegenkommen. Ziel von „mobile first“ ist es, für alle Besucher, jeden Browser und sämtliche Displaygrößen die optimale Webseitendarstellung anzubieten. Sprechen Sie uns gerne an, wenn Ihre Webseite auf dem Mobilendgerät noch nicht so sonderlich toll aussieht.