Responsive Web Design

Anfang des Jahres bekam ich eine Nachricht von Google, dass meine Web Seite Probleme mit der mobilen Nutzerfreundlichkeit aufweist. Dies hat mich nicht sonderlich überrascht, da ich die Seite gar nicht für die Smartphone-Nutzung optimiert hatte. Da ich die Problematik aber sehr spannend finde und die mobile Nutzung von Web-Seiten auch beruflich immer mehr in den Vordergrund rückt, habe ich die Mail zum Anlass genommen, mich näher mit der Thematik zu befassen.

Also habe ich mir das Buch "The responsive web" meines Lieblingsverlags Manning bestellt (The responsive web) und mir das erste Kapitel durchgelesen.

Kurze Zusammenfassung:

Man sollte seine Web-Seite zunächst für die mobile Nutzung optimieren (leider zu spät für meine Seite) und dann Schritt für Schritt für größere Screens optimieren. Da meine Seite nun einmal schon da war, habe ich angefangen, sie für kleinere Auflösungen anzupassen. Das zentrale Element für das Design auf Basis von CSS sind die sogenannten Media queries und Breakpoints. Ich habe mich dazu entschlossen, die Seite sowohl für Screens ab 1200px zu optimieren, als auch für alles darunter bis zu einer minimalen Größe von 200px. Die zentrale Anweisung im CSS sieht so aus:

@media only screen and (min-width: 1200px) {
     div#Mainpage {
         width: 1024px;
     }
}

Dies bedeutet, dass das div-Element mit der ID "Mainpage" eine breite von 1024px haben soll; aber nur dann, wenn der Screen 1200px breit ist. (Bei den 1200px handelt es sich um einen sogenannten Breakpoint) Für alle Bildschirme unter 1200px soll die Web-Seite die komplette Bildschirmbreite einnehmen:

div#Mainpage {
    width: 100%;
}

Auf diese Weise nimmt die Seite auf kleineren Bildschirmen die größtmögliche Bildschirmfläche ein, während sie auf großen Wide-Screens zentriert auf 1024px begrenzt wird. Die Media queries sind sehr mächtig, denn nun ist es möglich, alle möglichen Designs auf die entsprechenden Bildschirmgrößen hin zu optimieren. So ist es z.B. auf einem Smartphone sinnvoll, die Navigation mit großen Links zu präsentieren, die nicht zu nahe zusammenstehen. Auch horizontales Scrollen sollte möglichst vermieden werden.

In nächster Zeit gibt es noch einiges zu tun, bis sich meine Web-Seite vollständig "responsive" verhält. Leider ist es nämlich so, dass die CSS Optimierungen viel Zeit kosten und ein perfektes Ergebnis extrem aufwändig ist. Daher ist es durchaus eine Überlegung wert, Content-Management Systeme wie Joomla einzusetzen, die diesen Mechanismus über Plugins bereits mitbringen - dies kann eine Menge Arbeit ersparen.

Abschließend möchte ich noch auf die Google Webmaster Tools hinweisen. Sie geben viele wertvolle Tipps und analysieren die Web-Seite auf Knopfdruck.
Im Hinblick auf die mobile Optimierung der Seite gibt es unter folgendem Link konkrete Hinweise und Lösungsvorschläge:
Mobile Usability 

Wer sich stärker auf die Performance der eigenen Web-Seite konzentrieren möchte, ist hier gut aufgehoben:
Pagespeed insight 

Die Tipps sind umfassend und wertvoll, sodass man sich eine teure, intellektuelle Analyse der eigenen Website sparen kann und sich sofort auf die Beseitigung der Problemfelder konzentrieren kann. Google vergibt einen Score für die Seite, bei 100 Punkten ist die Seite optimal implementiert.

Zulange sollte man die Thematik "Responsive Design" auf die lange Bank schieben, denn Google könnte nicht optimierte Seiten abstrafen. In der Hinweismail von Google klingt das so: "Diese Seiten werden von der Google-Suche als nicht für Mobilgeräte optimiert eingestuft, und werden entsprechend in den Suchergebnissen für Smartphone-Nutzer dargestellt."