If you are a web designer and do not know what I mean when I say “responsive web design” get your backside over to A List Apart and read Responsive Web Design by Ethan Marcotte. Also check out Jeremy Keith’s posts on responsive design.

I’m not going to go into the details of responsive design here but in a nutshell its a way of building sites that adjust their design to best suite the screen width or device your content is being viewed on. Resize your window on this site and you should see what I mean.

What I’ve noticed while playing with responsive design is how much performance can be negatively effected when using the most basic CSS3 techniques on low powered devices such as the iPhone. It seems our friends Mr Drop Shadow and Mrs Gradient are messing with the responsiveness of our responsive sites.

Check out these two very simple (and ugly) pages on a mobile browser (Sorry I’ve only tested on webkit so far). The first contains just a few CSS3 goodies (Drop shadows, rounded corners and gradients). The second identically marked up page contains none of these fancy pants styles.

On my iPhone 4 the difference in responsiveness is obvious. If I scroll down the fancy page at speed it becomes sluggish and well un-responsive. I can see the browser struggling to render the page as it descends. No such problem on the basic page as it zips along merrily. The sluggishness on my old iPhone 3G is even more apparent.

I’m not for a moment saying stop using CSS3. I love it too much. Instead maybe use it responsibly. When adjusting your designs for the smaller screen think about the performance not just the appearance.

note: The sluggishness mentioned is less noticeable on a recently rebooted iPhone. But who reboots their iPhone.