Jens Grochtdreis – Webseiten sind keine Gemälde

Die Flexibilität des Internet im Spiegel des Frontend

Webseiten sind keine Gemälde

2

Jens Grochtdreis

_ Frontendentwickler

_ 10 Jahre Agenturerfahrung

_ Gründer der Webkrauts

_ Blogger

_ Autor des PHPMagazins, Webstandards-Magazins, T3N

_ Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT

33http://failblog.files.wordpress.com/2009/10/epic-fail-quality-hotel-fail.jpg

44http://failblog.files.wordpress.com/2009/09/epic-fail-power-line-fail.jpg

5

Das sollten wir nicht vergessen!

_ Das Internet ist ein neues Medium!

_ junges Medium

_ rasante Entwicklung

_ spannend

_ atemberaubend

_ umwälzend

_ in ständigem Wandel begriffen

6

Das sollten wir nicht vergessen!

_ Das Internet bietet viele unterschiedliche Zugänge zu Informationen

_ Am Monitor lesen

_ Ausdrucken

_ Vorlesen lassen

_ Formate sind anpassbar

_ Inhalte lassen sich leicht rudimentär übersetzen

_ Wir wissen nichts Definitives über das Zielsystem

77

Kontrollverlust - formal

_ Wie können wir heute ins Internet gehen?

_ PC, Notebook

_ viele Betriebssysteme, Browser, Monitore

_ Handy, PDA

_ Spielkonsole

_ TV

_ Assistive Technologien

88

Unsicherheiten

_ Betriebssysteme

_ Browser

_ Browserversionen

_ Individuelle Einrichtungen des Browsers

_ Monitorauflösungen

_ Umgebungslicht

_ Mobiler Zugriff

_ Zugriffsgeschwindigkeit

_ Plugins

_ Javascript

99

Flexibilität ist Stärke

Die Flexibilität des Internet ist seine Stärke.Akzeptiert es! Macht Euch locker!

Bild: http://snipurl.com/2c1yl

1010

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!

1111

Screenshot von einem EeePC, 800x480px

1212

Wir stehen am Anfang

_ Wir stehen noch immer am Anfang.

_ HTML in der jetzigen Form genügt nicht!

_ Webseiten sind immer seltener Dokumente.

_ HTML5 ist ein wichtiger und erster Schritt.

1313

1414

1515

1616

1717

Problemfeld: Browser

_ Der IE in allen Versionen kann einfach weniger als alle anderen Browser

_ Der IE6 ist nicht tot zu kriegen

_ Fortschritt richtet sich nach dem Langsamsten (IE) wegen der Verbreitung

_ Nur Entwickler interessieren sich für Browser

1818

http://www.flickr.com/photos/fmg2001/679774853/sizes/o/

1919

Graded Browser Support

http://developer.yahoo.com/yui/articles/gbs/

2020

http://snurl.com/t58bi

2121

„Schweizer Messer“ für den IE6

_ position: relative

_ zoom: 1

_ height: 1%

_ bei Floats: display: inline

2222

http://snurl.com/t58ch

2323

Problemfeld: Entwickler

_ Die Opera-MAMA-Studie hat erschreckende Codedefizite zu Tage gefördert:

_ 58,5% Webseiten ohne Überschriften-Elemente

_ 7,9% mit mehreren <h1>

_ 16,1% beginnen Überschriften-Struktur mit <h2>, <h3>

_ 7,1% mit Überschriften ohne logische Reihenfolge

_ 24,9% mit Bildern ohne alt-Attribute

_ 4,13% der Testseiten validierten

Quelle: http://www.einfach-fuer-alle.de/blog/id/2505/

2424

Das Internet ist komplex

_ Wir nutzen sehr viele verschiedene Standards und Technologien, um eine Website zu betreiben.

_ (X)HTML, CSS, Javascript, DOM 1-3

_ Flash, Flex, SWF

_ PHP, ASP, Perl, Java

_ MySQL, PostgreSQL

_ XML, XSLT

_ ...

25

Kommunikation ist alles!

_ Unterschiedliche Erwartungen und Wissensstände führen immer wieder zu Kommunikationsproblemen.

_ Kunde, Kundenberater, Designer, Konzepter, Entwickler sollten möglichst die gleiche Sprache sprechen. Zumindest sollten sie einander verstehen.

_ Immer den Endnutzer im Blick haben, wenn es der Kunde schon nicht macht.

26

Der Projektalltag

27

Der Projektalltag

28

Der Projektalltag

29

Der Projektalltag

http://www.projectcartoon.com/cartoon/27

30

Agenturalltag

http://vikiworks.com/2007/08/27/flat-panel-monitor-icon/

