HTML/Tutorials/responsive Webdesign

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Unter einer responsiven Gestaltung einer Internetseite versteht man, dass das Layout der Seite für das Ausgabemedium angepasst wird. Übersetzt wird das englische Adjektiv „responsive“ etwa mit „ansprechbar“, „empfänglich“, „zugänglich“ oder „antwortend“, was auf den ersten Blick nicht sehr viel mit dem Internet zu tun hat. Worauf sollte eine Webseite ansprechen? Nun, eine Webseite kann über media queries das Ausgabemedium analysieren und antworten, indem sie eine dem Medium angepasste Darstellung zeigt.

Brad Frost zeigt in Responsive Web Design: Missing the Point[1], dass es nicht darum geht, neben einer Desktop-Version noch eine oder mehrere mobile Layoutvarianten zu erstellen, sondern Seiten zu erstellen, die möglichst geräteunabhängig schnell laden und überall gut aussehen.[2]

This is not the Web - Übersicht verschiedener Viewports


This is not the Web - Übersicht verschiedener Viewports


This is not the Web - Übersicht verschiedener Viewports

Empfehlung: Sie sollten die Darstellung nicht an eine bestimmte Viewportgröße koppeln, sondern sie tatsächlich nach Ihren Inhalten ausrichten.


Inhaltsverzeichnis

[Bearbeiten] Layoutkonzepte

[Bearbeiten] Liquid Layout

Bereits in der Ära der Tabellen-Layouts waren viele Seiten responsiv, da sie auf feste Breitenangaben verzichteten und sich so unterschiedlichen Viewport-Größen anpassten. Allerdings wurden viele Spalten bei kleinen Bildschirmen zu schmal, sodass längere Wörter überstanden. Eine andere Anordnung war nicht möglich.

[Bearbeiten] responsives vs. adaptives Design

Auf den ersten Blick scheint dies das gleiche zu bedeuten. Während responsive Seiten stufenlos skalieren, passen sich adaptive Webseiten bei bestimmten Viewport-Breiten (meist in 3 Varianten: mobile, Tablet und Desktop) an die neuen Größenverhältnisse an. Beide Methoden ergänzen sich. Lassen Sie den Inhalt entscheiden, welche Methode geeigneter ist. Der Kulturbanausen-Blog hat einen sehr informativen Artikel zum Thema geschrieben[3][4], auf dem Froont-Blog gibt es sehr anschauliche Animationen zum Thema:[5]

gegenüberstellung adaptive vs. responsive Webdesign

Die Gefahr bei rein responsiven Seiten sind die bei kleinen Viewports immer schmaler werdenden Elemente - während adaptive Seiten mit breakpoints die Elemente anders aufteilen.

[Bearbeiten] feste oder relative Größen

Gerade Anfänger entwickeln ein Layout anhand der realen Pixel der Bildschirmauflösung ihres Geräts, meist eines Desktop-Computers. Dabei vernachlässigen sie jedoch wieder die vielen anderen und auch zukünftig noch erscheinenden Geräte. Des Weiteren können Webseiten in Mobilgeräten mit einem Wisch skaliert werden. John Alsopp vergleicht Webdesign in „A Dao of Web Design “ mit Wasser, dessen Fluss zwar gelenkt, aber nicht künstlich aufgestaut werden kann. [6]

Die Maxime, Webseiten auf allen Ausgabegeräten gleich aussehen zu lassen, muss schon an der unterschiedlichen Pixeldichte von Mac (72dpi) gegenüber Windows (96dpi) scheitern, bei denen ein fester Wert von body {font-size: 14px} per se keine gleichen Abmessungen erzielt.

Empfehlung: Richten Sie die Abmessungen von Schriftgröße, Seitenelementen und den Breakpoints der media queries nicht nach festen Pixeln, sondern nach relativen Größen wie em oder rem aus, sodass sich das Layout an den tatsächlich vorhandenen Schriftgrößen ausrichtet.

Eine Ausnahme bilden verschachtelte Elemente wie Logos, Sticker und Buttons, bei denen die Kindelemente in festen Relationen zueinander stehen. Hier können feste Pixelgrößen helfen, das Aussehen gleich zu halten.

[Bearbeiten] Vektor- oder Rastergrafiken

Kleine Icons aus jpg- oder gif-Grafiken wirken auf hochauflösenden Bildschirmen oft pixelig. Daneben sorgt eine Vielzahl von Grafiken für viele http-Requests, die die Ladezeit der Seite erhöhen.

Empfehlung: Erstellen Sie SVG-Icons. Sie sind immer gestochen scharf, skalierbar und können sogar bei größeren Viewport-Größen zusätzliche Details einblenden

[Bearbeiten] Mobile first!

Da die meisten Webseiten schon in irgendeiner Form vorhanden sind, liegt es nahe, dieses Layout an bestimmten Breakpoints mittels Media Queries an kleinere Viewports anzupassen. Dabei stand man vor dem Problem, dass Dekorationen und Grafiken nicht auf die kleineren Monitore passen. Trotz der Bandbreitenbegrenzungen vieler Mobilfunk-Verträge wurden diese aber mitübertragen und geladen, dann aber ausgeblendet.

