As defined by Ethan Marcotte in ALA 306, the term "responsive design" refers to the technique of applying differing style rules to your HTML depending on user screen size. For more explanation of responsive design, here's a nice deck by Mike Bollinger.
In this model, you send the exact same HTML to the client whether the screen is small or large. However, if resources (images primarily) referenced in the CSS are not displayed for certain screen resolutions, they may not be downloaded. For instance, for big screens you can use high-res.png
in your CSS and for small screens low-res.png
- the web client may choose to only download the image in the active style. (See @DBUK's comment for at least one important client that currently downloads both! Hopefully clients will smarten up!)
This technique might make sense in your case, or it may make more sense to create a separate mobile site.
Different devices can imply different usage contexts. Mobile phones are always in your pocket - how would the user use your site in the grocery line? Would you want to send them the whole site? Or just a few features? Or totally different features? What if they are on the couch with the TV on casually perusing their iPad?
Mobile devices tend to have slower processors, less memory, and slower connection rates (all of those "truths" become less true every year, btw) - you may want to send a separate mobile site out strictly for performance reasons.
I would venture that, in general, the more static, textual, and content-driven the site (i.e. a blog), the better chance there is to use existing HTML and responsive design. The more interactive, multi-media and user-driven the site (i.e. a store), the better chance you should be tailoring separate sites for individual device types.
Also, don't forget that in this day and age, there is also the question of whether the mobile experience should be a site or an app.