Skip to content

Erste Schritte zur responsiven Webseite

u1amo01.de Screen Shot Februar 2012
u1amo01.de, 320x480 Ansicht iPhone
Das Blog ist vorerst (?) mit dem Rundum-Sorglos-Fertigpack 2k11 versorgt. Auf Bernds iPhone sieht das gut aus.

Ehe ich über die Website der gefräßigsten besten Big Band von allen herfalle, übe ich an meiner eigenen Webseite. Mühsam ernährt sich das Eichhörnchen ...

Ach ja, das Heft »Responsive Web Design« von Ethan Marcotte kann ich empfehlen (Dan Cederholm hat das Werk schon vor Monaten gelobt – ja, ich weiß ich bin spät dran. Besser zu spät als nie).

Lesbarkeit geht vor

Screen Shot Füllhalterversion Die Füllhalterversion dieses Blogs wurde so gelobt, dass ich mich fast nicht traue, das nach 3 Monaten zu ändern.

Aber Lesbarkeit geht vor. Jeden Tag sehe ich Dutzende von Leuten im Zug, die mit ihren Smart Phones spielen. Höchste Zeit also, diesem Trend Rechnung zu tragen. Die Zeiten, als man eine Webseite für zwei, drei gerade übliche Bildschirmgrößen bauen konnte, sind vorbei.

Screen Shot 2k11 "out of the box" Das Theme »2k11« von Matthias (soll beim nächsten Serendipity-Release Standard werden enthalten sein) hat mir auf den ersten Blick gefallen. Und es passt sich automagisch an eine Vielzahl von Anzeigegeräten an. Bis ich das selbst so zusammengestrickt bekäme, müsste ich eine Menge lesen und herumprobieren. Und dann wäre es immer noch nicht halb so gut.

screen shot vom neuen Layout Also – tataaa! – hier ist das neue Bloglayout: »2k11« mit einer Handvoll zusätzlicher Zeilen in der user.css. Wie das auf verschiedenen Kleingeräten aussieht, kann man sich über das nützliche Tool von Matt Kersley ansehen.

Lesestoff für Webdesigner

Vor einigen Jahren habe ich unsere Bandwebsite http://www.buenotebigband.de/ komplett überarbeitet. Danach habe ich hauptsächlich an der Verbesserung der Navigation gearbeitet. Seit 2008 wurden nur noch Kleinigkeiten geändert, wie z. B. die letztes Jahr eingebaute Timeline.

Mittlerweile hat sich die Webwelt weitergedreht. Früher war es ausreichend, beim Design an einige wenige Bildschirmgrößen bzw. Auflösungen zu denken. Heutzutage gibt es mehr Ausgabegeräte und Formate, als man sich merken kann: PCs, Notebooks, iPads, Smartphones und so weiter.

Also höchste Zeit, auch als Hobbywebmaster den Hintern hochzukriegen. Und sich mit aktuellen Techniken beschäftigen. Eine gute Übersicht an Lesestoff dazu bietet Matthias unter Responsive Ressourcen 2011.

Wer lieber Papier in die Hand nimmt: da kann ich die kurz und bündig verfassten Hefte von »A Book Apart« empfehlen.

PS: die Blue-note-Seite im Wandel der Zeit kann man sich in der Artikelkomplettansicht anschauen.

"Lesestoff für Webdesigner" vollständig lesen