Tips and Tricks for developing Mobile Widgets

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?

Firstly let’s be clear on what a Mobile Widget actually is. As Bruce explained we can think of Mobile Widgets as “client side apps”. They are created using standard web technologies such as HTML, JavaScript and CSS.

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

Markup

  • Place JavaScript source and file references at bottom of you page – This will mean that the bulk of the page will load before your JS files, users will be able to start reading the page straightaway
  • 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.

Understand accessibility

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

  • Form validation is free – No further need for complicated validation JavaScript
  • 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

Test your Widget

Thoughts?

If you have developed a widget or have something to add please let us know in the comments.

View the Slides

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

0 comments on “Tips and Tricks for developing Mobile Widgets