Erskine Labs feed

Calculating EMs with SCSS

Garrett Winder — Tue, 08 May 2012 17:25:00 +0100

Earlier this year Erskine made the switch to SCSS and I’ve really loved what its done to our front-end workflow. One thing I’m particularly fond of is how SCSS has improved how we’re calculating EMs.

h2. The olden days

Before SCSS we’d simply make our EM calculation and leave a comment explaining where that number came from off to the side. This worked fine, but could be time consuming and was a nightmare when adjusting things like, say, our base-font.

Here’s an example:

h1 {
    font-size:1.875em; /* 30 / 14 */
}

Using SCSS for calculations

To calculate EMs with SCSS we have a few options; using the basic number operations or definining our own function, to name a few.

Basic number operations

Using basic number operations we can drop the commenting that is needed with standard CSS and used the code as documentation. This is the technique we originally used when we switched to SCSS. This works, but we can do much better:

h1 {
    font-size:(30 / 14) * 1em;
}

Defining our own EM calculation function

SCSS has tons of built in functions for common calculations, and we can even make our own. Here’s a function we’re using to calculate EMs, which is a modification of one we found in The SASS Way.

@function em($target, $context: 14) {
    @return ($target / $context) * 1em;
}

This function takes 2 variables, $target and $context. $context is optional, as it defaults to 14, our base-font. Now lets rewite our example using our new function:

h1 {
    font-size:em(30);
}

This is the same as saying (30 / 14) * 1em but now we don’t have to repeat ourselves all over the stylesheet.

But wait, this can be taken a step further.

Adding variables to our EM calculation. Vuala!

We can modularise this process more by defining default variables for our base-font size, heading sizes, etc. With these in place, tasks like “adjusting the base-font” can be done in a matter of seconds.

$basefont:14;
$baseh1:30;

@function em($target, $context: $basefont) {
    @return ($target / $context) * 1em;
}

h1 {
    font-size:em($baseh1);
}

Beautiful. Checkout the SCSS config file in Erskine’s Ultimate Package for more examples of how you can take advantage of default variables in SCSS.

Announcing erskinedesign.com v3

Phil Swan — Mon, 16 Apr 2012 12:37:27 +0100

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 layoutTablet 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.

Responsive design: stories from the coalface

Iain Harper — Tue, 06 Mar 2012 13:48:13 +0000

Lately, the web industry has been preoccupied with responsive design. Questions, approaches and opinions abound.

Last Saturday we added to this ongoing conversation at the excellent standards>next in Manchester. Our brief was to deliver a frontline report from the coalface of the web industry about the ways in which responsive design is applied in a commercial agency environment.

Through our work with clients we’ve come to realise there is an increasingly wide gulf between esoteric industry rhetoric and mainstream understanding. There is also an inconvenient truth that designing responsively can take more time and cost more money. Our argument is that a pragmatic approach to responsive design can be used in even the most cost sensitive projects, but we need to bring our customers with us.

Five years ago a supermarket charging for plastic bags would have been seen as commercial suicide. In this environment Marks & Spencer introduced Plan A, a strategic approach to responsible business that carefully outlined the benefits and rationale of this new direction. Their plan, led by former CEO Sir Stuart Rose, was to remain “half a step ahead of customers”, no further.

As we vie for projects in a competitive environment where tough economic times have squeezed budgets, the web industry faces a similar challenge. We too must explain to customers the benefits of a responsive approach and be able to back this up with proper, credible evidence.

We also bear a responsibility to improve and streamline our working practices to reduce costs. This is one of the main reasons we developed Gridpak, our tool for rapidly creating responsive grid systems. The more cost-efficient we can make responsive development, the quicker it will be accepted and adopted.

We know Gridpak is not a one-stop, cure-all panacea; it was never designed to be. Like all tools it has limitations, but we believe it is a useful part of the responsive designer’s armoury. As the field evolves further we will undoubtedly see a proliferation of similar tools and approaches. People will ultimately choose the ones that work best and fit their workflows.

Since launch, we’ve added important features to Gridpak like the ability to adjust gutter widths and column padding in percentages as well as pixels. With our next release we’ll introduce a more flexible approach to allow the creation of a wider range of asymmetrical grids, but we can go much further.

That’s why we’ve open sourced the Gridpak codebase on Github. We’d love to see it become a truly collaborative effort where people get into the code and make their own improvements.

It’s great that responsive design has gained such momentum within the industry, but at times our discussions can be a touch isolated and introspective. We shouldn’t assume that because we think this is important clients will automatically follow suit. There is much more to be done to bring them with us.

Our slides are now available on Speaker Deck, and the audio will shortly be available from standards>next as a podcast.

Surviving a social media storm

Iain Harper — Tue, 07 Feb 2012 12:50:22 +0000

Here at Erskine we’re finding that our clients are taking more active control of their social media channels and integrating them directly with their website strategy. In the space of two years, mainly due to convergence around Twitter and Facebook, social media has gone from being a reasonably niche activity to an essential marketing and customer service tool for almost all organisations. One of the reasons I’ve joined Erskine is to help clients understand and make the most of the potential these channels offer.

!http://erskinelabs.com/media/images/content/entries/sm-sandstorm/socialmediastorm.png!We are increasingly asked to develop web applications that can be delivered on a variety of channels and platforms across both web and social media. For example, we recently helped WorldSkills London 2011 deliver a series of highly successful Facebook campaigns that helped attract 200,000 visitors.

Getting instantaneous access to a global audience would have been unthinkable five years ago, but now we almost take it for granted. Social media can deliver powerful and surprising results, even for experienced marketeers.

But this power can also pose threats – it’s easier than ever for consumers to publicly voice their complaints en masse. Blackberry and Netflix are just two companies that have been caught up in a maelstrom of negative social media coverage in recent times.

Being at the heart of a social media storm is a pretty scary place to be. Much like a real storm, a social media storm rages violently, but for a limited time. As in real life, the damage left behind can be serious and lasting.

