Empfohlene Website-Auflösung (Breite und Höhe)? [geschlossen]

Gibt es einen Standard für die gemeinsame Website-Auflösung?

Wir zielen auf neuere Monitore ab, die möglicherweise mindestens 1280 Pixel breit sind, aber die Höhe kann variieren, und jeder Browser kann auch unterschiedliche Symbolleistenhöhen haben.

Gibt es irgendeine Art von Standard dafür?

Der Rat in diesen Tagen ist:

Optimieren Sie für 1024x768 . Für die meisten Websites gilt dies für die meisten Besucher. Die meisten Protokolle zeigen, dass 92-99% Ihrer Besuche mehr als 1024 Besuche umfassen. Während 1280 immer häufiger vorkommt, gibt es bei 1024 immer noch viele und einige darunter. Optimieren Sie dies, aber ignorieren Sie die anderen nicht.

1024 = ~ 960 . Wenn Sie Bildlaufleisten, Fensterkanten usw. berücksichtigen, beträgt die tatsächliche Breite eines 1024 x 768-Bildschirms etwa 960 Pixel . Einige Werkzeuge basieren auf einer etwas kleineren Größe, etwa 940 . Dies ist die Standardcontainerbreite im Twitter-Bootstrap .

Entwerfen Sie nicht für eine Größe . Fenstergrößen variieren. Nehmen Sie nicht an, dass die Bildschirmgröße der Fenstergröße entspricht. Entwerfen Sie für ein angemessenes Minimum, aber nehmen Sie an, dass es sich anpasst.

Verwenden Sie reaktionsschnelles Design und flüssige Layouts . Verwenden Sie Layouts, die angepasst werden, wenn die Fenstergröße geändert wird. Die Leute machen das oft, besonders auf großen Monitoren. Dies ist nur eine gute CSS-Praxis. Es gibt mehrere Front-End-Frameworks, die dies unterstützen.

Behandeln Sie Mobile als erstklassigen Bürger . Sie erhalten ständig mehr Verkehr von Mobilgeräten. Diese führen noch mehr Bildschirmgrößen ein. Sie können immer noch für 960 optimieren. Wenn Sie jedoch reaktionsschnelle Webdesign-Techniken verwenden, wird Ihre Seite je nach Bildschirmgröße angepasst.

Protokollbrowser-Anzeigeinformationen . Sie können aktuelle Zahlen dazu erhalten. Ich habe hier und hier und hier einige Zahlen gefunden . Sie können Ihre Site auch so manipulieren, dass dieselben Daten erfasst werden.

Der Benutzer wird scrollen, also mach dir keine Sorgen um die Höhe . Das alte Argument war, dass Benutzer nicht scrollen würden und alles Wichtige "über der Falte" sein sollte. Dies wurde vor Jahren umgeworfen. Benutzer scrollen viel .

Weitere Informationen zu Bildschirmauflösungen:

• Bildschirmauflösung und Seitenlayout
• Beste Bildschirmauflösung zum Entwerfen von Websites
• Design für Browsergröße - nicht Bildschirmgröße

Mehr zum Responsive Design:

• Responsive Web Design (2010, 25. Mai), Ethan Marcotte, Eine Liste auseinander.
• Responsive Web Design bei Wikipedia
• Layoutmuster für mehrere Geräte (2012, 14. März) Luke Wroblewski. Katalogisiert die beliebtesten Muster für anpassbare Bildschirmlayouts für mehrere Geräte.

Tools und Front-End-Frameworks für reaktionsschnelles Design und flüssige Layouts:

• Twitter Bootstrap
• Zurb Foundation
• 50 fantastische Tools für responsives Webdesign (2012, 24. April) Denise Jacobs & Peter Gasston

Schlechte Idee, glaube ich. Der springende Punkt beim Trennen von Inhalten und Layouts war, dass Ihre Webseite in jedem Browser angezeigt werden kann.

Wenn Sie künstliche Einschränkungen wie eine minimale Bildschirmgröße festlegen, wird Ihr Markt eingeschränkt.

