Einer für alle: Responsive Design

25. Juli 2012

Responsive Webdesign bezeichnet die dynamische Anpassung des Inhalts für verschiedene Endgeräte, wie Displays von Laptop, PC, Tablet/IPad, Smartphone und auch TV ...

In der Automobilindustrie ist die Strategie der Gleichteile ein wesentliches Instrument zur Effizienzsteigerung in der Automobilproduktion. So nutzt Volkwagen die sogenannte Golf-Plattform auch für die Produktion des Touran und EOS. Die Tochterunternehmen wie Audi, Seat und Skoda bedienen sich auch dieser Plattform, die Konzentration liegt mehr auf der Entwicklung verschiedener Modellvarianten unter Nutzung einer bestimmten standardisierten Basisproduktion (s. auch dazu Produktivitätsexplosion durch Gleichteile).

In der Regel eilt das Digitale dem Traditionellen/Klassischen voraus. In dem Bereich Responsive Design scheint diesmal das Digitale der Follower von etablierten Methoden zu sein. Die Effizienz der Produktion birgt ein deutliches Kosteneinsparungspotenzial sowie die Möglichkeit, leichter und flexibler Varianten bzw. eigene Modelle zu kreieren.


 
Abbildung: Beispiel für Responsive Design

Back to the roots
Die Mutter oder besser mittlerweile die Großmutter aller HTML-Dialekte und XML-DTDs ist SGML (Standard Generalized Markup Language). SGML als Auszeichnungssprache für jegliche Dokumente unterscheidet bei Dokumenten nach Inhalt und Layout. SGML ist ein offizieller Standard seit 1986 und damit einige Jahre vor der Nutzung von HTML im Rahmen des WWW.
Durch die Verbreitung von HTML, welches die Unterscheidung von Inhalt und Layout aufweichte, rückte SGML in den Hintergrund. HTML war die Sprache, mit der man leicht Webseiten nicht nur inhaltlich sondern auch gleich das dazugehörige Layout erstellen konnte. So wurde der Grundgedanke von SGML in Anbetracht des Mehraufwands verbannt und man nutzte lieber das damals eher proprietäre HTML-Format.
 

Abbildung: Zusammenhang SGML – HTML – XML

Wie auch immer, die Endgeräte für Internet-Inhalte werden vielfältiger. Früher wurden Webseiten für verschiedene Browsertypen optimiert, heute für verschiedene Devices. Wir sind wieder bei dem Grundgedanken von SGML – der Trennung von Inhalt und Layout.

Standardisierung im Backend – Individualisierung fürs/im Frontend
Responsive Webdesign bezeichnet die dynamische Anpassung des Inhalts für verschiedene Endgeräte, wie Displays von Laptop, PC, Tablet/IPad, Smartphone und auch TV.

Das Frontend gibt den Rahmen für die Präsentation der Inhalte vor, so sind folgende Parameter dabei von Bedeutung:
Displaygröße, Bildschirmauflösung, Betrachtungswinkel gerade bei Tablets/iPads und mögliche Eingabemöglichkeiten. (Link)

Zwei Basis-Techniken ermöglichen die Aufwertung von HTML, um die Trennung von Layout und Inhalt quasi ex post wiederum zu ermöglichen.

CSS3 und HTML5 im weiteren Sinne bieten als neue Basis-Auszeichungsformate Möglichkeiten, die verschiedenen Frontends entsprechen zu berücksichtigen. HTML5 soll 2014 final entwickelt sein. Momentan befindet sich HTML5 in dem Status „last call“, welches einen finalen Status widerspiegelt. Vor diesem Grund nehmen zunehmend Browser die Möglichkeiten von HTML5 auf und die Entwicklung von Internet-Inhalten orientiert sich an dieser „quasi-finalen“ HTML5-Auszeichnungssprache.
 


