Auf einen Blick. 1 Die richtige Ausrüstung Website-Konzeption Benutzerfreundliche Websites Layout und Komposition...

Transkript

1

2 Auf einen Blick 1 Die richtige Ausrüstung Website-Konzeption Benutzerfreundliche Websites Layout und Komposition Typografie im Web Farbe im Web Grafiken und Bilder Testen und optimieren Weitere Neuerungen in HTML5 und CSS

3 Inhalt 1 Die richtige Ausrüstung 1.1 Was Sie für diesen Kurs brauchen Stift und Papier Bildbearbeitungs- und Layoutsoftware Software zum Entwickeln Browser zum Testen FTP-Software Denken Sie wie ein Webdesigner! Webdesigner sind kreativ Webdesigner kennen das Web Die wichtigsten Technologien Inhalte mit HTML Gestaltung mit CSS Verhalten mit JavaScript Dynamische Inhalte mit PHP und anderen Sprachen Zusammenfassung Website-Konzeption 2.1 Konzeptionsphasen Projektstart: Die Zielgruppe definieren Personas Design Personas Das Konzept entwickeln: Analysephase Recherche Marktanalyse Zielformulierung Der Weg zur richtigen Idee Kreativitätstechniken Moodboards Brainstorming Morphologische Matrix

4 »The Four R s« Gegensatzpaare Kreativität und Druck Die Ideen bewerten Konzeption mit einer Projektmatrix auf den Punkt bringen Ideen bewerten Inhalte sammeln und ordnen Informationsarchitektur festlegen Seitentypen festlegen Strukturen mit Wireframes visualisieren Auf die richtige Ordnung kommt es an Webstandards Ein wenig HTML-Theorie Beispielprojekt Konzeption Phase 1: Analyse Phase 2: Ideenfindung Phase 3: Bewerten und ausarbeiten Phase 4: Durchführung Benutzerfreundliche Websites 3.1 Usability Konventionen und Faustregeln für gute Usability Usability und Inhalte Accessibility Zugänglichkeit und Barrierefreiheit Warum Accessibility wichtig ist immer Hilfsmittel für behinderte Menschen Barrierefreiheit per Gesetz Initiativen für Barrierefreiheit Accessibility und Webstandards Accessibility und Navigation Accessibility und Inhalte Responsive Webdesign Möglichkeiten für mobile Websites Meta-Viewport-Element

5 Media Queries Kritik am Responsive Webdesign Layout und Komposition 4.1 Die Grundlagen moderner Gestaltung Wahrnehmungsgesetze Formen Gestaltungsregeln Psychologische Effekte CSS-Layouts und -Elemente CSS-Spezifizität Pseudoklassen und Pseudo-Elemente in CSS CSS-Reset Maßeinheiten in CSS Typen von CSS-Layouts Fixes Layout Fluides Layout Elastisches Layout Mischformen Gestaltung mit CSS Elemente anordnen mit CSS Weißraum in CSS Das Box Model Raster Inhalte im Layout anordnen Pro und Contra von Rastern Fertige Raster verwenden Ein eigenes Raster entwickeln Inhalte im Raster verteilen Rastergestaltung in Photoshop Raster als Grundlage für Responsive Webdesign Vorüberlegungen wie viele Spalten für welche Monitorgröße? Umsetzung mit CSS

6 4.7 Beispielprojekt Media Queries und CSS-Grundgestaltung Verhalten der Media Queries festlegen Grundgestaltung in CSS Typografie im Web 5.1 Was ist Typografie? Anatomie einer Schrift Kategorien von Schriften Antiqua-Schriften oder Serifen-Schriften Grotesk oder serifenlose Linear-Antiqua Schreibschriften Schriften für Lifestyle und Postmoderne Computerlesbare Schriften Hybridschriften oder moderne Klassiker Schriften in CSS Websichere Schriften Webfonts Kleine Geschichte der Webfonts Aktuelle Lizenzmodelle für Webfonts Webfonts einbinden Die richtige Schrift auswählen Die Funktionen von Schrift Texte mit CSS gestalten Typografische Auszeichnungen Schriftgröße Laufweite Zeilenlänge Textausrichtung Zeilenabstand Mikro-Weißraum Detailtypografie Sonderzeichen in HTML Sonderzeichen auf der Tastatur Sonderzeichen in deutscher Sprache

