Lade Inhalt...

Problematik und Umsetzung des Responsive Webdesigns

Seminararbeit 2018 7 Seiten

Informatik - Wirtschaftsinformatik

Leseprobe

Inhaltsverzeichnis

1. Konzepte im Webdesign
1.1. Problematik
1.2. Konzepte im Webdesign
1.2.1. Fluid Layout
1.2.2. Adaptives Layout
1.2.3. Mobile-First-Ansatz
1.2.4. Die Problematik der einzelnen Konzepte
1.3. Das Responsive Layout
1.3.1. Nutzung der Vorteile für einen Online-Shop
1.4. Technische Umsetzung
1.4.1. Trennung von Inhalt und Layout

Literatur und Quellenverzeichnis

Abbildungsverzeichnis

1. Konzepte im Webdesign

1.1. Problematik

Seit mit Smartphones und bezahlbaren mobilen Datenverträgen jeder die Möglichkeit hat kostengünstig mobil im Internet zu surfen, wird es immer wichtiger Webseiten so zu gestalten, dass sie mit jedem Endgerät problemlos darstellbar und ansehnlich sind. 2010 wurde der Begriff „Responsive Webdesign“ erstmals verwendet und ist seitdem in der Webdesign und Online Marketing Welt nicht mehr wegzudenken.1 Seit dieser Zeit hat sich der Markt für onlinefähige Endgeräte noch deutlich weiterentwickelt. Heute ist es selbstverständlich mit dem Laptop, dem Desktop-Computer, dem Tablet, dem Smartphone, dem Auto und sogar dem Fernseher im Internet zu surfen. Eine Webseite sollte daher in der Lage sein, all diese unterschiedlichen Bildschirmauflösungen und Seitenverhältnisse zu berücksichtigen und die Inhalte übersichtlich und lesbar darzustellen. Mittlerweile reichen die Auflösungen von 320 Pixel mal 480 Pixel eines iPhone 3G bis hin zu 4.096 Pixel mal 3.072 Pixel eines UHD Bildschirms.2 Die Herausforderung liegt darin, eine Webseite so skalierbar zu gestalten, dass sie die gesamte Auflösungsspanne abdecken kann, ohne dabei das vorhergesehene Design zu verlieren.

Mittlerweile geht es sogar so weit, dass ein Online-Shop der „verlängerte Arm“ einer Shopping-App des Smartphones ist. Der Onlineshop Wish zeigt, dass sogar eine Shopping-App alleine reicht um auf dem Markt Erfolg zu haben. Daher stellt eine Responsive Websiete das absolute Minimum dar.3

1.2. Konzepte im Webdesign

Früher verfolgte man den Ansatz verschiedene Designs zu erstellen, die dann je nach Auflösung des Endgeräts geladen wurden. Bei der Vielzahl an Endgeräten in der heutigen Zeit, wäre das jedoch ein unverhältnismäßiger Aufwand, mit dem man trotzdem nicht jeden Bildschirmtyp abdecken kann. Deshalb gibt es verschiedene Ansätze diese Problematik zu lösen. Heute sind das „Fluid Layout“, das „Adaptive Layout“ und die Kombination aus beidem, das „Responsive Layout“, die üblichsten Konzepte, die im Folgenden kurz erläutert werden. Der Mobile-First-Ansatz beschreibt eine mögliche und weit verbreitete Reihenfolge in der Vorgehensweise bei der Entwicklung eines Weblayouts.

1.2.1. Fluid Layout

Ein Fluid Layout verzichtet vollständig auf feste Breitenangaben. Es werden ausschließlich relative Größenangaben, wie beispielsweise Prozent, für Elemente vergeben.4 Möchte man zum Beispiel zwei Boxen nebeneinander platzieren, die das komplette Browserfenster ausfüllen, erzeugt man zwei Elemente mit einer Breitenangabe von 50%. Damit teilen sich beiden Elemente, unabhängig von der Bildschirmgröße, den zur Verfügung stehenden Bereich 50:50 auf. Durch diese relativen Größenangaben fließt das Layout mit der Auflösung mit.

1.2.2. Adaptives Layout

Bei einem Adaptiven Design setzt man so genannte „Breakpoints“, bei denen sich das Layout in verschiedenen Stufen sprunghaft ändert. Beispielsweise erstellt man drei verschiedene Layout-Varianten für Smartphones, Tablets und PCs. Sobald die Bildschirmbreite eine definierte Auflösung überschreitet springt das Layout um, auf die Tablet oder PC-Variante.5 Die Änderung erfolgt dabei nicht fließen, sondern ändert sich Schlagartig beim Erreichen einer vorab definierten Bildschirmauflösung.

