Gastbeitrag: „Responsive Web Design: Kein Trend sondern Pflicht“ von Laith Wahab

Laith Wahab, Blogger auf www.augenschnapper.de, schreibt heute über Responsive Web Design und warum es in seinen Augen Pflicht ist.

1.  Einleitungstext
2.  Was ist Responsive (Web) Design?
3.  Vorteile im Responsive Webdesign
4.  Umsetzungsmöglichkeiten im Responsive Webdesign
5.  Chancen für Webseitenbetreiber und im E-Commerce
6.  Fazit 
1. Einleitung

Das Internet und die darin befindliche Umwelt verändern sich schnell. Immer neue Techniken und Trends sorgen dafür, dass es nie langweilig wird und das heute von jedem Ort mit vielen verschiedenen Geräten online gegangen werden kann. Responsive Webdesign klingt vielleicht aus deutschsprachiger Sicht, wie ein neuer Webdesign-Trend im Netz. Das es viel mehr als das ist, und dass Sie damit gekonnt ihre Reichweite im Netz steigern, verdeutliche ich Ihnen in diesem Beitrag.

2. Was ist Responsive (Web-) design?

Was ist „Responsive Webdesign“ eigentlich? Die erste Info, die Sie mit diesem Beitrag von mir erhalten ist, dass es kein Designtrend, an dem grafische Stile und Benutzeroberflächen im Netz neu etabliert werden ist. Als Beispiele nenne ich hier das aktuell gegenwärtige „Flat-“ bzw. „Almost-Flat“ -Design welches Microsoft in Windows 8 mit seiner „Modern-UI“-Oberfläche umgesetzt hat oder das jahrelang von Apple praktizierte „Skeuomorphismus-Design“, bei dem reale Abbildungen, wie beispielsweise eine analoge Uhr mit Mustertexturen und Farbverläufen im Einsatz kommen. Diese Art von Design, welches uns möglichweise als erstes einfällt, ist es nicht. Es ist vielmehr eine neue Technik die mit Hilfe von HTML5 und CSS3 Mediaqueries in moderne Websites eingesetzt wird. Das Besondere und der leitende Grundsatz sind: Form folgt Funktion! Vielleicht ist es Ihnen ja bereits auf manchen Webseiten aufgefallen. Eine Website mit Responsive
Design reagiert auf die entsprechende Bildschirmauflösung Ihres Endgerätes (möglicherweise ihr PC, Tablet oder Smartphone) und passt Inhalte (Bild- und Text), Navigationselemente und Form optimal darauf an.

3. Vorteile im Responsive Webdesign

Die Problematik dass eine Website mit zu kleiner oder zu großer Auflösung nicht mehr in Sinne des Betreibers, Webentwicklers und Designers dargestellt wird, war schon immer da. Verschärft wurde diese erstmals mit dem Siegeszug des iPhones. Nicht jeder Webseitenbetreiber konnte und wollte eine zusätzliche App entwickeln. Eine einfache und einheitliche Lösung, um Websites auch auf mobile Devices wie Smartphone und Tablet optimal darstellen und nutzen zu können, musste also mehr denn je her. Mit HTML5 sowie neue Funktionen und Erweiterungen der Cascading Style Sheets (CSS3) ist es von nun an ein leichtes ein flexibles Layout umzusetzen.  Die Vorteile im Überblick:
♦ Flexibles Layout und optimale Darstellung unabhängig jeder Bildschirmauflösung.
♦ Auch flexible Werbeanzeigen und Newsletter sind möglich.
♦ Inhalte und Elemente lassen sich individuell nach Auflösung ein- oder ausblenden.
♦ Die Zielgruppe der mobilen Internetnutzer gehen Ihnen nicht verloren!

Zu erwähnen sind auch die kleinen Nachteile, die das Responsive Webdesign so mit sich bringt. Die Planungs-, Entwicklungs- und Umsetzungszeit einer flexiblen Website ist höher. Planen Sie hier also wesentlich mehr Zeit ein, da Sie hier mehrdimensional (Desktop, Tablet, Smartphone) denken und entwickeln müssen.

4. Umsetzungsmöglichkeiten im Responsive Webdesign

