wie kann mit hilfe von responsive webdesign …...bachelorarbeit wie kann mit hilfe von responsive...

WIE KANN MIT HILFE VON RESPONSIVE WEBDESIGN (RWD) DIE USABILITY VON WEBSITES VERBESSERT WERDEN?

BACHELORARBEIT

HENDRIK HARMSEN

Bachelorarbeit

Wie kann mit Hilfe von Responsive Webdesign (RWD) die Usability von Websites verbessert werden?

eingereicht von Hendrik Harmsen

Matrikelnummer: 12272415

Hochschule München Fakultät 05

Technische Redaktion und Kommunikation

im Rahmen des Studiengangs Technische Redaktion und Kommunikation

betreut durch Prof. Dr. Anke van Kempen

München, 14. September 2018

Erklärung i. S. des § 35 Abs, 7 RaPO

Hendrik Harmsen, Technische Redaktion und Kommunikation, SoSe18 i

Erklärung i. S. des § 35 Abs, 7 RaPO

Ich, Hendrik Harmsen, erkläre, dass ich die vorliegende Bachelorarbeit selbstständig ver-fasst, noch nicht anderweitig für Prüfungszwecke vorgelegt, keine anderen als die angege-benen Quellen oder Hilfsmittel benutzt sowie wörtliche und sinngemäße Zitate als solche gekennzeichnet habe.

München, 13.09.2018 Hendrik Harmsen

Danksagung

Hendrik Harmsen, Technische Redaktion und Kommunikation, SoSe18 ii

Danksagung

Die Bachelorarbeit entstand im Rahmen meines Studiums der Technischen Redaktion und Kommunikation an der Hochschule München. Die Idee zu diesem Thema entwickelte sich während eines Workshops im Modul der Blogredaktion. Dabei konzeptionierte eine Gruppe Studierende einen Technik-Blog für mobile Endgeräte. Hierbei übernahm ich den gestalte-rischen Teil und kam somit erstmals mit dem Thema des Responsive Webdesigns in Kon-takt.

An dieser Stelle möchte ich mich bei all denjenigen bedanken, die mich während der Anfer-tigung dieser Bachelorarbeit tatkräftig unterstützt und motiviert haben.

Ein ganz besonderer Dank gilt Prof. Dr. Anke van Kempen und Katharina Rasp, die mich so-wohl durch kritisches Hinterfragen als auch durch wertvolle Hinweise mit viel Engagement begleitet und betreut haben. Die moralische Unterstützung und Motivation haben mich dazu gebracht, über meine Grenzen hinaus zu denken. Insbesondere möchte ich mich bei Katharina Rasp bedanken, die durch Ihre herausragende Expertise und fachliche Kompe-tenz die Ausarbeitung dieses Thema überhaupt ermöglichte.

Des Weiteren danke ich meiner Familie, insbesondere meinen Eltern, die mir mein Studium ermöglicht und mich in all meinen Entscheidungen unterstützt haben. Auch danke ich mei-nem Partner, der mich während dieser Zeit immer wieder ermutigte und mit vielen nützli-chen Tipps zur Seite stand.

München, im September 2018

Hendrik Harmsen

Abstract

Hendrik Harmsen, Technische Redaktion und Kommunikation, SoSe18 iii

Abstract

With the steadily increasing number of mobile devices, such as smartphones and tablets, the mobile Internet use and thus the requirements on websites with respect to their usa-bility increases. As a result, websites must be adapted for use on different devices as well as user needs.

The aim of this thesis is to evaluate how Responsive Web Design can improve the usability of websites. The basis for this is a norm and literature research. Both, technical require-ments, such as different screen sizes and resolutions, as well as user-specific require-ments, such as viewing distance to the device and the user’s visual acuity, were identified and described for responsive websites. These requirements were explained using the cur-rent technical implementation possibilities of Responsive Webdesign.

The thesis deals in particular with the legibility of displayed contents on a website, since this is the greatest need for optimization with respect to usability. Legibility includes all ty-pographical factors, such as font size, line length, and line spacing, that affect the legibility of a text on the Web. For this purpose, a specially created catalogue of criteria was devel-oped to help ensure readability on reactive websites.

The results of this thesis show that the basic techniques of responsive web design contrib-ute to improve the usability of websites. In particular, by using flexible layouts, flexible me-dia and media queries, it is possible to adapt the legibility of a website to a wide variety of devices.

Kurzfassung

Hendrik Harmsen, Technische Redaktion und Kommunikation, SoSe18 iv

Kurzfassung

Mit der stetig wachsenden Anzahl von mobilen Endgeräten, wie Smartphones und Tablets, steigt die mobile Internetnutzung und somit auch die Anforderungen an Websites hinsicht-lich ihrer Gebrauchstauglichkeit (Usability). Daraus folgt, dass Websites sowohl an den Ge-brauch auf unterschiedlichen Geräten als auch an die Bedürfnisse der Nutzer angepasst werden müssen.

Das Ziel dieser Arbeit ist es zu bestimmen, mit welchem Möglichkeiten des Responsive Webdesigns die Gebrauchstauglichkeit von Websites verbessert werden kann. Die Grund-lage dabei bildet eine Normen- und Literaturrecherche. Hierbei wurden sowohl technische Erfordernisse, wie beispielsweise die unterschiedlichen Bildschirmgrößen und -auflösun-gen, als auch nutzerspezifische Anforderungen, wie der Betrachtungsabstand zum Gerät und die Sehschärfe des Nutzers, an reaktionsfähigen Websites identifiziert und beschrie-ben. Diese Anforderungen wurden anhand der derzeitig technischen Umsetzungsmöglich-keiten des Responsive Webdesigns erläutert.

Dabei geht die Arbeit im speziellen auf die Leserlichkeit von dargestellten Inhalten einer Website ein, da hier hinsichtlich der Usability der größte Optimierungsbedarf besteht. Die Leserlichkeit umfasst alle typografischen Faktoren, wie zum Beispiel die Schriftgröße, die Zeilenlänge und den Zeilenabstand, welche die Leserlichkeit eines Textes im Web beein-trächtigen. Daher wurde aus diesen Faktoren ein Kriterienkatalog entwickelt, der die Leser-lichkeit auf reaktionsfähigen Websites sicherstellen soll.

Die Ergebnisse der Arbeit zeigen, dass die grundlegenden Techniken des Responsive Web-designs zur Verbesserung der Usability auf Websites beitragen. Insbesondere durch die Verwendung von flexiblen Layouts, flexiblen Medien und Media Queries ist es möglich die Leserlichkeit einer Website auf die unterschiedlichsten Geräte anzupassen.

Hinweise zur sprachlichen Ausführung

Hendrik Harmsen, Technische Redaktion und Kommunikation, SoSe18 v

Hinweise zur sprachlichen Ausführung

Aus Gründen der besseren Lesbarkeit wird auf die gleichzeitige Verwendung männlicher und weiblicher Sprachform verzichtet. Sämtliche Personenbezeichnungen in dieser Arbeit gelten gleichwohl für beiderlei Geschlecht.

Abkürzungsverzeichnis

Hendrik Harmsen, Technische Redaktion und Kommunikation, SoSe18 vi

Abkürzungsverzeichnis

CSS Cascading Style Sheets

CSS3 CSS, Version 3

DIN Deutsches Institut für Normung

DSL Domain Specific Language

EDGE Enhanced Data Rates for GSM Evolution

EN Europäische Norm

GPRS General Packet Radio Service

GSM Global System for Mobile Communication

HSDPA High Speed Download Packet Access

HTML Hypertext Markup Language

HTML5 HTML, Version 5

ISO International Organization for Standardization

JS JavaScript

LTE Long Term Evolution

ML Markup Language

ME Mobile Endgeräte

MQ Media Queries

RWD Responsive Webdesign

UMTS Universal Mobile Telecommunications System

UX User Experience

WLAN Wireless Local Area Network

WWW World Wide Web

W3C World Wide Web Consortium

XML Extensible Markup Language

Inhaltsverzeichnis

Hendrik Harmsen, Technische Redaktion und Kommunikation, SoSe18 vii

Inhaltsverzeichnis

Erklärung i. S. des § 35 Abs, 7 RaPO i

Danksagung ii

Abstract iii

Kurzfassung iv

Hinweise zur sprachlichen Ausführung v

Abkürzungsverzeichnis vi

Inhaltsverzeichnis vii

1. Einleitung 1 1.1. Problemstellung ........................................................................................................ 1 1.2. Zielsetzung ................................................................................................................ 3 1.3. Abgrenzung ............................................................................................................... 4 1.4. Methodik ................................................................................................................... 5

2. Usability im Webdesign 6 2.1. Begriffsdefinition ....................................................................................................... 6 2.2. DIN EN ISO 9241 „Ergonomie der Mensch-System-Interaktion“ .................................. 7 2.2.1. DIN EN ISO 9241-11 „Anforderungen an die Gebrauchstauglichkeit“ ................................ 7 2.2.2. DIN EN ISO 9241-110 „Grundsätze der Dialoggestaltung“ ................................................. 9 2.2.3. DIN EN ISO 9241-112 „Grundsätze der Informationsdarstellung“ .................................... 11 2.2.4. Zusammenhang der Normenteile ..................................................................................... 14 2.3. DIN 1450 „Leserlichkeit“ .......................................................................................... 15 2.4. Konventionen im Webdesign ................................................................................... 20

3. Anforderungen an das Responsive Webdesign 24 3.1. Technische Erfordernisse ........................................................................................ 25 3.1.1. Bildschirmgrößen/-auflösungen ....................................................................................... 25 3.1.2. Datenübertragung ............................................................................................................. 29 3.2. Nutzerspezifische Anforderungen ........................................................................... 31 3.2.1. Mobiler Kontext ................................................................................................................. 31 3.2.2. Interaktionsmöglichkeiten ................................................................................................ 32

Inhaltsverzeichnis

Hendrik Harmsen, Technische Redaktion und Kommunikation, SoSe18 viii

3.2.3. Visus .................................................................................................................................. 34

4. Grundlegende Techniken für Responsive Webdesign 35 4.1. Layout ..................................................................................................................... 36 4.1.1. Grid und Breakpoints ......................................................................................................... 36 4.1.2. Layouttypen ....................................................................................................................... 40 4.2. Flexibel Bilder und Medien ....................................................................................... 45 4.2.1. Grundlage .......................................................................................................................... 45 4.2.2. Herausforderungen ........................................................................................................... 46 4.2.3. Implementierung ............................................................................................................... 47 4.3. Media Queries (MQ)................................................................................................. 50 4.3.1. Grundlage .......................................................................................................................... 50 4.3.2. Syntax ................................................................................................................................ 51 4.3.3. Viewport ............................................................................................................................ 54 4.4. Reaktionsfähige Webtypografie ............................................................................... 55 4.4.1. Schriftgröße....................................................................................................................... 56 4.4.2. Zeilenlänge ........................................................................................................................ 63 4.4.3. Zeilenabstand .................................................................................................................... 64 4.4.4. Kontrast ............................................................................................................................. 66 4.5. Navigationskonzepte ............................................................................................... 67 4.5.1. Anspruch und Grundlage .................................................................................................. 67 4.5.2. Aktuelle Navigationskonzepte .......................................................................................... 68

5. Kriterienkatalog 73

6. Fazit 77 6.1. Zusammenfassung und Schlussfolgerung............................................................... 77 6.2. Kritische Würdigung ................................................................................................ 80

Literaturverzeichnis 82

Abbildungsverzeichnis 87

Tabellenverzeichnis 88

Code-Beispielverzeichnis 89

Inhaltsverzeichnis

Hendrik Harmsen, Technische Redaktion und Kommunikation, SoSe18 ix

Anhang 90 Schriftgrößenberechnung ................................................................................................... 90 Formeln .......................................................................................................................................... 90 Beispielrechnung ........................................................................................................................... 91

1. Einleitung

1.1. Problemstellung

Hendrik Harmsen, Technische Redaktion und Kommunikation, SoSe18 1

1. Einleitung


„Responsive Webdesign wird nicht länger heißen, auf das Gerät zu reagieren, sondern auf den Benutzer.“ (Markus Janitz, t3n Magazinausgabe Nummer 32)

In den letzten Jahren ließ sich beobachten, dass nicht nur die Anzahl und Vielfalt internetfähiger Endgeräte wuchs, sondern auch der Um-fang der Internetnutzung mit diesen rasant zunahm. Dabei rückte das mobile Web immer mehr in den Vordergrund und ist heute kaum noch aus unserem Alltag wegzudenken.

Hinsichtlich des mobilen Wachstums hatte Ethan Marcotte, ein ame-rikanischer Designer und Entwickler, bereits im Mai 2010 im Artikel „Responsive Webdesign“ im Webmagazin „A List Apart“ für ein neues Verständnis von Webdesign geworben und sorgte damit innerhalb der Branche für ein Umdenken. Er erkannte das Problem, dass sich seit Einführung des iPhones im Jahr 2007 das Web nicht nur mehr von klassischen Desktop-PCs genutzt wird, sondern auch vermehrt von mobilen Endgeräten. Hinzu kam die wachsende Verbreitung von Tab-let-Computern, E-Book Readern und internetfähigen TV-Geräten.

Eine Erhebung des Statistischen Bundesamtes aus dem Jahr 2016 belegt, dass bereits 81% der rund 62 Millionen Internetnutzer Smart-phones verwenden, um online zu gehen. Daraus folgt, dass zuneh-mend mobile Endgeräte als Alternativgeräte zu herkömmlichen Desk-top-PCs verwendet werden und somit reaktionsfähige Websites immer mehr an Bedeutung gewinnen.

1. Einleitung



„[Im Folge des Wandels wird] immer unklarer […], unter welchen Bedingungen ein Nutzer eine Website wahrnimmt und gleichzeitig steigen die Anforderungen an [die User Experience], [die] Usability und [die] Performance.“ (Ertel & Laborenz, 2016, S. 22)

Dabei lässt sich die User Experience (UX) beziehungsweise die Usa-bility einer herkömmlichen, für stationäre Desktop-PCs und Laptops entwickelten Website nicht auf mobile Endgeräte übertragen, da diese grundlegende technische Unterschiede aufweisen.

Während früher für diese spezielle Form der Internetnutzung, parallel zur Desktopvariante, oft mobile Websites bereitgestellt wurden, ist dies heutzutage kaum mehr praktikabel, da es mit einem erheblichen Entwicklungsaufwand einhergeht. Somit müssen Websites nicht mehr nur auf ihre jeweilige Abrufumgebung angepasst reagieren kön-nen, sondern auch durch reaktionsfähige Designs auf unzähligen mo-bilen Endgeräten weitestgehend angepasst sein. Dazu gehört neben einem stimmigen Design auch, dass beispielsweise Texte gut lesbar sind.

Das stellt sowohl Entwickler als auch Designer vor eine große Her-ausforderung. Oft sind Websites auf den unterschiedlichen mobilen Endgeräten, die über eine unendliche Variation an Auflösungen, Browserversionen und Kompatibilität bezüglich Standards verfügen, nicht performant auszugeben. Der bisherige Standard, eine statische Website nach einem mit dem Kunden vereinbarten Designvorschlag zu entwickeln unterliegt dem Wandel und wird diesen Anforderungen nicht mehr gerecht.

Aufgrund dessen richtet sich der Schwerpunkt auf die Gestaltung und Programmierung von Websites, die auch auf mobilen Endgeräten op-timal dargestellt werden. Dabei müssen sich die Inhalte den jeweili-gen Bildschirmgrößen und -auflösungen anpassen, um eine geräte-übergreifende Usability der Website zu gewährleisten.

1. Einleitung

1.2. Zielsetzung


1.2. Zielsetzung

Hinsichtlich des mobilen Wachstums und den damit verbundenen veränderten Anforderungen an die Usability von Websites ist es uner-lässlich geworden sich mit dem Responsive Webdesign auseinander-zusetzen, um eine Website benutzerfreundlich auf aktuellen und kommenden Geräten performant auszurichten. Aus diesem themati-schen Kontext ergibt sich folgende Fragestellung, die im Rahmen der Bachelorarbeit untersucht wird:

Wie kann mit Hilfe von Responsive Webdesign (RWD) die Usability von Websites verbessert werden?

Dabei lassen sich folgenden Unterfragen definieren:

Welche Usability-Kriterien sind für reaktionsfähige Websites rele-vant?

Welche Anforderungen stellen die Nutzer an die Usability eine Web-site?

Was bedeutet Leserlichkeit auf verschiedenen Bildschirmgrößen?

Welche Konzepte für Zugriffs- und Navigationsmöglichkeiten beste-hen für verschiedene Bildschirmgrößen?

Welche technischen Erfordernisse bestehen für reaktionsfähige Web-sites?

Welchen Auswirkungen hat die Usability auf Websites?

Dabei liefert die Beantwortung der einzelnen Fragen wichtige Er-kenntnisse über die Auswirkung von Responsive Webdesign auf die Usability von Websites. Das Ziel der Bachelorarbeit ist es, einerseits die Erkenntnisse über die Auswirkung aufzuzeigen und andererseits diese in Form eines Kriterienkatalogs aufzubereiten. Der Kriterienka-talog stützt sich dabei auf die Untersuchung der Anforderungen von Nutzern als auch auf technischen Erfordernissen. Der Kriterienkata-log soll Laien und/oder Experten dazu befähigen, anhand bestimmter Kriterien die Usability von Websites schnell und einfach beurteilen zu

Forschungsfrage

1

2

2.1

2.2

3

4

1. Einleitung

1.3. Abgrenzung


können. Gleichzeitig untersucht damit die Bachelorarbeit folgende Hypothesen:

• Responsive Webdesign (RWD) verbessert die Usability von Web-sites.

• Der erstellte Kriterienkatalog hilft Unternehmen und Privatperso-nen bei der Beurteilung reaktionsfähiger Websites hinsichtlich ih-rer Usability.

Gleichzeitig soll dem Leser die Notwendigkeit des Themas, die Vor-teile von Responsive Webdesign vermitteln werden und dazu er-mu-tigen in Zukunft reaktionsfähige Websites zu entwickeln.

1.3. Abgrenzung

Die vorliegende Arbeit behandelt ausschließlich den Ansatz Respon-sive Webdesign, dessen technische Umsetzung mittels HTML5 und CSS3 erfolgt. Weiterhin wird der Zusammenhang der Usability für die-sen Ansatz untersucht. Aufgrund des umfangreichen Themengebiets sind benachbarte Themen, wie mobile Websites, Apps etc. explizit von der Arbeit ausgeschlossen. Auch ist die prototypische Umsetzung beziehungsweise Entwicklung einer reaktionsfähigen Website nicht Gegenstand dieser Arbeit.

Die Arbeit erhebt keinerlei Anspruch auf Vollständigkeit hinsichtlich vorgestellter Inhalte und Techniken, da das Thema einem signifikan-ten Wandel unterliegt.

Hypothesen

1. Einleitung

1.4. Methodik


1.4. Methodik

Das erste Kapitel bildet die Einleitung und soll die Ausgangslage die-ser Arbeit beschreiben. Hierbei wird die Problematik beziehungs-weise die Bedeutsamkeit von Usability im Web aufgezeigt und im Kontext des Responsive Webdesigns betrachtet. Anschließend wer-den die damit verbundenen Ziele dieser Arbeit vermittelt.

Im zweiten Kapitel wird der Begriff Usability definiert. Darauf aufbau-end werden in diesem Zusammenhang wichtige Normen, wie bei-spielsweise die DIN EN ISO 9241 „Ergonomie der Mensch-System-Interaktion“ und DIN 1450 „Leserlichkeit“, vorgestellt und beschrie-ben. Danach werden herrschende Konventionen im Webdesign be-trachtet.

Im dritten Kapitel werden aus der Fachliteratur sowohl technische Erfordernisse als auch nutzerspezifische Anforderungen an reaktions-fähige Websites identifiziert. Dazu zählen beispielsweise die unter-schiedlichen Bildschirmgrößen und -auflösungen sowie der rezepti-onsbedingte Betrachtungsabstand. Die Anforderungsanalyse ist dabei essenzielle für den Kriterienkatalog.

Im vierten Kapitel werden die grundlegenden Techniken des Respon-sive Webdesigns vorgestellt und behandelt. Dabei werden die zuvor identifizierten Anforderungen mit den derzeitigen technologischen Lösungsmöglichkeiten des Responsive Webdesigns abgeglichen und im Detail beschrieben.

Im fünften Kapitel wird auf Basis der zuvor behandelten Kapitel der Kriterienkatalog erstellt. Anhand dessen lässt sich ableiten, welche Kriterien der DINs, die eingangs beschrieben wurden, optimiert wer-den müssen, um die Usability von Websites zu steigern.

Im sechsten Kapitel werden die wichtigsten Erkenntnisse der Arbeit noch einmal zusammengefasst und die Forschungsfrage beantwortet.

2. Usability im Webdesign

2.1. Begriffsdefinition



2.1. Begriffsdefinition

Der Begriff Usability stammt aus dem Englischen und lässt sich von den Begriffen „to use“ (dt. benutzen) und „ability“ (dt. Möglichkeit) herleiten (vgl. Rohles, 2017, S. 40). Häufig werden im deutschen Sprachgebrauch die Begriffe Benutzerfreundlichkeit, Benutzungs-freundlichkeit oder auch Benutzbarkeit als Synonyme für Usability verwendet. Die internationale Norm DIN EN ISO 9241-11 definiert den Begriff Usability wie folgt:

„Usability ist das Ausmaß, in dem ein Produkt durch bestimmte Benutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen.“ (DIN EN ISO 9241-11, 2017, S. 13)

Aus dieser Definition geht hervor, dass die Usability als Maßstab ver-standen werden kann, der qualitativ und quantitativ bestimmt, wie der Nutzer mit dem Produkt, in diesem Fall der Website, zurecht-kommt. Dabei legt der Maßstab fest in welchem Maße die vom Nutzer definierten Ziele in einem bestimmten Nutzungskontext effektiv, effi-zient und zufriedenstellend erreicht werden. Somit ist die Usability immer an den aktuellen Nutzungskontext gebunden. Zum aktuellen Nutzungskontext zählen sowohl die Eigenschaften der Menschen (Al-ter, Bildung, Vorkenntnisse etc.) als auch die Aufgabenstellung (An-lass, Ziel, Häufigkeit etc.), die Umgebung der Nutzung (Lichtverhält-nisse, Geräusche etc.) und die Eigenschaften der Endgeräte (Bild-schirmgröße/-auflösung, Bandbreite etc.).

