This is part two of a behind the scenes look at how we built our new website theprimacy.com. If you missed part one, you can check it out here.
For the curious type, here is what one of those templates looks like:
The final site has template definitions for sixteen unique content layouts. If you have ever been involved in an enterprise CMS project you’re likely familiar with integrating page templates into the CMS. This is nearly the same thing, but the template logic is being done in the browser instead of on the server.
All About the Content
Content is living and breathing; it needs attention and updating to stay fresh and relevant. In April we hired a Senior Copywriter. His first task: Write all the content for the new site—and give it a unique tone and voice. Because he was completely new to the team (and the agency), he was able to take a fresh approach and provide a new perspective. This helped us overcome a big roadblock, and it got us to the point where we could start feeding the copy into a CMS. We then turned to our friends over at Acsys Interactive who have a pretty nifty CMS called SiteManager. It wasn’t quite ready to be used on a responsive site, but we know a few people over there and they made it work for us on the fly. We got them to serve the content to us through a web service and in the end; we had a responsive compatible CMS that even our marketing people could use.Getting the Content
Rebuilding the CMS web services
SiteManager already supported web services, but wasn’t always compatible with responsive design. Because we were implementing responsive templates our new site markup needed to be tightly controlled HTML5 markup without inline styles or the pages would break. That meant we needed Acsys to modify their CMS output. Needless to say it was a ton of work. Essentially they built a responsive-compatible version of their CMS and web services to meet the needs of our project. As we approached our deadline even the CMS development and content entry became an iterative project, with our team building and testing batches of page types as the CMS team at Acsys made them available.Javascript Templates
We again turned to Backbone.js, to take the content from the CMS web services and feed it into pre-defined templates that we built using Underscore. The JS engine of the site takes the content and templates, combines them and produces new HTML pages on the fly—allowing content to load into the template as you navigate, without refreshing the page.Bringing it all Together
For the curious type, here is what one of those templates looks like:The final site has template definitions for sixteen unique content layouts. If you have ever been involved in an enterprise CMS project you’re likely familiar with integrating page templates into the CMS. This is nearly the same thing, but the template logic is being done in the browser instead of on the server.