Feststehende Größen: Die Säulen des responsive Webdesign


Der Browser ist die Leinwand eines Webdesigners. Anhand eines Grids, ein erstelltes Raster um Elemente auf der Internetseite zu ordnen, füllt der Webdesigner die Internetseite mit seinem kreativen Inhalt. Basierend auf Zielgruppenanalysen wurde eine Größe von 1024×768 Pixeln für die Gestaltung gewählt. In manchen Fällen traut er sich an eine Auflösung von 1280×1024 Pixeln heran. Bei einem klassischen Screen-Design bringt er ein 3-Spalten-Layout zum Einsatz. Ausgabegeräte wie Smartphones oder Tablets im Portrait-Format können dies schon nicht mehr benutzerfreundlich darstellen. Eine Anpassung des Grids ist die Folge.

Seit Jahren stürmen Hersteller genau dieser Devices nun den Markt. Subdomains mit vorangestelltem „m“ als Kennzeichnung „optimierter“ Internetseiteeiten für mobile Geräte treten ebenso häufig auf. Jedoch gelingt in den wenigsten Fällen eine gute Umsetzung. Meist sind diese Seiten nur rudimentär umgesetzt. Frei nach dem Pareto-Prinzip, mit 20 Prozent Aufwand ein 80 Prozentiges Ergebnis zu erzielen. Leider bleibt es oft bei diesen 80 Prozent was zur Folge hat, dass die nötigsten Funktionen nur sehr spartanisch angeboten werden. Die User Experience, also die Benutzerfreundlichkeit, bleibt dabei auf der Strecke. Bedenken Sie bitte: Es gibt kein mobiles oder stationäres Internet. Es ist DAS Internet. Ebenso wie auf dem Bildschirm zuhause oder im Büro stellen die Nutzer implizit die Anforderung, dass eine Internetseite automatisch auf jedem Ausgabegerät gut aussieht, vollen Funktionsumfang bietet und vor allem nutzbar ist.

 

Keine feststehende Größen

Ob Headline oder Fließtext, ob Bilder oder Grafiken. Sie müssen angepasst werden und selbst auf Smartphones lesbar und gut zu erkennen sein. Ist dies nicht der Fall, entsteht hier ein großer Conversionskiller. Informationen sollen auf kleinstem Raum auch gut und ohne Aufwand zu entschlüsseln sein. So kann eine Schriftgröße von 14pt auf dem Bildschirm gut gelesen werden. Auf dem Smartphone hingegen bedeutet das Augenschmerzen. Hier muss der zu lesende Artikel schon sehr interessant sein, dass sich der Leser durch quält. Eine feste Schriftgröße ist demnach tabu. Es kann mit prozentualen Werten gearbeitet oder auf alternative Maße wie „em“ zurückgegriffen werden. JavaScript Plug-Ins wie FitText skalieren dabei eigenständig die Größe von Headlines. Bilder müssen entsprechend skaliert werden. Obendrein sollen sie auf den hochauflösenden Retina oder den 4K-Displays gut aussehen und scharf dargestellt werden. Eine Zwickmühle. Werden sie auf dem stationären PC mit großem Bildschirm und schnellem Internet flott geladen und gestochen scharf dargestellt, kann ein zu großes Bild zu langen Wartezeiten führen, wenn man mit dem Smartphone unterwegs ist. Abhängig von der Bildschirmauflösung lädt beispielsweise ein JavaScript Plug-In der Filament Group die gewünschte Grafik. So wird die Ladezeit verkürzt und die Nerven des Nutzers geschont. Eine weitere Option über HTML die korrekte Bildgröße auszuliefern bietet Adaptive Images.

 

Das Pflege-Aufwand-Dilemma

Da den Nutzern natürlich der gesamte Funktionsumfang geboten werden soll, was eine gute mobile Website ausmacht, erstellen Sie eine mobile Version Ihrer Internetseite. Genauer genommen sind es mindestens drei: Smartphone (unter 480 Pixel), Tablet (unter 800 Pixel) und Bildschirm (über 800 Pixel). Ein Tablet beispielsweise wird aber nicht immer in der Portrait-Ansicht genutzt sondern kann auch gedreht werden für die Landscape-Ansicht. Ebenso verhält es sich mit den kleineren Kollegen, den Smartphones. Sie ahnen worauf ich hinaus möchte? Sie fangen an für jedes Gerät eine spezifisch optimierte Seite zu erstellen. Insgesamt also fünf Seiten. Diese müssen auch gepflegt werden. Also setzen Sie bei allen Versionen erneut an um diese zu optimieren. Das endet bei hohen Wartungskosten und in einem bald nicht mehr überschaubaren Pflege-Dilemma.

 

Wie hilft responsive Webdesign Ordnung in das Chaos zu bringen?

Responsive bedeutet „reaktionsfähig“ zu sein. Klingt so, als ob diese Technik bei dem vorherrschenden Wust an Geräten Licht in das dunkle Webdesign Nirvana bringen könnte. Wie funktioniert das Ganze nun?
Einfach gesagt, reagiert das Design auf den Nutzer. Egal mit welcher Auflösung er surft. Dazu benötigt man Konsistenz der Elemente, die sich auf der Seite befinden. Bilder, Tabellen, Logos, Texte, Videos… Alles muss sich flexibel anpassen. Flexibilität ist also das große Geheimnis.

 

Flexible Layout-Grids

Für viele Designer und Entwickler ein Graus! Haben sie sich doch an fest platzierte Elemente und angepasste Schriftgrößen gewöhnt. Nur so kann ihrer Meinung nach gewährleistet werden, dass die Seite gut aussieht und alles einem roten Faden folgt. Jedoch wird auch bei flexiblen Layouts nichts dem Zufall überlassen. Ok, mal offen gesprochen: In der Planungs- und Konzeptionsphase kostet das Responsive-Modell mehr Schweiß und Arbeit. Dafür ist die Pflege einer responsiven Internetseitedeutlich geringer. Für die Planung empfiehlt sich die „mobile first“ Maxime. Ein Bottom-Up Vorgehen, bei dem die kleinste Konstante zuerst betrachtet wird. In jedem Fall das Smartphone. Es werden zuerst die wichtigsten Informationen festgelegt und ausgearbeitet wie diese dargestellt werden sollen. Es ist deutlich einfacher, Details hinzuzufügen als diese später zu entfernen. Außerdem wird die Entwicklung der Seite ganzheitlich betrachtet.
Für die Umsetzung werden für Seiten und deren Elemente prozentuale statt fest vorgegebene Pixelwerte verwendet. Der Vorteil liegt auf der Hand: die Seite passt sich den Gegebenheiten an, unter denen sie verwendet wird und reagiert so auf ihren Nutzer.