Hauptnavigation

Mobiles Web

Was bringt responsive Design?

www.foodsense.is auf Notebook

www.foodsense.is auf Notebook

 

Einen unserer Schwerpunkte der wissens.werk Veranstaltung im September bildete das aktuelle Trendthema Responsive (Adaptive) Design. Responsive Design ist zwar schon ein älterer Ansatz bei der Gestaltung von Websites, wurde aber durch das Aufkommen leistungsfähiger Smartphones und der zunehmenden Unterstützung des neuen Webstandards HTML5 zu neuem Leben erweckt.

Worum geht es? Bei der Gestaltung von Websites ist anders als im Druck das Format des Ausgabemediums, sprich die Bildschirmgröße, nicht bekannt. Bisher war es üblich, dass sich Internetseiten flexibel an die Bildschirmgröße anpassen. Doch vor allem bei größeren Bildschirmen ging diese Flexibilität oftmals zu Lasten des Layouts.

 
www.foodsense.is auf Tablet

...auf Tablet

Im klassischen Screendesign wurde daher eine Mindestgröße für die Internetseite festgelegt und der verbleibende Raum entsprechend kreativ befüllt. Logische Konsequenz dieses Vorgehens war dann beim Aufkommen der ersten Smartphones die Entwicklung einer mobilen Version, deren Mindestgröße sich am kleinsten Smartphone-Bildschirm orientiert.

Doch es wurde komplizierter: Zwischengrößen bei Tablet PCs und auch der Wunsch Webseiten im Hoch- und Querformat anzuschauen, verlangten nach einer neuen, einer universalen Lösung.

Bei Responsive Design werden also keine Versionen mehr für verschiedene Endgeräte entwickelt, sondern Regeln in ein einheitliches Webdesign eingebaut, das bei jeglicher Bildschirmgröße dargestellt werden soll. Dabei hilft, dass die Browserprogramme auf den Rechnern der Internetnutzer heute viel schneller Bilder neu berechnen und JavaScript-Befehle ausführen können als noch vor wenigen Jahren.

Denn die Idee ist, dass die finale Darstellung der Website erst auf dem Endgerät des Nutzers festgelegt wird. So kann eine im Hochformat auf dem Handy angezeigte Seite einspaltig und durch Kippen des Geräts ins Querfomat zweispaltig dargestellt werden. Dabei muss die Seite nicht einmal neu geladen werden.

 
www.foodsense.is auf Smartphone

...auf Smartphone

Hinzu kommt, dass der neue Standard HTML5 die Möglichkeit eröffnet, Gesten zu erkennen, und eine Bildergalerie auf einem kleineren Bildschirmen damit genauso bedient werden kann wie die Fotosammlung auf dem Smartphone. Daneben bietet HTML5 eine Reihe weiterer neuer Funktionen, die über Webdesign und Bedienung hinausgehen.

Dauerhaftes Sichern von Daten, die Lokalisierung des Nutzers über die Geokoordinaten des Mobiltelefons und viele weitere Funktionen sind in HTML5 vorgesehen, werden zunehmend von den Mobiltelefongeräten unterstützt und machen die Programmierung nativer Apps zunehmend überflüssig. Dies ist aber ein Thema für einen weiteren Blogbeitrag.

Um den Charme von Responsive Design erleben zu können, fassen Sie das Browserfenster dieser Seite doch mal unten rechts an und verkleinern Sie das Fenster. Viel Spaß.

 

Teilen:

Kommentare (2)

Was ist denn jetzt nochmal der Unterschied zwischen Responsive Web Design und Adaptive Web Design?

Leandr am Montag, 28.11.2011, 19:41

Ich warte gespannt auf den weiteren Blogeintrag zum Thema Apps und Feature-Verlust bei mobilen Endgeräten. Denn es ist immer noch wichtigstes Argument gegen Responsive Design, dass der Verzicht seperater mobiler Versionen, einen finanziellen Verlust für Unternehmen bedeutet. Wie (http://www.bei-freunden.de/) sammeln hierfür derzeit einige Argumente, warum es sich trotzdem lohnt auf Responsive Design umzustellen.

Sophie Hulkoff am Donnerstag, 21.03.2013, 11:20

Neuer Kommentar

Bitte füllen Sie alle mit einem Sternchen (*) gekennzeichneten Felder aus.
Bildbasierter Sicherheitstest zur Unterscheidung zwischen Mensch und Maschine.


Andere Artikel