Responsive WebDesign

Ihre Webseite soll auch auf Handy oder Tablet überzeugen? Dann benötigen Sie Responsive WebDesign (RWD)! Ein WebDesign ist 'responsiv', wenn es auf die aktuelle Umgebung des Benutzers reagiert.

responsive Webdesign

Responsive Webseiten sind dynamisch gestaltet, so dass sie in einer Version auf allen Browsern und Geräten vernünftig dargestellt werden und ihre Inhalte gut zugänglich und benutzbar sind.

Smartphone über Tablet und Laptop bis zum riesigen 32"-Bildschirm bieten unterschiedlich große Bildschirme/Fenster, Auflösungen und Orientierungen (hoch / quer), von denen Erscheinungsbild und Bedienung einer Website abhängen. Der verwendete Browser und dessen Fähigkeiten spielen ebenso eine Rolle wie die Bedienung: Kleinere Geräte werden per Touch bedient, Mouseover oder Hover-Effekte entfallen. Eine Rolle spielt auch die Limitierung von Datenvolumen und Performance.

Die Berücksichtigung der genannten Faktoren ist alles andere als trivial. RWD gilt als erstrebenswertes Ziel, die 100% Umsetzung ist derzeit noch schwierig. Da Usability-Guidelines zum RWD bisher nicht vorliegen, ist Kreativität und Experimente gefragt.

Eine Webseite 'mobil friendly' zu gestalten, bedeutet gegenüber herkömmlichem Webdesign Mehraufwand, der sich durch alle Stadien des Entwicklungsprozesses zieht.

Auch wenn derzeit beispielsweise in den USA Online-Einkäufe via mobilen Endgeräten erst ca. 2 % ausmachen, so bekommt 'Responsive Webdesign' mit der zunehmenden Verbreitung von Mobilgeräten zum Surfen einen immer höheren Stellenwert. Alternativ für diverse Geräte eigene Webseiten oder Apps zu erstellen, kann in der Regel nicht der Königsweg sein.responsive Webdesign

Auch diese Webseite ist 'responsiv' gestaltet, schauen Sie sich die Funktionalität direkt an, indem Sie auf Ihrem Desktop-PC Ihre Fenstergröße variieren.

 


Oder sehen Sie sich auf Ihrem PC-Bildschirm die Layout-Unterschiede der verschiedenen Auflösungen an,
z.B. Schriftgrößen, Spaltenanzahl, Anordnung der Elemente, z.B. Menüs am Beispiel von apollon-quintett.de:

Mobiltelefon (320px × 480px)

kleines Tablet (480px × 640px)

Tablet hochkant (768px × 1024px)

Tablet querformat (1024px × 768px)