Gestaltung für mobile Seiten zuerst

Headway gibt Ihnen umfangreiche Möglichkeiten für responsives Webdesign an die Hand. In Sachen Entwicklung ist die meiste Arbeit bereits getan. Bei responsiven Webseiten dreht sich aber nicht alles um die Vorentwicklung – auch Ihr Design selbst muss darauf abgestimmt sein.

Wie entwickelt man ein mobiles Design mit Headway

Da Headway den größten Teil der Entwicklungsarbeit bereits vorgeleistet hat, sollte man wissen, was genau Headway in Sachen responsives Webdesign bietet. Hier ein Überblick:

  • Mobilgerät-freundliche Navigationsmenüs in Form von Klappmenüs (voreingestellt, aber optional)
  • Automatische Bildskalierung in Form voreingestellter maximaler Bildbreite von 100% des Browserfensters.
  • Automatische Videoskalierung (voreingestellt, aber optional)
  • Automatische Grid-Skalierung und Anordnung je nach Bildschirmgröße, bis hin zu übereinandergestapelten Elementen in einer einzigen Spalte.
  • Optional können Blöcke verborgen werden, in Abhängigkeit von Breakpoints der Geräte (iPhone/mobil, iPad/Tablet-Umgebung, iPad/Tablet-Porträt, Desktop).

Ihre Layouts organisieren

Bei der Skalierung für Mobilgeräte wird Ihre Seite von links nach rechts und von oben nach unten „gelesen“. Das bedeutet, wenn Ihre Seitenleiste links von Ihren Inhalten steht, sollten Sie berücksichtigen, dass diese Sidebar auf Mobilgeräten zunächst über Ihren Inhalten angezeigt wird. Es bedeutet auch, dass Ihr Logo und Ihre Navigationsleiste, typischerweise die am weitesten oben stehenden Blöcke Ihres Layouts, auch auf Mobilgeräten ganz oben bleiben.

Testen, testen, testen!: Wenn Sie Ihre Seite gestalten, denken Sie daran: Mobilgeräte zuerst! Testen Sie häufig und unablässig, um zu prüfen, wie Ihre Seite in kleinerem Format aussieht. So können Sie Probleme früher entdecken und einen Dominoeffekt vermeiden, wenn Sie viel später ein Problem entdecken, dass sich schon in der ersten halben Stunde Ihrer Arbeit eingeschlichen hat.

Planen Sie beim Platzieren von Blöcken im voraus: Versuchen Sie, die Reihenfolge der Blöcke im Hinterkopf zu behalten! Sie haben Sie Option, jeden beliebigen Block für jeden beliebigen Breakpoint zu verbergen (sogar für Desktop-Geräte, was aber nicht zu empfehlen ist) – Sie sollten aber auch nicht Duplikate aller Ihrer Blöcke für den mobilen Nutzer anzeigen lassen.

Auch mobile Nutzer sind Besucher: Besser ist es, nur ein oder zwei Blöcke auf Mobilgeräten zu verbergen und alle weiteren stehen zu lassen. Ihre mobilen Besucher interessieren sich für dieselben Inhalte, nach denen auch Ihre Desktop-Benutzer gesucht haben – lassen Sie sie also nicht im Regen stehen!

Schieberegler-Blöcke: Schieberegler-Blöcke funktionieren ausgezeichnet auf Mobilgeräten – beachten Sie aber, dass große Schiebregler beim Herunterskalieren oft nicht besonders lesbar sind, besonders solche mit Text. Eventuell sollten Sie diese Blöcke für mobile Nutzer verbergen.

Navigationsmenüs: Headway wird alle Punkte in Ihrem Navigationsmenü in eine Mobilgeräte-freundliche Auswahlbox duplizieren. Das ist schön und gut, solange Sie nicht zahlreiche „leere“ übergeordnete Menüpunkte haben. Wenn Sie beim Aufbau des Navigationsmenüs angepasste Links und ein „#“ als href nutzen, werden Sie Mobilgerätenutzer frustrieren, die nicht verstehen, warum es nichts an der Seite ändert, diese Option aus dem Klappmenü auszuwählen. Sofern möglich, vermeiden Sie bei der Gestaltung Ihres Navigationsmenüs stets duplizierte Menüpunkte oder falsche übergeordnete Punkte. Das wird auch Tablet-Nutzern zugutekommen, da die Handhabung von Klappmenüs auf Tablets noch immer deutliche Unterschiede in Sachen Genauigkeit und Benutzerfreundlichkeit aufweist.

Letztes Update: 19. Mai 2014