Homepage auf feste Breite und Bildschirmauflösung optimieren

Zusammenfassung: Grundsätzlich optimiert man auf keine feste Auflösung, Breite oder Höhe. Ich musste mich aber auf eine Grenze entscheiden.

Man optimiert auf keine feste Breite

Es gibt heute zu viele unterschiedliche Auflösungen. Sei es hoch-auflösende 1680er oder 1920er Displays, kleine PDA, Smartphone oder Pocket-PC Displays mit 320 – 800er Breite.
Grundsätzlich sollte man sich am kleinsten Nenner orientieren und Besucher mit kleinen Auflösungen durch schlechtes Design nicht ausgrenzen.

Fluid-Webdesign

Es bedeutet ein Design mit CSS, das sich auf unterschiedliche Auflösungen anpasst.

Horizontale Scrollbars sind out und vertikale Scrolleisten in Maßen

Niemand mag horizontal scrollen. Es stört das Lesen auf Homepages. Wobei sich vertikale Scrolleisten schnell dank Mausrad etabliert haben. Man sollte es aber nicht übertreiben!

  • Muss ein Besucher 10 Bildschirmseiten nach unten blättern für Navigation und Übersicht, ist das unangenehm.
  • Wiederum stört das Blättern bei langen Artikel weniger, da man ja weiß, wo man ist.

Regel für Scrolleisten

  • Keine horizontalen Scrolleisten bei normalen Auflösugen.
  • Wenige Bildschirmseiten zu blättern, wenn man Übersichts oder Navigations-Seiten hat.
  • Nicht zu viele Bildschirmseiten bei Artikel-Seiten.

Vergleich News-Seiten wie Spiegel

Ich muss hierzu bekannte Seiten wie spiegel.de als Anti-Beispiel nehmen.
Die Seite ist so gut optimiert, dass Artikel sogar in einer Bildschirm-Breite von 600 Pixeln sichtbar sind.

Mobile User mit kleinen Displays werden sich freuen.

User mit breiteren Auflösungen sehen z.B. den rechten Teil der Navigation.

Nach meinem Empfinden ist das recht gut gelöst, hat aber einen gravierenden Nachteil:

  • Da die Seite auf den kleinsten Nenner optimiert ist, wird viel Platz in der Breite  verschenkt.
  • Endloses Blättern in die Tiefe bei der Navigation und Übersicht ist die Folge.
  • Bei Artikel wiederum spielt das Blättern keine Rolle.

Was war mein Fehler

Ich unterschätze die Anzahl der User, die mit Auflösungen kleiner als 1280er Breite arbeiteten. Eine Statistik für meine Seite ist als Screenshot eingefügt.

Mein Template war nicht ausreichend optimiert. Zu breite Werbung erzeugte bei kleineren Auflösungen horizontales Scrolbalken.

Bilder waren zu auch zu breit und sprengten das Layout.

Wie löste ich das Problem

  • Ich analysierte die Anzahl der Benutzer mit kleineren Auflösungen. Diese war sehr hoch.
  • Ich wählte schmalere Werbung aus. Ich optimierte das Template so, dass der mittlere Bereich sich in der Breite anpassen kann.
  • Bilder sind automatisch verkleinert und vergrößern sich, wenn User das möchten. Vorteil sind schnellere Ladezeit, verbesserte übersicht und höhere Auflösungs-Kompatibilität.

Meine Seiten sind z.B. so erstellt, dass sie sich verkleinern, bei kleinen Auflösungen und in die Breite geht, bei hohen Auflösungen.

Wenige Bildschirmseiten tief,  kleinste Auflösung

Ich versuche viele vertikale Bildschirmseiten tiefe Seiten zu vermeiden. Das geht natürlich nicht überall…

  • Dennoch musste ich mich für eine unterste Auflösungs-Grenze entscheiden und wählte als letzte Grenze 1024er Breite.
  • Darunter werden Scrollbars erzeugt.
  • Lesbar sind die Artikel noch gut in einer 800er Breite.
  • Unter 800er Breite muss man unnötig horizontal scrollen.

Das Erstellen von der Homepage mit Kompatibilität zu kleineren Auflösungen hätte wieder den „Spiegel.de“-Faktor – mehr Seiten in die Tiefe.

Ich selbst habe einen 22“ 1680x1050px, teste grundsätzlich runter bis zur 1024er Breite.

  • Ein zweischneidiges Schwert…

Web Developer Addon für Firefox

Besucherstatistiken mit Auflösungen in Web-Master-Tools