Warum haben Smartphone-Screendesigns so eine geringe Ausflösung?

[PcNichtsNutz]

Hat von euch schonmal jemand den Entwickler-Link von einem Adobe XD Projekt erhalten?

In der Auswahl der Screendesigns wird unter anderem 1920x1080 für Web angezeigt und für Smartphones 375x812, dabei haben die Smartphones doch mindestens auch 1080x1920 Auflösung. Hat der Entwickler einen Nachteil, wenn ich die Smartphone-Screendesigns in 1080x1920 anlege? Nützt ihm der Entwickler-Link dann überhaupt noch etwas?

 

[BlubbsDE]

Die Frage ist wohl eher, was für ein Projekt soll das sein? Smartphones sind eben Mobildevices. Da hat man auch immer das Datenvolumen im Hinterkopf.

 

[HITCHER_I]

Und man kriegt Augenkrebs, wenn man auf so kleinem Bildschirm Text mit Full-HD in normaler Skalierung rendert.

 

[Madman1209]

Hi,

weil der Viewport bei mobilen Geräten ein anderer ist als die native Auflösung. CSS Media Queries z.B. zeigen einem das sehr deutlich.

VG,
Mad

 

[conf_t]

Tellerrand und so...... 🙄
Zudem rennt nicht jeder Nutzer eines Smartphones mit einem relativ aktuellen Modell durch die Gegend (bspw Galaxy A3 2017 kann nur 720p) Es gibt auch noch Nutzer im 720p Bereich. Schau dir mal die Screen-Specs vom iPhone SE 2020 (identisch zu 8, 7, 6, 5 und SE 2016) an.... und wenn du in FHD entwickelst, sperrst faktisch alle Nutzer kleinerer Auflösungen aus. Geizhals listet noch 1632 Handys auf mit einer Auflösung von 720p oder kleiner.

 

[netzgestaltung]

Hi,
die Lösung liegt im HTML Meta Tag viewport und dem wert width=device-width. Dadurch bekommt das CSS nicht echte Pxelwerte sondern "Viewport-Pixel". Das verwendet eigentlich jeder Entwickler und die Designs passen dazu.

Das schaut dann oft so aus:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">

Es gibt dazu Tabellen, welche Geräte dann welche "Viewport-Pixel" haben, zb hier: https://yesviz.com/devices.php

Ein älteres iPhone hat zb immer 320px Breite in meinem CSS, egal wie die echten Werte aussehen.

Das war mal dazu, ABER: seit längeren interessieren mich die Geräteklassen eigentlich nicht mehr.

Ich schaue mir alle Elemente meiner Webseiten in den verschiedensten Bildschirmgrößen an und setze einfach immer da Breakpoints wo einzelne Elemente nicht mehr ordentlich in den Viewport passen. Das Ziel ist, dass es sich überall "gut" verhält, dadurch hab ich mir diese Tabellen schon laaaaange nicht mehr angesehen.

Ich entwickle eigentlich immer "Mobile-First": Alles ohne Breakpoint ist "mobil&allgemein" danach setze ich alle Breakpoints mit "min-width" und setze so immer die nächst breitere Stufe auf. Meistens gibt es bei rund 600px den ersten Breakpoint, wo einpaltiges ev schon 2 spaltig geht. Dann 768px: Tablet portrait, 987px: Tablet landscape, kleine Desktops (und eine fibonacci zahl ;-) ), 1200px Desktops, 1500px Large Desktops (HD). Bei manchen Projekten hatte ich auch einen 2000px breakpoint für Überbreiten ;-)

Dh statt Gerätegetrieben versuche ich Inhaltsgetrieben zu entwickeln.

 

[kachiri]

Skalierung ist das Zauberwort.

 

[Elbrathil]

Hi, wie in den Posts weiter oben schon genauer geschrieben (viewport), aber kurz zusammengefasst: Die "Pixel" auf mobilen Geräten sind, im Gegensatz zu Pixeln üblicherweise am Desktop, keine tatsächlichen Hardware-Pixel, eine Angabe, die wohl vergleichbar mit Desktop-Pixeln sein soll und den Fakt beachtet, dass die Auflösungen auf mobilen Geräten viel höher und vor allem auf den unterschiedlichen Geräten sehr unterschiedlich ist. Damit man auf den unterschiedlichen Geräten einheitlich Programmieren kann, wird diese "imaginäre" Pixelzahl verwendet, die wohl in ihren Zahlen vergleichbar mit Desktop-Bildschirmen sein soll.

 

[Tzk]

Wie schon erklärt:
Mobile Geräte haben viel höhere PPI (pixel per inch) und damit muss der Inhalt deutlich größer dargestellt werden als am Desktop. Üblicherweise bewegen wir uns am Desktop zwischen 80 und 140 PPI, während ein aktuelles Iphone mal eben 460 PPI hat. Würdest du nun die gleiche Schriftgröße (in Pixeln) verwenden, bräuchtest du eine Lupe um das auf den Iphone zu lesen. Man rechnet nun also auf den mobilen Geräten in "virtuelle Pixel" um, die das Gerät theoretisch bei geringerer PPI hätte. Natürlich ist diese Auflösung das weitaus geringer als das was physisch im Gerät verbaut ist, es kommt also ein Skalierungsfaktor drauf. Im Fall des oben genannten Iphone ist das etwa Faktor 3,3, was uns zu einer "virtuellen" PPI von ~140 bringt.

 

[PcNichtsNutz]

Danke für eure Antworten. Und wie geht man es richtig an, eine Internetseite in allen 3 Größen als Screendesign zu gestalten.

Ich kann das Browserfenster schmaler ziehen und so eine Tablet- und Smartphone-Ansicht imitieren. Ich will eine Internetseite, bei der in allen Ansichten die Schriftgröße gleichgroß bleibt. Zieht zum Beispiel hier das Forum mit dem Browser schmaler, in allen 3 Ansichten ist die Schrift gleichgroß. Wenn ich jetzt für Tablet und Smartphone eine deutlich kleinere Auflösung beim Screendesign nutze, wie berechne ich dann die richtige Schriftgröße und den richtigen Zeilenabstand? Nicht das der Programmierer denkt, dass die Schriftgröße absichtlich etwas kleiner ist und das dann so einbaut, dass wenn ich das Browserfenster schmaler ziehe, dass die Schrift dann doch kleiner wird.

 

[Madman1209]

Hi,

ich verstehe die Frage mit der Schriftgröße nicht. Geht es dir um gleiche Schriftgröße dann ist Schriftgröße eben überall gleich eingestellt. Geht es dir relativ zur Screengröße ist es eben so. Das muss eben definiert werden, fertig.

Wie man es richtig angeht ist auch relativ. Am einfachsten mit einem Mockup-Tool, wenn es wirklich grafisch gestaltet sein soll. Oder eben entsprechende Templates für ein entsprechendes Grafikprogramm.

Was ich nicht verstehe: du weißt nicht, wie man es gestaltet und du redest von einem Programmierer - was genau bist dann du? Der Gestalter weiß, wie man es gestaltet, der Programmierer weiß wie er das umsetzt. Ich verstehe nicht, was deine Aufgabe genau ist.

VG,
Mad

 

[Elbrathil]

Ich finde den Tipp von dem Mockup-Tool in der Situation, wie ich sie verstanden habe wohl ganz gut, dafür sind Mockups da, um die Anforderungen ans UI grafisch darzustellen und ein gemeinsames Verständnis zu erlangen.
Was du ansonsten suchst ist responsive design - da kannst du mal danach googlen (evtl. gemeinsam mit font size) und dich schlau machen.