Responsive Webdesign – die Basics

Responsive Webdesign zählt definitiv zu den heißesten und spannendsten Themen des Jahres 2011. In diesem Artikel habe ich ein paar Gedanken, Denkanstöße und Erfahrungswerte für euch zusammen gefasst.

Was bedeutet Responsive Webdesign eigentlich?

Responsive Webdesign basiert auf fluid Grids und flexiblen Layouts (Dazu später). Das Layout passt sich an die verfügbare Bildschirmauflösung an, positioniert den Content dementsprechend und skaliert Texte, Bilder, Slider und Videos mit. Das Webdesign reagiert also auf die Gegebenheiten des Endgeräts und liefert ein dementsprechend angepasstes Layout aus. Richtig eingeschlagen hat das Thema erst durch die Implementierung und Unterstützung von CSS3 Media Queries. Mit Hilfe von Media Queries können Parameter wie zum Beispiel die Auflösung des Endgeräts oder dessen Orientierung bestimmt (mehr zu den Features von Media Queries) werden. Auf Basis dieser Informationen kann dem Endgerät spezifischer CSS-Code ausgeliefert werden, der ein Layout erzeugt, das auf die Gegebenheiten abgestimmt ist.

Gelungene Beispiele für Responsive Webdesign

Und warum das Ganze?

In den letzten Jahren haben sich zwei Trends stark hervorgehoben, die für uns Webdesigner immer wieder neue Herausforderungen darstellen. Zum Einen werden die Auflösungen der Desktop Monitore immer größer, sodass wir in einigen Fällen schon mit einer Content-Breite von 1280px arbeiten. Andererseits nimmt aber auch die Internetnutzung auf mobilen Endgeräten sowie die Vielfalt der Bildschirmauflösungen zu. Alleine bei mobilen Endgeräten reicht die Bandbreite möglicher Bildschirmauflösungen von 240 x 320 Pixel bis 1024 x 600 (oder 768) Pixel. Es liegt also auf der Hand, dass eine Website auf einem 1920 x 1080 Pixel Monitor anders aussehen wird, als auf einem älteren 240 x 320 Pixel Endgerät oder einem iPad 2, das mit einer Auflösung von 1024 x 768 Pixel arbeitet. Ein Begriff, der mir dabei immer wieder in den Sinn kommt: Chaos! Responsive Webdesign versucht, Ordnung in das Konvolut aus Geräten und Bildschirmauflösungen zu bringen, ohne eine Website dabei auf bestimmte Geräte zu optimieren. So könnten hochauflösende Desktop Monitore beispielsweise mit einem 4-spaltigen Content-Layout bedient werden, während der Content für mobile Endgeräte in 1- oder 2-spaltige Layouts verpackt wird. Idealerweise wird damit eine Website für möglichst viele Endgeräte zugänglich gemacht und vermittelt das Gefühl einer nativen Applikation, ohne eigenes auf ein spezifisches Endgerät optimiert zu sein. Klingt sinnvoll, oder?

Worauf ist bei der Umsetzung von Responsive Webdesigns zu achten?

Konsistenz – schlüssiges Design, das sich durch alle Auflösungen durchzieht

Ein entscheidender Faktor für gut umgesetztes Responsive Webdesign mittels Media Queries ist vor allem die Wiedererkennbarkeit und Konsistenz des Designs. Es liegt auf der Hand, dass aufgrund der unterschiedlichen Bildschirmgrößen das Layout und die Anordnung des Contents, von Auflösung zu Auflösung anders dargestellt werden muss. Zentrale Elemente wie zum Beispiel Logos und Farbwelten sollten aber möglichst konsistent bleiben. Idealerweise findet sich der User im Desktop Interface genauso zurecht, wie auch in den mobilen Versionen, ohne dabei den Aufbau sowie das Navigations- und Contentschema neu erlernen zu müssen.

Mobile und Portable Endgeräte verhalten sich anders

Anders als bei Desktop Interfaces gibt es bei mobilen und portablen Versionen einer Website keinen Maus-Cursor, keine Hover-States und auch keine Dropdown-Submenüs. Was bedeutet das für das Interface Design? Navigationselemente, sollten sehr gut als solche erkennbar sein und auch wirklich als Schaltflächen verstanden werden. Wichtig ist hier, dass die Textgröße hinauf skaliert wird, die Größe der Schaltfläche großzügig bemessen ist und dem gesamten Element genug Space gegeben wird. Schließlich navigieren wir ja nicht mit der Maus, sondern zumeist mit dem Finger und wollen das Betrachten einer Website nicht als Geschicklichkeits-Übung erleben. Textlinks sollten sich klar vom Text unterscheiden.