7 Typografische Anführungszeichen Gedankenstrich, Apostroph und Ellipse Silbentrennung und geschützte Leerzeichen Beispielprojekt Typografie Typekit einrichten Schriften aus Typekit für die Website vorbereiten Typografie in CSS Farbe im Web 6.1 Kleine Farblehre Grundbegriffe: Farbton, Helligkeit, Sättigung Farbtemperatur Primär-, Sekundär- und Tertiärfarben Farbkontraste Komplementärkontrast Hell-Dunkel-Kontrast Grey-Box-Methode Bunt-Unbunt-Kontrast Quantitätskontrast Warm-Kalt-Kontrast Farbassoziationen Die Farben im Detail Farbharmonien Nur eine Farbe Mehrere Farben kombinieren Farben am Monitor und im Web Additive und subtraktive Farbmischung Farben in CSS angeben Verläufe in CSS3 angeben Barrierefreiheit auch bei der Farbwahl Farben und Farbschemata für Webseiten Erste Schritte zu einem Farbschema Der Winkelkontrast Farben im Farbkreis Die Methode der maximalen Kontraste

8 Stile und Vorbilder nutzen Mit Assoziationen zu einem Farbschema Beispielprojekt Farbe Stimmige Helligkeiten die Grey-Box-Methode Ein Farbschema aus Assoziationen ableiten Umsetzung in CSS Grafiken und Bilder 7.1 Tipps für die Bildwahl Fotografie oder Illustration? Emotionalität über Bilder herstellen Bildwirkung Perspektiven Stile Freie Grafiken und Bilder verwenden Bilder als Zitate verwenden Portale mit freien Bildern Gemeinfreiheit und Public Domain Creative-Commons-Inhalte verwenden Grafiken und Bilder einkaufen Bilder für das Web optimieren Der 72-dpi-Mythos »Für Web speichern«in Photoshop Das.gif-Format Das.jpg-Format Das.png-Format srgb: Den richtigen Farbraum einstellen Retina: Die Auflösung kehrt zurück Crashkurs Bildschirm-Technologie Die Retina-Bild-Problematik Lösungen für Retina-Bilder in der Praxis Looks kreieren Hintergründe, Effekte und Spiegelungen Der Grunge-Look

9 Der Web 2.0-Look Haptik Websites zum»anfassen« Buttons gestalten Usability und Accessibility gewährleisten Buttons in Photoshop gestalten Icons einsetzen und gestalten Wichtiges über Symbole Wichtiges über Metaphern Stile von Zeichen Grundregeln für die Gestaltung von Icons Favicons und Touch-Icons Bilder in Websites einbauen Inhaltliche Bilder per HTML einfügen Schmückende Bilder per CSS einfügen Grafik-Vermeidungsstrategien Schatten mit CSS Beispielprojekt Grafiken Fertige Grafiken ins Projekt einbauen Testen und optimieren 8.1 Funktionalitäten in allen Browsern sicher stellen Browserstatistiken abfragen Testumgebung vorbereiten Conditional Comments für den Internet Explorer HTML5 für den Internet Explorer Funktionen mit IE-Filtern nachbilden Responsive Webdesign testen Usability und Accessibility testen Accessibility mit Tools testen Websites ohne CSS und Bilder analysieren Usability-Tests Ladezeiten im Griff Schmuckbilder mit CSS-Sprites optimieren Icon-Fonts HTML validieren

10 8.4 Suchmaschinenoptimierung Keyword-Recherche Meta-Informationen Beispielprojekt letzte Schritte Feinschliff Browser-Tests Responsive Webdesign testen Validierung der Netzschreibstube Usability Die Assoziationen prüfen: Die Projektmatrix Weitere Neuerungen in HTML5 und CSS3 9.1 HTML Video und Audio Formulare in HTML Sonstige wichtige Neuerungen von HTML CSS CSS-Selektoren CSS3-Transitions CSS3-Animationen A Anhang A.1 Quellen A.2 Linktipps für Webdesigner A.3 Die DVD zum Buch Index

