it-swarm.com.de

Web-sicherer Bereich (optimale Auflösung) für das Design von Web-Apps?

Ich bin gerade dabei, eine neue Web-App zu entwerfen, und frage mich, in welchem ​​"web-sicheren Bereich" ich das Layout und Design der App optimieren soll. Mit "websicherer Bereich" ist der tatsächliche Bereich gemeint, der zur Anzeige der Website im Browser zur Verfügung steht (der von der Bildschirmauflösung sowie dem vom Browser und Betriebssystem belegten Speicherplatz beeinflusst wird).

Ich habe einige Nachforschungen angestellt und selbständig nachgedacht, wollte dies aber mitteilen, um zu sehen, wie die allgemeine Meinung ist. Folgendes habe ich gefunden:

Optimale Anzeigeauflösung:

  • Die Webstatistik von w3schools scheint die Quelle zu sein, auf die am häufigsten verwiesen wird (sie geben jedoch an, dass diese Ergebnisse von ihrer Website stammen und auf technisch versierte Benutzer ausgerichtet sind).
  • http://www.w3counter.com/globalstats.php (aggregierte Daten von etwa 15.000 verschiedenen Websites, die ihre Tracking-Dienste nutzen)
  • StatCounter Globale Statistiken > Anzeigeauflösung (Die Statistiken basieren auf von StatCounter gesammelten Daten für eine Stichprobe von mehr als 15 Milliarden Seitenaufrufen pro Monat, die über das StatCounter-Netzwerk von mehr als 3 Millionen Websites gesammelt wurden.)
  • NetMarketShare-Bildschirmauflösungen (marketshare.hitslink.com) (eine Webanalyse-Beratungsfirma, die Daten von Browsern von Website-Besuchern in ihr On-Demand-Netzwerk von Live-Statistik-Kunden überträgt. Die Daten werden aus ca. 160 Millionen Besuchern pro Monat zusammengestellt.)

Zusammenfassung der Bildschirmauflösung: Zwischen den oben genannten Quellen gibt es einige Abweichungen, aber ab Januar 2011 sind 1024 x 768 ungefähr 20%, während ~ 85 % haben eine höhere Auflösung von mindestens 1280x768 (1280x800 ist die häufigste Auflösung mit 15-20% des gesamten Web, je nach Quelle; 1280x1024 und 1366x768 folgen mit 9-14% des Anteils). Ich würde davon ausgehen, dass die höheren Auflösungswerte noch häufiger auftreten, wenn wir nach Nordamerika filtern, und sogar noch höher, wenn wir nach nordamerikanischen Unternehmensbenutzern filtern (leider konnte ich keine freien geografisch gefilterten Statistiken finden). Ein weiterer zu beachtender Punkt ist, dass die Anzahl der Desktopbenutzer mit 1024 x 768 wahrscheinlich unter den oben genannten 20% liegt, da das iPad (native 1024 x 768-Anzeige) diese Anzahl wahrscheinlich unterstützt (die von mir entwickelte App basiert auf Flash, Apple Mobilgeräte unterstützen kein Flash, sodass die iPad-Unterstützung kein Problem darstellt).

Meine Empfehlung wäre, um die Einschränkung von 1280 x 768 zu optimieren (* Hinweis: 1280 x 768 ist eigentlich eine relativ seltene Auflösung, aber ich denke, es ist ein gültiger Einschränkungsbereich, wenn man bedenkt, dass 1366 x 768 relativ häufig und 1280 die häufigste horizontale Auflösung ist).

Browser- + Betriebssystemeinschränkungen: Um die Einschränkungen weiter zu erhöhen, müssen wir den vom Browser belegten Speicherplatz abziehen (vorausgesetzt, IE ist der platzaufwendigste ) und das Betriebssystem (unter der Annahme von WinXP-Win7):

  • Win7 hat den größten Taskleisten-Footprint in einer Höhe von 40 Pixel (XP und Vista sind 30 Pixel).
  • Die standardmäßige IE8-Ansicht benötigt bis zu 25 Pixel am unteren Bildschirmrand mit der Statusleiste und weitere 120 Pixel am oberen Bildschirmrand mit der Windows-Titelleiste und der Browser-Benutzeroberfläche (vorausgesetzt, die standardmäßige Favoriten-Symbolleiste ist vorhanden) 91px ohne die Favoriten-Symbolleiste sein).
  • Unter der Annahme, dass keine Bildlaufleiste angezeigt wird, verlieren wir insgesamt 4 Pixel horizontal für den Fensterumriss.

Dies bedeutet, dass wir 583px vertikalen Raum und 1276px horizontalen Raum haben. Mit anderen Worten, ein web-sicherer Bereich von 1276 x 583

Ist das eine richtige Denkrichtung?

Ich bin wirklich überrascht, dass ich diese Art von Untersuchung nirgendwo im Internet finden konnte. Viele Websites sprechen von 1024x768, aber das ist nur die halbe Miete! Es werden keine Browser-/Betriebssystemeinflüsse auf den tatsächlichen Bereich erwähnt, in dem die Site/App angezeigt werden muss.

