The drawback of this is that it’s not ready for use just yet—browsers that don’t support SVG in background-image will not provide any fallback, even if you supply another background-image value; so in non-supporting browsers, no image at all will be displayed.

This was annoying me a little, and I couldn’t find any workarounds that didn’t use JavaScript. However, after a bit of head-scratching I’ve come up with a way to get around it.

In order to have browsers which don’t support SVG display a PNG image instead, you should use this code:

E {
background-image:  url('image.png');
background-image:  none,url('image.svg'), url('image.png');
background-size: 100% 100%;
}

Browsers which support SVG and multiple backgrounds will show the SVG; browsers which don’t support SVG will fall back to the PNG in the background-image stack. As far as I know, all browsers which support SVG also support multiple backgrounds; any which don’t (i.e. IE) will fall back to the PNG in the first background-image declaration.

Update: Thanks to a comment I have amended this technique. IE was not falling back to the first background-image as it should have done, but I got around this by adding a none value in the declaration. This invalidates the rule in IE and forces the fallback to the previous declaration.

You can see a demonstration of it here: Background SVG with PNG fallback — demo.

This technique is not without its own caveats, however. First and foremost, the SVG must not have a transparent background, or else the PNG in the background layer below it will probably show through. Also, depending on how fast the SVG file loads, the PNG file may show up first and then be covered over.

Finally, if you’re using the same background image at different sizes and either your browser doesn’t support background-size or you don’t want automatically resized PNGs, you’ll have to use the rule for each instance:

E {
background-image:  url('image-small.png');
background-image:  none,url('image.svg'), url('image-small.png');
background-size: 100% 100%;
}

F {
background-image:  url('image-large.png');
background-image:  none,url('image.svg'), url('image-large.png');
background-size: 100% 100%;
}

And of course, if you’re creating multiple PNG images anyway, you may feel there’s not a lot of point in using SVG images as well. I’ll be the first to admit that this isn’t a completely bulletproof technique, but I offer it in the hope that in certain circumstances it could be useful.

In the article I explain how to build a dynamic Contact area, as we did on our recent redesign of Preloaded.com, using the Web Storage API and the BBC’s Glow Javascript library.

I’m not sure what the rights situation is with this article, but I hope that at some point in the future I’ll be able to post it here on my blog. But in the meantime, you can buy a copy of Net magazine in the UK at all good newsagents, as the saying goes (I don’t know if it will be in overseas editions also).

On the subject of print, I’m also currently writing a book about CSS3 which should be published later this year. I’ll have more information on that nearer the time.

I’ve been slowly introducing IA into my role over the past three years, and so this is a logical step for me to take. I’ll be sad to leave my current agency, but delighted to be moving to somewhere I’ll be able to focus on what I think are the next hot topics on the web: findability & usability.

In a piece of happy serendipity, there’s a big user-centred design project underway at the moment with the redesign of the Drupal community site and, with it being open software, the whole process is being conducted transparently — which means a great opportunity to study and learn. Leisa Reichelt is leading the discovery and planning stages, and blogging every step; you can read the draft Experience Strategy, how Drupal users were defined, and how to get involved. Definitely worth keeping an eye on.

I won’t be leaving web development behind completely; it’s my passion, I wouldn’t be able to. Especially now that we’re entering into very exciting times with the forthcoming release of IE8; not because of any new features, but because we’ll finally have a completely stable, cross-browser platform of CSS2.1 to develop on. The IE team are doing a sterling job of releasing information about the new browser; for example, discussing developer tools and browser-specific CSS prefixes. Let’s hope they don’t fall into the post-launch silence that happened after the release of IE7.

So, interesting times to come. First, however: a holiday. Back later.

So I was intrigued when I saw what I believe may be the first instance of this strategy being used here, for Orange’s new “I am” campaign:

I queried the top four search engines here in the UK (Google, Yahoo!, MSN, Ask) and a link has been sponsored on all four. However, top results were returning a variety of different results, none of them relating to this campaign.

Like the author of the Japan article, I wonder how susceptible this is to counter-attacks from rival advertisers (or mischief-makers) who could game negative results to the top of the rankings? It’ll be interesting to see how this develops.

I’ve given this one a version number of 0.5, as I still have a lot I want to do with it, notably: embedding more microformats in the code; adding more progressive enhancement to the CSS; making more use of WordPress’ tagging system; and testing more thoroughly in IE.

However, I’m pretty pleased with the more typographic direction in this design, and am excited to be using a theme I genuinely care about.

If any readers have any constructive criticism to give, please go ahead and do so in the comments. However, do please be gentle with me!

When they did, I was shocked. The majority of them were terrible. From the introductory email to the CV to the examples provided, only one or two were good enough for consideration.

To pass on advice to prospective job seekers (and hopefully make my job a little easier in future), here are five tips for applying for a job in web development:

1. Read the advertisement

   This may sound ridiculous, but you’d be surprised how many people don’t seem to have done this. I asked for someone who could come into our offices in central London when needed; I got replies from Brazil, India, Russia, Indonesia. I know we live in a globalised world and work in an industry which lends itself to distance working, but I specifically requested someone who could come to our offices. If that wasn’t necessary, I wouldn’t have said so in the ad.

2. Take care over your covering letter/email

   I understand that English is not first language to everyone, and I’ll pay no attention to grammatical errors if that’s the case. But at the very least I’d expect to see it spell checked, with punctuation and capitalisation. I received emails all in lower case written in txt speak; ‘i wld like this job can u plz reply asap’; if you don’t care about your application, why should I?

3. Make your CV clear and informative

   I want to be able to see, at a glance, your most recent experience and your key skills. I don’t really care where you went to school or what you studied, I want to know if you’re good for the role I’m offering. There are literally thousands of websites giving information on how to write a good CV; take a little time and read one of them.

4. Provide links to examples

   I want to know how good your code is, and for that I need to see it. Not images of websites you’ve worked on, but live pages I can view the source of for myself. Also, we work on the world wide web, where the hyperlink is king; if you don’t put hyperlinks in your CV or the covering email, I’m far less likely to take the time to visit your examples. Live links, and lots of them, please.

5. Know what you are talking about

   The most important rule of all: don’t try and bullshit me. If your covering email says you have been working as a professional web designer for five years, I expect to see evidence of that. I looked at some of the examples I was sent today and I thought I had travelled 10 years back in time; table-based layouts with inline styles and javascript, Times New Roman for all the text, badly-sized images, ugly tiled backgrounds… it was nasty. And there is no excuse for it; there’s an embarrassment of fantastic articles on web development available, and sending me an amateurish ‘portfolio’ just proves to me you don’t pay attention. If you don’t have a lot of commercial experience, you should have a knock-out portfolio site to make up for it.

   And if the position I’m advertising is for an HTML and CSS developer, why would I want to see your Flash portfolio? Why send me a CV with ten years of server-side programming jobs? I want relevant experience, relevant examples.

   By all means, if you have knowledge of a subject but not much commercial experience, embellish your CV a little; we’ve all done it. But don’t flat-out bullshit me by claiming you know something, when all the evidence points to the contrary. If I don’t catch it at the CV stage, I’ll definitely catch it at the interview stage, and that’s more embarrassing for you.

Phew! That’s a load off my chest.