Mobile Site oder Responsive Design?

Mobiles Webdesign ist in aller Munde. Doch bei der Frage, wie dies am besten umgesetzt wird, scheiden sich die Gemüter. Grundlegend gibt es zwei Varianten: Es kann entweder eine reine Mobile-Site erstellt werden, oder man bedient sich dem Responsive Design Prinzip. Beide Varianten bieten gewisse Vor- und Nachteile, wobei jedoch die Vorteile bei Responsive Design klar überwiegen. Eine reine Mobile-Site ziehlt ausschliesslich auf die Anzeige bei mobilen Geräten ab, und kann auch nur auf diesen angezeigt werden. Dagegen zeigen sich Seiten, die mit Responsive Webdesign umgesetzt sind, um einiges flexibler.

Bei responsiven Seiten wird das Design so umgesetzt, dass es sich den Displays von allen möglichen Endgeräten automatisch anpasst. Demnach kann das selbe Grundgerüst sowohl auf dem Desktop als auch auf dem Smartphone verwendet werden, und Inhalte müssen nicht in unterschiedlichen Systemen eingepflegt werden. Es sind auch keine aufwändigen Scripts nötig, um die normale in eine mobile Seite zu konvertieren.

Um ein responsives Design umzusetzen, gibt es zwei Herangehensweisen. Bei der „Graceful-Degradation-Methode“ gilt erstmals der Gestaltung der Seite für Desktop-Computer die volle Aufmerksamkeit. Die Seite wird wie gewohnt gestaltet und umgesetzt, und anschliessend mittels Umbruchpunkten im Stylesheet schrittweise für kleinere Bildschirme optimiert. Der Vorteil hierbei ist, dass selbst Websysteme, welche nicht für mobile Geräte entworfen worden sind an diese angepasst werden können. Der Nachteil ist die Menge an Code, der schrittweise überschrieben werden muss – je nach Grösse der Seite kann dies extrem viel Aufwand bedeuten. 

Seit kurzer Zeit findet zusehends das „Mobile-First-Prinzip“ Anwendung. Bei dieser Vorgehensweise konzentriert sich die Optimierung von Optik und Funktionalität in erster Linie auf kleine Bildschirme. Im CSS-Code der Seite wird vorerst nur die mobile Seite gestaltet, was sich optimal auf Geräte mit kleinerer Bandbreite auswirkt. Da sie nur diesen Teil des Codes interpretieren müssen und den Rest einfach überspringen können, führt dies zu kürzeren Ladezeiten. Für Entwickler ist diese Methode ebenfalls sehr praktisch, denn für Layouts auf mobilen Geräten wird grundsätzlich weniger CSS-Code benötigt. Bei den Umbruchpunkten kann man diesen meist einfach erweitern, anstatt jede einzelne Eigenschaft überschreiben zu müssen.