Last year in a previous role, I experienced a social media storm at first hand. Although fairly small in the general scheme of things, it was still a chastening experience that taught me some valuable lessons.

Here’s what happened: our media team issued a release with a deliberately controversial title, specifically designed to tempt jaded and cynical news outlets into featuring our project.

From a news coverage point of view it was an outstanding success, attracting the attention of a wide range of mainstream news outlets and major online news sites like the Daily Mail online (with the usual range of barking mad comments beneath the article).

At first it seemed as if our news “hook” (the controversial headline) had succeeded in attracting coverage without drowning out our main message, the real meat of the story.

But as the day progressed it became apparent from our social media monitoring that a significant negative sentiment was building up against the headline. This originated amongst a small group of specialist sector commentators who picked up the headline and commented negatively on it via Twitter. We were fortunate that our social media storm was fairly “low category”, and didn’t spread to other social media channels like Facebook.

However, the Twitter ripple from these individuals spread rapidly and within hours we were receiving a large number of negative comments. The sheer volume of tweets and the ability to monitor them in real time was a first for many in our team and therefore a real source of alarm. There’s something morbidly compelling about being able to watch things unfold in real time, like watching live action footage from a battlefield.

Throughout the day there were surges of activity as people scanned their timelines and picked up the story (or rather the negative spin on the story) and retweeted. It became apparent that many of the people retweeting were not reading the original story as one of the “versions” being retweeted linked to a broken URL.

Just as things started to abate and we were breathing a sigh of relief, a new “version” of the story reared it’s head. The spin this time was critical of a government minister (the project was partially funded by the government) and this gave the story a whole new lease of life as this “version” was picked up by a new network of individuals. Needless to say the minister in question wasn’t particularly happy.

And then, after almost exactly 24 hours, the storm blew itself out and comments dropped to almost nothing, leaving us slightly shell-shocked. The experience re-inforced what many companies are finding out the hard way – that social media cuts both ways.

A social media storm is a new kind of crisis that traditional media teams are not always well equipped to handle. Classic crisis communication techniques do not always lend themselves to the immediacy of social media; although some established rules hold true.

However, there are a few simple principles that will help you prepare for and weather a social media storm. These apply mainly to Twitter but have relevance for social media in general.

Five ways to survive the storm

1. Monitoring is important, but it needn’t be expensive

A surprising number of organisations still engage tentatively with social media monitoring and are oblivious of what’s being said about them. An entire ecosystem has sprung up to help organisations analyse and manage social media channels. Enterprise level products like Alterian or Radian 6 come with a high price tag, but you can achieve a fairly comprehensive level of monitoring with free products like Hootsuite or Tweetdeck.

2. Social media has a tiny attention span

When a social media storm is raging, it feels never-ending and all encompassing. The reality is that the attention span of social media is particularly short and generally measured in hours rather than days. If you can hold your nerve and respond pro-actively, the conversation will quickly move on.

3. Don’t take it personally

Seeing the name of your brand, product or organisation dragged through the mud is a horrible experience. Social media is anarchic, and if you’re at the centre of a storm much of the commentary will be unfair, innacurate and downright abusive. The temptation is to wade in and defend your honour, to reason with people, to tell them how wrong they are. You’ll need to resist that temptation and develop a thick skin, constantly reminding yourself that most comments aren’t heartfelt, and may simply be retweets where the person hasn’t even looked at the source material. The volume of comments doesn’t necessarily correlate to deeply held sentiments.

4. Silence is not golden

As with all crisis communications it’s very important to explain your actions, here social media becomes an asset again. If you maintain radio silence, others will fill in the blanks on your behalf. Netflix is a case in point. When it split DVD services into a separate business called Qwikster, and changed its pricing structure, social media channels erupted in outrage. Rather than responding quickly and clearly to this criticism, Netflix maintained complete silence for 24 hours. This is an eternity in social media and users were quick to mock this flat footedness; an @NetflixGlobalPR parody account was set up producing sarcastic comments like, “Really hoping Hulu makes a bad public decision today”. Holding off on public statements, hoping to ride out the wave of criticism is no longer an option. The benefits of a pro-active approach to negative publicity have been exemplified by Path CEO Dave Morin in recent days.

5. There’s no such thing as too much information

The Blackberry ‘outage’ last year was a classic example of how not to do social media crisis management. Whilst millions of users around the world whipped up a social media storm of discontent, Blackberry’s explanations were late and pitifully inadequate, lacking any real impact. Things will always go wrong, and how you respond in the era of social media hasn’t really changed the tried and tested formula of explaining in detail while fixing, apologising sincerely when fixed, then compensating fully and unstintingly. The only difference is that the “thinking time” has reduced to almost zero. Social media makes it easier to communicate in a crisis, but makes it all the more apparent when these communications are lacking.

None of the above principles are difficult or complex, but the pace at which social media moves makes it vital to keep up and educate the people at the sharp end in how best to respond.

To quote the novelist Louisa May Alcott, “I am not afraid of storms for I am learning how to sail my ship”.

Introducing Gridpak

Sam Quayle — Fri, 20 Jan 2012 14:49:44 +0000

This week we quietly launched Gridpak, a tool that we hope will dramatically speed up the process of creating with Responsive Web Design layouts.

We were finding the process of creating grid systems quite laborious. Typically it involved creating three or four different grids by hand in Photoshop.

When we began to develop, we had to recreate the grids Responsively and add javascript to overlay them in the browser.

Then we would create all of the media queries and spend ages doing the maths to work out the relative widths and heights in the CSS.

Initially we looked around at frameworks and existing generators but nothing seemed to offer quite enough flexibility.

So Gridpak was born from a need to improve and speed up our own process when designing and building responsive websites. The aim of the interface is to make it quick and easy to visualise your Responsive grid system and output it in the formats you need to make a quick start to a project.

