World Usability Day Future Browsing 12.11.2009
-
Upload
patrick-lauke -
Category
Technology
-
view
544 -
download
0
description
Transcript of World Usability Day Future Browsing 12.11.2009
![Page 1: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/1.jpg)
Future browsing
Patrick H. Lauke / World Usability Day / Duesseldorf / 12 November 2009
CROSS-DEVICE WEB DEVELOPMENT AND ACCESSIBILITY
![Page 2: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/2.jpg)
web evangelist at Opera
![Page 3: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/3.jpg)
Opera – one browser on many devices
![Page 5: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/5.jpg)
“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● …
![Page 6: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/6.jpg)
![Page 7: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/7.jpg)
widgets on desktop, mobile...and on TV
![Page 8: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/8.jpg)
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
![Page 9: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/9.jpg)
“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
![Page 10: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/10.jpg)
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
![Page 11: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/11.jpg)
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)
![Page 12: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/12.jpg)
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
![Page 13: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/13.jpg)
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
![Page 14: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/14.jpg)
CSS 2.1 Media Types:
<link rel="stylesheet" ... media="print, handheld" href="...">@import url("...") print;@media print { // insert CSS rules here}
![Page 15: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/15.jpg)
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/
![Page 16: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/16.jpg)
CSS 3 Media Queries:
@media screen and (max-device-width: 480px) { // insert CSS rules here
}Demonstration of Media Queries
![Page 17: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/17.jpg)
SVG in OBJECT, CSS and IMG element*native inclusion in HTML5?
*only in Opera at the moment
![Page 18: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/18.jpg)
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
![Page 19: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/19.jpg)
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/
![Page 20: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/20.jpg)
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/
![Page 21: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/21.jpg)
Opera labs mobile release with FingerTouch
![Page 22: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/22.jpg)
Opera labs mobile release with FingerTouch
![Page 23: World Usability Day Future Browsing 12.11.2009](https://reader035.fdocuments.us/reader035/viewer/2022070303/5495c19bb47959384d8b4d9f/html5/thumbnails/23.jpg)
call to arms action