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

123

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?

Aximili
quelle
32
Warum wurde dies als "nicht konstruktiv" geschlossen? Scheint eine gültige Frage zu sein, und insbesondere die am besten bewertete und die akzeptierte Antwort liefern wertvolle Informationen.
Damon
20
Ich stimme Damon zu. Dies war eine gültige Frage, auf die viele Menschen gerne eine Antwort hören würden. Ich denke, SO ist beim Schließen von Fragen übereifrig geworden.
Webworm
Der Stapelüberlauf eignet sich besser für absolute Fragen und Antworten, dh für technische Fragen, die eine konkrete Antwort haben, nicht für Fragen, bei denen unterschiedliche Meinungen gültig sein können oder bei denen die richtige Antwort streng vom Anwendungsfall / Projekt abhängt.
Juan
Die Breite der Stackoverflow-Site beträgt ca. 1090px.odd!
Necktwi

Antworten:

221

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:

Mehr zum Responsive Design:

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

Karl Fast
quelle
8
Vielleicht möchten Sie Folgendes überprüfen: 960.gs eine vollständige Website zu Designs mit 960 Pixel in einem Raster. Die Technik wird als "960-Gitterdesigns" bezeichnet.
BerggreenDK
3
Es sieht so aus, als würde SO 960 verwenden, ohne dass etwas flüssig ist. Nur zu
Ihrer Information
Ihre Site sollte auch kein horizontales Scrollen mit 800px haben. Vielleicht sieht es nicht gut aus, aber alles sollte noch passen.
Palswim
Gibt es hierzu Neuigkeiten? Diese Antwort ist jetzt mehrere Jahre alt.
Crashalot
29

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.

paxdiablo
quelle
14
Warten Sie, 1024 x 768 kann die gesamte Bildschirmgröße sein, dies wird jedoch häufig durch Systemleisten, Fensterdekoration, Menüleisten, Symbolleisten, Registerkartenleisten und möglicherweise Bildlaufleisten sowie eine Navigationsregisterkarte verringert.
Svante
7
Schlechter Rat. Wer hat gesagt, dass HTML nicht für das Layout ist? Flüssigkeitslayouts sind also 90er Jahre, in denen der Unterschied in der Auflösung relativ gering war. Versuchen Sie, einige Texte in 10pt-Schrift auf einem Bildschirm von 2560 x 1600 ohne vorgeschriebene Breitenbeschränkung zu lesen. Sie werden sehr bald anfangen, diese flüssigen Layouts zu hassen.
Wouter van Nifterick
1
@Pax: Mein Punkt war, dass es sehr schwierig ist, ein flüssiges Layout zu entwickeln, das sowohl bei sehr niedrigen als auch bei sehr hohen Auflösungen gut funktioniert. Ich bin noch nie auf eine Website gestoßen, die auf meinem PDA und einem hochauflösenden Monitor mit demselben HTML-Code gut funktioniert. Die besten sind speziell ausgerichtet.
Wouter van Nifterick
1
vereinbart, funktionieren flüssige Layouts besser für alle. Zu große große Bildschirme sind kein Problem, da diese Benutzer ihren Browser auf die für sie geeigneten Abmessungen anpassen können.
Nailitdown
9
Bei flüssigen Layouts können Sie immer die maximale Breite festlegen, um eine Obergrenze für diejenigen festzulegen, die einen maximierten Browser auf einem großen Display ausführen.
Richard
8

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 ...

