Responsive Webdesign – Tipps und was es zu beachten gibt – Teil 1

In diesem Beitrag geht es darum, was es bei der Erstellung von Responsive Webdesigns zu beachten gibt. Ein weiterer Artikel folgt in einer Woche unter anderen zum Thema Media Queries und zeigt euch ein paar Tools.

Seiten-Navigation und Touch-Gesten

Die Seitennavigation bzw. das Hauptmenü einer Seite ist das wichtigste Bedienelement und sollte deswegen auch immer einwandfrei funktionieren. Daher ist es zu empfehlen besonders bei Submenüs genau deren Verhalten zu testen, da es bei mobilen Geräten keinen Hover mit der Maus gibt. Hier sollten diese zum Beispiel entweder dauerhaft, aber merklich eingerückt angezeigt werden oder erst dann eingeblendet werden, sobald das Elternelement geklickt wurde. Wie man sich auch entscheidet, es gilt hier – genauso wie bei anderen Buttons – sollte die “Angriffsfläche” groß genug sein, um diese mit dem Finger leicht zu erwischen.

Medien und große Datenmengen

Passend zu den dynamischen Angaben der Schriftgröße, welche weiter unten genauer beschrieben werden, sollte man natürlich auch Mediendateien skalieren (umsetzbar ist das zum Beispiel mit max-width: 100%;). Des Weiteren sollte man sehr große Bilder vorher komprimieren. Hierzu hat mein Kollege Florian Schütt bereits einen Beitrag veröffentlicht.

Mehrspaltigkeit

Grid Designs bezeichnen flexible Layouts, welche aus Blöcken bestehen. Diese passen sich wiederum der jeweiligen Auflösung an. Das Ganze ist gut zu vergleichen mit einer Zeitung und ihren Spalten und Blöcken.

Aufgrund der Vielzahl an Geräten und der daraus resultierenden Größe könnte man Unmengen an Breakpoints definieren. Hierbei sollte man jedoch auf zu viele verzichten und diese besser nach Inhalt auswählen und nicht nach dem jeweiligen Gerät.

Als Liquid Design bezeichnet man Layouts, welche zwar eine feste Mindest- und Maximalbreite haben, sich jedoch dazwischen fließend bewegen. (width: 80%; min-width: 360px; max-width: 1260px;)

Lesbarkeit

Bei großen Bildschirmen ist es manchmal besser, wenn man den Inhalt der Seite in mehrere Spalten aufteilt, denn das fördert das Leseverhalten und der Text ist einfacher lesbar. Muss jedoch dann mit abnehmender Bildschirmbreite aufgelöst bzw. zunächst verkleinert werden

Zum Thema Lesbarkeit gehört aber außerdem noch die Schriftgröße und Zeilenhöhe. Ersteres sollte nicht mit statischen Einheiten wie zum Beispiel Pixel oder Punkt umgesetzt werden. Hierfür eignen sich die Maßeinheit em und natürlich der einfache Prozentwert. Man muss lediglich dem body-Tag eine bestimmte feste Größe zuweisen – welche sich dann Dank der Media-Queries einstellen lässt – und die anderen Schriftgrößen werden daraus errechnet.

Im nächsten Artikel wird es unter anderem um MediaQueries und kleinere Helferchen gehen.

ist seit 2014 Wordpress-Entwickler bei code-x, befasst sich nebenher mit den Programmiersprachen Java und C und ist ein leidenschaftlicher Musiker.

Hinterlasse einen Kommentar

*

1 comment

  1. Pingback: Responsive Webdesign – Tipps und was es zu beachten gibt – Teil 2 › shortcodes - Das Blog für WordPress-Entwickler

Nächster ArtikelResponsive Webdesign - Tipps und was es zu beachten gibt - Teil 2