Flexibel und reaktionsfähig

responsive_webdesignDamit meine ich ausnahmsweise nicht mich :mrgreen: sondern das Webdesign meiner Laufchronik. Reaktionsfähiges Design, auch Responsive Design genannt. Immer mehr Anwender (auch sportinteressierte) greifen per Smartphone oder Tablet-PC auf das Internet zu. Das mobile Web ist auf dem Vormarsch, wie man an folgender Statistik sieht:

[wpspoiler name=“Statistik mobile Internetnutzung“ ]Mobile Internetnutzung über Handy in Deutschland 2008 - 2012[/wpspoiler]

kurze Erklärung: Früher hat man es oft lesen können: „Diese Website ist optimiert für den BlaBla-Browser und eine Auflösung von 800×600 Pixel.“ Das ist heutzutage wegen der Vielzahl der unterschiedlichen Geräte natürlich nicht mehr zeitgemäß. Damit eine Website, ein Blog usw. sowohl auf dem Smartphone als auch auf dem 27″-Display zu Hause optimal dargestellt wird verwendet man ein Layout, welches sich an die Ausgabegröße des Gerätes anpasst.

Die Überlegung, meine Laufchronik flexibler zu gestalten kam mit der Auswertung der Besucherstatistik. Inzwischen rufen rund 15% aller Besucher (Tendenz steigend) mit mobilen Geräten meinen Blog auf… und sind genau so schnell wieder weg. Die Gründe für den schnellen Absprung liegen auf der Hand: Es macht keinen Spaß in die Seite hineinzuzoomen und hin und her zu scrollen, damit man ein paar Zeilen lesen kann. Die optimale Darstellung auf jedem Gerät wird für eine moderne Website immer wichtiger.

Funktion:  Wie passt sich denn nun die Darstellung der Webseite an die Auflösung des Ausgabegerätes an? Lässig ausgedrückt sagt das Gerät des Besuchers zu meiner Website: „He, ich bin ein Android-Smartphone mit einer Displayauflösung von 320×480 Pixel, schalte mal um auf die Handydarstellung, vergrößere die Schrift entsprechend und mach‘ die Bilder kleiner, aber zackzack!!!

xperia_active_responsive

Bei Tablet-Pc’s ist das Design wieder etwas anders, weil ja mehr Platz als auf dem Handy vorhanden ist. Im Prinzip wäre hier wieder die normale Darstellung möglich, aber die Navigationsbuttons und Links wären mit dem Finger schlechter zu treffen als am Laptop oder Desktoprechner mit der Mouse. Deshalb ist das Design u.a. auf die Touch-Bedienung optimiert. Mit Windows 8 soll der Unterschied ja aufgehoben werden, aber das führt hier zu weit…

responsive_tablet

Wie ist deine Meinung zum Sinn spezieller Darstellungen für Mobilgeräte? Über Kommentare und Beispiele würde ich mich freuen.