gute seiten, schlechte seiten - webmontag edition

54
Gute Seiten, Schlechte Seiten Jens Grochtdreis

Upload: jens-grochtdreis

Post on 22-May-2015

3.131 views

Category:

Technology


0 download

DESCRIPTION

Mein Vortrag von der Webinale 2009 (dort zusammen mit Tomas Caspers) zusammengestrichen und mit Textfolien ergänzt für Webmontage in Frankfurt und Mannheim.

TRANSCRIPT

Page 1: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Gute Seiten,Schlechte Seiten

Jens Grochtdreis

Page 2: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Was ist „gut“?

Page 3: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Das Netz bietet die Möglichkeit, Informationen von JEDEM in JEGLICHER Form konsumierbar zu machen.

Warum soll man diese Stärke unnötig ignorieren?

Page 4: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Möglichst wenige Fehler (Validität)Semantische Struktur (jemand hat sich über den Inhalt der Seite Gedanken gemacht)Daran denken, daß man nichts darüber weiß, WIE jemand die Seite konsumiert.In Alternativen denken.

Page 5: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 6: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Was richtig schlechteszur Einstimmung

Page 7: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 8: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Finanzamt Pirmasens

• In 2009 immernoch nicht barrierefrei!

• Designfrei und hässlich

• Tabellenlayout und kindische Bildchen

• Keine Semantik

• Frameset

Page 9: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 10: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Die Schlechten

Page 11: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Barrierefreie Seiten …

• … müssen nicht häßlich sein

• … sollten gut lesbar sein

• … sollten semantischen Code haben

Page 12: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 13: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 14: Gute Seiten, Schlechte Seiten -  Webmontag Edition

div id="h1Homepage"

Page 15: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Ladezeiten beachten!

• 8 MB für eine reine Flashseite ohne jegliche Alternative sind sehr viel, auch für DSL.

Page 16: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 17: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 18: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Framesets sind tückisch

• Ein Netbook hat nur 600 Pixel Höhe.

• Frames sind technisch nicht mehr notwendig.

• Frames schränken die notwendige Flexibilität stark ein.

Page 19: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 20: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 21: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 22: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 23: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Layouttabellen sind böse

• Aber Tabellen für tabellarische Daten sind prima.

• Es heißt ja auch Bundesliga-Tabelle, nicht Bundesliga-DIV.

Page 24: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 25: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Luft zum Atmen geben

• Fixierung in der Höhe macht Inhalte nicht flexibel nutzbar.

• Spätestens bei der zweiten Vergrößerung ist der Inhalt nicht mehr lesbar.

• Wer sagt denn, daß niemand Ihre Webseite vergrößern will oder muss?

Page 26: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 27: Gute Seiten, Schlechte Seiten -  Webmontag Edition

1x1 des Webdesigns

• IDs sind einmalig

• Tabellen nur für tabellarische Daten

• FONT ist out und ähbäh!

Page 28: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 29: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 30: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 31: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Die Guten

Page 32: Gute Seiten, Schlechte Seiten -  Webmontag Edition

In Alternativen denken

• Alternativen für Javascript

• Alternativen für Flash

• Aber auch mal in Browseralternativen denken (Flasheinbettung mit JS)

Page 33: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 34: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 35: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 36: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Schattenseiten

• „Wo viel Licht, da auch viel Schatten“

• Nach 10 Sek. erster Werbebanner (wenn man Glück hat)

• Nach 30 Sek. beginnt der Seitenaufbau (186 Objekte)

• 1,4 Minuten bis Komplettaufbau (insges. 4,2 MB, inkl. 2,6 MB Flash)

• 645 KB Scripts

Page 37: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Schattenseiten

• 32 CSS-Dateien !

• ca. 183 KB

• nicht-komprimiert, nicht-optimiert

Page 38: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 39: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 40: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Styleswitcher mal anders

• Eine Code für vier Ansichten

• Nur die Google Map wird nachgeladen

• Kein zeitraubender Reload

• Kein unnützer und teurer Traffic

• Javascript sinnvoll genutzt

Page 41: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 42: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 43: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 44: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 45: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Alternative zu JS-Version

• Mit Javascript gibt es schnelle optische Änderungen.

• Jeder dieser Zustände ist ohne Javascript als eigene Seite erreichbar.

• Ohne Javascript sieht das Layout exakt gleich aus.

Page 46: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 47: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 48: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 49: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Schmankerl

Page 50: Gute Seiten, Schlechte Seiten -  Webmontag Edition

Guter Code != schöne Seite

Page 51: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 52: Gute Seiten, Schlechte Seiten -  Webmontag Edition
Page 54: Gute Seiten, Schlechte Seiten -  Webmontag Edition

KTHXBAI!