Theme Update: Blice als "responsive design"

Abgelegt unter:
Kurz-URL: http://mkzä.de/1861
Blice - Responsive Design

Nachdem ich die mobile Variante des Adventskalenders mit Creative-Commons-Songs gebaut hatte, habe ich mir noch etwas mehr Gedanken über ein "mobiles Design" für diese Seite gemacht. Nach ein wenig Bastelei präsentiere ich nun die auf "responsive design" getrimmte Variante von "Blice". Zum Ausprobieren ohne Smartphone oder Tablett kann auch einfach das Browserfenster verkleinert werden.

Der erste Schritt war recht schnell getan. Mittels <meta name="viewport" content="width=device-width, initial-scale=1"> wird dem mobilen Gerät erklärt, dass es nicht zu zoomen hat.

Danach kam ein wenig jquery Mobile ins Spiel. Mit data-role="page", data-role="header", data-role="content" und data-role="footer" war immerhin nach dem Aufrufen der Seite der Inhalts-Teil hübsch zurechtgezoomt. Aber wirklich prickelnd war das Ganze immer noch nicht.

Also habe ich zwei weitere Layouts erstellt, die für Größen kleiner 480 Pixel und für Größen bis 640 Pixel optimiert sind. Diese werden vom Browser dank der CSS3-Media-Queries @media only screen and (max-width: 479px) {...} und @media only screen and (min-width: 480px) and (max-width: 640px) {...} von aktuellen Browsern ausgewertet.

Hier alle drei Größen im Vergleich:

Orginal

480px-640px

Bis 480px

Soweit bin ich erstmal zufrieden. Vielleicht bau ich noch ein Layouts von 640-1000 Pixel Breite. Aber mit dem jquery-Mobile-Ansatz sollte da die Benutzbarkeit auch gewährleistet sein.

Noch keine Bewertungen

Artikel

Projekte

Interviews

Informationen