Ihre Gedanken zum Webdesign für 16:9-Bildschirme

Question

Ich entwerfe Webanwendungen hauptsächlich für die Desktopnutzung (nicht für PDAs, Telefone usw.) durch Mitarbeiter und Kunden. Da immer mehr Nutzer mit Bildschirmen im 16:9-Format ausgestattet sind, sind die traditionellen Bildschirmlayouts nicht mehr ergonomisch.

So kann es beispielsweise vorkommen, dass eine lange vertikale Navigationsleiste nicht ganz passt oder dass ein komplexes Formular gescrollt werden muss, um zum nächsten Eingabefeld zu gelangen.

Wie kommen Sie mit dieser Entwicklung zurecht? Breiten Sie sich mehr horizontal aus oder bleiben Sie bei den alten Layouts? Ist es nicht wirklich ein Problem?

UPDATE

Vielen Dank für die vielen Antworten. Ich habe sie als nützlich empfunden. Hier sind einige Gedanken, die mir in den Sinn gekommen sind:

• Ich verstehe, dass das 4:3-Format immer noch am weitesten verbreitet ist, aber ich erwarte, dass sich das ändern wird.

• Außerdem haben die meisten Benutzer, die ich hier in der Firma besuche 何れも Ihr Windows ist maximiert (wirklich!), so dass die Idee, die Größe des Browsers an den Inhalt anzupassen, hier nicht hilft.

• In meinem Fall handelt es sich bei den meisten Webanwendungen um die Suche und Anzeige von Informationen oder die Dateneingabe (einige davon können große und komplexe Formulare beinhalten). Es sind vor allem die Anwendungen zur Dateneingabe, um die ich mir Sorgen mache. Vielleicht AJAX und Registerkarten-Steuerelemente könnte ein Weg nach vorne sein.

Answer 1

Bei der Einführung von Breitbildschirmen hat sich die Auflösung in der Regel nur horizontal erhöht. Aus 1024x768-Laptops werden 1280x800, aus 1600x1200-Displays werden 1920x1200 und so weiter. Die vertikale Größe ist nach wie vor verfügbar.

Es ist an der Zeit, dass ich diese Antwort aktualisiere, um mich an die Veränderungen anzupassen, wie, wo und womit die Menschen im Internet surfen. Ich tendiere zu responsiven Designs, die bis zu einem gewissen Grad flüssig sind, aber dank Media-Queries und anderen nützlichen Techniken dem Designer viel mehr Kontrolle über den Reflow der Präsentation geben, während sie immer noch die Fähigkeit haben, sich an jede Ansicht/Bildschirmgröße anzupassen.

Ich habe damit begonnen, Inhalte anzupassen und zu komprimieren, wenn die verfügbare Ansicht kleiner als eine bestimmte Grenze ist, und Text auf einer maximalen Zeilenbreite zu halten, aber andere Elemente zu erweitern und neu anzuordnen.

Dabei geht es nicht nur um die Verkleinerung einer Website für ein mobiles Gerät, sondern auch um die Anpassung und Einpassung von Elementen in einen Vollbildbrowser auf einem HDTV-Fernseher - oder einfach darum, dass sie ein kleineres Tablet mit einem Netbook-ähnlichen Off-Size ausfüllen und gut aussehen.

Ich persönlich verstehe immer noch nicht die Verwendung traditioneller "fließender" Layouts, bei denen sich eine mittlere Textspalte ohne zu zögern auf 2000 Pixel ausdehnen kann, es sei denn, es handelt sich um Web Anwendungen in denen Sie Excel-ähnliche Datenmatrizen oder ein großes Bild anstelle des eigentlichen Textinhalts anzeigen müssen. Ich persönlich bin über zu viele solcher Sites gestolpert, bei denen der Rand ebenfalls zu klein ist. Wenn ich den Browser erweitere, vergrößert sich der Rand auch bei voller Breite von 1920 nicht und ist immer noch zu klein - ein Designer hat mir einen unbequemen Rand aufgezwungen, und ich kann ihn nicht beheben, indem ich das CSS der Site mit den Entwicklungswerkzeugen des Browsers ändere ^^

Der erste Schritt zu einem responsiven Design bestand für mich darin, die berüchtigte feste Breite von 960 Pixel zu nehmen, die ich so liebe, und sie in drei Schritten anzupassen, wenn die Ansicht kleiner war. Das machte es auf kleineren Geräten bis hin zu einem Telefonbildschirm angenehm. Meine derzeitige Herausforderung besteht jedoch darin, das Design über die 1200px-Marke hinaus zu verbreitern, wo die Dinge für meinen Geschmack zu breit werden und ein weiterer Element-Reflow durchgeführt werden muss - aber vielen Websites fehlt jeglicher Inhalt, um sie überhaupt dafür zu verwenden...

Answer 2

Als Benutzer y Designer, ich hasse Seiten mit fester Breite. Viele Websites könnten fließend gestaltet werden, werden es aber nicht, weil es "der einfache Weg" ist. Dann folgen alle Arten von Rationalisierungen, die angepasst sind (Wortspiel beabsichtigt), um diese Ansicht zu unterstützen.

Kurzmeldung: Kurze Zeilenlängen sind ein Mythos, der aus der frühen Zeitungsforschung stammt. Siehe diese Zusammenfassung für Einzelheiten und bilden Sie sich Ihr eigenes Urteil.

Sehr breite Zeilen können für manche unlesbar sein (ich persönlich finde das nicht so problematisch), aber das gilt auch für feste Layouts mit ~900px und drei Spalten, so dass jede Zeile etwa acht bis zehn Wörter umfasst.

Ich habe immer versucht, für eine vernünftige Größenanpassung zu sorgen, indem ich mir die demografischen Daten einer Website angeschaut habe (z. B. über Google Analytics) und gesehen habe, wer dazu neigt, sie zu besuchen...

Answer 3

16:9-Bildschirme sind vertikal nicht wirklich eingeschränkt, wenn man darüber nachdenkt. Nach meiner Erfahrung mit diesen Monitoren beträgt ihre native Auflösung in der Regel 1920x1080. Der vertikale Raum ist immer noch größer als bei den meisten Auflösungen (1024x768, 1280x1024, etc.).

Ich habe jedoch begonnen, flüssige Layouts zu schreiben, um den horizontalen Raum zu handhaben. Einige Webdesigner bleiben gerne bei einer festen Breite von 960 Pixel. Es hängt alles davon ab, was Sie versuchen, dem Benutzer zu präsentieren.

Answer 4

Hier sind einige Grundsätze, die ich als Nutzer, aber auch als Webdesigner und Entwickler empfehlen würde:

1. Versuchen Sie, horizontales Scrollen zu vermeiden. Die meisten Menschen haben ein Mausrad, das nur in eine Richtung funktioniert. Der horizontale Bildlauf wird oft als sehr störend empfunden. Vertikaler Bildlauf ist jetzt in der Regel akzeptabel.
2. Bei langen Absätzen kommt es auf die Spaltengröße an. Normalerweise würde ich eine Breite von etwa 15-20 Wörtern empfehlen, aber Sie können gerne experimentieren. Der Link von alphadogg ist eine interessante Lektüre, aber ich muss sagen, dass es schwierig ist, sich bei der Webentwicklung an den Begriff "Zoll" zu halten. Wörter oder Zeichen sind vielleicht ein besseres Maß, was mich zum nächsten Punkt führt:
3. Verwenden Sie relative Einheiten für die Breite. Dadurch können Sie die Breite in den meisten Fällen auf eine bestimmte Anzahl von Wörtern beschränken.
4. Hilfreicher Hinweis: Das Problem mit einer relativen Einheit ist, dass die Seite über die Breite der Seite hinaus erweitert werden kann. Sie können das bei den meisten Browsern eindämmen, indem Sie in css eine max-width-Eigenschaft von 90 % oder so angeben. Wenn also der Text auf dem Bildschirm eines Benutzers groß ist, muss er trotzdem nicht horizontal scrollen.

Auch hier ist es nicht empfehlenswert, den Inhalt in den meisten Fällen auf 100 % der Browserbreite zu bringen. Und ich denke, je größer die Bildschirme werden, desto weniger Leute werden das Browserfenster maximieren.

Answer 5

Zusätzlich zu den anderen Kommentaren...

Die meisten Benutzer verwenden noch keine Breitbildmonitore. Noch wichtiger ist, dass viele Benutzer, die Breitbildmonitore verwenden, ihren Webbrowser nicht maximiert haben.