media queries in respnsive web design

[Ralph]

Hey.

in Dr. Web habe ich folgendes gelesen:

  
Die Media Queries in CSS3 greifen dieses Konzept auf und bauen es weiter aus. Anstatt nach einem bestimmten Medium zu schauen, können Sie mit media queries die Eigenschaften und Fähigkeiten von Geräten und Ausgabemedien abfragen. Sie können diese Abfragen dazu verwenden, um alles mögliche zu überprüfen, so zum Beispiel:  
  
    Breite und Höhe (des Browser-Fensters)  
    Breite und Höhe des Geräts  
    Position – befindet sich das Mobiltelefon im Querformat oder Hochformat?  
    Bildschirmauflösung  

Breite und Höhe (des Browser-Fensters) und Position kann ich nachvollziehen
Aber wozu kann ich

• Breite und Höhe des Geräts
  und
• Bildschirmauflösung
  verwenden?
  Ralph

[molily]

Hallo!

Breite und Höhe (des Browser-Fensters) und Position kann ich nachvollziehen
Aber wozu kann ich

• Breite und Höhe des Geräts
  und
• Bildschirmauflösung
  verwenden?

Da fällt mir keine sinnvolle Einsatzmöglichkeit ein. Ich habe das noch nie verwendet.

In der Praxis beziehen sich Media Queries fast immer auf die Viewport-Größe.

Mathias

[Gunther]

Hallo!

Breite und Höhe (des Browser-Fensters) und Position kann ich nachvollziehen
Aber wozu kann ich

• Bildschirmauflösung*
  verwenden?

Da fällt mir keine sinnvolle Einsatzmöglichkeit ein.

Für verschiedene Hintergrundgrafiken (sofern es sich um Rastergrafiken handelt) und bei vendor prefixed Werten als Browserweiche.

*bezogen auf 'device-pixel-ratio'

Gruß Gunther

[molily]

• Bildschirmauflösung*
  *bezogen auf 'device-pixel-ratio'

Ja, das ist in der Tat nützlich.

Ich hatte unter Bildschirmauflösung resolution mit dpi-Werten verstanden. Das ist nicht wirklich praktikabel für High-PPI-Geräte.

device-pixel-ratio ist nicht standardisiert, aber (min-/max-)resolution: 2dppx wird es wohl werden (siehe auch). Im Media-Queries-Standard und vielen Tutorials taucht das aber noch nicht auf.

Mathias

[Ralph]

Hi,
die min-/max-device-width in media-queries ist also für die Realisierung von Anwendungen irrelevant?
Gruß
Ralph

[Matthias Apsel]

Om nah hoo pez nyeetz, Ralph!

die min-/max-device-width in media-queries ist also für die Realisierung von Anwendungen irrelevant?

Da ist wohl auch unser Wiki noch fehlerhaft ...

vereinfacht: device-width - Bildschirmbreite, width - viewport-Breite

Du könntest beispielsweise über @media (device-width: 320px) ein IPhone5 im Portrait-Modus* erkennen**, falls dieses ein anderes Layout als ein schmales Browserfenster bekommen soll.

* auf diese media query können auch andere Geräte ansprechen
** Smartphones lassen sich sicherer über device-pixel-ratio erkennen

Matthias

[Ralph]

Hi Matthias,

Du könntest beispielsweise über @media (device-width: 320px) ein IPhone5 im Portrait-Modus* erkennen**, falls dieses ein anderes Layout als ein schmales Browserfenster bekommen soll.

* auf diese media query können auch andere Geräte ansprechen
** Smartphones lassen sich sicherer über device-pixel-ratio erkennen

Muss man sich diese Informationen erst mühevoll erarbeiten oder gibt es nicht ein vernünftiges Dokument mit den media-queries für die gängigsten Geräte?
Wenn man g...t (ich möchte nicht auch noch Werbung machen für den NSA-Jünger), findet man zahlreiche media-queries für einzelne Geräte, die sich aber z.T widersprechen, zum andern ein und dasselbe Gerät auf andere Weise identifiziern.
Grüße
Ralph

[Gunther]

Hi Ralph!

Muss man sich diese Informationen erst mühevoll erarbeiten oder gibt es nicht ein vernünftiges Dokument mit den media-queries für die gängigsten Geräte?

Und da haben wir ihn schon ..., den ersten Verständnisfehler!
Du passt dein Layout_nicht_an bestimmte Geräte an, sondern gemäß deinen Inhalten an die tatsächliche Viewportgröße (meist interessiert nur die Breite).

