Webdesign-Größen

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

Wenn ich Websites in Photoshop entwerfe

Gestalten ist nicht gleich „ein Bild machen“. Design ist ein Prozess, bei dem Sie wissen, was dieser Prozess ist. Das Erstellen eines „Mockups“ ist nur ein Teil des Designprozesses.

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

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

Auflösung > 300

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

Ein grundlegender Leitfaden

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

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

Die grundlegende Theorie besagt, dass Webdesign nicht auf Bitmaps, sondern auf Proportionen basiert. 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 XX Pixeln.

• Da steht "Dies soll so breit sein wie Ihr Bildschirm".

Hier ist mein Tipp zu einem Beitrag, wie ein Mockup präsentiert werden kann: How Do You Present Wireframes & Designs For Long One-Page Website?

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

Das ist die erste Grundidee. Von dort aus beginnen Sie damit, darüber nachzudenken, wie eine Webseite auf einem physischen Gerät aussehen sollte. Hauptsächlich:

• Ein großer Desktop-Monitor

• Ein Tablett

• Ein Telefon

Dies muss aber im Stylesheet genauer kodiert werden.

Ist Ihnen aufgefallen, dass ich noch keine Pixelgröße erwähnt habe?

Das Netzhautproblem

Ein besonderes Thema sind die High Density Displays.

Wenn Sie glauben, dass Sie eine Website mit einem großen Monitor entwerfen können und die gleichen Informationen wie auf einem kleinen Telefon verwendet werden können ... Nein. Dabei spielt es keine Rolle, ob er die gleichen 1920x1080 Pixel wie Ihr 24 Zoll Monitor hat.

Nochmals, Sie denken 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 auf einem normalen Bildschirm angezeigt werden soll.

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

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

Einige Hinweise:

• Versuchen Sie es mit einer standardisierteren Auflösung, z. B. 1920 Pixel Breite, 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 in der Größe eines Tablet-Bildschirms und ein anderes in der Größe eines Telefons 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)

• Fangen Sie an zu erforschen, was Medienabfragen sind. <= (Die Standardpraktiken sind hier)

• Erkunden 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)

Pixeln ist keine Standard-"Größe" zugeordnet. Ein 2.000 Pixel breites Bild auf einem Retina-Display (bei 2.880 x 1.800 Pixel) ist also etwa 2/3 der Breite des Bildschirms. Das gleiche Bild auf einem 1080p-Bildschirm (1920 x 1080 Pixel) ist jedoch breiter als die Bildschirmabmessungen.