Webdesign: Von innen nach außen und mobile first
Startet der Hausbau mit Rauputz und Fassadenfarbe, ist das Projekt schon gescheitert. Ähnliches gilt für den Relaunch einer Website. Die Auswahl der Hintergrundfarbe oder Menüform sind am Anfang keine hilfreichen Themen. Zuerst muss mindestens klar sein: Für wen wird gebaut und was brauchen diese Bewohner?
Darauf aufbauend entsteht eine Kernidee. Dann folgt der Grundriss und erst dann liebäugeln wir mit der Planung der Innenausstattung.
Inzwischen nutzen wir Online-Angebote rund um die Uhr – ganz gleich, wo wir uns gerade befinden. Also besuchen wir Websites zunehmend mobil über unsere Smartphones und Tablets und je nach Angebot inzwischen sogar häufiger als mit dem Desktop-Browser. Denn viele Informationen benötigen wir unterwegs dringender als zuhause: Zum Beispiel brauchen wir die Telefonnummer auf einer Kontaktseite, wenn wir uns verspäten oder die Öffnungszeiten, wenn wir mittags noch etwas zusätzlich besorgen möchten. Oft ist uns das Display unseres Smartphones (und erst recht unser Tablet-Screen) auch einfach groß genug und wir sehen nicht mehr die Notwendigkeit uns an den Schreibtisch zu setzen, um in einem Online-Shop zu stöbern.
Mobile first:
Optionen maximieren statt reduzieren
Um die bestehende Website nachträglich für "kleine Screens" zu optimieren oder zusätzlich das Layout einmal in "kleiner Größe" zu gestalten, müssen wir einige funktionale Einbußen akzeptieren. Responsive Webdesign ist keine Eigenschaft, die sich später einfach dranhängen oder einschalten lässt. Die Ansprache der verschiedenen Besucher mit ihren unterschiedlichen Möglichkeiten – bis hin zu sehr großen Desktop-Bildschirmen – muss von Beginn an für die grundlegende Struktur einer Website mitgedacht werden.
In jedem Fall bauen wir eine Website daher von innen nach außen auf und berücksichtigen zuerst den kleinsten Screen und die geringste Datenverbindung (aus den möglichen Optionen unserer Zielgruppe). Mobile first bedeutet dabei grob: Der kleinste gemeinsame Nenner hat Vorrang. Und er ist leicht zu skizzieren, wenn unsere Start-Fragen ausreichend beantwortet sind.
Die größeren Screen-Formate bekommen dann Stufe für Stufe passende Ergänzungen und größere Versionen der Mindestausstattung. So liefert jeder Grid (= Ausbaustufe für bestimmte Bildschirmauflösung) genau das, was gebraucht wird und was die jeweilige Datenverbindung in angenehmer Geschwindigkeit liefern kann.
5 große Vorteile dieser Vorgehensweise:
- Für alle Screens wird das grundlegende Layout automatisch übernommen. Das Design wächst für jeden Breakpoint und jedes Grid stringent mit.
- Ausreichend Platz für alle notwendigen Inhalte und Bedienungselemente in jeder Ausbaustufe. Von vornherein werden zum Beispiel Buttons geplant, die mit einem Daumen getroffen werden können und einen sinnvollen Platz im Seitenaufbau belegen.
- Keine offensichtlichen Notlösungen oder schmerzliches Reduzieren wichtiger Punkte. Der Smartphone-Nutzer ist auch auf diesem Weg willkommen und wird nicht durch Behelfslösungen zum Besucher zweiter Klasse.
- Gleichzeitig Content First: Die wichtigsten Inhalte haben den Platz, den sie verdienen. Und der wird für jede Screengröße geplant und nicht noch irgendwo, irgendwie zusätzlich platziert.
- Leichtere Ausbaumöglichkeiten für spätere Verbesserungen durch eine schlanke Struktur. Eine gut strukturierte Basis bietet flexiblere Anknüpfungspunkte für neue Funktionen.
Wichtig ist, dass der erste Gedanke bei einem Website-Projekt weder allein den Screengrößen, noch der Position des Logos oder nur den verschiedenen Menü-Funktionen gilt. Der Nutzen für den Besucher muss Vorrang haben und so hilft es, sich mit ihm und seinen Problemen, Wünschen und Bedürfnissen zu beschäftigen. Das erreichen wir unter anderem über regelmäßige Analysen und der Definition von Personas. Dann lassen sich unsere Ziele optimal auf unsere Zielgruppen und gleichzeitig ihre technischen Möglichkeiten abstimmen.
Perfekte Passform für
nützliche Inhalte
Interessiert uns nicht, was uns geboten wird, dann interessiert uns auch die Form des Inhalts nicht. Also brauchen wir zuerst einen inhaltlichen Bauplan, der sich mit dem Content-Grundriss beschäftigt und erst später dazu eine Struktur für die Umsetzung. Denn in einen soliden Bauplan lassen sich Fenster, Türen und andere Touchpoints später flexibel integrieren. Getreu dem Motto: Content (und dann mobile) first.