Latest posts

Announcing erskinedesign.com v3

This year marks Erskine’s seventh birthday. It’s also been three long years since we last refreshed the Erskine site and a lot has happened. Some of the faces have changed but our ethos remains the same: to build superlative websites with thoughtful design and ingenious technology.

As an agency we’ve grown and evolved, adding two outstanding brand and print designers (Daren and Barry), along with our new expert marketing strategist (Iain) to our web team, providing a comprehensive service. We needed our new site to reflect this growing maturity and better explain the range of work we can undertake.

The process hasn’t been easy. If you work at an agency, you’ll probably agree that developing a new site at the same time as delivering client projects is a challenge. Prototypes can languish for months before being ditched and the whole process re-started. Some agencies go to great lengths to get their new sites shipped. Recently we watched with interest as Happy Cog gathered their team together and built a new site in a week.

We gave the design and build of our new site the same priority as other commercial projects. How did that work out? Well, with mixed success. Deadlines inevitably got buffeted by client work, but we got there in the end.

We’ve tried to keep the site as direct as possible, both in its design and its content. The main objective was to create a site that clearly communicates our services and experience to potential clients and we’re pretty pleased with the way it’s turned out.

A quick look under the hood

Responsive layout

Portfolio page layouts

We started with a completely fluid layout, adding CSS media queries on top in a mobile first approach. Older browsers such as IE6 get the fluid layout without media queries, but we add an extra rule applying a fixed width to the content wrapper. EM-based media queries ensure that breakpoints are appropriate for the layout regardless of the font size.

Homepage image tiles

Full-width layout
Tablet layout

The image tiles scale down eventually becoming a carousel at tablet width. The tile source images all have the same dimensions and are cropped, resized and positioned on the front-end.

Scalable vector graphics

SVG and bitmap comparison
Simple vector paths for icon on the left make this image ideal as an SVG. The bird on the right is better suited to a bitmap format due to its complexity.

We’ve used SVGs throughout the site for flat images such as icons. The file size of an SVG depends on how many points and curves the image has, so sometimes it makes more sense to use bitmaps instead. In order to get the icons as crisp as possible, they were created as vectors in Fireworks at their native size. They were then exported as SVGs using Aaron Bell’s fantastic extension.

We used Modernizr to detect if the user’s browser supports SVG files, if not they are served a bitmap fallback.

Bitmap image resolution

SVG and bitmap comparison
Comparison of 1x and 2x images.

The new generation of high resolution displays has created a need for high fidelity web graphics, but there’s no consensus on the best way to do it. Even Apple’s approach is far from perfect. We’ve done some experimenting and testing and will refine our approach as new standards develop.

Our stop-gap solution uses Foresight.js to check if the user’s device is capable of viewing high-resolution images before the image has been requested from the server. JavaScript is also used to assess whether the user’s device has a fast enough network connection for high-resolution images, helping to serve the appropriate image for the webpage.

Built on Django

The Django admin panel

The site is built on Django, a high-level Python framework. We’ve been using Django on more and more of our projects. We love the fact that every feature in Django exists because it solves a real world problem and the way it encourages rapid development and clean, pragmatic design.

Because Django was born from the world of ridiculously tight deadlines in the news industry it enables us to build large, complex sites far faster than we ever thought possible. Content is managed with the Django admin panel, which we’ve customised.

We’ve made judicious use of PJAX on the News and About pages to provide a fast, fluid experience for users without a lot of unnecessary HTTP requests and repeated rendering of unchanged HTML.

Check out the all new erskinedesign.com.

Phil Swan
Published in: