Die Flexibilität des Internet im Spiegel des Frontend Webseiten sind keine Gemälde Jens Grochtdreis – Webseiten sind keine Gemälde

Die Flexibilität des Internet im Spiegel des Frontend

Jens Grochtdreis Frontendentwickler 10 Jahre Agenturerfahrung Gründer der Webkrauts Blogger Autor des PHPMagazins, Webstandards-Magazins, T3N Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT

Frontendentwickler

10 Jahre Agenturerfahrung

Gründer der Webkrauts

Blogger

Autor des PHPMagazins, Webstandards-Magazins, T3N

Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT

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

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

Das sollten wir nicht vergessen! Das Internet ist ein neues Medium! junges Medium rasante Entwicklung spannend atemberaubend umwälzend in ständigem Wandel begriffen

Das Internet ist ein neues Medium!

junges Medium

rasante Entwicklung

spannend

atemberaubend

umwälzend

in ständigem Wandel begriffen

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

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

Kontrollverlust - formal Wie können wir heute ins Internet gehen? PC, Notebook viele Betriebssysteme, Browser, Monitore Handy, PDA Spielkonsole TV Assistive Technologien

Wie können wir heute ins Internet gehen?

PC, Notebook

viele Betriebssysteme, Browser, Monitore

Handy, PDA

Spielkonsole

TV

Assistive Technologien

Unsicherheiten Betriebssysteme Browser Browserversionen Individuelle Einrichtungen des Browsers Monitorauflösungen Umgebungslicht Mobiler Zugriff Zugriffsgeschwindigkeit Plugins Javascript

Betriebssysteme

Browser

Browserversionen

Individuelle Einrichtungen des Browsers

Monitorauflösungen

Umgebungslicht

Mobiler Zugriff

Zugriffsgeschwindigkeit

Plugins

Javascript

Flexibilität ist Stärke Die Flexibilität des Internet ist seine Stärke. Akzeptiert es! Macht Euch locker! Bild: http://snipurl.com/2c1yl

Die Flexibilität des Internet ist seine Stärke.

Akzeptiert es! Macht Euch locker!

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!

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!

Screenshot von einem EeePC, 800x480px

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.

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.

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

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

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

Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/

http://snurl.com/t58bi

„Schweizer Messer“ für den IE6 position: relative zoom: 1 height: 1% bei Floats: display: inline

position: relative

zoom: 1

height: 1%

bei Floats: display: inline

http://snurl.com/t58ch

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/

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

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 ...

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

...

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.

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.

Der Projektalltag

Der Projektalltag

Der Projektalltag

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

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

Selber denken macht schlau!

Der Frontendentwickler ist ein Übersetzer!

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!

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!

Informationen sammeln http://snurl.com/t58dc

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

http://webkrauts.de

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

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

http://ajaxian.com/

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

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

http://yuiblog.com/

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

http://icant.co.uk/

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

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

http://planet.jquery.com/

http://net.tutsplus.com/

http://www.smashingmagazine.com/

http://sixrevisions.com/

Gute Bücher

Beliebte Problemfälle

Gleich hohe Boxen

Gleich hohe Boxen http://www.yaml.de/de/dokumentation/anwendung/subtemplates.html

Gleich hohe Boxen http://www.positioniseverything.net/articles/onetruelayout/equalheight moderne Browser IE6 und 7

Reiter

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

Runde Ecken

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

Runde Ecken - The ThrashBox http://www.vertexwerks.com/tests/sidebox/

Runde Ecken für moderne Browser

Runde Ecken für moderne Browser

Infoseite zu CSS3 http://www.css3.info /

Massenweise Requests

Massenweise Requests - CSS-Sprites http://www.alistapart.com/articles/sprites/

Massenweise Requests - CSS-Sprites

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

Performance

Performance http://www.stevesouders.com /

http://snurl.com/t58fj

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=&quot;headline&quot;>Überschrift</div> Eine semantisch ausgezeichnete Seite zeigt, daß man sich Gedanken über seine Arbeit gemacht hat.

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=&quot;headline&quot;>Überschrift</div>

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

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

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

Ü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?

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?

Überschriften Überschriften sind eine Navigationsmöglichkeit für Screenreader. Wikis generieren aus den Textüberschriften eine seiteninterne Navigation, ein Inhaltsverzeichnis.

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

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

Kenne Dein (X)HTML Wie sehen ungeordnete Listen aus? Wie sehen geordnete Listen aus? Wie sieht eine Überschrift zweiter Ordnung aus?

Wie sehen ungeordnete Listen aus?

Wie sehen geordnete Listen aus?

Wie sieht eine Überschrift zweiter Ordnung aus?

Simples Browser-Reset

Safari4 (Mac) Firefox 3.5 (Mac)

Safari4 (Mac) Firefox 3.5 (Mac)

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 &quot;zerstört&quot; wird. Für ein Userstylesheet ist die Notation !important wichtig, damit alle vorherigen Definitionen überschrieben werden. Also bspw.: p { color: black !important;}

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 &quot;zerstört&quot; wird.

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

Reset-Stylesheet von Yahoo!

Reset-CSS von Eric Meyer

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 />

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 />

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

http://burgenlandfeuerwehr.de /

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.“

„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.“

Für wen? Körperbehinderung Motorische Behinderungen Contergan Sinnesbehinderungen Farbfehlsichtigkeit Blindheit Gehörlosigkeit Taubblindheit Lernbehinderung Legasthenie Dyslexie Geistige Behinderung Down-Syndrom

Körperbehinderung

Motorische Behinderungen

Contergan

Sinnesbehinderungen

Farbfehlsichtigkeit

Blindheit

Gehörlosigkeit

Taubblindheit

Lernbehinderung

Legasthenie

Dyslexie

Geistige Behinderung

Down-Syndrom

Für wen?

Zielgruppen

http://snurl.com/t58c8

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.

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.

http://snurl.com/t58gj

Was Barrierefreiheit NICHT ist

Barrierefreie Seiten müssen nicht hässlich sein!

http://www.ble.de/

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

http://www.darmkrebs.at/

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)

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)

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

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

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.

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.

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.

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.

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/