Und das auch nicht in Pixeln, sondern in relativen Einheiten wie 'em'.

Wenn man g...t (ich möchte nicht auch noch Werbung machen für den NSA-Jünger), findet man zahlreiche media-queries für einzelne Geräte, die sich aber z.T widersprechen, zum andern ein und dasselbe Gerät auf andere Weise identifiziern.

Die kannst du alle getrost vergessen ...!

Gruß Gunther

[Gunnar Bittersmann]

@@Ralph:

nuqneH

Muss man sich diese Informationen erst mühevoll erarbeiten oder gibt es nicht ein vernünftiges Dokument mit den media-queries für die gängigsten Geräte?

Nein.

Ein Dokument mit Media-Queries für Geräte ist nicht vernünftig.

Qapla'

[Ralph]

Ein Dokument mit Media-Queries für Geräte ist nicht vernünftig.

Sind dann die Tausende, die im Internet media-queries verwenden der Art
/* Iphone */
@media.....
/* Ipad xy horizontal...*/
....

alle unvernünftig?

[Gunnar Bittersmann]

@@Ralph:

nuqneH

Sind dann die Tausende, die im Internet media-queries verwenden der Art
/* Iphone */
@media.....
/* Ipad xy horizontal...*/
....

alle unvernünftig?

Ja.

Schon bei iPhones gibt es verschiedene Größen.

Qapla'

[Ralph]

@Gunnar:

alle unvernünftig?

Ja.

Das erinnert mich an den Witz über die Hunderte von Falschfahrern auf der Autobahn und den einen (SELFHTML), der richtig fährt.
Aber ich neige dazu, dem SELFHTML zu glauben;-)
Gruß
Ralph

[Matthias Apsel]

Om nah hoo pez nyeetz, Ralph!

Sind dann die Tausende, die im Internet media-queries verwenden der Art
/* Iphone */
@media.....
/* Ipad xy horizontal...*/
....

alle unvernünftig?

Ja, siehe die Antworten von Gunther, Gunnar und Mathias.

Matthias

[molily]

Hallo,

Sind dann die Tausende, die im Internet media-queries verwenden der Art
/* Iphone */
@media.....
/* Ipad xy horizontal...*/
....

alle unvernünftig?

Sie vermitteln ein falsches Bild, wie Responsive Design funktioniert.

Ein responsives Layout versucht die Viewportgröße auszunutzen und eine passende Präsentation zu bieten. Das Layout und die Breakpoints für die Media Queries wählt man nach Inhalten. Das kann beispielsweise sein:

< 40em: Einspaltig, volle Breite

= 40em: Zweispaltig, volle Breite
= 60em: Dreispaltig, Container mit max-width: 80em

Im Beispiel wird gar nicht mit Pixeln gearbeitet, sondern mit em-Werten. Das ist ein typographisches Maß, denn entscheidend für die Lesbarkeit des Textes die Spaltenbreite im Verhältnis zur Schriftgröße. In einer Spalte sollten nie zu viele oder zu wenig Zeichen stehen.

Die Viewport-Breite von irgendwelchen Geräten ist erst einmal egal. Es geht darum, die jeweiligen Inhalte gut darzustellen. Interessant ist, was zwischen den Breakpoints passiert. Zum Beispiel durch Prozentbreiten kann sich ein Layout an sämtliche Viewport-Breiten anpassen. Die Media-Queries ändern nur den groben Rahmen.

Wenn du nach Media Queries für irgendwelche Geräte suchst, so zäumst du das Pferd von hinten auf. Media Queries sind nur ein Werkzeug für Responsive Design. Der Idee nach geht es nicht um ein Layout für iPad 1-2 und iPad Mini, ein Layout für iPad 3-4, ein Layout für iPhone vor 4, ein Layout für iPhone 4, ein Layout für iPhone 5… und das ganze für sämtliche Ausrichtungen und tausende andere Geräte. Das wäre Quatsch, da Geräte kommen und gehen. Responsive Design bedeutet, eine anpassungsfähige Seite zu bauen, nicht sie auf einzelne aktuelle Geräte zu »optimieren«.

Mathias

[molily]

Hallo,

gibt es nicht ein vernünftiges Dokument mit den media-queries für die gängigsten Geräte?

Solche Listen gibt es hundertfach.

Allerdings ist der Sinn von Media Queries nicht, irgendwelche speziellen Geräte anzusprechen. Dafür gibt es zu viele unterschiedliche und in der Zukunft werden sie sich weiter diversifizieren. Setze Breakpoints dort, wo es für das Layout und die jeweiligen Inhalte am sinnvollsten ist, und teste auf verschiedenen Geräten und Viewport-Breiten.

