Top Seven Hotel Website Design Principles: The Good and the Bad

  • Heather Linton
  • 23 October 2012

In this day and age of online marketing, almost every accommodation provider knows the importance of having a website. After all, a recent Google report  shows that 83 percent of leisure travellers and 76 percent of business travellers plan their trips online.

Hotel sign and American flag

The experience of a hotel is more than just its signs and its website. Photo courtesy of Flickr/vonderauvisuals

However, it seems hotels often don’t realise that just having a website is not enough. Travellers need more. They need to find the information they are looking for, get seduced by what they see and be able to book everything online.

This guide therefore gives you examples of good design, bad design and just plain ugly design. Although not all examples are hotel websites, you can apply these principles when considering the design and structure of your website.

Top Seven Design Principles:
1. Relevancy & Content
2. Menu & Navigation
3. Branding & Design
4. Layout
5. Use of Images
6. Languages
7. Distractions

1. Relevancy & Content

The first step when you’re thinking about your website is to consider who your audience is and what they want to know. What type of visitor are you trying to attract? Families, business travellers, honeymooners, backpackers, ecotourists and other types of visitors all will be interested in different information. If you don’t have a website yet, try making a long list of information that you want to be sure to include and then start categorising it while you are setting up your navigation.

The Good
Right away visitors can see what this website (below) is about.

Screenshot of Tathagata Farm homepage

The logo shows an image of a hiker, appealing to the site’s target audience of backpack travellers. The banner rotates through a few attractive and accurate images that backpackers and ecotourists will appreciate. The headers below the banner are welcoming, and all of the content is useful.

The Bad
This hotel (below) doesn’t have much content on its site at all.

Screenshot of a hotel website with content that isn't relevant

There are no pictures or descriptions, so the website isn’t very useful to visitors. The page text is mostly a long string of keywords linking off to other websites. This is also poor website design practice as it takes your customers away from your site.

2. Menu & Navigation

In the initial design or redesign phases, try to organise all of your content into categories. These will become navigation menu items, so it is a good idea to limit yourself to a maximum of seven top categories. This will make it easy for users to navigate your site quickly, without getting overwhelmed by too many options.

A typical hotel website might have categories like Home, Room & Rates, Gallery, Things to Do, Location, Contact Us etc. You can also use a category label like More, and then provide a dropdown menu if needed to add subcategories like Feedback, Conference Facilities, Restaurants etc.

Also try to provide users with a sense of direction on your site. You can use breadcrumb trails to help them know where they are, where they have been and where they can go next.

The Good
The navigation menu is very clear on this site (below).

Screenshot of the Popoara Ocean Breeze Villas website

The orange accent colour stands out and the white text is easy to read, with the black signifying which page the visitor is currently on. Every page has the same menu, making it easy to navigate the site. To keep within the guideline of seven categories, a More header has been used to consolidate the extra pages.

The Bad
While this (below) is a pretty website, it is useless from a navigation standpoint.

Screenshot of a website with bad navigation

A classic example of “mystery meat navigation,” the homepage offers images to click instead of text. Once you are on a subpage of the website, you have to find the “trapdoor” to escape through in order to get back to the homepage or to any other page on the site. Do you see the trapdoor? Hint: it’s a box with an arrow pointing left – not exactly intuitive for all users, especially less technologically savvy visitors. Site users may also have a hard time navigating this site if they have an older computer, slower connection or turn off images in their browser.

3. Branding & Design

The look and feel of your website is very important, as that is often a potential visitor’s first impression of your accommodation. Your website colours should match your hotel’s brand, and they should be an appropriate match to your property. When considering the look and feel of your website, try to standardise your hotel’s current logo, colour scheme and other themes (beach, jungle, city, etc.). Try to use the same colour palette throughout the website. Use a few neutral/subdued colours and then one brighter ‘accent colour’ to add visual interest to the site and highlight important details for your viewers.

Pick a good font that is easy to read and in a colour that can be seen against the background. It is a good idea to limit your font choices to one for the main body text, and possibly a second for headers and other decorative text. For body text that will be displayed on a screen, a sans-serif font (such as Arial, Verdana or Tahoma) is generally preferred over a serif font (such as Times New Roman) or funky font (like Comic Sans). Save those fonts for headers or other accent text.

The Good
It is immediately clear what kind of hotel this website (below) is for.

Screenshot of the Rumas Hideaway website

Rumas Hideaway is a tropical beach hotel (blue and orange colours and a hibiscus flower), with friendly owners (in the photograph) and a little bit of a fun edge (lime green). The font is easy to read and the text on top is clearly a logo so it can be something other than a plain sans-serif typeface.

The Bad
The first problem with this website (below) is that it is impossible to tell what company it is for, since there is no actual content.

Screenshot of a hotel website with bad branding and design

A long string of irrelevant keywords in yellow text on a white background is hard to read, the random and unrelated images are distracting and text overlaps images. By the way, this website is for a company that sells miniature pigs.

4. Layout

It is important to make it easy for your viewers to find the information they need on every page of your site. Your navigation menu should be on every page in one consistent location (usually on the top or left of the page). Your website should be less than 860 pixels wide, so it will fit on all monitors. Sometimes, to maximise space, it is helpful to divide your pages into columns. Try to minimise scrolling on your pages too. If you have too much content, build another page and split it up. One easy acronym to keep in mind when designing your page layout is CRAP:

