Responsive design for dummies

 interface, Web Design
Jan 162013
 

internet-web

The concept, in a nutshell, is that websites can be written to adapt to multiple screen sizes. Instead of writing different presentation layers to suit a desktop browser or a tablet or a smartphone, presentations can be created to respond to the screen they are presented on.

This notion seems pretty straightforward, and in some ways content has been adapting to platforms for a few years. But this approach is revolutionary in how it abstracts form from function and the flexibility it provides designers as well as business owners.

Here are the basics that marketers need to know about responsive design, along with the pros and cons of facets of the concept.

What is responsive design?

We are designers for things we can’t predict. It seems like every month there is a new device — with a new screen size — coming to market, and users want to consume their content on it. One way to address this approach is writing code that adapts content to the page that it’s on.

This approach, called “responsive design,” was coined by Ethan Marcotte to describe code that uses fluid design grids and lays pages out depending on the media, or device type, requesting the information. By using a combination of HTML, CSS, and JavaScript, the system can adapt the look and feel of its content to work in a number of different places. For example, open up Sony.com. Resize the browser window, and see how (and whether) the screen redraws itself. There are three breakpoints in the design where the browsers redraws the content to fit into different screen resolutions.

MORE:  Responsive design for dummies