Design, Code and technology, News and culture
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
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
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
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.
Published: by Erskine Design
Sorry, comments are now closed for this entry.
5 Comments
Always love looking at new Erskine work, also interesting to see the new site on Django too which I’ve been playing with myself, very similar to ExpressionEngine and undoubtedly going to take some time before it replaces EE for me but that’s the same with any learning curve I guess.
Congrats on the new site. And thanks for the overview of the technologies you used. I would love to hear a bit more about why you chose Django over EE – as we are looking at the possibility of the same transition. Easier to customize? What are the advantages? Thanks.
Thanks Kelly. From my perspective, the key advantages of using a framework over a CMS are flexibility and ease of customisation.
We found that the concept changed a great deal from the initial comps through to the finished product, and Django was really flexible in the face of our changing requirements. We?re planning on improving the site as we go, and I think that Django has served as a good foundation for that.
This is looking really great. I am typing this on an iPad3 and everything was fast, crisp, and proportioned well.
I’d also like to hear about the move from EE to Django. Was the learning curve steep for your front-end developers? Any major issues setting it up server side? How much hacking/overriding do you find is necessary to get the admin panels “client friendly”? And major gotcha’s? Any instances where you needed community support? Do you still use EE for any projects or is Django your preference for Ll types of projects? Did you just outgrow EE or are you concerned about the direction it’s headed?
I know for myself, I’m really on the hunt for an EE alternative. You guys are obviously well respected in that community, so I’d love to get your take on things!
Thanks Jeremy, we’ll be posting a bit more about using Django on Labs in the near future.
We also use ExpressionEngine a lot and rate it highly, but for certain projects we find that Django gives us a bit of extra flexibility.
It was a hard call for the Erskine site, but in the end as it’s quite straightforward without a lot of content management, Django just edged it.