You are here

Responsive Design - It's Not All About Eye Candy

Does this Sound Familiar?

While you are searching on your phone Something Interesting! shows up and you decide to click on it. This leads to a minuscule website requiring a combination of creative mobile gestures (press and zoom, swipe, drag, tilting the phone a different way) to help you sift through content.

You zoom in, "No, that's too close." You move up, "Argh, that's too far up." After a while you have already forgotten what theSomething Interesting! was and an incoming text message reclaims your attention, leaving the hard-to-navigate website in the dust.

This is where responsive design comes in.

Responsive design is an adaptation to the way we use devices.  It presents users with a consistent experience whether they are viewing content on a laptop, smartphone or tablet.

A website featuring responsive design will adapt to the appropriate size and layout depending on the device being used. While apps provide a way for companies to produce mobile-focused content, responsive design offers an optimum browsing experience on each device.

Instead of having to download an app, or come up with creative gestures, you get instant access to highly usable content.

Why is Responsive Design Necessary?

Why is this important? Consumers are buying a variety of devices and using these devices to access online content.

  • As of January 2013, 87 percent of U.S. adults own a cell phone, 45 percent own a smartphone and 31 percent own tablets. (Pew Research Center)

  • Tablet sales are expected to reach 100 million by the end of this year and eventually exceed notebook sales by 2016. (NPD)

  • Tablet shipments are predicted to have a compound annual growth rate of 28 percent over the next five years.

Consumers are also using their mobile devices as they would a notebook or desktop computer.

  • Close to 60 percent of tablet owners prefer to read news articles on the web rather than through an app. (Pew Research)  

  • 31 percent of mobile phone owners go online almost exclusively with their mobile devices.

  • Mobile internet traffic makes up 13 percent of all global internet traffic. (KPCB)

    A Sizable Difference

    When searching on a PC, the difference between a responsive site and a non-responsive site can be seen when adjusting the size of the browser. Here is a comparison of Mashable's responsive site and The Wall Street Journal. We adjusted the browser to fit the screen resolution of a laptop, tablet and mobile screen.

    On the Mashable website, content adjusts as the shape changes. The narrow mobile model has an entirely different layout, allowing the user to browse by clicking a pull down menu and view article previews by swiping.

    The Wall Street Journal site simply cuts off content when the size and shape of the browser window changes. Only a corner of the website shows up on the mobile model. And if opened on an actual phone, the site shows up as a tiny - less usable version.

    We live in a world where people want access to information on any device, at any time, from anywhere. The purpose of a responsive design is to create a seamless transition between these devices. Having a responsive site will ensure that your content keeps people engaged via the device of their choosing.