Responsive Baustellen

Es ist kein Geheimnis, dass Responsive Web Design nicht länger nur „sowas Neues, was jetzt viele Designer ausprobieren“ ist. Ich glaube allerdings nicht, dass es bereit für den Einsatz auf ganz großen Portalen mit komplexen Layouts ist. Noch nicht. Zu jung ist die Technik als solche, speziell die benötigten Komponenten wie etwa fluide Grafiken. Aber es entwickelt sich.

Media-Query-Krücken

Bekanntlich unterstützen verschiedene ältere Generationen gängiger Browser die Kernkomponente @media in Kombination mit Dimensionsangaben nicht. Das gilt nicht nur für den allseits beliebten Wunderbrowser aus Redmond, aber dort fällt es ins Gewicht – der gemeine Nutzer von Firefox, Chrome & Co. ist ja eher updatefreudig (und in der Lage dazu).

css3mediaqueries.js schien mir bislang die ausgereifteste Lösung, doch nun holt respond.js merklich auf. Es ist schmaler und nicht ohne Tücken, wird aber aktiv entwickelt. In neuester Version kommt es ohne den Kommentar hinter der schließenden Klammer eines @media aus, womit es kein Problem mehr ist, das zugehörige Stylesheet zu minifizieren. Vor allem aber: respond.js ist neuerdings Teil von Modernizr, womit man sich einen HTTP-Request sparen kann, wenn man Modernizr ohnehin nutzt.

Kleiner Bildschirm vs Navigation

Ein echter Stolperstein ist es nicht, eher eine „kreative Einschränkung“ – Aufbau und Gestaltung von Navigationen in Layouts für ganz kleine Bildschirme wie etwa die 320×480 Pixel eines Smartphones. Klassische Navigationsdesigns, wie man sie von altbekannten Auflösungen her kennt, funktionieren da nur selten, ganz haarig wird es natürlich, wenn eine zweite Ebene oder gar eine Dropdown-Navigation verwendet wird.

Die Alternative für kleine Bildschirme soll kompakt sein, gleichzeitig aber möglichst große Flächen und/oder Schriften haben, damit man sie selbst mit den übelsten Wurstfingern auf einem Touchscreen noch bedienen kann. Da hat man rasend schnell den (ersten) Bildschirm nur mit 5 bis 6 Menüpunkten gefüllt, aber es sollte ja zumindest auch noch eine Andeutung von Inhalt erscheinen …

Der bisher pfiffigste Lösungsansatz, den ich bislang dazu gesehen habe, ist es, die Navigation am Ende des Quelltextes auszugeben und am Seitenanfang lediglich einen Skiplink zur Navigation zu verbauen – quasi das etwas andere „content first“. Auf größeren Auflösungen holt man die Navigation dann mit position: absolute; nach oben und verbirgt den Skiplink mit geeigneten CSS-Mitteln.

Das Buch

Last, but not least liegt mit Responsive Web Design aus der allgemein ganz hervorragend gemachten und sehr lohnenswerten A Book Apart-Schmiede nun das gedruckte Standardwerk zum Thema vor. Dazu mehr, sobald ich mein (gedrucktes) Exemplar in den Händen halte.