Navigationsdesign

Der Erfolg einer Website steht und fällt oftmals mit dem Navigationskonzept und –design. Dies gilt natürlich auch für den Responsive Webdesign Ansatz. Allerdings werden wir hier vor zusätzliche Herausforderungen gestellt, denn auf mobilen und portablen Endgeräten ist das Userverhalten nunmal anders, als am Desktop. Wie können Navigationen vom Desktop Interfaces auf mobile Interfaces übertragen werden? Wie werden Elemente der Hauptnavigation angeordnet, wie geht man mit Navigationselementen auf 2. oder 3.Ebene um? Wie bildet man Dropdown-Navigationen ab? Fragen, die gut überlegt sein müssen und nicht selten ausgeklügelte Lösungen erfordern. Ellen hat sich speziell dem Thema „Webseiten Navigationen im responsive Webdesign“ gewidmet, diesen Artikel kann ich euch nur empfehlen.

Bei Five Simple Steps wurde die Navigation so gelöst, dass mobilen Usern bei geringerer Bildschirmauflösung eine Dropdown Box zur Verfügung gestellt wird.

Datenmenge

Gerade bei mobilen und portablen Endgeräten zählt oftmals jedes KB an Datenmenge, das geladen werden muss. Aus dem Grund sollte man einmal mehr auf einen schlanken, semantischen Quellcode achten. Wer glaubt, bei mobilen Varianten die Menge der geladenen Daten mit Display: none zu reduzieren, der sollte aufpassen. Mit Display: none werden divs und andere Elemente zwar ausgeblendet, allerdings werden die dahinter liegenden Daten trotzdem geladen.

Zusätzlicher Aufwand

Responsive Webdesign bietet zahlreiche Vorteile und Möglichkeiten vor allem in Hinblick auf die wachsende mobile Internetnutzung. Mit einem Webdesign, das responsive reagiert, müssen User, die mobil surfen nicht mehr abgefangen und auf eigene Domains umgeleitet werden. Fakt ist aber auch, dass es zusätzlichen Aufwand bedeutet, eine Website responsive zu gestalten. Der Zusatzaufwand zieht sich durch alle Bereiche und Stadien der Entstehung einer Website. Konzeptionell muss angedacht werden, wie Desktop und mobile Versionen aussehen und funktionieren werden. Mockups werden erstellt; davon abgeleitet wird ein Design entwickelt, das wie oben beschrieben, unterschiedlichen Anforderungen standhalten muss. Im nächsten Schritt findet das CSS-Coding und HTML-Templating statt. Auch hier muss mit zusätzlichem CSS-Coding Aufwand gerechnet werden. Schlussendlich muss das Design natürlich getestet werden. Auch hier ist mit zusätzlichem Zeitaufwand zu rechnen, da das Design und Verhalten in möglichst vielen Geräten und Bildschirmauflösungen untersucht werden sollte. Eine Website lässt sich also nicht im Spaziergang responsive machen. Zu Beginn eines Projekts sollte daher gut abgewogen werden, ob der Responsive Webdesign Ansatz für dieses spezifische Projekt Sinn macht und die richtige Kosten-Nutzen-Lösung darstellt.

Tools & Plugins, die das Arbeiten mit Responsive Webdesign erleichtern

Grids

Mit dem Golden Grid System lassen sich flexible Grids für Auflösungen von 240 Pixel bis 2560 Pixel erzeugen.

Tiny Fluid Grid ist ein hilfreiches Framework, mit dem ihr ebenfalls flexible Grids erzeugen könnt.

Text & Tabellen

Um Textinhalte flexibel zu halten, empfiehlt es sich, die Schriftgröße nicht in absoluten Pixelwerten, sondern in relativen EM Angaben festzulegen. Für die Umrechung von Pixel in EM gibt es hier einen hilfreichen EM Converter. Chris Coyier beschäftigt sich intensiver mit Tabellen und Datensheets und liefert Lösungsvorschläge für die tabellarische Darstellung von Daten im responsive Webdesign.

Das FitText jQuery Plugin aus dem Hause Paravel passt die Schriftgröße von Überschriften flexible an die gegebene Bildschirmauflösung an. Dieses Plugin ist für die Skalierung von Headlines gedacht und sollte auch wirklich nur dafür genutzt werden.

Bilder, Videos, Slider

