Webdesign-Größen

7

Dies ist heutzutage eines meiner Hauptprobleme. Ich verwende 15 "Retina Macbook Pro. Wenn ich Websites in Photoshop entwerfe, verwende ich normalerweise die folgenden Einstellungen:

  • width = 2560, um die Anzeige auf großen Bildschirmen zu vereinfachen; Ich behalte jedoch den gesamten Text innerhalb des 12-Spalten-Inhaltsrasters (2000px).
  • res > 300

Das Problem ist, wenn ich die Site in meinem Webbrowser auf einem 1080p-Bildschirm ansehe, sieht sie riesig aus. In Photoshop auf meinem Macbook Pro sieht es jedoch normal aus.

Ich verstehe die Theorie dahinter nicht. Was sind die besten Methoden, um Ihre Website auf unterschiedliche Auflösungen zu skalieren?

Was passiert wirklich mit der Website, wenn Sie reaktionsschnelles Webdesign erstellen? Welche Schriftgröße (n) sollte ich in Photoshop verwenden, damit sie richtig skaliert werden?

Rangana Chandrasena
quelle
Mit welchen Einheiten skalieren Sie Ihre Inhalte? Wenn Sie Pixel zur Größe Ihrer Divs, Schriftarten und Bilder verwenden, handelt es sich um statische Abmessungen, die bei einer Änderung der Bildschirmauflösung nicht proportional skaliert werden. Pixel haben je nach Bildschirm unterschiedliche "Größen". Es ist viel besser, Rems und% als Maßeinheiten zu verwenden.
DavidC
Hallo David, danke. Unser Entwickler hat mich gebeten, Pixel als Textgrößeneinheit zu verwenden. Um entwirft diese Site derzeit und sie sieht für mich im Photoshop-Vollbildmodus (2560 Pixel Breite) in Ordnung aus, sieht aber nach der Entwicklung im 1080p-Bildschirm sehr groß aus. Ist es also in Ordnung, das Design auf einer Leinwand mit 1920 Pixel anstatt auf dieser Leinwand mit einer Breite von 2560 Pixel zu beginnen? Macht das Sinn?
Nochmals vielen
Google "Responsive Web Design", um eine bessere Vorstellung davon zu bekommen, wie Websites heute erstellt werden. Unterm Strich, sollten Sie wirklich nicht haben eine Breite.
DA01
Was 2560px betrifft, das auf 1080 riesig aussieht ... worüber sind Sie verwirrt? In dieser Situation haben Sie die Seite 2,5-mal so breit wie den tatsächlichen Bildschirm gemacht.
DA01

Antworten:

2

Ich werde Ihre Schritte ein wenig kommentieren, bevor ich versuche, kurz zu antworten.

Wenn ich Websites in Photoshop entwerfe

Entwerfen ist nicht dasselbe wie "ein Bild machen". Design ist ein Prozess, bei dem Sie wissen, was dieser Prozess ist. Das Erstellen eines "Modells" ist nur ein Teil des Designprozesses.

Normalerweise verwende ich die folgenden Einstellungen,
width = 2560, um die Anzeige auf großen Bildschirmen zu vereinfachen. Ich behalte jedoch den gesamten Text innerhalb des 12-Spalten-Inhaltsrasters (2000px).

Sie gehen davon aus, dass Pixel die richtige Einheit sind. Es ist nicht, sondern ein Ausgangspunkt.

res> 300

PPI hat nichts mit Webdesign zu tun. Wenn Sie jedoch Photoshop als Ausgangspunkt verwenden, stellen Sie Ihren ppi auf 72 oder 96 ein.

Eine grundlegende Anleitung

Ich verstehe die Theorie dahinter nicht. Was sind die besten Methoden, um Ihre Website auf unterschiedliche Auflösungen zu skalieren?

Ich würde "Best Practices" von "Basic Practices" trennen.

Die grundlegende Theorie lautet, dass Webdesign nicht auf Bitmaps basiert, sondern proportional. Zum Beispiel:

