Widget design tutorial

This tutorial will guide designers through the visual styling of a Web Runtime widget using XHTML and Cascading Style Sheets (CSS). The widget uses the COLOURlovers.com web API, and will enable users to search for and view popular colours, palettes, and patterns.

The tutorial also introduces widget workflow and tools, and takes designers through the steps required to style the widget's views, buttons, dynamic content, and icon. Finally, designers will receive tips for testing and debugging the widget's visual design within the desktop environment as well as on a device.

Figure: Web Runtime: Hue Widget Example

In this section:

• Getting started

• Creating the visual concept

• Get friendly with the data source

• Styling views and controls

• Styling dynamic content

• Debugging the design and testing the widget