Trends im mobilen Webdesign - Teil 2

Elastische Layouts, Frameworks und Rastersysteme

Die knapp bemessene Fläche des Displays eines mobilen Endgeräts gilt es bis auf den letzten Pixel zu nutzen, und so werden starre, pixelgenaue Layouts immer mehr zugunsten elastischer verworfen. Pixelgenaue Layouts, die das Web bisher dominierten, können sich an geringfügige Abweichungen der Displayauflösung mobiler Endgeräte nicht anpassen, ohne den Benutzer zum scrollen oder zum Zoomen zu zwingen. Ein gutes Beispiel für ein elastisches Layout bietet die deutsche Website der Mobilsparte von Sony . Das elastische Layout reagiert auf die aktuelle Breite des Browserfens-ters, indem es die Abbildungen neu anordnet und die Texte neu formatiert.

Der Einsatz elastischer Einheiten wie em und Prozent nimmt ebenfalls zu. Dieser Trend folgt der aktuellen Empfehlung von W3C, den Einsatz der px-Einheit (mit der gelegentlichen Ausnahme von print-Stylesheets) zugunsten von elas-tischen Einheiten zu verwerfen. Zahlreiche CMS-Themes reflektieren bereits diese Empfehlung, darunter zum Beispiel Bonpress.

Eine besondere Herausforderung im responsiven Webdesign stellen Datentabellen dar. Das Hinein- und Hinauszoomen durch den Benutzer ist hier aus Gründen der Usability keine gute Option. Viele Webdesigner greifen daher lieber - zumindest in Smartphone-optimierten Layouts - zunehmend auf Diagramme und Illustrationen statt auf Tabellen zurück.

An Bedeutung gewinnen immer stärker elastische Layouts auf Basis eines Rasters. Diese Art von responsivem Layout passt sich der Displaygröße des Endgeräts durch das dynamische Auf- und Zuklappen des Rasters an.

Frameworks und Rastersysteme für responsives Webdesign schießen wie sprichwörtliche Pilze aus dem Boden. Zu den beliebtesten zählen Skeleton auf Basis von Boilerplate, Golden Grid System und Simplegrid. Wer seine eigene Layoutstruktur ins Zeitalter des responsiven Designs retten möchte, kann hierzu ein jQuery-Plug-in nutzen, zum Beispiel Fittext für responsive Text-überschriften und Fitvids für responsive Webvideos.

Doch woher soll man wissen, ob es sich beim responsiven Webdesign um einen kurzlebigen Hype oder um einen langfristigen, dauerhaft relevanten Trend handle. Nun, klüger ist man erst im Nachhinein, aber wenn ein Problem eine hinreichend hohe Relevanz für die Zukunft des offenen Web hat, dann wird es tendenziell gerne vom W3C aufgegriffen. So auch responsives Design.

Kontextabhängige Größe für Bilder

Ein elastisches Layout erfordert allerdings skalierbare Bilder, also Bilder mit einer kontextabhängigen Größe, die auf die geänderte Ausrichtung des Displays und die damit einhergehenden Anpassungen des Layouts flüssig reagieren. Ein exzellentes Beispiel für eine gelungene Umsetzung elastischer Bilder ist die Website der Münchener Paulaner Brauerei . Das Layout passt sich hier ganz automatisch der Größe des Displays an und auch die Bilder integrieren sich nahtlos unabhängig vom verwendeten Gerät.

Reagieren die Bilder responsiv, dürfen sie ruhig größer werden. Dieser Trend prägt immer stärker responsive Themes, Bildergalerien und Diashows, darunter Photoswipe, eine Bildergalerie für Smartphones im responsiven Design, und Supersized, eine responsive Diashow für Desktops und Mobilgeräte, die im Hintergrund der Website läuft und das ganze Browserfenster für sich in Anspruch nimmt.

Webkit statt CSS3?

Bei der Unterstützung von CSS3 halten sich Apple und Google leider viel zu ungerne an bereits verabschiedete Standards und experimentieren stattdessen lieber mit -Webkit-Eigenschaften. Innovative Stylesheet-Eigenschaften mit dem -Webkit-Präfix stoßen stets auf reges Interesse der Webdesign-Gemeinde und verbreiten sich immer weiter.

Die Dominanz von Webkit-Browsern auf mobilen Geräten und das hohe Innovationstempo beim mobilen Chrome und mobilen Safari haben dazu geführt, dass immer mehr Webdesigner die Syntax offizieller CSS-Standards missachten. Die Versuchung, alle Möglichkeiten experimenteller -Webkit-Eigenschaften auszureizen, um Website-Besucher oder Auftraggeber zu beeindrucken, führte im Laufe der Zeit zu einer Verunreinigung von CSS.

Dieser Trend ist für Webgestalter langfris-tig eher schädlich als hilfreich. So wie Nokia und RIM praktisch über Nacht ihre technologische Führerschaft verloren haben, könnte einmal auch Webkit seine Relevanz einbüßen. Die Inkompatibilitäten -Webkit-lastiger Stylesheets mit anderen Browsern wie mobilem Firefox oder mobilem Internet Explorer werden Webdesignern mittel- und langfristig zusätzlichen Wartungsaufwand aufbürden. Webdesigner, die sich auf den Wettlauff um die modernsten mobilen Designs mit experimentellen Stylesheet-Eigenschaften einlassen, laufen Gefahr, ihren Code durch die Bindung an Webkit unbrauchbar zu machen.

Wer langfristig nutzbare Designs gestalten möchte ist gut beraten, nach offiziellen CSS-Standards zu coden und experimentellen -Webkit-Eigenschaften, die in anderen Browsern noch keine Entsprechungen haben, entschlossen aus dem Weg zu gehen. Stylesheet-Eigenschaften mit dem -Webkit-Präfix sollten niemals ohne entsprechende Syntax für die anderen Browser zum Einsatz kommen.