Web development – Me now vs me then
I was recently asked to write a case study for a project I just finished at Born Digital and I thought it might be fun to write what my first thoughts would have been to the design a couple of years ago.
Here’s the design, and what my first reactions would have been to each labelled part.
1 – Facebook and Twitter icons
I’ll do them both as normal links, each with a background image that doesn’t repeat itself, some padding on the left so the images have somewhere to go.
2 – Mailing list sign up
The ‘Join our mailing list’ text is going to have to be an image since its not one of the Common fonts to all versions of Windows & Mac (I used this site a lot). Also, the text within the text box with the right pointing arrow will have to be an image, I’m thinking I could do some nice javascript so that when the user clicks in the text field the background image disappears.
3 and 7 – Header and footer logos
Just a images absolutely positioned, no problem.
4 – Main navigation
I know what I’m doing here. It’s a custom font so I’ll have to have a background image for each link. Plus, each link needs a rollover effect so that’s another 6 images. 12 images! Man I hope they don’t need any extra links or want to change the text.
5 – Headings within the content
These are definitely going to change, so I can’t do them as images. I’ll have to tell the client that we can’t use that font in the body, I think if I use Arial in bold it’ll be pretty close though.
6 – Large image caption
I could use a semi-transparent background image for the black box and the text will have to be an image with a transparent background. I’ll have to include a png fix for internet explorer though. Its either that or the caption has to be part of the large image.
So that’s 20 images all in all, I’d better fire up Macromedia Fireworks.
Ouch!
I’m sure there must be a few websites I’ve previously made still hanging around which use background images with the same zeal, back in the days of ie6 before web fonts.
If you’re interested, here’s how I actually did the website Birdcage Gallery – Case Study.
spoiler: web fonts, image sprites, optimised images and caching. There were only two images used in the homepage.