Was ist die Standardbreite für eine Website in Pixel oder wo sind Statistiken?
Antworten:
Es gibt keinen Standard, obwohl die meisten Entwickler von 1024x768 als Standard ausgehen.
Es gibt ein CSS-Rastersystem mit dem Namen 960grid, das die Körperbreite als 960px annimmt und dann Spalten in 96 Spalten mit 10px oder 80 Spalten mit 12px aufteilt.
Das Problem ist: PC-Bildschirme werden immer größer, in manchen Regionen jedoch langsam.
Auf der anderen Seite haben Sie bei Tech-Tops kleinere Bildschirme in Mobilgeräten und Netbooks.
Der Umgang mit dieser Realität kann schmerzhaft sein. Es gibt CSS Media Queries zur Rettung. Alternativ können Sie Tag-Link (mit rel. Handheld) verwenden, um eine alternative Version für Mobilgeräte bereitzustellen.
Folgen Sie einigen Referenzlinks für Sie
Was ist die Standardbreite für eine Website in Pixel?
Jede Zahl größer als 0 und kleiner als unendlich.
Aktuelle Best Practices für Responsive Web Design (RWD) bestehen darin, jedes Gerät unabhängig von seiner Breite in Pixeln zu unterstützen. In der Regel werden dazu Medienabfragen verwendet, um unterschiedliche Stile für unterschiedliche Bildschirmgrößenbereiche bereitzustellen. Die tatsächlich verwendeten Bereiche sind weniger wichtig, als dass das Design über die Größen hinweg konsistent ist und die Funktionalität der Website über die Größen hinweg erhalten bleibt.
Es ist sehr wahrscheinlich, dass Benutzer unterschiedliche Bildschirmgrößen sehen, ohne viel darüber nachzudenken. Daher möchten Sie die Menge an Überraschungen minimieren, wenn Sie ein Fenster ziehen, um es auf der Hälfte des Bildschirms zu verankern, oder wenn Sie Ihr Telefon kippen.
Einige gebräuchliche Breitenbereiche sind:
Diese Bereiche sind so häufig, dass ich sagen würde, sie sind praktisch ein Standard. Es müssen nicht alle Bereiche verwendet werden, z. B. kann eine Stelle eine Flüssigkeitsbreite von weniger als 768 und dann eine feste Breite aufweisen und für 768+ zentriert sein.
Beachten Sie jedoch, dass die von Ihnen verwendeten Nummern keine Rolle spielen, solange die Site auf dem Gerät funktioniert, auf dem ein Benutzer sie anzeigt.
Wo sind Statistiken?
Nun zum kniffligen Teil, den eigentlichen Daten. Wenn Sie eine Website neu gestalten, sind nur Ihre eigenen Daten von Bedeutung. Was Wikipedia oder Stack - Überlauf oder Google oder jede andere-großen-Website-that-Macht-list-Analytics-Daten , so ist irrelevant Ihre Daten für Ihre Website.
Wenn Ihre Statistiken zeigen, dass die meisten Benutzer hauptsächlich einen bestimmten Bereich von Gerätebreiten verwenden, sollten Sie sich wahrscheinlich darauf konzentrieren, diese Benutzer zuerst zu bedienen. Wenn Ihr Design richtig anspricht, müssen Sie sich überhaupt nicht auf eine bestimmte Größe konzentrieren.
Erwägen Sie bei neuen Websites oder Sites, die zuvor keine Analyse hatten, die Verwendung eines Mobile-First-Ansatzes, und stellen Sie sicher, dass Sie Analysen verwenden, damit Sie sich ordnungsgemäß an Ihre Nutzerbasis anpassen können.
Ich bin überrascht, dass niemand anderes daran gedacht hat, die Browsergröße von Google zu erwähnen .
Wie für Standards:
80% der Zuschauer können eine Breite von bis zu 1000 Pixel verarbeiten, diejenigen, die eine Breite von mehr als 1000 Pixel verarbeiten, jedoch häufig nicht. Mit Breitbildmonitoren richten viele Menschen ihre Fenster auf die Hälfte des Bildschirms aus. Jetzt, da Win7 Drag-n-Dock unterstützt, wird es wahrscheinlich noch beliebter.
In Bezug auf die Größe: Ihr erster Eindruck für den Benutzer ist bis zu einer Größe von ca. 600 Pixel am oberen Seitenrand. Die meisten Benutzer wissen und erwarten jedoch, dass der Inhalt "unter den Tellerrand" fällt und dass sie bereit und in der Lage sind, einen Bildlauf durchzuführen.
Wenn Sie breiter als 1000px werden möchten, würde ich ein flüssiges Layout empfehlen, damit Benutzer auf Netbooks und kleineren Bildschirmen den Inhalt weiterhin richtig sehen können.
~ 960px ist in der Regel eine standardisierte Breite, hängt jedoch vom Inhalt und vom Stil ab.
Ich habe letztes Jahr einen kleinen Test mit Google Analytics durchgeführt, um herauszufinden, wie breit und hoch der durchschnittliche innere Browser ist (was die Nutzer tatsächlich sehen).
Wie andere gesagt haben, gibt es keinen Standard für diese Art von Dingen. Hier sind ein paar Tipps, die Ihre Website entweder verbessern oder beeinträchtigen:
Ich habe immer entweder Prozentsätze oder einen Build für das Worst-Case-Szenario verwendet: Die kleinste Bildschirmauflösung, auf die Sie normalerweise stoßen, ist 800 x 600, und selbst das ist selten. Alles darunter ist wahrscheinlich auf einem mobilen Gerät. Die Breite von 775px ist ein gutes Medium, oder einfach 80%, wenn Sie wissen, dass Ihre Website auf einen größeren Bildschirm skaliert noch ansprechend ist. Die häufigsten Probleme sind, dass der Textinhalt (wenn er auf 1600 Pixel Breite verkleinert wird) leer und kurz erscheint. Wenn Sie eine Website mit einer Breite von 775px haben, wird dies behoben. Bei großen Freiflächen auf beiden Seiten sieht dies jedoch möglicherweise nicht gut aus.
Lassen Sie Ihre Benutzer NIEMALS nach links oder rechts scrollen. Das Abschneiden des Seiteninhalts ist der schnellste Weg, um potenzielle Kunden oder Leser zu verlieren.
Platzieren Sie Ihre Navigation in der Nähe des oberen Bereichs oder an einem Ort, an dem Benutzer nicht scrollen müssen, um sie zu finden.
Und nur ein Inhaltstipp; Entweder hohe Grafiken / niedrige Informationen oder hohe Informationen / niedrige Grafiken. Der Versuch, beide zu kombinieren, sieht immer schrecklich aus.
Der Standard wäre "so breit / hoch wie möglich". Dies hängt vom Bildschirm des Benutzers ab:
Es ist hilfreich zu wissen, wie gängig Bildschirmauflösungen sind, und dann Ihre Vorlage auf der Grundlage der allgemeinen Verwendung durch die Mehrheit zu erstellen.
Ab Januar 2013.
1366 x 768, 25,4%
1920 x 1080 11,0%
1280 x 1024 9,7%
1440 x 900 7,3%
1280 x 800 8,2%
1680 x 1050 5,7%
1600 x 900, 5,0%
1920 x 1200 2,9%
1360 x 768 2,1%
2560 x 1440, 1,1%
Sonstige 11,6%
Google Analytics zeichnet die Bildschirmauflösungen des Besuchers auf. Sie können ganz einfach einen benutzerdefinierten Bericht erstellen, um die gängigen Bildschirmgrößen Ihrer Besucher zu überprüfen . Hier sind die Statistiken (Top 15) für meine Website für Mai 2013:
Rank Resolution % of Visits
---- ---------- -----------
1 1366x768 23.0%
2 1920x1080 17.7%
3 1440x900 8.4%
4 1280x1024 8.4%
5 1680x1050 7.1%
6 1280x800 6.9%
7 1600x900 6.0%
8 1920x1200 4.7%
9 1024x768 4.4%
10 2560x1440 2.3%
11 1360x768 2.1%
12 1280x768 1.0%
13 1600x1200 0.7%
14 1280x720 0.7%
15 1152x864 0.5%
Die Statistiken variieren von Standort zu Standort, abhängig von der Art des empfangenen Datenverkehrs. Ich selbst bevorzuge flüssige Designs mit einer prozentualen Breite von 1000px min-widthund einem angemessenen Wert max-width.
Es gibt nicht wirklich so etwas wie Standard, und die Statistiken hängen ausschließlich von der Zielgruppe ab. Wenn Sie sich an Techniker wenden, erhalten Sie im Allgemeinen eine bessere Hardware und höhere Auflösungen, weniger Technik im Gegenteil. Es gibt aber auch Telefone, Netbooks usw., deren Auflösung in den meisten Fällen erheblich unter der Norm liegt.
Als Referenz nehme ich jetzt normalerweise ein Minimum von 1024x768 an.
In jedem Fall sind hier einige: http://www.w3schools.com/browsers/browsers_display.asp http://www.w3counter.com/globalstats.php
960 Pixel sind die sichersten, da sie auf einem Bildschirm mit einer Auflösung von 1024 x 768 Pixeln und Platz für die Bildlaufleiste lassen sowie auf einem iPhone im Querformat funktionieren (weil sie den Bildschirm mit einer Auflösung von 480 x 320 Pixeln auf eine effektive Größe von 960 x 640 Pixeln verdoppeln und über keine Bildlaufleiste verfügen) Scrollleiste).
Angesichts der Tatsache, dass die meisten heutigen Breitbildmonitore eine Auflösung von "1440x900" oder mehr haben, würde ich denken, dass eine Breite von 1280 Pixeln mehr zum "Standard" wird, insbesondere wenn es um die Anzeige von Bildern geht.
HINWEIS: Die Breite von 1280 Pixel entspricht der Breite vieler älterer 17-Zoll- und 19-Zoll-Bildschirme im Verhältnis 4: 3.