Future browsing

Patrick H. Lauke / World Usability Day / Duesseldorf / 12 November 2009

CROSS-DEVICE WEB DEVELOPMENT AND ACCESSIBILITY

web evangelist at Opera

Opera – one browser on many devices

Mobile web and why it matterswww.opera.com/smw

“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● …

widgets on desktop, mobile...and on TV

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

“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

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

Server-side detection of devices:

● “browser sniffing” the User Agent stringOpera/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)

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

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

CSS 2.1 Media Types:

<link rel="stylesheet" ... media="print, handheld" href="...">@import url("...") print;@media print { // insert CSS rules here}

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/

CSS 3 Media Queries:

@media screen and (max-device-width: 480px) { // insert CSS rules here

}Demonstration of Media Queries

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, …● combination with CSS 3 Media Queries

Demonstration of Media Queries + SVG

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/

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/

Opera labs mobile release with FingerTouch

Opera labs mobile release with FingerTouch

call to arms action

www.opera.com/developerpatrick.lauke@opera.com