The main benefits are that Gridpak centralises the grid creation process and does all the heavy lifting of creating PNG versions of each of the grids, CSS with media queries, presentational classes and JavaScript overlay for the browser.

We wanted to make it easy to use and intuitive, more flexible than existing solutions. But designing manipulation software is hard to do well, especially when the model that the user directly manipulates is a relatively complex concept.

We needed to keep the interface as simple as possible, infusing lots of visual feedback without distracting the editor from the primary task of manipulating the layout.

The current version is still very firmly a beta product, with plans to add features incrementally over the coming months. We’re already seeing requests for features like percentages for padding and gutters and the ability to move the markers that set the end and starting points of each grid.

Gridpak will grow and evolve over time, so we’d really welcome your feedback and input. You can always send us feature requests at gridpak[at]erskinedesign.com or @gridpak. We also have a Trello board where you can comment on and vote for features, or just keep an eye on what we’re currently working on.

Grid generators and frameworks are by their very nature limited in that they produce one type of grid. Gridpak shares these limitations (although we hope to improve it’s flexibility with future releases) but we hope it will become a valuable tool to help you make a quick start to commercial projects. We know from our own experience that Gridpak saves huge amounts of time, particularly with the CSS, LESS and SCSS files.

We hope you enjoy using Gridpak and we’ll be putting up another post soon with more details about how the site was built. Check it out at http://gridpak.com/.

Planning and documenting front-end components

Garrett Winder — Fri, 09 Sep 2011 14:00:00 +0100

At Erskine it’s more than just accepted, but it’s encouraged to question the way things are done. If something isn’t working, figure out another way and test it out with the team. We’re always experimenting and our processes are constantly questioned. The way we’re working now is ten times better than it was six months ago, and the same thing will happen in another six months. It’s inevitable.

We recently finished a project where the deliverables were a bunch of flexible components that together built up 20+ very distinct front-end templates. We had to make this in a way that we weren’t repeating ourselves, that was easy to manage and could easily be implemented by an external team. It was a daunting task.

When we got about halfway into the project it became clear that we needed a better way to document the components, naming conventions, and front-end implementation that made up the website. Another problem that comes up with projects like this is when you get further into the project, you’ve got to refine previously made components more and more to work in harmony together. Houston, we have a problem.

After putting way too much thought into all of this, I broke the issues down into a few simple rules:

We need to build more reusable website components.
We need centralized front-end documentation from the start.
We need up-to-date access to a high level overview of the system as a whole.

Introducing the components table

The components table is a new way of developing websites that I’m currently experimenting with. You name, define and markup your components within the [fluid] table instead of inside the constraints of a website. Thus, answering all the rules above in one fell swoop.

We need to build more reusable website components

A website is a skeleton made up of an assortment of individual components that can work individually, side-by-side, and sometimes integrated together. Components should be plug-and-play, and they should be location and dimension independent. They don’t need to rely on an external source to be usable. Also, quality control should be built in at the component level. By breaking our websites down, and focusing on small elements at a time we can really dig into the details.

We need centralized front-end documentation from the start

When someone new jumps into a project, they need to be able to get up and running as quickly and efficiently as possible. They need an easy way to see how the pieces of the puzzle fit together. By it’s very nature, the components table is centralized documentation.

Sometimes we hand over front-end templates to an external web team for integration with their own systems. Developing with the components table means little to no extra documentation on project hand over.

We need up-to-date access to a high level overview of the system as a whole

We need a way to easily spot components that can be refined and integrated with each other. Flaws in the system need to be spotted sooner rather than later. Nothing is worse, or more !important, than an out of hand stylesheet. Also, when starting on a new phase of a project do we build feature X on top of existing code, or do we start fresh? What’s the naming convention for the shopping basket? This can all be found in the components table.

Though it’s just an experiment, the components table fixes a lot of the problems I’ve had with front-end development. Anyone else out there trying to solve these problems? I’d love to see what you’ve come up with.

Geek in the pub

James Willock — Thu, 25 Aug 2011 17:31:25 +0100

Recently, I was fortunate enough to be invited to speak in Leamington Spa at the regular Geek in the Park event. The event is split into a friendly picnic during the day, leading into an evening of talks on various web-related topics in a local pub.

Also leading discussions during the evening were freelancer Andrew Disley, Clearleft visual designer Paul Robert-Lloyd and content strategist Relly Annette-Baker. Topics ranged from the blurring of the lines between web and native apps to the Large Hadron Collider.

My talk, entitled 'Brain science, not rocket surgery’ briefly spoke of some of my personal mantras when developing interfaces on the web. I spoke of designing good perceived affordances (citing in some detail Donald Norman’s thoughts in The Design of Everyday Things), crafting realistic user journeys and the benefits of sensory feedback.

I was very pleased to receive feedback from attendees who appreciated my perspective or believed that I articulated some of their feelings. Speaking publically is always a valuable experience, and I went away with plenty of ideas to implement for my next engagement.

Special thanks go to Trevor Morris and Anthony Williams for organising a fantastic event and inviting me along.

Bibliomania

Sam Quayle — Thu, 11 Aug 2011 18:11:28 +0100

There’s seldom an afternoon goes by in the Erskine office that a solitary brown Amazon box fails to arrive, let alone numerous boxes. Our personal and office collections have become something of an obsession, and so, before bibliomania completely sets in, I thought this would be a great opportunity to ask around the team and share with you the books that we have been reading over the last few weeks.

Jamie:

Anything You Want

by Derek Sivers

An easy to read, no nonsense narrative account of Derek’s successes and failures during his time creating CD Baby. My favourite quote so far:
“The real point of doing anything is to be happy, so do what makes you happy”

Mindfulness in Plain English

by Bhante Henepola Gunaratana

If you’re ever interested in learning more about meditation or Buddhism, Henepola Gunaratana is your man. As the preface says, it’s a very simple book written in ordinary language. My favourite quote: “The process of becoming who you will be begins first with the total acceptance of who you are.”

