Monday 21 May 2012

Why Responsive Design? | Van SEO Design

Why Responsive Design? | Van SEO Design

Why Responsive Design?

Posted: 21 May 2012 05:30 AM PDT

Responsive design has grown from an idea and a buzzword to a new approach to designing websites. As it’s gained attention, challenges in building responsive sites have emerged, solutions to some of those problems have been proposed, and patterns for how designs adapt have been observed.

'Developmental zone flexible' painted in white on a red wall

If we look at the last 4 calendar years (including this one) through the lens of responsive design it might look something like this.

  • 2009 — The prequel. Designers spend time working through the parts that will become responsive design. Approaches to creating flexible grids and flexible media are created and something called media queries starts to get attention.
  • 2010 — Ethan Marcotte coins the phrase and publishes the ideas behind designing responsive and adaptive websites.
  • 2011 — A significant number of web designers take notice and begin building responsive sites and hailing it as the greatest thing since the wheel. Another significant number of designers rail against responsive design, pointing out it’s flaws and the problems it creates.
  • 2012 — A growing number of designers are now tackling these problems. The industry is looking deeper into responsive design. Patterns are emerging and specific problems are being offered working solutions.

The industry is far from solving all the issues. For some, new technology in the form of html tags would help. These are being proposed and considered. For others, it’s a matter of best practices continuing to emerge. We’d like new tools to work with, more capable browsers, and more responsive sites under our belts as well.

Last year as I was learning and beginning my own practice of responsive design, I wrote a series of general posts on the 3 main ingredients of responsive design.

They served as an introduction for 2011. As the industry is getting more specific, I’d like to do the same. Toward that end I want to start another series of posts about responsive design that digs a little deeper. This post is the introduction and a little further down I’ll fill you in on what I’d like to cover in the series.

This is the web. Desktops, latptops, tablets, and smart phones in a variety of sizes.

Why Responsive Design?

Hopefully I’m preaching to the choir, but I realize not everyone is on board with responsive design just yet. It’s really not that hard to answer the question why responsive design, though.

Take a look at the images above and below (created by Brad Frost) showing what the web is and what it will be. You might look at the image above and think it’s manageable. There aren’t that many types of devices after all. Of course, the image doesn’t show every conceivable device in those few types.

Now consider the image below with all the question marks. There are cars, refrigerators, and printers, in addition to the desktops, laptops, tablets, and smatphones we use now. Then there are the question marks for all the devices that haven’t yet been created.

There will be times when it makes sense for a site to craft a design specifically for a single device. The ideas behind responsive design don’t suggest you never build a targeted mobile site. What they suggest is that it’s unrealistic to build a different site for every conceivable device used to access your content.

Your site might be a recipe site and as such it might make sense to design something specifically for a refrigerator display. However that same site wouldn’t need a unique design for a car or printer. The majority of devices used to access your site are inevitably going to see a single design. That design needs to be able to adapt as well as possible to all those devices and device characteristics.

That’s the point of responsive design. Your site is going to be viewed under a lot of different conditions that you can’t anticipate. Therefore it makes sense to design a site that can adapt so it stands the best chance of working well across all those devices.

This will be the web. Desktops, latptops, tablets, smart phones, refrigerator displays, printers, cars, and a lot of unknowns.

The Plan

As I’m writing this introduction, I’m not exactly sure where the series will go and it’s possible some of the posts will raise more questions than they answer. The tentative plan is something like the following.

  • Layout and navigation patterns — What patterns have emerged in the way designers reflow layout boxes and navigation.
  • Responsive Content — Should the same content be presented to all devices? Why or why not and how should we code either option?
  • Scaling type — Basic typographic choices deal with proportion. As the general proportions of our layout change what must we do to ensure our type works well?
  • Flexible images and media — Media is proving to be a challenge in responsive design. How can we serve high quality images to a variety of devices without bogging down the bandwidth for some?
  • Advertising — In addition to the general problems of media above, advertising presents additional challenges as the business model prefers a fixed design.
  • Media queries — Should we base breakpoints on device capabilities or base them on the content? What capabilities besides widths can we test for and do we really know what device is being used?
  • Responsive workflow — With the changing approach are our design tools up to the challenge? Does our workflow need to change?
  • What comes next — What kind of experience are we trying to give visitors? Do we have all the tools we need? Are all the technologies in place? If not what do we need? What’s missing that we’d like to have.

That’s the plan, though again it’s a tentative plan. It’s possible, even likely, I’ll change course some as I work my way through all these topics. That’s only fitting with a series about responsive design. The whole point is to adapt and respond after all.

View more presentations from Sara Cannon

Closing Thoughts

Hopefully by the time I finish this series I’ll have highlighted some of the responsive patterns and solutions that are working and some of the problems still in need of solutions. In just a few months the industry has made significant progress with the details of responsive design.

In that same time I’ve had a chance to develop several responsive sites myself. I’ll do my best to share some of my own experiences throughout each of the posts I’m planning. Certain aspects of responsive design are relatively easy to work with, while others present greater challenges. A lot of it still comes down to new decisions to a different set of questions and a new way of thinking about design.

Next week I’ll dig into layouts and navigation and see what patterns have emerged. We’ll look at how designers are moving around the big blocks of a design and also some of the different patterns people are using to create adaptive navigation.