Luke W. hatte in seinem Buch „Mobile First!“[7] die Idee, den Prozess umzudrehen und mit einer abgespeckten, mobilen Version zu beginnen. Dies sollte aber kein Selbstzweck sein, sondern den Fokus wieder auf die ältere, aber immer noch gültige Maxime „Inhalt über Design“ und andere Usability-Grundsätze legen.

[Bearbeiten] Device-agnostic

Agnostizismus (altgriechisch ἀγνοεῖν a-gnoein „Unwissen“) ist die philosophische Ansicht, dass Annahmen – insbesondere theologische, welche die Existenz oder Nichtexistenz einer höheren Instanz, beispielsweise eines Gottes, betreffen – entweder ungeklärt oder grundsätzlich nicht klärbar sind.[8]

Trent Walton bevorzugt anstelle des Begriffs Responsive Webdesign den des Device-Agnostic.[9] Damit will er betonen, dass Webdesigner nicht ahnen können, welche Geräte mit welchen Fähigkeiten Benutzer einsetzen werden und daher möglichst geräteunabhängig gearbeitet werden soll. Dabei geht seiner Meinung nach die Betonung weg von der Responsiviät mittels Media queries und hin zu Techniken, die geringe Übertragungsraten in mobilen Netzen und Besonderheiten der Toucheingabe genauso berücksichtigen.

[Bearbeiten] Tastaturen, Mäuse und Touchgeräte

Viele JavaScript-Interaktionen und CSS-Hovereffekte funktionieren auf Touchgeräten nicht, da es kein mouseover und kein :hover gibt. Zum Teil versuchen die Browser dieses Verhalten nachzuahmen, besser ist es jedoch bereits bei der Programmierung Touch-Events zu implementieren.

Webseiten im Fullscreen-Modus können mit [ESC] wieder in die klassische ansicht zurückgesetzt werden, nur nicht auf Touch-Geräten, da es dort keine Tasten gibt. Auch der Klammergriff [alt] [strg] [entf] ist auf Touchgeräten nicht möglich.

Beachten Sie: Schließen Sie bei media queries auf keinen Fall von kleinen Viewport-Größen auf das Vorhandensein von Touch-Geräten. Manch kleines Mobilgerät hat eine Tastatur, während es schon 30-Zoll-Touch-Screens gibt.

[Bearbeiten] Performance-Optimierung

Scott Jehl legte in seinem Artikel „Planning for Performance“[10] das Augenmerk auf die sich immer weiter steigernde Datenmengen, die heutige Webseiten ausliefern. Während die durchschnittliche Webseite 1,7 MB gross ist, haben manche responsive Seiten wie disney.com, die für jeden Browser die passenden Frameworks, Grafiken und Skripte ausliefern über 5 MB!

Gerade angesichts der Tatsache, dass Benutzer mobiler Geräte nicht nur über WLAN, sondern auch über 3G surfen, sollten Webseiten nicht nur responsiv sondern auch schlank sein. Das Surfen im Mobilnetz bewirkt eine zeitliche Verzögerung von 2 Sekunden beim Seitenaufbau, da der Datenstrom vom Server zusätzlich noch den Funksender des Mobilfunknetzes passieren muss.

Auch wenn LTE und 4G diese Antwortzeiten verringert haben, ist mobiles Surfen an sich langsamer als Surfen mit WLAN oder in Kabelnetzen. Deshalb sollten Sie versuchen, die Anzahl der http-Requests so gering wie möglich zu halten. Normalerweise blocken externe CSS-Dateien und JS-Skripte im Unterschied zu Grafiken das Rendering einer Seite. Durch das Nachladen von Stylesheets mit Hilfe von Skripten und nachträglichem Einfügen mittels document.write wird der schon gerenderte Seiteninhalt wieder verändert.

Empfehlung: Vermeiden Sie ein Laden der Seite, bevor die Stylesheets geladen sind. Dieses FOUC (Flash of unstyled Content) ist extrem ärgerlich und verzögert den Seitenaufbau.

[Bearbeiten] Quellen

  1. Brad Frost: Responsive Web Design: Missing the Point
  2. Brad Frost: This is the web
  3. blog.kulturbanause: Adaptive Website vs. Responsive Website
  4. css-tricks.com: The Difference Between Responsive and Adaptive Design
  5. froont:com 9 GIFs That Explain Responsive Design Brilliantly
  6. alistapart: A Dao of Web Design von John Alsopp (07.04.2000)
    sehr interessanter Artikel, der Webdesign unter dem Aspekt des Tao vergleicht
  7. Luke W.: „Mobile First!“
  8. Wikipedia: Agnostizismus
  9. Trent Walton: Device-Agnostic
  10. alistapart.com: „Planning for Performance“ von Scott Jehl

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML