Ihre Meinung zu web-design für 16:9 Bildschirme
Ich design web-apps vor allem für den desktop-Einsatz (keine PDAs, Telefone etc.) durch co-Arbeitskräfte und Kunden. Da immer mehr Nutzer werden ausgestattet mit 16:9-Bildschirme die traditionellen Bildschirm-layouts sind nicht mehr ergonomisch.
Beispielsweise eine lange vertikale navi-Leiste passen vielleicht nicht ganz oder eine komplexe form möglicherweise müssen gescrollt werden, um zum nächsten Eingabefeld.
Wie sind Sie mit der Bewältigung dieser Entwicklung? Sind Sie breitet sich mehr horizontal oder kleben mit der alten layouts? Ist es nicht wirklich ein problem?
UPDATE
Danke für die vielen Antworten. Ich habe festgestellt, dass Sie nützlich sind. Hier sind einige Gedanken, die mir eingefallen ist:
-
Nehme ich den Punkt, dass die 4:3-format immer noch die am weitesten verbreitete, aber ich erwarte, dass zu ändern.
-
Auch die meisten Nutzer, die ich Besuche, hier in der Firma haben alle Ihre Fenster maximiert (wirklich!) also die Idee von der Größe des browser passen die Inhalte nicht helfen.
-
In meinem Fall, die meisten web-apps umfassen die Suche und Anzeige der Informationen oder Daten-Eintrag (von denen einige beinhalten eine große und komplexe Formen). Es ist vor allem die Dateneingabe apps, die ich bin besorgt über. Vielleicht AJAX und Registerkarten-Steuerelemente möglicherweise einen Weg nach vorne gibt.
- Gute Frage +1
Du musst angemeldet sein, um einen Kommentar abzugeben.
Meist die Auflösung hat nur erhöhte horisontally über dem board, wenn wir uns anschauen, widescreen Annahme. 1024x768 laptops gehen, 1280x800, 1600x1200 displays gehen 1920x1200 und so weiter. Die vertikale Größe noch verfügbar ist, wie gewohnt.
Es ist an der Zeit update ich diese Antwort, um sich an die Veränderungen anzupassen, wie, wo und mit was die Menschen im web zu surfen. Ich bin tendenziell in Richtung responsive designs, welche Flüssigkeit zu einem gewissen Grad, aber Dank media queries und andere nützliche Techniken gibt dem designer eine größere Kontrolle über die Präsentation re-flow, während immer noch die Fähigkeit zur Anpassung an jede view/Display-Größe.
Anpassung und Zuklappen von Inhalten, wenn die verfügbaren view liegt weniger als eine bestimmte Grenze, und halten Sie text auf eine maximale Linienbreite, sondern erweitern und neu arrangieren, andere Elemente sind Dinge, die ich begonnen habe, zu tun.
Dies ist nicht nur beschränkt auf das verkleinern einer Webseite auf einem mobilen Gerät, sondern auch die Anpassung und Passform Elemente auf eine fullscreen-browser auf einem HDTV - oder einfach zu füllen und gut Aussehen auf einem kleineren tablet mit einem off-Größe vergleichbar mit einem netbook.
Ich noch nicht persönlich zu verstehen, die Verwendung von traditionellen "fluid" layouts wo ein Zentrum text-Spalte erweitern konnte bis 2000 Pixel, ohne zu zögern, mit Ausnahme der in web - Anwendungen, wo Sie excel-wie-Matrizen der Daten an display oder ein großes Bild sondern als tatsächlichen text-Inhalte. Ich persönlich gestolpert zu viele solcher Seiten, wo die Marge ist auch zu klein, und wenn ich erweitern den browser, die Marge nicht erhöhen, auch bei voller 1920 Breite und ist noch zu klein - designer verhängte eine unbequeme Marge auf mir und ich kann es nicht reparieren, indem Sie weniger als eine änderung der Website-CSS mit dem browser dev tools ^^
Die ersten Schritte in ein responsive design zu mir zu nehmen war die berüchtigte 960px Feste Breite, die ich so sehr Liebe und Sie sich in drei Schritte, wenn Sie der Ansicht war kleiner. Das machte es angenehm auf kleineren Geräten, die alle den Weg zu einem Handy-Bildschirm. Aber, meine aktuelle Herausforderung ist die Erweiterung der design-Vergangenheit um die 1200px markieren, wo die Sachen zu breit für meinen Geschmack und ein anderes element re-flow getan werden muss - aber viele Websites fehlt jegliche Inhalte zu verwenden, auch für das...
Als Benutzer und designer, ich hasse fixed-width-Seiten. Viele Websites gemacht werden könnten, fließend, aber nicht, weil es "den einfachen Weg". Dann folgt alle Arten von Rationalisierungen versehen sind (pun intended) unterstützen diese Ansicht.
Newsflash: Kurze Leitungslängen ist ein Mythos, dass die Termine bis Anfang Zeitung Forschung. Sehen diese Zusammenfassung für details und machen Sie Ihr eigenes Urteil.
Sehr breiten Linien möglicherweise nicht lesbar sein, um einige (finde ich nicht, dass so viel von einem Problem, persönlich), aber so sind ~900px Feste layouts mit drei Spalten, so dass jede Zeile ist ungefähr acht bis zehn Worte.
Habe ich immer versucht, den Aufbau für angemessene Größenanpassung durch die Betrachtung der demografischen Daten von einer Website (Z. B. über Google Analytics) und sehen, wer dazu neigt, zu besuchen...
16:9-Bildschirme sind nicht wirklich eingeschränkt vertikal, wenn Sie über Sie denken. Meine Erfahrung mit diesen Monitoren Ihre native Auflösungen sind in der Regel 1920x1080. Der vertikale Abstand ist noch größer als die meisten Auflösungen (1024x768, 1280x1024, etc..)
Habe ich jedoch angefangen zu schreiben, liquid layouts zu behandeln, die horizontale Raum. Einige web-Designer, wie zu halten mit 960px Feste Breite. Es hängt alles davon ab, was Sie versuchen, zu präsentieren, um dem Benutzer.
Hier sind einige Grundsätze, die ich empfehlen würde, als Nutzer aber auch als web-designer und Entwickler:
Wieder ist es nicht empfehlenswert, einfach, um flow Inhalt zu 100% der browser-Breite die meiste Zeit. Und ich denke, dass zeigt, werden Sie größer, werden Sie sehen, eine Menge weniger Leute, die Maximierung der browser windows sowieso.
Zusätzlich zu den anderen Kommentaren...
Meisten Anwender sind nicht mit widescreen-Monitoren noch. Noch wichtiger ist, viele Benutzer, die Breitbild-Monitore nicht über Ihre web-Browser maximiert.
Ich mache mir keine sorgen viel über die alten Bildschirme in diesen Tagen, und immer wenn 800px ist nicht genug ich einfach Umschalten auf 1000px. Allerdings sollten Sie nicht das design absichtlich etwas breiter, wie die Auflösung von 1920x1080. Die Anzahl der Benutzer mit solchen Bildschirmen ist nicht viel. Auch wenn es nicht der Fall ist, zu breit designs beeinflussen die usability. Lesen Sie die Texte horizontal gestreckt, um ~1500px ist nicht wirklich schön.
Einer Sache zu prüfen, ist Ihre Anwendung Körperhaltung. Ist es ein souveräner app, wo der Benutzer erwarten würde, widmen Ihre gesamte Aufmerksamkeit, um es für eine Weile? Ich habe vor kurzem neu gestaltet, eine Seite in unserer web-app, die ermöglicht dem Benutzer das ausführen von übersetzungen in andere Sprachen. In diesem Fall wurde der Benutzer gehen, um "Tauchen" zu werden, dieser Teil der Anwendung für eine Weile, so ich zog die üblichen Navigations-Elemente, die eine Ablenkung zu ermöglichen, mehr Immobilien für die Aufgabe zur hand.
In diesem Fall, die user-Basis war beschränkt auf die Leute in meiner Firma, die ich kannte, hatten alle widescreen-Monitoren, so war es leicht, die Entscheidung zu gehen, weit. Im Allgemeinen, würde ich sagen, man sollte noch design für nicht-widescreen-Monitoren, aber in den Fällen, wo es ist ein erheblicher Vorteil, das design, die die Vorteile der zusätzlichen Platz. Ich habe gesehen, einige Seiten wurden Sonnenschirmen, die für die regulären Bildschirme, sondern verwendet JavaScript, um zu erkennen, ob die Seite wurde breiter und neu anordnen, einige Elemente der Seite, wenn es war. So, die Standard-Konfiguration war immer brauchbar, aber die Benutzer mit großen Bildschirmen und JavaScript würde eine bessere Nutzung der Ihren Raum.
Ich all meine Entwicklung auf 30" monitor und die Vorschau auf einem 20" - monitor als eine schnelle überprüfung. Auf eine aktuelle Anwendung, die Version, die ich habe, hatte ich eine JS-senden Sie zurück auf die stats von dem, was meine Zielgruppe war mit, und ich komme zurück mit einer Menge von zufälligen zahlen, die kleiner als 1024x768. Von hundert Statistiken, die ich gesammelt, nur 5 oder 6 Nutzer wurden im Vollbildmodus ausgeführt auf etwas größer als einen 1440x900 Bildschirm.
Gestalten Sie Ihre Website so, dass Sie die Inhalt, was zählt, nicht wie es aussieht. Dann können Sie auch Alternative CSS-Stylesheets für den Anwender zur Auswahl.
Dies kann manchmal schwieriger sein, für den designer. Zum Beispiel, Verwendung von Tabellen für das layout nicht funktioniert.
Bitte nicht.
Design für 4:3, vielleicht 800 bis 900 Pixel breit sein, max.
Viele computer verwende ich (wie fast jeder in meiner Arbeit) sind 4:3. Nur mein laptop ist 16:9 (eigentlich 16:10 denke ich, aber nahe genug).
Ich nicht wie mit meinem web-browser so breit wie mein monitor, es ist eine Verschwendung von Speicherplatz. Sie können nicht den gesamten text Lesen breit. Auf meinem desktop 4:3-LCD (das verwende ich jetzt) die Breite ist 14". Sie können nicht Lesen 14" wide text, das Auge verliert, zu verfolgen, welche Zeile es ist. Es ist ein schrecklicher Schmerz. Die meisten Websites beschränken Sie die Breite des wirklichen Inhalt. StackOverflow ist die Haupt-inhaltsspalte ist für mich etwa 8", eine große Lesung Größe.
So, wenn Sie gehen, 16:9, die Dinge noch schlimmer. Jetzt statt der 14" haben Sie vielleicht 16". Das ist riesig. Also, was tun Sie mit all dem Platz? Sie können nicht nur text, es sei denn, Sie möchten zwei Artikel nebeneinander (wie zwei zeitungsspalten) und ich bezweifle, dass Sie das tun wollen. Das bedeutet, dass Sie nur füllen Sie es mit unwichtigen Unsinn. Mehrere Seitenleisten, mehrere ad-Spalten. Du bist im Grunde zwingt Inhalt zu füllen Raum.
Nicht jeder läuft in 1.920 x 1.080. Nicht jeder hält Ihren web-browser maximiert. Füllung fast meinen halben Bildschirm mit unwichtigen Spalten, die mir nicht ZUSAGT.
In mein design natürlich hatten wir eine Regel-of-Daumen, dass die Leitungslänge sollte nicht größer sein als 40-mal-Zeile-Höhe. Der Grund ist offensichtlich: wenn deine Augen Spur zurück an den Anfang der nächsten Zeile, die Sie wollen sicher sein, es ist die nächste Zeile, nicht in der gleichen Zeile oder der nächste plus eins.
Aus diesem Grund verwende ich immer die Feste Breite design. Mein Aktueller monitor hat eine aktive Fläche 43cm breit. Zeilenhöhe auf dieser Seite SO ist 5mm. Wenn dem SO wäre mit dem fluid design das Verhältnis Länge der Linie /line-Höhe wäre eine inakzeptable 84.
Und sind die Dinge noch schlimmer auf 30" - Monitoren.
Halte ich mich mit der Entwicklung für die Mehrheit, die immer noch mit 4:3 Monitore. Wenn ich wollte 16:9-spezifische Inhalte, würde ich wohl einen link zu den "optimiert für Breitbild-Monitore" - version, in der Art, wie das label auf der Rückseite der DVDs aus der Zeit, als nicht alle von Ihnen waren anamorph.
Hier ist ein link zu einer anderen Frage ALSO, die könnte enthält einige nützliche Informationen.
Buch-Empfehlung-web-user-interface-design
Nicht davon ausgehen, vertikale Auflösung ist OK, auf breiten Bildschirm. 1440x900 scheint eine beliebte Auflösung, und während es ist größer als 1024x768 ist, es ist deutlich kürzer als 1280x1024.
Auch nicht davon ausgehen, all die neuen Breitbild-Monitore sind ordnungsgemäß verwendet wird. Ich habe gesehen, durchaus ein paar Einrichtungen, bei denen der monitor nicht auf seiner nativen Auflösung. Menschen sind entweder nicht bewusst, dass etwas falsch ist, oder Sie schätzen die extra große Zeichen, selbst wenn, es macht die Dinge ein wenig verschwommen.
Vergessen Sie nicht, dass, nur weil ein Benutzer hat ein widescreen-monitor, es bedeutet nicht, dass Sie Ihre Fenster entweder maximiert.
Ich benutze immer 964px als meine Breite für Webseiten. Ungefähre variiert von site zu site, aber ich halte es unter 1024px Breite, unter Berücksichtigung des vertikalen scrollbars. Dies nutzt der Standort ist nicht übermäßig groß für einen 800px breiten Bildschirm, aber ist gerade groß genug, um schön Aussehen auf 1024, und 1280px Breite Bildschirme.
Habe ich gefunden, in meiner Erfahrung, dass selbst Benutzer, die verwenden eher große widescreens (ich mich mit dual-22" (1680x1050) Bildschirme, ich immer noch lieber eine Feste Breite layout, in etwa 1024px Breite für die Lesbarkeit.
Ich sehr viel Abneigung gegen das Lesen sehr großen Spannweiten der text, und ich mag zu halten, im "Buch der Breite". Die meisten websites, die ich attraktiv finde, und haben eine große Nutzer-Basis sind, um diese Größen.
Hoffe, das hilft.
Den große Mehrheit der web-Nutzer sind immer noch auf standard, non-widescreen-Monitoren (siehe stats und mein Kommentar unten), also würde ich die Gestaltung für Sie. Ich persönlich optimiert für 1024x768 Auflösung.
http://www.thecounter.com/stats/2009/January/res.php
Als regelmäßiger Benutzer von widescreen-Monitoren, die ich nicht sehen wollen, Designer, die Ihre Seiten nicht breiter. Ich betreibe 24-Zoll-Notebooks (1920 x 1200) und wenn ich bin Browsen der Website, die ich laufen in der Regel zwei Browsern nebeneinander. Wenn überhaupt, einige Seiten etwas schmaler wäre am besten. Die meisten Seiten laufen problemlos in 960 Pixel, aber es ist ärgerlich, wenn ich pop eine Website öffnen, breiter oder scrollen um alles zu sehen.
Bitte beachten Sie die rasant wachsenden Zielgruppe an die netbook-Nutzer, die mit 1024x600. Ich denke, dass sollte Ihre minimale Baugröße für aktuelle Projekte.