Layout für Mobilgeräte

[AndreD]

Hallo, nach vielen Jahren des Nutzens von Elementor habe ich nun beschlossen in Zukunft meine Webseiten (wieder) selbst zu programmieren.

Ich habe das früher schon gemacht und mich gerade etwas in Flex Boxen eingearbeitet. Für mich genial und ein Grund, wieder umzusteigen auf selbst programmierte Seiten. (Ich mache das immer mittels PHP)

Nun bin ich bei meiner ersten Testseite auf ein Problem gestossen. Mir ist nicht klar, wie ich im CSS Bereich Handys von Desktops unterscheiden kann.. Die Auflösung kann ich nicht nutzen, denn es gibt mittlerweile Handys die eine höhere Auflösung haben als ein Laptop mit HD Auflösung, z.B.. Eine Unterscheidung nach Portrait und Landschafts Ansicht funktioniert im Prinzip, allerdings kann auch ein Desktop Browser Fenster länger sein als breit, also auch keine wirklich verlässliche Unterscheidung.

Gibt es noch einen anderen Ansatz?

Danke und beste Grüsse!

[Matthias Scharwies]

Servus!

Mir ist nicht klar, wie ich im CSS Bereich Handys von Desktops unterscheiden kann.

Gar nicht!

Die Auflösung kann ich nicht nutzen, denn es gibt mittlerweile Handys die eine höhere Auflösung haben als ein Laptop mit HD Auflösung, z.B..

Aus diesen Gründen!

Eine Unterscheidung nach Portrait und Landschafts Ansicht funktioniert im Prinzip, allerdings kann auch ein Desktop Browser Fenster länger sein als breit, also auch keine wirklich verlässliche Unterscheidung.

Gibt es noch einen anderen Ansatz?

Ja, der nennt sich device-agnostic! Du weißt nicht, mit welchen Geräten, Browsern und Leitungen die Nutzer unterwegs sind.

Du richtest dein Design am Inhalt aus!

• Responsiv(es Webdesign)
• CSS/Media Queries/Einstieg
• CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo AndreD,

die physikalische Auflösung eines Handys ist für Webseiten nicht unbedingt erkennbar. Gerade weil viele Webseiten nicht darauf ausgelegt sind, auf einer Auflösung von 300dpi angezeigt zu werden, wurde das "CSS Pixel" eingeführt.

Je nach Gerät entspricht ein CSS Pixel 2 oder 3 physikalischen Pixeln. In JavaScript gibt window.devicePixelRatio darüber Aufschluss, in CSS kann man Medienabfragen auf die resolution-Eigenschaft vorsehen.

Das setzt allerdings voraus, dass die Seite eine korrekte Viewport verwendet, denn andernfalls simulieren die Browser ein 960px breites Display.

Flexbox ist für das Layout der Gesamtseite eine Möglichkeit, aber eigentlich ist Grid die bessere Wahl, weil Grids zweidimensional sind und Flexboxen eigentlich nur eindimensional. Mit Hilfe von Medienabfragen kann man das Grid-Template je nach Bildschirmbreite anpassen. Typischerweise beginnt man mit dem Mobil-Layout (vorzugsweise untereinander), und wenn genug Breite da ist, fängt man an, Dinge nebeneinanderzusetzen (mobile first Ansatz). @media-Abfragen sind das Werkzeug dafür.

Hinzu kommen @container-Abfragen, mit denen man Breitenabfragen nicht nur auf den Viewport, sondern auch auf einzelne Elemente formulieren kann.

In den allermeisten Fällen kann man auf eine "Mobil"-Version der Seite verzichten (Wikipedia hat sowas wie de.m.wikipedia.org, das dürfte aber historisch gewachsen sein).

Zugegeben, das ist eine steile Lernkurve. Aber wenn Du auf diese Hilfsmittel verzichtest, brichst Du Dir erst recht die Finger.

Rolf

[Auge]

Hallo

… nur, um das Folgende noch etwas zu konkretisieren.

die physikalische Auflösung eines Handys ist für Webseiten nicht unbedingt erkennbar. Gerade weil viele Webseiten nicht darauf ausgelegt sind, auf einer Auflösung von 300dpi angezeigt zu werden, wurde das "CSS Pixel" eingeführt.

