Rahmenbedingungen, Infrastruktur und Gestaltungsrichtlinien für Websites an der ETH Jakob Lindenmeyer Web Office der ETH Zürich www.weboffice.ethz.ch Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Full Presentation under: www.weboffice.ethz.ch/politik/net/ Gestaltung Allgemeine Grundsätze ·  Die Form folgt der Funktion – «form follows function» ·  Konsistentes Site-Layout ·  So einfach wie möglich ·  Überflüssiges vermeiden ·  Accessibility & Browser-Unabhängigkeit ·  Keine Technik-Gimmicks (Plug-ins) · Aktualität http://www.weboffice.ethz.ch/webdesign/guide/ Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Site Design – Seiten-Design ·  Die Homepage ·  Klares Layout (CD, Identifikation, Orientierung) ·  Links ·  Tables ·  Frames http://www.weboffice.ethz.ch/webdesign/guide/ Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Benutzerführung und Navigation ·  Horziontale und vertikale Navigation ·  Navigation bars ·  Orientierung innerhalb einer Seite ·  Inhaltsverzeichnis (pro Seite) ·  Site Map (für das ganze Angebot) ·  Interne Suchmaschinen http://www.weboffice.ethz.ch/webdesign/guide/ Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Erlass der ETHZ Internet-Richtlinien Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

ETHZ Internet-Richtlinien In Kraft seit 1. Mai 1999 Gelten für das gesamte ETH-Web http://www.weboffice.ethz.ch/politik/ ETH-Intern-Artikel von morgen Freitag Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

