NB: This is a guest post by Kate Waite of Dot Tourism, a digital branding and online marketing agency.
A popular new design trend that seems to be taking off is the use of full screen image backgrounds on travel websites.
There are several hotels and resorts which have picked up on this trend and used it to great effect delivering some very stylish websites.
Why
The use of strong destination images and beautiful shots to reflect the ambiance and atmosphere of a property is not a new concept in hotel marketing.
With more and more people accessing the internet with large monitors and fast connections it is possible to produce sites which utilize very large images to have a strong visual impact.
When implemented properly and combined with mobile browser friendly versions, the use of full screen photography offers an attention grabbing way to allow the look and feel of the property to dominate the design without negatively affecting the user experience.
The Hotel Missoni is a good example, with the website for this stylish chain making use of full screen images to show off the style of their properties with the highlight colours from images carrying through to the navigation.
Technical
There are a number of ways that full screen images can be included within the design.
Some large background sites use a fluid or elastic layout which stretches the image across the browser, while others opt for a large fixed size image background image.
There are many techniques that can be used to produce this effect. One of the easiest is to use CSS to stretch the image, placing the HTML on top in a container. This will distort the image if being viewed on a very wide or tall browser so selecting images which can tolerate horizontal or vertical stretching is important.
The effect can also be produced using JavaScript. The jQuery plugin Supersized is a useful tool to create this effect.
Another and perhaps the most traditional method to implement this effect is to use Flash.
While Flash presents issues for mobile browsers and search engine optimisation these can be overcome with creative thinking and alternate versions, allowing total control over the styling of how images are presented.
While full screen images look great on modern widescreen monitors it’s important to remember that many users are accessing websites in other ways.
Travellers are likely to take a look at hotel websites while on the road, accessing reservations on their mobile phones and other hand held browsers.
Large screen backgrounds aren’t quite so friendly when viewed on small screens so having alternate versions of the site is essential.
Usability
There are some important usability factors to consider before embarking on a site design that contains full screen images.
It’s essential that pages are created to load as quickly as possible, using compressed images with the minimum file size possible.
While connections are getting faster all the time it is still essential that file sizes are minimised and where appropriate thought is given to how the page loads.
Where text is positioned over the images one option is to use JavaScript to ensure that the text does not load until after the images have finished loading. This ensures that people don’t start reading text and then are put off by the background loading behind it.
Of course looking at how any text displays over your image is vital. The photo has to have impact without being distracting and competing with any text that overlays it. Also important is how the same text will appear overlaid onto different images.
The Hard Rock Hotel and Casino in Las Vegas has navigation text on the top left of the screen which looks great on four of the revolving images but virtually disappears when it reaches one with a lighter background, as can be seen on the second image below.
It’s also worth thinking about users expectations. If the site navigation is complicated or different it may frustrate visitors, making it important to guide them as clearly as possible.
The striking Sanderson Hotel website makes great use of quirky photography to give their site a lot of impact.
Large oversized text helps lead visitors around the site with clear instructions making it obvious where to click for more information (or where to hit the screen in order to hide it).
The large reservations calendar ensures users will have no problem in making an online booking.
Search engine optimisation
Ensuring that your site can be found by search engines is essential, after all you might have the most visually stunning site in the world but it won’t be doing you any good if nobody can find it.
Making the decision to use full-screen images doesn’t mean that you can dispense with good quality, well optimised copy. It’s important to ensure you use HTML to add some carefully optimised copy to your site.
The Hoxton Hotel makes great use of full screen photography throughout their site which uses subtly animated Flash to immerse the visitor on a website which really does show off the character and soul of the hotel.
With a move to a very visual site it was key that they maintained their search rankings. Developers Codegent came up with the following solution:
"Our solution was to break down the Flash components of the site into separate files housed within html, each with their own indexable url and no-flash versions to maintain optimisation."
This clearly seems to have worked for the Hoxton Hotel and the site is also easy to view and use on mobile devices.
Loss of copy
Content might be king but as they say, a picture can be worth a thousand words.
While sites dominated by visuals may have less opportunities to present copy on the site, for hotels images showing the rooms and facilities are worth far more to visitors than a description of the same.
The Hoxton Hotel integrates copy to describe the facilities in an innovative way which actively encourages visitors to explore the site. Hot spots on the images contain information titbits about everything from the mattress type to the breakfast.
Conclusion
Using full screen photography is a fantastic way to create a website with impact that really shows off the style and facilities of hotel.
However, before leaping into the design it is vital to weigh up and plan how to overcome potential usability issues alongside ensuring that the site remains visible and well optimised for search engines.
NB: This is a guest post by Kate Waite of Dot Tourism, a digital branding and online marketing agency.