Responsive Design

[bungle1977]

Hi

I'm getting interested in responsive website design but have no idea where to start. Are there any good tutorial? I'm not all that tempted to use WordPress partly because I want to learn from scratch and avoid the generic looking sites I see almost everywhere.

Thanks in advance

 

[bigdave]

if you google "how to make a website responsive" or "how to build a responsive website", you get quite a number of really useful resources.

My understanding of responsive design is not to build the site for a desktop and then for tablets/phones but to consider all the viewing platforms equally during the design and build. To me the key to achieving this is ensuring that the html content of the site flows well.

*EDIT*

If I remember correctly, there was a thread on the key areas of responsive web design a while ago which included input from many of our web developer members.. I will see if I can find it for you.... scratch that, I cant find it.

 

[Corrosive]

There are thousands of tutorials out there and the trouble is that it is a new discipline (relatively speaking) and there are really varied ways of doing things. Some people advocate a fluid grid system and others wouldn't touch them with a barge pole. Also there are a fair few ways to handle images for Retina Display Apple devices, i.e. Designing for Retina Displays, Optimize Website for @2x Images - Designmodo and that is just the tip of the iceberg. You will need (in my opinion) to check out some javascript resources such as modernizr, selectivizr and respond. And, of course, the key to responsive design is learning CSS Media Queries; Different Stylesheets for Differently Sized Browser Windows | CSS-Tricks Other than that you are just gonna have to work your way through it. If, like me, you did static width sites for years it is a pretty big learning curve. But, if your technical CSS and (as bigdave says) you understand page flow within HTML then it will click. Hope that helps.

 

[RDB]

A good starting point would be Responsive Web Design by Ethan Marcotte. Fantastic little book, should at least get you started.