Mark Brittingham
quelle
Ich würde die Aussage erweitern, um vielleicht zu sagen, dass das Erzwingen einer Schriftrolle in mehrere Richtungen eine mögliche Übertretung ist. Hori-Scroll kann großartig sein, wenn es richtig gemacht wird. deanoakley.com thehorizontalway.com/html/css/urban-outfitters
typeoneerror
2
Was wir brauchen, sind zwei neue Tasten auf der Tastatur, "Seite links" und "Seite rechts".
Paxdiablo
@TypeOneError, weder fühlt sich gut an zu stöbern, es ist nicht natürlich.
UnkwnTech
@TypeOneError, die Portfolio-Site nutzte dies nur wegen der "Ordentlichkeit" und der Sauberkeit des Designs. Ich stimme jedoch Unkwntech zu, dass es sich nicht richtig anfühlt. Ganz zu schweigen von der Tatsache, dass die meisten Benutzer ein vertikales und kein horizontales Scrollrad haben. Das allein macht horizontales Scrollen zu einer schlechten Idee.
Eric
@Eric, mein Scrollrad rollt horizontal in den beiden verknüpften Sites. Ich würde sagen, für Dinge wie Portfolios, in denen Sie Aufmerksamkeit erregen und einen künstlerischen Stil zeigen möchten, ist es in Ordnung, anders zu werden. Aber im Allgemeinen wäre es für einen Benutzer verwirrend
monkeypushbutton
4

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.

Adam Dziendziel
quelle
Denken Sie am besten daran, dass die w3schools-Statistiken für Personen gelten, die ihre Website besuchen. Dies sind hauptsächlich Leute, die Webseiten entwickeln, was kein angemessener Querschnitt der Bevölkerung ist. In Bezug auf die Browser-Statistiken beträgt Firefox 44%, während IE 46% beträgt. Wahrscheinlich keine gute Probe, um das allgemeine Netz einzuschätzen.
Kibbee
3

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

Simon_Weaver
quelle
Könnten Sie dem von Ihnen erwähnten Vortrag einen Link hinzufügen?
Sri Kadimisetty
3

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

Plynx
quelle
Link ist tot. Es ist jetzt Teil von Google Analytics, auf das nur über die Anmeldung zugegriffen werden kann. Wählen Sie unter Zielgruppe> Technologie> Browser und Betriebssystem "Bildschirmauflösung" aus.
Dave Liepmann
2

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.

Kibbee
quelle
2

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.


quelle
Bravo, upvoting seit du mir zustimmst :-) obwohl in zwei Gedanken darüber, da du vielleicht mehr Stimmen bekommst als ich :-(. Na ja, c'est la vie.
paxdiablo
+1 für das scheinbare Eingeben dieser Antwort mit der iPhone-Tastatur. ;) Meine Website sieht bei 1024 mit der Safari des iPhones, fwiw, großartig aus.
Typoneerror
Mit dem iPhone denke ich, dass es davon abhängt, wie Sie es halten, vertikal oder horizontal, da offensichtlich die Abmessungen unterschiedlich sein werden
UnkwnTech
1
@TypeOneError habe es nicht nur auf dem iPhone eingegeben, ich bin auch aus der Kneipe zurückgegangen
@Pax nein, anscheinend werde ich nicht. ;-)
1

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

Nate879
quelle
1

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).

Greg Beech
quelle
Wenn Sie abstimmen, fügen Sie bitte einen Kommentar hinzu, warum.
Greg Beech
1

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.

Schwarze Katze
quelle
1

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

typoneerror
quelle
1

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

sbeam
quelle
1

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.

Hinterhältigkeit
quelle
Außerdem habe ich mir an diesem schwarzen Freitag einen 23-Zoll-Breitbild-LCD-Bildschirm mit 1080p (1920 x 1080) für 150 US-Dollar gekauft.
Sneakyness
2
Ich kann nicht sehen, wie wichtig der Bildschirm des Entwicklers für die Frage ist. Sind es die Besucher der Website, die aus meiner Sicht wichtig sind? Natürlich ist es eine gute Empfehlung, einen besseren Monitor oder mehr als einen Monitor zu erhalten.
BerggreenDK
1

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.

Jesse
quelle
1

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.

Mike
quelle
1

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!

djdaniel150
quelle
0

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.

Wouter van Nifterick
quelle
Ich stimme beiden Punkten voll und ganz zu. Ich gehe für ungefähr 960 breit (also für einen 1024x768 Bildschirm). Webdesigner müssen auch sicherstellen, dass die Zeilenlänge nicht zu lang wird, da sie sonst sehr schwer zu lesen ist.
Philip Morton
0

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.

EJ Brennan
quelle
0

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.

Teilbestellung
quelle
0

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.

UnkwnTech
quelle
0

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.

XenF
quelle
0

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?


quelle