php-homepage.com

Responsive Design (vormals fluid)

Gleich zu "Responsive Design" - -->hier klicken

fluid design

oder auch flexibles layout, mit aufkommen der Mobilgeräte nun auch Responsive Design genannt, wird für Webdesigner mehr und mehr ein (umstrittenes) Thema. Umstritten deshalb, weil es keine "optimale" Lösung gibt, beim Thema fluid layout spielen subjektive Kriterien meist eine größere Rolle.

Erläuterung von responsivem Design

Jemand der mit einer "Standardauflösung" von 1024*768 Pixeln (4:3), 1280*720 Pixeln (16:9 Breitbild) oder ähnlichen im Internet surft, wird im ersten Moment nicht nachvollziehen können wie wichtig ein flexibles Layout für Webmaster sein kann. Längst benutzen nicht mehr über 90% der Internetuser solche "Standardauflösungen".
Heute surft man bei vielen verschiedenen Gelegenheiten und mit unterschiedlichsten Geräten im Netz.
Angefangen von mobilen Geräten wie PDAs, Ipads, usw., die aufgrund der geringen Größe nur Auflösungen von 800*480, 640*480 und dergleichen darstellen können,
bis hin zu Monitoren im Grafiker/Designer-Bereich jenseits der 26 Zoll mit Auflösungen von 1600*1200 (älterer 4:3), 1680*1050 (16:10 Breitbild)
und teilweise sogar noch höher, wie aktuelle Statistiken belegen. Und dazwischendrin gibt es natürlich noch diverse Formate von Heim-PCs, Laptops, Notebooks, Netbooks,....

Langer Rede kurzer Sinn: Optimiert man seine homepage also in konservativer Manier auf eine der (veralteten) "Standardauflösungen", weil man sich den Aufwand für die anderen paar Prozent der Nutzer (die mittlerweile aber die Mehrheit darstellen dürften und zunehmen!) nicht in Kauf nehmen möchte,
wird man nur für einen Teil der Besucher ein zufriedenstellendes Ergebnis liefern können! Denn wer will schon seitenlang horizontal scrollen, wenn man unterwegs mal kurz mit dem Netbook surfen will und die betreffende Seite für eine hohe Auflösung "optimiert" wurde. Im Gegenzug dazu fragt sich der Besitzer eines 24", 26" oder noch größeren Monitors bei der Betrachtung mancher in 800*600 Pixel gestalteten homepage, warum er für die breiten weißen Streifen am linken und rechten Rand Strom zur Ausleuchtung bezahlt:-) Natürlich muss man hier Kompromisse eingehen und versuchen ein Mittelweg zu finden, der die gebräuchlichsten Fälle abdeckt und Extremfälle auch noch möglichst gut bedient.

Responsive Design - die Lösung?

Ein Lösungsweg ist die Verwendung eines sogenannten "fluid layout".
Anstatt Beispielsweise Divs mit fixen Größen in Pixeln für das Layout zu verwenden, gibt man die Breite (width) einfach in % an, womit man erreicht, dass der jeweils vorhandene Platz am Bildschirm des Besuchers bestmöglich genutzt wird. Möglichkeiten zur Realisierung möchte ich im entsprechenden Kapitel fluid-layout des CSS-Tutorials aufzeigen.

update:20.01.2013 Fluid Layout wird seit der Verbreitung mobiler Geräte immer gefragter und mittlerweile belegen zahlreiche Statistiken die immer größere Verbreitung von mobilen Geräten, die zum Surfen verwendet werden. Die Bandbreite, wie auch die verwendetenen Auflösungen dieser Geräte ist hoch. Wenn auch viele der verwendeten Browser Webseiten für die Verwendung auf dem jeweiligen Display optimieren, so muss man sich überlegen, wie die eigene Homepage auf den gängigsten Geräten dargestellt wird und ob es sinnvoll wird, eine mobile Version anzubieten.