Jede Hilfe hierzu wäre sehr dankbar! Vielen Dank.

EDIT

Ein weiterer Nachteil meiner obigen Überlegungen ist, dass unterschiedliche Browser je nach Betriebssystem unterschiedliche Pixelmengen beanspruchen. Unter WinXP nimmt IE8 beispielsweise 142 Pixel am oberen Bildschirmrand ein (statt der oben genannten 120 Pixel für Win7), da das Dateimenü standardmäßig auf XP angezeigt wird, während das Dateimenü in Win7 standardmäßig ausgeblendet ist. Unter WinXP + IE8 wäre der web-sichere Bereich also nur 572px (768px-142-30-24 = 572).

2
M.A.X

Der durchschnittliche Benutzer kann alles von einem kleinen Mobiltelefon bis zu einem 4k-Fernseher benutzen. Sie sollten Ihre Website daher so gestalten, dass sie intelligent auf Bildschirmen jeder Größe ausgeführt werden kann. Normalerweise wird dies als "responsives" Design bezeichnet, und es gibt viele großartige Frameworks, die Ihnen dabei helfen (Bootstrap, Zhurb Foundation, HTML5 Boilerplate).

Blenden Sie auf kleinen Bildschirmen "Extras" aus, konzentrieren Sie sich auf die Kernelemente der Website und vergrößern Sie die Steuerelemente der Benutzeroberfläche, um kleinere Gesamtgrößen auszugleichen. Menüs standardmäßig ausblenden. Stellen Sie jedoch sicher, dass der Benutzer die Site weiterhin vollständig nutzen kann.

Bei mittelgroßen Bildschirmen (Tablets, Monitore mit niedriger Auflösung) liegt der Fokus auf dem Kern der Website. Vielleicht machen Sie Menüs ein bisschen kleiner und verstecken Flusen. Stellen Sie sicher, dass Ihre Paginierung auf dem neuesten Stand und einfach zu navigieren ist.

Auf großen Bildschirmen (was die meisten Leute wahrscheinlich für Desktop-Monitore verwenden) können Sie Ihre Website optimal nutzen.

Auf sehr großen Bildschirmen (Fernseher, hochauflösende Displays) haben Sie je nach Inhalt Ihrer Website zwei Möglichkeiten:

  1. Angenommen, sie haben es auf einem Fernseher oder einer Art Armaturenbrett und lassen alles viel Platz, aber behalten es ansonsten bei wie das große Display
  2. Optimieren Sie Ihren Inhalt, um so viel Inhalt wie möglich anzuzeigen.

Es gibt keine magische Auflösung, noch ist es möglich, zukünftige Auflösungen vorherzusagen. Daher sollten Sie sich darauf konzentrieren, dass Ihre Website bei allen Auflösungen gut reagiert und funktioniert.

2
Kyros

Ab dem 24. Februar 2011 gehe ich mit folgenden Seitenbreiten vor:

960px, fest zentriert - für nicht mobile Webbesucher, wenn die Site nicht für Affiliate-Marketing gedacht ist. Ich kann entweder einen 10px- oder 20px-Rand verwenden, aber der "weiße" Teil der Seite ist 960px breit.

750px, fest zentriert - für Verkaufsseiten (Landing Pages) für Affiliate-Vermarkter. Dies liegt daran, dass wir normalerweise nur eine einzige Textspalte haben und es bei 960px schwer zu lesen ist. Ich kann einen 10px bis 20px Rand innerhalb dieses 750px verwenden.

600px, fest zentriert - wenn die Seite für Affiliate-Vermarkter gedacht ist, die möchten, dass die Seite in einem PPV-Popup angezeigt wird.

480px, fest zentriert, einzelne Spalte - für Benutzer von Android und iOS. Lesen Sie sich jedoch die Webkit-Ansichtsfenster durch, da dies hier sowie im Hoch- und Querformat zum Tragen kommt (z. B. wenn ich einen Bericht mit tabellarischen Daten erstelle, die im Querformat angezeigt werden sollen).

260px, fest zentriert, einzelne Zeugsäule - für alle anderen Handys.

In Bezug auf die Höhe füge ich ein paar Symbolleisten hinzu, in denen ich es erwarten kann, und gestalte dann meine Seiten so, dass der saftige Inhalt (so viel ich kann) in diesen Bereich passt, bevor ich auf einem 15-Zoll-Laptop scrolle. Zum Beispiel, wenn ich Müssen Sie für einen Kunden eine Partner-Marketing-Squeeze-Seite erstellen, dann werde ich versuchen, das Anmeldeformular irgendwo im Bereich von 600 Pixel nach unten und darunter abzurufen.