James:

The Design of Everyday Things

by Donald Norman

At the moment I am reading The Design of Everyday Things, which is really a crash course in the psychology of interaction. It’s a book with fantastic pedigree, having been refined over the course of two decades and written by Donald Norman of Nielsen Norman Group fame. I would thoroughly recommend it as a must-read for anyone involved in interface or interaction design.

Thinking With Type

by Ellen Lupton

I’ve just finished a seventh or eighth read-through of Thinking With Type by Ellen Lupton. The book is widely considered to be one of the best introductions to typography in print, and the 2nd edition adds a whole host of new sections and case studies. Again, an absolute must-read.

Phil Howell:

MySQL High Availability

By Charles Bell, Mats Kindahl, Lars Thalmann

This has proven to be a very useful resource in establishing HA MySQL deployments for clients. There are three main topics discussed; various ways of establishing High Availability MySQL deployments, monitoring and disaster recovery of those deployments and finally, applying these techniques in various Cloud environments, with explicit information regarding Amazon’s AWS and deploying MySQL Cluster.

The Mythical Man Month and Other Essays on Software Engineering

by Fred Brooks

A renowned collection of essays on software engineering with thoughts on subjects including project estimation, management, documentation, communication and the second-system effect.

Wil Linssen:

Getting Things Done

by David Allen

I’m sure a lot of people are familiar with the book or at least the title. It’s one man’s very good advice for dealing with workload and task management, and it resonates particularly well with the service industry.

Symfony 2 Book

by The Symfony Community

Technically not a book, but then what technically constitutes a book these days anyway. It’s a great introduction to the recently stabilised version 2 PHP framework. There are a lot of really interesting new approaches in the Framework that are covered pretty succinctly herein.

Dracula

by Bram Stoker

Originally because it was free in the iBook shop, but I swiftly got swept up in it. I realise it’s not a technical volume, but you’d be surprised by how many of Van Helsing’s nuggets of wisdom affect some aspect of your professional life. Forget vampire hunter, the man should be a life coach.

Phil Swan:

Information Architecture 3rd Edition

By Peter Morville & Louis Rosenfeld

This is pretty much essential reading if you’re designing a large scale site. I’ve dipped into this book quite a few times, but I’m making it my mission to read the whole thing from start to finish.

Designing With Data

By Brian Suda

A book about how to do data visualisation right. It contains a great deal of practical advice on designing clear and useful infographics, charts and graphs.

Sam Quayle:

Swiss Graphic Design: The Origins and Growth of an International Style 1920-1965

by Richard Hollis

Not the most conspicuous book you could choose to read on your way in to work but an insightful choice nonetheless. The book provides an almost encyclopedic overview of one of the most influential design movements of the 20th century.

Visual Grammar

by Christian Leborg

A welcomed spot of respite after slogging your way through 45 years of swiss graphic design history. Visual Grammar is a very concise, simple and beautifully presented reference guide that seeks to define and classify the basic elements, patterns, processes and relationships that form our visual language.

We’d love to hear what you have been finding hard to put down recently.

Personal task management with Things.app

Garrett Winder — Thu, 04 Aug 2011 18:53:04 +0100

Here at Erskine we use all the usual suspects to keep the day in order: The 37signals Suite (mostly Basecamp and Campfire), Beanstalk, Harvest, Redmine, the list goes on. All of these are great for a team or client overviews, but in my opinion are not enough to personally stay truly organized.I’ve always had a pretty obsessive approach to organization and go quite overboard with it, actually. Constantly testing, tuning and refining my personal processes until I feel like I’ve got the perfect way of doing something.

My work falls into a few different categories, and depending on the month, and phase of the moon, I’m always doing more or less of one or the other. Right now my work ranges from front-end development to internal project cheerleading and client handling. My day can get very confusing, especially when we’re busy.

Bring on the Things

For the past few years I’ve been using Things.app for task management. I’ve traded out for different applications here and there, but in the end I always come back to Things. This article is about why I use it, and how it fits into my work.

Out of the box

This is a screenshot of Things the first time you open it. The software is extremely simple: To-dos organized by projects, people, time and tags. Exactly how I think.

Tailored to your thought process

This is a screenshot of how I actually use Things. I use the 'Inbox’ randomly throughout the day to dump everything that comes into my mind so I can get back to work. I usually sift through my inbox once every morning – organizing, tagging and giving due dates to items.

For Projects, I usually use the naming convention Client name – Project name. All to-do items for that particular project are filed away in there. I use 'Areas’ for an extra layer of organization and for those to-do items that don’t exactly belong to a project, but they do belong to a client. Every client gets a 'General’ area, plus areas for major pieces of their business that Erskine work with on a regular basis.

If a task is out of my hands, but needs to be done in order for me to keep on keeping’ on, I use the 'People’ feature as you can see in the screenshot above. Lastly, tagging. For tagging I use a little of my own conventions plus most of the goodies found in this article from the Omni Focus blog.

So, that’s how I use Things. Hopefully you can take some of this and apply it to the way you work. This is something that I’m really interested in and would love to see your thoughts, conventions, etc below.

How's your social capital?

Jamie Pittock — Thu, 28 Jul 2011 17:10:22 +0100

Here at Erskine Design we’re a relatively small team of eleven awesome individuals. In actual fact though, this small team is made up of a number of micro-teams. We’re mostly designers and developers but that can be broken down into visual and interaction designers, front- and back-end engineers and technical architects. On top of that we have responsibilities for client and team management, project and product management, marketing, sales, accounting, and personnel. The list goes on and should include customers, suppliers, external client teams and stakeholders. What all these people rely on and need from one another is trust.h2. Trust is hard to define

After reading up on the subject I’ve found that sociologists refer to trust as social capital. They’ve found that it’s event driven and that small, frequent gestures or events enhance trust more than larger gestures made only occasionally.