Im Responsive Webdesign wird natürlich auch die optimale Skalierung und Auslieferung von Bildern ganz groß geschrieben. Responsive Images bietet eine schöne Möglichkeit, Bilder via JavaScript an die entsprechende Bildschirmauflösung anzupassen und für das Endgerät optimiert auszuliefern. Auch für flexible Videos gibt es auf der Web Designer Wall einen Beitrag, der uns zeigt, wie nicht nur HTML5 Videos, sondern auch Iframe Embedded Videos mit Hilfe von CSS elastisch gemacht werden können.

Slider sind momentan aus dem Webdesign kaum noch wegzudenken. Auch für Responsive Webdesign gibt es hier mit dem Flexslider jQuery Plugin eine sehr schöne, semantische Lösung, um Slider und Sliderinhalte mitzuskalieren und an die gegebene Bildschirmauflösung anzupassen.

Testing

Beim Testen von Responsive Webdesigns in unterschiedlichen Bildschirmauflösungen kann ein Tool wie Screenfly unter die Arme greifen.

Fazit

Eine Website responsive zu gestalten ist definitiv ein Trend, der langsam aber sicher auch in unseren Breitengraden aufgegriffen und angenommen wird. Schön, wie ich finde. Nachdem ich täglich auf mobilen Endgeräten Websites ansurfe, habe ich den Komfort und die Eleganz von gutem Responsive Design sehr schnell zu schätzen gelernt. In Hinblick auf Accessability, Usability und Reichweite hat der Responsive Webdesign Ansatz großes Potential, muss aber gut überlegt, durchdacht und abgewogen werden. Responsive Webdesign ist zwar seit einiger Zeit ein heißbegehrtes Thema, muss aber nicht automatisch der richtige Lösungsansatz für jedes Projekt sein.

Wie sind eure Erfahrungen mit Responsive Webdesign? Kennt ihr schöne Beispiele, vielleicht sogar aus Österreich?

Über den Autor

Juergen

Meine Rolle bei Liechtenecker:
Papa, Coach, Trainer, Boss und Lab & Studio Koch

Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf:
immer noch Unternehmer, aber in einer charmanten kleinen Food Boutique

Mein Herz schlägt für:
Meine Familie, elektronische Musik, Videospiele

Du hast etwas zum Artikel zu sagen? Schreibe es nieder

Schreibe einen Kommentar

