Die Begriffe „Responsive Webdesign“ und „Media Queries“ sind zur Zeit in aller Munde und beschreiben verschiedene Techniken und Möglichkeiten Webseiten so aufzubauen, dass sie sich dem jeweiligen Anzeigemedium (Desktop-Computer, Smartphones, Tablet-PC’s, etc.) anpassen, und dem Besucher ein entsprechend optimal ausgerichtetes Layout zur Verfügung stellen.
Wer sich ein genaueres Bild über Responsive Webdesign und Media Queries machen will, dem seien neben zahlreichen anderen Quellen im Internet vor allem der Artikel von Ethan Marcotte (A List Apart) und der ausführliche Artikel vom Smashing Magazin empfohlen:
A List Apart: Responsive Web Design (by Ethan Marcotte)
Smashing Magazine: Responsive Web Design: What It Is and How To Use It (by Kayla Knight)
Responsive Webdesign in der Praxis testen
Für alle welche schon mit Responsive Webdesign arbeiten, stellt sich jeweils die Frage, wie man die Webseiten für die verschiedenen Geräte testen kann. Schliesslich ist nicht jeder Webdesigner in der komfortablen Lage, ein iPhone, ein iPad und sonstige Smartphones auf dem Schreibtisch liegen zu haben.
Für solche Zwecke hat Quirk Tools ein Webtool namens Screenfly erstellt. Mit diesem Tool kann direkt im Browser zwischen den einzelnen Anzeigegeräten hin- und hergeswitcht werden. Es empfiehlt sich, die Seite in einem modernen und einem sich technisch auf dem heutigen Niveau befindenden Browser anzuschauen (der Internet Explorer ist also nicht zu empfehlen), damit die Media Queries auch so umgesetzt werden, wie sie dann in den entsprechenden Geräten zu erwarten sind.
Das Webtool Screenfly besticht dabei durch ein schlichtes und klares Layout und eine denkbar einfache Benutzung.
Man gibt die Adresse der zu testenden Website ein und klickt auf „Go“ – schon wird die Webseite in einem simulierten Browserfenster angezeigt. Auf der rechten Seite hat man nun die Möglichkeit, die verschiedenen Anzeigegeräte auszuwählen. Diese reichen von Desktop, Tablets, Mobiles bis hin zu Fernseh-Formaten.
Eine praktische Sache, nur schon weil man nicht immer nach den Auflösungen der einzelnen Geräte suchen muss.