? Innovatie & toegankelijkheid Ferry den Dopper @ferrydendopper
Responsive Design
Responsive design is 80% stylesheets .container { margin: 0 auto; width: 960px; }
.container { margin: 0 auto; width: 60em; }
.main { float: left; width: 620px; margin-right: 20px; }
.main { float: left; width: 64.5%; margin-right: 2%; }
.sidebar { float: left; width: 320px; }
.sidebar { float: left; width: 33.3333333%; } @media all and (min-width: 50em) { /* hier stijlen voor hoge resolutie }
Dit is niet het Web
Web
Web
Web
Web
Web
Web
Web
Web
Web
Web Web
Web
Web
Web Web
Huidige trends… • • • • •
Responsive Design Parallax scrolling Social Login (bv. Facebook Connect) Web en icon fonts, HTML5, stylesheets ipv plaatjes …
Zijn alle nieuwe ontwikkelingen een innovatie?
Gartner hype curve
Gartner hype curve 3D printen Parallax Scrolling Internet of Things
App stores Spraakherkenning
Quantum computing
Virtuele werelden
Web 2.0 User User Generated Generated Content Content // Social Social Media Media
Herbruikbare Herbruikbare content content (o.a. (o.a. feeds) feeds)
Open Open Data Data // Web Web Services Services
Rijke Rijke interactie interactie
User User Generated Generated Content Content // Social Social Media Media
Herbruikbare Herbruikbare content content (o.a. (o.a. feeds) feeds)
Open Open Data Data // Web Web Services Services
Rijke Rijke interactie interactie
User User Generated Generated Content Content // Social Social Media Media
Herbruikbare Herbruikbare content content (o.a. (o.a. feeds) feeds)
Open Open Data Data // Web Web Services Services
Rijke Rijke interactie interactie
User User Generated Generated Content Content // Social Social Media Media
Herbruikbare Herbruikbare content content (o.a. (o.a. feeds) feeds)
Open Open Data Data // Web Web Services Services
Rijke Rijke interactie interactie
User User Generated Generated Content Content // Social Social Media Media
Herbruikbare Herbruikbare content content (o.a. (o.a. feeds) feeds)
Open Open Data Data // Web Web Services Services
Rijke Rijke interactie interactie
Wat is de essentie?
Nieuwste projecten: • Motoren op elektriciteit • Dansvloer wekt energie op • Modern living • De toekomst van de trein
Mobile
“Ik heb een voorkeur voor mobiele sites. Die zijn vaak compacter en dus makkelijker te navigeren.”
✘
Maar… Het mobiele web is helemaal nog niet zo toegankelijk!
Sommige organisaties doen er (schijnbaar) nog niets mee…
Andere organisaties blokkeren de content…
80 % van branded apps haalt de 1000 downloads niet
…of dwingen je naar hun app
Top ‘onderweg’ taken
Link naar volledige site Anderen maken een losse mobiele site (de “lite” versie)
Bouw een aparte mobiele site Schrap features en content die niet passen in de mobiele context Auto-redirect zoekopdrachten naar je mobiele site Stuur gebruikers die meer info willen naar de desktop site
De mobiele context
Onderweg
Micro-taken
Multi-tasking
“Niemand zal onze energietarieven ooit op zijn mobiel willen bekijken.”
“Het is volstrekt niet logisch dat gebruikers dat allemaal gaan lezen op hun mobiel.”
“Mensen kunnen dit complexe formulier toch veel beter invullen op hun pc?”
De mobiele context
Onderweg
Micro-taken
Multi-tasking
De mobiele context
Onderweg
✘
Micro-taken
Multi-tasking
31% van alle mensen met mobiel internet benadert het web primair via mobiel
http://pewinternet.org/Reports/2012/Cell-Internet-Use-2012/Key-Findings.aspx
45% van 18-29 jarigen met mobiel internet benadert het web primair via mobiel.
http://pewinternet.org/Reports/2012/Cell-Internet-Use-2012/Key-Findings.aspx
60% van mensen met een inkomen onder $25.000 heeft geen pc, maar vaak wel een smartphone met internet.
http://pewinternet.org/Reports/2012/Cell-Internet-Use-2012/Key-Findings.aspx
“If your information is not available on small screen, it doesn’t exist for all the people that rely on their mobile phones for access.”
Pew Research
86% van de mensen gebruikt mobiel internet tijdens het televisiekijken.
http://pewinternet.org/Reports/2012/Cell-Internet-Use-2012/Key-Findings.aspx
39% zegt te internetten op de wc. (dus 60% liegt)
http://pewinternet.org/Reports/2012/Cell-Internet-Use-2012/Key-Findings.aspx
90% start een taak op het ene apparaat en voltooit het op een ander apparaat.
http://pewinternet.org/Reports/2012/Cell-Internet-Use-2012/Key-Findings.aspx
Mensen kopen diamanten via mobiel
Mensen vullen complexe formulieren in
“Denk niet dat jij kunt raden welk deel van jouw content een mobiele gebruiker wil. Je zult verkeerd gokken.”
Karen McGrane
Contentpariteit
=
=
“Als een gebruiker bij een webpagina kan komen op een desktop pc, moet hij dezelfde pagina op dezelfde URL kunnen bereiken op zijn mobiel.”
Brad Frost
Responsive Design
Demo Responsive Design
Wat gebeurt er bij het schalen? • Content verschuift, bv. onder elkaar. • Content verkleint, bv. afbeeldingen. • Content wordt verborgen, bv. door alinea’s in te
vouwen en de kop klikbaar te maken. • Content kan een andere prioriteit krijgen. Maar niet: • Content weglaten
Adaptieve Systemen
Adaptieve systemen luisteren naar de omgeving en leren de gedragspatronen van de gebruiker.
Tijd
Plaat s
ZZooeek k hhiisstto orrii ee
G Geeddra ragg sspa patr troonnee nn B Biig g da
G Gee lluui idd
et-In rnet tern Inte in ve inddin rbin verb gg
t h c i L
dattaa:: bbvv.. w weeeer,r, vveerrkkeeeerr
A Ag geen nd d aa
Adaptieve systemen luisteren naar de omgeving en leren de gedragspatronen van de gebruiker.
Tijd
Plaat s
begrijpen niet alleen de gebruikscontext, maar anticiperen ZZooeek k h h i issttoorri wat de gebruiker wil op specifieke i ee G Gee momenten. lluu
A Ag geen nd d aa
iidd
geven ‘just in time’ antwoord voordat je de vraag kunt typen et-In rnet tern Inte in ve inddin rbin verb gg
V Veerrkkeeeerr
t h c i L
G Ged edra raggss -pa patr troone ne nn
Google Now
Wat betekent dit voor toegankelijkheid? • Content niet per se via eigen sites
/ apps, maar (ook) als webservice • Minder invoer = goed • Spraakherkenning en spraaksynthese (bv. Siri) • Net als huidige ‘mobiele sites’ compact contentaanbod, alleen gefilterd door context in plaats van device.
“The most profound technologies are those that disappear. They weave themselves into the fabric of everyday life until they are indistinguishable from it.”
Mark Weiser http://en.wikipedia.org/wiki/Mark_Weiser
“Consumers are making the mobile device the central navigation system of their lives.” “…the coming year will be when the mobile world links the digital world to the physical world.” ebay
Innovatie en toegankelijkheid • Verschuiving naar mobile en internet of things • Dezelfde content op ieder device (responsive) • Relevante content op het juiste moment (adaptive) • Van eigen website naar contentprovider • WCAG2 ondersteunt nieuwe technologieën
Ferry den Dopper @ferrydendopper
