Responsive Webdesign Tutorial - Media Queries - Teil 1

0 | 2 Kommentare | 162739 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Responsive Webdesign Tutorial - Media Queries - Teil 1" mit Ihrem Wissen!

Anzeige Hier werben

Was ist Responsive Webdesign

Responsive Webdesign bedeutet die Anpassung des Inhalts und des Layouts einer Website an das Ausgabegerät. Dies ermöglicht eine Webseite auf einem iPad oder iPhone anders auszugeben als auf einem Desktop-PC. Im folgenden Tutorial werde ich auf die Responsive Webdesign Grundlagen eingehen, einen Überblick über die verschiedenen Techniken geben und die Möglichkeiten an Hand eines Praxisbeispiels erläutern.

Umgesetzt wird dies mit den sogenannten Media Queries, die es seit CSS3 gibt. Mit Media Queries macht man die Darstellung der Layoutelemente einer Website von dem Gerät abhängig, auf dem die Website aufgerufen wird. So erstellt der Webdesigner für den jeweiligen Typ Ausgabegerät z.B. dann eine eigene CSS Datei.

Neue Anforderungen an Webdesign und CSS 3

Während man früher sein Layout für eine gewisse Standardauflösung optimiert hat, wie z.B. 800x600px oder 1024x748px müssen Layouts heute auch auf Mobilien Endgeräten funktionieren und das nicht nur horizontal, sondern auch vertikal!

Dies wird in Zukunft gravierend an Bedeutung gewinnen, denn im vierten Quartal 2010 wanderten 100 Millionen Smartphones über die Ladentheken, aber nur noch 92 Millionen Personal Computer.

(Quelle: faz.net)

Prozentangaben und "Liquid Designs"

Eine Zwischenlösung waren die so genannten "Liquid Designs". Hier wird mit
Prozentangaben gearbeitet, anstatt mit festen Pixeln. Dies funktioniert immer bis zu
einem gewissen Grad solange das Layout nicht zu groß/klein wird. Irgendwann sieht es
aber nur noch schlecht aus.

 
css
1
2
3
4
5
6
7
8
9
/* Fixe Breite */
body {
  width: 1000px;
}
 
/* Dynamisch */
body {
  width: 90%;
}

Media Queries - Ein Praxisbeispiel hervorragend umgesetzt

Um sich jetzt noch einen Eindruck machen will wie eine vorbildliche Umsetzung des Konzeptes der Media Queries aussieht wird z.B. hier unter http://www.fivesimplesteps.com/ fündig.

Natürlich hat nicht jeder Leser sofort ein iPhone und iPad zur Hand um die Websites zu testen aber es gibt ja glücklicherweise Emulatoren im Netz:

iPhone Vorschau:

Bild zu Responsive Webdesign Tutorial - Media Queries - Teil 1

iPad Vorschau:

Bild zu Responsive Webdesign Tutorial - Media Queries - Teil 1

Allgemeiner Quellcode: Media Querys anlegen

Voraussetzung für Media Queries ist natürlich eine klare Trennung von Gestaltung und Layout!

Es gibt verschiedene Wege die zusätzlichen Eigenschaften einzubinden: So ist es z.B. möglich das link Element zu verwenden, wobei das media Attribut dazu dient, das jeweilige Ausgabemedium zu bestimmen.

 
HTML
1
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

Es ist aber auch möglich erweiterte Angaben zu machen:

 
HTML
1
<link rel="stylesheet" type="text/css" href="styles.css" media="screen and (min-width: 750px)" />

Es ist natürlich an dieser Stelle sinnvoll für verschiedene Ausgabemedien jeweils eine separate Stylesheet Datei anzulegen. Vergessen Sie nicht, dass immer sämtliche Daten geladen werden, auch die Inhalte der Desktopversion. So kann sich die Datenübertragung insbesondere im (noch) langsamen Handynetz sehr in die Länge ziehen.

Mit einer Eigenschaft wie device-width ist es auch möglich gezielt die Breite eines mobilen Geräts wie zum Beispiel des iPhones 3G mit der Auflösung 480x320 Pixel anzusprechen.

 
HTML
1
<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-device-width:480px)" />

Portrait oder Landscape?

Da es auf dem Smartphone mit Portrait und Landscape zwei unterschiedliche Ansichtsformate zur Darstellung des Inhaltes gibt, können Sie mit orientation die Merkmale height und width miteinander vergleichen. Wenn height also größer als width ist, besitzt die Darstellung den Wert portrait, im anderen Fall den Wert landscape.

 
HTML
1
2
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />

Media Query Abfragen für verschiedene Ausgabegrößen in der Übersicht

Desktop & Laptops

 
css
1
@media only screen and (min-width: 1224px){... }

Große Bildschirme

 
css
1
@media only screen and (min-width:1824px){... }

iPads(Portrait)

 
css
1
2
3
4
@media only screen and
(min-device-width:768px) and
(max-device-width:1024px) and
(orientation:portrait){... }

iPads (Landscape)

 
css
1
2
3
4
@media only screen and
(min-device-width:768px) and
(max-device-width:1024px) and
(orientation: landscape){... }

Smartphones (Landscape & Portrait)

 
css
1
2
3
@media only screen and
(min-device-width:320px) and
(max-device-width:480px){... }

Smartphones (Landscape)

 
css
1
2
3
@media only screen and
(min-device-width:321px)
{... }

Smartphones (Portrait)

 
css
1
2
@media only screen and
(min-width:320px){... }

iPhone 4

 
css
1
2
3
4
@media only screen and
(-webkit-min-device-pixel-ratio: 1.5), only screen and
(min-device-pixel-ration: 1.5)
{... }

Media Query Tutorial - Wie arbeitet man damit sinnvoll?

Man gestaltet zuerst eine allgemeine Desktop Version und definiert dann mit Hilfe von Media Queries mehrere Unterformate für kleine Bildschirme wie die optimierte Version für Smartphones und eben dann auch für den Tablet PC. Diese Vorgehensweise möchte ich dann in Teil 2 meines Artikels an einem praxisorientierten Tutorial erläutern, wo wir uns so eine Website mit Media Queries erstellen werden.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 5 Personen an der Seite "Responsive Webdesign Tutorial - Media Queries - Teil 1" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Responsive Webdesign Tutorial - Media Queries - Teil 1" hier bearbeiten.

Mitarbeiter

Kommentare: Responsive Webdesign Tutorial - Media Queries - Teil 1

Neuen Kommentar schreiben
Responsive Webdesign
Beantworten

Eine Technik die sich seit einiger Zeit etabliert hat.

Was funktioniert denn nicht mit den CSS-Dateien, Reiner?

Two4Media Web+Print, Webdesign Koblenz

two4media am 19.11.2014 um 18:20
responsive Websites
Beantworten

Hallo, ich versuche gerade websites als responsive Website zu gestalten, aber irgendwie funktioniert das mit den beiden css Dateien nicht es wird nur eine Erkannt egal von welchem Gerät. Was mache ich falsch? Und ich mache bestimmt da irgendwas falsch ...

Freue mich auf einfache verständliche Rückmeldungen.

Reiner

reinerBausch am 10.02.2014 um 20:21