senäh

17senäh und so…

HTML/CSS/JS
16. Jun 2011
Kommentare: 9

Der 960px-Trugschluss

Kategorien: HTML/CSS/JS | 16. Jun 2011 | Kommentare: 9

Jeder Webentwickler dürfte das schonmal so oder in einer abgewandelten Form gelesen haben: ein modernes Webseiten-Layout sollte nicht breiter als 960px sein. Das kommt nicht von ungefähr. Einerseits berücksichtigt man dabei Rechner mit älteren Auflösungen sowie Netbooks, die in vielen Fällen ebenfalls keine allzu hohe Auflösung parat haben. Man orientiert sich dabei an 1024px Breite. Die restlichen (1024 – 960 =) 64px sind dabei als Leerraum gedacht. Whitespace ist wichtig!

Was ist mit 800×600 und Smartphone-Displays?

In beiden Fällen übergeht man zwar das sehr alte 800×600-Panel, jedoch dürfte damit auch wirklich kaum einer mehr unterwegs sein. Ok, Smartphone-Displays haben nochmal ganz eigene Auflösungen. Dort zoomt man sich aber den Content, den man lesen möchte, in den meisten Fällen sowieso heran. Dadurch muss sich der Webentwickler in dem Fall eigentlich keine Gedanken machen. Vielmehr sollte hier das Augenmerk auf einer mobilen Version liegen, die für geringe Auflösungen und Datenraten optimiert ist.

Er hat „Trugschluss“ gesagt

Warum sind nun besagte 960px als Standard-Layout ein Trugschluss?

Ich habe schon ein paar Mal gesehen, dass es viele vorgefertigte Hilfsmittel für die Entwicklung eines solchen Layouts gibt z.B. 24-spaltige Hilfslinien für den Import in ein Photoshop-Dokument. Das ist fein. Jedoch denkt man dabei nicht weit genug.

Wenn man z.B. mit Fireworks arbeitet, zentriert man das 960er-Layout und schafft links und rechts noch ein bisschen Platz, um zu sehen, wie das Layout in der tatsächlichen Browser-Ansicht wirkt.

Ein früher Entwurf des senäh-Layouts in Fireworks (inklusive 960px-Grid und Whitespace links und rechts)

Ein früher Entwurf des senäh-Layouts in Fireworks (inklusive 960px-Grid und Whitespace links und rechts)

Wenn man nun aber zu einem äußeren Hauptcontainer – oftmals „pagewrap“ genannt – von 960px Breite noch einen Border o.ä. hinzufügt, ist man schon über der eigentlichen Maximalbreite von – ich wiederhole mich gern – 960 Pixeln.

„Son paar Popelpixel machen doch nichts aus“

Falsch!

Bei den gängigen Betriebssystemen hat man Funktionen, die es erlauben, ein Programmfenster so anzuordnen, dass es genau 50% des Bildschirms einnimmt. So lässt sich ein Programmfenster auf der linken, das andere auf der rechten Bildschirmseite anzeigen. Wozu das Ganze? Zum Vergleichen von Texten, gleichzeitigen Ansehen von Programm und zugehörigen Notizen, und und und. Einfach zum schnellen Überblicken zweier Fenster ohne ständig zwischen 2 Programmen switchen zu müssen.

Eine tolle Funktion, die in Windows 7 nativ eingebaut ist. Dazu einfach ein Fenster an den linken bzw. rechten Bildschirmrand ziehen. In Mac OS X Snow Leopard muss man das Ganze zwar per Programm nachrüsten, ist aber auch flexibler. Nennt sich BetterSnapTool.

Fenster auf halbe Bildschirmbreite skalieren, oben: BetterSnapTool unter Mac, unten: nativ unter Windows

Fenster auf halbe Bildschirmbreite skalieren, oben: BetterSnapTool unter Mac, unten: nativ unter Windows

Wenn man nun ein Browser-Fenster in der gängigen Bildschirm-Auflösung 1920×1080 auf diese Art und Weise anordnet, nimmt es genau die Hälfte der Breite ein. Der aufmerksame Blogleser weiß, worauf ich hinaus will. Es wird 960px breit (1920 : 2 = 960 ;)). Und nun haben wir den Salat.

senäh-Layout bei 960px

senäh-Layout bei 960px

Erstmal sieht sowieso alles total gequetscht aus, weil der Rand des Browserfensters genau mit dem Rand des Layouts abschließt. Das sieht doof aus. Ist ja auch einer der Gründe, warum man beim Entwickeln eines Layout auch links und rechts immer noch ein bissl Leerraum einfügt.

Dazu kommen horizontale Scrollbalken –  meiner Meinung nach immer zu vermeiden. Ich kann hier auf’m Mac zwar horizontal scrollen, aber naja… wenn du kein Mac hast, hast du kein horizontales Scrolling 😉 Hinzu kommt, dass die Scrollbalken auch noch ein wenig Platz wegnehmen und dadurch die 960px nochmal effektiv verringern.

Fazit

Ein 960px-Layout ist mitnichten das Optimum. Eher würde ich empfehlen, auf bis zu 900 runterzugehen. Dadurch eliminiert man horizontale Scrollbalken und schafft zusätzlich noch ein bisschen Leerraum links und rechts – der Lesbarkeit und dem Anti-Quetsch-Eindruck sehr förderlich. So sieht eine Webseite auch bei kleinem Browserausschnitt wieder schick aus.

Jetzt könnte man jemand und sagen, dass ein Nutzer sein Browserfenster ja nicht so klein machen muss und das deshalb sein Problem ist. Aber netterweise bieten moderne Betriebssysteme nunmal diese auf-halbe-Bildschirmgröße-skalieren-Funktion und außerdem: uns geht es doch um die User Experience. Wir wollen, dass die Benutzer in ihrem gewohnten Workflow unsere Seiten toll finden – ohne dass sie etwas dafür machen müssen.

Word.

Ich bin übrigens gespannt, wie ihr dazu denkt. Benutzt ihr selbst Browserfenster in einem so „kleinen“ Ausschnitt? Wendet ihr den quasi-Standard der 960px bei eigenen Projekten an? Findet ihr, dass ich Müll labere? Immer her damit!

Autor: Enno

Ich bin Enno. PHP ist mein Ding, aber auch alles Neue rund um die Themen HTML5, CSS3 & Co finde ich interessant. Ich mag es Leuten zu helfen und mein Wissen weiterzugeben. Sollte dir mein Beitrag gefallen haben, lass doch nen Kommentar da oder benutze einen der Social Buttons, um deinen Dank auszudrücken ;)