From the root folder start the app: > node app.js Browse to http://localhost:3000

This web demo was created as a quick test to go over the very basics of responsive web design.

You can follow along and see the progression by going to this location: http://localhost:3000/html/

Based on the original building blocks of a responsive website, we start with a fixed width layout and convert it into a flexible layout, focuing on "mobile first".

Media queries are then added using a series of major and minor breakpoints.

The last step is to add support for basic responsive images.

You can see the fully finished site at either the final.html file or at the root of the project in the index.ejs template.

If you are interested you can also check out my presentation that goes along with this introduction on Slideshare at: http://www.slideshare.net/sspdf/responsive-websites

The examples use LESS to help with a few of the features, including dynamically calculating percentage based and em based sizes. The actual formula is from the book by Ethan Marcotte.

Please note that this sample is not fully finished, nor does it cover support for all browsers. It is only meant to be a starting point for those who want to get their feet wet with Responsive Design.

You can find me at http://seifi.org