At Wycliffe, my biggest task was rebuilding the site template for the proprietary CMS. The initial template was built by the CMS vendor, and I was tasked with crafting a leaner solution. Partnering with a designer, we created a new look and feel for the site using modular CSS principles, including reusable classes and patterns. We dramatically reduced the size of the CSS file and greatly improved site performance.
This is a landing page for a children’s book Wycliffe published. It holds activities and has a place for name acquisition to sign up to get more activities.
This is a landing page for a campaign at Wycliffe featuring translation projects in Peru. This page housed a video, photos, and stories gathered by a content team.
This is a landing page for a campaign focusing on how to live a life of significance, and how people’s lives can relate to the mission of Wycliffe.
This is a landing page for a campaign at Wycliffe featuring sign language translation projects in Thailand. This page housed a video, photos, and stories gathered by a content team.
This is a landing page for a social campaign to raise awareness about why the Bible matters in people’s lives.
Operation Christmas Child hired RELEVANT to create a video and microsite promoting their cause. Evan Travelstead created the graphics and animation, along with the site design, and I implemented the site’s HTML and CSS using the landing page platform on the new RELEVANTmagazine.com.
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.
At the time, this was the largest project I had taken on. Reject Apathy is a section of RELEVANT Magazine that focuses on social justice issues. The site was originally a subsection of the former RELEVANT Joomla! 1.5 site (and has now been rolled back into the new RELEVANT Drupal site, after having lived at its own domain for a little over a year). The Reject Apathy site was built on a Joomla! 1.6 platform, which had substantial improvements over 1.5, such as nested categories, better user and permission management, a cleaner admin UI, among other things. The site design was comped by Tanya Elshahawi, and the back-end development was done by David Barratt. The Reject Apathy Joomla! template was built from the ground up and the inside out.