Responsive Web Design for Hotels

What is responsive web design?

According to Wikipedia it is “a web design approach aimed at crafting sites to provide an optimal viewing experience — easy reading and navigation with a minimum of resizing, panning, and scrolling — across a wide range of devices (from mobile phones to desktop computer monitors)”.

A website, designed in a responsive way adapts the layout to screen size by using fluid, proportion-based grids and flexible images with help of CSS3 media queries.
Now this sounds pretty technical but it’s what developers have to worry about.

For everyone else, responsive web design is easily explained:

  • Traditional websites were designed using fixed pixel or point units.
  • Responsive web design on the other hand uses percentages, arranging website elements relative, not absolute to each other.

The result is a so-called fluid web design. You can see whether a website layout is fluid when looking at it in a browser, then changing the size of the browser window. If the site is responsive, the website layout will change “fluidly” and adapt to ‘different screen sizes’ smoothly.

Below is an example, a video screen shot we took of this very blog:

Now, why is it so important for hotels to make their website responsive?

Read the article below about mobile-first travelers!

Especially the young generation, i.e. Millennials, are increasingly likely to use mobile or tablet devices for their travel planning. Google expects that search queries from mobile devices will overtake those from desktops by the end of 2014!

Take a look at the Google Analytics data for your existing hotel website. What share of traffic comes from mobile devices? We see traffic from mobile and tablet devices ranging between 20% to 50%. Which is massive!
Imagine you ‘scare’ away so many potential hotel guests by not being up-to-date with your hotel web design.
In the best case scenario, they book your hotel via an OTA website or app. In the worst case, they are gone forever…

At e-conceptory, we create your hotel responsive website using the latest technologies: HTML5 and hotel responsive web design for all screen sizes from mobile phone, to tablet, to desktop computer.

Hotel Website Design Insights – Design Brief

This is the 3rd and final part of the Hotel Webdesign Insights series which will be talking about the:

3. Design Brief

Previously, we thought about how to best organise website content and developed a site tree. We also considered which website elements will be necessary and designed a wireframe. Now, you are almost ready to jump into the design stage. However, the designer still doesn’t know your product and who you want to sell it to. Therefore, we need to tell them.

What is a Design Brief?
The design brief is a document which will be filled in by the client, ideally under guidance of your web agency. Think of it as a web-specific marketing plan which in an ideal world each business should have at the ready. In most cases, you would already have collateral like printed brochures or leaflets, business cards, letter-heads etc. in your corporate identity (CI). The website design needs to match your CI. Once complete, the design brief will be sent to the graphic designer and lay the ground work for your new website design.

The design brief contains questions regarding: short and long-term goals, audience profiles, perception and tone, branding guidelines, competitive positioning, targeted messages, customer relationship considerations etc.

Sample questions from a Design Brief Template

What is the purpose of a Design Brief?

The designer needs some information about your hotel and who you are planning to sell your rooms and services to. Each hotel is different and has their own Unique Selling Point (USP) which the designer must know about in order to be able to emphasize this visually.

It is very important to think the questions from the design brief through properly and be as specific as possible. That way, the designer can develop a successful and bespoke design without having to go through many expensive trial and error stages. Therefore, a comprehensive and specific design brief will keep down design costs later on!

For example, audience profiles should be part of the general marketing plan of a hotel already and should only have to be repeated in the design brief. What isn’t helpful is defining a target audience of “adults between the age of 20 and 55” as this is far too general. The designer needs to know whether they are meant to be designing a hip and cool website for a young audience or something rather formal for the business traveller – to pick just two examples on the very ends of the spectrum.

Attach any printed collateral which shows your CI to the design brief or if you have a brand book listing color schemes, fonts, logo options etc., add this. Your logo and preferred photos of the hotel should also be provided at this point as the designer will use them in the mock-ups.

With all this, the designer will now be able to make a start and you are finally entering the design stage. You will soon be provided with mock-ups showing your newly designed website and all this preparation will have paid off!

Hotel Website Design Insights – Site Tree