Damit ist die Usability eine Eigenschaft einer Website, die die Nutz-barkeit festlegt. Eine hohe Usability erleichtert folglich den Um-gang/Nutzung mit der Website, wohingegen eine geringe Usability diesen erschwert. Die Usability bezieht sich immer auf den Anwender


2.2. DIN EN ISO 9241 „Ergonomie der Mensch-System-Interaktion“


und kann als Hilfestellung verstanden werden. Daher ist es zur unver-zichtbaren Aufgabe des Entwicklers geworden sich damit auseinan-derzusetzen.


Im Hinblick auf die Usability einer Website ist die Norm DIN EN ISO 9241 „Ergonomie der Mensch-System-Interaktion“ maßgeblich, da sie zum einen relevante Fachbegriffe definiert und zum anderen be-währte Arbeitsabläufe beschreibt. Daraus lassen sich Anforderungen an die Systeme (hier Websites) ableiten, die in Form der Norm als Richtlinie und Empfehlung verstanden werden können. Das überge-ordnete Ziel der Norm ist, die gesundheitlichen Schäden des Nutzers beim Arbeiten am Bildschirm zu vermeiden und ihn in der Ausführung seiner Aufgaben zu unterstützen. (vgl. Jacobsen & Meyer, 2018, S. 34 & 61)

1996 wurde die DIN EN ISO 9241 von der International Standardiza-tion Organization (ISO) verabschiedet und in die European Norm (EN) eingearbeitet. Danach hat das Deutsche Institut für Normung (DIN) diese übernommen. Um die Einschränkung auf Büroarbeiten aufzu-heben wurde sie 2006 in „Ergonomie der Mensch-System-Interak-tion“ umbenannt. (vgl. Heinecke, 2012, S. 42)

Zurzeit besteht die Normenreihe aus insgesamt 38 Teilen, die konti-nuierlich überarbeitet werden. Für die Gestaltung von Websites hin-sichtlich der Usability sind die Normenteile 11, 110 und 112 die wichtigsten, die im nachfolgenden näher erläutert werden.

2.2.1. DIN EN ISO 9241-11 „Anforderungen an die Gebrauchstauglichkeit“

Der Normenteil 11 beschäftigt sich mit den allgemeinen Anforderun-gen der Gebrauchstauglichkeit eines interaktiven Systems, wie Web-sites, und beschreibt folgende grundlegende Eigenschaften, die aus




der in Abschnitt 2.1 erwähnten Definition hervorgehen (vgl. DIN EN ISO 9241-11, 2017, S. 16ff. und Keßler et al., 2015, S. 411ff.):

Die Effektivität beschreibt die Genauig- und Vollständigkeit mit denen der Nutzer die definierten Ziele auf der Website erreicht. Dafür muss der Nutzer in seiner Zielerreichung optimal unterstützt werden, wie zum Beispiel durch Such-, Filter- und Sortiermöglichkeiten. Somit ist eine Website effektiv, wenn der Nutzer sein Ziel erreicht. Beispiels-weise könnte dies das Bestellen einer Ware auf der Website sein.

Die Effizienz beschreibt das Verhältnis der eingesetzten Ressourcen an Zeit und Aufwand, die der Nutzer einer Website leisten muss, um sein Ziel möglichst schnell und problemlos zu erreichen. Das Suchen nach einer bestimmten Information oder einem Produkt benötigt bei-spielsweise zum einen wenig Zeit und zum anderen wenig Klicks.

Die Zufriedenheit setzt sich sowohl aus der Effektivität als auch der Effizienz zusammen und beschreibt die Wahrnehmung und Reaktion des Nutzers gegenüber der Website. Das heißt, dass der Nutzer seine Ziele mit einem verhältnismäßig niedrigen Aufwand und einem zufrie-denstellenden Ergebnis erledigen kann. Somit beschreibt die Zufrie-denheit immer eine subjektive Eigenschaft.

„Die drei Eigenschaften stehen in einem hierarchischen Verhältnis zueinander: Effektivität ist wichtiger als Effizienz, und Effizienz ist wichtiger als die Zufriedenheit.“ (Hahn, 2017, S. 119)

Daraus geht hervor, dass ein schönes Design und eine besondere Funktionalität der Website dem Nutzer wenig bringen, wenn er sein definiertes Ziel nicht erreichen kann. Somit sollten alle drei Eigen-schaften in einem bestimmten Nutzungskontext gegeben sein, sodass der Nutzer die Website als benutzerfreundlich wahrnimmt. In der Praxis bedeutet das, dass beispielsweise die Inhalte einer Web-site sinnvoll gegliedert und in eine nachvollziehbare Navigations-

Effektivität

Effizienz

Zufriedenheit




struktur gebracht werden müssen. Damit wirken sich die drei Eigen-schaften auf alle Bereiche des Webdesign-Prozesses aus. (vgl. Hahn, 2017, S. 120f.)

Die beschriebenen Eigenschaften lassen sich zusammenhängend in der nachfolgenden Abbildung darstellen und erweitern darüber hin-aus den Nutzungskontext zum Nutzer (s. Abbildung 2.1). Aus dieser Erweiterung wird noch einmal deutlich, dass der Nutzer mit seinen Arbeitsabläufen im zentralen Fokus der Mensch-System-Interaktion steht.

(Quelle: DIN EN ISO 9241-11, 2017, S. 14)

Abbildung 2.1 Anwendungsrahmen der Usability nach DIN ISO EN 9241-11

2.2.2. DIN EN ISO 9241-110 „Grundsätze der Dialoggestaltung“

Der Normenteil 110 widmet sich der ergonomischen Dialoggestal-tung von Benutzungsschnittstellen interaktiver Systeme, wie Web-sites, in Form von sieben Grundsätzen und ersetzt seit 2006 den da-mit bisherigen Teil 10 der Normenreihe.

Die Definition dieser Grundsätze basiert auf dem Artikel „User Percei-ved Quality of Interactive Systems“ von Dzida, Herda und Itzfeld aus dem Jahr 1978 (vgl. Dzida, Herda, & Itzfeldt, 1978 und Sarodnick & Brau, 2016, S. 34). Sie beschreiben die allgemeinen Grundsätze zur Inhaltsgestaltung, die für Websites essenziell sind.




Die Norm legt folgende Grundsätze dar (vgl. DIN EN ISO 9241-110, 2008, S. 4ff. und Jacobsen & Meyer, 2018, S. 61f.):

Die Website sollte den Nutzererwartungen entsprechen. Dabei sollte sie dem Nutzer eine angemessene und kontextsensitive Hilfestellung bieten, um sein definiertes Ziel unmittelbar zu erreichen.

Die Website sollte dem Nutzer kenntlich machen, wo er sich gerade befindet, wie er sein definiertes Ziel erreicht und welche Möglichkei-ten ihm dabei offenstehen. Eine klare und strukturierte Navigation so-wie verständliche Instruktionen können ihn dahingehend unterstüt-zen.

Die Website sollte sich dem Nutzer anpassen, damit er diese nach seinen Bedürfnissen steuern kann. Somit kontrolliert der Nutzer die Website und nicht andersherum. Dadurch kann der Nutzer seine ma-ximale Effektivität beziehungsweise Effizienz erreichen. Im spezifi-schen Anwendungsfall bedeutet dies, dass der Nutzer beispielsweise die Wiedergabe von multimedialen Inhalten nach Belieben einstellen kann.

Hierfür sollte sich die Website an allgemein anerkannte Konventionen halten, sodass der durchschnittlich informierte Nutzer nicht irritiert wird. Irritationen führen zur Unzufriedenheit des Nutzers und erhö-hen damit die Absprungrate zu Konkurrenz-Websites. Als Beispiel be-folgen Links auf Websites gewissen Standards und sind deutlich for-muliert, sodass der Nutzer weiß, was ihn erwartet.

Die Website sollte den Nutzer spezifisch auf Fehler hinweisen und ihm die Möglichkeit geben diese zu vermeiden. Damit beschreibt der Grundsatz die Fehlererkennung und -vermeidung einer Website. Der Nutzer sollte trotz fehlerhafter Eingaben mit keinem bis geringem Korrekturaufwand zu seinem definierten Ziel kommen.

Eine Website muss sich, basierend auf den individuellen Fähigkeiten und Bedürfnisse des Nutzers, anpassen können. Dabei richtet sich die gesamte Website ohne Einschränkung nach den Nutzerbedürfnissen.

Aufgabenange- messenheit

Selbstbeschrei-bungsfähigkeit

Steuerbarkeit

Erwartungs-konformität

Fehlertoleranz

Individualisier- barkeit




Auf die Praxis bezogen bedeutet das, dass Voreinstellungen und An-gaben des Nutzers auf der Website gespeichert werden, sodass diese beim erneuten Besuch nicht wieder eingegeben werden müssen.

Die Website sollte den Nutzer schrittweise und intuitiv in seiner Ziel-erreichung anleiten und unterstützen. Zum Beispiel können dem Nut-zer notwendige Angaben beim Ausfüllen eines Formulars mittels ei-ner Quick-Info oder in Form eines Musterformulars mitgeteilt werden.

2.2.3. DIN EN ISO 9241-112 „Grundsätze der Informationsdarstellung“

Der Normenteil 112 umfasst die Grundsätze der Informationsdarstel-lung, die für die Gestaltung und Bewertung von Benutzungsschnitt-stellen, wie Websites, gelten und löste damit im Jahr 2015 den Teil 12 ab.

In der Norm liegt der Fokus auf der Informationsdarstellung der so-genannten „Interaktionsmodalitäten“, wie der visuellen, akustischen und taktilen/haptischen Verarbeitung von Informationen des Men-schen. Zum Beispiel können Informationen vom Nutzer einer Website nur dann als lesbar empfunden werden, wenn diese ausreichend groß und in einem (Farb-) Kontrast dargestellt sind, die unter der Be-rücksichtigung gängiger Arbeitsbedingungen (Beleuchtung) erkenn-bar sind. Hierfür wird zwischen mehreren Darstellungsformen von In-formationen differenziert, wie etwa Text, Video und Audio. (vgl. Grünwied, 2017, S. 74)

Ähnlich zu den sieben Grundsätzen der Dialoggestaltung, die es für die ergonomische Gestaltung dynamischer Dialogabläufe einer Web-site gibt, existieren für die statische Informationsdarstellung fol-gende sieben Grundsätze (vgl. DIN EN ISO 9241-112, 2017, S. 15ff.):

Mit der Entdeckbarkeit dargestellter Informationen ist gemeint, dass die Informationen vom Nutzer als solche erkennbar sind. Folglich sollten Informationen die Aufmerksamkeit des Nutzers erregen und

Lernförderlichkeit

Entdeckbarkeit




zeitlich sinnvoll dargestellt werden. Stellt eine Website beispiels-weise eine Information unvollständig dar, muss sie dies dem Nutzer aufzeigen und ihn dahingehend unterstützen zu den restlichen Infor-mationen zu gelangen. Dabei können typografische Auszeichnungen hilfreich sein. Dazu gehören beispielsweise größerer, fett gedruckter Text oder eine optisch kontrastreichere Schrift.

Die Ablenkungsfreiheit besagt, dass dargestellte Informationen, die im direkten Zusammenhang mit der Zielerreichung des Nutzers ste-hen, durch weitere Informationen für den Nutzer nicht mehr wahr-nehmbar sind. Dazu gehören beispielsweise dominante Werbean-zeige oder Hintergrundbilder.

Der Grundsatz der Unterscheidbarkeit beschreibt, dass die darge-stellten Informationen einer Website durch sinnvolle Strukturierung, Darstellungsattributen und die Anwendung von Gestaltungsgesetzen vom Nutzer erkennbar sind. Hierbei sind Positionen einzelner Ele-mente einer Website ebenso wichtig, wie das Design (Farben und Formen). Dadurch sind Nutzer in der Lage dargestellte Informationen besser zu differenzieren.

Die eindeutige Interpretierbarkeit meint, dass dargestellte Informati-onen einer Website vom Nutzer eindeutig verstanden werden. Ein-flussgrößen sind dabei unter anderem die Verständlichkeit, Vollstän-digkeit und Zuordnung der Informationen. Durch einen kurzen und einfachen Satzbau sind dargestellte Informationen für den Nutzer eindeutig beziehungsweise nachvollziehbar. Als Beispiel enthalten Menüelemente, die eine Websitereaktion nach sich ziehen, eine zweckmäßige und aktive Formulierung/Bezeichnung.

Die Kompaktheit dargestellter Informationen beschreibt, dass dem Nutzer einer Website nur die notwendigen Informationen angezeigt werden, die im direkten Zusammenhang mit seiner Zielerreichung stehen. Gleichzeitig beschreibt sie die Alternativmöglichkeiten für Websitereaktionen, wie zum Beispiel Tastenkombinationen oder

Ablenkungsfreiheit

Unterscheidbarkeit

Interpretierbarkeit

Kompaktheit




Textvervollständigung. Im konkreten Anwendungsfall bedeutet dies, dass beispielsweise in der Suchleiste der Website mit der Eingabe der ersten Buchstaben Suchwortvorschläge angezeigt werden. Der Grundsatz der Kompaktheit beruht dabei auf dem Prinzip des Mini-malismus.

Die Norm unterscheidet bei dem Grundsatz der Konsistenz darge-stellter Informationen zwischen innerer und äußerer Konsistenz. Die innere Konsistenz beschreibt die einheitliche Verwendung von Termi-nologie (Wortwahl, Grammatik) auf einer Website. Wohingegen die äußere Konsistenz das Einhalten allgemein anerkannter (Darstel-lungs-) Konventionen beschreibt. Beispielhaft sollte ein Hilfe-Button den Nutzer auf eine Seite führen, die auch tatsächlich den Titel „Hilfe“ trägt und die Konventionen der vorherigen Seite, wie etwa Po-sitionierung der Elemente, beibehält. Auf Konventionen im Webde-sign wird im Kapitel 2.4 näher eingegangen.

Aus den Grundsätzen der Informationsdarstellung ist zu entnehmen, dass die Gestaltung handlungsleitender Informationen und die Mini-mierung der Augenbelastung als übergeordnete Leitziele definiert sind. Dabei sollten handlungsleitende Informationen für den Nutzer eine Website unmittelbar erkennbar sein und ihn darüber in Kenntnis setzen, wo er sich gerade im Dialog (auf der Website) befindet und welche Möglichkeiten ihm als nächstes zur Verfügung stehen. Dem-nach entsprechen die handlungsanleitenden Informationen der Infor-mationsdarstellung dem Grundsatz „Selbstbeschreibungsfähigkeit“ der Dialoggestaltung. Darüber hinaus wird durch eine geeignete Schrift- und Zeichengröße sowie durch eine passende Farbwahl die Minimierung der Augenbelastung erreicht. (vgl. Redtenbacher, o. J.)

Spezifische Anforderungen an die visuell dargestellten Informationen beinhaltet der Normenteil 125 und ergänzt damit synergetisch den Normenteil 112. Dieser beinhaltet detaillierte Empfehlungen zur In-formationsdarstellung hinsichtlich einzelner „Interaktionsmodalitä-

Konsistenz




ten“ und beschreibt unter anderem die Forderungen an die Leserlich-keit, Strukturierung und Organisation von Informationen. (vgl. Grün-wied, 2017, S. 75) Der Normenteil 125 wird im Rahmen der vorlie-genden Bachelorarbeit nicht weiter betrachtet.

2.2.4. Zusammenhang der Normenteile

(Quelle: DIN EN ISO 9241-110, 2008, S. 22)

Abbildung 2.2 Zusammenhang zwischen den Normenteilen 9241-11 und 9241-110 sowie 9241-112

Abbildung 2.2 illustriert den Zusammenhang der Normenteile 9241-11 und 9241-110 sowie 9241-112. Der Normenteil 9241-112 „Grundsätze der Informationsdarstellung“ beschreibt die charakte-ristischen Eigenschaften der dargestellten Informationen und dient damit der Bachelorarbeit als Grundlage. Ebenso beschreibt er Emp-fehlungen, wie Informationen als Teil eines Dialogs, dargestellt wer-den sollen. Dabei sind Informationen ein essenzieller Bestandteil ei-nes Dialogs, die auf den „Grundsätzen der Dialoggestaltung“ und somit auf dem Normenteil 9241-110 beruhen. Diese wiederum un-terstützen die Gestaltung des dynamischen Verhaltens interaktiver


2.3. DIN 1450 „Leserlichkeit“


Systeme. Insbesondere unterstützen die charakteristischen Eigen-schaften der dargestellten Informationen die Selbstbeschreibungsfä-higkeit und die Erwartungskonformität eines Dialogs. Die Berücksich-tigung der Grundsätze im Gestaltungsprozess aus beiden Normen-teilen tragen zur Gebrauchstauglichkeit, das heißt zur Effektivität, Ef-fizienz und Zufriedenheit, einer Website bei. Diese beschreibt der Normenteil 9241-11 und stellt damit alle Normenteile in Verbindung. (vgl. DIN EN ISO 9241-110, 2008, S. 22)

Folgt somit eine Website diesen Grundsätzen, besitzt sie ein hohes Maß an Usability (vgl. Jacobsen & Meyer, 2018, S. 34). Daher sind die Grundsätze beziehungsweise Normenteile ein essenzieller Be-standteil im Arbeitsalltag für Entwickler und Designer.

Gleichzeitig dienen sie als Orientierung. Die Norm schafft somit eine Herangehensweise zur Erstellung und Beurteilung von benutzer-freundlichen Websites. Daraus lassen sich individuelle Anforderun-gen an Websites ableiten und in Form eines Kriterienkatalogs aufar-beiten. Zudem bietet sie eine breit gefächerte Grundlage zur Beur-teilung der Usability von Websites und veranschaulicht gleichzeitig die Notwendigkeit der Usability im WWW. (vgl. ebd., S. 65) Damit bil-den die Normenteile die Grundlage für den in Kapitel 5 erstellten Kri-terienkatalog.


Eine weitere wichtige Norm, die sowohl im Zusammenhang mit der Usability als auch mit der Informationsdarstellung einer Website steht, ist die DIN 1450 „Leserlichkeit“. Diese beinhaltete zunächst nur Empfehlungen zur Gestaltung von Schriften im öffentlichen Raum. Sie wurde Mitte 2013 durch einige Spezifikation ergänzt, um das barrierefreie Lesen auch in anderen Bereichen zu ermöglichen. Dabei beschreibt die Norm unzählige Faktoren, die die Leserlichkeit von Schriften beeinflusst. Unter anderem zählen alle typografischen




Faktoren, wie Schriftgröße, Zeilenlänge und Kontrast dazu sowie die persönlichen Eigenschaften des Lesers, wie etwa das Alter oder die Sehstärke. Aktuell zählt die Norm 43 Einflussfaktoren. (vgl. DIN 1450, 2013, S. 3ff.)

Zur Beurteilung der Leserlichkeit einer Schrift ist die Schriftgröße ein physiologisch bedeutsames Maß. Dabei wird unter der Schriftgröße die vertikale Ausdehnung einer Schrift einschließlich ihrer Ober-, Mit-tel- und Unterlängen verstanden (s. Abbildung 2.3). Diese wird in der Maßeinheit Punkt (pt) angegeben.

