Das Web ist längst mobil und möchte auf allen Ausgabemedien Gute-Figur machen

von Hakan Havutcuoglu

Viele Webseiten werden noch über einen Computer besucht aber die Benutzung von Smartphones, Tablets und mobile Endgeräte nehmen tag zu tag mehr zu. Jeder möchte seine Website auf solchen Geräten möglichts benutzerfreundlicher darstellen. Desktops oder Laptops haben eine Auflösung über 1200px, Tablets zum Teil 900px und Smartphones 320px. Wie soll es den gehen? Mit CSS3 Media Queries ist es eigentlich handumdrehen getan.

Hier möchte ich euch die Media Queries anhand ein Beispiel erklären, wie man schnell ein Website für mobile Geräte und PC's optimieren kann.

Hier geht es zu Demo-Seite

Von Media Types zu Media Queries

Wenn Sie jemals ein separates Print Stylesheet erstellt haben, werden Sie mit dem Konzept vertraut sein. Wie ein Stylesheet unter gegebenen Bedingungen ins Spiel kommt, wenn die Seite gedruckt wird. Diese Aufgabe wird in CSS 2 durch »media types« geregelt.

»media types« ermöglichen es Ihnen, die Ausgabe von Stylesheets einem bestimmten Medientyp zu zuordnen.

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.

Wenn der Anwender einen Browser verwendet, der »media queries« unterstützt, können wir den CSS-Code ganz gezielt für bestimmte Situationen schreiben. So können Sie abfragen, ob der Anwender ein kleines Gerät wie ein Smartphone verwendet, wenn "ja" dann ein passendes Layout liefern.

Das Web ist längst mobil und möchte mit Media Queries auf allen Ausgabemedien Gute-Figur machen

Media Queries bieten uns hier eine Erleichterung der Kontrolle über die Desktop-Browsern. Wenn Ihr die Demo-Seite geöffnet habt, könnt Ihr dann mit der Größe des Browserfensters spielen und Ihr werdet sehen, wie die Media Queries sich auf die Größe des Fensters auswirken.

Wenn in der CSS-Datei keine angaben mit »device-with« oder »device-height« gemacht wurde, dann könnt Ihr die Änderungen, die durch Media Queries entstehen, in Desktop-Browsern durch varieren der Fenstergröße beobachten.

Was kann man mit Media Queries abfragen?

Mit Media Queries lassen sich erstaunlich viele Eigenschaften abfragen. Damit die späteren Beispiele leichter verständlich sind möchte ich hier einmal einige Optionen auflisten. Diese fünf Eigenschaften sind die wichtigsten wenn es um das Ansprechen mobiler Endgeräte geht.

  • width

Viewport-Breite (z.B.: Der zur Verfügung stehende Platz innerhalb des Browserfensters)
Beispiel: @media handheld and (min-width: 320px) { CSS-Style }

  • height

Viewport-Höhe (z.B.: Der zur Verfügung stehende Platz innerhalb des Browserfensters)
Beispiel: @media screen and (max-height: 480px) { CSS-Style }

  • device-width

Breite des Gerätes (Smartphone-Bildschirm, Monitorgröße etc. )
Beispiel: @media screen and (device-width: 600px) { CSS-Style }

  • device-height

Höhe des Gerätes (Smartphone-Bildschirm, Monitorgröße etc.)
Beispiel: @media screen and (device-height: 900px) { CSS-Style }

  • orientation

Beschreibt ob ein Gerät im Querformat (landscape) oder im Hochformat gehalten wird (portrait).
Beispiel: media all and (orientation:portrait) { CSS-Style }

Wollt Ihr es genau wissen? Dann schaut auch hier in W3C Website nach.

HTML-Gerüst

Der HTML-Aufbau des Beispiels ist denkbar einfach. Innerhalb eines umschließenden <div> habe ich den content und die boxen eingebunden.

Bevor Ihr natürlich mit Media Queries beginnt, solltet Ihr euch Gedanken über die HTML-Struktur machen. Somit spart Ihr einiges an Zeit und Stress beim umsetzen.

In diesem Beispiel ist alles einfacher gebaut. Beim aufwändigen Projekten wird es noch komplizierte und hier hilft uns nur eine übersichtliche HTML-Struktur. Hier in unserem Beispiel wird natürlich in einem externen CSS-Datei gearbeitet.

Ganz unten seht Ihr noch einen Div mit class="clear". Dieser dient dazu die CSS-Floats an den Boxen wieder aufzuheben.

<html>
<head>
<title>Media Query Demos</title>
<meta name="viewport" content="width=device-width">
<type="text/css" href="style.css"  />
</head>

<body>
   <div class="wrapper">
      <div id="content">
	      <div><h1>CSS3 Media Query</h1></div>
          <div class="box one">Dieser Box wird Grün, wenn sichtbare Bereich größer als 1024px ist (Desktop)</div>
          <div class="box two">Dieser Box wird Orange, wenn sichtbare Bereich zwischen 00px und 1024px liegt (Tablets)</div>
          <div class="box three">Dieser Box wird Rot, wenn sichtbare Bereich zwischen 320px and 600px liegt (SmartPhones)</div>
          <p class="viewing-area clr">Dein aktuell sichtbare Bereich im Display ist:
          <span class="gt1024">größer als 1024px für Desktop</span>
          <span class="bt600-1024">zwischen 600px - 1024px für Tablets</span>
          <span class="bt320-600">zwischen 320px - 600px für Smartphones</span></p>
      
      </div><!-- content -->
      <div class="clr"></div>
    </div><!-- wrapper -->
</body>
</html>

CSS-Code für Desktops und Laptops

