Includes und media query

[Gunnar Bittersmann]

@@Martin Glaw

Für die mobile Version wollte ich, wegen dem Datenvolumen und den Bandbreiten, möglichst wenige Grafiken verwenden.

Die "Desktop Version" sollte dafür grafisch etwas ansprechender und dem Thema angepasst sein.

Die „mobile Version“ sollte auch ansprechend und dem Thema angepasst sein.

Aber am besten löst du dich ganz schnell von dem Gedanken, dass es so etwas wie eine „mobile Version“ und eine „Desktop-Version“ gibt. Die Gerätelandschaft ist ein Kontinuum: von kleinen Smartphones über welche, die kaum noch in die Tasche passen; Phablets; Tablets; PCs mit Bildschirmen, die weniger Pixel haben als manch Tablet; Fernseher; …

Die Kunst des responsive design liegt nicht darin, zwei Versionen anzubieten; sondern die Seiten so zu bauen, dass sie sich optimal an das jeweilige Gerät anpassen. Wie Jeremy Keith sagt: „dass es nicht ein einziges Nutzerinterface gibt – es kann viele leicht verschiedene Interfaces geben, abhängig von den Eigenschaften und Fähigkeiten des jeweiligen Browsers und Gerätes zum jeweiligen Zeitpunkt.“

Und löse dich von dem Gedanken, dass Viewportgröße zwingend was mit Bandbreite zu tun hätte. Wenn ich mit dem Laptop unterwegs bin (großer Viewport), wird die Verbindung zum Internet über das Smartphone (Mobilfunk) hergestellt. Andererseits bin ich oft mit dem Smartphone in irgendeinem WLAN mit Verbindung zum Internet über DSL.

Und es gibt sicher auch Gegenden, wo das Mobilfunknetz mittlerweile schneller ist als DSL übers Kabel.

Was also tun? Gestalte die Seiten so, dass sie sich anpassen. Bspw. Breite fürs Menü und Mindestbreite für den Hauptinhalt. Wenn beides nebeneinander passt, dann wird’s nebeneinander dargestellt, ansonsten übereinander oder das Menü herausgefahren.

Verwende für dein Menü nicht viele Einzelgrafiken, sondern eine. Entweder als Sprite oder als Imagemap. Dabei kannst du auch dafür sorgen, dass der Hintergrund nicht bei jedem Menüpunkt gleich aussieht.

Wenn du große Bilder hast, liefere sie für verschiedene Viewportgrößen/Auflösungen in verschiedenen Größen aus (responsive images).

So kriegst du deine Seite für alle Geräte ansprechend hin.

LLAP 🖖