Responsive Redesign - Stradbroke Island Beach Hotel

28 September 2013
Stradbroke Island Beach Hotel responsive design mockup

In 2007 following a multi-million dollar re-development of the historic ‘Straddie Pub’ Propeller were commissioned to produce a new website in-line with the Hotel’s fresh image. We built the Stradbroke Island Beach Hotel website using the Textpattern CMS to strict web standards; separating content, style and structure. The new website went live in October 2007.

A few things have evolved and there have been several upgrades in the 6 years since 2007 but in July 2013 the largest overhaul to date with a shift to HTML5 and a responsive design went live. Given that this was our first responsive refit and involved a 6 year old website we thought it was worth a run through the rationale, what was involved and the ultimate benefits of the refit.

Enter Responsive Design

According to Wikipedia "Responsive web design 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)".

To provide some context for the seismic shift in web design since the Hotel’s website was first launched in 2007 it is worthy of note that the iPhone 3G was only released to the Australian market in late 2008 and Australia didn’t see an iPad until May 2010.

By virtue of Google Analytics we can see that up until around 2009, non-desktop traffic for this website was minimal but in contrast, by 2012 mobile devices were making up around one fifth of all traffic. This can be attributed to not only the massive overall increase in smartphone use but also that many people are routinely searching for and viewing tourism & leisure related materials while they are out and about.

In May 2013, recognising this change in use, the Hotel asked if their site could be made more mobile / tablet friendly? The Hotel was happy with the desktop presentation of their site and didn’t want to change this but were very much interested in if / what could be done with the presentation on smartphones and tablet devices.

Our answer was a resounding yes.

Why design responsively?

In addition to the obvious aim of providing your users with the optimum viewing experience, there are other benefits to the responsive design approach. It has been acknowledged by Google that their search algorithms prefer responsively designed websites thus improving organic search optimisation. The lower graphic and data transmission typically involved in well-designed responsive sites can improve the loading speed of the site, a plus for your visitors not only in terms of presenting the website more quickly but again, its been acknowledged that Google prefers faster sites…

For those who aren’t interested in the nuts and bolts, please skip straight to the results

Technical Challenges

Whilst the Stradbroke Island Beach Hotel website is not Propeller’s first responsively designed website it was our first responsive re-design of an existing site and an instance in which our long-term commitment to designing with web standards paid dividends.

By separating content, style and structure we were able to leave all of the websites’ content stored in the Textpattern CMS alone – no duplication of data, no data migration and no hosting changes. Although we did make some changes to templates most work was carried out on the websites’ stylesheets. One thing I learned immediately is that re-fitting an existing designed-for-desktop site is a LOT harder than building a new site responsively from scratch…

Some features of the site were able to be re-styled whilst others had to be changed or replaced completely.

Transition to HTML5 and dealing with legacy browsers

Whilst we could have left the site’s XHTML Strict DocType alone we felt it made sense to switch the site over to HTML5 simplifying future upgrades and ensuring the site is ready to take advantage of new features coming from the new HTML standard. We updated all of the sites’ meta-data, updated jQuery and installed Chrome Frame for IE6 users. The original site had an IE5 stylesheet but traffic for legacy browsers was now minimal so installing Chrome Frame provides support for ageing browsers, letting us move on without leaving people behind. We implemented respond.js to polyfill support for older browsers which are still in wide use but with little or no support for media queries – such as Internet Explorer 8.

Getting ready for Retina

There has been much talk around sites becoming ‘Retina-ready’ – preparing website images and other graphics for the growing adoption of high-DPI screens in devices such as iPhones, newer iPads and Retina-display MacBook Pro’s etc.

The original website logo was never quite as sharp as we would have liked and viewing this on retina devices confirmed that it could use some love. We went back to the original vector file and exported the logo at double-size then downsized it using CSS. The result – a nice clean and crisp logo on all screens.

Media Queries

As the original desktop site was to remain more or less untouched, we started the redesign by stripping the stylesheets back to the main essence of the styling – typography, colours and basic imagery. We worked through setting the website layout up initially for smartphone display with a linear, single-column layout and employing some basic jQuery to compress and hide the main navigation and search bar revealed using a three-line menu icon. To retain the clean look and save space for the limited smartphone viewport we also hid the top portion of the logo, retaining the main brand mark. This is revealed as the layout converts to two-columns in larger viewport sizes. The sites’ feature navigation was converted to CSS3 layout tables using percentage widths and progressively revealing more of the background images as the screen size increases. The feature navigation was arranged into a 4×2 grid so as not to be too small for comfortable viewing.

