WikiDer > Sich anpassendes Webdesign

Ein Beispiel dafür, wie sich verschiedene Elemente einer Webseite an die Bildschirmgröße verschiedener Geräte anpassen, wie z Bildschirm von a Desktop-Computer, ein Tablet und ein Smartphone

Sich anpassendes Webdesign ist eine Näherung von Web-Design wo der Webentwickler nach einem optimalen Weberlebnis für eine Vielzahl von Geräten strebt (von Desktop-Computerbildschirmen bis hin zu Mobiltelefonen). Das Design einer responsiven Website skaliert mit den Abmessungen eines Bildschirms, ohne Kompromisse bei der Lesbarkeit des Textes oder der Benutzerfreundlichkeit der Benutzeroberfläche.^[1]

Geschichte

Der Begriff Responsive Webdesign wurde 2010 von Ethan Marcotte auf dem Weblog A List Apart geprägt. Marcotte stellte damals fest, dass immer mehr Unternehmen in eine mobile Website investieren, um ihren Kunden auch ein optimales mobiles Erlebnis zu bieten. Aber aufgrund der wachsenden Zahl von Geräten, alle mit eigenen Auflösung und Abmessungen war eine mobile Website keine optimale Lösung. Anstatt in festen Abmessungen zu entwerfen, ein Ansatz, der bis in das Druckzeitalter zurückreicht, stellte Marcotte fest, dass es viel praktischer sei, in Prozenten und anderen relativen Einheiten zu entwerfen.^[1]

Techniken

Eine responsive Website passt sich durch flexible Raster an die Umgebung an, in der sie angezeigt wird.^[2] flexible Bilder^[3] und CSS3Medien-Anfragen.^[4] Einige der von Marcotte entwickelten Techniken sind:

Flexible Raster und Bilder

Die flexiblen Raster sorgen dafür, dass Elementbreiten und -höhen nicht in Pixeln, sondern in relativen Einheiten wie Prozent und em bestimmt werden. Elemente in einem flexiblen Raster skalieren immer auf einen Prozentsatz des Elements, in dem sie sich befinden, oder auf die Abmessungen des sichtbaren Bereichs des Browsers.^[2]

Flexible Bilder werden auch relativ skaliert, sodass sie nie unverhältnismäßig angezeigt werden.^[3]

Medien-Anfragen

Media Queries geben der Webseite einen Hinweis auf die Abmessungen des Gerätes, auf dem die Webseite geladen wird. Normalerweise wird die Breite des Bildschirms als Ausgangspunkt genommen.^[5] Die Website kann auch die Pixeldichte eines Bildschirms berücksichtigen,^[6][7] um beispielsweise Bilder mit einer höheren Auflösung zu laden.

Beispiel:^[8]

/* Smartphones (Hoch- und Querformat) ----------- */@MediennurBildschirmund(minimale Gerätebreite:320px)und(max-device-width:480px){/* Stile */}/* Smartphones (Querformat) ----------- */@MediennurBildschirmund(Mindestbreite:321px){/* Stile */}/* Smartphones (Hochformat) ----------- */@MediennurBildschirmund(maximale Breite:320px){/* Stile */}

Haltepunkte

Wenn der sichtbare Teil des Browsers (auch als Ansichtsfenster genannt) verkleinert wird, ist die Website möglicherweise nicht mehr optimal nutzbar. Ein Beispiel ist eine Seitenleiste, die dem Inhalt mit einem kleinen Ansichtsfenster im Weg steht. In einer solchen Situation ist es üblich, einen Breakpoint im CSS zu erstellen und die Sidebar nicht mehr nach rechts schweben zu lassen, sondern unterhalb des Inhalts anzuzeigen.^[9]

Breakpoints sind nicht festgelegt. Ein häufig verwendeter Ausgangspunkt ist, (ungefähr) die Abmessungen eines Smartphones wie des iPhones und eines Tablets wie des iPads zu verwenden. Aber oft ist es besser, die Seite im Browser zu skalieren und einen Breakpoint zu wählen, wenn die Seite nicht mehr optimal dargestellt wird.^[8]

Zuerst mobil

Eine weitere aufkommende Designphilosophie ist zuerst mobil. Dies basiert zunächst auf dem kleinsten Bildschirm, für den das Design (Smartphone) verwendet wird, und dann werden das Design und die Möglichkeiten skaliert, wenn das Viewport größer wird. Ein häufig genanntes Argument für zuerst mobil lautet: Wer klein anfängt, kann sicher sein, dass der Fokus auf den wesentlichen Inhalten liegt, der immer gut dargestellt wird.^[10]

Hindernisse

Das Testen von responsiven Websites ist schwieriger als das Testen einer normalen Website. Die große Auswahl an unterschiedlichen Bildschirmgrößen und Browsern ist manchmal schwer nachzuahmen. Auch die Funktionsfähigkeit von Javascript in mobilen Browsern ist teilweise eingeschränkt, was z.B. a zusammenklappendes Menü macht es fast sofort nutzlos. Ein Dienst wie Viewporter bietet eine Lösung, ist aber nicht perfekt. Der Dienst ermöglicht das Testen von Websites in unterschiedlichen Bildschirmgrößen, jedoch können bestimmte Fehler in verschiedenen Browsern nicht mehr behoben werden. Der Aufbau eines Gerätelabors ist eine bessere Alternative, kann aber sehr teuer sein.^[11]

Es kann auch vorkommen, dass eine Seite auf ein mobiles Gerät geladen wird, aber auch alle Inhalte aus der Desktop-Version geladen werden. Die Ladezeiten großer Bilder belasten das Mobilfunknetz stark und behindern die Geschwindigkeit der Website bei der mobilen Nutzung.^[12] Um dem entgegenzuwirken, kann man die serverseitige Browsererkennung in Kombination mit Responsive Webdesign (RESS) einsetzen.^[13]

Auch der Online-Werbemarkt ist noch nicht vollständig an die Flexibilität von Responsive Webdesign angepasst.^[14] Dimensionen von (Flash-)Werbung sind meistens standardisiert und kann nicht skaliert werden. Videos sind auch schwer responsive zu implementieren. Bei häufiger Nutzung von Werbung oder Videos kann alternativ eine separate mobile Website gewählt werden, auf der mobile Werbung angezeigt werden kann.^[15]