C – Contrast. It should be easy to see your text against the background, and there should be an accent colour to add visual interest and catch visitors’ attention. (See more at Branding & Design.)

R – Repetition. Your navigation menu should be repeated on every page, so visitors know how to get around your site. Important information such as copyright and contact information should be repeated in the footer of every page. You can also repeat important information or hyperlinks to other pages within your site, as this helps your SEO.

A – Alignment. It looks better if images and text are aligned on your site in a type of grid. Columns might help you do this, but if you use columns, try to be sure that the bottoms of each one align to give the page an organised feel.

P – Proximity. Keep similar information together. This is something to consider when organising your content into categories for your navigation, or if you’re using columns for a page. All of your gallery photos should be next to each other, contact information (address, phone, email) should all be together etc.

The Good
On this website (below), headers in a legible accent colour help visitors easily find the information they need.

Screenshot of Green House Hostel homepage

The black text is a nice contrast on the white background, the services are listed together, text links to other relevant pages in the site and photos are aligned next to each other in a nice gallery grid. The navigation menu and footer (not seen in the screenshot) are also consistent on every page.

The Bad
There is nothing cohesive about this page (below).

Screenshot of a hotel website with bad layout

The images are not the same height and one of the images in the left column didn’t even load. The map deserves its own Location page. The faux paper background is distracting and made the page load more slowly.

Screenshot of a hotel website with bad layout

These (above) are nice images, but they look cluttered and unorganised. It would have been better to align the tops of the images, and keep similar shapes and orientations together.

5. Use of Images

Visitors want to see photos of where they will be staying! It helps them visualise their trips. Images that will be posted online should be resized to 72 dpi and the actual size they’ll display. A little cropping, as well as minor edits to contrast and colour in Photoshop or another image editing program, can add extra spark and professionalism. Virtual tours are a great way to show visitors around your accommodation as well. Use video more sparingly, since it takes longer to load, although you can host videos on YouTube and embed them in your site.

The Good
This hotel website (below) has beautiful images and they are organised nicely into labelled galleries.

Screenshot of the Ploynesian Escapes homepage

Caution: background images should be used carefully to ensure they don’t detract from the main content of the page. This hotel does a nice job of using appealing images while keeping focus on the foreground.

The Bad
Almost as bad as not having any images is having blurry, poor quality or low-resolution photos (as in the case below).

Screenshot of a hotel website with bad images

Travellers want to be able to view large versions of your images, so they can see what your hotel looks like.

6. Languages

Since visitors to your website will often be travelling from another country and may not speak your native language fluently, it is a good idea to offer a translation service on your website. The easiest and most recommended option is to utilise Google Translate. To do this, visit translate.google.com/manager/ and click the blue Add to your Website Now button. Google Translate will walk you through the rest of the process, ending with a short piece of code that your webmaster or Hotel Link Solutions can help you paste into your website. It’s fast, easy and free!

The Good
Since this hotel (below) is located in Brazil, it offers completely customised English- and Portuguese-language versions to reach its two main audiences.

Screenshot of the Floipa Renatl Homes homepage

Google Translate is also very easily added to a site like this that offers concise and relevant content.

The Bad
This hotel (below) has a lot of great information on its website and is making an effort to translate the German content into English to reach another target market.

Screenshot of a hotel website with bad translations

However, most English speakers will not take the time to scroll all the way down to find the English content at the bottom of the homepage.

7. Distractions & Extras

While it might be tempting to add neon colours, music, animations, flashing text and other distractions to your website, it is not recommended. Visitors on slow internet connections may experience longer load times if you include unnecessary bells and whistles. Music can be annoying, especially if visitors can’t turn it off.

As pretty as they sometimes are, Flash introductions cause slow loading times, can be frustrating if visitors can’t easily skip them (why do you want to spend time and money on something people will just skip?) and they won’t load on iPhones or iPads, which are increasingly important as mobile bookings are on the rise. More importantly, the flashing and brightness of all of these extraneous features can detract from your content, which is the most important part of your site.

The Good
This hotel (below) draws the traveller in with beautiful images, a clear logo, simple navigation and relevant content.

Screenshot of the Te Kakaia homepage

It uses bright green and blue in limited quantities as accent colours, not as the bulk of the design. A website like this loads quickly and showcases the hotel, not scrolling text, music or other effects that take attention away from the content.

The Bad
Neon colours tend to distract visitors from your content, which is the most important part of your site.

Screenshot of a hotel website with bad distractions

The guesthouse featured directly above looks like a beautiful log cabin, so natural colours like browns, reds and greens found in nature would have been more appropriate than fluorescent green.

Screenshot of a hotel website with bad distractions

This purple text floating around the website above is the owner’s contact information, which moves with the visitor’s mouse. It is very distracting and makes the website load more slowly. The contact details would be much better placed on the footer of every page.

Related Posts Plugin for WordPress, Blogger...

Heather Linton

Heather Linton's experience in tourism and internet marketing gives her a unique writing viewpoint. Currently teaching at Ithaca College (in New York State) and working with Hotel Link Solutions, her past roles include a position with the Aruba Hotel and Tourism Association, and digital marketing consulting work for Florida's Palm Beach County CVB.
Heather Linton

Leave a Reply