Here comes part 2 of the Hotel Website Design Insights series:

2. Site Trees

Before you jump into designing your website, take some time to arrange it in an orderly, logical way.

In particular for businesses, in this case hotels, it’s vital that the website visitor finds the information they are looking for. People are very impatient, especially online, and if they want to know where a hotel is located, they should be able to find this information instantly. Otherwise you risk losing them to your competitors. Optimising a website in such a way is called ‘usability’ and means making a website user-friendly.

For a website to be usable, you need to organize your information into different pages and provide links to these pages from the home page. By providing links to the other pages, you let the website visitor choose which information they want to see and when. Your home page should have links to other sections of the website and an introduction describing the USPs of your property.
Normally, the site tree will be created together with your web agency.

What is a site tree?
Think of it like a family tree – a chart showing all descendants of an ancestor, in this case your home page. All children have to be linked from their parents to illustrate their relationships.

Here is a simple example of a site tree for a hotel website:

Example of a hotel website site tree

A site tree includes a short description (or name of the link) for all the information that will be part of a website and shows the logical relationship with other content items. The different levels translate into priority whereby level 1 features the main navigation items, i.e. more general information. The further down the levels you come, the more detailed the information will be.
Very important links need to be put on the top level, so that the website visitor can access it easily. Very specific information, for example menu options for a banquet, will only be needed by a limited number of website visitors and therefore can be linked from further down in the tree, although it should still be easily findable.
There will usually be a footer level, too with either additional links that are only accessed very infrequently (e.g. legal information) or repeating links a website visitor may want to access again after having scrolled down a page.
External links lead the visitor away from the website to a different domain and are highlighted in a different colour.

What’s the purpose of a site tree?
By creating a site tree, website content can be organized logically and relationships between information can be defined. The site tree also helps to make sure no information is forgotten.

The graphic designer will use the site tree and know exactly how many information items a website will contain and how many levels of navigation there should be. They will so be able to create a layout fitting everything in. It should be noted, that the site tree may well be changed/rearranged by your web agency and / or a designer to improve usability.

Hotel Website Design Insights – Wireframes

This series of 3 blog articles will be about hotel website design or redesign or better the initial stages before the design process even starts.
You will learn about:

  1. Wireframes
  2. Site Trees
  3. Design Brief

Here we go:

1. Wireframes 

So, you want to redesign your hotel website.
Before the actual design phase, i.e. before a graphic designer even begins with the layout, the first step should be the development of a wireframe.

What is a wireframe?
Think of it like a floorplan of a flat – a simple drawing showing were the kitchen will be (including sink, fridge, cabinets etc.) A wireframe is a line drawing illustrating how your new webpage will be organized. It usually lacks typographic style, color, or images, since the main focus is on functionality, usability and importance of content. In other words, a wireframe focuses on what a screen does, not what it looks like.

Here is a simple example of a wireframe for a hotel website:

example of a hotel website wireframe
Example of a hotel website wireframe

A wireframe includes all the ‘elements’ that will be a part of a webpage, including navigation systems, website functionality, like a web form linking to the online reservations interface, and how they work together. Wireframes can range from pencil drawings or sketches on a whiteboard to wireframes produced by means of a broad range of software applications.

What’s the purpose of a wireframe?
By using a wireframe for the initial layout, elements can be quickly moved around and re-organized. This is an effective way to quickly make prototypes of pages, while checking the practicality of a design concept. It allows for faster collaboration and vastly improves the graphic design process.
The idea is to arrange the website elements to best accomplish a particular objective. For hotel websites this will usually be to direct website visitors to make a reservation. However, a wireframe is not always necessary especially for simple websites. The downside of giving the designer a wireframe is that this may hinder the creative process. So, if your website isn’t very complex, doesn’t contain very many ‘elements’ and you don’t have a specific layout in mind, you can opt for leaving the this totally to the designer.

The wireframe provides the graphic designer with an organized blueprint to work from.

What HTML5 can do – a sneak preview

This video shows a website programmed in HTML5. HTML5 will allow websites to become far more interactive, incorporating user location, sound and movement to provide richer experiences for website users.

