An Responsive Design kommt heute keine Webseite mehr vorbei. Google straft Webseiten ohne Responsive Design in den Suchresultaten ab.
10 Grundregeln für erfolgreiches Responsive Design
- Die Navigation auf mobilen Geräten ist optimal, wenn sie auf nur auf dem Bildschirm erscheint, wenn sie gebraucht wird. So kann wertvoller Platz auf den Smartphones gespart werden. Hierzu verwendet man das sogenannte "Hamburger"-Menü, die drei Striche untereinander, welche die Navigation ein- und ausblendet.
- Grundsätzlich verwendet man auf dem Smartphone so wenig Bilder wie nötig, dafür mehr kurzen, aber gut lesbaren Text.
- Gute Typografie ist vor allem auf mobilen Geräten notwendig, da der Text oftmals sehr klein ist. Dieser soll aber optimal lesbar sein. 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.
- Beim Responsive Design ist auf die Hierarchie, bzw. die Priorität der Inhalte zu achten. Wenn beim Desktop die Inhalte von links nach rechts gelesen werden, so werden die Inhalte nach den Regeln des Responsive Designs auf mobilen Geräten von oben nach unten dargestellt.
- Das Bildmaterial ist für alle Endgeräte so auszuwählen, dass der bildwichtige Teil des Fotos oder der Grafik in der Mitte liegt. Bei Desktop-Geräten herrschen Querformatbilder vor, auf mobilen Geräten wird die Seite vorwiegend im Hochformat angesehen. Das bedeutet, die Bilder müssen im Hoch- wie im Querformat funktionieren.
- Bei der Konzeption der Navigation ist zu beachten, dass es auf mobilen Endgeräten keinen "Hover"-State gibt. Damit eine Aktion erfolgt, muss auf jeden Fall ein Button oder Feld gedrückt werden.
- Vor allem auf Smartphones sind Pop-ups und Lightboxen zu vermeiden. Mehrere überlagernde Elemente funktionieren auf mobilen Endgeräten in der Bedienung nicht gut.
- Verwenden sie standardisierte Icon-Fonts für wiederkehrende Bedienelemente. Diese haben sich bei der Allgemeinheit für die Bedienung durchgesetzt und erzeugen deshalb keine Missverständnisse. Ausserdem helfen sie, wertvolle Bandbreite durch kleine Dateigrössen zu sparen.
- Ebenfalls um Bandbreite zu sparen, sollten falls möglich vektorisierte Logos und Grafikelemente verwendet werden. Im Hinblick auf sich durchsetzende Retina-Geräte ist so nur eine kleine Vektordatei (abgespeichert als SVG) notwendig, anstatt mehrere, für verschiedene Bildschirmgrössen optimierte, grössere Dateien.
- Flash ist tot. Definitiv. Kein Wenn und Aber. Flash funktioniert nicht auf Mobilgeräten. Löschen Sie das Ding von der Festplatte.