href="http://www.guavestudios.com/blog">Guave Studios – Agentur für digitale Medien

Heutzutage stehen eine Vielzahl von Devices für das auf die jeweiligen Bedürfnisse zugeschnittene Surferlebnis zur Verfügung. Ob mobil oder stationär. Darauf mittels gutem Webdesign zu reagieren liegt in der Verantwortung von Designern und Developern.

Fast jeder Kunde möchte seine Inhalte ebenfalls über eine mobile Version der eigenen Webseite verfügbar machen. Am besten spezifisch für iPhone, iPad, Android Phones & Pads, Blackberry, Netbooks und zahlreiche weitere Devices.

In den nächsten Jahren wird diese Entwicklung nicht zurückgehen, auf die es deshalb zu reagieren gilt.

Es gibt verschiedenste Möglichkeiten, um Informationen auf attraktive Weise auf verschiedensten Geräten zur Verfügung zu stellen und dabei eine konsistente Optik aufrecht zu erhalten. Zum Beispiel alternative Web-Frontends, Mobile (Web-)Apps im Browser, native Apps und vieles mehr.

Heute möchte ich euch eine Möglichkeit und zugleich ein Denkansatz im Webdesign vorstellen, mit dem sich zentral für verschiedenste Devices arbeiten lässt.

Responsive Webdesign

“Reagierendes Webdesign” ist ein Ansatz der darauf abzielt, dass Design und Development möglichst dynamisch und flexibel auf das Nutzerverhalten und Umfeld basierend auf Bildschirmauflösung, Plattform und Ausrichtung reagieren sollen.

Dieser Ansatz ist vorallem für Webprojekte relevant, wo das Erstellen einer eigenen, separaten Website oder mobile-App für die ganzen verschiedenen Geräte undenkbar, bzw. praktisch gesehen nicht relevant ist.

Dabei ist vorallem wichtig, dass es beim responsive Webdesign nicht nur um angepasste Layouts und automatisch skalierende Bilder geht, sondern dass es sich dabei um eine Denkweise im modernen Webdesign handelt.

Auflösung und Device

Hunderte verschiedene Bildschirme und Auflösungen existieren heute. Kleine und grosse Touch-Screens, grosse und kleine LED-Bildschirme – beliebig im hoch oder Querformat einsetzbar. Und es werden noch mehr dazukommen. Es steht also die Frage im Raum, wie man im Webdesign konkret mit dieser Situation umgehen soll.

Flexibilität statt Redundanz

Bereits vor einigen Jahren gab es flexible Layouts im Web, wobei diese äusserst selten aufzufinden waren und sich die Flexibilität oft stark in Grenzen hielt. Heutzutage gibt es wesentlich mehr technische Möglichkeiten, browserkompatible, flexible Layouts umzusetzen, auch wenn das an den an Photoshop und statische Layouts gewöhnten Designer ganz neue Anforderungen stellt. Dies ist ein Kernansatz von responsive Webdesign.

Hier einige kurz beschriebene Techniken im Frontend Development, um Flexibilität zu gewärhleisten:

• Flexible Bilder

  Früher haben Bilder oft flexible Layouts zerstört. Bilder können heute mittels CSS einfach skaliert werden.Eine weitere Technik ist es, Bilder zu croppen (zuschneiden). Dies funktioniert mit einer Kombination aus einem <div> mit einem Background-Image das per CSS eingemitted wird und dessen <div> je nach Auflösung eine dynamische Breite hat. Mittels dem benutzerdefinierten HTML5-Attribut data-fullsrc und etwas javaScript (http://filamentgroup.com/examples/responsive-images) kann man ebenfalls ein niedrig und ein hochaufgelöstes Bild mit dem selben<img>-Tag gegeneinander austauschen, je nach Screen Auflösung.Vorteil: Weniger unnötiger Load auf mobilen Devices.

  
  Vergl.: Skalierende Bilder
  

• Spezifische Layout Struktur

  Bei extremen Grössenunterschieden kann es nötig werden, das gesamte Layout anzupassen. Das kann mit einem neuen, separaten CSS geschehen, oder besser, mit CSS media queries. Damit lassen sich – wenn bestimmte Situationen zutreffen – bestehende CSS Klassen überschreiben oder neue ergänzen. So kann flexibel auf extreme Auflösungen reagiert werden. Alte Browser, die Media-Queries nicht unterstützen, werfen keine Fehler, sondern ignorieren diese einfach.
  

  • Code-Beispiel:
    

  /* Smartphones (Hoch- und Querformat) ----------- */

  02	@media only screen

  03	and (min-device-width : 320px)

  04	and (max-device-width : 480px) {

  05	/* Hier können nun bestehende Klassen überschrieben werden oder neue styles hinzugefügt werden. */

  06

  }

  Mittels javaScript wäre es ebenfalls möglich solche Befehle zu implementieren, insbesondere wenn Browser unterstützt werden sollen, die media queries noch nicht unterstützen. Die allermeisten Smartphones und alle gängigen Browser aber, für die diese queries in erster Linie relevant sind, unterstützen sie auch.

• Visibility – Inhalte verstecken und anzeigen.
  

  Oft ist es nötig auf mobilen Geräten auf diverse, nebensächlichere Zusatzinhalte zu verzichten, um den Blick des Betrachters auf das Wesentliche zu lenken. Hierfür eignet sich der CSS-Befehl display:none, der ebenfalls im Zusammenhang mit den media-queries flexibel eingesetzt werden kann.

• Touchscreens – Finger statt Mauszeiger.

  Ein weiterer Aspekt ist das unterschiedliche Handling von Webseiten via Touchscreens. Diesen Aspekt möchte ich aber in einem separaten Artikel behandeln, den ich hier verföffentlichen werde.

Beispiel

Ich habe euch noch ein kleines, einfaches Beispiel gemacht
(einfach die Seite beliebig skalieren und die Ausgabe betrachten!)

http://projects.guavestudios.com/resp-design-test/