The example I read used the scenario of what happens after you’ve been on a date (let’s stick to first base, OK?) You go on a date, have a great evening, and at the end of the night go your separate ways. In one version of this scenario you hear nothing from the other person for weeks. This leaves you with a feeling of uncertainty and confusion until one day a huge bunch of flowers or a similar grand gift lands on your doorstep from said person. In another version of this same post-date scenario, 10 minutes after you go your separate ways you get a text message telling you what an enjoyable night it had been and suggesting a repeat soon. Which version of events would leave you with the best feeling about, and therefore trust in, the other person?

The point of the story is small gestures cost nothing but they do build more trust than large, expensive gestures presented only occasionally.

Building social capital through iterative delivery

I’m sure we can all relate this story to the work we do and our relationships with clients and colleagues. How many times have you put yourself under unnecessary pressure due to attempting to deliver a grand gesture because you think this is what’s required to build trust and please the other person? This pressure often causes you to limit communication or “go dark” as we affectionately refer to it. Milestones are often missed because in your mind the gesture isn’t quite grand enough or polished enough when the time comes to deliver. Worst of all, when your big bunch of flowers do finally land on the other person’s doorstep, their blooming brilliance, whether a polished design, functioning product or detailed specification, is often diluted by the feelings of shear relief felt by everyone concerned. Inadvertently, the uncertainty and confusion you’ve caused has done some damage to the trust the other person has in you.

I’ll be honest with you and say we know we could be doing better at this. One of the things we’re looking into as part of our process is how we can begin delivering smaller, more frequent, high quality releases on our projects rather than putting out larger releases less often. We all know there are numerous good reasons to do this but the one I’m interested in is that it builds trust between the various micro-teams and stakeholders.

Small, frequent gestures in communication

Here’s another little story for you. Earlier this year James, Garrett and I worked together creating a website for Simon’s musical adventures. James and I were in the UK but Garrett was still in Texas, with a time difference of 6 hours. Every morning I’d fire up Basecamp and find an update message from Garrett. They weren’t lengthy affairs and no one had asked him for them; they were just a few simple bullets points outlining what he’d been working on the previous day.

I was having a catch-up with Simon via Skype and he mentioned Garrett’s messages. “They’re fantastic!!!”, he said in his standard excitable way. Garrett, knowingly or unknowingly, had created and distributed social capital among his colleagues and his boss (who doubled as the the client for the project he was working on) simply by writing and sending a few bullet points at the end of each day.

Trust makes everything easier

No matter where you are in the value stream in your team or the position you hold, if the people upstream or downstream from you have complete trust in you, everything suddenly becomes easier.

What should they know of PHP who only PHP know?

Wil Linssen — Thu, 07 Jul 2011 16:06:22 +0100

Winds of the World, give answer! They are whimpering to and fro —
And what should they know of England who only England know? —
The poor little street-bred people that vapour and fume and brag,
They are lifting their heads in the stillness to yelp at the English Flag!
— Rudyard Kipling – The English Flag

I like that stanza a lot, and (taken out of context) it rather suits an opinion I hold on the merits of learning of several programming languages. Most programmers have a core language, the one they are most able and comfortable with; I think we should expand the list of peripherals.h2. Knowing more than PHP

I suggest that by learning more than one programming language, you stand to learn even more about the one at the core of your skill. It’s commonplace in the programming community to stick to one language, be it Ruby, PHP, C++ and so on; but I think if you do you’re missing a trick. I’ve titled PHP herein, because it’s a language I’m familiar with, but my own adventures in JavaScript and Python especially have been enormously rewarding and have helped me learn a lot about PHP actually.

So many languages share fundamental principles, and indeed many are even derived from the same concepts, but because they differ in their approach there’s something new to understand in each. It’s these differences that will frequently bolster your understanding of your primary language, or indeed of programming as a whole.

Yelping at the PHP Flag!

Another point succinctly raised is against the dogged 'vapouring, fuming and bragging’. How often have you read a post titled ’243 reasons Programming Language X is shit and Programming Language Y is the King’? Or more likely, how often have you scoffed at the title and ignored it, thinking 'what a jerk, Programming Language Z is obviously King’?

There’s no reason to attack another language just to validate your own investment in another – it’s crazy. It’s when the communities come together and share their ideas: discussing improvements and drawing inspiration from one another that things get interesting.

Stop arguing about whether their language sucks and your language is great and start listening to the opinions of another discipline: I guarantee you’ll get more out of it.

So what are you waiting for?

I realise it’s a big investment to learn a new language from scratch, and I’m not suggest that you necessarily do that. You could however easily complete a decent 'getting started’ tutorial: it’s often the fundamentals that are most rewarding anyway. Frankly you don’t even have to switch languages: if you’re a PHP type who uses CakePHP, go and learn Symfony; if you’re a Django type have a look at Pylons.

It’s stepping outside of your comfort zone and engaging with the underlying concepts of the languages and tools you are using that will enable you to grow as a developer. As the Pragmatic Programmers have said before “... consider the case of the developer who claims ten years of experience, but in reality it was one year of experience repeated nine times. That doesn’t count as experience.”

Fireworks tips: convert to alpha

Phil Swan — Thu, 30 Jun 2011 14:55:54 +0100

I’m a big fan of Adobe Fireworks. It’s by no means perfect; but an arsenal of vector tools, bitmap editing capabilities, symbols (like Photoshop Smart Objects, but better) and layer filters make it a great piece of image manipulation software for the screen.

One of my favourite features (and one that I use all the time) is the ‘Convert to Alpha’ filter. This converts the colour of whatever is on that layer to the alpha equivalent; the lighter the colour, the more transparent it becomes. It’s a simple and very useful concept.
I’ll demonstrate how this feature can be used in combination with some other layer filters to convert the first flat image to the second alpha-transparent image. This will all be done in a non-destructive way, so we won’t actually editing the original image.