Trotzdem glaube ich, dass jeder Desktop 1024x768 anzeigen kann. Aber was ist mit den Browsern, die auf iPhones oder anderen Geräten mit Bildschirmproblemen ausgeführt werden, oder sogar mit solchen, die nicht ihren gesamten Desktop für den Browser verwenden?

Als Antwort auf Ihre spezielle Frage: Nein, ich glaube nicht, dass es in Browsern einen Standard für einen minimalen oder gemeinsamen Anzeigebereich gibt.

Das Erzwingen eines horizontalen Bildlaufs durch Ihren Benutzer ist eine schwerwiegende Übertretung der Benutzeroberfläche. Sofern Sie nicht speziell eine Website für eine Population mit einer bekannten Bildschirmgröße erstellen, können Sie am sichersten sicherstellen, dass Ihr Design mit Bildschirmen mit einer Breite von nur 800 Pixel funktioniert (etwa 8% der Bevölkerung beim Surfen im Internet, wenn der Speicher mir recht ist). Es ist ratsam, es gut an größere Bildschirme anzupassen, aber nicht auf Kosten der Leute, die immer noch mit 800x600 surfen.

Folgendes ist noch zu beachten: Nicht jeder führt seinen Browser im Vollbildmodus aus (ich nicht). Die Idee, dass es in Ordnung ist, für eine bestimmte (und große) "Bildschirmgröße" zu entwerfen, funktioniert aus mehreren Gründen nicht.

Update am 15.12.2010: Als ich diese Frage zum ersten Mal beantwortete, waren 800 Pixel eine angemessene Antwort. An dieser Stelle würde ich jedoch eine Breite von 1024 Pixel empfehlen (oder 960 Pixel, wie jemand anderes betont). Technologie marschiert weiter ...

Hier sind Statistiken zur Browseranzeige im Jahr 2008: http://www.w3schools.com/browsers/browsers_display.asp

Ungefähr 50% der Benutzer verwenden immer noch 1024 x 768. Wenn Sie möchten, dass Ihre Website in hohen Auflösungen gut aussieht, verwenden Sie ein flexibles Layout.

Es gibt tatsächlich Industriestandards für Breiten (zumindest laut Yahoo). Ihre unterstützten Breiten betragen 750, 950, 974, 100%

Diese Breiten bieten Vorteile für ihre vordefinierten Raster (Spaltenlayouts), die mit Standardabmessungen für Anzeigen gut funktionieren, wenn Sie welche einschließen.

Interessantes Gespräch auch sehenswert.

siehe YUI Base

Hier ist ein großartiges Tool: Google Labs Browsergröße

Ich würde sagen, dass Sie nur erwarten sollten, dass Benutzer einen Monitor mit einer Auflösung von 800 x 600 haben. Die kanadische Regierung hat Standards, die dies als eine der Anforderungen auflisten. Obwohl dies für jemanden mit einem ausgefallenen Breitbildmonitor niedrig erscheint, denken Sie daran, dass nicht jeder einen schönen Monitor hat. Ich kenne immer noch viele Leute, die mit 1024x768 laufen. Und es ist keineswegs ungewöhnlich, jemanden zu treffen, der 800 x 600 läuft, besonders in billigen Webcafés auf Reisen. Es ist auch schön, wenn Sie Ihr Browserfenster im Vollbildmodus anzeigen müssen, wenn Sie dies nicht möchten. Sie können die Site auf breiteren Monitoren breiter machen, aber den Benutzer nicht horizontal scrollen lassen. Je. Ein weiterer Vorteil der Unterstützung niedrigerer Auflösungen besteht darin, dass Ihre Website auf Mobiltelefonen und Nintendo Wii viel einfacher funktioniert.

Ein Hinweis auf Ihre mindestens 1280 Breite, ich muss sagen, das ist weit über Bord. Die meisten 17- und sogar meine 19-Zoll-Nicht-Breitbildmonitore unterstützen nur eine maximale Auflösung von 1280 x 1024. Und der 14-Zoll-Breitbild-Laptop, auf dem ich gerade tippe, hat nur einen Durchmesser von 1280 Pixel. Ich würde sagen, dass die größte Mindestauflösung, die Sie anstreben sollten, 1024 x 768 ist, aber 800 x 600 wären ideal.

Alle bisherigen Antworten beziehen sich auf Desktop-Monitore, aber ich verwende den Stapelüberlauf auf meinem iPhone und denke nicht, dass Sie eine mobile Plattform ausschließen sollten, indem Sie auf 1024 oder 1280 horizontale Pixel abzielen. Markieren Sie Ihre Seite, damit der Browser weiß, was das alles bedeutet, und machen Sie sie kostenlos, auch auf Bildschirmlesern und anderen Kits, an die Sie nicht gedacht haben.

Es ist am besten, keine bestimmte Auflösung anzuvisieren, sondern sich einfach an viele verschiedene Auflösungen anzupassen.

Die von uns verwendeten Richtlinien, die anscheinend ziemlich weit verbreitet sind und auf den Zahlen von Google Analytics beruhen, bestehen darin, die Website so zu gestalten, dass sie auf einem Bildschirm mit einer Breite von 1024 Pixel und einer Höhe von 768 Pixel (1024 x 768) funktioniert und 1280x800 sind die häufigsten Auflösungen, die mindestens 70% des gesamten Datenverkehrs ausmachen.

Aus diesem Grund sehen Sie viele Websites (einschließlich dieser), die eine zentrale Spalte mit einer Breite von ca. 1000 Pixel und dem wichtigsten Inhalt in den oberen 500 bis 600 Pixel verwenden, sodass sie bei der Anzeige auf Bildschirmen dieser Größe über der Falte liegt.

Die Verwendung eines 1000 Pixel breiten Layouts funktioniert ziemlich gut bei Bildschirmgrößen von bis zu 1680 Pixel Breite (normalerweise so hoch wie bei Laptops, mit Ausnahme der großen 17-Zoll-Laptops), sieht jedoch bei 1920 Pixel etwas albern aus breite Computer (High-End-Computer, normalerweise Workstations), jedoch machen diese sehr hohen Auflösungen keinen großen Prozentsatz des Datenverkehrs im allgemeinen Internet aus - 2% oder weniger (andererseits, wenn Sie ein spezialisiertes Publikum wie diese Site haben kann die Zahl mit hohen Auflösungen etwas höher sein).

Obwohl die beste Breite bis 1024 erreicht werden kann, müssen Sie die Höhe anpassen, um verschiedene Browsereinstellungen (Navigationssymbolleiste, Lesezeichen-Symbolleiste, Statussymbolleiste usw.) und die Einstellungen der Taskleiste zu berücksichtigen. Der 768 wird schnell auf etwa 550 fallen.

Stellen Sie unabhängig von der Größe Ihres Zielbrowsers sicher, dass wie oben Platz für Browser-Symbolleisten, Statusleisten und Bildlaufleisten vorhanden ist. Internet Explorer (IME) verfügt häufig über mehr als 100 Pixel vertikalen Speicherplatz in Symbolleisten und Statusleisten. Wenn ich für 1024 x 768 fotografiere, würde ich normalerweise versuchen, aus Sicherheitsgründen ein Design mit einer Breite von 960 bis 980 Pixel und einer Höhe von 600 Pixel zu erstellen. Auf diese Weise können Sie bei Bedarf das Scrollen und einige schöne Leerzeichen (wenn das Design dies erfordert) berücksichtigen. Ich empfehle YUI-Raster dringend für Fälle, in denen Sie auf bestimmte Größen abzielen müssen:

YUI Grid

Ich bekomme viele Fragen von Designern, die nicht nur die Breite, sondern auch die Höhe betreffen, um „alles über der Falte zu halten“. Hier ist eine Antwort, die ich kürzlich gegeben habe -

In Bezug auf die Breite bin ich kein Designer, aber ich habe gelesen, dass eine Breite von 960 Pixel heutzutage der richtige Weg ist, da sie sich in Spalten aufteilen lässt, die gut aussehen und gut in die meisten Displays passen. Wenn Sie können, entwerfen Sie ein flüssiges Layout - dies ist jedoch nicht immer praktisch, abhängig von Ihrem Designer, Ihren CSS-Kenntnissen, den Bildern und der Textmenge.

