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.
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.
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.
Right away visitors can see what this website (below) is about.
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.
This hotel (below) doesn’t have much content on its site at all.
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 navigation menu is very clear on this site (below).
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.
While this (below) is a pretty website, it is useless from a navigation standpoint.
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.
It is immediately clear what kind of hotel this website (below) is for.
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 first problem with this website (below) is that it is impossible to tell what company it is for, since there is no actual content.
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.
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.
On this website (below), headers in a legible accent colour help visitors easily find the information they need.
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.
There is nothing cohesive about this page (below).
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.
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.
This hotel website (below) has beautiful images and they are organised nicely into labelled galleries.
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.
Almost as bad as not having any images is having blurry, poor quality or low-resolution photos (as in the case below).
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!
Since this hotel (below) is located in Brazil, it offers completely customised English- and Portuguese-language versions to reach its two main audiences.
Google Translate is also very easily added to a site like this that offers concise and relevant content.
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.
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.
This hotel (below) draws the traveller in with beautiful images, a clear logo, simple navigation and relevant content.
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.
Neon colours tend to distract visitors from your content, which is the most important part of your site.
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.
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.