CSS Sprites

The problem

You have a menu bar with the standars buttons, including the proverbial "previous / back" and "next / forward" buttons which look like...

You have been asked to improve the usability of them. In addition, your application is not coming up well in performance analysis tools. One reason for this is that many pages are downloading numerous components resulting in too many HTTP requests. It's time to consider mechanisms to reduce the number of HTTP request required to display your pages.

The solution

Well consider the usability first. The images for the buttons don't look that bad. It's obvious what they mean and what they will do, so there's not much point adding tooltips. But we could make things look sleeker with some "hovering".  What's hovering?  Hovering is a technique which dynamically changes a component when a mouse "hovers" over it. Technically, tooltips are a form of hovering but there are other types: components can change colour or light up. Let's apply some hovering magic to our prev / next buttons.  Hover your mouse over the buttons below, do it a few times and watch them glow.

So how did we do all that? Well, the first thing we do is make alternative images of our original images. This can be done using any decent editing tool: gimp, paint shop pro, take your pick - for this example, I just used Picaso. The second thing to do is to amalgamate the four separate images using a tool such as CSS Sprite generator into one single image.

Why one single image? Well that's for the performance part. HTTP requests can be expensive. We don't want to have to 4 separate HTTP requests for 4 images. So instead, we have one image which contains everything we need. This downloads all four components in one go. We then use some CSS tricks to:

1. Pull the 2 images out of the one big sprite
2. Switch the images to their hover versions when the mouse hovers over them

So how do we all that... time to look at some CSS.

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:60px;display:block;}

#prev{left:0px;width:60px;}
#prev{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQTHOhAUUfvhMQd9wO68I_rFvM6N_u2oyx29R4IOGlHGdVa9rijixF2OgVDIHGZIMLucPUuXsyl0q4Whc0MpeKWCTuDsTdAnaoXlBYB6KsWRo09LNU022GecQvRQipB3TWOBq3qQVjeYTS/s200/sprite.png') 0 0;}
#prev a:hover{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQTHOhAUUfvhMQd9wO68I_rFvM6N_u2oyx29R4IOGlHGdVa9rijixF2OgVDIHGZIMLucPUuXsyl0q4Whc0MpeKWCTuDsTdAnaoXlBYB6KsWRo09LNU022GecQvRQipB3TWOBq3qQVjeYTS/s200/sprite.png') -60px -60px;}

#next{left:61px;width:60px;}
#next{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQTHOhAUUfvhMQd9wO68I_rFvM6N_u2oyx29R4IOGlHGdVa9rijixF2OgVDIHGZIMLucPUuXsyl0q4Whc0MpeKWCTuDsTdAnaoXlBYB6KsWRo09LNU022GecQvRQipB3TWOBq3qQVjeYTS/s200/sprite.png') 0 -60px;}
#next a:hover{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQTHOhAUUfvhMQd9wO68I_rFvM6N_u2oyx29R4IOGlHGdVa9rijixF2OgVDIHGZIMLucPUuXsyl0q4Whc0MpeKWCTuDsTdAnaoXlBYB6KsWRo09LNU022GecQvRQipB3TWOBq3qQVjeYTS/s200/sprite.png') +60px 0px;}

The second half of the cake is the HTML, note the id's

Explanation

1. The CSS shows a styled navigation list. A list with id="navlist" will reap the styled benefits.
2. An element with id="prev" will disect up the collection of images aka the "sprite sheet" and take out the part of the image it wants i.e. the left arrow
3. An element with id="next" take out the right arrow
4. "prev" and "next" have hover images which are also taken from the sprite sheet and will be displayed when the mouse hovers over them.

So there we go. Better usability and better performace.  A good day's work. So any other questions? Well an obvious one would be why not just use an image map? It will also reduce HTTP requests. That's true. But, it's not as flexible as using CSS sprites. When image maps are used, the images have to be continguous. Using the CSS sprites technique, you can split them up whatever way you want. A whole bunch of images can be put onto the one sprite and then can be used together, seperate and in whatever order you want.  In fact this is how most companies used CSS sprites. They create a sprite sheet which contains various images for all parts of the web application.  Inline images are another approach. This approach will download the image in the same HTTP request as the page and thus also reduce HTTP requests but it willalso increase the size of the HTML page.  Browser support for CSS sprites approach is also better.

So, is anyone else using CSS sprites - hell yeah! Recognise anything here...

References

1. Really interesting page about the evolution of google super sprite
2. W3C page on CSS sprites
3. Sprite generator

HTML 5 Placeholder Text

Previously, this blog posted an overview of HTML 5.  Let's have a closer look at one of the more useful HTML5 features: placeholder text.   Placeholder text is  a short hint intended to help the user understand what their data entry should be.  It is not default text.

Placeholder example:

First name:

Previously to achieve this involved some javascript; now it's extremly simple.  Simple add the placeholder attribute to the input element.

