Rheinwerk Computing < openbook >

 
Inhaltsverzeichnis
Vorwort
1 Prinzipien des modernen Webdesigns
2 Projektmanagement
3 Konzeption und Strategie
4 Responsive Webdesign
5 Informationsarchitektur
6 Gestaltungsgrundlagen
7 Screendesign
8 Layout und Raster
9 Farbe im Webdesign
10 Typografie
11 Bilder und Grafiken
12 Navigations- und Interaktionsdesign
13 Webdesign-Stile und -Trends
14 Animationen
15 Website-Typen
16 Tipps, Tricks und Tools
Stichwortverzeichnis

Download:
- Beispieldateien, ca. 3.64 MB

Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Webdesign von Martin Hahn
Das Handbuch zur Webgestaltung
Buch: Webdesign

Webdesign
Pfeil 1 Prinzipien des modernen Webdesigns
Pfeil 1.1 Aspekte modernen Webdesigns
Pfeil 1.1.1 Die Entwicklung des Webdesigns
Pfeil 1.1.2 Gute Seiten, schlechte Seiten
Pfeil 1.1.3 Mehr als hübsch – das Design
Pfeil 1.1.4 Übersichtlich und lesbar
Pfeil 1.1.5 Struktur, Inhalte und Verhalten
Pfeil 1.2 Guter Quellcode – Webstandards
Pfeil 1.3 Webseiten für alle – Zugänglichkeit und Barrierefreiheit
Pfeil 1.3.1 Zugänglichkeit und Technik
Pfeil 1.3.2 Zugänglichkeit und Inhalte
Pfeil 1.3.3 Zugänglichkeit und Design
Pfeil 1.4 Modernes Webdesign ist flexibel
Pfeil 1.4.1 Flexible und anpassungsfähige Webseiten
Pfeil 1.4.2 Benutzerfreundlich und bedienbar
Pfeil 1.4.3 Moderne Workflows
Pfeil 1.5 Das Webdesign und sein Umfeld
Pfeil 1.5.1 Die Märkte und der Wettbewerb
Pfeil 1.5.2 Content Marketing und die Informationsüberflutung der Konsumenten
Pfeil 1.5.3 Werteveränderung in der Gesellschaft
Pfeil 1.6 Fazit: Webdesign ist Coden, und Code ist Design
 
Zum Seitenanfang

1.3    Webseiten für alle – Zugänglichkeit und Barrierefreiheit Zur vorigen ÜberschriftZur nächsten Überschrift

Gute Webseiten stehen einer möglichst großen Anwenderschar zur Verfügung. Was selbstverständlich klingt, ist es leider nicht. Für viele Menschen gibt es (unüberwindbare) Barrieren, die sie an der Nutzung einer Webseite hindern oder die Nutzung zumindest negativ beeinflussen. Als Beispiel werden häufig sehbehinderte Menschen genannt, die sich eine Webseite mittels eines Screenreaders vorlesen lassen. Eine Webseite sollte möglichst barrierefrei sein. Im Englischen nennt sich dies Accessibility, was sich im Deutschen besser mit Zugänglichkeit übersetzen lässt.

»Die Zugänglichkeit einer Webseite ist nicht nur eine technische Frage, sondern betrifft ebenso die Inhalte und das Design.«

Barrieren ergeben sich nicht nur durch körperliche Einschränkungen, sondern können sich auch durch eingeschränkte Sprachkenntnisse, benutzte Hard- und Software (z. B. Smartphone) oder die Umstände der Benutzung (z. B. mit dem Smartphone nachts im Bus) ergeben und betreffen damit einen Großteil der Anwender. Zugänglichkeit ist daher kein Thema, das nur eine kleine Randgruppe betrifft. Von Webseiten, die zugänglich sind, profitieren alle Nutzer. Beispiele für mögliche Barrieren:

  • zu geringer Kontrast zwischen Textfarbe und Hintergrund

  • keine Optimierung für bestimmte Browser

  • zu kleine Schriftgrößen bzw. nicht flexibel anpassbar seitens des Anwenders

  • Bilder haben keinen alternativen Text.

  • Benutzung eines Touchscreen-Displays (Smartphone) (z. B. Probleme bei zu kleinen anklickbaren Bereichen eines Links)

  • mobile Nutzung mit eingeschränkter Datenverbindung

  • Steuerung ausschließlich per Tastatur

 
Zum Seitenanfang

1.3.1    Zugänglichkeit und Technik Zur vorigen ÜberschriftZur nächsten Überschrift

