Simple Media Queries Tester von Frank Bültge →
Mit dem Online-Tool »Simple Media Queries Tester« kannst du deine Webseite schnell und vor allem übersichtlich in drei verschiedlichen Bildschirmbreiten testen. Die Screen-Formate kannst du selbst anpassen und so z.B. auf 320 Pixel fürs iPhone Hochformat oder 758 Pixel fürs iPad Hochformat einstellen. Ich finde das Tool wirklich praktisch, um Webseiten mit responsive Webdesigns schnell auf einen Blick testen zu können.
Das ist genau was für mich, da ich kein iPad oder iPhone (bzw. Smartphone) besitze, kann ich so doch dann meine Seite »optimieren«. Danke für den Link
Hallo Chrissy,
ja, ich finde die Testseite auch super praktisch, da sie auch so schon übersichtlich ist :-) Wenn man ein Theme auf einem lokalen Server erstellt, gibt es übrigens auch noch eine praktische Google Chrome-Erweiterung, den Windows-Resizer. So kann man das Browser-Fenster schnell in der gewünschten Größe anpassen.
Viele Grüße,
Ellen
Nicht schlecht, aber auch nicht wirklich neu. Die Größenverstellung kann man im Firefox ganz bequem mit dem Add-on Web Developer durchführen und auch verschiedene Größen abspeichern. So hat man sofort Zugriff auf die gewünschten Bildschirmgrößen.
Grüße von einem Schwaben aus Leipzig nach Stuttgart ins Ländle ;-))
Auch schön: http://resizemybrowser.com/
Auch nicht schlecht: http://app.protofluid.com/ hält schon verschiedene Geräte als Voreinstellung bereit
Vielen Dank für die Blumen!
weitere kleine Idee zum sehen des Viewport ist gerade in arbeit.
Ich schätze Franks Arbeit wirklic, aber das finde ich nicht sehr prickelnd. Wenn ich das mit meiner Site teste schaut die schon sehr komisch aus, was sie aber auf dem iPhone oder iPad gar nicht tut. Dort läuft sie einwadfrei. Hier wird scheinbar nicht berücksichtigt, dass mobile Geräte eine Seite auch insgesamt kleiner darstellen (können). Stichwort Viewport.
Also zu richtig testen braucht man schon ein iPad, iPhone oder ähnliches Endgerät. Und ist doch ein super Grund sich so ein Gadget anzuschaffen ;-)
@Michael: der Tester ist für Media Queries, nicht untersch. Devices; iPhone und co. haben eine andere Auflösung; es geht also nur um das Testen der übergebenen Werte der media queries, kein Browsersniffing oder ähnliches. Dazu muss man anders ran gehen oder einen Emulator nutzen.
Ach so…ja, dann hatte ich das irgendwie missverstanden. Hab mal wieder zu schnell und zu ungenau gelesen ;-)
Vielen Dank für den Link. Super!
Das Tool spiegelt aber gar nicht die Realität wieder. Es reicht doch nicht, einfach nur einen verkleinerten Pixelauschnitt zu zeigen. Die allermeisten Geräte verkleinern die Seite, so dass sie auf den Screen passt.
Ich habe diverse Seiten mit dem Tool getestet und nicht eine Einzige sieht dabei so aus wie in meinem Smartphone…
Achja, so ist das, wenn man Artikel nur überfliegt. Jetzt hab ich das mit den Queries auch gelesen. Ich nehm alles zurück und behaupte das Gegenteil ;)
Vielen Dank für die weiteren, spannenden Link-Tipps! Da kannte ich ja einige auch noch gar nicht :-)
@Regina Walter, Michael Oeser und Frank:
Aus meiner Erfahrung ist es sehr praktisch, die CSS3 Media Queries bei einem Webdesign mal schnell testen zu können. So kann man sehen, ob auch wirklich alle Elemente resizen oder ob man noch etwas vergessen hat. Dafür finde ich den Simple Media Queries Tester eigentlich sehr schön, vor allem die Übersicht gefällt mir gut.
Um ein Webdesign wirklich komplett zu optimieren muss man es aber meiner Ansicht nach auf alle Fälle »live« und auf möglichst vielen verschiedenen Geräten testen. Gerade bei den Apple-Geräten ist die Optimierung der Größenverhältnisse z.B. nicht ganz einfach finde ich. Und auch viele Button-Effekte verhalten sich auf einem Touch-Display komplett anders, da hilft also nur der Live-Test.
Eventuell kann man sich das ein oder andere Gerät ja auch von einem Bekannten ausleihen, bzw. direkt im Laden testen, denn natürlich kann man nicht alle Geräte selbst zu Hause haben :-)
Viele Grüße,
Ellen