To begin with we want to make this image black and white. We’ll start by converting it to greyscale by desaturating it.

Select the image by clicking on it. The options in the Properties panel will now change.

Add a new layer filter from the properties panel (by default this is at the bottom of the screen below the canvas).

Choose ‘Adjust Color → Hue/Saturation…’

We’ll bring the saturation right down to ‘-100’.

Now the image is two-shades of washed out grey. This is great as it means we can easily convert it to black and white by adjusting the levels.

To do this we’ll need to add another layer filter ‘Adjust Color → Auto levels’

We now have a black and white image.

Now it’s time for our special move. We can convert the image so it has an alpha transparency by adding the filter ‘Other → Convert to Alpha’

Almost there…

We can now add our last filter ‘Adjust Color → Color Fill’

Choose the desired colour and we’re done!

Business tips: spend wisely

Simon Campbell — Tue, 14 Jun 2011 17:21:58 +0100

Many people consider me to be a Jekyll and Hyde when it comes to spending company money. This is my short bit of advice to all you business owners out there!

Business is booming. You’re booked up until January 2012, everyone’s occupied and happy. Why not celebrate and go out for a beer with the guys, or better still book an all expenses paid weekend away for everyone? Lavish some love on your team.

When it comes to the tools you (or your team) use every day, go mad and buy the best available. When we get a new starter, they are asked what machine they’d like (people usually go for a high spec MacBook pro and cinema display). This isn’t cheap, but if you’re hiring, business must be good and you shouldn’t be short of cash!

Buy great coffee, comfy chairs, whatever books are necessary and copious amounts of fine tea. Encourage them to go on training courses and attend conferences. Never forget, your team is the company’s most precious asset and making them feel loved and appreciated is the best money you can ever spend.

Hopefully, you’re sat there agreeing with me and not thinking I’m a madman, but there is another side to consider.h2. Business isn’t always booming

It is very easy to let expenses escalate out of control. It always makes me laugh when I hear about the NHS or Blue Chip companies slashing costs, tightening budgets and 'battening down the hatches’. Surely this is good, ongoing business practice and not something to be done when there is a downturn! It’s ridiculous, but you see it happen time and time again.

Regardless of how good things are, I am particularly careful about 'commodities’. Electricity, gas, telephone, stationary and the biggies, rent and rates. Yes, you need a cool, funky, warm office that makes your people happy, but must it be in an expensive location? Hell no!

In London you can pay monster rent and rates whilst simultaneously forcing your staff to put up with a murderous commute and brutal living costs. Of course to skirt around this, some agencies set up in more 'bohemian’ parts of the city, only to be forced out, having spent a fortune on refurbishment, by rising costs as the area becomes more and more gentrified.

A Dirty Word.

In lean times, it’s easy to see the cost of wages and consider cutting back on staff. This makes me feel uneasy and should be avoided at all costs. Good people are very difficult to come by and frankly losing them should be the very last resort. It can be painful, but when markets recover, the firms who have retained their talent will have a huge advantage over the staff slashing, short-term thinkers.

Blue Chip CEO’s attempt to keep shareholders and banks happy: short-termism is a very British thing and sucks like a Dyson. I say man up and ride the storm with a skilled, intact workforce.

In Summary

Create the best working environment possible.
Give your team the tools they need to kick ass.
Be ruthless with your fixed costs and suppliers – search for the best price for everything.
Choose a great location where rents are stable in the medium/long term.
Don’t be a short-term thinker: make redundancies a last resort.

Responsive Web Design: Review

Garrett Winder — Thu, 09 Jun 2011 16:00:00 +0100

Up until I read Ethan’s new book, Responsive Web Design, I wasn’t very excited about the concept at all. I liked the idea behind it, but the way people were talking about RWD made it seem like child’s play.

“While y’all are off resizing your browsers and tweeting about your oohs and aahs, I’ll be making real websites”, I’d chuckle to myself from the toilet seat. Laptop in hand.

Yesterday though, my mind was changed completely and this is something I’m genuinely excited about. It’s the first thing web-related thats really got me going since I “made” my first site in Dreamweaver. It’s why I slept 4 hours last night. I’ve completely jumped on board and I’m having a boat party, y’all.

This doesn’t mean all the projects we build should be responsive, but the foundation can be laid by developing our websites more logically, with flexible fonts and layout baked in.

I believe there’s still quite a way to go on the best way to implement RWD, and there’s hundreds of use-cases we probably haven’t even uncovered yet— but that’s what I’m most excited about.

Cartography with Javascript

James Willock — Mon, 09 May 2011 11:54:17 +0100

I have a nickname in the Erskine office. Well, I have several. One of the less offensive ones is “the maps guy”, largely on account of how many map interfaces I’ve worked on over the past few months. The nickname carries with it little weight of knowledge, just the certainty that if a client asks about map visualisations, Matt will say “hey, aren’t you the maps guy, mate?”

It has, however, led to some interesting and enjoyable discoveries of late, two of which I will detail in this post.h2. Google Maps with KML (via geoxml3)

Phil Howell and I very recently planned, designed and developed a large data-driven application with an interface that mapped tabular and graphical data to geographical areas. Users are able to navigate between these areas on a Google Maps layer with all the expected overlays and interactions in a standard map interface.

The geographical data we were given to render was KML, which is an XML-formatted document primarily used with Google Earth. Initially, we were very happy with this, as version three of the Google Maps API has native support for rendering KML overlays. We soon discovered that the support is, in fact, immature at best. The API is capable of parsing the KML and rendering it as an overlay, but interfacing with the overlays in order to add event listeners and alter parameters or attributes (read: do anything useful, whatsoever) is basically impossible, since the API renders the KML as a single overlay and will only listen for “click” events. Additionally, the KML file you pass to the API must be web-facing and is cached heavily by Google, which makes prototyping and testing an absolute pain.

