About Basel - Culture Unlimited

Basel in Switzerland is one of the leading tourism destinations, known for its art and culture. Major events like "Art Basel" and "Basel World" attracts many visitors from around the world. In addition to business and congress tourism, Basel Tourism is also targeting the growing leisure tourism. Online booking of hotels, packages and events is key for Basel Tourism.

Basel Tourism Homepage
Why Drupal was chosen: 
  • Drupal offers great CMS functionality right out of the box. Basel has a big marketing team responsible for creating and managing content, therefore a CMS with a comfortable back-end was a must.
  • The architecture of Drupal is very generic and extendable for any custom need.
  • Because Drupal is open source, we are able to solve almost any problem by diving into the code or communicating with developers through IRC or other channels.
Describe the project (goals, requirements and outcome): 

General Goal

The goal of the project was to build a booking and information portal that provides clean and easy access to all touristic information provided by Basel. Key to the project was providing a seamless process; from finding the information with comfortable search functionality to eventually booking a stay. Another key feature would be a user experience unencumbered by pop-ups and redirects to third party services.

Hotel Booking

To be able to compete against the big international booking platforms, Basel offers unique packages including accommodation, event tickets and other services. In order to provide a powerful booking back end to their clients (hotels) for managing these services (packages, vacancies), Basel chose a sophisticated destination management system provided by Tomas. The booking front end had to display these offers in a user friendly interface with great performance (caching) and SEO.

Faceted Search

Throughout the whole portal, the faceted search functionality would provide clear, intuitive results, no matter if the user was looking for accommodation, a restaurant or an event. The search experience of filtering by any criteria and getting an appropriate result would be consistent, making it extremely easy for a user to navigate through the portal to the desired information.

Ratings - Comments

An important criteria for users to book a hotel are ratings and user comments. Ratings of customers who already visited a hotel should be shown in the search result lists with the ability for users to look for even more information, such as comments, without interrupting the booking flow. This was done by introducing detail tabs, collapsing and paging.

CMS - Back end

Most content, such as events and restaurants, which is aggregated by third-party systems, is created and managed by a team of editors. Therefore it was important to have an easy to use back end to be able to create, manage, filter and tag content of any media (text, images and videos, for example).

Multi-language

Focusing mainly on international customers, the portal offers its content in English, French, German, Italian and Spanish.

Performance

For a convenient search and booking experience, performance is a must. Using Drupal's variety of caching-mechanisms and modules such as Cache Actions allowed to meet these high expectations.

Technical specifications

Drupal version: 
Drupal 7.x
Why these modules/theme/distribution were chosen: 

Drupal Modules

Search API

This is one of the key modules used for providing the faceted search functionality. In the complete module list you can find quite a few Search API modules which make use of this API and are used to meet some special search requirements, such as location-based searching (search_api_spatial) or search_api_denormalized_entity.

Search API Denormalized Entity

An extension to Search API which allows better handling of multi-value fields. This is essential if you want to build something like a date-based search where repeating dates can be used. The module denormalizes the entities to index based on the configured fields and can use the grouping feature of Solr to normalize the data again while searching.

Migrate

Migrate takes care of importing accommodation information for booking and stores it in many different node types such as hotel, room, room-option, review.

Redis

Drupal cache back end for storing key-value pairs.

Varnish

Most HTTP-traffic is directly served out of memory by Varnish, a lightning fast reverse-proxy. This means these requests are not even handled by Apache. The Varnish module basically enables Varnish as a page cache handler.

Cache Actions

To maintain a good hit-rate, it is important to flush only the updated pieces in the cache. We use a very fine granular caching from Panel panes to page caches and varnish. Cache Actions enables us to flush the caches as finely granular as we configure it, from a single display element up to the related page in Varnish.

OpenLayers

This module allows to easily pick a location on a map for any node type to store it in a geofield.

Geofield

This module is used to store our geographic data of hotels, events, restaurants and many other node types.

Fivestar

This module provides a nice widget which is used to display the hotel ratings on the portal.

Microdata

Currently, this module is used for sharing 5-star reviews with Google to be displayed in Rich Snippets. This is just a starting-point. There is a lot more information available on the portal (such as locations and events) which will be used for microdata output step by step.

Media Browser Plus

To be able to manage and categorize all media (images, PDFs) in the back end, Media Browser Plus is an elegant and easy to use solution.

Omega Alpha

Base theme used and extended with a custom theme. The theme takes care of cross-browser compatibility and repetitive theming tasks allowing us to focus on customization.

Other Components

