Es wird immer aufwändiger Webseiten zu produzieren die bei der breiten Masse ankommen sollen. Zahlreiche Geräte und unzählige Bildschirmgrößen müssen abgedeckt werden. Dazu kommen ein aufwändiges und modernes Layout und viele Animationen und Features. Hier möchten wir ein paar kleine Helferlein bei der Arbeit mit „responsive webdesign“ vorstellen…
Was ist Responsive Webdesign?
Responsive Webdesign stellt eine aktuelle Technik zur Verfügung, welche es ermöglicht das einheitliche Anzeigen von Inhalten auf einer Website zu gewährleisten. Hierbei wird das Layout einer Website so flexibel gestaltet, dass dieses auf dem Computer- Desktop, Tablet und Smartphone eine gleichbleibende Benutzerfreundlichkeit bietet und der Inhalt gänzlich und schnell vom Besucher aufgenommen werden kann.
Wie fange ich an?
Das schwierigste an solchen Projekten ist es meist die Inhalte sinnvoll unterzubringen. Wohin mit der Fülle von Texten von einer Desktop-Page in einem Smartphone Display? LukeW hat ein paar Ideen und Frameworks dazu gesammelt…
http://www.lukew.com/ff/entry.asp?1514
Gibt es Vorlagen?
Bootstrap ist eine freie Sammlung von Hilfsmitteln für die Gestaltung von Websites und Webanwendungen. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-System, Navigations- und andere Oberflächengestaltungselemente sowie zusätzliche, optionale JavaScript-Erweiterungen.
http://twitter.github.io/bootstrap/index.html
Mobil Geräte Emulator
Auf dieser Webseite (1) kann man sich einige Mobiltelefone und Tablets emulieren / simulieren lassen. Die Seite ruft eine Andere Webseite mit einer geringeren Bildschirmauflösung auf und steckt diese in ein schickes Smartphone Gehäuse. Nette Spielerei J Praktischer ist da Screenfly (2). Hier kann man eine beliebige Auflösung einstellen und trotzdem noch verbreitete Größen simulieren! Super.
Und vieles vieles mehr .. wir halten euch auf dem Laufenden!!
