WebScene 2007 De Montil, Affligem March 14 th , 2007

Bart Van Herreweghe FPS Chancellery of the Prime Minister Directorate General External Communications Online (20 persons) Me (1) PortalTeam (15 to be hired) WebTeam (4)

FPS Chancellery of the Prime Minister

Directorate General External Communications

Online (20 persons)

Me (1)

PortalTeam (15 to be hired)

WebTeam (4)

Cel Online Portal Team: 1 Portal Content Manager 4 Web Content Coordinators 10 Channel Managers Cel online: eClasses (support & training) Webguide (documention)

Portal Team:

1 Portal Content Manager

4 Web Content Coordinators

10 Channel Managers

Cel online:

eClasses (support & training)

Webguide (documention)

Usability, Ergonomie, Look&Feel

Usability, Ergonomie, Look&Feel

Who’s doing what? FPS Chancellery Bart Van Herreweghe, Program Manager Usability Hugo Poliart, Portal Content Manager (a.i.) Netway + Internet Architects + U&I Learning + Duoh! Supplier: Usability Portal project Erik Verdeyen, Program Manager Usability Roel Poffé, Nicolas de Biolley, Marc Van Rymenant, ...

FPS Chancellery

Bart Van Herreweghe, Program Manager Usability

Hugo Poliart, Portal Content Manager (a.i.)

Netway + Internet Architects + U&I Learning + Duoh! Supplier: Usability Portal project

Erik Verdeyen, Program Manager Usability

Roel Poffé, Nicolas de Biolley, Marc Van Rymenant, ...

About this presentation This presentation is about: u7y & a11y (Usability & Accessibility) i18n = internationalization, multi-lingual sites 18 characters

This presentation is about:

u7y & a11y

(Usability & Accessibility)

i18n = internationalization, multi-lingual sites

Belgium.be v2 Challenge : Striking the right balance between: User friendliness Ergonomics Look & feel Accessibility

Challenge :

Striking the right balance between:

User friendliness

Ergonomics

Look & feel

Accessibility

Environment of belgium.be v2

Usability, Ergonomics, Look&Feel Goal

Goal

Accessibility Goal : AnySurfer AnySurfer+ (if possible) (Formerly known as “blind surfer”)

Goal :

AnySurfer

AnySurfer+ (if possible)

(Formerly known as “blind surfer”)

eMethodologie Approach … Source: http://webguide.fgov.be

Templates Templates XHTML accessible, tested (accesibility testing) and validated (norms) Recyclable : portal + other sites Style guide Transfer FEDICT : template set, demo site, functional analysis Transfer of knowledge to the internal designers Anysurfer+

Templates XHTML accessible, tested (accesibility testing) and validated (norms)

Recyclable : portal + other sites

Style guide

Transfer FEDICT : template set, demo site, functional analysis

Transfer of knowledge to the internal designers

Anysurfer+

Operational support Coaching and support on layout and graphical elements Accessibility guidelines (pdf, flash, …) Copywriting : coaching, control & optimalisation level 1 et 2 Functional support (CMS, accessibility, ergonomics)

Coaching and support on layout and graphical elements

Accessibility guidelines (pdf, flash, …)

Copywriting : coaching, control & optimalisation level 1 et 2

Functional support (CMS, accessibility, ergonomics)

Documentation, help and style guide Documentation Help Style guide Content Graphical Functional Standards Sub sites (design patterns, specifications Belgium.be, specifications 4 sub sites)

Documentation

Help

Style guide

Content

Graphical

Functional

Standards

Sub sites (design patterns, specifications Belgium.be, specifications 4 sub sites)

How do you make your site accessible? Correct structural and semantical page buildup Make a clear separation between layout and structure Respect the order of elements Degrade gracefully for browsers without javascript Write understandably, make scannable pages Test for color blindness, use redundant methods (icons, color, text)

Correct structural and semantical page buildup

Make a clear separation between layout and structure

Respect the order of elements

Degrade gracefully for browsers without javascript

Write understandably, make scannable pages

Test for color blindness, use redundant methods (icons, color, text)

Benefits of focusing on a11y Open your site to a larger audience > 10% of the population has reading difficulties, aging population It’s easier for users with little or no prerequisite knowledge and inexperienced surfers Impact on external findability and searchability 34% faster navigation for all users Lower digital divide Extra cost: 5 - 15% for a standard website project

Open your site to a larger audience

> 10% of the population has reading difficulties, aging population

It’s easier for users with little or no prerequisite knowledge and inexperienced surfers

Impact on external findability and searchability

34% faster navigation for all users

Lower digital divide

Extra cost: 5 - 15% for a standard website project

Conclusions Accessibility does not mean unattractive design Accessibility is for a large group of people, not only for visually impaired visitors Part of user friendliness Not rocket science Possible for applications too All users benefit from it

Accessibility does not mean unattractive design

Accessibility is for a large group of people, not only for visually impaired visitors

Part of user friendliness

Not rocket science

Possible for applications too

All users benefit from it

Bart Van Herreweghe (professional) FOD Kanselarij van de Eerste Minister Algemene Directie Externe Communicatie Bart Van Herreweghe Internet Communicatie Expert Wetstraat 16 B-1040 Brussel T. +32 2 287 41 11 F. +32 2 287 41 00 G. +32 476 476 224 E. bart.vanherreweghe@premier.fed.be Web. http://www.belgium.be Web. http://webguide.fgov.be Web. http://webguide.fgov.be/webteam/

FOD Kanselarij van de Eerste Minister

Algemene Directie Externe Communicatie

Bart Van Herreweghe

Internet Communicatie Expert

Wetstraat 16

B-1040 Brussel

T. +32 2 287 41 11

F. +32 2 287 41 00

G. +32 476 476 224

E. bart.vanherreweghe@premier.fed.be

Web. http://www.belgium.be

Web. http://webguide.fgov.be

Web. http://webguide.fgov.be/webteam/

Bart Van Herreweghe (private) E-mail: bart@vanherreweghe.com http://bart.vanherreweghe.com Icq: 6788126 Msn: bvanherreweghe@hotmail.com Yahoo: bvanherreweghe@yahoo.com Aol: brtvanherreweghe@aol.com Aol: bvanherreweghe@aol.com Skype: bvanherreweghe Gizmo Project: bvanherreweghe GTalk: bart.vanherreweghe@gmail.com

E-mail: bart@vanherreweghe.com

http://bart.vanherreweghe.com

Icq: 6788126

Msn: bvanherreweghe@hotmail.com

Yahoo: bvanherreweghe@yahoo.com

Aol: brtvanherreweghe@aol.com

Aol: bvanherreweghe@aol.com

Skype: bvanherreweghe

Gizmo Project: bvanherreweghe

GTalk: bart.vanherreweghe@gmail.com

Thank you for listening (and watching…)