Media Queries – Welche Ausgabegrößen müssen beachtet werden

Setzt man ein Responsive Webdesign mittels Media Queries für verschiedene Endgeräte um, muss man sich irgendwann auf eine bestimmte Anzahl von Ausgabegrößen festlegen. In den meisten Fällen sind es 3-6 Stufen. Hier möchte ich zeigen, welche Layouts nötig sind und welche evtl. ergänzt werden können.

Planung

Einige Punkte sollten im Voraus überdacht und auch in den jeweiligen Layouts mittels Media Queries umgesetzt werden:

  • Es gibt “Portrait” oder “Landscape” bzw. Hoch- und Querformat (Aufteilung des Inhaltes untereinander/nebeneinander)
  • Es gibt relativ kleine Displays (Schriftart sowie Aufteilung des Inhaltes beachten)
  • Steuerung per Touch muss möglich sein (Buttons und Links müssen groß genug sein)
  • Alle Inhalte sollten auf jedem Endgerät verfügbar sein (nichts sollte ausgeblendet werden)

Ausgabegrößen /Media Queries

Folgende Ausgabegrößen sind ergänzend zur normalen Desktop-Ansicht grundsätzlich notwendig.

Tablets Landscape (z.B. iPad im Querformat)

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and(orientation:landscape)
{
    CSS-CODE
}

Oftmal unterscheiden sich hier Änderungen gegenüber der normalen Destop-Ansicht lediglich bei der Zentrierung und den Abständen.

Tablets Portrait (z.B. iPad im Hochformat)

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and(orientation:portrait)
{
    CSS-CODE
}

Hier kann man bereits einige Optimierungen hinsichtlich des Hochformates umsetzen.

Smartphone allgemein

@media only screen and (min-device-width:320px) and (max-device-width:480px)
{
 CSS-CODE
}

Ich empfehle das Format (Portrait oder Landscape) bei Smartphones nicht zu beachten und ein einheitliches einspaltiges Layout für beide Varianten zu verwenden. Der Grund ist, dass ein Smartphone-Display ohnehin bereits sehr klein ist und sich hier ein mehrspaltiges Layout meist nicht anbietet.

Weitere Layouts

Bei Smartphones kann man die Formate noch berücksichtigen und evtl. im Querformat ein mehrspaltiges Layout umsetzen. Jedoch sollte beachtet werden, dass dies zwar bei größeren Smartphones mit zum Beispiel 5 Zoll Display Sinn macht, bei kleinere Smartphones jedoch keine Vorteile bringt.

Beispiele

Auf mediaqueri.es gibt es zahlreiche tolle Beispiele für Responsive Webdesign mittels Media Queries.

Über Peter

Ich bin seit 2008 selbständiger Web-Entwickler und Inhaber von Design-Insel.de. Ich versorge meine Kunden mit anspruchsvollen und erfolgsorientierten Weblösungen. Dazu zählen mittelständische aber auch größere Unternehmen wie T-Systems und Zalando.

Hinterlasse eine Antwort