Best Practices for Motorola Webui Widgets
Use these best practices as a guide to designing and developing your mobile widget so that you
can deliver the most personal and targeted mobile Internet experiences to your customers.
Functionality - What is the widget designed to do?
• Keep the widget simple. Design it to perform one main function.
• Choose functionality and content that is useful for people on the go.
• Use the capabilities of the device to enhance the user experience.
• Make the widget fun and engaging to use.
Business/Marketing - How do I plan for go-to-market success?
• Have a license agreement for any logos, trademarks, or branding that you use but do not own.
• Have license agreements for all of the content (text, images, news feeds, and so on) your widget displays.
• Make sure the content your widget displays is appropriate for your audience, especially if it comes from a web site
or feed that you do not control.
• Make a plan for globalizing or localizing the features, look and feel, and content your widget displays.
content - Does the widget display content and images effectively?
• Make sure the content is fresh and engaging. Update it frequently.
• Use a short, descriptive page title for screens.
• Display content so that it is easy to read on the device. Use readable font sizes and scroll bars.
• Compress images and reduce color depth to make file sizes smaller.
• Make sure text is readable against background images.
PerForMance - Does the widget perform well on a mobile device, especially with many users?
• Make sure your widget loads quickly in the widget library.
• Make sure the widget makes smooth, fast transitions between screens.
• Make sure the widget handles interruptions (such as the user receiving a call or email) smoothly.
architecture - How are the parts of the widget structured?
• Separate data and functionality from views.
• Keep the size of the HTML DOM the widget loads small.
• Keep HTML, CSS, and JavaScript file sizes small.

coding - How is the widget coded?
• Use valid HTML, XML, and CSS markup.
• Use the Motorola XMLHttpRequest extension to handle large binary files.
• Cache data that is frequently reused by storing it in the file system or setting user preferences. Avoid resending
the data or having the user reenter it.
• Do not use global JavaScript variables.
• Use action commands to request device services, such as making a phone call or capturing a photo.
• Handle the onHide event by doing nothing until the widget receives an onShow event.
• Transmit confidential information (such as login credentials) over HTTPS using encryption.
usaBility - Is the widget appealing and easy to use while a user is mobile?
• Use a livecon if it is appropriate for the widget’s functionality.
• 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.
connections - Does the widget handle mobile Internet connections well?
• 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 in the livecon or a message in a full screen.
Reconnect when the user clicks Refresh All Widgets or at the next refresh interval.
server-side develoPMent - How does the server handle data?
• 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.
• Use a proxy server to download and store data from web sites, especially if you combine content from multiple sites.
MOTOROLA and the Stylized M Logo are registered in the US Patent & Trademark Office. All other
product or service names are the property of their respective owners. © Motorola, Inc. 2008.