Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Revision as of 06:09, 16 May 2009 by kalki (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Guide To Designing Mobile Widget

From Wiki
Jump to: navigation, search



This guide can assist you in delivering the most personal and targeted mobile Internet experiences to customers.


Use valid HTML, XML, and CSS markup.Follow the w3c's recent standards.

Use the AJAX-XMLHttpRequest extension to handle large binary files and make asynchronous request to get the data without user knowledge or refreshing the whole screen again and again.

Cache data that is frequently reused by storing it in the file system or setting user preferences.

Do not use global JavaScript variables.Always use local variable and modularize javascript files to their corresponding function in the widget.

Transmit confidential information (such as login credentials) over HTTPS using encryption.


Keep the widget simple. Design it to perform one main function. Widget given in this Article Performs only Search Function on the web.

Choose functionality and content that is useful for people on the go.See the Given " MaxSearch" Widget Example that facilitate them to search the web from world's most popular search engines on the Go.

Use the capabilities of the device to enhance the user experience.Try making user interface simple and intutive.

Engage users in your widget in such a way it they enjoy using it.


Make sure the content is fresh and engaging. Update it frequently.

Use a short, descriptive page title for screens.See Engine Example Below.

Display content so that it is easy to read on the device. Use readable font sizes and scroll bars.

Compress images make file sizes smaller.

Make sure text is readable against background images or otherwise avoid putting background image because it takes lot of time to load.


Make sure your widget loads quickly in the widget.

Make sure the widget makes smooth, fast switching between screens.

Make sure the widget handles interrupts such as the user receiving a call or email smoothly.


Separate data and functionality from views.Use Mode-View-Controller Architecture while Designing widget.

Keep HTML, CSS, and JavaScript file sizes small.


Design for small screens and mobile keyboards.

Keep widget screens simple and clutter free.

Provide visual feedback while the widget is connecting to the web or if it loses its connection.

Use larger fonts, buttons, and controls that are easier to see.

Keep interaction lightweight. Use selectable options and default values where possible.

Keep text entry lightweight. Use text auto-completion and pre-filled text fields.

Query the screen size using JavaScript and tailor the layout to the screen.

Allow the user to customize the widget with preferences. Consider providing default settings.


If the widget refreshes itself, use an interval that makes sense for its functionality. Set a timeout when you make an HTTP request.

If a widget loses its Internet connection, display an error icon or a message in a full screen.

Reconnect when the user clicks Refresh All Widgets or at the next refresh interval.

Server Side Development

Make sure the server that hosts the site has a scalable architecture that can accommodate rapid growth in your user base.

Structure objects and data sent over a network to be as concise as possible. Use XML, JSON, CSV, or query strings as appropriate.

Max Search Widget Example

Below Widget Searches the Query Content From World's Most Popular Search Engines and Display the Result of User selected Search Engine in Users Mobile same as it sees in Desktop Computer. Thus this widget provides same User Experience to Users.


<html xmlns=""> <head>

<script Language="JavaScript">

function searchWeb() { if ( { window.location.href=""; } if ( { window.location.href=""; } if ( { window.location.href=""; } if ( { window.location.href=""; } if ( { window.location.href=""; } if ( { window.location.href=""; } if ( { window.location.href=""; } if ( { window.location.href=""; } if ( { window.location.href=""; } if ( { window.location.href=""; } }

</script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>MaxSearch</title> <style type="text/css"> </style></head>

<body> <form name="search">

Max Search Engine

      <select name="engines">
        <option value="0" selected>AltaVista</option>
        <option value="1">Ask Jeeves</option>
        <option value="2">Google</option>
        <option value="3">GoTo</option>
        <option value="4">HotBot</option>
        <option value="5">LookSmart</option>
        <option value="6">Lycos</option>
        <option value="7">MetaCrawler</option>
        <option value="8">Northern Light</option>
        <option value="9">Yahoo!</option>
      <input type="text" size="25" value="Search web for ..." onFocus=select(); name="queryText">
      <input type="button" value="Go" onClick="searchWeb()"> 

</form> </body> </html>

46 page views in the last 30 days.