Mobile bookings are a challenge for the hotel industry. Even as traffic on mobile continues rising, and now outstrips desktop comfortably, conversion rates on mobile aren’t quite keeping up.

As of March 2018, 60% of traffic across all of Net Affinity client sites were from mobile devices (an increase of 13% on last year), with both desktop and tablet in a continued decline. However revenue remains strongest from desktop at 56%. So how can we increase conversion and revenue from this mobile traffic?

You might have heard the term responsive design. Let me try to explain what this is. Responsive design is when the content on a website responds to the user’s behaviour, that’s to say their screen size, platform and orientation. This eliminates the need for a different design and development phase for each new device on the market.

The responsive approach works with the desktop browser as its basis, and offers alternative, scaled down versions for other device/browser sizes. That works via CSS media queries, which check the browser size and adjust the layout and styling according to that.

However now there’s a growing trend in the industry to flip this on its head and begin by focusing primarily on mobile design considerations and then work up to a larger desktop version.  In this article, I’ll discuss why mobile-first, or progressive enhancement, is now the best way to design for hotels.

Content Hierarchy

Mobile-first design means focusing on displaying content in the most rational way. The smaller screen size can only handle one module of content on top of the other, and has to do this without looking messy. It forces designers to choose the most relevant and important pieces to be put in the most visible positions. While hotels might want to add lots of content it’s up to the web designers to be very clear in their objectives in order to achieve user friendly and visually appealing results.

Additional layers of content can then be added for visitors who browse using larger screens further down the process. This method offers a standardised user experience across all platforms and decreases download time which is one of the most important factors for mobile user experience.

Mobile first design

Source: UX Planet

Enlarge touch targets

The size and shape of a button on mobile can make or break whether it’s actually used or not.  Buttons need to look like buttons so think about their size, shape and padding.  If a user can’t identify a clickable element they won’t click on it. Make sure to give hyperlinks plenty of space too.

Keep Your Site Light

Site weight affects the load time of a website and is crucial for converting leads into bookings on mobile. Just as with content, the designer is forced to cut down on clutter such as fancy hover menus, sliders, and flash-based animations. Even fonts must be chosen according to what is legible on a smaller device.

Other things to consider with site weight is using fewer and lighter images, by compressing the files before coding them; avoiding interactive maps; hosting videos on YouTube instead of your site; and keeping forms to a minimum. This will ensure the mobile site loads faster and keeps the user in the funnel for as long as possible.

Exactly how long does your site have to load before you lose your audience? Figures by KissMetrics indicate that 40% of users abandon a website that takes more than 3 seconds to load, so taking note of these tips to make your site load faster is essential for increasing conversions. Here’s an article with more details on making your mobile site lighter.

Conclusion

The aim of mobile-first web design is not to reverse the problem by creating a poor desktop experience instead of a poor mobile experience. Both mobile and desktop solutions should operate well for the user, therefore sales, engagement and goal conversions will follow.

As mobile continues to rise, and the mobile-first approach becomes king, future designers will become experts in this type of UX design and the process will become smoother, quicker and cheaper – that’s if another approach has not taken over before then.

As of our most recent client data, desktop accounted for just 33% of total website visits with mobile and tablet taking the lion’s share. And with conversions predicted to follow suit it’s probably wise to make your hotel’s mobile experience as seamless as possible.

Speak to your Account Manager about responsive design today.