CCLI empowers affordable and legal expression of worship by simplifying access worldwide to artists' content, resources and media through a suite of online tools and services such as the CCLI® Copyright License™, SongSelect and Church Video License™.
My involvement with this project began before the work was awarded as a technical consultant for the agency OVO who was already working with CCLI on various branding initiatives. I helped conduct research and discovery resulting in a technical roadmap that presented suggestions on hosting, content management tools for multilingual-networks, accessibility, and other digital strategies I felt would help lay a strong foundation for a successful relaunch.
A proposal was submitted and OVO was awarded the work. When it came time for OVO to source their development, they asked if I had any interest in developing the project as well. There were several challenging aspects of the project that excited me, so I gladly accepted and got started right away.
- Project Highlights
- Development Stack
- Powered by WordPress
- A highly optimized WordPress back-end built for large volume traffic.
- Multisite Network
- A finely tuned Multisite network powered by a single highly flexible theme.
- A customized WPML integration was configured for complete multilingual control.
- Mobile Optimized
- Each component was optimized for speed and proper presentation on mobile devices.
- Easy to Administer
- ACF and other custom inputs were carefully crafted and implemented.
- Nginx Hosting
- A key element of my performance plan was finding the right Nginx hosting environment.
- Strict Grid
- A strict adherence to the underlying grid foundation.
- Responsible Development
- Efficient, DRY and maintable code was written using modern development workflows.
- php 7
- Foundation 6
- git / bitbucket
The project's unique set of requirements along with the need for a centrally managed and multilingual network meant that every tool and feature had to be scrutinized, customized and heavily tested. The unique mix of project requirements often placed the necessary functionality just beyond the limits of many popular off-the-shelve tools. The features that did rely on pre-existing solutions, often required further development, extending their core features to meet the needs of the project. Whether working with existing APIs or creating custom tools, great care was taken to ensure that the written code would maintain compatibility on the network for as long as possible.
After 10 years of experience with WordPress, this project tested my chops like no other before. The WP environment needed to be reliable, performant and capable of serving content from a very large database, under heavy traffic without crashing. A single WP theme needed to be used for all sites on the network. Flexible enough to work in a multitude of geo- and language-specific scenarios yet simple enough that the code base could be easily maintained and content easily managed.
Prior to this project my experience with Multisite had been limited to personal side-projects that were less heavily tested in real world scenarios. Working with Multisite at this scale was a true test of my mettle. With so many edge-case requirments and unique functionality needs for both the front- and back-end, I learned countless invaluable lessons.
The WP environment needed to be reliable, performant and capable of serving content from a very large database under heavy traffic without crashing.
For the inital launch 21 different sites representing 11 different countries and seven different languages were required, with more planned for future rollouts. All content including image meta data needed to be easily translated into different languages unique for each site on the network. For example the US site needed, Spanish and Korean translations, while the German site only required a UK English translation. WPML was used as the primary translation tool yet I often found its limits and further translations functionality needed to be developed. This was most often the case when working with content stored in post_meta and the site_options database tables.
A Single menu component was developed capable of working on any device while also dynamically including new sites and their respective languages whenever they were added to the network. In order to achieve this, I wrote a few custom functions that made use of both existing WPML hooks as well as some recently updated WP 4.6 Multisite functions.
For this project four custom breakpoints were defined, extra-large, large, medium and small. The first three of which made use of the max-width property to serve fixed, art directed layouts, while the smallest breakpoint utilized a fluid layout. Responsive patterns were used where ever possible, responsive images were used throughout, including both the srcset and picturefill. Retina images are loaded when capable devices were being used. A mobile-first approach was taken when writing styles for each component. Touch target size and mobile performance were also considered and heavily tested.
I take a lot of pride in the content management tools I create. This project required creating new user roles with custom capabilities, removing uncessesary items from the default WP admin, and ensuring that all custom fields and inputs were easy and intuitive to interact with and edit.
When compared to other web servers, Nginx supports four times more concurent traffic and is proven to consume much less memory.
A key element of my performance plan was finding the right Nginx hosting environment. With the knowledge that websites like WordPress.com, YouTube, Pinterest, Instagram and Tumblr relied on Nginx I was confident that it was the right environment for the needs of our heavily trafficked Multisite network. Numerous benchmarks exist proving Nginx to be the most efficient web server available. When compared to its competition, Nginx supports four times more concurrent traffic and is proven to consume much less memory.
Design for this site was completed by Principal and Designer Kyle Hildebrant at OVO. The approved designs were built on an established visual grid and it was required that all developed assets maintained a strict adherence to this grid. In order to review the layouts and their grid-alignment, I created a small jquery plugin that allowed us to easily toggle a visual grid overlay on any page while reviewing internally or with the client.
Efficient, DRY and easily maintainable code was crafted using modern development workflows. Front-end styling was written using sass and the site made use of the Foundation 6 Flex Box grid. Autoprefixr was used to ease front-end development while maintaining cross-browser compatibility. Fallbacks were utilized when appropriate. The code was versioned with git via a bitbucket repository.