*.psd > HTML/CSS - welche Breite für Vorlage?

SashaX · 18.02.2016

Hallo,

ich möchte eine Photoshop-Vorlage (3 Dateien - Desktop, Tablet, Smartphone) in HTML/CSS umsetzen.

Das Problem dabei ist, dass die Vorlage für Smartphone 750px breit und die für Tablet 1300px breit ist. Die Darstellung bei Smartphones berechnet sich jedoch zumeist nach etwa 360px Bildschirmbreite (die gelieferte Bildschirmbreite entspricht ja nicht der tatsächlichen Auflösung) und der Bereich für Tablets liegt etwa zwischen 768px und 900px

So wie ich das sehe, scheidet eine einfache Übertragung der Größenangaben für Schriftarten, Abstände und Objektmaße damit aus - oder sehe ich das falsch?

Soweit ich weiß, hat der Ersteller der Photoshop-Datei selbst eine Vorlage verwendet, in der offenbar die 750px für Smartphone und die 1300px für Tablet bereits voreingestellt waren. Wäre es nicht sinnvoller, das Layout für Smartphone mit einer Vorlage mit 300px Breite und für Tablet mit 768px Breite zu entwerfen?

Welches Vorgehen ist hier üblich? Sollten die Größenangaben nicht direkt 1zu1 übertragbar sein?

Fugel · 18.02.2016

Feste pixelangaben sind bei einem responsiven layout nicht üblich, hier sollten Prozentangaben gemcht werden. Das hat zur folge, das photoshop eine eher schlechte idee ist um eine Website zu bauen.

Dobi78 · 18.02.2016

Fugel schrieb:
Das hat zur folge, das photoshop eine eher schlechte idee ist um eine Website zu bauen.

Er spricht von einer DesignVORLAGE

SashaX schrieb:
Sollten die Größenangaben nicht direkt 1zu1 übertragbar sein?

Natürlich, wozu soll ich mir dann in PS ein Design machen. Du darfst auch die unterschiedlichen Geräte nicht vergessen und deren "Landscape" View.... ob Du nun für jede Bildschirmgrösse eine Vorlage erstellen willst sei mal dahingestellt.

In der Regeln nimmst Du die Standardwerte und gut ist. Anpassungen an die verschiedenen "Viewports" passiert dann sowieso per CSS.

Es ist und bleibt ein Entwurf/Vorlage und sollte nur ihren Zweck erfüllen, mehr aber auch nicht.
PS bietet ja schon standardisierte Grössen, also würde ich auch diese nutzen.

10dency · 18.02.2016

Fugel schrieb:
Feste pixelangaben sind bei einem responsiven layout nicht üblich, hier sollten Prozentangaben gemcht werden. Das hat zur folge, das photoshop eine eher schlechte idee ist um eine Website zu bauen.

Ich finde, es ist einfacher und schneller mit einem einfachen Rechtsklick, das komplette CSS aus einer Vorlage mal eben für alle markierten Ebenen zu kopieren und dann die Pixelangaben im Editor in Prozentwerte zu ändern und den Code zu optimieren, als den von Anfang an selbst zu schreiben.

SashaX · 19.02.2016

Danke schon einmal für die Antworten.

Wie @Dobi78 schon meinte, geht es mir darum, wie der Layoutentwurf in PS im Hinblick auf dessen Umsetzung in HTML/CSS gestaltet sein sollte - nicht um die Umsetzung selbst. Denke aber auch, dass z.B. InDesign als Layoutsoftware geeigneter wäre, um Vorlagen zu erstellen, als PS.

Auch bei einem responsiven Design können ja trotzdem Elemente mit festen Größen vorkommen (z.B. die Seitenleiste in der Desktopansicht, Höhenangaben, Schriftgrößen). Auch wenn die Schriftgröße in em/rem angegeben wird, bezieht sie sich ja auf einen festen Pixelwert (z.B. font-size im Body).

@10dency Ja, hatte mir auch das CSS einmal direkt von Photoshop und dann nochmal über die PS-Erweiterung CSS3PS ausgeben lassen - kamen leider jeweils unterschiedliche und auch in sich unschlüssige Werte heraus (z.B. Schriftgröße der Überschrift kleiner als die im Fließtext).

@Dobi78 Hab mir mal die Standardgrößen angeschaut. Das beginnt mit Web - Minimum (1024px Breite). Sieht mir insgesamt so aus, dass diese Breiten v.a. die Auflösungen (Resolution), nicht aber die Bildschirmgröße (Screen Size) wiederspiegeln - demgegenüber ist es aber ja v.a. die Bildschirmgröße (v.a. 'min-width'), auf die man sich im CSS bezieht. Die tatsächliche Auflösung spielt ja i.d.R. bei der Bestimmung der Schrift- und Objektgrößen oder von SVG-Files keine Rolle (sind ja alles Vektoren), sondern nur, wenn es darum geht, ob wir z.B. Bilder mit höherer Auflösung z.B. für Retina-Displays bereitstellen wollen.

Auch nachdem was ihr gesagt habt, denke ich also tatsächlich, dass die Layoutvorlage für Smartphones in 300px Breite und die für Tablets in 768px Breite angelegt werden sollte, um zu garantieren, dass sich die Größen auch 1zu1 übertragen lassen.