What is responsive design?

Responsive Web design is an approach to design we use to make websites not only mobile-friendly, but also fully functional on devices with any screen size.

Your website is not simply shrunk to fit; it detects the size of the screen it is being viewed on. Then, it automatically adjusts the size of the images and the layout of the content to provide the best possible experience for your viewer.

Want to see responsive Web design in action? Go to the International Surfing Association’s website (shown on the left) and resize the browser window to see the elements on the page move to keep the website functional and beautiful at every screen size.

Do I really need a mobile friendly website?

People use different devices to find different information. When they are on their phones, they probably want your hours, phone number or location. Like CrossFit Incendia, you can use big beauty images on your site to draw people in while they browse from their computer or tablet, and those photos will shrink down so the practical information is more prominent on a mobile device.

Though you’ve probably noticed the rise of smartphones; as of January 2015, 80% of internet users have smartphones, according to Global Web Index. You’re also probably not surprised that people use them to surf the Web, though you might not have realized that as of 2014, mobile devices account for 60% of all web traffic in US.

But why does this mean your website needs to be mobile-friendly? After all, it will still display on smartphones, even if it doesn’t look pretty.

Your viewers expect it to look pretty.

Last fall a Google survey found that 72 percent of mobile users say it’s important to them that websites are mobile-friendly. And they’ll interact with your website more. Here’s a great example:

Electric Pulp was not convinced responsive Web design was worth the time and money either. The developers there ran a test – they watched the conversions, transactions and revenue for O’Neill Clothing, whose site it had recently designed, for three non-holiday weeks. Then they made the site responsive without notifying the viewers and watched the conversions, transactions and revenue for the next three non-holiday weeks. They found that iPhone transactions more than doubled, and Android transactions more than quadrupled. But people weren’t just purchasing on their phones instead – transactions on non-mobile devices increased by over 70 percent as well.

Mobile devices account for 60% of all web traffic in US.

Mobile Traffic

80% of internet users own a smart phone.

Smartphone Owners

Why is responsive design better than other mobile options?

1. It saves time and money.

Your other two options, a mobile app or a mobile website, live separately from your website, so you have to pay for them and update them separately.  Though a responsive website usually costs more than a static website, the difference in price is less than the cost of an app or a mobile website. You also only have to make updates in one place, and never have to worry about keeping multiple websites consistent.

2. It optimizes for every device, even the ones that haven’t been invented yet.

As new technologies like the tablet and Apple’s huge Thunderbolt display continue to spring up, it’s become nearly impossible (and hugely expensive) to make a site for each device. Responsive design targets specific screen widths rather than specific devices (read more below) so as these new technologies become popular, your website will already look and function beautifully on them.

3. Google likes it better.

Google has named responsive design its recommended configuration for websites that target smartphones. Having only one website makes it easier for both Google and other users to find and share your content.

Where did responsive design come from?

People have been able to access the web on their phones since the PDAs of the late 1990s, but it didn’t become commonplace until the launch of the iPhone in 2007 and the other smart phones that quickly followed.

Web developers reacted to this growing trend by creating mobile websites – another version of your website optimized for those smaller mobile device screen sizes. But as smart phones became more common and tablets came on the market, screen size continued to diversify.

In 2010 Ethan Marcotte wrote an article coining the term “responsive Web design” as a solution to the problem (for Web designers anyway) of the increasing number of screen sizes.

“Rather than tailoring disconnected designs to each of an ever-increasing number of Web devices, we can treat them as facets of the same experience. ” -Ethan Marcotte, Responsive Web Design

Marcotte, inspired by “responsive architecture,” where physical spaces respond as people pass though them, argued that designers should create websites that adapt to the devices that display them. He goes on to explain how we can do this using three existing techniques: media queries, flexible images and fluid grid layouts.

As technology continues to give us more and more variations of devices to view websites, responsive design has become a standard for many designers. .net magazine named it number one on its list of 20 Top Web Design and Development Trends of 2013.

How does responsive design work?

Responsive Web design uses three techniques: media queries, flexible images and fluid grid layouts.

A media query discovers information about the device a website is being viewed on, and allows us to apply certain rules about the styling of the website to certain devices based on that information. In responsive Web design, we use media queries to assign style rules to certain screen widths. It is important to note that the media query detects the size of the window of the browser the website is being viewed in, not the size of the physical screen on the device. Because of the wide range of screen sizes available, there are no longer distinct breaks between the screen widths of types of devices – for example, the smallest tablet is close in screen size to the largest phone. So instead of targeting specific devices, we use the media queries to target widths where a change in the styling will make the website more functional and visually appealing.

Flexible images are images that change in size as the screen does. We do this by assigning the width of the image as a percentage rather than a specific number of pixels. To ensure images don’t get too big or too small, we use a fluid grid layout.

A fluid grid layout allows the website to change as the size of the screen changes.  As with the images, rather than assigning a specific number of pixels as the width of an element on the website, we use percentages. This way the element will shrink or expand as the screen does. To ensure elements don’t get too big or too small, everything is build on a grid, and the elements shift on the grid as the screen size changes.

We create this shift by creating different layouts for the different screen sizes we are targeting with the media queries. For example, you can have a sidebar that sits on the right of the page and takes up one third of the page when the site is viewed on a desktop and tablet. On a mobile phone one third of the page will not be enough room for the information in the sidebar to be legible, so we move it to below the other content that was taking up the left two-thirds of the screen, and both elements will be the full width of the mobile phone’s screen.

All three of these techniques are used together to make a page respond to the screen size. For example, take a website with six images that display in two rows of three on a standard laptop computer, each one-third of the width of the page.  If the same website is viewed on a large desktop screen, the media query recognizes that the screen is larger, so it changes to the layout we have assigned to this screen size, and displays the images as one row of six, each one sixth of the width of the page. On a mobile phone the images will display in six rows of one image the full width of the screen, and on a tablet the images will display in three rows of two images half the width of the screen. Because the media query detects the size of the window, not the screen, these changes will also appear if the viewer resizes the window of his or her browser.