We have come so far with browsers, but unfortunately most email clients are, well, a long way behind. If you have ever tested an HTML email in a few different clients you’ll know the frustration.
Yesterday’s launch of the Email Standards Project hopes to remedy this situation. Some people love it, some hate it, but HTML email is here to stay. And if we could have the proper standards support in email clients then it’s probably fair to say that a lot of those opposed would change their mind.

We have a long way to go, but at least now we have a vehicle!

Time to start downloading and printing! ;)

Jamie asked me the other day if I knew how it was done. I had seen a tutorial for it before, but hadn’t bookmarked or blogged it! So after a few minutes of Googling a found a couple of possible how-tos:

• The Yellow Fade Technique, Revisisted. I don’t know how or why this is better than the original. But it’s revisited, so it must be, I guess!
• The Fade Anything Technique
• And the find of the afternoon – script.aculo.us – this site has lots of goodies. Shall have to poke around here some more!

However, none of these were the original tutorial that I was looking for… :/

Tags: yellow fade technique | 37 signals | web 2.0 | javascript

I gave up looking for something that did this and have been manually taking screenshots as I scolled down the page, and stitching them back together in Fireworks.

But here it is! And it’s a plugin for Firefox! How cool is that!

Edit 2007-12-06: It’s actually now got it’s own domain: www.screengrab.org.

Jacob Neilsen has written another reminder about scrollbars. He recommends:

• Use an actual bar in the shape of a rectangular trough, preferably in a color that contrasts with the background.
• Show arrows at the top and bottom.
• Include a slider (sometimes called a “thumb” or an “elevator”), preferably in a color that contrasts with the trough. The slider’s position should show the visible area’s position relative to the total area, so people can see how much more content they have to scroll through.
• Allow users to scroll by
  • clicking in the trough,
  • clicking on the arrows,
  • dragging the slider, and by
  • using a scrollwheel on their mouse.

Sensible advice to keep in mind, whilst at the same time considering who your audience is and how far you can safely push these limits.

I can hear Michael breathe a sigh of relief now…

Actually putting one together is a bit harder than I first thought. Where do you start?

Then Ryan Singer from 37 Signals penned An Introduction to Using Patterns in Web Design. Bingo – someone has joined the dots for me!

1. Make a list of your “bits”- everything on the page and anything that the visitor might have to do
2. Group them where they share some commonality
3. Prioritise them (Hey, the contents of a Page Description Diagram!)
4. Design each chunk, and then put those chunks together (Hey, a wireframe!)
5. Then design away (Hey, a comp!)

Following Ryan’s steps would make it difficult to end up with a comp that didn’t achieve what it was supposed to in terms of site goals.

Not impossible, mind you, but difficult.

• Like The Sea
• Chien
• Hoop – Tournament Edition
• And if for nothing else than the warped sense of humour: Hengarden

That’s not a typo – Hengarden; not Zengarden…

And he was right – I’d never checked it before.

Turns out, using this is a no-no:
body {
font: 0.8em/1.6em Verdana, sans-serif;
}

Owen Briggs has written a fairly in-depth study (and taken a gazillion screen shots) highlighting the different methods of text sizing and their various behaviours across different browsers.

It appears a more reliable way to achieve the goal is:
body {
font: 100% Verdana, sans-serif;
}

#wrapper {
font-size: 0.8em;
line-height: 1.6em;
}

And before anyone gets on their soapbox and says I shouldn’t specify a font size anyway, go and read Owen’s post. I particluarly like:

“One sizing wisdom is that a document’s main text should be left alone so it can display at whatever the browser default is. This sounds good, but since most browsers default to a text size that I have to back up to the kitchen to read, I decided the zen approach to design wasn’t for me. Besides, if I was really zen I wouldn’t write a stylesheet.” (Italics mine)

Greg’s latest post highlights that content in visual “dead zones” may as well not be there – and he tested this by putting complete gibberish in an identified dead zone to see if anyone noticed.

And only 1 in 25 did!

The other thing that struck me is that in his example, the visual dead zone was smack bang in the middle of the page! Comments brought out that this was due to the visually prominent elements directly above the area identified as a dead zone. People tend to focus on them, and ignore what’s directly below.

Just goes to show: You learn something new every day!