Inbound Logistics Web Site

Redesign, back-end CMS implementation and re-launch of 2000-page magazine web site.

Visit the new site →

The Inbound Logistics magazine web site debuted in 1996, but saw its last major visual overhaul in 2002. For nearly 10 years, content was added but the site’s look-and-feel and back-end workflow never advanced. The only positive outcome of this was that while other magazines poured money into web initiatives that yielded no revenue or, even worse, toppled the enterprise, Inbound Logistics avoided that fate.

By 2010, however, the site’s old look and limited functionality were working against an otherwise successful, well-regarded magazine. A new site launched in August 2011, powered by a customized PHP-based content management system. The new site boasts improved functionality, a reorganized navigation system, and a cleaner design built with consistent site-wide CSS.

The home page (below) was completely reorganized to feature the current issue as the “top story” throughout its one-month shelf-life. Hierarchically, that’s followed by the four major “transactional” vehicles the site offers, and two advertising-based online resources. The old site had advertising only on the home page, but the redesign allows for multiple ad units tied to a back-end ad server to monetize all site pages. Greater prominence is also given to the online newsletter signup and the magazine’s Twitter feed.

The bulk of the site’s content is the nearly 1,900 articles dating back to the early 2000s. On the old site (left), articles were organized exactly like in the magazine, adhering to its column and department structure and requiring the user to drill down within that organizational structure to the content they wanted. This context was mostly meaningless online, and offered no value to visitors unfamiliar with the print publication. One of the top new site landing pages is the “This Month” page (below, right), allowing Inbound Logistics to feature its most recent content. Over all, however, articles on the new site were put into logical categories like Commentary, How-Tos, Feature Stories, and Case Studies, rather than “branded” column names taken from the magazine. The images below are scaled one-to-one, so you’re seeing an accurate comparison of the old site versus the new one in terms of page dimensions, type sizes, etc.

The old site’s (below, left) original design—which was optimized for the smaller displays/resolutions of its day—made articles difficult to read. In the redesign process, a great deal of attention was paid to the legibility of the type on the new site (below, right) to make content as accessible and readable as possible. Streamlined and consistent CSS is used site-wide. All print articles—however elaborate their formatting in the magazine—are distilled down to a simple hierarchical structure, using only two paragraph classes and three heading classes. Author photos and biographies—managed within the site’s database—are presented inline with the text, and sharing links accompany each article in an effort to boost awareness of the site’s content and, by extension, increase traffic.

Beyond the overall goal of an improved user experience, and creating a more attractive vehicle for advertiser support, the design goal of the text-centric site was to establish typographic conventions that maximized the limited options available on the web. Article listings and articles themselves were painstakingly adjusted until a clear hierarchy was immediately visible through the typography (see detail below).

My role was to manage the entire project, define the business rules and project requirements, select vendors, categorize content, design the look and feel, set up analytics, establish and implement one-to-one server redirects from well-indexed pages on the old site to their new URLs. I also built a large number of regular expressions to clean up nearly 2,000 pages of old manually-coded HTML pages (FONT and TABLE tags galore!) to strip them down to standards-based minimal markup (P tags and H tags). This made the old content uniform in structure, allowing the developer to import those files into and instantly organize them in the CMS’s database.

Working with Codify Design Studio to translate my Photoshop designs and CSS formatting choices into working page templates and efficient style sheets, as well as Design By The Rues, a developer with a customizable open source content management system, the site’s back-end functionality began to take shape in a way that specifically suited our needs, allowing the magazine’s editors and administrative staff to quickly make changes and updates to content without requiring a production person in most cases.

Since more than 90% of the site’s content originates in the print magazine, it was also my responsibility to adjust all print workflows to create an entirely new post-issue print-to-web process. At the start of the project, I did this using XML tagging within InDesign layouts, then running BBEdit Text Factories on the output to clean them up and make them conform to the tagging standards of the CMS. By the time the site was nearly ready to launch, Adobe Creative Suite 5.5 was released and I created a new and far more efficient workflow by adding Export Tagging attributes to the print layout’s paragraph and character styles, and organizing content for export via InDesign CS5.5′s Article’s panel. The result was cleaner markup produced far more quickly and requiring less of a learning curve for other designers who would be posting each new issue’s content on the site going forward.

Much of the preparation necessary to get print articles onto the web was built seamlessly into the print design cycle. As a result, an entire issue’s content can be posted for final review by the editors within one day of the magazine’s final press approval. An issue now goes live online before the physical magazine is even bound and mailed.