^ Nach oben

Responsive Webdesign

Ressourcen

Worum geht es?

Das Internet wird heutzu­tage mit einer Viel­zahl unter­schied­lichster Geräte genutzt. Neben Desktop-PCs und Laptops kommen vor allem immer mehr mobile Geräte wie Netbooks, Tablets oder Smart­phones zum Einsatz. Laut einer Studie des Netz­werk­spezialisten Cisco wird der mobile Daten­verkehr bis zum Jahr 2017 auf das Dreizehn­fache des 2012 er­reichten Volumens an­wachsen (Quelle: ZDNet).


So ver­schieden die Endg­eräte sind (ins­besondere in puncto Größe und Display), so viel­fältig sind auch die An­forderungen, denen eine Webseite genügen muss, um für die Nutzer stets über­sicht­lich und bedienungs­freund­lich zu sein. Genau dieser Auf­gabe, nämlich der Generierung an­passungs­fähiger Web­seiten, hat sich das responsive Web­design ver­schrieben. Eine der wichtigsten Säulen des responsive Web­design sind dabei die so genannten Media Queries. Diese ermög­lichen es nämlich, ein Layout für ver­schiedene Bild­schirm­größen via CSS-An­weisungen zu ge­stalten.


Auf den nächsten Seiten werden Web­seiten vor­ge­stellt, die in muster­gültiger Weise auf An­passungs­fähigkeit hin ge­trimmt wurden. Wie diese Seiten auf ver­schiedenen - großen wie kleinen - Geräten aus­sehen, kann man mit Test­tools wie Screenfly prüfen



Mittler­weile sind einige aus­gez­eichnete Bücher in deutscher Spra­che ver­fügbar, die sich ein­gehend mit "Responsive Web­design" be­schäftigen.


Ich empfehle an dieser Stel­le das Buch "Responsive Web­design: Reaktions­fähige Web­sites ge­stalten und ums­etzen" von Christof Zillgens. Der Autor deckt in seinem Buch auf lockere und sehr ver­ständ­liche Art sämtliche As­pekte des Themas, ins­besondere die Be­reiche flexible Raster, Media Queries, an­passungs­fähige Bil­der, Hinter­grund­bilder und Icons, reaktions­fähige Web­typgrafie und mobile Navi­gation, ab.


Ab­gesehen von Büchern bietet na­türlich das Inter­net eine hervor­ragende Quelle, um sich mit den diversen Frage­stellungen ver­traut zu machen.


Unten stehend sind einige Web­seiten genannt, die eine aus­ge­zeichnete Basis für den Ein­stieg in das Thema bieten. Über­dies finden sich dort Links zu be­deutenden responsiven Grid-­Systemen, die das Er­stellen an­passungs­fähiger Seiten er­heblich er­leichern, sowie Links zu Seiten (Responsive Testing Tools), mit deren Hilfe man eruieren kann, wie sich Web­seiten auf unter­schied­lichen Geräten ver­halten.





Lizenzen:
Buch "Responsive Webdesign": eigenes Foto
Apple Device Icon (bearbeitet): © Eelco Guntlisbergen/dribbble.com
Apple Ipad und Iphone (bearbeitet): © luutrungkienvn/photobucket.com
Samsung Notebook (bearbeitet): © seskima/deviantart.com
MacBook Air Station (bearbeitet): © MattsMacintosh/Flickr
Ipads auf einem Tisch(bearbeitet): © Yutaka Tsutano/Flickr