Vitaly Friedman

MOBILES WEB

JQUER~
n

- , n X pOOCAST
Mv M
WOAOPRESS

MICROFORMRTE

W
I
K
I
S
T~POGRRFIE
-BROWSER-HRCKS

SS

CSS- LR ~OUTS

WEBDESIGN
BARRIEREFREIHEIT
USABILITII

B LO GS

3RURSCRIPT - TECHNIKEN

Vitaly Friedman

Praxisbuch Web 2.0
Moderne Webseiten programmieren und gestalten

.. "" ..

Galileo Press

~

Liebe leserin, lieber leser,
ein Jah r ist seit der erfolgreichen ersten Auflage dieses Buchs vergangen. Web 2.0 mehr ist als ein nur ein momentaner Trend.
Mittlerweile sind viele der technischen und gestalterischen Kon zepte fester Bestandteil eines jeden Webdesigners und Grafikers.
Doch auch das Web 2.0 entwickelt sich weiter. Neue Technolügien kommen hinzu, fr ische Designs lösen alte ab. Wer könnte
hier besser den Überblick bewahren als unser Autor Vitaly Friedman, der mit seinem Onli ne-Portal Smashing Magazine alle
Trends genau beobacht et.
Er zeigt Ihnen alles uber die praktische Umsetzung aktueller
Webtechniken und Designkonzepte für Ihre eigene Web 2.0Seite. Sie beginnen mit der Seitenstrukturierung, der Farb- und
Textgestaltung. Dabei lernen Sie anhand zahlreicher Beispiele
und Praxisanlei t ungen, wie Sie die ch arakteristische Farbpalette
sowie die typografischen Besonderheiten des Web 2.0 bei der
Entwicklung Ihrer Seite einsetzen.
Die Techniken zur Entwicklung von CSS-basierten Navigat ionsmenus, attrakt iven Tabellen, listen und Formularen werden
in anschaulichen Schri tt-für-Schri tt-Anleitungen dargestellt. Im
Web 2.0 sind tabellen basierte layouts wegen ihrer Nachteile fast
von der Bildfläche verschwunden. Auch hier zeigt Ihnen unser
Autor Vitaly Friedman wieder Schritt für Schritt, wie Sie stattdessen mit CSS anspruchsvolle layouts realisieren und dabei sämtlichen Browserbugs geschickt aus dem Weg gehe n.
Doch Web 2.0-Seiten zeichnen sich nicht nur durch ein beson deres Design aus - Techniken wie Ajax, Microformats und der
Einsatz von Web-APls in Form von Mash ups sind ebenso charakteri stisch. Vi taly Friedman zeigt Ihnen, wie Sie Design und Programmierung miteinander verbinden können.
Die Buch- DVD enthält neben den vo llständigen Code -Beispielen ausgewählte lektionen aus unseren Video-Trainings zu
.. Adobe Photoshop« und .. Einstieg in CSS• .
Ihre Meinung ist uns w ichtig. Kritik oder Zuspruch hilft uns be i
der Arbeit an weiteren Auflagen. Ich freue mich deshalb, wenn
Sie sich mit Ihren kritischen Anmerkungen an mich wenden.

Ihr Stephan Mattescheck
lektorat Galileo Computing
steph an. m attesche ck@galileo-press.de
wWoN.galileocomput ing.de
Galileo Press · Rheinwerkallee 4 • 53227 80nn

Teil I Web 2.0· Trends

1

Das Web im neuen Gewan d ............................ .

33

2

Designkuttur Web 2.0 .. ................................... .

83

Teil 11 Web 2.0- Seitengestaltung
3

Textgestaltung ................................................. . 147

4

Farbgestalt ung Web 2.0 .. .

235

5

Navigation ............................ .

295

6

Listen und Tabellen ............. .......... .

379

7

Formulare ......................................................... 415

8

Barrierefreiheit und Usability ............................. 467

9

Web 2.0- layouts mit (55 umsetzen .................. 519

10

Browserkompatibilität ....................................... 635

Teil 111 Web 2.0-Programmierung
11

Ajax ................................................................ . 667

12

Mikroformate.

727

13

Mashups ....

739

Teil IV Web 2.0.Publishing

14

Podcasts, Vidcasts und Screencasts ...

759

15

Wikis ...................... .............................. .

771

16

Weblogs ...................... .

785

17

Ausblick ..................................... .

817

Auf einen Blick

I

3

Geleitwo rt des Fachgutacht ers .................. .

19

Vorwort ............................................................................

21

Einl eitu ng .........................................................................

25

Teil 1 W eb 2.0-Trend s
1

Das Web im neuen Gewa nd ... ...............................

33

1.1

Web 2.0 - wie neu ist das neue Web? .......
1.1.1
Erneuerung statt Neuerfindung ....... .
1.1.2
Das neue Web: alte Te chnologien
im Einsa tz...................................................
1.1.3
Ein neuer Begriff für die Veränderungen
im Web
........... .
1.1.4
Was ist Web 2.0 - und was ist es ni cht? ......
Hat der Begriff»Web 2.Otc noch Substanz?..
1.1.5
Neue Möglichkeiten und neue Konzepte .................
1.2.1
Rich Internet Applicat ions
1.2.2
Desktop-RIAs.............
1.2.3 Weisheit der Massen und Architektur
der Partizipation .........................................
1.2.4 Open-Source-Bewegung und offene
Technologien
................
1.2.5 The Perpetual Beta..................
1.2.6
Einfachheit und Minimalismus ....................
1.2.7 Webkultur 2.0............. ..............................
1.2.8 The l ong Tail ......... .
1.2.9 Attention Economy ....
1.2.10 Crowdsourcing ...........................................
1.2.11 Qualitätsverlust und Datentransparenz........
1.2.12 Bedarf nach Weiterentwicklung.... .
1.2.13 Zusam menfassung......
........ ....
Die Nutzer des Web 2.0 .......... ............. .................
1.3.1
Soziale Netzwerke im Trend ......... ..............
1.3.2
Die Blogosphäre weitet sich aus..................
1.3.3
Desktop-Anwendungen online..........
1.3.4
Nutzer bestimmen selbst
Web 2.0 in Deutschland ..........................................
1.4.1
Blogs ... ........................ ............ ...................
1.4.2
Soziale Netzwerke ...... .............. .............
1.4.3
Social Bookmarking
1.4.4
News-Com munity ...... .

33
34

1.2

1.3

1.4

4

Inhalt

34
36
37
38
39
40
40
43
46
48
49
50
61
62
63
64
66
67
68
68
70
72
72
74
76
77
78
78

1.5

1.4.5 Multimedia-Portale.....................................
1.4.6 Kollektive Intelligenz ...................................
1.4.7
Dinge übers Netz tauschen .........................
Ressourcen........................................................
1.5.1
Dnline-Artikel .............................................
1.5.2 Dnline-Ressourcen......................................
1.5.3
literatur........... ........................ ............. ......

79
BO
BO
80
81
81
81

2

Design kultur Web 2.0 .................

83

2.1

Seitenstrukturen .............................................
2.1.1
Zwei- und Dreispalter .................................
2.1.2
Zentrale Positionierung der Inhalte..............
2.1.3
Kreativität und Kompaktheit: Trend zu

84
B4
89

Mehrspa ltigkeit ............ ................... ... ... .. ....
Rast erbasierte Layouts ................................
2.1.4
Out-of-the-bo)(-Layouts ..............................
2.1.5
Grafische Ansätze ................. ..................... .............
2.2.1
Farbschemata ............. ............... ............
2.2.2 Trend s und grafische Ansätze ......................
2.2.3
Hand schriftliche Elemente und
Schreibschriften ..........................................
2.2.4 Geklebt, geta ckert, geheftet und gepinnt ....
2.2.5 Graffiti, Flecken und Grunge .......................
2.2.6 Organische Texturen und fotografische
Hintergrundbilder .......................................
2.2.7 Collagen und Scrapbooks............. ...........
2.2.8 Illustrationen und Ornamen te .....................
2.2.9 Retro und Vintage .......................................
2.2.10 Icons ..........................................................
Webtypogralie ........................................................
2.3.1
Typografie laut und bunt.. ...........................
2.3.2 Überproportionalgroße Überschriften .........
2.3.3 Flattersatz oder 8locksatz? ..........................
2.3.4 Serifen oder keine Serifen? ............... ..
Seitenelemente ................ .........................
2.4.1
Registerkarten ............. .......... ......................
2.4.2 Sprechende 81ocknavigation .......................
2.4.3 RSS-Icons und Sodall cons.. ........................
2.4.4 Status-Elemente und Content leans ............
2.4.5 Such- und Eingabefelder .............................
2.4.6 Tag Clouds ..................................................
2.4.7 Zebra-Tabellen ............................................
2.4.B Media-Blöcke: Videos im Einsatz .................
2.4.9 Fotogalerien und KarusselL ......................

89
92
96
99
100
102

2.2

2.3

2.4

103
105
106
108
109
109
114
115
116
117
118
119

120
121
121
123
124
125
127
128
129
130
131

Inhalt

I

5

2.5

2.6

Neue Konzept e ......................................................
2.5.1
Plakat ives und sauberes Design ...................
2.5.2
Effektives Design ...... .. ...............................
2.5.3 Wen ige Farben wirkungsvoll eingesetzt.. .....
2.5.4 Weißraum (Whitespace)..........
2.5.5 Einfachheit und M inimalismus ....................
Zusammenfassung ...................................................

134
135
136
138
139
141
142

Teil JJ Web 2.0-Seitengestaltung
3

Textgestaltung ....................................................... 147

3.1

Was ist Webtypografie? .
.. ............ ..
3.1.1
Screen und Print - absolute Flexibilität
und absolute Kont rolle ...............................
3.1.2
Besonderheiten der Webtypografie .............
3.1.3
Warum ist Webtypografi e wichtig?...
3.1.4
Webtypografie in der Praxis....
Grundlagen der Webtypografie.......................
3.2.1
Typografische Begriffe im Über blick .............
.. ..........
3.2.2
Hervorhebungvon Texten..
3.2.3
Absätze und Gestaltung .............................
3.2.4 Schriftgröße ............... ............
3.2.5 Schriftart .....................................................
3.2.6
Link-Gestaltung ..........................................
3.2.7
Typografi sche Hierarchie ...........
3.2.8
De tails machen die Typografie aus....
3.2.9 Typografische Konsistenz .............................
3.2.10 Webtypografie und Barrierefreiheit .............
.............
Neue Tech niken der Webtypografie
3.3.1
Simple Im<l8e Replacemen t .............
3.3.2 Moderne Ansätze.................. ............
3.3.3
Dyna mic Image Replacement ......................
3.3 .4 @font-face-Regel ......................................
Schrift art auswählen ................................... ..
3.4.1
Georgia......................
3. 4.2 AriaL ..........................................................
3.4.3
Lucida Sans Unicode ...................................
3.4.4 Tahoma ........................................
3.4 .5 Trebuc het MS ............
3. 4.6 Times New Roman ....................................
3.4.7 Verdana ....................... ...............................
überschriften und Fließtexte .......................
3.4 .8
Praxisbeispiel
.......... ..
3.5.1
Fließtext ................... .

3.2

3.3

3.4

3.5

6

I

In halt

14 7
149
149
150
152
153
153
154
157
165
185
188
191
191
193
193
195
196
196
197
209
210
211
211
211
211
212
212
212
213
21 4
21 4

3.6

3.7

3.8
3.9

3.5.2 Überschrift ................................................. .
Unkonventionelle Schriftarten ................................ .
3.6.1
Kriterien zur Auswahl einer Schriftart.. ....... .
3.6.2 Welchen Zweck soll die Schrift erfüllen? .... .
3.6.3
Ist die Schriftfamilie vollständig? ................ .
3.6.4 Wie viel Platz benötigt die Schrift? ............. .
3.6.5 Details sind schön, aber nicht im mer
praktisch ................................................... .
3.6.6 Soll die Schrift dominieren oder soll sie
subtil sein? ................................................ .
3.6.7 Wie sehen Buchstaben in der
Großaufnahme aus? .................................. .
3.6.8 Open Type. True Type oder PostScript? ...... .
3.6.9 Fant-Verwaltung ....................................... .
Ein Blick über den Tellerrand .................................. .
3.7.1
Seri fen : Cambria, Constantia ...................... .
3.7.2
Sans-Serifen: Calibri, Candara. Corbel,
Segoe UI .......................................... .
3.7.3
Monospaced: Consolas .............................. .
Zusam menfassung .................................................. .
Ressourcen...........................
........................ .
3.9.1
Quellen und weiterluhrende Beiträge ......... .
3.9.2 Typografie .................................................. .
3.9.3
Fon ts ......................................................... .
3.9.4 Dynamic Text Replacement ........................ .
3.9.5 Werkzeuge und Dienste ............................. .
3.9.6 literatur .................................................... ..

225
225
226
226
226
227
228
228
229
229
231
231
231
232
232
232
233

4

Farbgestaltung We b 2.0 ...................................... .. 235

4.1

Grundlagen der Farben- und Harmonielehre ..... .
4.1.1
Farbmischung und FarbmodeHe ...... ........... .
4.1 .2
Farbwirkung .............. ..... ......................... ..
4.1.3
Farbtemperatur .......................................... .
4.1 .4
Farbkreis ....................... .
4.1.5
Farbkombinationen .................. _................ .
4.1.6
Kontraste ................................................... .
4.1.7
Kontext der Farben .................................... .
Farbtheorie in der Praxis ......................................... .
RGB und CMYK in der PraxiL ............................... .
Farbpalette im Web 2.0 ......................................... ..
4.4 .1
Neutrale, passive Farben ............................ .
4.4.2
Bunte, aktive Farben .................................. .
4.4.3
Dunkle, schmutzige Farben ........................ .
4.4.4 Weiß auf Schwarz oder Schwarz auf Weiß .. .

4.2
4.3
4.4

I

219
222
224
224
225
225

237
238
239
240
240
241
243
247
248
250
251
253
254
257
258

Inhalt

I

7

4.5

4.6
4.7
4.8

4.9

4.10
4.11

8

Inhalt

Werkzeuge fOr die Farbauswahl ...............................
4.5.1
Grundfarben auswählen ..............................
.. ............ ...................
4.5.2
Farben mischen
4.5.3
Farbpaletten wählen ... .....................
4.5.4
Farbpa letten erzeugen. ...........
4.5.5 Farben umwandeln .....................................
4.5.6
Kon t rast prüfen ............ ............. ..................
4.5.7 Zugänglichkeit prüfen.
.... ........
4.5.8
Farbpalette bewerten lassen....
4.5.9 Kostenpflichtige Wer kzeuge ........................
4.5.10 Weitere Ressourcen ....................................
Ton de r Komposit ion
Bestimmung von Harmonien ...
Helles Design - Praxisbeispiel .
4.8.1
Header ..................................................... .
4.8.2 Seitennavigat ion .......... ............. ..................
4.8.3
Banner ................................... .
4.8.4
Harmonische Farbkombina tionen.....
4.8.5 Sidebar .......................................................
4.8.6
Footer ........................................................
4.8.7
Übergänge zwischen Farben ................... .
4.8.8 Auszeichnung von Texten ............................
4.8.9 Auszeichnung von Verweisen .......... .
4.8.10 Navigat ionsmenüs ..................................... .
4.8.11 Logo ........................................ .
4.8.12 Ergebnis ...
Dunkles Des ign - Praxisbeispiel...........
4.9.1
Rahmen, Umgebung, Hintergrund ...............
4.9.2
Sidebar .......................................................
4.9.3
Übergänge zwischen Farben
4.9.4 Auszeichnung von Tex ten........
4.9.5 Auszeichnung von Verweisen..
4.9.6
Navigat ionsmenü ........................................
Footer .... .
4.9.7
4.9.8 Ergebnis .. .
Zusammenfassung ................. .
Ressourcen ............................................................. .
4.11.1 Online-Artikel ................................... .
4.11.2 Lit erat ur

260
260
260
261
262
263
263
263
264
264
264

264
267
268
268
269
270
272
274
274
275
275
276
279
281
281
282
283
284
285
285
287
289
290
290
291

293
293

294

5

Navigation ...................................... .

295

5.1

Navigationselemente entwerfen ............................ .
5.1.1
Aufgaben der Seitennavigat ion
5.1.2
Platz ierung von Navigationsleisten
5.1.3
Navigationsleisten gestalten ....

295

296
297
302

5.2

5.3

5.4

5.5

5.6
5.7
5.8

Richtlinien tur die Gestaltung ...on
Na... igationselementen ............................... .
(55-basierte Ansätze ............................................. ..
5.2.1
Die (X)HTMl-Grundstruktur ...................... .
5.2.2 Simple Na ...igation mit (55 ......................... .
5.2.3
Na... igation zweiter Ebene mit (55 ............. .
Register ansprechend gestalten ............................... .
5.3.1
Abgerundete Ecken .................................... .
5.3.2 51iding Doors ........................................... ..
5.3.3 (55 Sprites ................................................ .
C55 und Ja ...a5cript-Ansätze ................................... ..
5.4.1 Regist erkarten .......... ................................ ..
5. 4.2 (55 Sprites mit Ja... a5cript .......................... .
5.4 .3
KlappmenOs und Flyouts ........................... ..
5.4.4 5uckerlish Dropdowns .............................. ..
5.4.5 Hybrid (55Dropdowns ............................. .
5. 4.6 Toggle-Menüs
..................................... ..
5.4 .7
Karussells .................................................. .
5.4.8 Alle (55-basierten Techniken im Überbli ck. ..
Adobe Ph otoshop-Techniken .................................. .
5.5.1
Abgerundete Registerkarten für die
Textna... igation .......................................... ..
5.5.2 Tiefeneffekt für Na... igationsleisten ............. .
5.5.3
Registerkarten ............................................ .
5.5.4 Bildbasiertes Na ...igationsmenü ................... .
Tag (Iouds ............................... .............................. .
Fa ...icons ................................................................ ..
5.7.1
Fa ...icons erstellen ...................................... .
Ressourcen ............................................................ ..
5.8. 1 Online-Artikel......
................... ..
5.8.2 Tools.............
.. .............. .
5.8.3 Tag (Ioud-Plug-ins.
......................... ..
5.8.4 literatur .................................................... ..

I

5.1.4

303
305
305
307
313
319
319
319
331
337
337
340
341
343
346
347
348
350
353
353
356
359
367
369
373
374
376
376
377
378
378

6

listen und Tabellen ........... .

379

6.1
6.2

Tabell en und listen im Web 2.0 ............ .................
listen . ............. ................................................. ......
6.2.1 XHTMl-Ma rkup für listen ...........................
6.2.2 Gestaltung ...on Usten mithilfe ... on C55 .......
listen im Web 2.0-Look..............................
6.2.3
listen im Einsatz ......................................................
Tabell en ..................................................................
6.4.1
XHTML-Markup für Tabellen .......................
6.4.2 table, tr, th. td, ca ption - Tabellen,
Zeilen , Zellen, Übersch riften .......................

379
380
380
382
384
393
394
394

6.3
6.4

395
Inhalt

I

9

6.4.3

6.5

Summa!)" abbr - Zusammenfassung und
Abkürzung ..................................................
6.4.4 Zeilengruppen und Spaltengruppen ............
6.4.5 Colspan und rowspan - Zeilen und Spal ten
verbinden und vereinigen .......
6.4.6 Gestaltun g von Tabellen mit CS5 .................
6.4.7 Tab ellen im Web 2.0-Look ..........................
6.4.8
Tabellen im Einsatz ...... ...... .
Ressourcen .............. .

7

Formulare ............................................................... 41 5

7.1

7. 4

XHTML-Markup für Formulare - Grundlagen
7.1.1
opt group- Optionen gruppieren ...... .
7.1.2
label - 5teuerelemente beschriften ...
7.1.3
fieldset, legend - verwandt e Formularelemente gruppieren und beschriften ..........
Formularfelder mit C55 gestalten .................
7.2.1
Positionierung und Gestaltung von
Eingabefeldern ............................................
7.2.2
multiple-Eigenschaft bei Auswahlmenüs ......
7.2.3
Die Größe der Felder manuell einstellen
7.2.4
Formularnavigation ........................... .
............. .
7.2.5
Wie geht man mit Spam um?.
Formulare und Usability ......................................... .
7.3.1
Beschriftungen von Eingabefeldern ........ .
7.3.2
Verwenden visueller Elemente .................. .
7.3.3
Primäre und sekundäre Aktionen .....
Ressourcen ...... ............. ............ ...............................

8

Barrierefreih eit und Usability ................................ 467

8.1

Prinzipien der Barrierefreiheit.. ..............................
8.1.1
Vorteile der barrierefreien und
standardkonformen Seitengestalt ung ..........
Barrierefreie Seitengestal t ung .....
8.2.1
Grundlegende Richtfinien
8.2.2
Zugänglichkeit in der Praxis .....
8.2.3
BITV für Dummys ........ ............. ..................
Prinzipien der Benutlerfreundlichkeit .....
Was ist Benutzerfreundlichkeit? ............
8.3.1
8.3.2 Ziel und Zweck der Usability .....
8.3.3
Häufig auftretende Usability-Fehler .............
Verhaltensmuster der Benutzer . ...............................
Usability-Heurist iken .
.............
.. Goldene« Usability-Richt linien

7.2

7.3

8.2

8.3

8.4
8.5
8.6

10

I

Inhalt

397
397
400
402
403

410
413

41 6
418
419
420
422
422
429
448
449

450
4 51
461
462
464
465

46B
469
474
474
475
491
491
491
492
493
493
500
504

8arrierefreiheit und 8enutzerfreundlichkeit testen .. .
Ressourcen ............................................................. .
8.8.1
Online-Artikel ................... ...... .................. .
8.8.2 Tools........................................................ .
8.8.3
Usabili ty ................................................... ..
8.8.4
literatur ..................................................... .

9

Web 2.0- layouts mit (SS umsetzen ................... .. 519

9.1

Block- level-Elemente und In Une- level-Elemente ... .
9.1.1
810ck-level- Elemente ............................... ..
9.1.2
tn line-level ·E lemente ........................... ..
9.1.3
Block- level- und Inline-Level- Elemente
. .................. ............. .......... ..
in (55...

9.2

9.3

9.4

9.5

Das C55-Sox-Modell . ............
...................... .
9.2.1 Beispiel ..................................................... ..
9.2.2 margin un d padding ................................... .
9.2.3
border ......... .......................................... ..
9.2.4 Ve rtikale Abstände ..................................... .
9.2.5
Das Box-Moden-Problem ........................... .
Die fl oat-Theorie ..................................................... .
9.3.1
Grundlegende Eigenschaften ...................... .
9.3.2
Posit ionierung von fl oat- Boxen ................. ..
9.3.3
Das Attribut .clear................................... ..
9.3.4 Float-basierte Layouts ................................ .
9.3.5 Spalten mit gleicher Höhe .......................... .
Relative un d absolute Posi t ionieru ng ..................... ..
9.4 .1 Containi ng Blocks ....... .... .. ........................ ..
9 .4. 2 Sta tische Posi tionierung ............................ ..
9.4 .3
Relative Positionierung .............................. ..
9.4.4 Absolute Positionierung ...................... ..
9.4. 5 Feste Posi tion ierung ........... ....................... ..
9.4 .6 z-index ..................................................... .
9. 4.7
Positions-basiertes l ayout .......................... .
9.4.8 Floats vs. Posi t ionierung
........... ...........
Auswahl des layouts - fe st. flu ssig oder elastisch?
9.5.1
Layouttypen im Übe rbli ck: Wo liegt der
Unterschied zwischen den Ansätzen? ..........
Fixed Layout ...............................................
9.5.2
liquid/ Fluid layou t ....................................
9.5.3
Elastic Layout..............................................
9.5.4
9.5.5 Hybrid Layouts ...........................................
9.5.6 Weitere Techniken - Chamäleons................
9.5.7 Feste Layouts mit variabler Breite ................
9.5.8 Text-Zooming-Methode ..............................

I

510
515
515
516
516
517

8.7
8.8

520
520
521
523
525
526
526
527
529
530
531
531
535
540
542
553
558
559
560
560
563
566
566
568
578
581
581
582
586
588
590
594
595
596

Inhalt

I

11

9.9
9.10
9.11
9.12

9.5.9 Switchy McLayout .....................................
9.5. 10 Zusammenfassung ......................................
Umsetzung eines Web 2.0-Entw urfs ........................
9.6.1
Zielsetz ung und Entwurf ...................
9.6.2
Entwu rf des Schemas ............ .
9.6.3 Grundgerüst entwerfen .............................. .
Breite fes tlegen: #wrapper, #header,
9.6 .4
#con tent , It foot er ................... ....... .
9.6.5 Gestaltu ng von Itcon ten t und #sidebar ....... .
9.6.6 Gestaltung des Headers ............................. .
9.6.7 Gestaltung der Navigationsle iste und der
Suchbox ................
........................ .
9.6.8 Gestaltung des Footers
9.6.9 Dekorat ion ................ ............
CS5-Spezifität (CSS Specificity).. ................. .............
9.7.1
Was ist CSS-Spezifität? ................................
9.7.2
Berechnung der Spezifität
Fazit ..........................
9.7.3
CSS-F rameworks .....................................................
9.8.1
Wie entwickle ich ein Framework? .............
9.8.2 Auf der Suche nach dem perfekt en
Framework .............................................. .
CS5- Framewo rks im Überblick
9.8.3
9.8.4 Blueprint ................................................... .
9.8.5 960 Grid Syst em ..................... .
............ .
9.8.6 YAML.......
9.8.7 YUI Grids C55 ....................... .
9.8.8 Weitere CSS-Frameworks ............................
C5S Doc und CSS-Styleguides ..................................
CS5-Wireframes
.....................................
Exkurs: Parallax Scrolling
Ressourcen ............................................. .

10

Brow se rko mpat ibHität .......................................... 635

10.1

Umgang mit Inkonsistenzen ...................................
10.1.1 Vorbeugung............... ............
10.1.2 Umsetz ung mi t C55 und XHTM l .................
10.1.3 Welche Hacks sollte man verwenden? ........
10.1.4 IE Condi t ional Com ment s .................
10.1.5 Der Internet Explorer ..................................
Browserweichen für den Internet Explorer ...............
10.2.1 Sichere CSS-Hacks für den Int ernet Explorer
10.2.2 Transparenz von PNG-Bildern
10.2.3 Float-Attribut
........... .
10.2.4 Der IE-Doubled- Floa t-Margin-Bug ............. .

9.6

9.7

9.8

10.2

12

Inhalt

597
597
598
598

600
600
602
604
606

609
610
611
613
614
615
617
618
619

620
620
620
622
622
623
624
624
628
629
633

636
636
636
638
639
641
642
643
644
645
645

10.3
10.4
10.5

10.2.5 Der IEIWin·Guiliotine·Sug ........................ ..
10.2.6 Feste Positionierung von Elementen .......... ..
10.2.7 Der Three·Pixel·Text·Jog·Bug ..................... .
10.2.8 Der IE 6-Peekaboo·Sug ......................... .
10.2.9 Der Adjacent· Fl oat·Clear·Gap·Bug ............. .
10.2.10 Der line·Height·and·ReplacedElement·Hack ........................................... ..
10.2.11 Der Horizontal·Centering·Hack.
.. ....... ..
10.2.12 Der Expanding·Sox·Sug ....................... ..
10.2.13 CSS·Hover-8ehavior. .................................. .
10.2.14 Fixe Position ierung des Hintergrundbildes
(ba ckground·attach ment) ........................... .
10.2.15 M inimale und maximale Breite oder Höhe ..
10.2.16 Weitere Mängel des Internet Explorers.. .... ..
10.2.17 Häufige lösungsansätze ............................ ..
CSS·Untersti.ltzung in modernen Browsern ............. .
10.3.1 Neue Selektoren und Deklarat ione n ......... ..
Kompat ibil itätstabellen ................................ . ......
Ressourcen ..............................................................
10.5.1 Werkzeuge, Dienste ....................................
10.5.2 Tipps .........................................................

I

645
646
647
648
649
650
651
651
652
653
653
653
654
657
657
661
662
662
663

Teil 111 Web 2.0-Programmierung
11

Ajax ....................................................................... . 667

11.1

Ajax-Anwendungen in der Praxis .......................... ..
11.1.1 GoogleMaii (GMail): clever, robust
und elegant ............................................... .
11 .1.2 Netvibes: personalisierbare Start seiten ....... .
11 .1.3 Mite: Zeiterfassungstool für Web-Worker ... .
11.1 .4 Typische Merkmale von Ajax-Applikationen
Klassisches Modell und Ajax-Modell ....................... .
Architektur von Ajax .............................................. ..
11.3 .1 Strategie der Ajax-Programmierung .......... ..
11.3.2 XMlHttpRequest (X HR) .......................... .
11.3.3 Methoden des XMlHttpRequest-Objekts ... .
11.3.4 Attribute des XMlHttpRequest·Objekts .... ..
11.3.5 Praxisbeispiel ............................................. .
UnobtrusiveJavaScript ................................ .
11.4.1 Keine Annahmen machen ......................... ..
11.4.2 Sauberes Markup erzeugen ........................ .
11.4.3 Alles trennen, was sich trennen lässt ......... ..
11.4.4 Daten über die Umgebu ng nutzen ............. .
11.4.5 Quellcode revidieren und optimieren ......... .

11.2
11.3

11.4

668
668
670
670
671
672
675
676
676
677
678
678
692
693
694
696
696
697
Inhalt

I '3

11.5

14

I

Inhalt

Unobtrusive JavaScript in der Praxi s.........................
11.5.1 jQuery im Überblick ....................................
11.5.2 Installat ion ................................................
11.5.3 $- Fun ktion und $(document).readyO ..........

697
698
698
698

11.6
11.7
11.8

11.5.4 Selektoren ............................ .
11 .5.5 Methodenaufrufe ........................................
11.5.6 Events und Event Handler ........ ...................
11.5.7 Ajax-Komponenten. ............ .... ........
11.5.8 $.ajax ( op t ions) ........
11.5.9 .Ioad( url, [datal, [callbackl) .......................
11.5.10 .get( url, [data], [callback], [type]) ..............
11.5.11 .post (ur!, [datal, [callback), [typel)
11.5.12 Ajax-basierter Katalog mit jQuery..
11.5.13 jQuery: Werkzeuge und Ressourcen.
Ajax-BibU ot heken und Frameworks ..........................
Nachteile von Ajax ................... ............ ...................
Ressourcen ...

699
703
705
706
706
707
707
708
708
719
719
723
724

12

Mikroformate ............. ... ... .. ........... .. .

727

12.1
12.2
12.3
12.4
12.5
12.6
12.7

Was sind Mikroform at e? .........................................
Mikroformate im Überblick....
.... ..................
Mikroformate im Einsatz.................................
Visitenkarte als hCard ............. . ...........
..............
Mikroformate miteinander kombinieren ..................
Zusammenfassung...............................................
Ressourcen

729
730
731
733
736
737
738

13

Mashups ......................................... .

739

13.1
13.2

Was sind Mashups? ................................................ .
Feeds im Einsatz
13.2 .1 Personalisierbare Startseiten ....... ........ ... .
13.2.2 Feeds mischen, filtern und aufbereiten ........
13.2.3 Feed Bundler ..............................................
13.2.4 Feed-Filter ................... .
13.2.5 Man uelle Implementi erung
Feed-basierter Mashups ......
13.2.6 Mashup- Editoren ........................................
13.2.7 Yahoo! Pipes ...... .......................
13.2.8 Dapper
............ ..........................
13.2.9 Microsoft Popfly.
......................
13.2.10 Google Mashup Editor ................................
13.2.11 openkapow .................................................
13.2.12 Presto ............................. .

7 41
74 2
742
743
743
74 3
744
745
745
746
747
747
749
749

I

13.3 Widgets........... ............ ..................................... ....... 750
13.3.1

13.4

Was haben Widge ts zu biet en? ............ ....... 750

13.3.2 Wo finde ich Widgets? ............................... 751
13.3.3 Wie programmiere ich Widgets7 ...........
752
Zugriff auf AP,s ........................................................ 753

13. 4 .1 Was sind APls?........................................... 754
13.5

13.4.2 Wie verwende ich APIs? ............................. 755
Zusammenfassung ................................ .
756

Teil IV Web 2.0-Publishing
14

Podcasts, Vidcasts und Screencasts .................... . 759

14.1

Was ist Podcasting? ..................................... .

14.2

Mögli chkeiten des Podcast ings ............................... .

14 .3

Podcasts produzieren .............................................. .
14.3 .1 Richtlinien für das Podcast ing ............... ..... ..
14 .3.2 Plan und Entwurf ..................................... ..
14.3.3 A chtung, Aufnahme! .................................. .
14 .3.4 Tech nische Ausrüstung ............................... .
14.3.5 Vorbereitung der Dateien ........................... .

760
761
761
762
763
764
764
768
768
769

14.4

14 .3.6 Veröffentl ichen .......................................... .
Zusammenfassung ................................................ ..

15

Wiki s .................................................................... .. 771

15.1

Was ist ein Wiki? ................................................... . 772
Wiki -Engi nes in der Übersicht... .......... ..
774
15.2.1 MediaWiki -allgemeine Lösung ................ . 77 4

15.2

15.2.2 TracWiki - Software-Managemen t
und Dokumentation .................................. . 775
15.2.3 TWlki - AII-in-One-Lösung für große
Unternehmen .................. ............... ..
775
15.2. 4 PmWiki - schnelle und einfache Lösung ...... 776
15.2.5 PhpWiki - kompaktes Werkzeug für
kleine Gruppen .......................... . .......... .. 776
15.2.6 Perspective - Volltex tsuche in
MS Office-Dateien .................................... . 777
15.3

15.2.7 Weitere Informationen .............................. .. 778
Installation einer Wiki-Engine - MediaWiki... ......... .. 778

15.4

Zusammenfassung ....................................... .

16

Weblogs ............................................................... .. 785

16.1
16.2

Was sind Weblogs? ............................................... .. 786
Weblog-Engines in der Übersicht ......................... .. 788

782

Inhalt

I '5

16.2.1

16.5

Expression Engine - eine profe ssionelle
lösung für anspruchsvolle Aufgaben ...........
16.2.2 Movable Type - ein einfaches, elegantes
und kompaktes Werkzeug.................
16.2.3 Textpattern - ein mächtiges CMS mit
einfacher Markup-Sprache ..........................
16.2.4 WordPress - ein intuitiver Alleskönner ........
16.2.5 Serendipity - leist ungsstark und einfach
zu bedienen ......................... .
16.2.6 Weitere lösungen ........ ...............................
Ein WordPress-Template entwerfen .........................
16.3.1 Vorüberlegungen und Vorberei tung
16.3.2 Grundlagen.... ............
16.3.3 Methoden und Attribute ........ .
16.3.4 Installation von WordPress ....................... ..
16.3.5 Analyse und Strukturierung des statischen
Templates. ...... ........... ............
16.3.6 Hochladen der Dateien und Umsetzen
des Header-Bereichs ...................................
16.3.7 Umsetzung des Bereichs mit dem Inhalt.. ....
16.3.8 Umsetz ung der Sidebar-, Footer- und
Comment-8ereiche..... ......................
16.3.9 Erweiterungen und manuelle Änderungen
16.3.10Validierung, Überprüfung,
Zusammenstellung.....................
Web logs: Strategie zum Erfolg. .............
16.4.1 Heuristiken. . ............. ............
16.4.2 Strategie .....................................................
Zusammenfassung .................... ............. ..................

17

Ausblick

817

17.1
17.2
17.3
17.4
17.5

Das mobile Web wird zum Standard
Das Web als mobiles Betriebssystem ...................... ..
Das Web als Interactive Pool .............................. .
Einheitliche Identität...............
Webentwicktung: Browse run abhängigkeit
und neue Werkzeuge.... ............ ...............................

819

16.3

16.4

788
790
791
793

794
795
796
796
797
798
800
802
802
804
805
808
810
811
811
814
815

820
820
B21
822

Index ............................................................................... 823

16

I

Inhalt

Schritt für Schritt: Te xt gestaltung
..

Praxisbeispiel Druckversion .......................................... . 167

..

Praxisbeispiel: vertikaler Rhythmus .............................. . 173

.. SIIR im Einsatz - Dynamische Ersetzung von
Überschriften ............................................................... . 198
..

DTR im Einsatz - Dynamische Ersetzung von
Überschriften ............................................................... . 202

.. slFR im Einsatz ............................. .............................. . 204
Schritt für Schritt: Navigation
..

..

Beispiel zur Erzeugung von Registerkarten
mit der Stiding-Doors-Technik ...................................

320

Favicon gestalten ............ ..................

374

..................

Schritt für Schritt : listen und Tabellen
.. listen gestalten..... ............. ........................ ............. ...... 385
.. Ansprechende Tabellendarstellung . ............................... 403
Schritt für Schritt : Formulare
.. Formular gestalten ...................................................... 426
.. Formular im Web 2.O-Look gestalten ............................ 430
Schritt für Schritt : Web 2.0-layouts mit (55 umsetzen
... Zweispaltiges ftoat-basiertes Layout .............................. 542
... Mehrspaltiges layout mit relativer und absoluter
Positionierung ........................................................... .. 568
Schritt für Schritt : Ajax
...
...

Einen Ajax- baslerten Katalog erzeugen ......................... 679
Ein Ajax-baslerter Katalog mitjQuery ........................... 708

Schritt für Schritt : Mikroformate
... Visitenkarte mit Mikroformaten erzeugen ..................... 734
Schritt für Schritt : Wikis
.. MediaWiki installieren

778

Workshops

I

17

Inhalt der Begleit-DVD

Die Begleit -DVD enthält die vollständigen Quellcodebeispiete
sowie ausgewählte Lektionen aus den Video-Trainings .. Adobe
Photoshop (53", von Mare Wolf sowie" Einstieg in (55« von
Thomas Kötter.
Thomas Kötter: Einsti eg in C55

1
1.1
1.2

1.3
1.4
1.5
1.6
1.7
1.8
1.9
1.10

CSS-Framewo(ks: YAMl und YUI Grids
Einleitung

[01 :09 Std .]
[00 :29 Min.l

Der Aufbau des YAMl-Frameworks
YAML-5creenlayouts anwenden
Spalten anordnen und ausblenden

[10:16 Min .l
[09:33 Min.]
[06:49 Min.]

5eitennavigati on mit YAML gestal ten
Spalten unterteilen mit Subtemplates
(55-Hacks in YAMl
Druckversion mit Print-Stylesheets erstellen
Die Yahoo! User Interface Library (YUI)
YUI Grids (55

[08 :01 Min.]
[05:13 Min.l
[02 :49 Min.]
[05:09 Min.]
[05:45 Min.]
[14:29 Min.l

Mare Wo lf: Photoshop (53- Grundlagen

1
1.1
1.2

1.3
1.4
1.5
1.6
1.7
1.8
1.9
1.10
1.11
2
2.1
2.2
2.3
2.4
2.5
2.6
2.7
18

I

Inhalt der Begleit-DVD

[01 :07 Std .]

Farbe und Form
Einl eitung
Wissenswertes über Farbe
Das Pinsel-Werkzeug

[OO:20Min.l
[06:30 Min.]
[10:02 Min.]

Der Buntstift
Die Form-Werkzeuge

[05:14 Min.]
[06 :31 Min.l

Das Radiergummi-Werkzeug
Farben auswählen & verwal ten

[03 :25 Min.l
[08:06 Min.]

Das Füllwerkzeug
Das Verlaufswerkzeug

[05:50 Min.]
[06:46 Min.l
[08 :05 Min.]
[06 :23 Min.]

Muster gene rieren & anwenden
Pfade erstell en
Arbeit mit Text
Einleitung
Einen Text erstellen
Die Textoptionen
Die Lesbarkeit verbessern

[00:3 7 Std.]
[00:2 1 Min.]
[02:3 4 Min.l
[06:11 Min.]
[13:01 Min.]

Textverkrümmung und Pfad texte
Texteffekte erzeugen

[05:36 Min.]
[03:50 Min.l

Mit Text gestalten

[05 :52 Min.l

Geleitwort des Fachgutachters

Ich könnte an dieser St elle darauf eingehen, wie und wodurch
sich der Begriff des _Web 2.0.. definiert. Es wäre jedoch sehr
ambitioniert, dieses po la risierende Buzzword in ein paar ZeUen
beleuchten zu wollen : Zu unscharf sind die Definitionen, zu vielfältig die Interpretationen. Doch meinem geschätzt en Kollegen
Vitaly Friedman gelingt es mit klaren Worten und anhand vieler
Beispiele, diesem Begriff Kontur zu verleihen.
Und so erfährt man unter anderem, wie _neu« das neue Web
eigentlich ist, oder warum Entscheidungen einer Gruppe in der
Regel weitaus präziser und qualitativ besser ausfallen als jene
einzelner Personen. Darüber hinaus erfahren Sie, wie sich dieses
Phänomen auf die Software-Entwicklung auswirkt und warum
Open-50urce immer popularer wird: Crowdsourdng statt Outsourdng lautet hier die Devise.
Wie bitte, Crowdsourdng? Ja, rich tig gelesen! Denn bevor wir
uns die Ärmel hochkrempeln und loslegen können, gilt es, die
Bedeutung dieses und weiterer Begriffe, wie 50äal Bookmarking,
Tags, Trackbacks oder den viel zitierten Lang Tail zu klären. Jedoch
schon un mittelbar nach diesem kurzen Exkurs in 5achen Web
2.0-Terminologie wird - dem Titel entsprechend - auf den praktischen Teil übergeleitet.
Die grundlegenden Ideen, Techniken und Designkonzepte
des neuen Webs we rden durch eine ausgewogene M ischung aus
5creer,shots, Code-Bei spielen und erklärenden Texten anschaulich vermittelt. AJax, C55, R55, Blogs, Microformats, Wikis und
Podcasts sind nur einige der vielen Begriffe, welche man in diesem Buch kennen, verstehen und in der Praxis einzusetzen lernt.
50 werden im Abschnitt über die Erstellung standardkonformer Websites die Vorzüge der listen- und Tabellenelemente aufgezeigt und wie man diese durch geschicktes Styling in Menüs
oder visuell ansprechende, tabellarische Auflistungen verwandelt.
Auch ein Webformular wird seman tisch korrekt mittels XHTMl
definiert, mit C55 gestaltet und im Anschluss daran mit Java5cript
in puncto Usability verfeinert. Darüber hinaus garantieren Tipps
Geleitwort des Fachgutachters

I

19

zur Erstellung harmonischer Farbschemata, Grundregeln der
Typografie sowie Usab ility-Guidelines ein fundiertes Verständnis fur gu tes Design. Dieses Buch schafft sowohl fUr Designer als
auch für Web-Entwickler eine optimale Basis für einen erfolgreichen Start in das Zeital ter des neuen Webs.
Wolfgang Bartelme

20

Geleitwort des Fachgut achters

Vorwort

Wirft man den Begriff Web 2.0 in die Runde, so sorgt das Thema
häufig für eine angeregte Diskussion. Dies ist nicht unbedingt
verwunderlich, denn von diesem Begriff als Bezeichnung (Ur das
heutige Web haben die meisten schon gehört, ilber zuglei ch w is-

sen nur die wenigsten, was genau darunter zu verstehen ist.
Was genau versteckt sich also hinter dem Begriff Web 2.07 Wo
liegt der Unterschied zwischen dem . alten"l und dem . neuen«

Web? Und was bedeutet er im Einzelnen für Webanwender,
Designer und Programmierer?

Web 2.0 - ein Abenteuer im
Begriffsdschungel
Im laufe der letzten Jahre hat das Web einen undurchschaubaren

Dschungel von neuen Begriffen und Trend s hervorgebracht.
Wer sich heute im Netz umschaut, wird zwangsläufig auf solche
Schlagwörter wie AJAX, (55, R55, Blogs, Folksonomy, Mikr%rmate, WikiS, PodCiJsts, 5creelJcasts, semantisches Web oder soziale
Netzwerke stoßen, ohne dass ihre Bedeutung fOr das Web klar
wird. Dies sorgt fOr Missverständnisse und verwirrt einen unerfahrenen Nutzer genauso wie einen erfahrenen Webanwender.
Als Konsequenz werden die Begriffe durcheinander geworfen
und die Vorteile des neuen Webs Obersehen oder einfach nicht
verstanden.
Wer dennoch einen genaueren Blick hinter die Kulissen wirft,
stell t schnell fest : Das Internet, in der Gestalt, an die wir uns
gewöhnt haben, verandert sich rasant. Die zweite Phase der globalen Vernetzung lässt neue Verhaltensmuster, Gewohnheiten
sowie eine sogenannte Kultur der Partizipation entstehen. Im
Mitmach-Web etablieren sich neue Design Patterns, Techno logien und Online-Plattformen, die plötzlich allgegenwärtig sind
und dem Web eine neue Dynamik verleihen.
Web 2.0 - ein Abenteuer im Begriffsdschungel

I

21

Themen, Aufgaben und Ziele dieses Buches
Web 2 .0 in der Prax is
Dieses Buch beschreibt grundlegende Konzep te und Ideen des
Web 2.0 sowie deren Umsetzung
in der Praxis.

Eine wesentliche Aufgabe des Buches besteht darin, Ihnen einen
detaillierten Einblick in die grundlegenden Mechanismen des
Web 2.0zu geben. Zu diesem Zweck werden Ihnen die Konzepte
und Ideen hinter dem Begriff Web 2.0 vorgestellt. Dabei werden
aktuelle Designtrends, Techniken sowie einschlägige Werkzeuge
genauer unter die Lupe genommen und an hand zahlreicher praxisnaher Beispiele dargestellt. Es gilt dabei, neue und alte Probleme, die einem Web 2.0- Entwickler begegnen, im Detail zu
besprechen. Insbesondere werden wir in diesem Zusammenhang
auf die Standardkonformität , Benutzerfreundlichkeit und Barrierefreiheit eingehen - w ichtige Aspekte, die viel zu oft vergessen
oder schlicht ignoriert werden. Beglei tende Schritt-für-SchrittAnleitungen - etwa zur Umsetzung eines CS5-layout s oder zur
Programmierung mit Ajax - sollen dabei Einsteigern und Profis
einen nützlichen Werkzeugkasten bereitstellen, mit dessen Hilfe
die neuen Techniken kreativ und vielfäl tig umgesetzt werden
können.

Aufbau des Buches
Web 2.0 -Trends
Ein Blick aus de r Vogelperspektive

Web 2 .0-Seit engest altu ng
Seitengestaltung im neuen look:
Webtypografie, Farbgestaltung,
Design von Seitenelementen

Web 2.0- Programmierung
Technische Aspekte moderner
Webentwicklung: AJAX, Mikroformate und Mashups

22

I

Vorwort

Im ersten Teil des Buches wird das Phänomen Web 2.0 aus der
Vogelperspektive betrach tet. Hier können Sie sich einen Überblick Ober die neuen Konzepte verschaffen. Ebenfalls werden hier
die wesentlichen Merkmale und Eigenschaften de s Web 2.0 darunter auch Trends im Webdesign - beschrieben.
Im zweiten Teil des Buches erleben Sie das Web 2.0 praxisnah:
Es werden die Besonderheiten der Webtypografie, der Fa rbgestalt ung und des Designs von Seitenelementen detailliert beschrieben.
Die Gestaltung von Überschriften, NavigationsmenO s, Tabellen,
Schaltflächen und Formularen wird anhand zahlreicher Beispiele
dargestellt; aber auch Richtlinien zur Barrierefreiheit und Benutzerfreundlichkeit kommen an dieser Stelle zur Sprache. Außerdem
werden konkrete Beispiele aus der Praxis sowie die Erstellung von
Web 2.0-Layouts mithilfe von CSS dargestellt. Es wird erklärt, weiche Probleme (Stichwort »Browserkompatibilitdh) bei der Realisierung auftreten können, wie diese gelöst werden und wie man
unerwünschten Bugs effizient vorbeugt.
Der dritte Teil hebt die technischen Aspekte des Web 2.0 hervor. Dabei wird der Schwerpunkt auf der praxisorientierten Darstellung mit AJAX liegen. An dieser St elle we rden zudem M ikroformate und Mashups erläutert.

Im vierten Teil wird der Aspekt der Partizipation im Web 2.0
beleuchtet. Unter anderem erfahren Sie, wie man Blogs, Wikis
und Podcasts in der Praxis verwendet und diese in eine Webseite
integriert.
Am Ende eines jeden Kapitels finden Sie eine Zusammenfassung sowie eine Zusammenstellung weiterführender Referenzen
zum Thema .
Auf meiner Webseite zum Buch (http://www.praxisbuchweblO.de) finden Sie wei tere Informationen zum Thema. Dort
können Sie auch die im Buch enthaltenen Unkcodes verwenden;
so bleiben die Verweise stets aktuell.

Web 2.0-Publishing
Der Einsatz von Blegs, Wikis und
Podcasts

lInkcodes

Danksagun g 1 Dieses Buch wäre ohne die Hilfe vieler Freunde
unmöglich gewesen. An dieser Stelle möchte ich daher einen
herzli chen Dank an mei ne Eltern, meinen Bruder Ale)(ander,
meine Verwandten sowie an Heiko Hoffmann, Marie Giventar,
Fateme Shirazi und Kristina Kerbel für ihre großartige Unterstützung aussprechen.
Ein herzliches Dankeschön au ch an Wolfgang Bartelme, Sven
Lennartz, Manuel Bieh, Michael Dobler und die weltweite Webdesign-Community, deren Arbeiten, Beiträge, Ratschläge und
Ressourcen mich zu Weiterentwicklungen inspiriert und bei meiner Arbeit unterstutzt haben .
Insbesondere möchte ich mich bei meinen Lektoren Marc
Czesnik (erste Auflage) und Stephan Mattescheck (zweite Auflage) für die Idee zum Buch sowie ihre konstruktive Krit ik und
Unterstützung bedanken.
Ein herzlicher Dank geht außerdem an alle Freunde, Bekannte
und Unbekannte, die mich beim Verfassen des Buches unterstUtzt haben.
Vitaly Friedma n

Aufbau des Buches

I 23

I

Einleitung

Nur wenige werden sich an den 6. A ugust 1991 erinnern, an
dem eine revolut ionäre Innovation eingeleitet wurde. Im europäischen Kernforschungszen trum «(ERN) bei Genf arbeitete der
bri t ische Informatiker TImothy Berners-Lee an einem System, mi t
dem alle Rechner des Forschungszentrums verbunden und ihre

Daten miteinander verknüpft werden konnten.
Doch das Problem, an dem Berners- Lee arbeitete, war gar
nicht neu. Seit über einem Jahrzehnt schon suchten Un iversität en und w issenschaft lich e Einrich tu ngen nach Techn ologien,
mit denen man mehr O rdnung in das globale In formati onschaos
bringen konnte. Als Konsequenz entstanden immer häufiger
lokale Hypertext-Systeme. Diese sollten an hand elektronischer
Verweise f ür ei ne effizien t ere Suche in Dokumenten sorgen. Fast
immer w urden solche Syst eme jedoch an spezielle Bedürfnisse
angepasst und ve rließen nur selten den Großrechner einer Universitat.

Die Geburtsstunde des World Wide Web
Die Idee, die Berners- l ee verfolgte, bestand darin, ein HypertextSystem als eine einfache Au szeichnungssprache zu implementieren, die es erlaubt , beliebige Inhalte und Dokumen te leich t zu
erstellen und zu verknü pfen. Das Internet - ja hrzehntelang eine
eher akademische Angelegen heit, von Forschern für Forscher
entwickelt un d verwendet - wollte Berners-lee auf diese Weise
der breiten Öffentlichkeit zugangli ch machen. Die neue Technologie sollte frei verfügbar sein und jede m die Möglich keit geben.
daran teilzunehmen.
Am 6. August 1991 wurde das neue Konzept prasent iert und
eine Biblio thek bereit gest ell t, die grundlegende Baust eine für die
Entwicklung wei terer W ebanwendungen liefert e. Mit BernersLees A nleit ungen konnten Webserver relat iv schnell eingerichtet
werden. Das Erstellen von HTMl- Dokumen ten wa r an hand einer

TIPP

Das von Bern ers-lee veröffen tlichte Konzept kann man immer
/loch Im Usenet, mittlerweile
Im Gaogle Groups Archive abgelegt, in der Gruppe a/t.hypertext
(l inkcode 001) anschauen,

Die Gehurtsst unde des Wo rld Wide Web

I

25

simplen Beschreibungssprache einfach und einheitlich möglich.
Dies eröffnete eine neue Perspektive für den Informat ionsaustausch und die Datenverknüpfuflg - und zwar für alle potenziellen Anwender.

Das Internet wird allgegenwärtig
In den jüngsten Jahren seiner Entwi cklung erfährt das World
Wide Web eine außergewöhnliche Popularität. Statistiken weisen
ein exponentielles Wachstum auf, das bis zum Ende der 1990erJahre anh ielt.
Intern et-B oom I Es entstanden schnelle leitungen und die
ersten drahttosen Netzwerke. Internet-Telefonie, E-Commerce
und Online-Banking, aber auch Java und MP3 sorgten für neue

Aufbruchstimmung in der Webszene, die die Traffic-Volumina
weltweit gewal tig ansteigen ließen.
Das Internet wurde zuerst von Großunternehmen und Versandhäusern benutzt - in der Hoffnung, neue Kunden durch
neue Kommunikationsfo rmen zu gewinnen. langsam wandelte
es sich zu einem Web der Anwender, die ihren Alltag mithilfe von
On li ne-Diensten komfortabler und effizienter gestalten können.
Das neue Medium wurde zu einer effizienten Informationsquelle
und einer interaktiven Unterhaltungsindustrie. Die Entwicklung
der Breitbandkommunikation schuf neue Möglichkeiten für Programmierer, bessere Aussichten für Unternehmen und günstigere
Preise für die Anwender. Kurz : Das Web wurde dynamischer,
mobiler und attrakt iver.

Die Wirtschaft entdeckt eine neue Nische
Der Internet-Boom beftugelte die Wirtschaft mit phänomenalen
Potenzialen, die viele Visionäre im neuen Medium entdeckt zu
haben glauben. Es entstand eine neue Wirtschaftsbranche, die
sogenannte New Economy, welche auf neuen Geschäftsmodellen
basiert und täglich Neugründungen hervorbringt.

I Auch

in Deutschland etablierten sich Dotcom- Unternehmen, wie beispielsweise 1993 die MultimediaAgent ur Kabel New Media und der Online-shop-Hersteller In tershop. In der Branche etablierten sich das Versandhaus Amazon
(1994), die Such maschine Google (1998), das Online-Auktionshaus eBay (1995), das Online -Bezahlsystem PayPal (1998) sowie
Erfolgsgeschichten

26

Einleit ung

I

Dutzende weit erer Dotcom -Unternehmen. Investoren pumpten
fan tas t ische Startkapitale in neue Webprojekte, die oft kein tragfahiges Unternehmenskonzept vorweisen konnten, und erhofften sich, Einnahmen quasi mechanisch aus dem Internet-Effekt
zu generieren .

Die Dotcom-Blase platzt
Die Weltwirtschaft und die Internet-Branche wuchsen immer
stärker zusammen. Unter Börsianern und Kapitalgebern entstand
ein oftmals kaum zu erschütternde r Glaube an die Unfehlbarkeit
der Internet-Indust rie. Aber nur wenige Investitionen rentierten
sich . Einzelne Start-Ups wurden schnell bekannt und ließen neue
globale Konzerne entstehen. Bei den meisten Unternehmen blieb
der Erfolg jedoch aus.

Peaks and Valleys
k ' - bMrI hve years _
. . ~ hol. pe.ak.

'

.....

....

..
..
..

--

--.

[Dotcom - Blasel
Unter der Dotcom-8lase verst eht
man die Konzen trie rung von Dotcom-Unternehmen mit viel Kapital , aber ohne tragfähiges Konzept. die anschließend zu einer
Übersättigung und Krise der Internet-Wirtschaft führte.

.. Abbildung 1
Höhen und Tiefen der InternetEntwicklung in den 1990er-Jahren
(Quelle: New York Times, Five
Yeal> After Nasdaq Hit Its Peak,
Some Lessons Learned, 2(05)

,

Die ersten Anzeichen der Marktübersättigung wurden im Jahr
2000 sichtbar. Durch mehrfache Misserfolge wurden Investoren
verunsichert und verloren ihr Vertrauen in das Internet. Die Unsicherheit verbreitete sich rapide, sodass ein ganzer Wirtschaftszweig ins Schwanken geriet und eine Rezession einsetzte - die
New Economy erlitt ihren Zusammenbruch.

Die I<rise zwingt zum Umdenken
Auch in den folgenden Jahren hinterließ die Rezession deutli che Spuren in der Internet- Industr ie. Viele Unternehmen, die
nach einer Sanierung einen Konsolidierungskurs einzuschlagen
versuchten, blieben auf der St recke, wurden verkauft oder verschwanden aus der Branche. Die Entwicklung des Internets stagnierte. Doch das kreative Denken ließ nicht nach. Bestehende
Die Krise ZWingt zum Umdenken

27

innoyative Konzepte wurden neu - obj ektiver und realistischer
- durchdacht, strukturiert und in neue Formen gebracht. Neue
Projekte brauchen nun mehr Zeit, um manch vorsichtigen Anle-

ger von ihrer Rentabilität zu überzeugen.
So stießen Innovationen wie beispielsweise Wikis oder Weblogs zuerst auf Skepsis in der Öffentl ichkeit , gerieten dann aber
immer meh r in das Blickfeld der Benutzer. Zunehmend setzte sich

ein vorsichtiger Optimism us durch, der die Evolution des Web..
weitertrieb. Es war nur eine Frage der Zeit, bis sich die neuen
Entwicklungen etab liert haben wOrden.

Renaissance des Webs

flick r" Youil!llm

~

lil!mys pace.co m.
..

3 "lau 11. ' mM<

facebook.

28

Einleit ung

Genau diese Entwicklung erreicht heute das breite Onl ine-PubJikum, das die Veranderungen im Internet mit Interesse aufnimmt.

Neue Konzepte verändern nicht nur das Internet, sondern auch
das Verhalten der Benutzer im Web. Es entsteht ein neues Verständnis für das Web und seine Aspekte .
Es genügt, sich im Netz kurz umzuschauen, um festzustellen,
dass Webseiten allmählich eine neue Form annehmen. Ging es
vor wenigen Jahren überwiegend um die präsentierten Inhalte,
so geht es heute ebenso darum, die Informationen attraktiv zu
gestalten und die Webbesucher durch interaktive Online-Plattformen und Dienste zum Informationsaustausch und zur Mitgestaltung zu animieren. Die Bildergalerie Flickr, die Video-Plattform YouTube, das Freundschaftsnetzwerk Fa cebook sowie die
Kennenlern-Börse MySpace- mittlerweile die populärsten Portale
im Web - si nd helVorstechende Beispiele für den neuen Trend.
Die Webseiten werden in teraktiver, ansprechender und ben utzerfreundlicher. Ega l, ob nach einer sympathischen Bildergalerie
oder einem beq uemen Textverarbeitungsprogramm gesucht wird,
zwangsläufig stößt man auf neue, modern ausgestattete Webdienste mit »charman ten « Namen. Farbenfrohe Designtrends
und neue visuelle Ansätze springen dem Benutzer dabei ins Auge;
neue Funktionalitäten der Seiten sorgen für ein grundlegendes
Umdenken bei den üblichen Interaktionen im Web; und die
Zusammenarbeit der Online-Nutz er weltweit schafft ein erweitertes Medium zum Wissensaustausch und Informationskonsum,
bei dem die Benutzer zunehmend die Inhalte aktiv mitgestalten .

I

Das Internet entdeckt sich neu
Doch nicht nur das Äußere, sondern auch das Innere derWebsei·
ten unterliegt einer grundlegenden Veränderur1ß. Die neuen Entwicklungen versprechen ein standardkonformes und effizienteres
Web - eine Vision, die eigentlich viel realistischer ist, als sie
manch einem skeptischen Beobachter vielleicht erscheint. Sich
darauf einzustellen und das Web in diesem Sinne mitzugestalten,
bedeutet jedoch nicht nur, die Seiten eleganter, anpassungsfähiger und benutzerlreundticher zu gestalten. Vielmehr heißt es,
sich ein ordentliches Stück vom Gesamtkuchen der Webindustrie
zu sichern. Neue technologische Entwicklungen zwingen Webentwickler dazu, die älteren Denk-, Design- und Programmiermuster grll ndlich zu prüfen und sich mit modernen Werkzeugen
und Konzepten der Webentwicklung vertraut zu machen.

Neue Werkzeuge
Webentwickler erhalten bessere Werkzeuge zur Gestaltung
dynamischer und standardkonformer Webseiten . Seitenlayouts
werden heute fast ausnahmslos mit Cascading Style Sheets «(5S)
realisiert Inhalte werden mit der Extensible HyperText Markup
Language (XHTML) ausgezeichnnet; und eine komfortable und
flexible Interaktion der Dienste mit den Nutzern erfolgt mittels
Asynchronous JavaScrlpt and XML (AJAX). Zusammen räumen
diese Werkzeuge den Entwicklern mehr Möglichkeiten für die
Programmierung moderner Webapplikationen ein. Begleitende
Framew orks (Ruby on RaUs), Sprachen (Ruby, Java, PHP), Bibliotheken sowie Online-Dienste liefern praktisches Know-how zur
effizien ten Weiterentwicklung. Somit wird die Webentwicklung
flexibler, das Webdesign vielfältiger und die Webseiten zugängli cher - und zwar für alle. Ganz unabhängig davon, ob eine Sei te
in einem Desktop-Srowser mit maximaler Sik.!schirmauflösung
oder auf einem PDA im MIniformat angezeigt wird.

Neue I<onzepte
Gemeinschaftliche Zusammenarbeit sorgt im Web 2.0 für eine
permanente Vernetzung der Informationen, die von den Benutzern selbst erstellt und verbreitet werden. Zahlreiche soziale
Netzwerke und Folksonomles führen zur Entstehung und Etablierung der sogenannten kollektiven Intelligenz.

Neue Konzepte

I

29

Die Nu tzer lagern ihre Tätigkeiten und Akt ivitäten zunehmend
im In terne t aus. Webanwendungen übernehmen klassische
Desktop-Funkt ion alität und verb inden Mobilität mit Plattformunabhängigkeit. Sta tt komplexe, multifunktionale Websysteme
zu erzeugen, setzt man auf einfach zu bedienende Webdienste,
die alltägliche Aufgaben schnell lösen. Neue Business-Konzepte
wie beispielsweise »The Lang Tail« treffen den Nerv der Zeit und
lassen Online-Unterneh men vom wachsenden Interesse de r Nu tzer an kleinen, kaum bekannten Nischen profitieren.

Neuer Begriff
Diese Vielzahl an Erneuerungen mag auf den erst en Bli ck überwältigend ersc heinen, sie basiert aber zum großen Teil auf zwe i
simplen Komponent en: vernünft igen und intuitiven Konzepten
sowie einer besseren Kommunikation zwischen den Unt ernehmen und deren Kunden. Das erneuerte Web wird durch vielfäl tige komplexe Beziehungen zu einem einfachen und bequemen
Medium für Endanwen der, in dem neue finanzielle Pot enziale
und soziales Kapi tal stecken. Webentwickler und Manager erkennen dies und sorgen fürwei tere Innovationen und Investitionen.
Ein passender Begriff hierfür wurde gesucht und gefunden:
Web 2.0 soll das alte Web im neuen Gewand heißen. Ein Begriff,
der den vielfältigen Entwicklungen im Netz nicht unbedingt
gerecht wird, die Botschaft der Branche jedoch glasklar zum Ausdruck bringt: Das Web erlebt etwas grundlegend Neues, etwas
Revolutionäres und Umwerfendes.

Quellen und weiterführende Referenzen
.. Hobb es' Interne t Timeline v8.2
http://www.zakon.orgirobertJinternetltimeline
(linkcode 002)

.. Netpl ane t - .. Geschichte des Internet«
http://www. ne tpl a net. org!gesc hi cht e/i ndex. shtml
(linkeode 003)

.. Versc hi edene Artikel zum Internet
http://www.5eaJehandgo.comiartic/es/internet (linkcode (04)
.. W iki pedia - Internet
http://en.wikipedia.orglwiki/lnternet(linkcode 005)
.. CBS Digit al Arch ives
http://aJehives.ebe.ea/IDD-1-75-1738/sCienee_teehnologyl
internet (Linkeode 006)
30

Einleit ung

1

Das Web im neuen Gewand

In diesem Kapitel lernen Sie den Ursprung und die Bedeutung
des Begriffs Web 2.0 kennen. Daruber hinaus werden Ihnen die
Konzepte und Praktiken vorgestellt, die sich im Bereich der Webentwicklung zunehmend durchsetzen. Außerdem erhalten Sie
einen OberbHck über den Einfluss des Phänomens Web 2.0 weltweit und insbesondere in Deutschland.

1.1

Web 2.0 - wie neu ist das neue Web?

Als die Webpioniere Tim O'Reilly und Dale Dougherty im Herbst
2004 den Begriff Web 2.0 prägten, wusste niemand wirklich,
was sich daraus entwickeln würde. Zwar ließen sich gewisse Tendenzen erkennen, doch die Veränderungen waren vielschichtig
und komplex, sodass jeder Versuch, den aktuellen Wandel an
eine ausgezeichnete Entwicklung zu knüpfen, scheiterte.
Aus den unscharfen Konturen ließ sich kein auch nur ansatzweise klares Gesamtbild ableiten. Dennoch waren sowohl Nutzer
als auch Entwickler den Veränderungen gegenüber positiv eingestellt .
Demzufolge wollte die Internetbranche die rasant fortschreitende Entwicklung von Business und Technologie im Web stärker
ins Bewusstsein der Öffentlichkei t rücken. Das Internet mit vielen
neuen Potenzialen und Innovationen sollte nicht überbewertet
werden, durfte aber auch nicht unterschätzt werden. Zu diesem
Zweck beschlossen Internet-Visionäre, eine Konferenz zu veranstalten, bei der die neuen Techniken und Trends des Webs aufgegriffen und die Perspektiven diskutiert werden sollten.
Do ch jede innovative Idee braucht einen ebenso innovativen
Namen . Und so waren O'Reilly und Dougherty auf der Suche
nach einem treffenden Schlagwort (Ur die Bezeichnung des Wandels, während die Vorbereitungen zur Konferenz schon auf vollen
Touren liefen . Es zeigte sich, dass alle Trends eine gemeinsame
Eigenschaft hatten.
1.1

Web 2.0 - wie neu ist das neue Web?

I 33

1.1.1
Neues We b?

Das »neue. Web - kein neues
Konzept, sondern eine tiefgrei fende Erneuerung und Weite rentwiddung

Erneuerun g statt Neuerfindung

Bei einem direkten Vergleich der Sit uat ion vor und nach der Internetkrise fiel auf, dass das Web durch neue Konzepte und Anwendungen nicht neu konzipiert w ird, sondern vielmehr eine t iefgreifende Erneuerung und Weiterentwi cklung erlebt. Noch vor
wenigen Jahren verzweifelt, haben Entwickler inzwischen dazu
gelernt und verliehen ihren neuen bzw. erneuerten Produkten
detaillierte Konzep te und solide Geschäftsmodelle.
Diese Erneuerung ist Jedoch nicht in dem Sinne zu verst ehen,
dass sämtliche Innovat ionen ei ner festen Bindu ng an ältere Ideen
unterliegen. Vielmeh r heißt es, dass etabliert e Technologien und
Grundgedanken des Netzes den konzeptionell wie strukturell
neuen anline-Projekten als eine wesentliche Inspirat ionsquelle
und eine notwendige technische Grundlage dienen und sich
kreativ neu- und weiterentwickeln lassen. In diesem Zusammenhang ist es wicht ig zu verstehen, dass die rasante Entwicklung
des Netzes im »neuen. Web noch stärker als im »alten_ Web
seiner eigenen Dynamik überlassen bleibt. Dies sorgt dafür, dass
täglich neue Ideen entstehen, die mithilfe älterer Technologien
umgesetzt werden.
Bei manchen wird dies Skepsis hervorrufen - schließlich ste llen
CS5, XHTML, R5s, Ajax, soziale Netzwerke und all die Techniken,
die in den letzten Jahren als revolutionäre Innovationen begrüßt
w urden, vollkommen neue Konzept e dar.
Dagegen ist jedoch einzuwenden, dass es diese Techniken bisher in dieser Form und in diesen Ausmaßen nicht gab, entwickelt
wurden die meisten Konzepte dagegen bereits Ende der 1990erJahre. Nur konn ten sie unte r anderem wegen der nicht vorhandenen Breit bandkommunika tion nicht umgesetzt werden.

1.1.2

Das neue Web: alte Technologien im Einsatz

Und in der Tat - wer genauer hinschaut , wird schnell mit einem
Deja-vu-Er lebnis konfron tiert. Die neuen Te chniken scheinen
lediglich alte Bekannte in neuer Form zu sein.

A Abbildun g 1.1

Valides (55

34

I

1

C55 I Besondere Popularität gewinnen im neuen Web (ascading
5tyle 5heets ((55), die ein hohes Maß an Flexibili tät für die Webseitengestal tu ng liefern und einen enormen Aufschw ung der Kreativität in der Design-Szene herbeiführten.
Die Grundidee von Cascading Style 5heets ist die strikte Trennung von Inhalt und Darstellung. Jedes (X)HTML- Dokument kann
Style Sheet s dynamisch einbind en, sodass sich beliebige Inhalte
leich ter und dynamiKher gestalt en, verändern und verwalten lassen, ohne das Layout jeder einzelnen Seite einer Website einzeln
anpassen zu müssen.

Das Web im neuen Gew and

Die erste offizielle Spezifikation von Cascad ing Style Sheets, (CSS
Level 1 Specification) erschien bereits im Dezember 1996. Die
erste Version, von Arbeitsgruppen des World Wide Web Consortium (VV3C) entwickelt, zielte darauf ab, die Möglichkeiten zur
Prasentation von Webinhalten zu er.Neitern, zu formalisieren und
zu verbessern. Genau diese Zielsetzung konnte das W3 C erfolgreich umsetzen, sodass die erste Release-Version 1997 zur offiziellen Empfehlung erklärt wurde. Diese Version wird von den
gängigen Browsern mittler.Neile nahezu vollständig umgesetzt.
WORLD WIDE WEB CONSORTIUM

Tenth Anniversary
.... Abbildung 1.2
Das World Wide Web Concortium f\N3C), das Gremium zur Standardisierung von Internet-Techniken, feierte 2006 den 10. Jahrestag seiner
Gründung. Vieles hat sich verändert: Unter anderem wurden HTMl, XMl
und CSS verabschiedet.

Seitdem hat sich zwar in der Entwicklung der Sprache einiges
getan, grundlegend Neues - etwa neue W3C-Empfehlungen für
neue CSS-Standards - hat man jedoch noch nicht gesehen. Somit
erhielt die CSS level1-Spezifikation ein Gerüst fOr spätere Generationen von vielfäl tigen CSS-basierten Webseiten, das nun im
neuen Web intensiv wie nie zuvor zur Geltung kommt.
XHTM L I Nicht viel anders sieht es mit Extensible HypertText
Markup Language (XHTMl) aus, einer Neuformulierung von
HTMl4.01 in strikter XMl-Syntax mit neuen Komponenten aus
XMl. Die erste Release-Version von XHTMl wurde im August
2000 veröffentlicht. Sie sollte HTMljedoch nicht ersetzen, sondern nur er.Neitern und Entwi cklern durch besser organisierte
Objekte und Sprachmod ule mehr Möglichkeiten bei der Gestaltung der Sei ten einräumen. Im Vergleich zu üblichen HTMlDokumenten lassen sich XHTMl-Dateien leichter ver.Nalten und
können schneller an beliebige gerate spezifische Ausgabeformate
- wie etwa die in PDAs oder Smartphones eingesetzten Formate
- angepasst werden.
Für sich stellt XHTMl bloß eine Familie von XMl-Dokumenttypen dar, die samtliehe Formatierungsmöglichkeiten von HTMl
übernehmen und diese in eine strukturiert e und übersic htli che
Form bringen. Dabei ist XHTMl _abwärhkompatibel<ll: XHTMlDateien entsprechen den Syntax regeln von XMl. Soll te ein
Browser aber mit XMl nicht vertraut sein, wird die Seite t rotzdem

1.1

{C 55 2 und C55 3]
(55 Level 2, eine verbesserte Version des u~prüngti chen Standards, wurde 1998 veröffentlicht.
Es hat sich jedoch bis zur Erscheinung des Internet Explorers 7
nicht durchsetzen können - im
Internet E~plorer 7 w ird CSS 2
zum groBen Teil unterstützt. Auch
CSS level 3 ist im Gespräch:
Dieses soll das Prinzip der Sprache verändern und modular auf·
gebaut sein , also auf separaten
Techniken basieren und noch flexibler werden. Unter anderem
werden Entwicklern multiple Hintergründe für ein Element, Mehrspaltigkeit. automatische
Worttrennung sowie mehr Möglichkeiten zur Gestaltung von
R.i.ndem geboten. Auch einfache
8erechnungen sollen dann möglich sein . Mehr zum Thema finden
Sie auf http://www.C553.injo.

W3", XHTML
1 .0
\J

Abbildung 1. 3
Valides XHTMl1.0

.t.

Web 2.0 - wie neu ist das neue Web?

I

35

I

korrekt angezeigt, da sie in diesem Fall als ein HTMl-Dokument
interpret iert wird.

(XHTM l 1.01
XHTMl 1.0 kommt in drei Varianten vor: Der Webentwickler darf
zwischen Frameset, Translt/onal
und Strlcr aU5Wählen. Die Unterschiede zwischen Dokumenttypen
werden spater erl dutert.

Di e aktuelle Empfehlung des W3C bezieh t sich auf die im
August 2002 erschienene zweite Fassung von XHTMl 1.0. Diese
hat einige Fehler und Fehlinterpretat ionen ihrer Vorgängerin
behoben .
Somit ist XHTMl weder neu noch revolutionär. Das neue
alte Format liefert eine Erne uerung der Struktur von Webdokumenten, die mit XM l dynamisch - angelehnt an strikte Regeln
und Syntax - entwickelt und in beliebigen Endgeräten einheitlich
dargestellt werden können.
Ajax I Wer von einer Zäsur in derWebentwi cklung spricht, denkt
in der Regel an Ajax (,Asynchronous JavaScript and XML). Ajax
ermöglicht es, den Inhalt einer Sei te zu aktualisieren, ohne diese
neu laden zu müssen. Ajax ist jedoch keine neue Technologi e,
sondern eine Zusammensetzung mehrerer etablierter Webtechniken (mehr dazu in Kapitel 11, »Ajax.. ).

Kurz nachgeschlagen
JavaScript 1.0 erschien erstmals
1995 im Netscape Navigator und
entwickelte sich zu einer objektorientierten Skriptsprache. Ober
DOM kann JavaScript auf beliebige Elemente eines (X)HTMlDokuments zugreifen , sie verändern und neue Elemente
erzeugen.

Das XMLHttpRequest-Objekt, einer der Grundbausteine von
Ajax, wurde von Microsoft im Jahr 1999 entwickelt. Dies ist einer
der Gründe, weshalb die neue Technologie von den meisten gängigen Browsern (im Internet Explorer seit der Version 5) vollständig umgesetzt wird .
Auch andere Teile der neuen Programmiersch nittstelle, wie
JavaScript oder das Documeflt Object M odel (DOM) erleben in
Ajax eine Wiedergeburt und sorgen für die Interaktivität moderner Webanwendungen, welche immer stärker die Funktionalität
übli cher Desktop-Anwe ndungen übernehmen.

1.1.3

Ein neu er Begriff für d ie Veränd erungen im Web

Den Wandel wollten O'Reilly und Dougherty an den Prozess
der Erneuerung knOpfen und dies do kumentieren . Im Laufe
einer Brainstorming-Sitzung fiel schließlich der Begriff Web 2.0,
der den Übergang von alten zu neuen Webmodellen andeuten

Abbildung 1.4 "
Die erste Web 2.0-Konferenz fand
2004 statt, DieVeranstalter haben
ihr Hauptziel erreicht. Schon im
Frühj ahr 2005 verbreitete sich der
Begriff .. Web 2,()c unaufhaltsam
im Netz .

36

I

1

sollte.
Genau dies sollte die Botschaft für die Branche sein, die
nun ungeduldig von einem neuen Aufschwung des Internets
schwärmte.

web2.0
CO N FE REN C E-

Das Web im neuen Gewand

Der Terminus Web 2.0 wurde schnell zu einem Oberbegriff fOr
sämtliche - bemerkenswerte und weniger bemerkenswerte Erneuerungen im Web. Als Konsequenz haben eifrige Start-Ups
den Begriff oft willkürlich verwendet - oftmals mit dem bloßen
Zweck, das Interesse der Öffentli chkeit auf sich zu richten.

1.1.4

W as is t Web 2.0 - und was is t e s n ic ht ?

Der erste Eindruck. den man vom Begriff Web 2.0 bekommt. ist
die Erinnerung an eine Versionsnummer aus der Software-Entwicklung. Web 2.0 stellt in gewissem Sinne eine Erneuerung des
»alten« Webs dar. Dabei handelt es sich bei der Erneuerung nicht
nur um technische Meilensteine, sondern auch um eine neue Art
der Kommunikation und Vernetzung der Nutzer.

I
W eb 2.0
Der Bedarf nach mehr Pr.lzision
im Umgang mit dem Begriff
Web 2.0 wurde immer deutlicher, sodass O'Reilly ein Jahr
später den Beitrag .What is
the Web 2.0? veröffentlichte,
in dem das neue Web genauer
unter die lupe genommen und
spezifiziert wurde.

.. Abbildung 1.5
Web 2.0 aus der Vogelperspektive. Diese Mind-Map von Markus
Angermeier listet die wesen tlichen Merkmale des Web 2.0
mit Beispielen und populären
Web 2.O-Diensten im Hintergrund
auf.

--- - ....-

.. Abbildun g 1.6
So komplex ist die Web 2.0landschaft laut Web Trend Map
2008 von Information Archi tect s
(httpHinformationarchitects.jpl
web -trend -map-2008- beta/).

Dabei darf man sich nicht vo n der dominierenden Meinung
beeindrucken lassen, die das Web 2.0 als eine revolutionäre
Neuertindung darstellt. Das neue Web entwickelt sich zwar tech 1.1

Web 2.0 - wie neu ist das neue Web?

37

Insbesondere ist Web 2.0 vor
allem ein Begriff technologischer,
und nicht gestalterischer Natur.
Demzufolge macht es auch keinen
Sin n, über Designtrends 2.0 zu
sprechen .

[Se ma ntic We b)
Unter 5eman(iC Web versteht man
eine Erweiterung des World Wide
Web, sodass Inhalte nicht nur von
Menschen, sondern auch für Maschinen besser inlerprel ierbar
sind . Voraussetzung hierfür ist
eine präzise semantische Auszelchnure der Inhalte.

nisch ZU einem beispiellosen Medium, konzeptionell macht es
jedoch einen großen Schritt zurück: zu den Anfangen des World
Wide Web, als die Benutzer zum aktiven Austausch von Informationen motiviert wurden. Dieser Grundgedanke wurde durch
den Online- Konsum der 1990er-Jahre schnell in den Hintergrund
verdrängt, kehrt nun aber in neuer Gestalt zurück.
Ein weiterer Trugschluss ist die Gleichsetzung des Web 2.0 mit
dem semantischen Web (Semantic Web). Der Unterschied zwischen den beiden liegt darin, dass das Web 2.0 zwar ein großes
Maß an semantischen Entwicklungen vorweisen kann (XH TMl,
Microformats usw.), aber eben nicht nur aus diesen Technologien
besteht (s. Abbildung 1.5). Das Semantic Web ist vielmehr als
ein Teil des neuen Webs zu verstehen, der immer stärker in den
Vordergrund tritt.
1.1.5

Hat der Begriff )l Web 2.0 « noch Substanz?

Es ist fraglich, inwiefern der Begriff Web 2.0 heutzutage noch
gerechtfertigt ist. Viele Experten zweifeln daran, ob dieser allgemeine Terminus, der für sämtliche Technologien und Entwicklungen im Web der letzten Jahre stehen soll, überhaupt noch
Substanz hat . Heutzutage unterliegt das Web einer rasanten
Entwicklung, die durch einen wenig aussagekräftigen Begriff nur
unzureichend vermittelt wird. Das Web 2.0 heute unterscheidet
sich vom Web 2.0 vor wenigen Jahren -es soll jedoch durch den
gleichen Terminus zum Ausdruck gebracht werden!
Unter Nutzern breitet sich eine gewisse ",Web 2.0-Müdigkeit. aus. Sie wissen ganz genau, wo sie mitmachen wollen und
- noch wichtiger - wo sie nicht mitmachen wollen. Das Merkmal
~Web 2.0. bri ngt sie nicht we iter. Stattdessen müssen Sei tenbetreiber genauer auf ihre Bedürfnisse und Interessen eingehen.
Nutzer erwarten Substanz und persönliche Vorteile. Seitenbetreiber merken dies und versehen ihre Web 2.0 -ldeen mit sorgfält ig
durchdachten Konzepten und tragfahigen Geschäftsmodellen.
In Diskussionen über das alte und das neue Web wird der
Begriff Web 2.0 dennoch häufig gebra cht, um eine klare Trennung zwischen verschiedenen Paradigmen zu schaffen. Geht es
dagegen um Designtrends oder neue Technologien, so versuchen
die Experten, den Missbrauch des Begriffs für Marketingzwecke
zu vermeiden und ihn durch eine präzise Benennung der eingesetzten Technologien und Konzepte zu ersetzen (Soäaf Web,
Semantic Web, Remixable Web u.Ä.). In diesem Buch wird der
Begriff Web 2.0 du rchgehen d verwendet, um die neuen Möglichkeiten, Konzepte und Ideen zu erläutern.

38

I

1

Das Web im neuen Gewand

1.2

I

Neue Möglich I,eiten und neue
I<onzepte

Nach einem detaillierten Einblick in d ie Entstehung des Begriffs
wird es nun Zeit, auf die einzelnen Entwicklungen im Web 2.0

ausführlich einzugehen. Was stellen die neuen Konzepte konkret dar? Und welche Möglichkeit en bieten sie Webentwicklern ,
Benut zern und Unternehmen? Es folgt daher nun ein Überblick
über die gru ndlegende Erneuerungen im Web.
Breitbandkom m unikat ion u nd die neue Fun ktionalität moderner Webapplikat ionen bie ten Web 2.0-Nu tzern eine ve rlockende
Alternative zu .üblichen« Desktop-Anwend ungen, an die man
sich im La ufe der letzten drei Jahrzehnte gewöhnt hatte. All t äg-

liche Aufgaben, wie etwa Terminplanung, Projektdurchf ührung
sowie Text - und Bildverarbeitung, verlassen die Schranken lokaler

Mobiles Betriebssystem
Das Web entwickelt sich zu
einem mobilen Betriebssystem,
auf dem Anwender alltägliche
Aufgaben schnell und effizien t
erledigen können.

Desktop-Anwendungen und finden den Weg in das neue Web.
Im Web 2.0 können diese Aufgaben effizienter und mobil erledigt werden. Webseiten werden dadurch zu Webdiensten; d as
Web selbst zu einer Service-Plattform: einem Platz für zahlreiche
und viel fal t ige Online-Dienste.
Persönliche Daten, darun ter LieblingsbOcher, M usik oder
Lesezeichen, müssen nicllt meh r lokal auf dem eigenem Rechner
gespeichert werden. Statt dessen können sie ganz offen in globalen Netzwerken abgelegt und verwaltet w erden. Neue Applikat ionen trennen die feste Bindung der Anwender an eine spezielle
Desktop -Softvvare, die bis dato auf einem Rechner zuerst instal liert und anschließend sorgfaltig gepflegt werden musste. Da
Dat eien nun im Netz ausgelagert werden, können sie jederzeit

Textverarbeitung online
Writefy, mittlerweile Goog/e
Docs & Spreedsheers, ist eine

der ersten webbasierten Anwendungen, die eine einfache
Alternative zu Microsoft Word
im Web darstellten . Ein anderes
Beispiel ist Zohowrlter.

und Liberal l online erstell t , mo difiziert und abgelegt werden.
Wer sich bisher beim Austausch von Inform ationen, be ispielsweise in einem großen Projekt , mit komplexen Con tent-Man<18ement-Systemen oder E-Mail-Korrespondenz begnügen m usste,
wird im neuen Web einfache, bequeme und plattformunabhangige Anwend ungen vorfinden, die einen mobilen Datenaustausch
ebenso wie eine Synchronisation der Daten bei paralleler Zusam menarbei t mehrerer Anwender ermöglichen.
Die ersten webbasierten Büroanwendungen st ellen eine neue
Generat ion der We bapplikationen in Sicht. Mit Zaho und Googfe
Docs lassen sich Word - und Excel- Dokumente sowie PowerpointPräsent ationen online erste llen und ablegen. Adobe Photoshop
Express übe rn imm t die Aufgaben eines Grafikedit ors und passt
Farben und Schärfe eines Bildes an oder speic hert ei nen Bildausschnitt. Und GoogfeMail stellt einen Webmail -Dienst dar, des-

1.2

Neue Möglichkeiten und neue Konzepte I

39

-

llIlm.·l _ Cil?pgle

.

~-

~ Wrltlbolrd ..........

sen Möglichkeiten gängigen E-Mail- Programmen weit überlegen
sind .

gOFFICE

... Abbildung 1.7
Moderne webbasierte Word-Processlng-Tools in einer Übersicht

1.2.1
Rieh Internet App licatio ns
Die neue funk ti onalltät von Rich Internet Applications (übersetzt reichha ltige Webanwendunge n), welche die interaktivität
von Web-Applikat ionen mit den Möglichkeiten der DesktopAnwendungen vere inen, stellen eine Grundlage für vielfältige
plattformObergreifende Lösungen dar. Rich Internet Applicati ons
ve rändern nicllt nur die Art und Weise, wie Onli n e~App l ikationen
programmiert und verwalt et werden, vielmehr verändern sie die
In teraktion zwischen einer Web~Applikation und dem Nutzer.
Traditionelle, langsame Web~lnteriaces werden durch anspre~
chende moderne Ben utzeroberflächen ersetzt und mit robusten
Features elWeitert.
So wi rd es mi t Rich Internet Applications etwa möglich,
Objekte mittels Drag & Drop zu verschieben und neue Inhalte
ohne explizites Aktualisieren der Seite zu laden, Darüber hinaus
können sie auch offline benutzt we rden und die Daten an den
Server erst dann übermitteln, sobald eine In terne t~Verbin d ung
besteht (Goog/e Gears, (ur!). Praktisch (Ur den Nu tzer sind dabe i
zwei Aspekte: Zum einen laufen Rich Internet Applications auf
jedem Betriebssystem. Sie sind somit portabel und kön nen an
einem beliebigen Ort mit In t erne t~Zugang benutzt werden. Zum
anderen sind meistens keine explizit en Inst allat ionen und Soft~
ware~Updates notwendig. Ein moderner Browser reicht häufig
vollkommen aus.
Desktop-RI As
Ei n moderne r BrOl.vser reich t jedoch nich t aus, falls eine Web~
Applikati on abgekoppelt vom Browser auf dem Desktop laufen
soll. Dies widerspricht zwar dem Konzept des Webs als einer
Service~Platt form, liefert aber erhebliche Vorteile sowohl für die
Entwickler, die anspruchsvolle Benutzerschni ttstellen (beispi els~
1.2.2

- : ADOBE" AIR'

... Abbildun g 1. 8
Zusammen mit Adobe Flash und
Adobe Flex, einem umfangreichen
Entwicklungs- Framework mit
vielen Bibliotheken, Werkzeugen
und vorgefert igten Komponen ten,
bildet Adobe AIR eine robuste
Plattform für die Entwicklung von
Desktop-RIAs.

40

I

weise den Zug riff auf lokale Daten) realisieren können, als auch
für die Benutzer, die nicht mehr an einen Browser gebunden sind
und eine Web~Applikation genauso wie eine Desk top~A ppli k a­
t ion direkt per M ausklick aufru fen können.
Einen Baustein für die Entwicklung solcher Desktop-RIAs stellt
die Ende 2007 veröffentlichte, plattformunabhängige Desktop- Laufzeitumgebung Adobe Integrated Runtime (AIR) dar. Sie
erlaubt es Entwicklern, Web-Appl ikat ionen auf der Grun dlage
von (X)HTML. Ajax, Fl ash und anderen Technologien zu entwerfen und in kompakte ausfüh rbare Dateien zu verpacken. Diese
Dateien können anschließend ausgeführt werden und unabhän -

1 Das Web im neuen Gewand

I

gig vom verwendeten Browser auf dem Des ktop des Benutzers
lau fen. Daf ür benöt igt d er Nutz er eine vorinst aJlierte AIR-Engine,
also ei ne lokal install iert e virtue lle Maschine, fur die ausfU hrba ren
Dateien.

.""

=

__
._---_.._--_..""_.. ._......
...

.~

...... '"

•

.~

•• -_ __.......

.~

..M_'........... _ _ ...

.

•

.n.

RIA-PlaUfonnen

•r

".... .-. ;1
;1•
....
"

....

_'._ . • !-!...... . '- ' •

n.

... " .

.
t
.
_.
__
Il

V

... Abbildun g 1.9
Mit der A IR-Armendung eBay
Desktop können eBay- Nutzer
Online-Angebote offl ine durchstöbern, ers tellen und velWalt en,
Versteigerunge n in Ec htzeit ve rfolgen und über interessante Produkte informiert werden.

".

_.1!_. 'LM •

n•

In der Entwickler-Comm un ity erfreu t sich Adobe AIR nicht
zuletzt wegen seiner Plattform unabhängigkeit großer Beliebt heit.
Mittlerweil e st ehen über 190 AIR-Applikat ionen zum Download
bereit . Di ese bieten de n Anwendern eine Vielzahl von Feat ures,
die man von Desktop-Applikationen he r kennt . Beispielhaft dafür
ist eBay Desktop (s. Abbildung 1.9). Mit der AIR-Anwendung
können eBay-Nutzer Versteigerungen in Ech tzeit verfolgen, über
int eressant e Produkte informie rt werden sowie Online-Angebot e
offli ne durchs töbern, erstellen und verwa lt en. Somi t sind Anwender nicht mehr an die Fähigkeiten ihres Browsers gebunden und
können viel fa lt ige zusätzliche Feat ures nutzen.
Eine al t ernat ive Zwischenlösung, die es ebenfalls erlaubt,
Online-Applikationen aus dem Browse rfenst er auf den Desktop
zu verlagern, bracht e Mozilla Labs Ende 2007 mi t dem Projek t
Prism. Online-Dienste, die bisher im Browser geladen werden
mussten, können mit Prism mittels einer Desktop-Verknüpfung
aufgerufen werde n und in einem eigenen Browserfenst er auf
dem Desktop laufen. Dadu rch wird kein Durchstöbern de r Firefox-Tabs mehr notwendig, und beliebte Dienste können ins Startmenu gelegt werden (vgl. Abbildung 1.11).

Neben Ad obe AI R stehen auch
weitere RIA- Plattformen zur Ve rfügulll"' Unter anderem bieten
JavaFX, Microso ft (Silverlight +
W indows Presen tation Foundati on) und die Open-SourceLösung Openlaszlo Jeweils ein
multifunktionales Frameworlc: zur
Entwicklung von RIAs an.

S;f.,';;rlight .
.... Ab bildung 1.10
Silveriight ist Microsofls aktu ·
elle Entwicklungsplallform für
RIAs. Vort eil fO r die Entwi ckler :
Mit Silverlight 2 kann jede .N ETSprache w ie C# oder VB.N ET zur
Anwendungsentwickl ung gen utzt
werden.
MOlilla Ubiquity
über w eitere Projekte der M o zlll a-Entwickl er, darunter etwa
die Browser-Ko nsole Ubiquity

(h ttp://'ab5. mozilfa.coml
2008/08/ln troduc Ing· ublqUlty)
können Sie sich auf http://fabs.
mozllla.com informieren. Viele
der PrOjekte sollen sch on In d ie
nächsten Veßionen der Moz il laBrow ser einRießen.

1.2

Neue Möglichkei ten und neue Konzept e

I

41

Abbildung t.tt •
Online-Dienste im Startmenü:
So kOnnte es aussehen.

Googlc UIcnd.or

W.ndows Photo G;aJHy

Abbildung t.12 •
Mit Prism wird es vielleicht schon
in den nachsten Versionen von
Firefox möglich sein , beliebige
Web-Anwendungen mit einem
Klick auf den Desktop zu verlagern.

-

(_""''''Pfllocorio~

!

,"""'li .... '

-:

N....., I ~'*"""
~*~

~ SIon"" ...

!tJ

0. •• ..,.

1"'1

Qo>du..>cll ...

"' ..... _ IM .pl",,,,,, •....,.

"'.......""'...

'".

I

-.,

.~.

.J

Ji"
k _~f<I

Chrome
Die obige Funktiona!itat lieferte
Google Mitte 2008 mit seinem
8rO\oVser Chrome (http:/ /www.
google.com/chrome). Unter anderem können Chrome-Nutzer
ihre am häufigsten verwendeten
Webanwendungen über Desktop-Verknüpfulllen starten.

42

J

~~

Interessant ist dabei die Idee der Mozilla-EntwickJer, Prism in
Firefox zu integrieren und Web-Applikationen mit einem Klick
in lauffähige Desktop-Anwendungen umzuwandeln. Sämtl iche
Benutzerdaten, Passwörter, Cookies, Plug-ins usw. sollen dabei
au tomat isch übernommen werden. In Firefox 3 ist Prism noch
nicht integriert. Mozilla-Entwickler sind jedoch zuversichtlich,
es schon in den nächsten Browserversionen mitliefern zu können.

Das Web im neuen Gewand

stikkitA. "

.

-

-

_-1-'

~ • • II' ~'. "

•

.--_--- --- _...._...
~

_~

1.2.3

__

• Abbildun g \.13
Stikklt - ein Dnllne-Assistent. Mit
diesem Dienst lassen sich Daten
und Bookmarks ablegen, Termine
und To-Do-listen festlegen sowie
Kontakte In ein persönliches Telefon- und Adressbuch eintragen.

-.•

-

. ''''

•

Weisheit der Massen und Architektur der
Partizipation

Im neuen Web nehmen die Nutzer aktiv teil und gestalten das
Netz durch einzelne Veranderungen mit. Der

User Generated (on-

tent, also der vom Benutzer erstellte Webinhalt, ist charakteristisch für Web 2.0-Portale.
Ein weiteres Beispiel ist die freie On li ne-Enzyklopädie Wikipe-

dia, die mittfelWeiie zum Nachschlagewerk Nummer eins im Web
geworden ist und eine starke Konkurrenz zu kost enpflichtigen
Enzyklopädien wie Encyclopa?dia Sritannica ode r M5N Encarta

darstellt.
In Wikipedia kann jeder - öffentlich oder auch anonym beliebige Inhalte hinzufügen, die dann von anderen Anwendern
auf freiwilliger Basis korrigiert, ergänzt und erweitert werden. Die
Summe kleinster veränderungen durch Millionen von Wikipedianern bezeichnen Experten als ein Paradebeispiel fOr den sogenannten Netzwerkeffekt, der durch die gemeinschaftliche Arbeit
von vielen Anwendern zustande kommt. Dabei soll der aus der
Wirtschaft stammende Begriff suggerieren, dass eine passive und
aktive Teilnahme von neuen Anwendern am Gesamtwerk den
Wert des Produkts für das gesamte Netzwerk steigert und jeden
Teilnehmer profitieren lässt .
Das Ergebnis lässt sich sehen. Allein die deutschsprachigen
Beiträge übertrafen Ende 2008 die Zahl von 800.000 Artikeln,
das englischsprachige Wikipedia verfügt Ober 2 .500.000 Beiträge
mit 3.000.000 registrierten Benutzern - Tendenz steigend .
Last.FM, YouTube, Ffickr, DIU und weitere Mit mach-Dienste
magnetisieren Millionen von Anwendern . Dadurch gewinnt im
Endeffekt die ganze Community. Denn was viele Anwender als
1.2

[Folk sonomyJ

Folksonomy - stammt von Folks
(Leu te) und Taxonomy (Klassifizierung) - stellt eine Vo.gehensweise
im Web dar, bel der Nutzer Inhalte durch frei wahlbare SchlüsselwOrter und Tags kategorisieren
und assoziieren . Die Funktionsweise des resultierenden Netzwerks kommt der Arbeitsweise
des menschlichen Gehirns viel näher. als dies bel einer feststruktu rierten Kategorlslerung der Daten
der Fall ist .

digg r Newtl IJ
... Abbildun g \.14
Bei Digg.com entscheiden Be nutzer selbst, welche Neuigkeiten
sich zu TOp-St Ofies entwickeln
und welche Beltr."lge im Netz
dominieren .

Neue MOglichkeiten und neue Konzep te

I

43

I

interessant empfinden, positiv bewerten und weiterempfehlen
(indem sie ein Lesezeichen kopieren oder einen Bei t rag in einem
. Zum Lesen ll-Ordner ablegen). stellt eine wertvolle Informati onseinheit dar, die man ni cht unterschätzen sollte.
Ordnung in die gebotenen Empfehlungen bringt die Verschlag wortung von Webinhalten durch dazugehörige Tags. Durch das
Tagging werden die Sem ant ik und die Auffindbarkeit der Daten
.... Abbildung ' .'5
Die freie Online-Enzyklopädie
Wikipedia Ist mittlerweile zum
Nachschlagewerk Nummer eins
im Web geworden.

verbessert. wobei einzelne Einträge nun nach ihrer Bedeu tung
automati sch sortiert und direkt abgerufen werden können.
, •• "' ........ .. ol l. So OHP

1.tH'·' I\OYO cl ......n)u'><':'O. to 'roHow Itw

mon.,,-I< ...., . IM _ ' •. \11",,". 0•• p..."

r>el ."" •., . . .

~,'{)m

• .,•• ,

!Ii"" ,...

p.rt~

Inot On.,.

t.

";n" <IOd ~ '>
a TUU think. In .ddili.., w ••
tu bur . n."
fP<> d •• ....,. ! .... , ....... , A.....10. "",.. hH . hLlQ<l for.,. fu, m.,,!(Cit 100+; · ", ..
J 5 bi.un '0"1/< In lNi, p'op-,. ro,m.t.
r o." M n, .. mod" , lo~ o ohl,,~_ ZO I ~ t>; ~ I rr~!l od<" D
Z Sp""" lt

'0

The Sheep Market Thesis ..
• , ....... ,......... ...........

Abbildung 1.16 .
Auf den Seiten seines offiziellen
Blogs verschJagwortet O'Reilly
seine Beiträge mit Tags.

1ft

.,.. ..... . '-__.............

o~

Somit ersetzt die Weisheit der Massen (Wisdom 0/ Crowds). also
das enorme Spektrum an Wissen und Information, das durch die
Nutzer mitgetragen und berei tgestellt wird, die Dominanz einzelner Bei träge und Sei ten . Die Anwender bauen sich selbs t ein globales und tiefvernetztes Inf ormatiomnetzwerk zusammen. ohne
sich auf die Editoren von renommierten Online-Verzeichnissen
wie DMOZ oder Web.de zu verlassen. Sie entscheiden selbst,
welche Inhalte populär werden, und wel che Themen das Netz
beherrschen. Diese Entwick lung ist f ür Paul Graham ein Zeichen
für die sich durchsetzende Demokrati e im Web (http://www.
paulgraham.com/web2G.html, Linkcode 010).
[Kollekti ve Intelli ge nzi
Die Gesamtheit einzelner Beitrage. die von der Offentlichkeit
erstellt und verbreitet werden.
ergibt eine Wissenseinheit . die
Experten alskollektive Intelligenz
bezeichnen.
[Page Rank-A Igorit hm usl

Der Algorithmus hinter dem PageRank wird zwar geheim gehalten,
doch das veröffentliche akademiKhe Paper mit einer deLlillierten Beschreibung der Gru ndprinzipien kann man im Netz
finden (linkcode 011)
44

I

1

I<ollektive Intell igen z

I Die

Nutzung und St eigerung kollektiver

In telligenz werden zu zentralen Prin zipien im Web 2.0. Sie lassen
die Qualit ät der Informationen über die Quant ität dominieren.
Treffende Beispiele dafür sind die Erfolgsgeschichten von . Alt~
meistern« wie eBay, Google und Amazon. welche die Em pfehlungen von Nutzern und Kunden zu ei nem Grun dprinzip gemacht
haben.
So liefert eBay eine transparente Darstellung sämtlicher Aktivi-

täten der Käufer und Verkäufe r. Diese müssen sich wegen gegenseit iger. allen Nutzern zugänglichen Bewertungen um m öglichst
optimale Verkaufsabläufe kümmern. was letztendlich zur St eigerung der Quality 0/ Service führt. Die Vorteile für beide Sei ten
liegen auf der Hand.

Das Web im neuen Gewand

I

Gleicher Ansatz im anderen Kontext: Die Such maschine Google,
die in wenigen Jahren eine Revolut ion im Auffinden von Webinhalte n herbeigetuhrt hat, basiert auf der Idee, die angezeigten
Suchergebnisse unter anderem von den Empfehlungen der Seitenbetreiber abhängig zu machen. Das Ergebnis, der berüchtigte
PageRank, analysiert nicht die Webdokumente selbst, sondern
ihre Erwähnung im Web. Er benutzt somit die Intelligenz der
Webnutzer, die bei jede r Suchan frage du rch ihre Klicks en tscheiden, ob ein Ergebnis für sie relevan t ist oder nicht.
Kunden, die diesen At"t ikel oek.'lu(t h~ben, K.:Iuften

~uch:

MII'' 'l!nIR q PW l D ~D ~ EOII)' Pu ,o .. lc ... io-~ " n 1>10«.
Mi "? ' . e ~ pno, s \r. ~ , p" f ",l, mRi V\lV - :II>.I<n n.",.,.. 1N• .,.."
" ..... s. , VI'[) - Tom C""u IC_
~

\I _

..",I1 ~ Artik,,1

~ nt d . dYt !)

.. Abbildung ,.17
Amazon bietet Produkte an, die
von potenziell gleichgeSinnten
Kunden gekauft wurden.

W~t"

on Do"
,

~

(" ) l!lI<J.!

,,\

Auch das Dnl ine-Kaufhaus Amazon konnte sich durch eingebaute Empfehlungsangebote durchsetzen. Egal für welches Produkt oder Thema der Kunde sich interessiert - auf sämtli chen
Seit en des Port als findet man ,. beliebteste Produkte« und Empfehlungen von Kunden, die Ähnliches gesuch t , gefunden und
gekauft haben. Die typische Struktur eines Dnline-Shops auf der
Basis detaillierter Produkt beschreibungen hatte Amazon durch
Rezensionen und ein intensives Engagement der Nutzer erweitert. Die Nutzerbeteiligung macht das Angebot aus, und das
Angebot wiederum macht die verst ärkte Nutzung der Plattfo rm
aus. Die Verkaufszahlen von Amazon sprechen für sich .
Ethi k der I<oopt' ratio n I Eine weitere Nebenerscheinung, die
sich aus dem neuen Netzverständnis der Anwender ergeben hat,
ist die Ethik der Kooperation, die im Web eine Architektur der Partizipation entst ehen ließ . Diese zeichnet si ch dadurch aus, dass
Dnline-Dienste in der indirekten Komm un ikat ion der Netzwerkteilnehmer als Vermittler agieren, welche die Knoten des Net zwerks verbinden, die Ressourcen der Nutzer bündeln und diese
in einer weiterentwickelten Form wieder verfügbar machen. In
diesem Zusammenhang wird häufig vom Mehrwert durch Partizjpation gesprochen.
Im Web 2.0 gehen Webentwickler nach der Faustregel ,.Je
mehr Leute einen Dienst nutzen, desto besser wird das Produkt
und desto profitabler seine Weiterentwicklung«. Somit wird ein
besonderer Wert auf das aktive Mitwirken der Anwender gelegt,
die durch die freie Verfügbarkeit der Dienste zur Teilnahme an imiert werden.

1.2

Neue Möglichkeiten und neue Konzepte

I

45

Abbildung 1.18 l'
Die Archi tektur des SourceForgeProJekts , das über 1.900.000
registrierte Nutzer vorweisen
kann

1.2.4
Open-Sou(ce- Bewegung und offene Technologien
Einer der Aspekte, welcher die Web 2.0-Bewegung aus der Sicht
eines Webentwicklers arn stärksten prägt, ist die aktive OpenSource-Bewegung mit ihren zahlreichen Möglichkeiten.
Offene Personal -Publishing-Systeme wie Weblogs und Wikis
lassen jeden Nutzer ohne fundierte Programmierkenntnisse beliebige Inhalte schnell publizieren und verbreiten. Frei verfügbare
Datenfo rm ate lassen sich ohne Weiteres auf unterschiedli che
Geräte übertragen und implementieren, sodass neue plattformunabhängige Applikationen entstehen können . Außerdem werden Informationen stärker von den Anwendungen get rennt, die
sie benutzen, und häufiger als Open Data zur Verfügung gestell t.
die von jedem Entwickler benutzt werden können.
Bei Sourcejorge.net, dem Rückgrat der Open-Source-Gemeinschaft, wo jeder ein Projekt hinzufügen und Quelltex'te herunterladen und benutzen kann. findet man zurzeit über 185.000
Open-Source-Projekte. Neue Ideen werden durch eine gemeinsame Zusammenarbeit realisiert, zum l aufen gebracht und verbreitet - und dies kostenlos und für alle. Die Entwickler arbeiten
daran. der Öffentlichkeit vernünftige Alternativen zu kommerziellen Produkt en anzubieten.
So stammen die wesentlichen Komponenten der InternetInfrastruktur - darunter Unux, Apa che, MySQL, Perl, PHP und
Python -aus der Open-Source-Bewegung und wurden über Jahre
gemeinsam von Programmierern aus der ganzen Welt öffentlich
entwickelt.

r-------- RfIJ. r_ PrrJt«;I St~ & SI.."r.,.
(1auN.~, A~ & Mn)
\. • S".I'olde MeI1ic5 & RMpcxting
(

r

I'nofK1 Tool.

C/J~ T.-II/'
(1I'IIfIgmIed _ """'*"'0 SCM

-,

• Common Vifw ...

Hltr_ _ _ _ • ToaiJ

....

· 0:>1: .......... 101_
• 0i1WlWl Fot\.mi & HwWl
• MaiIi'lp t.JrA

• F. ,..,..,. Sysr.m

r--- - - - - ,

t

• Sean Aeo8M CtWrd&
• ~~ 'MIiI<lbo'~

1...........bIIM'

• ~PI'Qr«lfJnd~
· ~~E.pknr

• sortw.w, CCrtI/igIIrae'<ln

, Manaosrr-r Sr_
~&

A_~~,

•

Optimizing Distributed Devek>pment '

Das Web im neuen Gewand

OpettAPI(SOAP~~)

)

)

SOURCER. RGE·
1

(/III;tJdit1q

""rOlhflf sa.o

• /OEs

& NoIoIicMJOfI

46

I

• Tradt.,.~
• TQ/lAA~

.'0(:"... Controflo 1

' T,«,,~Il"~

)

• /.wie &

Innovative Web Services

I Neue,

offene APls ermöglichen den
Zugriff auf die global gesammelt en Daten, die auf den SeNern
großer Online-Konzerne gespeichert und ständig akt ualisiert werden. Die Offenheit der Daten liefert Webentwicklern neue technologische Möglichkeiten zur Gest al t ung interaktiver Webauftri tte mit dynamischen Inhalten bereit.
Verschiedenste Online-Inhalt e lassen sich im Web 2.0 beliebig
verm ischen, in neue Fo rmen bringen und automatisch darstellen.
Demzufolge entstehen sogenannte Ma5hup5 - Webseiten, die
Inhalte aus versch iedenen im Internet verfügbaren Datenquellen zusammenfügen und miteinander ve rknüpfen. Anschauliche
Beispiele dafür sind Wikimapia und Plaeeopedia. Zwei Projekte,
die Funktionalitäten von Google Maps und Wikipedia vereinigen,
mit dem Ziel, sä mtliche Plätze auf der Erde mit Referenzen zu
entsprechenden Wikipedia-Ein t rägen zu versehen.
Aber auch Gelegenhei ts-Blogger können sich die Offenhei t
von Datenbeständen zunutze machen. So lassen sich populä re
lesezeichen bei Deliäou5, beliebte Musikstücke bei La5t.FM,
akt uelle Neuigkeiten bei Digg und kürzlich abgelegte Bilder bei
Flieh über entsprechende APls dynamisch anzeigen.

FUCKER nME

I

.... Abbildung

1.19

APls zum Weiteren t wickeln : Flicker Time aktualisiert Daten, d ie
über die Flickr-API geladen und
sekündlich aktualisiert werden
(linkcode 012).

...

U:l· "0):,1 11;1'

~_

Die Bereitstellung von APls ist zwar keine Neuemndung des
Web 2.0, doch die Komplexi tät und Unbest ändigkei t, die man
aus früheren Schnittstellen - wie etwa bei Microsoft Office kannte, werden im neuen Web durch einfache, flexible und leicht
zu bedienende Interfaces ersetzt. Somit können Webentwickler
im neuen Web auf exist ierenden Dat enbest änden aufbauen und
diese weit erentwickeln. Und davon gibt es jetzt schon mehr als
genug. Mitt lerweile stellen neben Google auch Yahoo!, Amazon,
eBay sowie die BBC ihre Sch nittstellen großzüg ig zur Verfügung.
1.2

..

~

...

-

[A P1J
Appl/cat/on Programm/ng Inter/aces
sind Schnittstellen zur Anwen dungsprogrammierung, die von
einem System anderen Programmen zur verfugurg gestellt werden , um einen Zugang zu dem
System und den darauf abgelegten Daten zu ermöglichen.

Neue Möglichkeit en und neue Kon2epte

I 47

1.2.5

Der Nutzer als Co-Entwickler
Web 2.0 weist eine neue Dyna~
mik der Software-Entw icklung
au f : Permanentes Beta-Testing
eröffnet Entw icklern die Möglic hkeit, neue Opt ionen täglic h
mithilfe eines großen Publikum s
zu t est en.

... Abbildung 1.10
Swabba ist eine deutsche
Web 2.0-Platt form zum Austausch von DVDs, (Os, Büchern,
Computerspielen, Sammelkarten,
Briefmarken um.

48

I

The Perpetual Beta

Es ist scho n ironisch, dass Web 2.0 einen Aspekt andeu t et, der
durch moderne Webapplikationen gerade zurückgedrängt und
abgelöst wird. Die aus der Software-Entwicklung traditionsgemäß
gepflegte Versionsnummerierung gilt in Web 2.0 als überflüssig
und inkonsistent. Die Ursache liegt darin, dass bei webbasierten Applikationen eine ganz andere Dynamik der Software-Entw ickl ung besteh t , als dies bei der Entwicklung typischer Desktop-Anwendungen der Fall ist. Der übliche Lebenszyklus von
Desktop -Anwendungen verwandelt sich im Web zu einem permanenten Beta-Test , an dem Millionen von Anwendern bewusst
ode r unbewusst teilneh men.
So werden Web 2.0-Applikationen permanent mit neuen Funkt ionen ausgestattet, verändert, neu veröffentlicht und öffentlich
beurteilt. Kleinste Veränderungen der Benutzeroberfläche sorgen
bei einem Millionenpublikum für ein aufschlussreiches Feedback.
das in wenigen Stunden nach der Neuveröffent lichung berei ts
analysiert werden kann.
Als M aßstab fü r den Erfolg einer getesteten Funktion dient
dabei nicht nur die eigent liche Rückmeldung der Anwender,
sondern vielmehr deren Echtzeitverhalten und ihr Umgang mi t
den neuen Funktionen des Dienst es. Wer mit seinem Mauszeiger
durch eine Seite irrt, liefert einem Entwickler eine klare Bot schaft,
die auf event uelle Usability-Mängel der Anwendung hinweist.
Ganz im Sinne der Open-Source-Bewegung werden neue Versionen möglichst f rüh und möglichst oft veröffentlicht und getestet. Nutzer werden zu Mi tentwicklern, die häufig genauer als
die Entwickler selbst wissen, was die Software können soll und
welche Features verbessert werden sollt en.
Dies ist eine r von vielen Vorteilen der ewigen Beta-Version ,
die es erlaubt, die Funktionalität einer Anwendung täglich zu verbessern, neue Prakti ken auszuprobieren und f rische Ideen sofort
umzusetzen.
Diese Vorgehensweise ist typisch für moderne Webapplikationen. Die meisten Anwendungen von Google genießen ihren
Beta -Status seit Jahren. Flickr fügt neue Funktionen manchmal
innerhalb einer halben Stunde hinzu; bei Digg werden Werkzeuge
aus Digg Labs wöchent lich erweitert, und bei sozialen Netzwerken
we rden neue Optionen mehrmals pro Monat hinzugefügt. Diese
Tendenzen lassen von einem fundamentalen Übergang von der
Software als Artefakt zur Software als Dienst leist ung sprechen,
die nich t nur täglich angepasst werden kann, sondern t eilweise
auch angepasst werde n muss. Beispie lsweise um konkurrenzfähig zu bleiben und die Qualität des Angebots (etwa die GoogleSuchergebnisse) zu sichern.

1 Das Web im neuen Gewand

I

Als Nebeneffekt entfallt beim Benutzer die Notwendigkeit, sich
rechtzeitig um Software-Updat es zu kümmern. Dies geschieht im
Web automat isch, oft oh ne dass man etwas davon merkt . Hinzu
kommt die Möglichkeit, die Anwendung im eigenen Interesse und somit im Interesse aller Anwender - mitzugestalten und seinen persönlichen Bedürfnissen anzupassen.

1.2.6
Einfachheit und Minimalismus
Ein Phänomen, das man sowohl in der Webseitengestattung als
auch bei modernen Webanwendu ngen beobach t en kan n, ist das
Bestreben, die Nutzer durch schlichte, einfache oder gar minimal istische Ansä tze zu überzeugen. Ein Anwender, der sich in
einem mobilen Web bewegt und mehrere A ufgaben gleichzeit ig erledigt , soll von Webdienst en schnell und effizien t bedient
werden. Daraus ergibt sich die ElWartung, Web Services als einfache Werkzeuge benutzen zu können. Komplexe mult ifunkt ionale lösungen werden demzufolge vereinfacht , aufget eilt , in
einem schlichten look aufbereit et und als kleinere Dienste neu
ve röffen tl ich t . Oder sie geben den Weg gleich frei fü r innovat ive
Ideen, die häufig keine Geniestreiche sind, sondern sich aus alltäglichen Problemen oder Aufgaben ergeben.

- - ,-,-..,-

-_
...-_._-------_
......
--.
_....--<
... _-_
"""'"
--- .. _. ---_.

Workwell.

1IHQm.

.....

0...1 mllIoII peopIIlnd lIUIinBIa
;;a,lItIomtoaet

UM _ _ ebb.!d

....,..tt....,,-r.

' _ _ d"' _ _ .. _ ... _

.-.

We llim kIr tlwlOllw_ _ spot;

h

Deport. ~ procb:ts t.... do IUSt
...Nt )'GU need and noihIn& I'OOdon't.

-_
-_--.--_
""_._..._._-_

'00001 ............... _ ·

mm

....-......

.....

... _ _ _ ..... _ , ..

_-_ . - ~ -~-_

-_ .~

_

........... .......

_.._--...-

....I '

...

I

...

• Abbildung 1.21
Der Erfolg des kleinen Software·
Teams 37slgnals .com ist insbesondere durch die Einfachheit seiner
Produkte möglich geworden. Das
Team entw ickelt Anwendunge n.
die e:d rem einfach zu bediene n
sind. Ihre Populari tät spiegelt sich
In Zahlen : Basecamp, Backpack,
Campfire und Hlghrlse werden
täglich von ober ei ner Million
Me nschen weltweit verwendet.

Das neue Web reduziert die Komplexi tät von On line- Diensten
und beeindruckt durch einfache und bequeme Konzepte, die
eben aus diesem Grunde sch nell an Populari tät gewinnen. So
hat sich R55 (Real/y 5imple 5yndication) aufgrund seiner Einfachheit zu der im Web 2.0 am häufigsten benutzten Technologie
entwickelt. Die simple Idee, neue Inhalte einer Seit e dynamisch
im XMl-f ormat zu codieren und im Netz zugänglich zu machen,
wird von Blaggern u nd Unt ernehmen in gleichem Maße velWendet wie von renommierten Nachrichtendiensten und sozialen
Netzwerken.
1. .2

Neue Möglichkeiten und neue Konzept e

I 49

A Abbildun g 1.22
RSS - Really Simple Syndlcation.
Ein RSS-kon muss nicht langweilig sein. Oben: Standard-Icon,
unten: kreatives DeSign eines
Künstle~. (hllp://www.smashingmagaz ine .com/2008/04/01/fres hfree-an d -gorgeou s-~sfeed -ieansl
linkeode 013)

Das Grundprinzip von RSS weiß durch seine Einfachheit zu beeindrucken: Abonniert der An wender die Angebote seiner Wahl über
einen RSS-Reade r, '>0 werden Informationen aus verschiedenen
Quellen regelmäßig auf Aktualisierungen hin überprüft, in einen
Informationsstrom gebündelt und ihm in einer kompakten Übersieht präsentiert. Somit wird man für jedes Abonnement bei einer
jeden Änderung live darüber informiert, was in der Webumgebung ge rade passie rt. De r passende Begriff fUr diese E~ chei nung
ist Live Web.
RSS macht es für En twickler einfacher als je zuvor, auf die
Dat en aus verschiedenst en Webquellen direkt zuzugreifen und
diese in eine Sei te zu integrieren. Und Webnu tze r brauchen sich
nicht mehr auf der Suche nach neuen I nhalten von einer Seite zur
anderen zu hangeln. Diese werden automat isch zugestellt und
können offline gelesen werden.
Angelehnt an das Konzept des Minimalismus entwickeln Webprogrammierer die Lightweight Programming Models (LPM), lei chtgewichtige Programmieransätze, die häufig ohne tiefen Einblick
in die begleitende Dokumentation umgesetzt werden können.
Dabei gilt Google mi t sei nen A Pls als Vorreiter der l PMs. Dievom
Un ternehmen ausgelieferten Modelle gehören zu den beliebtesten
Schnittstellen der Entwickler-Community, da sie von unerfahrenen
Nutzern genauso wie von Webgurus benutzt werden können.
Neue Applikationen und Techniken werden nieht mehr an ein
best immt es System gebunden, sondern sind zum Te il abgekoppel t von sämtlichen Implement ie rungen. Die Ba rrie ren zur WiedeNerwendung und zum Umbau von Applikationen werden im
Web 2.0 nach Mögl ichkeit verm ieden und du rch das Bereitstellen
flexibler Zugriffsmöglichkeiten zukunftsfähig gemacht . Schließlich
gelangen offene Techno logien häufiger ins Blickfeld von Entwicklern, die sich diese gerne zunutze machen . Dies geschieht ganz
nach dem von O'Reilly aufgestellten Postul at : . Die erfolgreichsten
Web Services sind diejenigen, die sich leicht in Rich t ungen weiterentwickeln lassen, an die der ursprüngliche Erfinder gar nicht
gedacht hat.« Wer also seine Technologien zukunftsfähig machen
möchte, setzt auf klar strukturierte, kompakte und einfa che
lösungen, stellt diese frei zur Verfügung und warte t geduldig ab.

1.2.7
Webkultur 2.0
Das neue Web bietet Vorteile für jeden, der seine bisherige Anonymität einer direkten und ernst haften Kommunikation preisgibt. Anwender mit einem teeren oder fiktiven Profil und einem
fragwu rd igen Benu tzernamen haben in der offenen Net Z8emeinschaft keine Chance, (reale) Kontakte zu finden und ihr sogenannt es soziales Kapital zu erhöhen.
50

I

1 Das Web im neuen Gewand

Das soziale Kapital bezieht sich üblicherweise au f die Aktivitäten
der Anwender und die Anzahl der geknüpften Kontakte und soll
ein Kriterium für die Popularität bzw. den Erfolg eines Nutzers
sein. Wer sich durch aktive und engagierte Teilnahme, etwa Hilfsbereitschaft, auszeichnet, wird respektiert und mit einer positiven Bewertung belohnt. Ein guter Ruf liefert somi t - wegen der
Authentizität der Teilnehmer - auch Vorteile in der Realität.
Und so ist die Sammlung des sozialen Kapitals in der neuen
Webkultur kein neues Spiel, in dem es vor allem um Selbstbehauptung geht. Stattdessen ist das soziale Kapital zu einem wertvollen Inst rument geworden, mit dem sich Kontakte knüpfen
und KarrieremögJichkeiten entdecken lassen.
Soziale Netzwerke I SociaJ Networking sorgt im Web 2.0 für
eine tiefgreifende Vernetzung von Inhalten und Menschen.
Waren die Benutzer populärer Foren und Board-Communities
noch vor wenigen Jahren bei der Suche nach neuen Bekanntschaften auf da s eigene Engagement angewiesen, so kommt in
sozialen Netzwerken die Kunst des Verlinkens massiv zum Tragen .
Sämt liche Daten der Benutzer werden untereinander verlinkt.
Informationen werden zu einem Mittel, mit dem man Gleichgesinnte auf der Grundlage beliebiger Suchschemata zusammenführen kann.
Um dies zu gewährleisten, greift man auf Grundprinzipien der
Fofksoflomy zurück und verschlagwortet Daten durch automatisch
generierte Tags und Schlüsselwörter. Der Endanwender muss
sich dabei über die untere Schicht der Plattform keine Gedanken
machen und soll sich lediglich auf seine aktive Teilnahme konzentrieren.
Und in der Tat - wer von sozialen Netzwerken profitieren
will, muss selbst aktiv werden. Denn im Unterschied zu üblichen
Technologien wie Online -Banking oder E-Commerce hat man es
bei Social Networking mit einem grundlegend anderen OnlineAngebot zu tun, das erst erlernt und verstanden werden muss.
Was nach viel Anstrengung klingt, w ird schnell zu einer Lieblingsbeschäftigung, weil der resultierende Effekt unmittelbar
nach dem Einstieg in die sogenannten virtuellen Zirkel deut lich
wird und schon bald seine ersten Früchte zeigt.
Das K leine-Welt-Ph änomen I Die offene Online-Plattform XING,
mit mittlerweile mehr als sechs Millionen registrierten Mitgliedern aus über 200 Ländern, kann dabei als ein Musterbeispiel
für ein effizientes und erfolgreiches soziales Netzv..ter k angeführt
werden. Der Open Business Club führt Geschäftsleute aus ver-

1.1

I
Vom Blog zum Job
Ein guter Ruf im Web kann auch
in der Realit.'it vorteilhaft sein .
50 sind viele Nachrichtenmedien, die mittlerweHe über Blags
verfügen, ständig auf der Suche
nach guten Bloggem.

[Vemetzung zweiter Ord nungl
Die Vernetzung geschieht global
und hat Auswirkungen für jeden,
der an einem sozialen Netzwerk
teilnimmt. Man spricht auch von
der Vernetzung zweiter Ordnung.

.,. • Ab bildung 1.2]
Soziales Kapital im sozialen Netzwerk linkedin. com. Wer mehr
Empfehlungen und Verbindungen
online hat, hat auch Vorteile in
der Realität - au f seinem Konto
oder in seinem Adressbuch.

XING'

openBC

• Ab bildung 1. 24
Die Business-Plattform XING

Neue Möglichkeit en und neue Konzepte

I

51

Aufmerksamkeit durch
Aktivitat

schiedensten Bereichen zusammen und steUt eine praktische
Möglichkeit zum Knüpfen neuer Geschäftskontakt e dar.

Der Erfolg in einem sozialen
Netzwerk hängt nur vom An-wender selbs t ab. Wer akt iv ist
und gerne hilft, wird im Web 2.0
bemerkt und angesprochen.

Fällt ein Profil auf, so wird die entsprechende Person möglicherweise zu den eigenen Kontakten hinzugefügt und im Hinblick auf zukünftige Projekte wahrgenommen . Nicht verwunderli ch also, dass das Projekt zum Werkzeug vieler Freiberufler und
Selbst standigen geworden ist, die permanent auf der Suche nach
neuen Kunden oder Auftraggebern sind.
Die Grundi dee der Vernetzung wird bei X/NG durch das über
Jahre aufgebaute Kontaktnetz deutlich, Der Anwender kann ni cht
nur direkt verfolgen, welchen Freundeskreis und welche Interessen seine Bekan nten haben, sondern auch, in welcher Beziehung
er zu anderen Nutzern steht. So lässt sich bei den meisten sozialen Diensten abfragen, über wie viele »Ecken«, also über wie

PANDORA:
Can vou help me discov
.... Ab bildung 1.25
Pandora trat aus dem Mus!c
Genome Project hervor. Der
kostenlose Dienst spielt Musik
nach Ihren Vorgaben ab.

viele Mitglieder des Netzwerks, ein Teilnehmer andere Teilnehmer kennt. Diese Funktion alitat ist nicht neu und basiert auf dem
Kleine-Welt-Phänomen, welches besagt, dass jeder auf der Welt
mit jedem anderen Ober eine erstaunlich kurze Kette (sechs bis
sieben Glieder) von Bekannt schaftsbeziehungen verbunden ist.
Im soz ialen Netzv.lerk st eht jeder in einer Verbind ung mit einem
anderen Teilnehmer. Dies öffnet verlockende Perspektiven für
interessante Bekanntschaft en, denn ein soziales Netzwerk beinhaltet mei stens auch typische Community-Feat ures wie Foren
und Teilnehmergruppen.
Auf diese Weise entsteht eine Vielzahl von spez iellen, themenbezogenen Netzwerken innerhalb eines Netzwerks.
Humani sierung des Netze s I Eine treffende Bezeichnung für
diese Entwicklunge n liefert der Begriff Humanisierung des Netzes,

..,""'..
.=-------:;;._;- _::::.:;- -:.;-.:
~-----_._- ----

:'::__iF---=---=-'

.. Abbildun g 1.26
Durch neue Uzenzvereinbarungen
und gesetzliche Einschränkungen
ist die Zukunft der kostenlosen
Online-Radiosender wie Pandora
oder LastFM unsicher geworden.
So sendet Pandora seit Mitte
2006 nur in den USA , europäische Nutzer erhal ten eine entsprechende Nachricht.

52

I

1

der genau das anspricht , was die meisten Benutze r im Web 2.0
unbewusst tun : Sie machen das Web menschlicher und persönli cher,
So stellen Online-Dienste wie Pandora, Last.FM oder Grooveshark.com eine Musikplattform bereit, die für jeden einzelnen
Benutzer einen persönlichen »Radioc-Sender einri chtet und in
Abhängigkeit von seinen musikalischen Vorlieben (Lieder, Künstler, Musikrichtung usw.) die passenden Stücke aus einer OnlineBibliothek abspielt. Gefällt dem Benutzer ein lied nicht , so gibt er
eine negative Empfehlung ab, und das System sucht ein anderes
lied aus, das dem Geschmack des Anwenders vielleicht eher
en tsprich t. Wird ein Song allerdings positiv bewertet, kann dies
even tuell auch für andere Benutzer mit ähnlichen Musikvorlieben
in teressant sein . .. We r dies hö rt, hört gerne auch dieses« ist das
Grundprinzip der Plattform. Über seine Lieblingslieder kann man
auch glei ch in einer Fan -Ecke des Dienstes diskutieren .

Das Web im neuen Gewand

---

- --

--

-==
_""--. ......-------.._--.-..-.

~ Groov~hillk

I

• Abbildung \. 2]
Grooveshark .com vereint ein
soziales Netzwerk mit einem
Musik-Dienst und bietet beide
unter einer Desldop-ahnlichen
8enutzeroberflache an .

Ii> Groove~h~r"'"

_.-

Ähnlich wie beim Online-Händler Amazon basiert die Auswahl
der Songs zum großen Teil auf dem Empfehlungsprinzip. Neu
bei Musik-Diensten ist jedoch, dass sie auch abgelegte Plattensammlungen jedes einzelnen Benutzers zu Rate ziehen und Jede
Sekunde aktualisiert werden.

Äußerst interessant dabei ist die Tatsache, dass auch bei diesem Online-Modell die Folksonomy ihren Dienst meisterhaft
leistet. LastFM-Nutzer können beispielsweise Tags eingeben
und verteilen, die keine Musikrichtung, sondern nur bestimmte

Eigenschaften der lieder beschreiben.

_.
.-......-_ 'u....

~ " ~ ·~Ill.l!l&i!JWl

_ ...... b

-

~-

--------

• • H

_._._----._-

h<:)
.. Abbildung 1.29
Las l.FM -" The Social Media
Revol ution.

Tags

.-.-.-.
.-._.--.--

-

• a

~r....._, }~~~

fIIooIl ........

.. Abbild ung 1.28
Last.FM spielt Musik live - ganz
nach Ihren Vorlieben.

•

t-.,._
-~

1_''''

,._-,,,,,,.,
.- ~

.. Abbildung 1.30
Die Suche nach dem Tag "groolI)'''
liefert Links auf " Radiosender.,
die lieder abspielen, welche
Benutzer mit einem Tag verschlagwortet haben.
1.2 Neue Möglichkeiten und neue Konzepte

53

Die Ergebnisse bei der Suche nach solchen Schlüsselwörtern
sind zum Teil genauso beeindruckend wie bei einem echten
Musikgeschäft. Durch kollektive Intelligenz erhalten Webdienste
Eigenschaften, die man in der Regel nur von Menschen erwarten würde. Dies macht das " humanisiertet: Netz aus. Denn darin
werden nicht nur geschäft liche Kontakte und Musiktitel, sondern
beispielsweise auch Bücher «(hain Reading, What Should I Read
Next?), Filme, Rezepte und persönliche Ziele rund um die Uhr
empfohlen und weitergegeben.

[ Chain Reading

Abbildung 1. ) ' .Bei (hain Reading (chainreading.
com) und What Should I Read
NeKt7 (wha tshouldireadnext.
com) und Librarious (Lib.rario.us)
empfehlen Anwender ihre liebIingsbOcher.

" IIJhat should Iread neid?
Menschliche Informationsfilter

Abbildung 1.)2 '"
Der Social-Bookmark-Manager
Delicious (http ://www.delicious.
com, Linkcode 014) Ist einer
der ersten Dnline-Dienste, die
vollstdndig auf dem Konzept des
Taggings basieren und Nutzer die
populärsten Inhalte selbst bestimmen lassen. Diese landen auf der
Startseite des Dienstes.

I Auch

Hunderte weiterer sozi -

aler Dienste setzen im neuen Web auf das Empfehlungsprinzip,
darunter populäre Social-Bookmarking-Dienste wie Oe/iäoU5
(vgl. Abbildung 1.32), Furl oder StumbleUpon, bei denen man
seine lesezeichen bequem ablegen und veröffentfichen kann .
Meistens sind dies nützli che Beiträge und Seiten, die durch
reines Stöbern in Google-Ergebnislisten entdeckt wurden. Da
die Anwender auf ihre lesezeichen aber immer schnell zugreifen wollen, verteilen sie großzügig sinnverwandte Tags und Keywords, die nachher als Anhaltspunkte für das Wiederfinden der
Inhalte benutzt werden können.

---'11
dell~ loU1l

_..__ --

.... ... -

..

Ii

il

de

.

....

p.IIc .... o\gOI_

I

1

--

11

'--._'--'-_~I"'."'-'--

.-------54

,

-

...
_ _ _0
r "'_~_"

"" "" ....

===~ o

eo-"

______"

n

_._-_

Das Web im neuen Gewand

.......

-

..•

~--_-.-

---'-

-_. _-. --

...... ---•

---.--_•.

11

-

i

-

Eben diese Tags stellen eine Fundgrube für Benutzer da r, die nach
mehr oder weniger allgemein bekannten Informat ionen suchen.
Gängige Suchrnaschi nen liefern bei allgemeinen Such begriffen
auch allgemeine Ergebnisse. We r also bei Deliäous ein Schlüsselwort eingibt, gelangt schneller zu besseren Ergebnissen, weil
Tausende von andere n Benutzern diese Suchergebnisse bereits
besucht und bewertet haben. Als Nebeneffekt können vom Tagging aber auch alle profi tieren , die interessante Inhalte zu einem
Ueblingsthema nicht verpassen wollen. So kann man zum Beispiel bei Deliäolls RSS- Fee ds von beliebigen Tags abonnieren.
Sollt e eine Sei t e von mehreren Benutzern verschlagwortet sein,
wird man Ober RSS sofort darube r benachrich t igt .
Das ..Teilen oc von Lesezeichen mit ande ren Nutzern der Community sowie die Möglichkeit , eigene Netzwerke und Gruppen
inner halb der Plattform zu bilden, kann unter .:mderem als kreat ive Inspirat ionsquelle und effizientes Nachschlagewerk dienen.
Bl ogging I Unter einem Weblog (auch Blag oder Online-Journal
genannt) versteht man ein Mittel zu r dynamischen Publi kation
und Verbre itu ng beliebiger Webinhalte. Es ist eine moderne
Form einer offenen ode r anonymen Kommunikation mi t der
Außenwelt.
Das Inte resse der Seitenbetreiber an Blags warf die übli che
Vorst ellung von privaten Homepages über Bord, wurde aber von
den Anwendern schnell akzeptie rt . In Weblogs sah man häufig
lediglich eine elegante dynamische Alternative zu den ursprüngli ch statischen Webseiten. Die neuen Aspekte der 81088ingSoftware wurden meistens außer Acht gelassen. Dabei machen
gerade sie den Unterschied aus : Kommentare, Trackbacks, Permaflnks und RSS-Feeds sind die neLJen Erscheinungen, die unser
Netzverständnis grundsätzlich verändert und erweitert haben.
Persönliche Websei ten erhalten nicllt nur eine neue Gestalt,
sondern auch einen neuen konzeptionellen Hintergrund . Homepages sind zu fachlichen Notizblöcken geworden, auf denen man
seine Gedanken und Ideen vorstellt und Fragen zu beliebigen
Themen in den öffentlichen Raum stellt. Private Seiten rich ten
sich nicht mehr an einen bescheidenen Freundeskreis, sondern
an eine globale Leserschaft: beispielsweise an einen Kollegen in
China und einen Stud en ten in Mexiko, die beide im selben Augenblick über zwei ganz verschiedene Quellen auf einen Blog-Beitrag
au fmerksam werden und die Seite anschließend besuchen.
Die Aktualität der Daten, die Quali tät der Sprache der Beiträge
sowie Webd iskussionen der Leserschaft sind neue Kriterien, mit
denen sich die Popularität bzw. der Erfolg eines Online-Journals
bemessen lassen. Und der Erfolg lässt sich ganz bequem durch
1.2

I
5 oc ia 1- Bookma rks-M anage r
im Überblick

3spots sammelt aUe Dienste. die
Bookmarks ablegen, speichern
und verwalten {http://3spots.

blogspot.conV2006/01/ all5O(/al- tha (-ca n- book mark. html
(Unkcode 015). Sie werden
regelmäßig mit beglei tenden I nformationen - wie etwa Vorteile,
Nachteile und Popularität - erweitert und akt ualisiert.

lTrackbackJ

Trackback ist eine Funktion, über
die Blog-Betreiber Informationen
über Backlinks {etwa Reakti onen
oder Kom mentare} automatisch in
Webl ogs einbelten können.

TIPP
Die neuen M öglichkeiten sowie der Einfluss von Blogs. die
als .. Social Media_ (Text- und
Video-Blogs) bezeichnet und
oft als Konkurrenten zu kon ven ti onellen Medien angesehen
werden, werden in Kapitel 16,
. Weblogsc , ausführlich behandelt .

(Permalinkl

Permalink (Permam ent Unk) is t die
Bezeichnung für die Adressen von
Weblog-Bei trägen. Da sic h der
Inhalt eines Blogs permanent ver<l.ndert, verweist die URl der
Startseite immer auf unt erschiedliche Inhalte. über Permalinks
kann ein Beitrag dauerhaft verlinkt werden.

Neue Möglichkeiten und neue Konzept e

55

_
....... __ ...
_.-. ..........,----_
___--..........
__
_.........................
_. _......._-.- ... . ... _-- ..
__........
........_--_
-0._,_....._-_.
_..---...
--

"" ............. ....
_

~.

.... _ _ _

_

m _ _ .. " . .

....- .,

""

" -'--"'-~-

---. ..-....
... _.,,-v ...
_ , ._,,_ ....
-...~

~

~-

... .. ..,.."... ..-..
,.,~

'wo'"_' ~ _T

~

Abbildun g 1.33
Trackbacks schön und übersichtlich. Im Blag von Grafik-Deslgnerin Manuela Hoffmann (www.
pixelgraphix.de, linkcode 016)
werde n Trackbacks automatisch
abgefangen, schön au fbereitet
und dargestellt.
.t..

das Einblenden 'Ion unaufdringlichen Werbeanzeigen (etwa
GoogleAdSense) in Geld umsetzen.
Erfolgreiche Applikationen und On li ne-Plattformen basieren
auf innoyatiyen Inhalten, die auf der Welle aktueller Ereignisse
geschrieben und yeröffentlicht werden. Im Fall der 810gging Szene heißt das, einzigart ige, frische Ideen und nützliche oder
auch ungewöhnliche Inhalte regelmäßig zu publizieren. Eine
kompetente Meinungzu einem bekannten Sachye rhalt zu äußern ,
stellt in der Regel eine Inyestition 'Ion wenigen Minuten dar.
Und genau hier komm t das wachsende gegenseitige Vertrauen
der Autoren und Leser ins Spiel. Daraus, dass die BIogger übe r ihre
Online-Journ ale direkte Diskussionen mit ihrem Publikum fUhren und ihre Reputation immer bestätigen müssen, resultiert die
Notwendigkeit, glaubwürdige und handyerlesene Informationen
zu präsentieren . Schli eßlich wollen sie der Erwartung anspruchsyoller Leser gerecht werden und ihre Leserschaft aufrechterhalten. Die Leser ihrerseits entdecken im Blag wissenswerte Beiträge
und können durch permanentes Verfolgen und Bewerten neuer
Inhalte das Vertrauen zum Blog-Betreiber entwi ckeln.
Die menschliche Komponente des Web 2.0 kommt somit insbesondere bei Blogs intensiY zum Tr<l8en und bekräftigt die These.
dass globale Vernetzung ni cht nur durch das Anwenden sozialer
Dienste, sondern größt enteils auch durch yerstärkte Beziehungen
zwischen Web 2.0-Akteuren zustande kommt.
lifest rea ming I Mit der zunehmenden Fortentwicklung und
wachsenden Popularätlt mobiler Geräte gewinn t das M iteinander
'Ion Nutzern in Web 2.0 eine neue soziale Dimension . Robuste
mobile Gerä te der neuen Generat ion wie etwa iPhone haben es
gescha fft, Nutzern ein benutzerfreundliches Su rfen mit sch neller Internet-Anbindung (UM TS), akzeptabler Servicequali tät und
(meh r oder weniger) yernünftigen Preisen anzubieten . Damit ist
die mobile Nutzung des Webs. das Mobile Web, für Anwender
erstmals zu einer realistischen Option gewo rd en.
Genauer bedeutet dies, dass Endnutzer nun permanent online
sein können. Zuhause mit einem lokalen pe, im Büro mit einem
Laptop und unterwegs mit einem SmartPhone oder einem PDA .
Die Anwender sind nicht nur für andere Nutzer erreichbar, sie
yerfügen auch über die Möglichkeit , das Web überall komfortabel zu nutzen .
Und genau dies macht den Weg frei für einen neuen sozialen
Aspekt, der sich im Web sei t Ende 2007 unter dem Begri ff Ufe5treaming etabliert hat. Daru nter yersteht man die Veröffen tlichung und Aufbereitung 'Ion Daten, die weniger mit fachspezifischen Inhalten zu tun haben, sondern sich mit dem priyaten

56

I

1 Das Web im neuen Gewand

I

und geschäft lichen Umfeld der Nutzer beschäftigen, also dem,
was der Nutzer, seine Freunde und Kollegen im laufe eines Tages
t un und erleben.
Beispielha ft dafür sind Dnline-Dienste Twitter (http ://
twi tter.com, Unkcode 0 17) und Plurk (http://www.plurk.co m.
Unkeode 018). Beide helfen Nutzern dabei, kleine alltägliche
Augenblicke online zu erfassen und Freunden, Bekannten oder
au ch Unbekannten auto matisch mitzuteilen.
Wer etwa gerade ein Abendessen vorberei tet oder einkaufen
geht, wird seine Freunde nicht un bedingt anrufen, um dies mitzu teilen. Auch wird man zum selben Zweck keine E-Mails verschicken oder einen ausfGhrlichen Blag-Beit rag ve rfassen. Dadurch
gehen kleine Details unseres Lebens verloren, die nun mit den
neLlen Lifestreaming-Diensten festgehal ten werd en können.
Bei solc hen Diensten ve rsendet man regelmäßig kostenlose
Kurznachrichten an den Server (v ia Instant Messanger, E-Mail
ode r SMS), und der Server veröffentlicht die Nachrichten automat isch auf dem Mini-Blag des Benutzers. Freunde und Bekannt e
können diese Kurznachrichten im Blag lesen oder mi ttels Slv"\S,
RSS oder E-Mail abonnieren . Somit wird das Persönliche und Prjvate stärker und umfassender in den Vordergrund gerü ckt. Für
viele Nutzer ist dies ein nicht zu unterschätzendes Mittel, mit
dem sie intensiven Kontakt mit Freunden und Bekannten pflegen
können. Derzeit wird TWltter von über zwei Millionen Nutzern
weltweit benutzt - Tendenz steigend .

--

twil:l:er

y

-----

_ .-

He)'
tI-.er.1
using
1_
••
_ _th.realburgo
_ ........... _ il
.. _
_TWltler.
__

.. _""'-. .... __ 10_.--.

_...,..._.. -..._. -...-_._...--------,
.
.
.
.
.
.....
._
..
..
-_._..
=
'..-......-..--_.....
--__.. -- .'
......_.---_..-......_.

.B

...-_ .......

therealburgo

.. Abbildung 1.]4
Twitter in GroßaufMhme.
Freunde nutzen Twi tter, um
über kleine aUUgliche Dinge d es
Lebens Informiert zu werden .
GroSe Unternehmen wie Cisco
Systems, Deli und Comcast nutzen den Dienst. um ihre Kunden
über Neuigkeiten und Upda tes zu
Inform leren.

@elhel ..• (taken Irom http l/i •. vatldMq I

_-_
,--_ _---

01 f'oIO _ _ IOO_ot,_-.

_

_ _ _ _ D ........ - .• • _

=..

..

--------

"::=~.:::..:.."':..-:.

~

~

....

_::=.::=

Während bei Tw/Her sämtliche Kurznachrichten in einem MiniBlag präsentiert werden, werden sie bei Plurk in einer Timeline
l.Z

Neue Möglichkeiten und neue Konzepte

57

vi suell au fb erei tet . Zusätzli ch zu den übli chen Lifestream ingFeatu res kann Plurk soziale Netzw erke wie Facebook oder Flickr
auf Updates hin überprüfen und diese in die Timeline einfügen.
ohne dass der Nutzer dies dem Server explizit mitteilen muss.
Somit erhalten die Ben utzer von Plurk ein ausführliches Bild über
sämtliche Offline- und Online-Aktivitäten ihrer Freunde und
Bekannten.
- _ . _-~

011 - _ _ _ _ _ _ _ __. 1

•
.. Abbildung 1. 35
Ein life stream kann auch so
allSsehen. Jon YOfllfook hat
Sweetcroon (wININ.sweetcroon.
com linkcode 019) entwickelt.
eine Lifeslream -Blog-Software,
die sämtliche Aktitvi täten eines
Nutzers in verschiedenen sozialen
NetZ'Nerken automatisch aufbereitet und kompakt prAsentiert.

.. Abbildung 1.36
Sämt liche Online- und Offline -Aktivit.Hen werden be i Plurk in einer
Timeline visuell aufberei tet.
Au s der wachsenden Popu larität von Lifestreaming-Applikationen
resultiert eine neue soziale Dimension, die man in der Fachwel t
auch als eine weit ere .. Mikrodimension« der sozialen Vernetzung
bezeichnet.

• '1 _

_

1looOl_ "IIUJQvoro<

Dem On line-Benutze r geht es nun ni cht nur darum. ausfü hrliche Beiträge in sein em Blog zu publizieren. Im Zeitalter der
Mobilität sc hreibt man kurz und bO ndig: meis tens Ober das, was
man gerade tut. Egal ob dem Autor eine spannende Idee, ein
melancholisches Lied oder eine alte Bekann te einfallt. alles wird
direkt geschrieben, versendet und veröffentli cht. Sofern aUe Mitglieder eines Freundes- oder Bekan ntenkreis dies tun, en t steh t
so ein umfangrei cher Online-Bericht der Aktivitäten der Freunde
und Kollegen. Hierdurch lassen sic h beispielswei se gemeinsame

.. Abbildung 1.37
Auf einem Tumblelog sucht man
vergeblich nach ausführlichen BeitrAgen. Meistens sind dort links,
Bilder, Videos und Kurznachrich ten zu finden. Als Beispiel:
im.kevinrose (www.kevlnrose.
com . Unkcode 020).
58

1

Interessen entdecken ode r neue Geschäft sbeziehungen knü pfen .
Tumblelogs und M icroblogs (vgl. Abbildung 1.37) sind Paradebeispiele für diese Entwicklung . Dabei handelt es si ch um Blogs mi t
kurzen Beiträgen, die meistens aus reinen Links, Bildern, Videos
oder Kurznac hric hten bestehen. Einen ausführl ichen Kommentar.
eine Beschreibung oder eine Stellungnahme sucht man bei solchen Blogs vergeblich .

Das Web im neuen Gewand

I

Es ist fraglich, ob die intensive Nutzung von LifestreamingApplikationen von Dauer sein wird. Wer überall mitmacht und
seine Freunde permanent über seine Aktivitäten inform iert, läuft
Gefahr, seine Privatsphäre komplett der Öffentlichkeit preiszugeben, Ebenso setzt er sich dem Verdacht aus, nur des Publizierenswollens zu publizieren. Jemand, der über das Gemüt seiner
Lieblingskatze auf Twitter philosophiert, wird nicht unbedingt
ernstgenommen und muss mit verärgerten Reaktionen seines
Freundenkreises rechnen. Schließlich müssen seine Freunde und
Bekannten solche Na ch ri chten neben Dutzenden weiterer sogenannter Tweets täglich auf ihrem Handy oder in ihrem RSS-Reader lesen.
Das Web wird zum Aktiv- und Kreativraum I Der bereits angesprochene User Generated (on tent zeichnet sich insbesondere
durch beinahe unbegrenzte Möglichkeiten aus, die sich aus dem
akti ven Einsatz von Blogs, Wikis und sozialen Netzwerken ergeben, Im Mitmach-Web 2.0 wird es für den Benutzer mögli ch,
interessante Webinhalte schnell, bequem und einfach zu verwalten und fur die oben genannten Plattformen aufzubereiten. Werden diese Inhalte im Bloggewissenhaft veröffentlicht, so verbreiten sie sich im Sekundentakt in der ganzen Blogosphäre - häufig
ohne zu sätzliches Zutun des Autors .

_.
---

--_.

-

TAbbildung 1.38
Im Mitmach· Web 2.0 geht es um
die Kommunikation und Konversation. Dle~e finden auf zahlrei chen Ebenen statt, wie d ie~es
.Conversation Prlsm _ von Brian
Solls zeigt (httpJlwww.briansolis.
coml2008/0B/introduclngconv eßatlon-prlsm .hlml, linkcode 021)

..---

-

-

-

--

-1..2

Neue Möglichkeiten und neue Konzepte

I

59

T~1.~E

- - _........
You.

-

•

.. Abbildung 1.39
Das erneuerte Web ist offe ner
und per sönlic her. Nicht verwun-

derlich, dass das Time Magazine
den Online-N utzer zur Person des

Jahres gekürt hat.

---.. Abbildung 1.40
Google Notebook im Einsatz - ein

ko mpakt es und int uitives OnlineNo tiz b uc h, das Te>:: t e, Bilder, Verweise und Kommen tare speichert.
in hal te können so immer anline

nachgeschlagen werden.

60

I

Und weil moderne Technologien simple Möglichkei ten bereitstellen, um beliebige Inhal te zu publizieren, können diese auch
benut zt werden, um selbst produzierte In hal te der Ö ffentlich-

keit zur Schau zu stellen. Die Kreativität jedes Einzelnen ist im
Web 2.0 gefragt wie nie zuvor. Dies lässt sich beispielswei se aus
der explodierenden Anzahl hochgeladener Dateien bei Flickr
(Fünf M illionen neue Bilder und Filme pro Tag) und Videos bei
YouTube (im August 2008 verfUgte YouTube über 83 Millionen
Dateien) sowie Akt ivitäten bei Facebook (90 Millionen aktive
Nut zer) und Art ikeln bei Wikipedia (insgesamt 10 M iUioen Beit räge in 253 Sp rachen) ablesen. Die Aktivität en der Nutzer helfen
Web 2.0-Plattformen, t rau mhaft e Zugriffsraten zu verbuchen:
So kam YouTvbe Mitte 2008 auf 1,8 Milliarden Videoabrufe, und
MySpace erzielte 4,3 Milliarden Seitenaufrufe pro Tag .
Das Web wird bunt er und vielfäl t iger; die Nutzer werden
aktiver und kreat iver. Web 1.0-Konsumenten entwickeln sich zu
Web 2.0-Produzenten. Das Ergebnis ist eine neue Dimension der
Partizipat ion, die das Web zu einem Großlabor des Experimentierens und zu ei nem Schaupl atz f ür öffentliche Diskussione n werden lässt .
Konsequen te(\ll/eise verändern sich die Gewohnheiten un d das
Verhalten der Webnutzer. Der Nutzer surft nicht mehr gemütlich von einer Seite zur nächsten, Mobili tät und die Möglichkei t,
mehrere Aufgaben gleichzei t ig zu erledigen, erlauben es jedem,
von neuen Technologien int ensiv Gebrauch zu machen. So werden Dutzende verschiedener Online-Dienste permanent kombiniert und parallel benutzt: Die Google-Suche und Instant Messaging, To-Do-Planning und Informat ionskonsum, Teilnahme an
Diskussionen in Onlin e-Com muniti es und di e Nutzu ng sozialer
Ne tzwerke.
Wer gewisse Informatione n zusammenstellen muss, schlägt
bei Wikipedia nach, legt Notizen bei Coogfe No tebook ab, f ügt die
Texte bei Zoho zusammen, speichert diese online und verschickt
sie über Coogle Mail, mit dem sich Adressat en ganz intui t iv auswählen lassen. Simult an werden die letzten Snapshots bei Flickr
hochgel aden und MP3 -Dateien irgendwo hoch - und heruntergeladen, Sollte der Browser eine lesenswerte Websit e anzeigen,
wird sofort ein Lesez eichen angelegt , bei Deliciou5 hinzugefügt
und in einem Blog ku rz ve rm erkt.
Und dami t der Nutzer immer auf dem Laufenden bleibt, läuft
außerdem ein RSS-Widge t auf dem Desktop, da s über die neuest en Beit räge beliebter Blogs oder die Neuigkei t en in der W el t
auf renommierten Nachrichtensendern wie Der Spiegel oder N 24
regelmäßig informiert.

1 Das Web im neuen Gewand

I

Von der Homepase zum Blog
Früher machte es keinen Sinn ,
vom Erfolg einer Homepage zu
sprechen. Im Web 2.0 führt der
Erfolg eines Fach-Blogs dagegen
5(h~lIzu grOßerer Bekannthelt
und zu ~uen pel>Onlichen und
geschaftUchen Kontakten .

6

Abb ildung

1-41

Ein RSS-Wldget kOnnen Sie zum Beispiel mithilfe von Google Desktop
(desktop.google.com) Installieren. I n Microsoft Vis ta wird ein enhprechendes Wldget automatisch mitgeliefert .

1.2.8
Th e lon g Tajl
.. Der lange SchwanZ e ist derzeit eines der meistdiskutierten wirtschaftlichen Konzepte . Der Begriff stammt aus dem Umfeld der
Statistik und steht für die gleichgewichtige Bedeutung von ausgeprägten Ma)(ima und kontinuierlichen Minima. In der Internetweit entsprechen die Maxima den verkauften Bestsellern, und die
Minima den eher unbekannten Produkten und Inhalten.
Das .. The Long TaHe-Konzept, übertragen auf das Dnline-Markeling von Wi n~'d-Editor Chris Andersen, besagt, dass eine Vielzahl von Nischen, welche Kunden aufgrund der Empfehlungen
anderer Nutzer besser erforschen können, insgesamt mehr
Absatzvolumen ergeben, als dies bei den meistverkauften Produkten der Fall ist. Trägt man die Verkaufszahlen im Vergleich zu
den verkauften Produkten in einem Graphen auf. so entstehen
bei Topsettern ausgezeichnete Ma)(ima. während et liche kleine
Nischen einen .. langen Schwanze bilden (vgl. Abbi ldung 1.42).
Dies erklärt den Namen.
InteressanterYoleise wurde das Konzep t von Amazon schon
lange vorher verwendet, bevor es seinen Namen erhalten hat.
Das Erfolgsprinzip moderner Dnline-Händler basiert auf dem
Empfehlungsprinzip und der Beachtung von Minderheiten,
die durch ein breites, nischenorientiertes Angebot plötzlich zu
Mehrheiten werden und somit den Dnline-Handel entscheidend
bestimmen . Was in einem konventionellen Kaufhaus unmögli ch
ist, wird bei Dnline-Kaufhäusern in Zeitalter von Web 2.0 intensiv ausgenutzt. Dies kommt letzendlich dann sQlNohl den Käufern
als auch den Verkäufern zugute.

1.2

Neue MOglichkeiten und neue Konzepte

I

61

Ab bild ung 1.42 ...
In dem Beitrag .The Long Ta il«
(htl p://www.wired.com/wi red/
archive/12. 10Itail .html , Linkcode
022) vergleich t Chrls Andersen,
Chefredakteur von Wired.com,
die Handelspla n formen Rhapsody, AmilZon und Ne tfl ix.

Knappheit der Aufmerksamkeit
Oie Knapp heit der Aufmerksamkeit hat dazu gefUhrt, dass Nutzer im Web nur selten lesen und
Inhalte meis tens nach Sc hlüsselwö rtern absuchen. Dies wird in
Kapitel 8 , . Barrlerefreiheit und
Usability«, ausführlic h erlä.ute rt.

Ein weiteres Beispiel sind Suchmaschi nen, die ihren Dienst kostenlos anbieten , dafür aber die
Aufmerksamkeit der Nutzer fü r
Werbeanze igen elWarten.

1.2.9

Attention Econo my

Über die letzten beiden Jahrzente ist die Informationsfülle im
Web explosiv angewachsen. Mit dem rapiden Wachst um der 810gosphäre in den letzt en Jahren wei tet sich die Menge an online
verfugbaren Da ten heu t e weit schneller aus als je zuvor. So nimmt
nicht nur die Anzah l der Blegs exponentiell zu ; auch erhöht sich
die Anzahl der Posts, die täglich bei Blogs erscheinen - und Ma r
stet ig.
Dies (ü hrt zu einem Problem, das vom W issenschaftler Herbert
Simon entdeckt und erforscht wurde: &Das Wachst um der Information verursacht eine Knappheit der Aufmerksamkeit .• (Gesetz
der Information, 1975). Mit anderen Worten: Je mehr Informationen ein Nutzer zur Verfügung ha t, dest o schwieriger fäll t es ihm,
relevan te I nhal te zu finden und wahrzunehmen. Somit sind Besucher im Zeitalter des Publizierens prakt isch dazu gezwungen, mit
ih rer Zeit bzw. der Aufmerksamkeit, die sie beim Besuch einer
Seite mit bringen, sparsam umzugehe n.
Da raus resul tiert ein weitverbrei tetes wi rtschafliches OnlineKonzept, das Marketing-Expert en als Attention Economy bezeichnen. Um unbeständige Kunden an sich zu binden, muss eine
Webse ite relevante und zuf riedenstellende Inhalt e liefern. Im
Gegenzug ist der pot enzielle Kunde bereit, der Seite Aufmerksamkeit zu schenken, indem er sie besucht und sich die Werbeblöcke (meist ens unbewusst) anschaut.
Dieses simple Prinzip ist grundlegend für sämtliche Webdienst e. So sind etwa populäre Weblogs n ur deshalb finanziell
tragfäh ig, weil sie ausschließlich redak t ionell sorgfältig aufbereitete Inhalte publiziere n. Das w issen die Leser zu schätzen und
schauen daher immer wieder auf dem Weblog vorbei. Oder sie

62

1

Das Web im neuen Gewand

abonnieren gleich RSS-Feeds, in denen die Inhalte ma nchma l
zusammen mit Werbeblöcken angezeigt werden.
Nutzer sind an Werbung gewöhnt und empfinden sie oftmals
nicht als Störung, sondern als eine Notwendigkeit. Sind Werbeblöcke zudem informativ, so sind Nutzer unter Umstanden sogar
dankbar für einen nützlichen Hinweis.
Modelle, die auf Attention Economy basieren, existieren schon
seit Jahrzehnten. Somit ist dieses Modelt ein et abliertes Konzept,
das im Web 2.0 aufgewertet und in einem neuen Kontext benutzt
wird. Um die Aufmerksamkeit der Besucher noch intensiver lenken zu können, machen sich Seitenbet reiber seit wenigen Jahren
die Vorteile der Personalisie rung von Webseiten zun utze. Sie steIlen jedem einzelnen Besucher nur solche Inhalte zur Verfügung,
die auf seine spez ielle Int eressen zugeschnitten si nd. Je besser ein
System die Int eressen und Gewohnheiten seiner Nut zer beurteilen und einschätzen kann, desto stärker und effizient er können
Nu tzer an den Dienst geb unden werden.
Damit lassen sich die Interessen ähnlicher Benutzer genauer
untersuchen (Koll ektive In tel ligenz, Recommendation Systems)
oder Nutzerdaten sammeln und auswerten (Suchanfragen,
Online·Akt ivitäten, Blag-Beiträge uber O ffl ine-Aktivitäten usw.).
Beispielhaft dafUr sind neben Online-Kaufhäusern wie Amazon
etwa Google mit seinem personalisierten Suchdienst, Facebook
mit dem _People You May Knowe-Tool oder das soziale Netzwerk
Oigg mit der Digg Recommendation Engine. Diese präsentiert
jedem Mitglied von Digg Beiträge, die sich mit Themen aus seinen
früheren Digg-Aktivitäten überschneiden und für ihn nach der
Einschätzung des Systems in teressant und relevant sein könnten.

... --_..-

..-_--_ _----

•

•

1.2.10

..

Sinnvolle Empfehlungssysteme
Ein typisches Problem solcher
M odelle ist. dass Empfehlungs .
systeme nur dann sinnvon sind ,
so fern sie über genügend Infor·
matiof"M!n über Präferenzen und
Interessen der Nutzer verfügen .
N euen Benutz ern kOnn en aussagekraftlge Angebote nor selten
unterbreitet werden . Demzufolge
Ist es w ichtig. den Einstieg fur
potenZielle Kunden so leicht wie
mOglich zu machen und Vorteile
des Dienstes frü hzeitig zu ver·
mitteln.

. ------ -"
~.-

-_.
=~-~.-

~--

--~.-

~.-

.. Abbil du ng 1.43
Das .People You May Know .. -Tool
bel Facebook schlagt FacebookNutzer vor, die ein regist rier ter
Facebook-Mltglied kennen
kOnnt e.

.. Abbildu ng 1.44
Die Digg Recommendal ion Engine
analysiert Beziehungen zwischen
Inhalten und Digg-Aktivi täten der
N utzer. Dies Ist die Grundlage
für personalisierte Story.Empfeh.
lungen die jedem Nutzer präsentiert werden .

...-

. _- ._--._-_.-•... _------_
_.-_---_

'
'.

I

."

Crowdso urci ng

Die Tatsache, dass man aus vielfältigen Aktivitäten mobiler Nutzer
wertvolle Inhalte schöpfen kann, wird spätestens dUl"ch die globale Verbreitung und Nutzung kollekt iver Intelligenz klar. Doch
die Microwork des Einzelnen, die beispielsweise in Wikipedia der
Öffentlichkeit zur Verfügung gestellt wird, kann auch als eineattraktive Quelle für kommerzielle Wertschöpfung gesehen werden.
1.Z

Eine ausfütv"liche Einführung in das
Konzep t . Attention Ewnomye
kOllnen Sie im Beitrag: .rh!! Attention Economy: An ().terview_

(hrrp:l/www.readwriteweb.coml
archlves/a ttent/on _economy_over·
vlew.php Unkeode 023) nachlesen.

Neue foAOglichkei ten und neue Konzept e

I

63

Mind ~rh~it~n und

M~hrh~lten

Im neuen Web ergibt sich aus
einer Vielzahl von Minderheiten
eine neue Mehrheit, die grundsall lieh an weniger populären
Produkten interessiert ist.

[C ro wd so urcin gl
Das Phänomen des (rowdsourängs versucht die Frage zu klären ,
ob man soziale Aktivitäten der
Nuller kommerziell nullen kann.

[No -SPECI
Eines der am häufigsten kritisiert en Beispiele sind öffentliche
Wettbewerbe von Unternehmen,
die an einem profeSSionellen DeSign mit minimalem Geldaufwand
interessiert sind und die Offentlichkeit daran kostenlos teilnehmen lassen. Eine bekannte Bewegung in diesem Zusammenhang
ist No -Spf( (www.no -spec.com).
die sich für feste Rahmenbedingungen für Designarbeiten einsetzt.

.. Abbildung 1.45
ReviewMe.com ve rgibt 20 bis
200 $ für jeden guten Beitrag zu
einem vorgegebenen Thema.

_'

.....,......

\

-

c=- ~

-'-' - --=-

- -;:;. -. - . .

~

.. Abbildun g 1.46
Encyclopaedia Britanni ca (www.
britannica.com). Wer etwas genau
wissen will, muss zahlen .
64

Das begreifen zunehmend auch Unternehmen, die ein besonderes Augenmerk auf das Phänomen des Crowdsourängs richten.
Der dem Outsourcing ähnelnde Begriff steht für das Übertragen
bestimmter Teilleistungen oderTei laufgaben auf die breite Öffen tlichkeit. Die finanzielle Komponente soll zudem dazu dienen, den
Benutzer zu einer gewissenhafteren Teilnahme im Mitmach-Web
und somi t zu höherer Quall tat zu motivieren.
Dies bedeutet eine beinahe nat urliche . Evolution .. der sozialen Teilnahme, denn die Inhalte in sozialen Netzwerken werden
dadurch neu gefi ltert und somit gezielter verbreitet. So kann ein
Tag beispielsweise mehrere, ganz unterschiedliche Bedeutungen
haben. Dennoch wird es automatisch zu einer Einheit zusammengefasst und verlinkt. Häufig werden Inhalte oftmals eilig mi t
Schlüsselwörtern versehen, die zu allgemein und unspez insch
sind. »Besserer Inhalt durch Massen« lautet das Motto solcher
Crowdsourcing-Projekte wie Human Inte/ligence Tasks (http://
www.mturk.com. Linkeode 024) bei Amazon, die mithilfe von
engagierten Nutzern Aufgaben lösen sollen, fur die Rechner zu
viel Zeit benötigen - etwa das Iden tifizieren von Objekten auf
Bildern.
Da ruber hinaus zeigt sic h unter innovativen Web 2.0-Startups
die Tendenz, die Qualität der Tei lnahme der Nutzer in nerhalb
einer Online-Plattform gezielt zu verstärken . Ein Beispiel dafür
sind entstehende Online-Angebote, die versuchen, den finanziellen Aspekt stärker zu be tonen .• Upload your video, make $50!«
(http://www.Shopwiki.com), »Write reviews for cash!« (http://
www.ReviewMe. com ) sind beispielhafte Stimmen cleverer Marketing-Manager, die mit einem kleinen Budget die Funktionalität einer ublichen Handelsplattform du rch Produkt-Reviews und
Rezensionen der Nutzer erweitern wollen.
Crowdsourcing muss sich dabei nicht notwendigerweise auf
spezielle inhaltsbezogene Aufgaben beziehen. Oft ist es ein
öffentlicher Wettbewerb für das Re-Design einer Internet präsenz
oder das Programmieren spezieller Anwendungen, wobei die
Bemühungen der Crowd in der Regel mit rela tiv bescheidenen
Geldsummen belohnt werden .
1.2 .11

Qualitätsverlust und Datentransparenz

Wer sich auf den Seiten von Wikipedia umschaut. stellt schnell
fe st, dass es manch einem Beitrag an sorgfaltig überpruften Informationen und zitierten Angaben mangelt. Da die Enzyklopädie
durch Bemühungen der Öffentlichkeit entsteht - unabhängig
davon, ob Teilnehmer Experten auf dem entsprechenden Gebiet
sind oder nicht -, kann man bei Wikipedia-Beiträgen nicht unbedingt von der Korrektheit der Daten ausgehen.

1 Das Web im neuen Gewand

I

Webevangelisten betonen in diesem Zusammenhang den Qual i -

Knol

tät sverlust von Wissen im Netz, das wegen des massive n Datenstroms nicht mehr überprüft werden kann und daher stets kritisch

Mit Knol (http ///www.knol. com.
lInkeode 025) startete Google
Mitte 2008 eine Offens ive gegen
die freie Online-Enzyklop;ldie
Wlklp«ila. Auf Knol können
mehrere Beitrage zum selben
Thema erscheinen. Sie können
AdSense-Werbung enthalten
und lassen sich bewerten . Im
Gegensatz zu Wiklpedla dürfen
die Beitrolge nicht anonym geschrieben werden . Die meisten
stammen von Experten. Dadurch
möc hte Google unter anderem
einen Qualitätsverlust und fehlerhafte Beitr~e verhindern.

betrachtet werden sollte. Webvisionäre argument ieren dagegen
damit, dass die Enzyklopädie zwar nicht perfekt, dafür aber offen
für alle und letztendlich ..gut ge nug« sei. Eine kos t enpfl icht ige
Enzyklopädie wie die fncyc/opcedia 8ritannica biet eE (nach ihrer
Auffassung) zwa r ein ve rlässliches Wissen, doch w as nütze es,
wenn es nicht frei zur Verfügu ng steht?
Eine Debatte über die Q ua li tät der Information betrifft ei ne
Onli ne- Enzyklopädie genauso wie eine Viel zahl von Webl ogs, bei
denen das Problem zum Teil noch stärker zur Gelt ung kommt.
Der Einflu ss von Blogs hat mi ttlelWeile eine g lobale Dimension
errei cht. Renommierte Blogs werden hä ufig in Zeitungen und in
Nachrichtensendungen zitiert. Eine geschickte Online-Ente auf
der Seite eines populären Blaggers kann globale Au swirkungen in
der Realität habe n .

- - ......_------_
... _-_
..
...
.
_--.
__
.... _
.._
-_._
...
_
....
__
..... -.. _..
__
__
-._-._
. .....-. .... _-_.
..
__
.._
..
..
.__._"._-----_._.."_- ---------_._--._...__ .._-. .__. _-_.......__
_.__... _. _---

."..~

=::;:=E.

___ _-___-_
-_

-- -

CucdnG Sly.. SI.abI

~.

._- --- _. , ---~_

---~

~-

_<.50

... Abbildung 1.47
Wikipedia (www.wlklpedia.com). Wikipedia bietet eine kostenlose,
aber nicht Immer vertrauenswOrdlge Alternative bei der Informationsbeschaffung.
Doch eigent lich sei di es gar nicht so tragisch, fi nden die Experten. Denn ständig fir, det ei ne natürliche Au sw ahl von persönlich
selekt ierten sogenann ten A- Bloggern statt, di e au f der Grundlage von gesamm eltem sozia len Kap ital basi ert. Da Blag- l eser
grundsätzlich selbst Blogge r sind und sich um ihre eigene Reputation küm mern, greifen si e au f der Suche nach neuen I nhalten
zu vertrauenswürdigen Q uellen - wie etwa zu Onllne-Journalen
von Expert en. Somi t geht kei ne Qualitat verloren, sondern eher
umgekehrt. Der Nutzer gewinnt sogar mehr Qualität , als dies bisher der Fall gewesen war.
Eine Gefahr des Web 2.0 stellt die Transpa renz persönlicher
Informationen dar, die insbesondere durch offene soziale Netzwerke und persönliche Online-T<JBebücher verstärkt wird. Da
Web 2.O- Nutzer ihre Vorlieben und Interessen gerne ins Web verl<JBern und dem gemeinschaftlichen Zweck zu liebe offenlegen, hat
1. 2

... '

...,..-.,.~

-

-

--.
--,....-..
-~ .

-

... Abbildung t.48
Knol- Eintrag in Großaufnah me.
Bei Knol dO rfen Bei träge nicht
anonym geschrieben werden.
Me is tens stammen sie von Experten, w erden bewertet und kOnnen
Werbung ent halten.
Personliche Daten Im Netz
Da oftmals samWehe persOnlichen Daten von den Nutzem
freiw illig im Web preisgegeben
und dort öffentli ch prAsentiert
werden, ist es heutzutage einfa cher als Je zuvor, an die persönlichen Daten einer Person zu
gelangen .

Neue Möglichkeiten und neue Konzepte

65

jeder Zugriff darauf. Schließlich sind alle Informationen im Web
offene Daten, die gesammelt und analysiert werden kön nen.
So ist es beinahe z.u einer gängigen Praktik geworden, vor einem
Bewerbungsgespräch nach dem Namen des Bewerbers zu googeln.
Die Zugangsdaten zu einem Google..-Account sind häufig mehr wert
als eine ausspionierte Kredit karte. Da die neuen Online-Dienste
mitein ander st ark vernetzt sind und immer öfter persönliche Daten
abspeichern dlirfen , kann ein kleines Versäumnis ei nes aktiven
Webnutzers die jahrelang aufgebau te Reputation schnell zerstören. Es stellt sich also die FrilBe, inwiefern man Online-Diensten
die Verwalt ung von persönlichen Informat ionen überlassen sollte.
Schließlich kann ein Nutzer nie sicher sein, dass er einen exklusiven
Zugriff auf seine extern gespeicherten Daten hat.

1.2.12
Slgn In to GooQle Mall wl~ your

C.o,18ft Accou nt
Ugemame: mex_rrustermonn

·4

Paliliword.!··· ......

!I ~-.-'--=-'
Remember me on this
IXl rTll uler.
( Sign I.. )

I 0!I!l!I!!t M9ft. my eqoounI

.. Abbildun g 1.49
Die Zugangsdat en zu einem
Google-Accoun t könnt en schon
bald mehrWert sein als ausspionierte Kreditkartendaten. Grund:
Mi t Google-Diensten lässt sich
beinahe alles Ins Web übertragen. Neben persönlichen Dalen
können auch Geschäftskontakte
und säm t liche :> sozialen_ O nlineAklivitalen der Nutzer verfolgt
und ausgenu tzt werden.

66

I

Bedarf nach Weite re ntwick lu ng

Eine Richtung, in die sich das Web bewegen sollte, ist die stärkere
Standardisierung von Datenforma ten und die Standardkonformität von Webseiten. I m Augenblick verfügt die Online -Community
li ber viele verschiedene Konzept e, die demselben Zweck dienen
sollen, dem Entwickler aber ganz unt erschiedliche Schnittstellen
anbieten. Sollen die In format ionen au f beliebigen Geräten korrekt angezeigt werden, so benötigt man eindeut ige Standards.
Das Web 2.0 ha t viele neue Ideen und Möglichkeiten geliefert,
die sich im Laufe weniger Jahre zu Standardansätzen etabliert
haben. Doch wohin bewegt sich das Web moment an?
Der Historiker Daniel Borstin f ührte den Terminus .The Fert ile Verge« (die fruch tbare Schwelle) ein, um eine neue Dynamik
zu kennzeichen, die zwischen zwei wesentlichen Stu fen einer
Entwicklung stattfindet. Experten sind sich einig: Mi t neuen
Konzepten ist die f ruchtbare Schwelle zwischen Web 1.0 und
dem semant ische n Web geschaffen worden, die schon in naher
Zukunft zu grundsätzlichen Veränderungen unseres Netzverständnisses führen wird.
Die semantische Struktur von Dokumenten wurde mit zunehmender Akzeptanz f ür standardkonforme Webseit engestaltung in
den Vordergrund gerückt, durchgesetzt hat sie sich bisher allerdings noch nicht. Einen bedeutenden Schri tt in diese Richt ung
stellen sogenannte Mikroformate dar.
Schließlich läu ft die Web 2.0-Bewegu ng Gefahr, schon in
der nahen Zukunft liber das .. Kit chen-Organization-Problem<o;
(Jared M. Spool) zu stolpern. Wer seine Kliche ganz nach seinem Geschmack eingericht et und ein harmonisches Zusammenspiel von Tassen und Sch ränken gefun den hat, wird bei seinen
Freunden schnell fes tstellen, dass nicht jeder eine Küche gleich
organisiert. /n sozialen Netzwerken ist der Informationsaustausch

1 Das Web im neuen Gewand

I

einfacher als je zuvor; doch wenn jeder Informationen auf seine
eigene Art und Weise strukturiert (indem er etwa eigene Til8s
oder sehr allgemeine Schlüsselwörter verwendet), baut sich nach

und nach ein globales Chaos auf.
1.2 .1]

Zusa mme nfass ung

Hier abschließend ein kurzer Bli ck auf die grundlegenden Veränderungen Im Netz, die es festzuhalten gilt :
~ Das Web wird zu einer mobilen, geräteunabhängigen ServicePlattform mit der Funktionalität von Desktop-Anwendungen.
.. Software wird zu einer Dienstleistung. Der Anwender wird
dabei zum Mitentwickler.
.. Neue offene Programmierschnittstellen erteichtern den Zugang
zu Daten, deren verknüpfung sowie Wiederverwendung.
.. Webanwendungen befinden sich permanent in einer BetaEntwicktungsphase und werden kontinuierlich aktualisiert
und veröffentlicht.
.. Schli chtheit. Einfachheit und Minimalismus - etwa be i leichtgewi chtigen Entwicklungsmodellen - setzen sich gegenüber
komplexen Ansatzen durch .
.. Das Netzverständnis der Nutzer des Web 2.0 basiert auf
Offenheit , Authentizität und Mobilität. Der Humanisierung
des Netzes liegt das Empfehlungsprinzip zugrunde .
.. Mit Ufestreaming und einer wachsenden Popularätit mobiler
Geräte wird das Miteinander von Nutzern in Web 2.0zu einer
. Mikrodimensione der sozialen Vernetz ung.
.. Web 2.0 macht aus passiven Surfern aktive Autoren, Akteure
..

und Mitgestalter des Webs.
Durch das .The Long Taile-Konzept gewinnen Nischen eine

besondere Bedeutung für Online-Händler.
.. Explodierende Mengen an Informationen im Web ve(LJrsachen eine Knappheit der Aufmerksamke it und zwingen Seitenbet reiber zu personaliSierten Angeboten und Diensten .
..

Crowdsou rcing schafft eine komme rzielle Wertschöpfung du rch
Neuorganisation und Filterung der kollektivefl Intelligenz.
.. Q ualitätsverlust und Datentransparenz sind begleitende Nebeneffekte offener Netzwerke und einer neuen Webkultur.
Die Aufgabe, das Netz mitzugestalten und weit erzuentwickeln,
wird im Web 2.0 komplett der Anwendergemeinde überlassen .
Das neue Web stellt dem Benutzer eine Vielzahl neuer M öglichkeiten und Konzepte bereit. Um diese wahrzunehmen, muss aber
der Benutzer selbst aktiv werden.

1.2

Neue foAOglichkeiten und neue Konzepte

I

67

1.3

Die Nutzer des Web 2.0

Die rasante Entwicklung de r Breitbandkommunikation hat en tscheidend dazu beigetragen, dass sich mobile und anspruchsvolle
Online-Dienste im Internet durchsetzen konnten. Die Entstehung
und Verbreitung von Web plattformen wie Flickr oder YouTube ist
durch die fortschrei tende Technik überhaupt erst möglich geworden. Schnelle Leitungen sind die Grundlage für mobilen Datenaustausch und eine n intensiveren Informationskonsum.
Somit trifft die neue Dimension des Highspeed - Internets
mit zahlreichen »heavy-load Ol-Angebot en auf die wachse nden
Ansprüche mobiler Nutzer. Eine gu t e Idee zum rich t igen Zeitpunkt sorgt für den Durchbruch und verspricht ambitionierte
Neuerungen schon nach wenigen Monaten .

1.3.1
Was ist Web 2.01

Kaum Jemand weiß, was
Web 2.0 eigentlich ist. Benutzt
wird der Begriff aber dennoch.

Soziale Netzwerke im Trend

Trotz eines enormen Zuwachses der Web 2.0-Branche wissen viele
Anwender auch einige Jahre nach der Entstehung des Begriffs nur
ungefahr, was genau sich dahinter verbirgt . Meistens werden auf
die Frage nach der Bedeutung des Begriffs Web 2.0 populäre Seiten wie etwa Facebook oder Wikipedia genannt. Doch inwiefern
diese das Web 2.0 ausmachen, wissen die meisten Anwender
nicht.
Dies hindert den durchschnittlichen Nutzer jedoch nicht
daran, sich mit populären Online-Diensten und anline-Projekten
vertraut zu machen und immer mehr Zeit in die Steigerung seines
soz ialen Kapitals zu investieren.
Das Ergebnis lässt sich sehen. So konnten etablierte Webunternehmen in den Jahren 2007 und 2008 ordent liche Gewinne
verbuchen - vorwiegend aufgrund des wachsenden Interesses der Nutzer. Insbesondere soziale Netzwerke konnten sich
in der Branc he mit gewaltigen Traffi c-Raten behaupten : Das
Freundschaftsnetzwerk Facebook (http://www.jacebook.com). die
Nachrichten-Plattform Digg (httpl/digg.com) und die KontaktPlattform MySpace (http://www.myspace.com). werden immer
häufiger entdeckt und intensiver benutzt. Bloß bei Wikipedia
scheint sich das Wachstum zu verlangsamen. Für das Jahr 2008
wird insgesamt nur 28 Prozent mehr Traffic erwarteP
Interessant ist die Tatsache, dass im Jahr 2006 über 40 Prozent der weltwei ten Nutzer von sozialen Dienst en das Alter von
1 http://WWoIV.mychurch. org/blosl3201 /myspau - ~/ra/ -growth - numbus
(Unhode 026)
2 Wikipedia Traffic Grows 8,OOOlb in 5 Years Due to Search Referrals.
Mai 2008, http://bloc.seafchenginewaUh.comibiosl080515· 095839
(Unkeode 027)

68

I

1

Das Web im neuen Gewand

I

35 Jahren bereits überschritten hatten.] Dies hat sich im Laufe
der letzten Jah re dramatisc h veränd ert. Die unter amerikanischen
Nutzern am stärksten ve rtretene Alte rgsru ppe ist laut einer Studie
von Rapleaf" die Gruppe der 18- bis 24-Jähri gen (et'lola 37,7 Prozent), hierbei überwiegend Frauen (et'lola 54,7 Prozent). Dabei
nutzen Männer sozia le Netzwerke meistens nur, um geschäftliche
Kontakte zu knüpfen. Insbesondere schauen über 40 Prozent der
Nutzer des mobilen Webs regelmäßig be i sozialen Netzwerken
rein. 5
Social N etworking ist som it nicht nur ein Spielzeug von Teenagern, sondern ein Werkzeug, das auch von Älteren benutzt wi rd.
Inwiefern sich soziale Netzwe rke in der Online-Welt durchsetzen werden, bleibt ungewiss. Doch den Sprung zu den zwanzig
meistbesuchten Webseit en im Netz haben die ersten sozialen
Netzwerke der neuen Webära - nämlich MySpace, Facebook,
Orku t und Hi5 - schon längst geschafft.
Insgesamt griffen Ende 2007 etwa 87 Prozent der On lineNutzer in irgendeiner Art und Wei se aktiv zu Web 2.0-Diensten :
in Form von 810gs, Com mun iti es oder moder nen Webapplikationen. Das Alter der Web 2.0- Nutzer schwankt dabei sprunghaft
von einem Dienst zum anderen, es bleibt aber durchschnittlich
im Rah men zwischen 18 und 40 Jahren. 6
Doch obwohl sozi ale Netzwerke es meisterhaft schaffen , die
Anzah l der Seit enaufrufe von Jahr zu Jahr zu steigern, lässt sich
das große Interesse der Anwender bisher nur schwer in Geld verwandeln. Derzeit gibt es kein wirkungsvolles Modell, mit dessen
Hilfe die Betreiber von sozialen Netzwerken vernünftige Einnah men erzielen könnten . Ausgerechnet die klass ischen und lukrativsten Werbeformen (e t\-va TKP-Kampagnen) funktionieren in
sozialen Netzwerken besonde rs sc hlec ht. 7
Im Jahr 2007 kaufte M icrosoft für 240 Millionen Dollar einen
Anteil von 1,6 Prozent des Freundschaftsnetzwerks Facebook,
musste aber schon im darauffolgen den Jahr 150 M illionen Dollar Ver lust machen. Ähnlich geht es dem MySpace-Eige nt ümer
Fox Interactive Media. Auch Google ist unzufri eden und gibt zu,
.(noch) keinen perfekten Weg gefunden zu haben, auf sozialen

Soziale Netzwerke
Soziale Netzwerke bringen Traffic , Nutzer und Daten - aber
kein Geld. Bisher konnten sie
Seitenbetreibern nur bescheidene Einnahmen bescheren.

3 Studi e cernScere Media Metrl~ , August 2006, http.//www.coms(ofl!.(om!
pre5Yrelease.asp?pre5s-1 019 (Li nk cede 026)
4 Rapleaf Study Reveals Gender and Age Dala e f Social Network Uset'l,
Juli 2006, http://buslness.rapleajcomicompanyJ)ress_200B_07_29.html
(Unkcode 029)
5 . State of t he Mobile Web., Mai 2006, http'//www.opera.wm!pressreea=>l
enl2008/05I2fl1 (Unkcork 030)

6

http://www. 5~omol. orUbiosladv.mud-w~b.20-il t.th~.5 hoporC·f ummit

(Llnkcod~ 011)
7 . Zwi sc hen die Nutler_, 6ryan t Urstadt, Te< hn ology Rev iew, August 2008,
S, 56-60

1·3

Die Nutzer des Web 2.0

I 69

Abbildung 1.50

Netzen zu werben und Geld damit zu verdienen « (Sergey Brin bei
der Vorstellung der Geschäftszahlen für 2007).
Fazit: Social Advertising läuft schlecht. Unter Experten gilt es
als »eine Umschreibung für jeg liche Werbungsformen, die Nutzer von sozialen Netzwerken ziemlich geschickt ignorieren« (Seth
Goldstein , Sodal Media). Über alternative, profitable Werbeformen wird heftig diskutiert. Insbesondere ist die personalisierte
Werbung (auch Targeting genan nt), die Aktivitäten und In teressen des Nutzers genauer berücksichtigt, im Gespräch.
Beispielhaft fOr personalisierte Werbung ist das FacebookSystem Beacon. Dieses nutzt Daten zu Aktivitäten der FacebookNutzer, um Werbung gezielter einzublenden. Singles erhalten
etwa Einladungen zu Flirtbörsen, Buchliebhabern werden Anzeigen zu möglicherweise interessanten Buchangeboten geschaltet .
Aufgrund von Datenschutzproblemen mussten die Gründer von
Facebook unter dem Druck der Öffentlichkeit den Nutzern die
Möglichkeit einräumen, die Sammlung und Verbreitung von persöhnlichen Daten rnihilfe von Beacon zu verbieten . Nur wenigen
Facebook-Nutzern ist diese Möglichkeit jedoch bekannt.

T

The State of the Blogosphere
(http://www.Sifry.com/alerW
archives/000493.html , linkcode
032): Weblogs weisen ein beInahe e~ponentieUes Wachstum
auf. In der Blogosph<ire dominiert
Englisch , gefolgt von Japanisch
und Chinesisch.

1.3.2

Die Blo gosp häre weitet sich aus

Die zunehmende Popularität von soz ialen Netzwerken reflektiert
das steigende Interesse der Nutzer an aktiver Partizipation im
Web. Dies ist jedoch nicht nur für Mitmach-Plattformen typi sch,
sondern auch für die Blogosphäre, in der jeder gerne seine Gedanken zum Ausdruck bringt - natürlich in einem eigenen Weblog.

--,--_._-

---

~ T~chnori1tl

""-=
=

:=
;=

-_...-

~. _.-

----

_ _ ' _ _ ""_110

...... ..,..

_ " . . .. _ f f l _

()l 2006 _

110"

..

-

~ Technorati

---

Dabei lässt sich im Zeitraum zwischen 2003 und 2008 ein beinahe exponentielles Wachstum des Mediums beobachten. Die
Blogosphäre dehnt sich alle fünf bis acht Monate um das Doppelte aus. Ent scheid end tragen dazu engl isch- und japa nischspraehige Blagger bei (vgr. Abbildung 1.50). Laut den Studien >tThe
70

Das Web im neuen Gewand

I

State of Blogosphere cB und Presse ~
mitteil ungen von Technorat i" exist ieren heutzu tage liber 133 Millionen
Weblogs (Stand : Oktober 2008).
Weltweit werden täglich 66.000175.000 neue Blogs registriert
und 900.000-1.900.000 Beit räge
veröffentlicht, 36 Prozent davon in
englischer, 37 Prozent in japanischer,
8 Prozent in chinesicher und 3 Proze nt in spanischer Sprache. Der Ant eil
an deu tschsprachigen Bei trägen liegt
gerade bei bescheidenen 1 Prozen t.
Der 8logging-8oom ist einer der wenigen Trends, durch die
die technologische Revolut ion im Web deut lich wird. Während
des Kat rina- Hurrikans zeigt e sich, dass jeder einzelne Nutzer das
Geschehen in seiner St adt, in seinem Land und in de r ganzen
Welt mitbestimmen kann - durch direkte Bildaufnahmen aus

_ .-.II.-.-".... .

~_ of
"""" lInl\IIQ '" . _ . , , ...
_Iwo. 11\0 ,.",... .... . - - ........

~"'bIog-

A Abbildun g 1. 51
So siehts in der Blogosphare aus :
tägli ch werden 900.000 Beiträge
veröffentlicht; im Zeitraum von
120 Tagen we rden 7, 4 Millionen
Blogs aktu alisiert.

dem Krisengebiet und den Austausch von Informationen liber
Blog-Netzwerke, die damals in wenigen Stu nden aufgebau t wurden. Der Hu rrikan brach te die Möglich kei ten des Blaggens ins
Blickfeld der An wender und der Massenmedie n. Der Trend häl t
bis heute an. Dies ist einer der Grunde, wa rum das Erste, was
Nachrichtendienst e bei brisanten Ereignissen t un, die Suche nach
sensa tionellem Video mate rial in der Blogosphäre bez iehungsweise auf YouTube ist.

----_..... .-

~ Technorati

__

.... "'_"'....,.t_...
",,,.

...

Ulogosphare
Das Ausmaß der Blogosphäre
verdoppelt sich alle fünf bis
sieben M onate. Auf Deutsc h
schreibt gerade einmal 1 Proz ent
der gesamt en Blogging-Community.

- ('....O-_""'
..,."II._"_
...- •.
-

Daily Posting Volume

,
...

NI",

'-

~ Technoratl

~"

- - - _....."""11 .... ..-.,~

A Abbildung 1.52
Wachstum und Charakteristika der Blogosphäre laut der Stud ie
»The State of the Blogosphere 2007« (li nkcode 033).

8 http://www.slfry.comlHilttofrhrlivtwtb(Unkcodt 012),
http://ttdinoratl.com/biOBBin&!statt- o!-the-blO/Josphertl (Unkcode 011)
9 http://ttchnorati.comiabout!(linkcotk0l 4)

1.3

Die Nutzer des Web 2 .0

I

71

1.3.3

• Abbildun g 1.53
Mit Google Maps (maps.google.
wm) kön nen Anwender Orte.
Gesch;'ifte und andere Objekte
suchen und sich deren Posit ion
auf einer Karte bzw-. auf einem
Bild der Erdoberfläche anzeigen
lassen .

Parallel working
Im Web 2.0 kann ein Dokument
von mehreren Benutzern gleich zeit ig bearbeitet werden. Bei
Desktop-Anwendungen wurde
diese Funktionalität zusatzliche
Kosten verursachen .

TIPP
Eine ausfuhrllche Beschreibung
von Weblogs und Wikis finden
Sie in den Kapiteln 15.• Wikis«,
und 16. • Weblogs«.

Desktop-Anwendungen online

Häufig ist die Anzahl regis trier ter Mitglieder eines Dienstes das
einzige Mi ttel. das sich bei der Recherche nach der Popularität
neuer Webapplikationen als hilfrei ch erweisen kann. Spärli che
statist ische Daten führender Analyse-Inst itute setzen mehr Frageais Ausrufezeichen, lassen aber die Kont uren gewisser Entwicklungen erkennen.
Bereits die ersten Rich elient Appfications wie Google Maps
und Fli ckr haben gezeigt, dass Webanwender im Web 2.0 mit
einem beeindruckenden Online-Angebot zu re chnen haben.
Doch t rotz einer Vi elzahl verschied enster interaktiver Webapplikat ionen. die von Bura-Anwendungen wie Google Spread Sheets
bis zu Fo rschungs-Tools wie Zotero reiche n. haben Weba pplikationen die Desktop-Anwendungen bisher nicht ersetzen können .
Eine wesent liche Ursache dafür best eht darin, dass viele Nutzer sich die Arbeit . die gewöhnliche Umgebung durch mehrere Webapplikationen zu ersetzen, ersparen wollen. Die klar
st ruk turierte Desktop- Hierarchie und die lokale Ordnung von
Word- oder Excel - Dokumen t en mächten die meisten Anwender bewa hren. Beim Erst ellen neuer Dokum ent e werd en mobile
Word Processing Tools zwar gerne ausprobiert un d benutzt - die
erstellten Dokumente selbst werden aber vorsichtshalber lokal
auf dem eigenen Rechner abgespeichert . Nicht jeder ist berei t,
w ichtige persönliche Daten im Netz abzulegen. Dies ist auch
nicht verwunderlich. denn de r Umgang mi t sensiblen Dat en stell t
ein heftig diskutiertes Proble m im Web dar.
Dennoch werden die Mögli chkeiten de r neuen Technologien
immer stärker wahrgenommen . So gestal ten moderne Unternehmen die Komm unikat ion zwischen ihren Mit arbeit ern zunehmend mi t hi lfe von W ikis : Parallel working. also gleichzeitige
Bearbei tu ng gleicher Dokumente durch verschiedene Mi tarbeiter, gewinn t durch Collabora t ive Features von Webd iensten eine
neue Bedeutung .
Auch Weblogs entst ehen immer haufi ger auf den Seit en von
Webunt ernehmen, die einen direkten Kontakt mit ih ren Nutzern
pflegen . Ober eine Blogging-Plattform informieren Unternehmen
regelmäßig über let zte Neuigkeiten und auftretende Probleme
und nehm en die Wünsche ihrer Kunden entgegen. Wer noch
intensive r mit seine n Kunden kommu n izieren will. mach t si ch die
Vorteile des Microbloggings zunutze - etwa mithilfe von Twitter.

1.3.4

Nutzer bestimmen selbst

Bei den großen Projekten des neuen Webs lässt zwischen zwei
unterschiedlichen Geschäftsrnodellen unterscheiden : Zum einen
setzen Web 2.0-Unternehmen wie X/NG oder StudiVl auf be72

I

1

Das Web im neuen Gewand

I

stimmte Zielgruppen und bieten diesen ein entsprechendes, speziell auf deren Wünsche ausgericht et es Online-Angebot an. Im
Prinzip lässt sich die Verbrei t ung von solchen Webportalen mit
der intensiven Suche und festen Belegung von Online-Nischen
vergleichen. Ein Freiberufler zum Beispiel, der sich um neue
geschäftliche Kont akte bemüht , wird wegen der Exklusivität der
Webplattform X/NG auf diese aufmerksam. Daraus ergibt sich das
durchschnittliche Alter de r Nutzer solcher Plattformen. Wäh rend
bei XING meistens 25- bis 45-Jährige über ihre Geschäfte diskutieren, planen bei StudiVZ 18- bis 24-Jäh rige gemeinsame Treffen
und Partys.
Zum anderen begnugen sich viele Projekte wie Flieh, DeliCious und YouTube mit einem recht pragmat ischen Modell : ,. Ein
Dienst, der gut genug ist, wird seine Zielgruppen selbst finden ...
Dementsprechend setzt man nicht auf speziell ausgewählte Zielgruppen, sondern auf die Funktionali tät der Webanwendung,
die von alleine ein möglichst breites Benutzerspektrum erreichen
soll. Interessanterweise bestimmt sich die Zielgruppe einzelner
Online-Proj ekte erst langfrist ig durch die Akt ivitäten derjenigen
Nu tzer, die den Dienst verwenden.
So wurde Flieh , das ursprunglieh als eine bescheidene Plattform zum Veröffen t lichen und Austa uschen von Snapshots
gedacht war, zu einer riesigen globalen Community von Amateurfotografen und Profis. Genauso vetwandel te sich Delicious,
eigen tlich bloß zum Ablegen von l esezeichen gedacht, zu einem
wesentlichen Indikator der Popularit ät von Bei trägen und Seiten im Web. Die Nutzer dieser Dienste fassen sich nur schwer
einer best immt en Gruppe zuordnen, da ihre Teilnahme nicht
durch spezielle Int eressen, sondern durch die Funkt ionali tät des
Dienstes best imm t wird.
Somit können Webnutzer in der Ara des Web 2.0 ein persönli ches Gleichgewich t zwischen den extra auf sie ausgerichteten Plattformen und allgemeineren Online-Diensten finden. Die
Vielfalt an neuen Diensten erwei tert die üblichen Schemata der
Nut zer-Demografie.
Genauso wie der Erfolg einer Online -Zeitschrift immer häu figer nicht nur an den Besucherzahlen, sondern an der Anzahl der
RSS-Abonnente n gemessen wird, lassen sich die Vorlieben der
Web 2.0-Gemeinde nur ansatzweise an den Besucherzah len von
Online-Portalen messen. Als ein neuer Maßstab etabliert sich im
mobilen Web 2.0 etwa die Anzahl abgespielter Titel, abgelegter
Bilder, gespeicherter Lesezeichen und hochgela dener Videos.

Dynamische Gesmaftsmodelle
Die Geschäft smodelle mÜSie n
jedoch nicht statisch sein und
können sich im laufe der Zeit
entwickeln. So richtete sich
Facebook ursprünglich (2004)
nur an Stu denten der Harvard
University, brei tet e sic h j edoch
in wenigen Ja hren auf die High
Schools der USA und schließlich
au f die Firmenmi tarbeiter und
Freunde aus der ganzen Welt
aus.

Nischen V5 . Dienste - StudiVl
und Flickr
An dieser Stelle isl es w ichtig,
den Un terschied zwischen ein er
nischenorientierten St udent enPlattform w ie StudlVl , die sich
au f best immte Nutzer speZialisiert hat, und ei ner diens tori entiert en Plattform wie Flick"
die sich aufbestimmt e Dienste
speZialisiert hat, zu erke nnen.
Flickr wird unter andere m auch
von Designern und Künstlern
benutz t, wäh rend StudiVl von
vornherein eine ganz best immte
Zielg ru ppe ansprechen will.

1·3

Die Nutzer des Web 2.0

I

73

1.4

laut der .. ARD/ZDF-Online-Studie 2008. (http://www.daserste.
de/ servi ce/studie.asp, linkcode 035) sind in Deutschland
42 ,7 Millionen Erwachsene
(65,8 Prozent) online. Die höchsten ZlM'achsraten in den letzten
Jahren weisen die ..Silver Surfer.
auf: Von den 60- bis 79-Jährigen
sind inzwischen 29,2 Prozent
online .

Web 2.0 in Deutschland

Die Euphorie, mit der das Web 2.0-Phänomen weltweit aufgenommen wird, breitet sich rasant auf die ganze Online-Gemeinde
aus, konnte im Jahr 2008 aber keine kri t ische Masse erreichen.
Davon ist auch - und insbesondere - die deutsche Web 2.0Szene stark betroffen. Zwar verfügen deutsche Nutzer weitgehend über schnelle Internet -Zugange (bei DSl 73 Prozent), die
überwiegend mit Flatrate-Tarifen kombiniert werden (in 86 Prozent der Fälle), doch die Möglichkeiten des Breitband - Internets
werden nur sel ten ausgeschöpft. Podcasting wurde im Juli 2008
von jedem dritten Surfer regelmäßig benutzt, Mitte 2007 wurden
Podcasts nur von jedem zehnten Nutzer benutzt. Videos, etwa
über Videoportale oder Mediatheken, wurden von 55 Prozent
aller On liner abgerufen .
In den letzten Jahren zeichnet sich grundsätzlich eine verstärkte Nachfrage nach Web 2.0-Diensten ab. Besondere Beliebtheit genießen dabei soziale Netzwerke (MySpa ce, StudiVI und
wer-kennt-wen .de), die mittlerweile von 18 Prozen t der On liner
wöchent lich benutzt werden. 29 Prozent sind Mitglied mindestens eines privaten oder berufl ichen Netzwerks. Unter den
14- bis 29-Jährigen suchen 48 Prozent regelmäßig Videoportale
auf; für 40 Prozent dieser Altersgruppe ist Wikipedia ein regelmäßiger Bestandteil der Online-Nutzung. Fot o-Communities wie
etwa Flickr werden von sieben Prozent der On liner benutzt. In
diesem Kontext stehen Netzwerke mit beruflichem Schwerpunkt
(X/NG und Linkedln) mi t 2 Prozent regelmäßiger Nutzung relativ
schwach dar.
Ebenfalls langsam wächst die Popularität virtueller Spieleweiten (Second Life und ähnliche Seiten werden regelmäßig
von vier Prozent der On liner besucht) und Social-800kmarking-

[Pod castl
Podcasts sind Audiodateien , die
ahnlh;h den t ex tbasiert en RSSFeeds über Web logs und spezielle
Online-Plattformen verbrei tet
werden und sich abonnieren

lassen.

74

I

1

Diensten. Nur drei Prozent der Anwender nutzen Delicious, Digg,
Mister Wong oder F/.Jrl regelmäßig.
Die Blog-Community in Deutschland zeichnet sich durch sporadische Blag-Net zwerke aus, die meistens über ein bescheidenes Publikum verfügen und weitgehend unbekannt sind. So
hatten Mitte 2008 nur zwei Prozent der deutschen Nutzer Beit rage aktiv verfasst sowie andere Blogs gelesen und kommentie rt.
Der durchschnittliche Nutzer ist mit dem Abruf fremder Inha lten durchaus zufrieden und steuert nur selten eigene bei. Somit
geht es ihm häufig ni cht um eine aktive Teilnahme im Sinne des
Mi t machgedankens des Web 2.0, sondern um Unterhaltung, die
durch Web 2.0-Dienste verstärkt möglich wird.
Weblogs stellen zwar einen neuen Trend dar, von dem häufig gesprochen wird, sie erreichen aber nicht die kritische Masse

Das Web im neuen Gewand

der Nutzer: Im Juli 2008 konnten nur 24 Prozent der Onliner
mit dem Begriff ..Weblog« überhaupt etwas Konkretes verbinden, nur sechs Prozent der deutschen Internetnutzer gaben an,
schon einmal ein Weblog besucht zu haben . Dabei wird in einem
besuchten 810g meistens nur gelesen (61 Prozent) und nur selten
kommentiert (39 Prozent) .
Als problematisch erweist sich in diesem Zusammenhang,
dass Weblogs für 29 Prozent der Onliner ein schwerwiegendes
Glaubwürdigkeitsproblem haben. laut der ltARD/ZDF-OnlineStudie 2008« ist eine Mehrhei t von 71 Prozent skeptisch und
misstraut dem Wahrheitsgehalt von Web logs. Dies ist nicht nur
fur Blogs typ isch, sondern auch fur andere Web 2.0-Angebote.
Die mehrheitliche Skepsis bestimmt die Passivität der Nutzer: So beschränken sich 95 Prozent der Wikipedi a-Nutzer auf
den Abruf von Inhalten; nur 3 Prozent würden Beiträge für die
Online-Enzyklopadie selbst schreiben. 51 Prozent der Anwender
rufen Videodienste ab, jedoch nur von 3 Prozent werden Inhalte
regelmäßig hochgeladen. Über 90 Prozent der Internetnutzer
nutzen beim Surfen ausschließlich Su chmaschinen und E-Mails .
Das Web wird immer noch passiv als ein Inst rument benutzt
Nachschlagewerke, Kommunikation und Preisvergleiche beherrschen den Alltag des Nutzers.
Fürviele Online-Nutzer ist Web 2.0 im Moment keine Option,
da sie nur wenig Interesse an den neuen Möglichkeiten haben .
.. Eigeninitiative der User ist noch zaghaft«, meinen die Experten,
.. die Nutzer bewegen sich - wie bei den klassischen Medien auch
- weiterhin eher in einer >lean -Back<- Haltung durchs Netz, das
aktive ,leaning Forward < ist mit den heutigen Vorstellungen der
Nutzer noch nicht vereinbar«.
Interessanterweise zei chnet sich ein Umbruch der Nutzergewohnheiten aus. So ist bereits ein Drittel der Nutzer an einem
aktiven Umgang mit dem Netz - durch Blogs, Webanwendungen
oder soziale Netzwerke - interessiert, bei den 14- bis 25-Jährigen
sind es 57 Prozent.
Auch die Zugriffsraten sind kennzei chnend für die neue Webdynamik im deutschsprachigen Raum. So führen die sozialen
Netzwerke SchülerVl (6,8 Milliarden Seitenaufrufe), 5tudiVl
(5,2 Milliarden) und wer-kennt·wen.de (3,5 M illiarden) die Liste
der IVW-gepruften Angebote mit Abstand an.1O Die T-OnlineSeiten landen laut IVW-Daten mit 2,94 Milliarden Seitenaufrufen
nur auf Platz vier.

10 IVW Online

Nutzun~daten,

I

TIPP

Mehr zum Thema " Podcasling«
finden Sie in Kapitel 14.

August 2008, http://IWlonli nult/

aU5weisunBl/~a[(h/au5wei5!lng. php

1-4 Web2.Q in Deutschland

I 75

I

IVW OnIine Hutzungsdllten 01-2008

G _........
G......iIeI. PJvoIno~
GtmOkIoI.........

....

.

'"

Ult.zum

Nt,.;ot~

I

m
rn

:ll;fI(hNZ

["'"'., ..... ......, Qo

T.QnI...

c ...... ongol>at

I

~

<

125362TU I80H \.I 142

<

1&0 26(1)01

<
<

r'IIIIOiI! 110 o.r AlICiIlI61a

<~12S1 {,.I.j

2Uli ~ 01

L. ..... 19n

m
<

~ .

1.f)I$~,"

~ ~<IIr ..... t1IIP"llI\ ""AlI!jOI>CII'

"""N

I,. 411

01~

362 /80)

B1G.Ol0 JGG

"
~11

~

123E181Hgt

I

m..l~~

rw

6421H l0

86i:lOi 113

~ 1119 ~16

7!1'l

~1

~O'230

••

105
56/181.99 lJ

<

81115S16
12 & {öl

s.t, (.j ~108

<

5101ißl

50165' ~

SPEGEL 010'"

.~

032

1&0 !l6i '166
51156 !e9
211 l:r.l 161)

....m.

~'JII

91 000 see 1 m 000 SJl

0I;I 1' 9 901Q 156O !>I 9 56Il
~ Oll 93S I J02 U-I I 'III

-"
"m

i

!

~_.

.-

I

:JS 0731191:2S

v."".,.,. •• _ " ', _ ...

Abbild ung 1.54 ..
Soziale Netzwerke im Trend :
Geordne t nach der Anza hl von
Seitenaufrufen führen Schüle rVZ,
StudiVZ und wer-kennt-wen.de
die Us te der IVW-geprüften
Online-Angebote in Deutschland
mit Abstand an . (Quelle: http://
ivwonline.de/ausweisung21
searchlausweisu ng. php,
Linkcode 036).

.... ............

52Hl"",

Au ch die Popularität von Web logs im deutschsprachigen Ra um
nimm t zu. Laut einer Stud ie der »Allensbacher Computer- und
Technik-Analyse« benutzten bereits Ende 2007 19 Prozent der
Deu tschen On li ne-Tagebücher, zwei Prozent davon regelmäßig.
Eine wichtige Rolle im Kampf gegen die Skepsis der Öffentlichkeit spi elen aktive Blog-Betreiber, soziale Netzwerke und
neue Web 2.0-Dienste aus dem deutschsprachigen Raum. Einige
konnten weltweites Ansehen gewinnen und gehören schon
längst zu etablierten Diensten, die weltweit benutzt werden. Die
populärsten Sei t en des neuen Mediums werd en im Folgenden im
Schnelldurchlauf vorgest ell t.

141

.. Abbildung 1.55
BUdblog.de

76

Blog s

In der deutschen Blogosphäre st ellen BILOB/og, Spreeb/ick,
Basic Thinking (ht tp://www.basicthinkingde/b/og/) und Nerdcore
(http://www.nerdcore.de)diepopulärstenWeblogs dar, die auch
den größten Einfluss auf die deutschsprachige Online-Gemeinde
haben.
BILDB/og (http://www.bi/dblogde), ein tägliches Watchblog
über eine große deutsche Boulevardzeitung, recherchiert fragwürdige Artikel, deckt Fehler auf un d hält fes t, was nach der Meinung der Blag- Betreiber (Medienjournalist en) diskussionswürdig
ist. Dabei werden erfundene, irrefüh rende oder unzureichend
recherchierte Artikel gen au unter die Lupe genommen, erläutert
und der Öffentlichkeit präsentiert. BILOb/og verfügt über eine
solide Leserschaft, die meh r als 42 .000 Leser umfasst. Das Pro-

Das Web im neuen Gewand

jekt wurde 2005 mit dem »Gri mme Online Award« in der Kate·
gorie Information ausgezeichnet
Richtig populär wurde Spreeblick Chttp://www.spreeblick.com).
ein tägliches Online-Journal über Kultur, Technik und Unterhaltung, nach der öffentlichen Auseinandersetzung mit Geschäftspraktiken des Klingelton-Anbieters Jamba. Spreeblick sorgte im
Dezember 2004 für ein enormes Medienecho - im Netz aber
auch in den deu tschen Print medien. Das Tagebuch wird von einer
Redaktion unter der Leit ung von Johnny Haeusler geführt . Spreeblick wurde 2006 mit dem "Grimme Online Award c für kreative
Leistu ng, Gestal t ung und Textquali tät ausgezeichnet

1.4.2

I
SPREEBlICK,
.. Abbildung 1.56
Spreeblick.com

Soz ia le Net zwerke

Laut IVW--Mediadaten sind SchülerVI (http ://www .schue/ervz,
net) und St udiVZ Chttp:// www.studivz.net) die populärsten sozialen Netzwerke im deutschsprachigen Raum. Inspiriert vom
Erfolg der amerikanischen Studenten-Plattform Facebook, haben
drei Berliner St udenten StudiVZ ins Leben gerufen - ein Projekt,
das eine intuitiv bedien bare Plattform bietet, auf der sich Studie·
rende austauschen können.
Es hat nicht lange gedauert, bis das Projekt auf weit ere Zielgruppen eMiei tert wurde. So soll SchülerVZ ein europaweites
Verzeichnis yon Schülern sein, und MeinVZ richtet sich an Men schen, die ihren Studienabschluss schon hinter sich haben. Die
VZ-Netzwerke yerfügen mittlerweile über zehn Millionen registrierte Mitglieder.
STUDI VERZEICHNIS

<t

~

TIPP
Web 2.0 in Deutschland:
Die in Deutschland entwickelten
Web 2.0-Projekte wie etwa
SrudiVZ, Mister Wong , YlGG und
MyVldeo werden häufig kritisiert, da sie meistens nach dem
Schema großer amerikanischer
Netzwerke agieren und nur wenig Kreat ivit at zeigen. Dies ha.t
auch Konsequenzen : So reich te
Facebook wegen des . Missbrauchs von Facebooks geistigem
Eigentum .. Ende Juli 2CX)8 Klage
bei einem US-Bezirksgerich t ein.
lesen Sie dazu auch . Web 2.0 in
Germany: Copy/ Paste Innovati on
or more7« (http:/ /www.techcrunch .com/2007/OS/ 14/we b -lIn- germany-copy- past nnovatfon-or-more , Unkcode 037).

e-'

...

l)u

btot MdlJlred lf1 U I

"'~

-'"
MMeGf~

"","'ori

N_:
(OroS.,

~
608 IoIItgioo....

K"r:egorIe TedI&.lnI:omet

I'IW""~.

Oie Di""'.,",

gent

_er. DeI1 !1elr~

ZOOI VeoMlero~

istQefr~ ,

Nane:

Fi"ofox < Der eir2ig .......e

Grölle:

740 Iotgieleo
Tech&.lnI: .. net

>
K~ie

.. Abbi ldung 1.57
Studiverz eichnis Studivz.net

1-4 Web 2.0 in Deut schland

I n

Ein anderes Konzept der sozialen Vernetz ung kommt bei Qype

(h ttp://www.qype.com) zur Geltu ng. Do rt lassen sich beliebige
Dienstle ister, Geschäfte und sonst ige Anbieter vorstellen und
bewerten - natü rlich von akti ven Webnutzern und auf freiwilliger Basis. Die Gr undidee lautet: . Menschen bewerten Lokale,
erzählen über ih re Interessen und fi nden Gleichgesinnte. «
Dabei werden insbesondere Kneipen, Restaurants und Ausflugsziele deutsch landweit verschJagwortet. Wer also nach einem
geeigneten Unterha ltungslokal sucht, wird bei Qype schnell und
g ut bed ient.

•
Abbildung 1.58 "
Oipe.com

Soda l Bookmarking

~~ MISTER
.. Ab bildung ' .59
Mister-Wong.de

WONG

Der charman te Name des Netzwerks Mister Wong (http://www.
mist er-wong.de) lässt vermut en, dass das Projekt einen pragmat ischen Dienst leistet und diesen mit aller Sorgfalt erfüll t. Und in
der Tat : Die Plattform der Bremer Service-Agentur Construktiv
GmbH stell t ei ne Alt ernative zum int ernational dominierenden
Dienst DeliCious dar. Neben dem Verwalte n von Bookmarks können Nutzer des Dienstes Gruppen bilden und abgelegte Lesezeichen von Freunden, Beka nnten oder auch Unbekannten verfolgen . Bei Mister Wong wurden mittlerweile über 5,5 Millionen
Bookm arks abgelegt (Stand August 2008) und mit mehreren Mi llionen Tags versehen.

.. Abbildung ,.60
Yigg.de

78

I

1

1.4.4
New s-Community
Hinter dem Na men YiGG, der wohl an die populäre englischspra chige Nachrichtenplattform Digg angelehnt ist, verbirgt sich
tatsächlich das gleiche Konzept mi t einem deutlich erweiterten
Angebot an nützlichen Funktionen. Realisiert mit Ajax, kann man
bei YiGG (http://www.yigg.de) eigene Nachrichten und Videos
einreichen sowie Beiträge anderer Nu tzer kommentieren und
bewerte n. Je mehr Bewertungen ein Bei trag vorweisen kann,
desto höher steigt er in seiner Ka tegorie auf. Die beliebtesten

Das Web im neuen Gewand

I

Artikel landen auf der Hauptseite des Dienstes. riGG kombiniert
Social Bookmarking, Blogs, RSS- Feeds, Nachrichteneint räge, Tags
und Videos.

1.4.5

Multimedia-Portale

Das deutschsprachige Fotografen-Porta l Photo(ase (http ://www.
photocBse.com) ist eine • Plattform f ür lebensna he, ehrl iche Fotografie«. Profis und Amateu re können ihre Werke der breit en
Öffentlichkeit zur Schau stellen und die Bilder anderer Nutzer
kommen t ieren und herun terladen. Ganz im Sinne übli cher Com munity-Portale werden hochgelad ene Bilder verschlagvvortet und
in sogenann t en Ligh tboxen nach Rubriken abgelegt.
Jeder Benutzer kann bei Photocase beliebte Fotos in einem
persönlichen Fotoalbum zusammenstellen. Dabei können alle
Fotos für gewerbliche und private Zwecke velWendet werden.
Mit Photocdse können Fotografen Geld verdienen. wahrend
Fotosuchende auf der Plattform preiswertes, hochwertiges und
außergewöhnliches Fotomaterial für ihre inspiration finden.
Sevenfoad (http.//www.sevenload.de) ist eine Multimedi aPla ttform zur VelWalt ung von Videos und Bildern und stell t eine
elWähnenswerte Mischform aus den besten Funktionen von YouTube und Flickr dar. Auf den Seiten des Dienstes können Benutzer

.A.Abbildung 1. 61
Photocase.com

-- _-_.

_ _ sevenload 0

......
....

Bilder und Videos hochladen, taggen und in Alben organisieren.
Außerdem können aktive Nutzer eigene interaktive Videoformate und Shows veröffentlichen - mi t eigenen Modera toren
und Schauspielern. Selbstverst ändlich lassen sich auch Bilder
und Videos anderer Mit glieder ansehen, wodurch man .Seven loader« mit gleichen Interessen finden und kennenlernen kann.
Verwandt e Dienst e biet et et wa myvideo.de an.

--- gJ- i!_
.•
~
_
.
- ~
-_..

I!t Myllideo

' ·,::aA

-

.,

..-

-

....

.A. Abbildung 1.62

Sevenload

-'-

,."

- ".

... Abbildung 1.63
MyVideo.de

1-4

Web 2.0 in Deutschlan d

I

79

LYC05i@.
.... Abbildung ,.64
lycos iQ

146
I<o llektive Intelligenz
Eine wesentliche Komponente des Netzes in ~ zweiter Auflage<.: ist
die Sammlung und Nutzung kollektiver Intelligenz. Außer Wikipedia bietet Lycos iQ (http://iq./ycos.de) einen Webdienst, der als
Wissens-Community und Plattform für Wissensfragen und Mei nungsaustausch gedacht ist Auf den Seiten des Netzwerks können Internetnutzer Fragen stellen, die andere Nutzer beantwor-

ten, und dadurch soziales Kapital sammeln. Der Haup tzvveck der
Plattform besteht darin, Webnutzern eine . menschHche. Suche

durch Experten anzubieten. Außerdem kann die Plattform zum
Ablegen sowie zum Verwal ten von lesezeichen benutzt werden.
Ein renommiertes Netzwerk, das seit 1996 das gleiche Ziel im
deutschsprachigen Raum verfo lgt, ist die Plattform wer-welss-was
(http://www.wer-weiss-was.de) - ein Experten- Netzwerk zum
Austausch von Wissen.

147

Dinge übers Netz tau sc hen

Die Vorteile de r Humanisierung des Netzes werden durch die
zunehmende Popu lari tät solcher Dienste wie Hitflip (http://www.
hitjfip.de) deutlich. Die größte Tauschplattform in Deutschland
.. Abbildung 1.65
Hitflip.de

bietet über 750.000 unterschiedliche Artikel an. Dabei basiert
das System auf einem einfachen Prinzip: Jeder angemeldete Nutzer bietet Bücher, DVDs, Musik-CDs und Spiele auf den Seiten
der Plattform zum Austausch an. Ist eines der Mitglieder des
Netzwerks an diesem Angebot interessiert, so verschickt der
Eigentüme r dieses an die entsprechende Adresse. Nachdem dies
geschehen ist, erhält der Anbieter ein " flip s-Guthaben., mit dem
er die Artikel anderer Nutzer bestellen kann. Sämtliche Angebote
werden nach ihrer Aktualität und Quali tät bewertet Teilnehmer können sich durch eine gute Repu tation zusä tzliche »flips.
sichern.

für jeden erhaltenen Artikel zahlt der Nutzer in der Regel
99 Cent , kann aber variieren. Produkte bleiben im Eigent um des
Besitzers und werden bei jeglicher Beschädigung durch di e Pl attformbetreiber ersetzt.

1.5

Ressourcen

Über das Phänomen Web 2.0 wird viel gesprochen und geschrieben; aber nur wenige Beiträge helfenjedoch, auf die Spuren nach
der wahren Bedeu t ung des .. erneuerten. Mediums zu kommen.
Die fol gende kompakte Übersicht soll Ihnen weit erführende
Quellen und Nachschlagewerke zum Thema liefern.

80

I

1

Das Web im neuen Gewand

I

1.5.1
~

Online·Artikel
Tim O'Reifly : .What is the Web 2.07 Design Patterns and

Business Models (or the Next Generat ion of Software.
http://www.oreifly.de/artikel/webZO.html(linkcode 038)
http://www.oreilly.de/artikellweb20_uans.htmf(deutsche
Übersetzung) (linkeode 039)

.. Bubble Map Web 2.0
http://kosmar.de/a(chives/ZOO5/ 11/ 11/ the-huge- c/oud-/ens·
bubble-ma~web2Q1 (Linkeode 040)

.. Willi Schroll, Andreas Neef: . Web 2.0 - Was ist dran?«
http://www.perspektive·bldu.de/ wis 5erV0609a/0609 a h tm

(li nke ode 041)
.. Paul Graham: . Web 2.0.
http://www.paulgraham .com/web20 .htrnl (U n kcode 042)
.. Marla 5axtus : ,.Die Humani sier ung des Netzes«
http://WWN.zeit.de/ 2005/ 35/C-Humannetz (Unkeode 043)
.. Joshua Porter : . Introduct ion to Web 2.0.

http://WWN.squidoo.conv'introtO'Neb201 (Linkeode 044)
1.5.2
..

Online-Ressourcen

. Dr. Web: Web 2 .0 Quellensammlung«
http://www.drweb.de/ weblog/weblog/?p=4 5 7 (Lin kcode
045)

..

Das englischsprachige Web 2.0-Sammelalbum

http.//www.econsultant.com/web2/ (Linkcode 0 46)
.. Das deutschsprachige Web 2.O-Sammelalbum
http://www.web2null.de (Linkeode 047)
.. über 100 soziale Netzwerke aus Deut schland in einer
Übersi cht :
h tt p.// www.zwelnull .cduber-1 00- soä a ,- netwofks -ausdeutschland (Linkeode 048)
.. Wikipedia: Web 2.0
http://en.wikipedia.oriYwikilWeb-2 (Linkeode 049)
..

. 10 Free E-Books about Web 2.0«
h tt p.// twopoln touch. com/2006l1 0/3 1/1 0-1fee- ebook s- abou t-

web-201 (Linkcode 050)
.. Dion Hinchcliffe's Web 2.0 Blog
http://web2 .wsj2 .com (li nkeode 051)
.. Read/Writ eWeb Magazine
http://www.readwriteweb.com (Linkcode 052)
Literat ur
.. Tom Alby: . Web 2.0. Konzepte, Anwendungen , Technologien«
1.5 .]

1.5

Ressourcen

I

81

.. Gottfried Vossen, St ephan Hagemann : ,. Un leashing Web 2.0 :
From Concepts to Crea tivity«
.. James Surowiecki: . The Wisdom of Crowds «
.. Albert-Laszlo Barabasi : »Social Network Technol ogy - Li nked ,
t he New Science of Networks«
..

Robert Scoble, Shellsrael : " Naked Conversat ions: How Btogs
are Changing t he Way Businesses Talk w ith Customers«
.. Alan Moore, Tomi Ahonen : ,.Communities Dominate
Brands«
.. Chris Andersen : ,.The Long Tail «
.. St even Johmon: • Emergence«
.. Paul Graharn: ,.Hacke rs & Painters«

82

I

1

Das web im neuen Gewand

2

Designkultur Web 2.0

Nach einem ausführlichen Ei nblick in die g rundlegenden Mechanismen des Web 2.0 lernen Sie nun neue Techniken zur Realisierung standardk on former und ansprechender Web 2.0-Seiten
kennen. Dabei machen Sie sich mit neuen Ansätzen zur Text- und
Farbgestaltung sowie mit de m Design verschiedener SeItenele-

mente vertraut . Zuerst betrachten wir aber die typischen Design merkmale des »neuenc Webs sowie einschlägige Designt rends
und neue Designkonzepte.
Das Design des Web 2.0 zeichnet sich insbesond ere durch
neue kreative Ansätze und sorgfältig durchdachte Entwürfe aus .
Designer verleihen Jedem Seitenelement mehr Bedeutung und
Ausdruckskraft. Eine einheitliche Organ isation und Stru kt ur der
Seiten wird zunehmend wichtiger. In Kombination mit gezielt
ausgewählten Designelementen lassen sie eine Vielzahl an Pro·
jekten entstehen, die durch eine visuell ansprechende und ben ut·
zerfreundli che Sei tengestaltung zu beeindrucken wissen .
Im Mi ttelpunkt des Geschehens steht dabei der einzelne Besucher. Dieser soll sich auf der Seite schnell zurechtfinden und die
gesuchten Informationen fin den können. Dementsprechend se t·
ze n sich verschiedene Sei tentypen im Web 2.0 - Blogs, Comm unity-Netzwerke, Portfolios, Nachrichtendienste und Unternehmensseiten - zum Ziel, Infor mationen deutlich und sympath isch
zu präsentieren, wobei der Inhalt prägnant und kompakt aufbereitet wird .
Nimm t man die Werke der Designszene genauer unter di e
lupe, so kann man typische Merkmale der Designkul tur im
Web 2.0 erkennen . Diese betreffen die St ruktur der Sei ten, grafische und typografische Techniken, Seitenelemente sowie neue
Konzepte.

2 Designkultur Web 2.0

I

83

2.1
Se itenstru kt u ne ru ng
Eine strikte Trennung des Seitenlayouts in mehrere Teile, die
einzeln behandelt und gestaltet
werden können, scheint heute
beinahe ~elb~tverstd.ndlich zu
sein. Diese Art der Seitenstrukturierung weist Vorteile in dynamisch generierten Weblogs,
Conten t-Management-Systemen
und Wlkis auf.

Diese Tendenz ist auf die Etablierung typischer Must er für den
Scanvorgang der Seiten zurückzuführen. Da Suchergebnisse in
Suchmaschinen meistens auf der
linken Seite angezeigt werden,
erwartet der durchnittliche Nutzer
Inhalte eben dort. Seitenbetreiber
wissen das und passen ihre Layou ts dementsprechend an . Mehr
dazu können Sie in Kapitel 8,
• Barrierefreiheit und Usability ..,
nachlesen .

Der Aufbau einer Seite ist eines der wesentlichen Elemente, auf
die ein Seitenbesucher sein Augenmerk richtet - häufig unbewusst. So wird eine neue, bisher unbekannte Seite von einem
Besucher in Bruchteilen von Sekunden nach Zusammenhängen
gescannt und in Blöcke zerlegt. Wichtig für die Benutzererfahrung, die sogenannte User Experience, ist dabei die Tatsache, dass
der Designer diesen Prozess der Gliederung unterstützt.
In der Designszene spricht man von einem gelu ngenen Design,
wenn dieses entweder sofort ins Auge springt oder unsicht bar
bleibt. Ein unsichtbares Design ist häufig weit effizienter als ein
buntes Farbenspiel, vor allem weil es nicht die Gestalt der Seite
betont, sondern den Inhalt der Beiträge. Und in der Tat - zusätzli che Komplexität kann leicht zu einem InformationsoverkilJ führen, während Einfachheit und Schlichtheit intuitiv sind.
Dabei sind einfache Strukturen meistens schwieriger zu realisieren als komplexe Entwürfe. Sämtliche Seiteninhalte auf das
Wesentliche zu reduzieren, eindeutig zu beschreiben und in
einer ubersicht lichen Form zu präsentieren, ist eine anspruchsvolle Aufgabe, da sämtliche Entschei dungen der Nutzer genau
berücksichtigt werden müssen. Die perfekte Erscheinung einer
Seite wird somit nicht nur durch ein harmonisches Zusammenspiel der Farben erreicht, sondern durch die Einbettung in einen
entsprechenden strukturellen Rahmen. Eben dieser Rahmen wird
in Zeiten des Web 2.0 meistens einfach und übersichtlich geha lten.
2 .1.1

[Drei-Schi chlen -M odell]
Das Drei-'Xhichten-Modell definiert drei Schichten einer Seite:
Textinhalte (2. Schicht) werden in
das Skelett der Seite, also in struk·
turierte BlDcke (1. Schicht), eingefügt und durch grafische Elemente
(3. Schicht) zu einer visuell ansprechenden Seite (Internetpräsenz) erweitert.
Häufig wird darüber hinaus eine
viert e Schicht in das Seitenkonzept integriert - etwa wenn multimediale Komponenten wie Flash ,
Audio - oderVideo-Streams zum
Einsatz kommen sollen.

84

2 Designkultur Web 2.0

Seitenstrukturen

Zwei- und Orei s palter

Basierend auf dem Drei-Schichten-Modell greifen Webdesigner
häufig zu uberschaubaren zweispaltigen Strukturen. Dabe i erfolgt
eine strikte Trennung zwischen den eigentlichen Inhalten der
Seite und den Seitenattributen (etwa Navigation, Kontaktinformation, Links und Ähnliches). »Content is the king« lautet das
Motto der Szene. Webdesigner stellen den Seiteninhalten ge rne
viel Platz zur Verfügung; die Inhalte werden dabei meistens durch
ein an der linken bzvv. rechten Seite platziertes Navigationsmenü
(Sidebar) begleitet.
Waren vertikale Navigationsmenus vorher meistens auf der linken Seite von Webseiten zu sehen, so verschiebt sich die Navigation nun zunehmend nach rechts oder gibt den Weg frei fur einen
horizontalen Ansatz. Manchmal ergänzt eine sekundäre vertikale
Navigation in der rechte n Sidebar die primäre Navigation, die
sich meistens über den Kopf der Seite erstreckt.

(55 und XHTML im Trend 1 1m Web 2.0 werden Webseiten
grundsätzlich mit einem Gerüst bestehend aus XHTML, (S5 und
JavaScript realisiert, um möglichst flexible Seitemtrukturen , eine
benutzerfreundl iche Seitendarstellung und eine ansprechende
Interaktivitat zu ermöglichen.
JavaScript setzt sich zunehmend durch, insbesondere wenn ein
Webautritt das Interesse der Besucher für gewisse Produkte oder
Dienstleistungen gewinnen soll. Interaktive Medien wie Flash
oder SHverlight kämpfen zwar unermüdlich um ihre Stellung auf
dem Markt, konnten sich aber bisher nicht als t reibende Kräfte in
der Szene durchsetzen ; insbesondere im Hinblick auf eine universelle Seitendarstellung in verschiedenen Ausgabemedien konnte
Flash nur wenige Erfolge aufweisen. Dagegen sind CSS-basie rte
Ansatze recht einfach zu handhaben und meistens auch einfacher
zu nutzen . Doch im Gegensa tz zu 5i1verlight wird Flash relativ
häuflg eingesetzt: meistens zu ganz speziellen Zwecken wie etwa
Fotogalerien, Slideshows, Überschriften (siFR) und Videopräsentationen. Als alleiniges Designelement wird Flash selten velWendet. Reine Flash-Seiten tauchen zwar immer wieder einmal auf,
stellen jedoch eher eine Ausnahme dar und bieten einen Spielplatz für das Design interaktiver PortfoliOS, Spiele, Werbekampagnen und kollaborativer Projekte .
Moderne webauftritte werden
meistens nach dem bewährten
Schema Header, ContefIt, Sidebat;
Footer gestaltet. Bei kommerziellen
Projekten sind manchmal zusätzlich
sogenannte Feature-Blöcke zu sehen
- auffällig brei te Banner, die unter
dem Header angebracht werden
und die Botschaft der Seite klar und
wirksam kommunizieren sollen. Sie
ähneln den Werbeslogans in Wer,......
bebroschüren bekannter Kaufhäu...
ser, verfügen allerdings zusätzlich
... ...
über die Möglichkeit, Inhalte interaktiv zu transportieren.
Bei einer modernen Seitengestaltung gilt es insbesondere, einzelne wi chtige Elemente durch eine
geschickte Farbauswahl oder grafische Betonung hetvorzuheben. Zu diesem Zweck werden häufig
starke, auffallende Kontraste eingesetzt, etwa um die Navigati on
oder wichtige Details st ärker zur Geltung kommen zu la ssen (vgl.
Abbildung 2.3).

I

TA bbi ldung 2.1
ExpressionEngine.com mit einem
breiten und übersichtlichen
Feature-Block im oberen Bereich
der Seite. Besucher sollen von der
Funktionalität und der Qualität
der Software überzel€t werde n.

~

_

_

~

_
. ....... __
. ... _-___
---_
....__..- _.-_---_.
_
_
__
......-._
------..
_---- .. -- -_
__
,
_
--__
...
_-----.... _...___-_
. . . ......__
._oc
-_
_.__---........... ...

.. .
,.... ... ..., ,.. .... .
.....
IU...' U 1...
I ·s·
-..
v''-:0 '1
_",\
._.
_ _..

_~'"

,~

Recl!flt BIotI Entnes

..
,... ..

2.1

_~.-

Seitenstrukturen

85

-_ ..

.

Wh,ot·, o..YowV.okll/ _
_ . ~_._

.... _ _

---~------

_-

_..

~_~

~._ - -~

_

_

.. __

_

_' _ _ _ '00

• .. __ .-._--- ._--_._----_._-------

_.-------_._.-----_.
-_._
..-__ . --'
.._w· __ __ ·___ ·
~

:::-=.:..._._ ..-

...__----..-._----......-_
_-_--... _----.......
............. ..... ...--'

,, ~

-

.. Abbildung u
Simpler Zweispalter mit schöner Typografie. starkem Kontras t und bunten visuellen Elementen. So hinterlJ.sst man
einen guten Eindruck. Der linke Bereich wird für die Navigation benutzt. Das ist im Web 2.0 heu te eher die Ausnahme.
(Quelle: Wlshlngllne.cominotebook)

.. Abbildung ~ . 3
Dan Rubin nutzt ein auffallendes zweispalt iges
Layout mit primärer Navigation im Seitenkopf und sekundärer NaVigation im rechten
Sei lenbereich . Wegen der unterschiedlichen
Hintergrundfarben haben die Seiten blöcke ein
unterschiedliches Gewicht auf der Seite.
(Quelle: Superfluousban ter. org)

_
_
__
---_
__ - ---_._---_
_-__-_ _--_.
-------

...====--"===-.
,,-_.. .. ..- --".--.. .
.._--.. .. .._._........_
.
...

---------...........--------_.__----....-

.. Abbi ldung 2.4
Auffallendes, buntes und dennoch übersichtliches
zweispal tiges Layout bei einem Portfolio
(Quelle: Komodomedia.com)

86

1

Designkultur Web 2.0

. ..

.. Abbil dung 2.5
Eine moderne zweispaltige Webseite im
Retro- Look. (Quelle: NYMoon.com)

' ,IJII· I,\.N

-

------

. WERN CU

----,
==-::::::
---_...!:.
__.. _._---

,~

=---=----- -- -

_
_ ._---

...
---.. _._.

I

-==--

- -=-

-~_ . -

--_.---

::::..-::----

... Abbildun g 1. 6
Es lässt sich kein Trend für dunkle oder helle Hintergründe
erkennen . Designer riskieren unterschiedliche Ansätze. Beim
zweispaltigen Ansatz au(Vlget .com/extend werden bunte , auffällige Farben auf dunklem Hintergrund eingesetzt.

=--

... Abbildung 2.7
Ein übersichtliches zweispaltiges Designlayout bel Subdued.net. Zwei t rangige
Elemente werden in wenig auffallenden
Farben und in kleinerer Größe pr3.sentiert .
Auch mit wenigen Farben lässt sich vieles
erreichen.

_--_
-_

---...- '_. __ .... ._----.
... . 1"'-... __ .
"-_._--..........._
......
..
....
__
...-_
..........
. ---.......__""'.-,._--_. _... - -----"-'--"_.",. -

._-- ,_._. ~

~ =-

-~

'
'

_~--_.-

... Abbildung 2.9
Ein buntes. durchdachtes und abgerundetes Design
bei fall. tnvacatlon.com
... Abb ildun g 2.8
Klar und deutlich. Zweispaltiges layout bei 404xd.com

Insbesondere spielen dabei Hintergrund(arben eine wesentliche
Rolle. Auf den ersten Blick passive, lediglich begleitende Töne
bringen eine _visuelle Ordnung. in die Seitenstrukt ur und lassen
den Besucher einzelne Elemente besser und schnelter erkennen
(vgl. Abbildung 2.12).
Zweispaltige Strukturen werden häufig durch eine begleitende
dritte Spalte ausgebaut, die tur eine deutlichere Informationsgliederung sorgen soll . Bei einem Beitrag kann eine zweite Spalte
velWandte und weiterführende Informationen zum Thema prä2.1

Seilenstrukturen

87

sentieren, während die dritte Spalt e Navigati onsoptionen, Kontaktinformationen, Suchmöglichkeiten oder Ähnliche5 anbietet.
Manchmal wird die dritte Spalte auch zur Präsentation von Lesezeichen, Bildern und sinnverwand ten Seite n benutzt (vgl. Abbildungen unten).
.............. 0'

=-=- -__

~-

-0_- ----._-...

. --

-~--'

..,"""',,,--"-- -~-.lIjI-

Abbildung 2.10 ...
Sei teninhaJtewerden auf mehrere Spalten ve rteilt. Jede Spalte
bietet Inhalte, die einander ergänzen, aber zu unterschiedlichen
Themen gehören (Quelle: KyleHaskins.com, Snook.ca, Vivabit.
corn, Designdisease.com, DavidMlhm.com, Enlighten.co.nz,
EdMerrit.com).
88

2 Designkultur Web 2.0

. .....
_
._
-- - --~_

- - ---

........

-

-

"""-

-

-

-

._

I

.~

Checkout
Get a Mac. St art <lI StOle.

...._-_.
__..-..-...
-"
."--"-_._
------_
-'---'-'-..... . _-...-

-_
D

D

__

---........---._--_
--._.....--_.-..- .......- .....
--_._.
_"'___ -----_M __"
----~--~---,

-

-.

-

.-

•

2.1.2

.. Abbildung ~ .11
Checkoulapp.com hat drei Spalten unterschiedlicher LAnge und
Breite. Diese passen sich dem
Inhalt an und sollen für eine wirku~svolle Prohentation sorgen.

Zentral e Positionierung der Inhalte

Bei der Ausarbeitung neuer Webprojekte tendieren Designer
immer häufiger dazu, das Layout zentriert zu positionieren . Die
ungeschriebene Regel, möglichst viele Informationen in den oberen Teil der Seite zu integrieren, damit der Benutzer ohne vertikalen Seitendurchlauf auskommt, wird der visuellen Gestalt ung
der Seite sowie der lesbarkeit von Inhalten preisgegeben. Anstatt
Inhalte In einen brei ten Block einzubetten, werden sie zentriert
und in mehrere vertikal hintereinander folgende Blöcke verteilt.
Dadurch entsteht im Browserfenster mehr Freiraum, wodurch
Bes ucher sich besser orientieren und die Inhalte leichter wahrnehmen können (vgl. Abbildung 2.12 und 2.13).

2.1.3

Kreativität und Kompaktheit:
Trend zu Mehrspaltigkeit

Wahrend Freiberufler und Designagenturen eher auf Einspalter,
Minimalismus und einen starken visuellen Eindruck setzen, ist
bei größeren Blogs der Bedarf nach einem mehrspaltigen Ansatz
groß. Einseitige Webauftritte stellen Designern eine leinwand
zum Experimentieren bereit, auf der sie ihr Können zur Schau
stellen können . Andererseits gerät das Bestreben der Designer,
die Information möglichst frei zu gestalten, bei größeren Projekten leicht ins Schwanken und erzwingt einen Kompromiss
zwischen der visuellen Freiheit und der kompakten Gestaltung
großer Mengen an Information .
2.1

Seitenstrukt uren

I

89

..~-

",--

=

- . __ · .- 0._------------

- -----

=--==-":"=-=-~ -

lil[O O
.. Abbildung 2.12
Emot ionslive.co. uk, Bett erInteractive.com und PaniC.coml
coda setzen auf Minimalismus,
nutzen aber au ffallende visuelle
Elemente, um den Nutzeranzusprechen.

Dabei scheint sich imbesondere in let zt en Jahren zunehmend ein
Trend zur Mehrspaltigkeit zu ent wickeln. Seiten layouts werden
kompakter aufbereitet und sorgfaltiger strukturiert, sodass einzelne Seitenbereiche deutlicher als zuvor voneinander getrennt
sind. Das primäre Ziel der Entwickler bei einem solchen Ansatz
ist es, Inhalte direkter, deut licher und somit effektiver zu kommunizie ren. Was bei zwei Spalten auf der ganze Seite verteilt werden muss, kann beispielsweise mit vier Spalten übersichtlicher
dargestellt werden . Wicht ig ist dabei, dass Übersicht lichkeit und
Schlicht heit der Präsent ation auch hier bei Vorrang haben. Je
mehr Frei raum zwischen den Spalten vorhanden ist , desto leichter wird es für den Nutzer sein, sich auf der Seite zurechtzufinden
(vgl. Abbildu ng 2.13).

mozilla

.--

_
__.---_.___. __. _...- ... - .. --_
..
---. _._.
_."..- ...
-_
_0'-_
_
...
__--------_.-_._-----_
._
__.__
-_
... --.-_
--,.,--_
_--_
_------_.
_
._
_
_---"
_
..
.
_.
____
__.._-_.
_.. ------_
_
.
.
.
_--. _ _
"--=Ine_

.....

~_

90

2 Designkultur Web 2.0

~ -

concepT
SerIeS
..
....

......
...

.

--.
_
..... _
..
----

W-

~,

I _ I....

~~

Abbildung 2.13 ~
Au f der Startseite benutzt Mozilla
l abs (Jabs.mozilla.com) jeweils
fünf Spalt en im Header, im
Inhaltsbereich und im Footer. Alle
Spalten werden durch Freiraum
deu tlich voneinander getrennt.

• .

~

>-

iJi

...

.,

• .

-

•

_

•

.
........

... ....

"._M '_'"

....

.. .... ..,
••
......
..
~--

-_. --... --.-..._
_-_
. -_.
-_.
.... ..

. ,'

.....

...

=~

. ..

_--~

110
CreaUve services ror t he

----------_._--------_
--...__._-_.
................----- -_w
-____.
-- ---- -----

.Jortyy~!---_
"';;P;;I8J~.;;';.fi'.\._~l .:--ll
..

design-challenged developer

...

_~------­

....

...

--~~

_...__.
.....
_-. _..---_--

------_.-.- --..--------.------"
--_._
-----.---__. ...-

_--- __
_._---------".
----_._-----------._----"-"----------_.
---------------._._---------------_
....... _.--_-- ._--------_.
--------__. -_
----_
-_
.. _.-..
---_._-_._-_.
_._---------.---_."_..___-.
--------_.
-'-'--------_._----_...- ..------__
,---.--_.

_
.._------------._----_._._-

--_.,_ .~

~--_.

__ - "0' -

"" -

::,-----

Interessant ist dabei, dass Designer immer häufiger auf die Konsistenz der Präsentation zugunsten einer effekt iven Kommunikation der Inhalte verzichten. In der Praxis heißt dies, dass zum Beispiel die Startseite eines Auftritts häufig ganz anders strukturiert
ist als die übrigen Seiten. Oder einzelne Sei tenrubriken werden
unterschiedlich - sowoh r visuell als auch strukt urell - gestaltet. In
solchen Fällen dominiert das Konzept, den Nutzer zuerst du rch
ein visuelles Gesamtbild zu beeindrucken und das Wesentli che
kurz und knapp zu vermitteln, um erst spat er auf die Einzelheiten
des Angebots einzugehen.
Diese Vorgehensweise geht auf das bekannte 5hneidermans
Mantra (1996) zurück - .convey big picture first, reveal details
on demand •. Mit anderen Worten: Dem Nutzer wird zuerst eine
kompakte Übersicht mit den wesentlichen Inhalten angeboten;
die Details erscheinen dagegen erst später, wenn der Nutzer ein
Thema, für das er sich interessiert, näher bestimmt hat.

.. Abbildung 2.14
Mehrspaltlgkei l effektiv eingesetzt: 311hree.com . Fortysevenmedia.com. Sluffandno nsense.
co.uk. verSionsapp .com

2.1 Seilen strukturen

9'

_

.... .. -....--..

......
.,_C""OW',I.k.
......
""' _
_ _ frtI-d_

--

--

'- -

..... ..... ......
........................
our,._
w. ~

.--._--------

----------..._-~-=--_

--- ~ ----

n
I
... _.._-------_.
..._--.
--_.-._-_.,-'-

~---

... Ab b ildu n g 2.15

~~'

---,-~

Hicksd esig n.co. uk verwe ndet

unte rsch iedliche l ayou ts a uf der
Star tseite und a uf der Blag-Seite.
Die St ruktur und die Navigation
belder Seiten h aben - abgesehen
von visuell en Elementen - kaum
Ahnlic hke iten . Dies is t ty pisch fOr
Projek t e , d ie mit einem Blog aus-

gestattet sind .

\/5 .

Komplexität

Mehrspaltigkelt bedeutet nicht
unbedingt Komplexität- im

Gegenteil: Sinnvoll eingesetzt
können Spalten die Komplexität
einer Seite reduzieren , indem
sie die Inhalte gliedern und den
Nutzer bei seiner Suche nach
Inhalten besser lenken.

Hinweis
Mit welchen Werkzeugen ras ter-

basierte layouts realisiert werden, können Sie im Abschnitt
»C55-Frameworks.: In Kapitel 9,
»Web 2.0-layouts mit C55 umsetzen .. , nachlesen .

92

I

1

Designkultu r Web 2.0

.--_......
---_.
-----_._"-

Aus Usabtlity-Gesichtspunkten ist dies nicht immer eine gute
Idee, da die Ef"AIart ungen der Nutze r beim Navigieren der Seit e
nach Möglichkeit immer erfüllt werden soUt en. Doch gru ndsätzlich kommt es im m er auf de n Designansatz an, fü r den sich der
Entwickler entschieden hat. Grafisch ähnl iche Element e kön nen
schon genügen, um dem Seitenbesucher seine . Position.. auf der
Seit e de utlich zu ma.chen. Nicht jede I nkonsistenz f ührt notwendigerweise zu Usability-Problemen. W icht ig ist jedoc h, dass Nutzer in tu it iv, fa st unbewu sst auf den Seiten navigieren kön nen und
nich t durch unt erschied li che Strukturen vef"AIirrt werden.

2.1.4
Mehrspaltigkeit

-_._,~._-_.

~

Rast erbas ierte l ayouts

Mi t einer zunehmenden Anzahl von Spalt en wird es f ür den
Designe r imme r schwierige r, eine intu it ive und übersichtl iche
Darst ell ung zu erreichen. Im Wesent lichen liegt es daran, dass
Seiten besuchern bei meh rspaltigen Layouts de utlich mehr In format iom einheiten zu r Auswahl st ehen, als dies bei Ein- oder Zweispaltern der Fall is t . Sch ließlich soll jede Spa lte einen Zweck erfüllen und spezielle Informationen beinhal ten. Dam it ein Design
dennoch übersicht lich und benutz erfreun dlich wird, müssen alle
die se Einheiten leicht zu untersc heiden sein, die In halte w irkungsvoll vermitteln und perfekt in das Gesamt konzept passen.
Bei mehrspalt igen layou ts ist es also besonders wichtig, einen
ve rnünft igen st ruk tu rellen Rahmen zu realisieren, der nicht verw irrend, sondern unterstü tzend wirkt. Er wird in Web 2,O-Designs
häufig mith ilfe des rds t erbasiert en Ansatzes (Grid-based Approach)
entwickel t . Dieser zielt darauf ab, optimale Proportionen, eine
ausgewogene Komposi tion und konsistente Darstell ung sowie
eine st ri kte Ordnung im Layout zu erzielen , Diese Ziele werden
nich t in tu it iv erreicht, sondern präzise na ch Gesetz en der Sy mmetrie und Ordn ung berechnet und Schritt-fur-Schritt erreicht.
Grundsätzli ch stellen Rast er konsisten te Schemata fUr die
Platzierung von Objekten - Texte, Bil der und Videos - in einem

I

Layout dar. Spalten werden mit mathematischer Präzision ange·
ordn et und mit identischen Abständen versehen. Die durch ein
Raster fes tgelegten Proportionen werden durchgehend st rik t ein·
gehalten, wodurch ein abgerundete s und konsistenes Design fast
VNangsweise erzeugt wird.
Im Web 2.0 breitet sich dieser Ansatz sowohl auf Unterneh·
mensseiten als auch auf Blogs aus. Wahrend Unternehmen vor
allem eine solide, fehler freie und kon sistente Darstellung zu
erreichen versuchen, möchten Blog·Betreiber eher ihre Reputa·
tion und Autorität in der Btogosphäre mit einem ansprechenden
Magaz in-look unter Beweis stellen. Dies führt zu vielfaltigen
mehrspalt igen Layou ts, die visuell ansprechend auf berei t sind
und eine elegante Darstellung mit einer ausgewogenen geome·
tri schen Komposition verbinden.

;:.-"""'-

..... Abbil dung 2.16
Spalten gleicher Höhe und Breite au f bbdk.
com. Das obere Navigationsmenü ers treckt
sich über genau vier Spal ten.

Maeallelou~

m

0-

....

--

~--

::.~::.-=--

- -----_. ---==--==:::=

0-

0-

_._--~

... Abbildung 2.18
Ein Magazin- l ook wird häufig
durch Mehrspaltigkeit erreicht.
(Quelle : Arstechnic a.com)

=- .

- -..
---_
.... -'
_._
.-_.
,----_
_._------ -----. -------

----=.--::::::==

... Abbildung 2.'fJ
Ein ras terbasiertes DeSign
wird häufig benutzt, um einen
Magazin-look 2 U erzielen.
(Quelle: Gapersblock.com)

... Abbil dung 2.19
Ras ter in Großaufnahme: Macalicious .co m stellt Ordnung und Struktur in den Vordergrund. Alle Elemente
sind sorgfältig angeordnet. Benachbarte Elemente,
die auf einer horizontalen Achse liegen, haben gleiche
Größe; zweitralllige Elemente sind kleiner, passen aber
denn och in das Ras t er. Für manch einen Besucher mag
das Design zu viel Struktur haben .

2.1

Seitenstru kt uren

93

N O NES UC H

-

_

... _

-

____
.____
. . _n.o_
_--- ----._--_._
--... ..... . . _-_

JOURNAl

......

""'\N.'

--

Ju," '"' , . . .

.... _

IN

... (U<I: . _ _ . _. .... _ _

....

-_.~_.

..

_~---

--_ . _---~~

-_.rJiil'f

-~_

_-~_

_---------~~~_ . -

....

_.-

.... Abbildung 2.10
No nesuch.comljournal nutzt Raster für Inhaltsblöcke . Die
Struktur der Seite wird durch schwach gezeichnete linien
und leeren Raum erzeugt.

• Abbildung 2.2'
Spalten mal ganz anders. Eine strikte Struktur
lässt sich auch mit visuellen Elementen kombinieren. Das ErgebniS ist ein traditioneller
Magazin-Look. (Quelle: slabodia.tv.)

Most recently, I wrote
Depth v. Frequency

_ _-_
--

..-".
_ ...._
___u_.
_._ ......_-._--..... _..
..........
..
-.. __ .....

-_.
_-... .......
--_

~------

_

~--­

_

--.~_._._

.-, _._ ~-, - "'- ­

-~

...

.... Abbildung 2.H
Astheria .com verbindet MinimaJismus mit einem
rasterbasierten Ansatz. Das Navigationsmenü rechts
oben ist nach dem rechten Inhal t sblock ausgerichtet .
Dies gi lt auch für den Footer der Seite.

...

---_.._---_. -_. _..._.
.==;:.=.:=::..":".::..
..... _---_
..._._
..
,_._---------_._--_
,......
_--==;::.::::::..":...'"'::':
-_.
__.. __.._......_-

:.

_._-_
_---------_.

;;::-.-=='::~-:::=:"
~
..

---- _._-

. _ ------_._~.

._-----

=.--==::.":::'"="..::=--:- ~~~~.-- -

,"-'
94

2 Designkultur Web 2.0

• Abbildung 2.2)
Subtraction .com. Klassik von Khoi Vinh .

.. Abbildung 2. 24
Svenigson.com: Die Seite scheint in horizontale und vertikale Blöcke aufgeteilt zu sein.
Alle Blöcke in der Mitte der Seite haben dieselbe Höhe und Breite.

_. __-_.
...-- -

----------~.':-

---=.-=
=-- ---==--=:::.-.... _... ._.__ ..'--_._..-----,-_.
"--'-:=;---==-.:

=t"'---

--_._........ -_.

---_---..

I

tJ

~-----

.

HOPMANN

~

- -

=

... Abbildung 1.26
Method.com mit vier Spalten und e inundzwanzig
Inhall sblocken. In der linken oberen Ecke umfasst die
Beschreibung der Seite genau zwei Inhaltsblöcke .

... Abbildung 2.25
SISIlalfeuer.lnfo nutzt drei Spalten gleicher Breite,

wobei der InhaJtsblock genau zwei Spalten umfasst.
Die Ausrichtung der Suchbox und der Fußleile ist
typisch für einen rasterbasierten AnSdtz .

,!II""

I

NEUROBIOLOGY
FREEDOM

_

.. _-----------

._-------_._------.
......-

----

-~--

... Abbildung 2.2]

Auf erraticwisdom ,com sind s!mtliche Abst.mde
sowie die Breite der Boxen entsprechend einem
Raster gew.1hl!. Dies ist ungewöhlich und originell

Zl@lelch.

- ---

----_
. _---_._-----_.---------

"'---"---

_ _ _ w....

..---------._
_--_.. _.__-_. .. .-------_
.. __ ......._-----------........

..... _ _ _ _ _ _ _

-

......

,

a __

....

.. Abbildun g :u8
Drei Spalten Im Einsatz bel Dlrk lesses HighResoluti on,info. Die Position der links Im NiWigati onsmenii
stimmt mit der Platzierung der Spalten uberein. Der
er;te link hat genau die Breite der er;ten Spalte, die
drei folgenden links nehmen genau die Breite des
Inhaltsbereichs ein.

2.1

Seiten strukturen

95

Yeeaahh!

-

-

•

-_._--- --. ---_._-==:.-:===- ;:.... . ... e
~-

1-

1-

~ ==-:=:::
. _~~

~

~ --

~

:.._ tl:! =-~~- -

r:=-.=-----

=

__

::-i..-_

.a. Abbildung 2.29
Ein rasterbaslertes Layout muss
nicht unbedingt symmetrisch sein.
Oul-of-the-box-Ansätze können
die Schranken des Rasters verlassen , um Inhalte origineller und
interessanter erscheinen zu lassen.

Beispiele: hltp:/lyeeaahh .subtraction.comlenlargements/homel,
Designbum.net

Das ist ein Grund dafur. dass viele
moderne Online-Shops kein typisches Shop-Design ä la Amazon
verwenden, sondern mil Flash
und grafisch aufwendigen lösungen experimentieren .

Eine Übersicht von Out-ofthe -box-Layouts finden Sie im

Be itrag »40 Creative Design layouts: Getting Out Of The Bo)(<<
(http://www.smashlngmagazlne .
coml200B/09/03/4 D.creativedeslgn-layouts-gettlng-out - 0/the-boxl. linkeode 060)

96

1

Design kultur Web 2.0

2.1,5
Out-of-the-box -layouts
Während Designer noch vor wenigen Ja hren bei der Auswahl
eines Layouts fast ausschließlich zu simplen Strukturen gegriffen haben, hat sich dies mittl erweile verändert. Da zahlreiche,
ganz unterschiedliche Seiten immer wieder nach dem gleichen
Schema aufgebaut wurden, wurde es immer schwieriger, Inhalte
mithilfe von Stan dard layouts wirkungsvoll, also einzigartig und
einprägsam, zu kommun izieren.
Konsequenz: Seitenbesucherscheinen heute bei vielen Layouts
Originalität zu vermissen und freuen sich daher über neue Ideen
und originelle Ansatze , Designer reagieren darauf und riskieren
al te und neue Met hoden, die sich von den üblichen Lösungen
deutl ich unterscheiden. Wer also als Seitenbetreiber einen guten
Eindru ck hinterlassen möchte, lässt sich etwas Ungewöhnliches
einfallen, um den Besucher mit einem unkonventionellen Design
zu beeindrucken. Derartige Ansätze, bei denen versucht wird,
den gewöhnlichen Layouts durch Origin alität etwas Neues entgegenz usetzen, nennt man auch Out-of-the-box-Layouts, da sie
in die typische Box-Struktur nicht passen und quasi daraus ausbrechen.
Unter anderem experimentieren Designer mit einer ungewöhnlichen Platzierung der Designelemente, mit "schiefen <.: und
inkonsistenten Strukturen, ungewöhnlichen Rasterlayouts, cleveren grafische n Ansätzen oder mit horizontal ausgerichteten layouts. Die Letztere n gehen nicht in die Höhe, sondern in die Breit e
und veru rsachen so einen horizon talen Seitenverlauf.

I

-

-. -;;;'-'."'-;;;;'-'-"'-.. -,_
.........
..
.
..
._--_.
--..................
-----...
.... ..-.................- _
..
........
---_......
......
'
_
..
__
...
......
.............
..,_.......'__. _--,-----_.....-.-_.
.... __ .-................ - ... _----....__
. _..- ---_.
...........
-.-.._
........__
... __
--_
...-.............
__._
__
-------_
._--_
........_.
-'---"
.............--.
.....
..._
_._._
..
--_._
........
...._-- --_._--_
.....
--"._
...
_-_.
-_
.....
_
..
..-_
'-'---'.....__ ._.. _-_
...... -_
.....__--............
......
_.-....,.
------_
-.....
_--_
.
__
..
---._.
_....
_._
....
_-_
........ _
...
--_
..
.._--- --_.
_
. -.. _
-_
. .....-.
...._-.... _--__
--_
...
_---

rI _5UIlAIlIIIIIIo

-_.
_
-__-_._
_---_. -_

E.xplain Yourself

~._-

_

"" ... _

...

.....

_

~Iot

....

_-

..-..

... ...

~_._-

_

_

...

~

-~-_

~--­

_

,,_

_........_
............
__
..-..-_.............___-_
__
_
....-_
..-__
..
....... - ....... __........
..__.-

.-.
::--

'

'_'

_~

.
.

-----. -- -

... Abbildung 2.31
Ein layout. das In kein S<:hema passt
(Quelle: AIGAlnlosangeles.o'll)

... Abbildung 2. 30
Jasonsantamaria .com vl!rsucht ein typisches
Printlayout im Wl!b darzustellen . Das wirkt
ufllewOhnUch und zugleich originelL

~1fI!.:

J..

.

... Abbildung 2.32
Ein Weblog mal ganz anderes . Hier hat man sich für
ein horizontal ausgerichtetes Design entschieden.
(QueUe: Inside.nile.ru )

... Abbildung 2.33
Getlondonreadlng.( o.uk riskiert einen ungewOhnlichen
Ansatz . DMiIIl werden sich Besucher nach dem Besuch
der Seite erinnern .

2.1 Seitenst rukt uren

97

I!III

I'ERFECTORDER
-;~,~ . ;.:::--

-

--"-~ -""
-=
- --{'-

5 . ·0'

===

.. Abb ildung 2.34
Bei liptongreenmint.ro sucht man ein typisches
Box- layout vergeblich .

.. Abbi ldung 2.35
Perfectorder.;p ist ein Onllne-Shop, der mit Flash
realisiert ist. Sein layout ist zur rech ten Seite hin ausgerichtet. Das erwarten die Besucher im Allgemeinen
nicht. Manchmal genügt Jedoch solch ein Detail, um
die Besucher zu beeindrucken.

,
._ __ w
_ ._ ._ w
_

"-__-

.. ..= . .-

- - ~--­

_~~ -

~. ~ _. -

...

~ -

.. Abb ildung 2.36
Zur Darstellung der Inhalte w ird bei Arcinspirations.
tom/kobel nur der linke Bereich benutzt ; dieser
befindet sich ähnlich wie in einer Werbe broschüre auf
einem halbtramparenten Hintergrundbild.
.. Abbi ldung 2.37
Rockatee.tom nutzt ein ungewöhliches Layout, das
ganz gewöhnlich aufgebaut ist. Unter der primolren
Navigation ist ein Feature-Block platziert , darunter
ein POI'tfolio-Showcase und schließlich die Rubrik
. Archive. mit dem Footer.

98

2 Designkultur Web 2.0

O ... f ....

I

,.

Atll'ed Minn_>t.

A ....... _

IIwIRE

... Abb ildun g 1.38
Eine Stru ktur, die eher verwirrt als unterstützt. Insbesondere ist die Navigati on unpraktisch realis iert , da der
MauszeIger. der meist ens auf der linken Seile ruht, wei t
zur rech ten oberen Eckewandern muss. Eine horizontale
Navigation oder Navigat ion in der Sidebar unter dem
Feature- Block wäre benut zerfreundlIcher. Nicht j edes
Out-of-the-bOlC-l ayout ist besser als ei n ty pisches Boxl ayout . (Quelle: Adfed.org)

2.2

... Abb ildung 1.39
Ein anscheinend übliches dreispalt iges l ayout.
bei dem die Spalten jedoch ganz andel> als üblich
platziert sind . Oie Suchbo~ beispielsweise fin det man eher sel ten Im linken Sei tenbereich.
(QueUe:Momono.nl.)

Grafische Ansätze

Laut einschlägigen Usabflity-St udien1 entscheiden Sei tenbesucher in den ersten 50 Millisekunden (1120 Sekunde) des Seitenaufenthalts darüber, inwiefern eine Seite ihren Anspr üchen - sei
es hi nsicht lich des visuellen Eindrucks ode r des Text es wegenentspricht . Diese Entscheidung ist fast ausschließlich kognit iver
Natur. Der erst e visuelle Ei ndruck be einflusst den weiteren Entscheidungsprozess der Nutzer enorm. Er ist som it ein e wese ntli che Komponen te, um Ve rtrau en in die Seite aufzubauen. Zum
Beispie l wenn es um die Dienste eines Unternehm ens oder um
die Kompetenz eines Bewerbers geht.
Um den hohen Ansprüchen des Seiten besuchers gerecht zu
werden, muss ein Designer den Anwender durch attrakt ive und
leicht wahrnehmbare grafische Seit enelement e überzeugen. Konsequenterweise werden Seiten besucher im Web 2.0 mit bunten
und visuell ansprechenden Farbschemata, Bildern und Grafiken
angesp rochen.

Der erste EIndruck zählt
Ein attraktives Bild oder eine
leicht nachvollziehbare Seitenstruktur? Was effizienter
Ist , hangt vom Können des
Designers ab. Webentwickler
haben eine zwanzigstel Sekunde
Zeit, um die Seitenbesuc:her zu
beeindrucken und für sich zu
gewinnen .

1 Undg_d G.. Fernandes G. J., Dudek C. & Brown, J.• _Atten tion web de$lgnefS: Yo u have 50 ml l ~ sec onds to make a good frst impre$slo n!". Behavfouf
and Injr)ftlldtlon kchno!OIY. 25:115-1 26 (2006)
2.2 Grafische Ansätz e

I

99

2.2.1
Farbschemata
Die Aufmerksamkeit der Seitenbesucher wird im Web 2.0 durch
drei unterschiedliche Ansätze der Farbkomposition gewonnen.
Diese Ansätze zielen im Einzelnen jeweils auf ein bestimmtes
Publikum und können daher unterschiedlichen Seitentypen
zugeordnet werden .
Zum einen setzen Designer häufig auf neutrale und weiche
Farben, die den Eindruck von Beha.glichkeit. Ruhe und Gelassenheit vermitteln sollen. Webauftritte solcher Art zeichnen si ch
Oblicherwe ise durch Schlichtheit der Seitenkonzeption aus . Meistens liegt hier der Schwerpunkt auf einer übersicht lichen Navigation und einfachen Designstrukt uren. Die Nu tzer sollen sich
wohl fühlen und informiert werden; der visuelle Eindruck steht
hier eher im Hintergrund. In manchen Fällen wird sogar ganz auf
Farbe verzichtet.

Abbildung 2.40 "
Neutrale, weiche Farben
(Quellen: Grovewebsitedesign.
w.uk, Milesdowsett.wm,
Bigcarte!.com , Spokeo.com/hr)

~_w..._

. .__ . _
Ii

designs for interaction

--_._--_
_----

--

-_.____... _--_.. ..
=--_.,---_._::;.,--_
..... _---. . .
-_...-

...
..

- -_---_ _--

-~-

~.

~

----

•

-

- - --

co

_._. -

-'--

'g!l. 'l5'!l.

--100

I

2

Designkultur Web 2.0

I

Zum anderen verleihen harmonische, stark ausgeprägt e Farbkont raste einer Sei te ein scharfes visuelles Bild. Alt ernat iv werden interakt ive Sei tenelemen te häufig mi t leben digen Farben in
den Vordergrund gestellt. Die Absicht ist dabei, das Augenmerk
des Besuchers durch die bunten Farben zu gewinnen und einen
bleibenden Eindruck beim Nutzer zu hin tert assen. Dafür werden
häufig mehrere kräftige Farbt öne zugleich verwendet. Besonders
populär sind in tensives Purpurrot , Grun und Btau.

... Abbildung 2.4'
Bunte Farben, wo das Auge
hinschaut . (Quellen : Frexy.com,
Dinis91.com)

Das Spektru m der Seiten, die sich diesen Ansatz zunutze machen,
ist ziemlich weit gefasst. Besonderen Anklang linden bunt e Farben bei Portfolios, bei modernen Webdienst en sowie in der
Modebranche und in der Unterhaltungsindust rie - also bei Auftritten, welche insbesondere die Attraktivität ihrer Angebote
betonen wollen.

... Abbi ldung 2.42
Bunte und weniger bun t e Kontras t e im Zusammenspiel.
(Quellen; Nclud .com, Adaptd.
co m, Clearfocusdesigns .com)

---

==

2.2 Grafische Ansätze

I

101

Außerdem ten dieren die Webdesigner verstärkt dazu, statt glänzender und bunter Töne dunkle und zum Teil auch ,"schmutzige« Farben für das Layout einzusetzen. Dies lässt die Designs
realistischer erscheinen und ermöglicht es dem Designer, einen
starken visuellen Eindruck durch einen geschickten Einsatz weni ger bunter Farben zu hinterfassen. Zu diesem Zweck werden häufig Schwarz, Braun, Dunkelblau und Dunkelgrün verwendet.

.. Abbi ldung

~.43

.&

EIn einfaches zweispaltiges Layout bei JeffCrofl.com.
Vor wenigen Jahren wurde Braun in der Webseitengestaltung kaum eingesetzt.

Abbildung

~.44

Dun ke lgrün im Eimatz : Avalonstar.com nutzt Spalten
auf eine eigene Art und Weise. Die linke Spalt e wird
für z usatzliche Informationen benutzt. Im oberen Se itenbereich haben die horizontalen Blöcke die gleiche
Höhe. Auch Verweise im Navigationsmenü sind entspechend einem Raster platziert.

Neben auffallenden Farbpaletten und kreativen Ansätzen kommen im Web 2.0 auch neue grafische Elemente zum Einsatz. Sie
verleihen modernen Webseiten eine besondere Facette.

Trend s und gra fi sc he Ansät ze
Je häufiger ein Trend benutzt w ird, desto schneller verliert er
an Bedeutung, da es auf Dauer unmöglich ist, eine innovative
Botschaft einzigartig zu präsentiere n und wirkungsvoll zu transportieren. Demzufolge verlieren Trends ihren Reiz, geraten in
den Hintergrund und werden letzt end lich durch neue Trends
ersetzt.
2.2.2

1 02

2 Designkultur Web 2.0

.. Abbildun g 2 4 5
So war das einmal : eine Reliqu ie
aus den Jahren 2005 bis 2007.
Spruchbolnder, Badges, Farbverl~hJfe, Spiegel- und 3D-Effekte
gelten heute als überholt und
langweilig. Vor wenigen Jahren
war das ganz anders.

,.

*= I RISHSTU COM

~

Genau das sehen wir heute im Web 2.0: Designmerkmale, die
das bunte und laute Web im laufe der letzten Jahre ausgemacht

haben, kommen aus der Mode. Freute sich das Auge der Seiten·
besucher noch vor Kurzem auf die bunten Gradienten, Streifen,
Spruchb änder und Spiegeleffekte , so scheinen diese nun von der

Designlandschaft langsam aber sicher zu verschwinden. DafUr

D~signtrend5

2009

Der Trend fUr das Jahr 2009 lautet. dass Webselten nicht mehr
so bunt sind wie In den letzten
Jahren . Dafür werden sie aber
noch ein Stück perSOnIicher.

etablieren sich neue Designmerkmale, die meistens deutlich rea listischer erscheinen und persönlicher rüberkommen .

2.2.3

Handsc hri ftl ic he El emente und Schreibsch rift en

Wie schön glänzende Spiege leffekte und abgerundete Ecken
auch sein mögen, eine wicht ige Aufgabe verfehlen si e aber: Ideen
auf eine persönlicll e Art und Weise zu kommunizieren, Fast ausnahmslos dienen sie reinen Präsentationszwecken, ohne dabei
aussagekräftig zu sein, Es ist also nicht verwunderl ich, dass sich im
Gegenzug zu lauten, bunten und gesichtslosen Designelementen
nun leise, subt ile und persönliche handschriftliche Elemente etablieren . Diese ver leihen einer Präsenz einen _human touch_, also
eine individuelle Note, die durch die bunten Farbspie lereien der
letzten Jahre in den Hintergrund gedrängt war und von vielen
Besuchern vermi sst wurde.
Dabei beschränken sich handschriftliche Elemente nicht auf
bestimmte Seitentypen, sondern werden durchgehe nd in unterschiedlichem Kon te)(t verwendet : für Weblogs, Shops, Un ter-

. Form follows funct lon- , lautet
das bewährte Gestal tung;prinZip.
Bel glänzenden 3D-Effekten,
Streifen und Gradienten war dies
nicht der Fall. Sie soll ten vorwiegend Darstellungszwecken dienen, AussagekrMtig waren sie
meistens nicht.
Eine Obersicht Ober kos tenlos
verfOgbare Schreibsc hriften mit
wei terfOhrenden Ressourcen finden Sie auf: hrrp://woorlc.

blogSpol.com/2008/08I10-hand·
wrm en·/onts· rou -(an t ·mlss. ht ml
(Unkcode 061)
2 .2

Grafische Ans3tze

I

103

I

Um handschriftliche Elemente In
ein DeSign einzubetten, zeichnet
man sie VOf1 Hand. optimiert die
eingescannten Grafiken mit einer
Bildbearbeitungs-Software und
baut das ErgebniS sorgfältig in das
layout ein. Für die Textgestaltung
greift man am bes ten zu Schreibschriften. die ein deutliches Bild
ergeben, da sie für das lesen auf
dem Bildschirm optimiert sind .

nehmemseiten, Werbung, Portfolios und Communities und auf
Flash-Se iten genauso häufig wie in reinen (X)HTML-/CSS-Desigm. Auch erfreuen sich die verschiedenen Designeleme nte einer
persönlichen Note. Insbesondere Navigationsmenüs, Illustrat ionen, Hintergrundbilder und Überschriften werden heutzutage
individuell gestaltet.

TOP 5

.. Abbi ldung l.46
Die DeSigner von Teamvlget.com haben sich für
ein originelles Design und eine Schreibschrift entschieden .

• Abbildung 2.47
Paul WaJlas (paul-wallas.co.uk) nu tzt handschriftliche
Elemente für Illustrationen Im Header.

I/IDEO

. .. --.,;:.

DOO{)LI ~ G

~

.- -

Si
.. Abbildung 2.49
Handschriftliche Elemente werden häufig eingesetzt
und nehmen oft eine zentrale Position im Design ein .

.. Abbil dung 2.48
Hands chriftliche Elemente mal ganz anders eingesetzt. Oink.elrellallO.com experimentiert mit einem
originellen layout - hier wurde die Seite komple tt
gezeichnet.

104

I

2 Designkultur Web 2.0

,
,.-

I

--

... Ab bil dun g 2.50
Handschriften im Einsatz far Suchboxen, RSS-Feedleons und l ogos.

• Abbildung 2.51
Soll etwas geschrieben werden, so greift man gerne
zu Schreibschriften . Sie verleihen einem DesIgnelement eine Individuelle Note und fallen direkt au[

Gek lebt , ge tacker t , geheft et un d gepi nnt

2.2.4

Neben handschriftlichen Elerneten setzen sich zunehmend auch
andere persön li che Motive d urch. Perfekt abgerundete Schaltfläehen lindet man im Alltag nur selten. Um eine Seite realistisch
und individuell zu gestalten, acht en Designer deshalb auf Det ails
aus unserem Alltag und betten realistische Grafiken großzügig In
ihr Design mit ein . Dabei lassen sich die Designer allerlei einfallen. Unter anderem findet man Pins, Klebestreifen, Tesafilm,
Büroklammern , Stifte, Lesezeichen, Fäden, Nadeln, Papierstreifen , Zettel, Eselsoh ren und Polaroid-Fotos. Um diese Elemente
im Layout fest zu platzieren, nutzt man häufig spezielle Grafiken,
die sie geklebt. getackert, geheftet oder gepinnt erscheinen lassen.

-_.~
,
............
.-

-

-

-----

DDN1HIREUS
vgou....w .........
SEEWHY.

r,

,

"

. ..

". ,.,....I~, ,.....

",,_f'"
~

5

I

••
1-'" . .--'
. • .Ji

•

~._"

.. Abbildun g 1.53
Damit einige Designelemente fester hallen, mOssen sie
wohl gepinn t werden.

.. Ab bil dun g 1.51
Büroklammern Im Einsatz. Diese werden ~ufig
zusammen mit handschriftlichen Elementen verwendet.

1.2 Grafi sche Ansätze

I

105

ye!, we're

OPEN
I

\

•

. _-,
..
...,_........
.. .... .. .
......

-

Welcome

'~~"""-~'''~''''
~

_

.......,. -.,"'

---

H. ~, ....... ' "

......... _

~

_.

'"

",~."

.....

~.,,-

_-.....

....'

... v " . .

...."..

....

.~,-'

;",•••

... <,," ,

., ' .... .. ,......
...,
,._ ....... •• _I·"" •
~

-,~
"'~

~,.,."'

~

~

.. 10,

_

. ... _

... ..

0" _ _ ....... ,"" ... .,
~_

r .. ,

... Abbildung ~ . 54
Festgenagelte Aushängeschilder werden in der
Webseitengesta ltu ng
gerne benutzt.

"

'~

.....

.... '"

•

~ ' '"J'"''

.. " .....

... Abbi ld ung ~ .55
Manchmal heftet oder klebt m311 nicht nur Navigationsmenüs,
sondern auch Inhaltsblöcke fest.

_
..
*-...- _--_- I
-- - ,
_ ~

-.-.. ... ...

...

.........
"" """""""

.

'

r.

..

"' ~

.. Abbildung ~ .5 6
POIMOid-Fotos wirken informel! und persönlich und
sind jedem vertraut.

... Abbildung 2.57
Manchmal muss auch geklebt und genaht werden.
Hier im Beispiel ein Feature-Block, ein Navigations.
menü, ein Header und ein Footer.

Solche Designs wirken attraktiv, freundlich und sehr persönlich
und sind fast immer einzigartig, da sie schwer nachzumachen
sind. Manchmal nutzt man solche Elemente für den gesam ten
Inhaltsbereich, in anderen Fällen werden nur einzelne Seitenbereiche entsprechend gestaltet.

2.2 .5

Graffiti, Flecken und Grunge

Wem handschriftliche Elemente und gewöhnliche Objekte aus
dem Alltag nicht realist isch genug erscheinen, geht ein Stück weiter und bildet die Realität noch genaue r ab. Zum Beispiel, indem
er schmutzige Fle cken und Texturen , Eselsohren, Kaffeeflecken,
unregelmäßige Linien, Tinte und Graffi ti einsetzt. Auch zerrissene,
106

I

2

Designkultur Web 2.0

I

geknitterte, zerbrochene, beschädigte und gefaltete Objekte aus
unserem Alltag passen gut in solche Entwürfe. Die res ultierenden
Designs gehen häufig in Rich tung Grunge, Dirty-Look oder Trash
und seilen meistens sehr individuell aus.

-_. --__ -_

...------_..._- ------...._--.
-- .... :.:::::::.=-..:::.
.:.::=.::.:.-:"...-=----=.:~~::.:.

.-

•

.... Abbildung 2.58
Auf Baranda-tequUa.com haben schmu tzi ge Tintenflecke
eine dominierende Stellu ng.

::.'=;~-'.=.':::

... Abbildung 2.59
Auf Hereslifeafrica.com wird ein Grunge-St il
subtil für das Hintergrundbild und zur Tren nung des I nhaltsbereichs von verwand ten
Inhalten eingesetzt.

:::-._.
--.- -

.-

:~

.. Abbild u ng 2.60
Grunge intensiv eingesetzt. (Quellen : Mindtwitch,com,
TroJanrecords.com, Semente.net)

2.2

Grafische Ansätze

I

107

Designelemente dieser Art findet man sowohl in Blogs als auch
schwächer ausgeprägt auf Seiten kleiner Unternehmen und
Agent uren, die ganz anders aussehen wollen. Sie werden zumeist
in dunklen oder bunten layouts verwendet und häufig mit schief
ausgericht eten Designelementen kombiniert . In hellen layouts
zeigen sie dagegen kaum Wirkung.

2.2.6

... Abbildung 2.61
Grunge-Elemente im Überblick:
Eselsohren, Handschriften, Kaffeeflecken , Papierrisse, schmu tzige Texturen, Tesafilm, unregelmäßige linien, Klammern

... Abbildung 2.62
Brainwashfactory.org: Hierwird
genaht .

... Abbildung 2.65
Bei Happilycreate.com wird Holz
als Hintergrundbild eilllesetzt.
108

I

2 Designkultur Web 2.0

Organische Te xturen und fotografi sche
Hintergrundbilder

Wer nicht unbedingt auffallende Grunge- Elemente riskieren
möcht e, setzt organische Texturen wie zum Beispiel Holz, Keramik, Papier und Ste in als Hintergrundbilder ein. Alternativ können Tapet en und Fotos großzügig auf einer leinwand platziert
werden. Das eigentliche layout wird dann auf einem solchen
Hintergrund zentriert und meistens unabhängig vom Hintergrundbild gestaltet. Dies allein genügt schon, um der Seite eine
originelle Gestalt zu verl eihen. Solche Ansätze sind weitverbreitet
und werden auch gerne mi t Grunge-Elementen kombiniert.

... Abbildun g 2.6)
Keramik im Einsatz bei Theletter.

... Abbildu ng 2.64
Emesstyle.com mit Textil

cO .uk.

... Abbildung 2.66
Ein Hintergrund foto im Einsatz bei Crea8iveart.com

I

.. Abbildung 2.67
Ein HInterg rundfo to Im Einsatz

bei Slgnal7.de

0.
2.2.7

Collagen und Scrapbooks

Experimentiert man mit oben erwähnten Designelementen, so
liegt es nahe, diese in Form einer handgefertigten Collage oder
eines persönlichen Samme lalbums (Scrapoook) zusammenzustel·
len und in ein Layout einzufUgen. Genau dies machen vor allem
Betreiber privater Blags häufig und gern. Aber auch kleine Designagen turen und Freiberufler, die persönlich rüberkommen wolten, machen sich diesen Ansatz zunutze. In größeren Projekten
und auf Unternehmensseiten treten solche Designs dagegen so
gut wie nie auf.

...........
.6.

Tnvacation.com

_-_.....

Abbildung 2.69

Narlstuff.co.uk

2.2.8

.. Abbildung 2.68

... Abbildung 2.7 0
Nomilktoday.be

Illustrationen und Ornamente

Neben dem Trend zu real ist ischen Designs lässt sich auch ein
Trend zu grafisch aufwendigen Designs beobachten. Solche Seiten zeichnen sich durch den intensiven Einsatz vo n Grafiken 2.2 Grafische Ansltze

I

109

Ab bildung 2.71 ,.
labs.revyver.com ,
Evaneckard.com

etwa Illustrationen, Ornamenten und Maskottchen - aus, Diese
können zwar durchaus realistisch sein, sind es aber zumeist
nicht.

Bei diesem Ansatz werden nicht nur wenige einzelne Elemente
intensiv grafisch gesta ltet, sondern das ganze Design - vom Seitenkopf bis zur Fusszeile. Dadurch entstehen lebendige und auff.:illige Seiten, in denen die Designer auch den kleinsten Details
viel Aufm erksamkeit schenken und diese mit aller Sorgfalt, Präzision und Kreativität so gestalten, dass sie sowohl zueinander als
auch in das Gesamt layout nahtlos passen. Solche abgerundeten
Designs setzen sehr stark auf die visuelle Komponente und versuchen ihre Seitenbesucher dadurch zu beeindrucken. Auch sind
diese Seiten häufig sehr persönlich gesta ltet, wodurch sie noch
individueller und origineller erscheinen .

.. Abb ildung 2.72

Q.vert city.com: Noch plaka tiver
ge ht es kaum.

......
-....... . --_
.. _.......
........
------_...
---_.----_.._-__.....-..
_._-_
----_.
.
...
---_.
_._--- ,""-'
-,_---- ----_ c_
(;;id"""c... _o.......

....

,

•.

...

,

Il!"

2 Designkult ur Web 2.0

•
"'W

,... ""'

10<_

--~---

110

,

_~

-~

Ab bildung 2.73 ...
Webdesignerwall.com

'~""Ä

..-....

•

.~-

~-- -

"""""",,, T_

I

__
._._-._..- ---.

~-

... Abbildung 2.74
Ndesignstudlo.com

.a. .El

~_

..... Abbildung 2.75

Illustrationen Im Einsatz: Adlts·
hulda.com/blog. Darkmotion .
com, Homesatedgewater.com.
Naviga ntconsultlng.com.

Therls5 ingtonpodc ast .co.uk
2.2

Grafische

Ansätze

111

Weitere Beispiele für kreative
Fooler finden Sie In dem Beitrag
. Footers In Modern Web Design :
Creative Examples and Ideas«:
http://www. smashi ng magazine.

coml200Bl0410Bljooters-ln-modem -web- design -creatlve-exa mples-and-ideasl (linkcode 062)

-_....

__._--- _

..........
-..--

~

_

~

_

.

_

...
.. _ .... _...... _ _
.. _
__ . toL"«
• __ .w_ _
_.._

,._
~

~----' ---

Beispielhaft für diese Entwicklung ist etwa die Gestaltung der
Fußzeile. Diese spielte bis dato ke ine besondere Rolle und wurde
meistens sehr schlicht und minimalistisch gehalten. In grafisch
aufwendigen Designs kommt der Fußzeile nun eine besondere
Bedeutung zu ; sie soll das Design perfekt abschließen und für
einen bleibenden Eindruck sorgen .

-_. __........ _....

•

.. Abbildung ~ . 76
Designer schenken Immer mehr auch kleinsten Details ihre Aufmerksam·
keil. Sogar Fußzeilen (Footer) we rden bunter und größer. Hicksdesign.
co .uk , Strawpollnow.com. Thegregbradyproject.com, VolU .com

Manchmal integrieren Designer freundliche Cartoon· Bilder in die
Webseiten . Anscheinend sollen sie eine entsprechende Laune
erzeugen (vgl. Abbildung 2.77).
Wo sich ein Trend zu Illust rationen abzeichnet, sind auch weitere Kunstformen mögl ich. Und so riskiert manch ein Designer
auch andere künstlerische AnSätze, zum Besipiel Aquarellmalerei und Karrikaturen. In dieser Hinsi cht steh t den Designern eine
Vielzahl von Ansätzen zur Auswahl bereit. Dabei ist ihre Devise
oftmals: Je origineller ein Design, desto besser.

• Abbildung 2.77
Cartoons erzeugen eine angenehme, informelle und lustige
Atmo~phäre auf Webseiten.

pe
Tat. I IC

.!<penenc

vour IU ,

•
ConsultA un specialist!
MKllcul speclallSl Mle sl ngurulln
mnuri 1Ji·ti preKrl1!' un trat.JlT1II!'nt
(Ot~L Aß:' Ild de (e!

a

112

I

2 Designkultur Web 2.0

'rod
Ge t

In. (

....... """

I

--125

_..._----_._,.,......_._._-------_
- ..

_- ._ _, ---

_ t,*,_"'_

--_
-... ---..
..

--~._--

~=""­
=~="'-

Fray

_._---_..
"':"'"-=.::-.:---:=-'
.......... __ ?

--

........

----

~_

....

-

·,,§,,!Sht_ . .v

,

_._-----.--_- .
------_._--._---_._.
____.-..
_._------------_.
-------~=:.::_-~~:--

-~:::=f§~~-

•

'--"

~-

.-.,-.----='= = d

--- ----

--------_..

:=:::=;-i
._---.

... Abbildung 2.78

_--~'==

Aquarell Im Einsatz bei Spring.tnva caUon.com ,
Squawkdesign,com, Oarasgarden .com und Fray.com

... Abbildung 2.79
Karrikaluren werden bel Billyhughes.oph.
gov.au sowohl In der Kopfzeile als auch in
der Fußzelleverwendet.

2.2 Grafi sche An sätze

113

Retro und Vintage
Bei Ret ro und Vintage greifen Designer zu grafi schen Ansätzen,
die bisher eigent lich nicht in das int eraktive, dy namische Medi um
zu passen schienen und daher st ets vermieden wurden . Dazu
gehören beispielsweise Entwürfe im Ret ro· Look der 1920er- bis
1930er-Jahre oder im Vintage-St il der 1930er- bis 1980er-Jahre.
Die Ergebnisse sind in vielen Fällen äußerst ungewöhnlich und
sehen be i einer so rgfältigen Ausfüh rung keineswegs langweilig
aus, wie man es vielleicht auf den ersten Blick vermutet hätte.
2.2 .9

-

~"""I

I

... . _-

.

.,_.-

.... Abbildung l.80
Custom-Des ign.ch, CSStinderbox .
raykonline.com , Targelscope.
com. KJassiker-in-acryl.de.
DoliardreadfuLcom. Miste r-ae ro.
com, Fivecentstand .com,
level2d .com, Theoldstate.com,
Mediaboom. com

114

I

2

Designkult ur Web 2.0

Typische Elemente in solchen Designs sind alt modisch aussehende Mot ive aus dem täglichen Leben. Zum Beispiel al te Fernseh- und Rad iogeräte. Autos. Illust rat ionen aus al ten Zei t ungen.
klassische Aushängeschilder sowie Plakate und Poster von al ten
Filmen oder Alben . Hier passen dunkle kon trastrei che Farbschemata (etwa ein Neon-St il mi t Rege nbogenfarben), Grunge-St il
und handsch riftliche Elemente perfekt und vermitteln somit
einen dauerhaften Eindruck. Meistens werden bei solchen Designs nicht nu r einige weniBe Elemente derart gestaltet, sondern
der gesamte Auftritt. Dies ist äußerst ungewöhnli ch bei Webseiten. dafür aber sehr plakat iv.

lntrrud

l Theoqs;~o

_--_._.
-------------_
..
.~-~

..

I MON I.ORG
TDESIG
&

-.
-

A 8LOG OF

ft lilliolUlirr

""-.:....

......
...-

-----

DI SCUSS IO

Auch lindet man recht ungewöhnliche Designs, die sogar noch
weitergehen und etwa Blogs im einem Renaissance-Look präsentieren , Au ch in diesen Fällen nutzen die Designer gestalterische
Freiheit en, um si ch von gewöhnlichen und weitverbreit eten

;;=

... Abbildung 2.8,
Theocacao.eom, Tlmonl.org,
In ternetz lilionalre. com

Designs deutlich abzugrenzen und etwas Einzigartiges zu präsen-

tieren.
2 . 2 .10

leons

Eine spezielle Funktion übernehmen im Web 2.0 leons, den Sei·
teninhalt begleitende Bilder, die meistens bei Beiträgen und in
NavigationsmenOs platziert werden. Ihre Hauptaufgabe besteht

darin, die Darstellung der Seiteninhalte durch kleine visuelle
Elemente aufzulockern und die Lesbarkeit damit zu verbessern .
Außerdem tassen si ch Inhalte durch prägnante 8ullets, pfeile und
Bilder Intuitiv und anschaulich gliedern .
Das Web ist eine Umgebung, in der Benutzerdynamisch, durch
rasche Augenbewegungen, nach Inhalten suchen und schnell
unruhig werden, faUs die Informationen nicht deutlich genug
prasentiert werden. Demnach ist der Bedarf nach auffaUe nden
visuellen Indikatoren groß. leans können dabei als Wegweiser
dienen, die dem Anwender genau zeigen, was er tun kann bzw.
zu t un hat. Anstatt permanent Textinhalte zu scannen, können
Besucher eine mi t Icons ve rzierte Seite nach Bildern absu chen. In
der Regel kommen Icons in einem bescheidenen Maße zur Geltung. Sie un terstOtzen Inhal te, bleiben jedoch meist ens im Hintergrund, was nicht zuletzt auf ihre geringe Größe zurückzuführen ist. Dennoch lAsst sich in den letzten Monaten ein deutlicher
Trend zu größeren, beinahe domi nierenden Icons erkennen . Falls
Designer visuell anspruchsvolle Ansatze vorziehen, werden Icons
insbesondere bei Produktseiten, Portfolios und Dienst leistungen
in Designs zentral und plakativ eingebaut. Sie sollen helfen, Sa chverhal te schnell , eindeut ig und anschaulich zu erläutern .

leons
leon s schaffen eiOen besseren
Oberblick und erleichtern den
Scan vorgang auf einer Seite. Sie
kOn nen Botschaften transport ieren oder diese st<\rlcer betonen.

l:lI RSS Feed
~

Advertise with usi

... Abbildung 2.82
Sinnvoll eingesetzt können leons
zu Aktionen animieren und Verweise st<\rlcer zur Gelt ung kommen lassen.

1.2 Grafische Ansat ze

I

11 5

I

"

.. ....
._
I?i ....
,

~......

--•

.....
,.
--

-

,,,.~

~,~*

_._-_., _._---

" , "",,,_,~

~

.............

~

",u.t>odO<

",,, - ,,,~.

::IJ

....... ....
-....,_

-_. -_.
-_.
l1li

G

"

.....

... ......'__
.__-,-."""____--_- -,,,.--_
_ _Organ;z«,

...............

...... w..no ___ P'oO.

n

-

....... ~

.- .....".........
.. . . ..

......
.....................
... "'....- ..............
,..,
.
...
.
..., ...... .......
... ............. ,....., .....
.....
.. _1fttOO>l ......."
,_._"""' .....
..... n """ oIoat .... _",.,. ...
~.

__. __

-

.

-~_

looklng for sorneone else's wly'bst?

..

oo ......... _ _ ...................
. ... _

Abbildung 2.84 ..
Auf einem weißen Hintergrund
erscheinen Ico ns subtil und
attraktiv.

~

......,... .._ · .....
(-

'i

~."

2.3

><.:

~

-"-

_&T""..... _

(ollod

""--' -

---...........

~

~_.

119.. _ ..... -

Cl
"""--,,,.$"''''
..........

-~

QI
~_
_
....
.
--,.,-".'

®

.

",.

'~

...-.

"'"
...,
~--

"#., • ." "'-

•

~

.
, , ..

c ,,,

u.~

Abbildung 2.83 ..
Icons werden häufig eingesetzt,
um einen Sachverhalt zu erläutern
und anschaulich darzustellen.

__ ..
..r ••....

~"

~"",

d.

•

,,~.,

~-

.
a:. _
c .............
---_ *"'---"-.'
.......--~_

.... .........."

-..
,...-""
............
0$, .. _ _ _ _

.....

..... _ .. !IO:>I _ _ _

.-

_~.~IIfI:_y

~.

<U

0)

..... _ ...,.,. .. - _......

Webtypografie

Grafische Lösungen stellen eine intuitive Oberfläche für eine
Webseite bereit, doch ohne entsprechenden Seiteninhalt bleiben
Besucher aus . Sch ließlich wird im Netz nich t nach Bildern, sondern nach Inform at ionen gesucht. An dieser Stelle kommt die
Webtypografie, die Textgestaltu ng derWebseiten, ins Spiet.
Die Textdarstellung im Web 2.0 bietet viele neue Möglichkeiten. Elegante CSS-basierte Lösungen, die im Web 2.0 in vollem
Maße zur Schau gestellt werden, verändern gewohnte Muster bei
der Gestaltung von Texten zugunst en einer besseren Lesbarkeit
und beeindru ckender Auftritte. Eine detaillierte Übersich t über
moderne webtypografische Ansätze finden Sie in Kapitel 3, »Textgestattung«.
116

2

Designkultur Web 2.0

I

Die Notwendigkeit, spezielle Bilder, Illustrationen und Fotos für
die direkte Kommunikation mit den Besuchern zu erzeugen, entfällt. Diese Hilfsmitteln werden häufig durch die Verwendung klarer und hervorstechender Schlagzeilen ersetzt. Erst später werden
eventuell noch grafische Elemente eingesetzt, um die Hierarchie
und die Ausgewogenheit der Seite noch besser zu gewährleisten. Webdesigner stehen bei ihrer Auswahl geeigneter Schriften
vor einem Problem : Welche Schriften sollen in welcher Größe,
in welcher Farbe und in welchem Kontext eingesetzt werden?
Die Frage erscheint zuerst vielleicht einfacher, als sie eigentli ch
ist. Denn Webtypografie gehört neben der Gestal t ung der Seite
zu den schwierigsten Aufgaben, mit denen Webdesigner zu tun
haben.

2.].1

Typografie laut und bunt

Viele Unternehmen setzen im Web 2.0 auf seriöse, klassische
Schriftarten. lockerer erscheinen Webseiten, die wenige r formale, sondern eher attraktive und zum Teil sogar spielerische
Schriften verwenden . Au ch Schreibschriften erlreuen sich größerer Beliebtheit, werden aber fast ausschließlich für Überschriften
eingesetzt .
~ Abbildung l .85
Typografie im Web 2.D:
laut und bunt

Es zeigt sich ein deutlicher Trend zu großer, auffallender und bunter Typografie. die insbesondere auf Produktseiten und in Portfolios eingesetzt wird . Im Gegensatz zu Grafiken kann Typografie Ideen sehr prazise fassen und vermitteln. Dies ist etwa dann
hilfreich, wenn der Seitenbetreiber Besuchern sehr direkt und
eindeutig vermitteln möchte, worum es auf seiner Seite eigentlich geht. Also, ob es sich beispielsweise um die Startseite eines

Weitere Beispiele zu bunter und
lauter Typografie können Sie unter

hup:llWww.sma5hlncmacazlne.
eom/l008/051101the-sooweaseoJ-blg-typocraphy. 5fcond ·edlt /orV
(llnkcode063) sehen.

2.3 Web typografie

I 117

Diemt leistungsangebots oder um eine Unternehmenswebseite
handelt.

-

Web Design

-- ---

....

.•

"...
dr,.........

, :oo..d;-......,..".._ ...

Agenda

_...

_

- " ,-'

,H_o.-.....
--~

M;o,.l~

We Need To Talk About
YOA.1I TPS Reports.

HCildlmcs

iBkrve

NATURAL

Help Wanted.

CHEMISTRY

.. Abbildung l .86
laute Typografie zeigt ihre Wirkung auf dunklen und
bun te n Hintergrunden am starks ten .

2.3.2
GeW ic ht ung der SeItene le me nte

Je großer die Seiten elem ente
ist, desto me hr visuelles Gewicht tragen sie auf einer Seile .
Größere Überschriften tragen
da rüber hinaus den eigentliche n
Seitenin hal r.

.. Abbildung l .87
Sie wirkt aber auf einem hellen Hintergrund ruhige r
und weniger aufdringlich,

Überproportional große Überschriften

Designer riskieren häu fig überpropo rtio nal große Ü bersch riften
mit ubermäßig großen Zeilenabst änden und Buchstabenabständen. Diese erscheinen bei den Titeln der Bei träge, in den Navi gat ionsmenüs oder auch als Slogans bei Bildern. Vor wenigen
Jahren st ieß man sehr häufig auf enorme Überschriften, die ei ne
dominierende Posit ion einnahmen und grafi sche Elemente kompromislos verdrängten. Dies hat sich in den letzten Jahren in
Richtung einer moderateren, wen iger lauten Typografie verschoben. Übermäßig groß sind Überschriften häufig dennoch. Waren
noch vo r wenigen Jahren kleine Schri ft größen fur Fließtext (9 bis
10px) ublich, so beginnt die Schriftgröße bei modernen Sei ten
meistens bei 11 oder 12 px. Bei Übersch riften sind Schriftgrößen
ab 20px olm häufigsten. 2
In einem Beit rag werden die wichtigsten TextsteIlen oft mals
durch fett oder farbig ausgezeichnete Wörte r hervorgehoben.
Ebenso mögl ich ist es, ein Wort in einer zu seiner Bedeutung
proportional großen Schrift darzustellen. Größerer Text hil ft dem
Seitenbesucher, schneller zu erkennen, worum es im Text geht,
was am w ich t igst en ist und welche Teile des Beit rags besonders
2 Smashing Magazine :.A Small Study Of Big Blogs_ {http://www.

smas hingfTliJgazjn~. wmI2008/07/ 24/a· smalI· study.of-big.blogsl}, Jul i 2008

118

I

2 Designkult ur Web 2.0

I

interessant sein könnten . Diese Art der Hervorhebu ng wi rd im
Web 2.0 besonders intensiv benutzt . Der Proportionalitätsfaktor
ist dabei oftmals wesentlich größer als zwei.

Desian. Develop. Repeat

Ih_.

... _ .. ~ ............... tIf'<'I' 11(
,..,.'~'

............ _

_~<U'

.........
",-",..
.." .... I'lo<o

The Demogra
l~.

TWr_JCH""tiIIII 0fU tbo IIJIt

vn, __ cno._6_.. ·

..."""".,..f" ..............

~

r.... I11 _ _ ..........

......... so,bo.., . _.... ,.......,
~ .... \

...... ...., ........ .. ...... ......... 111

, .., """"_

_

Brands are interfac

Do you realize wh"

. _ _ ""_ NoI_

odllrilllV !

M nf55'" UU::loIoI)' Ctloti hO>

~

....

",

",

l<Inm

~

tT le r - l'roo flllg AJIl X
b,

.'1(.

q ", ~~ U

_

.... ....... _." on, ","",.. _ •
_ _ OObOf • • •
..........,

...

. .. ,-_ .....
_~

, ... • ......... • ....... _
.(

~

Assi !j.nmen t : Remember 't

MalcolmE
r .... .. . ""'........... - ' ,.. _ ...

l; 11 bf.tM O;poIICII\(O _

--

..... ../UO........
_- . ...

T0f'9I'< I ...., '!IN .

""".tt.o_, to ._ __ ..,_

lh. Dill"'" Eltm.nt

.

....orn"""' ••Lh.........

,,,,,,,Dot_'" 100. .' ' '.... . , _ .

..._-.,

AdeviI food I, tumlng our

Hintergrund

Selected responses
"Future o f Newspa

Imilatlng Prlnt
.. "" ..... -.'-""'"

D Top News for Today
·...... '·_
· · .._
• ..• .."""....._
, -_ .,
n0....

U>s .-lll\ldes. F,rejol .

• Abb ildun g 2.88
Obers chrIften aufweißem

_ _ .....
_

._

~

.... _

..... <f ....

.......... -.....d .. _ _

~ P.".d"""'" J .

7Q06

11 ''''''' '

B""" ."01_.. ..,,001 ' wo....

...."'..... ,-,,""'-. of li'>

Auch Verweise werden eigens gestaltet . Um Verweise von anderen TextsteIlen abzuheben, werden sie mit stark kon trastierenden
Farben gestaltet, meistens mit Unterstrichen. Einzelne Zustände
(link, hover, IIlslted) werde n einzeln gestaltet und sorgfäl t ig ausgewählt.

2·3·3

Fla tt ersat z ode r Blocks at z?

Unter Flattersatz versteht man eine Satz form, bei der die Zeilen ungleichmäßig auslaufen. Der Text ist beim typ ischen linksbündigen Flattersatz zum linken Rand des Absatzes bündig, die
Endungen de r Zeilen .. flattern« auf der rech ten Seite.
lorem ipsum doIor sil ~met, consec le luer adipiscing elit. Duis
a ll lern IItI ellm ir i) rt doIoIln heodreri, in Vllipulat e velil esse
moIesrie Conseqlllt, 1It1,1lllm dolore eu leugi at nul la lacilil-is al
IItro eros e r accu n SCIn e l iusto odiO dienissim qui Ol.Jndit
pratStnt krpl.1lum zuil eitleM aU11Je duiS dolore le Itugait
nul,. laclll5l. loren tpsum cIoIot Si\ amet, const<tetuer
adiplSC lns ellr. sed dlam nooummy nlbh euismod lincidunl ut
laoreet dolore maJ IllI al!q~m eral voIutp;lI. UI wisl enim ad
minim IItniam, quis nosuud uercl ta lion uhfl\{orper wscipil
loboflls nlsl UI aliquip u ea comrnodo consequat . Durs ~Ulem
vel fum !flure dol)r In hfndrerit in vulpul.;ue ve~t esse
moIfStif CorlseQlu t vel mum dolor~ ~ u Itugi~1 nulL1 laciltsis <11
vero eros ~t accumSCIn et lusto odiO di2ni$$im qul ~ndil
puestm rUp~1Um wll delenlt ~U2ue durs dolore [e leU2ait
nulla r~dli'5.l. lOtul lpsunl doIor si! amtl. (O~ lt tutr

T

A b bi ldung ~ . 89

linlcsbündlger Flatter;atz (links)
und

Blocksatz (recht s)

lorem Ipsum doIor 511 amer, conseuetuer adiplstlnz eli t. Durs
aultm IItI turn irlure dOIGr in hendleril in vulpula lt velil esse
moieslie conseq ual, velillum dolore tu le llzlal nulla lacill5is.1
'/tro tros t l accumsan tr IUSIG 0010 dignissirn QUi blandi\
pratstfll krptalum zurl de!!nll .,ugllf duos doIort te leusail
null.. I.,dlisl. lorem Ipsum dolor Sl \ arnet. cooseCle lue r
ad lpistlng eilt. std diam nonummy n,bh eulsmod Iincidunt ur
laoree t doIore rrnllna allQuam ew voIUlpU Ut llllisl enim ad
minlm IItnlam, quls nostrud eltercl tallOn ulL1 mcorper SUSCipll
Iobortrs nls! 1.11 al!qulp ell ea commodo consequat. 0Uis aUlem
'Jet eum Iflure OOIor In hendreril in VUlpulAle ...elil esse
moIesrie consequa l, vell.um dolo-re eu lelliial nulla lu iltsis al
IItro eros et i CCUfT'IS.)n e l ius lo OOiG dignissim qtli bland!1
praeselll IupLll um ur!! delenit augue duis doIore te le ugail
nulla luMisl. lorem Ipsum oolor sli amt t. COOSeete l uer

2.]

Webtypografie

119

Abhilfe liefert Hyphenator (http://

code.google.comlplhyphenatOfI.
linkcode 064), ei ne JavaScriptBibliot hek , die die Silbentren nung
aus der LaTeX-Dis tribution implement iert und Im Browser des Benutzers aus fU hrt.
Wei t ere Ansätze find en Sie in
dem Beit rag lO Das Problem mit
dem Zeilenumbruc: h in HTMl«

(www.5t1chpunkt.delbeltragl
umlxuch.html, li nkeode 065)

Beim Blocksa tz wird der Text so gesetzt , dass die ZeUen durch
eine passende Erw eiterung der Wortzwischenräume au f gleich e
Breite gebrach t werden.
Der erste Ansatz (Fl att ersatz) ist zwar deutl ich verbreiteter und
wirkt lockerer und informeller und konnte sich über ein Jahrzehnt als typischer Satz für die Textgest alt ung im W eb etablieren.
Di e W ahl hangt j edoch immer sehr st ark mi t d em vorliege nden
Layout und dem anzusp rechenden Publiku m zusammen.
Einschlägige Browserverfügen leider im mer noch über schwache und eingeschrän kte Algori t hmen, um Texte im Blocksatz zu
formati eren. Mit (S5 3 könnt e sich dies ändern. Unt er anderem
w ird an einer anspruchsvol len Silben t rennu ng und Blocksat zforma ti erung gearbeitet. Bis dahin m üssen sich Designer noch
gedulden und sich in der Regel mit Flattersatz begn ügen.

2.3 .4

S~rifen

Serifen sind geschwungene oder
rechteckige Enden der Striche,
auch Endstriche genannt . Ob
eine Schrift Serifen hat, lässt sich
meistens an den Buchstaben lO A«
und lO h« leicht erkennen.

Serifen oder keine Serifen?

Klassische wie moderne Schrifta rten werden auf jeder Websei te
unterschiedlich eingesetzt. Es zeigt sich jedoch eine starke Ten denz zur Verwendung serifenloser (Sans-Serij) Schriften wie Verdana, Arial, Frutiger, Futura , Lu cida Grande, Myriad, Gill Sans,
Trebuchet {U r den eigen tlichen Text und von Serifenschriften wie
Georgia und Times New Roman für Überschrift en. Bei Fließtexten wird der in den 1990er-Jah ren dominierende Serifen-Font
Times New Roman kaum noch verwendet und zunehmend d urch
die extra für das Web entwickelten Schrift en Verdana und Georgia ersetzt. Unter anderem kann sich auch Lucida Sans (eine der
Systemschriften in M ac OS X) in der Designszene aufgrund der
verbesserten Lesbarkeit beha upten. Generell eignen sich Serifenschriften allerdings eher für den Druck.

. . . . . . .__
. . ._w_
_
. -. ....
--_
---_. .

llfe
h ~_
le'_~
_ .. _'r"", a•.~~I!
_
I

_....., ...
......
""'

......

~---

Helpi ng to g

towards succ
'.-

........

Ru byon Rails wor!

Abbildung 2.90 ...
Bunte und große Übersc hri ften
heben sich ab und bringen das
Thema klar zum Ausdruck.

120

2

Designkul tur Web 2.0

Interior
Dialogue
....

-,,-_ _,-......

__ ... _

... . -.. ........ ,/t.

"" .........

,-~_

Marrakech Cuhlne, a r
restaurant recommenc:

Where are the
Photoshop AlternatIVes?

J_,

,~

_-~_

.. ....... ......, .....

- ~ _ . ~_.

_-~_

RADIO CIIIDAD

~

,-_.__ .. _'"

......

I

Ein weiterer Trend, der si ch in den letzten Jahren durchgesetzt
hat, ist die statische und dynamische Ersetzung der Überschriften
durch entsprechende Bilder, auf denen Texte als Grafik dargestellt
sind . Der Grund für dieses Vorgehen ist, dass es nur zehn Basisschriften gibt, die unabhängig vom installierten Betriebssystem
auf jedem Rechner korrekt angezeigt werden. Ein Designer hat
somit nur eine spärliche Auswahl an Schriften für eine kreative
und glei chzeitig plattformunabhängige Textgestaltung. In einem
Bild können dagegen beliebige Schriften verwendet werden .
Um einer Webseite mehr Originalität zu verleihen, greifen
Webdesigner häufig auch zu (SS-basierten Techniken, die Überschriften durch grafische Bilder ersetzen (Dynamic Text Replace·
ment) oder zusätzliche Schriftarten durch dynamische Lösungen
(etwa sIFR) einbetten. Mehr zum Einsatz dieser Techniken finden
Sie in Kapitel 3, »Textgestaltung ...

2.4

Seitenelemente

Neben grafischen und typografischen Ansätzen erleben auch
übliche Seitenelemente wie Navigat ionsmenüs, Formulare, Suchund Eingabefelder eine gewisse Veränderung im Web 2 .0. Meistens zeichnen sie si ch durch eine deutliche und benutzerfreundliche Darstellung aus und fallen auch einem unerfahrenen Nutzer
schnell auf.
Regist erka rt en
Vertikale und horizontale Registerkarten (Tabs) gehören mittlerweile zum Standard moderner Webseitengestaltung. Als intu2. 4 .1

itiver Ersatz für tabellenbasierte Navigationsmenüs bieten sie
ein leicht erkennbares Merkmal zum Browsen durch einzelne
Rubriken einer Webseite. Üblich für Desktop-Anwendungen,
stellen Tabs eine bequeme Navigationshilfe dar. Im Web werden
sie eingesetzt, weil sie Seitenbesuchern vertraut vorkommen. Die
Gestaltung der Registerkarten variiert enorm. Schlichte Entwürfe
stehen bunten Designs gegenüber. Die Hauptfunktion von Tabs
besteht dabei darin, durch benutzerfreundliche Navigationsansätze eine angenehme User Experience sicherzustellen. Angenehme Erfahrung wirkt nicht nur bewusst, sondern auch unbewusst; ihre Wichtigkeit für das Verbleiben der Nutzer auf einer
Seite darf nicht unterschätzt werden . Das Navigationsmenü ist
dasjenige Element, das während eines Seitenbesuchs am häufigsten benutzt wird . Demzufolge sollte seine Gestaltung sorgfaltig überlegt werden .

24

Seitenelemente

I

121

.

,, ,
,. - I tJ-~'"

,...., """

LlquldW.b Du l9ft: Blllld Ir rigid aftd

j

w••

c..... . :

<>

.

.

_.

~

Web Co ll ab

456 BEREA "
"
"""" . "

.. . . .

..

.....

........

"" II!!!!!!III - .

. , ,,,., .,, ..,,....
Abbildu ng 2.91 ..
Regi5terkarten im Web 2.0:
bunt, anschaulich und benu tzerfreundlich

~ . ..... ,

'

w,.

• lis la l
~

~r

Durch eine angenehme Erfahrung wird ein positiver erster Eindruck erzeugt, der jedoch nicht nur mit der Seite selbst, sondern automatisch auch mit dem Seitenbetreiber in Verbindung
gebracht wird. Kleinste Unst immigkei ten bei Farben, Schriften
und Schriftgrößen, Formen oder mehrdeutige Benennungen der
Rubriken werden sofort er kannt und mit Skepsis aufgenommen .

•

I

W.lcom. to DIll

I
!
•

pac

c

Itynb & prim d

Abbildung 2.92 ..
Wer anders sein will. riskiert
ungewöhnliche Ansät ze. Zum
Beispiel vertikal ausgerichtete
Registerkarten.
122

I

2 Designkultur Web 2.0

__

-_ _",-..
W"lkom bij ComJ*'!O

.... .....

~_

Gulde de Praguee

I

N\anch ein Designer macht es anders und riskiert vertikal ausgerichtete Registerkarten. Bei die5em Ansatz ist der Text zwar deutlich schwieriger zu lesen; doch in dem Be5treben der Designer,
das alltägliche Leben möglichst realistisch abzubilden, hat dieser
Ansatz seine Berechtigung: . Schließlich findet man vertikale Registerkarten in Büromappen und Unterlagen genauso häufig wie
ihre horizontalen Ausführungen.

2.4.2

Sprec he nd e Bl oc knav igatio n

Neben Registerkarten setzt sich zunehmend eine weitere Gestaltung:stechn ik für Navigationsmenüs durch, die sog:enannte spre·
chende Navigation.
Grundsätzlich besteht die wichtigste Aufgabe einer Navigation
darin, Nutzer eindelJtig über ihre Navigationsmöglichkei ten zu
informieren. In der Praxis ist dies mit wenigen Schlüsselwörtern
manchmal nur schwer zu erreichen, da mehr oder weniger verwandte Rubriken häufig zusammengestellt werden, um die Navi·
gation nicht ausufern zu lassen . Deshalb muss man oft zu allgemei·
nen Begriffen greifen , die das Themengebiet aller Unterrubriken
zwar abdecken, dafür aber letztendlich weder konkret noch sehr
aussagekräftig sind. Um diesem Problem entgegenzuwirken, tendieren Designer dazu, Navigationsoptionen mit kurzen Beschrei-

So lasst sich etwa bei einer Registerkarte nicht genau beschrei ben,
welche Inhalte sie präsentiert dafür fehlt meistens der Platz in
der Leiste. Somit Ist ein KUck des
Besuchers notwendig. Der klickt
jedoch ungerne auf Unks, die seinen aktuellen Interenen nur wenig entsprechen . Somit wird ei ne
womöglich interessante Rubrik
nicht beachtet.

bungen zu unterstützen . Im Gegensatz zu Schlüsse lwörtern, die
nur wenig aussagen und deshalb . Ieise« sind, vermitteln solche
Blöcke Inhalte präziser und sind somit . sprechend«.

.. ..- .....

Manc hmal wird eine solche Blocknavigation mit Icons erweitert, um nicht nur informativer, sondern auch attraktiver zu sein.

Down lo ad

~

okk he~ 110 iJlIl tb3

- _...

--

""T :..

Buy Now
Instant L-.d..,...

-----tJ

LI 11::'. _

Q

">~I'jll( I"~)

1!i\

I)lfgno(;'dco

g

~lZo"cItJn9

11

... Abbildung 2.94
Sprechende Navigation verrät
mehr Ober die I nhalte einer
Rubrik. Manchmal ist sie ilberflüs~
slg, manchmal jedoch notwendig.

... Abbildun g 2.93
Sprechende Navigationmenos mit Icons . Diese sollen die N<wigations .
möglichkeiten verdeutlIChen und attraktiver eßcheinen lassen .
2-4

Seiten elemente

I

123

Abbildung 2.95 ~
Alt ernativ zu einer sprechenden
Navigation lässt sich die Hierarchie in der Navigat ion etwa
durch einen Baum darstellen.
Studiorackel.org

)

..

f~~
..
- •
...
..-'in ;z-"
...

, "
,,~,

o

--'I~ d

-.-''''

2.4 .3

Nicht jeder kreative Ansatz ist
besser als ein langweiliges Standard-kon. Viel Wichtiger als das
Design selbst iSt, dass Seitenbe sucher die Funktion, die das kon
repräsentiert, möglichst schnell
erkennen und verstehen können .

RSS-Icons und Sociall co ns

Zusätzlich zu gewöhnlichen Icons, die vor allem der Veranschaulichung von Inha lten dienen, konnten sich in den letzten Jahren
spezielle Icons etablieren, welche sich unter anderem die neuen
Entwicklungen in der Bran che zunutze machen.
Zum einen zeigten sich zahlreiche kreative Ansätze zur Gestalt ung von RSS-lcons, also leans. die den Newsfeed der Seite verlinken und Seiten besucher diesen abonnieren lassen. Solche Icons
sind meistens bunt und auffällig und werden in der Regel im
rechten oberen Seit enbereich platziert, um von den Besuche rn
schnell gesehen und erkannt zu werden.
Zum anderen versäumen es die Seitenbetreiber nicht, ihre
Besucher durch Sociallcons auf soziale Netzwerke und Communities au fm erksam zu machen. Insbesondere MilBazine und Blags
bauen solche Icons gerne ein. Dadurch können Nutzer Beiträge
weiterempfehlen (zum Beispiel auf StumbleUpofl) oder etwa ein
Lesezeichen ablegen (Siehe Digg oder Delicious) und somit die
Präsenz eines Beitrags in sozialen Netzwerken stärken.

_
_-_._-_.
_-.
•.,.._ ------_. _.-_- ----.. ----'·-'=.....
._-_._-- 1
_.m
- --..._--_..- '"
.-.-_-.
.-'''_
1.' --- 1... ...

Sn. I Promote lhII Polt,

.. Abbildung 2.96
Krea tive RSS-Icons Im Groß- und
Kleinformat. Designer nutzen ihre
Gestaltungsfreiheit kreativ aus.

. ......--..,--_ D

.......

"""1 _ _ _

-~---,_

.....

Abbildung 2.97 •
Social lcons können sehr hilfreich
sein, um die Präsenz eines Beitrags in sozialen Netzwerken zu
stärken . Damit lassen sich neue
Besucher gewi nnen.

124

2 Designkult ur Web 2.0

8

"

.~

....

12\1 ~

,~

H

c ®e ", o

.....

I

Social leons, meistens sehr auffiillig und ansprechend gestaltet,
bilden in der Regel die Logos der jeweiligen sozialen Netzwerke
ab. Sie befinden sich oft direkt unter den Beitragen. Das Spektrum der Seiten, die solche leons intensiv einsetzen, reicht von
der New York Tirnes über Unternehmen-Blags tHs zu persönlichen
Tumblelogs. In Zeiten des dynamischen Mitmach-Webs verzich-

tet man ungern darauf, schließlich geh t es um eine nicht zu unterschätzende Quelle neuer Besucher.

2.4.4

St atu s-El eme nt e und Content leons

Social kom t reten in Blags auch in einer etwas andere n Gestal t
auf. In Zeiten, in denen das soziale Kapi tal gerne gesa mmelt und
zur Schau gestellt wird, bauen Designer sogenannte Sta tus-Elemente in Websei ten ein : Blöcke, die etwa die letzten abgelegten
Flieh-Bilder, Defiäous-Bookmark s, Twitter-Nachrichten, Lieder
bei Last. FM, Bücher bei Amazon oder Videos bei YouTube enthal-

ten. Sämtliche Details des Alltags lassen sich schne ll und automatisch einbauen .

...._.....

...... ..

_--~

~_

..."'-. ........
. . _-- ....... -

-~~----p

_... _- ...-

... ..,..,

-

r['",
~j; .

•

... Abbildu ng 2.99
TWitter· Status·leons in einer Übersicht

.... Abbildun g 2. 98
Flieh-Bilder und Alben bei Last.FM werden häufig
dekoriert und in der Fußzeiie zusammengestellt.

Icons kommen auch zum Einsatz, wenn Designer deutlich machen
waUen, in welcher Rubrik ein Beitrag abgelegt wurde. Dieser Ansatz wurde bisher kaum verwendet , gewinnt nun jedoch
zunehmend an Popularität, insbesondere bei Magazinen und bei
rasterbasierten Designs.

2-4

Seitenelemente

I

125

---_._--"'--"'-'"
"--------__._..._... ...
_-_ ""-.....

~ .-

0"" ---'

•

----~

........

..

,......

-

CI' ~,. ___ __

....._--_
._-..._
__
.._,
__-_
. _-.._
...-----_
_--...........

_~.

...

....

.. Abbil dun g 2.100
leo ns , die das Thema eines Beitr ags
andeuten sollen, können groß und
auffallend.

.. Abbildung 2 .101
... oder subtil sein und
Sei teninhaJte un ters tützen.

Abhängig davon, ob eine Seite sich eher als ein Magazin oder

doch als ein bescheidenes 810g etablieren möchte, können diese
kons größer oder bunter werden. Ebenso nutzen Designer häufig
kleine Illust ra tionen (Thumbnails), die einen Blag-Beitrag veranschaulichen sollen.

dui

design 040g
ties'gn Ullcje, the inl1utnce

-_---__ _-

45 ßeauUful Motion ßb Pholos

Revi. lhtd: un... M••• jOI _
Todoy fm I..o:ky.....,.q.., ~ jonod by l.MIou t.INt, .... ..,<..wr
.......... (_ 1ioHLf1U} ........ AIonno< Mi.. USA..,.

BIIon <Of\'\ ~. lMIS5I_ 11I'IirW "
1IIl""""",-,-"" 101-. _ _ 1<>

""" -1ooi<f'9000C1

-

_ _ _ . _ " " .... _

. -_ _ ...... _

- - - ~-_

...

....... _ 0 1 ..... """ ..

........ _ _ • _ _ 01

_ ...-

....... .-..... .............
"I_L_. -----.. . . 'I....

.._

~. 10 Futur ~tlc UnI" Interfac..

-. ,-~-.-, -..--

~

.. ....

.. -_ .....""' ..

DUI Daity: 112W08 (2J _
l1roaf'I' l!Io _
arewroo-I rmn'IrIG 10 rnoI<e ..... PfeItI bo:I
_
... OO .. bmI501 ..... con ...... 1Ie _ •

-

1nU(~ ~ t eQU/ftC}' ' ''"'' they\oo - .

'*"""

......,tome ••

$0 "" .. OIIs

10
ßeautiful Thlngll FOf
A Beaulilul WIe
_ .... _ " ........ _
....... 01 _ _ _ _ _ ""'"

W llat's so eool a.bout Cu.? 111

l1:li

CUII ....... _eil """"" !tW. ..... lIIlOn ~ llo! 01 new'!O ..
.... _ _ ..,.;e ..s.......,~)'e5WOor Fnl~b)'l!Io .....

.

... Of'Irlecll<N'lCR M ....... !Ul'I!!fOUIOUW..-._

--.
... Abbildung

__

. . . b • ......- _ - . . .... ·, _ _

T~' '''_

'-.. __

... Abbildung ~,103
Smashingmagazine.com

;l.10~

Thisisdul.com

126

_ _ , ) " ..... _

2 Designkultur Web 2.0

Da Magazine, Unternehmen und Blogs persönlicher we rden,
ist es auch nicht verwunderlich, dass viele Betreiber eines Blogs
neben einem Beitrag und der Rubri k, in die er abgelegt wurde,
zusätzlich deutlich kennzeichnen, von wem der Beit rag stammt
Zu diesem Zweck werden sogenannte Author lcons eingesetzt , die
ublicherweise ein kleines Foto des Autors en thalten .

I
-_
_.__ ......_
.... -- --_._
...
-............. -_
_
_.........._..........--..
___ . . ._.1
0 _...._- '" _._-_.
_
---_
........ ...._._
_..........-..
__..........
-_.
.. _.....
_ __
_
._
_
. ..........,.....
......_
.... -._.,
.... _
....
__
.. _
Nlnja Turt le Olla

&O~_

"

.....

~. -

_ .. _......... -.. .;0 _

... .........

..

,-~

JJi. t }, _ ...... _ ....... _ .........
... ... t ..... .
... _
.... ...... ......._ ,,"""'"
_

~

~..,.

.......

1 1_ _ . - _

,

.. Abbi ldung 2.104
Das Web wird persönlicher. Beitr<!ge in Blogs verfassen nicht anonyme Ghostwriter, sondern Autoren, die freundlich, kompeten t
und persö nlich wirken möch te n .

Die aufgelist eten Icons können unter dem Oberbergriff Content
lcons zusam mengefasst werden. Sie dienen nicht der Verzierung

der Seite. sondern unterstützen Inhalte durch die Funktion. die
der Designer ihnen verliehen hat.
Such- und Ein ga befelder
Typische Such- und Eingabefelder im Web 2.O-Look nehmen in
der Regel deutlich mehr Platz als ihre Vorgänger ein . Auch sind
sie häu tig bunter und ansprechender gestaltet. Der Anwender
muss zudem in der Regel nur die wichtigst en Angaben machen,
wie beispielsweise Benutzername und Passwort. So mit en thalten
Webformulare häufig nur wenige Felder, um eine Anmeldung in
kurzer Zeit zu ermöglichen.

•

- .-• •

-

•

"-- -

,..--~-

---

"'_

..

-

,-

- ,
-'.~ - _._- -

,••• w, . .....

... ...
~

..._
_---_._-._----

~""-"
'''''''''''''' ...
....

--

-.

.. Abbil dung ~ .105
Sucheingabefelder werden grö ßer. Der Trend setzt sich auch bei
Schaltflächen aufWebformularen
durch.
2·4

Seitenelemente

127

--

SlLUWJ I ON CELBBJUl'IC

*
.. Abb ild un g 2.106
Suchboxen werden zunehmend
bunt und attraktiv gestaltet.

Auch bei Online-Formularen lassen sich grundsätzliche Änderungen fest st ellen. Manchmal können sie ein eigenständiges
Design vorweisen, umgeben von Rahmen. Das st atische Ausfü llen
der Eingabefelder wird durch begleitende Hints, Tipps und eine
Hervorhebung des gerade bearbei teten Feldes ersetzt. Moderne
Ansätze verändern das übliche Erschein ungsb ild eines Formulars;
mit CSS wi rd dieses an das übrige Layout angepasst und even t uell
zusätzlich mit Hint ergrundbildern dekoriert.

2.4 .6

Tag Clouds

Die zunehmende Bedeut ung der Tags ließ ein neues Muster in
der Seitennavigat ion entstehen. Der Ansatz, die w icht igsten oder
populärsten Inhalte durch eine entsprechend gewählte Schriftgröße anzudeuten, führte zu der Idee, die Hauptthemen einer
Seite dynamisch du rch ent sprechende Tags anzeigen zu lassen.
Das Gewich t eines Themas wi rd dabei an der Häufigkei t der vorkommenden Stichwörter - sprich Tags - auf der Seite gemessen.
Je öfter ein Thema angesprochen wird , desto fetter wird das en tsprechende Tag und desto größer seine Schriftgröße.

u..--......

9
tard ......... accountabllity a c t i v i s m
Adam Smith Problem 1Id-.·cruSUll ~_!t.Itl .. Alri~A1

.wi:II._

th! 01 Qooodo "'............ Amcrica Anor!IndI ArId)' Coo" lIIpo M<t"'Ittn " ....... lIIlil'.'U ...., AJ'I

AnIo

artsy fartsy .Ildlo-.tloar1ty

... d_MpIr1catabMlutlb&ll ........ ~',....,IhIICIt_

..

~ blogging '-lnokl)1lldlthk business capiteJiam ...
....

_

.... pa-nu..Mipehange

t"hoocl OCA

cl~ citizen

101_..

"""""",,1<'..

.. A bbildung 2.107
Tag Clouds werden mit Gewichten
versehen . (Quelle : carterli te.org)

......"'"""C1ori._IUCIorio'~

media ~""'<'OU.obo1'QlIo,,
community .......... Cr...!<ioooo t .

.... r....-CO~C-I' _ _

...... c-..... ~............

~

_!Ine...,....

IXIrpon.t;on corruption antivity..-,.., O' .... WI_ r:oowt H'W""'I DI*l
n....tW'·f~ ... ~!WJd·, .. ...........,.~Ij.,Parl1d~nOU'
0-.,. . ._
...- . - .....,.dUtur~ Dm: s...t. doo:u"""".'Y 0aßakl

w...,.... .

"'*'"

lunJoI.Id downlo>ool1 Goft.,..boro [)Rlof dumb 1'.<\100-....,
Pd C_odouritu
d.ct:Ion_11!Ibaa ~ _
experience design
_
fAmlI)' ftQr fWA lilm IluntWlllil:UlliroUdIr fbc:kr"
_,

""""C..,,,...

'Dfflp PolIry'o. sn..m..Is-n. funny
a-,.George Bush sI..t.l....,.-.Goop. govemmcnt Gl'D Ilntffitt

pMd Greensboro ~ .... G...NboroMUCICr11~boroIOIjl d
G'fltC ~ ..... IIcboll.oh /UIory ~ hip hop t...otr .--.. .......
Abbildung 2.108 ..
Tag Cloud eines
Nach ri ch tend ien st es

128

2 Designkult ur Web 2.0

b_ _ humaoityb)......-:l' ...... m.a:o._Iq1Md1!.K,.-.. _ _

IrltonnIIIioa mfomution an:hileI:ture innO\'ltion imlptr.tton .... _
irllendioa

~ internet .-..... u.. Ira

War islam

t...aa.oo

----Q

'" ""..,

_

.... """""""1tiooo
I .....

"'''''''''

.. ... _

.. Abbildun g 2.109
Tag CJouds bel Webdesignerwall.
com und Wordpress.org.

_ _ CltecariN _ _ _ _

databue _ _

_ _ _

_ Installatioa_ ...... _

..... _ .
w,.QI. _

..

...... .,...poa_ R~S _ .... _
-upcndo .. _ -

TÜltlted ..... _

11...... W. . . . .

Das Ergebn is ist ein neuer in tuitiver Navigationsansatz, der die
Schwerpunkte einer Präsenz sofort visuell vermittelt. Al ternativ
ordnen Designer Tags manchmal alphabetisch an und erzeugen
damit keine Tag-Wolke (Tag Cloud), son dern eine Art Tag-Verzeichnis.
TAGS
· ~~@~ill~~mw~w~~~~~~~rn@ß

---_
_ _---_
___.-

... '- .. '.......
........ ...... ... ...-........
=--=-~~~

--_._---

Weitere Beispiele und einschl.!i.gige Techniken 2um Design von
Tag Clouds finden Sie in dem Beitrag _Tag Clouds Galle/}' : Examples And Good Practices-

(h rrp:l/Www.smashlngma&azfne.
coml2007/ 111071t ag-douds-gallery-examples-and-good-pract/cesl.
Unkcode 066).

::r.:::.=:::--~:.._=

_

------.
-----.. ---- --,
=--_
.. _--------b _.::.. ..~ -:...:

-----------------_.
-------------------

2.4.7
Zebra-Tabell en
Der Grund, warum Streifeneffekte (daher auch der Name ZebraTabellen) beim Design moderner Tabellen eine besondere Rolle
spie len, liegt darin, dass man beim Umgang mit langen, einfarbig
gestalteten listen sehr leicht die Orienti erung verlieren kann. Dies
verursacht einen zusä tzli chen zeitlichen Aufwand. De r Benutzer
muss sich auf eine langwierige Suche nach den gewünschten
Inhalten begeben.

... Abbildung ~ ."o
Eine Tag-Navigation wird manchmalln Form eines Tag-Verzeichnisses prAsentierl.

Zebra-Tabe 111m
Zebra-Tabellen brechen die
Monotonie der üblichen tabe llari schen Ansi cht auf und erleichtern den Zugang zu den Da ten .

CO HrU,URA Tl O HS

DU AL 1 . ICO H Z

DU AL 2Ci HZ

HOlll

M9<l S4 LlIA

M9<lS5LL/A

M9<lS7 LlIA

G5 ,lDUUOl

Dual1.8Gt: ~rPC G5

1Gtz pe . p.oceno.

1.25GHz pe. PICJCe5S0.

5121( pe. p.oce~to .

5121< per

'lOtlUllllU S

U V lI. t t.,ttlf

S121( pe.

proceno.

proce-sso.

... Abbildun g 2.111
Zebra-Tabelle: Eine Tabelle mit alt ernierenden Hintergrundfarben. gestaltet von Veerle Pieters.
(Quelle: http://veerll! . duoh. com/index.php/bloglco mments/a3ss_styled_ ta ble, Unkcode 067)

24

Seilenelem en te

129

I

Abwechselnde Hintergrundfarben bei geraden und ungeraden
Tabellenzeilen sollen Anhalt spunkte für ei ne bessere Lesbarkei t
ermöglichen. Ein deutlicher visueller Un terschied zwischen Zeilen oder Spalten sorgt fü r einen besseren Zugang zu den Daten,
die in einer Tabelle gespeichert sind. Zeilensprünge sind ein facher, und N utzer können ihre Aufmerksamkeit leichter auf die
gesucht en Inh alt e fokussieren. Darüber hi naus werden ZebraTabellen häufi g mit einer Sort ierfunktion versehen, die eine noch
bessere Orien t ierung und schnellere Ex traktion der Informationen ermöglichen soll.

2.4.8

Media-Blöcke: Videos im Einsatz

Seiten, die ein Produkt oder eine Dienst leistu ng anbieten wollen,
setzen häufig auf interaktive Medien - etwa auf kurze Videopräsentationen, die das Angebot möglichst ansprechend und beeindruckend darst ellen sollen. Verfügt die Zielgruppe über schnelle
Brei t bandzugänge, so könne n Designer sowohl Audio- als auch
Videodateien problemlos einsetzen. Die meisten Seitenbesucher
werden ohnehin schon mit den notwendigen Plug-ins ausgerüst et sein. In den meisten Fällen reich t ein Flash-Plug-in oder
JavaSc ript-Un tersützung durch den Browser vollkom men aus.

Abbildung 2.112 ..
Auf Ci-design ,com.au is I ein
Flash-Video kompakt und sorgfält ig in das Layout integriert.

Abbildung 2.113 ..
Gelbackboard.com integriert ein
Video sehr subtil. Ein sim pies
Icon genGgt um die Funktion des
Designelements deutlich zu kommunizieren.
130

I

2

Designkultur Web 2.0

Hi I'm Barry.

...- -_._-'-'''-_.._.._-_
.... ....-_-.........
---_._-..
MailChimp

f,., heIpIng l000s of

........

-_
•._-----_
... ----------~­

time.nd grow lheir
0!'IInt tMIMH. How?

..

------.....- ..._--.
-----

...

-.

-

-

6 Abbildun g ~ .114
Goodbarry.com mit einem riesigen Video, das zentral
plaUlert Ist und Im lay out dominiert

~---

;0-

--_.--.

TRY IT FREE

6 Abbildung ~ .11 5
Mailchlmp.com
~.4.9

Fotoga lerien und Karussels

Im Web lässt sich di e Interaktivität nicht nur mit Fla sh, sondern
auch mit JavaScript reali sieren. Und so nimmt die Popularität unterschiedlicher Jav a5cript -Ansatz e rasan t zu . Viele Unternehmen biet en auf ih ren Webseiten interaktive Flash- oder
JavaScrip t-basierte Fotogalerien (Lightboxes) an ; diese enthalten
häufig elegante Dialogfenster und 5lideshows .

Vor wenigen Jahren sahen Java5crlpt-Fenster nicht gerade attraktiv aus. Mit Fot ogalerien und modalen Dialogen. die sich mittels
(55 leicht gestalten lassen, ist dies
Im Web 2.0 anders geworden.

Manage your fonts, the App/e way.

I\M

....-,....
...--......
.--

·---- -- -..- -

It. _ ..... _

-

~

-

~

If'-_

-~

-

,~

,,,...
..
_.
Q .. ... -, ...,--,
"

,
•
•
•
•
•
• ,T , •• X .,T ,.. ..• .•
$

- '"

•

Unlcode Glyptl lable

•

h .... _

.. Ibo,.. ..

...w.~""

... _

......,

.
U

' __ A

.. . .....

"'_::;'_:.::b:.:~:"='===~:~_="

__ . . . .,. __=~==,

Abbildung ~ .116
Fontcase (http://www.bohemiancoding.comlfontcase/indelC .php) nutzt
JavaSetipt, um zusatz llche Information über Eigenschaften der Anwen dung dar:zustellen .
6

2-4

Seiten elemente

I

131

I

-

..•
.~-

_. __.

.-._-_._...____0 .. _ '

_

••

.. Abbildun g 2." 7
Ein buntes Dialogfenster auf http://www.realmac.
software.com/r apidweaverI themes/i ndex .ph p. Von
lang-veiligen und unfreundlichen JavaScript.Pop.Ups
ist hier keine Spur geblieben.

_.
...'-_._.-". . -....... ,....,

_-

... Abbi ldung 2.118
Wishingline.com bietet ein Panel mit verwandten und weiterführenden links als
Dialogfenster an.

_

-,_
_... ....._..-

-_.

o

........ _ _ 0

---_.
--------

"

.. Abbildun g 2.'19
Ein Dialogfenster auf commandshift3.com

[Oi alog fensterl
Ein Dialogfenster ist ein Fenster,
das in verschiedenen Situationen
von der Anwendung eingeblendet
wird, um bestimmte Eingaben
oder Bestätigungen vom Benutzer
einzuholen. Grunds<itzlich <ihnein
sie üblichen OK-/AbbrechenFenstern und JavaScript-Dialogen .
Dialog fenster sind jedoch nicht
mit Browserfenstern zu verwechseln. Sie sind deutlich benutzerfreundlicher und subtiler gestaltet.
132

2 Designk"ult ur Web 2.0

--

-

... Abbildun g 2.120
Ein Dialogfenster auf Grooveshark.com.
Wenn es um wichtige Funktionen geht. wie
et\oVa die Anmeldung oder Registrierung, so
erscheint ein Dialogfenster, das zuerst ausgefüllt werden soll. Der Rest der Seite wird
verdunkelt und ist nicht mehr zu sehen. Das
Fenster lässt sich mit einem Klick auf das
Icon in der oberen recht en Ecke schließen.

Dialogfenster und Slideshows nutzen Designer auch in einem
anderen Kontext , aber zum gleic hen Zweck - für die sogenannten
Karussell-Menos, genauer Slideshow- Navigationen, die Besucher
durch mehrere Rubriken einer Seite interaktiv navigieren lassen, ohne dass die Seite mehrmals gel aden werden muss. Dabe i
sind weder ein vertikaler Seiten durchlauf noch Bewegungen mit
dem Mauszeiger notwendig; alles geschie ht in einem kompakten
Inhaltsbereich.

-

.-

~-

-,
--_
...
...-. _---....-......
--_
..._
... __
-'---"--"'-"'----_
..__
._...
'-'...._._-_.
_..............-_...
-----_
....-._--,
__..__-

- w.-

~

...

1Ct-

-----'
~-~-- --- ~

.. Abbildung

I

2.121

Eine klassische KarusseUNav igation bel Panic.com/coda.

,-

......

Dies spart dem potenziellen Kunden Zeit und hilft, si ch ganz auf
die Inhalte zu fokussieren und diese schneller wahrzunehmen .
Nicht verwunderlich also, dass Karussells insbesondere auf Produktseiten besondere Beliebt hei t genießen . Sie werden aber auch
von Magazinen und Unterhaltungsseiten verwendet, also Seiten,
welche die Aufmerksamkeit ihrer Besucher auf spezielle Inhalte
lenken wo llen .

Weitere Beispiele von Karussells
finden Sie auf http://www.

sm/ley( /Ir.(omldes/g n_elements!
(/lrou sels/ (lInkcode 068) ,

.. Abbi ldung 2.122
Karu ssell aufWeinsteinco.com

.. Abbildung U23
Bei Arcl nsplrations.comlkobel
sieht man eine Slideshow-Navigation nur beim genauen Hinschauen. Der Inhaltsbereich gleitet
nach unten, wenn eine der NavigationsopliOnen aus der Kopfzeile
angekllckt wird.
2.4

Seitenelemente

133

Abbildu ng 2.124 ..
Ein horizontales Karussell
auf ITV.com

Abbildu ng 2.125 ..
Die Navigation diesmal rechts
platziert - auf Music .Yahoo.com

Der Einsatz einer unkonvent ionellen Navigation ist immer mit
einem gewissen Risiko verbunden.
Schließlich muss diese im Gegensatz zu klassischen Ansätzen erst
erlernt und verstanden werden,
was zusätzliche Anforderungen an
den Nutzer stellt. Dennoch experimentieren Designer in Zeiten
von Rich Internet Applicat ions
und Ajax mit interaktiven Ansätzen. Diese stellen insbesondere
eines in den Vordergrund: umfangreiche Möglichkeiten zur Interaktion.

Dabei werden Inhalte in einem Berei ch zusammen mit weiteren
Rubriken präsentiert. Wer mehr Informationen über das Produkt
erhalten mochte, erreicht dies uber Kl icks auf die integrierte Navigation. 8eim Übergang von einer Rubrik zu einer anderen gleitet
der 810ck mit neuen Inhalten uber den alten Block. Die Navigat ion kann entweder direkt mithilfe von Navigat ionsoptionen oder
Pfeilen erfolgen. Da die Inhalte ubereinander zu gleiten scheinen
und si ch gegenseitig aus dem Inhaltsbrei ch verdrängen, erinnern
sie an ein Karussell und werden deshalb auch dementsprechend
bezeichnet. Technisch wird dies meistens dadurch realisiert, dass
man die Blöcke in eine Seite einbaut, sie aber beim Laden ausblendet und erst auf eine Nachfrage hin anzeigt. Die Nachfrage
ergibt sich aus den Klicks der 8esucher und wird mittels JavaScript
gesteuert.

2.5

Neue I<onzepte

Die Entwicklung der Webseitengestaltung stellte die Designer
vor die Aufgabe, die Nutzer durch beeindruckende visuelle und
textueUe Lösungen überzeugen zu müssen. Neben einer benutzerfreundlichen Darstellung der Inhalte trat dabei eine neue Kultur der Seitendarstellung in den Vordergrund. Diese wurde durch
mehrere neue Konzepte geprägt, die einander teitweise widersprechen oder ergänzen.

134

2 Designkultur Web 2.0

2.5.1

I

Plakatives und sa uberes Des ign

Um eine möglichst gelungene Kommunikati on mit den Seitenbesuchern sicherzustellen, eignen sich aussagekräftige Bilder und
Fotos wohl am besten. Gekonnt eingesetzt bringen sie das Thema

einer Webseite sofort auf den Punkt und schaffen eine Atmosphäre, die zum gesamt en Seitenkonzept passt. Diese »plakative«
Perfektion zu erreichen, ist in der Regel keine einfache Aufgabe.

Meistens liefert sie aber beeindruckende Ergebnisse, was die
Usability und Seitenwahrnehmung angeht .
Grafische Ansätze sind meistens durch großzügig geWähl te freie

Räume begleitet . Sie stellen das am stärksten zur Geltung kommende visuelle Element einer Seite dar. Sollen einzelne Elemente

hervorgehoben werden, so setzt man auf ein sauberes , gut strukturiertes Design. Dieses betont vor allem die lesbarkeit einer Seite.

_-.---_._

.----_._-

.

~:::=-

----_.--------._...._.w
_._-_
..•.-...._--_--'_'·M· __

T Abbi ldung 2.126
Webdesign als eine neue Form
der Werbung. DeSigner greifen zu
Kom munikationsmitteln. die man
aus dem Printbereich kennt .

[J --"-: ...

:

.~'

-_
....---..... _---

... Abbildun g 2.127
Saubere Designkonzeple beeindrucken durch ihre Klarheit
und eine außergewöhnliche Benutzerfreundlichkeit.
(Quelle: Mobilewebbook.com, lighthouseapp .com)
2·5

Neue Kon2epte

I

135

2.5.2
Visuell auffallende Designs schaffen es , die Aufmerksamkeit der
Seiten besucher zu gewinnen.
Doch dies reicht in vielen Fallen
nicht aus. Wirkungsvolle Designs
kämpfen nicht nur um einen bleibenden Eindruck. Sie versuchen
auch, ih re Seiten besucher verstärkt 2U Aktionen (Registrieren,
aktives Teilnehmen u~ .) zu animieren .

Effektives Design

Über Jahrzehnte hinweg entwickelte sich Webdesign von einer
handwerklichen Tatigkeit kreativer Einzelgänger zu einer ernstzunehmenden Disziplin, die zum einen viel Hintergrundwissen
erfordert und zum anderen Entwicklern eine Fülle von effizienten
Werkzeugen anzubieten hat. Die Etablierung von Webstandards
hat dazu beigetragen, dass die Webseitengestaltung reifer geworden ist. Webdesigner haben viel dazu gelernt und steuern fleißig
eigene kreative Ansätze, Ideen und Techniken bei. Somit ist eine
solide Grundlage für einen konstruktiven Designprozess ent standen, die bisher nicht gegeben war.
Und so geh t es bei vielen Projekten nicht unbedingt um eine
bunte und auffällige Darstellung, sondern um ein wirkungsvolles
Design . Dieses ist ganz im Geiste des konstruktiven Designprozesses flexibel und benutzerfreundlich gehalten und lässt die Seitenbesucher schnell zu den gesuchten Informationen gel angen.

-

-'.,,-

_.------- -_.-_.

'--

---

_-_
-----,..

_-_ ---,...-

, .. c- __ ..... _

Abbildung 2.128 ..
Hovie.com : Eine klare Navigation
und Struktur wi rd mit einem
einfachen , intui ti ven und unauffälligen Design kombiniert. Hier
wird es für den Nutzer schWierig
sein , etwas falsch zu machen .

.......... .........

.___

_

..... c.o..

_~

-------_
_--_
....... _........ _-_
_~-

_----~

Um das Letztere zu erreichen, setzen Designer zunehmend nicht
nur auf ein übersichtliches visuelles Bild, sondern auch auf eine
offene, direkte und freundliche Kommunikation mit ihren Nutzern. Diese kann sowohl mit Bild als auch mit Text erfolgen. Der
Schwerpunkt bei solchen Designs liegt auf der Benutzerireundlichkeit sowie sauberen und einfachen Lösungen. Je schwieriger
es für den Nutzer ist , etwas falsch zu machen, desto besse r ist die
lösung umgesetzt.

136

I

2 Designkultur Web 2.0

I

- ................ _.....
....-- -

.

, .'
-'

,.
"UJ eIL"

• BACKSTAG[ BUX;

Das prima re Ziel eines wirkungsvollen Designs ist , einen offenen
Dialog mit den Nutzern zu führen und dadurch deren Vertrauen
gewinnen. Etwa indem Seitenbetreiber genauer auf die Bedürfnisse eingehen und kurz und bündig formulieren. Das bedeutet
bei spielsweise, dass man auf einer Produktseite nicht mit Doppel·
sternzeichen in der Schriftgröße 6 px arbeitet, sondern den Preis
klar und deutlich auf die Startseite bringt. Das schafft Vertrauen
und befrei t die Besuchern von mühseligen Suchen .
Oder man geh t weiter und greift zu bewährten Prinzipien
und Modellen aus der Wirtschaftslehre, wie zum Beispiel dem
Prinzip AIDA (Attention - Interl'it - Df'iirf' - Action, Elm o lewis,
1898). Dieses Stufenmodell aus der Marketingbranche enthält
vier Phasen, die der Kunde durchlaufen soll, um schließlich zu
einer Kaufentscheidung oder einer Teilnahmeentscheidung zu
gelangen. Im AIDA·Modell wird zunächst die Aufmerksamkeit
des potenziellen Kunden angeregt (Attention), etwa indem gen au
das angesprochen wird, wonach der Kunde sucht. Anschließend
wird sein Interesse geweckt, zum Beispiel dadurch, dass persön·
li ehe Vorteile, die dem Kunden durch ein Produkt verschaffen
werden, möglichst intuitiv und anschaulich erläutert werden
(filterest) . Danach wird versucht, beim Kunden den Wunsch
(Desire) na ch dem Produkt zu wecken, beispielSVoleise durch die
präzise Beschreibung von besonderen, exklusiven Eigenschaften
des Produkts, die seine Qualitat und seinen Wert ausmachen.
Hier gibt man den Kunde n gu te Gründe, genau dieses Produkt
zu kaufen, und sich nicht etwa für eine ähnliche (eventuell sogar
gOnstigere) Alternative zu entscheiden .

.. Abbi ldung :1.129
Hier wird Klartext gesprochen.
Der Schwerpunkt de\ Designs von
eleven2.com liegt nicht auf der
visuellen Gestaltung, sondern.:tuf
der Vermlttlut"ß von Inhalten.

D.:ts AIDA-Modell wird Mulig mit
der fünften Komponente - SaUsfaction - erweitert. die darauf ausgerichtet ist. Kunden stolrker an
ein Unternehmen zu binden, zum
Beispiel durch eine exzellente Benutzererf.:thrung und einen einf.:tchen und intuitiven Kaufvorgang. Es existieren .:tuch .:tbgewandelte Formen dieses M odells, wie
etwa AIDA Pushmarketlng.)

3 Eine Einfilhrune in die Prinzipien de§ AIDA Pushm ..kding finden Sie im
Beitrol8 _8r.chial und sm.,! zuglekh: AIDA.Pushm..-keting. Neukundengewinnung im Zeitalter des information·Overflow und Web 2.0.. (ONEtoONE
Book, Ausgabe 6, Seite 48-49)
2.5

Neue Konzepte

I

137

Weitere Richtlinien für ein wir~
kungsvolles Webdesign können
Sie im Beitrag .Five More Principles Of Effective Web Design ...

(hrtp://wW'.'/.5ma5hingmagazlne.
com/2008/0412415-moreprlnäples-of-effe<:tlve-web-deslgnl,

Schließlich wird der Kunde zu einer Aktion ~ction) animiert - die
Entscheidung zum Kauf oder zur Teilnahme. Als Beispiel betra chten Sie bitte die nachfolgende Abbildung. Playintraffik.com folgt
genau dem AIDA-Prinzip und verbindet ein sauberes Layout mi t
einem wirkungsvollen Designansatz.

LInkcode 069) nachlesen .

Abbildung 2.130

..

Das Design von Playintraffik.com
folgt dem AI DA-Prinzip.

2.5.3

Wenige Farben wirkungsvoll eingesetzt

Ein wirkungsvolles Design setzt in der Regel einen sparsamen
und sorgfa ltigen Umgang mit Farben voraus. Eine Seite, auf der
mehrere Seitenberei che auf unterschiedliche Art und Weise um
den Ma uszeiger des Benutzers kämpfen. erscheint überladen und
unbrauchbar. Effektiver dagegen ist es, nur wenige, au ffällige Farben zu wählen, die~ aber gezielt einzusetzen. Dadurch werden
Seitenbesucher die vorhandenen Navigationsopt ionen leichter
und schneller erkennen können. Für den Seitenbetreiberwird es
somit einfacher. die Aufmerksamkeit der Nutzer auf besonders
wichtige Seitenbereiche zu lenken (vgl. Abbildung 2.131 und

2.132).
5idebarcreative.com nutzt nur eine dominierende Farbe: Blau.
.. Abbildung 2 .131
Sidebarcrea tive .com
138

I

2 Designkultur Web 2.0

Diese wird fur die Gestaltunng von Verweisen. Schaltflächen
und anklickbare Designelemente benutzt. Weiß steht fUr nicht
anklickbare Inhalte, die zusätzliche Informationen vermitteln und

die Navigation und Aktionen der Nutzer unterstützen soll en.
Subtile H over~Effekte in einem dunklem Blau wirken angenehm
und attraktiv. Ein Beispiel für einen zurückhaltenden und dabei
effektiven Einsatz von Farben.
Der Seite Wilsonminer.com genügen wenige Farben, um ein
ansprechendes und intuitives Design zu erreichen. Der Designer
nutzt verschiedene Abstufungen von Grun tur die Struktur sowie
Blau und Weiß für Verweise. Beachten Sie, dass das layout der
Seite allein durch diese Festlegung sehr deutlich wird. Es lassen
sich etwa an ldickbare Elemente deutlich von nicht anklickbaren
Elementen unterscheiden, selbst wen n nur ein Screenshot der

I
=---

Seite vorliegt.
Weißraum (Whitespace)
2.5.4
Ein mächtiger Mechanismus, mit dem man einer Webseite relativ
schnell und einfach mehr Klarhei t verleihen kann, ist Weißraum
(Whitespace), in der Fachsprache auch Negative 5pace genannt.
Darunter versteht man sämtliche Freiraume, die einzelne Desi~
gnelemente einer Seite voneinander trennen . Dabei beschreibt
der Begriff einen leeren Raum zwischen Bildern, Wörtern, Zeilen und Paragraphen eines Textes genauso wie den Freiraum
ZVoJischen Strukturblöcken einer Seite. Dieser leere Raum muss
jedoch nicht unbedingt weiß sei n, wie dies der Name andeutet.
Vielmehr handelt es sich um leere Blöcke, die ein Hintergrundbild beziehungsweise eine Hintergrundfarbe des dazugehörigen
Blocks übernehmen und strecken.

• Abbildung 2.132
Wllsonm lner.co m: Alle Bilder kOnnen angekllck t werden , ebenso
weiße und blaue Elemente.
Ausnahme: In der Kopfzeile sind
grüne NavigaUonspunkte eben falls ankllckbar.

o

.

•

l't.

...i:!-

-_ ....
---

"

•

'"

------- _.
----

-- - ------

".6o Abb ildung 2.133
Whitespace: lhebignoob.com,
Concentric-st udio.com/workl,
Deslgnintellectlon .com,
CameronJo

2.5

Neue Konzepte

I

'39

Einer der Gründe, warum leere Räume eine besondere Rolle
in der Seitengestaltung spielen, ist rein psychologischer Natur.
Werden Inhalte allzu eng präsentiert, so entsteht beim Leser
das Gefühl der Enge . lange Textpassagen, die direkt aneinander gre nzen, stören das lesen und erschweren das Verständnis
der Inhal te . Dies ist typisch für Webseiten, die mit vielen unterschiedlichen Inhalten zu tun haben. Musterbeispiel dafür ist die
Webseite des Mil8azins The Economic Times, auf der die Inhalte
liIIar sehr kompakt, aber auch sehr unübersichtlich erscheinen
(F-Muster]
Dass die meisten Seitenbesucher
Webauftritte nach dem F-Muster
scannen, bedeutet, dass zuerst
der Kopf einer Seite gescannt
wird, anschließend die linke Seite
und dann der Hauptbereich, Im
Web 2.0 ändert sich dies durch
die zunehmende Bedeutung der
Weblogs.

und deshalb schwer voneinander zu trenn en sind.
Viele Informationen bieten auch viele Opt ionen, die Sei tenbesucher wahrnehmen und berücksicht igen müssen. Doch bevor
ein Benutzer seine nächste Entscheidung treffen kann, muss er die
präsentierten Inhalte in »verdauliche_ Sto cke auflösen. Studien
haben gezeigt, dass wir Webseiten ni cht nach einem typischen
Schema scannen, sondern vi elmehr eine Art Zickzack-Analyse
nach dem F-Muster, durchführen, um Inhalte zu sortie ren, zu
kategorisieren und anschließend Entscheidungen über nächste
Seitenakti onen zu treffen ,

-

p_._ ---

_--_._--......___.'---......
...._.
-__
........_._._"
__
--_._-

-

This girl could be the next
Blocon queen ...

..

,......
. .. • ... _

.

.'

_

1 _ 11lUt.

pp."

...

......os.- -_.....

...,.,.........

-- -

Abbildung 2.134 ..
Die Webseite der Zeitschrift . The
Economic TImes« (QueUe: economictimes.indiatimes.com)

~

1-3

Getrennt durch leere Räume bilden Inhalte größere Einheiten,
mit denen man leichter umgehen kann.

Abbildung 2.135 ..
Negative Space dominiert. Richtig eingesetzt sorgt er für eine
bessere lesbarkeit der Inhalte.
(Quelle: Thegodness.com.au)
140

I

2

Designkultur Web 2.0

--_.

Websites. Gel IM most OUlof

rour ..... eb Pfesence with acMte.
~ ..~

aOO 'lj">tem .. progrllmming.

__--"',--"
_-- ---_.,--...""''',...... ... - ..... .......
..... _.... _.....

n. ............ _ ............,• ...-• .,.
~'''

~

_

._

...

~

..... _ . _ ......... _w

..-.......

-"----"-",

--I

I

Demzufolge wird Wh itespace von Seiten besuchern intuitiv als ein
transparenter Wegweiser benutzt, der visuelle Richtlinien vorgibt
und Anhaltspunkte liefert.

..__
-... _......_----------..........
..__-......
......
_
.....
__
.......
_-_
..
_
......
__
...
----_-,.......... _....... _..... .. _----Welcome

_
_-_
_ -

~._-_

... Abbildung 2.136
Der obere $eilenbereich wird von
viel Leerraum umgeben und zieht
die Aufmerksam keil des Lesers an.
(Quelle: www.maybeinc.com)

_--~_.,_

~~

-~

, E

Aus der Perspektive eines Seitenbesuchers sollte der Inhalt einer
Seite di rekt erfassbar sein. Whit espace kann dabei hel fen. Sämt·
liche Seitenanteile, die voneinander unterschieden werden müssen - auch wenn sie im gleichen Bereich vorkommen - gilt es
zwecks besserer lesbarke it durch leere Abstände (Spalten), sogenannte Gutter, voneinander zu trennen . Kleine Ve ränderungen
können dabei große Unterschiede ausmachen . Meistens hilft es
schon, den Zeilenabstand und die Abstände zwischen den Blöcken um wenige Einheiten zu vergrößern .

•

.-_.
--

~

kartooner

"..._-_--,
'-.""..
_-._
e
---_
.... ..
--_
_
. _"'
,
... _
_
. .._
_
.._
......
_
.....
....
........... - ......
-'''-''_. --- . _..... _-." ... -_-,
_...-.
.
.._
_--_
....
.......-.......- ..-----_
_...............
-....-__........
-........
...-.. _-_... __........

...

-

-..._--_.
--_.
_.........
--....-_.- -,----

-~,

___
......._
_
-_
.. ____
.. .
_
_
_
_
._-... _-___ -_
_._ _ -_..-- ._.....--"'-,----_
_._-. -_
__ ....-_---".

"

.~_

.

- -....

2.5.5

....

.........

..

..........
<"""
_ .,. _hIooo'
...... . . .." _ ......

..

_.

." -

.......

.... .. .
---_
.... _
... _.
--

.. Abbildung 2.137
Guller l.J.ssl eine Seite " atmen",
und brj~t I nhalte besser zum
Ausdruck.

Einfachheit und Minimalismus

Um Inhalte benutzerfreundli ch darzustellen, müssen Webdesi·
gner eine Balance zwischen Komplexität und Einfachheit erzie·
len . Die Vo rteile einfacher Ansätze sind offensichtlich: Eine redu2.5

Neue Konzepte

I

141

zierte Komplexität erleichtert das Scannen der Informa tionen und
bringt die Seiteninhalte sofort zum Ausdruck. Doch das Fehlen
nützli cher Funktionen, an die man sich über längere Zeiträume
gewöhnt hat, wirkt ....erwirrend für ein un t rainiertes Auge.
Die Ent scheidung fällt im Web 2.0 häufig zugunsten einfacher,
beinahe minimalistischer Ansä t ze, die eine grundlegende Funktionalit ät gewährleisten und auf überflüssige Element e verzichten.
Dabei ist zu beachten, dass »wen ige r« nicht unbedingt automat isch .mehr« bedeutet . • Less isn't more; just enough is more«,
bemerkte der Designe r Milton Glaser. Opt imale Ansätze entstehen erst dann, wenn der En danwender genug von A llem zur Verfugung gestel lt bekom mt, gleichzeitig aber ni ch t nu r m it wenigen
Basisfunktione n auskommen muss.

_.-

wallop

.

I

"

-.. -"-

__
_--__-_.
_,_
..._-_
.......
.. _.....
_.. . ......,-_..............
..__ .....-

.....
-..............-. ,.- .. [111
• " ._q . . _ ... ... .
,... _, ...
-'-~'-"
...--,_
-...........
.• ,,- -___......:......-,.........
_--_,.... ,....,","__-'.......
.
,-,,, ..... '_ .
..... _... _.
~_

::-~..!,
.

_-

u ._.~, .

_~ ._

_.- . ~-- -"

:::.::::::.:.' .... __ 'M_"H_ _ _

_ __

_

. .... .. __
. ..................
_"'...- ,"'..-..
.
.•
_
..
_
_
._--_
..
_. . .. . . ...... . .,.

--,....... __ ._ ......

~

_---~ . -._

_~H

...., ... ,"" .. ,.,.....'"......

,,~

...... _

~.

~

~,

...

__ . . __. . . . .

_.t~

_,...~_'-'"f"""._
.....
__ ....

..

_"""~

~.&!deJ_._",...

.....,-

...

----

__ rAOOY'C .... ,.-_.""' .. -

... ...

.......,

~.!"_.~-.-. ",

_~,..._-..,_It.

"'-' ____
--_
....
_
. ...0
.-_
__
_. . -_............ ._--_... _._
-_
......_
_
_
.
_
-_._
.
.
_
_,
.
_<
._
..
_---_._.-, "'_ ......... _---.._ _~.Jo

_

torgeltoo

" Gorilla" Usability Testlng

"'............

_ "'~ '

_. ~

,

..-...
..

_~._-

... ..

........

_~

...

..... Abbildun g 2.1] 8
Wenige Optionen , viel Weißrau m
und prägnante Informationen :
Einfache und minimalistische
Konzep te im Einsatz. (Quellen:
Wallopcreative.com , Kottlce.org.
Garretdirnon .com, Forgetfoo .
com)

2.6

Zusamm enfassung

In der Designkult ur des Web 2.0 steht der Seitenbesucher ganz
im Mittelpunkt des Geschehens. Durch attrakt ive Seitenelement e
sollen die Nutzer zu Interaktionen und zur Teilnahme mot iviert
werden. Zu diesem Zweck werden Webseiten besser und klarer
strukturi ert und mit teilweise neuen, bunten visuellen Elemen ten

142

2 Designkult ur Web 2.0

I

sowie klaren typografischen Elementen versehen. Das Webdesign
wird persönlicher und zeigt häufiger eine individuelle Note. Die
Interaktivität rückt durch neue auf Javascript basierende Ansätze
stärker in den Vordergrund . Neue Designkonzepte übertragen die
Attraktivität des Printdesigns ins Web und damit auch Techniken
und Gestaltungsmethoden, die man in der Werbeindustrie findet. Daneben bilden minimalistische Ansatze eine weitere Basis
für ein benutzerfreundliches Webdesign.
Doch nicht alles, was im Netz unter dem Stichwort Web 2.0
läuft, ist nachahmenswert. Bunte Ansätze mit herausr<IBenden,
ubermäßig großen SeHen elementen können schnell verwirrend
und störend wirken. So können etwa Tag Clouds sch nell unubersich tli ch werden, wenn die Sch riftgröße nicht optimal gewählt
wird. Darüber hinaus darf die Funkti onalität einer Sei te unter
keinen Umständen durch den Einfluss der grafischen Elemente
vernachlässigt werden. Insbesondere sollt en Sie im Auge behalten, dass eine gute , zukunftsorientierte Webseite nicht nur visuell
anspricht, sondern auch sauber programmiert ist und verständlich
aufbereitete Inhalte an bietet. Im Webdesign 2.0 geht es nicht nur
um eine schicke visuelle Gestaltung der Webseiten. Dies zu verstehen, ist ei n wichtiger Sch ritt in Richtung einer benutzerfreundlichen und wirkungsvollen Webseitenentwicklung.

2.6

Zusammenfassung I '43

3

Textgestaltung

In diesem Abschnitt lernen Sie die Grund lagen der Webtypografie
kennen und betrachten die wesentlichen Methoden einer benutzerfreundlichen Textgestaltung im Web. Insbesondere erfahren
Sie, welche neuen typografischen Techniken die Darstellung einer
Web 2.0-Seite ent scheidend prägen, wie Sie diese vernünftig
umsetzen und worauf Sie sich im Hinblick auf die zukünftige Entwicklung der Webtypografie einstellen soUten .

3.1

Was ist Webtypografie?

Die Gestaltung von Tex:tinhalten spielt in der modernen Webseitengestaltung eine wichtige Rolle. Damit verbunden ist die Web-

typografie, bei der es um die lesefreundlkhe und korrekte Darstellung von TextinhaJten im Web geht. Hervorgegangen aus der
Printtypografie, gibt sie Webentwicklern Richtlinien und Anhalts~
punkte vor, mit denen sich Texte ästhetischer und funktionaler
darstellen lassen.
Gute Typografie schafft eine visuelle Hie rarchie und sorgt
für ein lei chteres Verständnis der Texte, indem sie Akzente auf
wesentl iche Informationen setzt, diese lesefreundlich präsentiert
und eine klare Inhaltsgliederu ng schafft.
Eine entscheidende Rolle in der WebtypografIe spielt die klassische Printtypografie, deren Eigenschaften in der jüngsten Entwicklung vollständig übernommen und auf das Web übertragen
wurden ,
Und in der Tat wird Textgestaltung im neuen Medium durch
eine beinahe iden t ische Designsprache, Kommunika tionstechniken und Konventionen beherrscht, die man aus den Printmedien kennt, Der entscheidende Unterschied besteht aus drei
wesentlichen Aspek ten, die die Screentypografie zum Teil ervveitern, zum Teil aber auch einschränken - näm lich die Kontrolle
über die Textpräsentation, die lesegewohnheiten der Nutzer und

3.1

Was ist Webtypografie?

I

147

die sich daraus ergebende Notwendigkeit, die Gestaltu ng von
Fließtexten für das Screendesign zu opt imieren.

---_.-~

,,~

-... Abbildung 3.1
Typografie kann nich t nur schön. sondern auch atemberaube nd sein.
MeUoSans und Tauran Regular : zwei Exponate aus der typografischen
Ausstellung Let ms La tinas 2006, (Quelle: httpJlwww.flickr.comi
photos/46746624@NOO/sets/72057594139789886, linkcode 070)

_r_,_. ..

SPl tliEL "

• I

................

~

"."."... I
-__."'..........._"'-_.__... ,....•.....-.... ... ....__....
"-"---"'-'
Ha .... l~ H_udo~
"'..... h . . .~

___-

...

..-.."

""'

--.

.. ::z----.--......_---._---._-_._.
-_._.." .... "._" ............ _-..

-~

.

' _ " " _" _

. _ _ . _ . , _ .......... aor

..-______._._. ,----_
..
- .
....-...........""'_ ......... ...... ,...
"

...,_.-_._-_.
,
'.'''''''

'l:::::-':':=::;-'-

.......

, ~

...--...

~-_

... Abbildun g 3.2
Der Spiegel in der Pri ntausgabe und in der Webversion. Im Web werden
Inhalte mi t mehr Freiraumen und vielen NdVigatiommöglichkeiten versehen, Dennoch lassen sich ähnliche typografische Merkmale entdecken .
148

3 Textgestal tung

I

3.1.1

Screen und Print - absolute Flexibilität und
absolute Kontro lle
Während Designer bei ihren Prin tentwürfen von hoher Präzision und absoluter Positionierung einzelner Textelemente - etwa
Überschriften, Abstände und Schriftarten - ausgehen können,
müssen sie sich im Screendesign auf eine dynamische Umgebung
mit lauter Unbekannten einstellen.
Im Web lässt sich im Allgemeinen nur wenig uber die installierten Schriftarten, das Betriebssystem und die Bildschirmauflös un g der Anwender auss<lBen. Aufgrund der Vielfalt der verschiedenen Plattformen und benutzerdefinierten Einstellungen
können Textpass<lBen einer Seite ganz unterschiedlich angezeigt
werden. Demzufolge müssen sich Designer damit abfinden, dass
sie im Web keine absolute Kontrolle über die Darstellung der
Inhalte haben.
Andererseits ermöglicht diese Dynamik den Lesern. die Darstellung der Texte an ihre Bedürfnisse manuel l anzupassen. Die
Entscheidung eines Designers, alle Anwender eine feste Schriftgröße verwenden zu lassen, erzeugt das Risiko, dass die Texte
bei einer niedrigen Bildschirmauflösung (800 x 600) zu groß und
bei einer hohen Aufl ösung (1920 x 1200) zu klein dargestellt zu
werden . Somit ist es beim Screendesign besonders wicht ig, typografische Angaben relat iv zu setzen, damit der Proportionalitätsfaktor zwischen den Textelementen bei beliebigen Auflösungen
erhalten bleibt.
Nachteilig ist, dass eine universelle - sprich plattformunabhängige - Typografie sehr kompliziert zu realisieren ist, da der
Designer mit sehr wenigen Mitteln auskommen mu ss. Deswegen
lassen sich außergewöhnliche typografische Ansätze, die spezielle, besonders lesefreundliche Sch riftarten verwenden, bei der
Gestaltung von Fließtexten kaum umsetzen . Denn die meisten
Anwender würden sie überhaupt nicht bemerken.

Syst~mabhing,g~

Darstellung

Ein Zeichen wird auf verschiedenen Systemen nicht unbedingt gleich aussehen. So Ist ein
Punlct auf einem WindO'Ns-PC
(96-120 ppi) wesen t lich größer
als auf einem älteren Maclntosh
(72 ppi), kleiner als auf einem
Widescreen-Laptop (120140ppi) und wesentlich kleiner
als auf einem iPhone (163 ppi).

3.1.2
Besonderheiten der Webtypografie
Trotz vieler Gemeinsamkei ten, die Print- und Screentypografie
vor allem im Hinbli ck auf ihre theoretischen Grundlagen haben,
sind sie grundsätzlich voneinander zu unterscheiden.
Ein Unterschied besteht in der Auflösung der angezeigten
Texte. Ein Bildschirm gibt Texte in einer viel kleineren Auflösung
wieder, als dies bei Büchern, Zeitschriften oder ausgedruckten
Dokumenten der Fall ist.
Während die meisten Printausgaben wenigstens mi t 1200dpi
arbeiten, stellen Bildschirme in der Regel 96pp i (Durchschni tt :
17' bis 20' -Bildschirme, mit der Auflösung 1024 x 768 -1680 x
1050) bereit. In Abhängigkeit von Bildschirmauflösung und der

IdpiJ
DPI (dots per inch, Punkte pro
Zoll) gibt an , wie viele Punkte ein
Ausgabemedium auf einem Zoll
(= 2,54 cm) unterbringen kann.

IppiJ
PPI (pixels per inch, Pixel pro
ZoU) gibt an, wie viele Pixel ein
Anzeigegerat auf einem Zoll
(= 2,54 cm) unterbringen kann.
Je höher die Zahl, desto besse r
die Aufl ösung.

3'

Was ist Webtypogralie?

I

149

Breite des Bildschirms kan n dieser Wert bei Desktop- Pes zwischen 72 und 145 ppi variieren. Dieser Sachverhal t hat zur Folge,
dass Informa tionen auf verschiedenen Ausgabegerä ten un t erschiedlich angezeigt werden. Bei Scllriftgrößen einer Webseite
macht dies einen bemerkbaren Unterschied von zwei bis drei
Punkt-Einheiten (pt) aus,
Für Sie als Webdesigner bedeut et dies zweierlei: Zum einen
kann eine Bildschirmdarstellung nich t so prägnan t und präzise
sein wie eine gedruckte Textdarstellung, da die Auflösung der
Buchstaben wesentlich niedriger ist.
Zu m anderen müssen Sie bei der Auswahl der Schriftgröße
die Abhängigkeit der Tex tdarstellung von einzelnen Rechne r-.
Bildscllirm- und Browse rkonfigurationen berücksichtigen. Eine
umfassende Test pIlase bei der Entwicklung einer Webseite ist
somi t unbedingt erforde rlich.
Außerdem ist die Sei t enfl ache. die Webdesigner mi t Inhal ten
füllen können, wesentl ich kleiner als die Fläche einer gedruckten
Seite. Zu breit format ierter Text erschwert das lesen und soUte
daher nicht vervvendet werden, lange Text e erzwingen zudem
einen vertikalen Seitendu rchlauf. Aus diesem Grund ist es in der
Webtypografie besonders wichtig. vernünft ige Kompromisse zwischen der Kompaktheit von präsentierten Inhalten und ihrer lesbarkeit zu erzielen. Dies ist eine der Hauptaufgaben des Screendesigns.

TIPP

Bel der Auswahl der Schriftgröße
is t ihre Abhängigkeit von der
Konfigura tion zu beachten .

T Abbi ldung 3.3
Eine klare typografische Struktur
lässt die Seitenhierarchie und
visuelle logik sofort erkennen.
Bei 456bereastreet.com (rechts)
heben sich Überschriften und
weitere Tex telemente entsprechend ihrer Bedeutung auf der
Seite ab. auch ohne (SS. Bei Garre ttdimon.com (links) werden zu
diesem Zweck Farben eingesetzt.
Understmdlng
Behavior
____ - ''''''''''-lI
._,..".." ... -.- ... ,...
....

3.1.3

Warum ist Webtypografie wichtig?

Wer von der Kommunikat ion einer Seite spricht, betont in der
Regel neben grafischen Elementen auch die visuelle Hierarchie
der Tex t e. Diese Hierarchie. an sich die bloße St rukturierung und
Gestaltung von Übe rschriften und Fließtex ten. ist gru ndlegend
für den Dialog zwischen Seitenbetreibern und Seitenbesuchern.

__ ----_-

•
.._______. ._...
._. _R
.............
_
............... .... :-~'-'
,_
. . _<--,_
... _
. . ,_... . ,. . . , . . ...--""_._
__--_
. ,_ .... . ... .
.. ... ......
_~

_ _I

-_-,_
..-..........
..... .._
_
,
_
..-_,-.....__.-.
_
................._-_......
--_
....._
...
-__
.._--,_
_... _...... .......
_.........-.. __ .................
.. _._
~

~

-_._~

_.~._

- ..

...

,~·

........ _..... -"'t.,--.... ., .......

,..,.. . t _ _ _ . _
~

"--"-- ~

. . . . . ~-,'_."' _ _ I ... _

....

......

...... ' _ -

~

'

_

,

,

_

~

_

,

,

~

......... ;;;;.. . ".... _,,-_.. -............. ..
"--,
'~""'DIIIc"Truth
.. _ _ ...

p*-' • .,..I!'U_>Iu6.lklI."' _ _
~",1''-'' 8

ios...~

.. _ .... .....

W
._

.......... ..." .. ,,0.._

s-l>+4yoOlbe ~.""'I<,,_
\II,~ oh"""",,, .....
_~-"" . • u • ....,. • d ...... ~ B...- ... ~,e'I\t>< _~ . ,.. •• . ... ~ 1. ......... IIi OO . ..&,f_I"'OfloIow.l ..... F,..·.. ......... "" ....

.... -';cboJ.

ao_,,,

.I.... l!" ... Ibo . .. ............ 1

" g..e."'I"'!It .. ' •

• 'M "'r ip'I II!I .... 'nEk

..... R_ .. _ _

,

~-_

~.~;;;.~._
;;;;;;;;;;;~.~-~'~
._~.~;;..-------

Canomen tJi

1. 2Im-Ol-OJ. 1"3"'~ ~
YESII_.., _

150

F't'b"'I~II)' 1U()7

... '

,_ .

.. _ • _ _ ,.. ,......... __.r.. _ ... "" ....... ..
. .... -

Gt'('k l\J('t't Gotht'1I burg

3 Textgestaltung
xtgestaltung

...,beOtotI.Md _

... mv obI! .. - . . .. <;U:mlIJol ... I,..

_._
__
__
__--_
__
__--..,-_
__
_
_
_
.•.
.._-_._----_
__
._--_
.... _. _
.._-_
__
"'"._
_-_
..
......____
.... ._
.. _--_._----,
.... _ __.. . _-_._. ...._--.. ------_-----'
-_._--_
.. _'_-----_._.-_
_
_
..
_------_._-------. ---__
......_... _-------......

I

..__.___
... ..._----_.
...__
_.............
_.... _-_
_....-..
..
_--_.
__
..........
__
-._
.....
....
.
_---_.._..........- ..... _....__..__ ._---.. _._.... . .. ..
._-----_
-... ...-. . ..~L

_ _-":.

_--~

,

....
...

_

-

.

.........

_

.... ...

_~ . _-_

.

. . ...

.....

~

_-~._~

_-~-_

-...

...
......

..

.....-.. .... -.......

...... _ ........ ...-__ _

......

_~

•.

-

r:'l_1 1111
CI
_____ .. "'. ___ ... ~ 1111:

" . ~_

. ..- ..... _---_...

Eine leicht erkennbare typografische Hierarchie schafft dabei eine
intuitive Darstellung der Inhalte und gibt dem Besucher noch vor
dem eigentlichen Lesen einen kurzen Überblick über die Schwer·
punkte des Beitrii8s. Wird diese Hierarchie auf einer Se ite konsi·

... Abbildung ].4
Die visuelle logik der Seiten bei
Wikipedla überzeugt durch ihre
Klarheit und Deutlichkeit. AUe
Überschriften tragen eine . hierarchlsche« Bedeutung zum Seiteninhalt bei und liefern eine erkennbare Gliederung der Beitr;\ge,

Typografische Hierarch.e
Typografische Hierarchie gibt
dem Besucher einen Einblick in
die Schwerpunkte eines Beitrags.

stent beibehalten. so trägt sie entscheidend dazu bei. die Ideen
und Funktionen der Webseite besser zu vermitteln und Seitenbe·
sucher effizienter zu info rmieren.
Genau an dieser Stelle kommt die Bedeutung der Webtyp0grafie zum Tragen . Um die Struktur einer Seite besonders gut
hervorzuheben. bedarf es sorgfältig durchdachter typografischer
Vorgaben. Das Resultat ist eine strikte und uberschaubare Textgliederung.
Aus einem anderen Blickwinkel betrachtet ist Webtypogra-

Weblypografie bestimmt die
.Stimme _ einer Seite und verleiht Inhalten eine zweite. visuelle Bedeutung.

fie auch dann besonders wichttg. wenn es um die Deutlichkeit
der zu vermittelnden Informationen geht. Eine Textpassage tragt
neben der eigentlichen Bedeutung auch eine typografische Konnotation, di e von der gewählten Schriftart, der Größe und weiteren typografischen Merkmalen direkt abhängt.
In diesem Zusammenhang spricht man häufig neben de r primären Bedeutung von Wörtern auch von ihrer .Stimme«. die von
der Typografie bestimmt wird und Inhalten eine zweite Bedeu·
tung verleiht.

Der Widerspruch
ist das Erheben
der Vernunft über
die Beschränkungen
des Vers tandes.

T Abbildung ] .5
Heller Hintergrund wirkt neutraler
und ruhiger als starker dunkler
Hintergwnd. Auch der Inhalt en t·
h;\11 eine entsprechende Bedeutung. Die Schriftarten District
Thln (li nks) und Lacuna llalic
(rechts) Im Einsatz.

Der Widerspruch
ist das Erheben
der Vernunft über
die Beschränkungen
des Verstandes.

Gcotg Wtd'n friOOnch t \eg('I
(1770 - 18311 deutscher ~

3.1 Was ist Webtypografie?

I

151
51

Geleitet von Assoziationen und vis uellen Beziehu ngen, verbinden
wir verschie dene Schriftarten - bewusst oder unbewusst - m it
unterschiedlichen Bedeu tungen. Times New Roman bedeu tet
für uns et was anderes als Georgia, genauso wie weißer Text auf
dunklem Hintergrund bei uns andere Assoz iationen hervorruft als
schwarzer Text auf heUern Hintergrund,
Di e Schri ftfamilie Nina w irkt solide, neutral und eindrucksvoll,
während St ilschrift en wie M ercuryAlternative und JI-Beasts eher
unpassend erscheinen. Entspricht die Atmosphäre einer Schrift
also nicht der Bedeutung der Information, so wirkt d ie Schriftart falsch und verleiht Inhalten Unglaubwürdigkei t. Werden die
semantische und die visuelle Bedeu tung einer Sc hriftart dagegen
auf einander abgestim mt, können sie einande r ergänzen und eine
Aussage besse r wirken lassen.
Abbildu ng 3.6 •
Ei ne passen de Sch riftart verstärkt
die Bedeutung der Aussagen;
unpassende Typografie verfälscht
sie.

Nina Sduiltfamilie

Liebe und Leidenschaft
McrwryAltcfIIJ.Uve

Liebe und Leidenschaft
)1

ßtasts

Liebe Ul1~ Lci~el1schaft
Typografi e- un d Se-mantl k

Die funktionale Stärke der Webtypografie liegt darin, dass sie
die Bedeutung der Inhalte verändern kann .

Die Bedeut ung derWebtypografle wird also vor allem durch ihren
Einsatz beim Auf bau einer visuellen Logik sowie bei de r Betonung von Seit en inhalt en deutlich. Leicht e Fehler in d er Auswahl
von Schriftarten, Schriftgrößen, Zeilenabständen und wei teren
Merkmale können unerwünschte Konsequenzen haben.

3.1.4

Webtypografie in der Prax i s

Die Webtypografi e mll te nicht erst bei ihrer Verwendung innerhalb einer Seite überlegt werden, sondern schon bei der Vorberei t ung erster Layoutentwürfe. liegt einer Seite kein vernünftiger
typografischer Ansatz zugrunde, so läuft der Designer Gefahr,
Textabstände willkürlich, intuitiv und seh r subjekt iv festzulegen.
Dies f ührt zu überfl üssigen (55-Deklarationen und eine m aufgeblasenen, unübersicht lichen Quetltext, der schwer zu lesen und
zu pflegen ist.
Die prakt ische Umsetzu ng der W ebtypografie wird meistens
an zwei grundlegenden Kriterien gemessen. Zum einen steHt sich
die Frage, ob der Seitenbesucher d ie präsentierten Inhalte - in
der für ihn verständ lichen Sprache - mühelos lesen kann; zum
15 2

I

3

Textgestalt ung

anderen ist es wichtig: zu w issen. wie gut Text e verstanden un d
wahrgenommen werden.
Das zweite Kriterium hängt uberraschenderweise nicht nur
vom eigentlichen Inhalt bzw. der Sprache selbst . sondern zum
großen Teil auch von der Art und Weise. wie sie präsentiert wird.
ab. Schrifiqualität . Schrifi größe. Zeilenabstände und weitere
typografische Merkmale beeinflu ssen die l esbarkeit von Texten
enorm.
Inwiefern kann also die Qualität der Webtypografie bei einem
Webauftritt gemesse n und optim iert werden? W ie ist eine gute
typografische Hierarchie in der Praxis ZU realisieren? Und welchen
Faustregeln so Ute ein Webdesigner fol gen, um opt imale Ergebnisse zu erzielen? Im folgenden Abschnitt lernen Sie Begriffe aus
der kla ssischen Typografie und allgemeine Richtlinien für eine
gelungene Webtypografi e kennen.
DII MKII!1I1IId!e ' 1111' 00 Iktl lUockMu oo:IOr FI.tI'/N1z belMr fIlr
F~ _
TeICllll ~g".r, ""'" n-.cll_n,n &tu.riDf1l"
~"~~~ ttel"~r LnIw _
..... ,g ...... F.i<Ior.n ... dit

'*'

l~.If. $n_.ndtfd"TUI~t itl,'*M.a-""",,*

SllGennll""'O' _ _

~""'"""'"

rI.r Ili'l\JM"UIM

_

"'" RaIIt.
e ... 'bIf9'IOI ~ 8e<!~ hIldtf Ckw _ _ 'onnotJ. Nng. 0 ; . .
..... ,," MllIIIr"t.om lDf dit L _. . . . . . T.... CI4I1 ~~
~" ttgofI"'
_~IM " ~OC .. _
.... ~
~dIt~dooduluJlll* ......... ~nw~ lIn;Jße

....

Spr{jnge-_.
~

_

F_-.gwiOo_ I\lr 11." Sn.... m

o.

_!IJ _.

<11. ..

F _ zwioocM" wan..nIm~ 1.JdIlIMt'l ;ro&OI..... uncI
1Ilt ...." g~ Gr_1OfUl. OBI P'robItm ~jIcIocft 111M.
C..sb81F--. .n ..ftl ...
_ _ _ F_ _

I

• Abbildung ].7
Schlech te Lesbarkeit (rechts)
vs. gute lesbarkeit (links):
Ein g uter typogra fischer Satz spielt
in der Pra xis bei jeder Webseite
eine we sentliche Rolle.

o.ly~ ab tIcI1 l1oc....1l. 00" Flttt.rut.a _
. Illr dit
F~ ....... T_I t9'*. ~ n _~....., SlIutlio n.n
Irll!gC!!!!d'cD 1!Ht\!'M!OII. U_ • _ _ • • \In F.1<knn wit die
Z....,........,., """ ~_. n "'lW TUI-'aMl ~ lief _
.n ....... _
SllHrnnntMlllll ~ oer ~rlI/Imjjf CIet tilngetetmn SO~

"'.... RoII&.
s-.. Obtrgto<'llttttl 8e<!fliIIIrlU n.t cIw O ......rt _ ~o'"'"U.nlnll . DII_
• ..... n MeIIlo.tttt...,.!Ur'"
.......
.."...,.,tßoe
AI*tn<II. _ Lt~
lo'fOI1tm
_ r _tI
&.msrd.-.
_ _ z-.

W_.

_

~ l~

SprGtIge_en_

<11. _

iI<JSIe pI~n.nl "''''''.,-." IJ"Oß •

F ltn.~ ~ /(Ir . . .

WItJ ~

0e0htIr _
ni
&!Hl.I 1m
",n, CI .
'*'
Ftlliriumt....-nen Wilrtom Im
ll.ol lJl*hlJ"O' d.rsMIt UncI
KIr .. ft. ftgltlcn maa. . . G _ ..... O " _ b t .......
~

lIIlUb8IF..netMUOIIII _ _

jeckId\~

~'. m.

_ _ F_.""

etIOllt/'ol. oe",.., wnr: FlIIMI'MII: rum l ei WIUI'IIU. -'-nllefe -... ~el
z.le1'lllr'nllnlCll

undo'ooft c. 5~ ng

m~~.

~.

.r ~ """"~ ~

FIIMt_lum T" W""""II . inltlt. . _ . - . . ....

ZIÜelllll!ltfIlCh w!lGtOCl/

3.2

*

!III~nlrw'olun\llMftUlhrfl. "nd.

Grundlagen der Webtypografie

In diesem Kapitel werden wir die wesentlichen Begriffe der Webtypografie betrachten.

3.2.1

Typografi sche Begriffe im Überblick

Zuerst ein kurzer Überblick uber die wesentlichen Begriffen der
Typografie.
• Ta belle ).1
Typografische Begriffe

B.deutung
GrundlInie

Oie untere Grenze eines Schriftsatzes, ohne
Unterlange

Mittelloinge,
x-Höhe

Oie von der Grundlinie aus gemessene. reguläre
HOhe der Kleinbuchstaben eines Schriftsatzes,
die keine Oberlänge besitzen (etwa e).
3.2

Grundlagen der Webtypografie

I

153

Tabelle 3.1 I>
Typografische Begriffe
(Forts. )

Bedeutung
Mittellinie

Die obere Begrenzung der x-Höhe

Oberlänge

Teile der Kleinbuchstaben, welche die Mittellinie
nach oben überschreiten (d , k)

Unterl;'l.nge

Teile der Kleinbuchstaben, welche die Grundlinie
nach unten überschrei t en (g, p, y)

Versalhöhe

Höhe der Großbuchstaben. Die Oberl änge ragt
dabei meist etwas über die Versal höhe hinaus,
um durch diesen optischen Trick gerade und gekrümmte Buchstaben gleich hoch erscheinen zu
lassen.

ligaturen

Bilder der Buchstaben , die zur besseren lesbarkeit häufig zusammengefügt werden (fi, tt). ligaturen sind eher für serifenlose Schriftarten typisch.

Schrift bild höhe,
hp-Höhe

Die Summe aus Ober-, Mitt el- und Unterlänge

Serifen

Geschwungene linien, die bei sogenann t en Serifen-Schriftfamillen einen Buchstaben am Ende
abschließen

J-=-\,, "-~q~l;,!,,::~~;:~I";::;~=l
V 1 K 1 J'u--" t., 1"I ot1• Oberliflge
MitteIlInge oder x·HOhe

V,,,.lh,l,,

~

Unterlänge

Grundstrtch

Haar~trich

.. A bbildun g 3.8
Wichtige typografische Begriffe im Überblick (Que lle: Wikipedia,de)

TIPP
Eine HelVorhebung wird meistens mithilfe nur einer Aus zeichnungsart gestaltet.

15 4

I

3

Textgest aJ t ung

3.2.2
Hervorhebung von Texten
Wie bereits erwähnt, trägt die Auszeichnung von Inhalten zum
Aufbau einer visuellen Logik der Texte beL Um einem Inhalt eine
sicht bare St ruktur zu verleihen, muss man mit de r Hervorhebung jedoch sehr sparsam umgehen. Eine Aussage darf genau
durch eine Form der Auszeichnung betont werden, lautet eine

bewährte Faustregel. Starker visueller Kontrast lässt sich bereits
durch kleine Veränderungen erzeugen.
Int uitiv lassen sich mehrere Arten der Textauszeichnung unterscheiden_ Diese ähneln den typi schen Techniken aus der klassischen Typografie.

Kursive I Um eine kurze Text passage in einem lokalen Kontext
hervorzuheben, verwendet man Kursive (italics, manuelle SchrägsteIlung) . Diese fallen erst beim Durchlesen der Texte auf, sin d
relativ pass iv und eignen sich deshalb am besten fOrgewöhnliche
Auszeichnungen im Text.
Kursive fallen wegen des deutlichen Kon trasts zur Form des sie
umgebenden Textes auf. Sie werden häufig bei der Erwähnung
eines unbekannten oder fremdsprachigen Begriffs, eines Buchtitels oder Namens benutzt. Außerdem werden Kursive traditionell
für Zitate und einlei tende Passagen eines Beitrags verwendet. Es
ist aber dringend davon abzuraten, lange Textb löcke in Kursive zu
setzen. Ihre Lesbarkeit ist auf dem Bildschirm deutlich schlechter
als Nicht-Kursive.

I
Kursive

Mit C55 lassen sich zum Beispiel
einleitende Absatze durch Ku rsive wie folgt gestalten:
(55:
p.lntroducl1on I
font -style : Hallc;
I
(X)HTML:

<p cl ass - ~ I nt roductl on"}
EInlei tung zu eine,. BeItrag
</ p>

5chrage

p.lntroducllon I
font style : oblIque ;

Ha1'k Twain: Die sch1'eckliche
~eutsche SP!.'ache

".

Fette AuszeIChnung

• Abbildung 3.9
Kursive - schön. elegant und leserlich

Schräge I Eine ähnliche Funkt ion wie Kursive übernehmen
SchrJ.ge (elekt ronische Schrägstellung), die aber stärker geneigt
sind und vor allem für serifenlose Schriftarten typisch sind.
Fette Auszeichnung I Um einen Sachverhalt 5tärker zu bet onen,
verwenden Designer oft/ette (bald) Auszei chnung. Solche Tex te
fallen auf einer Sei te wegen des Kontrasts der Farbe und der
Größe sofort auf und heben sic h stark vom 0 brigen Text ab. Man
sollte mit fetter Auszeichnung jedoch sparsam umgehen.
Diese Art der Hervorhebung soll te bloß die wichtigsten Stellen,
Begriffe und Ideen eines Textes betonen. Auch hilft die fette Hervorhebung beim schnellen Erfassen von Inhalten. Überschriften
zweiter und dritter Ordnung sind somit potenzielle Kandidaten
für fette Aus.zeichnung. Beachten Sie aber bitte, da5s einzelne
Textpassagen ihre Betonung verlieren, fal ls säm tli che Inhalte fett
markiert sind.

].z

Ein Beispiel für die fette Auszeichnung von Absätzen und
einzelnen Wörtern:
(55:
p.lnt ro f
font - we'g~ t: bold;
I
(X)HTML:

<p class-"Intro">
Hervorgehobene r Text
</p>
(55:
eil . streng !
font-welght : bold ;
I
(X) HTML:

<p>
EIn <em}wlchllger<l em>. sehr
<strong>wlchtlger
<Istreng> Text.
</ p>
Die <em} - und <st rong>-Tags haben hier die gleiche Bedeu tung.

Grundlagen der Webtypografie

I

155

3 . Show 1\'1""
Ab bildung 3.10 •
Mehr Gewicht durch höheren
Fettgrad. Die fett gestaltete Aussage hebt sich vom Text ab und
fäll t sofort auf.
(Quelle: Returncustomer.com)

Som.. tlm ... Y0l.l J U<I " .. n·t g.t 1O,"" .. tnn9 WQ ,jdng 10' thoo CUSIO~' . If
po ss o/JI B, Bnable ctlStcrners 10 dO lhe Jotl ttEm s ~nIS. Sho .... lhern trE
~\~ps . T~4 ch \hern H,,,, P'OC~55 . H",1p U•." " ~oly., H' lIi, 0"''' p roU!.,,, ..
T h ~ i~ particulil,ly tv.:nc fi = 1 "hen yDU C~n teJ"h Ihem 10 ""I f· se,~e ~~
youc ""lOb." ... Tn.. t tnow~g ........ "~O\\l In .. "U < lo~r 10 uu In .. ~ • •
costty ( ro V"'"' bu!oin~ •• ) .. 00 more .. lf c~nT e h.","'" th~ nH. t limH theV
,,~.,d som., t lr "11. You'l ~~V'" mOl'\e y 4"d \h", =u5tOln",r ""I be h"pp1 , A
... 'n· .... in for both p~ rtiesl

Unt erstreichun g I Beliebige Arten der Unterstreichung werden
im Web intuitiv mit Hyperlinks assoziiert . Im Fließtext sollten
gewöhnliche TextsteIlen deshalb un t er keinen Umständen unterstrichen werden. Bei Verweisen wiederum sind Unterstriche häufig unabdingbar, können aber auch durch eine farbliche Ken nzeichnung angedeutet werden . Auch die farbige Hervorhebung
von gewöhnlichem Tex t wirkt bei Dnline-Inhal ten eher verwirrend, da sie mit links verwechselt werden kann. Insbesondere
sollten blaue und violette Farben - Standardfarben für Links unbedingt vermieden werden .

,," PI BIogtipp : [' SeI er klölt
04 Hab~ ~C~""
r:. ""-''"~'''l ~'"9""""'~~"
,""""""'9
8)f d' .... I"' I.

od1

.\A "

""

btr " hl~ .m Z....

A....., '~ .. or

In

"~ o"'om

~"f9 ...J ""h >.,,~'

DO\Iud'> ;on'un d""" ,."..dctO " u"d

ak, ~ I ' '''' ~"""" < h,e" .... i .
do. USA ....-.:J '''''-*>0<1,,",. dI .
A"",, 'k""lr zu . ..",. n. " M . UfI d gl C&Jbl ""' • ....., d o

.. Abbildun g 3."
link-Unterstreichung (Q ueHe : praegnanz.de)

.,..,

~«, .

.....

n.,001.."..,

consh" 0/ .1$ u .... "" '" I,,,,,, . .... '"
iI

o< .....

m.,.. ".b...,

h " h .... <11 •••

""""" ".". ",.(1,.. ,,<.1" "....

'''''P':,..ty d<Nor.od !or C55

.. hlm ....
"' .... 1.... . o.n1 ..... tim ....... d ... . _ ,

.. Abbildun g 3.12
Hervorhebung von Links durch Farbe bei
Ndes ign-st lIdio .com

OPfN roR

ß lI ~ JU f~~

.. Abbildung 3.13
Versalien in Überschriften
(Quelle: Orderedlist.com)

156

3 TextgestaJtung

Versali en I Eine Hervorhebung durch Versalien (Großbuchstaben, Capital Letters) sollte nach Möglichkeit vermieden werden.
Eine Reihung von Großbuchstaben ist in der Regel nur schwer zu
erkennen, wodurch das Textverständnis erschwert wird. Im Allgemeinen sind Versalien eher für Überschriften zu empfehlen . Auch
dort sollten sie sparsam verwendet werden . Versalien haben die
Form eines Rechtecks und sind deshalb schwerer zu unterscheiden.
Der Grund, Versalien zu vermeiden, hat mit unserer Lesegewohnheit von Texten zu tun. Wenn wir eine Zeile durchlaufen,

orientieren wir uns nicht nur an einzelnen Buchstaben, sondern
auch an der Form und Gestalt der Wörter und der daraus gebildeten Sätze. Dabei wird vor allem die obere Hälfte der Buchstaben .gescannte, das heißt wahrgenommen. Bei Versalien dag:egen wird das Scannen durch die gleiche Höhe aller Buchstaben
stark erschwert - schließlich formen alle Buchstaben identische
Rechtecke unterschiedlicher Höhe. Dies verlangsamt das Lesen
und wirkt ermüdend. Es ist also nicht vorte ilhaft, Versalien in
Fließtexten einzusetzen.

I
t'in Hlirht inAr Dlln I"t
1..111

"WI'-II~I&I".I

1-

U"I '- ~

... Abbildung ] " 4
liest man die obere Halfte des
Satzes, ohne die untere zu sehel\
so l;Isst sich die Semantik fast
sofort erkennen. Orientiert man
sich dagegen an der unteren
Halfte. so (JUt das lesen schwerer.

Tt'IIterfusung
Wörter mit fehlenden Buchstaben
können wir problemlos rekonstruIeren; auch WOrter ohne Voka le
lassen sich haufig mühelos erkennen. Dies hangt mit unserer Art
zu lesen zusammen.

ITVPOGRAPHVI

• Abbildung ] .'5
Die Rechleckform von Versalien

Kapitälchen I Einen ähnlichen Effekt erzielen auch Kapitälchen
(SmaJlcaps). Bei diesen werden alle Buchstaben groß geschrieben.
Leitbuchstaben sind dabei größer als die nachfolgenden Buchstaben, deren Höhe der x-Höhe der Kleinbuchstaben entspricht.
Sie können im Screendesign ebenso unübersichtlich wirken wie
Versalien.

p.lnlrOcJuctlon I
font ' varlant: smill 'colPS,
I

.. Abbildung ] ., 6
Kapitalchen in einer Überschrift
(Quelle: Travelingguys.com)

Sperren I Sowohl bei Kapitälchen als auch bei Versalien sollte
man zur besseren Lesbarkeit den Abstand zwischen den Buchstaben vergrößern . Dies nennt man in der Fachsprache auch Sperren.

3.2.3

p.lnlrOc:luctl on I
le tler · spac lng, O. len,
I

Abs ätze und Gestaltung

Je größer ein Textblock, desto schwerer fällt es dem Leser, seine
Aufmerksamkeit auf die einzelnen Sätze zu fokussieren und sich
im Fließtext zu orient ieren . Klare Trennungen, etwa Absätze,
3.2

Grundlagen der Weblypografie

I

157

erzeugen visuelle Sprünge und schaffen einen deutlichen Leitfaden. Die Gliederung eines Textes geschieht in der Regel durch
Abstände und Einzüge, wobei der Leitbuchstabe eines Beit rags
eher selten besonders hervorgehoben wird.
Abstind~

p.lntroduct1on r
margln: O. 5em:
I

Einzu,grp.lntroduct1on r
tf!xt · lndent : O.3ell:

Lr-it bl,lc hstabr-n

span . leaölng r
float: lf!ft:
fonl · slze : 5ell :
11ne·helght: 4em:
paddlng · top: .2ell:
paddlng · rlght: . 25Im :
fonl - faml1y: TImes, Georgla,
ser1f :
I
oder über Pseudoelemente:
p.lntro:flrst · letter r
font · s1ze: 5ell:
1Ine'helght: 4em:
I
Die erste Zelle eines Absatzes
der Klasse 1ntro lässt sich mithilfe . . . on (55 mit dem Pseudoelement p.lnlro: f1 rs t · llne
formatieren.

Allzu lange und a.llzu kurze
Zeilenlängen sind neben einer
kleinen Bildschirmaufläsung wesentliche Gründe dafür, warum
das Lesen von Texten auf einem
Bildschirm schwerer erscheint als
das Lesen der Texte auf einem
Ausdruck.

15 8

I

3

TextgestaJtung

Abst ände I Abstände lösen den Inhalt optisch auf, indem der
Freiraum zwischen den Absätzen größer gesetzt wird als der Zeilenabstand.
Einzü ge I Bei Einzügen wird die Zeilenbrei te im gesamten Text
gleich gehal t en, die erste Zeile jedoch eingezogen und dadurch
hervorgehoben. Einzüge bzw. Abstände zwischen den Abschnitten werden in der Regel auf 6 bis 7 Prozent der Zeilenlänge bzw.
das 1,5-Fache bis Doppel te des Zeilenabstands gesetzt.
l eitbuch st aben I Die aus der Printtypograne stammende Tradition, den Lei tbuchstaben eines Textes besonders hervorzuheben,
zeigt sich auch im Web. Sie wird aber eher sel ten genutzt, da
Seiten besucher sich im Web an eine gleichmäßige Schriftgröße
auf einer Sei te gewöhnt haben.

Magazine Style Drop Caps

~I

he ma~ai:ine i tyle d
u$ini c:opy·and·paste
to make t he fin;t lett~
cu t and paste st yle in
tutor!al. F'or thls drop
lin;t bii letter to span
IIneli:. Thc fonHize i$ .. djusted to c'
whi le the line he!iht is Bo pi)(els.

T

"OIE~STAC

HAI

E

s

ISt

eine triviale, ba

Frage. Sie scheint im
Grund aufzutauche
logische oder einde
kaum möglich, sich von dieser
steckt man einmal drin, so wi

.... Abbildun g 3.17
leitbuchstaben (QueUe: Mandarindesign.com, Alvit.delvf)

Zeil enläng e I Einer der häufigsten Fehler, die Designer machen,
ist die Wahl einer allzu großen Zeilenlänge. Der Wunsch, möglichst . . . iele Informationen in einer Zeile unterzubringen, hat oft
zur Folge, dass lange Textpassagen sehr schwer zu lesen sind.
Tatsäch lich wi rd die Zeilenbreite in Zeitschriften und Büchern
nich t zufällig eher klein gewählt. Das men schliche Auge kann bei
einer üblichen Lesedistanz du rchschni ttlich eine Spannweit e von
7,6 Zent imeter erfassen. Deshalb wi rd die Zeilenlänge meistens
im Rahmen dieser Spannweite gehalten, damit die Augenmuskeln durch das Wandern vom Ende einer Zeile zum Anfang der
darauffolgenden Zeile nicht zusätzlich angespannt werden. Ein
komfortables Lesen ist eher bei einer kürzeren Zeilenlänge möglich.

I

Die tyoogrtfllcht Frage.
ob sich B locks.tz oder
FI. tt .....tz besser tor
die Formatlerung alnes
Textes eignet, wird In
verschiedenen
SituatiOnen
ynltrJcblld/lch
buntworlll. Unter
anderem spielen
Faktoren wie die
Zaflenl4nge, die
Sprache, in der der Text
verfesst ISI, der
Mechanismus der
Silbentrennung sowie
der Umbrvcha/gorlthmus
der elnoesetzten
Software eine Rolle .

_._
_-----_
.
__
...--_
..__
..._.
......... - ..-... ----_
..
......
_
....
.._
_.._-_._.....-_._--_. .........
""

""_:

.

...

~

"".... --.~

_ _ _ _ _ _ niIO_ .. ~. _ _ _ _ .. _ _ _ _ _

Die tyoografische frage, ob slen Blocksatz oder FI. tt.rs.tz besser ru r die
Formatierung eines Textes eignet, Wird In versch iedenen SlbJatlonen unt'racb!edllch
beanlWortet. Unter anderem spielen Faktoren Wie die ZellenlSnge, die Sprache, in
der der Text verfasst Isl, der Mechanismus der Sliben/rennung sowie der

Umbrucllelgorilhmus der eingesetzten Software eine Rolle.
Eine IIbergeordnete Bedeutung hai der Grauwert der Formatierung . Dieser stellt
ein Messkrite rlum rur die Lesbarkeit eines Tenes dar. Weite, unregelmäßige
Abslände zwlschen Wörtern oder Buchstaben einer Zelle erschweren die Lesbarkeit,
da das Auge permanent unterschiedlich große Sprunge machen m;" ,;,
" ,;,,_ _ _ _- '

Abbildung ) .18
ZeUenlänge: Zu klein (links) ist genauso schlecht wie zu groß (rechts
oben) . Das Optimum liegt wie so Mutig in der Mitte.

.&.

Ebenso ist von besonders kurzen Zeilenlängen dringend abzuraten. Häufige Zeilensprunge wirken genauso ermudend wie das
Wandern des Auges von einer Zeile zur nächsten.
Zeilenab st and I Soll die Zeilenlänge die lesbarkeit des Textes
erleichtern, so wird sie durch einen angemessenen Zeilenabstand
überhaupt erst möglich. Zum Zeilenabstand lasst sich im Allgemeinen keine fe ste Regel angeben, da er sta rk von der gewähl ten
Schriftart, der Größe und weiteren Attributen abhängt.

Zellen! ..nge und Zellen .. bshnd
DieZeilenlange ist in der Regel
proportional zum Zeilenabstand
zu w;1hlen. Genauere Angaben
lassen sich nur schwer machen ,
da dies voo der Jeweiligen
Schrjftart abhangt. Der Zeilenabstand sollte allerdings grOßer
als der Abstand zwischen den
WOrtern sein.

____. __ __
---__
_
_
_.
__
_
_
--_
_
_
_-------_
__
_
.
_
_-,
_
_-------_
_---------_
._--- _-- -

.. ,_ . _--_. .... .. .
....
_,L.:':--a
"----_._-.....,..----.... ... .. ..... ..._w_...... ___
-..... ,..----,-_
..
..
.... .....'--.
..... _-,_
-.- -..... ---------.....
..
_
-.
......
_-,_
'...... ......_--..... ......_-.....
..
.... _--. ,.........
_ ."
_,_
...
__._
, -_

!!.!'!l!!.~_
~...;o",

t"..

--,--- ~ -- -

_"':':::::.::::::.~

...

_---~-"",,;;;

....

~

...

.. Abbildung ] .19
Ein zu großer Zeilenabstand (li nks) ist genauso ungumtig wie ein zu kleiner (rechts).

Unter ZeIlenabstand versteht man den vertikalen Freiraum zwischen zwei Zeilen, also den Abstand zwischen der Grundlinie
einer Zeile und der Grundlinie der nächsten Zeile . Der Zwischen] .2

Grundlagen der Webtypografie

159

Opt imar~ Z~ilt'nringt'
Die opt imale Zeilenlänge liegt
standardmäßig bei 52 bis 78
8uchstaben pro Zeile (inklusive
Interpunktion und Leerzeichen).
Bei einer Schriftgröße von 11 px
macht dies zwischen 2B5 und
440 px aus. Bei einer 12 pxGrOße sollte man sich auf 335
bis 440px beschränken. Dies
gilt natürlich auch für gröBere
Schriftgrößen.

raum zwischen den Zeilen, gemessen von der Un terlänge der
oberen Zeile bis zur Oberlänge der unteren Zeile. wird als Dureh-

5Chu55 bezeichnet.
Auf der Suche nach einem optimalen Zeilenabstand haben

Web designer zu beachten, dass geringe Freiräume zwischen

den

Zeilen die Unterlängen und Überlängen vermischen, sie also

ununterscheidbar machen. Dies bedeutet. dass es dem Sei tenbesucher schwer er fallen wird. eine Zeite im Blick zu behalten.
Größere Abstände andererseits erschweren Zeilensprunge im
Text.
In der Regel sollte die Länge einer Zeile proport ional zum
Zeilenabstand gewählt werden. Brei te Blöcke mit Texten kleiner

Folqe, 'dass
S~iLen i 11 ha,lte
..... Abbildung 3.10
überlappungen, wie hier zwischen der Unterlänge von g und
der Oberlänge von t. erschweren
die Lesbarkeit und sollten durch
eine angemessene Zeilenhöhe
vermieden werden .

lline-Heightl

Schriftgröße benötigen in der Regel einen größeren Buchstaben raum als kurze Blöcke mit Texten größerer Schriftgröße.
Der optimale Wert liegt häufig bei einer 1,4- bis 1.5-fachen
x-Höhe (in (SS umgesetz t lfne-hefght: 1.4em;). Generell soll
sich der Zeilenabstand

um zwei bis vier Größeneinheiten von

der Schriftgröße unterscheiden. Bei einer festen Schriftgröße von

12 Punkt (12 pt) liegt der optimale Zeilenabstand somit bei 14
bis 16 Punkt.
Weiter ist es erfahrungsgemäß sinnvoll. den Zeilenabstand
größer als den Abstand zwi schen den Wörtern des Textes zu wählen . Je größe r die Zeilenlänge ist, desto größer sollte auch der
Zeilenabst and se in.

Llne-Helg ht Ist eine weitere Be-

zeichnung für Zeilenabstand, die
sich auch In der (SS-Spezifikation
durchgesetzt hat.

Zeilenlänge

Zeiknfinge
..... Abbildung ).11
l aufweite -5 px bei Überschriften
mit Georgia 36px. In Großaufnahme noch gut lesbar. ansonsten
liegen die Buchstaben zu eng bei
einander und sOfgen für ein ungewöhnli ches Schriftbild.
160

I

3 Textgest aJtung

Zeil.nhöhe und Zeil.nabstand in C55
(SS erlaubt eine kompakte Definition der verwendeten Schriftfamilie
und Ihrer Attribute (zum Beispiel Zeilenhöhe und Zeilenabstand) .
Diese Werte können innerhalb der Eigenschaft f ont wie folgt notiert
werden :
sel ec t or I f ont: [font -styl e] [font - varlant] [font -welght]
(font - slze ]/ [ I lne -helgh t ] [font - famllyl 1
Beispiel:
hl f f ont: slIall ·cap s bald J. 2ell/ \.~eJl
Verdana, Ar! al . Hel ~ e t 1 ca. sans -serl f:
Dadurch gibt der Webentwickler vor, dass <h1>-Überschriften fette
Kapitälchen mit 1. 2 ein SchriftgröBe und I.~ emZeilenabstand benutzen. Die Schriftart sollte - falls verfügbar - Verdana sein; rwe ite bzw.
dritte Wahl sind Arlal bzw. Helvetica. Sind diese Schriften nicht auf dem
Rechner des Anwenders installiert, so soll eine serifenlose Standardschrift (sans - se r 1f) verwendet werden .

laufweite

I Der

Abstand zwischen den Buchstaben (le tt er-

spac1 n9) ist eine wei t ere Eigenschaft, die ei n schnelles Erkennen
ermöglicht. Ein geeigneter, ausgewogener Buchstabenabstand
bringt Ordnung in die Verteitu ng der Wörter auf einer Sei te und

I

lässt sowohl Buchstaben als auch Sätze deutlic her in Erscheinung
t ret en.
Ungleichmäßig voneinander platzierte Buchstaben können die
Lesba rkeit eines Textes erheblich erschweren: Die Buchstabenkombination AV erfordert beispielSVl'eise einen klaren Abstand
zwischen beiden Buchstaben, da man das Bild sonst als ein unbekan ntes Zeichen wahrnehmen könnte. A ndererseit s benöt igt ein

we einen kleineren Abstand. da diese Buchstabenreihung bei einer
deutlicheren Trennung wegen des geschwungenen w in zwei einzelne Buchstaben zerfallen wü rde. Die kleinsten Ungenauigkeit en
in der Laufweit e fallen sofort auf und erzeugen ein verzerrt es Text-

__ T _ ...... _

'

"

c. _ _ _

~

bild. Die Lesbarkeit des Textes wird dadurch stark beein träch tigt.

--___

" "'F-..o

_ _

"""f _
_
_
_ _~

.. _

' ............

I~a . _ rt

.. '*TOOI_

.. Abbild ung ] .22
Laufweite -1 px und +1 px im
Fließtext mit Arial14 px. Der
Default-Wert (O px) hinterlässt
einen besseren Eindruck als eine
manuell eingestellte verm inderte
(oben) oder erhöhte (unten) La ufweite. Dies ist typisch für Standardschrift en .

.. '*

- - . . . .... ~ KJoII .... ~ .... ~

a-.~ ~NI

___

I*-_"'"

.. a..-...., ...............

_ _ _ 1Iio ... ~_T_'*. WIIo,~_

~_ ~ "'_dio ~ "'_ ""'"

_
.....-.-,-_ .....
.... . .---.......
_
... _-_
... ...-,_
_----_
.
-"'
_---"
..
..
..
_,---------_
...
.. -.... _-----

---~",","",,--

... • _ _

no· .. _ _ ... ••__

...... _ _

"..w- _

_

M_.....M. ___ ._..... _ .. _
......
...
,

Unterschneidung

Unterschneidung I Den Buchst abena bsta nd kann man durch
Unterschneidung (Kern ing) für eine bessere Lesbarkeit anpassen.
Das Zusammen - bzw. A useinanderrücken von Buchstabenpaaren, beispielsweise das Zusammenpressen des großen T und des
kleinen e sorgt für ein glattes Schriftbild ohne überflüssige Freiräume.

DIo '''''''_fIIAt_.. _
_ .........
_
f .......... .. _ l l t . .
'",-......_T
""", .. __
... _ .

OIo'_
···_ ..............
_ _
_ ' ...........
F"' __....
og_T._
_
___I O r ••

--.
.
.
.
.
------_-_
_ '''
_ _ ,............ __ _To"_
....F_
_
__

~"""""""'

''-.

•..........._, __...

~

...

--_

.

_ _ _ _ _ ZoiIo

... l _ , Oll

0lI0''''_'-....

~ . jo~,

..,.... ~.""'

........ T.... _ i M , ...

..... dio

_'*

~-oiogo_-.-

_ _ _ "' _ _ _ ........ o_ _ r .... _ ... _

___
_ IiII<Iio
_
T.....
_ ,...
_
ENr.t>oo_oo
.... -.,.,g
..I ...L_
_"
""
._

~""_""

Die Unterschneidung ist eine
negative Laufweite. Bei Buchstabenkombinationen wie ff, fl und
ffl kann es notwendig sein, eine
negative Laufweite zu verwenden oder Buchsta ben zu einem
Buchstaben zusammenzufassen
(Ligaturen).

_1CIt1l"OOlo

...._ ,

...........IGIfo _ _ _ _ _ _ _ ..,,_
_.,_lIlIdio~_T_

onc""""'''",.--... .....' ' ' ' ' '"' ' ononl __
fiIrinto",· ...... _

IKh .......

·

Wortabstand I Auch der A bstand zwischen den Wörtern (word·
spac l ng) lässt sich mit CS5 genau festlegen, wird jedoch in der
Prax is nur selten verwendet. Der Gr und dafür liegt daran, dass
die Laufwei t e eines Text es standardmäßig opt imiert ist , sodass
zusätzliche Änderungen in der Format ierung von Fließtex ten
mei stens negative Effekte verursachen. Insbesondere kann die
Eigenschaft word-spaci ng bei Elementen verwendet werden, die
3.2

... Abbildung 3.23
Schon der Wortabstand von - 2 px
(rechts) macht die Unterscheidung zwischen den einzelnen
Wörtern schwer. Ein zusätz licher
Abs tand (links) von 1 px lässt
Lücken entstehen , die beim Lesen
überspru ngen werden müssen.

Grundlagen der Webtypografie

I

161
1

letter-spacmg
C55:

hl.t1tlel
letter-spaclng ; -O.2ell ;

I
XHTMl:
<hl class - "t 1tle')
Oberschr1 ft
</hD

man besonders zur Gelt ung kommen lassen möchte. Musterbeispiel dafür sind Überschriften.
Die Faustregel lautet: Je kürzer die Zeilenlänge ist, desto kleiner sollte der Abstand zwischen den einzelnen Wörtern gewählt
werden.
Absatzformatie run g I Die Beantwortung der Frage, ob sich
Blocksat z oder Flattersatz besser {Ur die Formatie rung eines
Textes eignet, hängt von der Situation ab. Unter anderem spielen
Faktoren wie die Zeilen länge, die Sprache, in der der Text verfasst
ist , der Mechanismus der Silbentrennung sowie der Umbruchalgorithmus der verwendeten Software eine Rolle .

_._
__
._
_
.....
..
'--_._
..... ._-------_
. .......... ---- -_ .- _-------_
...._-- -_.. _.....
.. --------,
_.. . _---- ---------_...--------...

......

...

COo '

_ _ T_ _ _ _ _ _ _

Abbildung 3.24 •
Flatlerutz (links) ist Im Web
üblicher als Blocksatz (rechts).
Dies h<lt ei nen Grund : Un regelmäßige lücken Im 810cksalZ verwirren leicht.

Blocksatz ist am Bildschirm
sCMerer zu lesen. Grundsätzlich
gilt: Je schmaler die Spalten sind,
desto eher ist Flattersau zu bevorzugen.

Flatt ersal z
Flattersau erzeugt einen gleichmaßigen Grauwert und stellt Inhalte im Gegensatz zu Blocksatz
natürlicher und a bgerundeter da r.

word -spacing
CSS:

hl.t1tl e I
word-spacl ng; - l px ;
I

XHTM l:
<hl cldss - " t It le ")
ÜberschrI f t
</hD

162

3

Textgestaltung

_

.. _

. ...... T. . _

_....

...... _

_.n_""''--_T __ _
'-

...

_

•

, _ .. _

_

_

_

_

......

... =
_ ... "''''
...... T
... _- ......,__
_ ...

...

'

....... , _ _
..-.-_,_

t ... _ _ _ _ ... _

...

Eine übergeordnete Bedeut ung h at der Grauwert der Form atierung. Dieser st ellt ein Messkriterium für die Lesbarkeit eines
Textes dar. Weite, unregelmäßige Abstände zwischen Wörtern
oder Buchstaben einer Zeile erschweren die lesbarkeit, da das
Auge permanent unt erschiedlich große Sprünge machen muss.
Deshalb scheint Flattl'rsatz geeigneter f ür de n Einsatz im Web
zu sein, da er die Frei räume zwischen den Wörtern im gesamten
Text gleich groß darstellt und für einen gleichmäßigen Grauwert
sorgt. Das Problem besteht jedoch darin, dass bei Flattersatz ein
sehr unregelmäßiger, meistens rech t er Flatterrand entsteht. Deshalb wirkt Flattersatz zum Teil unruhig, insbesondere wenn der
Zeilenumbruch oder die Silbentrennung mangelhaft sind. Dies ist
jedoch im Moment in sämt lichen Browsern noch der Fa ll. Der
au tomati sche Zeilenumbruch ist im Web durch eine simple Verschiebung der Wörter, die auf eine r Zeile nicht als ein Ganzes
angezeigt werden können, auf die nächste Zeile, realisiert. Eine
Silbentrennung wurde in den gängigen Browsern bisher noch
nicht implement iert. Ein guter Flattersatz erfordert somit einen
ausgereift en Mechanismus zur Si lbentrennung.
Guter Blocksatz setzt dagegen auf eine gleichmäßige Verteilung der Wortzwischenräume innerhalb einer Zeile, die für das
Auge gle ich groß erscheinen und vo n Freiräumen im übrigen Text
nur wen ig abweichen. Diese Art der Format ierung sorgt für einen
soliden Eindruck und erzeugt einen abgerundeten Textverlauf.
der dem aus der traditionellen Typografie stark ähnelt. Problematisch an dieser Stelle ist, dass die Verteilung der Freiräume bei

Blocksatz wiederum seh r einfach in den Browsern realisiert wird,
sodass meistens allzu große Zwischenräume entstehen . Dadurch
wird das Lesen eher erschwert als erleichtert, was nicht zuletzt
auf die magelhafte Silbentrennung zurückzuführen ist.
Daher entscheiden sich WebenMickler meistens für Flatter+
satz, der im Hinb lick auf die Absatzformatierung im Web d as
geringere Übel darstellt.
I<ontraste I Um einem Text ein lebendiges Erscheinungsbild zu
verleihen, reicht es häufig ni cht, dem Leser sorgfältig konzipierte
Textpassagen anzubieten. Monotonie innerhal b der Textdarstel+
rung kann bei langen Texten zur Ermudung beim Lesen fuhren, da
das Auge permanent durch die Textzeilen wandert. Hilfe bieten
abwechslungsreiche Kontraste im Text, die auf verschiedene Art
realisiert werden können .
Eine der am haufigsten verwendet en Techniken ist der Einsatz
von visuellen Mitteln, eMa Bildern oder Videos , die Texte auf+
lockern und Sei tenbesuchern Anhaltspunkte beim l esen liefern.
Ein passendes Bild veranschaulich t den Sachverhalt und kann
unter Ums tände n genauer erklären, was eigent lich gemeint ist.
Bei Business+Präsent ationen schaffen passende Bilder die ent+
sprechende Atmosphäre und lassen den Betrachter die präsen+
tierten Informationen schneller aufnehmen .

I
Blocksatz
(55:

PI
tex.t - a l lgn : JusUfy :
I
(X )HTML:

<p>Lorem lpsumdolor slt amet.
consectet ur adlplscl vel 1t<1
p)

Die C55-Anwiesung tex.t a l lgn : Justl f ybezlehtsichauf
den unteren ()()HTML-Quellt ext.

(07.o.c..06) Bits and Bobs of 2006
W.'r. pIeased to arYlCIISICe the QuIdrPIx 2006 !(CII'I
Colectlor! eonsistn:l rJ ~ the hd'M.MI ~ reIMsed
tI"is pol5t yur . If you rmsed .-rr ~ ~ loJn n
the past 365 dmys, now you can"llJ this handy set !rOd
corJ1IIet.)'DU' colectlon. QuIdrPIx n 2006 ranged from

hadwaro Icons lIo:e AppIe's ~Book~op$!rOd Nntendo's
skk W'iI conso!e mive, to!ess $erJous .fan Ike L_d
~s HeM and ShIMy, the frierdy beverq. Wo Ilope
you enjoyed cu efforts to bma soroe MI to )IOU' dest.top and hope you1 stick arOlXld
fllr aI r'*eW Q\Jd:f'Ix startn:l ... 2007.

.. Abbi ldung 3.25
Visueller Kontrast durch Bilder
(Quelle: !confactory.com)

Eine bewährte Faustregel besagt, die Textdarstellung eines Kapitels, in dem keine Unterkapitel od er Überschriften vorkommen,
jeweils nach fünf bis maximal sieben Absätzen durch kontrastierende Elemente aufzulockern.
Statt Bilder können Sie auch rechtsbündige Zitate (cl te) oder
Zitatblöcke (blocKquote) einfügen. Besonders beliebt bei Nutzern sind mit einem Einzug formatierte Aufzählungen (Listen), die
in wenigen Sätzen das Wesentliche zum Ausdruck bringen.
Bei langen Erläuterungen und Erklärungen, eMa einer Veröffentlichung eines neuen Konzepts oder einer Stellungnahme zu
einem Sachverhalt, macht es Sinn, eine kurze Zusammenfassung
].2

Grundlagen der Webtypografie

I

163

des Gesagten (zwei bis drei Sä tze) am Anfang oder am Ende des
Bei trags zu geben.

__n....._'.,.·_
",........... _.- ....., ,..--------.
....... '_<n
'............
""""
WMt • ••

~ I _nt.

....

01 D..I,n7

- .....

"""''''Jl"t '~

.,.... .. <..

~,_,

. ................,."'..-. ....

""""' .... ... _ " ' ...... ~'" <W' " • ....,. ........

-....., ,,

~.".,,,'" ~ , ~q.l>'

"".. ...,"' ... _ _ .. .., .... , •

""

s1euern· Schn!14n u""Jd .... , oll e .

.

~c h , ; r•• "

-"_,«0 ....r, oM....,...J.

~~"~

............. ..
.,.~tr_;

cu " ' Ctillg~:(!f'I AZpr.l<:Q k~JYl m" b an;It~ mIt WQrlI9 ~ l19(!f'1" h alt~n

,!..~ """ . ""'.,,<I

........ .

,,.,..., hr> -""'I .....

~,~

.-"......,...,...._._""'
. . _0._
. . . . _ ..... . . _,, _. . . . . . . . . _
• •"'_ ... .... _ ,_ ... __ ..-,""_V"'-".'"

poo=",]ity 01 )'ocr
""~AnarQ "'!oI

Po",t

_ po..............

~

. . ...... ,...... _.,.. .. ... "... """'_O>","'....
,~

~

~

~

...... Abbildung 3.26
Visueller Kon trast durch Zitate
und Zitatblöcke (Quelle: 810g.
calm,n-easy. de und Digital-web.

T'Jp.;f.. ~ IIW (h~ t~:IO <;-1

Crun~ ...::"h<h

'.XI:

D!W..t> 'aM<

. tehln un, SI " •• n_ und Sc "t<n 'oo l Sch "tt4non zur

1/....n.\lUnQ. die ~"m (Jrue,~ch etlich"" ~n,,,,, ztJgeo ,dne, we ..;'n.
Se" fe.-.lo ). Schnft en ~dl"l"l-~ ..ifl ,, "" oboo , fü , den 8 "' .t~
web
g eM re!1~u em pfehlen. cl. " e be.~e' I•• b,.. , ind. Seti f"" " h" ften (~ri fl

''''

.Iy""" >l eI. tkvJ"J"" .1 .., /L, Pr l"'l.o <lul. l ~. s.o,;r.,. 0.. 5.<: h" ~ . n on
~i "' lI rd~ ... mit viv! ~ iU :lWI>Chlln und Inn.,h;,l b d"' I UC~ t./, ~ tn
hi!:J i n ~nQ hoh\l Lt>b .. ktH.

com)

Um einen Kontrast auf einer Seit e zu erzeugen, genügt es also,
Inhalte durch Freirä ume zu isolieren und sie unterschiedlich zu
den sie begleitenden Text en anzeigen zu lassen.
DHNb O<:IlOlnl A1rttets.o1.l9""IgnoI .... 1ilI a.., a. UIl Im _

....... n, "" H

dit "leilil.ornt zwisc~ Wiittem tn QKam I.., Ttlll lliteto QrOI da"" und
lilI tno~ gltlc:n ... ß.Igo n G .. tMeft lCl Jlll. DoI. PratIIem bHlIonI tooocn ~ _.
dllM bei flB MlM1Z lIIn lIOflr unregOlm81!1Qet.

~OM

..,1IbtI'lt.DoI_t>......,.;;c f l.\IItrSIb: zum Tol .......,hof.

recMer f lltter18l"1d

~....,.,

<IoIr

•.-

. ""~.""",,,

. . , - - . . . . . ..

.... ., ...
. . . . .. . .H

.......'

_. ~

VIIn_ e ....

_goo'~"'1ef

.-..........
. .....
.,.....
....
....
, ... ....
-.-""',_- ,. .....
...."'....•.
",~,,­

'W~

,~ ~ .

Zelfttlumt""""UMI_ dlo SIbonIr~ m.noe....1l .Incl
Zu . ....... n tHlu~g ' flonlfMlz

..'
-.... ,"", .. "
,'"'-"'." ,"""c .

fUr".., &.Itz m

_ _ UlJ"II lIIl1 a", GtalNiM<IoO,

G~

Formatiioru!'9. Die., oIoIIIt .,;n Meukrlltorlurn Kir di4t LMbar"1 "nH
T_dlr.

-

.. ,..,. ...........
.............
,... . -

U· Abbildung 3.27
Visueller Kontrast durch
Zusammenfassung (li nks) und
.Snapshot. eines Beitrags (rechts,
Quelle: Alis tapart .com)

"w"' .........,..., .....
",

Tex t gest altung be i hell e n und du nkl e n Hint ergrün den

I Ein

weiterer typografischer A spekt, der häufig nicht berücksichtigt
wird, ist der wesentt iche Unterschied zwischen der Textgestaltung
mit hellen und dunklen Hintergründen . Bei der Festlegung des
typografis che n Satzes haben Webdesigner zu beachten, dass man
bei dunklen Layo uts die Laufweite sowie den Zei lenabstand größer

Abbildung 3.28 T
Schwarz auf Weiß vs.
Weiß auf Schwarz
o;. l _ .....

wählen sollte als bei entsprechenden hellen Designs. Das Schoftgewicht ( f ont-wei gh t) sollte dagegen kleiner gewählt werden .

F,_.ob _

-_.
---

_

",,", '_ aw.._"
b._"'d"

.....
Irl _ _ ...
""1OIIOIIIMIeIl - . . _. UtIIOt _ _ opiodOo\ F_.., W diO
dlo $pr_. 10 _ oSor T,"", _
... dir ", _ _ _
• oSor

F_1IOtIInO "'., T.....

,.IO<*. _

z............

- . . o __

~"'d<oI."

__,,

!Iod_""

~ F~,

oborol1 D=od< ..tz odwr FIon.oub. _
~fl '"

_ "_'_.'"'.....,.....-."al.,.." .... "..
_

• • , . .. _

...... ,d .

?~

~----"""'---_ _ "''''''3 ..·_c.." _ _ .O.....,'"'''''9 0 - _
r~.

. -. . 1IiO l _........ _

....... ""IJo""""., ... ,'--"~s,.,._"""'-

3 Textgestaltung

...gt ...,....... ....... _1IfoI\W

0"._ ..

"' .............. _~"'"... O..

.., " ' _ " " '1".0

~_

,,:,, d..

_ _ SIooI."", ... " _

EirIt _ _ _ _
MI" 0 .........., .... fo_Io","II DioHer
_ " ' _IIIriuro!lo< oio
T. ....... _
•
......
_ _ _ W!MIom _
_
.Ioot Zoll
IB~,\I)

164

D.

, ............. '"9_ T. . . . .Q">OI.

d.l_'o_ r."'dor "'_.

""~I~VO
_ _ " " _ \'I'6rtom odwr _ _ _ _ ZoI. _ " d .. l _

""'..

WeiBer Text auf schwarzem Hintergrund besitzt einen höheren
Kontras t als schwarzer Text auf weißem Hinte rgrund, deshalb
müssen Zeiten bei dunklen Designs mi t mehr Zwischenraum versehen werden, während die Buchstaben weiter auseinander liegen und einen kleineren Schriftgrad haben so llten .
3.2.4

Schriftgröße

Zu den typografis chen Aspekte n gehört natürl ic hauch die Schriftgröße. Im Online-Berei ch stehen Webentwi cklern relative und

I
Druck

Weiße Sch riftfarbe auf
schwarzem Hintergrund verhiilt
sich auf dem Biklschirm und
beim Druck genau gegensätzlich. Auf dem Monitor wirkt
die Schrift kräftiger, im Druck
dünner.

absolute Grö Ben zur VerfOgung . Diese lassen sich fOr sämtli che
Textelemente einer Seite mittels (SS festlegen.

Abso lute Schriftgröße

I Da

die Darstellung einer Webseite
immer von der Systemkonfiguration der Seitenbesucher abhängig

Sehnftgroßeo

ist , ist die Verwendung absoluter Maßeinheiten für das Screendesign in der Regel nicht zu empfehlen. Kaum zu vermeiden sind

Bei der Schriftgröße können
Webentwickle r mit absoluten
und relativen Einhei ten arbeiten.

absolute Angaben jedoch bei der Aufbereitung einer Seite für
andere Ausgabemedien - etwa um das Drucklayout einer Webseite genau festzulegen.
Absolut ist hier in dem Sinne zu verstehen. dass genaue Maße
fü r die Schriftgröße bestimmt werden. die aber in modernen
Browsern durchaus skatiert - also verkleinert und vergrößert werden können. Im Unterschied zu relativen Angaben i st es bei
absoluten Werten beispielsweise unmöglich, die Größe eines Elements in Relation zu der Größe seines Eltern-Element s zu setzen
und diese Proportionalität auch bei beliebiger Skalierung beizubehalten . Abso lute Schriftgröße bezieht sich also immer nur auf
dasjenige Textelement, für das sie defi niert wird.
Laut (SS-Spezifikat ion lassen sich absolute Längen im Web durch
absolute längenmaße sowie Schlüsselwörter genaue r angeben.
Absolute Größe wird durch Punkt (pt), Pi ca (pe), Zentimeter
(ern), Millimeter (1TfTI) und Zoll (1n) angegeben . Punkt und Pica
sind typografische Maßeinheiten, mit denen gru ndsätzlich in

Absolut. Großen
Punkt (pt):

pI font-slze: IOpt I

Printm edien gearbeitet wird. (1 Pun kt en tspricht 1/72 Zoll. 1 Piea
entspricht 1/6 Zoll oder 12 Punkt.)

Pica (pe):

Mit SchlOsseiwörtern verfOgen Webentwickler Ober ein Mittel,
Textinhalte einheitlicher zu gestalten und ihre Darstell ung den
Eigenschaften des genutzten Browsers anzupassen. Da jedoch

Ze ntimet er (e rn ):

verschiedene. vor allem äl tere Browser mit Schlüsselwörtern häufig nicht vertraut sind und Texte dementsprechend unterschied-

pr font - slze: lpe I
pI font - slze: 15cm I
M illimeter(mm)
pI font - slze: 250nrn I
Zoll (i n):

pi fon t -slze: 21n I

li ch skalieren, können sie unter Umständen erhebliche Probleme
im Hinblick auf die Lesbarkeit berei ten.
Schlüsselwörter für absolu te Schriftgrößen sind :
... xx- small (winzig)
...

x- small (sehr klein)
3.2

Grundlagen der Webtypograne

I

165

...
...
...
...
...

s ma 11 (klein)
medium (mittel)
1 arge (groß)
x-large (sehr groß)
xx-large(riesig)

Sie werden in der folgenden Abbildung für die Schriftart Arial in
aufsteigender Reihenfolge dargestellt:

_..... -

--........

""'-...

'MAU

Sc_i<lgtmff~

s-r~

MEDIUM

Sd'ImII1Ie~ill!il

Schmllll9rli~

....a

Schmetterling im Himmel

&:hm&tter1il'lg im Himmel

'-lARC(

Schmetterling im Himmel

Schmetterling im Himmel

XX-I..AIK;E

Schmetterling im Himmel

Schmetterling im Himmel

"'-SMAU
' -SMAll

-.

Ab bitdung 3.19 .t..
Schlüsselwörter für absolute
Größen am Beispiel der Schriftart

Arial

--.,
im HilTfTllll

... HiMIt/
im Himmel

Absolute Angaben sind im Screendesign jedoch wenig aussagekräftig, da sie als Maßeinheiten tu r den Druck gedacht sind und
für die Darstellung auf dem Bildschirm zuerst in Pixel (zum Beispiel dpi nach pp!) umgerechnet werden müssen. Die Verwendung der Einheit Pixel für Druckversionen ist wiederum eine trügerische Angelegenheit. Ein 1200 dpi-Drucker würde eine 12px
große Schrift 0,01 Zoll groß drucken.
Ex kurs: Dru ckversionen vorbereite n I Für den Sei tenbesucher,
der sich eine Seite ausdrucken möchte, gibt es nichts Unangenehmeres als abgeo;chnittene Textinhalte oder unlesbare Texte
auf einem bunten Hintergrund . Um solchen Problemen gezielt
vorzubeugen, ist es empfehlenswert, spezielle Druck-Stylesheets
bereitzustellen.
Zu diesem Zweck wird eine separate CSS-Datei (etwa p rf nt.
css) erzeugt, in der sämtliche Druckvorgaben - Schriftart, Schriftgröße, Zeilenabstand, eingeblendete und ausgeblendete Seitenelemente usw. - genau festgelegt werden. Die CS5--Datei wird
schließl ich mittels
( l ink hre f - " prfnt.css " type-Htext /css " medfa- " prfnt" I>
innerhalb des ( head >-Tags des {X)HTML-Dokuments eingebunden. Möchte der Anwender Inhalte ausdrucken, wird diese
Stylesheet-Datei von Browsern benutzt, um die Druckansicht zu
erzeugen.

166

I

3

Textgest aJtung

I

Navigationen, Formulare, Werbeelemente und weitere irrelevante Elemente können mit .selector I display: none: I ausgeblendet werden. Beachten Sie bitte, dass alle Hintergrundbilder
in Drucklayouts hierdurch ebenfalls ausgeblendet werden.
Außerdem darf man nicht vergessen, externe wie interne links
durch Text mit direkten Referenzen zu erset zen. Dies lässt sich
etwa mit
a:after
content:

( " attr { href ) " ) " ;

realisieren. Ein Anker
<a href- " www.musterseite.de " >Bei spi e 1 <I a>
erscheint dann im Drucklayout als ,.Beispiel (www.mustersei te.
de)..:.
Besonders wichtig ist dabei die Funktion attr ( x ), die zu
eine m Selektor den Wert von x als Buchstabenfolge zurückgibt
So liefert
a[hret] :atter
content: at tr ( href ) ;

als Ausgabe hinter (a tter) den eigentlichen Verweisen die Adressen der Seite, auf die verwiesen wird. Mit a[href):before lassen sich ähnliche Angaben vor einem Verweis anbringen. Es ist
zu beachten, dass der Internet Explorer bis zur Ver;ion 7 mit den
Pseudoklassen before und a tter nicht umgehen kann. Die siebte
Version enthält eine vollständige Implementierung beider Klassen.

HINWEIS

Ein Warkaround für die fehlende
Unterstützung der Pseudoklassen
Defore und after durch den
Internet Explorer kann ein Skript
sein, das den Internet bplorer
erkennt und die Funktion mithilfe einer DOM-Manipulation
realisiert. Nähere Informationen
finden Sie unter:
http://nerdHentral.blogspor.
(oml2007/02/1 n terner-explorer·
be/ore-afrer- pseudo. hrmf
(linkcode 071)

Schritt für Schritt: Pra xisbeispi el Druckversion
In der Regel sind Schriftarten mit Serifen in ausgedruckter Form
leichter und schneller zu lesen und sollten deshalb in Drucklayouts verwendet werden.

D

Hintergrundfarbe anpassen

Um sicherzustellen, dass der ausgedruckte Artikel Schwarz auf
Weiß gelesen werden kann, werden alle Seitenelemente mit weißer Hintergrundfarbe versehen. Bei Bedarf können Texte mi t der
Stilanweisung text -all 9n: ju st1f y; in Blocksatzform gebracht
werden. Die Anweisung !lmportant sorgt dafür, dass jegli che
)..l

Grundlagen der Webtypografie

I

167

weitere Deklarationen, die eine andere Formatierung benutzen,
ignoriert werden.

.

{

/ * Weiße Hintergrundfarbe */
background-color: /iffffff limportant;
/ * Sch riftarten mit Serifen */
font-fam11y: Cambr1a. Constant1a, ' Times New Roman ' .
T1mes, ser1f;
/ * ggf. Blocksatz */
text -a llgn:ju stlfy;
{

D

Schriftgröße setzen
Al s Sc.hriftgröße wird 12 pt gewählt. Die Angabe in Punkt ist für
das Sc.reendesign eher unpraktisch, für Drucklayouts allerdings
gut geeignet . 12 pt ist der Standardwert, der in den meisten Fä llen eine optimale Lesbarkeit sicherstellt.
body {
f on t- slze: 12pt:

11

Voll e Se iten breite
Damit die ausgedruckte Version automatisch die volle Seitenbreite einnimmt, setzt man die Breite des jeweiligen Containers
oder Seitenkörpers auf auto bzw. auf 100%. Innere und äußere
Abstände werden auf null gesetzt.
body. i/conta1ner, /ipr1mary-,ontent, i!foote r (
wldth: auto l1mportant;
margi n: 0 1i mportant;
paddlng: 0 !lmportant :

11

Seitenelemente ausblenden
Irrelevante Elemente wie die Seit ennavigation oder Werbung
werden ausgeblendet.
f/navba r. /Jsfdebar , f/commentarea , .intro
display: none;
{

11

Verwei se aufbereiten
Alle Verweise, die nicht auf lokale Marker verweisen ,

168

I

3 Textgestaltung

I

<a href- · Umark. ' )li nk</a)

( p ld- ' ma rk ' ) Text</ p>
werden hinter dem VelWeis in Klammern angegeben und extra

gestaltet.

1* Ausgabe des L1nks 1n Klammern */
a:not([href A- ' U'):after I
content: • ( ' attr(href) ' ) ' ;
color: lIeee :

fant-style: 1to111c;
font-$12e: Q.8Sem:

m

tille-Attribute ausgeben

Sollte ein Verweis, ein Bild oder ein weiteres Element über ein
t1 t1 e-Attr ibut verfügen, wird dieses auch ausgegeben .

*(t ltle):after I
content: • ( ' "ttr(t1t1e) ' ) ' ;

co lor: lJeee:
f ant- style: 1ta11c:
font- s1ze: O.85em;

U

Alternative Beschreibung ausgeben

Die Ausgabe einer alternativen Beschreibung eines Bildes wird
hinzugefügt. Die Beschreibung soll unter dem Bitd erscheinen
(dafür sorgt \ A) .
fmg[alt):after
content: " \ A ( " att r (alt) " ) H;

m
Anführungszeichen
Anführungszeichen soUten mittels Unicode codiert werden . Mehr
hierzu auf der Seite http://de.selJhtml.org/css/eigenschajten/

pseudojormate.htmHanjuehrungszeichen. Linkcode 072.
body (

/ * ln der deut sc hen Sprache */
Quote s : " \20 IE " " \20lC " ' \20 1A" " \ 201S" ;
/ * In der engl1schen */

12

Grundlagen der Webtypografie

I

169

Quotes: "\20 I e " "\20 10 " "\ 2018 " "\2019 " :

I
Für Q und bl ockq uote werden öffnende und schließende Anführungszeichen gesetzt.
q:be f ore . blockquote:befon>
co ntent: open-quote :
Q:after. blockquote:after
con t en t : close-quot e:

D

Quellenverweise setzen

Damit am Ende jeder ausgedruckten Seite ein Verweis auf die
Quelle steht. werden das Attribut page- br eak.- before sowie h r
verwendet.
h, [

page-br eak-before: alway s :
color: liftf:
marg1n-bottom: 3em:
text-a l 1gn: left : }
hr: after {
content: "Original :\www.muster.de/muster . php. " :

Im

Zusätzliche Informationen

Zusätz liche informationen über die Sei te, den Namen des Autors
sowie ein Copyright-Vermerk können am Ende des ausgedruckten Dokuments hinzugefügt werden.
#conta i ner:after {
con t ent: - \Alle Rech t e vorbehal t en .

e

2008 www .

mu ster.de " :
color:1I 666666 :
f ont-sfze : O.85e m: } •
Weitere Hinweise zum Thema, teilwei se auch mit deut schsprachigen Anleitungen. finden Sie auf:
http://www.drweb.de/(Hpr axi sidruc ken -pri ntversi on. sh t ml (Lin kStiI.nd ... rd -Sc hnftart

code 073)

Ais St.lndard-Schriftart wird von
gängigen Browser die Serifenschrift Times New Roman in der

Hierarchie zwischen Textelementen plattformübergreifend zu gestalten und ihre Proporti-

Größe 16px benutzt.

170

I

3 Textgestaltung

Relative Sc hriftgröße

I Um die visuelle

onen aufrechtzuerha lten, muss man mit relativen Größen arbeiten .

Dabei hat der Webentwickler nur ei nen absoluten Wert im Hin terkopf zu behal ten, und zwar die Standardschriftgröße in gängigen Internet-Browsern. Diese liegt bei 16px und wi rd als Standardwert benu tzt, falls Webdesigner bei ihrer CSS-Formatierung
eine Schriftgröße von 100 Prozent vorschreiben oder keine Vorgaben machen.
Eine relative Schriftgröße erlaubt es dem Sei tenbesucher, die
Da rstell ung von Tex tinhalten gegebenenfa ll s zu vergrößern oder
zu verkleinern, um die Darstellung an eigene Bedürfnisse anzupassen (zum Beispiel bei einer Sehschwäche) und lesefreund lieher zu gestal ten.
Auch für relative Angaben haben Webentwickler eine vielfa.ltige Auswahl zwischen mehreren MaßeinIleiten. Neben Schlüsselwörtern lässt sich die Schriftgröße von der x-Höhe der vervvendeten Schrift (ex), von der Pixelgröße (px), von der sogenannten
Geviertbreite (em) sowie vom Prozentwert bzgl. des Eitern-Elements (%) abhängig machen. Die Schlüsselwörte r für relative Größen sma 11 er (kleiner) und 1arger (größer) verändern die Schrift
relativ zur Schriftgröße des Eltern-Elements um das 1,2-Fache .
Wird also die body-Klasse einer Seite mit der Standardschriftgröße 16px ausgezeichnet, so wird ein Absat z p

I
Tipp fiir dl~ Arbt'lt mit
Schnftgrdßen
Um mit Schriftangaben bequemer arbeiten zu können,
setzen Designer die SchrifigröRe
des Ilody-Elements hauog auf
0 .625 eil:
body I ... font - slze: O.625em:
\
Dies entspricht einer Schriftgröße von 10plC (16plC x 0,625 '"
10 plC). Mit der 10er-Einheit Jassen sich typografische Angaben
Im Code leichter machen und
Proportionen der SchriftgröRe
besser absch<l.t.zen.
Anwender können die Standardeinstellungen ihres Browsel;
ihren Vorlieben anpassen.

...

<p sty1e- " f ont-si ze: 1arger " >lnha1t </ p>
eine Schrifth öhe von 19,2 px = 1,2 x 16px aufweisen.
<p style-"f ont · s1ze: sma ll er " >I nhalt </p> wird entsprechend eine Schrifthöhe von 13,3px = 16px 11,2 besitzen.
Die x-Höhe (ex) bezieht sich auf die Höhe des Kleinbuchstabens x der verwendeten Schrift.
Die Pixelgröße (px) steht dagegen nicht in Relation zu einer
eingesetzten Schriftgröße, sondern zur Auflösung des Anzeigegeräts : Bei einer größeren Bildschirmauflösung wird die Sch riftgröße
kleiner erscheinen. Pixelangaben werden häufig benutzt, da sie
nicht von den Einstellungen des Browsers des Anwenders abhängen. Dabei ist zu beachten, dass 12 px auf verschiedenen Systemen unterschiedliche Größe darstellen und unter Umständen
auch als 14 px angezeigt werden können. So ist eine Schrift in 9 px
noch gut lesbar auf einem Windows-PC, während man bei einem
Mac-pe die Zeichen (Glyphen) kaum voneinander unterscheiden
kann. Im Internet Explorer bis zur Version 6 (einschließlich) lassen
sich die durch px definierten Schriftgrößen ni cht skalieren.
Die Gevie rtbreite (em) macht sich die Gev iert-Einheit zunutze.
Dies ist die Breite des Großbuchstabens M in der dargestellten
Schriftart und Schriftgröße. Im Webkontext ist 1 em dasselbe wie
die Schrifthöhe des zugehörigen Schriftsatzes. Ist beim Benutzer
3·2

PilCelgröße
Die Pi~elgröße steht in Relation
zur Auflösung des Anzeigegerät s.

Gev iertbreite
Die Geviertbreite steht in Relation
zur Auflösung des Anzeigeger<l.ts.

Grundlagen der Webtypograoe

1 171

TIPP
Laut W 3C-Spezifikation wird
bel der zukünftigen Entwicklung
von (55 besonders viel Wert auf
die ern-Einheit gelegt werden.
Deshalb ist es sinnvoll, bei Größenentscheidungen primär sie in
Betracht zu ziehen.

die 16px-Größe als Standardwert gesetzt, so en tspricht 1 em
eben diesem Stan dardwert. Sollt e der leser jedoch die Schriftg röße skaliert haben, diese also etwa auf 18 px eingestell t haben,
so würde 2 em in diesem Kontext 36 px bedeuten.
So legt p. i ntroduct i on { font- si ze: 1. Zern: J fest, dass die
Schriftgröße für Absät ze der Klasse i ntroduct i on um 20 Prozent
größer ist als die Schriftgröße eines übergeordnet en Elements.
Wird ern für die Festlegung de r Schrift größe (Attribut f ont s1ze) eines Textelement s benutzt, so bezieht es sich auf die
SchriFtgröße des Eltern -Elements. Verwendet man außerdem das
Attribut 1i ne - hel gh t für einen Se lektor (body, p usw. ) mi t emAngaben, so gibt man an, um w ie viel Prozen t die Zeilenhöhe
des jeweiligen Selektors größer sein soll als die Schriftgröße. Die
Angabe p.fntroductfon { l fne-he i ght: I .2ern: J bedeutet
also, dass die Zeilenhöhe für einen Absatz um 20 Prozent größer
sein soll als seine Schriftgröße.

Prozentwerte
Prozentwerte legen Größenrelationen zwischen Elt ern- und KindElementen fest.

Prozentwerte stellen ähnlich zur ern-Einheit ein wei t eres Maß

dar, mit dem sich Relationen zwischen Eltern- und Kind - Elementen genau festlegen lassen. Die Wurzel der Dokumentstru kt ur erbt - falls vom W ebentwickler nicht anders vorgegeben von eingest ellten Defau lt-Werten des Browsers, in dem die Seite
angezeigt wird. So liefert body { f ent - s 1ze: 75%: I eine Schrift-

Relative und absolute
Große verwenden

Webentwickler sollten sich auf
wenige relative Größen beschränken. Ein ausgewogenes
Verhältnis zwischen absoluten
Größen (etwa für Bilder) und
relativen Größen (Layout) ist
vernünftig.

größe von 9px, falls der Standardwert 12 px beträgt.
Im Allgemeinen muss man bei relativen Größen damit rechnen, dass ein sorgfriltig konstruiertes layout durch eine starke
Skalierung des Text es zusammenbre chen kann. Deshalb ist es
wichtig, unt erschiedliche Maßen nach Möglichkeit zu vermeiden.
Opt imal ist ein ausgewogenes Verhäl t nis zwischen em- (alternat iV
Prozentwerten ) und px-Einheit en (dies ist abhängig vo m gewählten layout), wobei das ern-Maß grundsä tzlich für die St ruk tur der
Seite verwendet wird, und die Pixelgröße für die Gestaltung der
Bilder- und Links zu empfehlen ist.
Der vertikale Rhythmus I In klassischen Typografie-Bü chern
wird der Raum in Texten häufig mit der Zeit in Musikstücken verg li chen . Beide lassen sich unendl ich aufteilen und können beliebige Formen annehmen, die nicht durch gewisse Regeln, sond ern
durch die Kreativi tät des Autors bestimmt werden. Eine Harmonie wird jedoch nur bei wenigen proportionalen Interva llen
erreicht. Und genauso wie die Aufteilung in Zeitintervalle einen
Rhythmus in der Musik erzeugt, so rgt eine konsistente Aufteilung
des Rau m es für einen Rhythmus eines Textes.
Im Web spricht man vom typografischen Rhythmus eines
Designs, wenn dem Sei tenbesucher beim vertikalen Durchlauf
der Seite eine ausgewogene und konsisten te Textgestalt ung dar-

172

I

3 Te)(tgestaltung

geboten wird. Dieser sogenannte vertikale Rhythmus (vertical
rhytm, baseline rhythm ) - im Wesentlichen bloß die konsistente
Anordnung von leerräumen und Textbl öcken beim vertikalen
Seitendurchlauf - wird durch die Sch riftgröße, die Zeilenhöhe
sowie den Zeilenabstand beeinflusst. Damit ein Design einen
einheitlichen Rhythmus besitzt, müssen diese Aspekte genauer
betrachtet werden .
Um das Konzept zu verstehen , stellen Sie sich bitte ein halbtransparentes linienpapier (Raster) vor, das unter Ihr Designlayou t gelegt wird . Alle linien seien gleich weit voneinander entfernt.
liegen sämtliche Textzeilen nun genau auf den Linien des
Rasters, so sagt man, dass die Textgestaltung im Design einen vertikalen Rhythmus besitzt. Dies muss nicht nur rur Absätze gelten,
sondern für alle Textelemente, wie etwa Überschriften, Fußnoten
oder Randbemerkungen.

./Ut,............ ""'

CQ.It(tfl!OOr
.. tIit. DoIIo< ";'tu
lIIll'I . DcMcIl''''_M oTtbl'.n..

.-

I •

Mt_~,*

__ •

• ~~..:Irntd,.

"'''''''GMtbIt.~tII ....
~Kn""'HIl-•. _.portt!m
4JIIIl fOUl" allI:.

Manchmal lassen Designer Oberschriften absichtlich gegen den
vertikalen Rl"o/thmus laufen, um
diese stärker zu betonen und interessanter erscheinen zu lassen.
Dies Ist Jedoc h eine Ausnahme.

~

111 Page Tide
u. .... IJKU"I . . . ,ft

I

t lll«: Lo ..... ll'."un"I dolo. alt

.... 01

c<lIuectetuft".4i

...

eULD.",e~ ,1I.unuilL Do . ..,

el....... ..... UJ! .tk n un..
XWlam ..... ,..s. Hd...-.s
a«t> ....... &...,11" ... Sed
tinddul1
1U1I~ ul~ ..... ...
, ·_Ihulu m. quam pW"tK
~
..Uktcudbl .... loN:1., Ld ....us. ~
felb etI san. MalO«nu ct .C<I~
MnNn ptlt... dia,n"""'"
wDus. Q!!leq... d.o
~. ;UoIH ..
u t ut ~..., f_..... ntum
trtsUque. N".... p lacerat Ips....,
,

... Abbildung ].]0
Vertikaler Rhythmus : Hier sitzen
TextzeUen auf dem richtigen Platz .
(Q U!lIe: . Baseline Rhythm Deciphered., http://Www.sJtepoint.
com/blogsllOO7/04/301ty pogr iJphy-basellne-rhythm -dedphered!

Linkeode 074)

Inhalte, die na ch eine m vertikalen Rhyt hmus angeordnet sind,
lassen sich besser und leichter lesen als Inhalte, die über keinen
Rhythmus verfügen. Die Struktur ist zusammenhängend, konsistent und intuitiv, da alle Elemente auf dem richtigen Platz zu
sitzen sc heinen . In der Praxis wird dies jedoch nur selten der Fall
sein, was ni cht zuletzt an den äußerst . kreativen« Standard einstellungen der einschlägigen Browsern liegt. Um den Rhythmus zu erzeugen, müssen Designer mit relati ven Texteinheiten
arbeiten und passende Zeilenhöhen manuell festlegen. Im Folgenden betrachten wir ein Beispiel, wie der vertikale Rhythmus
realisiert werden kann.

Schritt für Sch ritt : Praxisbeispie l: vertikaler Rhythmu s
Nehmen wir an, ein abstraktes Designlayou1 läge schon vor.
Dieses besteht aus einem Con tent-Berei ch (Ucontent) und einer
3.z

Grundlagen der Webtypograne

173

rechts platzierten Sidebar-Spalte (fIsidebar) , die unter anderem
eine geord nete Uste (01), Überschriften (h 2) und weitere Designelemente enthält. Im Content-Bereich sollen neben Fließtext eine
Überschrift (hI ) sow ie ein Zitat (.zl t at ) erscheinen. Ohne jegliche CSS-Vorgaben sieht das Layout wie in Abbildung 3.31 aus.
L\ bS<ltz!ormalicrtmg.& Textgestaltung

_,--_
__

.................. ._
.
. __
---_....-.-

Jkn...,*~n9"n

..

---_
... ,-,,"". _..... _- ......
--,_
......_-_
,-............ _-- __ -..........
--"'--.'
.. _-- ...... _
_
.
--"'--""
..__ _
....
.......
-_-,-_-..,
.......
---_
..
_
...._-"'...----__--_-..--...
--_
~--_

.......--...
.... ....-..
-_,_
........--,.... . .. ...
....." - _ ..
... .... _ ........
hW"-_ .......... _
... _
... ... ...
... ... .....
...
=;:::::':="'--=~""=-~

Abbildung 3.31 ,.
Ein abstraktes Designlayout. formatiert durch Standardangaben
des Browsers.

11

""-

..

7....... mm.."'.....w '!/

........

...

......... ....... ... ....... ...

Innere und äußere Abstände auf 0 setzen

Versc hiedene 8rowser können beim Rendern einer Seite unterschied liche Standard werte für äußere (ma rg i n) und innere
(padd 1 ng) Abstände zuweisen. Das Zurücksetzen sämtlicher
Einstellungen auf 0 ist somit notwendig, da schon wenige Ungenauigkeiten Textelemente aus dem Rhythmus bringen und somit
ein verzerrtes Bild verursachen können.
body . div . dl . dt . dd. ul . 01 . 1 f . h 1 . h2 . h 3. h4 . h5 . h6 . Pre . f o rm
,ffeld set , p,bl oc kquot e.th,td {
margin: 0 ;
paddlng: 0 ;

J

_
---_
.... _.. _
,
_
.....
-_
_-- .._. _------=-==-.. . ............_
-_.--_
-,.,..".,...................

Absut:tformatierung
S: Tex/gestul/!lI!g
_
... _ _ _
t .....
_ _
_ ~

_

... _

.....

.

....... T... _

...

.......

...... _

...

. . . _ _ ...... " " - < n .... _ _

__......
_ _ ..... . - _r..,.. ... "._
_ _ ......... ww..... ..................-1:oO.

............. .......-

Abbildung 3.)2 ,.
Designlayout. nachdem innere
und äußere Abstände auf 0
gesetzt wurden

_-_
__

..::=:... .=;..~!:.
. ..............
:::-..r.::.:l""~-:.,."7.=:=~..::...
.-................
............ . .
.... ...

-_

_ _ c._ ........

_ _ y;onon _ _ ..... _ _ _ .... ..

D

Schrift größe und Zeilenhöhe festlegen

Ansc hließend überlegt man sich den Rhythmus, den man auf der
Seite entwerfen möchte. Dieser hängt von der Schriftgröße sowie
der Zeilenhöhe ab. letztere kann j edoch erst dann festgelegt
werden, wenn die Schriftgröße tur den Fließtext schon gewählt
ist . So mit fängt man zuerst mit der Schriftgröße an.
174

3 Textgestaltung

I

Angenommen, 5ie haben sich in Ihrem Entwurffü r die 5ch riftgröße
16px entschieden (dieser Wert entspricht also 1 em im vorliegenden Layout). Ein naheliegender Wert für eine optimale Zeilenhöhe wäre dann - entsprechend Überlegungen oben - etwa das
1,5-Fache der 5chriftgröße. Das macht also 1,5 x 16px = 24px.
Dieser Wert legt den typografischen Rhythmus der 5eite eindeutig fest und wird als die vertikale Einheit im typografischen Rhythmus bezeichnet (auch vertical unit genannt).

11

Raster erstellen und anwenden

Nun erstellt man ein Raster, indem man ein Rasterbild erzeugt
und dieses mittels der Eigenschaft background- repeat in C55 auf
das ganze Layout anwendet. Die Höhe des Bildes stimmt mit der
Höhe der vertikalen Einheit überein .
Hat man sich für den Rhythmus von 24px entschieden, so
erzeugt man zurst ein 1 x 24px-Bild der Höhe 24px, bei dem die
oberen 23 px etwa mit weißer Farbe gefüllt sind, das letzte Pixel
dagegen eine andere Farbe hat, zum Beispiel Bla u.
Wurde das Bild etwa unter dem Namen 24px-unit.png in
den rich tigen Ordner abgespeichert, so fügt man die C55-Deklaration
body (
ba ckground: transparent url ( " 24px-un1 Lpng " ) repeat
sc roll OS OS :

-_
__
. _-----,
...........
__
.... ...
_
...
_
. _._
... .. - ----_
....
---_
.... _---..
_
....-----_---_
..._
-_
-_................_..._..--._-,......._--...................
...._-. _........... ..
_

...

....

. . . . _ _ _ 1 ..... - - . . _ _ .. _

...-.............. . -......
,_ " ....... "'_ ......

~

_

... Il ........... _

.. 60!.eM ...

...

. . - . - ....... _

_T.~._

.............................. 60

_ ---_
----_
...........

_,."
..
..... ."..,...-, .

.-

.......

_,
-,,----_
-------.,_

•
Abbildung ] .] ]
Die gewählte vertikale Einheit
wird in ein Bild eingebettet. Das
Bild Ist 1px breit und 24px hoch .
Die _oberen. 2] px sind mit weißer Farbe gefüllt , das letzte Pixel
ist blau.
.t.

in die C55-Datei hinzu . Das Ergebnis ist in der nachfolgenden
Abbildung zu sehen.
AbMlIi'/Qrmalicl1mg & Tc.l'Igc,:talllmg

•

l/o>n"" .... ' 11'' ,

_ •. .....

b+_~...--

"-...._
___
...._--lllfoal~rakhlli.

~r=

.
z.""""-v;.""",,

..............

.. Abbildung ] .]4
Ein Raster wird eingebunden.
Mit der Eigenschaft . backgroundrepeat. lässt sich ein 1 px-breites
Bild auf das ganze Layout anwenden.

........-._.

................
"'-.
....................
..
"' _ _...T_'"

;:r~~.:.::. "'ä~==F!:...~

...-...._ .... ...

Anschließend legt man die gewählte Schrjftgröße sowje die Zeilenhöhe für das body-Element in C55 fest. 5tandardmäßig setzen
Browser die 5chriftgröße auf 16px. Damit Inhafte im Internet
Explorer 6 und in älteren Versionen skaJierbar bleiben, darf die
Größe nicht in Pixel-Einheiten angegeben werden . Im Gegensatz
zum In ternet Expl orer 6 können moderne Browser mit Kind].2

Grundlagen der Webtypografie

175

An dieser Stelle mag die Festle~
gungvon 16px ilberfli.lssig er·
scheinen, da Browser 16px stan·
dardmäßig verwenden. Doch ob
dies in Zukunft auch so bleibt ist
ungewiss. Deshalb sollte man lie~
ber zusätzliche Deklaration ein·
setzten, um auf der sicheren Seite
zu bleiben.

Selektoren wie etwa html >body korrekt umgehen, wod urch
die erste Deklarat ion überschrieben wird. Die Zeilenhöhe von
Absätzen im Fließtext wird auf 1,5 em (also wie gewünscht 2 px)
gesetzt.
Dies ergibt den folgenden CSS~Code:
body I
font-s1ze: 1001:
html >body (
fant- si ze: 16px:
I/content p (
line-height: l ,Sem:

~AbsaI4o",nalieFun9-&-'lhtgestaltun9~ l m~

.... ..tnI · dio · l)~ l"npf."ob· o:Ioh · ~batt ",," ..FIm

~ .. fiI...!ln'Oml"tlr~~In· ~ .. ~ .., , -

l--'m ......xblro""r!,.I~ll"n!Clrn't;1...tt~n..>d.... m·opiekn flIkl"",n,to d:Io
2ämlii~p ~, diI: Sprack, iII dor de r T~:n vorfu;t in. der :l.tedw!imllll der
SiII>e'~f'1'~ftU"" _
~r (/lIt~rvcllarqorif""' .. der ~men S"ftw_ ,,;n.,

""'.
Ein.

Iit..~...m.t" ~

bat der Gram,·ort du !"ormaUorun • .

DIeser 6ttllt tln Mwkrlttrtum filr dle lMt>Mktll: tirIts Tt'tttl; 00. II"titt,
~Ise AbnäMe

mcn..~t!I

zwIoclooen II'ört.rn ode Buc"'t~ ..... r ~

dle lt$~TttlI:, da das Aug.e J>t1l)\lI"lefl1 \IfI1tmbltdllo:h sro&

sprünge ",""bon m<I5S.

..,he\n,
•• filr Mn
Im W.b zu uIn. da,.,. dio
>-1'I'1!Irturrw!. rwilrhmW6n~rrrtml)taltllrrrn.nIft<h.1f1II\.cbm~IIt"Ußlt~~~~
. fI.on..-un

~

~

·n...n· ~.., · c",tn<'l!rf"~

>- D8~F'bn~",rliir"den· Einutlim· wtlnuwln;"ll:r.....-

",.1m p!UmI"' T~' ~ .pt>II cbmdnmd

1'I'1!Irturrw! · ,.n.rt~.. wm..

Abbildu ng ] .]5 ...
Die Schriftgröße sowie die Zei~
lenhöhe bei Absätzen werden
festgelegt.

~inrn ~ C"'''''-n11OJ"11~ F1Mt~natt ~ iD

D... Problem beot~ht ~och dIIriD. das!;

...Ilr UlllY8"Im8I!i!"...... ;.t~"" _ r I'I.1tterrand ~ntst .hL

Deobalb ..ir1n f1menm rwnTei! WII"1Ihi& lnibe>oode ... ""IID der
und/O<t.r .... ~~""""t ~_ sind.

~~numbrurb

a

Die Übersc hrift entsprechend dem Rhythmus

platzieren und gestalten
Beim Design des vertikalen Rhythmus fängt man von oben an und
arbeitet sich von oben nac h unten durch, da Ungenauigkeiten
im oberen Bereich auch Probleme im unteren Bereich verursachen können. Deshalb fängt man im vorliegenden Designlayout
mit der Gestaltung und Platzierung der Überschrift im ContentBerei ch an.
Genauso wie im zweit en Schritt wählt man zuerst die Schriftgröße der Überschrift. Angenommen diese soll 32px sein, also
genau das Doppelte der gewählten Schriftgröße für das body-Element. In relativen Einheiten entspricht dies also der Größe 2 em.
Die em-Größe eines Elements bezieht sich immer auf die Größe
176

I ]

Textgestaltung

I

seines Eltern+Elem ents: 2 em für hl bedeutet also das Doppelte
der Größe von body.

hl I
f ont-size: 2ern :

Die Zeilen höhe der Überschrift soll genau in das Raster passen ,
also im Stan dardfall ohne Skalierung exakt 24px betragen.
Die Zeilenhöhe eines Elements bezieht sich immer ni cht auf
die Größe seines Eltern-Element s, sondern auf die Größe des
Element s selbst. Hätte man an dieser Stelle wie oben den Wert
1.5 em für die Zeilen höhe genommen, so erhielte man insgesamt
die Zeilenhöhe 1,5 em x 2 = 3 em, also insgesamt 3 em x Größe
des body-Elements (font-base) = 3 em x 16px = 48px ~ 24px .
Und somit eine Zeilenhöhe, die dem Doppelten der gew ünschten Zeilenhöhe entspricht. In diesem Fall würden die meisten
Browser der Überschrift 48 px Platz einraumen, diese aber (da sie
ja nur 32px groß ist) in die Mitte setzen, wodurch der vertikale
Rhythmus nicht mehr gewährleistet wäre.
Um die Zeilenhöhe tur die Überschrift entsprechend dem
Rhythmus festzulegen, nutzt man die folgende simple Formel:

Es gibt viele Möglichkeiten, einen
Absatz zu gestalten. Jon Tan listet
in seinem Beitrag JO 12 Exam pies of
Paragraph Typography.. (http://
Jontangerlne. wmlsllat
typographylpl, linkcode 075)
einige davon.

Zeilenh6he des Elements = vertikale Einheit I Schriftgroße des
Elements
In unserem Fall ist die vertikale Einheit 24px, die Schriftgröße
der Überschrift 32 px. Die passende Zeilenhöhe für die Überschrift ist somit 0.75 em (24 px / 32 px = 0,75).

hl I
font-s1ze: 2ern:
l1ne-he l ght: 0,75ern:
}

Damit der vertikale Rhythmus im Dokumentfluss sowohl vor der
Überschrift als auch nach der Überschrift erhalten bleibt, setzt
man den vertikalen äußeren Abstand (margl n) von oben und von
unten auf den gleichen Wert wie se ine Zeilenhöhe. Dies ist die
typische Vorgehensweise, die auch für alle anderen Elemente
verwendet wird.

h1 I
f on t -size : 2ern:
l1ne-helght: O.75em:
rnargln: 0.75ern 0 0.75ern 0:

Beachten Sie, dass der äußere Abstand zwischen zwei aufeinanderfolgenden Elementen sich nicht
als Summe der beiden äußeren
Abstände ergibt. Stattdessen wird
das Maximum der beiden Werte
genommen. In diesem Fall wird
der äußere Abstand nie 1.5 em
sein, sondern immer 0.75 em.
Mehr dazu können Sie in Abschnitt 9.2.4 nachlesen.

}

3.2

Grundlagen der Webtypografie

I 1n

Absatzformatierung & Textgestaltung
1>I. .. . ....

;----I

..w dio l!l"'fIl'aIIo,ho Fr• • ob..,h BIo<h.otJ oM. Fbn. .....

~ für die

F"' ..... tiel\ll1ll ..... T~'ttIi ~ iI """",hiedomen Sinwiootn

...I"",Uirb n

,~u.!'

Ol_nrt u ....

_,..,m ..".,.,n F........ n .... dio

hi/('n/ärw<. die Spmclw:. tn der der Te:«

""rf,w. 111'. der

-1

-;;_ _

>I~UI du

Silb<">trreMWIg """'" oStr tlmbru"""",,,o.irhm ... der ~~I<U Sott ....... ci...
~.

&int ~bt ..-dntt~ !ltdt\lfWII ~l der G.. n ... ~ d~ fornuofl t n"...
m.s..r Rrlh o\n )wobll<r\um tI1r dIo usbl!r~ ti>os n u .. dar. ,,·rItt.
wor.~ Abo ...........moa Wort.rn odor Bl"''''abon ~ ~

~5urne ....iKhonWolftern in eowm.:<nT... , ~ SroCl dont.1II und I'iif
<!Deo !i"1<1lm!lI~<" Gr~""""''''!L'
1'1ortt"""~"""'~t tlk dotmtinf.oo. bn w . b ... ..,., da . tdio
freiräume ....iKhon WOrt. tn in """",KoDT... , ~ ~'011 dlW01 ... und für

ow..a..........,

.u... slol<lom.iflV . GI'"""",'00'81. P"" ProbIet. k>tohtjodo<h doriQ. das>

Abbildung 3.36 ..
Nach der Ausrichtung der ü berschrift sitzt der Text plötzlich auf

btI ~cIn .. to. """'~t. moim". r«htet f1IottctTIInd . ,""hf.
lltiJ>.!Jto "itJ;., Fbtt.rwu .... 'T..a WlfIIlliI5. . . . -... ....,"' 1It,
Zdlrll\lllbrt.do 1Wd19do:< dO: 5iJk1llr<_
lhofloiDcl.

-

dem richtigen Platz.

Um die Überschrift ein wenig eleganter darzustellen. wird das
Am persand -Zei chen (&) ansprechend gestaltet. Außerdem kann
man den äußeren Abstand verdoppeln (2 x 0.75 em = 1.5 em),
um die Überschrift st arker zur Gelt ung kommen zu lassen . Beachten Sie, dass die Verdoppel ung des äu ßeren Abstand s jeweils eine
ve rtikale Einheit über und unter der Zei le einfügt.
h1 I

marg1 n: 1.5em 0 1. 5em 0 :
}

/ * FOr die k.orrekte Darstellung benötigt der Internet
Expl o rer hasLayout: andernfalls wird die überschrift
abgese hn1tt en */
hl }

width: auto :
spa n. amp
font · fam1ly: "Goudy Old St yle ", " Palat1no
"Book. Anti qua ". ser1f:
f ont- style : it al ie :
f on t -size: 11 5'; :

178

3 Textgestaltung

M
•

f--Äbsat~fon71atie/'ullg

I

&...Iextgestaltung

ll~wt... "'" di! t)'pOgQehe rt•. ob Ach IIIocbioIZ oder FImonm
boNRr filr dif! r<lmlMimq~ THt~ ~ ... 'l'r$t.hieder>en Siruotiiontn
~bwInnIruL IJaur ~opirJ,m F.norm .... &
Ztiknlii ......... ~, ...... dH Tut ,'Ufai,t 111. .... Jokdwli<....... ....
~ol,.."""""'IOWle4er ~ ..... der~=SoA .....

""

Ein.~ ........... _hotd..- G,..,....n

n..

rtdu ..onn;ol ieru ...

DIeHr Iteil! oIn tlMN:rio:m... fiir dI. ~ ~ T=es dar. ".~.
~ Abttinde l"'iKbtrI "'ömm oder 8uchJl..ben m... zn.
tl'KbWf:!elI die LHhlrkott, da cl.. AQSIP ~ UIIlendlitdlithptle

... Abbildung }.}7
Durch zusatzliche außere
Abstande und die E~tzung des
Ampersand-Zelchens kommt d ie
Überschrift starker zur Gel tung.

Sprilrv <nIt'IIe'II_
. nAn~naa llbönt ~"'r filr drn EimaU im Wtb ~ ... in. .... t . die
Frwiriumo ........ n \\"iittom im a-unI .... T~I p.;m voll cbn...... ...d /i'w
tinoon Ilri<l~n C....nrm -wt.'

11

Abstä nde zwischen Textelementen einfügen
Eine lei cht erkennbare Textgliederung wird dem layout durch

die vertikale n Abstände zwischen den Textelementen verliehen.
Die Schriftgröße von 16px wi rd vom body-Element vererbt. Die
Zeilenhöhe wurde schon festgelegt. Es bleibt also nur übrig, den
äußeren Abstand anzugeben. Dieser ent spricht natürlich dem
vertikalen Rhythmus, sol l also 24 px bet rdgen, also genau das 1,5Fache seiner Schriftgröße.
flcontent p {
margln: 1.5em 0 1.5em 0:

I

----_
. _---_
....
_--_
--------_
..
----_
_
....
...-_
__........,- - __
.
._-."-_.....-------_
_
_--_
...
_ -. .......__ .... _-_.
_--_--....
-___-_
.... .,__.... _-_
. .. ..
___ ----_
_.....__......._.___..
_---_
Absatuormatierung & TUlgnlallung

....

..

....

........
...

_ _ _ ft . . . . . _

b.htJltt> .. ~

,.,.,_

....

.-

,-

.........,_........... .....
.....
................
...
,.....,
.
...

....
.....
.......
..........
-~"--'
.....
....
...
...
.... ....

..........
----_...........

,-

Z.,,,,n,~,,,,

t:........:. !,.~=--~ö:'
...
~-_

~

---_
_---...-_-_
_--_---_._---.._-_

... Abbildung 3.38

.......

AuBere Abstande zwischen Absä tzen erzeugen eine Gliederu ng
und verbessern die Lesbarkeit des
Textes.

.... ...

Ähnliche Deklarationen für geordnete und ungeordnete Listen,
Zitate und andere Elemente sind ebenfalls notwendig, um den
vertikalen Rhythmus beizubehalt en.

3.2

Grundlagen der Webtypografie

179

D

Die Sidebar entsprechend dem Rhythmu s gestalten
und platzieren

Wäh rend der linke Content-Bereich schon ordentlich aussieht, ist
dies bei der rechten Sidebar noch nicht der Fall. Daher legt man
wie oben zuerst die Schriftgröße der Überschriften und Fli eßtexte
in dieser Spa lte fest. Auch die Sidebar wird von oben nach unten
abgearbeitet: Zun ächst muss der IIs1debar-Container passend
platziert werden.
Nehmen wir an, dass die Schriftgröße im Fließtext 14 px betragen solL Die Schriftgröße de s body-Elements ist 16 px; in relativen
Einheiten ist der Text in der rech t en Spalte dann O.875em groß
(14 px / 16 px = 0. 875). Die vert ikale Einh eit ist 24 px. Nach der
oberen Formel erhä lt man dann für die Zeilen höhe 24px / 14 px
= 1.714em.
IIs1debar {
padd1ng: 0: / * Default-Werte auf 0 setzen */
f ont- s1ze: O.875em:
line-height: 1. 714em;
marg1n: 1.714em 0 1.714em 0:

Abbildung ] .39 •
In der rechten Spalte stimmt der
vertikale Rhythmus nicht: Der
Sidebar-Container muss passend
platziert werden.

--_
_
..
_---- , . ,_._,_ __
_
----_..---_
..- c_
-.__
. '""-_
. . . . . . . .0-_._
. .__
. . . . _r_. . . ._. _ ...----_..............
.
-------.,.....-----. _-_..... _, ,--_
"'---"-"

AbS<lIz!onJlatierulIg & Texlgeslallullg

_ _ ... ,, _ _ ....... _ ......... _noun ....
........ !ir .. _ _ r -....... _ _
n

d l_ _

................... _,.-.........
_ _

~~~

......

...

...-.. . . ....................

......,...... _ _ . . . . - . ....>10 .. _

....

. . ..

.... ..

w.... _ _ _ _ _

1Iomwrl.........

..

.....

..-.

/rINIl:a.rMlCIW.

........

. . . _ ..... r -...

....

--~-_.

Bei der Angabe von ern-Werten
brauchen Sie Dezimalwerte nicht
zu vermeiden. Überraschenderweise haben die gängigen
Browser mit dem Runden von
em-Werten fast keine Probleme.

Damit der vertikale Rhythmus eingehalten werden kann, muss
man den si debilr-Container auf den rich tigen Platz setzen. Dieser könnte etwa nach vier Spalten erscheinen und somit optimal
zum linken Content-Berei ch passen.
Als Schriftgröße für die Sidebarwurde 14 px gewählt . Der Container soll den Abstand 24px x 4 = 96px vom oberen Rand des
Viewports haben. Bezieht man nun die ern-Einheit nur auf die
Sidebar, so ergibt dies 6.857 em (96 px / 14px = 6.857).
IJs1debar I
pos iti on: ab solute:
t op: 6. 857 em:

180

I

3 Textgestaltung

lJemerlw"gen

I

_

W"",~AIKt.lado ........... \ \ _ . . .

_tto.. _ _ _ . .

~

.......

\\·............ AMwodoo_w.".... . . .

.-

............... ::.a.onct..wos. 4io L.ooI.orIoo<t.
I"/1CI116''f'r"ekh"i6

.2

r<>nlloOtMnq

> .....,

...........

ZusamtmmjtU$!HW

"""'-........ .-.-/lIr..

~_W....

..... &..~e~. . IoII . . GnI.-n
dotr.............. IJI.. .. oItoiaM_Mtwiuor....

D

.. Abbi ldung 3.40

_
_ _ _ _~

diooLooborb;o ..... T...t .. dl..

AUe Textzeilen sitzen am richtigen
Platz.

Übersc hrift en in der Sid ebar ges talten und mit
Abstä nd en versehen

Nehmen wir nun an, dass die h2-Überschriften in der Sidebar
22 px groß sein sollen. Die Schriftgröße des Eltem-Elements (Sidebar-Container) ist 14 px = 1 em. Somit ist die relative Schriftgröße
der h2-Elemente 1.571 em (22 px / 14 px = 1.571). Die vertikale
Einheit ist 24px. Nach der oberen Formel ergibt dies eine Zeilenhöhe von 1.0909 em (24 px / 22 px = 1.0909). Dies soll auch der
Wert für die vertikalen äußeren Abstände sein.
IJs1debar hZ I

f on t -sfze: 1.S7em:
lfne-he1ght: l. 090gem;
margfn: 1.090gem 0 1.090gem 0:

__
_
_-_
-_
---_
_-_
_ _----

_
.........._._
__
_
........ _-"......
.... _
............. _
........ _
------_
....... ...
-_
-_. . . ._..,-. . ...-"'--. . . _"t_ . . _
---------.-.......-_.
__............
..-. _-_.
.....
--_
..
_,
-.... -......_
---_
. __
.._. _......
.....-.... - ... . .
....._---Absat,ifonnaticrung & !"t!xtgcslaltung

.-.....-

"'

_ _ _ _ . . . . . . . . . . . _ . 0 _ • ._ _

_

---_
..
_
.
------,-_
-----.._..- ....

........

. . 1-000......... _ , . . _ _ _

.................

..............
....

.. - -...... '

F

...

....

. _ _ _... _

...

--_
........._-. ....
---_
.. _---_.

---_..

~

.. Abbildung 3. 41
Die Oberschrift sitzt in der rechten Spalte zu tief. Schuld daran ist
der obere außere Abstand.

Die hZ-Überschrift sitzt in der rechten Spalte eine Zeite zu tief.
Schuld daran ist der obere äußere Abstand. Ihn kann man leicht
entfernen.
3.2

Grundlagen der Webtypografie

181

IJ s1debar h2 [
marg1n : 00 1.090gem 0:

I

-_--'---_---_-.. .'-_
-_
_._
_
_
_
-_
_
- .._ __ - ,-_-_
-------_
.-... - _---._-_._-....
---_.
&

A bsat7fonlZQ lj~ruug

T!2xtg~stQltulig

..................

_

....

..... _ _ T _ _ _ _ _

_ ... _ ..,...... ........... _ . .

- - - . __ ...

Abbildung 3.42 ...
Die erste Überschrift in der
rechten Spalte erscheint nun
wie gewünscht auf der fünften
Zeile von oben. Die Abstände bei
Absätzen und Ustenelem enten
st immen noch nicht ganz . Des halb sitzen auch weitere Überschri fte n noch falsch.

T. ~

... _ _ . .

_

,w.. ~

.....

_ _ ..... _ ...... c . - ... , .. _ _ _

.........

.....
.....
...
...... . . . . . . . . _ .... _ .. _m ....... ...... '"

...-

....
...........
......
...
....................
.......... ....
loII<oIt................

'-

---_
-_
... _-_ ...-. . . ..
...,------_
....
........... _...... .....----_
...
.......
...
..
"'
-----...............
_
..................
---_
_
...
-_
..
_--_
...
--_.._--

:____
&0.0""""""'""11
,......-a... __ __ _

~

..........

~

~

,

...............

.....

........... _,

EI

...

Textelemente in der Sidebar gestalten und mit
Ab ständen versehen

Die Zeilenhöhe bei Absätzen und Listen soll dem vertikalen
Rhythmus entsprechen und somi t 24 px betragen. Nach der
Definiti on des sldebar-Containers haben diese Elemente die
Schriftgröße 14 px. Somit müssen sie mi t einer Zeilenhöhe von
1.714 em (2 4 px 1 14px = 1.71 4) versehen werden. Also müssen
die vertikalen äußeren Abstände den gleichen Wert haben.
l/s1debar p. I/sidebar 01
margin: 1. 714286em 0 1.714 286em 0;
11

1 * L1stene1emente elnrQcken
margin·1eft: 3em:

-_
_.....-..

,- --.

*1

Absaujormo/ien.Ulg & Tex/ges/o ltung

....... . _....

,-'"-......,.. .....--. -..
____ __ .... ,' ... '...... w"' _ _ _
_d _ _ .. ' _ _ _ . _ .....

---,...---........._-_......_..... ....
_

.... _

. . . . . . Tm . ..._

...... _

..

__ ..,_"' ...,"'.--.TH_
,
.... _

-... .................... _""...---_
--- ......_..___...

.-_---------..- .....
-.......
-_ --.........

....

--.._

----~

..-...,

...

Abbil dung 3.43 ...
Keines der Elemente wird durch
eine Trennlinie des Rast ers du rchgestrichen. Alle Elemente si tzen
auf dem richtigen Platz.
182

3 Textgestaltung

----<
---_
_
_.... . . _---_
......_
......
...--_
. ..----_
_---_ _........... "'---"'--.
_ ''' _ _H''' __

''''jH~'''_ ''' -' .

...... .........
......

_ _ _ ... .. _To" ....................... ...

... - . ...... _ _. _ _ _ n-...... ....-.
_ _ o-.._y.. _
.._ _ ..

..... "...........

... ......... _...- ...

11

I

Typografisc he Detail s ausnutzen

Die Schönheit der Textgestaltung liegt in der Aufmerksamkeit des
Designers für kleine typografische Details. Um Inhalte origineller
wirken zu lassen, kann man zahlreiche Techniken aus der klassischen Typografie anwenden . So kann man etwa mit wenigen
CSS-Angaben mehr Spannung in den Text bringen. beispielsweise
durch einen eleganten Leitbuchstaben. Dafür wird der erste
Buchstabe des Textes mittels <spa n class· " fi rst- l etter ") H<1
span ) ausgezeichnet und mit CSS gestal tet .

Mehr über die Eigenschaften negativer .luSerer Abstande können
Sie Im Beitrag »The positive side
of negative marginSc (http://
www.search-chls.comll001/08/
011t ~ -posltlve-slde-of-negatlve·
mag/ns!. linkcode 076) nachlesen.

. f1r st - letter I
colo r: 11333:
f ont: 8em/O.75em T1mes . ser 1f. Georg1a;
fl oat: left:
d1 splay: 1n11n e:
width: auto:
margin: 0 O.03em 0 -B. 48%:
1* Ei n Prozen twert 1st hier notwendig. da de r I nter net Expl orer negative margl ns fal sc h interpret1ert.
Zu Detail s sfehe Ouellcode auf de r DVO */

I

--_
-_- ..._
__....._-_
_-.. --_._--_------_
'----_-. .
--- _-_
.....

....

-----_...

_ _ _ w_

----_
......... ...
......... ......
-~~_

__
__._- ......... --------------_
,_
------. __
_---_
._- ....-.
_-_..... _-_--- ----_
-_.._------.......

....
...... ..
....-... ....

~

.............
........ .. ...

......

.. Abbildung J.44
leitbuchstabe: groB , dil:k und
ungewöhllch far moderne Seitenlayouts

'

Zusätzlich ka nn man das im linken Co ntent-Btock auftret ende
Zitat stärker betonen, etwa indem man es mit einem negativen
äußeren Absta nd nach links außerhalb des Blocks zieht.
Dcontent .quote I
marg1n-left: -2.Bem:
f an t- style: ftal f c :

Der Conten t-Bereich ist 35 em groß. die Verschiebung nach
rechts macht also 8% von 35 em. das heißt = 0,08 x 35 em =
2.8 em aus .
J.2

Grundlagen der Webtypografie

I

183

Abbildung 3.45 •
Te:otgestaltung mit einem leltbuchstaben und einem aus dem
Conten- Block herausragenden
Zitat

_- ___
_A_
.
.
.
_
.
___
.
.
_
__
--. . . . ._T
.... ..
---_
""'
-----_
---..._. ..
---_
_----_.
-_
__-_-_
_ _---.-..AbsulYJormuticrung & Tcxtgcstultl.lllg

_ _-.....
___
n_-..
-·_·'
_
.
.
.
.
.
.
.
--.
.
.
M...'_"_'''M'''
-_..............._ _...,... --''__...., ........
_-,
._-_.
-_----.
.................. .........
,., ............
_
...........
... '-......
...--...-..... _ __

-..o c_

-..,

.--. .......... .....,......,.--,....... " ........
" ... " fIb_
_~

~_

.

...

_ _ _ _ • ..._,... _

...... _ .... rr
~

...,.....................
_.... ... ...

......

...........

Im

_

_ ----......
..-..."-

w_ _ ._

..........._ ....
......... ....

..... _ _ _

'""'"'.....

w_ _ _ ........ _ _
~

--_
_-_
._-_

_-........ .
....
......
.._--....-"'
.... ...--_
2"",.. ",rrV<w~"lI

Raster entfernen

Schli eßlic h entfernt man das am Anfang eingefügte Raster. _
Abbildung 3.46 •
Eine saubere Te:otgestaltung, die
über einen vertikalen Rhythmus
verfugt.

__
-_
_
_
_---__ __
--_
_-----__- ..__--_ _-_
__..._--_
__ _-_...
,--- ___
.
----,_-- -

.--_,.,
... . . . _..... _.
.
.
.
--·
.............. __
.. . .......
M..--.y-...-.. .....--.
.....--

Absatl'jormulicn.ng & Tcxtgcstalluny

.... . . _,.,....................
__
.......... _To_ ... _
........
.................
...
_ _ .. _1>.,, _ _
..-..--",
. ...._ _.......__
~

_ . _~- .

.......

.

.... ..

........... _"",-""'_ ....
"
, ; . - __
... ""'.........
.....,..tto
...... _ _ ...
...
..........

Es gibt mehrere Werlae'lle zur
Erzeugung des ver tikalen Rhythmus. Unter anderem sind der
Basel/ne Rhythm Ca!culator (http://
top/un ky.com/ba se Ilne-rhythm ca!culatorl, LInkeode 077), C55
with vertical rhythm (hu p:!1
drewis h. comltools/Vert/eal-rhyt hm,
LInkeode 07B ) und C55 Typography
EM Calculator (http://www.jame5whitta ker. com/bloglartlde/em· based-Iayouts- ver (je aI-r Ir; th m-ealcularor!, LInkeode 079) hilfreich.

184

3 Textgestaltung

---_
-----. _-------""'....- . ...-..---",
... _._
..
----_
... _-----_
..
..........-.......

...

.--

....

Ein wesentli ches Problem beim Umgang mit dem vertikalen
Rhythmu s stellen vertikale innere Abstände (pad dl ng) und Rahmen (border) dar. In der Regel versucht man, vertika le innere
Abstände bei solc hen Layouts zu vermeiden, da sie schon durch
die Zeilen höhe und äuße re Abständ e ausreichend definiert sind.
Bei Rahmen ist es schwieriger. Grundsätzlich gibt es zwei
Mögl ichkeiten, um den vertikalen Rhythmus mit dem Ei nsatz
von Rahmen zu kombinieren. Wenn etwa ein Rah men oben und
unten eingefügt wird (1 px + 1 px = 2 px), muss man - um den
Rhythmu s beizubehalten - zuerst 2px in em-Werte umwandeln
und dann entweder die Zeilenhöhe des Textelement s um diesen
em-Wert verringern oder die Zeilen höhe vergrößern und passend
anordnen. Wie genau di es realisiert wird, können Sie in dem Artikel »Compose to a Ve rtica l Rhythm « (h ttp://24 waY5.orgt2006/
compose-to-a-vertical-rhythm, Li/Jkcode 080) nachlesen.

3.2.5
Schriftart
Die Auswahl einer visuell ansprechenden, lesefreundlichen und
zum Gesamtlayout passenden Schriftart ist eine der wichtigsten
Fragen, mit denen es Webautoren bei der Sei tengestaltung zu
tun haben. Die gewählten Schriftarten sollen einen Webauftritt
begleiten und ergänzen, ohne selbständig heNorzut reten und
einen Akzent auf die eigene Gesta lt zu setzen.
Dabei haben Designer nur eine Handvoll von Möglichkeiten,
die ihnen bei der Schriftauswahl zur Verfügung stehen. Um eine
plattformübergreifende Textdarstellung zu ermöglichen, müssen
sich Webentwickler - zumindest für die Gestaltung von Fließtexten - mit den vorinstallierten Sch riftschnitten in Windows-PC
und MaC-Systemen begnügen. Schließlich kann man nicht davon
ausgehen, dass eine Schrifta rt, die durch ein Betriebssystem nicht
mitgeliefert wird, auf dem PC des Seitenbesuchers vorhanden ist.
Sind die vom Webdesigner vorgegebenen Schriftarten Frutiger,
Verdana, Arial, Helveti ca beim Benutzer nicht installiert. so verwendet der Browser eine Standard schrift. was die lesbarkeit der
Texte stark beeinträchtigten kann.
In solchen Fällen ist es sinnvoll, dem Browser immer wenigstens den Typ der Sch riftart (generische Schriftfamilie) alterna tiv
mitzuteilen. So wäre font: 1.2em Frut iger. Verdana . Arial.
Hel vet 1ca. s cl ns -se rl f : hier angebracht, da mit zumi ndest eine
serifenlose Schrift verwendet wird.
Typische Schri ftkombinationen sind:
.. Arial. Helvetica, sans-serH
.. limes New Roman. limes. serif
.. Courier New. Courie r, mono
.. Georgia. limes New Roman. Times. se rff
.. Verda na. Arial. Helvet1ca, sans-ser1 f
.. Geneva. Arial, Helvetica, sans-serif
Möchten Sie also eine vernünftige Kontrolle über die Darstellung erzielen, so führt kein Weg an standard mäßig verwendeten
Schriften vorbei.
Serifen, Sans-Serifen, Monospace I Bei der Auswahl der
Schri ften unterscheiden Webdesigner im Allgemeinen zwischen
drei Schriftarten - Serifen (roman fonts), also Schri ft sätzen mi t
geschwungenen linien, die einen Buchstabenstrich am Ende
abschließen, Sans-Serifen (grotesque, gothic fonts), die keine
Serifen aufweisen, und nichtproportionalen Schriften (monospace
fonts). Diese Typen werden in Websei ten meistens miteinander
kombiniert und zu unterschiedlichen Zwecken eingesetz t.

3.2

I

[slFRJ
Mit Sralable Inman Flash Replarement (sIFR) lassen sich beliebige
Schriftarten in ein Sei tenlayou t
einfügen.

grafik
grafik
... Abbildung 3.47
Serifenschrift Georgia und serifenlose Trebuc het MS in Großaufnahme

Serifen und Sans-Serifen
in der Praxis
Serifef1'!ichnitte eignen sich besser für lauftelrte, Sans-Serifen
dagegen für Überschriften. Dies
ist eine klassische Faustregel aus
dem Prinldeslgn.

Grundlagen der Webtypografie

I

18 5

[Anti alia s ingJ
Unter Antialiasing lIeilteh t die
digitale Glättung lIon Buchstabenenden , um einer Schrift bessere
lesbarlceit zu lIerieihen.

Laut einer bewährten typografischen Tradition eignen sich Se rifenschnitte wie Times New Roman oder Georgia grun dsätzlich
besser fur Fließtex te, während Sans-Serifen wie Verdana, Trebuchet MS und Arial eher für den Einsatz in Überschriften zu
empfehlen sind.
Grund dafür ist, dass das Auge beim Wandern durch große
Textblöcke durch Serifen gelei tet wird, sodass Übergänge zwischen einzelnen Buchstaben und Wörtern geglättet werden.
Abgerundete Formen lassen eindeutige Wortbilder entstehen.
Zusätzliche Kurven und Linien betonen die Form der Buchstaben.
Tatsächlich werden Serifenschri ften in der Regel so entworfen.
dass eine gute Lesbarkeit insbesondere bei kleinen Schri ftgrößen
- also vorwiegend im Lauftext - gewährleistet wird. Sans-Serifen
dagegen beeindrucken durch ihre Klarheit bei größeren Schriftgrößen. Im Screendesign spielen Sans-Seri fen eine besonders
w ichtige Rolle , da sie auf einem Monitor im Allgemeinen sauberer, klarer und lesefreundlicher als Serifen dargestellt werden.
Geneva, Georgia, einige Lucida-Schnitte, Monaco, Tahorna,
Trebuchet und Verdana wurden speziell fur das Screendesign
entworfen und bieten neben limes New Roman ab Sch riftgröße
26px recht beeindruckende Ergebnisse. Insbesondere Arial, Trebuchet, Georgia, Times New Roman und Lucida eignen sich für
den Einsatz in Überschriften. Beispiele sehen Sie in Abbildung
3.48 sowie Abbildung 3.49.

Web 2.0: Wie neu ist das neue Web?
'''0 !'"
Web 2.0: Wie neu ist das neue Web?

'"'

. ~~ J'"

Web 2.0: Wie neu Ist das neue Web?

----

Web 2.0: Wie neu ist das neue Web?

Ab bil d ung ] .48 .Eine Überschrift, gestaltet anhand
lIon Standardschriften wie Times
New Roman, Georgia , Trebuchet
MS, Lucida Sans Uni code, Arial
und Tahoma.

Web 2.0: Wie neu ist das neue Web?

Web 2.0: Wle neu Ist das neue Web?

Als Schriftarten für Fließtexte kommen bei einer plattformübergreifenden Seitengestaltung Arial. Georgia. Lucida-Schnitte,
Tahoma, Times New Roman und Verdana am häufigsten vor. Ihre
Laufweiten und Zei lenabstände müssen einzeln angepasst werden .
18 6

I

3 Textgestaltung

IAH O"'''' '11»- UllEII HClHE: '.~

.....

~m

........ _""' ....

_CII"" ...__ __

_._l"".....

_ ',' "'''''.--uoj ..... T_•• \J'O'\ • •d " .....' ....
_""*' Ol-'O ....
_
.....
_ _ ""(lO"1...ImQ _ •• .........
_
_ ... .a....... n"""" Toot ... _ .... "".......... _
~ "'

~ " ....,n

~_

...

~

~

~- --""""

...

__-,- . .......,. _.,_.....
__. .-.-.. _--""-_
. .......- ..
...

AJ!IiI.l, ' JjlA.l(JU: /lIII)ttE. I .,~

......... ..

..... "' . . f _
......
ioI "'... ' ,... _ _ _

-...-..

_.Z-.Jk90

t;(ORGIA,

.

"',
_lo c.. _

s...:/OP.~"'

'(pi., ZflI EN~OIl(

0;. u ~~t;""Jo ,""". 1.0:'"

f ll .. _ _ _

f .. .. _
~

__

_ .. .....,_
I ...... ... _ ..... _
. _

,

••" .....M ... ...' . _ ...

.-..kl.o ~ "'u,,,

.... _ _

~ ,~ .,

"'''''''''"'''',M
.d''''__
___i''''''<Iot
...
_ _'''''~
5<I\ .....,
1I,.~~oJ,

..n.._..-Io
"' _Foo____
_

.. _

~

(_ . . _ I . . . l . .....

a... __

~

F_ _ _ • _ _

. .... Uotoi ...

'-.

n._."'"'

~ _ ,, 1oodo!I.

. ...... T...

~

oer!t.o

~

....

""""---".\I-- "" ~'-­
- ~<.I _ ~
"1"'.
"" , , _
.._Wl[III1/)H[:
....u. .._,'iJ_
ob..". _

V( QDAIIA.

...

_,-,

... _

-

·---1
. . -. . _......

n ..' ....... __ "" ... f .....' _ _

' ..... _

... d ...

,-,,;-<_"",.... ..... ,'...... • .....
..........-

.. ,_
'<f<t.. ' ;# ~ . n "' . . ...- . . :_..;,0 :-..19. ......
..T... _ f.... h' - - . . " " , - - . _ . " . .
~

~ ~_

... . .. ,,_

... &>tl .....

ltKlOA SA~s U'I ICOC[ , I,po.. U Il EH ~Of/E '.SSoIm

'.S''''

"'<Ii","""'I_
(>1,..,. Il10<'''1(<0
<-l-f
l_
_
.><i<d'"

_ _ _ _ S.'_ ( I oio . ..... r.""oI..borW:. \Iob .. ~
_ <~ J.. ... ..,., ... u . .... odoo_O_ l a "",\.loooI ol.

""•

I

1,J~m
........ f . ........~II .. l. _ _ fl_.", •
T ..... _
_ ..

n MES II EW AOWdl "po.. l N ENH l)ttf,

.. ol.<""

,~," ..- .s.

000 "-."""•..,.....,,,,,,... ,,_ ....... ,,"' ...... _
" " ...... nbt.... l>r d. , - . . _ _ • " " .. _

.... '" ' "

_ " -,on...... """"' .... ... _ "":;'" ,1>1' ••" ....""""

...._ _ .., ....."""'..._0< __ '''' 0l.0<I 'M. LoI.' "',
e"..."

' 0"....

h ...........

r... ,,,,,,, _ .............• _

If; $<.. 11<11" "" ""

'''._h......... " ~"_._" .'

""';-""""""'''''''''' ''tf_."~

Quelltexte dagegen werden meistens mithil fe dickteng/e/cher
(nichtproportionaler) Schriften (Courier. Courier New, Letter
Ghoti c) dargestellt. die im Gegensatz zu anderen Schriftarten
eine feste Zeichenbreite besitzen. Bekannt als typische Schreibmaschinenschriften, dienen sie im Web häufig zu r Formatierung
von Listings und E-Mail- Inhalten.
Wlndows

MI.(

Book Antiqua
Georgia
Palatino linotype
limes New Roman

Georgla
New York
Palatino
limes

Arlal
lucida Sans Unicode
MS Sam Serif
lahoma
Trebucne t MS
Verdana

Charcoal
Chicago
Geneva
Gill $ans
Helvellca
luclda Grande
lrebuchet MS
Verdana

Courier New

Courier
Monaco

... Abbildung 3.49
Gute lesbarkeit Im FlieBte:d lässt
sich mit sechs Standardschriften
realisieren .

.. Tabelle 3.2
StandardschrIften der verschie~
denen Betriebssysteme

Generische Schriftfamilien I Möchten Sie ein Textelement in
einer Serifenschrift anzeigen lassen, die auf dem Rechner des
Anwenders installiert ist. ohne diese konkret vorzugeben, so
können Sie bei CSS-Formatierung generische Schriftfamilien
verwenden. Diese lassen Browser eine Oefault-Schrift der entsprechenden Art aus den vorhandenen Schriften des Anwenders
automatisch auswählen und dienen als ein Ersatzmechanismus .
3 .2

[FalibackJ
Fallback meint das Umschalten
des Browsers auf (manuell oder
automatisch definierte) Defaultelnsteßungen , falls eine vorgegebene Darstellung nicht mq:lic h ist
(etwa wenn eine Schriftart fehlt) ,
Die Werte kOnnen vom Designer
zusatzllch definiert werden .

Grundlagen der Webtypografie

187

Insgesam t stehen Webautoren vier generische Schriftfam ilien zu r
Verfügung, und Zl/l/ar
.. seri f - Schriften mi t Serifen
.. sans- se r 1 f - serifenlose Sch riften
.. cursive- Schreibschriften
.. monospace - nichtproport ionale Schriften
Diese können über die (SS- Eigenschaften f ont- f am11y und fant
angegeben werden, zum Beispiel durch den p-Selektor:

P I
fon t - f amlly: Georg 1a. Ti mes New Roman . T1mes . serif :

I
Als Primärschrift für die Darstellung eines Absatzes wird Georgia benutz t, die Zl/l/ei te Wahl ist l imes New Roman, die dritte
limes. Sollte keine dieser Schrifta rten vorinsta lliert sein, wi rd der
Browser autom atisch die erste verfügbare Default-Serifenschrift
(seri f) verwenden.
Generische Schriftfamil ien kann man auch verwenden, um im
schlimmsten Fall ein Ausweichen auf eine unerwu nsch te Schrift zu
ve rmeiden. Deshalb darf eine entsprechende generische Angabe
in den font-fami 1y- und font-E igenschaften nie fehlen.

3.2 .6

TIPP

Verweise zu unterstreichen, ist
eine bewahrte Tradition Im Web.
Ein Nutzer wird mit Unterstreichungen besser zurechtkommen
als ohne sie.

188

I

3 Textgestaltung

link-Gestaltung

Damit der Sei ten besucher sich auch beim Navigieren von
einer Seite zur anderen wohl fühlt, wird beim Webdesign der
Gestaltung der Li nks eine besondere Bedeut ung geschenkt. Ist
ei n Webauft ri tt ben utzerfreundfich, so müssen Sei t en besucher
sich nich t lange übe rlegen, was die einzelnen Hervorheb ungen
bedeuten, welche Inhalte angekfickt werden können und was
von jedem Krick zu erwarten ist.
Um dies zu erreichen, empfiehl t es sich, sowohl int erne als
auch extern e Links mit einem deutlichen Kontrast zu anderen
Textelementen grafisch (farbig) heNorz uheben und mit Unterst richen zu versehen. Zu r besseren Unterscheidung können Verweise
zusätzlich mit unaufdringlichen Hintergrundfarben versehen werden.
Da Webanker t radit ionell mit Unterst richen gestalt et we rden,
sorgt ein unterstriche ner Text ohne Referenz für Verwirrung, da
Seitenbesucher in ihrem Verst ändnis der Seitenhierarchie irregefUhr t werden. Somit sollt en Unt erstriche- wenn überhaupt - nu r
bei Verweisen benu tzt werden.
Ein weiterer wesentlicher Aspekt ist die vis uelle Unterscheidung Zl/l/ischen ve rschiedenen Link-Zuständen. Bereits besuchte

I

sowie noch nicht besuchte links saU ten grafi sch unt erschiedlich
hervortreten und dem Anwender somit einen visuellen Leitfaden
vorgeben.
In CSS dienen Pseudoklassen dazu, aktive HTML- Elemente zu
deklarieren und zu definieren . Aktiv bedeutet in diesem Zusammenhang, dass keine konkreten Elemente oder Klassen gemeint
sind, sondern Eigenschaften, die man einem speziellen HTM l Element nicht durch seine übliche Spezifika t ion vorschreiben
kann. Pseudoklassen werden von Browsern wie Klassen behandelt.
Eine kurze Übersicht :
... : 1f nk
link zu noch nicht besuchten Seiten
... :v1sited
Link zu bereit s besucht en Seiten
...

Verweisgest&ltung
Eine visuelle Unterscheidung
von Verweisen wird in CSS
durch die Pseudoklassen a: 11 nk,
a:~1 s lt ea . a ;hO~ e r . a:a c t1~e ,

a: fo cus und deren Kombinat ion
(zum Beispiel a: ~ 1S1led: ho ~e r)
realisiert.

: hover

link, auf den mit dem Mauszeiger gezeigt wird
... :act1ve
Unk, der ge rade angeklickt ist
...

: foe us

Unk, der den Fokus besitzt (z. B. über die Tab-Taste)
.. Dlls Beste IIUS plxelgraphlx 2 006
.. Das Be ste au s

PI X el.ll~ hi X

2 0 06

.:Iink

. :Iink

I_ deieIe r UrTen! lest I a:focus

a:hover

E'Des Beste "us plxelqrllphlx 2 006)

a:active. a:focus

.. Des Beste au s plxel.llrilphlx 2 006

a:visited

•• Du Beste aus pi xei;a phix 2 0 0 6

a:visited: hover

)I

delr" tyrr,nlltst

J5

a:hover

• Abbildun g3 .51
Innere Absta.nde werden Mulig großzügig
gewählt. Im Beispiel Crazyegg.com wird auch
die Semantik In die Gestaltung einbezogen :
Grün steht für Behalten. Ro t fü r l öschen .

• Abbildun g 3.50
link-Zust ände (Quelle: httpilwww.pixelgraphix.de)

In diesem Sinne werden bereits besuchte links entsprechend ihrer
.. Passivität« und .. Gebraucht heit. nicht so bun t wie die .. Hauptlinks. gestaltet. Manchmal zwar in der gleichen Farbe, um die
visuellen Beziehungen zwischen links zu erzwingen. jedoch mit
dunklen oder hellen Farbabstuf ungen. 50 wirkt die Kombination .. dunkelgrün - hellgrün_ besser als .. rot - blau_ für .. activevisited_-Relationen. Die Faust regel lautet dabei : Ob besucht oder
nicht, ein link muss immer erkennbar sein.
Beim Darüberfahren mit der Maus kann sowoh l eine passive
als auch eine aktive Unk-Gestaltung verwendet werden. Dies
hängt von dem Effekt und der At mosphäre ab, die der Webde3.Z

Grundlagen der Webtypografie

I

189

TIPP
Wie man eine harmonische
Farbkombination für TeKtelemente auswählt und diese umsetzt, erfah ren Sie in Kapitel 4,
»Farbgestalt ung Web 2.00:.

Abbildung

3.5~

•

Inversion bei Flichcom: Beim
Daruberfahren mit dem Mauszeiger wird Blau auf Weiß durch
Weiß auf Blau ersetzt.

signer erzielen möchte, Soll primär eine ruhige, klare Stimmung
erzeugt werden, so genügt es häufig, die Unterstriche auszulassen oder sie zu verändern (z. B. gerade Linien durch gestri chelte
Linien zu ersetzen) und die Farbe des Verweises durch eine verwandte (dunkel/he rr ~Varianten), besser aber durch eine passive
Kontrastfarbe zu ersetzen . Die Wahl der Farbe für die Links ist in
Abhängigkeit von den Hintergrundfarben zu treffen.
Explor. Fllckr
B:'OIWiI h:arutng pl1Ol:01
,nareCl over \tle laS( 1 (llI'{?

Sollen Seiten besuch er dagegen durch lebendigkeit der Seite
und das Zusammenspiel der Farben beeindruckt werden, so
sind bunte - aber immer noch sorgfältig gewählte - Kontraste
zu empfehlen . Häufig bedienen sich Webentwickler dabei der
Inversion bzw. der Umkehrung der Farben. Die Hintergrundfarbe
des passiven Verweises wird zur Schriftfarbe des Verwei ses, und
seine bisherige (oder auch eine alternat ive) Farbe wird zur Hintergru ndfarbe.
Abbildung 3-53 •

Screenz.de arbeitet mit Hintergrundfarben. Der Effekt ist sehr
angenehm und lesefreundlich.

-L

12 Kommtntare »

1-'"

12

KO~/12;e~tare >

I

Dabei tendieren Webdesigner sowohl bei der Inversion als auch
bei der Gestaltung von links mithilfe von Hintergrundfarben
dazu. innere Abstände (padd1ng) sehr großzügig zu wählen und
Links dadurch stärker zur Geltung kommen zu lassen. 1 bis 3 px
sind in solchen Fällen üblich, wobei die Hintergrundfarbe beim
Darüberfahren verändert wird, aber dennoch passiv und neutral
bleibt. Dies kommt bei Navigationsmenüs am stärksten zum Tra-

TIPP
Standardkonformes Webdesign
erfordert die Deklaration von
Verweisen in der folgenden Reihenfolge:
a,lInl<lI
a:vl s lted l l

gen. Ihre Gestaltung wi rd in Kapitel 5. _Navigation .. . detailliert
erläutert.
Es ist darüber hinaus wi chtig, dass sämtliche Anker von anderen Textelementen lei cht zu unterscheiden sind. Grundlegend
dafür ist eine klare Unterscheidung zwischen den gewählten link-

a,h overll
a,a cllv etJ
Mehr daz u linden Sie in dem
Beitrag »Unk Specify.. (http ://

Farben und den Hintergrundfarben sowie den übrigen Farben, in
denen die sonstigen Seiteninhalte gestaltet sind.
ac tive - und f oc us-Zustände werden wegen ihrer Kurzlebigkeit - sie erscheinen nur beim Anklicken und Fok ussieren - nur

meyerweb. com/erlr/ess!
Iink-speclficlty.html, link·

selten explizit gestaltet; dennoch ist es wichtig. diese Zustände
von anderen Zuständen visuell zu trennen und sie entsprechend

code 081) von Eric Meyer.

190

I

3 Textgestaltung

zu gestalten. Schließlich tragen sie eine besondere Semantik und

I

spielen bei der Sei ten navigation eine wich t ige Rolle. In der Regel
verwendet man für a : ac t l ve und a: f ocus passive alt ernat ive
Farben, die auf der Sei te sonst nich t verwendet werden. A uch
der Einsatz von Hintergrund farben ist durchaus zu empfehlen.
Abschließend sei angemerkt, dass Verweise in einer kleinen
Schriftgröße nach Möglichkeit vermieden we rden soll ten. Um
dem Leser ein abgerundet es Ersche inungsbild anzubiet en. darf
sich di e Sch riftgröße im lauftext nicht von der Schri ftgröße der
Links - in allen Zuständen - un terscheiden. Auch die Inhal te der
Links müssen semant isch relevante In format ionen liefern. Texte
wie »Klicken Sie hier« oder »mehr« si nd dabei weniger sinnvoll
als genaue In format ionen über die Seiten. die sich hinter den
Verweisen verbergen.

3.2.7

. c::;::::Ji
Id HELP-Österreich
• Ab bildung ) .54
Oie Skalierung von Texten kan n
auc h durch zusi'l.tz liche CSS- und
JavaScript-Optionen direkt auf der
Seite angeboten werden . Manche
Seiten machen davon Gebrauch,
wie etwa Elnfdch-fuer.alle.de.

Typografi sc he Hierarc hie

Um die Dominanz wichtiger Textelemente hervorzuheben. variieren Designer in der Praxis vor allem die Sch riftgröße sowie die
Farbgestalt ung von Textb löcken . Das Ziel dabei ist, eine deutliche
typografische Hie rarche zu erreichen. Eine Überschrift ist etwa
mei stem größer und bunt er als der darauffolgende Bei t rag selbst.
Dies ist zwar du rchaus hilfreich und wirksam. aber manchmal
nicht notwendig.
Eine klare typografische Hiera rchie setzt insbesondere voraus,
dass Tex telemente unt erschiedlichen Gewichts sich leicht voneinander un t erschei den lassen. Dies kann etvlfa durch Farbe
geschehe n oder auch durch eine rein typografische Gestal t ung.
Bet rach ten Sie d as folgende Bei spiel :

Überschrift

ÜBERSCHRIFT

Untertitel kleinerer Größe

Untertitel kleinerer Grö ße

___

.....,.....,-_ ................. ..",...--_.
.. _ _ _ <i.oo .........

t.e.~_ . '"""

"ht .. bu .. _d .. ·_~_I;rt.

.. _ _ _ '-rlt..-..., ......

................................................-....-.

"",. .. _ _ <Ii< ...............

(1<~

....... _ _

... Abbildung ] .55
Eine Hierarchie benötigt keine
Auszeichnung mit Farbe. Manchmal genagt es, allein die typografische Darstellung zu variieren.

In bei den Fällen ist die Hierarchie sehr deutlich. Im linken Beispiel
wird dies durch die Sch riftgröße erreicht, im rechten zusätzlich
durch die typografische Auszeichnung. Wäre die Schriftgröße der
Überschrift im linken Beispiel deut lich kleiner. so wäre die alt ernat ive rech te Darstellung effekt iver. Eine Auszeichnung durch
Farbe ist hier nicht nötig.

3.2 .8

De ta ils mache n di e Typografi e a us

Es ist wich t ig zu verstehen. dass die effektive Wirkung de r Typografie nicht nur durch die Auswahl einer passenden Schriftfamilie und einer en t sprechenden visuellen Umgebung erreicht wi rd.
3.2

Au fmerksamkeit far kleinste typografi sche Details wird meistens als
Zeitveßchwendung typografischer
Puristen angesehen und deshalb
vemachlässigt. Wer jedoch viel
Wert auf seine Inhal te legt. Missveßtandnisse vermeiden will und
eine korrekte Sprache beachten
möchte, muss sicherstellen , dass
sein Text typografisch korrekt gestaltet ist.

Grundlagen der Webtypografie

191

h ' I {l"

-)() lt)" '"
.. Abbildung J .56
Kennen Sie diese Zeichen noch?
Sie tauchen im Web so gut wie
nie auf. Stattdessen nutzt man
den Apos troph oder Anführungsstriche, oder sie werden ganz
dlJSgelassen.

"Sag niemals nie"
'Sag niemals nie'
"Sag niemals nie"

Ei nen schönen, abgeru ndeten und w irku ngsvollen typografischen
Eindruck erzielt man du rch die sorgfäl t ige Aufmerksamkeit für
kleine typografi sche Details. Im dynamischen Web werden diese
Details jedoch häufig vernachlässigt. Eine Internetpräsenz, die
seriös erscheinen möch te, sollte jedoch nicht nur die inhaltliche,
sondern auch die typografische Korrekthei t der Text gestal t ung
sicherstellen.
Ein klassischer t ypografi scher Fehler ist etwa die identische
Darstellung des Bindestrich s (Hyphen), des Geviertstriehs (em
dash), des Hal bgeviertstri chs (en dash) und des Minus-Zeiche ns.
Diese Zeichen haben unt erschiedliche Bedeut ungen und sollten
auch in verschiedenen Kon tex ten verwenden werden.
De r Bindestri ch dient grundsätzlich dazu, Wörter zu gliedern,
die zusammengeschrieben zu unübersichtlich (et wa »TypografieSeminar. ) wären. Somi t wird er insbesondere von keinem leer-

.. Abbildung J.57
Das Zeichen über der Raute-Taste
(#t ) ist kein deutsc hes StandardAnführungszeichen (Gänsefüßchen). Auch das Zollzeichen auf
der Taste . 2. ist kein typografisch
korrektes An führungszeichen.

zeichen begleitet.
Der Gevi ertstrich (em dash) ist der lange Gedankenst rich, der
ebenfalls von keinen l eerzeichen begleitet wird, es sei denn, er
leitet eine Aussage ein.
De r Halbgeviertst ri ch ist halb so lang wie der Geviertst rich und
w ird insbesondere zu r Darstellung von Daten wie etwa Zeitspannen oder Preisspannen verwendet. Außerdem gilt er als kurzer

Der Beitrag ltThe Trouble With EM
. n EN (and Other Shady (ha·
racters). (http://www.a/istapart.
com/storieslemen/. linkcode 082)
bietet einen detaillierten Einblick
in häufige Fehler und Probleme
bei der Te)(tgestaltung mit typografisc hen Satzzeichen.
Tabelle J.3 "
Nur selten eingesetzte typografis che Zeichen

192

I

3 Te)(tgestaltung

Gedankenstrich und t rägt meistens die Bedeut ung, die in Fließtexten durch das M i nus-Zeichen repräsentiert wird.
Schließlich wird das Minuszeichen ausschließlich für arit hmeti sche Operationen verwendet . In gewöhnlichen Fließtexten
soll te es dagegen so gut wie nie auftreten .
Beachten Sie bitte, dass die Bedeutu ng der eben genannten
Ze ichen aufgrund regional er Unterschiede vari ieren kann.

•
•

Bnchrelbung

(X)HTMl- Code

deutsches öffnendes An führungszeichen

&bdquo ;

deutsches o;chließencies An führungszeichen

&](lquO :

englisches öffnendes Anführungszeichen

&/18 220 :

englisches schließendes Anführungszeichen

&08221 :

Apostroph (links)

&08216 :

Apostroph (rechts)

AD82!7 :

Auslassungszeichen (Ellipsis)

5he lllp:

Geviertstrich (em dash)

&l1dash :

Halbgeviert>trich (en dash)

&ndash :

Minus-Zeichen

&118 722 :

,

,

•
•
o

.. Tabelle 3.3
Nur sel ten eingesetzte typografischeZeichen (Forts.)

(X)HTML·Cod.
Multi pi ika. tions·Zeic hen

&t1mes;

Eszeu

&szllg;

Ampersand

&amp:

Grad·Zeichen

&deg:

Minuten-Zeichen

Sprille:

Sekunden-Zeichen

SPrllle:

Copyright-Zeichen

Scopy:

Trademark-Zeichen

&irade:

Euro-Zeichen

leu ro:

Weitere Zeichen können Sie in der HTMl-Zeichenreferenz auf der
Websi te von SElFHTML (http://de.seljhtml.org/html/referenz/
zeichen.htm, linkeode 083) nachschlagen.
3.2.9

Typog rafi sche Konsistenz

Ein einheitliches Bild einer Seite vermittelt Glaubwürdigkeit. Deshalb ist es w ichtig, bei sämtlichen Sei ten eines Webprojekts die
strukturelle Hierarchie von Textelementen aufrechtzuerhalten,
also etwa die Schriftgröße, die Abstände oder die Darstellung
ähnlicher Elemente identi sch zu gestalten.
Dies heißt nich t, dass alle Seiten haargenau aussehen sollen.
Visuelle Vielfal t gilt häufig als ein mächtiges Werkzeug, mit dem
man einzelnen Rubriken mehr Nachdruck verleihen kann. Es
bedeutet vielmehr, dass typografische Regeln und Sätze innerhalb einer Prä senz allgemeingültig sein sollen.

TiPP
Allgemeingültigkeit und Konsistenz sind nicht nur wichtig für
den typogr ... fischen Aufbau einer
Seite, sondern für den gesamten
Webauftritt

s.a.ct. ,,--,

Rooadabilito,r ,

3.2.10

Webtypo grafie und Barrierefreiheit

Eine be sondere Betrachtung verdient bei der Auseinandersetzung
mit Textgestaltung im Web 2.0 der Aspekt der Barrierefreiheit. Im
Web kommt die soziale Komponente in vielerlei Hinsich ten zum
Tragen. Ein Aspekt ist ein zugängliches, benutzerfreundliches und
barrierefreies Webdesign, auf dessen Grundsät ze in Kapi tel B,
• Barrierefreiheit und Usabillty., ausführlicher ei ngegangen wird.
Textgestaltung stellt eine der größten Quellen für Usability- und
Accessibility-Probleme dar.
Insbesondere die Auswahl der Farben sowie die Beziehungen
innerhalb der Texthierarchie gehören zu den meistdiskutierten
Problemen der barrierefreien Typografie.1 Probleme solcher Art
entstehen aufgrund einer möglichen Sehschwäche oder Blindheit
der Seitenbesucher. Diese sollen auf einer barriere freien Web·

Sl" ' ~
Font'~

vI

O r Iplcifv _gyr gyn ,

... Abbildung ) .SB
Auch die Auswahl der verwendeten Schriftart sowie die .Theme_
der Seite kann der Benutzer
manchmal selbst definieren. Auch
dies Ist mit (55 und JavaScript
möglich (Quelle: Mikeindustries.
com).

.Wm

1 P... trick J. lynch, S;r... h Horto n,
Style Guide: B...'lic De'§ign Prindple'§ for
( rutlng Web Sl te s_, V... le Unlverslty Pre'§s; 2nd edition (M.lrch 2002)

3.2

Grundlagen der Webtypografie

I

193

I

A

seite in der Lage sein, Texte beliebig zu skal ieren . Deshalb ist es
wich t ig, relat ive Schriftgrößen anstell er absol uter Größen zu ver-

cce 551 billty. Check liste

Möch ten Sie prüfen, inwiefern
Ihre Webseite die Grundsätze
der barrierefreien Textgestaltung
erfüllt, so können Sie die fol genden Punkte überprüfen, die
von Usabletype.com vorgeschlagen wurden.
.. lässt sich der Teet in allen
gängigen Browsern skalieren?
.. Falls Unks nicht unterstrichen
sind , gibt es eine Möglichkeit,
sie ohne Farbe zu identifizieren (zum Beispiel durch das
Schrlftgewicht)7
.. 51nd alle Bilder mit einem
alt-Attribut versehen?
.. Ist die Seite auch ohne Bilder
und Flash-Unterstützung lesbar genug, und gibt es einen
textlichen Ersatz für Bilder
(z. B. bei der dynamischen
Textersetzung)?

wenden und nach Mögl ichkei t die 5chriftskalierung dem Benutze r mittels C55 zu ermöglichen .
Ein Bild sollte in der Regel eine alternative Beschriftung (altAttribut)

<1mg src- ' tree.jpg ' w1dth- ' 10px ' he1ght- ' 10px '
al t-"E1 n Baum 1m Wa l d " I> ,
aufweisen, damit es auch von blinden Anwendern verstanden
w ird.
Seitenbesucher mit ei ner Sehschwäche oder Farbenblindheit
sollten in der lage sein, einen optimalen Kontrast zwischen Textund Hintergrundfarben einzustellen .
Von großer Bedeut ung ist auch ein strukturiertes Markup, das
nicht durch Tabellen, sondern durch C55-basi erte layouts realisiert wird. Gestalten Sie die Seitendarstellung mithilfe von CSSTechniken, so können Benutzer die Seite ihren Bedürfni ssen entsprechend anpassen.

_--

Gppl; MePl Gollwnbul g Ff'brlJory 2007
ho ...... OatIlonO

_

, ...

.,oro;>tr>;I
...................................

""'" our , .... _

._- ~

... r.bN..... .

___

_.<

.

_

"" _ _
...
."'_u, _'M><o<v, ...., "".....
~

t _ ... Stod ..... , ""

III .,""I_,~""""

~

_ " " , tt. _

... <011"" "' .. -.,._

)"bo","",,!.W;l,~~~IiIif ...... ,

IH' ......... _ . " . W

• Abbildung 3.59
Gleicher Inhalt , unterschiedliche
Darstellung. Übliches Design
(links) und Dar>tellu ng mit hohem
Kontrast. Der Anwender darf
selbst die Darstellung auswählen
(Quelle: 456bereastreet.com).

.,~

Bei der Hervorhebung von bestimmten TextsteIlen sollte der
Webdesigner sich bemühen, nicht nur visuelle, farbige Markierungen zu setzen, sondern TextsteIlen auch typografisch hervort reten zu rassen, beispielsweise durch einen fetten Schriftschnitt.
Schli eßlich sollte man bei der Wahl zwischen verschiedenen layouts immer möglichst flexible lösungen bevorzugen, da diese sich
leichter an die Bedürfn isse der Sei tenbesucher anpassen lassen.
ssen.

194

3 Textgestaltung

3.3

I

Neue Techniken der Webtypografie

Im Web 2.0 stehen Designern neue Möglichkeiten zur typografischen Webgestaltung zur Verfügung, welche die recht spärliche
Schrjftauswahl deutlich ervvei tern und bessere Ergebnisse in Aus-

sicht stellen. Zum Teil durch den Einsatz visueller Mitteln und
(55, zum Teil durch die von JavaScript gelie ferte Kontrolle von
Seitenelementen ist es möglich, beliebige textliche Inhalte dynamisch durch analoge visuelle Darstellungen zu ersetzen .
Drei gängige Techniken hierfür sind
.. Si mple Image Replacement,
.. Dynamit Image Replacement und
.. Dynamic Flash Replacement.
Diese Methoden ersetzen Texte jeweits durch manuell erzeugte
Bilder, automatisch generierte Abbildungen oder Flash-basierte
Textdarstellungen. Textersetzungstechniken arbeiten nach dem
gleichen Muster. Sie liefern alternative Darstellungen für Textinhal te, die angezeigt werden, falls der Rechner des Benutzers dies
erlaubt.
Alle drei Techniken funktionieren nach dem gleichen Prin zip:
Ist der Browser des Benutzers so eingestellt, dass Bilder bzw.
Flash-Filme angezeigt werden können, so werden die jeweiligen
Textel emente durch entsprechende grafische Elemente ersetzt
und angezeigt.
Sämtli che Schriftersetzungstechn iken weisen gemeinsame
Mängel auf. Zum einen lassen sich die durch sie erzeugten Sei tenelemente in der Regel nicht skalieren und stellen keine textlichen Elemente dar, also können sie auch nicht wie gewöhnliche
Texte kopiert und eingefügt werden. Das ist beispielsweise beim
Kopieren eines Beitrags sehr unpraktisch, da man visuelle Elemente einzeln kopieren oder im schlimmsten Fall selbst ein tippen muss.
Zum anderen haben die meisten Techniken bisher Probleme
mit der Verwendung der :hover-Pseudoklasse (also einer Veränderung beim DarOberfahren mit dem Mauszeiger) und unterstützen meisten s nur das. ttf- Format (True Type-Font) der Schriftsätze. Dennoch bieten die neuen Techniken interessante Ansätze
zur besseren und vielfältigeren Textgestaltung im Web. Deshalb
verdienen sie es, im Rahmen einer knappen Übersicht wenigstens
ansatzweise besprochen zu werden.

].]

[TTF]
True Type Font (.e,hte S,hrift.. ) ist
ein S,h riftdar;tellungsstandard für
den Bildschirm und den Druck.
Im Gegensatz zu Bitmap-Schriften
wird das Schriftbild nicht aus einzelnen Pi)(eln zusdmmengestelll ,
sondern nach dem Prinzip einer
Vektorgrafik aus Konturen erzeugt. TTF ist gegenwärtig in die
Betriebssysteme Windows und
Mac OS integriert.

slFR Beauty: dtcessible mlerface
with beautlful headers?

,-- ........_....
•_

..... . w

_

..~

.

mN"'

slfR (1(11.., IRIlliR flHh RtpllttMt") Is
•• ",pi... silo" ,.. ...... 01 ploI" " , - , I• • • W1t~

If.1 fende,ed In you,'ypeI~tol " tob, 'f80,dltss

01 ,.he'I>c, '" I"l0l,...... u.. ~ h.~ th .. 1011'

1",..1104 .... IMI ••)'SI ...... h "ws. tombl_ 01

"' .......IpI. ess..,., flHlo • nd _ tornp"liblt wIlh

.11 11>0 ""'JO< lH"lI'I'o"Wrs.nd ... r>d .. d..

• Abbildung 3.60
Auch eine solche Te>ttdarstetlung
ist im Web möglich. Der Inhalt ist
kein Bild , sondern Text , der mit
si FR entsprechend dufbereitet
wird (Quelle: alvit .de/sifrbeauty).

aa
• Abbildung ] .61
TrueType vs. 8itmap. TrueType
arbeitet mit Kon turen aus der
Vektorgrafik. Bitmap mit einze lnen
Pi)(eln (Quelle: Wikipedia).

Neue Tech niken der Webtypografie

I

195

3.3.1

Simpl e Image Replaceme nt

Dieser Oberbegriff steht für eine Reihe von (S5-Techniken. die
Textelemente durch manuell erstellte Bilder ersetzen. die Hierarchie der Textstruktur jedoch ni cht verändern. Dies bedeutet beispielsweise, dass <hD-Überschriften in der 5ei tenstruktur immer
noch als solche auftreten, für einen Seitenbesucher aber als Bilder erscheinen .

E.d ""8'.. _~bI

_

l.c"'_" 4u_O

.. Abbildung 3.62
Textdarstellung ohne
(SS-Formatierung

.. ..-_.... _'.... ...
-- -- - ......................
- ...............
-, ....._,.... , . .. _

.... Abbildung 3.63
Textdarstellung mit (55-Formatierung. Als Schrift für die Überschrift
wird lucida Sans Unicode benutzt.

l>

~.

..,T"""

, - - - . , .....

'..__-....,.,
.. _ , ...

•..,..... _. _...__ ,....."__......
0

_

~

0

~

4

..... ,,,.......,. ..,"'_....... ,...,. _........... ....".-.
.....
,,.,. .,...
_.. o. ' ........ " .. ""P. ... ,.., . _, ... _

~

... G,'_ ' ... 1'. ... _""4

""",Ue .. ~ .· ",,, ..

Absatz/ormatierung
.

_40Z._..,..

,.._ ••"........,.. _ B1t-..
'''''' ......
,...""...... ''a
,. .... ,... _ • •

f .......

Absatzformati erung

_

.AbSlltzfol·01lltit' nlng

.. Abbildung 3.64
Simple Textersetzung der Überschrift durch ein Bild. Die eingebettete Schrift ist Delicious.

Werden manuell erzeugte Bilder mit alternativen Texten nicht
innerhalb des (hD-Tags, sondern ganz una bhängig davon einfach in den Textfluss eingefügt. so geht Mar nkhts hinsichtlich

der visuellen. wohl aber im Hinbli ck auf die st rukturelle Logik
verloren. In diesem Fall trägt das Element keine Semantik für die
Seiten hierarchie mehr und wird aus dem Gesamtkontext prakt isch herausgerissen .
TIPP

Simple Image Replacement ermöglicht nicht nur eine bessere
visuelle Gestaltung. sondern lässt
auch die Hierarchie der Seite
unverändert. Dies ist wichtig für
Suchmaschinen . die die Relevanz
von Textpd'isagen anhand ihrer
Hierarchie im Text bewerten,

Simple Image Replacement hat in diesem Zusammenhang
deutliche Vorteile. Ni cht nur behinderte Nutzer profitieren
davon, die trotz vorhandener Grafiken Inhalte einwandfrei lesen
können, sondern auch Sie, da Such maschinen-Spider nicht die
grafische Oberfläche der Seiten. sondern deren Struktur scannen. Die Relevanz eines auftretenden Wortes wird in Relation
mit seiner Position in der Seitenhierarchie gesetzt und dementsprechend bewertet. Ist eine Sei te ordentlich strukturiert, so werden ihre Inhalte in den Suchergebnissen angemessen zum Tragen
kommen .

3.3.2
[Screenreaderj
Screenreader sind Software-Produkte und Online-Dienste. die
Webinhalte für Blinde und Sehbehinderte vorlesen und somit eine
alterrlative Benutzerschnittstelle
anstelle des Textmodus oder einer
grafischen Benutzeroberfläche
bieten.

Moderne An sätze

Ei ne typische Tech n ik der simplen Schriftersetzung ist die RaduMethode (Radu Darvas. 2003). die Textinhalte eines Seitenelements (im Weiteren des <hD-Elements) von Besuchern durch
einen großen negativen Außenabstand (mar9i n) verbirgt und sie
durch ein Hintergrundbild ersetzt.
Im Gegensatz zu anderen Techniken funktioniert diese
Methode einwandfrei in allen Browsern. bei den meisten Screenreadern sowie auch im Internet Expl orer 5. Das einzige Problem
entsteht, wenn Grafiken deaktiviert werden, CSS dagegen weiter-

196

I

3 Textgestaltung

hin aktiviert ist. Dies kommt zwar seh r sel ten vor, liefert aber bei
der Verwendung der Radu-Methode einen leeren Zwischenraum.
Sollte diese Methode in Zukunft Probleme bereiten, so kann
sie durch die Phark-Methode ersetzt werden, bei der statt eines
negativen Außenabstands eine große Ausrückung über die texti ndent-E igenschaft verwendet wird.

Wie gestaltet man Texte?
.t.

Abbildung ] .65

Exam ple.gif - eine Obe~chrift
(Schriftart: District Thin) der
Größe 409 x 52pM

HTMl:
<hl title- " Beschreibuog der überschri f t" >übersc hri ft </hl>

.t.

(55 :
hl I

1* Er sat zbild * 1
background: urHexample.glf) no-repeat top rlght:
1* Beliebig groBer AuBenabstand *1
marg1n-left: - 2000px :
1* Breite: -2000 - Breite des Bildes *1
width: -2 409px:
1* Höhe *1
height: 52px;

Bei der Phark-Methode wird die vorletzte Zeile durch die Zeile
text - f ndent: -IOOOpx; ersetzt. Eine weitere Alternative wird
durch Malarkey Image Repfacemeflt geliefert . Dabei wird die
Eigenschaft 1et t er- s pac f og ausgenutzt:
letter-spacing: -99gem:
Darüber hinaus kann es sinnvoll sein, die Schriftfarbe des zu
versteckenden Textes vorsichtshalber mit der Hintergrundfarbe
gleichzusetzen.

3.3.3

Abbildung ] .66

Eine über;chrift (Schri ftart
District Thin) auf schwarzem Hintergrund : GröBe 404 x 41 px

_
_
---

-.----.._---_ ........__..._--------_
-._----_._-.

...

.. "" .......

, ---~..

........

Wie gestaltet man Texte?

.

.t.

Abbildung ] .67

Einfache TeM te~etzurtl auf
weißem Hintergrund

Es gibt auch weitere Si mple Image
Replacement-Techniken. Einige
davon werden in den 8elträgen
»Revised Image Replacement.
(h ttp://www. mezzoblue. wm/
tests/rev/sed -/mage-replace men tI,
Llnkcooe 084) und .. Nine Techniques for (55 Image Replacemenh (ht tp:lkH-tf;ck$.wm/
nI ne- t e(hniques-!Of- (ss-I magereplacementl, Unkeode 085) ausführlich erläutert.

Dynamic Image Replace ment

Im Unterschied zu einfacher Schriftersetzung liefert diese dynamische Alternative Ergebnisse *on the fly «. Textinhalte werden
als Obergabeparameter für JavaScript- und PHP-basierte Skripte
verwendet, die beim laden der Seite entsprechende Bilder dynamisch generieren oder aus der im Cache gespeicherten Version
Jaden und in die Seite einbetten.

3.3

.t.

Abbildung ) .68

Einfache Texter;etzu/ll auf
schwarzem Hintergrund

Neue Techniken der Webtypografie

I

197

I

_

".,_
K~

... _ _

.~

_--

... _

_.

. . ._

.. _

... .....
~

"' ~

-

... t .....,."'''

............

. . . _ _ ~ ...

Wie gestaltet man Texte?

....

-- , -~..... """"......
'''' _ t ..,., , .
_

..

.~ _~_

w . . . """"' .........

~

.""" ,,,ft

, _ _ _ ... _

. ... , , _

... Abbildung 3. 69
Bei einem FalJback wird die 5tandardschrift Trebuchet MS angezeigt.

.._._
_
....... __
--_
.
__
.....
_
... _
.....
..-. ",-.....
-----,---_
.
_-*
--_....- .. ..._...,-....-----.... _-----..---

__ _--_

'-- '---~-­
,
_ .. _

.... ' _ _ T_ ... _

... Abbildung 3.7 0
Dynamische Textersetzung der
überschrift mIt SIIR

Diese Technik geht aufStewart Rosenbergers Verfahren Dynamic
Text Replacement zurück l , die aus .ttf- Font s aut omatisch .pngBilder erzeugt . Die Weiterentwicklung de r Techn ik brachte Ryan
Pet rellos zur Entwicklung von Scalable InUne Image Replacement
(SIIR). Diese Technik lässt Webentvvickler neben spezifizierbaren
typografischen Parametern (Schriftgröße, Farbe, Abstände usw.)
eine Schriftart als Übergabeparamet er für ein PHP-Skript angeben. die in den generierten Bildern verwendet werden soll. Für
eine bessere Performance wird (aching eingesetzt.

Schritt für Schritt: SII R im Ein sat z - Dy namisc he Erse t zun g
von Üb ersc hriften
Im Folgenden wird Schritt fO r Schritt ein Textelement dynam isch
mit hilfe der SIIR-Methode ersetzt.

11

Package herunt erladen und en tpac ken
Auf der offiziellen Sei te der SIIR-Technik (http://www.whaleojadive.comlmisdsiirlabout.php, Linkeode 086) finden Sie ein Archiv,
das zwei zur Verwendung von SIJR notvvendige Dateien ent häl t.
Laden Sie sich dieses Package bitte herunter und entpacken Sie es
in einen Ordner Ihrer Wahl.

11

Dat eien konfiguri eren
Öffnen Sie die Datei external.js mi t einem Textedi tor un d ersetzen Sie die URL in der Zeile

var path - · www.path.to/siir/":
durch einen absoluten Pfad des Ordne rs. in dem neben diesen
Skript en auch Ihre Schriftarten abgelegt we rden. Liegt Ihre Seite
beispielsweise auf Isrvlwwwlhtdocslweb01lhtmll, so wäre I srvl
wwwl htdocslwebOll htmllsiir eine gute Idee.

11

Dat eien hochladen. Zugriffsrechte einst ellen
Erstellen Sie den entsprechenden Ordner (i n diesem Beispiel siir)
auf Ihrem Server und kopieren Sie beide Package-Dateien sowie
die Schriftarten. die Sie verwenden möcht en (im .ttf-Format).
Erstellen Sie den Un terordner cache im Ordner siir und räumen
Sie diesem den Status Lesen -Schreiben-Modifizieren ein, indem
Sie im Ordner siir den Befehl chmod 700 cache ausführen.

2 .A Ust Apart., No. 183 , Juni 2004 , alistapart .com!.lftiel(s/(j;nat(xt
(Unkeode 41)
1)

198

3 Textgestal tung

I

EI

JavaScript-lnitiali sierung einfügen
Auf jeder Seite, auf der Sie SffR verwenden möchten, fügen Sie
den folgenden Ouelltext vor dem absch ließenden </ body >-Tag
ein :
<sc ript type-- t ext/Javascrlpt ' >
SI IR_1nit() :
</sc rlpt >

11

Textinhalte durch Bilder ersetzen
Um Textinhalte durch generierte Bilder zu ersetzen, verwenden
Sie statt üblicher Formatierung wie
<hl>Bellebl ge [nformatlon (/hl>
das folgende Codestück:
<dlv c las s- "hl ">
/ * Fallback-Fo rmiltlerung mittel s CSS in der Kla ss e hl

'/
<fmg cl ass- ' hl' fd- ' hl_l ' name""hl_l '
/ * ID s so llen bei Jedem Bild unter schiedli ch seln *1
s r c- . www.mu s ter.de /s llr / generate.php?
ac tlon-display&amp:
w-undefined&amp:
/ ' Breite ' /
h-32&amp :
/ ' HOhe *1
paddfng-2&amp:
/ ' innerer Abs tand ' /
tran s pa rentbg-O&amp:
/ ' Tra nspa renz */
/ ' (l-Ja . o- Nefn ) * /
bgco 1or-FFFFFF&amp:
/ ' Hlntergrund farbe ' /
f ont_co1or-2F3C42&amp:
/ ' Schri ftfarb e */
s hadow_co 10 r-E2E2E2&amp :
/ ' Schat t enfarbe */
f ont_ fl1e-font.ttf&amp:
/ ' Se hrt ft datel ' /
f ont_s1 ze-30&amp:
/ * Sch rfftgrö6e */
antia 1l as-l&amp:
/ * Antt - Alta slng */
text-Be11ebfge+lnf ormatf o n" / * Te xt *1
tlt1e- ' Bellebl ge Info rmati on'
alt-"Belieblge I nformatf on" I>
</ dlv >
Der s rc-Parameter muss zusammengeschrieben werden . _
Durch Obergabeparamete r lassen sich beliebige typografi sche
Angaben machen, wie etwa die Schattenfarbe (shadow301 or),
das Verwenden der Anti-Aliasing-Technik (a ntf a 1f as) oder die
3.3

Neue Techniken der Webtypografie

I

199

Transparenz des Hintergrunds (trans pa rentbg), was in der Rege l
mit C55 kau m oder nur schwer zu realisieren ist.
HotlInking vermelden

Um einen Missbrauch Ihres Servers (Hotlinking) zu vermeiden ,
beispielsweise wenn jemand
seine Inhalte über ein PHP-Skript
Ihres SelVers anzeigen lässt , fügen Sie in den slir-Ordner eine
.htaccess-Datei ein, die beim
Aufruf Ihres Skripts auf eine interne Seite um leitet.

Beachten Sie, da~s der anzuzeigende Text auch in den ti tleund alt -Attr ibuten angegeben werden soU, damit Benutzer,
die die Bilder deaktiviert haben, auf die übli che C55-Gestaltung
zurückgreifen können.
Um zu verhindern, da~s externe Seiten Bilder oder Dateien von
Ihrem Server generieren ode r laden (Hotlinking), ist es empfehlenswert, eine .htacc€H-Datei zu erzeugen, die solche Versuche
unterbindet. Dies lässt sich etwa mit dem folgenden Code innerhalb der .htacc€n-Datei im sei ben Ordner, in dem auch generate .php liegt, gewährleisten:
IndexIgnore *
/ * Blockiert die Anzeige von Verzeichnissen aus anonymen FTP- Se rvern */
Re wrHeEngi ne on
/ * Startet RewriteEngine. f all s es nicht beretts eingescha l tet wurde */
Rew rH eCond %IHTTP_REFERER) " $ [OR]

/ * so l l te ein Referer leer sein ...
(Rewri teCond vergleicht zwei Werte.
%(HTTP_ REFERER) nirrmt die Variable HTTP_REFERER.
" steht fUr den Anfang des String s . $ fOr das Ende
des String s . der verglichen werden so l l )
'j

Rewri teCond :t! HTTP_REFERERI
! "( www \.)?bei spiel \.de .*$ (Ne]
/ * Vergleich na ch dem OOffiainnamen: so llte vor einer
UR l -Adresse ein www stehen oder nicht. sol lte nach de
etwas kommen oder nicht. NC sorgt dafUr. dass nicht
zwi sehen GroB- und Klei nbuchstaben untersc hi eden
wi rd. */
Rewri t eRule .* www.bei spie l .de/hotlinking.html [R,ll
/ * I st die Rege l erfOllt. so wird auf die Sei te hot 11nking.html weitergeleitet. [R. l] sagt aus. dass es
si ch um einen " Permanent Redirect " handelt (absolute
Pfade si nd ni c ht notwendig ) (R) und dass dies die
letzte Anwei sung vor der Ausfohrung des Skript s 1st
(l).

*/

Weitere Informat ionen über die .hta{c€ss-Datei finden Sie in den
folgenden Bei trägen:

200

I

3 Textgestaltung

I

.. Und erstanding Apache htaccess
http://www. newearthonl ine.co. uk/ index.
php ?page=arti c1e&arti cle=68 (Unkcode 087)

... Apache htaccess Ultimate Guide

http://www.askapache.comlhtaccess/apache-htaccess.html
(linkeode 088)
.. Comprehensive Guide to .htacc€ss
http://www.javascflptkit.com/howt olht daess. sh tml

(linkeode 089)
Daruber hinaus finden Sie unter der Adresse http://cooletips.de/

htaccess (linkeode 090) einen .htacceH-Gene rator, mit dem Sie
. htacceH-Dat ei en intuitiv konfigurieren und on li ne erzeugen kön·

nen.
SII R liefert optimale Erge bnisse bei allen Browsern mit aktivierter Jav aScript-Funktion alität. Werden grafische Elemente
vom Browser ausgeblendet, so zeigt das Skript bei JavaSc ri ptUn terstützung alt-Texte an. Die jeweiligen Schriftarten werden
auf den Server, auf dem die Sei te abgelegt ist, hochgelade n, beim
ersten Aufruf generiert , abgespeiche rt und können anschließend
dynam isch abgerufen werden.
Eine analoge Funktionsweise zeigt auch die von Stewart Rosen~
berger und Alex Giron entwickelte Technik PHP + CSS Dynamic
Text Replacement (http://www.artypapers.com/mhelpP..e/pcdtr.
linkcode 091). P + ( DTR liefert eine Caching~ Fun kt io nalit ät , ve r~
wendet keine JavaScripts und ist sehr leicht zu bedienen . Dafür
verfügt sie aber über weniger Anzeigeoptionen . So lassen si ch
etwa Überschriften auf unterschiedlichen Seiten nicht u n t er~
schiedlich gestalten, auch tOs und Klassen lassen sich nicht auf
die Überschrift en anwende n .
Abgewandel te Versionen von SII R sind :

.. Oynamic Tex t Replacement (DTR)
PHP, JavaSeript , CSS. Vorau ssetzungen : PHP 4 .3 oder höher.
GD Graphics library 1.6 oder höher wird unterstutzt. http://
www.boutell.com/gd (linkcod e 092), http://www.a/istapart.

com/artlclesl dynatext (Li nkeode 093). Die de utsche Obe rse t~
zung findet sich auf: http://webdesign.weis.shart.de/dyna text.
php (Unkcode 094)

.. Facelift Image Replace ment (FlIR)
PHP 5, JavaScript, CS5, GD Graphics Ubrary

http://fa celift .mawhorter.netl(lin kcode 095)
.. Scalable Jens Im age Replacement
Das Projekt finden Sie unter http://persson.cx/sJIR (Linkeode
096). Es funktioniert analog wie DTR. Voraussetzungen : PHP,
GD Graph jcs library und LibFreeType.

13 Neue Techniken der Webtypografi e

I 201

Die Funktionen unterscheiden sich nur wen ig. Ein wesentlicher
Vorteil von DTR besteht darin, dass die Überschriften kein zusätzliches XHTML-Markup benötigen. Eine Standardformatierung wie
etwa <hI>Überschri ft</ hI> gen ügt, der Rest wird automatisch
durch PHP-Skripte und JavaScript geliefert.

Sc hritt für Schritt: DTR im Einsat z - Dynami sc he Erse t zung
vo n üb erschriften
Im Weiteren wird beschrieben, wie Sie OpenType-Schriften auf
Ihren Seiten verwenden und Texte durch ent sprechende Bilder
.on the fty c gene rieren lassen können.

D

Dateien heru nte rla den

Laden Sie zuerst die notwendigen Dateien heading.php.txt und
replacemeflt.jS herunter:
.. heading.php. txt
http://www.aJistapart.comldidynat ex tlheadi ng. ph p. tx t

(Linkcode 097)
.. replacement.jS
http://www.alistapart.comldldynat extlrepla (em en t.js

(Linkcode 098)

11

Konfigu ra ti o n des Bild -G enerators

Öffnen Sie die headingphp.txt-Datei und bet rach ten Si e den
Code hinter dem einführenden Kommentar:
Sf ont_f ile .. ' f ont. ttf ' :
/ * Lokaler (ke in absoluter , auch keine URL·Adresse!)
Pfad zu einem True Type- (. ttf ) oder Open Type· Font
(.otf) . 5011 die .php-Oat ei im Ordner dtr liegen und
die Schri ftdatei f ont. ttf im Unterordner fonts , so
1st SfonCf1le" ' f ont s/font.ttf ' ; anzugeben. */
$fon t _size .. 50
/ * Sc hriftgroBe in .pt */
$f on t_col or" ' /1000000 ' ;
Sba ckground_color .. ' f/ ffffff'
/ * Definieren die Sc hr ift- und Hintergrundfarbe */
$transparent_background .. true :
true sorgt für einen weichen Übergang der Kanten der Schriftzeichen zum Hintergrund Sbackground_col or, Anti-aliasing wird
vermieden, und der Hintergrund der Schriftzeichen wird unsichtbar.

20 2

I

3

Textgestaltung

I

$cache_fmages .. true :
Scache_folder .. ' cache '

Wird 1-cache_images auf true und 'cache_folder auf den lokalen pfad zu einem Verzeichnis mit Schreibrechten gesetzt, so wird
jedes generierte Bild im Cache gespeiche rt und bei Bedarf nicht
wieder neu generiert, sondern sofort nachgeladen.

Überlegen Sie, wie Sie die Verzeichnisstruktur wahlen möchten,
und legen Sie die gewunschte Konfiguration in der .php-Oatei
fest . Speichern Sie die Daten ab.

11

Konfi guration des JavaScripts

öffnen Sie die Datei replacement.js und betrachten Sie die ersten
zwei Zeil en hin ter dem einführenden Kommentar:
replaceSelector( " h2". "headl llg. php". t rue):
var testURL" ' test.png ' ;

Die Met hode replaceSelector besitzt drei Parameter: einen
CSS-Selektor, dessen t extueller Inhalt durch Bilder ersetzt werden
soll (das können auch lOs, Klassen und Attribute sein), die URlAdresse des konfigurierten PH P-Skripts sO'Wie das sogenannte
word-wrap-ftag . Wird dieses auf true gesetzt, so wird für jedes
Wort ein eigenes Bild erzeugt. Diese werden anschließend mit
Zeilenumbrüchen zu einem Satz zusammengefasst. Bei fal se
wird für jede Überschrift genau ein Bild erzeugt, das nicht umbrachen werden kann . Die URLs können absolut oder relativ (path/
filename) sein. Die Methode darf nur ei nmal für eine Gruppe von
Elementen definiert werden.
Die Variable testURL speichert den pfad zu einem Testbild,
mit dem das Skript get estet werden kann. Passen Sie bitte diese
Angaben an un d speichern Sie die Datei ab.

11

Dateien hochladen

Laden Sie beide Dateien auf den Server hoch, etwa in den spe·
ziell f ür das Skript erzeugten Ordner dtr. Stellen Sie si cher, dass
der Serve r PHP (ab Version 4.3) unterstützt und auch über die
implementierte GD Graphics Ubrary (1.6 oder höher) verfügt.

EJ

Das Skript mit einer Testd atei testen und
impl emen tieren

Fugen Sie in einer .htmf · bzw. .php-Datei auf Ihrem Server den
folgenden Code innerhalb des <head >-Tags ein:

B

Neue Techniken der Webtypografie

I

203

<sc ript type- "text /J ava$cript "
s rc- " dt r I rep 1a cement. j s ">
</sc rfpt>
Rufen Sie nun die entsprechen de Datei auf. _

Dynamic Fl as h Replace me nt

I Eine

wei tere Möglichkeit der

Schriftersetzung wi rd durch die Flash-basierten Techniken Scalable Inman Flash Replacement (sI FR) und SwishMAX Text Replace-

ment (STR) bereitgestellt .

,.
.. Abbildun g 3.71

Sealable Inman Flash Replacement
(sIFR) (Quelle: Mikeindu5tries.

com/sifr)

Bei beiden Met hoden ersetz t man Textelement e nicht durch
Bilder. sondern durch statische Filme mi t eingebetteten Schriftarten, die bei spielsweise mithilfe der Anti-AHasing-Technik und
weiteren t ypografischen Methoden schön aufbereitet und gestaltet werden können. Das Ganze basiert auf üblicher (X)HTML- und
(55- Format ierung. die neben konvent ionellen (55-5elekto ren zur
typografischen Seiten gestaltung auch spezielle 5elektoren beinhaltet, die Textinhalte durch Flash- bzw. 5wish -FHme ersetzen. Ist
der Browser eines Benut zers nicht mit einem Flash - Plug-in ausgerüstet . so lässt ei n Java5cript die Seite generisch anzeigen. und
zwa r so. wie dies durch (55 definie rt ist.
Die Methode slFR wurde von M i ke Davidson veröf fentlicht

sl FR . Beispiele
Beispiele von Seiten, die sich
si FR-Technik zunutze machen , findet man auf dem Projekt _sIFR
Beauty« (http://www.afvlt.del

(http://www.mikeindustries.com/blog/archive/2004/0B/sijr. Lin kcode 100) und genießt seither eine ungewöhnliche Populari tät

sl!rbeauty. linkeode 099), das

Übersch riften - meh r visuellen Nachdruck ve rleihen woll en. Im

über 40 Beispiele zeigt.

Hinblick auf Usability- und Accessibility-Probleme weist si FR

bei Seitengest altern. die ihren Websei t en - insbesondere den

mehrere Mängel auf, die zum Beispiel dadurch deutli ch werden,
dass die Technik ni cht spezifizierte Elem ent e (embed) und Att ribute (sHr) gene riert und ve rwende t . Zur Anzeige von Inhalten

velWendet si FR Macromeda-Flash- Filme.

Schritt für Schritt: s lFR im Einsatz
Mittlerweile steht slFR 3 Bela
zum Dovmload bereit (hup:!!
wikl.novemberborn.netlsifr3. Unk·
(ode 101). Die Version is t jedoch
noch unvoUstandig und weist einige Bugs auf. Unser Beispiel beschränkt sich auf die leute stabile
Version von sIFR. Die Vorgehensweise bei slFR 3 unterscheidet
sich nur wenig von 51 FR 2.0.

204

I

3 Textgestaltung

In diesem Beispiel lernen Sie, wie Sie Textelemen te (empfehlenswert nur für Überschriften) mithilfe von Flash ersetzen. Dabei lassen sich beliebige Schriftarten mit dem si FR-Ansatz automatisch
einbetten. Voraussetzung ist . dass der Nutzer über Java5criptUnt erst ützung sowie ein installiertes Flash-Plug-in verfügt. Ist dies
nich t der Fall, so zeigt der Browser die jeweiligen Seitenelemente
im Standa rdmodus ( ,.Fallbackmodus«) mithil fe von (SS an.

D

Package herunterladen

laden Sie bitte die aktuellste Ve r\ion von si FR von der offiziellen
Seite herunter, Entpacken Sie das Package in einen lokalen Ordner.

IJ

öffnen der .fla-Datei und Modiflzierung des
Buchstabensatles

Um eine vorliegende Schriftdatei einzubetten. öffnen Sie bitte
die Datei sifr.fla im entpackten Ordner mit Flash Pro fessional.

-

-

I F-LASH ProfesslOn,,1
.
.........

.., ~

- . ...............

. ''''~''''''

.~ r_'_ i .........

Q b

d_"_
,
,-

~

• Abbildung ] .72
slFR von der offiziellen Seite
herunterladen

... ",

........ __..,

u·.~
t:lr
_ _ ......

Q _

.o.w

,,u _

.... .. _

_ •

.-

~ '''''-

_----

_..,,--...,.,.
s......_
. . _... _. .
,...... ".... ."""""""

.... .....
._.
,"'

..... --

0 ......-.._. ... _

.. ,.........,.,...a>wOhlW\o
~..f.>:. ..

,

.

8

-

- -.- --- .

_

._.... ......
._..... _..... _-

I

---

"'---c.-_ _ ,,,,

.........
....

'- -_.
----------

... Abbildung ) .7)
Splash-Screen bei Flash
Professional

_._~ .

•\
a,.

11_'
• •0

.... r'1l=-;.;:~
... _
, .•I

•••••••

••

••••••

!!.. .. -

, p

--.:;

-.

Oq

"
"Oq

"'..

i><';CI

•

, .' ... 1 _ . . . . , ----,.-:;;;.._ _ _ _ _ _ _~---'

i
.

".
••
•••

-•

'- -"-

_ 1 ......... 1_

Q

..

_

or

••
•

..

~_._,-­

.. _ I

... Abbildung ) .74
Nach dem laden der Datei
erscheint ein leeres Feld.

Es erscheint ein leeres Feld in der Mitte des Hauptfensters (auch
Arbeitsbereich genannt). Klicken Sie das Feld mit der linken
Maustaste doppelt an, um es zu aktivieren.
3-3

Neue Techniken der WebtypografIe

I

205

.-

.._..
•••
n.

- ....... ...
..
00 not remave th ls

l~ .~~

~

~

~~.~

text.

[/I]

",.

••

.....·1 _ _

......._,

... ~~ ['l

-

........... '"

Abbildung ] .75 ""

Wiederholen Sie dies noch einmal, um in de n Editier-Modus zu

Das leere Feld wird aktiviert.

gelangen.

00 not remove this
text.1

Abbildung 3_76 ..
Das Eingabefeld is t aktivier t.

Soll te das Menü EIGENSCH AFTE N ni cht bereits angezeigt werden, öffnen Sie dieses mit FEN STER ' EIG ENSCHAFTE N (alternativ

lo leln!"o Inbo Il~ n:
WiIIiM s;, "" l e"""'><Izo Old. <Oe-"l<t
"""""',.....,. U. KW"C Set............w:n
b'~ .• "" ""_...,,""" .......

1I.un Se ....

qo_" !bo·Tmlo.u <I< " ' _ S_

.

~

+ ITIJ) in der Hauptmenüleiste.

St an dardmäßig en thäl t die .fla-Dat ei alle Buchstaben des engb..<;t., _
, ~ II .· J",=,
' 10'1:="",." , • '_' CI,~)
_'<rl. "1 I '.Jv:"<r
JQ

,-~,.

'a'

'-~

lischen Alphabet s sowie In t erpu nktionszeichen, die ansch l ießend
auch auf der Seite angezeigt werden. Möcht en Sie etwa deutsche

O'

L.ot.....:h ......... (9S t.IrotJOn)

-.o<h .... 1"" _
1
- . Kh .... C . bono L!3 " 'G ~oI'OI\I
.-..<h(Mo] j1'H'<;/fpl\<ofl)
""'M'lKl> . • nldooo Hor>;U P _ ....-l
........ "'" -1tOt>9JI1"') {llmG~
"odltlnolll. OIn,,,,,h " , , _ L [5009"'"
l "O<~""'" ~"'h r...., (1" 19 ~ ..
One_ ~ ,

~

I
Go_

Mo'_"'" I

Um lau te hinzufügen, so kli cken Sie auf die Schaltfläche EIN SEn EN
und fügen die Bu chstaben ä, A, ö, Ö, ü, 0 und ß explizit hinzu,

._"- .....,

Zedlen , W

I - ,*,
.... Abbildung 3.77
Deutsche Umlaute werden in den
Zeichensatz explizit einge fügt.

206

3 Textgest altung

... Abbild u ng 3.78
Die Schaltfl<iche . Einbette n .. er möglic ht das manuelle Ei nfüge n vo n Zeichen in die zu expo rtierende .swf-Datei.

11

I

Einbettung einer vorinstallierten Schriftart und Export
der Datei

Im Menü EIGENSCHA.FTEN wählen Sie eine der auf Ih rem pe installierten Schriftarten aus. Danach sollte sich die Ansicht des Textes
im Feld verandert. Mit den Kontrollschaltflachen I und B können
Sie die Schriftart als eine Kursive oder als Fettschrift auszeichnen.

-

, ",,-,_. . , ....., , - - . . . I."')

,,," .......
•

•

•

..

•

•

..

..

•

•

..

11

..'-v•..

•

. .--

-

..

,.. ",.... :"'00 not remove

•

• _.

. ' 1.0

•

--~

... Abbi ldung ] .79
Auswahl einer Schriftart

Exportieren Sie nun die neue Dat ei mittels DAm • EXPORTIERE N
• FILM EXPORTI EREN im Haupt menü. Als Dateinamen können Sie

etwaJollt.swJ angeben.

_-..
~

0 ' • Cl)' _ _-, I

"'-~
Ib-..""._(c .... ,..)
iII'I!,~

~_.

ß
......

--

.

... Abbi ld ung

] .8 0

Oie Datei wird als font.swf
gespeichert.

•
].]

Neue Techniken der Webt ypografie

I

207

D

Einbettung der (55-Stile zur Anzeige von Überschriften,
die mit sl FR gestaltet werden

Kopieren Sie den Inhalt der Datei 5/FR-print.cH in Ihr Drucklayout. Dies so rgt dafür, dass anstelle von Flash-Bildern tatsächlich
Überschri tten ausgedruckt werden. Fügen Sie den Inhalt der Datei
sIFR-screen.css in Ihre (55-Datei ein. Dieser sorgt dafür, dass entsprechende St ile angewendet werden, falls JavaScript und Flash
unterstützt werden.

D

Einbettung der JavaScripts innerhalb von <head>

Fügen Sie nun innerhalb des ( head >-Tags den folgenden (ode
ein:
<script src- " si fr.j s "
type- " text /javascript " )
<I scri pt)
Es gibt eine Fülle von Opti onen, mit denen sich die Anzeige von
Überschriften mit Flash »tunen« lässt. Grundsät zlich genügt es,
vor dem abschließenden (/bo dy )-Tag den folgenden Code einzufUgen:
<scr ipt type- " text/javascript ")
lI<l[CDATA[
jf ( t ypeo f s IFR -- " funct1on " J{
sI FR . repl aceElement(named( (sSelector: "b ody hl".
sFl as hSrc :" t ont. swt", sCo 1or: "11000000" ,
sL ; nk Co 10 r: "11000000 ". sBgCol or : "llffffff " .
sHove r Colo r: "lfcccccc " . nPadd1ngTop:20. nPadd1ngBot t om: 20}) :
}

,

1/ ]]>
<I se ri pt>

Dadurch wird für alle Überschriften erster Ordnung (hI) definiert,
dass als Schriftart die in font.swf eingebettete Schrift vef"AIendet
wird, die - ob Link oder nicht - in Schwarz (sColor: "11000000 " )
mit weißer Hintergrundfarbe (sBgColo r: "lIffffff ") erscheinen
soll. Beim Darüberfahrenwird sHover Color : "/lcccccc · gen utzt.
Außerdem soll sowohl der obere als auch der untere innere
Abstand 20px betragen. Das Ergebnis sieht wie folgt aus.

D

Das Ergebnis

Weitere Optionen können Sie in der Dokumentation zu sl FR
nachlesen. _

208

I 3 Textgestaltung

Hübsche Uberraschung!

I
lübsche

Ähnliche Funktionen findet man auch bei 5wishMAX Text
Replacement, bei der ähnliche Probleme auftauchen, die Menge

an gestalterischen Möglichkeiten jedoch riesig ist. Texte werden

"hung!
.. Abbildung 3.8,
si FR wird auf eine Oberschrift
1. Ordnung angewandt

bei STR durch SwishMax-Filme ersetzt. Im Unterschied zu slFR
können deshalb Hunderte zusätzlicher Texteffekte, die in der
SwishMAX-B ibliothek mitgeliefert werden, für die dynamische

Textgestaltung im Web benutzt werden.

3.3.4

@ font-face - Regel

Dynamische und stati sche Bild-Erse tzu ngstechniken bieten zwar

eine MögHchkelt, grundsätzlich beliebige Schriftarten in Weblayou ts einzubetten, doch die Einbettung ist relativ mühselig.
Dafür müssen Designer spezielle Bilder oder fl ash-Filme manuell

erzeugen oder serverseitige Bibliotheken nutzen, um die Generierung von Bildern _on the fly. zu realisieren. Zudem ist es in
einigen Fällen erforderlich, Java5cript einzusetzen, um die Ersetzung überhaupt zu ermöglichen . Manch einem Designer ist das
schlicht und einfach zu viel Arbeit - schließlich kann man eine
mehr oder weniger vernünftige Textgestaltung auch mit reinem
(55 realisieren .
Eine simplere lösung wäre die Einbettung von 5chriftdateien
mittels purem (55. Genau dies soUte laut W3(-Vorgaben schon
in (55 2 mit der @font-hce-Regel möglich sein. Das Attribut
wurde von den Browser-Herstellern allerdings nur unzureichend
umgesetzt und war deshalb in der Zwischenversion (55 2.1 nicht
vorhanden. Im C55 3-Modul Web Fonts} wurde die Regel wieder aufgegriffen Ut1d soll in zukünftigen Browsern nun vollständig
unterstützt werden. Im Jahr 2008 wurde die Regel im Browser
Safari 3.1 vollständig umgeset zt. Weite re Browsersollen dem Beispie l von Safari bald folgen.
Das Einbinden einer Sch riftart geschieh t in zwei Schritten.
Zunächst wird eine Schriftart mit@font-faceanalogzu gewöhnlichen CSS-Deklarationen in die liste der verfügbaren Schriftfarten hinzugefügt. Dafür wird die neue Schriftfamilie quasi definiert. Im Beispiel wird die neue Schriftfamilie _DeliciousFontc
definiert:

3 hrtp:llwww.w3 .org/TR/css3._bjvntsl

3.3 Neue Techniken der WebtypografIe

I

209

@font-face {
f ont- fami ly: Oel iciousFont:
src : url('fonts / de11c1ous.otf') f ormat{ " opentypeo " ) :
fant-style: 1ta 11c:
f ont- weight: bald:

I
Um die neue Schriftfamilie nutzen zu können, wird sie bei der
Textgestaltung neben anderen, schon bekannten Schriftarten
angegeben :
body (
font-fam11y: OellclousFont, Ar1al. sans-se rl f:

I

Tobias Otte hat einen ausführlichen Artikel zum Thema verfasst.
Sie können Ihn unter http://

tobias-otte, de/essays/web-fonts/
(linkeode 102) nachschlagen. Die
ersten kostenlosen Schriftarten,
die die Einbettung mittels@font face erlauben, finden Sie auf

hup:!/opentype,lnfwbloglZOO8/
08/05/10-great -free-fonrs -forfont-face-embeddlngl (LInkeode
103).

Beim Laden der Seite wird die Schriftart direkt mitgeladen und
zur Darstellung von Inhalten benutzt. Sollte ein Browser mit der
@font-face-Regel nicht vertraut sein, so wird er sie schlicht und
einfach ignorieren. Überraschende Nebeneffekte gibt es dabei
nicht
Beachten Sie bitte, dass Schriftarten, die mittels@font-face
eingebunden werden, nicht nur von Browsern Ihrer Besucher
geladen, sondern auch von Nutzern des Browsers heruntergeladen werden können. Demnach eignen sich nur kostenlose,
frei verfügbare Schriftarten, die eine derartige Einbindung explizit erlauben. Hierfür muss ein entsprechender Hinweis in den
lizenzbedingungen angegeben sein.

3.4
ÜberschrIft oder Flteßtext?

Vrx der konkreten Schriftwahl
muss ein DeSigner sich ein Ziel
setzen, das er mit der Sch rift erzielen möchte,

2 10

I

3

Textgestaltung

Schriftart auswä hlen

Welche Schriftarten sollte man wann benutzen, und wo liegen
die Vor- bzw. Nachteile der einzelnen Schriften? Zum großen Teil
ist dies davon abhängig, welchen Effekt der Designer mit einer
speziellen Schriftart erzielen möchte.
Grundsätzlich muss man sich zuerst überlegen, ob eine Schriftart für Überschriften oder für Fließtexte gesucht wird. Bei Überschriften werden Webdesignern mehr Möglichkeiten zur Verfügung gestellt Schließlich kann das übliche Schriftenangebot eines
Webgestalters durch Image Replacement bzw. Fl ash Replacement
deutlich erweitert werden. Bei Fließtexten sollte man sich dagegen auf Standardschriften beschranken. Im Folgenden finden Sie
einen Überblick uber die Standardschriften.

] .4 .1
Georgia
Bei Kursiven zeigt Georgia ab der Kegelhöhe 28 px ihre besten
Formen, auch ihre Kapitälchen lassen sich bei dieser Größe
sehen. Beim üblichen Schriftstil ( f ont -styl e: norma 1) muss
man jedoch insbesondere für einen guten Buchstabenabstand
sorge n, diesen jedoch nicht zu groß wählen . Georgia stellt
eine warme, persönliche und lesefreundli che Serifenschrift mit
Mediävalziffern dar, die man zu verschiedenen Zwecken verwenden werden kann - insbesondere in geglätteter Darstellung.
Für Fließtexte eigne t sich Georgia grundsätzlich auch, sie wirkt
jedoch ein wenig unruhig.
].4.2 Arial
Arial überzeugt in Überschriften ab 34px durch ihre Klarheit und
Deutfichkeit. Auf der Suche nach besonders schönen typografi schen Formen wird man bei Arial in diesem Bereich, der Ältesten aller Web schriften, dagegen nicht fündig - die Ausnahme
sind geglättete Kursive und Kapitälchen.
Im Fließtext dagegen wirkt Arial solide und seriös, auch wenn
sie im Druck im Vergleich zu anderen Schriften schlecht abschneidet. Bei Versa lien spielt ein angemessener Buchstabenabstand
eine wichtige Rolle, denn sonst verschmelzen einige Buchstabenpaare, wie etwa TZ .

] .4.]

I
Georgia
Grorgl l

Snu. onlER!l cu.IM m.u
language grew out of grunls
of effort, inarticulate chants,
or exclamations of fear or

surprise. Pythagoras and

Arial
Ar1.1
STIlL OTHERS ClAIM THAT

language grew out of grunts
of ef(orl, inarliculate chants,

or exclamations of fear or

surpriS8. Pythagoras and

Lucida Sans Unicode

lucida Sans Unlcode ist sehr gut ab 34 px zu lesen. Durch glatte,
angenehme Kurven hinterlässt sie einen soliden und seriösen
Eindru ck. Kursive dagegen sorgen bei großen Schriftmaßen für
Unruhe und erschweren die Lesbarkeit. Auch zusätzliche Buchstabenabstände machen das lesen schwerer und sollten deshalb
vermieden werden . Sowohl Kapitälchen als auch Versalien bieten
ein schönes Bild, wobei man bei Versalien eine kleinere Schriftgröße wählen sollte, um den »Schrei effekt« der Überschrift zu
ve rmeiden .

Lucida Sans
luclda Sans Unlcode
STIll OTHUS ClAIM T ~T

language grew out of grunts
of efforf, inarticu/a fe chanfS,
or exclamat lo ns of fear or
surprlse. Pyrhagoras and

In lauftexten wirkt luci da Sans Unicode wegen all zu schräger Kursive nicht sehr deutlich. Das Schriftbild ist angenehm und
ansprechend, insbesondere ab einer Kegelhöhe von 13 px.

] .4.4

Ta homa

Vom Außeren her ähnelt Tahoma lucida Sans Unicode und bereitet äh nliche Probleme. Bei Kursiven ist die Schrift nur schwer
lesbar, ansonsten ist das 8uchstabenbild klar und deutlich, überzeugt jedoch nicht durch attraktive Formen, sondern durch seine
klare Gestalt. Im Vergleich zu lu ci da Sans Unicode sind Kapitälchen und Versalien bei Tahoma schlechter zu erkennen .
3.4 Schriftart auswählen

I

211

Tahoma
"""~
STILL OTMERS CtAIM THAT

language grew out of grunts
of effort, inarticulate chants,

or exdamatlons of fear or
surprlse. Pythagoras and

Trebuchet MS
Trebuchet MS
STIll omERS CLllM ntAT

language grew out of grunts

of effort, inarticulate chants,

cr exclamations of fear or
surprise. Pythagoras and

Times New Roman
Times Ncw Roman

Sm [ OTHF. RS CLA]\! mAT
languagc grcw out of grunts

of effon, inarriculare chan/s,
or exclamations of fear or
s urprise. Pythagoras and

In Fließtexten wirkt Tahoma relat iv schlicht und neutral. Es lassen
sich weder gravierende Mängel noch besonders schöne Eigen-

schaften entdecken. Im Fließtext sollte eine serifenlose Tahoma
mit der Schriftgröße ab 12px verwendet werden, für kleinere
Beschriftungen ist aber auch 11 px eine gute Wahl.
Es ist zu beachten, dass Mac-Systeme Tahoma nicht kennen,
deshalb ist der Einsatz dieser Schriftart bei plattformunabhangiger Textgestaltung nicht zu empfehlen.
3.4.5 Trebuchet MS
Bei Trebuchet MS muss man vorrangig das Schriftgewicht der
Buchstaben genau unter die Lupe nehmen. Bei Kursiven erscheint
das Bild zu dick und somit unleserl ich, ansonst en liefert die
Schrift eine gute Qualitat. Auch bei Kapitalchen und Versalien
beeindruckt das Bild, wobei man bei Lucida Sans Unicode noch
besser bedient wird. Bei einer üblichen Gestal t ung ohne Kursive
wird man insbesondere in Trebuchet MS schöne, glatte Formen
entdecken, die auch in Lauftexten (ab 13 px) überzeugen.
3.4.6 TIm es New Roman
Times New Roman zählt zwar zu den lesbarsten Schriften überhaupt, im Web wirkt sie aber zum Teil veraltet, zum Teil passiv
angesichts alternativer Schnitte - möglicherweise weil sie in den
letzten 15 Jahren zu der klassischen Webschrift geworden ist.
Auf einem ordentlichen Bildschirm (kleine Pixel, verzerrungsarme
Darstellung über die ganze Bildschirmftäche, wenige Konvergenzfehler) zeigt sich die Schrift in ihrer vollen Starke. Bei einer nicht
optimalen Bildschirmauftösung verschwimmen die Buchstaben
und erzeugen ein verzerrtes Bild.
Ihre Stärke zeigt die Schrift bei einer Schriftgröße von 40px,
insbesondere bei Kursiven , Kapitälchen und einfacher Gestaltung. Sie Oberzeugt aber nicht durch Originalität oder eine starke
visuelle Wirkung. In Fließtexten erreich t die Schri ft ihr Optimum
zwischen 12 und 16px. Bei kleineren Größen erzeugen Serifen
ein verwirrendes, kaum leserliches Bild; bei größeren Formen
sieht sie ziemlich grob und unschön aus.
3.4.7 Verda na
Die extra fUr das Screendesign entworfene Verdana wirkt be i
Überschriftgrößen durchaus leserlich, schöne Formen zeigt sie
zudem meistens ohne Kursive. Vor allem Kapitälchen bieten ein
klares, deu tliches und solides Schri ftbild. Der Buchstabenabstand
darf bei Verdana nicht zu klein, aber auch keinesfalls zu groß
gewäh lt werden - hier ist Verdana besonders sensibel.

212

I

3 Textgestdltung

Besonders stark zeigt sich Verdana bei kleinen Schriftgrößen zwischen 9 und 11 px; neben gut er lesbarkei t wirkt sie ruhig und
angenehm. Auch im Bereich über 11 px bietet die serifenlose
Verdana schöne Schriftformen, die jedoch mit einer sorgfältig
gewählten Zeilenhöhe versehen werden sollten.
Da Verdana sehr häufig benutzt wird, wirkt sie auf einen
erfahrenen leser zwar gewöhnlich, aber auch charakterlos und
unspektakulär. Möchten Sie bei Ih ren Sei tenbesuchern einen
nachhaltigen Eindruck hinterlassen, so finden Sie in Verdana keinen pote nziellen Kandidaten. In diesem Fall liegt es nahe, die
modernen Methoden zur Gestaltung von Überschr iften genauer

I
Verdana
Verdana
STIll OT

S

l.... IM.., IIIT

language grew out of grunts
of effort, Inartlcu /ate chants,
or exclamatlons of fear or
surprlse. Pythagoras and

in Betrach t zu ziehen.

3.4 .8

Überschriften und Fließtexte
Wer immer auf der sicheren Sei te bleiben will , vervllendet Standardschriften, die sowohl bei Windows- als auch bei Mac-Systemen vorinstalliert sind. In Frage kommen dabei - wie schon
erwähnt - Georgia, Trebuchet MS, lucida Sans Unicode, Times
New Roman und Arial (bzw. Helvet ica). Da sich Überschriften
auf der Seite durch ihre Größe und Gestalt hervorheben müssen, werden sie in der Regel in der Schriftgröße 15px und größer
gestaltet. Bei größeren Werten überzeugen die oben erwähnten
Schriftarten du reh ihre Klarheit und formale Schönheit , was von
Designern gerne und häufig ausgenutzt wird.
Fließtexte dagegen werden zum leicht en und schnellen lesen
in Kege lhöhe zwischen 10 und 15px gesetzt (bei Verdana zwischen 9 und 15px). Gute Ergebnisse liefern insbesondere Verdana, Arial, lucida Sans Unicode, limes New Roman und Georgia. Der Charakter und die W irku ng einer verwendeten Schriftart
hänge n stark mit der Gesam tat mosphä re der Se ite zusammen.
Diese bestimm t daher auch die Wahl der geeigneten Schrifta rt.
Die übliche Vorgehensweise, um die Textgestaltung zu optimieren, best eht in einer schrittweisen Verän derung und Anpassung von acht tex tgestalterischen Elementen:

TIPP

Um bel möglichst vielen Systemkonfigurationen ein möglichst
einheitliches Darstellungsbild
zu erhalten, empfiehlt es sich,
Standardschriften zu verwenden.
In Frage kommen dabei Georgia, Trebuchet MS, lucida Sans
Unlcode. limes New Roman und
Anal.

... Schriftstil
font-sty l e: Halfc I normal
... Schriftgestalt
fon t -varl ant: normal I small-caps
... Schriftgewicht

font-we 1ght: bold
(100-900)

I normal I

l1ghter

I bol der I integer

.. Tex ttransform ation

text- transform:
c apl ta 11 ze (Große leitbuchstaben)

I

3. 4 Schriftart auswählen

I

213

..

1ower case (kleinbuchstaben) I
upperCdse (GROSS8UCHSTA 8EN)
Buchstabenabst and
letter~spaclng: ( lnt> ( px. emet c . )

.. Zeilenhöhe
line-height: ( int >( px. emetc. )
.. Einzug
t ext·j nd ent: ( 1nt>( px, em etc. )
.. Wortabstand
wor d-spacing: <int>(px . emetc. )

3,5

Praxisbeispiel

Al s Beispiel betrachten wir die Gestaltung eines Textes mith ilfe
von Flatter- und Blocksatz. Der Vollständigkeit halber werden im
Fl ießtext auch ein paar links gesetzt.
Beachten Sie bitte die veMlendete Kunnotation für die Angabe
der Farbe für die Seitenele mente: Wiederholen sich zwei hexadezimaie Werte fü r den roten, gelben oder blauen 8ereich, so kann
etwa statt f! ff ccOO auch !lfcO geschrieben werden; bei !!f ccee f
gilt dies nicht. Mehr dazu erfahren Sie in Kapitel 4, . Farbgestaltung Web 2.0«.

3.5.1

Fließtext

Zu Beginn wird die Sei te vom Browser ohne jegliche Formatierung zwar klar und deutlich, jedoch nicht visuell ansprechend
angezeigt. Standardschrift i st Times New Roman, die Schriftgröße
ist 16 px, die < h1>-0 bersch rift hebt sich deutlich hervor.

A bs" tzfo 1'111" tie,'ull g
n. I)poproli.ch. Fng., ob .:ch .ll lockK;oO. od or
Form~tiolUlli "-J\C~

Tonol ci;;;1d. wird LI!

unt..r<c"~dhoh ~""~tw",t.t

&lattn. ~ tr;

' ol ~chic<.kucn

be .. ,or fil:- dt

Sltll4l:onm

Ud .. M1d..... m 'p,.["n F2kto ...... """

m..

Z~zlm}.;p,g<I.

dc :Jpro.cJ..> in der <.kr Tc:rt TCrl'~ ..t ;'11>der Me chari,m:.. der
,':I/~mNllmmg 'CI',''';, do-:r U/>lbrucM~lltmw. d.r .i.'It"~21.n Seftwau
eine Rote.

Abbildung 3.82 t>
Nackter Telrt mit Standard angaben

214

3 Textgestaltung

Ene t:berieolmete Bedeulltli hat der G nll.rlf~1t df'rFolllutie lllli ~_ DteSer
.tel! u'lM.e " kr:t.numfUr d:e l ••b ,'-h.: en&' T~ .. ,hr_ WH.>
UlIIeiei'ualJiic Abs~ zwis chen W61tclll oder Bw:hst..btn ti.~cl Zcje
."cn-a.-e'.... oie Lerborht, da dM A~ p'ffi'l".a~. nt ur.t ..~!uo<:I!Ich woß.
Sp~ I!luhm

InJ" _

Als

X HT ML ~Grundge rOst

I

wird die folgend e Strukt ur verwendet:

<!OOCTY PE html PUB Ll C ' ~ II W3CIIO TO XH TML 1.0 s triet ll
[ N' ht t p: // www .w3. orgIT R/ xhtmll / DTD/ xhtmll-strict .
dtd ">
<html xml ns-" http: //www .w3 . 0 rg / 1999 / xhtml
xml :lang- "de" l ang-"de ">
<head>
<t i tl e> Ab s atzf ormati e r ung </ t i tl e>
<me ta htt p-eQuiv- ' content-type " con tent- ' text / html;
eha r se t -u tf ~B " I>

</ head>
<body >
<d iv i d- "eo ntainer ">
<di v id - ' co ntent ">
<hl >Absatz f orm a tierun g</ hl >
<p><s tr ong>Ka p it el 3 I Textges t a ltung
</s trong> , von <em >V italy Friedman <lem></ p>

<p>
Oi e <.1 h ref- "t ypog ra f 1e. h tml ">t ypog r a f 1sehe Frage<1 a >,
ob s1c h <s trong>Blocksatz </s tr ong> ode r
<s trong >Flattersa tz </s trong> besse r fOr die Fo rmatier ung ei nes Texte s eignet, wi rd inver sc hi edenen S1tuationen
<a href-" kap1t e 12. ht rnl ">unter schi ed 11 c h bei! ntwortet<1 a >.
Unt e r ande r em s pi e l en Fa kt ore n wie di e
<ern>lei 1e n1 iI nge<l ern>, d i e <ern>Sp r a e he <I em >,
in der der Text ver f asst i s t, der Me c h a ni s~
mu s der <em >Silbentrennung </ em> sowie der
<em>Umb ru chal gor1thmus</em> de r e1 nge se tzten So ftwa re
eine Ro l l e .

</ p>
</d1v >
</ di v>
</bod y>
</ htrn])
Zuerst wird eine CSS~Da tej style. eH erzeugt und fo lgenderrn aßen
in das < head > ~ Konstrukt eingebunde n:
<link rel- " styl es heet" href- "s ty l e . ess " t ype - " t ext l
css ' medfa- ' scr een ' I>

3.5

Praxisbeispiel

I

215

Dann werden in CSS sämtliche Werte mittels Global Reset auf
Standardwerte gesetzt.

Absatzfonnati('l'ung
Di< tv!lo;;rw.d,. F«.,.r. ob oiob mo,bo ... <><i<:, Flonol'u'" b ...... h ""
Form..oh<nll'lg '"" I T,m I

''8''''', " ... d., ...... <bod .... n Situto:i"".n

IW<",,"'- di<h b._",",","", t UflI<r ""d.,..m 'P""'" FAkt. "'" ...;: d.oo
Z.,k";""y. <k Spruch<. It der <Ior Tm ... tfit.>11ot. <kr
dtr
Sllt."'~~~~~t: ....... d... U",I>=~21fP"'~"'~" dtr .."..rul,mSoft""'!Ir.

r,(..,hn,...,

Abbildung 3.83 ..
Global Reset zeigt seine Wirkung. Es gibt keine zusatzlichen
Abstande, und die Seite wird zu
100 Prozent benutzt.

me RoII.e,
Eu-.. .;,b. lIt, ,,,,,,".. I< ß .<ie0""'S tut d .. G, ...' ..... 'I du )"" 'Rot ..,W';_IAo, ..
ri. U! ""~ u. .. t<nt<n.... Rr do L<O\>.,t..<I ,""'. T "d •• d._ W"l<. """i,In>!l~
Ab.t1."';' ....... ' beR Wo;i",,,, .,.;., Bo,bot.ob<D ",;er Zd, ",d.wn.m dI ,
t...iW:h". d. <Lu A~ pm"....1lI tm!<" d .., dkl1.Ill oß . SP,,""~ mothmmw.

(55:
/ 1< 1. GLOBAL RES ET 1< /

• I
margln: 0:
padding: 0 :

I
/ * 2. Allgemeine Attribu t e */
body (
background' col or: Ilfff:
co l or: 11000:

em
font· s tyle: ita l ic:

I
strong
f ont 'wefght : bold:

I
p

margin: 0.6em 0 0 0 :

I
/ * 3 . Struktur */
flcontai ner {
/ * Allgemeiner Co ntainer fOr das Se itenlayollt. Dieser
kann neben Itcontent auch weitere Blöcke enthalten ,
etwa IJsidebar */
margln: 10px auto:
wi dth: 701:
padding-bottom: O.4em :

I
IIcon t ent {
/ 1< Spezieller Container f Ur den co ntent - Bl oc k. Wird
eingefOhrt , damit gegebenenfa11s ein weiterer Block
216

3

Textgest altung

I

efngefDgt werden kann - /
fl oa t: left;
wfdth: 551 ;
paddfng: O. 4em O.4em 0.4em 0;

I
.-\ bsa 17. f OI'm a l i('l'ung
"~J I ''''I,""",, _I'Il~ F_.

r.. _ 4

"I). "" ... .

Iilod... _ . . . 11.........

*_110 .-

...... T_ , """.--' . ....
,
~ ~ •• lT... _
"" " ...... '-.m
_ ...
~~ .... ~ ... ""''''''1.,....r.. ''Jt.. ..... IU, ........,.'''''
~

~_

.'lI6o_ ....... Io, u....... .....__ ............. S .... M.
, .... 11,.:10.

"'" *........_

e........ Ic<let<J, - - ..... ,.,....... _

Ilo""

.... ... ""' ........... r.... l""' .......... 'I'_,4.

....... , __..~
"~'''''''' """""" IVInen. We' k<l> ..
00-.... Z •• • ,,~ ...... .
1.0<"0-.......... ""' " .... _
.........u.o4kb .. o6o S.......... boo ...,

,,<u

0.-..:0. ........ n.n...,.,"' ....... h dco Eoo .."",.

w.~ ... '"'- .... .,.<0:

-r.,. ..... ....

s:. .." .

~.;,~ "" nNO .... W...... '" . ' _
~
4. ... 111 ~
~.Cit""'~'O< " ;> .. h,w... .... , .. Itt",""~ ......... 400. 1 ~
~
n-., ...J ... ....

R.o.,.,..... ,u. .., .... ........ ... _ , .......
0.. . . _ ... n.. .. ,... _tu......t", "'),,_....... ..
Zo! ~ ~ "'''''

<» 5_ _

",_'.4_

.. Abbildung 3.84
Einfache Formatierung und
Zentrierung durch einen <diV>·
Container

Als Schrift für den lauftext wird die im Web gut lesbare Verdana
verwend et. Alternativ werden Lucida Sam Unicode, Arial oder
eine Serifenschrift benutzt, Die optimale Schriftgröße fUrVerdana
liegt bei 13 px, dies macht mit Standardschriftgröße 16 px, umgerechnet 13 / 16 = 0, 81 2 5, also ungefähr 0.81 em aus. In die (SSSprache übersetzt heißt dies:
body t
background'colo r: fifff;
co l or: fiOOO;
font · fam11y: Verdana. ' Luclda Sans Unl co de ' .
"Lu cfda Grande " , "Tlmes tlew Roman". serf f:
f ont 's fze: Q.8 1em;

Absatzformatierung
"".... ~I " I

t~"'I1. " "",,n~

_

'''''&')0 rr,.,_

tlt. 1):l!9CQ'IfC"'! rol!lo ot> ~ IJ.Io.cYOU . _ 1'1011 .."". 110 .. ..- 1'"
<Wt f ....... *""'j ..... ro ..... .,., . ........ 1-1 ~_ ~ ""'_'"

vI. hoo" I t,

......... ,.. , ..,.,"" _ ....... DtO!on . " " _ ... tlotI
dttI SJ;,r~,.. . do .... 1o. ' .... '." 111 •• _ _ .......
_ _ _ _ ...... do t
_ oön; .....,.,

'"

l_ ' ~ .

t.mM;c".~.

"'>ft ........... ""'.. ,
E ~.IlI:lOI~ l g

0. ..., .«It

-.w"Q"lt do r Ct ... _ _ F...... dl "'tUng

_Mot"'nt""",....." ..,'
... ~ .'.I . - .. T. , I .. ~......... 1•.
...... _ _ on ....... ..:ho,_, ..... Zd •

""",~."...~. ~"..-

~

51-_ _60t
_
. ". 0< • ....,. portI'IOI"tIInt ~" t ... _
l .._
U........

....., ~_...

DQShob _ I tt.otl .' ~l ~"""'*"

d •• , "'Ft. __
d ....,.It .....

bo"_

r"'.~

t

h~

/Ilr o.t ~ ~tl" ~:zu SI ....

I"arwm m VO"o"' ''' ' 01<' "...-.Jt ~
...'"g'''''
QIIo ..
...... " ... _ , u ....... _ .,
"".~

)"'oc~ ...... ",", .,., .!.>tl .... " ..... , oN """''''' ... ~ ...
..... ~t_"cNO< . ... u .. '#d ot(S! t ()un•• ",,,,,t f l;tt t ..s< !/ a.ot T«

....... -.g

"'110'._........ ,,_onc
""

~_, _~

""b~

*' InUOdot

Z ~h

dIo

.. Abbildung 3.85
Als <bo6p·Schriftart wird Ver·
dana in 13px gewAhlt .
3.5

Praxis beispiel

217

Um die Lesbarkeit des Texte s zu verbessern, w ird die ZeUenhöhe
des Textes innerhalb des eont ent-Containers auf einen Wert von
1.6 em gesetzt. Der Bereich zwischen 1.4 und 1.6 em liefert meistens gute Ergebnisse.
lIeo ntent {
fl oat: left:
wldth: 55%:
padd1ng: O.4em O.4em O.4em 0 :
1 ine-height: 1.6em:

Absatzformatierung
l(;,plt" I;I I .."IIt!l" sta ~"ng ,
Oie

~O<\ ~ft"" ~ 6tl

'l!c n ~r.1~'ch~ F" ~ (. ob",

<10. Form~"."mg .. "., T.xt~.

1J1od<.","Z ~r 1: 1 iU1 "r s ~tz !>e Sse< lI.Ir

""]"0'• ......c '" u"",rhl""""" Silu . _ n

1fl1 ';' ic h s;dIj;h blljIll >\O rl QI . Vflts;, ~ rQ rrl ~ ; n F""tcn n ,,," G-;
Z..iIINr);/f~, <1<0 SV~I»I , in "'" 00t Ta<t ,. 11;00" ;.." 00t ....,et,.n"",,,,,

o:Ie' ~"'~ 5oCw;e
5<>11",.", . "'" ~ oh ,
E'n<

'"'

117'Ux:Ml;<KItMr>lJ' der e.roge5(!" tert

"""'g."'oo'"

~; Q'

~ ' .' U """J •• t • • , Gmu "' ~ rt f1 .. r f· ~mlnH .. ru"!1
;l 9:1. 110 " M9., kr" "M m l'Or a g l~ ~I~,( 1Io "9 , T Qxl~' U ~. W"'IQ ,

unrOilo;JOlm~ Q " &t~ n a " ~ w;"cllDn "I a rt~'"

et'5CIwI e "", die LesMO:ei •• d.'l "". ) UQ"

Spn.o1,.. "'''" ""

Abbildung ] .86 •
Eine vergrößerte Zeilenhöhe
erhöht die le~barkeit enorm. In
diesem Beispiel betragt sie das
1,6-Fache der Schriftgröße.

c:...hOlO

oo:kM

B "c h:;t~

Qr.., z.:.;I "

pefm,,.,,,." LI:11e "'Ch "'''!Ict1 9"oB e

"'u"

«:heon' n .."."." g ... grott . , ,,,.

d. "' . '" F,_lIo,J"'" ,,,,,,ch ~ n

WOr'• ..,

d:l<'$l(l t und f(:< g, nll<l Qlg, Ch rn.;SIQ01

d en E.... . "

Im

Wob tu . . .n.

"n ~u ."' ''l cn r... l ~Io< td ,

O:; ' ~"''''' l

~ roß

'(>I"QI , DU Probt ".,

b<l. tdl1 jodoch d... ." "".. bei nltt :ers ~tz • .., ..,h, lYtfC9"m3ßo~o',

", . .. to n.

,"", ~" .r fI~" ...... n ...... .. .."

......hg, "'_'''''~tr.

De ....... ~

w,'"

fl.tt . ... " " "" Toil

"'..... Cl r ~ I""'ombru<:to U " a""'~r <101

SiI ~. " tr. "" U " ~ m . n g~ h . fl.

,nd

Um die Überschrift noch deutlicher von begleitenden Texteie·
menten abzugrenzen, werden zwei Linien eingefügt und die
Abstände zwischen Textelementen erweitert. Dies ist typisch für
moderne Überschriften : Dabei wird die untere Grenz linie häufig
mit einer du rc hgezogenen Li nie (so 1i d) gestaltet, selten auch mit
der gestrichel ten (da shed) oder gepunkteten (dotted) Auszeichnung.

(55:
Deontent . subheader {
f ont-size: 0 .85em:
/ * 852; der Content- Sehr1ftgröBe ... by Defau l t 100% der
BOdy- Se hriftgröBe. al so 8 52; de r Body- Se hriftgr öBe * /
border-t op: so lid 2px Jle36:
border-bottom: so lid Ipx lIeee :
paddi ng: 5px 0 5px 0:
marg1 n: 15px 0 0 0:

218

3 Textgestaltung

XHTM l :

Grst.lltung von Überschriftrn

<p class- "subheade r" )
<s trong ) Kapftel 3 I Textges taltung </s tr ong) .
von <em ) Vltaly Frledman< / em)
</p>

Absatzformatierung

Für die Auszeichnung von Überschriften wird In der Praxis häufig die untere Grenzlinie extra
gestaltet:
Durchgezoge ne linie
h2 I border·bollom, 3px so lid
t/333333 : I

Oo I l>:r~a""lcb! [r.a ~,

01>

'<C" "I<>di:.~" CC., fI~",,""' z ~I"" ""
,.;go." 'o',d'" ~...,chiIKlo....., Si'."',..--

o;J;Q ~orm~T """' ~..., ~ T ., ' ~

V"tl",;115''"5'' b. . ~h"9! Wt. lInt. r ardor an, 'I'.o lo n Fakta ,..., "'" d,.
Z",-_", ~, ~.~ Spr~ " I><> , .. tIiot ",",
<IiN

T...... 1.", ..,.

<11' S.l/;.. rm-~n",;c9 """'''' "".

son................ ..

1-0"'"....,"""

<'I>'."""'"*,i"""". ce, . ,nge"",,,,..,

Eono ;;t, or ~ ."G"" t . a . d<out""v ha t duo G.a ...... "- d .. . F",n",t i""",y .
0. ..... , t. at . .. "'. ..1;>,\..,...., r"" d ~ l. '~ .. I.,t IO n_. r.. ,, ~ , ~or "'MI,
..., ......!., ~~ A~".n ~ e . "',,, non I'> ~rtom """ a "oh".,.n o:nor Z.je
<M l" b.lI~ .~ , d.o doM ~"'l. ""tr'_MT UI1 T.rsd>iedliclt gn::06e

Gest ric he lte Lin ie
h2 ( border . bottom, 3px cld shecl
t/333333: I

Ge punkte te lin ie
h2 I border bOllom, 3px clo ttecl
t/333333: I

.....""".ren

Spr~OtJe ., ~ . n

"'o S,.

,_t... t", a.n E,n'iI' T;m Wob.u n

O., l>ilb ",h.",t fl. Tt . ... ... ~ ..
~I I r c.. f rnaume " ... oh.n .... Of.om on

~.umt.n

on.

T .. , 9'0:0" <r<>S

"""""'01" '''''3'. 0 . . ....'*".....

<11,,' 01' """ tII!" .in.n g""c:~""
bm9l' t jIxloleh G~on, (I~~1 1)ogo FI ~u.,... ~t, ~.,

,...,.t..,• ...,h'''- f l,"orTand . nh to'"
"" ruhI\I , ... ~.oond or.

''''''

~ rn ~ .

O.. h olb ""U Ft.Tt.rut •• ,, "' T.. I
" """ tIor Z""""-ruc h un d/o ~" tIJoo

9"'""'~ """q """'!leil'T<l!t 11M.

3.5.2
Übersc hrift
Eine schlichte Format ierung der Überschrift durch Verdana bzw.
Times New Roman liefert bei 2,4-facher bzw. 3-facher Schriftgröße und 100% -Zeilenhöhe gegenüber dem Fließtext zwar gut
leserliche, jedoch aus typografischen Gesichtspunkten nur wenig

.. Abbildung 3.9]
Zwei Grenzlinien trennen Elemente unterschiedlichen Rangs
in der Tex thierarchie voneinan der
und sorgen für mehr Ruhe und
Klarheit auf der Seite.

ANMERKUNG
In diesem Abschnitt werden
links zunächs t ausgelassen, anschließend aber hinzugefl€t .

beeindruckende Ergebnisse.

(55 :
lico ntent hl (
font-faml1y: Verdana . "lime s New Roma n" . sans-seri f ;
f o nt- slze : 2 .4em:
f ont-wefght: no rmal:
)

lucida Sans Unicode macht bei 2,9-facher Schri ftgröße eine gute
Figur. Eine Verringerung des Zeilenabstandes um 1 px drückt die
Buchstaben zusammen und verleiht der Überschrift eine kom-

_ __

Absatz fo rmati eru ng

... _."".....,_
.....
-... .. ..".........
....,_ ...,.... .....
-......--.,

_ ~. ---

----.-. . ...,.--. .... , ...... 'f . .. ,. _

.....

paktere und stärker zur Geltung kommende Gestalt.

licon t ent hl (
font-famlly: " Luclda Sans Unlcode · .
"lime s Ne .... Roman " , Times, se rlf:
font- s lze: 2.gem :

... Abbildung ) .88
lucida Sans Unicode im Einsatz :
Eine schöne, klare Schrift hebt die
Überschrift vom lauftext ab.

3.5

Praxisbeispiel

219

I

Absatz fo rmatieru ng

.... .. .......
--_
.......-_........ ,._ ....

0.'...... """".... ...., -..... _ ........ , _ ..
_ ~"'

"

"."".... -...

,

f ont-weight: normal;
letter- spa c1ng : - l px :

I

.... Abbi ld ung 3.89
l ucida Sans Unicode mit verkleinertem Buchstabenabstand

Mit Georgia errei cht die Überschrift eine weniger formale, dafür
aber sc hönere Form, die vor allem durch Serifen gewährleistet
wird (siehe Abbildung 3.90). KapiUlchen wirken zwar passend,
verschlechtern aber leicht die lesbarkeit (siehe Abbildung 3.91).

AI)S<l tzfo nnu I iel'ung

......."'..................... .....
__
..
....... _'"

IJcontent hl [
f on t -fam1ly: "Lu clda Sans Unlcode" . " T1mes New Roman ' _ Tfmes . ser ff:
font-s1ze: 2.gem;

.... Abbildung J .90
lucida Sans Unicodewird durch
Georgia ersetzt.

f ont-weight: normal:
letter-spacing:-lpx:

_

•• h.,.. .........,.... _ _ ..., _. _ _ ...... "
.--v,._._~,

_~

~

'

I
Aß..,·\1ZFORH\11 ERllNG

',-_
-_
----_

__._
- _

' -...- ......'--" ' -................
. .,.."'
.. '"
.--""_.".
. ..-... ..... .........._,._.,""
.... ....
.... Abbildung 3.9'
Georgia mit Kapitälchen . Schön bei langen Übe~chrifte n jedoch
nur schwer lesbar.

Absa 17jormatie l'ullg
._.,
..___,- -......." •• ".......... _ ..... _ '''''M ....,,_ ..
....._""
'._""......
........".....__... -.
--'_.........-_,,_

Verringert man den Buchstabenabstand und ersetzt die Standard schriftform (norma 1) durch Kursive, so erhält man ein gut lesbares
Textbild. das angenehm wirkt und schnell zu erkennen ist (siehe
Abbildung 3.92).

(55:
IIcontent hl
font·style: 1ta 11c:
letter-spacing: -lpx:

_

.~

.... Abbildung 3_92
Georgid dis Ku~ive: schön, deutlich, lesbar

Um auch bei längeren Überschriften eine opt imale lesbarkeit
sicherzustellen (vgl. Abbildung 3.93), setzt man nun eine passende Zeilenhöhe fest:
flcontent hl

TlJpografie uncl
A ·bsa tzj61'mal iel'lI l1g

__

.... ....... __..,_ ........... _"" .
"---"
...."'....._
-''''''..... _......
""-"-"... _.....
. _,.,-_ .~--

_

.... Abbildung 3.93
Bei langeren Überschriften übe rlappen sich Oberlängen mit
Unterlangen. Zeilen liegen zu nah
beieinander. Dies liegt an der Zeilenhöhe (vergleichen Sie fund p).

220

I

3 Textgestaltung

line-height

1. 2em;

Um nun noch den zu groß geWählten Abstand zwischen der
Überschrift und der Grenzlinie zu verringern, verändert man die
Elemente der Klasse subheader :

I

Deontent .subheader I
font-sfze: O.8Sem ;
border-top; 2px sol id !Je36:
border-bottom: Ipx solid fleee:
paddfng: Spx 0 Spx 0 ;
~argln: 8px 0 0 0 :

Das Ergebnis lässt sich sehen (siehe Abbildung 3.94). Mit ein
wenig CSS und bl oßen Standardsc hriften kann man eine durchaus ansprechende Te)(tdarstellung auch bei größeren Schriftgrößen erreichen. Das Ergebnis sieht dann w ie folgt aus :

(55 :
!Jcontent hl I
f ont-famlly: Geo rgfa. " Lucfda Sans Unfeode".
New Roman ' , Tlmes, serff ;
font-we i ght: normal;
font- style: ftalfe:
lfne-hefght: 1, 2ern;
l et ter -spaefng; -lpx;
font-sfze: 2_gem:

TYI>ogmfie lIud
Absu /z!u/'IJ/Cl/ ienlny

....__ ... _=-=--"-- - .._.........,_--'
-_._---,._
......_
...
..........
...........
_
-_-- .. --."--.,,
"

• Abbildung 3.94
Die Zeilen höhe der
~Tfme s

Obe~chrift

wird auf 1.2 em gesetzt.

Oder schöner und kompakter aufbereitet so :
!Jeontent hl I
font: ftalfe normal 2.gem/l.2em Georgfa, ' Luefda Sa ns
Unf eo de". ftlfmes New Roman". lime s . serff :
letter- spaef ng: - lp)(;
}

Beim Design von Überschriften müssen Designer beachten, ob
der Zeilenabstand auch bei Überschriften mit mehreren Wörtern
ordentlich gesetzt ist . Kleine Veränderungen der Buchstaben- und
Wortabstände können für eine enorme Verbesserung der lesbarkeit sorgen. Au ch Kapitälchen können eine durchaus positive
Wirkung erzielen. Außerdem kann sich die Überschrift durch eine
besondere Farbe hervorheben, obwohl dies nicht unbedingt se in
muss. Da Überschriften im Web üblicherweise Permalinks sind,
müssen eventuell auch sämtliche link-Zustände einzeln unter die
Lupe genommen werden.

3.5 Praxisbeispiel

I

221

Typogrqjle ulld
Absa t7,forma tie rillig

Absal7J'onllalienmg
Cte tV!1n~r" li'r.h .. r,<>IJII', 00

.,,1'1 "'ockoatz ",:!I r Hott . '. ... b...... 1\i

. . . .-. .
"'"'

,,~oWd,, ~ . ". ~ • • oll

.... r""",,_ .....

70 ....

..

"9'1", " .. ......" , _n ........ _

~

40, Tb' . .. r~, .... t , de< Me<h ..........

~~_tIor_

Scft" ... "M Rollt.

,<,...

011 , ~

AIl . und.

,<ti<,h.., Wottorn ""... "",n,,,oo.

<W>l ...c~ ~ Sp/vrqo moo;;t, ......... .

Besonders w ichtig ist ein deutli cher Kont rast (Form, Größe, Farbe
usw.) zwischen den Überschriften und dem Fließtext . Dies lässt
sich daran ablesen, ob eine Überschrift schon beim ersten Blick
auf die Seite direkt auffallt und sich vom übrigen Text deutli ch
abhebt. Ist dies nicht der Fall, so sollte die Darstellung der Überschriften überarbeitet werden .

_..

-_.......-_~-_

~-_..

d ,~

o~ r ><:!W~o".. n

' ... nn ,,! . Unt"'llr.;1Ortl" $~,, ' e n
Kn" in d,.. d~ r Ti<' "" r f~ !i ~t ;" ,

unr~!mje~1I A ~ t ~ n "" 2w,öCh ", Wörtoom DdlIr &uct"a.blIn Ul&r Zw,lw
er,q,,,,,,,,n "" l~b...-l< e<t . d8 d~ , ... ""e perm-.n' ...... er-.:tlle Olrch (1"l'Ile
Spru "'l" m.ld,.,., "'.... ..

""'.. ~e '" """'. . . _ ... l ..... ""e., <I> .... .ouqo 1*"''''''''

.. Abbildung 3.95
Eine abgerunde te und klare Textgestaltung

~,~

a oeo- I'Intt e .... atz . ":..,,,

"'\11'' '', w . d in

E.... übllrg~tlIIDilt~ 8WouIU~ t.;,l <lOI Cr ....... " rt dll' F .... rn.oll"run g
01,..,,, , r~r t~ ... M e .~n t e '...., f ur eile Le ,Mt"lre<t ..... e. Te.' .... dN _te.

.. ...

unr......

~lCn ßlo~ botl

r ""\Q'

der ~l"ot..nl"n" der $.l/Jen"""fl{m~ ."""" ~ '" UmOtlJf;; IWi)or"r""", <1er
"' ''J.'~t.t. n ~oH ... ,., •• , . ~uI~ • .

""'0 1A:....~"'fIO
owtLlrlg n.. co. " ro~ ... n dor I;ormo' ..... ~g
""' .... ~ , ... NI .....I.c' ....... ltIr <M l .... ' . .. , _ . , .. ,. . ...
0110;" ,

FCrm;lt i<'U1O',I ~.n<;I ;

Sotu311<)Oe n ""' N 'u hi",lIi c h
F. ~ l or"" ... ii , .. ~~rl~9f',

1>0'-""''''''' . . . ,,, or.dot ....pooIon f.'",... "". d..

"",.. lGI'o4d'>eh
01<. <:;0 • ..,1..," _

Z~~"' .

ru r d,Q

~

-

-

"

Rubyon Railsworkshop

..

._".-

the KcohW?1ieI11'tI1

..

J,

..-

TlII Dnian f~
_- ~ _

.. Abbildung ].96

.. Abbildung ].97

Informelle ÜbetY:hriften im Überblick. Von links
oben nach rechts unten: Kineda .com, Sazziest.co m,
Geeksmakemehot.com, JeffCroft.com, Mlkeindustries.com

Solide, gut lesbare Schriften für seriöse Webauft ritte:
Cameronmoll. com, Randsinrepose.com, Niallkenedy.
com/blog, Emaglnaclon.com.ar/cym, Barte/me .at,
Trabian.com

Eine informelle Webseite wi rd mit einer attraktiven, visuell
ansprechenden Schriftart entsprechender Größe gut realisiert
(Siehe Abbildung 3.76). Ein seriöser Webauftritt wird dagegen
mit einer prägnanten klassischen Sch riftart besser gelingen (siehe
Abbildung 3.77).

3.6
Eine Übersicht über 35 hoc hwertige kostenl ose Schriften finden
Sie unter http://www.drweb.del

fon es-schriftarteni ] 5 -freefontsdownload.5h eml ( linkcode 104).

222

3

Textgestal t ung

Unkonventionelle Schriftarten

Möchte ein Webdesigner seine Seitenbesuche r durch unkonventionelle Überschriften beeindrucken, so wird er sich auf die
Suche nach spezie ll en Schri ft im Web begeben müssen. Dabei
wird man schnell enttäuscht. Zwar bieten zahlreiche Quellen
Tausende von Exemplaren zum kostenlosen Download an, die

meisten davon eignen sich Jedoch kaum für einen seriösen Internetauftritt.
Dennoch können auch Freeware-Schriften ihren Dienst bei dieser Aufgabe genauso leisten wie klassische hochwertige Schnitte.
Ein kurzer Überblick der besten Exponate, die man nicht nur für
die Gestaltung von Überschriften, sondern zum Beispiel auch für
Logotypen verwenden kann, wird Ihre Schriftsuche erleichtern
und besch leunigen . Diese Schriftarten durfen sowohl in privaten
als auch in kommerziellen Projekten ohne Einschränkung verwendet werden .

ClI:\HIS

Hold
:-' , ,""I
)"

.

48·'\:

1\(';>;lfLu', IIU/I!,

Zwei Musterbläller zum Nachschlil@:enfinden Sie auf den folgenden Selten. Dort werden 19
hochwertige kostenlose SONie
ein Dutzend kostenpflichtige
Schriften in verschiedenen Varianten zur Schau gestellt In
ecldgen Klammern links steht die
Nummer der Schrift; über die
Sie auf der Webseite des Buches
weiterführende Informationen
erhalten können . Rechts finden
Sie den HEX-Wert der Farbe.

50.,:
Regu lar. Italir. Bold.

SHARE FONT.

Lf e,f N()lIM, SO;)X
Gf N I f! ~1,

TIPP

AUOIMAT. SO.x:
Regular. ltaJic. Bold. SMAll-CAPs-

SI1., 501'x:

Ik~lI l ;ll. 11,1/]( '.

I

Bold, Bold !talie

BII "IU I\~1 V11~.\ Sf-Hfl, 3HI'\:

Ikquld f. II,Ii/{". Bold , S\I-\l1 -C -'lI'"
PICIARNIQ 4üpx:

Rcgular.ltallc, Bold, SMAll CAPS.. ··

SMAll- ( APS

C.... IW O , 44px:
Regular. Irahe Bold. Bold Ir.lic
SW TAu.X, 38px :
Regular, Italie. Bold. SMALL'CAPS
V.... IWm5AIZ.45Px;

Regular. llalir, Bold, Sold /ta/ir. s..u.c..rs

Unter den kostenpflichtigen Schriften ist die Auswahl groß, dabei
entspricht die Qualität meistens dem Preis. Ein Überblick der
von Webdesignern am häufigsten verwendeten Schriften soll

.. Abbildung3 .98
Kostenlose Schriftarten in einer
Übers icht

die Suche nach einem Kompromiss zwischen Qualität und Preis
erleichtern .

3.6

Unkonventionelle Sch ri ftarten

I

223

Futura Univers
Helvetica Frutiger
Neue Helvetica Gill Sans

Typogra
ABCDEFGHUKLM NO
PQRSTU VWXVZabcd
erghlJklmnopqrstUYW
xyz&0123456789fE
... Abbil dung ] -99
ITC FrankIin

Avenir Myriad Pro
Eurostile Akzidenz
FF Meta Linotype Syntax

Typogra
ABCDEf'GH ljKLM
NOPQRSTUV\VXY
Zabcddghijklmnopqr

stuvwxyz&012345678

Freight Warnock Light Italic
3.6.1
Einige der unt en aufgefü hrten

ü b erlegungen stamm en aus dem

Beitrag .15 lips 10 choose a gJod
te)(t type. von Juan Pablo de Grigorio (hrrp:lltypies.blog5po t.com!

2006l11115.tlps-ro-(hoose-good.
text-type,h t ml, Unkeode 105),
einem Schri ft- Designer aus Chile.

voneinander unterscheiden und

wodurch sie geprägt sind, bleibt
dem neugierigen Leser zum

Selbsts tudium überlasse n.

Krite rien zur Auswahl einer Schriftart

Bei der Fest legung de r Typografie im We bdesign stehen Designern zahlreiche 5chriftfamilien zur Verfügung. Abhängig vom
Kontext, in dem eine Sch riftart eingesetzt werden soll, passt sie
besser oder schlechter. Welche Krit erien der Schriftart ziehen
Designer häu fig zu Rat e, um die Auswahl einzuschränken? Un d
w ie vermeidet man, dass eine teu re Schriftfamil ie, die in das Layout beinahe perfekt zu passen scheint, im Endeffekt unbrauchbar
wirkt, da sie sich mi t übrigen typografischen Vorgaben des layouts nicht vereinbaren lasst? Es folgen einige Krit erien, die sich in
der Praxis bei der Auswahl einer Schri ft als hilfreich und nützli ch
erwiesen haben.

3.6.2
In der Aufl is tung st e hen Typen
der Schriftarten. Inwiefern sie sich

... Abbildung ] .10 0
Adobe Caslon

Welchen Zweck 50 11 die Schrift erfüllen?

Die Auswahl einer Schrift hängt vom Zweck ab, den ein Designer
mit ihrem Einsatz erreichen will. Entscheiden Sie sich für eine der
folgenden Schriftarten:
... klassische Schr iftart mit st renger, formaler und sol ider Erscheinung (n ach Klassifi kationstypen sortiert).
.. o/d style und humanist (Adobe Jenson, Janson, Garamond,
Bembo, Goudy O/d Style, Sdbon, PaJatino),
... baroque ser;! (fimes Roman, Baskervi/le)
... grotesque (Stephenson Blake Grotesque No. 6, Conden5ed
Sans No. 7, Monotype Headline, Grotesque, Helvetica, Univers, Akzidenz Grot esk, Frank/in Gothic und Royal Got hiC)
... neo-grotesque (Aria/, Edel/Wotan, Univers, Helvetica)

224

I

3 Textgestal tung

... Modern (Bodoni, Didot, Century Sehoolbook, Computer
Modern).

... eine attraktive Schrift mit eleganter und leicht spielerischer
Erscheinung,
... humanist (Optima, Gill Sam, Calibri, Lucida Grande, 5egoe
UI, Myriad, Frutiger. Trebuehet MS, Tahoma, Verdana)
... geometrie (Futura, Erbar. Eurostile, Avant Garde, Century
Gothie, Gotham)
... slab serif-Schriften (viele, aber nicht alle: etwa RockweIl,
Egyptienne, Clarendon),
... eine Handschrift (informelle, individuelle und freundliche
Erschein ung, script fant - Corinthia, Cezanne, Sloop) oder
... eine dekorative Schrift (d ient nur Gestaltungszwecken und
erzeugt eine informelle Atmosphäre).

3.6.3

FrtJfiger:
The Quick Brown
Fo. Jumps Over
The l.azy Dog.

I

9

Clarendon
Tbe Qulcll Bl"OWll g

av.r

Foa: JwnlM
Tb. La.7 Doc·

.."'.....

Ist die Schriftfamilie vollständig?

Prüfen Sie zuerst immer, ob die Schriftfamilie sämtliche Buchstaben enthält. die Sie in Ihrem Design brauchen. Bei billigeren
Schriften werden etwa deutsche Umlaute oder das Eszett nur seiten vorkommen.
... Abbildung ) .101

3.6 .4

Wi e viel Platz benötigt die Schrift?

Überlegen Sie sich, wie viel Platz Sie der Schrift zu ihrer Entfaltung einräumen möchten. Verschiedene Schriften benötigen
unterschiedlich viel Platz - selbst in der gleichen Schriftgröße.
Wählen Sie einen der Kandidaten, der ihren Bedürfnissen am
besten entspricht. Beachten Sie, dass Serifenschriften in großer
Schriftgröße eleganter und attraktiver erscheinen als serifenlose
Schnitte.

3.6.5

Detail s sind s ch ön, aber nicht immer prak tisch

_CIIoI'.

--,--

SchrifUamilie
Schriftfamil ie

_.

Schriftfamilie

Um eine optimale lesbarkeit zu garantieren, verz jchten Sie auf
Schriftarten, die Details stark betonen und komplexe oder ungewöhnliche Formen enthalten. Bei ku rzen Passagen (etwa Marketing- Slogans) können Sie solche Schnitte dagegen durcha us riskieren, um ein wenig Spannung in die Typografie reinzubringen.
Achten Sie Jedoch darauf. dass die Überschrift immer deutlich
bleibt.

3.6 .6

Frutlger (humanist), Clarendon
(slab-serif), Futura (geometrie),
Helvetica (grotesque). Bodani
(modern), Cezanne (script)

Schrihfamilie

-

S chriftfamilie
... Abbildung ) .102
Verschiedene Schriften benötigen
unterschiedlich viel Platz - selbst
in der gleichen SchrihBröße.

Soll die Schrift dominieren oder soll sie s ubtil sein?

Beachten Sie das Gewicht der einzelnen Buchstaben einer Schriftart. Vermeiden Sie lange Textpassagen, in denen dünne Buchstabenformen benutzt werden. Diese erschweren die lesbarkeit
des Textes . Dünne Schriftarten wirken subtiler und unterstützen

3.6

Unkonventionelle Schriftarten

I

225

gg
.... Abbild un g 3.103
Ein _g_ ist nicht immer ein "g«.
Das Zeichen links ist für den Ein-

satz in FlIeßtexten zu komplex
- hie r passt ein gewöhnliches ,.g.
besser. In kurzen übersc hriften
kann es dagegen interessant und
ungewöhnlich erscheinen und
somi t die Aufmerksamkeit der
Leser auf sich lenken.

ABC Immobilien GmbH
ABC Immobil ien GmbH

Inhalte, treten aber nur selten in den Vordergund, um eine eigenständige Botschaft zu vermitteln.

3.6.7

Wie se he n Buchstaben in der Großaufnahme aus?

Nehmen Sie Schriften ganz gen au unter die lupe. Bei der Auswahl
einer Schrift untersuchen Sie, wie Buchstaben in der Großaufnahme aussehen (100 bis 150 pt). Zeichnen Sie etwa eine Achse.
die die Buchstaben der Schrift (etwa beim kleinen 0) in Mei gleiche (obere und untere) Flächen aufteilt . Im optimalen Fall sollte
die resultierende Achse gerade sein. Nach Ansicht vieler Experten
ist die lesbarkeit von Schri ften mit dieser Ausrichtung besser als
bei Sch riftarten mit schrägen diagonalen Achsen.
Betrachten Sie verschiedene Schnitte der Familie in der Größe,
in der Sie sie benutzen wollen. Sind Kursive lesbar? Sind Kapitälchen deutlich? Wie gut funktionieren Fett und Kursive zusammen? l ässt sich etwa das Wort HOCOCO« problemlos lesen?
Lassen sich 0 (Null) und 0 (kleines 0) im Wort .. 1010« deutli ch
voneinander unterscheiden? Wie sieht es mit Ligaturen in .. floria.
und »Eigenschaft. aus?

.... Abbildung ].104
In der Typografie ist dick meistens
besser als dünn.

3.6.8

Open Type, True Type oder Pos tS cript?

Grundsätzlich können Schriftarten in verschiedenen Formaten
angeboten werden. Falls eine Open -Type-Version verfügbar ist,
sollten Sie sich in der Regel für sie entscheiden. Das Open-TypeFormat überwindet wesentliche Begrenzungen der weitver-

aeo
.. Abbi ldun g 3.105
Je gerader die Achse durch die
Buchstaben einer Sch rift geht .
desto besser sei die Schrift zu
lesen, meinen einige Schrift-

DeSigner.

breiteten Font-Formate True Type und PostScript wie etwa die
Gestaltung von Ligaturen. Es erlaubt eine dynamische Zei chen kombinationen und bietet eine bessere Unicode-Unterstützung.
Auch sind Open-Type-Schriften immer plattformübergreifend
und können daher auf verschiedenen Betriebssystemen eingesetzt werden .

3.6.9

Font-Verwaltung

Um Schriftarten auf die oben erwähnten Eigenschaften hin zu
überprüfen, können Sie speziellen Anwendungen zur Schriftverwaltung wie etwa Linotype FontExplorer X, Font Card, Font
Frenzy und andere Programme verwenden. Neben kostenpflicht igen Produkten gibt es auch viele anspruchsvolle kostenlose
Alternativen. Eine Übersicht hierzu finden Sie im Beitrag »20 Font
Management Tools Reviewed« (http://www.smashingmil8azine.
com12008/0910512 5-fon t-manage men t -tools- revie we d, Lin kc od e
106)

226

I

3 TextgestaJtung

3.7

I

Ein Blick über den Tellerrand

Beobachtet man die aktuellen Entwicklungen im Bereich der
Webtypografie genau, so stellt man fest, dass Webgestalter immer

wieder versuchen, die eingeschränkte Auswahl der Schriften im
Web durch neue Techniken der Schriftersetzung zu erweitern.
Das Ergebnis dieser Bemühungen beeindruckt zwar häufig aus

visuellen Gesichtspunkten, genugt aber selten den Anforderungen des barrierefreien und benutzerfreundlichen Webdesigns .

Somit stellen Standardschrjften die einzig sichere Option dar, um
sehenswerte Ergebnisse zu erzielen.
Die zukünftige Entwicklung der Webtypografie lässt sich nur
schwervorhersagen. Eines ist jedoch sicher: TraditionelteSchri ften
werden im Web weiterhin zum Einsatz kommen, während Designer gleichzeitig auf der Suche nach neuen Möglichkeiten immer
wieder zu neuen typografischen Möglichkeiten greifen werden.
Windows Vista enthält sieben neue eindrucksvolle Schriftschnitte, welche von renommierten Typografen speziell für
Fließ text im Screendesign entworfen wurden und die lesbarkeit
von Webinhalten deutli ch verbessern sollen. Windows Vista enthält zwei Serifenschnitte, vie r Sans-Serife und eine nich tproportionale Schrift.

... Abbildung ] .106
Oben das normale Schriftbild ,
unten Cleartype

T Abbild ung ] .107
Elegante Sc hriftdarsteUu~ , die
man bisher nur von Mac 05
kannte, wird in Windows Vista
mit der verbesserten CleartypeTechnologie umgesetzt .

_.._-==

.-

---

:-

-I

I

2Z7

Die neuen Schriften sind lizenziert und werden nur als Bestandteil
\/on Window5-Produkten zum kost enlosen Download angeboten . Auch Mac-User können sie benutzen : Man findet sie in dem
Package Powerpoint Viewer 2007 unter http://www.microsoft.
comldownloads/details. aspx ?fa mifyid= 0480C84 0-1 4E 1-4 6708DCA-1902A8F07485&dlsplayfang=en (Linkeode 107), Segoe VI
kann man außerdem \/on http://www.softpedia.com/get/Others/
Fant - Vtils/Segoe- VI- Wi ndows-Vista -System-Fant.sh tml (Lin kcode
108) herunterladen.

Die Screenshots in Abbildung 3.107 entstammen der offiziellen
Microsoft-Broschüre .Now Read Thisc und wurden dem Beitrag

3.7 Ein Blick über den Tellerrand

.. !he Next Big Thing in Online Type «4 yon Anne yan Wagener en t-

nommen.

3.7.1

Se rifen: Cambria, Co ns ta nti a

Ursprünglich war Cambria als Schrift für Geschäftskorrespondenz,
E·Mails und Webseitengestaltung gedacht. In jeder Schriftgröße
macht die Seri fenschrift eine elegant e Figur, die durch prägnante
Buchstabenbilde r nich t nur leserlich ist, sondern auch attrakt iv
wirkt.
Mit ihren ein wenig zackigen Kurven wirkt Constantia sehr
sauber und leserlich. Sowohl Kapit älchen als auch Kursive beein·
drucken durch ihre schöne und deut liche Gestalt , die auch be i
fetten Schriftgraden zu beeindrucken weiß. Constantia wurde
als eine ... flexible« Schrift mit dem Zweck entvvorfen, im Screendesign genauso gute Ergebnisse wie im Printdesign zu liefern.
Tatsächlich zeigt die Schrift ihre Stärken in beiden Medien.
CiJmbrla

ST ILI. OTIIERS CI.AIM THAT

STILL OTHERS CLA1\t THAT

language grew out of grunts
0/ elfort, inarticulote chants,
or exdamations offear or

language grew out of grunts
oi effort, inarticulate chants,
01" exclamations of fear or
surprise. Pythagoras and

surprise. PytlJagoras and
3.7.2

Sa ns -Serife n: Ca lib ri, Cand ara, Co rb e l, Segoe UI

Calibri zeichnet sich insbesondere du rch abgerundete Ecken
aus, die für eine sanfte, angenehme und sachliche Atmosphäre
sorgen. Optimale Proportionen einzelner Buchstaben erzeugen
ein scharfes Textbi fd. Somi t eignet sich Calibri sowohl gut für
Fließtexte als auch {ur Überschriften und kann als die universelle
Schrift der Windows·Famifie bezeichnet werden. Gute Lesbarkeit
wird durch großzugig gewählte Längen der Buchstaben gewährleistet. Diese leiten das Auge und ermöglichen ein schnelles und
benutzerfreundliches lesen.
CIIlibrl

c.....~

STill OTHERS CLAIM THAT

STILL OTHERS CLAIM THAT

language grew out of grunts

language grew out of grunts

0/ ef/ort, inarticulote chonts,

of eifort, inarticulate chants,

or elCciamations of fear or
surprise. Pythogoras and

or exclamatlons of fear or
surprise. pythagoras and

Can dara gil t als eine informelle serifenlose Schrift des Windows·
Pakets. Sie wirkt wen iger solide, dafUr aber lei cht spielerisch und
4 Poy nter Magazine, Marz 2004 , www.poyntrr.ory'column.asplid-47&
aid_7868l (Unkcode 109)
228

I

3

Textgestaltung

attraktiv. Verwi rrend wirken vertikale Striche, die insbesondere
beim Kleinbuchstaben a hervortret en. Candara hat zwar einen
leichten Hang zu älteren Buchstabenformen, kann aber als eine
gute Alternative zu Comic Sans dienen.
Corbel ist eine lesbare und sehr saubere Schrift, die als ein
eleganter Ersatz für Arial und Verdana verwendet werden kann.
Vorrangig durch starke geometrische Formen - ob bei Versalien
oder Kursiven - kommt Corbe! gut an und wirkt angenehm und
erfrischend.
Bereits vor der Veröffentlichung des neuen Betriebssystems
hat die Segoe ur wegen ihrer Ähnlichkeit zur wel tbekannten Frutiger der Firma Microsoft erhebliche Probleme berei tet. Als Ersatz
für Tahoma UI,d Arial bietet Segoe ur glatte, abgerunde te Formen
mit optimaler Zeilen höhe und Buchstabenlänge. Im Web wirkt
Segoe UI sehr deutlich, was nicht zuletzt auf sorgfältig aufbereitete Buchstabenformen zurückzufüh ren ist .

3.7.3

I
""'"'

ST IL.L. 0 HERS CLAI M THAl

language grew out of grunts

0/ effort, inarticulate chants,
or exclamations offear or
surprin , Pythagoras and
_

UI

STili Oll

!S:lAJM THlI..T

language grew out of grunts

of effort, inarticu!ate chants,
or exdamationals of fear Cf
surprise. PytfKJgoros and

Monospaced : Consolas

Wer häufig programmiertoderQ ueli texte ins Netzstellen möchte,
wird mit Consolas gut bedient. Consolas ist mit der Courier kaum
zu vergleichen und kann die Lesbarkeit der Quelltexte in jeder
Programmier- oder Webumgebung stark verbessern.

Consolas
<fe.tPencl l O' "root •• 1n&_ · http ://'ch•• a5 •• icro5 0f t .co./2ei)/ .a~1·

• • lns,do f "o.fl nltlon"
FontFan Ily_'Cl l lbr-l" )

3.8

Zusammenfassung

Einige wesentliche Punkte dieses Kapit els werden im Folgenden
knapp zusammengefasst . Sie sollen Ihnen als Faust regeln dienen,
die Sie während des Designprozesses verwenden können.
.. Printausgaben arbeiten mit 1 200 dpi, Bildschirme mit höchstens 96 ppi, Macs mit 72 ppi/1oo dpi. Jedes Pixel auf einem
Pe-Bildschirm ist um das 1,3-Fache größer als auf einem MacBildschirm. Dies macht einen Unterschied von zwei bis drei
px-Einheiten aus.
.. Starker visueller Kontrast lässt sich durch Hervorhebung
erzeugen : Textaussagen in einem _lokalen Kontext« werden
durch Kursive hervorgehoben. Zent rale Aussagen werden fett
geschrieben . Farbige Hervorhebung und Unterstriche sollten

).8

Zusammenfassung

I

229

..

..

..

..

..
..

..

..
..

..

..
..

2 30

I

3 Textgestaltung

nur fOr Links verwendet werden. Versalien sollten verm ieden
werden.
Einzüge bzw. Abstände zwischen Absätzen werden erfahrungsgemäß auf 6 bis 7 Prozent der Zeilenlänge bzw. das 1,5fache bis Doppelte des Zeilenabstands gesetzt.
Eine optimale Zeilenlänge liegt standardmäßig bei 52 bis 78
Buchstaben pro Zeile (inklusive Interpunktionszeichen und
Lee rzeiche n).
Die Zellenlänge ist proportional zum Zeilenabstand zu wählen.
Die obere Grenze liegt dabei beim 1,5- fachen der x- Höhe.
Der Zeilenabstan d sollte sich um zwei bis vier Größeneinheiten unterscheiden .
Die Zellenhöhe lässt sich über die l1ne-he1ght-Elgenschaft,
Unterschneidung und mittels der letter-spac1 ng-Eigenschaft in CSS einstellen. Beide Werte (Zeilenlänge sowie Zeilenhöhe) können die Lesbarkei t von Texten entscheidend
beeinflussen.
Für die Absatzformatierung im Web eignet sich f lattersatz
besser als Blocksa tz,
Kontraste können in Form von Bildern, Zitaten und kurzen
Zusammenfassungen erzeugt werden. Die Textdarstellung
eines Kapitels, in dem keinerlei Abschnitte oder Übersch ri ften
vorkommen, Ist nach jeweils fünf bis sieben Absätzen durch
kontrastierende Elemente aufzulockern,
Weißer Text auf schwarzem Hintergr und hat einen höheren
Kontrast als schwarzer Text auf weißem Hintergrund. Bei
dunklen Designs müssen Zellen mehr Zwischenräume haben,
Buchstaben weiter auseinander liegen und einen geringeren
Fettgrad haben .
Die Standa rdschriftgröße liegt bei 16px, als Standardschrift
wird Times New Roman benutzt.
Relative Größenvorgaben werden für eine plattformObergrei fende Textgestaltung verwendet Absolute, direkte Forma tierungsan weisungen sollten nach Möglichkei t vermieden werden. Ein ausgewogenes Verhältnis zwischen em- (alternativ
Prozentwerten) und px-Einhei ten Ist optimal.
Serifenschriften wie Times New Roman oder Georgia eignen
sich grundsätzlich besser für Fließtexte, Sans-Serlfen wie Verdana, Trebuchet MS und Arlal sind eher fü r den Einsatz In
Überschriften zu empfehlen.
Eine reduzierte MInimaldarstell ung der Inhalte (etwa in einer
Druckversion) muss immer möglich sein.
Die dynamische Anpassung an die Möglichkeiten des Benutzers Ist wichtig . Barrierefreie Textgestaltung soll es dem
Anwender erlauben, Texte beliebig zu skalieren und Kontraste

I

zwischen Text- und Hintergrundfarben einzustellen. Alternative Beschriftungen für Bilder und ein strukturiertes (55basiertes Markup sind ein Muss .
... Durch Simple Image Replacement (Radu-Methode, PharkMethode. Malarkey Image Replacement), Dynamic Image
Replacement (SIIR, P+( DTR) und Dynamic Flash Replacement (siFR, STR) können Designer die Gestaltung von Überschriften erweitern .
... Überschriften werden mit einer Schriftgröße von 16px oder
größer gestaltet (geeigne te Sch riften sind Georgia, Trebu chet
MS, Lucida Sam Unicode, Times New Roman und Arial ). Fur
Fließtexte eignen sich Schriftgrößen zwischen 11 und 16 px
(als Schriften : Verdana. Arial, Lucida Sam Unicode, Times
New Roman und Geo rgia).

3.9

Ressourcen

Die folgende Sammlung von weiterführenden Referenzen zu
wesentlichen Aspekten, Methoden und Techniken kann als Nachschlagewerk dienen :

3.9.1
..

Quellen und weiterführende Beiträge

Nadja Moller: _Typografie im Web« (mit Unk-Sammlung)

http.//blog.calm-n-easy.de/ archiv/ typographie- im-web.html
(Unkeode 110)
... Dave 5hea : _Fine Typography in Webe
http://www.mezzoblue.comlpresen t a tions/2005/wdw/t ype/
(LI nkcode 111)
.. Mark Boulton ; _Five Steps to better typographye

h tt p.// www.markbOl.llton.(o. ukljournal/com men tsl
fiveJimpleJteps_to_better_typography/ (Unkcode 112)
..

Nadav Savio: _Web Typography Tutoriale

h tt p./I www.webmonkey.(om/webmankeylde$ignlfant$/
tutorials/tutoria/3. html (Linkeode 113)
.. Web Typography Guide

'" Abbildung ) .108
.Flne Typography in Webe,
von Dave Shea

http://www.usabietype.com(Linkcode 114)
.. Gerrit van Aaken : _HTML_5chriften unter der Lupee

http://praegnanz.de/essays/typo- im-web-html-schrljten-unterder-lupe (linkeode 115)

3.9. 2

Typografie

.. The Elements of typographi e style applied to Web
http://webtypography.net (Unkcode 116)

3.9 Ressourcen

I

23'

.. Christoph Bier: »typokurz - Einige wichtige typografische

Regelne

http://www.lvWonwelt.de/downloads.html(Linkcode 117)
.. Typografie Guide
http://www.designguide.atltypographie.html(linkcode 118)
..

Dr. Web
Eine sehr ausführliche Quellensammlung zum Thema .. Font

und Typografie«

http://www.drweb.de/weblog/webfog/?p=527 (Linkeode 119)

3.9.3

_.-

..

Fonts

Freie Schriften im Portrait

http://www.prapgnanz.de/essays (Linkeode 120)
.. 25 Best Free Quality Fonts

http://www.afvit.delbloglart; dei20- best-li cen se-free- official-

fonts

Freie Schriften im Portrait

(Linkeode 122)

.. 66 Best Pixel Fonts

http://www.alvit.de/bfog/arti cle/2 5- best-li cen 5e-free- pi xe!fonts (Linkeode 123)

.. Abbildung 3.109
Freie Schriften im Port rait

(www.praeenanz.de/essa ys,
linkcode 121)

3.9.4

Dynamic Text Replacement

.. Jens Meiert: .Übersicht: Image-Replacement-TechnikenO!,
http://meiert.com/de/publications/artic/esI20050513/ (Lin kcode 124)
.. slFR
www.mikeindustries.com/sijr( Linkcode 125)
..

SIIR
http://wVI/.W.whaleofadive.com/mi seisi ir/ about. php
(Linkcode 126)

..

SwishMAX Text Replacement
http://pro.html.itlarticolVid_615/idcaC15/pro.html
(Linkcode 127)
Typografie fürWebautoren

..

http://webdesign.crissov.delTypographie (Lin kcode 128)

3.9 .5 Werkzeuge und Dienste
.. Typetester
http://type te ster.maratz.com(Linkcode 129)
Mit dem Toollassen sich bis zu drei auf Ihrem pe installierte Schriftarten miteinander vergleichen. Musterbeispiele
so rgen dafür, dass Unterschiede klar zum Ausdruck kommen. Bei Bedarf können der Hintergrund und die Farbe des
.. Abbildung 3.110
Typetester

232

I

3 Textgestaltung

Textes, die Größe der Schrift sowie Ausrichtung, Laufweite,
Schriftschnitt, Zeilenabstand und Zeilenlänge entsprechend
angepasst werden . Das Tool ist besonders effizient fOr die

I

Bestimmung eines opt imalen Zeilen höhe-Zeilenbreite-Verhältnisses.
.. Typewriter

http://www.korhoen.net/css_typeviewer.htmJ (linkcode 130)
..

Fontstru ct

http://jontstrud.jontshop.coml(Unkcode 1 31)
Mit diesem kostenlosen Online-Tool können Sie eigene
Schriften leicht erzeugen. testen und mit anderen Schriftarten vergleichen.
.. TypeChart

http://www.typechart.com/(Unkcode 1 32)
Dieses Projekt sammelt CSS-S nippets von schöne r Textgestaltung im Web.
..

CSSTypeSet

http://css typeset. coml(Linkcode 133)
Dieses Werkzeug erf aub es Ihnen, typografische Angaben für
..

beliebige Texte visuell festzulegen und anzupassen.
Identifont

http://www.identifont.comlidenti/y.htm/(Unkcode 13 4)
Der Dienst identifiziert eine Schriftart, indem er Eige nschaften (Serifen, Besonderheiten un d Ähnliches) abfragt
und Vorschläge macht.
.. Typonavi gat or

http://typenav.fontshop.com (Unkcode 135)
Diese typografische Datenbank umfasst uber 40.(X)()
Schriften aus 70 Bibliotheken weltweit und st ellt eine
der größten Sammlungen kommerzieller Fon ts dar. Auch
die Suche nach der Form und Art der Schrift (Humanist,
Modern, Stab Serif, Sans Serif, Geometri e usw.) ist möglich.

_.-

n. _ _ .-fIIIWI _

----_
---_._
......__--.......
----_
....-,
__-:.:-'-:-

...

.. Abbildung ) .111
Typechart.com

......

_._
.;::-_._._._._,.._-

__ _._-

.- -_ .. - -:.;;.-=.,:;.:------..,

,_.

.. Abbildung ) .1U
www.ldentlfont.coml/denriff.ht m

.. 12 Exa mptes of Parag raph Ty pography

http://jontangerine.com/silt:Vtypography/p/ (Unkcod e 136)
Es gibt viel e Möglichkeit en, einen Absatz zu gestatten. JOI'
Tan listet in seinem Be itrag einige davon und stellt ent sprechen de CSS-Snippets bereit.
3.9. 6
lit eratur
.. !lobert Bringhurst : _The Elements ofTypographic Style«
.. Ellen lupton : _Thinking with Ty pe: A Criticat Guide for Designers, Writers. Editors, & Students«

http://papress.com/thinkingwithtype
.. Erik Spiekermann, E.M Gi nger: _Stop Steating Sheep & Find
Out HO\AI Type Works«
.. Atexander Branczyk. Jutta Nachtwey, Heike Neht, Sibylle
Schlaich, Jurgen Siebert, Sybille Schlaich: _Emotional Digital:
A Sourcebook of Con temporary Typographics«

.. Abbildung) .,,)
Robert 8r1nghurst : _The Elements
ofTypografi c Style«
19 Ressourcen

I 233

.. Jim Byrn : "Accessible Web Typography«
http://www5cotconnect.com/webtypography
.. Joh n Kane : »A Type Primer«
.. David Jury : . About Face: Reviving The Rules Of TypographyO!
.. James Felici : »The Complete Manual Of Typography«
.. Jan Tschichold : " The New Typography«
.. Robin Williams: :.The Non-Designer's Type Book ...
..

.. Abbildung 3.114
lan Tschichold: . The New Typography«

234

I

3 Textgestaltung

Robin Kinross : . Unjustified Texts : Perspectives on Typography«

4

Farbgestaltung Web 2.0

Bunte Paletten und ausgefallene Farbschemata gehören zu den
typischen Mer kmalen einer Web 2.0-Seite. Doch der Umgang mit
kräftigen Farben erfordert ein grundlegendes Theorieverständnis .
Wichtig dabei ist zu verstehen, wie die einzelnen Farben wahrgenommen werden, welche visuelle Bedeutung ihre Kombinationen tragen und in welcher Beziehung sie zueinander stehen .
Dieses Kapitel erklärt die Grundlagen der Farbenlehre, weIche Farben Designer im Web 2.0 am häufigsten verwenden, wie
diese ausgesucht werden und wie Sie sie in Ihren Projekten optimal einsetzen können,

Im .neuen. Web tritt neben den eigentlichen OnHne- lnhalten eine intuitive und sympathische Seiten präsentation in den
Vordergrund. Ein harmonisches und visuell ansprechendes Seitenbild soll eine vertrauenswürdige Atmosphäre erzeugen und
intuitiv sein, um den wachsenden Anforderungen der Nutzer
gerecht zu werden. Aus diesem Grunde tendieren Webdesigner
immer häufiger dazu, attraktive Designelemente zu verwenden,
die nicht unbedingt nötig sind, dafür aber für eine freundli che
Stimm ung sorgen, sofort auffallen und bestimmte Konzepte eindringli ch vermitteln .
Die Aufmerksamkeit der Kunden soll durch eine starke visuelle Darstellung erreicht werden. Um diese sicherzustellen, benötigt man ein attraktives, stark wirkendes Design. Und genau hier
kommt die Farbgest altung ins Spiel.
Dabei findet eine direkte wie indirekte Kommunikation einzelner farbiger Akzente mit den Seitenbesuchern statt. Jede
Farbe wird von Nutzern aus eigenen Erfahrungen heraus mit
bestimmten Konzepten in Verbindung gebracht. Die gesamte
Farbkompositi on erzeugt durch Assoziationen einen Gesamteindruck der Seite.

Farbkomposition
Bei ersten DesIgnentwürfen
muss man häufig feststellen, dass
trotz sorgf.1ltlger Konzeption
etwas Im Gesamtiayout nicht
stimmt . Am h.1ufigsten ist dies
ein Signal für den Austausch
oder die Erg.1nzul"8 von Farbkompositionen .

4 Farbgestaltung Web 2.0

I

235

. . . .....
.- =-::::
..- .....-_......
__
.-........ _..... "'.=- -----....
--.. . -- _..... -""-',-,_. - .-'"
--,_
. _.. -.....
................
... ......
.... .. ----'
..
_
.•
--.
....
-"'''.---...,..._.• . . ... . .__.---...
_
....
.... ...
..... _,._.-._.....
. ..-,_.
--_
.
•
....
_
........_. - ...-. ..-,._
...... _.. '-,--.................. ... --... _
.
.,-,_.
----....... _.- - -- - -- -,.-,
-----..•.-_...- -........- .- --_
....-•-.
.
.
.
=•
.
.,.
----..... -. . ...- --"." .-__
-- --===
"".
-- -- --_. -------- -...

-, ,
-'
--

~

"

.~_

.,-".~"~"1-'

!"'-.....
,, '_ 1..- :--

....

-_._
--~

. .... ~u .. ..
~

~

"-,,

--..1 ..
"'.,""
,,,-,.......... _r
..... :=.

"

'-~

-'

::::. :-0

-,

::...-

!t" I .... _'

".~-,-

Ab bildung 4 .1
Buntes Farbenspiel im Web 2.0l ook (Quelle: Dinis91.com)
6

-

- ''''-

--'"

Abbild ung 4.2 ...
Schlichtes Design im Web 1.0look (QueUe: CraigslisUom)

::--

So ist die Farbgestaltung des offiziellen Apple-Auftritts beispielhaft für eine gelungene Kommun ikat ion von Farben. Eines der
Details, die erst bei einer genauen Analyse auffallen, ist die große
Ähnlichke it der Designprodukte von Apple mit ihrer Präsen tat ion
im Web. Sch riftarten. abgerundete Ecken und t radi t ionelle Farbkomposition mit dominierenden Weiß und Blau sind sorgfält ig
gewählt. mit dem Ziel. eine emotionale Bindung der Anwender
an die Corpora te Ident ity (CI) des Unternehmens zu erlielen .

iPhone
3G

--

Twk@a§fast. Halfth@ prie@:

11

-Ab bildung 4.3 ...
Corporate Identity (CI) a uf Apple.
com : Abgerundete Ecken , dominierendes Weiß und Blau sowie
. Ieichtes« Design im traditionellen Apple-Stil.
236

4

Farbgest altung Web 2.0

---_._.
-_.....__. ,. -- ..-,....~ .-

_-

~

~-_ - ~ ­

___

,

~-

•

Eine verständliche, leicht erkennbare Botschaft du rch Farbhar·
monie zu vermitteln, ist eine große Kunst, die beei nd ru ckende
Ergebnisse liefe rn kann.
Fa rben soll ten ei ne p lattformunabhängige Darstellung ermögli chen. Wird die Au fmerksamkeit eines Sei tenbesuchers durch
Farben auf einen Inhalt gelenkt , so m üssen Farben entsprechende
Informat ionen vermitteln und - noch wichtiger - keine zum vor-

I
Schwarz auf Weiß
Schwarz au f Weiß wird als sauber empfunden, erzeugt ein
klares Bild und liefert ein funkt io nales und klares GrafikdeSign.

handenen Kont ext unpassenden oder gar falsche Assoziationen
hervorrufen .
Darüber hinaus übern imm t die Farbgestaltung die Funkt ion ,
dem layou t eine visuelle St ruk tu r zu geben, die du rch den Nutzer
besser und schne ller wa hrgenom men und wiedererkan nt wird.
Solch eine Struktur zeichnet si ch d urch eine geziel te Auswahl von
Grund - und Nebentönen einer Seite aus . Auch angen ehm empfundene grafi sche HeN orhebungen, wie etwa eine auffallende
Farbgestalt ung der Sei tennavigat ion, können einen deut licheren
visuellen lei tfaden darstellen .
Nich t zuletzt sollen Farben auch eine ästhetische Wirkung
haben und den Eindruck visueller Harmonie erzeugen, um d as
Int eresse des Seit enbesuchers zu fördern und eine ange neh me

Browsing Experience sicherzust ell en. Die . Nat url ichkei t o: der
Farbauswahl hat dabei primäre Bedeut ung.
Jede dieser Au fgaben erfordert eine gezielte Auswahl von
passenden Farbkombinat ionen. Um ei n funkt ionierendes Zusammenspiel der eingesetzten Töne zu erreichen, lohnt es sich, zuerst
einen Blick auf die Grundlagen der Farbt heorie zu we rfen.

4.1

Grundlagen der Farbenund Harmonielehre

Im wissenschaftlichen Si nne lässt sich Farbe als eine bloße Eigenschaft des lichts auffassen, d ie bei Beugung od er Refl exion in
Erscheinung tri tt. licht wiederum ist als eine Zusammensetz ung
von sieben Gru ndfarben des visuellen Spektrums (Rot , Ora nge,
Gelb, Grün , Bla u, Indigo und Violett) zu verst ehen.
Abbi ldung 4.4
Das lichtspektrum: Magenta
(M ischfarbe), Rot, Orange, Gelb,
Grün, Cyan, Blau, Indigo, Violett

.6.

... Abbi ldung 4.5
Helle Töne treten gegen du nkle
Tö ne an.

4.1 Grundlage n der Farben- und Harmoniele hre

I

237

.... Abbildung 4.6
Sättigung

.... Abbildung 4.7
Transparenz

Um Farben deutlich voneinander un terscheiden zu können, werden spezielle Farbeigenschaften - etwa Helligkeit (Brightness),
Tramparenz (Transpa.rency), Opazitat (Opaäty) oder Sattigung
(Saturation) verwendet, wobei die sich aus ihrer Kombinationen
.... Abbildung 4.8
RO!ia Purpurrot und Ziegelrot

ergebenden Farben spezielle Namen erhal ten. 50 unterscheidet
man zum Beispiel bei Rot wenigstens zwischen drei weiteren
rot en Farben, nämlich Rosa (pink), Purpurrot (crimson) un d Ziegelro t (firebrick).

4.1.1

Farbmi sc hung und Farbmodelle

Grundsätzli ch untersche idet man zwischen zwei Arten der Farb.... Abbildung 4.9
lichtspektrum auf dem Bildschirm: Dünne rote, grüne und
blaue Balken unter dem oberen
Streifen zeigen rela tive Intensitäten der drei Primärfaroen.
Dort , wo sie zusammentreffen ,
entstehen Farben aus dem obigen
Farbstreifen.

CMYK
(MYK (K kommt von blacK)
erzeugt nicht die gleiche Anzahl
von Farben wie RGS. Deshalb
sehen gelb-grüne Abbildungen
auf gedruckten Dokumenten
häufig ein wenig trübe aus .

238

I

4 Farbgest alt ung Web 2.0

m ischung. Die additive Farbmischung mit den Grun dfarben Rot ,
Grün und Blau entspricht der optischen Mischung des farbigen
lichts. Mit zunehmender Sättigung erhöht sich die Helligkeit der
resultierenden Farbe. Bei der Mischung mi t ma)(imaler Sättigung
ergibt sich desh alb Weiß. Bildschirme arbeiten auf de r Grun dlage
dieses Fa rbmodells (RGS). Durch Kombinationen der drei Gru ndfarben lassen sich alle andere Farben erzeugen.
SubtraktiVe Farbmischung entsteht durch die Mischung körperhafter Farben (Pigmentfarben) ; diese findet be i Kombination von
(yan, Magen ta und Gelb ((MY) aufgru nd der Subtrak t ion des

Lichts statt. Eine Kombination dieser als Primär/arben bezeichneten Töne erzeugt den dunklen Ton des Schnittes, der sich bei
ma)(imaler Sättigung zu Schwarz entwickelt. Verwendet wird
dieses Modell für den Druck. Da beim (MY-Druck jedoch eine
echte, tiefe Sättigung der schwarzen Farbe nicht erreicht wi rd ,
nimmt man zusätzlich Schwarz hinzu (CMYK).

I

Die Schnitte additiver Gru ndfarben ergeben su btralet ive Primärfarben, die auch sekundäre Farben im RGB-Modell sind. Ähnliches geschieht auch bei der Oberla ppung subt raktiver Gru ndfarben .
Farbwirkung
4.1.2
Intuitiv verbindet jeder Sei tenbesucher eine Farbe mit Konzepten
und Erfahrungen, die durch die Farbe assozi iert und hervorgerufen werden. Zwar spielt bei den auf diese Weise entstehenden Assoziationen die Subj ekt ivi tät ein e wicfltige Rolle, d och
im Allgemeinen weist die psychologische Wirkung der Farben
(nich t Farbkompositionen!) gew isse Schemat a auf, die Sie bei der
Auswahl der Farbpaletten beruc ksich tigen sollten. Die folgende
Tabelle entst ammt dem Tutorial : .. Fa rben im W ebdesign « (http://
www.metacolor.de). Sie liefert die wesent lichen Assoziat ionen,
die durch die Grundfa rben erze ugt werden.

... Abbildung 4.10
Addi tive Farbmisch ung

... Abbildung 4.11
Subtrak tive Farbmischung

Assoziation
Blau

Blau Ist mit Ab stand die beliebteste Farbe, sowohl bei Frauen
als auch bel M annern. Sie wird mit vi elen positiven Eigen sc haften assoziiert: Sympathie, Harmonie, Freu ndlichkeit,
Freundschaft. Blau Ist die Farbe der Ferne, der Weite und der
Unendlichkei t. Blau Ist die Farbe des Vertrauens und der VerI! ssllchkelt. Blau Ist still und entspan nend, Gran eher ruhig
und erholsam.

Ro t

Rot Is t die !It este Farbbezeichnung Oberhaupt. Sie ist die
zweitbeliebteste Farbe mit gleichem Ant eil bei Frauen und
M !n nem . Rot kreist um die Assoz iationsbereiche Blut und
Feuer.
Blut: l eiden schaft (liebe, Hass), Aufregung, ImpulsiviUt,
WuVl orn (besonders In der Kombination mit Schwarz ),
SellualiUt , Erotik.
Feuer: Hitze, W ärme.
Rot ist eine sehr dynami sche Farbe.

GrOn

Di e Farbe der Natur und des lebens. Frühling, Hoffnung.
beginnende liebe. Beruhigende Mitte . Die herbe Frische:
frisch, herb, sa uer, bitter, gesund, aber auch unreif.

Schwarz

Negat ive Gefühle: Trauer, Einsamkeit (allerding; nur in ganz
best immt en Kulturen, w ie der europäischen). Aber auch: Eleganz ohne Risiko. Modern, sachlich, eindeutig. fun ktI onat .
Schwarz polar1Slert: Bei vielen Menschen ist es sehr beliebt,
bel vielen stOßt es auf st rikte Ablehnung.

Rosa

Zärtlich, zart, kindlich, 50S, kitschig

Gelb

Sonne, Ucht, Wärme (schwächer als Rot), sauer

Weiß

vollkommen, Ideal, gut, sachlich, klar, unschuldig, e hr~ c h

Violett

M agie, Geheimnis, D ekadenz, Zweideutigkeit

4.1

Prim l rfarben
Prim.trlarben stehen fOr die Farben _erster Ordnung. in den
RG B- und CMYK-Modellen. A us
Ihnen lassen sich (fast) alle we iteren Farben erzeugen. So Ist z um
Beispiel Orange eine Sekund;'irfarbe im RGB·Modell, da sie aus
Ro t und Gelb gemisc ht Is t.

... Tabelle 4.1
Farben und Ihre Assozia tionen

Grundlagen der Farben - und Harmonielehre

I

239

Abbildung 4.12 •
Die beliebtesten Farben sind Blau .
Rot und Grün. (QueUe: http://

www.metae%r.de/far be nI
lieblingsfarben.htm , Unkcode 140)

Abbildu ng 4.13 •
Unbeliebt sind Braun, Orange und
Viole tt.

4.1.3

Farbtemperatur

Unterschiedliche Farben werden von uns gefühlsmäßig unterschiedlich empfunden. Eine aktive, lebendige und fröhliche
At mosphä re wird durch warmes Rot , Gelb und Orange erzeugt,
da wir diese Farben grundsätzlich mit Wärme assoziieren. Kalte
Farben si nd dagegen Blau und Blaugrün, die eher beruh igend
und passiv wirken und für Stabilität , Seriosität und Fachkompetenz stehen .
.... Abbildun g 4.'4
Warme Farben fangen bel Violett
an.. kalte bei heUern Grün.

'VB
RYB verwendet Rot, Gelb und
Blau als Primärfarben und Orange,
Grün und Rosa als Sekundärfarben. Für die Praxis ist dies jedoch
nicht weiter wichtig, da dadurch
bloß die Anordnung der Farben
auf dem Kreis festgelegt wird.

240

I

4

Farbgest attu ng Web 2.0

Farbkreis
Verbindet man die Farben am Anfang und am Ende des Lichtspekt rums und ord net sie äquidistant an, so ent st eht ein sogenannt er
Farbk reis. Diese r wird häufig verwendet , um die Zusammenhänge
zwischen primären, sekundären und tertiären Farben leichter zu
erkennen und funktionierende farbige Kont raste zu erzeugen.
Der Farbkreis stellt eine visuelle Repräsentat ion der Farben
bezuglich ihrer chromatischen Beziehungen dar. In der Praxis verwendet man traditionsgemäß die Red-Yelfow-8I ue-Darstellung
(RY8) des .. Color Wheel«.

_

..

_ . ~ . -

_

.. Abbild ung 4.' 5
Farbkreis In Color Schemer Pro

.

0. '..

.

•

--.-_.....-"'... _.,-....

1_

. . ' ....

' " ........... '

Auf dem Farbkreis unterscheidet man zwischen mehreren Farb-

gruppen und Farbtypen. Zu den primären Farben gehören die
Grundfarben, die durch andere Farben nicht erzeugt werden kön-

nen. Sekundäre Farben erreicht man durch die Mischung zweier
Primärfarben . Tertidre Farben durch ei ne M i schung primärer und

Farbk re is
Prim:!re Farben formen auf dem
Farbkreis ein Dreieck, wobei sekurd.lre Farben jenseit s der Geraden liegen, die Jeweils zwei
Grundfarben verbinden.

sekundärer Farbtöne.
A ls komplementdre Farben bezeichnet man Töne, die auf dem

Farbkreis direkt gegenüberliegen (z. B. Orange und Blau) . Benach-

barte Farbtöne werden dagegen analoge Farben genannt (etwa
Gelb. Hellgrün, Grün) .

4 .1.5

Farbkombina tionen

Die Beziehungen zwischen den Farbtönen einer Farbpalette lassen auf die resultierende Wirkung des Seitenbildes schließen. In
der Theorie der Farbkreise spricht man dabei von sechs Grundbeziehungen der Farbkomb inationen.

Monochromatische Beziehung

Neut ra le Flrbw irkun g
Schwarz, WeiS und Grau wirken
bel samtlichen Farbkombinationen neutral und können eine
Farbpaleue immer erg:!nzen. Bei
einer monochromatischen Beziehung der Farben, die niedrigen
Kontrast haben, kann Schwarz somit fur die Vermehrung des HellDunkel-Kontrasts sorgen.

I Die

monochromatische Beziehung beschreibt das Zusammenwirken der Farbt öne, die sich nur
durch Variationen der Sc hattierung und/oder Transparenz voneinander unterscheiden. Sie entstam men derselben Grundfarbe
und können deshalb fast immer ei ne harmon ische Wirkung vorweisen. Deshalb eignen sie sich besonders gut fUr ein funktionierendes Desi gn. Eine monochromatische Bez i ehung erzeugt eine
neutrale, ruhige Mischung, in der Farben einander ergänzen und
unterstützen . Sämtliche Inhalte können einheitlich, aber deshalb
auch monoton, eintönig und reizlos erscheinen. Monochromatische Farben passen immer gut zusammen, da sie im Grunde
genommen unt erschiedliche Abstufungen voneinander sind. Beispiel : Hellblau , Blau, Dunkelblau.

Aufgeteilte komplementäre Beziehung

I Die aufgeteilte kompIe-

ment.!lre BeZiehung beschreibt das Zusammenspiel einer Grund4.'

.. Abbild un g 4 .,6
Monochromatische
Farbbeziehung

Grundlagen der Farben - und Harmonielehre

I

241

I

••

farbe mi t zwei weiteren Farben, die auf dem Farbkrei s von ihrem
Komplement gleich wei t entfern t sind. Diese Beziehung reduziert
den hohen Kon tras t kom plementärer Farben du rch ihre Aufteilung in zwei analoge Farben. Somi t wird ein leichteres Gegengewicht zu der Grundfarbe erzeugt. Bei spiel: Grün, Hellrot, Dun kelrot.
Dopp elt- ko mplem entäre Bez iehun g I Die doppelt-komplementäre BeZiehung verwendet zwe i Farbgruppen, deren Elemente
Uewei ls zwei Farbtöne) Komplement äriarben sind . Die Distanz
zwischen Elem ent en einer Gruppe auf d em Farbkreis wird iden-

.. Abb ildung 4.17
Aufgeteilte komplementäre
Farbbeziehung

tisc h gewäh lt; ihr Abstand von einander best im mt den Kon trast
der Farbkomposi t ion . Diese Beziehung lässt kompl ementäre
Farben zum einen einander ergänzen, zum anderen schwächer
gegenei nander auftreten und erze ugt ei nen bunten visuellen
Kontrast. Beispi el: Hellgrün. Dunkelgrün. Hellrot . Dunkelrot .

I Die

Triade- Beziehung bezieht sich auf die
Wirkung von drei Farbtöne n, die au f eine m Farbkreis äquidistant
voneinander ent fern t sind. Die Triade erzeugt eine gewisse Spannu ng. bewir kt jedoch eine Balance und sorgt f ur die Vielfältigkeit
der eingesetzten Tone. Beispiel: Gr ün, Orange, Violett.
Tri ade- Bez iehun g

FarbkomplexItät begrenzen

.. Abb ild un g 4 ., 8
Triade-Beziehung

..........

Die Buntheit sollte in einem vernünftigen Rahmen liegen (ViererHarmonie kann dabei als eine vernünftige Grenze dienen), da sonst zu
viele Farben, die gleichzeitig auf eine r Seite erscheinen, eine visuelle
Bela stung für den An .....ender darstellen.
Durch weiteres gleichm.1 ßiges Aufsplitten des Farbkreises können weitere Farbschemata erzeugt werden. Dabei i\t zu beachten. dass zwei
Farben , die durch die Aufteilung der ursprünglichen (meisten s einer
komplementären) Farbe ent stehen, den gleichen Wi nkelabstand zu ihr
haben sollten, damit ein Gleichgewicht der Farbpaleue erhalten bleibt.
An aloge und ko mp l em entäre Bez i ehung I Sc hließlich basieren
die analoge BeZiehung auf einem Spekt rum benachbarter Farben
und die komplementare Beziehung auf Abs t ufungen komplementärer Farben, die den allzu hohen Kont rast reduzie ren .
Bei der analogen Beziehung kann man eine Farbpalette zu einer

Farbreihe entwickeln ; dies geschieht. indem man wenige Grundfarben durch eine Familie (vier bis sechs Töne) aufeinanderfolgender
Farben ersetzt . Bei komplementären Farben kann ein zu hoher
Kontrast durch den Einsatz von sogenannten unterst ützenden, in
.. Abbildung 4.19
Analoge BeZiehung
242

I

4 Farbgest altungWeb 2.0

der Mitte zwischen den beiden Komplement ärtönen liegen den,
Farben relativiert werden. (Beispielsweise lässt sich Mag:enta-Grün
durch Blau-Violett oder Dott er-Gelb . harmonisieren oc .)

I

4.1.6
Kontrast e
Eine wichtige Funkti on bei der Auswahl von Farbkomposit ionen
überne hmen Kontras te. Die Wahrnehm ung jeder Präse ntat ion,
bei der Farben zum Einsatz kommen, wird durch die Bezieh ung
zwischen gewahlt en Haupt - (dominierende Farbe, meistens auf
einen großen Anteil der Fläche ve rteilt) und Neben farben (begleitende Fa rben für farbige Akzente und Fließtex t) ent scheidend
geprägt. Der Kon trast beschreibt die Intensi tät dieser Beziehung.
Bei einem starken Kontrast treten In hal te deutlicher in Erscheinu ng, sind leserlicher und fallen schneller auf.

Rot auf Rosa
Grau auf Weiß

•
• Abbi ldung 4.20
Komplementäre Beziehung
... Abbildung 4.21
Der Kontrast zwischen Text und
Hint ergrun dfarbe is t links deut lich
nied riger als rechts. Dies wirk t
sich au f die lesbarkeit der Bilder

''''.
Die Farbth eorie gibt mehrere St rategien vor, mit denen sich
Farbschemata mit opt imalen Farbkont ras ten auswählen lassen.
Grundl egend sind dabei acht Arten vo n Farbkontrasten, die von
Johannes Itten ent deckt und erforscht wurden. In seinen St udien
mach te sich Itten ins besondere die In tensi tät der begleitenden
Töne zun utze, also Ko ntrast e, die durch hell e, moderate oder
dunkle Abweichungen entstehen .
Kontrast durch Sättigung I Kontrast durch SJWg!Jflg wird durch
die Zusam menst ellung von hellen und dunklen Va riat ionen einer
Farbe erreicht, die mit jeweils hoh er und niedrige r Sätt igung versehen werden. Es ist zu beachten, dass die Töne mit geringer Sätt igung heller erscheinen als die dunklen Abstufungen von Tönen
mit höherer Sättigung.

.. Abbildung 412
H eH-Du nke I-Ko nl rast
in Farbe

.. Abbil dung 4.23
Hell-D unkel-Kontras t
in grauen Stu fen

4.1

Farbharmome
M ax imale Harmo nie w ird erzeugt, wenn man bel einer
Farbreihe auch die Buntheit und
Helligkeit aufeinanderfolgender
Farbl öne st ufenweise verandert.

Kontraststärke
Im Allgemein en sollten Inhalte,
die zum lesen gedacht sind,
einen Kontrast von mindestens
80 Prozent aufweisen, damit
der l eser seine Augenmuskeln
nicht zusat zlieh anspannen muss .
Zur Überprüfung dieses Fa ktors
kann man sich GrayBit zunutze
machen. Der Dienst zeigt eine
Seit e in Abs tufungen von Gra u.
Vergleicht man an sc hließend
die Farbe eines Objekts mit der
Farbe seiner Umgebung, so kann
man Rückschlüsse über den
Kontrast ziehen.

Grundlagen der Fdfben- und Harmonielehre

I

24 3

A Abbildung 4.24
Hell -Dunkel- Kontrast kann sowohl bei monochromatischer FarbbeZiehung als auch bei komplementärer f arbbeziehung verwende t werden. Er
sorgt dafür. dass fl.1chen lebendig erscheinen und eine visuelle Spannung
erzeugen.
A Abbildung 4 .25
Den st.lrlcsten Hell-DunkelKontrast weisen Gelb, Violett und
Blau auf, den schwächsten Rot
und Violett sowie HeJloraflle und
Hellgrün. Am hellsten ist Gelb, am
dunkelsten Blau.

Abbildung 4.26
Hell-Dun kel- Kon trast
in Abstufungen von Rosa

A

Abbildung 4 .28 ..
Schwacher Hell-Dunkel-Kontrast
oben , starker Hell- Dunkel- Kontrast unten

Abbildung 4 .29 ..
Farbschema zum
Hell -D unkel-Kon tra st
244

4

Farbgest al t ung Web 2.0

Abbildung 4.2]
Hell- Du nkel -Kon tras t
in grauen Stufen

A

I
... Abb il dung 4.30

... Abbildung 4 .31

Kontrast (fast) komplemenUrer Far· Durch die Abschwächung der belben , Reine komplementäre Farben
warden direkt ins Auge fallen und
blendend wirken .

den Komplementärfarben wird der

Kontrast zwischen dem grünen . e.
und der rosa . 2- sctw.1cher.

8unt-Unbunt-Kontrast I Einen Bunt-Unbunt-Kontrast erzeugen
Farben mit verschiedener Strahlkraft , die durch ihre Bunthei t
bestimmt wird. Lebendige Fa rben wie helles Grün, Blau oder
Rosa besitzen eine stärkere Strahlkraft als dunkle und graue Farb-

töne .

.... Abbildung 4 .32
Bun t-Unbun t-Kontrast. Zuerst fällt der rech te obere
Bereich auf. Nicht verwunderlich - er ist bunter als der
Rest der Komposition .

.. Abbildung 4-33
Bunt-Unbunt· Kont rast. Bunte Farben in der Mitte
und im rechten Teil der Farbkomposition dominieren ;
unbunte, dunkle TOOewlrken eher begleitend.

Kontrast durch Proportion I Kontrast durch Proportion (auch
Meneenkontrast genannt) wird erreicht du rch die Zuordnung von
dominierenden Farben zu größeren Seitenflä chen. Kleinere Flächen werden mit Nebenfarben versehen. Farbige Akzente können durch das EinfUgen von kleinen hellen Blöcken innerhalb
eines dunklen layouts erzeugt werden.

4.1

Kleine Flachen
Eine kleine Frache soll te nie
mehr als 20 Prozent der gesamten Flache einnehmen.

Gru ndlagen der Farben- und Harmonielehre

I

245

Abbildung 4.34 ..
Größere Flächen mit hellem Grün
und Violett treten hervor. Sonstige Farben - auch sehr helles
Gran (rech ts unten), da.s in solcher Farbkomposit ion eher unharmonisch wirken würde - wirken
nicht 50 eindringlich, da ihnen
eine kleine FI.lche zugeo rdnet
wird.

Komp lementärer Kontrast I Komplementärer Kontrast wird durch
eine Komposi t ion von Komplementärfarben erzeugt. Bei kräftigen Farben wie in der folgenden Abbildung liegt dies in der
grauen Zone zwischen Harmonie und Dish armonie.

Abbildung 4.35 10Blau is t die Komplementärfarbe
zu Gelb, dementsprechend ist der
Kon t rast zwischen beiden hoch.
Die Rechtecke 1 und 2 besitzen
dieselbe Farbe, werden aber in
unterschiedlichen Kontexten
un terschiedlich wahrgenommen.
So erschei nt Rech teck 1 bunter
als 2, da es von bunten Farben
umgeben ist , also in einem . buntefl« Kontex t hetVortritt.

Simult aner Kontrast I Simultaner Kontrast entsteht, wenn komplementäre Farben häufig ane inander grenzen und somit leuchten
lassen. Er wi rd bei der Webseitengestaltung eher selten benutzt.

Abbildung 4.)6 ..
Ein sehr hoher simultaner Kont ras t. Das klei ne Rechteck im
rech te n oberen Teil des blauen
Quadrats wirkt trotz seiner Größe
beinahe blendend , da es die komplemen tare Farbe zu Blau hat.
H.ltte man das große, herausragende Rechteck mit dieser Fa.rbe
versehen, würde dies sehr aufdringlic h wirken ,

Winkelkontrast I Einen Winke/kontrast erreicht man durch die
Aufnahme von solchen Farben des Farbkreises in die Farbpalette,
die einen gle ichen Winkelabstand voneinander haben. Diese
Bedingung si chert die Harmonie der Farbpalette.
246

I

4

Farbgestat tung Web 2.0

I

Tem pera turko ntras t I Temperaturkontrast basiert auf der Gegenüberstellung von als kalt und heiß empfundenen Farben und
ihren Abstufungen.

... Abbildung 4.37
WInkelkontrast

.. Abbildung 4.]8
Tempera turkont rast

Ist einer der elWähnten Kontraste in einem Fall zu hoch, so verwendet man die Aujjtlcherunc, indem man eine Farbe durch eir,e
Familie ihrer Nachbarn auf dem Farbkreis ersetzt.
Als Faustregel für die Auswahl von Kontrasten können die folgenden von Metacolor.de aufgestellten Richtlinien dienen: Bei
mehreren Flächen (Blöc ken) sollen
.. mindestens zwei der Flächen einen Hell-Dunkel-Kontrast
haben,
.. aUe Flächen miteinander eine Winkelharmonie bilden,
.. mindestens zwei der Flächen einen Bunt-Unbunt-Kontrast
bilden,
.. mindestens zwei der Flächen einen Mengenkontrast bilden.
Ko nt ex t de r Farben
4.1.7
Neben Farbpaletten spielt auch der Kontext, in dem sie eingesetzt werden, eine immense Rolle für die W irkung einer Seite.
Die zusammengestellten Farben können den Gesamteindru ck
einer Seite allein für sich genommen nur wenig bee influssen.
Unter anderem prägen Farbassoziationen, die Verteilung der Farben auf den Flächen, Kontraste sowie das Zusammenspiel der
Hintergrund-Fließtext-Töne den visuellen Gesamteindruck entscheidend.
Nach einer bewährten Faustregel sollt e man sich bei der
Zusammensetzung von Farbpaletten höchstens auf drei oder vier
dominierende Hauptfarben (mehr oder weniger gleich stark verteilt auf der Seitenfläche) beschränken. Bei Farben für Akzente
und VelWeise hat man zwar mehr Möglichkeiten, doch auch mit
ihnen sollte man sehr sparsam umgehen. Auch bei links sollten
höchstens drei Arten der Auszeichnung erfolgen. Das Erscheinungsbild einer Seite kann durch die verschiedenen Zustände der
4.1

.... upt- und Nebenfarben

Die KompOSi ti on der gewählte n
Hauptfa rben und Nebenfarbe n
prägt die Farbwirkung der Sei te.

Grundlagen der Farben- und Harmonielehre

I

247

Links, die Farben der Navigationsmenüs und die Hauptfarben der
Kopf- und Fuß-Bereiche sehr schnell sehr bunt werden. Konsequenz: Es entsteht ein visueller Eindruck, der verwirrend wi rkt
und die Wahrnehmung der I nhalte erschwert. Falsch eingesetzt,
können Farbpaletten nicht nur ihre Bedeutung verlieren, sondern
auch falsche Assoziationen hervorrufen.

4.2
Primäre Farben
Primäre Farben vermitteln die
Dringlichkeit eines Sachverhalts.

Farbtheorie in der Praxis

Primare Farben (Rot, Gelb, Blau) werden in der Praxis gebraucht,

wenn die Dringlichkeit eines Sachverhalt s oder besondere Eigenschaften eines Produkts deutlich vermittelt werden sollen. Zusammengestellt auf einer Seite sorgen sie für einen intensiven
vi suellen Effekt, der durch das Zusammentreffen von bunten Farben auf dem Farbkreis zustande kommt.

Sekundäre Farben
Sekundäre Farben wirken
neutral und erzeugen eine
visuelle Balance.

Sekundare Farben (Orange, Grün, Violett) befinden sich zwi-

schen den Primärfarben. Ihre Position gibt Auskunft darüber,
w ie sie entstanden sind. Bewegt man sich auf dem Farbkreis in
Richtu ng einer der beiden Primärfarben, so erhält man dunklere
bzw. hellere Töne in Richtu ng einer der Gru ndfarben. Sekundä re
Farben wirken neutraler, sogar leicht spielerisch, dennoch elegant
und solide. Sie erzeugen ein Gefühl des Wohlbefindens und einer
visuellen Balance.
Tertiare Farben (etwa helles Grün) können im Design benutzt
werden, um eine einl adende Wirkung zu erzielen. Sie wirken

.. Abbi ldu ng 4.39
Sekundare Farben:
Orange, Grün , Violett

freundlich und angenehm und sind in der Lage, einer Webseite
einen visuell ansprechenden Charakter zu verleihen.

.. Abbildung 4.40
Primäre Farben im Überblick:
Rot , Gelb, Blau

... Abbi ld ung 4-42
Tertiäre Farben:
lila, helles Grün, helles Orange
248

I

4 Farbgestaltung Web 2.0

... Abbildung 4.4'
Komplementare Farben, wie zum Beispiel Rot und Grün oder Bla u und
Orange, werden selten zusammen in voller Sättigung benutzt.

Komplementäre Farben, wie zum Beispiel Rot und Grün oder
Blau und Orange, werden selten zusammen in voller Sättigung
benutzt, da sie extrem lebhaft sind und einen großen Kontrast
erzeugen. Denn och sind sie recht nützlich, wenn man einen
Aspekt besonders betonen will, dies jedoch nicht durch eine entsprechende Sc hriftgröße realisieren möchte. Ein kleiner blauer
Punkt auf oranger Oberfläche beispielsweise fällt sofort auf und
wirkt fast blendend. Komplementärfarben vermitteln Stärke und
Stabilität, sie können si ch gegenseitig leuchtend erscheinen lassen.

••

....-----------.1
•
• Abbi ldung 4.4]
KI!!in!!r blau!!r Punkt auf orang!!r
FI.1ch!!

.. Abbildun g 4.44
Die Komplement1irfarben Rot und
GrOn werden durch die dazwischen auf dem Farbkreis liegende
braune Farbe abgeschwachl.

Um den hohen Kontrast von Komplementärfarben dennoch ausnutzen zu können. nimmt man in der Praxis zusätzli ch eine dunkle
Mischung von beiden Tönen in die Farbpalette mit auf. Sie schafft
praktisch einen Übergang von einem E:xtremum zu einem anderen . Der result ierende Effekt ist eine neutrale Farbkomposition ,
die angenehm wirkt und die Inhalte klar zum Ausdruck bringt.
.. Abbi ldung 4.45
Analog!! Farben erzeugen wenig
Kontrasl

Farbhellrgkeit

Analoge Farben passe n meistens sehr gut zusammen, da sie
auf dem Farbkreis direkt benachbart sind. Sie erzeugen einen
schwachen Kontrast, wodurch sich zwei Berei che sehr unterschiedli cher Thematik sehr schwach voneinander trennen lassen .
Analoge Farben sind ein Muss, da sie insbesondere bei Fließtexten eine optimale lesbarkeit erzeugen. Neben einer harmonischen Farbv<lahrnehmung liefern sie ein klares Bild.
Noch besser passen mo nochromatische Farben zueinander,
da sie noch näher velWandt sind als benachbarte analoge Farben. Deshalb velWendet man bei hellen Designs häufig dunkle
Abstufungen der Hintergrundfarbe für die Auszeichnung des
Fließte:xtes.
4.2

Auch durch die FarbheUlgkei t
kann man die Aufmerksamkeit
der Besucher auf gewisse Seitenelemente lenken. Helle und
hochges.lltlgte Farben werden
l1inger betrachtet als ihr Gegenteil, da dunkle Farben Intensiver
und .sctmerer. sind und sUrker
wirken. Deshalb werden meist!!11S zuerst helle Elemente und
anschließend dunkle Objekte
betrachtet Starke SJ.ttigungsunterschiede fallen schneller auf.

Farbtheorie in der Praxis

I

249

Ab bildung 4.46 ..
Monochromatische Farbbeziehung i-st immer harmonisch, kann
jedoch nur einen niedrigen Kontrast vorweisen.

4.3

RGB und (MYI< in der Praxis

Auf dem Bildsch irm ergibt die Kombinat ion der Spektral farben Rot, Blau und Grün die Le uchtfarbe jedes angezeigten
Pixels. In der Webseitengestaltung werden Farben direkt
über die RGB-Da rstellung oder durch hex adezimaJe Werte in
(X) HTM L- und CSS-Dateien definiert.

Farbspektrum
Das sichtbare Farb~peklrum enthält Milliarden von Farben. Ein
Bildschirm kann Millionen davon
darstellen. Bei True Color sind
es etwa 16 Millionen Farben .
Bei einem überdurchschnitt lich
guten Drucker kann man mit
Tausenden von Farben rechnen.
Altere Rechner konnen dagegen
hochstens 256 Farben anzeigen;
diese werden seit 1995 zu den
»web-safe-colors.. gezahlt.

250

I

4

Farbgestaltung Web 2.0

Bei der RGB-Darstellung gibt man an, welche Intensi tät jede
der drei Grun dfarben haben soll. Pro Spalte lassen sich 256 Werte
tur die roten, grunen und blauen Bereiche angeben (0 bis 255).
Sie werden der Reihe nach angegeben: etwa über background ·
color: rgb(255, 255, 255 ) ; fOrdie HintergrundfarbeWeiß.
Hexadezimale Werte ste llen eine Umrechnung von RGBWert en in das Hexadezimal-System dar. Somit en tspr icht 255 in
RGB dem Wert FF im Hexadezimalsyste m. Die Deklaration back ·
9r ound' c 01or : ff f fffff: st eht som it für die Intensität fF = 255
für Rot , Grün und Blau. Das Ergebnis ist wiederum eine weiße
Hintergrundfarbe.
An dieser Stell e sollte man anmerken, dass Webentwickler auch bei der Farbdarstellung nicht von einer einheitli chen
Interpretation der Farben auf dem Bildschirm des Anwenders
ausgehe n können. Unt erschiedliche Bildschirme können gleiche
Farben unterschiedlich anzeigen (dies liegt an den integrierten
Farbprofilen der verschiedenen Konfigurationen). Außerdem können Anwender ihre Bildsch irmeinsteIlungen manuell fast beliebig
festlegen .
In der Praxis soll te man sich bei der Gestaltung von Drucklayou ts von Fließtexten mit der CMYK-Pa lette begnügen, dami t
die Darstellung auf dem Bildschirm auch in der ausgedruckten
Version erhalten bleibt. Werden bei Printversionen der Seiten
überwiegend RGB-Fa rben verwendet, so können sie beim Druck
verloren gehen . Dies kan n unter Umständen die Unlesbarkeit des
gesamten Layouts zur Folge haben.

I

Einige Webentwickler arbeiten immer noch mit 256 .. websicheren. Farben (Web-Safe-Farbpalette), die in allen Syst emen
nahezu identisch angezeigt werden. Ob diese Einstellung angesichts der Entwicklung moderner Bildschirme zeitgemäß ist, ist
fraglich. Meistens kann man die CM YK-Palette ohne Bedenken
verwenden. Die Web-Safe-Palette ist nicht mit der Web-SmartPalette zu verwechseln. Die Letztere arbeitet mit 4.096 Farben,
die aus drei Paaren identischer hexadezimaler Ziffern (0-9 und
a-f, wie etwa #aa11(0) zusammengesetzt sind. Optimal werden

Rot und Grün

Rot und Grün In unserer natürlichen Umgebung sind erwar_
tungsgemäß weit bunter und
kräftiger als entsprechende Fa (ben auf einem Bildschirm.

sie auf Bildschirmen mit einer Farbtiefe ab 16 Bit angezeigt und
sind daher beim Design zu empfehlen.
Es ist außerdem zu beachten, dass Farben auf einem Bildschirm
eine deutlich schwächere Intensität besitzen als die gleichen Farben aus einer Malertube. Dennoch lassen sich durch konventionelle Ansätze aus der Farbtheorie durchaus realistische Effekte
erzeugen.

4.4

Farbpalette im Web 2.0

In einem direkte n Vergleich mit der Farbgestaltung vor dem
Web 2.0 fallen bei modernen Farbpaletten insbesondere zwei
gestalterische Merkmale auf.
Zum einen tritt die Klarhei t und Deutlichkeit der Inhalte immer
stärker in den Vordergrund - häufig auch mit einem Hang zum
Minimalismus. Beliebte Farben bei entsprechenden Designs sind
neutral, ruhig und angenehm. Sie sollen insbesondere durch ein
intuitives Seitenbild überzeugen. Zu diesem Zweck wird manchmal auch eine reine Schwarz-auf-Weiß-Gestaltung benutzt ; in der
Praxis ist sie jedoch überraschenderweise relativ schwe r zu real isieren . Gru nd : Akzente, die man sonst mithilfe der Farben setzen
könnte, muss man bei solchen Designs mit einer Farbe gestalten,
gleichzeitig aber dafür sorgen, dass sie tatsächlich hervortreten
- auch wenn sonst alles in schwarzen Tönen gehalten w ird. Dennoch wirkt diese Zweierpalette bei einer gesch ickten Umsetzung
teilweise stärker und eindrucksvoller.
Zum anderen sind zwei sich widersprechende Trends zu beobachten. Einersei ts lässt sich die Dominanz von kräftigen und
leuchtenden (perfekten) Farben erkennen; andererseits tendieren Designer häufig dazu, dunkle und schmutzige (realisti sche)
Farben einzu setzen. Designs solcher Art setzen vorrangig auf
einen emotionalen Eindruck und binden _schicke. grafische Elemente großzugig in die Seitenstruktur mit ein. Beispielsweise um
ein Produkt oder einen Dienst möglichst anspreche nd zu präsentieren.
4.4

Farbpalette im Web 2.0

I

251

_M __ "
_____ ..
---,,-.._-_.. _. -_
....
--_
.........
_-_...._._----- ----_
H

_ _"

- ---- ,~ --,...-

Brochures, Branding, Websites,
Statlonery and stuff...

M_._O._____
.R._
..."... W_ ""_
. _.,. .... ....

---- ---"

•.__ ....

~._

'-

--

. Abbi ldung4.47
Subtract ion.com ist komplett in Schwarz und Weiß
gestaltet Die Seite verbindet eine beispielhafte Usability mi t einem soliden und eleganten Eindruck.

... Abbildun g 4.48
Jamiegregory.co .uk nutzt Schwarz und Weiß sowie
eine deutliche typografische Hierarchie, um seine
Inhalte elegant und eindrucksvoll zu verm itteln .

_- _
_
.
_
-_
---_ _-_ _---

._ .... _.· ..
_..- ......._- . _..... _......._ __
.. ---_.
.. _---__ .
...-_. .-..... .... - ._--._- = ::.:=-==::.:==--==.:.:.::-.::..
"-... ...
"o',y.--=.:.:.=
-- -.........-_.
_
------_..-.
..
_
----_
.
......
_._
..
.
...
__
...
......
...
..
_-_...... __._.-.. _--_._....-.- -_. ...... .._------- ._-.._--_.
.. _..
.... _ _ ·__ _ .... _N _

--~-~-

- - ~ - - - - - _ . _.-

-_
___._
---_
_._ ____ _
__

_~- - -"_
' _ ___ .. H

................_ _ . _ .._

.. Abbildun g 4.49
Bun te Farben und schicke grafische Elemente im Einsatz (Quelle: Sebdesign.eu)

._-_.

Googk _

... Abbildun g 4 .5 0
Neutrale Farben effektiv eingesetzt. Hier liegt der
Schwerpunkt auf den Inhalten. nicht auf dem Design.

_O~

_____
"'.........

__

. __. ._....M_•• __ • •

~

·

_

_ •• _

----_.~_.­
~._ -- _. _ ._­

•

•

..

~

.. _ ... _ .. ____ w . .... .

..

...

.. Abb ildung 4.51
Neutrale Farben bel Google Anao/ tics
(Quelle: www.google.coml analytlrs)
252

4

_
_._---

........
_....-....... .....

• O' "

Farbgest altung Web2.0

..... .. ....
-----,

_~.-

,

-.
- -----__........._''I00I'''''...,

.. n .. ·. . . . . . .

w
.. ........~
"
--

.. ,.... ,-

...,,,
...,,. ".,,

... . .

----_

... Abbildung 4.52
Neut rale Farben bei .A list Apart.
(Quelle: www.alistapart.com)

4.4.1

Neutral e, pa ss ive Farben

... _...
..__
... . ........
... _
...... ......-.._._.
__ . -... _,... ...........
_-_
•... _---..

Un ter den neu tralen, passiven Farben gelt en Weiß und Grau als
klare Favori ten. In Designs, die stärker auf Einfachheit und Weißraum (Whi te Space) setzen, sind sie häufi g die erste Wahl, wenn
es um eine simple und intui tive Farbgestaltung im Web 2.0- Look
geht. Um eine monotone Seitengestal t ung zu vermeiden, werden
beide Töne häufig durch helle Variat ionen von Grundfarben -

---~---_

._._---~_

~

--..--

......

,

~

Abbildung 4.53
Neu trale Farben im Einsatz,
zum Beispiel für das Design von
Warnungen, Tipps oder Hints.
Im Beispiel: C55 Alert Message
(Quelle: hnp://WWIN.bioneural.
neV2006/04/01/creat e-a-v aJidc55-alert-message, Linkcode 141)

.A

etwa halbt ransparen tes heUes Grun, Blau oder Rot - unterst utzt.
Diese können sowohl eine begleitende als auch eine aktive RoUe
ubernehmen. 50 kann man sie für farbige Akzente verwenden
oder für 5eit enelemente, die hervorgehobe n werden mussen etwa ein Navigationsmenü oder ein Footer.
Eine freundli che und entspannende Wi rkung kann auch durch
wenig aussagekräftiges Grau und Braun erzeugt werden . In Kombination mit jeder anderen Farbe weisen sie kaum Kontrast auf.
Matt und ruhig wirkend, lassen sich beide Farben am besten als
begleitende Töne einsetzen und dominierende Hintergrundfarben damit stärker in Erscheinung t reten.
Farben, d ie sich von Hauptfarben nur durch wenige Abstu fungen unterscheiden, wirken in der Umgebu ng von Hauptfarben

Weißer Hintergrund

ruhig und neu tral. Dies wi rd im Web 2.0 häu fi g ausgenutzt , beispielsweise um ein abgerundetes Bild zu erzeugen.
Im Fließtext können neutrale Farben benutzt werden, um die
Aufmerksamkeit des Seitenbesuchers auf gewisse Aspekte zu lenken. Schwach gesättigtes Gelb und Blau können dabei für Warnmeldungen oder Zusammenfassungen eingesetzt werden. Sie fallen schneller auf, wirken angenehm und ni cht zu eindringlich und

_._
-_.
--

Auf weißem Hintergrund wirkt
jede nur wenig ges.lttigte Farbe
neu tral. Dies kann benutzt
werden, um bestimmte Inhalte
hervorzuheben oder den HoverZustand der Links benutzerfreundlich zu gestalten.

werden somit als benutzerireundli ch empfu nden .

.......

..... _....

--

._Sign In

-

~-~

_ _ ..... _

1:)

.. h _.. __ ........ _ ..., ·
('

...

r_

Abbildung 4.54
Neutrales Gelb als ruhige Hintergrundfarbe für Formulare
(Quelle: httpJlWWIN.markboul ton. co.u k! portfol ioldetai Vinternat iOML
baccaiaureate_organization, linkcode 142, htt pJlwww.a listapart.com/
artides/prettyaccessibleforms, Unkcode 143)

.A

Eine weitere Anwendung wird durch die Gestaltung von OnlineFormularen geliefert. Angenehme, beinahe sanft e Farben kommen dabei häufig zum Einsatz .
4-4 FarbpaJette imWeb2.0

I

253

I

... Quick Conlacts
!Seafch, add. cr

1rlV\t8]

Welcome to Mlxx!

• Vil aly Friedman
Set status hefe ..

Abbildung 4.55 ..
Neutrale Farben sind sympathisch
und angenehm. Sie wirken als
un terstützender visueller Inhalt
und erleichtern das l esen und
Auffi nden von Inh al ten
(Quelle: Gmail.com , Mixx.com).

"'In Is your !Ink 10 lila web contenl lIlal real1y
malters
Leam more about "'001 bywalchinll a ~

\QlH. or goln" 10 aUf HelD sedlon &.E&l.t.

Clr at wllh
YO III frl ellds
Invrle them 10 Google
Mall

Ready lo gel statle(f1
Slart VOurMbex Now !

0

Neutral e Farben vermitteln eine visuelle Ruhe. Sie erscheinen
za rt, m ild und weich und dominieren des halb in Webprojekten,
die vor allem auf einen angen ehmen und sanften Eindruck se tzen. Daher werden helle Designs bei Projekten, die auf Inhalt e
und nicht auf einen starken visuellen Eindruck setzen, den dunklen Entwürfen so gut wie immer vorgezogen.

--_ . . .__--_
..
._--------_
-----,------

-----_. ...-

Praxisbuch Web

.....

PraxlsbuCh Web 2.0:.

2.0:.

8estimmU1l9 00fl Harmonien
~

.

=::':'=-_"'!'...
==,:::::-_~

...

~-----

---.....--_._-

----------

--...--...._-_
....
-_
..
_
..
_
...
---...- ---_..==.:.Z_--=....
.._-.....
----==:::::.-===-..:.:...-:.
......
-_..___-----_
.... _---Praxisbuch Web 2.0:.

_-

Praxisbuch
Web 2.0 ~

___ N

= :,: ::==:=:=-::_----~-

A

Abbildun g 4 .56

Aktive und neutrale Fa rben im
Ei nsatz. So gelangt man von
einem schlichten layo ut zu einer
harmonischen Farbkompositi on.

254

I

4

Farbgestaltung Web 2.0

4.4.2

Bunte , aktive Farben

Um Emotionen hervorzurufen, muss man Seitenbesuchern ein
Bild anbieten, das att rakt iv und ansprechend wirkt. Wichtig ist
dabei, dass die Schwerpunkte des Auft ri tts sofort deut lich werden, und dass die Seit enpräsentation sympathisch gen ug ist .
Bunte Farben stellen in diesem Zusa mmenhang ein mächt iges
Werkzeug dar, mi t dem sich eben dies besonders gut bewerk-

stelligen lässt. In Kombination miteinander verwendet. können Grün, Rot und Blau erfrischend wirken und einer Webseite
dadurch mehr lebendigkeit und eine visuelle Ästhetik verleihen .
Auch ist es in der Regel wichtig, das Image bzw. den Tätigkeitsbereich eines Kunden nicht nur möglichst realitätsnah, sondern
auch möglichst attraktiv ins Web zu übertragen . Bei Aufgaben
solcher Art können bunte Töne eine neue Dynamik auf einer
Webseite erzeugen .
Bei bunten Designs ist der Einsatz von kräftigen Farben bedeutend; sie sollen sich einprägen und erscheinen deshalb häufig in
voller Sättigung. _Aktive« Farbkompositionen sind intensiv und
lebhaft. Meistens bedienen sich Designer bei _aktiven « Farbpaletten lei chter Abstufungen komplemen tärer Farben. Die daraus
resultierenden Farbpaletten stellen Kombinationen primärer,
sekundärer und tertiärer Farben dar.
Auffallende Farben findet man insbesondere in logos und
Überschriften moderner Web 2.O-Applikationen. Sie treten aber
auch als Nebenfarben in der gesamten Seitenkomposition auf
und sollen für ein abgerundetes Konzept und die Dominanz der
Corporate Identity auf der Seite sorgen.
Es ist wichtig zu beachten, dass prächtige, bunte, glänzende
lay outs die Designlandschaft in den ersten Jahren des Web 2.0
dominiert und deutlich geprägt haben. Manch ein Seitenbesucher ma& beim Besuch einer typischen Web 2.O-Seite skeptisch
und desinteressiert werden - schließlich bietet die Seite ni chts
Originelles und erscheint matt und langweilig . Wenn Sie in Ihrem
Design bunte Farben einsetzen, stellen Sie sicher, dass das Endergebnis originell und persönli ch ist und nicht einem übli chen
Schema folgt.

I
IHlffl f

#eeeeee

#ld5b9

ijddeabO

. fad6e6

#bfe1f9

.. Abbildung 4.57
Neutrale Farben im Oberblick

Insbesondere bel duniden Designs zeigen bunte Farben ihre
SUrken und bieten ein beeindruckendes Seltenbild.

- _--

---'...
.---

.. Ab bildung 4.5 8
Bunte und originelle Designs: Mit Individuellen und peoonlichen
Elementen (links) oder mit einem ungewöhnlichen layout (rechts)

4-4

Farbpalene Im Web 2.0

I

255

CoIlabOratlon sottware 10 Keep you In 11'1& lcop

r

.- ·-

_-

..- ...

...
.. Abbildung 4.59
Auffallende Layouts im Web 2.0.

,_--

_.- --'. . .....- -... -....._--

----~-

-~

:...::..
~

Hellbla u, Grün und helles Violett sind optimal, um die Seiteanzie-

hend und schick aussehen zu lassen. Sie wirken erfrischend und
edel , da sie mit Natur, Schönhei t und Rei chtum in Verbindung
gebracht werden. Insbesondere w ird Grün als Ausgleich zwischen
kaltem Blau und heißem Rot empfunden und kann einen hohen
Kontrast zwischen blauen und ro ten Farbtönen relativieren.

256

4 Farbgest altung Web 2.0

I
'Il5/00
• Abbildung 4 .60

Bunte Farben Im OberblIck

• Abbildung4 .61
Dunkle bunte Farben Im Oberblick

Um die Attraktivität der Farbpalette auch bei professionellen
Webauftrit!en nicht zu stark reduzieren zu müssen, verwendet
man Im Web 2.0 häufig dunkle Abstufungen der bunten Töne.
Wegen der schwächeren Sättigung fallen sie nicht so stark auf,
erzeugen aber einen seriöse n Eindru ck.

-

-

- __........._.--...--._---_
........
.......-..............--- .-- .•.- - ..._
.
---...-_
...... ..... _- . ..... _._'
....
---_._-_
._
.. _. ... ....
--"""""'- _. ....-.-_---_. ---- ~ - - ~----~-

•

""

0-'-

'

.",,,"-

...

"

~

.-.
... Abbildung 4.62
Beispiele für die Verwendung ...on
dunklen, bunten Farben

4-4.)

Dunkl e, sc hmutzige Far ben

Besondere Popularität genießen bei dunklen Designs Braun,
Weinrot, Schwarz sowie seh r dunkle Abstufungen von bunten
Farben . Wie schon angesprochen, dienen diese Farben vor allem
dazu, die Seite für Besucher realit.'it snaher und vertrauter erscheinen zu lassen. Zudem versucht man mit solchen Farben , ein originelles und alternatives Design zu erreichen, das sich von den
in den Jahren 2006 und 2007 dominierenden glanzenden und
prachtvollen Designs deutlich abgrenzt und somit interessan ter
wirkt.
Meistens treten dunkle und schmutzige Farben zusammen
mit grafi sch aufwendigen Ansätzen auf. Bei Dirty-, Grunge- und
4.4

Farbpalette im Web 2.0

I

257

Trash - Elementen sind diese Farben beinahe ein M uss, bei weniger radikalen Designs werden sie ent weder subt il oder intensiv
eingesetzt. Es kommt dabei darauf an, inwiefern der Designer
dunkle Töne in seinem layout dominieren lassen möchte.
Auf dunklen Hintergründen erscheinen meistens entweder
helle Abstufungen de r Hintergrundfarbe oder zeit lose Farben
wie Weiß und Grau. Im Kopf der Seit e grei ft man gerne zu bunten Farben , um etwa einen Slogan hervorzuheben. Im (on ten t• Abbildung 4.63
Farbschema populärer dunkler
Töne im Überblick

Bereich werden bunte Farben dagegen sehr sparsam eingesetzt.
Gegebenenfalls n ur, um die Au f merk samkeit der Nu tzer auf ganz
spezielle und besonders wicht ige Inhalt e zu lenke n. Dabei unterst ützen Farben das Gesamtbild, ohne in diesem zu dominieren .

_
..... _.. _...

.
=t":::... . "
~:-=

... .

=~==
•. .~
. I

--

..-- --_
. - .=- ---.....
.

l~

_.. _. --

•

-~

L --

--_._-

;:--=:-:-----= -

Abbildung 4.64 ...
Dunkle Farben kommen im
Web 2.0 häufig zum Einsatz .

4.4.4

Weiß auf Schwarz oder Schwarz auf Weiß

Die Frage. wie man angesicht s vorgegebener Proje ktziele einerseits eine opt imale Lesbarkeit der Inhalt e und anderseits eine
Dunkle Designs

Einer der Gründe für die Tendenz zu dunklen Designs Ist die
farbenfrohe Präsentation vo n
Seiteninhalte n, die im Web 2.0
angestrebt wird. Bei solchen
Konzepten verdrängen ein visu ~
elles Design und Grafi k schlichte
und rein textbasi erte Konzepte.
die durch Information überzeu gen w ollen.

258

I

4 Farbgestaltung Web 2.0

vi suelle und grafische Balance errei cht, wi rd in erste r Linie durch
die Seiten st ruktur sowi e die Auswahl und den Einsatz der Farbpal ette ent schieden. Grundsätzl ich müssen sich Designer berei ts
am Anfang für eine passive und neutrale (häufig Weiß) oder eine
aktive und lebhafte (häufig Schwarz, al ternat iv bunte Farben)
Hauptfarbe entscheiden.
Dabei lässt sich die Frage. ob ein dunkler oder ein heller Entwurf (bezogen auf die Hauptfarbe) tur einen Webauftri tt besser
geeignet ist, im A llgemeinen nur schwer beantworten, da dies
von den konkreten Intentionen des Au ftraggebers abhängt. Den-

noch kann man gewisse Faustregeln angeben, die Sie bei der
Erarbeitung Ihrer Entwürle berücksichtigen sollten.
In den letzten Jahren zeigt sich unter Designern die Tendenz ,
den »invertierten. Ansatz - helle Fließtexte auf dunklen Hintergründen - dem konventionellen Schwarz-auf-Weiß vorzuziehen. Dies stößt bei Usability- Experten häufig auf Skepsis, da
eine benutzerfreundliche Realisierung dunkler Ansatze eine recht
komplexe (und eine im Vergleich zum (jblichen Ansatz aufwendige) Angelegenheit ist, bei der allzu häufig Usability-Probleme
auftauchen und gravierende Feh ler gemacht werden. Das letztere betrifft vor allem die Wahrnehmung von Sei teninhalten.
Im Allgemeinen wird schwa rzer Text auf we ißem Hintergrund
schneller UI,d besser gelesen. Auch bei langen Textpassagen
wird ein dLlrch schnittli cher l eser mit Schwarz-auf-Weiß besser
bedient, unabhängig von der gewählten Schri ftgröße und der
Textdarstellung. Bei kürzere n Bei t ragen zeigen dagegen dunkle
Ansätze ihre Stärke, da sie Inhal te außerst ansprechend präsentieren können. In diese m Zusammenhang sprechen Experten auch
vom Aesthetic Usabifity Effect dunkler Designs.
Und in der Tat werden dunkle Designs meistens nicht wegen
Ihrer ästhetischen Mängel kritisiert. Überwiegend werden die
grundsätzlichen Probleme mit der lesbarkeit von Text bemängelt. Das lesen von langeren Beiträgen wirkt auf dunklen Hintergründen sehr schnell ermüdend, auch wenn ein optimaler
Kontrast eingestellt ist. Deshalb eignen sich helle Hintergründe In
der Regel besse r für mehrseit ige Publikationen oder auch relativ
umfangreiche Artikel, die man bei großen Webauftritten solider
Unternehmen oder Online-Zeitungen findet. Kurze Prod ukt präsentationen, Fotogalerien, Portfolios oder auch Auftritte, die auf
eine bestimmte Zielgruppe ausgerichtet sind, können sich auch
dunklere Töne leisten. Etwa um einen starken visuellen Eindruck
zu hinterlassen und eine Botschaft besonders stark zum Au sdruck
zu bringen.
Außerdem Ist es sin nvoll, bei der Auswahl der Hauptfarbe die
Häufigkeit, mit der die Leser die Seite besuchen sollen, in die
Gesamtüberlegung mit einzubeziehen. Dunkle Farbtöne wi rken
intensiver als helle und werden deshalb meistens als »schwer.
empfunden. Bei regelmäßigen Besuchen wirken dunkle Töne deshalb Im Allgemeinen eher läst ig und sollten deshalb vermieden
werden. Eine konsistente Abstimmung der Kontraste ist insbesondere bei dunklen Designs von Bedeut ung. Nicht klar genug
dargestellte Textinhalte verwirren das Auge des Betrachters. Bei
hellen layouts wird das Problem relativiert, da man es in der
Regel mit wenigen unruhigen Kontrasten zu tun hat.

I

Dunk le Hintergrundtöne
Dunkle Hintergrundtöne können
den sogenannten Aesthet/c UsabiIny Effecr erzeugen. Ob er mi t
konven tioneller Usabllity gleichgestellt werden kann, ist fraglich.

Hell und Dunket
Hell und Dunkel beziehen sic h in
diesem Kontext nicht nur auf
weiße und schwarze Farben, sondern auch auf bunte helle (2. B.
h~lIes Grün) und bunte schwarze
(dunkles Rosa) Töne.

4-4 FarbpaJette Im Web 2.0 I

259

4.5
HINWEIS

Be i du nIde n Designs ist eine
konsistente Abstimmung der
Ko nstraste besond ~rszu b~·
ach ten . Eine harmonische Darstell ung 1st bei dun klen Designs
schwerer zu erreichen als bel
hellen Designs.

Werkzeuge für die Farbauswah I

Doch ob Schwarz oder Weiß, oh ne geeignete Hilfsmittel kommen
weder Einsteiger noch Profis bei der Auswahl einer geeigneten
Farbpalette zurecht. Ein gut ausgestatteter Werkzeugkasten kann
Ihnen helfen, auf die Spuren harmonischer Kombinationen sowie
visueller Fehler zu kommen. Es folgt eine Übersicht nützlicher
Far bwe rkzeuge im Schnel ldurchlauf.

4 .5.1

Grundfarben auswä hl en

500+ Colors st ell t über 500 Farben mit HEX- und RG8-Werten in

einer kompa kten Tabelle zusammen.
http://c/oford.com/resources!colours!500col.htm (linkeode 144)
Klickt man auf den Namen der Farbe, so wird der Hintergrund
auf die entsprechende Farbe gesetzt . Das Too"eiste t seinen Dienst
meist erhaft. wenn es um die Auswahl passender Fließtextfarben
zu einer Hin tergrundfarbe geht. Ähnlich funk t ioniert Web (olor
Visualizer (http://www.ideo.comlvisualizer.htm (linkeode 145))

4 .5.2

Farben mi sche n

Color Blender vermischt zwei Farben, indem es Abstuf ungen
erzeugt, die von einer farbe zur anderen führen.
Abbildung 4.65 •
Web Color Visualizer (Quelle:
http://www.ideo.com/visualizer.
html, linkeode 147) veranschaulicht he)[adezlmale Farbwerte.

http://meyerweb.comlericltools/color-blend (linke ode 146)
Die Anzahl der Variat ionen kann der Benutzer se lbst definieren. Das Werkzeug kann benutzt werden, um glatte Übergänge
zu schaffen und diese nat ürl icher erscheinen zu lassen.

---

260

I

4

Farbgestal tung Web 2.0

4.5.3

I

Farbpaleu en wählen

Auf dem 4096 Color wheel können Sie Farben auf dem Farbkreis
stufenweise abtasten und optimale Farben nacheinander ablegen.
http://www.ficml. orcIJemi mapls tyfe/color/wheel. ht mJ (linkcod e

148)
Anschließend können Sie auswahlen, ob Sie die Web-Safe-,
die Web-Smart- oder die Web-Unsafe-Farbpalette verwenden
möchten .

... Abbildun g 4.66
Adobe Kuler (kule r.adobe.com) lasst Designer Farbschema ta hinzufOgen,
bewerten und mittels RSS abonnieren.

._-,

•

q
... Abbildun g 4.67
Daily Color Scheme (beta .dailycolorscheme.com) liefert jeden Tag eine neue harmonische Farbpalette.

-

I:~
=
-.:.;..
;::' ·~
~
._--

... Abbildung 4-68
Color live-Werkzeug In Illustrator CS3

Die Inspiration für die Palette einer Webseite lasst sich häufig
aus Galerien von Farbpaletten gewinnen. Eine harmonische Farbkomposition findet man zum Beispiel bei :
4.5 Werkzeuge fOr die Farbauswahl

I

261

.-.,.- ..-

-_. . .-...-.-:" ~~ . -

6 Abbildun g 4 .69
Color Palette Generator (http://
www.degraeve.coml( olor-palette,
linkeode 151) kann Farbschemata

automatisch aus Bildern
ren.

~~

.. Abbildung 4 .70

Colortoy 2.0 (htt pNwww.defencemechanism.wm/color) erzeugte
harmonische Farbschemata zufällig oder zu einer vorgegebenen
Grundfarbe.

.. Abbildung 4-7'
Mit Color Seherne General or las~
sen sich mehrere Arten der Farb-

kombination anline bestimmen.

----

~- ~,.

,-

~-~P

.. Abbildung 4.]2
Cclour Contrasl Check auf
http://www.snaok.ca

I

4

die populärsten Einträge via RSS abonnieren.
.. colordb (http://pourpre.com/colordb/?I=eng, Linkeode 149)
.. Color Combos (http://www.colorcombos.com)

.. ColourLovers (http://www.colourlovers .com)
.. Daily CoIorSchenJe (http://beta.dailycolorscheme.com)
.. Color Schemer (http://www.colorschemer.comlschemes)

Mit dem in Illustrator (S3 integrierten Tool Live Color lassen sich
harmonische Farbschemata und deren Modifikat ionen effizient in
Echtzeit best im men.

4.5.4

!!!!~!!!!~!!- !!
iii

26 2

Es lässt Designer Farbschemata hinzufügen, bewerten und

generie~

_...._-

.p,.:';:'r-oJiiiiI

... Adobe Kuler (http://kuler,adobe .com)

Farbgest al tung Web 2.0

Farbpaletten erzeugen

Um eine Farbkombination aus einem Bild automatisch generieren zu lassen, kann man Color Palette Generator (http://
www.d@graeve.com/color-palette) verwenden. Dem Anwender
werden zwei Paletten (dull u nd Vibrant) bereitgestellt, die sich
durch die Sättigung der verwendeten Farben unterscheiden. Die
Palette einer Webseite kann via RedAlt (http://redalt.com/Tools/
I+Like+Your+Colof5 (Linkcode 150» ermittelt werden.
Monochromatische Farbpaletten lassen sich mi t Color
Palette Creator (http://slayeroffice.com/tools/color-palette (Unkcode 152» mit einem Mausklick erzeugen.
Das Tool bestimmt zu einer Grundfarbe ihre Abst ufungen
(100%, 75%, 50%, 25% und 10%) und gibt sie direkt zusammen mit den entsprechenden H EX -Werten aus. Ähnliche Ergebnisse liefert Color Toy (http://www.dejencemechanism.com/color.
Linkcode 153).
Aufgeteilt e komplementäre und doppelt-komplementä re
Beziehungen kann man mit Technicolor (http://www.themaninblue. com/experiment/Technicolor (Linkeode 154», Unsaje Color
Match (http:// www.neteffect.dklcolormatch(Linkcode 155» und
Coformixef5 (http:// wlormixf.f5.comlmixers/cm (Un kcode 156»
erzeugen. Neben zv.Jöl f Farben der Palette wird auch die Anordnung und Verteilung der Farben auf einer Seite vorgeschlagen.
Color Scheme Generator (http://wellstyfed. com/toofs/coforscheme2/index-en.Mml (Linkcode 157» ist ein kompaktes und
mächtiges Werkzeug zur Erstellung von Farbpaletten beliebiger
Art und Sättigung. Es lassen sich monochromatische, analoge
sowie Kon trastfarben automat isch erstellen, aber auch Triaden
und Tetraden können beliebig mit einem Schiebregler angepasst
werden. Das Tool zeigt daruber hinaus. wie Farben von Nutzern
mit Sehbehinderungen wahrgenommen werden. Alternativ kann
auch Color Blender (h ttp://coforblender. com ) verwendet werden.

4.5.5

I

Fa rbe n um wandeln

Um eine Far be aus einem Farbsystem in ein anderes Farbmodell
zu ubertragen, kann man Color Calm/atar (http://www.eawrgb.
com/calculator.php (Linkeode 158» verwenden. Mit dem ToalIassen sich über zwanzig Umwandlungen online durchführen. Nähe-

res über die verwendeten Regeln sowie einen Überblick über die
vorhandenen Umwandlungsmäglichkeiten findet man auf der
Seite : http://www.easyrgb.coml math.html(Linkcode 159).

4.5.6
Kontrast prüfen
Den Hell-Dunkel-Kont rast kann man mithilfe des Dienstes GrayBit prOfen, der Seiten in Abhängigkei t von ihrer Farbpalette in

Schwarz-Grau-Tönen anzeigt und somit sofort erkennen lässt,
ob Seitenblöcke visuell leicht zu unterscheiden sind. Die Hintergrundfarbe und die Fließtextfarbe kann man direkt auf der Webseit e http://www.mook.caltechnical/ colollr_contrast/ colollr.html
(Linkcode 160) miteinander vergleichen. Das Tao I berechnet den
Kontrast und gibt an, ob er hoch genug ist.

4.5.7

Zu gä ng lichkeit prüfen

Um die Barrierefreineit einer Prä senz auch im Hinblick auf ihre
visuelle Gestaltung si cherzustellen, ist es nO"tINendig, von vornherein möglichen Problemen vorzubeugen. Ein entsprechender
Accessibility-Test kann mit visCheck (h ttp://www.vischeck .com!
vischeck (linkcode 161)} durchgeführt werden. Der Dienst zeigt,
wie eine Seite von Nutzern mit Sehschwächen gesehen wird. Alternativ können Sie auchAccessibility Color Wheel (http://gmazzocato.

altervista.org/ colorwheeVwheel.php (Linkcode 162» verwenden .

r---------,

-----_
_._.__...-------. ......._-__
_
............
.... ....
__
-... _-_
........
,-_._
._
.._._""',
_M
_
. . ,..,_"
....__
.
.
.
"'
.......
-.....
.
:===:... ......
_
.......__
..........
-_
......
_
._.
..
_--.. _
_._.. .
_......__
..."''''._......
..... .................

__-_._-_
-__ _ _._---_
--........'...,......... .. "............_'
.. ,..........
._..
.............
,.
,

103 1...."'...... _

-,",

... ~ ._

~ ~._,

~,

-~.

..

,

==::."";..::'"'-...,,-~ .. _-'
~ _

_

.. ... ... _ _ .. _ _ . - . . , .... M

,

-

_

.

_

..

~

"'_
::.."':':.~:: :::::.~.:..:-..":::""..:.::--.~

,
,

- ....- -- 1 --

.~."-_

~--_.

.. Ab bildun g 4.7]
übliche Seitendarstellung in visuellen Browsern
(Quelle: http://www.visualcomplexity.com/llc)

-.~

.. Abbild ung 4 .74
Die Seitendarslellung in gra uen Tönen mithilfe von
GrayBit (h ttpJlwww.graybit.com). So lässt sich der
Kontrast zwischen den verwendeten Farben am besten
bestimmen.
4.5

Werkzeuge fOr die Farbauswahl

I

263

4.5.8

Farbpalette bewerten lassen

Um die harmonische Wirkung einer gewählten Farbpalette zu
garantieren, kann man sie durch andere Anwender bewerten und
kritisieren lassen. D ies kann etwa bei Adobe Kuler (http ://kvler.
adobe.eorn) geschehen. Eine Galerie beliebter Farbkombinationen
wird mitgeliefert.

4.5.9

Kostenpflichti ge Werkzeuge

Unter den zahlreichen Applikationen zur Erstellung und Verwaltung von Farbpalerten zeichnet sich insbesondere ColorSeherner
Studio (http:// www.colorsehemer.com) durch die Einfachheit und
Vielfaltigkeit der Funktionen aus. Mit dem Tool kann man nicht
nur elf Typen von Farbpaletten auf einem Farbkreis auswählen,
sondern auch die Sättigung der Palette stufenweise anpassen.
Beliebte Farben können abgelegt werden. Eine schwächere Farbe
zwischen zwei Kontrastfarben kann durch Color Blender gefunden
werden, und mit Color Scherne Analyzer lassen sich Hintergrundund Fließtextfarbe aneinande r anpassen .
.. Abb ildung 4-75
ColorSchemer kann unter anderem Farbschemata aus Bildern
erzeugen.

4.5.10 Weitere Ressourcen
Colour Selector (http://www.limov.com/colour/tools.lml#p review)

bietet mehrere Tools zur Erzeugung von Farbpaletten, zum
Mischen von Farben (Erzeugung dunklerer und hellerer Abstufungen) sowie eine Vorschau der Fließtexte auf einern Hintergrund.

4.6

Ton der I<omposition

Haben Sie sich für einen dunklen oder hellen Ansatz entschieden,
so ist anschließend die Auswahl der Töne für die Gesamtkompositi on an der Reihe. Ein interessanter Ansatz bei der Erarbeitung
der ersten Entwürfe ist die Auswahl von Farben aus der WeißSchwarz-Palette. Durch Abstufungen von Schwarz bzw. Weiß
kann man festlegen, welche Seitenelemente visuell stärker zur
Geltung kommen sollen und wie die Verteilung der Inhalte auf
einer Seite aussehen soll.
Nach der Auswahl einer passenden Designskizze übertragen
Sie diese beispielsweise mit Adobe Photoshop in einen entsprechende n Box-Entwurf, indem Sie einzelne Blöcke auf dem leeren Canvas zusammenstellen. In der Regel ist die Tonalität von
wenigstens vier Blöcken, nämlich des Headers (event uell mit
einer Suchbox und einern oberen Navigationsmenü), des primären Inhaltsblocks (für Fließtex te), des sekundärem Inhaltsblocks (Sideba r) und des Footers festzulegen. Bei hellen layouts
264

I

4

Farbgestaltung Web 2.0

I

verleihen Sie allen Blöcken zunächst die Farbe Schwarze, der
Hintergrundfarbe dagegen Grau. Bei dunklen Layouts gehen Sie
umgekehrt vor.
.. Abbildung 4.76
Erster grober Entwurf in
WeIß-Grau-Schwarz

Experimentieren Sie nun mit der Transparenz von Weiß, Grau
und Schwarz so lange, bis ein hoher und optimaler Kontrast zwischen den Seitenelementen erreicht ist. Je stärker sich ein Seitenelement im Gesamtlayout hervorheben soll, desto dunkler (bei
hellen Layouts) bzw. heller (bei dunklen Layouts) ist die Abst ufung, und desto gesättigter wird nachher die Farbe, die bei der
Auswahl einer passenden Palette gewählt wird .
Kopf- und FußzeHen, aber auch Navigationsmenüs und Sidebars sind dabei (bei hellen Designs) konsequenterweise in Dunkel-Grau, Dunkel-Schwarz zu färben, damit sie direkt deutlich
werden und sich vom Fließtext der Seite abheben. Am stärksten
sollte der obere Seitenbereich hervortreten, gefolgt von den
Navigationsmenüs. Der obere Bereich wird von Seitenbesuchern
als Erstes gesehen und sollte deshalb angenehm oder neutral wirken.
Bei hellen Layouts ist es sinnvoll. diese beiden Blöcke dunkler
zu gestalten. Ein Btock, der mit Fließtext gefüllt wird, lässt sich
dag;egen am besten durch helles Grau darstellen. Trennlinien und
Abstände können weiß gehalten werden. Bei dunklen Layouts ist
es umgekehrt.

Transparenz
Experimentieren Sie mit der
Transparenz \Ion Farbtönen, bis
ein optimaler Kontrast erreicht
wird.

4.6

Ton der Komposition

I 265

Nach dem Experimentieren mit der Sättigung und Transparenz

HINWEIS

Kopfzeilen, FußzeIlen, Navigationsmenüs und Sidebars sind in
Dunkel-Grau, Dunkel-Schwarz
zu färben.

von Schwarz könnte das erste Ergebnis so aussehen:

F ließ t ex t ~)_ ...oo)

5id ebar

Abbildung 4 .7] •
Detaillierter Entwurf mit klarer
Verteilung der FunktionaliUt einzelner Blöcke
Im Beispiel w ird durch einen st arken Kontrast zwischen dem
dunklen oberen Block und dem hellen unteren Block eine visuelle Spannung erzeugt. Beachten Sie, dass sie eher für layouts
typisch ist, die attraktiv wirken und Seit enbesucher durch visuell
ansprechende und häufig bunte Farben beeindrucken sollen. Der
logo-Bereich wird in dunkleren Farben gestaltet, um einen seri-

_

~.. ...-.............. ,,'
-

-

.l-

ösen Eindru ck zu vermitteln und den Block tatsä chli ch als Kop f
der Webseite wahrnehmen zu lassen .
Können Sie das gesamte Seitenbifd wahrnehmen, ohne dass ein
Block bzw. eine Hintergrundfarbe sofort auffällt, so ist es ein
positives Zeichen dafür, dass ein fUnktionierender Kontrast vor-

..t..

Abbi ldung 4.78

Die Opazität wird vergrößert,
damit auch die Sättigung der
sCMarzen Farbe.

266

I

4 Farbgestaltung Web 2.0

liegt . Betrachtet man das obere Beispiel genauer, so fällt auf, dass
der Sei tenkopf nicht stark genug hervortritt und im Vergleich zum
oberen Navigationsmenü relativ schwach wirkt. Der Grund liegt
darin. dass der Kopf der Seite ein wenig matt ist und deshalb
nicht unbedingt die Dominanz des oberen Bereichs vermittelt.

I

Du rch eine Erhöhung der Sättigung erreicht man ein Bild, das
berei t s in seinen Grautönen eine klare Strukturvorvveist und die
Funkt ionen der einzelnen Blöcke optisch au ftei lt.

.. Abbi ldung 4.79
ModifiZierter I<ontrastentwurf in
Adobe Photoshop

Sie haben auf diese Weise ei ne anschauliche Komposition mit
einem festgelegten tonalen Farbbereich der Sei tenblöcke konstruiert. Sie sorgt dafür, dass "die Funkt ionalität Ihres Layouts
nicht von einer gewählten Farbe abhängt..: \ und während des
gesamten Designprozesses als eine »b ulletproof.. -Vorlage dienen
kann.

4.7

Bestimmung von Harmonien

In Abhängigkeit von den Zielen, die ein Designer durch die Farbkomposition erreiche n will, entscheidet man sich in der Praxis für
helle oder dunkle Kombinationen. Die jeweiligen Harmonien lassen sich in bei den Fällen auch bei genau festgelegter Tonalität nur
durch geziel tes Experimentieren bestimmen . Der Auswahl einer
Haupt farbe folgt die Best immung der Nebenfarben. Monochromat ische Farben können dabei unt erst ützend wirken und einen
fließenden Übergang von einem Se itenelement zu einem anderen ermögli chen .
Um be i der Farbwahl möglichst konseque nt vorzugehen, ist
es üblich, einzelne Seit enblöcke mehrmals von oben nach un t en
abzutasten. Dabei ist jeweils zu prüfen, ob die Schnittstellen
von Blöcken mit untersch iedliche r Farbe keine visuellen Nebeneffekt e verursachen. Ist dies der Fall, so kann man dies durch
den Einsatz einer dezent en Übergangsfarbe - diese wird auf
dem Farbkreis dazwischen liegen - korrigieren. Allmählich kann
man auf diese Weise jedem Seitenelement eine zu ihm passende
Farbe geben.

Hell oder Dunkel
Die Entscheidung zugunsten
einer hellen oder dunklen FarbkompOSi tion fällt in Abhängigkeit
von den gestellten Zielen und
Aufgaben der Seite.

Obergangsfarbe
Eine Übe'Bangsfarbe können Sie
mithilfe von Color Blender bestimmen.

1 Mark Boulton, . Five Simple Steps Ta Designing With (oIo ur. ,
http://www. markboulton. co. uk/journaVcomm~ntslfiv~ .-sfmp/~ _st~ps_to_
designirw_withJolourl (linkcode 099)
4.7

Best immung von Harmonien

I

267

Wie geht man nun aber konkret vor, um eine optimale Sei tenwahrnehmung sicherzustell en? Im Weiteren bet rach ten wir
die Auswahl von Farbpaletten für das Layou t , das im vorigen
Abschnitt entworfen wurde. Dabei wird die Aufgabe gestellt , die
Startseite eines Web 2.0-A uftri tts zu erstellen. Diese soll Sei ten besucher vor allem durch eine klare Darstel lun g, angenehme Farben un d ein intuit ives Design ansprechen und überzeugen.

4.8

Helles Design - Praxisbeispiel

Wer vo n hellen Designs sprich t, hat in der Rege l Layouts mit
dominierender weißer Hint ergrundfarbe im Hinterkopf. Dies
m uss jedoch im Allgemeinen nicht sein, denn auch schwach
gesättigtes Ge lb , Grün oder Grau können bewirken, dass eine
Seite hell erscheint, aber eben nicht weiß ist. Im Beispie l wi rd
ein helles Design mithi lfe eines weißen Hintergrunds sowie hell er
f arben im Haupt block der Seite erstellt.

Farbharmonie prüfen

Ist sowohl die Grundfarbe als
auch eine farbige Kompos ition
der Seite bereits festgelegt, so
ist zuers t zu überprüfen, ob die
gewahlten Farben überhaupt
zueinander passen. Zu diesem
Zweck können Sie ein Werkzeug
verwenden, das zu einer gew<t hlten Farbe passende harmonische
Ergänzungen vorsc hlägt. Ist eine
Farbe aus der gewahlten Palette
nicht im VOßchiag enthalten, suchen Si e auf dem Farbkreis nach
de r n<tchsten entsprechenden
Farbe, die im VOßchlag enthalten ist und ersetzen diese durch
den " berechneten.. Farbton.

268

I

4 Farbgestaltung Web 2.0

4.8 .1
Header
Überlegen Sie sich zuerst , welche Farbe im Kopfbe reich der
Seite dominieren soll. Diese ist etwa in Abhängigkeit vom f irmenzeichen bzw. Tätigkeitsbereich des Unternehmens oder der
zu erzeuge nden Atmosphäre zu wählen. Orien tieren Sie sich bei
Ihrer W ahl an der psychologischen Wirkung der f arben u nd deren
Assoziat ionen. Der Kopf eines Webauftritts ist das erst e Element,
das der Besucher beim Seiten besuch sieht. Seine Farbgestaltung
gil t es deshalb mit aller Sorgfalt und Präzision anzugehen .
Um eine dominierende Farbe in einem konkret en f all auszuwählen, bet rachtet man das Ziel, das dad urch erreicht werden
soll. Da sich die Musterseit e an ein möglichst brei tes Publikum
richten soll und kein best immtes Profi l d er Sei tenbesu cher (also
eine Zielgru ppe) anzusprechen hat , ist eine Farbe zu li nden, die
von m ögli chst vielen als angen eh m empfun den wird. Blau ist
mit Abst and die beliebtest e Farbe, sowohl bei Frauen als auch
bei Männern . Als Farbe des Vert rauens und der Verlässlichkeit
erzeugt sie posi t ive Assoziationen und wirkt freundlich und sympat hisch.
Um einen passenden Hex-Code für die Farbe zu fi nden, kann
man beispielswe ise die f arbpalette in Adobe Photoshop verwenden . Effizienter ist es jedoch, si ch eines der vorgestellten Werkzeuge zu bedienen. Un ter anderem können Sie d en webbasierten
Color Seherne Genera tor 2,4096 Color Wheel sowie 500+ Narned
Colours verw enden. Bei den beiden letzten Tools können Sie
nich t nur Web-Smart-Farben sogleich ermitt eln. Ebenso sehen

Sie unmittelbar, wie die Farbe auf einer Seite präsent iert wi rd,
und ob der Effekt, den Sie erziele n möch ten, erreicht wird.
Als domi nierende Farbe f ür das Be ispiel wi rd die Farbe 1133aadd
aus dem Fa rbkreis gewählt.
In einer Kopie des erstellten Entwurfs wird dieser Wert für den
Block, der die Container #logo und IIsuc hbox ent hä lt, einget ragen. Um sicherz ust ellen, dass der Kontrast erhalt en bleibt, st ellen
Sie beide Layouts (Kontra stlayout und neues Layout) parallelzueinan der und wechseln Sie via Shortcut ~ + 0II + 0 + ~
f.t4dobe Photoshop (53) in den Grayscale-Modus. Experimentieren
Sie mit d en Ab5t ufungen der Farbe so lange, bis die bei den Töne in
den Entwürfen gleich sind. Dies kann man mit Adobe Photoshop,
ColorMixer oder Color Blender erledigen .

I
Monochromatische Farbpalette
M öchten Sie eine monochromatische Farbpalette verwenden.
so genügt es, die geWählte Farbe
in allen Seitenblöcken zu übernehmen. Die 2um Kontrast passenden Abstufungen der Farbe
werden durch die eingestellte
Transparenz der Töne automati sch mitgeliefert .

.. Abbildun g 4.80
Anpassung der Header-Farbe für einen funktionierenden Kon trast

Zu m Schluss ergibt sich der gleiche Kontrast bei dem »kal ten
Blau« mit dem Hex-Wert #1 16688 (RGS : 17, 102, 136). Dieser
wird in den Entwurf übernommen.

4 .8.2 Seitennavigation
Die Auswahl der Farbe n für die Seiten navigation ist durch ihre
besondere St ellung in der Sei tenkomposi tion best immt. Eine
Navigations leiste soll immer sich t bar sein und dem Anwen der
möglichst intui tiv erscheinen. Dies heißt aber nicht, dass sie das
au ffalligste Seitenelement ist. Vielmehr gilt es, das Men ü neutral
und angenehm wirken zu lassen, schl ießlich geschieht die Int eraktion der Benutzer darüber.
Neut ra lität meint in diesem Fall den Einsatz von monochromat ischen oder an alogen Farben bezüglich der geWähl ten
Hauptfarbe. Um Besuchern einen fließenden Übe rgang zwischen
Element en des Sei ten kopfs anzubiet en, wird mit Color Blellder
(Linkcode 165) eine dun kle Abst uf ung der Hauptfarbe (also
# 116688) bestimmt . Es ist zu beachten, d ass das Tool keine WebSmart-Wert e erzeugt. Desha lb lohn t es sich, direkt mit RGB4.8

NavIgationsmenus gestalten
Navigationsmenus besitzen eine
besondere Bedeutung. So ist im
Web 2.0 etwa eine angenehme
User Experience (Benutzererfahrung) beim Hovem eines Navigati onspunktes ein Mu ss.
Bei Color Blender empfiehlt es
sich , auf der Suche nach dunkleren Abstufungen einer Farbe
Stufen zwi schen dieser Farbe
und der rein schwarzen Farbe
(#000000) zu suchen; bei hellen
Farben komm t dementsprechend Weiß (#ffffff) zum Einsatz.
Alternativ kann man auch Tech nlcolOf (lInkeode 163) oder

Slayer Color Pilierte Creator (Linkcode 164) verwenden.

HeUes Design - Praxisbeispiel

I

269

Werten zu arbeiten. Diese als Farbe für IItopnavbar eingetragen
ergibt durch Abstimmung des Kont rasts die Farbe #004455 (RG6:
0,66,65) f ür den Hintergrund des Navigationsmenüs. Auch diese
Farbe wird ins Layout übernommen.

Fließtext ....-.-..

S,de:bar

Abbildung 4.8, ..
Das Navigationsmenü farblieh
gestalten

4 .8.3

Ban ner

Wichtige Botschaften, Slogans und Aufrufe dienen in der Webkultur 2.0 dazu, Besucher zu Aktionen zu animieren- gleichgültig, ob
es sich um ein kostspieliges Produkt oder einen neuen Webdienst
handelt. Meistens geschieht dies mithilfe von bunten Werbeblöcken (Banner), die gerne großzügig in der Mitte der Seit e platziert
we rd en. Diese sollen dem potenziellen Kunden eine Bot schaft
ve rmitteln und mussen daher die Aufmerksamkei t der Besucher
auf sich lenken . Das Letztere erfordert ein attraktives visuelles
Bild, was häufig mit bunten Farben und einem geschicktem Einsatz der Webtypografie erzielt werden kann. Neben dominierenden analogen Farben kommen dabei auch Komplementärfarben ins Spiel, wobei ihre Sättigung auf die bereits vorliegende
Farbkomposition abgestimmt werden sollte.
Im Beispiel wird zuerst eine helle und monochromati sche Hintergrundfarbe fü r den Slogan gewäh lt (im Weiteren wird vorausgesetzt, dass die Farben immer bzgl. der Hauptfarbe gewähl t
werden). Dazu kann beispielswe ise Color Toy 2 oder Color Blender
2 70

I

4 Farbgest alt ung Web 2.0

I

benutzt werden. Das erste Toolliefert zu einer dunklen Farbe ihre
hellen Variationen sowie weitere harmonische Farben. Gibt man
bei dem zweiten Tool als erste Farbe die Grundfarbe #116688,
als zweite Farbe Weiß (#FFFFFF) ein, so erzeugt der Color Blender
mehrere Zwischenstufen, aus denen Sie sich eine passende Farbe
aussuc hen können . Als eine mögliche helle Abstufung wird von
Color Toy 2 die Farbe mit dem Wert #199FD4 (RGB: 25,159,212)
vorgeschlagen.

Fl ießtt!xt ~_

Sidebar

... Abbildung 4 .82
Der mittlere Seiten bereich hebt
SIch durch seine Buntheit ab .

Da eine Botschaft sich stark hervorheben muss, gilt es nun, solche Farben für den Text des Banners zu wählen, die schnell auffallen, aber dennoch unaufdringlkh sind und nicht blendend
wirken. Untersucht man die Wirkung verschiedener Farben auf
dem gerade gewählten Hintergrund, so erkennt man, dass dunkle Farben entweder einen starken Kontrast erzeugen oder zu
stark in den Hintergrund treten. Durch helle Farben hebt sich
der Text dagegen stärker ab. Er wirkt lebhafter, attraktiver und
freundlicher.
Eine optimale lesbarkeit des Textes lässt sich mit reinem Weiß
erzeugen . Doch wie geht man mit farbigen Akzenten des Banners
um? Beispielsweise wenn Sie bestimmte Wörter bewusst hervorheben oder umgekehrt passiver erscheinen lassen mächten? Dies
führt uns auf die Frage nach einer passenden harmonischen Farbkombination zurück.
4.8

Helles Design - Praxisbeispiel

I

271

4.8.4

Harmoni sche Farbkombinationen

Eine optimale Wahrnehmung der Seite wird durch ein abgerundetes Seitenbild angestrebt. In der Praxis wird dies dadurch
erreicht, dass die gewählten Farben in verschiedenen Kontex ten
- mal als Hintergrundfarbe des Navigationsmenüs, mal als Hauptfarbe der VelWeise im Fließtext - verwendet werden . In der Rege l
soll te ein Designer sich bei der Zusammenstellung der Farbkomposition auf höchstens drei bis vier Grundfarben beschränken.
Das heißt für das Musterbeispiel, dass die Auswahl der Farben
für das Banner im Grunde genommen die gesam te Farhpalette
der Seit e festlegt. Genauso könnte man zuerst die Farbgestalt ung
der restlichen Seiteneiernente vornehmen, wodurch der Farbbereich des Werbeblocks festgelegt würde. Da man grundsätzlich
mit der Vielfal t der eingesetzten Farben sehr sparsam umgehen
soll, lohnt es sich schon jetzt, mögliche Kombinationen genauer
unter die Lupe zu nehmen.

Abbildung 4.83 ..
Komplementäre und aufgeteilte
komplementäre Farben

Betrachtet man die Abstufungen von komplemen tären und aufgetei lten komplementären Farben, so erkennt man , dass sie Töne
liefern, die den gewünschten Eindruck einer Web 2.0-Seite eher
mind ern als betonen . Da Rot , Dunkelorange und Blau .gegensätzliche« Farbtemperatur haben, erzeugen sie einen Gegensatz,
der abstoßend wi rkt und nicht zur Seite passt .
Abbildung 4.84 ..
Monochromatische Farbpalette
für die dominierende Farbe Blau

•
=

Abbildung 4.85 ..
Tetraden-Beziehu rg zu Blau

Der Einsatz monochromat ischer Farben hat die Monot onie der
Seitenkomposition zur Folge, da diese bereits drei Abst ufungen
von Blau enthält. Der Einsatz von Farben, die in der Tetraden272

I

4

Farbgest aJtung Web 2.0

I

Beziehung zu Blau und zueinander stehen, würde die Buntheit
der Seite stärken. Nur ein Paar von vier Farben aus der TetradenBeziehung in die Palette aufzunehmen ist möglich, aber nicht
unbedingt hi lfreich, da dadurch die visuelle Balance der eingesetzten Farben auf dem Farbkreis gestört wird .
.. Abbildung 4. 86

••
•
••
•

Analog@ Farb@n und Farben, die
mit Bla u in ein@rTriade-B@zi@hung
stehen

Die Stimmung der Seite kann dagegen durch analoge Farben
sowie Farben, die mit Blau in einer Triade-Beziehung stehen, verstärkt werden. Der Einsatz der Triade-Palette alleine würde die
Buntheit der Farbpalette deutlich erhöhen. Um diese in einem
angemessenen Rahmen zu halten, wird das vorgeschlagene Goldenrot (#BB9911) durch die zu Blau benachbarte (analoge) grüne
Farbe (#22BB11) ersetzt. Hinzu kommt Violett (#((1188) aus
der Triaden-Beziehung.
Anschließend werden die Farben für die Gestaltu ng des Werbeblocks übernommen und zur besseren lesbarkeit durch Veränderung ihrer Sättigung auf die Hintergrundfarbe abgestimmt.
Auf diese Weise erhält man als zweite Farbe der Palette #88FF88
(helles Grün) und als dritte #FF44AA (helles Rosa). Durch diese
Farben wird die Farbgestaltung weitere r Seitenelemente entscheidend bestimmt.

Bestimmung von Harmonien "'"'
ra ,blheorlc In der

Pr.1~IS

... Abbildung 4.87
Farbpalette des hellen Must erbeispiels

Bestimmurrg von ~a.rm-.9-,)j~n
..... " d .. Pr"lo

neu I

,.rto·~

... Abbildung 4.88

... Abbildung 4.89

Slogan in bonten und angenehmen Farben

Das Banner im oberen Seitenblock

Wer die Farben nicht _per Hand« bestimmen will, kann auch zu
den vorgestellten Werkzeugen greifen. In diesem Fall würde man
jedoch intensiver experimentieren müssen, da die Paletten _universell « berechnet werden und in einem vorliegenden Designkonzept einfach nicht passen können.

4.8

Helles Design - PraxisbeispieJ

I

273

4 .8.5

Sidebar
Ei ne detaillierte Navigationsleiste findet man in Sidebars genauso
häufig wie begleitende Informationen über den Webauftritt. Da
eine Sidebar parallel zu dem eigentlichen Inhalt der Webseite
verläuft, darf sie die Darstellung der Seiteninhalte nicht stören.
Stattdessen kann sie diese durch einen angenehmen Farbverlauf
unterstutzen und das Lesen somit angenehmer machen. Alternativ kann sie auch neutral und passiv wirken - etwa wenn ihr
Hintergrund mit dem des Fließtextes übereinstimmt.
Auf der Musterseite wird fOr die Hintergrundfarbe eine helle
Variation der grünen Farbe aus der gewählten Palette mit Color
Blender bestimmt (#C1F887, RGB (193,248,135». Auch eine
geeignete helle Abstufung von Rosa würde die Seit e harmonisch
erschei nen lassen .

Füe6lelt ~

Füe6text ~

5od. Ir

F....

50de Ir

'.r_

.. Abbildung 4.90

.. Abbildung 4 .91

Sidebar mit heU-grüner Hintergrundfarbe

Die Hintergrundfarbe für den Fließtext wird auf Weiß gesetzt.

4.8 .6

Footer
Häufig ist es im Design wi chtig, die funktionierende Harmonie
eines Auftritts nicht durch zusätzliche und unnötige Effekte bis
auf die Spitze zu treiben. Was für einen Benutzer noch harmonisch erscheint, kann für einen anderen bereits unangenehm wirken, insbesondere wenn die Farben ungleichmäßig verteilt sind.
Bei der Gestaltung des Footers im Beispiel konnte man dem Element durch den Rosa-Hintergrund mehr Nachdruck verleihen.
Dies muss jedoch nicht sein. Weiß wirkt angenehm und ruhig
und stellt einen schlichten und beinahe natürlichen Abschluss
des layouts dar.
274

I

4 Farbgest alt ung Web 2.0

4.8.7

I

Übergänge zw isc hen Farben

An dieser SteHe sei noch mal angemerkt , dass man beim Übergang von einer Farbe zu einer anderen (z. B. zwischen dem Blau
des IIbanner und dem Grün der IIs1deba r) beachten sollte, dass
der Kontrast an den Grenzflächen nicht zu groß ist, da sonst disharmonische Effekte entstehen können.

4.8.8

Ausze ichnun g vo n Tex t en

Eine gute Lesbarkeit basiert darauf, dass textliche Inhalte - seien
es Fließtexte ode r VelWeise - leicht erkennbar sind und einen
optimalen Kontra5t mit der Hintergrundfarbe vorwei5en. Dies
wird durch den typografischen Satz genauso stark beeinflusst
wie durch die gewählte Textfarbe. Dabei gilt es, reines Schwarz
(#000000) auf einem rein weißen Hintergrund (#FFFFFF) - und
auch umgekehrt - zu vermeiden, da sonst der Kontrast zu stark
wäre. Für den Anwender würde dies ein ermüdendes Lesen
bedeuten. Auf einem rein weißen Hintergrund sollte man aus
diesen Gründen Abstufungen von Schwarz als Textfarbe verwenden (etwa #222222 bis #444444) . Im umgekehrten Fall hat man
mehrere Möglichkeiten, die im folgenden Abschnitt »Dunkle
Designs« näher erläutert werden.
Für eine optimale Lesbarkeit wird im Beispiel als Textfarbe
#222222 verwendet. Im Footer der Seite sollen Informationen
dagegen bescheidener in den Vordergrund treten. Deshalb werden Fließtexte im unteren Seitenbereich mit einem dunklem Grau
(#777777) versehen.
Ab.clmiLt"",t.,..orf;n ..... urd; . D-OIb \

[n AbhAnoiokeit von Zielen, die ein Designer durch die
Farbkomposition erreichen will, entscheidet man sich in der Praxis
für helle oder dunkle Kombinationen. Die jeweiligen HarmOllien
lassen sich in beiden Fallen auch bei genau festgelegter Tonalit at

Die Hervorhebung von Überschriften erster, zv.. eiter und dritter
Ordnung kann entweder durch eine typografische oder eine grafische Auszeichnung geschehen. Im ersten Fal l ist die Farbe für
die Überschrift neutral, aber dennoch leicht auffallend zu wählen.
Auch hier gilt es, die Farben aus der gewahlten Farbpalette zu
nehmen und den Seitenbesucher nicht durch zusätzliche visuell e
Hervorhebung zu überfordern .
Die Überschrift erster Ordnung wird mit hilfe typografischer
Hervorhebung deutlich und kommt auch ohne eine spezielle farbige Auszeichnung gut aus. Ihre Farbe wird daher auf #092E20
gesetzt, ein Ton, der einer dunklen Abstufung der Fließtextfarbe
entspricht. Häufig verwendet man für die Überschriften erster

Startsete e ines Web 2 .0-Auftl"ltt;
Se,tenb3Sudler vor allem ~ urch ~
~ngenehme

Farben und irtuiti ve

... Abbildung 4 .92
Oie Fließte)(tfarbe wird duf
#222222 gesetzt, die Te)(tfarbe
im Footer auf einen grauen
(#777777) Farbton.

4.8 Helles Design - Pra)(isbeispiel

I

275

Ordnung die dominierende Farbe des Layouts; auch sie würde in
das Gesamtlayout gut passen.

Besti mmung von Harmonien

Besti mmung von Harmonien

In t.btUo~~; .. t ..,n Ziel.", "' ~ • ., 0 ..,;,., durth d •
F...-b<""'IIO'<<<ln .",..,ic ~"" ..... ,1 . ~"t,.; &~ ,.;"o, m"" "",, ir1 der ....~ ."'
tQr h..ll. _
Wr.~ ~ "",ooNt_ . O" l"w,"~ " H.ITTIOI-'

(n "b~OJI!l k;e t .,...

z.....",

d e e .... Oe"OJI'e' dufl!"' dr e
F.. ,~tO rM",:ti'ln ",re_n ... j l. ent.rn ' od!!t m.>n
OCr ~ '~X I S
h. h;ll~ ad9r durlk); ~JmbNtOOM. CIG jQWgj'lo;Jon foI.rmCfll."

."t. ...

.. Abbi ldung 4.93

Dunkle r blauer Text auf hell-blauem Hintergrund erzeugt den

Schwarze Überschrift vs. blaue
Überschrift. Beide passen in das
Gesamtlayo ut.

gewünschten Effekt. Die St ruktur eines Bei trags ist leicht erkennbar und wird passend zum Gesam tlayout prasen tiert. Die verwendeten Farben sind HDBF7FF (RGB (219,247, 255» für den
Hintergrund und ItOO88AA tur d ie Überschrift.
uf dem Farbenkreis »dazwischen«lieQen - komQleren . Allm~hhch
kann man <:Iuf diese Weise Jedem Seitenelement eine zu ihm
passende Farbe Qeben,

i:

H EllE D ES IG NS

Wie \jeht man nun aber konkret vor, um eine optimale
SeitenwahmehmunQ sicherzustellen? Im Weiteren betrachten wir
die Auswahl von Farbpaletten für das Layout, das Im vonQen
Abschnitt entworlen wurde . Dabei wird die Auf\jabe \jestellt, die
Startseite etnes Web 2.0-Auftritts zu erstellen . Diese soll
Selt enbesucher vor allem durch eine klare OarsteliunQ,
anQenehme Farben und intuitives Design überzeugen .
D U N Kl E DES I GNS

Wle\jeht man nun aber konkret vor, um eine optimale
SeitenwahmehmunQ sicherzustellen? Im Weiteren betrachten wir
die Auswahl von Farbpaletten für das Layout, das Im von\jen
Abschnitt entworlen wurde . Dabei wird die Aufgabe \jestellt, die
Startseite eines Web 2.0-Auftritts zu erstellen . Diese soll
Seltenbesucher vor allem durch eine klare DarstellunQ,
an\jenehme Farben und intuitives Design überzeug en.

Abbildung 4.94 ..
Eine angenehme blaue Hintergrundfarbe lässt die dunkle blaue
Te)(tfarbe stärker In den Vordergrund treten.

Bei der Sidebar w ird die Hervorhebung von Übersch riften durch
ihre Darst ellung auf weißem Hintergrund realisier t. Weiße Farbe
sorgt tur eine neu trale Abg renzung der ubergeord net en Über-

ZUM fl UCH·

schri ften

von den beglei t enden Verweisen auf grünem Hinter-

gru nd.

4.8.9
tl J. VICA TlO I~SMEIIO :

Auszeichnung vo n Verweisen

In einem benutzerfreundlichen Webauftritt gi lt es, sämtliche Verweise auf interne w i e externe Sei t en deutlich hervorzuheben.
Dies ermöglicht es dem Seit enbesucher, den Scan-Vo rgang na ch

... Abbildung 4 .95
Die Hervorhebung von überschriften w ird durch ihre Darstellung aufweißem Hintergrund
realisiert.
276

4

Farbgest altung Web 2.0

speziellen Inhalt en schn eller und effizient er ablaufen zu lassen.
Die Link-Hervorhebung kann durch Unterstriche oder Farben
realisiert werden. Im letzten Fall kann man in der Regel sel t en
falsch liegen. Eine sich im Web 2.0 anbietende Möglichkeit ist die

Verwendung von dunklen oder hellen Abstufungen der Töne aus
der gewählten Farbpalette. Dabei sind die einzelnen Zustände
der Verweise (:llnk, :hover, :vls1ted, :actlve, :focus) einzeln zu betrachten.
Häufig weist man dem link-Zustand von Verwei sen die dominierende Hauptfarbe des Designentwurfs zu. Beim Darüberfahren
mit der Maus empfiehlt es sich, die Farbe bunter und lebendiger

zu wählen, während der Visited-Zustand eher mit matten und
passiven Farben zu versehen ist.
Bei der Gestaltung der act i ve- und f ocus-Zuständ e w ird häufig
die Umkehrung der Farben benutzt. So wird zum Beispiel blauer
Text auf weißem Hintergrund beim Ankli cken zu weißem Text auf
blauem Hintergrund. Dadurch wird sehr deutlich, welcher link auf

I
ActiYe und Focus
Die link-Zustände aet j ve und
foeus werden häufig bewuHt
oder aus Versehen ausgelassen, doch richtig eingesetzt
können sie sehr hilfreich sein.
Etwa wenn der Selten besucher
die Tab-Taste zur Navigation
von einem link zum anderen
verwendet, oder falls beim Rüberziehen eines links in die Favoritenliste der Jeweilige Verweis
deutlich hervortritt.

der Seite fokussiert i st und welcher link angekl ickt wurde.
Es ist zu beachten, dass bunt gestaltete Verweise, insbesondere
in blauen Tönen, leichter anzuklicken sind als schwarze. Auch
dann, wenn ein hoher visueller Kontrast vorliegt und schwarze
Verweise leichter zu finden sind.
Im Beispiel wird der link-Zustand durch eine Abstufung der
dominierenden blauen Farbe (1# 114499) dargestellt. Diese ähnelt
der standardmäßig eingestellten Li nk-Farbe (ltOOOOEE) und wird
deshalb als Verweis erkannt.
Ie,~en ~idl

nur dUlTh

iPl

b~id~ "

Fiil",,"

~ud,

bei

9'''~U f e~~eQt.,.Ton~l~

... Abbildung 4.96
Der link-Zustand wird durch eine
Abstufung der dominierenden
blauen Farbe (# 114499) dargestellt.

Do; r AlJ.w~t1I
~ noor Ha uptf~~ fo !ct d , ~ B ~<t1 mmung von 'I ~ b .. nl.""ban.
",!!n~shr!!lI! olb ~h e r orbc n lonnen dabei unterstCttzend .... irken

\ln~

OI<Z1"~Q' ~""Qnti~rQn ~""f1"IQn.

einen ~ie~en~en (l beraatlQ VJ7! eilE!!11 S€ite<lelement 2\1

.. ....." ;;;nCilret"I ilrTnOQr rn 9n .

Damit der Anwender auf der Sei te bequem navigieren kann,
erhält der Link beim Darüberfahren mit der Maus eine dunkle
(Text) und bunte (Hintergrund) Variante des hellen Rosa aus der
Farbpalette (lt FF44 AA). Dadurch wird erreicht, dass die 8rowsing Experience des Anwender erhöht wird. Eine attraktive, vom
Benu t zer selbst produzierte Dynami k auf einer Seite wirkt angenehm und anziehend.
la~~"n ~lCh

in b"iden

F~li"n

... Abbi ldung 4.97
Beim Darüberfahren der Maus
wird der link mit einer dunklen
(Text) und bunten (Hintergrund)
Variante des hellen Rosa aus der
FarbpaJette (#FF44AA) versehen.

"ud! bei o;1C,"",U fa, t jj"loo;1tcr Tonalit~t

durch Qe!ie!tes E"~perirnentie rcn be~t immen . oc, Au~ .... ~hI
oiner H.;r\lptf~tb" fcl~t dia Bo;timmun<.J vcnN"bg nf~rbon .

n..Ir"

MOVQCbu m t~ ' E!cbi D klmn~n dilbQi urb,..tiJtzQnd "," L
r hn
o.nd ainoon fi,e
de n lfo8rQiln~ von a:nam S.. it...,a~ ......,oont ZlJ
einem ~nrl~r"n OIrmbQIi~hen.

Ein besuchter Verweis kann zum Beispiel in dunkelgrauen Tönen
dargestellt werden. Er soll immer lesbar bleiben, aber den Besuchervisuell darauf hinweisen, dass der Link schon besucht wurde.
Der Farbton 1#666666 ist dafür gut geeignet. Beim DarOberfah4.8

Helles Design - Praxisbeispiel

2n

ren mit der Maus zeigt sich der link in der gleichen Gestalt wie
bei »normalen« Verv... eisen. Dies ist bei der Gestaltung von links
üblich, vor allem da eine intuitive und benutlerfreundliche Interakti on ermöglicht werden soll.
I.)lle n $0<1"1 in b~lden Fallen auch be' aen!)U te"~ ~eoter rQr1~itat
nur dJrttl qezoeltes E ~er.me r.toe ~n toest'T'ffi en. Oer Auswah l
~;n~ r HUU~tf.rbu lo1g: d;;' ii~~OffV1"ll..f)Q ,On "ob<orlOtfb.n .
t-ton""h~omatl<cfl m_l:.arbon ~ CMon d.l!l~i untor~t!lUaM wrton
vnd tmn ft.oIl~ nd gn U:>~rg..-.;l von ~In.m 501t>>rx>l9mont zu

"",den

I .,,~n ,1<1> .,
FiiI' .... uth b.. ~~ " t~.tgo-l . gte'Ton .. t8t
" u, donhll."d ... Exp"", "' .. ~n tJop'''m,..-, 0.. .... . w.hI
e __ Hauptl..ne tol~t d.. Be50mnuno von ~ e be"fertefl.

~:"'c'~''''"'~"'~''~'~''~!,:,':' Hinn ~"d .b .. ur.u.r.tut,,,"d ...",""

.. nd .,. """ r..

u ..m .....a.,• .,

"n;1n . nd ~rin ~ict,,,,,,

.. Abbildung 4.98
Der :visited- und der
vlsited :hover-Z ustand

ode .. U'.'G"'''J'_ ..... '" S.t...,.r-",.. >u

.,n>lI<J"".....,

Bei dc tl ve- und focus-Zuständen wird eine Umkehrung der Farben verwendet.

I ,~.en <Im .. bu'en F"'1e<"I ~"m bei ~eM" teltlJe1eQl:e< Tonart"",
" ' " dun:tlll'"" _ ' F..~~'I"I'.'th..,..., b... ~ m"'.n. Oe, du'''' ....

. ,n.... I-Ioo..,d..t.. f<>Igt "'"

e,",~"""uno

~IQn

si(l, ... DG":I{,,,

F~'Iiln ;,.~ch

,

bui o;IGn.~ tQSWoIQatur T an~ kJt

,,,,, ~)O>I,.nla<h ..

ur1d ..... ; n n ~8~ n<k,,, u:u""Q;rl>;l .." , U,rl9lTl S<ltt; llIII;;IOO!It l u
g,ngm ~ n G<ma~k/IoIn .

.. Abbildung 4.99
Ein visited-Verweis und ein
üblicher Verweis im :aclive- und
im :focus-Z us tand

lu •• n

Um die Deutl ichkeit zu erhöhen, werden links und besuchte
Links mit begleitenden Icom versehen. Sie zeigen an, ob es sich
um einen besuchten oder einen noch nicht besuchten Link handelt.

oie"., b.idorn F~ "n ., o;h b.i goon.ou f~ .tgoolo.~tv, T_~'t it

....... "oo:h ~el .. t e, E,,,,,',,,,ellOeren
oine , ..nup:f;;tbo folgt d.u

be~...,...n

~"" t ir>mu"'l

~tono(hc(>maU~cfle ~~ rb o~ "

Df!r "",,,,ehl

von I'tcb~r4."b on .

i(onngn do.bul Unt:G<">t lCGOd

W ~ ~Q"

"'"'" 1Ii"..., il..e""" .... Ut..f~"" ~ , on 1Iin"", Sg;tam,l_mo:: zu
~ ... e",

""een.n ermllo;lh .... n .

I... "" ..:h;', bW. n F~ I.." 4Ud"o b"; g.n .... r.,t!l"'i.gt .. ran ...·AI:
nur <Uctl \JG.OIItII ~ E.p"m. r.t ........ bg~tilm1.n . DOI "",. ,...~ hl
. ....... H~uW .. bQ folQt oi<I eGlOIm1UI"I!I ,on rrol>lo nf.. b.....
~ D nO tl\(Jlm MIs .tbe..E.ilduln '

torr nrn dl!:l<i un !QI"':tut: :!OfI ~ "P"irkcn

ul"ld e"'en ~ldIendoe" Ob~'QQrIoJ ~orr eor.em SeoI:enelement w
~ roem anderen erm c ~

.a. Abbildung 4.100

VelWeise werden mit begleilenden lcons versehen .

Abbildung 4.101 ..
Die Gestaltung der Verweise
im Footer orientiert sich an der
Gestaltung der link5.

278

4

Farbgestalt ung Web 2.0

Manchmal verwenden Designer den gleichen Hover-Effekt
- sowohl bei besuchten Verweisen als auch bei noch nicht
besuchten Links. Dies ist im Grunde genommen durchaus zu
empfehlen, fOhrt jedoch in verschiedenen Designs zu unterschiedlichen Effekten. Seiten besucher müssen beide Typen von
Links sehr schnell deu tlich voneinander unte rscheiden können.
Wie dies im Einzelnen realisiert wird, bleibt dem Designer überla ssen.
Um Sei ten besuchern einen einheitlichen Eindruck der Textgestal t ung zu vermitte ln, wird die gleiche Gestaltung auch im Footer verwendet.

(j2006·2007 P,exoobuch Web 2.0 . ""w.Dre Ki ,b u c h - .. e b 2 0.de 11
De ..;!n und Konze~on: v;taly .fti e dman iI

I

4 .8.10

Navigationsmenüs
Zum sei ben Zweck w erd en links in Navigat ionsmenüs oft ähnlich
oder genauso gestalt et w ie die im Fließtext. Da di e Sidebar ei nen

bunten grü nen Hintergrund hat, empfi eh lt es sich, eine sanft e
Abstu fung des Grüns für de n Hintergrund im hove r-Zustan d ein zusetzen. Der Text kann bei m Hovern du rch eine bunte Farbe,
etwa d un kles Rosa, stärker zu r Gelt ung kommen .

ZUM BUCH:

HINWEIS

Beim Design einem einheitlichen
Schema zu folgen, muss nicht
notwendigerwelse Monotonie
verursachen . Im Web 2.0 werden beispielsweise VelWeise In
NavigationsmenOs häufig genaus o gestaltet w ie im Fließtext.

ZUM BUCH:

Clnle!tu! o

I n h" 1I5l1n Q ~

• Abbildung 4.10l
Verw eise Im begleitenden
rechten Seitenblock

• Abbildung 4.103
VelWeise in der Sidebar beim
Daroberfah ren mit der Mau s

Da die Links in (lctive~ und focus+Z uständen häufiger als die im
Fließtext angeklickt werden, ist es nicht notwendig, den Benutze r jedes Mal explizit wissen zu lasse n. welche n Abschn itt im
Navigat ionsmenü er gerade angeklickt hat. Beschreibt man die
Darstellu ng von (le t i ve- und f oeus -Zustä nden genauso wie den
hove r- Zu stand, so wird dies zwar im mer noch sichtbar, fäll t aber
nic ht so stark auf.
["oiteI2 .
WO -TnQgrjltl c

Vorwort u"d Einle ituno

[ "D lt tl 3,
f .rbQe, ta lt ung We b 2,0

D!:! lullkultyr We b 2. 0

hgltel I

KaRjtcl 2 ,

Web TYPGQr.llfle

RE FERmZEN
Wlk ' p e d lt ,de

KUlte i J ,

f;,rbg u hltllDg Wgb 2,0

• Abbildung 4.104
• Abbildung 4.105
active- und hover-Z ustände der Ver- Bereits besuchte links werden in
weise in der Sidebar
dunkelgrau mit dun kelroten Häkchen versehen.

Berei t s besuchte li nks werden analog zum Hauptblock in Grau
gefärbt und mi t einem M ini-Ieon versehen, Es ist w ichtig, d ass
der Tex t auch im : vi si t ed-Zustand gut lesbar ist ; d afür sorgt die
Textfarbe #666666.

4.8

Helles Design - Praxisbeispiel

I

279

-

Bestimmung von, Ifarmonlcn ....

.. Abbildung 4-10 6
Im oberen Naviga tionsmenü wird
der Verweis auf die aktuelle Seite
durch einen grünen Hintergrund
marleiert. Andere Verweise sollen
im Hintergrund bleiben.

Abbildung 4.1°7 "
Die gerade angezeigte Seile bzw.
Rubrik der Seite wird durch Weiß
auf Dunkelgrün real isiert. Somit

ist die Farbgestaltung des rech ten

Besondere Auszeichnung verdient der Menupunkt im rechten
Navigationsmenü, welcher der gerade angezeigten Seite entspricht. Um ihn deu t lich hervortreten zu lassen, aber keine neuen
Farben in die Palette aufnehmen zu müssen, werden Dunkelgrün
als Hintergrundfarbe und neut rales Weiß als Textfarbe benutzt.
Navigationsmenüs sollen Seitenbesucher nicht nur hinreichend
darüber informieren , welche Sei ten bereits besucht wurden, sondern auch deutlich zum Ausdruck bringen, welche Seite gerade
angezeigt wird. Dies geschieht in der Regel durch eine klare Hervorhebung der aktuellen Rubrik, häutig mit auffalligen Farben.
Diesen Zweck kann Rosa, die bunteste Farbe der Palette, gut
erfüllen. Aber auch dunkles Grün hebt den Inhalt deutlich hervor. Einen fließenden Übergang zwischen dem Ton des aktue llen
Seitenberei chs und der Hi ntergrundfarbe schafft der 2px-große
Rahmen in Hellrosa bzw. Hellgrün.
tlA VIGA 1I0 II S '" [t IÜ :
W'onm gehr "

Vorwlrt

,,~d

tmt .. ttuq

Blocks abgeschlossen.
UP ltz:- ll.

hll lkl2,

W'.b _Trpogrtf!e

-

.

Bestimmung

.. Abbildung 4 .108
Beim Hovern soll der Hintergrund
des Verweises heller werden.

.. Abbildung 4 .109
Das Navigat ionsmenü und d as
Ban ner fließen ineinander.• Aktu-

eil. soll sich dabei auf die akt uelle
Ak tion der Seite beziehen und im

Zusammenhang mit dem Banner

stehen.
280

4 Farbgest attung Web 2.0

hn l!>:1 3

hrb,." tllthIOO

W~b

Z0

Anders sieht dies im oberen Navigationsmenü aus. Oft wird für
seine Gestaltung eine komplementäre Farbe, begrenzt von ihren
dunklen Abstufungen, verwendet. Da das Beispiel sich auf eine
Farbpalette mit drei bunten Grundfarben beschränkt, liegt es
nahe, das Navigat ionsmenü mit analogen Farben zu gestalten.
Da dieses von dominierenden blauen Farben umgeben ist ,
können diese benutzt werden, um die Wichtigkeit der oberen
Hauptnavigations leiste gegenüber dem detaillierten SidebarMenü zu betonen. In der 8eispielseite geschieht dies durch die
Farbkomposition von hellem und dunklem Blau. Die Hintergrundfarbe einzelner Navigat ionspunkte w ird beim Da rüberfahren heller, die aktuelle Seite wird durch einen grünen Hintergrund markiert.
Ein abgeru nde tes Bild wird durch eine Vielzahl von Kleinigkeiten erzeugt . Um den oberen Seite nbereich deutlicher und
benutzerfreundlicherwirken zu lassen, kann man das obere NavigationsmenO und das Banner ineinander fließen lassen. Zusam-

I

men mit den Verweisen wird dadurch das Seitenbild in Abbildung
4.109 erzeugt.

._._.........__-_..
. _. ._
..._-_.-__-..........._... .. _...................-, _

.. _..

.

_

.

_

_ _ M _ _ . . . . . . .. . . _

~ ._~

. _""~

.

.. Abbildung 4." 0
Eine ausfuhrliche Sammlung von
Referenzen, Werkzeugen und
Diensten sowie weiterfuhrende
Informationen zum Thema . logoDesign. finden Sie im Beitrag
. Complete Logo DeSign Gulde•
(http://www.elogodesign.com/
logo-design-gulde. linkcode 166)

~_

.. _

..................

_ -~

~

_~.

.

~_.

. . .. . J . . . "' ....

.....". _ _ _ a . .......•

................. _

... .........

.... <.. _ _ •

logo
Bei der Gestaltung eines einprägsamen logos lassen sich im Allgemeinen auffallende Farben schwächerer Intensität besonders
gut verwenden . Das Logo werden Seitenbesucher immer wieder sehen . Ein buntes Zusammenspiel der eingesetzten Farben
kann dabei eher unangenehm empfunden werden. da es Seitenbesucher vom eigentlichen Inhalt der Seite ablenkt. Aus diesem
Grunde empfiehlt es sich. blendende Farben rur die Gestaltung
von logos grundsätzlich zu vermeiden . Es sei denn. die Farbe
dominiert im ganzen layout und gehört zum wichtigsten Stil element eines Webauftritts.
Im Web 2.0 werden Logos häufig mit einem begleitenden
Weißraum im oberen Bereich der Seite versehen. Mit einer Pastellfarbe auf dem Hintergrund lassen si ch beinahe beliebige Farben
für die Gestaltung von logos verwenden. Insbesondere bunte
Töne werden gerne eingesetzt. Auf einem zarten. hellen Hintergrund wirken sie anziehend und angenehm und fallen schneller
auf, ohne dabei verwirrend oder aufdringlich zu wirken.
leichte. schwächer gesättigte Abstufungen der layoutfarben
im Logo führen immer zu einem freundlichen und soliden Eindruck. Genau dies wird in der Musterseite erzielt. Deshalb kann
man die Auswahl der Farben für das Logo auf die neutralen
Hauptfarben Weiß und Blau reduzieren . Das Ergebnis ist ein
schlichtes, klares und unaufdringliches logo ohne überflüssige
farbige Akzente und unnötige Informationen.
4 .8 .11

4 .8 .12

:1' praxisbuchweb2 .0
., • • • • •

,'TO"

I,.

...

• Abbildung 4.'"
Das Logo ist schlicht, klar und
unaufdringlich. Dies ist im Web
2.0 nicht immer der Fall. Ein
schlichtes Logo erzeugt jedoch ein
ruhiges und benutzerfreundlIches
Seitenbild - dieses steht Im Web
2.0 im Mittelpunkt der Gestaltung.

Ergebnis

Nach einer (SS- basierten Umsetzung des Layouts könnte die
erste Version der Webseite wie in Abbildung 4.110 aussehen.
Mithilfe vo n (SS-Formatierung lassen sich weitere Kleinigkei ten.
wie etwa die 8ullet-8ilder der listen im Navigationsmenü oder
Icons bei links an das Gesamtlayout anpassen .
4.8

Helles Design - Praxisbeispiel

281

Abbildu ng 4.112 •
Das kompl ette l ayout
des hellen Designs

1){ praxisbuchweb2.0
~oo."

~

lI.~

• .,., •• "" O"Oi" ...... ·."'".,~ J•• ·.a.,

Wo;"',

.. " " ,

...""

w.u ..

Bestimmung von Harmonien

neu I

FJrbthcorie in der PrJxis

_
_!b.... . ,__.-..-.CO_..
B~ ti mm u n'!l VOll

Harmonien

-,. - ............._...,-.....,.,.
_
,_... __

l"~oi<'''''-''~''''''Dt''''''''_'''

'''0_';''', "',_ ....,__ .. ........ " ..
~

~

" ......-","''''',.
...... 001.-.'
. _..-........,.
'.
'.......
"'"" ..........,.....,
_
....
_
.,..
......
...
.............
- ~

_ _ fIoo_o;.."....,

....... ...-... """"".....,
............. ' ..
..
"","',_
...........
"':>.h.'*'.... _ _
.... ,........ """' ......,

-

........

..,.,..,....~'*'._'"

bo<;toI~ I ""'_~ , io<

_._____._

___

1
Od..,



~ n lG l l f(}ll \ MU IO .

....... "......._.
~

kt _
I\J ... "_
.... ob
... --..
... _
' .....

• .... . _

.... u

'_OO_""""'
..-.g.....,. -_ . . .
........
,_.><I
.
1
o
:
!
....
,.......... . ..... . .....-......_ ..

-

......Il00 _ _ '.''....... [<'iIoo ...... ' ... '" , ...... no ....

_ _ Iön ...

_1Ioq&n

.....
. .., .....
'*........

_

I~,

__

. __
. . . __ . .

.......... .... ...

~Hll.U.~ ...

,""'

-'""'"I.~

.,,,"U"',,

iIoo ...... " ;toI . .... r _ _ "" ... L• .o.t,d.,,._

...,.........,._
~.1tO

.o_....
_ _ ••
.....

oo . ~

..... woll •

....... .....,_ ...........
u ......1", . ""'0 .01
D.............

,*< _ _ - . "",,,, ..... 11...

"'""'.......... ._

Dt_~ . ug

...

__

..........--....._,_
.. _.....
... .""f_'riUn "" _c.,-,'" .. _ ....
OQ"",' ..

~,~~

•

...,.0""'-.... """ _ ......... _, .... . _ """"'...
~

.....

..., ....... ......-- ..... do. o..boO ..... do~ ...'oIt. ...

_...___
......... __........."'_u
... ......,,"""
0.. .. ..
.
~.o _

<u ...........

,- ... -_.._..

1

...,._ •..-""" ... _ .. Do""" .-.0""9".

•

4·9
Bunte Farben
Bunte Farben wirken bei dunklen Designs stärker als auf hellen
Entwurfen. Deshalb erzeugt
etwa eine Disharmonie auf
einem schwarzen HlnteIBrund
Ine stärkere Verzerrung eines
Bilde~ als dies bei einem weißen
Hintergrund der Fall Ist .

"".'

',, -

Dunkles Design - Praxisbeispiel

Ein f u n k t io n ie rend e ~ dunk les Design zu entwerfen , ist keine einfache A ufgabe, da di e Abs t immung von Kont rasten zu einer zei taufwendige n Au fgabe werde n kan n. Bei he llen Layouts kann man
sich w egen des ruh ig und neut ral wirken den W eiß vieles erlauben, w as bei schw arzen Designs sofort auffall t. Insbesond ere
bunte Farben w irken bei d unkl en Designs w eitaus starker als auf
hellen Entwür fen. Ei n guter Kompromiss zwischen de r Helligkeit
der eingeset zten Farben u nd einer op tima len l esbarkei t ist ein
weiterer Punkt, um den häufi g gestritten wird. Dennoch ergeben
sich bei einem geschickt en Farbeinsatz be eindru ckende Ergebnisse. Wie also erreicht ma n ein glänzendes visuelles Seit enbild
in du nkl en Tönen?

282

4

Farbgest altung Web 2.0

Ein w ichtiger Aspekt, der von Designern häufig fal sch ve rstan den und in du nklen Designs nicht korrekt umgesetzt wird, ist der
seit enübergreifende Vo rzug dunkler Elemente gegenüber ihren
hellen Kon trahen ten. In der Praxis wird ein dunkles Design nicht
unbedingt durch den Einsatz auschließHch dunkler Töne erreicht.
Denn diese sorgen meist für eine monotone Textdarstellung und
machen es schwer, verschiedene Seitenelemente voneinander zu
unterscheiden. Auch dunkle Designs können bunt sein. Die Dunkelheit kann dabei durch Kontraste erreicht werden. Beispielhaft
dafür wird das aus den vorherigen Seiten bekannte Layout verwendet. Hier werden die dominierende blaue Farbe, der Hea der,
die Navigat ionsleiste und das Banner aus dem hellen Design eins
zu eins übernommen.
Grundsätzlich geht man bei der Färbung einzelner Seiten elemente in dunklen Designs genauso vor wie bei hellen Designs.
Auch die Auswahl der Grundfarben für das Layout folgt demselben Schema. Ein wese ntli cher Unterschied besteht jedoch
darin, dass Designer bei dunklen Tönen mehr bunte und auffallende Farben riskieren können.

4 .9.1

I
Dunkle DeSigns
Bei dunklen Designs müssen
nicht aUe Seitenelemente dunkel
sein. Dunkle Töne können dominieren und bunte Elemente in
den Vordergrund treten la55en,
etwa um damit einen st arken
\lisuellen Effekt zu erzielen.

Rahmen, Umgebung, Hint ergrund

Doch zunächst gilt es, die Hintergrundfarbe für das dunkle Layout auszuwählen. Wird ein dunkles Bild auf einem Bildschirm
präsent iert , so ist zunächst wicht ig, dass die Sei tendarstellung
nicht von hellen Farben umgebe n ist. Ein hoher Hell-DunkelKontrast reduziert die sta rke Wirkung der intensiven schwarzen
Farbe. Meistens wirkt er unpassend und wird als disharmonisch
empfunden.
Deshalb empfiehlt es sich, bei jedem dunklen Design dafur zu
sorgen, dass die ganze Seitenfläche von dunklen Tönen umgeben
wird. Dabei lässt sich dies auch für visuelle Zwecke ausnutzen.
Um etwa ein zentriertes Layout noch stärker hervortreten zu
lassen, kann man für die Hintergrundfarbe des body-Elements
einen Farbton einsetzen, der sich von dem im Haupt-Container
um nur wenige Stufen unterscheidet. Den Haupt-Container
selbst kann man anschließend mit einem dunklen Rahmen versehen (etwa über die border-Eigenschaft mit CSS). Genau dies
wird im Entwurf realisiert. Die Hintergrundfarbe des Dokuments
ist 1#30373 C (RGB 48,55,60), der Rahmen besitzt den Farbwert
1#252A2E (RGB 37,42, 46) und für den Fließtext in Ilprima r y content wird 1#292F33 (RGB 41, 47,51) vervvendet. Die letzte
Farbe wird al t ernat iv zu reinem Schwarz gewähl t, da der Block
sonst in der Umgebung von bunten Farben allzu stark hervortreten würde.

4.9

Dunkle Seitenfläche
Sorgen Sie bei einem dunklen
Design dafür, dass die gesamte
Seitenfläche \Ion dunklen Tönen
umgeben wird.

Dunkles Design - Praxisbeispiel

I

283

Abbildung 4.113 ..
Ein erstes dunkles layout
der Seite

4.9.2
Sidebar
Am stärksten kommen auf dunklen Hintergründen lila, Blau und
Grün zur Gel tung. Nicht vetwunderlich also, dass viele dunkle
Designs im Web 2.0 ausgere chnet in diesen Farben gestaltet sind.
Besondere Popularität genießt Lila. Sein Glanz wirkt anziehend
und wird deshalb gerne gen utzt, häufig auch auf Kosten der Lesbarkeit von Textinhalten.
Um diesen Effekt zu erzeugen, wird fOr den IJsidebar-Block
das im vorigen Abschnitt gewählte Rosa (# FF44AA) übernommen und mith ilfe von Color Blender verdunkelt. Dabei ist es für
die Vermeidung von visuellen Nebeneffekten wichtig, mit dem
Tool solange neue Zwischenstufen auszuprobieren , bis eine ausgewogene Balance zwischen Rosa als passive Nebenfarbe und
Rosa als attraktive Akzentfarbe hergestellt wird. In der Regel darf
die Buntheit des Farbtons nicht stärker als die Buntheit des Headers sein, muss aber dennoch sichtbar bleiben und als heller Ton
wahrgenommen werden.
Um eine passende Farbe zu linden, wird man nun sowohl mit
Color Blender als auch mit der Graustufendal"'itellung in Adobe
Photoshop experimentieren mussen. Orientieren Sie sich bei
Ihrer Wahl daran, dass der Block, der nachher mit Texten getollt
wird, stärker wirken soll als das begleitende Navigationsmenü . In
einem direkten Vergleich der beiden Blöcke sollte die Aufmerksamkeit der Besucher nicht auf die bunte Sidebar, sondern auf
das intensive Schwarz von ilprimary-content gelenkt werden.
Ist dies der Fall, so liegt ein möglicher Kandidat für eine harmonische Farbkomposit ion vor.

284

I

4 Farbgestaltung Web 2.0

I

.. Abbildung 4" '4
Ein bunter, aber wegen seiner
Sa.Ulgung passiver Streifen In
" A30056 (RGB 163,0,86) neben
de m dunklen Haupl bereich der
Seite

4.9.]
Übergänge zwischen Farben
Fließende Übergänge von einem Seitenelement zu einem anderen sind bei dunklen Designs - noch stärker als bei hellen - von
primärer Bedeutung. Im zentralen Seitenbereich des Beispiels
dominieren Schwarz und lila. Ein Rahmen, versehen mit einer
Übergangsfarbe zwischen beiden Tönen , sorgt für einen angenehm empfundenen Übergang zwischen den beiden Elementen.
Im Allgemeinen muss ein Übergang dieser Art nicht vorliegen.
Doch häufig hilft er, unerwünschten Effekten an den Grenzflächen vorzubeugen.
.. Abbildung 4" ' 5

4.9 .4 Auszeichnung vo n Texten
Auf einem dunklen Hin tergrund können viele helle Töne gu t lesbar und deutlich erscheinen. Abgedunkelt es Weiß ist dabei nur
eine Möglichkeit. mit der man immer auf der sicheren Seite ist.
Aber auch helle Farben aus der gewählten Farbpalette (mit einer
Transparenz von 85 bis 95 %) können ihren Dienst gut leisten,
zum 8eispiel um einem Fließtext mehr lebendigkeit und Attraktivität zu verleihen. Dies ist nicht immer günstig. denn ein Text
sollte stets ruhig und prägnant präsentiert werden. Eine attraktiv
wirkende Präsenz wird in bunten Designs jedoch mit Sicherheit
nicht mit Weiß auf Schwarz auskommen.
Betrachtet man eine helle Abv.tandlung aus der Familie der
gewäh lten Grundfarbe Blau, so kann man die Fließtextfarbe auf
4.9

Unerwunschte Effekte an den
GrenztU.chen werden durch
zusatzHche Obergangsfarben
geglattet. Hier die Obe rg~nge von
~ primary-con tenl zu It seconda'Yconlent und von #banner zu
#secondary-con t ent.

Dunkles Design - Praxisbeispiel

I

285

#EBFAFF eRGS 235,250,255) setzen. Der Text erscheint t rotzdem
lesbar, aber eben nicht 50 t rocken und »unlebendig« w ie im Falle
von Grau (HEEEEEE oder HFAFAFA).

... Abbi ld un g 4.,,6
Auf dem dunklen Hintergrund
wirkt Grau (oben) nicht so attrak ~
tiv wie eine helle Abstufung von
Blau (unten).

Dementsprechend wird auch die Überschrift gestaltet Da die
weiße Farbe im oberen Seitenbereich dominiert, liegt es nahe,
die Überschrift zur Unterstützung der Fließtextfarbe in einer
blauen, aber stärker gesättigten Farbe zu gestalten. Zum Beispiel
#88EEFF. Es zeigt sich jedoch im Vergleich, dass ein fast reiner
Weißton (HFAFAFA) besser in die Seitenkomposition passt. Er
wirkt stärker und wird deshalb beim zweiten Hinschauen bevorzugt - damit die Überschrift schnell und leicht erkennbar ist.

... Abbi ldung 4." 7
Ein fas t reines WeiB passt zur
Auszei chnung von Überschriften
besser als Hellblau.

Die Überschriften zweiter und dritter Ordnung können für eine
abwechslungsreiche und strukturierte Textgestaltung durch eine
helle Auszeichnung auf einem dunklen Hintergrund hervorgehoben werden. Dabei wählt man zuerst eine passende Farbe für
die farbige Hervorhebung aus und nimmt ihre hellen und dunklen Variationen in Richtung der Hintergrundfarbe des Hauptblocks. Die dunkle Farbe lässt sich als Hintergrundfarbe für die
Überschrift verwenden, die helle für die Farbe des Textes . Die
letztere sollte im Vergleich zum Ftießtext neutral wirken, schnell
auffallen (dies wird meistens durch die Schriftgröße oder eine
hellere Hintergrundfarbe erreicht) und nicht aus dem Gesamtkon text herausfallen. Verwendet man ursprünglich die Hauptfarbe #116688 und bestimmt die entsprechenden Abstufungen,
so erhält man ein dunkles 81au (H072A33, RGB 7,42,51) für den
Hintergrund und ein helles Blau (#68D7EE, RGB 104,215,238) für
den Text. Umgeben werden die Überschriftenblöcke von einem
grauen Rahmen, damit sie leichter zu erkennen sind. Der Block
fallt beim Scannen der Sei te sofort auf. wirkt jedoch eher passiv.
was durch die Anpassung der Farbtöne an die Hintergrundfarbe
erreicht wurde.

286

I

4 Farbgestaltung Web 2.0

.. Abbildun g 4." 8
Auszeichnung von Überschriften
zweiter Ordnung

Doch insgesamt ist die Entscheidung, die Überschrift mi t Blau zu
färben, nicht sehr glücklich, da die Inhalte bereits blau sind. Auf
der Suche nach einer alternativen lösu ng stößt man auf Grün.
Ihre Verdunkelung ergibt das fOlgende seriös wirkende Bild.
Dieses wird in das layout übernommen.
.. Abbildung 4.11 9
Verdunkelung der Überschrift

Im rechten Block Os jdebar geht man analog vor, indem man für
die passive und neutrale Hervorhebung der einzelnen Kategorien
einen hin sichtlich der verwendeten Hintergrundfarbe dunkleren
Ton verwendet. Im Beispiel ist es die Farbe ItB(X)()44. Nur der
Rahmen wird weggelassen. Im rechten Block ist er überflüssig.

4.9.5

Auszeichnung von Verweisen

Wie bereits angesprochen, wirken helle und bunte Farben auf
einem dunklen Hintergrund besonders intensiv. Doch daraus
folgt nicht, dass man diese in all ihrer Buntheit einset zen sollte.
Stattdessen ist es vernünftig, die Töne der verwendeten Farbpalette zu entnehmen. dam it das Seitenbild abgerundet erscheint.
Die dominierende blaue Farbe wird bereits für die Auszeichnung der Überschriften benutzt; die gleiche Auszeichnung für
links würde für Verwirrung bei den Seitenbesuchern sorgen.
In Frage kommen somit lediglich grüne und violette Farbt öne.
Betrachtet man das bereits vorliegende Seitenbild, so lässt sich
erkennen, dass der Hauptbereich der Seite bereits zwei Grundtöne verwendet Blau bei Überschriften und Lila bei der Sidebar.
Setzt man zusätzlich Grün ein, so erhält man ein äußerst buntes
Bild, verursacht durch drei bunte Farben. Dabei darf man nicht
vergessen, dass auch bereits besuchte links farbig hervorgehoben werden müssen. Insgesamt würde dies vier Töne ergeben,
was nach der 3-Farben-Faustregel zu Problemen im Hinblick auf
die lesbarkeit führen könnte.
4.9

.... Abbildung 4.120
Überschriften in der Sidebar

Dunkles Design - Praxisbeispiel

I

287

I

Aus diesem Grunde ist es vernünftiger, lila für die Auszeichnung
von Links zu verwenden. Dadurch ergänzen und verstärken sich
Verweise im Fließtext und das Navigationsmenü in der Sidebar.
Das Experimentieren mit der Grundfarbe Rosa ergibt eine gute
l esbarkeit für den Farbton HFF6BBA.
I.~"," ,

".,_ "

,l '~,Joo

f.j . ~"

cl'.! .'-

"u '

Abbildung 4 .121 ..
Oie Gestaltung der links im
Hauptblock und in der Sidebar

j e ' ""_. I ~, l xleul_~ , -U"d ~ kt_

_lL • . 1l .;. ,,~t '" ":,~ ~ "r,, ~· t"r"' ·
II)J::>t! ·: rx lel'T :!o e C~:tmmoJ~ n"

b;,,, ·,"~' , [ ~,

""" I"" ,r ., I,

, 1 ,h~ i

"", .-, I ,,..,,',~ - ,

"'lI,,,,;;.!· 1 ~ ,,, " r

l ' e~:·T.)rt~n

",·,· er·cr

".· "r" l ·." .~ ',

un) C 'OJ ~ 1l,,,e Jno:cr }b~r]]---.; "e,n (, -,:, -, o:<tcr( l n(~\ '" Clno,

""j,

e Il

" """~ ' cI

"'"

Das Ergebnis ist eine Seitendarstellung, bei der beide Elemente
aneinander angepasst sind. Der hover-Zustand wird aus ähnlichen Gründen nicht grün, sondern lila gefärbt. Dabei muss man
nicht unbedingt die Farbe des Verweises beim Hovern stark verändern. Häufig genügt es, etwa die Hintergrundfarbe mi t einer
schwachen Abst ufung de r Verweisfarbe zu gest alten. Dennoch
ist es in der Regel benutzerfreundlicher, den Unterschied zwi schen bei den Zuständen deutlich zu gestalten. Im Beispiel wird
dies durch die Verdunkelung der Hintergrundfarbe (H010(OD)
und den Einsatz einer hellen Farbe fur den Text (HFA FAFA) realisiert. Auch der untere Rahmen wird sich beim Hovern deutlicher
hervorheben.

A Abbildung 4 .12 ~
link im passiven Zustand

A Abbildung 4 .1 ~3
Hover-Zustand in hellen Tönen

A Abbildung 4 .12 4
Hover-Zusland in bunten Tönen.
Alternativ sieht der Hover- Effekt
auch in einem hellem Grün attraktiv aus,

Für besuchte Links ist Grau immer eine geeignete Farbe, da sie
die Passivi tät des Verweises be ton t. Um eine opt imale Graust ufe
zu bestimmen, kann man sich auf die Suche nach einer Zwischenfarbe zwischen der Hintergrundfarbe und der aktiven Verweisfarbe machen . Das Optimum wird meistens in Abstufungen in
Richt ung der Verweisfarbe gefunden. Ebenso kann man versuchen, auch mit den Stufen zwischen der Hintergrundfarbe und
der Fließtextfarbe für die Auszeichnung des v1sited -Zustandes
zu experimentieren.
Möchte man die Farbe der Links nicht verändern, so kann
man die Hintergrundfarbe geeignet anpassen, sodass diese dem
Verweis eine passive Gestalt verleiht. Häufig wird dies bei dunklen Designs eine he lle Abst ufung der Hintergrundfarbe sein. Im

z88

I

4 Farbgest altung Web 2.0

I

Beispiel werden besuchte Unk s entsprechend der obigen Vorgehensweise mit einer erkennbaren, aber passiven dunklen Hintergrundfarbe (H2E2E2E) versehen; die Verweise selbst dagegen mit
einem Grau t on (HA1 B2B8).

Der focus-Zustand wird mithilfe der Umkehrung von Farben
gestattet, wobei die Verwe isfarbe deut lich abgedunkelt wird,
damit der Kontrast zwischen ihr und der Hintergrundfarbe nicht
zu groß wird und angenehm wirkt. Der cl ct f ve-Z ustand wird zwar
mit den gleichen Farben gestaltet, verwendet aber den grauen
Ton als Hintergrundfarbe. Beim Herüberziehen eines ünks in die
Lesezeichen wird sich dieser deutlich vom übrigen Text abheben.

... A bbildung 4.125
:Iink- und :hover-Zustand eines
bereits besuchten Verweises

,

,

,
,
~

4 .9.6

Navigationsmenü
Die vertikale Navigationsleiste folgt beim dunklen Design einem
anderen Schema. Auf dem bunten Hintergrund, wie etwa Lila,
erreicht man eine optimale Lesbarkeit durch den Einsatz einer
(fast) weißen Farbe. Weiß erzeugt auf einem bunten Hintergrund
einen hohen Kontrast und wird deshalb durch Grau (#EEEEEE)
ersetzt. Dies lässt einzelne Rubriken lesbarerer')(:heinen und neutral wirken. Ein Effekt, der bei einem Navigationsmenü erzielt
werden solt.
Für die Auszeichnung der Unk-Zustände einzelner Rubriken
empfiehlt es sich, auf hetten Hintergründen beim Hovern den
Hintergrund der Rubrik zu verdunkeln. Das gleichzeiti ge Verändern der Verweisfarbe ist möglich, aber nicht notwendig. In
der Musterseite springt die Hintergrundfarbe beim Hovern von
HA30056 (RGB 163,0,86) auf #7AOO3D (RGB 122,0,61), der Text
auf HFFFFFF. Bereits besuchte Links werden in einer graue n Farbe
präsentiert. Sie sott für die Passivität der Verweise stehen.
Die Rubrik, die der 8esucher gerade durchstöbert, lässt sich
durch eine besondere Hervorhebung einer der Rubriken mit speziellen Farben auszeichnen. Wegen der Buntheit der Farbkomposi tion sottte man zu diesem Zweck keine neuen Farben in die
Palette aufnehmen, sondern lieber zu neutralen Farben greifen .
Weiß und Schwarz lassen sich bei jedem Design ohne Weiteres
einsetzen. Auf einer hetten Sidebar wirkt Weiß angenehmer als
Schwarz. Um eine abgerundete Darstellung zu erreichen, kann
man den Übergang zwischen Weiß und der Hintergrundfarbe
durch eine Zwischenfarbe unterstützen. Im konkreten Fatt bedeu 4.9

,
.,

- ''''_.'' '-

''

... Abbildung 4.12 6
:focus- und :active-Zustand eines
Verweises

... Abbildung 4.127
Graue Verweise im Navigatiorrsmenü

....
..

~
~

""""'-L ..

~

... A bbildung 4.128
Hover- Effekt im Navigati onsmenü

Dunkles Design - Praxisbeispiel

I

289

... Abbi ld un g 4.129
Hervorh ebung der Rub ri k,
die gerade besucht wird

tet dies, die akt uelle Rubr ik mi t Weiß hervorzuheben und ih ren
Rand in einer Abstufung der Hintergrundfarbe (et wa #CF7BA7,
RGB 207, 123, 167) zu gestal ten. ZufälligefVv"eise ent spricht dies
der Umkehr ung der Farben für Verweise in der Sidebar: Rosa auf
Weiß wird zu Weiß auf Rosa.

4 .9.7

Footer

Der Footer wird analog zur Vorgehensweise beim hellen Design
gewählt. Die graue Farbe lässt den unteren Seitenbereich in den
Hintergrund treten; die Auszeichn ung vo n Verweisen vererbt die
allgemeine Unk-Gest al tu ng, die oben erläutert wurde.

"l c lC r"
,
' 0<" "" '_0'""0'

... Abbildung 4 .130
link- u nd Hover-Z usUnde
beim Footer

Abbildung 4.131 ..
Du nkles layout nac h e iner
CSS/XHT Ml- Umsetzung
290

I

4

Farbgest attu ng Web 2.0

4 .9. 8

,, ~

.,.," P' OK"bol"

',"" ,

".b20d<

...

Ergebnis

Das entworfene dunkle Design zeichnet sich durch eine gute Lesbarkeit der Inhalte und eine bunte Farbkomposi t ion aus. Es wirkt
angenehm und attrak t iv, auch da nn, wenn über besucht e und
noch nich t besuchte Verweise mit dem Ma uszeiger darubergefahren wird. Die erst e umgesetzte Version der Webseite könnte
somi t wie folgt aussehen. Auch hier lassen sich mit C55 viele Kleinigkei ten, wie etwa Icons be i den li nks, an das Gesamt layout
anpassen.

I

4.10 Zusammenfassung
Eine ku rze Zusam menstellung einiger Faust regeln soll Ihnen hel·
fen, bei der Bestimmung von Farbharmonien gezielter und efflzi·

enter vorzugehen.
.. Vor der Auswahl von Farbschemata sollte man sich auf einen
konstruktiven Designprozess und konsequenten Farbeinsatz
einstellen . Der Einsatz von zu vielen Farben ist ineffizienter als
die verwendung einer einzigen Farbe.
Bil dschi rme arbeiten mit der additiven Farbmischung auf der
Grundlage des RG8· Farbmodells (Rot, Grün, Blau). Für den
Druck wird die subtraktive Farbmischung mit dem CMYK·
Modell (Cyan, Magenta, Gelb und Schwarz) verwendet.
.. Primärfarben stehen für die Farben erster Ordn ung im RGBund CMYK-Mode U. Aus ihrer Mischung lassen sich alle weiteren Farben erzeugen. Orange i~t bei~pielswei~e eine Sekund ärfarbe im RGB-Modell, da ~ie aus Rot und Gelb gemischt
..

i~t

...

Als komplementäre Farben bezeichnet man Töne, die auf dem
Farbkreis direkt gegenüberliegen (Orange und Blau). Benachbarte Farbtöne werden analoge Farben genann t (Gelb, Hell·
grün, Grün) .

...

Die monochromatische Beziehung beschreibt das Zusammenwirken der Töne, die sich nur durch Variationen der Schatt ierung oder der Transparenz voneinander unter~cheiden . Sie
eignen sich besonders gut für ein funktionierendes Design,
können aber auch monoton wirken. Beispiel : Hellblau, Blau,

...

Dunkelblau
Die aufgeteilte komplementäre Bez iehung

be~chrei bt

das

Zusammenspiel einer Grundfarbe mit zwei weiteren Farben,
die auf dem Farbkreis von ihrem Komplement gleich we it entfernt si nd . Sie wird am häufigsten benutzt, um einen hohen
Kon t rast zu reduzieren. Beispiel: Grün, Hellrot, Dunkelrot
...

Die doppelt-komplemen täre Beziehung verwendet zwei
Farbgruppen, deren Elemente Oeweils zwei Farbtöne) Komplementärfarben sind. Sie schwächt und ergänzt den Kont rast
komplementärer Farben und erzeugt einen bunten, visuell en

...

Kon trast.
Die Triade -Beziehung bezieht sich auf die Wirkung von drei
Farbtönen, die auf dem Farbkreis aquidistant voneinander
entfernt sind. Sie erzeugt eine Spannung und sorgt für eine
Vielfal t der eingesetzten Töne . Beispiel: Grün, Orange, Vio-

len

4.10

Zusammenfassung

I

29'

..

..

..

.A

Abbildung 4.'32

Matt Dempsey (http://www.
mattdempsey.com) nutzt nur
wenige Hauptfarben . trennt
einzelne Seitenbereiche jedoch
deutlich durch ihre Sättigung.
Hier ergänzen Farben einander
ohne um die Au fmerhamkeit der
Besucher zu kämpfen.

..

Die analoge Beziehung basiert auf einem Spektrum benachbarter Farben ; die komplementäre Bez iehung auf reinen oder
. abgestuften « komplementären Farbe n .
Kontraste werden im Web vor allem durcll eine Sättigung der
farben, Proportionen der flachen und ein Zusammenspiel
von hellen und dunklen oder bunten und unbunten Farben
erzeugt.
Bei der Zusammensetzung von Farbpaletten ist mit der Anzahl
der Töne sehr sparsam umzugehen. Man sollte sich auf höchstens drei oder vier dominierende Hauptfarben beschränken .
Primäre Farben werden gebraucht, um die Wichtigkeit ei nes
Sachverhalts darzustellen. Sekundäre Farben wirken neutral,
elegant und solide. Sie erzeugen ein Gefühl des Wohlbefindens und eine visuelle Balan ce. Tertiäre Farben haben eine
einladende und verlockende Wirkung . Sie sind freundlich und
angenehm.

..

Um den hohen Kontrast von Komplementärfarben auszunutzen, nimmt man in der Praxis zusätzlich eine dunkle Mischung

der Töne in die Farbpalette mit auf.
.. Ruhiges und klares Design setzt auf analoge und monochromatische Farben, die meistens seh r gut zusammenpassen.
Dabei i st darauf zu achten, dass der Kon tras t hoch genug ist.
..

Abbi ldung 4.' 33
Auf dunklem Hintergrund kommen bunte Farben intensiver zur
Gelt ung. Bei _Let It Bleed. (www.
letitbleed .com) nutzt man die auffallende rote Farbe, um ein visuell
attraktives, ansprechendes Bild
zu erzeugen und einen haftenden
Eindruck zu hin terlassen.

.A

Für die farbgestaltung eignet sich die Web-Smart- Palette am
best en. Um auf der sicheren Sei te zu se in, können Sie auch

direkt mi t RGB-Werten arbeiten .
.. Die neutralen Tone aus der Farbpalette im Web 2.0 sind
schwach gesättigte Abstufungen bunter Farben (etwa zu 85
Prozent transparentes Blau und Grün) . Bunte und aktive farben sind Grün, Orange, Rosa und Blau.
.. Grundsätzlich sind helle Designs besser zu lesen als dunkle
layouts. Dunkle Töne wirken intensiver, deshalb lassen si ch
stärkere visuelle Effekte bei dunklen Designs erzeugen . Die
Wahl zwischen beiden Al15ätzen reduziert sich auf die Frage,
ob Sie Seiten besucher durch ruh ige, klare Texte oder eine lebhafte visuelle Präsentation überzeugen möchten.
..

Das Übertragen einer ersten Designskizze geschieht durch
die Anfertigung eines Kontrastlayouts in Weiß-Grau-Schwarz.
Durch Experimentieren mit der Transparenz von Grau und

Schwarz lässt sich ein optimaler Kontrast erzielen .
.. Bei der Auswahl einer Farbharmonie tastet man einzelne Seitenbläcke von oben nach unten mehrmals ab. Orientieren Sie
sich bei der Bestimmung von Hauptfarben an der psychologischen Wirkung der Farben und deren Assoziationen. Durch
eine Anpassung der Sättigung der geWählten Farbtöne an die

292

I

4 FarbgestaltungWeb 2.0

..

I

des Kontrastlayouts sorgen Sie für einen optimalen Kontrast
der Farben.
Bei hellen Designs erreicht man Neutralität der Farben durch
den Einsatz von monochromatischen oder analogen Farben
bezüglich der gewählten Hau ptfarbe, HeNorhebung von
Inhalten durch eine Auszeichnung mit bunten Farben. Bei
dunklen Designs können Sie auch bunte Farben riskieren.
Dabei ist zu beachten, dass der Kontra st nicht zu groß wird,
Farbübergänge keine ungewünschten Nebeneffekte erzeugen
und Fließtexte deutlich zu lesen sind.

4.11

Ressourcen

4 .11.1

On lin e- Artike l

..

.. Abbildung 4.1)4
Um den hohen Kontrast von
Komplementarfarben auszunu tzen, nimmt man in der Praxis
zusätzlich eine dunkle Mischung
der Töne in die Farbpalette mit
auf. Im Beispiel www.warsz<lNskajesien.art.pl.

Einführung in die Farbtheorie

http://wWN.metaeo/or.de
..

Kompakter Einblick in die Farbtheorie

http://web/ab .uni -Iueneburg.de/webla b/sem in are/web design/
jarbtheorie.php (Linkcode 167)
..

..

Color Worqx, eine ausführliche Einführung in die Grundlagen der Farbtheorie, http://www.worqx.com/sitemap.htm
(Linke ode 168)
Bedeutung der Farben und ihr Einsatz In der Pr3)l;is, Color-

Matters, http://www.colormatters.com
.. • Vom Farbraum zum Farbeode«: RGB-Farbraum,
HSL-Farbraum, Farbnamen und Systemfarben
http://wWN.j- a-b.net/web/ hue/colorsp aces (Linkeode 169)
.. Color Gtossary, Fachbegriffkompakt erklärt

.. Abbi ldung 4.135
Colourlovers.com, ein Weblog
über Farben, Farbschemata und
Farbtrends

http://wWN. sapd e5igngu ild. org/res ou (ceslglass ary _colori
index1.html (Linkeode 170)
..

Secrets of Web Colors Revealed,

http://wWN.ysbl.york.ac. uk/% 7 EmgwtlKKwebeours e/
coloursCience/ colourmodels.html (Linkcode 171)
.. The Psychology of Color, http://coe.sdsu.edu/eetiArtic/eS/
wadecolorls tart.htm (Linkeode 172)
..

Dirk Metzmacher, ,. Ober die Wirkung der Farben«

http://wWN.drweb.delwebdesignijar ben- color-wirk u og. sh tml
(Linkcode 173)
..

Cotourtovers.com, Farben, Farbschemata, Trends

http://WWN.colourlovers.com
..

Quellensammlung zum Thema . Farbe«

http://wWN.drweb.del weblog/weblog/?p=464
(Unkcode 174)

4.11

Ressourcen

I

293

.. Web Developer's Handbook, Referenzen zur Farbtheorie
http://alvit.de/handbook (Unkeode 175)
literatur
.. Mark Boulton : »Five Simple Steps: Designing for the Web«,

4 .11.2

http://ftvesimplesteps.markboulton .co.uk
.. Johannes Itten: . The Elements of Colo r«
.. Edi t h Anderson Feisner : .Colou r : How to Use Colour in Art
and Design •
.. Tom Fraser, Adam Banks, Designer'sColorManual : ,.The
Complete Guide to Color Theory and Application .
.. Josef Albers, Nicholas Fox Weber: ,.1nteraction of Color«,
Revised and Expanded Edition
.. Augustine Hope, Margaret Walch : ,.The Color Compendium .
.. Paul J. Zelanski, Mary Pat Fisher: ,. Color. (4f, Edition)

294

I

4 Farbgest alt ung Web 2.0

5

Navigation

Eine logisch konsistente und ubersich tliche Navigation ist
bekanntlich der Schlüssel zu einer erfolgreichen Seitengestaltung.
Doch wie gestaltet man Navigat ionsmenOs, um dieser Herausforderung gerecht zu we rden? In diesem Kapit el geht es um die
Umsetzung von benutzerfreundlichen Navigat ionsleisten. Dabei
lernen Sie die Faustregeln beim Design benutzerfreundlicher
Navigationsmenüs, typische CSS-basierte Ansätze im Web 2.0
sowie grundlegende Photoshop-Techniken und neue Navigationsarten kennen.
Eine effiziente Navigation stellt Seiten besuche rn eine präzise Orientierung bereit, mit der jeder - unabhängig von den
benutzten Werkzeugen - in wenigen Schritten zum gesuchten
Seiteninhalt gelangt. Dabei sind die meisten Anwender bei der
Information5suche extrem zielgerichtet. Je weniger Zeit sie verwirrt zum Durchstöbern der Seiten benöt igen, desto benutzerfreundlicher empfinden sie den Webauftr itt . Um die User
Experience einer Seite auf hohem Niveau zu halten, müssen
Webentwickler Anwendern einen deutlichen und intuitiven Leitfaden anbieten .

5.1

Navigationselemente entwerfen

Eine gute Seitennavigation setzt sich zum Ziel, einen Kompromiss
zwischen einer (häufig unOberschaubaren) FOlie von Optionen
und hinreichend vielen Navigationsmöglichkeiten bereitzustellen.
Wichtig in diesem Zusammenhang ist die Tatsache, dass Besucher
in mögli chst wenigen Schritten die wicht igsten Seiteninhalte (Key
[antent) einer Prasenz finden können.
Entspricht die Navigation nicht den Erwartungen der Anwender, so werden sie auch keine Möglichkeit haben, sich mit dem
Seiteninhalt vertraut zu machen. Ein Seitenbesuch kann bei einer
mangelhaften Realisierung zu einem chaotischen Page Drifting
werden, und das, obwoh l man Besuchern mit min imalem Auf-

5.1 Navigationselemente en twerfen

I

295

[Page Drifting)
Ein Verhalten der Seiten besucher,
bei dem auf der Suche nach Inhalten chaotisch von einer Seit e zu
einer anderen und zurück gesprungen wird . Page Drift/ng ist
meistens ein Zeichen für eine inkonsistente Seitennavigat ion,
mangelhafte StKhe oder mehrdeutige Beschriftungen der Navigationsbereiche.

wand eine leicht erkennbare Navigationshilfe zur Verfügung steilen kann.
Um dies zu erfüllen, müssen Navigationsmenüs unter anderem
vier grundlegende Aufgaben lösen können.

5.1.1

Aufgaben der Seitennavigation

Der Hauptzweck VOll Navigationssystemen besteht darin, Informationen über die Sei teninhalte deutl ich zu vermitteln. Dabei gilt
es, Nutzer darüber zu informieren,

.. wo sie gerade sind
Besucher müssen wissen, in welchem Sei tenbereich sie sind
und welche t hemenrelevan t e Inhalte ihnen zur Verfügung stehen.

.. wohin sie gehen können
Auf einer unbekannten Seite können Anwender ni cht zu Seit eninhalten gelangen, wenn sie die St ruktur der Seite nicht
kennen .

.. wo sie bereits gewesen sind
Seiten besucher surfen ni cht nur in eine Richtung, sondern
sowohl vorwärts. als auch rückwärt s; das Zurücks.pringen zu
bereits besuch ten Seiten uber den Zu rück-Button ist ublich.

In diesem Kon tex t liegt es nahe,
eine Navigationshilfe au f jeder
Seite unterzubringen, es sei
denn , sie ist expliZit zur Pr,lsent at ion von speZiellen Inhalte n
gedacht (etwa die Navigation in
einem mehrteiligen Artikel).

296

I

5

Navigation

Außerdem muss die Gestaltung der Seiten navigation konsistent
bleiben. Denn sollte sich die Navigation permanent ändern , so
verliert sie ihre Bedeu t ung, da mehrere pfade plötzlich zum selben Ziel zu führen scheinen. Dies sorgt für Verwirrung, erzeugt
Misstrauen in die vorliegende Seitenstruktur und somit auch in
die Dienste, die vom Seitenbetreiber angeboten werden.
Legen Sie ein bes.onderes Augenmerk auf eine konsequente
Erfüllung dieser Kriterien, so verfügen I hfe Sei ten besucher über
einen guten Wegweiser. Resultat: Da die Benutzerfreundlichkeit stä rker zur Geltung kommt, wird der Seite intuitiv ein großer Nutzen beigemessen, was nicht sel ten zufällige Besucher zu
Stam mbesuchern werden lässt.
Laut einer Studie von Nielsen/lorangeres aus dem Jahr 2006
landen mehr als die Hälfte der Webseitenbesucher zunächst auf
einer untergeordneten Seite (Deep Link) einer Webseite, da sie
von einer Suchmaschine darauf verwiesen wurden.
In diesem Zusammenhang taucht eine entscheidende Frage
auf, die meistens rein intui t iv beantwortet wird : Wo platziert man
die Seitennavigation am besten?

5 .1.2

I

Platzi erun g von Navi gation s/eisten

Ob erer und linker Seitenber eich I Traditionsgernäß wurden
Navigationsleisten bei klassischen Webauftritten immer im oberen und/oder im linken Seite nbereich platziert , Dies hatte einen
einfachen Grund : Webnutzer aus der westlichen Welt sind
gewohnt, Inhalte von links nach recht s zu lesen, demzufolge wird
der Blick zuerst auf den linken Seitenbereich fokussiert. Auch
befi nden sich Browserschaltflächen (wie EINE SE ITE ZURÜCK, EINE
SEITE VOR, AKTUALISIEREN usw.) meistens links und somit direkt
über dem Navigat ionsmenü.
In den letzten Jahren verschwinden vertikale Navigationsmenüs von der linken Seite von Webseiten langsam aber sicher; die
Navigat ion verschiebt sich nach rechts oder gibt den Weg frei für
einen horizontalen Ansatz. Im letzten Fall befindet sich die Navigation über dem Inhalt im oberen Bereich der Seit e.

Das heißt noch lange nicht, dass
Sie auf ein links platziertes Navigationsmenü in Ihren Designs verzich ten müssen.

.... Abbildung 5.1
Kreative horizontale Navigat ionsmenüs: Icff.co.uk , 8enHulse.com,
Sat su.co.uk, M a. tt, Laprivatarepubblica.com, Komodomedia.com

ludlive.

Photos

Con lod

Bei Slogs stellt das Navigationsmenü Seitenbesuchern nur wen ige
Opti onen zur Verfügung, Auf größeren Webseiten, etwa Unternehmensseiten, ist das anders. Ein hor izonta ler Ansatz kommt
in di esen Fällen nur selten ohne Aufklappmenüs aus. Sekundä re
Navigationsmenüs, im linken oder im rech ten Bereich der Seite,
sind in solchen Fällen häufig notwendig.

5.1

Navigationselemente entwerfen

I

297

--_
-_._.
-

-- ...,-_,- .._.
--

....
=-=-=--=.---=.--

,

-

...... r=

~.-~!"" -'i1 '''!!~-~~'-~!,!,
"IC:'=-'-

..

•

•

_---....-

~.-tt>~_

" ---~

.....

5.2 .~

Abbildung

Cisco Systems. Samsung. HP und
FedE)( setzen auf horizontale
Navigationsmenüs im oberen
Bereich der Seite,

..._--

-_.
_.-

_ ._
~,-~".,-~~

._. ... .

--_.--_
....- . _-_
. .. __._._._----_
...
_------_._.
--- -~._-

.-

~1

__ _

_

-------

' " Postbank

- .
--_
_...-.-._
_.._._....
-_
- . _.
-..._---.................
... _.
..........

.<'..."

•

..

-

•

••

'

~, r

~ , ..,

~,~"

_._""" oe- ... --.

-~

-~-

~­

. _ _ w_

._---

.-

' :::;:.::::.""'"

_-.... _-----_
,- ,- .. ,....,---,.

• Abbildung 5.)
Manch mal erscheint das Navigationsmenü links. Meistens findet
man dort nur eine liefennavigat ion.

298

5

Navigation

In de r Fachsprache unterscheiden Experten zwischen Breitennavigation (Breadt h Navigation) durch Hauptkategorien und einer
Tiefennavigati on (Depth Navigation) durch Unterkategorien. Bei
größeren und umfangreichen Webauftri tten wird die Breitennavigation häufig in den oberen Seitenbereich verlagert - dazu
gehören Hau ptrubriken der Seite, etwa die wesentlichen Ressorts
eines Un ternehmens . Die Tiejennavigation (m it einzelnen Unter-

I

kategorien der Hauptrubriken) ist dagegen am linken oder rechten Seitenrand zu finden .

...
_._,

.•_-

:":----.:-.:..".::.:::'.::',':.= ..::..~

-

....... .... _ M_
'

,

,

.. Abbildung 5.4
_.. __ ._ .....

~_

Die Sei tennavigation im
linken Seitenbereich
(Quelle: Olnkelrellano.com)

.........

.

,

OESICN IlISEA$E

-_. _,_._.,
Free Themes

_ __---_ '0 _
~-..

r
_
.'
'_" .0 '_"
• __ .~

.....

. , ... --""'" I

._0It"'·_ ..'_ _ '
. _ _ ".0

._,-0'--1
·---., ... 1· .... _ .

.. Abbildung 5.5

- -.......--.---

Navigationsleiste im
linken Seitenbereich
(Quelle: Designdisease.com)

-.

Rechter Seitenbereich I Eine Navigationsle iste im rechten
Seitenbereich zu platzieren, empfiehlt sich für Seiten, die den
Schwerpunkt auf Inhalte setzen und diese häufig erweitern oder
aktualisieren . Die Besucher solcher Seiten müssen häufig vertikal scrollen ; ein Navigationsmenü im rechten Sei tenblock kommt
dem Nutzer In diesem Fall entgegen.

5.1

Navigationselemente entwerien

I

299

Insbeso ndere mit zunehmender Popularität von Weblogsgewinnt
der rech t e Seit enblock immer mehr an Bedeut ung. Wird ei ne
Navigationsleiste rechts eingebettet, so können die meist en Seitenbesucher sie ohne zusätzliche Mausbewegungen erreichen.
da die Maus und der Scrollbalken (bei Rech tshändlern) zur rechten Hand liegen .

.
._
_
...
,
_
_
--_
..-. __ _
--_.
__
_
. _
_
_
-_
..__-..
---_
_
-----_
_
.
_.....__..-_- --_-...... ,

......

..,.. ... .... ... . .......
..
... ......

...... ..

--__........-.. _,._......_-_ .. __ --_.-,..-_
_
---_
...... -_
..
_
..._-_
-_
.....
_
-----...
.....
_
.
_
-- _
...._
_
. ......_._--_._. . ......._
__
.. _..- --. ...
--_..........
...

.......

-.

....

...

~-_

_ ._ .- .... - ... -:=c=::: ..
.....
"

~

Abbildung 5.6 ..

.'

Navigation im rechten
Seiten bereich
(Quelle: Hicksdesign.co. uk)

.....
_
_
.._.,_--.......

o booC3wond

...

._rch

...

,

-,._-_
.... ...-- -..._L_. .".. . . . . . . . .. . . . . .. ., ._
A podc:o.t fo r thos. who d.slgn,
d.v. lop or rUn w.bllt••

.. _or_ ..>A ... _

.....

-

III

......

. ____
~

lotest shows

can gcx>gIe chrome toppie ie?

"'• ,_..._
_ .......
. . ".,....,."..-....
"tI.._ ..... _.-IIo

_fo<..

-.I

_ . . -... ,.. _ ,.. _ _

_ d t > _ ... ,. . . , . . . . . , .. b . ... _

...........................
""..-._ ..... ..

~

_--.........--...---_
..... _
..
-.. _--

--_
_
.
_
--......
_-_
__. . . . . . ._-_. . . . . ..0--_. .-... ..."'dc- ... _

Abbildu ng 5.7 ..
Obere und re chte Navigatio l1'5menüs werden kombiniert.
(Quelle: Boagworld .com)

t ._~I100"'_

oo.tr:-.. - -.. _ .. .,"'..

,. ~

....

....

~ ' ..-­

••

...- -... _ ......,.'-'

Der Weg zum Menü ist kürzer. die Beton ung ist auf den eigen tli chen Seiten inhal t gelegt - dieser dominiert am linken Rande und
ist somit di rekt lesbar. Das Letztere wird in Blogs besonders wicht ig, da sie vor allem Inhalt e in den M ittelpunkt stellen. Die Navigat ion übernimmt dabei eher eine unterstützende Fun kt ion.

300

5 Navigation

I
I

-- -

_ Drew Warkentln

.
.._..._-_.....__-_._._......
..... __... _...._.n __w • • __ • ____

,.

--•

'"

....

I

.. Abbildu ng 5.8
Unke und rechte Seitennavlgatlonen werden
miteinander kombiniert.
(QUI!Ue: Orewwarkent in.com)

•

..__
--...... _.....
.-<_
. ._.,
._...-__.
........
_...... _-.._-_

. _ ~ .

Durch die Pl atzierung des Navigationsmenüs im rechten Seitenbereich kann der Lauf.veg zu den Navigationsschaltft ächen im
Browser weit werden. Aus diesem Grunde ist bei solchen Navigationsleisten insbesondere auf die eindeutige Beschri ftung der
Seitenbereiche zu achten.

Alternativ lassen sich linke und rechte bzw. obere und rechte
Seitennavigationen miteinander kombinieren . Dabei ist zu beachten, dass die Rubriken, die durch Leisten repräsentiert werden,
st rikt voneinander get rennt sind und ihre Inhalte leicht zu unterscheiden sind. In der Regel befindet sich die Hauptnavigation
(Breitennavigation) im oberen Seitenbereich, die untergeordnete
Navigation (Tle/ennavigation) daa:egen rechts oder links.

Alternativ zur globalen SeitennavigatIon im unteren Bereich
kann unter jedem langen Beitrag
ein Verweis a'ltebracht werden, über den Seitenbesucher
zum oberen Seitenbereich
springen HInnen . Etwa mit
<a hrer- " 'heacler" >lun Se Ilenan ran9 </a>, wobei heacler die
10 eines im XHTMl-t'Aarlt:up
definierten cl 1v-Containers im
oberen Selten bereich ist

Unt erer Se itenbereich I Eine zusätzliche Navigation im unteren
Seitenblock (im Footer) liefert Vorteile für den Nutzer. Wer nach
einem langen Artikel ni cht nach oben scrollen mö chte, wird mit
einem Überblick der wichtigsten Seiten rubriken gut bedient. im
unteren Seitenblock soll te nur eine globale Navigation verwendet werden. Die Besuche r woUen bei ihren Entscheidungen nicht
durch zusätzliche Details verwi rrt werden.
Bei Weblogs findet man neben einer globalen Sei tennavigat ion
zusätzli ch größere, sich über die ganze Seitenbreite erstreckende
lokale und externe Navigationen. Bei professionellen Dnline-Auftritten wird dies eher selten der Fall sein. Stattdessen wird eine
ausführliche globale Seitennavigation eingese tzt .

Kreative Ans.1tze zur Gestaltung
von Footern finden Sie in dem
Beitrag . Footers In Modern Web
DeSign: Creative Examples and
Ideas. (http://www.smash lncma.
saz lne.coml2008l041OB/joorers.

In· modern-web-de sign.aeatJveeramples.a nd.lde.J.sI).

5.'

Naviga tlonselemente entwerfen

3 01

.

... -

.11 _ _ ... . _

•

_._
-----------_.....-_-_.-__..__--".-'
..........._. __.._--_._
. . . ......_._-_...--.. .1.._--_. . .
_. _____

_ _ ' •• N

_.~

-' _._------_.
_.--.....
...

_"

.. Abbildung 5.9
Navigation im unteren Seitenbereich
(Q ue lle: A rtypapers.com)

• Abbildun g 5.10
Sei t enrnviga t ion Im Foot er (Quelle: Vige t.com/inspire)

.. Abbildun g 5.1'
M esa.Cityofgrace.com präsentiert Kontaktlnformati·
onen, RSS·Feeds und allgemeine In format ionen über
die Seile kompa kt und üb e rs ichtlich.

Nach dem sogenannten
7±2.Prinzip können sich Men·

schen im Schnitt fünf bis neun
Aspekte gleichzeitig merken. Da-

raus lässt sich die Voraussetzung
für eine optimale Seitennavlgalion ableiten: In der NaVigations.

leiste sollten Sie sich auf höchstens funf bis sechs verschiedene

Hauptrubriken beschranken.

(Bre.t d eru m b-Na viga t i onl
Der Begriff Breadaumb-Navigation
bezeic hnet Navigationselemente,
die den Pfad zu r ak t uellen Sei te
zeigen . Der Name stammt aus
dem MArche n . Hänsel und Gret el. der Brü der Grimm , in dem
die in den Wald gefüh rt en Kinder
Brot krumen au f den Weg streuen,
um den Weg zurück zu finde n.

• Abb ild u ng 5.12
Globale Seit ennaviga tion im Foo ter
(Q ue lle: Revolucao.elc.br)

Erwähnenswert ist an dieser Stelle, dass es für den durchschnittli chen Anwender im Prinzip gar keine Rolle spielt, wo das Navigat ionsmenü platz iert wird. 1 Viel wichtiger is t, dass das Menü deutlich erscheint und die Navigationspunkte einer klaren , logischen
Hierarchie folgen. Dies bringt uns zum nächsten Punkt : Grundlegenden Richtli nie n, die man beim Design v on ben utzerfreund li chen Navigat ionsmenüs immer beachten sollt e.
5 .1.3

Navi gati o n sle ist en gesta lte n

Weni ger ist häufig mehr: Statt Besu chern eine Fülle von Verweisen anzubieten, sollten Sie deren Aufmerksamkeit auf höchstens
fü nf bis sechs wesent liche Rubriken (hinzu komm en ein Verweis
auf die Startseite und ein Verweis zu den Kon t akt informationen)
fokussieren. Je klein er die Auswahl ist, desto höher ist die Wahrschein lichkeit, dass di ese Verweise tatsächlich benu tzt we rden.
Stellen Sie dabei eine ko mpakte Navigation bereit. Als ei ne hilfreiche Orien t ierung können et wa ,. Brotk rumen« im Inhal tsbereic h dienen . Es ist jedoch bei der Verwendung von dynamischen
Drop-Down-Menüs und Flyouts zu beachten, dass diese im Hinblick aufZugängli chkeit und Barrierefreiheit erhebli che Probleme
berei ten können.

Studie vo n James Kalba< h und Tim Bose ni<k, http://jodi.e cs. soton. ac. ukj
Attides/v 04/i0 1J1(alruehJ (linkcode 1 13)
302

I

5

Navigation

Navigationselemen te sollten nicht als Bilder, sondern als Textelemente implementiertwerden, damit Anwender sie gegebenenfalls
zur besseren lesbarkeit vergrößern können. Bei Bildern sind alternative Textbeschreibungen mit dem 01 1t-Attribut anzugeben.
Zum Rollover-Effekt sollten Sie statt JavaScript alternative CSSTechniken verwenden. Die gängigen Methoden finden Sie auf
den na chfolgenden Seiten dieses Kapi tels.
Als Typen der Navigationsmenüs kommen
.. eine Haupt/eiste (Main Navigation Menu. 5-9 Einträge, entsprich t dem Inhaltsverzeichnis eines Beitrags),
.. einjunktionales Menu (FunctionaJ Navigation Menu . .. aktive«
Verweise auf Kontakt-Formu lare oder Anmeldung, zwei bis
vier Einträge) sowie
.. ein benutlerorientlertes Menu (Afftnity Navigation Menu .
gedacht für bestimmte Zielgru ppen, etwa _log-in f ür Kunden«
oder . Für Jugendliche«, zwei bis fünf Einträge) in Frage.

New York City. NY

[Rollov er-EffektJ
Ein Effekt, bei dem sich ein Sei tenelement beim Darüberfahren
mit der Maus verAndert , also _ak_
tiviert. oder _überrollt. wird .
Ende der 1990er-Jahre gehörten
umsUndliche auf JavaScript basierende Rollover-Effekte zum Standard . Im Web 2.0 werden sie
durch (55-basierte Ansatze ersetzt .

Hotc~ , Va:OOG~S, To ~ nsm
HOleI,>

•

FIi"

... Abbildung 5.1J
Ariadnefaden bei Yahoo.com

Hinzu kommen ein globales NavigationsmenO (links zu der Startseit e, Oblicherweise logo des Au ftri tts) und eine pfadorientierung
in der Seltenhierarchie durch .. Brotkrumen« (8readaumb Tram .

5.1.4
..

Richtlinien für die Gestaltung lIon
Nalligat ionsel ementen

Beschriftungen von Navigat ionselementen sollten kurz. prägnant, vollständig und leicht verständlich sein. Ähnliche
Begriffe und Jegliche Redundanzen sollten vermieden werden.
Je deut licher die Trennung zwischen einzelnen Rubriken ist,
desto schneller können sie von den Seitenbesuchern wahrgenommen werden.

..

Es Ist wichtig, Navigationselemente in der Leiste konsistent zu
ordnen. Themati sch verwandte Oberbegriffe sollten benachbart erscheinen . Dies reduziert Navigationsfehler und vermindert die Zeit, die Nutzer zum Lokalisieren und Ident ifizieren
von Seitenbereichen benötigen . Besser eignen sich dazu aus
Usability-Sicht vertika le listen im linken Seltenbereich als
lange horizontale Balken im oberen Bereich.

.. Beschriftungen von Navigationselementen sollt en mit den
Überschriften der jev...eiligen Seiten abgestimmt werden .
Wird ein Verweis angeklickt, so bestät igt die Übereinstim5.1

Navigationselemente entwerfen

I

303

I

..

..

..

..

..

mung der Navigationsbeschriftung mit der Überschrift, dass
das gewünschte Ergebnis erzielt wurde .
Vermeiden Sie . Oead-End «-Seiten: Jede Sei te sollte Liber ein
NavigationsmenO verfügen. Leiten Sie den Seitenbesucher
nicht auf Seiten, die ke ine Navigationsmöglichkeiten anbieten . Daraus ergibt sich die Notwendigkeit, Verweise im Navigationsmenü nicht in einem neuen Browserfenster, sondern
im aktuellen Fenster zu öffnen, damit Seitenbesucher über
den Zurück-Button zurückspringen können .
Designen Sie die Navigationsleiste fOr Ihre Seitenbesucher:
Die Deutlichkeit der Navigatiomhilfe ist weit wichtiger als
ihre grafische Aufbereitung. Häufig sind simple Verweise
effizienter als bunte visuelle Elemente, die von der Struktur
der Seite her besser in das Gesamtkonzept zu passen scheinen. Anwender reagieren besser auf Navigationsleisten, die
anklickbar erscheinen und gewöhnlichen Registerkarten (wie
etwa Büro-Mappen) ähneln .
Usabitity-Untersuchungen von Henrik Olsew haben ergeben,
dass Nutzer mit flachen und breiten Navigationsmenüs besser
zurecht kommen als mit engen und t iefen Menüs.
Heben Sie Navigationsrubriken, die sich der Sei tenbesucher
gerade anschaut, deutlich hervor, sodass der Nutzer gena u
weiß, wo er sich befindet .
Sorgen Sie dafür, dass anklickbare Flächen in Navigationsmenüsgroß sind. Zu groß ist immer besser als zu klein. Dadurch
wird das Anklicken von Navigationselementen angenehmer
und weniger fehleranfällig.
Shcp
l..

Abbildung 5.14 .
Je größer die anklickbare Fläche
bei einem Navigationselement ist,
desto komfortabler empfindet der
Sei tenbe sucher die Navigation.l

.... '''''tl
hIl_U
_ _ ......
coo .... """" CI'" _
....

.............-_.

Design

Erwartung

Implementierung

.. Überprüfen Sie immer, ob Ihre Navigat ionsleiste auch ohne
JavaScript- und (SS-Unterstützung lesbar dargestellt wird .
.. Die Seitennavigation ist ein mächtiges Werkzeug, das Seitenbetreiber zur Verfügung haben; sie dient ni cht dem Selbst2 _Balanci ng vi~aJ and slrud:ural complexity in inleraclion design.
(h trp:llwW\V·Suuul.comilssutsJ04_01.php)
1 »Padded link targets for beller mouslng o (hup:llwW\V. 37sisnals.comlsvn/
posts/1 04 8.padded -link-t a,g~ts.jo,-ktt~r ·mousing, 2(08)

304

5

Navigation

I

zweck : 5ie darf Anwender nicht von 5eiteninhalten ablenken
und hat den 5eiteninhalt zu betonen. Der Inhalt sollte die
Navigation prägen, nicht umgekehrt.
Experimentieren 5ie mit der 5eitennavigation so lange, bis Ihre
Besucher zufrieden sind. Berücksichtigen 5ie die Rückmeldungen
der Nutzer: Kein anderer Input - ob Ratschlage von UsabilityGurus oder Faustregeln - wird ihre Navigation so effizient
machen wie die Erfahrungen der Nutzer, die Ihre 5elte besuchen
und benutzen. 4
Um im Hinblick auf die aufgelisteten Faustregeln ein benutzerfreundliches Navigationsmenü zu entwerfen, lohnt es sich, zuerst
einen genaueren Blick auf die gängigen C55-basierten Ansätze zu
werfen.

5.2

C55-basierte Ansätze

Bei einem genaueren Vergleich zwischen den NavigationsJeisten
aus dem Web 2.0 und ihren Vorgängern fäll t eines direkt auf:
Moderne Menüs setzen ganz bewusst und ganz gezielt auf den
.Besucher- Faktor., indem sie Anwender durch ein angenehmes
und intuitives Design der Navigationselemente zu beeindrucken
versuchen.
Immer häufiger geschieht dies durch att raktive und leicht
erkennbare Registerkarten mit abgerundeten Ecken. Im Netz
trifft man zahlreiche Varianten, die eine optimale Orientierung
und angenehme Navigation sicherstellen. 5ie werden mithilfe
von C55-basierten Techniken, wie etwa 51idiflC Ooors oder [55
Sprites realisiert. Aber auch Klassiker, wie etwa 5uckerfish Dropdowns und Flyouts, werden noch velWendet - meistens aber in
einem neuen Gewand.
Die bis dato dominierenden tabellen basierten Lösungen geben
demnach den Weg frei für C55-basierte Ansätze, die mittels einfacher ungeordneter Listen mit Listenpunkten gestaltet werden.

5.2.1

Eine kompakte Übersicht von 37
Navigationstechniken, darunter
auch alle Techniken, die auf den
nachfolgenden Seiten prdsentiert
werden, finden Sie auf meiner
Seite . CS5-5howcase« (http://
alvit.delcs5-showCdse, linkcode 140).

Zur Markierung des aktuellen
Elements ist es meistens sinnvoller, eine CSS-Klasse (etwa
<11 class - "current" ) .
<(11») und keine I 0 zu verwenden. Dies ist vor allem dann
nützlich , wenn Sie das gleiche
Konzept auf eine Subnavigation
anwenden möchten und somit
zwei oder mehrere Elemente als
" current· markieren müssen.

Di e (X) HTMl-Grund struktur

Im Folgenden betrachten wir verschiedene Designoptionen,
die Ihnen zur Gestaltung von Navigationsmenüs zur Verfügung
stehen. Die strenge Trennung von Inhalt und Form durch C55
wird an dieser 5telle die Flexibilität von C55-Leisten entscheidend betonen. In den folgenden Designs wird immer dasselbe
4 D. Keith Robinson, . Web Navigation thoughts and unsolicited advlce«,
http://www.7nights.com/asuriskiarchivtl2 002/12/wtb-navlgation·thoughtsand·unsoliättd-advkt (linkwde 115)

Fl exibl e Seit ennaviga ti on
C5S bringt beim Design von Navigationsleisten Flexibilität ins Spiel.
Bel einer Änderung der Seitennavigation brauchen Sie beispielsweise lediglich den Text der
Verweise zu verändern. Ein umständliches Design von neuen :-Ersatzgrafiken« ist nicht notwendig.

5·Z

CSS-basierte Ansät ze

I

305

(X)HTML-Markup als Grundgerust verwendet, abgesehen von
Menus mit mehreren Navigationsebenen, die mit zusätzlichen
Verweisen auf die jeweiligen Ebenen versehen werden :
list ing 5.1 ~
Das XHTMl-Grundgerust

• Stilrtseite
• Einfihung
• Wcblog

• Ver~ichris
• Kontakt

Abbild ung 5.'5
Eine einfache u'l!eordnete liste
mit lIstenelemen ten , in der
5tandarddarstellung durch einen
Browser (ohne ( 55- Formatierung)

..t..

<!OOC TYPE html PUBLI C " - j I W3CI/ OTO XHTMl 1.0 Stri ct /!
EN" , http: //www . w3 . org/TR / xhtmlI / OTO/ xhtml 1- s t ri ct .
dtd " >
<html xmln s - " http: // www.w3 . org/1gg9 / xhtml "
xml :lang- "de " lang - Ode " )
<head )
<t lt 1 e) Na vi gilt i o ns menO </ t 1t 1e >
<meta http- e Quiv - "content-type " co ntent - " text / html;
char s et - utf -S' j)
<link rel .. " style s hee t " href- "css . css " type- " text /css "
media - "sc reen " j>
</ head>
<body )
<div fd- "co ntafn e r ")
<h1>Navigati onsmenO: Bei s piel </ hl>
<d1v id- ' navbar ">
<u1>
<li ld- " ho me ")
<a h re f- ' i! ' )S ta rt sei te <I a> </ 1i>

<11>
<a href- "/I ") Elnfohrung </ a></ l1>
<li cla ss- "current ">
<a href- ' /I ' ) Webl og</ a>< /1 1>

<11>
<a href- "fl ") Verzei chni s<1 a )</1 1>
<11 >< a href- ' fj ">Kontakt </ a )</1 1)
<l uD
</di v)
</ div )
</body >
</ html>
Die Datei CH.eH bettet die Dateien basic.e n und navbar.CH ,.on
t he fly« ein :
@lmpo rt url ( ba s l c . css) ;
@impo rt ur l ( navb a r. css) ;
Unt er den 11 -Elementen werden dem Verweis auf die Startseite
sowie der aktuellen Rubrik (hier »Weblog«) j eweils entsprechende ID-Attri bute verliehen, um beide Navigationselemente
per CSS entsprechend markieren zu können .
306

I

5

Navigation

Bei einigen Techniken wird man zu dem span ~Attrib u t innerhalb
von listenlementen greifen müssen. Dies ist an sich nicht notwendig, ist jedoch für die korrekte Anzeige im In ternet Explorer unabdingbar, da dieser den: hover-Zust and nur für Verweise
interpretieren kann. Mi t span lassen sich ganze Blöcke quasi zu
einem Verweis erklären. Da in den weit eren Beispielen Hint ergrundbilder häufig vorkom men werde n, muss man für Benutzer
des Interne t Explorers mit dem span-Element arbeiten . Erst so
lässt sich in diesem Fall eine plattformübergreifende Navigat ionsleiste realisieren.

5.2.2

I

!spa n-Tagl
Das span-Tag «span) .. </s pan »
ist ein allgemeines Inline- Element
in (X) HTML, das Texte und weitere I nline-Element e enthalten
kann. Es wi rd benutzt, um umschließende Te>rtinhal te innerhalb
von Blockelementen mit (55 zu
spezi fizieren.

Simpl e Naviga ti o n mit ( SS

Für die Realisie ru ng horizontaler Naviga tionsleisten wird zuerst
ein Container erstellt, in dem sich alle anderen Elemente befi nden sollen. Außerdem wird ein di v-Cont ainer IIna vba r durch
einen neu t ralen grauen Rahmen hervorgehoben und zur besseren Übersicht mit einer grauen Hintergrundfarbe versehen.
bas ic.css:

Bei der Erarbeitung von Navigalionsleisten Isl es manchmal
nützlich , Elemente mit einem
Hintergrund zu versehen, um
das Element direkt sehen und
Fehlern vorbeugen zu können.

body (

background-colo r: IIf fffff:

I
flcontainer (
width : 70%:
margln: IOpx a ut o :
I
nav bar.css :

linavbar (
background·colo r : # f a f afa;
border: lpx dashed IIddd :

.-.....

N:I\"lgalioIlSIIIl'u{i : Rt'is pil'1

..""""
"""

.. Ab bil dung 5.16
NaVIgationsmenü auf komple tter Layoutbreite

Um beim Design der Navigationsmenüs den gleichen Ausgangspunkt bei allen Browsern zu haben, wird für die Navigat ionselemente ei n Global Reset vorgenommen. Sowoh l der innere als
auch der äußere Abstand werden dadurch automatisch auf null
gesetzt; außerdem werden Listenmarker entfernt.

IGlobal Reset )
Global Reset sorgt dafür, dass gewisse 5eilenelemenle von alle n
Browsern gleiche Standardwert e
(bzw. Initialwert e) besitzen. Ohne
Global Reset arbeiten die einzelnen Browser (darunter auch der
In ternet E_plorer) mit verschiede nen Standardwerte n und slellen Seiten daher unterschiedlich
dar.
5. Z (SS-basierte Ansat ze

307

.

{

margin: 0;
paddi ng: 0:

I
I!navbar u1 {
list-style: none;

I
Es ergibt sich das Seitenbild, das in der nachfolgenden Abbildung
zu sehen ist.

N ..vigutionsmcnü: ßciSllicl
Ab bil dung 5.17 •
Seiten navigation nach einem Global Reset. Alle Abstände werden
auf null ge~tzt.

Um die Liste horizontal auszurichten, kann man Listenelemente
als Inline-Blöcke deklarieren (display: in l ine in IInavbar 1i)
oder sie nach links floa t en lassen. Das Letztere w ird durch die
Eigenschaft f1oat: 1eft; in IInavbar 1i realisiert. Linksausrichtung setzt voraus, dass man auch den Eltern-Container IInavbar
nach links floatet. Seine Breite wird auf die komplette Breite des
Containers gesetzt.
Es ergibt sich:
InHne-Styling kann bei älteren
Browsern zu unerwünschten
Problemen führen: diesen kann
man durch f 1oa l vorbeugen.

I!navbar (
baCkground-color: IIfafafa:
border: Ipx dashed IIddd:
f1oat: 1eft:
wi dth: 100%;

I
/inavbar 11 {
floa t : 1eft :
width: auto;

Floaten vor IInavbar noch weitere Elemente im DokumentRuss, so ist es notwendig, dem
IInavbar-Block dIe Eigenschaft
c l ea r; bothzuzl.Mleisen. Erst
dann wird die Float-Richtung
auf IInavbar nicht mehr angew endet.

308

5

Navigation

N"yig"tionsmcnü: Ucispicl

... Abbildung 5.,8
Verweise rucken zueinander: float: left erzeugt eine Inhne-Anordnung
der LIstenelemente Innerhalb einer ungeordneten liste.

Die Blockdarstellung eines Elements wird mit der Angabe displllY: bloc k : definiert. Würde man mit einer Inline-Formatierung arbeiten, so wären nur die Angaben für li nke und rech te
Abstände möglich. Abstände können in Inline-Level-Elementen
nämlich nur in horizontaler Ausrichtung (l inks und rechts vom
Element ) deklariert werden . 51 n Block-Level-E lementen lassen sie
sich dagegen für alle Richt ungen festlegen. Anschließend werden
sämt liche Anke r innerhalb der Listenelemente mit einer BlockdarsteIlung versehen, damit die inneren und äußeren Abstände in
alle Richtungen definiert werden können.
Fügt man den Verweisen des Navigat ionsmen üs einen inneren
bzw. äuße ren Abstand (pllddfng bzw. margfn) hinzu, so erhält
man ein standardkonformes, f unktionierendes Grundge rüst, das
mit wenig CSS auskommt.

I
Der Unterschied zwischen
InUne- Level- und Block-LevelElemen ten wird in Kapitel 9,
. Web 2.0 Layouts mit C55 umsetzen«, erklärt .

Der Unterschied zwischen dem
inneren und dem äußeren Abstand wird im C55-Bo~-Modell
deutlich.

finavbar a (
dl s pl ay: block:
padding: 7px;
margin: 5px ;

N a"ig"tionsmenü: ßcislliel

... Abbildung 5.19
Ein standardkonformes, C55basiert es Grundgerüst eines horizontalen Navigationsmenüs

Um den Listenelementen mehr Raum zu geben, werden sie mi t
eine m äußeren Abstand vom Eltern -Element (ffnavbllr) versehen.
Beim Darüberiahren der Verweise mi t der Maus soll der jeweilige
Verweis markiert werden - zum Beispiel durch die Veränderu ng
der Hintergrundfarbe.
N a"igatioll s lll~nü:

Beispiel

... Abbildung 5 .20
Die Hintergrund farbe im :hoverZus tand wird auf #1199CC
gesetzt.

Nach wenigen Anpassungen der Schriftart, Sc hriftgröße, Hintergrundfarbe, der Abstände (padding und margin) und der Ränder
ergibt sich zunächst ein schlichtes Navigationsmen ü. Insbesondere ist es wichtig zu beachten, dass der innere Abstand zwischen
den Listenelementen vergrößert wird. Buchstaben werden mi t
text-transform: lowercase ; in Kleinbuchstaben umgewandel t. Dies ist für Links in Navigat ionsmenüs genauso typisch wie
Großbuchstaben oder Kapit älchen.
5 Inline elements and Padding, http://www.mdXeksian.com.aulpresentatlon/
in/i rrl (U nkeode 116)

5·2

C55-basierte Ansatze

I

309

Abbildu ng 5.21 ..
Ein schlich tes Navigationsmenü
im :hover- und Im :focus-l ustand

N a,igationSlllenü : Beispiel

N avig~ltion s m~nü : B~i s pi~1

Mit der Anweisung t e xt · trans form lassen sich Buchstaben per
(SS in Kleinbuchstaben bzw.
Großbuchstaben umwandeln .
Mit der Anweisung fontvariant werden Kapit'llchen
verwendet.
Um wa nd lun g in
Klein buchs taben:
PI
t e xt - trans f orfl: l owe r cas e, I
Umwa nd lun g in
Großbuc hstaben:
p I

t e xt - trans f orm: uppercas e; I
Umwa ndlung in Kapit älche n:
pi

font - varl ant: sma1! · c aps : I

Analog lassen sich Trennlinien
auch mit

Onavbar a I
border -rlght: Ipx so lI d
U1IAAOO:
I
erzeugen. Nachher muss dafür
gesorgt werden , dass das erste
NaVigationselement von links
eine rechte Trennlinie besitzt .
Dies ist nicht ZWingend , sorgt
aber für ein abgerundetes Bild
der Leiste.

310

I

5

Navigation

IJnavba r (
background-color: IJlIBBbb:
border-top: 4px solid 11079:
float: left:
wl dth: 100% ;
J
IInavbar a (
display: bl oc k;
paddi ng: 10px 15px;
f on t: bold O.8em/l.6em Ve rd ana. "Lucida $a ns Unicode ' . ' Luclda Grande '. Verdana. Arial . sans-ser if:
text- tran sform: 1owerca se:
background-color : 1119c:
color : IIddd ;
J
flnavbar a:hover. /Inavbar a:focus {
baCkground-color: 113be:
color: IIfff;

Nav igationseleme nte a bsetzen I Um einzelne Navigationsefemente stärker voneinander zu trennen, kann man eine sichtbare
Trenn linie im linken oder rechten Rand der li-Elemente über die
border-Eigenschaft ein fUgen. Falls dies etwa durch
IJnavbar a (
border-left: lpx solid {/lad:

geschieht , so muss man dafür sorgen, dass auch im letzten Element der Liste eine Trennlinie rechts vorliegt. Die Verwendung
der Pseu doktasse : 1ast - c h11 d stetlt dies sicher.

N.wig:'l tionsn,enii : Reis pi el

I

N.wign tionsmcllii: BcisJli('1

... Ab bildung 5.n

finavbar

CI

Das Navigationsmenü im Sta n-

{

dard- und im Hover-Modus

border-left: I px 50 11d 11lad :

I
#navbar 11:1ast-chl1d CI
border-rlght: lpx solId Dlad:

I
Pseudoklassen werden vom

.. l isting 5. 2
Eine einfache Navigal ionsleiste mit Trennlinien

Aktuelle Rubrik hervorheben I Die gerade angezeigte Rubrik,
die im XHTMl-Markup als ein Element der Klasse cu rrent deklariert wurde, soll sich von den übrigen Elementen helVorheben
und dem Besucher zeigen, wo dieser sich gerade befindet. Dies
lässt sich un ter anderem durch eine Verdunkelung der Hint ergrundfarbe und durch Aufhellen der Text farbe erreichen.

N avigationsmenii : Beisl,iel

Internet Explorer (auch in der
Version 7) In der Regel nicht unterstützt. So wird :last ' chlld
vom Browser demnach ignoriert .

EineMöglIchkeit, dem Problem
aus dem Weg zu gehen, besteht
darin, für das letzle Element eine

eigene Klasse zu deklarieren und
diese mit einem rechten Rand zu
ver'iehen.

N1nl i g~ ltion s m('nü :

Beispiel

• Abbildung

tloavbar l1.current a r
bacKground-color: 0079;
co lor: I/ff f ;
text-decorat1on: none;

5. ~3

Die gerade angezeigt e Rubrik soll
. Weblog. sein.

I
• li sting 5.3
Auszeichnung des aktuellen Seitenbereich51n
einer passiven, dunklen HIntergrundfarbe

Noch besser kann die Hervorhebung durch einen farbigen
Akzent, zum Beispiel durch die border-Eigenschaft des aktuellen
Elements, geschehen.

N ilviglltionslIll'nli: B('isl.iel

.. Abbi ldun g

5.~4

Der ak tuelle 5el tenberelch wird
farbig mit einer HIntergrundfarbe
und einem unteren Rahmen hervorgehoben .

5.2

(S5-basierte Ansätze

I

3 11

list ing 5. 4 "
Der aktuelle Seitenbereich wird
durch einen dunkleren Hintergrund und einen Rahmen unten
hervorgehoben .

IIna . . bar 1 i .current a (
background· colo r: #007799:
color: fiff f:
text · decoratlon: none :
border·bottom: 10px solid JlaaddOO:

Um die angezeigte Rubri k stä rker hervorzuheben, kann man den
oberen inneren Abstand des Text es erhöhen und den Text dadurch
nach unten schieben. Um Darstellungsprobleme in älteren Versionen des In ternet Explorers zu vermeiden, wird außerd em posi·
ti on : re l ative; hinzugefUgt.
I}na . . bar 1 i .current
pildding-top: lSpx:

Abbildung 5.25 ..
Der obere innere Abstand des
Tedes im aktuellen Seitenbereich
wird erhöht.

list ing 5.5 ..
Aus einem unteren Rahmen wird
ein oberer Rahmen . DafUr sorgt
die Arrweisung margin-top:.1 4 p~.

iI

(

Na\'igationsmenü: Beispiel

#na . . ba r 1 i. current a I
margln·top : -14px:
background · col or: 11079 :
co lor: fHff:
text-decoriltion: none:
border· t o p: 10px solid /ladO:
/ * Re1i1 t i . . e Positionie run g wegen
der Renderfng- Pr ob 1eme de s JE * /
position: reliltive:

I
Abbildung 5.26 ..
Verschiedene Browser interpretieren die margin-Eigenschaft unterschiedlich : Der Internet Explorer
macht nicht mit F ire fo~ (oben),
Internet E~plorer (unten)

N avigatiollSlllellü: Beisl)iel

N,,,igationsmenü: Beispiel
.umbi:ili:

312

5

Navigation

~

w .. b loy

~

l!.w..Il..a.U

Weitere Anpass ungen

I

I Was

auf den ersten Blick als eine bloß
aufgeräum te Anreihung von Verweisen aussieht, kann schnell
zu benutzerfreundlichen Registerkarten gestaltet werden. Dazu
genügt es, den Abstand der Liste vom oberen Rand (von IInal/ ·
bar) zu erhöhen, die Listenelemente mit einer oberen und
unteren Trennlinie zu versehen und ihren Abstand voneinander
auf wenige Pixel zu setzen.

Navigutionsmenii: Beispiel

final/bar ul I
marg1 n: Spx:

.. Abbi ldung 5.27
Damit die Hover-linkfarbe nicht
so stark auffällt, wird sie in Richtung der Hintergrundfarbe verdunkelt .
.. Listing 5.6
Aus Block-Elementen werden
gewöhnliche Regis terkarten.

ffnavbar 1 i I
marg1n: 2px Ipx 2px Ipx:
display: 1nline:

I
ffnavbar a I
border-top: lpx solid lI11aadd:

I
ffnavbar li.current a (
baCkground-color: 11079;
color: IIfff :
border·bottom: none:
text-decorat1on: none:
paddi ng-bottom: 20px;

H.lufig greifen Webdesigner zu
grafischen Mitteln , um Registerkarten und die Navigation
wirkungsvoller zu gestalten. Dies
kann durchaus hilfreich sein, ist
jedoch nicht zw ingend notwendig, vor allem nicht, wenn zu
diesem Zweck Te~te durch Grafiken ersetzt werden sollen.

I
5.2.3

Navigation zweiter Ebene mit (55

Bei großen Projekten kommt es häufig vor, dass ein e horizontale
Menüleiste nicht ausreicht, um alle Seitenbereiche abzudecken
bzw. alle Navigationsoptionen in einer kompakten Übersicht zu
präsentieren. Aus diesem Grund we rden Navigationsleisten insbesondere auch Registerkarten - häufig in mehrere Ebenen
unterteilt. In Abhängigkeit davon, was der Nutzer in der ersten
Ebene ausgewählt hat, erscheinen dann in einer zweiten Ebene
weitere Naviga tionsopt ionen.
Wurde beim oberen Beispiel <11 cl ass" " current ") ...
</11> zur Ausze ichnung des aktue llen Elements verwende t , so

VetWendet man Floats zusammen mit äußeren Abständen, so
sollte man die <11 sp1ay-Eigenschaft stets auf 1n 11 ne seilen.
da der Internet Beplorer 6 die
Abstände sonst verdoppelt (Dou·
bled-Margln.Bug). Aus diesem
Grund wird im Beispiel display:
Inllne: hinzugefügt.

5·2

(55-basierte An satze

I 313

Die Technik, dem Body-Tag eine
Klasse oder ein 10 zuzuweisen ,
beschränkt sich nicht nur auf
Navigationsleisten. Auch beliebige andere Designelemente
können dam it . angesprochen.
werden ~ eine entsprechende
5tilangabe im 5tylesheet genügt
meistens vollkommen aus.

wird dies bei größeren Navigationsleisten mit mehreren Ebenen
eher unpraktisch sein. Denn zum einen kann es mehrere aktuelle
Bereiche geben (einen tur das Hauptmenu, einen für das Hauptmenü), die unter Umständen unterschiedlich hervorgehoben
werden sollen. Hieraus resultiert die Notwendigkeit, currentHilupt, current Sub zu verwenden. Zum anderen wird die Festlegung der aktuellen 5eite für alle Seiten aufwendiger.
Eine elegante alternative Methode basiert auf der Verwendung
des <body>-Tags. Dabeiwird dergewähl teSeitenbereich im <body>Tag angegeben (zum Beispiel <body c1i1 ss-" secti onDe s1gn " ».
Für jed e der Möglichkeiten (s ect 1onB 109S, sec t 1onW1 k1 s, sectf onDes1gn) wird anschließend das passende Listenelernent der
Navigationsleiste (bl ogs Tab, w1 ki sTab, des i gnTab u. a.) mittels
(55 mit einer besonderen Markierung versehen . Damit diese
Markierung nicht au f allen 5eiten wirksam wird, gibt man den
listenelementen bei der (55-Deklaration ihr Eltern-Element (z. B.
sec t l onDes i gn) explizit mit an. Die C55-Formatierung wird somit
für jedes Element genau dann w irksam, wenn das <body >-Tag des

Mit Body-Klassen lässt sich die
Anzahl der notwendigen Klassen
und lOs im 5tylesheet deutlich
redllZieren. Der Beitrag . Using
<body> Classes To Fight (55
Class ExplOSion. von Jon Galloway (http://weblogs.asp .netl
Jga lIoway/ archive/ 2008/ 06118/

using -It -body-gt-clanes -ta-fightCSS-cliJss-expiosion. iJSPX, Linkcode
219) zeigt, wie das gehl.

Dokuments zu ihm passt.
Betrachten 5ie dazu als Beispiel den folgenden (X)HTMLCode:
<body c 1a ss- osec tionDes 1gn o>
<d1v 1d- onav Contiliner o>
<d1v ld- oma1nNo3vlgat1on o>

<uD
<11 1d-Ob1ogs To3b o><o3 href-°f! " >B1og s</ iI >
<111>
<11 1d- owlk1 s To3b o><o3 href - of/ o>Wikl s</a>
<11 1)
<li ld- osoc li11 so ftwareTab o>< iI href- °ft °>
50c 1 a1 so ftwo3re </ o3 ></ 1 i >
<1 i ld- OdesignTilb o>< a href- o/l o>Des1gn

Häufig verwendet man statt
Klas<;e einen Identifikator, da
<body>-Tag nur einmal im Dokument vorkommt . Im Wesentlichen macht dies jedoch keinen
Unterschied aus .

</03></11>
<1 f 1d-Oiljo3xTab o><a href- oll o>Ajax</a>

<I 1i >
<11 fd-"pod co3 st1 ngTo3b " ><o3 href-"fl " >
Podca st 1ng</ a><11 1 >
<11 1d-"r ss To3b" ><a href-"!!" >RSS</a></ 1i>
<l uD
</ div>
<dlv 1d- °subNo3vlgat10n o>

<uD
<l1) <a hre f - o/J o>CS5</ a> <11 i >
314

I

5 Navigation

I

<10 <a href- "fJ ">( X)HTMl</ a>< 11 i >
<li c l a ss-" cur r ent" ><a href- " II ">
St andard s</ a></ l; >
<11 > <a hr ef - "lI " >Typo gr a phy<1 a ><11 i >
<1 i > <a href- " II" >G rap hi cs< la >< 11i >
<li ><a href- "II ">Template s</ a >< 11 1>
<l1> <a href-" II ">To o l s</a >< 11 i >
<11> <a href- " 11">1ns pl rat i on <I a >< I1 1>
<l uD

</div >
</ dlv >
</ body >
(SS:

. s ec U o nBl o gs IImafn Nav1gat10n Ilbl o gsTab a .
. s ectlonWlki s fknalnNavfgatl o n 11w1k1 s Tab a .
. s ec t f o nSoc i al so ftware Ilma 1 n Na vi gat i o n
IJs ocia1 so ftwareTab a . . s ecti onDe s ign IlnainNavigati on
IIde s lgnTab a .
. sec ti o nR SS f/ma1n Navigatl on IIr ss Tab a
... Fo rmatierung de s " aktiven " Tabs ...
)

50 werden trotz des immer gleichen (X)HTMl-Markups die Tabs
in Abhängigkeit v o n der Klasse im body - Element markiert . Im Fall
der Klasse s e cti onDe s ign wi rd also die ID de s ignTab durch die
(55-Anweisung. s ec t ; 0 nDe s ; 9 n IIma f nNav; 9a t; on lides ; 9 nTa b a
relevant . Zur Markierung des aktuellen Bereichs de r zweiten Navigati o nsebene wird weiterhin die Klasse. c ur rent verwendet.
Angelehnt an das erste Beispiel ergibt sic h für die Hauptnavigation (1. Ebene):
IIma 1n tla '11 ga t 1o n
ba c kgr ound- co l o r: 1133 77aa;
bo r der·t op: Ipx solid 115 55555:
paddfng: 6px 0 :
}

IIma i n Navigatl o n ul (
text'align: c enter ;
)

IImafn Navfgatfon 11 {
di s play: 1n l ine;
}

5·2 (55-basierte Ansätze

I 315

/JmainNavigation a I
f on t: bold 1.2em Arial. Helvetl ca.
sa ns· se rff:
co l or : 1199CCEE:
text-decoration: none:
padding: 6px lOpx;
/ * Transparenter hori zon taler Rahmen fOr den "Hover"Effekt: hinzugefügt. damit andere Verweise beim Hovern durch den plötzlich entstehenden Rahmen nicht
bewegt we rden * /
border-right: Ipx soli d fl3377AA:
border-left: Ipx so lid fI3377AA:
.sectionBlogs !lmaintlavlgation flblogsTab a .
. sectlonWikis lJmalntlavigation IIwlkisTab a .
. sec ti onSoc fal so ftware UmainNavigation
flsocia l so ftware Tab iI • . sec tionDe s lgn IlmilinNavigiition
fldeslgnTab a .
. s e c t fonRSS IImai nNavi gat1 on UrssTab a

I
co l or: #fff:
background -color: IISSaadd:
border-top: 3px sol id 112277BB :
border'left: 2px so lid 1188BBEE:
border - right: 2px soli d fl88BBEE:

Blogs

6

Abb ild ung 5.28

Eine einfache Navigal ions leisle.
Der hervorgehobene Seitenbereich wird automatisch selektiert.
eine dazugehörige KlassenzlM'ei sung ist nicht notwendig.

316

I

5

Navigation

Wlkls

SOClill sonware

~ Ile~ AJAX

Podcalillng

RSS

Der Hover-Zustand könnte etwa durch die Veränderung sowohl
der Verweis- als auch der Hintergrundfarbe des Seitenbereichs
erfolgen:
IlmilfnNilvfgiitfon ul li iI :hover
co l or: #EE2244:
background-color: IIfff :
/ * border-radi us- Eigen sc haft wird in der CSS3-Speziffka t fon vorliegen: sola nge kann man die bei Ffrefox
proprfetare moz· border- radi us- Ei genschi1ft zur automa tischen Erz eugung von ilbgerundeten Ecken verwenden */

I

-moz-border-ra dius: 2px;

Vllllli,

Socnll software

~

I Oesrgn I

.. Abbildung 5.29
AJAX

Podc .. strnll

RSS

Hover-Zustand der
Navigat ions/eiste

Die Navigation zweiter Ordnung (also Navigation inne rhalb von
_Design«) wird direkt unter der oberen Navigationsleiste platziert
und zentriert.

l/subNil vf gatfon
margln-t op : - lpx;
background-color: 1/55AAOO;
border-bottom: I px sol id IIfff;
border-t op: Ipx solfd 1/88bbee:
padd1ng: 8px 0 10px 0:

,

#subNavigation ul (
t ex t -allgn: center:

,
,

... Abbildung 5.30

l/subNav1gat1on 11 I
display: in l ine;

Die Navigation zwei t er Ebene
wird unter die primare Navigat ion
in die Mitte platZiert.

~ Ot!irln ~

RSS

- , . " , ,"

"

,-'"".'

'.

--------------------------------------------------------------------------------Eine geringfügige Gestal tung der Verweise mithilfe von (55,
nämlich das Hinzufügen der innere n Abstände, macht das Menü
ben utzerfreu nd licher.

#subNavfga t fon a (
f ont: bold 1.1em Arial. san s - se rif:
col or: I/fff:
text-decorati on: underl i ne;
paddlng: 3 px 7px;
border: Ipx so11 d tran s pareilt:

Hlogs
CSS

WIll!"

OO!!!M),.

Sccral soltwa"

SI.nd •• ""

... Abbildung 5.]1
Seide Navigat ionsleis ten scheinen
visuell zusam menzupassen.

I

~

Delilln

I

~

AJA.

l'odc ... I,ng

~

5.2

1001.

I{<;s
~

(55-basierte Ansatze

I

317

Der aktuelle Unterberei ch kann nun deutli cher als der Se i tenbe~
reich in der obe ren Navigatiomleiste hervorgehoben werden.

Ils ubNavlgat l on l l. c urrent a
co l or: fifff;
background- co l or: #EE3355:
bo rder: lpx so lid fiece :

A Abbildung 5.] 2

. Standards« wird visuell hervorge~
hoben. Die Markierung steh t für
den aktuellen Unt erbereich der
• Desig/lC.-Rubrik.

Ans chließend wird der Hover-Zustand für die zweite Navigationsebene festgelegt . Dieser kann mit der Hervorhebung des aktuellen Berei chs übereinstimmen, etwa um das Auge des Besu chers
nich t mit allzu vielen Farben zu verwirren .

#s ub Navlgati on a : hover (
co l or: f/fff:
ba c kgro und- co lor: #EE 3556:
-moz-bo rder-radlu s : 3px:
bo rder: lpx so lid Ilccc:

Abbildung 5.]] ..
Die Hover-Hervorhebung stimmt
mit der Current~ Gestaltung überein, wirkt jedoch nicht störend,
da beide Elemente auf der gleichen Ebene platziert sind.

Das Resultat ist eine einfache. benutlerfreundliche und browserübergrei fende 5eitennavigation ohne Grafiken mit (55 und
XHTML.

Web 2.0

--

_ .
_ _ _-.. ~
. . . . . - - ... ...,& .,.,. - - _
=..L ~

.....,-

---

.L._~

. '---

Standards

",.>c_..

''''''_'''''.>n.__,.,

$Iu ~ .....
_oog ..... _ _ .. _~ ..... ... _~ .. .,._ ,
t _ _ "' ... ..., .... _
...... .. "'''' ..., _" .. " .....

"
"- _
&I'.".
Abbildung 5.]4 ..

..

Das Resultat: eine eInfache und
übersc haubare Navigationsleiste

318

5

Navigation

""""""' _ ......

~

0...., ... _

....

... .... ..

,.c... . . . . "' _ _ .. _ ..._. _ _"......__ ..... _ .... "'"

' _ _ ""f'O' _ , ...., ....., , _ ..... " .......

.. -

... " . ....

_ ,~

..... <"... -

te...- .. "''''''',,., ..... o",<_, _
....... ,"" - _ •., . .. _ _ .....'
~

_

....-...,. ........-.... ,,""'....... ....,"...... ,.....

"' ,

5.3

Register ansprechend gestalten

5-3.1

Abgerundete Ecken

I

Der Grund dafür, dass Tabbed Document Interfaces (TDI) im Web-

[TOll

design immer häufiger zum Einsatz kommen, liegt in ihrer Kom-

Tabbed Document Interface ist ein
InterBce, mit dem sich mehrer e
Dokumente in einem Fenster integrieren lassen, wobei Registerkarten (Tabs) zur Navigation zwischen den Dokumenten bzw.
Dokumentfell5tern verwendet
werden.

paktheit und Übersichtlichkeit. Unterschiedliche Dokumente
können mit Registerkarten (Tabs) innerhalb eines Fensters platziert werden, ohne dass man zwischen mehreren Fenstern einer
Anwendung hin und zurück navigieren muss. Oblicherweise werden Registerkarten bei TOls horizontal platziert. Zu ihrer implementierung können mehrere Techniken verwende t werden. Eine
Methode, die insbesondere wegen ihrer Anpassungsfähigkeit an
die Bedürfni sse der Anwender bevorzugt wird, i5t die sogenann te
" Schiebetürentechnik« (SlidilJg Doors),6

5-3.2

Slidi ng

000(5

Der wesentliche Vorteil der Schiebetürentechnik liegt darin, dass
sie eine fle)(ible Navigation realisiert, deren Elemente sich in
Abhängigkeit von der Textgröße und Textlänge eines listenelements automatisch verkürzen oder verlängern. Somit lässt sich
mit Slidinc Doors eine einheitliche Gestaltung der Navigation
erzielen, die sich sowohl an die Schriftgröße als auch an die Fenstergröße des benutzten Browsers anpasst.
Diese Fle)(ibilität wird durch die Aufspaltung des Hintergrundbildes eines Navigationselements in zwei separate Hintergrundbilder realisiert - jeweils für den linken und für den rechten horizontalen Rand eines Navigationselements.

----

~ . _ . _--~----::----::~.

...--.
.-.-.-.-

~OO' "-C __ ._,_

.........

.-

1::::-

.-.-- ._--_......_..~:::..
.~

~:::...

__ .:;z:.':".:.-

:~':.,-::.':""

,:t""";·_;:_:-3.:.??E
.._
_
In ...
.,-.;"'"_

.... Abbildun g 5.35
Registerkarten bei Yahoo.com

Sichtbarer Berekh
für die Besu(her
imme, noch
rech tes Bild

rech tes Bild
.. Abbildung 5.36
Sliding Ooors-Technik im Überblick

linkes Bild

Anschaulich kann man sich beide Bilder als Seiten einer Schiebetür vorstellen . Sie umschließen den Durchgang und gleiten
zusammen, wenn dieser wenig Platz einnimmt, und gleiten auseinander, wenn er mehr Platz benötigt. Der Durchgang entspricht
in der Navigationsleiste dem link-Bereich eines Navigationspunktes.

SUd in g Ooors
Bel Slldlng Doors gleiten Hintergrundbilder bei Bedarf auseinander- etwa in Abhängigkeit diNon,
mit w@lcher B~dschirmaullösu ng
der Nutzer arbeitet.

6 Douglas 8owman, http://www.aJistapart.rom/,utlrJtslslldingdOOfs/

(Unkeode 117)
'5.3 Register ansprechend gestalten

I

319

•t;"

r ",,'"

.,~,

,. .. ,. . .... i

.. Abbildung 5.37
Ein auf Registerkarten basierendes NoNigationsmenü
(Quelle: Colourlovers.com)

Ursprüngli ch sind beide " Türen" in diesem Modell gleichgewicht ig. Sie d ehnen sich proport ional aus un d bedecken einan der.
Möchte man nu n die Ecken jedes Navigationse lemen t s etwa
durch ei ne Abrundu ng abschließen, so liegt es nahe sicherzust ellen, dass ein Tell der Hintergrundgrafi k nicht beliebige Bereiche
des anderen Bildes bedeckt , sondern nur ganz spezielle. Dami t
die Abrundung immer sicht bar bl eibt , darf e ine der Grafiken ni cht
zu groß werden. Dies lässt sich etwa dadurch gewährleisten,
dass nur ein kleiner Teil einer Grafik den anderen Teil bedeckt,
während das andere Hintergrundbild sich über den Durchgang
erst reck t (linkes Bild in Abbild ung 5.36). Zu diesem Zweck wähl t

Beachten Sie, dass ve~chach­
telte bzw. mehrreihige Tabbars
aus Sicht der Usability sehr
schlecht sind. Bestes Beispiel
dafur ist der Optionen -Dialog
in Microsoft Word (bis Version 2003).

man di e Größe des li nken Randbereichs mög lichst schma l, aber
dennoch groß genug, dami t die seitliche Abrundung zu r Gel t ung
kom mt .
Werden nun beide Hi ntergrundbil der naht los aneinandergereih t , wobei das kleinere linke Bild zu der linken Grenze des
. Durchgangs<c (besti mmt durch die Breit e eines Text li nks) gerückt
wird, so erhält man ein einheit liches Bild des Navigationsefements . Bei einer Veränderung der Schriftgröße wird das linke Bild
auf dem rech t en Hintergrundbild nach links bzw. nach rech ts gleiten und sich som it automat isch vergrößern bzw. ve rkleinern. Die
Voraussetzung für den Sliding Doors-Effekt ist eine ausreichend
große Höhe der beiden Hintergrundbilder, sodass diese auch bei
einer Vergrößerung der Schrift das Schriftb ild nic ht zerstören.

Sc hritt für Schritt : Beisp iel zur Erzeugung von
Regis terka rt en mit der Slidin g-Doo rs-Technik
Im We iteren betrach ten w ir ein einfaches Beispiel einer auf Registerka rten basierenden Navigat ionsleiste mit der Sliding-DoorsMet hode.

..

"..'"
,~,, <ö

..,'K"

"

,.,,,

I

1

..."
.. Abbi ldung 5.38
Beim Darüberfahren mit der Maus
wird das Hintergrundbild verschoben: CSS Sprites im Einsatz

320

I

5 Navigation

11

Designentwurf

Jeder Umsetzung in der Praxis soll ein Designentwurf zugrunde
liegen. Beim Design von Navigationsleist en haben Designer in
der Regel drei Fälle abzufangen : Den Standardzustand, in dem
eine Regist erkarte passiv ist, den Hover-Zustand, in dem man
mit dem Mauszeiger über eine Regist erkart e fährt sowie den
aktuellen Zustand, der akt iv wird, f alls eine entsprechende Sei te
angezeigt wird . Häufig werden die letzten beiden Zustä nde durch
ein gemeinsames Bild repräsen tiert, um die Navigat ion möglichst
einf ach zu gestalten. Ein bei m Hovern erscheinendes Bild einer
Registerkarte ist somit identisch mit de m aktuellen Bild der Registerkarte.

Eine elegante Methode, den Hover-Zustand zu erzeugen, wird
durch die Technik (55 5prite5 geliefert. Dabei werden mehrere
Bilder, die zu einem Zustand gehören, in einem Bild zusammen·
gefasst und übereinander in Form eines Stapels platziert . Beim
Wechsel der Zustände wird das gerade passende Bild über die
background-pos tt 1on-Eigenschaft mit (55 quasi vorgeschoben
und angezeigt. Damit die Navigationsleiste auch bei der Vergrö·
ßerung des Textes und großen Bildschirmauftösungen sichtbar
bleibt, empfiehlt es sich, das Bild breit genug zu machen . Optimal
ist eine Breite von 150px, mit der sich die meisten Fä lle abde·
cken lassen.
Zuerst w ird mi t Adobe Pho toshop ein Prot otyp des Bildes
erzeugt, der gewöhnlichen Registerkarten ähnelt. Anschließend
wird ein passendes Hover-Bild erzeugt und direkt darunter gelegt.
Das resultierende Bild ist in Abbildung 1.40 dargestellt. Anschließend wird das obere Bild in ein linkes (tab-links.png. 18px breit)
und ein rechtes (tab-re<hts .png) Hintergrundbild aufgesplittet.
Das linke Hintergrundbild hat eine Breite, die gerade die linke
obere Abrundung umfasst.

I

-

....I

'

I

... Abbildung 5.39
Ein oben abgerundetes Rechteck
der HOhe 150px.

,

... Abbildung 5 .40

.

Oben: Standardzustand, unten : Hover- und aktueller Zustand

EI

XHTMl-Markup
Als Grundlage f ür die Navigat ionsleiste dient das folgende
XHTML-Grun dgerüst:

<dlv 1d-~navbarM>
<u1>
<l 1> <a href-oUo t 1t l e- oZurOck zur
Sta rt sel t e ">S ta rt sei te </ a></li >
<11 class- ' curren t ' )(a href- ' O'
tftle- "Unternehmen >Unternehmen </ a></ ll >
<l1> <a href- ' O' tlt1e- ' Produkte ' >Produkte</ a>
<{11>
<l1> <a href- ' O' tft1eo- ' Dfenste ' >Dfenste</ a>

... Abbildung 5.41
Das linke Hintergrundbild in einer
Großaufnahme

M

5.3

Register ansprechend gestatten

I

321

<11 i>
<li> <a href-~II " title- "A GB ~ > AGB </ a ><!1i>
<11> <a href- oJ1 0 t itle- oKontakt O) Kon takt </a>

<11 1>
</u1>
</div)
.... Abbi ldung 5.42
Das rechte Hintergrundbild

Dabei steht der Bezeichner cu rr ent fü r den Sei tenbereich, der
gerade angezeigt wird. Dieser wird grafisch beson ders hervorgehoben.

11

Global Reset

Zuerst werden sämtliche inneren und äußeren Abstände auf null
gesetzt; die Navigationspunkte we rden horizontal zueinander
ausgericht et .

* {

marg1n: 0 : padd1ng: 0: 1
body {
background·color : IIfff:
f ont: 2 .0em/ 1.6em Calibr1. Helve t1 Cd. Ar1al. ser if:
rnarg1n: lern:

I
!Jnavbar
fl oa t: left:
wfdth: 100%:
background: f/ddd :

I
• Startseite
• Unternehmen
• Produkte

•

Abbildung 5.43 10Ursprüngliche NavigationsleisIe
ohne innere und ,'I.ußere Absl<'inde

Dn~nste
,
-

• !§.§
. ~

11

Horizontale Ausrichtung der listenpunkte

Jedes Navigat ionselement wird nach links gefloatet. Beachten Sie,
dass bei ul- und li -Elemen ten Ab stände auf null gesetzt werden,
da die einzelnen Browser unterschiedliche Standardvorgaben für
die Abstände besitzen .
/lnavbar ul I
11st·style: none:

I
!Jnavbar 1 i {
322

I

5 Navigation

I

float: left:
.... ldth: auto:

... Abbildun g 544
listenmarker werden entfernt,
listenelemente werden nach links
gefloatet.

StartseiteUnternehme'lProdukteDiensteAGBKontakt

B

linken Teil des Hintergrundbildes den Registerkarten
hinzufügen

Verweise sollen als Blockelemente behandelt werden. Außerdem
wird der linke Teil des Hintergrundbildes zum Hintergrundbild
des gesa mten LIstenelements. Dabei wird das Bild an der linken
oberen Ecke (I ef t t op) fixiert und angezeigt.
finavbar 1 1 [
float: left:
10'1 dth: auto;
background: url{ "t ab-l1 nks. png") no-repeat 1eft top:

J
Unavbar a [
d1splay: block:

J
... Abbildung 5.45
Als Hintergrund fur das li-Element
wird der Unke TeU der Registerkarte definiert.

lartseit.nternehmerfodukte.ienste~+,ntah

11

linken inneren Abstand und unteren Rahmen

hinzufügen
Damit der Text die Registerkarten nicht bedeckt und nachher
mit e inem ergänzenden Hintergrundbild erweitert werden kann,
werden Verweise um die Breite des linken Bildes (in diesem Fall
18px) nach rec hts verschoben. Außerdem werden die I1-Elemente mit einem unteren Rahmen versehen.
Ifnavbar 11 I
float: left:
.... ldth: auto:
background: url{"tab-I1nks.png") no-repeat Jeft t op:
padd1ng: 000 18px:
border-bo ttom: Ipx solld 11765:

... Abbildung 5.46
Verweise werden um die Breite
des linken Rands der Registerlcarten verschoben. Auch ein unterer
Rand wird hlnzugefogt.

5.3 Register ansprechend gestalten

I 323

11

Rechten Teil des Hintergrundbildes den Regi sterkarten
hinzufügen

Im nächsten Schritt werden die Verweise der Navigat ionsleiste
mit einern Hintergrundbild versehen und vorsichtshalber im
Hinblick auf die Kompatibilität mit älteren Browsern nach links
gefloatet.
flnavbar a
1* Fl oat·E l emente sind autom ati sc h
81 ock - Level· [1 emente. di sp1 ay: block ni cht
notwend 19 *1
float: 1eft:
wldth: auto:
ba c kground: url( " tab-rechts.png" ) no-repeat rlght top:

I
Sind der linke und der rechte Teil einer Registerkarte sauber in
zwei Dateien geschnitten worden, so ergibt sich das Bild, wie es
in der Abbildung 5.4 7 gezeigt wird .
Abbildung 5.47 ..
Verweise werden mit einem Hintergrundbild - dem rechten Teil
des Hintergrund s der Registerkarte - versehen.

11

Verweise von Abrundun gen trennen und deutlicher
gestalten

Um die Verweise besser voneinander und von den Abrundungen
zu trennen, werden sie mit einem inneren Abstand versehen.
IJnavbar a I
float: left:
width: auto:
background: url ( " tab· recht s. png " ) no-repeat rlght
top:
paddlng: 5px 15px 4px 0:

I
Abbildung 5.48 ..
Ein innerer Abstand wird hinzugefügt.

Mit ein wenig (55-Styling kann man die Registerkarten besser
hervortreten lassen.
finavbar a (
float: left:
wi dth: auto:
324

I

5 Navigation

I

background: url ( " tab-rechts.png " ) no-repeat right
t op:

Um doppelte horizontale (bzw.
vertikale) Rahmen zwischen den
Tabs zu vermelden, ist es häu fig
nützlich , lI-Elementen die EIgenschaft margln -r lght : - Ip-x
(bzw . lla rgln -tlottOIl: - Ip-x)
zuzuweisen . Dann wird jeder
nachfolgende Reiter immer I px
vor dem Ende seines Vorg.1ngers
anfangen .

text - deco rat i on: none:
font-weight:bold:
co l or:1I333 :
padding: Spx lSpx 4px 0:

I

.. Abbildung 5.49
Die Gestaltung der listenpunkte wird an das Design angepasst.

EI

Aktuellen Seitenbereich auszeichnen

Um den aktuellen Seitenbereich gesondert auszuzeichnen, wird
die dafür vorgesehene ID cu rrent verwendet. Als Hintergrund bild für das li-Element wird der linke Teil der Registerkarte verwendet, für den Verweis der rechte Teil. In bei den Fällen wird das
Hintergrundbild an die passende Position verschoben, nämlich
um 150px vertikal nach unten. Dies war ursprünglich gerade die
Höhe der Registerkarte in einem beliebigen Zustand.
flnavbar 1 f. current {
background-position: 0% - 150px:

I
flnavbar 1 f. current a
background-position: 100% -150px :

Unternehmen

Für den aktuellen Seitenbereich soll der untere Rahmen ausse-

... Abbildung 5.50
Auszeichnung des aktuellen Sei tenbereichs mithilfe von _back_
ground-position_

hen wie ein darunter liegendes Seitenelement, damit die Registerkarte darin überzufließen scheint. Diesen Effekt kann man
beispielsweise durch Ein fügen eines unteren Rahmens für den
Con tainer header wie folgt erreichen:
linavbar (
fleat: left:
wldth: 100%:
background-col er: IIddd:
bo rder-bottom: 12px solid liddccbb :

I
IJnavbar li. cu rrent {
5.3

Register ansprechend gestalten

I

325

background-position: OS: -150px ;
borde r -bo tt om: Ipx so l i d IIddcc bb ;

Abbildung 5.51 •
Registe rkdrten mit der SlidingOoors-Methode

~~

im

Untern ehmen

Produkte

DilMtMt

AGa

kontIkt

Hover-Effekt hinz ufügen

Vollständigkeitshalber sind nun noch die Li stenelemente - also
einzelne Registerkarten - mit einem Hover-Effekt zu ve rsehen,
damit diese dem Nutzer akt iver erscheinen. Dabei wird für den
Hover-Effekt das Hin tergrundbild wieder verti kal um 150px nach
unten verschoben.
IInavbar li:hover , llnavbar li:hover a {
background-positfon: OS: -150px ;
color: 11333;
}

flnavbar 1 i :hover a (
background-positfon : 100S: -150px :
flnavbar 1 f a :hover

color:

Abbildung 5.52 •
Eine Navigat io nsleiste in Gestalt
von Registe rkarten mi t einem
Hover-Effekt (in MoZilla Firefox
und im Internet Explorer 7)

m

11111 :

H Oller-Effekt für den Internet Explorer anpassen

Der Internet Explorer bis einschließlich Version 6 interpret iert die
: hover-Pseudoklasse nur dann, wenn sie für Verweise verwendet
wird.
Abbildung 5.53 •
Die Navigationsleiste im Internet
Explorer 6

5tertHlte

Unternehmen

PI'OdubI
.;;...,;;;.:JI!

Mit unseren Stilangaben wird die Hintergrundfarbe der Registerkarten beim Int ern et Explo rer 6 und ält eren Versionen demnach
nicht angezeigt. Um diesem Problem aus dem Wege zu gehen
und die Funktionalität der Registerkarten in neuen wie in al ten
Browsern sicherzustel len, kann man das spa n- Element zu Rate
ziehen und dieses innerhalb der Anker verschachteln.
Dadurch ändert sich das XHTML-Markup:

326

I

5

Navigation

I
bacl:groI.l"lO- posll1on: [horIzontale Pos1tlm] [vertIkale PosHlonJ
Mit der Eigenschaft background -pos 1 t I on in C55 kall" man die Position
des HlntergrundbUdes fUr das dazugehörige Blockelement genau festlegen. Dabei l.1sst sich ober die Prozent- oder Pixelangaben angeben ,
wo sich die linke obere Ecke des angezeigten Ausschnitts der Grafik auf

dem Hlntl!rgrundblld befinden soll.
AlternatIV kann man auch Schlüsselwörter verwenden:
top" vertikal oben ausrichten.
Dattoll" vertikal unten ausrichten .

center. zentriert
lefl" horizontallinksbündig

rlght" horizontal rechtsbündig
So zeigt etwa
ul 11 I
ba ckgraund - , mage: ur 1(Da ckground. png) :
background - posltlon: 19px 85px :
I
ein lIstenelement m it einem Hintergrundbild, dessen Startpunkt (linker
oberer Punkt) horizontal 19p. (in Richtung nach links) und vertikal
85p. (In Richtung nach oben) entfernt vom linken oberen Randpunkt
des HIntergrundbildes ist. NegatIve Werte (-19p., -8Sp.) geben die
Bewegulllsrichtung des Fokus nach unten blW. nach rechts an: Man
kann sich diese 8I!Wegung ah Verschiebung des Hintergrundbildes nach
oben vorstellen.

<d1 Y 1d-" navbar " )

<uD
<11)< a href_Mg t1t 1e-"ZurOck zur
Sta rtse1 te " ><spa n >Sta rtsei te</s.pa n> <I a) </11)
<11 class- ' current o><a hre f - oUo
tft1e-"Unternehmen " )<s pa n>Un t ernehmen</span>
<I a><11 1)
<11 ><a href- " Ir t1t1e- " Produkt e " ><s pan>Produkte
</s pan></a ></ 11>
<11 >< a href-"Ir t1 t 1e-"Die nst e" ) <span>D1enste
M

</s pa n>< / a></ 11 >
<11><a href- "U" t lt1e- "AGB " >< sp an>AGB</s pan)

</a></11>
<11 >< a href- "UO t1t1e-"Kontakt " ><s pan)Kontakt
</span></a></11>

<l uD
</d fv )
Dementsprechend wird der linke Teil des Hintergrundbildes vom
Verweis get ragen, der rechte vom span-Element . Der gesamte
CSS-Stil sieht dann wie folgt aus (die wichtigsten Veränderungen
sind fett markiert) :
'5.3

Register ansprechend gestalten

I

327

·

{

margin: 0;
paddl n9: 0:

I
body I
background: fl fff:
f o nt: 2 . 0 em / 1.6em Callbr1. Hel ve t lcd . Geo rgla. s erff:

margln: lern;
I
IJnavbar
fl oa t: left;

wldth: IDOl;
background - col or: fJddd:

border-bottom: 12px so lid Ildcb ;

finavbar ul {
li st- s t yle: none:
I
!Jnavbar 1 i {
fl oa t: left;
wldth: auto :

border - bottom: I px so lid #765 :

!Jnavbar CI (
n Oo t: left:
1'1'1 dth: auto:
ba c kg round: urH tab-llnks.png " ) no-repeat left top:
n

padding-left: 18px;
t ext -decora t lon: none:
f ont-wefght: bol d:

co l or:1J 333 :
I
/inavbar a:h ove r
background - position : Oi -150 px:

I

#navbar 1i . current
bo r der-bottom: I px so lid /ldd ccbb;

I
IInav bar 1 f , ClIfrent a
background - position: 0 - 150px ;

I
#navbar 11. current a spa n
background - posi tion: 100% - 150px;
co 1cr: #333:

328

I

5

Navigatio n

I

Dnavbar a span
float: left:
wi dth: auto:
ba c kground: url ( " tab-rechts.p ng " ) no-repeat r1ght top:
plldd1ng: 5px 15px 4px 0:
co lor: #333:
}

Dnavbar a:hover span {
co lor: DIll:
background'pos1t1on: 100S - 150px :
curs or: pointer:

Damit funktioniert das Navigationsme nO auch im Internet Explorer einwandfrei. Die visuelle Erscheinung ändert sich dadurch
nicht

... Abbildung 5.54

Mit ein wenig CSS-Styling ergibt sich der fertige Prototyp :

Die Navigallonslel~te im Internet
Explorer 6: links ohne HoverEffekt. rechts mit HC1oIer-Effekt

flnavbar 11. current a span {
background-position: 1001 -150px ;
colo r: 'alOOOO:
f ont - weight: bold:

.. Abbildung 5.55
Die Navigationsleiste in der
Gestalt von Registerkarten

m

Probleme mit älte re n Versionen des Int ernet Explo rers
b eh eb en

Im Prinzip wäre die Navigationsleiste an dieser Stelle schon fertig
- problematisch ist bloß der Internet Explorer 5 Mac, bei dem Verweise in listenelementen, die im oberen Code mit float: left
nach links geschoben werden, auf die ganze Seiten breite erstreckt
werden . Die meisten Browser interpretieren die fl oa t-Deklaratlon _straight forward.: Alle Elemente, auf die fl oat angewandt
wird, werden mit einer minimalen Größe versehen. Diese wird
durch den Inhalt des Containers festgelegt. Bei einem Bild wird
die Breite automatisch (falls keine weiteren Angaben vorliegen)
auf die Breite des Bildes gesetzt; bei Texten auf die kleinstmögliche Breite eines im Text auftretenden Wortes - ohne Zeilenumbruch. Nur beim IE 5 Mac tritt eine unangenehme Besonderheit
5.3 Register ansprechend gestalten

I

329

Mehr über den CommentedBacksfash -Hack erfahren Sie auf
der Seite http://www.'idm- /- am.
comlw()(k/sandbox/nv"
maue5_hacK.html (linkcode 141).

auf. Lösen lässt sich das Problem mit dem Co0101ented-8acks/ashHaCK, bei dem die fl oa t -Anweisung nur für den IE 5 Mac angezeigt und von anderen Browsern dagegen ignoriert wird.

/ * Commented-Ba c ksla s h-Hac k vers teckt die
f olgende Anweisung f Or JE 5- Mac \ */
liheade r a span ( fl oa t:n one : 1

/ * End e de s JE 5-Mac -Hacks */
Somit i st eine standardkonforme, von den meisten Browsern
korrekt angezeigt e Nav igat ionsleiste in Form von Registerkarten
fertiggestellt. •
Selbstverständlich beschränkt sich die Methode nicht nur auf
Navigationsleisten mit abgerundeten Ecken. Verschiedene and ere
visuelle Effekte lassen sich auf diese Weise ebenfalls umsetzen.
.. Weitere Bei spiele zum Design von Registerkarten mithilfe
der SUding-Doors-Technik finden Sie auf:
http://wW.N.exp/oding -boy.co01/2oo511 21151/ree-cssnavigation-designs (Linkcode 142)
.. Weitere Informationen zur SU ding-Doors-Technik finden Sie
unter:
http://wW.N.alistapart.co01/articles/s/idingdoors(lin kcode
1 43) und http://www.alis tapart.com/articles/s/idingdoors2

.a.Abbildun gS·5 6

Auf ExlodingBoy.com finden Sie
standard konforme und plattform übergreifende Navigationsmenüs, die mit der Slldirtt-DooßTechnik realisiert wurden.

(Li nke ode 144)
Ein Vortrag zum Thema mit detaillierten Erklärungen vom
Autor kann unte r http://www.stopdeSign.com/present/2004/
sydneyllimits/?no=83 (Linkeode 145) nachgelesen werden.
.. In seinem Bei t rag »Inverted Sliding Doors Tab s«
http://456bereastreet.comlarchivel200406/inverted_s/iding_
doors_tabs (Unkeode 146) beschreibt Roger Johansson, wie

man invertierte Registerkarten mi t CSS auf der Grundlage
von Sliding Doors implementiert.
http://ft/ty/ou reif! ven. comlsandbox/weblogl2004 /o ct//igh t weight- css-tabs (Linkeode 147)

..

Eine Weiterentwi cklung der Technik übertragen au f elf
unterschiedliche Navigationsmenüs mit abgerundeten Ecken
finden Sie auf:
http://wW.N. exp/oding-boy.com/2005/1 211 51/ree-mnavigation-designs (linkeode 148)

.. Au ßerdem ermöglicht die » Mountaintops« ~Technik
http://alistapart.co01/articles/01ountaintop (Linkeode 149)
von Dan Cederho/m s die Red uzierung zweier Bilder auf ein
halbt ransparentes Bild _

330

I

5 Navigation

5.3.3

I

(SS Sprites

Ein wei terer kreativer Ansatz zur Gestal tung von (SS-Menüs ist
die Methode (5S Sprites von Dave Shea? Zwar ist die Technik
nicht so flexibel wie Sliding Doors, doch eigentlich war sie auch
gar nicht dazu gedacht. (SS Sprites zielt darauf ab, den Rollover-Effekt beim Darüberfahren von Navigationselementen mit
der Maus möglichst wirkungsvoll (für Enty.,rickler) und möglichst
.. schlank« (fü r Sei tenbesucher) zu gestalten.
Mit CSS Sprites lässt sich ein Navigationsmenü komplett in
einer einzige n Bilddatei speichern. Einzelne Teile werden in einer
Art Raster angeordnet. Zur Veränderung d es angezeigt en Bildes
wird die Position des entsprechenden Bildteils im Raster angegeben. Das Bild wird genau einmal geladen und kann direkt für
die Anzeige aller vordefinierten Zustände yeN/endet werden. Die
Technik erlaubt es also, beliebige Rollover-Effekte im Navigationsmenü zu erzeugen, ohne dass dabei lästiger JavaScript-Code
verwendet w ird . So mussten Sie sich beispielsweise auf einer
Webseite mit einer auf JavaScript basierenden Navigationslei ste stet s gedulden, bis sämtliche Bilder komplett geladen waren
und angezeigt werden konnten. Als Konsequenz musste man mit
einem Flackern der Bilder und einer überraschenden Menuanzeige rechnen.
Bei CSS Sprites verwendet man daJi:egen ein Master Image
für die Gest altung des ganzen Navigationsmenüs. Dieses wird
zunä.chst als Hintergrundbild eines dl v-Con tainers gesetzt, in
dem sich die Navigationselemente befinden sollen. Diese werden
wiederum relativ zu ihrem Eltern-Container in 1i ne -positioniert
und transparent gehalten, damit das Hintergrundbild des Containers übernommen wird. Das Markup der Leist e wird durch eine
ungeordnete Liste (u 1) da rgestellt.
Die Breite des ul-Elements ist fix. Sie stimmt mit der gesamten
Brei te der li - Elemente überein. Somit wird die Breite der Menüpunkte durch die Breite des Hintergrundbildes festgelegt. Deshalb
werden bei CSS Sprites keine Texte verwendet. Bei diesen müsste
man nämlich bei beliebigen Veränderungen der Texte (etwa bei
einer Vergrößerung der Schrift) mit merkwürdigen Nebeneffekten - im schlimmsten Fall mit einem Auseinanderfallen - des
Menüs rechnen. Um die Verä.nderung des Zustands eines Navigati onspunkts beim Hovern zu erze ugen, verändert man durch
die Beschreibung der Pseudoklasse : hover die Positionierung
des Hintergrundbildes - sowohl vertikal als auch horizontal - für
jedes Element der Liste. Dies lässt sich mit der Eigenschaft back.ground-poslt 10n mithilfe von (SS realisieren.

15 pritel
Ein Sprite (engl. für Geist, Kobold)
ist ein Grafikobjekt. das von der
Grafikhardware ober dem Hint ergrundbild bzw. den restlichen Inhalt der Bildschirmanzeige eingeblendet wird. Die Positionierung
wird dabei komplett von der Grafikhardware erledigt. Der Name
rührt daher, dass ein Sprite quasi
auf dem Bildschirm .. umherspukte
und Im Grafikspeicher nicht zu
finden ist.

Ende der 1990er-Jahre gehörten
auf JavaScript basierende Roll over-Menüs zum Alltag im Web.
Jedes Bild wurde genau geschnitten und mit onMouseOverund onMouseOut-Effekten direkt
in den HTMl-Code ei~efügt.
Mit CSS Sprites geht es einfacher
und anschaulicher.

7 Dave 5hea ist ein renommierter Grafik- und Webdesigner, der u. a. (55 Zen
Garden (h n p://www.nszengdrden.com) ins leben gerufen hat .
5.3

Register ansprechend gestalten

I 331

Abbildung 5.57 •
Bei Sprites muss die Positio-

nierung des Hintergrundbildes

genau beachtet werden , In diesem Bild muss die Eigenscha ft

I

4SPX

.background-position« auf
-6apx - 46px (-68 = -67 - 1 und
- 46 = -45 - 1) gesetzt werden,

damit das helle Rechteck angezeigt wird.

ul 11 I ba ckgr ound - pos1l l on:
50% 50S : 1

sorgt dafur, dass ein Punkt, der
in der Mitte des Hintergrundbl l de~

liegt, In der Mitte des

Blockelements angezeigt wird.

Auc h bel Zahlenangaben bewegt
sich de r Fokus bei positiven horizont alen Prozentangaben nach
reeh n;, bei positiven ver tikalen

Prozentangaben nach links. Der
Punkt , der durch die Positio-

nierurg getroffen wird, landet
immer in der linken oberen Ecke

des angezeigten BUdes.

ulll a
Ein Hintergrundbild

de~ ul 11 aElements wird nicht angezeigt
und durch die Jeweiligen Hintergrundbilder der 11 a-Elemente
bedeckt.

332

I

5 Navigation

Im Allgemeinen wird die Technik für kleinere NavigationsmenOs
vervvendet, da sie eine explizite Gestaltung jedes Navigatiomelements sowie eine sorgfaltige Positionierung des Hintergrundes
bei sämtli chen Zuständen erfordert. Bei großen Projek1en, die
neue MenOpunkte (etwa Submenüs) häUTIg hinzufügen, kann
dies durchaus zu einer zeitaufwendigen und kostspieligen Angelegenheit werden.
Betrachten Sie nun das folgende Beispiel, das die Anwendung
von CSS Sprites in der Praxis veranschaulichen soll.
Da die Methode mit einem einzigen Hint ergrundbild arbeitet,
muss man sich zuerst übertegen, welche Zustände des Navigatiommenüs liberhaupt relevant sind. Meistens beschränkt man
sich auf: hover und: 1I nk-state s. Sämtliche Zustände werden
anschließend explizit gestaltet und in einem Gesamtbild zusammengefasst. Um das Flackern der Bilder beim Sprung von einem
Zustand zum entsprechenden hover-Zustand in älteren Browsern
zu vermeiden, ist es notwendig, den Ankern des ul-Elements
ein Hintergrundbild vorzugeben, in dem alle möglichen HoverZustände, die durch das Hovern der Navigationselemente erzeugt
werden, bereits dargestellt sind.
Wählt man eine graue Farbe für die Anzeige der aktuellen
Seite, hellgrüne für den Hover-Effekt und ein .. kaltesoc Grün für
die Standardanzeige, so ergibt sich als Gesamtkomposition der
Navigatiomzustände ein kompaktes Bild.
Wegen der Flacker-Probleme wird die erste Reihe dieses Bildes
als Hintergrundbild der Verweise innerhalb der ul 1I-Hierarchie
fO r die Startseite verwendet, die zweite fOr d ie . Prod uctsoc-Seite,
die dritte für die .S upporh-Seite und die vierte für die ,. ContachSeite. Dadurch entstehen zwar Redundanzen - sie können jedoch
angesichts der Dateigröße und der erzielten Browserkompatibilität vernachlässigt werden . Es ist dabei wichtig zu verstehen, dass
ein Hintergrundbild des ul 1I <'I - Elements ni cht angezeigt wird
und durch die jeweiligen Hintergrundbilder der 1i <'I-Elemente
bedeckt wird.

-n wx

-M~

0

-aN"X

0

-.~
~~

~-

•••
' '' 00-1(

~

r.
r
P'

=1
,

r
r:P'

Die fünfte Reihe stellt die Anzeige der Elemente im passiven
:l1nk-Zustand zusammen. In der sechsten Reihe befinden sich
schließlich Bilder, die von einem listeneJement benutzt werden,
falls das benachbarte Navigationselement grau helVorgehoben
wird. Di es tritt gena u dann auf, wenn da s benachbarte Navigationselement gerade aktiv ist.

... Abbildun g 5.58
Die Methode (55 Sp-ites zur
Gestahung der Seitenn<Jofigati on.
Die Zahlen geben Auskunft Ober
dh! Position der Bilder. So hat zum
Beispiel das graue »Products.HlntergrundbUd die Entfernung
-9 4 px (horizontal) und -22 px
(vertikal) vom Nullpunkt (diese
Angaben entsprechen der Breite
bzw. der HOhe der in der Matrix
davor positionierten Bilder).

... Abbildung 5.59
Der linke Teil der Abbildung
(»Products c) entsprich t der sechsten Zeile der Matrix

Somit kann jedes lf-Elemente auf jeder Sei te genau einen
Zustand annehmen . Dieserwird durch seine Position in der Navigationsmatrix präsentiert.
Beacht en Sie bitte, dass das akt ive graue Element in den zwei-

ten, dritten und vierten Reihen extra so gestaltet wird, dass es
einen Teil sei nes .Vorgä ngers. überdeckt (zum Beispiel bedeckt
der .Support. -Berelch den It Productsc-Bereich in der dritten
Reihe). Dies werden Sie intuitiv tun, wenn Sie ein Navigations-

menü beispielsweise in Adobe Photoshop gestalten. Dabei lassen sich beliebige visuelle Effekte schnell und intuitiv reali sieren. Beim Code des Navigationsmenüs müssen Sie sehr präzise
mit der Positionierung des Hintergru ndbildes arbei ten. Kleinste
Un genauigkeiten, die sich in einem seltsamen Verhalt en Ihres
Navigationsmenus widerspiegeln, können sehr schnell einen
unangenehmen visuellen Eindruck erzeugen.
Um das Markup des Navigati onsmenus nicht immer wieder
ändern zu müssen, sobald die gewählte Seitenrubrik verändert
wird, versieht man das body-Element mit einer 10. Jede Seite
wird somit nicht durch die lOs der listenelemente (z. B. <1 f
class- ocurrent o> ... <I1D), sondern durch die 10 des bodyElements definiert. Die Anzeige des Navigationsmenus wird
somi t auf allen Seiten komplett durch diese Klasse manipuliert.
Als 8ezeichnerwerden we l come, prOduc t s, support und co nta c t
verwendet . Im Fall von wel come sieht das Markup wie folgt aus
(das Bild wird navmatri)(.png genannt):

'503

Sprites eignen sich tUr kleine,
übersichtliche N<JoflgationsmenOs; bel großen MenOleisten
werden die Angaben schnell unübersichtlich und sorgen eher fü r
VelWirrung.

Die kleinste Abweichung bei de r
POSitionierung von Hint ergrundbildern erzeugt ein verzerrtes
Bild.

Register ansprechend gestalten

I

333

I

Auf CSSSprl te5.com wird die
backg round -pos 1t Ion-Angabe
automatisch berechnet .

( body id- ' we1come ' )
(div id-" navba r ")
( ul 1d- ' nav ' )
( 11 1d- ' wel ' )(a
(1 i i d-" pr o")( a
(l i id- ' sup ' )(a
( 11 1d- "con ")(a

href .. ' w.html ' ) welcome (/a)(/l 1)
h re f- " p. htrn' ") produ ct s(/ a) (/l 1)
href- ' s .html ' )s uppor t (/a)(/li)
hre f-"c.ht ml" )contac t (/a)( /11>

(/ uD

(/d lv )
(/ body)
(55:
ul flnav
margin: 0:
over f low: hidden ;
posit i on: r ela t ive:
top: 68px:
left: 188px:
wi dth : 346px:
helgh t : 22px :
list- style-type: none:

I
uli/nav 1i a {
padding: 22px 0 0:
background: transparen t url ( ' navmat r fx.png')
no- repeat: over f 1ow: hl dden:
position: abso lute:
top: 0:
wid t h: 84 px:
text-lndent: -9000px:
text-dec o ratf on : none :
helght: 0 ! important;

~

I
Jedem der Navigationspunkte muss man nun ein zu ihm passendes Hin tergrundbild mittels der Eigenschaft backgroundposi tion zuweisen . Da es im Beispiel insgesamt vier Rubriken
gibt, und für jede Rubrik sowohl der: 1 fn k-Zustand als auch der
:hover-Zustand deklariert werden soll, ergeben sich insgesamt
jeweils acht Zustandsbeschreibungen für jede Seite, auf denen
das Navigationsmenü erscheinen soll. Viele davon werden redundan t sein und sich überhaupt nicht unterscheiden.
Auf de r Startseite soll das linke obere Hintergrundbild links
erscheinen ; beim Hovern soll sich nichts verändern. Dies wird
folgendermaßen rea lisiert :
334

I

5 Navigation

I

bodyDwe 1carne 1 i IIwe 1 a {

background-position: 00:
w1dth: 94px:

1eft: 0:

J
bOdyllwelcome 1 illwel d :hover
background-position: 00 :
J
Für den MenOpunkt ,. Prod ucts« soll das zweite Hintergrundbild
aus der fünften Matrixzeile verwendet werden. Seine Position
in der Matrix entspricht der Entfernung -94 px (ho rizontal) und
-88px (vertikal) vom linken oberen Rand. Außerdem soll es links

von »Welcome« platziert werden, und zwar im Abstand seiner
Breite von li nkem Rand des ul-Elements. Die Breite wurde im
oberen Quellcode explizit angegeben.

body/lwelcome 1iIIpro a {
background-position: -94px -88px:
left: 94px :

Beim Darüberfahren soll das Hintergrundbild auf das zweite Bild
in der ersten Zeile springen. Dieses hat die horizontale Entfer-

nung -94px vom Nullpunkt.
bodyflwelcome 1iflpr o a :hover
background-position: -94px Opx;
J

Analog beschreibt man die Zustände der weiteren Seitenelemente.
bodyllwelcome li/lsup a {
background - position: -1 78px - 88px: left: 178px; }
body/lwe 1ceme lillsup a: hover
background-position: -178px
bodyllwelcome 1i/koll a {
background-position: -262px
bodyllwelceme 1illcon a :hover
background-position: -262px

{
0: 1
-88px: left: 262px; }
{
0: 1

Wie Sie sehen, erfordert die Implementierung von CSS Sprites
eine mühselige Anpassung und Positionierung der einzelnen

5·3 Register ansprechend gestalten

I 335

,. Abbi ldung 5.60

Das fertige Navigalionsmenü mit
(SS Sprites. Links: :Iink-Zustand,
rechts :hover-Zustand

Navigationselemente. Je mehr Elemente und Zustande es gibt,
desto undurchschaubarer w ird die Matrix. Das Ergebnis kann
dagegen recht attraktiv aussehen.

Die Vorteile dieser Technik liegen auf der Hand. Auch Anwender, die ohne Java5cript-Unterstützung unterwegs sind , werden
gut bedient. Hinzu kommt noch, dass (SS Sprites es möglich
machen, beliebige Hover-Effekte leicht zu programmieren und
anzupassen.
Zum größten Nachteil der Technik zählt die Tatsache, dass sich
das Navigationsmenü nicht vergrößern lässt und mehrere Probleme im Hinblick auf die Zugänglichkeit aufweist, da die Menüs
auf der Grundlage von »fixen« Bildern basieren. Die Verände-

Menüs, die mit der Technik (SS
Sprites arbeiten, funktionieren
auch bei deaktivierter Java5criptUnterstützung. Reine (55-Anweisungen ermöglichen eine flexible und plattformunabh<l.ngige
Navigation sgestaltung.

rung von Rubriken im Navigationsmenü hat die Veränderung der
ganzen Matrix zur Folge, was wiederum zur Veränderung und
Anpassung des (SS-Quelltexte s führt. Die Tech nik empfiehlt
sich somit für Seitenbetreiber, die nach einer eleganten Lösung
für attraktive Rollove r- Effekte suchen. Flexible und zugängliche
NavigationsmenOs sollten dagegen rein textbasiert se in. Sliding
Ooors stell t dafür eine gute Grundl age bereit.
Mehr Information zu (SS Sprite s finden Sie auf der Seite:
http://www.alistapart.comiartideS/spritesi (Linkcode 150)
Ursprünglich basiert die Technik auf Ideen und Methoden,
die in »Fast Rollovers Without Preload« (http://wellstyled.com/
css-nopreload-rollovers,html (Linkeode 151 )) und ,.Accessible
Image-Tab Rollovers« (http://simplebits.com/notebook/2003/09/
30/acceHible .,JmagetabJollovers.html (Linkcode 152)) veröffentlicht wurden ; beide werden in (S5 Sprites miteinander kombiniert.
Die Technik lässt Entwicklern viel Freiraum zum Experimentieren. Erwähnenswert ist in diesem Zusammenhang die »Navigation Matrix« von Dan Rubin (http ://superjluousbanter.orglarchives/2004/05/navigation·matr;x-reloadedl (linkeode 153)), die im
oberen Beispiel benutzt wurde.
Im Beitrag . Sliding DaorsMeets (SS Sprites« erfahren Sie, wie
Sie Sliding Doors und (SS Sprites zusammen verwenden (http ://
fiftyfou re/ ev en. com/s and box/webt og/20041j unidoors- mee t -spr;t es
(Unkeode 1 54» .
Neben Sliding Doors und (SS Sprites lassen sich zur Realisierung von standard konformen Navigationsregistern weitere interessante Konzepte einsetzen, die zum größten Teil standardkonform und browserkompatibel sind.

336

I

5 Navigation

5.4

I

C55 und Java5cript-Ansätze

Angesichts des Trends zu interaktiven und animierten Design elementen gewinnen auch auf (55 und JavaScript basierende Techniken zur Gestaltung von Navigat ionsmenOs eine wichtige Rolle.

Sie stelten meistens kompakte Ansätze bereit, die sich JavaScriptBibliot heken wie etwa jQuery, Mootools und dessen Erweiterungen mit vorgefertigten dynamischen Komponenten zunutze
machen.
Klassische CSS-Techn iken bilden die Grund lage fOr solche

Ansätze; somit ist die JavaScript- Funkti onaHt ät nicht als eine
Alterna tive zu, sondern als eine Erweiterung von reinen (55Ansätzen zu verstehen. Diese Erweiterung stellt eine zusätzliche
(opti onale) Interaktivität bereit, die von Browsern mit JavaScriptUnterstützung eingeblendet wird, ohne JavaScript·Unterstützung
jedoch eine funktionsfähige statische Lösu ng anzeigt
Beim Einsatz von Java5cript·Techniken stell en professionelle
Webentwickl er stillschweigend sicher, dass das Konzept Progressive Enhancement eingehalten und realisiert wird . Im Kon text des
Webs bezeichnet dies die Vorgehensweise, WelrTechnologien
in voneinander unabhängig;en Schich ten modular einzusetzen,
sodass jeder Benutzer, unabhängig von seinem Browser. auf
Inhalte des untersten Layers (Markup) zugreifen und die grund·
legenden Funktionen der Seite nutzen kann. Anwendern moder·
ner Browser mit JavaScript·Unterstützu ng Wird dagegen eine
erweiterte Funktionalität bereitgestellt. Genauer heißt dies. dass
Sie als Entwickler eine strikt e Trennung zwischen Auszeichnung
(Markup, XHTMl), Präsent at ion «(5S) und Ve rhalten (Java5cript)
vornehmen sollten.
Un ter den neuen (SS+Ja vaScript·basierten Amätzen sind insbesondere Regist erkarten, Aufklappmenüs, Toggle-Menüs und

Eine ausführliche Übersicht von
über 50 C55 und C55+JavaScriptbasierten AnsAtzen finden Sie auf:
http://www.hongklat.coml

blogl 5O-nlce- dean-css· tab-ba sed·
mllligation.scriptsl (LInkeode 156)

Karussells populär; JavaScript-basierte Flyouts werden ebenfalls
ei ngesetzt, sind Jedoch deutlich sel tener zu sehen.
5.4.1
Reg i st erkarten
Einer der Ansätze zur Implementierung von Registerkarten ist
Brainjar [55 Tabs (http://brainjar.com/css/tabs (Unkcode 155».

Es i st ein Musterbeispiel für eine flexible, auf Registerkar ten
basierende Ben utzeroberfläche. Basierend auf (5S und wenigen
Zeilen JavaScript. bietet die Technik eine Grundlage für dynamisch sich anpassende. textbasie rte Registerkarten, die man aus
gängigen Desktop-Anwendungen kennt

... _000_
. .. "._
.-...- . .... __.""-_.-_
. __ ......._-,.. _.....-

--_._---_
_.....
._~

. ...

._
.. .. _
.. _ :11 ...._. . _. _- "~

... Abbildung 5.6 1
Brainjat CSS Tabs realisiert Registerkarten mit abgerundeten
Ecken mit C5S, Java5cript und
Iframe.

5.4 (55 und JaliaSCript-Ansätze

I

337

-- "-

T".. ItJ"'.U. _ _

__

_

" "'I

"'o.............
,ob< ....
, _ _ __ ""

C",.~ "it

~

....,-. __ MIY_ .......... _ . Cli

_

.._"'---,,,
n_,,"""'I'It
.. JIo»W

,..""""'

""~WI

",md,

_.'._--....

....J_" .. .... _ .... _ ~ _ "."',.
_ . "" 0"1< _
'0. _'/0< ,..,

.... Abbildung 5.62
Tabtasti( erzeugt te)(tbasierte Tabs
mit C5S und JavaScript.

. . ....... _.....a..._ .. __

_ ...., _ " !..,,~ <, ..l
-..~

__

_

.. _
m~r_
01 .......
.5,_
... .........
.. . -..
. ,_
._

...
...,_.""'--"._"' ...
----.
-...,.
..
..... _ ... _ " , - - < "',
Q ... _ .. _ _ .... _ _ . . . . _ - , . .
~ _

_-..,.

Der Anwender kann Seiteninh alte Ober Registerkarten nachladen. Der jeweilige Inhalt wird in dem darunterliegenden Iframe
angezeigt. Eine elegantere Lösung bietet Tabtastic, das auch mit
JavaSeript, abe r ohne Iframe auskommt.
http://phrogz.netIJSlTabtasticlindex.htm/(Linkcode 157)
In beiden Fällen können Anwender die Schri ft- und die Fenstergröße beliebig anpassen; auch beim Zoomen funktionieren
beide Menlis einwandfrei.
Eine erwähnenswerte Methode zur Im plement ierung von
Registerkarten mi t mehreren Ebenen wird durch die t extbasierte
Methode Simpleorange C55 Tabs geliefert.

hUp:lIlabs. si Iverora nge. Comli mage s/ta bs upda te/in de x. ht ml
Die Technik erlaubt es, mehre re ungeordnete Listen innerhalb
einer Hauptliste einzubetten und diese in Form von Registerkarten mi t Unterpunkten aut omat isch darstellen zu lassen .

.. Abbildung 5.6 ]
Mit wenigen Anpassungen

lassen sich aus Tabtastic die aus
Windows XP bekannten Register-

karten entwerfen .

Dur Po rtfo lio

Cu<;b I~r ~ol urn ~ ~lt.lO Munt bitIGrodum po'w tor. N.lm lortor q\.I.l'l1 , IJc t,,~ id.
con~!iI" . ... d. rulN'll <Oe . a nl.. Pro'" ...... "" d la. u. ",tu 01 I. tJ\.OIla'll ~el d"m
Ln m~l u . cOl'l5 ""t~lu ... filll:i,,".

In ".,...... ""m. su''''o,t Cl ... on''''l''''1 qu, • .

~Ortd

UI . .. ".". II"""""J' l ""llOr.
diei"." Donec eoCu
..-c~ , tincicunl a , pI.:.c or;;1 ~l arrGt, poft~ Q9Il1 , or~l , Alquam G'.lt ~O'"tp~t
"""n""n !>Qc~I "'. ero:", ul C01.eclCtu".. iOulv."or. m~u " . .." I" vo!utP-lt 10 0. non
Oto1l'C

neo:: enrn

q<J"

""h~ vI ~ 'I1CO'IIe' mol,s

Pree,."t

pu""'''' ", at jU510 llit !\e m",,-,i5 . Oto1e<;: leo;o ' eoeot .... i e l

wom Pe ~""I "!\L: UO:I

<div id" ··h"adet··>
<u1 1d,,"p Iiaaty">
<11><01 htef ,,"1ndex ,htll1·'>Hou</a></l1>
<li><a ht e f ,, ·'!lbouC.h tll l'·>About U~ <Ja>< l l i>
<U><~pan>OUt

<ul

Pottfol i O</~ pan>

1d."~econda,y" >

<li><a :1<e f ,, ·' f·' >Cunent Client~<JIIXJ li >
<li><a :1tef " " f ">Ca~e 3w.dies</a><J li>
<11>< a :1tef,,", ">Pub11cat.1ons</ a><J 11>
<li><a :1tef "" f·'>R~ p c t t3</a></li>
<li><a :1tef" ·' f·' >lIhi tepapets</a><J 1 i>
</u1>
</ l i>

Ab bildung 5 .64 ~
SImpleorange e55 Tabs

<li><a hr e f ,, ·'c oncact . hU l " >Concact

U ~/a></l1>

Einfache. beinahe minimalistische Ansät ze werden in Mini-Tab
(http://simplebits.corrVbitYminitabs.htm/(linkcode 158», Mini-

Ta b-5hapes
(hUp:!Isim plebits.comlnotebookI2003/08/ 14/ min itab_shapes.html (linkcode 159» und 5implified (55 Tabs (http://
simplebits.comlnotebook/ 2003/04/ #1049772884211135 (Unkcode 160» präsentiert.

33 8

5

Navigation

--

I

_. -

Ein weiterer einfacher Ansatz, der ohne Grafiken auskommt und
textbasierte Registerkarten verwendet, wurde von Joshua Kauf-

man realisiert.

• Abbildung 5.65
MInilab, Mlnltab-5hapes und
51mplil1ed C55 Tabs

http://unraveled.coml projects/css_tabs (Linkcode 161)
DervisueHe Effekt wird durch den umgebenden Rahmen und
eine Anpassung der äußeren und inneren Abstände erzeugt. Ein
analoges Menu mit Unterpunkten auf der zweiten Navigat ionsebene bietet Adam Kelsey.
hrtp:/lka/sey. comltoolslcsstabs (Unkeode 162)
Mit wenigen zusätzlichen JavaScript-Zeilen lassen sich Regis-

terkarten angenehmer und attraktiver gestalten. Dafür reicht es
aus, vorgefertige Funktionen aus einschlagigen JavaScript-Bibliotheken zu nutzen.
In sei nem Beitrag . Create a Slick Tabbed Content Area uslng
C55 & jQuery<! beschreibt ColJis Ta'eed Sch ritt-fOr·Schritt, wie
man mit jOuery fOr mehr Interkativität sorgt

http://nettuts.com/ htmf-css-techniqut>s/ how-to-create-a-sflCktabbed-content-area/ (Linkcode 163)
Alternativ können Sie auch das Modul UIITabs aus der jOueryBibliothek verwende n:
http://docs j query.comlUl/rabs

DK_

SiI._ ....

-........

1OOI • __ •

mI

Joly ZOOI ,

... Abbildung 5.66
Re,giste rkarten schön, übersic htlich , kompakt und funktional .

..

Grundsätzlich liegt der Clou der Technik darin, alle Inhaltsbereiche, die unter den entsprechenden Registerkarten angezeigt
werden müssen, beim laden der Seite zu laden, jedoch nur den
aktuellen Inhaltsbereich anzuzeigen und die anderen geschickt
auszublenden . Ursprünglich wird eine Registerkarte auf den
Zustand _aktiv<! gesetzt, genauso der dazu gehörige Inhaltsblock.
5-4 C55 und Java5Cript-Ansätle

I

339

.... ''''''0
"""'~"'>oi",, "' _
r",", ,,. . 0....
"". ~

~.

~oj_.J'

.... _.,_'''' 0 .....
,.,...,"""'II<T_
.. ...."..,.,..,_ V"'l·.C.....,. .....
.. TA..," .... _

........... , ....."

-

.. U."' ... ,....... .""'r"" ..

.. ""T_.. ..... ... ""'••
.... "'.~"""'
"' ~ ..............
.... '"

... _... ..
~

" ~,,

~~~

Klickt der Nutzer auf eine der anderen Registerkarten, so setzt
ein Java5cript im Hintergrund die zuvor aktive Karte auf »passiv«, setzt die vom Nutzer gewäh lte Karte auf »aktiv«, blendet
den alten Inhaltsbereich aus und zeigt dafür den neuen Berei ch
an. Mit ein wenig C5S-Styli ng sieht das Menü ansprechend und
elegant aus und kann mehrere Inhaltsblöcke in einem Bereich
kompakt und übersichtlich darstellen .

.. Abbildung 5.67
Dieser Ansatz verwendet das
Modul UlfTabs aus der jQueryBibliothek (http://nettuts.com/
jaVascript-ajaxicreate-a-tabbedin terface-usi ng-jqueryl).

-.. Abbildung 5.68
Einen <thnlichen horizontalen Ansatz zur Gestaltung von Registerkarten
mit (55 und J<NaScript finden 5ie auf http://nettuts .com/javaSCript-ajax/
tabbed-content-using-jquery-and-wp_query/ .

Abbildung 5.69 ~
Auch ein _Dock Menu .. ist mit
(55 und J<Na5cript möglich
(hUp j / www.ndesign-studio.
com/blog/mac/cs s-d ock -menu).
Eingesetzt wird es jedoch so gut
wie nie.

5.4.2

(SS Sprites mit JavaScript

In seinem Beitrag »C55 Sprites 2 - It's Java5cript Time« (http://
www.alistapart. com/ar tic/eslsprites2) stellt Dave 5hea eine Wei terentwicklung von (55 Sprites vor, die mit JavaSc.rip t kombiniert
wird, um ein interaktives animiertes Navigationsmenü ZU entw ickeln. Unter anderem lässt sich mit der Technik das Hintergrundbild beim Darüberfahren der Navigationspunkte dynamisch
.. Abbildung 5.70
Beim Darüberfahren mit der Maus
entsteht ein eleganter RolloverEffekt. In (5S Sprites 2 nutzt
Dave SheajQuery, um diesen
Effekt zu erreichen.

verändern. Dies wird durch eine Kombination der back9roundEigenschaft in (55 und Java5cript-Fade-Effekten realisiert. Wird
JavaScript vom Browser des Seitenb esuchers nicht unterstützt,
so verfugt das Menu über einen üblichen statischen CS5- Hovereffekt.
Ejn weiterer, ebenfalls auf C5S Spri tes basierender Ansatz, geht
noch ein Stück weiter und verJndert nicht nur das Hintergrundbil d von Navigat ionselementen dynamisch, sondern die Navigationselemente selbst. Ursprünglich sieht das Navjgationsmenü
gewöhnlich und unspektakulär aus. Wandert der Mauszeiger
über einen der Navigationspunkte, so ziehen sich die Navigationselemente ausein ander und räumen mehr Platz für den den
Nutzer interessierenden Seitenbereich. In diesem zusätzlich entstehenden Platz lassen sich etwa Icons einfUgen oder weitere

340

5 Navigation

I

Informationen über den Navigationspunkt präsentieren (sprechende Navigation).

--

.. Abbildung 5.71
Oben (Bild 1): Ausgangszustand.
Un ten (Bilder 2, 3): HoverZU'l tJ.nde. Das Bild 3 ist das
Sprite- Bild.

Wiegewöhnlich werden Navigationspunkte mittels eines Gesamtbildes erzeugt, wobei die Hintergrundbilder einzelner Navigationspunkte mit dem Attribut backg r o und- pos f t f on festgelegt
werden. Im Ausganszustand werden diese Bilder schlicht und einfach abgeschnitten - im oberen Beispiel werden Icons ursprünglich nicht angezeigt. Beim Hover-Effekt kommt ein Slider-Effekt
(einjQ!lery-Plug-in) zum Einsatz, der die Breite anderer Elemente
dynamisch verkleinert, dafUr aber den Bereich tur den gewähl ten
Navigationspunkt vergrößert. Verschwindet der Ma uszeiger vom
NavigationsmenO, so zieht sich das Menü in den Ursprungszu stand zurück .
5 .4 .3

Klappmenüs und Flyouts

Finden übli che textbasierte oder bildbasierte Navigationsmen Os
und Registerkarten ihre Anwendung bei kleineren Webauftritten und Weblogs, so werden Webentwickler bei größeren Projekten zum Nachdenken gezwungen. Der Besucher soll sich auf
der Seite eines umfangreichen On li ne-Shops genauso lei cht und
schnell zurechtfinden, w ie dies bei kleinen Webpräsenzen der
Fall ist. Dabei stehen ihm weitau s mehr Opt ionen und Navigationsmöglichkei ten auf einer geringe ren Sei tenfläche zur Verfügung.
Einer der Ansatze, die in solchen Si tuatiooen traditi onsgemaß - und insbesondere bei Web 2.0-Auftritten - verwendet
werden, sind mehrspaltige, logisch und hierarchisch aufgebaut e
Link-Listen. Diese sind häufig alphabet isch angeordnet , die Verweise selbst können meistens neben einer weit gefassten Navigationsbreite auch eine entsprechende Navigationstiefe vorweisen.
Genauso üblich ist es, solche Link-Listen in mehrere Rubriken
aufzuteilen und durch ihre Schri ftgröße od er farbige Ma rkierungen hervorzuheben, damit der Benutzer sie deut lich voneinander unterscheiden kann .

Eine Art des NavIgationsmenüs,
bei dem zusätzliche Navigationspunkte beim Daruberfahren aufgeklappt werden.

5-4 (55 und Java5cript-Ans;Uze

I

3 41

[Flyout-Me nü ]
Form eines Menüs, bei dem Navigationspunkte zur Seite au fklappen , amt a!! wie bei einem DropDown-Menü nach unten.

... Abbi ldung 5 .72
Zahlreiche Seitenbereiche werden
nach Ihrem Gewicht auf der Seite
areeordnet. (Quelle: 9rules.com)

Als Designer sollten Sie nicht

vom Nutzer elWarten, dass er
keine Fehler macht. Es ist die
Aufgabe des Designers, sicherzustellen. dass eine Anwendung
bzw. eine Webseite robust auf
Fehler reagiert und es dem Nutzer sclM'ierlg macht, Fehler zu
machen

Der Nachteil dieses Ansatzes ist lei cht zu er kennen : Bei vielen
Nav igat ionsmöglichkeit en wird die link-liste entsprechend viel
Seiten platz beanspruchen; im schlimmsten Fall kann der Anwender mit einer riesigen Auswahl von Optionen erschlagen we rden.
Das ist einer der Gründe, warum eine die Hauptkategorien der
Seite umfassende Navigat ionsbreite häufig einer Tiefe in Navigat ionsmenüs vorgezogen wird.
Eine vernünft ige alternative Lösung bieten Klapp-Menüs
(Drop-Down-Menü) und Flyouts, die zusätzliche Informat ionen
zu einer Rubrik erst beim Darüberiah ren mit der Maus auf den
jeweiligen Menüpunkt im Navigat ionsmenü anzeigen. Dadurch
lassen sich mehrere Navigationsebenen kompakt vereinen und
bie ten dem Anwender eine Möglichkeit, schnell und gezielt die
entsprechenden Inhalte auszuwählen.
Klapp-Menüs, vor wenigen Jahren von der Designszene mehrheit lich abgelehnt , scheinen nun immer häufiger von den Designer beachtet zu werden. Aufklappmenüs sind eine enorme Hilfe
für Webentwickler und - wie so häufig - eine sehr nervige Angelegenheit für den Anwender. Denn aus Designersicht können
viele Informationen mit einem Drop-Down-Menü sehr kompakt
aufbereitet werden und dadurch viel Platz im Layou t sparen.
Aus Nutzersieht ist der Ansatz unangenehm, da Nutzer zum
einen nicht in der Lage sind, ihre Navigationsopt ionen im Auge
zu behalten und zum anderen den Mauszeiger bei ihrer Auswahl
immer sehr präzise fokussieren müssen. Kleine Fehler bei der
Posi t ionierung der Maus führen dazu, dass das Menü ve rschwindet und die Auswahl einer Navigationsrubrik neu gestartet werden muss. Die typischen Usability-Fehler bei solchen Navigationsmenüs betreffen den Eimatz mehrerer Navigat iomebenen in
einem Menü sowie die Pla tzierung der Un terebenen nicht vertikal übereinander, sondern horizontal nebeneinander.

U .... omohrnon

Beachten Sie: Um die Maus
richtig zu positionieren und den
rechts abgebildeten Screenshot
zu erstellen, waren zwölf Versuche notwendig.
... Abbildun g 5.7]
Dieses Menü nutz t mehrere Navigationsebenen gleichzeitig
und platZiert Unterebenen horizontal nebeneinander. Dies ist
nicht benutzerfreundlich.

342

5

Navigation

I

Beim ersten Besuch der Se ite stehen den Besuchern vier Navigationsoptionen zur Auswahl- ,. Professional .. , »Integrated Solu-

tions. usw. (erste Navigationsebene). Wird mit dem Mauszerger
über eine der Rubriken darübergefahren, so erscheint darunter
ein Navigationsblock (zweite Navigationsebene). Wird wiederum
über eine der Rubriken in der zweiten Navigationsebene darubergefahren, so erscheint eine dritte Navigationsebene.
Aus Usability-Sicht ist dieser Ansatz schl icht und einfach
schlecht . Wenn ein Nutzer auf der Seite . Kaffeemaschinen ..
gelandet ist und zu .. Vending-Automaten« wechseln möchte,
muss er nicht nur in der dritten Navigationsebene navigieren,
sondern von Anfang an starten und erst einen Pfad zur dritten
Ebene linden. Die horizontale Platzierung von Navigationsebenen nebeneinander erzwingt, dass der Mauszeiger präzi se und
von links nach rechts wandern muss. Auf diesem Pfad we rden
viele Besucher ihre Geduld verlieren und die Sei te verlassen. Hier
wäre es besser, Nutzer nur die Seite . Anwendungenc anklicken
zu lassen und auf dieser neuen Seite eine stat ische Navigation mi t
. Kafeemaschinen c, . Vending-Autoamtenc usw. unterzubringen .
Somit hätte der Nutzer seine Auswahl im Blick und musste nicht
die Maus horizontal bewegen.
Grundsätzlich sollten Sie in einem Aufklappmenu den Nutzern
immer höchstens eine zweite Navigationsebene anbieten, also
höchstens einen Navigationsblock, der erst beim Darüberfahren
eines Links mit der Maus erscheint.
Musste man bis dato bei der Realisierung von beiden Menüarten zu aufwendigen DHTMl- und JavaScript·Quelitexten greifen,
so lässt sich dies nun leicht und flexibel mit CSS und JavaScriptBibliotheken realisieren .

5,4 ,4

Suckerfi sh Dropdown s

Einer der ersten Ansätze zu einer CSS-basierten Drop-DownFunktionalität wurde von Patrick Griffiths und Dan Webb entworfen und mit dem Titel Suckerfish D(opdow1lS~ versehen . Dem
Ansatz liegen eine Liste mit Hauptkategorien der Seite sowie
ungeordnete Listen (evtL mit weiteren Unterlisten) mit zusätzli chen Navigationsmöglichkeiten zugrunde. Die Letzteren klappen nur dann auf der Seite auf. wenn der Seiten besucher über die
entspre chende Hauptkategorie mit der Maus gefahren ist. Dies
gilt auch für die Unterlisten .
Ein Bei spiel soll dieses Prinzip verdeutlichen. Betrachten Sie
bitte das folgende (X)HTMl~arkup.
8 Patrkk Grlfll ths. Dan Wdh, ~Suckernsh Dropdowns. http://www.
alls tap,grr.com/.lrtldev dropdowns (Unkeode 138), _Sons of Sockerfish.,
http://www.hrmldog.comtartlciesAuckerfish (Unkeode 139).

5-4 C55 und Java5cript-Ansatze

I

343

<u1 id- "nav ">
<1'1 >< 03 href- "/l M>Perco'lde'l </ a >
<uD

<!- - etc -- >
<luD
</ 1 i >
<11 >< a href- "I/M >Ana bo3 nt o1 de1 <la>
<uD

<l1> <a href-H!f" c lass- "do3ddy ">C limb1ng
perches </ o3 >
<uD

<10 <03 h re f- "/I " >Anab as <I a></10
<11 ><03 href- "/! ">C tenopoma </ o3 >< 111 >

<luD
</ 11>
<10<a href-"iI " c lo3ss-"do3ddy">Lo3byrlnthflshes

<la>
<uD
<11><03 h re f - " /J " >Be 1ont i 03 </ 03 ></ 11>
<11 ><a href- "fI">Betta </ a ><11 1>
<!-- etc. -- >
<11 ><03 h ref- "!f">Tr1 c hops 1s<1 a>< /11 >
<l uD
</1 1>
<11 >< a href- "II" >Klss1ng gouramf s</o3 ><11 f >
<11 ><03 h ref-" II " >P1ke -heo3 ds </ a> </11>
<1i >< 03 href-H!f" >G io3nt go ur amis</o3></1 i >
<l uD
</ 11 >
<!-- etc. _. >
<I ul >
Der Clou der Technik liegt darin, dass man die aufzuklappe nden
Navigatiommenüs zu Anfang mit der Angabe 1 eft: -99gem ausblendet und erst beim Hovern wieder anzeigen lässt. Die Position
au fzuklappender Menupunkte wird mit em-Angaben rela tiv zu
ihren Eltern-Elementen festgelegt, damit die Naviga tionsleiste
auch be i eine r Vergrößerung der Schriftgröße funktioniert. Um
Problemen im Internet Explorer vorzubeugen. verwendet man
(55 und Java5cript-Tweaks.
Problematisch bei derartigen Navigat ionsmenüs kann die
eigentliche Auswahl der Seiteninhalt e sein. Wegen ihrer DropDown-Nat ur erfordern Klappmenus mehr oder wen iger präzise
Bewegungen der Maus, ansonsten verschwinden die aufgeklappten Navigati onsoptionen. Bei größeren l eisten mit mehreren

344

I

5

Ndvigdtion

I

Hierarchieebenen können Fehler demnach äußerst ärgerlich werden, nicht zuletzt weil jeder davon eine erneuerte Auswahl der
gewünschten Option zur Folge hat.
WO/C(»,'" 16 ltIomw.... 61 PO/('JI"'''"" . , ..tll~"

I/,e wu/i

1100110. Vo u h~o fo\.Old

t'.,...", Suc. kerfiJ h

a~ oi~ m ~ \o ~;o"' , So< k.. t1sh

~ 1I 11." nlCktlH

WO;/O; .. ,'" 1<111"", , M ~.., s ~ .fP..,cit<ol",e • • I'N d >-ih , . ,, ...., fftd mH
1/ ......."'1/1 ,.,m,... Suck.rfitl!

Oropd . ....,•.

1.K\do' , ..... h!lcd 'fOOJ "i:, f ... 11 """'" ni •• "t'\.. tIl ... d HTlM.., • "...,::oIrring of

"" co"'01

Anlllal~o~1OO

Clrrthg~.·,~.

Hol"' , '1'0" novofol

\.lIt\rn ..h l ..

l..kJCe , lI1e hoJod'oOl

Ki'!oOnlYO~~"'~

CS,., . n ~ . t~e ""'1
Ig,twelgot, ~ ' • .,(

Fi . ".~" ..,;;.
GI",j

lid, OrOlld .. ",,,.
rr~L,

...

I e~eri n~ 01

DI '~ , I"

HOlIO 'l'WhO"''''
U1oenhehOOJ\"O
COO ... UO"' ... <I'

Cl mI.o "9

\..ob",

t

~.,,~.
~,I,..

1'l.","'1 ,," .. ;r<rI~

""I.

~.

CO'"

f!Jh"'oi \lhl.I1'J.' "
Su .~ " OOll""""ß' ort orooghi 1J)'OUb"{ ~ ... ' .

~",u I~

Bo

~"""'''''"' 6

v,

,<I"",

, od "" -.c. f o loo ""Im"", iIbou1 S"'\o", h . . .
' ." ." .""
_ -_ " . ' _ - . ,

Meh r Informati onen über Suckerfish-Drop-Down-Menüs finden
Sie auf:
http://www.htmldog.comlarticJes/ suckerfish (linkcode 164)
Auch ein vertikales Klappmenü (Flyouts ) mit mehreren Navigati onsebenen lässt sich mit der Suckerfish-Technik realisieren.
http://www.htmldog. com/ articJ eS/su ckerfi sIVdropdown siexam·
ple/ vertical. html (lin kcode 165)
Eine Weiterentwicklung der Technik, übertragen sowohl auf
eine horizontale als auch auf eine vertikale Anordnung der Navigati onselemente, finden Sie auf der Seite : http://so/ardreamstudi os.comllearnlcsslcssmenus (Unkcode 166)
Analoge Funktionalitat liefern Horizontal Drop-Downs (http ://
aJistapart.com/ articleslhorizdropdowns (Unkeode 167»
und
Deluxe [55 Dropdowns and Flyouts (http://positioniseverything.
netlcss-dropdowns.html (Unkcode 168». Sie kommen aber ni cht
ohne JavaScript-Tweaks für den Internet Explorer aus,
Eine weitere Implementierung bietet ADxMenu (http://aplus,
co.yu/adxmenu/ examples (linkcode 169». Zahlreiche 8eispiele
und Varianten werden mitg;eliefert.

... Abbi ldung 5-74

Klassisches 5uckerfish-DropDown-Menü.

WO: <:SS DltOI'I)OWNS At'4I) F
••
________________

<..,....
."'....,,,"',,

.

• ""',. ............. '0;1 , ,,, _

Thlrd Unk

V

.h

SYDII~'

Mver\"[
.. t

One

one.o ne

5Ybllnw 1'0110

Onf.TW~

' '"'I'- '~ -

... Ab bild ung 5.75

... Abbil d ung 5,76

Die 5uckerfish-Technik im Einsatz

Deluxe C55 Dropdowns and Flyouts

5-4 C55 und Java5cript-Ansatze

Ö

-345

_.,. ....-

.... Abbildung 5.77
Ein ADxMenu mit mehreren
gatio n-sebenen

Navl~

5.4.5

Hybrid (SS Dropdowns

Drop ~ Oown-Funktio naJität

einer anderen Art wird durch Hybrid
(55 DropdowII5 (Eric Shepherd, ~Hybrid CSS Dropdowm«) geliefert (http://www.aIi5tapart.com/ article5/hybrid(Linkcode 170».
Hybrid C55 Dropdowm zielen darauf, zwei Mängel der
übli chen Klappmenüs auszuräumen :
... Zum einen erscheint die sekundäre Navigation bei Klappmenüs erst dann, wenn das gesamte Menü aktiv wird ;
.. Zum anderen bieten Klappmenüs eine unzulängli che Navigationshilfe, da der Anwender nicht präzise genug we iß, welche
Seite er gerade besucht.

Eine interessante Weiterentwldclung der Hybrid (SS Dropdowns
finden Sie auf http://www.

proJec tseven .(omlt ut orIa/sI; ndex.
htm (Linkcode 171). Das Menü
liefert eine leicht erkennbare
und prazise Navigationshilfe und
überzeugt durch seine Schlichtheit und Benutzerfreundlichkeit.

346

I

5

Navigation

Unter Umständen kann die Navigation in nerhalb einer 5eitenrubrik deshalb äußerst ärgerlich werden, da man das Menü immer
w ieder aufklappen muss, um von einer Seite zu einer anderen
zu gelangen. Hybrid CSS Oropdowm sollen eine flexible Lösung
beider Probleme bereitstellen.
Dergrundsätzliche Unterschied dieserTechnik zu traditionellen
Drop -Down--Menüs besteht darin, dass die aufzuklappenden
Navigationsoptionen nicht nur beim Darüberfahren angezeigt
werden, sondern direkt sichtbar sind. Dabei wird eine übersichtliche Darstellung der Navigationsleiste bei textbasierten Menüs
mit der Drop-Down-Dynamik kombiniert. Genauer heißt dies,
dass die Navigationsmöglich keiten einer gewählten Rubrik (NaVigation zweiter Ordnung) wie gewohnt unter der primären Navigat ion angebrachtwe rd en und somit den Seitenbereich, auf dem
der Besucher gerade ist, deutlich anzeigen . Sie können direkt als
übliche Verweise angeklickt werden, ohne dass man sich mit der
Drop-Down-Präzision auseinandersetzen muss.
Die Navigationsleiste Mei ter Ordnung verändert sich, wenn
der Anwender über die Hauptkategorien der Seite fährt. Sie liefert somit unmittelbar einen Überblick über die Optionen, die
den Besu chern auf der Seite zur Verfügung gestellt werden. Aus
der Sicht eines Webentwicklers sieht der CSS-Quellcode dem
Code üblicher Drop-Down-Menüs sehr äh nlich. Die Elemente der
liste mit den Hauptkategorien werden mit fl oat: le f t: horizontal ausgerichtet, die sekundäre Navigation wird mit dl s pl ay:

I

9

none: ausgeblendet. Um sicherzustellen, dass das Menü zweiter Ordnung die StandardJei ste tatsächlich bedeckt, wird seine
Priorität durch z -1 ndex; 6000; angegeben. Für ältere Versionen
des Internet Expl orers, die den; hover-Zustand nur für Verweise
interpretieren und darstellen, benutzt man das JavaScript aus der
Suckemsh-Methode.
Ein wesentlicher Vorteil der Technik ist neben einer besseren
Navigationshilfe auch eine bessere Interaktion mit dem Menü.
Die Navigationsoptionen bleiben erhalten, solange der Mauszeiger auf der Seitenfläche des ganzen Menüs bleibt, die dem
nav-Element zugewiesen w ird. Be i üblichen Drop-Down-Menüs
musste man den Mauszeiger auf einen gewählten Seitenberei ch
fixieren.
Die gleiche Funktionalität, aber eine andere Implemen tierung liefert: Two-Level Navigation (http://aplu5.co.yu/lab/nestedtabs336111148 (Linkcode 172».
Es stell t eine weitere standardkonforme und browser-kompatible Lösung zur Realisierung kombinierter Dropdowns zur Verfügung.
He>meprodutts Business Operators Shop

Zustand a
Die ursprungliche Darstellung
gibl eine Übersicht vorhandener
Na viga tio nsoptionen.
Zustand b
Ho,tern einer der Rubriken
Zustand c
Hovern einer der Hauptkategorien - die untere Navigationsleiste verändert sich
Zustand d
Auch da~ Hovern der veränderten unteren Navigationsleiste
isl direkt möglich.

Eine Weiterentwicklung diese r
Technik wird unter http://woork.
blogspot.coml20Q8JOBIelegantgI ass-style- navigatlon- bar.html (Linkcode 173) beschrieben. Hierwird

ein ähnlicher Effekt mit wenigen
Zeilen JavaScript für die JavaSaiptBibliothek Mootols realisiert.

modE'k EnhanrE'fTll!llts Entertainment TerhnokJs;ies

Homeproducts Business Operators shop
Entertainment TethnokJs;ies

• Abbildung 5.78
Zustand .a«

BU S~SS Operators Shop
S IlliII~Medium

Business lalle Busine~ Third Party Solutioos

c:::I a::::II

'..w.. ,,,..-. .

......

c::::::II

. ._.. """""

lafl\e Business Third PaJl.t ° lutionS I

• Abbildung 5.79
Zustand _b«

.. Abbildun g 5.80
Two- Level- Na viga Ilon

5.4.6

To ggle-Menüs

Die sogenannten Toggle-Menüs (SchaltermenOs) stellen eine
benutzerfreundliche Alternative zu gewöhnlichen Klappmenüs
dar. Sie erlauben es den Nutzern , die dargeste llten Navigations-

• Abbildung 5.81
Zustand .c«
.::::::=:11 II:!:C=:II
• •_

9 Da einige Screenreader die Eigenschaft d i spl~y : none häutig ajs Anlass zum
Ausblenden von Inhalten ohne Berücksichtigung übriger (55- Formatierung
verstehen, w,lre es an dieser Stelle sinnvoller, die text ' i nden t: -999ef1Eigenschaft zu verwenden .

.... __

... _

.....

#

c.. ...

• Abbildung 5.82
Zustand .dc

5.4 (SS und JavaScript-Ansätze

347

Die Beit räge .. Flieh like horiwntal
menu _ (http://woork.blogspor.

comll 00810 1lJf/ckr·I!ke -hor/zon·
tal-menu.html, LInkcode 176) und

.Slmple CSS vertical menu Digglike. (http://woork.blogspot.comi
200810 1Is/mple-m - ve ft/cal-me nu ·
digg-Ilke. html, L/nkcode 177) sind
weitere Beispiele für Toggle-Menüs, die jedoch keine st rikte Trennung zwischen Prdsentation und
Interaktivität vornehmen und deshalb nicht empfohlen werden.

,. Abbildung 5.8 3
Scha ltermenüs im Einsatz

optionen unter Kontrolle zu haben und wirken dabei ni cht so
aufdringlich. Die Idee dabei ist, die Navigat ionsblöcke wie auch
bei Drop-Down-Menüs nur auf Nachfrage hin anzuzeigen, aber
nicht, wenn übe r einem Navigationspunkt mi t der Maus darübergefahren wird, sondern wenn ein entsprechender .. Schal ter« angeklkkt wird . Diese r wird neben jeder Navigationsoption
platziert . W urde ein Schalter angeklickt, so erscheint das Navigationsmen u im Brows.erfenster - unabhängig davon, wo der Mauszeiger gerade wandert . Wird ein anderer Schalter angeklickt, so
wird der zuvor angezeigt e Navigationsblock ausgeblendet und
ein neuer Block angezeigt.
Einen simplen Ansatz zur Realisierung solcher Menus zeigt
der Beitrag .. Designing the Digg Header: How To & Download«
von Chris Coyier (http://css-tricks.com/designing-the-digg-headerhow-to-download/(Unkcode 174)).

Um den Toggle- Effekt zu erzeugen wird die entsprechende
Funkt ion aus der JavaScrip t-Bibliothek jQuery verwendet. Eine
ähnliche Technik mi t dem Einsatz der Bibliothek Mootools wird
in dem Beitr<l8 " Two C5S vertical menu wit h show/h ide effects«
vo rges teilt (http://woork.blogspot.coml2008l0 3/two- C5 5- verticalmenu-with-showhide.html (Lin keode 175)).

-- ----

--

tLkkf

-~

Ab bildung 5.84 ~
Ein Schal termenü aus Digg.com,
nachgebau t von Chris Coyier mi t
jQuery im Beitrag .Designing the
Digg Header: HOW' To & Download« (http://css-tricks.com/
design ing- the-digg- header-howto-download/, linkeode 17B)

Ten Ways

5.4.7

-,;. .~~ JS !ff~1
,

c=a

-'.-

-

,- ~

F,!.!'

,--.---

!

~tooI..51~ ~ !1f~t

rCode

Karussells

In Portfolios sowie auf Unternehmen- und Produktse iten gewinnen insbesondere die sogenannt en Karussells immer mehr
an Popularität. Wie schon in Kapi tel 2, »Das Web im ne uen
Gewand«, angesprochen, basiert dieser Ansatz auf der Kombination eines horizontalen Navigationsmen üs mit einem kompakten
348

I

5

Navigation

I

Inhaltsbereich, in dem Inhalte auf Nachfrage hin, das heißt, bei
eine m Klick auf die Navigatiomoptionen angezeigt werden. Die
Navigation findet direkt und interakt iv statt, ohne dass die Seite
neu geladen werden muss. Dieser Ansa tz hat gegenüber alternat iven Techniken zur Gestaltung von NavigatIonsmenüs wesentli che Vorteile. So hat der Nutzer sämtliche Navigationsoptionen
direkt im Blick und braucht nicht von einer Seite zur anderen zu
wechseln. Es genugt, den Mauszeiger nur einmal zu fokussieren.

F~u

SlI..

E ~OI"

Prtvlew

T.nri~&1

CSS

BI>Ob

Terminal
Lorem Jpt um doIor sll ~met. eonsedet .... . dJpJ sla~ eHt u d do 8IlJSmod lMll«
JncJdldunt ~ labOre el (lGlOIe magna d qu •. UI enlm '<I m nlm vtnJam. quJ .
r>Osi ud e.eralali Q~ ull.mcQ I.boo. rl1' ut alKPP U el oonmodo conn quM.
Do.t . ...... i ..... oot Ql" in ,el'l"t t.en denl ,n ~.", vel~ t u . a lJum doIore <IlI lugial
null. p. nal..... Ex",,~ .. lirot Q<Uoc.l C\4lida1l.1non proode nl. sunt in N p. quI

.. Abbildung 5.85
Dieses einfache und auf JavaSuipt
basierende Karussell wurde mit
jQuery realisiert . (Quelle: http Jl
j queryford eSigners. com/d em 01
coda-sllder.ht ml, linkcode 179)

offico. de~ .... moIl~ anm Id e:lliaborum ArId SOlD!! liIe.

*. . .

~-

..... . /.-

Th e _ d r...,lIM. in lIIe spacecl._.

.....,

~ _PO""' rIO "' ~Il}"._

'""_ ""'Ir ..... waru

.-.

_ _.......y,',
"'''''"''''
,...
.. _ .._
'p.n.'....___
...,."_, .,
_'.. .....
_n.,.
___
IIV·_"" ....

_00.._ . . ._..,.._

....,. .. _

..... , 1. . . ' .... "_l<I.I ~

'.,.

~

~..,. "'

•

<& --_ _
. ... .
. .A

Smocdl ........,.oonllclwillSUbv. oion.

' -.... _ ... _..., """""" ~ "p.O soo _

"'-'-.-._.,.. -

.._"""'<WW14_""'_
"'.....,. .......
\0>1 ..
'_.. ...
.
.
.",
.
.
'*'!' ......
..... ....... ......,.-.. ''-,01><0 .......",..... _

.............. "".
_M.IO".o.""",-._",ooxu_"""",
_
_ ... _

_

•
.. Abbi ldung 5.86
Panic.com/coda bietet seinen
Besuchern ei n att raktives und
benutzerlreundliches Karussell an .
Diese Seite ist eine der ersten, die
diese Technik intensiv eingesetzt
hat.

Doo:t!fIoj ' " "

EJDEJ
Du rch den schm al en Inhaltsberei ch wird die Aufmerksam keit des
Anwenders nur auf das Karussell gelenkt. M it hilfe geschickter
Typografie und visueller Medien lassen sich Inhalte dadurch wirkungsvoll verm itteln und können für einen bleibenden Eindruck
sorgen. Demzufolge eignet si ch dieser Ansatz insbesondere für
Slideshows und kurze Präsentationen ~ genau das, was in Portfolios und Produktseite n gefragt ist.

5-4 C5S und JavaSc ript-Ansätze

349

Abbildung S.87 ..
Ober 55 weitere Beispiele von
Karussells finden Sie auf http://
www.smileycat. com/d eslgn_elements/c,u ouseloJ, li nkcode 180.

Wie genau Karusse lls programm iert echnisch realisiert we rden,
können 5ie in dem Beitrag ,.Coda 51ider Effect« nachlesen .
http://jquery/ordesigners .com/coda·slider·effectl (Lin kcode 1 81)

Pane l '

....... """""_ ..,_< _ _ _

fl9 .. L

....... . .

p.oo ... """" ... _

... .....

"'.,.... """ , _ .,,_ ""-_ . _ _ pa ,o,.. _"", ......... """_ --... ..,
-.... ...... _ _ ...... _ .. .... """"_ ....... _ _
W<" d"""'" .......... '....
_~

...

09< .<H ,.... 09<' '''''''''''''' _ ... ... _ _ 090..... _ _ ....... _
~

. ........ ' ........ ,", .. .,... """"""' ........... ......... , ... >«_

<
Abbildung 5.88 ..
Eine alternative lösung : CodaSlider 1.1.1 (http://www. ndoherty.
com/bloglca tegoryl coda-slid er,
linkcode 182), ebenfalls mit
jQuery realisiert.

•

_ b:""

.. . ..... ,ur... _ _ .................,.........
>u>:,..--JUO .. "'..... "'co . ......... _ ..... '"' ...... _ _
..........

,...,., . t ~f"'9>l_

~

........ -

>«1. ....... ............ Il<.00

", .....
........
r.g.t.> OSItI_"'\>ü ... • _ _ ·(..... _
ur .... _ ... ............' _LC<WW... ..
....."",
,..-"' ....... _ ......,.....
w,'*>-..
_ .-.
...... ............. ............ _ ..........
""'......

--_
_ .,_cu-..;__ ...... _,.. ,............... .. . . . . . __ .. _,
__,_- ,_._,,--

....
........ ..... .. ..._....... .......... _.........
......
..
- . . . _ . __ """'.""'*' ....
.. ..... _

'-_

....,.....

_-

~_

~

01'....... tod. _

........ 5 ... _ _ ........... .., .. ........ _

-

>

......

,,""- •• """""""' ... oll . . .....

.. _

.... . . ,,, ... .. ...... ..

·......,....1-·

5.4.8

Alle C55-basierten Tec hni ken im Überblick

5ämtliche C55-basierten Techniken - darunter auch die hier präsent ierten Met hoden - mit zahlreichen Bespielen zu ih rer Implementierung find en Sie auf den Sei ten «55 Showcase I> (http://
a/vit.de/css-showcase (Linkcode 183» sowie . 50+ Nice Clean CS5
Tab- Based Navigation 5cri pts« {http://ww w.hongkiat.com/ blog/
50-nice-clean-css- tab· based-ndlligation- scripts/ (Li nkcode 18 4»
und . Ul timate (55 Menus«: http://hiddenpixe/s.com/designer-anddeveloper-resources/ultimate- css-menus/ (Linkcode 185).

350

5

Navigation

....

-

I

--

---.........

'to'"'---.===. .,. . . . e

- "'-'

..., .......
...,

_.

..........

---

Toto .. om C
",'........- - ............... ' ..... !!".-..-"

"

- _.
-- ,-_.
-.. _ .
..
_

,~.

.

-

<-...

........ -.. ..

... .....,----,

~
~.~

....... """',._"

,

""'-,

CSS Tabs

,
....
b j .... T.........i

...

,..... ''''"0 ''''- ,...css T_ .. 1_

"""" ClaIII MI crnxnc

'-"'-'"'

......... tJ

>.

.- _-· _

"'"""

_

ßJ ..·· ' ·_ f _ ! ..-. .
_ _ ... on.r .....' ... _.-....

_
......
,"' ._-'"
--. . ......_
.... .. .•.... .._,.."""-

....-_._ ....

S"n.s "r Suckwf,sh
~_

'-'~'

'

~

.. "

,

~ ._-_.

.. Abbildung 5.89
Eine Übersicht von Techniken zur
Gestdltu ng vo n Ndvigdtionsmenus

auf (55 5howcase (httpH alvit.de/
css-showcdse (Linkcode 183))

5.4 (55 und Jdvi!Script-Ansätze

351

- __... .....

........ ..,," ........,...

,

. . .,..- .....

,

-

CSS TalJl ..-Uh Sublllu UJ

IEXlmplt Tlbs

-

I~

~

'1l'

-2

_

.....

M

UC' Y J/J utntS

I::::!I . - ~ '''-'-

,. ~

,_....... •

~"',

us

-

'fWH7V1!t'I'P 7

"" -,,, ".

7 ':

. - (j*'" ..... "'"".

I..... 'e<! 5 1;dinq 0 00.. tob>

• , . , .. 0-' . ... _

,. ••

~_

.. , . . . . . . , ..... ,

_.... _..............._--_..........."..........'.'.-;:;-;;;,. __. _-. ,
~

•
_"'o- _"'J

n.o ~ ~ o ,

- .. .. .....

_ _ .. ...,_... t"h

"

'"

w ..

..... ........ -

:t.~ ..

t

." 1

-_. _ -.. .
-

..".

"-456

BEREA ~

-.-

~-

352

5

Navigation

~

-....

-

"' Ir

'!" ~

5.5

I

Adobe Photoshop-Techniken

Ein wesentlicher Vortei l vo n C55-Techniken ist die Flexibilität,
die Webentwkkler dadurch gewonnen haben. Beispielhaft dafür
ist eine text basierte Navigationsleiste, die bereits mit wenig
(55-Code zu einem dynamischen grafischen Navigationsmenü
mit Hover- Funktionalitat erweitert werden kann. Wie Sie in der
Beschreibung der Technik (55 Sprites gesehen haben, genügt es
dafUr, mit der background-Eigenschaft zu experimentieren.
Und tatsächlich gehö ren textbasierte Navigationsleisten nicht zuletzt wegen ihrer Flexibilität - immer häufiger zu einem
Standardwerkzeug eines Web 2.0-Auftritts. Dabei geben sich die
Designer häufig nicht mit den relativ bescheidenen Gestaltungsmöglichkeiten von (SS zufrieden. Sie greifen zu den in Adobe
Photoshop gestalteten Grafiken, um etwa grafische Verläufe, einen
Aqua- oder Registerkarten-Look oder andere vi suelle Effekte in
die Navigationsteiste zu integrieren und dieser so mehr Glanz
und Realitätsnähe zu verleihen.
Dabei gibt es meh rere Techniken, die bei der Gestaltung von
NavigationsmenOs häufig angewandt werden. Ein Überblick Ober
grundlegende Techniken in Adobe Photoshop kann sich dabei für
jedes Projekt als hilfreich erweisen.

5.5.1

Abgerund et e Register ka rt en für die Text nav igation

Die Farbgestaltung von Registerkarten wird in der Regel bereits
bei der Erarbeitung des Seitenentwurfs festgelegt. Steht das
Farbschema für die aktive Rubrik (aktuelle Rubrik, also diejenige,

Der Beitrag .120 Adobe Photo·
shop Tlps. (http://salbd.com/

die gerade angezeigt wird), die passiven Rubriken (weitere neben
der aktiven Rubrik vorhandene Navigationsmöglichkeiten) und

dod21621120-Adobe- PhotoshopTlps) bietet eine Übeßicht uber

die Hover-Zustände sämtlicher Rubriken fest, m können die
Jewe iligen Hintergrundbilder mit Adobe Photoshop erstellt werden.
Vom Standpunkt der Benutzerfreundlichkeit empfiehlt es sich,

natzliche TIpps, Tricks, TastaturkOrzeJ und Ideen für Adobe
Photoshop.

alle Hintergrundbilder in ein Bild zu packen und die Position des
jeweiligen Bildes mithilfe der background- pos 1 tl on-Eigenschaft
{(SS Sprites) festzulegen. Die Anzeige eines passenden Hintergrundbildes wird so mit durch (SS geregelt.
Erzeugen Sie nun bitte inAdobePhotoshop ein neues Dokument
der gewünschten Höhe und Breite mit der Hintergrundfarbe , die
für das Navigationsmenü bestimmt worden war. Beachten Sie
dabei, dass bei bestimmten Techniken (etwa Sliding Ooors) das
Hintergrundbild hinreichend groß ist, um auch bei vergrößerten
Texten korrekt angezeigt zu werden.
Die Hintergrundfarbe können Sie im Menu EBENE ' NEUE FüllEBENE festlegen, indem Sie angeben, ob Sie eine feste Hinter5.5

-

-

• Abbild un g 5.90
Das Navigalionsmenü von Pindance .com erinnert an benutzerfreundliche Registerkarten.
Adobe Photoshop-Te<:hniken

I

353

grundfarbe (VOLLTO NFARBE), einen Fa rbverlauf (VERlAUF) oder ein
grafisches Must er (MUSTE R) verwenden möchten.
Fugen Sie nun ein abgerundetes Rech teck mit dem gewunschten Radius und der Farbe für passive Rubriken in das leere Dokument ein (ABGERUN DETES-RECHTECK-WERKZEUG). Den Radius der
.... Abbi ldung 5.9'
Die Hintergrundfaroe festlegen

Ecken kann man über das ent sprechende Feld im oberen Menü
fest legen.

Ö••"
~ . T.

~ .fGl:

~

.

Abbildung 5.92 ..
Auswahlen von .AbgerundetesRechteck-Werkzeug. In der linken
Toolbo)( in Adobe Photoshop

0 ...h••d-"'", ~'."g

-' • Q

{) 0..

.

~undot.. -J;:ocH:o<~-III"OI~""'-'!l

0 u\><.·....~otu;I

0

h
~

PoI,-""...WttluouD

'\ ..,....""mo.·"'ork""-'\l
ts'E~""'-"''''''

Abbildung 5.93 ..
Radiusangabe im oberen Menü

,. Abbi ldung 5.9 4
Hilfslinien zur besseren Kont rolle
der Bildgröße und einzelner Teile
des Bildes

354

I

5 Ndvigation

Vergrößern Sie die A nsicht um das Drei- bis Vierfache, um Einzelheiten detaillierter sehen und bei Bedarf korrigieren zu können.
Um di e Größe des Hint ergrundbildes genauer festzulegen, können Sie auch Hilfslinien verwenden (ANSIC HT ' NEUE HILFSLIN IE).

I

.. Abbildung 5.95

~~------------~

Abgerundetes Rechteck In Großaufnahm e: In Adobe Photoshop
wurde 300%-facher Zoom ein-

gestelll

Bedecken Sie nun die untere Abrundung durch eine neue Ebene

mit weißer Hintergrundfarbe, damit der Registerkarten-Effekt
erzeugt wird. Setzen Sie dafür eine horizontale Hilfslinie auf eine
linie, bei der die Abrundung beginnt und setzen Sie ein Rechteck
weißer Farbe auf den Canvas. Damit das Rechteck nicht bedeckt
wird, schieben Sie es nach vorne. Sie erreichen dies, indem Sie
die Ebene im Ebenenfenster über die anderen Schichten ziehen

oder den Shortcut ~ +

liliD + [IJ verwenden.
.. Abbi ldung 5_96
Eine horizontale Hilfslinie anbrin-

g"

••

-,

,._. . .

-.

....

"'- ,

O_n . " j + &

+. -_ .

,

__ ,

, 1;1 ••- -

:~
.~
... Abbild ung 5,97
Das untere Rechteck wird nach
vorne geschoben.

... Abbildung 5.98
Ein halb abgerundetes Rechteck

Verbinden Sie nun beide Ebenen (markieren Sie diese und verwenden Sie anschließend ~ + [1). Erstellen Sie anschließend zwei Kopien der Ebene, die für den aktiven und den HoverZustand dienen (EBENE DUPLIZIEREN) sollen. Setzen Sie alle drei
Bilder untereinander. Der Abstand zwischen den Bildern kann
sowohl null als auch wenige Pixel betragen. Es empfiehlt sich,
5.5

Adobe Photoshop-Techniken

I

355

die Abstände gleich zu wählen, damit Sie n achher bei der Posit ionierung des Hintergrundbildes die Abstände leicht er im Auge
behalt en können.

=--......

Abbildung 5.99 ..
Bilder untereinander ano rd nen
Gestalten Sie beide neuen Bilder entsprec hend dem Entwurf. Die
Hintergrundfarbe können Sie etwa über FÜllOPTION EN • FARBÜBERLAGERUNG ändern. Spei chern Sie das entsta ndene Bild, das
die drei halb abgerundeten Rechtecke enthält pixelgenau in ein
neues Bild - etwa im GIF-Format ab.

'.

Abbildung 5.100
Bilder gestalten

!

......... ,

..

Ein weiterer visueller Effe kt wird durch die VeMiendung von
Schatten erzeugt. Der gerade besu chte Seitenberei ch wird so
gestaltet, dass er im Vergleich zu den übrigen Elementen in der
Navigationsleiste t iefer zu liegen scheint. Erreichen kann man
diesen Effekt auf ZV</ei Arten.

5.5.2

TIefeneffekt für Navigations leisten
Um eine angenehme Seit ennavigation zu erstellen, kombiniert
man häufig Farbverläufe und eine Fullfarbe bei der Gestal tung
von Hintergrundbildern miteinander. Beim Darüberfahren mi t

356

I

5

Navigation

I

der Maus wird ein passiver Farbverlauf durch eine deutli che FOIlfarbe ersetzt.

UUI

.. Abbildung 5.101
Beispiel für den Tiefeneffekt

III~Ula
GrNStOOI'S ~

Erze ugen Sie in Adobe Photoshop nun ein neu es Dokumen t mit
einer Breite von 400px und einer Höhe, die der dreifachen Höhe
des Platzes entspricht, der den oberen Seiten bereich vom Inhaltsberei ch trennen soll. Setzen Sie die Farbe des Hintergrundbildes
für das Dokument auf Weiß.
Legen Sie die Hilfslinien auf den Canvas, damit Sie einzelne

... Abbildu ng 5.102
Hilfslinien anlegen

horizontale Blöcke voneinander unterscheiden können. Im Beispiel werden für das eigentliche Menü 32 px verwendet, die
übrigen 10px werden für den unteren Schatten, der anschließend in die Hin t ergrundfarbe übergehen soll, benutzt.
Selektieren Sie das obere Rechteck und erstellen Sie aus ihm
eine neue FOI'ebene mit einem Verlauf (EBENE ' NEUE FÜLLEBENE ' VERLAUF) . Als Randfarben des Verlaufs wählen Sie Farben, die Ihrem Entwurf ent sprechen. Im Beispiel sind dies die
Farben Weiß (RGB 255,255,255) und Grau (RGB 200.200,200) .
Verschieben Sie die Unterbrechung im Farbverlauf 50 lange, bis
der gewünschte Grad an Schattierung erreicht wird, und wenden
Sie den Effekt auf das Bild an .
:ierlauf;t)'p:~Bid
!3~t tt..g:

1100 ;TI

-.--

... Abbi ldung 5.103
Neue Füllebene erstellen

""

%

............~

r

lklterbractu-Q3n

ft

IKli:1oen tÜOjt eile lH:erh"e<h.r!;l mru. I
,

D

~ton: ~ %

'""'"
I

Lö9j);n

.. Abbi ldung 5.104
Randfarben des Verlauf.; wählen

Um den Verlauf besser vom Hintergrund abzugrenzen, verleihen Sie der Ebene einen Schlagschatten (rechte Maustaste auf
die Ebene FÜLLOPTIONEN • SCHLAGSCHAnEN) mit Deckkraft 50 %,
Distanz 1 Pixel und Größe 3 Pixel. Zusätzlich können Sie auch
den Ebenenstil KONTUR verwenden, bei dem Sie die Grenzfläche
genauer spezifizieren, beispielsweise extra verdunkeln, können .
5·5 Adobe Photoshop-Techniken

I

357

•.

....
_.._>J"---

-~- l!!!II~
--......
; -~ [;o"""J
"1........

C9 ~'

.., .-~

0._

Cl·'....... '·....... ·~~
o· ~
D ~.-..-..

........

1:1
_ _ _
. . .. ,
0_

a.. .. ~"

(3o>t4o.

"'~-, """"o.

Q<

1.......

1

EI""",.....,

•

.1

""'".. [;jjjj

..... r

l_

0" -

....-.'.1

1'.: """

'""n",,,"

. .. ..._.
."_
"'

8_

0_

..........

O' ~_ · ~ "' .lt~

C1 ..,.... _ .......

0 _ _ '_ ......"

0-

0_
0'-

-_.

......

........
_.1._.
...-

-

"'" ....
......
-

....

,

~
-

I"'

.

.

"-

,•

!
!

.

?i

IHr.....,

(/.N! "''' '

I
!

r

8 _~

•

0'"
"",_""
o ... __

~

CI .... • .......... ...,

Abbildung 5 .105 •
Ein Schlagschatten (oben) und
eine Kontur (unten) werden hlnlugefOgt.

Abbildung 5.106 .
Das Hintergrundbild für de n
passiven Zustand eines listenelements mi t Sc hlagschatten
Abbildung 5.107 •
Mit Hilfsli nien werden die
Abstande zwischen Bildern, die in
passivem (oben), aktivem (mitte)
und hcwer-Zustand (unten) sind.
pr.1zise festgelegt.

Selekt ieren Sie nun den Bereich, der unter dem Navigationsmenü
liegen soll, und setzen Sie für dessen Hintergrundfarbe den vert ikalen (90 Grad) Verlauf von einer hellen Grenzflächenfarbe zu
derjenigen Farbe, in die der obere Sei tenbereich übergehen soll.
Duplizie ren Sie nun beide Ebenen jeweils zweimal, um einerseits
den gewünschten Hover-Effekt zu erzeugen und andererseits die

358

5

Navigation

I

Rubrik. die gerade angeschaut wird, durch ein eigenständiges
Hintergrundbild helVorzuheben. Etwa durch einen anderen Farbverlauf oder ein Hintergrundbild mit einer VolJtonfarbe.

-

~

duplizieren

u..I'l-l

. .. !!!!! """ .~

g-

1== ---

g-

11 i _

o

' no_ e... zoll"'"

I

j _

p

__

o

i _

~

11

._ -..._.a.u"",
"

11

.......l""nt

"

I!

~

.
.
.
.

.. Abbildung 5.108
Ebenen fOr aUe Zustande

;

"' I!I
"' = -

o

Mit C5S wird anschließend ein schmaler Teil der Grafik als Hintergrundbild benutzt, das in x- Richt ung wiederholt wird. Um
einzelne Navigationselemente besser voneinander zu trennen,
fügt man an der rechten Grenze des Hintergrundbi ldes einen
schmalen grauen Streifen hinzu und lässt den Browser mit C55
den rechte n Teil des Hin tergrundbildes anzeigen. Dadurch wird
eine deutliche Trennung der einzelnen Rubriken erreicht.

Home

.10 ..... LI 1If1t,1

LOllin

• Abbildung 5.109
PasSiv\!, aktiv\! und HoverZustand\! In einem Hintergrund-

bild

.. Abbi ldung 5.110
B\!ISplel auf Roscripts.com

5.5.]

Regist erka rt e n

Besonderes beliebt sind bei Web 2.0-Designs hübsche und leicht
erkennbare Registerkarten. Ein eigenstandiges Hintergrundbild
wird dabei so gut wie immer für den gerade besuchten Seitenbereich reserviert. Der Rest soll unauffällig im Hintergrund bleiben und sich bei Bedarf (Hover-Effekt) hervorheben. Bei leicht
erkennbaren Registerkarten wird die Farbe des aktiven Naviga5.5

Adobe Photoshop-Techniken

I

359

tion sbereichs mit der Fa rbe des darunter liegenden Bereichs übereinstimmen und somit beide Bereiche ineinander fließen lassen.

isevenload ()
Abbildung 5.111 ~
Beispiel auf Sevenload.de
Erstellen Sie bitte ein neues Dokument mit der Breite 400p)( und
einer Höhe, die dem Navigat ionsbereich zusammen mit dem
darunter liegenden Bereich (24 p)( + 32 px = 56px) en t spricht.
Setzen Sie die weiße Hi ntergrundfarbe für den Canvas und kennzeichnen Sie die beiden Bereiche mit Hilfslinien .

. . . .. . . . . . . ·· ~1

Abbildung 5.112 ~
Der untere Bereich wird
selektiert.
Abbildung 5.1 '3 ~
Der untere Bereich wird
mit Farbe gefullt .

Füllen Sie den unteren Bereich nun mit einem Rechteck der
gewünschten Farbe (im Beispiel Rot , RGB 166,9,4). Wechseln
Sie nun zum Menü KANÄLE (FENSTER ' KANÄLE) und erstellen Sie
einen neuen Kanal, indem Sie auf die entsprechende Schaltfläche
klicken .

•

••
••

.• . . . . .....

....,

... Abbildung 5.114
Um einen neuen Kanal zu erstellen,
wird das !con im rechten unteren
Menü benutzt.

... Abbildung 5.1'5
Neuer Alpha-Kanal - Alpha 1

Wählen Sie nun das Polygon- lasso-W erkzeug in der linken Toolbar aus und setzen Sie dessen Farbe auf Weiß.

360

I

5 Navigation

I
r- : Io..t

~ . pc,,-.........
1!j:
;:J PooI~~."', . .'$ .. _1\\0.-..............

&. >I.
9.~.

O. ...

.

\ . T.
~. 13.

'--'.

0 0.

... Abbildung 5.,,6

... Abbild ung 5.'17

Auswählen des Polygon-Lasso-Werkzeugs

Hilfslinien

Zeichnen Sie nun eine Figur, die der Figur aus Abbildung 5.1 17
ähnelt . Zur besseren Symmet rie verwenden Sie Hilfslinien, wie in
Abbildung 5.116 dargestellt.

.. Abbildung 5.118
Die Auswahl soll eine Registerkarte formen .

Füllen Sie das Objekt mit weißer Hintergrundfarbe (rechte
Maustaste FLÄC HE FÜLLEN) aus.

.. Abbildung 5.119
Auswahl . Flache füllen«

.. Abbi ldung 5 .120
Die ausgewählte Fläche wird mit

weiBer Farbe gefüllt.

5.5

Adobe Phot oshop-Techniken

I

361

Entfernen Sie die Konturen des Bildes, indem sie zum Beispiel auf
einen Punkt auf dem Canvas klicken. Wählen Sie in der Rubrik
FILH:R • WEICHZEICHNUNGSFILTER • GAU SSSC HER WEICHZEICHNER

,. Abbildung 5.121
Gaußscher Weichzeichner im
Einsatz

und wenden Sie diesen mit Radius 6.0px an.

zu glätten und deutlicher hervortreten zu lassen, nehmen Sie bitte nun eine Tonwertkorrektur des Bildes vor. Das entUm das Bild

sprechende Fenster wi rd mit dem Shortcut ~ +

-_.

l1J geöffnet.

T,n .. "'" .......

~,~,

~I

1"""""_"'"OJ 0

] ,po _

I

I

(J(

1Hi!!tW«l 1
I ,Olrt.
Iljpoawn .

b lli lJ ILULl II,uJ
•

I

I

6'*'

[~

..

" ...,
.w

•
... Abbildung 5 .1l~
Tonwertkorrektur

01] ..

~O;",," '

.~H LI., I
" " Ir"1lJ'-O

""""

uJ =

~

e

j

Q

c::i!i:I

~

"

Drucken Sie die drei Regler so lange zusammen oder entfernen
Sie den grauen Punkt so lange, bis die gewünschte Schärfe eingestell t wird (siehe Abbildung 5.122).

Abbildung 5.12] ..
Das fertige Sild

Verändern Sie gegebenenfalls die Form der Registerkart en. Häufig werden Sie nach der Verwendung des Gaußschen Weichzeichners etwa die Breite des unteren Bereichs des Bildes vergrößern
wollen. Vergrößern Sie den unteren Bereich dadurch, dass Sie
ihn mit Hilfslinien genauer selektieren und mit der Option FRE I
TRANSFORMIEREN (rechte Maustaste) anpassen. Auch danach
können Sie noch für eine bessere Schärfe die Tonwertkorrektur
velWenden .

362

I

5 Navigation

I
-__-....

... Abb ild ung 5 .124
Selektion des unteren Bildbereichs

Um das Objekt als eine Ebene verwenden zu können, selektieren
Sie bitte die Figur, indem Sie mit gedrückter [E!i]-Taste auf den

_

~

Kanal Alpha 1 Im Kanalmen ü klicken. Mi t de r rech t en M austaste
fUgen Sie das Objekt als eine neue Ebene hi nzu. Platzieren Sie
das Objekt über dem berei ts vorhan denen Block m it der Hin t ergrundfarbe und füllen Sie es mit der gew ünsc hten Farbe aus.

.......

Au. .... j ...,.;"d. ~ "

....",.,..-"""""'"'•..

... Abbildung 5.125

Selektion des Objekts : Es genügt ,

... Abbild u ng 5.126
Erst ellen einer neuen Ebene

auf den Alpha 1-Kanal zu klicken,

während (Sltg) gedrückt Ist.

•

liiii'bIiil

~ ! -:o.nd>on
~ , ""''r. ,

w.,.. ...... _...,,. ,.

... Abbildun g 5.1 27

Das Objekt wird auf den Canvas über-

<t . .... "...eh (cpo

ct . ... .... a. .......,..,.;*'"
Nouo Cbono. •

• Abb il dun g 5.129

führt.

Auswählen der Farbe

... Abb ildun g 5.128

Oie Registerkarte soll mit
einer geeigneten Farbe gefärbt
werden.

5.5

Adobe Phot oshop-Techniken

I

3 63

A Abbi ldun g 5 .1)0
Die F:trbung ist abgeschlossen.

I,.,

l00 ~

A Abbildu ng 5.1)1
Die Registerkarte im
Detail .

(11,e"e 1. RC,AIB)]

.....,, [!EJ[ii .J
A A bbildun g 5.133
Der Radius der Abrundung beim
Rechteck darf 2 bis 3 px bet ragen.

A Abbi ldun g 5.1)2
... und im Menü

Passen Sie gegebenenfalls die Posi t ion des Objekts an. damit es in
den unteren Block zu fließen scheint .
Um die passiven Regi sterkarten zu erstellen, erzeugen Sie ein
abgerundetes Rechteck mit dem ABGERUNDETES-RECHTECK-WERKZEUG in der Toolbar. Der Radius der Abrundung darf bescheiden
bleiben - mit 2 bis 3 px sind Sie gut bedient.

' . T. )

~~

[,1.)'.

~)

"

o Iltchleck-W""_
Q

~

..-~ ••k-W.rI<.t'"9

O E~ 'W ...k..u;

o

~n'Wtok't"9

" l""'-hnor-w.n.-.g
C/ E~m-W_g

A Abbildung 5.134
Auswahl des _Abgerundetes_Recht_
eck-Werlaelßs. in der TooJbar

Abbildung 5.136
Auswahl der Fülloptionen bei der
Ebene der passiven Registerkarte

A

.. Abbildun g 5.1)5
Platzieren des Rechtecks auf
den Canvas

Platzieren Sie das Rech t eck di rekt neben der Regist erkarten und
schieben Sie die Ebene des Objekts hinter die beiden anderen
Ebenen.
Um dem Rechteck ein passendes Registerkarten-8i1d zu verleihen, bet rach ten Sie nun die Fülloptionen des Objekts (Klick mit
der rechten Maustaste auf die Ebene in dem Ebenenmenü).

-. ,
--,.-,
-

"-

....... ....

c .... . I

Abbildung 5.137 ..
Die Kon t ur des Bildes wird
festgelegt.

364

5

Navigation

••
-J "

I"

-

•

•

Im Stil KONTUR verleihen Sie dem Rechteck eine Größe von 1 px.
die Position AUSSEN und die gewünschte Farbe (im Beispiel RGB
208,208,208) .

I

-

· . ..

Im Menü VERLAUFSOBERLAGERUNG wählen Sie einen Farbverlauf

(im Beispiel: von RGS 250,250,250 zu RGS 196,196,196) und
wenden diesen vertikal und linear an.

-

- ...- -El-____
""_ .1

._-0)-

-

.1

• '

... Abbi ldun g 5.' 38
Verlau f5überlageru ng

~

,.......

Anschließend erzeugen Sie einen SCHArrEN NACH INNEN mit einer

Deckkraft von 10%, Distanz 0 px und einer Größe von 15px. Um
die Qualität zu verbessern, wählen Sie GlÄTIlß\JG und eine pas-

.. Abbildung 5.139
Schlagschatten

sende Kontur, zum Beispiel GAUSSSCHE NORMALVERTEILUNG.

Dllpliziert man die erzeugte Rubrik mehrmals, so erhält man
ein Registerkarten-basiertes NavigationsmenO (Siehe Abbildung

5.136).
Man kann nun die passiven Registerkarten nach unten schieben, um den aktiven Tab stärker heNortreten zu lassen.

Zur Umsetzung eines dazugehörigen Navigationsmenüs mithilfe
von CSS und (X)HTMl reicht das obere Bild noch nicht aus. Die
meisten Zustände, die im Menü vorkommen können, werden
abgedeckt; was noch übrig bleibt, sind die Fälle, in denen eine
hervorgehobene Registerkarte sich ganz links oder ga nz rechts

.. Abbildung 5.14°
Das Ergebnis: Ein Menü, das an
die gewöhnlichen Registerkarten
erinnert. Passive Registerlc:arten
lassen den aktiven, roten Tab hervortreten.

5.5 Adobe Photoshop-Techniken

I

365

befindet. Realisieren lässt sich das Menü mithilfe der SlidingDoors-Technik. Dabei ist es wich t ig, den Schni tt so zu wählen,
dass das gesamte Bild anschließend passt .

... ,_.
-...............
-- - -- - -- - ................

................

.. Abbildung 5.141
Schnitt der Bilder für die S liding-Doo~-Technik

Auf Sevenload.de wird das Menü mithilfe von Tabellen realisiert ;
diese legen die Breite des Menüs fest und fügen die jeweiligen
Teilbilder nahtlos aneinander zusammen. Angesichts eines layout s mit fester Brei te, das auf der Sei te venNendet wird, ist dies
eine durchaus denkbare lösung.

--

_wn .. _
... Abbildung 5.141
Schnitt der Bilder fü r die tabellenbasierte Tech nik

Achten Sie außerdem darauf, dass die Breite des ro t markierten
Bereichs für die Textbeschriftungen Ihrer Rubriken komplett ausreicht. Alternativ wird man mit (S5 Sprit es die Breite des hervorgehobenen Bereichs nur mühsam festlegen müssen; auch auf
die Flexibilität der Anzeige bei der Skalierung der 5chriftgröße
werden Sie verzichten müssen.
Sowohl beim tabeUenbasierten Ansatz als auch bei Sliding
Doors ergibt sich ein elegan tes und übersichtliches Bild.

-.. Abbildun g 5.143
Das Erscheinungsbild des Navigationsmenüs bei verschiedenen Hervorhebungen

366

I

5 Navigat ion

5.5.4

I

Bildbasiertes Navigationsmenü

Sofern möglich, sollten reine bildbasierte Ansätze bei der Gestaltung von Navigationsmenüs vermieden werden, da sie Seiten besuchern keine Möglichkeit bieten, Texte, die in Bildern abgespeichert sind, zu vergrößern . Somit ist beim Design von bildbasierten
Navigationsmenüs insbesondere auf die Schriftgröße zu achten.
Zu groß ist in der Regel besser als ZU klein. Dennoch sollte eine
Navigation den Leser nicht mit riesigen Überschriften _erschla_
gene.
Erzeugen Sie ein neues Dokument und füllen Sie dieses mit
weißer Hintergrundfarbe. Setzen Sie ein abgerundetes Rechteck
auf den Canvas. Die Breite des Rech tecks sollte der Breite des
Navigationsmer,üs entsprechen, ebenso w ie seine Hintergrundfarbe (im Beispiel RGB 166,236,124). Damit die Abrundung besser zur Geltung kommt, fügen Sie als Ebenenstil einen Schlagschatten mit eine Deckkraft von 15%, einer Transparenz von
50 % (Überfüllung) und einer Größe von 5px hinzu, damit die
Randkontu ren nicht zu stark auffallen.
Für den inn eren Schatten wählen Sie eine dunkle Abstufung
der gewählten Hintergrundfarbe (z. B. RGB 157,23 4,B6) und
geben Sie dem inneren Rand die Deckkraft 75 % und eine Größe
von 4 px . Die Werte für die Distanz und das Unterfüllen werden
auf null gesetzt. Um den Hintergrund lebendiger aussehen zu lassen, setzen Sie bei der Verlaufsüberlagerung die Deckkraft auf
15% . Anschließend geben Sie der Figur einen weißen Rahmen
der GrÖße 1 px im Stil KONTUR.

......

_..

r
~

11_-

r

~

.

-... Abbildung 5.144
Ein Schlagschatten wird
hinzugefügt.

t-----Itl- : ;: ~

1_

-

::::....

-

-

"':.rl! -

..
.

... Ab bildung 5.145
Ein Schatten nach Innen wird
hlnzugef(lgt.

... Abbildung 5.146
Verlaufsüberlagerung

t

.L.

... Abbildung 5.147
Markierung der Seilenbereiche mit Hilfslinien

... Abbildung 5.148
Eine Kontur soll das Bild besser
hervorheben .

... Abbildun g 5.149
Ein Navigationsmenü mit abgerundeten Ecken

Setzen Sie nun die Verweise des Navigationsmenüs auf den Canvas, indem Sie einen Unk erstellen, ihn entsprechend Ihrem Entwurf gestal ten und den Stil durch Duplizieren auf alle anderen
Verweise übertragen. Dabei kann es sinnvoll sein, den Verweisen eine Kontur zu verleihen und einen leichten Schlagschatten
hinzuzufügen, damit der Text gut lesbar wird . Verwenden Sie

5.5

Adobe Photoshop.Techniken

I

367

auch Hilfslinien für die Positio nierung von Verweisen, damit die
Abstände zwischen den Navigationspunkten gleich groß sind.
Abbildung 5.150 ~
Der aktive Bereich wi rd gelb
hervorgehoben.

Der akt ive Sei tenbereich kann zum Beispiel durch die Wahl der
Farbe, mi t der ein entsprechender link gestal tet wird, gekennzeichnet werden. Im Beispiel geschieht dies durch die Farbe RGB
255,248,130.
Abbildung 5.'51 ~
Rubrike n werden mit eine r
sanften Hint ergrund faroe
versehen.

1

11

11

11

11

Abbildung 5.152 ~
Darstellung des Menüs ohne
Hilfslinien.

Beim Darüberfahren mit der Maus soll ein angenehmer HoverEffe kt erzeugt werden. Dies lässt sich durch eine »Beleuch tung«
des jeweiligen Navigationspunktes mit einer helleren Hintergrundfarbe erreichen. Daf ür setzt man mit hilfe yo n Hilfslinien
Rechtecke als neue Ebenen auf den Canvas, setzt ihre Transparenz auf 30-50% un d schiebt sie über die ande ren Schich ten, um
somi t Transparenz zu erzeugen.

00-_---

[===~

0-D_

..... ~ ...

c_
:::,

Q

o

o

-

c-

e_

~"
~

I
Abbildung 5.153
Verlaufsüberlagerung fü r die Hin tergrundbilder

.A

Abbildung 5.154
Der Verlauf soll von Grün nach Transparen t gehen.

.A

Abbildung 5.155 ~
Das Res ultat der Verlau fsuberlageru ng

Zusätzlich kann man eine Verlaufsüberlagerung einsetzen, um das
Hintergrundbild sanfter und nicht so aufdringlich wi rken zu las368

I

5 Navigati on

sen. Dafür erzeugt man einen Verlau f und lässt die Hintergrundfarbe transparent zu Weiß verlaufen.
Damit der akt ive Bereich sofort sich tbar wird, fUgt man ein
Rechteck um ihn herum, indem man den Schlagschatten sowie
die Konturen festlegt und eine weitere Verlauf~berlagerung einfügt.
Das Ergebnis ist ein übersichtliches Navigationsmenü in ange-

... Abbildung 5 " 56
Schlagschatten fur den aktiven
Bereich

nehmen Farbtönen .

... Abbil dung 5.' 57
Endergebnis: Ein NavigationsmenO in angenehmen Farbtönen. Die
zweite Selektion soll beim Hovern des Bereichs angezeigt werden .

Da das Navigationsmenü bild basiert i st, werden die Bilder mithilfe der ba ckground -Eigenschaft in (55 als Hintergrundbilder
einer ungeordneten Liste eingesetzt. Die drei Zustände der Bilder

... Abbildung 5"5 8
VerlaufsOberlagerung für den
aktiven Bereich

(akt iv, passiv, hover) werden in einer Matrix abgespeichert, in der
mit dem background- pos f t 1on-A ttribut navigiert wird.
Diese Übersicht grundlegender Adobe Photoshop-Techniken
soll nur gewisse Richtlinien aufzeigen. Mit den oben erwähnten
Techniken lassen sich beliebig komplizierte Menüs gestalten , die
Sie mit C55-Techniken in Ihren Projekten direkt umsetzen können.
Dabei ist insbesondere zu beachten, dass ... hübsch . nicht unbedingt mit . benutzerfreundlich. gleichzusetzen ist. Außerdem ist
es wichtig zu verstehen, dass der Inhalt der Menüs - also die Ver-

- .'
l l-=
fJ-=~
~
-=-:~~1~
... Abbildung 5.159
Kontur für den aktiVen Bereich

weise und die Kategorisierung der Seitenrubriken - wenigstens
genauso Wichtig ist wie die Form, in der er präsentiert wird.

5.6

Tag Clouds

Fragt man nach einem typischen Merkmal von Web 2.0-Anwendungen, so erhält man in der Regel das Stichwort Tagging. Und
tatsächlich kann Tagging - ei ne zweckmäßige Versc hlagwortu ng
von Inhalten - bei einem vernünft igen Einsatz zu einer schnelleren und effizienteren 5eitennavigat ion verhelfen. Dies wissen
Entwickler zu schätzen und bauen die Funktionalität gerne und
großzügig aufWebseiten sozialer Netzwerke und bei interaktiven
(Globale Navigat ion)

Online-Diensten ein.
Dabei wird die Tatsache ausgenutzt, dass eine Navigationshilfe

Globale NavIgation entspricht der

sich im Allgemeinen nicht auf eine globale oder lokale Navigation - im Rahmen der Seitenhierarchie - beschränken muss . Die

lok8le Navigation etwa der Navi-

gängige Methode, beide Navigationen zu vere inen und dem Nut-

NitJlgatlon In Hau ptkategOrien :
gation in Inhalten einer gewM1lten
Rubrik.

5.6

Tag Clouds

I

369

zer dadurch ei ne bessere Übersicht zu verschaffen, bieten soge~

DI E 50 AK ' L1El l9 TEN

SCHtAGWÖHI ER.
):

nannt e Tag Clouds.

Afgililliistan

'~~1

Aig hanls t .... klleg

.'uU" "' .. u·) ß~ y em I!.u "

!; ... '1,

I!Icre~,..~'t1e'J-Q

IIO-~I,II

M' r~~."'lM··~h

",,'1"~

&u

.. ,l~'1>

'

Champions

league
:~.

Ch ina Rog"" Ci<:. , c t ... .I,..

E ~ OS

( .. ,., ,, .
E""'~", io<1

SCO\I

Bayern
F.
I,

,

n

c .. 1

EU

1~

E..

Fe
r-'üllchen

CDr1 \~ "\

I" •

I

w'h Fri edens t ruppen
Gipfelkonferenzen

Q-ot'alnl""""" I-Itl rn blll'9 ....... n
~ ~"om

r

~0.01."
.Il.rd-,
I r*~"!Q Ir~
Tral ien

J'O'
~

.... ·

t.• , ;rOP:
Kino/TV
Kima
I~r"""w~ hl Ml"lsbrll ur:h Mord
To tsd'f'Q M".,h•• l! b .",~,b. Rc ol
~ ~nten pol t ~

51'1)

5 (u l <b_.., <1.., U" FA'~<JI,..1
V o:n ~ hI . pplO ..u ~ ; ncI .r

USA

Madrid

_ _ _ "",hlttcl\n

art _ IlJStrtIIoa

_ bllthd ay -.. _ _

bLoe _

canon _

~M ~"",go

:>aby _ _ _ _ beach _
callforlllil ..........". ' - ' C8Mda
ch'lla chrbtmas "'"'" ;tty. _ _ ~_tf1 _ _
bw

.., .. Oo!i tJ1llland etJrope family leib"" 1Im1lorid. nower f10wen lood
fnmce fnend s ,...,

gennany;;r. ... v- 11'"" _
_ _ ___ .... Ilaly jnpan ..., _

~ ~

_ _ hoIiday _ _

_

. .... - . o p t " "

"' ~ "'""""

_

ne ...

..,0 _ .. _--.-.

music Ilature new newytrt _ ... 111gb! n koo nyc .. _ pans park
pa rty people _ _ _ _ portra~
to<W _ ..., sanfrancisco
_
N' ....,.. _
sky $/I(IW !IP~~ ~ tl_ summer _ SlßSet
llitlwan _
- . . , tat.yo ___ travel oe- ~ trip Wo _
usa
vacalion _
... _
water wedding _ willer ,.... _ .....

r"" .-

... Abbildung 5.161
Au f Flickr werden die populärsten Tags nur durch die Schriftgröße
hervorgehoben .

... Abbildung 5 .160

Tag Clouds auf Spiegel.de. In
einer Linkliste werden die Schlüsselwörter zu den aktuellen Themen des Tages zusammengestellt
und abhängig von ihrem Gewicht
hervorgehoben.

Darunter versteht man eine Zusammenstellung von Tags, die man
jeder Seite bzw. Jedem Beitrag eines Weblogs verleiht . Die Logik
dahint er ist ziemlich intui t iv: Je häufiger ein Tag unter sämt lichen
SChlagwörtern vorkomm t , desto höher ist sein Gewicht f ur den
gesamten Webauftrit t. Stellt man sämtliche Tags als Verweise auf
Beiträge in einer Liste zusammen, so ergibt sich eine Übersicht
uber die Gewicht ungen der Sei te.

...,........,ot.. ".c.".', o,--,

Abbildung 5 .,6l tUrn populäre Tags hervorzuheben,
muss man nicht unbedingt mi t
Schriftgröße arbeiten. Auf http://

www.posltivespaceblog.coml
archives/how, ro, crea. re,a, tag'grid,
and, evolve, pasr, rhe, doud/ wird
erläutert, wie man Tags in einem
Raster platziert und populäre Tags
durch Farbe kennzeichnet. Dies
ist krea tiv und ungewöhnlich.

W •• Do'1I""R

--....
,

-

......, -

..

~

_

........... ..

,"

-

Um das Gewicht von Tags stärker zum Ausdruck zu bringen, werden sie in der Liste mit unterschiedlicher Farbe ode r Schriftgröße
gestaltet - ent sprechend ihrem Gewicht. Übe r die resul t ier ende
Link-Liste können Sei tenbesucher dann schnell zur Seitenhierarchie ge langen, da nicht uber vorgegebene Rubriken, sondern
uber eigent liche Themengebiete der Seite navigiert w i rd. Diese
370

5 Navigation

I

Art der Navigation kann unter Umstanden sinnvoller sein als das
übliche Navigationsschema. So können beispielsweise Inhalte
gefunden werden, die sonst nicht gefunden worden wären, oder
auch Informationen, die gesuchten Inhalten ähnlich sind. Demzufolge vereinen Tag: Clouds beide Navigationsmöglichkeiten,
indem sie Seitenbesuchern einen direkten Zugriff auf die Inhalte
eines gewünschten Themas anbieten. Das Ergebnis ist eine übersich tliche und effiziente Navigationshilfe, die insbesondere durch
die direkte Verknüpfung der Themen (und nicht der Rubriken)
mit den Inhalten den konventionellen Seitennavigatlonen weit
übertegen ist.
W as ist b eim Taggin g zu beac hten ? I Aus der Sicht des Seitenbet reibers liefern Tag Clouds zwar Vorte ile für den Anwender,
doch bei eine r ungeschickt en Ve rschlagwortung von Inhalten
können sie auch für Verwirrung sorgen. Um dies ZU verhi ndern, ist
es sinnvoll, aus mehreren Wörtern, die gleiche Bedeutung tragen
und im Hinbli ck auf die Thematik der Seite nicht unt erschieden
werden müssen (etwa »design«, »designs«, »web-design«, »web
design«), genau eines zu wählen und dieses dann im Folgenden
konsequent zu verwenden.
Dabei sollen die Tags nicht zu allgemein gewählt werden : Sie
sollen präzise genug sein, um dem leser den zu erwartenden
Inhalt anzuzeigen. In diesem Kontext kann die Verschlagwortung
mit dem In haltsverzeichnis eines Buches verglichen werden - und
eben in diesem Sinne ist sie auch zu gestalten.
Umset zu ng von Tag Clouds f ür Ihre Proj ekt e I in der Regel
werden Tag Clouds nicht als Ersatz für die konvent ionelle Seitennavigat ion verwendet, da die meisten Seitenbesuche r sich daran
im laufe von Jahren gewöhnt haben . Stattdessen dienen sie häuftg als eine nützl iche Ergänzu ng, die eine alternative Navigatiooshilfe bereits tellen solL
De r Platzierungsort für Tag Clouds wird in Abhängigke it von
der' Fw,kt ionen gewählt, die sie übernehmen und zu erfüllen
haben. Bei großen Projekten können Tag Clouds den mittleren
oder oberen Seitenbereich ein neh men, um etwa als ein dynamisches Stichwortverzeichnis auf der Startseite zu dienen . Sie
können aber auch eine begleitende Rolle übernehmen und den
Seiteninhalt im linken bzw. rechten Seitenbereich unterstützen.
Gewisse Muster und Schemata lassen sich dabei nicht erkennen.
Im Endeffekt kommt es auf die Besonderhei ten jedes einzelnen
Projekts an.
Tag: Clouds werden meistens nicht manuell erzeugt, sondern
durch eine moderne Web-PubJishing-Engine, ein Conte nt-

Tag Clouds verschaffen einen
zus.1tzlichen überblick ober die
Themengebiete einer Seite. Sie
sind als Ergänzung zur konventionellen Seitennavigation und
nicht als Ersatz zu verstehen.

5.6

Tag Clouds

I

371

Management~System

oder durch Weblog·Software generiert.
Das Tagging an sich wird bei der Publikation von Inhalten vom
Autor vorgenommen oder der Engine überlassen. Bei jedem neu
veröffentlichten Beitrag werden die Tags mit neuen Gewichten
versehen und das Ergebnis in neuer Form auf den Seiten des
webauftritts präsentiert.
In gängigen Engines wie etwa WordPress, ExpressionEngine
oder Textpattern können Tag Clouds durch entsprechende Erwei·
terungen oder Plug·ins installiert werden.
Tag Clouds bei W ordPress, Express ionEn gine und Textpattern I Unter den vielen Plug-ins, die eine dynamisch aktualisierte
Tag Cloud s-Navigati on bereitstellen, zeichnen sich insbesondere
drei Erweiterungen aus. Sie stellen weitere nützliche Funktionen
und Anpassungsmöglichkeiten zur Verfügung, die über die Funkt ionalität hinausgehen.
Heat Map Plugin (http://engadgeted.net/projects!wordpressheat-map-plugin (Linkeode 186» ermöglicht eine bessere Kon trolle über die Ansicht und Zusammenstellung von Themen eines
Blogs. Sowohl die Schriftgröße als auch die Farbgestaltung unterliegen vollstän dig dem Geschmack und Absichten des Designers.
Außerdem lässt sich die Anzahl der angezeigten Kategorien festlegen. Irrelevante Tags können mit einem Filter aufgefangen und
rausgefiltert werden.
Alternativ können Weighted Category Tag Cloud (WCTC) (http://
www.kI3tte.del wordpress -pi ugi n slweigh ted-ca t egory- t ag-c/oudl
(linkeode 187», Simple Tags (http://wordpress.orgiextend!plugins/simple-tags! (Linkeode 188» und Configurable Tag Cloud ((TC)
(http://wordpre 55. org/ extend!pi ugi nslconfigurabi e- t ag- cl ou d- wi dget/(Linkcode 189» verwendet werden. In diesen Erweiterungen
kann der Seiten betrei ber beliebige Formatierungsvorlagen vorgeben und die Präsentation der Tag Clouds an das Design seines
Webauftritts anpassen.
In ExpressionEngine konnte man Tag (Iouds bis dato lediglich mit dem SolSpace Tag Module (http://solspace.com/sojtware/
detailltag/dmodufes, Linkeode 190) erstellen. Das Modul ermög licht eine leichte und flexible Anpassung des Designs und eine
absolute Kontrolle über die angezeigten Verweise. Das Angebot
des Moduls unterscheidet sich nur wenig von entsprechenden
WordPres s-E rw ei teru nge n .
In Textpattern kann die Tag Cloud~Navigation über die Plugins tru_tags (http://tex tpatterll. orglplugins!584Itw_tags (Lin kcode 191» oder rH_unlimited_categories (http://wilshireone.coml
textpattern-plugins/rss-unlimited-categories (Linkeode 192» vorgenommen werden.

372

I

5 Navigation

I

Moderne Web 2.0-Dienste leben von einer inhaltsbezogenen
Verknupfung ihrer Inhalte. Tag Clouds stellen dabei ein mächtiges Werkzeug dar. mit dem sich einerseits Themengebiete
und Inhalte. andererseits aber auch Nutzer und Webressourcen
zusammenführen lassen . In dieser Hinsicht sind sie bei der Erarbeitung von Entwürfen zu betrachten und in der Praxis in einem
vernunftigen Maße einzusetzen.

• ,.
'"

5.7

"

w

Favicons

Eine weilere typische Erscheinung in der Designszene des Web 2.0
ist die Se itennavigation mithilfe von sogenannten Favicans. So
bezeichnet man 16)( 16p>c-große Icons, die man im Browser
beim Besuch einer Seite in der Adre sszei le zu sehen bekommt.
Favicons dienen dem Zweck, in der Lesezeichenliste (Favori ten)
leicht auffindbar zu sein und sich durch ein indi viduelles Logo
auszuzeichnen. Auch tauchen sie unterWindows beim Speichern
einer Seite auf dem Desktop auf.
In der Regel werden sie in Übereinstimmung mit den Farbtönen und dem logo des Webauftritts gestaltet. Da die Besucher
der Sei te mit dem je-.veiligen Favicon vertraut sind, können sie
dieses auch auf einer externen Seite erkennen .
Eine Zusammenstellung von Favicons erzeugt eine kompakte
Übersicht von weiterführenden Ressourcen (link-liste, auch
Blagroff genannt). Diese ermöglicht eine schnelle Navigation.
ohne dass über die ganze Seite hinweg gescrollt werden muss.
Diese Art der Navigation wird meistens für die verlinkung von
externen Webseiten mit ähnlichen Inhalten verwendet, die sonst
mit üblichen Verweisen zu viel Sei tenplatz beanspruchen würde.
Sie empfiehlt sich überwiegend für Sei ten, deren Leserschaft die
aufgelisteten Ressourcen zum großen Teil bereits kennt.
Favicons sind typisch für Weblogs und private Wehauftritte.
Bei größe ren Projekten finden Sie keinen Platz. da sie nicht
deskriptiv genug sind und einen unerfahrenen Nutzer eher ver·
wirren. Am häufigsten findet man 16)( 16p>c-Bilder im linken
und rechten Seitenbereich unter der lokalen Navigationshilfe,
wie sie zum Beispiel durch übliche Navigationsleisten gegeben
wird. Auch eine Kombi nation von Tag Clouds mit Favicons ist
nicht untypisch. Dennoch sind beide Techniken mit Vorsicht zu
behandeln . Sch ließlich ist eine Navigation nur effizient. solange
sie dem Anwender eine leicht erkennbare und ubersichtliche Orientierung liefert.

16px
... Abbildung 5.163
Favlcons Im Überblick

W F. Yicoro -

WI<~ t ..... &- ~ydll

,.. 1.-!. ( ... VI

dVl

... Abbildung 5.164
Favicons befinden sich links von
hinzugefügten lesezeichen . Beisplelln Mozi/la Firefox

,-_... _--._-•
----- -- ...
.. .. _.....
A_""""'_.
-._- .,.,.---.,,r'&'.....,""--~-

•

<1«

__

-_

.'-·Wlo<>oo~N

Favicoo

~

__ .•'_01_

.. A bbi ldung 5.165
Favlcons Im Internet Explorer 7

... Abbildung 5., 66
Favicon.Navlgation bei
Asemota.de

5.7.1

Favicon s erst ellen
Beim Design von Favicom stehen dem Designer grundsätzlich

Ein Interessanter Ansatz Ist der
dynamische Einbau von Favicons
direkt neben den Textverweisen auf die en tsprechenden
Seit en . Wie das geht, erfahren
Sie auf der Seite http://www.

askt hecssguy. comll 006/12/
hyperflnk_cues_w/th.jav/cons.
html (linkcode 193).

~

......
_.-

..

--. -~-

........
~-

"
" """.-.a1
~._"" ...
•
~.~

,..,.

~~.

. . 'Y._
• ..., ... 1..

.. Abbildung 5.,67
Ein neues Fenster fOr das
Dokument öffnen

zwei Optionen zur Verfügung. Eine Möglichkeit ist, ein eigenständiges Design mit einem Bildbearbeitungsprogramm zu entwerfen. Die andere lautet, einen der vielen Fav icon -Generatoren
zu Rate zu ziehen. Diese können 16 x 16px-große tcons blitzschnell online erstellen.
Beim Entwurf von Favi cons in Adobe Photoshop folgt man
einem si mplen Schema: Um ein möglichst klares Bild zu erzielen , modifiziert man das Bild in einer Großaufnahme und verfolgt
Änderungen direkt in einer Kleinaufnahme nebenan .

Sc hritt für Schritt: Favico n gest alt en

D

Favicon erstellen
Erstellen Sie ein neues Dokume nt und wählen Sie als Größe
16 x 16 px (oder größer bis zu 64 x 64 px). Öffnen Sie ein zweites
Fenster mit dem gleichen Dokument, indem Sie FENSTER •
ANORDNEN ' NEUES FENSTER FüR .. ausführen.

Abbildung 5.,68 •
Zwei Fenster des gleichen Dokuments nebeneinander gest ellt

•

••

[ \O;;rq!b! ped-!m. .•

Hn~ ._

Abbildung 5.,69 •
Ein neues Dokument der Größe
16)( 16px wird in Adobe Photoshop er>tellt.
374

I

5

Navigation

Flrbl!rO'. [ ~ E<:Co4.9!i6-J.l
_1011l'6I"011,,,,, I I) JallfltO<tl

•

I

Stellen Sie das neue Fenster neben das ursprüngliche Dokument.
Vergrößern Sie im _unteren_ Fenster das Bild bis zur Max imalgröße, indem Sie 3200 % Zoom einstellen, bis es teiJo.Neise bedeckt
wird. Nun kann man Jedes Pixel mit Bleistift einzeln zeichnen, die
Konturen des Favicons festlegen und das Ergebnis direkt im rechten Bild sehen .
Steht das Bild fest, so muss es in das . ieo-Format exportiert
werden, um anschließend von BrOW5ern erkannt zu werden .
Allerdings kennt Adobe Photoshop das .ieo-Format nicht und
kann demzufolge auch keine Icons abspeichern . Abhilfe liefert
das kostenlose Plug-in Telegraphics (http://telegraphies.com.aul sw
(Unkcode 194».

-[
F_.w.
_

I

',..

.......'""'\.

.. 14I'l>0l

-'----

--------==
H;Ioo, L5 PboI

-" ~ P". J
HN,

~

Pool

!I

-,~

Q,Jok',

F7~orlol...

_.

~.~
PI,~

... Abbi ldung 5.170
_Bikubisch sch<lrfer . wird beim
Speichern der Datei In Adobe
Photoshop eingestellt.

j
• Abbildung 5.'17'
Ein blau-grüner Regens chirm mit
PiKein als Favlcon .

Bei größeren Icons sollte man zur besseren Qualität der Bilder die
Option BIKUBISCH SCHÄRFER (BICUBIC SHARPER) beim Speichern
der Datei (DATEI ' SPEICHERN FüR WEB) einstellen . Diese findet
man unter DATEIGROsSE.
Während si ch geome trische Struktu ren pixelweise ziemli ch
leicht manuell erzeugen lassen, ist dies bei kompliziert en Grafiken
nicht mehr der Fall. Eine alt ernat ive Option ist die Verkleinerung
oder das Abschneiden eines bereits vorhandenen Bildes. Diesen
Zweck erfüllen neben den Werkzeugen aus Ihrer Werkzeugkiste
auch Online-Generatoren.
DynamicDri ve Favl eon Generat or (http://t 0015. dynamiednv e. eom!
lavieon) und Favleon Irom Pies (http://htmf-kit.eom/ e/lav;eon.
ce1 7m=143157 (Unkeode 195» generieren Favicons von Bildern
in den Formaten .gif, .jpg, .png und .bmp . Favlcon I rom Pies
erzeugt darüber hinaus neben statischen auch animierte Bilder.
Wer sich für die professionelle lean-Gesta lt ung interessiert,
wird mit Axlalis Icon Workshop (http://axiafls. comlieonworkshop
(Unkeode 196» einen multifunktionalen Editor vorfinden .
5·7 Favicons

I

375

Alternativ kön nen Sie den Ico n-Gestalter IconBuilder (http://iconfactorycom/software/iconbllilder (linkcode 197)) ausprobieren.

EI

Favicons einbinden
liegt das Favicon als Datei favicon.ico im

root~Ordner

der Seite
vor, so wird es von den meisten Browsern auch ohne explizi te
Angabe im Header angezeigt. Dennoch ist es ratsam, das Favicon direkt einz ubinden. Um das Bildfavicon.ico den Browsern als
Favicon bekannt zu machen, muss man in (X)HTMl-Dateien den
folgenden Quelltext innerhalb des <head>-T<lBs einbinden :
<llnk rel- ' shortcu t lcon ' href- . http: // www.selte.de /
favl con.lco type- 1mage/ x-1con" I>
H

H

In HTMl wird in der letzten Zeichenfolge I> durch> ersetzt. In
gangigen Browsern (Firefox 2, Internet Expl orer 7, Opera 9) werden sowohl .png als auch .gif-Formate für Favicons unterstützt.
Korrekt in sämtlichen, auch äl teren, Browsern, die Favicons überhaupt darstellen können, wird jedoch nur .ico angezeigt. Daher
empfiehlt es sich bei der Wahl zwischen verschiedenen Formaten,
_echte" kons vorzuziehen. _

5.8

Ressourcen

Da die Seitennaviga tion eine Schlüsselrolle bei einer jeden
Webprasenz darstellt, wird über sie in Webdesign- Kre isen viel
geschrieben und gerne diskutiert. Ein paar Quellen, die permanent aktualisiert werden, finden Sie nachfolgend.

5.8.1
Online-Artikel
..
Jt The Basics of Navigation «
http://efuse.com/Designlnavigation.html(linkcode 198)
und _Good Web Site Navigation «
http://mardiros.netigood-niNigation.html(linkcod e 199)
stellen Riclltlinien für das Design von NavigationsmenOs
sowie weiterführende links zusammen.
.. Navigation & Labeling
http://d. u mn. edulitss/su pport/T(a in ing/On li nelwebdesiglll
navigation.html (linkcode 200)
ist eine umfangreiche Sammlung von Referenzen rund um
die Sei tennavigation .
.. CSS-Showcase
http://alvit.de/css-showcase (linkeode 201)
präsentiert eine kom pakte Übersicht über Navigationstech376

I

5 Navigation

I

niken und stellt die besten Exemplare des Navigations-Designs zur Schau .
.. Der Beitrag . AlIes rund um das Favicon.
http://www.piktogramme-und-icons.de/wissen/ artlkeVaflesrund-um-das-Jav;con (Unkeode 202)

..

liefert das Wesentliche, was Sie über Favicons wissen sollten .
• Favicon richtig einbinden und Probleme vermeiden«
http://michael-hocke.de/tvtoriali lavicon.php (linkeode 203)
beschreibt, was Sie beim Entwerfen und Einbinden von Favi-

cons in Webseiten beach ten soUten .
.. • SuHding Accessible Websitec , Joe (Iark, 08. Navigation
http://joec/ark.ofg/ booklsashayls€rialilationIChapter
0855445152.html (Unkeode 204)
..

Zur Seitennavigation
http://www. d. umn. eduli YS upport/Tra iniflyOn li ne/ webdesign/ books.htm/#navigationbooks (Linkcode 205)

5.8 .2
~

Tool5

Mit dem Plug-in von Tefegraphics
http://www.telegraphics.com.au/ sw (Linkcode 206)
lassen sich Jeons im .ico-Format in Adobe Photoshop erzeugen .

~

Favourde Favlcons http://www.deftatangobravo.com/
archlve/2004/ march/!avourite (linkeode 207)

stellt rund 300 kreative Favicons aus aller Welt zur Schau .
.. Eine weitere Sammlung findet man im Beitrag . Inspire Yourself: 50 Remarkable Favicons«
http://smashingmagazine.com/200 7/01/ 31 / mspire-you rself5058-remarkabfe-javicons (Li nkeode 208)
..

DynamlcDrive Favlcon Generator
http://www. roofs.dynamicdrive.coml!avicon
und Favlcon jrom Pies
http://html-kit.conVe/javieon.cgi?m=1171 (linkeode 209)

generieren Favi eons von Bildern in den Formaten GIF, JPG,
PNG und BMP.
..

Fur professionel le leon -Gestaltung können Axialis leonWorkshop
http://axialis.eomiieonworkshop(Linkcode 210)
und leonBuifder
http://ieonjactory.eomlsojtware/ieonbuifder (linkeode 211)
empfohlen werden .

5.8

Ressourcen

I 3n

5.8.3

Tag Cloud-Plug -in s

WordPre ss
.. Heat Map Plogin
http://engadgetOO. net/pro} ect slwordpress- hea t- map-plu gi n
(Linke ode 212)

.. W eighted Cat egory Tag Cloud (WCTC)
http://www.kI3tte.delwordpre5s -p lugi ns/weight 00- ca tegorytag-c/oud/ (Unkeode 187),

.. Simple Tags
http://wordpress.org/extendipluginsisimple-tagsl(Li nkcode
188)

... Conligurable Tag Cloud (CTC)
http://wo rd press.. 0 rgl exten d /p lugi n s/eonfigu ra bl e-tag-d oudw idgetl (Linkcode 189)

Express ion Engin e
.. SolSpace Tag M odole
http://solspace. comlsojtwa re/deta i Vt agIdm odu les!
(Linkeode 216)

Tex tp attern
.. tru_tags
http://textpattern.orgipluginsI584/tru_tags (Li nkcode 217)

.. rss_unlimited_catego ries
http://www.wilshireone.com/textpa tt efIJ- plugin si
rss -ulllimitOO-categories (Li nkeode 218)

5.8.4

literatur

.. Merlyn Holmes: "Web Usability and Navigation:
A Beginner's Guide«
.. MOIville, Peter. »Ambient Findability«
.. Jennifer Fleming: .Web Navigation : Designing the User
Experience«
... James Kalbach: »Designing Web Nav igation: Optimizing the
User Experien ce«

378

I

5

Navigation

6

listen und Tabellen

Im Web 2.0 gewin nt die Notwendigkeit , Daten übersicht lich
und strukturiert zu gestalten, eine ganz neue Dimension. Insbesondere Listen und Tabellen genießen enorme Popu lar ität und

werden von Seitenbe t reibern häufig verwendet. Deshalb gilt es,
die Aufbe reitung von übersi chtlichen und flexiblen Tabellen und
Listen im Rahmen dieses Buches besonde rs zu beleuchten.
In diesem Kapitel lernen Sie, wie Sie Daten professionell in
tabellarischer Ansicht und in Ustenform präsentieren können .
Ein besonderes Augenmerk wird dabei auf d ie modernen CSSTechniken gelegt. Sie erfahren, worauf beim Design von List en zu
achten ist und wie Sie eine komplexe und benutzerfreundliche
Tabelle mit wenigen C55-Kenntnissen realisieren.

6.1

Tabellen und Listen im Web 2.0

Im Web 2 .0 werden Inhalte laufend nach persönlichen Vorlieben
und Schlüsselwörtern gescannt, an alysiert, selektiert und verwaltet. Di e Auswahl ist groß, somit auch die Zeit , die für diesen
Scanvorgang investiert werden muss. Wer auf de r Suche nach
inte ressant en I nhalten ist, wird seine Zeit deshalb nicht fO r wenig
aussagekräftige Einleit ungstexte opfern wollen . Nutzer haben
nämlich weder Zeit noch Lust , längere Beit räge, auf die sie im
Web mehr oder weniger zufällig stoßen, genau unter die Lupe
zu nehmen.
Daraus ergibt sich die Faustregel : Je übersicht licher die Strukt ur eines Beitrags ist, dest o schneller gelangt der Besucher zum
eigen t lichen Inhalt. und desto mehr leser spricht de r Beit rag an.
In der Tat t rägt die Form eines Beitrags entscheidend zum Verständnis der Information bei, die dadurch vermi ttelt werden soll.
Einfache. gu t gegliederte Inhalt e können den Scanvorgang deutlich erleicht ern und beschleunigen.

6.1 Tabellen und listen im Web2.0

I

379

Im Allgemeinen bieten Listen die einfachste Form an, Gedanken
zu organisieren und in einer übersichtlichen Gestal t darz ustellen.
Eine vernünftiB aufbereitete Übersich t in Form einer Liste kann
Inhalte besser und intuitiver zum Ausdruck bringen, als dies be i
der FUeßtextform der Fall ist.
Argumente in Listenform sind einfacher zu erkennen, leich ter
zu verfolgen und schneller zu merken. Nicht zuletz t sorgt dafür
die Tatsache, dass die Navigat ion in Listen leichter fäll t als die
Nav igation in FUeßtexten. Anwende r können sich von einem
Punkt zu dem anderen schneller bewegen. Inhalte, die Sie nicht
interessieren, können direkt übersprungen werden. Dies gilt auch
und insbesondere für Schritt-für-Schritt-Anleitungen, bei denen
Leser einzelne Schritte di rekt umsetzen können.
Analoges gilt auch für eine tabellarische Ansicht. Eine beliebig komplexe Tabelle st ellt die einfachste Met hode dar, um die
Beziehungen zwischen zwei oder mehreren Aspekten eines Sachverhalts kompakt und detailliert zu präsentieren. Da ten in Tabellenform lassen sich leichter vergleichen und analysieren - vorausgesetzt, Sie können sehen.
Was bei Listen nicht dramat isch ist , erweist sich bei Tabellen
als eine äuße rst komplexe Angelegenheit : Wie vermi ttelt man die
Übersichtlichkeit von Tabellen Nutzern, die nich t sehen können
und via Screenreader oder anderen Geräten im Web untervvegs
sind?
Die Lösung liefern einschlagige standardkonforme Ansatze zur
Gestaltung von tabellarischen Daten. Mi t zusätzlichem XHTMLMarkup können Sie Tabellen nicht nur flexibel und plattform übergreifend gestalten, sondern auch dafü r sorgen, dass sie von aUen
Benutzern wahrgenommen und interpret iert werden können. Ein
passendes Design wi rd anschließend mi t (55-Styling geschaffen.
Oie Übersichtlichkeit der Daten steht dabei im Mittelpunkt.

6.2

Listen

6.2.1

XHTMl-M arkup für Li sten

In XHTM l stehen dem Entwickler drei Arten der listenformat ierung zur Verfügung. Neben ungeordneten (ul - unordered
lists) und geordneten (ol - ordered lists) Listen schreibt der
Standard sogenannte Definitionslisten (dd - definition lists) vor.
Am häufigsten vervvendet man in der Praxis ungeordnete Listen,
bei denen die Listenpunkte gleichwertig sind und nicht speziell
geordnet werden.

380

I

6 listen und Tabellen

<p) llsten bfeten dfe efnfachste Form . Geda nken zu organhleren. L1 sten bieten folgende Vortelle: </ p)
<u1>
<11 )S le s ind Oberslchtllch. </ li )
<l Osle brfngen Inhalte besser zum Au sdruck . <!lD
<li )s ie sind leicht zu erkennen.</ li )
<l1>sfe s ind lei ch t zu ver f olgen . </1D
</ u1>

U.._ . .._f_.

<30-.. ..............

u.. _ w,..Jo V_

.. ,,.,1OIKood<ld._ _ _ 1t.
•• ..
-.;

.

»*t

~

..........-......
• .. 004 ........_

.. Abbildung 6.1
Di@standardmäßige Darstellung
@In@r ungeordneten Liste mit
Standard stIlen

Bei geo rdn eten listen spielt die Reihenfolge der listen punkte
dagegen eine Rolle. Jeder listenpunkt wird mit einer Zahl. einem
Buchstaben oder einer römischen Ziffer versehen und erhöht sich
auto matisch mit jedem nachfolgenden Eintrag.
<0 1>
<l1> Sfe sfnd Obersfchtlich. </11>
<11>s1e bringen Inhalte be sser zum Au sdruc k. </1D
<lOsie s ind lefcht zu erkennen.</l1>
<l1> s lnd leicht zu verfolgen. </l i>
(/01)

Bei einer verschachtelung von listen ist zu beachten, dass die
Eltern-Elemente einer ul- und ol-liste nur die li-Elemente
als Kinder haben durfen . Standardkonformes Markup erfordert
somi t, Unterlisten innerhalb von listenpunkten einzufUgen .
<uD
<l 1> el ns</11>
<1 f >zwef
<oD
<l Dd r e1</11>
<l1>vier
<u1>
<li) fOnf <!l1>
<li ) se chs <11 f >
<l uD
<111>
</01)
<uD
<lf )s feben </ l f )
(1i>acht <l1i>
</ u1>
<11 1)
<li>neun (/11>

looO ..

_._.r. . . . __
~

~

t.o. _ f...... V......
I .. ,. . . .~ ...

''''-Wo.o>.'''',_ .... - . .
l "'_...c.,.ao_

1

• .oUlo<lf"' _ _

.. Abbil dung 6.2
Die standardmäßIge Darstellu ng
@inergeordneten Uste mit Stalldardstllen

6.2

listen

I

381

I

<1 Dzehn</ l 1>

<I ul >

• eins

• zwei

1. drei
2. VIer
• furu
• sechs
o sieben
o acht

• neun

.. Abbildung 6.3
Eine versc hachtelte liste besteht
!;()wohl aus geordneten als auch
ungeo rdneten listen.

~.

,-

Pt.m.b-oo:.b W<h 2 0
l,hd,,,,",, 'I.'.b"""dl""'lI""'' '''''''d ,.,.:I~"':'.n
V ...,Fri<&...,

V"I,,"
G ~ .*p,,,,

• AurUM
• 456

'ft" S5Ht!

·""-'"

Abbildung 6 -4
Typische Definiti onsliste, deren
Elemen te im Unterschied zu
_unären« geordnete n und ungeordneten listen eine _binAre«
Bel eich n er -Beseh rei bung -5 truktur
haben .

.t..

Im Unterschied zu ul - und ol-listen bestehen Definitionslisten
aus zweiteiligen Listenelementen, die neben einer Bezeichnung
(dt-Elemen t , definition term) auch eine Beschreibung (dd, definition definition) beinhalten. Innerhalb des dt-Elements sind nur
inline-Elemente erlaubt. innerhalb des dd auch Blockelemente .
insbesondere also auch weitere Listen. Definitionslisten sind dazu
gedacht, Informati one n zu gliedern, die aus einem Hauptbegriff
und dessen Beschreibung besteh en - etwa wenn ein Produkt und
seine Charakteristika in Form einer liste dargest ell t werden sollen .
<d1>
<dt>Buc h: </dt>
<d d>Praxl s buch Web 2.0</dd >
<dd >Moderne Webseiten pr og rammieren und
gesta lten </ dd >
<dt>Autor: <I dt >
<dd>Vitaly Fr1edman </ dd>
<d t >Verlag: </ dt>
<dd>Ga llle o Pre ss</dd>
<dt >Ja hr: </ dt>
<dd>2007</dd >
<d t >Inf ormatlonen zum Thema: </d t >
<dd >
<u1>
<1 f)<a href- " http: //www.a11stpart.com " >
A Li st Apart </ a><l l f)
<1 i)<a href- .. http: //www.456berea street. com.. >
456 Berea Street</a></li>
<11 )<a href- '' http: //www .w 3c . org " ) W3C . org

</a></l1>
<I ul >
</d d>

<I dl >

6.2.2

Gestaltung von Listen mithilfe von (SS

Sowohl Eltern- als auch Kind- Elemente lassen sich mit (55 genau
spezifizieren und gestalt en.
Das Aussehen von list enzeichen lässt sich über die 11 sts tyl e- type- Eigenschaft des Eltern-Elements festlegen. Für ungeordnete Listen kommen folgende Werte in FrCl8e :
382

6

listen und Tabellen

..
..
..
..

I

df sc (gefOliter Kreis)
cl rcl e (leerer Kreis)
sq ua re (gefülltes Rechteck)
none (kein Ustenzeichen)

Für geordnete Listen können
.. decfmal (1 ., 2., 3., ... )
.. lower-roman (i .. ii.. iii ..... )
.. upper-roman (1.,1 1.,111., ... )
.. lower-alpha.lower·latln
(a., b., c., "', z, aa., ab., .... )
.. upper-alpha. upper-latfn
(A" B" C" .. " Z. M .. AB., ... )

sowie weitere spezifische Nummerierungen verwendet we rden.

u1 (
list ·Hyl e· type: square:

Die LIsteneinrückung durch die lfst-style'posftfon-Eigenschaft definiert die Position des listenzeichens bezüglich der
Ustenpunkte. f nsfd e steht für die Einrückung des Bildes, das
heißt, bei längeren Ustenpunkten wird sein Inhalt zusammen mit
dem Bullet-Bild im Fließtext erscheinen. Der Wert outside sorgt
für die Voreinstellung des Listenzeichens ; bei beliebigen listenpunkten wird es außen bleiben.
Schließlich kann man über 11 st- st yle-lmage den Pfad zum
Bild angeben, das als Ustenzei chen angezeigt werden soll.

. ... ooI><ooool_'!hOI_b<~~ .. ,~<fer~

.-

.. ....... _ _ ..b"''''''_''-'''
~

.a. Abbildung 6.5

Oie Eigenschaft . list-style-position. Ist bel der ef'5ten liste auf
. inside. gesetzt . listen marker
befinden sich in der Zeile, auf
der sich auch das listen elemen t
befindet .

u1 (
11 st -s t yl e-lmage: url ( " pfad/zum/bil d.png" ) :

Als Dateiformat e können .png . .jpg und .gil verwendet werden,
wobei zu beachten ist, dass der Internet Explorer bis einschließlich Version 6 transparente PNG-Bilder falsch darstellt (im Internet Explorer 7 tritt das Problem nicht mehr auf). Abhilfe schafft
The AfphalmageLoader Hack.
http://alistapart.corWstories/pngopadty (Linkcode 221)
Mit GIF- und JPG-Dateien sind Sie immer auf der sic heren
Seite. Der Wert oonefür das Attribut lf st- st y le · t ype ist dabei
nicht zwingend notwendig.
Alternativ können Sie auch eine kompakte Schreibweise verwenden : Mittels der 1 f s t · s t y 1e - Eigenschaft lassen sich d je drei

, ... ....,.. ..,. ...,""..-.... """"o-'_.-.r ....
...b .. '"Id_........ ....., ..... ............

.a. Abbildung 6 .6
Die Eigenschaft . list-style-position. Ist bei der ersten Liste auf
»outside.: gesetzt listenmatker
befinden sich außerhalb der Zelle ,
In der das listenelement anfangt .

6.2 listen

I

383

Attribute zusammenfassen. Dabei schreibt man die Werte für die
Eigenschaften hint ereinander, getrenn t durch Leerzeichen. Die
Reihenfolge der Angaben spielt keine Rolle.

<u1 style-" list-style: url(page_white.png} outside ; ")

<1 Dei ns<!1

1)

<1 f >zwef
<01 style- Olist-style: url{bl1d-l.g1fl: O)
<1 Ddrel</li>

<1 Dvier
<u1 st yle- " list-s t yle: url(bild-2.gH); ")
(1 f>f(lnf</l 1>
( 11) sechs </11>
</ u1 )

</1 i)
(/01)

<u1 style-ollst-style: url{bl1d-l.glf); O)
<1 i)sleben(/11>

<1 Da cht<!1 i )
<I u1 >
</11>
<1 Dneun(/1D

<1 i> zehn< / 11>
</ u1)
Bei der Verwendung der 1ist· s tyl e-j mage- Eigenschaft ist zu
beachten, dass sie bisher von verschiedenen Browsern unterschied lich interpretiert wird. Abstände zwischen li stenzeichen
und List enelementen variieren von einem Browser zu m anderen.

6mf

**

sechs
sieben

Besse r ist es deshai b. statt 11 s t - s t y 1e -1 ma ge fü r das EItern-E lement (u l) Hintergrundbilder für die Kind-Element e passend zu
positionieren.

acht

"'''''
uhn

6.2.3

listen im Web 2.0-look

Das Erscheinungsbild des Web 2.0 wird durch visuell anspre-

A Abbi ldun g 6.7

Verschachtelufl!; von listen

chende Seitenelemente en t scheidend geprägt . Jeder Aspekt des
Designs soll zu einer intuitiven Seitenstruktur und übersichtlichen
Seitendarst ellung beitragen. Dies gilt auch für Listen.
Ein int ui tives Erscheinungsbild lässt sich durch ei ne simple und
überschaubare Strukt ur der Seite erzeugen. Dabei ist zu beachten,
dass mehrere Verschachtelungen von listen einen Leser schnell
durcheinander bringen können. Für übliche Bei t räge soll ten zwei
bis drei Listenebenen in der Regel ausreichen. es sei denn, es
geht etwa um die Darstellung eines Buchverzeichnisses.

384

I

6

listen und Tabellen

I

Bei der Gestaltung von Listenelementen gelten folgende Faustregeln:
..

Listenzeichen müssen nicht zu auffallend, aber auffallend
genug erscheinen.
.. Die Farbgestaltung von visuellen Elementen (Ustenzeichen,

Markierungen des Textes) soll an das Gesamtlayout der Seite
angepasst sein und in gleichen Tonen gestaltet werden.
..

Der Abstand zwischen Listeneiernenten sollte wenigstens das
1,5-Fa che des Zeilenabstands betragen.

..

Der Zeilenabstand soll eine optimale Lesbarkeit gewäh rlei-

sten .
.. Die Schriftgröße einer Unterliste sollte nach Möglichkeit
immer kleiner sein als die Schriftgröße ihres Eltern-El ements.
..

Listenmarker werden immer nach links einge rü ckt, Unterli-

sten werden immer nach rechts eingerückt.
Bei größeren Listen werden Listenpunkte häufi g mit Überschriften
versehen, welche die Aussage direkt zum Ausdruck bringen müssen. Wi chtige Schlüsselwörter werden, wie bei übli chen Fließtexten auch. fett markiert.

Schritt für Schritt: Listen gesta lten
Als Beispiel zur Gestaltung einer einfachen und übersich tlichen
Liste betrachten wir einen Beitrag in Form einer ungeordneten
Liste. Diese soll Listenmarker aufv./eisen und zwei Listenebenen
besitzen . Im Markup befindet sich die Liste mit der ID (;reet_
1i st im Containe r 01 i st.
Liegt das XHTML-Markup einer liste vor. so ist es immer
vernünftig. zuerst den typografischen Satz festzulegen. Mit ein
wenig (55-Formatierung erreicht man eine übersichtli che Gliederung der liste .
Im Folgenden sehen Sie einen Ausschnitt des XHTMl-Grundgerusts. das Sie mit beliebigem Inhalt fUllen können :
<p cl ass" " i ntr e " )
(s tron9>" Ru1e s Of Smart And Succ es sfu1
Web-deve1opment" </s trong)
1s <a href- " http: // www.a1vlt.de /v f / " )
Vita1y Fri edman' s</a)
per sonal pi ck C... )

<I p)
<dlv ld- " li ste " )
(u 1 1d .. "r oo t_11 st" )

6.2 listen

I

385

<1 i>Respect your vi s ito r s . <br /)
Don't try t o f orc e your visitors t o read the content
of your web-pa ge s. [ ... ] </11>
Weite re Ll s t enelemente _. )
• )."1'«"""''''''''''
D""" try'<>b<. ""'" _"" "'_~ tIIoo <....... oe,"'" """'·P"

.
,o,.L )""" 1

'M<" i!>d ""iod••·"." b , ....""" red FOt l,..~ 1;0... ''''''~~
,,.. k,O ,,,,,,, """öd? "'" ... '" I""'" '" ,_~~ ..... WILaI "''''*! b, , "'"'

' " • ~,,= " \»P-'4" ..,.j ....,c,..." ,J \.k.dul
• Bad . - " "...... ~
'00<_

..."""', 'ry " .....
.",,,,.".". ",,,,,,, "' ..... .....
,;"'~""

LoI","",

~

My pO>ll """"~

.w

D.,.ot>ooc . 1 I;.k.;;k. . . . "'. ",.... ,.,.. od "'''''''''' kf • wIIb. IM ;". k ", "'" thoy
",,,,,', ",... ,.,.. w.b· .. . "lf~ 1IiII In r.ct. , ..... o" · '~ood-,--~
.."""111""' .00,.,.. pwjo , .. """' .....
o AUlOd
sm Oll<! bd ~R.
honu . ... ,b . ' ~ (.>dJ~ li:Jko wIIb..." p<nblo ,,",.,
fr-" ~'l pU' ~ 1"""" I:ok .. !Ir", t:om:.o <t< ) ..-J 11M , _ .. , '" ~ -=,,,- h.,
. e;ou, _
. Ibe oI;;o<iIhmo •• .-dI"'C"'"'~" "'. "",,,,~ ""' .JI
fr-"..,." "' .. Ob< '0<11'" ruk ,. &.1 ,."..":;,,,.,:1, Pq'''',k 01><;: ....

"""'".I

.,.H~"

......

<>

""-1.'" ''''' ",..r.e<I'Q' 00f>tIe ......

C"""",-W 4""',1PM'L<t dm, ""'" mdft b. _o<Iod . ' '''' , ...1«1. bo ..,...,. "''''''' "",.,,,
F... ,o.:&.. , _ "'" ao<I pOl:waJ , 10m>:!< 1h<f. tok' • ,i->,., h ole. . "',..

....., "<Go b<- .,." . _
~"" """'''

........

~

o ' .... _ .... 0;(0

'0.".'
",ch_

.tf., ~ ,oforl
• H>I,Ir.tt_,:E""q>k<" .-"",lü, tor.oo..· , _ ... "",,,
J)«,·, dt,'lPYOW ,ook b <p<o.oIbrow"", ,,,

Out., . ... """ ... ,

....... ...

_ ...,.....,. ..... ""..."'... ~' ....r<e_ ..... ...........10 ... .

.. ,.. ...... _

. _ .... ",.,1" ,.. .... ) .. 1000 __ ...

""'"""~

. _
,_.n<." ........ ,....,""...
........"'._
"'" .... ................................., "'" .......... .....
....... _
...
0...' .."..,.. .. ..., """ .. ,..".,
~

.. _

........ _ . lt>o . . ....... , --" .._

... _

_ •

_....,
"" . . . 'o _"""'
..... '" .. ,......_....,.,"'''''''onf
,,,,, ..................
. ... .. dlh~~~.~O

o c.... ". ""

""'~._.

, ,, ",.. ..., • ..-." b.... , •• ~. d " ,,,,-

,..., . ...... ..... _ .... ........... """ "' .~. Th," .." " .... "'... ,....

.

...,.

t. _ . I!W,. , ........., , .. ~....... 01 "'" ",n . .... n .....",
~

. . . .. , .... _

"""«1

'" ,,'.... "" •",...''']'H' .rJd. " ..,. ,..

.........'u,,, ",ur...................,.,.. ....

G

11. do..,..,.,..; _', .. /od o lM, _~ ... . - . ."" w<lI • " ' _ <it..,...""", 0(
• -!uo «olt" ,.,"" .. ,b·~.. o!d,ruJ lr_ ,""".. I""! " " :!.!olt • ...." t.: f><"'O
~ .., ... ... ""'€ "' ........ tlL1II • <'" 1>0 .. oN [0, ~••
on .",.....

v. ...,., ..... ...,', ...'_,,;••.

.-;,

~ ~", • .".~ 1*>00" .. ;~......,..)'OU'
"0"
~ II>,"" "'toO>.M JI1 !,,~ ~ "" •., ,...
"..

.. ~.. " """" Thorlk - . . "'" _. t..,- 1ft ik<1y '"
eh, ..
of ,)",< "'''. ik,ut.,.. "" od,.......,." of

.4,,,
~ D..,' o
..,._,. iIo.'oo<I.:t-c,,,,,,,,,
..,'" ~ 11;," ,",,"...,

....

"' ~ , _""_".a<,""' ., .

"""'''",",,'",,' ... "'" ,-....,.-, . ... ,., ..n . .......

""'jO'

PQ' .,r.

n...... "'.,... ~ ••• p . i!" ~ LO' ..... , ......

,n' "' ...., '"...11'_,," ........
,. ' '''' <1<~ " <Oll, vou" I ... ,....
to,_, .,............

"'" "",I<! . ...., d' '1 ~

.""~._

. ..... . ... ...... _

,",I. , " ......".; .. 00

,IL'" ...1,. "'" _ '_,'" -.." _
•..-.J«<t. "'.', ''''' , ,..
.... on ".,. • • _<10 " ,,_ ' h.. ;, , .... "'''''' ....... ....
..
... "" , ', - ',"''''.'.''''' ....... ,"'

.. .... -_.
... " .....n" '......

.,.;~

.....

,~

'f .......'. "', ......., I~ .. ""',

&-".

• Ab b ildung 6.9
Mit etwas CSS- Formalierung wird eine gut gegliederte übersicht in listenform erzeugt.

• Abbildung 6 .8
XHTMl-Markup für eine ungeordnete liste

D

"""., ""I$" \'<UI' """ , ... ",.1<,,'''''''''' ... ",..I>( " , _
_
, 0<, . "'... ""'"
,..... """n" r_ ... Jo<, .. .... ~~ " .............re" ..,. .11~ '.

XHTMl-M arkup und einfache (55-Formatierung

•
margin: 0:
paddlng: 0 :
)

body
font: 0.8em/l.5e m ' Trebu c het MS' . Georgi a. Verdana.
sa ns- seri f:
111 iste
marglll: 0 251 :

a
co 1or: fla 10000 :
f ont - weight: bold :
text·decor atl o n: none:
border·bottom: Ipx dott ed /lal0000:

6

listen und Tabellen

I

111 i s te Ll 1 1 i Ll1
fon t -slze : 90i:
margin: lern:

I
fl1iste LI' 1i
mar9in-bott orn: O. 6ern ;

I

fI

Indivi duelle Listenelemente

Nun werden Standard-Listenzeichen entfernt und durch BilderHintergrundbilder von Listenelementen - ersetzt.

.... Abbildung 6 .10
Standardmäßig wiederholt sich
das HintergrundbHd innerhalb des
li-Elements.

_
_.... ...... ---_.. _..............
-_._-.........
_..............._._............. . ......... .....

"".,"--.....____ n"'.'
.. .........
__ ........
....
.....
,.......... _...
~----_

,~-

~.

"'ri..
....

ft~"

__ "~_~_" ' _~"'''

_~

. . _ _ _ N . . . . ..

u1firoot_1 i s t {
1i st- s t yle-type: none ;

I
ul{Jroot _1ist 11 I
backg rou nd - 1ma ge: ur 1 (bu l l et -1 . g1 f) :

-."'''''

' "-' "'''''.

'-~-~-'''

"''',

_~'''

.... Abbildung 6 .11
Der Us te nmarker wird von
li-Elementen bedeckt.

I
1I1iste ul 1i u1 (
f ont -s1ze: O.gem:
margin: lern:
1i s t- s tyle: in si de :

I
Hintergrund ohne Wiederholung

ul ff r oot_l i st 11 {
background-image: url ( bu11et-l.9if l ;
ba c kgroun d - re peat : no-repe at:

~-_

_~

'~'

"_.~,,

_ ~_

.... Abbi ldung 6.12
listen nach der Positionierung
des Hintergrundbilde5 und der
Einruckung von li-Elementen nach
rech ts.

listenelemente rechts einrücken

_-_

---~_

_. __ . ........ _-_ ..
-_
....
~ "'

~

.

-

""-"...........

_ ~,.. .

-

ulliroot_l i s t 11 {
ba c kgro und - i mage: ur1 (b ul1 et -1 . g1 f):
background-repeat: no -repeat:
paddlng-le f t: 2ern:

..---.--'
"'....... . __
_M'''_'''''''.'''
__..
......
""._.,."
...,...__
_'..........
...
...-,_-.......""-_...._....-,....._,..._
.............
.
...._......_--_
. . ... ........
.........
__ .n_--..-.... ___
... ...._
...,,_.............B••b,.._......... ...
~

Damit der Listenmarker sicht bar und zent riert posit ioniert wird,
muss man die Listenelemen te nach rechts einr ucken und die
Posi tion der Listenelemente festlegen.

I

~

"

_

11

_
,

~

11

"'",
_............
_
.._
*-'-...._
_.................
.._..... _-_
,..,....
..._
........
..-...
...
..
_--,.,'_.....-,,-"'... .....,
.................
.....
,... ............ _...._............. ,""
........
,-...........""""'-'-'
............. .......... ,....

.... Abbildung 6.1]
Das Hin tergrundbild vere rbt sich
standardmäßig von der Eiternliste auf das Kind-Elemen t.

6.1

listenn

387

..., ....... >(9 .........

_ ·"" ...··OVO· __··_..·. ·",···......,.
'ol

__

"", ... , ... .. .... '.,.""'~.""' • • n ... .. _ _

_

rt.", n _

_

.. .... .

_.~ . .

'~ .

"IP_"''''''''''''''''''''''

....... "' ". ~ ........ " " _ •. , . " ..... 4 ...

..,"-,...... _"1"'... . ....... - - . -....

.... Abbildung 6.14
lIstenzeichen sOlrVie die Einrückung der Marker für die Liste
zweiter Ordnung werden eingefugt.

D

Li stenelement e zweit er Ordnung ges talten

Im nächsten Schritt werden die listenelemente zweiter Ordnung
mit der border-Eigenschaft gestaltet und nach rechts eingerückt.
Damit der listenmarker, der von der Eltern -Liste vererbt wird,
nicht angezeigt wird, vetwendet man background: none. Beachten Sie. dass lfst-style an dieser Stelle nicht ersetzt werden
kann. da die Einrückung sonst nicht für eine einzige Zeile. sondern für den ganzen Block gelten würde (vgl. Abbildung 6.15) .

*

Avold W'OOi SEO and bad Pft
I flCOr . eet surch encns optimization (exct\anPli mks w\th
eve .... poulble site n the net, pIocl'liYCU' mk n mk ta"ns ete.)

.... leod YCU' site tobomrc ('on! ~jo. S/la,d! enP>es. '1'10
/IIiOrithms se./lrch ena:nes \/Se a.e bein& imp.aved aI the time, so
in the end yau . Ilk to fYla ycu.selfwltn !.'..~.~ 0 DeioorI aII
PD<,ibIe ,esuts you -.teCI to CCIfI1)ete will>.

.... Abbildung 6.15
Eine Einrückung (I nline-Posi tionierung des listenmarkers) I&st
sich nur durch list-style-type:
inside erreichen (rechts),

~\IOid W' OOi SEO;n::l bad PR.

Ir.:orrect sea .ch «Jiine optinl2atlon (e~"nl<s wit l>~ ....
poS'1bIe ,ite .., the net , placlni ~OOJ' link .., In<. fa .ms etc.) willead
~DU' ,;te to b...-ni"li fran "'"ja' sea.eh «Jiine'. The o'JIiO ' itlYn'
sea ,ch~' u~ a.e beini ~'OVed aII tM tine, so.., the l!I"id you
risk to fY'id your!elf with ~~.~~ 0 beIo:Jw aII p'm ible re!Lits ~OOJ
W«1ted to c"",,",te with .

fl1i s te 11 ul 11
list- s tyle: url ( bullet- 2 .gif ) inside:
border-rfght: Ipx solfd Ifcee:
border-bottom: Ipx so lfd IJeee :
border ·top: lpx so lid /I eee :
border-left: 5px so lid //ddd :
padding: l ern 0 l ern lern:
margfn: 5px 0 5px 2.5em:
background - image: none:
}

*

~'<pK, ,.,,, .kIlOf'
COh' , ,..,. .. 1Or':<)"'" .i.ie>r> .... .., ~ .. ""' ..." of ~,...- ". b - ~< II" L.t '"orn
d'Ioow oM ~ " ""1 Ilo(rf "'..,1 (0 . nd. FI)" 1f yn 'j,~ W!OOld " 00 T~II, )'00" lIooj
."".,.- 115_,. " . 'lIdy, ~"" .... s
~l'l .I "". Wl .. ""'ulol ~ . .......

SO".,

*

""ti,n 0> • ""'" ,r _."P' .,j 0<..1""'" .~ lJI"h

l ..., ~"t

".oe',,-.

B..J ..J'ort" ...""t;, .. l.
Dlsl"" I~ .. bIn.k<

"''e'' ~ "''' "" ' .... 00'01 • ... . ~ b.J ' "'' Ior~ n.oo ti ....
"""."M. On I oct, .,.., ",.n·' ~~.•'. ~.~.! .Nl !.~P.~!.~_!~
"'1#" h• •• .

...... . , m.h """ _b·,I ..
j>01O"" .I _ .,O<I 'f'l'J' po oi oe",

.JE- ..... ~ ...,

\(0 .. ' . ... .

"'" ",,' , . oe,h . .... . . . "'~ ,("' n (_h ....... ,..... ....Ith .... 'Y .0,,1I0I0 ,~ .
10 <too ..... , 01"""" ....... tw.1o in, 10. ... ",0, ) ..1 10... 0.. "oe ' 0 b.. nh
"'0 '

"01<' >0""" <'CI "<>. 1>•• 11""'''." >O.",h <n.",<, U" " . t.wc

........ ""J .. tl>o tIIo • • 0<1
b_ " •• «1>10

'" " " ""' ....

rH to 11M

VOO>fI'" wlth p_..... 0

.oM!. _"'".. 01 t. """,,,,, «t: ....

11'

C."'" ,.....

,j".,\ ' .....

,.t.·J

Lot ' !lu • ..1.0 . :,1.' b. l.to ..

In .our 0"",_, .. ...,. of "',"
<"" ... rint ~M~"" m ""''',''~ """nI<"'. 110"" ,,., • , """ 10><1
"H-. ..... a.~'
iM " ..
1 ........... " .. oll .. ll,.,.

"" ;".,..,..

....."... ., .....- ....,,,.
... ,,"'

, . ~"'-.

,.,..ko_

Ont, ,Mon _t.." tO . . ... . on 01

t~".~

.... ....otlbl .. ' h•

,

Abbildu ng 6.16 ..
Übersichtliche graue Boxen für
eine liste zweiter Ordnung
388

6

listen und Tabellen

Jt thlrIl ow, ,,,'n.t. , ~ollt
8. 'oe"';",,,,,: don't

",;"", ,,,tloo ...

",j • tof f. ,,"d '" h.""'0I' '>11th • "'" .. d,,<>iotl<"

., ""'.,, ,. , .. ",.0-"'
. 611. ..", ,;"'" ''''''''l>
<0 'Oik .. U,,. _ 0011 ",oN.Io< ",. .... . " 01
~'"

_

.. t'" .. . ..... ~.

"o~

ir. ••• ,"'. , ...

~

I

m Überschrift en hervorheben
Um die Überschriften von Ustenelementen stärker zur Geltung
kommen zu lassen, wird die Pseudo-Klasse : fl r st -li ne fur die
Auszeichnung der ersten Zeile im Fließtext verwendet. Trotz der
typischen De finition -Beschreibungs-Strukturwird an dieser Stelle
keine Delinitionsliste verwendet, um die Hauptaussagen und ihre
Erläu terungen nicht voneinander t rennen zu müssen. Sonst würden nämlich entweder alle Listenelemente in einer Box stehen
müssen oder immer bloß ein Teil der Definitionsliste .

HINWEIS

/Jlh:. t e ul 11:first-11ne I
font - we1ght: bold :
backg round- color: /Jf feedd:

Beachten Sie, dass die :firstlinePseudoklasse von IE 6 und IE 7
nur teilw eise unterstützt wird ,
und zwar genau dann , wenn IE
kein sogenanntes has-Layoul für
das jeweilige Element erkennen
kann. Alternativ können Sie das
Markup via (X)HTML gestalten,
Indem Sie für jede Zeile ein
zusätzliches <span>.Element
einfügen und dieses mittels CSS
gestalten .

}

{X) HTM l:

/Jliste 11 ul li:f1r st-lin e
text - tr ans f orm: upper case :
background: transparent;
/ * Dies er Se l ek t or erbt die Hinte rgrund fa rbe seiner Eltern; seine Hintergrundfarbe wird de s halb auf
tran spa rent gesetzt */

<uD

<ll) <span
c la ss - "fl r s tllne ">Er s te
Zei1e< /s pan>
<br I> Beschreibung. </ li >
<l uD

CSS:

.flr s tllne { J

*
*

ReslJ'll"u )'(l UI . b ltOls .
Ooo ' t try to forco ,oor ~;,;llon 10 ", . d tho contontof )'O or w.b· p~go , . LOllhom
moo,e and daciGB what thsywant to r~ öid. For il you have sometinli to tel!, I'W '1 find
)<I or I"toner,. Frankty,)<IIl Me . s !loud . s ~.~ryb~ ~Is •. Wild """eid bo. !fOO r
1"9 • .;-1100

to .. d:l29n 01 pop·up' .. nd

o~ orllown

. d block, ? Mf po int IUctly.

tiM a(!ve rtlsenl~ nt is evil.
OI'lurbing ~d

~Iock. mig~t

Improvo your ~d re."nu" for a whno, but In ~ kng run tney

't m~ke your -..eb-sl!e ,o..o:;cessful. In filet. VO~ ...,·Wt e~.!~...!.~!,~~.~ ilr.:! !!.!!.~'.!..I_~_!.
pote ntrol 'flIu ~n:l yoor prol ect, mlgl1 t hJve.

"iifjrl

~ VOl [l WftOtlG SED AHO IlAD FR.
Inco ....... ct , ..'ch *f"Ql n. OI>t imlz.tlon ( . ~, h"Qj"i

~n",

with _ .-y po<. lbl. <It.

in the r.el . ol. cint ';oor Ilnl< in tinl< Im" etc.) wi l l""0:1 ~our sie t o b.nmnt
1'01) m. jor , ,,arm q ,..... Th~ 'l!i:o'1thr... ".", h ~1Ii1"" . "'~ oee bolllll
i... pt"O\Itd ~ll I hG ''''' 0, $0 in Ih o .nd y"'-' N k to flnd y~....,.;~ lf".; tn pOj;"'.... ~ 0
below ~I I oossi ble re; ~lt. ~Oij ",,,,,tec to comJet: e "';t h.

COIHA CT, OOT [10tH SPAM .
",.~hI be inl;e>""el't ed in \IOur CQnte,l. be "'~"' e <:I\IOor
cont ent. First lI""no ')"CIur atn ",.d potenti'( c(i,nI;e(". l h.n 101<•• c(ose \Qol<
ot Iho," .... h. mwh bc intoro"od in yo", n,vkc. TMnk obout thc ,itc, t h ~ J
ore ~ 'ety 10 ..osil . O n~ t hen co nlact the '>J:~ors o fthe ~ s!l:e" de~crbi"ll! th e
let Ihose ", ho

'Mr:t"l~

01 Y0III" !e"";oes.

'" DON'T OV [R (HlMAT[ . DOtIT IJtlD[RUTIMAl[.

Be d"C';;ltiv.; don't ,e nd a ~nk, <end an inlltotion .... t~ . proper d .. c""tiOl"l
ri what mal .... )'<ur ",.b-.l e dllerent fro m .1m~a r proJee!<.

liIa ~~

,"re lho

.. A bbildung 6_' 7
Wenige typografische HefVorhebungen erleich tern den Scanvorgang fur den leser.

11

HOller-effek t hin zufügen

Damit die grauen Blöcke beim Darüberfahren mit der Maus verändert werden, werden die Listenelemente mit einern HoverEffekt versehen.

'lfste 1f u1 1f:hover
background ·co1 or: 'f7f7f7:

D

Übersichtli che Darstellun g erze ugen

Mit ein wenig (55-Styling für den obere n Absatz, Links und einen
vergrößerten äußeren Abstand zwischen den Listenelementen
ergibt sich eine übersichtliche Darstellung des Beitrags in Form
einer Liste :

f/11steul l l l
margin - bottorn: l ern:
)

p. fntro (
margin: lern 2U :
padding: 0 .5ern lern:
background-color: fJ f8f 7f6:
border: Ipx sol id /Ieee:
f ont-size : 1. 7ern;
1fne-hefght: I.7ern:

.__ ... __ ...

-...,---"''''_
_..............-......_.--..............__- ...

_. . ... ... ... _.
,--_
._-_........
... . _
......__.... .......
......_........
.,-..-"-_
..
-_
.....
.....
.......
_
..
_
.......
....
_
..
_........... __.
• _

. . , - _ ............. <.j ....... _

-" ...

"' "' .......
"

__ .. _ _ _ - . o ..

~

..... . -

f<

_~.

...oc, ... _, .....
~-_

,

_~

,

.~

... Abbildung 6.18

Hover-Effekt bei listen zweiter
Ord nung

)

a:11nk. a:vf sited {
co 1or : /Ja 10000 :
f on t-wefght: bo1d :
text-decoratlon: none:
border-bottorn: Ipx dotted /lal0000:
}

a:hover, a:vislted:hover {
background-color: IJfff5eb:
border-bottorn: Ipx so lid l1al0000:
}

a:active, a:focus
background -color: 'al0000:
color: 'fff:

390

6 listen und Tabellen

'1\014.. Of S",art And Succ.., fuI
F. t. dm.n', pcnon.o l pICk o f

tI~

W.b·d.y.lo~l" h VII.ly
n,a, n ,du ~ and conc:'fIb . wh ,c ~

m ah l , m~rove the 'lUllUty and po~ul~ nty of )'OU" we b ·~' te.l .nd
pro", d@~ "",d fOllnda tlon 10. <UCc." fut d@V. topmHlt,n th@ futur •.

I

.. Abbildung 6 .19
Eine übersichtliche Darstellung in
listenform

* "'-,,... ..,..... 'IW_., ...., ........""' .. _il>Ct.,
_"'M "e''' .. "'''' ., ' .. ,1·.... .... $I"""" '" ....
~

(>00', 0;-'" ' '''' ' ' ' ' '

~,

~

"00 ". ••_
,'" """..-1.
_,,... 00'"

"'""'1.
"",rIo<> .,. "".. .

/IM ..... lI«.....,.

'<' ,....
,".'11

~
"'~
1"......
1_"" • ..:I . . .. amm

* DI<,_,.., ,_, ...."
1I... . .... ' ....... ' htolO

",,"'1<'"

"",I ~

,d"'I"" r.............. (;ra .. ~'" n.n

"","""'1 .,,,1.. _ ..w-,I ..""",,\(. '" 10« "'" _ ', _
. ...... ,too ........, ,,,. on.I_ ...;O<t>"'id 'h. ...

....." .....

.._- ,"'_........

".".N.. __ ........-""""....,.,......,S ...... _·-,-.....·,..
.. ... ...... .... ........ n on ........ ' .. ' ... ;0. . . ..

,- ...........
_"'......
.... _....
... ..."'"_-.. ........ ...._._........_
... ,......."_,""'''"""
.... ,., ...............

" ........ _

••J" ~~ "' ....... n.~ ...."' .. ....... ...... . .".,... "

~,,-";'. """' '' ''' ~ .'

","~

1ft ' ''" '''''. _

,,-..

4

00' " "'... .

"' """""_ , -,"'

D.,.• .,p )'O~, own , t)'lo. o. •• lop )'Ou, _n i ......
l " -,..u"ott bo ir..p_ , b", dort ', Cop'l " ; " I r "'''''' in..... t;"! .. tinj 00'
...... ~ .. I,. ' ''P,e .. 01 'Un ""''' 0111., P'OP" .~ ,-,pob!~ 01 • • pIoro """'"

''' 0&>10:100 ..... C\II'1Ol1l)'

_0<' Impm Vlid oto tdeJS

;i\U""t lOOb "MIlli.., Ibo COpIoloJ Did
4

-~

.~

MO re (I~ ~ ~ 10

on~,

R.. po<1 1bo ".n~.,,,,,, Tbl... . boUI PHPIo.
T" \ni web <l"oIl ru. Im" c"", !dc•• tl oo "'" 110, ,..,U to .,v . . .. t _~ In
~ l'ubJ,. 11 "","' , tok. ""'~ "fM "'.., "'''''''~ i''''' bo",,,,, •• , ... ,1 .. j i~
IN ,,"'.b; ..-.j
1.,0 ... b-p. !!'I ' 100 " ""I. , il . ...... 10 l .
r.. ",".1>11 '" . ... no
~,IT. hOlJ " ", .d<in ~ ro . .. d. .. 0 'J>I>\0O; ;, ' . ' 1>0
In "''" !tr. « .... d..... ·' con/orm ' " ,,.. .... ,,<I->r.1> Ru "",W,,y,
",u" ibi'i" . .... b'l1ty ~' ... 'tin5 ' Oom. '1" " "'P'<! 'l" LJr . " ;'01"_

or

,it.:. """ ... "'..
'>m'

",0>:1",,, .

* BI<"" .U.. , '''.,n.. 'k''p.

D}n'tbe .ltlld 10 UV"'"" 'l"lU~. ~1I1ll 11"t'Y crlatel ~n<.JfIM~
d1s~. f>lt.<_ ".:0" .rtd'fW . 1s lttlrs, S'yßi! Pt OOs . I;, wI" l ~OU WlofIt W

*

diKu .. .. ", ... n~ .,..., , ... ,t on " t i. , di . Io!rJO ,..,t/1 \'IM' ..

C. .. ~bo", )'0 '" <ont. nt.
D, ,,••,,p-.-.g ~·ob· .im, . "V '" m.h

>n!O<m.I.. ~ , "" """ inS ......

'f"" , ;'1""" rort\lft'lb~r .....,..h1ng ""'~
)o)(I .... e of'ered o:t>em • 'ink tD some !n.Ipptllt. üle w e~- p.>fe wUhotJ t prow
.,.:><rlpu,n 01W"->1 " h! ~oen ~wtnd tI'>!: 1iN<, )'\ u' l nov C'f .... tl'>!:m ~ ,.,
C, tI< .. fI«1 " , YO"- , ... terl, " pr"",

..t' f' .. ~ nto".

*

!tr ~m

od. "

Don " Jorogo . !tr u

Dl n 'IM c.n< • • '.d .... '" wob ....... 10 .. . .. d SlO. pl ~MIl.l lo ".
D.n·1 U, In~ in l>ol"'oo;" f.. mc.. "1>l' ft.o,1 ir -.t1otjOOf
~
. flor. T.........,; .,.,..." . .. o;tt
"", lu.:., ""'I , .... "",:1'1 m... !;im .
"'-'~"g . ~ ' oA . rtI<l. .. 1.... "" o1na

••

.ng'"

,,"'·,ilo ••

,~

t~ .. ,

D

Fehlerbehandlung
Im Internet Ex plorer 6 und 7 wird die Pseudoklasse ;f jrst ·

line fehlerhaft implementiert. Beide Browser interpretieren die
Angabe
' l iste ul ll:flr st-llne
f o nt-wel ght: bold;
background'color: !fff eedd;

I
für die ga nze

erste Zeile, auch für den list en marker, der sich

außerhalb dieser Zeile befinde t . Demzufolge wird die Hinter6.2

listen

391

-

--,_
......... --."_."...,"'
... .....
............
•.
.•.
...,_." ........,-.
"""... .............
.... ... ..... .. ......
.-.-... .........
"..
... "-,_.-,,,.
"'''''''''
................
''...,'''''- ..
. ..." .........
.. _ _ .
_.. _
n " __ __ ........ .....
--"
_-.-.,

_
-_
--_ _--- _
~"

"

~,._'"

"'~~,~

'"~
~

""~~'

~-

~-_

~

-""

'""_.~

,.~~ ,,_. ~~

- .'

~",._

~."

........"

grundfarbe auch auf den Listenmarker übertragen und bedeckt
diesen. Das Problem kann mit JE Conditional Comments gelöst

' ''~ -

~

werden, indem man in der Datei ie.ßs

"

.~."

.... Abbildung 6. 20
Die Darstellung von :1irst·line Im
I nternet Explorer

'liste Lil l i:first- l ine (
background-image: url(bu l 1et-l . gif);
}

expliz it angibt und IE Conditional Comments vor <f head > einfügt:
TIPP

Mehr über IE (onditional Cornrnents erfahren Sie in Kapitel 10.
lI Srowserkompatlbilitäh .

<! --[if I E]>
<link href-"ie.css " rel-Hstylesheet " type- " textfcss" f>
<! [ endif J --> <f head>
Für weitere Überraschungen sorgt der Internet Explorer 7. Bei
ihm zeigt das Sei tenbild außerdem merkwürdige Hintergrundeffekte.

Abbildung 6. 21 ~
Falsche Hintergrunddarstellung im
Internet Explorer 7

.... . _ " ....·u ' .. ..l l
"'''..... lIi ..

""'(.,.,~

np.. ..... _

_ ......".. __ ,,,.. ... 'x'. I>'"

,..,. .... ....." ...

...

~

, . " . ...... foo • _ , ... , 11 . Iarrf "., ..... ........ """"
.... , ,.,. , ..,.. . ..... . . ,..,. , .. _
" .. \'00 ..... ......

,-

• >'00 """"'"0 ........ ...

, "." ""'''

........

,.''''...,'....... """ .......

-_..... ...

............. .... ... "", ..........1..... h .. .... " ............ , ,,~

"" .

.~ .... ,.. h .,..,~ ...

n.. ...",,,,,, " ..,_.",..... "" ........ ........... , .. ,......... ......... _ "', ..

..... -.-.. . ..... . . . ""0 .......... , .. _

..."", ...,_.,. ....
... _...... "'''''''''''''..

, .. , . ... .... _

._,

_

...... ,,".., .. ,...

........... ~ , .. "' .... lbo~, .... _

TIPP

~.

' '''''~ . ..
O<~

...... ............ ,""... ". ........,,

DOll " ..........., '>IOn

_" .. ,. ... 'o ..... """",... ,,,,",,,

th.... ~"" , .. ... _

"~

~ .,. "' '''

.. _ ~. ..... , "" ,,,~ ....... "oj ..... "'" ,"'. , ...

.. "' ....... '" " .. ........ .. " ... , b .... , _

Unterschiede im Rendering der
Seiten treten in der Praxis häufig
wegen de~ unter~chiedlichen
Gewichts von CSS-Selektoren
auf. Browser interpretieren nur
Angaben, die spezifischer als
alle anderen Stilanweisungen
sind (CSS-Spezifizität). Das
Gewicht der Selektoren wird
dabei einzeln berechnet und
verglichen. Mehr zum Thema
finden Sie im Beitrag . (S5 5pecificity: Things You 5hould Know«

w...... " , ......" ",,",

....... , .... . . . """" . . . . . _, . . ............ .

fNok _ . , .. .... '"" ....... "" "·b

..

","", _

_

.... ...

"' ...... ,..~

_'''~

...

_-

"n". ,... ,.•• _ . .. ...........

. _ , ...... ,_ ..... _

.,. _

~ <0 '

.

Um dem Hover-Bug vorzubeugen, genügt es, den Selektor #11 s te
1i ul 11; f1 rst -1 ine »stärker« zu machen, also die Angabe spezifischer machen, indem die 10 fjroot_l lst explizit angegeben
w ird. Nämlich wie folgt :
l/lls te #root_l1st li ul 11:first - lfne
text-transform: uppercase;
background: t r ansparent;
}

(http://www. smash! ngmagazl neo

coml2007/0 7/27/ crs- spedficitythlngs -you-shoufd-know, Linkcode 222).

392

6 listen und Tabellen

Zudem wird der »Einrückungs-Buge vermieden. wenn die Angabe
mar91n: 5px 05px2,5em; imSelektorflllste11 ull1 durch die
exaktere Angabe margin: 5px 0 5px 5px; ersetzt wird. _

6.3

I

Listen im Einsatz

Am häufigsten werden listen in der Praxis zur Auszeichnung von
Navigationsmenüs und zur Gliederung von Inhal ten im Inhalts·
bereich verwendet. Als solche sorgen sie in Kopf- und FußzeHen
sowie Sidebars für eine übersichtliche Darstellung von Navigationsoptionen. In diesen Fällen werden sie häufig mit auffallenden

,.

und großen l eons versehen . In Fließtexten b leiben sie dagegen
meistens sehr subtil und werden bloß durch eine Einrückung und

Ustenmarker ausgezeichnet. Bunte und auffaU ende Grafiken werden hierbei eher selten verwend et. Grundsätzlich sind sowohl
vertikale al s auc h horizontale Listen weit verbreitet. Das Design
hängt w ie immer von d er Funktion ab, welche eine liste im Einzelfall zu erfüllen hat.

... Ab bildung 6.22
Eine vertikal und horizontal aus~

gerichtete liste.

---- ~-

~~:.:.r

...

--~~.

~ . =~

'f::,,;",..~"::

c.--

-- --- -- """"'"

•.-

--

recenl blog articles

-... Abbildun g 6.2)

... Abbildun g6.24

Eine horizontale und eine verti kal e ungeordnete liste.

. .. oder eingerückt und mit Us tenm arkern versehen

listenelemente können als Blöcke angezeigt werden ...

werden .

-,- -_-----_._.._-_._-- ,.....,-, ----_._--

,
S-_·

-~-----

..--

. . . :,..--..
~

. ~-

-----_
. --. -- '-"-.------ -_.
---,-'- --k_
--'-'
,.. -.
_
...
__
-..--- ---,--------.......------_. -- -_
Internet

. . . . . _,w . . .

""",

--

,', 0
__

....

.

-~

--'

... Abbildung 6.26
... Abbildun g 6.25
Eine ungewöhnliche ungeordnete liste bei

Eine aufgeräum te ungeordnete liste bel Bell.ca .

Melhod .com

6.)

listen im Einsatz

I

393

OUI C'ClYI 'Cl O ~ ~ ~"u

r"", \'Ide<>lo"""""

...

C_vc~

_~ :riOd""''''' buO "''''' .... . .. ~1h.
. ttI."~
4'. lfo,, 'I ~
~

Hoc . . . . . ' L_

toocwn.n,..., "" .""..."

Top Ton
1--,

--

_,l'i2=::r- 3 ·~·
...-.. 4 ''_'
i0 5nt
...... . .

l ~~

=.

. ....... digül ",;100
folu.

__'

tm_ 11, (1-.-0 e.... o.

"~ """ idi "ll

T.... Gn.Tu ... TI-od"'.' ............ , '\4 .... ~

",_ tto ... ( ...", """
01,,,,
... uw.. _ 90, ", .. "_Co";,w.....,
.... ..".

T",,", ",,,,,,,,,, .. ,·o,, ~

-

' ''''90 , .. , .........

~"" , •• ..d

1'l0iii

.. Abbildung 6,27
Eine geordnete liste, typografisch sch ö n aufbereitet.

i", ___ Ir. "",

_ -oIov_

'.""'_vert
' ' ' ' 11 'Oem ""0 _ Iv_
10.,......0;,

IIOV""

FUo

~meo'»

oha 'U,

..-ly f. • .."., .... I. . .... '" ·7th

Iu " ~ .·

.. Abbildung 6.28
Inhalte aufberei te t in Form einer ungeordneten liste.

_
_-_
__
._
........
----_-_ ......___--- .. --_-----_._
-- _---_
.
-..._---"'------...----_
...--_. -_.- -.-_.
---_
.
_
------_
_
.
-----,......-_.,
.__---.--_
--..----_
_--..
-_
__._-_._---.._,_.__.__
-.
--__...--_---_
--_._
..... _-_
_
_--_.
--_
.,----_
. _.. _--_._--_.
---------,--,._...
--_
__
.......
..
_---_
--.
_...
_
... __..... - .......

....

. ....

...

,

~_

_~

.......

.......

.. ClUT'" . . ..... , . ..

,". ........

....
..
........ . .....
.......
....
......
........
..
...
... .... ,.."' ........
-.......... .... .........
.. . h

••• MC d

. " 'AU . '

.•.

__

.•
..... .. _.._.
_____

--- ~ _
~"_.r

_~

,~ ~-~ -- - ­

~- - R

--~_._._-~-

-~ -' ----

.......

__

.

....

.. .... _,.

111 ....... _

..

....-

"VUT"I " ' ''AO''' '''~

.. Abbildung 6 ,29
Eine elegante klassische liste im
Fließtext bei Chamainc.com und
Simpiebits.com

Tabellen
In der modernen Seitengestaltunggelten tabellenbasierte layouts
als überholt und ineffizient. Ni cht zu Unrecht: Mangelnde Flexibilität und mühselige HTMl-Formatieru ng sind bei global en Veränderungen des layout s komplex und zei taufwendig. Doch dies
heißt nicht, dass Tabellen prinzipiell vermieden werden sollten.
Zu einem Zwe ck dürfen und müssen sie eingesetzt werden. Nämli ch dafür, wofü r sie eigen tlich gedacht sind : zur Darstellung von
Daten in tabellarischer Form. Etwa wenn es sic h um die Darstel·
lung von statistischen Erhebungen, Kalendern oder Fahrplänen
handelt.

XHTMl-M a rkup für Tabell en
Bei der Formatierung von Tabellen st ehen Webdesignern neben
bekannten Elementen (tdb1e, tr , th und td) eine Fülle von
zusätzli chen Tags (captl on, thead, tf oo t, tb ody, co 1group, co1 span, rowspan usw.) zu r Verfügung. Diese können sich häufig als
394

6

listen und Tabellen

I

äußerst hilfreich erweisen, vor allem wenn es um umfangreiche
und komple)(e Tabellenstrukturen geht.
In Tabellen dienen zusätzliche Markup-Elemente dem Zweck,
die Semanti k der Tabelle näher zu erläutern und ihre Struktur
genauer zu spez ifizieren. Je deutlicher die Trennung zwischen den
eigentlichen Daten und ihrer Form in der tabellarischen Ansicht
ist, desto verständlicher wird die Tabelle.

6.4.2

table, tr, th, td , caption - Tabellen , Zeilen , Zellen,
Überschriften

In XHTML werden Daten einer Tabelle bekannt lic h in Zellen angeord net, die Zeilen und Spa lten entstehen lassen . Fur das Ma rkup
der tabellarischen Darstellung werden folgende Elementtypen
verwendet:
... Das Element tab1e stellt den Container für die tabellari sche
Ansicht bereit.
.. t r markiert eine Zeile innerhalb einer Tabelle .
... th markiert eine Zelle, die zum Kopf einer Tabelle gehört.
... td markiert eine Zelle, die zum Inhalt einer Tabelle gehört .
.. captl on legt die Tabellenüberschrift fest. Das Element kann
wie alle anderen auch mit CSS gesta ltet werden.
Das folgende einfache Beispiel soll die Funktion jedes Elementtyps veranschaulichen .
<tabl e summary-"Bu chl nventur ml t Autor. Tl tel,
Prei s " )
<captl on>Tabel1e 1: Buchinventur< /c aption >
<tr >
<th >Pos. </ th >
<th ) Aut or <I t h)

.. listing 6.1
Das Grundgerüst

<th ) Buch< / th >
<th ) Prels ( &euro; )</ t h)
</ t r )
<tr >
<td >1. </ td)
<td>G. MarQuez </t d>
<td >Hundert Jahre Elnsamkelt </ td >
<td >19. 90 </ td >
</tr)
<tr >
<td >2 . </ td )
<td >G. Orwe 11 </ td >
<td >1984 </ td >
<td ) 19. 90 </ td )
6-4

Tabellen

I

395

</ t r>
<tr >
<td >3 . </td >
<td >A. Exupery</ td >
<td>Oer Kleine Prinz </td >
<td >9 , 90</td>
</ t r>
<! -- we1tere Zellen -- >
</ t ab l e>

Pos .

Abbildung 6.30 ..
Buchinventur in TabeJlenform

Amor

Tabclc I: Buchinventur
Buch

I'I·ei~

(f)

2

G. MiU"c.uet Hund~rtJah"e Eilllamke:t 19, 90
G Otwdl 1984
19.90

3

A. Emip:ry Der Klctlc Priur:

9. 90

Zeilenüberschriften müssen nicht unbedingt horizontal ausgerichtet sei n. Möchten Sie sowohl vertikale als auch horizontale
Kop(zeilen setzen, zum Beispiel bei der Gestaltung eines Fahrplans, so können Sie jeweils in der erste n Position der Zeilen den
th-Elementtyp benutzen.

<table >
(c aption>Tabelle 2 : Ze1tplan </c aption >
<t r>
<t d></t d>
<th>9-11</th>
<th>1l- 13</t h>
</tr >
<t r>
<th> Mo .< /t h>
<td >Brain st o rm1ng< / td >
<t d>Meetlng </ td >
</ t r>
<tr >
<t h>Ol . <I th >
<td></td>
<t d >0 ff i c e<I td >
</ t r>
<tr >
<th> Mi . </t h>
<t d>Meetlng </ td>
<td >O fff ce</ td >
</ tr >
</ table )
396

I

6

listen und Tabellen

I

Tibete 2' Zei:pIa.1
'. 11
11 - 13
1>..10.

Br2mrtonm... ~e~
015<,

OBice

6.4-3

.. Abbildung 6.31

Tabelle 2 verwendet vertikale und
horiZ ontale Kopfzeilen.

Summary. abbr- Zusammenfassung und Abkürzun g

Um eine Tabelle übersichtlich zu gestalten, empfiehlt es sich,
zusätzliche Attribute wie summary und abbr im Tabellen-Markup
zu verwenden . Das Attribut surrmary stellt eine Zusammenfassung von Inhalten einer Tabelle dar. Diese wird von visuellen
Browsern nicht angezeig:t, von speziellen Browsern aber erkannt
und in entsprechender Form ausgegeben, summary wird als Attribu t von Elementen des Typs table benutzt.
<table summary .. .. E1rle Tabelle zur durchgeftlhrten
Bu chlnventur. Enthalt Angaben Ober Autor. Buch und
Preis. ~ )
Das Attribut abbr definiert eine abgekürzte Form von Zeilen· und
Spaltenüberschriften. Bei langen Überschriften kann abbr die
Navigation in der Tabelle erleichtern : Die Überschriften werden
dann nur beim Durchlauf der Kopfzeile ausgegeben, anschließend werden sie mit Werten des abbr-Attributs abgekürzt. Das
Attribut abbr kann fOr Elemente des Typs th und td verwendet
werden .
( th abbr" "Prel s " ) Prel s 1n Euro </ th )

6.4 .4

Zeileng ruppen und Spaltengruppen

XHTML gestatt et es Webautoren, mehrere ZeHen bzw. mehrere
Spalten zu einer Einheit zusammenzufassen. Dies kann hilfrei ch
sein, wenn Sie gewisse Zeilen oder Spalten mit einer ei nzigen
(55-Angabe direkt hervorheben mächten .
Zeilengruppen bestehen aus einem Tabellenkopf ( thelld),
einem Tabellenfuß (tfoot) und einem oder mehreren . TabelJenkörpern. (tbody , Rum pfbereiche der Tabelle) , <thelld > und
<t f oot> so llten ausschließlich zur Darstellung von Kopfüberschriften und Fußzeilen verwendet werden. <t body> sollte ausschließend die eigentlichen Daten enthalten.
Die Reihenfolge der drei Elemente folgt dem angedeuteten
Schema :

6 ·4 Tabellen

I

397

TIPP

Anstatt thead, lbody , tfoot und
co lgr oup zu velWenden , nut~
zen Designer in der Prru<is allzu
häufig zusätzliche Klassen und
105. Diese machen den Code
unObersichtlicher und erzeugen
überflüssige Angaben im Markup
und Im Stylesheet. Dagegen
können Sie mit HTML-Tags Designelemente direkt ansprechen,
ohne jedes Mal Anderungen im
HTML-Code vorzunehmen .
Dies ist der wesentliche Vorteil
derartiger Auszeichnurg von Elementen in ()()HTMl.

<thead>
<t f oo t >
<tbody>

</thead>

</ tf oot>
</ tbody>

Dadurch wird zum einen erreicht, dass Browser bei langen und
komplexen Tabellen Kopf- und FußzeHen direkt anzeigen können. Zum anderen wird die Tabelle - falls der Browser mitspielt
- beim Drucken mit Kopf- und Fußzeilen versehen. Und zwar auf
jeder der Seiten, über die sich die Tabelle erstreckt.
Sie können mehrere Zeilengruppen definieren, etwa durch :
( tbody ld- ' r owgroupl ' > ... </ tbody> und <tbody
f d-" r owg roup2") ... <I tbody)

Der Zugriff via CSS geschieht dann aber table tbodyllrowgroupl { I bzw. tbody!Jrowgroup2 { }.
Spalten lassen sich mit den Attributen co1 und co1group zu
5pal tengruppen zusammenfassen. Di e Anzahl der Spalten wird
entweder durch die Aufzählung von co 1-Elementen realisiert
(jedes Element steht für eine Spalte der Gruppe)
<tab1e>
<cap tf on) Tabel1e </captf on>
<co1 gr oup>
<col I)
<col I)
</colgroup)

</table)
oder durch das span-Attr ibut des col group-Elements.
<tabl e)
<captfon)Tabelle</captfon)
<colgroup span- ' 2' I)

</ t ab1e)
Da s Attribut span gibt an, dass colgroup zwei Spalten vereinigt
(Dspans,,). Beide Methoden schließen einander aus und d ürfen
nicht gleichzeitig verwendet werden. Zur Gestalt ung mit C5S
können sie über Bezeichner (lOs) direkt format iert werden. Im
folgenden Beispiel werden zwei Spalten zusammengefasst und
mit einer CSS-Angabe gestaltet.
<t ab1e summary- "Bu chfnven tur gibt eine übe r sicht
von BOchern 1n I hrem Einkauf swagen. m1t Preisen 1n
Euro. " )
<captfon style- ' text-a l ign:le f t: f ont- wefght:
398

I

6

listen und Tabellen

bold ' >Tabelle 3: BU cher in Ihrem Efnkauf swagen
</c apti on >
<colgro up s pan- ' 2' I>
<colgr oup span- ' 2' st yle .. ' ba ckgr ound- co l or:
fl eeeeff" />
<thead >

<tr >

I
HINWEIS

Inline-CSS-Stile soUten Sie in
Ihrem Markup natürlich vermeiden. In diesem Beispiel

werden sie bloß zwecks besserer
Deutlichkei t und Kompakth eit
ei ngesetzt .

<th >Pos . </ th >
<th ) Au t o r <! t h>

<th >Bu ch</ th >
<th >Prei s ( &eur o : )<j th )

</ t

r>

</ thead )

<tf oo t >
<tr )

<td ></td >
<td ></ td >
<td ></ td )
<td ) 49, 70</ td)

</ t r)
</ t f oot>
( tr )

<td >l. </td>
<td >G. MilrQuez </td >

<td >Hundert Jahre E1n samke1t </ td >
<td >19. 90 </ td >
(/tr)
( tr )

<td >2 . </ td >
<td >G. Orwell (/ td >
<td >1984</ td )
<td >19 . 90 </ td >

</ t r>

<tr >
<td >3 . </ td >

<td >A. Exupery </td >
<td >Der Kleine Pr inz </ td >
<td >9. 90</ t d>
</ t r )

<!-- weitere Zeilen -- )
</ table >

6·4 Tabellen

I

399

Abbildung 6.32 ~
Die erste Zeile liegt innerhalb
<thead>, die letzte innerhalb von
dfoot>, der Rest befindet sich
in <tbody>. Zwei erste und zwei
letzte Spalten werden zu einer
Spaltengruppe zusammengefasst
und gestaltet.

TabeUe 3: Büchel" in DU'1I' 1n E'ink aufno'ae:en

Pu .

Autol'

Buch

Pni., (€)

1.

G Marque.z:Hundert lahre Einsamkeit 19,90

2.

G. OrweD 1984
A Exupery Der KIeme Pnn.t

3

6.4.5

19,90
9.90
49,70

Co lspa n und rowspa n - Zeilen und Spalte n
verbinden und vereinigen

Um festzulegen, über wie viele Spalten bzw. Zeil en sich eine
Zelte erst recken soll, werden die Attribu te colspan bzw. rowspan ve rwendet . Standardwert {Ur beide Att ribu t e ist 1. Beide
Attribute können miteinander kombiniert werden und können
bei Elementen des Typs td und th angegeben werden. Hierzu
ein Beispiel :
<table summary- ' Eine Über sicht von BUchern in Ihrem
Einkau f swagen. mi t I nformati onen zu BOc hern ( Aut or
und Buchtitel) sowie Prei sen in Euro. ' >
<capt i on>Tabelle 4: Bac her in I hrem Einkau f swagen
</c apt; on>
<co lgroup id - " spalte l" span- " l" I>
<co lgroup id- ' spalte2 ' span- ' 3 ' />
<thead >
<t r >
<th r owspan-' 2 ' >Pos . </ th >
<th co l span- Rr >In f ormati on zum Buc h</ th >
<th r owspan- ' 2 ' >Prel s ( &euro; )(/ th >
</ t r >
<tr >
<th >Au t or </ th>
<th>Titel </ th>
</ t r >
</ t head >
<tfoot >
<tr >
<td co1 span- ' 3 ' ></ td >
<td >49. 70</td>
</ t r >
</ tfoot >
<tr >
<td >! . </ t d>
<t d>G . Marquez </ t d>
<td >Hundert Jahre Eln samkeit </ td >
<td >19, 90 </ td >
400

I

6

listen und Tabellen

I

</ t r >
<tr >
<td>2 . </td>
<td >G. Orwell< / td >
<td >1984</ td >
<td >l9, 90 </ td >

</tr>
<tr >
<td >3 . </ td >
<td>A. Exupery </ td>
<td>Oe r Kl eine Prlnz< / td >
<td>9 , 90</td>

</ tr>
<1-- wettere Zelle n .. >
</ table >
T.b.l, 4: Biieh.r KllUcrll

r.,.

Eink.1~SWA,&ell

I"r..... ~ ri.n 71Uft Ro... h

lirol

1\,\1(1'

1

o MKpt!

2
3_

G Qr....:l

I'rPu (f )

RU:'Idert l abIl' UlSII'llttl 19. 90
fJ984
19, 90

~ ~ ery ~Jr:m.

Pllm:

"'0
4 9. 70

.. Abbildung 6 .]]
Die untere leere Zelle nimmt d rei
Spalten ein; • Pos.• dehnt sich
auf zwei Zeilen aus, . Buch. und
. Autor. auf zwei Spalten.

Dabei ist zu beachten, dass die Anzahl der Spalten und Zeilen
erhalten bleiben soll : Nimmt ein Block also den Platz von zwei
Spalten ein, so sollte die jeweilige Zeile zwei Spalten weniger,
also auch zwei <td>- bzw. <th>- Elemente weniger besitzen .
In den letzten Beispielen wurden Tabellen der Übersichtlichkeit wegen mit zusätzlichen C5S-Angaben gestaltet. Ohne zusätzli che Gestaltung erscheinen einzelne tnformationsblöcke nämlich
allzu dicht beieinander und lassen sich weder gut unterscheiden
noch leicht zuordnen.
Tabelle 4: Bocher in Ihrem Einkaufswagen
Po ~ .

Illfoll.nari oll n un Bnch

Tilel

Autol

Pnis Cf)

I.

G. MarqueI Hundert Jahre Einsamkeit 19,90

2

G Orwell

3.

A Exupery Der Kleine Prinz:

1984

19,90
9,90
49.70

.. Abbildung 6.)4
In der 5tandardansicht ohne (55Formatierung sind Dil ten nur
schwer lesbar.

Eine benutzerlreundliche Tabellendarstellung erlordert daher
(55-Gestaltung. XHTMl-Markup bietet dabei zahlreiche Optionen, Tabellen mittels CSS präzise und detailliert zu gestalten .
6.4 Tabellen

I

401

6.4.6

Ges taltun g von Tabe lle n mit ( 55

Im Wesentlichen gelten für Tabellen dieselben Regeln wie für
andere XHTMl-Elemente auch. Dabei können allerdings zusätzliche Eigenschaften verwendet werden. Besonders wichtig in der
Praxis sind die Eigenschaften border, border-collapse . border-spacing, empty-cells und caption-Slde.
.. border legt die Gestaltung der außeren Grenze einer Tabelle
fe st (z. B. border; 1 px solid tieee ;) .
.. border-collapse kann die Werte collapse und separa te
annehmen. col1 apse sorgt dafür, dass zwei oder mehrere
Zellen keinen Abstand voneinander haben. Beachten Si e, dass
dies zur Folge haben kann, dass auf den Rahmen einer Zelle
die (55-Gestaltung von zwe i benachbarten Elementen angewandt w ird . Standardwert für border-collapse ist separate. dabei hat jede Zelle ihren eigenen Rahmen (z.B. border-collapse: col l apse;) .
..

border·spaclng beschreibt die Abstände zwischen Zellen
und Spalten. Um die Ei genschaft verwenden zu können, muss
die Tabelle auf lI$eparate Modus« gesetzt werden, Die Eigenschaft kann zwei Werte annehmen. Der erste legt den horizontalen Abstand der Zelle fest (links und rechts von der Zelle),
der zweite den vertikalen Abstand (oben und unten von der

Zelle). Wird ein Wert vorgegeben, so wird der Abstand fOr alle
Richtungen benutzt.
.. Mit der empty-cells-Eigenschaft kön nen Sie vorgeben, ob
die Grenzen zwischen leeren Zellen angezeigt werden sollen
(show) oder ni cht (hide) . Sie kann bei beliebigen Elementender
Tabelle verwendet werden (z,B. table colgroupffcolgroupl
I empty-cells: hlde;)) .
.. capt1on-slde setzt die Position des <c aptlon>-EJements in
Bezug auf die Tabelle. Das Attribut kann die Werte top, 1eft,
right und bottomannehmen, wodurch die Tabellenbeschrei bung oberhalb, links, rechts oder unterhalb der Tabelle angezeigt wird (z.B. cap tlon r cap tl on-slde : bottom; 1) .
.. Bei der Gestaltung von Tabellen mit (55 ist die Ebenenanordnung innerhalb des Tabellen modells zu beachten. Aus Abbildung 6.35 ergibt sich die Priorität der Angaben: Im Browser
wird diejenige Formatierung angezeigt, die gemaß dem
Schema möglichst weit von der ta b1e-Ebene entfernt ist. Be i
der Angabe der Hintergrundfa rbe für ein colgroup-Element
und ein tbody-Element, die dieselbe Zelle gestalten, wird die
Zelle entsprechend der Formatierung des tb ody- Elements
angezeigt.

4 02

I

6 listen und Tabellen

I

Außerdem sollten Sie die Darstellung der Tabell e in den gängigen
BrCMIsern genauer untersuchen . Der Internet Explorer bis einschl ießlich Version 6 ist weder mit dem Attribut cil ptlon- slde
noch mit dem Separate-Mod us hinreichend vertraut; im Zweifel
sollten Sie die Tabelle auf den Collapse-Modus umstellen.
.. Abbildung 6 .)5
Ebenenansicht des TabeUenmodelis In XHTML laut W3C-5pezlfikatlon
raw.

raw gro up.

colu mnl

-::><~

6.4 .7

CO' Um" graul"!

Tabellen im Web 2.0-look

Schritt für Schritt : Ansprechende Tabellendarstellung
Als Beispiel wi rd basierend auf dem XHTM L-Markup der Tabelle 4
eine ansprechende tabellari sche Ansicht gesta ltet.

Po ~ .

Tabelle 4: Bücher in Ihrem Einkaliswagen
hlfo l1n ~rioll l1un Buch
Preis (€)
Tilel
Aulor

1.

G. Marqucl Hundert Jahre Einsamkeit 19. 90

2

G. OrwcU 1984
A Exupcry Der Kleine Prinz

3.

11

19,90
9.90
49.70

.. Abbi ldung 6.)6
Die Ausgangssituation

Typografi scher Satz . äußerer Abs tand

Um der Tabelle eine fris che Gestalt zu geben, werden zunächst
Schriftart und Schriftgröße verändert . Ein äußerer Abstand (mu g1n) sorgt dafür, dass sich die Tabelle von den sonstigen Inhalten
der Seite abhebt. Außerdem wird durch die Festlegung der border- spac f ng-Eigenschaft explizit angegeben, dass benachbarte
Tabellenzellen im Separate-Modus keinen Abstand voneinander
64

Tabellen

I

403

TIPP

I n diesem und In weiteren Beispielen wird Global Rese t
( > Inarg l n : 0 : pa dQl ng : 0 ; I)
in der Regel stillschweigend
vorgenommen, um Kompat ibilität sproblemen fr ühzeitig und
effekt iv vorzubeugen.

haben sollen . Damit kann man nachher lei chter kontroll ieren, ob
die Tabelle konsist ent ist , also beispielsweise keine Zeile mehr
Spalten als die übrigen Zeilen besitzt.
t able {
f ont: nor mal 0 .8em "Luc lda San s Un l co de " , " Trebu chet
MS". Verdana . Ar fal . Helvetf ca . san s - ser l f:
rnargln : lern 0;
border- co l l apse: collap se:
border- spa c ing: 0;

I
Tabelle " gucher In Ihrem EInkau fswagen
Po s .
1.

Abbildu ng 6.37 ..
Tabelle mit festgelegtem typografis chen Satz

2.
3.

Information zum Buch
Prei s (41)
T itel
A uto r
G. MarquezHundert Jahre Einsamkeit' 9. 90
G.Orwell 198<1
19, 90
A. Exupery Der Kleine Prinz
9. 90
"9, 70

EI

Formatierung d er Ta belle nbeschreibung
Im zweit en Schritt wird das capt f on- Elemen t format iert und un t er
die Tabelle in Kursiven angebracht. Die typografische Gestaltung
der Beschreibung w ird ni cht vom table- Elem ent geerbt und ist
expliz it anzugeben .
ca pt l on (
f ont: itali c O.gem " Trebuc het MS", Verdana,
Arial , Hel veti ca, s ans - ser if;
t ext -a l fgn : r fgh t:
capt f on- sl de : bott om;

r

Pos.

I n fo rmatio n z um Ru c h
A uto r
Tite l

Pr ei s (41)

1.
2.

G. Marquez Hundert Jahre Ei nsamkei t 19, 90

3.

A. Exupery Der Kleine

Abbildu ng 6.38 ..
Die Tabellenbeschreibung wird
unter der Ta belle angebrach t.

G. Orwell

198<1
Pnnz

1 9, 90
9 . 90
4 9, 70

Tilbtllt 4: Blkh" In Ihrffll Dniciluf$Wil3tn

IJ

Einfü gen innere r Abs t ä nde zw ische n den Ze lle n
Zwischen den einzelnen Zellen der Tabelle muss f ür eine gut e
Lesbarkeit gen ügend Frei raum vorhanden sein. Dies gi lt sowohl
fü r die Kopfzellen als auch f ür die Datenzellen.

40 4

6

listen und Tabellen

I

th, td (
padding: O.4 em O. 4em O.4em O.8em:

J
I nformAtion z um Buc h
Po ~.

Autor

Ti t el

1.

G. Mn quez

HUnderlJihr~

2.

G. OM'ell

198~

19. 90

3.

A.

Der Kle.ne Pnnz

9,9(l

E)u~ery

El nsamK l!lt

1 9. 90

4~,

70

.. Abbildung 6 .39
Ein innerer Abstand zwischen Zeilen wird eingefügt.

a

Gesta ltung der Kopfzeile n

Kopfzeilen einer Tabelle sollen sich vorn Inha lt abheben und eine
leichte Orient ierungshilfe darstellen. Daher werden sie hervorgehoben.

th
f ont: bald O.85em Arlal.

~Trebuchet

M$" . Verdana .

Arial. Helvetlca . san s-se r1f:
color: 11116688:
letter- spacing: 2px :
t ext-t r ansform : uppercase:
t ext-a llgn: center:
background -co l or: flcceeff:

IIIF OR MATIOII Z UM BU CH
I' REI!> 11)

P OS.

AUTOR
M~'qut'

TITEL

Hundert j..ln,

EI"~<1"Ü~lt

1.

G.

19,90

2.

G.Ot'lt'el l

1984

19,90

3.

A. Exupery

02r Kieme Frlnz

9.9D
49,70

Damit sich beide Ebenen im Tabellenkopf leichter unt erscheiden
lassen. wird ihnen ein Rahmen mitgegeben. Beachten Sie bei den
Rahmenangaben im Separate Modus, dass es nicht erforderlich
ist , nur zwei Rahmenpaare festzulegen (z. B. nur den linken und
den unt eren Rand). Im Separat e Modus werden benachbarte Zeilen immer durch eine Rahmenlinie voneinander getrenn t.

.. Abbildung 6.40
Die Kopfzellen der Tabelle werden mi t einer Hintergrund farbe
versehen.

th [

border: Ipx so lid flbbdddd:

IUF O RMATl O Il 2 UM 80 C H

P OS .

Abbildung 6.41 "

PREI S ( t l
AUTOR

TITEL

1.

G. Marqu€z

K!Jndert Jahre Bnsamteit

19,90

?

C. OrweU

1 984

19.90

3.

A. Exupery

DEr Kleine Prinz

9, 90
~9,

Überschriftz ellen in der Kopfzeite
werden voneinander durch einen
Rahmen get rennt.

11

70

Grenzen für die Datenzellen setze n

Die Datenzellen werden durch einen leicht erkennbaren Rahmen
voneinander getrennt.

td

color: fI666677:
bo rder: Ipx so lid IIbbdddd:

IUF O RMATtOU ZUM BU C H
P OS .

O\UT O R

TITEL

1.

C. Marquez

Hundert Jah re Einsamkeit

19, 90

2.

G.Orwel l

1984

19, 90

3.

A. Ex upery

Du Kleine Prinz

9, 90

Abbildung 6.42 ..

49,70

Die Datenlellen weisen nun einen
Rahmen auf.

D

Spalten hervorheben

Mithilfe von definierten Spaftengruppen können Spalten mit
wenigen CSS-Angaben einheitli ch gestaltet werden. Mit dem folgenden Quellcode wird die erste Spalte der Tabelle markiert.

table colgrouplls paltel (

,

ba c kgro und - col or: rgb (241. 250 . 25 3 ):

406

I

6

listen und Tabellen

I

IU fO RM A TIO Il ZUM BU C H

p os.

AU TOR

TITEL

1.

G. Marql,l!Z

Hunde" Jahre

2.

G. Orwe I

1 ge"

19,90

A. Exupery

Der Kleine Prnz

9. '"

,.

Eimam~elt

19,90

49. 70

B

... Abbildung 6.43
Oie erste Spalte wird markiert.
Oie drei unteren ZeUen wurden
Im (X)HTML-Gerusl zu einer Einheit zusammengefasst. Auch sie
werden deshalb markiert.

Markierte leere Räume entfernen

In der unteren Zelle ist ein Leerraum entstanden, der sich entsprechend dem XHTML-Markup auf drei Spalten ausgedehnt
hat. Um leere Räume zu entfernen, verwendet man das empty·
ce ll s-Attribut für die Zellen des t f oot-Elements. Zudem wird
ein wenig CSS-Styling betrieben.
tfoot td I
background · co l or: IIfff;
color: 11333 :
f ont·wefg ht: bold;
empty-cells: hfde:

I
IIlf O UIIATi OIl ZUM BUC H

pos.

PREI S 10
A UT O R

TITEL

1.

G. Ma.quez

Hun(l~fI

Ja/1fe ElnSlrnkelt

19, 90

2.

G.OlVlell

198'1

19, 90

3.

A. Exupery

Der Kleine Prinz

9,90
"19, 70

... Abbildung 6 .44
_empty_cell s. wird auf _hide.
gesetzt.

Die Grenzen werden entfer nt und leere Zellen werden gelöscht
Um die leeren ZeUen im tfoot-Elemen t zu entfernen, wird der
Rand der Zellen entfernt.
tfoot td I
border: 0;

Die . Preise-Zelle in der rechten unteren Ecke wird hervorgehoben :
td.prel s
border: Ipx so lfd Dcldad7 ;
6.4

Tabellen

I

407

background-color : IJe8f6fc;

I
Zu diesem Zweck wird die jeweilige " Preis.-Zelle im (X) HTMLGerüst mit einer (55-Klasse versehen:
<t f oo t >
<tr >
<td col span- " 3 " ></td)
<td class- " preis " >49 . 7ü</td>
</ t r >
</ tf oot)

EI
TIPP

Beachten Sie, dass tr:hover
nicht bei allen Browsern wie
ge.vünscht funktioniert. Grundsätzlich ist es daher besier,
tr:hover td I

Hover-Effekte festlegen
Schließlic h werden Hover-Effekte für das Darüberfahren der
Maus über die Tabelle festgelegt.
tr:hover {
baCkground-color: lIeeffcc:
cur so r: pointer:

background -co l or : IIfOfad4:

zu verwenden, also den Hintergrund direkt den entsprechenden Zellen zuzuweisen .

50 könnte dann das Bild beim Einfügen von Verweisen anstelle
von reinen Texten erscheinen .
IIIf Gß N A TlO Il Z UM DU C II
P~U S( t l

I' OS .
AU 1 0~

G.O....,II

HH L

19. 90

" '"

Abbildung 6, 45 10Die Hinlergrundfarbe der Zelle
ver.1ndert sich beim Darüberlahren mit der Maus.

U,70

11

Weitere Gestaltun gsmög li chkeit en

Möch te man dem Anwender die Möglichkeit einräumen, eine
Tabelle zu sortieren, so muss man für die Rubriken, in denen sort iert werden soll, zusätzliche Klassen (.cl ass) oder Bezeichner
(/lid) einfügen und Sortieralgorithmen (mithilfe von JavaScript)
einsetzen.
Jedes Element der Tabelle kann über die jeweiligen Bezeichner
dabei einzeln gestaltet werde n.

408

6 listen und Tabellen

I
<thead >

<tr>
( th r owspan- ' Z' ) Pos. </th >
<th c ol s pan-~28 > l nformatf o n zum Buch</th >
( th rowspan- "Z' >Pref s (&euro; )</ th)
</tr>

<tr >
<th

c la ss-~sub ' > Autor </ th )

<th>Titel< / th>

<t t r )
</ thead >

C55 :

table tr th.sub I
background-color: l/e4f4fc:

J
IUfORMAfl O U Z UM BU C H

PREI S nl

POS.
A UTOR

TlUL

1.

G. Marquez

Hundert Jahre Einsamkeit

19, 90

2.

G.Orwell

1984

19, 90

3.

A. Elcupt!ry

Der KI4!lnl! PrInz

9, 90
49, 70

Tabe/h> 4: tikher in Ihrem

pos.

Einknufswa~n

<4

Abbildung 6 .46

Zugriff auf eine der Zellen über

die Klasse .sub.

tIIF O RM A lI O II Z UM BU C H

PUl S 4(1

AUTOR

TITEL

1.

G. Marquez

Hundertjahre Einsamkeit

19,90

2.

G.Orwell

1984

19,90

l.

A. Exupery

Der Kleine PrInz

9."

4.

A. Hw(l.y

8r.... NI'WWorld

12.95

5.

R. Adams

Watershlp Down

13 . 95

6.

R. Er.clbury

F&hrenhel t 451

9,95

7.

E. Wiesel

NII~t'll

9,9S
95 , 5
T«>rilt _

&.I"'"

11I11tr~ EifJUtJ'~!t1>

.. Abbi ldung 6.47
Das Ergebnis

6.4 Tabellen

I

409

Im
Automatisieren lässt sich die Färbung der Tabelle mit einem Java Script, das man auf der Webseite
http://www.slt epol nt. (omlartlcle/
background-colors-javascript (linkcode 223) findet . Auch können
Sie den Beitrag ..Zebra Striping:
Made Easy. zu Rate ziehen
(http://docs j q I.lRry. cornI
Tutorials:Z ebr3_S tripi nc_Made_
Easy, linkcode 22 4). Im Beitrag
kommtjQuery zum Einsatz.

Zebra-Tabell en
Besonders beliebt sind bei Web 2.0-Anwendungen sogenannte

Zebra-Tabellen, also Tabellen, bei denen jede zwei te Spalte mi t
einer anderen Farbe versehen wird und somit an Zebra-Streifen
erinnert. Tabellen dieser Art erleichtern das Verständnis für die
Inhalte.
Eine Mögli chkeit , Zebra-Tabellen zu erzeugen, liegt auf der
Hand. Erzeugt man eine zusätzliche Klasse, die fur eine Zeile
«tr» eine Hintergrundfarbe festlegt, und ordnet man jeder
zweiten Zeile diese Klasse zu, so erhält man den gewünsc hten
Effekt. Was bei kleinen Tabellen in wenigen Sekunden zu erledigen ist , wird bei großen Datenbeständen zu einer zeitaufwendigen Angelegenheit. Das Ergebnis ist :
tlH O RM A lI O M ZU M lUCH
PO S .

PRE I S {t l

AUTOR

TlTF .

L

G. M1rquez

Hundert Jahre Onsaml; elt

, 9 , 90

,.

G. OiWell

19<14

19 , 90

3.

A.

De r Kleine Prinz

9.90

<.

A. Huxley

EraveNewWorId

, 2, 9S

S.

R. Adams.

Water;hip Down

, 3, 9S

6.

R.

Fahrenheit 451

9. 95

Nloht

9. 9S

,.

Exupery

Eradbury

E. Wiesel

95, S

Abbildung 6.48
Zebra-Streifen

~

Tabelle~:

6.4.8

Bilcher in Ihrem

Ein kQufs~en

•

Ta be lle n im Ein sa tz

In der Praxis kommt eine umfangreiche Seite nur selten ohne
tabellarische Daten aus. Auf großen Unternehmensseiten, Produktseiten und Online-Diensten werden Tabellen vielfäl t ig eingesetzt, um et wa Auszuge aus einem Jahresbericht, eine PreistabeIle, eine Rechnun g oder einen Zei tplan darzustellen.
Elegante, aufgeräumte und übersi chtliche Tabellen sind oft
notwendig, um eine intuitive und simple Benu tzerführung zu realisieren. Die Gest altung der Tabellen wird jedoch meistens nicht
nur durch die saubere Darstellung der Daten erzielt, sondern
auch durch die Funktionalität der Benutzerschnittstelle. So lassen
sich Tabellen häufig sortieren, fil tern und sogar editieren - selbstverständlich _on the fly « mit Ajax.
Es folgt eine klein e Galeri e mit verschiedenen unkonventionellen Ansätzen zur Gestalt ung von Tabellen. Weitere Beispiele
können Sie dem Abschnitt _Ressourcen .. en tnehmen .
410

I

6

Usten und Tabellen

_---_

------..
.. _......__-----.._.
-=r .....
•.
--_.
--..
-..
......
_
....
--• • '" Ljl • ".• •
....._-~'J • ",..
.
.
.
_
.•..
...
'" '"
'"
...... .... -- ••
..>
•.
, . . ._... -II • "• W, ~I ""•. ".• '" " -.,. . ._.•.-... -- ..-•
.•
•
•
•
•
,,,..
~
'3
_."1
". ,," ..
...---... -..... -..... -- -"" .•
.•
•
..
...
..
...
,
,
..
._I!l
111
...
..,.'"
" •• ..
...
..........
..- • • ". rlJ • • • ._......,.... ..
[~ ",
..
--...-..... ..
.. ..... _.......
"
....
,

.\ 'HO \

mcleartrip

RU~~I~.

,_

"::"~~

<

~ ',

_. "

46M

~

2'6",

..

4~ ',

13 ~.

t

t

J ",.

t

" -

<

16~.

t

t

<

"

,

--0.'.-

---.--

,-

~

'-

-

t

'.7

-~

~

,-

~"

11 ', 3' ,

-~ CI

-~

"

13'0

,

1',.

22.S

t

J",

,.-

"

~

"

t

_._~

"

13M

-

.'

_.. _--.--

TCH,I' E",. •••

...
_-_
_..._...- ---- -- _.-. --

.....
....

o...by NoY11:

...

T.... bIo .."""' :

"

'.

"

000

-~

.... ..-.._."._,- ... -..

---

-

...

-...... -

-..

... ,'*'5(1'
- ,.."

_ ., ...u.II.

:.''':':''-

c_
c __

''''Mf

•• •• ". ••
•• ". •• • •

-"'............. '-

.. Abbildung 6.51

Eine Rechnung. dargestellt als eine Tabelle, bei Etsy.
com. Beachten Sie, wie sorgfaltig die Farben ausge·

Wdhlt sind. In diesem Design erfüllt Jedes Designelement eine bestimmte Aufgabe.

CI

DII -_._ ...-_........

-_
.. -.......
. __
-_... _-.._-_
...
......-

~--

_ .. ''''M1

CI

...-

-~-

--_.---.. __ .__...-_-.

c_

-~

,"

CI

... Abbildung 6 .5 0
Bei Cleartrip.com können Seitenbesucher über eine
Benutzerschnittstelle angezeigte Daten sor tieren und
fil t ern.

-_
... _
..... . .
........
""--------""....._--_
... --_ ,-,.... ,- - , -". - -- •••• ".". •••• - .-..,.

CI

~

'

.. Abbildun g 6.49
hnp :l/new5,yahoo.comlelection/2008/dashboard

CI

-__..... ....- ..
_

_ -- ..___-.- ..........---..

.......... ..- ...

_...

.. Abbildung 6.52
Eine schöne tabellarische Ansich t In einem MusicPlayer auf Bighuman.com

---

w

- --- ..-_..-.• ••
-- --

..- •

••• •••
•••
•••

.. Abb ildun g 6.53
Manchmal können Seitenbesucher tabellarische Daten
selbs t edltieren, wie etwa hier bei einer Rechnung von
Realmac Online Store.

6. 4

Tabellen

411

I

_
. ---_
......
- --- - ,,• • • •
- -----.- -- ..--• • •
--._-- -. ... - ... ---- --'--,
•
•
-- --. . - --.. _-_
....
• • ..- -- --- --0
_--_
,
"
"
-...
_,_
-.
_
_
......
'" -'" -'" ---..._,_-_n. .
._
-- -""""'"
-...,,_ _...-. _............
a-)'OII' P"'" p.~

<-

-~~

••

,-

~
-~

_

-"~

~

.. _

_ .

~--

......... _

·_

........

,

....

-

...-

TNI
."'."-

... _ _ _ .. _ _ .. .... ... _ _ _ t .... .

.,,_.. ...

.......

UlUS ~

~~-

.,,_.. ...

10

20

_ ..,

.

>20

0-

0-

0-

~

'-

•
•
•
•
•
•

•
•
•
•

..
•
•

•
•

•

•

•

e........'

.. -

,

•
•
•
•
•
•

•

~

ItUII ~

""'::"'...::'.!:"1

,~

~

,........
~-

-'_20_ c......1JI""..- _ _

-- I!I _

0

'' ' -I!!

•

•

Oooose a plan thot ftts your needs

-- --

$8 ~·

._,

S9 ~

._"01

'l5 ~'-..0. ,

.. Abb ildung 6.54
Preistabelle n im Überblick: litrnusapp.com, Spokeo.
com/hr, Coo nceptshare.com, Movabletype,com,
Squ arespace.com, Zendesk,com, Crazyegg ,com,
TIckspot. com

412

0-

_.

T~.."

Solo

,,, -

lS

.~.

5

_...--'
......_.

,N
. . --- -----. ---

0-

6

listen und Tabellen

_---...-_.-

--

~

~~-

~.

~-

6.5

I

Ressourcen

In den obigen Beispielen wurden nur die wesentlichen Grund la·

gen der (55-basierten listen- und Tabellengestaltung beleuchtet .
Zusätzlich lassen sich beide Datenstrukturen mit vielen weiteren
JavaScript-Funktionen erweitern, etwa mit einer Sortierfunktion
oder Datenfiltern . Weitere Informationen finden Sie auf den fol-

genden Seiten:
.. SElFHTML- listenformatierung:

http://de.seljhtmf.orglcss/ eigenschajten/ listen.htm
(linkeode 225)
..

Ustutorial:
präsentiert eine detaillierte Einführung in die browserkompatible Gestaltu ng von Listen.
http://(5s .maxdeslgn.com.au/listut orial/index, ht m

(linkeode 226)
..

Listen

http://jendry schi k.d elwsdevl einju ehru ng/xh tm/l I isten
(linkeode 227)
und Tabellen

http://jendryschik.de/ wsdev/ einfuehrunglxhtml/ tabellen
(Unkeode 228)
... 5ElFHTMl- Tabellenformatierung:

http://de.se/fMml.of/ycsveigenschaften/tabeilen. htm
(Unkeode 229)
... W3C Recommendation, Tabellen in HTM l -Dokumenten :

http://www.w3.org/TRlhtmI4/ structltables.html
...

(Unkeode 230)
C55-Based Tables: Moderne lösungen:
listet 31 C5S-und CSS+JavaScript-basierte Techniken zur
Gestaltung von Tabellen auf und bietet weiterführende Referenzen zum Thema.

http://wWN.smashincmagazine.com/200 6/7 2/2 9/ css- ba sedtables·modem·solutions (Unkcode 231)
Ernployce

Division

SuO~ 1 Uo ns

S<~P~'"

N .,~.".~

.....~ ~

J•• u,,"" Ta"

.. ~.c~ .. ~,

GiY. N •• , • •

....,... fit. .

fIt,'h ... ,

_

"' ....... r....t

N"hr,..,

krot<

C Co.

11"'0""

""'.,~

... . '7'<

r'< ~'i)'"

.. Abbildung 6 .55
Der Beitrag _Top 10 CSS Table
Designs. listet zehn Techniken
zur Gestaltung von CSS-basierten
Tabellen auf. Unter anderem wird
auch dieses DeSign v()(gestellt .

6.5

Ressourcen

I

413

..

Der Beit rag ,.Top 10 CSS Table Designs« http://www,sma 5hingm agazine. com/200B/OB/1 3/top-l 0- m -ta ble- desig nsl
(Linkcode 232)

listet zehn Techniken zur Gestaltung von CSS-basierten
Tabellen auf. Im Artikel werden Techniken, die in diesem
Buch erläutert werden, weiterentwickelt,
.. In ihre n Beiträgen ,. Bring on t he tables« (Roger Johansson)
http://www.456bereastreet.com/archive/20041 O/bri nc_on_
the_table (Linkcode 233)

und ,.HTMl, CSS and tables - the beauty of data« (Ch rist ian
Heitmann)
http://icant.co.uk/artic/es/tables (Lin kcode 23 4)
beleuchten die Autoren die wesentlichen Grundl<l8en eines
semantisch korrekten und zugänglichen Tabelten-Markups.

Der Artikel " Techniques for Accessible HTML Tables« tiefert
weitere Ertäut erungen.
http://wwwferg.orglsection508/accessible_tables.html
(Linkcode 235)

.. CSS Table Gallery
st ell t Dutzende von Tabellen designs zur Schau.
http://icant.co.uk/csstablegallery/index.php (l in kcod e 236)
.. Pricing Tables Showcase http://www.smileycat.com/design_
elements/pricing_tables/ (Linkcode 237)
ist eine wachsende Sammlung von Preistabellen, gesammelt

von Christian Watson.
.. Pattern Tap
www.patterntap. com (Li nkcode 238)
Pattern Tap ist eine umfangreiche Sammlung von verschied enen Designelementen (Listen, Tabellen usw.) mi t Beispielen, die von Designern zusammengestell t werden. Einige der
oben abgebildeten Beispiele stammen aus dieser Sammlung.
.. XHTMl-Tutorials
beschreibt die Syn tax und Semant ik von XHTMl im Hinblick
au f listen und Tabellen.
http://msconline.macons tate.edu/tutoriaJslXHTML
(Linkcode 239)

414

I

6

listen und Tabellen

7

Formulare

Im Web 2.0 geht es vor allem um Kommunikat ion : Zwischen
lesern und Autoren, zwischen Nutzern und Entwicklern, aber
auch zwischen Kunden und Un ternehmen. Diese Interaktion findet häufig über Kontakt· und Kommentarformulare statt. Je int uItiver diese gestaltet sind, desto konkret er wird die Anfrage und
desto genauer kann sie bearbei tet und beantwortet werden.
Dieses Kapitel ist der Gestaltung von visuell ansprechenden
und benutzerfreundlichen Formularen gewidmet. Auf den folgenden Seiten finden Sie ein typisches Grundgerust für Formulare und Methoden zu ihrer Gestaltung mit (55. Außerdem erfahren Sie. wie erweiterte Funktionen, etwa Tooltips, in Formulare
eingebettet werden. Sie erfahren darüber hinaus, wie man ein
Captcha zur Spam-Vorbeugung einbaut, und welche Regeln Sie
im Hinblick auf Usability beachten sollten.
Die Entwicklung eines visuell wie funktionell gelungenen Formulars ist in der Regel keine einfache Aufgabe, auch wenn seine
Struktur und Inhalte exakt vorgegeben sind. Ein Formular muss
kurz, aber vollständig sein, schön aussehen und nicht verwirrend
wirken, informativ sein und sich nicht in Details verlieren. Jede
Entscheidung über Abstände, Einrückungen, Ausrichtungen,
Hervorhebungen und Gruppierungen von Beschriftungen und
St euerelemente n beeinfl usst direkt die Int eraktion mit den Nutzern.
Da der Nutzer die Eingabefelder (größtenteils) manuell zu
bearbeiten hat, müssen Sie mit Fehlern rechnen, diese abfangen
und den Anwender darauf aufmerksam machen. Auch dürfen
eingegebene Daten bei einem komplexen, mehrseitigen Formu-

Kommunikation und Intera ktion
ImWeb2 .0geh l e~um Kommunikation und Interaktion. Kommuniziert wird dabei häufig uber OnUne-Formulare: Werden ~ie ansprechend gestaltet, so profitieren
davon sowohl Seilenbesucher als
auch Seltenbetreiber.

HINWEIS

Plug-ins zum automatisierten
Ausfallen von Formularen, die
man In modemen Webbrowsem oder Ihren Erweiterungen
findet, leisten Ihren Dienst nur
teilweise. Bel komplexen Formularen 1St die manuelle Arbeit
nicht zu vermelden.

lar ni cht verloren gehen .
Ein verwirrendes Formular erzeugt Missverständnisse, ein
benutzerfreundlic hes Formu lar dagegen fOhrt schneller zum Ziel
und unterstützt den Anwend er. Werden die Beziehungen zwischen den einzugebenden Dat en klar vermitte lt, so ist auch mit
weniger Fehlern, Ungenauigkeiten und Abbruchen beim AusfOIlen des Formulars zu rechnen.
7

Formulare

I

415

Comrnent ron"

•

"'_ Fe . ...

-

•

o

i ,IM

... Abbild ung 7.'
Kommentarformutar aufwww.
t hewa Ic hmakerproJect. com

Bei diesem Prozess, den Inform ationsarchitekten mit Interaktiomde5ign bezeichnen, müssen Siejedoch das Rad nicht neu erfinden.
Gewisse Muster und Schemata t re t en in der Form ulargestal t ung
immer wieder auf.
Doch zuvor lohnt sich ein kurzer Blick auf die einschlägigen
XHTML-Elemente sowie (55-Methoden zur Formulargestaltung.
Die meisten davon bleiben häufig im Hint ergrund , erweisen sich
jedoch vor allem bei komplexen Form ularen als sehr nü tzlich .

7·1

XHTMl-Markup für Formulare Grundlagen

Es folgt eine kurze Übe rsicht über die grundlegenden XHTMLElement typen, die bei der Gestaltung von Formularen verwendet
werden können. Ihre Umsetzung wird auf den nächsten Sei ten
erklärt.

X HTML- Elementtypen

Beschreibung

form

Formular-Co ntainer für Steuerelemente

<f o rm ac t! on- 'sc rl pt. php' meth od .. ' pos t ')

Das Attribut ac t I on gibt die Datei an, an die Daten
geschick! werden . neth od die Methode zur Übertragung von Daten.

i nput

Dient zur Definiti on von Steuerelementen . Zu beachten ist dass in HTML das 1nput-Tag nicht geschlos sen wird, In XHTML dagegen schon.
Ein2elliges Textfeld. Der Inhalt w ird über die Variable
lo_ t e> xt übermittelt.

<l nput type- " pa ss word" name- " ld_pa ss" f)

Ein2eiliges Passworteilllabefeid. Die Eingabe wird
mit Ast eri sken (*) versteckt . Der Inhalt wird über die
Variable l o-pass übermittelt.

<lnpul typ e.. " chec kbox " n alle- " c h ec k box~ l d "
va 1ue-- 'wert cllec ke>d - ' che>c ke>d ' ) Wert <f 1npu t>

KontrolikA st chen. Der Inhalt wird über die Variable
Che<: kbox_ 1d überm ittelt . va 1ue> hat den Wert. der
beim Ankreuzen des Käs tchens übermittelt wird.
Recht s vom Käst chen wird das Wort _Werte angezeigt.

<1npu t typ e- " r ad 10" nalle-" r ad10_1 d" va 1ue- "wer t "
che>cke>d - 'c he>cke>d ')Optl on<f lnput >

Optionsfeld. ähnlich dem Kontrollkästchen . Es erlaubt, nur eine aus mehreren Optionen auszuwä.hlen.
Recht s vom Optionsfeld wird das Wort _Option e an gezeigt.

I

<I npu l

typ e- " f 11 e" nalle- " f11e_1 d" va 1ue- "da t e I" f> Dateiauswahl-Schaltfläche. Das Attribut va 1ue gibt
die Anfan gsbuchstaben der Datei an; der I nhalt wird
fiber die Variable (11 e>_ld übermittell.

... Ta belle 7.1
Grundlegende XHTML-Elemente zur Gestaltung von Formularen

41 6

I

7

Formulare

I

XHTM t-EI&menttypen

Beschreibuns

<I npul ly pe· "s ubmll" va I ue- "Senelen" I>

Absenden-Schaltfläche, die alle Varia blen an die Datei, die Im ac ti on-Attribut von <f om > angegeben
wird. abschic kt . Es e~c he l nt eine Schaltfläche mit
dem Inhalt lOSe nden •.

<I nput ty pe-" resel" va l ue-" AbbreChen" I>

Zun)cksetzen- Schaltfläche. Sie bringt das Formular in
seinen ursp rünglichen Zustand. Es e~che l nt eine
Schaltfläche mit dem Inhalt . Abbrec hen •.

<Input t ype-"hlelelen" nalle-"h lelelen_l eI "
val ue-"we rt" J)

Verstecktes Steuere/emen!. Es wird nicht angezeigt.
sein Wert wird Jedoch überm ittelt .

te. t a~a

Mehrzelliges Texteingabefeld

<text a rea nalle- "t extfel d- rows- "8"
CO I s-"30 ">D l ese r Text wl rd Im EI ngabefeleI
e r SChe lne n. </ te xt ar ea>

rows gibt die Anzahl der Zeilen, Col s die Anzahl der
Spalten an .

selec t , option

Auswahlmenü

<se I ec t name· " a us wa nI " emu I tI PI e-"mult I pie"] >
<op tl on>Anga be 1<lo ptl on>
<opt I on se i eC lecl- " sei ec tecl" >Angabe 2</o pt Ion>

Auswahlmenü. Der Variablen auswahl wird ursprünglich de r We rt "Angabe 2. zugewiesen und angezeigt .
Dieser We rt kann du rc h die Auswahl eines der opt 1on-Elemente durch den Benutzer verändert wer"
den .
W ird das Attribut Hu I tI pi e verwendet, so kann der
Anwender mehre re Optionen a us de r Liste a uswählen . Dies geschieht über [B!i] .. li nke Maustaste.

<o pt I on>Arlga be n</opl lon>
</sel ecD

Bullon

Dient zur Erzeug ung einer HTMl-Sc haltft:ic he.

<but ton [el l saD ledJ na me" 'kno pf" Yd lue-"Kll c ke nl "
ty pe-"Dut ton' >... </bullon>

Das o ptio nale Attribut eil sa Dl e(] stellt sicher, dass die
Schaltfläche nicht angl!klic kt werden kann. nalle
IdentifiZiert das Eleml!nt, valu e speichert den Wert ,
der auf der 5chaltfläc he angezeigt wird, falls ke in Inhaft innerhalb von <b ul to n>... <!b ut lon> festgelegt
wird . Afs Typ des Elements kommen neben button
(Standardwert) auch resel (Abbruc h) und SUbml t
(Absenden) In Frage.

Fi eldset

Definiert Gruppen von FOfmularelementen

<f le lel seD
<l egend >NJlle<l l egend >
<t abl e> . .. <I t ab 1e>
<I fl e lel se t >

Das Attribut legencllegt die Beschriftung der Gruppe
fes t. Diese erscheint oberhalb der zusammengefassten Elemente . Innerhalb vo n fl el dsel kö nnen
beliebige Fo rmularele mente definiert werden.

... Tabelle 7.1
Grundlegende XHTM l-Elem ente zur Gestal tung von Form ularen (Fo rts.)

Um ähnliche Steuerelemente. die 5ie gleichartig gestalten mÖch·
ten, mi t einer (55-Deklaration zu gestalten, können 5ie in (55
eine Klasse erzeugen und die Steuerelemente als Elemente dieser
Klasse definieren.

7-'

XHTMl-Markup fOr Formulare - Grundlil8e n

I

417

<i nput name- ' vorname ' type- ' text '
class-"feldkla sse " I>
<text area name- ' feedback ' type- ' text '
c la ss- ' feldklasse ' I>
(S S:

.feldkla sse { backg r o und- co l or: lifa fafa: I
Im Prinzip kommen Sie mit den Elementen, die in Tabelle 7.1
aufgelistet sind , fast immer gut aus und können damit beliebig
komplexe Formulare benutzerfreundlich gestalt en.
Vier weitere Elementtypen sind oft hilfreich - vor allem für
Anwender, die beim Surfen spezielle Ausgabegeräte verwenden.

7.1.1

optgroup - Optionen gruppi e ren

Mit dem Elementtyp optgroup lassen sich mehrere Opt ionen
eines Auswahlmenüs (Elemente des Typs select) zu Gruppen
zusammenfassen und mit (55 gest alten . Das Element erfüllt sei -

Zer'fsch";l!

Chip
com!

• A bbi ldung,.2

Ein Auswahlmenü ohne die Eigensehdft »multiple« erlaubt es dem
Nutzer, nur einen Punkt aus der

liste auszuwählen.

Zeitschrift

nen Zweck vor allem bei größeren Auswahlmenüs, die sich über
viele Optionen erst recken (zum Beispiel dieAuswahl einer Rubrik
in einem On line-Kaufhaus). Mit dem optionalen Attribut label
können 5ie der Gruppe eine Überschrift geben.
Befindet sich das optgroup -Element beispielsweise innerhalb
einer form-Konstrukt ion,
<f orm 1 d-Mumf r age " actl on- " process .php">
<dl v><se l ect i d_ Mc " mul tip l e- " mul tf pl e" >
<optgroup cl ass-' ids ' label- ' Zeitschrift ' >
<opti on> Ch f p< /0 pt ion>
<opt1 on>com!</opt 10n>
<opt 1on se 1ected- " sel ec ted " >c ' t</opt 1on>
<option>PC Welt </option>
</opt gr oup >
<I se 1ect> </d f v>
<I form>
so kann das Element wie gewohnt direkt mit (55 angesprochen
werden .

• Abbi ldung 7':3

Mit der Eigenschaft »mul tiple«
können mehrere Optionen
gewolhlt werden. Zur Auswahl
mussen Nutzer beim Anklicken
von Optionen die ~-Taste
drücken.
418

7 Formulare

op tgr oup. ids
font-size: 20px;
paddl ng: l Spx ;
text-a l 1gn: left:
background-color: Ilefc:
color: 11333 :

border-bottom: lpx solid flcec :
border- t op: Ipx solid fleec:

I

I-IINWEIS

J
Auch der hover-Zustand beim Drüberfahren einer Option inner+
halb des opt group+Element s kann näher festgelegt werden.

Weder im Internet Explorer 6
noch in der Versi on 7 wird die
:hover - Pseudoklasse fü r das
op t gr oup-Element unt ers t ützt
Au ch keine der verfugbaren BI+
bliotheken w ie etwa IE7 (h ttp://

dean.edwards. name/I E7) ode r

optg r oup.1 ds optl on:hover{
background-color: jJA1E25F:

xs4all. ni/-pe ter ned/csshover.

colo r : lifff:

html) können dem Inte rnet

Whatever :Hover (http://www.

Explorer diese Funktionalität
beibringen.

7.1.2

label- Steuerelemente beschriften

Der Element typ label dient dazu, St euerelemente eines Formulars. die keine Beschrift ung haben, aber in einer Verbindung zu
einem oder meh reren Element en stehen, logisch und semant isch
mit einander zu verknüpfen. Ein Feld, vor dem seine Beschriftung
als HTM l +Text (z.B. <p> Benutzername:< I p» steht, stellt für Nutze r von visuellen Browsern den Zusammenhang d eut lich gen ug
dar, allerdings nicht tur Webspider. Sie können den Zusammenhang nicht automatisch erkennen.
Das 1 abel -Element wird von grafischen Browsern nicht angeze igt. Dennoch kann das Element mithilfe von (5S gestalt et werden. (Ein defin ierter Abstand des l abel+EJemen ts ube rträgt sich
auch auf Elemente, die sich innerhalb des 1abel+ Element s befinden,)
Beachten Sie, dass die Auswahl bzw. Fokussierung des Mausze igers auf Steuere lement e auch durch das Anklicken der jewei+
ligen Beschriftung geschehen kann. Zusätzlich st ell t das labelElement eine große OrientierungshHfe für Nutzer mit einer
Sehbehinderung dar, die dadu rch einen direkten Bezug zwischen
den Feldern und deren Beschriftungen erhalten.
Im Markup. bei dem l abel-Beschriftungen nich t direkt vor
dem jeweiligen Element stehen können (z. B. in tabellenbasierten Formula ren oder listen), kan n man 1abe 1+Elemen te mit dem
Attribut f or versehen. Sein Wert soll der 10 des Steuerelements
entsprechen, aufwelches es sich bezieht . Di ese Art des Markups
ist vorzuziehen, da man dadurch einen explizi ten Bezug erstell t
und eine Verschachtelung von Elementen vermeidet.
<f or m ac t ion- " anmeld u ng . php~>
<dl>
<d t> <1a be 1 for- " l og1 n " >Benut ze rn ame: <I 1abe 1><I dt>
<dd)( input 1d- "logfn " name- " l ogi n">(/ dd >
7.1

HINWEIS
Beachten Sie, dass im Beispiel
eine Deflnitlonsliste im Markup
des Formulars verwendet wird.
Sie dient dazu, Eingabe felder sowie ihre Beschriftungen semanti sch auszuzeichnen , Das Schema
der Defin it ionsliste lässt sich auf
das Schema des Formulars übertragen. Es hilft, die Inhal te se+
manti5ch besser zu strukturieren ,

XHTM l-Markup fO r Formulare - Grundlage n

I 419

<dt> <1a be 1 for- " pa ss " >Kennwo rt: <11 abe 1></d t >
<dd >< input 1d-" pa ss " name-"pa ss " ></ dd >
</ dl>
</form>

..t..Abbildung7.4
Einfache Eingabefelder mit label ~
Elementen zur semantischen
Auszeichnung der Beziehungen
zwischen den Elementen

(SS:
dt I c lear: left; )
label [
f1 oa t: l eft;
margi n: 5px ;
padding-r1ght: l Opx;
w1dth:l00px;
d1splay:block;
text·align: r1ght ;
I

Beachten Sie, dass in diesem Beispiel sowohl das 1d- als auch
name-Attribut für das Element input verwendet werden . Der
Grund dafür liegt im folgenden Sachverhalt: Zum einen senden
Browser eingegebene Daten nur dann an den SelVer, wenn das
name-Attribut tur die jeweiligen Felder angegeben wi rd. Zum
anderen wird ein Feld genau dann beim Ankli eken der Beschriftung aktiviert, wenn diese Beschriftung mit einem <label> -Tag,
das sich auf ein Ste uerelement mittels dem <i d>-Tag bezieht,
bes<:.hrieben wird.'

7.1.3

fieldset, legend - verwandte Formularelemente
gruppieren und beschriften

Genauso wie optgrcup zusammengehörige Opt ionen im Auswahl menü gruppieren kann, können Sie mit f1 e 1dset verwandte
Formularinhalte in einer Feldgruppe (fleldset) zusammenfas-

..t.. Abbildung 7.5
Mithilfe des <heldset>- und des
<legend>-Tags können OnlineFormulare mit einer festen Struktur vef'iehen werden.

sen. Dies ist vor allem dann vorteilhaft, falls unterschiedli che
Daten eingegeben werden sollen, wie beispielsweise persönliche
Angaben des Benutzers oder Angaben zur Bankverbindung im
Anmeldeformular eines Online-Shops.
Eine Beschriftung tur die Gruppe wird durch die Definition des
1egend- Elements festgelegt .
<form act1on- " anme1du ng.php " >
<fleldset >
<1ege nd >A nme 1d un g</ 1€I ge nd >
<dl>
<!-Log1n·Feld _.>
1 ,.Forms - Ids vs.

Nam~«. hup:llwww.qUirKsmock,org/oddsandmdsi
!omJ5.html (ünkcode 191)

420

I

7

Formulare

I

<dt> <l a be 1 f or - ' l og i n ' > Benut ze rname: </1 abe1 ></ dt>
<dd>< i npu t ld- " logi n name-Ml ogi n" ></ dd >
M

<! - Kenn wor t
<dt >< l a be 1
<dd>< input
<! -We it ere
</ d 1>

- Feld -- >
for ... • pa ss ' >Kennwo rt : <11 abe 1><I dt>
id- " pa ss " name- " pass" ></dd>
Felder -- >

</ f leld set>
<!-Wel t ere Feldgruppen -- >

<I f or m>
Das f i e1dset- Elemen t wird in visue lIe n Brows.ern entsprechend
der St andardvorgabe mit einem Rahmen ve rsehen.
Accesskey s - Tastaturkürzel definieren I Die SteuereJemente
ar ea, bu tt on, inpu t , label, legend un d t ex t area können über

Accesskeys

das ac cess key-Attribut mi t Tastaturkürzeln versehe n werden.
Über diese gelangen Nutzer direkt zum jeweilige n Eingabefel d.

Webstandards sehen vor, dass
Tastaturkürzel auch für Anker
definiert werden können (z. B.

Ac cesskeys kommen nur in wenigen Anwendungen zum Einsatz,
werden jedoch vo n gängigen Browsern vollständ ig unterst ützt und

<a accesskey· "a" href· "11nk.
php" ) L1nk <1 a»). Über die Tasta-

können des halb ohne Bedenken verwendet werden. Al s Shortcuts
können Sie ein beliebiges Zeichen über <1abe1 access key-' l ' >

tureingaben können Anwender
dann direkt zu der Seite gehen,
auf die der Anker verweist.

defin ieren (Bu chstaben, Ziffern, speziell e Zeichen). Es ist jedoch
empfehlenswe rt, Kürzel mit den Feldern, auf die sie v erweisen,

zu assoziieren und sie einprägsam zu benennen.
Es ist eine bewäh rte Prak t ik in der modernen Seitengestaltung,
den ersten Buchst aben der jeweiligen Beschriftung als Kürzel zu
wählen . Dies empfiehlt sich insbesondere für Seit en, bei denen
Anwender häufig mi t Form ularen arbeiten müssen. Aber auch f ür
die leser eines Weblogs können Accesskeys viel Zeit sparen. Im
Allgeme inen kann die Seitennavigation durch die Zuweisung von
Ziffern zu einzelnen Seitenrubriken deutl ich beschleunigt werden. Die jeweiligen Tastatu rkürzel müssen dem Anwender nat ürlich explizi t bekann t gegeben w erden.
Im Moz illa Firefox werden Aktionen über den Shortcut ~ +
~

+ {accesskey} aufgeru fen; im Intern et Explo rer Ober

~

+ [accesskey} . Tastaturk ürzel werde n von verschi edenen Browsern unt erschiedlich int erpretiert. Orie ntiere n Sie sich bi tte bei
der Vergabe de r Tastat urkürzel an den Vorgaben, die im Beit rag
http://w ww.wats.ca/show.php ?con tentid=32 (Linkcode 24 5) vorgestel lt werden .
tabinde x - Reihenfolge der Eingaben festleg en I Bei komp lexe n For mu laren können Anwender schnell den Überblick verl ie-

Enter-Taste
Beachten Sie, dass fast alle
modernen Browser die Taste
standardmäßig verwenden.
So können Formulare haufig
mit B abgesendet oder der
Suchvorgang mit 0 gestartet
werden . Deshalb kann eine neue
Funktionszuweisung der EnterTaste unter Umstanden zu Problemen führen.

o

7.1 XHTML-Markup für Formulare - Grundlagen

I

421

ren. Dies kann zu Sprüngen im Text führen . Diese lassen sich mi t
einem weiteren XHTMl-Elementtyp vermeiden.
Per Standard gelangen Sie mit [ ~ l von einem Feld zum nächsten in der Reihenfolge, die im Ouel ltex t angegeben ist. Sollten Sie
diese Reihenfolge verändern wollen, so mü ssen Sie dafür so rgen,
dass die Seiten besucher ihre Eingaben dennoch logisch und konsequent vornehmen können.
<1nput tab1 ndex- l" ... I>
<s elect tabindex- " 3" ... I>
<text ar ea t abindex-" 2" ... I>
M

7.2

Formul a rfelder mit (55 gestalten

Gehörte ein einfarbiges und deshalb häufig auch langweiliges
Online-Formular noch vor wenigen Jahren zum Erscheinungsbild eines seriösen Webauftritts, so wird dies in modernen
Web 2.0-Anwendungen nur noch selten der Fall sein. Durch vielfaltige Schatteneffekte, Abrundungen, begleitende Mini-Icons
und dynamische Wegweiser werden Seiten besucher Schritt für
Schritt zum Ziel geleitet. Besondere Bedeutung kommt dabei
auch den Formularfeldern zu, die mit CSS-Mi tteln eleganter,
lebendiger und benutzerfreundlicher gestaltet werden können.

7.2.1

Positio nie rung und Gestaltung vo n Eingabefelde rn

Seitenbesucher haben sich über mehrere Jahre daran gewöhnt,
beim Ausfüllen eines Onli ne-Fragebogens einem vertikalen Pfad
von oben nach unten zu folgen. Aus dieser typischen Vorgehensweise resultierte die Notwendigkeit, sämtliche Eingabefelder
ve rtikal , mit möglichst wenigen gestalterischen wie struktu rellen
Abweichungen auszurichten . Einzeilige (i nput) wie mehrzeilige
(textarea) Eingabefelder soll ten somit nach Möglichkeit dem
gleichen Schema folgen. Die länge der 1nput-Felder kann durchaus vari ieren - aber nur dann, wenn die Größe Rückschluss auf
den Inhalt gibt. Zum Beispiel sollte das Eingabefeld für die Postleitzahl kürzer als das für die Adresse sein.
Darüber hinaus sollten die Beschriftungen von Eingabefeldern
visuell wie strukturell get rennt sein und in logisch zusammengehöri gen Gruppen zusammengefasst sein. Auch für die Gestalt ung von Eingabefeldern sind nur wenige Variat ionen sinnvoll.
Beispielsweise sollte bei allen Eingabefeldern der typografische
Satz gleich eingestellt sein, wie auch die Farben für die verschiedenen Zustände.
4 22

I

7 Formulare

I

Feldränder gestalten I Eine der ersten Anpassungen beim
Design vo n Formu laren ist die Ve ränderung der Ränder bei Steuerelementen . Ohne eine zusätzliche Format ierun g erscheinen
nämlich sämtliche Felder bei vielen Bromern mit einem Rahmen,
der einen 3 D-Effekt darstellen soll.
Um einen Standardrand zu variieren, ve rändert man seine
Gestalt über die (SS-Anweisung border.
fnput, textarea Iborder: I px solfd #eec ;}
Dabei empfiehlt es sich, keine gepunkteten oder gestrichel ten
Linien fOr den Rand eines Steuerelements zu wählen. Au s Usabi·
Uty-Gründen soll t e man beim Design von Eingabefeldern unter
keinen Um ständen au f ei nen sichtbaren Rand fOr die Steuerelemente ve rzi chten. Wie auch in üblichen Fragebögen, die man
aus dem Alltag kennt, sollen Anwender direkt sehen, wo sie ihre
Eingaben machen können. Ein Rand gibt ihnen dabe i eine gute
Orientierungshilfe .

Contnet Me

" ,,,,

)'

'

.......

-

1IIo-~ ...

,..,..,

pI-~ ....

da "11:

da 'ft <t, tr ........... eb """ lJ'l .. ) ....
...,....~1:

l'tV!

~"o.r

s~

......... t"I)O"~ •• prol"l'"

...

.. Abbildung7. 6
Durc h eine geschickte Auswahl
des linken und rechten Randes
sowie das Einbetten eines Hinter·
grundbildes wird ein angenehmer
3D-Effekt erzeugt (Quelle: http://
www.blnarymoon.co.uklabout)

[,

.<" ... 01,·,..

Anpassung des Hintergrunds I Durch eine Veränderung des
Hintergrunds der Steuerelemente antworten die Seit enbetreiber
auf die Aktionen der Se iten besucher. Hervorhebungen werden
insbesondere bei: hover- und: f oeus-Zuständen von Steuerelementen extra gestaltet. Beim: hover-lusta nd wird der Anwender
durch eine visuelle Markierung der Felder zum AusfOlIen des Formulars geleit et. Die :hover-Ma rkierung dient auße rdem dazu,
die Felder aus dem übrigen Kontext stärker helVorzuheben .

II

Form ul arfelder m it (SS gestalten

I

423

Da viele Anwender in Online·Formularen mit I ~ I von einem
Eingabefeld zum nächst en navigieren, muss das fokussierte Eingabefeld besonders deutlich hervorgehoben werden. Dann weiß
der Anwender nämlich genau, wo er gerade ist. Unterbricht er
seinen Ausfüllvorgang und surft beispielsweise zwischendurch
auf anderen Seiten, so kann er spät er zum Formular zurückkehren und weiß sofort, welches Feld er als Nächstes ausfüllen muss.
Du rch eine Veränderung der Hintergrundfarbe bzw. des Hintergrundbildes und des Rahmens des Feldes kann dies un terstützt
werden.

inpu t. fnput:hover . input:focus (
border-w1dth: Ipx:
input (
background -color: UHf:
border - color: /lcec:
input:hover (
background-color: {Jdee:
border-color: /l9cc:
fnput:focu s {
background-colo r: lIefd :
border-color: #be8:

/ * wef ß */
/ * grau */

/ * hellblau */
/ * dunkelblau */

/ * hell grOn */
/ * dunkelgrOn * /

Häufig verändert man ni cht nur die Hintergrundfarbe des gerade
bearbei teten Feldes, sondern die Hintergrundfarbe der ganzen
Gruppe. zu der es gehört.

-' --------

..

,

"",,", .. , ... 1

I
..... '''''''''''. I ~on

•
Abbildung 7.7 ~
Im :focus-Zustand wird die
Hintergrundfarbe fü r die ganze
Gruppe verll.ndert.

424

I

7

Formulare

- -1,

F'tlone Number

I:! ,----, (~...,

.....

Uff

I

Beachten Sie, dass Eingabefelder auch mit Hintergrundb ildern
versehen werden können. Dies kann nützlich sein, beispielsweise
wenn Sie Eingabefelder durch begleitende Mini-Icons deutlicher
auszeichnen wollen.
.. Abbildung 7.8
Eingabefelder werden mil einem
Hinlergrundbild ve rsehen (Quelle:
h tl pJlwww.badb~.ro/as seIst
a rt ie lest n ieeformsl nieeforms. h tml,
linkeode 246) .

Name:

I

Emat

I

Website:

fl4All
W~83ITE

http://

Im Allgemeinen kann man auf beide Effekte bei kleinen Formu laren verzichten. Bei größeren Frageb ögen sind sie durchaus hilfreich.

.. Abbildung 7.9
_Fun With Forms __Tedmik: Hintergrundbilder verwandeln die
5tandardgestal t eines OnlineFormulars.
(Quelle: http: //www. piement.
cornIarticl es/es slfunwit h forms .
linkcode 247).

Contact
feet I,ee to , end me II r:oeSilI&t, 'lIOt, a littie I"IIIU·m.!I , mic:"Jevo, you Met b at tt.e
rT.oment. ,"I oe ny ~st to i"t MC~ tc you '" ,con '" , can.
Your H.... ": *

[

J

)"our lm.It: ·

[

J

l:ubjoc1, •

I

I

Your He..~,,:

I Send Message

)

7-2

.. Abbi ldung 7.10
KliI1, deutlich und ohne :hoveroder :aetive-Zustande (Quelle:
http://www.farfromfearless.com/
eontaet , Unkcode 248)
Formularfelder mit (55 gest al ten

425

Sc hritt für Sch ritt : Formular gestalten
Im Folgenden betrachten wir ein Beispiel zum Design eines einfachen Formulars mit zwei Eingabefeldern.

D
list ing 7.1 ~
Das XHTML-Gerüst

XHTMl-M arkup und Positionierung der Elemente
mit (55

<f orm a cti on- "anmeldung.php" method-"pos t ">
<div class-"leftbar" >( label f or- "l ogin ">Benutzer:
</label>(/div>
<d1v class-" rlghtbar" >( 1nput name-"login" id -"logi n"
s ize- °20 ° maxlength- 040 ° value- oo type- Otext O I>
</ d1v >
<div class- "leftbar"> ( label f or- " pass">Kennwort:
</la bel >(/div>
<dfv class- r1ghtbar" >( input name-"pass" id-"pass"
s1ze- 020 ° maxlength-040 " value- O" type- "password " I>
</ div >
H

( d iv cl a s SaH ri gh tba r " >( 1n put t ype- " su bm 1t "
value- oSenden! ° 1></div >
<I form>
listing 7.2 ~
Grundsätzliche Formatierung
mit (55

.leftbar
width: 25% :
clear: both:
fl oat: le f t ;
d1splay: inl1ne;
paddlng: 4px;
margin: 10px 0:
text-a11gn: r1ght:

• Abbi ldung 7.11
Ausgar'8ssituation: Die Standarddars tellung des Formulars ohne
zusätzliche (55-Formatierung

.rlghtbar (
wi dth: 702: :
text'a11gn: left:
f l oa t: right;
display: in l ine:
paddlng: 4px;
marg1n: 5px 0:

Abbildung 7.12
Die input-Elemente werden mit
einem grauen Rahmen versehen.
6.

426

I

7

Formulare

EI

Anpassen des Randes und der Feldgröße

In diesem Schritt wird zunächst der Rand der Formularfe lder auf
ein neu trales Grau gesetzt.

I

fnpu t (
bo r der: Ipx sol1d IJcccccc :

....."
Damit der Anwender bei der Eingabe der Dat en mehr Platz zur
Verfügung hat, legt man für die i nput-Elemente zusätzlich einen
großzügigen inneren Abstand fest .

.. Abbildung 7.1)
Die Input-Elemente erhalten den
Inneren Abstand von <1 px In al le
Richtungen.

i nput I
border: Ipx so l id flcccccc :
pa ddfng: <1 px:
:focus und :hover im Internet
Explorer biS Version 6

I

11

:hover- , :focu s- und :active-Klassen definieren
Diese Effekte sp ielen bei Formularen eine besondere Rolle.
Richtig umgesetzt, können sie den Nutzer mit hilfe von visuell en
Hinweisen und grafi schen HeNorhebungen bei seinen Angaben
unterst ützen.
Beim Drüberia hren mit der Maus w ird das Ei ngabefeld mit
einer grünen Hintergrundfarbe und ei ner blauen Randlinie versehen.
f nput:hover
borde r : Ipx 5011 d flade:
background-color: fte f d:

J
In :focus- und :act i ve-Z uständen wird die Randlinie grün
gefärbt.
fnput: f oC uS. f nput:act f ve
border: I px so l id IIcea :

I

I

... Abbildun g 7.14
Angepasster Rahmen: Weißer
Hintergrund. grauer Rahmen

Beachten 5ie, d,m die Pseu·
doklasse ,h over beim Internet
Explorer bis einschließlich Version 6 nur Im Fall von VelWeisen
Interpretiert und sonst ignoriert
wird . Die: f ocus-Klasse ist
dagegen nicht implementiert
und kommt erst im Internet Explorer 7 vor. Um belde Klassen
d iesen Browsern beizubringen,
können 5ie in Ihre ( 55-Datei
die wh at ever,h over-BibHothek
(http://www.xS4aIl.nl/....P eterned/
csshow r html, Unkcode 196)
einbinden :
body
I beha v l or,url (-c 5shover 2 .
ht (" ) :1
Diese wird nur von Browsern
der I E-FamlUe erkannt und verwendet. Eine alternative l ösung
existiert nicht.

... Abbildun g 7.15
Beim Druberfahren mit der Maus
wird der Hintergrund hellgrün. der
Rahmen d unkelblau.

.. Abb ildung 7.16
H oy~r- E ffek t im oberen Eingabefeld, Active-Effekt im unteren
EIngabefeld •

Checkbox en , Radiobuttons, Selection I Für Opt ionen werden in Dn line-Formu laren Kon trollkästchen . Opt ionsfetder und
7.2 Formularfelder mit (55 gestalten

I

427

""Md.",,"..,

O. 0,_
1;1]7. O"iotI
~ Op"on

a,...

.. Abbildung 7.17
Aumahlmen ü, Optionsfelder und
Kontrollk.ls tchen in der Standardano;ich t

. .,.,

."

~"~thQ">ll:Ior

.. Abbildung7.18
NieeForms v1.0

"" ........ '...

~

.. --

_" ....".'_.._--

_ ........·..,.,..' ...·..... H_ .. _ ...
.~

...

:-- ,-,-,-, ...

_._._1_>

::::::0;:: _"
_...

. _.e

.. Abbildung7.19
Pretty Forms ermöglich t es,
Steuer elemente durch eigene
BUder zu ersetzen.
428

I

7

Formulare

.~"

Auswahlmenüs ver'o... endet. Ihre Gestalt ung ist häufig nur schwer
zu handhaben, da diese Element e meistens eine winzige Größe
besi tzen. Dennoch lassen sich auch sie mit CSS gestalten.
Eine analoge XHTML-Struktur wie in den obigen Beispielen
ergibt ein Bild wie in Abbildung 7.17.
Die von Lucian Slat ineanu entwi ckelte Technik NiceForms
basiert auf CSS und Jav aScri pt. Sie setzt darauf, d ass man die Steuerelemente in ihrer ursprünglichen Gestalt mit 1ef t; 3000px; vom
Bildschirm verschwinden lässt und durch Bilder ersetzt, die im
C55-Code als Hintergrundbilder agieren. Die Hintergrundbilder
erhalten dabei beide Zustän de (angeklickVnkht angeklkkt). Die
Anzeige eines passendes Bildes w ird durch eine JavaScrip t-Bibliot hek und die Positionierung des Hintergrunds geregelt. Bei Optionsfeldern wird wiederum mit einem Java5cript dafür gesorgt,
dass nur eine Option ausgewählt wird,
Die Elemente mit den jeweiligen Ersatzgrafiken werden absolut positioniert. Das Hint ergrundbild des Auswahlmenüs wird in
drei Teile aufgeteilt und mithilfe von drei Containern zusammen gesetzt. Die Optionen werden im zent ralen Container angezeigt,
Durch die Wahl einer geeigneten Größe der Bilder kann man
dafür sorgen, dass die Steuerelemente auch bei einer Skalierung
korrekt angezeigt werden und einwandfrei funk t ionieren. Auch
die Navigation über die Tastatur ist möglich.
Die Vorteile dieser Technik liegen auf der Hand . Mit einigen Anpassungen lassen sich sämtliche Steuerelemente beliebig gestalten. Bei korrektem und standardkonformem XHTMLMarkup werden sie dann von allen gängigen Webbrowsern
korrekt interpret iert. Weiteres zur Technik finden Sie auf http://
www.badboy. ro/artieles/2007 -D 1- 3D/niee/orms (Li nkcode 249).
.. Eine alternat ive Lösung bietet die Technik Pretty Forms (http://
www.agavegroup.conV?p=35, Linkeode 250). A uch sie basiert
auf einer Java5cript - Bibliothek,
.. Eine weit ere Methode wird durch ARC - Adam's Radio &
Check box Customisation Mfdhod berei tgest ell t (http://www.
ft og.co. nzl2005/04/2 7/a!e-adams -radi ocheekbox-custom isa ti on,
Linkcod e 251). Sie basiert auf JavaScript und CSS. Sollte eines
d er bei den nicht unterstützt werden, spri ngt das Skript auf di e
St andardversion des Formulars zurück.
Beachten Sie, dass Sie die Gestaltung von Steuerelementen nicht
komplett verändern dürfen, Letztendlich geht es darum, dass die
Anwender mi t den Steuerelementen gut zurech t kommen. Es ist
nicht das vorrangige Ziel an dieser St elle, eine beeindruckende
Präsentation zu erzielen. Da Seitenbes ucher mi t dem Standarddesign von Steuerelementen vertraut sind, ist es wede r benutzer-

I

freundlich noch effizient, beim Design von Formularen grundlegend neue und unbekannte Elemente zu verwenden. Dadurch
riskieren Sie vielmehr, den Anwender zu verwirren.
7.2.2
multiple -Eigensch aft bei Auswahlmenüs
Bei Auswahlmenüs kann man über das Attribut mu 1t 1Ple regeln,
ob der Anwender genau eine oder mehrere Optionen auswählen

darf. Ursprünglich musste der Seitenbesucher mi t lli!il und der
rechten Maustaste arbeiten, um die gewünschten Optionen auszuwählen. Eine mehrfa che Auswahl lässt sich mit der von Nicholas Rougeaux entwickelten Technik Scrollable Checkli$t~ besser
und in tuitiver gestalten. Bei dieser Me t hode werden sämtliche
Auswahloptionen im Selec t -Menu in Form von mehreren, ver·
tikal angeordneten Kont rollkästchen mit Beschriftungen da rgestellt, über die Se itenbesucher wie in einem Frame navigieren
können.

o Aenun m. :uuada .nta eilet tellu.
o Nu1am a d.i ac auOJe adioiscirv.J sod ale.
o
"""''''''01 ... ,
u mo
o
,d loli, ""'.... p u ",. lr "b quc c:cnd
o Su'p"'d ,se po,.are I"cw, viu" _e,-, e:msequal volutpa;

o In ,"o,ulln aUQut id velit
V'YO"'_ ~ '

onla .~ ..

"1O~u_

m.r-.t~m

(!) fUIOI!I coodimentum no.llo el torto.

o Pro,o conseqUlt faucibu mi

n

fblm I lectus ous mo.,. VIV"" OI.. <reet

o ______ ..,1"
_ 110""
o n~"",,, ao...,e ia...e+t

... Abbildung 7. l0
ScroUable Chec k lis l ~ erlaubt dem
Anwender, In einem Auswahlmenü wie In einem Frame zu
scrollen .

[l ~.",,~do,ol<'l':'_"

o 1Il\Iam.&con!!Cteu..e,
.,10 optU'1III

Mit einem JavaScript für den Internet Explorer 6 bzw. einem
Hack für den Internet Explorer 7 wi rd dafür gesorgt, dass diese
Methode auch Im Internet E)(p lorer einwandfrei funktioniert.
In der Praxis ist gegen die Technik nichts einzuwenden, solange
die Auswahlmöglichkeiten auch für einen unerfahrenen Nutzer
deutlich zum Ausdruck gebracht werden. Die Möglichkeiten, das
Formulardesign an das Layout der jeweiligen Seiten anzupassen,
sind somit bei den Eingabefeldern wie auch bei den Steuereie·
menten unerschöp flich.
7-l

Formularfelder mit CSS gestalten

I

429

Sc hritt für Sch ritt : Formular im Web 2.o- Look gestalten
Zur Veranschaulichung gestalten wir auf den nächsten Seiten ein
einfaches Formular im Web 2.0-Look. Dafür wird als XHTMLQuellcode das bereits verwende te Markup (in erweiterter Form)
velWendet. Das Beispiel basiert auf einer Technik, die von

InjectedFX (http://www.injectedjx.net)vorgestelltwurde.

D

Pos itio ni er un g von Blöcke n und Fo rm atierung mit (SS
Mit der Positionierung von Blöcken auf der Seite wird das Formular zuerst zentriert und formatiert. Anschließend werden die
Schri ftart und die Schriftgröße festgelegt.

listing 7.3 •
Das XHTMl-Formular

430

I

7 Formulare

<f orm actlon-"form.php" >
<dlv ld- "wrapper ">
<di v i d- "content "
<h2 >Kontaktformular</h2>
<d1v class - "con ta ctform " >
<di v class-"con ta c tleftH >< label
for- " Name " >Nam e: <!l abel></div>
<di v cl a 55- " conta c t ri ght "> <1 npu t
name- "Name " fd - "Name " s1 ze- "30 "
maxlength-"SO"
val ue- "" type- "text "I> <5pan
cl a S5-" req ui red ">*<1 5 pan )
</dfv >
<d1v c la ss - "contactleft " ><label
for- " Email ">Emafl : </ label> </ div >
<div cla55- "contactright "><1npu t
name- " Emafl " f d-"Emafl"
sfze- "30 ' maxlength- "SO " value- ""
type-"text"/ > <span
cl a S5- " req LI i red ">*<15 pan>
</div>
<dfv cla55- "con ta ctleft ">< label
for- " S1te " >Web - Se 1te: <11 abe 1 >
</div >
<div c1a5s- "contactright "><fnpu t
name- HSi te " fd-"S1te " s fze - "30 "
maxlength- " lOO " value- ""
t ype- " tex t " / ><I d 1v>
<dill cla ss- "contact1 eft ">< label
f or- " Feedbac k" )ROc kme 1dung:
</ 1 abel><ldf v>
<dlv class .. .. contac trfg ht .. >
<textarea name-"Feedback"

I

fd- " Feedba ck " co1s· "3S " rows· "S")
<I tex ta rea ></d i v)
<df v cl ass- " conta ct rf ght ' >< f nput
name- ' subll'l f t ' va 1ue·· Absenden! "
fd_M subm M type-MsubmH M/)</dfv>
</ dfv >
</dfv>

</d1 v>
</ form >
Im Folgenden sehen 5ie die grundlegende (55-Gestaltung:

•

.. List ing 7. 4
Die (55-Angaben für das
Formular

milrg1n: 0:
padd1ng: 0 ;
body

I
font: 12px MTrebuchet MSM.Ar 1al. Helvetlca.
siln s - ser1f ;
.contilctleft I
w1dth: 2SI:
c 1ear: both ;
float: left;
dfsplay: fnlfne:
paddlng: 4px:
milrgfn: 10px 0;
t ext-allgn: r1ght:
.contilctrfght (
wldth: 70S:
text ' illfgn: left:
float: rlght:
di s plilY : fnlfne:
pildd1ng: 4px:
margfn: Spx 0:

dl vllwrilpper

I
margfn: 0 ;
wldth: n opx :

rJ.

Formularfelder mit (55 gestalten

I

43'

di vfJcontent
margfn : 0 auto:
paddfng: 0 5px 0 0:
text-a l ign: 1eft ;
width: 500px;
input. textarea I
border: Ipx so lid IJaabb cc :

EI

Innerer Abs tand und Web 2.0-Styling
Es ist wichtig, dass in den Eingabefeldern hinreichend viel Platz
zum Rand hin gelassen wird. Der Benutzer soll sich beim Ausfollen der Felder nicht »eingeengt e fühlen.

I

Kontaktformular
Name:

I M;:ox
r.
:::7M~,:s'termanrl

Emli~

Imox..m~

RQckmeldlln&:

Abbildung 7.21 ~
Vor dem Styling.

1Ab senderlll

h2 (

font- fam1ly: "Tr ebuchet MS" . Ca11br1. Georg1 a. serH :
f ont-wefght: normal:
font-size: 4em:
co l or: fifff:
(

span. reQuired
color: fi fff;
f on t- size: 2em:

432

I

7

Formulare

I

label I

co l or: ilfafafa :
f o nt -welght: bald :
paddlng: 2px Spx 2px 5px:

I

.contactform UName .
. cootac tform DEmaf 1 .
. contactform fIStte .

. conta ctf orm Ofeedback
wfdth:80S :

paddlng:Spx :
color: 11333:
f on t: 1 . l em/ l . 6ern Arf a1, "T rebuchet M5" . Verdana,
sans·se ri f:

Bei der letzten Anweisung könnte man genauso gut mit

input. text area I wldth: 801 ... J
arbeiten. Um jedoch einzelne Felder speziell zu gestalten, werden sie über ihre jeweilige ID angesprochen. Mit ein bissehen

Styling im . frischen blauen lookoc erhält man :

body I

background'col or: nSEA407:

h2 ( font-faml1y: ' Trebuchet MS' , Callbrf,
Georg1a.serff:
f ont-wefght: normal:

f oot-s1ze: 4em;
colo r : IJfff;
}

span. requfred
co l or: {}fff;

fon t -sf ze: 2em;

7-2

FormularfeJder mit CSS gest alten

I 433

Abbildung 7.22

~

... und nach dem Styling

11

Ge st altung der Eingabefeld er

Um die Eingabefelder stärker zu betonen, kann man ihnen einen
dunkelblauen Rand der Breite 1 px geben .

. contact f orm I/Name,
.contactform IIEmai 1 .
. con ta ctfo rm IISi te,
.con t actform flFeedback
I
border: Ipx solid 1/387ebl:

Zur noch besseren Übersichtlichkeit kann man den Eingabe-

• Abbildung 7.23
Damit das Eingabefeld besser
zur Geltung kommt. wird es mit
einem dunkelblauen R,md versehen.

434

I

7

Form ulare

feldern einen neutralen, abgerundeten Rahmen verleihen. In
CS53 wird in Zukunft die Eigenschaft border-radius dafür sorgen. Im Mozilla Firefox kann man dies mit -moz-border-radius
erreichen; es empfiehlt sich jedoch, mit entsprechenden CSSbzw. JavaScript-Techniken zu arbeiten.
Eine große Auswahl entsprechender Techniken finden Sie im
Beitrag (55 Rounded (omen Roundup (http://www.smileycat.
comlmiaowl archives/ 000044.php, Linkcode 252). Die meisten
Methoden basieren auf der Positionierung von HintergrundbIldern, die zusammen mit passenden Hintergrundfarben den
gewünschten Effekt abgerundeter Ecken erzeugen.
Im Beispiel des Online-Formulars können abgerundete Ecken
nur durch den Einsatz von speziell dafur gestalteten Bild ern realisiert werden. Dies ist meistens zeitaufwendig, erzeugt unflexiblen
Code und ist mit zusätzlichem Markup verbunden.

I

Bei anderen Seitenelementen lassen sich Abrundungen dagegen
in Bruchteilen von Sekunden auch ohne Bilder erstellen. So kann
eine Abrundung mithilfe der robusten Nifty (omen (ube-Bibliothek (http ://www.html.iVarticoli/nijtycubelindex.html. Lin kcode
253) hinzugefügt werden .
Schritt 1: In st all ati on des Skripts
Laden Sie die JavaScript-Bibliothek von der Seite des Entwicklers
herunter und entpa cken Sie das Archiv in einen Ordner. Suchen
Sie im entpackten Verzeichnis die Datei nijtycubejs und kopieren Sie diese in den Ordner, in dem sich Ihre Webseite befindet.
Binden Sie diese Datei anschließend vor dem abschließenden
</head>- Tag ein - und Z:Nar auf der Seite, auf der Sie die Seitenelemente abrunden waUen :
<sc ript type-"text /javasc r1pt" sr c- "n1fty cube.j s" >
</sc ript )

Nifty Corners
~lJm oe<: o!)huc nerr·Cfe laJ9(l' 00.
..ur nvl;;, "·,."OVld,i d Cum en m ,,,",s,,,.
neo c..-.clUG rroliola &~Icnd <I;:, kJG MI. Vm
l;,bote d~':o.::t{l "n _bt!. ·Iotr "~

LCferr

,lI: ~ rrupl" .:on '191, fU\IIl

~II\JI}€I! Jlctfoo~

Simple. Just
Javascripl
end CSS.
Sed te ,Jl(7,te!
PI'l"IIIC lfOclalM
In pro illum mpetu.;

diQn/$&lm. (1(1
u b qu~

"."",1

elll'd-m :·ed Cu

di&s..,lIu nt cuw.

ROlIlded comelS Wlthout
images

sc ,i plOlern qu a " I.

hJlccomrrooo

IJIm sd<!l p<wtlO!l1do u; S,n """ul,,
CctrlllJM 00 val. ~OCCfll ~:iran

'n:: rtll~e ~~I e.:l fd eos deo ~.lle I\O\IUtr
~ ..

vi,,,,,wrc mScl...-.. et O'JIic;. O'T","sqUfl

omnJr'ltUJ lGU (11. "C6 uiurr fte,ool

"''I'., ...r-

t>

Id O<>$I~,d

~"""Ibl.~ ~

....

.. Abbi ldung 7.24
Übliche Darstellung ohne Einbindung des Nifty-Java5cripts

,w

Schritt 2: Abrundung mit JavaSc ript
Angenommen, Ihre Seite enthält zwei beliebige Elemente, die
mit dem folgenden Markup ausgezeichnet sind:
<div idM ' container ' >
<div id-" co ntent " )
<hl >Nifty Corners</hl>
<p) Lorem ipsum . . . </p>
<h2 ) Rounded cor ner s without 1mages</ h2 )
<p>Vlm so let part1endo ut. .. </ p>
</d 1v>
7-2

Formularfelder mit C55 gest al ten

I

435

<d1v id- "nav ">
<h2>S1 mpl e. Ju~t Java~cri pt and CSS . </h2>
<p>Sed te movet propriae ... </p>
</ d1v >
</div>
Zur Abrundung vo n Elementen ist es notwendig, die BibliotheksFunktion Nl H y() mi t passenden Argumenten aufzurufen. Die
ID-8ezeichner im oberen Ouelkode sind demnach als Variablen
zu verwen den. Als Übergabeparamet er kann das Skript beliebige
Folgen von Selektoren (Tags - <p>, <h2>; l Os - div/Jheade r ,
h21la bout; Klassen - div.news, span.d ate, p.coßll1ent usw.)
erkennen. Außerdem können Schlüsselv'lörter angegeben werden, die die Eigenschaften der Abrundung (etwa die Größe oder
die Angabe, ob alle oder nur ausgewähl te Ecken abgerundet werden sollen) fes t legen. Standardmäßig werden alle Ränder mit 5 px
Radius abgerundet.
Zum Aktivieren des Skripts wird die Javascript- Funkti on
wind ow. onl oad verwendet. Sie sorgt dafür, dass die Met hode
Ni H y() beim Aufbau der Sei te aufgerufen wird. Der Ouellcode
<se r1pt type- " text/javascr1pt " >
wi ndow. on 1oacl- fu net i 0 n( ) (
Ni fty ( ... Parameter ... ) :

I
</se r1pt >
wird somit bei der Abrundung von Sei tenelementen über die
Nifty Corners Cube-Bibliothek immer vor dem abschließe nden
</ head >-Tag erscheinen.
Zur Abrundung der Container fleon tent und flnav aus dem
oberen Beispiel genugt es somit ,
<se ript type- " text /javase ript " >
wl ndow. on 1oad-funetl on( ) I
Ni fty ( " di vDeontent .dl vDnav " ) :

I
</se r ipt>
vor </head> zu setzen.

43 6

I

7

Formulare

Sinple. ..AJst

Nifly Comers

Javascnpt

LO'",,. "CI" oe ~""JC "d!"".I•.. ~JI n.
"I" n"'" ~1r'::I1 <J Gu ....... n """,,,,,1

oe G.1f'ICIU: 11';1:,. ~CIll'r,oj:M UG r4. \'m
1,,:....;0. w ... ",-tv"~ L1Y .. ~L>.,..;"'.
,"",,.,n.~. ~~

.'"" 1,'9'1 Y.,......'1", bH

aldCSS.
'S"<l!~ rlY'Ve1

p oproo tr -lCt ~ or;
In pr~ i .....,. i"l'l'l""
~f'05WO" ,11

...

!b(JoJotleftn:

eQ,ldilfl' ~Gd Cu.

"' ......w... cu m

Aomded comers Wlm lt
images
~'."

.. Abbildung7.25
Abgerund et e Ecken Im Einsatzbenutz erfr eundlich, elegant und
automatisch generiert mit der
Nifty (orners (ube-Bibliot hek

,,,",,,,,,

ecn ~04'I1Il' QUO at

.."." P."",.I\d~ ,.. "" w·,.! ..

co" n"'ll08 ij,l ~.I

,~,,~

."'rmll'l..... t·'

1~~IkO!!.. ·""'I...

vi; VlY$1:l!.rr

I'l~dcoo

••!'IU"'"

Cl. Orooo OMlCCqJG

c<rtlJ tu· ,IW.t .... Ln Ii.l<o!<\

.'II.qo.'f'"l"''' Id M... llud ''''', tu.

~"

~<Ir .. ,t

-

Das Ergebnis lässt sich sehen: schöne Bl öcke m it automati sch
generierten , abgerundeten Ecken ohne Verwendung von zusätzli chen Bildern.
In unserem Beispiel wird weiterhin die - mo z -border-rad 1usEigenschaft eingese tzt . Sie können d iese naturlich auch wie

gezeigt durch NI/tr (orners ersetzen.

1nput . t extarea I
border: 4px solfd {t387ebl:
-moz-bo rder- r adfus: 3px;

... Abbildung 7.26
Eine 4 px große dunkelblaue
Abrundung fü r das Eingabefeld
mit der -mOl-border-radiusEIgenschaft

HINWEIS

J

Beachten Sie, dass die FOfmallerungsanweisung 1001 bord er -radl us eine proprietäre
Anweisung von Browsern der
Gecko-FamUle (Mozilla Flrefo)(,
(a mino, Flock usw.) ist . In de r
nachsten Version der (SSSpezifikation w ird die Anweisung
bord er ra cl1us diese Funktion
übernehmen. Andere Browser
Ignorferen die Anweisung. In
unserem Beispiel wird sie verwende t , um ein benutzerfreundliches DeSign mil minimalem
Quellcode zu erzelßen .

Dies führ t zu folgendem Formular:

.. Abbildung 7.7}
Das Formular mit verzierten
Eingabe feldern
7.Z

Formularfelder mit (SS gest alt en

437

I

D

Gestaltun g des Submit-Buttons

Ans chließend wird der Submi t-Button gest alt et.
Ilsubm {
f ont: 1. l em/l.6em "T rebuchet M$ '·. Verdana .
Sil ns-ser if:
w1 dth: 310px :
border: Ipx so lid IIdddddd:
padd1ng: 4px Spx 4px 5px;
color: IIfff :
background-colo r: 11285<180:
f ont-wefght: bol d:
-moz · border-rad1 uS: 3px :

ontaktformula r.
I'"
I ..m....

'C!ICIII

,..

.:======:::::;,

Abbildung 7.28 ..
Der Submit-Button hebt sich
durch seine Hintergrundfarbe und
die weiße Kontur ab.

J b.. ndo n l

Um dem Formular eine eigenständige Gestalt zu geben, wird es
mit einer Hintergrundfarbe versehen. Damit die Farbe sichtbar
wird, wird ove rfl o.... : auto verwendet. Für den Internet Explorer 6 muss außerdem die Höhe explizit angegeben we rden :
height: 100%;
.con t actform {
ove r f low: auto;
height: 100%;
background -color : 114c95c9 :
-moz-border-radius: 6px :

438

I

7 Formulare

I

Als Nächst es werden die Überschriften durch eine Hin tergrund farbe hervorgehobe n.
l abel {
color: /f f af af a :
f ont - wei ght : bold :
paddl n9 : 2px Spx 2px Spx :
back9r ound -col or : 115 ea 4d7 :
-mo z -bo r de r - r adl us: 3px :

.. Abbildung 7.29
Das Bild des Kontaktform ulars
im Web 2.0-look

g

Einfüg en von Mini-Icans

In diesem Sch ritt wi rd das Formul ar mi t M ini-leans ve rsehen.
Dazu werden die Eingabefelder mit geeigneten transparenten
Hin tergrundbi ldern sowie mit einer passenden Hin t ergru nd fa rbe
gestaltet
.con t act f orm IJ Name
background : II fff u r H bu ddy . png) no-repeat l e f t :

J
.con t ac tf orm II Email
bac kground: fl fff ur l (emall . png) no - repea t le ft:

J
.cont act f or m nSit e {
bac kgr ound : II fff ur l( house . png) no- r epea t l e ft:

J
.con tact f orm IIFeedback
wi dth :86%:
7-2

HINWEIS
Beachten Sie, dass der In ternet
Explorer 6 und ältere Versionen
Probleme mit der PNG-Trarnparenz haben. Bei der Verwendung
von Bildern im .png-Format
müssen Sie deshalb bei plattformunabhängiger Darstellung
auf Browser-Hacks zurückgreIfen. Alterna t iv können Sie auch
mit Farbangaben oder transparen ten .gif-Dateien ameit en.

Form ularfelder mit CSS gest al t en

I

439

Abbildun g 7.)0
Ein Mini-Ieon wird als Hintergrundbild eingeftig!.
..t..

,,
Abbildung 7.)1
Beim Eintippen ist der eingegebene Text wegen des Hintergrundbildes nur schwer lesbar.

..t..

.. Abbildun g 7. 3~
Mit einem passenden inneren
Abstand wird der Te)(t bei der
Eingabe nach rechts gerückt.

background: fJ f ff ur l(corrmenLpng ) no-repeat bottom
ri ght :
I
.contactform l!Name,
.contactform IIEmail ,
. co nta ct f orm IISite,
w1 dth: BOI:
paddlng: 5px 5px 5px 25px:
I
Der linke innere Abstand in der letzten C55-Deklaration wird auf
25 p)( gesetzt, da der eingegebene Text bei 5 px Abstand wegen
des Hintergrundbildes nur schlecht lesbar wird .
Zu beachten ist auch, dass das Hintergrundbild genügend
Abstand von linkem Rand hat, damit es hervortritt. Beim Verwenden von vorgefertigten Icons muss man eventuell das Bild
noch manuell anpassen .

Abbildung 7.)3 ..
Links: Geeignete Mini-I eons für
die Felder . Email _ und . WebSeite_ , rech ts: geeignetes MiniIcon für das Kommentarleid

Berücksichtigen Sie bitte, dass die Mini-kons auf dem Bildschirm
symmetrisch dargestellt werden sollten, also vertikal wie horizontal gleich ausgeri ch tet sein müssen. Dies erleichtert nämlich den
vertikalen Durchlauf des Form ulars und liefert den Anwendern
intuitive visuelle Hinwei se.

Abbildung 7.)4 ..
Das Formular mit Mini-I cons
440

I

7 Formulare

a

I

Gestalten der Zu stände der Eingabefelder

Bei der Farbgestaltung von Formularen soHten die unterschied·
lichen Zustände bei der Eingabe bedach t werden. So hat die oben
gewählte weiße Hintergrundfarbe ein starkes visuelles Gewicht
und kann deshalb verwendet werden, um den Seitenbesucher
zum Ausfüllen des Formulars zu animieren. Ihren Zweck kann sie
somit vor allem im : hover-Zustand erfüllen.
Die eigentliche Eingabe der Daten muss dagegen bequem und
angenehm gestaltet werden. Darüber hinaus muss die Navigation über [§] visuell deutlich gemacht werden. Dies kann etwa
durch einen dunkleren Hintergrund und einen neutralen Rahmen
des: fo cus -Zustands geschehen. Daher wird eine Standardhintergrundfarbe gewählt, die nicht direkt auff,Ult, aber dennoch
deutlich hervortritt .
. contöctform
. contöctform
. con töct f orm
. cont actform

I/Name .
IJEmö11 .
IISite .
I}Feedback

co l or: IJbbddff:

.contactform DName
background: 1J3377aa urHbuddy.png ) no-repeat left:

J
.contactform IJEma11
background: 1J3377aa url(emafl.png) no- repeat left:

J
.contac tform IIS1 te (
background: fl3377aa url(house.png) no-repeat left:
J

. conta ct f orm flFeedback
{

wldth:86S:
background: {J3377aa url (corrrnent. png) no -repeat bott om
r1 ght :
{

7.2 Formularfelder mit (55 gestalten

I

441

ontaktformula~

Abbildung 7.35 ..

..h...",,~,,'

Das Formular im passiven Zustand

Anschließend werden die; f ocus- und ; hover-Zustande definiert .

.... Abbildung 7.36
:hover-Zus t and

. eon ta c tf orm I/Name: hove r,
.contactform I1Emai1 :h over ,
,contact f orm /151 te:hover .
. con t actform flFeedback: hover
background-color : I/fff :
border: 4px sol id IJ6ad:
color : 1/333 :
}

:act iVe-Zustand

.eontactform
.con ta c tform
. co nta ctf orm
.contactform

.... Abbildung 7·3 8

border: 4px sol id 1/7bd:
color: I/Hf:
background - color: 11369 :

:hover- und :active-Zustand

}

".... · I

~·

.... Abbildung7.37

a

IIName: f oeus,
IJEmail: f oc us .
IJSite:focus .
IlFeedback : focus

Zusätzliche Klassen defin ieren

Im Allgemeinen ist es hilfreich, zusätzliche Formularkl assen einzuführen. Über PHP~basierte Maller können Sie dann genauer
best immen. wie ein Eingabefeld unter bestimmten Umständen
erscheinen soll. Werden die Dat en an den Server geschickt,
so kann man mit speziellen C5S-Klassen dafUr sorgen, dass
bestimmte Felder besonders ausgezeichnet werden.
442

I

7

Formulare

I

Für Warnmeldungen (etwa wenn in einem Eingabe(eld keine
Angaben gemacht wurden) empfiehlt es sich, das Fe ld ni cht
grundsätzlich anders zu gestalten, sondern durch leichte visuelle
Markierungen, wie z. 8. eine rote Kante, hervorzuheben.
<d1v class- ' contactleft ' >< label for- ' Eniail ' ) Email:
<ll abel ></d1v>
<d1v class- ' wrong contactr1ght ' >< 1nput name- ' Ema 11 '
ld- ~ Emall ~

slze- ~ 30 ~

maxlength-W50 ~

value-w ~

type- ' tex t ' I> <s pa n c l a ss- ' req ui red '>*<Is pan >< Id 1 v)

C55 :
,contactfo rrn .wrong IIErna11 {
background: IJffffff url(warning.png) no-repeat left:
-moz-border-radlus: 3px:
co 1or: 11333333 :
border: 2px solid 11990000:

.. Abbi ldung 7. 39
Warnmeldung mit einer roten
Kan t e

Alternativ kann man den umgebenden Container gestalten, um
die Felder nicht einzeln gestalten zu müssen :
.wrong (
background: lJ77aadd url<exclam.gif) no-repeat rlght:
border: Ipx solfd D99ccdd :
border-wldth: Ipx 0 l px 0:

,.....

.
-

'
-

.. Abbildung 7.40
Eine Wammeldung erscheint
neben dem EIngabefeld .

Mit demselben XHTML-Code ergibt sich mit dem oberen C55Styling das Seitenbild , das Sie in der obigen Abbildung sehen.
Man kann allch die Warnmeldung und die rote Kante miteinander kombi nieren.
.. Abbildung7.41
Beide Methoden zur Auszeich·
nung eines Feldes werden
miteinander kombiniert.

Es liegt nahe, beim Darüberfahren mit dem Mauszeiger über ein
Warn·lcon einen entsprechenden Hinweis (Tooltip) anzuzeigen,
der den Anwender über eine korrekte Eingabe des Feldes in(ormiert. Eine Möglichkeit ist, einen dlv-Container einzufügen, der
in der Standard anzeige mit
display: none:

7-l

Formularfelder mit CSS gestalten

I

443

ausgeblendet wird und ers t nach der Eingabe des Benutzers per
5erverantwort durch Einfügen einer neuen Klasse

.dl s playlnput [ di s play: block: }
angezeigt wird .
Wurden die Daten erfolgreich übermitt elt, so kann dies dem
Anwender durch ein grünes Mini-Icon mitgeteilt werden.

<f o rm act 1on- " form. php " method- " post ")
<div ld-"wrapper
<d lv ld- "content ")
<h2 ) Fertigl</h2)
<d iv class- "contactform ")
<div id- "Erfolg ")
Danke ! Ihre Eingaben wurden
erfo l greich Obermittelt.
</div >
</ div >
</ dlv)
</dlv >
<I form >
M

)

(55:

.con t ac tf orm flErfolg
background: f/fcfcfc url(accept.pngl no - repeat lett:
border: lpx so lid I/eeeeee:
co 1or: #0066CC:
padding: lOpx 10px 10px 30px:
-moz-border-radius: 3px:
wldth: BO%;
margi n: 1. Sem auto;

I
Somit ist das Design eines einfachen Online-Formulars abgeschlossen. Beachten Sie bitte, dass das Formular auch ohne CSSund JavaScript-Unterst ützung vom Browser des Benutzers angezeigt wird und einwandfrei funktionie rt . _

.. Abbildung 7. 42
Wurden die Dat en erfolgreich
versendet. so kann man dies den
Anwender durch eine Mitteilung
wissen lassen.

444

I

7 Formulare

Vorschau I Eine übliche Option, die Anwendern häufig zur Kontrolle bereitgestellt wird (vor allem bei mehrseitigen Formularen)
ist die Vorschau der eingegebenen Dat envor dem Absenden. Dies
kann entweder auf der Seite des Clients mittels JavaScrip t oder
auf der Seite des Servers mithilfe von PHP realisiert werden .

I

Ja vaSc ript VS . PHP
Im Hinblick auf die Benutzerfreundlichkeit i~ t die JavaScriptMet hode besser, vor allem wenn sie mit hilfe von XMLH ttpRequest zu einer Ajax-basierten Methode erweit ert wird. Dann
sieht der Anwender seine Angaben nämlich direkt, ohne dass
zu einer neuen Seite gewechselt wird (PHP-basierte Methode).
Die Veränderungen können somit direkt vorgenommen werden.
Aber: Weist der Browser des Anwende rs keine JavaScript-Unt erstütz ung auf, so steht dem Anwender auch keine Vorschauoption
zu r Verfügung.
Der erneu t e Ladevorgang der Sei te ist dagege n bei PHP-basierten Vorschauen immer der Fall. Eines der wesen tlichen UsabilityProbleme stellt dabei die In teraktion über den Zurück-Button im
Browser dar. Kehrt der Nutzer beim PHP-Ansatz über den Button
zur vorherigen Seite zurück, so läuft er Gefahr, dass die Daten
verloren gehen. St attdessen soll te der Anwende r die vom Entwickler speziell bereitgeste llte Opt ion zum Ändern de r Angaben
verwenden. Bei der JavaScript-Met hode kann es hingegen nicht
zu einem Verlust de r Daten kommen.
Eine weit ere Möglichkeit ist es, die eingegebenen Dat en direkt
bei ihrer Eingabe anzuzeigen. Sie komm t vor all em bei Weblogs
zum Einsatz, bei denen Seitenbesuchern vielfältige Formatierungsmöglichkeiten (Schriftgröße, Farbe , Verweise usw.) für die
Komment are zur Verfügung stehen. Bei üblichen Formularen
wird dies eher sel ten der Falt sein.
Beim Design von Vorschaufenstern bzw. Preview-Seiten sollten
Sie die eingegebenen Daten möglichst formal, deutlich und ähn lich den Haupttönen I hres Formula rs darstellen. Die Nutzer wollen siche r sein, dass mit ihren persönlichen Dat en angemessen
umgegangen wird, und dass sie sich auf die Professionali tät des
Anbieters verlassen können. Durch die Wahl schreiender Farbtöne und ei n zu buntes Farbenspiel kann dagegen der Eindru ck
eines nichtprofessionellen Angebo ts entstehen, was event uell
dazu führt, dass der Benutzer seine Eingabe abbricht.
Tooltips I Tooltips (kleine Hilfsanweisungen) werden in OnlineForm ularen in der Regel rechts vom Eingabefe ld platziert, da im
westlichen Kulturraum von links nach rech ts gelesen wird.
- Per50nal l nformation

=======:--;:;-;=====:::;-1

r;rst N..... e : [ I=======~

LanN.IoII.. :

l

A<tt"'·· 1

JtI ~"o""l lodOl""lI"",
"'-_ ,,-t .. ,."'" ,~"' ......
_, .. onoy.,.,..-."h

yov_ <.'d, ",'<I< <0.<1, rr
Nr1o. "''' ..... L

].2

.. Abbildung 7.43
Tooltips werden im rechten Seitenbereich angezeigt
(Quelle: hltp :lljeffhowden.coml
c:odeJess/forms).

Formu larfelde r mit CSS gestalten

I

445

_.

-_..

-,-"-.,.
0 ••

iO ,;;- I iii'""'.

•

•

_/Ii;T;.

~

--

~J. I

,,-_.
..........,

--

........,.,_ ............

Abbildung 7. 44
links : Eingabefeld ohne Tooltip;
rechts: mit Tooltip
(Quelle: http://examples.wufoo.
com/forms/exercise-trackerj
..t..

.. >O n • • ,

:cU

•

_... .."
'"

,

<-,_.... ,.,_•

Im Beispiel wird dies durch die Darstellung von Formularelementen in Form einer ungeordneten Liste sowie durch das Ausund Einblenden des _Tooltipc_Absatzes perreicht.

<1f)
( label (la ss· ' desc · for- ' Fleld ") Dl s tance ( /label )

<di v>
<input id-" field " name- "Field " cla ss· "fleld text
small " maxlength-" 2SS " value-" " type-"text ")
(/ dfv >

<p cl as s_Hi nstru ct" ><sma l l>Enter dl stan ce 1n
mi 1es . <Is ma 11> (/ p>
</ 1i )
(55:

form. i ns truct{
di s play:n one;

.f orm 11:foc us . 1ns truc t. fo rm l1:hover .1n s truc t{
di s play: bl oc k;

I
Alternative Methoden zur Gestaltun g von Tooltips

I Längere

Beschre ibungen, die als Hilfe dienen sollen, können die vertikale
Ausdehnung des Formulars erheblich vergrößern. Und soll si ch
ein Tooltip über mehrere Formularfelder erstrecken, so können
eventuell nicht alle Elemente mit einer Hilfe angezeigt werden.
Es ist deshalb üblich, Beschreibungstexte erst nach einer Nachfrage anzuzeigen . Rec hts vom Eingabefeld wird dazu ein Hilfekon platziert. Ein Klick auf das Bild genügt, um eine ausführliche
Hilfe anzuzeigen. Im Allgemeinen werden zu diesem Zweck Popups verwendet , was bei jedem Usability-Experten Skepsis hervo rruft. Es empfiehlt si ch, zusätzli che Informationsblöcke «p >,
446

I

7 Formulare

<d10) innerhalb einer Sei te anstelle von Pop-ups zu verwenden.
Bei Bedarf können sie unter dem Eingabefeld angezeigt werden.
In der folgenden Abbildung wird die Technik Form Hl'lp With
Popups (/Ittp://julcystudio.comlarticle/lorm-help-without-popups.
html, Linkcode 254) demonstriert. Sie basiert auf JavaScript und
kann deshalb von Nutzern, deren Browser JavaScript nicht unterstützt, nicht verwendet werden.
Ptl:rtO ' "

I
" ~ Code

~.

•

.a. Abbildung 7.45
Rechn. neben den Eingabefeldem
befinden sich Hilfe-I eons.

!~!Coo .

E><pI ''''M n of IMEI Code
ThI! ""_nn<;n:<l 1.10."''' E~ert Io,len,ty (r.EQtUIU! I:s a U" 1jIA!
to~e Ulf ~

co 1(tf"~'Y an rJOlM(t,jM .~l rncDiIo

, ~.dIgf

t!'I"P~one In.

n""'" <all b.
TOl.YIII on IT\O$I ~OIIrs rJ'f ~ fl 'nu . m C00"0l31b1 OOl!!fl"t ... Ofk ~I \llJ 1J'
mODile p/'IOoIe. ~II!II. eaIJ Oll' ,uppon: terne on ....H !(lj 1252 1««»:<

... Abbi ldung 7.46
Die Hilfe wird beim Ankli cken
des Hilfe-Ieons unter dem Tex t
all!ezelgt.

!~~. cooe:

Eine weitere Methode ist die Anzeige von HHfet exten in einem
Toolt ip direkt unter dem Eingabefeld. Realisiert wird sie durch ein
JavaScript, das in Abhängigkeit vom Status eines Feldes bestimmte
Blöcke auf der Seit e anzeigt oder verschwinden lässt.
- Tu ltlps - - - - - - - - - - - - - - - - - - -

E n l(l(llm ~~nrl""'~ VP~ldn.,n ~ehr hrf'ed sem, etwa l.I'lI dp
!Ie!d-nftvlQ en I [''lOabel'e des , U erUr.Al!m.

... Abbildung 7.4 7
Beim Fokussieren des Eingabefelde s mit dem Mauszeiger kann
man sieh einen Hinweis anzeigen
lassen.

Bgr-vt:gr:

~gr.. "'ort,

rL. (mn. 0 : • .d _ , )

<f orm actlon-" processl ng. php ")
<ffeld set>
<1egend >Tao 1 t l ps </ 1eg en d)
<dlv cla ss· ' fntro ' >
Eln Tooltlp kann unter Umstanden sehr h1lfrel ch seln.
um die Beschriftung efnes Efngabefeldes zu er13utern.
</ dfv >
<s pan class·- username-passfv " >
<dlv sty l e· · top: 402px; left: 410px ;'
c lass- t ooltlp 'pa ssfv - >
<dlv ><small >( max. B Zefchen l</small>< / dfv >
</ df v>
<1abel for- ' use rname ' >Benutzer: <11 abel >
R

7.2

Formutarfetder mit (SS gest alt en

447

<input id- " us ern ame " name- " use r name " value- ""
size- ~" class- ~requi r ed ~ t ype- " t ex t " )
<spa n class- " reqMar k ") *</s pan)<br I)
</spa n)
<spa n c1 a ss-" pass_t " )
<1 a be 1 f o r - " pa sswo r d" )Ke nnwo r t : </1 a be 1)
<i nput id-"p asswor d " name- " passwo r d" va l ue-""
s iz e- "" class- " requi r ed " t ype- "pass word ")
<spa n c l ass-" r eq Ma r k" ) * </span)<br I)
<I Spa n)
</ f ieldset>
<I f o r m)
HINWEIS

Beachten Sie bitte, dass die
Klasse t oo 1t 1p· a K11 v Im oberen
Ouelltext nicht vorkomm t. Ein
JavaScript sorgt mittels einer
DOM-Manipulation dafür, dass
die Eingabefelder mit einer
passenden (55-Klasse versehen
werden. Beim Fokussieren des
Eingabefeldes mit dem Mauszeiger wird die Klasse too l tlp pa ss 1 v durch die Klasse t oo 1 tlp -al:tlversetzt.

(55:
1* Toolt i p im a ktiven Zustand - s i chtbar AI
f orm .t oo lt ip-ak t iv
pos iti on : abso l ut e:
wl dt h: 180px ;
z-index: 50 ;

form . t ooltip-a ktiv div !
bac kground-color : IJ fff bb8 ;
borde r -le ft : l px solid IJff c20d :
borde r -rlgh t: Ipx so l id !l ff c20d :
border - bo tt om : I px so l id fiff c20d :
pa dd i ng: 4px ;

I
1* Too lt lp im pa ssiven Zust and - unsic htb a r *1
f o r m . t ool t ip·pass i v
vlslbl1ity : hi dd en:
posi t ion : abso l ute:

I
Oblicherweise sollten Toolt ips in neutralen Fa rben gestal tet werden und e rst dann auffallen, we nn sie benöt igt werden , a lso
wenn d er Nutzer das jew eilige Feld ausfüll t. Gelb und Blau gehöre n dab e i zu den beliebt este n Farben, weil sie angenehm und
unaufdringlich wi rken.

7.2.3

Die Größe de r Fe lder man uell eins te lle n

W iederum interessant im Hi nbl ick auf die Be nutzerfreund tichkeit von Dn lin e-Formula ren ist d ie Möglichkeit , die Länge bzw.
Breite der Eingabefelder du rch den Nutzer einst ellen zu lassen.
Ebenso kann man Nutzer auch d ie Sc.hriftg röße bei der Eingabe
448

I

7 Formulare

selbst festlegen lassen . Eine benutzerdefin ierte Länge und Breite
der Eingabefelder lässt sich mit der Textarea Tools Library (http://
liV5ey. or&,2005/0 1/ 29/ textarea-tools, Linkcode 255) realisieren. Die Schriftgröße kann über die Technik Zoom Zoom Zoom
(http:// www.deltatangobravo.comlimages/zoom. Unkcode 204)
angepasst werden. Ein Beispiel, wie beide Techniken eingesetzt
werden, finden Sie auf InlectedFX Contad Page (http://www.
Infectedfx.net/contado, Unkeode 256) .
7.2.4
Formularnavigation
Bei größeren Formularen ist es durchaus sinnvoll, eine zusätzliche
Formularnavigation auf der Seite anzubringen. Sie kann etwa im
rechten Seitenbereich erscheinen oder bei Bedarf eingeblendet
werden. Wie dies gemach t w ird, können Sie auf der Sei te http://
www.quirksmode.org/css/display.html(Unkcode 257) sehen .
Tastaturkürze il Bei übli chen Formularen sind Tastaturkürzel
überflüssig, da sie in der Regel nicht benutzt werden. Spezialisiert sich eine Seite auf die Vermittlung best immter Dienste, die
eine permanente Arbeit mit Formularen erforderlich machen, so
können vordefinierte Accesskeys dem Anwender dagegen Arbeit
ersparen .
Die Tasta turkürzel können dabei beispielsweise durch Unterstri che des jeweiligen Buchstabens in der Beschriftung des Feldes
ausgezei chnet werden . Eine Beispiel hierzu :

--_
-_-----_
_-_.
._----_
__..._--_--_
, . .. " ... ,

..

--~_

i..

.......

~

H

...... . .

Abbildung7.48

Zoom Zoom Zoom zum Vergrö~rn der Schriftgr06e durch den
Nutzer

-

•
•b•

Vergroßerter Text.1

• Abbildung7.49
Beispiel zum Skalieren der
Textarea-Größe und der Schri ftgröße auf http://www.infectedfx.
neVcontacto (Unkcode 258)

<f orm actl on--form.php- )
<label for--var- ) <s pan c la ss- - key" >B</ spalü
Benut ze rname </ l a be 1>
<1nput type-"text" name-" var " 1d-" var " access key·" b"
value· ·· I> .

<I f orm)
Das dazugehörige CSS :
span.key ( text-decoratf on: underlfne; }
Alternativ kann man auch mit der Pseudo-Klasse : ffr st 'l etter
arbeiten. Diese wird jedoch von Firefox 1.07 Win, Explorer 5.2
Ma c und älteren Versionen bei der BrO'Nser nicht unterstützt.

7.2 FormularfeJder mit ( SS gestalt en

I

449

I

f o r m label: f irst- l et t er {
t ext -decora t ion: un de r l i ne :

7.2.5

Wie ge ht man mit Spam um ?

Ei nes der größten Probleme, mi t denen Seitenbetreiber bei der
Programmierung von Formularen zu kämp fen haben, sind automat isch abgesendete E-MaiJs und Ko m menta re zu Posts. Diese
werden von Spammern gerne verwendet und ausgenutzt. Ins-

besondere dann, falls der Programm ierer allgemein bekann te
Sicherheit slücken nich t beacht et hat . Unsichere Formulare können somit schn ell zu einer .. Brutstätte« von Spam werde n.
Ein hohes Niveau an Sicherheit kann durch die Verwend ung
eines (APTCHA (Completely Automated Pl.lblie Turing test to tell

Comp uters and Humans Apart) erreicht werden. Es handelt sich
hierbei um einem Ansatz, bei dem vo m Benutzer eine Art AuthenHINWEI S
In der Regel benötigen Sie zu r
Einbettung eines ( APT(HA eine
spezielle grafische Bibliothek,
wie zum Beispiel die GD GraphiCS library (http://boutefl.(oml
gd) oder ImageMagick (http://
www, lmagemagk k. (om )- eine
flelCible Open-Source-Bibliothek,
die APls für C, Perl, Java, PHP,
Visual Basic und wei tere Sprachen bereitstellt. Beide libraries
sind ziemlich an spruchsvoll und
nicht einfach zu implementieren, da zusätzliche Bibliotheken
installiert oder neu kompiliert
werden müssen. Darüber hinaus
sind die meisten gralischen
( APTCHAs für Anwender, die
ohne visuelle Browser im Netz
surfen, unverständlich und somit
auch nicht zugdnglich.
Beach ten Sie beim Einsatz eines
CA PTCHA, dan Ihre Besucher in
der lage sein müssen, ein neues
CAPTCHA-Bild zu generieren,
ohne das Formular neu zu laden .
Aus U ~bility-S i ch t gibt es nichts
Schlimmeres, als erst nach dem
Ausfüllen eines Formulars fe stzustellen , dass ein CAPTCHA nicht
deutlich genug ist .

450

I

7 Formulare

tifikat ion ge ford ert wird. Dabei soll er gewissermaßen bewei sen,
dass er ein Mensch und kein Spam -Bot ist. Dies geschieht bei spielsweise dadurch, dass ein auf dem Bi ldschirm d argestelltes
Wort (schwache Sicherheit) eingegeben, eine FrilBe beantwo rtet oder eine simp le mat hemati sche Aufgabe (hohe Sicherheit)
gelös t werden muss.
Eine einfache und effi zien te Methode bietet ein pseudografisches CAPTCHA mit PHP, Dabei handelt es sich um ein von
Rene Sch mid t entwickel tes Skript , das eine v ierstellige Zahl aus
&nbsp: -Zeichen mit weißem und schwarzem Hintergrund darstellt.
W ie d as CAPTCHA-Skript in einen Formul arbausatz eingefügt
wird, wi rd Sc hritt rur Schritt in dem begleit enden Beit rag des
Autors beschrieben .
.. M ehr Inform ation zur Methode :

http://www.drweb.de/ web master/ s;ehere-Jor mu Iare-eapt eh a,
shtml (lin kcode 259)
..

Kontaktformular-Ba usatz für Webentwickler:
http://www.drweb.de/ w ebmaster/ kontakt-Iorml.llar- bausa tz.
shtml (linkeode 260)

Nach einer det ailli erten Betrachtung von einschlägigen XHTM LEl ement en sowie CSS- und Java Sc ript-basie rten Met hoden,
soll ten Sie nun in der Lage sein , ein standardkonformes, zugängli ches und ben utzerfreundliches Grundgerüst für Ihr Form ular
zu entwerfen und das Design anzupassen. Der En tw urf ei nes
solc hen Grundgerusts wird Ihn en im Rahmen dieses Buches zur
Ver fügung gestellt. Die Bibliot hek können Sie für alle Ihre zukünftigen Projekte verwenden und beliebig modi fi zieren.

I

Das GrundgerOst setzt auf eine tabellarische Struktur des Layouts,
in der Beschriftungen und Steuerelemente voneinander getrennt
werden. Zusammengehörende Eingabefelderwerden in Gruppen
(f1eldsets) zusammengefasst und mit Beschriftungen (legends)
versehen.
Bei der Gestaltung des Gerüsts werden verschiedene moderne
CSS-Techniken miteinander kombiniert. Methoden, die Ihrer

Beispiel

Ansicht nach überflüssig sind, können Sie mit einfachen Anpassungen der XHTML- bzw. CSS-Quell texte entfernen .
Neben den üblichen Formularelementen finden Sie zusätzliche
Funktionen, die mi ttels JavaScript realisiert werden: Toolt ips, das
Dar~e s l e ll t

Ausblenden von optionalen Feldern, das Hervorheben erforderlicher Felder, Accesskeys, Navigationen, Vorschau-Optionen,
CAPTCHA -FunktionaHtät usw. Das komplette Grundgerüst kann
unter dem Linkcode 261 heruntergeJaden werden.

7.3

wird die

Z~l hI 82: 5J

.. Abbildung7. 50
Pseudografisches CAPTCHA m il
der Me thode von Rene Schmid t

Formulare und Usability
Online-Formulare dienen der Interaktion zwischen den Kunden
und dem Unternehmen. Ein benutzerfreundliches Online-Formular berückSichtigt die Bedürfnisse
der Nutzer und erfüllt die Erwartungen des Sei tenbet reibers, etwa
indem es eine geringe Abbruchquote sicherstellt.

Bei Online-Formularen lässt sich viel mehr falsch machen, als
man den kt. Kleinste Ungenauigkeiten in der Struktur des Formulars fallen dem Seitenentwickler nur selten auf, werden von
Anwendern jedoch oft direkt erkannt. Deshalb ist es w ichtig, vor
der Veröffen t lichung des Fragebogens zu untersuchen, inwiefern
die Interaktion des Anwenders den Erwartungen des Seit enbetreibers entspricht.
Häufig treten Probleme bei der Beschriftung von Eingabefeldern, : hover- und: f ocus-Zuständen der Felder, mehrdeutigen visuellen Elementen sowie ihrer Platzierung im Formular
auf. Außerdem können komplexe Fo rmula rstrukturen genauso
zu Orientierungsproblemen führen wie überflüssige Informa-

HINWEIS

tionen.
In der Regel empfiehlt es sich, für typische Webformulare -

Dieses Kapitel orientiert sich
teilweise an den Artikeln .Web
Application Form Design E~pan­
ded« (http //www./ukew.wm/ff/
entf'j.asp?155 , linkeode 262)
und . Web Application Form Design« (http ://www.!ukew.lOm/ffl
entry.asp?155 , linkcode 263), in
denen Luke WrobJewski grundsatzliche Richtlinien des Interaktionsdesigns von Formularen
beleuchtet und ihre Verwendurg
in der Praxis erläutert.

etwa fOr eine Rückmeldung oder eine An meldung - eine einspaltige vertikale Ausrichtung der Formularelemente zu wählen.
Bei größeren Formularen sollten Sie eine Reihung von mehreren vertikalen Blöcken parallel zueinander vermeiden, da dies die
Komplexität zusätzlich vergrößert. Stattdessen sollten Sie die Blöcke auf mehrere Seiten verteilen und zusammenhängende Angaben auf einer Seite gruppieren. Geben Sie dabei auf jeder Sei te
explizit an, welche Angaben auf der Seite zu machen sind, und
wie viele Schritte der Nutzer vom Ziel entfernt ist. Bei solchen
Formularen ist eine Vorschau-Option unabdingbar.

n

Formulare und Usability

I 451

NllfilK

- .• _ .•

c=!3~~

~

SI."

519n up
today and try
Netfllx tor FAEE!

@
'4!!
..:.~

--

.. ,n.t

- - !:!""..:'-

.'----"
-'-'~.', -:==_~

~ ,.

:-::::-_-

_ .. c.o. . ..

...

--_.

a--- ...... _--

:.:-..:::-

-._-_.
...._,-----,
-,- ,---_.
,,,.,"'___ • __ M_' ___ '

,'_':.-_ .."..::-::::-.::---:

~ f1 11 1 1

----,
.......
_......
....,--_..
._-_.
------®®®«0
.--......,._ _ ..._--_.. _.
---.- ---=-.- ----....
@
,-- Fu t, F,.. DVD d e llv"y by m -.lll

.... ....,. .... _ .._,-my ... _""--_._ ...

""".-_

-""-'-"
,...",

....'0lI0

' IM)

._

•

,-

••

TRIAL

IIMIo

••

","

-"

,

--

_......-..- ..,,.,..,

'1 1 III

._
....-_--_._..........
... _
.."'-,... ..... - .
.........
_....._---"'
... _. _._ ... -_
-"'=- _ . ..Free d ellvery

,.....oout
In

_~

: :.-.."'=-....

....

~--,-_

,----_._--...
---

_.

--""'='-

-"",-

--,

~.

..... --...

'H __
,.. " '.'___ "''''''

\.!.I -_.-

__
__
_
. g_._ . _"'- ---_-__-_- -_ _
_
__
-

'_1",.nl 1_.... ' .....
_--,~."

_~

~~~_.~-._~

- .... ....." .. l!iJ
a Cl - ..,.

.--~-.-.",~-."

'

_

.....M

.--_----

"'_...

452

7

Formulare

..... _--

JäI

•

-_._-.......--_._--........
e--

va.., __......
........
.._
... ... ....
..-_
..
...
,._
....
........
.... ... ..__.. _----_
. -.- '"
-"-"'--'-'
_........._'-"--'''.........._--_
....- _ _ "' ,.:il-"3
-.-........
..
.............
_.-"'_"_"'-_'
..... .....,.-,,_
_
........--.... __"- --,....-_""-_........... ,-""-_
--.
_.
..... ".........
- ........
-'.

--~--_!:-.

...... Abbildung 7.5'
Ein typisches mehrseitiges Formular
im Web 2.0.

I

Verwandte oder ähnliche Angaben sollten in Gruppen zusammengefasst und einheitlich präsentiert werden. Dies muss nicht
unbedingt über das ffeldset-Element geschehen. So kann eine
dünne horizontale linie die oben und unten platzierten Elemente
voneinander abtrennen und visuell in Gruppen zusammenfassen.

.-. _----...-

==:::::J
--

(1[ 1

_.... --'-""-- _........ .. _----_-00
-----_
. _..
..._-------- _.

.. Abbildung7·5 2

~

---

__ 0

-

In seinem Anmeldeformular
trennt Wlshllstr.com die oben und
unten platzierten Elemente durch
eine auffallende horizontale linie
voneinander. Auch """'itespace
lasS! sich zu diesem Zweck gut
einsetzen .

-

Die Beschriftungen der Eingabefelder sollten entweder links vom
Eingabefeld oder direkt über ihm angezeigt werden. laut der
Studie .Sign-Up Form Design Surveyc1 platzieren etwa 70 Prozent der erfolgreichen Web 2 .O-Projekte (darunter populäre soziale Netzwerke, Video-Sites, Communities und Webdienste) die
Beschriftung links vom zugehörigen Eingabefeld. In solchen Fällen werden Beschriftungen meistens durch Fettschrift oder durch
eine spezielle Farbe hervorgehoben.

---.. Abbildung7.53
Ein einfaches und übersichtliches
Formular auf Hotel-Oxford.ro

2 http://www.Jm.aJl'ingm.J8dllnt.wml2008l07/ 04/wn,·/o,m-dts/gn'pdtttfnJsJgn-vp./ormJl Uuli 2008)

n

Formulare und Usability

I

453

.

==~~~._---_

_..---

--"'-".-r,-----. __

---,...

li ..,. . . . _----,,~,

~-• _ "~~--.=~M
•• •

., ....

•.-_

~

__ _ __

-. - SUtlscnbc to our Things Newsletttr

,_ . . ....,. ........ ""''''....
.-----c
So;IA " " bo'.". "'" "" ...

"""'

..t.. Abbildung 7.56
Ein benuuerfreundliches Suchformular bei kb.medialemple.co m

..... Abb i ldung 7.5!1
Ein D nline-Formular geht in die Breite. Elegant und
stilbew usst: trNacation.com

"-"'-_."-"-="-.....-.-,- ...

..... _ 1 :;.;::".== :::.:.:..

•• - .. - _ _

..t..--"P~

---_ --

._~_,_ r-

~",,_ -

-- -

~~.~.~

--~

r ..

.
..,.. ..,,. .""
. .

-'''--_P.~­

- ..-'_M."_

r- --- -

..t.. Abbi l dung 7.55
Discountbo)C.com: Ein attrak·
tives, einfaches Formular, in
dem lcom effektiv eingesetzt
werden.

..t..Abbildung7· 54
Ein einfaches, elegan tes und freund liches Formular: Swfir.com

•

""."11 g""h

• Abbildung 7. 57
Yahoo.com se tzt i1 seinem Online-Formular einen freundlichen, informellen Ton ein . Beachten Sie : Die erwarteten
Eingaben (Firs t Name, Last Name) werden In Grau dargestellt .
Die Gliederung der Blöcke des Formulars gesc hieht durch eine
Hervorhebung mil violetter Farbe.

.,...---. ...

'''

CONTACT

_

.............. ""'... .. ,'P,."...."..",

So"," w• ••• >Au

..... ~_•••
~,

..... on.

c .. ,.... c_,
" • ...,. .......
"',:...
.............
_..............
........................
'""<".

_ _ _ MM _ _ M _ _

............ 001-" ... _'. _•.

.....b<" .......

. . . . M f tM ' _ M _ _ _ . . . . _ _

11 " l .... . .... . u ...... u. ..... ..... u n ..,n!

..t.. Abbildung 7.59
Auch ein Newsletter- Formular
kann elegant aussehen: Culturedcode.eom

454

7

Formulare

..... Abbildung 7.6 0
Virb.com ermöglicht es seinen
Besuchern , sich direkt beim Ausfüllen des Formulars verschiedene
Kont otypen anz uschauen.

..... Abbild u ng 7.61
Edward Pis tachio (http :/ / o.rang.es/
contacV ) hat sich etwas einfallen
lassen : Um seine E-MaU-Adresse zu
ermitteln, müssen Seitenbesucher
ein Rät sel lösen.

I

Ein Verweis zu einem Anmeldeformular wird in der Regel im
rechten oberen Sei ten bereich platziert. Häufig wird das Design
des Formulars schlichter gest al tet. als dies bei anderen Sei ten
des Projekts der Fall ist. Sch ließli ch darf die Aufmerksamkeit der
Nutzer nicht durch zu viele Navigationsmöglichkeiten zerstreut
werden.

_
... _----_-.
...... . ......__
.......... ...
~-­

-~

.---_-

,

,

,, :=::::.
.. .-

-,---_-...- .
....._._--.

, E

-.---.-

-.- ....----

--

_

_..._. ----._- --

_

.....n. ....'. _

......
...........,
--:::-::::;;"

-

(nIeer 11 neew shlpping

_ _,

<lic~

a-dd",~s ,

Ihe "CoI1boouo' but.....

_ __-- _
.... . ."

8t ••

..,_./~

... .....

.....

a.

~~~~~~~

l'P/ ...... .......
C060,
; ;
_

_

c....nlty'
N ..... .....,

El
8

___

!,hIocI :J\oC..

10"'" _ ,..............'

~ ' '''I

_ ... (.... . ..

............ 'u' ~_... _ .,- ......It CMd '" b,>ooIo

... Abbi ldung 7.62
Im Online- Kaufhaus Amazon
beschr<lnkt sich die CheckoutSeite (Bild unten) nur auf das
Wesentliche - das Online-Formular. Andere Inhalte. wie etwa
auf der Startseite (Bild oben) sind
hier nicht zu sehen.

~

Ho

(11 not. .. 0' .... I""" "" ;, ... _ I . )

.... . "' . ... }7

Demzufolge setzt man auf einfache. übersichtliche und sogar
minimalistische Entwürfe. Diese enthalten häufig rechts vom Formular Hinweise auf VorteiJe sowie die Unverbindlichkeit der Nutzung des Dienstes. Meist sind drei bis fünf erforderliche sowie bis
zu zwei opt ionale Ei ngabefel der vorhanden. Demzufolge entfällt
beim Design von Formularen die Notwendigkeit, erfolderliche
Eingabefelder durch Sternchen zu kennzeichnen. Dies machen in
der Tat nur wenige Websiten.
7-3

Formulare und Usability

I

4 55

Dynamische Elemente wie etwa die Attribu te :hover. : itctive~
und : focus sowie Ajax-basierte Toolt ips werden bei Formularen
nur selten intensiv eingesetzt. Stattdessen setzt man auf stat ische
Hinweise, die entweder unter dem Eingabefeld oder rechts vom
Eingabefeld plat ziert werden.
Abbildung 7.6]

~

.............-... ......

--

Hinweise sind meistens statisch
und werden entw"eder unter dem
Eireabefeld oder rechts davon
platziert .

.-

~

!l ..... _ ... _-. """' ......
Olo ........ '

._,....---_. ~

.__.
.. =:::::-

- ._._-_ ..(I.

_ _ ... _

. ____ _

..

~

. _--~-

.. Abbildung7.64

Tickspot.com nutzt Gelb für
Fehlermeldungen.

o :::-.=..,......... _._
.. Abbildung7.6 s

... und Grun fur Erfolgsmeldungen.

456

I

7 Form ulare

.

_

~

__
.,-"Au ch die Uberprufung der Korrekthei t von eingegebenen Daten
geschieht meistens nach dem klassi schen Muster. Die Technik
Real-Time Validation mit Ajax konnte sich bisher noch nicht
durchset zen. In den meisten Fälle n erscheinen Fehlermeldungen
nach der Übermittlung de r Daten oberhalb des Formulars, wobe i
fehlerhafte Eingaben deutlich markiert werden (meistens in Rot
oder in Gelb) .
Ein Submi t-Button befindet sich meist unter dem Formular
und wi rd entweder links ausgerichtet oder zentral platziert. Bei
mehrseitigen Formularen wird der Next-Button bzw. ContinueButton dagegen rechts ausgerichtet, was auf das konven tionelle
Designschema klass ischer Desktop-Anwendungen zurückzuführen ist.
Schließlich informieren die Sei tenbet re iber ihre Besucher über
den abgeschlossenen Anmeldevorgang gerne mit einer auffallenden Erfolgsme ldung. Dabei werden neue Nutzer direkt zur
Nutwng des Diemtes mot iviert un d animiert . Etwa durch Verweise zum Erstellen eines eigenen Profils oder durch Hinweise
auf Möglichkeiten , den Diemt auszuprobieren.
en.

I

.

......

" ""","'..-- .........
0 "_ ........ ..... __
" .. ,. _ . ~ .... _d

"........,...... _."'..._ .., .. "'" ,."''''''If ,d<

.-......

January

.._'I' ........ . _

•

I

..

•

1975

-w._ .... __

~ _

""

Co"Ii .... t:-J I

T.,..., ".., C~
on

1I1~

.. Abbildung 7.66
Nlng.com Informiert seine Nutzer
ober fehlerhafte Eingaben mit hilfe
einer Fehlermeldung und mit
einer deutlichen Hervorhebung
der bema.ngelten EIngabefelder.

11.'11'"

.. lIr ''P''"'g .~,

"'" ............ T.r ... J ......... . nd ",.. ,. ~""y

Pf obl('m~ ~'(I nj ng

up7

Um ein benutzerfreundliches Online·Formular zu realisieren,
überlegen Sie sich nicht nur, welche Informationen Sie von den
Nutzern benö tigen, sondern auch, welche Navigationsmoglich·
keiten und Funktionalitäten die Besucher Ihrer Seite brauchen .
In der Praxis zeigt sich, dass etwa ein auffallender Verweis zum
Anmeldeformular auf der Seite des Registrierungformulars f ür
viele Nutzer hilfreich ist. Außerdem: Da viele Nutzer sich mit
CAPTCHAs nur ungerne beschäftigen, verzichten viele Designer
inzwischen ganz darauf.

",",._M··

_ _ I<»"

_.

... Abbil dung 7.67
In einem Anmeldeformular darf
ein Verweis auf die Wiederherstellung des Passwortes nich t fehlen . DIes gilt auch tUr den Verweis
zu einem Registrierungsformular
(Goplan.info).

._.

"'' -- pon

Formulare und Usability

I

457

Ein interessanter Ansatz, der insbesondere bei Poltfoljos zu finden
ist, ist die Einbindung eines Sliders in Webformulare (vgl. Abbildungen 7.70 und 7.71). Damit können potenzielle Kunden Ihr
Budget festlegen oder eine Zeitspanne für das Projekt angeben.
Abbildung 7.68 ~
Ein Anmeldeformular mit einem
sichtbaren Verweis zum Registrierungsformular: Tastebook.com

__. _-__--..._-_- .--_
-----_
__.-_._--._--.......... ........

Joln.

Sign In.

-. ...

c_

.. __

.- -

-

--II1II

"'...

- _. -

- _..
_.

_~

...

•
__ •
o

r_ •

.,.-""'
. ... ...
... -,_ ........
~

-

_~_

.. Abbildung7.69
Auf (oolspollers.ecm ist die
• Sign Up.. -SchaItAäcne nur dann
aktiViert, wenn alle Felder richtig
eingegeben wurden .

........ ........

--

."Ii "IM

Jcin COdspOUtrt ..

....-.

.........-.

•
•
•

.._
...-:. . ...........
_..._-

-_.

Interessant ist auch die Tendenz, anstelle eines Passwortes die
E-M ail -Adresse durch eine zweite Einga be bestätigen zu lassen .
Obwohl Passwörter mit St ernchen maskiert sind, scheint die korrekte Eingabe der E-Mail wichtiger zu sein - schl ießlich kann man
ein Passwort immer via E-Mail anfordern.

....

"

.., .

~
tlv: ~

i_ ~

•
""" -

~

•

...... .......
.~ Rofö·
- _....... - __.....-_.- -_..-...-_
--i
....

----

•

.

.. Abbildung 7.70
Ein SUder im Einsatz in einem Sucnform ular: Rofo.com

.. Abbildung7.7'
Eine Design-Agentur setzt einen
Slider ein, um Kunden das Budget
festlegen zu lassen (Sidebarcreative.com).

458

I

7 Formulare

Au ßerdem scheint es, dass in letzter Zeit die Reihenfolge der Eingabefelder variiert wird. Während in Kommentarformularen ein
mehrzelliges Texteingabefeld (textarea) häufig als erstes Feld
angezeigt wid, sind bei Eingabeformularen die Felder zum Benutzernamen und zum Passwort häufig zuerst zu sehen.

Eln(! Vielzahl kreativer Ansätze
zum Design von Online·Formularen finden Sie in dem Artikel
_Web Form Design : Modern Solutions and Cr(!ative Ideas. (http://
www.smlfShlngmagazJne.coml
ZOO8lO4117Iweb.jorm.deJign.

modern-salut/ons-and· aea liveIdeas.l, Linkcode 264) .

.. Abbildung 7.72
Qwertcity.com mit einem bunten,
auffallend(!n Kontaktformular, das
mehrzellige EIngabefelder In den
vordergrund stellt

J '!!!'J.~_...._.

-

] '!"":-~._- ...

_
_.

s.Di • • _

.

... Abbildun g 7.7]
X-Grafik .sk mit (!in(!m Formular aus der SIOJakei und
(!In(!r slovakischen Bridmarke.

--_._.

•

....

... Abbildung ].74
Ch emlsl ryrecruitmen t .com/e ont ac t
.. Abbild ung 7-75
Created201.eom bietet eine andere
Perspektwe auf das Online-Formular.

Dies hat einen einfachen Grund. Bei Kommentarformularen wollen die Nutzer eine Idee oder eine Meinung sofort zum Ausdruck
bringen und überspringen deshalb häufig andere Felder, die etwa
den Namen, die E-Mail-Adresse oder die URL erfragen. Die Platzierung des textarea-Elements im oberen Bereich des Formulars
ist demnach durchaus sinnvoll und ist für viele Besucher zudem
prakt ischer.
].3

Formulare und Usability

I

459

I

In Anmeldeformu laren ist die Situation anders. Die schwierigste
Aufgabe beim Design eines Online-Form ulars besteht darin, die
Aufmerksamkeit des Nut zers auf seine Eingaben zu konzentrieren.

--

--._---

Klassische Eingabefelder, die etwa nach einem Vornamen, nach
dem Geburtsdatum und Ähnlichem fragen, werden grundsätzlich
schneller ausgefüllt als Felder zur Eingabe des Benutzernamens.
Dies liegt unter anderem daran, dass ein Benutzername eventuell

u ' _ _ .. _ _ _ _ _ w

-

AAbbildung7.76
Grooveshark.com platziert die
sdwierigsten Felder (Username,
Password und Confi rm Password)

zuerst .

schon vergeben ist, oder die Angabe des Benutzers ungültige Zeichen enthält. Hier wird sich der Benutzer etwas einfallen lassen
müssen. Deshalb versuchen Designer, Besuchern die schwierigsten
Felder zuerst anzubiet en. Ist diese Hürde überwunden, so wird ein
Besucher in der Regel auch die übrigen Felder ausfüllen.

,.Bio""",,

....... 'l'

,-

.,

~

~

Jum• ."

~

v..'u."" ... _

,.........

,...""'*'_ ..

.. ",

,~~

. ,I

c""' .... !'.nooI

~

..... _ d

29%

41%

-

.,

~J ...... ",
~

Abbildung 7.77 ..
Die allermeisten populären
Web 2.0 ~ Projekte platzieren die
Beschriftung links vom zugehörigen EIngabefeld.

,,,, .

.
"
,
.
__
·_.
....... .

_I_~~_

<0

,

I

30%

... ~~~~==~~

"_ _ I'-' _
~"""""'-I

...... oooee Iobel • _

:3

,

I
,-'-_"~,
..

~~~~====~:3

,_........ 1....... -...
~

0_'

(

.......,..-]

__
3
~ IWOCi
~~~~==~;

L.oooo< ' -

.".. _ ' - I
Abbildung 7.78 ..
Werden Beschriftungen VOfl

Eilllabefeidern links platZiert. so
sind sie meistens durch Fettschrift
oder d urch eine Farbe ausgezelch~
net.
460

7 Form ulare

0.. ............. . _ ,

0_'
1_,.._ 1

_=

~",,-- r,~.~_~_~====::""~.

7.3.1

I

Bes chriftungen \/on Eingabefeldern

Die Länge der Eingabefelder so ll te nicht zu groß gewäh lt werden,
aber auch nicht zu klein, dami t ein Großteil der Eingaben sichtbar bleibt. Falls das Layout es zulässt, kann das Vergrößern der
Schrift8röße durch eine zusätzliche Schaltfläche, ein leon oder

einen link angeboten werden.

Vorteil:
- schnelle 8etJr~ilUns
des Formulors
. Beschrlfluf'lStn (la~/s)
sind dirtNI berlachban

EII'OI~ d 2:

zu Ei"8abeltldem Konll'OllkJotleh n:

Nachteil:

0 1'

o nein

• E,hOhler vert.ikaler Raum

.. Abbildung 7.79
Benutzerfreundlichkeit du rch
vert ikale Anordnung de r Beschrif-

1

tungen vor den Eingabefeldern

Es ist hilfreich, Beschriftungen direkt uber den Feldern anzubrin-

gen. Allerdings braucht dam it das Form ular meh r Raum in der
vertikalen Ausrichtung, was dazu führen kann, dass der Benutzer
scrollen muss. Beschriftu ngen sollten fü r eine bessere Lesbarkeit
fett hervorgehoben werden.
Werden die Beschriftungen dagegen separat in einer besonderen Gruppe zusammengefasst, so wi rd der benöt igt e vertikale
Ra um reduziert. Auch kann der Anwender zwischen den Beschriftungen besser navigieren und Label s leichter abl esen, da er beim
Scanvorgang nicht durch Eingabefelder unterbrochen wird. Außerdem kan n der Anwender seine Eingaben direkt sehen.

.,. Abbildung 7. 80
Benutzerfreu ndlichkeit bei
lInksbündiger Ausrich tung der
Beschriftungen

Elngabalald 1.

Vorteil:

~~~~~ 2" ______, -. - - - - - - - - - - - - - -

Btschriftungen silld
tTnfacher zu scannen

1

Rnluzitner 'lJltrtlka'~ Raum
AuswlI himenQ:

M.tnre Kon tlOlikillChoIn.

Olt
~"

Nachteil:
- Horizonraler Abstand zwischen
BtschriftuflSM und Elnsabeftldtrn
erschwert den Scanvorsans

7.3

Formulare und Usabilit y

I

461

In der west lichen Welt möchten die Nutzer einen deutli chen
Rand zur linken Sei te hin haben, da gewöhnlich von li nks nach
rechts gelesen wird. Bei einer linksbündigen Ausrichtung von
Texten kann jedoch ein leerer Raum zwischen dem label und
dem Eingabefeld entstehen.

Eing.t>efeld

.1-------

Eingabefold 2:

VOrteil:
Vtrtikaler Raum wird llerki1rzr

- BeschnJlllnsen und Einsabefeider
sind benachbart •

Nachteil:
- 8eSChrilllJnsen sind schwerer
zu scannen, schlechrere Lesbarkeit

Ab bildung 7.81 ...

Benutzerfreundlichkeit bei
rechtsbündiger Ausrichtung der
Beschriftungen

Eine rechtsbündige Einrückung kann deshalb unter Umständen
deutlich bessere Ergebnisse liefern. In vielen Fällen kann sie
jedoch schwerer zu lesen sein und den Scanvorgang beim Benutzer verlangsamen. In der Praxis ist es besser, die Labels nur dann
Ober den Eingabefeldern zu platzieren, wenn eine schnelle Eingabe möglich sein soll und die erforderlichen Daten (Benutzername, Passwort, E-Mail-Adresse) dem Anwender bekannt sind.
Sind die einzugebenden Daten dagegen eher selten verwendete
Angaben, sehr spezifisch oder lassen sich nicht schnell nachein ander eingeben (Zahlungsinformati onen, Anschrift), so ist es besser, dem Nutzer eine bessere Übersicht durch eine besondere
Platzierung der Labels zu ermöglichen. Außerdem ist es wichtig,
dass die geWählte horizon tale Position - sei es ein Eingabefeld
oder ein Label - konsistent fOr das ganze Formular beibehalten
wird. Dann kann sich der Anwender nämlich in eine Richtung
(von oben unten) vorarbeiten und die Daten direkt eintippen .

7.3.2

Verwende nvi sueller Eleme nt e

Ei ner der häufigsten Fehler in der Gestaltung von Seitenelementen
besteht darin, al le Bestandteile der Se ite visuell hervorzuheben.
Wie Edward Tufte bemerkte, »besteh t die Information aus Unterschieden, die einen Unterschied ausmachen«. Übertragen auf
die Gestaltung von Formularen heißt dies, dass visuelle Markierungen, die der Usability nicht helfen, ihr vielmehr schaden und
deshalb vermieden werden sollten.
Je weniger Bl öcke das Auge des Benutzers erkennen muss,
desto weniger Zeit wird fOr den Sca nvorgang gebraucht. Dies
462

I

7 Formulare

I

betri fft zum Beispiel Formulare, die mit mehreren Hintergrundfarben (ur die Steuerelemente arbeit en und diese durch einen
Rand voneinander unterscheiden. In der nachfolgenden Abbildung erzeugt eine Überkreuzung der vertikalen und horizontalen Randlinien visuell sechs unterschiedliche Blöcke, welche die

Komplexität des Formulars deutlich erhöhen.
,WhIl;/1 p m.,. ... ' ...... yuu Irol "'""I .... In
......... 9 m... aa.r,,,n

<>,
ttote

'"

Visuelle Markierungen sind somit nur dann hilfreich, wenn durch

.. Abbildung 7. 8l
Einz~l n4!

sie ein en t sprechender Effekt erzeugt werden kann.

_.-----,,--_.

lee." ..~ -

Felder sind schwer zu

scannen und zu lesen.

·

-- -------""-

-

_
...._
-•

....

_ _---,_.
-. .....
-,,....,,-.

---

... Abbildu ng 7.83
Oie Eingabefelder sind gut lesbar
und klar strukturiert.

7.J

Fonn ulare und Usabili t y

I

463

7.3.3
Primäre und sekundäre Aktionen
Wird ein Formular ausgefüllt und werden sämtliche Angaben
bestätigt, so werden die Daten über das input-Steuerelement
an den Server übennittelt und anschließend an den Seitenbetreiber verschickt . Letzteres kann jedoch durch eine ungünstige
Positionierung der Schaltflächen erschwert oder sogar verhindert
werden. wenn beispielsweise die Reihenfolge der Schaltflächen
verwechselt und statt auf SAVE auf RETURN geklickt wurde.

( ....... . -) ( w.... )

Ab bildung 7.84 •
POSitionierung von Schaltflächen

In diesem Zusammenhang unterscheidet man zwischen primären
Aktionen. die in der Regel dem Ausfüllen eines Formulars direkt
folgen (das Absenden des Formulars). und sekundären Aktionen,
die erst in den nächsten Schritten durchgeführt werden. Elemente für primäre Akt ionen sollten in der Regel im Vergleich zu
den übrigen Elementen ein stärkeres visuelles Gewicht besitzen
(Hervorhebung durch eine Hintergrundfarbe, größere Schrift. eine
besondere Schriftfarbe usw.). Ihre vertikale Ausrichtung sollte mit
der der Eingabefelder übereinstimmen.
Verfügt ein Formular neben primären Aktionen auch über
eine oder mehrere sekundäre Aktionen. so müssen diese visuell
deutlich voneinander getrennt sein: durch die Farbe der Steuerelemente oder durch ihre Position auf der Seite. Sinnvoll ist es,
sekundäre Aktionen in passiven Farbtönen zu gestalten und somit
in den Hintergrund stellen, um das Fehlerrisiko zu verringern .
In vielen Fällen beschränken sich die Webseitenbetreiber bei
der Gestaltung von Formularen auf die wesentlichen Angaben.
wie etwa den Benutzernamen und ein Kennwort. Oft wird noch
eine gültige E-Mail-Adresse gefordert, mit deren Hilfe der Ben utzer sich zusätzlich identifizieren soll. Bei großen Projekten werden
dagegen fleißig Info rmationen abgefragt. insbesondere um jedem
einzelnen Kunden einen auf seine Vorlieben abgestimmten Service anbieten zu können. Ein optimales Online-Formular kombi-

464

I

7

Formulare

I

niert hinreichend viele Angaben des Benutzers mit Sch lichtheit
und Übersichtlichkeit.
Für weitere Einblicke in das Design benutzerfreundlicher
Online-Formulare empfiehlt sich das Buch . Web Form Design.
Filling in the Blanks_ (Verlag Rosenfeld, 2008) von Luke Wroblewskl, in dem unter anderem zahlreiche Richtlinien, Beispiele
und Fallstudien detailliert beleuchtet werden.

7.4

Ressourcen

Bei Formularen haben Webentwickler viel Freiheit, was die
Gestaltung der einzelnen Elemente angeht. W ichtig ist dabei,
vernünftige Regeln des Interaktionsdesigns zu beachten und
umzusetzen. Folgende Ressourcen können dabei hilfreich sein:
.. • The Form Assembly_ ist eine wachsende Sammlung von

•

über 200 ess- und XHTML-basierten Forrnular-Templates
mit frei verfügbaren eS5- und XHTML-Quelltexten. Die

.-

=---

Sammlung enthält unter anderem auch deutschsprachige
Templates zu verschiedenen Zwecken und Themen.

- .-

http://www.formassemblycom/jorm-garden.php
(Linkeode 265)
... . Dr. Web Kontaktformular Bausatz_ stellt eine Methode vor,
mit der sich ein sicheres Online-Formular erstellen lässt, das
gleichzeitig technische, optische und inhaltliche Flexibilität
ermöglicht.

http://www.drweb.de/ webmast er/ kon takt-jormular -bausatz.
shtml (Linkcode 266)
..

Abbildung 7. 85
The Form Assembly (httpJ/www.
fonn assem bly.com/fonn -garden.
php) : Eine wachsende Sammlung von (55-Stilen für OnllneFormulare

.t..

Formulare - Einführung in XHTML, ess und Webdesign

http://jendryschik.de/wsdev/einjuehrunglxhtml/jormulare
(Linke ode 267)
.. Web Usability - Accessible Forms beschreibt Techniken zur
Entwicklung ansprechender Formulare.

http://www.usabilitycom.au/ resourceS/jorms.cjm
(Unkeode 268)
..

Die Artikel . Web Form Design Patterns_ und . Web Form
Design Patterns : Sign-Up Forms, Part 2_ liefern eine ausfUhrliehe Übersicht zu modernen Praktiken der Gestaltung von
Online-Formularen.
http://www.smashingm<18azlne.coml2008/01/ 04/ web-j ()(m-

des ign-patterns-Sign-up-jorms/ (Linkeode 269)
http://www.smashingm<18azine.coml2008/01/ OB/ web-jormdesign-patterns -sign-up-jorms-part-2/ (Unkcode 270)

7-4

Ressourcen

I

4 65

..

Eine Vielzahl kreativer An sätze zum Design von Online - For~
mularen find en Sie im Beitrag .. Web Form Design: Modern
So lutions and Creative Ideas«
http://www. sm as hingmagazine. conV200B/04/1 7/ web-form·
design- modern· solutions-and-creative-ideaY (Li nkcode 271)

..

_CSS-Based Forms : Modern Sol utions« stell t über 20 ein~
schlägige Methoden zur Gesta ltung von Formularen vor.
http://www.smashingmagazine.com/2006/11/11/css-basedforms -modem-solutions (linkeod e 272)

Oie Liste wird perm anent erweite rt , Besch rieben werden
auch JavaScripts, mit denen sich stat ische Eingabefelder mit
zusätzlichen Fun kti onen (etwa Tooltips) erweitern lassen .
.. Eine wachsende Galerie verschiedener Formulare finden Sie

Abbildung7. 86
.Web Form Design: Filling In
The Blanks .... ein Buch von luke
Wroblewski .
6

466

I

7 Formulare

auße rdem in der Sammlung von Christi an Watson auf der
Sei te :
http://www.smileycat.comldesign_elementsl (Linkcode 273)
.. . Web Form Design: Filling In The Blanks« - das Sta nd ard~
werk zum Thema _Web Form Design« von Luke Wroblewski
http://wwwJukew.com/ff/ent ry.asp?6BO (Linkeode 274)

8

Barrierefreiheit und Usability

Um allen Besuchern ein intuitives Seitenbild anbieten zu können, müssen Webentwickler ihre Designs mit den Ri chtlinien der

zugänglichen und benutzerfreundli chen Seitengestaltung vereinbaren. Im Endeffekt gewinnen dadurch alle : Seitenbetreiber,
die eine flexible und vielfältige Seitendarstellung anbieten, sowie
Nutzer, denen eine gute Orientierungshilfe mit bequemen Navigations- und Anzeigeoptionen bereitgestellt wird .
Stellen Sie sich vor : Sie befinden si ch in einem abgeschlossenen dunklen Raum mit Dutzenden unbekannten Gegenstän-

TIPP
Zugänglichkeit liefert Vorteile
fOr alle : FOr Seit enbetreiber, die
flexiblerwerden , und für Seiten besucher, die Inhalte unabhängig
von ihrer Systemkonfiguration
lesen und wahrnehmen können.

den. Wo auch immer Sie hinblicken, treffen Sie einen schwarzen

Punkt, der entweder zu einem der Gegenstände gehört oder ein
Teil von Ni chts ist. Wie gehen Sie nun vor, um zu einem vorgegebenen Ort dieses Raumes möglichst schnell zu gelangen? Ein paar
grundlegende Orientierungshilfen wären hilfreich, damit Sie sich
schneller und besser zurechtfinden können.
Was hat das mit Webdesign zu tun? Beim Besuch einer unbekannten Seite steht jeder Anwender vor der gleichen Aufgabe :
Auf der Suche nach Informationen muss das Seiten layout genau
unter die lupe genommen und in Einzelteile zerlegt werden; die
Seitennavigation ist dabei an den vorliegenden Orientierungshinweisen und der Se itenstruktu rauszurichten. Ve rschiedene Nutzer
haben verschiedene Bedürfnisse und stellen somit unterschiedliche Ansprüche an die Seite. Was von einem Nutzer als ein glänzender Webauftritt empfunden wird, kann von einem zweiten
als ein eintöniges Mischmasch und von einem dritten eventuell
überhaupt nicht wahrgenommen werden .
Wer unter einer Sehschwäche leidet, möchte etwa die Schriftgröße der Texte vergrößern können. Wer ein Farbschema für
unübersichtlich hält, möchte zur besseren lesbarkeit zu einem
alternativen layout we chseln können . Wer nicht sehen kann,
möchte Seiteninhalte über BraiUezeichen, einen Screenreader
oder ein anderes Ausgabegerät wahrnehmen und über die Tastatur navigieren können. Und wer einen Dienst immer wieder
benutzt, möchte damit effizient arbeiten .
8

HINWEIS
Bevor Anwender sich mit den
Seiteninhalten auseinandersetzen können, müssen sie die Seitenstrul<tur analysieren und die
Seite in Komponenten zerlegen .

Barrierefreiheit und Usability

I

4 67

HINWEIS

Um ein breites Interesse der
Offentlichkeitzu erzielen, müssen Seitenbetreiber sowohl die
Bedürfnisse der bevorzugten
Zielgruppen als auch die von NIsche~ruppen berücksichtigen.
Dies lässt sich leichter realisieren, als Sie vielleicht vermuten.

Usa bility vo r Darstellung
Die einschlägigen Untersuchungen im Bereich der Benutzerfreundlichkeit haben gezeigt, dass
Seiten, die grundlegerde Regeln
des »gu ten. Designs umsetzen,
beim potenziellen Kurden besser
ankommen als glänzende visuelle
Designs ohne entsprechende
Funktionalität.

Wollen Sie also mit Ihrer Internetpräsenz ein möglichst breites
Publikum erreichen, so müssen Sie auch ein breites Spektrum an
verfügbaren Opti onen anbieten. Hinzu kommen auffallende und
hinreichend informative Orientierungshinweise für verschiedene
Nutzer. Über deren Platzierung und visuelle Gestaltung sollten
Sie in Ihrem Designentwurf sorgfältig nachdenken.
Im Web 2.0 wird genau dies häufig vernachlässigt: Durch die
neue Dynamik des Mitmach-Webs werden die Grundregeln des
guten Designs, auch im Hinblick auf Usability und Accessibility,
schlicht und ergreifend verdrängt. Viele Auftritte sehen zwar
schick aus, können ihr Potenzial aber nicht aussch öpfen. Was
könnte der Grund hierfür sein? Antwort: Die Nutzer verstehen
oftmals nicht, wie sie die Seite benutzen sollen, um zu ihrem Ziel
zu gelangen.
Ein funktionierendes Design basiert nich t auf sc hicken visuellen Konzepten, sondern vielmehr auf der simplen Tatsache, dass
Seitenbesucher die Seitenstruktu r schnell erkennen und gesuchte
Inhalte schnell finden können. Dies gilt insbesondere auch für
Web 2 .O-Anwendungen.

8.1

Prinzipien der Barrierefreiheit

Generell beschreibt der Begriff Barrierefreiheit (Accessibility) die
Eigenschaft von Gegenständen und Einrichtungen, einen Dienst
tur alle Menschen uneingeschränkt nutzbar zu machen. Wird dies
gewährlei stet, so spricht man auch von der Zugänglichkeit der
(Buri eref re i hei tJ

Barrierefreiheit bedeutet, dass alle
Nutzer einen einfachen Zugang zu
den Seiteninhalten haben. Unabhängig davon, um wen es sich dabei handelt, und mit welchen
Mitteln die Seite besucht wird .

HINWEIS

Laut Unteßuchungen vel'Nenden BO Prozent der Behinderten
weltweit das Internet. Inhalte
können dabei über Vorlese-Software vorgelesen oder mittels einer speZiellen Software auf einer
Braillezeile ausgegeben werden.

468

I

Objekte bzw. Einrichtungen.
Die Aufgabe des barrierefreien Webdesigns besteht dabei
darin, die Seiteninhalte den Nutzern in einer Form anzubieten,
dass diese für jeden, unabhängig von Behinderungen jedweder
Art (etwa Körperbehinderungen, aber auch technische Einschränkungen), verfügbar sind.
Besonderer Beachtung bedürfen in diesem Zusammenhang
Funkti onen, welche- die Erfassung von Inhalten für Seh-, Hörund Sprachbehinderte sowie Anwender mit anderen körperlichen Einschränkungen erleichtern. Diese Anwender können
die Sei teninhalte nämlich nur mithilfe spezieller Geräte und Software, die unter dem Begriff assistive (unterstützende) Technologie
zusammengefasst werden, wahrnehmen.
Aber auch Anwender mit techn ischen Einschränkungen
profitieren enorm vom barrierefreien Designansat z. Zu dieser
Gruppe gehören etwa Nutzer, die mit einem Webbrowser ohne
JavaScript-Unterstützung surfen.

8 Barrierefreiheit und Usability

8.1.1

I

Vorteile der barrierefreien und standardkonformen
Seitengestaltung

Zugänglichkeit ist gü nstig I Bei der Diskussion über die Stich·
wörter _Barrierefreihei t_, _Zuganglichkeit« und _ergonomi sche
Seitenentwicklung« taucht schnell die Kostenfrage auf. Denn ein
barrierefreier webauftritt ist stets mit einem zusatzlichen Zeit·
aufwand verbunden, der sich wiederum in Kosten auf Seiten der
Entwickl ung niederschlägt.
letztendlich ist jedoch das Gegenteil der Fall : Barrierefreie Sei·
tengestaltung ist günstig. Laut Experten erhöht ein zugängliches
Design das Gesamtbudget im Schn it t um höchstens zwei Prozen t
(J oeClark, _SuildungAccessi ble Websites«). Werden die _zugäng·
lichen_ Aspekte bereits in der ersten Phase des DesignentwlJrfs

... Abbildung 8 .1
Barrierefreiheit gewährleistet den
ZlfIang zu Selteninhalten fur alle,
auch für Behinderte.

berücksichtigt, können die Kosten für spätere Änderungen (etwa
zukünftige Aktualisierung) reduziert werden.
Barrierefreiheit ist keine Eigenschaft, die nachträglich, nach·
dem die Seite realisiert worden ist , noch hinzugefügt wird. Sie ist
vielmehr ein wichtiger Teil des Gesamtkonzepts, der schon auf
der Ebene des Entwurfs angesiedelt sein muss. Ein durchdachtes
Konzept setzt also die Ebene der Zugänglichkeit (Accessibility
Layer) auf die gleiche Stufe wie die visuelle Ebene (Layout Layer)
und baut konsequent auf ihr auf.
Dabei spielt die Redundanz, die In der Öffentlichkeit häufig mit
_Oberflüsslgkeih gleichgesetzt wird, eine wichtige Rolle. In der
Praxis ist ein vernünftiges Maß an Redundanz so gut wie unver·
meidlich . Mithilfe von Alternativen und zusätzlichen Opti onen

HINWEIS
Der Begriff der Zug;1ngllchkeit
wirkt auf Kunden oftmals ab·
schreckend und verw Irrend. Eine
Seltengestaltung fOr alle wird
Mutig als ein unnOtlger und
zus3tzllcher Kostenfaktor ange·
sehen .

kann der Nutzer nämlich einen für ihn passenden Weg zu den
gesuchten Informationen wählen.
Bei Seiten, die ihren Nutzern mehrere Optionen anbieten,
sprechen Fachleute auch von der Richness (Rei chhaltigkeit) eines
Webauftritt s.
Zugänglichkeit liefert Flexibilität 1 We r meint, mit einem visuell
ansprechenden Design und einer mehr oder weniger sinnvollen
HTMl·Umsetzung ein genügend großes Publikum erreichen zu
können, begrenzt die Reichweite seines Webauftritts noch vor
dessen Entstehung. Der Aufwand für die Entwicklung einer Web·

TIPP
Barrierefreiheit Ist keine zusil.tz·
liche Eigenschaft. sondern die
Grundlage fUr ein zukunftsorientiertes Konzept eines Webauf·
tritts.

seite ist in der Anfangsphase nur schwer einzuschätzen. Und oft
weiß der Seitenbetreiber nicht einmal, ob sich seine Investition in
eine Internetpräsenz Oberhaupt rentieren wird.
Die Kosten und den Zeitaufwand für eine zugängli che Seite zu
minimieren , bedeutet an dieser St elle, die Zukunftssicherheit der
Präsenz In Frage zu stellen. Der Umstieg auf neue Technologien
wird durch diese Entscheidung in Zukunft schwieriger und zeit·
8.1

Redundanz, also mehrfache
Kennzeichnung derselben In·
formation, hat - wenn sie nicht
auf die Spitze getrieben wirdVorteile.

Prinzipien der Barrierefreiheit

I 469

Kompilt.b.hht &Is oberstes
Prinzip

Die Einstellung . Hauptsache es
läuft fast überall. . ist bis heute
das Maß aller Dinge. wenn es
um die Seitengestahung eines
Webauftritts geht. Dies führt zu
graVierenden Problemen - für
Sie und für Ihre Kunden .

aufwendige r. Eigentli ch gewinnen durch Zugänglichkeit vor allem
die Seiten betrei ber.
In diesem Sinne ist auch die Barrierefreiheit zu verstehen. Indem
Sie Barrieren für andere Nutzer ve rmeiden, vermeiden Sie auch
die Festlegung auf einen Zeitraum, in dem Ihre Seiten überhaupt
noch nutzbar sind. Insbesondere im Hinblick auf das fortschreitende Mobile Web (Nutzung des Internets durch mobile Nutzer)
wird eine klare Trennung zwischen Form und Präsentation - wie
sie durch CSS und Webstandards gegeben wird - immer wichtiger. Liegt diese Trennung bei Ihrer Sei te nicht vor, so werden Sie
den Auftritt mühselig für eine Darstellung auf mobilen Geräten
vorberei ten müssen . Andernfalls wird die Seite weder verständli ch noch lesbar erscheinen - ein Marktanteil ginge dadurch fast
automati sch verloren.

Kosten bei der Barrierefreiheit
zu sparen, bedeutet die Kosten
für die zukünftige Aktualisierung
aufzustocken.

Abbildung 8 .2

~

Auf einem Handy ist der .Spiegel«
(h ttp J/spiegel.de) in der üblichen
Seite nda~tellung nur schlecht
lesbar.

Abbildung 8 .]

....

.'-

;J

' : •••
,. 5",

~~

Die mobile Ve~ion packt semantisch ausgezeichnete Inhalte von
Spiegel.de kompakt auf eine
Miniseite.

• ••

,~

0

~,

_ G
- ,., ~

••

.,
c

Bereits in der nahen Zukunft werden WebTV, PDAs, Handys
sowie Browser in Navigationssystemen (etwa in Autos) alltägli ch
zum Navigieren im NetzvelWendet. Und so werden zum Beispiel
bei vielen Nutzern, die über PDA- oder Handy-8rowser im Netz
unterwegs sind, Bilder ausgeblendet, Seiten layouts nicht skaliert
und die JavaScript-Funktionalität sicherheitshalber abgeschaltet.
Bei über 58 Millionen Nutzern weltweit, die allein im Jahr 2008

470

8 Barrierefreiheit und Usability

I

über einen neuen PDA verfügen sollen!, macht dies schon einen
beachtlichen Unterschied aus.
Mit einer standardkonformen und zugänglichen Seitengestaltung verfügen Sie über ein flexibles Werkzeug, mit dem Sie beliebige Inhalte auf Ihrer Seite semantisch korrekt darstellen und
auch auf zukünftigen Geräten verwenden können.

Mobilr Endgrritr
Eine korrekte Seitenansicht auf
mobilen Geräten und Multimedia-Geräten der nächsten
Generation setzt ein standardkonformes und barrierefreies
Webdesign voraus .

... Abbi ldung 8. 4
Mit VOflesesoftware, Braille-Ausgabe und speZiellen Geräten können auch Behinderte im In ternet
surfen (Quelle: hnpJtvVikipedia.
de) .

Barrierefreiheit nützt Minderheiten I Das Pu blikum, das durch
barrierefreie Ansätze besser angesprochen bzw. Oberhaupt
erreicht wird, ist weit größer, als dies häufig angenommen wird:
.. In der Europäischen Union gibt es 38 Millionen Menschen
mit unterschiedlichsten körperlichen Handicaps, angefangen
bei Sehschwächen bis hin zu Blindheit oder schweren Mehrfachbehi nderungen .
.. In den USA liegt der Anteil der mit einer Behinderung lebenden Bevölkerung bei 15 Prozent. 3,5 Prozent der amerikanischen Webnutzer haben eine schwere Sehbehinderung.
15 bis 25 Prozen t der amerikanischen Nutzer sind kurzsichtig.
.. Unter Farbfehlsichtigkeit leiden 4 bis 5 Prozent der weltweit en Bevölkerung .
.. Ab 40 Jahren ist der überwiegende Teil der Nutzer altersweitsichtig. Siehe dazu au ch den Beitrag von Jens Meiert, »Augenerkrankungen und barrierefreies Webdesignc.
http://drweb . deiaccessi bitity/ augenerkr anku ngen. shtmf (Li n kcode 280)
Zugänglichkeit unters tützt Benutze rfreundlichkeit I Durch
Zugänglichkeit gewinnen letztendlich aber alle Seitenbesucher.
Je simpler und intuitiver die Orientierungshilfe gestaltet wird und
eTForeca~t~ Pre~~ Relea~e

(hrrp:Jlwww.erforecasts.comipr/ pr0603.Mml

8.1

Prinzipien der Barrierefreiheit

I

471

je mehr praktische Einstellungen einem Besucher geboten werden, desto leicht er fällt es ihm, in ei ner Sei te zu navigiere n und
gesuchte Inhalte zu finden.

TIPP
8enutzerfreundlichkeit und 8arrierefreiheit bedingen einander.
Das Ergebnis ist eine Webseite,
die den Erwartungen aller Nutzer gerecht wird.

Barrierefreiheit dient also nicht nur kleinen Zielgruppen, sondern alten Kunden. Sei tenoptionen, die die Zugängli chkeit fördern, können auch Nutzer verwenden, die sie nicht zwingend
brauchen - etwa um ihre Arbeit mit einem Dienst effizienter und
angenehmer zu erledigen (z. B. fiber Accesskeys).

________________________
•• m
lleutscht'
".r Tl!h'kom

THE2006 ANANCIAl YEAR

,_. ' '_'0" '"
. ' .0'

---,,"". . . .

. .. - - - - -

""

10 _ _ _ •• _

... _

•

LR . ... ......

•

A~~ellkey-Onr vlew.

.,. ..-

r.~

. ,.-_.

'',l''

""'I'U " IiIOI~ lQ<.I' 1<e\toOO<!

roo

-

Q

f

Abbildung 8.5 ...
Accesskeys-Übersicht auf einer
der Seiten von Deutsche Telekom

... ' " _ O " ' - lOlI .

1" -

1 _ ... ~

_

IlIv _ _ .... "

n.e _ o.... u
ReI>O'I 1OOS ' "
...
,... ., ...............
_.'10

.,.

10....... 1"'-

•

,...,. ,,,.. ,,,,., 11

.""-"''''''''''''

c.
~~"
,.
~
,

Q ~ .... ', ...

"' ...
... . .

.....

'.~ . ,. ---

.....,.. ._-_<---..
_ , .." •• c.<to-

a

"' .... """" 11
_ IF

... ,

q,uaJodSo.,htor_ • .,.

......."' ..... _ .. a

Zugä ng li chk eit ve rb essert das Ranking in Suchm aschin en I
laut letz ten Studien verwenden über 64 Prozent aller Internetnutzer eine einschlägige Suchmaschine bei ihrer Websuche (http ://
www.ke/seygroup.comlpress/pr040211.htrn, Linkcode 281). Es ist
also nicht verwunderlich, dass Seitenbet reiber die erzielten Posit ionen in Suchergebni ssen als ein Maß für den Erfolg der Internetpräsenz betrachten und ve rsuchen, diese permanent zu optimieren.
Folgen Sie bereits bei der Seitengestal tung den Rich tlinien der
Zugänglichkeit, so wird Web-Crawlern eine detaillierte seman-

Suchmaschin ... nv ... rhalten

Bei der Einschätzung einer Seit e
ziehen Suchmaschinen die Qualltat des Inhalts als Maßstab zu
Rate. Damit sie Seiteninhalte
besser _verstehen. und einstufen können , ist es notwendig,
die Seiten semantisch korrekt zu
gestalten .
472

tische Grundlage zur besseren Einschätzung der Seite bereitgestellt. Mit diesen Daten können Suchmaschinen Inhalte besser
einordnen, ihre Relevanz realita t snäher bewe rten und in Suchergebnissen effizienter pla tzieren.
Zu gäng li chkeit i st geset zlich ve rankert I in den europäi schen
Ländern, den USA, Kanada und A ust ralien gelten unzugängliche
Seiten als gesetzwidrig. Laut geltender Rechtsordnung ist die Diskriminierung oder ungleiche Behandlung aufgrund einer Behinderung - auch im Web - ausdrück lich verboten.

8 Barrierefreiheit und Usability

I

In den USA verordnet der 508. Paragraph des The Disabl/ities Aer
sämtlichen öffentlichen Einrichtungen eindeutig, die Zuganglich-

keit für die Besucher von Webseiten bereitzustellen. Aber nicht
nur Webseiten, sondern alle in den Einrichtur1ßen verwendeten
Informationssysteme müssen den Richtlinien entsprechen. Dabei
wird explizit betont, dass es gesetzwidrig ist, eine nicht barrierefreie Seite überhaupt zu veröffentlichen - und dies unabhängig
davon, ob sich jemand deswegen beschwert. Weitere Informationen hierzu finden Sie auf der Seite http://wllvw.section508.gov.
Die Europäische Union startete 2005 eine landerübergreifende
Initiative, mit derzugänglkhe Webseitengestaltunggefördert und

gefordert werden soll. Sie läuft unter dem Stichwort eAccessibi/ity
und soll von allen Mitgliedstaaten in nationales Recht umgesetzt
werden. Weitere Informationen hierzu finden Sie auf der Seite
http://europa.eu/ scadplus/leg/ de/ lvb/124 2 26h . h tm.
In Deutschland stellt die Barrierefreie Informationstechnik-Ver·
ordnung (BITV 2002) Richtlinien und Anforderungen auf, welche
die Entwickler für zugängliche Webseiten berücksichtigen sollten
bzw. müssen . Die BITV ist die Grund lage der barrierefreien Sei·
tengestaltung In Deutschland und ist als verbindliche Rechtsver-

ordnung zu § 11 des Behindertengleichstellungsgesetzes gesetzlich verankert .
Sämtliche Bedingungen, die der Gesetzgeber an Seitenbetreiber und Seitenentwickler stellt, werden in der Anlage (Teil 1) zu
den §§ 3 und 4 Absatz 1 BllV festgelegt. Die vorgeschriebenen
Richtlinien sind In 14 Anforderungen gegliedert, die jeweils mehrere Bedingungen aufstellen. Jede der Bedingungen wird mit
einer Prioritätsstufe I oder rr versehen; 14 Bedingungen der Stufe
I stellen die wesentlichen Richtlinien dar, die jede zugängliche
Seite erfüllen soll. Weitere Informat ionen zum Thema:
.. Die vollständige BITV auf der Sei te des Bundesjustizministeriums (http://bundesrechtjuris.de/bitv/anlage_8. html,
code 282).
..

Lir, k·

.. BllV für Alle, Reloaded _ - eine Serie mit ausführlichen Bei·
trägen zum Thema, die alle 14 Anforderungen genauer unter
lupe nimmt und mögliche Designansätze zu ihrer Umsetzu ng
beleuc htet. http://www.einfachluer-alle.de/art ik ell bi ty- rel oaded (Linkeode 283)

.. Die Web AccesSib iflty Ini tiative (WAl) beschäftigt sich intensiv
mit der Ausarbeitung weiterer Empfehlungen unter Berücksichtigung von Zugänglichkeitsaspekten. Oiese werden in
der .. Checklist of Checkpoints for Web Content Accessibility
Guidelines 1.0« (http ://www.w3 .orgITR/WAI-WEBCONTENTI

full- checklist.htmf, Unkeode 284) aufgelistet und laufend
aktualisiert. Oa sich die Richtlinien der BITV größtenteils an
8.1

Prinzipien der Barrierefreiheit

I

473

den Anforderungen der WAl orientieren , ist zukünftig eine
Übereinstimmung der bei den Standards zu erwarten.

8.2
Guter Stil

Barrierefreiheit basiert auf
Webstandards, konsistent
durchdachten Designentwürfen
SON ie einer sorgfältigen und
fehlerfreien Umsetzung. in der
Webgemeinde spricht man in
diesem Zusammenhang von
.. Sauberkeit« und .. gutem Stil.
der Seil engesl altung.

Struktur und Geshltung
Webstandards sehen eine strikte
Trennung zwischen der Struktur
und der Gestaltung einer Seite
vor. Die wichtigst en Anderungen
beim Umstieg auf eine standardkonforme Seitengestaltung
lauten : Korrekt gestalten, überholtes vermeiden und FunktionalitHen erweitern .

Barrierefreie Seitengestaltung

Theoretisch gibt es also ausreichend Gründe für eine barrierefreie Webseitengestaltung. Doch was heißt es nun konkret, einen
Webauftritt zugänglich zu gestalten? Und womit ist der Umstieg
auf ein barrierefreies Design für Sie persönl ich verbunden?
In der Praxis erweist sich dieser Schritt häufig als leichter, als
die s die oberen Aussagen zunächst einmal vermu ten lassen. Es
genügt, einem Satz von Richtfinien und Regeln zu folgen und
Seiten elemente im Hinblick auf die Erfahrung und Bedürfnisse
der Nutzer in diesem Sinne zu gestalten.
Konkret bedeutet dies,
.. überholte HTML-Elemen te zu vermeiden,
.. die durch Standards vorgesehenen Elemente mit zusätzlichen
Attributen zu versehen
.. und die Seit en mit neuen Opt ionen und Funktionen zu erweitern.
Die Grundl age dafür bilden die Webstandards und W3C-Richtlinien, die ein benutzerfreundliches und standardkonformes
Design überhaupt erst ermöglichen.

8 .2.1

Grundlege nd e Richtlini en

Laut der letzten R.evision (Version 2.0, Stand: April 2008) der
Web Content Accessibility Guidelines soll jede Internetpräsenz
vier wesentliche Prinzipien berücksichtigen. Diese decken sich
teilweise mit den Richtlinien zur Benutzerfreundlichkeit.

.. Inhalt e müssen wa hrnehmb ar se in.
Sämt liche Inhalte einer Seit e müssen auch in einem TextBrowser wie etwa Lynx zu lesen sein. Zu diesem Zweck ist es
erforderlich, Information und St rukt ur der Seiten voneinander zu trennen. Zur Auszeichnung von Sei tenelementen ist es
notwendig, semantisches Markup zu verwenden. Außerdem
sind für alle Multimedia-Inhalte (grafisch dargestellter Tex t,
st ati sche und animierte Bilder, Image Maps, grafische Navigationssysteme, Schaltftächen) alternative Textbeschreibungen
anzugeben.

..

Benutz erschnittst ellen im Inh alt müssen b edienbar se in .
Die Sei ten navigation muss nicht nur über die Maus, sondern
auch über die Tastatur (via Tabulatortaste) möglich sein. Seitenelemente, welche die Lesbarkeit des Inhalts erschweren,

47 4

I

8

Barrierefreiheit und Usability

müssen übersprungen werden können. Außerdem muss die
Seit e eine hinreichend detaillierte Orientierungshilfe (evtl.
eine Suchoption) vorweisen und Nu tzer über deren Fehler
(etwa Fehler beim Ausfüllen eines Formulars) detailliert informieren .
... Inhalt e und Bedienelement e müsse n ve rst ändlich sein .
... Seiteninh alt e mü sse n gut erkennb ar und verständlich sein .
Die Platzierung muss einheitlich und für den Anwender vorhersehbar sein .
... Inhalt e müssen robust sein.
Inhal te müssen auch für akt uelle und zukünft ige Browser
zugänglich sein (inklusive assistiver Hilfsmittel). Inhalte müssen zudem in einer Form gestaltet werden, welche eine
einwandfreie Funktionalität in aktuellen und zukünftigen
Browsern gewährleistet. Webseiten müssen möglichst plattformübergreifend sein, was vor allem durch den Einsatz von
verfügbaren Standards sichergestellt werden kann.
Einschlägige CSS-Te chniken zur Umsetzung dieser Grundprinzipien liefert das W3C. Sie finden eine Übersicht auf der Seite:
http://www.w3.orgITR/W[AG10-CSS-TE[HS(Linkcode285)
Dabei ist zu beachten, dass Zugänglichkeit nicht automatisch
durch die Bereitstellung der geforderten Optionen mitgeliefert
wird . Barrierefreiheit ist in dem Sinne zu ve rstehen, dass so viele
Anforderungen Ihre r Seitenbesucher wie möglich erfüllt werden
sollen. Eine simple Aneinanderreihung von zugänglichkeitsfördernden Optionen erfüllt diese Aufgabe noch nicht.

I
TIPP
Die aufgeliiteten Richtlinien
betreffen nicht nur zugängliches ,
sendern auch standardkenfermes Webdesign.

HINWEIS
Beim Umstieg auf ein zugängliches Webdesign we rden die
inneren Strukturen der Seiten
verdndert ; das Außere bleibt dabei meistens unberührt .

8.2.2
Zugänglichk eit in der Praxis
Eine sinnvolle Umsetzung der Barrierefreiheit setzt ein semantisch korrektes und logisch aufgebautes Markup voraus. Dieses
ist nach den gängigen Riclltlinien des standardkonformen Webdesigns zu gestal ten.
Dadurch wird die visuelle Erscheinung in den Browsern (meistens) kaum beeinflusst. Die meisten Ve ränderungen betreffen
Beziehungen zwischen Seitenelementen sowie das XHTMLMarkup. Dennoch reichen sie vollkommen aus, um eine solide
Grundlage für eine zugängliche und such masch inen- wie benutzerfreundliche Seitendarstellung zu schaffen.
Defin ition d es Ookum enttyp s (OOCTY PE) I Einer der ersten
Schri tte bei der Implementierung einer Web seit e sollte die Festlegung auf einen der Webstandards sein. Mithilfe der DOCTYPEDeklaration können Sie einem Browser bzw. einem Ausgabegerät
mitteilen, nach welchen Regeln (nach wel cher Version der Spra8.2

Barrierefreie Seitengestaltung

I

4 75

ehe) die Seite interpretiert und dem Anwender präsentiert werden soll. Sie können dabei aus mehreren Versionen von HTML
und XHTML auswäh len. Es em pfiehlt sich, XH TML zu verwenden,
da Sie in dieser Sprache mehr Mögl ichkeiten für eine semanti sche
Seitengestal tung haben.
Sie haben hier die Wahl zwischen XHTML 1.0 Strict (ausnahmslose Verwendung nur solcher Elemente, die in der Sprache definiert sind), XHTML 7.0 Transitional (Verwendung von alten HTMLTags zusammen mit neuen Elementen der Sprache), XHTML 7.0
Frameset (wie Tra nsitional, allerdings nur fOr Seiten, die Frames

verwenden) und XHTML 1.7 (veröffentlicht 200 1, die letzte
Version der Sprache XHTMl). Damit ein Scree nreader erfährt,
in welcher Sprache die Inhalte einer Seite vorgelesen werden,
geben Sie die verwendete Sprache im <html >-Tag an (im Beispiel
Deutsch):
In HTML 4 mit:
<html 1 ang- " de " >
In XHTMl1.0 mit:
<html xml ns- " http: // www . w3 . 0 rg /l 999/x html " 1 ang- " de "
xml :lang-"de " )

Stilndilrd- und Quirks-Modus

Bei der Interpretation von
Seiten inhalten unterscheiden
Browser zwischen dem Standard-Modus und dem QuirksModus. Ist ein Standard via DTD
festgelegt, so wird die Seite nach
Standard regeln angezeigt . Wird
kein Standard erkannt, so springt
der Browser in den QuirksModus , bei dem Inhalte wie
bei älteren Browsern angezeigt
werden. Deshalb ist es wichtig.
mithilfe der DTD immer darauf
zu achten, dass die Browser
den Standard-Modus erkennen
können.

Und in XHTML 1.1 mit:
<html xml nS-" http: // www .w3.0 rg / 1999/ xhtml "
xml: 1ang-"de " )
Beachten Sie bitte, dass sich die Darstellung einer Seite durch
die Dokumenttyp- Oefinition (OTO ) komplett ve rändern kann,
da gewisse Sprachelemente (Tags) anschließend möglicherweise
falsch verwendet werden oder laut Spezifikation überhaupt nicht
(mehr) existieren.
Ist eine Seite standardkonform, entspri cht sie also vollständig
einem Webstandard, so ist eine optimale Grundlage für einen
barrierefreien Webauftritt gegeben. Dennoch ist eine standardkonforme Seit e nicht unbedingt barrierefrei. Stand ards schaffen
nur Rahmenbedingungen für die Zugänglichkeit und stellen Entwicklern viel Freiraum zur Interpretation bereit.
Trennung von Struktur und Präsentation

I Um

eine möglichst
flexible Gestaltung und Verwaltung einer Seite zu ermöglichen,

ist eine strikte Trennung zwischen der logischen Struktur (Markup

476

I

8 Barrierefreiheit und Usability

und Inhalt) und der 5eitendarstellung (Design) notwendig, Diese
Trennung wird durch die Verwen dung der Markup-5prache
XHTML (1.0 oder 1.1) und der 5tylesheet -5prache (55 möglich.
Waren Fo rm und Gestalt in den älteren Versionen von HTML (vor
1998) in einem Dokument vere inigt, so werden mit XH TML und
(55 zwei unabhängige Ebenen erzeugt , die getrennt voneinander
behandel t werden können.
Die Verk nupfung der Sprachen XHTML und (55 erlaubt
es, das Erscheinungsbild eines Webauftritts mit einer einz igen
Anweisung in einer (55-Datei - also zentral und global - anzu passen.
Die Trennung zwischen Inha lt und Darstellung liefert dem
Entwickler Vorteile, bedarf jedoch eines sauberen und korrekten
Markups. Entvvickler müssen die tatsächliche Bedeutung von
Sprachelementen genau verstehen , Die Verwendung von Sprachelementen darf sich nicht nach der Sei tendarstellung in einem
Browser richten. Entscheidend ist , dass die Elemente semantisch korrekt eingesetzt werden. Ihre Darstellung kann anschließend per (55 beliebig verändert werden , Ein Musterbeispiel fOr
diese Art der 5eitengestalt ung ist das Webprojekt CSS Zen Garden (http://www.w.zengarden.com) - ein Projekt, das zeigt, wie
die Gestal t ung einer 5eite mi t bloßen (55-Anweisungen nahezu
beliebig realisiert werden kann.

I
Webdokumente ,.on the flyoe
Mit 551 , PHP, ASP und Ruby lassen sich Webdokumente _on the
fly. generieren. In solchen Web seiten steht Entwicklern noch
mehr Flexibilität zur Verfügung,
da eine Trennung zwischen einzelnen Elementen desXHTMLMarkups (Header, Navigation,
Content , Rightbar, Footer usw.)
vorgenommen wird. Dadurch
werden XHTML-5trukturen
autonom und können zentral
verändert werden . Dies ist etwa
in Blog-Engines wie Wordpre ss,
Textpattern, Expression Engine,
aber auch in Content-Management-5ystem und Wikis der Fall.

_.-

.. •

--_•.... -......-._.~-­

.-;:" -

... Abb ildung 8.6

... Ab bi ldung 8.7

C55 Zen Garden, Ent !)' 1# 200
(QueUe: http://WWIN.csszengarden.com)

C55 Zen Garden , Entry 1# 195
(Q uelle: http://WWIN.c5szengarden.com)

Was ist aber nun genau mit der oben angesprochen Trennung
zwischen Inhalt und Darstellung gemeint? Dies bedeutet zum
Beispiel, dass eine Tabelle nicht zur Auszeichnung eines Fließtextes verwendet werden darf, da Fließtex te mit einer tabellarischen Form meistens nichts zu tun habe n, also semantisch gesehen keine Tabellen sind.
8.2

Barrierefreie 5ei t engest aJtung

I

4n

In XHTMl macht die strukturelle
(nicht die visuelle!) Auszeichnung von Inhalten die Semantik
des Gesamtdokuments aus.

Des Weiteren darf eine Sei tenObersch ri ft in einem semantisch
korrekt en Doku ment nicht als Fließt ext auftauchen, da sie semantisch gesehen eine Hiera rchie höher angesiedelt ist. Ein Zeilenumbruch da rf nicht als Trennung für Absätze verwe ndet werden, da
diese Trennung schon durch das <p> -E lement semantisch vorgenommen wird . Eine Aufzählung in der Seiten navigation ist kein
Fließtext, sondern eine geordnete oder ungeordnete Uste.
In ei nem semantischen Markup werden alle Elemente mit
speziell für sie gedachten Eigenschaften und Zwecken versehen.
Daraus ergibt sich, dass Designer in ih rem Markup zwischen
Überschriften, Absätzen , listen, Tabellen, Zitaten, Defini t ionen,
Quelltexten und Mult imedia-Elementen seh r deutlich unterscheiden müssen.
Eine opt imale Grundlage fOr eine barrierefreie Sei tenen twickl ung wird durch XHTMl 1.0 geliefert: Im Gegensatz zu
der Version 1.1 ist XHTM L 1.0 rOckwärtskompatibel, das heißt,
XHTML 1.O-Dokumente werden von HTML-Browsern noch
korrekt verarbeitet, solange die Sprache im Dokument korrekt
vervvendet wird. Be i XHTML 1.1 wi rd dies nicht im mer der Fall
sein.
Semantik eines Dokuments I Die Semantik eines Doku ments
w ird in XHTML durch die Wahl der Auszeich nung der Inhalte
bestimmt. Eine hierarchische Seitenstru ktu r ist dabei besonders
wicht ig, um etwa die Gewichtung von einzelnen Textpassagen
korrekt zu vermitteln und die Schwerpunkte stärker zum Ausdruck zu bringen. Dies wird durch die Formatierung von Inhalten
mit passenden Sprache lementen und nicht durch die Gestaltung
per (SS erreicht.
Dafür werden etwa Überschriften m it den XHTML-Elementen
<hD bis <hG> (h l ist die Überschri ft 1. Ordnung, h6 die Überschrift
6. Ordnung) ausgezeichnet. Listen werde n durch geo rdnete (01)
oder ungeordnete (ul, dl) Listenelemente gekennzeichnet. Analoges gilt auch für Tabellen und alle and eren Elemente.
In semant isch korrekten XHTML-Dokumenten dürfen keinerlei
Elemente vorkommen, die bis da to zu r rein optischen Gestaltung
vervvendet wurden.
Die Elementtypen <b> ... </b> (bald) und <f> . .. <11>
(italics) sollten daher durch <s trang> ... <Is trang > (st rang
emphasized text) und <ern> ... <lern> (emphasized text) ersetzt
werden.
Es ist wicht ig zu verst ehen, dass es sich dabei nicht bloß um
den Ersatz eines Tags durch ein anderes, sondern um den Austausch eines gestal terischen El ement s gegen ein st ruk turelles Element handelt.

478

I

8 Barrierefreiheit und Usability

In diesem Zusammenhang ist auch dringend von sogenannten
5yntax5llppen (HTML-50ups) abzuraten, bei denen Stil- und St ruktu relemente im Quelltext miteinander vermisch t werden. Das
Markup

I
TIPP
Syntaxvermischungen (z. B: <p
style -~!l argln: O. l e !l: ~> ...
<f p» mögen zwar hilfreich sein,

um die Darstellung von gewis sen
Elementen schnell anzupassen.
Es spricht nichts dagegen, sie
für Testzwecke zu verwenden;
langfristige Anpassungen sollten
jedoch über Klassen in (55 realisiert werden.
XHTM L:

<p styl e- " f ont -wei ght: bo 1d" ) ... </p)
sollte etwa durch
<p cl ass- "i ntroduction ") ... </ p)
ersetzt werden. Die ext ra dafür eingeführte Klasse i nt roductlon
muss dann in den jeweiligen (55-Dateien entsprechend definiert
werden.
Solche rein logischen Syntaxst rukturen sind besonders vorteilh aft für Suchmaschinen, schließlich wird so die Semant ik der
Inhalte präzise dargestellt.
Alt ernative Besch riftun gen I Diesem Zweck dienen auch alternat ive Beschriftungen für Bilder und Karten (Imagemaps). Nutzer mit
Sehbehinderungen oder auch deaktivie rter Bilderanzeige können
Grafiken genauso wenig wahrnehmen wie Suchmaschinen-Spider.
Für solche Fälle macht es Sinn, einen alterna tive n Text bereitzustellen, der anstelle der Bilder angezeigt bzw. ausgegeben wird.
Bei Bildern werden Beschreibungen über das alt-Att ribu t
angegeben, bei Imagemaps ist jeder Kartenbereich einzeln zu
beschreiben. Dabei sollten auch die Dateinamen der jeweiligen
Bilder (allgemeiner: sämtlicher Elemente auf der Seite) ihren Inhalt
im Namen widerspiegeln, also semantisch gesehen ähnlich sein:
<i mg src- " studie-zugaeng1 i c hkeit-2007 .png "
width-" 300 " height- "250 " alt-" Studie der Vereinten
Nationen 2006: 97% aller Seiten sind unzugllng1ich. "

<p c la ss- ~ l ntr odu c tl o n~ > .•.
<f p>
(55:
. 1ntrOductl on 1 !la rgln:
O. I eil : I)

AlternatIve BeschrIftungen
Im barrierefreien Webdesign
müssen aUe MultimediaElemente beschrieben werden.
Bei Bildern und Imagemaps
geschieht dies über das <1 1tAttribut.

I>
Beachten Sie, dass die Beschreibungen semantisch korrekt sein
müssen, also den Sachverhalt möglichst präzise und detailliert
veranschaulichen sollen. Bilder ohne Bedeutung sollte es eigentlich nicht geben. Lässt sich dies jedoch nicht vermeiden, so empfiehlt es sich, das a1 t-Attribut mit einem Leerzeichen als Wert zu
verwenden (al t- " " ).
Bei Karten verwendet m an et wa:
<map name .. .. karte " )
<area s hape- "rect " coords- "15.49 . 30.20 "
B.l

Barrie refreie Seitengestaltung

I

479

href- " s aa rbruecken. htm1 " a1 t-" Sa ar brOcken" )
</ map >
<p>< img s rc- " kar t e.g if · alt- " Eine Kar t e '
usemap- " /lkarte " height- " 300 " width ... · 250 · 1></ p>
Häufig sind alternative Beschreibungen auch be i Verweisen nüt zlich oder notwendig. Bei Beiträgen. die sich an einen informell en
St il halten und als Link-Text etwa die Wörter »hierII , ,.mehrll oder
Itauchll verwenden oder einen Sachverhalt nur in direkt andeuten,
' Seh1 ieBl ic h 1.'1 rd <a hr ef - · htt p: // www . stu die.de · >i n
vielen Fallen </ a> auf da s seman t i sch ko rrekte Markup
ve r zi chtet.
0

können Verweise präzisere Beschreibungen besitzen. Zum Beispiel :
" Sc h1 ieB1 i c h wi rd <a hre f - " ht t p: // www . stud i e .de o
tit le- " $t ud1e der Verein t en Nat ionen 2006: 97% alle r
Seiten sind unz ugClnglich ' >in v i elen FClllen </ a> auf
da s semant1 sch kor rekte Markup verz1 chtet. "

TIPP

Je präziser eine Verweisbeschreibung Ist, desto verständlicher
ist der Verweis für die Seitenbesucher - sOINohl mit als auch
ohne Behinderung, Ein Tooltip
lässt sich mit dem Attribut tl t l e
erzeugen .

Oie durch das t it 1e-A ttri but berei tgest ellten Hilfet exte erscheinen in visue llen Browsern bei m Darüberfahren mit der Maus als
Toolt ip. Für Vo rlesesoftware und Ausgabegeräte gelt en sie dagegen als Hinweise, die entweder direkt vorgelesen bzw. ausgegeben oder bei Bedarf ,. nachgeschlagenll werden können.
Im Grunde lasst sich d iese zusatzliche Hilfe durch aussagekriiftige Verweise vermeid en. Texte und li nks sollt en immer inha ltsbezogen und nicht gestaltungsbezogen se in. Der Text »Rote
Schaltfl äehe im rechten unteren Bild« beispielsweise so llte etwa
dureh ,.zweit er VeM'eis in der Rubrik )oienste'lI ersetz t werden.
Möchten Sie ei n Bild mit einer detaillierten mehrzeiligen
Beschreibung versehen, so können Sie das Attribu t l ongdesc
(La ng Description) verwenden, das au f eine ext erne Datei mi t
einer Beschreibung verweist.
<1mg src", " bel s plel.jpg · alt- " Bei spiel '
1ongd es c_ besc href bung. htm 1" I>
H

Im Intern et Explorer bis einschließlich Version 6 wird das Att ribut 1ongdesc allerdings nicht unterst ützt . Deshalb bleibt Seitenentwicklern nichts übrig, als einen Verweis auf die Beschreibung
zusätzli ch unte r das Bild zu setzen.

480

I

8 8arrie refreiheit und Usability

I

<a href- obe schre1bung.html O t1tle- "Verwe1 s zur
Bl1 dbe s ch re 1bung H>[ Info ] <I a>
Dies wird in der Praxis Jedoch äußerst selten vorko mmen. Benö·
tigt das Bild eine ausführli che Beschreibung, so ist es besser, diese
gleich als Fließtext direkt daneben einzufügen .
Ursprilngllch 'WUrde Wikipedia auf Nupedia als
Artikeln dienen, die spller den Redaklionsproz
die Mitarbeit ohne Regisl rierung - entwickelte

----~- -

Am 15. M~
die französ
Sprachen.
stellte kurz
Im Februa)
spanischer
Encrclope,
Unbehage

Um einew
kunllig MI
mit der für nicht·kommerzielle Organilalionen \

.. Abbi ldung 8.8
Bl!i Wlkipl!dia wl!rden Bildbl!schreibungen direkt unter dem
Brld angeblacht.

Am 20. Juni 2003 schließlich ver1<Ondete Wate'
denen die Wikis liefen, und die Namen'nlchte,

Der entsprechende XHTMl·(ode lautet wie folgt:

<dfv c l a ss - H co nta1ner~ >
<dfv c la ss- "1mgcapt1 on">
<fmg s r c- ~ pfad .jpg ~ wfdth- H250
tale- " ... . alt- " ... " I>
<p>Abb. 5 .8 .... </ p>

M

hefght- 16r
M

</ d1v >
</ dlv >

Diese Struktu r wird mit (S5 noch verschönert:

.c onta1 ner I
margln: O.5ern;
bo rder: Ipx so lfd f}ccc :
wldth: 264px :
fl oat: rfght:
rnargln: O.5ern lern;
bac kground· col or: f}fafafa:

,

8.2 Barrierefreie Seitengest altung

I

481

"';~f<'I.IQlem

m"l! '"

U!

mol~ , pr~um.

libf<o tOI!Qf

m.r; ... """ lIn~.

t ... (lbu~
I~S

I

tU.

.fmgcap tfon
margln: 7px:

,.no~~tle
~ie

. con tai ner p {
f ont· si ze: O.Bem;
line·hefght: 1.4em:
padd1ng: 0;
margin: O.5em:

ffilm.

100 lI'lU.

f;oudbu ..

,tis

(Ü .

mrn~ie

~I.

mim.

~~ .

>Ob IJ

...... " .." .. t......

~,

..01"... .......
11" "'" I.,... ... ...
... '''oll.......

................
.... .,,~

t;oudbu ..
doJ. tUl< "';Yfl lil. lorem ut rnof~tie r:ottilll1.
q..h iactAis nlJWll rlU$$3 non .. m,. 000K fI

lndd..rol .

"'~ 11f1I

VftlefWItls du . t«.nc

;4Vff'iI,

.... Abbildun g 8. 9
Die Bildbeschreibung sollte sich
direkt unter dem Bild befinden.

for CSS 10 be taken seriousl~
a;m~ eXClle, inspire , and
view
.. .
. . da:

n

na will IUClY '11'" ~"'''' ~1.",0::1 in
!ins Ihe same, Ihe onl)! thin
.... Abbild ung 8.10
Die ausgeschriebene Form der
Abkürzungen erscheint in Form
eines Tooltips. Benutzt wird das

<abbr>-Tag.

Weitere Met hoden setzen auf JavaScript Die Beschreibung wird
aus dem tltle- oder dem alt-Attribut genommen und direkt
unter das Bild gesetzt.
~ Image Caption
http://lab,arc90.comltools/imgcaption (Linkeode 286)

•

Styled images with caption
http://www.boagw.Ofld.comiarch ives/2006/0 7/
styled_images_with_caption.htm (Linkeode 287)

Kennzeichnung von Abkürzungen I Auch Textelemente wie
etwa Abkurzungen und Akronyme sollten in einem semantischen
XHTML-Markup als solche deutlich gemacht werden. Dabei können Sie den Nutzern die ausgeschriebene Form bereitstellen.
Diese wird in visuellen Browsern beim Darüberfahren mit der
Maus al~ Tooltip angezeigt, in anderen Software-Tool~ bei Bedarf
vorgelesen und/oder ausgegeben.
Häufig benötigen Nutzer Hintergrundwissen, um Seiteninhalte
einordnen und verstehen zu können. Da Sie als Seitengestalter
oder Seitenbetreiber nicht wissen können, welches Publikum auf
Ihre Webseite aufmerksam wird, können Hilfestellungen deshalb
sehr nützlich sein. Durch eine semantische Auszeichnung speZifizieren Sie eindeutig, dass beispielsweise ein Screenreader ein
Wort als eine Abkürzung und nicht etwa als eine Anreihung von
Konsonanten buchstabieren ~oll.
Abkürzungen müssen wenigstens an der Stelle ihres ersten
Auftretens im Inhalt erläutert werden. Dies geschieht über die
Tags <abbr) oder <acronym). Dabei wird <abbr) für Abkürzungen
veNv'endet, bei denen jeder einzelne Buchstabe ausgesprochen
w ird, zum Beispiel BBC oder USA. Das Tag <ac r onym> ist dagegen fürWörter ged acht, die wie ein Wort ausgesprochen werden,
zum Beispiel NATO oder UNO. In (X)HTML werden beide Elemente mit dem tf t 1e-Attribut ausgezeichnet .
<abbr title ... " Cascadl ng Style Sheets ")CSS</abbr)

482

8

Barrierefreiheit und Usability

Die Gestaltung von< abbr> und <acronym> mittels (SS geschieht
wie folgt:
abbr (
cursor : hel p ;
border-bottom: lpx dotted 11333333 ;

I
Im letzten Entwurf (Working Draft) von XHTML 2.0 i st <acronyrn>
nicht mehr enthalten und wird durch <abbr> ersetzt; für Abkürzungen w ird demzufolge in Zukunft nur noch <abbr> zuständig

I
TIPP

Sie können die Anzeige der
ausgeschriebenen Form mittels
C5S kontrollieren. So sorgt die
Stilanweisung
al>l>r:after I
conten t :
" ( " attr ( l1tle) " )":
I

dafür, das~ die ausge~chriebene
Form gleich hinter der Abkürzung ausgegeben wird.

sein.
Grupp ierun g von zu samm enh ängenden Sei t en I Semantisch
zusammen hängende Inhalte, die auf mehrere Seiten verteilt
werden, können durch die Angabe ihrer Beziehungen zueinander direkt miteinander verknüpft werden. Dieser Fall tritt etwa
bei langen, mehrseitigen Zeitungsartikeln in den großen OnlineZeitschriften auf.
Die Verknüpfung lässt sich über das <1 ink>-Tag erzeugen. So
wird die Startseite über die Angabe horne festgelegt. die vorherige
Seite über prev, die nachfolgende über next und die letzte über

[ ,

'~ 3 N.~P"• •
Back to top

.. Abbildung 8 .11
In solchen mehrseitigen Beitragen
empfiehlt es sich, die Navigation
über link-Beziehungen zu ermöglichen.

1ast. Diese Beziehungen werden in Webstandards auch als Link
Rela tions bezeichnet.
( link re l -"h ome " tltl e-" 5tart seite " href-''http: //www.
seite .de/horne" I>
<1 ink rel- " prev " title- " Oberschrift der vorherigen
Se ite " href-.. http: //www. seite.de/vorheri ge-sei te" I>
( link rel - " next " tltle- " Oberschrlft der nClchsten
Seite " href-.. ht t p: //www.seite.de/naec hs te -se ite" I>
( l ink rel - " last " title- " Inha l tsverzeichnis "
href- .. http: // www.seite.de/re f erences .. 1>

Defin ition von Tast aturkürz eln I Tastat urkürzel sparen Zeit und
erhöhen die Effizienz einer Anwendung . Doch was für einen Nutzer eines visuellen Browsers ledigli ch hilfreich ist, ist für einen
behinderten Nutzer eine gewaltige Erleichterung, da hierduch für
ihn die einzige Möglichkeit entsteht, auf gewisse Seiteninhalte
direkt zuzugreifen.
Denn ein wesentlicher Unt erschied in der Wahrnehmung
einer Seite durch einen visuellen Browser und einem alternativen Medium besteht dari n, dass Inhalte in Letzterem linear

Tastaturkürzel
Stehen einem behinderten
Nutzer keine Tastaturkürzel zur
Verfügung, so muss er die ganze
Seite linear abtasten. Dies kann
viel Zeit kosten, vor allem wenn
Seitenbetreiber nicht dafür gesorgt haben, dass Seiteninhalte
übersprungen werden können.

abgetastet werden müssen. Sämtliche Verweise, Texte und Bil8.z

Barrierefreie Seitengestaltung

I

4 83

der müssen somit nacheinander - Block für Block - durchge~
gangen werden. Mit Tastaturkürzeln wird dies mit einem Kli ck
möglich.
In Kapitel 7, lIFormulareoc, haben Sie gesehen, dass Tastaturkür~
zel sowohl für Eingabefelder und Steuerelemente in Formularen
als auch für Verweise benutzt werden können. Dies wird in der
barrierefreien Seitengestaltung ausgenutzt, insbesondere wenn
es um die Bereitste llung einer sc hnellen Sei tennavigat ion geh t.
Der Aufruf von Tastaturkürzeln geschieht in den verschiedenen
Browsern unterschiedlich. In seinem Artikel ,.Accesskeys: Fakten
und Standardsoc list et Jens Meiert auf, wie Hotkeys in ve rschie~
den Browsern ausgeführt werden. Sie finden den Beitr<l8 auf der
Seite http://meiert.com/de/publications/articles/20041113 (Unk~
code 288).
Hier eine Übersicht:

B

•
•

Windows und Internet Explorer: ~ + Accesskey +
Windows und Mozilia/FirefoxlNetscape: ~ + Accesskey

•

Windows und
Accesskey

•

Windows und Opera: ~ + I Esc I + Accesskey

•
•
•
•

Macintosh
Macintosh
Macintosh
Macintosh

•
•

Linux Mandrake und Galeon/Mozilla: [ Alt l + Aca'sskey
Alle Betriebssysteme und Amaya: ~ +Accesskey

und
und
und
und

Firefox ab Version 2.0:

!BI) + ~ +

Internet Explorer: ~ + Accesskey + ~
Safari: ~ + Accesskey
Mozilla/Firefox/Netscape: [iliiJ + Accesskey
Opera: ~ + I Esc I + Accesskey

In der Praxis werden für Accesskeys die Zahlen 0 bis 9 verwendet,
da Windows~Nutzer sonst die vom Betriebssystem mitgelieferten
Tastat urkürzel nicht verwenden können.
<iI hre f - " seite.html " ilccess key- " 2" )Verwe1s</iI)

Für die Wah l der Tastaturkürzel haben sich laut dem britischen
e-Government Web Handbook (http://archive.cabinetoffice.gov.
uk/e-government/resaurces/handbook/html/2-4.asp #2 . 4. 4, Lin k~
code 289) die folgenden Konventionen als Standard durchge~
setzt:

48 4

I

8

•

S - Navigation überspringen

•

1 - Startseite

•

2 - Neuigkeiten

•
•
•

3 - Sitemap
4 - Suche
5 - Häufig gestellte Fragen ( FAQ)

•

6 - Hilfe

8dffierefreiheit und Usability

I

.. 7 - Beschwerden
.. 8 - AGB
.. 9 - Kontaktformular
.. 0 - Übersicht aller Accesskeys
Im Allgemeinen gibt es jedoch keinen einheitlichen Standard, der
die Verwendung von Accesskeys festlegt. Bei vielen Seiten werden Accesskeys demzufolge unterschiedlich verteilt. So verwendet man häufig _1_ für den Sprung zur Hauptseite und »2_ für
den direkten Sprung zum Inhalt der Seit e (Nav igation übersp rin gen). »0_ führt bei mehrteiligen Beiträgen zur folgenden Seite
und
zur vorherigen Sei te.

_9_

Um neue Besu cher über die definierten Accesskeys zu informieren, ohne eine komplette Auftistung auf der Seite veröffentlichen zu müssen, können Sie aussagekräftige Beschreibungen für
Verweise benutzen.
In der Sei tennavigation kann etwa der folgende Link vorkommen:
<a href-"dlenste.php " accesskey- "4" t1tle- Dlenste Accesskey 4 ">Dlenste</ a>
M

Beim ersten Besuch können Anwender auf diese Weise feststellen, welche Tastaturkürzel vorliegen. Stammbesucher der Seite
werden sich dagegen sofort orient iere n können, ohne ext ra auf
die Anzeige von Hilfsbeschreibungen zu warten.
Die Durchsetzung von Accesskey-Standards scheint nur eine
Frage der Zeit sein. Große Unternehmen, wie etwa das deutsche
E-Mail-Portal GMX.de mit 7,9 Millionen Nutzern (http://www.
gmx.net/de/go/accesskeys, Linkcode 290), setzen Tastaturkü rzel
zunehmend ein, um die Reichweite des Angebots zu maximieren.
Reihenfolge der Navigation I Viele Nutzer mit Sehschwächen
navigieren über die Tabulatortaste. Auch diese Art der Navigati on
lässt sich mit XHTMl anpassen. Normalerweise verwenden die
meisten Browser beim Sprung mit der Tabulatortaste die Reihenfolge, in der die Verweise im Quelltext auftauchen. Wird jedoch
ein Seitenblock im oberen Teil des Quelltextes beschrieben und
per (SS dagegen rechts unten positioniert, so kann die Navigation über die Tastatur schnell verwirrend und unübersichtlich
werden.
Die Reihenfolge lässt sich daher mit dem tabl ndex-Attribut
festlegen.

8.1

Re ihenfolge anp.assen

Um die Reihenfolge der Naviga tion über die Tabulatortaste
anzupa~sen , geben Sie die Reihenfolge eleplizit an, indem Sie
die Seitenelemente mit dem
tab 1ndex-Attribut versehen .

Barrierefreie Seitengestaltung

I 485

HINWEIS

An dieser Stelle kommt wieder
die schon angesprochene Redundanz Ins Spiel. Aktionen oder
Statusanzeigen sollten Immer
mehrfach kommuniziert werden .
Zum Beispiel grüner Kreis und
ein kleiner Haken, bzw. roter
Kreis und ein Kreuz. Als Designer sollten Sie sich bei Ihren
Entscheidungen nicht ausschließlich auf Farben verlassen.

.. Abb ildun g 8.12
Menschen mit Rot-GrünSchwäche sehen auf diesem
Bild die Zahl 17, Normalsichtige
können dagegen die Zahl 47
erkennen.

Rot und Grun
Ein beachtlicher Tell der Nutzer
kann den Unterschied zwischen
Rot und Grün nur schwer oder
gar nicht wahrnehmen. Layouts.
die eine Unterscheidung dieser
Farben erfordern, müssen daher
überdacht werden.

486

I

8

<a
<a
<a
<a

href- " a.html "
href-"b.htrnl"
href- " c.htrnl "
href" " d.html "

tabindex- "l ">a</a>
tabindex -"2 " >b</a>
tabi ndex- "r>c </ a>
tablndex" "4" >d</ a>

In diesem Beispiel wird der Anwender über die Tabulatortaste vorn
Verweis a (a. htrnl ) zum VeN/eis b (b. htrnl). dann vom Verweis b
zum Verwe is d (d. htrn l ) und von d zum VeN/eis c (e. htrnl) gelangen (also a-b-d-c). Ohne das tabl nd ex-Attribut wäre die Reihenfolge linear (a -b-c-d) - dem ersten VeN/eis würde der zweite folgen, dem zweiten der dritte und dem dritten der vierte.
Barrierefreie Farb gestaltun g I Trotz des eher verwirrend klingenden Begriffs stellt barrierefreie Farbgestaltung einen der
grundlegenden Aspekte bei der Webseitengestaltung dar, der in
der Praxis allerdings häuflg unberücksichti gt bleibt. Dabei müssen
Sie als Designer dafür sorgen, dass Nutzer mit Sehschwächen.
also mit unterschiedlichen f ormen der Fehlsichtigkeit, sich auf
Ihren Seiten orientieren können.
Ein Problem ist dabei besonders wichtig: Es gibt einen beachtlichen Anteil von Nutzern. die gewisse Farben nicht unterscheiden können . Ungefähr vier bis acht Prozent der Bevölkerung in
westlichen Ländern (meistens Männer) haben in der einen oder
anderen Form eine Abweichung der Farbsichtigke it (vgl. dazu
auch Abbildung 8.12 sowie http:// www.einfach-fuer-aJle.de/artikel/gestaltung-hilft, linkcode 291) .
Besonders häufig bereitet die Farbkombination Rot -Grün
erhebliche Probleme. Das Zusammenspiel dieser Farben sowie
ihrer dunklen und hellen Farbvarianten können acht Prozent der
Männer und 0.8 Prozent der Frauen weltweit nicht unterscheiden. (Bei Blau und Grün fällt diese Zahl unterO,01 Prozent.) Deshalb sollte die rot-grüne Farbpalette nach Möglichkeit nicht als
dominierende Farbkombinat ion gewählt werden. Die5 gilt auch
für die Gestaltung von Verweisen. Überprüfen Si e daher immer.
ob Ihre Farben dementsprechend gewählt wurden. 8eachten
Sie bitte, dass natürlich sowohl Rot und Grün als auch Blau und
Grün auf einer Seite prinzipiell veN/endet werden dürfen. Sie
sollten (dürfen) nur nicht zur Auszeichnung von benachbarten
Elementen benutzt werden. die voneinander notwendigeN/eise
unter5chieden werden 501len.
Zur besseren Unterscheidung zwischen Verweisen und son5tigen Texten ist e5 empfeh lemwert, Verwei5e zu unterst reichen
und/o der durch Fettdruck hervorzuheben.

8arrierefreiheit und Usability

I

Bereitstellen alternativer l ayouts I Eine simple Möglichkeit,
die Inhal te einer Seit e allen Anwendern in einer lesbaren Form
anzubieten, stellen CSS-Styleswitcher bzw. die Praferenzauswahl
bereit. Beide Techniken bieten alternat ive Anzeigemöglichkeiten,
die sich ohne Veränderung des XHTML-Quellcodes bequem
anpassen und anzeigen lassen.
Im ersten Fall können Anwender zu einem alt ernativen Layout

... Abbildung 8.13
Auf www.456bereastreet. com
ist de r Wechsel zu einem alternativen layout mit einem hohen
Kontrast möglich.

wechseln und Inhalte in einer Form anschauen, die direkt an ih re
Bedürfnisse angepasst ist. In der Praxis wird man in alt ernat iven
Layouts meistens den Schriftgrad höher einstellen . Dabei ist zu
beachten, dass sich die Laufweite proportional mit der Schriftgröße verändern sollte, dami t Buchstaben einander nicht uberlappen und lesbar bleiben. Außerdem wi rd man einen hohen Kontrast zwischen der Text~ und der Hintergrundfarbe verwenden.
Klassische St ile sind helle Textfarben auf dunklem Hintergrund
sowie umgekehrt dunkle Tex tfarben auf hell em Hintergrund.
Sollte der Benutzer die Lesbarkeit erhöhe n woll en, so genügt ein
Klick, um die Darstellung entsprechend anzupassen .
Ein PHP~basjerter CSS~S tyleswitc her beruht darauf, dass ein
PHP~Skript mit dem Dateinamen der alt ernativen CSS~Dat ei auf-

...,...

~~~~_

------

~
lC.
~~_

-

~·-·-r~~

-_._-_._-- .--!!I---

- ~ ~~~,==
tl -· - ~---_··

:':-..-~~~-=-

... Abbi ldung 8.14
456bereastreet.com vor dem
Switch .

gerufen wird. Dieses ersetzt an der passenden Stelle den Pfad zur
CSS-Datei und schickt den modifizierten XHTML-Code an den
Browser. Anschließend wird die Seite neu geladen, wobei die
Ansicht der Seit e nun durch eine alternat ive CSS~Da te i best immt
wird.
In der Präferenzauswahl wi rd die Sei tenansicht zusätzlich in
Cookies gespeichert und bei jedem Besuch des Nutzers als Stan dardanzeige verwendet.

_

.. .....
-__.......- .",..... _,
_-.•.. .__
..............
" . ..-.- ....
.. _......._... .. . ...
__......
_

~._~.

~

_

_

~._

~~

•"U 'M" "•••• "'te... , . " .... "

_-

."....

_........... .

... Abbildung 8.15
. .. und nach dem SWi tch

.....

.. Abbildung 8.16
Mike Cherim's PHP Style Changer (http://mikecherim.com/ experiments/
php_style 3hanger .php7Gimme Style:d efdult .cs s. Unk code 292)

In einschlägigen Methoden, wie sie eMa von Roger Johansson (,. Suild your own PHP st yle sheet switcher«, http://
www. 4 5 6ber ea street. (Om/ archive/20060 8/buiId..j'ou r_ ow n-ph p_

style_sheeCswitcher, Linkcode 293) ode r von Mike Cherim (PHP:
Style Changer. http://mikecherim . com/ gbcmsJml/ news-page.
php?id=12 , Linkeode 294) beschrieben werden, verwendet man

über 60 Beispiele von eleganten
und funktionalen Style-Switchern
finden Sie auf der $eite: http://
www.smashlngmagazlne.coml
2008/06/2 5l style-swltcherscontest-results/ (Linkcode 295)

8.1 Barrie refreie Seitengestaltung

I

487

HINWEIS
Beachten Sie, dass cSS-Styleswitcher an einer Stelle im
layou t untergebracht werden
sollten, die allen Nutzern leicht
auffallt und deutlich hervortritt.
Häufig wird dafür der rechte
obere Seitenbereich oder das
rechte Navigation<; menü gewählt. Zur Auswahl können sowohl Verweise als auch Auswahlmenüs verwendet werden.

ein Layout (ookie, um die Seitenansicht zu ko ntrollieren. Dieses
wird auf dem pe des Anwenders gespeichert. Sollt e der Browser
keine Cookies akzeptieren, wi rd zu r Standard ansich t gewechselt .
Sorgen Sie dafür, dass eine Ansicht, zu der gewechselt wi rd ,
deutlich genug beschrieben ist. Als anschauliche I ndikatoren kön nen Sie zusät zlich Farbt öne anzeigen, denn schließlich werden
al ternat ive Layouts me ist ens nur mit wenigen Farben auskommen. Ä hnlich können Sie Anwender manue ll best immen lassen ,

weiche farbe, Schriftgröße und Schriftart verwendet werden soll.
Selbst verst ändlich ist auch die Bereitstellung von alterna tiven
Layouts für behinderte Nutzer möglich. Dabei ist es wicht ig,
säm t liche Seiteninhalt e in einer Spalt e anzuzeigen, Verweise mit
Hilfsbeschreibungen zu versehen, Bilder durch Beschreibungen
zu ersetzen und unnötige Elemente (etwa Mini -Icons) zu entfer-

IlI Ii1 I!i1
0 . , 10eof ll .Cl a 0"0

nen. Der Hinweis auf ein al ternat ives layout sollte am Anfang der
Seite angebracht werden.
Weitere Empfehlungen
.. Frames
Jegliche A rten von Frames - sei es ein <f r ameset) oder ein

<1f rame> -sollten unbedingt vermieden werden. Fra mes wer-

A Abbi ldung 8 .1]
Smarter CSS-Styleswitcher auf
http://www.mikeindustries.co m.
Neben mehreren Themes IaHen
sich auch die mobile Ver5ion
anschauen, die Schriftgröße der
Texte anpassen sowie die Schriftart man uell festlegen.

den von Web-Crawlern im besten Fall nur teilweise gescannt,
wodurch Inhalte der Seite - wenn Oberhaupt - falsch bewert et werden. Ebenso sind Frames f ür Screenreader unzugäng-

lich, da sie nur teilweise vorgelesen werden können. Möchten
bzw. können Sie au f Frames aus irgendweichen Gründen nicht
verzichten, so ist es notwendig, das <no f rames> - Element zur
Beschreibung des Seit en inhalts einzusetzen, um auch N utzern
von t ext basierten Browsern den Zugang zur Seite zu ermöglichen.
.. Verwei se t renn en
Nebeneinanderl iegende Verweise sind durch von leerzeichen
umgebene druckbare Zeichen zu trennen, damit sie auch ohne
visuelle Umgebung au f dem Bildsc hirm von einander getrennt
und von Screenreadern in Wörter zerlegt werden können. Als
d ruckba re Zeichen können leerzeichen, Kommata, Bullets
oder auch das Pipe-Zeichen (I> verwendet werden.

Abbildung 8.18
Auf popurls.com stehen dem
Anwender mehrere Funktionen
zur Ve rfügung. darunter die Vergrößeru ng des Textes , der Wechsel zu einem hellen Layout oder
das Offnen der Dateien in neuen
Fenstern.
A

488

..

Sitem aps
Eine gute Orientierungshilfe stellen ein vollst ändiges Inha ltsverzeichnis der Seit e (Sitemap), eine textbasierte Sei t ennavigation sowie eine Vollt extsuche dar. Die Volltext suche
kann unter anderem mit hilfe von Google realisier t werden,
etwa über den Dienst Google Co-op: Custom Search Engine
http://google.com/coop/cse(Unkcode 296)

8 8arrierefreiheit und Usability

~

~

~

Pop-up s
Vermeiden Sie das Öffnen von neuen Browserfenstern (Popups) ohne eine entsprechende Zustimmung der Nutzer. Ein
sehbehinderter Anwender kann nicht verstehen, was mit der
Seitenansicht passiert ist. Außerdem bereitet dies gleich mehrere Usability-Probleme, da zum Beispiel die Navigation über
die Zurück-Schaltfläche in den neuen Fenstern unmöglich
wird.
N av igationsmenüs
Bil dbasierte Navigationsmenüs können in älteren Browsern
(auch im Internet Explorer bis einschließlich Version 6) nicht
skaliert werden. Ist die Sch riftgröße nicht großgenug gewählt,
50 können Nutzer die Bedeut ung der Bilder nicht ablesen und
müssen zu alternativen Beschreibungen greifen . Empfehlenswert ist es deshalb, flexible textbasierte Navigationsmenüs
(li sten) mit CSS zu realisieren. Es ist dabei auf jeden Fall eine
alt ernative Beschreibung bereitzustellen.
Schrift größe
Anwender so llt en den Schriftgrad der Seite direkt einstellen
können . Dieswird durch dieVerwendung von relativen Schriftgrößen (ern, ex, % ) möglich, wodurch Anwender Seiteninhalte
mit der lupe-Funktion beliebig skalieren können (fOr Bilder
gilt dies nicht!) . Alternativ kann man die Schriftgröße über
eine entsprechende Schaltfläche oder einen Verweis auf der
Seite veränderbar machen. Als Beispiel können Sie die Seite
http://www.elnfach-juer-alle.de betrachten, auf der dies mit
einem JavaScript realisiert wird. Texte, deren Schriftgröße mit
Pixelangaben festgelegt wurde, können im Internet Explorer
bis einschließlich Version 6 nicht vergrößert werden.

CO Mr lG U RA ll O MS

DU AL I. .G H Z

I
Online Converters

--- ......-

' -'

Abbildung 8.19
links werden durch Kommata und
Plpe-Zelchen get rennt (Quelle :
SmashlremdBazine.com).
6

-,....-,.,

Abbildung 8 . 20
Eine Sitemap aufTheherald.co.uk

6

• Abbildung 8.21
Die Schriftgröße l."isst sich auf
www.einfach-fuer-alle.debeliebig vergrößern und verkleinern .
Außerdem sind Druckansichten
und Großschriftansichten möglich.

DUA L 2G HZ
M,4571l'il

G5'IIOClIIOII
1 1I0 1I I U'II UI
Ll V lI l [il[H'

~

5121( pe, P'OC:lHro.

1Qiz per pro::elso,

125GH2pe, p ,oc:",SO'

512K PlI P,OC:IHSOI

5121( PI' P,oellSO'

Tabellen
Eine Tabellewird im semantischen Markup nicht als ein gestalterisches Element derSeite interpretiert, sondern als eine Form,
über die tabellarische Daten prasentiert werden . Tabellen sind
somit mit einer Überschrift (caption), einer Zusammenfassung (s ummary), einem Tabellenkopf (thead), einem Tabellenfuß (tfoot) und einem Tabellenkörper (tbody) zu versehen .
8.2

Abbildung 8.22
Eine Tabelle soll mithilfe seman tischen Markups realisiert werden.
im BeISpiel: hUp:l/www.duoh.
comlcsstutorlals/csstables (linkcode 297)
6

8arrlerefreie Seitengestaltung

I

4 89

.. l ab el-Tags
label-Tags in Formularfeldern ermögliche n eine direkte Beziehung von Beschriftungen und Eingabefeldern. Diese stellen
für Nutzer von nichtvisuellen Browsern eine große Hilfe dar,
da Form ulare schneller ausgefüllt werden können .

Goodbye, Landon
iPopII zah.1IJ(1/ • U:411 ..... ,,.,.

Abbildung 8.23 ...
Auf leffCroft.com wurde nicht
nur eine kurze Zusammenfassungjedes Beitrags präsentiert,
sondern auch direkte Verweise
zu Kommen taren. Möchte der
leser sich über die neuen Einträge
Informieren oder einen eigenen
hinzufügen, kann er dies durch
einen Verweis tu n, ohne die Seite
komplett scrollen zu müssen.

rr. (lcIr-._

r...bIO ..... GIn HoIII .. K ............. r. .. <ftKÜ>Oj .... ..
.............."II ..ci., . . _
I ......... 'n~ .. ..

F

..

_

.-.1 ..... .

T_.tP'IY."''''_d ........,''''fLo.. ....
_ _ .... pooO<ip.lOdin.p.MI "" .............. ..

_IIIop ...

""'9' ..........

n.. ...... -,io ........... bo.-..."r..... - . I >

.......

..... l _ i o ...

"'_<iIJ r.. _ _

I>

F1M .... "" ...

--_ ._.....

_
..
-

_

"''''''' loab"

__n__ .ThoG<n_'...... ""_n.

Up<l": ~"""ui:''''_ Iof ~ "-,,,, , _,

'- ...-....._. ""r

lolo

,-

.......
.-

.. Sp rungverweise
Bringen Sje vor großen Textblöcken ejnen Verweis an, mit

dem Seiten inhalte übersprungen werden können, damit etwa
Nutzer von Screenreadern nicht ewig lange scrollen und sich
Blöcke, die auf jeder Sei te permanen t au ftauchen (N avigation), immer wiede r anhören müssen. Der Inhalt eines Beit rags im XHTMl-Code sollte vor die Seitennavigatjon gesetzt
und anschließend mit CSS positioniert werden. Seitensprünge
können durch Verweise auf die lOs des jeweilige n Containers
realisiert werden. Pla tzieren Sie die ungeordnete liste
HINWEIS
Vermeiden Sie bei Ihren CSS-Dateien die Anweisu~ dl sp l ay:
none:. Sie versteckt Inhalte
sONohl für Nutzer lIon visuellen
Browsern als auch für Nut zer von Vorlesesoftw"are. Eine
Übersicht über Methoden zum
Ein- und Ausblenden von Daten
finden Sie auf der Seite:

http://www. webaccess/b/lity.
/nfo/lab/d/splayte5t. html (LInkcode 298)

490

8

<ul id-" SKip " >
<11><a href- "llconten t" )Zu m Inhalt </ a></1i>
<11><a href- ' lIsidebar ' )Z ur seK lInd<lren Navigati on
</ a) </1 1)
<luD

vor die Seit en navigation, wobei flcontent ein Cont ainer
mit dem Sei teninhalt der aktuellen Seite ist, und ffs 1deba r
beispielsweise ein Container mit der sekundären Seitennavigat ion. Wird einer der Verweise angeklickt, so springt der
Browser zu m entsprechenden Container.
Fügen Sie zusätzlich die Zeile

8arrie refreiheit und Usabilit y

I

ul!}skip {
indent:-lOOem;
}

in Ihre CSS- Deklaration ein, so werden beide Verweise in
visuellen Browsern nicht angezeigt , stehen jedoch für Nutzer
von Screenreadern zur Verfügung.
Mit den oben aufgeführten Richtlin ien haben Sie eine gute
Grund lage für einen funktionierenden und zukunftsorientierten
Webauft ri tt.
Ausgezeichnete Webseiten, die sä mtliche Forderungen erfü llen, finden Sie in einer Übersicht im Artikel »High Accessibility,
high design. CSS to the rescuec (http://naarvoren.nl/artike//high_
accessibility, Linkeode 299) des Accessibility-b-:perten Joe Clark.
Die deutsche Übersetzung »Gute Gesta ltung und gute Zugangli chkeit - CSS hilft allen .. von Jörg M osbach finden Sie auf:
http://www.einfach -fuer-aJle.de/ar tikel/ gestalt un~ hilft (lin kcode 300)

8.2.3

BITV für Dummys

Eine Zusammenfassung aller Richt linien, die Sie laut BITV in
Ihren Projekten umsetzen sollten, fin den Sie zusamme ngefasst
und besch ri eben von Ursula Pidun und Geral d Himmelein auf
der Seit e:
http://www.heise.de/ct/04/19/194/default. shtm (linkcode 301)

8.3

Prinzipien der Benutzerfreundlichkeit

8 .3.1
Was ist Benutzerfreundlichkeit?
Während Accessibility den Zugang zu Seiteninha lten ermögli cht,
sorgt Usability für eine möglichst angenehme Erfahrung der Nutzer auf einer Sei te . Dazu gehört vor al lem , da ss Nutzer
.. ihre Aufgaben schnell und einfach erledigen können,
.. Seiteninh alte leicht versteh en und lernen können und
.. während der Interaktion möglichst wenige Fehler machen
können.

UCD HelD
Die Hauptaufgaben des UCD
und HCID bestehen darin , Benutzererwartungen nicht nur zu
erfüllen, sondern auch bei Weitem zu ubertreffen.

Benutzerjreund/ichkeit (Gebrauchstauglichk ei t, Usabi/ity) bede utet

also insbesondere, dass eine intuitive und verständli che Kommunikat ion zw ischen dem Nutzer und dem Webauftri tt stattfindet.
Zu di esem Zweck lassen sich etwa User Centered DeSign (UCD)
und Human Computer Interaction DeSign (HCID) verwenden.

8.3

Prinzipien der Benutzerfreundlichkeit

I 491

Denn eine derwichti.gen Voraussetzungen für eine funktionierende
Benutzerfreundlichkeit ist unter anderem ein nutzerorientiertes
Modell der Sei tenentwicklung. Dieses Modell basiert darauf,
anhand der bekannten Gewohnheiten und Erfahrungen der Web~
nutzer (Usabillty~Heuristiken) eine Seitenstruktur zu realisieren,
die den Nutzererwartungen entgegenkommt. Dies geschieht,
indem man auf verschiedenen Designstufen Usability~Tests durch~
führt, daraus Ve rbesserungsvorschläge ableitet und die Ergebnisse
direkt umsetzt . Im Idealfall soll ein daraus resultierendes Design die
Benutzererwartungen nicht nur erfüllen, sondern übertreffen . Die
Idee, die dahinter steckt, ist psychologisch begründet: Ein ange~
neh mer Überrasch ungseffekt erzeugt un bewusst eine Bi ndu ng der
Nutzer an einen Webauftritt und bindet potenzielle Kunden somit
an das Unternehmen bzw. dessen Dienste.

8.3 .2

Webgr .. fik

Webgrafik kann die Benul~
zerfreundlichkeit einer Seite
un terstu tzen , aber nicht ent~
scheidend prägen. Durch eine
visuelle Kommunikalion können
Bilder zwar Hinweise liefern ,
sie können jedoch nicht die
Seitenstruktur erkl.lren. Ist diese
selbsterkl.lrend, so wurde das
Hauptziel der Usability erreicht.

Ziel und Zweck der Usa bility
Ein hoher Grad an Usab ility erlaubt es einer Webseite, ihre Besu~
eher nicht nur zu informieren, sondern auch Gespräche mit ihnen
zu führen . Können User Interfaces einen produktiven Dialog mit
Seitenbesuchern initiieren und möglichst viele Wünsche berück~

sichtigen, so hat der Anwender keinen Grund, nach alternativen
Diensten Ausschau zu halten.
Bringt eine Seite dem Anwender keinen Nutzen, so wird sie
auch nicht benutzt. Damit ein Auftritt erfolgreich wird, müssen
Anwender richtige Entsche idungen treffen und zügig zum Ziel
gelangen. Dies wird durch den gezielten Einsatz der Usability und nicht etwa durch das Grankdesign - möglich. Genauso wie
Barrierefreiheit ist die Usability~Ebene in der Seitenentwicklung
ein Grundbaustein, auf dem das Design aufgebaut wird. Design~
entwürfe für benutzerfreundliche Seiten sollten auf ih r aufbauen.
Dabei hat das Schema, dem ein Unternehmen bei der Entwick~
lung der Seite gefolgt ist, keine primäre Bedeutung: Erfolg setzt
immer eine ausgewogene Balance zwischen den Vorstellungen
des Seitenbetreibers und den Bedürfnissen bzw. Gewohnheiten
der Nutzer voraus.
Diese Balance zu erreichen, ist in der Praxis das Primärz iel von
Usa bi Iity~ Unte rsuchungen.
Dennoch bleibt das Thema »Ben utzerfreundlichkeit. häufig
auf der Strecke, da Usability~Entscheidungen meistens intuit iv
und aus der Sicht eines erfahrenen Nutzers getroffen werden.
Und in der Tat nützt diese Vorgehensweise dem Unternehmen
selten, da sowohl Seiten bet reib er als auch Webentwickler in der
Regel keine durchschnittlichen Nutzer sind.
Eine benutzerfreundliche Seite setzt deshalb notwendigerweise
eine Analyse der Interaktion zwischen Nutzer und Auftritt voraus,

492

I

8

Barrierefreiheit und Usabitity

was jedocn nur selten gemacht wird. Hi eraus resu ltieren häufig
Fehler und Unz ulänglichkeiten, die für den Sei tenbet reiber oftmals
unsichtbar bleiben, den Seiten besuchern jedoch direkt auffallen.
8.3.3 Häuf ig auftretende Usability- Fehler
Grob gesprochen lässt sich die Benutzerfreundli chkeit einer Sei te
mit der Qualit ät eines Produkts vergleichen. Es zeigen sich insgesamt sieben typische Aspekte, die oft Probleme im Hinbli ck auf
die Usabllity bereiten. Sie sind deshalb vor der Veröffentlichung
eine s Auftritts sehr genau zu beacnten.
.. I(o nsist ente Seitend arstellu ng

...

..

..

..

..

I
Kleinste Probleme, die bei der
Seitennavigation auftauchen ,
sehen Seitenbesucher meist
direkt; Seilenbelreiber jedoch
auch bei einer ge nauen Analyse
nur selten.

Seitenubergreifen de Funktionali tät von Steuerungselementen
(gleiche Funkti onal ität auf allen Seiten)
Logisc he und natürliche Organi sation d er Inform ation
Klare Sei tenhierarchie und übersichtliche Sei tenstruktur, eindeutige Beschriftungen und eindeutige visuelle Hinweise
Ko ntext abh ängige Orientierung
Sinnvolle Gliederung der Seitenbereiche: Nutzer sollen wissen, wo sie gerade sind, wo sie waren und wohin sie gehen
können.
Effi ziente Navigat ion
Der Zeitaufwand für die Navigation zu gewünschten Inhalten
soll minimiert werden; die Navigation selbst soll voraussehbar
und verständlich sein.
Effi ziente Volltextsuche
Eine Suchfunktionalität ist notwendig bei mittleren und
großen Webauftritten. Nutzer ziehen eine Suche oftmals der
Seiten navigation vor.
Einfach e Kommunikation

Die Kontaktmöglichkeit sollte intuitiv und leicht zu finden
se in. Die Kommunikation sollte durch eine verständliche Sprache und durch intuitive visuelle Mittel hergestellt werden.
.. Qualit ät der Inhalte
Der Inhalt sollte ansprechend und sprachlich korrekt sein.

8.4

Verhaltensmuster der Benutzer

Nutzer lesen nicht , sie suchen nach Sc hlü sse lwö rt ern I Eines
der typischen Verhalten smuster zeigt sich darin, dass Nutzer
im Netz nicht lesen, sondern überwiegend nach auffallenden
Wörtern in Te)(ten suchen. Die meisten Besucher suchen nach
interessanten oder nützlichen anklickbaren Elementen. Wird auf
der Seite ein potenzieller Kandidat gefunden , so wird der entsprechende link di rekt angeklickt. Konn te die Sei te dem Besu8.4 Verhaltensmuster der Benutzer

I

493

-_.--_
...
__.......'-_-_._._ .. _..
....._-'
_...... ..._......._",,....

.___
_ -.
_-~,~,~

.....
.,.',""""",
... .......

~_

_,.~

...... ,.

..

-...

.... Abbildung 8.24

Schlüsselwörter und Hauptaussagen werden heNorgehoben,
damit Nutzer den Inhalt besser
scannen können. Auf Webdesignfrom~cratch .com geschieht die~
durch Fettdruck,

eher nicht weiterhelfen, so kehrt der Suchende oftmals über die
Zurück-Schaltfläche der Seit e den Rücken .
Schlüsselwörter und Textaussagen werden dabei entweder
zufällig oder mithilfe der Auszeichnungen im Text ausgewähl t. Als
Ansatzpunkte dienen Überschriften, die ersten Sätze innerhalb
eine s Absatzes sowie die ersten Wörter in einem Satz.
Demzufolge ist es wichtig. Lesern Texte anzubieten. deren
Auszei chnungen die Schwerpunkte betonen und den Scanvorgang erleichtern . Realisieren lässt sich dies zum einen visuell mit
..
..

hervorgehobenen Schlüsselwörtern,
aussagekräftigen Überschriften und

.. geordneten sowie ungeordneten Listen.
Zum anderen kann die Kommunikation durch die geWählte Ausdrucksweise benutzerfreundlicher gestaltet werden. Eine offene
und einfach gehal tene Sprache lädt zu einer Konversation ein.
Imperative Sätze können die w ichti gsten Aspekte des Sachverhalts betonen.
laut UsabHity-Experten hat sich in den letzten Jahren gezeigt,
dass es aus der Usability-Sicht sinnvoller ist, die Ideen eines
Textes abschnittsweise (ein Abschnitt bzw. ein Absatz enthält
genau eine Idee) zu präsentieren. Dies hat zum einen den Vorteil. dass die Nutzer Informationen strukturierter wahrnehmen.
Zum anderen kann ein Argument übersprungen werden, falls es
den Nutzer nicht überzeugen konnte. In diesem Zusammenhang
ist zu beachten, dass ein Informationsüberangebot einen Nutzer
sowohl beeindrucken als auch überwältigen kann .
Das berühmte Experiment des amerikanischen Psychologen George A. Miller (1956). in dem die kogni t ive Belastung,
also die Fähigkeit zum lernen, intensiv untersucht wurde. hat
gezeigt, dass alle Menschen eine ähnliche Erinnerungsspanne
haben und sich daher etwa gleich viele Dinge schnell und nachhaltig merken können. Bei den meisten Menschen variiert diese
Spanne bei beliebigen Sachverhalten zwischen fünf und neun
Aspekten, woraus Miller das bekannte 7±2-Prinzip abgeleitet hat

Inv~rtl~rtr

Pyramldr

Im Gegensatz zurVorgehensweise der ,. invertlerten Pyramide. gehen Autoren in klassischen Werken umgekehrt vor.
Eine solide, auf Fakten basierte
Annahme führt zu The~n . die
anschließend mit aussagekräftigen Argumenten belegt werden.

494

I

(http://psychclassics.yorku .ca!MillerI, http://www.digital -eb.com/
news/2004109Irule_of_seven, linkeode 302),
Aus diesem Grund versuchen Webautoren. die Anzahl ihrer
Argumente bei langen Artikeln auf fünf bis neun zu beschränken.
Damit Besucher direkt wissen, ob sie die gesuchten Inhalte
gefun den haben, wird in der Praxis häufig das Prinzip der invertierten Pyramide (front-loading) angewandt Der Autor fängt mit
der Schlussfolgerung und/oder Zusammenfassung des Beitrags an
und erklärt dann in einzelnen Schritten, wie er zu diesem Schluss
gekommen ist. Dabei sollen schon die ersten zwe i Absätze das

8 8arrierefreiheit und Usability

Wesentliche eines Beitrags klar zum Ausdruck bringen - weiter
lesen die meisten Nutzer sowieso nicht (http:// www.lIseit.com/
alertbox/readinc-pattern. html, Linkcode 303).
Je genauer der Inhalt, desto leichter ist er zu sca nnen. Umständliche Aussagen sind deshalb nicht nur unnötig, sond ern
kontraproduktiv, da sie die Orientierung im Text erschweren, Sie
sollten deshalb genauso wie wenig aussagekräftige Textpassagen
vermieden werden. Überzeugen Sie daher Ihre Be sucher durch
eine möglichst einfache Sprache, ohne dabei Fachausdrücke oder
technische Begriffe zu betonen.
Nutzer sc hätzen Qualität und Glaubwürdigkeit I Wissen die
Nutzer, dass eine Seite Qualität anbietet, so sind sie auch bereit,
einen Kompromisszwischen Inhalt, Werbung und Design einzugehen. Die Qualität der Gestaltung ist für sie oftmals nicht so wichtig
wie die Qualitat der Beiträge. Seitenbesucher ziehen natürlicherweise Seiten vor, auf denen sie mit sorgfältig aufberei teten, vertrauenswürdigen Informationen zu rechnen haben, und kehren zu
diesen Seiten immer w ieder zurück, fall s diese sich als nützlich
erwiesen haben. Schließlich gibt es im Netz genügend Inhalte, auf
die man sich nicht wirklich verlassen sollte. Durch praxisbezogene,
gut recherchierte Inhalte können Seitenbetreiber somit das Vertrauen und die Glaubwürdigkeit ihres Auftritts erhöhen.
Hinzu kommt, dass Nutzer meist extrem zielorientiert sind.
Erfüllt eine Seite nicht die Erwartungen eines Besuchers, so springt
er direkt über die Zurück-Schaltftäche des Browsers zurück und
sucht weiter.
Eine benutzerfreundliche Webseite überzeugt ihre Besucher also durch nützliche Beiträge, die in einer präzisen Sprache
geschrieben sind. Sämtliche Behauptungen sollten mit verlässlichen Quellen (am besten Verweise zu bekannten Webseiten gleicher Thematik) belegt werden. Hochwertige Illustrationen können
die Qualität betonen, und ein guter Schreibstil kann Leser ebenso
an die Seite binden. Dadurch lässt sich ein professionelles Image
erzeugen, Reputation aufbauen und Fachwissen des Seitenbetreibers unter Beweis stellen. Ebenso wichtig ist: Kommuniz ieren Sie
mit Ihren Besucher in der Sprache, die ihnen vertraut ist.

I
•

A

cr......

...,. . . , U!C1 . ........ .

-"
_. __._-_._---.-_.-

....... ,.,.,
~,

~-

Ui'J

~

~~

---

--_._----_._---_.
..-----__•. ..-------

_--

.... Abbildung 8.15
Der Erfolg von AListApart.com In
der Entwickler-Szene basiert zum
großen Teil auf der Qualitat der
Beit r.1ge. Wer Qualitdt regelmAßig
anbietet, wird mit der Quantität
von Seltenaufrufen belohnt.

.

Stcvc Pavhna . com
, -" .
. ,

-------

~

-----,-----,-

..-."1.-7 ... _

-,

:;~..::;---_. =:~=~

~'''''

_..

'- ;.=.:~
-- ;:::::::.::

='---_.~

Abbildung 8. 16
Der Inhalt ist grundsätzlich wi chtiger als das DeSign, Der Weblog
von Steve Pavlina (http://www.
stevepavlina.com) überzeugt nicht
durch seine visuelle Erscheinung,
sondern durch seine Beit räge. Der
Autor z<lhlt zu den bekanntesten
BIoggern weltweit.

.6.

Nutzer sind ungeduldig I Bei der Websuche stellen Nutzer
einem Auftritt im Schnitt höchstens 8,6 Sekunden für den kompletten Ladevorgang zur Verfügung (Andrew B. King, ... Speed Up
Your Site«). Die Entscheidung, ob eine Seite nützlich genug ist
und entsprechende Informationen anbietet, fallt in den ersten
Sekunden des Seiten besuchs. Der erste Eindruck entsteht
dagegen in den ersten 500 Millisekunden und beeinflusst den
8.4 Verhal tensmuster der Benutzer

I

49 5

,
.. Abbildung 8 .27

Der ladevorgang des eleganten,
Flash-basierten Webauftritts
Mhq.nl kann unter Umst änden

eine Weile dauern. Ob der Nutzer
bereit ist zu warten, ist fraglich.

TIPP

Typische Heurlsliken für die Platzierung des Suchforrnulars und

der Seilennavigalion werden auf
den nachfolgenden Seiten detailliert erläutert.

-,--.....------.
_._ _ _ _ _ _. R

~:;:~~1~~

.. Abbi ldung 8.28
Wichtige Inhalte drucken Nutzer
aus . Eine PDF-Version und Drucklayouts sind deshalb nicht nur
Wichtig, sondern notwendig.

496

I

8

gesamten Eindru ck entscheidend (Michael Hopkin, ,.Web users
judge sites in the blink of an eye«, http://wWrN.nature.coml
news/2006/060109/juIII060109-13 .html, Linkcode 304).
Nutzer wollen also nicht warten. Die Informat ionen soUen
direkt erscheinen und sofort zugängli ch sein .
Ist eine unbekannte Seite schwer zu bedienen, so wird sie meist
direkt verlassen. Wird ein Beitrag zu einem gesuchten Thema
über eine interne Volltextsuche nicht gefunden, so wird die Seite
ebenfalls sofort verlassen. Sind Inhalte schwer zu scannen, oder
erhält der Nutzer mehrmals eine unverständliche Fehlermeldung,
so wird die Seite ebenfalls direkt verlas5en.
Das Schließen des Browser-Fensters ist dabei wie eine Art
Schutzreaktion auf auftretende Schwierigkeiten zu verstehen.
Dieser Trend gilt insbesondere für Onllne- Kaufhäuser: Lässt
sich ein Produkt nicht schnell genug finden, so wird es gar ni cht
gefunden, also wird es auch nicht verkauft. Deshalb sind ein auffallendes Suchfeld, ein leicht zerlegbares Seitenbild und eine klare
Seitennavigation besonders wichtig bei großen Onllne-Auftritten,
bei denen Nutzer eine Fülle von Informat ionen zur Verfügung
gestellt bekommen.
Nutzer druck en w i chti ge Inh alt e au s I Die Dynamik im Internet nehmen die meisten Seitenbesucher trotz ihrer Vorteile au ch
als eine ungün5tige Gegebenheit des Mediums wahr. Sie wissen
nämlich, dass wichtige Inhalte, die mühselig gefunden wurden,
im Netz dauerhaft verloren gehen können - etwa wenn die Seite
nicht mehr existiert .
Besonders wi cht ige Inhalte werden deshalb nicht nur im Netz
oder in lokalen Ordnern abgelegt, sondern auch direkt zum Heften ausgedruckt. Vor allem lange Beiträge oder Details eines Produkts sowie allgemein Inhalte von PDF-Dateien werden in der
Regel lieber schwarz auf weiß auf Papier gelesen ,
Bei einem Webauft ritt mit langen Texten i5t e5 deshalb aU5
Usability-Sicht erforderlich, Seitenbesuchern mi t hilfe von (SS ein
spezielles Drucklayout be reitzustellen, damit I nhalte aufbereitet
und für den Druck vorbereitet werden können , Ein besonderes
Augenmerk sollte in Printversionen auf die verwendeten Schriftarten, Schriftgrößen, die ausgeschriebenen Abkürzungen sowie
die Laufweite und den Zeilenabstand des Textes gelegt werden.
Auch die URL des Dokuments und enthaltene Links sollten als
Text hinter Verweisen angegeben werden. Siehe hierzu auch den
Artikel . Print ing t he Web: Solut ions and Techniques« (http://
www.smashingmagazine.com/ 200 7/ 02/ 2 7/ printi ng- the- websolutions-alld-techniques, Linkcode 305).

8arrierefreiheit und Usability

Nutzer treffen keine optimalen Ent scheidungen I Sowohl
beim Entwurf al5 auch bei der Um5etzung von Webprojekten
gehen Webde5igner in der Regel von zwei Annahmen aU5. Zum
einen wird vermutet, dass Nutzer bei ihrer SUche einen möglichst
schnellen Weg zum Ziel suchen. Zum anderen wird angenom men, das5 Nutzer eine Seite anhand vorliegender Hinweise linear,
al50 Sequenz für Sequenz, in ih re Komponenten zerlegen.

....

_-_ .....-

~ 5HOPPING

-----

---:::..
-,--

--

_··tI,.

----- _. 1--

"I!!!--001

.... _

I
Prmtlayouts
Printlayouts sind notwendig, da
der Seitenbetrelber sonst Gefahr
läuft, dass Teile der gedruckten
Beitr<l.ge abgeschnitten oder in
einer kaum lesbaren Form ausgedruckt werden, beispielsweise
weil die Schrift zu klein Ist .

• o;;n

--

· ......-.-e-ol ... _ _ _ _ _ _ • _ _

------

. ....... Ctnooni "-V _ _ c_ _ _ _ c -... _

~-

, '!e!1C1!!Mf _ _ ....... _

. ..... Ctnooni .. _

....

~.

.... _

,

--~

- . ..... r_

...

_.0.. ........ _

_...."" 0

l-OJI

.... Abbildung 8.29
Beide Bilder zeigen: Webseiten
werden nicht sequentiell gelesen.
Rech ts auf dem unteren Screensho t ist der sogenannte _scan
path .. dargestellt, also der Pfad,
den das Auge eines Nutzers au f
einer Seile zurücklegt.
8.4 Verhaltensmuster de r Benutzer

497

Seide Annahmen ervveisen si ch laut letzten Usability-Studien als
falsch. Die Nutzer interessieren sich überhaupt nicht für einen
opt imalen Weg zur Information. Nach den Untersuchungen des
. Usability-Gurus« Steve Krug entscheiden sich Anwender meistens nicht für die beste Option, sondern für die erste vernünftige
Option, die sie wahrnehmen (http://www.sensible.com/chapter.
htrnl, Linkcode 306).
Scheint ein Verweis eine Referenz au f gesuchte Inhalte darzustellen, so wird er direkt angeklickt. Sollte die Seite dennoch
(Sd isfidngJ

Un ter Satisfidng (sarls/ylng = befriedigend und sulfite =genügen)
versteht man eire Entscheidung;findung, bei der in einer Entscheidungssituation die erstbeste Möglichkei t, die den al'llest rebten
Zweck erfüllt , gewählt wird ,

nicht die richtige sein, wird zu rückgekehrt und weitergesucht.
Diese Suchst rategie wird in der Fachsprache satisfiäng genannt .
Zum anderen vertäuft der Scanvorgang meistens in einem
Zi ckzack-Rhythmus. Die Augenbewegungen erinnern dabei an
ein »F« (F-Shaped Pattern, http://www.ureit. comlalertboxlreading~attern . html,

Linkeode 307).
Dieses Schema variiert von einer Seite zur anderen, in Abhän-

gigkei t von der Motivation der Seitenbesucher. Wird etwa gezielt
nach einer E-MaH-Adresse auf einer Kontaktseite gesucht, so
werden Zeilen nacheinander durchstöbert. Die Seitenstruktur
auf unbekannten Websei ten wird dagegen nicht linear, sondern
mehr ode r weniger chaotisch abgetastet .

..t..

Abbildu ng 8.30

F-Muster au f einer . About Us«-Seite, einer Produktseite und einer
Googl e-Seite (Ou elle: http://www.useit.com!alert boxl readinB-pat tern.
htrn!, linkcode 30B). Beachten Sie, wie abrupt heiße Flächen auf dem
Bild bei der Hälfte der Satze aufhören. Das ist typisch fü r den Scanvorgang.

Dies heißt natürlich nicht, dass der Seitenbetreiber deshalb auf
eine logische Seiten hierarchie verzi chten sollte. Vielmehr heißt
498

I

8 Barrierefreiheit und Usability

I

es, dass sämtliche Verweise möglichst präzise formuliert und das
Thema des Beitrags andeuten soll ten. Deshalb sind sensat ionelle
Überschriften bei Webauftritten nicht immer nutzlich. Sie mögen
"N<Iar die Aufmerksamkeit auf sich lenken, bringen aber unproduktiven Traflic, da Seitenbesucher nach wenigen Sekunden die
Seite wieder verlassen.

Nutzer folgen ihrer Intuition I Bei der Suche vertrauen Seitenbesucher nicht so stark Hinweisen der Seitenbetreiber als vielmehr ihrer eigenen Intuition. Konsequenterweise stöbern sie Seiteninhal te hartnäckig durch, bis sie etwas Sinnvolles finden oder
ihre Geduld erschöpft ist.
Daraus ergibt si ch eine hohe Feh lerrate bei d er Navigation und
Suche von Inhalten. Häufig werden Rubriken gescannt, die mit
dem eigentlichen Thema nur indirekt etwas zu tun haben, während ein passender Seitenbereich wegen der Suchstrategie erst
später entdeckt und erforscht wird. Deshalb ist es für Sie besonders w i chtig, vernünft ige Fehlermeldungen bereitzustellen, in
denen genau erklärt wird, was passiert ist, und welche weiteren
Navigationsmöglichkeiten dem Besucher zur Verfügung stehen.
Eine ausfuhrliehe Übersi cht uber säm tlic he Seiteninhalte - gegebenenfalls mit einer begleitenden Kurzbeschreibung - sowie ein
Suchfeld sorgen für eine bessere Orien tierung und helfen, au ftretende Probleme schneller zu lösen.
Nutz er wo llen Kontrolle haben I Zu den oben genannten Verhaltensmustern kommt eine weitere Erscheinung hinzu.
Nutzer wollen respektiert werden. Sie wollen selbst entscheiden, wie sie mit Verweisen umgehen, und welche Inhalte sie sich
wie und wann anschauen - oder au ch nicht anschauen. Blinkende Meldungen und missverständliche Verweise werden diesem Wunsch nur schlecht gerecht. Alle Veränderungen der Seitenansicht, die ohne eine ausdrückliche Zustimmung des Nutzers
geschehen, rufen zumeist negative Reaktionen hervor. Sie sind
daher bei der Seitengestaltung unbedingt zu vermeiden.
Alle möglichen Aktionen müssen dem Nutzer somit voraussehbar erscheinen. Eine Webseite soll vor allem den Erwartungen
der Besucher gerecht werden. So darf zum Beispiel kein Verweis
au f eine Sei te fuhren, deren Inhalte mit ihrer Beschreibung nicht
übereinstimmen. Genauso darf kein link zu einem PDF-Dokument anstelle einer üblichen HTMl-Seite führen, es se i denn,
dies ist expliz it angegeben. Bei des kommt im Netz allerdings sehr
häufig vor.
Dies sind jedoch ni cht die einzigen Praktiken, die Nutzer als nervig, aufdringlich und lästig empfinden. Dazu gesellen sich Pop-ups,

HINWEIS

Indem Nutzer Silt/sficln8 als
Such strategie verwenden, lassen sie sich auf eine ineffiziente
Websuche ein. Daraus resultieren Fehler, die sich bei einem
genaueren Hinschauen und
Analysieren der Seite vermeiden
ließen.

TIPP

Deutliche Hinweise und klare
Hilfestellungen helfen enorm bei
der Suche nach Inhalten. Nur
darf man sie nicht in der Absicht
verwenden, Seitenbesucher zu
Zielseiten zu führen, mit denen
sie eigentlich nichts zu tun ha ben wollen.

8.4 Verhaltensmuster der Benutzer

I 499

Dead links, eine verwirrende Seitenn avigation, langsam ladende
Seiten sowie eine ineffiziente Seitensu che. Außerdem empfinden
es Nutzer als äußerst unangenehm, wenn sie sich für den Zugang
zu Seiteninha lten registrieren und anmelden sollen oder hierfür
gar eine spezielle Software installieren mü ssen (vgl. http://www.
hostwaycom/media/survey/petpeeves, html, Li nkcode 309).
Der Wunsch nach Kontrolle äußert sich auch im Phänomen
der Werbeblindheit (Banner Blindness). Da Nutzer beim Informationskonsum nicht abgelenkt o der gestört werden wollen,
beachten sie alles, was auch nur annähernd Werbung ähnelt,
überhaupt nicht Blinkende und bunte Sei tenelemente, die über
dem Logo, direkt darunter oder rechts vom Inhalt platZiert sind,
werden ignoriert.
In ttN U$, by

....

Htatorlul Trackin, of Banner Cllck-Ttlrou,h RatH
1.35'.4

"1IIiMttI ~ rlllr
, . ' In~ 1br/lUlt INI

1.1"-

•.""
.. Abbildung 8.31

Werbeblindheit ist keine neue
Erscheinung im Web, sondern
eine Weiterentwicklung der
bereits bestehenden Tendenz
(links). Meistens ignorieren
Nutzer Inhalte, die als Werbung
erscheinen. (Quelle: http ://
tagl iaerbe. blogspot com/2007/0 3/
banner-blindness,html, linkcode 310)

UBnnHHnnn~n
SOUtt,; HrI~ 2'000

Alle Aktionen, die den üblichen Leseftuss- also die gewöhn li che
Navigation von einer Seite zur anderen - stören oder unterbrechen, müssen somi t abgefangen werden. Bei jedem Verweis,
der eine Unterbrechung des Surfvorgangs erzwingt (sei es durch
das lange lad en eines Bildes, eines Flash- Fi lms oder einer MP3Datei), erwartet der Nutzer eine entsprechende und eindeutige
Mitteilung.

8.5
.. Abbi ldung 8.32
Eine klare und visuell ansprechende Navigationsleiste auf
Change.org
500

I

Usability-Heuristiken

Neben den bereits erwähnten Verhaltensmustern der Nutzer sollten in der Praxis auch sogenannte Usability-Heurist iken
berücksichtigt werden. Darunterversteht man Gewohnheiten der
Nutzer und Merkmale der Seiten , welche sich über mehrere Jahre

8 8arrierefreiheit und Usability

im Web etabliert haben. Sie gelten als ungeschriebene Regeln
im Webdesign und sollten grundsätzlich bei jeder Webseite stillschweigend umgesetzt werden .
Heuristiken dienen dazu. eine klare Orient ierung zu ermöglichen und Rahmenbedingungen für einen funktionierenden
Webauftritt zu schaffen. Auf den nachfolgenden Seiten finden
Sie eine Auflistung von 35 wesentlichen Heuristiken, die Sie in
jedem Ihrer Projekte als Mindestanforderung erfLilien sollten .
Sie gelten als Ergänzungen zu Konventionen, die auf den vorherigen Seiten erläutert wurden, und decken sich teilweise mit den
Accessibility- Regeln .

I
... Abbildung 8.]]
Benutzerfreundliche lesezeichen
werden auf Ndesign-studio.com
mit leons versehen.

"-

.

-

.-

... Abbildung 8.]4
Seitenbereiche werden durch
leons gekennzeichnet (Quelle:
Macrabbit,eom).

Plat zierung vo n Seit enelementen
.. Die Seiten navigation ist auffällig genug platziert, weist keine
Redundanzen auf und li efert eine deutliche Sei tengliederung.
Ähnliche Themen sind visuell gruppiert .
.. Sprachauswahl. log-in und Einkaufswagen befinden sich im
oberen Seltenbereich rechts.
.. Das logo der Seite befindet sich im linken oberen Randbereich jeder Seite und ist zur Startseite verlinkt .
.. Im unteren Seitenbereich befinden sich die wichtigsten Navigationsm6gUchkeiten der Seite. Dort finden die Besucher
auch eine Anbieterkennzeichnung, einen link auf die Startseite sowie einen Verweis auf die interne Suche .
... Ein Suchfeld befindet sich im oberen Seitenbereich rechts
oder im rechten Seitenbereich.
.. Die Seitennavigation befindet sich auf allen Seiten am sei ben
Platz und ist benachbart zum Seiteninhalt .

_

.._----_._--... Abbildung8 .]5
Die Sprachauswahlsowie das login befinden sich im rechten oberen
Sejtenbe~ieh (Nitram-nunea .com) .

... Abbildung8 .36
Auch der Warenkorb sollte sich
Immer im rechten oberen Selten be~jch befinden (http://discoapp.
eom) .

... Abbildung 8.]7
Sprachauswahl auf dem üblichen
Platz (Fluldbook.com)

8.5 Usability-Heurist iken

I

501

_'.................. ...
,

DISCOVER

Abbildu ng 8.38 ...

Ges ta lt ung de r Inhalte

Im unteren Seitenbereich werden
die wesentlichen Navigationsmöglichkeiten zusammengefasst
(PixeUogo.com)

..

..

..... _

"tl.I<!fil .... ~ ..

.. Abbildung 8.39

..
..

Nicht besuchte und besuchte
links. Verweise müssen sich von
begleitenden Inhalten unterscheiden - durch Ihre Farbe,
eine Unterstreichung oder beide
Effekte gemeinsam,

..
..
..
..

..

..

..
... Abbi ld un g 8 -40
Neue und aktualisierte Inhalte
werden markiert.
(Ndesign-studio,com)
502

8

~
~

Besuchte und unbesuchte Links sol lten unterschiedlich ausgezeichnet werden. Ausnahme stellen links in der Navigationsleiste dar.
Verweise werden farblich gekennzeichnet und (in der Regel)
unterstrichen. Text, der keinen Link darstellt, wird nicht unterstrichen. Die Unterstreichung ist vor allem dann notwendig,
wenn links als solche sonst nicht erkennbar sind (http://
meiert.comide/plJblica tion5larticies/20061208, linkcode 311),
Semantisch ähnliche Inhalte werden ähnlich gestaltet
Das Hervorheben wichtiger Elemente geschieh t durch die
Auszeichnung mit Fettdruck oder eine entsprechende Schriftgröße - nur selten mit Farbe und nur bei besonders wichtigen
Mitteilungen.
Neue und aktualisierte Inh alte werden markiert.
Illustrationen und Mini-Icom machen einen trockenen Beitrag lebendiger und anschaulicher.
Horizontale "Breadcrumbs« geben an, wo der Benutzer sich
gerade befindet.
Inhalte werden nicht verste ckt . Ein hoher Preis beispielsweise,
wie hoch er auch sein mag, soll stets direkt neben dem Produkt in einem Online-Shop angezeigt werden. Denn Nutzer
schätzen Ehrlichkeit und Seriosität.
Ankli ckbare Inha lte werden deutlich gekennzeichnet. Ein verkleinertes Bild in einem Fließtext soll anklickbar sein und zum
Original bild führen .
Als Überschrift der Weblog-Seite «title>-Tag) ist der Titel
des jeweiligen Beitrags zu wählen, gefolgt von einem Trennzeichen (etwa dem Pipe-Zeichen Il und dem Titel der gesamt en Seite .
Als Überschri ft einer Unternehmensseite wird der Name des
Unternehmens, gef olgt von einem Trennzeichen und einer
kurzen Beschreibung der Seite gewählt. Dieser Text erscheint
in den lesezeichen der Nutzer. Dagegen landet . Willkommen

Barrierefreiheit und usability

auf ... « in einer alphabetisch geordneten Favoritenliste im
W-Bereich der liste.
.. Taglines (auch Slogans genannt) werden benutzt , um den
Zweck einer Seite direkt zu vermitteln. Diese sind kurz und
deutlich zu wählen.
.. W erbung und Inhalte sind deutlich voneinander getrennt.
.. »Erkennen statt erinnern«: Alle Seitenelemente kommen
deutlich zum Ausdruck, sind gut zu lesen, leicht zu erkennen
und wiederzuerkennen.
.. Die »About«-Seite informiert Ober den Se itenbetreiber und
den Auftritt und stellt eine Kon taktmögli chkeit zur VerfOgung.
.. Ein Inhaltsverzeichnis der gesamten Webpräsenz wird auf
einer eigenen Seite angeboten und bildet die gesamte Seiten hierarchie detailliert ab.
Techni sches
.. Zur fe stlegung der Schriftgröße werden rela tive Angaben verwendet.
.. Die Webtypografie ist sorgfält ig durchdacht. Beiträge weisen
eine Hiera rch ie auf, Überschriften sind leicht von der Einleitung und dem Beitraa zu trennen - zum Beispiel durch eine
optimale Schriltgröße.
.. Eine breite Seitenh ie rarchie ist effektiver als tiefe Strukturen .
.. Verweise werden im selben Fenster geöffnet. Sie dürfen nicht
ohne Zustimmung der Nutzer in neuen Fenstern geöffnet
werden .
.. Verweise werden ausgeschrieben. Anstelle von ,. hier klicken«
wird etwa "Den Beit rag IUsability: What's next?t weiterlesen.« als Linktext verwendet.
.. Auf Frames w ird verzichtet, da sonst die Seiten nicht ausgedruckt werden können, Lesezeichen nicht auf direkten Inhalt
gesetzt werden können, die _Zurück«- und »Aktualisieren «Schaltftächen Pro bleme bereiten und zum Teil unzugänglich
sind.
.. Das visuelle »Rauschen« wird zwecks optimaler Lesbarkeit
reduziert. Weiß raum sorgt für eine bessere Wahrnehmung
der Information.
.. Es werden keine Splash-Screens, das heißt Eingangs- oder
Introseiten, verwendet. Inhalte werden direkt auf der Startseite angezeigt .
.. Horizontales SerolIen wird nicht eingesetzt. Eine besondere
Bedeutung kommt dabei dem typografischen Satz eines Textes
zu. Nutzer mögen zwar nicht scrollen, aber sie scrollen (ver-

I
---

CODA
11 ~_

"' !:!f!'!!.

<>-

.,z,. ~~

... Abbi ldung 8.41
Slogan: kurz, prägnant und bündig
(hIt p://www.panlc.com/coda)

:0=--

.. _ _

---_._--_._-_._-- ----'
~----,~­

~-

... Abbildung 8.42
Kurz und deutlich: die . About
usc-Selte auf Freshview.com

Deslgnlng 101' Content

•

•

_._--- '- _ .
g
-_-!'.!:"!".::.:":!".::.:..~._-- -

..
-_.
-_._--'-'-'...
_------_...-

-_

-~_

~---_.

_ _ _ .M

~-'-­
_ _ MO _ _

... Abbi ldung 8.43
Durchdachte Typografie ist der
Schlüssel zu einer erfolgreiche n
Präsentation. Garrett Dimon
beschränkt das Design seiner
Seite . GarrettDimon.com* auf die
Typografie .

8.5

Usability-Heuristiken

I

503

TIPP

Alternativ können Sie neben
dem link automatisch einen Verweis generieren lassen, der den
Wechsel zu einer Seite in einem
neuen Fens ter ermöglicht. Der
Benutzer soll selbst entscheiden
dürfen, wie die Verweise geöffnet werden . Häufig werden
Pop-ups benutzt, um den Seitenbesucher nicht zu verlieren
- dies ist aber nicht unbedingt
benutzerfreundlich .
Etwa 60 Prozen t der Nutzer verwenden die Zurück-Schaltfl.1che
im Bremser als primäres Mittel
zur Seitennavigation. Die Schaltfläche wird beim Offn en eines
Verweises in einem neuen Fenster dealetiviert.

..

tikaJ) lieber, an statt lange Texte in einer kleinen Scllriftt:röße
lesen zu müssen.
Links einer Seite verweisen nich t auf die Seite selbst. Ist dies

technisch schwer zu realisieren, so muss deutlich gemacht
werden, dass die Seite bereits besucht wurde.
.. Verweise auf Seiten, von denen man annehmen kann, dass sie
mehrmals angeschaut werden (.Kontakt«, .Startseite «, .Über
uns«) werden nicht als besucht ausgezeichnet.
..

Die Volitextsuche ist intelligent , multifunktional und kann

..

eventuelle Rechtschreibfeh ler korrigieren.
Recherchierte und innovative Bei träge werden mit Referenzen
ve~ehen,

damit Nutzer die Qualit ät der Information einschätzen und sich zum Thema weiter informieren können.

8.6

»Go Idene« Usabil ity- Richtlin ien

Benutzerfreundliches

Webdesign

muss

weder

bunt

noch

abwechslungsreich sein. Um Besucher zu Kunden zu machen und
Produkt e erfolgreich zu verkaufen, mü ssen Sie als Designer mehr
leisten. Die visuelle Darst ellu ng ist dabei nicht so wichtig wie die
Benutzerfreundli chkeit der Seite. Schließli ch geht es dem Seiten-

TIPP

Indem Sie den unten aufgeführten Richtlinien folgen, beugen Sie typischen Usabllity-Problemen effektiv vor und ~chaffen
eine solide Grundlage ru r eine
effektive und benutzerfreundliche Benutzerführung.

betreiber immer nur darum, die Au fmerksamkeit des Besuchers
auf das Angebot zu lenken. Der Seitenbesucher hat dagegen meistens etwas ganz anderes im Sinn, nämlich schnell zu den Informationen zu gelangen, ohne auf seinem Such weg unterbrochen
zu werden. Kann der Besucher diese Informati onen nicht finden,
so wird er die Seite nicht weiter benutzen - egal wie hervorragend sie aussieht.
Doch wie gena u gestaltet man eine Seite, damit sie benutzerfreundlich wird? Um diese Fr38e zu beantworten, betrachten Sie im Folgenden zehn Richtlinien fü r benu tzerfreundliches
Webdesign, die sich in der Praxis häufig als besond ers nützlich
und effektiv erwiesen haben. Manche der Rich t linien ergänzen
einander, einige stehen jedoch für verschiedene Aspekte, die
einzeln betont werden müssen. Beispiele für gute und schlechte
Lösungen sollen dabei die Regeln veranschaulichen.

1. Intuitives Design hat Vorrang

I Machen

Sie es fü r Ihre Seitenbesucher schwierig, Fehler auf Ihrer Seite zu machen. Vermeiden Sie unnötige Fragen und liefern Sie lieber Antworten. Die
meisten Besucher werden weder Zeit noch Lust haben, auf Fragen einzugehen.
Laut Steve Krug sollte eine Webseit e immer ve rständlich und
se lbsterklärend sein. Als Designer müssen Sie sicherstellen, dass
504

I

8

Barrierefreiheit und Usability

bei den Benutzern keine Fragen entstehen. Enthält etwa eine
Seit e in der Navigat ion einen Verweis zu .Job-O-Ramac, 50 ist
fü r die Besucher nich t dire kt klar, was da run ter zu verstehen ist.
Hier ist das schlichte .Jobsc besser, da es verständlicher und intuitiver ist. Nutzer dürfen nicht daz u gezwungen werden, über ihre
Entscheidungen nachzudenken.
Mit zunehmende r Komplexität des Designs tauchen mehr Fragen auf. Dadurch fäll t es einem Besucher schwerer zu verstehen ,
was erforderl ich ist, um von Seite A zu Seite B zu gelangen. Eine
klare Struktur, ein angemessener Einsatz visueller Hinwe ise und
klar erkennbare Verweise könn en Nutzer auf ihrem Suchweg zum
Ziel unterst utzen.
Ein interessantes Beispiel in diesem Zusammenhang ist etwa
Beyondis.co.uk (vg!. Abbildung 8 .44). Das Unternehmen behaupet, lIbeyond channels, beyond products, beyond distribut ion ..
zu sein. Doch, was heißt das eigent lich? Wofür soll das stehen?
Obwohl das Design rech t ansprechend ist , werden Nutzer
schon beim laden der Seite mit der Frage konfront iert, um was
es sich bei der obigen Aussage überhaupt handelt. Die Erklärung
fin d et man rech t s auf der Seit e. Um die Benutzerfreundlichkei t
zu steigern, wurde es gen ügen, die Platzie rung des Textes mi t der
Platzierung des Bildes zu vertauschen.
ExpressionEngine.com (vg!. Abbildung 8.45) hat eine ähnliche
St ruk tur, vermeidet aber unnöt ige Fragen. Außerdem wird der
linke Teil der Sei te benutzt, um Nutzer zum Testen der Software
zu animieren. Das ist effektiv.
Sie können Ihre Ideen effektiver kommuniz ieren, indem Sie
du rch eine geeignete Anordnung der Texte anschaulich machen,
inwiefern Nu tzer von Ihrer Idee profit ieren können.

I

.. Abbildung 8.44
Beyondis.co.uk

.. Abbildung 8 .45
Ex press ionE ngi ne. com

2. Die Geduld der Nutzer nicht auf die Probe stellen I Fordern
Sie von Ihren Besuchern so wen ig wie möglich. Dies gilt insbeson dere im Hinblick auf die Zeit, die vom Besucher zum Testen eines
Dienstes oder fü r die Informationsbeschaffung benöt igt wird.
Beijedem Projekt, in dem Sie Besuchern ein Produkt oder eine
Dienstleistung anbiet en, ist es vernünftig, die Anforderungen
an die Besucher so weit wie möglich zu reduzieren. Liefern Sie
Ihren potenz iellen Kunden eine einfache Möglichkeit , genauer
zu erfahren, welche Vorteile in einem Produkt stecken, ohne sie
vorher zu zwingen , lange Formulare ausz ufüllen. Stellen Sie die
Geduld der Besucher Ih rer Seite nicht auf die Probe. Ihre Besu cher werden Ihnen dankbar sein.
lau t Ryan Singer, dem renommier ten Senior-Developer aus
dem 37Signals-Team, ist es sinnvoller, Nutzer erst nach dem Testen
eines Dienstes um ihre E-Mail -Adresse zu bitten. Also erst dann,
8.6

_Goldene« Usabilit y-Richtlinien

I 505

wenn diese eine konkrete Vorstellung von dem Dienst haben und
besser wissen, ob er sie interessiert oder nicht.
Stikkit (www.stikkit.com) ist ein gu tes Beispiel fur ein benutzerfreundliches und effektives Anmeldeformular. Um den Dienst
in Anspruch zu nehmen, wird von den Nutzern kaum etwas
gefordert.
Mite (http://mite.yo.fk)ist ein wenig neugieriger. Nichtdesto·
trotz kann die Anmeldung in wenigen Sekunden geschehen. Ein
Scrollen nach unten ist nicht notwendig. Dies ist der Vorteil des
horizontalen layouts .
Im Idealfall entfernen Sie alle Hindernisse zum Testen Ihres
Dienstes. Fordern Sie nichts. was nich t notwendig ist. Faustregel:
Mit jedem zusätzlichen Feld in Ihrem Anmeldeformular verringern
Sie die Chance, den Benutzer für Ihren Dienst zu gewinnen.

--

-'On IIP Ior Idlckll

-

----_.-..J , _ _ ....... _

...

--.. - == ,

••

.-.,

.. Abbildung 8.46
Stikkit.com

1.

2.

3.

----- ---

_....

~

•..
"'",.
.. Abbildung 8.47
Mite.yoJk

_._-

_. .....
"'=,=-=.
----_
._-_....
._-------------------_.
------------ -",",,",",.

-----~

...._.0__._.
__ ....
__----_
._-

_..----._-~-

~--

.. Abbi ldung 8.48
Humanlzed .com

3. Die Aufmerksamkeit auf das Wesentliche lenken I Weni·
ger ist häufig mehr. Gestalten Sie Ihre Seite so, dass nur wenige.
gezielt ausgewählte El emente um die Aufmerksamkeit der Besucher kämpfen. Dies kann beispielsweise durch den Gebrau ch
weniger Farben geschehen .
Damit die Botschaft einer Seite erfolgreich ubermittelt wird,
müssen bestimmte Designelemente stärker zur Gel tung kommen
und deshalb mehr Aufmerksamkeit auf sich lenken, als dies bei
anderen Elementen der Fall ist . Zu diesem Zweck können unter
anderem Bilder und fett ausgezeichnete Wörter genut zt werden.
Dabei sollten Sie beachten: Kämpfen zu viele Designelemente
um die Aufmerksamkeit des Besuchers, so kann die Seite den
Besucher schnell überfordern. Die Navigation erscheint dann
schwierig und mühselig. Stattdessen ist es besser. eine einzige
Botschaft zu wählen. diese auf der Seit e jed och zu betonen.
Humanized.com gelingt es, die Aufmerksamkeit der Nutzer
direkt auf das Wesentliche zu lenken. Das einzige Designelement,
das direkt erkennbar ist und sofort auffällt, ist das Wort »free« .
Dieses spricht Besucher direkt an, ist informativ und wirkt attraktiv, ohne dass ein buntes Bild eventuell für Unruhe auf der Sei te
sorgt.

4. Designelemente übersichtlich gestalten

I Eine

übersichtliche Gestaltung kann vor allem durch einen großzugigen Einsatz
von Weißraum und eine deutliche, strikte Trennung der verschiedenen Seitenbereiche erreicht werden. Je weniger Designelemente präsent iert werden. desto übersichtlicher wird die Sei ten·
strukt ur.
In den letzten Jahren setzen immer mehr Designer auf auffällige und bunte Designelemente wie etwa übermäßig große
506

I

8

8arrierefreiheit und Usability

I

Schaltflächen, eine riesige Sch riftgröße sowie eine Step · By~Step ,
Navigat ion (etwa "1, 2, 3, done!.). Und aus Sicht der Usability
sind diese Elemente auch gar nich t so sch lech t, w ie sie häu fig
dargestellt werden. Im Gegenteil: Sie b ringen direkt zum Aus~
druck, was Nutzer auf der Seite t un können und wie sie dabei
vorgehen müssen.
Dibu5oft. com hat lediglich neun Verweise, die alle für ver~
schiedene Rubriken stehen und so den Besucher direkt übe r die
Navigationsmöglichkei ten informieren. Übersicht liche Gestaltung ist das fundamentale Prinzip eines jeden erfolgreichen User
Int erface Designs. Es ist unwichtig, wie dies genau erreicht wird.
Viel wichtiger ist , dass die Hierarchie der Seite leich t zu ve rstehen ist und Nutzer auf der Seite beinahe unbewusst navigieren
können. Ein einfaches, übersichtliches Design kann genau das
ermöglichen.
5. Klar schreiben I Reden Sie Klartext. Liefern Sie Informationen,
und ZONar kurz und bündig. Langatmige Passagen werden mei stens nach Schlüsselwörtern gescannt. Indem Sie Inh alte präzise
fassen, ersparen Sie Ihren potenziellen Kunden unnöt ige Arbeit.
Da Online- Inhalte meistens nach Schüsselwörtern abgesuch t
werden, ist es vorteilhaft, einen Schreibstil zu verwenden, der
den Scanvorgang zum einen erleich tert und zum anderen wich tige I nhal te in den Vordergrund stellt. Promotion-Te:x te werden
nicht gelesen. Längere Te:x tblöcke ohne Bilder und ohne markierte Schlüsselwörter werden überflogen. Eine abgehobene
Sprache wird ignoriert. Kommen Sie daher direkt zur Sache. Ver·
meiden Sie Beschönigungen, clevere Marketing~Slogans, zu spezielle Begriffe un d eher unbekannt e t echnische Details. Alles, was
nicht verstanden wird oder nach Werbung aussieh t, kann einen
potenziellen Kunden abschrecken.
Eleven2.com kommt direkt auf den Punkt. Keine raffinierten
Slogans, keine überflüssigen Informat ionen. Stattdessen nur ein
Preis: Genau das, weswegen die meisten Besucher auf die Seite
gekommen sind.
Benutzen Sie kurze und prägnante Aussagen - je genauer,
desto besser. Bringen Sie eine Hierarchie in Ihre Inhalte. Verwenden Sie eine einfache und objektive Sprache. Die Beschreibung
Ihres Dienstes muss nicht wie Werbung klingen. Liefern Sie Ihren
Besuchern einen guten Grund, warum diese Ih ren Dienst nutzen
oder auf Ihrer Seite bleiben sollen. Je deut licher und klarer Sie
Inhalte vermi tteln, dest o leichter wird es dem Besucher fallen,
Ihnen zu folge n und Vertra uen zu Ihrer Firma zu entwickeln.

8.6

•

••
.. Abbildung 8.49
Dibusoft.com vereinigt ein visuell
ansprechendes Design mit einer
übel"5ichtlichen Seitenst ruktur.

.. Abbildung 8 . 50
Eleven2.com

"Goldene« Usability-Richtlinien

I

5 07

6. Einfache An sä t ze vorzi ehen I Einfache Designs zu realisieren, ist keine einfache Angelegenheit. Grundsätzlich ist es immer
sinnvoll, komplexe Bausteine einer Präsenz modular aufzubauen
und getrennt anzubieten.
Das Prinzip " keep it simple« sollte das primäre Ziel eines jeden
Webdesigns sein. Nur selten , wenn überhaupt, kommen Seitenbesucher auf eine Seite, um sich die schönen Details eines
gelungenen Designs anzuschauen. Gefragt sind Inha lte, die nach
Möglichkeit direkt und verständlich dargestellt sind. In diesem
Zusammenhang ist es sinnvoller, einfache lösungen anstelle von
komplexen Ansätzen anzubieten - auch dann, wenn die komplexeren Ansätze deutlich mehr Funktionen zur Verfugung stellen.
Bei einfachen Ansätzen wird es Ihnen auch einfacher fallen , die
Seite später zu pflegen und zu erweitern .
Die Sei te (rebus (http://ac,mattiaviviani,com) bietet Besuchern ein sauberes und einfaches Design. Es mag nicht klar sein,
was die einzelnen Beschriftungen bedeuten (sie sind nämlich in
italienischer Sprache), doch die Se itenstruktur mit Navigation,
Header, Inhaltsbereich und Footer lässt sich unmittelbar erkennen. Selbst die Icom sind informat iv und sofort verständlich.
Wird mit der Maus darubergefah ren, so zeigen sich zusä tzli che
Informationen.

7. Wei ßraum effektiv ein setzen

.... Abbi ldung 8. 5'
http://erc. matti aVivian i. (om

a".,,,,,••. ...,",..........
........
---------..._-----------

_._----,.__._---_._-----------------'-'--'--------_. ----_.- ..

.... Abbildung 8.52
Cameron.io

508

I

I Ausgeglichene

Weißräume
verbessern die lesbarkeit und erzeugen einen unsichtbaren lesefluss auf den Webse iten.
Wenn ein Seiten besucher auf ein bisher unbekanntes Sei tenlayout stößt, versucht er in der Regel, die Sei te in kleine Blöcke
aufzu teilen, um unw ichtige Inhal te herauszufiltern und die Navigation auf der Seite zu verstehen. Die Bedeutung von Weißraum
ist hierbei nicht zu unterschätzen. Weißraum macht es für die
Besucher uberhaupt erst möglich, die präsentierten In halte wahrzunehmen.
Komplexe Strukturen sind schwer zu lesen, mühselig zu analysieren und unangenehm zu benutzen. Hierarc hische St rukturen
dagegen verringern im Allgemeinen die Komplexität. Je besser
es Ihnen gelingt, eine klare Hierarchie in Ihr layout und in Ihre
Inhalte zu bringen, desto leichter wird es Besuchern fallen, den
Inhalt wahrzunehmen.
Die Sei te (ameron .io benutzt Weißraum als primäres Designelement. Das Ergebnis ist ein ubersichtli ches layout, das dem
Inhalt eine dominierende St ellung auf der Se ite gibt und leicht
wahrzunehmen ist .

8 8arrierefreiheit und Usability

I

8. Mit eine r ,.sichtbaren Sprache.. kommunizieren I in seiner
Studie hat Aaron Marcus drei fundamentale Prinzi pien (ur intelli-

gentes Design 2 aufgestellt . Diese beziehen sich auf die sogenann te
_sichtbare Sprache« -Inhalte, die Nutzern angeboten werden.
.. Organize: Bieten Sie Nutzern klare und komistente St ruk turen
an. Ein einheit liches Layout, klare Beziehungen zwischen den
Designelementen und eine einfache Navigation sind dabei

wichtig. Wichtige Konventionen und Regeln sollten nach
Möglichkei t für alle Designelemente gelten.
.. Economize: Versuchen Sie, möglichst viel m it möglichst wen igen Mitteln (wie zum Beispiel Verweisen, Text blöcken und
Bildern) auszudrü cken . Beschränken Sie sich auf Elemente,
die besonders wichtig sind und nicht missverstanden werden
können .
.. Co mmunicat e: Um erfolgreich zu sein , muss eine Benutzeroberfl äche die Sprache der Benutzer »sprechentl. Inhalte
müssen lesbar und verständlich sein. Verwenden Sie dabe i nie
mehr als drei Schriftarten in mehr als drei Schriftgrößen - mi t
höchstens 1 B Wört ern und 50 bis BO Zeichen pro Zeile.

9. Konventionen beachten

I Werden die

Erwartungen der Nutzer erfüllt oder gar übertroffen, so ist die Grundlage für eine gute
Ben utzererfahrung (User Experience) vorhanden.
Ind em Sie Konventionen folgen, verschaffen Sie den Besu-

chern leicht erkennbare und verständ liche St ruktu ren. mit denen
diese schnell und einfach zurechtkommen. Noch w ichtiger ist:
Mi t Konvent ionen können Nutzer Vertrauen zur Seite entwickeln, da diese durch ein »soli destl Design Glaubwürdigkei t vermittelt. Erfüllen Sie die Erwartungen der Besucher im Hinblick auf
die Seitennavigation, die Platzierung der Such box und Ähnliches.
Falls Konventi onen rich tig verwendet werden. wird ei ne einfa che
Aufgabe, wie das Finden eines Kon taktformu lars, für die mei sten
Nutzer kein Problem darstellen.

10. Testen, t est en, t es t en

I Ausführli che Usability-Tests werden

bei kleinen und m ittelgroßen Projekten gern als eine opti onale
Maßnahme betrachtet. Diese Tests werden erst zu Begin n der
Implementierung durchgeführt und sollen kleine Fehler in der
Programmierung beheben. In der Praxis ist dieser Ansatz schlicht
und einfach falsch. Um ein effektives Design zu erreichen. sind
umfassende Usability-Tests, die das ganze Projekt begleiten.
unvermeidli ch. Dabei sollten Sie das Pri nzip »test early, test
often . (TETO) befolgen . Sie sollten nicht zu spät. nicht zu wenig
2 _Effecuve V1sual Communlcatlon for uaphical User Inttrlaces_
http://web.cs . wpl.edu/%7Emartl.OUf~vcs561/tdlh/WJi!ftJnlin t_deslgn. html

8.6

_Goldene. Usability-Rlcht linien

I

509

und nicht zu falschen Zwecken testen. laut Steve Krug steigert
ein Usability-Test mit einem Test er die Effektivität der Seit e um
100 Prozent. Je später ein Test durchgeführt wird. desto höher
werden die Kosten sein, um auftretende Probleme noch rechtzeit ig zu lösen.
Testen ist ein iterat iver Prozess. Das bedeutet, dass die Entwicklung eines Designs nach dem Schema lO Entwerfen-TestenReparieren« erfolgen sol lte. Nach jeder Korrekt ur müssen die
Tests erneut durchgeführt werden, denn es kann Probleme geben,
die bei einem ersten Test nicht gesehen wurden.
laut Geral d W einberg3 sollt en Entwickler nicht am Testen
ihres eigenen Quellcodes teilnehmen. Di esgil t auch tur Designer.
Nachdem Sie mehrere Wochen am Entw urf des Designs gearbeitet haben, sind Sie einfach nich t mehr in der l age, einen frischen
Blick darauf zu werfen. Sie wissen genau, wie das layout aufgebaut ist und w i e es funk tionieren soll . Daher verfügen Sie über
ein W issen, das ein unabhängiger Tester und Besucher der Sei te
nie haben könnte. Fazit: Wer eine effektive Website haben will,
m uss testen.

8.7

Barrierefreiheit und
Benutzerfreundlichkeit testen

HINWEIS

Usability- und AccessibilityProblemen rechtze itig vorzubeugen, verringert den Zeitaufwand
und die Kosten und schafft eine
Grundlage für zukunftsorientierte Webseiten,

-_.
-. --_._---"

--

::...-:--=-"'=""'-~..:;.-=--::=:.

::;;..":.;'"..=.::;:-~.- ...
=:::.-..:--~._--

-

-__......_... _-_ . - .
~-_._----~_._~-

.. Abbildung 8.53
Color Check (http://www.etre.
com/tools) analysiert Differenzen
zwischen Farben und weist auf
eventuelle Probleme mit dem
Kontrast hin.
510

I

Je spä ter Usability- bzw. A ccessibility-Aspekte im Designprozess berücksichtigt werden, desto mehr Probleme tauchen bei
der Umsetzung auf, und desto kostspieliger wird der gesamte
Weba uft ri tt . Sowohl Barrierefreiheit als auch Benutzerfreundlichkeit sind das Fundament einer d urchdachten Webimplemen t ierung: Sie setzen Rahmenbedingungen für alle Seitenelemente,
die in einer Intern et prasenz en t halten sein sollen.
Um zukün ftige Probleme möglichst früh zu erkennen, soll ten
Seitenbetreiber ihre Seit e perman ent von den Besuchern t esten
lassen. Die Benutzertests laufen dabei entweder automat isch
m ithilfe geeigneter Diens te oder manue ll Ober die direkte Beobachtung des Besucherverhaltens.
Barrieref reih eit- Check I Bei der Untersuch ung eine r Seit e in
Hinblick auf ihre Zugänglichkeit lassen sich mehrere Werkzeuge
zu Rate ziehen, die Sie manuell ohne zusätzliche Tests ausprobie3 Gefdld Wei nberg ist ein belc:annter amerikanischer Psychologe. der sich unter
anderem mit dem Thema _Anthropologie der Softwil'e.Entwicklung« beschäftigt. Das Zitat stammt aus seinem bekannten &Jch _The psychology of
computer pmgramming«.

8 Barrierefreihei t un d Usability

ren können. Ein umfangreicher Benutzertest ist dabei meistens
nicht notwendig, da im Barrierefreiheit-Check bloß dafür gesorgt
werden soll, dass alle notwendigen Optionen und Funktionen
(im Hinblick auf die Barrierefreiheit) vorhanden sind .
.. Co/aur Blindness Simulator simuliert Farbenblindheit und

..

..

..

..

..

..
..
..

zeigt, wie Nutzer mit dieser Sehschwäche eine Seite wahrnehmen. Co/aur Check analysiert Di fferenzen zwischen Farben
und informiert, ob ein Farbschema laut der gesetzlich vorgeschriebenen Spezifikationen einen genügend hohen Kontrast
aufweist. Accessibihty Check testet, ob eine Seite alle Anforderungen und Richtlinien barrierefreien Webdesigns erfüllt.
Alle drei Toofs finden Sie auf: http://www.f!tre.com/ tools/
(Unkeode 312)
Web Developer Extension ist eine nützliche Erweiterung für
Mozilla Firefo)(, mit der sich Webseiten .live_ modifizieren und anpassen lassen. Unter den verfügbaren Optionen
enthält die Erweiterung ein Dutzend Acce-ssibility-Prüfer zu
allen Richtlinien der Barrierefreiheit. Sie lassen sich direkt im
Browser ausfüh ren .
http://www . webaim. org/arti cle vevalu a tingwithfirefox (Un kcode 313), http://chrispederick.com/work/webdeveloper (Un kcode 31 4)
GrayBit zeigt die Farben einer Seite In Graustufungen
an. Somit lassen sich etwa Seitenbereiche entdecken,
die wegen der Intensität einer Farbe besonders betont
werden, und Kontraste dementsprechend anpassen.
http://graybit.com (Unkcode 315)
TAW3 überprüft Webseiten auf ihre Zuganglichkelt und stellt
Probleme direkt visuell dar - mit Erkl ärungen und Lösungshinweisen.
http://www.tawdis.netltaw3/cmven (Unkeode 316)
UlTest.com Site Check ermöglicht eine schnelle Überprüfung
von Selten In mehreren Accessibllity-Checks. Die Seite enthält
auch weitere Referenzen zu unte rschiedlichen Check-Tools.
http://ultest.com/enlcheck(Unkcode 317)
Weitere Dienste findet man im Web Developer's Handbook:
Accessibifity Checkers auf:
http://www.aIVlt.de/handbook/#acceSSibifitycheckers (Unkcode 318)
Der HTMl-Validator des W3C
http://va/ida tor. w 3. org
Der CSS-Validator des W3C
http://jigsaw. w 3. org/css- validat or
Der HTMl-Validator von SElFHTMl
http://valida tor. df!.s elfotm I.org
8.7

I
"1 .... c... .

- ---,"'"

"-. __ -----_.---------...---- ._---~--~--~

.

• _ _ _ _ _ _M

.-

::;-.;:.~::

... Abbildung 8.54
Der UITest Site Check (httpJI
ultest.comlenlcheck) von Jens
Melert ermöglicht eine schnelle
Überprüfung einer Seite im Hinblick auf mögliche AccessibilityProbleme.

,-_._------ ----._
. -- ...-_-

_._~ -

--...

..

-

::.~----- ~ --

... Abbildung 8.55
Der HTMl-Validator des W3CKonsortiums (htlpJlvalidttor.

W3 .Ofg)

---._._~-

-

~:=:=:r"5fä.1:~=~::"-.
:r;-:~~=-~.:=~

:C"=t:'!=.=--=--... Abbildung 8.56

Der HTMlIXHTMlM'ML/XMlValida tor von SelfHTMl (h ttp JI
validator.de.selfhtml.olg) kann
nkht nur validieren, sondern auch
semantische Analysen durchführen.

Barrierefreiheit und Benutzerfreundlichkeil testen

I

511

I

fOhrt eine komplette logische und semantische Analyse der
Seit e durch. Dadurch werden komplexe Fehler ent deckt, wie

Usability-Check

Im Unterschied zur Zugänglichkeit einer Seite kann die Benutzerfreundlichkeit nicht automatisch geprüft werden. Hier spielt
der Faktor Mensch die entscheIdende Rolle.

..

etwa das Au ftreten eines Tags in einem falschen Kon tex t.
Dead link Checker
http://validator.w3.orglchecklink (Linkeode 319)

..

link Checking Software

http:// home.snafu.de/tilmanixenulink.htm/(Linkcode 320)
Bei der Untersuchung der BenutzerfreundUchkeit kann man sich
prinzipiell nicht auf externe Tools oder Dienste ve rlassen, da die
BenutzerfreundUchkeit 5ehr 5tark durch P5ychologie und Intu itio n beeinflusst wi rd. Entscheidungen werden nich t gemäß einem
best immten Schema get roffen, sondern aufgrund von Gewohnheit en, Emotionen und Vermu tungen gefallt. Aus diesem Grunde
la ssen sich Usability-Tests vor der Implement ierungsph ase kaum
ve rmeiden.

Usability-Tes ts

Bei der Durchfuhrung von
Usability-Tests darf sich der Beobachter unter keinen Umständen in die Interaktion der Anwender einmischen.

Vorgehensweise bei Usability-Tests I Alle Usability-Tests basieren auf einem grundlegenden Prinzip, mit dem sich präzise
Ergebnisse überhaupt erst erzielen lassen: Ein Beobacht er darf
sich unter kei nen Umständen in die In t erakt ion der Nu tze r einmischen. Kommentare und Hinweise gehören nicht in den Test.
Vorden Tests macht es Sinn, genau festzulegen, welche Aspekte

näher untersucht werden sollen. Zu diesem Zweck lassen sich
Dummy -Layout

sowohl allgemeine als auch detailliert e Fragen aussuchen, wobei

Ein sogenanntes Dummy-Layout
wird schlicht gestaltet und
während des Tests allmählich
erweitert, um eine optimale Darstellung zu erreichen .

die jeweiligen Antworten im Inhalt der Sei ten zu finden sein sollen. So ist es beispielsweise bedeutend zu wissen, ob besonders
w ichtige Rubriken (Produkte, Dienste, Kontakt) schnell gefunden
werden. Ebenso ist wichtig zu erfahren, ob die Nutzer auf Vorteile der Angebote eingehen und im Text hinreichend gu t navigieren können.

Teilnt'hmer auswah len

Keiner der Teilnehmer an den
Tests darf am Entwurf des Projekts beteiligt sein .

TIPP

Mit kleineren Usabllity-Tests
können Feinheiten und Details
genauer unter die lupe genommen und ihre Wirkung untersucht werden. Die kleinsten
Deta ils sind häufig entscheidend
für den ersten Eindruck der Seitenbesucher.

512

I

In der Designphase wird ein Dummy-layou t erzeugt, das dem
Designentwurf en tspricht und die Basisfunkt ionalit ät sowie die
wich t igsten Inha lte en t hält . Es ist empfehlenswert, mit einem
einfac hen layout anzufangen und dieses allmählich mi t aUen
geplanten Funktionen und Bereichen zu erweitern.
Stehen die Fragen fest , so können fünf bis zehn Nutzer für
kleine Tests ausgesucht werden. Sie werden repräsen t ativ entspreche nd der Zielgruppe des Webauftri tts gewähl t . Dies können
Verwandte, Freunde, Bekannte oder auch Unbekannte sein, die
m it dem Projekt nichts zu tun haben.
Anschließend werden (gleiche) Aufgaben an die Nutzer verteil t und diese im Einzelnen bei ihren In teraktionen beobach tet.
Dabei ist vor allem zu beachten,

8 Barrierefreiheit und Usability

.. was Nutzer als Erstes machen (Eine Vergrößerung der Schriftgröße weist z. B. auf eine schlechte Lesbarkeit hin.),
.. was sie generell machen (Klicks auf Bereiche, die nicht
ankhckbar sind),
.. wie sie auf die Seite reagieren (Sind sie irritiert oder zufrie·
den?),
.. in welchen Bereichen sie gut zurechtkommen und schnell
zum Ziel gelange n,
.. zwischen welchen Bereichen sie bei der Suche nach Information immer w ieder wechseln (Dies wäre ein Zeichen dafür,
dass die Beschriftungen der Seiten bereiche sich nicht deutlich
genug vo neinander unterscheiden.).
Möchte der Seitenbetreiber genauer wissen, wie seine Sei te im
Vergleich zu Mitbewerbern abschneidet , so können Nutzer auch
darum gebeten werden, ähnliche Aufgaben auf ähnlichen Sei ten
der Konku rrenz zu lösen. Die Qualität einer Se ite lässt sich dann
durch einen Vergleich der Ergebnisse (etwa anhand der Fehlerrate) feststellen.
Laut Experten ist es effektiver, mehrere kleine Usability-Tests
durchzuführen, anstatt in eine große, kostspielige Studie zu investieren. Nach jedem kleinen Test kann ein Designentwurf entsprechend überarbeitet werden. Dieses Prinzip des ,.iterati ven
Designs« ist die optimale Vorgehensweise, um Usability-Fehler und die dadurch verursachten Probleme zu entdecken. Ein
abschließender Usability-Test nach der Implementierungsphase
kann letz te Fehler aufdecken.
Alternative Methoden I Einezunächst verblüffend erscheinende
Variante ist, sich eine Sei te in einer fremden Sprache anzusehen.
Etwa auf Chinesisch, sofern Ihre Testgruppe Chinesisch nicht
beherrsch t. Da fü r können Sie einen beliebigen Online-Übersetzer verwenden, zum Beispiel Goog/e Trans/ate (http://translate.
googll:.com/ trans/ate_t, linkcode 321) oder Altavi5ta Babelfish
(http://world.altavista.com. Linkeode 322).
Inwiefern macht dies Sinn? Es ist wichtig, dass ein Nutzer sich
intui tiv auf einer Sei te zurechtfindet, etwa weil die Seitenstruktur
ihm bekannt vorkomm t und gewisse Elemente deutlich gen ug
präsentiert werden. Gelingt dies in einer fremden Sprache, so
spricht dies für die visuelle Kommunikation der Sei te. Darüber
hinaus können auch einschlägige Analysedienste verwendet werden. Damit werden Nutzer indirekt in die Usability-Tests einbezogen. Moderne Monitoring-Werkzeuge können das Ve rhalten
bzw. die Bewegung des Mauszeigers auffangen, abspeichern und
dem Seitenbet reiber in Form von On/ine-Tapes oder Heatmaps
81

I
Abschließende Tests
Ein Test nach der Fertigstellung
der Seite kann Fehler der Implementierung beheben .

Schriftgroße
Eine Seite , deren Schrift überm<l.ßig groß iSt, können ältere Nutzer optimal nutzen. Für junge
leute ist sie dagegen nicht _mo_
bil_ genug, da wenige Inhalte
zu viel Platz nehmen und nur
schwer zu scannen sind.

Kann sich ein Anwender auch
ohne Sprachkenntnisse, also
intuitiv, auf der Seite zurech tfi nden , so ist dies ein Zeichen fO r
eine erfolgreiche visuelle Kom munikation .

-

=
- --.
,

- . ...
""', '..-'

;;.; ,

r.;;-

~ a~

u
r.-

;-

'<

.

~

-~

..... ~

-F~

,-,--

... A bbildung 8.57
Google Translate im Einsatz :
Amazon.com auf Russisch.

8arrierefreiheit und Benuuerfreundlichkeit testen

I 513

•

-A

Abbildung 8.58

Google Analyti(S (http ://www.

google.com/analy lics), der Mei-

ster der Analysedienste. Das
kostenlose Toolliefert ausführliche Berichte über die 5eitenbe-

sucher, kann jedoch weder Healmaps noch Tapes erzeugen.

.t..

Abbildung 8.59

Woopra ist bunt und umfangre ich, Unter anderem werden

Referrer·, Suchbegriffe und
Phrasen, Llnder, Top-Pages,
Einstiegs- und Auss tiegsseilen,

Betriebssysteme, Browser und
Besuchsdauer angezeigt. Die
integrierte Welt karte is t in einer
Voflbilddars teUung zu haben und
ist sogar zoom bar.

präsent ieren. Dadu rch kann man Präferenzen der Nutzer auf der
Seite beobachten.
Unter anderem können folgende Dienste auss<l8e kräftige
Ergebnisse liefern:
.. Google Analytics
Bietet ein enormes Arsenal an Maßstäben, an denen die
Funkt ionalität Ihrer Seiten gemessen werden kann. Mausbewegungen werden nicht gespeichert, dafür wird das Verhalten der Nutzer sehr detailliert stat istisch erfasst. Auch
After/Before-Tests, Navigationsanalysen zur Länge und Tiefe
der Besuche sowie Marketing-Tools si nd frei ve rfügbar.
http://www.google.com/ analytics (Linkcode 323)
... Woopra Real-Time Analytics
Woopra ist ein Dienst, der Statistik und Echtzeit-U pdates
unter einer Benutz eroberfläche vereint und sehr detaillierte
Berichte über die Besucher generiert. Woopra ist eine JavaAnwendung, läuft auf dem Desktop und benötigt deshalb
eine Java-Umgebung.
http://www.woopra .com (Unkcode 324)
... Clicktracks Appetizer
Bietet Visi tor Labeling, Campaign Reports, Pay-Per-Click
Reports und NB-Tests. Außerdem berichtet der Dienst über
die Conversation Rate. Die Basi c-Version ist kostenlos.
(http://www.dicktracks.com/produäs/ appetizer (Unkcode 325).
... Crazy Egg
Sammelt Klicks der Benutzer und bereit et diese in Form
einer sogenannten »Heatmap« auf. Aktive Inhal te werden rot gefärbt, kaum angeklickte werden dagegen nicht
gefärbt . Daraus kann man das Verhalten der Nutzer ableiten und näher studieren . Die Free-Version ist kostenlos.
http://www.crazyegg. com(Linkcode 326)

Abbildung 8.60 •

Mit Crazy Egg (crazyegg.com)
kOnnen Sie direkt beobachten,

welche Inhalte Seitenbesucher
am liebsten lesen. Je häufiger
Seiten besucher auf einen Verweis
geklickt haben , desto _wär mer.
wird der jev..eilige Seitenbereich.

4 Als Referrer wird die Adresse derjenigen Webseite bezeichnet, von der ein
Benutzer durch einen Unk zur ak tuellen Webseite gel angt ist .

514

I

8

Barrierefreiheit und Usability

I

.. Opencube Mouse tre nds
Dies ist ei n JavaSeript, das die Mausbewegungen der Nutzer

abspeichert und abspielen läss t.
http://www.opencube.comlmaus etrends/setup_wizard.html

(linkeode 327)
Wei tere Dienst e finden Sie in den Beit ragen :oComplet e Guide

to Web Analyt ics

50luti on5:

2007

Edit ion",

(http://www.

conversionr ater. (om/index. php/2007/03/1 O/complete~ CUide - to web-analytics-solutions-2007-edition, Linkeode 328) und ,.B uzz·
Monit oring: Observing and Tracki nge (http://www.smashingma-

gaz; ne. (0/11/2006/11/2 4/ b Ull-rn on it oring- obs erv; ng- un d- t rac king,
Linkeode 329).

8.8

Ressourcen

Das Verhalt en der Nutzer wird durch moderne Dienste perma nent verändert . Dies führt wiederum zur Veränderung von Konvent ionen, die im Netz seit Jahren als Standards gal ten.

8 .8 .1

Online-Artike l

... Web Design References : Accessibility
Eine umfangreiche Sammlung von Ressourcen zu m The ma
_Barrierefreiheit •. Wi rd ständig akt ual isiert.
http://wwvv. d. u mn. edu/; tss! su pport/Traini ne!Onl; nel
webdeSign/accesSibility.html (Unkcode 330)
...

Accessibility Resources
Eine weit ere Sam m lung von Referenz en zum Thema

http://wwvv.hCibib.org/accessibility(Linkcode 331 )
... Mark Pilgrim : _ Dive in to Accessjbility, 30 days to a more

accessible web-site.
In seinem Online-Buch beschreibt Mi ke Cherim, warum
Barriere freiheit wich tig ist und wie zugängliche Seit en in der
Praxis entwickelt werden.
http://diveintoac cessibili ty. org(Unkcode 332)
... Joe Cl ark: _Buitdung Accessible Websites«
Ein Standardwerk über ba rrierefreies Webdesign. Es beleuchtet detailliert sämtliche Aspe kte de r Barrierefreiheit mit
Beispielen und praktischen Anlei tungen für eine zugängliche
Seitengestaltung. Es ist online kostenlos verfügbar.
http://joeclark.org,lbook/sashay/serializaOoll (Unkcode 333)

8.8

Ressourcen

I

515

..

,. Einfach für Alle, Aktion Mensch-Initiative fOr ein barrierefreies Web«
Das größte deu tKhsprachige Internet-Portal zum Thema Barrierejreiheit. Wird täglich akt ualisiert und bietet eine Menge
Material zum Nachlesen und Studieren .
http://www.einjach-juer-alle.de (Linkcode 334)
.. Drweb.de: lO Accessibility - Zuganglichkeit<o:
Aktuelle und Beiträge zum Thema, die regelmäßig aktualisiert
werden.
http://ww w.dfVlleb.delaccessibilitylin dex. shtml (Li n kcode 335)
8.8.2
Tools
... Si lverback (Mac OS, 549.95)

---

Silverb.u:k
---~

--

,. ---

.. Abbildung 8.61
Silverback ist eine simple Anwendung, mit der Sie Usability-Tests
besser erfassen, dokumentieren
und verfolgen können.

Eine simple Usabitity-Anwendung, mit der Sie die Interaktion
Ihrer Besucher mit Ihrer Seite (Video und Audio) aufnehmen.
speichern und verfolgen können. Die Aufnahmen können
mit einer Fernbedienung gesteuert werden und lassen sich in
Quickt ime-Fitme umwandeln.
http://www.silverbackapp. com (Linkcode 336)
... Fangs Screen Reader Emulator
Simuliert Vorlesesoftware auf Websei ten.
h tt ps:lladdom. mozilla. org!delftrejoxladdorV402
(Linkeode 337)
.. WebAim Screenreader
Simuliert Vorlesesoftware auf Websei ten.
http://www. webaim. org!simula tion 11screenreader. php
(Linkeode 338)

.. lynx
Textbasierter Browser, mit dem sich Seit en in reiner Texta nsicht anzeigen lassen .
http://www.delorie.comiweb/.ynxview.html{U nkcode 339)
8.8 .3 Usability
... Web Design References : Usability
Hunderte von Referenzen zu allen Themen. die mit Usability
verknüpft sind. Die Liste wird ständig aktualisiert.
http://www. d. u mn, eduli ts1l su pportITraini ndOnli nel
webdeSigll/u sabi/ity.html (Unkcode 340)
... Research-Based W eb Design & Usability Guidelines
Ein vom amerikanischen Ministerium für Gesundheit
(US Department of Health and Human Services, HHS)
herausgegebener Bericht mit wesent lichen Richt linien der
Usability. Der Bericht basiert auf w issenschaftlichen Stud ien.

516

I

8

Barrierefreiheit und Usability

I

w ird ständig aktualisiert und kann kost enlos als PDF-Datei
heruntergeladen werd en.
http://www.usability.gov/ pdls/guidelines.html(linkcod e 34 1}
.. Jakob Nielse n's Alertbox
Auf seiner Seite http://www.useit.comlalertbox(link·
code 342) berichtet der Usabi lity-Guru Jakob Nielsen über
akt uelle Entwicklungen im Bereich der Web-Usability. Das

...

...

...

...

Inst itut für Softwa re-Ergonomie und Usability in der Schweiz
(http://www.usabllity.ch. Unkeode 343) übersetzt . Alertboxe
ins Deutsche. Die deutsche Version kann man auf der Seite
des Instituts als Newsletter bestell e n.
100 Us abi lity Tips von Jens Meiert
http://melHr.coml de/publica tionS/artides/2006050B( lin kcode 344)
The Univ ersal Usability
Die Dnline-Version des Buchs . Access by Design: A Gulde
t o Universal Usability for Web Designers. von 5arah Hortot'.
Das Buch enthält einen OberblIck zu Richtlinien des barrierefreien und benutzerfreundli chen Webdesigns sowie weiterführende Ressourcen zum Thema.
http://universalusabiflty.comlaccess_by_design/index.h tm I
(Unkcode 34 5)
25 excellent Usability/ User Experience articles and
r esources
Eine empfehlenswerte Auswahl von lesenswerten Beiträgen
und Ressourcen zum Thema .Usability • .
http://meiert. comlen/bl og/2001 03 3 QI
25-excellent-usability-ux-articfes-and-resources (lin kcode 346)
Beneflts 01 Web Standards
In seinem Podcast erläutert Paul Boag technische und finanzielle Vorteile der standard konform en 5eit engestaltung.
http://boagworld.com/5tandards (Linkcode 347)

8.8.4 Lit er atur
Barri erefreiheit
.. Robert 8 . Yonaitis : . Understanding Accessibility •
.. Jon Duckett : . Accessible XHTMLand C55 Web Sites Problem Design Solution .•
.. Jim 8yrne : . 60 hot to touch Accessible Web Design tipsthe tips no web devel oper can live without!.
.. Angie Radt ke und Dr. Michael Charlier: _Sarrierefreies Webdesign. Attraktive Websit es zugänglich gestalt en.

8.8

Ressourten

I

517

Usability
• Kelly Braun: ~ Usability: The Sit e Speaks for Itself«
• Joh n (ato: ~User-(en te red Web Design «
• Jesse James Garrett: '" The Elements of User Experienceoc
• Steve Krug: ", Don't Make Me lhink! A (ommon Sense
Approach to Web Usabilit y«
• Matthew Linderman, Jaso n Fried: ~Defensive Design for the
Web«
• Jakob Nielsen, Hoa Loranger: ", Prioritizing Web Usabilityoc
• Jakob Nielsen : . Ensuring Web Usability ~ Understanding
What Users Want«
Webstandards
• Andy Budd : ", (55 Mastery: Advan ced Web Standards Solu tions«
• Dan (ederholm: »8ulletproofWeb Design«
• Jeffrey Zeldman : ~ Des i gning With Web Standards.

518

I

8

Barrierefreiheit und Usability

9

Web 2.0-Layouts mit (55
umsetzen

In den vorherigen Kapiteln haben wi r ve rschiedene Elemente
der modernen Seitengestalt ung genauer betra chtet. Unter ande·
rem habe n Si e gese hen, wie Sie einen passenden typografis chen
Satz sowie ein harmoni sches Farbschema w ählen, aber auch auf
welche Art und Weise Navigationsleist en, Formulare, Li sten und
Tabellen erzeugt, ange passt und in eine Seite eingebettet wer·

den .
Ein grundlegender Aspekt der Seitengestaltung wurde dabe i
vö llig au ßer Acht gelassen - näm lich di e Erzeugung eines Grund geru sts, also eines st rukturellen .Skeletts«, das anschließend m it
einzelnen Seitenelementen gefUHt wi rd . Dies w ird nun im Rahmen dieses Kapitels [n aller AusfOhrlichkeit nachgeho lt .
Insbesondere finden Sie auf den nachfolgenden Seiten eine
anschauliche Übersicht über di e theo retischen Grundlagen von

HINWEIS
Im Gegensa tz zu konkreten
Selt enelementen (Lis t en, Ab satze, Bilder) is t der struktu relle
Rahmen von Websel ten eher
abstrakter Natur und deshalb
nich t so einfach zu verstehen.
Vor der Implementierung eines
DesIgnentwurfs müssen Sie sich
beispielsweise genau überlege n,
welche dl v-BlOcke zu w elchem
Zweck verwendet werden.

CSS m it vielen Bei spi elen und detaillierten Erkl ärungen. Außerdem sehen Si e, welc he Layou ts in w elchen Sit uati onen zu empfehlen und zu welchen Zwec ken einzu setzen sind, und wo Sie
bereits vorgefertigte Layo ut-Schablonen fi nden können. Ein Beispiel zur Umsetzung eine s Entwurfs im Web 2 .0-Look wi rd Ihnen
absc hli eßend ein en Leit faden bieten, nac h dem Sie sich bei all en
Ihren Projekten rich ten können .
Im Folgenden werden
.. Bloc k und In lin e-Level -El emente,
.. das CSS- Box-M odell,
..

die fl odt-Technik und das Attribut c lea r (m it Beispie len)
sow ie
.. Posit ionierungsgrundlagen (relative und absolute Posit io nie..

rung. z - 1ndex) und
CSS-Spezifit ät

TIPP
Vor der Implement ierung ei nes
Deslgnentwurf'l Ist es hilfreich,
vorgefertigte, standardkonforme
Skelett-Vorlagen zu verwenden.
In sogenannt en Mast er Stylesheet s werden die Darst ellu ng
von allen Seltenelementen
fü r alle BrOlNser gleich gesetzt
(G lobal Reset) sOINle sämtlic he
Selektoren aufgelistet. die zur
einheitlichen Darst ellung der
Seit e definiert werden müssen. Mehr daz u unter http://

www.smashlngmasazlne.
detailliert beleuchtet sowie die besten Prakt iken f ür den Einsatz
von CSS in der Praxis im Hinbl ick auf
.. CSS-Styleguides,

9

conV}OO7/ 05l1 0170- exper tIdeas·/or·better.(S5.{odlng (Linkcode 351).

We b2.0- Layouts mit (55 umsetzen

I

519

.. CSS-W ireframes und
.. einschlägige CSS-Frameworks
diskutiert.

9.1

TIPP

Um eine bessere Übersicht der
vorliegenden $elektoren in einem
CS5-5tylesheet zu erreichen,
empfiehlt es sich, die gesamte
C55-Formatierung in mehrere
C55-Dateien (etwa reset.HS ,
globaf.cs5, struetufe.css u sw.)
aufzuteilen, die anschließend zu
einer Datei (Master Stylesheet)
zusammengefass t werden. Durch
die spezielle Angabe I ' \ ' in
XHTMl wird dafür gesorgt, dass
ältere Browser die Sei te auch
ohne Verwendung von Stylesheets anzeigen kOnnen.
XHTMl:
<5ty1 e t ype- ' t ext /css '
medla - "scree n" )
1' \ ' /8 111port url(" c5s/lIa-

ste r .css·) ;I" 1
</ st r 1p )
C55:
i'lllpo rt url ( - reset . css " ) ;
@lmportur1{"global.css " ) ;
i'lmport url( ·st r uct ure .
C55") ;

Block-Level-Elemente und
Inlin e- Level - Eleme nte

In der Markup-Sprache sieht derW3C-5tandard eine Unterscheidung zwischen zwei Typen von Elementen vor : sogenannten
Block-Level -Elementen (p, d1 v) und Inline-Level-Elementen (ern,
span) . Der grund legende Unterschied zwischen ihnen liegt dari n,
dass Block-Level-Elementen immer ein Zeilen umbruch vorangeht
und folgt. Inline-Level-Elemente tauchen dagegen direkt im Textfluss auf; sie können daher in eine Zeile gelegt werden (daher
der Name), was bei Block-Level- Elementen ohne C55 unmögli ch
ist. Außerdem erstrecken sich Block-Level-Elemente standardmäßig auf die ganz e Brei t e des Eltern-Elements, während InlineLevel-Elemente eine minimale Breit e beanspruchen, die ge rade
zur Anzeige der Inhalte benötigt wird. Im Unterschied zu InlineLevel-Elementen kann Block- Level-Elementen sowohl eine Breite
(wi dth) als auch eine Höhe (height) zugewiesen werden.
Bloc k - l evel-El emente
In der Regel agieren Block -Level -Elemente als Container, die
weitere Elemente - sowohl Block-Level- als auch Inli ne-LevelElemente - enthal t en dürfen. In Abhangigkeit davon, welche
Oocument Type Defini tion (OTO) zu r Auszeichnung des Markups velWendet wird, dürfen verschiedene Block-Level-Elemente
unterschiedliche Elementtypen bzw. Elemente ent halten.
So dürfen :
.. <farm>- und <body ) -Elemente nur andere Block-Level-Elemente ent halten (somit mussen Texte immer in Absätzen,
Listen oder Tabellen enthalten sein),
.. <p) -Elemente nur Tex t und Inline-Level-Elemente (ern,
s trang . span) enth alten ,
.. <d1v)- und <l1>-Elemente sowohl Block-Level-E lemente als
auch Inline-Level-Elemente enthalten.
9 .1.1

In strikten Versionen der Markup-Sprache t ret en 22 Elementtypen auf. die als Block-Level-Elemente definiert sind. Ihre Auflist ung finden Sie in der Tabelle 9.1.

520

I

9

Web 2.0-layouts mit (55 umsetzen

Sloe k- Level -Element

Bedeutung

address

Identifiziert die Kontakti nformat ion des
Seltenbetreibers.

bl ockquo t e

langes Zitat

",
dl. dt.

I

... Ta belle 9.1
Block-level- Elemen te in der
Übersicht (X HTMl 1.0 Strid)

Fasst Seitenelemente zu Blöd en (Bereich)
zusammen .
dd

Definitionsliste (defi nitio n list),
Ausd ruck in der Definilionslis te (definitions
list te rms),
DefinitJOn In der Definitionsliste (de fi OlIIo n
list defi ni tion)

f le ld se l

Fasst Felder ei nes Formu la rs zusamme n.

fo rm

Formular

h l , hl . h3 , M , h5 , h6

Übersch rifte n e rs te r bis sechster Ordnung

hr

Trennll nle

I ns

eingefügte r Inhal t

nosc r l pt

Alte rnativer Tex t fur die Beschreibung von
JavaScrlpts, die nic ht angezeigt werden
können

01

geordnete liste (ordered list)

p

AbSd U

pre

vorformatierter Text (preformatted text)

sc rl pt

Skri pt

tabl e

Tabelle

ul

ungeo rdnete USle (unordered list)

Folgende Elemente dürfen weitere Block-level-Elemente enthalt en :
dd, dt. frame set , 11. tbody, td, tfoo t , th , t head, tr
Folgende Elemente dürfen sowohl als 8Iock-level- Ele mente als
auch al s Inline-level- Elemen te verwendet werden :
app1et, button, de1 , ffraJ!\e , ins , map, obj ect, sc ript
Werden sie als Infine-level-Elemen te verwendet (innerhalb eines
weiteren InHne-level-E lements oder eines Absatzes p), so dürfen
sie keine Block- level-Elemente entha lten . obje ct ist das einzige
Inline -level-Elem ent, das Bloc k- level-E lemente beinhalten kann .
Inline- level-Elemente
9.1..2
InHne- l evel- Elem ente tauchen in der Regel an Stellen im Markup
auf, wo sie Inhalten eine zusätzliche semantische Bedeutung ver9.1

Block-level-Elemen te und Inlin e-level-Elemente

521

leihen . Sie dOffen nur Text und weitere Intine-Level- E/emente
beinhalten.
Wird ein Block-Level-Element innerhalb eines In/ine-LevelElements eingefügt. so wird der Browser den Code in ein InlineLevel - Element, das ihm folgende Block-Level- Element und ein
weiteres Inline-Level-E/ement aufteilen.
Aus <span >In11ne <p>Bl ock </ p>Box </s pan > würden die drei
Elemente <s pan >I nl1ne </s pan >, <p>Block <J p> und <s pan >
Box<I spa n> erzeugt.
Eine Übersicht der Inline- Level- Elemente finden Sie in der
Tabelle 9.2. Beachten Sie, dass <1> und <b> immer noch im Standard enthalten sind und nicht als »deprecated c (überholt) geIten.
Tabe lle 9.2 ..
In li rJe- Level- Eie m ente
(XHTML 1.0 Strict)

In Iine- Level-EI ement

Bedeutung

•

Anker

abbr

Abkürzung (Abbreviatur)

acronym

Akronym

".

fette A uueichnung

,

AUSleichnung des Tex tes in großen Buchstaben
Zeilenum bruch

"button

Schaltfläche

eHe

Zita t oder Referenz au f eine Quelle

code

Quelltext

'"

Gelöschter Inhalt

",
"

Legt die Definition eine~ Ausdrucks fest
(definlng instance)
Betonung (emphasis)
Kursive

I,.

Bild

,",

eingefügter Inhal t

Input

einzeiliges Eingabefeld

l abel

Beschriftung

"p

Image-Map

kM

Zeich net die Ausgabe des Nutzeß aus.

objec t

eingebettetes Objekt

q

kurzes Zitat

samp

Zeichnet ein Sam pie aus Programmen, Skripten
U$W.

522

9

scrlpt

Skri pt

selec t

Auswa hlschaltfläche

small

Auszeichnung des Telftes in kleiner SchriftgröSe

Web 2.0-Layouts mit (SS umsetzen

Jnl ina- Ll'I/l' I- Element

Bedeutung

span

leitet einen allgemeinen Inline-Berelch ein.

.. Tabelle 9.2
Inllne-l evel-Elemente
(X HTMl1 .0 Strlct)

strong

starke Betonung

(Fo rts .)

,"b

tlefgestellter Index (subscript)

,"p

hochgestellter Index (super ~cript)

textarea

mehrzeiliges Eingabefeld

tt

Teletype- oder Monospace-Angaben

I

Variable In Program mcode

9.1.3

Block- Level- und Inl jne-level-Elemente in (SS
Beide Arten v on Seiten el ementen werden im M arku p fUr di e

Strukturierung der Da ten ve rwendet. Das Modell der Ma rku pSprache ba siert auf soge nannten Bo xen, unsichtbaren rechteckige n Kästen, In denen sämt liche Seitenelemente platziert
werden. Die Positionierung d ieser Boxen sowie ihre Beziehur'gen
zueinander machen das gesamte Seitenlayout aus.

• Abbildung 9.1
Boxen auf Splegel.de

Boxen
Esglbl auch andere ArIen von
Boxen, die im Kontex t der (55l ayouts keine bedeutende Rolle
spielen oder 5pezlalfälle da~tell e n
(etwa listen-Boxen).

• Abbildung 9.2
Boxen auf Amazon.com

Jedes Seiten element verfugt uber genau eine Box , d ie entweder
eine Illline-Box (erzeugt vo n lnline-Level- Eleme nten), eine Block-

Box (erzeugt von Block-Level-E lementen) od er eine /nlin e-BlockBox (j e nach Kontext eine In Hne- oder eine Block- Box) i st.
Oi e Zuordnung von Sei tenelementen zu einem der Boxtypen
ist jedoch nicht als eine imme r gült ige Vorga be zu sehen, sondern
al s eine Standardvorgabe, die m ithi lfe von (55 verändert werden
kann. 50 lassen sich Block-Level-El emente m it einer Inl ine-Box
versehen, genauso wie Inli ne-Level- Elementen eine Blockbox
aufgezwun gen werd en ka nn . In C55 gesch ieht die s mit der di splay-Eigenschaft . So erzeugt etwa die 5t ilvorgabe p (di spl ay:
fn llne : l j ewei ls In ljne-Boxen für alle Absätze, d ie in ein em

TIPP

Es ist wichtig zu verstehen , dass
durch 5tilanweisungen der Typ
der Elemente nicht ver.indert
wird, sondern nur die Gestalt,
in der sie Interpretiert und angezeigt werden. Wird also ein
Inline-level-Element mit einer
Block-Box versehen , so bedeutet
dies nicht, dass es Block-levelElemente enthalten darf.

9.1 Block-level-Elemente und Inline- level -Elemente

I

523

Orem Ipsu m dolor s i! ~met. co~se<leluer
di~isdrtl elir. s~ di~m nonummv nibl!
ulMlod tlncldum ur ['O •.el dolo'f mlgn,
l i~u , m ew ~o[u !~a1. Yt wisi eoim ad minim
ni,m. quis nOWlId cxcrclt , lion
n.mco.pcr sUi(lplt lobon l, n,sl UI anqul~
x e. commooo conseilu ll.
-orfm Ips"rn dol"iifilt ,met. conse<tflucr
dlp lsdrt, eilt. sC'<! dl.m nonurnmv nlbl!
"Ism<.><! rincldum ur I. or/:Ct dolorf "Ulna
l i~u l m er.! valulplr. Ul w.. i enim 1<.1 minim
enlam. qul, nOlUlId exerclt atlon
lI.mcorper ,uKipitlobon is ni~ ul ,Iiquip
x e. commono conseil.l!.

.. Ab bildung 9 .3
Sta ndardmJ.ßig werden Bloeklevel-Elemente mit Zeilenumbrüchen davor und danach versehen.

Text vorkommen . Das Ergebnis ist eine Darstellung, in der alle
Absätze direkt hintereinander folgen, ohne durch ZeiJenumbrüehe voneinander getrennt zu werden.
Analoges gi lt auch für Inline-Boxen. 5tandardmäßig wird ein
Inline- Level-Element mit einer Inline-Box versehen (etwa <ern)
innerhalb von <p», was in Abbildung 9.5 deutlich wird .
<p>Lo rem 1psum dolor <em>s 1t amet, co nsec tetuer <l em >
adip1 sc ln9 el1t </ div)
Mi t der (55-Angabe em Idisplay : block : I verändert sich die
Da rstell ung der Blöcke (siehe Abbild ung 9.6).
Block-Boxen werden vertikal ausgelegt, eine unter einer anderen; fnfine-Boxen werden dagegen horizontal ausgerichtet, eine
hinter einer anderen. In beiden Fällen lassen sich die typischen
Eigenschaften von Boxen, etwa der innere Abstand (paddl n9).
der äußere Abstand (ma r91 n) sowie die Grenzlinien (b orde r) festlegen.
Vertikalt' Abstandt'

Vertikale Abstande bel Infine-Boxen si nd laut W3C-Spezifikation t abu.
Nicht allerdings für den Internet E~plorer: Die Angaben werden vom
Browser interpretiert und bel der Anzeige von Inhalten berücksichtigt.

.. Abbild ung 9.4
Zwei Absdtzen wird jeweils eine
In!ine-Box aufgezwungen . Sie sind
nicht durch Zeilenumbrüche voneinander getrennt.

orem Ip,um 111>10. 11,
diplsdrt, eilt

~m".

rOltU<1eWtr

.. Abbildung 9.5
Für das In Une-level-E lement
<em> wird eine Inline-Box
erzeugt .

Bei Block-Boxen können diese Eigenschaften sowohl für di e ho rizo ntale als auch f ür die vertikale Ausrichtung angegeben werden . Bei Inline-Boxen werde n alle vertikalen Abstände, Brei ten
(wldth), Höhen (helght) sowie Angaben zur maximalen und
mini malen Breit e und Höhe(rnax-w1d t h, rnax-helgh t , mln-wld th,
mln-he19 ht) gemäß der 5pezifikation ignoriert .
Sowohl bei Bloc k-LeveJ- als auch bei Inline-Level-Etementen
erfolgt die Ausri cht ung und Positionierung Yon Inhalten der
Boxen mit (55. Dies geschieht auf der Grundlage de5 CS5-Box-

Modells , das eines der fundamentalen Konzepte in (55 darstellt.
Eine ausführliche deutschsprachige Einf ührung in Block-Levelund Inline-Level-Elemente finden 5ie im dreiteiligen Beitrag
von Björn 5eibert (http://www.bs-markup.de/archiv/2005/01l15/
block-vs-inline- teil-i-vergleich (Linkcode 352».
Er ist die deutsche Übersetzung des Bei trags »Block vs. Inlinett yon Tom my Olsson (http://WNw.autisticcuckoo.netiarchive.

php?id=2005/01/11/block-vs-inline-1 (Linkeode 353».

Abbildu ng 9.6 ...
Dem Element <em> wird eine
Block-Box aufgezwungen.
524

I

Lorem ipsum dolor
" ~mtl. conU,!rlUtr
di

is( in~

9 Web 2.0-layouts mit CSS umsetzen

9.2

I

Das CSS-Box-Modell

Alle Elemente, die im (X)HTMl-Marku p auftauchen und nicht
ausgeblende t werden, verfügen über ei ne dazugehörige Box.

Rand
(bord er)

(margin)

I
Absta.nd
( padding)

Elemente ausblenden
i nline-Level- und Block-level-Elemente können mit der Eigenscha ft
dis P1ay ; none ; ausgeblende t
werden.

.. Abbildu ng 9.7
Innerer Abstand , äußerer Abstand ,
Rand sowie der I nhaltsblock nach
dem e55-Box-Modell

Das (55-Bax-Modell wird durch vier Eigenschaften eindeutig
festgelegt: die Breit e des Inhalts, der sich im Inneren der Box
befindet, den inneren Abstand (padding), den äußeren Abstand
(margin) sowie den Rand , der innere und äußere Abs tä nde von-

einander abgrenzt.
Die Breite des In halts ist dabei von der Breite der Box zu unterscheiden. Die Breite der Box setzt sich zusammen aus
.. dem linken Rand,
..
..
..
..

dem linken in neren Abstand,
der Breite des Inhalts,
dem rechten inneren A bstand sowie
dem rechten Rand.

Entsprechendes gift f ür die Höhe.
Was Seit enbesuche r seh en, ist also der Inhalt, der von einem
leeren Raum (innerer Abstand + Rand + äußerer A bstand) umge-

ben wird. Wird etwa ein Bild im Textfluss angezeigt, so stimmt die
Breite des Inhalts mit der Breit e des Bildes überein ; bei der Breite
der Box kom mt der innere Abstand zusätzl ich hinzu. Ein anderes
Beispiel : Wird eine Box mit einer Hintergrundfarbe versehen, so
wird diese nur auf die Flä che bis zum Rand der Box (ohne den
äußeren Abstand) angewandt.
Der äußere Abstand sorgt für die genaue Positionierung der
Box relativ zu benachbarten Elementen, während der innere
Abstand die genaue Positionierung von Inhalten innerhalb der
Box ermöglicht. Dabei ist es wich t ig zu verstehen, dass die Brei te

TIPP
Durch eine klare Trennung de r
Selektoren, die für die jeweiligen
Seitenbereiche in e5S-Da teien
zust.indig sind, können Sie eine
bessere Übersicht In Ihren e55Dateien erzielen. 5ie können
hierfür e55·Flags, Kommentare,
ein Inhaltsverzeichnis am Anfang der Datei sowie auffallende
Trennungen verwenden. Etwa
/ ' ... )>> TYPOGRAPII![ C«--

..,

/ ' ... ») VERWEISE

«< ... ' /

Geben Sie die Eigenschaften der
Selektoren immer in alphabetischer Reihenfolge an. Listen 5ie
die verwendeten Farben am Anfang der eS5-Datei expliZit auf.

".

11 Da rk 9 rey (text): 0333333

f!OarKBlue(head l ngs, linKS )
1000066
1 l1ght blue (topnavlgat1on)

..,

H«<eff

9·2

Das e55-Box-M odell

I

5 25

eines Elem ents (Attri but 10'1 dt h) laut Standard nicht d ie Breite der
Box beschreibt, in die das Element gepackt wird, sondern die
Brei te des Inhalts, der sich in dieser Box befindet.

9.2 .1

Beispiel

Al s Beispiel betra chten Sie bitte Abbildung 9 .8 sowie den folgenden Quellcode für CSS und XHTM l.
Listing 9.1 ~
Container mit BlIndtex t

List ing 9.2 ".
C55-Format ierung

( div>( p>Lo rem ip sum dol or sit amet ... (/ p>
( p)Sed Dr ei rl su s . nonummy et. fermentum ... (/ p)
(/ dfv )
di v {
margin: 50px aut o ;
ba ckgro und · co l or: fJ669gee;
... 1dth: 600px;
padd1 ng: lOpx;
border: 5px so lid IIfffff f ;

Abbildung 9.8 ...
Zwei Textblöcke im Inneren eines
<div>-Container;.

9.2.2

margin und padding

Die Eigenschaften margin und padding stellen die Kurzschreibweisen für die Angaben der äußeren und inneren Abstände innerhalb einer Box dar.
margin: « length > 11 ( per centage ) 11 aut o){ 1.4 j
paddlng: ( length) 11 ( percen t age ») (1.4j
Die Angaben können einen bis vier Werte haben und jeweils
einen der Werte ( length > (Breite in px, pt , em etc.) , ( percen526

I

9

Web 2.0-Layout s mit C55 umsetzen

tage) (i) (bei rnargi n zusätzlich auto) haben. Sie werden im Uhr·
ze igersinn not iert - nach dem M ust er: oben-rechts- unten-lin ks.
Die St ilvorgabe rnarg f n: lern 2px lern 2ern; legt somit fest , dass
der obere äußere Abstand vom Rand 1 ern beträgt und der linke
2 ern.
W ird in der Anweisunggenau ein Wert angegeben, so gilt dieser für die Abst ände in alle Richtungen. paddfng; Ipx; ersetz t
also paddf ng; 1 px 1px 1 px 1 px. Kommen in der Anweisung zwei
Werte vor, so gil t der erste Wert für den oberen und unteren
Abstand, der zweite fOr den linken und rechten Abstand.
Bei drei Werten wird der er~t e Wert fOr den oberen Ab~ tan d ,
der zweit e fOr den linken sowie fO r den rech ten Abstand und der
dritte fOr den unteren Abstand veM'endet .
In der Stilvorgabe können auch Prozent angaben verwendet
werden. Sie beziehen sich immer auf die gesamte Breite des
umschließenden Element s (der Wert des Attribu ts w1dth). Bei
der Eigenschaft rnargfn steht Ihnen zusätzlich das Attribut auto
zur Verfügung; dieses ermöglicht die automatische Ermi ttlung
der äußeren Abstände in Abhängigkeit von den vertikalen und
horizontalen Eigenschaft en der Box.
Im Beispiel bet rägt die Breit e des Inhalts, in dem der Tex t platziert wird, 600 px. Die Breite der Box (630px) ergibt sich letztendlich aus den hinzukommenden Rändern und inne ren Abständen:
Spx (linker Rand) + 10 px (linker innerer Abstand) + 600px (Breite
des Inhal ts) + 10px (recht er innerer Abstand) + Spx (rech ter
Rand) = 630 px.
Machen Sie sich bitte klar, dass der hellblaue Hintergrund
gerade 620 px Platz füllt (Breite der Box ohne die Ränder).

9.2.3

border
Die Gestaltung der Ränder von Seitenelementen gehört zu einem
der Themen in der Sei tenentwicklung, Ober die häufig diskutiert
wird. Zum einen zeigt sich im Web 2.0 die Tendenz, die Gestaltung von Elemen ten, wie die von Boxen, aus äst he t ischen Grunden zu vermeiden und somit auch standardmäßige Eigenschaften,
wie etwa border , zu vermeiden - etwa zugunsten von Boxen mit
abge ru ndeten Ecken (bilderbasierter Ansatz), Je weniger _sichtbare« Boxen der Benutzer zu sehen bekommt, dest o besser - so
der Hauptgedanke dahint er.
Anderersei ts können klar gegliederte Sei ten mit sichtbaren
Boxen eine gute Orientierungsllil fe darstellen und Seitenelement e deut lich hervo rtreten lassen.

I
HINWEIS
Weitere Informat ionen finden
Sie au f der Seite http://www.
thestyleworks.de/rejl

index_vi.shtml (linkeode 354).

Horizon t ale Zent rierung

Eine der am häufigHen au ft retenden Situat ionen , in denen das
auto-A tt ribu t von Ila rg I n verwendet wird, stellt die horizont ale
Zentrierung einer Box auf dem
Bildschirm dar. Sie w ird mit body
lmargln: 0 auto:1 realisiert. Beachten Sie, dass dIe Zentrierung
unabhängig vo n der Bildschirmauflösung des Be nutzers
geschieht.

Spezifikation des Box-Modells
Eine vollständige SpeZi fi kat ion
des Box-Modells mit detaillierten Beschreibungen der BoxEigenschaften sowie Beispiele n
fi nden Sie auf http://www.
w3. org/TR/REC -CSS2/box. html

(linkeode 355).

border: (border-w1dth) (border-style) ( border-color )

9.2

Das (5S-Box-Modell

I

5 27

border ist die Kurzsch reibweise fOr die Attribute border -width,
bord er - s tyl e und border - co 10 r . borde r-wl dth legt die linienbreite des Randes fest. Mögliche Werte si nd medf um (Standardwert), th 1n (dünner als med 1um) und thl c k (dicker als med 1um).

.t.. Abbildung 9 .9
oorder-style "dashed_

Beispiel: p (border-width: thin thin; J
Gewöhnlich verwendet man explizite Angaben, etwa borderw1dth: Ipx 2px 3px 4px;, wobei die ,.Laufrichtung_ der Angabe
mit der aus der marg in-Eigenschaft übereinstimmt .
border-style legt die Linienart des Randes fest. Mögli che
Werte sind :
.. none I hf dden (kein Rahmen)
.. dotted (punktierte Linie)
.. dilshed (gestrichelte Lin ie)
.. sol id (durchgehende Linie)
.. doubl e (doppelte durchgehende Linie)
.. groove (3D, der Rahmen wird in die Bildebene eingekerbt)
... ridge (3D, da s Element hebt sich aus der Ebene hervor)
.. i nset (3D, das Element ist in d ie Bildebene vertieft)
.. outse t (3D, das Element springt aus der Ebene hervor)

.t.. Abbildung 9.10
border-style "solid_

.t.. Abbildung 9."
border-style _double«

.t..

.... Abbildung 9.'3
border-style »ridge«

.t..

Abbildung 9.'4
border-style _i nset«

.t..

lorem lpsum dolor sll amel,
consectetuer adlplsc1ng elit.
Phasellus accumsan augtJe sed
purus. Pellentesqlle venenatls
malesuada Ugula
, •• , ' H ••• " ' , •••••••••••••••• , , ••• :

Abbildung 9.12
bo rder-style _groove«

Abbildung 9.'5
border-style _autset«

Beispiel:
p {border-style: double none dotted dashed:l
border-colo r legt die Farbe des Rahme ns fest, etwa durch border-color: lIeee 11333 Ileee Ilddd.

528

I

9 Web 2.0-layouts mit (55 umsetzen

Insgesamt:

P I
border-style: double dashed dotted double:
border - w1dth: med1um:
border-eolor: Ileee JI333 Ileee flddd:

I
HINWEIS

über wei tere boraer-Eigenschaften In C55 können Sie sich
in dem Beit rag ,.C55 2.1: Border«
(http://www.the5ty/eworks.de/
reflborder.shrml, linkcode 356)
informieren.

9.2.4 Vertikale Abstände
Ein grundlegender Unterschied zwischen horizontalen und vertikalen äußeren Abständen bes teht darin, dass sie von Browsern
nicht gleichwertig interpretiert werden. Während horizontale
Abstände immer gerender! werden - entsprechend den Angaben, die mittels (55 gemacht werden - , ist dies bei vertikalen
Abständen nicht der Fall.

... Abbildung 9 .16
,.Collapse of vertical margin •.
Der .lußere Abstand zwischen
den beiden Boxen ergibt sich
nicht aus der Summe der beiden
äußeren Abstände. 5tattdessen
wird das Maximum der beiden
Werte genommen.

XHTML:
<p class- "pl " >Lorem ipsum
</ p)
<p el dss- "p 2" ) Eu e um .. . </ p>

(55 :
p.pl (margin-bottom: 19px:J
p.p2 Imargin-top: 20px:)
In der Abbildung wird der obere Absatz mit einem unteren inneren Abstand von 19 px versehen, im unteren w ird der obere
innere Abstand auf 20px gesetzt. Der Abstand zwischen bei den
Boxen betragt überraschenderweise nicht 39px, sondern nur
20px. Laut (55-Spezifikation wird nämlich der größere der beiden Werte genommen, der andere Wert wird ignoriert. Diese
Erscheinung bezeichnet man als Col/apse of verticaJ margins.
Aus diesem Grund werden bei der Seitenentwicklung vertikale
Abstände immer nur mit der padding-Eigenschaft realisiert, da
vertikale äußere Abstände von den verschiedenen Browsern
unterschiedlich interpretiert werden.
9·2

Das (55-Box-Modell

I

529

IE 5.x/ Wm
Im M iuosoft-B rowser IE 5. xJ
Win wurd e das ( SS-Box-Modell
falsch im plementiert. Dies f ührt
zu dem Problem, das als Box·
M odell·Problem bezeichnet wird.

TIPP
Be i der Implementierung ei nes
Designentw urfs können Sie nach
de r fo lgenden Faustre gel vorgehen: Falls Sie die Breite eines
Elements festlegen. so machen
Sie kei ne Angaben über den
Rand (border ) und die Ab stände
(na r gl n, padd lng) der Bo.
des Elements. Umgekehrt gilt :
Werden border , margln oder
padd 1ng verwendet. vermei den
Sie die Angaben zur Breite des
Elements .

Tan ·Hack
Tan·Had<. (von Edwardson Tan) ist
eine Wei te ren twicklung des bekann ten Tanteks-Box·Model-Hacks
(http://wWW".tantek.comtCSSl
Examples/boxmodelhack .htm/) .
Tanreks·Box·Model·Hiuk verur~chte Probleme in Opera und
älteren Browsern.

530

I

9.2.5
Da s Bo x-Model/- Problem
Bei der Implementieru ng des C55-Box-Mo dells im IE 5.xJWin
fuhrte Microsoft ein eigenes Box-Modell ein, das sich von dem
des Standards grundsätz lich unterscheidet. Im IE 5 .• /Win bezieht
sich die Breite eines Elements (Attribut width) nicht nur auf die
Brei te des Inhalt s, wie dies durch den Standard vorgeschrieben
wird, sondern auch auf den in neren Absta nd und den Rand der
Ba •. Mit anderen Worten: Die du rch das w1dt h-Attribu t spezifizierte Breite setzt sich aus der Breite des Inhalt s plus innere
Abst ände plus Rände r zusammen. Das gleiche Vorgehen wird
auch für die Höhe (Attribut he1ght) verwendet.
Um diesen Sachverhal t zu ve ranschaulichen, be trac hten Sie
wieder das Beispiel aus dem vorherigen Abschnitt . In der (55Formatierung wird die Breite des Elemen ts di v au f 600px gesetzt.
Die Breite des Inhalt s bet rägt somi t ebenfalls 600 px, die Gesamtbreite der Box 630px.
Nach dem IE 5.xlWin-Modeli bet rägt die Gesamt breite der
Box 6oopx. Da inne re Abstände und Ränder in dieser Breite
bereit s berücksichtigt sind, betragt die Breite des Inhalt s:
600px - 20px (innere Abstände, 10px links + 10px rech t s)10 px (Ränder, 5 px lin ks + 5 px rech ts) = 570 px.
Was im oberen Be ispiel kaum die Darst ellung beeint räch t igt,
kan n in komplexen layo uts jedoch schnel l zu Problemen fuhren
- bis hin zum Zusammenbrechen des gesamt en Layouts.
Um auch im IE 5.xJWin die gewünschte Darstellung der
Bo.en sicherzustellen, können 5ei tenbe t reiber zwei alternat ive
l ösungen velVVenden.
Das Problem lässt sich dadurch umgehe n, dass man bei der
Gestaltung der Boxen w eder mit in neren Abständen noch mi t
der borde r - Eigenschaft arbeitet . Zur Abgrenzung der Bo.en von
benachbarten Elementen wird dabei ausschließlich das margfnAtt ribut velVVendet, um die Illusion des inneren Abstandes zu
erzeugen. Nur in solchen Fällen sind beide Box-Modelle nämlich
ide ntisch . In der Praxis ist diese Vorgehensweise meistens ziemlich aufWendig.
Weit verbreiteter ist deshalb die zweite Methode, die in der
Fachsprache unter dem Begriff Tan·Hack lä uft. Dabei erhält der
IE 5.xJWin zusätzliche Angaben, die von anderen Bro wsern ignorie rt werden.
Zu diesem Zweck wird die Breit e der Box um den Wert vergrößert , der im rE 5.xlWin~Box - Modell verloren geht. Im oberen
Beispiel sind das 30px (630px - 6OOpx) gewesen. Die Korrektu r
sieht dann im C5S-Code wie folgt aus:

9 Web 2.0-Layouts mit (55 umset zen

* html div {/ * Thi s i s the Tan hac k

I

*1

wid th: 630px :
wf dt h: 600px:

Der Clou besteht darin, dass alle Versionen des Interne t Explorers im Unt erschied zu anderen Browsern ein eigenes Verst ändnis
vom root-E lement besi tzen, also dem oberst en Element in der
Seitenhierarchie. Während html lau t Standard explizi t als r oo tElemen t definiert wurde, existiert laut der IE-Implemen t ierung
ein we iterer abst rak ter Wrapper, in dem sich die Inhalt e der
Seite, insbesondere also auch das html- Element. befinde n. Dieser
Wrapper kann über den Stern-Selektor (*) adressiert werden ; von
sämt li chen anderen Browsern wird er ignoriert und überlesen.
* ht ml di v beschreibt somit die St ilformatierung für alle divElemente, die sich innerhalb des htm l- Elem ent s befinden. Die
Tiefe, in der si ch <d 1v> in der Seit enst ruktur befindet, spielt dabe i
keine Rolle. Anschließend wird die Breite des Elements festgelegt
(widt h: 630px : ); sie wird vom IE 5.x1Win beim Rendern de r CSSSt ildat ei übern ommen. Da das Probl em beim IE 5/Mac nich t auftritt und in den nachfolgenden Versionen (ab Internet Explorer 6
einschließlich) behoben ist, muss nun dafür gesorgt werden, dass
auch diese Browser mit korrekten Angaben arbeiten . Gesorgt
wird dafür mit der St ilvorgabe wid th : 600px : . Das Escape-Zeiehen wi rd vom IE 5.x1Win ignorie rt, von ande ren Versionen des
Int ernet Explorers jedoch verstan den. Es ist wichtig zu beacht en,
dass der Backslash im Hack nicht vor den Buchst aben a, b, c, d, e
und f vorkommen darf, dami t er nic ht als Hex-Zeichen int erpret iert wird.

9.3

TIPP
An stelle von dlv können auch
beliebige andere Block-levelElemen te auftauchen , auf die
da~ Boc-Modell angewandt werden darf.

HolCks ve rm eiden
Grundsätzlich ist es emp fehlenswert, bei der Implementierung
eines Designentwurfs Hacks nach
Möglichkei t zu vermeiden .

Die float-Theorie

Die theo re t isch e Grund lage des f l oa t -Attri bu ts wird in der Regel
zu denjenigen Themen gezählt, die Webentwicklern die meisten
Probleme bei der Implementierung bereiten. Der Grund daf ür
ist, dass die fl oat-Theorie wede r intui t iv ist noch ei nhei tli chen
Regeln folgt . Dennoch st ell t sie eine de r w esent lichen Grun dlagen fü r die Posi t ionierung von Elementen auf einer Seit e dar.

9.3.1

Grundlegende Eigensc haften
Grundsätz lich versteht ma n unt er Float eine Box (auch floating

box genannt), die na ch links bzw. nach rech ts versc hoben we rden
kann und die benachbarten Sei tenelemente an ihren Rand fl ie-

9.3

Die fl oat -Th eorie

I

531

ßen lä sst (das Letzte re kann mit der cl eil r -Eigenschaft verhindert
werden).

.. Abbi ldung !....7
Das Block-level-Element mi t dem grünen Hinte'Brund
wird mi t flmt: none; versehen. Eine explizite Angabe
sorgt dafür, dass Block-level-Elemente standard mäßig
argezeigt werden .

.. Abbildung9.19
float: right - die grüne Box wird nach rechts verschoben , die benachbarten Seitenelemente fließen an den
linken Rand der gefloateten Box.

HINWEIS
Eine zu floatende Box sollte
neben der fl oa t-Angabe außerdem immer eine Breitenangabe
besitzen, etwa:
p.float(?d!
floa t, left:
wldth, JOOpx :
I

532

I

9

.. Abbildung 9.18
float: left - die grune Box wird nach links verschoben,
die benachbarten Sei t enelemente fließen an den
rechten Rand der gefloateten Box.

.. Abbildung 9.20
Die gefloatete grüne Box raumt dem benachbarten
Textfluss nicht genug Platz ein. Konseque nz: Der
benachbarte Inhalt wird nach unten geschoben.

Ein Fehler, den Sei tenentwi ckler bei der Umsetzung von Designentwürfen immer w ieder machen, ist die Annahme, dass nur
Block-Level-Element e "gefl oatet« werden dürfen. In der Tat darf
man das fl oat-Attribut beliebigen Seitenelementen zuweisen.
Dadurch werden sie automat isch zu Block+Level- Elementen und
werden von den Browsern als solche behandelt.
Sei tenelemente, die mit der fl oilt-Angabe versehen werden,
werden aus dem Textfluss des Dokuments herausgenommen.
Das heißt insbesondere, dass Regeln, die für die Eltern-Elemente

Web 2.0-layouts mi t (55 umset zen

I

vo n )Ogefl oateten« Elemen ten gelten, vo n Kind- Elemen t en nich t
notw endigerweise vererbt we rden. Gefl oat ete Elemente können
ohne explizit e Angabe n also mehr oder weniger beliebig aussehen.
Aus diesem Grund ist es w icht ig, die gewünschte Formatierung für geftoatete Kind-Elemente immer präzise anzugeben und
insbesondere die gewünschte Box-Breite festz ulegen. Sonst können die Boxen nämlich ganz nach der Interpretation des Browsers
posi t ioniert und gestalt et werden, was in der Praxis unverm eidlich zu unerwünschten Darste llungen füh rt .
Beispi el 1 I Bet rachten Sie Ab bildu ng 9 .17. Dort erkenn en Sie dre i
Absätze, von denen der zwei te speziell gestaltet ist. Die Absätze
werden als Block-l evel- Elemen te standardmäßig untereinander
platziert und durch Zeilenumbrüche voneinander getrenn t.

XHTMl:
<dfv fd- "contafne r ")
<p)Lo rem i psum .. .. </p>
<p class- "f loa t ed ") Mei ad maio r um. .. </ p)
<p)E u c um dico f al1 1 1ud1ca bft . . . (/ p)
</ d1Y >
(55:

ficon t ai ner
backg r ound · color : fi669gee :
margin: 0 auto :
wi dth: 600px:
borde r: 3px solid IIffffff:
paddlng: O. gem:

J
p J

margln : 00 l ern 0 :
p. f l oa t ed (
background - col o r : fl aadd22:
border: l px solid /lfff :
pa ddi ng : lOpx:

J
Um den Seiteninhalt am rechten Rand der gr ünen Box fließen zu
lassen, genügt es, der zu fl oat enden Box die Eigensch aften

p. f l oa t ed

TIPP

Beachten Sie, dass der Seiteninhalt, der an einen Rand der
fl oatenden BOl( fließt, unter der
fl oat-Bol( nicht weiter am Rand
ausgerichtet wird, sondern die
BOl( quasi umschließt und wie
vor der Bo)( weiterfli eßt.

9·3

Die fl oat -Theorie

I 533

floilt: left;
wi dth: ZBBpx:

zuzuweisen. Das Ergebnis sehen Sie in Abbildung 9.18. Verändert
man die »float-Rkhtung« auf float: right . so ergibt sich das
Bild aus Abbildung 9.19.
Im Textfluss erscheinen gefloatete Elemente immer nach dem
letzten vorausgehenden Block-Level-Element im Markup. Sie
können links bZVOl. rechts von nachfolgenden Block-Level-Elementen positioniert werden.
Wird die Box nach links gefloatet. so fließt der Text an ihren
rechten Rand (siehe Abbildun g 9.18); beim Floaten von rechts
erscheint der Textfluss am linken Rand (siehe Abbildung 9 .19),
Steht dem Inhalt nicht genug horizontaler Freiraum zur Verfügung. so w ird er unter die gefloatete Box geschoben (siehe Abbildung 9.20).
Beispiel 2 I Möchten Sie, dass mehrere Block-level-Elemente an
den Rand einer fl 0<1 t-Box fließen. so müssen Sie sicherstellen,
dass ein Inline-Level-Element, das sich innerhalb eines Blocklevel-E lements befindet, gefloatet wird. EMa so :

XHTMl:
<dlv ld- ' contalner ' )
<p) Lorem lp sum v1x elit aud1am 1nvenlre ut. detra xii eleifend ea eos . Qu o te agam co nsectetuer. <s pan
c la ss- ' fl oated ") Mei ad mai orum epi curi nominavi ...
</s pan > Congue urbanita s fd 1u s. no co rrumpft. .. (/ p>
<p>Eu cum dico fal11 1ud1cabft ... </ p>
</ dlv )

(55:
span. fl oated
ba ckground- col or : #aaddZ2;
border: Ipx so lid IIffffff;
fl oat: left:
wldth: 300px:
padd1 ng: lOpx:
margin: O.5em;

Das Ergebnis können Sie in Abbildung 9.21 sehen . Beachten Sie,
dass zur Abgrenzung des umfließenden Textes von der Box nicht
534

I

9 web 2.0-layouts mit (55 umsetzen

der innere Abstand des umfließenden Textes, sondern der äußere
Abstand der floa t -Box verwendet w urde. Da f loa t -Boxen
aus dem Textfiuss herausgenommen we rden, ist es falsch, vom
Abstand eines Absatzes von de r f 1003 t-Box zu sprechen, da die
fl oat-Box hierfür einfach nicht exist iert. Aus diesem Grund muss
der äußere Abstand der Box entsprechend angegeben werden .

I
TIPP

Mit (55 lassen sic h beliebig viele
Elemente gleichzeitig fl oaten.
Dies kann bei dy namischen Layouts seh r nützlic h sein, etwa u m
die Seitendarstellung au tomatisc h auszurichten.

.. Abbi ldung 9. ~1
Am rec hten Rand einer fl oat-Box
fli eßen zwei Absätze .

9.3.2 Positi oni erun g von fl oat-Boxen
Im Widerspru ch zur weit verbreiteten Vorst ellung, dass ein BlockLevel-E lement höchstens eine f1 oat-Box beinhalten kann, lassen
sich beliebig viele Elemente gleichzeit ig fl oaten - auch die FloatRichtu ng ist dabei une rheblic.h. Fügt man etwa ein en ZVIIeit en
<span >- Block der Klasse fl oated innerhalb des ersten Absatzes
dire kt hinter dem ersten <s pa I'I >-Block hinzu, so entsteht das Bild
aus der Abbildung 9.22 .

.. Abbi ldung 9.H
Zwei grüne Blöcke werden nach
links gefl oatet .

Die ZVIIeite grüne Box kann auch durch die Ersetzung von f 1oat:
le f t : au f f1 oat: re cht s : nach rechts gefl oa tet werden.
9 ·3 Die float-Theorie

I

535

HINWEIS

Im Dokumentfluss haben fl oatBoxen keine besondere Stellung
gegenuber anderen Boxen . Sie
werden genau so Interpretiert,
positioniert und angezeigt. wie
sie im Markup stehen. sofern
keine zus,Hzliehen (55-Angaben
gemacht werden.

XHTMl :
<div id - " co ntainer~ )
<p) Lo rem fp s um v fx el ft audi am f nveni re ut . detra xit el e lf end e a eos . Qu o t e ag am cons ec tetue r.
<s pa n c l ass- ~leftfl oa te d ~ ) Mei a d ma i orum epi c uri no minavi ... </s pan ) <s pan c la ss-" rightfl oated " ) Me i ad ma f o rum epf c urf nomfnavf .. . </s pan) Co ngue urbanfta s fd
fu s , no co rrumpft ... </ p )
<p ) Eu c um di co f a llf fudi cabit ... </ p)
(5 5:
s pan. rf ghtf 1oate d, span. 1 e ft fl oated
baC kgro und - col o r : #a add 22:
bo rder: Ipx so lid lifff;
wf dth: 2B8px:
paddfn g : l Opx:
ma rgin: O.5 em;

,

span. rl ghtfl oated
float: rfght;

,

s pan.leftfl oa ted
fl oa t: left;

,

Ab bildung 9 .2) ...

Eine Bo x wird nach links gefloatet, die andere nach rechts. Der
umfließende Text wird zwischen
die heiden Boxen geschoben.
Befindet sich der zweite <s pan >-Block ni cht direkt hinter de m
e rste n, sonde rn in der Mitte des zwe ite n Absatzes, so wird der
Teil des Fließtextes, der vor dem zweiten <s pan >-B lock kommt,
am linken Rand der ersten fl oat-Box a usgeri chtet. Der Teil des
Fließtextes, der nach d e m zweiten <s pan ) -Block ko mmt, fän gt
a m linken Ra nde der zweiten fl oat-Box an .

536

I

9 Web 2.0-Layouts mit (55 umsetzen

.. Abbildun g !P4
Hoat-Boxen haben keine besondere Stellung Im Marlt:up. Sie
werden so angezeigt, wie sie im
Markup steh en.

TIPP

Allgemeiner : Befindet sich ein float-Element innerhalb eines
Block-level-Element s (üblicheIWeise <p> in <dlv> oder <span>
In <p», so wird die float-Box vertikal direkt unter dem vorausgehenden Inhalt ausgerichtet und ho rizontal links (f 1oat : 1eft ;)
oder rechts (f 1oat: rf gh t;) vom umfließenden Text angelegt.
Die horizontale Verschiebung der Box geschieht so lange, bis die
float-Box auf den inneren Abstand des Eltern-Elements trifft.
Machen Sie sich bitte klar, dass im Falle, dass der äußere Abstand
der float-Box sowie der innere Abstand des Eltern-Elements auf
null gesetzt werden, die fl oat-Box direkt an den linken bzw. an
den rechten Rand des Eltern-Elements grenzt (siehe Abbildung

In CSS können einem Elemen1
mehrere Klassen zugewiesen
werden . Dies ist nÜ1Zlich, falls
etwa einem Container mehrere
Eigenschaften zugewiesen werden müssen . Es hilft, die Anzahl
der erzeugten Container zu verringern.
<dlv class .. "wrapper front pag e">... </ dl v>
Alternativ kOnnen Sie <body)
eine ID zuweisen und damit
ebenso arbeiten .

9.25).

Befindet sich ein float-Element dagegen zwischen zwei
Block- level-Elementen, so wird es direkt unter dem vorausgehenden Block-Level-Element platziert. Hat dieses keinen äußeren
Abstand, so grenzt der Rand der fl oat-Box direkt an den Rand
dieses Elements (siehe Abbildung 9.26).

• Abbildung 9.25
Der außere Abstand der float-Box
sowie der Innere Abstand der
Absa1Ze wird auf null gesetzt. Die
Hoat-Box grenzt direkt an den linken Rand des Eltern-El ements .

.. Abbildun g 9. 26
Die float-BolI: befindet sich nicht
direkt unter dem Rand der
unteren BOII:, sondern überdeckt
sie und grenz t an das vorausgehende Block-level- Element.

Wenn das vorausgehende und das nachfolgende Block-levelElement nicht direkt aneinander grenzen, sondern etwa durch
Weißraum voneinander getrennt sind, wird die fl oa t-80x unter
dem vorausgehenden Element (nach dem äußeren Abstand)
erschei nen (siehe Abbildung 9.27).
9-3

Die float-Theorie

I

537

I

Abbildung 9.27 ~
Zwei Block-level-Elemente werden auseinander gehalten. Die
lloat-Bo)(, die sich im Markup zwischen beiden Elementen befindet,
grenzt an das vorausgehende
Block-level-Element.

Tritt eine fl oat-Box im Quellcode auf. so wird sie zuerst auf der
gegenüberliegenden 5eite ihrer float-Richtung platziert - und
zwa r möglichst weit oben, wo es genug Platz fü r die Box gibt.
Anschließend wird sie so lange in die float-Richtung verschoben, bis sie auf den inneren Abstand des Eltern-Element s stößt
oder auf eine andere f loat-Box trifft. Wird eine nachfolgende
f l oa t-Box in die entgegengesetzte Ri chtung gefloatet, so folgt
die Positionierung dem gleichen Schema, nur in umgekehrter
Richt ung. Gibt es für die f l oa t -Box keinen Platz, wird sie mi t
einem Um bruch auf die nächste Zeile (wie auch bei Inline-LevelElementen) gerückt. 50 wird beispielsweise eine links gefloat ete
Box zuerst möglichst weit rechts oben platziert und anschließend
nach links verschoben.
Eine fl oat-Box, deren Höhe kleiner ist als die eines gefloat eten
Vorgängers, wird ihr folgen und nicht etwa auf der nächsten Zeile
erscheinen . Als Beispiel betrachten Sie bi tte die Abbildung 9.28,
die auf dem Beispiel des Beitrags ,.The Floats« basiert (Quelle :
http://C5s-technik. de/ (55- ex a mpl e y 21 9 _9lbei spiel el thll mb nai/s2.
htm/ (Linkcode 357».
Sämtliche Boxen werden nach links gefloatet. Die Boxen
fl oa t 3 und f loat 13 haben eine größere Höhe als die anderen
Boxen; fl oa t 17 hat eine kleine re Höhe.

XHTM L:
<dlv id- " fl oa t s " )

<d iv ) Fl oa t <b r /) l </d iv )
<dlv ) Float <br /)2</ d1v )
<dlv ld" " float3 " ) Float <br /)3</ dlv )

<d i

v) Fl

oat <br /)4 </d 1v)

<d i v> Fl oat<br />5</ di v>
<dfv ) Fl oat <br /)6</d fv )
<dlv) Float <br /> 7</ dfv >
<dlv ) Fl oat <b r /)8</d lv )
<dlv) Fl oat<br/)9</div)
538

I

9

Web 2.0-layouts mi t (55 umsetzen

I

<di v>Fl oat <br /> l O</di v>

<dlv >Fl oat <br/> ll </ div >
<dlv >Fl oat <br /> 12</dlv >
<dfv ld .. ' fl oa t13" ) Fl o at <br /> 13 </ dlv )
<d i v>Fl oat <br !> 14 </di v>

<div ) Fl oat <br /> 15</ di v)
<d f v> Fl oat <br /> 16</df v>
<dfv ld .. ' fl oatl7 ' >Fl o at <br J) 17 </ dfv )
<d 1v>Fl oat <br/> 18</ di v>

<df v>Fl oat <br /> 19<Idi v>
<d f v>Fl oat <br/>20</ df v)

</ dfv >

(55 :
body

fo nt -s fze: 130~ :
f ont - faml1y: Verdana. Gene va. Ar ial. Helvetf ca.
san s - seri f;
text - align: left:
J

f/fl oat s
margln: 15px 10% l Opx 18%:

J
lifl oat s dfv (
fl oat: left:
.... ldth: 80px:
height: 80px ;

w\ idth: 6 2px;
hef \ ght : 62 px:

1* IE 5.x / Wfn Bo x Model Hack */
padding: 6px:
ma rgl n: 0 5px 5px 0:
bo rder: 3px so lid:
bo rder-co l o r: fld 3d 3d 3 :
ba c kground: l'a60 201;

text-alfgn: center;
co l or: /J ff B:
J

dlvflfl o atJ. dlvllfl oat1 3 . dlvl1fl o at17
ba c kgro und- col or: IIdd OOOO ;
co l o r: fi ffffff ;

J
dlvflfl o at3 [
height: l OOpx;

J
9 ·3

Die float-Theorie

I 539

div/Jfl a atl 3 [
heigh t : 140px;

I
d1v/lf l oatl7 (
height: 4 5px ;

I
Sie sehen, dass die Boxen 4 bis 7 an de r Box 3 hängen, genauso
wie Boxen 14 bis 16 an der Box 13 hängen . Da die Box 17 kürzer
als die anderen Boxen ist, lässt sie einen freien Rau m unter si ch.
Dieser Raum wird von fl oat 18 gefüll t und bleibt auf fl oat 17
hänge n. Analoges geschieh t mit der Box 19. Der freie vert ikale
Raum wird besetz t. Die nac hfolgende Box ri chtet sich an ihrer
Vorgängerin aus.

Ab bildung 9.28 ..

20 float-Boxen werden nacheinander positioniert. Die Boxen
. Floa t 4 .. bis . Float 7.. hAngen
an . Float 3 .. , . Float 18 .. hAngt an
. Float 16_, . Float 19.. an . Float
13 _.
Grundsätzli ch sollte eine fl aat-Box auf die nächste ZeHe genau
dann umbrechen, wenn si e auf der vorherigen Zeile - auf der sie
eigentlich st ehen so ll te - nicht genug Platz hat. Dies gilt auch f ür
gefloatet e Boxen, die dire kt hint ereinande r fo lgen. Problematisch
wird dieser Sachverhalt, wenn ältere Browser im Spiel sind. Im

[c learl
Mit der Eigenschaft cl ear für ein
Element, das einem gefloateten
Element folgt, können Sie sicherst ellen, dass gewisse Inhalte unter
der gefloateten Box angezeigt
werde n, diese nicht umfließen
und Seitenblöcke deutlich voneinander trennen.
540

I

Internet Expl orer 5.xlWin treten nämlich etli che fl aat-Bugs auf.
In d iesem Fall wird der IE 5.xlWin eine na chfolgen de f l aat -Box
nicht umbrechen, falls das Elt ern -Element keine Breitenangabe
besi tzt .

9.3.3

Das Attribut »dear«

Möchten Sie dafür sorgen, dass gewi sse Inhalt e eine fl aat -Box
nicht umfl ießen, sorldern automatisch u nter d er f 1aa t -Box angezeigt werden, so können Sie dies mit dem Attribut cl ear sicherstellen. Dies ist etwa nützli ch, wenn Sie Übersc hriften deutli ch

9 Web 2.0-layouts mit C55 umset zen

I

vom Inhalt trennen wollen. Das Attribut wird denjen igen Seitenelemen ten zugewiesen, die eine oder mehrere float-Boxen
nicht umfließen sollen. Die Eigenschaft setzt die Breite des jeweiligen Seitenelements auf einen maximalen Wert, damit die resultierende Box nicht mit dem Platz, der ihr durch die fl oa t - Box zur
Verfügung gest ellt wird, auskommt. Konsequentervveise wird die
Box unter die fl oa t-Box geschobe n. wodurch der gewünschte
Effekt erzeugt wird.

.. Abbildung 9.29
Der untere <:p>-Block umfließ t die
linke float-8ox nicht. Ihm wird die
Stilanweisung dear: left; zugewiesen {p {. .. clear: left; ... }).

cl ear kann drei Werte annehmen :
.. c lear: l eft: bewirkt. dass Inhalte linke fl oat-Boxen nicht
umfließen. rechte f loat-Boxen dagegen umfl ießen können .
.. c lear: rlght: bewirkt. dass Inhalterechtefloat-Boxen nicht
umfließen, linke f l oa t-Boxen dagegen umfließen können .
.. Mit clear: both: werden nachfolgende Inhal te sowohl linke
als auch rechte floa t -Boxen nicht umfließen und immer auf
einer neuen Zeile beginnen.
Eine zusätzliche Anwendung von cl ea r: both; ervveist sich in der
Prax is häufig als nützlich, ist jedoch bis dato relativ unbekannt.
Da float-Boxen aus dem Dokumentfluss quasi herausgenommen werden, werden sie auch von ihren Eltern-E le menten ignoriert. Dies hat die unangenehme Folge, dass hohe fl oat-Boxen
aus dem Container, in dem sie sitzen, herausragen können (siehe
Abbildung 9.30).
Dami t das Eltern-Element die float-Box mitnimmt und
umschließt, muss man ihm mitteilen, dass es weitere Elemente
gibt, die nicht von ihm umschlossen wurden. Dies wird dadurch
gemacht, dass man vor dem schließenden Tag des Co ntainers
(etwa vor </dlv» die Anweisung

HINWEIS

Beachten Sie: Ex istiert etwa
keine rec hts gefloatete Box . die
zu ei nem Block-l evel-Element
benachbart ist so wi rd cl ear :
r l ght : auch keinen Umbruch
verursachen.

<dfv st yl e- " cl ea r: both: " ></ dl v>
9.3

Die float-Theorie

I

541

einfügt. Dieses Pseudo- Block· level- Element wird dann die
float-Box nicht umfließen, sondern direkt darunter erscheinen.
Da diese Block-Box keine float-Box ist , wird sie aus dem Datenfluss nicht herausgenommen und gehört somi t zum Eitern-Element. Als solche wird sie vom Eltern - Element eingeschlossen .

.. Abb ildung 9.30
Oie linke Roat-Box ragt aus dem Eltern-Container
heraus.

.. Ab bildung 9.3'
Die float-Box wird vom Eltern-Element eingeschlossen. Trick: Vor dem schließenden <ldiv>-Tag w ird
<div style:«clear: both;«><ldiV> eingefügt.

9 .3.4
Float-basierte l ayouts
Im Grunde genommen stellen f l oa t-basierte layou ts die einfachste Methode zur Implementierung eines mehrspaltigen layo uts dar. Im Folgenden bet rachten wir ein Beispiel zur Entwicklung eines simplen zweispaltigen layouts mit
..
..
..
..
..

einem Header mit Suchbox .
einem Navigati onsmenO,
einer (ontent- Spalte,
einer Sidebars-Salte und
einem Footer

TIPP

Beachten Sie, dass die Standards
eine Unterscheidung zwischen
Groß- und Kleinbuchstaben der
Selektoren vorschreiben . Wird
etwa im XHTML-Markup
<d lv 1d- " Contalner" )

deklariert, in der C55-Datei
dagegen
IIconlalner I . . . I.
so werden die Eigenschaften von
fico ntalner überlesen.

542

I

mithilfe von fl oa t . Anschließend wird das layou t zu einem d reispaltigen layout erweitert.

Schritt für Schritt : Zweispa ltiges float - basiertes Layout

11

Markup festlegen

Bei der eigentlichen Implementierung eines l ayouts ist es wichtig.
die Struktu r der Seite möglichst früh in die jeweiligen Container zu
übersetzen und in einem (X) HTMl-Markup umzusetzen. Im l ay-

9 Web 2.0-Layouts mit (55 umsetzen

I

out sollten wenigstens fOnf Bereiche vo rkommen . Zusam men mit
einem sie ein~hließenden Wrapper ergibt dies insgesa mt sechs
<dl v>-Co ntainer. Sie werden im Markup wie fo lgt angeordn et :

XH TM l :
<div id - " contai ner " )
<dl v l d-" heade r" )
</ d1v )
<div id-" navbar " )</ div )
<div id- " content " ) </div)
<div ld - " sideba r ~ )</ dlv )
<dl v id- " f oot er "></ di v>
</ dlv >

EI

Container mit Daten fü ll en

Um einz elne Seitenbereiche besse rvoneinander unterscheiden zu
können, lohnt es sich, das obere Skelett jetzt schon mit semant isch korrekten Daten bzw . Markup zu füllen . Dabei ist es in der
Regel nützlich, si ch auf mögli chst wenige zusätzli che Angaben zu
beschränken.

TIPP
Eine in der (S5-Datei festgelegte 10 darf höchst em einem
Seitenelement zugewiesen werden; Klassen dürfen dagegen
mehrfach zugewiesen werde n.
Die Namen de r lOs und Klassen
dürfen nur [A. - l] , [a -z] , [0 -9]
so wie das Zeichen - (Hyphen)
verw enden. Sie dürfen allerdings
nicht mit einer Zahl oder einem
Hyphen begin nen .

<d1v id- " co ntai ner " >
<di v fd - "header ">
<hl>über SC hrl ft ( hl ) </ hl>
<f orm act i on- " pr ocess i ng . php ">
<p>< lnput va l ue- " Suche" 1></ p>
</ f orm>
<div i d- " navbar " >

<uD
<l 1><a
<l1> <a
<l 1>< a
<l 1>< a

hre f - " 11n kl" >Rubrl k
hr ef - " li n kZ " >Rubrl k
hre f - "l ink 3 ">Rubri k
hr ef - " 11 nk4" >Rub r i k

1</ a>< /1 1>
Z<I a> </1 1>
3</ a>< /1 1>
4</ a>< /11>

<l uD
</ dlv >
</ div )
<div id - " content " )
<hZ>Obe r sc hrH t ( h2)</h2>
<p>Lo rem 1psum vlx el1t .. . </ p>
<p>Eu cum df co f all1 i udl cabi t . . . </ p>
<h3) über sc hri f t ( h3)</h3)
<p>Lo rem lp sum vix el1 t. .. </ p)
<p> ... </ p>
</ dlv >
<div fd- "s idebar " >
9 ·3

Die fl oat -Th eorie

I

543

Ülwrschl"ifl (hl )

....."'"
• t.!..<iU

·

• b!.!ll.!

Olxr." , hrirt (hl)
\..0, ... , _

... " , . - - - = " - ....... """"' .. . .. 0:;....

.. t.o>- ... I!oo .. _ _ _ ... . ..... ....

Bo"'. .... I.IIIi_IbI..,,"' ____._
...,'" ''''''..'00_''.... tr... ,... _ _ _ " ......,

<h2> über s chr if t ( h2 )</ h2>
<p >Lo r em ips um vix el it ... </ p >
<h3> Ober s chri ft ( h3)</ h 3>
<u D
<1 i >< a hre f - " s llblink l" >link 1< / 03> </1 i )
<1 i ><03 hre f - ' s ub 1 i nk2 ' > l i nk 2</ 03 ></1 i )
<1 i >< 03 hr e f -" s ublin k3 " >Li nk 3</03 ></ 11 >
<li >< 03 hre f - ' s ub li nk4 ' > Li nk 4 </ 03 >< /1 1>
</ ul >

</ di 11>

t... .... _ _ ,11..--. ........ _....-.. ... 0'"

..t.r- ... I!oo .. _ _, _, . . . ..-....

.. Abbildung 9 .]2
Das layou t-5kelett wird mi t
Daten gefütte rt.

<di v id - " f oo t er " >
<p>e 2007 . ein Mus t e r beisp i el f Or e i n f loa t -bo3 s le rt e s
zwe i s paltig es Layo ut </ p >
</ div >
</ dill>

11
TIPP

Häufig Ist es bei großen Projekten bequemer, bei der Behandlung der 5c hriftgrö ße in
10er-Einhelten zu arbeiten.
Dafür wird die Sc hriftgröße
durch die Afßabe font - sl 1.e :
0 . 625 ell bzw. font -s lze :
6 2 . 5% auf 10 p){ gebracht (16 px
)( 0,625 : 10plC ). Dies hat den
Vorteil, dass man anschließend
bei de r Angabe der Schriftgröße
in ern-Einheiten bequemer rechnen kann . 1.6 em wird quasi
genau 16px entsprechen, wobei
die ta tsächliche 5chriftgröße
immer noch manuell einstellbar
und skalierbar bleibt.

Das <bo dy>. El e me nt mit Defa ult-Werte n verse hen

Um sicherzustellen, dass alle Browser mit glei chen 5tandardvorgaben arbei ten, werden alle Abst ände mi ttels Global Reset auf nu ll
gesetzt . Außerdem wird <body> mit einer grauen Hint ergrundfa rbe (fJeeeeee) versehen. Stan d ard mäßig liefern Browser eine
5chri ftgröße von 16px. Zu r besseren Übersicht wird als Sch rift
Del icious verwendet. So llte sie nich t vorhanden (dies wird meistens der Fall sein) sein, wird ein e de r generischen Schriftarten
verwende t . Abstände be i den Absätzen un d Überschri ft en sollen
dem 5ei tenbi ld darüber hinaus meh r Übersicht lichkeit verleihen.

.

{

margin : 0 :
pa dding: 0:
{

body
{

ba ckgro und-color : IJeeeeee ;
f ont: 1 .lem / 1. 3em De 11 c i o us , Geo r gia , lime s ,
"l ime s Ne w Roman ' , serif ;
hl. h2 . h3
padding: 0.7em 0:
{

p {
pa dding: O, 3em 0 :
{

544

I

9 Web 2.0-layouts mit (SS umset ze n

I

Die Schreibweise 1.1 ern/ I . 3 ern bei der Schriftangabe ist eine
übliche Kurzschreibweise für die Schri ftgröße (1.1 em) und Zeilenhöhe (1.3 ern) der Texte.
.. Abbildung 9.33
Global Reset des body.Elements
wird von Standardvorgaben
begleitet.

Überschrift (h, )

=,~,===]
.,..,
_lk,
.,..,
Ü be~c h rlft (hl )
~O'''Td~'''''''' ~ ;,Itl.OJ,'"" ................... " .... _
"",,; ...... t ... aJ ,,' ~ d <pUt _
tdom.

• • "'" Q.Jo (f"tMI' , .......,.,.....

,.m. ..

[ u d'" ,,",0 '''' 100 <0"". W pi

o:IotfW'C """''''''I .... ,mo..,;"",,,

(0""" ort>...,.. k:I""

h ... ""Ii'1""'" ..." 'u. h.... Idq. .. """'"'

U'oIJ" di,. con .......... nolu ... ..-.."..,. .... Qtti .... " ,rt ........ <I.

l oo .... Ip""" ....

~Il

"",11"." ... OJ >11

itd..... _

............1' ....!md .. 000. Q.Jo ""iM" <..... " ....... co"" .. "'brtl,.. 1d

~d '","_

"<,

,01 .. .. .,..,.

,ebt,........

[ "«rn <i<o I<lli iud,.'. w pr, domq<lDquen1 ,....
h .. nezI~l""'" [". h..
U\.u '" dia <C-rI>«;u.ot. ,,,,lU... n.-..." _ ... Qtti '""" , ,,,, ... >1>0 ...

~

td<J>< ..........

lo, .... I ~ ..... , "'~".wi .... ~.....n , ............., oI .. f.nd .. ~. Q.Jo,. ....... , <or,,,,,, ..... (0"11"" ClbnlU k:I .. ,.

i.'<lr"""" aJ 01, q . _ d <pUt....m ".h" .. 1<I>n<

D

Hauptcontainer {#cont ai ner} positionieten

Um die Seiten inhalte in die Mi tte der Seite zu setzen. wi rd der
Container mit einem horiz ontalen äußeren Abstand von sechs
Prozent der Bildschirmbreite versehen. Ein vertikaler Abstand
von 1 em soll dem Container sowie dem Layout genügend Platz
auf der Seite geben. Zusätzlich soll er einen weißen Hin tergrund
und einen Rand besitzen .
IIcontainer

TIPP

Um eine n Contai ner horizontal
in der Mitte ei ner Seite zu positio nieren. genügt es
margln : Oauto :

zu setzen und de m Container
eine Breite zuzuweisen, etwa:
'cont al ner I
wld t h: 801; margln : 0 au t o :
I

{

marg1n: l ern 6i:
background· co 1or: IIff ff ff:
border: Ipx so lid 111166cc:

...--....

ü bersdlritt (hl )

."""
~

-"........"'......._...................................
......... .................
-...........'._._
........_ft"'................................
__................. ..
......
Obe<><_ 0.,)

."- ..........._ ..."".......- _ .....,<--> .. ~-...---- . ". ,,, ....... ~ ....... _ - - _ .....
_- ~

,

, "'

~

_~

,

__
....... ...
"" ......
.
_
.
.
..
"'··......· ..........._............
......."....".... "....
C.. .......-..... ........ - .

_~

_"."'0)

... "....-..

,,..

-..............._.. .........

~ ..... .... "' ........ ,............ _ _ .. _.<--> ...... ____ . <._ d ............ ., ... _ _ _ _ ....

,

,

~

"'-"'._~

,....

.......................

_.-.,

~_

~

........ "' ... _,.",-." ... _ _ _ ...... <M . . . _ _ ' .... , ' -.......... ........ ........,. _ _ _

.... "

~-.

_""

~

.. Ab bifdung 9.34
Der Container #container wird
zentriert und mit einem Rand
versehen .
9·3 Die float-Theorie

545

D

Den oberen Seitenbereich {#header> positionieren

Die Überschrift der Sei te soll sich im linken oberen Seiten bereich
befinden, die Such box d<l8egen wird rechts oben platziert . Die
Positionierung der beiden Elemente geschieht mit fl oat-Stilanweisungen.
Zuerst wird der Header mit einer blauen Hintergrundfarbe versehen.
I/heade r
baCkground-color : #5599dd;

I
Anschließend werden die Überschriften 1. Ordnung nach links
gefl oatet. Jede fl oat-Box benötigt eine Breite. Diese wird auf
65% gesetzt. Damit <hl>-Elemente nicht direkt an den Rand des
Con tainers grenzen, sollen sie über einen horizontalen Abstand
verfügen. An dieser Stelle muss man beachten, dass die gesamte
Breite der Abstande, des <hl>-Elements sowie der Suchbox, die
Breite des layouts nicht übersteigen darf. Daher wird für <hl >
der horizontale Abs.tand von 2% der Gesamtbrei te des EIternElements gewäh lt. Dies macht schon wen igstens 69% der
Gesamtbreite aus. Für die Suchbox soll nun eine Breite gewählt
werden, die in die Seitenbreite passt und gegebenenfalls genug
freien Raum zwischen der Überschrift und dem Eingabefeld lässt.
Eine Breite von 20% sowie ein horizontaler Abstand von 1 %
genügen hierfür.
#header hl {
co 1or : fiffffff;
float: left;
width: 65% ;
padding: O.5em 21 ;

I
IJheader form {
paddlng: O. 4em 11;
float: right;
baCkground-color: lJ77aadd;
width: 20%;
margln: O.5em;

I
IJheader input [
paddi ng: 5px ;
ba ckg ro und - co 1or :fi f ff ff f:
border:2px solid flf6f6f6;
f ont-size: l em:

546

I

9 Web 2.0-layouts mit CSS umsetzen

I

co 1or : {lgggggg;
wldth: 70S: / * 701 de s Eltern-Elements f orm . /

I

m::.

Oberschrift (h, )

ObeßChrlfl ( hl)

~...... , _ .... noth, ...,s...,I'-',...... ""'''''' .1on::I.~ !OS.
.ld!..!!!!!!!.ld I!'S.

Qua ,. " ..........,....... t!!'1'!I
W,..,.. jil IQI","" ""UQUT"'" "'"'" 1I,,'dllOdbus ~I~ ........ II ". ~

'd;,~ "t.."""b"..

[u a ... 11<0 I, I W . ",,, •• ~ Pf11t>lro"l! tIo<IIAo .. ~ ,tlOII" ,d..,.. !>M ~et" ....... Wo ""' .. Id ""

-'1 . .. . ,., .

d

• •

__ "

,....

•

, ~-""" ,

h

. . . ._

... Abbildung 9.35
Die h1·0berschrift wird im
Itheader nach links gefloatet.
die Suchbox nach rechts.

11

Contain er für das Naviga tion sm enü (#navba r) set zen
Im letzten Schritt wurde de r finavbar·Container dazu gezwun·
gen, die linke sowie die rechte float·Box zu umfließen ; um dies
zu verhindern, wird cl ea r: both: eingesetzt.
I}navbar {
clear: both:
background' color: lJ77aadd:
padding: O.lem;

I
Dnavbar ul I
paddfng: O.6em:

I
{lnavbar 1 f I
di splay: lnline:
li s t 'style: none:

I
I}navbar 11 a I
paddlng: O.3em:
color: llfafafa:

Überschrift ( h,)
. ~_.

~1

~ J

_
~

....*'"

1p\UOIO ... .. , _ .... 1...... " U(. ... 3 .. a ...... '>d u 00\ ~ It ~ , _. " . _
( 9<'SI! A
4 M . ", 'O<"""Pi1 1.. _
• ..,. ........... ..., H.. I~ VOdM M dpi ......... cu oll " - - dI,.,.".... ""

.. In

01 ......-..

.""'.,. ' '''11.....I. l l .. prl ......... _
.I<pOIo<oo

O\ . e. QU llmuf ' r<!'SIbo . ,
.dIol! ( h,)

I,... ... OO .. dtOl1O. (\~ ""'~Jft\(Ir

.... ,... Iu.. tll4qw

\ooo1pIr"_ ... ..... ,~ .........""w _,,, ... t/>.u., . ~ .. <..........~ noIu .... ;"""'"

... Abbildung 9.36
Itnavbar und Itheader Oberdecken
sich nicht mehr - die lOsung wird
durch dear: both; geliefert.
gJ

Die float·Theorie

I

547

11

In haltsbereich (#content) positionieren

Der Seiteninhalt soll sich li nks befind en und w ird desha lb nach
links gefl oatet. Die Breite des Blocks wird auf 65 % gesetzt . Um
genug Platz zwischen dem linken und dem rechten Cont aine r zu
lassen, wird der in nere horizontale Abstand auf 3 % der Containerbreite gesetzt . Zusammen ergibt dies 71 % de r Gesa mtbreite
des Layouts.
I/co nt ent {
fl oa t : left:
wl dth: 651 :
paddl ng: O. 5em 31 :

I
~

Überschrift (hl)
MOl, ,~~, ~I ."~.

Obe,~I\r1 1t

(hz)

,.,... .,.... ... ..,_""'t-"........."" ......... .. ...
,....<0"'''' ...M

..,...,,.".........

. . . . " .. I<I ......
,U~ , _

Q. . ,, _ _

"@... , "'...." .....,, ........ .... ..

. ....... _ '...i"'.,."

!I'w. . . . '. , ""' ~ ' "',., ........ ~ _ .. ,.. ~ . . ." " .. .. , . ... , ..
""" ' ... ... fi U IUO ..,.,.., _ _
, ...,. ..........

,u,...," ..,"""....

........ ~ u..... ,' " " ""- ' ...."" ,......." .. "'" ,.,... ,,,....... ..

_ -"

.......
. .,..............,._ ..
... '.n""....... ,__ "'«>'"
,.................
........ . ''''''....'
""'''''...... '" "'........
,,, ......... w. .., . _ .... "".

~

.'I'""-''' ~-~

I:t.oo ...... ~)
,....... , ....... ~ , ....... 1. .... ' . ........

. ,_. "........
,....,,,_

Abbildung 9.)7 ...
Der Inhaltscontain er wird links
posit ioniert. Sowohl die Sidebar
als auch der Footer fließen um
ihn .

. 1...... .. .... "". " __

, _ ...... ,.. 1<1--. .. ''''u.,'' "'_" _
'"~ , _ . -- ,

....""....

... .... ......

"......,.., . .""

",
... "".,'''''''''~~". ''"_ ............,.,.. ~
...., ru. ... fi l j q'" """' . ........ , ...,." ....... 'u, ... <u .. , ..........
......... U.. M,'" '''''.-. ..... '.. i. ..... H'" ""',..... Jf'_ <'
_ .. S>u"o"" "" ........ i. ...... .... .... ... .... mI,,"" 'lOO" __
,......
( - ",,,
",,,. ,,,, "'
"
...'"......M
.....,••,••_."",,_
'.... ........

. . .......

~'

D

. ~

.""

.... _. ..... . ...

~

ClI1X1/. ' ., u .... ,, ~ ' .... ,.. ""
", .. -1>_ . . , . .. , ... .. ' , .......

Infospalte (#sidebar) gestalten

Die Sidebar soll zusätz liche, begl eitende Informati onen zum
Thema li efern . Ihre Schri ftgröße wird d eshal b ve rrin gert . Der Bl oc k
w ird nac h re chts gefloatet , seine Breite ergibt sich als Differenz
aus der Gesamtbreite des Conta iners (100 %) und der Breite des
flcontent-B locks und dessen innerer Abstände sow ie der inneren

HINWEIS

Ohne Festlegung eines horizontalen Abstandes (Im Beispiel
71 % ) würde ein sehr hoher
sld ebar-Bloc k, der am Rand des
co ntent-Blocks floatet, nicht immer rechts vom contenl-Block
erscheinen, sondern sich unter
ihm fortsetzen.

548

Abst ände des fl s l de bar- Blocks. Insgesamt also :
100 % - 65 % (/fco nten t) - 6 % ({/co nt ent paddl ng, 3 % + 3 %)
-6 % (fIs i deba r paddfng, 3 % + 3 %) = 23 %
IJs idebar {
fl oa t: r i ght ;
paddlng: 0 . 5em 3:1 :
f ont -s lz e : O. 9Se m:
backg r oun d - col or: I/cceeff:

1* 1001 - 651 (/Jcon t e nt ) - 61 (fJcont ent padd ing.

9 Web 2.0- layouts mit (SS um setzen

I

3'+3') - 6' (lJ s 1debar padd1ng . 3' + 3') - 23S AI
.... 1 dt h: 23' :

---.- __._, -

__ _
-

__
.. ....-_ ....... '. . _N __ . _
....................
... .
,...
,............ ' ... .......... ,-, ........,_.-... .., .
.....,.
....
... ...,."........
....
,...
"'-'_
...
.....
_,
..
.
__
,........
. _" .... " ... _..........."' ...... ..... .... .
,-00..""""
',.............. . ,......,""..........
__
.
.
.
_,
.
.
.
.
.
,"_
.
.
.
("koOk"'-_
............
,,,-,"'
.
.
.
,-,
,
_
.....
,.
. ... ,........""
- "'J
, ..... - .._ .. ,,,, __ .",""""""" .....
.
''',.,. .. _
..... ............. " ... " . ,-" ...."'. "'" ...
~

_--_

f.<......

'~

......." .... _ , _ ... , _ [, ............ ......

• , ... ......-. ......... _ . _ .. 1lOI ................ ..

_~ . n.

__
-

--__-

.~~

~I)

. ~

~'

,.,_ ... ,.01
~

11

•• ,, _

...... ' .. _ ' ... "

. ~

IlOI _ _ ..

... Abbildung 9-38

Hsidebar wird hervorgehoben .

Foo ter positionieren

Da die (ontent-Box nach links gefloatet wurde, fließen die nachfol genden Sei tenelemente an ihren recht en Rand. Dies gilt fUr
die Sidebar genauso wie für den Footer. Der Footer muss jedoch
im unteren Seitenbereich untergebracht werden und sich auf die
volle Seitenbreite erstrecken. Um die umfließende Wirkung zu
unterbrechen, wird cl ea r: both (cl ea r: 1eft würde auch gehen)
verwendet. Der Inhalt des Footers wi rd nach rech ts gerückt; die
Standardwerte für P. die sich von einem Browser zum anderen
ändern können, werden auf neue, einheitliche Werte gesetzt.

Ilfooter I
clear: both ;
ba c kground- co l or : 1l5599dd:
text-a11gn: r1ght:
co l or: /lff f:

I
Iff ooter P I
paddlng: O.5em :

J

,---_
__
_-_.
__
_._-

.............
..........
......_._ ..... __........ _
--.-.,-_
.. __ ._-.
[0 . . . _

t. . . _

.... _

. ~

J

. . . . . . . _ _ • _ _ .... _ _ ..

.......... , .. _ , ... _ _ ......... _ _... _

. ~

..

.... Abbildung 9.39
Der Fooler /l'footer befindet sich
am unteren Rand des Layouts.

9.3

Die float-Theorie

549

Das Ergebnis ist ei n flexibles, standardkonformes Seitenlayout,
das mit Prozentangaben posit ioniert wird und somit bei jeder
Bildschinnauflösung lesbar bleibt .

Im

Bugs fi xen

Wegen des eigenart igen Box-Modells im IE 5.xlWin muss dieser
Bug an dieser Stelle besonders unter die Lupe geno mmen werden. Für den Internet Explorer 6 muss folgende Angabe eingefügt
werden (dies ist einer der typischen Internet Explorer-Bugs):
IJfoote r
helght : U:

I
Um event uelle Darsteltungsprobleme mi t dem I nternet Explorer
zu verme iden, ist es außerdem wichtig, bei jeder Dekl arat ion, die
float: left oder floa t : rlght verwendet, die Stitangabe dis pl ay: in11 ne explizit anzugeben. Sie beugt dem sogenannten
Doubled-Margin-Bug des Internet Explorers vor (mehr dazu in
Kapitel 10, " Browserkompatibilitätc). Etwa so:
I/sldebar {
floa t : left :
display: inline:

I

m

layout anpas sen und weiterentwickeln

Einer der wesentlichen Vorteile von Floa ts besteht darin, dass sie
Seitenentwicklern ein flexibles Werkzeug bereitst ellen, mit dem
die Position von Blöcken leicht verändert und angepasst werden
kann. Um die Posit ion der Sidebar- und der (ont ent-Blöcke zu
tausc hen, genügt es nun, den Inhalt nach rech ts zu fl oaten und
den linken äußeren Abstand bei der Sidebar mit dem rech ten
äußeren Abstand zu versehen.
( 55:

IJcontent
/ * fl oat: l eft w1rd au f f l oa t: rlght ge<lndert */
floa t : right:
padding: O.5em 3:1 :
wl dth : 657;:

I
I/s i debar
550

I

9 Web 2.0-Layouts mit (SS umsetzen

I

1* float: right wi rd auf float: lef t gelinder t *1
float: left;
font- s1ze : O.gSem:
background'color: /Jd4ebf7;
paddi ng: O. Sem 3% :
wl dt h: 23%:

I

"
-__. . _--_
_
... . _... ....--...... .... .
,._
- __. . .". . . -....._
_._
. _-"'-"-..........,_'
...,,__-"
..................
_..- ..
..._
........
_
..
.....
_.""'
........._...........
_
...... ......... ..
...._.. _,..... ............. . . . . ... . .
_
"
.............
_
..........
..._......
......._, .........__........_.........,_
.. _......_
... .
... ...................
_....
"... ,_.....
'--,,-,
............ .. ......"'.',.............._..,
.....
........
..,._......
.. ..........
_
..._
. . ......._-,'-...
.... "'._"
\

~

~

-- ~ - '"

~ -­

.....

_~

--<~

_ ' ~""~' ''' _R
~~

~

,.~,

,

_,.~ '

OMttd.r!1t (lu)

"-.", .~,, ,_.

_

....

~"".~­

..... 0.,)

.,.,

. ~

,
'",,, .- .....

-- ~ --

_,

,",

(_

_"
,

. ~

.-.. ,'".

--<~."._--_
".~
~-_

,

~-,

~,~

"
~ ... " .. .,o.,)
. ~

., '."-'
~

. ~

~

"'.,,.. .. _ "..,
~

" "J

~:.;.:".:~==_.

--... .....,

.. Abbi ldung 9.40
Der Container-Block und der
Sidebar-Block werden mit zwei
(ode-Anpass ungen miteinande r
ve rtauscht.

'

m Dreispalti ges l ayo ut
Um das Layout zu einem dreispaltigen Layout zu entwickeln,
genügt es, eine Sidebar nach links, die andere nach rech ts zu
floaten und den Content-Container nach links zu floaten. Die
Angabe fl oat: right für den f!content-Bereich würde den
Block nämlich rechts von beiden Blöcken platz ieren, also auch
von IInexts1 debar. Beachten Sie, dass im Layout auf ein Prozent
der Sei tenbrei te verzichtet w ird - dies liegt an einern der Bugs im
Internet Explorer.

XHTM l :
<dfv fd- ' sf debar ' )
</d1v)
<dfv fd - " co ntent " )
</dfv>
<dfv fd- ' nextsidebar ' ) .. ,</dlv)
(SS :
licontent
paddl ng: 0, Sem 3% :
fl oat: left:
w1 dth: 471 :
/Js f deba r
fl oa t: left;

TIPP

Aus Granden der Zuganglichkeit
ist es immer von Vo rt eil, wen n
die SeiteninfQfmation möglichst
weit oben im Markup steht. Mit
fl oa t können Sie Seitenblöcke
links und rechts positionieren
- unabhängig dONon, wo der Seltenblock im Markup steht.

9·3

Die fl oat-Th eone

5 51

width: 20% ;
f ont- si ze: 0.95em;
background-color: #d4eb f 7;
paddlng: 0.5em 1. 5%;
}

I!next s i debar
fl oa t: rf ght :
wl dth : 201;
font- si ze: 0.95em;
background-color : I!d4ebf7;
padding: O.Sem 1. 5%;
}

-_-_
..•.....-._.......
_
..... . ..
......-_
_
...._
. _-_
_
...
-_
.. _................_.__....__--_..._. .. .

__ w __

_.-

...-....._w
.-__
...
__•...

...

"~-

-"._-~

"---.,

~

....,"-,,- ...... _..... ..
~

~ .-

_ ____
_-

::::.:::..":"::""""

_
_
-__._--.__
__ _._-____-

.-

::.::='" ' -

......-iII!,

.........
-_."
.. _..........
..."-"'.......
.........
H
' ' _' _
_
_'_"".......'_
-.... ''
.. _......
_..........
._--.
.............
_--''''
..........
'
.,__...... . ."
......
.
_-,.._. . ......
_..-,"
...... .... .....
.............. .. ..... ".. ..
"'~

.. ""

. ~

. ~
. ~

."
."

~

Ab bildung !:J.41 •
Ein dreispaltiges. float-basiertes
layout

~

Die Verschiebung des content-Containers im Markup verändert
die Positionen der Blöcke .
XHTM l :
<dfv ld - ' content ' )
</ dlv )
</ div)
<dfv fd- " sfdeba r" )
<d 1v 1d- · nextsidebar · ) ... </ div)

_
. .. _n
. . . ... ._
--_
.
.
_-......
_.
_-_
_
..
'
"
--_
-."
.- __
__..........__- '_...-..

_._..... __..................
.............._M_
........... ,.....-.-..
....,-_
-..
..-._
,......
-...
_
......
...
.........
............
.._..
,,_......"""' .... ..
.... . ........ ..
",-"._'"
......
. ....
.. "
_.-.. . . _. . _N_ .... _
~

'.-~. _

_

.... _

. . .h

_ _ .. _ . _ _ . . . . , ..

~--~,.--- -

;,:::.~.-

..

........

""""-<9: .. __ ..
_~_

... ~ ...~-::.:.."Z'-

_
,-_
_
.. _
__... ....._ __----- ...... __ _ _ ,.~

.. -.
...........
.....-.....
............
_.,,"'_a
.................
..........
.••• _ _ .. _ _
_ ........ ..
..
. .... . ,-_
... ..
.....
..........
........
.
..
..
... ... .... ...
_,_.~

.~

Ab bildung 9.42 •
Mit wenigen Verä nderungen können float-Boxen in horizontaler
Richtung beliebig verschoben

werden.

552

9

."

.~

. ~

~

_,,-_.~
~.

web 2.0-layouts mi t (55 umsetzen

_-~- , -

........ ..........

I

Spalten mit gleicher Höhe

9 ·3·5

Häufig werden Sie bei der Implementierung eines modernen
Designentwurfs dafür sorgen wollen, dass die Hintergrundfarbe

eines Blocks - etwa einer Informationsspalte (#Sldebar im oberen Entwurf) - mit der Höhe des höchsten Blocks (flcontent)
übereinstimmt. Dies ist typisch für Designentwürfe, bei denen
Spal ten mit einer Hintergrundfarbe bzw. einem Hintergrundbitd
versehen werden sollen.
Standardmäßig hat eine beliebige Box die minimale Höhe, die
durch ihren In halt sowie den inneren Abstand begrenzt wird. Um
die Höhe der Box zu vergrößern, muss man zu Methoden greifen,
die künstli ch den gewünschten Effekt erzeugen. Betrachten Sie
zur Veranschaulichung des Problems Abbildung 9.43 und Abbildung 9.44.

_. _._.-.
-_... _._'
..............
_.. - --....-_
..-. . ...........
_,............. .
_.... ...,-__
.. .............
- ... .......................-.
. .-............
-_.... _._
.............
... _
.. ,._._..-...
_
..
_--_
......
..
-..... ._
......... _-- -_.....
......_.... _.............
___._
. ...........
-... ..
.....,_
.......
. . .......
O~J~dlrlll (hl)

'" . ,,"_

~

., -~ _

~, '
_-~,
.... a. " '"" ..... ...... __
.....,.......
.... _ ..

"'

~

..... .... _. ,.,...:.:::::'::::':::.:~
~._.~,

""""'-"_ _
' .. u

~_~

••

::;::':''',!;':::':'' ...-

~-

-"-"' "-" ~-_._ ' ''''' ''
"",-

~'-.. . _

..-..,"' . ... _ _ _ ""8",.. _ ..._ •
_

_

_

• •_

,

.. ..... u _ _ _ .. _

. ~~
_ . . ""

.","'-_0-_-..'_.-

~

• Abbildung 9.43
Die rechte Spalte nimmt nur so viel Platz ein, wie
der Inhalt fOr sich benötigt Dies ist an der Hintergrundfarbe erkennbar - diese wird für die ganze Box
definiert.

_ _ _--_.__- __
_ _ _--_._
_-'_-'----_ __
_.- _

... _
..........
_.....__
."" .........
.. ......._.........
._.....-......... .. .......... .".. ...---....... . .........
_...-..........-...._......
__.........
..........-,..._...,..._. ....._._
..._
......
",, '-.".... _"
. ............
.,":c"
....._....._....
." _..... -................ -~
..
...
_-,_
.~-'--"""'''--'---__
.... .....
...
.. .......
..... .
._
__. . .........
.. ......",,.. .._K._
_""--_
.
__
..
__
...
.
..
. _"". .. .
""_.....
.
"
_
.
.... . ""..
.-........
....,..... -... .. ...'--~"
....~.,-".-,.-_
.... _'-""!
,

....."..-..,

._-~

'-~

---~

"' ~ ._

~

. ~

..,~

~,,~

-~,-_

.. Abbildung 9.44
Die rechte Spalte erstreckt sich über die gesamte
Seitenhöhe.

Grundsätzlich gibt es zwei Techniken, mit denen die Hintergrundfarbe einer Box auch uber ihre Grenzen hinaus. erstreckt werden
kann.
Equal Height Columns I Eine mögliche Vorgehensweise bietet
die Technik Equal Height Columns. Die Methode basiert auf drei
C55-Attributen, die in die C5S-Datei zusätzlich eingefügt werden.
.. Wi rd ei n/Js i deba r - Block innerhalb eines Containers platziert,
so wird der Container mit der Stitangabe overflow: hidden
versehen;

9·3

Die float-Theorie

553

.. anschließend wird f!sidebar mit einem inneren Abstand versehen, der größer als die mögliche Höhe des Layouts ist (z. B.
IIs1deba r {paddfng-bott om; 9999px:I);
.. schließlich wird für !Jsldebar ein negativer äußerer Abstand
gesetzt, dessen Wert mit dem des inneren Abstands überein stimmt (sidebar (margin-bottom; -9999px; 1).
Was dadurch geschieht, ist rein intuitiv nicht unbedingt klar:
Wegen des großen inneren Abstands wird die Höhe der fJsfdebar-Box künstlich vergrößert. Der gleich große negative äußere
Abstand sorgt dafür, dass der Dokumentfluss gerade auf die Stelle
springt, wo der innere Abstand anfängt, und zeigt weitere Seiteninhalte ab dieser Position an. Dies ändert jedoch nichts an der
Tatsache, dass die Box eine Höhe von 9999 px besitzt. Demzufolge erstreckt sie sich weit über die Grenzen des Layouts hinaus.
Damit die Hintergrundfarbe nicht auch hinter dem Con tainer des
Layouts angezeigt wird und somit die Höhe der Seite nach oben
treibt, wird fJcon tainer mit dem Attribut overfl ow; hidden versehen. Dadurch werden übergroße Inhalte, die si ch innerhalb
von fJcon tai ner befinden, automat isch abgeschni tten.
Die Methode funktioniert einwandfrei in allen gängigen Browsem, abgesehen von älteren Versione n von Opera (bis einschließli ch Opera 8) sowie IE 5/Mac. Die zusätzlich erforderli chen
Anpassungen für ältere Browser finden Sie in dem Beitrag " Eq ual
He ight Col u mnsc (h ttp://www.positioni5f.Vf.rything.nf.t/artidf.s/
onetruelayout/equalheight (Li nkeode 358)).
Auf das obere Beispiel angewandt ergibt dies den folge nden
zusätzlichen QueJl code :
ficontal ner {
ove rflow; hidden :
IIs1debar {
paddlng-bottom: 9999px :
mar9in-bottom; -9999px:

J
I/f ooter {
over fl ow; hidden:
1* Wird benötigt, damit der Footer-Berelch in den
Vordergrund tritt *1

554

I

9 Web 2.0-Layout s mit (55 umsetzen

I

Im Safari-Browser unter fIN1c wird der fl f ooter-Bereich dagegen
als Folge dieser Veränderungen zu einem schmalen linken Rand.
Die folgenden Angaben weisen dem Bereich eine feste Breite zu
und liefern auch In Safari die gewünschte Darstellung:

(55 :
gfooter
wfdth: 100S;
display: block;

Übersc hrift (h2)
lor~m IP~UTI ,ix fti( wdiam
invtrirt Ul dttr,lxit tlei lend

N eO$ QllO

te olpm

( on<>tC rtllJlO I Congllf'
ulb.uiu.~ id ius, no corrUfllit
11IrqullM Yotllpt~ lum IJri 1I ~'i
td \IO( lb US suS{lplanu,lt , (U sl l
quaeque dJSputmdo
ttl Ol mldms ,

übel schritt (h3)
• Uri<.

1

• Ur'" 1

Außerdem wird der {Jfooter-Bereich in Opera 9 vom f!sfdebarStreifen überdeckt. Um ihn zu entfernen, wird der Footer-Block
relativ posit ioniert:

(55 :
Dfooter

• Uri<. I

• UT1t 4

-----'

... A b bi ldung 9 . 4 5

Der Inhalt ragt über die EIternBox hinaus.

position: rehtfve :

J

Exk urs: »overfl ow« I Befindet sich ein Seitenelement innerhalb
eines anderen Seitenelements, dessen Breite bzw. Höhe festgelegt sind oder durch seine Inhalte begrenzt werden, so kann eine
übermäßig große innere Box nicht im Rahmen ihrer Eltern-Box
platziert werden, Das Problem t ritt etwa auf, wenn ilcontent

Überschrift ( h2)
l Ol emlps un vlx e-IH ~dl.un
in\ll!nilf ut, detuxil ('te Ifnd
I!'d. I!'OS. DUO te ol1<YTl

COn$e<teiUer. (onnR'
lrlunil.1\ td itts, nll cornlmpit
IOlqU;).IOS volupl.iUlll qul H.i6
id yoc ibus mscij:i....lll', cu si t
(IUeOUe disoutando

nicht breit genug ist, um ein Bild in großer Auflösung darzuste llen
oder um Inhalte komplett anzuzeigen.
... Abbildung 9 . 46

Der Inhalt wurde abgeschnitte n.

XHTML :
<div ld· " box ")lorem ipsum . . . </d ;v)

(55:
Dbox
width: 200px:
he1ght: 200px :
J
Mit dem overflow-Attribut kann geregelt werden, wie übergroße

Überschrift (h2)
lor('(T1 ip ~um vt~ ellt .tudilm
Inveolrt ur. oeuUlt
fteilend fiI eo~, Quo le
~g.1m COnstC le-tuel. ~

urb.,iln id im, no
corrllmpit lorqU,lt os
Vo!Wl ... l11m wi. Hu id

innere Elemente eines Containers behandelt werden sollen. Es
kann vier Werte annehmen :

... Abb ildun g 9 .47

... overflow: auto: keine explizit en Angaben

Scrollbalken bel overflow: 5croll
9.3

Die float-The-orie

I

555

HINWEIS

Beachten Sie bitte, dass der Internet Ellplorer bis zur Version 6
bei der Angabe v! s! bl e das Element so weit vergrößert, bis der
Inhalt vollständig sicht bar ist .
Opera 6 stellt auto wie vI s 1ble
und se ro11 wie h' ()jen dar.

Der Bromer bzw. die Vorlesesoftware darf selbst entscheiden, wie Inhal te angezeigt werden.
.. over fl ow: visible ;
Der Inha lt der BOll soll aus der Eltern-Box so weit herausragen, bis er vollständig angezeigt w ird.
.. over f low: hidden;
Der Inhalt, der d ie Grenzen der Box überschreit et , wird abgeschnitten .
.. over f l ow: scro ll ;
Der Inhalt , der d ie Grenzen der Box übersch reitet , wird abgeschnitten. Ein Scrollbalken saH die Navigation im abgeschni tt enen Bereich ermöglichen.

overflow
Weitere Details zur Verwendung
des Att rib uts ove r flow sowie zu
anderen Eigenschaften fur die Positionierung und Anzeige von Elemen te n finden Sie in der übersicht " Positionierung und Anzeige
von Elementen« (http://de.
selfhtml.orglm l eigensehaftenl
positionlerung. ht m).

Fau)C Column s I Die zweite Methode, auch Faux CofummMethode ("falsche Spalten«) genannt, setzt im Gegensatz zur
Equal Heights Co/umm-Met hode auf einen optischen Effekt un d
hat mi t der t echnischen Seit e von (55 nur wenig zu tun. Im
Grunde genom men wird bei Faux Columns dem Container ein
Hintergrundbild zugewiesen, das als Hintergrundbild sowohl für
lico nt en t als auch für 115 ideba r agieren soll. Das eigentliche Bild
ist nur wen ige Pixel hoch, seine Breit e urnfasst die ganze Brei te
des Layout s.
W ird das Hintergrundbil d in einem Containe r verti kal un t ereinander wiederhol t (mit der backg r ou nd- repea t -E igenschaft in
(SS), so e ntsteht die gewünsch te visuelle Ill usion, dass die Seitenblöcke selbständige Spal ten darst ellen - und zwar ganz unabhängig vom Inh alt d er jeweiligen Boxen.
Der Quellcode könnte etwa so aussehen:
fico nt ai ner {
background : I/ ff f url (hi nte r gr und . png) repeat -y ;
}

Fau)C Columns
Die Faux Columns-Methode
wurde von Dan Cederholm
entwickelt. Einen Beitrag zum
Thema find en Sie unter " Faux
Columns« (ht tp://www.
allstapart.com!art/des!
f auxeolumns, linkeode 359).

556

I

Das Hinterg rundb ild wird da bei so gewäh lt , dass die im layout
vorkommenden alöcke gerade mi t der jeweiligen Hint ergrundfarbe versehen werden . Im ein fac hsten Fall lassen sich l ayouts
fester Größe auf diese W eise leicht mit einem Hintergru ndbild
überdec ken. Eine prazise Festfegung der Farben f ür di e jeweiligen
Bereiche erzeugt den ge wünsc hten Effekt .
Sollte also ein zweispalt iges Layout die feste areite von 750 px
besi tzen, sodass der linke ficon t ent- Bereich (zusam men mit den
inneren und äußeren Abstän den) eine Bre it e von 540px und der
rechte fJsi debar-Be reich eine Breit e vo n 210px hat, so sind di e
Hintergrundfarben entsprechend zu verteilen. Das gesamt e Hintergrundbild wird eine Breite vo n 750 px haben, der Bereich vo n

9 Web 2.0-Layouts mit CSS umset ze n

I

Opx bis 540px wird mi t der ersten Farbe, der Bereich von 541 px
bis 750px hingegen wird mit der zweiten Farbe gefüll t Dabei
kann der Designer selbst festlegen, wo die eine Farbe en det und
die andere anfängt. Da mit Bildern gearbeitet wi rd, sind auch
beliebige fließende Übergänge möglich. Auf diese Weise lässt sich
auch das body-Element mi t einer Hintergrundfarbe versehen, um
etwa einem Se it enlayout einen abgerundeten Rahmen zu verleihen.

Hintergrundbild

Problematischer wird dies bei Layouts, die keine feste Brei te
besitzen. Dann lassen sich die Hintergrundfarben für die Blöcke
nämlich nicht pixelgenau posit ionieren, da die Posi t ion von Seitenelementen im Container etwa von der Bildschirmauflösung
abh ängt . In solchen Fällen erzeugt man ein breites Hintergrund bild (z. B. hintergrund.png, etwa mit einer Breit e von 2000px,
dam it der Effekt auch für Bildschirme mit hoher Bildsch irmauflösung wirkt) und füllt dieses in gleichen Proportionen aus wie
die Breiten der Blöcke im Layout.
Sol l der linke Block etwa 70% und der rech te 30% des
Gesam t layout s besitzen, so füll t man die ersten 1400 Pixel
(0,7 x 2000px) mit der Hintergrundfarbe des ersten Blocks, die
übrigen 600 Pixel mit der Hi ntergrundfarbe des zweiten Blocks.
Wir wollen, dass der Fo ku s des Hi ntergrundbi ldes so eingerich tet wird, dass genau 70% des Layouts mit der jeweiligen Hintergrun dfarbe gefüllt werden; das heißt , unabhängig von der Größe
des Layouts soll nach 70% der Gesamtbreite der Wechsel von
einer Farbe zur anderen stattfinden.
Genau dafür sorgt die Anweisung

.. Abbi ldung 9.48
FalDC Colum ns. Ein breit es Bild
wird als Hintergrundbild des
Containers verwendet. Mit einer
pixelgenauen Platzierung der
Hintergrundfarben lässt sich der
opt ische Effekt von Spalten erzeugen.

TIPP

Werden Seiteninhalte dynamisch positioniert so kann man
dem layout kein pixelgenaues
HinteIBrundblld zuweisen. In
Abhängigkeit von der Bildschirmauflösung soll sich das Bild
entsprechend ausdehnen. Dazu
wird in der Praxis ein breites
Bild verwendet das mithilfe der
backg r ound -pos I t I on-Eigenschaft mittels (5S positioniert
wird.

/iconta1ner [
background: ur1(hintergrund.png) 70% 0 repeat-y;
}

für fJcon ta 1ner.
Wie Sie bereits bei der Technik CSS Sprites gesehen haben,
erlaubt die obere Angabe, welche die Kurzschreibweise für back9·3

Die float -Theorie

I

557

ground-image und background-position darstellt, den Fokus
des Bildes, also den Punkt auf dem Hin tergrun dbild, ab d em das

background -po sition
Bel rel ativen Angaben der Eigen schaft bac kgrou M - pos j tl on beziehen sich die Werte nicht auf
die lin ke obere Ecke, sondern
auf di e Größe des Bildes.

Bild angezeigt wird, be lie big zu posit ionieren.
An dieser Stelle ist es sehr wichtig zu verstehen, was dabei
geschieht. Besitzt die bac k 9 ro und - pos i t i on- Eigenschaft feste
Werte (Pixel), so wird der Fokus, der ursprünglich auf die linke
obere Ecke platziert wurde, um die jeweiligen Werte in hori zontal er und vertikaler Richt ung bewegt . Bei rela t iven Werten ist dies
grun dlegend an ders_ Die Prozen tangaben beziehen sich nicht auf
die lin ke obere Ecke, sondern auf die Größe des Bildes. Wollen Sie
also dafü r sorgen, dass der Fokus auf einen Punkt gesetzt wird, der
eine horizon tale Verschiebung von 70 % des Gesam tbildes ausmacht und 70% der Breite des Layou ts einnimmt, so ist dies die
richtige Angabe. Machen Sie sich bitte klar, dass der Fokus nicht
nur auf eine best immte Position im Bild gesetzt w ird, sondern dass
dadurch auch seine Posit ion im Container fes tgelegt wird.
Erwähnenswerte Beiträge zum Thema sind unter anderem :
... »Creating liquid Faul< Columns..

http://www.communitymx.com/cont en Va rticl e. cfm ?c id=afc 58
(Li nkeode 360)
... »S liding Faux Columns «
http://meyerweb. comleric/thoug h tS/2004109103/ si idi ng-f auxcolumns (Linkeode 361)
... »FaUl< Co lumns for liquid l ayo uts«
http://www.ilovejackdaniels.com/C5S/fa ux -colu mns -for -li qu idlayouts (Linkcode 362)
Eine weitere Technik, die für ein drei spal t iges Layout zwei Hintergrundbilder verwendet , wird in dem Bei trag »Elastic Fa ux
Col u mns« (http ://nickcowie.comI2005/elastic -fa ux -colu mns (Lin kcode 363» vorgestellt. Sie berei tet in älteren Versionen des
Safari- Browsers allerdi ngs Probleme .

9.4
mherit
Zusätzlich kan n man I nher l tals
Typ der Positionleru ng angeben .
Dann wird der Typ der Positionierung vom Eltern -Element
vererbt.

Relative und absolute Positionierung

Neben der f 1oa t -basierten Positionierung stellen d ie relat ive und
die absolute Posi t ionierung weit ere Met hoden dar, mi t denen
sich die St rukt ur einer Sei te fest legen lässt .
CSS 2.1 stellt insgesamt vier Typen zur Posi t ionierung von Seitenelementen bereit: stati c, re 1ative, abso 1ute und fixed .
Wie Tommy Olsson in seinem Beit rag .. Web Design 10 1:
Posit ioning«' anmerkt , sind die Beschri ftu ngen f ür die einzelnen
1 .Web Designg 0 1:

P~i ti oning~,

Digi tal Web Magazine,

http://www.digitdl. ~ b.CDm/drtide5l~b _design_1 01...Jx)5itioning

558

I

9 Web 2.0-Layout s mit C55 umsetzen

Positionierungstypen in der Spezifikation von (55 2.1 eher ver·
wirrend als selbsterklärend. So ist beispielsweise ein st ati sches
Element nicht stat isch, da es beim SerolJen der Seite mi tbewegt
wird.
Ein relativ positioniertes Element steht in keiner Relation zu
anderen Element en und bezieht sich immer auf sich selbst. Ein
absolut positi oniertes Element wi rd ni cht mi t absoluten Angaben versehen, seine Posit ion wird relativ zu anderen Elementen
festgelegt. Ein nxiertes Element ist insofern nx, als dass es absolut
und st atisch positioniert w ird . Viele Begriffe sorgen nicht unbe·
dingt fü r Klarheit und werden häufig durcheinan der gebrach t.
Blic kt man auf die Positionieru ngstypen dagege n aus der
Perspektive des Dokume nts, in de m sie verwendet werden, so
erkennt man :
... Statische Elemente sind stat isch im Hinblick auf den Datenfl uss,
... relativ positionierte Elemente sind relativ zu sich selbst,
... absolut positionierte Elemente verhalten sich absolut zu anderen Element en,
... feste Positionierung lässt Seit en elemente an einer Posit ion
im Layou t unverändert - gleichgult ig, ob gescrollt wird oder
nicht.

I
HINWEIS
Bei der rela ti ven und absoluten
Positionierung von Seitenelementen werden die Begriffe häu fig durcheinander geworfen.

Die folgende Übersicht soll anhand von Beispielen eine Ordnung
in den Begriffsdschungel bringe n. Ein wich t iger Begriff ist dabei
Containing Blocks.

9.4.1
Cont ainin g Bloc ks
Ein wich tiges Konz ept , das in der Spezifikat ion von CSS sehr
abst rak t gehalten und äußerst vage definiert wird, ist das Konzept
von Containing Blocks . Grundsätzlich ist darunter eine Block-Box
zu verstehen, die weitere Boxen enthäl t . Da raus leitet sich beispielsweise der Name für <d1v>-Container ab: Sie stellen immer
Con taining Blocks dar, falls sie Seitenelemente beinhalten. Zur
Veranschaulichung bet rach ten Sie bitt e das folgende Beispiel.

TIPP

Ei ne Erläuterung des Begriffs
Conralnlng l10ck fi nden Sie in
der offiZiellen Spezifi kation von
(SS 2 auf der Seite: http://www.

w 3. OIg/TRlRE C-CSS2/v1 suren.
htm/ltcontalning-block (linkcode 364)

<d i v>
<p>Pa ra gr ap h<1 p>
<uD
<1 i> Efntrag 1</11>
<li>Eintrag 2<11i>
<I uD
</ div >

9-4

Relat ive und absolute Posit ionierung

I 559

So sind im oberen Beispiel di v-, p-, ul - und li - Elemente Containing Blocks. d 1Y ist ein Containing Block für p und u 1, P ist ein
Con taining Block für den Tex tstring Paragraph; ul ist ein Containing Block fü r die Listenelemente 11 und 11 ist wiederum ein
Containing Block für die Strings Ei ntrag 1 und Ei ntrag 2.
Wird einem Element die Breite von 30% zugewiesen (width:
30i;), so bezieht sich die Prozentangabe auf die Breite des Containing Blocks. Für jedes Element, das nicht absolut positioniert
wird, ist der Containing Block der direkte Block- l evel-Vorgänger,
der das Element umfasst. Ex istiert fOr ein Element kein Vorgän ger (etwa beim html-Element), 50 wird die gesamt e Seit e (das
Fenster im Browser. in dem die Seite angezeigt wi rd) als dessen
Containing Block definiert.

9.4.2

Statische Positio ni eru ng

Die sta tische Positionierung von Inhalten (position: static;)

HINWEIS
Statische Elemente sind statisch
im Hinblick auf den Datenfluss.
Die statische Posit ionierung ist
die Standardposllionierung. nach
der Seiten inhalte ohne weitere
explizi te Angaben auf Seiten
pla tz iert we rden.

stellt die standardmäßige Art und Weise dar, wie Inhalte auf einer
Seite positioniert werden. Die Inhalte erscheinen im Browser
genauso, wie sie im Ouelicode stehen. Im Grunde genommen
sorgt die st atische Positi onierung d afür, dass Block-l evel-Elemen te durch ZeilenumbrOche vonei nande r getrenn t und Inlinel evel-Elemente zu Inline-Boxen werden.
<d i v i d-" conta 1ner ~ )
<p)lorem ipsum . . . (/p)
<p cl ass- Mposlt l oned " ) Mel ad malorum ... (/p)
<p) Eu c um dico f all i . . . </p)
</div)

Abbildung !M9 '"
Alle p-Boxen werden standardmolBig statisch positioniert.

Wird für ein Element keine Positionierung explizit angegeben, so
w ird mit seiner sta tischen Posit ionie rung gerechnet.

9.4.3

Relative Positionierung

Bei der relativen Positionierung (pos 1tl on: re 1atl ve) wird eine
Box zunächst wie gewohnt dort platziert, wo sie bei der 5ta-

560

I

9 Web 2.0-la)lOuts mit CSS umsetzen

tischen Position ierung auftauchen wü rde. Alle weiteren 5eiten elemente we rden entsprechend ausgericht et. Das nachfolgende
Block-Level-Elemen t wird etwa wegen eines Zeilenumbruchs
darunter pla tziert. Anschließend wird die Box vertikal und horizontal verschoben ; die genaue Position wird durch die relativen
Angaben top, bot tom, 1eft und ri ght festgelegt. Deshalb macht
es in diesem Kontext Sinn, von der rela tiven Positionierung von
Element en zu sich selbst zu sprechen.
Die vier Angaben geben den Abstand (sowie die Richtung) an,
um den (i n die) eine Box von ihrer ursprüngl ichen Posit ion bewegt
wird. Neben absoluten px- oder pt-Angaben können auch relative Werte - etwa % oder em benut zt werden. Diese beziehen
sich auf die Eigenschaften der Box, also ihre Bre ite und Höhe. So
sagt etwa top: 20px: aus, dass die Box um 20px nach unten von
der oberen Kante der stat ischen Box bewegt werden soll.
Auch negat ive Werte können benutzt werden: rl gh t : - SOpx ;
bedeutet etwa, dass die Box um 50px nach rechts bewegt werden soll. Beachten Sie, dass die Box bei der Eingabe von entgegengesetzten Richtungen, also zum Beispiel
p

posH; on: rel at; ve:
left: 30 px:
right: 40px:

I

HINWEIS

Relaliv positionierte Elemente
sind rela tiv zu sich selbst. Mit
den Attributen top, bot tOri,
left urd rlght können sie
von der Posit ion , an der sie bei
ei ner statischen Positionierung
stehen würden, weg verschoben
werden.

oder
p I

position: relative:
t op: 30px :
bot t om: 40px:

nur den ersten auftretenden Wert interpretiert - der zwe ite wird
ignoriert.
In der Praxis könnte die relative Positionierung in etwa so aussehen (der XHTML-Code wird aus dem obe ren Beispiel übernommen) :
p.wlchtig
pos it ion: r ela t ive:
left: -Sem:

9.4

Relat ive und absolute Positionierung

I

561

Abbildung 9.50 I>
Die grüne Box ist relativ posit iOniert, sie wird relat iv zu sich selbst
um 5 em nach links bewegt.

Stack Order
Untersc hiedliche Browser gehen
unterschiedlich mit der Anzeige
von relat iv positionierten Element en um . Manchmal überdec ken sie andere Elemente,
manchmal werden sie selbst
überd eckt. Deshalb em pfiehlt
es sich, bel Boxen, die einander
überdecken können , die sogenannt e Stack Order, al so Reihenfolge der Box- Sc hichten, genau
festzulegen . Dies geschieht mit
dem l - l ndex-Attribu t.

Relat iv posi tioniert e Boxen könn en andere Sei ten elemente überdecken.

p. wi c htf 9
pos iti on : re l at ive :
l e f t: -Sem :
top: 2ern ;

I

Abbildung 9.5 1 ..
Die relativ posit ioniert e Box überdeckt die unt ere Block- leve l-Box.
Das En t scheidend e dabei ist, dass die re lativ positioni erte Box fü r

TIPP
Grunds.lt zlich sollten Sie nur
Block- Level-Element e relat iv positionieren. Bei Inline-level-Element en t auchen bei den unterschiedl ichen Implementierungen
der Browser Unterschiede auf.

562

9

alle anderen Sei tenelement e immer noch den Platz auf der Seit e
einn immt , der ihr durch die stat ische Posi tion ierung eingerä um t
wird. Dieser Platz ist somit für alle andere Elemente genauso
besetzt, als w enn das Element stati sch posi t ioniert wäre.
Wird etwa eine relativ positionierte Box weit über d as Seitenlayou t hinaus verschoben, so bleibt im layout ein freier Platz, d er
ursprüng lich von der bewegten Box besetzt worden war (Siehe
folgende Abbildung). Es ist wich tig zu verstehen, dass die relativ
posit ionierte Box der Conta ini ng Block fü r ihre Ki nd-Elemente ist.
Das heißt , dass die Angaben bei der relativen Posit ionierung von
Kind -El emen ten sich au f die Angaben de r Eltern-Box beziehen.

Web 2.0-Layout s mit (SS umsetzen

I

Absolute Posltionlerung
Absolut positionierte Elemente
verhalten sich absolut zu ande~
ren Elementen . Die Angaben
top, rlght, bottom und left
beziehen sich auf die Position
innerhalb des Blocks, in dem
sie einen Contalning Block darstellen.

• Abbildun g '.52
Au ch wenn die relativ positionierte BOle über das layout hinaus bewegt
wird. bleibt Im Layout der freie Platz stehen - ihn hat die verschwundene
Box eingenommen.

Die relative Positionierung ist besonders dann nützli ch, wenn
gewisse Sel teninhalt e durch ihre Positi on hervorgehoben werden
und über die Struktur der Seite hinaus gehen sollen.
9.4.4 Absolut e Pos itio ni erung
Während die Attribute 1eft, r1ght, t op und bot tom bei der relativen Positionierung für die Verschiebung von Boxen sorgen, dienen sie bei der absoluten Positionierung zur Angabe der Position,
an der sich die Box befind en soll. Sie legen den Abstand de r Box
von ihrem (on tal ning Block fest .
Befinden sich zum Beispiel mehrere Absatze innerhalb ei nes
dl v-Containers. und wird einer der Absatze absolut positioniert,
so bedeut et die Anweisung top: SOpx : , dass der absolut positionie rte Absatz einen Abstand von 50px vom Containing Block
- also dem Element dl v - haben soll. Die Prozentangaben beziehen sich immer auf die Eigenschaften (B reite und Höhe) des sie
umfa ssenden Blocks (Containing Blocks).
Eine absolut positionierte Box (position: ab so lute :) wird
aus dem Dokumentfluss herausge nommen. Dadurch existieren
die absol ut posi t ionierten Boxen für Seiteninhalte nicht mehr
und können diese überdecken. Deshalb ist es wichtig, bei absolut positionierten Boxen genauso wie bei fl oat- Boxen neben der
Position der 80x auch ihre Breite (w1d th) explizit anzugeben.
Ohne konkrete Angaben zu ihrer Position erscheint die Box
dort, wo sie im Markup auftritt.
p. pos ft loned I
pos1tlon: absolu te:
wldth: 600px ;

J
9.4

Relative Posltionierung
Im Kontext der absolulen Positionlerung kann man die relative
Posltlonlerung als Spezialfall
sehen, wobei eine relativ posit ionierte Box ein Containing Block
von sich selbst ist.

TIPP
Aus technischen Gründen ist es
sinnvoller, Jeweils eine vertikale
und horizontale Position der absolut positionierten Box festzulegen. In llteren Browsern kann es
nlmUch zu Problemen kommen,
falls zwei Angaben zur vertikalen
oder horizontalen Positionierung
gemacht werden.

Relat ive und absolute Positionierung

I

563

Abbildun g 9.53 tDie grüne Box ist absolut pOSitIoniert und hat die Breite 6OOpx.
Ohne eine explizite Angabe zur
Position der Box erscheint sie
dort , wo sie im Quelltext auftritt.
Die grüne Box überdeckt die
unIere Block-Box.

TIPP

Bei Prozentangaben und weiteren relativen Werten (etwa
em) Ist immer zu Oberprüfen , auf
weiche Größen sich die Angaben beziehen. Dies muss nicht
notwendigerweise das direkte
Eltern-Element eines absolu t
positionierten Elements sein.

Im unteren Beispiel bezieht sich die Prozentangabe auf die Höhe
des Cont aining Blocks, der in diesem Fall das html-E lement ist.
Ist ein absolut positionierter Block nämlich das Kind eines statisch positionierten Elements, so wird in der Hiera rchieebene bis
zum ersten absolut (oder relativ) positionierten Element weitergegange n, dessen Eigenschaften anschließend als Basiswerte verwendet werde n.
p.positioned {

position: absolute:
wf dth: 600px:
top: 501:
}

Abbildung 9.5 4 tDie grüne Box wird absolut posit ioniert und um 50% von oben
entfernt. Die Prozentangabe
bezieht sich auf das erste absolut
positionierte Ell ern-Element In
der Sei tenhierarchie.

Dies lässt sich durch die Veränderung der Höhe des ht ml-Elements veranschaulichen :

htrnl [
height: 1501:
}

564

I

9

Web 2.0-layouts mit C55 umsetzen

I

... Abbildung 9.55
Die Höhe des html-Elements wird
ve rgröBert. Die Position der absolut positionierten Box verändert
sich ebenfalls.

Wird daaegen der Container, der die Absätze enthält , zu ei nem
absol ut positionierten Element erklärt, so bezieht sich die Prozentangabe auf dessen Höhe. Die obere Kante hat einen Abstand
von genau 50% von der oberen Kante (inkl usive paddl ng) des
Containers.

IJcontal ner
position: absolute ;
wf dth: 600px;

J
p.posftf oned r

top: SOl;
.... 1 dth: 600px ;

J

... Abbi ldung 9.56
Die obere Kante der grunen ,
absolut positionierten Box befindet sich Im Abstand von genau
50% von der oberen Kan te des
Containers.

Als Nebeneffekt haben Sie eine nützliche Eigenschaft der absolut positionierten Seitenelemente gesehen: Ist ein absolut posit ioniertes Element ein Kind eines relativ positionierten Elements,
so stehen die absoluten Angaben des Kindes in Relation zu den
Angaben seiner Eltern. Dies ist besonders nützlich bei layouts, in
9.4 Relati ve und absolu te Positionierung

I 56 5

denen Sie ein Element relativ zu einem anderen Element positionieren wollen. Tat sächlich kann d ie absolut e Posit ionierung als

I-IINWEJS

Beachten Sie an dieser Stelle,
dass bel relativ posi tionierten
Elementen B o~en nur relativ zu
sich selbst bewegt werden können , Mit absolut positionierten
Elementen können unterschiedliche Elemente in BeZieh ung zueinander gesetzt werden.

solche nur sel ten verwendet werden, da in Abhängigkei t von der
Bildschirmauflösung Inhalte ungewoll te Positionen einnehmen
können, Die Verschachtelung von absolut posit ionierten Ele~
menten in relativ posit ionierten Elementen ist dagegen eine gängige Methode, um Blöcke prazise und relativ zueinander zu positionieren. Dies liefert mehr Flexibili tät , da die eigentlichen Breiten
und Höhen der jeweiligen Elemente keine RoUe mehr spielen,

9+5

Fe ste Positionierung

De r einzige Un terschied zwischen absolut er Posit ionieru ng und
fester Positionierung besteht darin, dass bei der festen Positionierung Blöcke immer an derselben Posit ion im Browserfenster
bleiben - auch dann , wenn nach unt en gescroll t wird, Dies hat
zur Folge, dass fixierte Blöcke etwa beim Drucken immer an derselben Stelle gedruckt werden - und zwar auf allen Seiten. Dies
kann beispielsweise nützlich sein, um die URl des Artikels oder
seine Übe rschrift auf jeder Seite mit auszudrucken.
Beacht en Sie bitte, dass die Intern et Explorer 5.x und 6 diese
Ar t der Posit io nieru ng nich t unterst utzen. Im In ternet Explorer 7
wird sie hingegen unterstützt. Ein Hack soll Abhilfe für äl tere
Browser-Versionen liefern (http ://www.howtocreate.co.uk/fixedPosition.html (linkcode 365)).

9.4.6

z-index
In den vorherigen Beispielen haben Sie gesehen, dass es bei der
Posi t ionierung von Seitenelementen zu ÜberJappungen von Blöcken kommen kann. Um sicherzustellen, dass immer nur solche
Inhalte angezeigt werden, die in de r Tat angezeigt werden sollen ,
muss man die Tiefe der Boxen kontrollieren können. Genau dies

geschieht uber das Att ribut z-index. Es regelt die Reihenfolge
der Boxen, in der sie einander überdecken können (die sogenannt e Stack Order).
Zwar ist die Darstellung der Seiten auf dem Bildschirm (noch)
z-index
Der z- 1ndex regel t die Reihenfolge der Boxen, in der sie eina nder überdecken können. Er kann
nur au f Elemente angewandt werden, die nicht slatisch positioniert
sind und im gleichen Kontext stehen.

zweidimensional (x, y), doch die Spezifikation legt auch die nich t
sichtbare dritte Dimension (z) der Seitendarstellung fes t Sie
best immt für jede der posit ionierten Boxen eine Ti efe als dritte
Dimension. De r z-index kann nur auf Elemente angewandt
werden, die nicht statisch positioniert sind. Er nimmt beliebige
numerische Werte an : Je kl einer der Wert ist, desto näher ist
die jeweilige Box an der Nutzerebene. Um das Att ribu t benutzen
zu dürfe n, können Sie d ie Box mit pos1 t ion: relat1ve ; versehen, ohne zusätzliche Angaben über die Verschiebung der Box
zu machen.

566

I

9 Web 2.0-layouts mit CSS umsetzen

I

Die Spezifikation legt ni cht nur eine z-Ebene fest, sondern spricht
von z-Ebenen im sogenannten Stacking (o ntext. Der Letztere entsteht bei der Versc hachtelung von Elementen und beschreibt die
Reihenfolge von Seitenelementen auf einem Stack. Damit Seitenelemente na ch vorne oder nach hinten verschoben werden kön-

nen, müssen sie im sei ben Kontext existieren, also gleichwertig
sein bzv.l. auf gleicher Ebene angesiedelt sein. Konkret bedeutet
dies, dass sie gleiche Eltern-Elemente besitzen müssen. Im Fall
<dfv ld- ' co nta1nerl ' )

<p ld- zwel ) Zwel </ p>
<p 1d- "elns ") Efn s</ p>
M

M

</ dlv )

<dfv fd- ' contafner2 ' )
<p ld- " drel ") Elns </ p>
<p ld- " vfer ) Zwel </ p>
M

</ dl

v)

sind /Je f ns und IIzwef gleichwertig, genauso wie Ddre 1 und iJvl e r
sowie I}contalnerl und I}contafner2.l/dre f und Oefn s exi stieren dagegen in verschiedenen Kontexten, wie auch I/contafnerl
und h1er, deshalb kann das Attribut auf sie nicht angewendet
werden .
Sollte also flzwel Oeln s uberdecken, so können Sie mit
pl/efn s Iz-fndex: I: po sition: relative : )
pUzwel Iz - lndex: 2 : position: relative : )
die Tiefe der Blöcke verändern und dafür sorgen, dass lief ns
Ozwe I überdeckt .
In AbbildLmg 9.57 überdeckt die absolut positionierte Box den
zweiten Absatz des Containers. Beide Absätze existieren im selben Kontext und können deshalb auf ihrer gemeinsamen z-Ebene
verschoben werden.
p I

po siti on: relative;
z-Index: 2:
p.posftf oned
po siti on: abso lute:
z - Index: I:

9 .4

Relative und absolute Positionierung

I

567

Ab bildung 9.57 •
Ein Absatz im Con tainer uberdeckt die ab~olu t positionierte
Box . Er wird mit einem kleineren
z-index versehen.

Wird der zwe it e Absatz zusätzlich mit einer Hintergrundfarbe versehen. so wird der Effekt deut licher (siehe folgen de Abbildung).
Bei der Vergabe eines z -lndex ist es wich t ig zu verst ehen,
dass Fälle auftreten können, bei denen eine Ebene nicht hinter
eine andere Ebene verschoben werden kann . So kann die absolut posi tionierte grüne Box aus dem oberen Beispiel nicht hinter
die flcon t a 1ner-Ebene bewegt we rden. da die Ebenen in unt erschiedli chen Kontexten exist ieren .

Ab bildu ng 9.58 •
Die ab~olu t positionierte Box wird
unter d ie Block-Box geschoben.

9.4.7

Pos itio ns-bas ie rtes l ayout

Im Folgenden betrachte n wir ein Beispiel zur Entwicklung eines
ein fachen zweispaltigen layou ts mit hilfe relat iver und absoluter
Posi tion ierung. Anschließend wird das layout zu einem dreispaltigen layout erYllei tert .

Sc hritt für Schritt : Mehrspa lt iges layo ut mit re lativer und
absolut e r Po sition ierun g
Die erst en vier Schr itte st immen mit der Vorgehensweise im
Abschnitt »Zweispaltiges ftoat -basiertes Layoutoc vollständig überein . Das Ergebnis können Sie in der folgenden Abbildung sehen .

568

I

9

Web 2.0-Layouts mit CSS umse tzen

I

Obtßd\rilt (hl )

.--_-- __-....- - _-.

-,

0 _ _ (11.1)

..... ............. ... . ......... --..
......
.. ...
,_y_.. .. _ ..... ____ ....
_
.....
....
" .......
. . _..........., .......... __
.. ,. . _..__. . _............ __ ........_.... . .. ""
... .._---'_ .....
_.....-.._.- ...... .........
.

.......... . _ _ 1_ _ _ ......... - - ....... _

__ ,_

..-.-~ . -

~-

--"-~-""'----

_~----

...- _ .. _ , .... _

...........

_--~._

_

. _~

... _ ... _

..........

--~

..... 110< .... _ _ _

~......-...-.

r._',~

"""~
~-

~

11

,'

-,-~

........... _ - - -... - . _ ...... Qu> .... - ............. , - _ .. _
".

..... _ - _....

_~

.. Abbildung 9.59
O@rContainerNcontainerwird
z@nlriertund mit einem Rand
ve~hen - bei Floats wie bei der
relativen und absoluten Positionlerung.

Den oberen Seiten bereich (#header) positionieren

In den vorherigen Schritten wurden sämt liche Elemente statisch
posi tioni ert. Um nun die Seitenüberschrift links oben und die
Suchbox rechts oben zu positionieren. müssen wir genau festlegen, wo si ch die Element e befinden sollen. In bei den Fällen
könnte man etwa die absolute Positionierung verwenden. Es
wäre praktisch, wenn ihre Abstände (top: 0 und le f t: 0 für die
Überschrift, rlght: 0 und t op: 0 für die Suchbox) sich auf die
Ränder des Eltern-El ements Dcontal ner beziehen wOrden (u nd
nicht auf die Ränder des aktuellen BrO'Nserfensters). Dies setzt
voraus, dass Dcontalner relativ (oder absolut) positioniert wi rd .
da eine absolut positionierte Box nur in Relat ion mit nicht statisch posit ionierten Boxen gesetzt werden kann.
Doch in den vorherigen Abschnitten haben Sie erfahren, dass
absolut positionierte Elemente aus dem Dokumentfluss herausgenommen werden. Dies würde in diesem Fall bedeuten, dass
SO'Nohl die Überschrift hl als auch die Suchbox zwar an den
jeweiligen Posi t ionen erscheinen würden. doch die Navigationsleiste würde nach oben rücken und die Überschrift überdecken,
da beide Elemente fOrilheade r nicht meh r existieren. Betrachten
Sie dazu Abbildung 9.60 sO'Nie d en folgenden Code:

... Ab bildu ng 9.60
Die überschri ft h1 und die Suchbox sind absolut posit ioniert. Fur
den Itheader-Container existieren
b@ide Elemente nicht, deshalb
werden der nachfolgende It navbar-B lock und h1 an deßelben
Positi on platziert.

Ifconta1ner
marg1n: lem 61:
ba ckground- co lor: f} ffffff:
border: l px solid D1l 66cc:
posft1 on: relatlve :

J
Dheader I
ba ckground-color: DS599dd :
posltfon: relat1ve :

,

9.4 Relative und absolute Positionierung I

569

IIheader a (
color: IIfff;

I
I/header hl {
color: IIfff;
padding: O.Sem;
position: ab sol ute:
top: 0:
left: 0:

I
IIheader f orm
paddi ng: 5px:
background· color: IJ77aadd:
wi dth: 160px :
margin: 0.5em;
position: absolute:
top: 0:
right: 0 :

I
Aus diesem Grund ist es sinnvoll, die Überschrift statisch zu positionieren und die Such box relativ zum Header rechts oben zu
positionieren.
Ilcon t ai ner

I
margin: lern 6%:
background·color: /Jffffff;
border: Ipx solid 111166cc:
position: relative:

I
IJheader (
background· colo r: 1J5599dd:
position: relative:

I
IIheader a
color : IIfff:

I
IIhe ader hl {
color: II fff;
padding: O.Sem ;

I
IIheader form {
paddl ng: 5px;
background-color : 1177aadd;

570

I

9 web 2.0-Layouts mit (55 umsetzen

I

w1 dth: 160px:
margln: O.5em:
positjon: absolute :
top: 0:
rfght: 0:

I
IIheader 1nput
padding: 5px;
background-color: IIfff:
border: 2px sol fd IJf6f6f6:
font-slze: lem:
color: 11999:
width: ll Opx:

I

-_ -,___..........__..... _...... _.-_
. ._- ........ . .. . . ...........
._.
.............. ......,..... ......... ..................". .

._ ... ... __ "' JI01 ._t .._ ... ,.... _( ....

.. _ .. ""'.<10 ... _ .........",. "'" _<11"

EI

_ . l_~

·~

,

....

........

ft • • • _

...... _ _

O'O _ , _ "

... Abbildung 9.61
Die Überschrift Ist stat isch positioniert, die SUchbolC Ist absolut
positioniert Zu diesem Zweck
wurde Ncontalner mit position :
relative; versehen .

Contain er für das Naviga tio nsmenü (#nav ba r) setzen

Da keine benachbarten Elemente gefloatet wurden, wird der
IInavbar-Container als eine Block-Box interpretiert und ohne
zusätzliche Angaben unter der Überschrift erscheinen.
{Jnavbar I
back9round-color: lJ77aadd:
padding: lpx:

I
Dnavbar ul I
padding: O.6em:

I
Dnavbar 1 f I
display: 1nline:
list-style: none:

I
Dnavbar 11 a I
paddlng: 0.3em:
9-4

Relative und absolute Positionierung

I

571

co l or: flfafafa;

m=-

Oberschrift (hl)
•• !I!t.l •• ~,

I ............ 4

OberschrItt (hz)
.. .. , • _ _ . .......... d .. _

•• ..,

~~ ~ "".""

1).>. . . ....,'.... , .. _

..

......... n il ;"lOb l <!! 011 .... ' 1 _ " "'...
_

"'~ .. ,

.. ", .................. It... " ..

'".u..... .. .., .. ",,-,

O'...

... ......... u~., ......., ....""" "'''.......... !U . . OIJ'f'l'I' ............ ,- . . ..;>-

~,' ~

""rn',,,. ,... ''''''MU .... AI. . . . . " ,... ....,., _
.......,... _ ....... w ...... _,.ot>o'"

..... _

"u~·

Abbildu ng 9.62 ..
Itnavbar richte t sich unter der
Überschrift Im Header Itheader

''''.

11

In ha ltsbereich (#co nt ent ) pos itio nie ren

Der Seit eninhalt soll sich links beflnden und 65 % der horizontalen Gesam tftäche des Layo uts besitzen. Der innere Abstand sol!
zur besseren Lesbarkeit dienen und Inhalte nach rechts vom lin ken Rand des Co ntai ners aus verschieben .
IIcon t ent {
w1 dth: 651;
padding: 0.5em 31 ;

I
~

Überschrift (hl)
~,

.. , _ , t-..I

~I

überschri tt (h z)
•...., __ ....., -.... ........ . ~ .....u ... iftO~ ....~ _

Ab bildung 9.63 ..
Der I nhalts-Cont ainer wird standardmäSig links positioniert.
Die In(ospaJte wird nach un ten
gerückt, wie es bei Block-LevelElementen auch zu erwarten ist.

(••" .......... 'mp" wl>!ljll,,,
"'_"'WPllMII.
ru "' .. _
.. 00 .. "".......

"~ ~ ,,

.~

011 ....... ' ..............................11<1"".

'<ll!'' '

... "","""'''''''''
.......

''''' ''. '''' " ...... - . . . - . . <ro'Iop<! .. _
""''''''' Il10'' <l u ' .... fi . ...
~_

......
..,.... ... ..t,...."" ......... ..w..
' .... , ......... t .... "" uot.>oojll,,,,,
,~

",lW, ...,<ip<......... tu ......

EI

.. IR'"

... ,.............."" o<'upu ..............

._.,_""

,_~

0.; , ..... ' ..... "" ...

..... 0100 .. " ...

M , _ "'tu • . , . _.. """ ....... 1<1

~"""""".

, ....... ", •.

In fospa h e (#si debar) gesta lten

Die Sidebar sott sich recht s von der Inhal tsspalte, aber unt er dem
Header IIheader befinden. Die absolut e Posi tionierung der Box
würde si ch auf die Ränder des Co ntainers {Ica nt af ner beziehen,
der in diesem Fall der Contain ing Block wäre .
fis 1debar {
pos 1ti on: ab so lute;
t op: 0;
572

9

Web 2.0-Layouts mit C55 umset zen

I

rfght: 0:
f ont- sl ze: 0_95em:
ba ckground -color: Dcceeff:
paddlng: 0_ 5em 1.51:
wldth: 251 :

li~xlw1lt ( hJ)

'1III...l...u~ ' -'

{""" af>'.' ..... .. ...
"""""".

OberSl'M It (h:a)

.................. -.... .......,.<.,
,.........
. ,...............
""'"•.,.....
.. __
..'- ...
_.,.,1''0...... ,_ _

....... " ... ('!,( OI
~I.h••
_Il10 ....................

[u.-

$0(.""

'""~l

_
__
..--.,.- . ...-..
.......-_--_
_...........
......._,-

Oberschrll1 (hl)

,,~

, .... - . . _

... •" ................_ .GI

'Io

.... ,.;...104 ..... h>< .rr'<e.......

.... ,".• ,'~ ............ I'QI- - - " ... , "' ............
......
,.. ~ ... " .... '..'<I.'l _ ... _ .....~!iIII_ 'I'U..t>o<l.

...

_......................
........ (00,...._. .".........
"' .. .., ,..,"',...................
' "''' ___",(
., ......,......
~

........... . -....... _.01'1'0...... , _....

r" ..... _'...."~l [.""-. _

.... _...._........--..

.. Abbildung 9.64
Wird #sldebar absolu t positioniert. so beziehen sich die PosltlonsanBaben top, riBht, left und
boUom auf #con tainer. Mit top : 0
und rlBht: 0 erscheint die Box am
rechten oberen Rand des Containers und überdeckt die Such box.

Damit die Infospalte relativ zur Grenze des Containers Dnavbar
positioniert werden kann , wird ein neuer dlv-Container (etwa
lJmaf n) unter Dnavbar eingefügt. Dieser wird Dcontent und
Dsfdebar umfassen und relativ positioniert . Wird dann Dsfde bar absolut positioniert. so beziehen sich die Angaben t op: 0;
rl ght: 0: auf die Ränder von Dma f n und nicht auf Dcontal ner .
<dfv

fd- ~ mafn M )

<dlv ld- ' content ' )
</ dlv )
<dlv fd-" sfdebar " )

<I dl v)
</ dlv )
Der entsprechende CSS-Code :
IJmaln I
po sition: relathe:

I
Ds ldebar I
po sftf on: abso lute:
t op: 0:
rf9ht: 0:
font- slze: O.9Sem;
9.4

Relative und absolute Positionierung

573

background-color : #cceeff;
padding: O.5em 1 . 51;
width: 251 :

- . _._.......... ""'.... ...__.... _...
.._ '..... _..... "' ''N_._ ..... ' _'-'.•
__ .. _
. ._. .._n__. ._.... ""......
_... _........____ ._"
..
.."__
_
.....
........
...
............
... . __. ._.....
.._....... ,__.........
..........
... -,..,-"_
.....
......
__
....._
- ...........
_...."...
....__
_... . ..... .......... _.....-.""'
....... _...........
.... _._

_
_ __ ___--_

.. _ _ ...............u

" .... _

. ,._ ......... _

""""-""" " _

., ... ............... ___ ......_. __ .. ....
~

__
-

.~

__--_.-

_~-"'

.t.. Abb ild lln g 9 .66
Der Container #foote r ist absolut
positioniert. Er überdeckt andere
Inhalte, da er für diese gar nicht
e~istiert.

~

,

"

'"

_._
..
.--_................
.................
.
..
... .. -.
.,--,_
..., ..
....

_".' M

_~

~

D

,

~

.. ....

_

Abbildung 9.65 ~
Die Infospalte wird rechts am
oberen Rand des unsichtbaren
Containers #main positioniert.

,

~_

"

Foot er (#footer) pos ition iere n

Theoretisch könnte man den Footer unten rechts absolut positi onieren, und zwar relativ zum gesamten Container Ilconta i ne r
des Layouts. Dann wäre er aber aus dem Dokumentftuss herausgenommen und könn te deshalb andere In halte überdecken .

IHooter (
position: absolute;
bottom: 0:
r1ght: 0:
ba ckgro und · col or: 1/5599dd;
text-al ign: right;
color : {ffff:

Deshalb ist es besser, den Footer wie gewohnt statisch zu posi t ionieren.

#footer (
background-color : #5599dd;
text· al ign: right;
co l or : lifff:
IHooter p {
padding: 0.5em;
J

574

9

Web 2.0-layouts mit C55 umsetzen
en

.......
._._-_
__ -....-. -......
.. -_
-.-......--_
..........
............_
....._.......
-,_.
.... -_
..........
. .... ._-,_
-............ _
_
. -.........
..........
. _- .
__
__.... ...............
__
...... _...... ,... _
.. _.
...-_
-"
.....
_
...............
.........
... _,
......
....
_
.....
.
.
__
.. -......._-"
-_...... •.
'-._
...........
. __
.-_,.... ... .. _..........

I

Obef5chfill (hl)

,

--.~

Üh lHllrltt (tu)

~ , ---_

'-_

,.

~

--~

__

,

_..-

,....

,
"'

D

_

_~

__-

.... ..
_....... __...........
........
..---.-' -~
......,""..
"'

,-,

-_._,~

~~._--

.

~

. ~

,

... Abbildung 9.67
Das result ierende Layout basiert
auf rela tiver und absoluter Posltlonierung.

'"

Bugs fuce n

Jedes relativ oder absol ut positionierte Element benöt igt für die
korrekte Anzeige im Internet Explorer eine vo rgegebene Breite,
and ernfalls kann dem Block ein falscher (ontaining Block zugewiesen we rden . Im oberen Beispie l wird die gesamte Seite vom
Internet Explorer als Cont ai ning Block der absolut positionierten
Box in terpretiert (siehe Abbildung 9.68). Im Internet Exp lorer 7
tri tt das Problem nicht mehr auf.

Oberschrlh (hl)
["' .... "'1_.,011 f l"lud1..,., 1!"OYoI""h U ~
dfU U1' . l<iI ffl<1 U f OI ()1tO If q/O'l1
rOOlf c tfa.ot'l (UlO!e ,dlll, U I od IUI. no
COlfU"'111! 10,quROI VO~111ln "'" Il llid
'0" ..... 'UOC;IH~'l"'. <" II t QIIUqut
dll'"'t "" ~o

,"'."",dam.

... A bbildung 9.68

· IWU
· IWU

. ""-'
. """

Im In tern et Explorer w erden

absolut posit ionierten Boxen
falsche Containing Blocks zugewiesen .

Dies lässt sich mit der Vorgabe de r Seitenbreit e für die korrekten
(ontaining Blocks korrigieren.
IJheader I
wldth: 1001 :

9.4

Relati ve und absolu te Posit ionierung

575

IJmain {

... ,--"..,-...
.....
.........
._,_
.....
......
..._.... _---_
..... _......
_-~,

,,,

'"

' ''~

-,,,..........
....04\0'" ( ~ , )
. ~
. ~
. ~

. ~

.. Abbildung 9.69
Durch die Vorgabe der Breite der
korrekten (ontlining Blocks lässt
sich der Bug beheben.

wi dth: 10 01:

D

l ayo ut a npassen und weit ere ntw ickeln

Im Unterschied zur fl oat-basierten Positionierung von Inhal ten
ist es bei der absoluten und relativen Positionierung möglich. Seitenblöcke an beliebigen Stellen innerhalb des Containing Blocks
zu platzieren. Insbesondere ist es etwa möglich, die Sidebar
IJs1debar auch unt en zu posit ioniere n, und zwar mit:
/Is idebar {
pos iti on: ab so lute:
r1ght: 0:
bottom: 0:

Das Ergebnis kö nnen Sie in de r folgen den Abbildung sehen.
Oberscllrllt (hl )
._--' Mo " , ..~ • •

_
'!!!!f!I-'

........ _._ .... .....-_.....
_._-,.
....
...
"_
. . --"'
, .. _"""""""_w
. . . . . . . __ .
-"',...._.._......... ..........
............... __ ........ ... ........
,..._
. .....-__ ....... _- ......... _, ...- ....
....... --,

5!:lIt<-_,
. ..

'- ~-"'''''''''''-'.,'.'''''-'',,

~,, _

~--

,,, . .

~_

,

" ,

,~

_...._........... --,.
_,_. -

_--'.-

._

~_

<.... _

.

No

" ' . " " _ ..... 0 . . .

."' .. _ " ......... , _ .......... _ _ _ .. ....

~--_

Abbildung 9.70 ..
Die Sidebar #side bar wird rechts
un ten positioniert.

"

.....-., ... _-_.
.....-.. .
.
....... ...._-_ ... .'"""....

......... , . . - . . . . . . . ," " _ .. _

1..... . . . . . . . _

"'m" _' ... _ ....

.. .. _ .. _,., •• ,_ .......... _ "'. " .... _0 ... .
.... "" .. _ - ......... _

. - ... . .... - , .... ~ ......" ..

Gb. ...h'm (tu)

,..._

--_ -

.... ... " q ' ... ~-

,..."..,~-....... --~"""."'""
"--"-' ''-'''''''~.''

:~
. ~
. ~

Au ch bei diesem Schema der Positionierung ist es möglich, die
Höhe des Blocks auf die Höhe der Seite anzupassen . Visuell lässt
sich dies mit allen vorgestellt en Methoden - also Equal Height
Columns - und einer de r Faux Columns-Met hoden realisieren.
Um das Seitenl ayout zu einem dreispaltigen Layout zu erweitern, genügt es nun. neben ff sidebar eine weitere absolut posi t ionierte Box zu definieren und den äußeren Abst and der Box
Ilcon t ent zu ve rändern . Sie kann an beliebigen Stellen im Markup auftauchen, da sie sowieso aus dem Dokumentfluss herausgenommen wird .

576

9 Web 2.0-Layouts mit (55 umsetzen

I

iJnexts1debar (
po si ti on: absolute:
left: 0;
top: 0:
f on t- slze: 0_95em:
back9round-color: iJcceeff:
paddfng: 0.5em 11:
wldth: 15S:
/ * [qual Helght Col umn s */
ma rgf n- bottom: -ggggpx:
paddlng-bottom: ggggpx:

I
flcontent
wf dth: 50S;
paddlng: O.5em 1.5S;
margln-left: I7S:
margfn-rlght: 171:

I
Dma f n
over fl ow: hfdden

IIsfdebar
margln-bott om; -9999px;
paddfng-bottom: ggggpx;

___-- --_-__._---._
--_-_--(
_--___...--_'_ _._-_-_._

..-.,.......... ... ..... .............
.. ,_..... _,..........
.•
...........
..... ,'... - ,._ ...... _......
.......
......_................ ..
...
"'
....
..
........ ... ....
.
-~..... ...........
.. __. ...
...
..... ....... .
~

~­

._-~-,

-

~' .~-,

. ..1

_.............
....._,-_..
.....
..... -.. .
............
..-'--

..-_
... --......"

_
-

~

-_--__
--_
--_
_,--_
_--_
,._--_
....... __... --_
,_
..._
_...._._--_
_
_--_
-_--_-_
.... _......
_...... ...
-..._----.. _._-_
.- _. _---_."

~"

...
..............
.. .......

.

....

,.
..........
.

""

......

• Abbildung 9.7 1
Dreispaltiges layout mit absol uter
und relativer PosiUonierung

Die Position der absolut positionierten dritten Spalte lässt sich
Ober die Eigenschaft rfght verändern. Nimmt die rechte Spalte
9.4

Relative und absolute Positionierung

5n

(zusammen mit dem inneren Abst an d) 22% des Platzes ein, so
kann die zweite Box in einer Entfernung von 22 % vom rechten
Ra nd des Cont ainers platziert werden. Der äußere Abstand von
flcon t ent muss dementsprechend angepasst werden.

TIPP
8eachten Sie, dass man es beim
Posi tio nierungsansatz in der
Regel mit weniger 8ugs zu tun
haben wird, als dies beim floatbasiert en Ansatz meistens der
Fall ist.

IInext si debar {
position: ab sol ute:
r1ght: 221:
top: 0 :
f ont- size: 0.95e m:
background-color: IId4ebf7:
padd1ng: 0. 5em 11 :
w1 dth: I BI:
/ * [qual Height Col umn s * /
margin-bottom: -9999px:
padd1 ng-bottom: 9999px:

I
ficon t ent {
wi dth: 551 :
padding: 0.5em 1. 51
marg1n-r1gh t: 40'1 :

I
Abbildung 9.72 ...
Dreispaltiges Lay out mit absol uter
und re lativer POSitionierung

_
_ -- -__- __
-_--_ _-

......_....
....,_
_.. .._._-' -.....- ...........
.. - ...... _...........
..............""_. .
. .. ,-..._
....
_.
,,_
... ..-. . ,..,._--,--,-.....
...
_
.....
_
.
.
..
.
_....
..
_,
...
-_...'-,_. ---._.... '-_.....
. . .""'--_ . .. .. _'..._.
,. __ ..........._.. "' . ,... .. -..... "'_ ... """'
.....................
-,_
...........
_... ,.....
....... ......
: ,l:i
,,-_
...
... ,..,-_... ,--,.........
_... . ... .. _'..._.
'"""'..........
-,_
....._
...............
. . .. _'.......
...,. ........
ObffSdl,lft (h)

~---

~"''''''

--~

~'

~ .....

(t,1l

~

_

.....

~

~_
_
_ _ _ wM . . . . . . . . . . . . _

..... ...

..~,-"

...._,-~

~
~

~

' _ . . . . . . . . fi

,

,~

~

~,."

~

r~~

_

,,.-.. _ .....................
... ·.... _ _ ........
...... _ ..,_,_
"'
.........

'

~

"

~

. ~

. ~

~

, . ... _

TIPP
Die Entscheidung für eine der
beiden Met hoden zur Posi t ion ierung von Elementen hängt
nur vo m Seitenentwickler ab.
Mit beiden Methoden lassen
sich beliebig komplexe Layouts
erzeugen.

578

9

........... _

..... ' . . _

.. _

... N . . .

Beachten Sie bitt e, dass die vorgestell ten Methoden unter
Umständen durch geeignete Box-Modell-Hacks korrigiert werden
müssen, da der IE 5.xfvVin die Breite der Seitene lemente fal sch
berechnet . _

9.4.8

Floats

'15.

Positionierung

Im Grunde genommen sind beide Konzepte - fl oat-basie rte
Layouts und Layouts mit absoluter und relativer Elem ent-Positionierung - gleichwertig. Beide Ansätze überzeugen im Gegen-

web 2.0-Layouts mit (55 umsetzen
setzen

satz zu tabellen basierten Ansätzen durch ihre Fle>:ibilitä t, wobei
Sie bei der zweiten Methode mehr Kontrolle über die genaue
Posit ion ierung von Blöcken haben. Bei der f l aat-Method e kann
dagegen die Dynamik der Positionierung ausgenutzt werden etwa wenn Seit en blöcke sich in best immten Situat ion automatisch unter andere Blöcke schieben sollen.
Hinzu kommt die Tatsache, dass es eine Mengeversch ieden ster
Bugs gibt, die bei der Implementi erung von Browsern gemacht
wurden und Seitenentwicklern deshalb zusätzliche Probleme
bereiten. Im Hinblick auf die absolute und relati ve Positionierung
fäll t die Zahl solcher Bugs dagegen ziemlich bescheiden aus.
Beide Ansätze passen Seiten blöcke automatisch an die Größe
und Form des Browserfensters an und stellen Inhalte demzufolge in einer Form dar, die bei möglichst vielen Konfigurationen
(Bildschirmauflösung, System, Browser) lesbar und übersicht lich
interpretiert w ird. Dieses Maß an Flexibilitat setzt voraus, dass
Seitenblöcke dynamisch positioniert werden, ihre Positionen sich
also nur selten genau voraussagen lassen. Auf breit en Bildschirmen mit hoher Auflösung kann ein Inhaltsblock etwa schl ich t und
einfach zu breit werden und den Text auf übermäßig lange Zeilen
ve rteilen.
Das größte Problem, das bei der Verwendung von absolut und
relativ positionierten Elementen auftreten kann, ist die Oberdeckung von übrige n Seit enelementen durch absolut positionierte
Bo>:en. Da diese aus dem Fluss herausgeno mmen w erden, können be i einer Vergrößerung oder Verkl einerung des layouts unter
Umständen unerwünschte Nebeneffekte auftreten. In der Regel
lässt sich die Überdeckung von Inhalten jedoch durch großzügig
gewählte äußere Abstände der Bo>:en vermeiden. Dies kann auch
bei Floats vorkommen, deren Breite bzw. Höhe nicht präzise
genug berechnet wurde.
Hinzu kommt das sogenannte Footer-Problem. Ist eine absolut posi tionierte IIs 1de bar -Box höher als die Ikon t en t- Box, nach
der wie gewöhnlich ein I/ f oot e r-Block folgt, so überdeckt die aus
dem Fluss herausgenommene Box den Footer (Siehe Abbildung
9.73). Aus technischer Sicht lässt sich das Problem mit (55 nicht
lösen. Um das Problem zu umgehen, können Sie entwede r immer
dafür sorgen, dass die I/cont ent-Box st ets breiter als IIsfdebar
ist , oder aber den Footer in den IIcontent-B lock aufnehmen.)
Bei float-basierten Ansätzen kann das Problem schon aus re in
technischen Gründen nicht auftreten.

2 _Absolute l..lyouts: css-dicussc, css-dtswss.inwtio.com/
7p.1g~-Ab501u teLayou ts

9-4

Hoat-Bugs
Die am häufigsten vorkommenden float-Bugs werden im
nachsten Abschni tt ausführlich
behandelt. Sie betreffen meistens
den Internet Explorer; aber auch
die Entwickler von Opera haben
in äl teren Versionen des BrO'Nsers
vieles anders interpretiert, als dies
die St andards vorschreiben.

Footer
Wie positioniert man einen Footer bel absoluter Positlonierung
so, dass er unter allen Sei tenblöcken erscheint und keine Inhalte
überdeckt? Dieses Problem t ritt
bei der f 1oa t-Positionierung
nicht auf.

TIPP
Bei mehreren absolut positionierten Bo)(en werden die Verhältnisse zwischen relativ und
absolut positi onierten Elementen
unübersichtlich, das layout wird
dadurch komplexer. Bei der
Anzeige der Seite unter verschiedenen Konfigurationen Ist dann
mit Problemen zu rechnen.

Relative und absolute Positio nierung

I

579

I

Andererseits hängt die Positionierung von Boxen nicht von ihrer
Posi t ion im Quellt ext (Stichworte : Usability und Accessibility
- die Inhalte sollten vor den übrigen Element en kommen) ab,
wobei die Boxen selbst wiederum auf j eder beliebigen Position
im Layout positioniert werden können .

Überschrift
(h,)

übe rschri ft (h2)
lorffil lp lurn vix elit
j1~ .111

~udi lm

{Oflle< lf'Ue! . Cengue

Inlftnirt IH. dtUu,t t ltiltnd
!Ir~'I!!l.\ 10

IfOlupW(lIII IIU\' H.l S Id Ifll(IbuS

'UI. 110

wsdpl~nlu'.

cu

t~

eos . Que tt

tDu umpitID, qu~ IO~
~ I {Iuae~e dl ~ l.ndo

rel'o rmldJns.

LOI ... n ip>U11 '"" . Ii,
~udi~m il1v~ ni,~ Ul
d ~l,.w l ~. i l ., 1d

Eu (liln di t o f~ lIi iU di ( ~tJil. cu 1111 domine eloqtlefid am fe1o.m nidan s. H se
ne &legentu r eum cu, hl S elldqu e omn es 1'1l'Jld em SM1p~r Eumo d W per, (U
e Il n olui Ht' maltlli OI. usu l t cli la con ~u. 1,. Mlu iSSt in~enlfe t OS eil Qui
sirrul (e< u ~lbQ el.

Lorern IplUrn vi AeHI . udi. rn ,n vtlli,t ul. dt~.~l t elei ltl,d eil eos . Qua lt
~e .rn WIlW< lt'llt'l . COI1eu e ul b ~ 'liu\ lu lus, ,'o (On umpl1 lolQlu tos
vnlupUlurn quL IIH ld voclbus wsdpll nlur, (U sit qu aeque dl ~ Un dG
rerorm,d.nl .
[u (um dil a fil lli iudie , bil. cu pfi dOITll ni C"loq untb am (elormid ln ~. [ ~~e
neclCl:e ntur e um w. hl~ ci idq ue oml1e~ eq uidem . S~r el/m ed cu per, cu
eSI (1 01ui \~ ",Jie~u ~\. U~u . 1 (Iil. (oll lf'qua t. Ilolui~~e ill ven it e N\ e l!. Qui
shrul H~(u ~~ bo et
lOletll lpsuro vlr; eil, .Iudiam Inv ell i,e 11 (. dell ~ )l t eleilertd e ~ eO!. . Quo I"
a gJm (nn'>H te'II€1. ( MgU~ urbanilJS I~ lus. no efl!(umpi' tnlqua tos
voluptalurn qui. '!l I ld v(l(, bu S wS('pia nlur, (U S,! qUiequt di spu nn d 0

~ O~.

Quo

u

l ~ ~JIoI. , n

tOIlH" ~ tvr (. ~

~ idi u"no

<o",.m p;t lor q u .\o ~
vol"" t.t.." qui Ho.
Id _l b-th
~~ l pI~nt ... tu Sll
qu :w-qut dlsp\IIMlOO
,t! M~ld"'s,

Ub ersc hrJtt (h 3)

° l1n!u
° U!!!u:
o ~

0 U!!l..tt
Lor em ip .......... . ,il
A'd.m Imtenir. Ul.
d ~t(.nl t tl,il.nd u

refo rm,<l.>(1 I.
SIJ\( ' pi.nl"r, cu si'
QU i\t"<lut di IPl ,tM100

rtlormidM!.

Abbildung 9.73 ...
Das Footer-Problem: Ist die
rechte absol ut posi tionierte So<
höher als die Inhaltsspalte. so
uberdeckt sie den Footer.

580

9

Grundsätz lich ist dieWahl der Technik eine Entscheidung. die aus
der eigenen Erfahrung heraus getroffen w ird und davon abhängt,
mit weicher Technik Sie persönlich besser umgehen können . Eine
besondere Bedeutung hat im Zusammenhang mit (S5- layouts
die Art und Weise, wie die Größe von Seitenelementen (Boxen,
5chriftgröße, Abstände, W eiß raum) angegeben wird. In Abhängigkei t davon, ob und wie absolute (px, pt, cm) oder relative (% ,
em) Werte benutzt werden, wird zwischen festen, flüssigen und
elastischen l ayouts unterschieden. Die einzelnen layouttypen
stellen Seitenbesuchern unterschiedliche Grade an Flexibilität
bereit. Je nach Konzept der Seite wird diese manchmal extra
angeboten oder gänzlich vermieden.

Web 2.0-layouts mit CSS umsetzen

9.5

I

Auswahl des Layouts - fest, flüssig
oder elastisch?

Diese Frage sorgt schon seit Jahren für heftige Debatten unter
Webentwicktern : Im Web 2.0 steht die Benutzerfreundlichkeit
der Seitengestaltung im Mittelpunkt, somit auch die Anpassung
des Layouts an die Bedürfnisse und Einstellungen des Nutzers.
Dabei ZWingt die Suche nach einem universellen Layout immer
zu einem Trade-Off zwischen den existierenden Ansätzen. Es
kommt darauf an, was der Designer erzielen möchte, welche Freiheiten dem Seiten besucher zur Ve rfilg ung gestellt werden sollen,
aber auch für welche Zwecke der Se itenbetreiber die Website
benutzen will.
Im Weiteren nehmen wir die einzelnen Layouttypen genauer
unter die Lupe und setzten uns mit den Vor- und Nachteiten der
jeweiligen Ansätze auseinander.
l ayouttypen im Überblick : Wo li egt der Unter schied
zwischen den Ansätzen?
Grun dsätzli ch werden in der Entwurfsphase wenigstens flInf
grundlegende layouttypen in Betracht gezogen, deren Eigenschaften anschließend mit den Anforderungen des Designkonzepts abgestimmt werden soll ten.
.. Fi xed layout (layout fester Breite)
Ein statisches Layout, bei dem die Dimensionen der Seitenelemente (Brei te und gegebenenfalls die Höhe der Boxen) unabhängig von Veränderungen des Browserfensters (Viewport)
immer gleich bleiben und bei genügend großer Verkleinerung
des Fensters einen horizontalen scrollbalken erzeugen. So lche layouts basieren auf der pixelgenauen Positionierung
von Blöcken. Alle Seitenelemente haben eine feste Höh e und
Breite.
.. Liquid/ Fluid Layo ut ( .. flüssi ges « Layout)
Ein dynamisches Layout, bei dem die Dimensionen der 5eitenelemente (meistens nur Containe r) bei Veränderungen
des Browserfensters entsprechend skali ert werden, sodass
kein horizontaler 5crollbalken entstehen kann. Die Positionie rung von Elementen geschieht mithilfe von Prozentangaben, die sich auf die Dimensionen des Browserfensters
beziehen. Die meisten flüssigen Layouts verwenden den
gesamten verfügbaren Platz (also das ganze Browserfenster)
zur Anzeige von Inhalten. Sie füllen den Raum also vollständig aus.
9.5.1

9.5

Fest, flüssig oder elastisch?
Designer sind sich uneinig. Alle
drei Techniken bieten Vorteile,
weisen aber auch Mängel auf.

TIPP
Universelle Layouts sind gefragt,
Diskussionen über optimale
Ansätze und Lösungswege sind
beflebt. Der Beit rag ~In search
of the One True Layout. (http://

www.positioniseverythlng.net/
artlde5lonetruelayout, Linkcode 366) se tzt sich mit dem
Thema auseinander und präsentiert ein flexibles, plattformunabhängiges, dreispaltiges Layout
mit Spalten gleicher Höhe.

le rn]
Die em-Einheit ist definiert als die
Breite des Buchstabens ~M« in
der eingestellten Schriftart und
Schriftgröße . Wird Text skaliert , so
velgröBert sich dementsprechend
der Platz, der vom ~ m « eingenommen wird . Deshalb ist em
eine relative Einheit. Die tatsachliche Größe wird durch die Einstellungen des Benutzers festgelegt.

Auswahl des layouts - fest. flü ssig oder elastisch?

I

5 81

[px und pU
Die als absolute Werte gekennzeichneten Pi~el- (px) und Punktareaben (pt) werden in der CSSSpezifikat ion als relative Werte
definiert. Ein PiJ.cel ist ein nicht
skalierbarer Punkt auf dem Bildschirm. Seine Größe hängt von
der Konfiguration des Bildschirms
ab. Mehr dazu finden Sie auf
http://www. w3 .org/TR/C 552 1/
syndata. html#/ength-Units (linkcode 367).

.. Elastic/ Zoomable Layout (elastisches Layout)
Ein dynamisches layout. bei dem die Dimensionen der Seitenelemente bei einer Veränderung der Schriftgröße automatisch skaliert werden, sodass neben der Textgröße auch
das komplette layout skaliert wird. Die Platzvergabe für die
Sei tenbl öcke geschieht mithilfe von em- bzw. ex-Einheiten.
die sich auf die eingestellte Schri ftgröße beziehen. Ein elast isches Layout muss nicht notwendigerweise flu ssig sein. Bei
Veränderungen des Browserfensters kann es auch unverändert bleiben, da die em- bzw. ex-Einheiten sich nicht auf die
Fenstergröße beziehen.
.. Hybrid Layout (hybrides layout)
Ein layout, bei dem die oben genannten layouttypen miteinander kombiniert werden, um eine optimale Darstellung be i
m öglichst vielen Konfigurationen sicherzustellen. Typisch sind
layouts fester Breite mit skaJierbaren Textinhalten (die Breite
wird in der Einheit px gesetzt, die Schriftgröße in em) sowie
elastische layouts mit fluiden Elementen. Die maximale Breite
des Containers wird in em-Einheiten angegeben, Seitenblöcke
werden in Prozentwerten gesetzt, Textinhalte in em.
9.5.2

Fixed layout

Eines der aussae:ekräftigen Argumente, die zugunsten von stat ischen, pixelgenau positionierten layouts sprechen, ist die
Schli chtheit ihrer Komposition und die einfache Implementierung.
layouts fe ster Breite lassen sich schnell und lei cht realisieren, da
mit absoluten Werten (px) gearbei tet wird . Sie legen das layout
eindeutig fest und sorgen dafür. dass die Inhalte bei sämtli chen
Bildschirmauflösungen identisch angezeigt werden .

._-_!..--==

---

._---~

=
:---

------._----------'----_._~

:.::..:..-:. wr

--~----

•

•
Abbildung 9.74
Fi~ed layout: Grovewebsitedesign.co .uk, 1200)( 800.
Das zentrierte Layout ist von freiem Raum umgeben.
..t..

582

I

9 Web 2.0-Layouts mit C55 umsetzen

- ~.

.

'-

_..._-

!:'::=.:.:. 9
~--

",..

~-==':.":,
wr

- ......_--

_._-_.
-._---

Abbildung 9.75
Fixed Layout: Grovewebsitedesign .co.uk, 1024 x 768 .
Optimale Darstellung. Nicht zu viel Freiraum , kompakt
und übersichtlich.
..t..

._- ..--

~ ' _i

. - ..

_
__
.
--_
..--.. ---_._- ._--.-......
._-_
--------_
. ..

" .. _- ---.....
--_
-_.__..--::.:...-. _- _------',-.'_
------_......._- -=-....;.==,;;.--""""-- ... . ..

fliIIIIIIob . 1uInM 1'U'11

::=.::.:;:. W5':

.....

.

Abbildun g 9.76
Flxed Layout : Grovewebsl tedesign.co. uk. 800 x 600.
Da das Layout eine fes t e 8 reite hat, er>chei nt ein
horizontaler Scrollbalken .

.t..

~

... Abbildung 9.77
FiKed Layout : Grovewebsi tedesign.co. uk. 640 x 480.
8ei einer kleinen Aufl ösung lasst sich das Gesamtlayout nur schwer w ahrnehmen.

Die Frage, ob ein layout m it fest er Größe für eine Webseite ange·
bracht Ist, reduziert sich meistens auf die Frage, w elches M aß an
Kontrolle der Designer den Seltenbesuchern übertassen möc hte.
Je genauer die Angaben zu den St rukturen im layout sind, d esto
meh r En t scheidungen werd en dem Nutzer vorweggeno mmen
und vom Designer getroffen .
Vorteile

I Dadurch können etwa der typografi sche Satz , die Posi-

t ion der Blöcke sowie die Verhältn isse zwischen den Seitenelementen gemäß den einschl äßigen Regeln und Heuristi ken exakt
gesetz t werden . Die feste Breite sorgt d afür, dass diese Regeln
immer gelten, und dass die Sei te somi t auch stets entsprechend
den Vorst ell ungen des Designers dargestellt wi rd. Die Nutzer
müssen sich damit abfinden und verfügen über (fast) keine Mög·
li chkeit. das l ayout an die eigene n W ünsche anz upasse n. Diese
Den kweise ist typisc h für das Pri ntdesign, bei de m di e absolute
Kontrolle über die Darst ell ung die höc hste Priori tät hat . Daher

TIPP
Bel der Angabe der Schriftgrö ße
in der Einheit px ist es empfehlenswert, mit den vererbten Angaben zu arbeiten. In der Praxis
w ird meistens das body -Element
mit einer festen px..Angabe
versehen . Der Schriftgrad der
übrigen Seitenelemente w ird in
ern - Einheiten bzw. in Prozentw erten relativ zum Eitern-Element body angegeben.
body I f ont - sl ze : 14px : I
111 ff onl · slze: 1. 51"11:1

w ird im Prin tbereich über wiegend mit festen Angaben gearbeitet.
Nachteile I Dennoch weisen layouts fester Brei te gewi sse Mängel auf, di e auf ihre rigi de Struktur zu rückzu führe n sind.
Zum einen st ell t sich die Frage, in welcher Spanne eine akzeptable feste Seitenbreite anzuordnen ist. Denn grundsätzlich kann
es keine optimale Seiten breit e geben, die bei allen (oder wenigstens bei den meist en) Bildschirmaufl ösungen vernünftige Darstellungserge bnisse liefert . Hinzu kommt . dass viele Benu tzer das
Browserfenster nach eigenen Wünschen skalieren und nicht no t-

9.5

HINWEIS

Der Vorteil von layoUI5 mit
fesler Breite zeigt sich darin,
dass sie die Konsistenz der Seitendarstellung in den Vordergrund treten lassen.

Auswahl des l ayouts - fest, fl üssig oder elast isch?

I

583

Feste Selten breite
Eine feste Seitenbreite, die In
der Regel fUr Nutzer mit großen
Bildschirmaufl ösungen gedacht
Ist, w ird einen mobilen Nu tzer
eines Handys oder PDA mit seiner Größe erschlagen und Ihn
vertikal wie horizon tal weit und
breit scrollen lassen. Lösungsweg: Für mobile Geräte werden
Webentwleklef In Zukunft neben
einem (S5-Drueklay out ein
(55-Mobile- Layou t bereitstel len
m üssen. Dieses w ird ex t ra fü r
mobile Ger:ite entworfen und
nur von mobilen Gerä ten gef ender!.

wendigeIWeise mit Browserfenstern maxima ler, standardgemäßer
oder proport ionaler Größe arbeiten.
Im Augen b lick liegt es nahe, angesich ts ei nes breiten Spektrums an verschiedenen Auflösungen, die Seitenbreit e be i fest en
l ayouts zwischen 6 40px und 770px zu setzen, da ein beacht li cher Anteil der N utzer immer noch die Bildschirmauflösung
800 x: 600 verwendet . Die dominierende Bildschirm aufl ösung
ist im Moment jedoch 1024 x: 768. Ohne Browserränder und
event uelle Add- ons, die etwa durch Google Sidebar , BrowserErwei terungen, ICQ, Skype oder andere Dienste geliefert werden,
erg ibt sich der obere Wert . In diese m Kontex t ist anzumerken,
dass der Trend zu breit eren und höheren Bildschirmauflösungen
anhält.
Problematisch ist an dieser Stelle die Darstellung der " festen.:
Seiten bei zu kleinen als auch bei zu großen Bildschirmauflösungen. Was bei einer Au fl ösung zu brei t erscheint, wird bei einer
anderen Auflösungen nur einen schmalen Bildschi rmbereich
mit Inhalt füllen und ein vertikales Scrollen veru rsachen . Denn
eine 750px breite layout breite hinterlässt schon bei einer Bildschirmaufl ösung von 1600 x 1200 (1 400px akt ive Fenstergröße)
einen freien horizon t alen Rau m , de r gleich dem gesamten Seitenlayout ist. Wird die Fenstergröße verkleinert, so entsteht ein
horizontaler Scrollbalken, der sowohl Usability- als auch Accessibility-Probleme bereitet .

-- -~

~~

bortelme deslgn

~._- -

::- ...... ,

.

- ,,-'

--

11 - -

I

9

:ö' botteime design

~

__

I!J-'"_.

.... Abbildung 9-78
Festes Layout auf Bartelme.at. Der minimale Schriftgrad (0, 25 -fache Verkleinerung der Seite)

584

~

Web 2.0-layouts mit (55 umset zen

... Ab bildung 9.79
Festes Layout auf Bartelme .at. Die Schriftgröße nimm t
zu - eine optimale SeltendarsteUung.

-......__
.._
--_
..-_.
. _. --- _--~

[8

bottelme :1f><.kJn

-----_.
......

~

~
rD' bartelme 1&1n

__

...

..

_... , ...
'

....

_..

-...

,.-.

... Abbildun g 9.80

__

_.

Abbildung 9.81
Festes layout auf Barte/me .at. Bei zweifacher SkalIerung von Te)!:!en w ird die Da~tellung kri ti sch. Die
höchste PrloriUt wird dennoch auf die lesbarkeit
gesetzt.
.6.

Festes Layout auf Bartelme.at. Bei ein facher Skalie-

rung des Schriftgrads (VergröBerull!) werden Inhalte

erwartungsgemaß deutlicher.

,~

Und genau an dieser Stelle kommt ein weiterer kri t ischer Punkt
zum Tragen. Aus Usability-Sic:ht ist es bei layouts dieser Art beson-

ders problemat isch, dass Textinhalte bei der manuellen Vergrößerung der Sch riftgröße (in modernen Browsern) zwar größer werden, aber immer von Blöcken gleicher Breite begrenzt werden.
Das bedeutet, dass es schon bei einer Skalierung des Textes um
das Doppe lte bis Dreifache vorkommen kann, dass nur wenige
Wörter in den Inhaltsblock passen. Da die Zeilenhöhe fe st ist,
können sich Buchstaben auf verschiedenen Zeilen bei der Skalierung uberlappen . Dadurch verschlechtert sich die Lesbarkeit der

Zoomen und

Sk.li~ren

Bel den meisten Browsern können Nutzer die Zoom-Option
verwenden und die Schrif!größe
der Inhalte beliebig skalieren.
Beim Internet Explorer bis einschließlich Version 6 lassen sich
Elemente, deren Dimension in
p)l.Werten gesetzt Sind, nicht
skalieren.

Texte. Konsequenz : Im Endeffekt werden die I nhalte das Layout
sprengen und unlesbar machen, etwa wenn ein Wort vorkommt,
das zu lang ist und wegen der eingestellten Schriftgröße nicht In
die vorgesehene Box passt.
Zudem kann es vorkommen, dass bei festen Layouts der rechte
Teil der Sei te beim Drucken abgeschni tten w ird, da die ganze
Seite wegen des lin ken Freiraums nicht auf ein Blatt Papier im DIN
A4-Format passt . Ein sorgfältig ausgearbeitetes CSS-Drucklayout
ist deshalb bei Layouts dieser Art immer unvermeidl ich. Bei dynamischen layouts taucht dieses Proble m nkht auf. Wie Gar rett
Dimon in seinem Beitrag »To Scare or Not To Scalee J bemerkt , ist
die Entscheidung für oder gegen ein Layout fester Breite grundsätzlich eine Entscheidung für ein festes vi suelles Design oder fUr
einen flexiblen, skalie rbaren Text.

3 http://VI.garrettdlmon.romldrchlveslto-ua~-or-not.to ·uak (U nkcode 301)

9·5 Auswahl des Layout s - fest, flüssig oder elastisch?

I

585

I

9.5 .)

liquid/ Fluid layout

Die Anpassung der Conta ine rgröße an die Fenstergröße des
Browsers ermöglicht es dem Designer, die Darstellung von Inhal-

HINWEIS

Die Beispiele zur fl oet-Methode und zur rela tiven sowie
zur absoluten Posit ionie rung
wurde n als flüs sige l ayouts
realisiert.

ten auto mati sch an die Präferenzen des Nutze rs anzupassen. Be i
flüssi gen l ayout s kommt di ese Idee ent scheidend zum Tragen:
Die Größe der Seitenblöc ke wird durch die Grö ße des Browserfenst ers best imm t . Möchte der Anwender die Sei ten darstellung
anpassen, um etwa eine optimale Lesbarkeit (z.B . eine andere
Zeilenlänge) zu erreichen , so genügt es, die Fenstergröße entsprechend zu verändern . De r horizontal e ScroUbalken wird somi t
bei vernünftigen Auflösungen vermieden .

•

.=

_.-......_..._-_.._--,..._-_._"'_..-_... _.....
... _. ..
._._----. _
--_.
._- =
..._-_
.
_
.. ---...
........
----_.,_.
_
_
.
..
- ... ......_. __......-....... _--_ ... -

<,;.,>

HTML an<! CSS Tuto~$ ArId Stuff

----

..-

'-

~-

"

-

.. Abb ildung 9.82
LiqUid layout bei Htrnldog.com. Da die Breite von Seitenblöcken In Prozentwerten angegeben iSt, verkleinert
sich die Breite der Blöcke mit kleiner werdender Bild schirmauflösung. Optimale Darstellung bei 1024 )( 768

HINWEIS

BeZiehungen zwischen Seitenelementen in fes ten l ayouts
können bei fl üssigen l ayouts
schnell an Deutlichkeit verlieren :
Blöcke verändern ihre Dimensionen , sodass neben UsabilityProbl emen unter Umständen
auch die Struktur der Seite mehr
zu erkennen ist.

(f-J.l>

-_. _.....
HTMLOot

T>""""-ondc",

Itrtorialt

~­
w.~
~~­
r
n _ ......

-

~--

..-----

HTML and CSS
Tutorials.
And _.,._
Stuff.
..._
_ CSO,
...........
..............._WJM.....
"'. ___ ....

.. -

,- ...., ~ - -

. . . . .-

~- -

• Ab bildung 9.8)
Bel 640 x 480 ist die gesa mte Seitenstruktur zwar nur
schwer zu erkennen. ein horiz ontaler Balken entsteht
trotzdem nich t.

Grund sätzli ch verwenden flüssi ge l ayouts den gesamten verfügbaren Browserpl atz, wodurch Desi gner Inh alte bei hohen Bildschirmaufl ös ungen auf der Seite verteilen können, ohne sie in
schmale Container einsperren zu m üssen. Zudem bleiben Inhalt e
auch bei kleinen Auflösungen wahrnehmbar und können (meistens) in einer noch akzeptab len Form dargestellt werden .
Flüssige l ayou ts überlassen Seitenbesuchern die Freihei t zu
entsche iden , wie breit ein Layo ut ersc hei nen soll. Dies bedeutet
für Si e als Designer, dass die Beziehungen zwischen Seitenelementen, die bei Layouts feste r Brei te immer unverändert blieben,
nun ni cht mehr fest sind und in einen flexiblen Rahmen gesetzt
w erden müssen.
Flexi ble Layout s sind grundsätzlich zei tauf...vendiger und
schwerer zu realisi eren als stat ische Layouts fes ter Bre ite. Sie
bauen auf präz isen Vorüberlegun gen des Designers auf und benötigen eine sorgfält ige »Glättung« der Werte, die für die Brei te der

586

I

9 Web 2.0-layouts mit CSS umsetzen

I

Con tainer gesetzt werden. In der Praxis zeigt sich nämlich, dass
Proportionen, die bei kleinen Bildschirmauflösungen noch durchaus brauchbare Ergebnisse liefern, bei großen Bildschirmauftösungen Inhalte übermäßig ausdehnen und damit die Lesbarkeit
erschweren können.
Aus dem oben geschilderten Sachverhalt leitet sich ein grundlegendes Problem ab, das bei der Implementierung von flüssigen

layouts gesondert berücksichtigt werden muss.
Zum einen ist in Layouts dieser Art bei einer besonders großen
Bildschirmauftösung mit einer zu groBen Zeilenlänge zu rechnen.
KonsequenteIWeise vergrößert sich die Anzahl der Zeichen pro
Zeile; damit versch lechtert sich die Lesbarkeit der Inhalte. Dass
die Breite in Prozentwerten gesetzt wird, lässt sich nur schlecht
bei derWahl der Seitenbreite berücksichtigen . Hat eine .flüssigeoc
Seite darüber hina us auch wenig Inhalt anzubieten, so sieht ein
Seitenbesucher mit einer großen Bildschirmauflösung nur wenige
Zeilen Text mit hoher vertikaler fls ldeba r-Spalte. die
nierenden leeren Räumen umgeben sind.

von domi-

Eine gängige lösung des Problems ist, eine obere Schranke für
die Breite des layouts bei großen Auflösungen festzulegen . Dies
entspricht zwar ni ch t dem Prinzip der absoluten Flexibilität, die
durch flüssige layouts gegeben wird, ist jedoch eine vernünftige
Maßnahme. um die Zeilenlänge in einem angemessenen Rahmen
zu halten.
Bei der Wahl der oberen bzw. unteren Sch ranke em pfiehh es
sich, den Wert abhängig von der Breite des flcontent-Containers
mit optimalen (und noch gut leserlichen) Zeilenlängen ± 10% zu
wählen. Dies entspricht in etwa 47 (minimal) bis 86 (maximal)
Zeichen pro Zeile.
Realisi ert wird die Festlegung einer maximalen Sei tenbreite
mit der CSS- Eigenschaft max-wldth, die einem Con tainer seine
maximal mögliche Breite zuweist. Die Eigenschaft wi rd vom
Internet Explorer bis einschließlich Version 6 nicht unterstützt.
Um das obige Verhalten auch im In ternet Explorer zu realisieren. wird die expresslon( )-Eigenschaft, eine der sogenannten

Dynamic ExpreSSions· des I nternet Explorers, ausgenutzt. Diese
Eigenschaft ist in der CSS-Spezifikation nicht definiert und ist als
JavaScript-Snippet zu verstehen, das in (55 eingebettet wird. Sie
wird von anderen Browsern ignoriert.
{Jcontalner
mln-wldth: 730px:
max-wldth: 11SOpx:
4 http://msdn.mlaosojf,(om/llbraryl ckj<lIit.<lsplurl-lw<<hhopl<luth<<l dht,,.1
overvkwlrec/J1c. /Jsp (Unkeode 302)

9.5

Auswahl des l ayouts - fest. flüssig oder elast isch?

I

587

width: expression(doclIment.body.clientWidth < 731 ?
M730px" : document.body .clientWidth ) 1151 ? MllSOpxM
"autoM) :

TIPP
Wie geht man mit MultimediaElementen fester Größer bei
flü ssigen Layouts um11n seinem
Beitrag " Experiments with wide
images« (http://dagnut.com/
sandbox/lmagett>5t.php) experimentiert Richard Rutter mit Bildern fes ter Größe und zeigt. wie
ihre Größe an beliebige Auflösungen angepasst werden kann.

Die obere Anweisung sorgt dafür, dass die minimale Seitenbreite des Containers 730px und die maximale 1150px beträgt
Bei älteren Versionen des Internet Explorers wird dagege n der
dynamische Ausdruck ausgewertet: Ist die Seitenbrei te kleiner als
731 px, so wird die Breite auf 730px gesetzt; liegt die Sei tenbreite über 1151 px , so wird sie auf 1150 px gesetzt ; ansonsten
w ird der Wert auto genommen.
Wei tere Informationen überdie Implementierung der ml n- und
max-Eigenschaften im Internet Explorer finden Sie in dem Beitrag
" max-width in Internet Explorer« (http://www.svendtofte.com/
codelmax_width..Jn_ie (Linkcode 36B».
Seltener wird auch die Eigenschaft ml n'wldth benutzt, um die
untere Schranke für die Seitenbreite festzulegen.
Bei der Implementierung von flüssigen Layouts kann es sehr
nützlich sein, bei Seitenblöcken horizontale innere und äußere
Abstände relativ (in Prozentwerten) zu der Fenstergröße anzugeben. In der Design-Szene ist diese Vorgehensweise unter
dem Begriff Concertina Padding 5 (Concertina = Ziehharmonika)
bekann t . Wird das Fenst er vergrößert, so vergrößern sich auch
die Abstände zwischen de n Blöcken, wodurch sich die Zeilenlänge nicht so stark vergrößert. Bei einer Verkleinerung des Fensters verkleinern sich auch die Abstände und geben dem Text
mehr freien Raum.
Nebenbei sei angemerkt, dass nicht jeder Seitenbesucher
begeistert sein wird, wenn er nach der Skalierung des Browserfensters feststellen muss, dass sich die Darstellung eines Beit r38s
komplett verändert hat.

9.5.4

El ast ic l ayo ut

Um eine optimale Lesbarkeit von Texten mit einer flexiblen Seitenda rstellung zu kombinieren, wird bei flüssigen Layouts die
Zeilenlänge explizit begrenzt. Dies sorgt dafür, dass Zeilen bei
ve rschiedenen Bildschirmauflösungen eine geeignete Anzahl von
Zeichen beinhalten. Mit elastischen Layouts wird dieses Ziel mi t
einer anderen Methode erreicht: Setzt man die Breite des Layouts
in ern-Einheiten der verwendeten Schriftgröße, so ist die Seitendars tellung Mar nicht von der Fenstergröße, wohl aber vom eingestellten Schriftgrad abhängig. Ist neben dem layout auch die
5 http://webstanrurdsaroup. Of"&lfeat ures/richaf(j· rutt~. cfmllliquid
(Unkeode 304)

588

I

9

Web 2.0-layout s mit CSS umset zen

I

Schriftgröße selbst in em-Einheit en gesetzt , so werden sich Texte
und layouts bei modernen Browsern einwandfrei skatieren lassen
und Zoom-Effekte erzeugen (daher werden elastische Layouts

HtNWEIS
Der grund legende Vorteil von
elast ische n l ayo uts be steht also
d ari n, dass Textb lOcke Ihre Propo rtio nen beibehal ten .

häufig auch loomable Layouts genannt). Dadurch ist gewährleistet, dass eine Textzeile bei beliebiger Skalierung des Schriftgrads
immer die gleiche Anzahl von Zeichen ent hält. Konsequenz : Das
Layout dehnt sich bei der Vergrößeru ng der Schriftgröße automat isch aus - so wie es sich f ür ein elast isches Objekt gehört.

_._---_
.._---_
.•.._----

.------_._------------..

._-~._-----­

.~

-

-----_._._---

~-~-

.t..

Abbildun g 9.84

Elasti<: layout bel lIovej')ckdanlels.com. Bei einer

kleinen SchriftgrOSe Ist dH gesamte Layout entsprechend klein (O,5-fache Darstellu ng der Seite).

.. Abbildung !}-85
Mit zunehmender Schrlft grOßl! nimmt auch die
layoutbreite zu (Standarddal1te llu ng).

\\

_.------.-------_.
__.__ ..

~-----­

~:

---

..,.....

-_
...
------_... _...._..-.... _----_
---"""-------_
. _- -_.,_ ..-..... .- ----.. _-----_
"--.
- ........

~

-----

--

_ ___

I

_

_.JI"--

r:::=:=:r-_

C _- - -

.. Abbildung 9.81
Dreifa che VergrOßeru ng d er Schrift größe

.. Abbildun g 9.86
Zweifac he vergröße ru ng der Schriftgröße

Da die Schri ftgröße ohne Zutu n des Seitenbesuchers nicht yer·
änd ert wird. en tspricht das Verhalt en elastischer Layouts im
Grunde genommen dem Verhalten yon Layouts mit fester Brei te.
Hiermit übertragen sich auch Vort eile. Nachteile und pot enzielle
Probleme yon festen Layouts unmittelbar auf elastische Layouts.
Problematischer Ist bei elastischen Layouts der Umgang mit
M ultimedia-Elementen. Theoretisch lassen sich auch ihre Dimensionen über ern·Werte angeben. Ob jedoch die Skalierung yon
Bi ldern auch ihre Deu tl ichkeit erhöh t, ist fraglich. Bei Bildern klei·
ner Auflösung wird dies mi t Sicherheit nicht der Fall sein, da auf
diese Weise kein optischer, sondern ein digitaler Zoom realisiert
9.5

Auswahl des layouts - fest, flüssig oder elast isch?

I

589

w ird. Interessante Zoom -Effekte sind dami t du rchaus mögli ch.'
Deshalb werden Bilder grundsätzlich mi t pX-Angaben versehen,
wodurch sie zwar fest bleiben. dafür aber deutlicher hervortreten. Hinzu kommt. dass eine vielfache Skalierung von Texten be i
elastischen Layouts die Breite des Layouts explodieren lässt und
horizontale Balken verursacht. In der Pra:<is wird dies aber eher
selten vorkommen. f alls die Schriftgröße ursprünglich vernünftig gewählt wu rde. Die Fes tlegung einer max imalen Layou tbreite
er.Neist sich als die einzige Möglichkeit, die Breite auch in solchen
Fällen in vernünftigen Sch ranken zu hal ten.
9.5.5 Hybrid Layouts
In den meisten Fällen wird in der Praxis ein Kompromiss zwischen mehreren Layouttypen ver.Nendet.
Fi xe layouts mit sk alierbaren Tex ten I Um es allen Nutzern
zu ermöglichen, Text inhalte zu skalieren, wird der Schriftgrad
im Web LO- Layout fester Brei te (px) in relativen ern - Einheiten
gesetzt. Dies hat zwar immer noch den Nachteil, dass Inhalte in
fes t e Blöcke gepackt we rd en, sodass weniger Zeichen pro Zeilenlänge angeze igt werden, relativiert jedoch das Problem. dass
Inhalte im Internet Explorer überhaupt ni cht skalierbar sind.
Als Beispiel betrachten Sie bit te die drei nachfolgenden Abbildungen.

~

---

Suggost ß jOb nnd g81 n lree shuffle.
'(IN A''''''' """" ro Mp... U ftl ,. on "".r. ..''', JOII .".. In I"" _
lIIJI1 01 Ir>ooll"Ql'
.,iIOI_""".pa
...... JW ,....... tnod ... .
np .• "'.., . _ _ :n ....
T""I~

tu

0<1 ..,. . ...

Want 10 Know who', been 8routld here l&tel,,?

, ,

_._u,,_. . . . . .. "
_. ,_._..........""_........-_........

_,»tl.......

..... , . " ,. ,.,." _ , , , """.,... 1>< .. 00 . . ....... "' .,. .... ""'"' ... 0

... O_ _

... _llloIh'''''' ... . _ _ ...... _ _ ........... .

...........
_ · ..... _!l"'!II-.- ........ "" ......... 0100 ...... '
..""..__ ...•.....-01..-...,
_ ."....._ ... ""....,."....... ., ..

LeT.

~~-

'g,ewIlll · 70''"'~stII~ · 1n

_tn . . . __ ............,.,.._

- . ..• .,..... " ...". uo ...... _ __
_

.... _

...x.....

.."*"'O- ......

t..

....." ", ·

1OOt1oon "la..""' . ....... '"

...

".~

Oll' _ . _ !Ot1IH'lIIU ID<U .......

~ _ "MIG

1(IOJrOtf.lCIe

""f w'lI"IIY_ntno._

'""'! ''''",_oo-."u _

... . , """"""" goI f • ...,iiC8Il 'Jf"'"-'<I_
_ ( _ _ .... ".......lOt_ "' _
lOt)orol
......""" ..."a ...__
.......,
oogro."'~

I\I~CN*_M»

1.,..".... I .. n

•

--.~....

..~IIW!fJY ...... _

.'"""""""""........,"'0(""' . ...

.... Ab bildun g 9.88
Fixes layou t mit skaJierbarem Schriftgrad bei Tijsvrolix .be ~
Sta ndardsch rlftgröße
6 Clagnu t Dyn.."ic Layout (http://cldanllt.com/S,lfldoo)(/dynamlc·!ayout

(Unkeode 305»

590

I

9 Web 2.0-Ldyouts m it CSS umset zen

-_....-............
__... .. . ..
. . .. _-_._----_._--_----_
.-_
--_
.. . ...-...
... -.,.-.
__._----_
..._-_
... -..... - ............ _._-_
.
_
...
.. __ ..,-==,-_
.
.
-_
...
,
-_._-,
_
....
_
......
..
... __ ... _._ ...._-- --'.-_
__
._._.. -_
_
........-......
-----,
..
.
.
_
........_
... _--_-_._
--------..
...
---..
_
..
_-_
.
_----,
. . .....
_--_
.
..
.... _--'
..
....
__
.
_
---.
...
__
.
"--"--'-"...............
. .-..... _-_
.....
_.-_._.............
..
..
_-,_...
---_
..
_
.......
.
__
.
_--,-... --..
. ...
_

... "'.,...

_..,

-~

•

8M _ _ ',",

~

-- ~ -

_,-

-~-

... Abbildung 9.89

... Abbildung 9.90
Dreifache SchriftgrOSe

Doppelte SchriftgrOße

Flü ssi ge und fest e Layo uts

I Um die Vorteile von

Layouts fester

Breite und Flexibilität von flüssigen Layouts gleichzei t ig aU2Unutzen, können sogenann te Fixed-liquid-layouts mit der lel/ot ayou t- M et hode (hf tp:/lu wmik e. co m/arti cl es/200 510 5104/j ello-liquid-layout (linkcode 369» realisiert werden.
Die grundlegende Idee dahinter ist, das proportionale Wachstum der Seitenbreite mit zunehmender BUdschirmauflösung zu
verlangsamen . Sowird dadurch beispielswei~e sichergestellt, dass
ein dynamisches layout, das bei einer Auflösung von 800 x 6CX)
die Breite 770 px (770 1 800 = 0,9625) hat, bei 1280 px nicht eine
Breite von 1232px (1232 / 1280 = 0,9625) besitzt.
.

_.

-::- _::'..-::::._.;=--~.-

.

---- ...... -

... Abbi ldung 9 .91
Die Jello-layout-Technik. Ein feste§ layout wird mi t einem
flüssigen l ayou t kombiniert, damit die Seitenbreite mit
zunehmender 8 Udschlrmauflösung nicht zu stark wächst:
BildschIrmauflösung: 1280)( 800

... Abbildu ng 9.92
BildschirmauflOsung: 1024 )( 768

Die Implementierung ist intuitiv einfach zu verstehen. Ein Großteil der Seitenbreite wird durch eine feste px- Breite festgelegt,
der Rest ergibt sich aus einem Prozentanteil der Bildschirmbreite .
Je kleiner der feste Anteil im layout, desto stärker dehnt sich die
Seite aus, so das Prinzip .

9.5

Auswahl des Layouts - fest, flüssig oder elastisch?

I

591

I

Abbildung 9.93 ..
Oie Jellolayout-Methode im
Einsatz. Jello-layout mit Jello
Calculator
(Q uelle: http://uwmike.com/
artideS/2005/05/041jell 0-1 iq uidlayout, Unkeode 370).

., ........

JeIlo: A Different Uquid Layout

"'-0.,.,.._"'. ___·...... _ ... _ ...........
_ " _ T1oo_T_of •• _

0 . ...' _ .. _

...

.. ..,. .......... ~.u..

Technisch wird bei diesem Ansatz im Rückwartsgang vorgegangen. Zuerst werden bei einem zweispaltigen Layout zwei Spalten
erzeugt, deren Brei te entsprechend ihrem Gewicht in Prozentwerten gesetzt wird (etwa 70 % zu 30%). Anschließend werden sie
in einen Cont ainer gelegt, der mi t negativen horizontalen außeren Abständen (md rgi n - 1eft, md rgi n- ri ght) versehen ist. Der
linke und der rechte Abstand betragen jeweils genau die Hälfte
der Breite, die den fe sten Anteil der Seiten breite ausmachen soll.
Anschließend wird die gesamte Konst ruktion in einen weiteren
Container gepackt, dessen Breite von der Brei te der Fenstergröße
abhängt.
<div ld-' st ret ch " )
<d1 v id-" con tainer " )
<d1v 1d-' content ' )

</div)
<dlv ld-" sldeba r " )
</ d1v )

</ dlv )
(55:

I/s tret c h

margin: 0 auto :
width: 60%:
1* Verwendete Se itenbreite bzg1 . der Fen sterbrefte */

592

I

9

Web 2.0-layouts mit (SS umset zen

I

/Jconta1 ner I
margln: 0 -265px 0 -265px:
1* 265px + 265px - 530px. ' fe s ter ' Antefl der Seitenbreite */

I
IIcontent {
float: left:
wldth: 551;
margln-left: 8S;

#sldebar I
float: right:
wldth: 211;
margln-rlght: 8%:

Es ist zu beachten, dass diese Technik einiger IE-Anpassur,gen
bedarf, um den Effekt in aUen Versionen des Internet Explorers
zu erzeugen.
Das Layout kann mithilfe von Je/lo Layout Calculator (http://
sandbox.mikepurvis .comlcss/jello/cdlculator.php (Linkcode 371»
ooline generiert werden. Der feste und der relative Anteil der

Seitenbreite können angegeben werden; dadurch lässt sich der
Streckfaktor des Layouts automatisch festlegen .

Fl üssige elastisc he l ay out s

I Im Web 2.0 zeigt sich zunehmend

der Trend zu elastischen layouts mit fluiden Elementen. Dabei
ist es üblich , die maximale und minimale Breite (nicht die Breite
selbst!) des Containers abhJ.ngig vom eingestellten Schriftgrad
(in em-Einheiten) anzugeben. Seitenbläcke werden dagegen in
Prozentwerten zur Fenstergröße festgelegt, Textinhalte werden in
em-Werten gesetzt.

._----

. - ._.
-_ _- -- . -- -_._.

,

t::::"~1

..

'..

~4

,-

3

==-- ---

,

----- ----

'::'I':. ~
_ _ t:"_'h!oeL
~

=:..:::.=-- ::-_-

......... __."'_... ._--------.:::-"'"------_.....

:::::.. ..- 0

9·5

T Abbi ld ung 9.94
Auf 456bereastreet.com verändert sich die L<?foutbrelt e in
Abh.lngigkeit von der gewählten
SchriftgröBe ,

.", .r~rA"
~.
--------- ~
--

----_
.. __._-_
.._-_._....
-_.---..----------_._-_..... ._- 11---.--"-_._---_._-.

-----

----_
__
- -- --_._._-~

--~_

=.-=--===-=--:.;...:,-- eI·-- _ _

Auswahl des layouts - fest, flüssig oder elastisch?

I

593

Somit bleibt das Seiten layout insofern flüssig, als dass es sich an
die Femtergröße anpasst, hat aber sowohl eine obere als auch
eine untere Schranke, die für eine optimale lesbarkeit sorgt.
Dadurch hat man neben dem elastischen Zoom-Effekt auch den
Nebeneffekt, dass die Brei te der Spalten sowohl bei einer Skalierung des Browserfensters als auch bei der Skalierung des Schriftgrads angepasst wird.

<dfv id- "wr ap ")
<di v id- "content ")
<dlv ld-"maln ") ... </ dlv )
</dfv )
<div fd- "c ontent- se condary ") ... </ div )
</ div )
Die Gestaltung mit (SS:

!!wrap {
min-width:600px;
max-width:70em;
margfn:O auto;
IJcontent ( clear:ooth)
/lmaln (
fl oat :l e ft;
wldth:622;;
/lcontent-secondary
fl oat :rfght;
wldth:332;;

9.5.6

W eit ere Tec hni ken - Ch amäleons

Neben klassischen layoutarten zeigen sich bei der Implementierung immer wieder neue Muster, die im Web 2.0 neue Konzepte
und Ansätze entstehen lassen. Sie setzen nicht auf das Erscheinungsbild eines Layouts (zum Beispiel feste oder dynamische
zweispalti ge oder dreispalt ige layouts), so ndern auf eine dynamische Seitenstruktur, genauer ~ die dynamische Positionierung
von Seitenblöcken . Konkret heißt dies, dass ein Layout, das bei
einer Bildschirmauftösung aus drei Spal ten best eht , bei einer
kleineren Auslösung zweispal t ig wird und bei einer größeren Auflösung zu vier Spalten erweitert wird.

594

I

9 Web 2.0-layouts mit (SS umsetzen

I

Der Vorteil einer solchen Vorgehensweise liegt auf der Hand . Der
Entwickler muss sich keine Gedanken darüber machen, dass die
Seiteninhalte stets an ihren Positionen bleiben . Auch der Vorteil
für Seitenbesucher ist offensichtli ch : Bei allen Auflösungen wird
die Seitendarstellung automatisch optimiert.

9.5.7

Fe ste layouts mit variabler Breite

Um die Darstellung von layouts bei verschiedenen Bildschirmauflösungen besser in den Griff zu bekommen, können Designer
auch zu JavaScript-Methoden greifen. Wird mittels JavaScript die
aktuelle Seitenbreite bestimmt, so können Browser mit einer ent-

spreche nd optimierten (55- Formatierung gespeist werden. Layouts solcher Art werden variable fixed Width layout5 genannt.

... Abbildung 9.95
Mit kleiner werdender Bildschirmaufi Osung verändert sich
die 5@itenstrukturdementsprechend . Dies wird mit einem

Java,Scrlpt realisiert. (Quelle:
htt p j Iclagnut.c om/sandbox/
dynamlc-Iayout. linkeode 372 ).

--- -

The House 01the VaWi

-----_ ......- ---

----_
--._-_....-..•_.__----'-------__
.
-------'--- _.....

,

_

- -._._._-~
--~ .

-._ ~

_........._-..------------_._..-_
_-_.
"
... -_
_.....____.....____
..... _
__......._-_
._,.__ ......_....
The House of the Vettii

....

_ _ ... _

• • • • 0 ... _

....... _

""---

...

....... _

--.....-.-_._,
. _........._
.___
. _.--_
-_..._- ..-_
...- ._--_._---_
_.....__._,.
....
_-_-._....
_,
.
_--------......_
_
..................
.. ._._
...__
........
_
..
_
......
_.....
.. __
_._
.........
_
.....
_.
__
..
.....
.
_
-_
__- .._.._ .... __
,_

t _ _ .. _

.... _ . _ _ _ • _ _ ~ _ _

., ...

_ _. _... _

, .....

...

...

......
........

~

... ,...
,..
.... _ _
... ......... H'........
..--.._...
.. .
- :...
..,_
.....

, _ ,........................ _

.....

.. _ ...... 0.1 .. _

.. ... .,.

_ _•

The House of the Vettii

'0'_.

,_'0'
.. _.,.
.. _
_.....IIV_
1oO_",*"" !dl . . _ ,...
_ "_v.....
,_
_ ..... _ .... _"" <:bt.M...,
_ _ .,..
","_'-oolV"'O , .. _

_..

•• ..",~...pool.~_..,. "

. . '" .10"""-_'_100 .... _ ..... _ ... '...

_ _ 101_ , ...... _ .'" "' ... _...., 01 I'<npol 1 .. _
~0I'f - _

'hoo._.... "-.... _01 ... _ _ • .,.. _

..... . """' .... ". _10_ ... , ... . b.... "'" ......... oI "," <op:!>-

__ .,..."""'I . . .

_

.... _

....... _

......... 01 ... _

..

.

. 01 , •• 'o'od

~_

...

. , ... ....... "'.. ,..., .. "" ..

.....'"
~ ... _
'"
...". r .. _ _ ....... _r4t'
__
_
_ .... .." ..........
....._
ood ' ..
--'r _ _
.... _
. _ .. _"""' ~

_c_Oho ..... "'..... .""''' ' '-

_ ')'100 ,......... """'....
1~

.. 0 poo: .... "" ... c _ _ .. ... 100< ' 01 "'. ,.. ..... _

,.... .,"' • • fou • • .,. ... 'o' .....

_.

""'boC_'
.. .,<_.
''',..... _ _ "''b!' ......

z...·

.... b:üoJ ...

".1"<" ,•••"""'V 0I 1."" "'100 M<I ,Nd", ,,....

"",.<lI 11_
1IIiI. I. """ '" _ ' .... Z... Ico_ oe_ l lorNlo '" ,.....1I _ _ by ......
IOI_•
A. . ~ ...
1 ....

_""'''' ... _

IIio "_

,~

... '''. '''' ... ,... ,_

T,leIorium",all p• .,ling

Eine Implementierung solcher layouts finden Sie in dem Beitrag _Redesign Notes 1: Width-based layout. von Simon Collison (http://www.colly.com/?/ commenb/redesign-notes-1-widthbased-Iayout (Unkeode 373».

9.5

Auswahl des Layouts - fest , flüssig ode r elastisch?

595

Ähnliche Methoden werden in den folgenden Demos präsent iert:
.. Fortes dynamic layout
http://fortes.com/projects/dynamic/ayout/ (linkcode 374)
.. Dynamic layout
http://c/agnut.com/sandbox/dynamic-Iayout (Unkcode 375)
.. Resolution dependent layout
http://themaninblue.comlexperimentiResolutionLayout (linkcode 376)
.. Dynamic layout : adaptive columns
http://www.brdlldspankingnew.net/5peä dls/ adaptL ayout/
adaptivf'_columns_01.html (linkcode 377)
.. Dynamic layout : adaptive columns
http://www.brandspankingnew.netlarchive/2005/1 2 /
dynamic.layouts_wlth_css..javascript.html (Li nkcode 378)
Außerdem bieten folgende Beiträge zahlreiche Beispiele zum
Thema:
.. ,.Variable ti)(ed width layout«
http://c/agnut.com/blog/1663(linkcode 379)
.. ~C ollapsible layou t« - fensterbasiertes layout
http://bloe.calm-l1-easy. de/archiv/ colt apsi ble-I ayoutfensterbasierendes -Iayout.html (linkcode 380)
.. ,. Fle)(ible Fi)(ed layouts«

http://www. ne tmag. co. u kill ne/h ome/fie xlble-fixed -layou ts

Abbildung

~J.96

...

Te)(l-Zooming-Technik. Die
Schriftgröße <indert 5ich in Abhdngigkeit von der Bildschi rmauflösung (Quelle: http://www.
I inn ed frutI.com/ sand box!
ledzoom.hlml)

9.5.8 Text-Zooming-Methode
Ein wei terer erwähnenswerter Ansatz wird mit der Text-ZoomingMethode (http://www.tinnedfruit.convsandbm/textzoom.html(linkcode 381» geliefert . Die auf JavaSc ript basierende Technik verändert die Schriftgröße der Inhalte in Abhängigkeit von der eingestellten Fensterhreite . Die Methode kann analog zu elastischen
layouts verwendet werden, um in etwa die gleiche Anzahl von
Zeichen pro Zeile bei verschiedenen Auflösungen sicherzustellen.

--_
._ - ...- - _--_-_
-__.__-__ _
_-.----_.._..._..._ --_-....... ,..""'

.,.. _1>;

-

'

"

M

O

D

_

~

.......

_ ·• •

....

_ _ ... _

....

...,_ ..

.... _ _ _ .. _ _ ....

._"'.(_1 ___ .... _ .. __ _

...
..

Text Zooming
Slzlrlg tl"n wlth t he browsl"r wl ndow

~

...... . . .. .... .....................
........

Ho,.·,

0 ,.,..,. 00 1< ,c,,,,on, 'OCMoqU' tor .. ,,~ '''''' con, .... , ~., ,n:ll"9
on "'" .. otIt ~ 0 1 ,,. <on, ..".'9 01"", .... . er .n~ o , ~ ".m.. " (er 'hiol
m ~ l t .... . ><Iu4"'1 t ~ .
body Tho . ...... ~M ,f ~o" .....,. 10 :

do«.·".,..\

596

I

9 Web 2.0-ldyouts mit CSS umsetzen

9.5.9

I

Switch y Mclayout

Im Gegensatz zu ähnlichen JavaScript-basierten Techniken werden bei Switchy McLayollt (http://www.alistapart.comlartides/
swftchymdayout (Linkcode 382)) nicht nur eins, sondern gleich
sieben Layouts in eine CSS- Oatei gepackt, um die Seit endarstelJung für verschiedenste Auflösungen zu opt imieren. Mi t einem
JavaScript-Regler. der bei Veränderungen der Femtergröße akt iv
wird, werden eine optimaJe Mini-Darstellung der Seite fUr PDAs
(kleiner als 240px) genauso wie eine angemessene Darstellung
fü r extrem breite Auflösungen (größer als 1280 px) bereitgestellt.
Von der brei ten Darst ellung zum Miniformat werd en überflüssige
Seitenelemente (Navigation. 8ilder u. Ä.) nacheinander entfernt.
in einer anderen Gestalt angezeigt und Inhalte bei kleineren
Auflösungen starker in Vordergrund gerückt. Zu diesem Zweck
werden nicht etwa mehrere CSS-Dateien verwendet, sondern
verschiedene Kl assen deklariert, zwischen denen anschließend
gewechselt wird (dafür wi rd das body-Element mit passenden lOs
versehen). Im Beitrag finden sich zwei Demonst rationen, welche
die Funktionsweise des Layouts veranschaulichen.

.... A bbildung 9.97
Switdy McLayout (Quelle:
http ://www.alistapart.com/
a rtic lest switchymc layout)

--

-- ......
--

..
=

•

-

Es bleibt anzurnerken, dass bei den drei vorgestel lten, auf JavaScript
basierenden Techniken die Sei teninhalte auch bei Nutzern, die
ohne JavaScript-Unterst ützung surfen, opt imal angezeigt werden.

9.5.10

Zusammenfassung
Die Suche nach einem optimalen Layout für Web 2.0-Auftritte
liefert kein eindeutiges Ergebnis. Abhängig vom konkre ten Fall
kann jeder der drei oben vo rgestellten Layouttypen seine Stärken
unter Beweis st ellen. Komplexe grafikbasierte Layouts werden
wegen der exakten Positionierung von Bildern mit Layouts fester
Breite optimal bedient. Dabei ist darauf zu achten, dass die Breite
groß genug gewählt wird, damit das Layout auch bei hohen Bildschirmaufl ösunge n lesbar bleibt .
Layou ts, be i denen überwiegend Texte veröffentlic ht werden,
sind dagegen bei dynamischen fl üssigen oder elastischen Layouts
besser aufgehoben. Beach ten Sie dabei bitte, dass genügend
9.5

HINWEIS
Viele Designer tendieren eher
dazu. bel Seiten, dievorallem
Ihre Beit räge (also Text) in den
Vordergrund stellen, Layouts
fest er Breit e zu verwenden. Dies
ist nicht unbedingt praktisch, da
Nutzer In solchen Fällen kaum
Kontrolle über die Darstell ung
der Inhalte haben.

Auswahl des Layouts - fest. fl üssig oder elast isch?

I 597

Inhalte vorl iegen müssen und die Zei len länge im mer opti mal lesbar sein mu ss. In der Regel ist es ve rnünftig, im Zweifelsfall auf
ein elast isches Layout mi t fl uiden Elemente n zu setzen. Ebenso
ist es empfehlenswert , nach M ög lich keit einen layout-Switcher
berei tzustellen und diesen deutlich zu präsentieren, da mit Sei ten besucher selb st entsc heiden können, nach w elchem Schema sie
das l ayout dargestell t bekommen möchten. Dadurch kön nen Sie
die Bes ucher etwa di e Breite sowie den Typ des layouts man uell
auswählen lassen . Die Einstellungen könn en per Cookies auf der
Fest platte des Seiten besuchers gespeichert werden (http://www.
aJis tapart. com/ artides/al ter na te (Unkcod e 383».

9.6
HINWEIS

Im Beispiel wird der Schwerpunkt auf die Im plementierung
des Layouts gesetzt. Aus Platzgründen wurden einige gestalterische Besonderheiten ausgelassen. Diese finden Sie beim
Nachschlagen der Quelltexte auf
der DVD.

Aufgabe

Ein klassischer Webauftritt im
Web 2.D-Look mit einer deutlichen und flex iblen Seitenstruktur sowie einer benutzerfreundlichen Seitenführung . Das
t raditionelle zweispaltige Layout
soll um einem Notizrand erganzt
werden .

598

I

Umsetzung eines Web 2.0-Entwurfs

Im Folgenden betrachten wi r eine Schritt-f ür-Schritt-A nleitung
zur Imp lementierung eines Web 2.0-Layouts mi t (SS. Das Layout habe ich zusammen mi t Wol fgang Bartelme (http://bartelme.
at), einem profe SSione llen Webdesigner und Grafi ker, realisiert

und do kum entiert .

9.6 .1

Zielsetzung und Entwurf
Die wesen tliche Faustregel eines jeden W ebproj ekt s lau tet : Einer
konkret en Implementier ung soll immer ei n sorgfäl t ig du rchdachter Entwu rf zugrun de liegen . Um Ih nen ein ansc haul iches
Beispie l anzubie ten, haben w ir uns zum Ziel gese tzt , ein klassisches Blog- Design (Header, Content, Sidebar, Footer) in leich ten und hellen Tönen zu entwerfen . Die runde Formgeb ung,
Spiegelu ngen, Ver lä ufe sowie eine bu nte Farbwahl sa iten dem
Entwurf einige typisc he Merkmale eines Web 2.0-layouts verleih en.
Im Hinblick auf die Sei tenstru ktu r soU die Haupt navigation
eine prom inente St elle im oberen Seitenbereich bekommen. Die
Optionen zum Abo nn ieren von Inhalt en via Web-Feed s sollten
direkt sicht bar sein und mit hilfe von Stan dard-RSS- Icons zur
schnelleren Wiedererkennung gest alt et werden. Eine Such box
rech ts oben auf der Se ite ist aus Usabil ity-Sicht ebenfalls sinnvo lt.
Die sekundäre Navigation soll im rechten mittleren Block
erscheinen - zusamme n mit Ankündigungen, weiteren Infobereichen oder et wa (joogle AdSense-W erbung . De r linke m ittlere
Block ist für den Inh alt vorgesehen. Dabei w ollen wi r Beit räge m it
Randbe merkungen ve rsehen könn en. Ein d un kler Footer soll die
Seit e optisch abschließen.

9 Web 2.0-Layouts mit CSS umset zen

I

Beim Entwurf wu rde höchste Priorität auf eine ein heitl iche visuelle Darstellung sowie eine klare und flexible Seitenstruktur
gelegt . Aus diesen Oberlegungen heraus wurde ein abstraktes
Schema entworfen .

.,

... Abbildung 9.98
Das abstrakte Schema des
Musterbeispiels

Nach einer mehrstufigen Entwurfsphase haben wir uns für einen
recht simplen und anschaulichen Seitenprototyp entschieden.
Die grafischen und typografischen Entscheidungen basieren auf
der Grundlage der Richtlinien und Regeln, die in den Kapiteln 3,
. Textgestaltung«, und 4, . Farbgestaltung Web 2.0«, erläutert
wurden.

tt;l20

-

-_._-_._-_._.-------_._--.-----'-'----._--_
.....
-_._..__.....-------'....-=_.-----_
--_._----.
----------_.----_._-._._-_._.-_._-------_.----_._.
-------------_.-.---_._---_.
---'-'--'
_.- . --- - -------_.
===::-----::
---_.
r"--

-~~--

_.~. :-:=-~;:~.

•

... Abbildung 9.99
Der Entwurf aus dem abs trakten

Schema . Ein Adobe PhotoshopSketch Im Web 2.0-Look
9.6

Umsetzung eines Web 2.0-Entwurfs

I

599

9.6. 2 Entw urf des Sc hemas
Zu r Umsetz ung des Entwurfs in X HTML- und C55-Code we rden

TIPP

Häufig greifen Designer zu anspruchsvollen rasterbasierten
Schemata und optimieren das
Seiten layout so lange, bis die
Proportionen und Verhältnisse
der Elemente in Einklang mit
fes ten tabellarischen Struk turen
gebracht sind (GrId-based Des/gn
Approach). Für dieses BeiSpiel
war dies nicht notwendig. Der
rd'5terbasierte Ansatz ist vor
allem bei komplexen Layouts
angebracht .

einz elne Seitenblöcke den jeweil igen Seitenb löcken aus dem
Schema zugeordnet. Das Seiten layout w ird in zusammenhängende Berei che aufgeteilt, w obei Unterabschni tte visuell deutlich
gemacht w erden . In diese m Schri tt kö nnen Sie strukturelle Fehl er
finden bzw. ein strukturierte s Layout aufbauen .

--_._-_.
...__
_._.
__._.
... _'
....-~

Abbildung 9.100 ..
Der Entwurfwird für den
Abgleich mit dem Schema vorbereitet. Je deutlicher die Kon turen
der Seitenbereiche sind (sich also
beispielsweise nicht überschneiden) und je fester Element e im
Raster sitzen , desto besser und
durchdachter ist de r Entwurf.

=

Nach der A nalyse des Bildes stellt man fe st, dass 5eitenelem ente
im Entwurf gut platziert und kon sistent angeo rdnet sind. D am it
können nun einzelne Bilder in Adobe Phot oshop (wird im W eiteren nicht erlä utert ) bearb eitet werden .
9.6.3

Grund g erü st entw erfen

Bei der Um set zung des Entwurfs gilt es zunäc hst, die Grund HINWEIS

st ruktur des M arkups und die Stan dard stHe festzu legen. A ls

Bel semantisch korrekten layouts ist es möglich, auch mit
dem Dokumenttyp Transit/onal
zu arbeiten. Dieser Dokumenttyp wurde Jedoc h ursprünglich
zu dem Zweck entworfen, Designer beim Redesign von alten
tabellenbasierte n layouts zu
unterstützen. Bei neuen Webprojekten sollten Sie stattdessen
den Typ 5tr1c t verwenden .

Doku ment typ (Docu ment Type) w urd e XHTM L 1.0 Strict - ein
De-facto-Standard fü r sema nti sch korre ktes Mark up 7 - gew ählt

600

Als Zeichensatz (Charset) wu rde d ie un iverselle Cod ierung UTF-B
gewäh lt.
Zusätzlich zu m ursprünglichen Schema w urde die Si debar
durch drei Blöc ke genauer fe stgelegt. In die 5ideba r wurden
ei n .. Abouh-Block sow ie die sekund äre Sei tennavigation einge7 Die GrOnde hiedur kön ne n Sie In dem Bei trag _Tran sitl o nal vs. Stric t Markupo: von Rager )ohansson, http://24ways.org/200S/transitional-vs-striet·
ma.rkup (U nkcode 320), n a:: hle<;en .

9 Web 2. 0- layouts mit (SS umsetzen

I

baut. Die letz tere wurde in zwei Bereiche (Spalten) aufgeteil t:
eine Navigation nach Thema und eine nach Datum . Die ubrige
XHTM l-5truktur ließ sich wegen der einfachen Struktur der Seite
beinahe direkt able sen .

( lOOCTYPE htrnl PUBLI C " ·IIW3CI/ DTO XHTHl 1.0 Strl ct ll
[N"

"http: //www.w3.org/ TR / xhtml l / DTD/ xhtmll- strl ct.
dtd ~ >

( html xml nS'' "http: //www . w3.0 rg/1999/ xhtml •

xml :lang_Men

M

lang-Men " )

<head >
<meta http-equlv-"Content -Type " content-" text / html:
charset-utf -8 " />

<tltle ) talkfn' web 2.0 </ tltle >
( lfnk rel- " s tylesheet" href-"style.css" type-"text /
C55 '

I>

</ head )

<body >
<dfv ld- "wrapper " )

<dl v fd- "header ")

<p ld-" s klp "><a href-"#body ")S klp
Navf gi! t fon < l a>(/ p>

<dfv fd" " r ss " ></ dlv)
<dfv fd-" searc h" ></div >
<div ld ... · navlgatl on· ></ dlv>

<Id 1v>
<dl v ld ... · body · >
<dlv 1d-"co nten t" >
<dfv cla ss- ' ent r y ' ></ dlv >
<dlv cla s s-" entry "></ dh >
</ di v>
<d1v ld-" s ldebar ">
<dfv c la H -"section about "></d lv >
<dlv cla s s - ' s ect1on ' >
<dfv c la ss-" column " ></dfv>
<dfv clas s - ' column' ></dfv>

</ d1v >
<div cl ass- ' s ection ' ></ df v>

</ dl v>
</div>
<div ld ... "f ooter "></ dlv >

</dlv >
</ body>
</ html>
9.6

Umset 2l.lng eines Web 2.0· Entwurfs

I

6 01

Hinzugefügt wu rde die Opt ion Ski p Navi gat 1on im oberen Seitenbereich. Sie 5011 es Nutzern nicht visueller Ausgabegeräte oder
PDAs ermöglichen, die Navigation zu überspringen und direkt zu
den Inhalten zu gelangen.
M it der Methode Global Reset wurde sichergestellt, dass alle
Browser bei der Interpretat ion der Seite mit gleichen Standardwerten arbei ten.
* {/* reset default values * /
.. Abbildung 9.101
Das Grundgerüst mi t minimaler
(55-Formatierung

I-IINWEIS
Oie Breite elastiscner Layou ts
ändert sic n mit der Ver<inderung
der 5chriftgräße. Dadurch soll
eine opt imale Seitendarst eUung
bel allen BIldschirm au flösungen
gew<l.hrleistet werden.

602

I

li st-style: none:
ma r gin: 0:
padding: 0:
text-decoratlon: none:
body {
f ont : small/l50~ HelveUca , Arial. Ve r dana .
sans· serl f:

9.6.4

Breite festlegen: #wrapper, #header, #content,
#foot er
Die Seite soll eine klassische zweispaltige Struktur aufweisen.
Dazu wu rden sämtliche Elemente in nerhalb des Containers
Ilwrapper platziert. Dieser soll die Blöcke /iheader, Ilbody (nicht
zu verwechseln mit dem <body>-Tag!), IIsidebar und IIfoo t er
enthalten. Um eine maximale Flexibil ität der Seite zu erzielen,
wurden diese Hauptblöcke innerhalb eines elast ischen Layouts
platziert.
Bei einem absolut elast ischen Layout würde sich die Breit e des
linken Not izrandes bei einer Vergrößerung der Sch riftgröße automatisch skalieren. Dies hätte eine Verschiebung des fl contentund des fi s idebar -Blocks zur Folge und würde die Seitenstruktur
ve rändern. Aus diesem Grund wurde die Brei te des Rands auf
eine n festen Wert (1 45px) geset zt. Die maximale Layout brei te
wird beim Wrapper angegeben (72 ern-Einheiten) ; die Angabe
der Größe seiner Kind-Elemente kann dann über entsprechende
Prozentwerte erfolgen.
Der IIconte nt-Block wi rd nach Ii nks gefl oatet, 115 i deba r nach
rechts. Bei der Angabe der Größe der beiden Blöcke ist die konstante Bre ite des Rands zu beachten . 145px wird bei den meisten
Bildschirmbreiten (800px bis 1300px) 18,125 bis 11,15 % ausmachen. Im C5S-Code können deshalb ohne Bedenken 18 Prozent
von der Gesam t breit e des Wrappe rs abgezogen werden. Dies
stellt den Containern flconten t und fisldebar insgesamt 82 Prozent der Layoutbreite zur Verfügung.

9 Web 2.0-Layouts mit (55 umsetzen

I
/ *U Maln Pos1tl onlng *U /
f]wrapper 1
f1I1n-w1dth: 905px:
ma x-w1dth: aOem:
IJheader,
Dbody,
IIfooter {
c le ar: both :
fl oa t: left:
pos ftf on: relative:
wldth: 100%:
{,Ic ontent r
fl oa t: left:
wldth: 481::
Ds idebar r
fl oat: rlght:
w1dth: 34% ;

Beachten Sie bitte, dass {,Iheader, Dfooter und lJbody relativ posit ioniert werden, damit ihre absolut positionierten Kind-Elemente
relativ zum Eltern-Element positioniert werden (etwa Textblöcke
im Footer)_ Nicht zu vergessen : Gefloatete Elemente müssen
immer eine feste Breite besitzen! Mit c lear: both: wird sichergestellt, dass keines der Seitenele mente am Rand eines anderen
Blocks fließt . Bel wichtigen Elementen einer Webseite werden Sie
dies so gut wie nie wollen.
Mit ein wenig HTMl-FOllmaterial zeigt ein Webbrowser das
folgende Bild :

----_
---_ _____---'_-_--_-_.__-_
_-_
- ___.__-._"'---_._---'----_
_--'"
--_
_
--_
-"'_._"---"'-"-------_._
---

~-­
_ I .."

talkln ' wob 2.0

... ... .

~ .-

...........
... .
... .... .....
..........

"'

...

.

..

...

.......

...

~~--~~.-- .

-------~-,

,...... _. ......

_

.. _ _ _ I ........

..

---~--

_
_'. . _._
... ___
.... ._
..._......Do. o-_I
_
.
.
.
.
_
.
-.... ... -

_ ---_
~

_ ~ -­

9 .6

... Abbildung 9 .102
S!!itendarsl!!lIung mit StandardsUlen und floot-Posltionierung
von Blöcken

Umsetzung !!ines Web 2 .0- Entwurfs

I

603

9.6.5

Gestaltung von #content und #si debar

Die Positionierung der Blöcke wurde durch die Angabe ihrer
Breite sowie der fl oa t -Eigenschaft bereits festgelegt. Was noch
übrig bleibt, ist die Verschiebung der Elemente, damit ihre Nähe
den Textfluss nicht stört und die Seitenstruktur deutlich wird.
Damit der Rand zur Gel tung kommt, wird der IIcontent-Block
um 145 px nach rechts verschoben.
I/content {
padding: 10px 0 ;
paddi ng - 1eft: 145px:

Elemente der Klasse. note sollen al s Randnotizen ersc heinen und
werden als solche aus dem Fluss herausgenommen (absolut posit ioniert) und horizontal bewegt.
ficontent .entry . note {
pos iti on: absolute;
left: 15px:
wfdth: 130px :
fJcon tent .entry . note str ang {
ba c kg round: tran s pa rent ur 1( .. i mag es / i con_n ot e.
gff ' ) no-repeat 0 50%:
di s pla y : blo c k:
padding-left : 20px;
text-trans f orm: upperca se;

_.-

lalkin' web 2.0

..-. -. ..........
_".,-..
.
.
"'--"'_._.
_
.......
_.. ................_-,......- [.,_... __..... ... .-"'--_
... _..._......... -._-_ .... -.
........
_. -_.............-. . .-...........____... . . .........- -

.-_._
-,--,_
- -_......._.
... .._
_........._
0- _ _ " _

_

_

........

Ol ....... ... ... ", .. _

-_ _

-,-.... ... ---.,-._ _.... '.-

_~-~---~_.---~_

_- ~ --~_

--_. ~

".-

- "-'

-.---0-_-"-__
.
.
.
.
.
.
_
.
.
.
.
.
--_.".__.--_._....
_ ~

_--~_

. .......
.... _" ........
.....

~­
-~,

~_

_ _ _ . ...., _, _ . ,,_ ....... 0<.

. _.~"'

~_

~--

' -_r, _ _

Abbildung 9.10] toDer Inhaltsblock #content wird
um 145px nach rechts bewegt.

604

9 Web 2.0-Layouts mit (55 umsetzen

~ .-

-"'~ _._-_
__
0 _ _ , _ _ .. _

~ _.. _

. ..

""-'

I

Die einzelnen Abschnitte der Sidebar {;. Abou t«-Block, Navigationsblock sowie d er Platzhal ter) werden deut licher voneinander

get rennt.
fl s idebar
padd i ng: I Opx 0;

{js ldebar .s ectlon
clea r: bot h:
margi n-bottom: 20px;
paddlng: lOpx 20px ;

Di e Navigationsleiste soll zusammengefa sst und kompakter dargest ellt werden - etwa in Form von zwei Spalten, die gleich brei t
sind. Jede der bei den Navigationsleisten soll Attribut e der Klasse
. co l umn erhal ten.

!Js idebar . column
f l o a t: le ft:
wldth: 50%;

XHTM l :

<dfv cl dss- Osect fon O)
<dlv cl a ss -" co lumn" )
<h3> Br owse <em>by Topf c

</ em )</ h3>
<ul

c l a ss. - " t ag~ >

<l1> <a href-of/ o>Oe s fgn
</ a>< /l 1>
<l uD
</dfv >

<div cl as s- "co lumn" )
<h3> Br owse <em) by

Oa t e</em>

</ h3>

<ul c las s- "da t e" )
<l1> <a href-"" " >May 2007

</ a>< 11 i>
<l uD
</div >

</ d1v>

9.6 umsetzu ng ei nes Web 2.0-Entwurfs

I 605

Abbildung 9.104 ..

_-_
-- _n_._.-. -. .,__'.-_--_
..........
. ....... _--...__
- ...
_
.
.
.
--<_
.
_--__"""
"'__
._
................. .. _
_. . ..,. . -.
.... . . .....____- '_-_
_
n_"_
.
-. -'--'---,
__
...........
_
....
_
...._--- ..----_.-.... _,,-......_-.........-...........- - ~

Die Navigationsleist e in der Sidebar wird in eine kompakte Form
gebracht .

..

.

..........
,- _" .... ..,......" ..........
.......
... _ ....
..............
"'_~.~~-._

O" _ _ _

_ _ . . . . . . . . . . . 0 .. _

.... _

.. ...........
..
...- .......
.........

......
..,,,

-..

\Il _"_~''''''

_-_. ~ ~_

._

..... _

r..., .. _

.... _

...

..-

" . . . . . . . .,..,,""" .... " , ... , 0) •• "' ... . .. , .. . , . , _

."..

-.

_

-_.,, ~_

_ ~- -

••

~~.

~ --_.

- ""

-..."'-_

"'

...

...

_ ~ ....-.

Mi t ein w enig (55-Format ieru ng lässt sich das Sei ten bild relativ
schnell in eine benutzerfreundliche Gestalt bringen.

._-_
.. _-_
-..,--_...._
----""'_..__-.._._-_
. . _ ---'"'_ _-_."'... . _.... __
"""--

Ab bildung 9.105 ..

,Lofem
.

Mit wenigen CSS- Eigenschaften
lä,st sich die Benu tz erfreundlichkeit um ein Vielfaches erhöhen.

~u m

dolor

....

... .......... -. ......

...

~,

{>

,~ .

~Co."Twr

r-I u•.;

_00,

~ . J~'

,(),

r.l ~"II. $'_""

ty

-~

.

~

•

"•

._-_.._-_ - -

TOPIC BRowse 6V DAn

0." "

"6OUT

___ _----,_,-_-_
_.
.,
._-_
..
_,_-"-"---"_
""_._
-,
_ ',-_
•
.__ _ _ ~ ~IV _ _ _ _ . ...

~--_

aoow SE 8~

b

_

~

_

.

'

"

_

.--... __
_."

...
..._
.. .......
.. .. .................._
... .........
. -_.--.... ....... _--'...---_.,
....... .. ...... ...
......
.... ...
,.... _ ~

......._4.... _.........
.......

~

.. '

•

Lofem ipIum dolor

....

--~.~~~~------~~~--~~

9.6.6

Gestaltung des Headers

Mit dem Header haben wir versucht, ein angenehmes vi suelles
Bild sowie ei ne ansprechende und freundliche At mosphare zu

• Abb ildung 9.106
Eine Navigationsleiste im Itsidebar-Block. Die anklickbare Flache
wurde mitt els display:block auf
die gesamt e Breite vergrößert.

erzeugen . Um dies zu gewäh rleisten. wa r de r Einsatz von Grafiken notwendig. Nun müssen diese im l ayout umgesetzt werden . Zuerst wird dazu ein Blau-Weiß -Verlauf hinzugefügt . Er soll
sich über die ganze Seiten breite erst recken.
html {
ba c kground: Gfff url ( ' images/ bg_mai n. g1 f " )
repeat· x 0 0 :

TIPP

Da der flS K1p- Divisor absolut
posit ioniert Ist, wird die SuchbOlr
vo m IIs k 1p-Bereich teilwei se
überd eckt. Zu Darstellungszwecken w ird die Suchbox in diesem
Abschnit t ausgeblendet.

606

9

Ein elegantes HintergrundbIld kann die visuel le Erscheinung der
Seite noch verbessern :
{Jheotder (
ba ckg r Oll nd : t ra n sparen t ur 1 ( " 1mage s/ b9-head er .
jpg " ) no -repeat 50"' 6px:

Web 2 .0-Layouts mit CS5 umsetzen

I

padding -t op: 35px;
Ihkfp I
ba c kground: transparent url ( ' lmages/ badge . jpg ' )
no -repeat 0 0;
left: 0:
pos iti on: ab solute:
hefght: 160px;
t op: 0 :
w1dth: 152px;

~---

_ _ _ w _ _ __

.t..

Abbildung 9.107

Ein Blau-WeIß·Verlauf wird hinzugefUgt .

.t..

Abbildung 9 .10 8

Der Header mit einem zusätzlichen Hintergrundbild. links
wird das Bild badge .jpg velWendet, rechts bB-header.jpg.

Um einen direkten Sprung zu den Inhalten von Besuchern mit
visuellen BrQw sern zu verstec ken , wird Folgendes verwendet
IIheader Uskfp a {/tc hlde fr om vi sual browser s te l
vhlbl11ty : hfdden;

Ein Btock für RSS-Feeds im oberen rechten Seitenbereich wird in

Bezug auf den oberen rechten Rand absolut positioniert und mit

passenden Abständen versehen .

/lr ss (
ba c kground: tran s pa rent url ( ' 1 mdge s/ddrkbg - r ss .
g1fM ) no-repedt 0 IDOl ;
col o r: IJ OObbee;
f ont- s 1ze: BBS;

padd1ng: O.3em lSpx O.Sem lSpx;
pos it1on: dbsolute;
rfght: 30p x;
text-tran s fo rm: upperca s e;
t op: 6px;
w1dth: 270px ;

9.6

Umsetzung eines Web 2.0-Entwurfs

I 607

.. Abbildung 9.1°9
Der R55-Block im oberen Seitenbereich fällt direkt auf, wirkt aber
dennoch nicht aufdringlich und ist
somit optimal platziert.

Eine semant ische und visuell ansprechende Darstell ung ist mit
eine r kleinen Erweiterung des XHMl-Markups und des C55-Codes
leicht machbar. Die Feeds werden als eine liste ausgezeichnet;
C55-Code soll R55- Feed-lcons in die Darstellung einfügen.
<di v fd- " rss ">
<d1>
<dt >RSS Feeds.: </dt>
<dd ><a h ref- " /I " >J ou rna 1</ a ><I dd >
<dd>< a href- "/I " >Comment s</a></d d>
</d])
</ div >
Die Gestaltung mit C55:
fjrss

*

I

fl oa t: left:
IJrs.s dt (
padding- r lght: l em :
fjrs.s a {
ba c kground: tran sparent url { " images / i con _ rs s .
gf f " ) no-repeat 0 50%;
colo r: fl fff:
margln-rlght: 15px:
pad dl ng- l eft : 20px :
flrss a:hover l
t ext-decorat10n: underline:

.. Abbildung 9.110
R5S-Feed-l cons im RSS-Bereich
der Seite

Schließlich wird das logo pixelgena u positioniert, sodass es in
die gesamte Ko mpo5it ion perfekt passt und keine Unregelmäßigkeiten in der Darstellung auftre ten. Ein linker äußerer Abstand
von 160px genügt. Der vertikale Abstand wurde durch paddf ng top: 35px: im Hea der schon festgelegt. Dabei wird eine Bitd-

608

I

9 web 2.0-Ldyou ts mit (5S umsetzen

I

Ersetzungstechnik verwendet. Beachten Sie bitte, dass die Eigen schaft di spl ay auf den Wert block gesetzt wird. Mit der Angabe
der Größe wird das logo in voller Größe angezeigt.
IJh eader hl {
padd i ng-left: 160px:
fJheader hl a {
background: transparent url( "images/logo.gif")
no- repeat 0 0;
color: fJ25313b:
display: block:
line-hefght: 400px ;
ove rfl ow: hidden;
helght: 120px;
width: 225px ;

... Abbildung 9.111
Vollständige Darstellung des
#header-Bereichs

talkin'

wes

9.6.7 Ges ta ltun g d er Navigati o ns leist e und d er Such bo x
Menüpunkte der Navigationsleiste werden als Registerkarten
(Tabs) gestaltet.
.. Abbildung 9.112

~ 20

Die Navigationsleiste erstreckt
sich über die gesamte Seiten breite.

-

Damit die Such box perfekt sitzt, wird sie absolut position iert
IJsea r ch {
height: 53px ;
pos iti on : absolute;

• Abbi ldung 9.113
Die Navigationsleiste mit einem
Hover-Effekt

und entsprechend bewegt:
• Abbi ldu ng 9.11 4

flsea r ch {
height: 53px:
position: absolute:

Die absolut positionierte SuchbolC
wird im linken oberen Rand platziert.
9.6

Umset zung eines Web 2.0-Entwurfs

I

609

right: 0 ;
top : l SSpx;
Abbildung 9 ." 5
Die Such box wird zum rechten
Rand der Navigationsleiste hin
bewegt. Wef!fln der absoluten
Positionierung uberdeckt sie die
Navigationsleiste .

..t..

tt=20

Mit einem passenden inneren Abstand lässt sich die Suchbox an
eine geeignete Stelle set zen.

{jsearch {
height: S3px:
position: absolute:
right: 0:
t op: lSSpx:
paddlng: 13px 50px

o 65px ;

,-

... Abbi ldu ng 9 .,,6
Oie absolu t positionierte Such box
sitzt am richtigen Platz.

Mit etwas CSS-Styling kann die Darstellung der Suchbox noch
deutlich verbessert werden :

W.. b 2.0

HINWEIS

Die Impleme nt ierung von Tabs
ist in Kapitel 5, . Navigat iono. ,
besch rieben.

... Abbildun g 9." 7
Oie Such box

9.6.8

Gestaltung des Footers

Der Entwurf sah vor, dass der Footer die Seite visuell abschließt.
Das Einfügen des HintergrundbHdes für den fJfooter-Container
erzielt den gewünschten Effekt.
pariatu,.

E~cep4w'

, int

occa ..: ~1 cupt<laI~1

c ullD qut oticia dESe!unt

moI ~

non proid ..nt. , uni ...

anlm d es! nbolUm.

(;op'{IIgh1 2007 Vital)' Ffledman. Wollgan g 8a ~ Elme. All n91!s f e5f!fVed.

XIITt.l..

Abbildung 9.118 •
Standard- Footer ohne CSS-Stile

r.ss
"~
,
':...

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _~

IIfooter I
background: 1!2c2c2c url( "lmages/b9-footer.glf ")
no - repeat 100% 0:
color: IJfff:
paddlng : 2em 0:

610

I

9

web 2.0-layouts mit CSS umsetzen

Die Verweise des Footers werden als Elemente einer ungeordneten Uste aufgefasst und im oberen rech ten Randbereich des
Footers platziert . Zu diesem Zweck werden die gesamte liste
sowie alle ihre Kind-Elemente absolut positioniert und im rechten Bereich des Footers nach links gefloatet.

I
~~

..

~,

--

_.~,

-.......... ---

.. Abbildung 9."9
Der Footerwlrd mit einem
HinteIBrundbild veßehen.

I.Ifooter ul I
pos ition: absolute:
r1 ght: 20px:
top: 2ern:
IHooter u1.
fifo ot er u1 ~
float: 1eft:

Ein wenig (55-Styling erzeugt das gewünschte Resultat.

Dfooter 1i I
margfn-rfght: lem:
IJf ooter 11 CI I
co l or: flfff:
background: transparent ur1 (
gH " ) no -repeat 0 O.2em ;
paddfng-1eft: 20px:

~ lmages / i con_c he c k.

• Abbildung9.12o
Die liste Im Footer wird absolut
nach rechts positioniert und nach
links gefloatet .

Uf ooter 11 a:hover (
col or: flffS 19d:

9.6 .9

Dekora ti o n
Eine abgerundete Gestalt erhält die Seite durch das Hinzufügen
eines Hintergrundbildes für das bOOy-Element .

.. Abbildung 9 .12 1
Ein attraktiver Footer mit Angaben zu den Autoren und Spezifikationen der Seite

body I

ba c kground: tran s parent ur' ( "lmages/ bg_wrapper.
Jpg ~ ) repeat-y 0 60px:

9.6

Umsetzung eines Web2 .0-Entwurfs

I

6 11

Dadurch ist die Implementierung abgeschlossen. Das Ergebnis
ist eine einfache, standardkonforme, benutzerfreundliche und
browserunabhängige Seitendarstellung mit (5S und (X)HTML.

Abbildung 9.122 •
Das fertige Layout- basierend
auf (X)HTML und (55

..

. o ~

~ ~ ,_

talIOn'

wes

"-.......

Lo •• ", ip. lI .... dolor
'

_._--

L _ _ ~_" _ _ _ _ •

....__ .__
.. 01_...._
M _. _ _

,......... "'_

.".u...ot_... _

_-_
-__.," . . ..-___ . . ___ ;.
-"""'---~
-~
- _ ....-=-_.......
--

.

' ' -.--_.. _,.._---~
.....
"'-__
_ ......_"........ ."' ..

OO)~

. ,..

"",~,,,.... ..

..

_.-_
.. ......
_
_-- ,-

_~_"'_~

.."''''_
.....
,.....
,........ .
~

.......

~.

_

_~M

___ u

.-.-

-. ...........

....

---,-..,--~

Lo ... m tp. um dolor

_...... "'_.._------_
.......-,.._--_..--......
__
._--..;,..
............
___
___
. _...- ... _..........---

__
..
_
.........
__._.............
........"""-"'

_.
-.- , .,

.-_... . .._ _..,~

~\>O........

....,..,...

~._

'

.... """'<f . . _

~

--,

---

... .... _ _ .,._ ot--., .. -.
........... _ ._""ot ....... ....._
<_0U0r _ _ _ ... _
...

,-....

.-

~ ~

~

,-

"••

L _ _ ~_ .. _ _ _ . . . . -•

~

..,

... ..............

-~

_. . . ...._ . . . . ... . .......
.,... .. __
_M
..
"'_._~

.."'

u

-._-_
....,.- -

_ _ " '..... _ _.. ' _ _ _ _ n

,""' ...

Abbildung 9.123 .
Die Seite wird bel der Skalierung
der Schriftgröße ebenfalls skaliert.

Mi t hilfe des elastischen Layout-Ansatzes passt sich die Sei te bei
un terschiedl iche n Bildsch i rmauftösunge n und 5ch riftgröße neinstellungen automatisch an.

trJ;zo
..- ...........
--_._-_
......
--_._._-_....
_-----.
_..._..._..___.
.. _----•

_
_
--_
..
_-_
...
.--"..
~-_

..............

,.

t;;IZO

-__. ---.-.._---_
._._.._.....
_
_
-_
_
_
---"-"--'"
-"_
_-_... _ _----_.
__--L orwn iplum _

•
......

...

..
.... .......... .. .. ....
.... .. .......

- ~-,-

612

9 Web 2.0-Layouts mit (55 umsetzen

0
- _ _ .. _
AtOUT

..........

_.~

~

_

...... . - f . o

I
talkin'

wes
"""

..

Lorem Ipsum dolor

"

'

l o,.,m "'ru", dolot . ,1_

8

ABOUT

I, corno...,t~'U f ildlp/#/c/n fl "111,

WOIII'I \:>turn dokn si _

Sild t10 l1fusmrxJ IfIII1~( IndrJldl#'lf ur Öl""Q «rIck!/Q 'lIlf1n.
"'qlR Uf trh '11 mjn,'m \I#flJ,!/II <;"" I'IOjUud ".f~rc.ll'~tO)f1
oI'mc" ~b""h nal u/ ,r,qo.p"" '" .pmm",*,ct>/l$;><Jw l DIJs
~IAQ kur" r/IJ/Or In 'Qpfg~lwrll In volupial" 1'</1( PUg CfAJm
d/llcr.~" IlJgI.I I'I"I, p,d."ut' Exr;"PII>UI Jlnt OCCI;\c~'
cUjlId.,., 1101' piC~rrt sur>lln culPJ ljU/ oIti:;" rW . ... "r>lIl'O/,,II'
11/1111 /rJ gil l'C Plu<TI.

NOTE

La .... ~"'" dQIt;t 1111

1.Do«n Ip>um ctx:. . ,1a mot. COII.",tffil, Itdi;b"i'!t oU.

Q./'PIOC. ~G":\QlUI

.... . - ,....,.,. nc~nc

.. I<Ib:>I~ Qt \t::)t)!,

c Oll_I~ .. ocIIp""In.g.

Hddo
Ir>; <":hrl U, I;>b:n
'Ulolo "~I>:I Q Iqu.). SlIIIdo
... ' nlCd. Eitsl 0\11 "lCIi
MI;mo:Il,,",~

~ (to

""""'" ali1u.l.

IJI cr'II'n

<W

-------_.
_
... _-_.------=--===::::::=

_

-...
-_._==-":'
'":'.=:===. -_._--------------_.
------_ .._•

---

--_._._--~-.

--

----

--_._.-

!..'":.._- --------_._._------.....,,;;:;:
...__ . . _......

... Abbi ldung 9.124

9,7

Bei einer Größen.lnderung des
Bro.vserfensters wird das Layout
skallert.

CSS-Spezifität (CSS Specificity)

Bei der Entwicklung eines Layouts mit (55 stößt man häufig auf
ziemlich exotische Probleme, die eigentlich gar nicht auftreten
dürften. Falls 5ie sich jemals gewundert haben, weshalb ein
Browser ein ganz gewöhnliches C55-Attribut auf das selektierte
Designelement nicht anwendet, können Sie sicher sein , dass das
Problem an der trickreichen C5S-5pez ifität. genauer am Spezifitätswert des angegebenen 5elektors liegt.
Neben Floats stellt die 5pezifität nämlich einen der am wenigsten intuitiven und fehleranfälligsten Bausteine in C55 dar. Die
5pezifität wird häufig missverstanden oder außer Acht gelassen,
wodurch meistens große Browser-inkompatible C5S-5tildateien
entstehen. Diese sind nicht nur unübersichtlich, was sich etwa
im Nachhinein in mühseligen Wartungsarbeiten zeigt, sondern
enthalten auch zahlreiche überflüssige Quelleodefragmente, die
mit einem profunden Verständnis der Spezifität-Grundlagen vermieden oder wenigstens minimiert werden könnten.

Das Wort Spezifit.lt bezieht sich
In diesem Zusammenhang auf die
Genauigkeit der Selektorangabe
im Stylesheet. Je pr.lziser und spezifischer ein Selektor ist, des to
höher Ist sein Gewicht bei der
Entscheidung. welche Attribute
auf selektierte Elemente ar"ßewandt werden müssen.

9 .7 CS5.Spezifit.it «(55 5pecificity)

I

6 13

9.7.1

Was is t CSS-Spezifität?

CSS-Spezifit ät beschreibt einen Mechanismus, der jedem im
Stylesheet auftretenden Selektor ein Gewicht (einen Spezifitätswert) zuweist. In Abhängigkeit vom Gewicht der Selektoren entscheidet dann der Browser des Nutzers, welche Attribute und
Eigenschaften für die Darstellung der Elemente im (X)HTMlDokumentbaum gültig sind und demzufolge beim Rendering der
Seite berlicksichtigt werden mlissen. Dies heißt auch, dass die
CSS-Spezifit ät für das Vermeiden von Konflikten im Stylesheet
verantwortlich ist . Wird etwa ein Designelement von mehreren
Selektoren angesprochen, wobei jeder Selektor dem Element

Weitere Details über die Sortierung und Gewichtung von essSelektoren können Sie im Beitrag
.SpeZi fit.1t (SpeCificity). (http://
hessendscher. de/worksh opl5lide30.
html, linkeode 384) von Stefan
Walter nachlesen .

Die Ausnahme stell t die i Irlportant-Deklaration dar. Diese
wurde in älteren Versionen des
Internet Explorers fehlerhaft implementiert und ist deshalb häufig
für Inkonsistenzen verantwortlich.
Alle Regeln, die mit i lmportant
versehen werden (etwa hl I
fon t -slze: 21?1T1 !Import ant: t.
haben stets die höchste Priorität
und werden unabhängig von an deren Angaben in allen Stylesheels angewendet. Dies kann
etwa beim Debugging hilfreich
sein. Im eSS-Ouellcodewird diese
Regel in der Praxis meistens vermieden.

untersch iedliche Attribute zuweist, so entscheidet das Spezifitätsgewicht dieser Selektoren, mit welchen Attributen das Designelement im Browserfenster versehen wird.
Beim ladevorgang einer Seite in einem Browser werden alle
Stytesheets zuerst ausgewertet (Schritt 1). Dabei unterscheidet
man zwischen Brovvser-, Benutzer- und Autoren-Stylesheets,
die jeweils durch den Browser, durch manuelle Einstellungen
des Nutzers und durch Stylesheet-Angaben des Seitenbet reibers
geliefert werden. Nach der Auswertung sucht die RenderingEngine flir jedes Element nach sämtlichen Deklarationen in allen
Stylesheets, die flir dieses Element gelten sollen.
All diese Deklarationen werden für jedes Element anschließend
hintereinander in einem _virtuellen« Stylesheet platziert: Zuerst
werden die Browser-Angaben eingefügt, danach die BenutzerAngaben und schließlich die Autoren-Angaben (Schritt 2). Jede
später auftretende Deklaration überschreibt eine zuvor auftretende Deklaration. Somit wird ein Autoren-Stylesheet üblicherweise ein Benutzer- und ein Browser-Styfesheet liberschreiben.
Danach werden Spezifitätswerte von Selektoren berechnet
(Schritt 3) und die Selektoren gemäß diesen Werten absteigend
sortiert (Schritt 4). Die Deklarationen mit dem höchsten Spezifitätswert werden im letzten Schritt (Schritt 5) angewandt. Haben
zwei Regeln den gleichen Wert, so wird die letzte (nicht die
erste!) der beiden angewandt. Im Fall

hl
hl

color: black;

color: red: )

würde also die zweite Deklaration gewinnen.
Um also sicherzustellen, dass eine Deklaration auf selektierte
Elemente angewandt wird, muss man im Stylesheet einen Selektor angeben, der den höchsten Spezifitätswert besitzt. Dafür
muss man jedoch wissen, nach welchem Schema die Spezifitä t
der Selektoren berechnet wird, und wie man diese gegebenen-

614

I

9 Web 2.0-layouts mit ess umsetzen

I

falls erhöht. Zu diesem Zweck werden wir im nächsten Abschnitt

genauer den Schritt 3 bet racht en, in dem die Spezifi tät swerte
berechnet werden.

9 .7.2
Berechnung der Spez ifität
Die Spezifität wird durch eine vie rstellige Ziffernfolge a,b,c,d

reprasent iert. Jede Ziffer steht dabei für einen We rt in der sogenannten Spezifitatshierdrchie, welche die Wichtigkeit der verschiedenen Selektoren festlegt Diese Hierarchie kennt insgesamt
vier Typen von Element-Selektoren :
.. Inline-Stile, die direkt im (X)HTML-Dokument mi ttels style
dekla rie rt werden (etwa <s pan style-"marg1n: lOpx"»)

.. ID-Selektoren, also Identifikatoren für dh'- Elemente (etwa
!Jwrapper)
... Klassen, Attribute und Pseudoklassen ( . k 1 a 5S en, [a t tri but e];
; hover, ; f ocus)

.. Elemente und Pseudoelemente (body, 1mg, h 1, P sowie; before
und :after)
Die Berechnung der Spezifit ät folgt einem einfachen Schema:
.. Zu Beginn besitzt jede r Selektor den Wert a,b,c,d = 0,0,0,0.
.. Falls eine Deklarat ion über Inline-Stile angegeben wird, ist
a = 1, sonst a=O .
.. Jeder auftre t ende ID-Elemen t-Selektor erhöht den Wert von

b um 1.
.. Jede auft retende Klasse, jedes Att ribu t und Jede Pseudoklasse
erhöht den Wert von c um 1.
.. Jede Referenz zu einem Element oder zu einem Pseudoelement erhöht den Wert von d um 1.
Somit ergibt si ch b als die Anzahl der IDs im kompletten Selektor, c als die Anzahl von allen anderen Selekto ren im kompletten
Selektor und d als die Anzahl der Elemente im kompletten Selek-

T

tor. Bet rach ten Sie dazu die Beispiele der Tabet le.

Berechnung der Spezifil ~1

Selektor

Tabe lle 9.3

Beschreibung

Wert

Dieser Selektor passt zu keinem der definierten Typen.

0,0,0,0

Inhne-Stil: a =1

1,0,0,0

lD- Elemenl-Selektor: b '" 1

0,1,0,0

Klasse: c = 1

0,0,1,0

• I I

style.. • •
8wr~pper

. int r o I

91 CSS-Spezifitat (CSS Specificity)

I

6 15

Selektor

Beschreibung

ul 1 I

Element: d = 1

0 ,0 ,0 ,1

Ein Element (11), ein Pseudoelement (flrst - I ln e): d= 1 + 1 =2

0 ,0 ,0 ,2

ID-Element-Selekto r (wrappe r): b = 1
Pseudokla5se (: hove r): c", 1
Referenz zu einem Element (p) : d = 1
Refe renz zu einem Pseudoelement (: fl rs t - li ne): d = d + 1 = 2

0 ,1,1,2

Zwei Elemente, d = 1 + 1 = 2

0 ,0 ,0 .2

Zwei Klassen (, s ta t, . mark):
(=1 + 1=2
Drei Elemente (ul , 0 1, 11):
d=1 + 1 +1 =3

0,0,2,3

ID-Element-Selektor (wrapper): b = 1
Klassen (1 ntro): ( = 1
Referenz zu Elementen (body . p): d = 2

0,1,1,2

ID-Elemen t-Selektor (s 1deba r, co I}: b '" 2
Referenz auf ein Pseudoelement (fl rst · l etter):
Referenz auf ein Element (dl , dd) : 2

0 ,2 ,0 ,3

li:first · l if!e I I

'wrapper
p: hov e r: fi rst · I ine
I I

ul I i I J
u l.~tllt

body

0 1 li.l1ark

6wrapp er . intr o

P I I

# s id e bar dllcol
dd:fir st ' letter I I

.. Tabe lle 9. 3
Berechnung der Spezifit.lt (Forts .)

Um de n 5pezifitätswert a uto matisch zu e rm itte ln, kö nne n Sie
auch de n ( 55 5pedfity (alw fator
(http:/ /w ww. rebell nbfue. (oml
sperlficlty.php, linkcode 385)
ve rwe nde n.

Es ist w ichtig zu verst ehen, dass der W ert a,b,c,d kein arithm etisc her Wert ist , sondern eher als eine Folge von Ziffern ZU verstehen ist . Den höchsten Spezifität swert hat also nicht derj en ige
Selektor, der den höch st en arithmet ischen Wert hat , sondern derjen ige, der von li nks aus gesehen einen höhere n Spez ifitätswert
hat. Genauer heißt das, dass etwa 0,1, 0, 0 immer noch höher ist
als 0,0,12,0, obwohl in der arithmetisc hen Notation 100< 120
ist. Im folgend en (leicht ~ ex ot isc he n ", ) Quel lcode würde sich also
die zweite CSS-Deklarati on durchse tzen .
(X) HTM l :
(s pan c la ss -" a b c d e f 9 h 1 j k 1
fd - ' ma rker ' ) Text (/s pan)

H

(55:

.a . b .c .d .1" .f .9 .h . 1 . j ,k .1 { color : r ed: }
I/ma rk e r ( co l o r: blue : I
Um also zu entscheid en, w elcher der Selektoren den höc hsten
Wert hat , geht man von links nach rechts und vergleicht nacheinan der di e Werte von a, b, c und d. Hat einer der Selekt oren
einen höheren Wert, so ist er spezifischer. Somit ist auch jed er
6 16

I

9

We b 2.0-l ayo uts mit ( 55 umsetze n

5elektor mit Klassenangaben stets spezifischer als ein beliebiger
5elektor mit Elementen oder Pseudoelementen.
. f nt roduct f on I I ist etwa spezifischer als html body df v df v

hZpl1.
Alternativ können Sie einen Spickzettel verwenden, der sich
insbesondere für 5tar-Wars-Fans als hilfreich erweisen wird . Dabei
werden 5pezifitätswerte als 5ith-Kräfte aufgefa~~t. Jeder Charakter (Selektor) verfügt über eine 5ith-Macht (5pezifitätswert), die
darauf beruht, wie mächtig er ist.

k

.. ..

\I

lJ lJ

1

•
1 x t1tment It1teto,

, ~--

-FiM'''.

I • tltment ulteto,

I xIII Rltaor

I
,. Abbildung 9.H 5
CSS Speclficlty Wars, entworfen
von Andy Clarke. Hier wird anBenommen, dass die CSS-Afllaben
In einem Stylesheet, also nicht
Inline, gemacht werden. Eine
Online-Verslon finden Sie auf der
Seite hnp:llwww.stuffandnonsense. co.u kI archiv es/ css_ speci ficity_wars.html .

._-

P'

-

L "hIIll!III!'

1 xcIISS MIteta,

.ooNrbtwt" ......ftn'

p.ooNrbt_ .. _~.

2 x clan MItaon

2 • ,It mtnt "I.no,.
2 • clan ""Itao,.

......\Iotf . -.uwr
1 x tlement stltetors
1 x elus ~I.eta'
1 x id Mltao,

1 x tlom,mt nioeto,
1 • eilU ""Itao,

t...-

1 xIII ""!tao,

F'8811'

.,a..,

" ' - ' _ _ \lot •

2 x elus ""Ittton
1 x Id

~I.eta,

M"U,

I

2 xld MI.(1:0'S

9.7.3
Fazit
Damit eine Deklaration auf ein Designelement angewandt wird,
muss man unter Umständen den entsprechenden Selektor spezifischer angeben. Dies geschieht beispielsweise, indem man im
CSS-Code den dl v-Container, in dem sich das Element befindet,
ebenfalls mit angibt. In diesem Zusammenhang ist es wichtig anzumerken, dass Sie in Ihren Stylesheets nicht allzu spezifisch sein
9 .7 CSS-Spezifit.it (CSS Specificity)

6 17

soUten. In der Praxis macht man sich die vorteilhaften Eigenschaften
von CSS wie etwa Vererbung und Kaskade ausgiebig zunutze und
trifft spezifische Angaben nur, falls sie notvvendig sind. Grundsätzlich gilt : Je weniger Selektoren Sie für die Gestaltung eines Elements benötigen, desto einfacher wird das Stylesheet zu warten
sein, und desto weniger Probleme wird die Spezifität bereiten.

9.8

CSS-Frameworks

Die Entwicklung eines sauberen, robmten und 8rowser-kompaIm Kontext des Webs dient ein
Framewod, zwei Zwecken: Zum
einen erspart es dem Entwickler
die Arbeit, typische Stilangaben
immer wieder manuell zu machen; zum anderen schafft es eine
browserübergreifende Basis für
die layoutentwicklung und beugt
Browser-Bugs vor.

tiblen Layouts ist keine einfache Angelegenheit und ist insbesondere bei größeren Projekten recht zeitaufwendig und arbeitsintensiv. Um sich das Leben ein wenig einfacher zu machen, ist
es praktisch, ein Browser-kompatibles Grundgerüst zu entwerfen
und dieses in verschiedenen Projekten immer wieder als Basislayout einzusetzen. Schließlich muss nicht jedes neue Projekt mi t
einer leeren Stylesheet-Datei beginnen.
Solche Grundgerüste, auch Frameworks oder Default-Stylesheets
genannt, enthalten eine ArtBasisgestaltung für zukünftige Layouts.
Sie sollten keine fehlerhaften Anweisungen enthalten und standardkonform und vollständig sein, also sämtliche Elemente berücksichtigen, die Sie in Ihren Projekten häufig benötigen. Ein gutes
Framework ist zudem möglichst klein und möglichst abst rakt.
Konk ret stellt ein CSS- Framework nichts anderes als eine
Sammlung von CSS- und XHTML-Dateien dar und ähnelt somi t
stark gewöhnlichen CSS+(X)HTMl-Voriagen. Der wesentliche
Unterschied besteht darin, dass eine Vorlage meistens komplett
gestaltet ist, also etwa grafische Elemente hat. Bei einem Framework, das eher als eine Art Skelett ve rstanden werden soll, ist
dies nicht der Fall.
Ein CSS- Framework kann aus vielen Gründen vorteilhaft sein.
Im Allgemeinen löst ein Framework wiederkehrende Aufgaben

Eine altemative Methode stellen
sogenannte 5tyleguides dar. Diese
werde n in Abschnitt 9.9 detailliert
beleuchtet.

und standardisiert Ihre Lösung, indem es eine browserunabhängige und fehlerfreie Vorlage liefert. Dadurch werden Ihnen viele
Bugs erspart bleiben. Zudem wird mit seiner Hilfe quasi erzwun gen, da ss gleiche layoutelemente gleich benannt werden. Dies
kann das Lesen und Verstehen des Quelleodes nach einer Überarbeitu ng des Projekts deutlich erleichtern.
Ein angenehmer Nebeneffekt eines Frameworks zeigt sich
bei der Entwicklung eines Projekts in Teamarbeit: Wird jedem
Entwickler ein gut dokumentiertes Framework mit einem konsistenten Coding-Schema zur Verfügung gestellt, so können viele
Missverständnisse rechtzeitig vermieden und ausgeräum t werden. Sinnvoll umgesetzt, kann ein CSS Framework also deutliche

618

I

9 Web 2.0-layouts mit (5S umsetzen

I

Vorteile bringen. Wie geht man nun yor, um ein eigenes Grundgerust zu erstellen?

9.8 .1

Wie e ntwick le ich ein Framewo rk?

Der häufigste Fehler, der beim Entwurf eines FrameY-Iorks immer
wieder auftritt, beruht auf dem Versuch der Designer, möglichst
Yiele verschiedene Klassen in das Framework-Stylesheet einzubinden. Dies entspricht jedoch nicht der Grundidee, die hinter
FrameY-Iorks steckt . Es geht dabei nicht um die Erstellung einer
umfangreichen Bibliothek yon wiederyerwendbaren Stilen, sondern um eine Sammlung yon Stilangaben, die Siesowieso machen
mu ssen. Insbesondere also nicht um Stilangaben, die Sie in Ihren
Projekten Ylelleicht machen mussen .
überlegen Sie sich, welche div-Container, lOs und Klassen
Sie am häufigsten yerwenden, wie Sie diese benennen und nach
welchem Muster Sie Ihren Quellcode schreiben. Falls Sie mehrere
ähnliche Projekte gestalten, identifizieren Sie Komponenten, die
in allen Projekten auftreten (etwa Aufldappmenüs, NaYigationen,
Registerkarten, Sc haltflächen, CSS- Hacks), und betrachten Sie
diese als Kandidaten fUr die Aufnahme in das FrameY-Iork.
Grundsätzlich lassen sich in einem Framework folgende
Stil angaben unterbringen :
... Global Reset (innere und äußere Abstände, Rahmen bei yerlinkten Bildern, zum Beispiel : a lmg I border: none: I)
... Außere Abstände bei Block-Leyel-Elementen wie zum Beispiel
Absätze, Überschriften, listen sowie die Zeilenhöhe (llnehefght) in em-Einheiten
... Basisgestaltung für Formulare und Tabellen
... Haufig yerwendete CSS-Klassen (etwa. hf de zum Ausblenden
eines Elements, . ads zum Einblenden yon Werbeanzeigen)
... Grid-StruktlJr
Stellen Sie sicher, dass Sie keine überflüssigen Angaben machen
und dass die Basisgestaltung abstrakt bleibt. Im optimalen Fall
sollten Sie bei der Entwicklung eines Projekts nur wenige Zeilen aus Ihrem Framework modifizieren müssen. Als eine gute
Grundlage für Ihr FrameY-I ork können Sie relatiY schlanke Global
Reset-Dateien' zu Rate ziehen und geeignete Stil anweisungen
an Ihre Bedürfnisse anpassen. Beachten Sie, dass ein CSS Global
Reset keine UnterstUtzung bei der layoutersteIlung liefert. Entsprechende Stilangaben muss sich der Entwickler entweder selbst
zusammenstellen oder einem Framework entnehmen.
8 .C55 Frameworb + C55 Re5et: De5ign From 5cratch. (http://www.
JmilJ~ngmag.uJnt. tom'2007/09I21 Icu·jramtworks-css 'le$~t -dtsJgfl- flom·

scratchI, Unkeode 401 )

9.8 CSS·Frameworks

I

619

9.8.2

Auf der Suche nach dem perfekten Fram ework
Die Idee, universelle Frameworks zu entwickeln, w urde in der
Webdesign-Community in den letzten Jahren intensiv disku-

tiert und weiterentwickelt. Das Resulta t sind über zwanzig CSSFrameworks und begleitende Werkzeuge, die Designern zur
freien Auswahl stehen. Wer also selbst kein Framework erstellen
möchte, kann auf solche Frameworks zurückgreifen und in seinen
Die meisten CSS-Frameworks sind
zu lang. zu ausführlich und zu
schlecht dokumentiert. Es is t Ihre
Aufgabe als Designer sicherzustellen, dass Ihr Code schlank, sauber
und übersichtlich wird, unabhängig davon, mit welchen Mitteln
(genauer: mit welchem Frameworle) Sie arbeiten.

Projekten einsetzen.
Die in diesem Zusammenhang häufig gestellte Frage nach
dem besten Framework entpuppt sich schnell als falsche Frage.
Viel zut reffender ist es, auf die Suche nach einem Framework zu
gehen, das den Anforderungen eines ganz speziellen Projekts am
besten entspricht. Dabei geht es nicht um ein opti males Grundgerüst, auf dessen Grundlage Sie Ihr Layout aufbauen können,
sondern um eine Vorlage, die Sie erst zu einem Grundgerüst
machen müssen - indem Sie das Framework verschlanken, optimieren und eventuell erwei tern. In diesem Zusammenhang stellt
sich die Frage, ob es Oberhaupt Sinn macht, für ein neues Projekt fremden Quelleode an seine eigenen Zwecke anzupassen.
Schließlich benötigt man dafür ein profundes Verständnis dafür,

Vor dem Einsatz eines Frameworks sollte man sich zunächst
intensiv mit der Struktur des
Frameworks auseinandersetzen.
Außerdem ist der Lernaufwand rur
ein Framework ei nmalig, hilft jedoch bei Jedem neuen Projekt,
Fehlern und Problemen effektiv
vorzubeugen.

w ie das Framework aufgebaut ist und somit auch Zeit, die ebenso
gut in die Entwicklung des eigenen Layouts von Beginn an investiert werden könnte.
Diese Entscheidung bleibt dem Entwickler überlassen und
hängt von seinen Kenntnissen ab. Besonders hilfreich sind Frameworks für Standardaufgaben; individuelle Anforderungen verlangen hingegen auch indivi duelle Lösungen. Grundsätzlich sind
CSS-Framew orks sowohl bei kleinen als auch bei größeren Projekt en eine Überlegung wert, unt er anderem weil sie häufig mit
hilfreichen Werkzeugen zur schnellen Generierung von Layouts
ausgestattet sind. Setzen Sie in einem Projekt ein C55- Framework ein, so sollten Sie es vollständig verstanden haben und ganz
genau wissen, wie das Layout aufgebaut ist.

9.8.3

CSS-Frameworks im Überblick
Im Folgenden betrachten wir eine kurze Übersicht der verbreitesten CSS-Frameworks, zeigen ihre Schwerpunkte, Vor- und
Nachteile. Beachten Sie, dass sich die unterschiedlichen Ansatze
der Frameworks im Allgemeinen nur schwer miteinander verglei-

chen lassen, da diese meistens für unterschiedliche Typen von
Layouts gedacht sind.

9.8.4

Blueprint
Blueprint (http://www.blueprintcss.org) ist ein umfangreiches
Framework, das si ch

620

I

9 web 2.0·Layouts mit (SS umsetzen

vor allem an Entwickler von pixelbasier·

I

ten Grid-layouts richtet. Mit B/ueprint erhalten Sie neben Glo-

bal Reset-Angaben ein flexibles Raster, ein Druck-Stylesheet,
eine Basisgestaltung für Formulare und Tabellen sowie sorgfaltige typografische St ilangaben, die auf dem vertikalen Rhythmus
basieren.
Der große Nachteil des Frameworks ist eine Vielzahl überflüssiger Klassen, die in CSS-Dateien standardmäßig mitgetiefert
werden, um dem Entwi ckler die Positionierung von Elementen
entsprechend dem Raster zu erleichtern . Möchten Sie etwa die
Breite eines df v-Containers angeben, 50 genügt es, im (X)HTMlMarkup
<dfv cla ss- ft span-XX " )
Content
</ d1v )

•

blueprinrcss

- - - 11 - '

-_.

--_._-_
---_._.__._.-_
.. _-...
-_._._-_.... _._---

IAnnl lpoon ,

_._--_._
---_
...- ..

.... Abbi ldung 9.126
Unter anderem liefert Blueprint
sorgflltige typografische Stilan gaben, die auf dem vertikalen
Rhythmus basieren .

zu schreiben, wobei xx für die Anzahl der Spalten st eht, die dieser Cont ainer umfassen soll. Und falls Sie einige Spalten vor und
nach dem Container leer lassen möchten, 50 fügen Sie zusätzlich
die Klassen. prepend· XX und. CI ppend· XX hinzu. Für jede Spalte
(stan dard mäßig sind es 24) gibt es jewei ls tunf Klassen , wel che
die Positionierung der In halte im Raster festlegen. Dies macht
den Quell eode nicht gerade kompakt - auch wenn die Entwickler
das Gegenteil behaupten (die CSS-Dat eien sind insgesamt 30 kB
groß) .
A simple sampie page

_

_

.........
.............
..
.... _
......
....
--_._'---'"
....
_..._
_...M.___
-.. ..- -'
_
..
_---_
..
_
..
_-. __. . . _.___ _____ _
._-'-'---...__
,............_-_.....
_
.... _, .. -,---,,_._-_
...._-- _
...
-....
_-......
_
.
.
__
.....
..
<
, -..__..,-. _
. ....__-_.._-_
. ._
._-..._--_
.-..........-._---_.
-_
......
_
-._-,_....
-_
..
..- _._.
_
--..__ -..---_
.......
_
-_
..
.
_---_
.........
_-_._
...
_,._--_
..
.
._-_.__
._-_
.
.
..
__
._--_.-----,--_
... _--- --- ----_ ...
_-----__
......
--------_
.. _
--... _--_ ... . . . -- ....
-----------_
_-.
---_.....__
._----...-.-_____

_ 0"' _

~~....

__ "

........ M ~ .. _ _ _

• _ _ 0..... _

_ ••_

, ._ _ _ _. , ..... ___ . _ _ _ _ _

' H. " "_._"'.'_
-..--

~-_

. _ ....... _ _ _ _

"

..... .... <,,-

A_

_

_ •._._ ....0-. __

_

... _ ..._ _.-

...

--~------------~_._

_-

...

-- - -

~ ~ -- ~-

----~_.

::==--:-...:::::.--:::...

• Abbild ung 9.127
Eine Testseite - generiert mit
Blueprlnt

Mit B/ueprint lassen sich nur pixelbasierte Layouts entwickeln;
das Markup orientiert sich dabei am visuellen Gestaltungskonzept. Mittlerweile gibt es eine Reihe von Tools, die verschiedene
Grid-layouts auf der Grund lage von B/ueprint automatisch und
9 .8

CSS-Frameworks

I

621

visuell generieren. Auch für WordPress und Drupal existieren ent5prechende Templat e5. Eine aU5fOhrliche und regelmäßig aktualisierte Sammlung finden Sie in dem Blueprin t-Wiki (http:/ /github.
com/joshuac/ayton/blueprint-css/wikis/home (linkeode 386».

9.8.5

960 Grid System
960 Grid System (http:// 96D.gs) ist deut lich kompakt er als Blueprint, soll laut Aussage der Entwickler Designern die Arbeit mit
ras terbasierten layouts aber noch mehr erleichtern. Das Framework beinhaltet neben Stylesheets auch ein PDF~ Ras ter zum Ausdrucken sowie Vorlagen für Fireworks, OmniGraffie, Adobe Pho-

.... Abbi ldung 9.128
960 Grid System (http://960.gs)

toshop und Visio und eignet sich insbeson dere fü r die Erstellung
von Prototypen und CSS-Wireframes.
Das Fra mework schränkt die in Blueprint weitgre ifende Flexi bilit ät der Rastergestaltung auf ein einziges Raster ein. Dieses hat
eine Breite von 960px und wird in zwei Versionen geliefert: mi t

12 oder 16 Spal ten . An dieser Stellte ver misst man die Gestalt ungsfreiheit , die bei Blueprint mit 24 Spalt en möglich ist. Ähnlich
w ie Blueprint lässt sich die gewünschte Breite von Containern in
(X)H TML mi t hilfe von Klassenangaben grid_XX fest legen. Um
Spalten vor bzw. nach dem Con tainer leer zu lassen, se tzt man
die Klassen pref1x_XX bzw. suff1x_XX ein. Die mit dem Framework erzeugten Layouts sind pixel basiert; die Benennung der
Klassen orient ie rt sich an der visuellen Darstellung des Layouts
und nich t an der Bedeu t ung. Zwar en thäl t das Framework deutlich weniger Klassen als Blueprint, doch rech t viele davon werden
Sie so gut w ie nie einsetzen. Die CSS- Dateien sind insgesamt
8 kB groß.

9.8.6

YAMl

YAML (Yet Another Multicolumn Layout), (http://www.yaml.de)ist

I
.t..

I
Abbildung 9.119

Der YAM l Builder im Einsatz

622

I

ein Layout- Framework, mit dem sich flexible Spalten - und Gridl ayouts bequem entwickeln lassen. Das Framework-Package
besteht aus sechs C55-Baust einen (care, debug, patches, print ,
navigation, screen), einer Vielzahl von Anwendungsbeispielen,
Dreamweaver-Werkzeugen zur Layou tentwicklung sowie einer
ausf ührlichen deutsch- und englischsprachigen Dokumentation.
Zwar überzeugt YAML nicht durch seine Kompaktheit, w as vor
allem auf viele Draft s und umfangreiche Komme ntare zurückzuführen ist, liefert aber im Vergleich zu ande ren Frameworks die
größtmögliche Gestaltungsfreiheit für den Designer. 50 können
Sie mit YAML sowohl fixe als auch flexible layou ts mit variabler
Spaltenbreite entwerfen un d Grid-E temen te flach dem Bau kastenprinzip zusammenstellen.

9 Web2.0-layouts mit (55 umsetzen

I

Insgesamt existieren 66 layoutbausteine, die mit dem YAML
Builder (http://builder.yam/.de) visuell zusammengeklickt und
angepasst werden können. Andere Elemente wie etwa Doctype,
ml n- / max -w1dth-Angaben, Blindtexte und Ähnliches können
ebenfalls visuell hinzugefügt werden .
Der große Vorteil von YAML besteht in der Möglichkeit, flexible Grid-Bausteine mit einem relativ schlanken Ouellcode zu
realisieren. Die Benennung der Klassen ist gewöhnungsbedürftig
(.c501 - column-5O%-lin ks, .c25r - column-25%-rechts), jedoch
durchaus nachvollziehbar. Für mehrere Con tent-ManagementSysteme existieren Integrationen des YAML-Basislayouts - unter
anderem für WordPress, Expre55ionEngine. TYP03. 1oom/a! und
Orupal. Die C55-Dateien Im Originalarchiv sind insgesamt 2B kB
groß.

9.8 .7

YU I Grids (SS

Yahoo! Uf Llbrary Grids (http ://deve/oper.yahoo.wm/ yui/cridsl) ist
ein Framework zur Entwicklung von flexiblen ern-basierenden
Rasterlayou ts . Standard mäßig liefert es Stilanweisungen für Layouts mit Rastern von 750px, 950px, 974px und 100%. Dabei Ist
YUf Crid5 (55 als ein Baustein der umfasse nden Java5cript-Bibliothek YUf Llbrary zu sehen, die unter anderem auch (55 Reset, (55
Fonts und (55 Base enth ält.
Entwicklern werden sechs Vorlagen bereitgestellt. deren Spalten jeweils mit Unterspalten versehen werden können. Ahnlieh
wie in YAML lassen sich Layoutelemente mit dem YUf Crid Buifder (http://developer.ya 000. conVyui/cri ds/buif derI) zusamme nklicken, wobei die Möglichkeiten hier deutlich eingeschränkter sind
als bel YAML. Sämtliche Vorlagen tragen spezielle Namen wie
etwa .yu l-t2 (zwei Spalten, die kleinere befindet sich links) oder
.yuf -ge (Raster 66% - 33 %) und treten so auch im (X)HTMLMarkup auf. Dies macht die Benennung der Klassen zwar von
der visuellen Gestalt des l ayouts unabhängig, verursacht jedoch
äußers t gewöhnungsbed ürftige St ilanweisungen im 5ty lesheet
(Siehe unten) .

. yu 1-gb .yu1-u . . yul-g .yu1-gb .yui-u . . yu1-gb • . yu1g . . yut-gb .yu1-gb . . yul-gb .yu t-gc . _yut-gb . y u1 gd. _yu1-gb .yul-ge . . yu1-gb .yu1-gf. . yu1-ge .yu1-u .
. yuf-ge .yuf-g {float:left:1
.yu1-g . yu1 -g . yu1-u . . yu1-gb .yu1-g .yu1-u .
. yu1-ge .yu1-g .yu1-u . . yuf-gd . yu1-g _yul-u .
. yut-ge .yu1-g .yu1-u. _yut-gf . yu1-g _yut-u
{wfdth:49S: marg1n-left:O:1

9.S CSS-Frameworks

I

6Z3

Die Arbeit mit dem Framework ist für Entwickler teilweise weder
intuitiv noch flexibel genug. So ist es etwa recht umständlich,
in einem vierspal tigen layout einen zwei Spalt en umfassenden
Block zu zentrieren . Hinzu kommt, dass das Framework nur eine
dünne Dokumentation vorweisen kann, wodurch das Erlernen
des Frameworks schwierig wird. Das 5tylesheet des Frameworks
ist insgesamt 5 kB groß.

9.8.8

Eine ausführliche liste vorhandener CSS-Frameworks finden Sie
auf Wfklpedia unter: http /len.
wlk lped la.org/wlkllLiscof_Css_

frameworks

Weitere CSS-Frameworks

Es lohnt sich, auch andere Frameworks genauer unter die lupe zu
nehmen (insbesondere können sie als Grundlage für Ihre eigenen
Frameworks dienen) :
... Hartija (http://code.google.com/plhartijal) kümmert sich um
ein universelles Dru ckstylesheet.
... Formy (http://code.google.comlplformy-css-framework/)istein
Framew ork zur schnellen Gestal tung von Webformularen.
... Tripoli (http://capsizedesigns.com/bfog/2008/04/battle-of- thecss-jrameworksl) hat sich zum Ziel gesetzt, ein 5tylesheet zu
entwerfen, das grundlegende typografische Angaben sowie
eine Basisgestaltung von Formularen, Tabellen, Zitaten und
weiteren Elementen liefert .
... Elements
(http://efements .projectdesigns.orgl)
beschränkt
sich auf Globa l Reset, die Hervorhebung yon externen links,
wenige globale Stilanweisungen und eine lightbox für Fotogalerien .
... bOilerpfate (http://code.google.comlp/css-boilerplate/) ist eine
verkürzte Version yon Bfueprint, die nicht auf die Entwicklung
von layouts, sondern auf eine browserübergreifende, simple
und elegante Standarddarstellung der Seite setzt.
... Typogridphy (http://csswizardry.comltypogridphy/) basiert
auf 960 Grid System und stellt die Typografie des layouts in
den Vordergrund . Unter anderem wird mit dem Framework
ein vertikaler Rhythmus mitgeliefert. Wie auch mit 960 Crid
System können Sie mit Typogridphy Grid-layouts erstellen .
... Emastic (http://code.google.comlplemastic/) liefert ein kompaktes GrundgerOst zur EntWi cklung elastischer layouts .
... Crideasy (http://grideasyblogpimp.de/) ermöglicht den Aufbau pixel-basierter Grid-layouts.

9.9

C55 Dac und C55-5tyleguides

Ist ein layout vollständig realisiert, so stell t sich die Frage, wie
dieses in Zukunft gepflegt und we iterentwickel t w ird. Offensich tli ch zielt diese Überlegung darauf ab, den finanziellen und zeit-

624

I

9

Web 2.0-Layouts mit (SS umsetzen

lichen Aufwand bel Wartungsarbeiten und Weiterentwicklungen
zu minimieren. Ein effizienter, häufig unterschätzer und vernachlässigter Ansatz Ist eine ausfUhrliehe und übersichtliche Dokumentation. Diese kann sich sowohl auf das layout als auch auf
einzelne Elemente des gesamten Designentwurfs beziehen. Mit
zunehmender Komplexität eines layouts, etwa bei rasterbasierten
Ansätzen, wird eine ausfUhrliche Dokumentation unvermeidlich:
vor allem um anderen Entwicklern (oder auch sich selbst) eine
Intuition für den gewähl ten Ansatz zu geben und langatmigen
Quellcocle sogar noch Jahre später verständlich erscheinen zu
lassen .
Überlegen Sie sich, nach welchem M ust er Sie Ihr Markup und
Ihren Stylesheet-Code formatieren wollen und halten Sie dieses
Muster durchgehend ein. So macht es etwa Sinn, jedes verschachtelte HTMl-Tag mit einem Tabulator einzurücken, sod ass
alle Tags, die auf derselben Ebene im Dokument vorkommen,
auch im Markup auf derselben Ebene dargestellt werden. Auch
ist es si nnvoll , alle CSS-Angaben nach ihrem Zweck zu gruppieren und verwand te Angaben somit leich t auffindbar zu machen .
Dokumentieren Sie kurz und bündig, an welchen Richtlin ien Sie
sich orientieren , wie Ihr layout aufgebaut ist. und welche Aufgabe einige eher exotische CS5-Anweisungen erfüllen . Dadurch
werden Ihre zukünftigen Kollegen den Quellcode leichter verstehen und anpassen können, ohne die Qualität des Codes zu
mindern und seine lesbarkeit zu erschweren.
Zu diesem Zweck werden In der Praxis insbesondere bei
umfangreichen Projekten spezielle Werkzeuge eingesetzt. mit
denen die Entwicklung eines Auftritts von Anfang an effektiv
dokumentiert und verwaltet werden kann.
Sie kön nen beisp ielsweise Ooxygen (http://www.stack.
nll-dlmitri/doxygell/J oder CSS OoCl (http ..1/www.cssdoc.net
(Linkeode 387» verwenden, um den Ouellcode einheitli ch ur,d
ubersicht lich zu dokument ieren. Dabei wird die Dokumen tation
mithilfe von Kommentaren geschrieben - und zwar von den
Entwicklern selbst, während der Ouellcode geschrieben wird .
Insbesondere wird die Dokumentation also nicht erst nach der
Fertigstellung des Projekts geschrieben, sondern im Laufe des
Designprozesses. Aus solchen Kommentaren kann die Anwendung
anschließend eine Dokumentation in Form einer PDF-, laTeXoder (X)HTMl-Datei generieren.
Zum anderen empfiehlt es sich, ein Versionskontrollsystem wie zum Beispiel Trac (http://trac. edgewaJl.ord) zusammen mit
Subversion (http://subversion.tigris.org) oder Concurrent Ve rsions

I

=--

":..!:...

=
.. Abbildung 9.1)0
Ausführliche C55 Doc-Dokumentation In Dirk Jesses Framework
YAML (www.yaml.de).

Im Web 2.0 scheint das Webdesign ausgereifter zu sein . Eine 00kumen tatlonssoftware sowie ein
verSlornkontroUsys tem gehören
dabei zu den Werkzeugen , die in
der Praxis selbstvel"itändlich eingesetzt werden.

9 Siehe auch _CSSDoc_Snlppels fOr Aplana .. (h ttp://wwwh/gh.t~olution. lr(cI
weblog/Mtry/cssdocJnlppttsJutt_aptana)
9 .9

CSS Doc und C55-5tyleguides

I

625

System (http://www.nongnu.orglcvs/J - einzusetzen. Diese beiden Systeme si nd Open Source. Mi t ihnen können Sie säm t liche
Änderungen im Code in einem zentralen Projekt archiv mithilfe

eines einfachen Revisionssystems ablegen. Dadurch lässt sich
immer beobachten, welche Änderungen von welehem Mitglied
des Entwicklerteams vorgenommen wurden und (falls Kommentare vorhanden sind) welchem Zweck sie dienen sollen. Auch

...-Abbildung 9.' 3'
Trat (http://trac.edgewall.org) ist
ein kostenloses, webbasiertes Pro..t..

jektmanagem ent-Werkzeug zur
Softw areentwicklung. Es ermöglicht die Nutzung \IOn SubversionRepositories und ent hält ein W iki
zu m kollabora t iven Erstellen und
Pflegen von Dokumentationen
sowie einen Bugtracker zum

Erfassen und Verwalten von Programmfehlern und Erweiterungswünschen.

Nervige alltägliche Probleme wie

etwa das lösche n oder Überschreiben einer wich tigen Datei,

der Verlust von Daten, die Notwendigkeit von regelmä~lgen
Sicherheitskopien und das DebugBlnB lassen sich durch eine Versionskontrollsoftware vermeiden
oder verein fachen.

kann man mit einem VerSionskon t rollsystem schnell auf eine
beliebige ältere Version des Quelleodes zurückgreifen, falls etwa
die neueste Version plötzl ich Probleme verursacht , die in den
Vorgängerversionen nicht vorhanden waren.
Was in der Theorie als eine muhselige Zusatzmaßnahme
erscheint, ist in der Praxis ein nicht zu unterschätzendes Muss,
das viel Arbeit spart und vielen Problemen - insbesondere in der
Entwicklungsphase, aber auch nach einem Release - effektiv vorbeugen kann.
In kleineren Webprojekten mi t kleinen Teams ist eine ausfü hrliche Dokumentation meist überflüssig. In diesem Fall ist es
angebracht, sich auf sogenannte CSS-Styleguides zu besch ränken.
So bezeichnet man Quellcode-Er läut erungen, die in CSS-Dateien
eher sparsam eingesetzt werden und nur wenige w ichtige Elemente des Layouts kommentieren. Dabei werden verwandte
C55-Angaben in unabhängige Module zusam mengefasst - etwa
globale St ile, das Layout, die Typografie, die Navigat ion, Forrnulare oder Kommentare. Um diese Module im Stylesheet deutlich
voneinander zu tren nen, nu tzt man auffällige Trennlinien. gefolgt
von einer Überschrift der Gruppe und ihrer Beschreibung.

01.
e1

".
114.
Abbildung 9.1)2 ~
Ein Master-Stylesheet importiert
me hrere Module eines Stylesheeh
mi t der @import ~ Rege1. Auch ist
es sinnvoll , die Datei debuggi ng.
css einzubinden, um gegen möglicherweise auft retende Probleme
vorgehen zu kÖ n nen.!O

~.

06 .
6/.

08 .

69.
10.

11 .
u.
n

I ~ -·------------·---·-----··-------------- - ·---·--·--· ---------.---[.... 't@r S~yh....... tl

Proj ..,.,
...dling .... iui ....
verst.on:
1.1
last chan5c,
115/ 02/0' [H .. e4 F l.,~t bu" vi ]
AS si Wl~d t."
V1t11y t r h_n ( rl ) , Sv~n l ~urt : ( s i)
Pr .......,. " •• ,
""so.in.

---.------------.-- .. ----- .. --------.---.--.---.--.-- .. -----------. ' /

~i.por.

- ru~ t.~ u -J

,itoport

-lAyout.c~s· ;

'i.

port - col",> . c~~·;

14.

'i.ooport - typ::>,r a~r.y .css ";
,l.tIport -n .. ~h.c.s- ;

tS

' " ,ioopcf"t "cI''''!lihi . <: ''" ; . ,

Für die Entwick!ungsphase erstellen Designer ein Master-Stylesheet, in dem sämttiche Module nachein ander mit hilfe der
@import·Regel importiert werden. Dieses erleichtert die Behandlung von Fehlern während der Ent wicklung. Alt ernat iv fügt man
10 Als ein mOgilches Debugglng ~5tylesheet kOnnen Sie etwa Erle Meyers DIagn05 tir Styling (h ttp.//mty~fW~b. (Om/~fk/thought5l200 7/09/07/didgn05 tk.
styling!) verwenden und dieses an Ihre Wünsche anpassen.

626

I

9

Web 2.0·Layout s mi t (55 umsetze n

direkt im CSS~Code eine Ouellcode- Obersicht ein, in der die
Struktur des Stylesheets dokumentiert wird. Diese kann etwa
die Form eines Baumes annehmen oder als ein Inhaltsverzeichnis
dargestellt werden . Diese Übersi cht kann beschreiben, welche
Klassen oder l Os für die jeweiligen layoutelemente stehen.

" ,.

,-,
....
••."' ........ , ..... ,....
,,;_.
"',.
... I " ..........
"

.,"'"'
•

- ..

'- _. --

.,. 1''''. 01 <o",,,,"J

.._... ,-,
.._., -

-

~.,

" 1'_'" I " '_'"
...."".
...... ,_.--,
.." .......
"'

,. , ..... ,.". I """' .....

, .•. 'O tl

1.> . .. . . .

,.
"

l.l.

... _

<.,_,
'1"«0'_
'01_ ' ." ... «,,_

su"w 'hill. tl ..
' . l . t. k" 1 .....

J.J.' ...... .."h , . ..... ,"

U.

j.l.l. to.< •• , .Wo

"

J.J.'. "_, .. ,

,S

"

I ''-40 •
_'pt,,,
I

..

t.

"'_1..

1.1.'. M ..... I _ u , ....

~

,_ •• , ..... t . .

I'

.. Abbildung 9.1]]
Baumdarstellung der Layoutstruktu r im CS5-Code

,"

.'.

... ..:..
J.t.

Il.

c..o_ ... _

.'-

I

"'

~;_'

"

"es

..

.. f, ..1_ i " . ' ' ' . ' _
..... ,.,... I .,'....<01.-

M

Unmittelbar vor dem Release wer~
den sämtliche Module häufig zu
einer CSS·Stildatei zusammengefasst, um die Serverleistung zu
verbessern.

"'

.. Abbitdung 9.134
Die Struktur des Stylesheets dargestellt als ein
Inhaltsverzeichnis

-

I'"'' '" ,,"""1
" '.bI!"
..
....._<t>o,
... ,.
1. _ , .." ..
.'.
'.
"""'
....
,
.. •. . .. ,_"' ......
, .1.,«.1_
... •. "r' ,,1_
,.
r. >1_' .. ,_
tI

..

-'

I

,~

f ........61_

>I .

I. ,,_, . .,

• . • " , , ...

... •. >Nf<. ' .......
..

".

11

, , _ ' . I ......., . .

1>_"" , ._

Ii.

11 ..........
ll. ' ' ' ' ' ' I

La

d •

"

•_

.'•.. '"
.,

.,

' f_"

<.... _

•• ,

.. Abbildu ng 9.1 ]5
Inhaltwerzejchnis und der QueJlcode in einem
Stylesheet

11."" "'''1

., ( ... J
... 'M'
... • ... ' . ( •••

1

Ein weiterer praktischer Ansatz, der das Verständnis des Ouellcodes erleichtern kann, ist die Einbettung eines Farb- und eines
TypografIeglossars in das 5tylesheet. So werden Sie bei der Verwaltung des Ouellcodes in der Entwicklungsphase gesuchte CSSDeklarationen schneller finden und Änderungen leichter vornehmen können .
8 1.

02.

".

' "

!LOl or

codQ~J

~.

Backg""',"'<! , ,Hffff
{ont~M'

' 1.,1.1.,

(w~1t,,)

~.

(Helft b18<~)

~.

1ItO~tlti!r

".
M.

'lI<a~lb

(8"""n)

~~<k'r h~,

, ~., H l]

(r ~ d)

Foot.. ",

. b5' .... (d;ork bbo k )

hl

~.

(~to.nd • ...t)

'M48b6 (doorl< bl .... )

'8 .

•

11 .

~ (vl~1tod):

D.

a (oo:th'l'j' ' c<00t(l

13 .

.. ...... _ .... _ ..•. _ ....... _ .................. _ ....................

'~9'.190e (l1g1tt
(pin~)

b l UQ)

_0'

9.9

.. Abbi ldung 9.136
Ein Farbglossar in einem
Stylesheet

CSS Doc und CSS-Styleguides

627

I

.,.
,.
. 1.

Abbildung 9.137 ..
Ein Typografieglossar In einem
5tylesheet

.

.. .

.....,.._,

t< .
M.

....-..
I.,.,.. t . .. ..... •

' 1.

S" _ r

,.

(T, ,,,,,.",,"Y)

,,"",,'ni'

, ., ~ ".

_ _ . ...1... " .. , o.dol,

~"

• __ .orl f;

'.'_/1._
... ,••t"•. Ar'.' . .... ,... ""01.
'-'• .." ...... , ' .""- . .... ·..rlJ '
LI .. ... . .. tI ,o.
"" ' ''rlf :
V • . -• ........

1.'''' ""vot a • .

Je. ""',,"t /Oi . . . . . .1.

..".·,.c./,

M .
..
...... _ ............. ,"" .. .._ w"" ......... _ , ..... '"1 '_0'
.,

Zudem können Sie beim Coden des Styresheets neue Zeilen durch
eine Einrückung markieren und mit einem Tag (etwa@new)versehen, falls Sie etwa bei einer Änderung unsicher sind. Somit können Sie beim De bugging schnell zu eventuell problematischen
St ellen springen und Änderungen wieder rückgängig machen.
e1 .

e2.
e3.
Abbildung 9.138 ..
Unsichere Angaben werden eingerückt und mit dem Tag@neu
versehen .

84 .

es.
86 .

e7.

ws idebi r ul li i {
displiY : block;
background -color : .ccc ;
border- bottOll : l plC solid W999 ; I' ,"ew -,
nirgin : 3px e 3px e;
paddins : 3px ;
fnew "

}

'0

Wei tere Details zu CSS-Styleguides finden Sie in dem Beit rag
. Improving Code Readability Wit h CSS Stylegu ides<l (http://
www.smashingmagazine.comI 2008!05/ 02/ im prov ing- code- read ability-with·css-styleguides/ (Linkcod e 388».

9.10 CSS-Wireframes
Im Hinblick auf das Projektmanagement ist neben der Frage nach
einer effizient en Wart ung und Weit erentwicklung ebenfalls die
Frage nach de r Vorgehensweise in de r Erarbeitung erste r Entwürfe wichtig. Eine ausf ührliche Diskussion würde den Rahmen
dieses Buches sprengen; den noch ist es wichtig, die Bedeutung
von Wireframes in diesem Zusammenhang zu erwähnen.
Der Begriff Wireframe wird alternativ fur den Ausdruck Mockup benutzt, um einen sehr fruhen konzeptuelle n Prototypen einer
Internetpräsenzzu bezeichnen . Wireframing bietet Designern eine
einfache Möglichkeit , grobe Entwürfe nach den ersten gemeinsamen Überlegungen mit den Kunden zu realisieren, um die
St ruktur der zukünft igen Seit e sowie die Organisation der Inhalte
zu veranschaulichen. Wireframes enthal ten meistens Platzhalter
für grundlegende Seitenelemente wie etwa für den Kopfbereich,
die Navigat ion, den Inhal tsbereich oder den Foot er.
Der wesent liche Vorteil von Wireframes liegt nich t nur darin,
dass Sie sich vor dem eigentlichen Design stark auf eine sinnvolle Struktu r fokussieren mussen, sondern vielmehr darin, dass
628

I

9

Web 2.0-Layouts mit (5S umset zen

5ie eine grundlegende layoutentscheidung sehr fruh und seh r
detailliert mit dem Kunden diskutieren. Zu diesem Zweck ist es
vernünftig, auch Interaktionen konzept uell darzustellen, damit
der Kunde möglichst früh weiß, wie er mit der Webseite umgehen kann. In der Praxis zeigt sich: Konnten 5ie Ihren Kunden von
den Vorteilen Ihres strukturellen Ansatzes frühzeitig überzeugen,
so werden 5ie in späteren Phasen der Entwicklung seltener um
die eine oder andere Änderung gebeten.
Zudem stellen Wireframes eine gu te Richtlinie bereit, an die
5ie sich beim Einsatz von visuellen Elementen halten können. Ein
Wireframe kann unterschiedlich aussehen und mit unterschiedlichen Werkzeugen (OmniGrajfle, ViSiO. Fireworks. Oreamweaver,
Illustrator) realisiert werden - besondere Vorgaben gibt es ni cht.
Manche Designer begnügen sich mit der Auswahl von df v-Containern und allgemei nen typografischen Angaben . Andere versuchen die Interaktivität durch eine begteitende Beschreibung der
Interaktionen zu vermitteln. Wieder andere fangen mit dem Aufbau der Haupt- und 5ubnavigationsmenüs an.
Einen genaueren Einblick in Wireframing (mit Beispielen und
Werkzeugen) können 5ie sich in den folgenden Beiträgen verschaffen:
.. . Oeliverables That Work : Design Oescription Documentsc

I
---_.--:=...-:::?
~-

-

~--

.. Abbildung 9.139
Ein erst er Entwurf. der neben
Elementen auen begleitende
Besenreibungen enth:iJt. Der erste
Entwurf muss nicnt perfekt sein.
QueUe: http://www. boagNorid.

comlu sabilltylqUlck_a nd_dirty _
wlreframesl (lInkeode 389)

http://www.th inkvitam in.com/jeaturesldesign/deliverablesthat-work-des ign-description-documents (linkeode 390)

.. . 'mproving Your Process: How Wireframes Can Helpc http://
mondaybynoon. com/2007/1 2/0 3/im proving-your -processhow-wirejrames-can-help/ (linkcode 391)

... . Quick and dirty Wireframesc http://www.boagworld.com/
usabllitylquick_and_dirty_wirejramesl (linkeode 392)
... . Ajax Wireframlng Approachesc
http://particletree.com/jeatureslajax-wirejraming-approachesi
(linkeode 393)

9.11

Exkurs: Parallax Scrolling

Aus bescheidenen Möglichkeiten von (55 lassen sich zahlreiche
vielfältige Ansätze entwickeln. Ein Beispiel dafür ist der sogenannte CSS-Paralfax-Scrolling-Ejjekt, eine simple (55-Technik, die
in der Design-Szene vor kurzem für viel Aufsehen gesorgt hat.
Interessanterweise reicht der Ursprung dieser Technik zurück
bis in die Zeit, als 2D-Videospiele wie Moon Pat rol (1982) oder
Sonlc the Hedgehog (1991) aktuell waren . In diesen 5pielen nutzte
man Parallax 5((0Iling, um eine optische Illusion von Tiefe und
somit die Illusion einer dritten Dimension zu erzeugen. Dabei
9.11

Genauso wie (SS Sprites hat
ParalJax ScrolJlng seinen Ursprung
in Arkadespielen. in (S5-layouts
wird die Tecnnik bis heute so gut
wie nie eingesetzt.

ElCkurs : ParalJax ScroJling

I

6 29

legten Designer meh rere Hintergrundbilder übereinander und
ließen diese sich langsa mer bewegen, als dies in der Vordergrundszene der Fall war. Bewegte sich also ein Hauptcharakter in
eine Richtung, so bewegten sich die Hintergrundbilder ebenfal ls
in diese Richt ung, aber mit deutlich geringerer Geschwindigkei t.
Dieser Effekt ist mit Screenshots nicht nachzuvollziehen und kann
auf http://en. wikipedia. orglwiki/Parallax_scrol/ing (Linkeode 394)
betrach tet we rden.
Abbild ung 9 .140 ..
A.viary.com, eine Suite von
RIA-Anwendungen , nutzt den
Pa rallax-Scrolling- Effekt in Flash.
Auf einem zweidimensionalen
Bild lasst er sich natü rl ich nicht
erkennen.

-._--Parallax Scrolling benötigt halbt ransparente PNG-Grafiken. Dies
bedeut et unter anderem, dass der
Effekt für Nutzer des Internet Explorers 6 ohne zusätzliche CSSHacks unsichtbar bleibt , da der
Browser mit transparenten PNGDateien nicht umgehen kann.

e.rty blrd Inv llallona

--,...-

..

--

Da einschlägige Browser Webseiten genauso wie damalige Videokonsolen nur zweidimensional darstellen können, lässt sich dieser
Effekt auf das Web übertragen. Zwar gibt es schon seit einigen
Jahre n auf Flash basierende Lösungen, die ihn insbesondere für
Mini- Flash-Spiele verwenden; doch neben dem Einsatz statischer
dreidimensionaler Grafiken gab es bis jetzt keine (55-Ansätze, mit
denen sich die Illusion der Dreidimensionalität erzeugen ließe .

.~•

-

•

Silverback
Abbildung 9.141 ..
Der Parallax-Scrolling-Effekt im
Einsatz auf www.silverbackapp.
com. Auf dieser Sei te war er
zuerst zu sehen.
630

I

9

Web 2.0-Layouts mit CSS umset ze n

I

Um Parallax Scrolling mit CSS zu realisieren , erzeugt man mehrere
halbtransparente PNG- Grafi ken, setzt diese als Hintergrundbilder
für mehrere dl v-Container ein und platziert die Hintergrund bilder mithilfe der Eigenschaft ba ckground-p os lt 10n in einem
Layout. Die Idee ist also, ähnlich wie in den oben erwähnten
Videospielen, mehrere Layer mit verschiedenen Hintergru ndbildem zu erzeugen und diese bei einer Veränderung der Browserbreite mit unterschiedlichen Geschwindigkeiten und zusätzlich in
unterschiedliche Richtungen zu verschieben. 8etrachten Sie als
Beispiel ein mal die Seite 5ifverbackapp.com, auf der der ParallaxScrolling-Effekt zuerst zu sehen war (vg!. Abbildung 9.1 4 1).

. \', 0

o

~

',

o

.,

I' ,\.:."

•

,
"

... Abbildung 9.142
Der Parallax_Scrolting_Effekt Im
Layout werden vier Schichten
übereinander gelegt.

Dabei erzeugte man zuerst drei oder vier Grafiken, wobei eine im
Vord ergrund stehen sollte, die übrigen dagegen als Hintergrundbilder dienten (5. Abbildung 9.142). Um den Effekt besser zur
Geltun g kommen zu lassen, wurden Grafiken , die naher zur Nutzerebene stehen sollten, größer, breiter und unschärfer gestaltet.
Lediglich die vorderste Ebene blieb scharf, um sie optisch auf der
gleichen Pos iti on w ie die hinteren Ebenen erscheinen zu lasse n.
Anschließend erzeugte man einen d iv-Container IIconten t
und platzierte ihn in die Mitte des layouts.
dl vi/conte nt (
margln: 0 auto;
wldth: 640px ;

Oie genaue Vorgehensweise kö nnen Sie In dem Beitrag . Ho w to
recreate Silverback's paraJlax
effect. (h ttp://www.thln/c:vltaml n.
coml/ea t ures/deslgnlhow - t 0recreate-s l/~rbacks- parallax ,
lInkeode 395) nachlesen .

Verandert nun der Anwender die Breite des Browserfensters, so
muss das Hintergrundbild des Conta iners die doppelte Strecke
zurücklegen wie der Mauszeiger des Nutzers. Entspreche nd den
oberen Überlegungen soll dies die schnellste Geschwindigkeit
sein, mit der sich Elemente des layou ts bewegen . Das body-Ele9.11

EJdc:urs: Parallax Scrolling

I

631

ment wurde mit einem Hintergrundbild versehen, das auf der
hin tersten Ebene erscheinen 5011. Damit das Hin tergrundbild sich
deu t lich langsamer bewegt , hatten die Designer den Start punkt
des Hintergrundbil des um 20 Prozent de r Fenst erbreite horizontal nach links - mi t hilfe des Attribut s background-positionverschoben .
body{
background: IId3 ff 99 url ( .. / fmage s/bg -rear .jpg ) 20% 0
repeat-x:

I
Wenn ein Seiten besucher die Fensterbrei te verkleinert, wird diese
um 20 Prozent kleiner, da sie sich ja gerade auf die verfügbare
Fensterbreit e bezieht. Somit bewegt sich das Hintergrundbild
dann mit einem Fünftel der Geschwindigkeit des Mauszeigers.
Für die zweite Schicht muss man dement sprechend einen We rt
zwischen 20 und 50 Prozent wählen .
di vllmidgro und {
background: tr ansparen t u r l ( . . / 1mages / bg-m1d.png l 401
o repeat-x:

I
Schli eßlich wird die dri tte Schich t mit einern We rt von 150% versehen. um sie mit der 1.5-fachen Geschwindigkeit des Mauszeigers zu versehen. Dies hat zur Folge, dass eine optische Illusion
erscheint , die Seitenbesucher näher zur Hauptszene (also zur vordersten Ebe ne). aber hinter ei ner der hinteren Ebenen erscheinen
lässt. Somit ist der gewünschte Effekt erreic ht. Die Seite wi rkt
sowohl originell als auch ungewöhnlich. Der Effekt wird manch
einen Seitenbesucher durchaus positiv beeindrucken .

--_._.. ... -----_._-----,-_~.

_._~

--~--

_._---

. . . M'''•• _ ......

.......

Abbil d ung 9.143 ~
Therissingt onpodcdst .co.uk nutz t
den CSS-Parallax-Scrollilll-Effekt,
um die Wol ken naher beim Leser
erscheinen zu lassen .
632

I

9

Web 2.0-Layouts mit C55 umset ze n

o •_ _ _
....

~

_ _ _ , ___

_ _ _ _ _ ,_ . _

N"

.... " •... r ' _ " ' ' ' _ '

I
... Abbild ung !J."I44
Auf Dromaeo.com bewegen sich
Dinosaurier Im oberen Sei tenbereich mit unterschiedlichen
Geschwindigkeite n.

Zur Inspiration können Sie unter http://www.kremalieiOlls.eom/
2008105/sh 0 wea si ng- t he-css- pa r a11 ax -effee t -1 2- erea tive- usagesi
(Unkeode 396) weitere Beispiele anscha uen, welche die (S5Parallax-5croll ing-Technik verwenden. Zusätzlich ent hält dieser
Beitrag links auf Tutorials, in denen der Effekt Schri tt-für-Schritt
beschrieben wird.

9.12

Ressourcen

.. (55-l ayouts
http://www.smashingmagazine.com/200 7/0 7/12/
free-m-Iayouts-and-templates (ünkcode 397)
.. 35)( 5

Eine Zusammenstellung von nütz lichen Tipps, Ideen, Methoden und Artikeln rund um das Thema Webdesign von 35
renommierten Webentwicklern.
http://www. smashincmagazine. eoml2007/04/20/
3 5-deSicner$ -x- 5-questions (lin kcode 398)
.. 70 Expert Ideas for b etter coding
http://www.smashincmagazine.com/2 00 7/05/7 0/
70-expert-ldeas-for-better-css-eoding (Unkeode 399)
..

The W eb Dellel oper 's Ha ndboo k

http://www.aJvit.de/handbook (linkeode 400)

9.12

Ressourcen

I

633

10

Browserkompatibilität

Eines der größten Probleme, die Webentwicklern in der Imptementierungsphase bereitet werden, ist die inkonsistente Darstellung der Seiten in verschiedenen Browsern. Zahlreiche Feh ler,
Bugs und Interpreta tionsunterschiede sorgen bei verschiedenen
Rendering Encines für unterschiedliche Resultate in der Darstellung der Seltenelemente. Möch te der Seit enbetreiber viele Nutzer erreichen, so ist es erforderlich, die gewünschte Darstellung
nicht nur bei gängigen Bildschirmauftösungen, sondern auch in

Eine universelle BrowserkompatibilitH zu erreichen, ist bei
großen Online-Projekten eine
.luSem schwienge und zeitaufwendige Angelegenheit. Mit
zusa.tzUchen Workarounds wird
der Code unleserlicher und die
Verwaltung der Webseite aufwendiger. Dennoch ist ein hoher
Grad an Browserkompatibihtät
möglich. vorausgesetzt, die
Seltell!estaltung folgt gewissen Schemata und veM'endet
Techniken, die bei Browsern der
nächsten Generation zu keinen
unerwunschten Nebeneffekten
fuhren .

möglichst vieten ßrowsern sicherzustellen. Wenigstens jedoch in
den gängigen Browsern, die vom Großteil der Nutzer verwendet werden : Internet Explorer, Mozilla Firefox, Opera und Safari
gehören hierzu . Dies gilt insbesondere auch für Web 2.0-Auftritte, die mit dynamischen Elementen arbeiten und auf Interaktivität setzen .
Für Sie als Webentwickler bedeutet dies, dass in der Schlussphase eines jeden Projekts kein Weg an zahlreichen Browsertests
vorbeiführt . Auch die Suche nach vernünftigen Workarounds zur
Behandlung von Inkonsistenzen wird sich als notwendig elWeisen . Diese stellen Ihnen näml ich die einzige Möglichkeit zur VerfUgung, die Fehler der Browserentwickler zu umgehen und eine
korrekte Seitendarstellung trotz der vorhandenen Bugs zu erzielen.
In diesem Kapi tel erfahren Sie insbesonde re, wie Sie In der
Implementierungsphase vorgehen, damit ein möglichst ho her
Grad an Browserkompatibilität von Anfang an erreicht werden
kann. Außerdem werden Sie die am häufigst en auftretenden Probleme und die einschlägigen Lösungsansätze kennenlernen .

'10

Browserkompatibilität

I

635

10.1

Bel komplexen Projekten treten
unvermeidlich Fälle auf, bei denen die gewünschte Darstellung
ohne die Behandlung einzelner
Problemfälle schlicht und einfach
unmöglich wird. Wie geht man
in solchen Situationen effizient
vo r? Und wie geht man vor, um
solchen Problemen gezielt vorzubeugen?

Umgang mit Inkonsistenzen

In de r Praxis ist ein t iefgreifend es Verständnis der Theorie notwendig, aber nur selten ausreichend, um eine konsistente Sei tendarstellung in den einschlägigen Browsern zu errei chen.
In der Tat ist die Behebung von Inkonsistenzen eine grund legende Au fgabe bei der Webseit engestalt ung. Dies heißt nicht,
Interpretat ionsunterschiede zu ignorieren, sondern sie zu akzept ieren und eine optimale Darstellung f ür möglichst viele Nutzer
sicherzustellen. Dieser Ansat z wird durch Progressive Enhancement realisiert - eine St ra t egie, die Nutzern äl terer Browser ei ne
lesbare Darst ell ung anbiet et, Nu tzern moderner Browser dagegen ervveiterte Funkti onalitäten bereit stell t .
Vorbeugung
Potenziellen Inkonsist enzen rechtzei tig vorzubeugen, heißt vor

10 .1.1

allem, den zei tlichen Au fwand zur Bereitstellung de r Websei te
zu minimieren. Ein sinnvoller Ansatz zum Design eines zukunftsorientie rten Codes wi rd in der modernen Seitengestaltung d urch
das w eit v erbrei t et e Prinzip _code for t he best , fix for t he rest«
geliefert.

Die Seitenentwicklung mit dem
layout für den Internet Explorer
zu beginnen , macht den Code
zukunftsunSicher, da zukünftige
Browserversionen Seiten ausschließlich auf der Grundlage
von Standards rendern werden.
Tweaks für spezielle Browser
wären In diesem Kontext falsch
und kontraproduktiv. Schließlich
wird der Code nicht von standardkonformen Browsern falsch
interpretiert, sondern vom Internet Ellplorer.

636

I

10

Browserkompat ibilitJ.t

10.1.2 Um setzung mit CSS und X HTMl
Bei der Im plement ierung wird ein Prototyp des Sei tenlayouts
(eine bis d rei Seit en, beispielsweise die St art seit e, die Rub rikseit e
und die Kontaktseit e) entsprechend dem Designentw urf mit C5S
und XHTM l zuerst umgesetzt. Zu Beginn wird eine Master-Datei
(CS5) aus der Werkzeugkiste des Entwicklers vervvendet - sie soll
die wesent lichen Selektoren, Att ribu t e und Seiteneleme nte aufl isten und mit leeren Angaben be legen . Auch gehört Global Reset
dazu - ein wesentlicher A spekt , der die Standard darstellung in
ve rschiedenen Browsern _gl ättet« und viel e Unterschiede durch
eine explizi te Angabe der Nu llwerte von vornherein entfernt . Die
Seite selbst wird nach einem der einschlägigen Webstandards m it
semantisch ko rrektem Markup erstellt.
In standardkonformen Browsern testen und validieren I Um
die Übereinstimmung d es implement ierten Layout s mi t dem
Designentwurf zu überprüfen, wird das layout in standardkonformen Browsern (Firefox, Safari, Opera) getestet, analysiert und
gegebenenfalls mod ifiziert.
Anschließen d werden sowohl das XHTMl-Markup als auch die
CSS-Stylesheets mi thi lfe von W3C-On line-Validatoren auf Konsistenz hin überprüft . Sämtliche Fehler und Warnungen, die dabei
auftreten, geben Hinweise auf problematische Stellen im Code.

Code für ältere und ni cht standardkonforme Browser anpas ·
sen I Wird das gewunschte Ergebnis in validen Browsern eaieh,
so muss der Webauftritt nun noch in den ubrigen Browsern gete·
stet werden. Entspricht die Darstellung in der aktuellsten Version
des Internet Explorers bzw. älteren Versionen von Firefox, Opera
oder Safari nicht der gewünschten Darstellung, so müssen die
Browserfehler im Detail angegangen werden.
Vorgehen sweise

I Unterschiedliche

Inkonsistenzen beim Ren·

dering der Seiten lassen sich in verschiedenen Browsern unter·
schiedlich beheben . Die Vorgehensweise ist jedoch in sämtlichen
Fällen gleich und folgt einem relativ intuit iven Schema.
Ursac he erke nnen

I Um

I
Eine Obersicht zu professionellen Master-Stylesheets finden Sie im Beitrag . 70 Expert
Tips For Better (55 (odinse
(http./lwww.smaslingmagazjne.
cOm/2001105110110-expertIdeas-for- bet ter· eH-cod/ng,
lInkcode 405). Im Artikel finden
Sie auch Referenzen zu Global
Reset-Datelen, die von professionellen Entwicklern verwendet
werden . Sie können diese in Ihrer Master-Datei verwenden.

die Ursache zu identifiz ieren, kann es

nützlich sein, Schritt·für·Schritt nach der Cut-and·Check-Methode
vorzugehen: Der Quelltext wird so lange minimiert, geküat und
auf das Wesentliche reduziert, bis das Problem nicht mehr auf·
tri tt. Tritt der Fehler nach einem Schritt nicht mehr auf, so wird
der Fehler si ch in demjenigen CodestUck befunden haben, das
gerade gelöscht wurde . Ein nutzJjches Werkzeug zur Einschränkung des fehlerhaften Ouelkodes ist Firebug (http://getfirebug.
com) . Die kostenlose Firefox-Erweiterung erlaubt es, CSS in
Echtzeit zu bearbeiten sowie Abhängigkeiten Mischen den Eie·
menten zu untersuchen.

Bei größeren Projekten empfiehlt
es sich, . frischen« Ouellcode
permanent zu validieren. damit
unerwOnschte Nebeneffekte
nicht zu spat auftreten.

Alternative l ös ungswege suchen I Sauberer, übersichtlicher
und gut dokumentierter Code spielt bei der Implementierung
eine wichtige Rolle. Saubere Methoden zur Behandlung von
Problemfällen werden als Workarounds bezeichnet. Sie geben
einen lösungsweg an, auftretende Rendering·Fehler mithilfe
einer alternativen Methode zu umgehen, ohne dass betroffene
Browser dad urch direkt angesprochen werden (CSS·orie ntierter
Ansatz). Dies geschieht in der Regel durch den Austausch einer
verwendeten Technik gegen eine andere. Sollten etwa verschieder,e Browser (Internet Explorer und Firefox) typografische Vor·
gaben (zum Beispiel die Schriftgröße) unterschiedlich interpretieren (etwa wenn die ern-Einheit verwendet wird), so kann das
Problem durch die Verwendung von Prozentangaben für das
body-Element und den Einsatz der em-Einheit für die übrigen Elemente gelöst werden .
(SS- Hacks ( Filter) al s letzte Option einsetzen

I Techniken,

bei denen Browser absichtlich ausgetrickst werden (Browser-orientierter Ansatz), bezeichnet man als (55-Hacks oder (55-Fitter.
Grundsätzlich bedienen si ch solche Methoden der Fehler der
10 .1

Im Internet Explorer (vor allem
In ~teren Versionen) sind
Browserbugs oft nur schw"er zu
erkennen, insbesondere wenn
die Posltionierung von Elementen oder Floats im Spiel ist
In solchen nllen helSt es, sich
auf die bekannten Heuristiken zu
veriassen und mehrere Optionen
in Betracht zu ziehen.

Umgang mit Inkonsistenzen

I

637

Der Einsatz von CSS-Hach erschwert die VelWaltung einer
Seite. Hacks öffnen den Weg für
mehrere Szenarien, die die Kosten nach oben treiben .

Browserentwickler, indem sie etwa Parsing- Bugs, Syntaxfehler
oder die mangelhafte (55-Unterstützung ausnutzen.
Ein Paradebeispiel für Techni ken dieser Art ist Tanteks-BoxModel-Ha ck, mit dem die fehlerhafte Implementierung des CS5Box-Modells im Internet Explorer 5.x korrigiert wird . Dabei wird
mithilfe spezieller Zei chenketten, die nur vom Internet Explorer 5.x verstanden werden, erreicht, dass dieser Browser spezielle Angaben erhält, die von anderen Browsern uberlesen werden. Im Grunde genommen wird bei (55 -Hacks ein Fehler durch
die Ausnutzung eines anderen Fehlers behoben . Der Nachteil
dieser Met hode ist offensichtlich: Sie funktioniert nur so lange,
bis ein Fehler durch eine neue Browserversion vermieden wird.
So kann es zum einen vorkommen, dass bei einem erneuerten
Browser das Problem selbst, ni cht aber der Hack behoben wird,
wodurch die Seitendarstellung fehlerhaft wird. Zum anderen
ist es auch möglich, dass ein Hack nach einem Update nicht
mehr . funktioniert«, das Problem aber auch nicht geröst wirddann müssen neue Ha cks gesucht werden . Da ungewiss is t, wie
zukünftige Browser (55-Hacks behandeln, kann es sein, dass Filter bei neuen Browserversionen neue Inkonsistenzen erzeugen
werden.
10 .1.3

Welche Hacks sollt e man verwenden?

Zahlreiche Rendering-Probleme bei verschiedenen Browsern
(insbesondere beim In ternet Explorer) haben im Laufe der letz-

Der Vorteil von sauberen CSSbasierten Workarounds gegenüber schnellen CSS-Hacks liegt
auf der Hand: Während Had(s in
den nächsten BrowselVersionen
nicht unbedingt funkti onieren
müs~n , werden standardkonforme, logisch begründete
Workarounds ihren Dienst immer leisten.

ten Jahre zur Entstehung verschiedener Filter geführt. Do ch weitaus nicht jedes Problem, das mithilfe eines Hacks geröst werden
kann, sollte auch unbedingt auf diese Weise gelöst werden.
Um beim Einsatz von Filtern immer auf der sicheren Seite zu
bleiben, also die Qualität des Quelltextes zu sichern sowie den
Aufwand für die zukünftige Verwaltung der Seite zu minimieren,
ist es sinnvoll, bei der Entscheidung für oder gegen Hacks forgenden Faustregeln zu folgen: 1
.. Verwenden Sie nur standard konforme Hacks (Filter), welche
die Darstellung von anderen 5eitenelementen (abgesehen
vom betroffenen Element) nicht beeinflussen und von Validierungs-Tools akzeptiert werden .
.. Verwenden Sie nur Hacks, die Probleme bei älteren Browserversionen lösen, aktuelle Browserversionen aber nicht betreffen .
.. Trennen Sie Hacks deutlich von den übrigen (55-Deklarat ionen. Es ist nützlich, Hacks, die mit der Darstellung der
Seite in modernen Browsern nich ts zu tun haben, in separate
1 »Pando ra's Box (Mo del) o( (5S Hacks And Other Good Intenti o ns_
(http://tantek.wm/logI 200511'.htmi#d26t1820. Unk code 327)

638

I

10

BrowserkompatibiHtJ.t

~

Dateien auszulagern oder im Quelltext deutlich zu markieren .
Beachten Sie. dass Hacks Redundanzen im Code erzeugen,
die die Übersichtlichkeit erschweren und Nebeneffekte verursachen können. Jeweniger Ha ckszum Einsatz kommen, desto
leichter ist der Code zu handhaben.

.... Abbildun g 10.'
Dutzende von (55·Hacks In der
Übersicht auf http ://centricie.
comlreflm/fil ters (linke ode 406).
N ur wenige davon sollten für
einen zukunftsorientierten
Webauftritt eingesetzt werden.

Will the browser apply the rule(s)?

~~a . _._1.1Y ' · ' " )
",,~~. - '_Hy .

\ " ',

.1...1 •• • h ,

.,

IE Conditional Comments
In der Praxis unterscheiden Webentwickler grundsätzli ch zwischen zwei Methoden zum Einsatz von (SS-Filtern : Den Hacks
(merkwOrd ig aussehende CodestO cke, die für IO besondere_
Browser gedacht sind und in das CSS-Styles heet eingefügt wer·
den) und Conditional Commentsl (die vom IE·Team extra entwi·
ekelten if-else-Konstrukte, mit denen unterschiedl iche Versionen
des Internet Explorers einzeln beha ndelt werden können) .
Die jeweiligen Konstrukte werden nicht in CSS-Dateien, sondern direkt im XHTMl-Code platziert. Dies verletzt zwar die
strikte Trennung zwischen der Seitenstrukt ur und der Seitendarstellung, kann aber unter Umstanden hilfreich sein, um Bugs des
Internet Explorers zukunftssicher entgegenzuwirker1 .

10,1.4

2

http://msdn2.ml 'fOscft. conY~n·uslllbrarylms537512. aspr (Unkcod~

[Conditional Commentsl
Mit Conditional Comments lassen
sich die Versionen des Internet
E~plorers direkt und standardkonform behandeln . Die Unterscheidung nach Browsern geschieht
nicht im C5S-Code, sondern im
XHTMl-Markup. Dadurch wird
die durch 5tandards angestrebte
strikte Trennung zwischen der
Darstellung und der Form verletzt.

329)

10.1 Umgang mit Inkonsistenzen

I

639

I

2005 richtete sich das EntwIcklungsteam des Internet
Explorers an Webentwickler mit
der Bitte, (SS-Hacks für den
Internet Explorer zu vermeiden
sONie Filter für lltere Versionen
des Browsers zu entfernen
«(all to action: The demise cf
(S5 hacks and broken pages,
http://blogs. msdn .comlle/areh /ve/
2oo5/10/12/480242.aspx, Llnk-

Die Fehlerbehandlung mithilfe von (ondit ional Commen ts ist
die einzige Methode. mit der 5ie jegliche Nebeneffekte von
(SS-H acks in zukünftigen un d älteren Browsern garanti e rt ausschließen können . Conditional Comment s basieren nicht auf
existiere nden Bugs, sondern auf einer proprietären Eigenschaft
des Internet Explorers, die a uch in zukünftigen Versionen des
Browsers unterstützt wird. Sie sind standardkonform.
Die Struktu r von if-else-Konstrukten ähnelt der Struktu r
üblicher HTM L-Kommentare. Die Bedingung, die geprüft werden
sott , wird in eckigen Kl am mern innerhalb des Kommentars festgelegt:

code 407). Als eine Option zur

Behandlung der Probleme des
Internet Explorers schlagen die
Entwickler stattdessen (onditional (omments vor.

<!-- ( lf JE] >
<11nk hre f- "ie_only.ess " rel- "s t yl esheet " type- " text !
ess ' >
<! [endif]-- >
Dadurch kann der Internet Ex plorer die Verzweigung auflösen,
die Da te i i e_only . ess laden und somit die Seite entsprechend
der festgelegten Formatierung darstellen.
Auch eine Unterscheidung nach der Version des benutzen
Browsers ist möglich :
<!--( lf I E] >lnternet Explo rer< ! (end; f ] - - >
<! --elf lE 5]>Jn ter ne t Explorer 5<!(end lf] -->
<! --e lf I E 5.0J>Jnternet Explore r 5.0< ! [end1 f] ~ . )
<! -- elf I E 5_51>lnternet Expl o rer 5_5<![endi tJ -->
<!--[lf I E 6J>lnternet Expl o rer 6<![endi f) -->
<1 --e lf I E 71> lnterne t Explo r e r 7<!(end lf] -->

5owohl (55-Hacks als auch (onditional (omments sollten nach
Möglichkeit vermieden werden.
(ondi lional Comments stellen
jedoch Im direkten Vergleich das
kleinere Übel dar, da sie nicht
auf Browserbugs basieren, sondern sich eine zukunftssichere
Eigenschaft des Internet Explorers zunutze machen.

6 40

I

10

Browserkompatibilität

Mit der speziellen Syntax
... gt (größer als, greater t han)
.. 1 t (klei ner als, less t han)
.. g t e (g rößer als oder gleich, greater th an or equal to)
.. 1 te (kleiner als oder gleich, less t han or equal to)
kann man auch mehrere Browserversionen gleichzeitig berücksichtigen :
<! --CH gte IE 5]) Jnte r net Expl o rer >- 5<![endH )-- >
<!--[lf lt IE 6J> l nter net Expl orer <- 6 <1 [endif]-- >
<! --e lf g t IE 6]> lnte rn et Expl orer > 6<1(endif]-->

I

So kann etwa die folgende Fallunterscheidung nützlich sein:

<11nk. href- ' mas t er.css ' rel- ' s tyle s heet '
type- ' text /css ' /)
<! --[if JE)
<1 ink href- ' COrmlon-ie.c ss · re1-' s t yles heet '
t ype- "text /css " /)
<![endH]- - )
<! --eif JE 6)
<11 nk href- "1e6.css" re1 - "s ty1e shee t"
type- 't ext/css ' /)
<![ endH] -- )
<!--[ if 1t JE 6])
<11nk href-"lthe-1e6. css " rel-"sty1esheet"
type-'text /css ' /)
<! [endif]-- )
Die in der ersten Zeile erwähnte Datei ma ste r.CSs gilt für alle
Browser; Bugs des Internet Explorers werden mit speziellen Stylesheets extra behandelt.
Es ist vernünftig, diejenigen 5tildeklarationen in externe CS5Dateien auszulagern, die Probleme verursachen und einzeln
behandel t werden müssen.
Conditional Comme nts können nur vom Internet Explorer
erkannt und interpretiert werden. Andere Browser interpretieren
sie als Kommenta re und ignorieren sie dementsprechend.
10 .1.5

Eine der wesentlichen Ursachen
für die zahlreichen Inkonsistenzen im Internet Explorer liegt
darin, dass die I E-Enlwickler sich
bei den ersten Versionen des
Browsers nicht an die Standards
hielten. Viele Details wurden
intuitiv geklärt und umgesetzt,
wobei der Browser hAufig selbst
ent scheiden durft e, wie ein eodeslück zu interpret ieren ist . Bei
modernen Browsern versuchen
die Entwickler dagegen, die
Standards eins zu eins umzusetzen. Dies ist eine n otwendige
Voraussetzung für eine browserunabhangige Darstellung.

Der Internet Explorer

Wie bereits angemerkt, treten Inkons istenzen in der Regel erst
beim Testen der Seitendarstellung im Internet Explorer auf. Die
offizielle W3C-Spezifikation von CSS 2.1 - in sämtlichen modernen Browsern beinahe vollständig umgesetzt - wurde beim Internet Expl orer bis dato nur teilweise umgesetzt; ganz zu schweigen
von älteren Versionen.
Dies ändert jedoch nichts an der Tatsache, dass der Internet
Explorer laut einschlägigen Studien 3 von Ober 60 Prozent (manche Studien sprechen sogar von 80 Prozent) der Nutzer als Standardbrowser verwendet wird.

Im Vergleich mit der siebten Version des Internet Explorers wei sen seine Vorganger erheblich
mehr Rendering-Probleme au f.

3 http://www.w15rooo/5.romibrow5N5Ibrow5eß_5tdt5.d5p (linkco de 331)

10.1

Umgang mit Inkonsistenzen

I

641

"

Wibp«Jo:I.lNI ff .. ~ I n _ blplot ..

JIIO_
;;:;",""~
;;:;'---~---------------~ ~

-I" IX.G""91t

~ W hnw/ u .... LIa~."'9fWIbIM .. ft~?_

_"""",e

\'qIKII'EOIA

llott ... t~

tho .... en<l'<1apoo<M It..t

.-.yone c., 1)(!Lt,

1II'I'i~

-.,.

2,W. .711 .1111:10. 11 fngllOn

-_.
~

--_....

_
._.--_._._.n

TIle Tlnll Oynnty WlI.. an 1~lal ctjlll5ly d
OlM tlil Iastedftom61610 901 .~S
IoLnIedbylNlLJ I ..... ry, wtIo _ _

oiringthede<iM "OOcolapse olme Su
Empr,,_ Thot 1ang Oyna<ty, _ tt. ~jat

R«tfIt,~anoes

""--1"'*-,,"

Oyr\!ISl)--as wein a goIOerlaQe 01cosmoporuo Cl.bre. 1n

~-.:I . 1'IaIIg<'S

~­

~

lu""Y, IhIrTang OyM~WlIs"'f9RII'a p.nod d
JII~511nd stabiily, cxcept <b1ng tle An SII Reb~oo end
1M lledine 01 cemalll\lt'loril)' in lIe IBnef hill oflhe rt,Msty
UkI! Ihe pllr'v.OJS s... Oyoo5l)', IIle TIInlI Dyoostv ma"'ßUJed a
a.rl $eMCII S)'Stem tlV dl BfIl ng oII'Clals tITougI'lSlanr:lardllE!(l
"""rn naUon!i and "",,,,,,,,,,,Mau,,,,, 10 otrtC"- Two r:J Chin.o's
fIIOII!famttU'!! ,",ooca! pooet5. Du Fund lr Ba, beIonge<IlQ
thiSage. BS wal as1hepoelS Mer!g Ha ..-a rl, Du Mu, and Bai

.. Abbildung 10.2
Der Internet Explorer 7. Trotz
seiner eleganten und benutz erfreundli chen O berfläche ist er
immer noc h weit vo n der Standa rdkonformität entfernt. Schwerwiegende Fehler seiner Vorgdnger
wiederholt der Internet Explorer 7
erfreulicherweise nicht.

6 42

10

Browserkompatibilitat

10.2

So,~

lt5tory
~.

Tod""*>gy

GeograJlhy'

:lunt e

AII....,..uIt

,_nt

M nie><

In the news

CfliIng'llrl, ltle most PopUOIS Clt111'11fle workI
allie time. i5 1~ I(Ied by hiSlolians IIS a hil1l poinl in Clune<e
tM , mln:lIt- """"llo ..- 5o.jIII!i5lng lhIII d Ihe elWl~ Hon

- ~-

''''' .

~1Pt

C<n!ntS . CiltogonoS . Fnllßd

Today '. featu r ed art!cle

I'

P~

.olm

"eaIU~<_

CUrm11 evetllS

~

Log In I cr..u IICcounl

1 Mto<y

Welcome 10 Wikipedia,

EI

A6 4 Mwurlhqwtke b io 135

.. tho! Palasts", 1'f<MI"IU! 01

"'''''''"

Mohamed Nas/'teOO (pir;1~
1M""I"" Mo_ s' 1..1
<:Iemocr8~C

pno-'d.I1II.t .tactIon In a !woll"

run::I, urt<Nling incurbc!n MaIJnDon_

0._
l.hIed NeIoort!!l ~c~ 10It:C5 Cngtlge ..
MIIIY ~tlnll wich rebel forces ted by' l. ~enI
Nkt.nda In K'\\I, Oemoc:'auc Repl.Üc d 1l1li

"'V<>.
Lnted saales Spacral fDllllS ertler Synan
tQITiKwy ffom L<aq 1O cany ()(I ~ ero. .·bor<*"
raid,..,.. Abu Katral
K.dnna Ieadef Tzopo U\Otl als ftJr .arty

Metfonl

in tsfaei folQwino 8 falled 8nerr(ll a1

Browserweichen tür den Internet
Explorer

(55-Filter wurden entwickelt, um den Internet Explorer mit
Funkti onen und Eigensc haften zu erweitern . Neben fehlenden
Attributen und 5elektoren betrifft dies auch die fehlerhafte
Umsetzung grund legender ( 55-Konzepte. De r Internet Explo rer
kann unter anderem mit folgenden Webstandards nicht (oder
nicht korrekt) umgehen :
... Transparenz von PNG-Bildern
... Float-Attribut
.. fixe Positionierung von Elementen (pos 1t1 on; f1 xed;)
.. fixe Positi onierung des Hintergrundbildes (ba ckgr oundatta c hment)
... minimale und maximale Bre ite oder Höhe (mfn-wfd t h, maxw1dth, mfn-hefght, max-hefght )
.. (55-Box-M odell
... innere und äußere Abstände

10.2.1 Sichere (55-Hack s für den Internet E.lC plorer
Um die aufgelisteten Probleme zu lösen, kann der Internet Explorer entweder direkt via (55 oder mithilfe einer Fallunterscheidung
über Conditional Comments zu einer korrekten Seitendarstellung
gezwungen werden. Im ersten Fall sollten Sie sich zum Filtern des
,.passenden« Browsers ausschließlich auf St ar HTML Se/ector Haek
und IE 51Mae Band Pass Filter beschranken.
Star-HTMl-Selector-Hack I Der Star·HTML · Selector· Hack (auch
Tan-Hack genannt) basiert auf der Ta tsache, dass der Internet
Explorer als einziger Browser einen nicht existierenden Wrapper
des html-E lements vorsieht und diesen - und nicht das html-Element selbst - als oberstes Element in der Seite nhierarchie festlegt.
Somit wird die Angabe A htrnl .class nur vom Internet Explorer
bis einschließli ch Version 6 interpretiert, während htrnl .class
von allen Browsern interpretiert wird. Der Selektor A steht dabei

I
Häufig wird falschlich angeno mmen, dass der Internet Explorer
bis einschließlich Version 6 die
Regeillmportan t nicht kennt .
Sie sorgt hinter einer a~ege­
benen Eigenschaft dafür, dass
die Eigenschaft ungeach tet aller
weileren im Stylesheet auftre tenden Deklarationen den
definierten Wert annimmt. Der
! lmpor tant-Hack erzeugt somit
mehr Probleme als Lösungen.

für den universellen Selektor, der jedes Element selektiert , das
ein htrnl-Element enthält, das wiederum ein Element der Klasse
class ent hält.
Dies bedeutet, dass der Int ernet Explorer das Codestück
A

htrnl

* *
A

body
htrnl body p

Mit dem Star-HTMl -SelectorHack können alle Versionen des
Internet Explorers, bis auf die
Version 7, behandelt werden.
Im Intemet E~plorer 7 existiert
der abs trakte Wrapper über dem
html -Element nicht meh r.

wie
htrnl
* body
htrnl body p
interpretiert.
Beachten Sie bitte, dass zwischen

I<

und htrnl ein leerzeichen

stehen muss. Im Internet Explorer 7 ist dieser Fehler behoben
(http://www.info.com.phl% 7Eetanlw3 pa n t heonl style/star h tm 1bughtml (Linkcode 408)).
IE 5/ Mac-B and-Pass-Filter I Bei der Behandlung von äl teren
Browsern kann es erforderlich sein, bestimmte Eigenschaften nur
für den IE 5/Mac festzulegen. Der IE 5/Mac weist nämlich etliche Float-Fehler auf und kommt mit der absoluten Positionierung
von Elementen außerst schwer zurecht.
Mit dem IE 5/Mac- Band- Pass- Filter

I AV II AI
@lrnpo rt " ie5mac.css";

IU I
10.2

Eine Übersicht zu bekannten
IE 5/Mac-Bugs und Lösungsamatzen fi nden Sie in dem
englischen Beitrag _(55 Bugs
In IE5.x Mac. (http://www.
macedition. com/cblle 5 macbug s,
LInkcode 409).

Browserweichen für den Internet Explorer

I

643

w ird errei cht, dass nur der IE 5/Mac die Datei ieSmac.css lädt
und interpret iert. Darin sind spezielle IE 5/Mac-Tweaks zur korrekten Darstellung en t halten.
10.2.2 Tran sp arenz von PNG- Bildern
Ältere 8rowser, insbesondere ältere Versionen des Internet Explorers (bis einschließlich Internet Explorer 6) haben Probleme mit
transparenten PNG-Dateien.
PNG in Windows IE: The Problem
--.oI TllooP,....... I _ .......... I _

TD ... I '"""'JnIo

.~::;2>"

PN G In Wlnclc>W. I E:

n ••

pro b i . ...

d

Ccn_. >totldord~" .......,...... tI>O ..., ",0,""", ..... "

.... ghMfty·

~oI_, -...b

A Abbildung 10.]
Ein transparentes PNG-Bild überdeckt Tex t
nur teilweise.

A Abbildung 10 . 4
Der Internet Explorer kann mit der Alpha-Transpare nz von PNG-Dateien nich t umgehen. Der
Browser weist dem Bild eine fes te Hintergrundfarbe zu.

...

Problem:
PNG-Dateien können Transparenzinformationen enthalten,
entweder in Form eines Alphakanals oder für jede Farbe der
Farbpalette. Der Internet Explorer weist Probleme mit der
Darstellung von PNG-Dateien mit dem Alphakanal auf und
interpretiert Bilder höherer Farbtiefe demzufolge falsch. Der
Internet Explorer bis einschließlich Version 6 stellt nur solche PNG-Bilder korrekt dar, deren Farbtiefe unter 256 Farben
liegt. Im I nternet Ex plorer 7 ist das Problem behoben.
... Lösun g:
Die DirectX-Komponente AlphalmageLoader von Microsoft
erzeugt den Effekt, der durch transparen te PNG-Dateien
hoher Fa rbtiefe erreicht wird. Diese Komponenten kann man
als Filter für beliebige Seiten elemente verwenden - jeweils
einmal fOr jedes transparente PNG- Bild. Von anderen Browsern wird die Anweisu ng ignoriert.
... Beispiel:
.1 mg I
f 11 te r: p rog1 d: DXI mageTra ns f o rm.
Mi c rosoft. Al pha I mageLoader ( src- ' image. png ' ,
s1z ingMeth od- ' scale ' ) :

J
Eine al ternative lösung stellt die
Bibliot hek IE PNG Fix v1.0 RC4

(http://www.twlnhelix.com/
cssllepngfix/) bereit .

644

I

10

Browserk ompatibilität

Mehr zu diesem Thema eriahren Sie auf der Microsoft-SupportSeite:
http://5upport.micro5o[t.comikb/ 294714 (Linkcode 410)

10.2.3

I

Float-Attribut

Der Internet Explorer weist eine Reihe von Float-Bugs auf, die
selbst bei einfachster Positionierung von Elementen auftauchen.

IE -Doubled - Floa t-Marg in - Bu g

http://www.poSitlonlseverythln g.
ne tI explorer/ dou bled-margl n.h tml
(linkcode411)

10.2.4 Der IE-Doubled-Float-Margin-Bug
... Probl em:
Eine Float-Box wird innerhalb eines Containers erzeugt und
na ch links gefl oatet. Damit ein deutlicher Abstand zwischen
dem Container-Rand und der Fl oat-Box entsteht, w ird die
Float-Box mit ei nem linken äußeren Abstand versehen. Im
Internet Explorer wird der linke äußere Abstand dagegen 1n
doppelter Größe angezeigt . Das Problem tritt im Internet
Ex plorer 7 nicht mehr auf.
... Lösung :
Die Deklaration der Float-Box wird mit der Anweisung display: inl ine; erweitert. Float-Boxen werden laut Standards
immer als Block-Level-Elemente interpretiert. Diese Angabe
wird von modernen Browsern ignoriert, löst aber das Problem
in älteren Versionen des Internet Explorers.
... Beispiel :
. fl oa tbox {
float: left:
width: 300px:
margin: 5px 0 5px l OOpx:
d1splay: 1nllne :

Eine ausführliche Referenz zum
Thema IE 6- und IE 7-Hacks
finden Sie auf der Seite http://

www.thestyleworks.de/
tut-artlie7.shtml (Unkcode 412).

I
10.2.5

Der IE/ Win-Guiliotine-Bug

I
.... Abbildung 10.5
Der IElWin-Guillotine-Bug. Links die Darstellung in standardkonformen
Browsern , in der Mitte die ursprüngliche Darstellung im Internet E~plo­
rer. Wird mit der Maus auf einen Verweis darübergefahren, so wird die
gefloatete Bo~ abgeschnitten - daher der Name.

10.2

Bromerweichen für den Internet Explorer

I 645

I E/ W in -Gu iIIoti ne-B ug
http://www.pos/tlonlseverythlng,
netiexpiOferlguilfotlne. html (link-

code 4 13)

.. Probl em:
Eine Float-8ox w ird innerhalb eines Containers erze ugt und
gefl oatet. Die Float-8ox wird nicht mit dem clear-Attribu t
versehen. Nach de r Float-Box folgt im Markup ein Block mi t
Verweisen, der nicht gefloatet wird . Mit der a: hover-Dekla ration lässt man Verweise beim Darüberfahren mit der Maus
ihre Gestal t verändern. Ist die Float-Box höher als der Block
mit den Verweisen, so verschwindet beim Hovern ein Teil der
Float-Box .
.. lösung:
Der IE/Win erzeugt merkv.rürdige Renderi ng-Fehler, falls die
Dimensionen der Float-Box nicht eindeutig festgelegt sind.
Eine minimale Höhenangabe (etwa 1 %) der geftoateten Box
lässt den Internet Explorer die Box korrekt anzeigen. Dieser
lösungsansatz w ird auch als Holly-Hack bezei chnet.
Der Guillotine-B ug lässt sich durch die Fest legung der Boxhöhe beheben. Dabei ist zu beachten. dass alle Browser außer
dem lE!Win die Angabe überlesen, da sie die Fl oat- Box anson sten mit minim al er Höhe anzeigen und den Inhalt inne rhalb
der Float-Box unleserlich machen würden. Zu diesem Zweck
kann man den Star-HTML-Selector-Hack zu Ra te ziehen .
.. Beispiel:
/ * Hide s trom I ES-mac \ * /
k html
.f loatbox { heigh t: 1% ;
/ * End hide fr om l ES-mac If /

.. Erläuterung
Das zusätzliche Escape-Zeichen (\) in d er ersten Zeile versteckt
die zweite Zeile vor dem IE 5.x/Mac, Das Zeichen zwingt den
JE 51Mac, das abschließende Tag des Ko mmentars zu ignorieren und alle Inhalte bis zum nächsten abschließenden Tag
als Kommen tare zu interpretiere n (Commented-BackslashIE 5-CSS-Hack) . Die zweite Zeile kann nu r vom IElWin interpret ie rt werden. Rendering-FehJer werden durch eine QuasiFestlegung der Dimensionen der Float-Box behoben.
Zahlreiche Probleme treten sowohl beim t l oa t-Attribu t als auch
beim c l ea r- Attribut auf,

10.2.6
..
Fi "e Pos itionierun g von
Elementen
http://tagsoup.comkookbookl

nvfixed (l inkcode 414)

646

I

10

8 rowserkompatibilität

Fe ste Po sitionierung von Elementen

Problem:
Der Internet Explorer bi s einschließlich Version 6 ist mi t der
fixen Positionie rung von Elementen (gegebe n durch pos itlon : f lxed; ) nicht vertraut. Sie wurde erst in der siebten
Version vollständig implement iert.

~

~

I

lösung :
Das Attribut over fl ow: hldden; wird dem body-Element
und das Attribut over fl ow: auto; der fix positionierten Box
zugewiesen. Absolut positionierte Elemente außerhalb der
Box sind dann fix bezüglich der Seitendarstellung im Browser.
Absolut positionierte Elemente innerhalb der Box verhalten
sich dagegen wie sonst. Der Ansatz funkti oniert im Internet
Explorer ab Version 5.
Beispiel :
body

I
overflow: hfdden:
dfv.content
hefght: 100S;
overflow: auto;

10.2.7
Ioar

Der Three-Pixel-Text-log-Bug
pe.~, Jen

bef.no::ICt
o:h t.... rto .., ......

~.,

" ...og'''f'h'''' 1> p ~"1 .
d.~I '" w n lnl<,,"

~'09"~r... p . p ~II Q

.eH .. 0811 ''''''en
_ n

b~JIII1 Ilölnd Q'III1z; n.
Sl4ttdessen ... n: er ,n
der EnHem'"""l Yen 3por
v..., d ... FIoAl -e",.

R;nd 'if",,"I Qrl

'''' tOlr.l''''' "" 0 er ...

~ n~ !ntr""""'9
""" ~""
dr:r ~ ir;>;:lt - BOtI

<i~Nig t

~9"71'''J t.

DMlu IoD. ";, d mil

..... a......w-,dmt
nem '''*r:n 4<.J~
ht ..... ~",u t .. n
1'1(1 ~o r-oefl
e.. l!hlt, M""t ...
uct1 unt", dQor
b.!t Ilow

b

~i ......

"""'J\ I "'~n <iu6öl'lII1
Atr:t.., d

&Ich

lIo<~ t M, M

L"t., doo ,

F1 o ~ t-...,. ~'Hh.i"lt.

8t.I'_,

b dlQ'or litollo ,

nle r C<l' F Io~t- B"",

.. sc t'....' .n 3t:'",
OOQl"l

~.rsontn

.... " '0 h och
'7.. Iit"OI . """"1 51!

nie. dGr' Io.lt· eOtl,
Ig

ll\e!eI' l ex! 'ce ~nd e l
SICh ... nerhll'b !rfl

en ch",lI"I!ien "'"

io ob.., <>ufl".I.,,_

~uf1fQtQn ,

.t.. Abbildung 10.6
Korrekte Dars tellung im

... Abbildung 10 .7
Der 3 px-B ug im Internet

Mozilla FirefO)(

Explorer

~

Problem:
Ein dlv-Block wird gefloa tet. Inhalt e, die der Float-Box folgen, werden vom Internet Explorer 6 automat isch mit einem
horizontalen Abstand von 3 px versehen . Die explizite Belegung von inneren und außeren Abstanden mit Nullwerten
verandert die Darstell ung nicht. Unt er der Float box ist der
horizontale Abstand wieder null.

10.2

Three· Pix el.Tex t.Jog. Bug
http://www.pofltionlsl'vt-rything.
netl&plorH/t~l'l'pxtl'5t. hrml

(lInkeode 415)

Browserwelchen für den Internet Explorer

I

6 47

<div id- ' container ' )
<div id-"floa t box ")Floa t </div)
<p)
Dieser Text hat in J E 6 einen horizontalen Abstand
von 3px vor dem 1 inken Rand der Fl oatbox.
</p)
</dlv )
~

Lösun g:
Inhalten, die eine Floatbox umfließen sol len, wird eine Höhe
zugewiesen (Holly-Hack). Weder der I E 5/Mac noch der Inter-

~

net Explorer 7 sind von diesem Bug betroffen.
Be ispie l:

1* Hide fr om IE5-ma c \ * 1
I<htmlp {
height: 1Z:
margln - left: 0 :
}

11< End hide fr om l E 5 1 Ma c 1<1
10 .2.8

D er JE 6 -Peeka bo o-8ug

Abbil d ung 10 .8 •
Der Peekaboo-Bug: Der Internet
E~plorer 6 lässt Inhalte versctm in-

This is bare tex t.
This is text in s ide a div . lli

den.

This is bare text. Test link
Th l c Ic tovt In clrlo <> rl h,

Toc

test li nk ]
~

I E6-Pee kaboo- Bu g

http://www.pOSitionfsevel).thlng.
nerlexplorerlpeekaboo. html (linkcode 416)

648

I

10

Browserkompatibilität

Proble m:
Ein Container enthält eine Floatbox mit Verweisen sowie
einen Block mit Text, welcher der Float box folgt. Im Internet
Explorer 6 wird der Block mit dem Text nicht angezeigt. Der
Inhalt ist erst dann zu sehen, wenn mit der Maus Ober einen
Verweis in der Fl oatbox gefahren wird.
<div id- ' container ' )
<dlv 1d- ' floatbox ' )
<p>Float. <br I)(a href-"lr >Verwel s</ a></ p>
</ div >
<p) l nhalte auBerhalb der Floatbox . Mit <a
h ref- ' II' >be 11 eb1 gen Verwei se n<1 a ) . </ p)
</div >

I

.. lösung :
Der FJoatbox wird eine feste Höhe zugewiesen (Holly-Hack).

..

Beispiel:
1* Hide fram IE5-mac \ */

* html f/floatb ox {
height: 1%;

I
1* End h1de fr am JE 5 I Mac */

10.2.9 Der Adjacent-Float-Clear-Gap-Bug

.-----. - .-- .-

"

....

_-

--_
_-----------_._-------------..-....
_____
.
._M ___
_
----_
..__
_------------_
...
--------_
..._--""'_ .. _
....--....
_.. _------_._-_._--_
. _--_
........

_ _ " " ' " ' _ .... ft _ _ _ . . . . . _

~.-

.. Abbildung 10.9
Der I nternet Ex plorer bis einschließlich Version 6 zeigt
eine Spalte zwisc hen dem oberen und dem unteren

.. Abbil dung 10 .10
Korrekte Dar;tellung im Moz illa Firefo)(

Absatz an.

.. Problem :
Mehrere Bitder werden gefloatet, von nachfolgenden Tex ten
umflossen und sollen direkt untereinander liegen.

img {

Ad jace nt- Float - Clea r-G a p-Bug

http://www.(ommunftymx. (om!
(on tentJartlde .(fm ?cld=BO JA 6
(Unkeode 417)

float: right:
margin: 00 l em 1. 5em:

Reicht der Textblock nicht aus, um das Bild komplett zu
umfließen, erscheint das nachfolgende Bild nicht unter dem
ersten Bitd, sondern w ird in Float-Richtung des oberen Bildes
ge floatet. Mit cl eil r: both; wird siche rgestellt, dass das Bild
an der richtigen Position ist.
i mg r
floilt: r1ght:

clear: rlght:

10.2

Browserweichen für den Internet Explorer

I

649

margin: 00 lern loSem ;

Der Internet Explorer erze ugt Lücken zwischen dem ersten
umflossenen Text block und dem nachfolgenden Textblock.
Die Höhe de r Lücken entspricht der Höhe der Bilder.
.. lösun g:
Stellen Sie die Text blöcke als Inline-Elemente dar und verwenden Sie das Attribut zo om zur Formatierung. Wird diese
Eigenschaft auf :0 1« gesetzt, so wird die Gestalt des Textes
nicht verändert ; bei :ob: wird der Text zweifach vergrößert
Wegen der Inline-Darstellung fallen alle Absätze zusam rnen,
da sie keine Block-Level-Elemente sind und demnach nicht
au tomati sch mit ZeilenumbrOchen versehen werden . Wird
auf einen Absatz die Eigenschaft zoom angewendet , so wird
das gewünschte Ergebnis erzeugt: Blöcke werden voneinander getrennt.
.. Beispiel :
i rng {
floa t : right:

clear : right:
margln: 00 lern I .Sem:
}

p I
display: inline:

zoom: 1;

10 .2.10

Der Une-Height-and-Replaced-Element-Hack

Abbildu ng 10 .1 1 ~
Der Internet Explorer (rechts)
berechnet die Zeilenhähe falsch.
Vertikaler Abstand (42 pM + 42 pM
im linken Bild wird im IE durch
43pM ersetzt).

"

.~

...
...

~.

'n ' "

"

ao

s. ",.

~

1lru5. 111

.,
" .~". "" ,,< " .."..,
0''''
' .• ".", .... . . . . .... ,

Une· H eight- and -Replac edElement-Hilck
http://www. po5J tionise<lerythi ng.
net/explorerIImehelghtbug. html
(Unkeode 418)
650

10

8rowserkompatibilität

..

.~

.

..... ......

.. <0"" " " "0""
" "".,., •
,.,~

Problem :
Die Zeilenhöhe (llne-helght) eines Textblocks w ird auf
einen Wert gesetzt, der größer als der Standardwert ist. Ein
Textelement innerhalb dieses Blocks wird durch ein belie-

I

biges Element ersetzt (fmg, fnput, t extarea, obJect usw.).
Im Internet Explorer wird die Höhe der Zeile, in dem sich
das ersetzte Element befindet, halbie rt. Im Internet Explorer 7
wurde der Bug gefixt.
.. lösung:
Verändern Sie den äußeren Abstand des ersetzten Elements
so lange, bis die Zeilenhöhe passt. Dabei darf nur der betraf·
fene Browser adressiert werden - etwa mittels des Star·HTML·
Selector-Hacks. Damit der Text korrekt positioniert wird, sollte
das ersetzte Element mit dem zusätzlichen Attribut vertf'
ca1-a11gn: mldd l e; versehen werden.
.. Beispiel:
A html
fmg I
margfn: 45px 0;
vertlcal-allgn: mldd l e;

I
10 .2 .11

Der Horizontal.Centering-Hack

..

Problem:
Ein Container soll horizontal zentriert werden. Zu diesem
Zweck werden der linke sowie der rech te äußere Abstand auf
auto gesetzt. Im IE 5/Win wird der Block nicht zentriert; im
Internet Explorer 6 ist der Fehler behoben .
.. lösung:
Dem Container, der zent riert ausgerichtet werden soll, wird
die Eigenschaft text-a11gn: center; zuge...·Jiesen. Hierdurch
werden aber auch alle InHne-level- Elemente innerhalb des
Containers zentriert, da das text-align-Attribut von KindElementen des Containers vererbt w ird. Deshalb ist es erlor·
derlich, bei allen Elemente, die nicht zentrie rt werden soilen,
die text·a1fgn-Eigensch aft zu ändern, um den Effekt rück·
gär,gig zu machen .
.. Beispiel :
IIcontent (
margfn: 0 auto:
text-alfgn: center:

I
tlcontent p I
text-alfgn: l eft:

Der Expanding-Box .B ug
.. Problem:
Innerhalb eines Containers befindet sich ein Textblock. Im
Textblock tauchen lange Zeichenketten auf, deren Breite grö10.2 .12

'10.2

ElCpanding-BolC -Bug
hcep:llwww.pOSitionlseverytling.
net/~plorer/~pandlngbo)(bug.

hcm/{lInkcode 419)

Browserweichen für den Internet Explorer

I

651

ßer als die Breite des Layouts ist (etwa in Kommentaren oder
dynamisch angezeigt en Inhalt en). Der Intern et Explorer setz t
die Breite des Layouts fälschlich auf die maximale Breite der
auft retenden Zeichenkette. Wird eine rechts gefloatete Box
von einem Text block mi t solchen Zeichenketten umflossen, so
bricht das Layout zusammen.
abcdefg

~~""'IlII'lf!\\'\"'i"
Sic h Innerha·b eines

•

Y

~1I~ 1>r T .. ~t bO!fi nd .. t
si:::h im erhalb eines
hijklmn Parag r.. phen p. p sollte
pqr·!! tu dre kt
den linke n
VWKYZ
blauen Rand grenzen.

abcdefghijk lmnopqrstuvwxyz

abcdefg

"n

PCl'dy"aphell p . p 50lte

irgk t ;In dQt1 link"n
bla uen Ra nd IJrem e n.

o,eser Text befi ndet sich innemalb
F ;n e5 paragraphen p. p sollte ~ irek t
den linke n bl~u en R.lInd grenzen ,

lan
... Abbildung 10 .U
Innerhalb einer Floatbox befindet
sich ein lallles Wort ohne leerzeiche n. Denn och zeigt Firefox
die Floatbox in der festgelegten
Breite an.

... Abb ildun g 10 .13
Der In ternet Explorer bis ein~h ließ­
lieh Version 6 vergrößert d ie Floatbox
so lange, bis das ganze Wort in die
Bo~ passt.

... Abbi ldung 10 .14
Das word-wrap-AUribu t im Ei nsatz
beim Internet Explorer 6

..

lösu ng:
Set zen Sie die Eigenschaft word-wrap: break-word; für den
Tex t block. Sie so rgt dafür, dass Texte immer mit Zeilenumbrüchen versehen werden, faUs sie zu lang sind.

..

Be ispie l:

IIcont ent {
word·wrap: break-ward:

10.2.13 CSS-Hover-Behavior
.. Probl em:
( 55 -Hover-Be hav ior
htr p://www.xs4all.nll~peterned/
mhover,htmf (linkeode 420)

652

10

Browserkompat ibilit J.t

Standardkonforme Browser wenden den : hover-Selektor
(dieser best immt den Zustand eines Elements beim Darüberfahren mit der Maus) auf beliebige Sei tenelemente an, seien
es Block-Level-Elemente wie Listen oder Inline-level-Elemente wie Verweise oder Bilder. Der Internet Explorer dagegen interpretiert die Pseudoklasse :hover ausschließlich fOr

I

VelWeise. Im Internet Explorer 7 wird der: ho ver-Zustand f Or
all e Elemente gerendert .
..

lösung :
Die Unterstützu ng der: hover-Pseudoklasse kann man mithilfe eines Jav aSeripts erzwingen. Der Internet Explorer unterstützt nämlich das proprietäre Behaviors Concept , mit dem d as
Verhalten von gewissen Seiten elementen, die in CSS-Code
auftauchen, gena u festgelegt werden kann. Unter anderem i st
es möglich, das Verhalt en Ober externe .hta- und .hte- Dateien

zu definieren und damit siche rstellen, dass es auf sämtli che
Elemente eines Typs angewan dt wird. Zu diesem Zweck ka nn
die Whatevn:hover-Bibliothek in den Code eingefUgt werden; der Rest wird durch die library erledigt. Andere gängige
Browser kennen das Beh avior-Konzept nicht und ignorieren
die Anweisung.
.. Beispiel :
body (
behavl or : url ( " css hover . htc" ) :
lIl{Jnav 11 :hove r {
background-color: #f af afa:

10.2.14 Fixe Positionierung des Hintergrundbildes
(background-at tachm en t)
Der Internet Ex plorer Win bi s einschli eßlich Version 6 velWendet das Attribut background- attachment ausschließlich für das
body-Element. Die Eigenschaft legt fest , ob ein Hi ntergru ndbild
beim Scrollen der Sei t e fes t bleibt oder mitwandert.

http://www.howtocreate.co.uklfixedBackground.htm I
(linkeode 421 )

Alternativ kann auch die JavaScript-Bibliothek IE 7 (http ://
dean,edwards,name/lE7 , lInkcode 422) zur Erweiterung
des Internet Explorers mit der
: hover-Funktlonalität verwendet werden. Sie zwingt ältere
Brow5er dazu, das Verhalten des
Internet Explorers 7 zu simulieren, JavaScript ersetzt somit viele
speZielle Hacks, die für Vorgänger der Version 7 des Internet
Explorers eingesetzt werden
mussten. Der Internet Explorer 7
lässt sich mittels Conditional
Comments in den XHTML-Code
einfügen. Die IE 7 -Bibliothek
kann auch zur Behebung weiterer IE-Bugs benutzt werden.

10.2.15 Minimale und maximale Breite oder Höhe
Der IENJin kenn t die Eigenschaften m1 n-widt h, max- wid th,
m1n " he1ght und max-he1ght nicht, die eine minimale bzw. eine
maximale Brei te bzw. Höhe des layouts festlegen.
Einen Workaround für den Internet Explorer finden Sie in
Abschnitt 9.5.3.

10.2.16 Weitere Mängel des Internet Explorers
.. Pseudoklassen und Pseudoelemente
Der IENJin bis Version 7 (ausschließlich) unterstützt weder
: f ocus- oder :f 1rst -c hl1d- noch :after- oder :beforeKlassen.

10.1

Nachbar-Selektoren (adjacent
sibling selectors) (I) , Kind-Selektoren (child selectors) (» und
Attribut-Selektoren (p[ cl ass))
unterstützt der Internet Explo rer
erst seit der Version 7.

Browserweichen für den Internet Explorer

I

653

.. (55 -Box-Modell
Der IE 5.xJ\o\lin interpretiert das Box-Modell anders , als dies
die Standards vorsch reiben. Das W3C-Box-Modell definiert
die Breite einer Box als die Breite ihres Inhalts. Im Internet
Explorer dagegen setzt sich die Breite der Box aus den Rän dern, den äußeren Abständen und der Brei te des Inhalts
zusammen. Im Internet Explorer 6 wird das Box-Modell korrekt implementiert, jedoch nur bei der Verwendung des Doctype Strict .
.. Äußere und innere Abstände
Der Int ernet Explorer legt für Block-Level-Elemente äußere
und inne re Abstände fe st, die bei anderen Browsern standardmäßig auf null gesetzt werden. Ohne Global Reset erscheint
das Seitenlayout in verschiedenen Browsern deshalb meistens
inkonsistent.
Häufi ge l ösungsa nsätze
Betrachtet man die aufgezähl ten Bugs des Internet Ex plorers, so
lässt sich ein durchgehendes Muster erkennen. Bei der Behandlung der verschiedenen Inkomistenzen des Internet Explorers
erweisen sich fol gende Attribute und Techniken als hilfreich:
.. display: inline
Die Darstellung eines Block-Elements als Inline-Level-Element. Insbesondere wenn ein Element gefloatet und mit
einem äußeren Abstand versehen wird, oder bei beliebigen
Listen, bei denen der Internet Explorer Lücken zwischen
listenelementen erzeugt.
.. position: relative
Zuweisung der relativen Posit ionierung für betroffene Sei tenelemente

10.2.17

height: 0: height: 1%; oder
width: 0: width: 1%
Zuweisung einer fest en Dimension (meistem Höhe) einer
ge floateten Box. Im Internet Explorer 7 führten diese Angaben
zu Darstellungsproblemen und sollten daher dort versteckt
werden. Alternativ kann man betroffenen Elementen die
Eigenschaft zoom: 1 zuweisen. Dadurch wird dem Element in
allen Versionen des Internet Explorers ein I E-Layout gegeben.
Durch feste Dimensionsangaben (beliebig außer auto) werden Seitenelementen sogenannte " layouts« aufgezwungenentsprechend dem haslayout-Konzept des Internet Explorers.
Damit lassen sich zahlreiche Probleme im Zusammenhang mit

654

I

10

Browserkompatibilität

der Darstellung von Hintergrundbildern und Rändern lösen.
Unter Umständen kann auch posHion: absolute helfen.
.. @ import
Ein wesentlicher Vorteil von modernen (55-basierten
Webauftritten basiert auf dem häufig zitierten Prinzip Gra,eful Degradation (langsamer Qualitätsabfall). Darunter versteht man die Eigenschaft einer Seite, auf Gegebenheiten der
Umgebung (Browser, Bildschirmauflösung usw.) sicher und
angemessen zu reagieren. Die Umgebung kann die Funktionalität des Systems schrittweise reduzieren , etwa durch eine
verminderte Qualität der Darstellung. Sie kann aber dennoch
auch in solchen Fällen benutzt werden.
Auf die Seitengestaltung angewendet bedeutet dies, dass moderne
Webseiten in beliebigen Browsern lesbar angezeigt werden. Eine
Seite darf dabei beliebig komplex sein. Es soll jedoch dafür gesorgt
werden, dass sie auch ohne diese Komp lexität benutzbar bleibt.
Um dies sicherzustellen, verwendet man in der Praxis zum einen

[hasl ayou tJ
Das hasUyout stellt ein Konzept
Im IE/Win dar, nach dem Elemente dargestellt und mit anderen Elementen In Beziehung gesetzt w!!rden. Staodardmäßig
verfügen nur gewiSS!! Elem!!nte
über das IE-layout. Daraus resultieren Unterschiede bei der Darstellung von Seltenelementen.
Eine ausführliche Dokumentation
zu hasLayour finden Sie im Beilrag
.On having layout« (h ttp://www.
satz an SB rz. delcudlonhavlngfayout
hrm , lInkcode 423) bzw. in der
deutschen übersetzung . Über
hasLayout - das Konzept des hasLayout Im IEmln_ (h rtp:llonhavlngfa your.fwpf-webdesign .de,
LInkcode 424).

den sogenannten @import-Workaround. Browser aus der Netstape-Familie, bekannt für ihre Probleme mit (SS 1.0, können
mit dem @fmpor t·Befehl zum Importieren von CSS-Stylesheets
nicht umgehen . Wird ein Seitenlayout etwa über
<s t yle t ype_Mtex t /css M media-Mscreen M)
@fmport · layout.css · ;
</s tyle )
eingefügt, so bleibt die Datei 1ayout. css für Netscape
4.x -BrO\Alser versteckt. Der BrO\Alser zeigt Seiteninhalte in einer
minimalistische n Textform an .
.. m argin statt paddin g verw enden
Um Darsteliungsproblemen wegen der fehlerhaften Irnplementierung des CSS·BolC·Modelis vorzubeugen. ist es hilfreich, statt Innerer Abstände für Eltern-Elemente äußere
Abstände für die Kind-Elemente zu verwenden. Dann werden
Boxen sowohl bei älteren als auch bei modernen Browsern
identisch dargestellt.
.. l ee rzeichen einfügen
leerzeichen an den richtigen Stellen können unter Umstän·
den merkwürdige Rendering-Probleme des Internet Explorers
lösen (lE-Space-Bugs) . So wird p:first-letter { ... I (mit
leerzeichen zwischen .. letter. und .. {c) vom Internet Explorer
richtig interpretiert; p: fi rs t-' etter ( ... I dagegen Ignoriert.

10.2

Browserweichen für den Internet Explorer I 6 55

I

..

Den Ooctype korrekt fes tlegen

Viele Rendering- Probleme entstehen im Internet Explorer, falls
der Dokumenttyp (Doctype) fal sch festgelegt wird. Schal tet
der Browser in den QUirks-Modus, so ist mit Inkonsistenzen
verschiedenster Art rechnen. Beachten Sie, dass der Doctype
in äl teren Versionen des Internet Explorers (bis einschließlich
Version 6) an erster Stelle im Quelltext stehen muss. Davor
dürfen weder eine XML-Deklarati on noch leerzeichen auftreten .
..

Sc hriftgröße vererben

Inkonsistenzen betreffen nicht nur die Darst ellung von Seiten elementen, sondern auch die Schriftgröße des Textes. Im
Internet Expl orer 5.x/Win ist die Schriftgröße standardmäßig
um einen Grad größer als die Standardgröße in den anderen
Browsern. Bei relativen Angaben de r Schriftgröße ist immer zu
beachten, auf welchen Wert sich die Angabe bezieht. Erkennt
der Internet Explorer den Containing Block falsch, so wird auch
die Schriftgröße falsch interpretiert .
Um Inkonsistenzen dieser Art zu vermeiden, ist es empfehlens-

wert, die Schriftgröße (Ur das body-Element zu spezifizieren und
diese von Elementen in der unteren Sei tenhierarchie nacheinander vererben zu lassen. Als Startwert für das body-Element
kann etwa 62,5% (red uz ie rt die Standardschriftgröße von 16px
auf 10px, wodurch der Umgang mit dem Wert vereinfacht wird)
oder 76 % (de r Wert, bei dem Absätze bei übl icher Stand ardschriftgröße gerade den Wert 1 em erhalten) gewählt werden.
Beispiel:

/'
Schri ftgrOße in :r; bzgl. der Standard sc hri ftgrOße
'/
body { font-slze : 76': }
/ * Alle weiteren GrOBenangaben geschehen mithilfe der
em -E inheiten */
p ( f ont-size: l em; )
hl [ font- s1ze: 2em; )
h2 I f ont-size: 1.8em:
... usw.
Inkonsistenzen im Hinblick auf den typografischen Satz werden
häufig durch die CSS-Angaben
body I
f on t- size: lem:

656

I

10

8rowserkompatibilität

I
body * t
font-slze: 1001;

gelöst. Standard mäßig setzen altere Versionen des Internet E>cplorers die Schriftgröße für gewisse Seitenelemente falsch.

10.3 CSS - Unterstützung in modernen
Browsern
Mit dem Internet E>cptorer 8 Beta, Firefox 3.0, Opera 9.5 und
Safari 3.1.2 ist eine neue Generation von Webbrowsern in Sicht.
Diese setzen die Webstandards umfassend um und stellen in
einigen Fällen soga r die Möglichkeiten von zukünftigen Standards - sprich CSS 3 - großzügig bereit. Da einschlägige Ren-

Die neue Generation von Webbrowsern is t In Sicht. Bis diese
Browser sich etabliert haben, wird
noch einige Zeit vergehen. Für die
moderne 5eitenentwicldung liefern sie deutliche Vorteile.

dering-Engines (M icrosoft Trident, Mozilla Gecko, Apple Webkit
und Opera Presto) ihren Vorgängern weit voraus sind, machen
sie für Entwickler die Vision einer plattformübergreifenden und
robusten Seitengestaltung realistischer als je zuvor. Dies macht
Appetit auf die neuen Gestaltungsmöglichkeiten, die durch
diese BrO\Alser geliefert werden. Doch worin genau bestehen die
Unterschiede? Was können die neuen BrOVv"ser, was die Alteren
Versionen ni cht können? Bis zu welcher Generation so llten
legacy-Browser unterstützt werden? Welche neuen CSS-Attribute können bedenkenlos eingesetzt werden, und welche si nd
mit Vorsicht zu genießen?

10.3.1

Neue Selekt oren und Dekla ration en

Einer der Meilensteine der neuen Browser-Generation ist die
weitgehende Umsetzung von wesentlichen Elementen der Spezifikation CSS 2.1. So konnten bis Mitte 2008 alle aufgelisteten
Browser den sogenannten Acid2-Browsertest, der vor allem die
typischen Rendering-Fehler im Hinbli ck auf C55 2.1 abfangt,

Eine ausführliche Erlauterung des
ACld2-Tests finden Sie Im Beitrag
_Acld2 Gulde. (http://www.
webstdndards.orglaa/onldrldl/
gu/de/, linkeode 425)

erfolgreich bestehen.
Hallo WorId!
'4 Abbildung 10.15
So sieht die Erfolgs meldu~
beim Add2-Test aus. Unter
den weitverbreiteten Browsern
besteht lediglich der Intemet
Explorer 7 diesen Test nicht.

•
10.3

(55-Unterstützung in modemen

Bro~ern

I

657

Abbildung

10 .16 ..

Der Internet Explorer 7 besteht
den Acid2-Test nicht.

Einen ausführlichen Bericht der
(55-Unterstützung in modernen
BrC\VIIsern (5tand: September
2008) liefert Peter- Paul Koch in
seinem Beitrag »( 55 contents and
brC\VIIser compatibility _ (http://

www.qulrksmode.orglav'contents.
hrrnl, linkcode 426)

Unter anderem wird der Umgang mit den folgenden Selekt oren
und Deklarationen in der Zukunft kein Thema mehr sein:
Attribut-5elektoren stellen wohl die hilfreichste Komponente
dar, die Entwicklern nun zur Verfügung steht. Sie ermöglichen es,
HTMl-Elemen te mit (55 zu gestalten, die bisher mittels zusätzlicher Markups realisiert werden mussten.
Beispie l:

(55:
a[ rel- " ex terna 1" ]
paddlng: 0 15px 0 0 ;
background: /lff f url(externa1.png) no-repeat right
cen ter:

HTM L:

<a hre f - .. http: // www.belsplel.de ..
rel- "external ' ) Externer lfnk< / a>

Abbildung 10 .17 ..
Attribut-5elektoren: Obe n
wird der 5elek tor vom Browser
erkannt, unten nicht.
658

I

10

8rowserkompatibilität

Unterstützt

Aristotle was a Greek
philosopher, a student
of Plato
and teacher
of Alexander the Great.

Nicht unterstützt

Aristolle was a Greek
philosopher, a student
of Plato and teacher of
Alexander the Great.

Analog können Sie mit
fnput(type- "password " ] ( color : red: ):
sicherstellen, dass Eingabefelder vom Typ Hp assword - in einer
roten Farbe angezeigt werden. Attribut-Selektoren werden vom
Internet Explorer erst ab der Version 7 unterst ützt.
Kind-5e1ektorefl werden vom Internet Explorer ab der Version 7 unterstUtzt. Darunterversteht man 5elektoren, die sich auf
das Kind eines HTMl-Elements beziehen.

Weitere Beispiele zur Umsetzung
von neuen Selektoren und Dekla ~
rationen können Sie im Beitrag
. Tomorrow's (SS Taday. (http://
www.sltepoint(om/art/del
tOrr'lOf(OWS-css-todayl, Unkcode
427) nachlesen _

Beispiel:
11 > blockq uot e
margfn: 000 O.Sem :
f ont-s t yl e: ltalle:
co l or: /Ieee :

Hiermit w ird geregel t , dass Zitate, die im Markup in Ustelementen
verschachtelt sind, nach recht s eingerückt werden und als Kursive
In einer grauen Farbe dargestellt werden .
Nachbar-5e1e1<torM regeln die Darstellung eines Elements, das
im Markup direkt einem anderen Element folgt . Solche Selektoren werden ab Internet Explorer 7 vollständig unterstUtzt.
Beispiel:
h2 + P I font-wefght: bal d: I
Diese Anweisung stellt sicher, dass der erste (und nur der erste)
Absatz, der einer h2-Übe rschrift folgt. in Fettschrift ausgeze ichnet wird.
Viele Pseudoklassen und Pseudoelemente wie: bef ore. : aft er ,
:hover, :fl r s t -chlld werden ab Internet Explorer 7 vollständig unterstUtzt, : actl ve funkti oniert auch im Internet Explorer 8
nicht, : foeus fun kt ioniert erst ab der Versi on IE 8 Beta.
Tabellendekfarationen (emp t y-cel l s, borde r -col1 apse, border-spaclng, t able-layout, captl on- side) werden von allen
BrOW"sern unterstützt; im Internet Explorer ab Ve rsion IE 8 Beta.
Außerdem funktioniert die Einschränkung der layoutbreite bzw.
der layouthöhe ei nwandfrei in allen gängigen BrOW"sern mit mf nwfdth, mfn-helght, max-wldth und max-helght; im Internet
Explorer ab Version 7. Dies gilt auch f ür die Angabe pos 1t f on
(pos1tlon: ffxed), die ab Internet Explorer 7 richtig gerendert
wird .

10.3

CSS-Un terstüt zung in modernen Browsern

I

659

I

........
..

-'",

'''''''''''

.,

XHTUI. I .o~

1 1 <hIInges

~

~,

-'" -...

'"

'"

,,
".
".

,,

'"M'
.",
,

~.

2~%

~.

""

~.

•

•

''''
,

C61:i2 1 AI·......
fIo';'~

,
,,.

"..

CSS2.1~_

M%

CSS2.1~

M'

CIlfC(lOfUti

CSS2.1 Pnrt"'-"""

~.

CSS 2.I~

..

"'"""

~

N

•
••
,,

C&S3 _ _ _

""CSS3~",pr-*
CSS3Prrt~

DOMl_ 3Cor.

'"
"

DOM Level 2 e.<em
DOU l .... 2 HT ....

DOM..- 3 l.M<lIM So ...
00I.I L_ 2 51)10
OOI.I l _2T"""""",1Od Raroe

ooY Lewel3 V.WO.""
[)OUl_2V-

,,.

~.

-

(CWAlcr!pl

u_~

,,. ,-

.....

tm.I. I XIm.I.

"'"

'"
,

...

CSSJ",""l"

OOU
.~,

Eine detaillierte Übersicht neuer
Techniken aus der SpeZifikation
von C5S 3 können Sie duf www.
css3.lnfo nachlesen . Unter anderem wird dort auch die Unterstützung von C55 3 der verschiedenen Browser betrachtet.

•
,•
•

.... ..."•.
".•
".•
•
•
....,,,,. .,'"-~

sern . Stand : Mitte 2008. (Quelle:
htt p:J IWWIN .webdev ou t. neV
browser-support -su mma ry)

~

n.

,

~

~

CU~C""'-

CSS)Bssk:~

.. Abbi ldung 10.,8
WebSl andards in akt uellen Brow-

~.

'"
""
""
-,
.,,,
,
.,.
'"
'"
'"
'"
...
""
.. .. .. ,

C5Sl.1 lkU
CSS2. 1~

CSS2 I _

_. "".

~

C8I2..1

CSS2'

1'1..",.2

HTML IKffNL

HTlL.Ol
)OffiL

- ...

-...
,,.
,~

",.

~.

,•
•

...,
~

."
"'•,
,,
00'

'"
~.

M

,

•
=
",.•

•
,
.,,,,
,,

'"
."
.",
'"
'"
""
~.

~.

""•
"•
,

-

.,~

,
,,

".
m.

,,

,
."

-"",
'N

,

,
•,
,

..

~.

,
,

~,

Zusätzlich implementieren einige Browser-Hersteller auch Selektoren und Deklarationen aus (55 3. Es ist jedoch jetzt schon
abzusehen, dass der Internet Explorer 8 sich nur auf wenige
( 55 3- Eigenschaften beschränken wird - nämli ch:
Die Pseudo-Klasse n :f1rst-11ne and : f 1rst-letter zur

•
~

Auszeichnung der ersten Zeile bzw. des ersten Zeic hens im
Tex tfluss
Tilde-5elektor H, mit dem sich alle Elemente selektieren
lasse n, die einen best immten Vorgänger haben. So bedeutet
p re - p ( f ont - s tyl e: i tal i C: I, beispielsweise, dass alle
Absätze, vor de nen pre auftritt, als Kursive dargestellt werden . Sie müssen jedoc h im Unterschied zu pre + p nicht
benachbart sein .

Insbesonde re werden etwa die nützlichen Selektoren : not , : target ' :la st- child, :nth - child sowie die Deklarationen opaci t y

660

10

8rowserkompatibilit ät

I

und text -shadow nicht unterstützt. In anderen Browsern sind sie
bereits teilweise implementiert.
Es Ist zu beachten, dass trotz der zunehmenden Popularität
standardkonformer Browser ein beachtlicher Anteil der Nutzer
immer noch mit alteren Browsern surft. So benutzte im August
2008 laut Hitslink4 jeder vierte Online-Nutzer den Internet Explorer 6. Der Internet Explorer 7 wurde von etw,a 47 Prozent aller
Nutzer verwendet, Firefox 2.0 von 11,5 Prozent, Firefox 3.0 von
7,7 Prozent und Safari von 5,5 Prozent der Nutzer.
Für Sie als Entwickler bedeutet das, dass Sie Ihre Seiten nicht
nur in einschlägigen Browsern wie dem Internet Explorer 7 oder
Firefox 3 testen müssen, sondern auch in Firefox 2, Safari 3.0 und
vor allem im Internet Explorer 6.
Abhängig davon, welchen Kundenkreis Ihre Seite ansprechen
soll und aus welchen Ländern Ihre Besucher stammen, können
diese Zahlen stark variieren. So liegt etwa der Marktanteil von

Immer mehr DeSigner verzichten
auf speZielle Hacks für die Legacy~
Browser Internet Explorer 5.5 und
Internet Explorer 5. Jetzt schon
gelten diese Versionen als endgültig überholt und ihre Unterstützung als überflüssig.

Opera in Russland zwischen 16 und 19 Prozent. Wollen Sie also
eine Seite für den russlschsprachigen Raum enr."'ickeln, so sollten
Sie auch Inkonsistenzen In älteren Versionen von Opera berücksich tigen.

10.4

I<ompatibilitätstabellen

Ein hilfreiches Nachschlagewerk für den Umgang mit Inkonslstenzen bieten gängige Kompatibilitätstabellen. Sie dokumentieren, wie Regeln, Eigenschaften und Konzepte aus einschlägigen
Webstandards von Browsern interpretiert werden.
.. (55 und Brows erkompatibilität

http://www.css4you.de/browsercomp.html(Linkcode 428)
..

Kompatibilitätstabellen zu HTML, (55 und Java5cript

http://www.quirksmode.org!dom/compatibi/ity.html
(U nkcode 429)
..

A.ttribute von XHTML 1.0-Elementen

http.-/ /www.blackwidows.org.uklr@sou{cesltutorlals/xhtm/I
attrlbute-comparison.html (Linkcode 430)
.. (55-Hacks

http://centric/e.com/ref/css/ftlters (linkcode 431 )

.. Abbildun g 10.19
EI~ der vielen Kom patibilität5tabellen au f (SS4You.de

Eine weitere ausführliche Kompatibilitätstabelle für sämtliche
(SS-Konzepte und Eigenschaften finden Sie auf Westciv (55

Browser Support {http://www.westciv.comlwikiIC5S-.ompatibility _tableJor _currenCbrowsers (Unkcode 43 2».
4

.8rows~ V~slon

Marlcet Share_

(http://markttsh.ur.hltd/nk.com/~port.

iJspx7qprld_l)
10.4

Kompatibilitätstabellen

I

661

Die Tabelle umfasst alle Versionen des Internet Explorers, Netscape Navigator 4, Mozilla, Firefox, Safari und Opera. Sie wird
regelmäßig aktualisiert.

10.5 Ressourcen
Treten bei der Suche nach Bugs Fälle auf, in denen Sie nicht
weiterkommen, so lohnt sich die Suche nach einem ähnlichen
Problem auf Seiten mit dokumentierten Bugs und Kompatibilitätsproblemen . Es folgt eine Übersicht über nützliche Ressourcen
zum Thema Browserkom patibilität:

10.5.1

Werkzeuge, Dienste

...

Firebug
Eine exzellente Firefox -Erweiterung für effiziente Seitenentw icklung und Debugging. Mit dem Tool lassen sich beliebige
Probleme di rekt i m Browserfenster an alysieren un d korrigieren,
http://wWN.getfirebug.com (Linkeode 433)
.. Xy le Scope
Xyle Scope ist ein weiteres CSS-Analyse- und Authoring-Tool
für Mac OS X und die Safari-Engine. Seitenelemente werden
in kompakter Ansicht dargestellt, sodass die Seitenstru ktur
und Beziehungen im Code analysiert werden können. Das
Tao I verfügt über keine Funktion zum Entwerfen und Verwalten von Webseiten.
http://wWN.culturedcode.comlxyle/ index.htm/(Unkcode 434)

OIspla.v C55 BvMedii Type
..
....... wCSS
MOC

Intormallc n

xov

Add U..,r Styte YlUL
[dil CS5

XtH

"'~wStyte

U.., Bordn

8o~

... Web Oeveloper Toolbar

Model

Dieses Tool ist eine Erweiterung für Firefox, Flock, Mozilla
und Seamonkey, mit de r sich Seiten direkt im Browserfenster modifizieren und debuggen lassen, Unter den vielen

.. Abbi ldung 10,20
Web Deve!oper Toolbar in Mac

OS X

.--

""

"

---~.-...

'-"'"
'- -'"
,-,-_
.
----_._-

."
,~

' __a

--::J'"

~,~
.

.. Abbildung 10.21
Mi t M ultiplel Es (h tt pHtredosoft.

com/Multiple_IE) können funf
Versionen des Internet Explorers
gleichzeitig Installiert werden.
662

I

10

Browserkompatibilitat

Optionen ist auch ein Live- Editor dabei sowie verschiedene
Funkt ionen zum CSS-Authori ng.
http://(hri~pederick.com/worklweb-developer (linkcod e 435)
.. Browsercam
http://wWN.browsercam.com(Unkcode 436)
... Browsershots
Erzeugt Screenshots einer Webseite in verschiedenen Browsern bei unterschiedlichen Bildschirmauftösungen - online
und automatisch (http://www.brow~ershots.org
(Linkcode 437»),
... M ultiplelE s
Das Paket ermöglicht es, Internet Explorer 3, 4.01, 5.01, 5.5
und 6.0 zu installieren und gleichzeitig zu verwenden.
http:/ /tredosoft.com / Multiple _IE( Unkcode 43B)

..

I

lETester
Ein kostenl oser BrCl'Nser, mit dem Sie Rendering- und
JavaScript-Engines von JE 8 Beta 2 , JE 7, JE 6 und JE 5.5 auf
Windows Vista und W indows XP testen können.
http://www.my-debugbar.comlwi killE resterlHom ePage (Lin kcode 4 39)

........,

~-

..

~

-..

,-_.......,..~:.='-'.

:-

-

- _._-. ......_ .... T. . .

-

HeltoWorJdl

..

_Browser Tests, Services and Compatibility Test

... Abbildung 10 .21
lETester (http://www.my-debugbar.comlw IkVI ETester! Hom ePage)
Suites~

Eine Übersicht zu Diensten zum Testen von Cross-BrowserProblemen.
http://www.smashingmagazine.coml200 711 0102 Ibrow sert es ts -seM ces- and· com pa ti bility- test -5uit es! (Linkcode 440)
.. Kompatibilitätstabellen zu HTMl , C5S und
JavaScript DOM
http://www.quirksmode.org/dom!compatibifitr·html
..

(Unkcode 441)
Browserunterstützung
http:// www.we5tclv.coml w ikiICS S_com pati bi fitr j able J or_
wrrenLbrowsers (Link code 442)
TIpps
PositionlsEverything
Die größte Sammlung von Bugs und InkompatibilitätsprobJe-

10 .5 .2

..

men moderner Browser sowie von lösungsansätzen . Unter
anderem wird auch der Internet Explorer ausführlich behandelt .
http://posltiOntseverything.net/explorer.html(Li nkcode 443)
Die Seite wird regelmäßig aktualisi ert .
http://www.positioniseverything.net (linkcode 444)
.. BugziUa
Beri chtet über Firefox- Bugs.
http://www.firefox-browser.del w ikVBugzilla (Linkcode 445)

10.5

Ressourcen

I

663

.. Quirks mode Bug Reports
Berichtet regelmäßig über Bugs und Darst ellungsproblem e von einschlägigen Browsern. Au ch die mangelhafte
JavaScript-U nterstützung der Browser wird behandelt .
http://wlNW".qllirksmode.orgibugreports/index.html(Li nkcode 446)
.. »C55 Compatibility a nd Inte rn et Explorer«
Ein Dokument von Microsoft, in dem der Stand der Entwi ckl ung des Internet Ex plorers regelmäßig aktualisiert wird.
Au ch die (SS-Unterst ützung in versch iedenen Versionen
des Internet Explorers wird anhand einer Referenzta belle
beleuchtet.
http://msdn.mierosoft. comlen -uS/li braryI cc3 51 02 4.a spx
(Linkeode 447)
.. »C55 Fil ters a nd Hacks, Css Hack - css-d iscuss«
Die Seit en geben einen Überblick über verschiedene Methoden, um Attri bute für problemati sche Browser festzulegen.
http://css-discllss.incutio.com/?page=CssHack (Li nkcode 44 8)
.. »C5S Float Th eory: Thin gs Vo u s ho uld Know«
Eine Übersicht von dokumentiert en Float-Bugs, die bei m
In ternet Explore r auftret en.
http://wlNW".smashingmagazine.com/200 7105101/
c55 -float -theory-t hings-you -should-know (Linkeode 449)

.. »50 lut io ns to C55 Browser Bugs a nd Cross -B rowse r,
Cross -Pl atform C55 Iss ues«
Eine Sammlung von Beit räBen zu Problemen und l ösungsansätzen für eine pla ttform unabhangige Seitengest altung.
Referenzen zu ausführlichen Beiträgen über den Internet
Explorer 7.
http://websitetips.com/csslsolutions (linkcode 450)
.. »Web Design Refere nces: Browsers«
Eine umfangreiche Sammlu ng von BeiträBen, Referenzen und
Ressourcen zum Thema Browserkompatibilität. Auch mit
Referenzen zu ausfü hrlichen Beiträgen zum Internet Expl orer 7 und 8. Die Seite wird monatlich aktualisiert.
http://wlNW".d.umn.edll/it5s/5upport/TraininglOnline/
webdesignlCH.html Hbrowsers (Linkeode 451)

664

I

10

Browserkompatibilität

11

Ajax

Ganz gleich, ob attrakt ive Designelemente Nutzer ansprechen
sollen oder pragmat isches Design die Inhalte in den Mi ttelpunkt
stellt: Ohne saubere, reibungslose Funktionalität bleiben jeder
Webanwendung die Seitenbesucher aus. Konsequenz: Die Qualität des Back Ends eine r Webapplikation bestimmt die Qualität des
Dienstes entscheidend. Die visuelle Gestalt hat dabei keine primäre BedeutLmg. Aus diesem Grund etablieren sich im Web 2.0
neben klassischen Konzepten neue, elegante, dynamische und
benutzerfreundliche Programmiertechniken. Webdienste ähneln
zunehmend gewöhnlicher Desktop-Software und können durch
schnelle und simple Interaktivität überzeugen.
Doch neue Methoden se tzen ein neues Denl:- und Designmodell in der Webprogrammierung voraus. Diese Methoden werden durch die Verbindung von Ajax, zahlreichenAjax-Frameworks
sowie JavaScript-Bibliotheken bereitgestellt. Mit Microformats,
Mashups, Wikis und Blogs kommen neue Erscheinungen des Mitmach-Webs zum Tragen, die mit Ajax zu vielfält igen dynamischen
Plattformen erweitert werden können. Im Folgenden werden all
diese Erscheinungen im Einzelnen beleuchtet und anschaulich
erklärt.
Wer vom Web 2.0 spricht, hat in der Regel den Begriff Ajax
(Asynchronous JavaScript and XML) im Kopf. Dies ist nicht übe rraschend, denn im Gegensa tz zu Design trends. die sich über Jahre
hinweg permanent verändert haben, tragen moderne Webapplikationen zu einer gnmdJegenden Veränderung des Surfverhal tens
bei , die eben bei Interaktionen mit On li ne-Diensten immer wieder auffallen.
Zunehmend welsen Webdienste eine neue Dimension der
Interaktivität auf, deren Mangel bisher den wesentlichen Unterschied zwischen Online-Applikationen und Desktop-Anwendungen ausmachte. Die Veränderungen betreffen weniger die
visuelle Gestalt als das funktionale Gerust. Insbesondere ist die
zügrge Reaktionszeit einer der wesentlichen Vorteile, die das
Ajax-Modell hervortreten tassen.
11

Ajax

I

667

Onhne und Offline

Die Schlichtheit, die zur Etablierung des Webs als Medium
fuhrte, erzeugte eine Kluft
zwischen User Experience bel
Online- und Software-Interaktionen. Genau diese Kluft gilt es
nun , mithilfe des Aj ax-Ansaues
zu überbriicken .

Um eine bessere Vorstellung von Ajax zu gewinnen, ist es vernünftig, den Mechanismus zuerst aus der .. Vogelperspektiveoo: zu
betrachten.

11.1

Ajax-Anwendungen in der Praxis

Ein neues Prog rammiermodell genügt nur selten, um einen
Durchbruch in der Öffentlichkeit zu erzielen. Dami t ein neuer
Trend sich durchsetzen kann, sind innovative Applikationen
gefragt, welche die neue Funktionali tät bis auf die Spitze treiben
und Nutzer durch neue In teraktionsmöglichkei ten zu überzeugen
wissen.
Als eine neue Entwicklungstechnik stellt Ajax: dabei keine
Ausnahme dar. In den letzten Jahren konnte eine Reihe von
Applikationen durch verbessertes User Interface und elegante,
dynamische Ajax-basier te Lösungen das Interesse der Öffentlichkeit für sich, und damit auch für Ajax, gewinnen. Eines davon
ist GMail (http://www.gmail.com). ein von Google entwickelter
webbasierter E-Mail-Dienst, dessen Eigenschaften weit über die
der üblichen E-Mail-Software hinausgehen.

11.1.1

GoogleMai! (GMail): clever, robust und elega nt
Im Un terschied zu üblichen Webmail-Diensten können GMail-

Nutzer nicht nur Nachrichten verschicken, sondern auch RealTime-Diskussionen führen. Zusammenhängende E-Mails werden
automatisch als solche erkannt, chronologisch geordnet, je nach
Versender visuell markiert, miteinander verknüpft und in Form
einer Konversat ion ((onversation View) zusam mengefdsst .

G~
byGoogle

ir

BETA

Abbildung 11.1
GMaH (http://gmail.com)überzeugt durch übersichtliche Pr<l.sentation und dynamische lösungen.
A

668

I

11

AjdJ(

GMail-Nutzer, die gleichzeitig on line sind, können Nachrichten in einem Instant-Messaging-Fenster austauschen, während
diese automatisch im Archiv abgelegt werden und bei Bedarf
nachgeschlagen werden können. Dabei kann jeder Nutzer seinen
Statu s angeben und GMaii als Instan t-Messanger verwenden.
Beim Schreiben einer E-Mail wird der Text automatisch visuell hervorgehoben und formatiert. Damit keine Daten verloren gehen, werden sie regelmäßig automatisch abgespeichert. Und
wenn der Anwender beim Schreiben einer E-Mail neue Nachrichten im Postfach erhält, wird er direkt benachrichtigt und kann
seine Conversations aktualisieren lassen, ohne dass zuerst zum
Eingangspostfach gewechselt werden muss. Die wesentlichen
Funktionen der Anwendung können über Tastat urkürzel aufgerufen werden.

I
Go
tj l
!Ibn

llil1

I

"""-0

St lln ~, 'iQ....

n a i<,)

....

DoIo<o

I _

".)11, U.....d, SI" 'od,

1<1:.... __ _

.. 5..!!!:t.r.

J"'l~'''~

D

BI... V• •II..
DI_W•• ""' ~. . ..

BLUE VEImGOI OfT I N......M ' ReSO~eSI!lI..EVER""GOIOB1I
DWII N. , '-'" -IGJ)C..2(lI1. S_ I _ U_fo "!l l ll . 0011, · 0 111' ... Redw , lJr

.... 101 .. 1

o

mil.

"ra.

D

KIIYi" M.l h;lI aJ

D

PIIKI!I <;WIM . .

!mhlDoin"-tt.... ' ..... 'd.an!l'l"" · H.. oV• ....,F ..'"
Ln d..... nAc\;'
llo1 k RE: H;:p
*"",,~~:Irl'~"" ~'m WrIr.,te Mo<roe ~.., •
Aoo,.....cJ, II~II., .., f.eitlu -~""" 1U.......... n. "h "''''er .....

~

o

00.',

[1!5!t

~

""""

l",.."'"

.H, ~r ''''''I

~

!

• Vhlt Friood rn ...

,. ., . ,. h_ •

.

"U ~

, '"
.."

Joo, ,

o "_'" I\ ~';.~'-:--"•~-----cyc.c" h..... ".Il "'l1li• • '_'I~hl ,ht Nt_IM ~, . ..: Mt_,••c."..;~
'7~'c.O
" "'__
AlnW'l icl"'. " ftt ?
_ _ "_ ben e ,d
"'''n tc h ..... ' lOOoijll
o P",cu l Gw......
"', . ""I.e, ,ode., .... · In , d ,,,",,,
1_
. "I .. d .... ' .., ,0<" .. '1'
t
o .... , s...,
o S'.... IVlZu..... (21
NIUI Ha.I"lch' .... "
Ha"'VllaryGo..nl., ....1
fUf'"
Jw" •
~lc!r-l

... C.. ck COftIa<:li
,s.",~,

,_."11

11:18 , ...

o

o

n

~

Ir!

~'lp

M" , I ~I .

~

Ma,~

eII< .....

STy ~ i VZ Ze ... G..

A,nl" "

W. ~

J .~ ~

~n

J w,, ~

S..... k ..

l'I.,.h d ~ '

W.Ic~ ",.
11\1.1'~d nll

W.h ~ ....... u. · G, ..I "!J' ~"" ",".rO " Wob S .... " J." 4
H . A,III,, ~ Int mn7,1lfi il J ;Jrati.\ W ~~rru:'...' -.lwl\ J

I.

Am~. ""

Abbildun g 11.2
GMail im Einsatz. Eine benutlerfreundlkhe, elegante und einfache Oberfläche
.t.

• Repj, ... EtaooI ....Cti'fiUJll O!2ol.u Jr'''

I

$~

II

Sm lIow

FI' '': VoIOlly Fril$'n;ln

Spol1 'OIadU~ S

9l
_________________-,

I I DiK..-d ) [)SI ,U!Ol-Md.1 1:51

~ flOII4's\l;
.
~.~.~
'!
=
~"."'
"-

Ir"

•• : ed.oo@. "'."".... ~lr.e Com
~ 1.!Gt.1kt r
11 I

' Cft .... ~

Esl, S!A:sct I Milch

I

aw "Chi. _

l!!..t!!.!!!....., -'Yle~ IMmin.lll
110 htl Spicl. ll ßByle Tnlit

il~

11 J'. TT· T:lli !!!! 1= 1= Oll: "

PIlP$, ....."". , "., oloot
t.l/I 19 . I! pro Progl'Olll"lllliollrOdtl
pt.p . Hlml. Flai h <nII JlvaWlpl.
_
p"" fllll ,,",~ . b<J

. , . , . -' • "I.... '"ot

CI.. ~k.,... ,.. ..

1 .de 1);11.,.11 I.... n.... 0.91 I! p M.
_

1OC", ..h dl

PIIP P, .... , ....,1I • •• ,.,

,,,""" ... , do"",. &I .., ..,.fdlCh.n ooIIU ...

F"

s",* ...... e....

Aut h

On MN. V" i" ~ F,M4,,,... < i'IIi ~ I ~'9""9.zi"" "" rrt> .....";11,,.
Es 1&' IU olbetp\l... atJ oIlo Bi ldo , 'lIIok~lim ""'.... t .im.

u...n ..... bill!

Pro~Uol

- .1111/" ... ..
O. U• • -I\ '''9'1H~''M
f'1Il tlertdlrl ...,niblg OrolllO drekt
lUI Itnn eigenen ........ . .... g on.

_

klop,ulf dI

.... .. 3 . 0 • •...

J~c",'

UI". r •

J-S cr"t HTML O. buagll< >
Jao'.~k,,,1 ~"aI,,~t;on ~

Jm$ wiIll

""m,,

1

.. Ab bil dun g 11.]
Beim Empfang einer neuen E-Mail zeigt GMaii dies automatisch In einer
Infobox an.

Die treibende Kraft hinter all diesen Ansätzen ist die Ajax-Architektur. Umfassend umgesetzt, la sst sie in GMail mehrere Fun ktionen zum Tragen kommen, die für eine Webanwendung eher
ungewöhnlich si nd .
So werden traditionelle Fun ktionen wie etwa ein Adressbuch,
eine opt imierte Such e, ein Spa mschutz oder ein Virusscannervon
GMail mitgeliefert .
11.1 Ajax-Anwendungen in der Praxis

669

..,

,..

11.1.2

.,

7D netvibes
""...... -

Netvibes: personalisierbare Startseiten

Moderne Nutzer woUen möglichst schnell an Informationen
gelangen - gleichgü ltig, ob es sich dabei um neue E-Mail<; oder
aktuelle Beiträge auf Webseiten handelt. Personalisierbare Startseiten kommen diesem Wunsch wie kein anderer Dienst entgegen. Schließlich dienen sie dazu, schon beim Starten des Browsers

alle interessanten Inhalte zu laden und in einer kompakten Über• Abb ildu ng 11.4

Netvibes.com bietet personalisierbare Startseilen an - kostenlos,
übersichtlich und elegant.

sicht aufzubereiten .
Netvibes (http ://netvibes.com), eine der führenden Anwendungen der Personaiized Homepages, bietet den Nutzern jedoch
weit mehr. Neben Inhalten von beliebigen Feeds kann der Dienst
Ka lender, Bookmarks, Not izen, To-Do-Listen, unterschiedli che Suchoptionen (Google, Wikipedia usw.), E-Mails (etvv"a von
GMail), Fotos, Videos, Screencasts und Ähnliches anzeigen . Auch
weitere Op tionen wie etvv"a das Sc hreiben einer E-Mail, Benachrichtigungen und Spiele sind möglich. Einzelne Module werden
in Boxen platziert und können mithilfe der Drag & Drop-Funktionalität beliebig verschoben und angeordnet werden.
Die visuelle Da rstellung von Daten können die Nutzer manuell
festlegen ; die Navigation kann auch über Tastat urkürzel erfolgen.
Startseiten lassen sic h im sogenannten Netvibl:'s Ecosystem allen
Nutzern zugängl ich machen, wodurch etvv"a der Austausch von
fertigen Netvibes-Layouts möglkh wird . Ober die Netvibes-API
können Programmierer außerdem neue Module entvv"erfen, veröffentlichen und weiterentvlfkkeln.

11.1.3

Illlte .
• Abbildung 11.5

Mite (http://www.bemite.de):
ein Zeiterfassungstool für Web -

Worker

Mite : Zeiterfassungstool für Web-Worker

Wer mobil ist oder sein möchte, benötigt ein effizientes Zeitmanagement. Dies bet rifft auch und vor allem Web-Worker, deren
Zeitaufwand sich nur schwer intuit iv bemessen und bewerten lässt. Die deutschsprachige Anwendung Mite (http://www.
bemite.de) soll in solchen Fällen Abhilfe schaffen . Der Dienst
stellt automatisch Berichte zusammen, die das Ze itmanagement
des Nutzers dokumentieren und grafisch aufbereiten.
Mit Mite können Anwender beliebige Aufgabe n und Projekte
fe stl egen und Fortschritte bei der Bearbeitung ihrer Aufgaben
erfassen. Daten können nach Tagen sortiert und nach Kalenderwochen ausgewertet werden. Mehrere Benutzer können ihre
Aktivitäten mit dem Tool dokumentieren und den Handlungsbedarf in Echtzeit abschätzen . Die von Mite gelieferten Reports
ste llen die gesam te und du rch schn ittl iche Arbeitszei t des Benutzers sowie das verfUgbare Budget zusammen. Die Daten werden dabei visuell aufbereitet, etwa in Form eines Kuche ndiagramms.

670

I

11

Ajol.X

/

-

....
•

"...
Mo

......
11. bis 24. Dez.mbtr 2001· KW Sl

..... .. ,
Di

Mi

I.

F,

--

. ... " ...
Sil

I

So

•

,·.~IO ...... ~;;::===-"
"

0
-"" I.'""'::::==~--_
-_...,
-'-

,-

.. Abbildu ng 11. 6
Mit Mlte können AllIrVender beliebige Aufgaben und Projekte festlegen und Fortschritte bel der Bearbeitung von Aufgaben erfassen.

Aus technischer Sicht bietet Mite Ajax-basierte Funktionalität.
die vor allem durch die Dynamik der Nutzerangaben deutlich
wird. Einträge können direkt in Feldern eingegeben und geladen
werden, ohne dass der Nutzer permanent von einer Seite zur
anderen wechseln muss. Module (Formulare, gesammelte Daten)
werden dabei dynamisch ein- und ausgeblendet. Die Daten werden im Hintergrund abgespeichert. wobei der Anwender davon
nichts mitbekommt. Um das Tool zu verwenden, ist weder ein
Download noch eine Installation notwendig. Der Dienst kann
sowohl zur Bewertung der eigenen Produktivität als auch zur
effektiven Zusammenarbeit und zum besseren Zeitmanagement
verwendet werden.
11.1.4
Typi sc he M erkmale von Ajax -Applikation en
Moderne Ajax-basierte Anwendungen zeichnen sich insbesondere durch neue Designschema ta und interakt ive InterfaceElement e auf. Eine klare Trennlinie zwischen tradi tionellen und
neuen Elementen zeigt die Vorteile Ajax-basierter l ösungen. Es
folgen einige typische Merkmale moderner We bapplika tionen im
Schnelldurchlauf:
.. Das User Interface wird zunehmend dynami sc her
Seitenelement e werden nachgeladen und nach Anfrage des
Nutzers in die Seitenstruktur eingebettet. Diese ist nicht mehr
st atisch und kann durch den Nutzer angepasst werden. Somi t
wachsen Benutzerschnittstellen _organisch«.
.. Rich Internet Appl ications
AJax soll einen ersten Schritt in Richtung Rich Internet Applications (RIA) darstellen, deren FunktionaHtät laut Vorste llung
11.1 Ajax-Anwendungen in der Praxis

I

671

von Webentwi cklern besser oder wenigstens genauso mächt ig wie die der Desktop-Software sein solL
.. Personali sierung d e r Nut zerintera kti o n
AlMender können genauer festlegen, wel che Inhalte wie präsentiert und behandelt werden müssen .

.

.. nno ....

(Z~; ~~·~:~;~

nn.mm +~.~n:.~~

IItclie, 5cMu<pie1er sdtie& Mn Golf VoQeIftb

"-D<eri<r;.g, P<IiH..t.f:in<..1:> bio HK<d-df<
LW~ '" W~: Amerik.lner ~lerl sen EeOn"" T~scl"ermeslel"

_...

Grolb"hv»eo : ~.Serdn;J troll/O)'alen Prolests &JSQeslralil
Fr4lW'dch: DrelOeo.tsd·le ste-beo ~ FUQ:~tcx~
Evao;,ekther Ki,,:heitaQ: Sd:atter«l~ lIit Karnevals.flai-

@ ( (;O) Il!;j~o; Y' ~j..o;

..... no ..

j

t!t; ....

ln.pi....J.ef I:msiert den ):irI9stM GH..3·EntIoIJf

!>eise."" kutz>eü;J ..... 5py>we·5ete M1~isert

5u">: ZF5 wirdner.Je<l[Mteilystem in ~ L~
Hitlo»<ft vnJ l r; 0.,<\,,,,-.;. t.,..,w"", Pot", ...", ou>
OCII'·Plkte
Symartecs G'>osI 5IIOJtlon l'SI\ Atostu-~
fi"efox 3.0 Abha 5 nt ~ Boo<mark·'lerwa/:ulo

Abbildu ng " .7 ..

trnoen

Auf Netvibes .com können Inhalte
über die Drag & Drop- Funktiona lität besser ti)(iert werden.

...ter ..

..

Redunda nz für m ax im ale Re ichweite
Inhalte werden gleichzeitig in mehreren Versionen und Formaten angeboten, um ein möglichst breites Publikum anzu-

_
...
•.... .. ...

sprechen.

..

..Sendlnq
. ..... ... ......._...........
~

.,. ,.,

~"

_.~

'-'-""..""..,

... Abbildung

....

11. 8

Eine Fortschrittsanzeige auf
Dropsend.com. Wahrend die
Datei hochgeladen wird, können
Anwender den Dienst weiter verwenden.

Robu st e Kommu nika tio n de r Applika tio ne n
Die Angaben der Nutzer werden direkt im Hintergrund bearbeitet , noch während sie getätigt werden. Visuelle Hinweise
während der Eingabe ermöglichen eine bessere Kommunika tion mit den Anwendern (Progress Indicators, saving-IloadingHinweise sowie grafische Hervorhebungen). Der Nutzer ist an
ablaufende Prozesse nicht gebunden und kann Dienste verwenden, ohne auf eine Antwort des Servers warten zu müssen.
.. W e ba pp lika tion en ä hne ln zunehme nd
Desk to p -Ap pi ik. ti o ne n
Moderne Webanwendungen können nicht nur durch Mobilität und Interaktivität, sondern auch durch Funkti onalitä t
überzeugen. Diese ähnelt zunehmend der üblicher SoftwareProdukt e.

Web ohne Ajax
Beispielhaft für das klassische
Modell der Server- Clien tSchnittstelle ist Amazon.de. Um
ein Produk t zu kaufen, müsse n
Kä ufer mehrere Schrille hi ntereina nde r e rlolgreich abschließen.

672

I

11

Ajax

11.2

1<lassisches Modell und Ajax-Modell

Im bewährten klassischen Modell basieren Webdienste auf einem
relativ simplen Schema. Um über ein Web-Interface zu einem Ziel
zu gelangen, geben Nutzer ihre Daten in mehreren Schritten an.

Einzelne Felder werden nacheinander abgearbeitet. Da zwischen
der $erver- und der Client-Sei te keine permanente Verbindung
exist iert , erhält der Anwender während der Eingabe keine Rückmeldung - diese ist erst im nächsten Schri tt möglich.
Die Angaben werden über Steu erelem ente explizit an den Server übermittelt. Der Server bearbei tet die Anfrage, gener iert eine
neue HTM L-Seit e un d li efert diese an die Client -Seite zu rück. Der
erste Sch ritt ist damit abgeschlossen und die Interakt ion zwischen
Nutzer und Server kann nun im zweit en Schritt nach demselben
Must er fo rtgesetzt werden.
Dieses t radi t ionelle Modell ist aus technischer Sicht rech t
leicht zu realisieren, hat j edoc h im Hinblick auf die Use r Experience - insbesondere gegenüber Desktop-Anwendungen - einen
gravierenden Nachteil. Denn bei jedem einzelnen Schritt muss
der Anwender wa rten. Und zwar so lange, bis die Anfrage abgearbeitet und die Seite komplett neu geladen ist . Tradit ionelle
Webanwendu ngen weisen eine synchrone Funkt ionsweise auf:
Der Nutzer sendet Anfragen, wartet, erhäl t die Antworten und
kann neue Anfragen schicken . Dies spiegelt sich in mangel hafter
Int erakt ivi tät un d Responsivi tät von W ebapplikat ionen w ider.

browser d ient
u-ser Inte rfac;e
Ja v"Scrlpt call
•
HTMl + fss data

user Interface

"ja" e ng ln e

+

processng,

I~

systems

.... Abbi ld ung 11. 9
Auf Amazon.de sind für eine
Bestellulll sieben Schri tte no twendig - dies bedeu te t wen Igste ns sieben Ladevorgänge de r
Seile pro Bestellung.

Desktop-Anwendung
Desktop-software kommuniziert
mit Ihren Anwendern permanent, Webdienste dagegen erst
nach der volls tändigen überm ittlung der Daten . Konsequenz :
in einer Software werden die
aktualisierten Einstellungen d irekt wi rksam. Beim klassischen
Modell im Web mÜHen sich
Online-Nutzer dagegen auf einen erneuten Ladevorgang der
kompletten Seite einstellen.

t

browser dient

datastores, backend

I

datastores, bac:kend
j)fOreSsing, leQiICY systems

server-side system s

se rver-side syst ems

etassie
web apptieation model

Aja x
web application model

... Abbildung 11.10
Klassisches Modell von Webapplika tionen im Vergleich zu m Ajaxbasierten Ansatz (Quelle: http://
www.adaptivepat h.com/
pu bl icatlonvessa ys/arc hi vesl
000385.ph p, linkcode 455)

Diese Vorgehensweise hatte sich im Web als Standard etabliert .
Es ist leicht zu sehen, dass tradit ionelle Webanwen dungen daher
langsame r und weniger benutzerfreundli ch zu bedienen sind als
"fI.z

Klassisches Modell und Ajax-Modell

673

klassische Desktop-Anwendungen. Bei diesen wird die grafische
Benutzeroberfläche nicht nach jeder Eingabe neu geladen. Auch

HINWEIS
In modernen AJax-basierten Applikationen geschieht die dynamische Interaktion zwischen dem
Nutzer und der Seite im Hintergrund durch einen permanenten
Client-Server-Da tenaustausch.
Grundla.ge dafür ist die Erweiterung von statischen HTMLDokumenten mit XML-Daten, die
auf dem Server gespeichert und
bei Bedarf aktualisiert und nachgeladen werden können. Der
Seiten inhalt kann sich verändern ,
ohne dass die Seite komplett neu
geladen werden muss.

w ird der Anwender bei einer Desktop-Anwendung unmittelbar
bei der Eingabe seiner Daten auf fehlerhafte Eingaben hingewiesen. ohne dass die gesamte Anfrage zuerst übermittelt werden
muss.
Eine derartige Dynamik ins Web zu übertragen, ist die primare
Aufgabe des Ajax-Konzepts. Die Grundidee hinter dem AjaxModell basiert dabei auf der Ergänzung des klassischen Modells
durch einen permanenten Vermittler zwischen der elient- und
der Server-Seite. Neben dem gewöhnlichen (X)HTML-Dokument
w ird beim ersten Ladevorgang der Seite die sogenann te AjaxEngine automatisch mitgeladen. Sie soll die Interaktionen der
Besucher beobachten, bei Bedarf Anfragen an den Server schicken, dessen Antworten interpretieren und die Seitendarstellung
entsprechend anpassen - und zwar direkt und im Hintergrund.

-,.......
......
......

___-"-..
........_-"
,

,<.. . -

.~_._"

u.h~

"

ohne dass der Benutzer etwas von den Client-Server-Prozessen
merkt.
HTIP-Anfragen werden demnach durch Engine-Anfragen
ersetzt, wobei Inhalte der Seite immer automatisch aktualisiert
werden. sod ass ein erneuter Aufbauvorgang der kompletten Seite
nicht mehr notvolendig ist.
In einem konkreten Fall kann diese Interaktion etvola wie folgt
aussehen: Beim Eintippen des Benutzernamens liest die AjaxEngine den aktuellen Inhalt des Eingabefeldes und sendet ihn
an ein Serverskript (z.B. eine PHP-Datei). Dies verbindet sich mi t

,-_
__
.....

....,.- ~

...._... _......

~-"

~"._ -

".Io,I~ --.I'

o.

.. Abbildung 11.11
Bei Google Suggest (httpHwww.
google.com/webhp7complete=
1&.h I=en &.bln G=Google+Search)
werden häufige Suchanfragen
schon während des Eintippens
angezeigt. Dies ist eine der ersten
Anwendung. die auf asynchrone
Interaktion mittels AJax setzte .

-

-

--. - .,~.

--- ---~

=

···'i__

....:.: ~

" l,.-=--=
--~
!:;= =-

--.
.. Abbi ldung 11.12
Die Tabellenkalkulation auf
Zoho Sheet (http://sheet.zoho.
com) weiß zu beeindrucken. Von
gewöhnlichen Desktop-Anwendung lasst sie sich nur schwer
unterscheiden.
674

11

Ajax

einer Datenbank und überprüft, ob ein Benutzer mit dem übermittelten Benutzernamen bereits existiert. Ist dies der Fall, wird
eine entsprechende Mitteilung an die Engine zurückgeschickt. Sie
sorgt ansch ließend dafür, dass ein versteckter d 1v -Block mit einer
Fehlermeldung angezeigt wird oder eine der CSS-Deklarationen
auf das jeweilige Eingabefeld angewendet wird. In beiden Fällen
ändert sich die Seitendarstellung. Dies geschieht automat isch in

-

Bruchteilen von Sekunden. sodass der Anwender die Meldung
über den bereits vOf"handenen Benutzernamen scheinbar direkt
erhält.
Ein wichtiges Merkmal dieser Vorgehensweise besteht darin.
dass sich die Engine nicht auf genau eine Anfrage beschrankt.
Eine Anfrage muss demnach nicht zuerst vollständig abgearbeitet werden, damit andere Anfragen zum Zuge kommen können .
Statt dessen kann die Engine mehrere Anfragen parallel bearbeiten, während der Anwender wei tere Angaben macht und die
Engine wiederum neue Anfragen generiert.
Damit geschieht die Interaktion des Besuchers unabhängig von
parallel ablaufenden Server-Prozessen. Diese Trennung w ird in

I

der Fachsprache als Asynchronität bezeichnet. Sie ist ein wesentlicher Bestandteil von Ajax.
Jff'! l

~ - --

Ajax-Englne
Anstatt Server permanent neue Seiten generieren zu lassen , ladt die
AJa>c-Engine nur ~olche Informationen vom Server nach, die für die aktuelle Interaktion wichtig sind. Dieser Vorgang muss nicht notwendigerweise vom Nutzer Initiiert werden . Auch ein im Hintergrund laufendes
Skript kann Funktionen selbstandig aufrufen.

11.3

Architel<tur von Ajax

An sich stell t Ajax keine neue Technologie dar, sondern ein
Zusammenspiel von etablierten Websprachen, Standards und
Techniken, die in einem neuen Zusammenhang miteinander
kombiniert werden.
Die Ajax-Architektur basiert auf der Kombination folgender
Komponenten :
.. (X)HTML und CSS, die eine standardkonforme Seitenstrukt ur
und Präsentation sicherstellen .
.. DOM (Document Object Model) zur dynamischen Anzeige,
Interaktion und Manipulation von Seiten strukturen
.. XML (eXtensible Markup Language) zum Nachladen, Austauschen und Ändern von lokal und ex tern gespeicherten Daten
(dies kann auch HTML oder einfacher Text sein)
.. XMLHttpRequest -Objekten zur Generierung und Vermittlung
von Anfragen sowie asynchroner Datenübermittlung Mischen
der Client- und der Server-Seite
.. JavaScript , mit dem alle aufgelisteten Techniken miteinander
in einer Ajax Engine verknüpft werden.
An dieser Ste lle ist es wicht ig anzumerken, dass der Ajax-Code
meistens als gewöhnlicher JavaScript-Code auftritt. Der QuelJtext Ajax-basierter Applikationen befindet sich innerhalb des
Java Sc ript-Konstrukts.

<sc ri pt typ e- °text /j a va sc ri pt 0 )
... Ajax-C ode ...
</sc ript )

Ajax-Programmierung ist somit im Allgemeinen als gewöhnliche
und vor allem simple JavaScript-Programmierung zu verstehen,
die durch zusätzliche Methoden, Bibliotheken und Zugriffsoptionen erweitert wird.

~ng ...

TNs J,lhoto 1$ p l lv.. te

Ctoenge?

A bbildung 11.' 3
Bei modernen WebapplikatiOl1
geschehen Prozesse im Hintergrund. Die Daten bei G!\o\ail werden im Hintergrund geladen, die
bei Flickr im Hintergrund abgespeichert.
.6.

-

,.. ..............

,--

".'4

A bbildung
Die Angaben des Nutzers werden
bei modernen Ajax-Applikationen
direkt überprüft. Die expliZite
Übergabe von Daten an ein
Serverskript ist nicht notwendig
(Quelle: iconbu ffet. com).
.6.

HINWEIS
Mithilfe des asynchronen Ansatzes Ist es möglich, _frische.
Inhalte, die erst beim Besuch
einer Seite geliefert werden,
Nutzern direkt bereitzustellen .
Sollte etwa eine neue Nachricht
auf dem Server ankommen ,
wahrend der Anwender noch angemeldet ist, so kann sie direkt
angezeigt werden, ohne dass
der Anwender seine Mails zuvor
abrufen muss.

11.3

Archi tekt ur von Ajax

I

675

11.).1

TIPP
In den meisten Code-listings
dieses Kapitels wird das
<sc r 1pD · Konstrukt weggelassen. sollte aber immer mit gedacht werden.

Strategie der Ajax-Programmierung

Um mi t der Ajax-Technik geschickt umzugehen und Webanwendungen effekt iv zu programmieren, liegt es nahe, bei der Entw icklung einem Schema zu folgen. Bei umfassenden Ajax-ProJekten genügen meistens sechs Schritte:
1. Konzeption des Entwurfs, gegebenenfalls mit UML-Diagrammen, die Met hoden, Attribute sowie den Austausch und die
Übergabe der Daten und Parameter genau dokumentieren
2. Umsetzung eines Grundgerüstes der Anwendung, mit Deklarati on aller verwendeten Attribute und Methoden
3. Abfangen von Inkompatibilitätsprobtemen, meist em betrifft
dies nur die Dekla rat ion VOn XMLHttpRequest-Objekten.
4. Programmierung von Methoden :
.. Beobachten der Nutzereingaben (in komplexen Projekten
auch Beobachten von Serverdaten)
.. Generieren von Anfragen in Abhängigkeit von Interaktionen des Nutzers oder Daten auf dem Server (mit XHR)
.. Versenden von Daten an ein Serverskript (mit XHR)
.. Programmieren von Serverskripten, die Anfragen an den
Server weiterleiten und dessen Antworten zurückliefern

Der Modultest ist Teil des SoftwareentwicklungsprozeHes. Er
dient zur Verifikation der Korrektheit VOll Modulen einer Software,
z. 8. von einzelnen Klassen. Nach
jeder Änderung sollte durch Ablauf aller Testfälle nach Programmfehlern gesucht werden.

.. Behandl ung der Serve rantworten - etwa Manipulation der
Seitenst ruktur bzw. Veränderung von Seitenelementen
(mit XHR, JavaScript, (SS, DOM Scripting)
.. Dokumentat ion der Methoden im Quellcode
5. Durch lauf von Mod u Itests (Un it tests) auf Musterdaten, Testen
von Serverskript en , Tests im Hinbli ck auf die BrowserkompatibUität, Sicherheitstests
6. Release
Diese Strategie kann Ihnen helfen, üblichen Problemen und
Inkonsi stenzen, die in der Praxis häufig auftreten, effektiv und
frühzeitig vorzubeugen,

11.3.2
XM LH t tpRequest
Das XMLHttpRequest-Objekt gibt
es seit dem Internet Explorer 5.
Aber auch davor wurde schon
Ajax verwendet Damals wurden
die Daten über einen versteckten
Ifram e- geladen.

XM lHttpReq uest (X HR)

Die einzige wesentliche Erneuerung in der Ajax-Archi tektur wird
durch die wenig bekannte XMLHttpRequest-API geliefert. Vol lständig implementiert in sämtlichen einschlägigen Browsern,
ermöglicht sie es, HTTP-Anfragen an den Server zu senden, die
Antworten abzufa ngen und Daten zwischen der Client- und
der Server-Seite zu versenden. Das XMLHttpRequest-Objekt (ein
JavaScript~Objek t) übernimmt dabei die Kernaufgabe, die Anfragen asynchron während der Interaktion des Nutzers zu generieren und zu behandeln. Somit baut es einen Kanal zwischen beiden Seiten auf, durch den Informationen ausgetauscht werden
können.

676

I

11

Ajax

I
·-0 ~1,..

__..I-IIt"-o DOtIISttr"9

-

~ __ ..I-IIt"~Sttr~DOtII~

opMDONSttr"9 , DOtII~) _

l

.. Abbildung 11.15
Sch nitt stellenbeschreibung d es
XM LHTIPReq uest-Objekt s gemäß
d es W 3C-Vorschlags

Das XHR-Objekt lässt sich anschaulich mit den üblich en Objekten
aus objektori entierten Programmie rsprache n verg leichen . Über
seine Att ribute lind M ethoden können Jav aSc ript-Funkt ionen im
Hintergrund auf Serverdaten zugreifen und die Seitenda rstellung
über DOM manipulieren.

11.3 .3

Methoden de s XMlHttpRequest-Objekts

Beim Zugriff auf Met hoden des XHR-Objekts ist es wichtig zu verstehen, dass es sich im Ajax-Modell stets um die Generie ru ng von
Anfraeen und die Behandlung von Ant wo rten handelt (Req uestl
Response-Modell). Das einzige, was ein Ajax- Entwickler bei der
Programmierung mit XH R sicherst ellen mu ss, ist, dass das Objekt
die Interakt ion de r Nutzer ko rrekt interpretiert und mit der Serverseite ko rrek t kommuniziert .
Zu d iesem Zweck können unter anderem folgende Fu nkti onen
ve rwendet w erden:

.. a bort()

TIPP

Bricht eine Anfrage ab.

.. getAUResponseHeaders ()
li efert alle HTTP-H eader als St ri ng zuruck.

.. getResponseHea der (headerName)
li efert den Inhalt des HTTP- Headers hea de r Name als String
zurück.

.. open ( method, URl ), open (method, URl, asy nc: bool ),
open ( method, URl, async : bool, login), open ( method,
URl, async: bool, login , pass)

Im Augenblick arbei tet das
W3C - Konsortlum an der Festlegung eines allgemeingültigen
Standards fO r das XMLHttpRequest-Objekt . Die Ergebnisse
sollen auf http://www.w3.org/
TRlXMLHltpRequest (Linkcode 456) verö ffentlicht werden.

Erzeugt eine neue An frage für den Server. legt die Übergabemethode (etwa GET, POST) sowie d ie URl des Serverskri pts
fest. async legt bestimm t, ob d ie An frage asynchron ablaufen
so ll .
11-3

Archi tek t ur Ir'On Ajax

I

6n

Im asyn chronen Fall wird das JavaScript nach der Erzeugung
einer Anfrage weitere Anfragen generieren und bearbei ten,
ohne jeweils auf die Antwort des Serverskri pts zu warten.
Üblicherweise wird immer auf die Antwort des Servers gewart et . Standardmäßig wird a syn c auf true gesetzt. Zusätzli ch
können ein Benutzername und ein Kennwort für den Zugang
zum Serverskript angegeben werden.

.. send ( content)
Sendet die Anfrage an den Server.

.. setReques tHeader (label , value)
Erweit ert den HTIP- Header mit einem Beschriftu nglWertlupel. Dies ist nützlich, wenn Sie eine oder meh rere ähnliche
Anfragen eindeutig identifizieren wollen.

11.3.4
TIPP

Um die Bedeutung der einzelnen
XHR-Methoden und -Attribute
besser zu verstehen, wird auf
den nächsten Seiten zuerst
Grundlegendes über den Umgang mit dem XHR-Objekt und
seine Anwendung in Webapplikationen gesagt

Ein Ereignis (event) dient in der
Softwaretechnik zur Steuerung
des Programmflusses. Das Programm wird nicht linear durchlaufen , sondern es werden spezielle
Ereign isbehand lu ngs rou tinen
(event handle r) immer dann alJSgeführt, wenn ein best immtes Ereignis auftritt.

Attribute des XMUHtpRequest-Objekts

Sämt liche Attribu te des XHR-Objekts beziehen sich auf die
Behandlung von Serverantworten und bilden als solche den Kern
einer jeden Aj ax-Applikation.

.. onReadyStateChange
Referenz auf eine Funkt io n (Ereignisbehandler oder Event
Handler). die bei einer Veränderung des Zustands der Anfrage
aufgerufen wird.

.. readyState
legt den aktuellen Zustand der Anfrage fes t
0 : nicht init ialisiert (vor dem Aufrufvon open( )
1: initialisiert (vor dem Aufrufvon send {»
2: versendet (Header der Anfrage können ermittelt werden)
3 : Die Anfrage wird bearbeitet.
4: Die Anfrage ist beantwortet und zurückgeschickt worden.

.. res ponseText
Die Serverantwort in Gestalt eines Text-Strings

.. responseXMl
Die Serverantwort in Form eines XML-Objekh (kann über
DOM behandelt werden)
.. status
HTIP-Status-Code der Serverantwort (200 für »OK oc, 404 für
,. Not Found«, 403 für »Forbidden« usw.)

.. statusText
HTIP-Status-Code der Serverantwort als String (lO OK «, ,. Not
Found«, »Forbidden« usw.)

11.3.5

Praxisbeispiel

Um Ihnen die Ajax-Programmierung möglic hst konkret vorzustellen, wird auf den nachfolgenden Seiten der theoretische Hintergrund durch eine praxisnahe Beispielaufgabe veranschauli cht.

678

I

11

Ajax

I

Sc h ritt für Sch ritt : Ein en Ajax-basie rten I<ata log erze uge n

D

Basisgerüst enteilen

Angenommen, ein Verlag möchte seinen Besuchern einen Ajaxbasierten Katalog anbieten. Unter anderem soll der Nutzer eine
ISBN-Nummer angeben können. Die ISBN-Nummer wird über
ein EIngabefeld eingegeben. Die Details zum jeweiligen Buch
sollen direkt aus der Datenbank ausgelesen und präsentiert werden, ohne die Seite neu laden zu müssen. Unter dem Eingabefeld soll nach dem Auslesevorgang eine Tabelle tab1 elldetaf I s
erscheinen, in der die ISBN-Nummer, der Buchtitel, der Name
des Autors , eine Besch reibung des Buches sowie sein Preis angezeigt werden. Den HTML-Code fur die Vorschau soll das Skript
innerhalb des Containers vorschau anzeigen.

_ . -- ......

~_

....

.. Abbi ldung 11.16

Eine mögliche tabellarische
Ansicht der Vorschau eines
Buches

Ecli'toriol Reviews

r_L.. . ., _"'_li........... <-......,... ....
In._
. . . . . ............
1)0 . . . . _

.... - . , .. _

, _ _. . . _

._
...._ ....,... .... _ "...-1)'_ .....
.
• ""' .....n ....-04fI .... ""' . . .... _ ..... _
.... '"
.... _

•• Ip/>IMII .. _

..MI\'_,...•

.. Iho loyuoI ..... _

~ .................. 1001II """ - . ....
.,.. ~

~...."

"'l)'Pt_

<bOdy )
<d1v ld-' wrapper ' )
<h2 ) I SBN - Kata log < Ih2 )
<form actlon- ' processlng.php ' method~ ' post ' )
<dlv class- " contact l e ft" )
<labe l for- ' I SB N' ) ISBN: </label>
</ dlv )
<dlv class- ' con ta ctrlght ' )
M
<Input name- " I SBN " ld-"ISBN" class-"passlve
slze- ' 30 ' maxlength- ' SO ' value- " type- ' text , I)
</d1v)
<dfv fd_Mfnfo M c l ass-*fnv l sfble M)

.. list ing 11.1
Das XHTML-Grundgerust

<table surrrnary·' Oaten zu einer ISBN-Nummer '
ld- Mdetaf I s M>
<c aptlon >Vorschau des Buches zu einer ISBN-Nummer
</captlon )
<thead>
<th >I SBN</th)
<th ) Aut or< I t h>

'1.3 Architektur von Ajax

I 679

<th ) Buchtitel </th )
<th)Prel s ( EUR )</ th )
</ t head )
<tb ody)
<tr )
<t d id- " 1sbnnum " )</ td)
<td ld- " auto r" )</ td )
<td ld" " bucht1tel " )</ td )
<td 1d-" prel s" )</ td )

<I t r)
</ tbody)
</ table )
<d1v ld-" prevlew " t1tle- " Vorschautext " )
</d i v)
</ d1

v)

G div )
<dlv class-" contactleft " )
<label f or - "Feedbac k" ) RO c kmeldung: </l abel>
</d iv )
<d 1v cl as s- " con t ac tri gh t " )
<textarea name- "Feedback " fd- " Feedback " cols" " 3S "
r ows- HBH)</ textarea )
</d iv )
<div class- " contactleft" )
<label f o r .. "Emal1">Emal1: </ l abel)
</ dlv )
<d1v clas s- " co nta c trlght " )
<1nput name- " Ema i 1" i d- " Emai 1" s i ze-" 30 " max
leng t h-HSO " value-" " type-" t ex t " I)
</ dfv )
<dlv cla ss- " co nta c trlght " )
<input name- " s ubmit " value- " Ab senden! " id- " subm "
type- " submi t " I>
G div )
</ dlv )
<I f orm)
</ body )
Das Serverskrip t soll automatisch übe rprüfen, ob eine ISBNNummer gül t ig ist. Sollte dies der Fall sein, so soll das Skript den
dazugehörigen Buchautor, den TItel, den Preis sowie den HTMLCode der Vorschau aus einer Dat enbank auslesen und direkt
anzeigen. Das Skript liefert die Ant wort in Form eines Strings
zurück; die einzelnen Einträge sind durch das Pipe-Zeich en voneinander getrennt (I).
680

I

11

Ajax

Da die Felder im Info block sowie der Vorschau-Block vor der
Eingabe der ISBN-Nummer leer sind, ist es vernünftig, sie beim
ladevorgang der Seite zuerst auszublenden und erst bei Bedarf
mit ausgelesenen Daten anzuzeigen. Um dies zu erreichen, können zwei zusätzliche Klassen eingeführt werden: f nv f s f b I e f
display: none: J und visible I display: block: 1.
Ursprünglich wird der Container ni nfo die f nv f s f b1 e· Eigenschaft der Klasse invf sible übernehmen. Die Ajax-Engine wird
dem Container bei Bedarf (nach einem entsprechenden Event)
die fnvfsf ble-Eigenschaft vorschreiben. Konsequenterweise
wird der Block angezeigt. Somit wird im oberen Code Folgendes

I

... Abbildung 11.17
Der _passive. Zustand

stehen:
<! - Vorschau·Block •• )
<dfv fd- ' fnfo ' c las s- " fnvisible ' )
Um den Nutzer über die fehlerhafte Eingabe der ISBN-Nummer
direkt zu informieren, ist eine Unterscheidung nach drei möglichen Zuständen notwendig.
Der .passive. Zustand soU dem Zust and vor der Eingabe der
Daten entsprechen (wi rd in neutraler heUer Farbe gestaltet).
Konnte das Serverskript die Eingabe teilweise (eins oder mehrere
Zeichen) oder komplett verifizieren, so wird der Zustand .. verilied . erkannt (grüne Farbe). Wurde vom Serverskript eine fehlerhafte Eingabe festgestellt, wi rd de r Zustand .. failed . erkannt (rote
Farbe) (vgl. Abbildungen 11.17-11.19).
Zu jedem Zustand wird eine entsprechende Klasse erzeugt.
Der Wechsel zwischen den Zuständen wird durch einen Wechsel
zwischen den verwendeten Klassen gewährleistet. Demzufolge
wird das ISBN-E ingabefeld im Markup wie folgt angegeben:

,

'

... Abbildung 11.18
Der Zustand »verified•. Die
Angabe ist so weit korrekt.

ItH l

,,."

•

... Abbildung 11.19
Der Zustand _fail ed •. Die Angabe
Ist fals ch.

<f nput name- ' I SBN' ld-' I SBN" s 1ze- " 30 ' maxlength-" SO "
value-" " type-"text " class-" passlve " />

EI

Erz eug ung ei n es XHR.Objekts

Zwar ist die XHR-Schnittstelle in modernen Browsern vollständig
integriert, allerdings wird sie wird von den BrCMfsern unterschiedlich Implementiert. Grundsätzlich wird ein XHR-Objekt Gm Bei·
spiel request) in einschlägigen BrCMfsern (Mozilla, Opera, Internet Expl orer ab Version 7) über die JavaScript-Anweisung
var request - new XMlHttpRequest():

HINWEIS

Beachlen Sie bitte, dass im Unterschied zu anderen Programmiersprachen In JavaSc::ript bei
der Benennung von Variablen
kein Datentyp angegeben wird .
So wird anstelle von XHLHllpRe ·
quest request .. new XHLHttpRequest ( )
die Angabe var request .. new
XMLHttpRequest ( ) benutzt.

11.)

Architektur von AJax

I

681

generiert. Diese sol lte auch in zu künftigen Browsern genügen.
Bei älteren Versionen des Internet Explorers ist d er Zugriff auf die
API nur über die Acti veX-Objekttypen Msx mI2.XMLHTIP oder
Mi crosoft.XMLHTIP möglich.
Vi\r

reque st - new ActiveXObject( "Msxm 12 .XHLHTTP " ) :

oder
var reque st - new ActiveX Object( "Mfcroso f t,X MLHTTP " ) :

----~----J

[ J;

.. Abbildung

1t.20

Error-Handling mit dem Try Ca Ich-Konstrukt im Internet
Explorer. Ohne spezielle Kon-

slruktoren kann der Internet
Explorer kei n XMl HttpRequestObjekt erzeugen.

TIPP

Al t ernativ können Sie den oberen Ouellcode In eine Methode

verlagern. die am Anfang des
AufbalNorgangs aufgerufen und
anschließend \Ion Methoden
Ihrer Anwendung benutz t wird.
Zum Beispiel wie folgt:

var requesl - false ;
fu nct10n lnHRE'!quest ( ) I

t ry I
request - new XMLHt t pRe quest():

lnHRequest () :
f une t Ion emaIlCheck I

In1tRequesl ( ) :
.. . welte r e Anweisungen . ..

I

682

I

11

Ajax

Um sicherzust ellen , dass säm tli che moderne 8rowse r das XHRObjekt tatsächlich erzeugen, kann man das Try-Catch-Konst rukt
der Skri ptsprache nutzen und dam it alle au ft retend en Fälle abfangen. Dies wird in der Prax is meistens mithilfe des Quelkodes
auch im nachfolgenden List ing st illschweigend gemacht.
<sc rl pt 1 anguage-" Javaseript " type-"t extl javascript ")
var r eque st - fal se ;
try (
request - new XMLHttp RequestO :
ca t ch ( msxm12fallure) I
try (
reque st - new Acti veXObjec t ( "Msxm12 .XMLHTTP " ) :
catch ( msf a11ure) {
t ry (
reque st - new ActiveXObJect ("Mi croso ft.
XMLH TTP ' ) ;
ca t ch ( fa1lure ) {
request - fal se;

1f ( ! req ues t )
alert("Your browser doesn ' t support
XMLH ttpRequest! Pl ease update your browser. " ) ;
</sc ript )
Im Code wird request zunächst auf f al se gesetzt . Anschließend wird versucht, ein XHR-Objekt auf konventionelle Weise
zu erzeugen. Sollte die Anweisung fehlschlagen, werden die im
Internet Explorer integrierten Met hoden ausprobiert. Liefern
auch sie kein vernünfti ges Ergebnis, wird dem Nutzer eine entsprechende Fehlermeldung angezeigt.

I

Sorgen Sie bei Ihren Ajax-Anwendungen bitte immer dafür, dass
die XHR-Oberprüfung noch vor der Eingabe von Daten aufgerufen wird, damit Nutzer nicht erst am Ende der Eingabe feststellen
müssen, dass ihr Browser die XMlHttpRequest-Schnittstelie nicht
unterstützt.

11

Erzeugen, Versenden und Behandeln von Anfragen
liegt ein XMlHttpRequest-Objekt vor, so stellt sich die Frage,
wie die Kommunikation zwischen dem Server und dem elient
ablaufen soll . Zu diesem Zweck können Methoden und Attribute
velWendet werden, die durch das XHR-Objekt und das Document Object Model (DOM) bereitgestellt werden.

D

Au swählen relevanter Parameter
Zuerst sollten Sie sich genau überlegen, welche Daten (Parameter) für Jede der velWendeten Methoden relevant sind, damit
entsprechende Anfragen konstruiert und an den Server geschickt
werden können. Nicht jede Eingabe der Nutzer muss unbedingt
asynchron sein oder überh aupt behandelt werden. So ist es beispielsweise nicht sinnvoll, während der Eingabe einer E-MailAdresse deren Korrektheit zu überprüfen. Dies ist erst dann sinnvoll. wenn die Angabe der Adresse abgeschlossen ist.
In üblichen Formularen werden die relevanten Parameter
meistens Eingabefelder sein; bei Tabellen werden dies die Zeilen
und Spalten sein. Bei komplexen Strukturen können dies beliebige Werte und Objekte sein, die etwa von weiteren Funktionen
übermittelt werden.
Im Beispiel wird man auf das Eingabefeld ; nputU ISBN zugreifen
müssen. Sein Inhalt soll von zwei Methoden verwendet werden:
Eine Methode, welche die ISBN-Angabe Zeichen für Zeichen liest
und diese auf Validität überprüft (getFetchedlnput() ), sowie
eine Methode, die zu einer abgeschlossenen ISB N-Angabe Seitenelemente d I v/ll nfo, tdl!i sbnnu m, td/laut or, td fJbucht Hel,
tdl/prels, dfvflvorschau dynamisch mit Inhalten speist (getComplete lnput{ ) ). Beide Methoden stellen in diesem Fall den
Kern der Ajax-Engine dar. Ober sie wird der Datenaustausch, die
Kontrolle der angegebenen Daten sowie die Manipulation der
Seitenelemente geschehen.

D

Zugriff auf Inhalte von Seitenelementen mit DOM
Zum Zugriff auf Inhalte der Eingabefelder wird bei der AjaxAnwendung die Baumstruktur der HTMl-Dokumen te, genauer
das Document Object Model, zugrunde gelegt.

'1.3

Architektur von Ajax I 683

HINWEIS

Im Zusammenhang mit dem Doc ument Object Model kann die
(X)HTMl-Seltenstruktur als ein
Objekt veranschaulicht werden,
mit dessen Methoden auf Elemente (HTMl-Fall) bzw, Knoten
des Strukturbaums (XMl-FaJl)
zugegriffen und ihre Inhalte gelesen werden können.
Eine ausführliche übersicht über
alle DOM-Methoden und DOMAttribute zur Manipulation der
Seitenstruktur finden Sie auf
http://www.howtoaeate.(o.ukl
tut orlalsljavaSCflptl dom strud ure
(Unkeode 457) .

TIPP
Eine ausführliche Übersicht
über alle in der SpeZifikation
von DOM level 2 (aktueller
Standard) verfügbaren DOMEvents finden Sie unter http://
en. Wlklpedla.or&IW' kll
DOM_ Events (linkeode 458).

Am häufigsten werden dabei folgende Me thoden verwendet :
• getElementByld ( ' elemenC1d')
Liefert die Referenz auf ei n Element mit dem Bezeichner el ement_id.
• getElementByTagName ( ' element_name ' )
Liefert die liste der Referenzen auf alle Elemente mit dem Tag
element_name.
• setAttrlbute ( ' attribute ' ' value')
Fügt ein Attribut attri bu te mit dem Wert va 1ue in den Knoten des Elements hinzu,
Hinzu kommen die Attribute:
•

class Name
legt den Namen der Klasse fes t, zu der ein Seitenelement
gehört,

•

value
Wert eines Seit enelements; übficherweise der Wert eines Eingabefeldes

•

i nnerHTMl
l egt den Wert eines Seitenelements (Knotens) fest. Wird

dieser Wert bei einem Element verändert, so ve rändert sich
automatisch seine Darstellung im Browser.
Tritt im XHTMl-Code etwa das Eingabefeld
<input type-"text" name- "I SB N" ld-" I SBN" />
auf, so kann man den Inhalt des Eingabefeldes mi ttels

HINWEIS

DOM-Events stellen die notwendige Voraussetzung für
automatisierte Anfragen bereit.
Sie ermÖßlic hen den Zugriff
auf Inhalte und Aufrufe v o n
JavaScript-Methoden.

Abbildung " .21"
Mit DOM kann man auf Seitenelemente zL@reifen.Mit alertO lasst
sich ihr Inhalt ausgeben. docu-

me nt.get Eie mentByld(_ISB N«)
.value im Einsatz.

684

I

l'

Ajax

var 1nput I SB N - document. getEl ementByld( ' I SB N" )
.value:

;=l

der JavaScript-Variable 1npu t I SBN zuweisen. Beachten Sie, dass
der In halt des Eingabefeldes ISBN nicht an ein Serverskript übergeben werden muss ; er wird dynamisch beim Eintippen von
Daten verändert.

~, ~_13Il3 45

a

I

Behandlun g d er Nutzerinteraktionen mit DOM -Eve nts

Die Rückkopplung zwischen dem Online-Formular und den
JavaScript-Methoden geschieht bei Ajax-Anwendungen über die
sogenannten DOM-Events. Darunter versteht man die Eigenschaft von Seitenelementen, JavaScript-Funktionen bei gewissen
Akti onen (Events) des Benutzers automatisch aufzurufen und die
Interaktion auf diese Weise _on the fit« zu behandeln.
... Abbildung 1"\.22
ISBN

_

'

_.R<.."._....'.. .._
_~

•
Bei Online-Formularen kann man etwa mit der Festlegung des
Wertes onChange eine JavaScript-Funkti on festlegen, die automa"
tisch aufgerufen wird, sobald der Anwender vom einem Eingabefeld zum nächsten Eingabefeld wechselt. Ein anderes praktisches
Beispiel: Mit onKeyDown können Sie die Methode bestimmen, die
aufgerufen werden soll, wenn der Nutzer beim Ausfüllen eines
Eingabefeldes eine Taste gedrückt hat.
Der veränderte Inhalt der Eingabefelder lässt sich mit DOMEvent-Handlern abgreifen und kann direkt für die Konstruktion
von Anfragen velWendet werden. Betrachten Sie dazu den folgenden Quelleode:
<input

name"'~ISBN ·

fd- " I SBW

oncha nge- " getCompl ete J nput( ) ; - c la ss- "pass 1ve "
onkeydown- " getfetchedlnput();" slze-" 30 " maxlength- " SO · value- "· type-' text ' I>
Das entsprechende JavaScript:
functfon getfetched l nput <)
var lnputISBN - doc ument.getElementByld { "I SBW ).
va 1ue;
var Query - " / home / htdocs/va lfdatf on/check I SBN. i>
php?lnput- "

+

escape(input I SBN ) :

11 . _.Versenden der Anfrage ...
11 ... Behandlung der Serverantwort •..

Wechselt ein Anwender von
einem Feld 2um anderen, so wird
automatisch eine InfobOK eingeblendet (dafur sorgt das A ttribut .onChange«). Die Daten werden geladen , während der Nutzer
weitere Angaben macht.

TIPP

Ein Seltenelement kann mit
beliebig vielen DOM-EventHandlem versehen werden.
Diese können bei passenden
Interaktionen die jeweilige JavaScrlpt-Funktionen automatisch
aufrufen, etwa mit :
<1nput type-"text"
name· · cda ta'
onKeyDown· "getrelched Inpul( ):"
onChange-" getCompleteInput():" ld-"ellal1"/>
Für ein einfaches Beispiel ist
dieser Ansatz geeignet, da er die
JavaScrlpt-lnteraktlon anschaulich darstellt. In der Prax is sollten
solche Inline·Deklarationen
jedoch unbedingt vermieden
w@rden.

J
Tritt schon bei der Eingabe eine inkorrekte Zeichenfolge (etwa
deutsche Umlaute) auf, etwa eine fehlerhafte Zahlenfolge, so
kann der Nutzer direkt darauf aufmerksam gemacht werden,
11.3

Architektur von Ajax

I

685

auch wenn die Angabe noch nicht abgeschlossen ist. Dies kann
mit der Methode getFetched l nput () geschehen, die nach dem
Ein t ippen jedes einzelnen Zeichens im Eingabefeld I SB Neine en tsprechende Anfrage konstruiert und versendet. Wird die ISBNNummer im Eingabefeld I SBNvollst ändig angegeben (13 oder 10
Zeichen) oder ist der Nutzer zum nächsten Eingabefeld gesprungen, so wird durch getFetched l nputO sichergestellt, dass die
Angabe korrekt ist.
functfon getCompletelnput( )
var inputI SBN - document.getElemen t By l d("lSB W ) .
val ue:
var query - " queryISB N.php?input- " +
escape(inp utI SBN) :
11 ... Versenden der Anfrage . . .
11 ... Behandlung der Se rverantwort ...

~

I
Um die Details zur Angabe aus der Datenbank auszulesen, wird
anschließend die Methode getCompl ete I nput() automatisch

TIPP

Ein bekanntes DOM~Event Ist
zum Beispiel die onMouseOutEigenschaft , die frOher mithilfe
von JavaScript zur Erzeugung
des Hover-Effekts für Bilder
verwendet wurde , Eine fte~ible
moderne LOsung wird durch (SS
Sprites realisiert.

aufge rufen. Die escape { )-Methode sorgt im Beispiel dafUr, dass
Zeichen, die nicht direkt übergeben werden können (etwa Leerzeichen), entsprechend codiert werden (120). Somit wird sichergestellt , dass keine Informationen verlorengehen.
Die Skriptaufrufe haben die übliche Ges talt wie beim konventionellen, synchronen Modell. Ein PHP-Skript kann seine Parameter etwa wie gewohnt über
proce 55 • Php ?que r 'y 1-va 1ue 1&q uer y2-v al ue2 ...
erhalten (GET-Methode). Die Anfragen werden durch & voneinander getrennt.

a

Festlegen der Adresse der Servers kripte
Im oberen Beispiel wurde die Adresse des Serverskripts, an das
ReQuests geschickt werden sollen, lokal festgelegt. Dies hat einen
guten Grund : Die Implementierung von XHR sieht vor, dass eine
Anfrage nur an lok ale Serverskripte gerichtet werden darf - also
Skript e, die sich auf dem gle ichen Server wie die Ajax-Anwendung befinden. Dabei können eine absolute, eine relative sowie
die URL-Adresse angegeben werden.

686

I

11

AjdJ(

I

11

Übermitteln der Anfragen
Das Versenden von Anfragen geschieht mithilfe der Methode

open () des erzeugten XHR-O bjekts . Im obigen Beispiel ließe sich
die Anfrage etwa wie folgt an das Serverskript übermitteln:
<s cr 1pt 1an gua ge- ' Ja va sc r 1pt ' t ype-' tex t l j av asc r 1pt ' )
var request - fal se;
11
... Versuche. e1n XHR- ObJekt zu erzeugen ...
functl on getFetc hed l nput () I
var lnputl SBN - document . getElementByl d( ' I SBN" ) .
value;
var urlOuery - ' / home / htd ocs/valldatl on/c he ckl SBN.
php?lnput-" + escape ( lnput I SBN ) ;
request .ope n(»G ET«, url Ouery . true);
reque st. send(nu l l);
1I . . . Behandlung der Serverantwort ...

,

</sc ript>
Dadurch wird eine Anfrage initialisiert. Sie soll mittels der GETMethode, also durch eine Parameterubergabe in der URL-Adresse,
erfolgen und asynchron sein . Die send ( ) -Meth ode verschi ckt die
Daten an das Serverskript. Sollten Daten uber die POST-Methode
versandt werden, so wären die j elNeiligen Parameter in dieser
Methode aufgel istet.

IJ

Behandeln der Serverantworten

Ist eine Anfrage gestellt und an den Server verschickt worden, so
wird die Behandlung mithilfe von Attributen des XHR-Objekts
realisiert . Besonde re Bedeutung kommt dabei dem Attribut
onready s tate change zu . Dieses legt die Meth ode fest, die bei
einer VerändenJlig des Zustands der Anfrage automatisch aufgerufen wird. Soll etwa eine Funktion update I SBNFleld () dafür
sorgen, dass in Abhängigkeit von der Antwort des Serve rs das
ISBN-Feld entsprechend markiert wird, so wird dies folgendermaßen sichergestellt:
functf on getFet chedlnput ()
var lnputl SBN - document.getElementByld ( ' l sbn ' ) .
va 1ue;
var ur 1Quer y .. ' / horne I htd ocs I va 1 f dat 1on I chec k I SBN.
php 11 nput_ + esc ape ( inputl SBN ) ;
reque st.open ( ' GET ' . urlQuery. true ) ;
request .onreadystatechange" updateISBNFleld;
request . send( null ) ;
R

"-3 Architektur von Ajax

I

687

ready State-Zustand
Un tersc hiedliche Browser weisen einer Anfrage die Zustände
un terschied lich zu. Un ter Umstände n überspringt ein Browser
d ie Zustande 1 und 2 und bleibt
im Zustand 3. Erfreulicherweise
wird bei allen Browsern der
Zustand 4 AhnIich und korrekt
zuge wiesen.

fun ct i on upda t eI SBNField () (
11 . . . I SBN-Feld ak tuali sieren . . .

I

Da jedoch eine Anfrage sich während ihrer Bearbeitung in den
Zuständen 0 bis 4 befinden kann, w ird die Funktion - so wie
sie oben steht - meh rmals aufgerufen, obw ohl der Server noch
keine An twort zurü ckgeliefert hat. Um dies zu verhindern, ist
eine Fallunt erschei d ung notwendig:
functi on upda t eI SBNF ield () {
ff ( reque st . read.y State - 4)
if ( reque st. statu s - 200 )

I
11

... I SBN·Feld aktuali sieren ...

I

I
Demna ch wird das ISBN-Feld nu r dann aktualisiert, wenn der
Server die Anfrage komplett abgearbeitet (reque s t.ready s ta t e - 4) und den St atus »OK.: zurückgeliefert hat (request .
sta tus - 200). Die Methode get Comple t e l npu t () wird analog
konstruiert:
fun ctl on get Co mplete ln put ()
"ar lnput l SBN - doc umen t. getE lemen t By l d ( " I SBN" ) .

~

"alue:
"ar url Query - " qu ery I SBN.php?input-" + ~
esc ape ( input I SBN1:
reque st . open ( " GEl". u r l Que r y . tr ue l :
reque st . onready st at echange - updat ePreview:
r eques t. send ( nu l l ) :

I

im

Dyna mische Aktua lisi er ung von Seitenelem ent en
Für die Akt ualisierung von Sei tenelementen müssen Serverantworten entweder in der Gestalt eines St rings (Attribut re sponseText ) oder eines XML-Dokument s (res ponseXMl) interpreti ert
werden. Im Beispie l wi rd die String-Übergabe verwende t . Die
einzelnen Einträge werden durch das Pipe-Zei chen (I> voneinander getrennt . Der Eintrag selbst wird in der Varia blen response-

688

I

11

Ajax

I

Text gespeichert. Dabei nehmen wir hier an, dass das PHP-Skript
auf eine AnfraBe immer eine korrekte Zeichenfolge gevv-unschter
Gestalt liefert. Ist die ISBN-N ummer korrekt, so wird true gel iefert, andernfalls f,) 1se.
IS8111

_

'

-------

•

<
<\11 Abbildung 11.2]
request .response Tex t nach dem
Laden der Informationen mittels
eines PH P-Skrlpts

CE]

functlon updateI SB NFfeld () I
1f (request.readyState - 4 )
ff ( reque st.status - 200)
va r response - reque st. responseText:
1f (response -- true) I
document.getElementByld( OI SB N° ) .className 'verfffed' :

+>

else
document.getElementByld ( OI SB N° ) .className 'fafled':

+'

I

I

Ist die ISBN-Angabe korrekt, so wi rd di vIIISB N mi t den Eigenschaften der Klasse verf ffed gestaltet, andernfalls mit denen der
Klasse falled.
Betrachten Sie nun die folgende Implementierung der Methode
updatePrevlew ( ):
function updatePrevfew () I
1f (request.readyState - 4 )
lf (request.status - 200)

I
11 Das Server skrlpt 1 fefert die Daten aus der
11 Datenbank , getrennt durch das Pipe' Zeichen
11 zurOck: dfe efnzelnen Eintrage werden
11.3

Architektur von Ajax

I 689

11 mit der split( ' separator ' )- Methode im Array
11 re sponse abgelegt,
var response - request,responseText,sp l it{ OI O) :
11 Die Daten werden vom Array innerhalb der
11 jeweil igen Seitenelemente mithi 1 fe des

11 innerHTML-Attributs gespeichert,
doc ument.getElementByld ( " isbnnum").

~

innerHTML - response[O]:
document. getE1 ementById ( " autor") . i nnerH TML response(l) :
docu ment. getElementBy l d( " buchti t el " ) .

~

~

innerHTML - response[2]:
document. getE1ementByld( "pr e1 s" ). i nnerH TML -

~

response[3) :
document, getElementByld( · vorsc hau · ). ~
fnnerHTML - r esponse [4];
11 Die Klasse des div -Blocks I!info wird auf ' visible'
11 gesetzt ,

11 der Inhalt des Blocks soll angezeigt werden.
document.getElementByld( " info " ) . class Name 'visib l e' :

:P

J

Abbildu ng 11,2 4 ~
Gestaltung des Kontaktformulars
mit (55: Vor der Anfrage

ID

Benut zerfre undliche Gest altung de r Int eraktion

Da Ajax-basierte Anwendungen eine Interaktivität anbieten, die
eher ungewöhnlich ist, ist es w ichtig, die interaktiven Merkmale einer Anwendung deutlich kennt/ich zu machen. Explizite
Anmerkungen zur Funktionsweise der Anwendung sind deshalb
genauso hilfreich w ie deutliche visuelle Hinwei se. Ein typischer
Hinwei s au f die Interaktivitat wird in der Praxis durch Aktivitatsin-

690

I

11

Ajax

I

dikatoren erzielt. Darunter versteht man animierte GIF-Bilde r, die
den Vorgang symbolisieren sollen. Gena uso wie bei Desktop-

Anwendungen sollen sie dem Benutzer mitteilen, dass Daten
gerade nachgeladen werden.
Bei der Implementierung von Indikatoren müssen Sie beachten, an welcher Stelle diese im Ajax-Code auftauchen , Im Grunde
genommen stellen sie Platzhalter für die eigentlichen Daten dar,
die in den Feldern nach dem Ladevorgang durch nachgeladene
Daten ersetzt werden sollen. In diesem Sinne sollten sie auch nur
dann angezeigt werden, wenn die dazugehörigen Daten tatsächlich im Hintergrund nachgeladen wurden.
Im Beispiel ist es etwa sinnvoll, Indikatoren erst nach der vollständigen Eir,gabe der ISBN-Nummer anzuzeigen. Und zwar in
td/lf sbnn um, td/Jautor sowie in di vI/vorschau, fOr die Inhal te
im Hint ergrund nachgeladen werden, Demzufolge werden diese
Elemente in der spez iellen Methode se tupPrevf ew() mit HTMLCode von Vorschaubildern gespeist und so lange angezeigt, bis
die Daten geladen sind . Beachten Sie bitte, dass dies die Stelle ist,
an der d1 vl!1nf o für Nutzer zum ersten Mal in Erscheinung tritt.
Ist der Nachladevorgang abgeschlossen, so wird der temporäre
Quellcode automatisch durch den . richtigen « Inhalt ersetzt . Dies
geschieht mithilfe der Methode upda tePrev1 ew ( ) ,
funet10n getComplete lnput ( ) (
var fnputl SBN - document.getElementByld( " ISBN " ) ,
va 1ue;
var ur l Ouery .. 8queryI S BN,php?input- ~ + ~

+>

es eape ( lnputI SBN ) ;
se tupPr evlew() ;
request.open ( " GEI " , urlOuery , true);
request,onreadystateehange" updatePreview;
reque st, send (null);
J

funetfon setupPrevfew( )
11 Detalls zur I SBN,Nummer ( Daten In der Tabelle)
11 werden mit ei nem tempora ren Preloader versehen
do cument.getElementBy l d( " l sbnnum " ) .innerHTMl - +>

' ( lmg sre- \ "prel oadlng.g1f \ " wfdth-\ " 16 \ "
he1ght-\ " 16 \ " alt-\ "Preloadlng \ " ~
tftle-\ 8Prel oadlng \ ~ /) ';

~

11 '" Anal og fOr alle E1ngabefelder
doe ument. getEl ementBy Id ( ~ pref s ~ ) . i nnerHTMl ..

' ( lmg src-\ "preloadfng,g1f\ " wfdth-\ " 16 \ "
helght-\ 16\ - alt- \ -Preloadlng \ 8 ~

+>

~

ft

tftle-\ "Prel oadfng \ "

I) ';

11.)

Architektur von AJax

I

691

11 Der Info block wird eingeblendet
document.getElementByld ( "info M) . c lass Name -;p
.... Abbildung 11.25
Oie Daten werden vom Server
geladen.

' visib l e ' :

I
.---;

-~

I SBN

1178-088 17111327

---

.

-

-

_ ,~

n... El"",..nI.. d Typogo"f'hicaI 51)11..

A. Bnnghlnt

211 .115

The Elemeot, Qf TypOgraphk: Styie (Paperbtck)
bV RobW 8nnsj unl (Aullu)
_

" .. Mr..,.' ......",

Editorial RevieWS
F""" l lbnlry .... u ....

In. _lAlIOn .... DI><M_ ,M. n.. «nulO.

po~

,M

~

"' ........ " _ ' 1110 1It ,,~ OIn::IM<:l.al~ n .. ><IOI' OIf)'114

I HI. "

r<>Olrl<l...... ~gInI .•11<1 LlIiMt. A gIO"'", ....... ' 01 ...

.........

"pl""~ ~ "

•••••.,.. ..,.,...OfP.II...

~_n

w..,fL r« ...1I9f. .,a pt •.• n4 100. . " iMOlOCO<IIIOI. 01
.,.,. lItolgo>M .. ,,,,'. ..... ,~ uni __• ,..0 "'.,. .............. ~
m..'Y_por..,. ~
• "'" 1 1

Abbildung 11.26 ..
Die Vorschau nach dem laden der
Daten vom Server

Rückmeldung

m

Zusammenfassung

Abgesehen von einer zusätzlichen Fehlerbehandlung ist das
Grundgerüst des Beispiels an dieser St elle bereits komplett . Was
übrig bleibt , ist eine ansprechende visuelle Darstellung des Formulars. Diese wird mit gewöhnlichen (S5-Deklara tionen realisiert. _

11.4
Das Attribut der Anwendung.
Webtechnologien nach dem PrinZip Progressive Enhan(ement, also
in voneinander unabhangigen
Schichten modular einzusetzen
(vg!. Abschnitt 10.1), zählt unter
arderem zu guten Praktiken beim
profeSSionellen Umgang mit
JavaScript.

Unobtrusive JavaScript

Das obere Beispiel zeigt zwar einen durchaus t auglichen Program mieramatz, erweist sich jedoch in der Praxis als rech t aufwendig
und zeit intensiv. Bei größeren Projekten en tstehen schnell lange
JavaScripts, bei denen der gezeigte Umgang mit HTML-Elementen
mittels DOM (etwa document .getEI ementByl 0 ( " my I 0" » weder
intuitiv noch effektiv ist. Insbesondere widerspricht die Integrat ion von Java5cript-Ausdrücken in HTM l -Markup, etwa

<i nput

name-" I SB tr' id- " ISB N"

onchange- "getCompletelnput () ; " type-· text " I>

dem Gedanken der strikten Trennung zwischen der Seit enst rukt ur «X)HTML Mark up), der Darstellung «(55) und dem Verhalten (Java5cript). Durch die Ver mischung dieser dre i Schich ten

692

I

11

Ajax

I

erhöhen sich die Kosten und der Zeitaufwand bei der Pflege
der Anwendung. Mit anderen Worten: Um Ihre Internetpräsenz
zukunftssicher und ausbaufähig zu machen, mussen Sie strikt
zwischen der Struktur, der Darstellung und dem Verhalten der
Seite unterscheiden. Diese Vorgehensvveise ist ein wesentlicher
Schri tt in Richtung interaktiver, robuster und »unaufdringlicher«
(unobtrusive) Ajax-Anwendungen. Die letzt ere Eigenschaft ist
im Web 2.0 ein wesentliches Merkmal einer professionellen
Webapplikation.
Es folgen nun einige Grundsätze zur JavaScript- Programmie·
rung.

11.4 .1 Keine Annahmen machen
Machen Sie keine Annahmen über die Nutzer und Daten, mit
denen Ihre Anwendung zu t un haben wird. Eine robuste Sei te
kann auch ohne JavaScript-Unt erstützung vollst ändig funktionieren. JavaScript dient lediglich dazu, die bestehende Funktional ität zu verbessern. Sie sollten sich jedoch nicht darauf verlassen,
dass es immer ausgefUhrt werden kann.
Gehen Sie nicht davon aus, dass eine Methode oder gewisse
Att ribute von jedem Browser korrekt implementiert werden.
Nehmen Sie nicht an, dass Daten stets korrekt ubermittelt werden. Machen Sie keine Annahmen uber den Browser, die Bild schirmaufl ösung oder das Syst em der Besucher Ihrer Seite . Sprechen Sie diese konkret an und fangen Sie kritische Falle ab. Im
Klartext heißt dies: Fal ls Sie etwas auf ein Element anwenden
wollen, so testen Sie zuerst, ob das Element verfügbar ist und
korrekt dargestellt ist.
So empfiehlt es sich etwa, vor der Ausfuhrung einer Funktion immer zu testen, ob DOM-Objekte die gewunschten Eigenschaften erfüllen. Zum Beispiel, ob ein selektiertes HTMl-EJement überhaupt exist iert, oder ein Übergabewert, der eigentlich
nicht leer sein sollte, in der Tat ungleich null ist. So sollten Sie
statt

TIPP

Diese Richtlinien orientieren
sich zum Teil an Prinzipien, die
Christlan Hellmann in seinem
Beitrag :o Seven Rules Of Unobtrusive JavaScrlpt« (http://icant.

ukl artlcle,>l5even-rules-ofunobtruSive-javasulpt/ linkeode

(0 .

459) zusammengefasst hat .

var a - document.getElementByld( "b " ):
var c - a.getElementsByTagName('· span " ) ;
besser die Variante

var a - document.getElementByld( "b " ):
// Auf keine Eigenschaften eines unbekannten
11 Objekts zugreifen
if (a) I

11-4 Unobtrusive JavaScript

I 693

var c - a.getElementsByTag tlame( " span " );

In die5em Sinne e~tell t man in
der Seitengestaltung zuerst die
(X)HTML-St ruk tur der Seite mit
einem semantischen Markup und
optimiert diese. Anschließend
wird das Markup mi thilfe von CSS
gestaltet. Slimtliche Anweisungen
werde n in ein separates Stylesheet ausgelagert. Schließlich fugt
man der Seite JavaScript- Erweiterungen hinzu, um eine bessere
Interaktivit<!.t zu ermöglichen. Vor
dem Release findet dann das sogenannte Re/ac/orlng statt, bei
dem sämtliche Schichten optimiert werden.

verwenden, um problema tische Fälle besser abzufangen.
Testen Sie ebenfalls, ob ein externer (X)HTMl-, XMl- oder
JSON-I nput korrekt ist und zu keinen gravierenden Verarbeit ungsproblemen führt.
Sie müssen davon ausgehen, dass mehrere JavaScript -Funkt ionen in Konflikt miteinander geraten können. Stellen Sie sich
daher folgende Fragen: Sind alle Ausnahmesituationen abgefangen? Können fehlerhafte Daten von einer Fun ktion zu einer anderen weitergelei tet werden? Können die weitergeleiteten Daten
fehlerhafte Einträge in der Datenbank verursachen? In JavaScriptObjekte eingekapselte, strikt voneinander getrennte Funktionen
und Variablen (Methoden und Eigenschaften) können diesen
Problemen effektiv vorbeugen - vorausgesetzt lOs und Klassen
werden im Markup ....ernünftig vergeben.

11.4 .2

Sauberes Markup erzeugen
Um überflüssigen Quelicode zu vermeiden und auf DOM-Ele-

mente effizient zugreifen zu können, müssen Sie sicherstellen,
dass alle HTML-Elemente vernünftig und ausreichend ausgezeichnet sind. Oft ist es hilfreich, im Voneid eine Liste zu erstellen, in der die am häufigsten gebrauchte n HTML-Elemen te aufgeführt werden. An alysieren Sie Ihr Markup mehrmals, bevor Sie
mit dem JavaScript-Code anfan gen. Überlegen Sie sich gena u,
wie Sie einen vernünftigen Kompromiss zwischen Markup und
DOM-Scripting erreichen können . Das Wandern im DOM-Baum
ist rech t aufwendig und zeitint ensi.... , wohingegen die Selektion
eines dlv-Containers anhand seiner 10 schnell und eindeutig ist.
Ein sauberes Markup enthält weder Inline-CSS-Stlle noch InlineJavaScript-Quelicode. Dies gilt auch für das HTML-Markup, das
durch DOM-Manipulationen via JavaScript generiert wird.
Dies bedeu tet beispielsweise, dass Verweise nich t die folgende
Form anneh men dürfen:

<a o nc11 ck- "Hi 1f e () " hre f - "/J " >Verwe1s</a>
Aus der Sicht der »u naufdringlichenoc Ajax-Programmierung ist es
besser,

<a h ref- " hi lfe. htlll " cl ass- h11 fe " >Verwe1 s <la)
M

zu nutzen und auf den Verweis mittels DOM-Scripting über die
Klasse hi 1 fe zuzugreifen.

694

I

11

Ajax

I

Außerdem sollte das Markup keine Elemen te enthalten, die nur
bei aktiviert er JavaScript-Unterst ützung funk tionieren. Diese
lassen sich gegebenenfalls dynamisch mittels JavaScript zum
Markup hinzufügen. Falls Ihre Anwendung Markup benötigt, das
nur dann sinnvoll ist, wenn es von JavaScript manipuliert wird, so
generieren Sie es mit JavaScript.
Das klassische Beispiel hierfür ist ein Verweis, sodass der
Anwende r die Seite ausdrucken kann.

TIPP

W ie genau eine lösung aussieht ,
erfahren Sie Im Beitrag _How
to ereat e an unobtrusr.re prin t
t his p age lin k w ith JavaScript«

(http://www. 456bereastreet.
(oml BI( hive/200709Ihow_ro_
aea te_an _unobtrus;ve-Pffn r_
thJ s-page j lnie wlth-iavascrlpt/
lInkcode 460) von Roger

<a hre f - " javascript:window,pri nt( ) ">Di ese Seite drucken</a>

Johamson.

Browser bieten keine zum JavaScript-basierten Ansatz alternative
Met hode an, mit de r Anwender eine Seite ausd rucken können.
Weist der Browser also keine JavaScript-Unterst ützung auf, so
liegt es nahe, den Verweis nicht einzublenden, da Seitenbesucher ihn sowieso nicht nutzen können. Deshalb empfiehlt es sich,
einen VelWeis auf eine Druckversion nicht direkt im (X)HTMLMarkup, sondern mit DOM via JavaScript zu realisieren.
Ein an derer Aspekt, für de n JavaScript-generiertes Markup hil freich ist, bet rifft die Benu tzerfreundlichkei t der Sei te. Soll etwa
ein nicht verlinktes Textelement als Schalter zum Einblenden bzw.
Ausblenden eines Inhaltblocks dienen, so ist es sin nvoll, diesen
mittels DOM-Script ing zu einem VelWeis zu machen. Dadurch
können auch Nutzer, die mithilfe der Tastatur navigieren, diesen
Schalter verwenden.
Sämtliche JavaSeripts werden in eine oder mehrere separate
.js-Dateien ausgelagert und unmittelbar vor dem abschließenden
</body>-Tag (nicht im Seitenkopf, sondern vor dem abschl ießenden </ body ) -Tag) mittels
<se r1pt type-" text /j ava se ript " sre- "pf ad/zur/
datei . js " )</sc r1pt >
eingebunden.
Fr<l8en Sie sich, auf welche Art und Weise Sie ein Element
mit wenigen Schritten in der DOM-Struktur erreichen können.
Macht es vielleicht Sinn, einen Elte rn-Knoten extra auszuzeichnen, um auf seine Kind-Knoten schneller zugreifen zu können?
Haben vielleicht zu viele Elemente zu viele identische Attribute,
sodass eine zusätzliche Auszei chnung hilfrei ch wäre? Entfernen
Sie alle Klassen und l Os, die Sie nicht unmittelbar verwenden
können. Vergewissern Sie sich, dass sowoh l das Markup als auch
das Stylesheet st immen.

" -4

Unobt fUsive Java$eript

I 695

11.4 .3 Alle s trenn e n , was s ich trenn en lä ss t
Je schwächer verschiedene Funktionen mit einan d er gekoppel t

TIPP
Vermeiden Sie es, C55, HTML
und JavaScript mit einande r zu
vermischen,

sind und je st rikter sie voneinan der get renn t sind, desto leichter
la ssen sie sich späte r ausbauen und modifizieren. Anstatt etwa
die Gestal t eines Eleme nts mi t DOM~Script ing via

d. ge t El emen t sBy l d( ~1 nt ro " ) [1 J. st yl e. col or- " fjcOO "
festzulegen, weisen Sie dem Element eine passende

:

CSS~Klasse

zu, die im Stylesheet entsprechend beschrieben wird, etwa
durch:

. act1ve ( colo r : f}cOO; )
d.getE l ementyBy l d( "intro " ).s tyle.className - "act1ve "
DOM~Scrip t i n g

ist ein mach t iges Werkzeug, mit dem Sie

sam t ~

li ehe Elemente im Dokument ba um beliebig modifizieren können. Die Gestaltung einer Seit e mithilfe von St ilattributen im
DOM-Bau m gehört allerdi ngs nich t dazu - überlassen Sie dies

(55.
Trennen Sie alles, was sich liberhaupt t rennen lässt. Also bei~
spielsweise sämt lic he Quellcodeblöcke, die höchstens indirekt
voneinander abhängen und auch unabhängig voneinander exi·
st ieren können. Folgen Sie diesem Prinzip, so ergeben sich die
folgenden prakt ischen Aspekt e:
... Sie wissen beim Debugging ganz gen au , wo die Gründe f ür
ein auftret endes Problem liegen können .
... Andere Entwickler benötigen kein tiefgreifendes Ve rst ändnis
all er eingesetzten Technologien und können Probleme auf
einer Ebene (Markup, Darstellu ng,Verhalten) der Seite leicht er lösen.

11.4 .4

Daten über die Umgebung nutzen

Liefert ein Browser JavaScri pt-Unterstlitzu ng mit , so erhalte n Entwickler einen umfassenden Zugriff auf viele Informationen uber
die Umgebung, in der sich der Nutze r bewegt . Un ter anderem
lassen sich die aktuelle Fenstergröße des 8rowsers sowie die Posit ion des M auszeigers abl esen. Diese Angaben kön nen Sie etw a
nutzen. um auf die Bedürfnisse der Nut zer mit kleineren Bi ldschirmauftösungen sorgfält iger einzugehen. So können Sie etwa
gewisse Seitenelemente - wie etwa W erbung - für solche Nutzer
ausblenden, um den Inhal tsbereich stärker zur Gelt ung ko mmen
zu lassen (vg!. Abbildung 11.27).

696

I

11

AjdJ(

1

2

3

11.4 .5

Quell eode revid ieren und optim ie re n
Vor der Fertigstellung der Anwendung gehen Sie schrittweise
du rch ihren Que lleode und stell en sicher, dass die Namen für
Variablen und Fu nktionen plausibel sin d und der Quetlcode
logisch aufgebaut ist . Verschlanken Sie den Quellcode, falls mög~
lieh, und versuchen Sie, die vorliegenden Abhängigkeiten zwischen den Funkt ionen zu reduzieren. Beachten Sie außerdem,
dass Stylesheet-Dateien und (X) HTMl-Dokument e in der Regel
häufiger als Java5cript s modifi ziert werden müssen. Demnach
liegt es nahe, die in JavaScripts verwendeten Klassen und lOs
nicht di rekt innerhalb der Funkt ionen zu verwenden, sondern
in ein spezielles JavaSc ript-Objekt (Conftguration Object) auszulagern (Encapsufation). Möchten andere Entwickler Änderungen
vornehmen, so genügt es, diese nur in einem Objekt vorzuneh·
men, den Rest jedoch unverändert lassen.

.. Abbildun g 11. 27
Oft Ist es hUfreich. auf Bedürfn isse
der Nutzer genauer einzugehen.
Navigationsoptionen, die über ein
Drop-DO'.'In.-Menü etwa rechts
erscheinen würden , können mit
DOM-s<:rlptlng nach links verschoben werden, wenn rec hts
nicht genug Platz vorhanden ist.
(Quelle: .Pragmatic Progressive
Enhancemenl«, hltpJllcant.
co. uklarUci es/pragmati c-progr esslve-enhancemenV)

TIPP
Insbesonde re Im Hinblick auf
die Effiz ienz von Aj ax-basiert en
Anwendungen empfiehlt es sich,
eine Anwendung so kompakt
wie möglich anzubieten und
notwendige Zusatz komponen t en
erst bel Bedarf nachzuladen.

app - funct1on(){
11 Klassen und lOs werden fn efn spez f elles
11 JavaScrfpt-Objekt ausgelagert
var conffg - I
wrapper l D: 'wrapper ' ,
vfsfbleClass: 'show '

J,
11 Der Rest der Anwendung
var nav - document.get ElementBy ld (con f ig.wr apperI Ol :

11.5

Unobtrusive JavaScript in der Praxis

Die aufgeführten Prinzipien lassen sich in der Praxis ohne zusätz·
liehe Werkzeuge nur muhsam anwenden. Abhilfe verschaffen
JavaSc:rip t·Biblfot heken UavaScript Libraries oder auch JavaScriptl
Ajax·Framt!Works genannt), die Entwickler nicht nur mit kample·
xen Strukturen leicht er arbeiten lassen, sondern auch den Code
übersichtlicher gestalten und sich selbstständig um Kompatibili·
tät sprobleme bei Browsern kümmern.
11.5

Unobt rusive JavaScript in der Praxis

I

697

I

jQuer."
..t.. Abbi ldu ng 1'.28
jQuery: write less da mOfe,
jQuery ist eine der verbreitesten
JavaScript-Bibliotheken. Das hat

mit der einfachen Syntax und

den vielfäl t igen integrierten Möglichkeiten der Bibliothek zu tun.
Unter anderem wird die Bibliothek von Google, Mozilla, Digg.

Wordpress und Drupal verwendet. jQuery ist Open Source und
unter MIT und GPL veröffentlicht.

Eine der bekanntesten und verbreitesten Bibliotheken dieser Art
ist jQu ery (wwwjquerycom). In der Design-Community konnte
sie sich in den letzten Jahren gegen andere Bibliotheken durchsetzen, was ni cht zuletzt auf ihre einfache Syntax und ihre vielfältigen Möglichkeiten zurückzuführen ist. jOuery enthält Funkti onen zum Umgang mit DOM, (55, XPath, Event Handling sowie
vorgefertigte visuelle Effekte und Ajax-Funktionen. Zudem existieren zahlreiche Plug-ins, Tutorials und Werkzeuge, welche die
Programmierung von Ajax-Anwendungen deutlich erleichtern.

11.5.1

jQu ery im Überbli ck

Im Folgenden betrachten wir zunächst die Grundlagen von
jOue/)' sowie die Möglichkeiten der Bibli othek anhand mehrerer
Beispiele. An schließend studieren wir die verbesserte Implementierung des Ajax-basierten Katalogs, der im vorigen Abschnitt
vorgestellt wurde: nun aber mithilfe von jOuery.

11.5.2

TIPP

Alt ernative JavaScript-Bibliotheken werden im n;'chste n Abschnitt de tailliert erläutert.

Inst all atio n
Die gesamte Bibliothek ist in einer einzigen JavaScript-Datei
jqueryj5 untergebracht. Im Vergleich zu anderen JavaScript-Frameworks ist jOuery nich t unbedingt schlank. Die Größe variiert
zwischen 16 und 96 kB. Für die Installation genügt es, die Datei
jqueryjs mittels
<scr1 pt type- ' text /ja va sc r1 pt ' s re- ' pfad /z u/ j que ry.
jS" ></sc ript >
in das (X)HTML-Dokument einzubinden.

11. 5.3
TIPP

Fast j ede jQuery-Funkt ion beginnt mit dem Erzeugen eines

jQ uery-O bjekt s.

S-Funktion und S(doeum e nt). readyO

Im Wesentlichen stellen jOue/)'-Funktionen traditionelle
JavaScript-Methoden dar, die mit einer speziellen Syntax ausgestattet sind. Eine wesentliche Komponente solcher Funktionen
ist das jOuery-Objekt , das durch die sogenannte Utility Fundion
($-Funktion) erzeugt wird. Diese Funktion dient dazu, Elemente
aus dem DOM-Baum auszuwählen und Methoden auf diese Elemente anzuwenden . Das Zeichen '$ ist dabei als eine abgekürzte
Bezeichnung der Klasse jQuery zu verstehen. Somit wird durch
diese Angabe - typisch für die objektorientierte Programmierung
- ein neues Objekt dieser Klasse erzeugt, das über verschiedene
Methoden und Attribute verfügt. Dabei ist es wichtig zu verstehen, dass beinahe jede Operation in jOuery auf zwei Schritte
hinausläuft: Ein oder mehrere Elemente im DOM-Baum zu finden und eine Funktion darauf anzuwenden.

698

I

11

Ajax

I

Beispielhaft dafür ist etwa der jQuery~Quelicode 1(document).
ready ( fn ). Dieser Ausdruck wendet die Funktion fn auf das
gesamte (X)HTML~Dokument an, nachdem die Seite komplett
geladen wurde. Was genau passiert dabei?
Wird der obige Ausdruck zusammen mit der jQuery~Bibliothek
in eine Seite eingebunden, entsteht beim Ladevorgang der Sei te
zunächst ein jQuery~Objekt. Dieses Objekt wartet mithilfe des
ready~Events von JavaScript, bis die DOM~Struktur des Doku~
ments geladen ist. Anschließend liest es diese ein. Danach müs~
sen ein oder mehrere Elemente im DOM ~ Baum gefunden wer~
den, die einem angegebenen Muster entsprechen. Im Beispiel
wird dieses Muster durch die Angabe document festgelegt. Es
sorgt dafür, dass das jQuery~Objekt initialisiert und die gesamte
DOM~Struktur des aktuellen (X)HTML~Dokuments selektiert
wird . Schließlich wird die Funktion f n auf die zuvor selektierten
Elemente des Baums angewandt. Sie kann den Baum beliebig
modifizieren. Sämtliche Änderungen werden anschließend im
Browser angezeigt. Es folgt der vollständige Quellcode:
jQu el)' :
$( document) . ready( fn ( )
11 Hier wird eine anonyme Funkti on fn{) deklariert.

I

11 Hier finden die Auswahl von DOM-Eleflenten und
11 die Dekl aration der anzuwendenden Funktion statt.
\);

Kein Wunder, dass dieser jQuery~Quelicode häufig als die Wur~
zelfunktion für alle andere Funktionen bezeichnet wird. Schließ~
lich können diese erst dann ausgeführt werden, wenn das Doku~
ment komplett geladen ist, das heißt, sobald seine DOM~Struktur
vollständig vorliegt.
11.5 .4

Selektoren

Wer mit CSS~Selektoren problemlos umgehen kann, wird in
jQuery einen alten Bekannten wiedererkennen. Die Syntax von
jQuery erinnert stark an CSS. Zum Teil werden viele Selektoren
unterstützt, die erst in CSS 3 spezifiziert sind. Darüber hinaus ste~
hen auch zusätzliche Filter~Funktjonen zur Verfügung, mit denen
die DOM-Struktur durchsucht werden kann. Wichtig dabei ist:
Ein Selektor liefert stets ein jOuery-Array von Elementen zurück,
die dem im Selektor angegebenen Schema ent sprechen und im
DOM-Baum des Dokumentsgefunden wurden. In der Praxis sind
einige spezielle Selektoren besonders hilfreich. Sie werden in der
nachfolgenden Tabelle anhand von Beispielen vorgestellt.
"fI.5

TIPP

Auf Elemente von jQuery-Arrays
können Sie wie gewohnt zugreifen. So liefert beispielsweise
$("dlv.excerpt " ).length die
Anzahl selektierter d 1v-Elemente
mit c las s- "excerpt". Und
s( "d I v. excerpt' )[OJ liefert das
erste zutreffende dl v~Elemen l
Im

DOM~Baum.

Unoblrusive Java$cript in der Praxis

I 699

Selektor

Bedeutung

Erklarung

'"

Selektiert genau ein EJement mit der angegebenen ID.

$("heacler " )

Ein Element mit
lcl .. "heacler" wird ausgewahlt.

elenent

Selektiert alle Knoten mit
dem angegebenen Elementnamen.

SC "h2")

Alle h2-Elemente weren
ausgewählt.

. class

Selektiert alle Elemente,
die zu einer Klasse gehOren.

SC"lntro")

Alle Elemente mit
cl ass- " j nt ro" werden
ausgewählt.

seI ec t or! , seI ector2,
selec t orN

Selektiert die Vereinigung !i( ~diV, span. p.myClass·)
aller Elemente, die durch
einzelne Selektoren ausgewllhltwerden.

Alle d1 v- und span-Elemente sowie alle p-Elemente mit
cl ass- "flyCI ass" werden
ausgewält.

Selektiert alle Elemente,
SC "dhlconlen l . photo")
die durch descendant spezifiziert weren und Nachfolgervon ancestor-Elementen sind.
SC"ul l l")

Alle Elemente mit
class- "photo' und dem
Vorgänger «(l I v
1cl - " con tent") werden
ausgewahlt.

Grundlt'Bt'nde St'It'k t oren

H ieorarchieo
ances t or descendanl

Alle I 1-Elemente mit dem
Vorganger ul werden ausgewählt.
paren t ) chll(l

Selektiert alle Elemente,
die durch chl l d spezifiziert werden und direkte
Nachfolger eines parentElements sind

$( "lIwrapper ) p. Intro")

Alle p-E lemente mit
class· "lntro" und dem
Eltern-Element mit
Id- "wrapper" werden
ausgewählt.

prev + next

Selekti ert ein direkt folgendes Geschwister- Element .

SC" l abel + Input")

Wählt in
( forfl>
( label> Name: ( /label>
(Input ndrne- " name" I>

</fom>
das Element <Input
name- " name" I > aus.
prev - slbllngs

Selektiert alle nachfoJgenden Geschwister-Element e.

H"I/prev - dlv")

'" Tabelle 1 1.1
Grundlegende SeJektoren und Hierarchie-Selektoren In JQuel}'

700

I

11

Ajax

Es werden alle Gesdrwister-Elemente eines Elements mit lrt- "prev" ausgewählt, die dl v-Elemente
sind. Kinder von Geschwister-Elementen werden
nicht mitgezählt.

, Sel0ktor

I

B0deutung

Beispiel

Erklarung

Selektiert nur das erste
Element aus einer liste
von durch selecto r ausgewAhlten Elementen

~(·tr:flr s t· l

WM1lt In
<tab1 e>
<lr ><td>Zel1 e I </td><f

Filte r
selecl or:flr s l

'"
<lr Hld>Zel 1e

Z<ft d><f

le>
<tr ><td>Zel le 3<ftd><f

'"
<f t abl e>
nur die erste Zelle aus .
se lecl or:lasl

Selektiert nur das letzte
Element aus einer liste
von durch selector ausgewählten Elementen.

Wählt in
<table>
<tr ><td>Ze ll e I <f td><f

lc>
<lr>< la>Ze l1 e Z<tla><1

le>
<tr ><td >Zel1 e 3</td><1

lc>
<ftable>
nur die letzte Zeile aus.
selec l orl:nOl
selecl or 2

Selektiert alle durch se·
I ec to r1 ausgewählten
Elemente, die zusätzlich
durch selecto rZ nicht
ausgewahlt werden .

~ ( "Il

:not( .Introl")

WAhlt in
<uD
(11
c la ss~" lntro · >a<fl1>

<l1>b<l11>
<11>c<l11>
</u1>

die letzten beiden Zeilen
aus.
se I eclor: even bzw.
seleclo r: odd

Selektiert alle geraden
bzw. ungeraden Elemente
aus einer Array-liste von
Elementen, das durch selecte r e rzelllt wird.

' ( " t r: even")

Wählt in
<tr >< ld>O</ td ></l r >
<tr><td>l </td></l r >
<lr><ld >Z</t d></lr>
<tr><td>3<t ld></ lr>
die Zellen mit den Ziffe rn
o und 2 aus.

:contaln s( t exl )

Selektiert alle Elemente,
die einen gegebenen Text
enthalten.

' ( 'p: con ta I ns( 'Buch' )" )

Wählt alle Absätze aus, die
das Wo rt »Buch. ent halten.

:hH(selec to r )

Sj"dlv:ha s( pl ")
Selektiert alle Elemente,
die wenigstens ein Element enthalten, das durch
seI ector spezifiziert wird .

Inhall s-Filte r

Wählt alle d! v-Elemente

aus, die ein p-Element
enthalten.

... Ta belle 11.1
Grundlegende Selektoren und Hierarchie-Selektoren in JOuery (Forts.)

11.5

Unobtrusive JavaScrlpt in der Praxis

I

7 01

Selektor

Bedeutung

Erklarung

Attribut-Filter
(atlrlbule- value ]

Selektiert alle Elemente,
deren Attribut attrl bute
den Wert valu p ha t.

H"lnpul[name- ' emal1']" ) Wähl t in
<I nput types " radI o"
name- ~vorname " valu e- "

" I>
<Input typ p- "radl o"
namp " ~na c hnam e ~ val ue -~

" I>
<1nput t ype- "radl o"
na lle- "ellall" va l ue-" "

I>
das dritte Input-Element
aus.
[ att r lbute! - vo1lue)

Selektiert aJle Elemente ,
deren Attribu t atlrlbute
nicht den Wert va 1ue hat.

S( "lnput [ na Jle- 'eJlal1']" ) Wahl! in
<Input type- "radl o"
name- " vorna me " val ue- "

" I>
<I nput type- " radi 0"
nolme- " na c hname" va 1ue- "

""

<I nput types " radI o"
name-~ema ll " va l ue- ""

I>
das ers te und das zweite
I "pu t -Element aus.
( attrlbut e~ -valu e]

Wählt in
<ul>

Selektiert aUe Element e,
bei denen der Wert des
Attr ibuts a ttribu t e mit
einer Zeichenkette anfangt.

'"

c l ass- "' ">a<l11>
<1 1

c l ass" "1 n") b<fl l )
<1 1

c l ass· "' nt ")c </ ll >
</ u l>
die Zeilen mi t bund c aus.
[o1ttr1bule S.. vo1lue )

Selektiert aUe Elemente,
bei denen der Wert des
Attributs a lt rl bul e mit
einer Zeichenkette endet .

$("

11[c l o1 s s S- 'ln' ] " )

Wählt in
<ul>
<1 1

clas s.. "I" ) a</11>

<11
c la ss- - ln " ) b</ 11 )

<11
c l a $ $- " I nt ") c</11>
<1 1

cl olss.. "t 1n" ) d</1 1>
</ ul>
die Zeilen mit bund d aus .
.. Ta be lle 11.1
Grundlegende Selektoren und Hierarchie-Selektoren in jOuery ( Forts.)

7 02

I

11

Ajax

Selltktor

Bedeutung

Beispiel

Erklarung

[~ttrlbute ' -va l ue ]

Selektiert alle Elemente,
bel denen der Wert des
Attributs att r Ibute eine
Zeichenkette ent h.llt

H ' lI [ cl a ss ' .. ' 1n' ] ' )

W.lhlt In
<u!>

I
( 11

cla ss- ' j ' ) a</ l l)
( 11

class-' jn ' ) b</ II >
( 11

c la s s.. " Int ")c</ l l )

<1,

cl ass ..'ll n" )d</l I )
<l u !>

die Ze~en mi t b. c un d d
aus .
.. Tabelle 11.1
Grundlegende Selek toren und Hierarchie-Selektoren In jOuery (Forts.)

Darüber hinaus gibt es spezielle selektoren für Form ular-E lemente sowie Kind-Fitter (:nth-chlld, : f lrst-chlld. : la stchil d usw.). Die vollständige liste finden Sie auf der Seite http://
docs.jquery.conVSeiectors.
11.5.5 Methodenaufrufe
Der Zugriff auf Methoden des jQuery-Objekts geschieht
wie in anderen objektorientierten Programmiersprachen . 50
wird etwa mit S( ' p' ) .addCla ss{ · v!sible ' ) die Methode
addC1as s (cl as s ) eines jQuel)'-Objekts auf alle Absätze d es vorliegenden Dokuments angewendet. Insgesamt unterscheidet die
Dokumentation zwischen sieben Typen vom Methoden aufrufen.
Eine detaillierte Beschreibung dieser Methoden würde über den
Rahmen des Buches hinausgehen. Einige Met hoden kommen
jedoch häufiger zum Einsatz und verdienen es deshalb. besonders erwähnt zu werden. Eine ausführliche Referenz mit Beispielen finden Sie au f de r offizie llen Seite der Bibliothek.
MPlhode
dt t r (key.

Tabe lle 1t.2 T
Einfache Filter. Inhalts-Filte r und
Attribu t-Filter In jO uery

Bedeutung
~alue)

Setzt das Attribut kl!y a uf den Wert va 1UI!.

adcl Cla ss(c la ss)

Fugt eine m Element eine Klasse hi nzu .

ha sC I ass (c l ass)

liefert tru e, falls ein Element über die Klasse c l ass verfUgt

re~ o yeC l ass(c la ss)

Entfernt die Zuweisung eines Elements aus der Klasse cl ass.

t 099 1eC la 5s (cl a ss)

Fügt eine Klasse. faUs sie nicht vorhanden Ist. hinzu und entfernt sie , falls sie vorhanden ist

fllt er (exprJ

Bes chränkt eine Selektion auf alle Elemen te, wekhe die Bedingung expr e rfüllen .

M anipulation
a ppend (contenl )

Fügt den HTML-Code contl!nt vor dem abschließenden Tag jedes selektierten
Elements hinzu.

11.5

Unobtrusive JavaSCript in der Praxis

I

703

Methode

Bedeutung

prepend (conte nt)

Fügt den HTML-Code conten t nach dem einleitenden Tag jedes selektierten
Elements hinzu ,

after (conlent )

Fügt den HTML-Code content nach allen selektierten Elementen (nach dem
ab5chließenden Tag) hinzu,

before (con t ent)

Fügt den HTML-Code content vor allen 5elektierten Elementen (vor dem
öffnenden Tag) hinzu,

wrap (htlll)

Fügt ein öfmendes Tag vor sowie ein schließendes Tag nach jedem selektierten
Element hinzu.

Hinzu kommen zahlreiche interaktive Effekte (slideToggle,
fadeln, anfmate, show, hide) und ubliche JavaScript-Kons t rukte
(extend, grep, map. merge, tr1 m), Es ist efWähnenswert, dass

.. Tabell e 11.2
Einfache Filter, Inhalts-Filter und
Attribut- Filter in jQue!)' (Forts.)

Meth odenaufrufe wieder ein jQuery-Objekt zu ruckliefern, sodass
Aufrufe im Stil der Fluent Interfaces aneinander gereih t und verkettet werden können:
S(

" p, hi nt " ) ,addCl ass ( " hf ghl f ght " ), sl f deDown ("s l ow" ) ;

Sowerden in diesem Beispielzuerst alle Absätze mit cl a SS_ M hf nt"
selekti ert. Anschließend werden sie um die Klasse . highlfght«
erweitert (c 1as s- " h1 nt hf gh 11 ght ") und schließlich langsam
(s 1ow) ausgeblendet (s 1i de Down).
De rartige Manipulationen bieten dem Entwickler zwar eine
Vielzahl von Möglichkeit en, um ein HTML-Dokurnent . on th e
fly« zu modifiz ieren, sie berücksichtigen jedoch nicht die Interaktivität der Nutzer. Dies betrifft insbesondere die Mausbewegungen und das Nachladen der Daten im Hintergrund. Hierfür
sind Events und Ajax-Kornponenten der Bibliot hek zuständig.

Ab bildung 11.29 T
JQuery in einer Übersicht.
(Quelle : http://www.webdesl g nelWa Il.com/tuto rials/jqueryt utorials-for-designersl Unkeode
461)

InchKID tIICI jqyGl}' ~I.
<oc: c;~ ,

t 'P."- ' ... '/ j o~ . "",, ; ~'·)

U d"""""", )"

l hs pDII Cln bo wnl an
In an

'~B I

________

_J ( f .., ~ 'inn ( ) {

H' butten' ) . o llok( f~ndi .... ( H

.s ne

TlIII ' reao:ty ~-.ent' (BrdllllnCllon 10 tII
aocotOAlld
00'" 1&....:11)

wh_,... ".

~ttI8Ie t» ~ou ....n 10 OlM ne UItIIOn?
Italn bc! CSS d ...., 10, $cI!lCtora!\o. o.V, H1, A, P. LI .)

1(· ....... " ) .• LI"""""", ( " .,,,." ) :

The flnction wilDe ~ _
da,g;'bul "'" I1 ddo:Ad

) ):

.... eIement .. 'h

\/.tIa, wruld b ~ . to 00 ....11 tIp......n

In ''OS usa. 1II1de It d:7wn wth '$kM'" Speed.
\/otere t» vou ....81110 aprJy IIn lutK:tIOI'l?
In II'IisCII:le.llb I"!c eierMn: witlld-'~

1( ' - ' "

704

11

Ajdx

ß

TIM qlDl8l00n marI<5 CIfl D119ther
Ie. r _ cl ~ ""') Cf (·.cIfI""1

t.IfIOe (0' <IOlLlIa

I

11.5.6 Event s und Event Handler
Um auf die Interaktionen der Nutzer interaktiv zu reagieren, stellt
jQuery eine Reihe von Ereignissen (Events) und Ereignisroutinen
(Event Handler) bereit, die Aktionen der Nutzer abfangen und an
die Methoden der jQuery~8ibliothek weitergeben. Im Sinne von
unobtrusive JavaScript gelten diese als Ersatz für Inline-DOMEvent-Handler, die im vorigen Kapitel zum gleichen Zweck verwendet wurden. Etwa onchange und onkeydown im Beispiel :
<input name- " I SB N" id- " I SBN"
onchange- " getCompl ete I nput ( ) : ~ cl a ss- "pa s s1 ve~
onkeydown- " getFetchedlnput(): " s1ze- " 30 " max·
length-"5 0" value-"" type-"text" I>
Während Event Handler im oberen Beispiel explizit im Markup
ve lV'Iendet werden, Jassen sie sich durch jQuery in die JavaScriptSchicht (wo sie auch hingehören) verlagern. Events können Entwickler somit bequem abfangen.
Möchten Sie etwa eine Funktion ausführen, wenn der Nutzer
beim Ausfüllen eines Eingabefeldes eine Taste gedrückt hat, so
können Sie den folgenden Quellcode nutzen :
(X)HTM l :
<1 nput type- "text" I>

TIPP

Verwenden Sie die fun ct 1on (e) ,
so stellt e eine Referenz auf das
selektierte Objekt dar. Sie können aber auch th 1S verwenden,
um direk t auf das Obj ekt zu zu greifen.

j Query:
Hdocument) .ready(function() (
11 übergabe des Objekts per Referenz
S( "input" ) .keypre ss( fun cti on (e) (

11 Behandlung des Event s
var c - String. fr omC harC ode(e . c harCode) :
$ ( " pfla usg a be " ). append( c) :

I,
Dabei wird zunächst die DOM-Struktur des Dokuments komplett
geladen. An sämtliche Elemente, die mit $ ( " input " ) ausgewählt
werden, werden Event Handler (keypre ss) angeknüpft. Beim
Drücken einer Taste eines beliebigen input-Elements wird eine
Funkti on aufgerufen, die als Übergabeparameter (e) dasjeni ge
Eingabefeld erhält, in dem der Nutzer seine Angaben gemacht
hat. Bei der Behandlung des Events wird der ASCII-Code des eingetippten Zeichens aus dem input-Feld mithilfe des DOM-Attributs charC ode gelesen und in ein String-Zeichen umgewandelt.

11.5

Unobtrusive JavaScript in der Praxis

I

705

Schließlich wird das Zeichen am Ende des Absatzes mit der ID
ausgabe hinzugefügt .
Diese Vorgehensweise ist typisch für die Behandlung von
Events mit jQuery. Genauso können Sie definieren, wie Sie auf
Mausbewegungen der Nutzer, Veränderungen der Browserfen ster oder Hover-, Focus- und Klick-Effekte reagieren möchten .
Hierfür ist es jedoch hilfreich, eine ausführliche DOM-Referenz
zu Rate zu ziehen. Sie finden sie unter http://wwwjavaScriptkit.
com/domrejl

11.5.7 Ajax-Komponenten
Der wesentliche Vorteil von jQuery besteht in kompakten und
mächtigen Ajax-Komponenten. Interaktionen, die man sonst
mit komplexen verschachtelten Ausdr ücke n realisieren müsste,
la ssen sic h mit jQuery intuitiv lösen, ohne sich zusätzliche
Gedanken über die Browserkompatibilität machen zu müssen.
Selbst für fortgeschrit tene jQuery-basierte Anwendungen genügen meistens vier Ajax-Methoden. Diese werden von Event
Han dlern aufgerufen, die wiederum bei Events während der
Interaktion der Nutzer auf der Seite aktiv werden können. Die
Kunst der Ajax-Programmierung mit jQuery besteht somit im
Erzeugen und Behandeln von Events mithiffe spez ieller jQueryMethoden .
11.5.8 S.ajax ( options)
Diese Methode sollte in den meisten Fällen die erste Opti on sein,
wenn es darum geht, ein XMLHttpRequest-Objekt zu erzeugen,
Browseranfragen zu verschicken, Serverantworten zu erhalten
und auf Attri bute des Objekts zuzugreifen. Auch die Behandlung
der Seitendarstellung in versch iedenen Zuständen der Anfrage ist
mit dieser Methode mögli ch. Man unterscheidet zwischen mehreren Übergabeparametern (options ), die als Parameter~Werte­
Paare aufgefasst werden und in der Form ' Parameter: 'Wert"
geschrieben werden. Solc he Paare werden mit Kommatagetrennt
und gelten somit quasi als Konfigurati on für Ajax-Anfragen. Zu
den Übergabeparametern gehören unter anderem :
... type
('get ' oder 'post', Standardwert ist 'get ' , z.B. type:
• get ' )
legt die Methode fe st, nach der Daten an den Server übermittelt werden.
... u rl
(etwa url: ' query.php ' )
Gibt die Adresse des Skripts, das die Ajax-Anfrage bearbeiten
soll, an.
706

I

11

Ajol.X

.. data
(etwa data: ' rnov1e-Los t &re1ease-200S ' )
Parameter, die an ein Serverskript ubermittelt werden
.. beforeSend: fun ct10n ( )
Definiert eine Funktion, die vor dem Versand der Anfrage an
den Server ausgeführt wird.
.. cornp1ete: fun c t10n ( )
Definiert eine Funktion. die ausgeführt wird. wenn eine
Anfrage beant'-Nortet und zurückgeschickt wurde.
.. succe ss: function ( htrnl )
Falls die Anfrage erfolgreich bearbeitet wurde (der Server liefert einen HTIP-Status-Code wie etwa 200 fur ~OK«). we rden gelieferte Daten in der Variable htrn1 gespeichert.

I
TIPP

Ei ne ausfüh rliche Einfü hrung in
die AJAX-Programm ierung mit
jQuery finden Sie Im Beitrag
)O Easy Ajd.lC with JQuery« von
Akash Mehta (http://www.
si( epol nt. (omlartlclel

ajax .Jq ueryl,

LInkcode 485). Dabei wird
Schritt-für-Sc hri tt ein in teraktives
Chat-System programm iert .

11.5.9

.load( url , [dataJ , [caliba ckJ)
Die .1 oad-Methode liefert Entwickle rn eine einfache Möglichkeit,
Inhalte aus Dateien dynamisch zu laden und in die DOM-Struktur
einzubetten . Um nur gewisse Seitenelemente aus dem HTMLInput einzubetten, können diese )Oon the fly« selektiert werden.
So können Sie etwa mit
H "pl/update s" ).l oa d{ "news .php di vi/news 11 " );

auf listenelemente im dl v-Container • news • der Datei news .
htrn1 zugreifen und diese in den Absatz mit der 10 upda t es des
aktuellen Dokuments laden. Standardmäßig geschieht dies über
die GEr-Methode. Um die POST-Methode zu velVVenden, genügt
es, das Skript mit Übergabeparametern zu versehen «(data).
Auch kön nen Sie festlegen. welche Funktion nach der Bearbeitung der Anfrage ausgeführt wird «ca11backJ). Die beiden letzten Pa rameter werden mittels eines assoziativen Arrays übermi ttelt, etwa:
S( · pllupdates · ) . load( · news . php d11111news 1i ' . { co untry: "G errnany ". time: " 2pm" I );
Hierbei wird die Variable count ry mit dem Wert Germany und die
Variable time mit dem Wert 2pm übermittelt.

11.5.10 .get( url, [dataJ, [callbackJ, [type] )
Analog zur . load-Methode ermögl icht diese Funkt ion den Zugriff
auf Inhalte, die über eine GEr-Anfrage vom Server zurückgel iefert we rden. Die Variablen werden ebenfalls über ein assoziatives
Array übermittelt, etwa durch:

11.5

Unobtrusive JavaScript in der Praxis

I

707

$.get ( " news.php ",
( coun t r y: "Germany " . time: " 2pm " 1.
fun ction (da ta )
alert( " Oata loaded: " + data):
}

Dabei wird auf dem Server zuerst news.php?countryGermanyStime-2pm ausgeführt. Der Output dieser Ausführung
wird ansch ließend in der Variablen data gespeichert und über
die a1 ert -Funkti on in einem gewöhnlichen JavaScript-Dialog
angezeigt.

'1.5."

.post ( url, [data], [callbackJ, [type] )
Funktioniert analog zu .get, abgesehen von der Tatsache, dass
die POST-Methode für die Übermittlun g der Daten verwendet
wird.
$. post( "news.php " ,
( co untry: "Germany ". time: " 2p m" I .
fun ction (data)
alert ( " Oata loaded: " + data):

Weitere Ajax-Methoden sowie Beispiele und Erl äuterungen können Sie unter http://docsjquery,comlAja>: nachschlagen.
'1.5.12 Ajax-basierter Katalog mit jQuery
Nach der ausführlichen Vorstellung der Grundlagen, Events und
Ajax-Komponenten von jOuef)' wird es nun Zeit, den im vorigen Abschnitt entwickelten Ajax- basierten Katalog zu revidieren
und mit jOuery unaufdringlicher, kompakter und interaktiver zu
gestalten .

Sc hritt für Schritt : Ein Ajax- ba sie rt er I(at a log m itj Query

11

Basisgerüst erstellen
Das Basisgrundgerüst des Katalogs können Sie dem Abschnitt
11 .3.5 entnehmen. Die einzigen Unterschiede in der revidierten
Version bestehen darin, dass die jOuery-Bibliothek mittels
<sc ript s r c-"j s/ jquery.js" type- " text / java sc ript" )
</sc rfpt)

708

I

11

Ajol.x

I

eingebunden wird, und die zu programmierenden Ajax -Skripte in
eine separate .j5-Datei ausgelagert werden:

<scr1pt src" "js/ajax.js · type .. "text/javascr1pt ">
</scr ipt >
Beachten Sie bitte, dass sämtliche JavaScripts, Stylesheet-Dateien
sowie das Markup deutlich voneinander getrennt sind und nirgen dwo miteinander vermischt werden.

ISBN-Katalog

.. Abbildung 11. 30
Ein Formular ohne interaktive
Elemente

EJ

Überprüfen der ISBN-Eingabe
Im Gegensatz zur vorherigen Version des Formulars ist in der
jQuery-basierten Variante keine Unterscheidung hinsichtlich
des Browsers bei der Erzeugung eines XHR-Objekts notwendig.
jQuery kümmert sich automatisch darum; der Entwi ck ler hat
kaum Zugriff auf entsprechende Methoden.
Betrachten wir die Implementierung einer Funkt ion, welche
die ISBN-Eingabe auf ihre Korrektheit hin überprüft. Zu diesem
Zweck empfiehlt es sich, ein JavaScript zu verwenden, das mithilfe regulärer Ausdrücke die richtige Form erkennt. Se ine Implementierung ist in diesem Kontext unwich tig. Im gü nstigsten Fall
sollten sämtliche Angaben - ob mit oder ohne Bindest riche oder
Leerzeichen - erkannt werden. Diese Überprüfung soll unmittel bar bei der Eingabe erfolgen. Bei fehlerhaften Eingaben sollte die
Hintergrundfarbe rot werden, bei einer korrekten Eingabe grün.
Die ISBN - Eingabe erfolgt im Feld mit der rD I SB N.
Aus der vorherigen Überlegung ergibt sich somit der folgende
QueJlcode:

11.5

Je nach Konte)(t ist th 1s entweder
ein jQuel)'-Objekt oder ein DOMObjekt. Genaueres erfahren Sie
im Beitr<18 ~jQuery's this: demystified _ (http://remysharp.
com/2001/04/12Ijquerys-thisdemystlfied/, linkcode 462).

Unobtrusive Java$cript in der Praxis

I

709

11 Behandlung de s o nKeyDo wn-[vent s de s I SBN-Feldes
$( 'input/li SBN' ).keydown ( f un c tion () (
11 FUhre eine Funkti o n au s , fall s ein
11 Zei c hen im Feld eingegeben wurde.
"a r i s bn - c he c kI SBtHthi s ,va l ue ) ;
11 Greife auf den eingegebenen Wert via DOM zu.
11 thi s bezieht s i c h auf da s s elektierte Objekt.
11 Fall s ko rrekt, verified-Zu s tand: gran
if ( i sbn ) (
$( "!J I SBN" ) .attr ( ' c la ss ' , 'verified' ) ;
)

11 so ns t mi stake-Zu s tand: rot
el se {
$( "/lI SBN " ) .attr ( ' c l a ss ' , ' mi s take ' ) ;

); 11 Sc hl ieBe keydown

6 Abbildung 11. 3 1
Der passive Zustand

Wir nehmen a n, dass ein PHP-Skript checklSBN.php vo rliegt, das
ebenfal!s die ri cht ige Form erkennen kann. Mit jQuery könnte
man es wie folgt einbe tten:

11 Behandlung de s onKeyDown-Ev ent s des ISBN- Fe ldes

Abbildung 11. 32
Der Zustand ~verifled ... Die
Angabe ist so weit korrekt
..t..

~

ISBIl I

Abbildung 11. 3 3
Der Zustand ~failed ... Die Angabe
ist falsch.

6

$( ' i nput/fI SBN' ). keydo wn ( f unc t i on ( )
va r i sbn - thi s .value:
11 Gre ife auf den eingegebenen Wert via DOM zu.
11 thi s be zieht s i c h auf da s s elekti e rte Objekt.
11 Rufe ein PHP- Skript via GEl · Methode auf.
$ .get ( " c he c kI SBN.ph p" ,
( number: i s bn ) ,
f unction ( data ) {
11 Fall s ko rrekt, ve rified-Zu s tand: gran
if ( data l{
$ ( "lII SBN " 1 .attr ( ' c l a ss ', 'ver1fled'):

I
11 ande rnfall s mi s t a ke - Zu s tand: r o t
el s e {
$ ( "II I SBN " ) _attr ( ' c la ss ', ' mi s take' ) ;

I
)I ,
) 1 : 11 Sc hl feBe keydown (

In diesem Beispiel wird die Korrekt hei t durch c hec kl SBN. php
überprüft. Das Skript erhält die Eingabe über die Variable numbe r
mittels der G ET-Methode und liefert entv-leder 1 (richtige Eingabe) oder 0 (falsche Angabe zurü ck) . Abhä ng ig vo n der Au sgabe
710

I

11

Ajax

I

wird dem Eingabefeld mit der 10 I SBN entweder die Klasse verff1ed (korrekte Eingabe, grün) oder die Klasse m1stake (falsche
Eingabe, rot) zugewiesen .

IJ

Dynamische Aktualisierung der Seitenelemente

Ähnlich wie im Praxisbeispiel in Abschnitt 12.3.5 gilt es nun,

nach der abgeschlossenen ISBN-Eingabe Details uber das entsprechende Buch anzuzeigen und eine Vorschau des Buchdeckels
und eine kurze Beschreibung einzublenden. Dafür müssen natür-

li ch wieder Event Handler eingesetzt werden . Für die Interakt io n, also das laden lIon Daten im Hintergrund, empfiehlt es sich,
die Methode ,ajax( ) zu verwenden. Eine Eingabe ist beendet,
wenn das DOM-Event onChange erfolgt ist. In diesem Fall ist der
Anwender von einem Eingabefeld zum nächsten gewechselt.
W ir wollen zwei Aufgaben lösen: Zum einen müssen Informationen aus einem Datenbestand abgelesen und in die Tabelle
tabl efldeta1l s eingefügt werden. Die Daten werden durch ein
Skript queryl SBN. php gel iefert, das die Variable input erwartet.
Dieses Skript liefert Daten in einem bestimmten Format, das nicht
unbedingt HTML sein muss. Solange noch Daten geladen werden, muss der Anwender darüber informiert werden, beispielsweise durch eine Animation (load1ng .g1 f), die den ladevorgang
veranschaulich t. Außerdem soll eine Vorschau eingeblendet werden . Diese kann aus einer anderen Quelle stammen und durch
das Skript prevfew.php bereitgestellt werden. Das Skript liefert
HTML-Quell code zurück ; dieser wird direkt in den dl v-Container
IJprevfew eingefügt und angezeigt.
Wir nehmen wieder an, dass ein Verlag seinen Besuchern
einen Ajax-basierten Katalog anbieten möchte. Unter anderem
soll der Nutzer eine ISBN-Nummer angeben können. Die ISBNNummer wird über ein Eingabefeld eingegeben. Die Details zum
jeweiligen Buch sollen direkt aus der Datenbank ausgelesen und
präsentiert werden, ohne die Seite neu laden zu müssen . Unter
dem Eingabefeld soll nach dem Auslesevorgang eine Tabelle
tabl efldeta1l s erscheinen, in der die ISBN-Nummer, der Name
des Authors, der Titel des Buches sowie der Preis stehen (s. Abbildung 11.34).
11 Behandlung de s onChange-Events des Feldes I SBN
S{ 'f nputlJ I SBN' ) . change( funct f on ()
11 FOhre eIne Funk.tlon au s , falls dIe
11 E1 ngabe abgeschlossen 1 st.

S.aJax ( (
11 GEl-Methode 1m Ein satz
type: · get · .
11.5

Unobtrusive JavaScript In der Praxis

I

711

11 URL de s aufzurufenden Skr ipt s

11
11
11

11

url: ~quer y I S BN.php ".
Dbermittelter Parameter
data: ' input .. ' +{thl s ).value,
Fall s Daten Obermittelt wurde n.
s pei chere s ie in der Variablen htrnl.
s ucce ss : fun cti on ( html ) (
11 Lade Vo rsc hau au s einem Skript,
11 Obe rmittle ISBN-Numme r al s
11 Pa rameter i s bn
$ ( "liprevi ew" ) . 1oad ( "prev i ew. php" .
I ' i s bn': '(thi sl. value' I ) :
Daten 11 ege n 1m Fo rmat albl c ld vor. Spa l te ...
var re s ponse " html. s plit( " I" );
11 ... und zeige s le ...
11 in den jeweiligen Tabellenzellen an

s bnnum ' ) . html ( re s po ns e( O] ) ;
$ ( ' lia ut o r ' ) . htrnl ( re s pons e(l] ) ;
H' IJbu c htHel' ) .html( re s ponse( 2] ) :
$ ( ' IJprei s ' l. htrnl ( re s pon s e( 3] ) :
$ ( ' fl1

11 Zeige die Inf obox mit einem Slide-Effekt
11 ( bi s her war die s e Infobox ver s te c kt )
$ ( "fi; nf o" ) . sl ideO own ( "s l ow" ) :

J
I); 11 Sc hließe s.ajax (
) ; 11 Sc hl ieBe change (

-

------------- -

IS6N

--_..... M'W'
_.-

_

" .....

The Elements 01 TYpographie SlYle (Paperb<lck)
by AOOert 9dustu:;I (AUh::::f)
_

q .,,"",,''''''''''

Editorlnl Reviews

Abbildu ng 11.)4 ..
Nacll der korrekten Angabe einer
ISBN-Num mer werden die I nIlalte
dynamiseIl nacllgeladen, geparst ,
in dem DOM - Baum eingefUgt und
darges.tellt.

f_

,,_io>._ ... ...,..

'-"'-"1
....... .... IOM .... booc.>g t. .

.... ",.
_ , .... <Io<Ign d - ""O/>O'''<.'' .. ",. . "<1 .....
' 1:Nb "~
H IIw b v<-U .. Pl I'". O::kI<Ii">\J . "'h ilotn . . .
--.:.I ..
' .'II'~'" • _OtYMlr.o llO ... """' .. ......

... _

~ ..

.. "..

""OW;.

.... - ,. ,. .............
....,
~.

1010 ' 110"000 ..... _"""

-'''~

........ . . "'-.

0I1yp ' ~ . ~ . . . """"",,,,,,,.,.,

Für die Darstellung von Animationen zum ladevorgang werden
innerhalb der. aj ax t ) . Meth ode Anweisungen eingefügt.

712

11

Ajax

I

jQuery:
'.aJa x(!
beforeSeod: fuoctlon()(
, ( MUlsbnoum M) . addC1ass( M1oa dfng M) ;
' ( °lJautor O) .addC1ass( ° loadfog ' );
S(MlJbuchtfte1 · ).addCl ass( M1oadfng"):
S( ' lJpre f s ' ) .addC 1ass( ' 1oadl og ' ) :

J.
comp1ete: fuoctfoo(){
' (MnlsbooumM).remo~eC1ass( M1 oadfog " ) :

S( ' /101 utor ' ) . removeC1 01 ss ( ' 1oadf og ' ) :
SC ni!bucht f tel " ). remo~eC 1a SS( "1oadl ogM ) :
$( Mflprefs" ) .removeC1ass ( " load; ng " ) ;
J•

Die Gestaltung der Klasse. 10adlng geschieht im Stylesheet

(55:
.1oadlog
baCkground: ur1(fmages/loadfog.gif) oo-repeat SOS
SOS:
hefght: 35px:
J
ISBH

_

....... ___ n_ '... _

4

Abbilduog 11.]5

Die Daten werden geladen, wAhrend der Benutzer wei tere Angaben machen kann.

11

Kontrolle dem Nutzer überlassen
Mit jQuery lassen sich vielf<iltige Effekte und Dialoge realisieren,
welche die Interaktivität moderner Applikatiooeo ausmachen.
So wird die eingeblendete Infobox, die wir im vorigen Abschni tt
erstellt haben, den Erwartungen manch eines Seitenbesuchers
nicht entsprechen, da etwa die Infobox bei einem Wechsel von
einem Eingabefeld zu einem anderen erscheint. Aus diesem
Grunde ist es sinnvoll, dem Anwender zu erlauben, die Infobox
ein- bzw. auszublenden. Aus Usability-Sicht ware es allerdings
besser, die lofobox erst nach einem Mausklick des Aoweoder
anz uzeigen . Mit jQuery kann dies mit wenigen Änderungen
innerhalb des Codes sc hnell erledigt werden. Im (X)HTML11.5

Unobtrusive JavaScript In der Praxis

I 713

Dokument wird neben dem ISBN- Feld ein Suche-Icon eingefügt
(s . Abbildung 11.36).
Abbildung " .)6 ..
Im (X)HTMl-Dokument wird
neben dem ISBN-feld ein SucheIcon eingefügt.

(X )HTMl:
<f orm action- " processing.php" method- " post " >
<div cla ss- " contactle ft ">
<labe l f or-~ I SB NM >ISB N : </label>
</div>
<dl v cl ass-"contactrlght">
<inp ut name- "I SBN" id- " I SB N" class· " passive "
size- " 30 " maxlength-" SO " value- "" type- " text " I>
<img id-"l oo kup" class-"invi slble " s r c-~i mage sl
searc h.png " wldth· "4S " hefght- " 4S " alt- " Suche " I>
</dfv>

Hier wird dem eingefUgten Bild die Klasse i nvi s i bl e zugewiesen. Es wird zuerst Yia (55 mittels displ ay:none: entfernt. Die
Idee ist dabei, das Bild nur dann anzuzeigen, wenn der Browser
die Funktion, die durch die Schaltfläche bereitgestellt wird, auch
ausführen kann. Deshalb wird dieses Element ganz im Si nne von
unobtrusive Java5cript durch Java5cript angezeigt. Damit Nutzer
die Schaltfläche auch ohne Maus mithilfe der Tastatur anklicken
können, wird sie über einen Verweis anklickbar gemacht. (Mittels
der Tab-NaYigation kann man in Browsern standardmäßig ledigli ch von einem Verweis zu einem anderen springen.)
jQuery:
11 Scha ltfl1l chen anklickbar machen und anzeigen
11 ( fa l l s JavaScrfpt aktiviert 1st)
11 Verlinke das Bild mit der ID lookup
$( "filook up " ).wrap( ' <a href- "U" ></a> ' ) :
11 Zeige das Element an
S( " fl1oo kup " ) .attr ( ' class ' . 'visible')

11 Das Menü ausblenden
S( ".delete" ) .click( fun c ti on(){
$( thi s).pare nt sC "/linfo " ).anlmate({ opacity: ' hide' ) .
~ slow" ) :
}}

714

I

11

Ajax

,

I

Schließlich soll beim Anklicken der neuen Schaltfläche dieselbe
Interaktion stattfmden , die vorher beim onChange-Event stattgefunden hat. Um den gewunscht en Effekt zu erzielen, genugt es,

H 'i n putfli SBtl' ) . change ( fun et i on ( )
durch

H '/11 oo kup' ) .eli ek ( fu ncti on()
zu ersetzen.

29. 95
The EI.....U d Typog la ph~ StyI . ( Pa~rback)
bV Eklbea B10WS (A\lhor)

_

/ ·,,·..... , rxr"~

.. Abbildung 11.37
Beim Anklicken der S,haltflä,he
ers, heint die Infobox. Browser
ohne JavaScript-Unterstützung
werden die Schaltfläche nicht
anzeigen.

r ... u ,,"'l' '/"."..
1r'
I._............
..... ".,.,..."""'.....
01'' ''' ... ......,. .. ..-....<"" ........
01

~

,.... _ ~v-

11> .......
"., _ .
.0ptI'
.... .. _ .......,... .. p.!JO •• Ir<OIOt"IJI ."'nIypo
_ ...

_

......"'. """,.t»o•.Io. gIo-Io...,. rIotino • ...,. •• w. . .........

"'_ ~ .

... .... ' ... ",",. OI....... ... .... Cf 'fP' "' IlO1"~
. . .. .. typo _
.... ...,.., ' ..... mP<> aoy

h ..' 1". tolle> ..... _

""'-'

D

Die Infobo)! ausblenden
Hat sich der Anwender vergewissert, dass er das ri chti ge Buch
gewählt hat , so kann er das Formular weiter ausfüllen, ohne dabei
durch die Infobo)! gestört zu werden. Es ist also sinnvoll, ihm die
Möglichkeit einzu räumen, die Infobox auszub lenden. Auch das
ist mit jQuery eine Sache von wenigen Quelleodezeilen.
Zu diesem Zweck wird wiede r ein lcon vor der [nfobox eingefügt und mittels ( SS in die rechte Ecke platziert :

Beach ten Sie bitte: Die MarkupAnderungen in diesem Kapi tel
dienen bloß der D.mt ellurg. Vor
der j Query-Programmierung
sollten das Markup sowie die allgemeine AufgabensteIlung im
Wesentlichen bereits feststehen.

XHTMl:
<dill id- ' info ' ela ss- ' invi sible ' )
<img src- " images/eaneel .png " alt - " Inf obox entfernen "
class - " delete" w1dth- " 20" height - " 20 " I>
<table surrrnary -'Daten zu einer I SBtl-N ul1mer '
id - " detail s ")
(5 5:
lJinfo
pos iti on: relative;

11.5

Unobtrusive JavaScript in der Praxis

I

71 5

In diesem Fall macht es keinen
Sinn, das Icon mi t JavaScrip t einzufCßen. da JavaScript vom
Browser des Benutzers un terst üt zt
wird - schließlich wi rd die Infobox
angezeigt.

,delete (
position: absolute :
top : lOpx:
right: l Opx:
cursor: pointer :

_ ... _ ......,....' .... 1171H1II81711 t 321

Ab bil dung 11.38 ..
Ein lcon wird vor der Infobox eingefügt und mi t (SS in die rech te
Ecke pla tz iert .

R. 81i n91111 11

ThIO EJ ..... n s CI TyP'9!!PhoClll Slyla

0

211. 115

The I! lemenlS CI Typographie Style( PapeI'baot k)

by BQ!!!l!1 SrVfflIlfi1 (AlJllcr)
_

lI.e'." . . ....... . . !

Beim Anklicken des Icons soll die gesamt e Infobox ausgeblendet werden. Beim Anklicken eines Elements der Klasse .delete
soll somit sein Eltern -Element verschwinden. In jQuery-Syntax
bedeut et das:

11 Das MenO ausblenden
$( ' .del ete ' ) .cl i ck ( functi on(){
$( t hi s) . pa r en t s( ~ /11 nf o" ) . ani ma t e(
( opacity: 'h i de ' I.
' slow ' ):
})

,

Es wird sichergest ellt, dass das Elt ern-Element von .dele t e den
Bezeichner 1nf o tragt und langsam (s 1 ow) ausgeblendet wird
(opac 1ty: h 1de).
Abbildun g 11.39 ..
Die Infob()( wi rd transparenter.

TM EletlleruolfVpognophic Style ( Pßpem.oc~ )

Ab bildung 11 .4 0 ..
... und verschwindet schließlich.

716

I

11

Ajax

~y

Fk:iL>9rt Bnornn; (ALItu)

-

'11 ..... "".. ••

,]8-088179 jI1
'

a

I

5chaltermenü einfü gen

Schließlich kann man in der oberen rech ten Ecke ein Schafter·
menü einfügen, in dem etwa Hinweise, Anweisungen oder
andere Informationen eingeblendet werden. Beim Anklicken
des Schalters fährt ein Block entweder ein oder aus. Dafür wer·
den zunächst eine Schaltftäche (. b tn - s 11 de) und ein d iv-Block
(Dpanel) verwendet. Die Darstellung des Schalters wird mithilfe
von CSS Sp rites verändert, indem der Schaltftäche die Klasse
act i ve zugewiesen wird.

Hier werden Besucher mit einem
Browser ohne JavaScript-U nterstützung auf eine Hilfeseite wei tergeleitet. D.!.her ist das Einfügen
eines VelWeises direkt im Markup
(und nicht mithilfe von Java$cript)
durchaus sinnvoll.

(X) HTMl :

<div 1d-" panel " )
<p) H1 er werden HO fe-ln f ormat1onen angezelgt</p)
</d 1v )
<p cla ss-" slid e" )
<a href-" hl1fe.html " class-"btn -s lide " >Hilfe </ a)
</ p)
<d iv id-"wrapper~ )
<h2 ) I SBN·K&t&log </ h2 >

C55 :
(lpanel
background: 8387E81:
hefght: 200px;
di splay: none: 11 Wird zuer st nicht angezeigt
.slide (
fl oat: rlght:
display: block;
width: 155px;
.s11de a
outllne: none;
.btn-slfde
background: DF06COF url(lmages/white-arrow.glf) norepeat r1ght ·50 px;
wldth: 144px:
helght: 31px:
display: block;
position: relatfve;
rlght: 0:
. acthe I
11.5

Unoblruslve JavaScript in der Pfd.lds

I

717

bac kground-p os ltl on: right 12px;

jQuery:
1/ Initla1i siere da s $c haltermenO
1/ (o bere re chte Ec ke )
SC" .btn - s 1i de"). eli ek ( fun cU on () r
$ ( ' /lpane1 ' ) . slldeTogg1e ( · sl ow' ) :
$(thi s) .t ogg1eC1a ss( "a c tlve " ) : return fal se:

11,

..t.. Abbildung " .41
Vor dem Kli ck .. .

Beim Ankli cken der Schaltftäche wi rd das Element mit der 10
!lpane1 entweder ein- oder ausgefahren. Außerdem wird ihr die
Klasse active entweder zu gewiesen oder entfernt. slideToggle und t ogg1e C1a ss sind die in j Query eingebauten Sc halter,
die Elemente von einem Zustand in einen anderen automatisch
wechseln lassen. Die Angabe return fa 1se; verhindert, dass der
Besucher na ch der Ausführung de s JavaScripts automatisch auf
die verlinkte Seite (hilfe. html) geführt wird . Das Ergebni s können Sie in der Abbildung 11.43 sehen.

ISBN-Katalog
'SIN

Abbildung 11.41
... und nach dem Klick. Ein dynamisches Schaftermenu lässt sich
mit wenigen Zellen jQuery-Code
bewerks telligen.

..t..

-

"..

.....

918-(l1J1117i1327

R.Bi'IIIUS

,
-

_ .. _ _

T1 .. fltoI .... r:J1VJlclgr~S!y\f

'* ijjjii e

._ ~_.

211.~

_ u·_",
........ ...............
_""'
._ ..........
. . . _........
..._.
......
....-..."."._
.
...,.. .
-,. ...... .... . . .,.-,.....
TIIe Ele.....u'" li'............. 9!y.I"-"~)
Ily AgwJQn<nn! I...... torl

--_--_,-- -_ • • _

....... "" .. . " ... . ....... <t<IIOI _

_ _ "' ... , ..

~

-~ .... ,.,. ..... "'-ot.
.~
........
_

.. _ .. _ _ _

"".-

Abbildung ".43 ~
Das Elgebnis: Ein attraktiver,
interaktiver und unaufdringlicher
Ajax-basierter Katalog, mit sau berem Markup und ganz im Sinne
von Progressive Enhancement

718

11

Ajax

0

I

11.5.13 jQuery: Werkzeuge und Ressourcen
In der Design·Community ist jQuery auch deshalb beliebt, da es
zum einen zahlreiche Erweiterungen, Tutorials und Werkzeuge
für die Bibliothek gibt. und zum anderen eine ausführliche Doku·
mentation vorhanden ist. Auf der Suche nach Erweiterungen
werden Sie auf den beiden folgenden Seiten fündig:
http://plugins.jquery.com (Unkcode 463)
http./ljquerypluglns.eom (Unkeode 464)
Verweise zu Tutorials finden Sie auf der Seite :

http://www.smashingmagazine.coml200Bl09/ 16Ij qu eryexamples-and·best-praetices/ (linkcode 465)
Als WerkzelJge sind insbesondere Firebug
http://getfirebug.eom (linkcode 466)
und das »lnjectjQuery Bookmarkelt« hilfreich.

http./lwww.icanhaz.eomlxtec.hjsl(linkcode 467)

11.6

Ajax-Bibliotheken und Frameworks

Wie schon angesprochen, wird Entwicklern die Arbeit durch
Bibliotheken und Frameworks auf beiden Ebenen der Webprogrammierung erleichtert. Auf der Seite des Clients läHt sich die
Generierung, Übermittlung und Behandlung von Daten einfacher
gestalten. Etwa im Hinblick auf zahlreiche DOM-Attribute und
Methoden, die »zu Fuße nur mühselig zu handhaben sind . Auf
der Seite des Servers kann dadurch die Bearbeitung von Anfragen
zügiger erfolgen. Dies betrifft zum Beispiel die Suche von Daten
und die Rückmeldung an die Ajax-Engine. Praktische Bedeutung
haben dabei optimierte und vorgefert igte Module, die zusätzliche Interaktivität bereitstellen und statische Umgebungen mit
dynamischen Bausteinen erweitern. Neben jQuery exist ieren
momentan über 70 kostenlose und kommerzielle Bibliotheken,
die Entwicklern Arbeit abnehmen und zum Teil fortgeschrittene
Komponenten wie etwa eine Tabellensortierung oder eine grafische Aufbereitung der Daten anbieten.
... Dojo Toolkit
Das Open-Source-Toolkit stellt Komponenten bereit, die
zur Implementierung von interaktiven NutzerschnittsteIlen verwendet werden können. Unter anderem stellt die
Bibliothek Assistenten für Animationen und Drag; & Drop
zur Verfügung sowie Hilfsfunktionen für DOM. Eine detaillierte Dokumentation wird mitgeliefert. Das Package ver-

dOjQ "
... Abbildung 11.44
Das dojo 'cwaScrlpt-Toolkit

11.6 Ajax-Bibliotheken und FrameworKs

I 719

..

.... Abbildung " .45
Mochikit.com
TIPP

..

Die Grundl age f ür Moch iKit
liefert Python: Wer sich damit
auskennt, w ird sich beim Umgang mit MochiKit schnell zurech tfi nden.

..

protötype
•

JavaScript framework
.. Abb ildun g 11.46
Prototype

..

72 0

I

11

Ajax

fügt über Dutzende von selbsterklärenden Beispielen.
http://www.dojotoolkit.org
MochiKit
Eine umfangreiche Bibliothek mit Beispielen zur Handhabung von Tastatureingaben, zur Implement ierung sortierbarer Tabellen, zur Behandlung regulärer Ausdrücke sowie zur Drag & Drop-Funktionalit ät . Außerdem
erzeugt Mochik it visuelle Effekte (Ein- und Ausblenden
von Daten), liefert Met hoden zur Format ierung von Zeit
und Dat um und stellt ein Debug-Modul zur Verfügung.
http://mochikit.com
Plex Toolkit
Das DHTML-GUI-Toolkit bietet vo rgefertige Widgets wie
Datagrids, Bäume, Akkordeon - Navigation, DHTML-WindowManager oder DataGrid, Viewstack an. Mit dem Framework
lässt sich die Benutzerobe rfläche visuell mittels Markup festlegen. Übe r den Zurück-Button kann der Nutzerzu einem äl teren
Zustand zur ückkehren. Im Hinblick auf visuelle Effekte hat die
Bibliot hek dagegen nicht viel zu bieten . Lizenz : LGPL oder GPL
http://wwwplextk.org
Prototype
Einfache und weitreichende DOM-Manipulationen. Das
Framewo rk erleichtert den Umgang mit DOM-Methoden und DOM-Attributen sowie mit dem XHR-Objekt
Dadurch können auch komplexe Ajax-Konst ru kte anschaulich und übers ichtlich gehalten werden. Prototype liefert grundsätzli che Vereinfachungen im Programmie rprozess und stellt eine Grundlage für wei tere Toolki ts bereit.
http://www.prototypejs.arg
Adobe Spry
Das Framework präsent iert eine Effekt- und Widget-Bibliothek zum effizienten Umgang mit XML- Daten. Mit Adobe Spry
lasse n sich die in XML-Dokumen ten gespeicherten Informat ionen mit minimalen JavaScript-Kennt nissen in HTML einbett en. Es werden alle XML- Formate unterstützt. Animationen,
visuelle Effekte, Widgets-Bausteine und ausführliche Dokumentat ion we rden mitgeliefert. Das Framework wendet sich
eher an Designer als an profession elle Webprogra mmierer.
http://labs.adobe.com/ technologies/ spry (Li nkcode 4 68)

I

- -_. --..-

.-

... Abbildung 11.47
Die BeiSpielanwendung in Adobe
Flex ist interaktiver als übliche
Desktop-Applikationen. Die Kombination von Flash und Ajax zeigt
ihn! SUrken .

l

.. Flex und Apollo
Flash-basierte Alternative zu Ajax (ht tp://www.adobe.com/
product5/ftex (linkcode 469) und http://labs.adobe.com/wiki/
fndex.php/Apoflo (Linkeode 470».
..

Rico
Eine auf Prototype basierende Bibliothek mit zahlreichen
interaktiven (visuellen) Templates zur Wiederverwendung
und Weiterentwi cklung. Die Anwendungen mit Fu nkti-

• Abbil dung 11.48
. RicOt: basiert auf Pmtype.

onen der Bibliothek wurden intensiv getestet , in kommerziellen Produkten umgesetzt und überzeugen deshalb durch
ihre Benutzerlreundlichkeit. Dmg & Drop-Funktionalität.
Das Ein- und Ausblenden von Elementen , ein AkkordeonEffekt sowie eine Sortierung von Tabellen werden mitgeliefert . Nachteil : eine sehr sparsame Dokumentation.
http://www. opellrico. org
.. Script.ac ulo.us
Eine Bibliothek mit zahl reichen visuellen Effekten, die sehr
leicht zu handhaben sind. Unter anderem werden das Umsortieren von Listen, Drag & Drop sowie eine dynamische Naviga ti on bereitgestellt. Hinzu kommen zusätzliche funktionale
Erweiterungen, etwa die automatische Ergänzung von Anfragen.
http://script.aculo.us
.. Mootools
Diese Bibliothek weist beeindruckende visuelle Effekte auf.
Neben dem üblichen Arsenal an Funktionen weist sie etwa
eine Drag & Drop-fähige Warenkorb-Methode, eine SlidingMethode, Tooltips, fließende Übergänge und grafische
Effekte auf. Nützlich sind außerdem Methoden zum Wechseln zwischen C55-Klassen, zum Nachladen von Daten sowie
zur Verwendung von Cookies.

• Abbildung 11.49
Die Bibliothek »Mootools-

http://mootools.llet, http://deveioper.yahoo.com/yUi

11.6 Ajax-Bibliotheken und Frameworks

I

721

_...-...-.- --Abbildung 11 .5 0 •
Eine Webapplikation. die von
Desktop-Anwendungen ununterscheidbar ist, realisiert mithilfe
von YUI-Komponenten (Quelle:
httpJfwww.jackslocum.com/
b IOgle xamplesflayoul6. hl m.
linkcode 471 )

.,-

-•• ---I

_
.
..- -__
..... _,
- _._
....,_.......
......_<
_,
_.._,. .
.....
"
._,,:::;._;;.:;.
...
..
'
.
..
.
.
_ ---......
............. .

.....

...-d~

- . -.......... .

_;.

......... ....................
,

..... .......... _ _ . .........,"".... ......., . . .. .. _

..,,,..

""_ ..""", . _ .... <'.. ,,\.. u .. c~"""' ...... ~ .. """""""~, _.
""~
~

....,._.o"."
..."""" . .....,... ...... '"_ ........ """ .... .......
,"'......, .. . -. .................. ..,..., ,,"'....... ____
-'_"""""''''''''''- ,
~

-~

~

''''''O<''~''

~",

.....

-"".~
. " """""""'
_"_
................ ' _. _ _ _ ......,.. _ _ _ t•• ,,. ..

,..-,.""'-"
-.... .... ___ ....... r""_..,
........ _ _
...,...,

...

MO'..

;.;:

~.~.::;'-

" " - '' ''''

:;-:;'" ........
,.

"

- ,..--~

..... _ " ' _ _,_ w . .. __ ••
~

... Yahoo! UI library (YU!)

Yahoo! UI library (YUI) erlaubt es dem Programmierer, nicht
nur visuelle Effekte und Animationen direkt einzusetzen,
sondern auch zahlreiche Steuerungselemente und gewöhnliche Elemente von Software-Applikationen (User InterfaceKomponenten, Tabellen, Baumstrukturen, SUder, Kalender,
lesezeichen-basierte GUls) zu verwenden. Außerdem wird
der Browser History Manager bereitgestellt. Darüber kann der
Nutzer zu älteren Zuständen der Seite navigieren. Auch komplexe layouts si nd mit YUI möglich.
..

SAjax

Simple Ajax Toolkit (http://www.modernmethod.com/sAjax).
6 Abbildung 11.51
Simple Ajax Toolkit (http: //
modernmethod.com/sAjax)

. -_.
....
"'"
....

awr .." ...... ~ .... ...y.'- ON , . . . ,,",y,

' ''M_

--.
-

- ~Po...., Go...., Ho 1 . G "'-'
p,...., Go....,.., }. MoI_
p'....,a...... No J. t:1o!Jr",
N, J . !l-rr.._

SIr"" 0..0,,,

y"

- b~

. 5). . _

. "«"
6 Abbildung 11.52
Google Web Toofkit beinhaltet
mehrere Widgets. die frei verwendet und weiterentwickelt werden
können . Darunter auch Bäume
zur Darstellung von Daten als
baumartige Datenslrukturen.

722

I

11

Ajax

XOAD (http ://wiki.xoad.org) und xAjax (http ://www.xAjaxproject. org) stellen Bibliotheken zum lei chten Datenaustausch
zwischen PHP-basierten Serverskripten und Ajax zur Verfü gung, SAjax erlekhtert die Aufrufe und die Behandlung von
PHP-, Perl-. ASP- und Python-Skripten. XOAD un terstützt

neben DOM-Manipulation und Caching auch server- und
clientseitlge Events. Bei xAjax sin d dagegen kei nerlei Java5criptKenntnisse notwendig. Aufwendige JavaScript-Anwendungen
lassen sich komplett mittels PHP programmieren.
.. Google Web Toolkit
Das Framework enthält Templates zu User Interface-Komponenten (Widgets), die analog zu Swing-Bauteilen in
der Java-Runtime erstell t und vom Compiler in Java5cript
übersetzt werden können. Die Gestaltung von Widgets
geschieht mit C5S. Swing wird in Java zur Implementierung
von GUls verwendet. Alle Funkti onsaufrufe werden gespeic hert. Sprünge zu früheren Zuständen über die ZurückSchai tfläche sind möglich. Mitgeliefert werden Kontrollelemente, Panels. Tabs, Menus. Dialog-Boxen und Tabellen.
http://code,google.com/webtoolkit (linkcode 472)

..

ASP.NET Aj ax

Das Framework baut die technische ErNeiterungvonJavaScript
zu einer objektorientierten Sprache aus. Neben üblichen Kontrollelementen und vorgefertigten ASP-basierten Serverskripten stellt ASP ,NET Ajax einen Debugger, StringBuilder, Klassen, Vererbung sowie Namensräume bereit. Damit erhalten
Entwickler einen umfangreichen Werkzeugkasten zur multifunktionalen JavaScript-Programmierung in .NET (http://atlas.
asp.net (u rsprünglich Microsoft Atlas».

11.7

I
ASP.NET Ajax

Beispielhaft für eine konkrete
Implementierung von ASP.NET
Ajax ist die populäre Anwendung
Pageflakes (http ://www.pagef!ake5.wm). Eine personalisierte
Startsei te mit dynamischen Elementen .

Nachteile von Ajax

Bei der Entwi cklung einer AJax-Applikation ist mit mehreren
Nebeneffekten zu rechnen, die eine statische und synchrone
Lösung eventuell besser abschneiden lässt.
.. Sicherheit
Da Ajax-Anwendungen JavaScript-basiert sind und als solche in (X)HTML integriert werden, muss Sicherhei t bei der
Behandlung und Übermi ttlung von Daten durch zusätzliche,
relativ komplexe Konstrukte sichergestell t werden .
.. Zurück-Schaltfläche
Die Veränderungen der Seitenansicht geschehen bei dynamischen Ajax-Applikationen ,.on the fly..:, ohne dass die Seite
neu geladen wird. Um von einem Zustand zu einem früheren
Zustand zurückzukehren, kann man den Zurück-Button im
Browser deshalb nicht 'lerNenden. Um dies zu ermöglichen,
muss ein History Logger extra implementiert bzw. ei ne ZurückFunktionalität explizi t programmiert werden.
.. Usability
Nutzer wissen nicht, was im Hintergrund abläuft. Eine klare
Kommunikation soll dem Nutzer genau erklären. was gerade
passiert und wo rauf bei Anfragen gewartet wird. Auße rdem
verändert sich die Seitendarstellung beim Nachladen der
Daten. Dies darf den Anwender nicht VerNiHen. Die Seite
muss neue Inhalte dort platzieren, wo sie erNartet werden .
.. Zugängli chkeit
Massive Accessibility-Probleme in der Praxis. Ajax setzt st ark
auf das Visuelle, indem neue I nhalte dynamisch generiert und
angezeigt werden. Es stellt sich die Frage, wie diese Veränderungen für Nutzer dargestellt werden sollen, die ohne visuelle
Browser arbeiten . Mögliche Abhilfe: Hijax

11.7

Nach teile

von

Ajax

I

723

.. JavaScript
Anwender, deren Browser über keine JavaScript-Unterstützung verfügen, können Ajax-Applikat ionen nicht ve rwenden.
Eine statische Alternative ist desha lb häufig notwendig.
.. Unsichtbarkeit für Suchm aschinen
Wegen der Dynamik der Anwendung können Web-Crawler
diese nicht vernünft ig analysieren. Die Inhalte werden demzufolge ignoriert oder nicht erkannt.
Es empfieh lt sich, Ajax bei mehrseitigen Formularen, Umfragen,
Client-to-Client-In teraktionen, Tabellen, bei der Dat enverarbeitung (Filter, Sortierung usw.), dynamischen Umgebungen und
bei der Platzierung von Hinweisen einzusetzen. Bei einfachen
Formula ren, einer einfachen Navigation und zur Anzeige von
größeren Text blöcken sind konvent io nelle, statische Methoden
vorzuziehen.

11.8

Ressourcen

Dnline-Artikel
.. http://www.smashingmagazine.com/2007/06/20/
ajax -javascript-so lu tio ns -for-profess iona I-cod ing (Li n kcode 473)
_80+ Ajax-Solutions for Professional Codingoc
Eine Übersicht übe r wesent liche Ajax-Komponenten, die in
professionellen WebapplikatIonen als vorgefert igte Vorlagen
vervvenden werden können.
.. http://www.smashingmagazine.w/JI12008/09/71175-reallyuseful-javascript-techniquesl (Linkeode 4 74)
,.75 (Really) Useful JavaScript Techniques«
.. http://Ajax.solutoire.com (Linkcode 475)
Eine umfangreiche Unk-Sammlung zu Ajax, Ajax-Frameworks, Ajax-Toolki ts, JavaScript , DOM
.. http://chandlerproject.orgiProjectsiAjaxLibraries (Li nkcode 476)
Ajax-Bibliotheken in einer kompakten Übersicht Auch Vort eile und Nachteile der Bibliotheken werden aufgelist et .
.. http://www.adaptivepath.com/ideas/essays/archives/000385.
php (Unkeode 477)
~Ajax; A New Approach To Web App lications«
Ein Bei t rag, in dem Jesse James Garrett den Begriff ."Ajaxoc
gep rägt und die Architektur von Ajax ausführlich dargelegt
hat.

724

I

11

Ajax

I

.. http://Ajaxpatterns.org/Patterns(Linkcode 478)
Techniken, Praktiken, Patterns und übliche Methoden in der
Ajax-Programmierung. Mit Lösungsansätzen und weiterführenden Referenzen zum Thema .
.. http://dmoz.org/Computers/ProgrammingiLanguagey

Java5criptiAjax (Linkeode 479)

Liste zahlreicher Ajax-Projekte, Ressourcen, Beitrage, Magazine und Werkzeuge rund um das Thema Ajax
.. http://Ajax,solutoire.com (Linkeode 480)
Eine regelmäßig aktualisierte Sammlung von Referenzen zum
Thema Aj ax mit Frameworks und Tutorials

.. http://chandlerproject.org/Projects/ AjaxUbraries (Lin kcode 481 )
Eine Übersicht von 25 Ajax-Bibliotheken, Jeweils mit Vorteilen und Nachtei len
... http://en.wikipedia.orgiwiki/AjilxJramework (Linkcode 482)
Der Wikipedia-Beitrag stellt eine Sammlung von populären
Ajax-Frameworks zur Verfügung .
.. http://Ajaxpatterns.orgiPatterns(linkcode 483)
Eine ausführliche Einführung in die Grundlagen von Ajax, mit
zahlrei chen Beispielen und Codestücken
.. http://en. wikipedia. orgiwiki/Comparis on~ojJava5cripC
jrameworks (linkcode 484)
Vi erzehn JavaScript-Frameworks im Vergleich. Eine ausführliche Vergleichstabelle mit Dojo, Echo3, Ext, Google Toolki t,
j Query, midori, MochiKit, Mootols, Prototype, qooxdoo, Rialto,
Rieo, YUf und SweetDEV RfA.

11.8

Ressourcen

I

725

12

Mikroformate

Nach der strikten Trennung von Inhalt und Darstellung durch
CSS und (X)HTML ist in der modernen Seitengestaltung nun ein
neues Modell in Sicht. Das Web wird semantischer, Inhalte präzi ser und Suchmaschinen raffini erter. Da Seitenelemente zunehmend gemäß ihrer Bedeutung ausgezeichnet werden, können sie
im Web 2.0 besser extrahiert, verarbeitet und erneut verwendet
werden. Dies liefert die Grundl age für vielfältige Applikati onen
und scha fft neue Möglichkeiten für mobile Nutzer. Das Ziel,

[Semantic Web]
Das LeitprinZlp des Semant/r Web
basiert darauf, samtliche Webinhalte In einer Form zu pr~sentle­
ren , die von Maschinen und Software-Agenten logisch verstanden
und semantisch erfasst wi rd.

das Webentwicklern vorschwebt , ist ein besseres Web, dessen
Semantik von Maschinen exakter interpretiert und analysiert
werden kann : das sogenannte semantische Web (5emantic Web).
Mikroformate stellen einen neuen, vielversprechenden Schritt in
diese Richtung dar.
Der Hauptaedanke bei Mikroformaten liegt in der semant ischen Auszeichnung der Webinhalte. Die ausdrückliche Kennzeichnung von Zusammenhängen zwischen Inhalten einerseits
und ihren Eigenschaften im alltäglichen leben andererseits mag
komplex erscheinen, bedeutet aber für Nutzer im Endeffekt mehr
Kom fort und einen lei chteren Umgang mit Daten.

le microformats
• Abbi ldung 11.1
mlcroformats

Wer heute eine Anzeige im Web veröffentlichen möchte, muss
sich auf eine langwierige Suche nach einschlägigen Online-Börsen und Webplattformen begeben. In jedem Einzelfall sind eine
Registrierung sowie eine erneute Aufbereit ung der Daten erforderlich. Je allgemeiner die Anzeige dabei ist, desto komplexer
und zeitaufwendiger wird der Vorgang, und desto schwieriger
wird sie für Interessenten zu finden,
Wie wäre es st attdessen, die gleiche Anzeige gemaß einem
Standard aufzubereiten, im eigenen Web log zu veröffentlichen
und anschließend Webplattformen die Anzeige automatisch entdecken, analysieren und thematisch passe nden Rubriken zuordnen zu lassen - und zwar in dem Augenblick, in dem sie veröffentlicht wird?

HINWEIS
Mithilfe von MikrofOl'maten
dreht sich das Schema der Informationssuche im Web um:
Nicht Anwender suchen nach
passenden Dnline-Plattformen,
sondern DnHne-Plattformen
suchen nach passenden Inhalten
der Anwender.

12

Mikroformate

I

727

~OI~ ~

•

•
H of'lu

c ........ I _

E vg ntl

;> I~ cu.

F"u n d.

Graup.

;> c ;>u u

Md N _

E~. nt.

o"YJI.HuO! ..",'u

.......

~ Not.ce Inythln"
d,ffelent?

+ 171
~

BUlZ Andersen's 4th Annual
WWOC Party
HW"", 01 11 1

11.,., <; .. 10.,.

COon.t ~."'... "'.

Wo,l,J ... tk

"ort .1.".

TM wmlCloll "",It WolllO!lMOt'1IP
aro:.. .H'"",••• 9-100.

...s

2JMt !II'M"" Wl!1o/I. 01",.

1" rQ:<oOl

-t!lO

SMC ........ Ih:SOc""......,W.r"" .....

Applo

tle.oI_,', w"r", <" "", m<~1

"'" PI<lP:' ""'. m .... your f •• ori' .... o
",m,,,.,.,I~to"
Q, ..... ~ic, ....
On)OT somo of "'. ",,.,,on D,."..oCI',

'0 OI"llO!

~".',

-+5 1

..

d

r_t_

(ocPo" IJt>tc ..... Ct<:to- _

..t.. Abbildung 11.1
Au f Upcorning (Upcorn ing .yahoo .
com) werden Inhal te mithilfe von
Mikroformaten gesammelt. Zur
Ankündigung von Veranstaltungen
genügt es, einen entsprechenden
Beitrag auf der Seite des Veranstalters im Mikroforma t hCalender
zu veröffentlichen .

SII\IHl ' .'l>On .... Up c om"'~

.."" "

; .

Sc.,,,,,, P.ty

(SIlc .. , V~~
4 OC\:foo ol S'<I'l_,Ue

+17 SfPh•• • Walk lOO7

o'

•, • , • , ,•
ru._
, •••
,. G " .. •• .. •
J uno 2001

SII . .. n.. ...... ~ o:
T1"ß·_Oroo:!

!Mt "'-'<1000

~-~

E..e,.,h"oO l

Allgemeiner : Mussten Anwender sich bei ihren A nfragen bis dato
expliz it an einschlägige Plattformen wenden, 50 indizieren diese
Plattformen im semantischen Web Anfragen, Anzeigen und Meldungen der Nutzer automa tisch. Inhalte werden dabei ni cht etwa
durch das Parsen von Textbl öcken und das Scannen nach Schlüsselwörtern »erraten+: (dies ist heut e bei gängigen Suchmaschinen
der Fall), sondern di rek t gemäß ih rer Bedeu tu ng interpretiert und
zuge ordnet. Dieses semant ische Element des Webs betrifft nicht
nur d ie Webau toren, die ihre I nhalte besser vermarkten kö nnen,
sondern auch die Anwender.

.. Gezielte Suche (t arget sea rch)
Anstatt in globalen Suchmaschinen nach speziellen I nhal ten
zu suchen, können Information direkt bei entsprechenden
semanti schen Suchmaschinen nachgefragt werden .

.. Sema nti sche Suche (semantic s earch)
Es wird mögli ch, nicht nur nach Inhalten, sondern auch nach
Zusammenhängen und Bedeutungen zu suchen. Zu einem

HINWEIS

Möchte beispielsweise jemand
seine DIplomarbeit veröffentlichen und einem möglichst breiten Publikum bekannt machen ,
so könnte er beim Annoncieren
seines Werkes mit hilfe eines
Mikroformats weitaus mehr
Menschen ansprechen als durch
das Indizieren der Selten in g.lngigen Such maschinen. In diesem
Kontext kommt die Relevanz der
geZieHen Suche, die in der Regel
effizienter als eine allgemeine
Suche iSt, entscheidend zum
Tragen.

728

12

Mikroformate

Namen kann eine seman tisc he Such maschine etwa geschäftliche Kontakte, Bezi ehungen oder Stammbäume anzeigen.

.. »SauberelC Suche (filtered search)
Eine liste von Referenzen auf relevante Webseit en wird durch
eine liste von prä zisen Antwo rten , Empfehlungen und Dokumenten zum Thema ersetzt. Wer na ch einem Produkt sucht,
erhält eine liste von Rezensionen (und nicht etwa links auf
Rezensionen), die andere Nutzer in ihren Weblogs veröffen tlicht haben .

.. »Rea l- timelC - und zeit basierte Suche (real-t im e search)
Suchmaschinen indiz ieren Daten permanent und zeigen diese
direkt in Ergebni5Jisten an. Nutzer können etwa zu einer
Uhrzeit eine liste parallel stattfindender Veranstaltungen
an frCl8en . Oder si e können zu einem Da tum und einem Ort

themenverwandte Veranstal tungen anfragen, die Unterneh men od er Organisat ionen auf ihren Websei t en angekündigt
haben. Die Möglichkei t , neue Ve ranstal t ungen via RSS-Feeds
zu abonnieren, wird dem Anwender selbstverständlich mitgeliefert.
Eine Darst ellung von Inhal ten, deren Bedeut ung von Maschinen
gelesen und verstanden werden kann, wird in allen Szenarien
stillschweigend vorausgesetz t - genau wie einhei t liche Standards
und Forma te, in denen Daten aufbereite t werden können. Genau
im let zteren liegt die wesent liche Aufgabe von Mikroformaten.

12.1

Bedeutung von Mikroformaten
Mikroformate mögen nicht sonderlich aufregend erscheinen, da
sie etwa im Gegensatz zu Ajax
im Code subtil bleiben und keine
zusätzliche visuelle Dynamik
auf.veisen. Ihre Bedeutung liegt
in ihrem neuartigen Konzept und
ihrer schnellen Verbreitung.

Was sind Mikroformate?

Mikroformat e (auch jiF und uF genannt) stellen eine Sammlung
von simplen Formaten zur semantischen Annotat ion von Webinhalten d ar. Sie basieren auf einschlägigen Webstandards (XMl
und (X)HTML), die mit zusätzlichen, semantischen Attributen
versehen werden. Als solche sind sie nicht mi t Programmiersprachen zu verwechseln. Grundsätzlich sind sie Ergänzungen zum
Quellcode, die Seiten eine »feins trukturierteoc Form verleihen
und von Maschinen für beliebige Zwecke genutzt werden kön nen. Ein M ikroformat best eht dabei lediglich aus Schreibregeln
zur korrekten Präsentat ion der semant ischen Daten. Meistens
sind dies zusätzliche (55-Klassen, mit denen Seitenelemente
erweitert werden .
Webseiten, deren Inhalte mithilfe dieser Schreibregeln ausgezeichnet werden, können et wa Ereign isse oder Rezensionen
ankündigen und Suchmaschinen darauf aufmerksam machen.
Darüber hinaus können zum Beispiel auch Konta kt informationen, Kalender, Bekannt schaften, Bookmarks und Visi tenkarten
mittels Mikroformat en präsent iert werden. Konsequenz: Während Seiten inhalte für Seit enbesucher w ie gewohn t angezeigt
werden, tragen sie im semantischen Web zusätzlich auch eine
semantische Bedeutung und können von Browsern erkannt,
ext rahiert und weiterverwendet werden. Konkret bedeutet dies,
dass ein e ~F-Visit enka rte, die neben Kontaktdate n etwa eine Verkehrsanbindung enthäl t , nicht als ein reiner Textblock, sondern
als eine Visitenkarte interpret iert wird und direkt ins Adressbuch
des Benutzers importiert werden kann . Auch die Verkehrsan bindung wird als solche erkannt und kann beispielsweise mi thilfe vo n Google Map~ nä her bet rachtet we rden, ohne dass der
Benutzer entsprechende Angaben macht. Der Anwender spart
somi t das manuelle Erfassen von Daten auf seinem Handy oder
12.1

• Abbildung u .3
Mikroformate stellen eine Samm lung von einfachen Formaten zur
semant ische n Annotation von
Webi nhalten dar.

TIPP

Ooline-Visitenkarten wurden zu erst mithilfe des Formats vCard
(vej) realisiert, über das sich
Geschäftskontakte via E-Mail
knüpfen ließen. Mit heMd aus
der Familie der Mikroformate
können Visitenkarten aus Webinhalten extrahiert und in einen
Browser importiert und benutzt
werden.

Was sind Mikroformat e?

I

7 29

I

Informati onsbroker

Experten sprechen In diesem
Zusammenhang von Browsern
als zukünftigen Informationsbrokern. Diese sollen semantisch
aufbereitete Inhalte interpretieren und exportieren.

in seinem E-Mail- Program m. Dies macht der Browser für ihn, und
Z'Nar ganz automat isch. Die Visio n, die hinter diesem Konz ept
steckt. ist ziemlich verblü ffend . In zukün ft igen Browserversionen
(ab Firefox 3 oder Internet Explorer 8) sollen se mant isch ausgezeichnete Daten mit Web 2.0- oder Desktop-Anwendungen des
Benutzers assoziiert werden können.
So könnt e ein Anwender schon bald beim Anklicken eines
angekündigten Ereignisses dieses automat isch in seinem Kalender markiere n und beschreiben lassen. Beim Anklicken ei nes
Lokals könnte Google Maps automati sch aufgerufen werden und
die Daten auf einem Handy speichern. un d beim Anklicken einer
Telefonnum mer könnte diese direkt via VOIP gewäh lt werden.
wie man es aus Desktop-Applikationen berei ts kenn t .

12.2

Mikroform ate im Überblick

Insgesamt stehen Webentwicklern derzeit elf Mikroformate
zur Verfügung, die bereits j etzt aktiv eingesetzt werden. Dabe i
unterscheidet ma n zwischen elementaren (r e l -d1 r ect ory . rel no f oll OW. re 1 - t ag) und zusammengesetzten (kom binie rten)
Mikroformat en.

h(~rd

h(~tndir

XMOP

hRMtw

"M

mxo
RtIU[~nst

R~TI~g

Abbildung 12 .4 ..
Archi tektur von Mikroformaten
(Quelle: Microfo rmats.org)

l
... hAtom
Mik roformat für Inhalte, die abonniert we rden können - vor
allem Beiträge in Weblogs
... hCalendar
Format für die Auszeichnung von Ereignissen in Kalendern
... hCard
Format für die Vorstell ung von Menschen, Unternehmen,
Organisat ionen und Ort en
... hR es um e
Format für die Präsen tation von Resüm ees un d Lebensläufen

730

I

11

Mikroformate

..

I

hReview
Format für die Präsentation von Rezensionen von Produkten,

Diensten, Geschäften, Veranstaltunge n und Ähnlichem

... rel-d irectol)'
<a rel-~ta9 d1rectory

M

href-" http://technoratl.com l

blogs /css · )css</a)
Format für Auszeichnung von Da ten, die in einem Verzeichnis
und/oder Ooline-Kat alog stehen

.. rel-nofoHow
<ahref-"ht t p: //www.be i spl el

.de ~ rel- ~ nofol1

ow· ) ... <I a>

Ein HTML-Attribut, über das Suchmaschinen mitgeteilt w ird,
d ass ein Verweis nich t bei de r Berechnung des Rankings der
jeweiligen Seite berücksicht igt werden soll.

.. rel-tag
<a href· "http://www.splegel .
deM rel- "tag ") Nac hrlch t en</a>
Wird rel- " tag ' zu einem Verweis hinzugefügt , so wird WebCrawlern mitgeteilt, dass die jeweilige Webseite den Unk-Text
als ein Tag oder ein Schlüsselwort ent hält.
~ X FN (X HTML Friends N etwork)
<a hre(- ~ ht t p: // www.hefkoho ff mann.de ~ re l- ~fr1end
ne1ghbour met ' )
Informiert die Suchmaschinen darüber, dass der Autor der
Seite mit dem Autor der verlinkten Seit e befreundet ist
... XOXO (e Xt ensible Open XHTM L Outl ines)
Format für die Präsentation von Listen
... )( Folk
Format für die Kennzeichnung von Bookmarks und Listen von
Bookmarks
Dutzende we iterer Mikroformat e, etw a zur Auszeichnung
von Zitaten, geografischen Angaben oder Jobangeboten, sind
im Gespräch (http://microjormats.orgiwiki/Main_Page (linkcode 490».

12.3

Mikroformate im Einsatz

In den letzte n Monaten w uchs die Popularit ät semantischer
Suchmaschinen. Neben Technorati, Goode und Yahoo! legen
immer mehr Dienst e ihr Augenmerk auf semantisch ausgezeichnete Inhalte, indizieren diese und st ellen sie dynamisch und kompakt an einer Stelle zusammen. Spezialisierte ~ F-Suchmaschinen
gewinnen immer mehr an Bedeutung.

12.3 Mikroformate im Einsatz

I

73'

__

edgeio
. ....

_--

~

• .-.--

- .......
_R_._. .
---==:.:. =::-..:::--....----_.
-_._......

... .

---,--~­

.
_...'."...........
........ -....
.. -_.----- .....
. ...---.. .. ---_.
-,- -

_._--'-"-~'--"

~-

~­

~

'"

_._

~--­

~,

~;:,._._ ' -- - ­

D ..".- - - -

.

~

'.~.

.... - _ c c : : : . ; a.-.

lRm-"' ..... ~..

..._

-~-

..t..

Abb ildung 12.5

Auf Edgeio.com sind über 100 Millionen Anzeigen,
Angebote, Produkte urd Dienstleistungen von Weblogs großer und kleiner Unternehmen indiZiert.

... Abbildung 12.6
Suche nach Veranstaltungen auf TechnOl'ati Kilchen
(http://kilchen.technoratLcom, Linkeode 491 )

... Google und Yahool Local (Suche nach Unternehmen und

Dienstleistungen) können Inhalte im hCard-Format semantisch erfassen. Gaogle nutzt hCards in Google Maps. Yahoo./

Loca! bietet neben den Suchergebnissen die Möglichkeit, Visi tenkarten direkt zu importieren .

-.. --==
----_.--

:--

.-

~-

_- ~

.-- .- -- .......-

~-

---

........ ~

---~:::;:=

Abbildu ng 12.7 ..
Im linken Fenster erscheinen
auf Yahoo! local Visitenkarten .
Voraussetzung: Der FlrefoxNutzer verfügt über eine entsprechende Erweiterung.

~ --==
' --- ~

•r:!--'7::... ..

----

. ~.:..:-

... Rubhub.com (http ://rubhub.coml) (XFN) stellt Beziehungen
zwischen Menschen und Webseiten dar - nützlich bei der
Suche nactl Kontakten in nertlalb großer U nternetlmen.
... Technorati.com (http://kitchen.technorati.com), (hCard, hCalendar und hReview) bietet eine umfangreiche Suche in Visit enkarten, aktuellen Ereignissen und Rezensionen an.

...

Upcoming (http://upcoming.yahoo.com) (hCalendar) indiziert
Ereignisse weltweit und stellt detaillierte Suchoptionen zur
Verfügung .

... simplyHired (http://simplyhired.com)isteinedergrößten Plat tformen zur Vermittlung von Arbeitgebern und Arbeitnehm ern.
Implementiert zur Zeit das hResume-Mikroformat zum besseren Erfassen

von

Angebot en und Jobanfragen (5,8 Millionen

Anzeigen Ende September 2008).
).
73 2

12

Mikroformate

~

iBegin Source (http://source.ibegin.com) (hCard) verwaltet über
12,7 Millionen Geschäfte.

eo..to:I(. (1) -

0

-mTqpooo(.)(8

~

Flickr.com (http://www.f1ickr.com/) verwendet hCard für Profile und XFN für die Auszeichnung von Lesezeichen.
.. Corkd.com (http://corkd.coml)bietet eine Plattform für Wein-

liebhaber - alle Nutzer werden mithilfe von Mikroformaten
semantisch ausgezeichnet.
Um Inhalte. die auf Webseiten in Form von Mikroformaten
abge legt werden. verwenden und exportieren zu können, können Nutzer von Firefox die beiden Erweiterungen Tails (https:!/
addons.mozilla.orgldelfire/oxladdon/4106 (Unkcode 492» und
Operator (https:lladdons.mozilla.orgldelfir€/oxladdonI4106(Linkcode 493» verwenden.
Mac-Nutzer benötigen dafür Safari Micr%rmats plugin (http://
www.zappatic.netlsa/arimiero/ormatS/ (Linkcode 494».
Es leuchtet ein Mikroformate-Logo auf. wenn Mikroforrnate
auf der Webseite entdeckt wurden. Um auf die gefundenen Formate zuzugreifen, genügt ein Klick auf das Logo.
Für Nutzer des Internet Explorers steht das Mler%rmats Bookmark let (http://left'ogic. comllou nge/news/m icrformats -bookmarket-/or-Ie/ (Unkcode 495» zur Verfügung.
Mit diesen Werkzeugen können Nutzer jetzt schon direkt auf
Inhalte zugreifen. Das heißt. beispielsweise Kontaktdaten in ein
Adressbuch automatisch hinzufügen oder Orte bei Google Maps
nachschlagen . Standardrnäßig sind Mikroformate jedoch bis dato
noch in keinen BrQVolser integriert. Mozilla plant, sie in zukünftigen Versionen von Firefox 3 zu integrieren.1 Microsoft hat angekündigtl, Mikroformate im Internet Explorer 8 zu unterstützen.
Dieser soll Ende 2008 oder Anfang 2009 rauskommen.

12.4 Visitenl,arte als hCard
Da die semantische Kennzeichnung von Daten im Web meistens
auf der Grundlage von (X)HTML erfolgt, lassen sich Informationen zuerst in der üblichen Form präsentieren und anschließend
in die notwendige Form überführen.

• Abbildung 12. 8
Dh! ElWeiterung .Opl!rator. in
Mozilla Flrefox liisst semantisch
aufbereitete KontaktinformatIonen exportieren, bookmarken
und Ins Adressbuch hinzufuge n.

-

--

• Abbildun g 12.9
In zukUnftigen Versionen des
Flrefox soll es sog. _Data Delectorso: geben, die den Mauszeiger
In Abhiingigkeit von verfugbaren
Microformaten entsprechend
andern . Benutzer werden Detektoren beliebige Aktionen zuordnen können. Noch ist diese FunktlonalitJ.t nicht implementiert.
Quelle: https://Wlkl.mozilfa.org!

Content Handling:UserJ nterjace/
PrejerenceCMlao/ormars (linkco de 502).

1 . MOlIlila W1kl; Mlcroformats_, http://wtkl,mozJlld.Of!V',",''cro/Ofmats,
Unkcodt 496
2 . Mlcrosoft drops hlnts about Internet EII:plorer 8 ... hrtp:l/dllttChnlc• . com!
ntws.ars/pon/200 70501-mIUQlt1jt-dropl' "nts·about-Inftflftt-tltplort r- 8.
htm/, Unkcock 497
12.4

Visitenkarte als heard

I

733

I

Sc hritt für Schritt: Visitenkarte mit
M ikrofo rm a t en e rze uge n

11

Fes tleg ung von Dat en

Angenommen, Sie möchten eine Visitenkarte sem ant isch aufbereiten und im Netz veröffentli chen. Die dazu notwendigen
Dat en können kurz und bünd ig als Tex t block zusammengefasst
we rden :

Max M usterm ann
Mainzer-Str. 7, 661 21 Saarbrücken, De utschland
+49 68 1 123 4567
max @ mustermann.de
htt p://www.m usterman n .de

11

HTMl-Fo rm atierun g
Wä hrend ein Mensch sämt li che Informationen aus diesem Tex tblock direkt extrahieren kann, ist er für Maschinen zunächst eine
reine Folge von Zeichen, die keine Bedeutung tragen. Um dieser
Folge eine int erpret ierbare Struk tur zu verleihen, ist eine HTMlForm at ierung not wendig:

( p)(s tr ong) Ma x Muste r mann (/s t r ong>( br I)
Mainze r - Str. 7 . 66 121 Saa r brOc ken . Deu t sch l and <b r I)
+4 9681 1234S67 ( br I>
( a hre f-' ma 11t o: max@"n ust ermann .de " ) ma x@mu st erma nn .
de(/a)( br I)
( a hr ef - " http: // ww w.m uste rma nn .de " ) ww w. mu st e rmann .
de (fa)(/ p>

HINWEIS

Obwohl Menschen Saarbrücken
direkt In Verbindung mit einer
Stadt bringen , mUS5 die5 bel einer Such maschine nicht der Fall
sein. Konsequenz: Die Semantik
der Inhalte müssen Seitengestalter durch zusätzliche semantische Auszeichnungen genauer
festlegen.

734

I

11 Mikroformate

Daraus können BrO'Nser die Inhalte zwar in der gewünschten
Form da rstellen; doch Maschinen können damit wenig anfangen,
da die Sema ntik, also die Bedeu tu ng der HTMl-Stru ktur, nicht
festge legt ist .
Eine denkbare M öglichkeit, Maschinen Seman tik näherzubringen, wäre eine Dars tellung der obigen Dat en etwa in der folgenden Form:
Vorna me: Max
Na chname: Muste r ma nn
Str as se: Main zer- Str.
Ha usnummer : 7
PLZ: 66121
Stad t: Saa r br Ocken
Land : De ut schl and

I

Telef on: +49 681 123456 7
E-Mail: maxlftusterma nn.de
URl: www.mustermann.de
Eine Form, wie sie auch bei der Übergabe von Parametern in
Online- Formularen verwendet wird. Obgleich für Maschinen
verständlicher, erschwert diese Darstellung die lesbarkeit und
Extraktion der Inhalten für einen Menschen. Strukt uren dieser
Art sind im Web unbeliebt. Sie sind schwer zu lesen und mühselig zu bearbeiten. Um die Vorteile der visuetlen Darstellung mit
einer semantischen Kennzeichnung dennoch ZU vereinen, kan n
die obere HTM l-Forma tierung mith ilfe von hCa rd mit zusätzlichen Klassen in ein Mikroformat uberfuhrt werden .

EI

HTMl-Form at zu einem Mikroformat erweitern
Zum einen sollten Angaben mit ähnlicher Bedeutung zusammengefasst werden. Im Beispiel gilt dies et wa für die Adresse. Mit hilfe
von Attributen des Formats kann eine semantische Struktur festgelegt werden.
<p ld"· hcard-Hax-Hustermann · class- ' vcard ' >
< span cl as s... " fn" ) <s t rong)Max Mu stermann <1 st rong)
</spa n)
<a class "'"emall href- mal1to:max@nustermann.de - )
max@mu ster mann.de </ a>< br I)
<a class-' url fn ' href .. · http: //www.m ustermann.de - )
Max Hu sterman n</a)
<span class- " adr ' )
<spa n class- " street -address " ) Ma1n zer-Str. 7</span>
<s pan cl a ss- ' l oca 11 ty " >Saa rbrOcken<lspa n>.
<span c la ss ... "pos tal ·code " >66 121</span)
<s pan c la ss ... · country·name · )O eut sc hland</span )
</span )
<span cl ass- " tel ") +4 9 68 1 123 4567</span>
</p)
M

M

• Abbildung 12.10
Eine gerade erzeLtlt e VIsitenkarte kann von Nutzern direkt
verwendet werden - etwa tur
das automatische Einfügen des
entsprechenden Eintrags in ein
Adressbu ch.

Der Quelltext ist relativ selbsterklärend. Einzelne Eigenschaften
der Visitenkarte werden über zusätzlich deklarierte C55-Klassen und HTMl-E lemente definiert. In de r ersten Zeile wird ein
Mikroformat deklariert. Die Angabe class-" vcard teilt Suchmaschinen mit, dass es sich um eine Visitenka rte handelt und
die Bezeichnungen für die Kind-Elemente nicht zufällig gewählt
wurden. Der Rumpf der Visitenka rte befindet sich innerhalb des
Absatzes. Beachten Sie, dass eine Angabe durch Spezifikation
mehrerer Klassen mehrere Bedeutu ngen erhalten ka nn. So steht
M

124

Visi tenkarte als hCard

I

735

<a cla ss-"url fn " ... > sowohl für eine URL~Adresse als auch
für den formalen Namen des definierten Objekts. Das Ergebnis
sehen Sie in der Abbildung 12.9.

a

Visitenkarte veröffentlichen

Wird der semant isch aufberei tete QueJlcode etwa auf einer
Kontaktseite veröffentlicht, so können Nutzer, deren Browser
in de r Lage sind, semantische Daten zu ex trahieren, die Visiten~
karte direkt in ihr Adressbu ch hinzufügen . Die Suche nach einer
E~Mail- Adresse ist genauso wie ein manuelles Einfügen der Daten
nicht mehr notwendig.
Nach de r Veröffentlichu ng können Sie manueJi siche rstellen,
dass die Daten direkt interpretiert und wei tergeleitet werden . Eine
Übersicht über Ervveiterungen, mit denen Sie in derWeblog-Engine
WordPress Ihre Mikroformate dynamisch generieren und einbetten
können, finden Sie unter http://microformatiorg/wiki/wordpressplugins (Linkcode 498) sowie in dem Beitrag »M icroformats and
W ordPress Themes-o. (http://forefle.wordpresicomI2007/09/01/
microformat5 -and-wordpress-themes/ (Linkcode 499» . •

12.5

Mikroformate miteinander
kombinieren

Es ist durchaus möglich, mehrere M ikroformate zur semanti schen
Darstellung von Inhalten miteinander zu kombinieren, um die
Inhalte präzise r zu beschreiben .
Nehmen wir an, dass ein Zitat möglichst exakt semantisch ausgezeichnet werden soll. Standardmäßig könnte die HTML-Format ierung wie folgt aussehen :
<p><a href- .. http: //www. simplebi t s. com.. >Dan Cederholm</ a> sc hrleb: </ p>
<p>De si gned f or hUffian s fi r st and ma chines se co nd .
ml c ro format s are a set of simple. open data f o rmat s
built upon exl stlng and widely adopted st andards . </p>
Die Semantik lässt sich durch eine entsprechende Auswahl von
HTML-Elementen, in diesem Fall <c ite > (Quellenangabe) und
<bl oc kqu ote > (Zitat), angeben.
<p><cHe> <a href - ' http: // www. s lmp l eb1ts.com · >
Dan Cederh olm</ a></c 1te> sc hrieb: </ p>
<b 1oc kQuote c i te- ' http: // www . mi c ro f orma t s . 0 rg / ... ' >

736

I

11

Mikroformate

I

<p>Designed f or humans fi rst and machines second .
mi cr of o rm at s are a se t of si mple. ope n data f ormats
buflt upon exfs t ing and wfdel y adopt ed standard s . </ p>
</ bl oc kqu ot e>
Um diese Angabe zu einem hCard-Mikroformat zu elWeitern,
genügt es, eine formale Definition von hCMd einz ufügen.
<p><c ite cl ass-" vca r d" ><a href- '' http: //www. sfmplebit s.com " class- "ur l fn " >Dan Cede rholm</a></c ite >
sc hrfeb: </ p>
<b l oc kquote cfte- " http:/ / www .mi c roformats .orgl ... " >
<p>Designed f or humans fir st and machlnes seco nd,
microformilts He a se t of sfmple. open dilta f ormats
built upon exis tin g and wld el y adopt ed sta nd ards . </p>
</ blockquote>
Die Person kann mit dem XFN-M ikroformat näher spezifiziert
werden. Sollten Sie mit Dan Cederholm zusammenarbei ten
und sich mit ihm get roffen haben, so wäre die folgen de Angabe
semant isch korrekt
<p> <c ite el ass- " vcHd ">< a re l - "met eo ll eague "
href - '' http: //www . slmplebit s. eom '' elass- "url fn " >
Dan Cederho lm</ a></c ft e> schrfeb : </ p>
<bloekquote efte " " http: // www .mleroformats .org/ .. . • >
<p>Designed f or humans fir st and maehines seeo nd.
mi ero f orma t s are a se t of s imple. ope n data f ormat s
bufl t upon exfs t ing and wfd ely adopted st anda rd s . <l p>
</b lockquote >

.. Abbi ldung 12.11
Mikroformate können auch
miteinander kam biniert werde n.

12.6 Zusammenfassung
Beachten Sie, dass Metadaten, die durch Mikroformate explizit
angegeben werden, derzeit von einschlägigen Suchmaschinen
nur indirekt berücksichtigt werden. Die meisten Crawler können
bei der Analyse von Mikroformaten lediglich Verknüpfun gen zwischen dem Autor und dem Inhalt herstellen. Aber sowohl Zusammenfassungen von Daten als auch die Auswertung der Semant ik
befinden sich im Moment in einer Implementierungsphase.
Mikroformat e sind einfach, nützl ich und prakt isch. Besser
struktu rie rte Webinhalte. exaktere Ergebnisse in den Suchmaschinen, ein leichterer Zugang zu Daten und ein schnellerer Export

HINWEIS

Häufig wird die Bedeutung von
Mikroformaten höher als die von
AJax eingeschätzt - nicht ganz
zu Unrecht. Denn durch Mikroformate könnte die Qualitdt
des Webs einen rasanten Umschwung erleben.

12.6 Zusammenfassung

I

737

von Informationen sind die wesen tlichen Vorteile, die sich schon
bald durch sie ergeben w erd en.

12.7

Ressourcen

Bei keinem der Mikroformat e i st es notw endig, die einzelnen
Att ribu te des jeweiligen Formats detaill iert zu st udieren und diese
manuell sinngemäß umzusetzen. M ithilfe von ~ F- Generatoren
können Daten automatisch im gewählten Format auf bereitet werden. Der standardkonforme Q uelleode wird online gen eriert.
Abbildung 12 .12 .Se mantische Dienste sind selte n
aufregend, liefern aber enorme
Vorteile, Dies gil t auch für hCalendar Creator, einen Dienst, der
inhalte für die Beschreibung von
Veranstaltungen online semant isch autberei tet.

.....---

IaC .. IP IU.l1l1' C '·.lItm·
.~

-

.... _

,_ _
'"'"··" .. ,,,' _ _ .... .,n'..
.....
. .. ,.
......".....
"'...

"'..,-..>. . --' "'--,...... "..

-. - 1" - -

1""

1"""

..... ,-

,,",w

, , _ .......- _ ......... u<..".....

" ...........,...,,,, _"."·,n,,,
-'"

,.."

'"'''~ ..' ' ' ' _ - - . . ... . , _.... _

._·"..-.......
__
. _. ""... . ",,-.
,-..,,.......
ffit . -

~11!l.1OO' ''''' '''
..... _
_
.. _ ..

Ei ne Übersicht über Tools und
Beitr;Ige zu Mikroforma ten
finden Sie im Beitrag .M icroformats: What They Are and How
To Use Them. (http://www, smashl ng magazine. coml2007/05l04/

m/uoformati-what -t hey- are- andhow- to-use- th em , linkcode 500).

Der Beitrag enthält Referenzen
auf alle Quellen, die in diesem
Kapitel velWendet wurden.
Abbildu ng 12 .13 ..
Obersicht über MicroformateIcons

a

'

J..._ '

".,

,,,..,.
"'_ , ' "
,,,,,,,_

-

~

J .... _">O<..

--,-~

• _ _ _ ..... - <l, .... ·, .....

TIPP

,-_.

t~:.::-:::.~...:~-:::~::!!!··

- -~

u·,_

~

-,,,,..,,.,

" - " ' -..',- ·,n...
..",.'-.-"
_u",

·~

In den meist en Web Publishing Engines, etwa in WordPress, sind
die Funktionen zur Ausze ichnung von Dat en mit hilfe von M ikroformaten bereit s impl ement iert . 1st dies nicht der Fall, so stehen
dem Nutzer meistens zusätzl iche Plug-ins zur Verfüg ung, welche
die Format ierung übernehmen, ohne dass der Webautor etwas
davon merkt . Grundsätzli ch wird der generierte Code fü r die
Vermittlung der Semant ik genügen. Für die gewünsch te visuelle
Da rstell ung werden Seitenelement e häufig m it en t sprechender
C55- Format ierung erweitert werden mussen.

I

I

I

BI

Im

miI

Eine Sam mlung von Icons und Bildern zum Einsatz in Webseiten, die semant ischen Mikroinhalt aufweise n, finden Sie auf der
Seite »Microformats lcons", (http://wWvV.jactoryCi ty.net/projects/
microjorma ts -icons (linkeode 501».

738

I

11

Mikroformate

13

Mashups

Eine der wesentlichen Komponenten des Web 2.0 ist das Verschmelzen von Ideen, Daten und Projekten. Offene Programmierschnittstellen (APls) bieten Webentwicklern Möglichkeiten,
verschiedenste Informationsquellen kreativ miteinander zu kombinieren. Spezielle Kenntnisse werden meistens nicht vorausgesetzt. Der Seitenbetreiber darf selbst entscheiden, welche Programmiersprache er vervvenden möchte. Bei kleinen Projekten
lassen sich Daten auch ohne Programmierkenntnisse recht intuitiv zusammenstellen : dynamisch und oft in Bruchteilen von

Sekunden.
Das neue Phänomen hat einen passenden Namen : MaJhups
stehen für Webprojekte. die sich mehrere öffentlich zugängliche
Informationsquellen zunutze machen, etwa um neue Dienste
anzubieten und daraus einen Mehrwert zu generieren.
Das Faszinierende an modernen Webanwendung ist die
Unvorhersehbarkeit ihrer Weiterentwicklung. Meistens können
Entwickler selbst nach einem Release nur vage vermuten, weiche Gestalt ihre Applikation schon in naher Zukunft annehmen
wird. Denn geprägt durch das Verhalten der anspruchsvollen
Anwender ist die QuaHtätssicherung im Web 2.0 wie nie zuvor
an eine permanente Wartung und Erweiterung gebunden. Mit
wachsender Popularität können beide Aspekte sowohl kostenals auch zeitaufwendig werden. Um den Erwartungen der Nutzer
dem,och gerecht zu werden, liegt es nahe, die Erweiterung des
Dienstes der Öffentli chkeit zu überlassen und eigene Kräfte für
eigene Ideen zu bündeln. Dadurch wird die Voraussetzung für
öffentliche APls gegeben und somit eine optimale Grundlage für
Mashups geschaffen.

Softwar..-Zyklus
Die Abschaffung des SoftwareZyklus schafft im Web 2.0 neben
neuen MOglichkelten auch neue
Herausforderungen. Der mobile
Nutzer erwartet Dynamik und
eine permanente Verbesserung
der Quallt<!!. Konsequenz: Ent wickler müssen Ihre Dienste stetig aktualisieren und erweitern.

13

Mashups

I

739

amaztype-

""

... " .....".. "...,.,...........
,..........,'"
.... _,_
........""
~~_

,_.~'"

, ., ,n

I ".ItM

.. Abbildung 13.1
Zu einer Anfrage generiert
das Mashup amaztype (http i/
amaztype. th a.j p) ei ne visuelle
Karte von Büchern aus der
Amazon-Datenbank.

Die Tatsache. dass durch öffentliche Schnittstellen innovative und
kreative Projekt e entstehen. die auf bekannte Projekte aus einer
ganz anderen Sicht bli cken lassen. komm t als Zusatzfaktor hinzu.
Nebeneffekt: da s Spektrum der Anwender wird erweitert.

......
a _ ... _

•

0--- e----

.--e ___f..----

.. Abb ildung 13.2

... Abbildung 13.3

Fliekr und Google Maps. Die neuen Bilder auf Flieh.
com zeigt flickrvision (http://fli ckrvis ion .com) direkt
auf einer virtuellen Kart e an .

Musiemap (http://www.dimvision.com/musiemap)
verwendet Dienste, um beliebte Musikstücke und ihre
Bez iehungen zuei nander grafisch aufzubereiten.

Ab bildung 13.4 ..
Moodstream (h ttp://moodstream.
gettyimages.com) ist das Beispiel
für ein klassisches Mashup. Der
Dienst bietet Bilder, Audio- und
Videodateien aus der gettyimages-Stock-Bibliot hek an und
stellt diese Besuchern zur Schau.
Die dargestellte Mischung lässt
sich mit einem Regler anpassen.
740

13

Mashups

•

..

13.1

I

Was sind Mashups?

Im Allgemeinen stehen Mashups für Webprojekte, in denen
externe Inhalte aus versc hiedenen Ouellen dynamisch mitei·
nander kombiniert werden . Diese Inhalte können beliebig sein .
Neben Daten sind auch Mult imedia-Elemente (Audio, Video)
oder interaktive Komponenten (etwa Flash) möglich.
Die Integration externer Inhal te kann folgendermaßen erfol-

gen :
~

..

durch einen Zugriff auf R55- oder Atom-Feeds
durch die Verwendung von Widgets

.. durch sogenanntes Web Scraping (Auslesen/Ex trah ieren von
Daten aus Webdokumenten),
..

durch einen Zugriff au f Daten über APls (VelWendung von
Webdiensten)
.. Abbildung 1] .5
Neuigkeiten können auch visuell
aufbereitet werden . PhylotaJIis

(http://www .phy lotaxis.com!
phylotaxls .html, Unkcode 505)
sammelt wissenschaftliche Neuigk~it~n aus Dutzenden von Quellen und bereitet diese visuell auf .

.. Abbildung 1] .6
Newsmap (http://www.
marum ushi .comlapps/newsmapl
newsmap.cfm . linkcode 506)
bereitet Nachrichten aus verschiedenen Quellen und nach
verschiedenen Themen visuell
auf. .Ie popularer und Wichtiger
~In~ Nachricht iSt, desto grOßer
erscheint sie auf der Nachrichtenkarte . OUfsignal .com ist ein ahnliches Mashup. das Nachrichten
aus Communities präsentiert.

'3.1 Was sind Mashups?

I

74'

In allen Fällen werden Sie bei Ihren Mashups eine Mischung
mehrerer Techniken verwenden.

13.2
Web-Feeds
Mit Web-Feeds kann jeder meisterhaft jonglieren . Mithilfe bekannter Webdienste können Sie
Ihre Inhalte in Bruchteilen von
Sekunden zusammenstellen.

Feeds im Einsatz

Zunehmender Beliebtheit erfreuen sich Web-Feeds bei Webautoren u nd Lesern. Sie machen es möglich. nicht nu r direkt über
neue Inhalte benachrichtigt zu werden, sondern diese auch dynamisch zu behandeln. Bei der Integration in ein Mashup werden
ext erne Feeds in regelmäßigen Zeitabständen geladen, auf Akt ualisierungen hin überprüft, schön aufbereitet und anschließend
in einer kompakten Übersicht zur Schau gestellt. Der Zugriff auf
die Feeds kann dabei mithilfe einschlägiger Dienste vollkommen
automat isiert erfolgen. Auch das Platzieren der Inhalte kann
automati sch geschehen.

13.2.1

Personalisierbare Startseiten

Die einfachste Methode, Web-Feeds zu kombinieren, stellen
personalisier bare Startseiten dar. Mit Nelvibes.wm, Pagefiakes.
corn, iGoogle (google.com/ ig) und Dutzenden wei teren Diensten
können beliebig komplexe Zusammenstellungen erstellt werden.
Diese können sich au ch Ober mehrere Seiten erstrecken. Neben
Feeds erlauben es solche Diens teauch, zahlreicheweitereModu le
einzufügen. Etwa eine Wetteranzeige, Neuigkeiten, Börsenmeldungen, Flick r-Bilder, YouTube-Videos, Last.FM-Musikstücke und
vieles mehr. Die Anzahl der Komponenten wächst stet ig. Über
eine öffentliche API können Entwickler neue Module entwickeln
und veröffentlichen.
4-Pagl llakes

_...._-

~

.............-_M ___

o , .. "~.

~"'-"...

- -- -_.
C ... _

0 .5<. -

- ... _. --- -,

'-

Abbildun g 1].7 ..
Ein Music-Player, die Karte mit
aktuellen Veranstaltungen sawie
die Wettervorhersage in Einem:
die pe~onalisierbare St artseite auf
Pageflakes.com.

~ -,... Q
~
,..,.,..... - .
"1:>

--.-0___ -.-_.,
~ -_

",.,...

.'.:,.--_
_
.
.......=--.-._--- ...__----.
.....

... ...

.,

Bei personalisierbaren Startseiten müssen Sie meist ens davon
ausgehen, dass sie nur zum privaten Gebrauch gedacht sind und
nich t veröffentlicht werden können. A ls Startseiten können sie
jedoch ihren Dienst seh r gut leisten und Nutzern eine Menge Zeit

742

I

'3

Mashups

I

sparen. Einen Überblick über personalisierbare Startsei ten finden
Sie auf der folgenden Seite:
http://mashable,com/2007/06/11/m-toolbox(Linkcode 507)
13 .2.2 Feeds mi sc hen, filtern und aufbereiten
Ein wesentl icher Nachteil personalisierbarer Startsei ten ergibt
sich durch ihre eingeschränkte Funktionalität. Meistens werden

Sie bei pe rsonalisierten Homepages einzelne Module einzeln hinzufügen können. Die jeweiligen Blöcke werden nebeneinander
angeordnet und lesen Inhalte automatisch aus. Doch Sie kön nen die abgerufenen Daten unt ereinander nicht austauschen.
Eine Kombinat ion mehrerer Mod ul e zu einem Zweck wird also in
meisten Fällen nicht mögl ich sein. Auch benutzerdefinierte Fi lter
lassen sich meistens nicht einrichten.
13 .2.3 Feed Bund/er
Mit Grazr.com, Feedor.com, xFruits ,com (s. Abbildung 13.8), Feedrinse.com und Feedcombine.co,uk können Sie mehrere Feeds zu

einem Feed bündeln. Dies kann beispielsweise prakt isch sein, um
Inhalte zu einem Thema zu sammenz ufassen, ohne mehrere Feeds
durchgehen zu mussen.

-I
!

!

!

•

...._.

!

-

9

•

_.-

ISS . MI

!

!

@l

_.-

-

!

!
.. Abbi ld ung 13.8

-

g

xFruitS,com ist ein eher unbekann ter Alleskönner. Mit dem
Dienst können Sie mehrere RSSFeeds bündeln, Nachrichten per
E-Mail, Handy oder sogar per
Post ver;enden , daraus PDFDokumen te erzeugen oder sic"
vorlesen lassen.

13 .2.4 Feed-Filter
Um unerwünschte Inhal te aus einem Feed automat isch zu entfernen, kann der Dienst Feed Rinse verwendet werden . Filter lassen

sich manuell angeben und mit häufigen Filtern anderer Nutzer
abgleichen. Aus einem oder mehreren Feeds generiert der Dienst
eine OPML-Lis te von Feeds, die Ihre eingestel lten Filter passiert
haben.

FeedRinse
... Abbildung 13.9
Das Logo von Feed Rinse

'3.2

Feeds im Einsatz

I

743

a Engadget
Abbildung

1] .10 ..

Mit Feedrinse .com können beliebige RSS-Feeds gefiltert werden
- automatisch und gemäß den
Eifl'itellungen des Nutzers.

"'''
"'''
"'''

oHM ....

~ (cnlOl,ns
~ (CnIOl'ns
~ ccnIOl,n.

.:J
.:J
.:J

cdlphone
rcbct
ICy

Da
Da
Da

13.2.5 Manuelle Im plementierung Feed-basierter Mashups
Die Mischung von Web-Feeds kann auch mithilfe von SeNerskripten manuell programmiert werden. Eine Möglichkeit zur
Implementierung eines Feed-Aggregators " ZU Fuß « wäre CaRP:
Caching RSS Parser zum Extrahieren, Fi ltern und Aufbereitung von
Inhalten (http://www.geckotribe.com/rss/carp(Linkcode 508)).
Die kostenlose Version CaRP Free reicht für Ihre Zwecke sicherlich aus. Voraussetzungen sind PHP, MySQL und ein Dienst zum
Bündeln geladener Inhalte zu einem neuen Feed.
Eine detaillierte Beschreibung der Vorgehensweise bei der
Implementierung eines Feed-Aggregators können Sie auf der folgenden Seite nachlesen: http://www.drweb.de/leseprobenlfeedaggregat or·bauen,shtml (linkeode 509)
Mit nur wenigen Werkzeugen ist es möglich, einem Feedbasierten Mashup eine beliebige Struktur zu verleihen, ein beliebiges Design zu entwerfen und Inhalte mittels PHP nach beliebigen Kriterien zu selektieren und zu formatieren.

Ab bildung 1].11 ..
Popurls.com ist einer der popuIi'irsten Feed-Aggregatoren Im
Web. Kombiniert werden populäre Beiträge im Web, aber auch
Bilder, Videos und Podcasts.
744

I

13

Mashups

I

13.2.6 Mashup.Editoren
Eine fortgeschrittene Lösung bieten sogenannte Mashup-Edi toren
an. Sie ermöglichen einen besseren Zugriff nicht nur auf Feeds,
sondern auch auf beliebige weitere Inhalte der Seiten. Sie lassen
außerdem Module Informationen untereinander austauschen .
Möchten Sie mehrere Datenquellen miteinander kombi nie·
ren, so werden Ihre Informationsquellen sicherlich nicht immer
in einem struktu riert en Format angeboten, mit dem Sie direkt
arbeiten können. Auch werden Sie häufig Tools benötigen, mit
deren Hilfe Daten aus ganz speziellen Quellen au tomatisch aus·
gelesen werden können. Aber solche Tools existieren leider noch
nicht. Um gewisse Inhalte dennoch zu extrahieren und auf sie
zugreifen zu können, ist sogenanntes Web Scraping erforderlich.

13.2.7 Yahoo! Pipes
Beispielhaft dafür ist die Plattform Yahoo! Pipes (http://pipes.yahoo.
(om). Feed·lnhalte lassen '>ich filtern, sortieren, verarbeiten und
miteinander kombinieren . Die Ergebnisse einer Anfrage können
weiteren Modulen als Parameter übergeben werden . Die en tsprechende Festlegung können Programmierer manuell vornehmen.

-- _.
.-....--_- ..
.'-.. •

---

.~

--

_
.
--_.'
"
_
..
- ,

~.ii_ii.~_ii.ii_~_~. ~.~_
~_~~--~.""'I . ~_~_ii_~"'''''
_ ~ --

'"

tO ~ ..

• _

I

• .. _ . " , _

- ..

. . ._-_., . . ....,.

Ir

-

-_o.o-i~_-

a __

I

~,

o-f~

.... _

•

,. _

.. Abbildung 1].12
Mit Yahoo! Pipes können relat iv
kompleke Mashups erstellt werden. Daten lassen sich nltern, sortieren, an verschiedene Dienste
ubergeben , verknupfen und in ein
Wldget einkapseln.

Die Programmierung des Mashups erfolgt visuell. Um die Ausgabe einer Quelle etwa durch einen Filter zu modifizieren, genügt
es, zwei neue Objekte auf den Canvas zu platzieren, diese zu
konfigurieren und durch Knoten miteinander zu verbinden. Den
Rest erledigt Yahoo.' Pipes automatisch. Neben dem Kombinieren von RSS·Feeds können Sie mit Yahoo! Pipes ebenfalls geografische Daten laden und somit etwa interaktive Mashups ohne
einzige Zeile Quelleode entwickeln . Darin liegt auch der Nach·
teil der Anwendung . Es ist beispielsweise unmöglich, den Quell·
code direkt zu modifizieren. Der Entwickler muss sich auf eine
Drag & Drop·Programmierumgebung einstellen .
1].2 Feeds im Einsatz

I

745

Der Dienst erzeugt ein Widget, das au f dem Server von Yahoo.l
Pipes ausgeführt wird. Die Einstellungen werden abgespeichert
und können in der Engine verändert werden. Yahoo.l Pipes emp-

fiehlt sich unter anderem für komplexe Projekte, bei denen
erzeugte Mashups in anspruchsvolle GU ls (z. B. Flex-Anwen dungen) integriert werden.

13.2.8

•

-

..... -_ ... -

•

"'--"-*

.. Abbildun g 13.13
Dapper.net

Dapper

Ei ne fortgeschrittene Alternative zu Yahoo.l Pipes stellt der kosten-

lose Dienst Dapper (http://www.dapper.net) dar. Mit ihm können
Sie beliebige Teile von Sei ten ext rahieren, miteinander kombinieren und in verschiedenen Formaten (HTM l, XML, RSS, iCal,
Google Maps, E-Ma il, JSON, Flash W idget) ausgeben lassen. Programmierkenn tni sse sind dabei nicht erforderlich. Die Inhalte, die
Sie interessieren, lassen sich in einem internen Browser auf der
Seite des Dienstes zusammenklicken. Dabei gibt der Anwender
zuerst eine oder mehrere Seiten vor, aus denen I nhalte extrahiert
werden sollen . Der Dienst analysiert die Sei ten anschließend,
sucht nach Eingabefeldern und schlägt Variablen vor, die im Mashup verwendet werden können. Möchten Sie beispielsweise bei
YouTube etwa alle Videos mit dem Tag ,. Photoshop« abonnieren,
so müssen Sie bei Dapper eine Variable festlegen, über die eine
entsprechende Suchanfr<l8e an YouTube übermittelt wird.

- . -.....

-,

o __ , " ,..- •._ _ '••'_.'

-----.................
--...
,--_
_----'-"'.... _-

'.-_..
_. ....

Articles by Topic:
Monday Inspiration

...

~._-

-~_

Ab bildung 1J.14 •
Inhalte, die Sie interessieren,
lassen sich in einem inter-

nen Browser auf der Seite des
Dienstes zusammenklicken.

_
..................._
..-----__. _. _-T,bot.To 0..11111: 50

"""'-' -~

s-.!IIUI ClnffiU ArlW«k.

-

""~"~.,,:
n_ .........

_

.... _ _ •

._

--_
. _... _
--_
_
_- _. . . _. . . . . . . . --«
35 s-.IIIU! E.urnplH Cf
Raki PhOl~~y

..

_ _ _ n ... . _ . , . , _

....

......

.. DESIGN

'-JYP XHTML
I

Die Bausteine des Mashups werden visuell zusammengestellt
und können auf der Seite des Dienstes abgelegt werden. Alternativ lassen sich Mashups als Widgets in Seiten einbauen oder in
einem Feedreader als Feeds einfUgen. Im Hinbli ck auf die verfügbaren Funktionen stellt Dapper ein robustes und intuitives Werk746

']

Mashups

I

zeug zur Programm ierung von Mashups dar. Falls Sie Inhalte von
Seiten schneit und problemlos zusammenstellen wolten. kann
sich Dapper als eine sinnvolle Möglichkeit elVlfeisen.

13.2.9 Microsoft Popfly
Mit Popjly (http://www.popjly.com) st ieg auch Microsoft ins
Mashup-Geschäft ein. Dies vor allem, um M icrosoft Si/verlight.
eine Web-Präsentationstechnik, die als Konkurrent zu Adobe
Flash gesehen wird, im Web stärkere Präsenz zu verschaffen. Um
den Dienst nutzen zu können , sind Microsoft PaS5port sowie eine
Microsoft-Live-Adresse notwendig.
Mit Popjly stellt Microsoft Entwicklern eine anspruchsvolle und
zugl eich intuitive Programmierumgebung für Mashups, W idgets
und Webapplikationen zur Verfügung. Die Benutzeroberfläche
und Interaktion erinnern sehr stark an Yahoo.l Pipes. So lassen sich
beispielSINeise Beziehungen zwischen Inhalts-Boxen ebenfalls
durch Knotenbeziehungen herstellen.

• Abbildung ' 3.' 5
Microsoft Popfly ist anspruchsvoll
und intuitiv zugleich. Der Diens t
selzt allerdings eine langwierige
Anmeldung voraus.

... Abbildung 1] ., 6
Microsoft Popfly im Einsatz.
Inhalts- Bo~en lassen sich durch
Knoten rniteinanderverbinden.
Hier werden Flickr-Bilder auf die
Karte von Microsoft Virtual Earth
projiziert. (Quelle: http://ieedaie.
wordpress.com)

Das Werkzeug weist eine Vielzahl professioneller Templates auf.
Diese dienen zur Erzeugung üblicher Mashups, aber auch für
Spiele, Fotogalerien oder Silverlight-Seiten. Au ch der Zugriff auf
geografische Daten und deren visuelle Aufbereitung au f einer
interaktiven Karte ist mit einem eingebauten Modul möglich.
Popjly kann mit JavaScript, Ajax-Bibliot heken und MultimediaDateien umgehen. Das Tool ist kostenlos verfügbar, benötigt
jedoch ein vorinstalliertes Silverlight-Plug-in und lässt sich als
Add -in in Visual Studio einbinden.

13.2.10 Google Mashup Editor
Im Unterschied zu den obigen Mashup-Umgebungen ist ein visuelles Zusammen klicken von Mashup-Elementen mit dem Googfe
'].2

Feeds im Einsatz

I

747

Mashup Edit or (http://editor.googfemashups.com) nicht möglich.

TIPP

Bei der Programmierung von
Applikationen für soziale Netzwerke lohnt sich ein Blick auf
Zembly (zembly.com). Dieser
Dienst soll im Jahr 2009 eine
Webumgebung für die Entwicklung von Facebook-, Meebo-,
Open50clal~ und iPhone-Anwendungen bereitstellen. Der Dienst
istzu r Zeit als Private Beta veröffentlicht.

Stattdessen nutzt Google eine spezielle Syntax (G ME -Tags), die
stark an die klassische HTML- und (S5-Syntax angelehnt ist.

--- ,-,-,""""-..... _ . . _.
_--_._=-=====

-_
... ... .... -.--,
.......

,

",, ~

- -,_ .~ ."._

..

"'TI", , "'-

".",.>

,._-,

...........
.,.......
Abbildung '3.' 7 ~

Google Mashup Editor:
Klassischer HTML- und CSSQuelicode mit spezieller Syntax

--

_

....'

_ _ _ _ _ _ _ .. . . . MQ . . . . . . . _

..._

..

Mit dem Google Mashup Editor können Entwickler Ajax-Komponenten, externe Inhalte und zahlreiche Google-APls (Google Base,
Google M aps, Google Earth , Google Books, YouTube) zusammenfü gen, testen, debuggen (Sandbox) und anschließend direkt ve röffentli chen. Um externe Inhalte zu bearbei ten , kann man Vorlagen
(Templates) programmieren, die geladene Inhalte modifizieren
und dynamisch in die gewünschte Form bringen. Die entw ickelt en Mashups lassen sich als Google Widge t5 export ieren. Der
Dienst befindet sich im Moment noch in der Beta-Entwicklungsphase. Ein Release ist für Anfang 2009 vorgesehen .

.. _.... __ .. _.
Gcl!?sle

Abbildung ').18

._-

-- .........

~

Ein Mashup mit YouTube-Videos
und Picasa-Fotos, generiert in My
Maps von Google Maps.
Beachten Sie, da ss beinahe jede Google-Anwendung einen integrie rten Mashup-Editor schon mitliefert. So ist es über die Funkt ion My Maps mit Googfe Maps möglich, eine eigene Karte mi t
passenden Inhalten visuell zusammenzuklicken.
748

I

'3 Mashups

openkapow
Im Wesentlichen lässt sich opeflkapow (http://opeflkapow.com)als

I

13 . 2.11

eine fortgeschrittene Versi on von Dapperansehen. Das Werkzeug
generiert sogenannte Robots, die das Verhalten der Nutzer im
Browser Klick~für-Klick beobachten und analysieren und daraus
passende Daten erkennen. Um einen Robot zu erstellen, muss
die Desktop~Anwendung Robomaker installiert werden.
.... , ..

" I I!:I.

lIIl

1
I,

-~._ --_..-.._-

TIPP

In Kapitel 11, »Ajax« , sollte
der Ajax-basierte Katalog eine
Vorschau zu einem Buch nach
der Angabe der ISB N-Nummer
erzeugen. Mit openkapow lässt
sich dies rela tiv schnell realisieren. Eine vorlage finden Sie
auf htrp://openkapow. comlfilesl
jofders/soclaI_ner--vorklng_and _
comm un lcatlorVen try186 72. aspx
(Linkcode 510).

.. Abbildung ' 3.'9
Für die Programmierung von
Mashups mit Robomaker müssen
Sie Geduld mitbringen.

Es lassen sich drei Typen von Robots entwickeln; RSS, REST oder
Web Cl ip Robots, die jeweils RSS-Feeds oder API-Sch nittstellen
erzeugen oder Funktionen von Seiten bundein können. Das Tool
openkapow ist nicht unbedingt intuitiv, dafür aber sehr robust
und mit vielen Funktionen ausgestattet. In der Datenbank des
Dienstes stehen über 5.000 Robotszum kostenlosen Abruf bereit
Sie können als eine gute Grundlage für Ih re Projekte dienen und
lassen sich mit Robomaker leicht modifiz ieren und erweitern.
13.2.12

Presto

Die oben vorgestell ten Werkzeuge erfullen für alltägliche Auf~
gaben sicherlich ihren Zweck. Bei aufwendigeren und komplexeren Projekten werden sie dagegen sicherlich nicht ausreichen.
Wer auf der Suche nach einer umfangreichen Umgebung für die
Entwicklung von Mashups i st, wird bei der Mashup-EnterpriseLösung Presto (wwwjackbe.com)optimal bedient.
Die Umgebung unterstützt SOL und stellt AP1-Schnittstellen
für JavaSeript, Java, REST, eHund .N ET bereit. Zudem kann man
Mashups mit Komponenten aus Microsoft Excel und Oracle
WebCenter kombinieren. Das Werkzeug lässt sich unter anderem
als Eclipse-Ptug-in verwenden.

------------- --------------------------\/ --. -~

• Abbildung ' 3.20
JackBe.com

'3.2

Feeds im Einsat z

I

749

Eine ausfüh rliche Übersicht über zehn Mashup- Editoren (darunter auch Data Mashups und Proto) finden Sie auf http://mashable.
coml2D071071081mashupsi (linkcode 511).
Eine liste kostenloser und kommerzieller Masllup-Editoren
finden Sie auf der Seite http://en.wikipedia.orglwiki/ Mashup_
editor (Linkeode 512).
Mashups müssen nicht unbedingt dazu dienen. eine Webappli-

• Abbildung 1 3.~ 1
MelZilla Ubiquity (http://
labs.mozilla.corrJ2008/08/
introducilll-ubiquity) ist eine
experimentelle Erweiterung für
Firefo)(, mit der Nutzer WebInhalte über eine Kommandozeile bequem kombinieren und
verknüpfen können. Möchten
Sie z. 8. einen Ausschnitt einer
Webmail einfügen, so kann dies
mit Ubiquity ohne speZielle
Kenntnisse der Programmierung
erledigt werden - die Befehle
werden in der Umgangssprache
eingegeben.

kation zu entwickeln. Sie können auch von Nutzern verwendet
werden, um Inhalte direkt im Browser miteinander zu verknüpfen . So Jassen sich zum Beispiel bei M ozilla Ubiquity (http://
labs. mozilla. comI 2OD8/08/introducing-ubiquityl (Unkcod e 513»
und bei Intel At1ash Maker (http://mashmaker.intel.com/ (linkeode 514» beliebige Webseiten im Browser miteinander kombinieren.
Hat etwa ein Nutzer eine externe Seite in seinen Browser geladen. so kann man mit diesen Tools externe Dienste und Anwendungen an diese Seite knüpfen. Beispielsweise kann man eine
Karte von Google Maps in ein Verzeichnis dynamisch einbinden
oder auf einer Webmail-Seite eine Adresse auf Google Maps projizieren und direkt als Bild einfügen. Beide Tools befinden sich
noch in einer frOhen Entwicklungsphase. Sie zeigen aber schon
deutlich eine Richtung auf, in die sich die Entwicklung von
Webapplikationen in Zukunft bewegen wird : Widgets.

13.3 Widgets
Im Grunde genommen basie ren personalisierbare Start seiten auf
der Kombination von Skripten. die Inhalte aus bestimmten Quellen automatisch auslesen. bearbeiten und präsentieren. Werden
diese Module nicht auf einer externen Seite angezeigt, sondern
beispielsweise innerhalb eines Weblogs, so spricht man von Widgets. Es handelt sich dabei um Ervveiterungen. mi t denen sich die
Funktionalität einer Sei te durch dynamische Inhalte und Dienste
ergänzen lässt. Bei Widgets handelt es sich immer um Flash-Elemente oder Serverskripte (JavaSeript, PHP), die eine Schnittstelle
zwi schen einem Webdienst und einer Webseite darstellen.

13.3.1

Was ha ben Widgets zu bi eten ?

Neben externen Inhalten lassen sich mit Widgets beliebige interaktive Elemente einfügen und vermischen. Da moderne Widgets
häufig auf Aj ax basieren. können Seiten auf diese Art leicht mit
Attributen typischer Desktop-Anwendu ngen versehen werden.
So ist es etwa möglich, aktuelle Musikneuigkeiten mit Charts,
einem Music Player, einer Such maschine für Musikstücke (Allmu750

I

13

Mashups

sic.com), einer Rezensionssuche (Amazon,de) und einem Preis-

vergleich (PriceGrabber.com) relativ schnell in einem Web 2.0Look zusammenzubauen. Die Anfragen werden im Hintergrund
an entsprechende Server weitergeleitet. Die Ergebnisse werden
dann in Bruchteilen von Sekund en unter der Such box angezeigt,

~

-1,11• • .

0 810 9

o
tt.t..
o Oth."
50<:1.1

PoIID.ddy. oorn

l

otk

vole
J

----_--__

-_·..... "'. . D .....

,

n-.... _ _ _ ... ' ...

,

••11

t.

HINWEIS
Gegner von Wldgets warnen Webentwickler v()( einer
übermdßigen Verwendung
dynamischer Erweiterungen .
Blinkende oder aufdringliche
Flash-basierte Widgets sind im
Web 2.0 genauso unerwünscht
wie Java Apple ts.

. 1\
--".li!
..JI.

~

o W.b ..

=

I

.
\

..... ,

HINWEIS

. _-..-- ~ .

A Ab bildung '3.22

A Abbildun g 13. 23

Eine elegante Umfrage im
Web 2.0-Look- ohne Installation
und ohne Programmierkenntnisse
als Widget verfügbar
(Quelle: Polldadc:o/.co m).

Auf Pageflakes.com kOnnen Sie
beliebige Module e~portieren und in
HTML-Dokumente einfügen. In der
Abbildung die populdrsten Videos zu
einem Schlüsselbegriff bei YouTube.

Widgets können zwar keine
Daten untereinander austauschen. können aber zusammen
mit anderen I nhalten der Seite
in das Seitenlayout eilllebettet
werden .

Das Ergebnis ist ein neuer nützlicherWebdienst, mit dem Sie und
andere Musikliebhaber sich direkt über Musikstücke informieren
können, ohne von einer Seite zur anderen surfen zu müssen.
Der MehrYv'ert wird durch die verkürzte Suche nach spezifischen
Inhalten erzeugt. Eine Exportfunkti on, über die diese Module in
eine Webseite ,.on the fly c integriert werden können, steht beispielsweise Nutzern von Pageftakes.com zur Verfügung. Zu jedem
Modul bietet der Dienst ein dazugehöriges Cod e-Snippet an.
Damit ein gewähl tes Widget in eine Sei te integriert werden kann,
genügt es, dieses in den Quelkode einzufügen . Ist dies geschehen, so wird auf der Seite ein Block erzeugt, dessen Inhalte durch
Pageftakes automatisch nachgeladen, aufbereitet und anschl ießend als HTML-Code angezeigt werden.

13.3.2

Wo find e ich Wid get s?

Aufgrund der zunehmenden Populari tät von Ajax ist es nicht verwunderlich, dass neben Pageftake Du tzende weiterer Anbieter
selbst gebastelte Widgets öffentlich und frei zur Verfügung stel-

A Abbi ld ung 13.24
Timeline W idget bereitet LebemIdufe in einer eleganten Form auf.

( http ://www . widgetbo~ .co mJ

widgeUtimeline)

'3·3

Widgets

I

751

ren . Manche Widgets können heruntergeladen und lokal auf der
Seite des Seitenbetreibers installiert und ausgeführt werden.
Abbildu ng 13.25 •
Flash- Da te-Calendar-Widget
(h tt p) Iwww.widgetbox,com/widgeVfl as h-da te-ca lendar)

"""'. ,.....'"

.........

W'd\t'l'OO .. ·~<

.. .,,1 .. 1>:01 1'"

r" , .. ,..

lIe,aM,~ .. ,~,

Rating. & Comrnenl$

E ".e ..

to th .. IOidco'

Ab bildung ' 3.26 •
RSS-Feedreader als Widget
(http) /grazr.com).

G'-.. ...... ~

...- 1... Il<igh"
UIU. 01 ~ •••

.... rr.. W.b~f.,.., ...

1-1 " ......

cill lQd tJlio G'W'Mdgil,

e. t ". ~ I ....." """ ..... ,.

Ou"'.o

• ltod .....

t.. ., on

Q"'''''' .....

• G/u' WltIget F,.,a

' DI', "'.,....

Ln 01' .... tot ..... .
•• • .....! . ... t . 01 .... ,.. _* ........ . t

I"' .......
t ..

p,,"""'t... ,.<""'''' tr.d
v ....

""~ !if.'1l'W f!r:I) .;..,y

V'e ..

r..,w,

,,,

Tr ... 01 okplo,

HINWEIS
Referenzen zu Hunderten von
externen und lokalen Widgets
finden Sie in dem Beitrag .. Widgets: Baukästen für Webentwickler- (http://www.drweb.de/
weblog/webfog/?p-=671 , Unkcode 515)

.;;._:,

...J

BOI!! F•• ""

.. Pet""""t ~tWln~ u",
'"' Ol'fl"ffl it ~ ..dlll~ U.1S
...J Global

ru,,,..

..J H .... Sil ..
...J S ....d '
;.I

Ef>9 ....

Mt<Iio

Zahlreiche Kalender, Umfragen, Navigationsmenüs, automatisch
generierte Grafiken. Präsen tationen, Timelines, Drag & Dropfa.hige Dashboards, Web Messenger und weitere Widgets sind
kostenlos zu haben und können leicht zu einem Mashup erwei tert werden . Darüber hinaus werden viele Widgets als Plug-ins
für Web Publishing-Plattformen wie Wordpress angebot en und
können somit gleich in der Wordpress Engine aktiviert und
benutzt werden.
Gehen Sie mit Widgets vernünftig und sparsam um. Allzu
viele Widgets erweitern zwar eine Seite mi t neuen Funktionen,
doch davon müssen Seitenbetreiber nicht unbedingt profitieren.
Beachten Sie, dass Widgets immer als Ergänzung zu verstehen
sein sollten und als sol che unter keinen Umständen bloß als
Selbstzweck vorhanden sein dürfen . Ein Widget ist genau dann
sinnvoll. wenn es thematisch und funktional vorhandene Inhalte
unterstüt zt.

13.3.3

Wie programmi e re ich Wid get s?

Die Entscheidung, mit welchen Mitt eln Widgets programmiert
werden, reduziert sich meistens auf die Komplexität der Anwendung, die damit entworfen werden soll. Bei rela t iv simplen Widgets - etwa für eine textbasierte Anzeige von Suchergebnissen
752

I

13 Mashups

- werden relativ bescheidene Ajax Skripte (JavaScript und DOM)
vollständig ausreichen. Bei einer komplexeren Datenaufbereitung
(etwa bei Online Umfragen) benötigen Sie zum Laden und Aktu
alisieren von externen Inhalten dagegen beispielsweise Iframes
oder alternativ eine Flash-basierte GUI.
Grundsätzlich ist die Programmierung von Widgets jedoch
nichts anderes als das Programmieren dynamischer und inter
aktiver Serve rskripte. In Abhängigkeit von Ihren Kenn tnissen
können Sie zu diesem Zweck etwa ActionScript des Frameworks
Rubyon Rai{s (http://www.igvita .comlbloY2007/06/ 05/creatingjavascript-widgets-in-rails (linkcod e 516)) oder auch das JavaScript
DOjo Too/kir (http ://www.alexarnet.com/ BloYlndex/2006-08-2 7/
creating-new-dojo-widget (Linkeode 517)) verwenden.
Bei ferti gen Skripten müssen Sie diese nicht manuell in widgets einkapseln. Um das Rad nicht immer wieder neu erfinden
zu müssen, können Sie die Plarform auf C1earspring (http://www.
clearsprine-com (Linkeode 518» oder SpringWidgets (http ://www.
rhespringbox.comldevelopers (linkeode 519» benutzen.
Mit C1earspring lassen sich etwa die Pa ram eterObergabe und
Datenbehandlung automat isch erledigen. Widgets werden dynamisch erzeugt, und zwar auf der Grundlage von vorliegenden
Flash- oder JavaScript-basierten Modulen. Die auf diese Weise
erzeugten Widgets können sowohl auf pe rsonalisierbaren Startseiten als auch auf gewöhnlichen Seiten velVllendet werden.
SpringWidgets stellt Entwicklern eine Flash-basierte Plattform zur
Entwicklung von Widgets zur Verfügung. Damit versprechen die
Autoren eine schnellere und effizientere Programmierung mithilfe fertiger Bauteile.
FOrMac OS X können Sie zum Programmieren von Widgets das
Tool Webclip zu Rat e ziehen. Andere Nutzer werden mit Yahoo!
Pipes, Google Web Toolkit und Microsoft Popfly optimal bedient.
Hunderte weitere Widgets-Toolkits linden Sie auf der Sei te:
http://en.wikipedia.orywiki/Widget_toolkit (Linkcode 520)

I

4

4

----- . --

4

.::=;=---::--

-- ------"
--

-

4

• Abbildung 13 .27
So schnell kann es gehen -In vier
Sch ritten zu einem Widget - mithilfe von Clearspring.com.

.. _.

~~---

,

"e .. '

APSS New drug s (or
InllolTV'\ia w.11 fotull on

ut.ty
~. lII rn

"
"" . .. . . 1

• Abbi ldung 13.28
Multifunktionale Wldgets ausw~hlen , anpassen urd veröffentlichen

13.4 Zugriff auf APls
Bisher haben Sie relat iv umpektakuläre Techniken zur Erzeugung
von Mashups betrachtet. Inha lte wurden aus Web-Feeds oder
Webseiten ausgelesen, zusammengestellt und dargestellt. Doch
ein direkter Zugriff au f gewisse Datenbestände (etwa auf die
Datenbank von AmaZOll.com) allein mit diesen Techn iken wäre
mit äußerst aufwendigen Web Scrap ing-Methoden verbunden.

HINWEIS
Programmier~chn itt ~tellen

erleichtern einen direkte n Zugriff
auf beliebig komplelCe Datenbestände ohne aufwendige Web
Scraping-Met hoden.

13-4

Zugriff auf APls

I

753

13.4.1

Was sind APls?

Eine elegante Met hode für den direkten Zugriff auf gewünschte
Inhalte stellen öffent liche Programmierschnittstellen (APls) moderner Webdienste bereit. Auf der Suche nach neuen Kundenkreisen
veröffentli chen große Projekte ihre Datenbestande (Amazon.com)
oder erleichtern Programmierern den Umgang mit Funktionen der
Anwendung (de/.iäO.us).
[APIJ
Eine API (App lica tlon Programm lng

Interface) kann grundsätzlich mit
einem Objekt verglichen werden,
über dessen Methoden und Attribute Programmierer auf externe
Daten zugreifen können.

_. _

. •, _ ,_~ ... ~ .

.. Abbildung ' 3.29
Wie auch andere Dienste setzt
Flickr einen persönlichen APISchlussel zur Verwendung der
Programmierschnittstelle voraus.

I

müssen. Die einzelnen Dienste realisieren ihre ProgrammierschnittsteIlen unterschiedli ch. Bei Google Maps geschieht dies
etwa durch den Aufruf von JavaScripts, bei You Tube, de/.icio.us,
eBay und Amazon per REST (Represen tational State Transfer), 50AP
oder XML·RPC. Die beiden letzten Methoden stellen im Prinzip

durchgefüh rt:

...........,._'. ...

754

SchlOsse I anzufordern. Diesen werden Sie in Ihren Mashups be i
jeder Anfrage an externe Dienste zur Identifikation verwe nden

einfache XML-basierte Protokolle zur Übertragung und Behandlung von Anfragen dar und ahnein sehr stark den HTIP-Requests
aus Ajax.
$0 werden Anfragen zum Beispiel bei YouTube folgendermaßen

_... _......
o ~_

Um eine APr verwenden zu können, ist es meistens erforderlich, sich auf der Seite des Dienstes zu registrieren und einen AP!-

'3 Mashups

http: // www.youtube.com/api 2_ re st ?pa ramete rl-va 1uel&
pa rameter2- va 1 ue 2&_pa ra meter N-va 1ueN
XML-RPC hat eine kompliziertere Struktur (im Beispiel Flickt) :

<meth odCa 11 >
<method Name >Ei ne AP I -Met hode </meth od Name>
<params>
<pa ram >
<va l ue >
<s tru ct >
<member>
<name>Parameterl </ name>
<v al ue ><s tring>W
ertl
</s trlng ><l value >
</member >
<member >
<name>Parameter2</ name >
<va 1ue ><s t ri ng >We rt2
</s trlng><l value>
</member >
<I struct>
</ value>

I

</ param)
</ pa r ams )
</methodCa l l>

Wird diese Anfrage an eine API gesendet, so erhält die Anwen dung meistens einen struktu rierten XML-Code zurück, in dem
spezifizierte Inhal te geordnet aufgelistet sind. Im Falle von Amazon können dies etwa Rezensionen zu einem Buch, bei Flickr die
zuletzt hinzugefügten Bilder zu einem Stichwort und bei Google
Maps die letzten Aufnahmen einer Stadt sein . Mit diesen strukturierten Daten können Entwickler genau so wie mit Feeds weiterarbeiten und Dat en in der von ihnen gewünsch ten Form präsentieren.
13. 4 .2 Wie velWe nd e ich APls?
Die Programmierung von Mashups mit APls ist keine triviale

Angelegenheit und erfordert sowohl Zeit als auch eine genaue
Vorgehensweise bei der Auswahl der Werkzeuge. In dem Beitrag
,. ProgrammableWeb : How Ta Make Your Own Mashup ..: (http ://
www.programmableweb.wm/ howto (linkcode 521» finden Sie
weitere Informationen hierzu. Der Artikel stellt eine Vielzah l von
Schri tt-für-Schritt-Tutorials zur Verfügung, die konkrete Vorgehensweisen bei mehreren APls detailliert beschreiben .
Alle einschlägigen APls verfügen über detaillierte Dokumentationen, die mit zahlreichen Beispielen ergänzt werden. Zusatzliehe Toolkits auf den Entwicklungsseiten der Dienste stellen
Entwicklern zusätzliche Werkzeuge bereit, welche die Program mierung von Mashups erlei chtern . Insbesondere sollt en Sie bei
Ihren Mashups folgende APls im Auge behalt en:
.. Amazon Web Services
http://wWN.amaz on. coml webservi ces (linkeode 522)
.. Las t .FM (APO
http://www.audiosaobbler.net/ da talwebservices
(Lin kcode 523)
.. Ebay-Entw ickl erseiten
http://entwickler.ebay.de (linkeode 524)
.. Google AP I (Dok ume ntation)
http://WWN.google.wm/ apis (Linkeode 525)
.. Flickr (AP I)
http://wWN.fti ckr.comlserviceS/api (Linkeode 526)
.. YouTub e (AP O
http://wWN.youtube.com/dev (linkcode 527)

,I":,..

--

__ a._._.._._

~ :~-:..::

,--

I
- i

i ~i ----~

.

:::.:"'A'!":

_
_ ,__ "w _ _ _ " _ pvlne
o _ =::~~~=I:::""..::"'
'-"- ~ -~- - .... __ .. ~ -.A. Abbi ldung ' 3.30
ProgrammableWeb.com sammelt
Mashups, APls sowie Rezensionen
und relevante Beitrage.

Eine Übersicht zu themenverwandten Beiträgen und weiterführenden Inform ationen zum Thema finden Sie auf Programmable13-4

Zugriff auf APls

I

755

web.com. Neben Rezensionen zu 900 APls sind auf der Seite
Tutorials sowie eine Übersicht über 3.350 Mashups zu finden.
Wem dies nicht genügt, kann außerdem Hunderte ausgewählte
Mashups auf Mashupawards,com finden.

13.5 Zusammenfassung
HINWEIS

Große wie auch kleine Webseiten entwickeln 5ich zunehmend
zu Webdiensten, Der Zugriff auf
Daten wird leichter, ihre Darstellung bleibt dabei dem Seiten betreiber überlassen. Dies ist eines
der wesentlichen Merkmale de5
Web 2.0.

756

I

13 Mashups

Mit Mashups sind neue Modelle der Seitenentwicklung in Sicht.
Nicht nur können Daten dynamisch manipuliert werden, auch
die Komposi t ion von Daten, Dienst en und Anfragen der Nutzer
w ird mit diesen modernen Werkzeugen einfacher als je zuvor.
Offene Programmierschnittstellen bieten in diesem Kontext eine
geeignete Option zum Umgang mit großen Datenbeständen und
erleicht ern die WiedeNerwendung von Daten in beliebigen Webprojekten. Damit können Webentwickler effekt iv arbei ten und
Angebote entwickeln, die den Nutzern einen besseren Zugriff auf
Webdienste berei tstel len.
Die Vermischung von Inhalten sollte nicht beliebig erfolgen.
Nicht zusammenhängende Inhalte wirken eher verwirrend als
unterstüt zend, während sinnvolle Verknüpfungen von mehreren
Diensten einen Mehrwert erzeugen und somi t eine Grundlage
für einen erfolgreichen Webdienst darstellen können. Überlegen
Sie sich deshalb vor der Implementierung genau, welche Dienste
Sie zu welchem Zweck kombinieren mächten. Nicht jede Kombination wird sich tatsächlich als vernünftig erweisen. Beachten
Sie bei der Programmierung von Mashups ebenfalls, dass nicht
jeder Sei tenbetreiber erfreut ist, wenn seine Inhalte kopiert werden, insbesondere wenn keine Angabe der Quelle vermerkt wird.
Eine fnihzeitige Anfrage beim Sei tenbetreiber kann daher ni cht
schaden.

14

Podcasts, Vidcasts und
Screencasts

Das Web 2.0 gehört uns. Angelehnt an die rasante Entwicklung
der Technik publizieren Webnutzer ihre Inhalte im Sekunden takt.
Das Mitmach-Web lebt von selbst produzierten Inhalten, die als
Videodateien, AudiosWcke oder Bildschirmprcisentationen veröffentlicht werden. Wer einen komplexen Sachverhalt geschickt
veranschaulicht oder eine kreative Idee fachgerecht umsetzt,
kann nicht nur eine fachliche Reputation aufbauen , sondern auch
das Web verändern. Doch um ein breites Publikum anzusprechen, muss man mit Profis auf Augenhöhe konkurrieren können.
Demzufolge ist es wichtig, die besten lechn iken, Praktiken sowie
grundlegende Regeln des Webpublishings im Auge zu behalten .
Es folgt im Schnelldurchlauf das Wesentliche über Podcasting,
Vidcasting und Screencasting, inklusive Werkzeuge, Dienste und
Ressourcen .

... Abbildung 14.1
Das Videoblogvon _lonelygirl15c
auf YouTube stellte eine der
ersten selbst produzierten Videoserlen dar, die nur im Web gezeigt
wurden. lonelyglrl15 gehörte
im Jahr 2006 zu den holufigsten
Anfragen bei YouTube.

Ein Bild sagt mehr als tausend Worte. Eine Wahrheit. die auch
im Web gilt. Dessen Inhalte sollen den Seitenbesuchern möglichst schnell, präzise und attrakt iv vermittel t werden. Eine denkbare Textform, die Ansprüchen m obiler Nutzer gerecht wird, sind
kurze und prägnante listen . Doch wer mit einer schnellen Breitband-Verbindung unterwegs ist, kann und will sich mehr leisten.
Beispie lsweise Audio- oderVideosendungen, in denen ein Thema
von Experten erläutert w ird, oder eine Entertainment-Story im
Episoden format angeboten wird.
Das wissen Blog-Betreiber zu schätzen und stellen auf der
Suche nach Lesern entsprechende Inhalte fleißig und regelmäßig zur Verfügung. Zumal die Zusammenfassung eines Beitrass In
der Regel zeitaufiNendiger als eine Tonaufnahme oder ein VideoSketch Ist. Der Bedarf nach interaktiven Inhalt en trifft somit auf
neue Möglichkeiten des Webpublishings: In der Kultur des User
Generated Content s etabliert sich ein neuer Zweig, der Pod casting genannt wird.

14

TIPP
Beachten Sie, dass eine vi·
suelle Präsentat ion ohne ein
durchdachtes und niedergeschriebenes Konzept meistens
In zusatzlicher Bearbeitungszeit
resultiert. Doch Im Gegensatz zu
Blog Posts können Sie bel Konzepten Ihrer Broadcasts mit Brain
Storming und ein wenig Improvisation recht anregende Inhalte
anbieten .

Podcasts, Vidcasts und Screen casts

I

759

14.1
[Sodal We bcastin gl
Beim SofiaJ Wefxasting werde n
M ul t imedia-Dateien abonniert
und herunt ergeladen. Sie können
auf einem internen (PO oder externen (et wa iPod) Gerät abgespiel t werden.

Was ist Podcasting?

Der Begri ff Podca5ting (abgeleitet von iPod und Broadca5t )
steht im Allgemei nen für das Produzie ren und Veröffen t li chen
von M ultimedia -Inhalten im Web. Im Unterschied zum Begriff
"Web Cast ing .. soll Podcasting die soziale Komponente betonen. Dadurch soll angedeutet werden. dass es sich nicht um die
Indust rie, sondern um einzelne Nutzer handelt, die ihre Beit räge
mithilfevon Aud io- und Videoaufnahmegeräten produzieren und
anschließend der Öffen t lichkeit anbieten (vg!. Abbildu ng 14.2) .

... Abbildung ' 4.2
Podcasting im Überblick

MI ab

bindet ein

'"

(mittels Feedreader
oder Podcatdler)
Benutzer
verwei st auf

mp3

mp3

Abbi ldung 14.3

Für die Darstell ung von Podcasts
gibt es kein einhei t liches Logo.
Das von Pe ter Marquardt en twor fene Logo Ist eines der Kan didaten.

HINWEIS
Beim Podcasli rg werden Sendungen ähnlich abonnierten
Zeitungen automatisch " nach
Hause.. geliefert. Dies ist der wesentliche Unterschied zum klassischen Dow nload im W eb.

760

I

wird herun tergeladen

ode,
Computer

Podcaster

A

mp3-Player

lädt hoch

efStellt

Einer der Gründe, weshalb Podcast ing sich in letz ten Jahren
etablieren konnte, ist die einfacher gewordene Dars tel lung und
Veröffent lichung von Ideen un d Inhalten . Komplexe Zusammenhänge können mit minimalem Zei taufvvand visuell oder sprachli ch
dargestellt werden, ohne in Textform niedergeschrieben werden
zu müsse n. Mit de m aut oma tisierten Produzieren und Verbreiten
von Mult imedia- Inhalt en wird Web-Publishing noch mobile r und
die Inhalte interaktiv und selbsterklärend.
An sich t ragt Pod cast ing nur wenige Neuerungen zum Konzept
des Web-Publishings bei. M ult imedia-Inhalt e werden über XMLbasierte Web-Feeds abonniert. Diese Feeds ent halten Daten
über aktuelle Send ungen des Podcasters und werden bei der Veröffentlichun g neue r Inhalte aktualisie rt . Erkennt ein Feedreader
des Abonnenten (auch Podca tcher genannt) neue Mu ltimediaInhalte, so lädt er diese aut om atisch runter. Anschließend kann
die Sendung in aller Ruhe angeschaut und angehörtwerden. Dies
ist das Prinzip von Syndicated Webcasting.
Demnach sind selbst produzierte und veröffentlichte Multi media-Inhalt e mi t Radio- und Videosendungen zu vergleichen,
die jedoch zu einem beliebigen Zeit pu nkt konsumiert werden
können.

14 Podcasts, \lidcas ts und Screencas t s

I

14.2 Möglichkeiten des Podcastings
Im Web 2.0 erzeugen gemischte Form en des Web-Publishing1
viele Begriffe, die auf den ersten Blick ganz unterschiedliche Konzepte andeuten, sich jedoch nur durch wenige Facett en vonei -

nand er unterscheiden. Nicht jeder Webautor spricht davon, was
er meint, und auch nicht jeder meint das, wovon er spricht. Im
Wesent lic hen unterscheidet man zwi schen:
to Podcasts (Audiocasts)
Ursprüngli ch Audio-Sendungen (Musik, Sprache), di e im Web
als Quickt ime- (.M4A) oder MP3-Dat eien veröffentlicht und

HINWEIS
Web-Broadcaster sind sich
uneinig : Autoren, die von Webcasting, Net c.asting, Blogcasting
und Podcasting sprechen,
meinen unter Umständen unterschiedli che Arten des WebPublishings .

verteilt werden . Zu nehme nd werd en unter Podcasts sowo hl
A udio- als auch Videosendungen zusammengefasst. (Beispiel:
Technikwuerze.de)

... Vidcasts
Vi deosend ungen (Video, Bilder, Musik, Sprache), die im Web
meistens als Quickt ime- od er AVI-Dateien ....eröffent licht und
verteilt werden (Beispiel: Revision3.com).

.. Screencasts
Von spezieller Softw are aufgenommene Bild schirmaufnahm en
(digitaler Film), die meist ens mi tText kom mentaren oder ei ner

=
• Abbildung 14.4
Podcast auf Technilcwuerze .de

Tonspur des Erzählers erweitert werden.

.. Blogcasts
Eine Kombination .... on Podcast s und einer begleiten den alt ernative n Text besc hreibu ng innerhalb eines W eblog-Posts.

14.3 Podcasts produzieren
Zwar weisen die aufgelist eten Ar ten des Online-Publish ings
Unterschiede im Hinbl ick auf die Inhalt e auf, eines haben si e

• Abbildung 14.5
Vidc.ast s auf Revision3.com

jedoch gemeinsam : Eine erfolgreiche Prod ukt io n eines Podcasts
setzt ein Bün del von kreat iven A nsatze n und sorgfaltig durchdachten Konzept en voraus.
Am wichtigsten sind beijedem Podcast eine klare themat ische
Ausrich t ung sowie regelmäßige und in teressan te Inhalte. Dies
m uss nicht unbedingt ein umfangreiches Thema sein. Manchmal
ist es genauso nützlich, Nischen mi t sehr speziellen Th emen zu
besetzen.
Bedenken Sie, dass jeder Sei tenbesuc her insbesondere ein
potenzieller Zuschauer ist, den Sie durch die Q ualität Ihres Angebot s überzeugen w ollen. Je weniger De tails dabei dem Zufall
überl assen bleiben , desto besser wi rd der Ein dru ck sein , den Si e
bei Ihren Lesern hinterlassen. Ihre Reputat ion in der PodcastSze ne w ird sich demen tsprechend vergrößern .

TIPP
AskANinja.com beantwortet
alle Fragen, die es per E-Mail
von seinen Seitenbesuchern
erhält - und zwar in Form eines
Podcasts. W er genau die Seite
be t reibt. ist unklar. Es ist ein
Beispiel für eine ganz nette und
kreative Idee, w elche die Seite
unter die Technoratl Top 100 der
populärsten W eblogs weltweit
gebracht hat.

14.3

Podcast s produzieren

I

76 1

Damit Sie dies bei Ihren Podcasts sicherstellen können, ist eine
ve rnünft ige St rategie notwendig. Sie setzt noch vor der Zusammenstellung der Inhalte an .

'4.].'
TIPP
Diese Richt linien lassen sich
auch auf normale Weblogs ubertragen .

The trmity of web st andards
(000,

,

II<>C" B. "'" ...

.. Abbildung '4.6
Ein einfacher, eleganter
und anschaulicher Podcast auf
Boagworld .com

762

I

'4

Richtlinien für das Podcasting

Die folgende Übersicht soll einige wesentliche Grundlagen des
Podcast ings herausstellen. Beachten Sie, dass nicht alle Punkt e
für alle Forma te (etwa eine Webpräsentat ion, ein kurzer Videoausschnitt oder eine Webserie) passen.
.. Kommunizieren Sie mit Ihren Besuchern. laden Sie Ihre Hörer
und Zuschauer ein. lassen Sie Ihre leser direkt wissen, worum
es gerade geh t , und wie die Sendung aufgebaut ist.
.. Eine klare Struktur ist bei Podcasts genauso wicht ig wie bei
Texten. Ein Leitfaden muss deutlich erkennbar sein und kan n
in Screencasts und Vidcasts etwa durch Ariadnepfade angegeben werden. Beachten Sie die Usability-Regeln. In Podcasts
kann die Strukt ur eine r Sendung durch eine entsprechende
musikalische Begleitung betont werden.
.. Vermeiden Sie monotone wie auch allzu bunte Präsentat ionen. Lassen Sie sowohl Typographie als auch Farbe Inhalte
unterstützen, aber nich t dominieren .
.. Machen Sie die Stärken Ihres Produkts, Ihrer Idee bzw. Ihrer
Argumentation deutlich .
.. W iederholen Sie sich nicht , es sei denn, Ihre Argumen tat ion
erfordert dies. Schätzen Sie Ihre Zei t und die Zeit Ihrer Besucher. Vermeiden Sie langatmige Fließt exte. Ersetzen Sie diese
besser durch Kernaussagen, die mit Beispielen ergänzt werden.
.. Sorgen Sie für Korrektheit und Eindeut igkeit Ihrer Aussagen.
Beispielsweise muss eine Tonspur mit der Videospur exakt
synchron sein. Bei Verzögerungen fangen Sie die Szene neu
an, anstatt sich beim Zuschauer für technische Probleme zu
entschuldigen.
.. Biet en Sie keine live-Übertragungen an, sondern erst ellen Sie
interessante und gut recherchierte Berichte, die Ihre Sei tenbesucher nachher (hoffentl ich) immer wieder benutzen .
.. Bieten Sie am Ende der Präsentation immer eine Zusammenfassung (even t uell die ganze Präsentation im Schnelld urchlauf) des Gesagten an .
.. Verschenken Sie Ihr Wissen. Stellen Sie Screencasts und Vidcasts als PDF-Dateien oder etwa PowerPoint- Präsentationen
kost enlos zur Verfügung. Nützliche Inhal te werden in der
Regel nicht nur gerne verlinkt, sondern auch direkt ausgedruckt. Nutzerwerden Ihnen dankbar sein.

Podcasts, Vidcasts und $c reencasts

I

.. Überzeugen Sie sich von der Quali tät der Aufnahme, bevor
sie diese veröffent lichen. Eine schlecht e Quali tät kann Ihrer
Repu tat ion schaden, auch wenn der Beitrag gut ist .

14.3.2 Plan und Entwurf
Stellen Sie sich vor der Aufnahme Ihrer Send ung immer auf eine
Entwurfsphase ein. Wissen Sie genau, was Sie Ihren Hörern nahebringen wollen und in welcher Form, so wird es Ihnen leichter fallen, verständliche, klar strukturierte und somit auch erfolgreiche
Sendungen zu produzieren. Deshalb ist es besonders wichtig, d as
Form at des Podcasts sowie die Häufigkei t ihrer Veröffentlichung
möglichst früh festzulegen und sich bei jede r Sendung daran zu
orientieren .
Suchen Sie bei de r Auswahl eines Themas einen vernünftigen
Kompromiss zwischen den Interessen Ihrer Hörer und dem zeitlichem Aufwand, mit dem das Thema für Sie verbunden ist . Erfordert ein umfassendes Thema eine ausführl iche Vorbereitung, so
nehmen Sie sich entsprechend viel Zeit für sei ne Vorbereitung.
Qualität gellt vor Quant ität.
Um ein breit es Publikum anzusprechen, behan deln Sie Themen, in denen Sie sich gu t auskennen und Ihre Fachkompetenz
stark unter Beweis stellen können. Überzeugen Sie durch Ihr
Wissen und eine schlüssige Argumentation. Aufsehenerregende
Themenbereiche können Ihnen zum Durchbruch verhelfen, so
lange diese sorgfält ig analysiert sind und Ihre Aussagen logisch
begründet und durch glaubwürdige Quellen bestät igt sind. Lassen Sie sich Zeit beim Brain Storming von Aspekten, die au s Ihrer
Sicht zum gewählten Thema gut passen. Fangen Sie klein an und
erwei tern Sie das Feld der Themen schrittweise. Betracht en Sie
Ih r The ma aus unters chied lichen Blickvvi n kein un d konzentrieren
Sie sich nicht all ein auf einen sehr spezifischen Themenkreis. Lassen Sie Ihre Ideen wachsen.
Verfeinern Sie Ihren Entwurf mit ausgeschriebenen Sätz en,
die den Sachverhalt näher erläutern und Ihnen Anhaltspunkte
beim Pro duzieren geben. Diese Notizen werden Sie nachher in
Screenc asts und Vidcasts an entsprechenden Stellen einblenden;
bei Audiocasts können sie etwa in der Zusammenfassung eines
Blog-Posts erscheinen.
Fassen Sie zusammenhängende Id een und Schlüsselwörter
zusammen u nd ordnen Sie diese systematisch an. Versehen Sie
jede Gruppe mit einem eindeutigen Titel. Diese können später als
Überschriften Ihrer Abschnitte dienen.
Stehen die Gruppen fest , so überlegen Sie sich die Vorgehemweise bei der Präsentation Ih res Themas. Legen Sie die thema-

HINWEIS

Das frühzei tige Festlegen des
Podcast-Formats und der Sendezeiten hilft Ihnen, sich beim
Produzieren der Inhalte an ein
festgelegtes Schema zu hallen.

' 4.3 Podcast s produzieren

I

763

tischen Schwerpunkte , die Länge sowie den geschätzten Zei t plan
der Sendung fest.

14.3.3 Achtung , Aufnahm e !
l egen Sie bei der Auswahl eines Aufnahmeortes höchste Priorität darauf, dass ungewollte Nebeneffekte - etwa Echos oder
Hintergrundgerausche - vermieden werden. Schalten Sie zu diesem Zweck unbenutzte Ge rate aus und stellen Sie sicher, dass Sie
während der Aufnahme nicht gestört werden . Ein ruhiger Raum
mit ges chlossenen Fenstern und TOren ist dafür geeignet . Ein
kurzer Test vor der Aufnahme wi rd Ihnen helfen, eine opt imale
Qualität der Sendung zu erzielen.
14.3.4

Te chnisc he Aus rü st un g

Audiocdst s I Grundsätzlich können Tonaufnahmen mi t hilfe eines
beliebigen aufnahmefähigen Geräts gemacht werden : Mit einem
Mikrofon, falls Sie zu Hause sind, oder mit einem Dikt iergerät,
falls Sie unterwegs sind. Um die Qualität der Aufnahme kontrollieren und die Sendung anschließend professionell aufberei ten
zu kön nen, empfieh lt es sich, eine professionelle Audiobearbeitungs-Software einzusetzen.
Abbildung ' 4.7 ~
AudaClty (http ://audaclty.
sourceforge.netl auf Mac OS X

..•

~~~ ~ ~l!J

'----~-Q

I' '

Q

••

TIPP

Zur Konvertierung von Audio(asts in MP3 werden Sie bel
anderen Audiowerkzeugen einen
speziellen Encoder benötigen etwa Lame-MP3 oder iTunes.

764

I

14

Mit AudaCi ty (http://audaCity.sourcelorge.net, Open Source, für
Windows-, Mac- und linux-Systeme) werden Anfänger wie Pro fis
opt imal bedient. M it dem Tool können Sie neben professionellen
Tonaufnahmen die Einstellungen für Audiocasts verbessern,
Dateien schneiden, kopieren und mischen und die Geschwindigkeit und Tonh öhe einer Aufnahme anpassen . Außerdem bietet

Podcasts, vidcasts und Screencast s

I

das Tool einen internen Konverter der erstellten Audio-Dateien
in das MP3-Audiocast-Standardformat an. Mit AudaCity können
088 Vorbis-, MP3- und Wave-Dateien bearbeitet und konvertiert
werden.
Mac-Nutzer können alternativ GaraceBand verwenden (http://
www.appfe.com/ ifife/ caraceband (Unkcocle 530».

Vidca.sts I Zur professionellen Videobearbeitung stehen Podcastern eine Fülle von Möglichkeiten zur Verfügung. Dabei werden
Sie in Abhängigkeit vom Betriebssystem und den verfügbaren
Rechnerkapazitäten häufig auf manch einen Videoeffekt verzichten müssen. leichte und schnelle lösungen können durchaus
praktischer seil' als multifunktionale und kostspielige Werkzeuge,
mit denen zwar mehr gemacht werden kann, dafür aber auch
mehr Zeit aufgewendet werden muss.
Um einen für Sie optimalen Video-Editor zu finden, können
Sie 20 führende Produkte bei Wikipedia miteinander vergleichen (http://en. wi ki pedia. orlJlwi ki/(ompari son_0/_video _editing..
software (Unkeode 531)).
Der Beitrag liefert technische Voraussetzungen, Features und
Empfehlungen zu den Produkten in tabellarischer Form.

• Abbildung 14 .8
GarageBand auf Mac OS X

• Abbi ldung 14.9
Das Inoffizielle Vldeopodcastlogo, entworfen von Andreas
Prinz

... Abbil dung
Apple IMovie

14 .10

Unter den preiswerten Werkzeugen sind Video Maker von
Windows (mitgeliefert auf Windows-Systemen), Apple iMovie
(integriert in Apple iLife) sowie kostenlose lösungen wie JahShaka (h ttp://www.jahshaka.org) und VirtualDub (http://www.
virtuafdub.org) zu empfehlen. Grundlegende Aufgaben wie das
Bearbeiten von Videodateien und das Einblenden von Textbemerkungen können Sie mit diesen Produkten professionell lösen.
Bei VirtuafDub werden Ihnen zwar keine visuellen Effekte angeboten, dafür aber zahlreiche Optionen, um Ton- und Videos puren
zu bearbeiten sowie Dateien zu codieren und zu komprimieren.

14.3

Poclcasts produzieren

I

765

......
" -'
.-.........
P'; ""

~

•

I;

,

~ g;;;;,jiUl
- ...

I

,

=

••
•

~

.. Abb ildung 14.11
Videobearbeitungs-Software ru r Profis - Final Cut Pro

.. Abbildung

für Mac OS X

14-12

Sony Vegas
TIPP

Be achte n Sie, dass bei m Kauf einer D igita llcamera meistens eine
professionel le Bildbearbeit ungs-

Software rni tgeliefert wird . Darunte r können auch AII-in-O ne-

lösunge n zu fi nd en sein.

_.. -_-,_
.. _--

..

......_.._· _H.164

...

.. Abb ildung 14.13
Mit ffmpegX kan n man Videound Audiodateien in ein passendes Format umwandeln .

TIPP

Es kan n vorkommen, dass sich
eine Vid eoda tei nic ht direkt in
ein Flash-Format konvertieren
lässt. Ab h il fe kann ein Umweg
liefern : Versuchen Sie, die Datei
zue rs t in das Format AVI umzu-

wand el n und ansc h ließend in

FLV.

766

I

Fortgeschrittene AII-in-One-Lösungen, wie etwa Ulead Media
Studio Pro für Windows-Nutzer (http://www.ulead.com/msp/
runme.htm, Linkcode 532), Final Cut Pro (http://www.apple.com/
ftllalcutstudio, Unkcode 533) für Mac-Nutzer sowie Sony Vegas
(http://www.sonymediasojtware.com/prod IIcts/vega sja mi Iy. asp,
Linkcod e 53 4) und Adobe Premiere Pro (http://www.adobe.com/
productS/premiere, Linkcode 535) haben insbesondere im Hinblick auf ihre Funktionalit ät deutlich mehr zu bieten. Sie schlagen
aber auc h mit entsprechend höheren Preisen zu Buche.
Zu m Konvertieren von produzierten Videodat eien in ein einschlägiges Video cast-Format empfiehlt es sich, sich mi t VirtualDub und QuickTime Pro (http://www.apple.com/quicktime/pro
(Unkcode 536» auszurüsten. Damit lassen sich Dateien in die
Formate ,avi und . mov konvert ieren.
Zu m Umw an deln vo n Vid eodat eien in Flash Video Format
(FLV) können Sie als Windows-Nutzer das kosten lose Tool Riva
FLV Encoder (http://www.rivavx.com) verwenden. Mac-Nutzer
werden in jjmpegX (http://www.fjmpegx.com) ein passendes
Werkzeug finden. Eine Open-Source-Lösung bietet außerdem
ffmpeg (http://ffmpeg.mplayerhq.hu). Zum Konvertieren von
Videodateien in das Format SW F ist Video to Flash Converter 5.5
(http://www.geovid. comNideo_toJlash_Converter) zu empfeh len.
Einen Einblick in die besten Prakt iken zum Konvert iere n von
Videodateien in Flash (http://www.adobe.com/newsletters/edge/
march2006lindex.h tml?sectionlndex=2) liefert der Bei trag ,.Selecting a Flash Video En coder•. Er stellt auch nüt zliche Werkzeuge
vor.
Außerdem wi rd eine ausführliche Übersicht über Werkze uge
zum Bearbei ten und Konvertieren von Videodateien in der ,.Ust

14 Podcasts, Vidcasts und Screencasts

I

ofVideo Editing Software« auf Wikipedia (http://en.wikipedia.orgl
wikilLisLofjideo_editing_software (Unkcode 537» angeboten .
Wollen Sie als Windows-Nutzer relativ kurze Bildschirmaufnahmen erstellen, die nicht dazu gedacht sind, professionell aufbereitet zu werden, so sollte Windows Media Encoder (http://www.

mierosoft. com/wi ndo wslwi ndowsmedi alforproslencoder/ defa u It .
mspx, Linkcode 538) Ihre erste Wahl sein. Anspruchsvollere Aufgaben wie etwa das nachträgliche Bearbeiten von Screencas ts
können Sie mit Camtasla Studio (hervorrC\8ender Editor) der
Firma TechSmith (http://www.techsmith.comlcamtasia.asp. Linkcode 539) oder mi t 88 Flashback (insbesondere zur Opt imierung
der Dateigröße) (h ttp://www.bbsoftware.co.uk/B8FlashBack.aspx,
Linkcode 540) von Blueberry Software lösen.

.... Abbildung 14 .14
8B Flashback

Wei t ere Dienste und Praktiken
für die Produktion von Screencasts finden Sie in den Beitr;igen
.Screencasting: How To Start,
Tools and Guidelines« (http://

www.smashlngmagazine.(fJ m/
2008/08119Iscreencastlng-howto-start!, linkcode 552) und
.12 Screencasting Tools. (http://
mashab/e,com/2008/ 02/21/
saeencast Ing -video- tutorials/,
linke ode 553) .

.... Abbildung 1416
5napZProx für Mac 05 X

Für Mac-Nutzer stehen Backdrop (http://www.johnhaney.com/
backdrop, Linkcode 541), Boinx Mousepose (http://www.boinx.
com/mousepo51~, Linkcode 542), OmniOazzle (http://www.omnigroup.comiapplicationS/omnidazzle, Linkcode 543) und SnapZProx
(http://www.ambrosiasw.com/utilit ies/snapzprox, Linkcod e 544)
zur Verfügung.
Mit diesen Tools können Sie neben Bildschirmaufnahmen
etwa Notizen anzeigen lassen, Seitenbereiche markieren und
angeklickte Bereiche visuell hervorheben. Ausgabeformate sind
entweder Flash Video Format (FLV) oder Video-For mate (Quickt ime, MPEG4).
Eine umfangreiche Übersicht zu Screencasting-Tools finden Sie
in den Beiträgen ,.ScreenCasters : Review« (http://www.donation-

.... Abbildung 14 .15
Camtasia Studio im Einsatz

coder.com/ReviewslArchiveISere enCasting (Linkeode 545» sowie
' 4.3

Podcast s produzieren

I

767

_Einführung in Screencasting« (http://www.pixelgraphix.de/webloglartikel/einfuehrung-in-das- screencasting1 / (linkcode 546))
von Manuela Hoffmann.

14.3.5 Vorbereitun g der Date ien

.. Abbildung 14.17
iTunes

,

r!...::::;::-~.~
:: .~ •
m.D'"~''=''~tt"'''''

,

..

L'"

,

.",...

.~ .

....

.',...
o.dj.""-_
. . ..
.. Abbildung 14.18
Mit iTunes kö nne n Podcasts
abonniert werden,

I

Sind die letzt en Schnitt- und Tonarbeiten abgeschlossen, so gilt
es, die fertige Datei in ein Format umzuw andeln, das von mögli chst vielen Zuhörern bzw. Zuschauern verwendet werden kann.
Ein Großteil der Abonnenten benutzt zum Herunterladen und
Verwalten von Multi m ed i a~ lnhalt iTunes, den wohl populärsten
Mul timedia-Die nst, über den iPod-lnhaber Musikst ücke kaufen,
sammeln, verwalten und auf Ihren iPod übe rtragen können. Um
die Reichweite Ihrer Podcasts zu maximieren, ist es demnach
wichtig, im iTlInes-Verzeichnis vertreten zu sein, also auch ihre
Sendungen im dazugehörigen Format anzubieten. Wird ein Podcaster in das iTunes-Verzeichnis aufgenommen, so wird sein Feed
regelmäßig auf Akt ualisierungen hin überp rüft und gegebenenfalls an Abonnenten wei tergereicht.
Angespornt d urch den weltwei ten Erfolg des iPod, konnte sich
fü r Audi odat eien nebe n dem ptattfo rm übergreifendem Format
MP3 auch M 4a durchsetzen. Aus Kompat ibilitätsgründen sollten
Sie fUr Ihre Audiocasts allerdings M P3 verwenden.
Bei Vidcasts müssen Videos im Forma t m4v oder mov vorliegen, weshalb Quickt ime Pro zum Konvertieren von Videodateien
in das Quic kt ime-Format benutzt wird. Alt ern ativ, falls Sie Podcasts in Ih rem 810g anzeigen möchten, können Sie Flash (ffv, swj),
avi sowie w mv benutzen. Das Gleiche gilt auch für Screencast s.

14.3.6 Veröffentli (hen
Falls Sie zur Veröffen t lichung Ihrer Bei träge eine Web-PublishingPlattform (etwa WordPress) verwenden, können Sie damit rech-

TIPP
Geben Sie in Blogposts die vollständige URL der hochgeladenen
Datei an.
Sie Angabe

<a href- "http: //www .
bel s ple l. de/ pod cas t.

mpJ ") Podcast< / a)
wird von Word Press Englne erkannt,

<a hre f- -podcas t.
npJ ") Podca st </ a)
dagegen ignoriert.

768

I

nen, dass XML-Code, der zum Erkennen eines Podcas ts notwendig ist , aut omat isch generiert wird . Ein Verweis auf eine lokal
abgespeicherte Audio- bzw. Videodatei genügt : Der Rest wird
automatisch erledigt. Zusammen mit Feedburner.com lässt sich
dies außerdem leicht realisieren. Die notwendigen Ei nstellungen
zur besseren Verbreit ung der Feeds liefert Feedburner standardmäßig mi t.
Zusät zliche Opt ionen wie das Abspie len von Dateien direkt in
einem Blog-Bei trag, allgemeine Stati stiken oder das automati sche
Format ieren und ei ne Vorscha u de r XMl-Datei für iTlines liefert
das Pl ug- in PodPress (http://www.mightyseek.com/podpress (Linkcode 547».
Wer keinen Feed abonnieren möchte, kann sich die Datei
direkt anhören bzw. anschauen.

14 Podcasts, \lidcasts und Screencast s

I

Zur Veröffentlichung der Sendung bei iTunes folgen Sie bitte
den Richtlinien . Podcaster l ech Specsc (http:/ /www.apple.com/
itunes/ store/ podcaststechspecs. htrnl (linkcode 548».
Meistens genügt es, den Podcast auf einer Anmeldeseite
unter einer passenden Kategorie hinzuzufügen . Zusätzlich kann
es nützlich sein, einen neuen . Sender« bei den Podcast-Verzelchnissen anzumelden. Eine ausführliche Übersicht finden Sie
auf den beiden Seiten http://www.podcastingnews.com/toPlcs/
PodcasCDlrectory.html (linkeode 549) und http://www.google.
coml Topl Com puters/ In terne tl On _t he _ We bl Podcast si Di reet ories
(Linkeode 550).
Alternativ können Sie rhre Videosend unge n bei YouTube und
Ihre Audiocasts bei Odeo.com oder ähnli chen Diensten hochraden. Die Da teien können Sie mit hilfe eines e)(ternen JavaScripts
innerhalb Ihrer Slogposts anzeigen .

. . .....

_
...._- ...... __ ...'....

-~~-----, -~

... A bbi ldung 14.19
M it loudblog (www.loudblog.
dl!), einem Podcdsting-Syslem
von Gerrit van Aaken, können Sie
Podcasts veröffentlichen und RSSFeeds generieren.

Au ßerdem können Sie Loudblog (http://loudblog.de, Linkeode
551), ein schlankes und einfach zu bediendenes Podcast ing-CMS
nutzen. Es w urde extra im Hinblick auf die BedLirfnisse von Podcastern erstellt und sorgt au toma tisch fOr die korrekte technische
Übertragung der Sendungen. Es genOgt, die Audio- oder Videodateien hoch zuladen, in Rubriken abzulegen und mit Tags zu versehen. Um den Rest kümmert sich das System von alleine.

14.4 Zusammenfassung
Mit hochwertigen Werkzeugen und einschlägigen Diensten ist
das Publ izieren von Media-Inhalten genauso einfach wie das
14·4

Zusammenfassung

I

769

Beziehen von Webdateien per Abonnement. Auf der Suche nach
interakt iven und ansprechenden Inhal ten greifen Seitenbetreiber
zur neuen Form des Web-Publishings und machen sich dessen
Vorteile zunutze.
Doch dies ist erst der Anfang. Angesichts fortschreitender
technologischer Entwicklungen schwärmen Webvisionäre von
neuen Webformaten. die unser Verständnis von Interakt ivität
und Informationskonsum radikal verändern werden. Es wird über
rech t auf.Nendige live-Sendungen im Fernsehformat (lnternet-TV,
Web-TV·On-Demand) sowie Groupcasts diskutiert, die von mehreren Moderatoren in mehreren Sprachen parallel geführt werden
können. Ob dies bloß Visionen sind. wird die Zeit zeigen. Eines
ist aber klar: Sollte sich eine Gelegenheit dazu ergeben, werden
Content-Anbieter nicht lange auf sich warten lassen.

no I

14

Podcasts. Vidcasts und Screencast s

15

Wikis

Unter vielen Vorteilen des Web 2.0 ist tur durch sehn iWiche Webnutz er eine Erneuerung spürbare r als jede andere - die Präsenz
von Wikipedid. der freien Enzykl opädie, die von jedem nicht nur
gelesen, sondern auch geändert werden kann. Die neue Art der
Datenerfassung lässt Millionen von Menschen ihr W i ssen zusam-

mentragen, multipl izieren, organisieren und veröffent lichet',
Doch was in großem Maßstab Erfolg hat, kann auch lokal mei·
sterhaft gelingen. Und so entstehen zunehmend kleinere Projekte, die auf dem Prinzip von Wikipedia basieren, dieses aber
für die Zusammenstellung und Aufbereitung spezieller Daten für
besondere Zwecken verwenden. Die so entstehenden Wikis liefern Flexibilität und eine bessere Organisation der Daten. Sowohl
Webautoren als auch große Unternehmen profitieren von den
vielen kleinen Wikis.
Über mehrere Jahre hinweg ga lten umfangreiche Conte ntManag;ement-Systeme als Standarefwerkzeug zur Verwaltung von
Datenbeständen im Web. Häufig recht komplex und nicht intuiti v, erledigten sie die Aufgabe, Inhal te in Rubriken zu gliedern

Abbildung '5.'
PHP-N uke (htt p://phpnuke.org) ,
ein CMS aus alten Zeiten. Es stellt
auch heute noch ein machtiges
Werkzeug zur Programmieruns
von Webseiten und zur Verwaltung komplexer Seitenslrukturen
dar.
6

und in einem ko m pakten Sei tenlayou t automatisch unterzubringen. Doch trotz einer bis auf die Spitze getriebenen Funktionalität
kon nten diese Systeme ihren Nutzern oftmals kaum eine flexible
Lösung anbieten, um deren Daten effizient zu bearbeiten.
'

..

~_._-

~ .

cms rnalrix

- - _........
-

-

..

,-----..----- - . -_.__-..._-- ..... _- " .~=C_

.,

:'''~

::::-

:::.::;----~

... Abbildung ' 5.2
Auf Cm smatrbc .org können
Sie 960 Content-ManagementSysteme miteinander vergleichen .
Eine Vergleichstabelle einschlaglger Content.ManagementSysteme finden Sie auf der
Seite von Wikipedia (http"
en.wikipedia.orgiwlkVCompariSOll_
oCcontenLmanagemenLsystems,
lInkeode 555).

Die Veränderung der Datenbestände stellte bel ContentManagement-Systemen noch vor
wenigen Jahren eine recht zeitaufwendige und nicht In tuitive
Angelegenheit dar. Mit modernen Systemen geht dies schneller, einfacher und eleganter.

.=-

.=-. ,=.

.. Abb ild ung ' 5. ]
Die englischsprachige Wikipedia
verfügte Ende 2008 über 2,5 Millionen Beiträge. Die deutschsprachige Veßion konnte sich mit
800.000 Beiträgen auf Platz zwei
unter allen Wikipedia-Enzyklopädien weltweit behaupten .

Die zentrale Verwaltung der Seite machte es etwa fOr nicht registrierte Mitglieder unmöglich, Inhalte dynamisch einzufügen oder
vorhandene Inhalte zu modifizieren . Die Formatierungsvorlagen
zu r Auszeichnung der Inhalte waren meistens ebenso stark eingeschränkt wie die Möglichkeiten für eine automatisierte Verknü pfung bereits existierender Seiten.
So war es in vielen Intranets üblich, dass die Zusammenarbeit
zwischen den Angest ell ten mithilfe eines nicht intuitiven CMS
realisiert und koordiniert oder sogar - im Hin blick auf die Zielsetzung - vollständig neu programmiert werden musste. Genauso
oft wurde vom Einsatz eines CMS zur in ternen Kom munikat ion
ganz abgesehen. Stattdessen geschah die Kommun ikation durch
direkte E-Mail-Kommunikation - aus dem einfachen Grund : Per
E-Mail ging es schneller. Im Laufe der Zeit konnten sich allerdings
die Content-Management- Systeme deutlich verbessern. Heute
kommen sie verstärkt als Webfog-Publishing-Software zum Einsatz : Drupa/, Joomla, Mambo-Foundation, Textpattern, Typo3,
Wordpress sind einige bekannte Beispiele. Auf grundsätzlich neue
Konzepte hat man jedoch vergeblich gewartet.
MediaWiki (http ://mediawiki,org), das offene Web-PublishingKonzept , das der Enzyklopädie zugrunde liegt, ließ CMS aus einer
neuen Perspektive betrachten: Mittels einer einfachen und intuitiven Formatvorlage mit einer eher minimalistisch gehaltenen
Seitenstruktur konnten Webautoren ihre Sei ten nun .on t he fty«
generieren, bearbeiten und verknüpfen. Das rasante Wachstum
von Wikipedia zeigte schon bald, dass das Konzep t Zukunft haben
würde . Darauf aufbauend, velVVendeten viele Webprojekte zur
Verwaltung und Zusammenstellung ihrer Daten ein neues Format
- die sogenannten Wikis.

15.1

[f,) 1
MadlOWlkl
... A bbildung ' 5. 4
MediaWiki (http://mediawiki.org),
die Wiki-Engine, auf der Wikipedia aufbaut .

Was ist ein Wiki?

Ein Wiki (aus dem Hawaiianisehen für . sch nell«) ist eine Zusammenstellung von Webinhalten, die von mehreren Autoren erstellt,
bearbei tet und auch wieder gelöscht werden können. Die Haup taufgabe eines wikis besteht darin, die Zusamm enarbeit mehrerer Autoren o der Gruppen von Autoren zu ermöglichen und das
Publizieren zusammenhängender Inhalte zu erleichtern. Man
spricht deshalb im Englischen auch von einem Collaborative Authoring Tool.
Zu diesem Zweck stellen Wikis ein Web-Pubfishing-Syst em
(Wiki- Engine) zur VerfUgung. Mit dessen Hilfe können Autoren
über Inhalte diskutieren, Änderungen vornehmen und diese
dokumentieren. Sämtliche Veränderungen und Versionen eines

I

Dokuments werden gespeichert und können bei Bedarf abgeglichen und sogar rückgängig gemacht werden. Die Wiki-Engine
ist meistens direkt in das Wiki integriert, wodurch sich Seiten
live modifizieren und mit anderen Nutzern direkt besprechen
lassen.

-- ".-.-.--...

---- -----...---_
_
---_
.. _-- "-_..
..__._--...... ....---......
_----------_
..
.
..--_
_---,-------.. _---------_.......... _ _~'--1[1'01_
_
_ "'....-~ "'- . .. _
~""''''--.

_ - ~- -

~-_. _ -- ~- _ .

.. Abbildung ' 5. 5
Abgleich ... on Veränderungen in
einem Wikipedla-Eintrag. links
das Original, rechts die modifizierte Version .

r---'___
_ _
...... "
"',_

_--~_

--~"_ ._, -

._ - ~-,-

......

_a _ _ _ .. _ _ _ _ .. ___ ..... .

Grundsatzlich folgen Wikis einer offenen Philosophie: Jeder kann
Inhalte hinzufügen und bestehende I nhalte entsprechend seiner Vorstellung ändern. Zur Qualitätssicherung werden meistens
keine expliziten Sicherungssysteme benutzt.
Innerhalb eines lokalen Projekts wird man in der Regel nicht
mit der mutwilligen Zerstörung von Daten rechnen müssen. Bei
unabsichtlichen Fehlern können Inhalte leicht wiederhergestellt
werden. Bei einer Veränderung des Datenbestandes können
säm t li che Anderungen eingesehen und gegebenenfalls rückgängig
gemacht werden. In größeren Projekten wird das Problem durch
die gegenseit ige Kontrolle der Nutzer gelöst. Verschiedene Nutzer verfügen in der Regel über unterschiedli che Zugriffsrechte.
Außerdem werden an neue Mitglieder oftma ls gewisse Anforderungen gestellt, bevor ihnen Schreibrechte gewährt werden.
Hierzu zählen beispielsweise eine gewisse Anzahl positiv bewerteter Vorschläge des neuen Nutzers oder eine Art ,. Probezeih, in
der er seine positive Einstellung unter Bewei s stellen muss.
Der wesentliche Vorteil eines Wiki s besteht darin, dass dieses
Autoren erlaubt, Inhalte leicht in eine hierarchisch strukturierte
und organisierte Form zu bringen. Die Veröffentlichung der Daten
geschieht weit schneller, als dies mit Content-Management-Systemen der Fall i st. Dabei können Seitenbesucher Inhalte auch selbst
modifizieren. Außerdem kann ein Wiki auch in Intranets zu m Einsatz kommen. Es wird meistens zur effizienten Zusammenarbeit
der Mitarbeiter, zur besseren Verwaltung der vorhandenen Daten
sowie fOr einen schnelleren Datenaustausch verwendet. Ebenso
dienst es auch zur Dokumentation.
Zwar orientieren sich die meisten Wiki-Plattformen an der
Funktionsweise von MediaWiki, doch abhängig von der Zielsetzung bieten auch sie fortgeschrittene Lösungen an, die für Nutzer

- - ... _- -

-_
. -_. ..._--_.....
Editing Wikitext

P nwillw

"''''''_

TlIO ...... - . . - , _

_

n

''I0I0;_

TlIOgo_. - . _•. ...,....._"'..,_ •

_••_
...-poo
- - .too._
.._
................. .-,......,'"
fp (

.fliAJ.!;;iiffil;Iii

...-_ ......-____.....
--_

,_ .... __...... _·1'......_ .......
...,..................
,,..... ........
"
'".....
..... ... .
".~

.. Abbildung 15.6
Die Formatierung ... on Inhalten
ist bei Wikis einfach und intuit i....
Der Inhalt einer Seite kann gleich
diskutiert werden . Auch die ... orhergehenden Versionen eines
Dokuments können areeschaut
werden.

Die meisten Wikis folgen offenen Leitprinzipien: Anstatt
Techniken zur Vorbeugung gegen
bewusste Zerstörung der Daten
zu entwerlen, haben Entwickler
die Wiederherstellung der Da ten
so schlicht wie möglich realisiert.
Da alle Anderungen gespeichert
werden , können diese stes manuell korrigiert werden. Auch
das Zuweisen ... on Rechten zum
Andern eines Beitrags für ... erschiedene Nutzertypen ist für
Nutzer mit Administrator-Rechten möglich.

15.1

Was ist ein Wiki?

I

773

mit erweiterten AufgabensteIlungen hilfreich sind. Mittlerweile
existieren über 200 verschiedene Wiki-Engines. Ein Überblick
uber die Plattformen lohnt sich daher.

Zur Verwendung einer WikiEngine müssen Sie die WikiSoftw are nicht unbedingt selbst
in5tallieren. Viele Wiki-Ho5ts
biet en ihre Dienste kostenlos an .
Eine Übersicht finden Sie auf:
http://en.wlkibooks. orflwlkl/
Wlk,-Scle nce :How_to _starCa _
Wlkl (linkcode 557)

15.2

Wiki-Engines in der Übersicht

15.2 .1

MediaWiki - all gemeine l ösun g

Wie bereits angesprochen, stellt das kostenlose MediaWiki
(http://mediawiki.org) eine allgemeine Plattform (basierend auf
PHP und MySQ UPostgrSQL) {Ur Wikis jeglicher Art dar. Als Formatierungssprache verwendet die Plattform WikiText, eine intuitive Formatierungssprache, mit der HTML-Quelltexte dynamisch
generiert werden. Sie ist sehr einfach zu installieren und zu bedienen. Eine Übersicht über die wichtigsten Formatierungskommandos finden Sie auf dem Spickzettel in der nachfolgenden Tabelle.
Dieser wurde von Wikimedia Deutschland entworfen und unter
der folgenden Adresse veröffentlicht: http.//commons.wikimedia.
orglwiki/I mage:Cheatsheet-de.pdf (Li nkcode 556).

"kursIv"

kursiv

'"fet t'''

feit

····'fett und kurslv·····

fett und kursiv

- - Überschr1ft - -

überschriften in verschiedenen

- - - Ebene 2- - -

Größen

- - - - Ebene 3- - - - - - - - Ebene 4- - - - [ [ LInk aur eIne Se H e])
[[L1nkla nde r er T1t el])

Einen internen link auf eine andere Wiki-Seite setzen

ht tp: //www.lrgendwa 5.de
externer link
[http : //www.lrg endwa s .de Tex t]
L1nk n1t Bes chreIbung
[[en :Engl1sh artf cl ell

Inlerwiki-link zur englischen
Wikipedia sel zen

[[Ka teg or1 e : Be1sp1 el ])

Artikel in die Kategorie _Beispiel.
einsortieren
horizontale linie

eIns
zwe1

Aufzählungsliste

dre l
IJ e Ins

Tabelle 15.1 ..

11 zweI

W ikiText -Spickzettel

/J

n 4

I

15 Wikis

drei

nummerierte liste

[[Bl1d,Oa tel.Jpg ITed]]
[[Bl1d:Oatel·JpglthunbIText11
[[Hedla:Oatel.ogg11

Bild mit Beschreibung einbinden
(VorKhaubUd)

11Namell

Die Vorlage .Name.. einbinden

I

... Tabelle '5.'
Wi klText-Spickzettel
(Forts.)

Datei verlinken
Signatur (link auf Benutzerseite)
Signatur mit Dal um

15.2.2 TracWiki - Software-Management und
Dokumentation
TracWiki (http ://trac.edgewall.org) ist eine Open-Source-Anwendung (auf der Basis von Fython und SQlite/PostgreSQL) und
stellt eine umfangreiche Wiki-Engine mit speziellen Optionen für
Software-E ntwickler bereit. Neben dem Einbinden von Subver·
Sion und Doxygen ist es auch möglich, .. Tickets.. zu öffnen und

diese im Team zu besprechen. Das sogenannte Bug Hunting, also
die Suche nach fehlerhaftem Quelleode, kann dadurch schneller und effiZienter geschehen. Die Änderungen des abgelegten
Quelkodes können mithilfe von RSS-Feeds verfolgt werden .

15.2.3 TWiki - AII-in-One-lösung für große Unternehmen
TWiki (http://twlkl.org) ist ebenfalls eine Open-Source-Anwendung (auf Perl aufbauend) und ermöglicht es, mehrere Gruppen
von Nutzern, welche Inhalte unabhängig voneinander klassifizieren und o rganisieren, anzulegen und zu verwalten. Die Engine
stellt unter anderem eine Programmierumgebung zur Verfügung.

Nutzer können damit Variablen und Konstrukte festlegen und
TWiki somit an ihre Bedürfnisse anpassen. Auch eine Volttextsuche mit und ohne reguläre Ausd rücke ist vorhanden. Die TWlklCommunity stellt außerdem zahlreiche Plug-ins zum Download
bereit (http ://twiki.org/cgi-bin/ view/Pfugins/PfuginPackage, Linkcode 558). TWiki ist ein mächtiges Werkzeug zur Bewältigung

komplexer Managementaufgaben.

---.._.-.......

-. ,._-_ __-..........
......... _ _...._--- -- .......
......_.---_.
_
.....
_,...........
-- --_......_- --_
--_
....
-_
.
-..
==-- . _----,
-..._..___
_.............
_--.___
.-_.
__
.--.-_
........
_----.. _-_
_
..........
--_-,,---..- ._
.....__
. - ...... _-_._ .. _- . _-,,- --------_.......
~

:!..-

~.-

......

....

11.....

tlhT

=., .. _ - - - - _ .. -

-----= - ...
__--

=:-~==--

_
---.-::;..

• Abbildung ' 5. 8
TWlkl (nttpJltwlki .org) liefert
eine umfa ssende Business-Lösung
für mittlere und große Unternehmen .

...
...............

..... _ .. -.. ..... ' ................. _ .. _ .. ____ .._._~--_
ca _ _ _ .... _ ... _ .

-~

K.,_'.......
...
... .............
.........
-.
....... ... ...
....
.-"'...
......
_ . . __.0._........... _ ..... _ ........_ .... __.... _
_~._

=-'

-. ....

• Abbildung '5.7
TracWiki (http://trac.edgewall.
org) empfiehlt sich vor allem für
Software· Projekte und zur Dokumentation .

_~

'5.'

.. Abbildung
PmWlkl (hup :/Ipmwikl.org) eine schnelle und einfache
Wiki-Engine

15·Z Wiki-Engines in der Übersicht

I

775

'--

. . ..

---

_~

..

_......__-.........._. .. _............_-_
...
-_

_
_---__--_ __,--_
_ _-_-_
_-_
- """-- -

The MoinMoin Wiki Engine
_

_.,

.... _ _ .. _ _ _ ... _

." _"

...... _

. ..... _

.,.,

.... ........ .

....... $o • •• _ _

......

....

...,. ........ ...._. . ....,... ...... ".... ....
."".... .
.......,.... ......"'.,.. ...
.....
..... ...... . , - _.......
~_

~ - -_

~_

Abbildung 15.10 ..
MoinMoin (http://moinmoin .
wikiwikiweb.de) ist einfach und
leicht zu bedienen .

.D.... _.......... _

.., . ~

15.2.4

PmWiki - sc hn elle und einfac he l ösun g

PmWiki (http://www.pmwiki.org. PHP.keine Datenbank notwendig, GPL) überzeugt durch die Einfachheit der Installation und die
Wartung der Einträge. Sei ten können gruppiert werden, und j ede
Gruppe kann mit Templates versehen werden. welche die Darstellung und Funktiona lität der Sei ten festlegen. Online-Formulare und Pod casts können in PmWiki direkt eingebettet werden.
Es sind Hunderte von Erweiterungen verfügbar, etwa die Integrat ion von LaTeX oder automat isierte Ariadnepfade (Breadallmbs).

_
__

..- ._-- -"'- .._.
_--_._-----.
...... __
_
--_
...
.. _
_
_
... .......__...__.. . _--_..._.....
-._-..__...._--_._-"'•....,"._
. __ .......
................ ....... --- -....__-._-,
,"....--->--_._----_
. ...... . ....---""
..... ... ...-.-._----"."
....
_.
-..
_-i/ ---_
..-..
.

_

Abbildung ' 5." ..
WikkaWikl (http://wlkkawikl.org):
schnell . elegant und mult ifunkt iooal. Mit der Engine lassen sich
alXh Flash-Filme einfügen und
Mindmaps entwerfen .

-..

_ . _ ---- - - ~-

:=-,..;;::-.=.._''

ffl'_

--

~

-~ --

_ ~ -_

_

_

c'''-' _ _ _ ''''''

Alternativ können Sie MoinMoin (http ://moinmoin.wikiwikiweb.
de) und WikkaWiki (http://wikkawiki.org)verwenden.Beide
Systeme lassen sich schnell installieren. konfigurieren und verwalten. WikkaWiki verfügt auße rdem über einen WYSIWYG-Editor.
Code Highlightj ng, Flash -Unterstützung sowie über ein Tool zum
Erstellen von Mindmaps.

15.2.5

PhpWiki - kompaktes Werkze ug für kleine Gruppen

PhpWiki (http://phpwiki.soorcejorge.netl phpw iki-1.2/) ist eine
weitere einfache Lösung (PHP und MySQUPostgreSQL), die es

n6

15

wikis

I

etwa im Gegensatz zu MediaWiki erlaubt, eine Datenbank von
mehreren Wikis aus gleichzei tig zu verwenden. Die Engine unter·
stützt eine Volltextsuche, die Anzeige der beliebtesten Seiten
sowie grundlegende Wiki·Funktionen.

RecentChanges

RecentChanges. ,.. .l:!3 lg?
Tho .... ,~ _

.....

UM *"beI'

"""'11>0 '*' 1 <IoJ> •• Mot<! t.oIow

SI.oo.<Ioon,nfo< ( ,.., , ..... . .....

.. _

IO~

W.d ..... dlly, Jun. 20, 2007
' ~'»4B0l ' 11 lO

_

_· UlOof'lof.. _n

.. Abbitdun g 15.12
PhpWikl: Ein kompaktes Werkzeug fOr kleine Gruppen

Frlday, JUI'MI 15, 2007

15.2.6 Perspective - Volltextsuche in MS Office·Oateien
Perspeetive (http://www.high-beyond.eom) baut auf Microsoft
.N ET auf und ist die einzige WikHngine, mit der Sie auch hoch·
geladene MS Office-Dateien (z. B. Ward- oder Excel-Dateien) in
ein Wiki einbetten und durchsuchen können. Mit einem integrierten WYSIWYG-Editor lassen sich die Inhalte der Dokumente
visuell aufbereiten. Eine Seite kann dabei nicht gleichzeitig von
mehreren Nutzern bearbei tet werden.

~EST
l ..... - - '... <DrI.Oquot.......,.....".. _
......... _
9'''.0., _
tQO<""'"
l:ItIerOIn _100 .. .....,.... ~ ...... hllJron ..... to tmllrIuIo _ ' " l!1l nI!1l1J' • ~

-.. """"'_.,..-..Kl....,_•..--.•
_...,... ............. _
t=PIn

,_

"""'. _""'. - " ' ...... ,1 ..", ""' ....... . "'H . _ . ""' • . ,....., .............. 1111.1

....

....... , _ _ _ _ ...." O liM

...
- ,,----

.. Abbi ldung ' 5,'3
Perspective hat nicht viel Besonderes zu bieten, es überzeugt
Jedoch durch die VoJltexhuche
in MS Office-Dateien innerhalb
eines Wikls.

15.2 Wiki-fngines in der Übersicht

I

777

15.2.7 Weit ere Infor ma tion en
Folgende Ressourcen helfen Ihnen bei der Suche nach einer opt imalen Wiki-Engine.

.. W iki- Engin es
http://c2.com/cgi/wiki?WikiEngines(linkcode 559)
http://c2.com/cgi/wiki?ChoosingaWiki (linkeode 560)

...

.=.~.~~.= ."" "=""
"'"=~"_._-_.

._--,.-

0= ;:;

-

A Abb ildung 15.14

Auf WikiMatrix.org können Nutzer eine opt imale Wiki. Engine mi t
einem Assistenten bestimmen.

- -1t~"
:
- -E
-- --...._---_... --

Eine list e sam t licher W iki-Engines, sortiert nach der Implement ierungssprache und versehen mit de taillierten Beschreibungen. Außerdem bietet die Seite wei terführende Referenzen zum Thema .

.. Wikipedia: Com paris on of W iki Software
http://en. wikipedia. orglwi ki/f ompar i~on_of_ wikU oftware
(linkeode 561)
Eine Vergleichstabelle von Wiki -Wer kzeugen

.. Wiki- Engin e Compa riso n
http:// mOinmoin.wikiwiki web. d e./Wi ki Engi neCompari~on
(Linkeode 562)
Eine detaillierte Vergleichstabelle von dreizehn populären
Wiki - Engines.

.. WikiMatrix.org

==t

Auf der Sei te können Sie sämt liche Wiki-Engines direkt miteinander vergleichen . Ein Assistent (Choice Wizard) (http://

Abbi ldung 15.15
... und verschiedene Wikl. Engines
gegeneinander antreten lassen.

www.wikimatrix.orgiwizard.php (Linkeode 563» hilft Ihnen,
diejenige Engine zu finden, die Ihren Anforderungen am
besten entgegenkommt.

~

--

'"*

A

15.3 Installat ion einer Wiki-Engine"
MediaWiki

Eine ausführliche englischspraehige Anleitung zur Installation
von MedlaWlkl finden Sie auf
der Seile: http://www.medla-

wlki.orglwlkl/ Ma nuaJ: Installa Uon

Diejenige Wiki- Engine zum Zusammenst ellen und Verwa lten von
Inhalten, für die Sie sich vermut lich in der Regel entscheiden
we rden, ist MediaWiki. Die Ähnlichke it des Syst ems mit Wikipedia vermittelt die Idee der Engine direkt. Mithilfe der intui tiven
Ben utzeroberfläc he und einer verein fach ten Markup-Sprache fäll t
das Bearbeiten und Hinzufügen neuer Inhalt e leicht.

(U nkcode 564)

Sc h ritt fü r Schritt : MediaW iki in st a llie re n
Als Beispiel für die Installation einer Wiki- Engine betracht en wir
MediaWiki. Sie ist bei allen Engines ähnlich.

11

Pac kage hoch laden und Rec hte einräum en

Laden Sie zunächst bitte die aktuelle Version der MediaWikiEngine von der Webseite http://www.mediawiki.orgiwiki/Down-

nB

I

15

wikis

I

load herunter und entpacken Sie das Package in einen Ordner
Ihrer Wahl (etwa www.beispiel. de/wiki) auf Ihrem Server. Stellen

Sie dabei sicher, dass der Server über PHP-Unterstützung verfügt ,
und legen Sie mithilfe von PhpMyAdmin oder mittels eines anderen Admin-Interface eine neue SOL-Datenbank an.
Raumen Sie dem Ordner (onftg neben lesere<:hten auch
Schreibrechte ein , damit die Engine die Dateien im Ordner modifizieren und speichern kann. In UNiX-Systemen geschieht dies
mithilfe des Befehls c hmod 77 7 confi g.
Starten Sie nun das Installationsskript durch den Aufruf der
Adresse http://www.beispiel.de/w iki in Ihrem Browser. Sollte
nach dem Einräumen der Schreibrech te eine Fehlermeldung
erscheinen, in der Sie auf ni cht vorhandene Rechte zum Schreiben vo n Session-Dateien hingewiesen werden (dies wird häufig
der Fall sein), so ist es zunä chst erforderlich, die Datei php.ini
anzupassen . Wo si ch die Datei auf Ihrem Server befindet, können
Sie mit dem Befehl <? phplnf o() ; ?>ermitteln .

MedlaWlkI1 .10.0

PIoewTirsi

... Abbildung 15.,6
Das Installatlonsskript von
MediaWiki wird aufgerufen .

MediaWiki 1. 10.0 Installation
•

O o n~

fOlge t lecurhy updal es! Keep an eye on Ihe Iaw-lrafl"lc rtilease arnOlJnc e

Checking environment. ..

• f'K' S2Q.$+do;M r=*",
• Foo.n::I"""_.. cIriver. lo"~

• W.. n.v: PtFl . ..... ~ il ~. Y<N.~ Ile"veprd:Jlern$ceused blttOs,~
• f'K' _
API is~2tIwder, oI:,...,;ng p"e!lvLRI(indn_php/PA9._T1~ l.)
• Heve XlII.. flAlin, ..uTF~ ~,;on"""",,"_
v _ _ ,;on ..'"
tot... i-ovaid ... is rd .....1.... PIf' r.eedstobe " " 0 _

'*" __

vlllG patI • ..., is reecl1wfUAlXl!IO.Ce lor the u:er yr»"

•.

( .......10<,

,

~

_

is.........-o

~.

.. Abbildung 15.' 7
Eine Fehlermeldung Informiert
über nicht vorhandene Rechte
zum Schreiben voo SessionDateien .

.. Abbildung ' 5.18
Die Datei phplnfoO im Einsatz .
Die letzte Zelle zeigt den Pfad zur
Konftgurauonsdatel php.ini. Diese
werden Sie bel der Installat ion der
MediaWikl. E'l!ine h1uftg anpassen müssen .

filln>~~'''''l'_''''-I'l''''

f .........l

Stellen Sie sicher, dass die Variable session. save""path in der Datei
PHP.fni einen korrekten Pfad enthalt. Der jeweilige Ordner muss
mit read / write/ execute-Rechten versehen werden (c hrnod 777) .
15.3 Installation einer Wiki . Engine - MediaWiki

n9

Verfü gen Sie über keine Rech te zum Ändern der Datei , so müssen Sie sich zu diesem Zweck mit dem Kun dendienst in Verbindung setzen.

EI

I<onfigurieren und Festlegen der Parameter

Sind die Installationsvo raussetzungen erfüllt, so kann die Konfigurat ion des Wikis mit dem Insta llationsskript beginnen.
MediaWikl l , 10.0

lnstallaUon

, _, ..............._ K.''' ...,. .. ,.. _ ......... __...... _ ..

_
_._. - __ __ _ ___..,..,..x .............._--., ...._'.. _
. ...... ................,..... ..._....

__
_'
...
·. . ""' .... .. .. _...
--,,.....
.. ·-",._. .... ... ..... ...
_."""",_--,
· _ .,,_ ,..

Abbildung ' 5.' 9 ..
Das MediaWiki~Skript gibt grünes
licht: Das Wiki kann nun installiert werden.

_

. _ _.l ..

,,~-J-

.-.'

-~~

..... _ ..

..-~

,

,~

~

... _ ,.... _____ "' ...

.-

..

,, ~

Unter anderem lassen sich de r Wiki-Titel, die Interface-sprache,
die Admin-Zugangsdaten sowi e die Da tenbankd aten festlegen .

_._---__............
......-._
.._-_. __ ......_- ......-. .-.....-

M_~

Abbildung ' 5. 20 ..
Konfigurat ion des installierten
Wikis: Dasinstallationsskript
benötigt einen Wiki-Ti tel , die
Festlegung von Admin-Zugangsdaten sow ie die Sprache. die die
Benutzer verwenden sollen .

~1 "'.. - .

•
.._- --- --

--~._

"'_ . _~

0-

.. Abbildung ' 5. 21
Eine neue MySQL-Datenbank
wird unter Confi)()( Professional
erzeugt.

.. _ _ ~ _ _ _ _ .. _

_ _• ____

" ""'"

~H _ _ ~ _ _ _ _ .~ _ _ _ _ • • _~_

~

, --_._,_.,...._--,
C ""M"""'-""~

.-

Erzeugen Sie nun eine MySQL-Datenbank mithilfe von PhpMyAdmin oder eines anderen Werkzeugs zur Verwaltung von Datenban ken,
Daten, die nach der Erstellung der Datenbank für den Zugang
benötigt werden, musse n nun in den entsprechenden Feldern
eingegeben werden .
Databas e config__

... ~'~'~
D~I.Lo"",n' "I.: ~_~_~_~'
~'====~

Abbildung ' 5. 22 ..
Angabe der Datenbankdaten bei
der Installation von MediaWiki
780

15

wikis

DII .. " . ,,, . :
D8 p _o' d:
08 p_ o ,~ <onfl, m:

b'6~

I M,,,, 11 01 h ~'.lIk

• """" " "'... , r..~ ""'" """"....".. ,............. ,.."'.K'" "'... t..·• • "'" '~
,, _ ~ ,

Tn. ",,,,,,", "," ","'" ,,_ ~ , ,

t>'e ... ~ .... 1..., .. 1hI:

0": , " ",,, • .,.,.

SoJi eine Datenbank außer MediaWiki weitere Webanwendungen
(etwa mehrere Wikis bedienen), so können Sie tur die Datenbanktabellen des aktueJlenWikisein Präfix festlegen (zum Beispiel
mw->, damit die TabeJle eindeutig identifiziert werden kann.
MySOl speciflc options:

I
.. A bbild un g 1 5. ~3
Das System liefert Zugangsdaten
für den Zugriff auf die Datenbank.

1''''''.-. .. .-.''''"' _ _ ....''''' .......'''
. >(lI h>~(_.::t!r I.

()~II'K • • Iu ... '

""'<I'lrC/ M" __

",,,,>:,

SeI&et O'l!l:

o B.cl<w> td t-r."'~ .. <t IlU1F.a
o Eyponmert" 'lySOL J liSO urr-ll
o Elpbl'l"Tlert~ ' iI)'SOL4 1!!i.o torwv
0CI't:1\N[1 1T ~

....,., 0"' , noble e>plo:lIlW:<de cIIo!><I "'I

... ot .......... . _

. n ~ ltol.

............... ·..........., ...... ", ......

1.I ,,,li,,Wik i'

.. Abbildun g ' 5 . ~4
Damit mehrere Webapplikationen
eine Da tenbank benutzen können. können Sie fiir die Tabellen
der einzelnen Wikls ein Präfix
festlegen .

Nach dem Starten des InstaJlationsskripts (Klick auf die Schaltfläche IN STAll MEDIAWIKI!). werden Sie über den InstaJlationsvorgang informiert . Sind aJle Angaben korrekt , erhalten Sie bald eine
lauffähige Wiki-Engine .
Checking en\IMonment...
"1t_f'd.,N~ 41 """"

__

--

"""'",O>!I oICIII (Io!~

• _ U I _ _ _ ....

• " ............. b"'''.. ....

·.... ,..". . ..
• ..... _
•

... . _ _~ ... ..... _ , ....... ....... ...... Jo . . ._ ' ..

W~_ ~

..
· ,,"'.

~.,

...-.

..... '" ..... _ . ............ ... ..... --., .. , , _ " ........... ..... 0 -. .. _

"'''' ~ -

-'~-' ''''<~»;

• u..t., ... t" .. ..ot ................ _

"·Pu_..,.",,·..
""--,--,
.,,_._ . ,. .,. .
..

·

_ ., ~

... 'K

'_Jo. ~

... _ _ . . . . . . . . . - . •

""""'''''''''11'''"'''''''','''''' .. ''''''

~ ·._ -,~'···_,_·<J

-

• .

'·l

,- ,. ". . ;")'_...

~

t>o<_

.... . . . _

..... . .. t .. ......, ..... _

.- ......-_...

n o ....,....

• , .......... .. 11""'..... _'''''-' ....;

, c_.... _... .. .... .....

tood o> , ..... s...........

.... _

__

·_·m
.. _......... _. . _, _ __,, __

1· ...... 7' ....

.. A bbi ldung ' 5.15
Die Wlkl-Engine wurde erfolgrei ch Installiert .

Um die Installati on fertigzustellen . folgen Sie bitte den Hinweisen. Aus Skherheitsgründen werden Sie aufgefordert. die Datei
LocafSettings.php aus dem Verzeichnis conftg in das rootNerzekhnis zu verschieben .
15.]

Installation einer Wiki-Engine - MediaWiki

781

Abbildung 15.26 ..
Zur Fertigstellung der Installation
werde n Sie gebeten. die Datei
localSettings.php zu verschieben .

MedlaWlkI1.10.0

Abbildung 15.27 ..
Die I nstallation ist abgeschlossen. Das Wiki kann nun benutzt
werden. Zur Anmeldung folgen
Sie dem Hinweis in der rechten
oberen Ecke.

':~J
'"
['....~':.;

.
.-

. ..... 1"" ..

HauptSeIte
_
.... _ _ _ ... ..... _ . _ . . . . _ _ . . .
~'"''''''_'''''R'''''''''''

H ... _

-"

...

-

--._.-.-

.....

--

-- _---. _~

---_... __. .. -, ......
"'-

~_ ..

-

Nach der erfolgreichen I nstallation ist die Engine lauffahig und
Sie können direkt loslegen . Bei MediaWiki stehen Ihnen fü r Ihre
Arbeit zahlreiche Optio nen zur Verfügung. _

-

...

~ 1 "'!5m+l

.. Abbildung ' 5.28
Die Anmeldung in der WikiEngine

"

...

E instellungen

----------

"" ..... s",,_... _so. ... z..., _ _ .... ... _ . ...... ""'.... _

_-

.-.
"-._.-.-

._..-

.........

- I·....._-"" ............... -.,,''''-~ 1

· .. " ...... 1- ...- 1

. r_ _ . ......

. '-'--

Abbildung 15.29 ..
Bei MediaWiki slehen Ihnen zahlreiche Optionen zur Verfugung.

0 ..... _ _ "" ....... _
_

---_._""-

.. . . _ " ' " .. . 0. ....

-~-

I!I _ ............ ""~-_ •• _

... -

15.4 Zusammenfassung
Wikis st ellen eine einfache und elegante Methode bereit, Webinhalte zusammenzufassen. zu verknüpfen und in einer Oberfläche
zu präsentieren . Mit minimalem Zeitaumand können damit aufwendige Projekte besser organ i siert, dokumentiert und verwaltet
782

15 wikis

I

werden. Im priva ten Gebrauch kön nen Wikis zur stru kturierten
Verwaltung von Daten eingesetzt werden. Unt ernehmen können mit ihnen die effiziente Zusammena rbeit ihrer Mitarbeiter
steigern. Angesichts der Vielfalt der verfügbaren Wiki-Engines
können Sie sich ein System, das Ihren Anforderungen am besten
entspricht, aussuchen. Meistens wird für Ihre Zwecke MediaWiki
ausreichen. Für spezielle Aufgaben sind insbesondere Trac (So(tware-Development), TWiki (Business-lösung), PmWiki sowie
WikkaWikl zu empfehlen.
überzeugen Sie sich bei der Wahl eines Wikis, dass die Engine,
tur die Sie sich entschieden haben, tabächlich optimal ist . Bei
umfa ngreichen Systemen wird es im Nachhinein äußerst schwer
sein, von einern System zu einern anderen zu wechseln. Soll die
Engine intensiv von Ihren Mit arbei tern verwendet werden, so
müssen die Mitarbeiter damit leicht umgehen können, ohne spezielle Kenntnisse Zll erwerben.

'5.4 Zusammenfassung

I 783

16

Weblogs

Das regelmäßige Publizieren von Inhalten gehört im Web 2.0 zu
den unveni ch tbaren Attributen eines modernen Webauftritts.
Webautoren, Jo urnalisten und Unternehmen greifen zunehmend
zu Web-Publishing-Tools. Doch wer gerne schreibt, wird nicht
notwendigerweJse auch gerne gelesen. Um eine große leserschaft zu erreichen, muss man regelmäßig Qualität liefern - na ch
Möglichkeit exklusiv und mit thematischen Schwerpunkten, die
für viele Leser interessant sind.
In diesem Kapitel studieren Sie das Phänomen der Weblogs,

ihre Funkti onsweise sowie einschlägige Werkzeuge zur Veröffentli chung von Webinhalten. In einem Beispielwird dies anhand
eines WordPress-Templates veranschaulicht. Außerdem werden
die wesentlichen Prinzipien des erfolgreichen Bloggens ausführ·
lieh erläutert - diese Regeln haben sich aus der Praxis ergeben.
War der Journa lismus noch vor wenigen Jahren ein exklusives
Privileg der Printmedien, so tritt er angesichts der rasanten Ent·
wicklungen des Web 2.0 heute in einem ganz anderen lichte auf.
Hervorgegangen aus Online·Tagebüchern, wird das Publizieren
im Web nun zunehmend allgegenwärtig und zunehmend auch
qualitativ anspruchsvoll. Allerdings wissen im Web immer noch
die wenigsten Beiträge, die durch ih re Quali tät zu überzeugen.
Webautoren werden zu selbst ernannten Journalisten. Ihre
Berichterstattu ng geh t über den Formalismus klassischer Artikel
hinaus, ist mobiler und wirkt meistens persönlicher, wenn auch
nicht unbedingt glaubwürdiger. Unternehmen versuchen, ihre
Fachkompetenz durch hochwertige Beiträge zu kommunizieren.
Und Nutzer stellen ihre Ideen, Gedanken und Lebensabläufe
öffentlich zur Diskussion - sowohl privat als auch beruflich. Nicht
zuletzt sind diese Veränderungen durch die Etablierung neuer
Web·Publishing·Werkzeuge möglich geworden. Diese erlauben
das Publizieren im Web auf eine einfache Art, die bisher nicht
möglich gewesen ist. Die planmäßige Veröffent lichung, Verwal·
tung und pflege der Inhalte läuft dabei beinahe mechanisch ab.

HINWEIS
Mit !!in!!r großen Zahl von Le·
sem entsteht auch eine groSe
verantwortung (Ur die Qualiläl
der Inhalle, die Im Web der Offentllchkeit pr.1sentiert werden .
Dieser Verantwortung sind sich
nur die wenigsten Webautoren
bewusst. Nur die wenigsten
Posts kOnnen durch Qualität
beeindrucken.

133000000 81085
Im Web 2.0 existieren weltweit
über 133000000 Auhritte, die
Beitrag!! m!!hr oder weniger regelm.1Slg verOffenlUchen - Tendenz
steigend .

16 Weblogs

I

78 5

Die Tatsache, dass d iese Werkzeuge inzwi schen seh r einfach
zu han dhaben sin d und sich dabei moderne Webt echnologien
zunutze machen, veränderte auch das Format, in dem die Inhalte
im Web präsentiert werden. St atische, privat e Websei ten ga ben
den Weg frei für dynamische, flexible und automatisierte Auftri tte, auf denen den Seiten besuchern eine Fülle von interakt iven
Optionen geboten wird. Diese r Wandel ließ eine Kultur der sogenannt en Weblogs entstehen - Online-Journale, die schnell zu
einem neuen Standard in der Webseitengestaltung wurden.

16.1

HINWEIS
In Weblogs erscheinen neue
Inhalte nicht nur in den dazugehörige n Rubriken der Webseite.
soodern auch auf der Startseite.
Der Seitenbesucher muss som It
nicht zu einzelnen Seiten navigieren und kann neue Inhalte
direkt auf der Startseite lesen .

Was sind Weblogs?

Als Weblog (blog, journal) bezei chnet man einen Webauftritt in
Form eines Tagebuchs oder Journals, dessen I nhalte auf der Seite
chronologisch angezeigt werden. Die Beit rage lassen sich in einer
oder in meh reren Rubriken ablegen und abrufen.
Jeder Beitrag (Blag post) wird meistens mit dazugehörigen Tags
ve rsehen und erhält eine Adresse (Permfink, Permanen t Link),
über die er eindeu tig ident ifiziert werden kann. Typisch f ür Weblogs ist di e Integration von Web-Feeds, über die Lese r Inhal te
abonnieren und verfolgen können.

-... -....._.. _.
.
.
_
.
.
.
_.,_
.
.
.
........
_
..
_
..
...
_-_.
--_
__
.......
..-'..........
.-..
-_.
__........
_..........
_
-.........._..................
__
..'_
--_
.....
...
- --........_.N
. ..__ ........----,.. ---_
-_._
-""_
....
...............
___....._-,_
.....
_
'
..
..
_'
...
-"
...
_
._
.......
.
.._
...- .........__
_,
.....__.....
..........•._
_
...... .......... .....-..... ...
_"'
_
--_--==
... _,......_.
'..'''_.'
"' .r-_._-_.
_.
__
___
.
_
.
.
..
_.
..
...
----_
-.-..__ ......__._--,,_
.... _
......._., ..-_---_
.• _._-_.
._.
-_
--................ __ .. __ .. _-'...
.
..........
..
...
,.
__
.......
__
.
-..
"'-_
........
..
_. _
.. _.........._--......
_........._....... ._... ... . .-.....
... _

_

_

,

~._~-~<-_

~

~.

_ -,-~ ' .~

"

,

, ._ ~

,~

e_

""'--' ~ ,

' - _ J ......... ~'-_

•• _ . _ _ . _ . _ _

. _~

-

..... _ .... .. _

_

. ~

,

"

_"_

"

-_

...

--"'~-~""-~
"""
__ b" _ '_"'_'_'"
_. ~ --~. ~-,-_

~

~:::""

.. _ ~

~ R ead WlileWilb

~.

"~

...

-~"._­

...

~

... ""·' ....··__ i _
_ ._ ~

~ "

_~.-

,,- ._~

. - - --~

,~

.. Abbi ldun g 16.1
Jason Kottke (kott ke.org) gehört zu den weltweit
prom inen testen A.Bloggern. In seinem Journal
schreibt er über Kultur, Medien und das Web.

7;?-- !iU_
-_-_o

.. Abbildung 16.2
ReadNv'riteWeb (htt p://readwriteweb.com) ist eine~
der popularsten Weblogs zu den Themen Web 2.0 und
modeme Webtechnologien. Das Projekt weist über
233 .000 regelmäßiSe Leser (RSS-Abonnenten) auf.

Die Interaktivität von Weblogs wird durch eine integrierte Komment arfunktion gegeben. Zu jedem Beit rag können Seitenbesucher ihre Anmerkungen hint erlassen und übe r den Inhalt diskut ieren. Verweisen an dere Weblogs auf einen Bei t rag über dessen
Perm link, so kön nen diese automatisch abgefangen und direkt
786

16 Weblogs

im Weblog angezeigt werden (Trackback). Die Verwaltung und
pflege der Inhalte erfolgt mittels einerWeb-Publishing-Plattform.
Diese sorgt dafur, dass die Beit räBe in der gewunsch ten Form
prä sentiert und sämtliche Zusammenhänge bei der Ve röffentlichung neuer Posts automatisch hergestellt werden . So erscheint
ein neuer Beitrag nicht nur automat isch auf der Startseite des
Weblogs. sondern auch in denjenigen Rubriken, denen er zugeordnet ist.
Darin liegt der wesentli che Unterschied zwischen Weblogs
und statischen Webseiten . Die zuletzt hinzugefügten Inhalte
werden immer auf der Startseite eines Weblogs angezeigt. Der
Seitenbesucher brauch t also nicht zu einer Rubrik zu navigieren ,
um sich die neuen Inhalte anzuschauen. Es genügt, die Startsei te
des Weblogs aufzurufen .
Der Blog-Betreiber kann nach seinem Geschma ck sowohl das
Design des Weblogs als auch die Funktionalität beliebig gestalten

I

•

.•

------

--------~
~--_.-

•

... Abbildung 16.]
Eine Weblog-Seite mit Kommentarfunktion - ein Journal aus den
Zeiten des Web 2.0
(Quelle: Bs-markup.de)

und erweitern. In der Regel sind zahlreiche vorgefertigte Designvorlagen (Templates) verfügbar, ebenso wie Plug-ins, die lei cht
eingefUgt und angepasst werden können . Die Flexibilität der
Templates stellt viel Raum zum Experimentieren bereit. denn die
Struktur der Weblogs ist an kein rigides Schema gebunden.
Oie f olge nd en Seiten Vf'I,\\·ei...,en all f di esen Beih 'rlg:
.•. nuhbe li G~t ct ver6ffentl:cht e ~m Diensteo, 12.06.07, s",feo Webbro,,"ser
Jetzt fOr INindows: Der bekannte Mo\C-BrOI'l'5er Safa ri ist jetzt aud1lOr
Window. erh .. ~ ich' O"'l5t be.on"er, fü, Web~nt""i(kl~~irt:ere5.,,nt, M
man als W.ndlW5- oder Linu~ nuI2er bi.her im mer aLt Die nste wie
nttp :/ft:>rowSEr5MotS.O'g "ng ew iesen wo' um zu sc ..
IPhon e New s >erttfentllchte Olm Donnerst.. g, 14.06.07: Erste; Update IUr
'Nindows 53'.),i, N:cht m.)1 e ine WO'".he oibt cs dic l\cto J von S3!.)ri für
Wrldows, SChil n iSt da, erste UDj;;t~ ve rtUljb ar. Die neu e VerSlonsnlßl1le r
il;t 3 01. ÜbQr"VQfbo~~Qrun~Qn k.lnn ICh la,dar nicht~ bllrichtGIn. Ich kOinn
tm aber auen nicht testen, da ICh kel ..

.. Abbildung 16-4
Trackbacks auf Pi)(elgraphi)(.de

Rosen. GänseblwlI(:hen und meh(
lotal!! floristen. Liefenrog!lm $eilen 1ao
f,lsche~eb 10,99ELfi
_w .blumen-I.Mld·!;,Me"'ipp~ de

..

--..... _.
~

1::
.. _....

:.r::.."!.:"'~

Platzieren Sie Anzeigen

au' Ihrer Webs/te

.. Abbildung 16.5
Die Einbettung der Werbung
erfordert manchmal einen Kompromiss zwischen der Qualität
der Inhalte und der Qualit.It der
Werbung.

16.1 Was sind Weblogs?

I

787

.. Abbildung 16.6
Google AdSeme
(soogle .comladsense)

Die Motivation zum freiwilligen Publizieren von Inhalten basiert
in der Regel auf den vielfattigen Möglichkeiten, mit den Inhalten Geld zu verdienen. Typisch für Weblo~ sind Werbeblöcke
und Sponsoranzeigen, die dort angezeigt werden. Besonders
beHebt ist etvva Google Ad5ense (http://googfe.comladsense)-ein
Programm mit dessen Hilfe Einnahmen abhängig von den Seitenanzeigen und Werbeklicks abgerechnet werden. Die Erfolgsgeschichten bekannter BIogger sprechen dafür. dass das Fuhren
eines Weblogs bei einem erfolgreich umgesetzten Konzept zum
Hauptberuf werden kann.
Bei der Auswahl einer passenden Weblog-Engine stehen Webentwicklern zahlreiche Möglichkeiten offen. Zwar liefern alle
Systeme die erforderliche Funktionalität, die von einem Weblog
grundsätzlich erwartet wird. Dennoch gibt es erwähnenswerte
Unterschiede zwischen den einzelnen Weblog-E ngines. Diese
Unterschiede werden zumeist erst nach einer längeren Benutzung der jeweiligen Engine deutlich. Es stellt sich also die Frage.
welche Engine Sie wann und zu welchem Zwe ck einsetzen. Eine
kompakte Übersicht soll Ihnen hierfür Anhaltspunkte liefern.

16.2

......

_-

_._--------,----

-_._-------

Weblog-Engines in der Übersicht

Im Folgenden betrachten wir die populärsten Weblog-Engines,
die nicht nur durch ihre Fu nktionalität zu überzeugen w issen,
sondern auch mit vielfältigen Erweiterungen und Templates ausgerü stet sind. Die Wahl einer passenden Engine hängt zumeist
von den Erfahrungen des Webseitenentwicklers ab.

16.2.1

Express ion Engine - eine professionelle l ösung für
anspruc hsvolle Aufgabe n

ExpressionEngine (http ://expressionengine.com) - basierend auf

.. Abbi ldung 16.7
Darren Rowse (problogger.net)
arbeitet als Vollzelt-Blogger. Sein
Einkommen verrät der BIogger
gerne - über 100.000 $ pro Jahr.

788

I

16

Weblogs

PHP und MySQl, Personal Ucense 9 S, Comme rdal Ucense
249.95 $; eine kostenlose Basisversion (EE-Core) ist verfügbar.
ExpressionEngilJe stellt eine umfangreiche Weblog-Engine berei t,
die mit Elemen ten eines professionellen Content-Managemen t
Systems erweitert werden kann. Eine Vielzahl von Erweiterungen
ist bereits in das ':ijstem integriert. ExpressionEngine zeichnet sich
im Vergleich zu anderen Sys temen insbesondere durch Details
aus. Sie verfügt über vielfältige Optionen zur Verwaltung von
Templates, Datenbankanfragen, Beziehungen zwischen den
Inhalten und XMl-RPC-Modu len. Auch werden Caching-Optionen sowie ein Ternplate-Systern mit vielen Erweiterungsmöglichkeiten bereitBestelit. In ExpressiolJEngine ist es möglich, mehrere Blogs gleichzei t i8 (über eine Administrator-Benutzerfläche)

I

zu verwalten. Das System kann sowohl auf Blogs, die auf SubDomänen eingerichtet wurden als auch auf externe Blogs über
eine API zugreifen . Der Inhalt eines Beitrags lässt sich mithilfe der
Revisionen auf eine vorherige Version zurücksetzen. Außerdem
können verschiedene Templates für verschiedene Seiten und
Gruppen von Seiten definiert werden. Tags werden in ExpreSSionEngine bis jetzt leider noch nicht unterstützt.
... Abbildung 16.8
Hauptfensler In ExpresSionEnglne

_
... _----........ _.-----•
------...
..
._..
--". _...._---'-'..--"

_ _ ,a'.." .......

"

~

_~.

, __

;ofl _

,

.... " ' - _ 0 (_

J

"

--_.. ---...
-

-

ExpressionEngine ist war recht komplex, stellt aber ein beeindru-

ckendes Angebot an exklusiven Funktionen und Möglichkeiten
bereit, die man bei anderen Weblog-Engines nicht finden wird. Mit
dem modularen Aufbau der Engine können Seiten komponenten
in Beziehung zueinander gesetzt werden. Keine andere WeblogEngine verfügt über so viele Optionen zur Darstellung einer Seite.
Die Programmierung eines layouts geschieht mithilfe von
ExpreSSionEllgille Tags. Mehrere Blogs können parallel verwaltet
werden. Darüber hinaus stehen Textfilter sowie die Search-andReplace-Funktion zur automatischen Korrektur von Text en zur
Verfügung. Blog-Betreiber können unter anderem Bildergalerien,
Wikis und Foren automatisch ein fUgen sowie verschiedene Nutzertypen anlegen. Alle Funktionen lassen sich über eine Benutzeroberfläche verwalten.
ExpressionEngine ist ein anspruchsvolles und flexibles Werkzeug, mit dem komplexe Aufgaben gelöst werden können. Hilfreiche Plug-ins (wie etwa Discussion Forum, Image Gallery, Mailing List, Simple (ommerce und Wi ki) sich bequem integrieren und
weiterentwickeln . Bei kleinen Projekten wird man sich dagegen
schnell in Details verlieren und die meisten Optionen unbenutzt
lassen (http://expressionengine.com/ downloadsladdonsl (Unk-

--------_.
---_.----------

=-=-''''''l:;:!"'-=c=.-==..--=--

;::;:::-::=::::'". :..-

-

... Abbildung 16.9
Templale-Editor In
ExpresslonEngine

code 570».
16.2 Weblog-Engines in der Übersicht

I

789

Creative services rar the
deslgn-challenged developer

......._--......._<------_
...... . -.,
-_._.-....-_,-----.
---~----~ ",~,----,."
--~_.,

-.

Abbildung 16.10 .
hpressionEngine im Einsatz
(oben li nks: 31 three,com .
oben rechts: veerle.duoh.com).

16.2.2

Movabl e Type - ei n einfac hes. el egantes un d
kompaktes Werkze ug
Movabfe Type (h ttp://www.movabfetype.com) überzeugt vor
al lem durch ein benutzerfreundliches Design und eine kompakte
Zusammenstellung der Funktionen. Die klassische (un d überhaupt erste) Web log-Plattform wird mit mehreren Layouts und
Designvorlagen geliefert . Tausende von frei verfügbaren Plug-ins
erwei tern die Engine mit zusätzlicher FunktionaUtät.
Der Blog-Betreiber kann per RSS-Feeds über sämtliche Aktivitäten seiner Besucher informiert werden. Ein eleganter WYSIWYG-Editor erleichtert die Ei ngabe und Formatierung der Beiträge. Für Templates können Programmierer sowoh l HTMl-Tags
als auch Movable Type-Tags verwenden. Au ßerdem ist es möglich,
zwischen statischen und dynam isch gene rierte Webseiten zu
wechseln sowie mehrere Weblogs gleichzeitig zu verwalten.
Einziger Nachteil von M ovable Type ist die relativ aufwendige Inst allati on . Bra ucht man be i anderen Systemen höchstens
15 bis 20 Minuten, so ist hier mit minde stens einer Stunde zu
rechnen, da ei ne Vielza hl von Einstellungen festgelegt werden
müssen,

Abbild ung 16 .11 T
Te~t- und Template-Editor in
MO/able Type

-

._. __.-....... - ' ..

..

~

"

.--- _..
-_-... . ..... .... ....
_..__...---..
.__..._--,---_._=--_
---'-----_ .. ----- ....-

.-._._._.

e _ ___

1ii.oW _ _ _

,

"'

~

::-:'::-":;"-:;::':~::~:'::;::.':c"'---"--

---~

. .....

~§:

~ ~.­

79°

16 Weblogs

-- -_.
..-.- -_. .,--..
..

- ,..
.....:':"'" -

. _::.':':- .

-. -

--

-....

I
.

_._-_..-_...
-_._-_
_
..
_-....
_
---',"'--"'-'-_
.._-.
"-'-._._....._--___........._.--__.__.
---"'--'''''-'-.. _.......

-_.-----_
-. -_.___-_._. _---__
_---

-.-_.
__
...-. -----_.[;~~=~]
--_
.....
_-_
.. _----_
._---_
..
_---_
....•..
_._--_
.•....
-.
__
.
-_
.... ...._,--,. __ ......__-_
.. _----._
. _--

....

--~--" -

---

....... .

_~ . _

....

.

----~- ~----~_ ._~ -

...

.. ..

-"--"~--

•
M

•

_",,-

... Abbildung 16.12
Movable Type Im Einsatz auf Mezzoblue.com

... Abbildung 16,13
Simpleblts.com basiert auf der Mo.rable Type-Engine

16.2.3 Textp atte rn ... e in mäc htiges CM S mit e infacher
Markup-Sprac he
Der wesentliche Vorteil von Textpattern (http ://www.textpattern. com) - auf PHP und MySQl aufbauend .. gegenüber anderen Engines ist vor allem eine intuitive Markup·Sp rache (Textile),
die auch komplexe Seitenelemente wie Tabellen oder listen mit
wenigen Befehlen ohne Kenn tnisse von HTMl erstellen lässt. Seiten können zu Gruppen (Sectians) zusammengefasst werden und
als solche uber unterschiedliche Strukturen und Darstellungen
verfügen .

...... ....

-

~

."-

.....

_ ----~----------

.--

-

--.. _.::::::.:-.::::-t--::.

--

••

......... [

_._---,
.. --_.
------._-.-------_._-.... -.__ .---~-­

::-=-.,,=:::::.==.."."!

... Abbildung 16,14
CameronMoH.com nutzt
Movable Type .

I

-~

........ 8 .. 0...

!II ... - -....-

,

-

.. Abbildung 16.15
EinfOgen neuer Inhalte mit
Textpattern

Seitenbetreiber können beim Einfügen neuer Inhalte direkt zwischen der Textile- , XHTMl- und live-Vorschau wechseln, ohne
die Seite neu laden zu müssen. Ein Spickzettel mit sämtlichen
Textift>-Befehlen wird direkt neben den Eingabefeldern angezeigt. Die automatische Veröffentli chung eines Beitrags zu einem
16.2 Weblog.Engines in der Übersicht

791

In seinem Beitrag . E>tpressi on~
Engine vs. Textpatterne (http://

www.h/(ksdes!&n.((}.ukljournal/
expression -eng/ne -I"> -textpattern.
linkcode 571) ve rgleicht John
Hieb die Funktionalität von Express/onEn&/ne und Textpattern.

zukünftigen Zeitpunkt ist möglich. Außerdem lassen sich Inhalte
aus anderen Con tent~Managemen t-Systemen importieren und
Co~Au t oren in fünf Benutzergruppen mit vordefinierten Schreibrechten einteilen.
Textpattern kann samtliche Aktivitäten der Sei tenbesucher
speichern und verfügt über einen leistungsfähigen Spam~Schu tz~
mechanismus. Jede hochgeladene Dateien kann in der AdminBenutzeroberfläche verwaltet und zum Download angeboten
werden. Standarmäßig ist Textpattern nicht in der Lage, Track~
backs abzufangen.

Abbildung ,6 .16 ~
Ändern des Passwortes mit
Textpattern

-_.,,-_.
--' -.....
--.-_ ..
...
_.
--.......... - --- -- .j'". .
---

-..

'-,..

..; ,

••

--

-

..;

..;

tI .

_---_ _-w __....--._....-. ..
-----_
-_.
__-..._.---.--"'-...-_
--_....... .
.. _,,,--.... ...

... --..
...

_._----~-----_
~::''?":l::::--~

~--_

Abbi ldung 16.17
Erratic wisdom.com basiert auf

.t..

Te~tpattern.

- ...._--_F" ......

-

_t. . . . .

' ...I-. .. k, .... _
.. Abbildun g 16., 8
404uxd.com nutzt Textpattern.

Textpattern ist eher ein umfassendes
System als eine minimalistische

Con tent~Management~

Weblog~Engine.

Es stellt eine

exzellente l ösung für kleine Projekte dar, die auch von Autoren
792

16 Weblogs

ohne tiefgreifende
werden kann.

HTMl~Kenntnisse

schnell und effektiv benutzt

16.2.4

WordPress - ein intuitiver AUeskönner
WordPress (http://www.wordpress.org) ~ basierend auf PHP und
MySQl - ist eine kostenlose Weblog-Engine unter der Lizenz
GPl und verfUgt ube r Tausende Templates und Plug-ins. Sie ist
mit Abstand die weltweit beliebteste Weblog-Engine. Das Tool
lässt sich in wenigen Minuten installieren, bietet eine übersichtliche Navigation und ist sehr einfach zu bedienen.
WordPress nutzt als einzige Plattform die Texturize-Engine zur
Übersetzung der Inhalte in semantisch korrekten (X) HTMl-Code.
Beachtet wird dabei nicht nur die Korrektheit des Codes, sondern
auch die Korrektheit de r Typografie. Mit einem WYSIWYG-Editor
und der direkten Vo rschau funktion kann der Weblog-Betreiber
seine Änderungen direkt sehen. Un ter anderem lassen sich Weblogs aus Movable Type und aus Textpattern automatisch nach
WordPress überführen. Die Templates sowie der C55-Code können direkt über das Interface verändert werden und sind direkt
wirksam. Die Anzeige der Inhalte lässt sich mit der Engine exakt
festlegen - etwa die Anzahl der Posts, die pro Sei te angezeigt
werden müssen.

.- ..

-

- -

--

-

-

~

--

-,,,._----

_ _-- . ..'-.. .....,'___...._..---"

-- ...
--- --- .,-_.. _. .__ ...

CI •• ~."""

_._~

._-

--_

..... . -,-,..... -, ... _, .....

,.. A bbildung 16.19
WYSIWYG-Texteditor in
WordPress

.. Abbildung 16.20
WordPress Im Einsatz - die
Übersicht von Posts

Smushing Mllglll.inc .•. -

.. ......

I

• .-=- - -_.- •• ---

-

----_.
= ..-

•
•
•

Ein mächtiges Framework zur Programmierung von Templates
ermöglicht einen intuitiven Umgang mit dynamischen Inhalten.
Dennoch zwingt die Programmierung von Layouts häufig zur
Suche nach passenden Plug-ins und zur Programm ierung zusätzlicher Module, mit denen der Umgang mit dynamischen Inhalten realisiert werden muss. Die WordPress-Engine verfügt in ihrer
Grundform lediglich über grundlegende Funktionalität.
Mit WordPress lassen sich verschiedene Kat egorien und Seitentypen festlege n. Außerdem können Sie Ihre Sei tenbesucher
sich registrieren lassen und Posts mit Passwörtern versehen. Eine
intelligente Textformatierung, Spam-Schu tz und die Möglich16.2

.. A bbildung ,6.21
Superfluousbanter.org verwendet
WordPress.

Weblog-Engines in der Übersicht

I

793

keit, Co-Autoren in zehn Benutzergruppen mit unterschiedli chen
Schreibrechten einzuteilen, runden das Werkzeug ab. Die Verwaltung mehrerer Weblogs ist in der Standardverion nicht mögli ch. Hierzu müssen Sie die Multi-User-Version der Engine (http ://
mu.w ordpress. org) vervvenden .

- _.- ..... .......

. . . . . .- .

fypography

-_---. .. ---....
---_. _ _.,

~ .-

•

.-

sz=~.::.....:.-

_--

.... _.._._
..........

~,

I

r_ _ _

~'="

-='$... .... ,.
IN' HOUH

.... ~ -.....
-_M ..._ ......
__..
....... .....
_~-_
~

typ6g
ThooM._. .raphy?
H .... ", _ _

MUSEO

100 300 500 700 900

... Abb ildung 16.2l

... Abbildung 16.2]

Webdesignerwall.com zeigt : Ein WordPress-Theme
muss nicht langweilig sein.

In seinem W ordPress-Theme setzt

Ilovetypography.com auf Typografie.

Insgesamt macht WordPress eine gute Figur, insbesondere aufgrund seiner intuitiven Benutzeroberfläche und des umfangreichen Angebots verfugbarer Funktionen. Wer ein Weblog möglichst schnell installieren und zum Laufen bringen möchte, wird
mit WordPress optimal bedient. Angesichts der vielen Layouts
und Plug-ins sollte diese Engine für die meisten Nutzer die erste
Wahl sein.
16.2.5

Serendipity -leistung sstark und einfac h zu
bed ien en
Serendipity ist relativ unbekannt. Zwar mag die Optik von Serendipity (S9y.org) ni cht unbedingt zu überzeugen, aus technischer
Sicht bietet die Open-Source-Engine jedoch mehr als etwa WordPress.

TIPP
Ein Onli ne-Handbuch mit nützlichen Referenzen zu Serendlpity
finden Sie auf http.//www.

lobelt Je nder./nfolb/ogls9ymanUß.//
5taJt.htm/ (Linkcode 572).

794

I

16

Weblogs

Neben klassischen Blog-Features wie etwa einem robusten
WYSIWYG-Editor, einer Trackback-Funktion und Plug-in-Schnittstellen ist Serendipity mit der leistungsstarken und bewährten
Template~Engine Smarty ausgestattet. Diese erm öglicht es, komplexe layouts und Templates innerhalb eines PHP-Frameworks zu
erstellen und damit flexiblen Code zu erzeugen, der wiederverwendet werden kan n.

Hinzu kommen Wortfliter, Captchas sowie das zeitli ch beschränkte
Sperren als Spam-Schutzmaßnahme, die flexible Ein- und Ausgabe
von Daten (HTML, Text ile, Wiki, BBCode usw.) sowie di e Importfunktion aus Movable Type, WordPress und anderen Engines. Ein
weiterer Vorteil ist durch die einfache Integration der Engine in
bereit s exist ierende Webseit en gegeben. Außerdem können WebFeeds für einzelne Sei ten bereiche (und nicht für ganze Weblogs)
au tomatisch erste llt und abonn iert werden. Zahlreiche Plug-ins
erweitern die Funktionalität der Engine.
Serendipity ist sehr leicht zu bedienen. Sowohl für professionell e
Auft ri tten als auch für kleinere Projekten erweist es sich als leistungsstark. De r wesent liche Vorteil des Systems liegt zweifellos
in der Integrat ion der Smarty- Engine. Auch kann die Engine problemlos auf die WordPress -Datenban k zugreife n, etwa um Inhalte
aus WordPress zu exportieren.

I
.=-----_._,

... Abbildung 16.24
Ein robuster WYSIWYG- Editor
von Serendipity

16 .2.6 Weitere l ös un ge n
Erwähnenswert ist an dieser Stelle die auf Ruby-on - Rails basierende Weblog-Engine Mephisto (ht tp://mephistoblog.com), die
insbeson dere ei ne sehr elegante und benutzerfreundliche Ben utzeroberfläche sowie ein fl exibles Temp late-System zeigt. Das
System ist einfach zu bedienen und genügt einschlägigen Anforderungen moderner Weblogs. Eine sehr ausführliche Dokumen tation erleichtert den Einst ieg. Vorausse tzung : Der SeNer muss
Ruby unterst ützen.

-.:::::----

·
··
·::----

--,,-

.-_..

::;----

::---;-:;- -

. ~---

--...... __ ............. ........... _..-

-,--,-_._
,--.,. _--_... ,.
----"'-"..,...._

---~
<

·""'>CI/on><. ,,, 'Of_"_'/t'·
_'_ ....-""_
.,01D_ '.• .....--.

~

_

-.:

_~

...

... A bbildung 16.25
Mephisto, eine eher unbekannIe
auf Ruby-on-Rails basierende
Weblog-Engi ne. Bereitet die BlogFunktionalität kompakt. elegant
und benutzerfreundlich auf. Im
Bild: Übersicht der letzten AktiviI~ ten der Blog-Betreiber.

-.....

"

-

. "..1

, Mn

~_

••

.. Abbildun g 16.26
Benu tzerfr eundlIcher geh t es
kaum . Template ~E ditor In der
Weblog-Engi ne Mephisto
(hIt p:/lm ephis toblog.com>

f _ _' .. , _

Mit Drupal (http ://drupal.org)erhalte n Sieein schlaues Werkzeug
zur automatisierten Klassifizierung von Inhalten. Thematisc h ver16.2 Weblog-Engines in der Übersicht

79 5

.-

:;:.,==:r.=~-- -- - --- - ----

._--

• Abbildun g 16 .%]
Die Benu tzeroberfläche von
Drupal: m~cht ig . aber nicht unbedingt benutze rfreundlich

wandte Beit räBe werden von der Engine automat isch erkannt
und könn en dynamisch zu neuen Seiten bereichen zusammengefasst werden (Drupal Taxonomy). Sowohl die Ins tallat ion als auch
die Bedienung von Drupal si nd leider recht anspruchsvoll und
zeit aufi..vendig. Die Installation benötigt weitergehe nde Admini strator-Rechte auf dem Server.
Verweise zu weiteren Web-Publishing-Syst emen finden Sie auf
der Sei te htt p:/ / en.wikipedia.org/ wikilWeblog_sojtware. Demove rsionen zum Ausprobieren einiger der in diesem Abschni tt
genan nten Engines finden Sie auf http://www.opensourcecrns .
corn.

Ein Blog-Betreiber muss nich t un bedingt eine Engine auf seinem eigenen Serve r installieren. Viele Dienste bieten ein kostenloses Hosting der Engine an. Meist ens wird die Anzeige von
Werb ung als Gegenleistung gefordert. Blogger.com, Livejournal.
corn, WordPress.com, Blog.de und Twoday.net biet en ihre Dienst e
kostenlos an. Eine Übersicht weiterer Weblog-Anbieter finden Sie
auf der Seite http://en.wikipediaorglwiki/ B/og...pllblishinc-wstem
(Unkcode 573).

16.3 Ein WordPress-Templ ate entwerfen

e

Blogger -==-~

.=-_-.......

C:II _

Cl

!Q

151 i!

.. -

=~-----:.===:=- .. --

•

• Abbildun g 16.28
Auf Blogger.com können Weblogs in wenigen Schritten erstellt
werden.

Eine typische Au fgabe, die bei der Erst ell ung moderner Webauftri tte bei nahe unvermeidlic h auftauch t . sind die Anpassung eines
stat ischen Templates fur dynamische Weblog- Engines beziehungsweise der Entw urf einer dynamischen Layoutvorlage. Da
in den meisten Fällen nach schnellen und einfachen Lösungen
gesucht wird. w ird die WordPress- En gine hä ufig die Standardvorgabe sein. Zwar erfolgt die konkrete Vorgehensweise bei WordPress, Movable Type und ExpressiollEngine grundsätzlich unterschied lich, dennoch lassen sich einige Aspekte nennen, die f ür
alle Engines typisch sind . Ei n Beispiel zur Implement ierung ei nes
WordPreH-Layo uts kann des halb hi lfreich sein.
Im Folgenden be trachten w ir die Anpassung des in Kapi t el 9
entworfenen La you ts für die WordPress- En gine.

HINWEIS

16 .3.1

Zur Übersichtlichkeit werden
umfangreiche Teile des Codes
weggelassen. Der Quellcode des
umgesetzten WordPress- layouts
wi rd ausführlich dokum entiert
und empfi ehlt sich zum Selbststud ium .

Die Programmierung eines WordPre5s-Tem plates ist im Gru nde
genommen nichts anderes als eine Programmierung in PH P mit
zusätzlichen Attributen und Met hoden, we lche du rch die WordPress-Engine geliefert werd en. Die Umsetz ung eines stat ischen
Templates ist meistem viel einfacher als der Entw urf ein es Templates fü r Adobe Photoshop. Bei der Umsetzung eines Templat es
müssen Sie das Rad nicht immer wieder neu erfinden. Unabhängig

796

I

16

Weblogs

Vorübe rl egungen und Vorberei tung

I

vo n der Zielsetzung ist es nützlich, sich noch vor der konk reten
Umsetz ung mi t einem ",Sand kasten« auszurüst en. Auf WordPress .

org fi nden Sie Dutzende vorgefert igter Vorlagen fü r zwei- und
dreispaltige Layouts. Diese besi tzen die übliche Struktu r eines
WordPress-Templates und verwenden Met hoden und Attribute,
die im All gemeinen auch für Ihre Zwecke nüt zlich sein werden.
Nehmen Sie sich Zeit, um sowohl die einf achst en (KubrickTheme) als auch recht komplexe (Redoable 1.0, http://www.
deanjrobinson.comIWordPress/redoable) Layouts genau zu st udieren, um M uster zu erkennen und die St ru kt ur eines typischen
WordPren-Templat es zu vers t ehen. Entwerfen Sie selbst Templates. Als Vorlage n können Sie entweder selbst angepasste
Templates verwenden oder aber ei nes der Templates, die von
WordPress-Package mi tgeliefert werden (WordPress Gassic und
WordPress Oe/ault). Versuchen Sie bei Ihren Templat es, den Code
so abst rak t und dynamisch wie möglich zu halten. je haufiger

TIPP

100 ausgewählte klassische und
forfBeschrittene WordPressThemes stehen Ihnen auf der
Seite http://www.smashingmagaz/ne. com/ 200SJO 1/ 08/1 00·

excelle nt-/ree -high -quality -wordpress-themesl (linkcode 574) zur
Verfügung.

dynamische Anpassungen in der WordPress-Engi ne zusätzliche
man uelle Anpassungen erfordern, des to schwieriger ist das Template zu ha ndhaben.
In der Regel w ird ein WordPress-Tem plate aus mindestens
sieben Mod ulen bestehen. Die bei den unten eingeklam mert en
Mo du le sind für ein komplexeres Layout erforderlich.
... index.php: Ein Ha upt-Cont ainer, der regelt, wie die Startsei te
und die Inhal tssei te angezeigt werden. Er ent hält ent weder
vollstän dige (pos t ) Beiträge od er Auszüge (excerpts).
.. header.php: der obere Seitenbereich
.. search.php: Suchbox zur Behandlung von Suchan fragen

TIPP

Sie können die FunktionaJität
Ihrer Tempfates beliebig erweitern, falls Sie externe Plug-ins
verwenden und diese in Ihr layout einfügen.

..
..
..
..
...

sidebar.php : Sidebar, sekundäre r Infoblock
wmmeflt s.php: f ür Kom mentare
/oot er.php: unterer Seiten bereich
404.php: Sei te f ür Fehlermeldungen
[single.php J: Seite zur Darste llung eines Beitrags in voller
Länge
.. f/unctions.phpJ: Sämtl ic he Fu nktionen, die extra fü r ein Template geschrieben worden sind
Diese Namen sind durch WordPress vorgegeben. Liegt etwa sing/e.php vor, so wi rd de r Inhal t eines Beitrags aut om atisch gem äß
den Anweisungen aus single.php angezeigt .

HINWEIS

16 .3. 2 Grundl agen

WordPress-Templates ist rela tiv

Die Programmierung eines

Vor der Umsetzung des Templates soll ten Sie sich mit der Funkt ionsweise der WordPress- Engine auseinandersetzen. So ist es beispielsweise wichtig zu verste hen, dass WordPress d ie Bearbeitu ng
der Beit räge in Fo rm von Schleifen der Datenbankan f ragen aus16.3

einfach, benötigt aber Wissen
über die Methoden, Attribute
und Konstrukte, die in Word·
Press verwendet werden .

Ei n WordPress-Template entwerfen

I

797

füh rt. Jede Datenbankanfrage stellt der Engine genau einen Beit rag zur Verfügung. Ist der Beit rag abgearbeitet, wird die nächst e
Datenbankanf rage ausgefüh rt .
Betrachten Sie bitte die folgende Schleife, die in jedem WordfTess-Template auftritt:
whl1e ( have-p os t s()
<?php 1 f ( have-p os t s( »
post {) : 1>
1/ ... Quell code ...
<?php end while: el se: ?>
<p>< ?php _e ( ' Sor ry, no pos t s ma t ched yo ur ( ri t er1a .' ) : ?></ p>
<? php endif: 1>
Die bedeutet sinngemäß : ,. Falls Beit räge vo rliegen [i f ( have_
pos t s() ll. nimm einen. der noch nicht genom men wurde
[the_pos t (} :1. führe die Anweisungen des Programms aus
[ ... Quell code ... 1 und wiederhole da s Ganze so lange, bis alle
Bei t räge abgearbeitet sind [wh lle ( have_pos t s(» ]. Sind keine
Bei träge mehr vorhanden, so gib eine ent sprechende Meldung
aus [So r ry. no pos t s ma t ched J our cr1 t er1a.1 «. Die Anweisungen betreffen in der Regel die Darst ell ung des Beitrags auf
dem Bildschirm .

HINWEIS
Diese Übersicht ist nicht voUständig, Zahlreiche Obergabeparamet er, mit denen die Angaben
spezifiziert werden können,
si nd in der Dokumentat ion auf
http://w dex.wordpren.org ausführlich erläutert.

798

I

16 Weblogs

16.3.3 Methoden und Attribute
Viele Methoden und Attributen, die Sie beim Programmieren verwenden, funktionieren nur innerhalb einer Sc hleife. So lässt si ch
die Methode get_category () , welche die Rubrik anzeigt, zu der
der akt uelle Beitrag gehört, nur inne rhalb einer solchen Schleife
ausf ühren, da außerhalb der Schlei fe unkla r ist , welche Kategorie gemeint ist . Befände sich die Methode innerhalb der oberen
Schleife, würde man also den Quelleode du rch <?p hp the_category {) : ?> erset zen, so würde die Engine alle Beit räge nacheinande r abarbeiten und zu jedem Beit rag die jeweilige Kategorie
bzw. Kat egorien ausgeben.
Wicht ige Met hoden und Attribute, die Sie sicherlich häufiger
vervvenden werden, sind :
~
the_au thor ()
liefert den Autor des Beitrags (Schleife erforderli ch).
<p>Oi eser Bei t rag wurd e verfa ss t von <?p hp the_
author( ) ; ?></ p>
<p>01eser Be itr ag wu rde ve rfa ss t von Roge r Johan s son. </ p>

..

I

the3ategory()
liefert den Verweis auf die Kategorie, zu der der Bei t rag gehört
(Schleife erforderlich).
<p>Rubr1 k: <?php the_category() : ?></ p>
<p> Rubrik: <a href- " ... " title-H ... " >Web 2.0</a></
p)

.. wp_l1 st_ca teg or1es( )

..

..

..
..

..

..

..

liefert die Liste von Verweisen zu sämtlichen festgelegten
Rubriken des Weblogs.
< ?php wp_1i s t_pages ( . orderby- ! O&t i t 1e_
11-&style-11st'); ?>
liefert eine Liste (s tyle-l i st) . die nach 10 sort1 ert w1 rd und keine überschr1 ft en thal t ( t1 tle_l 1
1st leer).
wp_li st_page s()
liefert die Liste von Verweisen zu sämtlichen festgelegten Seiten des Web logs .
< ?php wp _l i s t _pages ( ' orderby- I O&t it 1e_
1i-&sty1e-1i5t ' ); ?>
lie f ert eine Liste (s tyle-11s t ). die na ch 10 so rtiert wird und keine überschrift enthalt ( tftle_li
1st leer ).
wp_link-pages( )
erzeugt eine Navigationsstruktur für Beiträge, die sich über
mehrere Seiten erstrecken. Um einen Beitrag auf zwei oder
mehr Seiten zu verteilen, kann man das Quick-Tag<! - - next page- -> (zusammengeschrieben) an den entsprechenden
Stellen setzen. Der Rest wird von der Methode erledigt.
< ?php wp_l i nk_pages () : ?>
genügt, um die Navigation auf mehrere Seiten zu verteilen .
blog1 nfo( )
liefert Information (z. B. den Titel) zum Weblog.
<hl> <?php bloginfo( 'name' ) ; ?></ hl>
<hl> talkin' web 2.0 </ hl>
the_I D( )
liefert die ID des aktuellen Beitrags (Schleife erforderlich).
<p>Pos tnummer: <?php the_ID (); ?></p>
<p>Pos tnummer; 8</p>
the_tftle()
liefert den Titel des aktuellen Beitrags (Schleife erforderlich).
<?php the_ t i t 1 e ( . < h3> ' . ' <I h3> ' ) ; 7>
<h3 >Podcas t: What I s It Good For?</ h3>
the30ntent ()
liefert den Inhalt des aktuellen Beitrags (Schleife erforderlich).
16.3

--.6.

Abbildung ,6.29

Das statisches layout von _talkin'
web 2.0. soll In ein dynamisches
Template überführt werden.

Ein WordPress-Template entwerfen

I

799

HINWEIS

Eine Übersicht zu weiteren Methoden urd Attributen finden
Sie auf den Selten http://wdex.
wordpress.org/TemplateJags und

http://codex. wardpress. arg!
CondltlonalJags (lInkeode 575).

~

the~ex cerpt ()

~

liefert den Auszug des aktuellen Bei t rags (Schleife erforderlich).
get~p os t s ( )
generiert eine Schleife.
(?php
Spostslfst - ge t~postS( 'numberpos t s-lO&
orderby-po st_title ' ):
f orea ch Opost sll st as Spos t) : start_wp() ; ?>
( ?php
<?php
( ?php
( ?php

the_date () ; echo ' ( br f >' ; ?>
th e_t1tle () : ?>
the_excerpt( ) : ?>
endforea ch; ?>

Nimmt die zehn letzten Beiträge der Datenbank, sortie rt sie
alphabetisch und gibt anschließend das Datum , den Titel und
den Auszug jedes Beitrags aus.
HINWEIS

16.3.4 Installation von WordPress

Die berühmte 5-Minuten-lnstaJlation von WOfdPreH wird auf

Die Installation der Engine geschieht schnell und schmerzlos: Package herunterladen, Datenbank anlegen, Konfigurat ion

http://codex. word press. org!
Instalf1n8_WordPress (linkeode 576) detailliert erläutert .
Einfacher geht es kaum.

anpassen (wp-config.php), auf den Se rver hochladen, das Installationsskript starten, den Instruktionen folgen - fertig. Das Weblog
soll ... talkin' web 2.0t: heißen und wird auf http://wWN.alvit.de/
web20 installiert .

Downlood Wo rd Press

__
_-- --_._
__ . -,,_._
_ _____-_.-",__
_._-

...._.___
. _n_
._--_.
".__....__
. _.. ".-_
..................
-.....
----~ -

_-~,..

_ _ _ .. _

Abbildu ng , 6.)0 ~
Schri tt 1: Zuerst wird das WordPress-Package von Wordpress.
orgldownload heruntergeladen ,
entpackt und auf den Server
hochgeladen.

Abbildung ,6.)1 ~
Sind die Dateien hochgeladen,
so fordert die WordPress-Engine
beim Aufruf des Adminbereichs
(www.alvit.de/web20/wp-adm i nl)
den Arwender au f, die KonfIgurationsda tei wp-config.php zu
modifizieren.
800

I

,6 Web/ogs

............

.. _ . _ _ .. w _

.
__
..
.,,--_
_"'
-------_
-----""-_
........
-.. ...., __-..

~_.

... ...

... ..
... ...
..................
......

.

..
......
..
-~

..............

_--~.-

---

---.

- ---- ._-

.---

,

• O·

_..,.... ..

" _, ..

_....-.,..

TI•.,• • - - . _ _ MI .. . .... _ _ ' •• _

. ... _

.... _-,..

11.. ....... ... <0119'< """ .. ... _

~""'......,.._-

..... _ ' _ ... n ............... _ . . - _ ....

~

.

..

"

.... _-----CJit· c:

.

11 •• MrrSQt

v,...,. .. h

doInt( [l$JO""'!,
~

"J, "...

~ ~,J<;Jl' . . . . .~"

~k

• 11

lO

11
11

--------

Chongt I"" 10 lOUIiIoo WMIf'r... A fOI'

11_~_bt~1O
.~_

""..., 10 ...-(01'1 .... '

t __ .... _ . _ _ .. _

U " 10 ..... '.. c;......., 1......,..,,-,
I'

doMo l

...

I

.

--------------

:OU .... H.)'

11 roo ~....,..,

.

...---_._----_------._--_
... _---_
..._-_
........
_- ...-.....-

IJ n...

IIY_

) doir>oC Dt-'ASSWOJC, -...L'I"''''1..4l11
• doIIoo( t><LHO'>l_ 'IDuIhcII'k " _ ,
<WntI 08_OiAIStT, utft\
~ I

__ ... __ .... . ,....

~

.. _

.. Abbildung 16.]2

Schritt 2: Die Datei wp-conligsample.php wird in wp.config.php

.. Abbildung 16.33
Schritt 3: Die Konfigurationsdatei wird hochgeladen

umbenannt und konfiguriert. Die
Angabe In de r Zeile 14 sorgt für den
deutschsprachigen Admln-Bereich.

_---- .. -

tt .
.....

und die Seile www .alvit .de/web20/wp.admhv noch
einmal aufgeru fen. Der 8log-8etreiber wird um die
Eingabe de~ 8log-Titels und der E-Mail-Adresse gebeten. An diese werd en Zugangsdaten versandt .

_ _ _ _ _ _ • .a.

c:

~WORDPRESS

-__------_._..
...

..

- ...-------_

.....

.. Abbildung 16.34
Die Installation ist erfolgreich abgeschlossen .

..

--.............
-

...... _-_ ... _..
-

,

~

:.':.::...-:=- -

._-

~z===--==~

----

...-

.. Abbildung 16.]5
Die Anmeldung bei der
WordPress-Eflllne

-

........... . .0

00' _ _

. -- -

1____
1

-

-

- --=-:;::F~~-=-

- -- .__._--- --~

.. Abbildung 16.)6
Das Hauptmenü der
W ordPress-Engine .

t.alkin' web 2 .0

..

.

=-------_
--.. -.. _--------------__._-_
_......__
_-.._._,
_-_._
_-_
... -------... _------_
-_-_
..
...... _- ----------------_
.. __ ......
------...._-.._--_
.._
_-_
_. ___-_._._-. _-------_
-_----_
_...._---.. _-_._ .. - .
------------_.

-__-_
-_
-~-_

...

...

------~~--

....

...

----~-----

... .......

._-

.. Abbildung ,6.]7
Mit etwas FOlitext erhalt man die folgende Stand,yddarstellung. Die Install ati on Ist abgeschlossen,
das Weblog ist lauffahlg.

16.3

Ein WordPress-Template entwerfen

801

16.3.5 Ana/yse und Strukturierung des statischen
Templates
HINWEIS
Bei komplexen Vorlagen ist es
notwendig, die Seitenstruktur
zuerst in einzelne Bereiche aufzuteilen , um diese die Engine
anschließend dynamisch zusammenfügen zu lassen .

Catego rie s und Pages
Caregor/es st ehen in WordPress für
Rubriken. in denen Daten abgelegt werden; Pages für einzelne
Sei ten, die unabhangig von den
übrigen Beiträgen festgelegt werden.

Analysieren Sie nun das stati sche Template und gliedern Sie es in
Bereiche, die zum oberen Schema de r WordPress-Layouts passen.
Arbeiten Sie den Code Schritt für Schritt ab. Bei größeren Tem plates kann es nützlich sein. Teile des Codes zuerst in einzelne
Dateien aufzuteifen und mit diesen Dateien zu arbeiten. Im Beispiel wurde dies bereits getan.
Bestimmen 5ie Rubriken und Seitentypen, die im Webrog verwendet werden, und legen Sie diese in WordPress fest. Beachten
Sie, dass in WordPress zwischen Rubriken (Categories) und Sei tentypen (Pages) deut lich unterschieden wird. So können Beit räge in
Rubriken, aber nicht auf Seiten abgelegt werden. Seiten ste llen
besondere Einheiten dar, auf denen zusätzliche Informationen
präsentiert werden; sie können auch in einer nicht chronologischen Form angezeigt werden.
Um vorhandene Rubriken nicht mit Beispieltexten zu füllen.
wird im Beispiel zusätzlich zu »Design«, »Typography« die Rubrik
»Web 2.0« hinzugefügt (MANAGE ' CATEGORIES im Adminbereich). Als Seiten werden zunächst »A rchive« und ,. About« hinzugefügt (MANAGE ' PAGES).

16.3.6 Hoch/aden der Dateien und Umsetzen des
Header- Bereichs

HINWEIS
Als Vorlage für das dynamische
Template wird das KubrickTheme verwendet. Es stellt
samlliche Funktionen eines
Weblogs in einer minimalistischen Seitenstruktur zusam men und ist optimal. um ein
statisches layout in ein dynamisches umzuwandeln.

801

I

16

Weblogs

Um die Umsetzung einfach zu halten. verwenden wir das Standard-Theme Kubrick. Sie stellt die einfachste Vorlage vor. die mi t
sämtlichen wesentlichen Seitenattribut en und funktionen ausgerüstet ist.
Kopieren Sie das Kubrick-Theme in einen neuen Ordner (im
Beispie I http://alvit.de/ web20/ wp-contentithemes/ web20) . Laden
Sie Ihre (55-Dateien in diesen Ordner und benennen Sie diese
entsprechend um. Laden Sie außerdem Bilder, JavaScripts, FlashDat eien und Ähnliches in die ent sprechenden Verzeichnisse auf
Ihrem SeNer. Im Beispiel werden Bilder im Ordner images! und
die Datei style.css (wie durch WordPress standard mäßig vorgeschrieben) in den Ordner des neuen Themes hochgeladen.
Um die Header-Datei anzupassen, wird die Datei header.php
geöffnet und mit dem Quellcode des stat ischen Templates abgeglichen. Elemente. die zum Beisp iellayout nicht passen, werden
entfernt; Elemente, die nicht vorkommen, werden eingefügt. Im
Beispiel betreffen die Veränderungen nur das Element IJwrapper und die Sei tell5t ruktur der stat ischen Vorlage, die einfach
kopiert wird. Der Inhalt vor ( body > bleibt unverändert. Stat ische
Elemente, die im statischen Layout mit konkreten Werten versehen sind, werden durch dynamische Angaben ersetzt . Der Zugriff

I

darauf erfolgt Ober die WordPress-Methode blogfnfo( ). Die
Methode _e ( ) wird zur Ausgabe von Meldungen und Informationen (echo) verwendet.
So wird etwa
<hl ld- "headllne " ><a href-" lndex.html ">talkln ' web
2 .0</a></ hl>
zu :
<hlld- headllne ><a href-" <?php bloglnfo ( 'url' ) ;
?> "><? php bl ogfnfo( 'name ' ) ; ?></ a></hD
M

M

Zur Darstellung der Sei ten navigation ist es notwendig, mit der
dynamisch erzeugten Struktur der Engine zu arbeiten, da ungewiss Ist, welche Selten rubriken in Zukunft erzeugt und verwendet werden . Diese Flexibilität lässt sich mithilfe der Methode
wp_l tst_page s( ) erzielen:
<d1v ld- navlgatfon ")
M

<uD
<1 php wp_ll st_page s( , orde rby-I 0& t 1 tl e_
lf-&sty l e-llst ' ) ; ?>
<l uD
</d fv )
<1-- end header -->
An dieser Stellung kommt die durch CSS und (X) HTML gegebene
strikte Trennung zwischen Darstellung und Struktur deutlich zur
Geltung. Die Gestal tung des Weblags wird im Wesentlichen beinahe komplett übernommen, nurdie Strukturund kleinere Details
mü ssen zusätzlich angepasst werden (5. Abbildung 16.39).

--_
.. _-_
........
--_
_----_
. _. - •
---------_
.. ."--""'-----"
----------_
.. ------_
--__
.
_-_
..
.....
_._.
--_ .._._._-_..._- ....
----_
--_
--'--------'"
... -_--_ u.-_ .....

..

~.

...

.. ..... ...
-~

""---~_

_.

I

1

..

.. ..

... Abbild ung 16.]8
Das Verandem des HeaderBereichs und Eßetzen der
(55-Dateien genügen, um die
gMümchte 5eitendarstellung
zu erhalten.

•

..

•

'

_

16.3

Ein WordPress -Temptate entwenen

I

803

16.3.7 Umsetzung des Bereich s mit dem Inhalt
Die Datei index.php regelt die Anzeige des Bereichs mit dem
eigentlichen Inhalt. Nach wenigen Anpammgen des (X) HTMLMarkups an die C55-Datei ist es erforderlich, auch den PHP-Code
entsprechend anzupassen. Das Kubrick-Theme zeigt den kom pletten Inhalt eines Bei trags auf einer separaten Seite an . Um flexibler zu sein und nicht zwischen mehreren Seiten unterscheiden
zu mussen, kann man den Block
<div cl ass- "entr)' " )
<? php the_con tent ( ' Read the rest of thi s entry
&raquo: ' ) : ?)
</ dlv )
durch
<dlv class- " contenblock ")
<?php if(i s_homeO 11 i s_category() I 1 1s_arc hfve(» )

I
thE'_excerpt () ; ?)
<p class- "morefnfo ")< a href- ' <? php the_perma l lnk ()
?) " rel-"bookmark" ) Ful1 artl cle &raquo: </a></p)
<?php
} el se (
thE'_content ( ) :

ersetzen und den wichtigen TeH der Datei single.php in die Datei
index.php übernehmen.

,Lorem
, Ipsum dolor
f

.

HOIE

w.~ .,.

.... _ ••

_.«>10,,"''''

-~.

..

_ c...n..... _

...... If>""'" _

F,_. .

... _. ca"..,"''''

~t_"",Irr.d!b ~ "'J.oI"n

" ' _ ...l!I/t...
~

0«10

_.""9 _ ."" dD

.. _~",.9"''''' lA'_.d

""""xt 'k""'._ ~~ _

nIfI ""1Qüö> • •

C<\II1"'' ' ' ' C""If4\<I' DiM ',01'1> _ _ .. ""'_fr"

~'" .... . ... . . - _

.... 11901 "'-1h pO/li!" ["".pt .... U7I

"""..,c.r~m"""pr_",. """;,""",,, ""'01)0:)11: N ..."""", . .
""'" 1(f .I.I "II«UOI

Abbildung 16 .39

~

'"

Oom ....

!j

Der Inhalts-Bereich

Das Verteilen eines Beitrags auf mehrere Seiten geschieht in
WordPress mit wenigen zusätzlichen Meta-Angaben. Es genügt,
<? php wp_l1nk_pages {} : ?> einzufügen und das Quick-Tag
<! --nex tpage--> im Quelltext des Beitrages zu setzen. Hierbei
wird die Darstellung von Auszügen (Excerpts) und kompletten
804

16

Weblogs

Beiträgen (Content) entsprechend angepasst. Handelt es sich bei
der angezeigten Sei te um eine Sta rtseite, eine Archivseite oder
eine Rubrikseite (beinhaltet die Seite also auch andere Beiträge),
so soll jeweils ein Auszug mit einem Verwe is zum vollständigen
Beitrag angezeigt werden. Andernfalls wird der Beitrag ohne
einen Verweis komplett angezeigt.
Wird der Auszug nicht e)(plizit festgelegt, so wird der Inhalt
auto matisch abgeschnitten. Ist der Auszug festgelegt, wird der
Beitrag in der gewOnschten Form dargestellt.

I

.._--

-----_
. :::-.:.:.:::;:::'::.;:.-... _-_._.------- -~-

-_-"- 0
.. Abbildung 16.40

Ohne eine e~pllzite Festlegung
des Auszugs wird der Inhalt automatisc h abgeschnitten.

Lorem Ipsum dolor
~

~.

lD ... _ _ "
omtI,

<<)I'MC'_

o<Iop'~'"

....

"''Ir

••
".._ ..._ _ 1«_.
""'_'OI"'.a$>I"""" II.._'"
""""... _ .... _"'IIIPof. 01-.'..".. ......
~

1.1' ..... od

"'_ .......... ~"".,""'."""II._~IlNlIlfMlIll.",.. ..
CM' ....' (lUfJ . rM ..... _ " ,...,._
,,,
.......... 10 .fII ""ca. _ . W /iI(I.I_
EJl&tff_ W!I
<11>' _ _
#I CMI ... """

~."".

«<:HCIr~"""""-"" _,,~ , tUOII' ~'"

.-1lI0S1_

~""" ~ l ta l "'Cgrtn""::...

.. Abbildung ' 6.41
Auszug eines Beitrages

___...:~

Die obere Anpassu ng sorgt dafür, dass auch die Darstellung des
vollständigen Beitrags elegant aufbereit et wird.

talkin'

wes

.. Abb ildun g 16.42

link zum vollstlndigen Beitrag
lor.n Ij»UIn dolot

"-.. ".._ ...",,.~ _,, ~""III'MflpU"'''''-' .... ...
_ " " .... _ _ Lf_~I_ "'_dqw U_1d

"'_0"_ "ifI"._ n
_«m-..' nc.nm,"_
...._ _

..__ '" _
uc......

......,.r.

""f~""

h~lh

_ H •• _

_

.....

'''fIII''''

",,,,,lU

~_

""" • .c.1 ncoiIMI.1 """Pl9II!..... • 1Wlt In ~ Qof _1H1M11f .....
• _ItI . fllfD<l' ....

• NOTE
1" ..... ....,dror ..

l.oo .... _

-toIIPII\:..,
C<oI>I_'
'.
..

,CW .... _4<l>t
.. "" -~~
...,
....r-_iM••

Ir<~""

•• _

.. """"...

. _...

..,b._ ..... ""

. """

<'110.
- ""_
dtt _ _ _ 1<1 ... I0I:<l-.

"""p<><Iooo.

-----... ._-_ .....-_._ ... -.. . . ---._•.__ .

.. Abbild u ng 16.43
Der komplette Inhalt des Beitrags
auf einer eigenen Seite

....

16.3.8

Um se tz un g d er Sid ebar-, Fo oter- und

Co mm ent- Bere iche
In der Sidebar (f#s1debar) werden Informationen angezeigt , die in
der Datenbank abgelegt sind, und auf die über WordPrl'Ss-Methoden bequem zugegriffen werden kann. Das Ablesen und Dars tellen von Inhalten gesch ieht immer nach dem gleichen M uster,
16.3 Ein WordPress-Template entwerfen

805

Mit den folgenden Zeilen lassen sich etwa die fünf letzten Beit räge des Weblogs in einer liste anzeigen:

UHU! 5 , o.TI

r.I K. ~U r ....,-"
liI P

l,

ioI wa.E

r.1 ' '.,

.. "

,

, 1.0 •• ' -

"

liI 1.0<... ,_'" c,:.:,

.... Abbildung 16.44
Mit wp...,gecarchivesO lassen sich
die letzten Beiträge in einer Uste
anzeigen.

<h3 >Latest <em >5 Posts <lem> </h3>
<u1 e1ass-" date " )
<? php wp_get_a rehi ves ( ' type-postbypos t& 1i mit-5 ' ); ?>

<luD
Die Angabe Type-postbypost bewirkt, dass die Beiträge hintereinander ausgegeben werden. Mit type-da i 1y (Standardwert)
wird eine liste mit Verweisen zu Tagesarchiven generiert. Es sollen höchstens fünf solcher Verweise erscheinen.
<? php wp_ 1i sCca tegor 1e s ( . orde rby-name& t i tl e_1i - ' ) ;
?>
Mit dieser Zeile werden alle Kategorien in Form einer ungeordneten liste angezeigt . Vor der liste soll keine Überschrift erschei nen <title_l i-leer).

Abbildu ng 16.45 ..
Dynamische DarstellullI (.Browse
by TopiC*) der Kategorien und
Sei ten

"" ,

::o ....,~

...."""0

GoogIeAds

lirE OP""""

,... u ,,,",o

"!:w.
::0 ><11

T Ab bildung 16 ..;6
Verweise im Footer werden
dynamisch erzeugt.

Ccpyngh'

~OOl

c ..... " •• v .... f. ... d ... " W<"IlBng Ba""'" 11

806

I

Die Anpassungdes Footer-Bereichs geschieht mit wenigen Anpassungen des (X)HTML-Markups mithilfe der b log 1nf o( )-Met hode.
Bei Kommentaren ist ein wenig CSS-Styling erforderlich.

16 Weblogs

~
~ c ... ,,"

b,

2~

'0 ..... 3' e ... am",

X-lTI.41

...

ess

~

5011

,...... y _ _ ...

h~

........ _,....

I

..... .No.o2)".200' ." .............. _ ~ ... .

c.. ... _ _ _ _ _ _ ....... ...... t>t.oo r.. l:I.>..<....l _

,..... , .. ..,.

...... . r

3 Responses to "Podcast : What Is It Good For?"

.

. .. ."

t>. Yr4.")' fllt!d8wJ.1 Sa1.
"

""

,..... ,

Leave a ReplV
lDg gid l.. u .l xF ... J,\oi

' ~

... Abbildung 16 . 47
Etwa s (55- Styling für die
Kommentare

Der About-Block im rechten mittleren Seitenbereich soU automatisch mit Inhalten der Seite _About« gefüllt werden . Um dies
zu erreichen , wird die Methode query...po sts ( ) benutzt. Mit der
Funktion lass en sich nur diej enigen Beiträge aus der Datenbank
selektieren , die einer speziellen Bedingung genügen . Diese können anschließend tur eine Schleife verwendet werden . Be ispielsweise um alle Beiträge anzuzeigen, die in einem bestimmten Zeitraum gesc hrieben wurden.
Zum Filtern des Bereichs wird die Anfrage

<p>
<?php query_po st s( ' page_l d-2& showpost s- l ' ) : ?>
</ p>
verwendet, wobei page_1d-2 in der Daten bank in diesem Beispiel für den . About«-Bereich steht (WORD PRESS M ANAGE '
PAGES) . Der Parameter showpos t s gibt die Anzahl der Beiträge
an, die selektiert werden sollen . Anschließend werden die Ergebnisse der Anfrage in einer Schleife bearbeitet. Da der Inhalt des
Beitrags angezeigt werden soll, wi rd die Methode the_content
( ) benutzt .
<p ><? php query"'pOS t s( ' page_1 d-2&showpost s-l ' ) : ?></ p>
<? php 1f (ha ve-pos t s() : while ( have-pos ts(»
the_
po st () : ?>
<?php the3 0ntent ( ) : ?>
<? php endwhfl e : el se:? >
16.3

Ein WordPress-Template entwerfen

I

807

<p>< ?php _e( ·So rry. no pos t s mat ched your
criteri a. ' ) ; ?></ p>
<?php endif: ?>

'''''''
Aboul
TIM, 10 a tm ;, .. """,, ~ d
\·I<>~ ", . . . I.. """". 'fO<J

~ """" in

11 CS S. <XjHTM._lm<d 1.>,..,..1 10 "

ewij.o ol U. , 10 ~0Jt ._;>to:..,1 )'011 " .;11 '" """

Ab bildung 16.48 11Inhalt der Rubrik lO Abouh

ABOUT
llis 1I a tlilsc

~'9mp1eol

CSS . (XI HTML~
t ~te.

YOII <:<Ud

tlansbmin 9

"'v<:U 10 .. Vlodpr n'

«!iIl ~i ,

tCl pout

,n' otmotUl aoo., yoon .. '" you" .n. CCI
rto:ldQ<s tOOfo' ........ ~ 1'01 "1' comlng 100m.
Rnd c""""~ ~

Abbildung 16.49 1IDer Inhalt des about-Blocks
stimmt mit dem Inhalt der
lO About. -Rubrik überein . Der
Inhalt wird automatisch aus der
Dat enbank gelesen. Bei Anderungen der lO About«-Rubrik
ändert sich der Inhalt des Blocks
automatisch .

6

ßflOW3E B'{

r~ ,c

{f>Conlll "'1

Q.wee.a

",.,..

Hierin zeigen sich die Vorteile einer Schleife, mit deren Hilfe Sie
SOL-ähnliche Anfragen bequem ausführen können.

16.3.9 Erweiterungen und manuelle Änderungen
Trotz einer Fülle an verfügbaren Funkti onen liefert WordPre 55
nich t immer die Flexibilit ät, die ein Blog-Betreiber bei einer
Engine gerne hätte. Wegen der eingeschränkten Parameterübergabe bei der Methode wp_ll st_pages ( ) ist es etwa ni cht mögli ch, die Kategorien in einem Format auszugeben, das die aktuelle Rubri k ei ndeutig id entifiziert . Allerdings lässt sich di e aktuelle
Rubrik hervorheben, wenn die Engine sie als solche erkennt.
In diesem Fall wird das aktuelle Listenelement automatisch der
Klasse cu rren t'--pag e_i t em bei Seitentypen (wp_l i st'--pag es) und
der Klasse current- cat bei Kategorien (wp_li st -, ategorie s)
zugeordnet. Wird dagegen eine Sei te angezeigt, die zu einer der
vorhandenen Seiten gehört (zum Beispiel die Startseite, die zu
»Horne ... gehört), so ist es ohne manuelle Änderungen nicht mögli ch, diese Beziehung herzustellen .
808

16 Weblogs

Eine Alternative ist die manuelle Angabe der verlügbaren Kategorien in einem passenden Ausgabeformat. Die Herv orhebung
der aktuellen Rubrik muss dagegen nicht manuell erfolgen . Eine
dynamische Lösung ist mithilfe des body-Bezeichnes möglich.
Dieser Ansatz kann auch hier verwendet werden - vorausgesetzt,
das Menü wird nur selten verändert.
Zu diesem Zweck können Sie das WordPress-Plug-in C1assyBody
(http://www.alistercameron.com/2007/ 01 / 04/ wordpress-pfugi nc/anybody ( linkcode 577» verwenden.
Die Erweiterung weist dem <body>-Tag in Abhängigkeit von der
Seite, die gerade angezeigt wird, die jeweilige Klasse zu. Damit
lassen sich alle Seiten eindeut ig ident ifizieren. Im Beispiel sollen
.. Home_, »Archive_ und »About_ als Seiten verwendet werden.

I
....'_1.11 -

-._---

--

=
... Abbildung 16.50
Plug-In-Management In der
WordPress-Englne

In der Datei fleader.php wird der Block
<dfv fd-"navfgat1 on " >

talkin'

<u1>
<? php wp_l f st_page s( ' orderby-I D&tft1e _
11-&style-lf st ' ) ; ?>

WeB

</ u1>
</ dfv >

~.

HC)lJr

durch ei nen Block mit statischen Verweisen ersetzt . Die Verweise
können aus der dynamischen Darstellung abgele5en werden.
<dh fd- navlgat1on >
<u1>
<11 1d- Ohome " ><a href- " <? php bl og info( ' url' ) ;
?> N>Home </a></ lf >
<1 f 1d-" arch1ve " ><a href- o<? php bl og1nfo { 'url' ) ;
1>? pa ge_l d_2 >Ar ch he <I a></l D
<11 ld- " about o>< a href- " <?php bloginfo{ ' ur1 ' ) ;
?>?page_l d-3" >Ab out<1 a></ 11 >
M

ft

AR

lVI=

AROur

Ii
... Abbildung 16.5'
WordPress Ist nicht perfekt .
Haufig sind auch manuelle Änderungen erforderlich.

M

o

</ u1>
</ d1v >
Anschließend wird die Darstellung der Ustenpunkte in Abhängigkeit von dem body-Bezeichner gesetzt. Wird body durch Cl as syBody der Klasse horne zugewiesen, so wi rd der Menüpunkt
.. Home_ hervorgehoben. Wird ein Beitrag angezeigt (bodyBezeichner post), so wird »Archivec markiert .
body.po st IInavfgat10n lIarch lve a,
bOdy,post IInav1gat1 on lIarchlve a:hover .
body,home IInavlgatfon {,Ihome a.

------ . __. '---""'., _ _
_

"'_o~

. . _ . _ ... ... _ ' ... 0

_

.. ..

... Abbildung ,6.52
Die Selektion einer passenden
Rubrik geschieht automatisch mit
einer eleganten C55-basierten
l osung.

16.3 Ein WordPress-Template entwerfen

I 80g

body.home fjnavigati on J/home a:ho ver {
ba c kground: IJfff url ( Mimages/ b9-navlgatlon_
se l ected.gif O) repeat-x 0 0:
color: II1f1all:
f ont-weight: bold ;
text-decoratlon: none;

-. ,_.'-_..-_--,-----_.._-----

-~

~

"- ",,,-

-

.. Abb ildung 16.53
Der W3C-Validator zeigt: Das
erstellte WordPress-Theme ist
standardkonform.

Ähnlich kann man mithilfe des Plug-ins auch weitere Seitentypen
wie etwa die Suche oder Fehlermeldungen entwerfen. Ein weiteres Plug-in, das von WordPress nicht automatisch mitgeliefert
w ird, ist Simple Tagging (http ://sw-guide.de/ wordpress/ plugins/
simple-tagging (Unkcode 578)) .
Die Erweiterung ermöglicht es Blog-Betreibern, ihre Beiträge
mit Tags versehen und sie direkt anzuzeigen . Nach der Installat ion des Plug-ins genügt es, zu den Beiträgen die entsprechenden
Tags zu setzen. Die Tags können beliebig formatiert werden .

16 .3.10 Validieru ng, Überp rüfun g, Zu sa mm enste llung
Nachdem ein Template vollständig umgesetzt ist, ist eine Val idierungsphase zur Qualitätssicherung erforderlich. Zum Beheben
der Fehler lässt si ch beispielsweise der W3C-Validator verwenden . Er soll sic herstellen, dass der Code, der durch WordPress
produziert wird, standard konform ist .
Durch Hinzufügen weiterer Inhalte erhält man insgesamt die
fol gende Seitendarstellung:

-- ;;20

_

......

~._

_

=-•. .--_
. . __
.-._-_.
.--::...-.::::-..:;.-::::._--_
...__
..... _
....._-_.

:''':"''':::::'

::::..-::.::

._-,_.._-----_
.....__-_.-

....

,
-~~

...

=-_",!:,,","'::':::

'-'-''''

-;;-;= ..-:-.:'--:--= ...::...______..J

._-

.. Abbildung 16.54
Der obere Seitenbereich

~

_

.

_

.

.

.

., _

.

.
•
...
•
.
..
_
...
-..
_----_.
----------_............ _-_.-....- .-=::_ ------ [, lJ
---_
_
._--_._---......-__- ... .,-----_--.. _--_ ......_--. -- -_._--- ... --_.-...----_
. _ ••___ w. _ __ __ •

,

_ _ _ _ _ . . . . .M

I

=:::.:::::,:'=.-:: " <A
;::-- ::::::.-=-.-::'-.0:::.::. t!.~~~

.•

~-----

.. Abbildung 16.55
Der mittlere $eitenbereich

Da s Ergebnis ISt ein elegantes und funkti onales WordPress-Theme,
das einfach zu verwalten ist und mit zusätzlichen Optionen erweitert werden
en kann.

810

I

16 Weblogs

, -;---- -- .
... ..................
.... .....
~_

_.

•

_____fa.. ....

.

...

_

._...
--.

1......-.. _ . . . . ", __

..
...

----_._
_-_.
.

_~

- -"-'''-''

--_
.. _----._-_.
-......- --------_
_-_
.. _
_. .
. _----_
----_
. _--_
---~_

I

."---__ --__-,-_--_
.._-.. -

_-_
_--_
_ _-.-_
_
_--__--------_
_-_ _--___

.. .....
........
...
....
... _. ... . ... ..... .......
.... ...
........... ....

...

_..

Joot"

---...

-.....-

.---•

--~

~I R"""

• Abbildung 16.56

• Abbildung 16.57

Der untere Selt en bereich

Kommen tare auf der Seite eines Beitrags

16.4 Weblogs: Strategie zum Erfolg
Die wohl schwierigste Aufgabe, mit der Webautoren in der
Anfangsphase konfrontiertwerden, ist die Etablierung ihres neuen
Weblogs neben populären, thematisch verwandten Webauftritten. In der Regel ist das Hinzug€'\AIinnen neuer leser keine einfache Angelegenheit und setzt neben viel Zeit und Ged uld auch
die nötige Motivation voraus. Eine durchdachte Strategie kann
dabei helfen , an der Zielsetzung festzuhalten und beim Publizieren der Inhalten konsistent zu bleiben. Diese Strategie basiert
auf typischen Heuristiken, die sich in der Praxis immer wieder als
richt ig erwiesen haben.
16.4.1 Heuristi ken
Erfolg = Qualität + regelm äßiges Publizieren I Je häufiger qualitativ hochwertige BeitrJge veröffentlicht werden, dest o schneller wird der Erfolg eines Weblogs anhand steigender Aufrufe
sichtbar. Jeder erfolgreiche Beit raa erhöh t die Besucherzahl und
gibt dem Web log positive Impulse für seine Weiterentwicklung.
Das Potenzial des Weblogs steckt nicht im W issen des BlagBetreibers, so ndern im Wissen, das dieser im Weblog veröffentlicht. Exklusive und nützliche Inhalte stellen einen Schlüssel zum
Erfolg dar. Eine unangekündigte Pause beim Publizieren führt
in der Regel zum Verlust von lesern, die jedoch beim erneuten Publizieren meistens schnell zurückkehren . Wird ein Weblog mehrere Wochen oder Monate lang nicht mehr aktualisiert,
so sinkt die Zahl der Abonnenten in der Regel rapide. Besucher,
die über Suchmaschinen oder externe Verweise auf das Weblog aufmerksam gemacht wu rden, kommen trotzdem. Nega tive
16.4 Weblogs: Strategie zum Erfolg

811

Rückmeldungen oder wenige Posts wirken sich im Allgemeinen
wenig stark auf die Beliebtheit des Weblogs aus als einige positive

-

Posts.
Abbildung 16 .58 10Sma5hingmagazine.com, das
vom Autor des Buches und von
Sven Lennartz (Drweb.de) im
September 2006 gegründete englischsprachige Onllne-Magazin für
Webdesigner.

- ,..

-..

. ... ..

.., ..

'

.

- •.__.-_._.,.-

:?~

Artieles by T ople: Design
Showcase
..er _ _ 91

-_--

......._-.
0.,_",.._._---...
... _... _
------_---...
_--- - ...------_
... __ .... ~ , -,

_

.......""_ .
.... .....

OuoOtTho_

---~_

.....

--

DeoiiIn s.r..y,
~

","""

~.-

-- -_
00091 _ _

...."--_._.----.----_
..- -_
_
...........
-_
....
_,
-'---'---"._-.....
-'---_-- '.
,

OICr ......

_--- ~

---- ~

Erfol g setzt ein perfektes Timing vora us I Zur Erhöhung der
Popularität ist es vorteilhaft, neue Beiträge genau dann zu veröf-

- --........
_

~

..

• _ _ _ _ n _ _ _ _ __,..
_----~._,---_

~--,---

-- -_..._.. _. _.
• Abbildung 16,59
Über 5.<XXl Digg-Nutzer haben
ein lesezeichen auf einen der
Posts in Smashingmagazine,com
abgelegt.

__

-----.

lJ ~-- - '

------

-------~---

• Abbildung 16.60
auf deLicio.us haben 20.500
Nutzer ein Lesezeichen auf einen
Beitrag von Smashingmagazine .
com geselzt.

812

I

16 Weblogs

fentlichen, wenn mit optimalen Bedingungen für ihre Popularität
zu rechnen ist. Ein Beitrag soll te daher rechtzeitig in populären
Netzwerken wie del.iäo.us, DieB oder Stumbleupon erscheinen.
Und zwar genau denn, wenn zum einen möglichst viele Leser
für den Bei t rag abstimmen oder diesen verlinken können, und
zum anderen, wenn möglichst viele Interessenten angesprochen
werden können .
Qualität verj ährt nicht

I Hochwertige

Beitrage, die in der Ver-

gangenheit erfolgreich waren, treten mit der Zeit zwar in den
Hintergrund , verlieren aber nicht an Qualität. Die regelmäßige
Qualitätssicherung - etwa das Entfernen ni cht mehr exist ierender
links - ist wichtig, um den Wert eines Beitrags aufrechtzuerhalten. Dadurch werden nicht nu r regelmäßige Leser des Weblogs,
sondern auch viele zufällige Besucher, die über Verweise und
Suchmaschinenanfragen auf die Sei te geführt wurden, gewon nen.
Der Erfolg ein es Weblogs bas iert auf dem Dominoeffekt I
Jeder gute Beitrag kann die Anzahl der Seitenbesuche stark steigern und dem Weblog damit zum Durchbruch verhelfen . Wird
ein Artikel von einem prominent en BIogger entdeckt und verlinkt, so kann dieser Verweis Besucher über Jahre hinweg auf
Ihre Sei te ziehen. Weitere prominente BIogger werden so eventuell au f Ihren Weblog aufmerksam und verlinken ebenfalls. Die

I

wesentliche Aufgabe eines Webautors besteht darin, möglichst
viele Anknupfungspunkte zu erzeugen, die von anderen Webautoren entdeckt werden. Allerdings wächst die Bedeutung und
Popularität eines Weblogs meistens nicht konstant, sondern
sprunghaft . Im Web sind derartige Effekte aber typisch .
Der Erfolg eines Weblogs lässt sich planen I Dominoeffekte
lassen sich durch gezielte Impulse erzielen. So hilft es etwa, prominente Webautoren durch die Qualität eigener Inhalte zu überzeugen. Die aktive und konstrukt ive Teilnahme in thematisch
velWandten Diskussionen (Weblogs, Foren) lenkt die Aufmerksamkeit anderer auf die eigene Seite. Zuviel Plan ung schadet oftmals . Eine Mischung zwischen manuellen Eingriffen und einem
organischen Wa chstum ist hilfreich. Erholungsphasen können
nützli ch sein.
Oie Ansprüche der lese r wachsen mit dem Erfolg des Weblogs I leser stellen an den Autor eines Weblogs gewisse ElWartungen, die erfOlit werden mussen, damit das Weblog regelmäßig
von ihnen gelesen wird. Mit jedem erfolgreichen Beitrag wachsen
die Anspruche der leser. Jeder Flop spiegelt sich umgekehrt in
einer sinkenden Anzahl der Abonnenten wider.
unbegrenzte Nachfrage
Tritt sehr seilen auf,
verstößt gegen das
Aneebot(Nachlrage-Prinzip

Unbegrenzte Nachfr.ige

Google

U
.....
~

•..... gqplWinllC· Ul"lordlmcn I Wobun&

Begrenztes Angebot

Begrenzte NaChfrage

" Read/WnteWlb

t:

weWogs; j W$bung

8ejlrenztes Angebot

Unbegrenztes Angebot
Begrenzte Nachfrage

~

... Abbildung ,6.6,
EInkommenswachs tum bei verschiedenen Seitentypen laut
einer Analyse von Ale~ Iskold aus
ReadlWrlte Web (h ttp://www.
rea dw riteweb .com!archives/
google_the_ultlmate_money_
maklns....machlne .php, Unkcode
579). Bel Blogs (links unten) gibt
es einen S1ittlgungspunkt .

~
l.illllolhrnm

Ct~ UnlKMhmm

_-

I E1&mzifolle Cii~

. ..... .

uobegren.zt.e5 A~ebot

Das Wachstum jedes Weblogs ist beschränkt I Ähnlich den
Wachstumsvorgängen in der Wirtschaft folgt auch das Wachstum von Weblogs gewissen Gesetzmaßigkeiten. Die Popularitat
ist durch mehrere Faktoren bestimmt. Insbesondere wird der
leserkreis durch das Thema des Weblogs mehr oder weniger fest
best immt. Die Hinzunahme neuer Themengebiete kann sowohl
,6.4

Weblogs : Strategie zum Erfolg

I

813

zur Gewinnung als auch zum Verlust vo n lesern fOhren . Jedes
Weblog erreicht früher oder spä ter einen Sättigungspunkt, der
nur durch perm anente Erweiterungen und Verbesserunge n übertroffen werden kann . Diese sind mit weiteren zei tl ichen Investit ionen verbunden .
16.4.2
HINWEIS
Der Beitrag _10 Innovative Blog
Business Models« (http://www.
problogger net/a.rchlve!.l2008/09/
22/ 1O- Innovd tlve-blog-businenmode/v, linkcode 580) beschreibt zehn alternative Strategien fü r erfolgreiches BIoggen.

Strategie

Um den zunehmenden Erwartungen anspruchsvoller leser
gerecht zu werden, ist es w ichtig, noch vor der Veröffentlichung
eines Weblogs einen realist ischen vorläufigen Zeit plan zu en twerfen. Überlegen Sie sich Themengebiete, in denen Sie si ch
gu t auskenn en und die für viele Nutzer interessant sein könnten.
Betrachten Sie zu diesem Zweck erfolgreiche Weblogs aus Ihrem
Themenbereich . Vergleichen Sie diese miteinander. Se ien sie kreativ und einzigartig: überzeugen Sie durch exklusive Ansätze,
ungewöhnliche Vorgehensweisen und außergewöhnliche Themen. Spontane Einfälle können am Rande der Planung not iert
werden und beim Verfassen der Beiträge Quelle neuer Ideen darstellen . Kopien werden sch nell als solche erkannt und den guten
Ruf des Weblogs schnell beschädigen. Versuchen Sie, ihre Leser
durch die Themen zu binden. Planen Sie Inhalte, die im gleichen Umfeld liegen, aber dennoch unterschiedlich genug sind.
Tasten Sie unterschiedliche Themen ab. Die Behandlung von wei t
auseinanderliegenden Themen kann zwar mehrere Zielgruppen
ansprechen, wird aber keine t reue Leserschaft in der Anfangsphase entst ehen lassen. Außerdem wi rd es mit der Entwicklung
des Weblogs immer schwerer werden, sich auf mehrere Themen gebieten zu konzentrieren und hochqualitative Bei t räge zu allen
Themen regelmäßig zu liefern.
Steht der Entwu rf fest, so nehmen Sie sich Zeit fü r d ie ausfü hrliehe Vorbereitung der Beiträge. Um ein Weblog zum Laufen zu
bringen, sollt en Sie das Interesse der Leser du rch einen herausragenden Beitrag gewinnen. Dies können besonders gut recherchierte Beiträge sein oder ein ausführlicher Artikel zu einem kontroversen Thema . Ebenso können Sie auch auch kleine Geschenke
anbieten . Etwa einige Icons oder ein von Ihnen erstelltes Tem plate. Bieten Sie etvvas an, wofür Ihre Besucher Ihnen dankbar
sein werden und deshalb gerne auf Ihren Weblog zurückkehren.
Fugen Sie Verweise auf Ihre Bei träge auf bekannten Diensten
wie del.ido.us und Digg ein. Aber auch in Webprojekten, die mit
Ihrem Thema thematisch verwand t sind . Benachrichtigen Sie
Technorati und Google über Ihr Weblog.
Legen Sie für sich ein Tempo fes t , in dem Sie Beit räge ve röffentlichen wollen. Regelmäßigkeit i st w ichtig. Die Qualität der
Beiträge darf dabei keinesfalls unter dem Zeit druck leiden . Stim -

814

I

16

Wehlogs

I

men Sie die Auswahl der Themen mit deren Popularität ab - diese
lässt sich häufig an den Kommentaren der Nutzer ablesen.
In de r Anfangsphase ist es sinnvol l, die Anzahl der angezeigten
Werbeblöcke klein zu ha lten. Um das Wachstum Ihres Weblogs
genau im Auge zu beh alten, sollten Sie modeme Analyse · Dienste
verwenden. Verändern Sie die Platzierung der Werbung sowie
die Farbwahl. Lesen Sie im Web, was über Sie geschrieben wird.
Die Suche in Google und Technorati nach dem eigenen Namen
oder Ihrem Weblog wird in den meisten Fällen vollkommen ausreichen. Modifizieren Sie Ih r Weblog gegebenenfalls. Das Design
ist weniger wicht ig als eine durchdacht e St ruktur.
Folgen Sie unabhängig von den Ergebnissen in den erst en
Monaten I hren festgelegten Richtlinien. Google benöt igt meistens
mehrere Wochen, um eine Seite " abzutasten« und ihre Qualität
einzust ufen. Mi t einer zunehmenden Anzahl von interessanten
Bei träge n wird auch die Anzahl der Nutzer, die auf Ihre Se ite über
Suchmaschinen gelangen, zunehmen.
Setzen Sie bei allen Ihren zukünftigen Bei t rägen auf Qualität
und einen Nutzwert. Experimentieren Sie bei der Auswahl und
Präsentat ion von Inhalt en und knüpfen Sie Schri tt für Schritt neue
Kontakte und Bekanntschaften mit gleichgesinn ten Nu tzern und
Autoren. In der Regel sollten sich die ersten Früchte Ihrer Arbei t
schon nach wenigen Monaten bemerkbar machen.

16.5 Zusammenfassung
Mit Online-Journals (Weblogs) wird das Web zunehmend zu
eine m Medium, das durch jeden einzelnen Webautor geprägt und
mitgestaltet we rden kann. Das Publizieren von Bei t rägen erfolgt
mit einschlägigen Web-Publishing-Werkzeugen einfacher als je
zuvor. Der Erfolg eines Weblogs ist plan ba r, bedarf aber eines
organischen Wachst ums, das durch die Q ualit ität und Regelmäßigkeit der Bei träge sichergestellt wird.
Die Wahl einer opt imalen Webfog- Engine ist eine Frage der
Zielsetzung und Erfahrung, die ein Blog-Betreibe r mitbringt. In
den meisten Fällen wird für einfache Lösungen WordPress ausreichen; für fortgeschrittene Aufgaben eignen sich am best en Textpattern und Movable Type. Profis erhalten mit ExpressionEngine
absolute Kontrolle über ihre Auftri tte.

16.5

Zusammenfassung

I

815

17

Ausblick

In seiner zweiten Entwi ck lungsphase ertebt das Web eine ausgesprochen einfache, aber dennoch fu ndamentale konzept ionelle

Erneuerung: Waren Nutzer noch vo r wenigen Jahren auf die
passive Erforschung von WebinhaJten angewiesen, so setz t das
Web 2.0 auf die Partizipation der Nutzer, um Inhalte, Dienste

und Menschen auf interaktiven Plattformen zusammenzuführen.
Was ist geschehen? Der Drang zu offenen Technologien und

leichtgewichtigen, eleganten Lösungen zeigte zusammen mit
wieder entdeckten Konzepten schon zu Beginn des Web 2.0
seine Stärken (in der Wirtschaft: die . The Lang Taile- und »The
Attention Economy. ·Prinzipien, in der Technologie: RSS und
Weblogs). Innovative Applikationen mit einem praktischen Nutzwert fOr Jedermann (flickr, La~t.FM, Deficiou~) waren das Ergebnis dieser Entwicklung. Diese schufen eine solide Grundlage für
Rich e llent Applications und etablierten ein neues Netzverständnis. Wesentlich in diesem Zusammenhang Ist die Tatsache, dass
Inhalte - bisher nur über Querverweise verlinkt - zunehmend
auch semantisch ausgezeichnet werden und somit auch eine
Bedeutung transportieren können (Stlchowort Tagging).
In diesem Hinblick stellt das Web 2.0 einen wesentlichen
Schritt in Richtung dessen dar, was das Web ursprüngli ch werden
sollte. Mit MIkroformaten Ist der erste wichtige Schritt In diese
Richtung erfolgt. Doch damit ist das Ziel, ein aligegenwärtiBes
semantisches Netz von Webdokumen ten aufzubauen, bei Weitem noch nicht erreicht. Die Weiterentwicklung des Web 2.0, das
semantische Web, rückt näher und wird nach Einschätzungen der
Experten das World Wide Web erneut grundlegend verändern.
Doch was hat das Web der Zukunft tatsächlich zu bieten? Und
wie wird sich das Web 2.0 weiter entwickeln?
Das wesentliche Merkmal des zukünftigen Webs wird sich in
seinen ausgewachsenen Strukturen und Inhalten zeigen. Die beinahe natürliche Selektion von Inhalten und Webauftritten wird
das Web qualitativ hochwertiger machen. Webentwickler können
in Zukunft mit einer weiteren Modularlsierung von Webseiten

VerneUung
Die vemetzung zweiter Ordnung
fahrt Inhalte , Dienste und Menschen zusammen. Sie entwirft
ein neues Paradigma. in dem
Webnutzer mit interaktiven Applikationen inter<\!!ieren.

Netzver.;tandnis
Offenheit und Authentizität sind
die wesentlichen Merkmale des
Netzverstlndnisses im Web 2.0.
Masken werden abgelegt. Nutzer
werden zum Mitdiskutieren aufgefordert.

17 Ausblick

I

8 17

Semantisches Web

Das von Tim Bemers-l ee post ulierte semantische Web, in dem
sämtliche Inhalte semantisc h
ausgezeichnet und miteInander verknüpft werden, ist das
Hauptmerkmal des zukünftigen
Webs. Ober die Realisierung
des Konzepteswird noch heftig
gestritten.

rechnen. Darst ellu ng (CSS) , Seitenstrukt ur «X)HTML), Verhalten
(JavaScript ), Logik (Webdiemt e, API) und Dat en (Dat enban ken)
we rden du rch neue Standards noch st rik ter vo nei nande r get ren nt .
Die Funkti onalit ät (Feat ures) der Websprachen wi rd zunehmen
und sich verbessern.
Webn utzer können sich daher auf eine bessere Qualität der
Webapplikat ionen sowie mobile und rob uste Anwendungen einstellen. Diese werden schon bald bequeme r, fl exibler und mit
mehr Fu nktionen ausge statt et sein als die ve rt rauten DesktopAnwendungen. In teressan t ist dabei, dass die seman t ische Auszeichn ung der Inhal te neue dynamische Plattformen schaffen
w ird, die auf der automati sierten Kombinat ion von W ebdiensten
basieren.
Eine besondere Rolle wird dabei die bereits jetzt sc hon voranschreitende Perso na lisierung von Webauftritten spielen. Konkret
heißt dies, dass die Anfragen ei nes Benutzers in A bha ngigkei t von
seine n bisherigen Aktivitäten (in und außerhalb des Webs) beantwortet werden. liefern Suchmaschinen zu einer Anfrage im klassischen Modell eine Auflistu ng von Referenzen, d eren Relevanz
intern ei ngestuft wi rd, so w erden zu künftige Suchmaschinen
mehre re Webdienste dynami sch mi teinander verknupfen. die
Suchergebnisse Uve bewerten und diese in Form eines direkten
Dialogs mit dem Nutzer präsentieren.
W ich t ig ist dabei der Kontext, in dem die Suchanf rage erfolgt.
Eine personali sie rte Websuche wird es ermöglichen. auf die Int eressen jedes einze lnen Nutze rs genauer einzugehen. Al s wesentUche Grundlage hierz u wird die Integration von Entwicklungen
aus dem Bereich der Künstlichen In telligenz (Machine Learning,
Machine Reasoning, Natural Language Procening usw.) dien en.

Personalisierte Suche
und Suchdialoge

Sowohl Google als auch Yahoo
'
arbeiten mit Hoc hdruck an Konzepten für eine personalisierte
Websuche . In Zukunft wird die
Suche nach Webinhalten über
Dialoge mit Webanwendungen
erfolgen.

818

I

17 Ausblick

Im Allgemeinen w ird der Einsatz von intelligen ten Webd8ent en sowohl die Suche als auch w eitere Aktivitäten der Nutze r direkt beeinflu ssen . Das Verfassen von Inha lten wird etwa
durch schlaue Schrei bassistenten o nli ne möglich sein. Neben
effiz ient en Suchalgorithmen und fl exiblen Be nutzeroberflächen
können solche Agenten etwa d urch f reundl iche Avatare eine persönlichere und attraktivere Gestalt gewinnen. Ebenso werden die
Darstellung von Webseit en und die Auswahl der Inhalte zu nehmend personalisiert.

I
THf. CHANCWNO INTRAWU • fRO" 1.0 to

s.o 0 0.". Hlr- 2001

00_....... _-

._0(l
Il __ PIOfIIIt.
:=~

-----

......

~-

.",..

...

,

....

....

_

OUI GI

20"
... Ab bildung 17.'
DIe Evolution des Webs .
Illus tration von Gary Hayes
(http://person alizemedia.com)

,", IS.... •

I:!l LI FE

... Abbildun g 17.2
Auf Secondlife.com können Webnutzer ihre digi tale Welt erstellen
und als Charaktere online spielen.
Ende September 2008 verfügte
das Projekt über 14,5 Mill ionen
Nutzer. in de r Regel sind auf
Second life standig etwa 60.000
Nutzer online.

-...---~

17.1

~

Das mobile Web wird zum Standard

Das mobile Web wird schon in den nächsten Jahren Standard
sein. Mobile Versionen von Webseiten werden zunehmend erforderlich werden . Der Austausch von Daten zwischen pe, PDA und
Handy wird mittels einheitlicher Standards über das Web erfolgen,
Auch die Verknüp(ung von verschiedenen Geräten wird über das
Web möglich sein. So ist etwa zu erwarten, dass eine Rufnummer
über einen Verweis im BrOlNser eines Desktop-PCs oder laptop
auf das Handy übertragen und direkt angewähh werden ka nn.
Int eraktive Webdienste werden die Schranken von Desktoppes, Laptops und Handys verlassen . Im Haushalt, unterwegs und
1].1 Das mobile Web wird zum Standa rd

I

8 19

im Büro können wir kleine und robuste Gadgets etwarten, die
Informationen aus dem Web laden. Webdienste aufrufen und
Daten untere inander unbemerkt austauschen.

Ab bildung 17.3 •
So könnte ein mobiles Ger.}t in
der Zukunft aussehen. Ob ein
Enzyklopädie-Eintrag. ein ReisefUhrer oder ein Übersetzungsdienst: Informati onen werden
über das Web nachgeschlagen
und dynamisch nachgeladen.
Ein Entwurf von Mac Funamizu.
(htt p J Ipetitinvention wordpress.
com/2008/02/1OIfut ure-ofintern et-search-mobile-version/.
linkcode 590).

17.2

Das Web als mobiles Betriebssystem

Eine Entwicklung betrifft das Konzept des Webs als mobiles
Betriebssystem. das überall zugänglich ist (Portable Web). Das
Web-Betriebssystem wird Nutzern viele Möglichkeiten anbieten,
die im Moment nur von Desktop-Betriebssystemen geboten werden, und darüber hinaus noch mobiler, dynamischer und flexibler sein. Hinzu kommt beispielsweise, dass es möglich sein wird.
ein Benutzerkonto mit personalisierten Einstellunge n von einem
Webdienst auf einen anderen zu übertragen.

17.3

Das Web als Interactive Pool

Neben den Strukturen des Webs wird sich auch die Darstellung von Webauftritten verändern. Außer dreidimensionalen
Ansichten in einschlägigen Browsern (solche lösungen gibt es
berei ts) ist insbesondere ei n sogenannter Interactive Pool in Si cht.
Webseiten transformieren sich danach in Widgets, die au f einem
820

I

17

Ausblick

I

Desktop in Abhängigkeit von den Interessen des Anwenders und
Empfehlungen anderer Nutzer dynamisch angezeigt werd en. Das
System lernt dabei durch Gest ik, Sprache, Mimik sowie weitere
Reaktionen des Anwenders und passt sich dementsprechend an.

... Abbildung ' 7.4
Der 3D·8rowser SphereXPlorer
(http://www.spheresite.com)

.. Abbild ung ' 7.5
Aurora (www.adaptivepath.com/
aurora) Ist ein Konzep t eines
Interaktiven Betriebssystems, in
dem das Web als Int eractive Pool
aufgefasst wird. Neben einem
3D·Modell fOr die Präsenta·
tion der Daten setzt Aurora au f
semantische Webdienste und
eine Intuitive Nutzerfijhrung. So
lassen sich sämtli che Objekte per
Ha nd ziehen, heben, werfen und
modifizieren. Die notwendige
Technologie dafür exis tiert bereits
(Muhl.Touch). Aurora wurde von
Adaptive Path entworfen.

17-4

Einheitliche Identität

Das Web wird dynamischer, mobiler und durch mediale Konver·
genz immer schneller. Aufgaben, die zur Zeit mithilfe von meh·
reren Webseiten gelöst werden, können in Zukunft über offene
' 7.4

Einheitliche Identität

I

821

Schni ttstellen miteinander verknüpft werden und Ober definierte

Standards Daten austauschen.

OpenlD
.... Abb ildung 17.6
Das l ogo von OpenlD (httpll
openid.net). Der Dienst könnte

in Zukunft zum Standard der
Webauthentifizierung werden.

Dies erfordert unter anderem eine einheitliche Identifikation
auf sämtlichen Webseiten. Vorteil : Nutzer müssen sich ni cht auf
mehreren Seiten eine Vielzahl von Benutzerdaten merken, um
einen neuen Dienst zu verwenden. Auch wird die Verwaltung

von Benutzernamen und einfallsreicher Passwörter nicht mehr
erforderlich sein. OpenlD (http://openid.net) ist der erste vielversprechende Ansatz in diese Richtung. Webseiten, die OpenlD
unterstützen, erlauben ihren Nutzern, sich mittels der OpenlDIdentität anzumelden. Eine Regi strierung mit einem speziellen
Benutzernamen und zugehörigem Passwort wird auf den meisten
Seiten nicht mehr erforderlich sein.

17.5

Webentwicklung: Browserunabhängigkeit und neue Werl<zeuge

Die Vision einer komfortablen Seitengestaltung ohne das mühselige Behandeln von Browserinkonsistenzen rückt mit der neuen
Generation der Browser näher. Robuste Entwicktungsumgebungen (Panic Coda, Aptana) sowie die Integration von Entwicklungstools in die Browser (Opera Dragonfty. Firefox Web Develo-

per Extension, Web Inspector in Safari, Internet Explorl'r Developer
Too/bar) erleichtern die Entwi cklung benutzerfreundlicher Seiten
und Applikationen, die sich über gemeinsame Standards auf
beliebige Plattformen und Ausgabemedien übertragen lassen.
Zudem stellen Designer und Entwickler selbst eine Vielzahl
praktischer Werkzeuge bereit , wodurch die Seitengestaltung
schneller und effizienter wird . Die Etablierung neuer Standards,
etwa von CSS 3, wird Webdesignern neue Möglichkeiten bieten,
um kreat ive und flexible Webseiten zu erstellen. Die Entwicklungen ve rsprechen insgesamt robuste und flexible Entwicklungsumgebungen fLtr das Web.
All diese Merkmale sind ein deutliches Zeichen für die Entwicklung des Web s hin zu einem intettigenten, mobi len und
interaktiven Medium, dessen Anwendungen noch benutzerfreundli cher und pla ttformunabhangiger werden. Inwiefern diese
Zukunftwisionen in der Praxis umsetzbar sind, wird sich zeigen.
Eines st eht jedoch fest: Die Voraussetzungen fo reine enolgreiche
Weiterentwicklung des Web 2.0 sind heute schon gegeben.

822

I

17

Ausblick

Index
4s6bereastreel.com 150
960 Grld System 622
@Import 655
@import-Workaround 655
IJF 729

A
abbr 397
Abgerundete Ecken 319
Abkürzu~en 482

A-Blogger 65
Absolute Schriftgröße
large 166
medium 166
small 166
IC-Iarge 166
x-small 165

xx-targe 166
xx-small 165
Abstand
leerer 141
AcceSSlblllty 468, 491
Accesslbl~ty'(heckU5te

194

Accessibili ty Color Wlu!eI 263
Accessk!)'s 4.21
ACid2-Browsertest 657
Actlve und Focus 777

adjacent sibllng seleclors 653
Adobe AIR 40
Adobe (asien 224
AdobeFIex 40
Adobe Jenson 224
Adobe Kuler 261
Adobe Photoshop 353
Adobe Photoshop Express 39
Adobe Premiere Pro 766

Adobe SP'Y 720
AestheUc Usability Effec! 259
AJax 29. 667
Nachteile 723
AJalc-Bibllotheken 719
Akronyme 482
Aktlvltltslndtkatoren 691
Allmusic 75'
alt 479
Alternal~e

Beschriftungen 479

Alterwelhlcht 47'1
Amazon 44, 45. 53
amaztype 740

Analoge und komplementlre Beziehung 242
Antialiasing 186
API 47. 741. 754
Definition 754
VelWendung 755
Zl4!:riff 753
Apollo 721
Apple
Farbgestaltlllg 236
Apple iMovie 765
Appl eWebkit 657
Application Programming Interfa ces 47
Aptana 822
ARC 428
Architektur der PartiZipation 43
area 421
Arial 211, 214
ASP.NET Ajax: 723
Asynchrooous JavaScript and XML
29. J6
At om-Feeds 741
Attention Economy 62
Attribut
absolute 558
fixed 558
relative 558
statlc 558
Attribut-Selektoren 653
Audacity 764
Audiocasts 761. 764
Aufgeteilte komplementare Beziehung 241
Aurora 821
Auswahlmenfrs
multiple-Eigenschaft 429
Author kom 126
Avant Garde 225
avi ]68

B
backBround-posit ion 3Z7
Back~nks

55

Banner 270
Farben 270
Banner blindness soo
Ba rrierefreie InformationstechnikVerOfdnung 473

BarrIerefreiheit 263. 467. 468
Definition (68
MInderheiten 471
Mobile Endgerate 471
PrinZipien 468
Seitengestaltung 474
Suc hmaschinen 4]2
Typographie 193
Vorteile 469
Barrierefreiheit-Check 510
Basic Thinklng 76
BaskervlUe 224
BB Flashback 767
Bembo 224
Benutzer
verhal t ensmuster 493
BenutzerITeundllchkei t 491
Prinzipien 491
Beschriftung
alternative 194
BeZiehung
analoge 142
aufgeteilte komplement.1re 241
doppelt-komplementJ./"e 242
komplementAre 241
monochromatische 241
Triade 241
Bildbasierte Navigationsmenüs

4'9
BllDBlog 76
Bilder 163
Bildersetzung
Scalable Jens Image Replacement, sJIR 201
Bildschirmauflösung 149
800 )( 600 149
Blndest rlch '192
BIN 2002 473

Blindheit 471
Block-Box 523
Block-level 309. 520
Block-l evel-Elemente 520
Blocksatz 119. 162
Blog 55
BlogcaSI 761
BIogger 56
BIogging 55
Blogglng-Szene 56
Blag-Netzwerk 71
Index

I

823

Blogosplläre 71
Blogpost 786
Blogroll 373
Blueprint 621
Bodoni 225
boilerplate 624
Boinx Mousepose 767
border 527
Box-Modell-Problem 530
Brainjar CSS Tabs 337
Breadcrumb-Navigation ]02
Breadcrumb Trail 303
Breadtll Naviga tion 198
Breitennavigation 29B
Broadcasting 760
Browser
dreidimensional BZ!
Browseream 662
Browserkompatibilität 635
Internet Explorer 641
Browsershots 662
Browserweichen 642
Browsing Experienee 237
8ucllstabenabstand 118
Bugs
AdJace nt- Float- Oear -Gap-Bug

649
Doubled-Margin-Bug 313
Expanding-BQ\(-Bug 651
IE 6~Peekaboo-Bug 64B
I E- Doubled- Float-Margi n -Bug

645
IEJlNin-Guiliot ine-Bug 645
Three-Pi~el-Text-Jog-8ug 647
Button 417, 421

Clarendon 225
deM 540
Clic:ktracks Appetizer 514
CMYK 250
Collaborative Authorlng Tool 772
Collabora tive Features 72
Collapse-Modus 403
collapse of vertical margins 529
Color Blender 262, 264
Color Caicula tor 263
Color Palette Creator 262
Color Sehern e Analyzer 264
Color Scheme Gene rator 262
ColorSchemer Studio 264
Colour Blindness Simulator 5t1
Colour Contrast Check 262
Cokpan 400
Commented-Backslash-Hack 330
Computer Modern 225
Concertina Padding 588
Concurrent Versions S~tem 626
Condemed Sam No. 7 22 4
Conditional Comments 392. 639
Consolas 229
Cons tantia 228
Containing Block 559
Content-Managemen t-Sys tem 39
Conversation Rate. 51 4
Corbel n9
Corlnthia 225
Corporate Identity 236, 255
Crazy Egg 514
Crowdsourcing 63, 64
CSS 29
absolute Positionierlllg 558,

56,

C
Calibri 228
Cambria 128
Cam tasia Studio 767
Candara 228
CAPTCHA 450
caption 395
CaRP 744
Cartoon 112
Cascading Style Sheets 29, 34
Ca tegorieS B02
Cen tury Gothic u5
Century Schoolbook 125
Cezanne 225
Chain Reading 54
Checkbo~en 427
Chrome 42

824

Index

Auswahl des layouts 581
Bildschirmauflösung 584
Block-level-Elemente 520
border 527
BOl(-Modell-Problern 530
Browserkompütibilität 636
Chamäleons 594
dear 540
Druckversion 166
Elastic layout 588
Equal Height Columrl'i 553
Faul( Colurnns 556
feste Positionierung 566
Fil(ed-liquid-layouts 591
float 531
Float-basierte Layouts 542
Floats vs. Positionierung S?8

FlÜSSige elastische Layouts 593
Footer 579
Formulare 4n
Horizontale Zentrierung 527
Hybrid layouts 590
Inline-level-Elemente 520
link-Gestalt ung 189
liquid/Fluid Layout 586
listen 382
margin 526
overflow 555
padding 526
Positionierung von floa t-Boxen

535
Positions-basiertes Layout 568
Pr02entangaben 564
relative Positionierung 558
51 FR 208
simple Navigation 307
Spalten mit gleicher Höhe 553
stati sche Positionierung 560
Tabellen 402
Text-Zooming-Met hode 596
Vertikale Abstände 529
Web 2.0-layouts 519
Zeilen höhe und -abstand 160
z-index 566
CSS-Box-Modell 524, 525
CSS Doc 624, 625
CSS- Filter 637
CSS- Framev.rorks 618, 620
960 Grid System 622
Blueprinl 620
YAMl 622
YUI Grids C55 623
CS5-Hover-8ehavior 652
CSS-Hovereffekt 340
CSS-Spezifit ät 613
CSS Sprites 305, 331, 686
mit JavaScript 340
CSS-Styleguides 624, 626
CSS-Styleswltcher $7
CSS-Wireframes 628
Curl 40
Cut-and-Check-Methode 637

D
Daily Color Scheme 261
Dapper 746
Datenschutz 6s
Deep link 296
Definitionslisten 382
deLicio.us 47. 54, 73

[)eluxe CSS Dropdown~ 345
Deluxe CSS Dropdowns and Flyouts 345
[)epth Navigation 298
liefennavigation 298
Designs
dunkle l5S l 58, l8l

helle 268
plakative und saubere 135
Trends 10l
Didot 225
Digg 43, <V' 4B
Dirty-Elemente 257
Disabilities Act 473
Dock Menu 340

DOCTYPE 415
Dojo Toolkil 719
Dokumen tt yp 475
DOM 36, 675
DOM- Events 685
Doppelt-komplement.lre
Beliehung 242
Dotcom-Blase 17
dots per inch 149
Dorygen 625
dpi 149
Drei-Schichten-Modell 84
Drop-Down-Menu 342
Druck 165
Druckversion 166
Drupal 795
DTD 476
Dunkle Designs ~5S 28~
Durchschuss 160
~namic Expressions 587
Dynamic Flash Replacement 195
Dynamlc Image Replacement 195,

'97
Dynamic layout 596
adaptive columns 596
Dynamic Text Replacement 121
DyMmic Text Replacement, DTR
~,

E
eAccessibility 473
eBay 26, 44
eBay Desktop 41
E-Commerce 51
EdellWotan 224
Egyptienne 225
Einfachheit 49

Eifllabefelder
Beschriftungen 461
Gestaltung 422
Positionierufll 422
Einspal ter 89
Elastic layout 588
Elements 614
Emastic 624
Empfehlungsprinzip 61
Encapsulation 697
Equal HeigM Columns 553
Erbar 225
Ethik der Koopera tion 45
Eu rostile 225
ExpresSionEngine 372, 788
eXtensible Hyper Ted Markup
language 19
Extensible HyperText Markup language 35
eXtensible Open XHTMl Outlines 731

F

n

Facebook 58, 63, 69 , 72,
Fallback 18;7
Farbauswahl
Weiß auf Sdmarz 258
Werkzeuge 260
Farben
aktive 254
analoge 241, 249
Assoziationen 239
Braun ~57
bunte 254, 282
dunkle 257
Grau 253
Grü n ~51, l56
Haupt- und Nebenfarben 247
Hellblau 256
komplementäre 241
Kontext 247
mischen 260
monochromatische 249
neutrale 253, 254
passive 253
primäre 241, 248
Rot 251
Schwarz l57
Seitennavigation 269
sekundäre 241, 248
tertiäre 248
überg<inge 275
umwandeln ~63

unterstützende 242
Violett 256
Web-Safe 251
Web-Smart 25'
websichere 25'
Weinrot 257
WeiB 253
Farbenblindheit 194
Farbendars tellung
CMYK 250
RGB 250
Farbenlehre
analoge Beziehung 242
analoge Farben 24'
Auffächerung 247
Bunt-Unbunt-Kontrast 245
CMY 238
CMYK 238, 250
ColorWheel 240
Farbassoziationen 239
Farbkombinationen 241
Farbkreis 240
Farbmischung 238
Farbmodell 238
Farbreihe 242
Farbtemperatur 240
Harmonie 267
komplementare Farben 241
kom plementärer Kontrast 246
Kontext der Farben 247
Kontrast durch Proportion 245
Kontrast durch Sättigung 243
Mengenkontrast 245
primäre Farben 24'
Primärfarbe 238
Red-Ye IICM'- BI ue-Darstellung

'40
RG B 239, 2':fJ
RYB 240
sekundäre Farben 241
simultaner Kontrast 246
Temperaturkontrast 247
Ton der Komposition l64
unterstützende Farbe 242
Web-Safe colors 251
websichere Farben 251
Web-Smart-Palette 251
Winke/kontrast 246
Farben mischen 260
Farben theorie
Kontrast 243
Farbfehlsichtigkeit 471

Index

82 5

I

Farbgestaltung 235
8arrierefreiheit 486
Farbharmonie 243
prüfen 268
Farbheltigkelt 249
Farbkombinationen 241
FarbkompleltilJ.t
begrenzen 242
Farbkomposition 235
Farbkreis 240
Farbm ischung 238
additive 238
subtraktive 238
Farbmodelle 238
Farbpaletten
bewerten lassen 264
monochromatische 262. 269
wählen 261
Web 2.0 25'
Farbpaletten erzeugen 262
Farbschemata 100
Farbspektrum 250
Farbtemperatur 240
Farbtheorie
Pra>:is 248
Farbwirkung 239
Faux Columns 556
Favicons 373
erstellen 374
mit Photoshop 374
Feedburner 768
Feedcombine 743
Feed-Filter 743
Feedor 743
Feed Rinse 743
Feldränder gestalten 423
ffmpeg 766
ffmpegX 766
fieldset 420
filtered search 728
Firebug 63], 662
Flrefox 3 42, 65'
Fixed Layout 581
Flattersatz 119, 162
Flexibilitat
absolute 149
Flich 28, 43. 47, 73
fllckrvision 740
Fließtexte 186, 213
float 531
Float-baslerte Layouts 542
Floaten 308
floatire box 531

82 6

Index

flv 768
Flyout-Menü 342
Flyouts 305, 337, 341
F-Muster 140
Focus
Folksonomy 29. 43. 51
Font Card 226
font-face-Regel 209
Font Frenzy 226
Font-Verwaltung 226
Footer 274. 290, 579
Farben 274
Foot er-Problem 579
form 416
Form Help With Popups 447
Formulare 415, 450
Anpass ung des Hintergrunds

2n

4'3
CAPT(HA 450
fieldset , legend 420
gestal ten 426
im Web 2.0-look 430
mit C55 422
Navigation 449
Reihenfolge der Eingaben 421
5pamvermeidung 450
Steuerelemente beschriften 419
Tastaturkürzel 449
Tastaturkürzel definieren 421
Tooltips 446
Usabllity 451
XHTMl-Markup 41 6
Formularnavigation 449
Formy 624
Fortes djnamic layout 596
Frames 488
Frameworks 719
Franklin Gothic 224
Frutiger 225
Furl 54
Futura 225

G
Gar age8and 765
Garamond 224
GD Graphics library 450
Gebrauchs ta~lichkei l 491
Georgla 211
getCompletelnput 0 683
getFetchedlnput 0 683
GeViertbreite 171
Geviertstrieh 192
Gill Sam, Calibri 225

Glaubwürdigkeit 495
Globale Navigation 369
globales Navigationsmenü 303
Global Reset 216, 307, 6]6
GME-Tags 748
Google 26, 44. 48
Google AdSense 56
Google 5pread 5heets 72
Google AdSense 788
Google Analytics 514
Google Desktop 61
Google Docs 39
Google Gears 40
Google Mall 39, 668
Google Maps 47
Google Mashup Editor 748
Google Spreedsheets 39
Google Web Toolkit 722
Goudy üld Style 224
Graceful Degradation 655
GraySit 511
Grau 743
Grideasy 624
Grimme Online Award
Grocweshark 52
Grotesque 224
Groupcasts
Grundfarben auswählen 260
Grunge 257
Gutter 141

n

no

H
Hacks
C5S-Hacks 637
Horizontal-Cen tering-Hack 65'
l ine-He ight-and-ReplacedElement-Hack 650
5tar-HTMl-5ele<:tor-Hack 643
Tan-Ha ck 643
Tanteks -Box-Modell--Hack 638
Halbgeviertstrich 192
Harmonielehre 237
Harmonien
8estimmung 267
Harmonische Farbkombinationen

'7'

Hart ~a 624

hAtom 730
hCalendar 730
hCard 729, 730
Header 268
Heal Map Plugin 372
Hea l maps 513

Helles Design 268
Hell und Dunkel 259
Helvetica 224
Hex-Code 268
HI569
Hleratchle
visuelle '50
Highs~ed-Intemet 68
Hintergrund
Formulare 423
HIntergrundfarbe
Weiß 268
Hintergrundtöne 259
Hitflip 80
Horizon tal Drop-Downs 345
Hotllnklng 200
Hover-Effekt 341
hResume 730
hReview 731
HTML-Soups 479
Human Computer Interaction Oe·
slgn 491
Human IntelUgence Task 64
Humanisleruf"8 des Netzes 52
Hybrid CSS DropdONns 346, 341
Hybrid Layouts 590
Hyperlinks 156
Hyphen 543

kons t15
IE 5fMac-8and-Pass-FUter 643
IE 7-8ibliothek 65)
IE Condi tional Comments 392.
639
Iframe 676
IGoogle 742
Illustrator CS3 261
Image Captlon 482
Imagemaps 479
Improved Reponslveness 672
InfectedFX 430
InUne
in alte ren Browsern 30B
InUne-Block-Box 523
InUne-Box 523
Inline-level 309, 520
Inline-level-Elemente 521
Input 4'16
Instant Messaglf"8 60
Integrated SolutIons 343
Intelligenz
kollektive 63

Interaktion 415
Interaktionsdesign 416
Internet Explorer B 657
Internet Explorer Developer Toolbar B22
I nternet-TV 770
Inveßion der Farben 190
Invertierte Pyr.amide 494
iPod 760, 768
ITC FrankIin 224
iTunes 768

J
Jamba 77
JanShaka 765
Janson 224
JavaFX 4'
JavaScript 36, 675
(SS Sprites 340
JavaScript-Bibliotheken 337
Jello-layout 591
jOuery 337. 339. 6gB
Modul UIITabs 340

I<
Kapi tälchen '57
Karusselk 337.348
Key Content 295
Kind-Selektoren 653
Kitcren Organization Problem 66
Klappmenü 341, 342
vertikales 345
Kleine-Welt-Phänornen 52
Kollektive Intelligenz 29, 63
Kommunikation 415
KompOSition 264
Kontrast e 243
Bun t-Unbun t-Kontrast 245
durch Proportion 245
durch Sättigung 243
Hell-Dunkel-Kon trast 243
Kleine Flächen 245
komplementäre 246
Mengenkontrast 245
prüfen 263
S.Htigung 243
simultaner 246
Temperaturkootrast 241
Winkelkontrast 246
Kontras tstärke 243
Kopf. und Fußzeilen 265
Kreativi tät 89

I

Künstliche Intelligenz 818
Kursive 155

L
label 4'9
label-Tags 490
last.FM 43. 47. 52
latency Reduction 672
LauMoelte 160
Layout 581
dreispaltiges 551
elastisch 581
elastisches 582
fest 581
flüssig 581
hybrides 582
tabellenbasiertes 394
zweispaltiges 542
lean-Back 75
leanlng Forward 75
legend 420
leitbuchstaben '58
lesezeichen
runde 353
letter-spaclng 118, 162
lIb.rarlo.us 54
lIfestreaming 56
lightweight Programrning Models 50
llne-helght 118
link-Gestaltung 188
aktive 189
passive 189
link Relations 483
Linotype FontExplorer X 226
liquid/Fluid layout 586
Listen 379, 380
Oennitionslisten 382
geordnet 380. 381
gestalten 385
Gestaltung mit C5S 382
Praxis 393
uf"8eordnet 380
Verschachtelung 381
Web 2.o-took 38.4
XHTMl-Markup 380
Live Web 50
logo 281
Gestaltung 281
lOf"8 Tall 61
loudblog 769
lPM 50
luc:lda Grande 225
Index

I

827

lucida 5ans Unic:ode 211
l yc:os iQ 80

M
m4v 768
Malarkey Image Replacement 197
margin 309. 515. 516
Mashup 47, 739, 741
EditOfen 745. 750
Master 5tylesheet 520
max-width 587
MediilYaJziffern 211
MediaWiki n2, n 4
Mehrspaltigkeit 89
Mephisto 795
metacolOf.de 239
Microblog 58
Microformats 38
Microsoft Triden t 657
Microsoft.xMLHTTP 682
Microwork 63
Mikroformate 727
M ini-Icon 439
Minimalismus 49, ' 4'
Mini-Tab-5hapes B8
Minuszeichen 192
Mist erWong 74. 78
Mite 670
Mitmach-Web 2.0 59
Mobile Web rp
MochiKit 720
Modul UlfTabs 339. 340
MoinMoin 776
Monoch romatische 8eziehung 241
Monospace 185
Monotype Headline 224Moodstream 740
Mootols 347
Mootools 337, 721
mov 768
Movable Type 790
M02i11a Gecko 657
MoziUa Labs 41
MP3 768
MSli:ml2.XMLHTTP 682
Multiple lEs 662
Mu~icmap 740
My riad 225
My5pace 28. 60
myvideo.de 79

828

Index

N
Nachbar-5elektOfen 653
Natürlichkeit de r Farbauswahl 237
Navigat ion 295
Adobe Photoshop-Techniken

353
Barrierefreiheit 485
globale 369
Karussells 337
sprechende 123
Navigat ionselemente
abse tz e n 3 10
entwerfen 295
Rich tli nie n 303
NaVigationshilfe 296
Navigationsleisten 297
C55- baslerte Ansat ze 305
gestalten 302
Platzierung 297
TIefeneffekt 356
NaVigationsmenüs 265, 279
bildba5ierte 367
C55 und Javaxript-Ansätze 337
Flyouts 34'
gestalten 269
Kla ppmenüs 341
Lis ten 393
NaVigation zwei ter Ebene mit
CSS 313
Negative Space 139
NetVi bes 670, 742
Netzwerkeffekt 43
NeoN Economy 26
Newsmap 741
NkeForms 42 8
Nifty Corners 437
NO-SPEC 64

o
Oberlänge 160
Odeo 769
Online-Banking 51
Dnline-Formular n8
Dnline-Jou rnal 55
Online-Nischen 73
Online -Tape 513
Dpazilat 266
Open Business Club 51
Openc:ube Mousetrends 515
OpenlD 822
openkapow 749
Openlaszlo 41
Dpen-Source 46

Open Type 226
Opera 9.5 657
Opera Dragonfly 822
Operator 733
O PM l 743
optgroup 418
O ptima n5
Orkut 69
Out sourcing 64overflow 555

p
padd ing 141, 190, 309, 515. 516
Page Driftifl: 295, 296
Pageflakes 723, 742, 751
PageRank 44 45
Palat ino n4
PandOfa 52
Panic Coda 8n
Parallali: Scrolling 629
Parallel working 72
PayPal 26
Permalinks 55, 786
Perpetual Beta 48
Person
Chris Andersen 61
Dale DOlllhe rty 33
Jared M. Spool 66
Johnl""/i Haeusler 77
Mike DavidsOf1 204Mllton Glaser 142
O'Reil~ 50
Rad u DaNas 196
Tim O'Reilly 33
Timothy 8erners-Lee 25
Pe rsoo al Publlshing 46
Perspective m
Phot ocase.Com 79
Phot oshop 353
PHP + C5S Dynamlc Teli:t Replacement, PHP+CS5 201
PhpN iki n6
Phylota>cis 74'
Pipe 488
Pili:elgröße '7'
Pixel pro Zoll 149
pixels per inch 149
Placeo pedia Q
Plex Toolka 720
PmWiki 776
Podcasting 74. 759. 760, 761
Podcalcher 760
PodPress 768

Popfty 747
Pop-Ups 489
Popurls 744
Portable Web 820
Positionierung
absolute 558, 563
fixes 566
relative 558, 560
statische 560
zentrale 89
PostScript 226
ppi 149
Presto 749
Pretty Forms 428
Primäre Farben 248
PrIntausgabe 148
Printlayouts 497
Print typografie '47
Prism 4'
Progress Indicators 672
Progressive Enhancement 337
Prototype 720
Pseudoklassen 3"
Punkte pro Zoll 149

Q
Quellt ex te 187
QuickTime Pro 766
Oype 77. 78

R
Radiobuttons 427

R,md
äußerer 14'
innerer 141
Really Simple Syndicalion 49
real-time search 728
Redundanz 469
Register 319
Registerkarten 121, 3'9, 337
mi t Photoshop 359
textbasierte 339
Relat ive Sch riftgröße

'7'

larger
smaller '7'
rel-direc tory 73'
rel-nofollow 73'
rel-tag 73'
Remixable Web 38
Renderlrf! Engine 635
Resolution dependent layou t 596
Respomive Disclosure 671
Responsivi toll 673

REST 754
ReviewMe.com 64
RGB 250
RIA 40, 671
Rich Client Applications 72
Rich In ternet ApplicatiOns 40, 67'
Richness 41>9
Rico 721
Robomaker 749
Rocilwell 225
Roliover-MenCis 33'
Rol-Grün-Sehschwdche 486
rO'Nspan 400
Royal Gothic. 224
RSS 49, 261, 741
RSS-Feeds 79
RSS-Widget 60
Rubrik 3"

5
Sabon 224
Safari 3 6tj?
SAjax 722
SarIS-Serifen 185
Satisficing 498, 499
Sättigung 238
Scalable Inllne Image Replacement. SI IR 19B
Scalable Inman Flash Replacemenl, sl FR 204Schaltermenüs 347
Schlüssewörter 165
Schräge '55
Schriftarten 186, 187
Adobe Caslon 224
Arial 161, 166, 186, '87, 211
Auswahl 210
Book An tiqua 187
Calibri 228
Cambria 228
Candara 228
Chareoal 187
(hicago 187
Consolas 229
Constant ia 228
(orbel 229
Courier 187
(ourier New 187
Delicious 196
dicktengleiche 187
District Thin 15'
Generische Schriftfamilien 187
Geneva 187

Georgla '52, 160. 187. 2t1
Gill Sans 187
Helvetic.a 187
lacuna lIalic 151
lucida Grande 187
lucida Sam Unicode 187. 211
MelloSans 148
Monaco 186, 187
Monospace 185
MS Sam Serif 187
New York 187
nichlproportionale Schrift 185
Ni na '52
Palatino 187
Palatino linotype 187
Segoe UI 229
serifenlose 120
Standard-Schriftart '70
Tahoma 186, 187. 211
Tauran Regular 148
Tlmes 187
Times New Roman '5t 186. 212
Trebuche t MS 186. ,87. 212
unkonventionelle 222
Verdana 160, 186, 187, 212
Schriftersetzung
Phark-Methode 197
Radu-Methode 196
Schriftgewicht 164
SchriftgrOße 165
Barrierefreiheit 489
Schlüsse~örter

165

SchülerVl 75
Schwarz auf Weiß 237. 258
Screencasts 759, 761
Screenreader 476
Script.aculo. us 721
Scrollable Checklists 429
Second Ufe 740 819
Segoe UI 225, 229
Sehschwäche 194. 467
Seil ennavigalion 269
Aufbau 296
Farben 21>9
Ressourcen 376
Seilemtruktur
Einspalter 8g
Sekunddre Farben 248
Selection 4Z7
seleet. opt ion 4'7
Selektor
Gewicht 614
seman t ic. search 728
Index

I 8 29

I

Semantic Web 38. 727
Semantik 478
Semantisches Web 38
Separa te-Modus 403
Serendipity 794
Serifen 185
Serifenschriften uo
sevenload,de 79
Shopwiki.com 64
Sidebar 2740 284
Farben 274
si FR 121. 185
Beispiele 204
SIIR
in der Praxis 198
Silbentrennung 120
Silverlight 41
Simple Image Replacemen t 195.

,,6

SImpleorange (55 Tabs 338
Simplified (5S Tabs 338
Sitemaps 488
Slider- Effekt 341
Sliding Dool; 305. 319
Sloop 225
Smallcaps 157
Smarty 794
SnapZProx 767
SOAP 754
Social Icons 125
Sodal Media 55
Social Networking 51
Social Web 38
Social Webcasting 760
software-Zyklus 739
SOll}' Vegas 766
SourcefO/ge.net 46
Soziale Netmerke 29. 51. 68. 77
Soziales Kapital 50
Spaltengruppen 397
5pam 450
Spam-80t 450
Spezifit at 614. 615
SphereXPIorer 821
Splash-5creen 205
Spreebl!ck 76. 77
Sprite 331
SprungvefWeise 490
Stacking Context 567
Stack Order 562. 566
Standard-Modus 476
Stephenson Blake Gro tesque
No. 6 224
83 0

Index

Steuerelemente 421
St ikkit 43
Streifeneffekt 129
StudiVZ 73
StumbleUpon 54
Styled images wit h caption
48,
Subversion 625
Such maschinen 472
Suckerfish Dropdowns 305. 343
Summary 397
9.vabba 48
Sweet croon 58
swf 768
SWishMAX Text Replacement. sm

"4
Switchj Mclayo ut 597
Syndicated Webcasting 760
5jntaxsuppen 479

T
Tabbars
Mehrreihige 310
Tabbed Document Interfaces 319
Tabellen 379. 394
abbr 397
Barrierefreiheit 489
Colspan 400
Gestaltung mit (55 402
Praxis 410
rowspan 400
Spaltengruppen 397
Summary 397
Web 2.o-look 403
XHTMl-Markup 394
Zebra-Tabellen 410
Zeilergruppen 397
Tabellenfuß 397
Tabellenkopf 397
TabellenmodeU 403
tabindex 421
table 395
Tabs 121, 319
Tabtastic 338
Tag Clouds 128. 369
ExpressionEngine 372
Tex tpattern 372
Umsetzung 371
WordPress 372
Tagging 44. 55. 369
Tags 128
em 155
fieldset u8

legend 128
st rong 155
Tahoma 211
Tails 733
Tan-Hack 530
Tanteks-Box-Model-Hack 530
targe t search 728
Tastaturkürzel 421. 483
TAW3 511
Taxonomy 369
td 395

TDI
Tabbed Document In terface 319
Technicolor 262
Temperaturkontrast 247
textarea 417
Textarea Tools library 449
Text auszeichnung 275
farbige 156
Fett 155
Kapit<ilchen '57
Kursiv '55
Schräg 155
Sperren '57
Unters treichung 156
Versalien 156
Textgestaltung 147
Text pattern 372. 791
text-transform 310
Textverarbeiturg online 39
Text-Zooming-Methode 596
th 395
The long TaH 30
The State of Blogosphere 71
Thumbnalls 126
TIefennavigation 298
Times New Roman 212
Times Roman 224
t itle 480
To-Do- PLanning 60
Toggte-Menüs 337. 347
Tooltips 445. 446. 480
I r 395
Trac 625. 626
Trackback 55. 787
TracWiki 775
Transparenz 23B. 265
Transparenz von PNG-Bildem 644
Trash-Element e 258
Trebuchet MS 212
Triade-Beziehung 242
Tripol! 624
True Type Font 195. 226

Tumblel og 58
To,yeet 59
l'Nikj 775
Twitter 51
Two-level Navigation 347
Typografie 149
Absatzformatierung 162
absolute L.lnge 165
absolute Schriftgrö ße 165
AbsUnde 158
Abstand zwischen den Wörtern

,6,

8arrierefrelneit 193
8egriffe '53
810cksatz ,62
8uchstabenabstand 21 4
Capltal Letters 156
durchgezogene linie 219
Durchschuss 160
Dynamlc Flash Replacement

""

Einzüge 158. 2'4
em 171
farbige Hervorhebung 156
Flattersatz 162
Flie6texte 213. 214
gepunktete Linie 219
gestrichelte linie 219
Geviertbreite 171
GralM'ert 162
Großbuchstaben 156
Grundlinie '53. 615
hp- Höhe '54
Kapitalchen 221
Kerning 161
Kon trast 163
Lauftext , 85
Laufweite 160
Leitbuchstabe lsB
Lesbarkeit '53
letter-spaclng ,60
ligaturen '54
Une.Helght 160
Unk-GestaJtung 188
Mittellange '53
Mittellinie 154, 615
Oberlange '54
PIxelgröße 171
Prozentwerte 172
relative Schriftgröße 170
ScaJable Inman Flash Replacement 185
Sc tv-Iftart '85

Schriftbildhöhe '54
SchriftgestaJt 213
Schriftgewicht 164, 213
Schriftgröße 165
Schriftstil 213
Screendeslgtl 186
Serifen '54
si FR ,85
Sperren '51
Texttransformation 213
typografische KonsiHelll 193
Überschriften ,850 213. 2' 9
Unterlänge '54
Unterschneidung 161
Unterstreichung 156
VersaJhötle 154, 616
Versalie n ' 56
vertikaler Rhythmus 172
word-spacing 16,
Wortabstand 214
x-Hone 171
Zeilenabstand 159. 221
Zeilenhöhe 214
Zusammenfassurg 163
Typografische Hierarchie '5'
Typogridphy 624

U
Überschriften 213
überproportional große 117
Ubiquity 41
uF 729
UITest.com Site Check 5'1
Ulead Media Stu dio Pro 766
Umkehrung der Farben 190
UMTS 56
Univers 224
Unterlänge 160
UnterschneidlJ"lg 16,
Upcoming 72B
Usability 99. 259. 45\ 467. 491
Aesthetic Usability Effect 259
Formulare 45'
Navigati on 342
Richtlinien 50 4
Ziel und Zweck 492
Usability-Fehler 493
Usability-Heuri\t iken 492. soo
Usability-Tests 509, 5'3
Vorgehensweise 512
User Centered DeSign 491
User Experience B4. 121
User Generated Content 43, 759

I

V
vCard 729
Verdana 212
Verhaltensmuster 493
Versionskontrollsystem 625
Verweise
Auszeichnung Z16
Vidcasts 759. 76\ 765
Vi deo Maker 765
Videos 163
Video t o Flash Converter 766
Virtu aJDub 7650 766
Virtuelle Zirkel 5'
VisCheck 263
Visuelle Hierarchie 147
visuelle Ordnung 87
Volltextsuche 488
Vorsch au 444

W
W3C 35
Web 7Z1
mobiles 819
semantiSches 727
Webl.0 61
Web 2.0 30, 33. 36
Ajax 36
Begriff 36
CSS 345'9
Farbpalette 25'
Formulare 415
Kommunikation und Interaktion

' '5
listen und Tabellen 379
logos 2550 281
Navigation 305
neue typografische Technike n

' 95
Nutzer 68
überschriften 255
Usability 467
Web 2.0 In Deutschland 74
XHTML 35
W\!b 2.o·Entwurf 598
Web Accessibility Initiative 473
Web Developer Extension 5'1
Web Developer Toolbar 662
Web-Feeds 742
Web Inspector 812
W\!bkultur 2.0 50
Weblogs 28, 46 , 55. 72, 786
Navigation 300
Web-PubNshing 761
Index

831

Web-Publishing-Plattform 787
Web-Safe- Farbpalette 261
Web Scraping 74'\ 745
Web-Smart-Farbpalette 261
Webspider 419
Webstandards 660
Web-TV-On-Demand 770
Webtypografie 116 , 147
Besonderheiten 149
Mac-Bildschirm 149
Web-UrlSafe-Farbpalette 261
Web-Worker 670
Weisheit der Massen 43
Weiß auf Schwarz 258
Weißer Hintergrund 253
Weißraum 139, 508
Werbeblindheit SOO
wer-kennt-wen.de 75
Wha tever
hover- Bibliolhek 653
Whalshouldireadnext.com 54
Whitespace 139
Widge t 741, 750
Wiki-Engine 772
Wikimapia 47
Wikipedia 43, 63, 80
Wikis 28, 46. 72, 771
wikiText 774
WikkaWiki 776
Windows Media Encoder 767
Winkelkont rasI 247
Wireframe 628

832

Index

Wisdom of Crowds 44
Wisdom of Masses 29
wmv 768
Woopra Real -Time Analyi tcs 514
WordPress 372 , 736, 793
Word Processing Tools 72
word-wrap-flag :lO3
Workaround 635
World Wide Web Concortium 35
Wortabstand 161
Wri tely 60

X
XFN 731
xFolk 731
xFruits 743
XHR 677
XHTMl 29, 35
Semantik 478
XHTMl1.O Framesel 476
XHTML 1.0 SInd 476
XHTML 1.0 Transil ional 476
XHTMl1.1 476
XHTML 2.0 483
XHTMl Fnends Network 731
XING 51. 72
XML 35, 675
XMlHtlpRequest 675, 676
XMlHttpRequest-Objekt 36, 676
XOXO 731
Xyle Scope 662

y
Yanoo! local 732
Yahoo! Pipes 745
Yahoo! Ullibrary 722
Yahoo! ur Ubrary Gnds 623
YAMl 622
YAMl Builder 623
Yigg.de 78
YouTube 28, 43. 73. 769

Z
Zebra-Tabellen 410
Zeilenabstand 118, 141, 159
Zeilengruppen 397
Zeilenlange 158
optimale 160
Zembly 748
z-index 566
Zohownter 39
zoomable layouts 589
Zoom-Option 585
Zoom Zoom Zoom 449
Zo tero 72
ZUSällllichkeit 263
prüfen 263
Zurück-Schaltfläche 504

Bibliografische Information der Deutschen Bibliothek
Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie;
detaillierte bibliografische Daten sind im Internet über hup://dnb.ddb. de abrufbar.

ISBN 978-3-836 2-134 2-4

o Galileo Press, Bonn 2009
2. , aktualisierte und erweiterteAuf!age 2009
Der Name GaUleo Press geht auf den italienischen Mathemat iker und Philosophen Galileo Galilei
(151'4- 1642) zurück. Er gilt als Gründungsfigur der neuzeitlichen Wissen schaft und wurde berühmt
als Verfechter des modemen, heliozentrischen Weltbilds. legendär ist sein Ausspruch Eppur se

muove (Und sie bewegt sich doch). Das Emblem von GaUleo Press ist der Jupiter, umkreist von den
vier Gali/eischen Monden. Galilei entdeckte die nach ihm benannten Monde 1610.
Lektorat Stephan Mattescheck
Gut achten Wolfgang Bartelme, Graz
Herstellung KdtrinMüller
Korrektorat Rene Wiegand , Bonn
Einband gestaltun g Barbara Thoben, Köln
Sal z Ulrich Bo~telmann , Dortmund
Druck Himmer AG, Augsburg
Dieses Buch wurde gesetzt dUS der linotype 5yntol)C (9.25 ptl13 pt) in Adobe In Design (53.
Gedruckt wurde es auf mdttgestrichenem Bilderdruckpapier (115 glml).
Gerne st ehen wir Ihnen mit Rat und Tat zur Seit e:

srephan.marrescheck@galileo-press.de
bei Fragen und Anmerkungen rum Inhalt des Buches

serv/ce@gallfeo-press.de
für versandkostenfreie Bestellungen und Reklamationen

Julia .bwch@galileo.preH.de
für Rezensions- und Schulungsexemplare

D :l<"all~gHldeWm!<lln oll <ri1~n T~II"" u~ .... r~chd!ch g~'I<hÖ1:!L AHe R"" hl~ "a~hal1~" jnlb~o;ond .... ~ d.o< R~I <!..r
Obe<soettu'l;, de-sVortrags, 00 Rtprod,*dO'l, d« V~ltlfJldg.... g ... ffOlom«hanlsdltm ode!" and .... enWegen und 00 SpricI1tfu'l;
In eloktrori<dvn NIodlen. U'l;e;tchtel <!..r S"'l!f,,~ die ... fdl~ Erstoilu'l;YOO T.. ~ ,o,Wd<.nt.n und FtOtJammonwrwen<!..lw..-d •.
~öm....,w.oo W~ag noch""t .... Hffa~ 00 .... Otws~tt .... tilrmÖßllc1v ~hI .... und 00...., I'oig .....1". J..-I<Ii",IvV ...anlWorllrlg
ode,I',en<!..l". Haftun, Obe,nehonen . DIe I" dltS1emWe'~wkde 'gesebtnen Gtb'~ud>s""one" H~n<!.. Is""",.n. W~fenootkh­
nungen u..... loDnnen .och o hne be'DfIde,e K.nn.ekhnu~M."'e" .er. uoo ~Is.okhe d"" 8e... tzlkh"" Bestimmungen "nlerle8en.