Gibt es eine Standardgröße für die Breite einer Website in einem Modell? Was ist das für eine Größe? Warum?

Ich starte die meisten meiner Modelle mit 1200px Breite, obwohl ich für eine Auflösung von 1024px entwerfe. Ich habe Hilfslinien innerhalb des Modells für 1000px eingerichtet. Die Höhe kann variieren. Der Grund, warum ich meine Mockup-Datei breiter mache, ist, zu sehen, wie sich das Design anfühlt, wenn um es herum Raum zum Atmen ist. Die meisten Leute benutzen heutzutage mehr als 1024px.

Gibt es eine Standardbreite für das Entwerfen von Webseitenmodellen?

Ja Nein Vielleicht?

Es war einmal (siehe unten), als das Webdesign größtenteils versuchte, eine einzige Ansicht zu erstellen, die auf den meisten Bildschirmen recht gut passt. In den letzten fünf Jahren hat sich dies mit der Einführung von Responsive Web Design (RWD) drastisch geändert.

RWD ist ein Konstruktionsprinzip, bei dem Konstruktionen so erstellt werden, dass sie unabhängig von der Größe des Geräts auf jedes Gerät passen .

In der Webentwicklung werden Medienabfragen häufig verwendet, um Webseiten abhängig von einer Reihe von Faktoren unterschiedliche Stilsätze zuzuweisen. Einige häufige Faktoren sind:

• aktuelle Bildschirmbreite
• aktuelle Bildschirmhöhe
• Gerätebreite
• Gerätehöhe
• Geräteorientierung

Da Stile auf bestimmte Bildschirmgrößen ausgerichtet werden können, ist es nicht ungewöhnlich, mehrere Gruppen von Designs zu erstellen, die auf bestimmte Bereiche abzielen.

Klar, es gibt keine festgelegten "Standards". Es gibt keine leitende Körperschaft oder Organisation, die sagt, "Designer sollten Entwürfe nach diesen Größenrichtlinien erstellen", da dies letztendlich eine Entscheidung ist.

Vor diesem Hintergrund hat die Webentwicklungsbranche organisch eine Reihe gemeinsamer Haltepunkte gefunden, die immer wieder auftreten.

Typische Haltepunkte gelten für die aktuelle Bildschirmbreite und sind normalerweise:

_{Einheiten in px}

• 320
• 480
• 768
• 1024
• 1200
• 1600

Der Grund für diese spezifischen Zahlen ist ziemlich banal. Das ursprüngliche iPhone hatte einen Bildschirm mit den Abmessungen 320 × 480; das ursprüngliche iPad hatte einen Bildschirm mit den Abmessungen 768 × 1024; 1600 × 1200 sind für größere Bildschirmauflösungen üblich.

Während es üblich ist, Mockups an einigen oder allen dieser Haltepunkte zu sehen, ist es auch üblich, mehrere Renderings einer bestimmten Seite bereitzustellen, die dazwischenliegende Design-Wendepunkte zeigen.

Ein Fluid-Width-Comp, das gestapelte Elemente mit einer Breite von 768 Pixel anzeigt, muss möglicherweise ein Design für 900 Pixel enthalten, bei dem die Elemente auf zwei Spalten umgeschaltet wurden. Wenn Sie feststellen, dass Sie für diese Zwischenhaltepunkte viele Gruppen von Entwürfen bereitstellen müssen, empfehle ich dringend, einzelne Komponenten zu entwerfen und die Haltepunkte anzuzeigen, an denen sich eine Komponente auf Komponentenbasis ändert, ohne den Rest der Seite in das Modell aufzunehmen.

Dies hilft auch dabei, häufige Designprobleme zu vermeiden, bei denen bestimmte UI-Komponenten fehlen oder zwischen Haltepunkten nicht kongruent sind.

Das Folgende ist die ältere Version dieser Antwort, die ich der Nachwelt zuliebe behalte, die aber seit einiger Zeit nicht mehr relevant ist

Ich bin überrascht, dass noch niemand dies erwähnt hat:

Google hat ein nettes Entwicklungstool namens

Browsergröße

Es sollte so ziemlich nur Ihre Frage beantworten.

Ich habe ein paar Anmerkungen zu aktuellen Trends:

Derzeit hat die überwiegende Mehrheit der Benutzer Auflösungen von 1024 x 600 (Tablet / Netbook) oder höher. Sie müssen daran denken, etwa 24pxfür die Bildlaufleisten zu entfernen , was eine schöne, gleichmäßige Breite von 1000px ergibt. Höhe: Webbenutzer können sehr gut vertikal scrollen, da sie sich daran gewöhnt haben, Mausräder zu scrollen. Die Anfangshöhe ist vor allem für den ersten Eindruck wichtig.

Benutzer können nicht so gut horizontal scrollen, daher wird nicht empfohlen, Layouts mit einer Breite von mehr als 1000 Pixel zu erstellen.

Auch viele Benutzer mit größeren Bildschirmen verwenden nicht ihren gesamten Bildschirm für ihren Webbrowser. Besonders jetzt, da Windows 7 eine einfache Drag-and-Dock-Funktion zum Ablegen eines Fensters auf der Hälfte des Bildschirms enthält.

Zusammenfassend:

• Vermeiden Sie statische Breiten über 1000px
• Stellen Sie sicher, dass Ihr erster Eindruck bei 1024 x 600 gut aussieht
• Haben Sie keine Angst, Inhalte unter die Falte fallen zu lassen.

Kurze Antwort: 775 x 400 für 800 x 600 und 1000 x 500 für 1024 x 768.