3131

Selber denken macht schlau!

3232

Der Frontendentwickler ist ein Übersetzer!

3333

Frontendentwickler als Übersetzer

_ Das Frontend ist das Einzige, das der Nutzer sieht.

_ Ein CMS oder die weitere Technik hinter der Seite interessiert den Nutzer nicht.

_ Entscheidungen aller anderen „Gewerke“ fliessen in das Frontend ein. Also sollte der Frontendentwickler mitsprechen.

_ Verständigung zwischen Grafik, Beratung und Backend herstellen, denn der Frontendentwickler sollte sie alle verstehen!

3434

Informationen sammeln

http://snurl.com/t58dc

3535

http://dev.opera.com/articles/wsc/

3636

http://webkrauts.de

3737

http://jendryschik.de/wsdev/einfuehrung/

3838

http://little-boxes.de/little-boxes-teil1-online.html

3939

http://ajaxian.com/

4040

http://developer.yahoo.com/yui/

4141

http://developer.yahoo.com/yui/theater/

4242

http://yuiblog.com/

4343

http://developer.yahoo.com/ypatterns/

4444

http://icant.co.uk/

4545

http://www.webkrauts.de/krautcosmos/

4646

http://www.einfach-fuer-alle.de/

4747

http://planet.jquery.com/

4848

http://net.tutsplus.com/

4949

http://www.smashingmagazine.com/

5050

http://sixrevisions.com/

5151

Gute Bücher

5252

5353

5454

5555

Beliebte Problemfälle

5656

Gleich hohe Boxen

5757

Gleich hohe Boxen

http://www.yaml.de/de/dokumentation/anwendung/subtemplates.html

5858

Gleich hohe Boxen

http://www.positioniseverything.net/articles/onetruelayout/equalheight

moderne Browser

IE6 und 7

5959

Reiter

6060

Reiter

http://github.com/ginader/Accessible-Tabs

6161

Runde Ecken

6262

Runde Ecken

http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

6363

Runde Ecken - The ThrashBox

http://www.vertexwerks.com/tests/sidebox/

6464

Runde Ecken für moderne Browser

6565

Runde Ecken für moderne Browser

6666

Infoseite zu CSS3

http://www.css3.info/

6767

Massenweise Requests

6868

Massenweise Requests - CSS-Sprites

http://www.alistapart.com/articles/sprites/

6969

Massenweise Requests - CSS-Sprites

7070

Performance

http://developer.yahoo.com/performance/rules.html

7171

Performance

7272

Performance

http://www.stevesouders.com/

7373

http://snurl.com/t58fj

7474

Semantik

_ Mit der Bedeutung der Inhalte beschäftigen

_ Die Struktur erfassen und aufschreiben

_ Eine Überschrift wird mit beispielsweise <h2>Überschrift</h2> ausgezeichnet, nicht mit <div class="headline">Überschrift</div>

_ Eine semantisch ausgezeichnete Seite zeigt, daß man sich Gedanken über seine Arbeit gemacht hat.

7575

Semantik

_ Webseiten sind heute mehr als nur Dokumente.

_ Die Dokumentenanalogie ist alt

_ Es sollten wissenschaftliche Texte erfaßt werden

_ HTML5 ist der Versuch, der Realität gerecht zu werden

_ Es gibt immer mehr Applikationen

_ Viele notwendige Seitenelemente gibt es nicht in HTML, diese müssen wir per CSS und Javascript simulieren

7676

Überschriften

_ Webseiten sind immer seltener Dokumente

_ Kann ein Dokument mehrere h1 vertragen?

_ Nur eine h1? Warum?

_ Wir vermeiden sonst Analogien zur Printwelt. Warum nicht auch hier?

_ Struktur für Sehende und Blinde anders?

_ Reichen sechs Überschriften?

_ Was machen Browser mit Sektionsüberschriften in HTML5 und machen sie das einheitlich?

77

Überschriften

_ Überschriften sind eine Navigationsmöglichkeit für Screenreader.

_ Wikis generieren aus den Textüberschriften eine seiteninterne Navigation, ein Inhaltsverzeichnis.

7878

Kenne Dein (X)HTML

_ Wie sehen ungeordnete Listen aus?

_ Wie sehen geordnete Listen aus?

_ Wie sieht eine Überschrift zweiter Ordnung aus?

7979

8080

8181

Simples Browser-Reset

8282

Safari4 (Mac) Firefox 3.5 (Mac)

8383

Safari4 (Mac) Firefox 3.5 (Mac)

8484

Eingebaute und individuelle Stylesheets

_ HTML sieht nicht aus, sondern transportiert Bedeutung!

