Published on the 11/06/2014 | Written by Zeald

Your prospective customers are already using mobile devices to search for the things that you sell. Is your door open when they come knocking? Or is your website a member of mobilus horribilus?…

What is responsive design?
Responsive design is a way of designing websites so that they create the best user experience by automatically adapting to the screen size of the device used to visit your website. Because the internet is now available on more than just desktop PCs, responsive design makes your website user-friendly for a wide range of devices. The site displays in a friendly way regardless of whether you are using a large widescreen desktop, a laptop, tablet, smartphone or a device that hasn’t been invented yet. Responsive design also uses the least amount of resources to make your website mobile friendly. It uses standard website technology so you only have to build and maintain one website that understands how to respond to many devices.

What is involved with responsive design – how does it work?
At its most basic, the three primary elements of responsive design are a flexible grid, flexible images, and media queries. Website developers design responsive websites using a special code that detects the browser size and changes the layout of the information on the page to make it visually appealing and easy to read and navigate within that screen size.

What are the challenges of designing a responsive design website?
Technology moves fast. There is no such thing as a ‘mobile screen size’ or a ‘laptop screen size’. When we do a responsive design we have to take into account the wide range of resolutions between devices. For example, different types of phones. Content that looks perfect on a Samsung S5 might look out of alignment on an iPhone 5S. As new phones and other devices come onto the market the design needs to account for these unknown devices to be sustainable.

This requires us to be constantly informed about developments in mobile phone technology, as well as a lot of clever coding from our developers. A major challenge is the transition between the multitude of current and future screen sizes. To get around this designs are set to ‘breakpoints’ of a screen size and then the content decides the breakpoints from then on. It has been said that responsive design is not about what happens at the breakpoints – it’s about what happens between the breakpoints.

Content layout is also challenging. A designer has to choose how to size images, fonts, tables etc. and then choose where that content should go based on its importance and relevance. Images are slightly more complicated as they can be cropped, resized, wrapped or a combination of all three. Another main challenge is navigation. If you have a drop-down menu, or a lot of navigation links, how do you make it easy to navigate with a finger swipe?

Who should get responsive design?
Not every site needs to be responsive. Research into your audience’s needs, and analysis of your sources of website traffic, will answer this better than anyone else ever could.

Some examples where responsiveness is important could be:

• Businesses whose customers are likely to use mobile devices to find, research and shop for their products and services.
• Tourism and hospitality industries attracting people travelling and using their mobile to find accommodation, restaurants or entertainment.
• Those potentially urgent services like a plumbers or electricians.
• Or for any kind of ecommerce website – one out of 5 people research products on mobile devices while watching TV.

More and more browsing and purchasing habits on mobiles and tablets means fewer and fewer websites are not impacted by the issue.

What are the benefits of responsive design?
Responsive websites often have higher conversion rates, because they are much easier to use, and all content displays correctly, reducing ‘friction’ or difficulty which can frustrate customers and prevent them from taking action.

Google can tell if a website has been responsively designed, and will give these sites a boost in website ranking when someone searches their keyword on a mobile device. This is a great way to get a competitive advantage in fields like plumbing, or restaurants.

How has the rise of mobile changed the way Zeald design websites?
We have had to think about how mobile phones function, and the features that users expect to work on a website. For example we add a special code to phone numbers in the headers of our websites so that someone on a mobile phone can click the number and start phoning the business in one click. As you can gather from the other answers, there are a lot of factors to consider.

Why should I get responsive design? My website already looks okay on mobile devices.
For most businesses, the main reason to implement responsive design is increased sales. The easier it is for potential customers to navigate and find what they’re looking for, the higher the conversion rate. But for many designers, responsive design for a business website has typically meant just shrinking the size of the content to fit a smaller screen. Anyone who’s spent any time scrolling around and zooming in and out to find information they’re looking for knows that a miniature version of a website is okay but it isn’t the answer.

When a customer uses their phone to view the website you don’t want them struggling to click on tiny links and missing important content because they didn’t scroll to the left or right. A responsive design website ensures navigation is simple, content is resized and prioritised.

Shouldn’t I get an app instead?
There are a number of drawbacks to this approach, certainly one of them being the expense of creating and maintaining multiple sites/apps and co-ordinating content across them. And, of course, when a new device comes out, there’s yet another new release needed.

In many cases mobile users are used to using your website, and don’t want to download and learn a whole new way of using it. Many mobile apps have had to struggle with people who bypass the app for the functionality of the regular website – e.g. Trade Me, NZ Herald. Responsive design doesn’t strip any functionality from the website, and doesn’t punish mobile users by removing content or functionality.

If done correctly, responsive design can address almost all issues in designing for mobile devices..