Lange Antwort: Sie können sich nicht sicher sein, ob Ihre Präsentation auf Ihrem Client-Computer korrekt angezeigt wird (es kann sich um ein anderes Betriebssystem, einen anderen Browser, einen anderen kalibrierten Monitor oder eine niedrigere Auflösung mit besser lesbaren großen Schriftarten handeln). Aus diesem Grund neige ich dazu, Präsentationen immer auf meinem Computer zu zeigen, wenn ich kann.

Wenn ich es nicht auf meinem PC in Bezug auf die Größe anzeigen kann, verwende ich diese meine persönlichen Regeln (meine Maße sollten nicht als heilig angesehen werden, jeder hat seine eigenen):

Als sichere Größe ist es gut für 800x600 zu optimieren (Entfernen von Scrollbard und Topbar verwende ich 775x400 als "über der Linie"). Aber heutzutage habe ich angefangen, einen günstigeren Bildschirm mit einem breiteren Standard für 1024 x 768 (1000 x 500) zu entwerfen.

Wichtig ist, dass nicht die Höhe, sondern die Breite optimiert wird. Die Höhe lässt sich mit einem einfachen Maus-Scroll lösen. Wenn Sie keine Mac-Maus haben, können Sie nicht horizontal scrollen, um weitere Informationen anzuzeigen. Es ist jedoch gut zu wissen, wo mehr oder weniger die unterste Zeile des Bildschirms positioniert werden könnte, auch wenn es unmöglich ist, genau zu bestimmen.

HINWEIS: Ich benutze eine so geringe Höhe auch bei 1000px, weil die Leute dazu neigen, viele zusätzliche Bildlaufleisten im Basisbrowser zu haben (wie zum Beispiel GoogleRank oder Lesezeichen und viele andere), so dass ich immer gerne für die schlimmste Situation entwerfe, die möglich ist.

PS: Entschuldigung für mein schlechtes Englisch :)

Wir haben ein Tracking-Programm, das uns Informationen über unsere Benutzer gibt. Mehr als die Hälfte sind bei 1024x768. Also benutze ich das als "Standard" -Monitorgröße.

Dies ist jedoch nicht Ihr Live-Bereich für Ihre Website - die Leute haben Seitenleisten, sie öffnen das Browserfenster nicht immer in voller Breite usw.

Ich mag das 960-Rastersystem . Die Nummern sind flexibel und die Website bietet viele Vorlagen zum Herunterladen. Ich benutze das für meine Modelle, und alle waren bis jetzt ziemlich glücklich.

Ich müsste nach Statistiken suchen, um mich zu unterstützen (wie dieser SO-Blogbeitrag ), aber 1024 x 768 hat oder übernimmt als Standard den gemeinsamen Nenner für die Bildschirmauflösung. Ich entwerfe Web-Modelle für ein allgemeines Publikum mit einer Breite von 1000 px, um Bildlaufleisten und Fensterrahmen mit einer Auflösung von 1024 px zu berücksichtigen. Für ein spezifischeres Publikum hat Pekka in seinem Kommentar Recht. Finden Sie heraus, welche Norm für die Zielgruppe gilt.

Die heutige Browsergröße ist eine schwierige Frage, da Benutzer zwei Arten von Geräten verwenden, Computer mit immer höheren Auflösungen und Telefone mit relativ niedrigen Auflösungen.

Wenn Sie eine Site zu einer Site machen, haben die meisten Computer (von denen die meisten 90% oder mehr sind) eine Mindestauflösung von 1024. Wenn Sie etwas weniger Computer möchten, aber immer noch einen guten Prozentsatz als 1200, liegt dies ebenfalls in diesem Bereich.

Wenn Sie eine mobile Site erstellen, erreichen die meisten Telefone eine maximale Geschwindigkeit von 480px für horizontales Surfen. Die meisten von ihnen verfügen jedoch auch über ein Rendering-System für größere Sites.

Bei der Frage nach der Größe dreht sich alles um Ihr eigenes Publikum. Wenn Ihr Ziel eine Gruppe von Designern ist, können Sie eine größere Website haben, wenn Leute mittleren Alters nach einer neuen Kfz-Versicherung suchen, als Sie sollten, und wenn Sie telefonisch sind Benutzer, während auf ihren Handys zu sehen, noch kleiner.

Es hängt völlig von Ihrer Website ab. In der Regel würde ich für diese Kunden auf alten Computern nicht mehr als 1000 zahlen. Studien belegen jedoch, dass das Entwerfen für 1200 in der Designwelt mittlerweile akzeptabel ist. Es ist also definitiv ein Denkanstoß.

Ihr Plan sollte sein, den kleinsten gemeinsamen Nenner zu treffen, und wenn das Joe Dinosaur auf einem 800x600 Windows 95-Computer ist, sollten Sie sich darum kümmern.

Auch hängt es ganz vom Design Ihrer Website ab. Momentan entwerfe ich eine Website für meine Agentur und sie wird 800 Seiten umfassen, das heißt, sie richtet sich vorzugsweise nicht an bestimmte Personen.

Leider gibt es keine Standardgröße, da die Webseiten jetzt in einer Reihe von Anzeigen aufgerufen werden. Um auf der sicheren Seite zu sein, informieren Sie sich bitte über die gängigsten Auflösungen (z. B. 1024 x 768) und gestalten Sie diese nach Beliebtheit.

Die Antwort lautet: Nein, es gibt keinen "Standard".

Ich empfehle, 960px für die Breite Ihrer Vorlage zu verwenden, da die meisten Bildschirmauflösungen 1028px sind, sodass die Bildlaufleiste nicht angezeigt wird und der von Ihnen verwendete Hintergrund ebenfalls angezeigt wird.

Ich werde Ihnen vorschlagen, 1024px für die Standardbreite zu verwenden. Denn die maximale Anzahl von PCs mit CRT-Monitor und die Auflösung dieses Monitors beträgt 1024 * 768px.