We’ve been following Yahoo!’s Best Practices for Speeding Up Your Web Site for quite a while now and have been fine in following some of the tips — that we’ve forgotten to extend out our antennas to hear about what’s going on out there in the world of website page load performance.

This one isn’t really that technical but a “perceived performance” — it’s making your JPEGs progressive (basically if it larger than 10k in file size).

From Wikipedia:

There is also an interlaced “Progressive JPEG” format, in which data is compressed in multiple passes of progressively higher detail. This is ideal for large images that will be displayed while downloading over a slow connection, allowing a reasonable preview after receiving only a portion of the data.

Instead of waiting for that JPEG image load line per line, what you would see at first is a pixelated version of the image in full size and it improves its quality as it downloads.

Read more about it in Progressive jpegs: a new best practice by Ann Robson

While we’re waiting for the vector format to come across the web, we’re left to “fake” it out — our images (excluding photographs) times two (x2) to create a high-pixel-density image.

While we’re at it, let’s see how we can consolidate all those icons into one file and in hi-res fashion.

We have website icons sized 16px, 24px, 32px, etc. While laying it out in Illustrator or Photoshop, size wouldn’t really matter — just make it larger than 48 x 48 pixels.

Set out your canvas in a fixed manner — if you’ve settled with 48px, then multiply it by 10 and have a 480px wide canvas. It could contain 10 48px icons across.

In you CSS:
width:32px;
height:32px;
background-size:1000%;
background-position:-32px 0; /* in increments of 32 pixels */

…but the background colors and font colors.

What to do after writing the HTML markup?

Now that we’ve got the mock-up translated into structured content marked up in semantic HTML, it’s time to paint the town.

This morning, I gave the class a seat work — tear off a page, any page from any magazine and translate it into structured content marked up in semantic HTML. What does that mean?

Say you tore off a car advertisement page — most probably it would have the following elements on it:

• Brand logo
• Tagline
• Headline
• Subhead
• Images
• Paragraph of copy
• Fineprint

Each element we identified has an equivalent HTML element that we could use in marking up the HTML document. For example:

• Brand logo = h1

<liTagline = h2

• Headline = h1
• Subhead= h2
• Paragraph of copy = p
• Images = img
• Fineprint = p

Of course, we would still need to “group” those elements into bigger “boxes” such as:

• header
• div
• footer

With HTML tags, the content could be translated into:

[code lang=”html”]

[/code]

Notice the addition of the <div> attribute “role” with the value, “main” — since we don’t have a semantic tag (yet) for a main content in our document, we used “role” to denote the meaning of that div’s content. “Main” simply means “main content”. It is one of the predefined Role values in XHTML. Here’s the complete list of Role values from W3C.

What is this?

If you say a “loader” you’re right. If you say a “throbber” also right.

But this looks more like a throbber:

—

By the way, for those of you thinking of using animated PNG for throbbers or loaders, browser support is currently bleak.