Placeholder text has some real benefits.  It means you are conveying more information to the user but not taking up anymore valuable real estate space on the page. Now, it is fair to say that there are some very popular GUIs that don't use placeholder text. For example, the login screen for gmail does not.

gmail login

This begs the question when from a usability perspective when does it make sense to use it and when is it best avoided?  Let's think about the gmail case a bit more and that helps answer the question.

By default, the gmail Username textbox gets focus when you arrive at www.gmail.com. This makes sense. The Username textbox is the smart staring point for this page.  It's the logical place for the user to start their interaction.  Now, when a textbox has focus any placeholder text it has always gets wiped. Otherwise, the user would be seeing a mixture of what they are typing and what the placeholder text was.  That would just be horrible! So, since the username textbox has default focus for gmail.com it makes sense that when you arrive, the username textbox is blank. How about the case when the user types nothing in the username textbox and shifts the focus to something else? Would the arrival of placeholder text add meaning or confuse the user?  I'd argue it would confuse them.  Aside from the sudden flicker being an irration, the user could think they did something to cause the text to be put there.   It will confuse rather than elucidate!   As for the password field, well they generally don't have placeholder text - for obvious reasons. So gmail is being smart here. There is no placeholder text but for logical reasons.

So placeholder text is great but there's the question of when it should be and shouldn't be used should not be avoided.

Now, let's dig a bit further into the usability.  The W3C  spec states that the: "placeholder attribute should not be used as an alternative to a label".   I'd also suggest that the placeholder text should not repeat the label.  What's the point in saying the same thing twice?  There's no point in duplication, but there is nearly always a case for elucidation.  A good example is the firefox searchbar.   This is the text bar found in the top right corner of the Firefox window that can be used to search popular search engines without the user having to access them directly.   A number of different search engines can be selected.  In all cases, there is icon for the engine which acts as a label for the search engine.  There is also placeholder text in the search textbox ajacent to the icon label.  This elucidates what the label icon is identifying.  For example, for Wikipedia we see, the Wikipedia icon and then the placeholder text: Wikipedia (en)

Wikipedia selected 

What's really clever is here is the use the very efficient use of real estate.  The icon is very small and in case it is not clear it means Wikipedia, the placeholder text elucidates the matter.  We see the same if Google is selected.

Google selected

So yes placeholder text is a great feature.  It's easy to use but using it at the right time and smartly requires thought.   It all comes down to the simple question: is the addition of placeholder text going to elucidates matters for the user or not? 

So any browser caveats?  Well not all browsers support the placeholder attribute. For example IE 9 does not.   But thankfully, if the placeholder attribute is not understood, it is ignored. There are no nasty exceptions or error messages.  Just have a look at this webpage in IE 9.  As always, if you want to support fallback use the Modenizer library.  There are several examples available using Javascript /JQuery if you want to have placeholder text in browsers that don't support this simple way of doing it using HTML 5.

References:
1. HTML5 spec: http://dev.w3.org/html5/spec/Overview.html
2. HTML5 placeholder spec: http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute
3. Site to test your HTML5 browser support: http://html5test.com/
4. Site to test your browser support for input type attribute support: http://miketaylr.com/code/input-type-attr.html

HTML5 F.A.Q.

HTML5 has been generating a lot of excitement in the web community as of late. It advances HTML so much that Steve Jobs commented in April 2010 it will render Adobe Flash unnecessary!  This was somewhat sensational considering the ubiquity of Flash.  For example, Flash is the technology used by the very popular site youtube  to display every single one of their videos in users' browsers.  There are many who think that if youtube move to HTML5 it could really be bye bye Flash (for example the popular Lockergnome).  This is something I find difficult to disagree with.
 
Now, I've just finished reading the excellent 'HTML5 Up and Running' by Mark Pilgrim and I put together a list of F.A.Q. about HTML5 which I hope gives you a good feel about what HTML5 brings to the table.

Enjoy :-)

HTML5 General
How do I declare my page to be HTML5?

Simply start it with: <!DOCTYPE html>

Give some examples where HTML5 tries to standardise things?

• The <nav> element is used for navigation. Before developers would use their own CSS classes to style html lists to get the effect of tabs and navigation lists.
• HTML5 introduces elements such as <footer>,<header> .  Before developers would write their own custom CSS classes for headers and footers. These CSS classes would have their own naming which could vary from developer to developer.

Browser Support
Is it possible for browsers to support some html 5 features and not others?
Yes.  Firefox 3.0+, Safari 3.0+, Chrome 3.0+ all support canvas. However, if you want geolocation well then it's Firefox 3.5+, Safari 5.0+, Chrome 5.0+.

What is the best way for your page to detect what html 5 features are supported?
Use the modernizr javascript library. It's brilliant.  Not only can it very easily confirm if features such as canvas, video, webworker are supported it can also detect more advanced things such as exactly which video formats (ogg, h264) are supported

Canvas

What is a canvas?
A canvas is rectangle which can be defined for your web page.  There are a range of simple APIs which can be used to draw on the canvas.  They are from the very simple to the very sophisticated - which can be used for animations and even games such as Mutant Zombie Monsters by Bill Scott

