Following up the recent blog post regarding the design process of the new fristcenter.org, I wanted to touch briefly on four goals I kept in mind while planning the development on the new site.
1. Accommodate the Large Audience of The Frist Center
Art has a way of captivating all people. Therefore, it is to be expected that The Frist Center would have a very diverse audience. As such, I made sure to keep with Section 508 guidelines when developing The Frist Center’s new site. In doing so, the site will not only exhibit a strong UX, but also play nice with screen readers and other assistive devices.
While planning for development, I quickly realized that another 30 minutes of code would allow the site to accommodate any size device without any more thought. The fluid list pages and homepage adapt (go ahead, try resizing your browser) and the content pages break down nicely to accommodate the small screen size of a mobile device. This was a nice surprise for the fine folks at The Frist Center come presentation time, as a mobile version of the site wasn’t part of the original project scope.
2. Make it Super Easy for the Client to Manage
ExpressionEngine
We love the folks over at EllisLab. One of the reasons we love them is because they have produced a baller CMS. ExpressionEngine, through it’s extendability and client-friendliness, was a great fit for the new fristcenter.org. I made good use of the monstrous ExpressionEngine add-on community and developed a few modules and plugins of my own to deliver a well-rounded product that was easy for the client to use and love.
Flexible Navigation
One thing the client really enjoys is that they have the ability to control second and third-level navigation from within EE. As many of you EE developers know, this is not something easily done within the confines of an out-of-the-box EE install. However, using a cocktail of strategic Channels and Pixel and Tonic’s Playa module, I was able to come up with a logical and efficient way of providing this flexibility to the client.
Callout Module
I knew that the client would want the fluid listing pages to be very flexible. They needed to control the ordering of the call-outs, embed media directly in the call-out, and support some slightly complex filtering/pagination. My solution to this problem was not to use a bunch of PHP code in my EE templates; rather, I would build a custom module that did all of my necessary pre-processing and then handed off parsing to the Solspace Calendar module. More on that later.
Along with the module, I built an EE tab that allowed the client to preview changes they made to the call-outs found on the listing pages and the home page. As you can see in the picture below, the client sees a new publish tab and has the ability to customize the images, video, audio, copy, and links used in the call-out while previewing the look and feel in real time. The CSS for the call-outs is shared between the front and back-end so design changes will automatically be reflected in the custom EE tab. When they’re finished, they just click the submit button and it’s all published beautifully on their site.
Fig. 1 - The user is able to drag the call-out preview around as they edit the various data points.
Easy Integration with YouTube and Vimeo
Multimedia is the center focus when adding content to the site. I wanted to make it really easy for the client to show not only images, but audio and video as well. To show a YouTube or Vimeo video, all the client has to do is paste in the URL to the video. There is no embed code to mess with. For imagery and audio, they simply upload the file, set a couple parameters and they’re done. The result is a nice, cycled media slideshow on the front-end.
Fig. 2 - Usage of Matrix to make the addition of multimedia simple.
Fig. 3 - The end result as seen in the Connecting Cultures exhibition.
3. Make it Feel Like a Fast, Responsive Application
Brad was especially fervent about this point. He and I wanted the site to be out of the way and feel more like an application - giving you a window into The Frist Center anytime you wanted. With that in mind, I built the Calendar + Exhibitions section to filter/paginate exclusively with AJAX and used minimal animation. The result is a very snappy, application-like interface. As you’re filtering/paginating, you’ll notice that the URL changes to include your parameters. If you save that URL or send it to a friend, the site will automatically restore your view state so you can continue where you left off.
Fig. 4 - Changing the filter or paginating changes the URL for easy sharing/saving.
4. The Codebase Should be Well-organized and Efficient
Code Quality
All of the snappiness talked about above is worthless if your code is inefficient, bloated, and thus is slow. This is something I am really passionate about. As such, I spent a lot of time planning and, in some cases, re-coding certain sections of the site to ensure the code was well-organized, efficient, secure, and maintainable.
I’m a firm believer in object-oriented (well, kinda) Javascript code. Here is Frist’s uncompressed document.ready() file. You’ll notice that rather than throwing a bunch of jQuery selectors and callback functions in the file and calling it a day, I made use of object literals to help keep my code organized and easy to follow. Again, you’re not always going to be the one maintaining your code, so you should always plan for this. I’ll thank myself when I return to this code a year or so down the road.
One more thing, remember the call-out module I mentioned earlier? To accommodate it’s custom data and display logic, I wrapped up Solspace’s Calendar module with my own call-out Module much like how Pixel and Tonic’s Playa module wraps up the Channel module to make my customizations without compromising Solspace’s codebase. Using this EE hook, I was able to “inject” my call-out specific template variables into the data output. The result of building this module was code that is decoupled and completely contained in the single call-out module.
Strategic DB Caching, Asset Minification
Along with efficient code, you need to think about taking some of the load off the DB server. ExpressionEngine in all it’s glory can be a DB hog. Luckily, it has some pretty nice caching abilities built in. Aside from the built-in template caching, I’ve employed some caching built-in to MySQL to further alleviate the load on the database.
As far as client-side optimization, I’m using my AutoMin module to automatically combine, compress, and cache my Javascript and CSS code. Using AutoMin in this Javascript-heavy site gave me back 76% of my asset bandwidth and the minification made a huge difference in the load time when using the slower JS parsing engines in Internet Explorer.
A Final Note
As a developer, it’s refreshing to be able to say that you’ve raised your own bar. Developing the new fristcenter.org was challenging at times and there was much to be learned, but the hard work paid of with a great product and an ecstatic client. They even treated us to champagne after the site launched. We think the new site will treat them just as well as the previous and are looking forward to continuing our great relationship in the next iteration.
Share Article
2 comments