Responsive Webdesign

Heute muss jede zukunftsfähige Website auch auf mobile Geräte zugeschnitten sein.

Schon 2011 wurden mehr mobile Geräte als Desktop-Computer verkauft – Tendenz weiter steigend. Heute muss eine Website mit vielen unterschiedlichen Typen von Smartphones und Tablets umgehen können und darüber hinaus noch auf Notebooks und Desktop-Computern mit Monitorgrößen zwischen 11 und 27 Zoll reagieren können. Dabei reicht es nicht mehr aus, so wie es einige Zeit üblich war, eine mobile Versionen der Website für eine spezielle Geräteklasse wie beispielsweise das iPhone zu entwickeln.

Die Lösung heißt Responsive Webdesign (reaktionsfähiges Webdesign): Mittels sogenannter Mediaqueries wird abgefragt, mit was für einem Gerät der Nutzer die Website aufruft und wie groß das Fenster seines Browsers ist. Er erhält daraufhin eine genau auf seine Eigenschaften zugeschnitte Variante der Website angezeigt.

Responsive Webdesign nutzt dabei den genuinen Charakter von HTML-Dokumenten. Sie haben von jeher die Möglichkeit sich an die Fenstergröße des Browsers anzupassen. Dieser große Vorteil wurde lange Zeit als Nachteil empfunden, da ein noch in der analogen Welt entwickeltes Corporate Design starre Vorgaben besaß, die auch im Internet gelten sollten. Daher haben sich Generationen von Entwicklern daran gemacht, HTML-Dokumente in ein festes Korsett zu pressen. Das hat auch solange relativ gut funktioniert, wie Nutzer einen Bildschirm mit ähnlicher Größe besaßen.

»Responsive Design erfordert eine
enge Zusammenarbeit zwischen
Design und Entwicklung«

Durch das Aufkommen der mobilen Geräte kann HTML nun seine ureigene Fähigkeit, auf die Größe der Browserfenster zu reagieren, wieder voll ausspielen. Unterstützt wird HTML, inzwischen um viele Klassen erweitert und als HTML5 bezeichnet, dabei von zusätzlichen Funktionen in CSS3 und JavaScript.

Die Anforderung an die Gestaltung ist durch das flexible Erscheinungsbild der Websites deutlich gestiegen. Die Gestalter haben nun die Aufgabe ein konvergentes Erscheinungsbild der Website über alle Bildschirmgrößen hinweg zu erschaffen. Aufgrund der schier unendlichen Anzahl von Geräten und Bildschirmgrößen lässt sich das Design der Website nicht mehr als separater Schritt vor der Programmierung entwickeln. Heute können eine Reihe von Design-Entscheidungen erst während des Programmierprozesses getroffen werden, da erst am Prototyp der Website manche Funktions- und Darstellungsprobleme sichtbar werden.

Doch muss eine Website heute nicht nur auf eine Vielzahl von Bildschirmgrößen reagieren, sondern auch auf die Qualität der Internetverbindung. Denn damit die Ladegeschwindigkeit von Websites auf mobilen Geräten trotz geringer Bandbreite hoch ist, müssen beispielsweise CSS- und JavaScript-Dateien zusammengefasst sowie Bilder in einer kleineren Variante bereitgestellt werden. Bilder werden ansonsten in voller Größe übertragen und vom Smartphone lediglich klein dargestellt. Reaktionsfähig muss die Website jedoch auch in Richtung hochauflösender Retina-Bildschirme sein, die gerade dabei sind den Markt für Desktop-Computer zu erobern und wiederum Bilder in einer deutlich höheren Auflösung als herkömmliche Bildschirme darstellen.

Die Umsetzung von Website im Responsive Webdesign setzt eine enge Zusammenarbeit zwischen Designern und Entwicklern voraus. Bei VALID haben die Entwickler daher eine ausgeprägte Designkompetenz und die Designer ein tiefes Verständnis der Webprogrammierung. Die Verbindung aus Gestaltung und Programmierung bildet von Beginn an die Grundlage unserer Arbeit. Der Gründer von VALID, Eric Ovaska, hat schon sein Design-Diplom an der Universität der Künste Berlin mit der Entwicklung eines Content Management Systems erlangt.

Sprechen Sie uns an.

Bitte addieren Sie 8 und 4.