noho r retie - Store & Retrieve Data Anywhere · Leseprobe Neben all solchen Themen wie Struktur, Layout, Typografie oder Farbe ist auch die Qualitätssicherung ein wichtiger Aspekt

LeseprobeNeben all solchen Themen wie Struktur, Layout, Typografie oder Farbe ist auch die Qualitätssicherung ein wichtiger Aspekt auf dem Weg zu einer gut gestalteten Website. In dieser Leseprobe erfahren Sie, wie Sie Ihre Website so testen und optimieren, dass nichts mehr schiefgehen kann.

Björn Rohles

Grundkurs gutes WebdesignAlles, was Sie über Gestaltung im Web wissen müssen

511 Seiten, broschiert, 2. Auflage, August 2017 29,90 Euro, ISBN 978-3-8362-4404-6

www.rheinwerk-verlag.de/4272

»Testen und optimieren: Wie Sie die Qualität einer Website sichern«

Inhaltsverzeichnis

Index

Der Autor

Leseprobe weiterempfehlen

Know-how für Kreative.

https://www.rheinwerk-verlag.de/grundkurs-gutes-webdesign_4272/?utm_source=leseprobe&utm_medium=pdf&utm_campaign=leseprobe.rd.roi.product.4272&utm_content=roi&utm_term=4272

mailto:?body=Leseproben-Empfehlung:%20%C2%BBGrundkurs%20gutes%20Webdesign%20%E2%80%93%20Alles,%20was%20Sie%20%C3%BCber%20Gestaltung%20im%20Web%20wissen%20m%C3%BCssen%C2%AB%20von%20Rheinwerk,%20http://gxmedia.galileo-press.de/leseproben/4272/leseprobe_rheinwerk_grundkurs_gutes_webdesign.pdf&subject=Leseprobe:%20%C2%BBGrundkurs%20gutes%20Webdesign%20%E2%80%93%20Alles,%20was%20Sie%20%C3%BCber%20Gestaltung%20im%20Web%20wissen%20m%C3%BCssen%C2%AB

9Testen und optimierenWie Sie die Qualität einer Website sichern

E Wie teste ich Websites?

E Wie optimiere ich Ladezeiten?

E Wie überprüfe ich Usability und Accessibility?

9 Testen und optimieren

442


Konzeption, Struktur und Layout, Typografie, Farben, Grafiken – mit all diesen Mitteln haben Sie in den bisherigen Kapiteln gear-beitet, um eine gute Gestaltung zu erreichen. Ein Aspekt fehlt Ihnen noch – und er ist zugleich einer der wichtigsten: Qualitäts-sicherung. Lernen Sie in diesem Kapitel, wie Sie Ihre Website so testen und optimieren können, dass wirklich (fast) nichts mehr schiefgehen kann.

9.1 Funktionalitäten sicherstellen

Jeder Browser ist anders. Es ist daher absolut unmöglich, dass eine Website in allen Browsern gleich aussieht. Ihr Ziel sollte es jedoch sein, dass die Website in jedem Browser gut aussieht und funktioniert – wie das geht, erfahren Sie in diesem Abschnitt.

Browser-Statistiken abfragen

Zunächst einmal sollten Sie sich entscheiden, welche Browser überhaupt getestet werden sollen. Viele Designer möchten dar-auf mit »Alle« antworten – das Problem dabei wäre jedoch, dass Ihnen das tagelange Anpassungen bescheren würde.

Sinnvoller ist es, seine Entscheidung auf Statistiken zu basie-ren. Wenn Sie an einer Neugestaltung einer bestehenden Web-site arbeiten, gibt es häufig Erkenntnisse darüber, mit welchen Browsern die eigenen Nutzer arbeiten – nichts ist besser. Ansons-ten müssen Sie sich an allgemeine Statistiken halten. Gute Quel-len dafür sind die Website http://gs.statcounter.com und das Por-tal https://de.statista.com.

Funktionalitäten sicherstellen 9.1

443

Testumgebung vorbereiten

Da sich viele Browser weitgehend standardkonform verhalten, reicht es normalerweise, die aktuellen beiden Versionen zu tes-ten. Bei einigen Browsern ist es möglich, mehrere Versionen auf einmal zu installieren.

Virtuelle Maschinen und Screenshot-Services | Microsoft hält für Web-Entwickler einen tollen Service unter https://developer.microsoft.com/en-us/microsoft-edge bereit:

E Sie können virtuelle Maschinen herunterladen, mit denen Sie Websites auf unterschiedlichen Versionen von Internet Explo-rer und Edge testen können – beispielsweise mit der kosten-losen Virtualisierungssoftware Virtual Box (auch auf Mac und Linux).

