Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques

Question

I hope this question doesn\'t end up being closed for being too broad a subject but I was wondering about Responsive/Adaptive Web Design, i.e. one website for all browsers,

Answer 1

The two buzzwords at the moment are graceful degradation and progressive enhancement and I'm a fanboy of the latter. Graceful degradation means you hide and/or resize elements on the page for viewing on a mobile screen. Progressive enhancement means you code for the mobile browser, then add bits on if they're using something bigger. The latter is best because it prevents mobile browsers having to download giant images and a bunch of includes it'll never use, and mobile bandwidth is at a premium.

I use 320andup which is a great way to style a web page at 320px for mobile browsers, then other resolutions for tablets, netbooks, PCs and ridiculously large Mac displays. Web pages look great on all resolutions.

I never use percentages. I style a web page at 320px fixed width, 480px fixed width, etc so I know exactly how it'll look on each device. I do all my image scaling on the server with variables in the URL - the server caches the resized images for later page loads. That way my shiny web 2.0 logos are tiny for mobile devices but large on the big screen. This is another reason not to use percentages!