10 praktische Tipps für die Entwicklung von responsive Webdesigns

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:

<script type="text/javascript">
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>

#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!

22 Kommentare

  1. Axel Copypast 10. Oktober 2011

    Ist es nicht so, wenn ich einem Bild die Eigenschaft „display:none;“ gebe, wird es trotzdem geladen?

    • Ja, das stimmt. Daher sollte man diese Methode auch nicht zu häufig anwenden, denn ansonsten benötigt die Seite eine sehr Lange Ladezeit für ungenutzte Elemente.

      Ab uns zu ist es meiner Ansicht nach aber einfach sinnvoll gewisse Elemente (es müssen ja auch nicht unbedingt Elemente mit einer großen Datenmenge sein) in der mobilen Version zu verbergen. Denn auf einem sehr kleinen Bildschirm kann das Webdesign sonst schnell sehr unübersichtlich werden.

  2. Ich frage mich bloß wie das ganze bei Smartphones wie dem neuen Samsung funktionieren soll, das eine Auflösung von 1260 × 720 hat. Wie seht ihr Sache?

    • Ich bin mir nicht ganz sicher, aber meinst du dieses Amoled Display von Samsung? Ich denke nicht, dass das responsive Design dort anders dargestellt wird. Zumal man das Layout ja auch komplett flexibel umsetzten kann, so dass es auf den verschiedensten Größen funktioniert.

  3. Hallo Ellen, habt ihr Erfahrungen mit Google Adsense in einem Responsive Layout? Ich verwende seit kurzem euer Piha-Theme und würde dort über den Artikeln gerne einen Werbebanner einblenden.

    Gruß Simon

    • Ich habe Google Adsense selbst bisher nicht bei einem responsive Design testen können, meines Wissens habe ich aber schon einige unserer Themes mit integrierten Google Adsense Anzeigen gesehen. Im Detail werde ich es aber auf alle Fälle noch einmal selbst testen bzw. mich genauer über die Möglichkeiten der responsive Integration erkundigen.

      • Würde mich auch sehr interessieren :) Ich habe Dein Theme nilmini seit kurzem auf meiner Seite laufen und natürlich auch AdSense in den Artikeln. Im normalen Webbrowser und auf Tablets auch kein Problem, bei Smartphones laufen die aber aus dem Display raus. Theoretisch müsste Google dazu kleinere Ads ausliefern, denn 468×60 würde nur funktionieren, wenn die Ränder des Layouts entfernt werden könnten, was aber eine komplette Umstrukturierung des Themes erfordern würde.
        Ich bleib mal dran, vielleicht fällt mir noch was dazu ein.

  4. Danke für diese Zusammenfassung der wichtigen Punkte. Wie sieht es denn mit größeren Touch-Devices aus? Wie soll ich es da umsetzen, denn ich seperiere ja im Moment nach Auflösung :(

  5. Ein paar Tipps in Bezug auf die Unterteilungen bei den Media Queries wäre sehr hilfreich, denn so etwas habe ich noch nirgendwo gelesen.

  6. In diesem Zusammenhang kann ich noch einen Google+ Beitrag von Brad Frost empfehlen:
    https://plus.google.com/103751101313992876152/posts/4NC8gjGy517

    Besonders wichtig sind dahingehend meiner Meinung nach, dass man mit dem mobilen Layout beginnt und nicht zu viele Veränderungen mit JavaScript vornimmt, wodurch das DOM neu sortiert wird.

    Auch wichtig: Das fixe Basis-Layout (z.B. für 960px) für ältere Browser ohne Media Queries erstellen und danach diese fixen Breitenangaben per Media Queries überschreiben.

  7. mich würde interessieren, welche Schriftgröße und in welcher Einheit ihr für den Fließtext (bzw. den mit p formatierten Text) Ihr für Smartphones empfehlt.
    Oder wie habt ihr das bei euren bisherigen Theme’s gehandhabt?

    • Ich verwende mindestens 14px oder sogar 16px für mobile Geräte, gebe diese aber in Prozent an. 12px empfinde ich als deutlich zu klein. Außerdem verzichte ich auf die Viewport-Definitionen maximum-scale=1.0 und user-scalable=0.
      Zwar passt sich die Seite dann immer an, wenn man das Endgerät dreht, aber man nimmt dem Anwender die Möglichkeit die Webseite selbst zu vergrößern. Schaue ich mir z.B. elmastudio.de auf dem iPad im Querformat an, während das iPad auf dem Tisch steht, dann ist mir persönlich die Schrift zu klein. Links und rechts ist noch viel ungenutzter Platz, aber zoomen kann ich trotzdem nicht, weil mir das durch die Viewport-Angabe verboten wird.
      Hier kann man sehen, wie viel Platz der Besucher noch für den Zoom verwenden könnte: http://cl.ly/1h3S0S1D1L3z2E2O451r

      In Browsern gibt es schließlich auch die Möglichkeit mit STRG & + bzw. CMD & + eine Webseite zu vergrößern. Weshalb sollte man das auf mobilen Geräten deaktivieren?

  8. Hallo Michael
    danke für deinen Beitrag!
    Im Gegensatz zu dir verwende ich für den Fließtext Schriftgröße 12px und das kann man sowohl auf den Smartphones iphone, Samsung, HTC und BlackBerry Super lesen. Die Leute sagen, dass die Schriftgröße prima passt.
    Von daher finde ich die Schriftgröße 14 oder sogar 16 zu groß.
    Aber wenn es bei dir passt

    • Hallo Felix,
      meinst du echte 12px oder die vom iPhone bereits vergrößerte Schrift (mit -webkit-text-size-adjust)? Das iPhone vergrößert die Schrift ja schon automatisch, wenn man -webkit-text-size-adjust nicht aktiv abschaltet.

  9. Es handelt sich um echte 12px. -webkit-text-size-adjust: none; war immer in der CSS hinterlegt. Allerdings auch font-size 100 % beim CSS-reset. Und diese Schriftgröße ist keineswegs zu klein.
    Ohne -webkit-text-size-adjust: none; hat die Schriftgröße 12 auf dem Apfel-Telefon ausgesehen wie Schriftgröße 18 oder so.
    Ich bin mir nun aber nicht mehr sicher, ob man das -webkit-text-size-adjust: none; überhaupt noch braucht, wenn man den ZooM nicht abschaltet, so dass der Besucher der Internetseite diese gegebenenfalls vergrößern kann.
    Jedenfalls habe ich das -webkit-text-size-adjust: none; am Samstag entfernt und auch auf dem Apfel-Telefon war die Schriftgröße 12 auch wirklich Schriftgröße 12

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *