Responsive Webdesign und Mediaqueries

Responsive Design ist kein Hexenwerk. Vielmehr basiert es auf ganz logischen Elementen. Von älteren Webdesignmodellen unterscheidet es sich vor allem durch die Mediaqueries. Das sind CSS3-Medienabfragen. Sie werden direkt in das CSS3-Dokument intergriert und prüfen jedes Mal, wenn die Seite aufgerufen wird, welches Stylesheet zugeordnet werden soll. Automatisch wird zum Beispiel für Tablets ein anderes Stylesheet gewählt, als für Smartphones oder Laptops.
responsive-webdesign-mediaquery
Je nach Größe des Ausgabegerätes, nach der Ausrichtung (wird ein Smartphone im Hoch- oder Querformat angesehen?), nach der Farbfähigkeit und nach einigen anderen Faktoren wird das stets das Stylesheet für die  perfekt passende Anzeige der Seite zugeordnet. Mediaqueries sind logische Verknüpfungen die bestimmte Werte prüfen bzw. verknüpfen. Ist das Ergebnis true, wird der in {} gesetzte nachfolgende Code verwendet.

Mediaqueries können direkt in der CSS-Datei stehen, wie z.B.

@media all and (max-width: 699px)  {
body { background: #ccc; }
}

Dieser Code bestimmt, dass die Hintergrundfarbe der Webseite #ccc (grau) sein soll, solange die Größe des Fensters maximal 699 Pixel beträgt. Für alle Fenstergrößen ab 700 Pixel kann dann eine andere Hintergrundfarbe definiert werden. So wie in diesem Fall die Hintergrundfarbe für bestimmte Bildschirmgrößen festgelegt wird, können auch alle anderen Layout-Elemente in Abhängigkeit von den Bedingungen des Ausgabegerätes definiert werden.

Mediaqueries können aber auch im <head>-Bereich eingesetzt werden, also im Dokumentenkopf. Im Head-Tag werden die Metainformationen der Webseite definiert, die mit Ausnahme des Seitentitels nicht vom Browser angezeigt werden. Der Head-Bereich im HTML-Gerüst über dem Body-Bereich, der die eigentlichen Inhalte enthält.

Dies würde für unser Beispiel so aussehen:

<style type=”text/css”>
@media all and (max-width: 699px)  {
body { background: #ccc; }
}
</style>

Oder man kann einfach ein anderes Stylesheet laden

<link rel=”stylesheet” type=”text/css” href=”style_schmalerals700px.css” media=”all and (max-width: 699px)” />

Die Mediaqueries können also an unterschiedlichen Stellen platziert werden. Sie sind sozusagen das “Herzstück” des Responsive Webdesign und vereinfachen Vieles. Allerdings haben derzeit leider noch einige Browser Probleme mit der CSS3-Unterstützung. Daher kann es hilfreich sein, die CSS3-Fähigkeiten des eigenen Browsers zu überprüfen, bevor man mit dem Designen einer Webseite beginnt. Eine sehr schöne Übersicht über die Unterstützung der CSS3 Properties der einzelnen Browser findet man hier.

Share

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*


7 − fünf =

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>