Responsive Design Is Here To Stay

   Front End Development

Back on May 25th, 2010, Ethan Marcotte wrote an article for A List Apart titled Reponsive Web Design. He then went on to write a book entitled Responsive Web Design, which was published early in 2011. You could say Ethan is the father, or creator of Responsive Design, and that his book and writings are quickly becoming the gold standard for a new age in web design.

Old Meets New

Ethan’s premise of using a flexible grid system to achieve a responsive design that degraded gracefully between screen resolutions was really nothing new. Flexible and fluid layouts have been a part of web design since the beginning. We’ve all at one point used percentages for widths. Flexible designs were never highly adopted because of the ever changing landscape of devices we use to view web content, and controlling the content within those flexible bounds was a difficult task.

Jeff Croft wrote an interesting article that aims to provoke thoughts about the future of responsive design. He makes great points about responsive design being just that — responsive design it ends at visual design. As user experience designers, we don’t take into account other user contextual situations, and we focus on what we can control. In this case, that’s the user’s screen resolution.

Just a few of the interactions Jeff mentions —

Some, off the top of my head: Where are they? Home? Work? Inside? Outside? Private place? Public? Moving? In a car? Driving (eeek!)? On a train? What’s the weather like? Who are they with? Are they alone? In a group?

Certainly some great scenarios, but no great solutions are available for this type of user context. Yet. This sort of contextual design is something that many designers are still learning to understand. Designing for your users environment has never really become a factor. With more and more users on the move, and the majority of them using smart phones, we need to be more concious of their surroundings and how a design could change based on that.

Modus Create Mobile
Modus Create's website on iPhone. Vertical stacking is common for mobile layouts.

Is it good for our industry?

At the end of this year, it would not surprise me if “responsive design” is the most searched term on every web design and development website. Everyone is jumping on the bandwagon, and I think it’s great. When people get behind a technology, and start contributing, only great things can happen. There are already several great frameworks for getting up and running quickly with a responsive grid system.

Innovation doesn’t come from following, however. Developers need to even know, start thinking beyond the fluid grid. What comes next? Hard to say. For a long time we have let the media in which users consume content dictate our development technology choices. With the introduction of many devices with many screen resolutions, comes the need to support many devices with minimal amount of overhead — which is how flexible grid systems were born.

Fixed width is not dead

Not by a long shot. There will always be a place for a well structured and designed fixed-width website. And even greater still, not every website or application needs to be responsive. Think about the goal of your application, think about who is going to be using it, and where. Then decide if it needs to be flexible enough to deal with multiple devices gracefully.

Going big?

When most people think of a fluid and responsive design, they usually think mobile. Your site needs to look great on mobile, which is true. But what about a large portion of users that have screen resolutions pushing 3000 pixels? Gizmodo took a stab at designing for those users with their “HD View”. Massive, beautiful images gracefully cover your available real-estate. Viewing the site on my 27″ Cinema display with it’s 2560×1440 resolution, the site looks wonderful. Just an example of a little innovation.

Modus Create's Training page on the iPad. Landscape provided a perfect amount of space for a 960 width grid.

Closing thoughts

I purposely wrote this post with the intention of not getting into technical details about how to pull of a responsive design. There are hundreds of sites, many of them copied from one another, who lay out different techniques for creating a fluid grid, fluid images, type, and everything else you would need to be successful with your design.


Like What You See?

Got any questions?