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