wien.at Relaunch 2010

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

thomas.joechler@extern.wien.gv.at

Twitter: @highlyoverrated