Webseiten sollten mobile-tauglich sein. Responsive Webdesign ist nicht nur ein Trend. Inzwischen gehört das Webdesign für mobile Endgeräte zum Standard beim Umsetzen von Webprojekten. Kein Wunder, schließlich stieg die Zahl der Smartphone und Tablet-Nutzer in Deutschland inzwischen auf über 30 Millionen an. Doch was tun mit der "alten" Website? Spendieren Sie Ihren Internetseiten doch einfach ein neuses Kleid. Dank CSS3 und Media Queries ist auch Ihre Website bald "mobile-tauglich".

CSS 2 erweitert

Bei Media Queries handelt es sich um eine Technik, welche mit CSS3 eingeführt wurde und quasi das Prinzip des Medientyps in CSS2 erweitert hat. Nun wird jedoch nicht mehr starr definiert, welches Medium das Zielmedium ist, wie z.B. unser Drucker,

<link rel="stylesheet" href="druck-vorlage.css" media="print">

sondern wir können nun mit den erweiterten Media Queries die Eigenschaften des gerade benutzen Gerätes direkt abfragen und sofort darauf reagieren.

Abfragen können wir:
  • die Breite und Höhe des Browserfensters
  • die Breite und Höhe des Gerätes
  • die Bildschirmauflösung und sogar
  • die Ausrichtung des Gerätes, also Quer- oder Hochformat

 

Responsive Webdesign
Bild oben: Die verschiedenen Inhaltsbereiche ändern sich je nach Ausgabegerät und Ausrichtung.

Media Queries – Ein Beispiel

Im folgenden Beispiel wurden Elemente mit CSS-Regeln versehen. Diese Regeln gelten für das gesamte Dokument. Eine Medienabfrage kann dann mit nachfolgenden Angaben den vordefinierten Wert überschreiben:

@media only screen and (min-width: 768px) and (max-width: 959px) 
{
#wrapper .container {
max-width: 768px;} }

Durch das Verwenden der nachfolgenden Bedingung wird das kleine Layout dann eingebunden wenn der Ausgabebereich mindestens 480 Pixel und höchstens 767 Pixel breit ist. In diesem Fall ändern sich Eigenschaften wie z.B. die Spaltenbreite, die vorher in der allgemeinen CSS Datei mit einem größeren Wert definiert war. Diese kann nun notfalls noch durch zusätzliche Eigenschaften erweitert werden.

@media only screen and (min-width: 480px) and (max-width: 767px) 
{
/* Kleines Layout */
#wrapper .container {
max-width: 480px;} /* Weitere Angaben */ }

Eigenschaften können also z.B. die Breite der Navigation oder auch die Art der Navigation sein. Wenn Sie Ihr Browserfenster hier auf dieser Webseite verkleinern, sehen Sie wie die Navigation zunächst mit meinem Logo zusammenrückt, sich dann in eine Navigationsliste ändert und schließlich, bei weiterem verkleinern, diese unter das Logo springt. Analog ändert sich natürlich auch der gesamte Textfluss, Spaltenbreiten und Bildgrößen dieser Seite.

Ein Beispiel für eine responsive Website, die ich erstellt habe ist bestattungen-oberguenzburg.de.

Habe ich Ihr Interesse geweckt? Schreiben Sie mir eine Mail – oder noch besser: Rufen Sie mich einfach unter 0 83 72 - 97 23 24 an und wir sprechen über eine Lösung.

Weitere Beispiele finden Sie übrigens auf Media Queries. (http://mediaqueri.es/)