Future browsing
CROSS-DEVICE WEB DEVELOPMENT AND ACCESSIBILITY




 Patrick H. Lauke / World Usability Day / Duesseldorf /...
web evangelist at Opera
Opera – one browser on many devices
Mobile web and why it matters
        www.opera.com/smw
“One Web” is an uneven landscape:

● mobile “Full Web” (Android, Opera Mobile, …)
● constrained browsers – WAP, limited


...
widgets on desktop, mobile...and on TV
Device capabilities also vary:

● screen size and resolution
● input mechanism – touch, keypad, other?

● memory and proce...
“One Web means making, as far as is reasonable, the
same information and services available to users
irrespective of the d...
Approaches to cross-device development:

● do nothing – use standards, defensive design
● separate site (m.mysite.com, mys...
Server-side detection of devices:

●   “browser sniffing” the User Agent string
    Opera/9.80 (J2ME/MIDP; Opera Mini/5.0....
Client-side detection of devices:

● “browser sniffing” the User Agent string again
● “capability sniffing” reliant on Jav...
CSS 2.1 Media Types:

● print, screen, handheld, projection, tv, …
● partially supported

● lump all devices into single c...
CSS 2.1 Media Types:

<link rel="stylesheet" ...
media="print, handheld" href="...">

@import url("...") print;

@media pr...
CSS 3 Media Queries:

● build and extend CSS 2.1 Media Types
● more granular control of capabilities

● width, height, ori...
CSS 3 Media Queries:

@media screen and
       (max-device-width: 480px) {

    // insert CSS rules here

}

Demonstration...
SVG in OBJECT, CSS and IMG element*
     native inclusion in HTML5?
          *only in Opera at the moment
CSS 3 Media Queries and SVG:

● SVG already resolution independent
● ideal for device interfaces, maps, graphs, …

● combi...
And beyond that?

● Mobile Web Best Practices
● Mobile Web Applications Best Practices



http://www.w3.org/TR/mobile-bp/
...
Crossover with accessibility:

● accessibility = extreme usability?
● deaf/blind/colourblind/mobility impaired

● Mobile W...
Opera labs mobile release with FingerTouch
Opera labs mobile release with FingerTouch
call to arms action
www.opera.com/developer
   patrick.lauke@opera.com
World Usability Day Future Browsing 12.11.2009
Upcoming SlideShare
Loading in …5
×

World Usability Day Future Browsing 12.11.2009

735 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

World Usability Day Future Browsing 12.11.2009

  1. 1. Future browsing CROSS-DEVICE WEB DEVELOPMENT AND ACCESSIBILITY Patrick H. Lauke / World Usability Day / Duesseldorf / 12 November 2009
  2. 2. web evangelist at Opera
  3. 3. Opera – one browser on many devices
  4. 4. Mobile web and why it matters www.opera.com/smw
  5. 5. “One Web” is an uneven landscape: ● mobile “Full Web” (Android, Opera Mobile, …) ● constrained browsers – WAP, limited standards support, proprietary markup ● proxy-based (Opera Mini, …) ● laptop, Netbook, Tablet PC, Desktop ● games consoles / portables ● set-top boxes, Connected TVs ● …
  6. 6. widgets on desktop, mobile...and on TV
  7. 7. Device capabilities also vary: ● screen size and resolution ● input mechanism – touch, keypad, other? ● memory and processing power ● colour palettes ● native font support ● connection speed / quality
  8. 8. “One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. However, it does not mean that exactly the same information is available in exactly the same representation across all devices.” W3C Mobile Web Best Practices http://www.w3.org/TR/mobile-bp/#OneWeb
  9. 9. Approaches to cross-device development: ● do nothing – use standards, defensive design ● separate site (m.mysite.com, mysite.mobi) ● single site, but optimised for cross-device
  10. 10. Server-side detection of devices: ● “browser sniffing” the User Agent string Opera/9.80 (J2ME/MIDP; Opera Mini/5.0.2056/866; U; en) Presto/2.2 ● when pattern matching can go wrong... ● offer users a way back (example of Orkut)
  11. 11. Client-side detection of devices: ● “browser sniffing” the User Agent string again ● “capability sniffing” reliant on JavaScript ● CSS 2.1 Media Types ● CSS 3 Media Queries
  12. 12. CSS 2.1 Media Types: ● print, screen, handheld, projection, tv, … ● partially supported ● lump all devices into single categories http://www.w3.org/TR/CSS21/media.html
  13. 13. CSS 2.1 Media Types: <link rel="stylesheet" ... media="print, handheld" href="..."> @import url("...") print; @media print { // insert CSS rules here }
  14. 14. CSS 3 Media Queries: ● build and extend CSS 2.1 Media Types ● more granular control of capabilities ● width, height, orientation, color, resolution, … http://www.w3.org/TR/css3-mediaqueries/
  15. 15. CSS 3 Media Queries: @media screen and (max-device-width: 480px) { // insert CSS rules here } Demonstration of Media Queries
  16. 16. SVG in OBJECT, CSS and IMG element* native inclusion in HTML5? *only in Opera at the moment
  17. 17. CSS 3 Media Queries and SVG: ● SVG already resolution independent ● ideal for device interfaces, maps, graphs, … ● combination with CSS 3 Media Queries Demonstration of Media Queries + SVG
  18. 18. And beyond that? ● Mobile Web Best Practices ● Mobile Web Applications Best Practices http://www.w3.org/TR/mobile-bp/ http://www.w3.org/TR/mwabp/
  19. 19. Crossover with accessibility: ● accessibility = extreme usability? ● deaf/blind/colourblind/mobility impaired ● Mobile Web Best Practices vs WCAG 2.0 http://www.w3.org/TR/mwbp-wcag/
  20. 20. Opera labs mobile release with FingerTouch
  21. 21. Opera labs mobile release with FingerTouch
  22. 22. call to arms action
  23. 23. www.opera.com/developer patrick.lauke@opera.com

×