HTML5-Spezifikations-Übersicht (Urheber: Peter Kröner, http://de.wikipedia.org/wiki/HTML5)

Mit Hilfe von sogenannten CSS - Media Queries können Parameter des jeweiligen Endgeräts bestimmt werden. Auf Basis dieser Daten kann dann für jedes Endgerät ein ganz eigener CSS-Code ausgeliefert werden.

Layout-Grids als Technik
Eine Technik ist die Verwendung von Grids. Durch solche Grids werden die Inhalte organisiert und dann unterschiedlichen Endgeräten zugewiesen.
Die Darstellung einer Website auf einem großen Bildschirm kann sehr viele Inhalte z.B. in einzelnen Grids nebeneinander (wie Spalten) darstellen. Gewöhnlich werden hier die wichtigsten Inhalte eher dort stehen, wo der Nutzer beginnt die Inhalte zu erfassen, also bei uns von links nach rechts.
Anders verhält es sich auf einem Smartphone mit einem kleinen und schmalen Display. Hier werden die Inhalte von oben nach unten angeordnet und wahrscheinlich eher als 1-spaltiges Layout.

Layout-Grids können hier als Basis für unterschiedliche Internet-Inhalte angelegt werden und entsprechend leicht skaliert werden.


 
Abbildung: Grids im Rahmen von Responsives Design (Quelle)

Wichtig dabei ist, dass die Inhalte mitskaliert werden. Alleine die Parameter der Bildschirmgröße und der Browserfenstergrößen sind systembedingt fast unendlich.

Texte
Texte können leicht skaliert werden. Man nutzt einfach ein entsprechend großes Textfeld oder Scrollbalken. Streng genommen sollte auch der Text an sich angepasst werden, aber dazu mehr im Ausblick weiter unten.

Bilder
Wie verhält es sich mit Bildern? Bilder oder auch andere multimediale Inhalte müssen flexibel an die Parameter angepasst werden. Wenn ein Bild bildschirmfüllend erscheinen soll, kann man den relativen Wert des Bildes angeben. Auf der anderen Seite macht es Sinn, bei kleinen Displays wie bei einem Smartphone ein kleineres Bild zu laden und anzuzeigen.
Ein Beispiel verdeutlicht dieses: „The following image will automatically load either a small, medium, or large version depending on screen resolution, as long as cookies are enabled”

 
Quelle


Ausblick
HTML5 ist da und wird zunehmend in den Browsern vollständig integriert. Parallel werden die Internet-Inhalte entsprechend für ganz unterschiedliche Displays und Eingabemöglichkeiten angepasst.

Die Tendenz ist klar: Ein Inhalt für mannigfaltige Nutzungen. HTML5 greift den damaligen Ansatz der Trennung von Inhalt und Layout auf. Wichtig ist, dass HTML5 nur die technische Basis schafft. Das Design von Grids stellt z.B. eine neue Aufgabe der Gestaltung und des Designs dar.

Semantische Bedürfnisse beachten
Ein Aspekt kommt bei der gesamten Diskussion von Responsives Design zu kurz. Der Inhalt selbst muss nicht nur technologisch angepasst werden, sondern auch inhaltlich. So wie ein Bild in unterschiedlichen Größen vorliegt, so muss ein Text in unterschiedlicher Länge und Detailierung für unterschiedliche Plattformen vorliegen.
Ein Smartphone-Nutzer hat nicht nur ein anderes Display sondern auch andere Informationsbedürfnisse wie ein PC-Nutzer mit einem großen Display. Nicht nur das Layout muss z.B. mit HTML5 angepasst werden, auch ein anderer Inhalt ist notwendig.
Auf einem iPad erwartet der Nutzer mehr multimedialen Content als auf einer Website mit einem vorwiegend textlastigen Nachrichtenteil.
 

Lassen Sie uns in einem Responsives Design denken – technologisch und auch semantisch!

Die meistgelesenen Artikel bei 3m5.
Diese Webseite nutzt Cookies, um sicherzustellen, dass Sie bei der Nutzung die bestmögliche Erfahrung machen. Weitere Informationen zum Datenschutz erhalten Sie in der Datenschutzerklärung.
Ablehnen Cookies zulassen