Welche Browserbreite sollte ich zum Entwerfen einer Website verwenden?

Ich arbeite am Grafikteil der Website und wurde gebeten, eine Website in Photoshop zu entwerfen. Ich frage mich, was die durchschnittlichen Abmessungen und Browserbreiten für eine Website sind, damit ich mein Modell mit diesen Abmessungen erstellen kann.

Im modernen Zeitalter des Webdesigns spielt die Breite des Browsers keine Rolle. Es gibt so viele verschiedene Geräte, dass Sie Ihre Designs reaktionsschnell gestalten müssen , da sie für Bildschirme jeder Größe geeignet sind.

Zu diesem Zweck sollten Sie eine Art Fluidbreiten- Rastersystem verwenden und bestimmte Geräte mithilfe von @ media-Abfragen ansprechen .

Medienabfragen sind einfach unterschiedliche Sätze von CSS-Regeln für unterschiedliche Ansichtsportgrößen. Medienabfragen reagieren auch auf dynamische Änderungen der Breite Ihres Browsers. Wenn Sie Ihren Browser verkleinern, reagiert die Seite, indem Sie die Floats löschen oder von 12 Spalten auf 1 oder 2 wechseln. Die Reaktionsfähigkeit reagiert auch auf Benutzer auf Mobilgeräten und Tabellen, wenn sie die Ausrichtung von Hochformat zu Querformat ändern oder umgekehrt.

Zielgrößen:

• 320 x 480 Mobilgerät im Hochformat
• 480 x 640 kleine Tablets oder ein iPhone im Querformat
• 768 x 1024 Tablet im Hochformat
• 1024 x 768 Tablet im Querformat
• 1200 + Desktop-Browser
• 2900 ++ große Mediendisplays oder Konferenzen (Dies ist kein Muss, aber was ist, wenn jemand Ihre Site auf einem sehr großen Display betrachtet?

Um dies in Aktion zu sehen, werfen Sie einen Blick auf das rahmenlose Raster . Es ist eigentlich nicht flüssig, aber wenn Sie Ihren Browser anpassen, geht es von 14 Spalten bis hinunter zu 1

Twitter Bootstrap , ein einfaches CSS-, HTML- und JS-Framework, das mit beliebten Komponenten der Benutzeroberfläche erstellt wurde, ist auch ein gutes Beispiel für moderne Responsive Design-Praktiken.

Eine andere Sache, die Sie möglicherweise auch berücksichtigen möchten, ist die Pixeldichte . Das iPhone 4 und das neue iPad verfügen über Retina-Displays, die doppelt so scharf sind wie normale Bildschirme. Dies macht das Bereitstellen von Sprites und Bildern anstelle von Text fast überflüssig. Auf einem iPad sehen Bilder mit Text schrecklich aus.

Die Antwort auf die Frage lautet also, dass es keine Standardbrowserbreite gibt, für die Sie entwerfen sollten. Sie sollten Ihre Entwurfsentscheidungen basierend auf Ihren Benutzern treffen und sie dort treffen, wo sie für die meisten Menschen am zugänglichsten sind.

Viele Layoutvorlagen verwenden eine Breite von 960 Pixel, da dies in die übliche Bildschirmauflösung von 1024 Pixel passt, Platz für die Bildlaufleiste bietet und leicht durch 2, 3, 4, 5, 6, 8, 10, 12 und 16 teilbar ist - ideal zum Spalten das Layout.

Ein Beispiel finden Sie unter http://960.gs .

Andere Frameworks wie Bootstrap verwenden 940px, um einige Ränder zwischen den Spalten zu berücksichtigen.

Wenn Sie auf Desktop-Browser abzielen, können Sie bei Bedarf problemlos eine Breite von etwa 1000 Pixel erreichen.

StatCounter Bildschirmauflösung

Warum etwa 1000 Pixel, wenn die typischsten Anzeigen 1024 Pixel oder mehr sind? Weil Sie die Bildlaufleisten und das Fensterchrom berücksichtigen müssen.

Wenn Sie speziell auf mobile Browser abzielen, ist eine Breite von 320 Pixel möglicherweise eine gute Wahl, obwohl mobile Browser Inhalte normalerweise so skalieren, dass sie der Ansichtsbreite entsprechen, sodass eine Breite von 950 oder 960 Pixel großartig sein kann. Bitte beachten Sie, dass 320 CSS / HTML-Pixel 640 Gerätepixeln auf Geräten mit hoher DPI wie dem iPhone entsprechen.

StatCounter mobile Bildschirmauflösung

Ihr Zielmarkt kann auch Dinge ändern. Wenn Sie sich an ein technisch versiertes Publikum wenden, können Sie davon ausgehen, dass die Dinge auf modernere Geräte verschoben werden. Wenn Sie eine Regierungswebsite erstellen, müssen Sie eine größere Auswahl berücksichtigen.

Wie bauen Sie die Site auf? Wenn Sie ein Rastersystem wie Blueprint CSS oder das 960-Rastersystem verwenden, kann dies auch die Größe bestimmen (die meisten Rastersysteme können auch auf andere Größen geändert werden).

Möglicherweise möchten Sie sich auch mit Responsive Design befassen, wenn Sie versuchen, sowohl auf Mobilgeräten als auch auf Desktops gut zu arbeiten.

In dieser Zeit beträgt die weltweite Größe des verleumdeten Desktops 1024 x 768. Es ist gut, eine Website in einer Größe von 1003 Pixel zu erstellen ...