Droidcon 04.11.2009

817 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
817
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Droidcon 04.11.2009

  1. 1. Optimising sites for mobile TIPS FOR MOBILE AND CROSS-DEVICE WEB DEVELOPMENT Patrick H. Lauke / Droidcon / Berlin / 4 November 2009
  2. 2. web evangelist at Opera
  3. 3. Opera – one browser on many devices
  4. 4. 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
  5. 5. Mobile capabilities also vary: ● Screen size ● Input mechanism – touch, keypad, other? ● Memory and processing power ● Colour palettes ● Native font ● Connection speed / quality
  6. 6. 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
  7. 7. 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
  8. 8. Server-side detection of mobile: ● “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)
  9. 9. 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
  10. 10. 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
  11. 11. CSS 2.1 Media Types: <link rel="stylesheet" ... media="print, handheld" href="..."> @import url("...") print; @media print { // insert CSS rules here }
  12. 12. 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/
  13. 13. CSS 3 Media Queries: @media screen and (max-device-width: 480px) { // insert CSS rules here } Demonstration of Media Queries
  14. 14. 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
  15. 15. SVG in OBJECT, CSS and IMG element* native inclusion in HTML5? *only in Opera at the moment
  16. 16. 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/
  17. 17. 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/
  18. 18. call to arms action
  19. 19. www.opera.com/developer patrick.lauke@opera.com

×