(Quelle: Deutscher Blinden- und Sehbehindertenverband e. V.. (o. J.-b). Zeichenbezogene Fak-toren: Schriftgröße. http://www.leserlich.info/kapitel/zeichen/schriftgroesse.php

Abbildung 2.3 Typografischer Aufbau einer Schrift

Je nach Schriftwahl können dabei die unterschiedlichen Längen vari-ieren, sodass das Schriftbild bei gleicher Schriftgröße vom Leser un-terschiedlich wahrgenommen wird. Beispielsweise kann die Mittel-länge bei gleicher Schriftgröße bis zu 40% abweichen. Aus diesem Grund ist die Mittellänge die zentrale Bezugsgröße der Norm und er-mittelte Werte dienen lediglich als Annäherungswerte. (vgl. ebd., S. 14) Gemäß der DIN 1450 setzt sich die Schriftgrößenbestimmung ausfolgenden drei Punkten zusammen:

Die Textart ist eine der wichtigsten Kriterien, die bei der Bestimmung der Schriftgröße in Abhängigkeit steht. Die Norm unterscheidet zwi-schen Signalisationstext, Lesetext, Konsultationstext und Schautext (vgl. DIN 1450, 2013, S. 6-8).

• Der Signalisationstext dient zur Orientierung im öffentlichen Raum, beispielsweise anhand einer Autobahn-Beschilderung. Hierbei werden die höchsten Anforderungen an die Leserlichkeit gestellt,

Textart




da der Text aus unterschiedlichen Entfernungen, mit unterschied-lichen Beleuchtungen und Betrachtungswinkeln gelesen werden soll.

• Der Lesetext, der auch als Fließtext/Mengentext bezeichnet wird, beschreibt einen fortlaufenden Text, der komfortable zu lesen ist. Wie beispielsweise in Büchern, Zeitschriften und Anleitungen. Im übertragenen Sinn steht der Lesetext im Kontext des Responsive Webdesign für Websites mit einem hohen Textanteil. Alle nachfol-genden Angaben beziehen sich daher auf den Lesetext.

• Der Konsultationstext erläutert oder ergänzt den Lesetext, zum Beispiel durch Marginalien, Fußnoten, Listen, Bildunterschriften oder Legenden. In der Regel kann er kleiner als der Lesetext ge-setzt werden.

• Ähnlich wie der Konsultationstext ergänzt der Schautext den Le-setext, der durch Überschriften und Hervorhebungen den Text ge-staltet beziehungsweise gliedert. (vgl. Deutscher Blinden- und Sehbehindertenverband e. V., o. J.-a)

Neben der Textart ist der Betrachtungsabstand des Lesers zum Text beziehungsweise im Kontext des Responsive Webdesigns zum Gerät ein weiteres wichtiges Kriterium. Während ein Text auf einem Smart-phone etwa mit einem Abstand von circa 20 cm gelesen werden kann, lesen Nutzer den Text bei einem herkömmlichen Desktop-PC aus einem Abstand von bis zu 80 cm. (vgl. Deutscher Blinden- und Sehbehindertenverband e. V., o. J.-b).

Das dritte Kriterium zur Bestimmung der Schriftgröße ist die Seh-schärfe des Lesers – auch Visus genannt. Dabei kann der Visus zum Beispiel durch nicht ausreichende Beleuchtung und starke Kontraste beeinflusst werden. Die Schriftgrößenempfehlung der DIN 1450 ba-siert dabei auf einem Richtwert von mindestens 70% (Visus ≥0,7). Das entspricht der normalen Sehschärfe eines Menschen. (vgl. ebd.) Entsprechende Faktoren für Menschen mit geringem Sehvermögen kann der Norm entnommen werden (vgl. DIN 1450, S. 25).

Betrachtungs-abstand

Visus




Ein ergänzendes Kriterium im Kontext des Responsive Webdesigns sind die unterschiedlichen Pixeldichten (ppi) der Geräte beziehungs-weise Bildschirme (näher erläutert in Abschnitt 3.1.1), welches je-doch nicht in der Norm berücksichtigt werden. Grundsätzlich wird die Schrift im WWW in Pixeln angezeigt, weswegen die Angabe der Schriftgröße in Pixel (px) erfolgt. Dabei kann die optische/metrische Schriftgröße bei den unterschiedlichen Bildschirmen bis zu 300% va-riieren, sodass für die Schriftgrößenbestimmung der DIN 1450 ledig-lich ermittelte Durchschnittswerte für die Pixeldichte gelten. (vgl. Deutscher Blinden- und Sehbehindertenverband e. V., o. J.-c)

Bei der Berechnung der Schriftgröße nach DIN 1450 ist, wie bereits erwähnt, die Mittellänge die zentrale Bezugsgröße. Dabei ist diese in Abhängigkeit vom Betrachtungsabstand festgelegt. Generell gilt, die Schriftgröße ist proportional zum Betrachtungsabstand. Das heißt, je kleiner beziehungsweise größer der Betrachtungsabstand ist, umso kleiner/größer kann die Schriftgröße gesetzt werden. Die DIN 1450 nutzt zunächst den Sehwinkel #, unter dem der Text oder das Gerät wahrgenommen wird (s. Abbildung 2.4), um die Mittellänge $ unter der Berücksichtigung des Betrachtungsabstandes % zu ermitteln (vgl. DIN 1450, 2013, S. 14ff. und Deutscher Blinden- und Sehbehin-dertenverband e. V., o. J.-b).

(Quelle: DIN 1450 Leserlichkeit, 2013, S. 15)

Abbildung 2.4 Sehwinkel nach DIN 1450




Ergänzt werden die Angaben sowohl um den Visus &des Lesers als auch um den Leuchtdichtenfaktor '() des Geräts. Daraus lässt sich folgenden Formel ableiten:

$ = 2% × tan 0# ×'()

21

(Quelle: Deutscher Blinden- und Sehbehindertenverband e. V., o. J.-b).

Der Leuchtdichtenfaktor '() ist aus der Tabelle A.1 der DIN 1450 ab-zulesen und setzt sich wie folgt zusammen:

'() =23)4&

(Quelle: Deutscher Blinden- und Sehbehindertenverband e. V., o. J.-b).

Dabei kann 23)4 aus der ersten Zeile der Tabelle abgelesen werden und entspricht dem Leuchtdichtenfaktor bei einem Visus von 1. (vgl. ebd.)

Die Angabe der Mittellänge $ können die Geräte beziehungsweise Browser nicht interpretieren, weswegen ein Wert für die Schrift-größe 5ermittelt werden muss. Hierbei sollte das Mittellängen-

Schriftgrößenverhältnis $6 = 7

6 der jeweiligen Schrift bekannt sein,

jedoch greift die Norm auf einen gemittelten Wert von 0,47 mm zu-rück. Das Schriftgrößenverhältnis $6 wird mit der Mittellänge $ ad-diert. (vgl. ebd.) Danach muss die Mittellänge über zwei Schritte von Millimeter (mm) über Punkt (pt) zu Pixel (px) umgerechnet werden, sodass die Schriftgrößenempfehlung nach DIN 1450 auch für das Web nutzbar ist. (s. Anhang, Schriftgrößenberechnung ab Seite 90ff.)

Auf Grundlage dieser Formel ermittelt der Schriftgrößenrechner des Deutschen Blinden- und Sehverbandes e. V. die Schriftgröße gemäß der DIN 1450. Die errechneten Schriftgrößen zeigt Tabelle 2.1.


2.4. Konventionen im Webdesign


Ausgabemedium /Gerät

Betrachtungs-abstand

Visus Beleuchtung Schriftgröße

Smartphones (150ppi)

0,2 m – 0,3 m 0,7 gut 9,5 px – 14 px 0,2 m – 0,3 m 0,7 ausreichend 11,5 px – 17,5 px 0,2 m – 0,3 m 0,7 schlecht 13,5 px – 20,5 px

Tablets (140ppi)

0,3 m – 0,5 m 0,7 gut 13 px – 22 px 0,3 m – 0,5 m 0,7 ausreichend 16 px – 27 px 0,3 m – 0,5 m 0,7 schlecht 19 px – 32 px

Laptops (120ppi)


Desktop-PCs (100ppi)


Tabelle 2.1 Errechnete Schriftgrößenempfehlung in Anlehnung an die DIN 1450

Damit gelten die dargestellten Inhalte auf einer Website dann als le-serlich, wenn die Schriftgröße der Schriftgrößenempfehlung gemäß der DIN 1450 entspricht und in gut leserlichen Antiqua-Schriftarten gesetzt ist (vgl. DIN 1450, 2013, S. 21). Weitere typografische Fakto-ren, die zur Leserlichkeit beziehungsweise zur Usability beitragen, werden in Kapitel 4.4 näher erläutert.


„Eines der Hauptergebnisse zahlloser Usability-Studien war, dass Sites dann am besten funktionieren, wenn sie den Konventionen folgen, die Besucher schon von anderen Sites kennen.“ (Nielsen & Tahir, 2004, S. 52)

Das Zitat zeigt, dass Konventionen die Usability einer Website unter-stützen. Gleichzeitig begründet und verdeutlich es die Wichtigkeit von Konventionen. Im Allgemein wird unter einer Konvention eine nicht formal festgeschriebene Regel verstanden. Diese entsteht in einer




Gruppe von Menschen aufgrund übereinstimmender Meinungen – ei-nem Konsens (vgl. Wikipedia, 2018). Im Webdesign beschreiben sie hingegen eine Regel zur Erstellung beziehungsweise Gestaltung von Websites. Steve Krug bezeichnet Konventionen als weitverbreitete und standardisierte Designmuster, um Inhalte einer Website einfach und schneller zu erfassen (vgl. Krug, 2014, S. 29).

Demnach sind Konventionen erlernte Details, die von Nutzern einer Website mit der Zeit erwartet werden. Die bekanntesten Beispiele sind das Einkaufswagensymbol für den Warenkorb, das Briefsymbol für die E-Mail-Funktion oder das Haussymbol für die Startseite. Hinzu kommen viele weitere Konventionen, wie etwa die Anordnung des Lo-gos in der oberen linken Ecke der Website oder die unterschiedliche Größendarstellung von Elementen und Texten. Nutzer wissen, je grö-ßer ein Element ist, umso wichtiger ist es. Dabei geht diese Konven-tion auf die Zeitungen zurück, die bereits mittels großer Überschriften und kleinen Texten die Bedeutung von Elementen veranschaulichten. (vgl. Keßler et al., 2015, S. 414f.) Unter anderem zählt auch die Posi-tionierung der Elemente beziehungsweise die dargestellten Inhalte der Website sowie die Kennzeichnungen von Links zu den Konventio-nen, die die Nutzung der Website vereinfachen. Somit unterstützen Konventionen, dass sich der Nutzer auf der Website zurechtfindet (vgl. Hoffmann, 2013, S. 54).

Damit erweisen sich Konventionen als überaus nützlich beziehungs-weise hilfreich. Werden sie vom Nutzer einer Website verstanden und von der Website verwendet, entwickelt sich daraus ein immer wie-derkehrendes Bild, aus dem ein schneller und vor allem sicherer Um-gang mit der Website resultiert, welcher die Usability beeinflusst. So-mit versteht der Nutzer direkt den strukturellen Aufbau der Website, ohne dass er dafür die Inhalte der Website kennen muss (vgl. Krug, 2014, S. 34f.).

Einer der wichtigsten Konvention ist die Kennzeichnung von Schalt-flächen beziehungsweise Buttons. Diese sollte sich vom restlichen




Text mithilfe von Farben, Formen und anderen typografischen Aus-zeichnungen deutlich abheben. Hinzu kommt das Nutzer im Header (dt. Kopfbereich) einer Website die Verlinkung zur Startseite erwar-ten. Steve Krug beschreibt in seinem Buch „Don’t make me think!“ noch weitere vier Elemente eines typischen Header-Bereichs. Im Footer (dt. Fußbereich) hingegen erwarten Nutzer Informationen über den Website-Betreiber (vgl. Hoffmann, 2013, S. 57). Entspricht die Website nicht den Erwartungen beziehungsweise den erlernten Konventionen der Nutzer führt das zu Irritation, Denkarbeit und er-neutes Lernen. Hierbei ist die Konsistenz ein maßgebliches Kriterium. Beispielsweise erwarten Nutzer, dass Navigationselemente auf allen Seiten an derselben Stelle gleich dargestellt werden. (vgl. Keßler et al., 2015, S. 415)

Hinsichtlich reaktionsfähiger Websites, die auf die unterschiedlichs-ten Eigenschaften und Größen der Geräte reagieren müssen, stellen Konventionen eine große Herausforderung dar. Oft kann die Darstel-lung der Websites stark variieren, sodass sich auch durchaus neue Konventionen bilden können. Einer der prominentesten Beispiele ist das sogenannte Hamburger-Icon, welches schemenhaft die Naviga-tion darstellt. Dabei besteht es meist aus drei waagerecht angeord-neten Linien. Teilweise wird dieses auch auf der Darstellung für her-kömmliche Desktop-PCs verwendet. Wegen seines geringen Platz-bedarfs unterstützt das Hamburger-Icon in erster Linie die Darstel-lung der Website auf mobilen Endgeräten. (vgl. Walorska, 2014)

(Quelle: eigene Abbildung)

Abbildung 2.5 Unterschiedliche Darstellungskonventionen für die Navigation im mo-bilen Kontext




Obwohl sich das Hamburger-Icon als effiziente Darstellung der Navi-gation erwies, zeigt die Abbildung 2.5, dass es kein festgesetztes Icon zur Darstellung der Navigation bei Konzepten, die ein Icon oder Link anstelle der Navigation haben, gibt. Dabei verschwinden hinter dem Icon beliebig viele Navigationspunkte, die für den Nutzer auf den ersten Blick nicht sichtbar sind. Nutzern, denen das Icon nicht be-kannt ist, benötigen viel Zeit, um eine Navigation beziehungsweise weiterführende Links auf der Website zu finden. Hinzu kommt, dass es durch seine Einfachheit Gefahr läuft nicht als Schaltfläche erkannt zu werden. Zudem bedeutet es für den Nutzer mindestens einen zu-sätzlichen Klick/Tap mehr, um die Navigation beziehungsweise die Inhalte der Website zu sehen. Damit erscheint das Hamburger-Icon als ineffizient. (vgl. ebd.)

3. Anforderungen an das Responsive Webdesign




Wie bereits in Kapitel 2.1 erwähnt rückt zunehmend der Kontext, in dem das Gerät genutzt wird, in den Vordergrund und ist für die Usabi-lity einer Website ausschlaggebend. Mobile Endgeräte sind allgegen-wärtig. Ob im Zug, im Café oder auf dem Sofa. Menschen unter-schiedlichsten Alters-, Interessen- oder Berufsgruppen informieren sich mit ihren Geräten in der Hand mittels mobiler Webangebote, schreiben E-Mails und Nachrichten und surfen in sozialen Netzwer-ken (vgl. Jacobsen & Meyer, 2018, S. 73). Das Webanalyse-Unterneh-men statcounter Global Stats bestätigte Ende 2016, dass erstmals die Zahl der Internetzugriffe mit mobilen Endgeräten, die der statio-nären Geräte, überholte. Damit sind die mobilen Endgeräte, wie bei-spielsweise Smartphones oder Tablets, zum Standardgerät gewor-den, wenn es um den Zugriff in das WWW geht.

