38
wien.at Relaunch 2010 Webkongress Erlangen 7. Oktober 2010 Thomas Jöchler

wien.at Relaunch 2010

Embed Size (px)

DESCRIPTION

Vortrag beim Webkongress Erlangen am 7. Oktober 2010

Citation preview

Page 1: wien.at Relaunch 2010

wien.at Relaunch 2010

Webkongress Erlangen

7. Oktober 2010

Thomas Jöchler

Page 2: wien.at Relaunch 2010

Wien - gestern und heute

Wienbilder - Collage

http://de.wikipedia.org/wiki/Wien und wien.at ...

Page 3: wien.at Relaunch 2010

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

Page 4: wien.at Relaunch 2010

1997

Page 5: wien.at Relaunch 2010

1998

Page 6: wien.at Relaunch 2010

2000

Page 7: wien.at Relaunch 2010

2001

Page 8: wien.at Relaunch 2010

2005

Page 9: wien.at Relaunch 2010

2010

Page 10: wien.at Relaunch 2010
Page 11: wien.at Relaunch 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

Page 12: wien.at Relaunch 2010

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

Page 13: wien.at Relaunch 2010

Frühe Entscheidungen

Das Erbe, der IE 6 & die Validierunghttp://www.flickr.com/photos/openistic/3663162953/sizes/o/

Page 14: wien.at Relaunch 2010

Das Erbe

• Bestehendes CMS bleibt• Alten HTML Code übernehmen• Klassische Projektkultur (Wasserfall)

http://www.imaginevienna.at/

Page 15: wien.at Relaunch 2010

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)

Page 16: wien.at Relaunch 2010

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

Page 17: wien.at Relaunch 2010

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

Page 18: wien.at Relaunch 2010

Visualisierungen

# "so soll es aussehen" (*)

# "so soll es funktionieren"

# Prototyping statt Pflichtenheft

(*) in etwa

Page 19: wien.at Relaunch 2010

Mockups Infoarchitektur

Page 20: wien.at Relaunch 2010

Visuelle Hierarchie

Startseite Channel Ressort

Designs Grafikagentur Sternwerk

Page 21: wien.at Relaunch 2010

Prototyping html/css

• Klickbarer Prototyp

• laufend getestet

• Grundlage für Programmierung

• real world Spezifikation

Beispiel: Baukasten Formulare Prototyp Tomas Caspers

Page 22: wien.at Relaunch 2010

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)

Page 23: wien.at Relaunch 2010

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>

Page 24: wien.at Relaunch 2010

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>

Page 25: wien.at Relaunch 2010

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>

Page 26: wien.at Relaunch 2010

Zusammenbringen

BenutzerInnen und Inhalt

&

Inhalte miteinander

Page 27: wien.at Relaunch 2010

Inhalte vorschlagen

• Top-Themen über Karussell am Seitenende

• Promotion über Marginalspalte• Behutsamer Umgang, keine

Überfrachtung

Page 28: wien.at Relaunch 2010

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

Page 29: wien.at Relaunch 2010

Wege zum Inhalt

http://www.flickr.com/photos/lachlanhardy/3588354009/sizes/l/

oder: Barrierefreiheit anschaulich

Page 30: wien.at Relaunch 2010

z.B.: http://www.wien.gv.at/freizeit/bildungjugend/bildung/buechereien/virtuelle-buecherei.html

Vorleseservice "Wiener Stimme"

Page 31: wien.at Relaunch 2010

Leicht Lesen

Page 32: wien.at Relaunch 2010

Videos in ÖGS - Österreichische Gebärdensprache

http://www.wien.gv.at/multimedia/oegs/

Page 33: wien.at Relaunch 2010

Mobil

• optimierte Mobilversion unter m.wien.at• next step: mobile Apps (vs. native Apps)

Page 34: wien.at Relaunch 2010

Multimedia

http://www.flickr.com/photos/dogfrog/2889837759/

Page 35: wien.at Relaunch 2010

Videoplayer

• Tastatursteuerung

• Mitschrift und Untertitel

• Basiert auf JW-Player

mehr beim A-Tag 5.11.2010http://atag.accessiblemedia.at/2010/

Page 36: wien.at Relaunch 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>

Page 37: wien.at Relaunch 2010

Stadtplan

www.wien.at/stadtplan

Page 38: wien.at Relaunch 2010

Danke für die Aufmerksamkeit!

www.wien.at/neu

Thomas Jöchler

[email protected]

Twitter: @highlyoverrated