W&M 2009 – 10 Tips and Tricks for Building Top-Performing Mobile Applications

731 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
731
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Bullet point slide
  • Bullet point slide
  • W&M 2009 – 10 Tips and Tricks for Building Top-Performing Mobile Applications

    1. 1. 10 Tips and Tricks for Building Top-Performing Mobile Applications by Gautam Chandna Bruce Lawson Opera Software ASA
    2. 2. Opera Software ASA http://www.opera.com/
    3. 3. W3C and Opera Widgets <ul><li>Standardized </li></ul><ul><li>Client side Apps </li></ul><ul><li>Device APIs </li></ul><ul><li>Local Storage </li></ul><ul><li>Powerful XHR </li></ul><ul><li>Auto-update </li></ul><ul><li>App Manager </li></ul>
    4. 4. Easy to develop
    5. 6. Device types <ul><li>10 feet device </li></ul><ul><li>Large screen </li></ul><ul><li>Large fonts </li></ul><ul><li>1 App at a time </li></ul><ul><li>Difficult Input </li></ul><ul><li>Only when needed </li></ul><ul><li>Remote </li></ul><ul><li>Medium memory </li></ul><ul><li>1 foot device </li></ul><ul><li>Small screen </li></ul><ul><li>Small fonts </li></ul><ul><li>1 App at a time </li></ul><ul><li>Difficult Input </li></ul><ul><li>Always on </li></ul><ul><li>Direct access </li></ul><ul><li>Very little memory </li></ul><ul><li>3 feet device </li></ul><ul><li>Normal screen </li></ul><ul><li>Normal fonts </li></ul><ul><li>Multiple Apps </li></ul><ul><li>Easy Input </li></ul><ul><li>Always on </li></ul><ul><li>Direct access </li></ul><ul><li>Lots of memory </li></ul>
    6. 7. Device types <ul><li>10 feet device </li></ul><ul><li>Large screen </li></ul><ul><li>Large fonts </li></ul><ul><li>1 App at a time </li></ul><ul><li>Difficult Input </li></ul><ul><li>Only when needed </li></ul><ul><li>Remote </li></ul><ul><li>Medium memory </li></ul><ul><li>1 foot device </li></ul><ul><li>Small screen </li></ul><ul><li>Small fonts </li></ul><ul><li>1 App at a time </li></ul><ul><li>Difficult Input </li></ul><ul><li>Always on </li></ul><ul><li>Direct access </li></ul><ul><li>Very little memory </li></ul><ul><li>3 feet device </li></ul><ul><li>Normal screen </li></ul><ul><li>Normal fonts </li></ul><ul><li>Multiple Apps </li></ul><ul><li>Easy Input </li></ul><ul><li>Always on </li></ul><ul><li>Direct access </li></ul><ul><li>Lots of memory </li></ul>
    7. 8. 1. Things to think about <ul><li>Physical and Virtual Size of the screen (DPI) </li></ul><ul><li>Readability </li></ul><ul><li>Input mechanism </li></ul><ul><li>Memory, CPU and Battery limitations </li></ul><ul><li>Network speed, stability, and recovery </li></ul><ul><li>Usability </li></ul>
    8. 9. 2. Know your target devices <ul><li>High resolution </li></ul><ul><li>Low memory </li></ul><ul><li>Device APIs </li></ul><ul><li>Touchscreen </li></ul><ul><li>Keyboard or Numpad </li></ul><ul><li>Background activity </li></ul>
    9. 10. 3. Work round flaky networks <ul><li>Queue XHR requests, avoid hitting max </li></ul><ul><li>Cache data </li></ul><ul><li>Time out XHRs yourself </li></ul><ul><li>Make sure there's a try again option </li></ul><ul><li>What you see is where you left it – pick up a call so phone killed your app. </li></ul>
    10. 11. 4. Markup for mobiles <ul><li>W3C Best Practices MWABP draft: </li></ul><ul><li>Reduce HTTP requests: CSS sprites, Data URLs for images (with caveats) </li></ul><ul><li>Enable incremental rendering: Place JavaScript tags at the bottom of the page </li></ul><ul><li>Declare image sizes in HTML </li></ul><ul><li>Consider SVG for illustrations, <canvas> for dynamic images </li></ul>
    11. 12. 5. Understand accessibility <ul><li>Lots of similarities with accessibility techniques: Relationship between Mobile Web Best Practices (MWBP) and Web Content Accessibility Guidelines (WCAG) </li></ul><ul><li>No images? </li></ul><ul><li>No fonts/ colours? </li></ul><ul><li>http://www.w3.org/TR/mwbp-wcag/ </li></ul>
    12. 13. 6. CSS for mobiles <ul><li>ems instead of px for fonts </li></ul><ul><li>CSS sprites </li></ul><ul><li>Fluid layouts: remember motion sensors </li></ul><ul><li>Media queries (demo in browser) </li></ul>
    13. 14. 7. A little goes a long way <ul><li>Use a minimum amount of graphics </li></ul><ul><li>Use time-based rather than frame-based animations </li></ul><ul><li>Avoid active, focus, mousedown, and other events that are meaningless or unnecessary on mobile. </li></ul>
    14. 15. 8. Be prepared for HTML 5 <ul><li>Form validation is free </li></ul><ul><li>Client-side persistent storage of key/value pairs and support for embedded SQL databases </li></ul><ul><li>Server-sent events and <event-source> element reduce need for polling in web applications </li></ul><ul><li>Caching mechanism to support off-line web applications. </li></ul>
    15. 16. 9. Opera Widgets SDK <ul><li>documentation </li></ul><ul><li>emulator </li></ul><ul><li>Libraries (animation library etc) </li></ul><ul><li>www.opera.com/b2b/solutions/widgets/ </li></ul>
    16. 17. 10. Opera Dragonfly <ul><li>In a hostile environment, work remotely </li></ul><ul><li>Tools> Advanced > Developer Tools </li></ul>
    17. 18. Opera Software ASA [email_address] twitter.com/brucel Open for questions.

    ×