css media queries

[Sam]

Guten Tag

Nach tagelanger Recherche über media queries und device pixel ratio gibt es immer noch unklarheiten...

Ziel soll es sein folgende Unterteilung zu realisieren:

-Smartphone (port/land jeweils normal und retina optimiert)
-Tablet (port/land jeweils normal und retina optimiert)
-Laptop/PC (normal und retina optimiert)

Wer kennt sich aus um alle grössen und pixel device faktore abzufangen?
Welche Displaygrössen, Viewportgrössen, Umrechnungsfaktoren gibt es überhaupt?
Hat Android stets 320px?

Freundliche Grüsse und frohe Festtage

Sam

[MrMurphy]

Hallo,

du bist offensichtlich auf dem falschen Weg. Verliere dich nicht in Kleinigkeiten, die dir nichts bringen, eine Menge Zeit kosten und deshalb frustrierend sind.

Nur weil es so viele Media Queries gibt ist ihr Einsatz noch lange nicht sinnvoll, ganz im Gegenteil.

Mache einfach ein flexibles Layout, das sich der Fensterbreite anpasst, so dass nicht seitwärts gescrollt werden muss.

Dann teste mit den unterschiedlichen Fenstergrößen sowie auf unterschiedlichen Geräten und du wirst feststellen, das die Seite in der Regel gar keine Probleme macht.

Falls es mit einzelnen Geräten Probleme gibt kannst du sie gezielt mit den spezielleren Media Queries beseitigen, sofern das mit den bestehenden nicht möglich sein sollte.

Gruss

MrMurphy

[Auge]

Hallo

du bist offensichtlich auf dem falschen Weg.

Jein. Die gewünschte feine Aufteilung, ja; die Verwendung von Media Queries an sich, nein.

Verliere dich nicht in Kleinigkeiten, die dir nichts bringen, eine Menge Zeit kosten und deshalb frustrierend sind.

Nur weil es so viele Media Queries gibt ist ihr Einsatz noch lange nicht sinnvoll, ganz im Gegenteil.

Mache einfach ein flexibles Layout, das sich der Fensterbreite anpasst, so dass nicht seitwärts gescrollt werden muss.

Dann mach das mal mit einem Layout, das auf dem Desktopbrowser mehrere Bereiche nebeneinander darstellt, für kleine Displays z.B. auf Spartphones klar. Die brauchen in vielen Fällen eine andere Aufteilung und Anordnung der Elemente.

Dann teste mit den unterschiedlichen Fenstergrößen sowie auf unterschiedlichen Geräten und du wirst feststellen, das die Seite in der Regel gar keine Probleme macht.

Dass das reicht, ziehe ich in Zweifel.

Falls es mit einzelnen Geräten Probleme gibt kannst du sie gezielt mit den spezielleren Media Queries beseitigen, sofern das mit den bestehenden nicht möglich sein sollte.

Abgesehen vom falschen Ansatz "einzelner Geräte" – bestimmte Gruppen von Auflösungen ist da als Ansatz besser –, können da, je nach gewünschtem Ergebnis, mehrere Queries notwendig werden. Das können, je nach zu änderndem Bereich, auch verschiedene Queries sein. Es gibt ja nicht nur Smartphones, Tablets und Desktops, sondern alle diese auch in verschiedenen Auflösungen.

So kann es praktisch sein, der Navigation mit z.B. drei oder gar vier Stufen beizukommen. Dem Hauptinhalt mögen hingegen zwei Layouts reichen, deren Umschaltung eventuell nicht mal an einen der Breakpoints der Navigation gebunden sind.

Tschö, Auge

[molily]

Hallo,

Responsive Design heißt nicht, ein festes Set an Geräten und Viewportgrößen zu wählen und diese einzeln mit Media Queries anzusteuern. Es bedeutet, ein anpassungsfähiges Design zu bauen, welches unter den meisten Umständen zu einer guten User Experience führt, die gewünschten Inhalte vermittelt und die gewünschten Funktionen anbietet.

Da es sehr viele verschiedene Geräte gibt und diese zudem flexibel sind, wie du bereits erkannt hast, ergibt es wenig Sinn, speziell ein Design z.B. »für iPhone 5 im Portrait-Modus« zu entwerfen. Wichtig ist, dass deine Website in einem (virtuellen) Viewport von 320px Breite gut aussieht, aber auch in einem 1600px-Viewport. Alles dazwischen kommt vor und bleibt dir überlassen.

Gehe von deinen Inhalten aus und denke darüber nach, wie du sie unter verschiedenen Bedingungen stimmig präsentieren kannst. Ob das Layout anpassbar sein kann und wo ggf. Breakpoints nötig sind, um z.B. Mehrspaltigkeit herzustellen bzw. zu linearisieren.

Media-Queries sind *eine* mögliche Technik, um das zu erreichen. High-DPI-Displays (»Retina«) unterstützt man am besten auch indirekt, indem man möglichst skalierbare Inhalte bereitstellt. Das heißt soviel wie möglich mit CSS-Boxen, Typografie, ggf. Icon-Fonts und skalierbaren Grafiken arbeiten. Für wenige verbleibende Pixelgrafiken können Media-Queries bzw. Responsive Grafiken eingesetzt werden.

Layout-Breakpoints mit Media-Queries sollten nicht zwischen zwei oder drei festen Layouts hin- und herschalten, sondern zwischen zwei, drei oder mehr flexiblen Layouts. Interessant ist, wie sich das Layout zwischen den Breakpoints verhält. Damit sind auch die Portrait- und Landscape-Modi abgedeckt.

Grüße
Mathias

[T-Rex]

...aber auch in einem 1600px-Viewport. Alles dazwischen kommt vor und bleibt dir überlassen.

Kleine Frage. Lese ich aus deinem Post richtig heraus das 1600px die maximalste Breite für dich ist? Ich kann mir einfach kein gutes Design für eine 3000px breiten Viewpoint vorstellen.

Gruß
Weihnachtsgeist der fragenden Weihnacht
T-Rex