×
Namespaces

Variants
Actions
(Difference between revisions)

Guide To Designing Mobile Widget

From Nokia Developer Wiki
Jump to: navigation, search
kalki (Talk | contribs)
kalki (Talk | contribs)
(Code)
Line 107: Line 107:
  
  
== Code ==
+
<nowiki>== Code ==
  
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<html xmlns="http://www.w3.org/1999/xhtml">
Line 286: Line 286:
 
</body>
 
</body>
  
</html>
+
</html></nowiki>

Revision as of 09:09, 17 May 2009


Contents

Introduction

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


Coding

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.


Functiionality

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.


Content

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.


Performance

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.


Architecture

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


Keep HTML, CSS, and JavaScript file sizes small.


Usability

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.


Connection

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.


Maxsearch.jpg


== Code == <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script Language="JavaScript"> function searchWeb() { if (document.search.engines.selectedIndex==0) { window.location.href="http://www.altavista.com/cgi-bin/query?pg=q&what=web&fmt=.& q="+document.search.queryText.value; } if (document.search.engines.selectedIndex==1) { window.location.href="http://www.ask.com/main/askjeeves.asp?x=22& y=13&ask="+document.search.queryText.value; } if (document.search.engines.selectedIndex==2) { window.location.href="http://www.google.com/search?btnG=Google+Search& q="+document.search.queryText.value; } if (document.search.engines.selectedIndex==3 ) { window.location.href="http://www.goto.com/d/search/?type=home& tm=1&Keywords="+document.search.queryText.value; } if ( document.search.engines.selectedIndex==4) { window.location.href="http://www.hotbot.com/search.html?SM=MC&_v=1.0& MT="+document.search.queryText.value; } if (document.search.engines.selectedIndex==5) { window.location.href="http://www.looksmart.com/r_search?look=& key="+document.search.queryText.value; } if (document.search.engines.selectedIndex==6) { window.location.href="http://www.lycos.com/cgi-bin /pursuit?query="+document.search.queryText.value; } if (document.search.engines.selectedIndex==7) { window.location.href="http://www.metacrawler.com/cgi-bin /nph-metaquery.p?general="+document.search.queryText.value; } if (document.search.engines.selectedIndex==8) { window.location.href="http://www.northernlight.com/nlquery.fcg?cb=0&search.x=35& search.y=9&qr="+document.search.queryText.value; } if (document.search.engines.selectedIndex==9) { window.location.href="http://search.yahoo.com /search?p="+document.search.queryText.value; } } </script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>MaxSearch</title> <style type="text/css"> <!-- body { background-image: url(White_Chocolate.jpg); } body,td,th { font-family: Georgia, Times New Roman, Times, serif; font-size: 16px; font-weight: bold; } --> </style></head> <body> <form name="search"> <p align="center"><strong>Max Search Engine </strong></p> <table height="50" align="center" bgcolor="#BDADB0"> <tr> <td>  <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> </select> <input type="text" size="25" value="Search web for ..." onFocus=select(); name="queryText"> <input type="button" value="Go" onClick="searchWeb()">  </td> </tr> </table> </form> </body> </html>

150 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×