Creating the Fresh Blocks Site

January 29th, 2009 in Case Studies

The Objective

A simple, clean, and fast website for potential clients to view our previous work, and for others to learn from us. It must be easy to add, remove and update content while at the same time allowing us the freedom to be creative. Here’s how we did it.

The Core

We carefully evaluated a couple of alternatives when going about choosing a publishing platform based on the requirements we had for our content.

WordPress

We ended up choosing WordPress for our publishing platform. We also tried out ExpressionEngine‘s Core 1.6 and a pure HTML5 single page site. In the end, we chose WordPress for the extendability we get at the low cost of free.

jQuery

This was an easy choice. Since WordPress uses jQuery and includes it in tag already, we had no interest in potentially running into javascript conflicts by using Prototype or MooTools. Purely a decision made from personal preference. We’re also using the Google hosted version of jQuery.

Additional Functionality

Aside from creating an action WordPress theme for our website’s appearance, we had the need to add some functionality currently not in WordPress as the system is primarily a blogging platform.

Custom Project Write Panel

The major part of our website, is by far our Portfolio page that is used to showcase our work. As such, we needed to make adding future work simple, easy and fast. That required a custom panel for adding each individual project’s details. We created one similar to Function’s Revisited: Creating Custom Write Panels in WordPress article. Below a screenshot of our custom Project Details panel.

Thumbnails

We are currently using the built-in Media Library of WordPress and have set it up to automatically re-size the images for us for our specified sizes of Thumbnail (55×55 px), Medium (215×215 px) and Large (530×530 px). We use each individual size type in Project’s view to show the work. In addition to that, we’re also using a jQuery version of Lightbox to allow users to view a larger version of the images.

Different View Options – List vs Grid and Filtering

The last small bit of advanced functionality we wanted to add is a filtering option for the users to filter the list of projects to only the Service type they’re looking for. For us, that meant Android Apps, iPhone Apps, Web Apps or Website Design. While we were at it, we also went ahead and added the functionality to allow the users to see our projects as a thumbnail grid view or as a detailed list view. All this was done with some jQuery magic. NetTuts+ and DesignMag have some great tutorials on how to do it yourself.

The Need for Speed

Speed is important. One of the main objectives of the site is to minimize the load time. User experience is so important to us, especially since we want our potential clients to be able to jump around our site without having to wait for something to load. We made sure our website passed both CSS and HTML validation. And then ran them through both Google’s PageSpeed and Yahoo’s YSlow tools to measure our website’s performance. We then made sure to enable GZip Compression. We ended up having to do this through our Web Host’s CPanel system under Optimize Website. It was as simple as adding in all the Mime Types to the list.

We are not currently using a Content Delivery Network (CDN) such as Amazon S3 to offload our static content, but we are keeping that in mind for the future. We are using the W3 Total Cache plugin for WordPress to assist in minifying CSS, JS and caching.

Future Consideration

Aside from the possibility of going with a CDN for static content, we are looking forward to using TypeKit and better incorporating CampaignMonitor‘s newsletters archive into our site.