11 3 Benutzerfreundliche Websites 3 Benutzerfreundliche Websites Der Nutzer steht im Web über allem denn ohne Nutzer machen Websites keinen Sinn. In diesem Kapitel lernen Sie, was Sie tun können, um Ihren Nutzer gut zu behandeln egal, unter welchen Umständen. 3.1 Usability Abbildung 3.1 E Usability betrachtet die Qualität der Interaktion eines Nutzers mit einer Website, die zu einem bestimmten Ziel führen soll. (Icons: freebie-free-vector-web-icons- 91-icons) Der englische Begriff Usability steht für die Benutzerfreundlichkeit von Produkten, worunter auch Websites fallen. Der Begriff ist eine Wortschöpfung aus»to use«(benutzen) und»ability«(möglichkeit) und bezeichnet die Möglichkeit, eine Website benutzen zu können. An dieser Definition sehen Sie schon, dass der Nutzer für die Usability im Mittelpunkt steht. Der Nutzer tritt in eine Interaktion mit Ihrer Website, indem er auf Links klickt, sich die Inhalte anschaut oder andere Aktionen unternimmt. Die Internationale Standardisierungsorganisation ISO definiert Usability in der Norm DIN EN ISO 9241 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.«aus dieser Definition lassen sich die zentralen Aspekte für eine gelungene Usability ablesen: 82

12 Usability 3.1 E E E Bestimmte Nutzer: Usability hängt stark von der jeweiligen Zielgruppe ab in Kapitel 2 haben Sie bereits gelernt, wie wichtig es ist, Ihre Zielgruppe gut zu kennen. Bestimmter Nutzungskontext: Usability richtet sich stark nach dem Kontext der Benutzung, etwa der konkreten Zielsetzung der Website sowie der Situation der Nutzer. Bestimmte Ziele: Schließlich sind es immer die Ziele, nach denen Usability beurteilt wird. Wichtig dabei ist, dass Nutzer ihre Ziele überhaupt erreichen (effektiv), dass der Aufwand nicht zu hoch ist (effizient) sowie dass sie mit diesem Prozess zufrieden sind. Usability folgt stets einem grundlegenden Ziel: Orientierung bieten. Im Web können wir nicht wissen, wie groß eine Website ist, wie viele Gliederungsebenen sie hat und wo ich bei einem Klick eigentlich herauskomme bedenken Sie, ich könnte sogar auf einer ganz anderen Website landen! Konventionen und Faustregeln für gute Usability In den letzten Jahren haben sich Konventionen herausgebildet, an die sich die meisten Websites halten. Diese Konventionen haben klare Erwartungen geschaffen: Wer auf ein Logo klickt, erwartet, auf die Startseite zurück zu gelangen. Geschieht nichts oder etwas anderes, sind die Nutzer verwundert oder sogar verwirrt. Designer sind oft zwiegespalten, was Konventionen angeht. Zum einen möchte man seinen Besuchern ein optimales Nutzungserlebnis bescheren. Andererseits möchten sich Designer aber auch nicht sklavisch an jede Konvention halten, die ihre Kreativität einschränkt. Denken Sie nur an Links: Müssen Links immer blau und unterstrichen sein, nur weil das eine Konvention ist? Auf vielen Websites würde das nicht wirklich gut aussehen. Sie werden für jede Website selbst entscheiden müssen, an welche Konventionen Sie sich halten möchten und an welchen Stellen Sie Ihrer Kreativität freien Lauf lassen. Mein Rat an dieser Stelle: Wenn Sie einen guten Grund haben, Konventionen zu brechen, tun Sie das ruhig etwa, weil Ihre Idee besser ist. Ansonsten sollten Sie Ihre Kreativität nicht auf Kosten der Nutzer aus leben. Im Laufe der Jahre haben sich für den strukturellen Aufbau von Websites einige klare Konventionen herausgebildet. Die meisten Konventionen nur dann brechen, wenn die eigene Idee besser ist. Und das müssen Sie begründen oder noch besser testen. 83

