The 2026 Drupal Business Survey is open. Your response will help shape the future of the Drupal business ecosystem.
By khalor on
Website URL
http://www.halcyondigital.co.nz
Screenshots
The brief
This is a business I run alongside my freelance Drupal work, so design and development was done in house. For the concept, we decided to steer as far away from traditional business/rental websites as possible, and go for a much more 'designed' approach. We took as much of our high-tech equipment catalogue as we could to a remote location, and photographed a full-page background image, striking a contrast between the technical nature of the our services and the location-based nature of much of the work. The black-and-white aesthetic fit the feel we were after, which we could then offset with the company's dominant blue colour. The whole thing comes together somewhere between a portfolio site and ecommerce catalogue.
Design and Development
Homepage
To make the full-page background image more than just a static background, we decided to tie it into the UI of the site using the fantastic ImageMapster jQuery plugin. After some careful coordinating of the image to break out the individual elements, each piece of gear was turned into a hotspot linking directly to it's entry within the main site, as well as displaying a tooltip containing information about that item. Care was also taken to resize/reposition the background as screen resolution changes, although it still has not been configured for portrait and mobile screen sizes.
Catalogue
Continuing the technology-meets-nature theme of the front page, we constructed a tall background image broken up into several elements, and implemented parallax scrolling. These elements are also spaced out in z-depth, so that they pass and cross through both other background elements, and occasionally, scroll past a foreground text element.
Why Drupal?
Aside from my familiarity with the CMS through other projects, using Drupal has allowed us to build a future-proofed website that we can easily make additions to, as well as left the door open for expandability in online ordering, CRM tracking, private client back-end, etc. The site then runs on the Xplain Hosting cloud, which utilises Amazon Web Services.
Key modules
Drupal Commerce
Using Drupal Commerce instead of just creating nodes with fields for price etc, even though there is no online ordering, has left the door open for future development to incorporate online bookings, quotes, etc, without redeveloping much of the existing content. The pluggable/modular nature of Drupal Commerce meant we could only enable the few parts we needed, rather than taking a performance/UI hit from a fully-featured ecommerce system.
Honeypot
Honeypot protects any form submissions from spam without resorting to pesky CAPTCHAs or other Are You Human? challenges. At this stage it's only in use on the contact page, but could easily expand to protect quoting forms, shopping cart submissions, etc.
Google Analytics Contact Form, Webform, Rules Email & Google Analytics Tokenizer
This embeds data on a site visitor acquired through the Google Analytics module to any form submission, so that any additional data on repeat visits, campaigns, etc, can be viewed alongside their submission data.
DraggableViews
DraggableViews is implemented in a small block for each gear category, so that each page can be reordered freely by an administrator. This sidesteps needing to use weights or any other form of ordering.
Base theme: mothership
Normally I would work in a Zen sub-theme but for this I wanted to strip away as much markup as possible and start work in a very minimal single-column structure, with options for hiding/trimming field markup. Mothership's rewriting of field wrappers made theming much faster and the markup as a whole much leaner and cleaner.
