Recognition and prestige for Web Designers and Agencies

Case Study: Aquardens

Aquardens has been one of the largest watering places and spas in Europe

Share on Facebook

Share on Twitter

Share on Google

Share on Stumbleupon

Share on Pinterest

Share on Linkedin

Since 2012 Aquardenshas been one of the largest watering places and spas in Europe, located close to Lake Garda amongst the amazing vineyards of Valpolicella and all the amenities of Verona.

The whole state-of-the-art structure, which represents an impressive investment, provides a full range of services including several swimming pools fed by thermal water at different temperatures, a wellness centre and a medical spa, as well as bars and restaurants, all designed for the complete leisure of visitors.

Each facility and location within the centre had to be shown in its full splendour in order for viewers to feel the warmth of those amazing spas and experience the unique atmosphere of the place.

We built a website characterised by a responsive layout in order to display all site content correctly on any resolution and device. Furthermore, intense use of the most advanced HTML5 and CSS3 techniques allowed us to raise the level of the site’s user experience, implementing features which make the navigation engaging and rewarding.

Let’s review together the details of our technical choices for building this website, its structure and its code.

Responsive Layout

In order to obtain such a responsive layout, we defined and implemented two separate structures at the same time. Depending on the resolution and the device, it serves a specific set of content. Even the menus are different depending on the device, always displaying only the relevant configuration.

For traditional monitor sizes, the internal sections display second level menus which can be navigated also by keyboard: scrolling vertically through the menu items makes the corresponding image load in the background, whilst scrolling horizontally displays the specific content of any selected item.

For mobile devices- thanks to the jQuery Cycle plugin- the structure changes, showing the images related to each section as a slideshow with the content as a description at the bottom of each picture.

Usability and accessibility

Great attention was paid to the whole navigation experience from the user’s perspective, with specific solutions for full usability and accessibility of all site content.

A complete and simple icon-path guideline was developed ad-hoc for PCs to provide an easy full-keyboard navigation, while there is a sliding option for mobile interfaces with touch-screen.

Page Title Customisation

A specific feature was added to customize the page’s title, so that every time there is a new data upload, the page’s title displays the label “Loading” to inform the user that the new content is being processed.

Optimisation

Due to the massive need for high quality full-screen images, there was a real risk of their being too much data to download. Therefore to meet the requirements of all resolutions and devices, we went for two separate solutions.

For mobile devices- with displays of up to 1024px, large images are resized and optimised, making them quicker to download. For higher resolutions, the images are simply adapted to screen dimensions.

Animations

Menus

Incredible effort went into creating animations as smooth and natural as possible.

Starting from the homepage, all animations were designed to provide a clear touch of elegance and refinement to the page layout. Furthermore, a blur effect has been added to the top menu to show all menu items one by one as a gradient. To achieve this effect, we relied on the CSS3 Transition feature.