It was a pleasure working with ExSquared on their new site design. I've worked with them for several years as a front end developer and designer, so it was great getting to shape their online presence.

Design

I worked closely with the ExSquared team to find the right visual style for the site. They needed it to be sleek and professional, and communicate their friendly and approachable culture at the same time.

We adjusted the ExSquared brand colors to work well with a dark background, then used that heavier background for the header and footer. This conveyed ExSquared's more serious side, and gave me room to be a bit more playful with the brand's blues and oranges in the content areas of the site.

I designed grid systems for mobile, tablet, and desktop layouts. I used these grids as scaffolding for the pages and to establish a content hierarchy.

For the typography I used a simple pairing of Museo Sans and Museo Slab because of their readability, professional feel, and friendliness.

I am very happy with the results. As one ExSquared-er put it: "That is so cool."

Well then, my work here is done.

Development

The site needed to showcase the client's web expertise. So I built the site using the latest and greatest in HTML5 and CSS3.

I created the CSS using a mobile-first approach. The site fluidly fits the width of any browser - from the smallest mobile phone to the largest smart TV screen. I wrote a style sheet with media queries to progressively enhance the site as more screen space becomes available for larger devices.

I also made use of Modernizr.js to test for browser features, which let me create sensible fallbacks for browsers that weren't up to speed on some of CSS3's more advanced options.

The great jquery plugin, Sequence.js, handled the responsive homepage slideshow. I integrated other javascript plugins like Superfish for dropdown menus, and stickyMojo for persistent sidebar navigation while scrolling.

Once the HTML/CSS templates were complete, I integrated my work into ExSquared's Content Management System of choice, Umbraco.