Was ist die "häufigste" Breite und Höhe, für die Websites heutzutage entwickelt werden?

9

Ich arbeite an einem Gruppenprojekt und versuche, meine Kollegen dazu zu bringen, eine Zeichnung bezüglich ihrer Vision für eine Online-Bewerbung einzureichen. Diese Anwendung wird über einen PC angezeigt. Obwohl ich vermute, dass es keinen Industriestandard gibt, bin ich mir sicher, dass es gemeinsame Ansätze für Standorte mit Layouts mit fester Breite geben muss. Ich muss den allgemeinsten Sinn für Proportionen in der Branche kennen.

Wir werden diesen Prototyp einfach halten und daher keine Browser, Bildschirmbreiten usw. erkennen. Ich dachte mir, ich würde dies auf einfache Weise fragen, in der Hoffnung, eine einfache Antwort zu erhalten:

Was ist die "häufigste" Breite und Höhe, für die Webseiten zuletzt entwickelt wurden? Es wäre sehr hilfreich, wenn ich eine Quelle finden könnte, wenn ich meinen Kollegen erzähle, warum ich einen bestimmten Sinn für Proportionen gewählt habe, auf denen sie ihre Zeichnungen aufbauen können.

Bitte beachten Sie, wie ich diese Frage gestellt habe:

  • Ich frage nicht nach den gängigsten Bildschirmauflösungen.
  • Ich frage nicht nach den gängigsten Browsern.

Ich möchte wissen, für welche Dimensionen sich die meisten Websites in Bezug auf Layouts mit fester Größe entscheiden. Ich weiß, dass Menschen normalerweise scrollen und daher die Größe möglicherweise nicht Teil eines ~ 'Standards' ist; In diesem Fall werde ich mich mit der gängigsten Breite zufrieden geben.

website-design John R.
quelle

Antworten:

9

Wie Sie sagten, gibt es keine Standardhöhe, da diese extrem flüssig ist. Verwenden Sie also einfach alles, was Ihnen hilft, Ihr Design am besten zu visualisieren.

Für eine Breite von 960 Pixel scheint die Breite ein aktueller "Standard" für Designs mit fester Breite zu sein. Es ist üblich, dass eine Website dem Erkunden von Layouts in dieser Breite gewidmet ist .

(Ich gehe davon aus, dass Sie nicht möchten, dass sich jemand über die Verwendung eines flüssigen Designs lustig macht?)

John Conde
quelle
3

Es gibt wirklich keine Standardbreite, die Sie einstellen sollten. Die Anzahl der Benutzer eines 1024 x 768-Monitors ist in den letzten Jahren drastisch gesunken, sodass eine Breite von 960 weniger wichtig ist. Mit dem Aufkommen so vieler neuer Geräte (Smartphones, Tablets sowie Laptops und Desktops) sollten Sie für jeden Fall eine Reihe von Stylesheets erstellen.

Mit CSS-Medienabfragen können Sie Stile basierend auf der Bildschirmauflösung des Benutzers ändern. Ich neige dazu, Websites mit einem allgemeinen Stylesheet zu erstellen, das das gesamte visuelle Styling übernimmt, und dann separate Stylesheets für Mobilgeräte, Tablets, Standard-Desktops / Laptops und extra breite Bildschirme, die die Seite strukturieren.

Auf dieser Seite auf W3.org finden Sie einige Beispiele: http://www.w3.org/TR/css3-mediaqueries/

Es ist mehr Arbeit, aber es ermöglicht dem Benutzer, die bestmögliche Erfahrung zu erzielen, unabhängig davon, was er zum Durchsuchen seiner Website verwendet.

Carson
quelle
1

Was @ John Conde gesagt hat. Darüber hinaus müssen Sie berücksichtigen, wer Ihre Zielgruppe ist. Wenn es sich bei meiner Website beispielsweise um ein Technologie-Blog oder ein Gadget-Blog handelt, ist meine Zielgruppe wahrscheinlich etwas technisch versierter als die normale Zielgruppe, sodass ich für ein Layout mit einer Breite von über 1200 Pixel fotografieren kann. Oder wenn ich eine Site / einen Blog / ein Forum für Webmaster fokussieren würde, würde ich etwas weiter gehen.

