First, how are you getting the device? Second, don't assume screen size = low bandwidth, and DON'T assume that just because someone is using a small screen, that means they are only interested in 'mobile' content. You should be using one set of HTML markup for one URL. The Media Queries should determine the styling and layout differences.

Also, don't feel like you have to have media queries for every major screen width(320,480,768, etc...). Start out with a linear, 'mobile/small screen' first layout, and then increase width and see where the design or layout could use refinement, or breaks totally, and then add a media query and adjust for that resolution.

Good luck!

For articles/links, follow @RWD and read the book he wrote, if you haven't already.

For images, look at <picture> polyfills and keep an eye on what's going on with the Responsive Images community group. - http://www.w3.org/community/respimg/

(by the way, my web design app, Edit Room will handle all of this gracefully for you very soon, and gives you visual layout, design and content organization tools to build finished designs without initial coding. http://www.edit-room.com )

I'm getting the device by the User-Agent Header with a regex, but I'm curious, why shouldn't we go with small screen == mobile, the largest mobile width I know of is 800px, and occording to most stats I've seen, that seems to account for less than 2% of all desktop users.

Thanks for the links - also good luck with edit-room.com!

Thanks :)

Basically, people use their phones/devices from home, not just on cell networks, and can have plenty of bandwidth on wifi. If a site is designed well and the type is readable, people use them lots more. With a small screen, you can only assume one thing - a small screen :)

Have you looked at Twitter Bootstrap's Responsive scaffolding?

http://twitter.github.com/bootstrap/scaffolding.html#respons...

I recently heard about picturefill, it looks pretty cool to me! https://github.com/scottjehl/picturefill

splatcollision's answer is double-triple good, so I won't try to revisit any of what he said, except to say that having done it once (fairly painfully, though that was before Sass and Less were as pervasive), I've found 'Skeleton'[1] to be a great head start (if you're willing to use its grid system, which I like a ton more than any other grid system I've seen.)

[1] - http://getskeleton.com/