Testseite für Responsive Webdesign
Wir haben ja schon ausführlich über Repsonsive Webdesign gebloggt. Nochmal grob zusammengefasst: Bei unterschiedlichen Bildschirmauflösungen skaliert das Webdesign mit. D.h. es verändern sich die positionierten Elemente und auch der Aufbau und die Struktur der Website. Das hat den Vorteil auch auf kleineren Displays, wie auf Mobiltelefonen oder Tablets, muss die Usability und der Anspruch an die Webseite nicht verloren gehen. Es gibt sogar noch mehr Vorteile. Es müssen keine extra mobilen Versionen überlegt werden oder vielleicht kann sogar auf eine extra Applikation bzw. auf ein spezielles Theme verzichtet werden.
Wie es gemacht werden kann haben wir im oben erwähnten Blogbeitrag schon beschrieben. Wie es aber gut getestet werden kann, fehlt eigentlich noch, denn nicht jeder hat viele verschiedene Devices zur Hand und das eigentliche Browserfenster skalieren liefert auch nicht immer schöne Ergebnisse. Denn das Problem beim Browserfenster skalieren ist, dass man ja nicht die exakte Größe eines bestimmten Device erhält.
Einen tollen Lösungsansatz bietet dazu responsivepx. Ein Webservice mit dem man bestimmte Bildschirmeinstellungen für Responsive Webdesign testen kann. Wie das funktioniert ist in diesem Video bestens erklärt:
Der Webservice responsivepx funktioniert ganz einfach. Die gewünschten Bildschirmgrößen eingeben und die aufzurufende Webseite via http:// danach erhält man zusätzlich im Browser eine URL die zum Beispiel weitergeleitet werden kann.
1 Reaktion
Mitreden
Etwas unpassend ist nur, dass man lediglich eine Version gleichzeitig anzeigen kann. Besser finde ich da schon Lösungen wie z.B. diese hier: http://markboultondesign.com/tools/index.html
Dort sieht man immerhin zwei gängige Auflösungen. Sonst hilft es auch, wenn man mehrere Browser-Fenster verwendet und entsprechend skaliert. Während der Entwicklung ist dann live.js nahezu Pflicht, damit sich alle Browser-Fenster automatisch aktualisieren, sobald man etwas am CSS, HTML oder JavaScript ändert.