i. Mobile Content
ii. Mobile Navigation
iii. Fat Thumbed & Careless
iv. Performance
Is your website prepared to step into the ring with your competitors when it comes to mobile website engagement?
“Mobile travel sales have increased by 59.8% in 2014 and will continue to follow an upward trend into 2018.”
–eMarketer
i. Mobile Content
“It looks like you’re on a train. Would you like me to show you the insultingly simplified mobile site?”
–Cennydd Bowles
When you consider how your visitors might be engaging with your content while on a mobile device there are a few best practices you should take into consideration.
The biggest misstep businesses make is treating mobile users like second-class citizens. Don’t hide content from your mobile users. Mobile devices are used in just about every location or scenario you can think up.
Responsive design can give you the freedom to reposition your mobile content based on the size of the device being used to access your website. It is the best solution if you want to reach mobile web users and give them a memorable experience.
Different Strokes for Different Folks
Be ok with giving your visitor a slightly different experience on their smartphone than on their desktop.
This doesn’t mean you should hide any of your content.
Visitors very well may be sitting at home on the couch browsing your website on their smartphone or tablet. But they may also be trying to find your destination or are planning which restaurant they should eat at tonight after a conference.
5 Mobile Content Tips for Travel & Hospitality Websites
- Easy to Find – Include hours, location and contact information at the top and bottom of your site so it’s easy to find on a mobile device but also using a desktop computer. Don’t hide it or make the visitor click to see it. When displaying your phone number, make sure it is coded properly to directly call the phone number when on a mobile device. Set up phone numbers to open with Skype on a desktop computer.
- Easy to Read – Make sure the content on your site can be read easily from a foot or two away from the device. Mobile users could also be on the go so take into account unexpected motion when selecting an appropriate font size. Users will scroll so don’t be afraid to go with a font size that adds additional scrolling/swiping on mobile.
- Mobile-Friendly From Start to Finish – Third-party apps and plugins that aren’t mobile-friendly shouldn’t be a part of your experience. Don’t start your visitor off with a great mobile experience and then send them over to Joe’s Booking Service for their final experience with your brand. It might be the last.
- Utilize Built-in Tools – Most mobile devices are equipped with a camera, GPS and other great features you should be taking advantage of. Native apps aren’t the only ones that can take advantage of device hardware. You can tap into these features on a mobile website too. Consider offering an interactive walking tour for nearby locations to your hotel or destination.
- Allow visitors to share photos they take while dining at your restaurant right on your site.
- Mobile First – If you take a mobile first approach to your content you’ll be more likely to focus on what’s most important to your visitors and cut out anything unnecessary. When you’re constrained by size and performance, simplifying and purging content is a much easier task to sell up your organizational ladder.
Receiving Content: Improving Mobile Forms
“Booking a hotel happens in 3 taps and a swipe.” This is a competitive advantage.”
–Sam Shank, CEO of HotelTonight
The most common way to gather information on the web today is through interactive forms.
Do you enjoy filling out long forms? Chances are your visitor doesn’t either.
Now take that same distaste for forms and consider filling out a long form on your phone.
I know right? Painful.
Start by taking a mobile-first approach to your content, make every effort possible to cut back on the information you’re requiring your users to fill out. Once you’ve paired down those long forms consider trying out these tips below to improve them even more.
Mobile Web Form Tips
- Choose the Right Keyboard – There are multiple types of keyboards available on most mobile devices. With the proper markup, you can set fields that require a number input to pop-up the keypad instead of the alpha. This simple tip saves your visitor one extra click.
- Use Built-in GPS – Requesting location based information? Consider using the GPS on your user’s device to automatically pull in their address, city, state and postal code. This will save them quite a bit of effort instead of having to fill out these fields manually.
- Field Labels – Present field labels above the field giving the field as much space horizontally as the device will allow. This is important if the user is typing in a long email address or address and it flows beyond the width of a single field making it difficult to see what they are typing.
- Avoid Drop-down Menus Wherever Possible – When asking for input for small quantities, use use +/- buttons instead. If you have a very long list of choices to present, consider using an auto complete field which narrows down the choices as the visitor begins typing in the field. If that isn’t an option for you, place the most commonly selected options at the top of the list.
- Add Space Around Buttons and Fields – Excess space is a good thing especially when it stops accidental clicks from occurring. Give an adequate amount of space around buttons and fields near buttons.
The On-The-Go Diner
In a study done by the National Restaurant Association in 2013, 46% of surveyed respondents said they use a smartphone to look up restaurant location and directions. In another study by Sullivan Higdon & Sink, the top reasons for ordering food online was ease of ordering, order accuracy and not having to wait for their food.
When you’re targeting someone on-the-go, simplicity should be your #1 priority. Present your location and phone number at the top of your website for easy access on both mobile and desktop devices. If you offer online ordering, make sure that functionality is accessible from every page.
ii. Mobile Navigation
Finding your way around a site that is now an ⅛ of the size it was on your desktop computer can be a real challenge.
Accessing Mobile Navigation: Text vs. Icon Buttons
There are many different ways to go about accessing a mobile menu but the most commonly used are a menu button and hamburger icon button (icon containing three horizontal lines inside a button). A study was done to show which option is more user-friendly.
As time goes on and users are more familiar with the iconography they will win out over their wordy counterparts. But for now it’s a good rule of thumb to combine icons with helpful text in the more early stages of mobile interfaces. This is especially true if your audience isn’t as tech savvy.
Types of Mobile Navigation
Drop-down Mobile Navigation
These types of menus are best for sites with a small number of navigation links.
DROP-DOWN MOBILE NAVIGATION EXAMPLE
Once you get past a certain point your users will have to scroll within the menu on their device which can be cumbersome. An off-canvas menu which I’ll dive into next is often the best solution for larger websites or those with multiple levels of navigation.
Off-Canvas Mobile Navigation
One way you can maximize screen real estate on a smartphone is to utilize the space to the right and left of your screen. An off-canvas menu slides in from the left or right when prompted by a button or other mechanism. It allows you to use the full height of the screen instead of wasting a portion of it on the header (occurs with drop-down menus). It also can let the visitors see the page they were on if you decide to show it.
OFF-CANVAS MOBILE MENU EXAMPLE
Multi-Level Navigation Solutions
Taking an off-canvas approach with multi-level navigation systems can be a good use of space and give a similar experience to your visitors on both mobile and desktop.
You might also want to consider placing sub-navigation at the bottom of your parent page to avoid having to show too many levels of navigation in a small space. This can lead to overwhelming your visitors.
iii. Fat Thumbed & Careless
Are you presenting your website with touch screens and fat thumbs in mind?
Mobile Touch Targets
One of the biggest reasoning many websites you’ve visited lately are increasing in size and length is due to designers now catering to touchscreen devices.
The precision and target click zone for a mouse is much smaller than that of a fat thumbed human.
Follow these rules of thumb (pun intended) and make sure the key areas your visitors are clicking are large enough.
Use large tap targets at least 44px tall or wide.
Make sure you have adequate space around your tap targets to save your vistors from accidently clicking on surrounding links. This can cause great frustration, especially if they are on a slow connection.
Edge Awareness
Make sure buttons and links near the edges of the screen are big enough as sometimes it can be difficult to click a small target near the edge of a screen.
Read more about catering to touch devices.
Consider Real Human Usage
Scroll-zone: Consider maps and other things you might present using the full-width of the screen. As your visitor scrolls down the page they may accidently hit some of your wider content elements such as a map and zoom or click within it instead of continuing to scroll.
Avoid Hover Effects
When you have the luxury of using a mouse, hover effects can add to the overall experience of using a website. Now even desktop computers are touch friendly, making hovering without a mouse impossible. Make sure you aren’t using hover interactions to present important content. Hover effects should only be used as an extra enhancement. The same information should be available to all users equipped with a mouse or their fingers.
You have to provide the same content in an accessible, engaging way to all users regardless of the device they are using.
We must learn to think device-agnostic.
iv. Performance
I love waiting! Said no one, ever.
In an age of responsive, mobile-friendly websites it’s more important now than ever before to focus your attention on your website’s performance. Internet connection speeds vary greatly based on your visitor’s location and their device may not be as speedy as you’d like, adding to the problem. It’s important to be a responsible marketer and provide an excellent web experience for all visitors.
Not everyone owns a desktop computer. I’ve personally met people in their mid-twenties whose only personal access to the internet was a smartphone. This is true for a large percentage of the population around the world.
Yet many organizations still give their mobile experience little or no attention.
Why is Website Performance Important?
“A fast website can lead to better search rankings and gives your visitor a better all-around experience and impression of your brand.”
–Sarah Shuda
Increased Search Engine Rankings
Google and other search engines don’t just base their ranking on keywords, content and relevancy. They also take into account how fast your pages load and if you are providing a good user experience based on a number of factors. They don’t want to send their customers to a poor performing website.
Here are some page speed tools recommended by Google to help you discover ways to improve your website speed.
Higher Customer Retention
“In a recent study, we found that 61% of users are unlikely to return to a mobile site that they had trouble accessing from their phone, and 40% go to a competitor’s.”
If your site is slower than your competitor you might just lose out, even if you have the better menu, hotel and service. They’ll never know it if they don’t wait around long enough to find out!
What to Ask Your Developer About
- Page caching
- Minification of CSS and JavaScript
- Image optimization (this is a big one)
- Removing unnecessary plugins and add-ons
- Remove images that don’t add value
- Optimize header and footer scripts so they load only on the pages they are needed on
- Consider changing web servers or upgrading your current server
Once you’ve made improvements to your website you can look at a number of metrics to see if the changes are making a difference. Bounce rates (available in Google Analytics) will typically be lower after a performance update. There are a number of other factors that affect your website’s bounce rate however so you may not see a direct correlation if you need to improve your content and design as well.
More Sales & Bookings
In the end it’s all about booking more rooms, selling more tickets and filling more seats.
Improving your website’s performance is a big contributing factor to meeting your end goal. If you can help solve your customer’s needs in a painless fashion you’ll win their business time and time again.
Another way to win more business, build trust and increase sales is through content marketing. In the next chapter I touch on the whys, hows and the different types of content you can be using to earn your visitor’s business.
