Detail

Evidently

3rd June, 2015 ✭ by Digital Pencil

Our primary concern was making the website fool-proof for the client to update their video content in the backend. Luckily ExpressionEngine shines at creating fully customisable backend interfaces that take the pain out of creating and managing content.

Evidently are a London based film agency with offices in Toronto, Johannesburg and Singapore. They create slick, poignant advertising campaigns, write good copy and design striking identities.

We’ve been working with them for a number years, as their go-to ExpressionEngine agency, so the relationship was solid to begin with. Being able to be open, frank and direct with a client and they with us is the cornerstone to any relationship. So when they approached us to help them with the rebuild of their own website, we jumped to the occasion.

They were looking to redesign their company website, giving it a new look, a set of new features and make it responsive. Their old site was already running ExpressionEngine thankfully – we love EE. But given the specs for the new one and the way that the old one had been structured it was easier to start from scratch rather than waste time fighting with the original build.

The main interactive feature request was to make all work related teaser blocks play a 3 second snippet of video on hover. And the video had to be in HTML5 native video format – no Flash or fiddly JS wrappers. So, we provided them with the eight different versions that each video had to be supplied in: 16:9, 1:1, in two different sizes saved as mp4’s and WebM’s. This allowed the peeps at Evidently to punch in the settings on their end to automate their production flow.

Naturally, with this sort of request our primary concern was making it fool-proof for the client to update their video content in the backend. Luckily ExpressionEngine shines at creating fully customisable backend interfaces that take the pain out of creating and managing content. We used a couple of Matrix fields with five columns each for the video files, arranged the publish form neatly and the pain was gone.

The header carousels were dealt with in a similar way. But the real work went into refining the template code, and getting it to play nicely with Twitter Card and Facebook og:graph integration. We use Stash for all our sites, the abstraction allows for so much flexibility. And passing template variables upstream through the parse order helped us achieve what we needed.

The Homepage publish form was devised as set of Matrix and Playa fields. This allowed the client to simply choose the video teaser blocks from their previously published work channel. In the client’s own words: “It’s a thing of genius and beauty”. Which is always nice to hear. But the credit is really due to ExpressionEngine’s flexibility and modularity.

We used DataGrab to import all their news articles from their former site. And we did the same with their staff biog pages. We also used Low Variables to handle all the parts of the site that weren’t managed by channels. And we created a status field to manage draft entries that only logged in members could preview on the frontend.

Other plugins included were: CE Image and CE Lossless to manage image sizing, MX Google maps was slightly hacked to apply a SnazzyMaps filter, Minimee to reduce CSS and JS calls, Zoo Flex Admin to simplify the control panel, and EditThis as the final cherry on the top.

The end result was a simple, responsive site to use and navigate, a backend that was equally easy to manage, and heaps of praise from a very happy client. Thank you ExpressionEngine!

ExpressionEngine News

#eecms, #events, #releases