Jan 162013


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




May 092012

Karen McGrane warns about the dangers of content forking and tells us that the problem responsive design is trying to solve is really a problem with the CMS

The experience of using a mobile website should naturally be different from a desktop experience – not just visual presentation, content should be prioritised and structured differently. The risk, though, is that you’ll wind up maintaining different versions. News flash: this will be a disaster. Duplicate content. Out-of-sync updates. Wasted effort.

When usability pioneer Jakob Nielsen argued that you should “Build a separate mobile-optimised site (or mobile site) if you can afford it” where you cut features and content “that are not core to the mobile use case”, many within the mobile design and development community got out their torches and pitchforks. Seems like people who spend a lot of time thinking about mobile agree that a separate mobile website is “180-degrees backward”.

But what does a “separate mobile website” even mean?

Whether you’re talking about content or code, what you want to guard against is creating multiple versions of your website. It’s called forking, and it’s a forking nightmare from a maintenance perspective. If you fork your website into separate mobile and desktop versions, then you’re stuck updating both of them every time there’s a change. Avoiding this problem is tricky, even with sophisticated content management systems. But before we get there, let’s start with a simple scenario.

via A separate mobile website: no forking way | Opinion | .net magazine.