Je nach Gerät entspricht ein CSS Pixel 2 oder 3 physikalischen Pixeln. In JavaScript gibt window.devicePixelRatio darüber Aufschluss, in CSS kann man Medienabfragen auf die resolution-Eigenschaft vorsehen.

Für den Webseitenersteller ist für die Dimensionierung der Elemente nur das CSS-Pixel relevant. Ob das Display im Portätmodus pro Zeile 1200 Pixel^[1] hat, ist irrelevant, wenn man weiß, dass mit diesen 1200 Pixeln (Device Pixel (entspricht der Hardwareauflösung)) schlussendlich eine 400 Pixel^[1:1] breite Darstellung (die sogenannten CSS-Pixel) angezeigt wird. Das Mehr an Pixeln wird in Kantenglättung gesteckt, damit die Darstellung möglichst scharf wirkt.

Für die Wahl der Dimensionen der Webseitenelemente ist die Hardware-Auflösung von Mobilgeräten üblicherweise irrelevant. Das gilt zudem auch für hochwertige Anzeigen im Desktop- und Notebook-Bereich. Dort wird ja durchaus auch mit hochaufgelösten Displays gearbeitet, bei denen die Auflösung der Anzeige in Browsern nicht 1 zu 1 der Hardwareauflösung entspricht.

Tschö, Auge

---

1. Die Zahlen sind willkürlich gewählt. ↩︎ ↩︎

[Gunnar Bittersmann]

@@Rolf B

Flexbox ist für das Layout der Gesamtseite eine Möglichkeit, aber eigentlich ist Grid die bessere Wahl, weil Grids zweidimensional sind und Flexboxen eigentlich nur eindimensional.

Ja, aber.

Mit Hilfe von Medienabfragen kann man das Grid-Template je nach Bildschirmbreite anpassen.

Ohne aber auch (abhängig davon, wie das Layout konkret aussehen soll).

---

In den allermeisten Fällen kann man auf eine "Mobil"-Version der Seite verzichten (Wikipedia hat sowas wie de.m.wikipedia.org, das dürfte aber historisch gewachsen sein).

Wobei die „Mobilversion“ auch auf großen Viewports die bessere ist. Da ist die Satzbreite wenigstens beschränkt, wenn auch immer noch zu groß. Die „Desktopversion“ ist eine „Folterkammer mit 8 Metern Satzbreite“ (Frank Rausch).

Kwakoni Yiquan

[Gunnar Bittersmann]

@@AndreD

Mir ist nicht klar, wie ich im CSS Bereich Handys von Desktops unterscheiden kann.

Gar nicht. Das solltest du auch überhaupt nicht wollen.

Auf einem Handy im Querformat willst du sicher ein anderes Layout als im Hochformat. Dort unterscheidety sich das Layout womöglich nicht von dem Desktop im Vollbildmodus.

Auf einem Desktop mit Browser im Vollbildmodus willst du sicher ein anderes Layout als wenn das Browserfenster nur einen Teil des Bildschirms füllt. Oder wenn eine Sidebar eingeblendet ist. Oder wenn der Nutzer reinzoomt, weil sie sonst schlecht lesen kann. Dann unterscheidet sich das Layout womöglich nicht von dem auf dem Handy im Hochformat.

Und dann sind da noch beliebig viele Zwischengrößen, bspw. auf Tablets.

TL;DR: Die Unterscheidung von Handys und Desktops ist unsinngig. Sie hat nichts mit responsive design zu tun, sondern mit dem Nichtverstehen von responsive design.

Die Auflösung kann ich nicht nutzen, denn es gibt mittlerweile Handys die eine höhere Auflösung haben als ein Laptop mit HD Auflösung

Nein, denn hier sind nicht Device-Pixel von Bedeutung, sondern CSS-Pixel.

Wenn nötig, verwendest du media queries mit Abfrage der Viewportbreite. Und zwar in em, nicht in px.

Wenn’s denn nötig ist …

Gibt es noch einen anderen Ansatz?

Ja: intrinsic design. Mit Flexbox oder CSS-Grid ist es möglich, dass sich das Layout an den Vieport anpasst, ohne dass man dazu Breakpoints (media queries) setzen müsste.

Tip: Wenn du gerade anfängst, beschäftige die zuerst mit Grid. Das ist einfacher zu verstehen als Flexbox und fürs Seitenlayout meist auch das bessere Werkzeug.

Kwakoni Yiquan