[email_address] , http://dev.opera.com www.brucelawson.co.uk  twitter.com/brucel
Practical Tips and Tricks for Mobile Widget Development Bruce Lawson Opera Software
W3C and Opera Widgets <ul><li>Standardized
Client side Apps
File I/O
Powerful XHR
App Manager </li></ul>http://www.w3.org/TR/widgets/
Easy to develop
Easy to deploy
Consider the device <ul><li>Physical and Virtual Size of the screen (DPI)
Input mechanism
Memory, CPU and Battery limitations
Network speed, stability, and recovery
Usability </li></ul>
Work round flaky networks <ul><li>Queue XHR requests, avoid hitting max
Cache data
Upcoming SlideShare
Loading in …5

Practical Tips for Mobile Widget development


Published on

A talk on 11 February 2010 at OpenMIC Bath on developing mobile phone and cross-device applications with HTML, CSS, JavaScript, SVG and W3C widgets,

Also general advice on designing "mobile-friendly" web sites.

(Note: I deleted some of the "eye-candy" graphics to reduce the file size to the 1Meg upload limit)

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Bullet point slide
  • Bullet point slide
  • Practical Tips for Mobile Widget development

    1. 1. [email_address] , http://dev.opera.com www.brucelawson.co.uk twitter.com/brucel
    2. 2. Practical Tips and Tricks for Mobile Widget Development Bruce Lawson Opera Software
    3. 4. W3C and Opera Widgets <ul><li>Standardized
    4. 5. Client side Apps
    5. 6. File I/O
    6. 7. Powerful XHR
    7. 8. Auto-update
    8. 9. App Manager </li></ul>http://www.w3.org/TR/widgets/
    9. 10. Easy to develop
    10. 11. Easy to deploy
    11. 12. Consider the device <ul><li>Physical and Virtual Size of the screen (DPI)
    12. 13. Readability
    13. 14. Input mechanism
    14. 15. Memory, CPU and Battery limitations
    15. 16. Network speed, stability, and recovery
    16. 17. Usability </li></ul>
    17. 18. Work round flaky networks <ul><li>Queue XHR requests, avoid hitting max
    18. 19. Cache data
    19. 20. Time out XHRs yourself
    20. 21. Make sure there's a try again option
    21. 22. What you see is where you left it – pick up a call and phone killed your app. </li></ul>
    22. 23. Minimise HTTP Requests CSS sprites #panel1b a:hover { background: transparent url(test-3.jpg) 0 -200px no-repeat;} #panel2b a:hover { background: transparent url(test-3.jpg) -96px -200px no-repeat;} www.alistapart.com/articles/sprites/
    23. 24. Data URLs data:image/x-icon,%00%00%01%00%02%00%10%10%00%00%00%00%00%00h%05%00%00%26%00%00%00%20%20%00%00%00%00%00%00%A8%08%00%00% 8%05%00%00(%00%00%00%10%00%00%00%20%00%00%00%01%00%08%00%00%00%00%00%40%01%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%FF%FF%FF%00u%7D%8C%00%B1%BF%CF%00%3D%3FG%00%D0%DF%F3%00%9E%9F%A1%00%1A%1E%26%00Z%60g%00%D6%D8%D1%00%EC%EC%EB%00%B2%B2%AD%00%88%8D%9E%00rpt%00KNZ%00%2C.%3E%00%C2%C2%BC%00%C6%C9%D8%00%06%09%14%00%A9%AD%C1%00%9A%9E%B6%00%86%88%87%00%7C%80z%00%CF%D4%E3%00%CB%CE%C7%00%E2%E2%E1%00%11%14%1C%00%E3%E8%F8%00dht%00(.%2F%00%A5%AB%B0%00%F6%F7%F6%00TTd%00ov%80%00%91%93%96%00%B1%B6%C4%00%00%02%0C%00%8C%98%A1%00%C3%C4%CE%00%BB%BE%D4%00%7F%81%8D%00lkm%00%D5%DA%E9%00%A6%A6%A7%00AHJ%00TVZ%00%96%97%A0%007%3B%40%00%89%8E%93%00%DC%DC%DC%00ip%7B%00%C6%C6%C5%00%FC%FF%F6%0015%3A%00%DE%E3%F2%00%85%87%97%00wt%7D%00%5BV_%00xy%85%00%B7%BE%C9%0079H%00%A5%A9%BB%00acj%00%CA%CF%DF%00%B5%B8%CF%00%CC%D3%EA%00%9E%A8%B1%00jmt%00%BF%C7%D9%00%E9%E8%E6%00%85%89%90%00%8B%92%9A%00%7Bz%7D%00%D6%DF%F6%00y%81%90%00(*4%00%CC%CC%CD%00%5B%5Bc%00%BF%C4%D3%00%BE%BF%C0%00%F6%F5%F0%00chm%00%AB%B2%BE%00qr%7C%00%D4%D7%EE%00%C3%CA%D3%00%BA%BF%CE%00%9E%A3%B4%00%8C%93%A4%00tt%82%00V%5Cg%00BCL%00%00%00%07%00%F0%EF%ED%00%3BCJ%00GLW%00%D4%D4%D4%00%B4%BD http://software.hixie.ch/utilities/cgi/data/data
    24. 25. Markup for mobiles W3C Best Practices MWABP draft: <ul><li>Enable incremental rendering: Place JavaScript tags at the bottom of the page
    25. 26. Don't use layout <table>s
    26. 27. Declare image sizes in HTML
    27. 28. Consider SVG for illustrations, <canvas> for dynamic images </li></ul>
    28. 29. Understand accessibility <ul><li>Lots of similarities with accessibility techniques: Relationship between Mobile Web Best Practices (MWBP) and Web Content Accessibility Guidelines (WCAG)
    29. 30. No images?
    30. 31. No fonts/ colours?
    31. 32. contrast </li></ul>http://www.w3.org/TR/mwbp-wcag/
    32. 33. CSS for mobiles <ul><li>ems instead of px for fonts
    33. 34. CSS sprites
    34. 35. Fluid layouts: remember motion sensors
    35. 36. Media queries for different screen sizes
    36. 37. background-size / SVG background images </li></ul>
    37. 38. A little goes a long way <ul><li>Use a minimum amount of graphics
    38. 39. Avoid active, focus, mousedown, and other events that are meaningless or unnecessary on mobile. </li></ul>
    39. 40. Be prepared for HTML5 <ul><li>Form validation is free
    40. 41. Client-side persistent storage of key/value pairs and support for embedded SQL databases
    41. 42. Server-sent events and <event-source> element reduce need for polling in web applications </li></ul>
    42. 43. Opera Widgets SDK <ul><li>documentation
    43. 44. emulator
    44. 45. Libraries (animation library etc) </li></ul>http://dev.opera.com/sdk/
    45. 46. Opera Dragonfly In a hostile environment, work remotely Right click > Inspect Element
    46. 47. Test with “OMOD” Opera Mobile on Desktop (coming soon) http://www.perfectomobile.com/portal/cms/opera.xhtml?key=OP631R89YL2
    47. 48. Opera Software ASA [email_address] twitter.com/brucel Open for questions.