Digital

Does My Home Page Look Big In This?

With the growing usage of mobile devices it gets increasingly important to make sure your website can deliver an experience that helps the visitor do what they need to do regardless of screen size.

Author

Magnus Hultberg
Marketing Consultant

Did you know that now more than three quarters of the traffic to the popular social sharing and curation website Pinterest now comes from mobile devices?

While this is exciting, representing a huge shift in how we interact with the web and with brands (when you get a chance, ask a group of people how many of them never leave their mobile out of reach, even when sleeping…) it also poses some interesting challenges for doing business online.

So? You might say that a social website like Pinterest is a very special case, and that the mobile usage there doesn’t apply to other websites like those of restaurants or hotels. Well, you’d be wrong.

At Ignite we work with a lot of different restaurant and hotel brands, and we routinely see traffic from mobile devices at 25% to 35% on our customer websites. Sure, it’s not 75% but would you accept that more than a quarter of people have a poor experience in your restaurant or hotel? No? So why not make sure that your attention to detail in your business shines through online?

Have you for example tried reading your own newsletters on the small iPhone screen? Have you tried accessing your website from a Samsung Galaxy Tablet? Or from HTC One running Sense on top of Android? If you haven’t checked your website on your own smartphone (and yes, I am assuming you have one as a marketer, or you really need to catch up to start understanding what your customers are up to) go and do so now.

Back? Good. How did it go?

Can you read the text on your site without pinching and swiping?

Is it simple to find the most basic things, like your menu, a map to your locoation, your booking widget, your phone number?

Does your navigation menu work, or is it using some form of mouse over functionality that doesn’t work on a touch screen?

What about the booking widget, did you try completing a reservation to make sure the experience isn’t so awkward it is putting people off?

Are parts of the home page shown on your mobile simply grey and empty, because some technology is used (Flash, I’m looking at you…) that isn’t supported on mobile phones?

As a contrast, try going to a restaurant or hotel website that is optimised for mobile. For example Gliffaes Hotel we work with. Here’s what we have tried to achieve:

Direct access to the booking widget, in a form that works on mobile touch screens.

Easy access to the navigation, using an interaction model that most people used to mobile apps on iPhone and Android are used to.

A pleasant selection of images and calls to action to engage the visitor to explore if they are not out to make a reservation or find a basic piece of information.

Search optimised text that reads well and above all is readable without squinting.

What do you think, did we do alright? We’d like to think so, although there are always improvements that can be made.

The pitfalls of mobile are many. Let’s focus on the most obvious issue: varying screen sizes of different types of mobile devices. From the small iPhone to the various larger Android phones, through iPads and Samsung tablets up to laptops and 28” desktop screens, how is a website supposed to cope?!

Luckily, the web browser suppliers and people who develop standards for how to build websites have put their clever heads together and come up with a solution: responsive web design.

Responsive web design is what you get when you combine a number of modern web development techniques in order to make sure that your website becomes “self aware” enough to realise that when a person using an iPhone arrives at your home page it needs to rearrange the content in such a way that it fits on the small screen, presenting the most important information at the top, and using a text size that is readable without squinting.

Yes, it virtually goes “Oooh, my home page looks big in this” and adapts itself to make sure that the visitor gets the best possible experience given the screen size and capabilities of their device.

Sounds like magic? You can see other examples in action by visiting D&D London, Newman Street Tavern, Wollensky’s Grill or Artist Residence.

Wollensky's Grill website design

If you are doing this on a mobile phone, you’ll see how the navigation, text and images neatly organise themselves to make the best possible use of the screen width. Now flip your phone sideways, moving it to a landscape view which makes the screen wider, and see how the page changes slightly to fill up the increased width. Depending on the size of your screen you may or may not see the navigation menu expand to a horizontal navigation bar across the top.

Sure, these techniques require the visitor to have a modern browser, but thanks to clever web developers all over the world it is possible to make sure even older browsers get a decent experience. And this is the goal of modern web design: try to provide the best possible experience given the size of a person’s device and the age of their browser. The end result may be a bit different for different people, but ultimately that doesn’t matter. As long as your brand comes across nicely, and people can complete the tasks they need to use your website for, you are a winner.

There are other ways of achieving a good mobile experience for your visitors, like using a third party service that detects traffic from mobile and redirects the visitor to a different site. You can use services like those from Livebookings or OpenTable for this, or a supplier like goMobi or Dudamobile.

All of these are able to provide a mobile optimised website without rebuilding your existing non-responsive website. In our opinion, rebuilding your website to make it responsive is always a better option though. Not only does it save you from having to maintain your content in two different places (with the examples mentioned above you would probably end up having one CMS for your “normal” website and a different one for your mobile site), it is also better for your search engine optimisation to make sure that your main website deals with desktop as well as mobile traffic in a nice way. Yes, Google is tracking that too…

At Ignite we have a lot of experience of delivering great mobile website usability. If this is something you would like us to help you with, get in touch!

Like what you've seen? Get in touch.

Find out more about working alongside us!