×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Design Pattern: High Performance Widgets: CSS Sprites

From Nokia Developer Wiki
Jump to: navigation, search
Feliperodrigues (Talk | contribs)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(10 intermediate revisions by 6 users not shown)
Line 1: Line 1:
[[Category:Mobile_Design]]
+
[[Category:Mobile Design Patterns]][[Category:Symbian Web Runtime]]
[[Category:Mobile_Design_Patterns]]
+
{{ArticleMetaData <!-- v1.1 -->
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090517
 +
|author= [[User:Feliperodrigues]]
 +
}}
  
 
== Introduction ==
 
== Introduction ==
  
This is the first of the series of articles '''High Performance Widgets'''. The objective of this articles is to show tips and tricks that improve your WRT widgets or Mobile Websites performance, and also make your widget optimized for a better user interaction.
+
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 between Style Sheets, JavaScript and Images.
+
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.
  
 +
== How do CSS Sprites works ==
  
 
+
[[Image:Set.png |frame| This '''Master Image''' contains all the images of the example used in this article.]]   
----
+
 
+
 
+
+
== How does CSS Sprites works ==
+
 
+
[[Image:Set.png |frame| This '''Maste 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.  
 
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).  
 
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'''.
+
You can use CSS sprites in any XHTML element that accepts Backgrounds, such as any  '''display:block''' element.
 
   
 
   
 
 
 
 
 
 
 
=== The master image ===
 
=== The master image ===
  
In this image we have the buttons, the icons, the logo and the navigation. Notice that all the items that have human interaction (in this case the navigation), appear in two different forms:  
+
In this image we have the buttons, the icons, the logo, and the navigation. Notice that all the items that have human interaction (in this case the navigation) appear in two different forms:  
 
+
  
 
[[Image:Ico-url.png]] -  The normal: Before the interaction.   
 
[[Image:Ico-url.png]] -  The normal: Before the interaction.   
  
[[Image:Ico-active.png]] - The active: After the interaction. In this case, when the selected screen is showed.  
+
[[Image:Ico-active.png]] - The active: After the interaction. In this case, when the selected screen is displayed.  
 
+
 
+
 
+
  
 
=== The XHTML ===
 
=== The XHTML ===
Line 46: Line 52:
  
 
Let's see the example bellow:
 
Let's see the example bellow:
 
+
<code html4strict>
<code lang="html4strict">
+
           
+
 
             <div id="header">
 
             <div id="header">
 
                 <h1 id="logo">Catch Up</h1>
 
                 <h1 id="logo">Catch Up</h1>
Line 63: Line 67:
 
</code>
 
</code>
  
This one represent the logo and the navigation. Notice that there's a link with the class '''active'''. That happened because the Div '''#url ''', which is relate to '''#btn-url''', is the firs screen showed, so its active.
+
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 a base for our example. Light-weight, simple markup and easy to understand. Anyway, in the bottom of this article you'll find the whole code (XHTML/CSS/JS) used in the interface, for mores CSS sprites examples.
+
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.
  
 
=== Applying the CSS ===
 
=== Applying the CSS ===
  
 
====Master image as background====
 
====Master image as background====
<br />
 
  
Now, its time to style our structure. First we have to set the '''master image''' as background of all elements that will use it.
+
Now, it's time to style our structure. First, we have to set the '''master image''' as the background of all elements that will use it.
 
+
<code lang="css">
+
  
 +
<code css>
 
#logo,
 
#logo,
 
#menu #btn-read a,  
 
#menu #btn-read a,  
Line 90: Line 92:
  
 
==== Positioning the elements ====
 
==== Positioning the elements ====
<br />
+
Now we'll style them individually, changing element positions and setting the widths and heights to create the CSS mask effect.
  
Now we'll style them individually, changing elements positions and setting the widths and heights to creat the CSS mask effect.
+
Like in a common image replacement, we use the '''display:block''' for the links, so we can set their width and height properties and the '''text-indent''' to make the link's text disappear.
 
+
Like in a commom image replacement, we use the '''display:block''' for the links, so we can set their width and heigh properties and the '''text-indent''' to make the link's text disapear.
+
 
+
<code lang="css">
+
  
 +
<code css>
 
           #logo{
 
           #logo{
 
text-indent: -999px;  
 
text-indent: -999px;  
Line 135: Line 134:
  
 
==== Positioning backgrounds ====
 
==== Positioning backgrounds ====
<br />
+
Now the mask is created, let's position the backgrounds, making the correct elements meet the correct background.
  
Now the mask is created, let's position the backgrounds making the correct elements meet the correct background.
+
<code css>
 
+
<code lang="css">
+
 
         #logo{
 
         #logo{
 
                 background-position: -0px -0px ;
 
                 background-position: -0px -0px ;
Line 156: Line 153:
  
 
==== The active ====
 
==== The active ====
<br />
+
 
 
Now we're going to format the navigation links in the 'active' state.  
 
Now we're going to format the navigation links in the 'active' state.  
  
When you click the navigation buttons the JavaScript in this example, says that this class ''active'' will be added to the link, changin his style.
+
When you click the navigation buttons the JavaScript in this example, says that this class ''active'' will be added to the link, changing his style.
  
 
Gladly in our case, we just have to change the background position.
 
Gladly in our case, we just have to change the background position.
  
<code lang="css">
+
<code css>
     
+
 
#menu #btn-read a{
 
#menu #btn-read a{
 
                 background-position: -236px -54px ;
 
                 background-position: -236px -54px ;
Line 174: Line 170:
 
             }
 
             }
 
</code>
 
</code>
 
 
 
----
 
  
 
== Advantages ==
 
== Advantages ==
Line 183: Line 175:
 
CSS sprites are far more flexible than Image Mapping.
 
CSS sprites are far more flexible than Image Mapping.
  
Using CSS sprites on this case we save 10 HTTP Requests, which will increase a lot in the widget loading speed.
+
Using CSS sprites on this case we save 10 HTTP Requests, which reduces a lot the widget loading time.
 
   
 
   
Other advantage is reducing the downloading size of the file. Though most people assume than the master image is heavier than all images sliced individually, in fact, '''the master image''' is a lot smaller.  
+
Other advantage is reducing the download size of the file. Though most people assume than the master image is heavier than all images sliced individually, in fact, '''the master image''' is a lot smaller.  
  
In this example the maste image size was 14kb and the size of all slices together where 44kb. That implicates that the CSS sprites made a reduction of 3.14 times the size of image.
+
In this example the master image size was 14kb and the size of all slices together where 44kb. That implicates that the CSS sprites made a reduction of 3.14 times the image size.
  
That happens because the combination of images eliminate the need to load individual elements for each one, such as color tables or formatting info.  
+
That happens because the combination of images eliminates the need to load individual elements for each one, such as color tables or formatting info.  
 
+
 
+
----
+
  
 
== Archives ==
 
== Archives ==
Line 202: Line 191:
 
[http://frodrigues.com/lab/catchup.zip Example.zip]
 
[http://frodrigues.com/lab/catchup.zip Example.zip]
  
 
----
 
  
 
==See also==  
 
==See also==  
  
[http://wiki.forum.nokia.com/index.php/High_performance_Widgets:_Combine_your_JavaScripts_and_CSS_in_external_Files High performance Widgets: Combine your JavaScripts and CSS in external Files]
+
* [[High performance Widgets: Combine your JavaScripts and CSS in external Files]]
 +
* [[High performance Widgets: Optimize your JavaScript]]

Latest revision as of 06:06, 16 April 2012

Article Metadata
Article
Created: User:Feliperodrigues (17 May 2009)
Last edited: hamishwillee (16 Apr 2012)

Contents

[edit] Introduction

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.

[edit] How do CSS Sprites works

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.

[edit] The master image

In this image we have the buttons, the icons, the logo, and the navigation. Notice that all the items that have human interaction (in this case the navigation) appear in two different forms:

Ico-url.png - The normal: Before the interaction.

Ico-active.png - The active: After the interaction. In this case, when the selected screen is displayed.

[edit] The XHTML

Is important for every good CSS trick, to have a clean block of code.

Let's see the example bellow:

            <div id="header">
<h1 id="logo">Catch Up</h1>
 
<ul id="menu">
<li id="btn-url">
<a href="#" class="active">Urls</a>
</li>
<li id="btn-read">
<a href="#">Read</a>
</li>
</ul>
</div>

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.

[edit] Applying the CSS

[edit] Master image as background

Now, it's time to style our structure. First, we have to set the master image as the background of all elements that will use it.

#logo,
#menu #btn-read a,
#menu #btn-url a,
#menu #btn-read .active,
#menu #btn-url .active,
{
background: url(../images/set.png) no-repeat;
}

That line of CSS code says that the logo, the navigation links and their active states, have the same background, set.png

[edit] Positioning the elements

Now we'll style them individually, changing element positions and setting the widths and heights to create the CSS mask effect.

Like in a common image replacement, we use the display:block for the links, so we can set their width and height properties and the text-indent to make the link's text disappear.

          #logo{
text-indent: -999px;
width: 170px;
height: 50px;
float: left;
margin: 20px 0 0 20px;
}
 
#menu{
width: 140px;
height: 55px;
float: left;
margin: 20px 0 0 30px;
}
 
 
#menu #btn-url a{
display: block;
width: 64px;
height: 53px;
float: left;
overflow: hidden;
text-indent: -999px;
}
 
#menu #btn-read a{
display: block;
width: 66px;
height: 53px;
float: left;
overflow: hidden;
text-indent: -999px;
margin-left: 5px;
}

[edit] Positioning backgrounds

Now the mask is created, let's position the backgrounds, making the correct elements meet the correct background.

         #logo{
background-position: -0px -0px ;
}
 
#menu #btn-read a{
background-position: -236px -0px ;
}
 
 
#menu #btn-url a{
background-position: -170px -0px;
}


[edit] The active

Now we're going to format the navigation links in the 'active' state.

When you click the navigation buttons the JavaScript in this example, says that this class active will be added to the link, changing his style.

Gladly in our case, we just have to change the background position.

#menu #btn-read a{
background-position: -236px -54px ;
}
 
 
#menu #btn-url a{
background-position: -170px -54px;
}

[edit] Advantages

CSS sprites are far more flexible than Image Mapping.

Using CSS sprites on this case we save 10 HTTP Requests, which reduces a lot the widget loading time.

Other advantage is reducing the download size of the file. Though most people assume than the master image is heavier than all images sliced individually, in fact, the master image is a lot smaller.

In this example the master image size was 14kb and the size of all slices together where 44kb. That implicates that the CSS sprites made a reduction of 3.14 times the image size.

That happens because the combination of images eliminates the need to load individual elements for each one, such as color tables or formatting info.

[edit] Archives

This is the .zip file, with the XHTML, CSS and JavaScript used in this article.

This examples contains a base interface for you to guide your self.

Example.zip


[edit] See also

This page was last modified on 16 April 2012, at 06:06.
164 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.

×