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

Hier folgt nun Teil zwei zum Thema Responsive Webdesign.

Für Teil 1 siehe: hier

Media Queries und Meta Viewport

Bei Media-Queries, welche mit CSS3 hinzugekommen sind, handelt es sich um eine Erweiterung des Medientyps aus CSS2 und prüft im Gegensatz zum Vorgänger nicht nur das Zielmedium (also Screen oder Print) sondern kann auch auf dessen Eigenschaften zugreifen. So kann man zum Beispiel die Größe des Gerätes, die Orientierung (Hoch-/Querformat) oder auch die Bildschirmauflösung, um nur einige zu nennen, abfragen und verwerten.

Untenstehend zwei Beispiele wie zum einen der Viewport für mobile Geräte festgelegt wird und zum anderen wie innerhalb des Stylesheets auf die Breite des Ausgabemediums eingegangen wird.

Konsistenz

Was bringt es wenn man ein Design hat das sich den Größen des Geräts anpasst wenn man es nichtmehr wieder erkennt. Wichtige Dinge wie das Logo oder Eigenarten des Designs sollten überall wieder zu finden sein.

Mobile First <-> Content First

Content First: Je kleiner das Gerät ist, desto wichtiger ist es, dass der eigentliche Inhalt möglichst weit oben also am Anfang der Seite steht.

Mobile First: Hierbei ist es wichtig bei der Designplanung bereits Rücksicht auf die Touch-Bedienung zu nehmen. Außerdem soll der Inhalt in Richtung der größeren Geräte Schritt für Schritt erweitert werden. Und: Mobile First und Content First „gehen Hand in Hand“!

Scripts etc.

Viele WordPress-Plugins benutzen JavaScript oder sogar Flash, wie zum Beispiel Lightbox- oder Slider-Plugins, Media/Audio-Player. Hierbei ist zu beachten, dass diese unter Umständen nicht auf mobilen Geräten funktionieren. So können das iPad oder das iPhone eigentlich kein Flash. Daher sollten alle Plugins bzw. generell die gesamte Webseite auf diversen Geräten getestet werden

Frameworks und kleine Helferchen

Natürlich gibt es bereits bestehende Frameworks wie zum Beispiel das von Twitter entwickelte Bootstrap oder Boilerplate. Zum Testen gibt es natürlich auch einige Seiten oder auch kleine JavaScript-Schnippsel, die es dem Entwickler leichter machen. So gibt es zum Beispiel das Bookmarklet  von Benjamin Keen, das mit einem Klick die geöffnete Seite in den verschiedenen Viewports anzeigen lassen kann.

Testen!

„Und das beste kommt zum Schluss“: Testet wenn möglich jede Kleinigkeit auf verschiedenen Geräten und probiert alles aus.

 

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 1 › shortcodes - Das Blog für WordPress-Entwickler

Nächster ArtikelWordPress 4.0 "Benny" veröffentlicht