Firefox Mobile Add-ons - LinuxTag 2010

2,087 views

Published on

It might be obvious to say this, but Firefox Mobile add-ons are much different beasts than their desktop counterparts. All the goodness of the Mozilla Platform is there and available to use, but the UI is completely different. Less hooks are available simply because there is less space, but the design and UI flow provide different challenges.

For authors porting existing add-ons, I want to challenge you to really think whether you should do it. Ask yourself, does it make sense in this context? Does it fit into the browsing habits of users of smaller devices, which is different than desktop usage? For example, users on the go want more information suggested to them as opposed to hunting for it which can be cumbersome. Without being discouraging, my goal is to give inspiration for new ideas. Some of the best add-ons will be ones built from the ground up that take advantage of device capabilities such as GPS and voice.

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

  • Be the first to like this

No Downloads
Views
Total views
2,087
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Firefox Mobile Add-ons - LinuxTag 2010

  1. 1. Mobile Firefox Add-ons Small Screen, Big Ideas Brian King LinuxTag, 12.6.2010, Berlin
  2. 2. Picture by djwudi on Flickr
  3. 3. Platforms * Maemo / Nokia N900 * Android Questions about other platforms? See: https://wiki.mozilla.org/Mobile/Platforms
  4. 4. Firefox Mobile 1.1 Form assistant improvements, including autocomplete Auto update add-ons Portrait support on N900 Context Menu with Open Link in New Tab and Save Image Manage site preferences (clearing passwords and others) Improved Site Menu Save page to PDF
  5. 5. Firefox Mobile 2.0 Multitouch Firefox Sync Sharing Session Restore Electrolysis Out-of-process Plugins Video optimization UI Transitons/Animations
  6. 6. FOCU S
  7. 7. Picture by Nukeador
  8. 8. The Good Parts It's just the same stack you find in Firefox XUL CSS JS XPCOM Nice guidelines help you make you add-on blend-in sometimes it's easier to *not* be able to make choices
  9. 9. Mobile Add-ons Same process as building desktop Firefox add-ons overlays & manifests JavaScript & XUL Different application structure UI is very different Very sensitive to slow code Desktop != Mobile More constraints but also new possibilities Performance, screen size, keyboard, user's attention Orientation, GPS, camera, permanence, ...
  10. 10. No Phone Needed! ... to get started. However, *required* for QA. Desktop builds of Fennec are available: Major releases Nightlies Build your own A Maemo virtual image for developing and running Maemo applications
  11. 11. Step Back If you are porting an existing add-on, ask yourself: Does your add-on make sense in the mobile context? Performance, performance, performance How much does the UI need to change? Dream up new ideas!
  12. 12. Picture by Madhava Enros on Flickr
  13. 13. NOT MUCH SPAC
  14. 14. UI Tips Firefox Mobile has several ways to help make a touch-friendly UI: Make simple lists using <richlistbox> Use the existing CSS classes Use .show-on-select behaviors to expand/collapse items in lists Use the right button CSS classes Don't make overly complicated preferences Choose good defaults so users don't have to think
  15. 15. Performance It's easy to slow things down. Use async operations whenever possible File I/O and XHR fetches will be slow Initialization code can hurt startup time Post-pageload code can hurt UX
  16. 16. Services and Sync Firefox Sync (formerly Weave deployed as an add-on). Will eventually be "built-in". Look for more add-ons built around services. https://services.mozilla.com/
  17. 17. DEMO TIME!
  18. 18. Jetpack on Mobile The original Jetpack prototype had a rough port to Fennec. The new SDK will be built in to Firefox and many of the APIs should work out-of-the-box. Designed to be application agnostic. Follow the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=534900 More on Jetpack: https://jetpack.mozillalabs.com/
  19. 19. Resources Firefox Mobile: http://www.mozilla.com/mobile/ UI Guidelines: https://wiki.mozilla. org/Mobile/Fennec/Extensions/UserInterface Wiki: http://wiki.mozilla.org/Mobile Mozilla Developer Center for Mobile: https://developer. mozilla.org/En/Mobile Mobile listing on Mozilla Add-ons: https://addons.mozilla. org/en-US/mobile/ Contact the Mozilla Mobile team #mobile on Mozilla IRC mozilla.dev.platforms.mobile on news.mozilla.org
  20. 20. Thanks! Get in touch @brianking www.briks.si/kontakt

×