Moving to tablet viewport sizes we returned the feature navigation to a single-line and reintroduced the four main content columns of the desktop presentation though took the page to the screen edge rather than introduce margin and center it. The remainder of the logo is also progressively revealed as the screen size increases. At a certain point we return to the desktop presentation with the site detaching itself from the browser frame and centered in the viewport as it had been previously.

The technically minded among you will note that we have completely shifted from using floated, fixed-width columns to percentage-width columns arranged using CSS3 table display.

Slideshows, Galleries, Lightbox and more…

In response to the refusal of Apple to support Flash in iOS we had previously changed many of the website’s Flash-based Slideshow Pro slideshows to use more widely compatible jQuery-based slideshows. The jQuery Innerfade scripts we had used to do this were not responsive however and were thus replaced with a responsive slider plugin.

Due to Slideshow Pro having introduced a HTML5 fallback to provide some compatibility for iOS devices we had retained the multi-album galleries included in the site. When we approached the responsive refit however, these galleries once again provided the main technical challenge as the placeholder images embedded in the Flash scripts were not responsive. We worked around this with a time-honoured background image reveal trick and were able to keep these galleries working.

The original Lightbox script we had employed to enlarge images throughout the site we found to fail miserably once the viewport was resized but an updated version by Leandro Vieira Pinho came to the rescue.

As if this was not enough, the ‘Getting Here’ page had originally used an early Google Maps API which also failed though research showed that this old API was due to be retired shortly anyway so having to replace it was inevitable and gave us a chance to switch to the new Google Maps Javascript API.

As part of the overhaul we also took the opportunity to move all javascript to the bottom of the HTML and linked to the latest versions of jQuery served from Google’s CDN and replaced the original Google Analytics script with the latest asynchronous version – all working towards optimising the site for speed.

A few Social Media touches

Another seismic shift in the web to have occurred since we first built this site is social media. The Hotel have been making good use of their Facebook page and also Pinterest so we introduced some links to their pages and also added some sharing links to their news and events posts for quick and easy linking to Facebook, Twitter, Google+, LinkedIn and Pinterest.

The Results

Whilst the usability benefits of having the site beautifully presented on both smartphones and tablets are obvious, what we could not predict was how the refit would ultimately affect the sites’ usage and performance.

I mentioned earlier that there had been a shift to mobile devices between 2009-12 but the changes following the responsive refit are far more interesting. In terms of usage, visits to the site using mobile devices has increased 87% compared to the same period in 2012 and increased by 55% for tablets. Incidentally, overall traffic to the site for this period increased by over 9%, pageviews by over 10% and pages-per-visit increased by 0.82% whilst the bounce rate decreased by over 5% – more traffic with more visitors staying on-site longer and less people leaving early.

These are excellent improvements in anyones terms, particularly if we take into context the fact that tourism and leisure related industries are experiencing tough times and decreases in interest and traffic across the board at the moment.

Fiona See, Marketing & Events Manager at the Stradbroke Island Beach Hotel | Spa Resort had this to say:

“We have worked with the guys at Propeller for many years now they are always more than happy to help us with any queries or website maintenance we may require. When we decided that we needed to fill the demand for the ever increasing use of mobile devices & tablets in making our website more mobile friendly we had no idea of the work involved. Though never saying no to a challenge Damien at Propeller was eager to give it a go. We gave him direction on the design we were wanting as well as wanting the website to match our current colour scheme. As Damien showed us ‘sneak peeks’ of the new mobile friendly version we were getting keen to have it up & running. The end result is a fantastic mobile friendly version of our website which has increased traffic flow to our site, duration of time spent on our website as well as pages viewed. We are so impressed with the results we are getting!”

Return On Investment

Its true that the Hotel could simply have decided that at 6 years of age their website was long in the tooth and junked it in favour of an all-singing, all-dancing, brand new website but the reality is that the cost would have been at least ten-fold that of the re-fit. Additionally, they would have had to migrate data sucking up time and / or cost. Changing the website altogether may have meant taking a hit on their SEO.

As part of the process the site was converted to HTML5 and some new features were added along the way future-proofing their investment for years to come.

The end result is that compared to developing a completely new site the Hotel were able to avoid the hassle and cost of a re-build, they maintained their look and feel and their search position has improved as a result of having gone responsive and sped up the site. Their traffic analysis demonstrates unequivocally that this was money very well spent.

Memberships & Affiliates