Embed Size (px)
DESCRIPTION
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.
Citation preview
Mobile Firefox Add-ons
Small Screen, Big Ideas
Brian King LinuxTag, 12.6.2010, Berlin
Platforms
* Maemo / Nokia N900
* Android
Questions about other platforms? See:
https://wiki.mozilla.org/Mobile/Platforms
Firefox Mobile 1.1
Form assistant improvements, including autocompleteAuto update add-onsPortrait support on N900Context Menu with Open Link in New Tab and Save ImageManage site preferences (clearing passwords and others)Improved Site MenuSave page to PDF
Firefox Mobile 2.0
MultitouchFirefox SyncSharingSession RestoreElectrolysisOut-of-process PluginsVideo optimizationUI Transitons/Animations
FOCUS
The Good Parts
It's just the same stack you find in FirefoxXULCSS JSXPCOM
Nice guidelines help you make you add-on blend-in
sometimes it's easier to *not* be able to make choices
Mobile Add-ons
Same process as building desktop Firefox add-onsoverlays & manifests JavaScript & XUL
Different application structure
UI is very differentVery sensitive to slow codeDesktop != Mobile
More constraints but also new possibilities
Performance, screen size, keyboard, user's attentionOrientation, GPS, camera, permanence, ...
No Phone Needed!
... to get started. However, *required* for QA.
Desktop builds of Fennec are available:Major releases NightliesBuild your own
A Maemo virtual image for developing and running Maemoapplications
Step Back
If you are porting an existing add-on, ask yourself:
Does your add-on make sense in the mobile context?Performance, performance, performanceHow much does the UI need to change?
Dream up new ideas!
NOTMUCHSPAC
E
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 listsUse the right button CSS classesDon't make overly complicated preferencesChoose good defaults so users don't have to think
Performance
It's easy to slow things down.
Use async operations whenever possibleFile I/O and XHR fetches will be slowInitialization code can hurt startup time Post-pageload code can hurt UX
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/
DEMO TIME!
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/
Resources
Firefox Mobile: http://www.mozilla.com/mobile/UI Guidelines: https://wiki.mozilla.org/Mobile/Fennec/Extensions/UserInterfaceWiki: http://wiki.mozilla.org/MobileMozilla Developer Center for Mobile: https://developer.mozilla.org/En/MobileMobile listing on Mozilla Add-ons: https://addons.mozilla.org/en-US/mobile/
Contact the Mozilla Mobile team#mobile on Mozilla IRCmozilla.dev.platforms.mobile on news.mozilla.org
Thanks!
Get in touch
@brianking
www.briks.si/kontakt
