Responsive Design

Responsive design is a way of designing web pages for mobile and desktop devices. The idea behind responsive design is that you design your web pages so that they respond to whatever device that is viewing it. Prior to the release of Responsive Design, a cellphone user was forced to see a desktop site and had to scroll across to view all the page. Similarly, a laptop user with a small screen would also have to scroll horizontally to see a wide-screen monitor site. Responsive design looks at each of these scenarios and adapts to display the content most effectively.

Over the last few years, more and more people and businesses are using mobile devices to browse the internet. One third of New Zealand internet users access the internet via a Smartphone. This trend will continue to grow in the future with 50% of internet users expected to browse the net on a mobile device. This means that with more and more different types and sizes of devices coming online, your website pages will need to look different depending upon what is displaying them. Enter responsive design.

Why Responsive Design is a Good Idea

The best web designs are the ones that make things easy. Responsive web design makes your website user friendly for mobile customers. It is web design that responds to the user as they arrive at the web page.

Think about your typical desktop browser. Even if it is not maximised, it almost certainly has a width of at least 960 pixels. That is a lot of space to place lots of columns of text and images. If you compare that with a smartphone in portrait mode, you are looking at a device with about 480 pixels of width. That is half the screen space. A feature phone has even less space with 320 pixels or less in most cases.

If you create a page with a fixed-width layout that is 960 pixels wide, it will look fine on your desktop monitor. But when you view it on a tablet, it’s going to look small. A smartphone will make it look even more cramped  and on a feature phone, the page might not display correctly at all.

However, with responsive design, you create a design that works for any of the devices that visitors to your website might use. What sets responsive design apart from websites designed specifically for mobile devices is that you don't have to create a separate webpage for every type of mobile browser you want to support. Instead, responsive design simply looks at the features of the device viewing the page, and delivers the styles appropriate for that device.

Why Creating a Whole Separate Website is a Bad Idea

It can be tempting to create a “mobile” site with a separate sub-domain or site location. Then you just put all the mobile friendly site features like single-columns, limited content and reduced navigation in that one location and point mobile users there.

In the short term, this can work, as it gets up a mobile site quickly. But eventually it will start to cause problems. The first issue comes when you realise that you have to post every article twice; once to the main site and once to the mobile site. Why create that extra work for yourself?

Responsive Design Treats Mobile and Desktop the Same

A responsive web design uses the exact same content to create a page that works whether you are viewing it at 1800 pixels wide or 320 pixels wide. But the pages that are created may look vastly different, while containing the same content. This means that whether you come to the site on an iPhone or a 27-inch iMac, you will get the same content; in fact you will go to the same URL. But on the iPhone you might see the page with only one column while the iMac gets five. But they are both considered equally important when delivering the content.
The website responds the the device and adjusts accordingly, while still retaining the important content.                            

Is Responsive Design Right for Your Business?

It depends what your customers are using to visit your site. You may find that it is not essential, if only a very small percentage of your customers are using mobile devices to view your website. You can use Google Analytics to track traffic to your regular website that comes from mobile devices like iPhones and Android devices. All traffic from mobile devices can be viewed by device or carrier under the 'Visitors' section in the 'Mobile' tab of your Analytics account, or in the 'Mobile advanced' section.

website on mobile
Example of Responsive Design

As takeup of smart phones and tablet increases, so does the importance of mobile-friendly websites.

If Search Engine Optimisation is a core component of your digital marketing strategy, having a mobile–friendly website is becoming essential.

Mobile sales have already overtaken desktop sales, and mobile Internet usage is predicted to overtake desktop internet usage by 2014. It is only logical that mobile search will overtake desktop search at some point in the near future as well.

Since 67 percent of users claim they are more likely to purchase from a mobile-friendly website, companies that rely on SEO are wise to begin making the transition to mobile-friendly websites, and responsive web design specifically.

The argument between whether to choose a responsive website or a separate mobile website is a highly debated topic. However, the truth is that both options have their pros and cons.

The option that is best for your business depends on many factors, such as the purpose of the website, the intended target audience, and whether SEO is a factor.

If SEO is a factor, here are three reasons why responsive web design is the best option for your mobile SEO strategy.

Recommended By Google

With 67 percent search market share, when Google speaks, search marketers listen. Google states that responsive web design is its recommended mobile configuration, and even goes so far as to refer to responsive web design as the industry best practice.

This is because responsive design sites have one URL and the same HTML, regardless of device, which makes it easier and more efficient for Google to crawl, index, and organize content. Contrast this with a separate mobile site which has a different URL and different HTML than its desktop counterpart, requiring Google to crawl and index multiple versions of the same site.

Additionally, Google prefers responsive web design because content that lives on one website and one URL is much easier for users to share, interact with, and link to than content that lives on a separate mobile site.

Take for example a mobile user who shares content from a mobile site with a friend on Facebook who then accesses that content using a desktop, which results in that user viewing a stripped down mobile site on their desktop. This creates a less than optimal user-experience, and because of the large emphasis Google is now placing on user-experience as a ranking factor, this is essential to take into account with regards to SEO.

One Website, Many Devices

One of the most appealing aspects of responsive web design is that a responsive website can provide a great user-experience across many devices and screen sizes. This is an important characteristic, since it is impossible to anticipate all the devices and screen sizes searchers will use to access your site. A site that works well regardless of these variables will provide a better and more consistent user-experience than a separate mobile site that is designed for a specific device and screen size.

Let’s take the following example. Someone searches for a product on their smartphone during a lunch break at work. They find a site that has the product they’re looking for, and decide to continue researching this product on the same site when they get home. Except, when they get home, they will use their desktop instead of their smartphone.

If the site in this example is responsive, this person will have a positive user-experience when transitioning from mobile to desktop because they will view the same site on their desktop as they did on their smartphone. On the other hand, if the site is a dedicated mobile site, this person will become frustrated with the fact that they have to locate the desktop version of the site, and find the product all over again.

Easier to Manage

Having a separate desktop and mobile site requires having separate SEO campaigns. Managing one site and one SEO campaign is far easier than managing two sites and two SEO campaigns. This is a key advantage a responsive website has over a separate mobile site.

That being said, there are benefits to having a mobile-specific SEO strategy, such as optimizing for keywords that are more likely to be searched when someone is on their smartphone.

For example, someone performing a mobile search for a local restaurant may be more inclined to use the word “nearby” in their search query. However, a separate mobile site is not a requirement for a mobile SEO strategy, and there's no reason why mobile-specific keywords can't be incorporated into a responsive design site as well.


Responsive web design is recommended by Google, it allows one website to provide a great user-experience across many devices and screen sizes, and it also makes managing your SEO strategy easier. For these reasons, responsive web design is the best option for your mobile SEO strategy.