google hilft bei Webseiten und Bildschirmgrößen
Kwizzfrage: wie groß ist Deine Bildschirmauflösung? Und wie groß das Browserfenster wenn nicht maximiert?
Früher war es üblich dass eine Webseite etwas angab wie “optimiert für 849,5 × 1376 Pixel und den Zauberbrowser”. Wenn man soetwas heutzutage sieht ist das entweder ein Fall zum lachen oder weinen, manchmal auch für’s Museum.
Das Bildschirmlayout skaliert heutzutage üblicherweise oder sollte es zumindest. Der Browser im Vollbild ist spätestens bei 16:10 Displays unpraktisch und Windows macht mit Windows 7 ja sogar Werbung dafür dass man mehrere Sachen nebeneinander auf dem Schirm haben kann (was glaube ich schon Windows 2 konnte).
Doch ignorieren darf man die Breite auch nicht. Die Inhalte skalieren meist nicht beliebig in die Breite, das kann man notfalls mit einer definierten Maximalbreite abfangen oder kann mit einem nicht ganz perfektem Layout leben. Web ist eh kein Print.
Doch Inhalte haben auch eine Mindestbreite. Unten ist ein Screenshot, sonst sind es meist Fotos die in voller Auflösung schon wegen der Dateigröße nicht direkt in den Beitrag passen. Nur, wie groß mache ich das Foto in der Breite? Ich habe mir hier 500px als Maximalwert in der Breite gesetzt, doch passt das wirklich? Ist es zu viel oder ginge sogar mehr?
Dabei hilft seit gestern google mit dem labs Projekt Browser Size.
Es legt einen farbigen Raster über eine beliebige Webseite anhand der man sehen kann wie viel und was die Leser von der Seite sehen in verschiedenen Auflösungen inklusive der Prozentzahl der Anwender die in die entsprechende Kategorie fallen:
Wie man sieht können 95% hier den gesamten Artikel lesen; immerhin die Hälfte kann auch die zweite Seitenleiste zum Großteil sehen ohne zu scrollen.
Das klingt nun nicht so toll, aber das Tool ist zwar hilfreich aber nicht perfekt: es berücksichtigt nicht wie skalierbar eine Seite wirklich ist. So skaliert diese Seite doch noch relativ weit nach unten bzw. in’s Schmale wie man auf dem Screenshot rechts von meinem Telefon sieht: Obwohl es nur 480 Pixel breit ist erkennt man noch fast die gesamte erste Seitenleiste, was aus dem Browsersize Tool nicht hervorgeht.Von daher: ein praktisches, weil plastisches Hilfsmittel aber nicht die endgültige Wahrheit, nur ein Anhaltspunkt
Trackbacks
Keine Trackbacks
Kommentare
Ansicht der Kommentare: Linear | Verschachtelt
Frank am :
Hi,
26 Zoll – 1920er.
Aber das bringt mich gerade auf eine Frage und du bist doch der Smartphone Experte.
Was ist denn da die default Auflösung und wie reagieren die mobilen Browser auf den ganzen CSS und Javascript Kram?
Gruß
Frank
rowi am :
Bei Smartphones kannst du eine Auflösung von mindestens 320×240 annehmen.
Allerdings mal Hoch und mal Quer, also auch 240×320. Bei neueren Geräten wechselt das Verhältnis dynamisch mit der Lage, aber längst nicht bei allen.
Standardauflösung bei Android und bei allen iphones ist 320×480, Android gibt es aber auch mit 240×320 und in deutlich höheren Auflösungen.
CSS und Javascript solltest du davon ausgehen dass es nicht unterstützt wird. Die neueren Mobilbrowser unterstützen beides, wenn auch eingeschränkt. Dann bei CSS mehr als bei Javascript. Von einer Unterstützung ausgehen kannst Du fast sicher bei Webkit basierten Browsern und Opera mini. Opera mobile ab der 9.
Bei allem was ein Plugin benötigt kannst Du davon ausgehen dass das Plugin nicht vorhanden ist.
Allen Mobilbrowsern ist aber gemein, dass sie Text wenn möglich nur so breit formatieren wie auf die Displaybreite geht, auch wenn im Layout mehr Platz für den Text ist.
Hier im Blog wird der Text als schmale Spalte links im Artikelbereich gesetzt mit einem relativ großen Leerraum bis zu den Seitenleisten.
Für Mobilbrowser solltest Du mehr als 240px Breite nicht vorraussetzen, das Layout aber auch nicht so anlegen dass es bei 854px Breite (z.B. große Android im Querformat) nicht mehr funktioniert.
Allgemein so wenig Layoutvorgaben machen wie möglich damit der Browser das Layout optimal an den kleinen Bildschirm anpassen kann.
Das ist zwar allgemein ein guter Rat aber bei Mobilgeräten ungleich wichtiger.
Die modernen Browser in iphone und Android verarbeiten zwar praktisch jedes Desktoplayout fehlerfrei in der Übersicht, aber nicht jedes Layout kann les- und benutzbar 1:1 eingezoomt werden.
Frank am :
240, da wird man ja blind (-:
Kennst du evtl. eine Möglichkeit / Webseite, wo man sein eigenes Layout mal vernünftig auf Handykompatibilität austesten kann?
Ich bilde mir ein, dass ich recht viele Handy-UA im Besucher-Log habe und wundere mich immer wieder…
rowi am :
Das hört sich schlimmer an als es ist, die Mobilbrowser sind schon verdammt gut was das rendern für kleine Auflösungen angeht.
Eine Webseite kenn ich nicht mit der man das testen kann, es gibt aber einen Android Emulator (im SDK?) mit dem man das testen könnte, wahrscheinlich auch in allen von Android unterstützen Geräteauflösungen.
Hab von Deiner Seite mal zwei Screenshots gemacht, einmal die Standardansicht, lesbar eingezoomt und dann noch mal verkleinert als Seitenüberblick
Frank (Kritiker Twitter Link) am :
Whow, Danke!
Der Seitenüberblick sieht ja seitens der Erfassung schon gut aus, aber auch wenn im Zoom scheinbar gut angepasst wird, ist das Lesen ja doch irgendwie anstrengend, oder ?
Da gewinnen Feeds und vor allem Twitter ja eine ganz neue Bedeutung, da dort alls mehr komprimiert ist.
Noch mal Danke für die Screenshots!
rowi am :
Das Lesen geht praktisch schon ganz gut, deutlich besser als es auf dem großen Bildschirm wirkt.
Zum zwischendurch bzw. jederzeit Lesen geht es gut, aber es bleibt natürlich zweite Wahl hinter einem ‘richtigen’ Display.
RSS und Twitter sind in der Tat deutlich praktischer.