Tools

Namespaces

Variants

Views

Actions

Search

Contents

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.

This is the first of the series of articles High Performance Widgets. The objective of these articles is to show tips and tricks that improve your WRT widgets or Mobile Websites performance, and also to make your widget optimized for a better user interaction.

The Back-end of your widgets is only 20% of the loading process, so if you want to make it faster, you have to focus on the Front-end. The XTHML documents spend between 10 to 20% to load, the rest is divided among Style Sheets, JavaScript and Images.

This Master Image contains all the images of the example used in this article.

CSS sprites replaces the old method of slicing and dicing in a more flexible way, using nothing more than creative thinking and CSS.

The technique consists in making image-replacements using a CSS mask. Behind the mask we’ll use a master image, which is a combination of all images needed and it’s different states. You can combine all in master image or separated by specific parts (like Navigation/ Buttons/ or whatever you wish).

You can use CSS sprites in any XHTML element that accepts Backgrounds, such as any display:block element.

This one represents the logo and the navigation. Notice that there's a link with the class active. This is because the Div #url , which is relate to #btn-url, is the first screen displayed, so it's active.

This code will serve as the basis for our example. Light-weight, simple markup and easy to understand. Anyway, at the bottom of this article you'll find the whole code (XHTML/CSS/JS) used in the interface, for mores CSS sprites examples.