1.2.3. Mobile-First-Ansatz

Bühler, Schlaich und Sinner beschreiben den Mobile-First-Ansatz damit, dass das Design einer Webanwendung zuerst für Mobile-Endgeräte, später für Monitore optimiert wird.6 Da mittlerweile die meisten Zugriffe auf Webseiten von Smartphones und nicht mehr, wie früher von PCs erfolgen, ist dieser Ansatz weit verbreitet. Eine weitere Vorgehensweise wäre, der Ansatz bei dem zuerst das Layout für PCs, später für Smartphones entwickelt wird. Dieser Ansatz wird hier jedoch nicht weiter erläutert.

1.2.4. Die Problematik der einzelnen Konzepte

Die Problematik eines reinen Fluid Layouts, sind die immer schmaler werdenden Elemente.[4] Irgendwann wird beispielsweise das Navigationsmenü so sehr zusammengepresst, dass darin liegender Text nicht mehr gelesen werden kann. Das gleiche Problem ergibt sich bei großen Bildschirmen. Durch die zunehmende Bildschirmbreite werden die Elemente immer größer und darin liegender Text füllt Diese nicht mehr aus. Für das Auge des Betrachters wird diese Webseite unansehnlich und das Design wirkt unproportioniert.

Bei einem rein adaptiven Layout ist es nur erschwert möglich alle Bildschirmtypen abzudecken. Dafür müsste man eine fast unendlich lange Liste an möglichen Designvarianten programmieren um jede Eventualität abdecken zu können. Zusätzlich ist ein Design nur auf eine definierte Auflösung zugeschnitten, alle Auflösungen zwischen den einzelnen Breakpoints werden nicht vollständig abgedeckt und das Design wirkt dort oft verzerrt.

1.3. Das Responsive Layout

Aus den oben genannten Problemen lässt sich ableiten, dass jede der genannten Varianten alleine keine zufriedenstellende Lösung darstellt. Deshalb ist es empfehlenswert eine Kombination aus allen Varianten zu nutzen. Webentwickler tendieren heutzutage zum so genannten Responsive Webdesign, bei dem eine Webseite so programmiert wird, dass sich das Layout dynamisch an den Bildschirm des Nutzers anpasst. Es wird auf „feste Breitenangaben verzichtet“, sodass sich das Layout stufenlos an die Bildschirmbreite des Anwenders anpassen kann.7 Dieser Ansatz stammt aus dem Fluid Layout. Zusätzlich setzt man Breakpoints, wie bei einem Adaptiven Layout, um auch größere Unterschiede abdecken zu können. Dieses Vorgehen kombiniert beide oben erläuterten Varianten und wird als Responsive Webdesign bezeichnet. Beispielsweise wird für Smartphones ein Einspaltiges, für Tablets ein Zweispaltiges und für PCs ein Dreispaltiges Design erzeugt. Das bedeutet das Layout skaliert sich fließend mit der Bildschirmauflösung des Endgeräts und bei einer vordefinierten Bildschirmbreite springt das Layout beispielsweise von einem Zweispaltigen auf ein Dreispaltiges Design um.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 1: Responsives Design auf verschiedenen Endgeräten (eigene Abbildung)

Die Abbildung 1 zeigt beispielhaft die Umsetzung des Navigationsmenüs eines Online-Shops auf verschiedenen Endgeräten nach dem Mobile-First-Ansatz. Auf dem Smartphone werden wegen der geringen Bildschirmbreite alle Elemente untereinander dargestellt. Das Tablet im Hochformat stellt ein Zweispaltiges Design dar und auf dem PC-Bildschirm werden alle Elemente in einer Spalte dargestellt. Die Breakpoints definieren ab welcher Auflösung, es zu einem Zweispaltigen und ab welcher Auflösung es zu einem Einspaltigen-Design umspringt.

1.3.1. Nutzung der Vorteile für einen Online-Shop

Vor allem für die Produktpräsentation in einen Online-Shop ist die Umsetzung eines Responsive Webdesign sinnvoll und nahezu unverzichtbar. Durch ein Responsive Layout können deutlich mehrere Zielgruppen angesprochen werden. Nach einer Studie des Magazins ecommerce-news, werden in Deutschland 41,5% aller Online-Käufe mit dem Smartphone getätigt. In den USA, den Niederlanden und England sogar über 50%.8 Diese Zahlen zeigen, dass der Smartphone-Anwender in der Entwicklung eines Online-Shops zwingend berücksichtigt werden muss, da man sonst fast die Hälfte des potentiellen Umsatzes einbüßen müsste. Da die Entwicklung einer Smartphone-App, die alle mobilen Betriebssysteme abdecken würde, deutlich kostspieliger wäre, ist eine Responsive Webseite eine gute Alternative.

