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 jetzt eigentlich?
Die Webseite soll so gesehen 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 jetzt 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 festzulegen. Mit diesem Hilfsmittel ist es uns jetzt also möglich, die verschieden Geräte ansatzweise zu identifizieren 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 einzelnen Screens und eine geringere Ladezeit bei kleineren Viewports, da hier nur die wirklich relevanten Daten verarbeitet werden.
Die Zeit zum Umdenken
Um nun wirklich ein einzigartiges Nutzererlebnis zu generieren, 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 einem 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 Mobilerstprinzips 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.