Scranton Gillette Communications
Building Design + Construction and Housing Zone are trade publications serving the construction and home building industries. Through Duo Consulting and Drupal, their information, services, and regular blog posts and articles are now accessible online as well as in print.
Re-establishing their web presence was a unique task, given the situation: earlier this year, business-to-business facilitators Scranton Gillette Communications acquired Building Design + Construction and Housing Zone, print publications that had been on an Internet hiatus since being sold to their former company’s editors. Wanting to revive these publications in their online form, Scranton paired up with Duo Consulting, working from scratch and XML files to recreate the titles in Drupal. Turning out the sites in record time (just under three months), with design and development teams working parallel, the collaboration between Duo and Scranton resulted in accessible, attractive, content-rich (but not bulky) online publication portals that meet the needs of visitors, advertisers, and administrators alike.
Goals
The sites’ roles as hubs of industry information and sources of advertising revenue were strong motivating factors in getting them up, and getting them up quickly. For BD+C, Scranton wanted a site design that would represent their market, and the look and feel of the physical publication. Housing Zone was not based an actual magazine, but its online incarnation would include five sub-sections. Both sites needed to visually accommodate multiple advertisements -- their business model was a top priority. Beyond that, their designs should stylistically represent the brand, and have good “shelf-life”- be contemporary enough not to look dated.
In terms of development, both sites had to handle large amounts of content and daily updates, all of which needed to be accessible to visitors; industry people that counted on the site as a resource. In addition to transferring the monthly print publication online, there would be regular web-only content. Housing Zone’s unique sub-sections had to integrate smoothly into the site’s overall navigation and structure. It had to be easy to get to a specific area, and equally easy to find your way back.
Solutions
Working with the idea of a magazine focused on construction, Duo’s design team decided that BD+C’s aesthetic should be very clean and industrial, with compartmentalized boxes of content and specific places for page features. Masculine and modern, the site was visually designed to endure. They took some elements from the magazine: the current color scheme and many of the functional elements, and recreated online-only sections and content.
Housing Zone had five publications under its banner- Duo created these web-based magazines and used different styling for each of the five verticals. Each section served a specific purpose, and had content tailored to their area: multiple publications meshed into one site. Using a dark and light hue of a primary color for each section, Duo achieved an overarching design aesthetic that differed in individual color palettes. Due to the different nature of Housing Zone’s industries and markets (one that touched into architecture and interior design), the palette was softer, giving a slightly warmer, domestic look and feel.
The sites had similar (and sometimes identical) content types, Views, menus, and blocks. Structurally, BD+C was somewhat less complicated than Housing Zone- the most involved part of the process was transferring over data. Converting it from the SQL server to mySQL, deciphering relationships and fields, and cleaning up the data was accomplished through database-savvy developers and the Migrate module.
Housing Zone also went through the migration process, but needed to showcase three publications through one website. Through Spaces and Taxonomy, every piece of content was associated with a publication, and divided into sections by this association. Although the content was segmented, the site remained navigable: if a visitor wasn’t in a Space, they were looking at all of the content globally. Within a Space, they’re within a walled garden, only seeing what’s in that Space.This Space filtering was accomplished with Views, which also made multiple copies of the same menu and (for the most part) manually assigning prefixes unnecessary: through arguments and the module’s innate functionality, a lot of time-consuming work became automated.
Migrate, Panels, and Spaces’ roles in the process are detailed further below.
Results
One of the greatest challenges creating the sites, and ultimately greatest successes, was time. Due to the shorter than normal time frame (and partly, the from-scratch nature of the project), there were not separate design and development stages so much as both sides of the team working in tandem, which meant constant collaboration and making sure both sides’ implementation worked well together. There were also issues with how Internet Explorer was displaying some of the elements, which required tweaking- however, in the long run these adjustments made the site more compatible with future browser incarnations.
There was a “shockingly little” amount of custom code that had to be written. Instead, developers utilized out-of-the-box functionality and a variety of modules to pull in great amounts of content and shape it into accessible pages. Possible future plans include using XML to export information to newsletters, custom print styles, and a mobile version of the site. The comparatively small amount of post-launch tasks and revisions speaks to the project’s process: having the content up front more than made up for not having an existing website to reference, allowing for a turnaround time that could only have happened in an atmosphere of clarity, content focus, and cooperation that characterized Duo’s work with Scranton Gillette.
Key Modules
● Migrate: We used this module to map the fields in our database to the fields in the target content types: after Joel, Vice President of IT at Scranton, had changed XML files into database tables, we grabbed the data from these tables and converted it to Drupal content. It helped that the sites were similar in terms of how their content types were set up.
The benefits we gained from this cannot be underestimated. Having a real sense of what our content from the project’s beginning benefited both design and development: knowing what we had to work with let the team clearly how it should be laid out, what should happen on the backend, and what features we would need to optimize the site. It was the equivalent of a site roadmap. We filled it out as we went along, but knew what we were looking for and where we should go.
● Panels: For Housing Zone, instead of having lots of template files, which would be cumbersome to update and not allow the client easy access to pages’ layouts, we relied on Panels to differentiate each section. Every page was based on a Panel layout, which allowed easy management of the multiple ads that populated them, as well as dynamic blocks. Giving the sub-sites flexibility, but uniformity within their section gave administrators the best of both worlds.
● Spaces: The first priority for content on the Housing Zone was organizing its sections by publication. There were 5 major categories (taxonomy terms) in the main vocabulary, Publication, but content could also be other vocabularies. We needed a way to display “sections” of the site that showed only content that was in a particular Publication (tagged with one taxonomy term of that type), but could also be in one or many other vocabularies. Essentially, it needed to mimic having a completely different site with its own content.
There are several ways segmented content can be presented in Drupal without having to create a new site, such as Organic Groups, Domain Access, and Internationalization, but the only method that was feasible in our case was Spaces.
Spaces helps maintain a persistent context for all content. In the case of the module, Taxonomy is exclusive to a single term in the vocabulary that’s set up to use Spaces, but inclusive of content in any other vocabulary, as long as the main context also holds. Put simply, “a way to make one Drupal site act like several sites” exactly what we needed.
Each of the publications has its own “homepage”, which was creating using Panels, taxonomy terms, and Views. Since all publication homepages have the same layout, only a single variant was needed, with each View in the panel having the “available in current space” filter set so that it only displays relevant content (in most cases, Views ignores “site segmentation” settings and will show all content unless it’s explicitly set to filter by some criteria). One of the Publications is set as the homepage for the entire site and acts as the default space. So if you went to the homepage and clicked around, you’d be viewing content from that space only.
Each additional space has a URL prefix that is added to all links to content while within that space. They are maintained until you leave that space by clicking on a link to another space. Even the “home” link will lead you to the homepage of the current space you are in. Links to items that do not exist within any space (such as Contact page) will not have a prefixed URL. For the most part, Spaces solved the issue of rewriting URLs.