In this guest post, the team from Gotham City Drupal: Kelly Bell Architect QC & CSR, Tim Wooten Project Manager & QA and Tom Tran Lead of Dev team shares how they built, launched and ran a new Drupal website for Billboard Magazine.
Looking to overhaul its advertising website on an accelerated timeline, Billboard turned to Gotham City Drupal. Billboard needed the site to drive business value by accomplishing the following goals:
Ensure a consistent branding experience with billboard.com.
Provide a seamless user experience on desktops and all mobile devices.
Generate a high download rate for its media kit.
Help magazine advertisers learn more about the print edition and production schedule.
Post case studies about video marketing.
Convert interested visitors to paying advertisers.
Given Billboard’s timeline and goals, we decided to build the website on Pantheon and Panopoly.
Building Billboard’s New Drupal Site
1. Panopoly Takes the Busywork Out of Building from the Ground Up
We use Panopoly for websites we build from the ground up. Quite simply, it rocks. Its user-friendly, panels-based Drupal distribution, IPE (panel in place editor), page manager, panelizer and fieldable panel panes help us begin to build a superior product. Most of the major modules are already provided out of the box.
With the deadline looming, our development team needed to get up to speed quickly and learn how all the detailed parts of Panopoly worked. Panopoly provides most major modules out of the box, but some of its architecture takes a bit of time to customize. Fortunately, the guys at Kalamuna created Kalatheme to integrate with Panopoly.
2. Pantheon Keeps the Project On Track
For a high-performance and high-availability site like Billboard’s, Pantheon was a no-brainer. We use Pantheon for every project, but here’s how it kept this one on track:
Dev, test, live environments made everything easy and efficient.
Continuous integration allowed us to separate the code, database and content files.
A continuous testing process kept the client involved with fresh data and code in the test environment. We also used real-time uptime monitoring and ubiquitous Git and drush integration.
By giving us a consistent foundation on which to build, Pantheon saved us hours. No more server setups and “it worked on my machine” scenarios. Instead of talking to our clients about infrastructure delays and development slowdowns, we talked about how to drive business growth by making a kick-ass site.
3. Customizing the Theme and Graphics to Minimize Page Load
Theme. We created a Billboard subtheme in Kalamuna, and leveraged SASS/COMPASS to author styles on top of Kalatheme.
Graphics. We used SVG graphics for cross-device sharp rendering and added breakpoints with media queries. We put together sites with a similar color scheme, typography and shape elements as on the main site.
Navigation. A button at the top-right expands and collapses the media kit download carousel. Sub navigation is fixed on the top and shows the reader the active subsection. The new site also offers Superfish multi-column menus, a mobile menu sliding in from the side, and Nodequeue for sorting slideshow banners.
Mobile devices. To control which parts of the site are displayed on certain devices, we decided to use breakpoint panels. This approach keeps page loading minimal for the client browser.
Overcoming Three Hurdles
1. Optimizing the Site for Multiple Devices
Our toughest challenge was that the site had to look great on multiple devices: desktop, tablets, iPhone, iPad, iPod Touch, and Android. That was no easy task, especially since no single developer on our team owned every device. The solution involved coordination amongst several GCD developers, as well as the use of Browser Stack to properly test the site on all the devices. We optimized the site for both Retina displays and for traditional screen resolutions.
2. Making It Easy for Clients to Manage Changes
We focused on building specialized views and other back-end administrative functions, so the client could properly manage the site, and easily find and edit the content as they wanted.
3. Turning Ideas Into Reality
The other challenge was turning the clients’ specs into details the development team could run with. Pivotal Tracker and Google Spreadsheets helped us keep things running smoothly.
At the end of the day, we delivered a great product. The client is very happy with the outcome, and the developers had a chance to learn and grow. This was a fun project to work on with some fantastic partners. It was a success all around.