Auf welche Breite optimieren? Netbooks, Smartphones

In den letzten Jahren sind die Monitor-Größen kontinuierlich gewachsen – am Desktop ist mittlerweile eine Breite von 1024 Pixel die Ausnahme: 1280 Pixel oder mehr ist die Regel. Warum trotzdem für 1024 optimiert werden soll.

Monitor-Auflösungen

Klare Sache: Die „Bremser“ in Punkto Bildschirmbreiten sind Netbooks und noch mehr Smartphones und Tablets. Auch wenn die mobilen Zugriffe derzeit noch relativ gering sind (um 15%), sie werden wachsen. 
Speziell Zugriffe mit Tablets werden in der nächsten Zeit stark steigen (da muss man kein Hellseher sein). Auch hier wird - unabhängig von der tatsächlichen Auflösung - eine Breite von 1024 vorausgesetzt werden.

Bei einem relativ schmalen Webdesign ist eine speziell für Handys gemachte Version nicht unbedingt nötig.

Und: Mehr Breite bringt auch nichts. Die klassische Regel - maximal 50-60 Zeichen pro Zeile - lässt sich auf solchen Designs problemlos umsetzen, große Bilder bringt man am besten über die Fancybox oder ähnliches in Position – und zwar an jeden Monitor angepasst.

1024 Pixel minus Scrollbalken = 980 Pixel

OK – wer auf der sicheren Seite sein will, kann auch 970 Pixel nehmen, wer sich etwas abheben will, nimmt 950 oder weniger. Wenn es einen Schatten (als Hintergrund-Bild) geben soll, zählt natürlich die Breite dieses Bildes. Wer will schon – trotz knausern – einen horizontalen Scrollbalken haben.
 
Es gibt gute Gründe, warum sich genau diese Breite als Standard durchgesetzt hat:

  • Mehr ist nicht nötig. Diese Breite reicht für die gängige Kombination: Menü, Inhalt, Sidebar locker aus.
  • Bilder können als Vorschau ausreichend groß eingehängt werden, bei Bedarf stellt man die Zoom-Ansicht via jQuery-Plugin dar.
  • Man soll Besucher nicht nerven. Ein Besucher erwartet, dass eine Website gut aussieht, aber sie soll bitte so funktionieren wie alle anderen auch.

Ein Missverständnis: Auflösung von Smartphones

Auf einem Desktop-Monitor werden Pixel normalerweise 1:1 abgebildet. Nutzt man die Zoom-Funktion (Strg +/-) , merkt man sofort, dass Bilder unscharf werden; einfach deswegen, weil Desktop-Monitore traditionell bereits im Grenzbereich zur Unschärfe sind. Beim Zoom muss hochgerechnet werden, was prinzipbedingt zu Unschärfe führt.

Smartphones hingegen haben vergleichsweise winzige Bildschirme und arbeiten ganz anders: Eine Seite wird zunächst in eine Art „PDF“ konvertiert und in diesem wird dann stufenlos gezoomt. Welche Auflösung der Screen tatsächlich hat, spielt überhaupt keine Rolle – das Bild ist immer im scharfen Bereich.

Ziemlich Out: Voll-Fluid und elastisch

Designs, die sich stets der ganzen Fensterbreite anpassen, haben mittlerweile deutlich mehr Nachteile als Vorteile: Zeilen laufen ewig auseinander und sobald Bilder im Spiel sind, beginnt alles unkontrollierbar zu zerfallen.
Natürlich: Mit allerhand Tricks kann man. Aber: wozu? Um zu zeigen, dass man die ganz alten Tricks noch drauf hat? Es ist deutlich besser, diese Energie in den Inhalt zu stecken, als in Tricks, die die Mehrheit der Besucher nicht einmal merkt.

 

Kommentare:

Was mir hier gefällt, ist die Tatsache, dass einer mal sagt, dass es ja eine bestimmte " Lesebreite" gibt.
Und die Bildschirme mit 24". Wie optimiere ich für die, das links und rechts nicht dieser weiße Leerraum ist. Auf der anderen Seite verkleinere ich mir die Seiten, die über den ganzen Bildschirm gehen, weil ich es sowieso nicht lesen kann .
Vielleicht werden die Webseiten in Zukunft ja sowieso nur mehr als Video in HD abgespielt :-)

Antworten

..."fluid ist out" halte ich für quatsch:
gerade in Zeiten unterschiedlichster Auflösungen ist das so wichtig wie nire zuvor.

Einfache Lösung: Einsatz von "max-width" und "@media" für verschiedene Breiten!

Antworten

mal "responsive webdesign" googlen

Antworten

..."fluid ist out" halte ich für quatsch:
gerade in Zeiten unterschiedlichster Auflösungen ist das so wichtig wie nire zuvor.

Einfache Lösung: Einsatz von "max-width" und "@media" für verschiedene Breiten!

Antworten

Vielen Dank für die sinnvollen Infos. Da ich momentan mit dem Redesign einer kleinen Homepage beschäftigt bin, mache ich mir über diese Problematik momentan Gedanken und freue mich über die hier genannten Denkanstöße (ich habe zwar mit Monitoren die verschiedenen Auflösungen ausprobiert, hatte jedoch neue Medien wie Tablets und Smartphones wohl irgendwie verdrängt ^^ ) Super Infos, einfach und direkt auf den Punkt gebracht!
mfg Adrian

Adrian
Antworten

Mein Lob an dieser Stelle für diesen tollen Text! Locker und angenehm zu lesen und bringt die Problematik genau auf den Punkt.

Beste Grüße aus Beckum!

Antworten