Info

Darstellung einer responsive Website auf aktuellen WiedergabegerÀten

Was ist Responsive Webdesign?

 

 

Neue GerÀte erfordern umdenken

 

Das Internet entwickelt sich Àhnlich rasant weiter wie die GerÀte, auf denen die Seiten des World Wide Web dargestellt werden. Gab es noch vor wenigen Jahren lediglich Desktop- und Laptop-Monitore zur Darstellung von Websites, existieren heute eine Vielzahl verschiedener internetfÀhiger GerÀte.

Die Entwicklung der Smartphones, Smart-TVs, Tablets oder Netbooks hat dabei gerade erst begonnen und die mobile Internetnutzung wird in den kommenden Jahren einen immer höheren Stellenwert gewinnen. Was auf der einen Seite eine revolutionĂ€re Steigerung der LebensqualitĂ€t darstellt, erfordert auf der anderem Seite ein Umdenken: Webseiten-Betreiber mĂŒssen nun eine Vielzahl unterschiedlicher Display-Auflösungen und Nutzerverhalten berĂŒcksichtigen. Sowohl Darstellung als auch Usability sollten an die neuen GerĂ€te angepasst werden.


Eine Website, die auf großen Monitoren gut und ĂŒbersichtlich dargestellt wird, kann auf dem Smartphone kaum zu gebrauchen sein. Die Notwendigkeit des Zoomens und Scrollens vermindert deutlich die Freude am Betrachten der Seite, MenĂŒpunkte sind auf mobilen GerĂ€ten teils schwer oder gar nicht mehr zugĂ€nglich.


Responsive Design stellt an dieser Stelle eine BrĂŒckentechnologie dar: Websites werden mit Hilfe des “reagierenden Designs” auf jedem GerĂ€t ideal angezeigt, ohne auf native Apps zurĂŒckzugreifen.

Die Lösung:

Responsive Design

 

Wie aber funktioniert das so genannte “Responsive Design”? Wie kann sich das Aussehen der Seite dem entsprechenden WiedergabegerĂ€t anpassen? In seinem Buch “Responsive Webdesign” beschreibt Ethan Marcotte einen Weg, der auf modernste Technologien aufbaut: die Darstellung der Website findet nicht auf dem Webserver, sondern im jeweiligen Internet- Browser des Besuchers statt.


Erst ganz am Schluss wird der Seitenaufbau mit Hilfe so genannter Media Queries bestimmt. Dabei wird nicht bloß die SchriftgrĂ¶ĂŸe der Seite vergrĂ¶ĂŸert oder verkleinert: die einzelnen Blöcke der Seite wie z.B. Content, rechte Spalte oder Header werden skaliert und zum Teil völlig neu angeordnet. Die ÜbergĂ€nge sind dabei flĂŒssig.

 

Machen Sie sich selbst ein Bild davon, wie solch eine Responsive Website aussehen kann. Um die Technik im Einsatz zu erleben können Sie auch einfach die BrowsergrĂ¶ĂŸe beim Betrachten dieser Website verĂ€ndern.

 

Wenn Sie sich immer noch fragen, ob Sie auf Responsive Design setzen sollten, finden Sie hier vielleicht eine Antwort.

Unterschiedliche Darstellung einer Webseite mit Hilfe von Responsive Design

Testen Sie jetzt!

Betrachten Sie responsive-info.de auf Ihrem Smartphone oder Tablet und beobachten Sie, wie sich das Design an Ihr GerĂ€t anpasst. Nutzen Sie dafĂŒr ganz einfach den abgebildeten QR-Code.