You can try the website for yourself in a Google Chrome browser: www.thewildernessdowntown.com

According to the official Google Chrome blog the site “features a mash-up of Google Maps and Google Street View with HTML5 canvas, HTML5 audio and video, an interactive drawing tool, and choreographed windows that dance around the screen. These modern web technologies have helped us craft an experience that is personalized and unique for each viewer, as you virtually run through the streets where you grew up.”

iPhone App Review: Peninsula Hotels and Small Luxury Hotels

Ok, I admit it. I’m addicted to my iPhone. I would definitely book a hotel room on my mobile but then I’m what we call an ‘early adopter’ in the marketing world.

How about you?
Vote in the poll on the right!
I’ve just downloaded two hotel apps last week.
Two rather different companies in the luxury hotel segment:
1. Peninsula Hotels – a small but prestigious hotel chain
2. Small Luxury Hotels – a Hotel Marketing Association with over 500 member hotels world-wide
I’ve worked with both companies before and so I’m taking a special interest in what they are doing in terms of online and mobile marketing.
Their iPhone apps follow very different approaches.
While Peninsula goes straight for the booking procedure, SLH present the hotels with a short description, location map and image. This makes sense since Peninsula regulars will know their hotels. However, a tiny bit of information about each Peninsula property would be nice.
The SLH app is divided into three sections: Discover, Enjoy, Share.
Discover is all about finding the right hotel in your desired destination.
Enjoy features a brief destination guide once you have arrived at the hotel.
Share let’s you manage and share your favorites, by email, on Facebook, on Twitter.
What I like most about the SLH application is the various ways to choose a hotel:
  • by Hotel types such as city centre, beach resort, country house etc.
  • by Destinations (pretty map guys!)
  • by Special offers, whereby this button let’s you navigate through various categories such as Adventures, Spa Breaks or Honeymoon and Romance to your desired destination
The Hotels near me feature is great, too – it finds you hotels close to your current destination which can be displayed either on a list or pinpointed on a map. Ok, some of the hotels the application found are actually quite far away. SLH got to work a bit on the parameters there.
Something completely lacking from the Peninsula iPhone app is a destination guide.
SLH’s Enjoy section mainly let’s you search for landmarks nearby, then sends you off to the iPhone map and shows you how to get there. This section has more potential. SLH should check out the Langham Hotels iPhone app to get some ideas.
Something completely missing from the SLH iPhone app is an online booking form.
There is only a Call to Book button which links you to your local SLH call centre.
All in all, I really like the SLH iPhone application – one of the best I’ve seen so far. Stylish, easy to navigate, with all the necessary information but an online booking form should be added.
The Peninsula app looks stylish, too but needs more content in my view: some info about each hotel, perhaps a destination guide but mainly a section that sells add-ons at the hotel once guests have checked in. It seems to me Peninsula are missing an opportunity here.
I’m curious about the next releases of both applications.
Download from iTunes:

Big iPhone hit: The Hotel Negotiator

Priceline has just landed a big hit with its new iPhone and iPod touch application, featuring William Shatner.


The Hotel Negotiator let’s you name your own price for a hotel in a certain location and of a chosen category. Using a one-page checkout, you will know instantly whether your bid has been accepted. A special treat is the Shake Down function, whereby shaking the device establishes the traveler’s location and then performs a winning bids search for hotels in the surrounding area. For those who are not in the mood for negotiation, the Hotel Negotiator also contains an option for browsing hotels on priceline.com for a particular city or town.

After one week of being available, the Hotel Negotiator has already climbed to the #3 free travel application on the App Store. Priceline’s heavy marketing and PR campaign has certainly had an impact, too. The downloadable video on YouTube just being part of it: http://www.youtube.com/watch?v=hBNL9xx3Ie0
Time will show how much revenue the free application will generate for the company since booking hotels on the fly and blind is not for everyone. However, a very well done and flashy application has certainly brought Priceline awareness and into the media and provides them with a cutting-edge image in the eyes of an ever more demanding customer.