Sisson Studio

We’ve been anxiously waiting for the moment to change our website layout. On March, last year, we celebrated the exit of Hemingway theme and the coming of Futurosity Aperio Prototype theme. After a few design tweaks we were good to go.

We went through the whole year filling our heads with ideas for a new website which resulted in a completely new layout from scratch featuring all the content we wanted. With MAMP’s local helping hand we achieved everything we wanted as far as the layout is concerned. But we didn’t even got close to the functionalities we desired due to our complete lack of PHP knowledge.

A few months after the upload of the modified Futurosity, Chris Spooner wrote and article where he gathered 50 inspiring examples of minimalism in web design. And there it was, our website.

With all the incoming traffic generated by the article and the fact that new projects keep coming from clients, the last thing we did was taking care of ourselves; the website wasn’t in need of such radical change.

Coming 2010 we realized that the website was still good to our needs, in a general sense. Splitting the rock in two sounded better: instead of a radical change in one big chunk, we would do it in two steps.

On the first step we’d only adjust the layout so it’d stay closer to the color palette developed for the Studio’s visual identity. A few simple functionalities and a cleaner face would be all for now.

On the second step we would add a navigation menu with the pages: studio, portfolio, blog and contact and all the functionalities needed. We are getting closer to a moment when it’s important to show who we are and what we do in more details. If this piece of rock needs to be split it certainly will.

So, we finished the first step and here’s what we did:

Colors

Subtle changes were made to the colors to reflect the palette.

Focus on the content

The sidebars dropped to the footer, leaving the articles a breathing space and avoiding reading distractions.

Complementary info

We noticed that lots of articles had some kinds of information that were necessary but complementary and that they occured repeatedly. Further categorization and listing resulted in:

• Inspiration
• Credits
• Acknowledgment
• More
• Soundtrack

All of them should be in an auxiliary bar at the beginning of the article. But how it should be done? We opted for using WordPress custom fields. Calling my brother to help with the PHP was a natural consequence.

Filters redesign

We redesigned the resulting pages of category, author, tags and search filters to make them join the website visual unity.

Rethinking of the “not found” pages

Giving a few starting points to the users who can’t found what they are looking for was a indispensable.

Internal links

Links that point to our own pages could be potentially broken in case the website directory or simply the post slug are changed. We ran to Digging Into WordPress for a valuable help.

Real theme translation

This time we decided to decently translate the theme using Poedit. Enough of shortcuts.

Website performance

This was the worst part of all, ever. After installing and shooting the Firefox extensions Page Speed, from Google Code, and YSlow, from Yahoo! Developer, we discovered the naked truth: website performance was a complete disaster: browser and proxy cache, compression, cookies, DNS lookups, inefficient CSS, image optimization and scaling, CSS and JavaScript ordering… in short, a total shame.

Addressing one item at a time together with the Page Speed and the YSlow users guides and with a little help from the web hosting company we could reach substantially better performance results, getting, in some pages, 98 items OK out of 100 total.

Conclusion

At this very moment the only thing left is fine tuning the CSS for older browsers so that everyone can have a consistent experience when browsing this website.

Then people would ask: “When will it all end?”

Never. Designers website and portfolio are never finished.