E Sie können sich Screenshots einer Website in einigen Brow-sern erstellen lassen. Dabei arbeitet Microsoft mit Browser-Stack (www.browserstack.com) zusammen – einem Service, bei dem Sie Websites für wenig Geld in über 1.000 Browser-Ver-sionen testen können. Eine Alternative ist der Service Cross-BrowserTesting (https://crossbrowsertesting.com).

E Eine Schnellanalyse liefert Ihnen erste Anhaltspunkte zur Optimierung.

F Abbildung 9.1 Browser-Marktanteile in Deutschland im Septem-ber 2016

BonusFalls Sie noch für ältere Versionen des Internet Explorers optimieren möchten, finden Sie im Bonus-Kapitel »optimie-ren-internet-explorer.pdf« einige Hinweise.


444

Außerdem erlaubt der Internet Explorer ab Version 9, eine Web-site in früheren Versionen des Browsers anzuschauen: Öffnen Sie dazu die Entwicklertools im Menü Extras, und wählen Sie unter Browsermodus die gewünschte IE-Version aus.

Alle Browser haben umfangreiche Entwicklertools an Bord, mit denen Sie verschiedenste Situationen simulieren können. Es lohnt sich, einen Blick in die Dokumentation und die Online-Kurse zu werfen, die von den Browser-Herstellern zur Verfügung gestellt werden – hier lernt man immer wieder Kniffe, die das Testen ver-einfachen. Für Google Chrome erreichen Sie diese beispielsweise unter https://developers.google.com/web/tools/chrome-devtools/.

Breakpoints testen | Responsive Webdesign stellt Sie vor die Her-ausforderung, neben verschiedenen Browsern auch unterschiedli-che Viewport-Breiten testen zu müssen. Ein sehr gutes Hilfsmittel ist das kleine Bookmarklet »Viewport Resizer« von Malte Was-sermann, das Sie unter http://lab.maltewassermann.com/viewport-resizer finden. Ziehen Sie den blauen Button einfach in die Lesezei-chen-Leiste Ihres Browsers – schon ist das Tool einsatzbereit. Zum Testen öffnen Sie einfach die zu analysierende Website und klicken

Abbildung 9.2 H Umstellen des Browser-Modus im Internet Explorer

Weitere ToolsWeitere Tipps für Tools zum Testen responsiver Websites finden Sie im Dokument »quellen-le-setipps.pdf« im Down-load-Bereich.


445

auf das Bookmarklet. In der Steuerleiste können Sie nun entweder eine der Vorgaben wählen oder eine freie Größe eintragen.

Außerdem bringen viele Browser mittlerweile eigene Tools mit. Abbildung 9.4 zeigt dies am Beispiel von Chrome. Mit einem Klick auf 3 wird das Tool zum Testen von Responsive Designs aktiviert. Anschließend lässt sich das Browser-Fenster im Bereich 1 manu-ell anpassen. Alternativ stehen unter 2 verschiedene Voreinstel-lungen für Viewport, Zoomstufe und Pixeldichte bereit.

Geräte simulieren | Solche Browser-Tools sind ein gutes Hilfs-mittel zum Testen von Breakpoints. Allerdings berücksichtigen sie nicht alle Aspekte, die für die User Experience auf mobilen Geräten relevant sind. Ein typisches Beispiel sind Formularfel-der. Während ein Browser-Tool letztlich nicht das Verhalten des Browsers verändert, blendet ein Smartphone beim Aktivieren des Felds eine passende Tastatur ein.

In der App-Entwicklung arbeiten Programmierer mit Simula-toren und Emulatoren, die Teil der Entwicklungsumgebungen sind – damit lassen sich auch Websites testen. Die Möglichkeiten hängen dabei von der verwendeten Plattform ab. So stellt Apple seine Entwicklungssoftware Xcode ausschließlich für Macs bereit.

G Abbildung 9.3 Viewport-Resizer-Book-marklet

F Abbildung 9.4 Testen des Responsive Designs mit Hilfe von Chrome

32

1

G Abbildung 9.5 Testen des Responsive De -signs mit Hilfe von Chrome- E-Mail-Formularfeld mit HTML5 auf dem iPhone-Simulator


446

Sie lässt sich kostenlos aus dem App Store herunterladen. Nach der Installation findet sich der iPhone-Simulator unter Xcode • Open Developer Tools • Simulator.

Die Entwicklungsumgebung für Android (»Android Studio«) steht hingegen für Mac, Windows und Linux unter https://deve-loper.android.com/studio/index.html zur Verfügung. Die Software kommt mit einem umfangreichen Emulator, der virtuelle Geräte in allen möglichen Konfigurationen erlaubt. Google stellt unter https://developer.android.com/studio/run/emulator.html Informati-onen bereit, wie das Tool konfiguriert werden kann.

Natürlich verfügt auch Microsoft über eine eigene Entwick-lungsumgebung namens »Visual Studio« (www.visualstudio.com/de/downloads).

Testen auf echten Geräten | Sinnvoll ist außerdem das Testen auf echten Geräten. Dazu haben sich sogenannte Device Labs etab-liert – Testlabore, die Zugang zu verschiedenen Geräten bieten. Eine tolle Initiative ist »Open Device Lab« (http://opendevicelabs.com): Sie können dort nach öffentlich zugänglichen Testlaboren suchen und natürlich auch selbst Geräte spenden, die Sie nicht mehr benötigen. Besonders in größeren Städten können Sie dort fündig werden.

Die Alternative dazu lautet, sich ein eigenes kleines Device-Lab aufzubauen (»Own Device Lab«). Auf jeden Fall sollten Sie alte

GebrauchtmärkteAuch auf Gebrauchtmärk-ten wie eBay können Sie zu geringen Preisen fün-dig werden – auch, weil es für ein Device Lab überhaupt kein Problem darstellt, wenn das Dis-play eines Geräts ge-sprungen ist oder der Akku nicht mehr allzu lange durchhält. Achten Sie dabei auf eine sinn-volle Auswahl von Gerä-ten aller Preisklassen – auch einige exotische Kandidaten sollten dabei sein.

G Abbildung 9.7 Suche nach Open Device Labs im Raum Köln

G Abbildung 9.6 Destiny Montague und Lara Hogan haben mit »Building a Device Lab« ein ganzes Buch zum Thema kostenlos zur Ver-fügung gestellt (http://build-ingadevicelab.com).


447

Smartphones und Tablets nicht wegwerfen, sondern ihnen eine Zweitkarriere als Testgeräte spendieren.

Nun, da Sie mögliche Darstellungs- und UX-Probleme identi-fizieren können, taucht die nächste Frage auf: Wie kann ich dar-auf reagieren?

Feature-Unterstützung prüfen und reagieren

Ihr Ziel sollte sein, allen Nutzern eine positive User Experience zu ermöglichen. Statt einzelne Browser anzusprechen, konzentrieren sich Web-Entwickler eher darauf, welche Features unterstützt werden, und liefern alternative Stilangaben – wichtig ist, was ein Browser kann, nicht, wie er heißt.

Die wichtigste Plattform mit Informationen zur Browser-Unter-stützung ist »Can I use« (http://caniuse.com) – dort können Sie ein beliebiges Feature eingeben und die Unterstützung prüfen. Was aber macht man, wenn eine relevante Zahl von Besuchern noch mit alten Browser-Versionen unterwegs ist, die eine wich-tige CSS-Eigenschaft nicht unterstützen? Sie brauchen eine Mög-lichkeit, die unterstützten Features abzufragen.

Modernizr | Das Skript Modernizr wurde 2009 von Paul Irish, Faruk Ates, Alex Sexton, Ryan Seddon und Alexander Farkas ent-wickelt und hat sich seitdem als kleiner Helfer in vielen Projekten durchgesetzt. Das Skript wird heruntergeladen und im Head der HTML-Dokumente referenziert:

<script src="js/modernizr.js"></script>

G Listing 9.1 Einbindung von Modernizr in <head>

Modernizr überprüft anschließend automatisch beim Aufruf einer Seite, ob der Browser der Nutzerinnen moderne CSS-Features unterstützt. Wenn ja, fügt das Skript spezifische Klassen wie css-columns, border-radius oder box-shadow dem html-Element hinzu. Diese Klassen erlauben es dann, CSS-Eigenschaften nur dann zu spezifizieren, wenn sie auch unterstützt werden.

Ein Praxisbeispiel: Sie möchten ein Bild mit einem Text in einer ähnlichen Farbe überlagern und ihn mit einem Textschatten vom Hintergrund abheben (text-shadow: 2px 5px 10px black;).

Vendor PrefixesIn den letzten Jahren haben Browser neue CSS-Eigenschaften oft zu-nächst mit speziellen Vor-silben eingeführt, den sogenannten Vendor Pre-fixes. Die Idee war, dass Entwickler mit den neuen CSS-Eigenschaften expe-rimentieren konnten, al-lerdings bewegt sich der Trend von der Verwen-dung dieses Verfahrens weg. Hintergründe zu dieser Thematik erfahren Sie im Bonus-Beitrag »vendor-prefixes.pdf« im Download-Bereich.

G Abbildung 9.8 Modernizr erlaubt es, Brow-ser-Features zu erkennen und darauf zu reagieren.

Sie finden das Bei-spiel unter https://codepen.io/rohles/

pen/NdqYaY oder im Ordner Kapitel_09 • Modernizr – die Idee dazu lieferte Scott Jehl in »Responsible Respon-sive Web Design«.


448

Das sieht in Browsern mit Unterstützung für text-shadow gut aus – aber ohne dieses Feature wird der Text nahezu unsichtbar (etwa im IE 9):

In solchen Fällen ist Modernizr eine Lösung: Browser mit Unter-stützung für text-shadow können Sie mit der zusätzlichen Klasse .textshadow auf html gezielt ansprechen – allen anderen geben Sie eine alternative Textfarbe mit größerem Kontrast:

p { color: rgb(40, 36, 28); }

.textshadow p {

color: rgb(167, 100, 79);

text-shadow: 2px 5px 10px black;

}

G Listing 9.2 Browser mit Modernizr unterscheiden

Feature Queries mit @supports | Modernizr funktioniert gut, allerdings fühlt es sich komisch an, ein JavaScript auszuführen, um CSS-Eigenschaften zu erkennen. Eine Alternative ist die Erken-nung von CSS-Features in CSS selbst, die mit @supports möglich wird.

So können Sie beispielsweise prüfen, ob der Browser die CSS-Flexbox unterstützt, und sie erst dann aktivieren, wenn das der Fall ist – in allen anderen Fällen greifen alternative Regeln. Hier ist ein Beispiel, das ein responsives Raster auf Basis von Flexbox akti-viert, sofern diese Technologie unterstützt wird:

G Abbildung 9.9 Mit text-shadow in Ordnung …

G Abbildung 9.10 … ohne jedoch nicht.

G Abbildung 9.11 Sinnvoller Fallback für Brow-ser ohne text-shadow

Usability und Accessibility testen 9.2

449

.row { … } /* Standardangaben: Grid mit float… */

@supports ( display: flex ) {

.row { display: flex; } /* …Grid mit der Flexbox… */

}

G Listing 9.3 Erkennung von CSS-Features direkt in CSS

@supports erlaubt auch komplexere Abfragen mit den Operatoren AND, OR und NOT. Die Browser-Unterstützung für @supports ist bereits hoch, allerdings ist der Internet Explorer 11 noch ein gro-ßes Hindernis für die flächendeckende Verwendung. Selbstver-ständlich gibt es verschiedene Hilfsmittel, mit denen das Feature dank JavaScript auch in älteren Browsern ergänzt werden kann, etwa unter https://gist.github.com/codler/03a0995195aa2859465f, https://github.com/termi/CSS.supports oder unter https://github.com/kjarmicki/fq-polyfill.

Neben den rein technischen Browser-Tests sollten Sie auch an Ihre Nutzer denken: Sind Usability und Accessibility wirklich so gut wie geplant? Praktischerweise tun Sie mit den entsprechen-den Tests gewissermaßen »nebenbei« noch etwas für eine gute Auffindbarkeit Ihrer Website in den Suchmaschinen.

9.2 Usability und Accessibility testen

Zur Evaluation von Usability und Accessibility können Sie auf eine Reihe von Hilfsmitteln zurückgreifen. Außerdem können Sie mit fortlaufenden Tests für eine stetige Verbesserung sorgen.

Accessibility mit Tools testen

Automatisierte Tests können Sie mit einer Reihe von Werkzeugen durchführen. Ein sehr guter Vertreter dieser Gattung ist das Tool WAVE unter http://wave.webaim.org. Sie können es jedoch nur auf bereits veröffentlichte Websites anwenden, da Sie eine URL benötigen.

Nachdem Sie die URL in das Textfeld eingegeben haben, zeigt Ihnen WAVE eine Analyse möglicher Accessibility-Probleme an. Mit den Schaltflächen 1 können Sie die Website mit und ohne CSS anschauen. Der Bereich Summary 2 listet die gefundenen

Suchmaschinen-optimierungEine Einführung in die Suchmaschinenoptimie-rung finden Sie im Doku-ment »suchmaschinenop-timierung.pdf« im Download-Bereich.


450

Fehler nach Kategorie sortiert auf. Wichtig sind hier natürlich alle Angaben unter Errors, denn dabei handelt es sich um klare Feh-ler. Die anderen Bereiche sollten Sie genau prüfen, denn es han-delt sich um Hinweise auf häufige Fehlerquellen. Durch einen Klick auf eines der Symbole 3 erhalten Sie Details zu den prob-lematischen Aspekten. Die Kontrast-Fehler können Sie sehr gut analysieren, wenn Sie die Schaltfläche Contrast unter 1 wählen.

Eine weitere gute Möglichkeit ist die Arbeit mit Browser-Erwei-terungen wie den Chrome Accessibility Developer Tools (https://rohl.es/accessibility-toolbar-chrome). Damit lassen sich Accessibi-lity-Audits direkt im Browser durchführen. Natürlich kann ein Test wie dieser nicht alle Schwachstellen finden – er kann Ihnen zwar sagen, ob ein alt-Text bei einem Bild vorhanden ist, nicht aber, ob sein Inhalt für den Nutzer Sinn macht. Bei solchen Fragen hilft Ihnen eine manuelle Analyse.

Websites ohne CSS und Bilder analysieren

Ein praktisches Werkzeug für Ihren Google Chrome ist die Erwei-terung »Web Developer«, die Sie im Chrome Web Store unter https://chrome.google.com/webstore finden können. Nach der Ins-tallation können Sie damit Bilder und CSS mit einem Klick deak-tivieren.

Prüfen Sie nun, ob die Website noch sinnvoll nutzbar ist. Stimmt die Reihenfolge der Elemente? Geht auch ohne Design nichts Wesentliches an Inhalt verloren? Zudem können Sie die

Abbildung 9.12 H Analyse möglicher Accessibi-lity-Probleme mit WAVE

c

a

b

Lynx-BrowserAlternativ können Sie einen Text-Browser wie Lynx zum Testen verwen-den (http://lynx.invisible-island.net9.

Usability und Accessibility testen 9.2

451

Sprachausgabe Ihres Betriebssystems aktivieren und evaluieren, ob der Inhalt verständlich bleibt.

Analytics

Ein weiterer Tipp: Wenn Sie eine Analyse-Software wie beispiels-weise Google Analytics (www.google.com/analytics) verwenden, können Sie sehr genau erkennen, welche Bereiche Ihrer Web-site für die Nutzer interessant sind – und daran lassen sich oft Problemstellen finden, beispielsweise wenn in einem Shop nach dem Aufruf des Warenkorbs nicht gekauft, sondern abgebrochen wurde.

Usability überprüfen

Der wichtigste Faktor bei der Usability-Optimierung bleibt natür-lich der Nutzer selbst. Mit Usability-Tests können Sie Erkennt-nisse über das Verhalten Ihrer Nutzer auf der Website gewinnen – so etwas lässt sich auch ohne Probleme selbst durchführen. Der Tool-Anbieter UXPin hat mit »The Guide to Usability Testing« ein E-Book mit vielen Tipps zu diesem Thema veröffentlicht, das Sie unter https://www.uxpin.com/studio/ebooks/guide-to-usability- testing kostenlos (gegen eine E-Mail-Adresse) herunterladen können. Es enthält viele wissenswerte Informationen über unter-schiedlichste Testmethoden, deren Beschreibung den Rahmen dieses Buches bei Weitem sprengen würden.

Fortwährende TestsUsability ist ein fortwäh-rendes Thema für jeden Website-Betreiber: Sie müssen immer wieder daran feilen. Am besten nehmen Sie sich regelmä-ßig einige Minuten Zeit, um Ihre Website auf mögliche Schwachstellen zu überprüfen – das gilt insbesondere, wenn sich regelmäßig etwas an der Struktur verändert.

F Abbildung 9.13 Nur eine von vielen Möglich-keiten – beim »Usability Test-essen« werden Probanden zu Pizza und Bier eingeladen und liefern den Organisatoren im Austausch wertvolles Feed-back (http://usability-testes-sen.de).


452

Im Laufe der Zeit werden Sie außerdem Rückmeldungen von Ihren Nutzern erhalten – nehmen Sie deren Aussagen sehr ernst.

Eine Alternative können Remote-Usability-Tests sein, die online aus der Distanz durchgeführt werden können. Die Hürden sind hierbei geringer, weil Probanden zu Hause oder am Arbeits-platz teilnehmen können. Tipps für entsprechende Anbieter fin-den Sie im Dokument »quellen-lesetipps.pdf« im Download-Bereich.

Neben solchen Usability-Tests gibt es natürlich auch die Mög-lichkeit, eine Website mit kritischem Blick durchzugehen und selbst auf häufige Fehler zu achten. Man bezeichnet dies als heu-ristische Evaluation, weil sie sich an etablierten Usability-Prinzi-pien (den Heuristiken) orientiert. Im Laufe dieses Buches haben Sie zahlreiche dieser Prinzipien bereits kennengelernt. Der UX-Experte Joe Natoli hat unter https://rohl.es/natoli-ux-checkliste eine praktische Checkliste erstellt, die Sie als Einstieg in eine Überprüfung nutzen können.

HTML und CSS validieren

HTML und CSS folgen klaren Regeln, und hin und wieder macht jeder Webdesigner einen Fehler. Bei der Suche danach hilft ein sogenannter Validator, dessen Aufgabe es ist, den HTML-Quelltext nach kleinen Schnitzern zu durchsuchen. Für validen Code spre-chen zahlreiche Gründe, z. B. bessere Accessibility und Auffindbar-keit durch Suchmaschinen, konsistente Interpretation durch alle Browser sowie einfachere Wartbarkeit und Fehler suche.

Die offiziellen Validatoren des W3C für HTML (http://validator.w3.org) sowie CSS (https://jigsaw.w3.org/css-validator), der Living Validator (http://html5.validator.nu) oder Total Validator (www.totalvalidator.com) helfen Ihnen bei der Validierung. Den Quell-text zieht sich das Tool wahlweise per URL, Datei-Upload oder Direkteingabe. Nach kurzer Analyse erhalten Sie eine Übersicht von Fehlern.

Beachten Sie dabei: Validatoren sind Hilfsmittel, die typische Fehler wie falsche Verschachtelungen oder ungültige Elemente erkennen können. Sie liefern jedoch keine absoluten Wahrheiten – auch eine valide Seite kann unzugänglich oder unbenutzbar sein.

JSLintBei der Qualitätssiche-rung von JavaScript-Code kann beispielsweise JSLint (http://jslint.com) helfen.

Performance: Ladezeiten im Griff 9.3

453

9.3 Performance: Ladezeiten im Griff

Zu guter Usability und Accessibility gehören auch möglichst kurze Ladezeiten. Nutzer sind im Internet eher ungeduldig und haben wenig Verständnis für langsame Websites. Zum Glück gibt es einige Techniken, die Sie zur Reduzierung der Ladezeit einsetzen können. Performance ist daher ein fundamentaler Bestandteil der User Experience.

Performance als Design-Entscheidung

Um der immer weiter steigenden Bedeutung von Performance Rechnung zu tragen, hat der Web-Entwickler Tim Kadlec die Idee des Performance-Budgets vorgeschlagen. Dabei geht es darum, performance-relevante Messwerte möglichst früh im Projekt als zentrale Aspekte zu definieren – jede Design-Entscheidung hat Auswirkungen auf die Website-Performance. Damit vermeiden Sie, Performance nur ganz am Ende eines Projekts in den Blick zu nehmen, wenn viele relevante Entscheidungen bereits getroffen wurden.

In der Praxis kann das so aussehen, dass Sie einen festen Richt-wert festlegen, der nicht überschritten werden darf. Es gibt ver-schiedene Möglichkeiten, ein Performance-Budget zu definieren:

E basierend auf dem Browser: »Diese Seite soll die Gesamtgröße von 400 kB nicht überschreiten und maximal 15 Requests aus-führen.«

E basierend auf der User Experience: »Unsere Seite soll eine Ladezeit von unter 1,5 Sekunden (bei DSL 16.000) haben.«

E basierend auf dem Wettbewerb: »Unsere Seite soll 20 % schneller laden als die unserer Mitbewerber.«

Sinnvoll ist es auch, das Performance-Budget in kleinere Bau-steine zu unterteilen. So könnten Sie beispielsweise festlegen, dass alle eingesetzten Webfonts zusammen maximal 100 kB groß sein dürfen.

Der Vorteil eines Performance-Budgets liegt darin, dass Sie die Auswirkungen von Design- und Content-Entscheidungen auf die Performance möglichst früh diskutieren können. Soll auf einer Seite ein neues Feature eingebaut werden (z. B. ein weiteres

Auswirkungen guter PerformanceUnter https://wpostats.com finden Sie zahlreiche Statistiken zur Bedeutung guter Website-Perfor-mance. Onlineshopper erwarten beispielsweise, dass eine Seite in zwei Sekunden geladen ist – bereits nach drei Sekun-den brechen viele von ihnen den Vorgang ab.

Mobile PerformanceMobile Verbindungsge-schwindigkeiten variieren sehr stark in unterschied-lichen Regionen – und das wird auch noch eine Weile so bleiben (www.ericsson.com/assets/ local/mobility-report/documents/ 2016/ericsson-mobility-report-november- 2016.pdf).


454

Carousel), das die festgelegte Grenze überschreitet, muss opti-miert werden oder ein anderes Feature weichen. Damit wirken Sie dem Phänomen des »Feature Creep« entgegen: Im Laufe der Zeit werden immer wieder neue Funktionen eingeführt – nach und nach geht damit die Performance in den Keller.

Eine Frage des Protokolls

Natürlich gibt es eine Vielzahl weiterer Maßnahmen zur Verbes-serung der Performance. Welche davon geeignet sind, hängt stark davon ab, welches Übertragungsprotokoll verwendet wird.

Wenn Sie im Browser eine Website aufrufen, werden alle Daten über das Protokoll HTTP (»Hypertext Transfer Protocol«) über-tragen. HTTP/1.1 ist seit vielen Jahren zuverlässig im Einsatz, hat allerdings aus heutiger Sicht seine Tücken. Der im Mai 2015 ver-abschiedete Nachfolger HTTP/2 möchte mit diesen Begrenzun-gen aufräumen. So kann der Server Dateien aktiv an den Brow-ser schicken, statt darauf zu warten, dass der Browser die Dateien selbst anfordert. Besonders wichtig ist auch die Multiplex-Über-tragung, bei der mehrere Dateien mit einer Verbindung übertra-gen werden, statt jedes Mal eine neue Verbindung aufzubauen. Konkret heißt das: Während Sie bei HTTP/1.1 versuchen sollten, möglichst wenige Requests auszuführen, profitiert HTTP/2 eher davon, Ressourcen in verschiedene Dateien aufzuspalten.

In den folgenden Abschnitten werde ich mich auf Verfahren konzentrieren, die besonders beim älteren HTTP/1.1-Protokoll sinnvoll sind – es ist derzeit noch vorherrschend. Bedenken Sie jedoch, dass eine Optimierung für HTTP/2 anders aussieht. Wei-

AutomatisierenWenn Sie die Auslastung Ihres Performance-Bud-gets nicht immer wieder selbst nachrechnen möchten, hat Tim Kadlec unter https://timkadlec.com/2014/05/perfor-mance-budgeting-with-grunt eine Möglichkeit beschrieben, den Prozess mit Hilfe des Tools Grunt zu automatisieren.

Abbildung 9.14 E Trotz seines jungen Alters unterstützen bereits zahlrei-che Browser HTTP/2 (http://caniuse.com/#feat=http2).


455

terführende Artikel dazu finden Sie im Dokument »quellen-lese-tipps.pdf« im Download-Bereich.

Speed-Tests nutzen

Google bietet mit Page Speed ein Werkzeug an, das Tipps zur Optimierung gibt. Sie erreichen es unter https://developers.google.com/speed/pagespeed/insights. Eine weitere Möglichkeit ist die Browser-Erweiterung YSlow von Yahoo (http://yslow.org). Beide Tools geben Ihnen neben Anhaltspunkten in Form von Noten auch ganz konkrete Empfehlungen.

Empfehlenswert ist außerdem der »Service Web Page Test« (www.webpagetest.org), der die effektive Ladezeit einer Website misst und mit einem Diagramm die Ladereihenfolge und -dauer verschiedener Ressourcen darstellt. Ein Blick in die Dokumenta-tion (https://sites.google.com/a/webpagetest.org/docs/using-web-pagetest/quick-start-quide) lohnt sich, denn Web Page Test ist ein sehr mächtiges Werkzeug für die Performance-Analyse.

Ungenutzten Code entfernen

Ein erster Schritt bei der Performance-Optimierung von Websites ist, unnötigen Datenballast zu entfernen. Dazu zählt, den Quell-text zu überprüfen und aufzuräumen sowie die Dateigröße selbst zu reduzieren.

Während der Entwicklung sowie im Livebetrieb schleicht sich immer mal wieder Code ein, der später nicht mehr genutzt wird

Unterstützung von HTTP/2 prüfenHTTP/2 erfreut sich be-reits jetzt einer hohen Unterstützung durch Browser und ist stark auf dem Vormarsch. Für die Nutzung des Protokolls ist es notwendig, die pas-sende Server-Version bzw. das passende Ser-ver-Modul zu installieren und zu konfigurieren. Sprechen Sie diesbezüg-lich mit Ihrem Hosting-Provider. KeyCDN hat unter https://tools.key-cdn.com/http2-test ein Tool online gestellt, das HTTP/2-Unterstützung prüft.

F Abbildung 9.15 Google Page Speed


456

und entfernt werden kann. Mit Tools wie »Unused CSS« (https://unused-css.com, kostenpflichtig) oder der Firefox-Erweiterung »Dust-Me« (https://addons.mozilla.org/de/firefox/addon/dust-me-selectors) lässt sich das CSS auf ungenutzte Selektoren und Anga-ben untersuchen. Auch im Hinblick auf JavaScript sowie Erwei-terungen von Content-Management-Systemen sollten Sie die Performance im Auge behalten und nur verwenden, was wirklich notwendig ist.

Requests reduzieren

Wie erwähnt, ist die Reduzierung der Anzahl von HTTP-Requests sehr wichtig, wenn das HTTP/1.1-Protokoll verwendet wird. Dazu gibt es einige Maßnahmen.

Schmuckbilder mit CSS-Sprites optimieren | Stellen Sie sich vor, Sie haben auf einer Website viele kleine Icons sowie einige Hinter-grund-Grafiken, die oft wiederholt werden. Für jede dieser Grafi-ken muss der Browser eine Anfrage schicken und die Datei einzeln herunterladen. Das ist nicht gerade effektiv.

CSS-Sprites können dafür eine Lösung sein. Sie machen sich background-position zunutze. Das Prinzip beruht darauf, alle Grafiken in einer einzigen Datei zusammenzufassen und dann mittels background-position zu verschieben, bis nur noch die gewünschten Teile zu sehen sind. Das kann beispielsweise so aus-sehen:

.sprite1 {

background:url('css-sprite.jpg) no-repeat;

background-position: 0 0;

}

.sprite2 {

background:url('css-sprite.jpg) no-repeat;

background-position: 0 -100px;

}

CSS-Sprites können sehr komplex werden, wenn Sie viele schmü-ckende Grafiken verwenden. Ein sehr gutes Hilfsmittel ist der CSS Sprite Generator unter http://csssprites.com.

G Abbildung 9.16 CSS-Sprite von YouTube

Sie finden das Bei-spiel unter https://codepen.io/rohles/

pen/GrgOrv oder im Ordner Kapitel_09 • CSS-Sprites.

Listing 9.4 E Beide Grafiken wurden in einer CSS-Sprite zusammen-gefasst.


457

Requests mit Data-URIs reduzieren | Eine weitere Möglichkeit zum Einsparen von HTTP-Requests ist die Arbeit mit Data-URIs. Das lässt sich beispielsweise bei Grafiken oder Webfonts nutzen.Dabei werden die Grafiken nicht im CSS oder HTML referenziert, sondern direkt dort eingebettet – und zwar in einer Base64-codierten Form. Diese Zeichenketten sind extrem lang und unübersichtlich:

<img width="100" height="200" alt="Flugzeug beim Start"

src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAD

ICAYAAAAePET[…]" />

G Listing 9.5 Data-URI als src

Die Syntax einer Data-URI startet stets mit data:. Es folgen Anga-ben zu Dateityp und Codierung, schließlich ein Komma und die Rohdaten des Bildes. Bei der Konvertierung helfen die Online-Tools unter http://websemantics.co.uk/online_tools/image_to_data_uri_convertor, http://dataurl.net oder https://boazsender.git-hub.io/datauri.

Data-URIs geben Ihrer Website einen Performance-Boost, haben jedoch auch eine Reihe von Nachteilen:

E Die Arbeit mit ihnen ist unübersichtlich, da im Quelltext sehr lange Zeichenketten auftauchen.

E Außerdem ist es nun wesentlich aufwendiger, ein Bild auszu-tauschen – statt es per FTP einfach zu überschreiben, muss es neu codiert und an allen referenzierten Stellen ausgetauscht werden.

F Abbildung 9.17 CSS Sprite Generator

Tipp für Nutzer von CSS-PräprozessorenEin CSS-Präprozessor wie Sass kann Ihnen bei der Arbeit mit Data-URIs sehr behilflich sein, beispiels-weise die Funktion in-line-image() für Com-pass mit Sass: http://compass-style.org/refe-rence/compass/helpers/in-line-data.


458

E Data-URIs sparen Requests, sind aber auch oft etwas größer als die Ursprungsdateien. Hier hilft Komprimierung mit gzip.

E Ihre Verwendung sollte mit gutem Caching verbunden wer-den: Wenn Data-URIs beispielsweise im CSS eingebunden sind, vergrößert sich dadurch das Dokument und dessen Lade-zeit – das CSS wird daher erst später ausgewertet. Hier hilft es also, das CSS für spätere Verwendung großzügig zu cachen.

Skripte und CSS-Dateien zusammenfassen und minimieren | Während der Entwicklung und zur Wartung hat die Aufteilung

von Skripten und CSS in mehrere Dateien große Vorteile – das ist

viel übersichtlicher, vereinfacht die Zusammenarbeit im Team und

erlaubt flexiblere Arbeitsweisen. Häufig bringen auch das CMS

selbst sowie diverse Erweiterungen eigene Skript- und CSS-Dateien

mit. Hinzu kommen externe Bibliotheken und Services, etwa Biblio-

theken wie jQuery oder Share-Buttons für Facebook und Co.

Schnell kommen auf diese Weise Dutzende Requests zusam-men, die eine Website verlangsamen können. Im Livebetrieb ist es daher besser, wenn die Angaben in eine einzige Datei hineinko-piert werden. Achten Sie dabei auf die richtige Reihenfolge, damit nicht aus Versehen eine wichtige Angabe überschrieben wird.

Neben dem Zusammenfassen können die Dateien auch noch minimiert werden. Dabei werden Leerzeichen, Absätze und Kom-mentare entfernt – das Ergebnis ist eine spürbare Reduzierung der Dateigröße. In jedem Fall sollten Sie jedoch eine nicht mini-mierte Kopie der Dateien aufheben, denn die minimierten Versio-nen sind zu unübersichtlich, um mit ihnen zu entwickeln.

Share-ButtonsAuch die so beliebten Share-Buttons sind bis-weilen eine Performance-Bremse – zudem kommu-nizieren sie auch dann mit ihren Servern, wenn ein Nutzer gar nicht dar-auf geklickt hat. Shariff von Heise kann daher eine Lösung sein (https://github.com/heiseonline/shariff), denn hier werden die Buttons nur auf An-forderung aktiviert.

Abbildung 9.18 E Kaum zu lesen, aber deutlich kleiner – das Ergebnis des JavaScript-Minifier


459

Manuell ist dieser Prozess natürlich ein sehr hoher Aufwand. Zum Glück gibt es jedoch Helfer wie den Minifier (www.minifier.org), die diese Aufgabe übernehmen können. Weitere Tool-Tipps finden Sie im Dokument »quellen-lesetipps.pdf« im Download-Bereich.

Dateigröße optimieren

Ein weiteres Ziel ist, die Größe einer Website so klein wie möglich zu machen – wenn weniger übertragen werden muss, wirkt sich dies ebenfalls positiv auf die Performance aus. In den vorherigen Abschnitten haben Sie bereits einige Maßnahmen zur Reduzie-rung der Größe kennengelernt. Es gibt aber noch weitere Mög-lichkeiten.

Daten komprimieren | Mit dem Komprimierungsverfahren gzip steht eine Technologie zur Verfügung, mit der im Schnitt 70 % der Daten eingespart werden können. Das Verfahren greift besonders bei Texten und spart einiges an Zeichen, indem auf bereits vor-handene Informationen verwiesen wird, statt sie erneut zu über-tragen. Gzip ist ein verlustfreies Verfahren und wird von allen modernen Browsern verstanden.

Der Aufwand ist erfreulich gering: Ob gzip auf Ihrem Ser-ver funktioniert, können Sie mit www.gziptest.com ausprobie-ren. Wenn Ihre Website auf einem Apache-Server läuft (das ist meistens der Fall), lässt es sich sehr einfach mit einer Anpassung der ».htaccess«-Datei aktivieren – dabei handelt es sich um eine Konfigurationsdatei des Servers. Es gibt zwei Module (mod_gzip und mod_deflate), die sich dazu eignen – beide hat Patrick Sexton unter https://varvy.com/pagespeed/enable-compression.html mit den erforderlichen Code-Schnipseln erläutert. Der Artikel enthält außerdem die Anweisungen für Server mit nginx und Litespeed. Im Zweifel hilft Ihnen der Administrator Ihres Hosting-Anbieters sicher gerne weiter.

Caching | Trotz aller Optimierungsmaßnahmen ist es immer noch mühsam, Dateien immer wieder neu laden zu müssen, wenn sie mehrmals benötigt werden. So werden beim Aufruf der Home-page beispielsweise viele Dateien geladen, die auch auf Untersei-

Daten-KostenAuf https://whatdoesmy-sitecost.com erhalten Sie eine Einschätzung, was der Aufruf einer Website in verschiedenen Ländern der Welt kostet (in $).

BeispielGregor Meier bringt in seinem Buch »Pagespeed Optimierung« (Hanser, 2016) folgendes einfache Beispiel: Aus dem Satz »Auch ein kleiner Beitrag ist ein Beitrag« kann durch Komprimierung der Satz »Auch ein klei-ner Beitrag ist -4 -3« wer-den. Statt schon einmal genannte Wörter zu wie-derholen, wird also nur noch auf ihre Position verwiesen – das spart selbst in diesem einfa-chen Beispiel schon sie-ben Zeichen.


460

ten benötigt werden. Auch gibt es Dateien, die sich nicht verän-dert haben, wenn eine Besucherin einige Tage später erneut auf einer Website landet. In Fällen wie diesen kommt der Browser-Cache zum Einsatz. Hier landen Inhalte im lokalen System und werden von dort genutzt, statt sie erneut vom Server anzufragen. Moderne Browser cachen Inhalte automatisch, allerdings können Web-Entwickler ein bisschen nachhelfen. Man kann dem Brow-ser nämlich einen Richtwert mitgeben, wie lange die einzelnen Inhalte im lokalen Speicher gültig sein sollen.

Diese Richtwerte werden auf einem Apache-Server in die ».htaccess«-Datei geschrieben. Dateien, die sich selten ändern, werden mit langen Werten versehen (etwa 1 month oder 1 year), andere Dateitypen wie HTML werden nicht gecacht. Das kann so aussehen:

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/gif "access plus 1 year"

ExpiresByType image/png "access plus 1 year"

ExpiresByType image/jpeg "access plus 1 year"

ExpiresByType text/css "access plus 1 year"

ExpiresByType text/javascript "access plus 1 year"

ExpiresByType application/javascript "access plus 1

year"

ExpiresByType application/x-javascript "access plus 1

year"

</IfModule>

Nach Ablauf der angegebenen Zeitdauer würde ein Browser die Datei erneut anfordern. Die Anweisungen funktionieren nur, wenn das Modul Expires aktiviert ist – sprechen Sie im Zweifel mit Ihrem Hosting-Provider. Nachdem Sie diese Angaben in die ».htaccess« Ihres Servers geschrieben haben, können Sie mit Google Page Speed prüfen, ob der Browser-Cache aktiv ist.

Falls Sie nach Aktivierung des Browser-Caches doch noch ein-mal etwas an den Dateien ändern möchten, können Sie eine Ver-sionsnummer an den Dateinamen (Fingerprinting, z. B. »image_v1.png«) oder als Parameter an die URL anhängen (z. B. »image.png?v=1«). Damit weiß der Browser Ihrer Besucher, dass er die neue Version herunterladen soll.

Server-CacheAuch der Server selbst verfügt über einen Cache, in dem er häufig benötig-te Dateien ablegen kann. Dies ist besonders bei dy-namisch erzeugten Web-seiten sinnvoll. Viele Content-Management-Systeme bieten entweder von Haus aus oder mit-tels Erweiterungen (etwa dem »WP Super Cache« für WordPress) die Mög-lichkeit, den Server-Cache zu aktivieren. Zudem gibt es spezielle Caching-Server wie bei-spielsweise Varnish.

Listing 9.6 E Angaben zum Browser-Caching in der ».htaccess«


461

Webseiten so schnell wie möglich rendern

Mit performance-orientiertem Design, Reduzierung der Requests und Optimierung der Dateigröße haben Sie wichtige Schritte für eine gute Performance unternommen. Trotz allem wird jedoch noch immer etwas heruntergeladen. Aber auch während dieser Ladezeit können Sie die User Experience Ihrer Besucher opti-mieren.

Ein Crashkurs über das Rendering von Webseiten | Zunächst lohnt sich ein kurzer Abstecher in die Funktionsweise eines Brow-sers. Wie kommt ein Browser von dem Code, den Sie auf einem Server ablegen, dazu, eine fertige Webseite anzuzeigen?

E Beim Aufruf einer URL empfängt der Browser zunächst ein HTML-Dokument.

E Aus diesem HTML muss er nun etwas konstruieren, das er auf dem Bildschirm anzeigen kann. Dazu muss er den Quelltext interpretieren und in das Document Object Model (DOM) umwandeln. Der Begriff beschreibt, was der Browser aus Ihrem Quellcode herausinterpretiert – er wird beispielsweise bei einem Fehler versuchen, den Quelltext in sinnvoller Weise zu ergänzen. Das DOM enthält den gesamten Inhalt der Seite. Je einfacher Ihr Quelltext strukturiert ist, desto schneller ist der Browser mit dem Interpretieren. Das ist der Grund, warum Sie einfaches Markup mit möglichst wenigen Verschachtelun-gen bevorzugen sollten – es steigert die Performance.

E Noch kann der Browser den Inhalt jedoch nicht auf dem Bild-schirm anzeigen – er weiß ja noch gar nicht, wie er aussehen soll. Daher lädt er das CSS herunter (sofern vorhanden), inter-pretiert es und erstellt ein weiteres Modell: das CSS Object

H Abbildung 9.19 Rendering-Prozess des Browsers

DOM

JavaScript

CSS CSSOM

Render Tree Layout Darstellung

HTML


462

Model (CSSOM). Erst wenn das gesamte CSS verarbeitet wurde, kann der Browser überhaupt daran denken, irgendet-was auf dem Bildschirm anzuzeigen. Daher bezeichnet man CSS auch als render-blocking – die Anzeige von Inhalten wird so lange blockiert, bis das CSS abgearbeitet wurde. Auch hier gilt daher: Je kompakter und einfacher das CSS ist, desto schneller kann der Browser es verstehen. Verschachteln Sie Ihre CSS-Selektoren also nicht stärker als notwendig.

E Content ist da, Gestaltung ist da – reicht das aus, um eine Webseite darzustellen? Noch nicht, denn zuerst muss der Ren-der-Tree erstellt werden. DOM und CSSOM enthalten nämlich noch Inhalte, die gar nicht sichtbar sind – meta-Angaben im HTML oder mit CSS ausgeblendete Inhalte beispielsweise.

E Schließlich erzeugt der Browser das Layout, indem er die Grö-ßenverhältnisse errechnet. Ein article mit width: 50% würde beispielsweise bei einem 320 px-Viewport 160 px groß sein, auf einem 1200 px-Viewport jedoch 600 px.

E Mit diesen Informationen hat der Browser alles, was er zur Anzeige einer Webseite benötigt. Ein Browser durchläuft diese Schritte jedoch mehrmals. So muss er beispielsweise das Lay-out neu aufbauen, wenn ein Nutzer scrollt.

JavaScript verändert diesen Prozess ein wenig: Sie können damit Inhalte erzeugen oder auch die Anzeige von Elementen steuern – JavaScript kann also sowohl das DOM als auch das CSSOM ver-ändern. Nehmen wir einmal an, ein Browser hat ein HTML-Doku-ment gefunden und beginnt damit, das DOM zu konstruieren. Irgendwo entdeckt er ein JavaScript. Was muss er tun?

E Ohne das Skript zu kennen, kann der Browser nicht wissen, ob es das DOM verändern möchte, das er gerade konstruiert. Also muss er mit der Konstruktion des DOMs aufhören, das Skript herunterladen (sofern es in einer externen Datei liegt) und interpretieren, bevor er fortfahren kann.

E JavaScript ist also parser-blocking, weil es die Konstruktion des DOMs verzögert.

E Gleichzeitig kann der Browser das JavaScript nicht ausfüh-ren, bevor er auch das CSSOM aufgebaut hat – es könnte ja genauso gut sein, dass mit dem Skript die Darstellung beein-flusst werden soll.


463

Kritisches CSS auslagern | Aus diesem Rendering-Verhalten erge-ben sich einige Optimierungsmöglichkeiten, beispielsweise die Arbeit mit kritischem CSS. Huch, kritisches CSS? Was ist das? Man versteht darunter alle CSS-Angaben, die für die unmittelbar beim Aufruf einer Seite sichtbaren Inhalte benötigt werden. Ein Blick in das Verhalten eines Browsers beim Aufruf einer Website verdeutlicht das Verfahren:

E Externe Stylesheets blockieren die Anzeige von Inhalten (render-blocking). Der Browser lädt also zunächst die HTML-Dateien und fordert dann die Stylesheets an – er zeigt jedoch noch keine Inhalte, bis er mit dem Herunterladen der Stilan-gaben fertig ist.

E Prinzipiell ist dieses Vorgehen sinnvoll, denn schließlich wüsste der Browser zwar, was er zeigen soll, aber noch nicht, wie. Gerade bei komplexen Stylesheets verlängert sich die Warte-zeit jedoch deutlich, besonders in Mobilfunknetzen.

E Die Idee von »kritischem CSS« ist nun, das CSS in zwei Teile aufzusplitten: alles, was für die direkt sichtbaren Inhalte not-wendig ist, sowie alles andere.

Das klingt an dieser Stelle seltsam – haben wir unsere CSS-Dateien nicht gerade erst zusammengefügt, um weniger Requests zu erzeugen? Ja, genau – und deshalb soll das kritische CSS als style-Block direkt in die HTML-Seiten hineingeschrieben wer-den, während das übrige CSS wie gewohnt über eine externe Datei nachgeladen wird. Die Idee dahinter: Es gibt keinen Grund, warum ein Nutzer auf Style-Angaben warten sollte, wenn er sie sowieso noch nicht sehen kann. Der Browser kann somit schon früher mit dem Rendern des oberen Contents beginnen und dann alles andere nachladen.

Prinzipiell sieht das Vorgehen so aus:

<!doctype html>

<head>

<style> /* kritisches CSS inline */ </style>

<script> loadCSS("pfad/zu/nichtkritischen/styles.css");

</script>

</head>

<body>...</body>

</html>

kritisches CSS

nicht-kritischesCSS

G Abbildung 9.20 Kritisch ist CSS immer dann, wenn es für die Anzeige im aktuellen Viewport notwen-dig ist (www.amazeelabs.com/de) – diese Stile sollten so schnell wie möglich bereit-stehen.

F Listing 9.7 Prinzip des kritischen CSS


464

Manuell ist das sehr aufwendig: Sie müssten sich Ihre Website bei verschiedenen Viewport-Größen anschauen und alle CSS-Angaben identifizieren, die für den sichtbaren Bereich nötig sind. Anschließend kopieren Sie diese aus der CSS-Datei direkt ins HTML. Glücklicherweise hat Jonas Ohlsson mit dem »Critical Path CSS Generator« ein Tool entworfen, das dies übernimmt. Dazu geben Sie zunächst unter 1 die URL der Webseite ein und kopieren anschließend unter 3 das gesamte CSS hinein. Ein Klick auf den Button 2 extrahiert nun die kritischen Stilangaben. Diese kopieren Sie anschließend in den <head> Ihrer Webseite, während das übrige CSS asynchron geladen wird. Dieses Beispiel verwen-det dazu das JavaScript »loadCSS«, das unter https://github.com/filamentgroup/loadCSS ausführlich dokumentiert ist. Anschließend heißt es Testen, Testen, ob das Tool alles richtig erkannt hat.

Natürlich müssten Sie diesen Schritt für jede Seite und bei jeder Änderung wiederholen. In der Praxis arbeiten Entwickler daher meist mit Automatisierungstools wie beispielsweise:

E https://github.com/addyosmani/critical E https://github.com/filamentgroup/criticalCSS E https://github.com/pocketjoso/penthouse

JavaScript asynchron laden | Auch JavaScript blockiert den Brow-ser dabei, das DOM aufzubauen. Um das zu vermeiden, sollten JavaScript-Dateien entweder ganz unten im Quelltext (vor dem schließenden </body>) eingebunden oder asynchron geladen werden:

Tipp: Lieber doppelte Angaben behaltenTheoretisch könnten Sie das kritische CSS aus der externen Datei entfernen, sobald es im <head> der HTML-Datei unterge-bracht ist. Ich rate Ihnen jedoch, eher davon abzu-sehen, denn die Wartbar-keit würde darunter doch arg leiden, und die Er-sparnis in der Dateigröße wäre selten groß.

Abbildung 9.21 E Critical Path CSS Generator (https://jonassebastianohlsson.com/criticalpathcssgenerator)

a

3

2

Tipp für Server-AdministratorenGoogle Page Speed bietet zudem Module an, die auf einem Server instal-liert werden können (https://developers.google.com/speed/pagespeed/module/?csw=1).


465

<script src="analytics.js" async></script>

G Listing 9.8 Asynchrones Laden von JavaScript

Das async-Attribut sorgt dafür, dass JavaScript die Konstruktion des DOMs nicht mehr blockiert – der Browser fährt mit dem Auf-bau des DOMs fort, während er das Skript herunterlädt. async garantiert jedoch nicht, dass das DOM auch fertig aufgebaut ist, wenn das Skript ausgeführt wird – es könnte also sein, dass das Skript etwas verändern möchte, von dem der Browser noch gar nichts weiß. Sollte das Skript also auf das DOM zugreifen wol-len, können Sie es mit dem defer-Attribut versehen (statt async) – der Browser lädt es nun parallel zur Konstruktion des DOMs herunter, führt es jedoch erst aus, nachdem das Dokument auf-gebaut wurde.

Lazy Loading | Schließlich gibt es »Lazy Loading«. Bei diesem Ver-fahren lädt ein Browser Ressourcen nicht direkt beim Aufruf der Seite, sondern erst, wenn sie auch tatsächlich benötigt werden. Das wird bei Bildern häufig eingesetzt, die außerhalb des gerade sichtbaren Bereichs des Viewports angezeigt werden.

Es gibt verschiedene Möglichkeiten der Umsetzung. Eine sehr gute Lösung ist das Skript »lazysizes« von Alexander Far-kas (https://github.com/aFarkas/lazysizes). Dort findet sich eine umfangreiche Dokumentation mit Anwendungsbeispielen. Prin-zipiell sieht das Procedere so aus:

E Laden Sie das Skript herunter, und binden Sie es in die Web-seite ein.

E Anstelle der in Kapitel 8 erläuterten Attribute setzen Sie nun die alternativen Attribute data-src und data-srcset inner-halb des img-Elements ein. Lazysizes kümmert sich automa-tisch um das Laden der entsprechenden Grafiken, sobald sich die Scrollposition den Bildern nähert. Bei responsiven Bildern sieht das beispielsweise so aus:

<img data-sizes="auto" alt="…" data-src="image2.jpg" data-

srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w"

class="lazyload" />

G Listing 9.9 Einbindung von Bildern mit dem data-src-Attribut

Alternativen zur UmsetzungNatürlich gibt es viele weitere Möglichkeiten, Lazy Loading umzuset-zen. Einige bekannte Bei-spiele sind:

E Unveil von Luis Almei-da (https://luis-almeida.github.io/unveil)

E Lazy Load von Mika Tuupola (http://www.appelsiini.net/projects/lazyload)

E ImageLoader aus der YUI-Bibliothek (http://yuilibrary.com/yui/docs/imageloader)

Praktische ChecklistePerformance-Optimie-rung ist ein riesiges Feld. Viele weitere Tipps hat Vitaly Friedman in einer Performance-Checkliste (www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages) zusam-mengetragen.


466

E Deaktiviertes JavaScript kann unterstützt werden, indem das img-Element in einem noscript-Block wiederholt wird:

<noscript>

<img src="image.jpg" alt="…"/>

</noscript>

G Listing 9.10 Fallback bei deaktiviertem JavaScript

Mit dem Performance-Aspekt haben Sie nun das letzte Puzzle-Stück in der Hand, das Sie für ein richtig gutes Webdesign benö-tigen. Im folgenden Kapitel haben Sie die Möglichkeit, alle bisher gelernten Aspekte im Zusammenhang zu erleben – es soll Ihnen helfen, einen Einstieg in Ihre eigene Gestaltung zu finden.

Sonderformate für größere PerformanceSpeziell für Optimierun-gen im mobilen Netz sind in den letzten Monaten einige Sonderformate entstanden, beispielswei-se Googles AMP-Techno-logie. Eine kurze Einfüh-rung mit weiteren Lesetipps finden Sie im Dokument »sonderfor-mate-performance.pdf« im Download-Bereich.

Auf einen Blick

1 Die richtige Ausrüstung ..................................................... 17

2 Grundlagen von gutem Webdesign ................................... 39

3 Konzeption & Design ......................................................... 71

4 Layout und Komposition .................................................... 119

5 Typografie im Web ............................................................. 205

6 Navigationen & Interaktionen ............................................. 271

7 Farbe im Web ..................................................................... 329

8 Grafiken, Bilder und Multimedia ....................................... 375

9 Testen und optimieren ....................................................... 441

10 Beispielprojekt ................................................................... 467

Inhalt

5

Inhalt

Vorwort ................................................................................. 15

1 Die richtige Ausrüstung1.1 WasSiefürdiesenKursbrauchen .............................. 18

Stift und Papier ........................................................... 18Software und Tools zum Visualisieren und Entwickeln ... 18Browser zum Testen .................................................... 19FTP-Software ............................................................... 21Für Fortgeschrittene: Arbeitsschritte automatisieren .... 21

1.2 DenkenSiewieeinWebdesigner! .............................. 21Webdesigner sind kreativ ............................................ 22Webdesigner kennen das Web .................................... 26

1.3 DiewichtigstenTechnologien .................................... 32Inhalte mit HTML ........................................................ 33Gestaltung mit CSS ...................................................... 33Verhalten mit JavaScript .............................................. 35Dynamische Inhalte mit PHP und anderen Sprachen .... 36

1.4 Zusammenfassung ...................................................... 37

2 Grundlagen von gutem Webdesign2.1 UsabilityundUserExperience .................................... 40

Konventionen und Faustregeln für gute Usability ......... 41Usability und Inhalte ................................................... 48Mehr als Usability: User Experience ............................. 49

2.2 Accessibility–ZugänglichkeitundBarrierefreiheit ..... 50Warum Accessibility wichtig ist – immer ...................... 50Hilfsmittel für behinderte Menschen ........................... 51Barrierefreiheit per Gesetz ........................................... 52Initiativen für Barrierefreiheit ....................................... 52Accessibility und Webstandards ................................... 53ARIA Roles .................................................................. 54Accessibility und Inhalte .............................................. 55

2.3 ResponsiveWebdesign .............................................. 56Möglichkeiten für mobile Websites ............................. 56

Inhalt

6

Mobile First und Desktop First .................................... 57Technische Grundlagen von Responsive Webdesign ..... 58Meta-Viewport-Element .............................................. 58Media Queries ............................................................ 59

2.4 DieEntstehungeinerWebsite ................................... 61Das Was: Websites als lebendige Design-Systeme ........ 61Das Wie: neue Workflows für Websites ....................... 67

2.5 GrundlagenfürmodernesWebdesign ........................ 69

3 Konzeption & Design3.1 PhasenvonKonzeptionundKreation ....................... 72

3.2 ZielgruppedefinierenundNutzerkennenlernen ........ 74Nutzer kennenlernen ................................................... 74Personas ...................................................................... 76

3.3 DasKonzeptentwickeln:Analysephase ..................... 77Recherche ................................................................... 77Richtung der Gestaltung festlegen ............................... 78Marktanalyse ............................................................... 78Design-Sprachen und -Stile recherchieren .................... 79Zielformulierung .......................................................... 83

3.4 DerWegzurrichtigenIdee–Kreativitätstechniken ... 85Brainstorming .............................................................. 86Morphologische Matrix ............................................... 87The Four R’s ................................................................ 89Gegensatzpaare ........................................................... 89Kreativität und Druck .................................................. 90

3.5 Content-Strategie ....................................................... 91Inhalte sammeln und bewerten ................................... 91Informationsarchitektur festlegen ................................ 95Struktur von Inhalten festlegen .................................... 97Seitentypen festlegen .................................................. 99Content-Prototypen .................................................... 99

3.6 Ideenausarbeitenundvisualisieren ........................... 100Scribbles: schnelle Skizzen ........................................... 101Papier-Prototypen: Mehr Low-Budget geht nicht ......... 101Moodboards ............................................................... 102Style Tiles .................................................................... 103Element Collages ......................................................... 104

Inhalt

7

3.7 Ideenbewerten .......................................................... 104Wireframes: strukturelle Skizzen .................................. 105Prototypen: Interaktionen testen ................................. 106Pattern Library & Styleguides ....................................... 108Konzeption mit einer Projektmatrix auf den Punkt bringen ............................................................. 112Ideen bewerten ........................................................... 116

3.8 UmsetzungundAusarbeitung .................................... 116Design-Entwürfe oder Mockups .................................. 117HiFi-Prototypen: im Browser entscheiden .................... 118

4 Layout und Komposition4.1 DieGrundlagenmodernerGestaltung ........................ 120

Wahrnehmungsgesetze ............................................... 120Formen ....................................................................... 126

4.2 GestaltungsregelnfürdasWeb .................................. 135Klassische Gestaltungsregeln ....................................... 135Erkenntnisse aus der Nutzerforschung ......................... 141Psychologische Effekte ................................................ 148

4.3 DasBoxModelinCSS ................................................ 151Maßeinheiten in CSS ................................................... 151Breite und Höhe .......................................................... 152Innenabstand .............................................................. 153Rahmen ...................................................................... 154Außenabstand ............................................................. 154Das Box Model steuern ............................................... 155Box Model bei Inline-Elementen ................................. 157Umgang mit zu viel Inhalt ............................................ 157

4.4 LayoutsmitCSS ......................................................... 158Elemente per float links und rechts fließen lassen ...... 158Elemente frei mit »position« anordnen ........................ 163Anzeige mit »display« steuern ..................................... 165

4.5 Raster–InhalteimLayoutanordnen .......................... 166Pro und Kontra von Rastern ........................................ 166Inhalte im Raster verteilen ........................................... 167Aus Rastern ausbrechen .............................................. 169Exkurs: Grundlinienraster ............................................ 169

Inhalt

8

4.6 LayoutimResponsiveWeb ........................................ 170Typen von Layouts ...................................................... 170Der Breakpoint, das (noch) unbekannte Wesen ........... 175Breite ist nicht alles ..................................................... 177Strategien für responsive Darstellungen ....................... 179

4.7 RasterinCSS3 ............................................................ 184Statische Raster in CSS ................................................ 184Einfaches responsives Raster in CSS ............................. 185Frontend-Frameworks und fertige Grids ...................... 187Flexbox ....................................................................... 189Grid Layouts ................................................................ 197

5 Typografie im Web5.1 WasistTypografie? .................................................... 206

Anatomie einer Schrift ................................................. 207

5.2 KategorienvonSchriften ............................................ 208Antiqua-Schriften oder Serifen-Schriften ...................... 208Grotesk oder serifenlose Linear-Antiqua ...................... 210Schreibschriften ........................................................... 212Schriften für Lifestyle und Postmoderne ...................... 212Computerlesbare Schriften .......................................... 214Hybridschriften oder moderne Klassiker ...................... 214

5.3 WebsichereSchriften ................................................. 215

5.4 Webfonts .................................................................... 221Kleine Geschichte der Webfonts .................................. 221Aktuelle Lizenzmodelle für Webfonts .......................... 222Webfonts einbinden .................................................... 226Angriff des FO(U/I)T .................................................... 229

5.5 DierichtigeSchriftauswählen .................................... 232Die Funktionen von Schrift .......................................... 232Auf die richtigen Assoziationen achten ........................ 235Recherche zur gewählten Schrift .................................. 238Schriftfamilien ............................................................. 239Performance ................................................................ 240Visuelle Effekte ............................................................ 240

5.6 TexteinHTMLundCSSgestalten .............................. 241Typografische Auszeichnungen .................................... 241Schriftgröße ................................................................. 242

Inhalt

9

Laufweite .................................................................... 246Zeilenlänge .................................................................. 249Textschatten ................................................................ 250Textspalten .................................................................. 251Textausrichtung ........................................................... 256Zeilenabstand .............................................................. 258Mikro-Weißraum ......................................................... 260

5.7 Detailtypografie ......................................................... 261Sonderzeichen in HTML .............................................. 261Sonderzeichen in deutscher Sprache ............................ 262Sonderzeichen auf der Tastatur .................................... 263Typografische Anführungszeichen ................................ 263Gedankenstrich, Apostroph und Ellipse ....................... 265Silbentrennung und geschützte Leerzeichen ................ 266Gliedern von Zahlen .................................................... 267Fortgeschrittene Detailtypografie ................................. 269

6 Navigationen & Interaktionen6.1 GrundlagennutzerfreundlicherInteraktionen ............ 272

Usability und Interaktionen ........................................ 272Accessibility und Interaktionen .................................... 273

6.2 Links ........................................................................... 278Usability- und Accessibility-Konventionen von Links .... 278

6.3 Buttons ....................................................................... 279Usability und Accessibility gewährleisten ..................... 279Buttons gestalten ........................................................ 283

6.4 Navigationen .............................................................. 284Visuelle Gestaltung und Positionierung von Navigationen ............................................................... 285Interaktionen .............................................................. 293

6.5 ResponsiveNavigationen ........................................... 299Grundregeln responsiver Navigationen ........................ 299Responsive Navigation mit stets sichtbaren Menüs ...... 300Responsive Navigation mit versteckten Menüs ............ 302Lösungsstrategien responsiver Navigationen mit versteckten Menüs ................................................ 306Responsive Navigationen, die sich anpassen ................ 310

Inhalt

10

6.6 Formulare ................................................................... 313Formulare in HTML5 ................................................... 313Formulare, die man gerne ausfüllt ............................... 315

6.7 Animationen ............................................................... 317Bessere User Experience durch Animationen ............... 317Gestaltungstipps für Animationen der Benutzer-oberfläche ................................................................... 319Animationen als inhaltliches Gestaltungsmittel ............ 321Umsetzung in CSS ....................................................... 323Zugängliche Animationen ............................................ 326

7 Farbe im Web7.1 KleineFarblehre ......................................................... 330

Grundbegriffe: Farbton, Helligkeit, Sättigung ............... 330Farbtemperatur ........................................................... 332Primär-, Sekundär- und Tertiärfarben ........................... 333

7.2 Farbkontraste ............................................................. 334Simultankontrast ......................................................... 334Komplementärkontrast ................................................ 334Hell-Dunkel-Kontrast .................................................. 336Grey-Box-Methode ..................................................... 336Bunt-Unbunt-Kontrast ................................................. 337Quantitätskontrast ....................................................... 338Warm-Kalt-Kontrast .................................................... 339

7.3 Farbassoziationen ....................................................... 339Die Farben im Detail ................................................... 341

7.4 Farbharmonien ........................................................... 350Nur eine Farbe ............................................................ 351Mehrere Farben kombinieren ...................................... 351

7.5 FarbenundFarbschematafürWebseiten ................... 356Erste Schritte zu einem Farbschema ............................. 356Der Winkelkontrast – Farben im Farbkreis ................... 358Die Methode der maximalen Kontraste ....................... 359Stile und Vorbilder nutzen ........................................... 362Mit Assoziationen zu einem Farbschema ..................... 364

Inhalt

11

7.6 FarbenamMonitorundimWeb ................................ 364Additive und subtraktive Farbmischung ....................... 364Farben in CSS angeben ................................................ 365Verläufe in CSS3 angeben ............................................ 368Barrierefreiheit und Usability – auch bei der Farbwahl 372

8 Grafiken, Bilder und Multimedia8.1 TippsfürBildwahlundBildgestaltung ....................... 376

Fotografie oder Illustration? ......................................... 376Mit Bildern informieren ............................................... 378Bilder mit Texten kombinieren ..................................... 379Aufmerksamkeit mit Bildern steuern ............................ 381Emotionalität über Bilder herstellen ............................. 381Hero-Images ............................................................... 384Bildwirkung ................................................................. 384Perspektiven ................................................................ 386Fotografische Ästhetik ................................................. 387

8.2 FreieGrafikenundBilderverwenden ......................... 390Bilder als Zitate verwenden ......................................... 390Portale mit freien Bildern ............................................. 390Gemeinfreiheit und Public Domain .............................. 391Creative-Commons-Inhalte verwenden ....................... 391

8.3 GrafikenundBildereinkaufen .................................... 394

8.4 BilderfürdasWeboptimieren ................................... 396Export-Dialoge fürs Web ............................................. 396Das GIF-Format ........................................................... 398Das JPG-Format .......................................................... 399Das PNG-Format ......................................................... 400Bilder optimieren ........................................................ 401Das SVG-Format ......................................................... 402sRGB: den richtigen Farbraum einstellen ..................... 404

8.5 BilderinWebsiteseinbauen ....................................... 404Inhaltliche Bilder per HTML einfügen .......................... 405Schmückende Bilder per CSS einfügen ......................... 407

8.6 EinPixelisteinPixel…Oder? ................................... 409Geräte- und CSS-Pixel ................................................. 409Hochauflösende Retina-Monitore und Pixeldichte ....... 410Pixeldichte bei Bildern ................................................. 411

Inhalt

12

8.7 LösungenfürresponsiveBilderinderPraxis .............. 412Downsampling von inhaltlichen Bildern ....................... 412Bilder flexibel machen ................................................. 413Bilder mit »img« und »srcset« responsiv machen ......... 414

8.8 Iconseinsetzenundgestalten .................................... 419Wichtiges über Symbole .............................................. 420Wichtiges über Metaphern .......................................... 421Icons und Usability ...................................................... 422Stile von Zeichen ......................................................... 423Fertige Icons ............................................................... 425Grundregeln für die Gestaltung von Icons .................... 426Favicons und Touch-Icons ........................................... 427Icon-Fonts ................................................................... 429Icons als SVGs einbinden ............................................ 432

8.9 Grafik-Vermeidungsstrategien .................................... 433Schatten mit CSS3 ....................................................... 433Runde Ecken erzeugen ................................................ 434

8.10 VideoundAudio ........................................................ 436Webdesign mit bewegten Bildern ................................ 436Video und Audio in HTML einbinden .......................... 437Zugänglichkeit von Video- und Audio-Inhalten ............ 439

9 Testen und optimieren9.1 Funktionalitätensicherstellen .................................... 442

Browser-Statistiken abfragen ....................................... 442Testumgebung vorbereiten .......................................... 443Feature-Unterstützung prüfen und reagieren ............... 447

9.2 UsabilityundAccessibilitytesten .............................. 449Accessibility mit Tools testen ....................................... 449Websites ohne CSS und Bilder analysieren ................... 450Analytics ..................................................................... 451Usability überprüfen .................................................... 451HTML und CSS validieren ............................................ 452

9.3 Performance:LadezeitenimGriff ................................ 453Performance als Design-Entscheidung ......................... 453Eine Frage des Protokolls ............................................. 454Speed-Tests nutzen ...................................................... 455Ungenutzten Code entfernen ...................................... 455

Inhalt

13

Requests reduzieren .................................................... 456Dateigröße optimieren ................................................ 459Webseiten so schnell wie möglich rendern .................. 461

10 Beispielprojekt10.1 Konzeption ................................................................. 468

Analyse ....................................................................... 469Schwerpunkte und Ansätze für die Gestaltung ............. 470Zielformulierung .......................................................... 472Ideensuche .................................................................. 472Content-Strategie ........................................................ 474

10.2 Layout ........................................................................ 475

10.3 StimmigeHelligkeitenundMakro-WeißraummitderGrey-Box-Methode ........................................ 479

10.4 Typografie ................................................................... 481Auswahl der Schriften ................................................. 481Webfonts in Content-Prototyp einbinden .................... 482Schriften einbetten und beurteilen .............................. 483Typografie in CSS ......................................................... 484Styleguide ................................................................... 485

10.5 Farben ........................................................................ 486

10.6 Bilder .......................................................................... 488Logo und Header-Gestaltung ....................................... 488

10.7 Interaktionen .............................................................. 494Usability-Verbesserungen in der Hauptnavigation ........ 495Responsives Menü ...................................................... 495Gestaltung von Links ................................................... 497

10.8 Optimieren ................................................................. 499Layout testen .............................................................. 499Styleguide und Projektmatrix prüfen ............................ 502Performance prüfen ..................................................... 503

Index .................................................................................... 505

Index

505

Index

20-Sekunden-Test ................ 78960 Grid System ................ 184@font-face ........................ 221@keyframes ....................... 324@media screen .................... 60@supports ......................... 448

A

Above the fold ................... 144Abstand per CSS ................ 141Accessibility ......................... 50

testen ........................... 449accesskey ........................... 273Accordion-Menü ................ 298Additive Farbmischung ....... 365Adobe Color CC ......... 357, 358all ...................................... 323Alpha-Wert ........................ 366alt-Attribut ......................... 406alternate ............................ 325Android Studio ................... 446Anführungszeichen, typo-

grafische ......................... 263Animation

CSS3 ............................. 324Dauer ............................ 319Timing ........................... 320

animation-delay ................. 325animation-direction ............ 325animation-duration ............ 324animation-fill-mode ........... 325animation-iteration-count 325animation-name ................. 324animation-timing-function 325Antiqua-Schrift ................... 208Anzeige von Elementen ...... 165

Apostroph .......................... 265Apple Touch-Icons ............. 428ARIA .................................. 277Arial ................................... 215

Vorteile ......................... 216ARIA Roles ........................... 54Artikelseite ........................... 47Ästhetik-Usability-Effekt ....... 49Asymmetrie ........................ 135Atomic Design ..................... 62audio ................................. 437Audio einbetten ................. 437Auffächerung ..................... 361Außenabstand .................... 154auto ................................... 438Auto-Completion ................. 19autoplay ............................. 438

B

background-color ............... 365background-image ............. 407background-position .......... 408background-repeat ............. 407background-size ................. 408Back-to-Top-Button ............ 290backwards .......................... 325Banner Blindness ................ 323Barock-Antiqua .................. 209Barrierefreiheit ..................... 50

Farbwahl ....................... 372Initiativen ........................ 52

Baseline Grid ...................... 169Baskerville .......................... 209Bedürfnispyramide ............... 30Bedürfnisse der Nutzer ......... 31

BetonungAbsätze ......................... 242mit CSS ......................... 242

Bild .................................... 376als Zitat ......................... 390Alternativtext ................ 406einkaufen ...................... 394freies ............................. 390für das Web optimieren 396lizenzfreies ..................... 390mit Transparenzen ... 398, 401per CSS einfügen ............ 407per HTML einfügen ........ 405

Bildgestaltung .................... 376Bild-Pixel ............................ 411Bildschirmfarben ................ 333Bildunterschriften ............... 379Bildunterzeile ..................... 406Bildwahl ............................. 376Bildwirkung ........................ 384Bildzitat ............................. 390BITV ..................................... 52Blindtext .............................. 91Block-Element .................... 165Blocksatz ............................ 258border ................................ 154border-color ............... 154, 365border-image ..................... 154border-radius ..................... 434border-type ........................ 154border-width ...................... 154both ................................... 325Box Model ......................... 151box-shadow ....................... 433box-sizing .......................... 156Brainstorming ....................... 86Breadcrumbs ........................ 47Breakpoints .......................... 57

testen ........................... 444Breite festlegen .................. 152

Index

506

Browserältere .............................. 29mehrere Versionen

installieren ................. 443moderne .......................... 29zum Testen ...................... 19

Browser-Cache ................... 460Browser-Marktanteile ......... 443Browser-Statistik ................ 442Brush Scripts ...................... 212Bunt-Unbunt-Kontrast ........ 337Button ............................... 279

Mindestgröße ................ 281oder Link? ..................... 282

C

Can I use ............................ 447Card Layout ....................... 183CC-Lizenz .......................... 391

Inhalte veröffentlichen ... 394Cinemagraphs .................... 398Clarendon .......................... 210clear ................................... 160clearfix ............................... 161Code-Editor ......................... 19Collagen ............................. 388color .......................... 314, 365Color Stop ......................... 370Colorzilla Gradient

Generator ....................... 372Comic Sans ........................ 219Content-Audit ...................... 93Content First ........................ 92Content Inventory ................ 93Content-Management-

System ............................. 36Content Priority Guide ......... 97Corporate Identity .............. 338Courier .............................. 219Courier New ...................... 219Creative Commons ............. 391CSS ...................................... 33

Box Model ..................... 151Formen erzeugen ............ 435Kurzschreibweise ............ 153

CSS ...................................... 33Maßeinheiten ................ 151Shorthand ..................... 153

CSS3-Transitions ................. 323CSS-Filter ........................... 389CSS Object Model .............. 462CSSOM .............................. 462CSS-Pixel ............................ 409CSS-Präprozessoren .............. 34CSS Sprite Generator .......... 456CSS-Sprites ........................ 456

D

Data-URIs .......................... 457date ................................... 314Datenbank ........................... 36Demut ................................. 28Design erklären .................... 24Designing in the Browser ... 117Desktop First ........................ 57Detailaufnahme .................. 385Detailseite ............................ 47Detailtypografie ......... 206, 261Device Labs ........................ 446device-pixel-ratio ............... 410Didot ................................. 209display ............................... 165Document Object Model ... 461Dokumentfluss ................... 160DOM ................................. 461Downsampling ................... 412Dreamweaver ....................... 19Dreieck .............................. 132Drilldown-Menü ................ 308Drittelregel ......................... 139Duotone ............................ 388Dynamische Inhalte .............. 36

E

ease ................................... 324ease-in ............................... 324ease-in-out ........................ 324

ease-out ............................. 324Egyptienne ......................... 210Einstellungsgröße ............... 384Element

anordnen ....................... 163ausblenden .................... 165umfließen ...................... 159

Element Collages ................ 104Ellipse ................................ 265email .................................. 313Emotionalität ............... 31, 381Emulatoren ........................ 445Entwicklertools .................. 444Entwickler-Werkzeug

Google Chrome ................ 20Eurostile ............................. 212Exportieren als ................... 396

F

Face-ism Ratio ................... 381Farbassoziation .................. 339Farbbezeichnung ................ 365Farbe

am Monitor ................... 364Blau ....................... 343, 354Braun ..................... 347, 355bunte ............................ 330Deckkraft steuern ........... 366Gelb ....................... 345, 352gesättigte ...................... 362Gold .............................. 346Grau ...................... 348, 351Grün ...................... 344, 353Helligkeit ....................... 331im Web ......................... 364in CSS angeben .............. 365kalte ...................... 332, 340mit Transparenz ............. 366Orange .......................... 346reine ............................. 330Rosa .............................. 342Rot ........................ 342, 352Sättigung ....................... 331Schwarz ................. 347, 351Silber ............................ 348

Index

507

Farbeunbunte ........................ 330Violett .................... 342, 354warme ................... 332, 340Weiß ...................... 349, 351

Farbenblindheit .................. 374Farben kombinieren ........... 351

drei Farben .................... 360Farbreihen ..................... 362vier Farben .................... 360

Farbfehlsichtigkeiten .......... 374Farbharmonie ..................... 359Farbkontrast ....................... 334Farbkreis .................... 333, 335Farblehre ........................... 330Farbraum ........................... 404Farbreihe ........................... 362Farbschema

analoges ........................ 359Dreier-Harmonie ............ 359komplementäres ............. 358monochromes ................ 358Tools ............................. 357Triade ............................ 358Vierer-Harmonie ............ 360Zweier-Harmonie ........... 359

Farbschema entwickeln ...... 356Farbtemperatur .................. 332Farbton .............................. 330Farbverlauf in CSS3 ............ 368Fat Footer .......................... 290Favicon .............................. 427Feature Queries ................. 448Fett hervorheben ............... 242figcaption ........................... 406figure ................................. 406File Transfer Protocol ............ 21Filter .................................. 387Fitts‘ Gesetz ....................... 281Fixes Layout ....................... 170Flat Buttons ....................... 283Flat Design ........................... 80float ................................... 159Floating Back-to-Top-Button 290Fluides Layout .................... 171Flyout-Menü ...................... 298F-Muster ............................ 142FOIT .................................. 230

font-feature-settings ........... 269Font Squirrel ...................... 225font-weight ........................ 242Footer .................................. 42Footer-Navigation .............. 289Form .................................. 126

abstrakte ....................... 127geometrische ................. 126mischen ......................... 127natürliche ...................... 127offene ........................... 134

Formkontrast ..................... 127Formtypen ......................... 126Formular ............................ 313Formularvalidierung ........... 314Fortsetzung ........................ 124Fotografie .......................... 376

Interpretation ................ 384Fotomontage ..................... 388Fotosensitive Epilepsie ....... 374Four R’s ............................... 89FOUT ................................. 230Frontend-Frameworks ........ 107FTP-Software ........................ 21Funktionalität ....................... 31Für Web speichern ............. 397Futura ................................ 211

G

Garamond .......................... 209Gedankenstrich .................. 265Gegensatzpaar ..................... 89Gemeinfreiheit ................... 391Georgia .............................. 218Geräte-Pixel ....................... 409Gesetz der Ähnlichkeit ....... 122Gesetz der Erfahrung .......... 123Gesetz der Geschlossenheit 123Gesetz der guten Gestalt .... 124Gesetz der Nähe ................ 121

Typografie ...................... 261Gesetz der Prägnanz ........... 124Gesetz von Figur und

Grund ............................ 120Gestaltpsychologie ............. 120

Gestaltungsgrundlagen ....... 120Gestaltungsideen entwickeln 22Gestaltungsraster ............... 166Gestaltung überprüfen ......... 31Ghost Buttons .................... 284GIF .................................... 398Gill ..................................... 210GNU .................................. 391Goldener Schnitt ................ 137Google Analytics ................ 451Google Chrome .................... 19Google Fonts ..................... 223

Schrift einbinden ............ 226Google Page Speed ............ 455Graceful degradation ............ 29Grauwert ........................... 260Grey-Box-Methode ............ 336Grid Layouts ...................... 197Grotesk-Schrift ................... 210Grundfarbe ........................ 333Grundlinie .......................... 207Grundlinienraster ............... 169gzip .................................... 459

H

Hamburger-Icon ................. 303Haptik .................................. 80Hauptbereich ....................... 42Header ................................. 42

Konventionen .................. 42height ................................ 152Hell-Dunkel-Kontrast ......... 336Helligkeit ........................... 331

überprüfen .................... 336Helvetica ............................ 211Hero-Images ...................... 384Hexadezimalwerte .............. 367Hicks Gesetz ...................... 282Hierarchie ............................ 45Hintergrundbild

ausrichten ..................... 408einfügen ........................ 407Größe bestimmen ........... 408wiederholen ................... 407

Hochauflösende Bild schirme 410

Index

508

HTML .................................. 33HTML5-Formulare ............. 313HTML-Entities .................... 262HTML validieren ................. 452

I

IcoMoon ............................ 430Icon

Anwendungsbereiche ...... 419als visuelle Auflockerung 420als visuelle Unterstützung 420

Icon-Fonts ......................... 429Icon-Gestaltung

Grundregeln ................... 426Idee

bewerten ................ 104, 116entwickeln .................. 22, 73

Illustration ......................... 376img .................................... 405img srcet ............................ 414infinite ............................... 325Infinite Scrolling ................. 146Informationsarchitektur ........ 95information scent ................. 46Inhalt anordnen ................. 166Inhaltsinventar ..................... 93Inline-Element ................... 165Innenabstand ..................... 153Innovationsmotor ................ 22Inside-Out-Crop ................. 386Interaktion

Barrierefreiheit ............... 273Usability ........................ 272

Interaktive Style Tiles .......... 104Interface-Inventar .............. 111Intuitive Bedienung ............ 272

J

JavaScript ............................. 35JavaScript-Bibliotheken ........ 36JPG .................................... 399jQuery ................................. 36

K

Kanten ............................... 131Kategorienseite .................... 47Kerning .............................. 247Klassizistische Antiqua ........ 209Klickdummys ..................... 106Komplementärfarbe ........... 333Komplementärkontrast ....... 334Kontrast ............................. 334Konvention .......................... 41Konzeption .......................... 72

Phasen ............................ 72Kreativität ............................ 22

und Druck ....................... 90Kreativitätstechnik ................ 85Kreis .................................. 133Küppers, Harald ................. 335Kurve ................................. 133

L

Landingpage ........................ 47lang-Attribut ........................ 55Laufweite ........................... 246Layout

fixes .............................. 170fluides ........................... 171Inhalte anordnen ............ 166Raster ........................... 166

Lazy Loading ...................... 465Leerzeichen, geschütztes .... 266Lesbarkeit .......................... 206Leserlichkeit ....................... 206

testen ........................... 216letter-spacing ..................... 247Liedl, Roman ...................... 359Ligaturen ............................ 269linear ................................. 324Linearisierbarkeit .................. 53Linie ........................... 124, 128

Stärke ........................... 130Link

Konventionen ................ 278sensitiver Bereich ........... 282

Living Styleguide ................ 111

Lizenzbasierte Modelle ....... 395loop ................................... 438Lucida Grande .................... 218Lucida Sans Unicode .......... 218

M

Makrotypografie ................. 206Makro-Weißraum ............... 140margin ............................... 154Markdown ........................... 95Marktanalyse ........................ 78Maßeinheit

absolute ........................ 151relative .......................... 151

Material Buttons ................ 284Material Design .................... 81max ................................... 314max-width ......................... 152m-dash .............................. 265Media Queries ..................... 59Mediävalziffern .................. 269Mega-Footer ...................... 290Meta .................................. 214metadata ............................ 438Metapher ........................... 421Mikro-Weißraum ........ 140, 260min .................................... 314Mindmap ............................. 86Minuskel ............................ 207Minuskelziffern .................. 269min-width .......................... 152Miro Video Converter ........ 439Mittellänge ........................ 207Mobile First ......................... 57Mobile Website ................... 56Mockups ............................ 117Modernizr .......................... 447Moodboard ........................ 102MooTools ............................. 36Morphologische Matrix ........ 87

Index

509

N

Nachbild ............................ 335Navigation ........................... 43

Fokus ............................ 273Hierarchie ........................ 45Tastaturbedienung .......... 273

Navigationsebene ................. 46Navigationsleiste ................ 294n-dash ............................... 265none .......................... 325, 438normal ............................... 325number .............................. 314Nur Webfarben anzeigen ... 366Nutzerforschung .................. 74Nutzungsrechte .................. 391

O

Oberlänge .......................... 207OCR-B ............................... 214Open Device Lab ............... 446OpenType .......................... 221Optimieren ................ 441, 442overflow ............................ 157

P

padding ............................. 153Page impression ................. 224Paginierung ........................ 147Paletton ............................. 357Parallax Scrolling ................ 145Pastellfarben ...................... 363Pattern Library ................... 108Performance-Budget .......... 453Persona ................................ 76Perspektive ........................ 386Pfade in HTML ................... 405Phi-Raster .......................... 139PHP ..................................... 36picture ............................... 418Picture Superiority Effect .... 378Piktogramm ....................... 423

Pink ................................... 342Pixel

CSS-Pixel ....................... 409Geräte-Pixel ................... 409

Pixeldichte ......................... 410PNG ................................... 400PNG-8 ............................... 400PNG-24 ............................. 401Porträtaufnahme ................ 382Position fixieren ................. 163poster ................................ 439preload .............................. 438Primärfarbe ........................ 333Progressive enhancement ..... 29Projektmatrix ..................... 112Prokrastination ..................... 90Prototypen ......................... 106Public Domain ................... 391Punze ................................. 207

Q

Quadrat ............................. 131Qualitätskontrast ................ 337Qualitätssicherung ............. 442Quantitätskontrast ............. 338

R

Rahmen ............................. 154range ................................. 314Raster ................................ 166

Inhalte verteilen ............. 167Vor- und Nachteile ......... 166

Rastergeneratoren .............. 188Rastergrafiken .................... 402Raute ................................. 130Realismus ............................. 80Recherche ............................ 77Rechteck ............................ 130Reiternavigation ................. 294Remote-Usability-Tests ....... 452Renaissance-Antiqua .......... 208Render-Tree ........................ 462

Responsive Bilder ............... 412Responsive Webdesign ... 56, 57RGBa-System ..................... 366Richtung ............................ 148Rockwell ............................ 210Rot-Grün-Sehschwäche ...... 374Rotis .................................. 215Royality-free ....................... 395Runde Ecken mit CSS3 ....... 434

S

Salienz ............................... 142Sättigung ............................ 331Schatten

mit CSS3 ....................... 433Schrift ........................... 250

Schreibschriften ................. 212Schrift

Anatomie ...................... 207auswählen ..................... 232Effekte .......................... 240freie .............................. 223in Webfont konvertieren 227kostenlose ..................... 223Lizenzmodelle ................ 222Schatten ........................ 250websichere .................... 215

Schriften mischen ....... 235, 236Schriftgröße ....................... 242

CSS ............................... 244Schriftwahl, Assoziationen 235Schwarz-Weiß-Aufnahmen 387Screenreader ........................ 51Scribbles ............................ 101Scrollytelling ...................... 145search ................................ 313Seitentyp ............................. 99Sekundärfarbe .................... 333Selbstverwirklichung ............ 32Sepia .................................. 388Serife ................................. 207Serifenlose Linear-Antiqua 210Serifen-Schrift .................... 208Shorthand .......................... 153Silbentrennung ........... 258, 266

Index

510

Simulatoren ....................... 445Sketches ............................. 101Skeuomorphismus ................ 80Skip-Links .......................... 277Skripte und CSS minimieren 458Skripte und CSS zusam-

menfassen ...................... 458Sonderzeichen ................... 261source ................................ 437sRGB .................................. 404Startseite .............................. 47Statischer Styleguide .......... 110step ................................... 314Stile von Icons .................... 423Stockfoto ................... 381, 394Struktur schaffen ................ 166Styleguide .......................... 108Style Tiles ........................... 103Subnavigation .............. 42, 287Subtraktive Farbmischung 364Suchdominante Nutzer ........ 43Suchfunktion ........................ 43Suchmaschine für CC-

Inhalte ............................ 393SVG ................................... 402

einbinden ...................... 432Symbol .............................. 420Symmetrie ......................... 135Syntax-Highlighting .............. 19

T

Tabelle ............................... 129tabindex ............................. 274Tabs ................................... 294Talking Head Videos ........... 436tel ...................................... 313Tertiärfarbe ........................ 334Testen ........................ 441, 442

Accessibility ................... 449Breakpoints ................... 444Browser .................... 19, 442Usability ........................ 449welche Browser? ............ 442

Testumgebung vorbereiten 443Textausrichtung .................. 256

text-shadow ....................... 250Thesis ................................. 215Times ................................. 209Times New Roman ............. 216Touch-Icon ......................... 428transition-delay .................. 324transition-duration ............. 324transition-property ............. 323transition-timing-function .. 324Transparenz ........................ 398Transparenzen .................... 401Trapez ................................ 130Trebuchet MS ..................... 217Trübe Farben ...................... 331Typekit ............................... 224Typetester .......................... 216Typografie .......................... 206Typografische Auszeichnung 241Typografische Farbe ............ 260

U

Überraschung ..................... 148Überschrift, Abstand davor 261Umbruch verhindern .......... 267Umlaute ............................. 261Unicode-Codierung ............ 262Unterlänge ......................... 207Urheberrecht ..................... 390

Ende ............................. 391url ...................................... 314Usability ......................... 31, 40

testen ........................... 449Usability-Tests .................... 451User Experience ................... 49User Experience First ............ 93User-Interview ..................... 75Users First ............................ 93UTF-8 ................................ 261UX User Experience ......... 49

V

Validator ............................ 452Verdana ............................. 217Verlauf in CSS3 .................. 368Versalhöhe ......................... 207Versalie .............................. 207Versalziffern ....................... 269video ................................. 438Video einbetten ................. 437Viewport .............................. 60Viewport Resizer ................ 444Virtuelle Maschinen ........... 443Visual Studio ...................... 446Visuelle Effekte .................. 376

W

W3C .................................. 365Wahrnehmungsgesetze ...... 120WAI-ARIA ............................ 53Warm-Kalt-Kontrast ........... 339Warum-Fragen ..................... 24WAVE ................................ 449WCAG ................................. 53Web Brutalism ..................... 82Web Developer, Google

Chrome .......................... 450Webfont ............................ 221

einbinden ...................... 226Google .......................... 223konvertieren .................. 227Lizenzmodelle ................ 222

Webfont Generator ............ 227Web Open Font Format ..... 222Web Page Test .................... 455Website-Konzeption ............ 72Webstandards ...................... 32Weißraum .......................... 139Weite Einstellungsgrößen ... 385width ................................. 152Winkelkontrast aufsplitten ... 359Wireframe ............................ 99Wireframes ........................ 105WOFF ................................ 222WYSIWYG-Tool .................... 19

Index

511

X

Xcode ................................ 445x-Höhe ............................... 207x-icon editor ...................... 427

Y

YSlow ................................ 455

Z

Zeilenabstand ..................... 258Zeilenlänge ........................ 249Zielformulierung ................... 83Zielgruppe ............................ 74Zuverlässigkeit ...................... 31

Wir hoffen sehr, dass Ihnen diese Leseprobe gefallen hat. Gerne dür-fen Sie diese Leseprobe empfehlen und weitergeben, allerdings nur vollständig mit allen Seiten. Die vorliegende Leseprobe ist in all ihren Teilen urheberrechtlich geschützt. Alle Nutzungs- und Verwertungs-rechte liegen beim Autor und beim Verlag.

Teilen Sie Ihre Leseerfahrung mit uns!

Björn Rohles ist Webdesigner, Usability-Experte und Medienwissenschaftler. Als Projektmanager in einer Onlineagentur betreut er kleine und mittelständische Kunden bei Fragen rund um die Themen Webdesign, Usability und Suchmaschinenoptimierung. Als freier Autor schreibt er für netzpiloten.de und das t3n- Magazin.

Björn Rohles

Grundkurs gutes WebdesignAlles, was Sie über Gestaltung im Web wissen müssen

511 Seiten, broschiert, 2. Auflage, August 2017 29,90 Euro, ISBN 978-3-8362-4404-6

www.rheinwerk-verlag.de/4272

Know-how für Kreative.

https://www.facebook.com/Rheinwerkverlag

http://twitter.com/rheinwerkverlag

https://www.rheinwerk-verlag.de/grundkurs-gutes-webdesign_4272/?utm_source=leseprobe&utm_medium=pdf&utm_campaign=leseprobe.rd.roi.product.4272&utm_content=roi&utm_term=4272

Documents

noho r retie - Store & Retrieve Data Anywhere · Leseprobe Neben all solchen Themen wie Struktur, Layout, Typografie oder Farbe ist auch die Qualitätssicherung ein wichtiger Aspekt