Responsive Webdesign ::: von mobil bis Riesenmonitor
Geschrieben von am 1 Kommentar
In den letzten Wochen habe ich mich intensiver mit Responsive Webdesign befasst. Hierbei geht darum, die Inhalte einer Seite möglichst optimal für alle Geräte darzustellen. Egal ob mobiles Smartphone oder großer Monitor mit hoher Auflösung alle Nutzer sollen ein Layout finden, was zu ihrem gerade genutzten Gerät passt. Beim Barcamp Stuttgart habe ich am Samstag eine Session zu diesem Thema angeboten, dieser Beitrag enthält die Links und Infos hierzu.
Die Techniken im Hintergrund sind gar nicht so neu, vorgestellt wurde CSS 3 schon vor einigen Jahren.
Sinnvoll einsetzbar wurde diese Möglichkeiten jedoch erst seit sie von
den wichtigsten Browsern auch interpretiert wurden. Für mobile Geräte
konnte man zunächst mittels
media="handheld"
ein anderes
Layout festlegen, Geräte wie das iphone melden sich jedoch gar nicht als
handheld und bekamen daher doch wieder dasselbe Design wie Nutzer mit
großen Desktopmonitoren.
media queries je nach Auflösung
Mittels media queries aus CSS 3 wird ein Layout je nach Auflösung ausgegeben. Zunächst habe ich ein Layout erstellt wie es in meiner Arbeitsumgebung optimal passt. Mein erster Schritt war also das Layout für eine hohe Auflösung wie z.B. 1920 * 1080 Pixel anzulegen. Danach probierte ich immer kleiner werdende Auflösungen und sobald mir etwas nicht gefiel, passte ich es an. Das habe ich so lange gemacht bis ich eine weitere Verkleinerung nicht mehr für sinnvoll hielt, sprich bei weniger als 300 px Breite erzwinge ich einen Scrollbalken, Beispiel:{literal}@media only screen and (max-width: 429px) { #mainwrapper{ min-width: 270px; } }{/literal}Genauer ansehen könnt ihr euch das CSS layout.css im unteren Teil von der Seite miradlo.com. Testen lassen sich Seiten:
- screenfly dort werden diverse Auflösungen je nach Gerät angezeigt, einfach die URL eingeben, z.B: miradlo.com
- Responsive Webdesign Testing zeigt direkt mehrere Auflösungen auf einen Blick, auch hier einfach die URL eingeben, z.B: miradlo.com
miradlo bloggt
Gestern abend habe ich noch ein bisschen am Blog und den Einstellungen geändert, probiert und rumgespielt. Heute morgen sah ich, dass ich wohl irgendwas kaputt gemacht habe. Ungeschickterweise fiel es mir erst auf, als ich gerade noch mal den Link zum ges ...