What is Responsive Design? (Explainer Video and Infographic)

responsive web design

It’s taken a decade for responsive web design (RWD) to go mainstream since Cameron Adams first introduced the concept. The idea was ingenious – why can’t we design sites that adapt to the the viewport of the device it’s being viewed on?

What is Responsive Design?

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience — easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors). A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule.

Wikipedia

In other words, elements like images can be adjusted as well as the layout of those elements. Here’s a video that explains what responsive design is as well as why your company should be implementing it. We recently redeveloped the DK New Media site to be responsive and are now working on Martech Zone to do the same!

The methodology of building a site responsive is a bit tedious as you need to have a hierarchy to your styles that are organized based on the size of the viewport.

Browsers are self-aware of their size, so they load the stylesheet from top to bottom, querying the applicable styles for the size of the screen. This doesn’t mean you have to design different stylesheets for every size screen, you just need to shift the elements necessary.

Operating with a mobile-first mentality is the baseline standard today. Best-in-class brands are thinking not just about whether their site is mobile-friendly but about the full customer experience.

Lucinda Duncalfe, Monetate CEO

Here’s an infographic from Monetate illustrating the potential benefits of creating one responsive design for multiple devices:

Responsive Web Design Infographic

If you’d like to see a responsive site in action, point your Google Chrome browser (I believe Firefox has the same feature) to DK New Media. Now select View > Developer > Developer Tools from the menu. This will load a bunch of tools at the bottom of the browser. Click on the small mobile icon to the far left of the Developer Tools menu bar.

responsive-testing-chrome

You can use the navigation options up top to change the view from landscape to portrait, or even select any number of preprogrammed viewport sizes. You may have to reload the page, but it’s the coolest tool in the world for verifying your responsive settings and ensuring your site looks great on all devices!

3 Comments

  1. 1
  2. 2

    Thanks a lot Douglas for this well explained article. I must agree with this though on the content side of things. For most of the sites we make a responsive layout will not be enough. We need responsive content. But for the more basic websites we will sure going to use your well documented article on how to handle this!

What do you think?

This site uses Akismet to reduce spam. Learn how your comment data is processed.