Today I gave a presentation about progressive enhancement to some colleagues of mine. Instead of posting the presentation I’ll just post the URL’s and the different browsers to check them in. Please leave additional examples of enhanced sites in the comments.

Give it to me!

My one and a half year old daughter started making things. And when kids start making things parents start collecting them. I don’t collect her drawings yet but, much easier, I collect the pictures she takes with my wife’s iPhone. Now I didn’t want to make a virtual shoe box on my own computer which is put away to collect dust and never to be seen again, no, I decided to make a website. But how do you make a website for a one and a half year old kid? Work with visuals of course, that’s easy. And don’t use letters or numbers because she won’t understand them so why bother?

What’s that got to do with Lynx?

I wanted to abort an OSX Automator workflow if there’s no internet connection. That function does not exist. It can be done by inserting the action Run Applescript though:

try
do shell script "curl www.apple.com"
on error
do shell script "killall name-of-this-script"
end try

Fill in the name of your Automator application and if there’s an error the script will terminate itself. This way you can build multiple checks. For instance I have another check that stops the automator workflow if a certain disk is not mounted. And suddenly Automator becomes a handy tool.

Shaun Inman redefined the feed reader with his brilliant application Fever. The best thing about it, apart from the brilliant user interface, the beautiful layout, the usability, the feel of a native app, is the fact that you can actually use high volume feeds without reading them. The idea is that a link gets more interesting when more feeds link to it. So fever has this section called Heat where all these interesting articles are shown.
Get on with it!

I just discovered a nice feature for minimalist frontend developers. You can use all elements with content for styling simply by using

* {display:block;}

Or display inline, or table-cell or whatever. All elements, including title, style and head can be used for styling now. Have fun with it!

(I have only tested this on FF3.5 and Safari. I guess it works on more browsers).

The designer wants all images to be centered inside a square box with defined dimensions. The longest side of each image is the same length as this dimension but the smaller side is unknown and variable. Easy you say.

<div style=”background:url(path/to/image-w100xh75.jpg) no-repeat 50% 50%;width:100px;height:100px;”></div>

Easy it is. Unless the usability expert comes knocking on your door. Background images don’t behave the same as normal images. In most browsers, for instance, you can’t easily download a background image by right clicking on it.

So you do want the background positioning but you also want some important behaviour of a normal image. Here it is: Centered images in the middle of a block with normal usability.

It does not work in fluid or flexible layouts of course. But it does work in all serious browsers and in IE7. Haven’t tested it in IE6 but there’s no reason it wouldn’t work there. I’m not sure if it creates a performance issue. The images are downloaded only one time, so that’s not an issue. The only problem might be double memory usage. I haven’t tested that.

My design buddies @work came up with one of the most complex layouts I ever had to build. You could desribe it as an elastic layout with boxes with a flexible width which should have the same height as it’s siblings. With rounded corners and dropshadows offcourse. But that would be too easy a description. There are templates with 2, 3 and 4 boxes next to each other and these boxes can be contained within containers with different widths. A cynic would ask me why I didn’t use tables and he would be right. It might have saved me a lot a hassle. But forget about tables.

Ok, no tables

A few weeks ago I upgraded an old Pivot weblog to the latest version of WordPress, a weblog system which is a bit more flexible, I think. One of the things I dislike though is some of the HTML that comes out of it’s core functions. For example an image with a caption.

The known problem with an image with a caption below it is that it is impossible to make the text as wide as the image without setting the width of the image on the caption.
This is fascinating!

The last few weeks I used my small URL generator a lot. I even bought a new, smaller, domain for it to make it a bit more useful. For Twitter it’s perfect. But when using it in e-mails I got some complaints. People are happy that all links are clickable (some mail programs cut of every line after an x-amount of characters, leaving many long URL’s unclickable) but there was no information about the link left in the new, small URL. So I decided to change the script.

Read how to make your URL’s fit your needs

I switched to HTML 5. A nerd blog should have a nerdy doctype. There’s not much to say about it. I replaced the first div in the old HTML with a new element called header, I replaced the following divs which are direct children of the body with the new element section, I replaced the div that was a child of the section with the element article and replaced the last div of the page with the element nav. I could have chosen the element footer, but I think nav describes its purpose better. I don’t have an aside so I don’t need that element.

Some details about HTML 5