Responsive Webdesign – Browser-Test-Bookmarklet

27. Juni 2012 um 18:06 Uhr | Internet | Andi Licious

Ihr erstellt Webdesigns, diese natürlich auch abhängig von der Auflösung bzw. dem Gerät, klar. Doch setzt ihr euch für jede kleine Änderung immer wieder hin, ändert die Browsergröße (auch wenn dies toll via PlugIn geht) oder testet gar die native Geräteauflösung am Originalgerät, wenn es sich nicht gerade um eine wichtige Änderung für Mobilgeräte handelt? Wirklich? Das geht doch auch viel, viel einfacher. Zum Beispiel mit einem Bookmarklet direkt im Browser.

Was ist das und wie geht das?
Ihr erstellt in eurem Browser (bzw. in mehreren, ihr wollt ja verschiedene Browser testen) ein neues Lesezeichen – idealerweise direkt sichtbar und nicht in irgendeinem Ordner versteckt. Nun fügt ihr in der Adresszeile des Lesezeichens die Code aus der folgenden Box ein. Keine Sorge, das ist kein Virus oder irgendein anderer Schadcode. Nun surft ihr die Seite zum Testen an und klickt auf dieses Lesezeichen. Der Browser macht nun nichts anderes, als die zuvor angesurfte Adresse jetzt in einigen iframes mit den vorgegebenen Auflösungen zu laden. Ihr könnt nun also problemlos sehen, ob euer Design schon zur Auflösung passt oder eben noch nicht.

Ich denke die Auswahl der Auflösungen dürfte für euch ausreichend sein. Was natürlich nicht so einfach nachzustellen ist, ist beispielsweise ein Apple iPhone 4 mit Retina-Display, aber wer sich hierfür interessiert, dürfte das bereits sowieso mitbekommen haben. Spätestens beim Thema Scrollbars hört das mobile Testen sowieso auf, wenn man nicht genau weiß, mit welchen Breiten man arbeitet. ;)

