The result has been published as Unobtrusify.com.
- Use images to make the headings look snazzy, but make sure that they are not required in order for the content to make sense.
- Reduce the number of http requests required to as few as possible in order to improve performance.
First of all, I wrote the text for the page. I chose a simple statement and tried to structure it such that it would make sense regardless of which sections were expanded.
Then I used the simplest HTML markup I could to logically represent the content with its various headings. This is how the page would look to text-only browsers search engines, web-crawlers and screen-readers.
I then used a well-known CSS technique to replace the text in the headings with images. This would ensure that the text would remain for non-human consumers of the site, while the images would be presented to those able to appreciate them. The technique is simple. You prevent the browser from scrolling the content of your element with
overflow:hidden and then scoot the text out of the way with
text-indent. Now that the way is clear, you can display an image with
background-image. Be sure to specify the dimensions of your desired image as the
background-image property will not resize your element to the correct size automatically. The CSS would look something like this:
My content had 6 headings to render in this way. I also wanted to have a mouseover effect to give some affordance for the click-ability of the headings so this would require another 6 images. Rather than having 12 images to download (which would require 12 separate HTTP requests), I combined all of these images into a single image. This would have a number of effects. Firstly, combining the 12 images into one meant that the total download would be a bit smaller due to the way that the file was compressed. (A tiny saving, but every little helps.) Secondly, there is an overhead with making HTTP requests so when it comes to performance, the fewer the better. This method cuts out 11 HTTP requests. Score! Thirdly, as the browser uses the same image for the original heading images and their associated mouseover images, there is no need to preload the alternate images to avoid that nasty pause when mousing over. The image is already downloaded and ready to display. A nice bonus.
In order to use this 'image sprite' for each and every heading, I just needed to specify the
background-position for each one. Some attributes would be common to each one so I could save some code like this:
Using jQuery to easily and unobtrusively add behavior to elements on the page, we can now hide all of the expanded sections. We do this with a simple jQuery statement like this:
This hides all of the div elements which are a direct descendent of the element with an ID of wrapper. (my chosen HTML structure).
Headings are not by default clickable so we can add some behavior to suggest that the clicking a heading will have a effect by changing the cursor for them like this:
A CSS class of 'clickable' specifies the cursor with
For a better picture of exactly what is going on, why not swing by Unobtrusify.com and exercise your right as a citizen of the Web to view the source. Hitting View Source is so often the best way to learn how things are done. Go on! Go and get your hands dirty!
Let me know your thoughts using the form below.