_ Auch Browser nutzen Stylesheets, um HTML anzuzeigen.

_ Jeder Browser hat sein eigenes Stylesheet.

_ Nutzerstylesheets sind möglich.

_ Letztendliche Sicherheit über die Darstellung einer Seite gibt es nicht. Man kann aber dafür sorgen, daß ein Layout nicht allzu schnell "zerstört" wird.

_ Für ein Userstylesheet ist die Notation !important wichtig, damit alle vorherigen Definitionen überschrieben werden. Also bspw.: p { color: black !important;}

8585

Reset-Stylesheet von Yahoo!

8686

Reset-CSS von Eric Meyer

8787

Keine Tabellen? Doch!

_ Tabellen sind für tabellarische Daten da! Für Layoutzwecke gibt es CSS!

_ ABER: eine Tabelle ist auch im Code eine komplexe Sache. Es gibt mehr als nur <table>, <tr> und <td>.

_ Man unterschiedliche Bereiche in Head, Foot und Body

unterteilen:

<thead>...</thead>, <tfoot>...</tfoot>,

<tbody>...</tbody>

Man kann Spalten zu Komplexen zusammenfassen:

<colgroup>...</colgroup>, <col />

8888

http://www.flickr.com/photos/webseeings/239301576

8989

http://burgenlandfeuerwehr.de/

9090

Barrierefreiheit laut Gesetz

„Barrierefrei sind [..,] technische Gebrauchsgegenstände, Systeme der Informationsverarbeitung, akustische und visuelle Informationsquellen und Kommunikationseinrichtungen [...], wenn sie für behinderte Menschen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe zugänglich und nutzbar sind.“

9191

9292

Für wen?

_ Körperbehinderung

_ Motorische Behinderungen

_ Contergan

_ Sinnesbehinderungen

_ Farbfehlsichtigkeit

_ Blindheit

_ Gehörlosigkeit

_ Taubblindheit

_ Lernbehinderung

_ Legasthenie

_ Dyslexie

_ Geistige Behinderung

_ Down-Syndrom

9393

Für wen?

9494

Zielgruppen

9595

http://snurl.com/t58c8

9696

Kampfbegriff?

_ Der Begriff „Barrierefreiheit“ beinhaltet ein sehr weitgehendes Versprechen.

_ Im Englischen: Accessibility (= Zugänglichkeit)

_ In der deutschen Diskussion einseitig auf Behinderte und vor allem auf Blinde konzentriert.

_ Bei Barrierefreiheit geht es um Anwender, für die eine Seite nur eingeschränkt nutzbar ist.

9797

http://snurl.com/t58gj

9898

Was Barrierefreiheit NICHT ist

9999

Barrierefreie Seiten müssen nicht hässlich sein!

100

101

101

102

102

http://www.ble.de/

103

103

http://www.hauptbahnhof-wien.at/

104

104

http://www.darmkrebs.at/

105

105

4 Grundprinzipien der WCAG2.0

_ POUR

_ Inhalte müssen wahrnehmbar sein (Perceivable)

_ Benutzerschnittstellen im Inhalt müssen bedienbar sein (Operable)

_ Inhalte und Bedienelemente müssen verständlich sein (Understandable)

_ Inhalte sollten robust genug sein, um mit aktuellen und zukünftigen Benutzeragenten zu arbeiten (inklusive assistiver Hilfsmittel) (Robust)

106

106

Grundregeln

_ Valides und semantisch korrektes (X)HTML und valides CSS

_ Inhalte müssen textlich transportiert werden. Kein Verstecken von Texten in Grafiken.

_ Ausreichende Farbkontraste

_ Abkürzungen, Akronyme und Sprachwechsel müssen markiert/erklärt werden.

_ Für Medien müssen Alternativen vorliegen.

_ Bilder bekommen ein Alt-Attribut, es sei denn, sie sind rein dekorativ

107

107

Barrierefreiheit leben

_ Barrierefreiheit ist weniger ein technisches Problem, als das einer vernünftigen Planung. Zudem endet Barrierefreiheit nicht mit dem Launch. Sie muss täglich gelebt werden.

_ Ein technisches Produkt wie ein CMS kann Barrierefreiheit nur unterstützen, wichtiger sind allerdings die Redakteure, die sich an Regeln halten müssen.

108

108

Automatisierte Tests

_ Eine fehlerfreies Abschneiden in einem automatisierten Test sagt aber nur, daß die Seite dieses Tool „übersteht“. Mehr nicht!

_ Barrierefreiheit ist für Menschen da, deshalb sollten auch Menschen sie testen.

109

109

Am Ende

Jens Grochtdreis

http://blog.grochtdreis.de

http://webkrauts.de

Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/