Grüße,
Mathias

[Ralph]

Hallo,

.... und teste auf verschiedenen Geräten und Viewport-Breiten.

Ich besitze gerade mal ein 8 Jahre altes Handy für Notfälle.
Ich will mir deshalb nicht verschiedene Geräte anschaffen - und bei der zitierten Vielfalt wären es am Ende ja auch noch die falschen.
Gruß
Ralph

[Matthias Apsel]

Om nah hoo pez nyeetz, Ralph!

Ich will mir deshalb nicht verschiedene Geräte anschaffen - und bei der zitierten Vielfalt wären es am Ende ja auch noch die falschen.

Dafür gibt es Emulatoren. Und wenn du dich auf die Breite des Viewscreens konzentrierst, kannst du auch mit schmalen Browserfenstern testen.

Matthias

[Gunnar Bittersmann]

@@Ralph:

nuqneH

Ich will mir deshalb nicht verschiedene Geräte anschaffen

Hast du kein Device-Lab in deiner Nähe?

Eine Liste findest du auf hamburg.opendevicelab.de ganz unten.

Qapla'

[Ralph]

@Gunnar:

Hast du kein Device-Lab in deiner Nähe?

Leider nicht.
Wenn es aber genügt über die an anderer Stelle erwähnten Emulatoren zu testen, sind diese Labs doch überflüssig.
Gruß
Ralph

[molily]

Hallo,

Wenn es aber genügt über die an anderer Stelle erwähnten Emulatoren zu testen, sind diese Labs doch überflüssig.

Ein Emulator kann vielleicht den Browser und die Viewport-Breite simulieren, aber nicht die Bedienung eines Smartphones (Display, Touch oder Buttons, Performance, Netzwerkperformance…).

Den Viewport vergrößern oder verkleinern kannst du auch bei einem Desktop-Browser, aber Testing auf Mobilgeräten erfordert die jweiligen Mobilgeräte.

Mathias

[Gunther]

Hi!

Wenn es aber genügt über die an anderer Stelle erwähnten Emulatoren zu testen, sind diese Labs doch überflüssig.

Nein, sind sie nicht! ;-)
Denn es gibt AFAIK keinen einzigen Emulator, der sich zu 100% wie das eigentliche Gerät verhält.

Es kommt halt immer darauf an, welche "speziellen" Eigenschaften von deiner Website verwendet werden. Für die meisten reicht eben ein entsprechender Emulator, aber halt nicht für alle.
Und das "Problem" dabei ist, dass du das ohne einen Test auf dem tatsächlichen Gerät nicht feststellst.

Gruß Gunther

[Gunnar Bittersmann]

@@Ralph:

nuqneH

Wenn es aber genügt über die an anderer Stelle erwähnten Emulatoren zu testen, sind diese Labs doch überflüssig.

Nein. Es kann immer sein, dass sich ein Emulator anders verhält als das wirkliche Gerät. Er kann Fehler haben, die das wirkliche Gerät nicht hat. Oder Fehler nicht haben, die das wirkliche Gerät hat.

Außerdem kann man nicht das tatsächliche Handling mit dem wirklichen Gerät emulieren. (Größe, Augenabstand, Reflexion, …)

Nichts ersetzt das Testen mit wirklichen Geräten.

Qapla'

[Ralph]

@Gunnar

Außerdem kann man nicht das tatsächliche Handling mit dem wirklichen Gerät emulieren. (Größe, Augenabstand, Reflexion, …)

Da steht mir ja etwas bevor, das nächste Device-Lab ist 400km von mir entfernt!
Dank an alle!

[Matthias Apsel]

Om nah hoo pez nyeetz, Ralph!

Da steht mir ja etwas bevor, das nächste Device-Lab ist 400km von mir entfernt!
Dank an alle!

Falls du beruflich Seiten erstellen sollst, solltest du deinen Arbeitgeber an diesen Überlegungen teilhaben lassen.

Matthias

[Siri]

Hallo,

** Smartphones lassen sich sicherer über device-pixel-ratio erkennen

Wie meinst du das? Es gibt doch auch Bildschirme mit einer device-pixel-ratio > 1.

Viele Grüße
Siri

[Matthias Apsel]

Om nah hoo pez nyeetz, Siri!

Wie meinst du das? Es gibt doch auch Bildschirme mit einer device-pixel-ratio > 1.

und Fernseher. Aber an die habe ich beim Schreiben nicht gedacht.

Matthias