Finden Sie am Ende des Tages Ihre Massendemografie heraus und verfolgen Sie, was letztendlich für sie funktionieren würde.

Zwei SEHR wichtige Dinge, die Sie beachten sollten ...

1) Wenn Ihr Design mit mehr als 900 Pixel funktioniert, gibt es keinen Grund, es auf 1200 Pixel zu erweitern, selbst wenn Ihre Demografie es sich leisten kann.

2) Stellen Sie sicher, dass Sie über eine geeignete Struktur verfügen, die diejenigen Benutzer aufnehmen kann, die möglicherweise nicht über Ihre Zielauflösung verfügen.

Adil
quelle
Ich bin mit Punkt 2 nicht einverstanden. Mit einem 1366px breiten Display, das wohl die häufigste Breite der meisten in den letzten Jahren verkauften Laptops ist, können Sie nicht zwei 900px-Fenster nebeneinander platzieren und beide gleichzeitig sehen. Wenn Sie jedoch nur ein einziges 900px-Layout haben, verschwenden Sie 34% Ihres horizontalen Speicherplatzes mit Leerzeichen. In diesem Fall wäre 1200px eine ideale Breite. Also ja, es gibt einen Grund, es zu dehnen.
nhinkle
@nhinkle: Ich glaube nicht, dass Sie Punkt 2 tatsächlich gelesen haben. Was hat Ihre Antwort damit zu tun, zwei 900px-Fenster nebeneinander anzubringen? Lesen Sie außerdem die Frage richtig durch, um zu verstehen, wonach John R fragt. Dies ist keine Diskussion über extreme Anwendungsfälle wie Sie möchten 2 900px-Fenster nebeneinander haben oder in meinem Fall möchten Sie, dass ein 1600px-Monitor (2 davon) ein Design erstellt. Es geht vielmehr um die überwiegende Mehrheit der Benutzer, die nicht Sie oder ich sind.
Adil
Ich entschuldige mich, ich wollte auf Ihren ersten Punkt antworten, nicht auf Ihren zweiten. Es tut mir leid, wenn das Verwirrung stiftete. Mein Punkt bleibt jedoch bestehen: Die überwiegende Mehrheit der Benutzer verfügt über Displays, die breit genug sind, dass ein 900-Pixel-Layout viel Platz verschwendet. Ich stimme den meisten Aussagen in Ihrer Antwort zu, aber Ihre erste "Sache, die Sie beachten sollten" trifft nicht wirklich zu. Wenn Ihre Demografie 1200px leisten kann, sollten Sie diese 1200px verwenden, andernfalls verschwenden Sie 300 ihrer Pixel.
nhinkle
@nhinkle: Du hast meinen Punkt 1 falsch verstanden. Wenn mein Design die Site innerhalb von 900 Pixel problemlos anzeigen kann, warum sollte ich sie dann auf 1200 Pixel ausdehnen? Außerdem haben 13% der Benutzer immer noch eine Bildschirmauflösung von 1024 x 768 Zugegeben, das ist eine kleine Zahl, aber groß genug, um sie zu stören und Verkäufe, Anzeigenklicks, Leads oder was auch immer Ihr Geschäftsmodell ist zu verlieren ... (Daten zitiert von: w3schools .com / browser / browser_display.asp )
Adil
Ich verstehe was sie meinen. Mein Punkt ist, dass Sie es tun sollten , wenn Ihre Benutzer im Großen und Ganzen über ausreichend große Bildschirme verfügen, um ein 1200 Pixel breites Layout zu verwenden. Beispielsweise sind Stapelaustausch-Sites für eine Breite von etwa 1000 Pixel optimiert, aber viele Benutzer haben eine Option angefordert, um die Post-Source- und Markdown-Vorschau nebeneinander anzuzeigen, wodurch mehr horizontaler Speicherplatz benötigt würde. w3schools ist keine repräsentative Stichprobe von Webbenutzern, aber abgesehen davon war diese Diskussion für Websites gedacht, auf denen 1200 logisch wäre, wenn sie zum Design passen würden.
nhinkle