wien.at relaunch 2010
DESCRIPTION
Vortrag beim Webkongress Erlangen am 7. Oktober 2010TRANSCRIPT
wien.at Relaunch 2010
Webkongress Erlangen
7. Oktober 2010
Thomas Jöchler
Wien - gestern und heute
Wienbilder - Collage
http://de.wikipedia.org/wiki/Wien und wien.at ...
wien.at - 15 Jahre in 1 Minute
• online 1995 unter „www.magwien.gv.at“
• wenig später unter wien.at (bzw. wien.gv.at)
http://www.wien.gv.at/medien/wienat-medien/online/geschichte/
Rathausinformation 1995
1997
1998
2000
2001
2005
2010
Status 2009 (Projektstart)
wien.at ist eine der größten Plattformen Österreichs
über 40.000 Seiten
850.000 unique clients / 1,9 Mill. Visits pro Monat (ÖWA - IVW-Methode)
250 Formulare, Online-Datenbanken und elektronische Services
Über 100 Abteilungen produzieren Inhalte auf wien.at
„Wiens eGovernment Top Ten weltweit“
Studie: Rutgers University Newark 2009
Mehrstufiger Redaktionsworkflow
Vielfältige Use Cases: News - Wissen - Tasks
Ausgangslage und Ziele
Contentexplosion Benutzerinnen zum Inhalt führen
Lange Klickpfade Inhalte verknüpfen
Navigation ohne Kontext
Orientierung durch Kontext
Layout aus 2005 Ansprechende Optik
Viel Feedback und Erfahrungen
Multimediale Inhalte
Gelebte Barrierefreiheit
Frühe Entscheidungen
Das Erbe, der IE 6 & die Validierunghttp://www.flickr.com/photos/openistic/3663162953/sizes/o/
Das Erbe
• Bestehendes CMS bleibt• Alten HTML Code übernehmen• Klassische Projektkultur (Wasserfall)
http://www.imaginevienna.at/
Der IE 6: R.I.P.
• Projektstart: frühes Nein zu IE 6 Feintuning
• Grundlegende Unterstützung, keine Goodies (progressive enhancement)
• IE 6 war 2009 noch Standardbrowser im Magistrat Wien (ab Jänner 2010 IE 7)
Der IE 6 - R.I.P. (2)
• Layout grundsätzlich ok
• Einige Feinheiten fehlen, z.B.:– Schlagschatten– Flexibles Layout (1024 bis 1280)– Überblendeffekte– images via data URI scheme
moderne Browser IE 6
Die Validierung
• WAI-ARIA bringt Fehler im W3C Validator
• Erschwert Kommunikation• Beurteilung nötig• Fehler nicht gleich Fehler
Lösung:• Erklärung von WAI-ARIA via
internem Blog + Styleguide• Warten auf Validator Update
Visualisierungen
# "so soll es aussehen" (*)
# "so soll es funktionieren"
# Prototyping statt Pflichtenheft
(*) in etwa
Mockups Infoarchitektur
Visuelle Hierarchie
Startseite Channel Ressort
Designs Grafikagentur Sternwerk
Prototyping html/css
• Klickbarer Prototyp
• laufend getestet
• Grundlage für Programmierung
• real world Spezifikation
Beispiel: Baukasten Formulare Prototyp Tomas Caspers
Klasses CSS
Basis: YAML-FrameworkErspart Arbeit, ermöglicht Detailarbeit
Möglichst modularer Aufbau:• Objektorientiertes CSS • html-Bausteine• Unterstützt das CMS-Setting (html Code
nur für Admins, Klassen für AutorInnen)
Teaser Startseite
<div class="vie-teaser"><img ... class="vie-img-flexible"><h2>Wien-Wahl 2010</h2><p>Sämtliche Informationen... <a ... class="bl-bigger">mehr</a></p>
</div>
Teaser Karussell
<div class="vie-teaser"><img ... class="vie-img-flexible"><h3>Wien-Wahl 2010</h3><p>Sämtliche Informationen... <a ... class="bl-bigger">mehr</a></p>
</div>
Teaser in der 3. Spalte
<div class="vie-teaser"><img ... class="vie-img-flexible"><div class="vie-teaser-text"><h2 class="vie-run-in">Rasch und einfach</h2><p class="vie-run-in">Gewerbeanmeldungen...<a ... >mehr</a></p></div>
</div>
Zusammenbringen
BenutzerInnen und Inhalt
&
Inhalte miteinander
Inhalte vorschlagen
• Top-Themen über Karussell am Seitenende
• Promotion über Marginalspalte• Behutsamer Umgang, keine
Überfrachtung
RSSifizierung
• Mehr als händische Verlinkung: Verstreute Inhalte (automatisiert) zueinanderbringen
• RSS als Standard für neue Applikationen, bestehende nachrüsten
• Externe Quellen• Verarbeitung über Contentpool (vgl.
Yahoo! pipes)• Bereitstellung von eigenen Daten
Wege zum Inhalt
http://www.flickr.com/photos/lachlanhardy/3588354009/sizes/l/
oder: Barrierefreiheit anschaulich
z.B.: http://www.wien.gv.at/freizeit/bildungjugend/bildung/buechereien/virtuelle-buecherei.html
Vorleseservice "Wiener Stimme"
Leicht Lesen
Videos in ÖGS - Österreichische Gebärdensprache
http://www.wien.gv.at/multimedia/oegs/
Mobil
• optimierte Mobilversion unter m.wien.at• next step: mobile Apps (vs. native Apps)
Multimedia
http://www.flickr.com/photos/dogfrog/2889837759/
Videoplayer
• Tastatursteuerung
• Mitschrift und Untertitel
• Basiert auf JW-Player
mehr beim A-Tag 5.11.2010http://atag.accessiblemedia.at/2010/
Videoplayer eingebettet
• Einbetten in wien.at-Artikeln via JS• Klasse steuert Breite (z.B. 50% oder 100%)<p class="bde-stx-wrapper vie-video-50l"><a href="...">Video zum Thema</a></p>
Stadtplan
www.wien.at/stadtplan
Danke für die Aufmerksamkeit!
www.wien.at/neu
Thomas Jöchler
Twitter: @highlyoverrated