(Sie möchten immer 65-80 Zeichen pro Zeile mit einer Zeilenhöhe von ca. 1,15). Dies ist die optimale Spaltenbreite für Text, und es hat sich gezeigt, dass sie viel schneller und angenehmer zu lesen ist als sehr breite oder schmale Spalten.

Was "über der Falte" angeht, muss ich nur davor warnen, ein solches Konzept im Web zu verwenden. Horizontales Scrollen kann und sollte vermieden werden, aber vertikales Scrollen können Sie nicht zu 100% vermeiden. Ich kann Ihnen nur sagen, dass Sie auf einem 1024x768-Display (mindestens 95% der Benutzer haben das oder höher) mit einem festen 600px-Hochblock einverstanden sein sollten. Es gibt jedoch viele verschiedene Anzeigeformate, das Browser-Chrom kann viel Platz beanspruchen und nicht jeder maximiert das Browserfenster.

Hier sind einige andere Websites, die mehr oder weniger dasselbe sagen - aber es ist schwierig, absolut alles für alle über den Tellerrand zu bringen, da Sie dann laut aktueller Statistik möglicherweise nur etwa 400 Pixel haben.

Und schließlich ein guter langer Artikel, der sehr detailliert ist (ich würde mehr posten, aber SO sagt, ich bin zu noob) - Wie man für Browsergrößen entwirft - baekdal.com

Ich persönlich habe mich immer an die maximale Breite von 1000px gehalten, zentriert in der Mitte der Seite (über den Rand links / rechts: auto).

Wenn Sie weniger als 1024 x 768 verwenden, ist es Zeit für ein Upgrade. Ernsthaft. Es ist fast 2010. Sie können Schnäppchen-Bin-LCD-Monitore mit einer nativen Auflösung von 1280 x 1024 kaufen.

Ich würde vorschlagen, dass Sie sich Medienabfragen ansehen. Dies ist eine nützliche Neuerung in CSS, die wirklich so viel Sinn macht, dass Sie sich fragen würden, warum dies nicht früher implementiert wurde. Grundsätzlich können Sie Browserattribute (z. B. maximale und minimale Breite) direkt über CSS auswählen und Ihren Layoutcode von dort aus verzweigen. Ähnlich wie beim Erstellen eines Druck-Stylesheets können Sie Ihre Desktop- und mobilen Layouts parallel in derselben Datei erstellen.

Flexible oder flüssige Layouts schränken das Design jedoch ein wenig ein, z. B. wenn Sie Hintergrundbilder verwenden, die mit dem Hintergrundbild des Körpers übereinstimmen müssen.

Ich würde lieber verschiedene CSS-Layouts für die Site erstellen und sie je nach Auflösung des Benutzers anwenden lassen. Wenn dies nicht möglich ist (ich habe mich noch nicht damit befasst), mache ich es zu einer wählbaren Option.

Okay, ich sehe hier eine Menge Fehlinformationen. Wenn Sie zunächst eine Webseite mit einer bestimmten Auflösung erstellen, z. B. 800 x 600, wird diese Seite nur mit dieser Auflösung ordnungsgemäß gerendert! Wenn dieselbe Seite auf dem Laptop oder dem Heim-PC-Monitor einer anderen Person angezeigt wird, wird die Seite mit der aktuellen Auflösung dieses Bildschirms angezeigt, NICHT mit der Auflösung, die Sie beim Entwerfen der Seite verwendet haben. Erstellen Sie keine Webseiten für eine bestimmte Auflösung! Es gibt zu viele verschiedene Seitenverhältnisse und Bildschirmauflösungen, um ein "One Size Fits All" -Szenario zu erwarten, das mit Webdesign nicht existiert. Hier ist die Lösung: Verwenden Sie CSS3-Medienabfragen, um anpassungsfähigen Code für die Auflösung zu erstellen. Hier ist ein Beispiel:

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

