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 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.
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.