Tipp: Keine Lust zu lesen? Dann testen Sie doch einfach kostenlos unsere Online-Kurse aus der Lecturio-Software-Flatrate.

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!



Können Sie gut im Job kommunizieren?

Machen Sie mit den 10 Praxissituationen unseres kostenlosen eBooks den Selbst-Test und erhalten Sie wertvolle Tipps zu:

Feedback geben und annehmen

Körpersprache

Typische Fehler und Fallen bei der Kommunikation

        EBOOK ANFORDERN        
Nein, danke!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

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

  • Silvester Rüfenacht

    Auf der Suche nach interessanten Beiträge über dieses Thema bin ich auf diese Webseite gestossen.

    Und wie Lars schon bereits treffend geschrieben hat, ist es schon eine eigene Disziplin und Herausforderung.

    Danke für den tollen Beitrag!

  • Lars Lakomski

    Guter Beitrag zum Thema Responsive-Webdesign.

    Ich sehe das schon fast als eigene Disziplin im Bereich Webdesign an, denn wer nicht mit Standard Frameworks seine Seite umsetzen möchte, halt wegen dem angesprochenen Einheits-Look, der benötigt in der Regel einen Fachmann für die möglichst perfekte Umsetzung von RWD. Ich sehe Responsive-Webdesign nicht nur als eine Lösung die nur Inhaltsblöcke für das Display passend verschiebt oder ein- und ausblendet. Klar, für viele kleinere Unternehmen mit kleinem Budget ist das Standard RWD sicher ausreichend und besser als keine dynamische Seite zu haben.

    Aber auch wegen der immer weiter steigenden Anzahl an unterschiedlichen Displayauflösungen, gerät man mit den CSS Media Queries irgendwann an eine Grenze, sprich man geht irgendwann Kompromisse ein oder muss ständig die CSS anpassen.

    Deshalb denke ich, wird es in Zukunft immer mehr Lösungen auf Basis von jQuery Mobile geben, zumal die Umsetzung einer normalen Web-App für Smartphones kaum länger dauert als eine RWD Anpassung eine Webseite. Und das Look and Feel einer Web-App dürfte vielen Smartphone-Nutzer halt auch mehr entgegenkommen als die Bedienung einer normalen Internetseite im RWD-Format.