Responsive Webdesign und dessen Vorteile

Eine neue Art des Webdesign Layouts erobert das Internet. Heutzutage werden inzwischen knapp 35% des weltweiten Internet Traffics durch sogenannte Mobile Geräte wie zum Beispiel: Smartphones, Tablets usw erzeugt. Doch auch neue Geräte wie Fernseher, die sogenannten Smart TVs erobern das Internet. Dabei stellt sich oft die Frage an den Webseiten Betreiber welche Auflösung soll meine Internetseite haben, dass alle Endverbraucher diese auf allen Endgeräten in der bestmöglichen Auflösung/Darstellung betrachten können. Ganz einfach: “Responsive Webdesign”, das heißt so viel wie “reaktionsfähiges Webdesign”.

Was ist Responsive Webdesign?

Responsive Webdesign passt sich automatisch an die entsprechende Auflösung an, die der User ( Webseiten Besucher ) für sein Endgerät benötigt zum Beispiel an einen Desktop PC, Tablet oder auch ein Smartphone. Dabei wird das Design (Navigation, Bilder, Texte etc.) dynamisch an das entsprechende Endgerät angepasst. Keine Aufwendige Programmierung der Internet Seite für spezielle Endgeräte mehr, wie es noch kürzlich notwendig war. Dabei wurde jede Internetseite in mehrfacher Ausführung programmiert ( HTML und CSS ) und den entsprechenden Endgeräten zugewiesen.

Ein Layout kann auf einem Tablet kann anders dargestellt werden als auf einem Smartphone oder Desktop PC. Die Basis für diesen Vorgang der dynamischen Anpassung ist HTML5 und CSS3. Mit einfachen Befehlen kann man sogar einige Elemente der Webseite für einige Endgeräte einschränken oder auch erweitern.

Das Benutzerfreundliche Menü

Ein wichtiger Bestandteil von Responsiven Webdesign ist das Menü. Früher hatte man immer Schwierigkeiten den richtigen Menüpunkt auf seinem Touch Screen zu treffen und die Untermenüpunkte waren eigentlich immer unzugänglich, weil sich immer der Hauptmenüpunkt beim Auswählen öffnete. Beim Responsiven Webdesign gibt es zum Glück mehrere Menü Layouts/Varianten, die eine äußerst Benutzerfreundlich Menüauswahl bieten.

Touch Screen Support

Was wäre eine schöne Internet Seite auf einem Touch Screen Gerät ohne Touch Screen Support? Wie ein Auto ohne Lenkrad zum Beispiel! Zum Glück kann man auf Responsiven Webseiten hervorragen lenken. Dabei ist nicht das bekannte Scrollen einer Internetseite gemeint sondern die Interaktive Bedienung von Elementen. Mit dem sogenannten Touch Screen „swipe“ Effekt lassen sich zum Beispiel Tabs, Banner Slideshows und auch andere Interactive Elemente mit einem leichten rüber wichen in die entsprechende Richtung steuern.

Die Technik mittels Media Queries

/* Smartphones */
@media (max-width: 480px) { ... }

/* Smartphones oder Tablets */
@media (min-width: 481px) and (max-width: 767px) { ... }

/* Tablets */
@media (min-width: 768px) and (max-width: 959px) { ... }

/* Desktop */
@media (min-width: 960px) and (max-width: 1199px) { ... }

/* Große Display */
@media (min-width: 1200px) { ... }