Building mixd.co.uk

This weeks RWD Weekly feature site comes from the creative fellows over at Mixd.co.uk. They recently launched a new responsively designed website and asked if we were interested in taking a look. Bear/Crap/Woods. I fired off a few questions about the implementation which I’m happy to say they have shared with everyone to read

Q: You’ve recently made a few changes to your website. Responsive changes.  I’ve had a good time scrolling through the pages, I love the typography and design choices that you’ve made. Can you run our readers through a couple of techniques that you used when creating this layout?

A: Thanks for the kind words! We owe the beautiful typography and design choices to the talented Mike Kus, who we collaborated with on this site. He did a great job on the visual side of things and was a real pleasure
to work with. I’m sure Mike will agree that being a creative working for a creative agency had some unique challenges, but the passion from both sides to produce something visually stunning prevailed and we love the outcome.

The biggest challenge for Aaron, our lead the developer, was the complexity of the layouts. Visually, the design looked incredibly clean and straight-forward, but from a CSS perspective it became difficult. For example, the pencil image on the Approach page was quite a nightmare, particularly when it came to manipulating it’s size and position for narrower viewports…CSS transforms to the rescue!

We also used Javascript to help tweak layouts to perfection, where things just too impractical to attempt in pure CSS. For example, balancing the heights of the featured blog post with it’s two adjacent posts. We made sure not to use Javascript too heavily, making it a tool for attention to detail,
not a reliance. For navigation, we went with an off-canvas approach, based on David Bushell’s technique. We felt this was the best way to deal with simple navigation on smaller viewports, and David’s method is by far the most elegant and best performing.

One major – but often overlooked – aspect of responsive web design is optimisation. As you may have noticed, we spent a lot of time optimising the Mixd website; it loads really fast! We ran speed checks through Pingdom test and made lossless compressions of our images through ImageOptim. We also used SVG graphics and icon fonts (from Icomoon) where
possible, as they really make a difference to both performance and image clarity.

The Mixd website was also the first opportunity we had to make use of a SMACSS-inspired methodology, which we coupled withSass and BEM-style syntax. We also made heavy use of Nicholas Gallagher’s Griddle framework for responsive grids, which really speeds up the responsive development process. All
in all, syntaxes like BEM, tools like Griddle and technology like Sass has made this website a pleasure to build and super easy to maintain and expand upon.

A big thanks to Phil Shackleton and Aaron Thomas for giving us their time during a busy office move.