It’s not often Bath, the home of Carsonified, hosts full day tech events. However I was recently lucky enough to attend openMIC right here on my doorstep.
“Open Mobile Innovation Camp” is organised by Chris Book and takes place around the UK. It describes itself as “an un-conference for discussion, debate and development new mobile applications and mobile web services”. You can find out more on their Ning site.
As part of the morning sessions Bruce Lawson from Opera gave a great presentation entitled “Tips and tricks for mobile widgets”. Whilst part of the talk was directly related to mobile widgets much of it can be related to best practice web development.
What’s a Widget?
To create a widget you ZIP up your project files and rename it with an extension of .wgt. They differ slightly from traditional “web apps” in as much as they offer access to the local device file system and can auto-update.
Here’s a summary of Bruce’s key points, for some this may be new, for others I am sure it will serve as a good reminder.
Things to consider when creating the widget
- The physical and virtual size of the screen – How will your interface work, where will the key elements be, how will users navigate around the screen
- Readability – Make it clear and readable and get your message across
- Input mechanism – Make it easy for users to interact with your widget
- Memory, CPU and Battery limitations – Look at ways to limit their usage
- Network speed – Don’t rely on speedy networks
Work round flaky networks
- Queue XHR (XMLHttpRequest) requests – This will reduce the initial load on the network connection
- Cache data – Don’t keep polling for the same data
- Ensure try again options - What happens if you loose signal, plan for this
- Pick up where you left off - Ensure that your widget resumes where it left off after a phone call
Minimise HTTP requests
- Use CSS Sprites – Reduce the number of image requests by using one file for all your images (See http://css-tricks.com/css-sprites/)
- Consider using data URLs – These allow you to use a URL to represent an image as opposed to a file resulting in one less file request across the network as the image will effectively be present in your HTML. (See http://software.hixie.ch/utilities/cgi/data/data)
- Don’t use TABLE layout – Extra overhead that isn’t necessary
- Declare image sizes in HTML – Use height and width attributes on images. This will reduce pages being redrawn once an image is downloaded, resulting in a better user experience and less work for your mobile device’s CPU.
- Consider using SVG (Scalable Vector Graphics) for illustrations or <canvas> for dynamic images - These send data as mathematical info which tells the browser how to draw it. It’s also scalable and doesn’t pixelate.
There are many similarities between understanding accessibility on the web and mobile devices. Bruce recommends reading “Relationship between Mobile Web Best Practices (MWBP) and Web Content Accessibility Guidelines (WCAG)”
- No images – What happens to your widget with images off?
- No fonts/colours - What if the device doesn’t support your preferred font or colour?
- Contrast – Ensure that it’s readable for visually impaired users
CSS for mobile devices
- Use ems not px for fonts – This is better for scalability
- Use CSS sprites – See above
- Fluid layouts – This will enable your widget to work on different resolutions
- Use media queries - These will allow you to serve different CSS files dependent on the screen size of the device
- Use SVG for background images – Declaring “width: 100%; height: auto;” will allow your image to scale regardless
- Sniff out the device info – Like media queries this will enable you to serve a different user experience dependent on the device
Be prepared for HTML5
- Client side persistent storage of key/value pairs and support for embedded SQL databases - This will reduce the need to make requests over the network
- Server sent events – The <event-source> element reduce need for polling in web apps. It will allow the receiving of push notifications from a server in the form of DOM events
Opera widgets SDK
- Documentation – Extensive documentation provided by Opera
- Test – Use the emulator to test your widget
- Opera Libraries – Lightweight libraries for animation etc
- Explore the SDK - http://dev.opera.com/sdk
- Debug your widget – Opera provide a free debugging tool called Dragonfly
Test your Widget
- Test your widget on real devices – http://perfectomobile.com/portal/cms/opera.xhtml?key=OP631R89YL2
If you have developed a widget or have something to add please let us know in the comments.
View the Slides