Sehen Sie, wir haben gerade 3 Sätze von Stilen angegeben, die mit unterschiedlichen Auflösungen gerendert werden. In unserem Beispiel wird stattdessen das CSS für 1024 ausgeführt, wenn die Auflösung eines Bildschirms größer als 800 Pixel ist. Wenn der Bildschirm, auf dem der Inhalt angezeigt wird, 1224 Pixel groß wäre, würde der 1280 ausgeführt, da 1224 größer als 1024 ist. Die Site, an der ich arbeite, funktioniert jetzt mit allen Auflösungen von 800 x 600 bis 1920 x 1080. Beachten Sie auch, dass nicht alle Monitore mit derselben Auflösung Bildschirme gleicher Größe haben. Sie könnten 15,4 Laptops nebeneinander stellen, während beide gleich aussehen, beide drastisch unterschiedliche Auflösungen haben könnten, da nicht alle Pixel auf verschiedenen LCD-Bildschirmen gleich groß sind. Verwenden Sie also Medienabfragen und erstellen Sie Ihre Website mit einem Laptop-Bildschirm mit hoher Auflösung, insbesondere 1280+. Ebenfalls, Erstellen Sie jede Medienabfrage mit einer anderen Auflösung auf Ihrem Laptop. Sie können Ihre Auflösungseinstellungen in Windows verwenden, um 800 x 600 zu verkleinern und eine Medienabfrage mit dieser Auflösung zu erstellen. Wechseln Sie dann zu 1024 x 768 und erstellen Sie eine weitere Medienabfrage mit dieser Auflösung. Ich könnte weiter und weiter machen, aber ich denke ihr solltet den Punkt verstehen.

UPDATE: Hier ist ein Link zur Verwendung von Medienabfragen, mit dem Sie mehr über innovatives Webdesign für mobile Geräte mit Medienabfragen erfahren können

Dieses Tutorial zeigt Ihnen, wie Sie für alle Geräte entwerfen. Es gibt auch Tutorials speziell für Medienabfragen. Ich habe die gesamte Site so entwickelt, dass sie auf allen Geräten, allen Bildschirmen und allen Auflösungen ohne Subdomains und nur mit CSS gerendert werden kann! Ich arbeite immer noch an der Unterstützung für Tablets und Smartphones. Die Website wird auf jedem Laptop oder Ihrem 50-Zoll-LCD-Fernseher perfekt wiedergegeben, und viele Seiten funktionieren auf allen Mobilgeräten einwandfrei. Wenn Sie Ihren gesamten Code auf eine Seite setzen, werden Ihre Seiten blitzschnell geladen! Achten Sie auch auf die Diskussion in diesem Artikel über das CSS "background-size: cover;" oder "enthalten" Eigenschaften, sie machen Ihre Hintergrundgrafiken flüssig und können bei allen Auflösungen perfekt gerendert werden.

Befolgen Sie die Tutorials der Website und Sie können eine einzelne Webseite erstellen, die alles und jeden wiedergibt!

Versuchen Sie, 1024 als Mindestbreite festzulegen. Versuchen Sie, wie es bei 800 aussieht, aber stören Sie sich nicht zu sehr daran, dass dies funktioniert. Bei 800x600 wird fast keine der großen Websites funktionieren, daher werden Leute, die an dieser Auflösung arbeiten, sowieso die ganze Zeit Probleme haben.

Wenn Sie sich für ein flüssiges Layout entscheiden, stellen Sie sicher, dass der Text nicht zu breit wird , da er bei zu langen Zeilen schwer lesbar wird. Dies ist der Hauptgrund, warum die meisten Websites eine feste Breite haben.

Ich ziele auf die 1024-Pixel-Monitore (benutze aber nicht 100% dieses Speicherplatzes). Ich habe die mit 800x600 aufgegeben. Ich würde die wenigen lieber mit veralteter Hardware bestrafen, indem ich sie scrollen lasse, wenn sie müssen, anstatt alle mit neuer Ausrüstung zu bestrafen, indem sie Platz verschwenden.

Ich nehme an, es hängt von Ihrem Publikum und der Art Ihrer App ab.