Als erstens erstellen wir den CSS-Code für Desktop-Anzeige. In unserem <head> bereich eingebundene CSS-Datei schreiben wir die Grundeinstellungen für die Seiten elemente.

Auffällig ist vielleicht, dass ich dem .wrapper eine feste Breite zugewiesen habe. Innerhalb des Wrappers habe ich dann alle Elemente mit %-Breiten definiert. Diese Technik hat für mich den Vorteil, dass ich in der Desktop-Version auch mit festen Werten arbeiten kann. In den späteren mobilen Versionen ändere ich dann die Breite des Wrappers und passe das Verhältnis der Inhalte aneinander an.

Die Angabe von Prozentwerten ist wichtig um nicht nur iPhones und iPads anzusprechen sondern auch andere Smartphones und Tablets die mit sehr ähnlichen Abmessungen arbeiten. Die Angabe fixer Pixelwerte kann leicht zu Fehldarstellungen auf diversen Geräten führen und wir können ja nicht alles testen und anpassen.

Für den Desktop habe ich die (min-width:1024px) angegeben. Damit erreiche ich, wenn Fensterbreite mindestens 1024px ist, dann sollen dieser Eigenschaften wiedergegeben werden.

Jetzt kann ich die Eigenschaften von den einzelnen Tags beliebig gestalten. Hintergrundfarbe, Größe, Schriftart etc. Ich kann auch bestimmte elemente aus- und einblenden. Bei der Desktop-Anzeige wird zum Beispiel nur die Klasse span.bt600-1024 eingeblendet und alle andere Spans bleiben durch .viewing-area span ausgeblendet.

Demo-Seite auf Desktop-Monitor dargestellt
Im Bild ist die Beispielseite auf Desktop-PC-Auflösung abgebildet.
body{
    font-size:24px;
    font-family:'Source Sans Pro', sans-serif;
    font-weight:lighter;
    color:#999;
}
h1{
    font-size:48px;
    font-weight:bold;
    color:#000;
}
a{
    text-decoration:underline;
    color:#000;
}
a:hover{
    text-decoration:none;
    color:#999;
}
.wrapper {
    position:relative;
    margin:auto;
    padding:0;
    max-width:95%;
    width:1200px;
}
#content{
    width:100%;
    float:left;
}
.viewing-area{
    position:relative;
    width:100%;
}
.viewing-area span {
    display: none;
}

.box{
    position:relative;
    margin:2%;
    border: solid 1px #CCC;
    padding: 5px 10px;
}
.clr{
    clear:both;
}

@media screen and (min-width: 1024px) {
.one {
    background:#9C3;
    height:200px;
    width:26%;
    float:left;
    color:#FFF;
    font-weight:bold;
}
.two {
    height:200px;
    width:26%;
    float:left;
}
.three {
    height:200px;
    width:26%;
    float:left;
}
span.gt1024 {
    display: inline-block;
    color:#000;
    font-style:italic;
}
}

CSS-Code für Tablets

Wenn die Desktop-Version der Website steht können wir mit Media-Queries jetzt die Tablet-Version optimieren. Dazu füge ich unterhalb meines bisherigen CSS-Codes den entsprechenden Media Querie ein und überschreibe alle Eigenschaften die ich verändern möchte.
Um die Tablets gezielt ansprechen zu können müsst Ihr natürlich wissen welche Abmessungen die Geräte bzw. die Bildschirme haben. Ich benutze immer (min-width: 600px) and (max-width: 1024px) als Standard. Somit decke ich viele Tablet-Geräte mit ab.

Und hier kann ich jetzt die Werte von den Tags beliebig ändern und anpassen. Wenn Ihr die beiden CSS-Codes zwischen Desktop-Version und Tablet-Version vergleicht, werdet Ihr den Unterschied sehen.

Demo-Seite auf Tablet-PC dargestellt
Im Bild ist die Beispielseite auf Tablet-PC-Auflösung abgebildet.
@media screen and (min-width: 600px) and (max-width: 1024px) {
	
.wrapper {
	margin:auto;
	padding:0;
	width:1024px;
}
.one {
    height:200px;
    width:42%;
    float:left;
}
.two {
    background:#F93;
    height:200px;
    width:42%;
    float:left;
    color:#FFF;
    font-weight:bold;
}
.three {
    height:200px;
    width:42%;
    clear:both;
}
span.bt600-1024 {
    display: inline-block;
    color:#000;
    font-style:italic;
}
}

CSS-Code für Smartphones

Die Smartphones lassen sich nach dem gleichen Prinzip wie die Tablets ansprechen. Auch hier müsst Ihr lediglich die Abmessungen kennen und anschließend den CSS-Code anpassen.

Um die Smartphones gezielt ansprechen zu können müsst Ihr ebenfalls wissen welche Abmessungen die Geräte bzw. die Bildschirme haben. Auch hier benutze ich (min-width: 320px) and (max-width: 600px) als Standard um viele Smartphones gleich mit abdecken zu können.

Was kann man mit Media Queries abfragen?

Demo-Seite auf Smartphone dargestellt
Im Bild ist die Beispielseite auf Smartphone-Auflösung abgebildet.
@media screen and (min-width: 320px) and (max-width: 600px) {
	
.wrapper {
	margin:auto;
	padding:0;
	width:600px;
}
.one {
    height:200px;
    width:90%;
}
.two {
    height:200px;
    width:90%;
}
.three {
    background:#F33;
    height:200px;
    width:90%;
    color:#FFF;
    font-weight:bold;
}
span.bt320-600{
    display:inline-block;
    color:#000;
    font-style:italic;
}
}

Zur Übersicht