10 Erfolgsregeln für Responsive Webdesign

1024 576 Martin Wazek

Mobile Endgeräte, also Smartphones und Tablets haben das Online-Medienverhalten der Benutzer stark verändert – insbesondere die Anforderungen an ein effizientes Webdesign, dass sowohl die mobile Welt als auch klassische Endgeräte wie Desktop-Computer und Notebooks bedient. Mit Technologien, wie dem Multi-Purpose-Tool auf WordPress-Basis von wazek & partner funktionieren moderne Websites auf allen Plattformen. Das Zauberwort heißt Responsive Webdesign: Dabei gilt es aber einige Grundregeln zu beachten.

1.

Auf mobilen Geräten erscheint eine optimierte Navigation auf dem Bildschirm erst dann, wenn sie gebraucht wird. So wird wertvoller Platz auf den Smartphones gespart. Das sogenannte „Hamburger“-Menü – die bekannten drei Striche untereinander – haben sich dabei durchgesetzt.

2.

Ein Bild sagt mehr als 1.000 Worte. Das gilt in der heutigen, modernen Medienlandschaft noch mehr. Allerdings ist darauf zu achten, dass für  User auf  Smartphones  ein ausgewogenes Verhältnis von Text und Bildern herrscht. Hinslichtlich der Textmenge zeugt unserer Erfahrung, dass zu Beginn einer Seite/Kapitels kurze Text mit spannenden Überschriften platziert werden, hat man das Interesse gewonnen, bietet man dem Leser umfangreichere und weiterführende Informationen an.

3.

Gute Typografie ist vor allem auf mobilen Geräten ein Muss, da Texte öfters sehr klein sind. Das bedeutet, Texte müssen in einer gut lesbaren Schriftgrösse und optimiertem Zeilenabstand gut strukturiert sein (Absätze), auf Blocksatz ist wenn möglich zu verzichten.

4.

Beim Responsive Design ist auf die Hierarchie bzw. die Priorität der Inhalte zu achten. Auf einem Desktop werden die Inhalte von links nach rechts gelesen, nach den Regeln des Responsive Designs werden diese auf mobilen Geräten aber von oben nach unten dargestellt.

5.

Bilder sind für alle Endgeräte so auszuwählen, dass der aussagekräftigste Teil des Photos oder der Grafik in der Mitte liegt. Am Desktop herrschen Bilder im Querformat vor, auf mobilen Geräten wird die Seite vorwiegend im Hochformat angesehen. Das bedeutet, Bilder müssen im Hoch- wie im Querformat funktionieren.

6.

Vor allem auf Smartphones sind Pop-ups und Lightboxen zu vermeiden.  Die Bedienung von überlagernden Elementen funktioniert auf mobilen Endgeräten nicht gut.

7.

Auf mobilen Endgeräten gibt es keinen „Hover“-State. Das ist bei der Konzeption der Navigation bereits zu beachten. Damit eine Aktion erfolgt, muss auf jeden Fall ein Button oder Feld gedrückt werden.

8.

Um Bandbreite zu sparen und eine mobile Website nicht unnötig zu verlangsamen, sollen so weit wie möglich vektorisierte Logos und Grafikelemente verwendet werden.

9.

Standartisierte Icon-Fonts sind für wiederkehrende Bedienelemente zu bevorzugen Diese haben sich bei den Webusern durchgesetzt und erzeugen deshalb keine Missverständnisse. Auch das hilft, wertvolle Bandbreite zu sparen. Besondere Kreativität an dieser Stelle ist nicht angebracht.

10.

Flash ist definitiv tot. Flash funktioniert nicht auf Mobilgeräten. Löschen Sie das Programm einfach von der Festplatte.

Responsive Webdesign – modern und funktional umgesetzt