1. Webstandards –
die Basis für ein modernes Web
Jens Grochtdreis, SinnerSchrader
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
2. 2
Kurze Vorstellung (1)
• Ich bin Senior Frontend Engineer bei
SinnerSchrader in Frankfurt
• SinnerSchrader betreut das E-Business
großer Marken und internationaler
Unternehmen seit 1996
• Kunden: Otto, Dow Jones, Deutsche Bank,
Tchibo, comdirect, simyo, Arena ...
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
3. 3
Kurze Vorstellung (2)
• Die Initiative „Webkrauts“ gründete sich
auf Grund eines Eintrages in meinem Blog
im August 2005
• Wir unterstützen Webdesigner und
-entwickler dabei, Standards einzusetzen
und so ihre Arbeit zu verbessern.
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
4. 4
Was haben wir hinter uns?
• Das WWW existiert seit Anfang der 90er
• Für wissenschaftliche Kommunikation
• Sehr schnell kommerzielle Nutzung
• Layout und Effekte vor Inhalten
• Tunnelseiten, Preloader, „optimiert für“
• Eingleisiges Lese-Medium
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
5. 5
Wo stehen wir?
• Browser sind besser geworden
• Browser sind noch immer nicht gut
• Browser sind nur noch EIN Gerät fürs WWW
• Das WWW wird mobil
• Barrierefreiheit hat Gesetzesstatus
• Javascript „wird gut“
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
6. 6
Wo stehen wir?
• „Mitmach-Web“, vulgo: Web 2.0
• Andere „arbeiten lassen“, selber kassieren
• Offener Austausch
• Mashups
• APIs (Schnittstellen!)
• Professionalisierung
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
7. 7
Wo stehen wir?
• Professionalisierung
• Häufiger korrekte Nutzung der Standards
• Immernoch hohe Ignoranz gegenüber
Standards
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
8. 8
Wo gehen wir hin?
Das Internet
• wird noch mobiler,
• wird multimedialer,
• wird mehr mit TV veschmelzen,
• es wird noch mehr Anzeigeoptionen geben!
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
9. 9
Was bedeutet Web 2.0?
• Das „Mitmach-Web“ läßt sich auf einen
Nenner bringen:
Kontrollverlust
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
10. 10
Kontrollverlust - inhaltlich
• Webseiten werden zu Applikationen, der
User kann selber agieren, schafft Inhalte.
• Der Anbieter stellt nur noch eine Plattform
zur Verfügung, die der Anwender nutzt.
• Inhalte können nur bedingt kontrolliert
werden.
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
11. 11
Kontrollverlust - formal
Wie können wir heute ins Internet gehen?
• PC, Notebook
• viele Betriebssyteme, Browser, Monitore
• Handy, PDA
• Spielkonsole
• TV
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
12. 12
Flexibilität ist wichtig
• Wir können nicht mehr sicher vorhersagen,
wie jemand unsere Seite sieht/liest.
• Deshalb: einen für möglichst viele
gangbaren Weg beschreiten
• Erst der Inhalt, dann das Layout!
• Der Inhalt ist das Wichtigste!
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
13. 13
Trennung von Inhalt und Layout
• Der Inhalt soll in den unterschiedlichsten
Anzeigeformen wiedergegeben werden
können.
• Das geht nur einfach und gut, wenn man
Inhalt und Layout trennt.
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
14. 14
Die Ebenen einer Webseite
Dynamik Javascript, DOM
Layout CSS
Struktur (X)HTML
Inhalt MySQL, XML
Business-Logik PHP, ASP, JAVA
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
15. 15
Die Realität?
• Viele Webseiten sind noch mit
Layouttabellen aufgebaut. Layout und
Struktur sind damit eins.
• Diese Seiten sind unflexibel, nicht
zukunftssicher.
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
16. 16
Der Ausweg?
• Nutzt die Standards so, wie sie gedacht
waren.
• Geht defensiv vor: möglichst wenig
Hindernisse für die Zugänglichkeit des
Inhalts
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
17. 17
Nicht flexibel
Was soll das?
Text!
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
19. 19
Keine Tabellen? Doch!
• Tabellen sind für tabellarische Daten da!
• Für Layoutzwecke gibt es CSS!
• Die Unterstützung durch moderne Browser
ist gut.
• Selbst der IE5 kann mit CSS umgehen.
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
20. 20
Semantik
• Inhalte werden danach ausgezeichnet was
sie sind, nicht wie sie aussehen sollen.
• Überschrift:<h1> bis <h6>
• Liste: <ul> oder <ol> und <li>, nicht
einfach Absätze untereinander
• Das Aussehen kommt erst durch CSS.
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
21. 21
Semantik und Layout
• Erst bestimmen, was es ist, dann das
Aussehen bestimmen.
• Wenn die Überschrift die gleiche
Schriftgröße wie der Absatz hat, kann man
trotzdem nicht auf die Überschrift
verzichten
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
23. 23
Webstandards sind nichts
Neues!
• Es gibt sie, seitdem es das Web gibt. Wir
nannten sie nur nicht so.
• Grundverständnis: eine Internetseite ist
ein Dokument, das sinnvoll strukturiert
und ausgezeichnet werden muss. Erst in
einem zweiten Schritt kommt das Layout.
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
24. 24
Was sollen Standards?
• Alle Browser haben eine gemeinsame
Basis, die sie interpretieren und die ich
kenne.
• Keine Sonderbehandlung notwendig.
• Es wird eine Seite entwickelt, nicht
verschiedene Varianten.
• Qualitätssicherung
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
25. 25
Die Realität?
• Sonderbehandlung dank Microsoft
• Aber auch die anderen
Browser sind nicht
fehlerfrei
• Mobile Browser
unterstützen das
media-Attribut nicht!
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
26. 26
Standards?
W3C
XML (X)HTML
SVG
CSS WCAG
MathML
WCAG (Web Content Accessibility Guidelines)
XMLHttpRequest
SWF ECMA-Script innerHTML
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
27. 27
Reichen diese Standards?
NEIN
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
28. 28
Weiterentwicklung
• Neue Ideen können neue Standards
benötigen
• Wir benötigen viele kleine Würfe
• Das W3C will immer den großen Wurf
• Die Browserhersteller werden wichtiger
• Mikroformate als Beispiel
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
29. 29
Mikroformate
• Auf Basis bestehender Standards werden
neue Wege der Informationsvermittlung
beschritten.
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
30. 30
Alle müssen mitmachen
• Schnelle Standardisierungsverfahren
• Schnelle Implementierung in Browser
• Entwickler müssen lernen
• Anwender müssen Updatezyklen
mitmachen
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
31. 31
Webseiten sind nicht aus Papier
• Webseiten unterliegen ganz anderen
Gesetzen als Printprodukte. Das vergessen
viele Designer und Kunden.
• Warum also sollten wir Webseiten wie
Printprodukte gestalten?
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
32. 32
Webseiten sind nicht aus Papier
• Webseiten passen sich der Größe des
Browsers an.
• Man kann die Schriftarten vergrößern und
verändern.
• Man kann die Kontraste ändern.
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
33. 33
Webseiten sind nicht aus Papier
• Man kann Bilder ausblenden
• Webseiten können mit dem User
interagieren.
Versuchen Sie das mal mit einer Zeitung,
einem Plakat, einem Buch!
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
34. 34
Eine andere Sicht der Dinge
• Webstandards, das Design mit CSS
erfordern eine andere Sicht der Dinge, als
sie traditionell „normal“ ist.
• Traditionelles Webdesign denkt in Spalten
und setzt diese mit einer Layouttabelle
um. Mehr oder minder tief verschachtelt.
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
35. 35
Anderes Medium – andere
Denkweise
• Ein anderes Medium erfordert ein anderes
Vorgehen, eine andere Denkweise.
• Die Idee des pixelgenauen Layouts, das auf
allen Browsern gleich aussieht, ist nicht
nur falsch, sondern auch schädlich.
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
36. 36
Anderes Medium – andere
Denkweise
• Layout und Inhalt sind getrennt. Diese
Trennung hat ihre Vorteile, denn so kann
man den Inhalt auf vielen Plattformen
erreichen.
• Die Inhalte werden in der Nutzung flexibel
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
37. 37
Mitmachen!
Bauen Sie an einem modernen Web mit,
nutzen Sie Webstandards mit Verstand!
http://webkrauts.de
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
38. 38
Diese Präsentation steht unter der Creative Commons Lizenz
„Attribution-ShareAlike 2.0“
http://creativecommons.org/licenses/by-sa/2.0/de/
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web