Auflösung 1024px - 1920px
Die Webseite füllt auch hier den übrigen Platz neben dem “Content-Bereich” links und rechts automatisch.
Der Kontaktbereich (1.) sowie die Navigationsleiste (2.) werden regulär angezeigt
Auflösung 480px (breite)
Auf den ersten Blick sind die logischen Optimierungen ersichtlich: Das Foto aus dem Kontaktbereich (1.) wurde entfernt um die Ladezeit zu optimieren. Die Telefonnummer ist nicht mit einem deutlichen Button hinterlegt und lasst sich von einem Smartphone durch einen einfachen "Klick" / einer Berührung direkt anrufen.
Die Navigation (2.) ist nun mangels Platz nicht horizontal sondern vertikal angeordnet. Das gleiche gilt für die Angebotskacheln.
An diesem Beispiel wird deutlich, dass eine Webseite bereits mit wenigen logischen Schritten für mobile Geräte optimiert werden kann.
Auflösung: 1280px
Augenscheinlich ist auch hier wieder eine optimierte Fassung zum Einsatz gekommen. Auch hier ist die Sidebar (Abb. 1 Markierung 1) zugunsten des Inhaltes gewichen. Das Inhaltsverzeichnis ist ebenfalls für “Touch” optimiert worden (Markierung 2) sodass es mühelos mit den Fingern bedient werden kann.
Auflösung: 320 x 480 px
Durch das antippen klappt der Ausgewählte Bereich einfach auf.
Auch hier gilt: Die wichtigsten Informationen sind schnell zugänglich (hier in Form der Kurzbeschreibung). Sollte der Benutzer mehr Informationen benötigen kann er diese durch eine "Touch" optimierte Navigation auswählen. Die Anzahl der vorkommenden Grafiken bzw. Elementen ist auf ein absolutes Minimum reduziert.
