Studiocom Website
Over the summer, we’ve had the amazing opportunity to work with a great agency here in Atlanta, Studiocom. We were invited to team up with their designers to implement a rebrand of their website, Studiocom, with WordPress as the CMS. And of course, since we love WordPress around here, and their designers are top notch, we jumped at the opportunity.
At first glance, the site’s design and functionality seemed fairly simple and straightforward: a one page scrolling design, a few custom post types, a filterable portfolio grid, and a couple of image sliders. Piece of cake, right? Well, as it turns out, it’s a piece of cake to implement all of those features on a standard multi-page site. However, once you start cramming all of that content and functionality onto a single page, things can get hectic.
The first piece of the puzzle we had to solve was navigation. We needed to have the SC logo centered at the top of the page with navigation links under it. And as is with most one page scrolling websites, as you begin to scroll down the page, the nav links “stick” to the top of the page. And in this case, they needed to stick and fade-transform into a full-width nav-bar, smaller logo aligned left and links aligned to the right. Nothing a little Javascript and crafty CSS couldn’t handle.
The other interesting part of the navigation puzzle piece was that the main navigation menu items’ order in WP-Admin->Menus needed to be reflected by the order of content on the main page. If the menu items are in the order page-1, page-2, page-3, then the main page’s content should show page-1, followed by page-2, followed by page-3 as you scroll down the page. And if that order changes in the menu, then it should change on the main page as well. We accomplished this by running a custom loop that gathers pages and spits them out based on their position in the main navigation menu. It’s funny how the solution can be described in one sentence, because it definitely took some WP-Ninja-Skills to work that one out.
The next feature to tackle was the obligatory filterable-portfolio-grid. It turned out that the SC team had some very cool, but challenging ideas about how their portfolio should work. They wanted to manage the portfolio items with a custom post type, have the grid do the jQuery Masonry thing when filtered, and they also wanted each item in the grid to open a lightbox when clicked that displays additional media pertaining to that project, ie images, video, etc. Enter the amazing Media Grid WordPress plugin by. This plugin had almost all of the functionality required, but still needed some tweaking to fit exactly right. Luca at LCweb was great to work with and helped us get exactly what we needed out of the Media Grid plugin. On the SC site, it’s now super optimized to prioritize CSS3 Transitions over Javascript, and run super smooth on mobile devices.
The other big feature that took some Javascript-Juijisu was the “Leadership People Slider” in the People section of the site. The idea here is that the slider should display an image of each Leadership Person (custom post type), slide 3 at a time, and be swipe-able on touch devices. When clicked the single images should expand into a full-width “detail view” with the image and additional text about the person, slide 1 at a time instead of 3, and of course, be swipe-able. We opted to use a customized version of Flexslider for this mission, and it worked out great!
Remember when I said cramming all of these features onto a single page can get hectic? That brings us to the final hurdle in this project, performance. Of course, we optimized as much as possible throughout the build process, but when we reached round 1 of Quality Assurance, we discovered that the main page of the site was a whopping 4.8MB in size and was taking far too long to load. Enter this developer’s dream come true, Codekit. With Codekit and some best practice guidelines put in place for images, we were able to trim down the size of the main page by nearly 40%!
This project was a lot of fun to work on. The team at Studiocom is fantastic, some of the best designers we’ve had the pleasure of collaborating with. There were fun challenges to work out and in the end, the site turned out great! Head on over to Studiocom and check it out for yourself.