Einige andere Faktoren, über die Sie nachdenken sollten, sind die Lesbarkeit und die Verwendung übergroßer Breitbildmonitore. In Bezug auf die Lesbarkeit ist es sehr schwierig zu erkennen, wo die nächste Zeile beginnt, wenn Sie eine einzelne Spalte mit Verkaufstext haben und breiter als beispielsweise 720px sind. Bei besonders großen Breitbildmonitoren kann es vorkommen, dass die Seite zu voll wird, wenn Sie den Inhalt zu stark vergrößern, um eine solche Auflösung zu erzielen. Zumindest für mich, wenn ich keine speziellen Berichte für eine Aufgabe erstelle, kann ich es nicht rechtfertigen, dass eine Seite breiter als 960 Pixel ist - auch nicht im nächsten Jahrhundert.

3
Volomike

Junge, es wird schwierig sein, dir irgendeine "echte" Antwort zu geben (dies ist nur eine Antwort aufgrund der Zeichenbeschränkung bei Kommentaren), und es wird noch schwieriger, sie zu sichern. Zunächst einmal würde ich sagen, w3schools ignorieren. Jeder, der Ihnen mitteilt, dass alle Geschmacksrichtungen von IE zusammen 26% der Benutzer ausmachen, ist eindeutig auf versierte Benutzer ausgerichtet.

Eine andere Sache, die ich im Hinterkopf behalten sollte, ist, dass ich beim gelegentlichen Surfen fast immer in einem Browser mit Fenstern bin und nicht dazu gezwungen werde, zu maximieren.

Um ehrlich zu sein, wenn Sie es mit einer echten Web-App zu tun haben (sagen wir threadsy oder ähnlichem), ist ein grundsolides Layout (oder halbflüssig) der richtige Weg viel mehr nachdenken und arbeiten.

Mit Sicherheit sind 20% der Benutzer, die noch 1024x768 verwenden, von Bedeutung. Denken Sie an 1 von 5 Benutzern mit einer horizontalen Bildlaufleiste, wenn Sie nicht für 1024 x 768 entwerfen. Yahoo! hat festgestellt, dass 972px die optimale Breite ist, während sich viele Webdesigner für ein 960px-Raster entschieden haben. Wenn Ihr Publikum jedoch jünger ist, können Sie sicher noch einen Schritt weiter gehen. Ich kann Ihnen sagen, dass viele Menschen mit einer Auflösung von 1024 x 768 arbeiten, nur weil ihre Augen im Laufe der 40er Jahre schlecht werden und nicht mehr mit der nativen Auflösung ihres Monitors arbeiten können. Ich empfehle auf jeden Fall, einige web safe area PSDs in Ihrem Wire-Framing zu verwenden.

Ich weiß, dass ich Ihnen keine kalten Fakten gegeben habe, aber ich hoffe, dass dies hilfreich war.

1

Mein Rat ist, nicht zu sehr von "optimaler" Auflösung zu besessen zu sein. Es gibt immer große Unterschiede in der Bildschirmauflösung, die sich ständig ändern. Auch wenn iPads Flash nicht unterstützen, haben Sie immer noch Android Tablets, Netbooks und Notebooks zur Hand. Und wenn Sie versuchen, auf diejenigen mit den niedrigsten Bildschirmauflösungen zu reagieren, werden Sie die Benutzererfahrung für den Durchschnittsbenutzer mit einer viel höheren Auflösung desoptimieren.

Außerdem surft nicht jeder mit maximiertem Browser im Internet. Sogar unterschiedliche Benutzer auf demselben Browser/Betriebssystem können unterschiedliche Browsereinstellungen haben, die ihre Ansichtsfenstergröße ändern. Es macht also keinen Sinn, die exakte richtige Pixelauflösung (insbesondere die vertikale Auflösung) zu berechnen, da es keine gibt.

Browser haben aus einem bestimmten Grund Bildlaufleisten. Wenn jemand auf einem 1024x768-Monitor im Internet surft, muss er einen Bildlauf nach oben und unten durchführen. Solange Sie die Benutzeroberfläche so gestalten, dass sie immer noch auf alles zugreifen kann, sind sie in Ordnung.

Anstatt zu versuchen, die perfekte Webauflösung aus nicht überprüften Monitorauflösungsstatistiken und fragwürdigen Annahmen über das Benutzerverhalten zu berechnen, schauen Sie sich einfach an, was auf den beliebtesten Websites im Web verwendet wird. Unternehmen wie Google, Amazon, eBay usw. verfügen über die Ressourcen, um ordnungsgemäße Usability-Studien und Nutzerrecherchen durchzuführen, um herauszufinden, was echte Webauflösungen sind. Warum also nicht einfach ihre Forschung nutzen?

Ich glaube auch nicht daran, "web safe area" -Vorlagen zu verwenden. Genau wie bei Ihren Berechnungen, bei denen die Abmessungen der Benutzeroberflächenelemente von der Bildschirmauflösung abgezogen werden, entsteht ein falsches Präzisionsgefühl, das sehr irreführend ist. Es gibt einfach zu viele Variablen, um zu behaupten, dass 572px genau die perfekte Höhe für ein Web-Layout ist. Eine nützlichere Vorlage würde unscharfe Ränder oder Verläufe aufweisen, die den hypsometrischen Farbtönen in Höhenkarten ähneln.

1
Lèse majesté