Droidcon 04.11.2009

19
Optimising sites for mobile Patrick H. Lauke / Droidcon / Berlin / 4 November 2009 TIPS FOR MOBILE AND CROSS-DEVICE WEB DEVELOPMENT

description

 

Transcript of Droidcon 04.11.2009

Page 1: Droidcon 04.11.2009

Optimising sites for mobile

Patrick H. Lauke / Droidcon / Berlin / 4 November 2009

TIPS FOR MOBILE AND CROSS-DEVICE WEB DEVELOPMENT

Page 2: Droidcon 04.11.2009

web evangelist at Opera

Page 3: Droidcon 04.11.2009

Opera – one browser on many devices

Page 4: Droidcon 04.11.2009

Mobile web is an uneven landscape:

● Full Web (Android Browser, Opera Mobile, …)● Constrained browsers – WAP, limited standards support, proprietary markup● Proxy-based (Opera Mini, …)● Games consoles / portables

Page 5: Droidcon 04.11.2009

Mobile capabilities also vary:

● Screen size● Input mechanism – touch, keypad, other?● Memory and processing power● Colour palettes● Native font● Connection speed / quality

Page 6: Droidcon 04.11.2009

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 7: Droidcon 04.11.2009

Approaches to mobile web development:

● Do nothing – use standards, defensive design● Separate site (m.mysite.com, mysite.mobi)● Single site, but optimised for cross-device

Page 8: Droidcon 04.11.2009

Server-side detection of mobile:

● “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 9: Droidcon 04.11.2009

Client-side detection of mobile:

● “Browser sniffing” the User Agent string again● “Capability sniffing” reliant on JavaScript● CSS 2.1 Media Types● CSS 3 Media Queries

Page 10: Droidcon 04.11.2009

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 11: Droidcon 04.11.2009

CSS 2.1 Media Types:

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

Page 12: Droidcon 04.11.2009

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 13: Droidcon 04.11.2009

CSS 3 Media Queries:

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

}Demonstration of Media Queries

Page 14: Droidcon 04.11.2009

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 15: Droidcon 04.11.2009

SVG in OBJECT, CSS and IMG element*native inclusion in HTML5?

*only in Opera at the moment

Page 16: Droidcon 04.11.2009

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 17: Droidcon 04.11.2009

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 18: Droidcon 04.11.2009

call to arms action