Verwenden Sie Ihr Bild (denken Sie an eine JPG-Datei) mit der von Ihnen gewählten Pixelgröße.

  • Ein proportionaler Prozess sagt NICHT: Dies ist ein großes Foto von XXpixeln.

  • Es heißt "Dies soll so breit sein wie Ihr Bildschirm".

Hier ist mein Tipp zu einem Beitrag darüber, wie ein Modell präsentiert werden kann: Wie präsentieren Sie Drahtmodelle und Designs für eine lange einseitige Website?

Wenn Sie diesen Code verwenden, wird das Bild neu abgetastet, um es an jede moderne Bildschirmgröße anzupassen.

Das ist die erste Grundidee. Von dort aus überlegen Sie, wie eine Webseite auf einem physischen Gerät aussehen soll. Hauptsächlich:

  • Ein großer Desktop-Monitor

  • Ein Tablett

  • Ein Telefon

Dies muss jedoch im Stylesheet genauer kodiert werden.

Haben Sie bemerkt, dass ich noch keine Pixelgröße erwähnt habe?

Das Netzhautproblem

Ein besonderes Problem sind die Displays mit hoher Dichte.

Wenn Sie der Meinung sind, dass Sie eine Website mit einem großen Monitor entwerfen können und dieselben Informationen wie auf einem kleinen Telefon verwendet werden können ... Nein. Es spielt keine Rolle, ob es die gleichen 1920 x 1080 Pixel wie Ihr 24-Zoll-Monitor hat.

Auch hier denken Sie an ein Telefon oder einen großen Monitor, nicht an die Pixel.

Die "Netzhaut" ist ein Sonderfall, bei dem Sie ein alternatives Bild liefern, das schärfer als ein normaler Bildschirm angezeigt werden kann.

Der Browser "deklariert" eine normale Pixelgröße für das Telefon, zum Beispiel 480px, "flüstert" aber gleichzeitig auf die Website "Hey, aber senden Sie mir die hochauflösenden Bilder, die Sie haben, weil ich sie schärfer anzeigen kann" Sie können ein Foto erhalten, das 2x oder 3x größer ist.

Sie beginnen übrigens mit dieser Retina-Display-Auflösung, was nicht immer der Fall ist.

Einige Hinweise:

  • Versuchen Sie es mit einer standardisierteren Auflösung, z. B. einer Breite von 1920 Pixel, aber nur als Ausgangspunkt.

  • Verwenden Sie den Code, den ich Ihnen im Link zur Verfügung gestellt habe, um eine Vorschau Ihres Bildes auf verschiedenen Monitoren anzuzeigen.

  • Schneiden Sie ein Loch in ein Blatt Papier mit der gleichen Größe wie ein Tablet-Bildschirm und ein anderes mit der gleichen Größe wie ein Telefon und stellen Sie sich den Inhalt dort vor. Nehmen Sie die notwendige Anpassung vor.

Die besten Praktiken

  • Denken Sie in Proportionen. <= (Die grundlegenden Praktiken sind hier)

  • Beginnen Sie mit der Untersuchung der Medienabfragen. <= (Die Standardpraktiken sind hier)

  • Erforschen Sie die Verwendung eines Frameworks. <= (Einige gängige Praktiken hier)

  • Studieren Sie gründlich HTML und CSS, UX-Design, Auflösung usw. <= (Die Best Practices finden Sie hier)

Rafael
quelle
0

Pixeln ist keine Standardgröße zugeordnet. Ein 2.000 Pixel breites Bild auf einem Retina-Display (2880 x 1800 Pixel) entspricht also etwa 2/3 der Bildschirmbreite. Das gleiche Bild auf einem 1080p-Bildschirm (1920 x 1080 Pixel) ist jedoch breiter als die Bildschirmabmessungen.

ThunfischMaxx
quelle
Hey TUnaMaxx danke. Ist es in Ordnung, das Design auf einer Leinwand mit einer Breite von 1920 Pixel anstelle einer Leinwand mit 2560 Pixel zu beginnen? Was ist der Unterschied? Vor- und Nachteile?
Rangana Chandrasena