Responsive Webdesign – Was ist das?

responsiveUnter Responsive Webdesign versteht man die optische Anpassung einer Website an verschiedene Ausgabemedien wie Desktop-Computer, Laptops, Tablet-Computer, Smartphones, TV-Geräte und zukünftige Ausgabegeräte.

Wir von thedoor media möchten für Sie mit einem flexiblen Layout und flexiblen Inhalten auf beliebigen Endgeräten stets das beste Nutzererlebnis bieten. Dabei soll die Darstellung auf allen Endgeräten übersichtlich und benutzerfreundlich bleiben.

Responsive Design ist eine neue Möglichkeit Websites zu gestalten. Anstatt komplett eigenständige Websites für die verschiedenen Endgeräte (vor allem mobile Geräte) zu entwickeln, wird hierbei die normale Website verwendet. Für die verschiedenen Geräte resp. Bildschirme wird ein sogenanntes CSS Media Querie eingefügt und die Website wird für die jeweilige Grösse optimiert dargestellt.

Wenn Sie diese Website mit einem Computer besuchen, dann erleben Sie Responsive Webdesign Live! Ändern Sie die Fenstergrösse und schauen Sie wie sich das Layout der Website je nach Grösse ihres Fensters anpasst.

Falls Sie diese Website mit einem mobilen Gerät besuchen, so sehen Sie automatisch nur die optimierte Version für Ihr Endgerät. Bis vor kurzem war klar: eine Website findet auf dem PC-Bildschirm statt und das Layout richtet sich nach den gängigsten Bildschirmauflösungen. Falls der Kunde zudem eine mobile Version seiner Website wünschte, wurde ein einspaltiges Layout mit abgespeckter Funktionalität erstellt, welches dann meist auf der Subdomian „m“ wie mobile abgelegt wurde.

iPhone, iPad, Android Mobile und dergleichen verlangen jedoch mehr als bloss eine Minimallösung für mobile Geräte. Für jedes Format eine eigene Lösung zu bauen wäre aber ebenso subotpimal – wer weiss schon, welche verschiedenen Geräte und Formate in den nächsten Jahren auf uns zu kommen. Der Verwaltungsaufwand verschiedener Formate würde zudem wohl jedes Web-Budget sprengen. Hier bieten die neuen Technologien CSS3, HTML5 und JavaScript einen wertvollen Lösungsansatz: Responsive Webdesign.

Responsive Webdesign bedeutet, dass sich das Layout der Seite dem Bedürfnis des Nutzers anpasst. Es reagiert flexibel auf das Endgerät, mit dem er zugreift. Hierfür braucht es flexible Designelemente, welche sich in Grösse, Höhe und Breite der Grösse des Ausgabebildschirms anpassen (Text-Objekte, Bilder, Videos, etc.). Ebenfalls wichtig ist die flexible Platzierung der Inhalte: je nach Bildschirmgrösse und -format werden die Elemente nebeneinander oder untereinander platziert. Ein weiterer Punkt ist die selektive Anzeige der Inhalte. Elemente mit Priorität B erscheinen auf kleinen Bildschirmen nicht oder werden nur verlinkt.

Weg von fixen Formaten, hin zu relativen Grössen – das ist der Tenor von Responsive Webdesign. Schriftgrössen, Elementgrössen, alles wird für den entsprechenden Ausgabekanal adaptiert. Für die Websites der Zukunft sollte man sich also weniger auf ein mobiles Format konzentrieren als sich über einzelne Inhaltselemente Gedanken zu machen und ihren Platz auf den verschiedenen Endgeräten zu bestimmen. Denn eines ist schon heute klar: die mobile Internetnutzung wird in etwa zwei Jahren die stationäre Internetnutzung in den Schatten gestellt haben. Und hierfür sollte man sich bereits jetzt rüsten.

Browserunterstützung auf Desktop Geräten
Die Mobilen Browser auf allen gängigen Smartphones unterstützen allesamt “CSS3 Media Queries” bzw. Responsive Webdesign.

Browserunterstützung auf mobilen Geräten
Aber Achtung: nur moderne Browser unterstützen “CSS3 Media Queries” auf Desktop Rechnern. Für Responsive Webdesign stellt dies jedoch kein wirkliches Problem dar, denn für die Desktop-Auflösung wird die Website in jedem Fall optimiert. Darstellungsprobleme treten hier also nicht auf. Was ein User mit einer älteren Browserversion nicht beobachten kann, ist der Effekt von Responsive Webdesign, wenn er das Browserfenster verkleinert.