In order to overcome this and build a usable interface, we looked to see what extensions were available, and came across geoxml3, a client-side KML parser for Google Maps. What geoxml3 does, in a nutshell, is read the KML and render it as standard poly overlays which can accept all the standard events and parameters that are unavailable to the native KML rendering.

The implementation is quite simple, you need only to instantiate a geoxml3 object, pass it a few parameters, and call a parse method which accepts a single or array of local KML files. The real power, however, comes when you write a success callback which has access to all the rendered document’s overlays. In there you can stick all your lovely event listeners for maximum interaction design.

var geoxml_parser = new geoXML3.parser({
    map: map_interface, // Google Maps object
    zoom: true, // Zoom in on KML boundaries on render
    singleInfoWindow: true, // Display only one infowindow
    processStyles: true, // Honour KML styles
    afterParse: interactions // Callback for interactions
});

// Callback function
function interactions(doc) {

    // Loop through each polygon
    $.each(doc[0].gpolygons, function(index, value) { 

        // Add listener
        google.maps.event.addListener(this, "mouseover", function() {
            // Change some attributes of this layer
            this.setOptions({fillOpacity: 0.75, strokeColor: "#FFFFFF", zIndex: 1});
        });

    });

}

geoxml_parser.parse("/static/kml/states.kml"); // Parse KML

And so your dull, flat map suddenly turns into something more familiar to your users. Hooray!

Backwards-compatible SVGs (via svgweb)

A much higher-profile project is the svgweb library, which adds support for SVG for almost all major desktop browsers (hell, even IE6) by rendering the SVG as Flash for non-compatible user agents. In this case, we had to provide an interactive map interface showing a high-level overview of the United States. We decided to use a freely available SVG document and overlay data and interactions on it via Javascript. The advantage of this over a custom Google Maps interface is speed of both client-side rendering and development.

With the SVG properly embedded using the library (using conditionals to target incompatible browsers), you merely write your listeners and interactions inside an SVGLoad window event. One caveat of working with SVG documents at present is that the jQuery library does not currently support traversal of the SVG DOM, which means cracking out some vanilla Javascript, which isn’t a problem since the library includes backports of some features missing in non-compliant browsers (including support of addEventListener). There’s always the MDN if you need a refresher, anyway.

The crazy thing is you haven’t written any hacks or browser sniffing code (other than the conditional in your document to embed in the correct fashion), and your SVG will just work in every browser, complete with all your Javascript interactions. It’s pure black magic. And this is before you even press zoom in your browser eighteen times to inspect your razor-sharp vector. Fantastic.

I thoroughly recommend having a look through the various demos in the svgweb documentation, if only just to see how simple but powerful it is.

So those are just two of the things we’ve discovered recently that have made our working lives much easier. Have you come across any similar libraries, frameworks or plugins for simplifying the development of map interfaces?

EE2 language switcher extension

Jamie Pittock — Wed, 20 Apr 2011 23:04:07 +0100

We’re in the process of building a multi-lingual online magazine site powered by ExpressionEngine and over last weekend I searched around for an add-on that I could use to implement the language switching part. After a quick search on Devot-ee I found a couple of potential candidates but in the end decided to roll my own. While it may be quite specific to our own needs, I thought I’d stick it up on Github and write it up here.h3. Requirements

I’m definitely not in the same class as our developers but I can find my way around creating basic extensions and plugins for ExpressionEngine. My first job was to outline my requirements. A bulleted list on my notebook looked a little something like this:

Site owners should be able to set a default language.
The extension must limit the allowed languages to a list set by the site owners.
Users must be able to select a preferred language that will be honoured on future visits.
Template developers should have a template tag to use that outputs the default or user selected language so that the correct content can be conditionally displayed.

That’s pretty much it really. As I say, you can find the extension on Github and it should be self-explanitory. Here’s a quick walk-through anyway though:

Site owners should be able to set a default language

The first thing we do is create a global variable in index.php which stores the default language for the site.

$global_vars = array();
$global_vars['default_language'] = "de";

That’s one requirement down.

We activate the extension by inserting a query with the hook we’ll be using (in our case sessions_end) and the name of the class method we’ll be writing that we’d like called. Again in our case we’ve called this 'sessions_end’ but we could have called it anything we liked.

public function activate_extension()
{
    $default_settings = serialize( $this->default_settings() );

    $this->EE->db->insert(
		'extensions',
		array(
			'class' => __CLASS__,
			'method' => 'sessions_end',
			'hook' => 'sessions_end',
			'settings' => $default_settings,
			'priority' => 10,
			'version' => $this->version,
			'enabled' => 'y'
		)
	);
}

The extension must limit the allowed languages to a list set by the site owners

We give the extension the ability have settings. We want a settings form with just one field giving the site owners the ability to enter the allowed languages.

public function settings()
{
    $settings = array();

    $settings['allowed_languages'] = '';

    return $settings;
}

These allowed languages should be entered as a piped list of two character country codes, i.e. en|de|fr. That kind of thing.

We now create a private function within our extension class that allows us to check whether the inputs (either from the user or a set cookie) match one of the allowed languages.

private function is_allowed_language($value)
{
    $langs = explode("|", $this->settings['allowed_languages']);

    if(in_array($value, $langs))
    {
	return TRUE;
    }
}

That’s another requirement done.

So now we’re all set to write the actual method that will be called by the extension hook we’ve specified. This starts off with:

