A blog post on the benefits of removing impractical barriers between web developers and web designers.

1. Developers and Designers Unite
One agency, two cultures
Our office is full of incurable coffee and tea addicts, and as we take turns to serve up beverages, we
keep a list of everyone’s preferences. The variations are many – vivid green, black as sin, sweet to
the point of tears and so on. But there’s a pattern: Almost every developer in our office takes sugar,
while the designers don’t.
I once suggested that developers, in difference to designers, need energy for late hours and harsh
deadlines. That idea found some support, but the list also made me reflect on a more genuine issue
found in many web design agencies: The split between designers and developers.
Designers and developers face disparate challenges and work in different ways. Many companies
have found ways to bridge this split: Some employ mavericks who can juggle both roles, while others
use agile development and rely on close co-operation to avoid snags.
However, some agencies are strictly waterfall model-only and don’t promote collaboration. This is
understandable: Treating interface design as an isolated process has worked for a long time. As long
as designers have had a grasp of technical possibilities and constraints, it’s been a straightforward
route – until now.
New times need new tactics
Our use of the Internet is undergoing fast and wide-ranging change. For a long time, a screen was a
screen, and when web-capable mobile phones became common, dedicated sites sprung up. Now
that smartphones sales are seeing massive growth, solutions that cater for all devices are becoming
important – but such solutions can be complex.
At the same time, trends and possibilities in web design change on a weekly basis. Some predict that
we will see more large images; others argue in favour of minimalistic websites. The role of
typography is being rethought and scalable graphics are on the rise.
In order to produce websites capable of meeting these new demands, programmers and designers
must break away from dated workflows and get savvy about how the other team works. Otherwise
there’s a greater risk for problems that delay projects, annoy clients and lead to finger-pointing.
A good start is to be aware of why conflicts happen. Here are a few common causes for problems
and ways to prevent them:

2. 1. Chronological consequences
First impressions matter, and designers are required to cook up striking designs that convince the
client. In pitches, the suggested look and feel of a website can secure a project. Concepts, even at
the wireframe stage, set expectations and start discussions.
Meanwhile, developers must build, test and deliver the promised product. Their deadline is the
deadline. A website without functionality isn’t even icing without the cake; it is merely an idea of a
cake. While late changes and unexpected additions can take hours to mock up visually, producing
these elements can take days – or be outright impossible.
This can result in the nightmare scenario when features that in the design stage amazed a client turn
out to be undeliverable. Such mistakes easily sour relationships, and also damage chances to future
assignments from the client.
Solution:
Run all proposed designs by the responsible developers before presenting these to a client. Even the
most experienced designer can accidentally propose unworkable features that trip up development.
Whether producing wireframes, designing in a browser or drawing sketches, make sure all ideas are
technically feasible.
2. What You See Is…Not What You Expected
Until a website is live, its final appearance is a vision in the heads of all involved. For that reason,
there’s a risk that the final version is far from what the client anticipates, and many agencies
therefore work closely with their clients.
The same pitfall can appear during production if designs and planned functionality are
misinterpreted. Lack of instructions passed on along with the concepts may lead to guesswork,
which can be frustrating and time-consuming.
Also, unforeseen factors crop up in almost every project. Browser quirks and adaption to certain
screen sizes can require developers to come up with ad-hoc solutions. These fixes might need to be
based on the website’s general appearance as they typically have to be done before lunch.
Solution:
Designers should provide developers with enough guidelines to make production easy. The onus is
on the designers to make sure they have covered all thinkable parameters. Two areas that need
extra attention are those that designers are picky about or, sometimes, completely overlook. For
example:
• Specify padding and margins in every mode of the layout, from HDTV down to small and old
mobile phones.
• List all colours of fonts, backgrounds, panels and so on. Include white and black so that
developers don’t have to guess or sample.

3. • State every font that is used and where these are displayed.
• Error states and validation messages must be taken into consideration so that they don’t
wreak havoc with pixel-tight layouts.
• Animations are especially important – do they work as intended in all resolutions?
• Maximum texts lengths must be identified so that layouts aren’t broken by unpredicted two-
hundred character headlines.
In turn, developers should be in frequent communication with designers when the code is written.
Assumptions can save minutes but require hours or tweaking when things go wrong. At every
uncertainty or ambiguity, chase down the designer and ask for a quick clarification.
This not only prevents many glitches; regular discussions also challenge involved parties to question
ideas and consider new approaches. The end result will be all the better for it.
3. All those precious features
Most of us are prone to favouritism to some degree. Commonly, designers have preferred colours,
fonts and structures; developers have favourite workflows and practices. This is to be expected and
often makes life easier – there’s no need to upturn tried-and-tested ideas.
But occasionally, small design details turn into major obstacles. The exact alignment of a textbox or
ideal repositioning of an image can demand Olympic efforts. If the client has signed off the concepts,
backing down can look amateurish and at worst risk the assignment. Cue sighs, frowns and late
hours.
Solution:
Check your darlings at the door and prioritize objectives over objects. The Holy Grail is a usable,
visually appealing and technically flawless website. Never let irksome elements or minor details turn
into absolute must-haves unless the entire website hinges on them. Instead, be prepared for
reversals, repeated changes and complete overhauls.
Also, tread carefully around ultra-cutting edge features. They might daze prospective clients, but
read up on requirements before offering first-of-its-kind contraptions. Unscheduled weeks of bullet-
proofing code to make extravagant visual effects work in Jurassic browsers don’t make for happy
developers.
More ways to sidestep problems
There are a number of ways to improve communication and grease the cogs of everyday
development. Notably, most of these work in all areas of life. Here are a few examples:
• Be humble and know your limitations. Asking for explanations or confessing that something
is unfamiliar signals professionalism, not inexperience.

4. • Clarity is essential. When briefing someone from another professional role, weed out heavy
terminology and get to the point in a tactful way. What is obvious and trivial to one person
may be utterly invisible to someone else.
• Never, ever take a change as a personal slight. When time is short, leave your ego at the
door (right next to that red-hot special feature).
Lastly, add some sugar to your coffee
Or, depending on where you come from, leave it out. If you’re a designer, learn the basics of web
programming and databases. If coding is your trade, read up on rudimentary graphic skills. What you
discover will make you a better team member – and pave the way for hiccup-free development.