Umgesetzt werden Websites im Responsive Webdesign in HTML5 und CSS3. Kenntnisse sollten Sie darin also zwingend mitbringen. Allerdings müssen Sie das Rad nicht neu erfinden, falls doch empfehle ich einen Blick auf die CSS Media Queries (Link zu: http://wiki.selfhtml.org/wiki/CSS/Media_Queries). Hier können Sie in ihrer CSS-Datei(en) verschiedene Medienabfragen für jeden Typ hinzufügen (also auch verschiedene Displayauflösungen eines Endgerätes). Beispielsweise lassen sich hiermit <div> Container mit einer ID oder Klasse bequem ein- oder ausblenden, in der Größe (Breite und Höhe), Farbe, Schriftart und vieles mehr anpassen. Wer sich mit CSS auskennt, wird sich entsprechend zurecht finden. Ihrer Kreativität sind da kaum Grenzen gesetzt.

Beispiele für Mediaqueries:

/* Stylebereich für Tablets ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* Stylebereich für Desktops und Notebooks ———– */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Stylebereich für Smartphones ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

Nutzung von Frameworks

Wie ich bereits erwähnte, muss das Rad ja nicht ganz neu erfunden werden. Um die Umsetzung Ihrer Website im Responsive Webdesign zu beschleunigen, empfiehlt sich der Einsatz von sogenannten Frameworks. Die bekanntesten sind Bootstrap (http://getbootstrap.com) und Foundation (http://foundation.zurb.com). Diese Frameworks kommen gleich mit vorgefertigten flexiblen Grids (Raster), Buttons, Formularen, Tabellen und viele weiteren Elementen daher. Eine Einbindung ist spielend leicht. Ich nutze diese Frameworks ebenfalls als Grundlage für eigene Projekte, auch wenn sie in der Kritik stehen, dass Websites mit Bootstrap und Co. eher Einheitscharakter aufweisen. Eine oder mehrere CSS-Dateien als Ergänzung schaffen hier Abhilfe und lassen kreative und grafische Eigenkreationen durchaus zu. Wenn Sie mehr darüber erfahren möchten, empfiehlt es sich, die Dokumentation der jeweiligen Frameworks im Detail zu studieren.

5. Chancen für Webseitenbetreiber und im E-Commerce

Wie auch immer Sie ihre Website realisieren, eines ist sicher. Mit dem Einsatz von Responsive Webdesign steigern Sie gekonnt Ihre Reichweite, Benutzerfreundlichkeit und im E-Commerce folglich auch den Umsatz. Die Gründe liegen dafür klar auf der Hand. Ihre Zielgruppe „surft“ nicht mehr nur noch mit dem klassischen PC oder Notebook im Netz. Laut der Arbeitsgemeinschaft Online Forschung, kurz AGOF surften innerhalb eines 30-tägigen Erhebungszeitraums mittlerweile 25,92 Millionen Personen ab 14 Jahren auf mindestens eine mobile-fähige Website oder App. Folgt man den Grundsätzen des Marketings, sollten Sie im heutigen Käufermarkt mit der Marketingorientierung auf die Bedürfnisse und Wünsche des Besuchers, Kunden und Konsumenten hören und hier entsprechend reagieren. Die Folge wäre die Wahl einer konkurrierenden Alternative und sicher nicht im Ihrem Interesse.

6. Fazit: Kein Trend sondern Zukunft

Einheitliche Standards in Bildschirmauflösungen wird es auch in Zukunft nicht geben. Vergleichen Sie Responsive Webdesign also nicht mit irgendeinem grafischen Trend, der ohnehin nur Geschmackssache ist. Falls Sie Ihre Website also fit für die Zukunft machen möchten, empfiehlt es sich, dass Sie sich damit befassen. Einen Blick auf die Vorteile konnte ich ihnen in diesem Beitrag hoffentlich vermitteln. Ihre Leserschaft, Kundschaft, User und viele weitere Nutzer Ihrer Website werden es Ihnen danken.

Quellen: Mobile Facts (AGOF, 2013,
http://www.agof.de/download/Downloads_Mobile_Facts/Downloads_Mobile_Facts_2013/Downloa
ds_Mobile_Facts_2013_III/mf%202013-III%20AGOF_mobile_facts_2013-III.pdf
 

P.S. Mehr über Responsive Webdesign auf Lecturio!