Horst seine Freunde

Da ich ja seit kurzer Zeit auch so ein WischWasch-Handy besitze, habe ich nun erst gesehen, wie Horst auf so einem Ding ausschaut. Das geht doch besser, hab ich mir gedacht und mich dran gemacht das Horst-Theme für WischWasch-Handys anzupassen. Könnt ihr auch ohne so ein Teil ausporbieren: einfach mal das Fenster kleiner ziehen (auf 480px oder weniger) und schauen was passiert.

Damit das Ganze überhaupt funktioniert, musste ich folgendes Meta-Tag in in den Header einfügen:

<meta name="viewport" content="width=device-width" />

Dadurch wird den Smartphones mitgeteilt, dass die Seite bitte so breit wie ihr Display dargestellt werden soll und eben nicht das ursprüngliche 900 Pixel breite Layout in verkleinerter Darstellung. Damit aber nun das Layout auch entsprechen umbricht, musste ich am Ende des Stylesheets eine neue Sektion einfügen, die für Displays mit maximal 480 Pixeln Breite entsprechende Vorkehrungen trifft. Das geht mit Hilfe folgender Abfrage:

@media (max-width: 480px) { [... hier dann Mobile-Styles ...] }

Dort habe ich dann alle Elemente die als float: left; oder float: right; definiert wurden auf float: none; gesetzt und die Breite statt auf feste Pixel mit Prozentwerten angegeben. Also z.B. width: 95%.

Dann habe ich enstprechend das Layout des Menus geändert und mir noch einen Kniff überlegt. Auf den Handys erschien mir die Anzeige der Artikel-Excerpts auf den Archivseiten ein wenig zu viel. Also habe ich eine CSS-Klasse definiert, die dafür sorgt, dass auf Handys die Anzeige unterdrückt wird. Wie folgt:

@media (max-width: 480px) {
	.hideonmobile{
		display: none;
	}
}

Und diese Klasse habe ich dann an mehreren Stellen in meinem Horst-Theme untegebracht. Nämlich immer da, wo eine Element auf Mobile’s nicht gezeigt werden soll.

Bei mir klappt das jetzt alles. Würde mich mal über Rückmeldung freuen, ob das auch mit iPhones und anderen WischWasch-Handys funktioniert.

Hier noch ein paar Links:

• Responsive Webdesign
• Ein Blick durch den Viewport
• Und ein Blick ins CSS des TwentyEleven Themes sagt fast alles.