Zurb Orbit Slider (homepage)

The sliding teasers on the homepage are created using the Orbit Slider which is part of the Zurb Foundation front-end framework.

Community contributions: 

There has been a commit or patch contributed by Cando on almost every module used in this project.

Organizations involved: 
Basel Tourism - Faceted Search - By Cando
Basel Tourism - Shopping Cart - By Cando
Basel Tourism - Detail Page - By Cando
Basel Tourism - Restaurants - By Cando
Basel Tourism - Ratings - By Cando
Sectors: 
Arts
E-Commerce
Enterprise
Travel and Hospitality

Comments

rszrama’s picture

Wow, guys, you've truly outdone yourselves here. This site is fantastic.

sovarn’s picture

Looks beautiful. Is the hotel booking part of Drupal?

Sinan Erdem’s picture

One of the best Drupal websites around here. Design, functionality and performance is fantastic. Congrats!

I wonder how long did it take from the inital start of development to finish?

badrun’s picture

Congratulation! The site is beautiful, simple, clean, and modern.

Would you share the technical detail on how to create the rating - comment system?
Is that a Multi-axis Rating System using fivestar module?
How is the structure of the comment system?

Please share it, thanks.

luke_b’s picture

Thank you for your compliments!

I wonder how long did it take from the inital start of development to finish?

The project lasted about one year and another 6 months of development for releases (additional features) followed.

Is the hotel booking part of Drupal?

No, this is an external booking system (see section 'Hotel Booking')

Multi-axis Rating System

It's best to get in contact with Peter or Kai directly for more details on that

Mehrdad201’s picture

Dear luke_b

Your job is great.

I have some question about your project,

  • about the theme, have you used Omega template with your modifications?
  • about the hotel reservation, you said that it is not a part of drupal or drupal module, can you tell me you code it yourself or you are using a website service? is it a free service or it is premium?

Thank you very much

rakibtg’s picture

wow! its a great user friendly designed !

minnur’s picture

It noticed that JS/CSS aggregation is disabled on your site.

das-peter’s picture

@minnur That's because of an issue with the openlayers / geofield module. Unfortunately I didn't have the time to fully debug it yet. The last time I was debugging it, it seemed like the order of the JS/CSS is changed during aggregation what leads to strange errors.

________________________________________
Cando Image GmbH
Else Züblinstrasse 115 :: CH-8404 Winterthur :: Switzerland

mkapst’s picture

Great job guys!!! Really cool!

josuediazr’s picture

a quality project

radutrs’s picture

Can we buy this amazing template?

calvez’s picture

amazing!

jasonyangshadow’s picture

really awesome... like it very much

Sandip Choudhury’s picture

How you have made the Background image transition? Is this background animation / transition created by CSS or by any module?

Sandip Choudhury
http://hostingultraso.com

ankitchauhan’s picture

awesome work. great template

kasse’s picture

Awsome! How you have made front pages highlight system, thumbnail grid and more information bellow images?

arthitst’s picture

love it :)

shamio’s picture

The website looks awesome and both home page and internal pages are so nice. The slideshows in home page is so meaningful and relates to the subject of website. The only point i want to say, is the font size of footer links. However there are many links in the footer of pages and you wanted to place all of them in a low space, but the font size is too small in my opinion. I think you can increase them a little that users can read them easier.

drupal.man’s picture

hey what a site!! great! and what paiement metthod did u use?

Rognu’s picture

Muy bueno.

sayela’s picture

This is mind-blowing. Great job guys.

amedjones’s picture

Thanks for sharing !
the facelift is just top class, bravo!!! and using drupal to do Hotel and travel booking is just wow ! never knew drupal can do that !

GilDatz’s picture

Great looking site guys! Looking around for different types of Drupal sites. You did a really good job on this.

frankkkk’s picture

Really great webpage. I have a question for you - is there any problem with multilingual site using for other language not subdomains but subage like domain.com/en/ etc?

adamjsmith’s picture

Wow! The website is simply stunning. Both home page and internal pages are so beautiful. The navigation is excellent.

BigBoBuilder’s picture

Guys! This is perfect. Exactly what i need for my webpage.
Please give me some price to get this template.

saleempbt5’s picture

Which are the E-commerce modules used?

saleempbt5’s picture

How you created the search form in the home page?

jikasef’s picture

First I must say, wonderful site you have. I would like to know how you guys achieved the Tabs contents

Tibet Tenzin’s picture

Hi. i own a travel agency and i always wanted to find a great E business platform for Tourism. Thanks for sharing