13 3 Benutzerfreundliche Websites Seiten bestehen aus einem Header oben mit einer Navigation, einem Hauptbereich mit Inhalten, einer Subnavigation (meist linksspaltig, bei Blogs oft rechtsspaltig) und einem Footer. Abbildung 3.2 E Typische Websites bestehen aus einem Header mit Navigation, einer Subnavigation links (rechts bei Blogs), einem Content-Bereich und einem Footer. Komplexe Seiten haben oft drei Spalten in diesem Fall befinden sich rechts meist Meta-Informationen. Konventionen für den Header Steve Krug beschreibt in seinem Standardwerk»Don t Make Me Think«fünf Elemente eines typischen Headerbereichs. a b c d G Abbildung 3.3 Der Header der Deutschen Post ( hält sich vorbildlich an die etablierten Konventionen. Die Website-Kennung 1 findet sich auf westlichen Websites fast immer oben links eine gute, aufmerksamkeitsstarke Stelle für dieses wichtige Orientierungselement. Meist handelt es sich um ein Logo, um den Wiedererkennungswert einer Marke zu erhöhen. G Abbildung 3.4 Konventionen sind stark kulturell geprägt. Die hebräische Site co.il setzt die Site-Kennung nach rechts, denn Hebräisch wird von rechts nach links gelesen. 84

14 Usability 3.1 Ein Button zurück zur Startseite ist ein ganz zentrales Element zur Stärkung des Vertrauens in eine Website wenn ich mich verirren sollte, kann ich immer wieder an den Ausgangspunkt zurückkehren. Standard ist es, die Site-Kennung 1 mit der Startseite zu verlinken so nimmt sie eine Doppelfunktion ein. Gerade unerfahrenen Nutzern könnte dies aber noch nicht geläufig sein. Für diese Zielgruppe bietet es sich also an, einen zusätzlichen Link namens»home«oder»startseite«einzubauen. Die Sektionen einer Seite 2 entsprechen nahezu immer ihrer Hauptnavigation. Und da es zur Navigation einiges zu sagen gibt, habe ich sie in einen eigenen Abschnitt ausgelagert. In der Hilfsnavigation 3 können Informationen untergebracht werden, die nicht so wichtig sind, dass sie in die Hauptnavigation gehören das Impressum oder Informationen über das Unternehmen sind beliebte Beispiele. Auf die Suchfunktion 4 verzichten können allenfalls sehr kleine Websites. Nach Erkenntnissen von Usability-Experte Jakob Nielsen gibt es Nutzer, die eine Suchfunktion der gewöhnlichen Navigation vorziehen er bezeichnet sie als suchdominante Nutzer. Usability von Suchfeldern Die Usability von Suchfeldern lässt sich verbessern, indem automatisch Rechtschreibfehler erkannt und schon beim Tippen Vorschläge gemacht werden. Er weiterte Suchoptionen machen Sinn, sollten jedoch optional sein. Und die Darstellung der Ergebnisse sollte möglichst übersichtlich ge stal tet werden. Auf die technischen Details kann ich im Rahmen dieser Einführung nicht eingehen. G Abbildung 3.5 Onlineshops und Aktionsplattformen wie Ebay ( sind zu großen Teilen von ihrer Suchfunktion abhängig und investieren viel in sinnvolle Filterfunktionen der Ergebnisse. 85

15 3 Benutzerfreundliche Websites Konventionen für die Navigation Preisfrage: Wofür ist eine Navigation da? Klar, zum Navigieren aber das ist nicht die ganze Wahrheit. Die Navigation einer Website hat folgende Funktionen: E einen Eindruck von Tiefe und Breite der Website geben, E das Kernthema der Website vermitteln, E Orientierung bieten, wo auf der Website sich ein Nutzer gerade b e fi n d e t, E implizite Anweisungen geben, was man als Nutzer als nächstes tun könnte. Abgesehen davon soll die Navigation Vertrauen schaffen: Weiß der Betreiber einer Website, wovon er spricht? Sind alle Themen enthalten, die man hier erwarten könnte? Macht er es mir einfach, sie zu finden? Oft müssen Sie eine Abwägung zwischen Konventionen und kreativem Ausdruck treffen. Ungewohnt positionierte Navigationen wie auf können einer Gestaltung zwar das gewisse Etwas geben, allerdings auch zu großer Verwirrung bei den Nutzern führen. Abbildung 3.6 E Eine mittig positionierte Navigation wie auf de kann vor allem unerfahrene Nutzer verwirren. Es ist also nicht Aufgabe der Navigation, die Organisationsstruktur eines Unternehmens oder einer Institution abzubilden. Das wird noch immer häufig vergessen. Wie viele Universitäten erwarten eigentlich von ihren Nutzern, dass sie auf»fachbereich II«klicken, um bei der Germanistik herauszukommen? Woher aber soll ein externer Nutzer wissen, zu welchem Fachbereich die Germanistik gehört? 86