Responsive Webdesign: Ein Erfordernis aus der Neuzeit der Internetnutzung
Noch vor wenigen Jahren war die Sache klar. Webdesign war Tabellenlayout, höchstens Fixed Grid, optimiert auf gängige Bildschirmauflösungen. Das lag dann je nach Zielgruppe bei 800 x 600 oder 1.024 x 768, eine Erweiterung auf 1.280 x 1.024 trauten sich die wenigsten. Das Design war auf eine der genannten Auflösungen fixiert und bewegte sich nicht.
Zumeist ging man vom kleinsten gemeinsamen Nenner, in der Regel 800 x 600 aus und nahm in Kauf, dass Verwender größerer Bildschirme eben unheimlich viel Whitespace rund um die eigentliche Website sehen würden. Schicke Hintergrundbilder und/oder Farben linderten den Blendeffekt etwas.
Zusätzlich erstellte man, wenn der Kunde es denn unbedingt wollte, eine mobile Website des gleichen Auftritts, zumeist mit abgespeckter Funktionalität und mindestens auf eine Subdomain ausgelagert. Schnell hatte sich die Verwendung des Buchstabens m als Subdomain durchgesetzt. Die mobilen Varianten waren in aller Regel einspaltige Layouts ohne großen grafischen Anspruch und boten nur das Nötigste.
Mit iPhone, iPad und vor allem Android begann das bislang einigermaßen erfolgreiche Designkonzept ins Wanken zu geraten. Allein die Vielzahl zu bedienender Bildschirmauflösungen, die bei weitem nicht mehr nur ein Minimallayout sinnvoll erscheinen lassen, will künftig mit bedienbaren Designs bestückt werden. Auch die Ansprüche an Funktionalität der Websites auf mobilen Geräten steigen. Das korrespondiert mit den Möglichkeiten der Geräte. Schon jetzt gehören die Webkit-basierten Browser auf Mobilgeräten zu den technisch fortschrittlichsten Implementationen eines Internetseitenbetrachtungsprogramms.
Was tun? Sicherlich könnte man hergehen und eine Website für Desktoprechner mit einem Fixed Grid, eine spezielle Website für iPhones, eine spezielle Website für iPads und eine generellere, minimalistische für alle anderen Mobilgeräte erstellen. Modern wäre das jedoch nicht und der Pflegeaufwand einer solchen Lösung ist sicherlich auch nicht mit jedem Budget abzufedern. Zumal, was tun wir denn, wenn sich weitere Geräte mit ganz anderen Bildschirmauflösungen am Markt durchsetzen? Pflegen wir irgendwann zehn verschiedene Spezialversionen ein und derselben Website?
Natürlich wäre das möglich, aber sinnvoll wäre es nicht. Zumal es ja mit HTML5, CSS3 und Javascript Standardtechnologien gibt, die einen anderen Ansatz erlauben. Wenn wir uns jetzt noch vor Augen halten, dass die mobile Internetnutzung in etwa zwei Jahren die stationäre Internetnutzung in den Schatten gestellt haben wird, so wird klar, dass dieser andere Ansatz, der mit dem Schlagwort Responsives Webdesign bezeichnet wird, - um es mit Merkel zu sagen - alternativlos ist.
Responsives Webdesign reagiert auf den Nutzer
Responsives Webdesign bezeichnet ein Design, dass mit einem flexiblen Grid und flexiblen Inhalten auf beliebigen Endgeräten stets das beste Nutzererlebnis bietet. Das Design reagiert auf den Nutzer und dessen Anforderungen. Wie kann das erreicht werden?
Schritt 1: Weg von festen Schriftgrößen
Anstelle bisher gängiger Schriftdefinitionen über Pixelangaben wird im responsiven Design mit relativen Werten gearbeitet. Dazu ist es erforderlich, die unterschiedlichen Ausgangswerte der verschiedenen Plattformen zu kennen, um mit dem Schriftdesign so nah wie möglich an die Wunschdarstellung heran zu kommen. Identisch wird ein Design auf der Basis relativer Größen nicht werden. Davon muss man sich verabschieden.
Im responsiven Design werden Schriftgrößen, Zeilenhöhen etc. auf der Basis von % und/oder em definiert. So entspräche eine Schriftgröße von ca. 16 Pixeln 100% oder 1em. Alle anderen Werte wären entsprechend umzurechnen.
Schritt 2: Weg von festen Layout-Grids
Wie bereits erwähnt, basierten Layouts älteren Semesters auf fixe Grids, gängig war zuletzt 960px, inzwischen wird vielfach auch 1.140px propagiert. Es ist weiterhin sinnvoll, seinen Layouts eine Obergrenze mit zu geben. So vermeidet man, dass das Layout auf einem Bildschirm mit 5.000px Screenbreite vollkommen auseinander gerissen wird. Die Obergrenzendefinition, etwa über max-width: 960px, erlaubt aber die Anpassung nach unten.
In gleicher Art und Weise werden alle Elemente der zu designenden Site auf ihre Maximalgrößen begrenzt und auf der Basis der Maximalgrößen auf relative Werte heruntergerechnet. Ein Element eines dreispaltigen Layouts würde so anstelle einer Pixelbreite von 300 im 960er Grid mit 20er Margins auf 31,25% definiert. Der Effekt ist klar. Das Element, etwa ein Bild wird bei jeder Bildschirmauflösung immer den gleichen Prozentanteil am Layout erhalten.
Bildern, Videos und anderen Objekten gibt man stets eine Maximalgröße von 100% mit (max-width:100%;). Für den Internet Exploder gibt es ein fertiges Script, das auch diesen Designerschreck in die Lage versetzt, so zu arbeiten.
Der geübte Designer erkennt sofort ein Problem. Bilder werden immer in voller Größe geladen, auch wenn die Anzeigegröße nur 31,25% beträgt. Da wäre es ja schöner, man hätte die Möglichkeit, entsprechend kleinere Bilder zu laden. Bei der Filamentgroup auf Github gibt es eine Javascript-Lösung, die genau das ermöglicht. Das Funktionsprinzip wird auf dieser Demoseite beschrieben. Skaliert einfach mal das Browserfenster.
Schritt 3: Media Queries
CSS Media Queries sind letztlich das Herzstück eines erfolgreichen responsiven Webdesigns. Mit dem bereits seit Jahren gebräuchlichen media-Tag, schon in der Vergangenheit stets benutzt, um ein spezielles Stylesheet für die Druckausgabe zu laden, lässt sich heutzutage die Steuerung der Anwendung bestimmter Stylesheets für bestimmte Devices sehr gut steuern.
Media Queries können mit bestimmten Features gekoppelt sehr dezidiert zum Aufruf angepasster Stylesheets genutzt werden. Es liegt in der Hand des Designers, wie weit er mit der Anpassung gehen will.
So könnte er mit dem Aufruf media=”screen and (min-width: 800px)” ein Stylesheet laden lassen, dass nur dann greift, wenn das Browserfenster des Nutzers auf mindestens 800 Pixel gezogen ist. Er könnte aber auch universeller werden und die Geräte-Breite ansprechen. Mit media=”screen and (max-device-width: 480px)” würde ein Stylesheet geladen werden können, das perfekt für Geräte agepasst ist, die eine maximale Breite von 480 Pixeln anzeigen können.
Auf folgende Features kann mittels Media Queries zugegriffen werden:
- width / height
- device-width / device-height
- aspect-ratio / device-aspect-ratio
- color-index / color
- orientation
- resolution
- scan
- grid
Media Queries werden von allen modernen Browsern nativ unterstützt. Alten Gurken macht ihr mit dem CSS3-Mediaqueries.JS von Entwickler van der Graaf Beine.
Natürlich könnte man das Thema nun in allen Bereichen vertiefen. Ich hoffe jedoch, interessierten Neueinsteigern ins responsive Webdesign einen groben Überblick über die wichtigsten Themen und Erfordernisse auf dem Weg zu einem Webdesign, das geräteunabhängig funktioniert, gegeben zu haben.
Auf der Website Mediaqueri.es findet ihr übrigens einiges an Inspiration. Mediaqueri.es ist ein Showcase für Websites, die Media Queries einsetzen und stellt eine bunte Vielfalt davon in ihren unterschiedlichen Anpassungen vor.
Wie sieht es bei euch aus? Schon mal den Einstieg gewagt? Wenn nein, warum nicht? Wann geht´s los?
Weiterführende Links zum Thema Responsive Webdesign:
- Responsive Webdesign: Umfangreiche Präsentation mit Tipps und Tricks - t3n News
- Responsive Webdesign: „Adaptive Images” optimiert Bilder automatisch - t3n News
- Responsive Webdesign kann er auch, der Werkzeugkasten Foundation 2.0 - t3n News
Und mehr zu CSS und HTML5:
- Geniale CSS-Animation: Der gehende Mann - t3n News
- Mobile Boilerplate V2 ist da: HTML5 Schnellstart für Web Apps - t3n News
- Wie viel HTML5/CSS3 kann dein Browser? Jetzt mit einem Klick testen! - t3n News
28 Antworten
von zapp 06.10.2011 (16:34Uhr) 1.
Find ich nach wie vor eine gute Sache. Leider steigt damit der Aufwand erheblich. Nicht nur auf Seite der Entwicklung (Das kann man gut in den Griff bekommen), sondern vor allem auch bei der Redaktion. Diejenigen die die Inhalte verwalten müssen in der Lage sein "responsive" zu denken und das ist einfach noch wenig verbreitet.
Ich glaube aber nach wie vor das im Responsive Web Design die Zukunft liegt. Das habe ich aber schon vor 2 Jahren gesagt, inzwischen hat sich viel getan, aber vom Mainstream ist es immer noch weit entfernt.
von Responsive Webdesign mit HTML5 und CSS3… 06.10.2011 (18:09Uhr) 2.
[...] Weiterlesen bei t3n >> [...]
von Responsive Webdesign mit HTML5 und CSS3… 07.10.2011 (03:08Uhr) 3.
[...] Responsive Webdesign mit HTML5 und CSS3 – Grundlagen » t3n News [...]
von Responsive Webdesign mit HTML5 und CSS3… 07.10.2011 (20:01Uhr) 4.
[...] Responsive Webdesign mit HTML5 und CSS3 - Grundlagen Responsive Webdesign wird gern verwechselt mit dem Design mobiler Websites. Das ist nicht völlig falsch, aber viel zu kurz gegriffen. Source: t3n.de [...]
von Frank 08.10.2011 (09:02Uhr) 5.
Das alles ist schön und gut, vom technischen Standpunkt aus gesehen - die Realität sieht aber anders aus, sofern man nicht für große Firmen tätig ist, die sich diesen Mehraufwand leisten können - der Handwerker, der eine neue Website braucht, kann dies sicher nicht ( und wahrscheinlich benötigt dieser das auch nicht ).
Somit - schön, dass es so etwas gibt, aber derzeit einfach vollkommen, sagen wir mal, unrealistisch.
von » Wie baut man eine richtige eigen… 12.10.2011 (11:58Uhr) 6.
[...] wäre da noch die Sache mit dem Webdesign (ich habe hier schon ein paar Tipps gefunden). Ich muss die Webseite natürlich auch irgendwie programmieren und dann optisch gestalten. Kann [...]
von Responsive Webdesign kann er auch, der W… 21.10.2011 (21:00Uhr) 7.
[...] im responsive Webdesign. Wer sich einen Überblick über die Grundlagen verschaffen will, sollte diesen t3n-Beitrag [...]
von Responsive Webdesign kann er auch, der W… 21.10.2011 (21:00Uhr) 8.
[...] im responsive Webdesign. Wer sich einen Überblick über die Grundlagen verschaffen will, sollte diesen t3n-Beitrag [...]
von Linkhub – Woche 41-2011 25.10.2011 (13:01Uhr) 9.
[...] Responsive Webdesign mit HTML5 und CSS3 – Grundlagen » t3n News [...]
von HTML5: Eigene Attribute für Elemente er… 26.10.2011 (14:34Uhr) 10.
[...] Bereich des Responsive Webdesigns werden Data-Dashs eingesetzt, um für ein Bild zwei unterschiedliche Quelldateien anzugeben. Dabei [...]
von Lesestoff von 30. September 2011 bis 3.… 03.11.2011 (08:05Uhr) 11.
[...] Responsive Webdesign mit HTML5 und CSS3 – Grundlagen » t3n News: Lesenswerte Einführung in das Responsive Webdesign: Wie baut man Webseiten so, dass sie sich optimal dem Gerät des Nutzers anpassen können? [...]
von Joomla – Content Management leicht… 05.11.2011 (10:43Uhr) 12.
[...] Hilfreiches, um Ihre Entscheidung für Joomla als Ihr Content Management System zu treffen. Bei Joomla handelt es sich um ein kostenlos zugängiges Content Management System, das durch seine e... repräsentieren, und dafür weder viel Geld noch viel Zeit investieren wollen oder können, dann [...]
von Feedback-System Tweedback für Präsenta… 05.11.2011 (14:55Uhr) 13.
[...] wurde mit Hilfe von Media-Querys des CSS-3-„Standards“ ein sich selbst anpassendes Layout („Responsive Webdesign“) gewählt.Alles andere folgt streng den Empfehlungen und Vorgaben des Frameworks.Funktionsweise [...]
von Responsive Web Design - eine Sammlung vo… 13.11.2011 (17:30Uhr) 14.
[...] Zitat stammt – als guter Einstieg zu empfehlen. Gleiches gilt für den tn3 Artikel “Responsive Webdesign mit HTML5 und CSS3 – Grundlagen“. Als weiterführende und tiefgreifendere Lektüre muss auch Ethan Marcottes Buch [...]
von iPhone Develeoper Conference – Das… 21.11.2011 (15:41Uhr) 15.
[...] Responsive Webdesign mit HTML5 und CSS3 – Grundlagen [...]
von Die besten responsiven WordPress Themes… 29.11.2011 (14:44Uhr) 16.
[...] verständlichen Text zum responsiven Webdesign mit HTML und CSS3 findet man auf tn3.de unter “Responsive Webdesign mit HTML5 und CSS3 – Grundlagen” von denen ich auch das obige Zitat entliehen [...]
von Webkrauts » Mobile Usability – G… 07.12.2011 (08:01Uhr) 17.
[...] Stattdessen wäre es sinnvoll, sich mit CSS Media Queries und den Techniken und Möglichkeiten des Responsive Webdesigns zu befassen. – Dazu kommt in einem der nächsten Türchen dieses Adventskalenders ein [...]
von joocom Technologie Blog» Blog Arch… 09.12.2011 (13:39Uhr) 18.
[...] Entwickeln von Websites, die sich dem Betrachter und des von ihm verwendeten Geräts anpassen -> Responsive Webdesign und hier im [...]
von El Golfo Webdesign 17.12.2011 (12:42Uhr) 19.
Ich schließe mich Frank an. Wenn der Erstellungs- und Wartungsaufwand zu groß wird, ist das Mehrkosten/Mehrnutzen -Verhältnis nicht positiv.
Die meisten Unternehmen schaffen es ja noch nicht einmal, sich eine suchmaschinenoptimierte und conversionoptimierte Webseite erstellen zu lassen. Warum dann über Möglichkeiten nachdenken, die die Bedienung für 20% der Seitenbesucher angenehmer machen, wenn mit 80% der potentiellen Seitenbesucher gar nicht kommuniziert wird?
Man sollte die Entwicklung natürlich im Auge behalten. In der Regel ist eine Anapssung für iPads mit einer Auflösung von 1.024 Pixeln für den Otto-Normalanbieter nicht nötig, wenn es sich nicht um eine starre Überbreiten-Seite oder Flash-Seite handelt. Ob man nun iPhones mit 960 Pixeln berücksichtigen sollte, sollte jedoch gut überlegt werden. Relative Schriftgrößen sind schon aus Gründen der Barrierefreiheit meiner Meinung nach sinnvoll.
von Responsive Web Design « Chacun ses… 29.12.2011 (23:46Uhr) 20.
[...] Yeebase media GmbH, t3n (2011): Responsive Webdesign mit HTML5 und CSS3-Grundlagen (06.10.2011) http://t3n.de/news/responsive-webdesign-html5-css3-grundlagen-335305/ • Webstandard (2011): Responsive Webdesign – Verschiedene Devices simulieren und testen [...]
von Responsive Website – flexible Komp… 30.12.2011 (10:33Uhr) 21.
[...] hilfreiche Informationen zum Thema findet man unter folgendem Link: http://t3n.de/news/responsive-webdesign-html5-css3-grundlagen-335305 [...]
von Torsten 09.01.2012 (17:47Uhr) 22.
@Frank und @El Golfo Webdesign:
Das ist aber zu kurz gedacht. Immer mehr Benutzer browsen mit Mobilgeräten, und da muss man einfach einem Kunden klar machen, dass er diese verschreckt, wenn sie seine Seiten nicht ordentlich anschauen können. Und um den Aufwand zu minimieren, kann man ja ein entsprechendes Framework benutzen, es gibt ja schon einige brauchbare. Die 20 % Benutzer, die mit kleinen Displays surfen, werden im übrigen bald schon 40 % sein. Wollt ihr die alle unberücksichtigt lassen, indem ihr euch nicht schon jetzt auf diesen Trend einstellt?
Und ich möchte auch mal die Behauptung aufstellen, dass einige Unternehmen nur deswegen keine suchmaschinenfreundliche, geschweige denn -optimierte Website haben, weil sie an einen unfähigen oder unwilligen Webdesigner oder Werbeagentur geraten sind.
Gerade durch Mehrleistungen kann man sich doch von inkompetenter Konkurrenz absetzen, die schließlich oft genug dem Kunden viel Geld trotz mangelhafter Leistungen aus der Tasche zieht. Irgendwann merken es manche Kunden dann doch, und ich möchte jedenfalls keiner sein, über den dann geschimpft wird. Nein, ich glaube, überdurchschnittliche Leistungen sprechen sich mit der Zeit herum, ihr werdet weiterempfohlen und sichert euch so eure Existenz.
Meine eigenen Websites habe ich noch nicht auf Resposive Web Design umgestellt, werde das aber in Kürze tun, wenn möglich jetzt im Januar 2012 noch.
von Relaunch bei der Bremer Touristik Zentra… 14.01.2012 (09:05Uhr) 23.
[...] und groß. Gerade der Text ist jedoch auf einem Smartphone kaum noch lesbar. Hier wäre ein responsives Design sinnvoll gewesen, welches den Versatz der Spalten sowie eine dynamische Anpassung der [...]
von Sind GartenbloggerInnen auf der republic… 20.01.2012 (16:07Uhr) 24.
[...] Responsive Webdesign bedeutet gob die Anpassung der Gestaltung an die unterschiedlichen Ausgabesysteme. Die Seite passt sich dem viewport des Users an, ob Desktop-Rechner oder Smartphone, die Inhalte sind für das jeweilige Endgerät angepasst. Da die BesucherInnen über Smartphones weiter zunehmen werden, ein irgendwann sowieso notwendiger Schritt. Einen guten Einstieg in das Thema Responsive Webdesign bietet der Artikel der t3n. [...]
von PR für NPO: World Vision im Social Web… 27.01.2012 (16:45Uhr) 25.
[...] haben wir auch die mobile Site neu gestaltet, dieses Mal mit einem zeitgemässen responsiven Webdesign. Das bedeutet, dass unsere mobile Seite auf praktisch allen Geräten wie Smartphones, Pads oder [...]
von Tobi baut sich eine Homepage – Tei… 30.01.2012 (21:44Uhr) 26.
[...] Die Seite soll responsive sein, soll heißen, Engeräte unabhängig. Sie soll sich der Auflösung des Endgerätes anpassen, [...]
von Was ist eigentlich responsive Webdesign?… 05.02.2012 (13:35Uhr) 27.
[...] via Responsive Webdesign mit HTML5 und CSS3 – Grundlagen » t3n News. [...]
von Kai 14.02.2012 (20:51Uhr) 28.
Schöner Artikel und übersichtlich erklärt. Danke dafür.
Werde das ganze demnächst auch in eigenen Projekten umsetzen!
Grüße