Deelux Kitchens Website Screenshot

Deelux Kitchens website serves primarily as an online retail "window". It's not an e-commerce site per se but its main aim is generating leads for the retail outlets. With that in mind we had no need for e-commerce solutions like Drupal Commerce or Ubercart and used Webform as our tool for collecting leads.

With Webform being a key part of collecting information, we went for its 4.0 version (at the time of writing in alpha) - the reason being that we display a 'Quote me' form on every 'product' node and Webform 4.0 provides a hidden value to display referring URLs to site admins, enabling them to see which product page the visitor filled in the form on. We enable the webform as a block and then use that block as content type field using Display Suite. The above arrangement requires that the block be shown as 'full node' and 'show all webform pages in block' enabled for referring URLs to work.

Another incredibly useful (and very popular with site admins) feature we added to Webform is Google Analytics integration thanks to the wonderful module Google Analytics Contact Form, Webform, Rules Email ( https://drupal.org/project/contact_google_analytics ), which allows us to e-mail, along with the Webform results, a search string used to find the site. Since this is a lead generation site that will eventually require a sales person to phone the prospect, knowing in advance their main interest helps a great deal.

Why Drupal was chosen: 

Drupal was chosen primarily for its SEO strengths however another important consideration with the ease of development of a mobile-friendly website.

Describe the project (goals, requirements and outcome): 

The project's primary aim was to re-design the website and move it from Joomla to Drupal. In the process we had to built a site that would be very SEO-friendly and would work well on mobiles and tablets - the mobile side of the re-design was important as over 20% of the site's visitors were accessing it from a tablet or a smartphone.

We built the site using AdaptiveTheme and its responsive design capabilities although we still had to put plenty of work into design having been given 12 target screen resolutions. It is still somewhat a work in progress.

Modules/Themes/Distributions
Why these modules/theme/distribution were chosen: 

AdaptiveTheme - for its responsive design and SASS integration;
Webform (together with Google Analytics Contact Form) - to capture leads;
SMTP Authentication Support - in conjunction with Webform's automated e-mails, to prevent them going into recipients' spam folder.
Gallery Formatter - for main image displays;
Switchtheme - to provide an easy way to switch to a non-mobile site version for mobile visitors (we cloned our theme and removed responsive features from the clone).

A combination of AdaptiveTheme and Switchtheme module enabled us to provide a very quick (and somewhat dirty :) ) solution to the unplanned requirement that came up at the end of the project - from the beginning the site was being developed as a responsive site that would work well on a variety of mobile devices however right at the end of the project the client asked to provide an option to visitors to switch to a 'normal' site version should they choose to do so when on the mobile device (similarly to how the BBC site used to do).

A 'normal version' is a bit of a misnomer when it comes to responsive CSS but we came up with a very quick solution to satisfy the client - we made a clone of our Adaptive-based site theme, and named the clone 'Standard' theme (an aside - unfortunately Adaptive-based themes have a lot of settings defined in DB rather than in files, so extra care was needed to set all the features in the clone the way they were in the original), gave the 'body' 960px min-width and emptied responsive CSS files.

We then downloaded the dev version of Switchtheme and applied a patch to it that enabled us to hide unwanted themes from showing up in the available list (since we didn't want the base Adaptive theme to appear). We enabled the Switchtheme block in both our main theme and the cloned 'Standard' theme (and called the main theme 'Mobile' in the block's drop-down), but for the main theme we set 'display: none' for the block in the 'desktop' media query.

Now when a visitor comes to the site with a narrow screen resolution, they get our main theme but with a drop-down block at the bottom allowing them to switch from 'mobile site' to 'standard', with 'standard' being our fixed-width cloned theme. And because the block is enabled in the clone too they can switch back to 'mobile'.

(By the way, we intentionally do not use any browser sniffing to determine what to present to visitors as it's too unreliable)

Team members: 
Deelux Kitchens Mega Menu
Deelux Kitchens Sliding Draw
Deelux Kitchens Mega Menu 2