public function sessions_end()
{
    $user_language = ( $this->EE->config->_global_vars['default_language'] != "" ) ? $this->EE->config->_global_vars['default_language'] : "en";

Here we’re setting the value of a $user_language variable to equal that of the global variable we defined in index.php. It there isn’t one we’re going to default to English.

Users must be able to select a preferred language that will be honoured on future visits

Next we check to see if there’s a cookie on the user’s machine called 'user_language’, and if there is, we also check whether it’s value is one of our allowed languages. This cookie is set later on in this method when a user selects a preferred language.

If the cookie does exist we set it’s value as the new value of our $user_language variable.

if ( $this->EE->input->cookie('user_language') AND $this->is_allowed_language($this->EE->input->cookie('user_language')) ) {

    $user_language = $this->EE->input->cookie('user_language');
}

We now do another check to see whether the user has chosen to select a preferred language. When they do this a $_GET variable called 'lang’ is added to the site’s URL with the chosen language as it’s value. So we check to see if this $_GET variable exists, and again check to see if it’s value is in our allowed languages list. If it is we set it as the new value of our $user_language variable. At this point we also create a cookie called 'user_language’ and set it’s value to using the same $user_language variable.

So now the user can select a preferred language by either clicking a link or using a form select that would result in a $_GET variable being added to the URL. Their selection is stored as a cookie meaning the can revisit the site later and their preferred language choice will be used by default next time. Another requirement done.

All that’s left to do is create a global variable that can be used within your templates to conditionally display the correct content.

$this->EE->config->_global_vars['user_language'] = $user_language;

Template developers should have a template tag to use that outputs the default or user selected language

Add the template tag {user_language} to any of your templates and you should see the correct country code outputted. Add a $_GET variable called 'lang’ with a value that’s been includes in your allowed languages setting and you should see the value of {user_language} change. Close and restart your session on the site and you should also see your chosen language honoured (by way of the cookie) rather than the default language set in index.php.

You can change any of the variable names to suit your needs. We’re using Newism’s nsm.multi_language.ee_addon to actually store some of the translations. That add-on requires a global variable called 'nsm_lang’. Rather than using that as our template tag we’ve simply added a further line to our extension.

$this->EE->config->_global_vars['nsm_lang'] = $user_language;

And that’s it.

Business tips: steer 030 magnetic

Simon Campbell — Wed, 30 Mar 2011 17:09:19 +0100

It may be an age thing, but over the past few years with the advent of instant communication such as email, Basecamp and Skype, people are ceasing to acknowledge their receipt of messages and tasks. This is frustrating and it can lead to all sorts of problems.Among many other things, I am a Commercial Skipper. Part of the training and subsequent examination is based on the ability to navigate a vessel ‘blind’ to simulate fog; the most feared of all maritime weather conditions!

So, there you are sat below deck, with all the blinds closed, armed only with your tide tables, almanac, chart, dividers, pencil and stopwatch. The helmsman is at the wheel with the instructor/examiner looking over his shoulder to make sure you don’t collide with someone or something. You set off from a known position with the task of navigating, using only these simple tools, to another position defined by the instructor without any visual reference.

For this to work, you need to give clear instructions to the helmsman: “Steer 030 degrees Magnetic at a speed of 8 Knots; I’ll count down when you need to change course and speed”.

The helmsman will always repeat the instruction back to you; that way you know they’ve heard you correctly. Once they’re on the correct course and travelling at the correct speed they’ll confirm again. The reason for all these confirmations is obvious – so that you know, as the navigator, that they’re doing exactly as instructed. In a real world situation both the ship and the lives of the crew depend on it!

In business, the consequences are not quite as dramatic, but they’re still troublesome and they inevitably end up costing you money.

Say you send an email to ‘Fred’ in the development team to change a DNS record for a client and he doesn’t respond. You then have the mental overhead of wondering whether its been done or not. If the client calls, what do you say?

At Erskine, we do it like this.

Simon: “Fred can you change the DNS record for client x to 123.456.789.100”
Fred: “I’m busy right now, when do you need it done?”
Simon: “1400 tomorrow”
Fred: “Cool”

It doesn’t need thinking about again, Fred has it in his ‘to do’ list and you know it!

Next day at 10:00 –

Fred: “Hey Simon”
Simon: “Hey”
Fred: “DNS has been changed to 123.456.789.100, but it’ll take a few hours to propagate”
Simon: “Excellent work, I’ll wang an email off to the client”

Lovely…

Manchester Design Symposium

Phil Swan — Fri, 25 Mar 2011 17:07:29 +0000

A couple of days ago James and I headed up north for the Manchester Design Symposium. The lineup was pretty diverse; including talks from John Walters (Eye Magazine), Bruno Maag (Dalton Maag) and Johnathan Barnbrook (Barnbrook). The best thing about the event for me, was listening to the sometimes opposing views of very different designers on the value of their craft. It also left me feeling a bit nostalgic about my days as a student.

Hopefully it’s the first of many similar events.

Three Men and a Bike

Matt Smith — Wed, 23 Mar 2011 16:44:27 +0000

Tweet Your Wisdom

Greg Wood — Thu, 03 Mar 2011 15:52:04 +0000

I guess you could call this a marketing exercise, but it certainly didn’t feel like one. In January of this year we screen-printed 120 posters featuring wise Tweets we’d collected through our Tweet Your Wisdom website. These posters were given to attendees of the New Adventures in Web Design conference, which took place in Nottingham in January.

Over 200 Twitter users tweeted their apparent wisdom, and through an internal, anonymous voting process, we selected the following six Tweets to print, all of which subscribed to the ethos of the project.

“It will all be okay in the end. If its not okay, its not the end.”
–@robeam

“Sometimes the best plan is not to have one.”
–@mattberridge

“Never wrestle a client. You both get dirty and the client likes it.”
–@replete

“The person who never made a mistake never made anything.”
–@andyharris

“Do something you’ve never done before.”
–@gregwood

“I went to naconf and all I got was this awesome poster.”
–@greenboyroy

These Tweets were then set in Akzidenz-Grotesk, and handed over to Norm & Alex at Waste Studio down the road from us. They did a great job of helping us select appropriate inks and paper stock, not to mention actually printing the posters for us. They’re a talented graphic design team as well, so do check them out. Thanks guys!

The end result was 120 prints that felt, smelt and most importantly looked great. I really hope they’re all in nice frames above desks somewhere, so if you’re having a bad day you can look up and be comforted, motivated or maybe just amused.