Consider a diver on a jetty, trying to book the next day's trip on his phone. He has one bar of 3G. The dive shop's website loads a large Flash header, then a desktop layout shrunk to the size of a matchbook. He gives up.
At best, the shop is nearby and he walks in to ask. Most travellers in his position simply choose another operator whose site works.
This situation is observed constantly around dive shops in Thailand. It is why we consider that the phone should be the main screen for any tourism website. Not the second screen: the main one. Some web professionals already have a name for this approach. Luke Wroblewski has been writing about "mobile first" since 2009. In small tourism businesses, however, the term remains unknown. They simply have customers on phones and websites that do not display properly on them.
Why do tourism sites need a mobile layout now?
The visitors to a dive shop or guesthouse website are mostly people already travelling. They do not have a desktop computer with them. Some have a laptop in their room. Nearly all have a phone, and the share of smartphones grows every month.
Their connections are also poor: hotel Wi-Fi, roaming data they hesitate to use because of the bill, or a local SIM with a few hundred megabytes.
The profile of the real user is therefore clear: a person standing somewhere, sun on the screen, one hand free, a weak signal, looking for a single piece of information. Usually a price, a time or a phone number.
Most sites are designed for someone at a desk with broadband. That gap represents a significant opportunity, and almost no one in tourism is taking advantage of it.
Should you choose a responsive site or a separate m. site?
There are currently two ways to handle phones.
The first is a separate mobile site: a second, stripped-down version at m.yoursite.com, or a WordPress plugin that switches to a mobile theme when it detects a phone. Setup is quick, but the business ends up with two sites. Content is updated on one and forgotten on the other. Links shared from a phone open the mobile version on a desktop. Detection makes mistakes. For a small business without dedicated web support, maintenance becomes complicated.
The second is responsive design. Ethan Marcotte named it almost exactly a year ago, in May 2010, in an article on A List Apart: one site, with a flexible grid, flexible images and CSS media queries, so the layout adapts to the screen. Marcotte's Responsive Web Design article is short, clear and the best reference on the subject.
For a small tourism business, we recommend the responsive approach whenever possible: one site, one set of content, one place to update. It requires more work to build at present, because most WordPress themes were not designed for it and a fair amount of CSS has to be rewritten. Maintenance, however, is far simpler. All indications are that within a few years, separate m. sites will be seen as a transitional solution.
What does a mobile layout on WordPress require?
Nothing complex. It is mostly a matter of removing elements.
- Add the viewport meta tag, so phones do not render the page at desktop width and zoom out.
- Remove Flash, which does not run on iPhones or iPads at all.
- Resize and compress every image. A 2 MB header photo on 3G prevents the site from loading.
- Collapse the menu. Six items across the top become a short list or a single button.
- Stack the content in a single column on small screens, in the order users actually need it.
Why place the phone number and booking button on the first screen?
This is the most important change. On a phone, the first screen is decisive. If the phone number or the "book now" button is three scrolls down, many visitors will never see it.
The number therefore goes at the top, as a tappable link that opens the dialler, with the booking button directly below. Everything else can follow.
Some owners hesitate because the result looks less elegant on a desktop. The most effective demonstration is to hand them a phone showing their current site and ask them to find the number. That generally settles the matter.
Which phone should a site be tested on?
The least expensive phone your customers carry. Developers usually test on their own device, often a new, expensive phone on fast Wi-Fi. That test provides little useful information.
Here, the phones people actually use are entry-level Androids, BlackBerrys and older Nokias, on real 3G, outdoors. Pages that seem fine on office Wi-Fi become difficult to use: fonts too small, buttons too close together for a thumb, images that take a long time to load. We recommend borrowing the least expensive phone available and viewing your site outdoors. The result is often revealing.
The same applies to any small business in Canada. A person looking for a snowmobile rental on a Saturday morning is not necessarily holding a new iPhone, and the signal on many rural roads is weak. A site designed for that person will work for everyone.
What developments should be expected?
All indications are that within a few years, a small tourism business's website will be viewed more often on a phone than on a computer, perhaps sooner where customers are already on the road. It is also likely that Google will begin to take this into account. A search engine that sends people to pages they cannot read on the device in their hand is providing poor answers, which Google consistently seeks to avoid.
If your site is difficult to use on a phone, as most are, a website redesign built around the small screen first is likely the best online investment a tourism business can make this year. The goal is not a second site, but a rethinking of the existing one.
The diver on the jetty with one bar of 3G represents the real user. The site should be designed for him.