Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Have you got the X Factor?  Building websites for mobile and disabled users Henny Swan Opera Software
The X Factor <ul><ul><li>X Platform </li></ul></ul><ul><ul><li>X Widgets </li></ul></ul><ul><ul><li>X over of experiences ...
WCAG meets MWBP <ul><li>Web Content Accessibility Guidelines (WCAG)  </li></ul><ul><ul><li>Produced by Web Accessibility I...
See  Relationship between WCAG and MWBP
Not my customers... <ul><li>“ Disabled people aren't my target market” </li></ul><ul><li>“ Blind people aren't intrested i...
Do you really know your users?
Mobile users <ul><li>40% of mobile traffic to social networks </li></ul><ul><li>Niche sites </li></ul><ul><li>3bn phones w...
 
Diverse users <ul><li>Disabled users: </li></ul><ul><ul><li>Sight, hearing, cognition and mobility </li></ul></ul><ul><li>...
The XXX Factor
Soundsdirty.com <ul><li>image here </li></ul>
Sounds Dirty, codes clean <ul><li>Alt text, LONGDESC and inline descriptions </li></ul><ul><li>Navigation aids </li></ul><...
www.thisislondon.com <ul><li>Web accessibility tested using Jaws 8 with Internet Explorer 7 </li></ul><ul><li>Mobile teste...
Repeated links on a desktop Visual Audio
Repeated links on a mobile <ul><li>Increased scrolling </li></ul><ul><li>Long links wrap </li></ul><ul><li>CAPITALISATION ...
Solutions <ul><li>www.BBC.com   mobile view: </li></ul><ul><li>Skip links </li></ul><ul><li>Low graphic links </li></ul><u...
A word about widgets
Widgets <ul><li>Single purpose web apps </li></ul><ul><li>Separate from browser </li></ul><ul><li>Available on desktop, mo...
Opera Widget contest: $10K prizes  My wish list...make them accessible, try using WAI ARIA
Testing
Debugging with Opera Dragonfly  <ul><li>Debugging is important, remote debugging is hard, an emulator is not the same: </l...
One web
One web <ul><li>x platform = one web </li></ul><ul><li>Web standards the framework of one web </li></ul><ul><ul><li>Web st...
And finally
Never under estimate your user Ouch!  Mobile Facebook on your desktop
Thank yo u I am  iheni  on  Twitter ,   Flickr ,  Slideshare  and my blog  www.iheni.com
Upcoming SlideShare
Loading in …5
×

Have you got the X Factor? Building accessible and mobile websites

2,712 views

Published on

A walk through who your diverse and mobile users are and what they are viewing online and via mobiles, cross over of guidelines, issues and examples.

Published in: Technology, Design
  • Be the first to comment

Have you got the X Factor? Building accessible and mobile websites

  1. Have you got the X Factor? Building websites for mobile and disabled users Henny Swan Opera Software
  2. The X Factor <ul><ul><li>X Platform </li></ul></ul><ul><ul><li>X Widgets </li></ul></ul><ul><ul><li>X over of experiences </li></ul></ul><ul><ul><li>X over of users </li></ul></ul><ul><ul><li>X over of guidelines </li></ul></ul><ul><ul><li>See Barriers to mobile users and people with disabilities </li></ul></ul>
  3. WCAG meets MWBP <ul><li>Web Content Accessibility Guidelines (WCAG) </li></ul><ul><ul><li>Produced by Web Accessibility Initiative </li></ul></ul><ul><ul><li>Versions 1.0 and 2.0 </li></ul></ul><ul><ul><li>Levels Single-A, Double-A and Triple-A </li></ul></ul><ul><li>Mobile Web Best Practices (MWBP) </li></ul><ul><ul><li>Produced by Mobile Web Initiative </li></ul></ul><ul><ul><li>No priorities </li></ul></ul><ul><li>X over but not a direct mapping </li></ul>
  4. See Relationship between WCAG and MWBP
  5. Not my customers... <ul><li>“ Disabled people aren't my target market” </li></ul><ul><li>“ Blind people aren't intrested in cars” </li></ul><ul><li>“ My site's too niche for mobile users” </li></ul><ul><li>“ No one writes a shopping list on their mobile...” </li></ul>
  6. Do you really know your users?
  7. Mobile users <ul><li>40% of mobile traffic to social networks </li></ul><ul><li>Niche sites </li></ul><ul><li>3bn phones worldwide </li></ul><ul><li>In China 73m people (29% of all internet users) use only phones </li></ul><ul><li>... grew by 45% in the six months to June </li></ul><ul><li>Check out Opera's State of the Mobile Web Reports </li></ul>
  8.  
  9. Diverse users <ul><li>Disabled users: </li></ul><ul><ul><li>Sight, hearing, cognition and mobility </li></ul></ul><ul><li>Aging and baby boomers </li></ul><ul><ul><li>Increasing (EU 20%, 2010, 64+)‏ </li></ul></ul><ul><ul><li>high expectations </li></ul></ul><ul><ul><li>multiple impairments </li></ul></ul><ul><ul><li>wealthy </li></ul></ul><ul><li>International users </li></ul><ul><li>Mobile to desktop users </li></ul><ul><li>Check out How people with disabilities use the web </li></ul>
  10. The XXX Factor
  11. Soundsdirty.com <ul><li>image here </li></ul>
  12. Sounds Dirty, codes clean <ul><li>Alt text, LONGDESC and inline descriptions </li></ul><ul><li>Navigation aids </li></ul><ul><li>Headings </li></ul><ul><li>Link text </li></ul><ul><li>CSS </li></ul><ul><li>Access keys </li></ul><ul><li>Alternative formats for XXX Movies </li></ul>
  13. www.thisislondon.com <ul><li>Web accessibility tested using Jaws 8 with Internet Explorer 7 </li></ul><ul><li>Mobile tested using: </li></ul><ul><ul><li>walled garden thing </li></ul></ul><ul><ul><li>Opera Opera Mini Mobile Emulator </li></ul></ul><ul><li>Shared issues </li></ul><ul><ul><li>Repeated links </li></ul></ul><ul><ul><li>Skip links </li></ul></ul><ul><ul><li>Overuse of images </li></ul></ul>
  14. Repeated links on a desktop Visual Audio
  15. Repeated links on a mobile <ul><li>Increased scrolling </li></ul><ul><li>Long links wrap </li></ul><ul><li>CAPITALISATION </li></ul><ul><li>Cost </li></ul><ul><li>Download speeds </li></ul>
  16. Solutions <ul><li>www.BBC.com mobile view: </li></ul><ul><li>Skip links </li></ul><ul><li>Low graphic links </li></ul><ul><li>Access keys </li></ul><ul><li>Help links </li></ul><ul><li>CSS based layout </li></ul>
  17. A word about widgets
  18. Widgets <ul><li>Single purpose web apps </li></ul><ul><li>Separate from browser </li></ul><ul><li>Available on desktop, mobile or TV </li></ul><ul><li>Standards compliant </li></ul><ul><li>W3C Widgets 1.0 </li></ul><ul><li>Disabled mobile users want widgets too: directions, shopping lists, Twitter you name it... </li></ul>
  19. Opera Widget contest: $10K prizes My wish list...make them accessible, try using WAI ARIA
  20. Testing
  21. Debugging with Opera Dragonfly <ul><li>Debugging is important, remote debugging is hard, an emulator is not the same: </li></ul><ul><ul><li>DOM inspection </li></ul></ul><ul><ul><li>CSS inspection </li></ul></ul><ul><ul><li>Error console </li></ul></ul><ul><ul><li>See updates on the fly </li></ul></ul><ul><li>Debugs </li></ul><ul><ul><li>Pages, mobile and widgets </li></ul></ul><ul><li>Try it on Opera 9.5+, Tools -> Advanced -> Developer Tools </li></ul>
  22. One web
  23. One web <ul><li>x platform = one web </li></ul><ul><li>Web standards the framework of one web </li></ul><ul><ul><li>Web standards support developers </li></ul></ul><ul><ul><li>Web standards support site owners </li></ul></ul><ul><ul><li>Web standards support diverse users </li></ul></ul>
  24. And finally
  25. Never under estimate your user Ouch! Mobile Facebook on your desktop
  26. Thank yo u I am iheni on Twitter , Flickr , Slideshare and my blog www.iheni.com

×