Can I have more than one Canvas on the same page?
Yes.  And give each canvas its own id and you can access it like any other element.

How do I get Canvas support for IE7, IE8?
Download the ExplorerCanvas Javascript library (http://code.google.com/explorercanvas/)

Data Storage
Name some differences between HTML5 data storage and cookies?

• Cookies don't store any information. They are just pointers to information that the client can send to the server.
• With Cookies the data being stored is server side. HTML5 data storage is client side.
• Storage mechanism are going to be more sophisticated server side. HTML5 client side data storage will have limitations.

Form Autofocus
What's the big deal with autofocus in HTML5?

• Now defining which part of the page gets default focus is easy
• All form controls can have the attribute autofocus
• Because autofocus can now be done in a standardised way, (i.e. no need for complex javascript) it's easier for a browser to provide the option to disable it.

Geolocation
What kind of location information do I get with Geolocation?
The location information that you can get is basically any of the properties of the position object. These are pretty self explanatory and include:

• coords.latitude
• coords.longitude
• coords.altitude
• coords.accuracy
• coords.altitudeAccuracy
• coords.heading
• coords.speed
• timestamp

Does the browser always have to ask the user before any calls can be made to geolocation APIs?
Yes.

Input Types
Give some examples of the new input types supported in HTML 5?
Search boxes, Spin Boxes, Sliders, Color Pickers, Telephone numbers, Web Addresses, Email Addresses, Calendar date pickers, Months, Weeks, Times.

Placeholder text
Does HTML5 include support for placeholder text and what is it?
Placeholder text is default text in an input field used to prompt the user what they need to write.
And Yes its supported.

Video
So all I need to do to show a video on my page is use the <video> element?
Well no. You need to ensure the web page supports:

• the containing format (e.g. mpeg - 4, ogg, WebM, Audio Video Interleave)
• the video codec format (e.g. H.264, Theora, VP8)
• the audio codec format used in the video (e.g. mp3, vorbis)
  

There is no single combination of container and codecs that works in all browsers.
The <video> element makes it easy to define a preference and fallback formats.

How do I include controls (play, stop, etc.) for my video?
Just include the controls flag. e.g. <video src="myvideo.webm" width="100" height="50" controls></video>

Web Worker 

What is a web worker?
A web worker is a way of running javascript in the background on a separate thread.
You can spawn multiple web worker threads.

Give an example of when you would use a web worker?

If you had to do some number crunching or background I/O and didn't want to block out the user.

Anything else...
Name some other HTML5 features you haven't even covered here?

Microdata, offline and caching features, the <article> element which allows developer more control over headers, svg support and presumably many more...

References

1. Excellent online ref for HTML 5 http://diveintohtml5.org/
2. The brilliant modernizr library which lets you check what html 5 support you have http://www.modernizr.com/
3. Great demos of HTML5 canvas http://www.canvasdemos.com/
4. Great HTML5 demos and tutorials http://www.html5rocks.com/en/tutorials/workers/basics/
5. The WHATWG community http://www.whatwg.org/
6. More HTML5 demos http://html5demos.com/

Very simple AJAX example

Ok, so you're embarrassed about your lack of knowledge of WEB 2.0 and in particular Rich Clients and that little place in the Netherlands called... AJAX. Well have no fear! You will now learn the basics of AJAX.

Let's start with a requirement. You are required to update part of your web page and (only part of your web page) asynchronously. When? Well when a button called 'Update with AJAX' is clicked!
And what are you required to update it to? The contents of a file that reside on your server.

Ok let's look at the solution.

Very simple Javascript / Ajax Example

This page shows some very simple JavaScript / Ajax in action!





This will text be updated!







 

Now let's look at the salient points here:

1. The HTML is pretty simple. There is a paragraph with the "id".
   This is the paragraph that will be updated when the Ajax Update
   button is pressed.
   
2. The Javascript function loadDoc() is defined in the HTML header.
   
3. The loadDoc() function creates a XMLHttpRequest object (or an ActiveXObject for
   those annoying browsers!)
   
4. The XMLHttpRequest is pretty cool. This is what facilitates the AJAX request.
   It has a event property onreadystatechange. When this property an anonymous
   function will execute.
   
5. The anonymous function, checks a property readyState. When this property is 4 it means that the server has finished the request and the response is ready.
   
6. When the response is ready, the function checks another property responseText
   which contains the response from the server. It updates the paragraph with the response.
   
   So what actually sends the request?
   
   
   
   • The open API sets up the request. It states what type a request (Get, parameter 1), the URL / URI (ajax_info.txt, parameter 2) and that the request should be
     asynchronous (false, parameter 3).
     
   • The send API sends the request. In this case, no parameter is included.
     This means the the client sends no request to the Server. It can if it wants to. It would simply include a parameter in the send() API which is the data the client will
     send to the server.
     
   
   
   Now to get this working all you need is this file and a file named ajax_info.txt on the same Server! Enjoy!