Kommentare

  • Sehr guter Artikel mit tollen Infos, vielen dank, so bin ich angekommen auf ein Relaunch.
    LG aus St. Pölten

  • Eine sehr schöne Zusammenstellung wesentlicher Merkmale.
    Wir haben uns darauf spezialisiert, bei Eignung vorhandene Webseiten nachträglich responsive umzuschreiben. Das lohnt sich vor allem für Betreiber umfangreicher Seiten sehr.

  • @Selmann Thomas Du hast vollkommen recht! Ich bin immer genervt, wenn ich eine nicht-optimierte Seite auf meinem iPhone öffne :/

  • @Selmann Thomas Du hast vollkommen recht! Ich bin immer genervt, wenn ich eine nicht-optimierte Seite auf meinem iPhone öffne :/

  • Responsive Webdesign zieht sich auch in andere Bereiche, zum Beispiel Newsletter:

    http://liechtenecker.at/mehrspaltige-responsive-newsletter-templates-auch-fur-outlook/

  • Responsive Webdesign zieht sich auch in andere Bereiche, zum Beispiel Newsletter:

    http://liechtenecker.at/mehrspaltige-responsive-newsletter-templates-auch-fur-outlook/

  • Responsive Webdesign ist heute keine Kür mehr, sondern sollte fixer Bestandteil einer Webstrategie sein. Toll, dass ihr schon vor 2 jahren damit angefangen habt

  • Responsive Webdesign ist heute keine Kür mehr, sondern sollte fixer Bestandteil einer Webstrategie sein. Toll, dass ihr schon vor 2 jahren damit angefangen habt

  • Vielen lieben Dank für die echt tolle, kurze und verständliche Zusammenfassung. Das Thema ist echt spannend und auch endlich mal eine neue Herausforderung für Grafiker :)

  • Vielen lieben Dank für die echt tolle, kurze und verständliche Zusammenfassung. Das Thema ist echt spannend und auch endlich mal eine neue Herausforderung für Grafiker :)

  • Konziser Artikel zu einem Thema von dem ich als gstandener Grafiker bis heute noch nichts gehört habe – einer unserer Programmierer hat’s mir über den Tischfussballtisch erzählt ;)

  • Responsive Webdesign ist schon lange kein Trend mehr. Es ist zum Standard geworden und sollte nicht mehr als “Riesen” Besonderheit verkauft werden. Ein neues Webprojekt, welches nicht repsonsive gestaltet ist, ist unprofessionell, auch bei kleineren Budgets.

  • Responsive Webdesign ist schon lange kein Trend mehr. Es ist zum Standard geworden und sollte nicht mehr als “Riesen” Besonderheit verkauft werden. Ein neues Webprojekt, welches nicht repsonsive gestaltet ist, ist unprofessionell, auch bei kleineren Budgets.

  • Ein sehr schöner Beitrag. Ich persönlich arbeite ja sehr gerne mit dem Foundation 3 Framework – das gute ist hier, dass viele Features direkt einsetzbar sind und man dafür nicht unbedingt neue Scripte einfügen muss. Vielleicht solltest du auch noch Twitter Bootstrap erwähnen, was mittlerweile auch einen hohen Stellenwert hat.

  • Ein sehr schöner Beitrag. Ich persönlich arbeite ja sehr gerne mit dem Foundation 3 Framework – das gute ist hier, dass viele Features direkt einsetzbar sind und man dafür nicht unbedingt neue Scripte einfügen muss. Vielleicht solltest du auch noch Twitter Bootstrap erwähnen, was mittlerweile auch einen hohen Stellenwert hat.

  • Sehr lesenswerter Artikel!
    Ich werde mich mit diesem Thema ab nun ein wenig mehr auseinandersetzen und meine bestehende Website dem responsive design anpassen.

    Ich frage mich allerdings, warum Internetriesen wie zum Beispiel Facebook, Twitter oder Youtube kein responsive design nutzen. Klar sie haben Apps. Aber nicht jeder hat alle Apps auf seinem Smartphone/Tablet installiert.
    Was meint ihr?

  • Sehr lesenswerter Artikel!
    Ich werde mich mit diesem Thema ab nun ein wenig mehr auseinandersetzen und meine bestehende Website dem responsive design anpassen.

    Ich frage mich allerdings, warum Internetriesen wie zum Beispiel Facebook, Twitter oder Youtube kein responsive design nutzen. Klar sie haben Apps. Aber nicht jeder hat alle Apps auf seinem Smartphone/Tablet installiert.
    Was meint ihr?

  • Netter Artikel, aber der stammt wohl aus der Feder eines Ghostwriters, oder?

    • Danke für das Kompliment! zu deiner Frage: Der Artikel kommt zu 100% von der Agentur Liechtenecker, kein Ghostwriter oder ähnliches.

  • Netter Artikel, aber der stammt wohl aus der Feder eines Ghostwriters, oder?

    • Danke für das Kompliment! zu deiner Frage: Der Artikel kommt zu 100% von der Agentur Liechtenecker, kein Ghostwriter oder ähnliches.

  • Super Beitrag! Jetzt bitte noch 1 + 1 zusammen zählen und einen Beitrag über Responsive Webdesign und Formulare schreiben. Hier gibt es super viele Fehlerquellen und es gibt eine Menge an Fragen die beantwortet werden wollen. (z.B. Multi-Column Formen > Sollten sich bspw. Inputfelder irgendwann untereinander schieben statt weiter runter skaliert zu werden?)

    Gruß,
    Pat

  • Ein toller Beitrag! Vielleicht gefällt dir ja auch diese Liste zum Thema Responsive WordPress Themse: http://www.axeldittmann.de/47-responsive-wordpress-themes/

  • Ein toller Beitrag! Vielleicht gefällt dir ja auch diese Liste zum Thema Responsive WordPress Themse: http://www.axeldittmann.de/47-responsive-wordpress-themes/

  • Sehr gut recherchiert und erklärt. Nun hat das Kind auch endlich einen Namen. Gerade der Teil mit den Tools ist ein wahrer Segen. Danke für die Infos.

  • Hallo Ines. Schöner Artikel! Es stellt sich nur die Frage was ist wenn Handys mit 4 Zoll Display schon Auflösungen von 1024 oder 1280 schaffen? Dann geht diese Lösung ja nicht mehr oder? Vielleicht hat das IPhone 5 schon 2000 Pixel.. was meinst du dazu?

  • Hallo Ines. Schöner Artikel! Es stellt sich nur die Frage was ist wenn Handys mit 4 Zoll Display schon Auflösungen von 1024 oder 1280 schaffen? Dann geht diese Lösung ja nicht mehr oder? Vielleicht hat das IPhone 5 schon 2000 Pixel.. was meinst du dazu?

  • Sehr guter Artikel mit tollen Infos und weiterführenden Links.

    Vielen Dank dafür!

    Ich selbst verwende auch oft mein Smartphone und hab mich schon durch einige Webseiten gequält, die nicht für kleine Auflösungen und Bildschirme optimiert wurden.

    In meinem WordPress-Blog verwende ich ein Plugin für die Ansicht auf mobilen Geräten. Dies ist aber bisweilen nur eine Notlösung. Mit dem Thema Responsive Webdesign werde ich mich noch ausführlich beschäftigen und mich anschließend auch mal dran versuchen ;)

    Grüßle, X

  • Sehr guter Artikel mit tollen Infos und weiterführenden Links.

    Vielen Dank dafür!

    Ich selbst verwende auch oft mein Smartphone und hab mich schon durch einige Webseiten gequält, die nicht für kleine Auflösungen und Bildschirme optimiert wurden.

    In meinem WordPress-Blog verwende ich ein Plugin für die Ansicht auf mobilen Geräten. Dies ist aber bisweilen nur eine Notlösung. Mit dem Thema Responsive Webdesign werde ich mich noch ausführlich beschäftigen und mich anschließend auch mal dran versuchen ;)

    Grüßle, X

  • toller Artikel! Wisst ihr vielleicht wie das CSS für einen responsive iframe (für zum Beispiel eine Google Maps Karte) oder auch eine swf-Datei aussieht?
    Die breite ist kein Problem, das kann man mit max-width: 100%; machen, aber die Höhe??
    Mit height: auto; wie bei Bildern funktioniert das nämlich nicht.

  • toller Artikel! Wisst ihr vielleicht wie das CSS für einen responsive iframe (für zum Beispiel eine Google Maps Karte) oder auch eine swf-Datei aussieht?
    Die breite ist kein Problem, das kann man mit max-width: 100%; machen, aber die Höhe??
    Mit height: auto; wie bei Bildern funktioniert das nämlich nicht.

  • Hallo,
    kennt jemand ein ein System, wie z.B.: Golden Grid System als WordPress Plugin? Ist so-etwas überhaupt denkbar?

    Seid bitte gnädig mit mir, bin Webdesign Anfänger; danke vorab
    Gerhard

    • @Gerhard M. – Das golden Grid-System kann nicht als Plugin genutzt werden. WordPress akzeptiert nur style.css als Stylesheet, allerdings kannst du weitere Stylesheets per @import direkt in deine Style.css importieren und so auch das Golden Grid System ohne Probleme nutzen.

      lg Thomas S.

    • Eine weitere Möglichkeit eigene/weitere Stylesheets in einem WordPress-Theme einzubinden ist die WordPress-Funktion http://codex.wordpress.org/Function_Reference/wp_enqueue_style.

  • Leiwander Artikel – werde ich mir ansehen.

  • Linktipp: Diese Library hilft bei kleineren Displays, kleinere Bilder (mit weniger Datenmenge -> nicht runterskalierte) auszuliefern.

    http://adaptive-images.com/

  • Sehr guter, aktueller Artikel. Danke Ines.

    @Holger: Lösungen für Datenmenge Mobil:
    320 and up – A ‘tiny screen first’ boilerplate extension
    http://stuffandnonsense.co.uk/projects/320andup/

  • Danke Martin für deinen hilfreichen Input! Der “Mobile First” Ansatz ist in Hinblick auf diese Problematik auch sehr spannend. http://www.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/

  • Holger, du kannst zB nicht erwünschte Daten dort wo sie erwünscht sind per “modernerer” Techologien nachladen, zb Jacascript/DOM. Alte Browser, die das nicht verstehen, reagieren gar nicht (zB Uralt-Mini-Mobil-Browser) und laden das Zeug nicht. Die modernen verstehen es wieder und da kannst du dann definieren, wo es geladen werden soll.
    Das würde mir mal einfallen

  • Vielen Dank für die gute Zusammenfassung über Responsive Webdesign.

    Der Punkt “Datenmenge” ist mir etwas zu kurz gekommen. Gibt es da eine Lösung für Bilder und Inhalte die ich in der mobilen Seite nicht anzeigen möchte? Brauche ich dann nicht doch wieder eine extra Seite/Domain?

    Oder kennt ihr eine Seite die genauer auf die Problematik eingeht?