Während der Arbeit an unseren responsive WordPress-Themes haben wir in den letzten Wochen jede Menge neue Erfahrungen dazu gewonnen, etliche Artikel zum Thema gelesen und natürlich auch das ein oder andere Script und Plugin zur Optimierung von responsive Webdesigns ausprobiert. Im folgenden Artikel habe ich daher 10 nützliche Tipps und Tricks zusammengestellt, die bei der Entwicklung von responsive Webdesigns hilfreich sein können.

1. Platzsparende Lösungen für mobile Geräte

Besonders die Gestaltung der Smartphone-Version eines responsive Webdesigns ist eine gewisse Herausforderung. Denn schließlich hat man hier nur sehr wenig Platz zur Verfügung. Wichtig ist daher, dass man sich genau überlegt, welche Elemente für die Bedienung der Webseite wirklich relevant sind und auf welche Elemente man eventuell in dieser Ansicht auch verzichten kann.

Natürlich sollte man nicht alle zuvor sichtbaren Elemente einfach durch die CSS Eigenschaft display:none; verbergen. Es ist aber sicherlich eine Überlegung Wert, ob z.B. alle Meta-Daten wirklich direkt auf einer Blog-Startseite sichtbar sein müssen oder ob die Bedienung durch zu viele Infos nicht eher unübersichtlicher wird.

2. Bedienbarkeit auf Touchscreens

Neben dem Platzproblem auf keinen Bildschirmen ist die Bedienung der Webseite auf einem Touchscreen eine weitere Besonderheit, die man bei der Entwicklung eines responsive Webdesigns beachten sollte. Denn auf Touchscreens gibt es ja kein Maus-Hover. Daher muss man sich eine alternative Lösung z.B. für Dropdown-Menüs überlegen, die man dann ab der Größe für Tablet-PCs in den Media Queries einsetzt.

In meinem Artikel “Webseiten-Navigationen in responsive Webdesigns analysiert” hatte ich zu dieser Besonderheit schon einmal verschiedene Lösungsansätze vorgestellt.

Außerdem ist es wichtig, dass alle wichtigen Links standardmäßig schon als solche zu erkennen sind. Am besten mit der Kennzeichnung durch eine Link-Farbe oder einer Unterstreichung. Ansonsten weiss man als Nutzer nicht, wo man auf dem Touchscreen navigieren kann.

3. Responsive Images

Mit dem CSS-Wert max-width:100% kann man Bilder relativ leicht responsive umsetzen. Der Artikel “Fluid Images” von Ethan Marcotte“ bei A List Apart beschreibt diese Einbindung von Bildern in Responsive Webdesigns sehr ausführlich und erklärt auch noch einige wichtige Tricks und Kniffe (z.B. die Einbindung eines responsive Bildschirm-Hintergrundbildes mit Hilfe des jQuery Backstretch Plugins).

Um die Ladezeiten für mobile Geräte möglichst gering zu halten, solltest du deine Bilder immer so klein wie möglich abspeichern. Du kannst Bilder z.B. mit Smush.it weiter in der Datenmenge reduzieren, ohne dabei Bildqualität zu verlieren.

4. Adaptive Images

Eine interessante Option für die Handhabung von Bildern in responsive Webdesigns ist die “Adaptive Images”-Lösung. Mit Hilfe von PHP und JavaScript können automatisch verschiedene Bildgrößen angeboten und eingesetzt werden. Eine Demo und weitere Infos findest du auf der Apative-Images-Webseite.

5. FitVids.js für responsive, eingebettete Videos

Mit dem FitVids.js Script kannst du eingebettete Videos (von YouTube, Vimeo, Blip.tv, Viddler und Kickstarter) auf deiner Webseite responsive machen, ohne dass du zusätzlichen HTML und CSS Code einfügen musst. Du kannst dir das Script auf GitHub herunterladen und im head-tag deiner Webseite aufrufen.

Dann musst du nur noch das folgende Script einbinden:
[php]
<script type="text/javascript">
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#thing-with-videos").fitVids();
});
</script>
[/php]

#things-with-videos ersetzt du dabei mit der Container-ID oder -Klasse, in der deine Videos sich befinden.

6. Auf möglichst geringe Ladezeiten achten

Viel diskutiert wird beim Thema responsive Webdesign auch immer wieder über zu lange Ladezeiten der Webseite. Den auf mobilen Geräten können zu viele integrierte Bilder oder Scripts zu einem sehr langsamen Hochladen der Seite in den Browser führen.

Da alle Bilder bei einem responsive Webdesign normalerweise in der originalen Größe geladen werden (auch dann, wenn diese auf dem Smartphone nur klein angezeigt werden), ist es wichtig alle Dateien so klein wie möglich abzuspeichern. Außerdem kannst du dir natürlich überlegen, Lösungen wir “Adaptive Images” (siehe Punkt 4) auf deiner Webseite einzusetzen.

7. Verwendung von Schriften

Bei der Verwendung von Schriften für responsive Webdesigns ist es auch wichtig, auf eventuelle unnötige Datenmengen zu achten. Wenn man also Webfonts (z.B. Google-Webfonts) einsetzen möchte, sollte man wirklich nur die Fonts einbinden, die man unbedingt benötigt und nicht etwa zusätzliche Schrift-Varianten.

Auch die Lesbarkeit der Schriften auf unterschiedlichen Geräten sollte vorab getestet werden. Vor allem auf kleinen Smartphone-Displays ist nicht mehr jede Schrift gleich gut lesbar.

8. Gestaltung von Formularen

Die Gestaltung von Formularen sollte in responsive Webdesigns auch wieder für Touchscreens optimiert sein. Für kleinere Bildschirmgrößen eignet sich beispielsweise meist keine mehrspaltige Aufteilung der Eingabefelder.

Benutzerfreundlich ist es auch, Eingabefelder immer mit einem Label oberhalb des Eingabefeldes zu gestalten. So kann der Nutzer auch während des Eintippens immer noch erkennen, was in das Feld eingetragen werden soll.

9. Suchformular leicht zugänglich machen

Da auf kleineren Bildschirmgrößen der Inhalt einer Webseite schwieriger zu überblicken ist, ist meiner Ansicht nach eine Suche besonders für mobile Geräte sehr wichtig. Damit die Webseitenbesucher also schneller, die für sie wichtigen Inhalte finden, ist ein Suchformular im Headerbereich sinnvoll.

10. Buch-Tipp

Als Buchtipp zum Thema Responsive Webdesign möchte ich unbedingt noch das Buch “Responsive Webdesign” von Ethan Marcotte empfehlen. Als Ebook kostet das Buch nur 9 US-Dollar und du kannst nach dem Download sofort mit dem Lesen deiner neuen Lektüre loslegen.

Ich hoffe meine Tipps können dir bei der Entwicklung eigener responsive Webdesigns ein wenig weiterhelfen. Über weitere, ergänzende Tipps und Feedback zum Thema freue ich mich sehr!