1.4. Technische Umsetzung

1.4.1. Trennung von Inhalt und Layout

In der Entwicklung von Webseiten wird eine strikte Trennung von Inhalt und Layout verfolgt.9 Dadurch wird es möglich, das Layout problemlos zu ändern und auf alle möglichen Endgeräte anzupassen. Beim Inhalt bietet dieses Vorgehen deutlich mehr Flexibilität wodurch es möglich wird Inhalte dynamisch zu generieren und an den Anwender anzupassen. Vor allem für einen Online-Shop ist die Einhaltung dieses Vorgehens unverzichtbar, da der Inhalt dynamisch generiert werden muss.

Der Inhalt

Da der Inhalt strikt vom Layout getrennt wird, ergeben sich mehrere Möglichkeiten den Inhalt einer Webseite zu verwalten. Für kleinere Webseiten wird oft eine „Statische Struktur“ verwendet, die den gesamten Inhalt auf mehrere „.html“ Dateien verteilt. Größere Webseiten verwenden meist eine „Dynamische Struktur“, bei der der gesamte Inhalt in einer Datenbank abgelegt und von der Webseite daraus geladen wird.10 Häufig kommen auch so genannte „Content Management Systeme“ zum Einsatz, die es dem Anwender ermöglichen, ohne Programmierkenntnisse den Inhalt des Webauftritts zu verwalten. Häufig wird das CMS-System „Wordpress“ eingesetzt, dass mit 59,3 % Marktvolumen eines der meist verbreiteten CMS-Systeme ist.11 Gerade bei einem Online-Shop ist eine einfache Verwaltung der Inhalte notwendig, um schnell und unkomplizierte neue Produkte einzustellen oder alte Produkte zu entfernen.

Das Layout

Seit 1996 gibt es die Sprache „css“ mit der das Layout einer „html“-Seite beschrieben werden kann. In dieser Sprache wird das gesamte Aussehen einer Webseite, wie Farben, Größen und Schriftarten beschrieben. Dabei stehen dem Entwickler viele mögliche Werkzeuge zur Umsetzung des Designs zur Verfügung.12 Der css-Code für das Layout wird in ein so genanntes Stylesheet geschrieben, das üblicherweise in einer Datei namens „style.css“ gespeichert wird. Würde man das Stylesheet durch ein anderes ersetzen, kann das gesamte Aussehen einer Webseite verändert werden. Im html-Skript gibt man jedem Element einen Namen. Verwendet wird hierfür das class oder das id-Attribut. Im Stylesheet wird diesen Elementen später ein Name zugeordnet. So benennt man Elemente, die mehrmals vorkommen mit Hilfe des class-Attributes und Elemente, die nur einmalig vorkommen mit dem id-Attribut. Zusätzlich ist es möglich alle in html vorkommende Element direkt anzusprechen und ihnen ein Aussehen zuordnen. Somit ist es möglich, das Layout völlig unabhängig vom Inhalt der Webseite aufzubauen und zu verändern. Gerade bei Online-Shops die ständig Kunden anlocken möchten, ist das Aussehen ein sehr wichtiges Element. Die schnelle Anpassung an neue Designtrends ist daher sehr wichtig. Dank des hier beschriebenen Vorgehens wird das schnelle Verändern des Designs ermöglicht.

[...]


1 Vgl. Mayer A (2014), S. 7, 8

2 Net-now.de (2012)

3 Vgl. Heinmann A (2018) S.69

4 Vgl. Bühler P (2017): Webdesign S.49

5 Vgl. Bühler P (2017): Webdesign S.50

6 Vgl. Bühler P (2017): Webdesign S.52

7 Vgl. Selfhtml (2018)

8 Vgl. ecommerce

9 Vgl. Bühler P (2017): Webdesign. S.13

10 Vgl. Bühler P. (2017) Webdesign S.13-14

11 Vgl. Bühler P (2017) Webdesign S.15

12 Vgl. Bühler P (2017): HTML 5 und CSS 3. S.44

Details

Seiten
7
Jahr
2018
ISBN (eBook)
9783346114426
Sprache
Deutsch
Katalognummer
v512366
Institution / Hochschule
Hochschule für angewandte Wissenschaften München
Note
1,1
Schlagworte
problematik umsetzung responsive webdesigns

Autor

Zurück

Titel: Problematik und Umsetzung des Responsive Webdesigns