Post navigation

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

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)

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.

Hello! We're the teachers here at Treehouse. We produce video courses on everything from web design and web development to iOS and business skills. You can browse our full library of content to find the course that's right for you.

In the meantime, explore the free features, tips, tricks and videos here on our blog. Tell us what you think, we'd love to chat: blog@teamtreehouse.com

Stay Updated

Sign up for our newsletter, and we'll send you news and tutorials
on web design, coding, business, and more! You'll also receive these
great gifts:

checkArt and the Web: Line, Shape, and Form - An eBook by Treehouse Teacher Nick Pettit.

checkOn Freelancing - An audiobook about running your own business by Simon Collison.

Swift is a new programming language created by Apple to program iOS apps. If you are new to programming or to Swift then this course is for you. Learn about programming concepts like: variables, types, collections and control structures.

Ruby is a programming language with a focus on simplicity and productivity, and it's used to create some of the biggest websites in the world. Learn how to work with Ruby and write simple Ruby programs in this introductory course.

Interested in creating Android apps? Learn the Java programming language, a tool for Android development called Android Studio, and some very basic concepts of the Android Software Development Kit, or SDK.

Bring your big idea to life! Learn how to start a company on the right foot with an introduction to basic business concepts, including corporate structure, marketing, finance, and accounting. Then you’re ready for more advanced business strategies.