javascript:document.write('<!DOCTYPE%20html><html><head><meta%20charset="utf-8"><title>Responsive%20Design%20Testing</title><style>body%20{%20margin:%2020px;%20font-family:%20sans-serif;%20overflow-x:%20scroll;%20}.wrapper%20{%20width:%206000px;%20}.frame%20{%20margin:0%200%2050px;%20display:%20block;%20}h2%20{%20margin:%200%200%205px%200;%20}iframe%20{%20margin:%200%2020px%2020px%200;%20border:%201px%20solid%20#666;%20}</style></head><body><div%20class="wrapper"><div%20class="frame"><h2>240<span>%20x%20320</span>%20<small>(Old%20Smartphone%20-%20Portrait)</small></h2><iframe%20src="'%20+%20window.location%20+%20'"%20sandbox="allow-same-origin%20allow-forms"%20seamless%20width="240"%20height="320"></iframe></div><div%20class="frame"><h2>320<span>%20x%20240</span>%20<small>(Old%20Smartphone%20-%20Landscape)</small></h2><iframe%20src="'%20+%20window.location%20+%20'"%20sandbox="allow-same-origin%20allow-forms"%20seamless%20width="320"%20height="240"></iframe></div><div%20class="frame"><h2>320<span>%20x%20480</span>%20<small>(Smartphone%20-%20Portrait)</small></h2><iframe%20src="'%20+%20window.location%20+%20'"%20sandbox="allow-same-origin%20allow-forms"%20seamless%20width="320"%20height="480"></iframe></div><div%20class="frame"><h2>480<span>%20x%20320</span>%20<small>(Smartphone%20-%20Landscape)</small></h2><iframe%20src="'%20+%20window.location%20+%20'"%20sandbox="allow-same-origin%20allow-forms"%20seamless%20width="480"%20height="320"></iframe></div><div%20class="frame"><h2>480<span>%20x%20640</span>%20<small>(Basic%20Tablet%20-%20Portrait)</small></h2><iframe%20src="'%20+%20window.location%20+%20'"%20sandbox="allow-same-origin%20allow-forms"%20seamless%20width="480"%20height="640"></iframe></div><div%20class="frame"><h2>640<span>%20x%20480</span>%20<small>(Basic%20Tablet%20-%20Landscape)</small></h2><iframe%20src="'%20+%20window.location%20+%20'"%20sandbox="allow-same-origin%20allow-forms"%20seamless%20width="640"%20height="480"></iframe></div><div%20class="frame"><h2>768<span>%20x%201024</span>%20<small>(Tablet%20e.g.%20iPad%20-%20Portrait)</small></h2><iframe%20src="'%20+%20window.location%20+%20'"%20sandbox="allow-same-origin%20allow-forms"%20seamless%20width="768"%20height="1024"></iframe></div><div%20class="frame"><h2>1024<span>%20x%20768</span>%20<small>(Tablet%20e.g.%20iPad%20-%20Landscape)</small></h2><iframe%20src="'%20+%20window.location%20+%20'"%20sandbox="allow-same-origin%20allow-forms"%20seamless%20width="1024"%20height="768"></iframe></div><div%20class="frame"><h2>480<span>%20x%20800</span>%20<small>(Widescreen%20Tablet%20-%20Portrait)</small></h2><iframe%20src="'%20+%20window.location%20+%20'"%20sandbox="allow-same-origin%20allow-forms"%20seamless%20width="480"%20height="800"></iframe></div><div%20class="frame"><h2>800<span>%20x%20480</span>%20<small>(Widescreen%20Tablet%20-%20Landscape)</small></h2><iframe%20src="'%20+%20window.location%20+%20'"%20sandbox="allow-same-origin%20allow-forms"%20seamless%20width="800"%20height="480"></iframe></div><div%20class="frame"><h2>960<span>%20x%201080</span>%20<small>(1/2%20Desktop%20e.g.%2024-Inch%20splitted)</small></h2><iframe%20src="'%20+%20window.location%20+%20'"%20sandbox="allow-same-origin%20allow-forms"%20seamless%20width="960"%20height="1080"></iframe></div><div%20class="frame"><h2>1280<span>%20x%20800</span>%20<small>(Typical%20Laptop%20e.g.%20MacBook)</small></h2><iframe%20src="'%20+%20window.location%20+%20'"%20sandbox="allow-same-origin%20allow-forms"%20seamless%20width="1280"%20height="800"></iframe></div><div%20class="frame"><h2>1280<span>%20x%201024</span>%20<small>(Desktop%20e.g.%2019-Inch%20TFT)</small></h2><iframe%20src="'%20+%20window.location%20+%20'"%20sandbox="allow-same-origin%20allow-forms"%20seamless%20width="1280"%20height="1024"></iframe></div><div%20class="frame"><h2>1440<span>%20x%20900</span>%20<small>(Desktop%20e.g.%2019-Inch%20Widescreen)</small></h2><iframe%20src="'%20+%20window.location%20+%20'"%20sandbox="allow-same-origin%20allow-forms"%20seamless%20width="1440"%20height="900"></iframe></div><div%20class="frame"><h2>1680<span>%20x%201050</span>%20<small>(Desktop%20e.g.%2022-Inch%20Widescreen)</small></h2><iframe%20src="'%20+%20window.location%20+%20'"%20sandbox="allow-same-origin%20allow-forms"%20seamless%20width="1680"%20height="1050"></iframe></div><div%20class="frame"><h2>1920<span>%20x%201080</span>%20<small>(Desktop%20e.g.%2024-Inch%20HD-Widescreen)</small></h2><iframe%20src="'%20+%20window.location%20+%20'"%20sandbox="allow-same-origin%20allow-forms"%20seamless%20width="1920"%20height="1080"></iframe></div><div%20class="frame"><h2>2560<span>%20x%201440</span>%20<small>(Desktop%20e.g.%2027-Inch%20Apple%20Cinema%20Display)</small></h2><iframe%20src="'%20+%20window.location%20+%20'"%20sandbox="allow-same-origin%20allow-forms"%20seamless%20width="2560"%20height="1440"></iframe></div></div></body></html>')

Wem das Abspeichern/Auswählen hier etwas schwer fällt, hier gibt’s den Code auch “übersichtlicher” für STRG+A/CMD+A.

Geschrieben von Andi Licious

Ich verbreite seit 1997 meinen Senf & Webseiten im Internet und bin Gründer der Agentur mainflow. Wir haben unseren Sitz in Saarbrücken, im tollen Expomedia-Gebäude und erstellen mit unserem Team Lösungen für das Internet.