Responsive Webdesign der Mobile First ansatz

Responsive Design ist im Web nicht mehr wegzudenken. Die Zahl der Mobilen Webseiten zugriffe wächst ständig weiter. Begünstigt durch immer Leistungsstärkeren Smartphones wie auch Tablets, der besser werdenen Netzabdeckung und erschwinglichen Flatrate Tarifen im Mobilen Sektor.
So ist es auch nicht verwunderlich, dass sich auch das Webdesign in den letzten Jahren einem großen Wandel unterziehen musste.

Waren es zu anfang ehr die kleinen unscheinbaren und Experimentellen Seiten, welche sich mit dem Thema Responsiven Content und Design auseinander gesetzt haben, so hat sich dieser, von manchen belächelter Trend, mittlerweile in alle bereiche des World Wide Web ausgebreitet.
Längst ist dies nicht mehr nur eine Theorie oder Hype, nein es ist mittlerweile der Standard und auch ein relevanter Rankingfaktor.

Aber was hat das nun mit Mobile First zu tun? Responsive Design ist doch die eigentliche Technik welche verwendet wird. Gehört das nicht zusammen, gibt es hier unterschiede?

Responsive Design nach Mobile First Prinzip

Fast schon wie ein Buzz Word zieht sich Responsive Design durch die Netzwelt, doch was heißt das den eigentlich, welche Message steckt dahinter?
Nun erläutern wir doch mal den begriff Responsive, dies heißt nicht mehr als Reagieren. Worauf Reagieren wir den nun eigentlich?
Die Webseite soll sogesehen auf den Bildschirm reagieren auf dem sie dargestellt wird. Das bedeutet sie soll die Technischen gegebenheiten bestmöglich ausnutzen, um Ihre Elemente Optimal darstellen und die Handhabung so einfach wie möglich halten.

Genau an dieser Stelle kommen nun auch die sogenannten Media Queries ins Spiel, welche es ermöglichen angaben für Elemente, Schriften, größen also alles was man per CSS steuern kann, für einen bestimmten Viewbereich fest zu legen. Mit diesem Hilfsmittel ist es uns nun also möglich, die verschienden Geräte ansatzweise zu Indentifizieren und uns an diese gegebenheiten anzupassen.

Doch was hat das jetzt mit Mobile First zu tun?

Um dies jetzt noch ein wenig besser erklären zu können und die Wichtigkeit zu erläutern, gehe ich in die Anfänge des Responsive Design zurück.
Fehler welche ich leider in der anfangszeit selber gemacht habe und auch Heutzutage bei vielen sehen kann.
Mit Media Queries können wir in zwei Richtungen arbeiten.

Wir können generell erstmal alles Laden und darstellen lassen und im nachhinein, je kleiner der Viewport wird Elemente ausblenden, überschreiben und umpositionieren.
So wurde in den anfängen von den meisten gearbeitet, die Desktop Version wurde erstellt und wenn diese fertig war wurde sich nach unten bis zum Smartphone gearbeitet.
Dies war zum einen sehr mühselig, da man viele Optionen x mal überschreiben musste und standards künstlich wiederherstellen musste, da diese für den Desktopbereich nicht gültig waren. Des Weiteren war natürlich damit auch die Datenflut, welche auf dem Smartphone geladen wurde um ein vielfaches höher als eigentlich benötigt.
Dies umgeht man mit dem Mobile First ansatz, da wir hier auf dem Mobilen Viewport nur die Daten laden, welche auch für diesen gedacht sind. Von dort aus arbeiten wir uns dann nach oben bis zum Maximalen Screenbereich auf welchen wir die Seite Optimieren. Dies sorgt für saubere übergänge auf den einzelenen Screens und eine gerigere Ladezeit bei kleineren Viewports, da hier nur die wirklich relevanten Daten verarbeitet werden.

Die Zeit zum Umdenken

Um nun wirklich ein einzigartiges Nutzererlebnis zu gernerieren, gilt von anfang an eine enge zusammenarbeit zwischen Kunden, Designer und Entwickler.
Auch wenn der Designer sich im ersten moment sehr eingeschränkt fühlt, da man natürlich auf einen größeren Screen mehr Kreative freiheit hat, so können sich bei genauere Betrachtung aber allerdings Vorteile ergeben.

Weniger ist mehr:
Ein Designer konzentriert sich so wieder auf das Wesentliche, da nicht soviel Platz zur Verfügung steht wird ein Design wieder zwangsläufig übersichtlicher. Der vermeintliche Platzmangel wird mit benutzerfreundlicher übersichtlichkeit kompensiert. Wichtige Informationen werden in den Vordergrund gerückt um den User bestmöglich abzuholen und zu leiten. So wird aus der vermeintlichen Schwäche gerade eine der größten Stärken des Mobilen Layouts.

Wichtig ist hier aber auch in der frühen Phase des Layouts, die Bedürfnisse des Nutzers in den Vordergrund zu stellen und so in den Designprozess zu Integrieren.

Aus der Not eine Tugend machen und sich neu erfinden:

Mit dem Einsatz des Mobile First Prinzip fördern wir auch den Einsatz moderner Frontend-Entwicklungsmethoden.
So müssen vielleicht Probleme in der Umsetzung einzelner Ankerpunkte, welche eine größeren unterschied zwischen den Mobilen und den Screen bereich bilden, durch andere Technologischen Methoden überbrückt und responsive angepasst werden. Wer sich hier auskennt wird auch die ein oder andere Innovative Lösung finden.