ETHZ Internet-Richtlinien Artikel 1 : Zweck und Geltungsbereich Kohärentes Erscheinungsbild, Bedienungsfreundlichkeit und Aktualität des Auftritts Artikel 2: Unterstützung Durch das Web Office der ETH Zürich (http://www.weboffice.ethz.ch/) Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

ETHZ Internet-Richtlinien Artikel 3 : Verantwortlichkeit (1) Für das Erscheinungsbild jedes Dokuments gibt es eine verantwortliche Person. Diese muss entweder in dem Dokument selbst oder in einem per Link abrufbaren Begleitdokument mit Vorname, Name, Benutzereinheit und E-Mail-Adresse bezeichnet sein. (2) Zuständig ist im allgemeinen der/die Leiter/in der Einheit. Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

ETHZ Internet-Richtlinien Artikel 5 : Gestaltung (1) Auf allen Dokumenten ist das Datum der Einspeicherung oder der letzten Änderung anzubringen. (2) Jedes Dokument enthält einen Verweis auf die entsprechende Einstiegsseite, und jede Einstiegsseite verweist auf die Einstiegsseite der ihr übergeordneten Ebene. Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

ETHZ Internet-Richtlinien Artikel 5 : Gestaltung (3) Es sind die offiziellen Stilelemente und Vorlagen der ETH Zürich (z.B. Logos) zu benutzen, die unter http://www.aoa.ethz.ch/cd/ abrufbar sind. (4) Jede Einstiegsseite der Ebenen 1 bis 7 enthält das ETH-Logo und einen Link auf die zentrale Einstiegsseite der ETH Zürich. Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

ETHZ Internet-Richtlinien Artikel 5: Gestaltung, Absatz 5: “Der Zugang zum Inhalt und das Navigieren innerhalb der Angebote der Ebenen 1 bis 7 muss auch mit Browsern ohne Multimediaelemente (z.B. Java, JavaScript, Shockwave, usw.) und ohne Frame-Unterstützung möglich sein. “ Artikel 7: Inkrafttreten Dieser Erlass ist seit 1. Mai 1999 in Kraft. Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Full Presentation under: www.weboffice.ethz.ch/politik/net/ Accessibility “Zugänglichkeit” definiert sich dadurch, wie einfach ein Dokument auf dem Web durch einen Empfänger “verwendet” werden kann. Je höher die Anforderungen, desto schlechter ist das Dokument zugaenglich. Anforderungen beinhalten die Fähigkeit der benötigten Hard- & Software sowie auch die Fähigkeit der Person, welche versucht die in einem Dokument zur Verfügung gestellte Information zu verwenden. Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Full Presentation under: www.weboffice.ethz.ch/politik/net/ Accessibility Accessibility is defined as how easy a document on the web can be "used" by a client. The higher the requirements are, the less accessible a document is. Requirements include capabilities of the hard- and software deployed as well as the capabilities of the person trying to use the information provided in a document. Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Pawan Vora, Usability-Forscher “Web technology is exclusive or excluding when it limits users' experience or access to information!” Pawan Vora, Usability-Forscher Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

TIP Accessibility “Accessibility benefits all!” Accessibility ist nicht nur für Menschen mit Behinderungen wichtig! Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

“Excluding sites are seen as sign of corporate incompetence!” Jacob Nielsen, Usability-Guru Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Full Presentation under: www.weboffice.ethz.ch/politik/net/ Ablauf Problematik Umfeld Lösungen Beispiele Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Full Presentation under: www.weboffice.ethz.ch/politik/net/ Ziel Ein gut zugängliches ETH Web Kennen der relevanten Richtlinien Frühzeitige Berücksichtigung der Accessibility bei einem Redesign Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Problematiken von “fettem” Design “Low resource”-Geräte Mobile Devices Alte Software (Browser, Plug-In’s) Menschen mit Behinderungen Vorschriften, Richtlinien, Gesetze Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

“Low resource”-Geraete Ältere Computer (z.B. JVM auf 486) Kleiner Bildschirm (z.B. VGA & Monochrom) Langsames 14.4 Kb/s-Modem Langsame Netzanbindung (Kein ISDN) Verbreitet bei Studierenden (beschränkte finanzielle Ressourcen) Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Die Computer-Ressorcen der ETH NETHZ Online Dienste für Studierende Dial-up (im Rahmen von NETHZ) Computerräume (127 Sun’s & 32 PC’s) Laptop-Steckplätze (Geplant ab Herbst 99) Standard-Laptops für Studierende (Geplant) Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Full Presentation under: www.weboffice.ethz.ch/politik/net/ Mobile Devices Mobiltelefon (Screensize ca. 2 Zoll) Handhelds (Screensize ca. 4 Zoll) Auto-Computer (mit Sprachausgabe für Fahrer) Browser in Armbanduhr (Screensize ca. 1 Zoll) Browser & CE in Haushaltsgeräten (z.B. Kaffee- & Waschmaschine) Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Full Presentation under: www.weboffice.ethz.ch/politik/net/ Alte Software z.B. Browser - Neue PC’s haben oft noch Internet Explorer 2.0 vorinstalliert. Browser an der ETH (Statistik) Plug-In’s (z.B. Shockwave, Quicktime, Realplayer) Default-Design Meist für PC mit Netscape oder Internet Explorer ab Version 4. z.B. CSS erst mit Internet Explorer ab Version 5 richtig unterstützt. Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Menschen mit Behinderungen Farbenblind (X % aller Männer) Blind => Audio-Browser (Demo) Sehbehinderung (Grosse Schriften notwendig) Bewegungseingeschraenkt (Keyboard- only bzw. Mouse-only Navigation) Taub (Alternativen fuer Audio-Dateien) 10% aller Menschen haben irgendeine Behinderung der obigen Art (nach WWW8) Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

TIP Kümmern Sie sich bereits vor Umfeld Accessibility: “it’s not a privilege, it’s a law!” Empfehlungen (z.B. Web Content Accessibility Guidelines 1.0) Vorschriften (z.B. ETHZ Internet-Richtlinie) Gesetze (z.B. Kanadische Regierung) TIP Kümmern Sie sich bereits vor Designstart um bestehende Richtlinien & Empfehlungen Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Full Presentation under: www.weboffice.ethz.ch/politik/net/ Empfehlungen Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/WAI-WEBCONTENT/ W3C Testimonials & W3C Quick Tips zur WCAG Empfehlungen des ETH Web Office http://www.weboffice.ethz.ch/webdesign/guide/ Empfehlungen des ETH Webmasters http://www.ethz.ch/r_amb/web_publishing.html ev. Empfehlungen Ihrer Organisationseinheit z.B. http://www.weboffice.ethz.ch/webdesign/housestyle.html Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

WAI Quick Tips Reference Card Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Vorschriften & Gesetze ETHZ Internet-Richtlinien: Ausführungsbestimmungen über den Auftritt der ETH Zürich im Internet z.B. Artikel 5: Gestaltung, Absatz 5 Kanadische und US-Regierung American with Disabilities Act Your Tax-Money at work: ETH-Web ist durch Steuergelder finanziert => Wo steht die Schweiz? Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Testimonials for "Web Content Accessibility Guidelines 1.0" “The U.S. Government intends to work closely with the W3C to ensure that government information and services are accessible” Al Gore, Vice President, USA American with Disabilities Act: “the information in this site is available in alternate formats upon request.” (z.B. www.unm.edu) Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Full Presentation under: www.weboffice.ethz.ch/politik/net/ Loesungen “Alles ist eine Frage der Organisation!” HTML-Validatoren und -Korrektoren Accessibility-Checker z.B. Bobby Online-Hilfen (z.B. Empfehlungen, Anleitungen von ETH oder W3C) Beratung (z.B. durch das ETH Web Office) zukünftige Lösung: XML Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Richtige Organisation Zugängliche Webseiten müssen NICHT folgendem Bild entsprechen: eintönig, langweilig, nur Text teuer und zeit-aufwendig Verzicht auf moderne Features Durch frühzeitige & richtige Organisation lassen sich diese Vorurteile vermeiden. Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

“Accessibility does not mean minimal page design; it means thoughtful page design!” Web Content Accessibility Guidelines Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

HTML-Validatoren und -Korrektoren Bp. W3C HTML 4.0-Validator http://validator.w3.org/ HTML-Validatoren in Editoren HTML-Korrektoren z.B. Software “A-Prompt” Zugänlichkeits-Verifikation & Reparatur Halbautomatische Korrektur von: * ALT-Text und LONGDESC von Bildern * Tabellen (TITLE, CAPTION, DESC) * Image-Maps (Server-Side => Client side) Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Accessibility-Checker Bobby: “Accessibility without compromise!” Infos & Software unter: http://www.cast.org/bobby/ Demo Software “A-Prompt” Als dll oder in Java. Demo Infos unter: http://aprompt.snow.utoronto.ca/ Measuring Accessibility Publikation des ETH Web Office an der 8. WWW-Konferenz http://www.weboffice.ethz.ch/www8/ Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Measuring Accessibility Publikation unter: http://www.weboffice.ethz.ch/www8/ Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

ZKB mit Netscape Communicator 4.5 Screenwidth = 640 pixels Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

ZKB mit MS Pocket Internet Explorer (Kein Java) Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Full Presentation under: www.weboffice.ethz.ch/politik/net/ ZKB mit Lynx V 2.8 (Textbrowser) Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Full Presentation under: www.weboffice.ethz.ch/politik/net/ ZKB mit pw WebSpeak (Audio Browser) Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Zukuenftiger Lösungsansatz: XML Aus XML-Grundcode ableitbar: WWW-Vollversion “WWW light” für Mobile Devices Sprachversion Papierversion Internationalisierung: E, D, F, I, J, Chinesich, usw. Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Full Presentation under: www.weboffice.ethz.ch/politik/net/ “People should stop thinking in paper documents and start thinking in [XML-] objects!” Johan Hjelm, W3C Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Publikationen, Beilagen & Handouts zu dieser Präsentation ETHZ Internet Richtlinien http://www.weboffice.ethz.ch/politik/ Paper-Abstract “Measuring Accessibility” http://www.weboffice.ethz.ch/www8/ Web Content Accessibility Guidelines http://www.w3.org/TR/WAI-WEBCONTENT/ WAI Quick Tips http://www.w3.org/WAI/References/QuickTips.html Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Folien dieser Praesentation sind erhaeltlich unter: http://www.weboffice.ethz.ch/politik/net/ Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Full Presentation under: www.weboffice.ethz.ch/politik/net/ “Auf die 5% welche Java nicht unterstützen kann ich getrost verzichten!” Der Webmaster einer ETH-Organisationseinheit am letztjährigen ETH WWW-Workshop Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Full Presentation under: www.weboffice.ethz.ch/politik/net/ 6. ETH WWW-Workshop Zeit: Mittwoch 9. Juni 1999 von 13:00 - 17:00 Ort: Raum NO C 3, ETH Zentrum Themen: “Regeln & Dienstleistungen auf dem ETH Web”: Infos & Anmeldung: unter: http://www.weboffice.ethz.ch/eth-w4/006/ Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/

Full Presentation under: www.weboffice.ethz.ch/politik/net/ Diskussionspunkte Accessibility und Design: Gegensaetze? Redesign vs. Neudesign: Prioritaeten Papier-Design vs. Object-oriented Design (XML) Verzicht auf 5% der Besucher Filter in Webserver auf validierte Pages Ungeeignete Web-Teaching Tools Zukünftige Dokumentformate: XML Jakob Lindenmeyer, 27. Mai 1999 Full Presentation under: www.weboffice.ethz.ch/politik/net/