Basel Tourism Homepage

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.

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.

Modules/Themes/Distributions
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.

Organizations involved: 
Community contributions: 

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

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

Comments

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

----------------------
Drupal by Wombats

Looks beautiful. Is the hotel booking part of Drupal?

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?

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.

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

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

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

wow! its a great user friendly designed !

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

@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

Great job guys!!! Really cool!

a quality project

josuediazr

Can we buy this amazing template?

amazing!

really awesome... like it very much

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

Sandip Choudhury
www.UltraCorporatePixel.com

awesome work. great template

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

love it :)

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.

Doubt is the father of invention..... Hubmesh | download converter

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

Muy bueno.

This is mind-blowing. Great job guys.

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 !

i want to be Drupal when I grow up

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

Gil Datz
www.UZU-Media.com
Colorado Springs, CO

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?

Consolidate debt - drupal page with finance articles

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

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