(Quelle: statcounter GlobalStats (2016), Mobile and tablet internet usage exceeds desktop for first time worldwide, http://gs.statcounter.com/press/mobile-and-tablet-internet-usage-ex-ceeds-desktop-for-first-time-worldwide)

Abbildung 3.1 Zugriffszahlen der mobilen Endgeräte überholen die der stationären Desktop-PCs

Im Hinblick auf die zunehmenden Zugriffszahlen von mobilen Endge-räten gewinnen reaktionsfähige Websites und letztlich die damit ver-bundene Usability immer mehr an Bedeutung. Beispielsweise be-trachtet Google seit 2015 die mobile Kompatibilität von Websites als


3.1. Technische Erfordernisse


offizielles Kriterium, welches sich, aufgrund der vermehrten Suchan-fragen von mobilen Endgeräten, in den Rankings der Suchergebnisse niederschlägt (vgl. Google Webmaster Central Blog, 2015).

In der Umfrage „What Users Want Most From Mobile Sites Today“ von Google (2012) gaben drei viertel (75%) der Nutzer an, dass sie auf eine Website mit einer geringen Usability nicht wiederkehren und die benötigen Informationen auf einer anderen Website suchen wür-den. Daher kann eine Website, die für mobile Endgeräte optimiert ist eine Vielzahl von Nutzern binden (vgl. Maurice, 2012, S. 8ff.).

Prognosen zu Folge wird die Verbreitung von mobilen Endgeräten weiter zunehmen und die Notwendigkeit reaktionsfähiger Websites zu entwickeln, weiter steigen (vgl. AP, o. J.). Hinzu kommt, dass die Geräte immer leistungsfähiger und günstiger werden. Mit ihnen kom-men unterschiedliche Anforderungen beziehungsweise Einschrän-kungen an die Präsentation von Inhalten – die Website (vgl. Stiegert, 2013, S. 15). Das nachfolgende Kapitel stellt sowohl nutzerspezifi-sche Anforderungen als auch technische Erfordernisse vor, die beim Entwicklungsprozess einer reaktionsfähigen Website zu beachten sind, um die dargestellten Inhalte auf den unterschiedlichsten Gerä-ten benutzerfreundlich auszugeben.


3.1.1. Bildschirmgrößen/-auflösungen

Die erste und signifikanteste Anforderung beziehungsweise Ein-schränkung von mobilen Endgeräten ist die der unterschiedlichen Bildschirmgrößen und -auflösungen. Im Gegensatz zu stationären Desktop-PCs verfügen die meisten mobilen Endgeräte über eine be-schränkte Bildschirmgröße. Dementsprechend steht deutlich weniger Platz für die dargestellten Inhalten der Website zur Verfügung. Damit rückt der Nutzer und seine Bedürfnisse, beispielsweise das Suchen




nach einer bestimmten Information, in den Vordergrund und zwingt Entwickler und Designer sich auf das Wesentliche, die Inhalte der Website, zu fokussieren. (vgl. Maurice, 2012, S. 5 und Laborenz, 2016, S. 204)

Zum Beispiel sind Nutzer bei einer Website, die nicht für mobile End-geräte optimiert ist, auf ihr Kurzzeitgedächtnis angewiesen, da sie durch das ständige „scrollen“ nicht den gesamten Informationsgehalt der Website erfassen können (vgl. Nielsen & Budiu, 2013, S. 67). Demnach sollten reaktionsfähige Websites für den zur Verfügung ste-henden Platz optimiert und sinnvoll zu nutzen sein, um dem Nutzer die Möglichkeit zu geben sich einen Überblick zu verschaffen. Grund-legend dabei sind die sieben Grundsätze der Informationsdarstel-lung.

Neben den beschränkten Bildschirmgrößen stellen die zunehmenden Bildschirmauflösungen eine weitere Einschränkung dar. Mit der Ein-führung von Apples sogenannten Retina-Displays – also hochauflö-senden Displays – entspricht ein Pixel nicht mehr einem Pixel, worauf die Websites insbesondere Bilder reagieren müssen. Es gilt Gerätepi-xel von CSS-Pixel zu unterscheiden. Ein Gerätepixel beschreibt folg-lich die physikalischen Pixel des Bildschirms. Wohingegen ein CSS-Pixel eine Einheit der dargestellten Inhalte auf dem Bildschirm be-schreibt. Das Verhältnis von Gerätepixel zu CSS-Pixel veranschaulicht Abbildung 3.2.




(Quelle: Abbildung in Anlehnung an Ertel & Laborenz, 2016, S. 68)

Abbildung 3.2 Der Unterschied zwischen Gerätepixel und CSS-Pixel

Aus dem Verhältnis ergibt sich die Pixeldichte (device-pixel-ra-tio). Bei Geräten mit einer höheren Pixeldichte beinhaltet ein CSS-Pixel dementsprechend mehrere Gerätepixel. Daraus folgt, dass die virtuelle Auflösung (CSS-Pixel) geringer ist als die tatsächliche Auflö-sung der Geräte. Dabei können Geräte mit einer höheren Pixeldichte die Website beziehungsweise die Inhalte schärfer und detaillierter darstellen. (vgl. Ertel & Laborenz, 2016, S. 66ff. und Laborenz, 2016, S. 226ff.)

Sowohl die Bildschirmgrößen als auch die Bildschirmauflösungen sind damit zwei wesentliche Anforderungen, die beim Entwicklungs-prozess einer Website berücksichtigt werden müssen. Mithilfe von flexiblen Layouts, flexiblen Medien und den sogenannten Media Que-ries ist es im Responsive Webdesign möglich, die Inhalte einer Webs-ite auf die Anforderungen auszurichten.

1 CSS-Pixel (Pixeldichte 2)

1 CSS-Pixel (Pixeldichte 1,5)

1 CSS-Pixel (Pixeldichte 1)

1 Geräte-Pixel (Hardware)




Tabelle 3.1 zeigt die unterschiedlichen Bildschirmmaße einiger Apple-Geräte, die oft als Referenzgrößen herangezogen werden. Aus Gründen der Übersichtlichkeit werden keine weiteren Geräte be-trachtet.

Beschränkt man sich beim Entwicklungsprozess einer reaktionsfähi-gen Website auf das Wesentliche, die Inhalte, profitiert sowohl die

Ausgabemedium /Gerät

Bildschirm-größe in Gerä-tepixel

Bildschirm-größe in CSS-Pixel

Bildschirmdiago-nale in Inch/cm

Pixel-dichte (2)/(1)

iMac Pro 5K 5120 x 2880 2560 x 1440 27,0"/ 68,6 cm 2 iMac 5K 27,0" 5120 x 2880 2560 x 1440 27,0"/ 68,6 cm 2 iMac 4K 21,5" 4096 x 2304 2048 x 1152 21,5" / 54,6 cm 2 MacBook Pro 15,4" 2880 x 1800 1440 x 900 15,4" / 39,1 cm 2 MacBook Pro 13,3" 2560 x 1600 1280 x 800 13,3" / 33,8 cm 2 MacBook Air 1440 x 900 720 x 450 13,3" / 33,8 cm 2 MacBook 2304 x 1440 1152 x 720 12,0" / 30,5 cm 2 iPad Pro 12,9" 2732 x 2048 1366 x 1024 12,9" / 32,8 cm 2 iPad Pro 10,5" 2224 x 1668 1112 x 834 10,5" / 26,7 cm 2 iPad 2048 x 1536 1024 x 768 9,7" / 24,6 cm 2 iPad mini 4 2048 x 1536 1024 x 768 7,9" / 20,1 cm 2 iPhone X 2436 x 1125 812 x 375 5,8" / 14,7 cm 3 iPhone 8+,7+,6s+ 1920 x 1080 736 x 414 5,5" / 14,0 cm 3 iPhone 8,7,6s 1334 x 750 667 x 350 4,7" / 12,0 cm 2 iPhone SE 1136 x 640 568 x 320 4,0" / 10,2 cm 2 Apple Watch Series 3, 42 mm*

272 x 340 — 1,7" / 4,2 cm —

Apple Watch Series 3 38 mm*

312 x 390 — 1,5" / 3,8 cm —

*Ab Herbst 2018 können mit dem Betriebssystem-Update auf WatchOS 5 Webinhalte über die Apple Watch angesehen wer-

den. (Quelle: https://www.apple.com/de/watchos-preview/?afid=p238%7CsHMrAEVqV-dc_mtid_20925oze42631_pcrid_277129002214_&cid=wwa-de-kwgo-watch-slid--bran-watch+os+5-e-productid-)

Tabelle 3.1 Unterschiedliche Bildschirmmaße einiger Apple-Geräte




mobile als auch die stationäre Umsetzung der Website gleicherma-ßen. Beispielsweise hinsichtlich der einfachen Handhabung der Navi-gation oder das schnellere Auffinden von Informationen. Somit kann die Einschränkung der unterschiedlichen Bildschirmgrößen und -auflösungen als Chance verstanden werden und leistet damit einen bedeutenden Beitrag zur Verbesserung der Usability auf Websites.

3.1.2. Datenübertragung

Die zweite wesentliche Anforderung/Einschränkung von mobilen Endgeräten bezieht sich auf die Datenübertragung einer Website. Da-bei nutzen die Geräte, um auf das WWW zuzugreifen, verschiedenen Verbindungstechnologien mit unterschiedlichen Geschwindigkeiten. Im Vergleich zu herkömmlichen stationären Desktop-PCs ist die Da-tenübertragung bei mobilen Endgeräten jedoch schlechter und somit langsamer. Die Geschwindigkeit mit der Ressourcen, wie beispiels-weise HTML-Dokumente, CSS-Dateien, Bilder oder Videos übertragen werden, bemisst sich an der gleichzeitig übertragbaren Datenmenge und der Latenzzeit der einzelnen Verbindung. (vgl. Maurice, 2012, S. 5)

In der Regel sind die Latenzzeiten bei mobilen Endgeräten höher als bei Desktop-PCs, weswegen die Datenmenge einer reaktionsfähigen Website möglichst geringgehalten werden sollte. Tabelle 3.2 zeigt Übertragungsgeschwindigkeiten und Latenzzeiten mobiler Verbin-dungstechnologien.

Die Latenzzeiten der Technologien, wie HDSPA und LTE, sind zwar gering und haben folglich eine schnellere Datenübertragung, jedoch greifen eine Vielzahl von mobilen Endgeräten noch auf die GSM-Technologie zurück (vgl. Laborenz, 2016, S. 205f.). Auch die soge-nannten Datenflatrates, die von Mobilfunkanbieter angeboten wer-den, drosseln ab einer bestimmten Datenmenge auf eine geringere Übertragungsgeschwindigkeit (vgl. ebd. und Maurice, 2012, S. 5f.). Die höheren Latenzzeiten haben zur Folge, dass der Nutzer länger auf




die Inhalte der Website warten muss. Dies wirkt sich damit schlecht auf die Usability einer Website aus. Eine Erhebung aus dem Jahr 2011 zeigt deutlich, wie wichtig die schnelle Datenübertragung der Website ist.

„Nearly 60% of web users say they expect a website to load on their mobile phone in 3 seconds or less and 74% are willing to wait 5 seconds or less for a single web page to load before leaving the site. (Compuware Equation Research, S. 4)

Daraus geht hervor, dass 74% der Nutzer einer Website maximal fünf Sekunden warten, bevor sie die Websites wieder verlassen. Oft brin-gen die Nutzer für längere Wartezeiten keine Geduld auf (vgl. Nielsen & Budiu, 2013, S. 100). Infolgedessen sollte eine reaktionsfähige Website möglichst ressourcenschonend gestaltet werden, sodass sich die Ladezeiten beziehungsweise die Wartezeiten der Website verringert. Nielsen betitelt das als eines der wichtigsten Gestaltungs-kriterien für Websites (vgl. Nielsen, 2004, S. 42). Insbesondere die Verwendung von Bildern und anderen Medien, wie beispielsweise Vi-deos, strapazieren dabei die Datenübertragung.

Sobald eine Website auf einem mobilen Endgerät schnell geladen werden kann, ist sie auf herkömmlichen stationären Desktop-PCs

Verbindungstechnologie Übertragungsgeschwindigkeit Latenzzeit GSM/GPRS 53,6 kBit/s 500 ms und mehr EDGE 236,8 kBit/s 300 bis 400 ms UMTS 384 kBit/s 170 bis 200 ms HSDPA / HSDPA+

1,8 MBit/s – 7,2 MBit/s / 14,4 MBit/s – 42,2 MBit/s

60 bis 70 ms

LTE / LTE-A

bis 300 MBit/s / bis 600 MBit/s

10 ms

(Quelle: Unbekannt (o. J.), Datenübertragung im Mobilfunk, abgerufen 22. Juli 2018, von https://www.elektronik-kompen-dium.de/sites/kom/0910141.htm)

Tabelle 3.2 Übertragungsgeschwindigkeit und Latenzzeiten mobiler Verbindungstechnologien


3.2. Nutzerspezifische Anforderungen


umso schneller geladen. Daher führt die Anforderung der Datenüber-tragung und die Maßnahmen, die dagegen zu ergreifen sind, zu einer Verbesserung der Performance. (vgl. Laborenz, 2016, S. 206)


3.2.1. Mobiler Kontext

Die dritte Anforderung/Einschränkung ist der mobile Kontext bezie-hungsweise die zeitliche Begrenzung, indem eine Website besucht wird. Durch das mobile Wachstum verändert sich auch das Verhalten der Nutzer, wie diese auf Inhalte der Website zugreifen (vgl. Maurice, 2012, S. 7). In der Regel findet die mobile Nutzung in kürzeren Zeitin-tervallen statt, als dies auf herkömmlichen stationären Desktop-PCs der Fall ist. Daher hat der Nutzer einer Website weniger Zeit, um rele-vante Informationen aufzunehmen und zu verarbeiten (vgl. Nate, 2011). In Anbetracht der zeitlichen Begrenzung und der zur Verfü-gung stehenden Bildschirmgröße ist es notwendig sich auf das We-sentliche, die Inhalte einer Website, zu konzentrieren.

Google unterscheidet in seiner „Mobile User Experience Strategy“ zwischen folgenden drei Verhaltenstypen (vgl. Wellman, 2007):

Beschreibt das Verhalten, dass der Nutzer in immer wiederkehren-dem Rhythmus nach ein und derselben Information sucht. Informati-onen können beispielsweise das Wetter oder der Aktienkurs sein.

Beschreibt das Verhalten, dass der Nutzer die zur Verfügung ste-hende Zeit, beispielsweise durch das Warten an der Bushaltestelle, zum Aufrufen einer Website nutzt, um sich unterhalten zu lassen.

Beschreibt das Verhalten, dass der Nutzer durch eine gewisse Dring-lichkeit nach spezifischen Informationen sucht, wie beispielsweise die nächste Autowerkstatt aufgrund von Motorproblemen.

Repetitive Now

Bored Now

Urgent Now




Dabei steht das Nutzungsverhalten „Urgent Now“ als Sinnbild für den Nutzer im mobilen Kontext, wohingegen das Nutzungsverhalten „Bo-red Now“ den klassischen Desktop-PC Nutzer beschreibt (vgl. Mau-rice, 2012, S. 8). Hinzu kommt, wie bereits in Kapitel 2.3 erwähnt, dass die Inhalte der Website mit unterschiedlichen Geräten aufgeru-fen werden und dementsprechend der Betrachtungsabstand zur Website beziehungsweise des Geräts stark variiert. Somit müssen die Inhalte einer Website mit größerer Sorgfalt erstellt und ausgewählt werden. Dadurch profitiert sowohl die mobile als auch stationäre Um-setzung der Website.

3.2.2. Interaktionsmöglichkeiten

Die vierte Anforderung/Einschränkung von mobilen Endgeräten be-trifft die Interaktionsmöglichkeiten einer Website. Aufgrund des mo-bilen Wachstums verändert sich die Interaktion mit einer Website grundlegend. Dabei erfolgt die Steuerung der Website nicht mehr nur mit der Maus, sondern zunehmend mit dem Finger auf Touch-Bild-schirmen. Das hat zur Folge, dass die ohnehin schon eingeschränkte Bildschirmfläche mobiler Endgeräte durch die Hand oder Finger des Nutzers verdeckt wird und somit die Bedienung der Website er-schwert. (vgl. Laborenz, 2016, S. 206)

Daher empfehlen Apple und Microsoft in ihren Guidelines für klick-bare Flächen einer Website eine durchschnittliche Mindesthöhe und -breite von 7 bis 10 mm, die abhängig von der Bildschirmauflösung des Geräts anderen CSS-Pixel-Werten entsprechen (vgl. Zillgens, 2013, S. 235f.). Hinzu kommt, dass es einen beträchtlichen Unter-schied macht, wie die mobilen Endgeräte in der Hand gehalten wer-den, da hierdurch verschiedene Bereiche des Bildschirms unter-schiedlich gut erreichbar sind. Die Abbildung 3.3 veranschaulicht das Problem der Einhandbedienung.




(Quelle: Laborenz, 2016, S. 207)

Abbildung 3.3 Erreichbarkeit der Bedienelemente bei Einhandbedienung

In der Umfrage von Google (2012) „What Users Want Most From Mo-bile Sites Today“ gaben die Befragten an, dass sie mehr mobilfreund-lichere Eigenschaften, wie größere Bedienelemente und einfache Eingabefelder wollen. Daraus folgt, dass jegliche Schaltflächen, wie Buttons und Links, die eine Interaktion auf einer Website ermögli-chen, ausreichend groß gestaltet werden. Das erhöht die Treffsicher-heit der Nutzer, denn Nutzer können im Zweifel bei zu kleinen Bild-schirmgrößen die Links kaum „anklicken“ und bei fehlender Aus-zeichnung visuell von anderen Inhalten auf der Website unterschei-den. Hinzu kommt, dass durch die unterschiedliche Bedienung der Website die Position der Elemente beziehungsweise der Inhalte durchdacht sein muss. Damit es hinsichtlich der Usability zu keinem Problem kommt werden im Responsive Webdesign Links mit einer CSS-Notation und Media Queries für kleine Bildschirme darstellbar gemacht. (vgl. Ertel & Laborenz, 2016, S. 126) Dabei kommt diese Anforderung insbesondere bei der Navigation, die im Kapitel 4.5 beschrieben ist, zum Tragen.




3.2.3. Visus

Die fünfte und damit letzte Anforderung/Einschränkung von mobilen Endgeräten ist die Leserlichkeit dargestellter Inhalte einer Website beziehungsweise, wie diese vom Nutzer erkannt werden. Ausschlag-gebend dabei ist der Visus, die Sehschärfe, des Nutzers.

Wie bereits in 3.1.1 erläutert sind die Bildschirme der mobilen Endge-räte wesentlich kleiner als die der herkömmlichen Desktop-PCs. Demnach erhöht es die kognitive Belastung des Nutzers beziehungs-weise des Lesers und führt dazu, dass der Text nicht direkt verstan-den werden kann. (vgl. Nielsen & Budiu, 2013, S. 44) Entscheidend dabei ist das gesamte Schriftbild einschließlich aller typografischer Faktoren. Häufig wird das Schriftbild der Websites aus ästhetischen und platzbedingten Gründen zu klein gesetzt und kann vom Nutzer nicht richtig gelesen werden.

Aus diesem Grund ist der Visus der Nutzer eine grundlegende Anfor-derung an die dargestellten Inhalte und kann die Usability einer Web-site erheblich beeinflussen. Wird der Visus im Entwicklungsprozess einer Website berücksichtigt, beispielsweise durch das Anheben der Schriftgröße und des Zeilenabstandes, kann ein Grundmaß an Usabi-lity vorausgesetzt werden.

4. Grundlegende Techniken für Responsive Webdesign




Ethan Marcotte, ein amerikanischer Webentwickler und Designer, prägte den Begriff Responsive Webdesign im Mai 2010 im gleichna-migen Artikel für das Webmagazin „A List Apart“. Er bezog sich dabei auf einen neuen Bereich der Architektur, dem sogenannten „Respon-sive Architecture“, in dem man versucht Gebäude zu entwerfen, die auf die unterschiedlichsten äußeren Einflüsse reagieren können. Mar-cotte adaptierte diesen Gedanken auf das Webdesign und legte damit den Grundstein für das heutige Verständnis von Responsive Webde-sign. Damit ist Responsive Webdesign kein neuer Trend, sondern viel-mehr eine Rückbesinnung auf die Flexibilität der HTML-Dokumente. (vgl. Zillgens, 2013, S. 7ff.)

Während früher starre Layouts der gängige Standard waren, sind sie in Anbetracht des mobilen Wachstums heutzutage nicht mehr prakti-kabel. Die starren Layouts stammen noch aus den Anfängen des WWW, wo Printmedien als Vorlage verwendet wurden. Die Über-nahme von Gestaltungsgesetzen aus dem Grafik- und Printbereich führte dazu, dass zwar Entwickler und Designer die volle Kontrolle hatten, jedoch die Flexibilität des WWW nicht berücksichtigten und sich auf ein starres Layout beschränken mussten. (vgl. ebd.)

Somit beschreibt das Responsive Webdesign eine Herangehens-weise, welches sowohl die konzeptionellen als auch technischen As-pekte einer Website umfasst, die die Darstellung der Website auf den unterschiedlichsten Geräten flexibel auslegt. Daher müssen die Ele-mente beziehungsweise die dargestellten Inhalte einer Website flexi-bel gestaltet sein, sodass diese sich entsprechende der jeweiligen Abrufumgebung verändern lassen. Infolgedessen ist es im Respon-sive Webdesign möglich, auf die in Kapitel 3 beschriebenen Anforde-rungen zu reagieren.


4.1. Layout


Dabei definierte Marcotte in seinem Buch drei wesentliche techni-sche Komponente, die für die Erstellung von reaktionsfähigen Web-sites von besonderer großer Bedeutung sind:

„1. A flexible, grid-based layout, 2. Flexible images and media, and 3. Media queries, a module from the CSS3 specification.“ (Marcotte, 2011, S. 9)

Diese Komponente basieren auf den aktuellen Webstandards HTML5, CSS3 und JavaScript.

Neben der Betrachtung dieser drei Komponente setzt sich das nach-folgende Kapitel mit zwei weiteren Komponenten auseinander. Dazu gehören die reaktionsfähige Typografie und die Navigationskonzepte.

4.1. Layout

4.1.1. Grid und Breakpoints

Das sogenannte Grid (dt. Gitter) oder auch Raster ist für Webdesigner eines der gängigsten Gestaltungshilfsmittel, bei dem die Inhalte einer Website in einem Layout angeordnet werden, um eine sinnvolle Struktur zu schaffen. Dabei ist diese Vorgehensweise, Elemente in ei-nem Raster anzuordnen beziehungsweise zu positionieren, nicht neu und entstammt dem Printdesign (vgl. Rohles, 2017, S. 166ff.). Gerade im Kontext des Responsive Webdesigns bietet eine Website mit einem gut implementierten Gestaltungsraster große Vorteile. In Bezug auf die Usability sagte Khoi Vinh in seinem Buch „Ordering Dis-order: Grid Principles for Web Design“ 2011, dass das Raster der Website die nötige Struktur verleiht, um dem Nutzer die Möglichkeit zu geben, vorherzusehen, wo sich Informationen auf der Website be-finden. Weiterhin lassen sich neue Inhalte einfacher einfügen, ohne dabei die Konsistenz der bestehenden Darstellung zu zerstören (vgl. Hahn, 2017, S. 310). Auch beeinflusst es die Lesbarkeit und


4.1. Layout


Scanbarkeit einer Website (vgl. Kadlec & Fröhlich, 2013, S. 39). Somit bildet das flexible Gestaltungsraster die Grundvoraussetzung für die Umsetzung von reaktionsfähigen Websites (vgl. Zillgens, 2013, S. 15).

Das Gitter besteht dabei aus einer bestimmten Anzahl von Spalten. Die Spalten (eng. cols) nehmen einen prozentualen Anteil der Ge-samtbreite eines Bildschirms ein und sind im Gitter in gleichgroßen Abständen (eng. gutter) zueinander angeordnet. Somit erreicht das Gitter die nötige Flexibilität, um auch im Kontext des Responsive Webdesigns die Elemente einer Website flexible anzupassen. Gleich-zeitig schafft es die saubere und strukturelle Positionierung der Ele-mente. Folglich trägt das Gitter dazu bei, die Usability auf einer Website zu verbessern.

(Quelle: Norton, S. (o. J.), 960 Grid System in Web Design, abgerufen 12. Juni 2018, von https://www.tes.com/lessons/vZh5NpOcMqb1Lg/960-grid-system-in-web-design)

Abbildung 4.1 Das pixelbasierte 960-Grid, 12 Spalten Beispiel

Die Flexibilität hängt von der Anzahl der eingefügten Spalten ab. Mit zunehmender Spaltenanzahl steigt der Detailgrad der Web-site und gleichzeitig die Positionierungsmöglichkeiten der Elemente. Das heißt je mehr Spalten, desto flexibler das Gitter. (vgl. Esposito, 2011) Das zwölfspaltige Gitter (960-Gridsystem) von Nathan Smith (www.960.gs) dient als Grundlage für viele Websites, da dieses einen guten Kompromiss zwischen gestalterischer Freiheit und Komplexität

Aufbau


4.1. Layout


darstellt. Durch die vielfältige Teilbarkeit ist dieses Gitter innerhalb der Branche zur gängigen Arbeitspraxis geworden. Hierbei nehmen die Elemente beziehungsweise Inhalte einer Website eine bestimmte Anzahl an Spalten im Gitter ein und können auf Veränderungen der Bildschirmbreite reagieren, indem die Spalten und deren Abstände in Abhängigkeit zur Bildschirmbreite prozentual skaliert werden. (vgl. Ertel & Laborenz, 2016, S. 33ff.)

Die Angaben über das Gitter erfolgen über einen HTML-Container, dem ein Attribut zugewiesen wird, wie viele Spalten des Gitters die Elemente beziehungsweise die Inhalte einnehmen. Der rudimentäre Aufbau einer Website dient dafür als gutes Beispiel. Header und Footer einer Website nehmen 12 Spalten, der Content-Bereich acht Spalten und der Navigationsbereich vier Spalten des Gitters ein. Den allgemeinen HTML-Aufbau des Gitters zeigt Code-Beispiel 4.1:

<!DOCTYPE HTML>

<html lang="de">

<head>

<style>

body {

color: white; }

.header, .content, .navigation, .footer {

font-family: monospace; }

#wrapper {

max-width: 960px; margin: auto; }

.col-12 {

width: 100%; }

.col-8 {

width: 66.666666666666667%; float: left; }

.col-4 {

width: 33.333333333333333%, }

.header {

height: 100px; background-color: #3E5954; }

.content {

height: 300px; background-color: #5E8C84; }

.navigation {

Syntax


4.1. Layout


height: 300px; background-color: #9CBCB6; }

.footer {

height: 75px; background-color: #2C433F; }

</style>

</head>

<body id="wrapper">

<div class="header col-12">

Header

</div>

<div class="content col-8">

Content

</div>

<div class="navigation col-4">

Navigation

</div>

<div class="footer col-12">

Footer

</div>

</body>

</html>

Code-Beispiel 4.1 Allgemeingültiger HTML-Aufbau eines Gitters

Die Basis für die Berechnung eines reaktionsfähigen Gitters bildet das 960-Grid. Demzufolge ist die Breite, die das Gitter maximal einneh-men kann, auf 960 Pixel festgelegt. Bei einem zwölfspaltigen Gitter ergibt sich folglich eine Spaltenbreite von 60 Pixel, ein Spaltenab-stand von 20 Pixel und ein Außenabstand von 60 Pixel. Die starren Pixelwerte müssen nun in flexibel Prozentwerte umgerechnet wer-den, damit das Gitter auf Veränderung der Bildschirmbreite (Kontext) reagieren kann. Die Formel hierfür lautet wie folgt:

89:;<=öß:

'@AB:CB × 100= <:FGHℎB:=J=@K:ABL:=B

(Quelle: Marcotte, 2011, S. 41)

Anhand des vorherigen Beispiels ergibt sich somit beispielsweise für den Content-Bereich eine Zielgröße von 630 Pixel.

Berechnung


4.1. Layout


Diese Zielgröße setzt sich sowohl aus den Spalten als auch den Spal-tenabständen sowie dem Außenabstand des Gitters zusammen. Eine

Spalte mit 630 Pixel wäre dann MNOPQRST

UMOPQRST×4OO= 65,625% breit. Es ist

wichtig, dass das Ergebnis inklusiver aller Nachkommastellen in das Stylesheet eingetragen wird, sodass keine Rundungsfehler bei der Umrechnung durch den Browser entstehen (vgl. Ertel & Laborenz, 2016, S. 33ff.). Nach demselben Prinzip werden alle Spalten und die Abstände zueinander im Gitter berechnet. Somit ermöglicht diese Vorgehensweise aus einem starrem ein flexibles Layout zu machen.

Im mobilen Kontext würde dieses Gitter die Elemente oder Inhalte einer Website horizontal stauchen oder dehnen und damit unlesbar machen. Damit einher geht, dass die Usability auf kleinen Bildschirm-größen erheblich beeinträchtigt wird. Hierbei zeigt sich die Notwen-digkeit der sogenannten Media Queries, die in Kapitel 4.3 näher er-läutert werden.

4.1.2. Layouttypen

Damit Websites auf unterschiedlichsten Geräten und Bildschirmgrö-ßen dargestellt werden können, bedarf es Konzepte, wie sich das Layout einer Website im Browser verhalten soll. 2009 beschrieb be-reits Zoe Mickley Gillenwater in ihrem Buch „Flexible Web Design“ die Layouttypen: fixed, fluid, elastic und hybrid. Diese stellen sich wie folgt dar:

4.1.2.1. Starres Layout (fixed)

Bei einem starren Layout werden die Elemente einer Website und so-mit auch die Spalten des Gestaltungsrasters auf eine feste Breite de-finiert, die auf Pixelwerten basieren. Die Website nimmt einen festge-legten Bereich im Browser ein und kann nicht auf die unterschied-lichen Bildschirmgrößen angepasst werden. Bei kleineren Bildschir-men entstehen horizontale Scrollbalken, da die Website nicht voll-


4.1. Layout


ständig oder proportional verkleinert angezeigt werden kann. Bei grö-ßeren Bildschirmen hingegen ist das Browserfenster größer als die Website und bildet zu viel ungenutzten Freiraum. (vgl. Rohles, 2017, S. 170f.)

(Quelle: Hellwig, J. (2016), Die Layout-Typen einer Website: Fixed, Fluid & Elastic, von https://blog.kulturbanause.de/2012/10/die-layout-typen-einer-website-fixed-fluid-elastic/)

Abbildung 4.2 Exemplarischer Aufbau: Starres Layout

Während früher dieses Layout trotz hoher Usability-Einbußen auf-grund der festen Breiten- und Höhenangaben häufig verwendet wurde, werden heute feste Layouts im Kontext des Responsive Web-design in sogenannten adaptiven Layouts umgewandelt (vgl. ebd. und Hellwig, 2016). Damit fällt das feste Layout außerhalb des Blick-winkels der Arbeit und wird nicht weiter berücksichtigt.

4.1.2.2. Flüssiges Layout (fluid)

Bei einem flüssigen Layout werden die Elemente einer Website nur in der Breite variable angegeben, sodass sich die Website an die Breite des Browserfensters flüssig anpasst. Der zur Verfügung stehenden Platz wird optimal ausgenutzt und die Inhalte einer Website abhängig


4.1. Layout


von der Größe des Browserfensters dargestellt. Infolgedessen kön-nen auf großen Bildschirmen mehr Inhalte abgebildet werden als auf kleinen. Die nötige Flexibilität des Layouts wird dadurch erreicht, dass die Maße der Spalten des Gestaltungsrasters nicht in Pixelwer-ten, sondern in Prozentwerten angegeben werden. Damit verhält sich die Website in horizontaler Ausrichtung flexibel, wohingegen sie in vertikaler Ausrichtung starr bleibt. (vgl. Hellwig, 2016) Gleichzeitig werden dadurch horizontale Scrollbalken vermieden, die die Usability beeinträchtigen würden.


Abbildung 4.3 Exemplarischer Aufbau: Flüssiges Layout

Die Umsetzung des flüssigen Layouts gestaltet sich wesentlich kom-plizierter als die Umsetzung des festen Layouts, aufgrund dessen das alle Elemente einer Spalte in der Breite skalierbar sein müssen. Ab bestimmten Größen sind mithilfe von Media Queries oder CSS-No-tationen Anpassungen vorzunehmen. Beispielsweise können bei grö-ßeren Bildschirmen durch die flüssige Breite die Zeilen zu lang wer-den und bei kleineren zu schmal. Beides beeinträchtigt die Leserlich-


4.1. Layout


keit und gleichzeitig die damit verbundene Usability einer Website (vgl. Kadlec & Fröhlich, 2013, S. 28). Somit bildet das flüssige Layout die Grundlage für das Responsive Webdesign und muss durch Anpas-sungen auf die unterschiedlichsten Bildschirmgrößen abgestimmt werden. Häufig kommt das flüssige Layout bei inhaltsschweren Web-sites, wie Online-Shops, zum Tragen. Daraus lassen sich folgende Vor- und Nachteile des Layouts ableiten:

• optimale Platznutzung • mehr Inhalte können dargestellt werden • mit Anpassung das „echte“ Responsive Webdesign

• komplexe Umsetzung • aufwändige Anpassungen sind nötig (vgl. Hellwig, 2016)

4.1.2.3. Elastisches Layout (elastic)

Bei einem elastischen Layout werden die Elemente einer Website so-wohl in der Breite als auch in der Höhe variable angegeben, sodass dieses Layout proportional zum Browserfenster skaliert werden kann. In der Regel werden dazu die Zeilen und Spalten des Gestaltungsras-ters in den Maßeinheiten em, % und neuerdings in rem notiert (vgl. Hellwig, 2016). Die Maßeinheit em bezieht sich beispielsweise auf die aktuelle Schriftgröße und bietet eine starke typografische Kontrolle. Das Layout reagiert dadurch nicht auf Änderungen des Browserfensters, sondern auf die der Schriftgröße. Dieses Verhalten ist in den Browsern als sogenanntes Page-Zoom bekannt. (vgl. Ertel & Laborenz, 2016, S. 30)

Das elastische Layout ist aufgrund der Flexibilität sehr schwierig in der Umsetzung und daher auch sehr selten. Sowohl die Inhalte als auch die eingebundenen Medien der Website müssen flexibel bezie-hungsweise transformationsfähig sein. Besonders problematisch wird dies bei Bildern, da die Bildaussage aufgrund der variablen Hö-hen- und Breitenverhältnisse gegebenenfalls beeinträchtigt wird. All-gemein ist bei der Umsetzung dieses Layouts zu beachten, wie sich

Vorteile

Nachteile


4.1. Layout


die Elemente einer Website im jeweiligen Kontext verhalten. (vgl. Hellwig, 2016)


Abbildung 4.4 Exemplarischer Aufbau: Elastisches Layout

Ein elastisches Layout eignet sich immer dann, wenn nur wenig In-halte abgebildet werden und der zur Verfügung stehende Platz opti-mal ausgenutzt werden soll. Im Hinblick auf die Usability umgeht die-ses Layout die lästigen Scrollbalken auf kleinen Bildschirmen. Anwendung findet das Layout bei Websites mit großen Foto- oder Vi-deoelementen. (vgl. ebd.) Daraus ergeben sich folgende Vor- und Nachteile:

• optimale Platznutzung • Inhalte und eingebundene Medien der Websites skalieren sich

proportional

• komplexere Umsetzung • aufwändige Anpassung der Inhalte und Medien (vgl. Hellwig,

2016)

Vorteile

Nachteile


4.2. Flexibel Bilder und Medien


4.1.2.4. Hybrides Layout (hybrid)

„Die letzte Layoutoption besteht in einem hybriden Layout, das zwei oder mehr der vorangehend beschriebene Layouttypen kom-biniert.“ (Kadlec & Fröhlich, 2013, S. 29)

Das bedeutet, dass beispielsweise das anfänglich für herkömmliche Desktop-PCs definierte feste Layout ab einer bestimmten Bildschirm-größe zu einem flüssigen Layout wird, um so die Website für mobile Endgeräte anzupassen. Hierbei werden die fixen Angaben bestimm-ter Elemente, um prozentuale Angabe ergänzt, sodass die Website im Browser den Platz optimal ausnutzen kann. Beim elastischen Layout werden beispielsweise nur einige Inhalte, wie zum Beispiel Fotohin-tergründe, elastisch gestaltet. Andere Elemente einer Website kön-nen, wie beispielsweise die Navigation, in diesem Kontext flüssig oder fest gestaltet sein. (vgl. Hellwig, 2016)


4.2.1. Grundlage

„Ein Bild sagt mehr als tausend Worte.“ (Metapher)

Neben dem Layout sollten auch andere Inhaltselemente einer Web-site, wie Bilder und Videos, flexible dargestellt werden. Insbesondere sind Bilder bei der Gestaltung von Websites und deren Usability enorm wichtig. Zum einen können sie komplexe Zusammenhänge verständlicher wiedergeben und zum anderen den Informationsge-halt der Website auflockern (vgl. Keßler et al., 2015, S. 462). Dabei stellen Bilder mit ihren standardmäßigen fixen Abmessungen im Kon-text des Responsive Webdesigns eine große Herausforderung dar (vgl. Ertel & Laborenz, 2016, S. 49). Einen festgelegten Standard, auf den zurückgegriffen werden kann, um Bilder für die Vielzahl mobiler Endgeräte optimiert auszugeben, gibt es nicht. Daher bietet das Re-sponsive Webdesign vielmehr unterschiedliche Herangehensweisen,




um die Inhaltselemente einer Website flexibel darzustellen. (vgl. Hahn, 2016, S. 601)

4.2.2. Herausforderungen

Eine wesentliche Herausforderung bei der Implementierung von Bil-dern und Videos ist die Datenmenge und die damit verbundene Da-tenübertragung. Während bei herkömmlichen Desktop-PCs eine schnelle und ausreichende Internetverbindung vorausgesetzt werden kann, ist diese im mobilen Kontext vom gewählten Mobilfunkanbieter beziehungsweise -vertrag und der aktuellen Netzabdeckung abhängig (vgl. Laborenz, 2016, S. 205). Daher sollten Bilder und Videos einer reaktionsfähigen Website, wie bereits in Abschnitt 3.1.2 erwähnt, weitestgehend ressourcenschonend gestaltet sein.

(Quelle: Diagramm in Anlehnung an Dutton, S. (2018). Multi-Device Content, abgerufen 12. Au-gust 2018, von https://developers.google.com/web/fundamentals/design-and-ux/respon-sive/content)

Abbildung 4.5 Durchschnittliche Datenmenge einer Website nach Inhaltsart

Abbildung 4.5 zeigt den erheblichen Einfluss der Bild- und Videoda-ten in Bezug auf die durchschnittliche Datenmenge einer Website. Dabei beanspruchen sie annähernd drei viertel (73,9%) des Speicher-platzes der Website. Daher sollten Bilder und Videos eine geringe Da-tenmenge aufweisen, sodass diese schnell zur Verfügung gestellt

62,6%17,0%

11,3%

2,3% 2,3% 2,3%

Images

Scrips

Video

CSS

Fonts

HTML

Other




werden können. Infolgedessen sinkt die Latenzzeit der Website und Nutzer müssen nicht lang auf die Inhalte der Website warten (vgl. Keßler et al., 2015, S. 463).

Eine weitere Herausforderung sind die unterschiedlichen Bildschirm-auflösungen, wie bereits in Abschnitt 3.1.1 erläutert. Im Vergleich zu herkömmlichen Bildschirmen besitzen hochauflösende Bildschirme, wie beispielsweise die Retina-Displays von Apple, eine viel höhere Pixeldichte. Die hochauflösenden Bildschirme können auf derselben Fläche viermal so viele Pixel darstellen. Dadurch ist ein Pixel so klein, dass er für das menschliche Auge nicht mehr unterscheidbar ist und die Inhaltselemente (Bild und Text) einer Website scharf dargestellt werden. Zwar entspricht ein Pixel des Bildes auch einem Pixel auf dem Retina-Display, jedoch werden dafür viermal so viele und klei-nere Pixel abgebildet. (vgl. Hellwig, 2013) Bilder, die nicht für solche Bildschirme optimiert sind, werden hochskaliert und sehen auf hoch-auflösenden Displays unscharf aus (vgl. Hahn, 2017, S. 603).

4.2.3. Implementierung

Im Kontext des Responsive Webdesigns stehen bei der Implementie-rung von Bildern und Videos somit die beschriebenen Herausforde-rungen im Vordergrund. Daher haben sich eine Vielzahl an Herange-hensweisen, wie beispielsweise das Srcset-Attribut, CSS Sprites und Media Queries entwickelt, die sich den Herausforderungen der geringen Datenmenge und der Darstellungsqualität auf hochauflö-senden Bildschirmen verschrieben haben. Im nachfolgenden werden aus Gründen der Übersichtlichkeit nur zwei Implementierungsmög-lichkeiten von Bildern vorgestellt.

Bilder werden in jedem aktuellen Browser in ihrer vollen Größe dar-gestellt. Die Bilder sind dabei durch die Größeneigenschaften – also der Breite und Höhe – in Pixel angegeben. Während in starren Lay-outs die fixe Höhe und Breite angegeben wurden, werden diese in fle-xiblen Layouts, wie alle anderen Elemente der Website, prozentual

Prozentuale Definition




definiert, um auf Veränderung im Kontext reagieren zu können. (vgl. Ertel & Laborenz, 2016, S. 49ff. und Zillgens, 2013, S. 27ff.)

Bei Bildern, die im HTML-Code keine Attribute zugewiesen bekom-men haben, erfolgt die prozentuale Größendefinition ganz einfach.

HTML-Code:

<img src="beispielbild.png" alt="bildbeschreibung"/>

CSS-Code:

img {

max-width:100%; height:auto; }

Codebeispiel 4.1 Prozentuale Größendefintion von Bildern

Durch die CSS-Eigenschaft max-width passen sich Bilder flexibel an. Zum einen werden Bilder nicht größer als ihre tatsächliche Pixel-breite skaliert und zum anderen wird die Breite des umgebenen Ele-ments, in dem das Bild platziert ist, nicht überschritten. Die Eigen-schaft height: auto dient dazu die Höhendefinition im <img>-Tag des Bildes zu überschreiben und verhindert damit, dass das Bild nicht unproportional skaliert wird. (vgl. ebd) Diese Herangehensweise ist in Verbindung mit einem flexiblen Layout am gebräuchlichsten, um Bil-der flexibel zu machen (vgl. Hahn, 2017, S. 601).

Ebenso ist es möglich Bilder, die als Hintergrundbilder (back-ground-image) gesetzt sind, prozentual zu definieren. Hierbei legt die CSS-Eigenschaft background-size fest, wie sich Bilder bezie-hungsweise die Größe der Bilder unabhängig der Darstellungsoptio-nen verhalten. (vgl. SELFHTML e. V., o. J.) Die wichtigsten Eigenschaf-ten dabei sind laut SELFHTML e. V., o. J.:

“auto, Voreinstellung übernimmt die Maße der Grafik, keine Ska-lierung contain, passt unter Beibehaltung des Seitenverhältnisses die größere Seite der Grafik in den Anzeigebereich ein




cover, passt unter Beibehaltung des Seitenverhältnisses die klei-nere Seite der Grafik in den Anzeigebereich ein, ergibt eine voll-ständige Füllung des Anzeigebereiches.“

Darüber hinaus wird mit der zusätzlichen CSS-Eigenschaft back-ground-position in flexiblen Layouts das Hintergrundbild in Bezug zum umgebenen Element platziert. Die Werte left, center, right stehen für die horizontale Positionierung und top, center, bottom für die vertikale Positionierung zur Verfügung. (vgl. ebd.)

Weiterhin ist es möglich Bilder durch das umgebene Element beliebig zuzuschneiden. Dazu erhält das Element die Eigenschaft overflow: hidden. Die Größe des Bildes bleibt unverändert und wird bei Skalie-rung des Rasters durch das umgebene Element beschnitten (vgl. Ertel & Laborenz, 2016, S. 50).

Media Queries, welche im nachfolgenden Kapitel 4.3 ausführlicher beschrieben werden, stellen in Verbindung mit den CSS-Eigenschaf-ten eine weitere Herangehensweise dar, Bilder flexibel darzustellen. Die Eigenschaften, die von Media Queries abgefragt werden können, wie beispielsweise die Pixeldichte, legen den Grundstein, um die Her-ausforderung der unterschiedlichen Bildschirmauflösungen zu umge-hen.

Im HTML-Code werden zwei unterschiedliche Bilder hinterlegt. Eines für hochauflösende Bildschirme, das andere für herkömmliche Bild-schirme. In Verbindung mit den CSS-Eigenschaften display: none und display: block können Media Queries auslesen, mit welcher Bildschirmauflösung die Website beziehungsweise das Bild abgeru-fen wird. Demnach blenden sie das richtige Bild ein oder aus.

Trotzdem ist diese Art der Implementierung kritisch zu sehen. Zum einen müssen zwei Bilder erstellt und zum anderen mit mehr Code-zeilen eingebunden werden, wodurch die Datenmenge der HTML- beziehungsweise CSS-Datei steigt. Weiterhin müssen zwei Bilder im <img>-Tag geladen werden, sodass es bei dieser Herangehensweise

Media Queries


4.3. Media Queries (MQ)


zu Einbußen in der Datenübertragung und folglich der Usability kom-men kann.

Die anderen Herangehensweisen haben ähnliche Probleme, den Her-ausforderungen gerecht zu werden. Die Vielzahl unterschiedlicher Herangehensweisen zeigt, dass bisher kein optimaler Weg gefunden wurde Bilder im Kontext des Responsive Webdesigns flexibel festzu-legen.


4.3.1. Grundlage

Media Queries (MQ) sind ein elementarer Bestandteil des Responsive Webdesigns und greifen ein, sobald die flexiblen Layouts nicht mehr funktionieren beziehungsweise nicht mehr zweckmäßig sind. Auf-grund erheblicher Größenunterschiede der heutigen Bildschirme können die dargestellten Inhalte einer Website nicht einfach unend-lich gedehnt oder gestaucht werden. Daher werden mithilfe von MQ sogenannte Breakpoints (dt. Bruchstelle, Haltemarke) definiert, an denen das Layout umbricht und anders angeordnet wird. (vgl. Zill-gens, 2013, S. 37) Das bedeutet, dass im allgemeinen MQ dazu die-nen die jeweiligen Medieneigenschaften des abrufenden Gerätes, auszulesen und die Website anhand dessen ausrichtet beziehungs-weise anpasst. Daher spricht man auch von einer medienabhängigen Stylesheet-Zuordnung. (vgl. Ertel & Laborenz, 2015, S. 57)

Während es bereits in CSS2 und HTML4 möglich war mit der Medien-abfrage nach sogenannten „mediatypes“ (dt. Medientypen) unter-schiedliche Anzeige- und Ausgabegeräte zu erkennen, um beispiels-weise ein eigenes Druck-Stylesheet einer Website zuweisen zu können, wurde mit der CSS3 Spezifikation die Abfrage, um die soge-nannten „mediafeatures“ (dt. Medieneigenschaften) erweitert.




Mithilfe der MQ wurden die Medientypen weiter eingegrenzt und um wichtige, im Kontext des Responsive Webdesigns besonders rele-vante, Eigenschaften ergänzt. Beispielsweise fragen Media Queries wichtige Medieneigenschaften der Geräte, wie Bildschirmgröße, Viewportgröße und Ausrichtung ab (vgl. Ertel & Laborenz, 2016, S. 61). Weitere Eigenschaften, die abgefragt werden können, zeigt Tabelle 4.1. Diese zeigt lediglich einen exemplarischen Auszug der Abfragemöglichkeiten.

Eigenschaft Beschreibung width (min-/max-) Breite der sichtbaren Ausgabe (Viewport) height (min-/max-) Höhe der sichtbaren Ausgabe (Viewport) device-width (min-/max-) Breite des Displays des Ausgabegerätes device height (min-/max-) Höhe des Displays des Ausgabegerätes orientation Prüft die Ausrichtung eines Ausgabegerätes, portrait

oder landscape aspect-ratio (min-/max-) Prüft das Seitenverhältnis der sichtbaren Ausgabe device-aspect-ratio (min-/max-) Prüft das Seitenverhältnis des Ausgabegerätes

Tabelle 4.1 Abfragemöglichkeiten der CSS3 Media Queries (MQ)

Durch die Abfrage der Medieneigenschaften des jeweiligen Gerätes können Websites auf die jeweiligen Eigenschaften reagieren und leis-ten damit einen erheblichen Beitrag zur Usability.

4.3.2. Syntax

Syntaktisch ist der Aufbau der MQ äquivalent zu den Medientypen. Ein MQ beginnt am Anfang mit dem Schlüsselwort @media und star-tet damit gleichzeitig die Abfrage nach den jeweiligen Eigenschaften. Das folgende Codebeispiel zeigt den abstrakten Aufbau eines MQ:

@media screen {

/* CSS-Anweisungen */ }

Code-Beispiel 4.2 Abstrakter Aufbau eines CSS3 Media Queries (MQ)

Hierbei definiert die Angabe @media das Ausgabegerät beziehungs-weise den Medientypen. Print und screen sind die am häufigsten




verwendeten Medientypen. Aufgrund der unzureichenden Browser-unterstützung haben sich die Angaben handheld, tv und projec-tion nicht etabliert. Obwohl es mit der Angabe handheld einen Me-dientypen spezielle für mobile Endgeräte gab, haben sich Endgeräte analog zu den herkömmlichen Desktop-PCs über die Angabe screen im Browser registriert, weswegen die Angabe des Medientyps inner-halb der MQ nicht mehr benötigt wird. Vielmehr dienen die Medienei-genschaften zur Spezifikation für mobile Endgeräte und können durch die Angaben, wie beispielsweise die Viewportgröße, gezielt adres-siert werden. (vgl. Ertel & Laborenz, 2016, S. 60f.)

@media screen (min-width: 64em) {

/* CSS Anweisung für den Viewport */ }

Code-Beispiel 4.3 CSS3 Media Queries (MQ)

Mithilfe des Schlüsselwortes interpretiert der Browser, welches Stylesheet herangezogen werden soll. In Bezug auf das Beispiel greift das screen-Stylesheet ab einer Mindestbreite (min-width) von 64 em. Innerhalb der geschweiften Klammern ist, das für die angege-bene MQ-Definition entsprechende Stylesheet definiert und in der Maßeinheit em angegeben, welches relativ zur Standard Browser-schriftgröße von 16 px steht. Relative Einheiten für CSS-Layouts wer-den in Tabelle 4.3 näher erläutert. MQ setzen sich in der Regel aus mehreren Komponenten zusammen und können mit logischen Ope-ratoren verknüpft werden. Tabelle 4.2 listet mögliche Operatoren auf.

Operator Beschreibung not Negiert den MQ und wird nicht interpretiert, sofern der MQ deckungsgleich ist only Verhindert die Interpretation der Stylesheets, wenn ältere Browser keine MQ

unterstützen and Verknüpft Medientyp und -eigenschaft miteinander or, (,) Setzt mehrere MQ (Typ und Eigenschaft) in Verbindung; das Komma ent-

spricht dem logischen or (übliche CSS-Schreibkonvention) Tabelle 4.2 Logische Operatoren eines CSS3 Media Queries (MQ)




Grundsätzlich können MQ sowohl in separaten CSS-Dateien als auch inline im CSS-Dokument deklariert werden. Die externe Einbindung beziehungsweise Zuweisung von Stylesheets für die jeweiligen Aus-gabemedien erfolgt über das media-Attribut im <link>-Element des Headers der HTML-Datei und sieht wie folgt aus:

<!DOCTYPE html>

<html>

<head>

<title>Einbindung über das Link Element</title>

<link rel="stylesheet" type="text/css" href="style.css"

media="screen" </link>

<link rel="stylesheet" type="text/css" href="print.css"

media="print" </link>

</head>

<body>

</body>

</html>

Code-Beispiel 4.4 Einbindung der Media Queries (MQ) über das Link-Element

Im Hinblick auf die Usability einer Website ist diese Deklaration nicht zu empfehlen, da durch die HTTP-Requests die Ladezeit einer Webs-ite zu- und damit die Performance abnimmt und folglich nicht allzu benutzerfreundlich ist (vgl. Kadlec & Fröhlich, 2013, S. 77-78).

Die Einbindung beziehungsweise Zuweisung innerhalb des CSS-Dokuments ist dagegen eine echte Alternative. Hierbei erfolgt die De-klaration über die Anweisung @media und darf mehrmals, jedoch nicht verschachtelt, innerhalb des Dokuments verwendet werden (s. Code-Beispiel 4.3).

Infolgedessen ist nur ein HTTP-Request notwendig, welcher sich, im mobilen Kontext, besonders auf die Performance und damit positiv auf die Usability der Website auswirkt. Trotzdem hat auch dieses Vor-gehen einen großen Nachteil. Das CSS-Dokument kann schnell zu groß werden und ist damit schwer zu pflegen. Daher hängt die Art der

Einbindung




Einbindung beziehungsweise Zuweisung von MQ von der Komplexität und der jeweiligen Website ab.

4.3.3. Viewport

Zusätzlich sollten zu den eigentlichen Stylesheets der Viewport defi-niert werden, damit Websites auf die jeweiligen Medieneigenschaften der Geräte reagieren und kontextsensitive Anpassungen vornehmen können. Im mobilen Kontext ist mit dem Viewport der sichtbare Be-reich des Ausgabemediums gemeint. Ohne diese Angabe könnte es sein, dass die Darstellung reaktionsfähiger Websites auf mobilen Endgeräten zu Problemen führt und damit die Usability einer Website beeinträchtigt wird. Damit das nicht passiert muss im <head>-Ele-ment des HTML-Dokuments der Viewport mit folgender <meta>-Be-schreibung definiert werden:

<meta name="viewport"

content="kommaseparierte Viewporteigenschaften">

Code-Beispiel 4.5 Viewportbestimmung über die Metabeschreibung

Dies hat historische Gründe. Als 2007 das erste iPhone erschien, wa-ren nur wenige Websites für diese Bildschirmgröße angepasst. Daher verwendete Apple für die Darstellung der Websites ein spezielles Rendering. Dabei wurden die Websites zunächst auf eine imaginäre Breite von 980 px gerendert und danach auf die tatsächliche Bild-schirmbreite von 320 px verkleinert. Andere Hersteller adaptieren dieses Verfahren und heutzutage wird es im Responsive Webdesign als Standard gesehen. Somit ist die Angabe des Viewports von großer Bedeutung und es sollte darauf geachtet werden, dass die korrekte Bildschirmbreite (device-width) als Viewport (width) angegeben ist. (vgl. Zillgens, 2013, S. 47ff.)

Im Kontext des Responsive Webdesigns sind Websites für die unter-schiedlichsten Viewportgrößen bereits angepasst, weswegen die An-weisung initial-scale, minimum beziehungsweise maximum-scale=1.0 und user-scalable=0 die Zoomfunktion der Website


4.4. Reaktionsfähige Webtypografie


durch den Nutzer verhindert. Die MQ ermöglichen den Viewport und die benötigten Breakpoints einer Website für unterschiedliche Endge-räte festzulegen.


„Neben den von Ethan Marcotte ursprünglich definierten drei Hauptbestandteilen „flexibles Raster“, „flexible Bilder und andere eingebundene Medien“ sowie „Mediaqueries“, gibt es noch […] weiterer Bereiche, die in diesem Zusammenhang wichtig sind. Ei-ner davon betrifft die reaktionsfähige Typografie.“ (Zillgens, o. J.)

Oliver Reichenstein (2006) sagte bereits in einem bekannten Aufsatz zum Thema „Web Design is 95% Typography“ und meinte damit, dass die Typografie einen erheblichen Einfluss auf den Gesamtein-druck einer Website hat. Dabei beeinflusst werden die Leserlichkeit und Lesbarkeit. Oft werden die beiden Begriffe als Synonym verwen-det, obwohl sie deutliche Unterschiede aufweisen. Die Leserlichkeit umfasst, wie bereits in Kapitel 2.3 erwähnt, alle typografischen Fak-toren, wie Schriftart, Schriftgrad, Zeilenhöhe, Abstände und Zeilen-länge. Die Lesbarkeit umfasst darüber hinaus noch formelle und in-haltliche Faktoren, wie Zeichensetzung, Rechtschreibung, Satzlänge etc. (vgl. Rohles, 2017, S. 206)

Im Hinblick auf den mobilen Kontext müssen die typografischen Fak-toren auf den unterschiedlichsten Gerätegrößen und -eigenschaften angepasst werden und sind damit ein maßgebliches Kriterium für die Leserlichkeit der dargestellten Inhalte beziehungsweise der Usability einer Website. Die wesentlichen Elemente der Typografie und deren Einsatz in reaktionsfähigen Websites sind Bestandteil des nachfol-genden Kapitels.




4.4.1. Schriftgröße

Einer der wichtigsten typografischen Entscheidungen ist die Wahl der Schriftgröße, um auch Schriften im Kontext des Responsive Webde-signs flexibel festzulegen. Die Schriftgröße leistet einen erheblichen Beitrag zum visuellen Effekt des Textes im Web und ist bedeutend sowohl für die Leserlichkeit als auch für die Struktur. Große Elemente werden im Gegensatz zu kleinen Elementen als wichtiger wahrge-nommen und schaffen somit eine inhaltliche Hierarchie. Ein deutli-cher Größenkontrast von großen Elementen, wie Überschriften, zu kleinen Elementen, wie Fließtext, und dessen Relationen zueinander haben einen visuellen Rhythmus zur Folge, bei dem die Schriftgröße mit der Wichtigkeit korrespondiert.

Vor allem im Kontext des Responsive Webdesigns muss definiert werden, wie sich der Text auf den unterschiedlichen Bildschirmbrei-ten verhalten soll. Um ein ruhiges Schriftbild zu erzielen, sind inner-halb des Fließtextes unterschiedliche Schriftgrößen zu vermeiden. Andere stilistische Mittel, wie beispielsweise Weißraum, dienen ne-ben dem Anheben der Schriftgröße dazu, Überschriften und Fließtext voneinander abzuheben und damit ihre Wichtigkeit auszudrücken. Auch dienen sie dem Kriterium der Unterscheidbarkeit. (vgl. Rohles, 2017, S. 242-244)

In den letzten Jahren zeichnete sich die Tendenz zu größeren Schrift-größen unverkennbar ab. Zum einen liegt das an der technischen Ent-wicklung, genauer gesagt, bei der Bildschirmauflösung der jeweiligen Geräte und zum anderen am Betrachtungsabstand zum Bildschirm.

Schriftgrößen- wahrnehmung




„Während früher Bildschirmauflösungen ab 800 x 600 (oder ganz früher 640 x 480) bei 14 und 15 Zoll Bildschirmdiagonale üblich waren und damit die Auflösung sowie der Abstand des Betrach-ters vom Bildschirm eher kurz war, werden heute hochauflösende und großformatige Monitore – zum Teil auch mehrere – eingesetzt. Damit hat sich […] der Betrachtungsabstand zum Bildschirm ver-größert, und Schriften gleicher nomineller Größe wirken kleiner.“ (Ertel & Laborenz, 2016, S. 142)

Das bedeutet, dass die verschiedenen Endgeräte und deren unter-schiedliche Nutzung dazu führen, dass es einen erheblichen Unter-schied macht, ob zum Lesen der Inhalte einer Website ein Smart-phone, Tablet oder ein stationärer Desktop-PC verwendet wird. In der Regel variiert die Entfernung zwischen Betrachter und dem jewei-ligen Endgerät stark. Im mobilen Kontext beispielsweise kann die Schriftgröße des Fließtextes etwas kleiner gewählt werden, als auf stationären Geräten, da der Abstand der Augen zum Bildschirm be-ziehungsweise des Geräts geringer ist und kleine Schriften deutlich

(Quelle: Reichenstein, O. (2012), Responsive Typography: The Basics, https://ia.net/topics/responsive-typography-the-basics)

Abbildung 4.6 Unterschiedliche Schriftgrößenwahrnehmung in Abhängigkeit des Be-trachtungsabstandes




größer wahrgenommen werden. Dabei ändert sich die Schriftgröße proportional zum Betrachtungsabstand. Daher ist die richtige Schrift-größe in Bezug auf den Kontext und nach der DIN 1450 zu wählen (s. Kapitel 2.4).

Mit der CSS-Eigenschaft font-size kann die Schriftgröße festgelegt und in verschiedenen Einheiten angegeben werden. Die wichtigsten zeigt die Tabelle 4.3:

Einheit Typ Beschreibung Anmerkung Pixel (px) absolut Angaben in Pixel-Werten Relativ zur Auflösung des Monitors pt absolut Angaben in Punkt, ähnlich in

Print-Designs Nicht gut skalierbar, durch enorme Unterschiede zwischen Browsern nicht für Screen Design geeignet

em relativ dezimal, abhängig von Schrift-größe des Elternelements

aktuelle Schriftgröße (1em = aktu-elle Schriftgröße im aktuellen Kon-text)

rem relativ dezimal, abhängig von Schrift-größe des Wurzelelements

rem wird für das <html>Element einmalig definiert

% relativ prozentual, abhängig von Schriftgröße des Elternelements

Relativ zur Schriftgröße des Eltern-elements

vw relativ relativ zur Viewportbreite 1vw = 1% der Viewportbreite vh relativ relativ zur Viewporthöhe 1vh = 1% der Viewporthöhe vmin relativ relativ zum Viewport 1vmin = 1% des kleineren Wertes

(Fensterbreite oder -höhe) vmax relativ relativ zum Viewport 1vmax = 1% des größeren Wertes

(Fensterbreite oder -höhe) Tabelle 4.3 Übersicht der Webeinheiten

Bisher war die klassische Einheit für den Einsatz von Schriften und Elementen einer Website px (Pixel), da diese zunächst eine exakte Kontrolle über alle Elementgrößen bot. Die Einheit Pixel ist im Ver-hältnis zu anderen vergleichsweise statisch, weswegen sie nicht auf Veränderungen im Kontext reagieren kann. Zum einen „gibt es für Schriftgrößen in Pixeln keine Kaskadierung ,d. h, die Schriftgröße des

Statische Angabe: Pixel




Elternelements hat keine Auswirkungen auf die Schriftgröße der Kin-derelemente“ (Kadlec & Fröhlich, 2013, S. 31), was heute nicht mehr praktikabel ist. Zum anderen bürgen sie hinsichtlich der mangelnden Skalierbarkeit potenzielle Probleme bei der Barrierefreiheit der Website. Daher ist die Schriftgröße in Pixel kein flexibler und zu-kunftsorientierter Ansatz, weshalb im Kontext des Responsive Web-designs die zunehmende Nutzung der Einheit em zu erkennen ist. (vgl. ebd. und Ertel & Laborenz, 2016, S. 137)

Im Gegensatz zu Schriften in px sind Schriftmaße in em und % we-sentlich flexibler. Diese Einheiten ermöglichen eine reaktionsfähige Anpassung auf unterschiedliche Bildschirmgrößen, durch die brow-serübergreifende Skalierbarkeit und Kaskadierung. In der Kaskadie-rung liegt auch das eigentliche Problem der Maßeinheiten. Diese pas-sen die Schriftgröße in Bezug zum jeweiligen Elternelement an. Sobald sich der Kontext verändert, ändert sich auch die Abhängigkeit zum Elternelement. (vgl. Ertel & Laborenz, 2016, S. 139) Codebei-spiel 4.2 visualisiert das Problem der Einheit em:

<!DOCTYPE html>

<html>

<head>

<title> Abhängigkeit von der Maßeinheit em</title>

<style>

body {

font-size: 1.5em; color: black; }

.container {

font-size: 2em; color: black; }

.untercontainer {

font-size: 1.5em; color: darkred }

</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetuer

adipiscing elit.</p>

<div class="container">


Relative Angaben: em und %





<div class="untercontainer">



</div>

</div>

</body>

</html>

Codebeispiel 4.2 Abhängigkeit von der Maßeinheit em

In diesem Beispiel wird die Basisschriftgröße im <body>-Element auf 1.5em festgelegt. Das im <body> enthaltene <container>-Ele-ment wird hingegen auf eine Schriftgröße von 2em festgelegt. Das Element <untercontainer>, welches innerhalb des <body>-Ele-ments platziert ist, erhält die Schriftgröße von 1.5em. Entsprechend der Abhängigkeit variieren die Schriftgrößen. Für das Element <un-tercontainer> dient jetzt nicht mehr die im <body> festgelegte Schriftgröße von 1.5em als Referenz, sondern die im <container>-Element enthaltene Schriftgröße von 2em. Damit potenziert sich die Schriftgröße und weicht von der im <body> ursprünglich definierten Schriftgröße erheblich ab.

(Quelle: Eigener Screenshot)

Abbildung 4.7 Abhängigkeit der Maßeinheit em – Ergebnis im Browser




Die Schriftgröße mit der Einheit rem festzulegen gestaltet sich deut-lich einfacher, da diese die Schriftgröße relativ zur Schriftgröße vom Wurzelelement (<html>) der Website definiert. Rem bedeutet „root em“ und umgeht die bei der em Einheit aufgetretene Problema-tik der Kaskadierung bei verschachtelten Elementen. Daher hat sich die Maßeinheit rem für die Schriftsetzung im Web bewährt, da sie mehr Kontrolle durch den Bezug auf das Root-Element bietet. (vgl. Laborenz, 2016, S. 251)

Im Beispiel wäre damit die im <body> angegebene Schriftgröße von 1.5em vorherrschend und stellt diese Angabe in Relation zu allen fol-genden rem-Angaben. Zur Veranschaulichung das angepasste Bei-spiel mit der Einheit rem:

<!DOCTYPE html>

<html>

<head>

<title> Abhängigkeit von der Maßeinheit rem</title>

<style>

body {

font-size: 1.5rem; color: black; }

.container {

font-size: 2rem; color: black; }

.untercontainer {

font-size: 1.5rem; darkred }

</style>

</head>

<body>



<div class="container">



<div class="untercontainer">



</div>

</div>

Normierte relative Angabe: rem




</body>

</html>

Codebeispiel 4.2 Abhängigkeit von der Maßeinheit rem

(Quelle: Eigener Screenshot)

Abbildung 4.8 Abhängigkeit der Maßeinheit rem – Ergebnis im Browser

Moderne Einheiten wie vw, vh und vmin/vmax bieten im Kontext des Responsive Webdesigns weitere Vorteile. Diese Einheiten beziehen sich auf die aktuelle Viewportgröße und können somit Schriftgrößen relativ zum Viewport flexibel setzen.

„vw bezieht sich auf die Breite (viewport width) und vh auf die Höhe (viewport height). Dabei entspricht 1vw 1% der Breite des Viewports und 1vh […] 1% der Höhe des Viewports.“ (Ertel & Laborenz, 2016, S. 140)

Das bedeutet, dass die Schriftgröße mit dem zur Verfügung stehen-den Raum stetig mitwächst. Die Einheiten vmin und vmax beschrei-ben jeweils den kleinsten und größten Wert.

„Das heißt, 1vmin ist 1% der Breite oder Höhe des Fensters, je nachdem, welcher Wert im Moment kleiner ist. Vmax funktioniert entsprechend und orientiert sich am größeren der beiden Werte.“ (Ertel & Laborenz, 2016, S. 140)

Die Wahl relativer Schriftgrößen ermöglicht eine schnelle Anpassung an unterschiedliche Bildschirmgrößen, in dem die Schriftgröße des Elternelements, des Wurzelelements geändert oder in Bezug zum Viewport betrachtet wird. Wie bereits erwähnt, hat sich die Einheit rem als praktikabelste Methode zur Auszeichnung von Schriften etab-liert, wobei diese mit ein wenig Rechenarbeit verbunden ist (vgl. La-borenz, 2016, S. 251f.). Grundsätzlich gilt jedoch, dass es von den

Responsive Einheiten: vh, vw, vmin und vmax




persönlichen Vorlieben und dem jeweiligen Projekt abhängt, welche Einheit verwendet wird.

4.4.2. Zeilenlänge

Ein weiterer wichtiger Faktor, welcher starke Auswirkung auf die Le-serlichkeit einer Website hat, ist die Zeilenlänge. „Bei zu kurzen Zei-lenlängen wird der Lesefluss zu oft unterbrochen, bei zu langen Zeilen findet das Auge die nächste Zeile schlechter.“ (Zillgens, 2013, S. 176) Das bedeutet, dass im Responsive Webdesign ein Kompromiss zwi-schen Leserlichkeit und Raumbedarf gefunden werden muss.

Während es bei statischen Websites möglich war, Texte exakt auf eine optimale Zeilenlänge zu optimieren, bedarf es bei reaktionsfähi-gen Websites neue Mittel und Wege. Das gesamte Schriftbild richtet sich nach der Bildschirmbreite, sodass beispielsweise bei größeren Bildschirmen die Zeilen zu lang werden können.

Robert Bringhurst, ein kanadischer Typograf, beschreibt 2004 in sei-nem Buch „The Elements of Typographic Style“ eine optimale Zei-chenanzahl von 45 und 75 Zeichen pro Zeile. Die DIN 1450 hingegen empfiehlt je nach Textart mindestens 35 und maximal 80 Zeichen pro Zeile (vgl. DIN 1450, 2013, S. 13). Daher ist die Zeilenlänge bezie-hungsweise die Zeichenanzahl pro Zeile eine relative Angabe auf-grund der unterschiedlichen Typometrien von Schriften.

Infolgedessen ist es sinnvoll, die Zeilenlänge in Abhängigkeit der Schriftgröße zu berechnen. Philipp Luidl, ein deutscher Typograf, be-schriebt bereits 1989 in seinem Buch „Typografie: Herkunft, Aufbau, Anwendung“ folgende Faustformel:

8:9;:A;äA<:(9A\\) = 5Hℎ=93B<=öß:(9A^B) × 10

Die Zeilenlänge muss im nächsten Schritt von mm in px umgerechnet werden, um den Wert für das Web nutzbar zu machen.

Unabhängig der Zeichenanzahl pro Zeile sollte dabei laut Luidl eine Zeile mindestens acht Wörter umfassen. Eine weitere Faustformel




besagt, von etwa zehn Wörtern pro Zeile auszugehen (vgl. Rohles, 2017, S. 249).

Die bereits in Kapitel 4.3 vorgestellten Media Queries bieten dem Re-sponsive Webdesign die Möglichkeit, die Zeilenlänge für unterschied-liche Bildschirmgrößen anzupassen und somit eine optimale Leser-lichkeit beziehungsweise eine gute Usability zu gewährleisten. Trent Walton beschreibt 2012 in seinem Blogartikel „Fluid Type“ eine Her-angehensweise, welche die Optimierung der Zeilenlänge mithilfe von Breakpoints vereinfacht. Dabei platziert er in einem kurzen Text, wel-cher etwa 100 Zeichen umfasst, nach 45 und nach 75 Zeichen ein Sternchen. Bricht die Zeile vor dem ersten Sternchen um, bedeutet dies, dass die Zeilenlänge zu kurz ist. Bricht die Zeile nach den beiden Sternchen um, ist sie zu lang und die Schriftgröße muss angehoben werden. Die optimale Zeilenlänge ist dann erreicht, wenn die Zeile in-nerhalb der beiden Sternchen umbricht.

(Quelle: Walton, T. (2012), Fluid Type, https://trentwalton.com/2012/06/19/fluid-type/)

Abbildung 4.9 Zeilenlänge nach Trent Walton

Neben der Veränderung der Schriftgröße kommt bei zunehmender Breite die Aufteilung der Hauptspalte in mehrere Spalten als Möglich-keit hinzu, um eine optimale Zeilenlänge zu erreichen. Die Anzahl der Spalten sollte sich an der optimalen Zeichenanzahl pro Zeile in Ab-hängigkeit der Schriftgröße orientieren, da sonst auch hier die Leser-lichkeit gefährdet ist. (vgl. Ertel & Laborenz, 2016, S. 145f.)

4.4.3. Zeilenabstand

Im direkten Verhältnis zur Zeilenlänge steht der Zeilenabstand und stellt einen weiteren typografischen Faktor dar. Im alltäglichen Sprachgebrauch wird er häufig mit dem sogenannten Durchschuss




verwechselt. Der Durchschuss beschreibt den Abstand zwischen zwei Zeilen, wohingegen der Zeilenabstand den Abstand zwischen den Grundlinien einschließlich des Durchschusses beschreibt (vgl. Bei-nert, 2018). Den Unterschied veranschaulicht die nachfolgende Ab-bildung 4.10.

(Quelle: Beinert, W. (2018). Zeilendurchschuss. https://www.typolexikon.de/zeilendurch-schuss/

Abbildung 4.10 Unterschied zwischen Zeilendurchschuss und -abstand

Bei zunehmender Zeilenlänge sollte somit auch der Zeilenabstand größer werden (vgl. DIN 1450, 2013, S. 24). In der Regel misst ein guter Zeilenabstand mindestens das Doppelte der Versalien-Höhe ei-ner Schrift (s. Abbildung 2.3). Ein zu enger Zeilenabstand erschwert dem Leser die Zeilen voneinander zu unterscheiden, daher empfiehlt das W3C „[…] in seinen Guidelines einen Zeilenabstand vom 1,5-Fa-chen der Schriftgröße. Außerdem sollte der Zeilenabstand größer sein als der Abstand zwischen den Worten in einer Zeile.“ (Ertel & Labo-renz, 2017, S. 144) Der optimale Zeilenabstand beziehungsweise der Durchschuss hängt von der jeweiligen Schriftart und ihrer Ober-, Mit-tel und Unterlänge ab (vgl. Beinert 2018).

Für den Zeilenabstand verwenden die meisten Browser und Program-me, wie etwa Adobe InDesign, einen standardisierten Wert von 1,2




(120%). Dieser wird in der Praxis häufig als zu klein empfunden. Da-durch empfiehlt es sich in der Regel einen größeren Zeilenabstand zu verwenden (vgl. Laborenz, 2016, S. 272). Der Zeilenabstand steht in direktem Zusammenhang mit der Schriftgröße und berechnet sich wie folgt:

8:9;:A_`FB_Aa(9A^C) = b:=B × 5Hℎ=93B<=öß:

(Quelle: in Anlehnung an Laborenz, 2016, S. 272)

Demnach sollte der Zeilenabstand bei herkömmlichen Desktop-PCs höher sein als bei mobilen Endgeräten (vgl. Deutscher Blinden- und Sehbehindertenverband e. V., o. J.-d). Somit kann durch Anpassung des Zeilenabstandes die Leserlichkeit und die damit verbundene Usa-bility einer Website verbessert werden.

Unter der Berücksichtigung der Schriftgröße, der Zeilenlänge und des Zeilenabstandes kann daraus das Raster der Website abgeleitet wer-den. Bei Layoutveränderungen, beispielsweise durch mehrere einge-fügte Spalten, muss beachtet werden, dass Schriftgröße, Zeilenlänge und Zeilenabstand aufeinander abgestimmt werden.

4.4.4. Kontrast

Auch im Hinblick auf den Nutzungskontext der Endgeräte ist der Kon-trast ein wichtiger typografischer Faktor in der reaktionsfähigen Typografie, um die Leserlichkeit der Website zu gewährleisten. Heut-zutage kommen mobile Endgeräte in allen erdenklichen Situationen zum Einsatz. Daher sollte auch die Gestaltung dementsprechend an-gepasst sein. Neben einem gut lesbaren Schriftbild, welches die Schriftart und die Schriftgröße miteinschließt, ist auch ein ausrei-chender Kontrast von großer Bedeutung. Aufgrund der Ästhetik nei-gen Designer dazu hellere Schriftfarben im Web zu verwenden, da diese eleganter aussehen, jedoch die Leserlichkeit eines Textes er-heblich beeinträchtigen. Daher kann das Lesen der dargestellten In-halte der Website bei ungünstigen Lichtverhältnissen erschwert oder sogar unmöglich gemacht werden. (vgl. Zillgens, 2013, S. 191)


4.5. Navigationskonzepte


Aus diesem Grund empfiehlt die Norm 1450 den Lesetext in dunkle-ren Farben zu setzen, da diese den größten Kontrast aufweist (vgl. DIN 1450, 2013, S. 25).


4.5.1. Anspruch und Grundlage

Die Navigation ist einer der wichtigsten und funktionalsten Bereiche einer Website. Eine gut strukturierte und gestaltete Navigation ist die wesentliche Voraussetzung einer benutzerfreundlichen Website. Sie führt den Nutzer, unabhängig vom mobilen Kontext, auf die von ihm gesuchten, wichtigen und relevanten Bereiche einer Website. Gleich-zeitig zeigt sie an, wo sich dieser gerade befindet. (vgl. Ertel & Labo-renz, 2016, S. 247)

Grundlegend dabei ist das Informationsbedürfnis der Nutzer. Die In-halte beziehungsweise die Informationen sind der Grund, weswegen Websites überhaupt aufgerufen werden. Demnach sollte das Layout der Navigation dem eigentlichen Inhalt nachrangig gestellt werden. Somit gilt bei der Gestaltung und Umsetzung einer flexiblen Naviga-tion der Grundsatz „Content over Navigation“; Inhalte zuerst (vgl. Wroblewski, 2011, S. 49).

Hinzu kommt, wie bereits in Abschnitt 3.2.1 dargelegt, dass der Be-such einer Website zeitlich begrenzt ist und in kurzen Intervallen stattfindet. Der Nutzer einer Website hat nur bedingt Zeit, sich mit der Navigation beziehungsweise den Navigationsebenen auseinan-derzusetzen und sollte unmittelbar an die für ihn relevanten Informa-tionen gelangen. Des Weiteren kann eine Navigation mit mehreren Navigationspunkten, im mobilen Kontext, die Inhalte verdrängen und die Steuerung der Website erschweren. So ist es für Nutzer nicht er-




sichtlich, dass sich beispielsweise unterhalb einer raumfüllenden Na-vigation neue Inhalte geladen haben und eine neue Seite öffnet. (vgl. Zillgens, 2013, S. 231ff.)

Daher sollte die Navigation sich dem Nutzer erschließen, sodass die Website-Struktur nachvollziehbar ist und die Inhalte schnell erfasst werden können (vgl. Ertel & Laborenz, 2016, S. 247). Darüber hinaus sollte sie möglichst platzsparend gestaltet sein.

4.5.2. Aktuelle Navigationskonzepte

Bei der Gestaltung und Umsetzung flexibler Navigationen haben sich unterschiedliche Ansätze bewährt, die sich den Bildschirmgrößen und Interaktionsmöglichkeiten entsprechend anpassen (vgl. Hellwig, 2017). Sie definieren, abhängig vom Kontext, passende Media Que-ries beziehungsweise Breakpoints, die die Navigation transformieren beziehungsweise ein- und ausblenden. Die größte Herausforderung besteht darin, eine optimal bedienbare Navigation bei minimalen Platzangebot zu gestalten. Ansätze werden dabei größtenteils mit-hilfe von HTML und CSS realisiert, wohingegen andere zusätzlich Ja-vaScript (JS) benötigen. So hat jeder Ansatz seine Vor- und Nachteile, welche entscheidend für die Wahl des Ansatzes sind (vgl. Ertel & La-borenz, 2016, S. 250f.). Nachfolgend werden vier Lösungsansätze exemplarisch vorgestellt.

4.5.2.1. Top-Navigation

Eine schnell und einfach umzusetzende Navigation, die bereits bei vielen reaktionsfähigen Websites Einsatz gefunden hat, ist die soge-nannte Top-Navigation. Die horizontal angeordneten Links bezie-hungsweise Schaltflächen der Navigation bleiben im mobilen Kontext analog zur Desktop-Variante bestehen. Lediglich kleinere Anpassun-gen bezüglich der Abstände und Größe der Schaltflächen sind not-wendig, damit diese optimal für die Bedienung mit dem Finger aus-wählbar und auf kleineren Endgeräten darstellbar sind. (vgl. Ertel & Laborenz, 2016, S. 251) Jedoch eignet sich der Ansatz nur, wenn




keine weiteren Navigationspunkte hinzugefügt werden, damit die Schaltflächen in eine benutzerfreundliche Größe skaliert werden kön-nen. Aufgrund der unterschiedlichen Schriftdarstellung empfiehlt es sich, diesen Ansatz auf verschiedenen Geräten und Browsern zu tes-ten (vgl. Zillgens, 2013, S. 236f.).

• schnelle und einfache Implementierung mit HTML und CSS • immense Zeitersparnis durch einfache Implementierung • kein Einsatz von JS nötig

• funktioniert nur bei einer geringen Anzahl an Navigationspunkten • beansprucht sehr viel Platz im Kopfbereich (Header) der Website • unschöne Umbrüche aufgrund unterschiedlicher Schriftdarstellung

der Browser • ausreichend große Schaltflächen sind möglicherweise nicht immer

realisierbar (vgl. ebd.)

4.5.2.2. Footer-Navigation

Bei der Footer-Navigation werden alle Navigationselemente in den Footer (dt. Fußbereich) der Website verlagert. Über ein im Header (dt. Kopfbereich) positionierten Verweis in Form eines Links oder Buttons, einer sogenannte Sprungmarke, springt der Anwender vom Kopf- zum Fußbereich der Website.

• schnelle und einfache Implementierung mit HTML und CSS • immense Zeitersparnis durch einfache Implementierung • kein Einsatz von JS nötig • aufgeräumter Header der Website • erfüllter „Content First“-Gedanke • leicht modifizier- und erweiterbar (Unternavigation möglich) • ausreichend große Schaltflächen sind realisierbar

• fehlende Navigationsmöglichkeiten und untypische Reaktion des Scrollens können im ersten Moment irritierend wirken (Usability)

• erscheint unelegant (vgl. Zillgens, 2013, S. 239)

Vorteile

Nachteile

Vorteile

Nachteile




(Quelle: Hellwig, J. (2017). Die Navigation im Responsive Web Design, von https://blog.kultur-banause.de/2016/07/navigation-pattern-responsive-web-design/#chapter4)

Abbildung 4.11 Footer-Navigation

Das Konzept eignet sich besonders gut bei sehr komplexen Navigati-onen (vgl. ebd.). Eine Sprungmarke, welche zurück an den Anfang der Website verweist, sollte immer implementiert werden, sodass den Nutzern das lästige Scrollen erspart bleibt. Jedoch ist die Footer-Na-vigation hinsichtlich der Usability kritisch zu sehen, da der Sprung vom Kopf- in den Fußbereich der Website für manche Nutzer nicht nachvollziehbar ist (vgl. Hahn, 2016, S. 638 & Rohles, 2017, S. 301f.).

4.5.2.3. Toogle-Navigation

Die Toggle-Navigation gilt als die gängigste Methode zur Umsetzung von reaktionsfähigen Navigationen. Im Header der Website ver-schwinden die einzelnen Navigationselemente hinter einem Icon, so-bald eine bestimmte Bildschirmbreite erreicht ist. Bei einem Klick auf das Icon, meist das Hamburger-Icon, öffnen sich die einzelnen Navi-gationselemente untereinander. Der eigentliche Inhalt wird dabei wahlweise verschoben oder überlagert. Die Darstellung kann sowohl




horizontal als auch vertikal erfolgen. Die Umsetzung einer Toggle-Na-vigation ist dabei mit einem erheblichen Aufwand verbunden. Beson-ders hilfreich erscheinen hier die zahlreichen Plug-ins, wie „flexNav“, „slicknav“ und „Responsive Nav“. (vgl. Ertel & Laborenz, 2016, S. 264ff.)


Abbildung 4.12 Toogle-Navigation

• schnelle und einfache Implementierung mit HTML und CSS • aufgeräumter eleganter Header der Website • leicht modifizier- und erweiterbar (Unternavigation möglich) • erscheinendes Navigationsmenü ist für Nutzer nachvollziehbar • ausreichend große Schaltflächen sind realisierbar • erscheint elegant

• möglicher Einsatz von JS • erheblicher Mehraufwand • saubere Darstellung auf älteren Geräten nur minimal gewährleistet • unterschiedliche Icons zur Darstellung des Menüs (vgl. Zillgens,

2013, S. 243)

4.5.2.4. Off-Canvas-Navigation

Die Off-Canvas-Navigation ähnelt der zuvor beschriebenen Toggle-Navigation. Die Übergänge der beiden Navigationsarten sind fließend (vgl. Rohles, 2017, S. 308). Der Unterschied besteht darin, dass die

Vorteile

Nachteile




Navigationselemente bei kleineren Viewports meist links außerhalb des Darstellungsbereiches „off-canvas“ angeordnet werden. Beim Aktivieren über ein entsprechendes Icon werden die eigentlichen In-halte verdrängt, wohingegen sie bei der Toogle-Navigation überblen-det werden. Diese Art der Navigation ist verhältnismäßig bekannt von Apps, wie Facebook und Spotify, jedoch gestaltet sich die Umsetzung solcher Navigationen als komplex, da sie den Einsatz von JS notwen-dig machen. Auch hier unterstützen viele hilfreiche Plug-ins, wie zum Beispiel „offcanvasmenue“, bei der Implementierung. (vgl. Ertel & Laborenz, 2016, S. 271ff.)


Abbildung 4.13 Off-Canvas-Navigation

• aufgeräumter Header der Website • uneingeschränkte Navigationsstruktur möglich • leicht modifizier- und erweiterbar (Unternavigation möglich) • erscheint durch Technik imposant und hochwertig • für den Besucher bekanntes Navigationskonzept

• Einsatz von JS unumgänglich • komplexere Implementierung • führt bei älteren Geräten zu Performance-Problemen (vgl. Zillgens,

2013, S. 247)

Vorteile

Nachteile

5. K

riter

ienk

atal

og

Hen

drik

Har

mse

n, T

echn

isch

e Re

dakt

ion

und

Kom

mun

ikat

ion,

SoS

e18

73

5. K

riter

ienk

atal

og

Tech

nisc

he E

rford

erni

sse

Nutz

ersp

ezifi

sche

An

ford

erun

gen

Lese

rlich

keit

nach

DIN

1450

Er

schl

ießb

arke

it (in

Anl

ehnu

ng

an d

ie D

IN E

N IS

O 92

41-1

12)

Smar

tpho

nes

Bild

schi

rmau

flö-

sung

(gem

ittel

t) 150%%&

Betra

chtu

ngs-

ab

stan

d '=)*.30)-

Te

xtar

t: Le

sete

xt

Navig

atio

n/M

enü

(jegli

che

Vari-

ante

), Bu

ttons

(Far

ben

u. F

or-

men

), Lin

ks, M

argin

alie

n, Fu

ßno-

ten,

List

en, L

egen

den

Typo

graf

ische

Au

szei

chnu

ngen

: Sc

hrift

größ

e, S

chrif

tart

Bild

schi

rmgr

öße

>568×320%3

<812×375%3

Vi

sus

6≥0,7

Sc

hrift

größ

e 9 :

;<=14%3

9 :

>?=20%3

Ei

nhei

ten

%3,%,(B)D-

In

tera

ktio

ns-

med

ium

Fi

nger

Ze

ilenl

änge

EF

:;<<400%3

EF

:>?<550%3

EF

<480%3

In

tera

ktio

n Sc

rolle

n, W

ische

n,

Zoom

en

Zeile

nabs

tand

(1

,5)

EGH :

;<<21%3

EGH :

>?<30%3

EGH<25%3

Ta

blet

s Bi

ldsc

hirm

auflö

-su

ng (g

emitt

elt)

140%%&

Betra

chtu

ngs-

ab

stan

d '=)*.40)-

Te

xtar

t: Le

sete

xt

Navig

atio

n/M

enü

(jegli

che

Vari-

ante

), Bu

ttons

(Far

ben

u. F

or-

men

), Lin

ks, M

argin

alie

n, Fu

ßno-

ten,

List

en, L

egen

den

Typo

graf

ische

Au

szei

chnu

ngen

: Sc

hrift

größ

e, S

chrif

tart

Bild

schi

rmgr

öße

>1024×768%3

<1366×

1024%3

Visu

s 6≥0,7

Sc

hrift

größ

e 9 :

;<=18%3

9 :

>?=25%3

Einh

eite

n %3,%,(B)D-

In

tera

ktio

ns-

med

ium

Fi

nger

, ggf

. Stif

t Ze

ilenl

änge

EF

:;<<510%3

EF

:>?<760%3

EF

<640%3

In

tera

ktio

n Sc

rolle

n, W

ische

n,

Zoom

en

Zeile

nabs

tand

(1

,5)

EGH :

;<<27%3

EGH :

>?<37%3

EGH<32%3

5. K

riter

ienk

atal

og

Hen

drik

Har

mse

n, T

echn

isch

e Re

dakt

ion

und

Kom

mun

ikat

ion,

SoS

e18

74

Tech

nisc

he E

rford

erni

sse

Nutz

ersp

ezifi

sche

An

ford

erun

gen

Lese

rlich

keit

nach

DIN

1450

Er

schl

ießb

arke

it (in

Anl

ehnu

ng

an d

ie D

IN E

N IS

O 92

41-1

12)

Lapt

ops

Bild

schi

rmau

flö-

sung

(gem

ittel

t) 120%%&

Betra

chtu

ngs-

ab

stan

d '=)*.50)-

Te

xtar

t: Le

sete

xt

Navig

atio

n/M

enü

(jegli

che

Vari-

ante

), Bu

ttons

(Far

ben

u. F

or-

men

), Lin

ks, M

argin

alie

n, Fu

ßno-

ten,

List

en, L

egen

den

Typo

graf

ische

Au

szei

chnu

ngen

: Sc

hrift

größ

e, S

chrif

tart

Bild

schi

rmgr

öße

>1024×768%3

<1440×900%3

Vi

sus

6≥0,7

Sc

hrift

größ

e 9 :

;<=19%3

9 :

>?=27%3

Ei

nhei

ten

%3,%,(B)D-

In

tera

ktio

ns-

med

ium

M

aus

Zeile

nlän

ge

EF:;<<530%3

EF

:>?<760%3

EF

<650%3

In

tera

ktio

n Sc

rolle

n, Z

oom

en

Zeile

nabs

tand

(1

,5)

EGH :

;<<28%3

EGH :

>?<40%3

EGH<34%3

De

skto

p-PC

s Bi

ldsc

hirm

auflö

-su

ng (g

emitt

elt)

100%%&

Betra

chtu

ngs-

ab

stan

d '=)*.70)-

Te

xtar

t: Le

sete

xt

Navig

atio

n/M

enü

(jegli

che

Vari-

ante

), Bu

ttons

(Far

ben

u. F

or-

men

), Lin

ks, M

argin

alie

n, Fu

ßno-

ten,

List

en, L

egen

den

Typo

graf

ische

Au

szei

chnu

ngen

: Sc

hrift

größ

e, S

chrif

tart

Bild

schi

rmgr

öße

>1440×900%3

<2560×

1440%3

Visu

s 6≥0,7

Sc

hrift

größ

e 9 :

;<=22%3

9 :

>?=32%3

Einh

eite

n %3,%,(B)D-

In

tera

ktio

ns-

med

ium

M

aus

Zeile

nlän

ge

EF:;<<610%3

EF

:>?<910%3

EF

<760%3

In

tera

ktio

n Sc

rolle

n, Z

oom

en

Zeile

nabs

tand

(1

,5)

EGH :

;<<33%3

EGH :

>?<48%3

EGH<40%3

5. Kriterienkatalog


Der Kriterienkatalog basiert auf der Normen- und Literaturrecherche sowie der Anforderungsanalyse. Hierbei wurden insbesondere die DIN 1450 „Leserlichkeit“ als auch die DIN EN ISO 9241-112 „Grundsätze der Informationsdarstellung“ herangezogen. In Anbe-tracht der Usability einer Website können einige Grundsätze bezie-hungsweise Kriterien optimiert werden.

Wie bereits in Kapitel 2.3 erwähnt, ist die zentrale Bezugsgröße der Leserlichkeit die Schriftgröße. Sie beschreibt die vertikale Ausdeh-nung einer Schrift einschließlich ihrer Ober-, Mittel- und Unterlängen. Dabei können je nach Schriftart die Schriftgrößen variieren und wer-den somit vom Leser unterschiedlich wahrgenommen. Aus diesem Grund setzt sich die Schriftgrößenempfehlung der DIN 1450 aus der Textart, dem Betrachtungsabstand zum Text/Gerät und dem Visus des Nutzers zusammen. Hierbei steht die Schriftgröße in Abhängig-keit zum Zeilenabstand und zur Zeilenlänge. Dementsprechend sind bei Veränderung der Schriftgröße der Zeilenabstand und die Zeilen-länge anzupassen. Diese sind drei wesentliche Kriterien, die den Grundsätzen der Unterscheidbarkeit und der Interpretierbarkeit der DIN EN ISO 9241-112 entsprechen. Für die Festlegung des Gestal-tungsrasters sind diese drei Kriterien maßgeblich.

Das Gestaltungsraster ist aus wahrnehmungspsychologischer Sicht wichtig, jedoch wird es in den Grundsätzen der Norm nicht explizit benannt beziehungsweise berücksichtigt. Lediglich bestehende (Dar-stellungs-) Konventionen werden in der Norm beschrieben. Aus die-sem Grund sollte das Gestaltungsraster in der Norm ergänzt und dem Grundsatz der Konsistenz zugeordnet werden. Würde die Norm die Grundsätze erweitern, dann könnten die dargestellten Informationen vom Nutzer besser unterschieden, interpretiert und gefunden wer-den. Demnach steigt die Usability einer Website.

Darüber hinaus sollte die Schriftgrößenempfehlung der DIN 1450 im Angesicht des mobilen Wachstums, um die Pixeldichte (ppi) der Ge-räte erweitert werden. Durch die unterschiedlichen Bildschirme kann

Optimierungs- bedarf

5. Kriterienkatalog


die optische und metrische Schriftgröße variieren und gegebenenfalls vom Nutzer nicht unterschieden werden. Erweitert man die Norm, muss diese nicht mehr auf Annährungswerte bezüglich der Pixel-dichte zurückgreifen und kann exakte Schriftgrößenempfehlungen aussprechen.

Im direkten Bezug zur Leserlichkeit steht die Erschließbarkeit bezie-hungsweise die Entdeckbarkeit. Informationen sollten somit nicht al-lein über die Typografie auffindbar sein, sondern gleichzeitig über die Navigation einer Website. Analog zur Leserlichkeit kann durch diese Maßnahme die Usability einer Website verbessert werden.

6. Fazit

6.1. Zusammenfassung und Schlussfolgerung


6. Fazit

Dieses Kapitel fasst die wichtigsten Ergebnisse aus den vorherigen Kapiteln zusammen und interpretiert diese hinsichtlich der For-schungsfrage. Darüber hinaus nimmt das Kapitel Stellung zu der künftigen Entwicklung von reaktionsfähigen Websites und dessen Be-deutung für die Usability. Abschließend setzt es sich kritisch mit den Ausarbeitungen auseinander.


Das Ziel der vorliegenden Bachelorarbeit war es, zu bestimmen, mit welchen Möglichkeiten des Responsive Webdesigns die Usability auf Websites verbessert werden kann. Dazu wurde folgenden For-schungsfrage gestellt:

„Wie kann mit Hilfe von Responsive Webdesign (RWD) die Usability von Websites verbessert werden?“

Die stetig wachsende Anzahl von mobilen Endgeräten, wie Smartpho-nes und Tablets, führen dazu, dass die mobile Internetnutzung und somit auch die Anforderungen an Websites hinsichtlich ihrer Usability angepasst beziehungsweise verbessert werden müssen. Die Arbeit geht im speziellen auf die Leserlichkeit der dargestellten Inhalte ei-ner Website ein.

Zu diesem Zweck wurden grundlegende Normen, die als allgemeiner Standard im Webdesign anerkannt sind, untersucht. Dazu gehören beispielsweise die DIN EN ISO 9241 „Ergonomie der Mensch-Sys-tem-Interaktion“ und die DIN 1450 „Leserlichkeit“. Weiterhin wur-den bestehende Konventionen im Webdesign betrachtet. Diese sind im Gegensatz zu den Normen zwar nicht formal festgeschrieben, aber im Hinblick auf die Usability einer Website ebenso wichtig.

Forschungsfrage

6. Fazit



Darauf aufbauend wurden aus den Normen beziehungsweise der Li-teratur zum einen technische Anforderungen/Einschränkungen von mobilen Endgeräten, wie zum Beispiel die unterschiedlichen Bild-schirmgrößen und -auflösungen sowie der Datenübertragung, ablei-ten, und zum anderen nutzerspezifische Anforderungen/Einschrän-kungen identifiziert. Dazu gehören beispielsweise der Betrachtungs-abstand zum Text/Gerät, die Sehschärfe (Visus) des Nutzers und die Interaktion mit der Website.

Darin besteht gleichzeitig die größte Herausforderung des Respon-sive Webdesigns die Elemente beziehungsweise Inhalte einer Web-site darauf auszurichten. Im Hinblick auf die Usability einer Website kann dadurch insbesondere die Leserlichkeit mit all ihren typografi-schen Faktoren beeinträchtigt werden.

So müssen im Kontext des Responsive Webdesigns grundlegenden Techniken, wie zum Beispiel flexiblen Layouts, flexiblen Medien und Media Queries angewendet werden. Weiterhin müssen auch andere Bereiche, wie zum Beispiel die Typografie und Navigation flexibel um-gesetzt werden. Das flüssige Layout hat sich insbesondere in Verbin-dung mit Media Queries im Webdesign etabliert. Mit Media Queries ist es möglich, das Layout für die unterschiedlichsten Gerätegrößen und -eigenschaften anzupassen. Hinsichtlich der Navigation haben sich vielfältige Implementierungsmöglichkeiten entwickelt. Als gängigste Methode hat sich die Toggle-Navigation mit einem Hamburger-Icon, trotz Usability-Einbußen, durchgesetzt. Flexible Medien hingegen können den technischen Anforderungen/Einschränkungen von mobi-len Endgeräten nicht gerecht werden, sodass unzählige Lösungsan-sätze existieren.

Als weiteres wichtiges Kriterium gilt die Typografie, da sie laut Oliver Reichenstein (2006) 95% des Webdesigns ausmacht. Daher legt die Arbeit den Fokus auf die Typografie, da hier der größte Optimierungs-bedarf im Hinblick auf die Usability besteht. Im Kontext des Respon-sive Webdesigns gibt es Faktoren, wie zum Beispiel die Schriftart,

6. Fazit



Zeilenlänge, Zeilenabstand und Kontrast, um auch das typografische Erscheinungsbild reaktionsfähig zu gestalten. Diese Faktoren beein-flussen die Leserlichkeit eines Textes auf Websites und damit die Usability.

Hierbei hat sich vor allem die Einheit rem für die Auszeichnung von Schriften im WWW bewährt, da diese durch die Abhängigkeit zum Root-Element mehr Kontrolle als andere Einheiten bietet. In Zukunft werden die moderneren Einheiten vw, vh, und vmin/vmax mehr zum Einsatz kommen. Der richtige Einsatz von Schriften im Responsive Webdesign ist durch den Einsatz von neuen Einheiten vereinfacht worden.

Die typografischen Faktoren entsprechen den Grundsätzen der DIN EN ISO 9241-112 und helfen dem Nutzer bei der Unterscheidbarkeit, Interpretierbarkeit und Entdeckbarkeit der dargestellten Inhalte ei-ner Website. Diese Faktoren werden jedoch nicht explizit in der Norm benannt und sollten daher zukünftig berücksichtigt werden. Aus dem Verhältnis der typografischen Faktoren zueinander ergibt sich das Gestaltungsraster der Website. Dabei kann das Gestaltungsraster dem Grundsatz der Konsistenz zugeordnet werden und sollte über die (Darstellungs-) Konventionen hinweg beachtet werden, da das Gestaltungsraster aus wahrnehmungspsychologischer Sicht wichtig ist. Des Weiteren zeigt die Arbeit, dass bei der Berechnung der Schriftgrößen der DIN 1450 die Pixeldichte der Geräte (ppi) berück-sichtigt werden sollte, da die optische/metrische Schriftgröße auf un-terschiedlichen Bildschirmgrößen und -auflösungen abweichen kann.

Durch den Optimierungsbedarf wurde ein Kriterienkatalog entwickelt, der die typografischen Faktoren beinhaltet, damit im Kontext des Responsive Webdesigns die Leserlichkeit beziehungsweise Usability auf Websites gewährleistet werden kann.

6. Fazit

6.2. Kritische Würdigung


Die Frage, ob die Techniken des Responsive Webdesigns zur Verbes-serung der Usability einer Website beitragen, konnte mit der Bachelo-rarbeit bestätigt werden. Insbesondere durch die Verwendung von flexiblen Layouts, flexiblen Medien und Media Queries ist es möglich die Leserlichkeit einer Website auf die unterschiedlichsten Geräte an-zupassen.

Zunächst bleibt abzuwarten, inwiefern sich die Techniken bezie-hungsweise Ansätze des Responsive Webdesigns bei einem dynami-schen und schnelllebigen WWW weiter- oder neuentwickeln. Infolge-dessen sollten sich sowohl Designer als auch Entwickler stets weiter-bilden und über neue Technologien informieren. Die Entwicklung von neuen Endgeräten, wie zum Beispiel Smartwatches, Google Glasses & Co. wird weiter steigen und liefert für die Umsetzung von reaktions-fähigen Websites neue Herausforderungen. Mit ihnen wachsen die Anforderungen der Nutzer an die Usability einer Website. Demnach werden reaktionsfähige Websites sowie dessen Gebrauchstauglich-keit weiterhin von großer Bedeutung sein.

Die Ergebnisse dieser Arbeit bilden die Grundlage für weitere Ba-chelorarbeiten. Dazu gehört beispielsweise ein Vergleich der Usability zwischen mobilen und reaktionsfähigen Websites.


Responsive Webdesign leistet mit den zugrunde liegenden Techniken beziehungsweise Ansätzen einen elementaren Beitrag zur Verbesse-rung der Usability auf Websites. Hierfür wurden sowohl technische als auch nutzerspezifische Anforderungen/Einschränkungen berück-sichtigt. Die Analyse stützt sich auf den wichtigsten Anforderungen, da es aufgrund des Umfangs der Bachelorarbeit nicht mehr möglich war weitere Anforderungen zu untersuchen. Die Ergebnisse zeigen, dass Inhalte die Grundlage für Websites bilden diese aber im Rahmen der Arbeit nicht betrachtet wurden.

6. Fazit



Weiterhin sind die Ausführungen der Bachelorarbeit überwiegend theoretisch und werden nur teilweise an Beispielen erklärt. Dabei war es schwierig abzuwägen, was für das Verständnis der Zusammen-hänge und die Beantwortung der Forschungsfrage relevant gewesen ist. Es wurden keine Tools, die zur Umsetzung von reaktionsfähigen Websites dienen, betrachtet.

Literaturverzeichnis



AP. (o. J.). Anzahl der Nutzer des mobilen Internets weltweit im Jahr 2014 sowie eine Prog-nose bis 2019 (in Milliarden). In Statista - Das Statistik-Portal. Abgerufen 13. Juli 2018, von https://de.statista.com/statistik/daten/studie/502548/umfrage/anzahl-der-nutzer-des-mobilen-internets-weltweit/.

Beinert, W. (2018). Zeilendurchschuss. Abgerufen 12. August 2018, von https://www.typo-lexikon.de/zeilendurchschuss/

Bringhurst, R. (2004). The elements of typographic style (3rd ed). Point Roberts, WA: Hart-ley & Marks, Publishers.

Compuware Equation Research. (2011). What Users Want from Mobile. Abgerufen 13. Juli 2018, von https://webperformanceguru.files.wordpress.com/2011/07/19986_what-mobileuserswant_wp.pdf

Deutscher Blinden- und Sehbehindertenverband e. V.. (o. J.-a). Leserlich.info: Leserlich und lesbar: Textarten. Abgerufen 11. August 2018, von http://www.leserlich.info/kapi-tel/leserlich-und-lesbar.php#textarten

Deutscher Blinden- und Sehbehindertenverband e. V.. (o. J.-b). Leserlich.info: Zeichenbezo-gene Faktoren: Schriftgröße. Abgerufen 11. August 2018, von http://www.leser-lich.info/kapitel/zeichen/schriftgroesse.php

Deutscher Blinden- und Sehbehindertenverband e. V.. (o. J.-c). Leserlich.info: Digitale Me-dien. Abgerufen 11. August 2018, von http://www.leserlich.info/kapitel/digitale-me-dien.php

Deutscher Blinden- und Sehbehindertenverband e. V.. (o. J.-d). Leserlich.info: Textbezogene Faktoren: Zeilenabstand. Abgerufen 15. August 2018, von http://www.leser-lich.info/kapitel/text/zeilenabstand.php

DIN 1450 (2013). Schriften – Leserlichkeit. Berlin: Beuth Verlag.

DIN EN ISO 9241-11 (2017). Ergonomie der Mensch-System-Interaktion; Objektträger – Teil 11: Gebrauchstauglichkeit: Begriffe und Konzepte. Berlin: Beuth Verlag.



DIN EN ISO 9241-110 (2008). Ergonomie der Mensch-System-Interaktion; Objektträger – Teil 110: Grundsätze der Dialoggestaltung. Berlin: Beuth Verlag.

DIN EN ISO 9241-112 (2017). Ergonomie der Mensch-System-Interaktion; Objektträger – Teil 112: Grundsätze der Informationsdarstellung. Berlin: Beuth Verlag.

Dzida, W., Herda, S., & Itzfeldt, W. D. (1978). User-Perceived Quality of Interactive Systems. IEEE Transactions on Software Engineering, SE-4(4), 270–276. https://doi.org/10.1109/TSE.1978.231511

Ertel, A., & Laborenz, K. (2016). Responsive Webdesign: anpassungsfähige Websites pro-grammieren und gestalten (2., aktualisierte Auflage, 1., korrigierter Nachdruck). Bonn: Rheinwerk Computing.

Esposito, M. (2011). Webdesign mit Rastersystemen: Ein kleiner Überblick. Abgerufen 14. Juni 2018, von https://www.elmastudio.de/webdesign-mit-rastersystem-ein-kleiner-ueberblick/.

Gillenwater, Z. (2009). Flexible web design: creating liquid and elastic layouts with CSS. Berkeley, California: New Riders.

Google. (2012). What Users Want Most From Mobile Sites Today. Abgerufen 13. Juli 2018, https://think.storage.googleapis.com/docs/au-what-mobile-users-want.pdf

Google Webmaster Central Blog. (2015). Finding more mobile-friendly search results. Abge-rufen 29. April 2018, von https://webmasters.googleblog.com/2015/02/finding-more-mobile-friendly-search.html

Grünwied, G. (2017). Usability von Produkten und Anleitungen im digitalen Zeitalter: Hand-buch für Entwickler, IT-Spezialisten und Technische Redakteure: mit Checklisten und Fallstudien. Erlangen: Publicis Pixelpark.

Hahn, M. (2017). Webdesign: das Handbuch zur Webgestaltung (2., aktualisierte Auflage). Bonn: Rheinwerk.

Heinecke, A. (2012). Mensch-Computer-Interaktion: Basiswissen für Entwickler und Gestal-ter (2., überarb. und erw. Aufl). Berlin: Springer.



Hellwig, J. (2013). Websites und Bilder für High-Resolution-Displays (Retina, HiDPI) opti-mieren. Abgerufen 12. August 2018, von https://blog.kulturba-nause.de/2012/04/websites-und-bilder-fur-high-resolution-displays-retina-optimie-ren/

Hellwig, J. (2016). Die Layout-Typen einer Website: Fixed, Fluid & Elastic. Abgerufen 4. Juni 2018, von https://blog.kulturbanause.de/2012/10/die-layout-typen-einer-website-fixed-fluid-elastic/

Hellwig, J. (2017). Die Navigation im Responsive Web Design. Abgerufen 14. August 2018, von https://blog.kulturbanause.de/2016/07/navigation-pattern-responsive-web-de-sign/#chapter4

Hoffmann, M. (2013). Modernes Webdesign: Gestaltungsprinzipien, Webstandards, Praxis; [von der ersten Idee bis zur fertigen Website; Prinzipien und Grundlagen guten De-signs ; kreativ mit Webstandards, HTML5 und CSS3]. Bonn: Galileo Press.

Jacobsen, J., & Meyer, L. (2018). Praxisbuch Usability & UX: was jeder wissen sollte, der Websites und Apps entwickelt (1. Auflage, 1., korrigierter Nachdruck). Bonn: Rhein-werk Verlag GmbH.

Kadlec, T., & Fröhlich, S. (2013). Praxiswissen Responsive Webdesign: reaktionsfähige Websites für alle Geräte; Strategien, Konzeption, Umsetzung; mit vielen Beispielen aus der Praxis (1. Aufl). Köln: O’Reilly.

Keßler, E., Rabsch, S., & Mandić, M. (2015). Erfolgreiche Websites: SEO, SEM, Online-Marke-ting, Usability (3., aktualisierte und erweiterte Auflage). Bonn: Rheinwerk.

Krug, S. (2014): Don't make me think; Web Usability; Das intuitive Web. Mönchengladbach: mitp Verlags GmbH & Co. KG

Laborenz, K. (2016). CSS: das umfassende Handbuch (3., aktualisierte Auflage). Bonn: Rheinwerk.

Luidl, P. (1989). Typografie: Herkunft, Aufbau, Anwendung (2., überarb. Aufl). Hannover: Schlüter.

Marcotte, E. (2011). Responsive web design. New York: A Book Apart.



Maurice, F. (2012). Mobile Webseiten: Strategien, Techniken, Dos und Don’ts für Webent-wickler; [von Responsive Webdesign über jQuery Mobile bis zu separaten mobilen Sei-ten]. München: Hanser.

Nate, (2011). Is Mobile Affecting When We Read?. Abgerufen 12. Juli 2018, von https://get-pocket.com/blog/2011/01/is-mobile-affecting-when-we-read/

Nielsen, J. (2004). Erfolg des Einfachen: Jakob Nielsen’s Web Design (Nachdr.). München: Markt & Technik.

Nielsen, J., & Budiu, R. (2013). Mobile Usability: für iPhone, iPad, Android und Kindle (1. Auflage). Heidelberg München Landsberg Frechen Hamburg: mitp, Verlagsgruppe Hüthig, Jehle, Rehm.

Nielsen, J., & Tahir, M. (2004). Homepage Usability: 50 enttarnte Websites. München: Markt & Technik, Pearson Education Deutschland.

Redtenbacher, W. (o. J.). Einführung in die Software-Ergonomie. Abgerufen 28. Juli 2018, von http://www.redtenbacher.de/swergo/swergo.html

Reichenstein, O. (2006). Web Design is 95% Typography. Abgerufen 15. August 2018, von https://ia.net/topics/the-web-is-all-about-typography-period

Rohles, B. (2017). Grundkurs gutes Webdesign: alles, was Sie über Gestaltung im Web wis-sen müssen (2., aktualisierte und erweiterte Auflage). Bonn: Rheinwerk Verlag.

Sarodnick, F., & Brau, H. (2016). Methoden der Usability Evaluation: wissenschaftliche Grundlagen und praktische Anwendung (3., unveränderte Auflage). Bern: Hogrefe.

SELFHTML e. V.. (o. D.). CSS/Eigenschaften/Hintergrundfarben und -bilder/background-size. Abgerufen 12. August 2018, von https://wiki.selfhtml.org/wiki/ CSS/Eigenschaften/Hintergrundfarben_und_-bilder/background-size

statcounter GlobalStats. (2016). Mobile and tablet internet usage exceeds desktop for first time worldwide. Abgerufen 13. Juli 2018, von http://gs.statcounter.com/press/mo-bile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide

Statistisches Bundesamt. (2016). 81 % der Internetnutzer gehen per Handy oder Smart-phone ins Internet [Pressemitteilung Nr. 430/16]. Abgerufen 4. April 2018, von https://www.destatis.de/DE/PresseService/Presse/Pressemitteilungen/2016/12/ PD16_430_63931.html



Stiegert, H. (2013). Modernes Webdesign mit CSS: Schritt für Schritt zur perfekten Website; [von den Grundlagen zum professionellen Seitenlayout; Navigationen, Bildergalerien, Formulare, Mikroformate, Weblogs, Online-Shops u.v.m.] (1. Aufl.,2., korrig. Nachdr). Bonn: Galileo Press.

Vinh, K. (2011). Ordering disorder: grid principles for web design. Berkeley, California: New Riders.

Walorska, A. (2014). Hamburger-Menü – ja oder nein?. Abgerufen 14. April 2018, von http://www.creativeconstruction.de/blog/hamburger-menue-ja-oder-nein/

Walton, T. (2012). Fluid Type. Abgerufen 15. Mai 2018, von https://trentwal-ton.com/2012/06/19/fluid-type/

Wellman, S. (2007). Google Lays Out Its Mobile User Experience Strategy. Abgerufen 11. Juli 2018, von https://www.informationweek.com/mobile/google-lays-out-its-mobile-user-experience-strategy/d/d-id/1053921

Wikipedia (2018). Konvention. Abgerufen 2. August 2018, von https://de.wikipe-dia.org/w/index.php?title=Konvention&oldid=178563887

Wroblewski, L. (2011). Mobile First. New York: A Book Apart

Zillgens, C. (2013). Responsive Webdesign: reaktionsfähige Websites gestalten und umset-zen. München: Hanser

Zillgens, C. (o.J.). Responsive Webdesign: Worauf es beim Einsatz reaktionsfähiger Typogra-fie ankommt. Abgerufen 17. April 2018 von https://t3n.de/magazin/responsive-web-design-reaktionsfahige-typografie-230315/3/

Abbildungsverzeichnis


Abbildungsverzeichnis

Abbildung 2.1 Anwendungsrahmen der Usability nach DIN ISO EN 9241-11 .......................... 9 Abbildung 2.2 Zusammenhang zwischen den Normenteilen 9241-11 und 9241-110 sowie 9241-112 ............................................................................................................................ 14 Abbildung 2.3 Typografischer Aufbau einer Schrift ............................................................. 16 Abbildung 2.4 Sehwinkel nach DIN 1450 ............................................................................. 18 Abbildung 2.5 Unterschiedliche Darstellungskonventionen für die Navigation im mobilen Kontext ............................................................................................................................... 22 Abbildung 3.1 Zugriffszahlen der mobilen Endgeräte überholen die der stationären Desktop-PCs ..................................................................................................................................... 24 Abbildung 3.2 Der Unterschied zwischen Gerätepixel und CSS-Pixel ................................... 27 Abbildung 3.3 Erreichbarkeit der Bedienelemente bei Einhandbedienung ............................ 33 Abbildung 4.1 Das pixelbasierte 960-Grid, 12 Spalten Beispiel ............................................ 37 Abbildung 4.2 Exemplarischer Aufbau: Starres Layout ........................................................ 41 Abbildung 4.3 Exemplarischer Aufbau: Flüssiges Layout .................................................... 42 Abbildung 4.4 Exemplarischer Aufbau: Elastisches Layout ................................................. 44 Abbildung 4.5 Durchschnittliche Datenmenge einer Website nach Inhaltsart ...................... 46 Abbildung 4.6 Unterschiedliche Schriftgrößenwahrnehmung in Abhängigkeit des Betrachtungsabstandes ...................................................................................................... 57 Abbildung 4.7 Abhängigkeit der Maßeinheit em – Ergebnis im Browser .............................. 60 Abbildung 4.8 Abhängigkeit der Maßeinheit rem – Ergebnis im Browser ............................. 62 Abbildung 4.9 Zeilenlänge nach Trent Walton ..................................................................... 64 Abbildung 4.10 Unterschied zwischen Zeilendurchschuss und -abstand ............................. 65 Abbildung 4.11 Footer-Navigation ....................................................................................... 70 Abbildung 4.12 Toogle-Navigation ...................................................................................... 71 Abbildung 4.13 Off-Canvas-Navigation ................................................................................ 72

Tabellenverzeichnis


Tabellenverzeichnis

Tabelle 2.1 Errechnete Schriftgrößenempfehlung in Anlehnung an die DIN 1450 ................ 20 Tabelle 3.1 Unterschiedliche Bildschirmmaße einiger Apple-Geräte .................................... 28 Tabelle 3.2 Übertragungsgeschwindigkeit und Latenzzeiten mobiler Verbindungstechnologien ................................................................................................... 30 Tabelle 4.1 Abfragemöglichkeiten der CSS3 Media Queries (MQ) ....................................... 51 Tabelle 4.2 Logische Operatoren eines CSS3 Media Queries (MQ) ...................................... 52 Tabelle 4.3 Übersicht der Webeinheiten .............................................................................. 58

Code-Beispielverzeichnis


Code-Beispielverzeichnis

Code-Beispiel 4.1 Allgemeingültiger HTML-Aufbau eines Gitters......................................... 39 Code-Beispiel 4.2 Abstrakter Aufbau eines CSS3 Media Queries (MQ) ................................ 51 Code-Beispiel 4.3 CSS3 Media Queries (MQ)....................................................................... 52 Code-Beispiel 4.4 Einbindung der Media Queries (MQ) über das Link-Element .................... 53 Code-Beispiel 4.5 Viewportbestimmung über die Metabeschreibung .................................. 54

Anhang


Anhang

Auf dem beiliegenden Datenträger befinden sich HTML- und CSS-Beispiele, die im Rahmen der vorliegenden Bachelorarbeit erstellt wurden.

Schriftgrößenberechnung

! = !#$$%&&ä()%

+ = ,%$-./ℎ$1()2.32$.(4

5 = 6%ℎ7#(8%&

9:; = <%1/ℎ$4#/ℎ$%(=.8$>-([email protected]&&%G. 1)

6 = 6/ℎ-#=$)-öß%

!L = !#$$%&ä()%( − 6/ℎ-#=$)-öß%( − N%-ℎä&$(#2

Formeln

! = 2+ × $.( Q5 × 9:;

2R

9:; =<S;T

N

!L =!

6%($2U-#/ℎ$0,47XX

Anhang


Beispielrechnung

Gegeben

+ = 400XX

5 = 13Z ≙13Z

60= 0,216°

N#212 = 1

< = 0,7

Berechnung

! = 2+ × $.( Q5 × 9:;

2R

! = 2× 400XX × $.(^13′ ×

0,7

1

2`

! = 800XX × $.( Q0,216° × 0,7

2R

! = 800XX × $.((0,075833333333333b)

! = 800XX× 0,001323542122273

! = 1,058833697818073XX

Mittellänge addiert mit dem Mittellängen-Schriftgrößen-Verhältnis

! +!e = 1,058833697818073XX+ 0,47XX

! +!e = 1,528833697818073XX

! +!e ≅ 1,5XX

Umrechnung – Mittelänge in Schriftgröße

Faustregel (s. DIN 1450, A.1.8, S. 21)

6 × !#$$%&&ä()%#(XX = 6/ℎ-#=$)-öß%#(U$

6 × 1,5XX = 9U$

Anhang


Umrechnung – Pica-point (pt) in mm

(s. DIN 1450, A.1.8, S. 21)

1U$ =1

72@(/ℎ

1U$ =25,4

72XX= 0,3528XX

9U$ × 0,3528XX ≅ 3,2XX(3g7. 3,5XX)

à wird im Web aufgerundet.

Umrechnung – mm in Pixel (px)

1XX = 3,77952755905511h#i%&

3,2XX × 3,77952755905511h#i%& = 12,09 ≅ 12Ui

Notizen


wie kann mit hilfe von responsive webdesign …...bachelorarbeit wie kann mit hilfe von responsive...

Documents