In today’s digital age, having a strong online presence is crucial for the success of any hotel or travel business. However, many hotel and travel websites still fall victim to common web design mistakes that can negatively impact the entire user experience.
That’s why we’ll take a closer look at the most common web design mistakes on hotel and travel websites and how to fix them.
Whether you’re launching a new website or revamping an existing one, make sure you read this article first before you make any changes to your design!
Improve Your Website In 11 Steps
[Free eBook]
We’ve created a completely free eBook guide to help you improve your travel or hotel website. All you need to do is download the free copy and put these simple tips into action to get more visitors, bookings and grow your business!
Send me the free copy:
Text over images is not readable
Travel and hotel web designs usually include a lot of imagery, for a good reason.
But the mistake that very often occurs here is when images are used as a background, and the text that is placed over them is not readable, like in the example below:
This happens because the contrast between the image and the text is not high enough. Thankfully, the solution is very simple here. Just add a layer between the text and the image that will create the contrast.
Depending on the image in the background, this contrasting layer can be solid, and transparent to a certain level or gradient. You just want to make sure that you are creating a nice and effective contrast so your text can stand out, and most importantly, be readable.
Inconsistent text alignment
This might seem like a detail rather than a mistake – but in web design, details matter a lot. And inconsistent text alignment across the entire website affects user experience more than you think.
The problem here is that many hotel and travel websites have headlines aligned in the centre, and then text aligned on the left. Or, even worse, they have both headlines and text aligned in the centre but placed on the left side of the page.
One of the rules of web design is that “the attention lean to the left”. This doesn’t mean just placing your text on the left side of the website, but aligning it on the left as well.
Statistics show that left-aligned text reads best. So you want to make sure your headlines and texts are aligned to the left across the entire website and positioned towards the left side where suitable.
Adding shadows to the text
If you are DIY-ing your website, please, don’t add a drop shadow to your text!
First, it’s visually unpleasant and tacky. Second, and more important, is that statistics show that text with drop shadow is less readable.
I understand you might feel a temptation to add shadowing to your text to make it stand out. But trust me, there’s no need for that. There are other more effective and better ways to do that.
Floating call-to-action buttons
When it comes to web design, it’s important to think in groups.
For example, we can say that we have two groups of elements in this design below – the first one is the headline, sub-headline and button, and the second one is the headline, paragraph and image.
Grouping elements allow us to create an intuitive design and navigate our visitors so they browse our website exactly how we want them to.
If we look at each element independently, we can end up with a design that feels disconnected and confusing, like in the example below:
Call-to-action buttons are extremely important for hotel and travel websites. That’s why they should be placed strategically, and in groups where it will feel natural for users to take the action that we want them to, such as looking at our special offers, exploring all the features of our property, or booking their stay.
Repeating the logo in the header and in the hero section
First, let’s just make sure we know the difference between the header and the hero section.
A header is a section at the top of a web page that typically contains a logo, navigation links, and other important elements, for example, a search bar or call-to-action button.
A hero section, on the other hand, is a prominent area on a web page that’s typically the first thing a visitor sees. It often features a large background image or video and a headline that presents the main message or purpose of the website. The hero section is designed to grab the user’s attention and provide a visual impact to set the tone for the rest of the page.
While the header should always contain the logo on the left side, it’s completely redundant to put it in the hero section as well.
Overemphasizing certain words or text
This is probably one of the most common web design mistakes that I see on hotel and travel websites.
Don’t get me wrong, there’s nothing wrong with emphasizing a word, part of the sentence or paragraph to draw the attention of the visitors.
But it’s easy to get carried away here, so you end up with something like this:
The word in the example stands out in the wrong way, throwing the entire composition of the section off. And not only it doesn’t look nice, but it’s also not effective either.
Instead, you can effectively draw the attention of the visitors by underlining that text or a word. Another way is to make it bold or give it a different colour to the rest of the text. But don’t do all three at the same time. Less is more here, so choose one way and stick to it.
Let’s set your hotel and travel website up for success!
Whether you want a brand new site, or to improve your existing one, you are in the right place.
From small, family-owned businesses to travel behemoths, we have worked with countless travel, tourism and hospitality businesses over the years. We’ve taken their websites to the next level – and we can do the same for you!
Get in touch with us and let’s turn your hotel website into a booking machine!
Related articles:
Can You Create A Hotel Website For Less Than 100 Pounds?
Free Analytics Tools For Travel And Hotel Websites
Anatomy Of Effective Hotel Websites
Tips to improve a hotel website
Until next time,
Leave a Reply