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?
website-design
interface-design
front-end-development
Rangana Chandrasena
quelle
quelle
Antworten:
Ich werde Ihre Schritte ein wenig kommentieren, bevor ich versuche, kurz zu antworten.
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.
Sie gehen davon aus, dass Pixel die richtige Einheit sind. Es ist nicht, sondern ein Ausgangspunkt.
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 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)
quelle
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.
quelle