Phancybox This Queenstown web design is an ideal example of responsive design

This Queenstown web design is an ideal example of responsive design

Now that you have an understanding of what responsive design actually is, we wanted to share a great local example of how responsive design has been implemented. We’ll use the Queenstown web design for ActiveQT, to show you a responsive web design in action.

Responsive Menu Layout

The first thing you’ll notice when browsing the ActiveQT website on a mobile device, is the menu change. Trying to squeeze 7 menu items across an iPhone’s screen horizontally isn’t feasable, so instead the hamburger menu comes into play (that’s the 3 lines one on top of the other, like the layers of a burger, visible on the top of the screen).

Queenstown Web Design for Active QT is a great example of responsive design by New Zealand digital agency Phancybox - how mobile-friendly menu works

Changing the websites menu layout to a hamburger menu, or a dropdown lets you use your real estate for your branding and message instead.

Back To Top

One of the best ways of making sure that ActiveQT’s long web pages were still easy to navigate, was by introducing a Back To Top button. You’ll notice that if you’re half way down any ActiveQT page, there’s no need to laboriously scroll through all of the previous content to get back to the top of the screen again.

Queenstown Web Design for Active QT is a great example of responsive design by New Zealand digital agency Phancybox - Back To Top

You can can simply click on the Back To Top button to reach your destination quickly and easily, regardless of where you are on the page at any time.

Grouping Content with Accordions

With a much smaller screen size, we needed to be sure that visitors weren’t missing any information due to the fact that it was hidden or not immediately obvious. With extensive content to display on 1 page, this was avoided through the use of accordions. The accordions on the Aoraki Mount Cook Marathon let you see that there are 4 races on this particular day. Without the accordion, the last 3 race options could be missed entirely.

Queenstown Web Design for Active QT is a great example of responsive design by New Zealand digital agency Phancybox - how accordions works

From this view point, you can click on, and expand the accordion to read more about each race, with the knowledge that there are others available.

Leave padding around Google Maps

We come across this issue regularly while browsing on a mobile device – you reach a Google Map that takes up the full width of the screen, and need to scroll past it. If however, there is no space or padding, around the Google Map, when you try to scroll down, you’ll simply scroll within the Google Map. This makes it impossible to reach the information beneath the map. With this Queenstown web design, you’ll notice we’ve left some space around the Google Map.

Queenstown Web Design for Active QT is a great example of responsive design by New Zealand digital agency Phancybox - leave padding around maps for scrolling

This enables users to either scroll within the map, or to scroll past the map, to the content beneath it.

Responsive websites improve mobile Google search results

The ActiveQT website contains a generous amount of content, but is easy to navigate and use on a mobile device, due to the responsive rules and settings that have been used throughout the build. Having a responsive web design puts ActiveQT ahead of their competitors non-responsive websites, on Googles mobile search results, as Google now gives mobile friendly websites extra “SEO points”.

If you’re finding that your website isn’t the most intuitive or easy to use, your visitors may be feeling the same thing. Check if your website is in fact mobile friendly, and if it’s not, we can provide some recommendations on the best way to increasing your website traffic and generating more leads.

Tip: If you found this useful, you can get our latest ideas delivered direct to your inbox, for free, right here.