Responsive Web Design

#design #mobile #responsive #technik

Responsive Web Design

Als wir unsere neue Agenturseite konzipierten war klar, dass sie nicht nur desktopfähig, sondern sich auch den verschiedenen mobilen Devices gut anpassen muss, also responsive sein sollte. Aber Responsive Web Design ist weitaus mehr als Media Queries und erfordert sorgfältige Planung und neue Denkweisen.
Hier 5 wichtige Aspekte für Responsive Design:

1. Von Photoshop zu Design im Browser

Der klassische Screendesign-Prozess hat sich verändert: Web Developer sind frühzeitig in den Designprozess involviert, und technische Aspekte beeinflussen den Designprozess mehr denn je. Im Responsive Web gibt es das absolute Layout nicht mehr. Für unseren Design- und Entwicklungsprozess bedeutete das, ausgehend von einem Masterlayout mit allen Komponenten möglichst früh HTML-Prototypen zu entwickeln, um so verschiedene Screen-Szenarien zu testen und festzulegen.

2. High Resolution Web

Mit der Einführung von Retina Displays werden hohe Auflösungen zu einem neuen Standard. Für Grafiken, Icons und Logos setzen wir SVG als Grafikformat ein. In der Webentwicklung noch wenig verwendet, vereint es wie kein anderes Webformat hochauflösende Grafik mit kleiner Dateigröße. Nicht SVG-kompatible Browser lassen sich mit einer JavaScript-Library wie Modernizr unterstützen, aber der Retina-Support hat mit der Einbindung von zusätzlich erforderlichen Fallback-Grafiken seinen zeitlichen Preis.

3. Frameworks

Von Null anfangen kann im Responsive Web Design ein beschwerlicher Weg sein, daher können gute Frameworks gerade beim Entwicklungs-Kickstart die Arbeit sehr erleichtern. Wir haben uns für Twitter Bootstrap entschieden, einen flexiblen Werkzeugkasten, insbesondere für Responsive-Projekte. So einfach der Kickstart zum Beispiel für Basiselemente ist – mit zunehmenden individuellen Anforderungen und Features muss man eigene Wege jenseits der Standardprozesse einschlagen.

4. Browserkompatibilität

Browserspezifisch optimieren ist und bleibt eine Herausforderung im Web Development. Bei der Suche nach der geeigneten Abfragemethodik kam unser Team in der weiteren Entwicklung auf die passende Lösung: der jeweilige Browser wird via PHP serverseitig erkannt und erst dann wird die passende CSS-Klasse ausgegeben. Eine ideale Methode für Fallbacks, um zum Beispiel Probleme mit bestimmten Versionen des Internet Explorer gezielt zu lösen.

5. Testing, testing, testing

Ohne Testing geht es nicht, allerdings stößt man bei der Vielzahl an mobilen Devices unwillkürlich an Hardware-Grenzen. Hier kann man sich mittlerweile einiger sehr guter Cloud Services bedienen. Unsere Favoriten, insbesondere für das responsive Design, sind Adobe Edge Inspect und Saucelabs. Auch smarte Browsersnippets sowie der Einsatz von mobilen Bookmarklets für das Debuggen auf mobilen Devices helfen. Dazu gibt es in Kürze hier ein eigenes Feature.

Fazit

Responsive Web Design ist gegenüber herkömmlicher Entwicklung in punkto Design und technischem Knowhow sicher anspruchsvoll. Der höhere Aufwand wird jedoch dadurch gerechtfertigt, dass der Auftritt für die Darstellung auf künftigen Devices vorbereitet ist. Gerade für gestalterisch und technisch anspruchsvolle Projekte ein lohnender Aufwand. Und das sollte die eigene Agenturseite natürlich immer sein.

Ihr Kommentar