gute seiten, schlechte seiten - webmontag edition
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](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/1.jpg)
Gute Seiten,Schlechte Seiten
Jens Grochtdreis
![Page 2: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/2.jpg)
Was ist „gut“?
![Page 3: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/4.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/5.jpg)
![Page 6: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/6.jpg)
Was richtig schlechteszur Einstimmung
![Page 7: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/7.jpg)
![Page 8: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/9.jpg)
![Page 10: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/10.jpg)
Die Schlechten
![Page 11: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/11.jpg)
Barrierefreie Seiten …
• … müssen nicht häßlich sein
• … sollten gut lesbar sein
• … sollten semantischen Code haben
![Page 12: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/12.jpg)
![Page 13: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/13.jpg)
![Page 14: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/14.jpg)
div id="h1Homepage"
![Page 15: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/15.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/16.jpg)
![Page 17: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/17.jpg)
![Page 18: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/18.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/19.jpg)
![Page 20: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/20.jpg)
![Page 21: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/21.jpg)
![Page 22: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/22.jpg)
![Page 23: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/23.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/24.jpg)
![Page 25: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/25.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/26.jpg)
![Page 27: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/27.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/28.jpg)
![Page 29: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/29.jpg)
![Page 30: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/30.jpg)
![Page 31: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/31.jpg)
Die Guten
![Page 32: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/32.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/33.jpg)
![Page 34: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/34.jpg)
![Page 35: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/35.jpg)
![Page 36: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/36.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/37.jpg)
Schattenseiten
• 32 CSS-Dateien !
• ca. 183 KB
• nicht-komprimiert, nicht-optimiert
![Page 38: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/38.jpg)
![Page 39: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/39.jpg)
![Page 40: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/40.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/41.jpg)
![Page 42: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/42.jpg)
![Page 43: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/43.jpg)
![Page 44: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/44.jpg)
![Page 45: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/45.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/46.jpg)
![Page 47: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/47.jpg)
![Page 48: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/48.jpg)
![Page 49: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/49.jpg)
Schmankerl
![Page 50: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/50.jpg)
Guter Code != schöne Seite
![Page 51: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/51.jpg)
![Page 52: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/52.jpg)
![Page 53: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/53.jpg)
<a href="http://creativecommons.org/licenses/by-nc-sa/2.0/de/" rel="license">Attribution-Noncommercial-Share Alike 2.0</a>
![Page 54: Gute Seiten, Schlechte Seiten - Webmontag Edition](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555e24c6d8b42a384f8b4def/html5/thumbnails/54.jpg)
KTHXBAI!