Making a hotel website responsive

Web Developer Ross Kelly examines the challenges faced by hotels that are looking to create a responsive website design that works across a variety of devices.

No longer will you stand idly by as customers bounce off your homepage like moths off a lightbulb; no longer will your bottom line perish under the pinch of a mobile screen.

You have finally awoken to the truth: it really is about time your hotel website design catered to mobile users and created a responsive website.

This, somewhat surprisingly, isn't as rare a scenario as you might think. There are many reasons why some sites are still not able to suit mobile devices as well as desktops, and your site may be one of them. Deciding that something has to be done is the first step, but what are the options?

From a development point of view, the ideal course of action would be to rewrite the whole site from the ground up, with performance on various devices already in mind. This would ensure each line of code is geared towards optimising the experience for whatever device the site happens to be viewed on, improving the performance of the site in a technical and business sense.

This, however, is not feasible in all situations. There may be time or budget constraints to a project, or even a legacy back-end in place that is tightly coupled to the front-end of the site (the code run in the browser). These, amongst other reasons, may force the project to go down a "responsive retrofitting" route.

What is a responsive retrofit?

A "responsive retrofit" involves keeping the existing website intact while adding mobile-friendly code on top of the existing code. This will transform the existing layout into a mobile-friendly version on smaller screens.

In theory this sounds simple and good, but getting into the development of this presents many unique restrictions and challenges.

Challenges and Solution

Legacy code

Retroactivley making a hotel website responsive generally means working with old code written years ago, often by another team in another company. This code could also be minified and obfuscated, making modification of the existing code tricky and fragile.

Due to this, the only way to go is to work around the code, adding new code for mobile on top of the legacy code. Though this is far from an ideal situation, there are many reliable methods to power through and get things done.

The main way to keep track of what’s going on is by constant testing throughout development. It is important to do on any project, but even more care must be taken when working with code you do not know. Tools like Browserstack and other emulators help with this.

Using modern development methods and tools can still be used, even though not all the code will be generated by them. Just because the existing code might be a bit messy and unordered doesn’t mean your new code can be! Generating stylesheets using tools like SASS and LESS speed up development, and “linting” any new JavaScript (checking for formatting errors) ensures your new code will be good quality to work with if needed in the future.

Site content

When creating a new site, developers and designers work together to make sure that all content has a place in the design, and can be accommodated in all screen sizes big or small. We also make sure that the content is relevant and ordered logically, making important points more prominent where required.

Working with an old site that was not designed with this in mind presents a challenge for design as well as development, as existing content might not lend itself well to a mobile screen.

Issues such as the wording of headers, paragraph sizes, image positions and icon placement all come into consideration, and the manipulation of these is greatly hampered by the inability to modify existing code.

The benefit of targeting mobile devices is that they generally have modern browsers installed, allowing the latest web technologies and techniques to be used. These become invaluable when presented with a rigid layout, the most modern techniques make working with these a lot easier.

Recap

Retrofitting a responsive website can transform your hotel's online presence from one tailored to desktop user to one tailored for all users, no matter what device they view your site on.

Though the ideal solution is to create a responsive website from the ground up, a responsive retrofit can be an ideal stop-gap solution to make your website mobile friendly in a short timeframe, testing the waters for a complete makeover at a later date.

By Ross Kelly, Web Developer