Letztendlich geht es hier nicht um Standards oder Best Practices für Markups, sondern darum, Ihr Publikum zu kennen und sicherzustellen, dass Ihre Website das tut, was Sie möchten.

Es ist wichtiger, die Breite des Browser-Ansichtsfensters als die Bildschirmauflösung zu berücksichtigen. Sie können nicht davon ausgehen, dass jedes Pixel auf einer Anzeige dem Browser zugewiesen wird (und selbst wenn dies der Fall ist, müssen Sie das Browser-Chrom subtrahieren). Wenn Sie Zugriff auf Analysen haben, die die Browserbreite angeben ( nb Browserbreite, nicht Bildschirmauflösung), achten Sie genau darauf.

Es ist schön zu versuchen, die größtmögliche Auswahl an Ansichtsfenstern unterzubringen, aber es gibt einige Einschränkungen. Einige Herausforderungen können mit CSS-Medientypen bewältigt werden , andere nicht. Einige können mit flüssigen Layouts behandelt werden. Fluid-Layouts können jedoch nicht in allen Situationen funktionieren, abhängig von der Art der anzuzeigenden Informationen, der Zeilenlänge, dem Lesekomfort usw. Einige Fluid-Layouts funktionieren nicht in breiten Displays. Die meisten brechen, wenn die Größe unter einer bestimmten Breite usw. liegt.

So gerne ich persönlich für Ansichtsfenster ~ 960 Pixel und mehr entwerfen möchte, kann man das nicht immer tun. In einigen Fällen ist es immer noch am sichersten, für Ansichtsfenster <= 760 Pixel oder so zu entwerfen (800 Pixel breites Display, maximiert) - obwohl wir diese Einschränkung endlich ein für alle Mal aufheben können - zumindest für den Desktop - nähert sich sehr schnell.

Wenn Conversions ein Problem darstellen - und Sie ein Layout mit fester Breite haben -, haben Sie besser einen verdammt guten Grund, alles zu platzieren, auf das der Benutzer klicken muss, damit die Registrierkasse irgendwo östlich des 760 "ka-ching" wird Pixel.

Das Gleiche gilt für die primäre Navigation.

Testen Sie abschließend Ihr Layout in allem, was Sie in die Hände bekommen können. Groß. Klein. Desktop. Handheld. Die Werke. Es gibt keinen Ersatz.

Ich habe gerade eine Auswahl von Bildschirmauflösungen von allen Client-Sites genommen, auf die ich Zugriff habe. Dazu gehören mehr als 20 Sites in mehr als 8 Branchen. Hier sind die Ergebnisse:
Alternativtext http://unkwndesign.com/so/percentScreenResolutions.png
Auf dieser Grundlage würde ich sagen, stellt sicher, dass es auf 1024x768 gut aussieht, da dies bei weitem die Mehrheit hier ist. Sorgen Sie sich auch nicht so sehr um die Höhe. Vermeiden Sie jedoch, dass die meisten Seiten mehr als 1-2 gedruckte Seiten in Ihrer Standardschriftgröße enthalten. Die meisten Benutzer lesen eine Seite nicht so lange und wenn ein Benutzer eine Symbolleiste installiert, die belegt vertikaler Raum, meine persönliche Präferenz ist, dass es ihr Problem ist, aber ich denke nicht, dass es eine zu große Sache ist.

* Beachten Sie, dass der Prozentsatz aufgrund von Rundungen 100,05% beträgt.

Beachten Sie, dass der Internetbrowser umso weniger maximiert wird, je höher die Auflösung ist.

Und einige Browser haben auch seitliche Balken.

Es hängt davon ab, was Sie rendern möchten, aber ich würde mich für ein Layout mit variabler Breite entscheiden, das bei einer Breite von etwa 800-900 nicht kaputt geht.

Höhe ist nicht wirklich ein Problem.

sbeam sagte, dass "Sie immer 65-80 Zeichen pro Zeile haben wollen". Das ist nicht wahr. Wikipedia kann beispielsweise 180 Zeichen pro Zeile enthalten. Oder sollte es eine bestimmte Website sein?