RELEVANT Magazine
This is definitely the largest project I have undertaken in my life. The former RELEVANT Magazine site was an aging installation of Joomla! 1.5, and was in dire need of replacement. It was hacked together and routinely took more than 15–30 seconds to load, during which you could see layer upon layer of background image come into the picture. Because of the way Joomla! functioned, everything had to be shoehorned into a standard article template, even if it was some other type of content. The limitation of sections and a single level of categories combined with the separate back-end made article management a nightmare. The decision was made to revamp the site, with Tanya Elshahawi providing the vast majority of the design comps, David Barratt handling back-end development and contributing to information architecture and organization, and myself tackling the front-end and content formatting. Later on in the process, Christina Cooper and Evan Travelstead contributed some designs, and Steven Linn assisted with some of the development and production work.
Drupal was chosen as the platform for the new site because it provided much more flexibility. It allows for specialized content types rather than just articles, meaning we could design templates specifically for a web article, a premium magazine article, a video, a product in the store, a music or movie review, a short post, a podcast episode, and various other types; and its hierarchical taxonomy system makes organizing content much easier. The field API allows for various types of metadata to be added to each node. One such example is the issue of embedded media. On the former Joomla! site, an editor or developer would copy the embed code of a video or other item and paste it into the article body—a messy way to handle it. On the new site, all that is needed is for the URL of the item to be pasted into a text field in the article editor, and the embed code is automatically fetched using oEmbed APIs, and stored separately from the article text, enabling some abstraction and separation of article content from media player markup. We also routinely created landing pages, which were fundamentally different from articles. On Joomla!, we had to paste all the HTML for the page into the article body and then modify the site’s main CSS. On the new site, we just created a special node type for landing pages that doesn’t inherit any of the article styles, and we can attach a separate stylesheet for it.
Another huge step we took was the addition of premium magazine content on the site accessible to subscribers. This presented challenges in terms of creating multiple access levels for users, designing and styling multiple layouts for these articles, as well as creating table of contents pages to gather all the articles from an issue, and automating and streamlining the process of “posting” an issue so it would be less of a burden on the digital team each time. We also used this as a way of introducing user accounts and developed user profiles, integrating this with author bios, store customer information, and eventually migrating to Drupal’s integrated commenting system from Disqus. We also used these accounts for our print subscribers to access our iPad magazine, with our Mag+-based app having a window that opened a special “my account” window from our website. Videos from the issues are also embedded on a specific template on the site and opened in a window through the app.
As the old content was imported and the new content entered, we developed the Drupal theme from the ground up and the inside out, adding additional sections to the site post-launch. In building this custom theme, I incorporated web fonts and icon fonts, even learning some of the ins and outs of SVG fonts, and as much building elements with pure CSS rather than images (with as little extra markup) as possible. The project comprised the better part of 2012 with me leading front-end development on the site until January 2013, and contributing until April 2013. I also headed up all operations of the site from October 2012 until January 2013, and contributed until April 2013.