Die Beachtung der Webstandards ist schon eine gute Voraussetzung für eine barrierearme Umsetzung. Werden die Elemente dann noch semantisch korrekt eingesetzt, ist schon vieles gut. Eine zugängliche Webseite beachtet unter anderem die folgenden technischen Aspekte:

  • Trennung von Inhalt und Design

  • semantischer Quellcode

  • Auch ohne CSS sollte die Seitenstruktur eindeutig sein.

  • eindeutige, verständliche URL und Title-Tag einsetzen

  • Alternativtexte für Bilder

  • Sprache des HTML-Dokuments zu Beginn festlegen (<html lang= "de">)

  • Bedienbarkeit bei unterschiedlichen Bildschirmauflösungen

  • geringe Ladezeit (keine unnötigen Dateien laden, keine Skripte doppelt laden, Bilder optimieren)

Web Developer Toolbar

Mithilfe des Browser-Add-ons Web Developer Toolbar können Sie die CSS-Dateien einer Webseite ausschalten und sich so die reine HTML-Struktur anzeigen lassen: addons.mozilla.org/de/firefox/addon/web-developer.

 
Zum Seitenanfang

1.3.2    Zugänglichkeit und Inhalte Zur vorigen ÜberschriftZur nächsten Überschrift

Auch eine einfache, nachvollziehbare Navigationsstruktur samt eindeutiger Benennung der Navigationspunkte gehört genauso dazu wie eine einfache, verständliche Sprache. Eine zugängliche Webseite beachtet unter anderem folgende inhaltliche Aspekte:

  • klare, verständliche Navigationsstruktur

  • selbsterklärende Benennung der Navigationspunkte und Links (also nicht Hier klicken)

  • keine relevanten Inhalte nur durch Bilder, Grafiken oder Videos anzeigen bzw. alternativen Text bereitstellen

  • keine Rechtschreibfehler

  • einfache, verständliche Sprache

  • Texte strukturieren (mit Zwischenüberschriften, Aufzählungen, Tabellen usw.) zum Überfliegen und zur besseren Aufnahme

Zum Weiterlesen

Weitere Informationen zu den Anforderungen an eine Navigationsstruktur finden Sie in Kapitel 5, »Informationsarchitektur«, und in Kapitel 12, »Navigations- und Interaktionsdesign«.

 
Zum Seitenanfang

1.3.3    Zugänglichkeit und Design Zur vorigen ÜberschriftZur nächsten Überschrift

Die optische Darstellung kann die Zugänglichkeit unterstützen oder aber sie behindern. Auf jeden Fall gibt es auch einige Gestaltungsaspekte zu beachten, die die Zugänglichkeit erleichtern. Dazu gehören unter anderem:

  • klarer Kontrast zwischen Text- und Hintergrundfarbe

  • nicht zu kleine Schriftgröße einsetzen

  • Auch ohne Bilder/Grafiken sollte die Webseite bedienbar bleiben.

  • Auch ohne CSS sollte die Seite bedienbar bleiben.

  • keine zu grellen Farbkontraste einsetzen

  • Farbblindheiten und -einschränkungen beachten

Die Zugänglichkeit einer Webseite zu sichern dient also allen Anwendern und sollte von Anfang an von allen Projektbeteiligten beachtet werden.

Accessibility-Richtlinien und -Checkliste

Es gibt eine Web Accessibility Initiative (WAI), eine Gruppierung innerhalb des W3C, die sich mit einem barrierefreien Internet auseinandersetzt. Diese hat unter anderem einen Standard entwickelt, die Web Content Accessibility Guidelines (WCAG 2.0), die klare Vorgaben bezüglich der Barrierefreiheit festlegen. Ist eine Webseite nach diesen Kriterien umgesetzt, kann dies als eine Art Qualitätssiegel angegeben werden.

  • die Richtlinien für barrierefreie Webinhalte (WCAG) 2.0:
    w3.org/Translations/WCAG20-de

  • eine Checkliste für die barrierefreie Umsetzung:
    accessibility-checklist.ch

Zum Weiterlesen

Auf die Hürden, die bei der Farbwahrnehmung auftreten können, gehe ich in Abschnitt 9.9.1, »Hürden bei der Farbwahrnehmung«, ein.

 


Ihre Meinung?

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de

<< zurück
 Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Webdesign Webdesign
Jetzt Buch bestellen

 Buchempfehlungen
Zum Rheinwerk-Shop: HTML5 und CSS3
HTML5 und CSS3


Zum Rheinwerk-Shop: Praxisbuch Usability und UX
Praxisbuch Usability und UX


Zum Rheinwerk-Shop: Responsive Webdesign
Responsive Webdesign


Zum Rheinwerk-Shop: Website-Konzeption und Relaunch
Website-Konzeption und Relaunch


Zum Rheinwerk-Shop: UX Writing und Microcopy
UX Writing und Microcopy


Zum Rheinwerk-Shop: WordPress 5
WordPress 5


Zum Rheinwerk-Shop: Stile & Looks
Stile & Looks


Zum Rheinwerk-Shop: Digitale Illustration
Digitale Illustration


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und in die Schweiz
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2020
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern