Responsive Webdesign war im vergangenen Jahr in aller Munde und wird es auch noch in diesem Jahr bleiben. Wohl eher noch mehr, da Tablet-PCs sich nach wie vor ungebrochener Beliebtheit erfreuen. Nicht jede Website ist auf kleineren Bildschirmen genauso zu betrachten wie auf einem Monitor. Heranzoomen, um den richtigen Link zu erwischen oder überhaupt den Text lesen zu können sind momentan noch an der Tagesordnung. Die Jungs von Webdesignerwall haben ein kleines und einfaches Tutorial verfasst, wie man seine Website kurzfristig für mobile Geräte aufbereitet.
Das gesamte Tutorial beinhaltet nicht mehr als drei Schritte. Angefangen im Header, wo erläutert wird, wie mobile Browser den Inhalt darstellen bzw. skalieren. Ältere Internet Explorer-Benutzer werden nicht ausgeschlossen, denn es wird auch gleich ein entsprechendes JS-File angeboten, da der IE in der Version 8 und älter keine Media-Queries unterstützt.
Im zweiten Schritt wird lediglich eine einfache HTML-Struktur vorgeschlagen, die natürlich nach Belieben angepasst werden kann. Hier ist natürlich auf die maximale Browser- bzw. Bildschirmgröße zu achten.
Im letzten Schritt geht es um das eigentliche Responsive Design. Hier werden entsprechende CSS-Styles in Abhängigkeit der Browsergröße definiert. Das war es dann auch schon.
Responsive Webdesign in drei einfachen Schritten auf Webdesignerwall erklärt
Für alle Einsteiger in Responsive Webdesign und jene, die ihre Website kurzfristig auch für mobile Geräte optimieren möchten, ist dieses kleine Tutorial eine wirklich gute Hilfe. Mit diesen Grundkenntnissen lässt sich der eigene Content vernünftig auch auf kleinen Monitoren vernünftig betrachten. Heranzoomen und “Blind”-Klicken wird vermieden und Benutzer von Tablets oder Smartphones kommen einfacher an die gewünschten Inhalte.
Hier geht es zum vollständigen Tutorial über Responsive Webdesign von Webdesignerwall