Responsive Webdesign ist keine Hexenkunst – ein ganz kurzer Überblick

Responsive Webdesign bedeutet, eine Internetseite so zu konstruieren, dass sie sich den Bildschirmgrößen verschiedener Ausgabegeräte dynamisch anpassen kann. Das ist mit viel Flexibilität und Media Queries möglich, die mit CSS3 eingeführt wurden. Mit ihnen kann man die Viewportgröße abfragen und mit entsprechenden Styles darauf reagieren. Hier ein schneller Überblick.

Aus jedem Dorf ein Köter – Bildschirmauflösungen und Media Queries

Die Abfrage der Bildschirmgröße geschieht mit Media Queries. Diese werden in das Stylesheet eingebunden und sehen z. B. so aus:

@media screen and (max-width: 800px) {...}

 

Dabei sollte man immer die wichtigsten Bildschirmgrößen abfragen. Diese variieren natürlich stark, da immer wieder neue Ausgabegeräte auf den Markt kommen und alte verschwinden. Eine gute Übersicht bietet eine Grafik von Sender 11. Sie stützt sich zwar auf eine Statistik von verkauften Geräten aus den Jahren 2005 bis 2008, ist aber trotzdem repräsentativ.
Ein guter Artikel, an dem ich mich hier orientiert habe, ist auf Smashing Magazine erschienen.

Übersicht der Bildschirmauflösungen von 2008

Bildschirmauflösungen. Grafik von Sender 11

Ein Tutorial

Ein aktuelles Tutorial zu Responsive Webdesign wurde kürzlich von Nettuts+ veröffentlicht. Es handelt sich hierbei um ein Video (ca. 25 Minuten), das die wichtigsten Praktiken sehr gut veranschaulicht.


Das Video von Nettuts+

 

Und dann noch Fluid Images

Ein weiterer wichtiger Punkt im Responsive Webdesign stellt die Einbindung von Bildern dar. Auch diese sollten natürlich skalierbar sein und sich den Anforderungen anpassen. Eine guter Ansatz zur Skalierbarkeit von <img>-Tags gibt es von Unstoppable Robot Ninja. Eine JavaScript-Lösung wird hier vorgeschlagen, da der Internet Explorer max-width nicht interpretiert.
Es wird derzeit viel diskutiert (z. B. auf YellowLeds Weblog) wie diese Einbindung letztlich stattfinden soll, denn ein Ausgabegerät mit 240 x 320px Bildschirmauflösung sollte ja nicht zwingend ein Bild mit der Größe von z. B. 800 x 600px runterladen. Das kostet unnötig Zeit und Speicherplatz.

Also...

Eine Internetseite skalierbar zu gestalten macht heutzutage Sinn. CSS3 liefert hierfür mit Media Queries das richtige Werkzeug. Es bedeutet auch nicht wesentlich mehr Aufwand sich dem neuen Trend anzuschließen. Der Webdesigner muss natürlich hierfür umdenken und auf statische Layouts mit Pixelgrößen verzichten.
Das neue Layout dieses Blogs bedient sich dieser Technologie und passt sich der Browsergröße an. Probiert es mal aus!

Freizeitler.de auf einem Nokia 5800 Xpress Music
Freizeitler.de auf einem Nokia 5800 XPress Music (360 × 640px)

Edit: 01. Juni 2011

Nachtrag

Dirk Jesse hat auf der Webinale 2011 einen Vortrag zum Thema gehalten. Die sehenswerten Folien gibt es bei Slideshare. Unwissenheit ist ein Segen - Responsive webdesign

Im Zusammenhang mit den Responsive Images möchte ich noch explizit auf die Lösung von filament group verweisen. Responsive Images: Experimenting with Context-Aware Image Sizing


Kommentare (0)



Einen Kommentar schreiben





Ich sage… Erlaubte Tags: