how to get

clients on side

Ensure a smooth ride

for you and your clients

Create an Icon
in Fireworks

Adobes tool is still

the best for icon design

Develop faster
with Yeoman

Write a custom Yeoman

generator for big projects

Discover pixi.js
for 2D rendering
Enjoy fast WebGL with
a HTML5 canvas fallback
Project

The voice of web design

Issue 253 : May 2014 : net.creativebloq.com

ding
a
e
l
,
tions ues for
a
m
i
D an p techniq CSS
3
o
t
e
yout l their to novativ
a
l
e, in
From ts revea
g
d
e
r
expe g cutting
n
writi

Use ems
for better
responsive
websites

contents
Issue 253 : May 2014 : net.creativebloq.com

FEED

FEED

SIDE PROJECT of the month 16

Alex Crooks talks to us about using

Raspberry Pi to create Sid, the office robot

clients from hell

17

BEYOND PIXELS

20

NEED list

22

EVENT report

23

Workspace

18

Artist, designer and tinkerer Kelli Anderson takes us on a tour of her

home studio in Brooklyn, New York, which features a standing desk, a
solar-system-esque mobile, a Josef Mller-Brockmann poster and a cat

A misunderstanding about a clam leads to

idiocy in the sixth account of client woes

Neil Richards acknowledges his obsession

with interesting car boot sale finds

This issue's objects of web design desire

including the missing HTML manual

Donna Spencer reports on remote working

and the future of ecommerce at Webstock

voices
research and the web

26

Emma Boulton says user research should

be conducted by all team members

Learn people skills

28

BIG Question

38

Q&A

40

Jonathan Kahn looks at how

communication skills can be learned

We ask the experts if they agree that web

design is getting too slick

Linda Liukas tells Martin Cooper why

stories are perfect for teaching coding

Better communications

42

Brett Harned shares his top tips for how to

improve team communications

may 2014

VOICES

INTERVIEW

32

Martin Cooper talks

to Ethan Marcotte
about sustainable design
and how architecture
helped him write his
renowned essay
'Responsive Web Design'

SUBSCRIBE to net
and save up to 45%

UK readers turn to page 14

US readers turn to page 57
Worldwide: netm.ag/17vH1hU

Contents

regulars

regular

GALLERY

44

Christopher Cashdollar
curates this month's best
sites, with top use of HTML5,
jQuery, CSS and RWD

Network

Exchange

10

The latest mails, tweets, posts and rants

Practical advice from industry experts,

including Tiffany B. Brown

Showcase
design Challenge

52

Focus on

56

profile

58

how we built

64

Three designers tackle adventure sites

Gene Crawford on using animations

Yaron Schoen on his web design love affair

Razorfish and Goodboy on Spicy McBites

Try out
the all-new
Ipad edition

turn to page 102 now!

Features
25 smart
Css tips

PROJECTS
Slash design/build time

84

Create a cloud icon

90

Translate design details

94

HEAD-TO-HEAD

96

Master opentype

98

Dan Nisbet says theres a technique thats

gaining traction to slash design/build time

Fabio Bendetti takes a look at how easy it

is to create an icon with Adobe Fireworks

How to get

68 clients on side

Craig Grannell proves there's still

plenty of excitement left in CSS with
top tips from industry experts

76

Tom Dougherty shares his tips for

ensuring a smooth ride for you and
your clients on digital projects

Mark Dalgleish on Grunt and Gulp

Jason Pamental explains how to add web

typography delight with OpenType features

project

start using pixi.js

Tim Hettler explains how Sass can bridge

communication gaps and translate designs

104

Mat Groves explains how to

use 2D renderer Pixi.js to
deliver interactive content to devices

Exclusive video tutorials!

Look out for the video icon in the tutorials for
exclusive screencasts created by authors

web standards

103

Yeoman generators

108

ACCESSibility

114

Tomomi Imura on using pointer events

Vitaly Kondratiev explains how to write

custom generators for multi-site projects

Lonie Watson introduces aria-controls

may 2014 5

@netmag

Future Publishing, 30 Monmouth Street, Bath BA1 2BW +44 (0)1225 442244
/netmag
+netmagazine
flickr.com/photos/netmag
netmag@futurenet.com

net.creativebloq.com

Editorial

Editor Oliver Lindberg oliver.lindberg@futurenet.com,

Deputy editor Martin Cooper martin.cooper@futurenet.com, Production editor Jenny Williams jenny.williams@futurenet.com,
Digital editor Tanya Combrinck tanya.combrinck@futurenet.com, Art editor Mike Brennan mike.brennan@futurenet.com,
Editor in chief Dan Oliver dan.oliver@futurenet.com

Editorial contributions
Ollie Barker, Fabio Bendetti, Emma Boulton, Alex Brooke, Tiffany B. Brown, Christopher Cashdollar, Gene Crawford, Alex Crooks, Mark
Dalgleish, VivianaDoctorovich,Tom Dougherty, Craig Grannell, Mat Groves, Brett Harned, Val Head, Michael Heap, Tim Hettler, Tomomi
Imura, Jonathan Kahn, Shawn King, Cameron Koczon, Vitaly Kondratiev, Meg Lewis, Linda Liukas, Josh Long, Jenn Lukas, Mikha Makhoul,
Bryson Meunier, Dan Nisbet, Tim Nolan, Jason Pamental, Veerle Pieters, Neil Richards, Donna Spencer, Lonie Watson

Art contributions

Mike Chipperfield, Karen Lewis, Ben Mounsey, Ben OBrien, Joyelle West

management

Head of creative and design Declan Gough declan.gough@futurenet.com, Managing director Nial Ferguson nial.ferguson@futurenet.com
Creative director Robin Abbott bob.abbott@futurenet.com, Group art director Steve Gotobed steve.gotobed@futurenet.com
Editorial director Jim Douglas jim.douglas@futurenet.com, Chief executive officer (UK) Mark Wood mark.wood@futurenet.com

Advertising Advertising sales director Charlie Said charlie.said@futurenet.com

Advertising sales manager Jas Rai, 020 7042 4219, jas.rai@futurenet.com
Account manager Julian Tozer, 020 7042 4273, julian.tozer@futurenet.com
Account manager Suzanne Smith, 020 7042 4122, suzanne.smith@futurenet.com
Senior sales executive Victoria Sanders, 020 7042 4176, victoria.sanders@futurenet.com
Marketing Group marketing manager Philippa Newman, philippa.newman@futurenet.com
Circulation Trade marketing director Daniel Foley, daniel.foley@futurenet.com
Print & Production Production coordinator Roberta Lealand, roberta.lealand@futurenet.com
Licensing Licensing & syndication director Regina Erak, regina.erak@futurenet.com + 44 (0)1225 732359
Subscriptions Phone our UK hotline 0844 848 2852; international +44 (0)1604 251 045
Subscribe to net online at www.myfavouritemagazines.co.uk

NEXT ISSUE ON SALE 22 april 2014

Future Publishing Limited 2013. All rights reserved. No part of this magazine may be used or reproduced without the written permission of the publisher. Future Publishing Limited (company
number 2008885) is registered in England and Wales. The registered office of Future Publishing Limited is at Beauford Court, 30 Monmouth Street, Bath BA1 2BW. All information contained in
this magazine is for information only and is, as far as we are aware, correct at the time of going to press. Future cannot accept any responsibility for errors or inaccuracies in such information.
Readers are advised to contact manufacturers and retailers directly with regard to the price of products/services referred to in this magazine. If you submit unsolicited material to us, you
automatically grant Future a licence to publish your submission in whole or in part in all editions of the magazine, including licensed editions worldwide and in any physical or digital format
throughout the world. Any material you submit is sent at your risk and, although every care is taken, neither Future nor its employees, agents or subcontractors shall be liable for loss or damage.

Print 10,632 Digital 3,672

The ABC combined print, digital and digital
publications circulation for JanDec 2013 is

14,304

A member of the Audited Bureau of Circulations

Colophon
6

may 2014

Apps used

Adobe Brackets, InDesign,

Photoshop, GitHub, WeTransfer,
Dropbox, Future Folio, FutureSource

paper

We are committed to only using magazine paper

which is derived from well managed, certified
forestry and chlorine-free manufacture. Future
Publishing and its paper suppliers have been
independently certified in accordance with the rules
of the FSC (Forest Stewardship Council).

COVER PaceSetter Gloss 250gsm

P3-81 80pp Galerie Fine 100gsm
P82-114 Solaris 75gsm

Typefaces

Antonio, Titilium Web

family, Merriweather
family, Share Tech

Welcome

Welcome

editors note
What are the essential skills a frontend
developer needs these days? Jeff Croft believes
that HTML and CSS gurumansship is no longer
enough to get yourself a job (jeffcroft.com/blog/2014/
jan/03/web-standards-killed-the-html-star) and we
found out what his peers think in last issues Big
Question. Over the next few months well be
exploring this matter further.
Yes, you are expected to know more, but CSS is
still the foundation for many a job out there. And
its actually a very exciting time for CSS. In our cover
feature this month leading designers and developers
including Shane Mielke, Trent Walton and Ana
Tudor talk us through some amazing tips to get the

most out of CSS and, as we want to help you hone

a well rounded skillset, our tutorial section is once
again packed with hands-on advice, including new
responsive design techniques, icon design, Sass,
OpenType, Pixi.js, Yeoman and much more.
If you fancy a change, dont forget we have a
job board (jobs.creativebloq.com), or, if you want
to make the jump and go it alone, dont miss
Anna Debenhams pro guide on how to be a better
freelancer in next months issue.

Oliver Lindberg, editor

oliver.lindberg@futurenet.com
@oliverlindberg

Featured authors
Emma Boulton

Jason Pamental

Tim He t tler

Tom Doughert y

Emma is research director at

Mark Boulton Design and
editor in chief of Five Simple
Steps. Read her column on
researching in the web
industry on page 26
w: collectivelyemmaboulton.com
t: @emmaboulton

Jason is principal and

co-founder of H+W Design.
Read his tutorial on how to
add some web typography
delight using OpenType
features on page 98
w: www.hwdesignco.com
t: @jpamental

Tim is an open standards

developers at digital agency
R/GA. Read his tutorial on
briding communication gaps
and translating design details
using Sass on page 94
w: timhettler.com
t: @timhettler

Tom is user experience director

at Delete. Read his feature on
forgotten client journeys on
page 76, with his tips for
ensuring a smoother ride for
you and your clients
w: www.deleteagency.com
t: @DoughertyTom

may 2014 7

Mails, tweets,
posts & rants
contact us

@netmag

/netmag

netm.ag/linkedin_net

their craft. There are lots of

categories that dont have
any age rules: Developer of
the Year, Outstanding
Contribution, or maybe
Demo of the Year. So, please
dont feel excluded
completely from the awards.
We will also, of course, raise
your point when we sit down
and start thinking about
next years awards. So, if
anybody else has any
comments or suggestions,
please let us know.

New verses
young
Where do those of us who
started coding later in life fit
into your awards categories?
Why not have New instead of
Young categories? I began
designing and developing at
age 29 and wouldnt have even
fitted into your Emerging
Talent award at the time.

Emma Davis, Shrewsbury, UK

Its a great question, one

were alert to, and one we
discussed when drawing up
the categories for this years
awards. After much
deliberation, we decided to
stick with Young Designer
because, ultimately, youth
can be proved by the
production of a birth
certificate. It is however
functionally very difficult to
prove or disprove how
long somebody has spent
working at and perfecting

may 2014

Interactive but
limited?
Ive been reading net
magazine on my iPad, and for
recent issues it is showing me
an interactive version. I prefer
the digital replica as there
appears to be quite a lot of
content from the digital
replica version that is missing
from the interactive version.
Specifically, I cant see
readers letters, or the
advertising. I like seeing the
advertising. How do I get to
the digital replica version on
my iPad?

netmag@futurenet.com

including readers letters.

We work hard to offer video,
audio, picture galleries and
lots of extras on the iPad. As
for downgrading to the page
turner version of net
magazine, there isnt a way
to deliver the print replica to
iPads through our Apple
Newsstand app. Its an
automated system that
delivers just the interactive
edition to iPads. A print
replica edition of our
magazine is sold through
Zinio (www.zinio.com) for
2.99 per issue (its slightly
cheaper because its not an
enhanced version). So you
could subscribe through
Zinio. If you do, make sure
that you cancel autorenewal on your Apple
Newsstand subscription first
to prevent further billings.

net.creativebloq.com

Design vs
development
I regret to say that since the
change of format, theres very
little in net for developers it
seems to all be SEO, design
and marketing. Xamarin,
TypeScript, CoffeeScript,
HTML5 canvas, MVC5, TDD,
Agile, BDD, Appcelerator,
ORMs, AngularJS, Backbone,
KnockoutJS they are all
relevant to web developers
work these days.

Brent Jenkins, London, UK

Thanks. We actually have an

article on CoffeeScript vs
TypeScript coming up, we
regularly look at MVC
frameworks like Angular,
Backbone and Knockout and
we have something on
Yeoman lined up, too. All
good suggestions, though.

Mike Fulton, Oakland, CA

Beyond advertising which

doesnt carry over to the
interactive versions of net
magazine you should
actually find more content
on offer than in the PDF
page-turner version,

Increased coverage Were certainly not shying away from developers and
development. Weve increased our coverage and the content has its own section

Network
THE POLL

Is UX parallax a blessing,
or a curse?
netm.ag/poll-253

Use it correctly 23%

Parallax is a great
way to create an
enchanting site

Waiting around 13%

Parallax slows
mobile performance
too much

The pro feel 9%

Users perceive
parallax sites as
more compelling
and professional

Im just lost 11%

Use parallax in textheavy sites and you
risk disorientating
your readers
Look at me 8%
Parallax dominates
the viewport too
much, taking focus
away from content

Social sharing 10%

A site with a parallax
wow factor stands
a greater chance of
social publicity

Game over 10%

Parallax is a fad thats
had its day

Steer focus 17%

Used with restraint,
parallax can steer
and focus attention

From our timeline

Whats the worst youve screwed up at work?

Client sent their own
artwork for me to fix. I
suffixed the file -shit
version, exported PDF with
page names and emailed proof...
@myfirstraygun
Deleted Access DB file
from the network share
... had to restore from
backup and lost a days work ...
@Lawnmower_Man
I once dropped a large
glass of water over a
new plasma TV in front
of the CEO after drinks were

banned in the office only that

very day.
@danjdavies
Surely a contender:
having moved sites on
to a single new VPS,
and then deleted the new VPS
that contained all the sites.
@BrannanCoady
Presented small box
with a flashing light to
a room full of people as
the internet! Oh wait, that was
an episode of The IT Crowd
@deanleigh

The day before I went

on holiday, I set up a
daily file and DB rsync
backup the wrong direction, so
it reverted a site each night.
@el_kev
Uninstalled the SMTP
service from the
company Exchange
server, which it turns out, is
quite important. The day before
I went on holiday.
@bbodien
I once drew an
illustration of Einstein
and he had five fingers
and a thumb. It went to print.
@linziehunter

COOL Stuff
we learned
this month
Kickstarter hits $1bn
As we went to
press, crowdfunders
Kickstarter had just
achieved over $1bn in
pledges. Its easy to
assume crowdfunding
is a thoroughly modern
phenomenon, but its
far older than you
might imagine. In 1884,
newspaper publisher
Joseph Pulitzer used
crowdfunding to finance
the Statue of Liberty.
netm.ag/kick-253

Hemmingway of code
Twitters Angus
Croll has brought
two worlds together by
wondering how literatures
heavyweights would
code. Hemingway might
be stripped back while
Shakespeare would use
rhyme to convey extra
meaning and emphasis.
Crolls piece is a great read
that questions language.
byfat.xxx/if-hemingwaywrote-javascript

Hack your life

Lifehacking is a
wonderful concept:
theres a fix to all of lifes
challenges and hurdles.
However, Rich Roll, a
top-flight US athlete,
advocates hard work over
hacks. What is unexpected
is his insight into the need
for failure and his mistrust
of perfection.
medium.com/philosophylogic/7f838b1fa228

may 2014 9

Send your questions to netmag@futurenet.com

this month featuring...

Tiffany B. Brown
Tiffany is a web developer
and technical writer. She
co-authored SitePoints
Jump Start HTML5 series
w: tiffanybbrown.com

Practical
advice from
industry experts

QUESTION OF THE MONTH

How should you best handle/manage SEO in

a single-page website or application?
Harvey Keefe, Warwickshire, UK

Michael Heap
Michael is a fixer at
DataSift. He works with
various high volume data
sources in real time
w: michaelheap.com

Viviana Doctorovich
Viviana is a senior user
experience designer at
Clearleft and co-founder
of Ladies that UX Brighton
w: vivdoc.com

Bryson Meunier
Bryson is the director of
SEO strategy at
Resolution Media and an
expert in mobile SEO
w: resolutionmedia.com

Virtual reality Virtual Reality has generally failed to live up to its promises, but this could be about to change

Bryson Meunier: Avoid it if possible, but if you must, be sure to define separate
sections with accessible content as Google did here in their single page site for How
Search Works: bit.ly/N7Ic3S. Googles Matt Cutts has said in the past that its fine if it
works well for users, but beetle.com won a Webby in 2012 for being a great site and it
currently ranks for zero keywords that arent associated with their brand, and is
ranked eighth for the navigational term Volkswagen Beetle.
MVC Frameworks

Choose your framework

Knockout vs Angular?

Sergei Golubev, London, UK

Tiffany B. Brown: As with any
framework-related question, the correct
answer is it depends. How complex is
your model? How much DOM

10

may 2014

manipulation will your application do?

Which framework do you naturally
grok? Choose your framework based on
how well it does what you need.
Of course, choosing a framework is
easier said than done. For guidance,
watch Marius Gundersens JSConf EU
talk from last year comparing Angular

Q&As

3 simple steps
Users keep filling up the
basket and then leaving
before they complete the
transaction at checkout.
Helen Freed, Portugal

Viviana Doctorovich suggests

how to build a good ecommerce
checkout user experience to suit
your business and users

Popular choices Picking a framework is subjective. Marius Gundersen compares popular choices at JSConf EU

to Knockout and Ember (netm.ag/

marius-253). Also check out TodoMVC,
a project that helps developers select
an MV* framework. (See issues 249 and
251 for comparisons of Knockout and
Backbone, Ember and Angular).
prototyping

Testing prototypes
Should designers start learning to code,
say in HTML5, so that they can quickly
prototype and test their ideas?

Sergei Golubev, London, UK

Bryson Meunier: Since Google took

mobile search data out of its keyword
tool when they retired it for Keyword
Planner, it became more difficult to find
mobile queries. Some mobile data is
coming to Keyword Planner this year
(its currently testing the tool and
gathering user data). For now, for mobile
searches on site, use Google Webmaster
Tools. Off-site, use Bing Ad Intelligence:
selnd.com/NzNd5i.

The position of the labels and calls

to action can have a great impact
on form completion. Extensive research
has been done on this area by the likes of
Caroline Jarrett and Luke Wroblewski.

PHP

Viviana Doctorovich: I believe designers

should have a good understanding of the
capabilities and limitations of the
materials theyre designing for.
However, this doesnt mean that they
should build the product themselves.
There are many prototyping tools
available that you can use to test your
ideas quickly and accurately. If coding is
not a major part of your role, the
chances are that your skills wont be as
good as those of a pro developer. Some
designers find that trying to build
production code prototypes can actually
hinder their designs, as theyll only
push as far as their coding skills allow.

Beginning a PHP
algorithm

Search engine optimisation

PHP

Search analysis tools

A lack of consistency

For you, what are the best tools to use for

using mobile searches on desktop for
reviewing and testing?

Why is there no consistency between

functions using needle and haystack ? For
example, in_array versus strpos .

Jrme LILLE, Strasbourg, France

Apply best practice

What would be a good starting point for

making a PHP algorithm, and filtering out
the options that did not match criteria?

James Loveridge, Hertforshire, UK

Michael Heap: Have a look at array_filter .

By default it will remove false-y values
from an array, but you can customise it
to do whatever you want.
If you pass a callable (a function
name or an anonymous function) as
the second parameter, itll pass each
value into that function. If the function
returns true, itll keep the value,
otherwise itll discard it.

Gabor Javorszky, UK

Remove barriers

A good checkout process should

only request information that is
absolutely necessary to complete the
transaction. Explain how you will use
information to assuage customer fears.

Learn and optimise

Use data analytics to understand

where and how your customers
are dropping out. Conduct usability
testing to understand why. Then use
your findings to fully optimise your
checkout pages.

may 2014 11

exchange Q&As
Michael Heap: This is one of the most
common complaints about PHP.
Thankfully, while its not consistent
across the language, there is actually
consistency across data types.
If the function accepts an array as its
input, the signature is needle, haystack .
If it accepts strings, its haystack, needle .
The only exception is implode , which for
historical reasons accepts arguments in
either order. Its not perfect, but its not
as complicated as people make out.
user experience

How much UX?

How much time is set aside for user
experience work on a project? Typically we
get one or two weeks to do everything we
can here at the agency.

Dan Davies, Wales, UK

Viviana Doctorovich: There are many

factors like the size and complexity of
the project that will affect how much
time the UX activities should and can
take. To create a truly user-centred
design you should be given enough time
to do some user research so you can get
to know the goals, motivations and
challenges of the users that your design
solution is trying to solve. You also need
time to create a set of UX design
deliverables that address their
requirements and time to usability test
your design and refine them according to
your findings.
PHP

Multithread my PHP app

Where would you recommended starting
to multithread our PHP applications?

Jonathan Fielding, London, UK

Michael Heap: Its worth mentioning

that the official way to scale PHP is to
throw hardware at it. Some of the
modules (such as locale) arent safe to
use in a threaded environment.
If youre set on doing it, youre
looking for pthreads, a PECL extension
created and maintained by Joe Watkins.
PHPs actually been capable of running
multiple threads since the PHP4 days.
It works by running multiple, isolated
instances of the PHP interpreter in
multiple threads inside a single process.
pthreads makes this more accessible

12

may 2014

Fairy tales Breadcrumbs, named after the Hansel and Gretel story, allow users to track progress through a UI

by adding the ability for threads to

communicate in a safe way.
site hierarchy

The perfect breadcrumb

Well, just today I was wondering which
could be the most proper way to markup a
breadcrumb in HTML... nav , ul , ol , p ...

Vctor Bonilla, Edinburgh, UK

Tiffany B. Brown: Use a nav element,

wrapped around whatever markup you
prefer. Nested, ordered lists make the
most sense, in my opinion. They at least
offer a bit of semantic hierarchy that
other markup patterns lack. But
semantics are fuzzy. Using nav is far
more important.
HTML5 introduced an up value for
the rel attribute as a way to describe
hierarchical relationships between
groups of links. Unfortunately, nothing
came of it. These days, its no longer a
part of the W3C or WHATWG versions of
the specification.
search engine optimisation

Search intelligence
Google removed its keyword tool but what
other services can we use to check terms
people are searching for?

Kieran Anderson, Glasgow, UK

Bryson Meunier: The Google Keyword

Tool is retired, but Google still has a
keyword tool. Its called Keyword

Planner, and its free to anyone who has

an Adwords account (which is also free).
Its a good tool, and though its missing
some things that were available in the
keyword tool (like mobile search
volume), it also has other things the
keyword tool did not (like search volume
in a specific location).
I also make frequent use of Google
Trends and Bing Ad Intelligence.
user research

Creative data
Do you think designs should be centred
around data? Or should designers trust
their creative instincts more?

Jenna Hussey, Hertfordshire, UK

Viviana Doctorovich: Designs should be

created and optimised using a
combination of creative instinct, user
testing and data. An experienced
designer will be able to apply the
knowledge of previous projects to their
designs. However, it never fails to
surprise me how often what we think is
the best solution is not the one that
performs best.
Analytics are great at telling whether a
design works or not, but not why. This is
where user research comes in. By testing
the designs with users we can identify
the cause of the problem and use
creativity to solve it. See page 26 for
more on user research.

Save over 60!

Subscribe to all-new
Great Reasons to Subscribe:
lSave

up to 39% on the shop price!*


Every
new-look issue delivered
to your door, days before it hits
the shops


Stay
updated on new
web technologies


Exclusive
access to the worlds
leading experts

Prices:
6 MONTHS DD 26.99 (Save 23.89)
1 YEAR 59.99 (Save 17.88)
2 YEARS 95.49 (Save 60.25)

HURRY!
Offer ends
31 may 2014

Subscribe online at www.myfavouritemagazines.co.uk/netp1Q

Or phone 0844 848 2852 and quote code netp1Q
not from the uk? Here are your exclusive offers:

EUROPE 39.99 (every 6 months) REST OF WORLD 48.49 (every 6 months)

Terms & conditions: *UK savings compared with buying 13 full price issues from UK newsstand. Europe and ROW have no set newsstand price and therefore
we cannot advertise the specific savings you will make. You will be charged in GBP. This offer is for new print subscribers only. You will receive 13 issues in
a year. Full details of the Direct Debit guarantee are available upon request. If you are dissatisfied in any way you can write to us or call us to cancel your
subscription at any time and we will refund you for all unmailed issues. Prices correct at point of print and subject to change. Offer ends: 31 May 2014.
For full terms and conditions visit: www.myfavouritemagazines.co.uk/terms

People, projects
& paraphernalia

this month Featuring...

Side PROJECT OF THE MONTH 16

Alex Crooks talks to us about using

Raspberry Pi, Node.JS, Socket.IO and
Python to create Sid, the office robot

BEYOND PIXELS

20

Designer Neil Richards acknowledges his

obsession with interesting finds at car boot
sales, flea markets and charity shops

Clients FROM HELL

17

Need LIST

21

A misunderstanding about cartoon

characters leads to clam idiocy in the sixth
of a series of accounts of client woes

This issues objects of web design desire

include a whimsical diary app, drawing
ideas and the missing HTML manual

Workspace

18

Event REPORT

23

Kelli Anderson takes us on a tour of her

home studio featuring a standing desk, a
solar-system-esque mobile and a few cats

Donna Spencer reports on remote working,

the future of ecommerce and the meaning
of life at the eighth Webstock conference

may 2014 15

FEED

Side project

Sid

Web developer Alex Crooks talks to us about

using Raspberry Pi to create Sid, the office robot
Side project of the month
net: Who are you and what do you do?
AC: Im a web developer at Si digital. We create
everything from interactive marketing sites to large
car insurance quoting engines and dashboards. Weve
recently become obsessed with connecting the
physical and digital world in interesting ways.
Info
job web developer
company: Si Digital
w: alexcrooks.me
t: @alexcroox

net: And Sid your office robot (sidg.tl/sid), how

did it/she/he come into being?
AC: We bought a Raspberry Pi last year and after
experimenting with the usual beginner projects of
flashing LEDs we wanted to do something more
ambitious. Id been given a cheap robot arm the
previous year and decided it would be fun to hack its
controls with the Pi. Wed also been playing with realtime web technologies and soon realised the two
could be combined to let anyone play with the robot
from across the world.
net: What technologies make Sid purr (or whirr)?
AC: When a visitor to our site requests to control Sid,
our Node.js server adds them to the queue. When its
their turn, they send movement commands and
receive feedback in real time using Socket.IO. These

16

may 2014

commands are relayed from Node.js to the Raspberry

Pi in our office. The Pi uses Python to send movement
commands to the robots motors. A webcam also
connected to the Pi transmits the action to a dedicated
webcam Nginx server, which plays it back to
everyones browser with under a second delay. When
the robot drops a ball into a hole, it presses on one of
eight push switches under the stage area that lets
Node.js and everyone know about the new score. As
you can imagine, getting all these different
technologies and moving parts to work perfectly
together was quite a challenge.
net: Whats reaction to the project been like?
AC: The response has been overwhelming. At one
point we had queue times of nearly four hours solid
for a week with hundreds of thousands of people
flooding in from various social networks, and yes
people did wait that long to play! A popular YouTube
channel (Vsauce3) made a video (youtu.be/
MbVAKs1hF5o) about Sid that has just shy of a million
views now, and people are still tweeting their scores
on a daily basis. Hes been worked hard with over
160,000 plays in just a couple of months.
net: Why should an agency have a side project?
AC: We regularly have hack weeks where we involve
the entire team on a project that uses technology we
wouldnt normally get to experiment with during
client work. It gives us a chance to work on the many
crazy ideas we have and everyone gets pushed out of
their comfort zone to produce something amazing.

Feed

How to

Design a child
friendly Ui
Kids arent miniature adults. They
perceive and interact with the
world very differently.

a case of clam idiocy

Exclusively for net: the sixth in a series
of anonymous accounts of client woes
Clients from hell

Illustration: Ben OBrien bentheillustrator.prosite.com

I was working with a large company to

help them design a new series of mascots
aimed at children. We settled on an ocean
theme, and we started to create mockups for
family members based on sea life. For reasons
unknown to me, human resources (HR) had to be
CCd throughout any and all interactions we had.
This, however, turned out to be unnecessary as
HR wasnt reading the emails. And that was fine,
until we had a misunderstanding ...
Client: I love the initial mockups youve given us,
but I worry about consistency. I was thinking in
terms of species. That said, I mentioned it to
[redacted] in HR and he was worried that it
might come across as racist.
Me: I ... think that might be an overreaction, but I
can certainly appreciate the concern. Did you
have any species in mind?
Client: Well, I was thinking we could go for a
visual consistency instead, you know? We could
have a killer whale and a shark as the mother
and father, and make all the kids different types
of mollusks or something. I like the clam design
you showed us. I was thinking we could use the
clam as the main mascot, but can we see some
variations? Well either use one for the main
mascot, or use the variants as the different kids.

As per usual, I sent the client our meeting notes

afterwards, which included a summary of what
we talked about and what needed to be done.
The client responded to this email with a new
one, the subject line re: Your Clam.
Client: Took another look at your clam after I got
home, and something about the lips are off.
The client continued to write specific revisions
and included pictures of real and cartoon clams
as reference. I didnt read this email in detail as it
was the end of my work day. The next morning, I
got a call from the company asking me to come
in for a meeting regarding my main client
contact. It turns out that the first email HR read
was the last one, and they stopped after the first
sentence, worried that the attached pictures
were of a sexual nature and clams was a less
than subtle code word for my vagina. Though
everything was explained, my story
corroborated my client contact, and they had the
mockups to refer to, they decided they would
feel more comfortable if I was let go.

clientsfromhell.net

inquisitive minds
When it comes to interfaces,
children arent so bound by
expectation and experience.
Neither do they worry about
breaking anything. Rather, theyll
click on anything and everything
says, lecturer @Emmadw. But, she
warns, children arent aways aware
of scroll interactions.

lots of big levers

Chords are for pulling, knobs are
for turning and buttons are for
pushing. This quality, offered by an
object, to perform an action is
called affordance. Given kids are
inquisitive and natural explorers,
creative director @martynreding
recommends maximising
affordance in your designs. Game
developer @photonstorm says
keep interaction areas large, too.

the sesame way

Kids take to tablets and gesture
control like ducks to water. There
are, however, some controls (given
their small hands) that kids find
difficult and frustrating, actions
like pinching and multi-touch
points. Before you begin your
project, frontend developer
@johnholtripley recommends
reading the excellent UI design
guide published by the makers of
Sesame Street. Download the
document for free from
netm.ag/sesame-253.

may 2014 17

FEED

from the web

Kelli Anderson takes us on a tour of her home studio

featuring a standing desk and solar-system-esque mobile
workSPACE
Ive noticed that the tools I
use end up shaping all of my
work. As a defence, I try to beat this
game by preemptively shaping my
tools, like my desk (1). My desk is
built to accommodate my
idiosyncratic work habits. It
transforms (via a linear actuator)
into a standing desk for the
working hours, but contracts down
into a solid shape (like a normal
piece of furniture) when not in use
(netm.ag/desk-253). In my one-room
apartment/studio, this working
and not-working positioning
differentiation serves an important
psychological purpose. Even

18

may 2014

though my desk is always in sight,

it changes my relationship to the
object, which helps me to
disengage from work when its
lowered. The inside cabinets are
filled with wide, shallow plexiglass
drawers. These facilitate my need
to visually organise projects into
little piles. Theres a built-in tool
chest organised by utility, with
drawers for adhering things to
other things, severing things, and
measuring things. Im trying to
make a space that prioritises my
actions, so there is as little psychic
friction between me and getting
the work done as possible.

I wanted to designate an area on

top of my desk for any physical aids
to memory. This gridded pegboard,
that was originally used for drying
spools of thread (2), houses
material scraps of inspiration
including business cards, print
samples and plexiglass shards.
Looming overhead is a solarsystem-esque mobile (3). I made it
myself by gorilla-glueing wooden
spheres to carbon fiber rods.
The large poster (4) by Josef
Mller-Brockmann serves to
always remind me that simpler is
often better.
Theres usually at least one cat
lurking in front of or behind my
computer monitor (5), typically
about to waylay some unfortunate
insect near the window.
PROFILE

standing tall

Kelli Anderson (kellianderson.com) is an

artist and designer based in Brooklyn,
making images and seeking alternate
possibilities for everyday things

FEED

Beyond pixels

Stuff I like

val he ad

Designer and consultant

www.valhead.com

Typecast

CodePen Pro
I use it for live coding demos
in talks and workshops. Its so
easy to save examples for
others to fork or copy and be
coding along in seconds. Its
great creating quick proofs of
concept to share internally, or
isolating troublesome code to
get your teams advice on.
codepen.io

Basecamp
Does this make me sound
old-fashioned? Probably. I use
it in nearly every project. Its
not perfect, but its the best
project management tool Ive
used. Keeping tabs on all my
projects without a lot of fuss
is something I simply cant
work without.
basecamp.com

20

may 2014

Car boot sale finds

This month... Neil Richards acknowledges his obsession

with car boot sales, flea markets and charity shops
beyond pixels
I have always been a collector of things.
From my first sticker album, through novelty
erasers, into comics, until I discovered car boot
sales and by then it was too late, I was hooked.
My business card defines me as a freelance
digital designer, but I have never really felt that is
the true definition of who I am. I studied fine art at
university and have always been interested in
design, photography, graphics, any form of visual
creativity. When I go to a car boot sale, all of my
senses are heightened. Seeing other peoples lives
displayed in front of me is too tantalising to resist.
The majority of my collection centres around
photographic paraphernalia and cameras; I have
around 150 cameras and myriad photographs,
slides and 8mm home movies. There is something
so magical about the way photography has been
capturing our lives for the last 200 years, how it has
woven into our family life and seen us grow, but also
the disposable nature in which these memories can
be treated. I want to preserve these memories, even
if they arent mine.
Over the last few years, when I have returned
from a car boot sale, flea market or charity shop, I
would take a quick snap of my spoils on my iPhone
and upload it to Instagram. I gained a decent
following on Instagram and my finds are always the

most popular posts. I have made some great friends

and contacts through social media in the
photographic and vintage community.
Last year, after years of hoarding, I decided it was
time to share my collection with the world properly,
so I started my Tumblr blog (carbootsalefinds.tumblr.
com). The blog serves several purposes. It
documents my finds and places to visit, I offer up
some of the items to swap or buy with other
enthusiasts, and it highlights my insanity and keeps
me from becoming the subject of a Channel 5
documentary. It was recently featured on the
Photojojo website, multiplying my followers.
My collection has also spurred on my enthusiasm
for photography and I have been fixing and using
many of the film cameras, which reminds me how
photography used to be. It wasnt about instant
nostalgia, it was about the magic of getting your
prints back and not knowing what was on there.
Thats really what appeals to me about car boot
sales: you never know what youre going to find.

PROFILE

Typecast makes it easy to try

out type ideas with live web
type. I used to make typetesting pages manually, so
Typecast is a huge timesaver.
As its all in the browser, I can
show type explorations to my
team or client, and test the
performance of type options.
typecast.com

Neil Richards (www.

websitesarelovely.com) is a
freelance digital designer with
over a decade of experience
working for advertising agencies

Need list

Need list

Stuff we want

Small objects of web design desire: from

a whimsical diary app to drawing ideas
1

html5: the missing manual

15

Kennedy

mocky 

1.49

drawing ideas 

$7/month

show your work

20

$7

clef

free

What we think
(1) HTML5: The Missing Manual by Matthew MacDonald is a smart, digestible and efficient guide to HTML (netm.ag/miss-253).
(2) Kennedy by Brendan Dawes is a charming and whimsical diary app that adds your location and news headlines to an entry (netm.
ag/ken-253). (3) Drawing Ideas by Baskinger and Bardel (netm.ag/draw-253) is a fascinating book, written to help designers tackle big
problems by sketching. (4) Mocky (mocky.com) is a feedback organiser. You can pin emails and notes to a piece of work and share the
bundle. (5) Austin Kleons Show Your Work (austinkleon.com/show-your-work) is a quirky, visual guide to sharing your work. (6) Clef (www.
getclef.com) replaces passwords. Hold your phone up to your screen and a 300-character password will be negotiated automatically.

may 2014 21

Feed

EVENT GUIDE
digital trendspot
Date: 10 april 2014
Location: london, uk
Stories from top marketers that
will help you enrich your digital
strategy, and engage your
customers. Expect talks from
Alison Ali and Chris Marsh.
netm.ag/trend-253

converge se

Webstock

Donna Spencer reports on remote working, the future of

ecommerce and the meaning of life at the eighth Webstock
Event report

The annual extravaganza that is Webstock

was again held in Wellington, for a full week
in early February. The first three days were
workshops, followed by the main event on Thursday
and Friday.
This was the eighth Webstock and Ive attended
all but the second. As such, Im one of a few who has
seen the conference grow, and seen how it
developed to become the must-attend conference
for so many people (and not just kiwis). Its a tough
job to live up to a big reputation and exceed
expectations every year, but once again they pulled
it off, even with tough problems like losing a
wonderful venue to earthquake strengthening.
The uniqueness of Webstock is that it combines
presentations by the current rock-stars of the web
on practical topics, alongside presentations by
artists, musicians and comedians to inspire us and
help see the effect of the web outside our field.
I admit to being a pragmatist and loving the
practical talks most. This year I learned from: Scott
Berkun on how to make remote work effective
based on his experiences in a year working at
WordPress, Josh Clark on how to design seamless

experiences between devices, Dan Saffer on how to

change the world from the bottom up via
microinteractions - all the small details of a design,
Liza Kindred on the future of ecommerce, Tom
Loosemore on how the government digital service
(GDS) is changing government services in the UK
and Clive Thompson on how were using broadcast
technologies as personal technologies.
I was also inspired by Charlie Todds awesome
improv art projects and New Zealand local Derek
Sivers, wearing a clown costume, who eloquently
took us on a journey through the meaning of life to
finally discover that the meaning of life is just life.
Of course, Webstock isnt just about listening to
talks, its about hanging out with people who do the
same kind of work, catching up with those I only see
once a year and meeting new people. The new
venue at St James Theatre worked nicely for that,
with plenty of space for everyone, good food, good
parties and, most importantly, excellent ice cream.
Ill be back next February!

PROFILE

Photography: James Gilberd (www.photospacegallery.com)

DATE: 1014 February 2014

Location: Wellington, New Zealand

Donna Spencer (donnaspencer.

com.au) is a UX designer,
conference organiser and writer.
She also studies fashion design
and rides motorbikes

Date: 1-3 may

Location: columbia, se
Learn from experts and hang
with friends at the conference
for creative technology workers.
Speakers include Mark Boulton,
Jenn Lukas and Jina Bolton.
convergese.com

rwd summit
Date: 1-3 april 2014
Location: online
Some of the webs most notable
speakers - including Tim Kadlec,
Dave Rupert and Dave Olsen discuss and explore new
responsive techniques.
netm.ag/RDWsummit-253

thingscon
Date: 2-3 may 2014
Location: berlin, de
A conference about the future of
hardware, from 3D printing to
the internet of things. Emily
Brooke, Jessi Baker, Ron Evans
and others will speak.
thingscon.com

css day
Date: 4 june 2014
Location: amsterdam, nl
One for the hardest of hardcore
CSS geeks! Expect eight
sessions, each given by CSS
alchemists such as Heydon
Pickering, Nicole Sullivan,
Mathias Bynens.
cssday.nl

may 2014 23

PROmotion Advertising promotion

advertising promotion

Flexible IT drives
cinematic magic

VFX maestro Framestore and technology partner Dell

bring to life blockbusters like RoboCop, Skyfall and Gravity

technology
Dell Precision T5600 and
T3610 workstations with
Intel Xeon processors
Dell PowerEdge M620
blade servers with Intel
Xeon processors
Dell PowerEdge R320
rack servers with Intel
Xeon processors
Dell Networking
M6220 switches
Dell UltraSharp Monitors

24

may 2014

The web is becoming ever more cinematic.

Technologies like CSS3 Shaders, CSS 3D and
HTML5 Canvas effects are helping websites create
experiences to rival the silver screen. Such has been
the rapid evolution of these technologies you can bet
the browser will soon become as dramatic and
enthralling as the cinema screen.
For the moment though, the cinema is the place to
go if you want to see 3D graphics at their very best.
To find out how masterpieces like Gravity, Skyfall
and RoboCop are brought to life, we caught up with
visual effects maestro Framestore and its technology
partner Dell.
Framestore is a byword for visual effects, or VFX
to the cognoscenti. Along with making big-budget

blockbusters a reality, the firm is also helping global

brands extend their reach through animation. If
youve ever watched the Tooned series that follows the
Formula One McLaren Group team, youve watched
Framestores work too.
Steve MacPherson, chief technology officer at
Framestore, says theres a secret behind Framestores
accomplishments: Success in the VFX business is all
about flexibility responding to new opportunities
fast. Its unlike any other industry and we need
partners which are comfortable with that.
One such partner is Dell. From the servers powering
the VFX render farms to the workstations used by
designers to create its spellbinding effects, Dell
provides the engines powering Framestores success.

Advertising promotion

Gravity images Coutesy of Framestore and Warner Bros. Pictures

customer profile

framestore
Company: Framestore
Industry: Arts, entertainment

and media

Country: UK
Employees: 500+
Website: www.framestore.com

Business need

Framestore is a world leader in visual

effects and needs flexible IT solutions
and services at every level to meet the
tough demands of the movie business.

Our work is being recognised

internationally for its artistic
merit and quality. Dell is a key
part of our success story
Steve MacPherson, Chief Technology Officer, Framestore
Dell brings Framestore speed and reliability.
High performance Dell Precision T5600 and T3610
workstations, powered by Intel Xeon processors, are
on tap 24 hours a day.
These technologies arent just pixel-pushing
powerhouses though. Dell also helps Framestore save
cash. A single investment in Dell PowerEdge blade
servers saved the company up to 100,000 a year due
to their energy efficiency.
The future of Framestore is exciting, MacPherson
says. Our work is being recognised internationally
for its artistic merit and quality. Dell is a key part of
our success story.
So, when youre next watching the credits rolling in
the cinema, keep an eye out for Framestore.

Solution

The company works in partnership with

Dell to meet its IT needs. Staff rely on
Dell Precision workstations and the
business, which is supported by Dell
Financial Services, uses Dell PowerEdge
servers and Dell Networking to
maximise performance.

Benefits

By relying on Dells IT, Framestore

experience the following benefits:
lC
 ompany drives success

internationally, creating stunning VFX

lS
 taff maximise creative talents with

high-performance workstations
lF
 ramestore can successfully meet

the demands of the movie business

with its flexible solutions
lB
 usiness launches new offices with
support from financial services team
lF
 ramestore lowers costs of render
farm by 100,000 a year with
efficient servers

may 2014 25

Opinions, thoughts & advice

this month featuring...

user experience

learn people skills

Jonathan Kahn looks at how communication

and interpersonal skills can be learned

28

User research should be conducted

by all team members throughout the
lifecycle of a project to reveal important
insights, says Emma Boulton

interview32

Ethan Marcotte talks to Martin Cooper about

using responsive design responsibly

better communications

Brett Harned shares his top tips for how to

improve team communications

Researching
and the web

42

Im always hearing freelancers and

agencies using the clients wont pay
for research get-out clause as a reason for
not doing any. Perhaps they dont see the
value of research or perhaps they wont
pay for more as they do their own research.
I ran a survey at the start of February 2014,
which had 226 responses. A total of 57 per
cent of those who responded said that audience or user research was sometimes used
in their company project workflow while 29
per cent said it was always used during their
project workflow. Of those people working
at an agency, 14 per cent said that audience
or user research was never used as part of a
project - much higher than freelancers (10
per cent) and those in-house (seven per cent).
Ive come across many companies where
there isnt any in-house expertise to conduct
audience or user research. Data may even be
collected but there is no-one to analyse and
interpret it or turn it into design recommen-

Opinion

dations. If research does happen, it seems

to be easiest to add it into a discovery phase
in client projects by agencies or freelancers,
as a distinct activity that can be delivered
and billed for.
Forty four per cent of respondents said
that audience or user research typically occurred during a discovery phase. Freelancers
and those working at agencies reported more
discovery phase research. Those working
in-house carried out user or audience research throughout a project the most.
If you think of the design process as a
funnel, research should happen at both ends
as well as the middle of the funnel. In my
experience, theres plenty of research happening at the narrow end of the funnel, such
as testing specific interactions or user flows,
but less at a strategic level. Even before doing
any work at all on a project, you need to understand how research fits within an organisation. Understanding the research
landscape is just as important as doing it.
Understanding the organisations audience
strategy is key. Who are they trying to reach
with their products or services and why?

Just over half the people I surveyed said that

audience or user research was the responsibility of the design team. Next highest was
the UX team (41 per cent), followed by project
or studio managers (35 per cent). In-house
companies are the most likely to have a research team. These findings were amplified
as companies and teams got bigger. Designers are less likely to do their own research if
they work in a large team.
When there isnt a UX or research team,
or youre working alone, it makes absolute
sense for designers to conduct their own
research. Even when a UX or research team
exists, pairing designers with UXers and
researchers can make for both better research and application of the findings.
Relying on the client to do their own research
means youll be further away from the
problem and insights youd gain from doing
it yourself. If a client provides their own
research, youll need to fully immerse yourself in it to get the most out of it.
Working in silos can really hinder a joinedup design process and the application of
audience insights to create a unified user

Even when a UX or research team exists,

pairing designers with UXers and
researchers can make for both better
research and application of the findings
experience. As part of a team of seven at Mark
Boulton Design, our preferred project
workflow is something akin to everything
all the time. There is no fixed part of the
process when research, design and development take place. Research activities happen
in-line with other project work and provide
insight into design problems, or product development. We keep our processes fluid and
have various methods and tools to hand.

the big reveal

The big reveal isnt helpful in research the
same way its not always helpful in design.
Clients dont always take surprising research
findings easily or bold research recommendations well. The real value from research
comes from an insight-based approach when
small snippets of insight are used through-

out a design process to aid decision-making.

Design and research need to happen in
tandem as openly as possible to ensure the
smoothest ride with clients.
When working lean or with a everything
all the time workflow, getting audience
insight into the heads of designers quickly
results in better and earlier design decisions.
User research cant happen in a silo and,
considering the needs of the audience, cant
just be the job of a UX person. Undertaking
research must be everyones job and using
the insights that research can reveal must
be part of every designers job.

PROFILE

Whos responsible?

Emma Boulton is research director at Mark

Boulton Design and editor in chief of Five Simple
Steps. She previously worked in online advertising
and with the Audiences team at the BBC

may 2014 27

VOICES Essay

28

may 2014

Essay

business

Learn people skills

to get unstuck
Words by Jonathan Kahn Illustration by Ben Mounsey

A look at how communication and interpersonal skills can

be learned, using a core skill of listening to turn conflict into
collaboration, overcome job frustration and eliminate judgement

If you struggle in your job to receive appreciation

for your contributions, find time to develop your
skills and find meaning in your work, its easy to feel
frustrated. In particular as a web designer or developer,
these needs often arent met when colleagues and clients
are afraid of change and seem to block your contributions;
managers allocate limited time for design because they
have unrealistic expectations; and departments fight
between each other instead of working together.
Its no wonder that many web professionals suffer from
burnout and depression. Imagine what your work would
be like if you could find common ground with people
who seem to have different perspectives; feel confident
about your contributions; handle stressful situations (for
example, difficult conversations) with grace; and learn
how to calm yourself down.
Youll be able to do these things if you invest time and
effort in learning people skills. It takes time, but the
pay-off is surprising, as if youve gained a superpower.
A few years ago a web designer or developer could
create a website on their own. Today, to make digital
services that meet customer needs, you need to work
with people across several boundaries:
lD
 isciplines like interaction design, frontend and

backend development, content, user research

lD
 epartments in the organisation, like marketing, sales,

product development, IT, customer support

l Channels like desktop web, native mobile apps, social

media, and maybe print and in-store

Even for a small business website, youll typically need
to work with your client on user research and content
strategy, which tend to be outside your remit. This boundary crossing requires you to collaborate, using a different
set of skills to web design and development.

Its difficult
Technical skills are essential to your job, and youre
constantly developing them by reading, following discussions on social media and attending conferences.
Think back to when you started to learn a technical skill
like HTML, CSS, or JavaScript. How did you feel?
If youre like most of us, you felt scared and overwhelmed. Theres so much to learn, and it never ends;
however accomplished you are with HTML (or whatever)
today, theres always more to learn.
The same is true of people skills, often called soft
skills in business, like collaboration, coaching and leadership. You may have heard that you either have people
skills or you dont, a myth that author and speaker Meri
Williams (blog.geekmanager.co.uk) calls the soft skills
fairy, which is like saying, you can either code JavaScript
or you cant.
You didnt fall out of bed with expert web design and
development skills, and the same is true of people skills.

may 2014 29

VOICES Essay
Web work is full of conflict, whether its between colleagues and clients who are afraid of change, managers
with unrealistic expectations, or departments fighting
over turf. The internet is a symbol of disruption for many
people: perhaps their jobs are changing, their skills are
becoming obsolete, or their business model is threatened.
You are on the front line of this disruption as you attempt
to do digital work that youre proud of, a front line thats
thick with unmet needs.
Our culture makes things worse. We try to avoid conflict, as if ignoring it will make it go away. We tip-toe
around sensitive issues or send long emails instead of
engaging face-to-face. We agree to a spec that we know
will never work because it seems easier than risking an
honest conversation. How many times have you made
choices to avoid difficult conversations rather than doing
what the project needs? Ive done it hundreds of times.

unmet needs are likely to be things like respect, appreciation, contribution and space (check out this list for
ideas: www.cnvc.org/Training/needs-inventory). The other
trick is to recognise what your feelings are and try to
express them without using judgemental language.
Instead of saying, I feel attacked in this meeting,
which judges someone elses choices as wrong, you
could say, I feel frustrated because I need appreciation
for my contribution, which means you are taking responsibility for your own feelings and needs.

coaching others
Technology is always changing and it seems like you
cant keep up. At the same time, your clients and colleagues are asking you for the right answer, the proven
return on investment, the technology solution that will
fix their digital problems once and for all. If you were

When you coach others, you need to acknowledge that you

dont have all the answers, you cant fix their problems and
instead support them to make decisions about their own
development. This means being honest about your own skills

without judgement
To prevent work frustration, you need appreciation for
your contributions and respect for your value to the team.
When your needs arent met, you feel hurt and angry. As
you try to deal with your anger, youll find yourself judging
others. You can spot this judgement by looking for language that implies that people are bad, or their choices
are wrong, or they dont get it. You may also notice
self-judgement, where you tell yourself that youre wrong,
or your work sucks, or that you somehow dont get it.
Before you can communicate without judgement you
need to learn how to give yourself what you need. Your

30

may 2014

being honest with them, youd tell them that you dont
know how to make their problems go away.
When you coach others, you need to acknowledge that
you dont have all the answers, you cant fix their problems and instead support them to make decisions about
their own development. This means being honest about
your own skills, the areas youd like to develop and the
things youre scared of. Although we think of coaching
as a sports technique, you can use it at work, even without
drawing attention to it. For example, you can think of
digital work as a form of coaching with your colleagues,
even coaching your boss, about the areas in which theyd
like to develop their skills and expertise. Check out The
Talent Code by Daniel Coyle (thetalentcode.com).
People skills can help you turn conflict into collaboration, communicate without judgement and coach yourself and others. Although these concepts are straightforward to explain, theyre difficult to apply in practice.
The pay-off is worth it. As you develop these skills, youll
see your work change. Youll get unstuck, feel frustrated less often and meet your needs for contribution,
growth and connection. Go forth. Learn people skills!

PROFILE

So, how can you turn conflict into collaboration? The

core skill you need to develop is listening. What is the
other person afraid of? Whats unknown to them? Web
designers and UXers talk about having empathy for our
users so we can understand what they need. To overcome
conflict you need to have empathy for your clients and
colleagues, which is more difficult because its closer to
home. In a conflict situation, youre likely to feel tense
because you need control over your work, which will
prevent you from listening with empathy. When people
feel listened to, they calm down, and open up to listening to you. Try the active listening technique where you
listen, reflect what you heard the other person say and
clarify your understanding.

Jonathan Kahn (@lucidplot) organises

#dareconf (dareconf.com) about people skills
for digital workers. He also leads workshops
about agile content and collaboration

VoiceS Interview

Ethan Marcotte
ethanmarcotte.com

Web designer Ethan Marcotte tells

Martin Cooper why we should use
a responsive approach to design
responsibly and sustainably
Photography by Joyelle West

Interview

Info
job: web designer
and developer
company: freelance
w: ethanmarcotte.com
t: @beep

For a long time, fluid

layouts were a nicesounding theory, rather
than something Id be
comfortable using on
client projects. It wasnt
until media queries began
gaining some traction, I
started to realise you could
have the fluidity and also
preserve a little control

If theres one man in the web industry

who probably doesnt need an introduction, its Ethan Marcotte. But, as he sits in his
white walled office, and sips his morning
coffee, it seems the most logical place to start.
Im an independent designer, based in
Boston, he says, reclining, sipping and
smiling. Ive just been living and working in
the northeastern United States for the last
fifteen years or so. Throughout my career Ive
been fortunate to work the likes of New York
Magazine, the Sundance Film Festival, The
Boston Globe and People magazine. But Im
most recently known for coining the term
responsive web design, back in 2010.

A career, not by design

Despite being one of the webs best-known
designers, Marcottes internet career began
quite by accident. I was a literature major in
university, he tells us. At some point during
my four years of study I got a copy of Photoshop and just started messing around with
web design. First it was for myself, and then
some side projects. From there I did some
freelance projects for student organisations.
After four years of study, Marcotte found
himself needing a break from academia. Back
in 1999, everyone was talking about this internet thing, he recalls. I thought, I know
a few things about this internet thing, maybe
I could get a job there? I got my first studio job
a year after school, and that was where the
web got its hooks into me.
During that time, Marcotte worked with an
array of web professionals: photographers,
fine artists and former architects. They were
people, he tells us, who had just stumbled into
this new medium. It brought, Marcotte
recalls, a real multidisciplinary approach to
projects ... that just stayed with me. It probably sounds a bit hackneyed, but I fell in love
with this industry because of the people.
By way of a summary, Marcotte says, So,
I guess, Im fifteen or sixteen years into taking
a couple of years off before grad school.

Responsives genesis
I have to ask the obvious question: how did
responsive design come about? Was the idea
that we should stop trying to tame the wildness of the web and roll with it already germinating in various corners of the industry?
Or did he have a classic eureka moment? The
name, he tells us, did indeed come about

Interview

suddenly and unexpectedly. The philosophy

behind responsive, by contrast, crystallised
more slowly. Back in 2000 Marcotte read John
Allsopps A Dao of Web Design (alistapart.
com/article/dao). I stumbled across Johns
article, Marcotte recalls. At the time, web
design was something I enjoyed, but I saw it
primarily as a job: something I showed up to,
from eight to six every
day. Johns article showed
me that the web could be
a place for, I dont know,
craftsmanship? That this
could be a place where
people can do really brilliant things.
In that watershed piece,
Allsopp told designers it
was time for the web to
move beyond its controlled, pixel perfect,
print origins. The webs strength, Allsopp
wrote, is its flexibility and it should be embraced. Designers shouldnt strive to tame
the web and make it work like print.
John talked about designing for the ebb
and flow of things, and that made a big impact
on me. I got really excited about moving away
from this notion of fixed-width interfaces,
Marcotte tells us. In other words, we should
take the web on its own terms and stop defining it by the physical boundaries of the printed
page. The industry kept having this discussion
about when it was safe to upgrade the width
of our designs. [Johns article] urged us to
think about making designs that followed the
shape of the browser, to letting the users
preferences take hold.

But Marcotte realised that flexible layouts

alone werent enough. For a long time, fluid
layouts were a nice-sounding theory, rather
than something Id be comfortable using on
client projects. As a designer, theres nothing
worse than maximising a window on a huge
monitor and seeing uncomfortably long lines
of text. So it wasnt until media queries began
gaining some traction, I
started to realise you could
have the fluidity and also
preserve a little bit of
control over it.
You do need, Marcotte
suggests, a middle ground
between absolute fluidity
and the strictures of print.
And Marcottes idea still
needed a name, and this
he recalls, is where serendipity played its
hand. I was in bookstore and picked up a
book called Interactive Architecture.

I just wrote this

article and Im still
amazed and
terrified at how
excited people are
about it

Luck, labour and love

The authors, he tells us, were grappling with
the tension between a buildings fixedness
and the ever-changing needs of its occupants.
In architecture, youre casting your decisions
in stone and concrete, decisions that will last
for decades, maybe centuries. But in recent
years, there was this school of thought these
responsive architects trying to rethink that
permanence. They were designing spaces that
could adapt to the needs of the people who
occupy them: walls that could become
concave, smart glass that could become
opaque when a room gets to certain occu-

pancy and afford some privacy. They talked

about this more responsive version of architecture as a conversation between the
person and the space. That clicked with me.
I loved that image: this idea of a conversation
between the person browsing the design and
the design itself.
The melting pot of ideas Allsopp, media
queries and architectural thinking all came
together in Marcottes essay Responsive Web
Design, which was published on 25 May 2010
(alistapart.com/article/responsive-web-design).
And with that, the touch paper was lit.

Responsive reaction
So, how does he feel about introducing the
concept to the web industry? When Im on
stage, Im terrified, he laughs. But, you
know, at the end of the day, I just wrote an
article. I wrote this article and Im still amazed
and terrified at how excited people are about
it. All I did was hit on this idea that thinking
about desktop and mobile as separate things
wasnt going to scale. Tablets werent a sparkle
in anyones eye yet but, how many separate
versions of our sites were we going to make?
If I hadnt come up with the idea, somebody
else would have.
Marcotte isnt, however, determined to
make responsive into the web industrys
Little Red Book. Quite to the contrary, he
warns against absolutism. Im always suspicious of people who suggest theres one true

may 2014 35

VoiceS Interview

Left Web designer and developer Marcotte

believes we need to aim to offer more on slower
networks and less capable phones
Below Marcottes chosen set of work tools

way of working. And for me, that extends to

responsive design. If theres a need for a more
device-specific experience for your audience,
if the research is there, if the demand is there,
thats where you start your work. You dont
need to try and make everything responsive.
What we have to remember is, by some
estimates, sixty per cent of the worlds population are on networks slower than 3G, and
people are using devices a few years behind
the latest and greatest. My goal is, irrespective of technique, to make the web as accessible as possible and as beautiful as possible
for the people who are trying to access it.

Defining beauty
So, how does Marcotte define beauty on the
web? You know, there can be a beauty to
numbers, to relationships and to ratios, he
says. So much of what we think about in art,
of proportion, of music and metre is driven
from mathematics. But I see responsive sites
on a daily basis that are staggering and aesthetically beautiful. People are sending links
[to the @RWD Twitter account] that are beyond
what I could have imagined when I wrote my
article. People have taken this really simple
formula of fluid grids, flexible images and
media queries and are using that as a framework to design more flexibly for the web.
Beauty is a challenging word on many
levels because its so caught up with our
notion of aesthetics. But, theres this larger
challenge with our work. The definition of
the web varies greatly depending upon
where you are in the world. Sub-Saharan
Africa, for example, has a massive mobile
market, far larger than what we have in the
States and Europe. In other countries, where

36

may 2014

infrastructures may have fallen apart, its

still easy to get access to the web, but their
version is different from ours.
How do we offer something beautiful to
someone on a slower network, on a less
capable phone? he asks. I wonder if we need
to reframe our discussion about responsive
design: we need to design responsively and
responsibly. There has been a lot of criticism
of sites that are two, three or four megabytes
in size just smaller than a PDF. That may be
focusing on the aesthetic but, critically, that
experience is going to be
worsened if youre not
sitting on a robust
network. So I think we
need to have a discussion
about sustainability in
our work.
We discuss the tools we
have at our disposal to
meet this challenge. Specifically, we talk about
CSS features that Marcotte hopes to see ratified soon. Im really
excited about the Flexbox and Grid Layout
modules, which will allow us a bit more layout
independence. Theyre trying to combine a
lot of the strengths of floats and absolute
positioning to give us a lot more control over
the position of elements on a page. But there
are broader, tooling considerations. We need
more web native design tools. Things like
Photoshop or Illustrator are wonderful tools,
but theyre about filling a defined space with
design; theyre missing a flexible canvas. I
cant wait to use a more flexible design application. At the moment, he explains, he
gets his design to a point where its good

enough and then moves to HTML and CSS.

Sometimes, however, hell need to jump back
to Photoshop.
Its like pogo-sticking between these two
worlds. Theres no great way to do that under
one roof. Maybe thats OK, but with the interesting work from Macaw and Adobe Reflow,
I wonder what tools may be available soon.
This leads to another question: how can
you communicate a responsive design to a
client? I dont think anyone has hit on the
perfect solution yet. When I was working on
The Boston Globe we took
the comps and moved
them into HTML and CSS,
[then] we built a prototype
and made it responsive.
For the [client] design
reviews from that point,
we didnt project fixed
images on the wall. Wed
bring a bunch of devices
to the stakeholder meetings, hand them out, and
have people bring up the site on them.

My goal is to make
the web as
accessible and
beautiful as
possible for the
people who are
trying to access it

whats next?
As Marcotte finishes his coffee, we discuss
the future. In addition to some great client
projects, Im thinking about writing another
book. Karen McGrane and I are collaborating
on a workshop about responsive design, and
Im speaking at a number of conferences this
year, such as Generate NY, so Im working on
a new talk about a more module-driven approach to responsive design and layout.
For information about the full Generate NY lineup, and to book tickets, visit generateconf.com

VOICES Big question

trends

has slick web design

lost all its cosiness?
Jason Fried, founder of Basecamp, says web design is getting too slick. We
asked the experts if they agree that users prefer messy sites (netm.ag/fried-253)

V eerl e Pie t ers

Jenn L uk as

veerle.duoh.com

jennlukas.com

Chief of the playground at Duoh!

I cant follow all his reasoning. I dont know

where he got the idea that some of the
best buildings in the world are made by people
who arent architects. You cant build something
if you arent working with an architect because
its technical and dangerous if you dont know
what youre doing. I also would like to see those
buildings. The same with his statements about
every website being the same. I quite like it that
the web is improving, and there is a big photo
with good readable text. The sites he mentioned
are old in internet terms, and came at a time that
the people werent so demanding yet. I believe
they wouldnt succeed now if they started over.

t im nol a n

Creative director, BBH Labs

timnolan.info

Sites in the past had a more human and

personal feel to them. Nowadays the design
of so many sites seems to be designed to fit in
rather than stand out. Everything, as it matures,
finds a way to fit into its environment in a
symbiotic way. Its as if the collective is becoming
singular. With so many sites using a similiar
format of highly-refined copy, aesthetic choices
and navigation techniques, its as if were
designing a unified web UI rather than individual
sites. This is the decade of UX design.

38

may 2014

Frontend developer and creator, Ladies in Tech

There will always be trends in

web design. I see why people
can get bored of trends, but the nice
thing about them is it allows visitors
to learn conventions. Whether that
convention is navigating parallax
designs or scanning zippy Craigslist
ads, they teach us to use the web
faster. What sites like Amazon,
Craigslist and eBay have, isnt
cosiness, its routine. Weve learned
to navigate their routines over the
last two decades. I think these slick
sites are becoming routine as well. I
dont want 100 per cent of the web to
look like one style, but lets not push
for looking like were living in the
web from The Lawnmower Man.

Big question

Josh L ong

Meg L e wis

Writer and designer,

founder of Patterns
joshlong.me

Designer at Ghostly Ferns

ghostlyferns.com

Web design today has gotten so sleek

that it often dampens the brands
overall visual appearance and can
remove any personality the brand once
had. Its our job as designers, and those
interested in the brands well being, to
pair our clean designs with other
personable elements on the site. It
certainly is possible to bring back that
feeling of cosiness in a site design, its
just a matter of thinking of the project
from a holistic point of view.
Mik h a M a k houl

Visual designer at Deutsche Telekom

dribbble.com/mikha

I agree with Jason regarding the cheesy-decorated websites, using all the
same trends and themes, making the web vague and similar even for
different purposes. However, each digital product has a cluttered UX behind it.
Our job as designers is to polish it, make it attractive and hide it in a nice way,
but not to make that clutter obvious. People are driven by beautiful things. Its
like an ugly coat that keeps you warm, you will consider wearing it to prevent
the cold, hence its serving a need, but not everyone will be attracted to it. We
have to think of our users needs, serving it nicely by applying our style to it.

On one hand, I think modern sites are

human-less and incestuous Dribbble clones.
On the other hand, weve been in a cleansing
phase, and like good designers, weve stripped it
all away to objectively design anew. But we need
to remember to put personality, feeling and magic
into our work. Cool sites dont sell like everyone
thinks. Know the difference between design
trends and design. Most people dont walk around
in what Versace puts on the runway. Each design
needs to be built to spec for the experience you or
your clients need. Lets not assume we know the
best design decisions. Make informed decisions,
be simple, clear and direct, and make certain
people know its a damn button.

Ca meron Koczon
Partner, Fictive Kin
fictivekin.com

I like Jasons point. Dont know

if clinical is the right word but
boring sure is. Everyone seems very
on trend, and consequently,
personality and individuality are
ending up on the sidelines. Ive
opened a dozen blogs in the last
month that I thought were Medium
at first glance and turned out not to
be. Sad face.

further reading
How clutter messes
with your brain
Its hard to be too shocked by Princeton
University research that found clutter
makes you stressed and reduces performance.
The Noise of Stuff (medium.com/what-i-learnedtoday/f36935374518) article argues that clutter
isnt just physical.

Too much beauty

Moses and his messy ark

The Guardian columnist Oliver Burkeman

argues that, rather then a beautiful
experience, hed sometimes like one with a few
rough edges (netm.ag/burkman-253). Indeed, he
suggests that if sites and services designed to
display print become too slick, they become hard
to read. Its a fascinating counterpoint.

If you make a design too slick, people tend

to miss information (netm.ag/npr-253).
That, in essence, was the finding of the study
conducted by two psychologists who asked
students how many animals did Moses pack
into the Ark?. As the typography got messier,
more people noticed Noah captained the Ark.

may 2014 39

VoiceS Q&A
net: I like your expression hands on, minds
on working. Can you explain it to us, please?
LL: Our kids should learn to bend, join, break and
combine code in a way it wasnt designed to. I love
learning by doing and then afterwards understanding
the larger context of a problem, and thats what I
advocate in my own programming pedagogy. Im
fascinated by the spiral learning theory where you
introduce a topic, touch on it for a short time and
then move on. The idea is that a subject isnt learned
the first time around and the kids can pick up more
information the second time. This is the whole
thinking behind Hello Ruby (helloruby.com).

Q&A

Linda Liukas

Coder and childrens author Linda Liukas tells

Martin Cooper why stories are the perfect
medium to teach programming
Info
job: co-founder
company:
Rails Girls
w: lindaliukas.fi and
helloruby.com
t: @lindaliukas

net: Hello! Why dont you introduce yourself?

LL: My name is Linda Liukas. Im originally from
Finland and split my time between Helsinki and New
York. I love Muji, Zelda Fitzgerald and Moomins.
net: Tell us about Rails Girls. How did it come about,
and why?
LL: Rails Girls is a global grassroots movement to
encourage more women to get their first experience
in software craftsmanship. Its a one-weekend event
during which total beginners will be helped through
building a web application from concept to code. The
event was born out of my own need. To date, Rails
Girls has been organised in over 160 cities, always
non-profit, by the local Ruby community.
net: Whats the secret of getting kids involved
in coding?
LL: For me, programming has always been about
creativity, expression and practical application.
Theres always going to be kids that will become
programmers who work on complicated algorithms,
but for many, code is just another tool to use in a
world that is more and more run by software.

40

may 2014

net: Tell us more about Hello Ruby.

LL: I believe stories are the most formative force
of our childhood. The stories we read growing up
affect the way we perceive the world as we grow
up. For some reason narratives havent been used
as part of technology education. Hello Ruby is my
attempt at combining software and storytelling into
something that will make kids see the magical world
of technology as well as learn programming concepts.
net: How did the idea come about?
LL: I was teaching myself programming three years
ago and started doodling the Ruby character in my
notes. Whenever I ran into a problem, like what
is garbage collection or how does object oriented
programming work, Id try to imagine how little Ruby
would explain it. The imaginative viewpoint of a small
girl started to pop up everywhere in the technology
world and I knew I had a book in my hands.
net: Where is the true value in code? (I love your
quote, Codes not about ones and noughts. Value
of code is in the people.)
LL: I think technology is profoundly human and a lot
of non-technical people dont see this aspect of code.
Computers dont write code, its people. Computers
dont design programming languages, its people
again. Platforms like GitHub give a glimpse of how
social creating software is, but theres still a long way
to show all the creativity, compassion and culture that
exists in programming communities. As Joi Ito put it,
Internet is not a technology, its a belief system.
net: Is it true that you built your first website
as a love note to Al Gore?
LL: Yes! I was 13 years old and had a huge crush on the
then vice president of US. I had all of this passion and
excitement and energy, so I decided to build a website
for him in Finnish and needed to learn HTML/CSS
for that. The site is luckily not online anymore, but I
was very proud of the iFrames, colour scheme and the
manually created thumbnail pictures.

voices Opinion

management

Better communications
Brett Harned shares his team communication tips to make project work easier

share information
At the beginning of a project, sit down with
your team to discuss your budget, scope,
timeline and requirements. This will ensure
that everyone on the team is aware of and
accountable for the projects health. Also be
sure to assign project roles and the responsibility of making sure that communications
are flowing and are being documented. As a
team, make a commitment to sharing information, knowing that taking three to five
minutes to share potentially critical info with

your team could save everyone stress. Using

a tool like Basecamp to hold all of that information will facilitate good communication and knowledge sharing. Knowing when
and where communication should happen,
and how its documented is half the battle
in the war against poor communications.
In general, a 15-minute team review of the
days tasks can work to your advantage.
Simply go around the
room and give everyone
a chance to talk about
what theyre working on.
Itll force everyone on the
team to organise themselves and feel accountable for tasks.
If youre dealing with
clients, its a good practice to conduct a weekly
status meeting to stay
current on all project issues. Not only will it
keep you and your clients on track, but it will
keep you honest about your timeline, tasks,
action items, budget and risks. From a clients
perspective, theres nothing worse than
finding out about a project issue that could
have been avoided until its too late.
Dont forget to have a bit of fun with your
status meetings. Use the time to catch up. If
you make time to get to know one another
when you have time, itll make it easier
to overcome issues when needed.

Educating clients
on your project
process helps
them to better
understand your
work and to be
your champion

Educate clients
As a designer or developer, youve
got a process that works for you.
Sharing the why and the how
you get to your deliverable will
help explain the timing, concepts
and dependencies of your work.
Taking the extra step to document and explain your work
shows your team and your clients

42

december 2013

that you care about how the work is received,

critiqued and used. Plus, educating clients
on your project process helps them to better
understand your work and allows them to be
your champion. Its a win-win situation.
Want to have fun and generate more ideas?
Schedule brainstorming sessions and get
project team members invested in ideas
before they become scope issues. Having a
developer sit with a designer to talk through an
idea can help you stick to
your timeline and budget.
When discussing your
project communication
expectations, agree to a
level of collaboration. Be
sure to have a goal for
working sessions and
always record takeaways.
Share to-do lists, track
sub-tasks as a team and continually share
progress and dependencies.

build faster
If youre seeing that a team member is behind
on a task, be proactive and ask about it. The
point of an open to-do list is to make sure
that youre all up to date on the status of work
at all times. The list will foster real-time
communication via in-person or online conversation. The idea is to work in the open and
share progress to build team support. This
activity helps people build products faster.
No matter what you do, you have to commit to communicating better. Make these
better communications practices work for
you in an atmosphere thats accepting of
discussion, debate, task management and
good old hard work.

PROFILE

As teams, we need to align ourselves

to communicating better in order to
make project work easier. Even the best of
us trip up every once in a while, but these
tips should help communications flow.
As a general rule, theres no such thing
as over-communication in project work.
You need to be very detailed and consistent
when it comes to evolving project requirements and approaches. If a detail is miscommunicated, goals can be derailed and
youll lose time and cause frustration.

Brett Harned (brettharned.com) is vice president

of project management at Happy Cog. He also
organises Digital PM Summit

Gallery Inspirational sites

Chris
cashdoll ar

Sensational design and superb development

Christopher is vice president of

design for Happy Cog and
co-founder of PhilaMade. He
educates clients on the
benefits of a user-focused and
research-driven design process
w: www.chriscashdollar.com
t: @ccashdollar

RWD

www.mergerecords.com
Newfangled www.newfangled.com

With bands like Arcade Fire, Superchunk

and The Mountain Goats on the roster,
MergeRecords in Durham, North Carolina,
looked to local digital partner Newfangled to
build a world-class ecommerce experience to
match the quality of its artists.
Built on NewfangledCMS, Newfangleds
proprietary PHP-based CMS, with HTML5
and CSS3, the site responds beautifully to
different device sizes. The new system is
now automated to ensure that the labels

44

may 2014

assets are all centrally managed and

available. Newfangled COO Chris Butler says,
Whenever a product is added, we have to
figure out how this corresponds to a piece
of physical inventory that sits in a different
database, and how it accounts for apiece
ofdigitalinventory that sits in another
system. We had to figure out those logistics.
With numerous different database calls on
each page, the order of priority of the data
was important to get right.

You can
start reading
while the rest
of the page
loads. Thats
so critical to a
great mobile
experience
Tom Carmony
(@tomcarmony)

Inspirational sites

HTML5, SCSS, jQuery

www.bucketlistly.com
Pete R. www.thepetedesign.com

BucketListly, designed and developed by Pete R., is a

community that sets out to help users unlock achievements
in real life while inspiring others to do the same. Built using Ruby on
Rails with HTML5, SCSS, CoffeeScript and jQuery, the platform has
the ability to let travellers and adventurers share their stories with
their friends on the site as well as their connected social networks.
When a user shares a story on BucketListly, the platform
automatically tracks what, when and where theyve completed that
life goals, letting them earn special badges and displaying all that
data in a beautiful timeline and map.
The purposefully-sparse design is heavy on clear UI
copywriting, which helps new users understand how to get
started and begin tracking their goal. Once a goal is unlocked,
it uploads their photography and crafts a story of their own
personal travel adventure.

may 2014 45

Gallery Inspirational sites

si t e of t he
mon t h

HTML, CSs, javascript, sass

96elephants.org
Vigetviget.com

US-based Viget Labs have created an awareness-focused web

experience to enlist support for the Wildlife Conservation
Societys mission to protect African elephants. Its most recent
campaign is 96 Elephants, so-called because thats how many
elephants are killed every day in Africa.
The educational narrative is told through a series of single-page
chapters, each detailing the very real complications at play in the
ongoing effort to end the illegal act of killing elephants for their tusks.
Despite the primary goal of driving sign-ups for a petition, the Viget
team has done an artful job of balancing the immediacy that the

46

may 2014

omnipresent call-to-action presents against the more emotionally

compelling, story-driven content. A nice touch in the experience was
using Convio Opens API (open.convio.com/api/#main) to allow the form
submission to occur without the user ever having to leave the page
they are currently on.
To bring this all to life, the team used HTML, CSS and JavaScript,
employing Sass, Backbone.js and the JavaScript compiler
CoffeeScript. Yet, front and centre is the haunting art direction
that compels you to stop and confront the emotional mission. The
beautiful, edge-to-edge photography and magazine-like layout
made the effort to build it responsively a challenge. Instead of
starting with the desktop, the site was built mobile-first. That
allowed the design decisions to be purposefully considered for
small-screens instead of acting as a watered down proxy of the
desktop experience.

Inspirational sites
HTML5, CSS

ticketleap.com/events
Ticketleapwww.ticketleap.com

The Philadelphia-based company Ticketleap helps

event creators build landing pages for audiences to
find out more information or buy tickets. Designed and
built by the Ticketleap team using HTML5 and CSS, the
redesigned event pages bring to life an event landing page
thats beautiful, responsive and doesnt just act as an
online cash register.
By the end of 2013, Ticketleaps mobile page views
had surpassed desktop, which allowed the team to focus
on small screens first, ensuring the majority of their
audience received a better experience.
I told my team I didnt want to see any desktop mock
ups until we had something we loved on mobile. We think
it paid off, says Beah Burger-Lenehan, VP of product.
Ticketleap minimised any design decisions that made
the page look overly templated to evoke a feeling that
was more human and less transactional; fewer social
posts, a missing logo, or events with different image
styles could negatively impact the design. The design
and development was honed through tight collaboration,
ensuring any gaps in content minimised the effects on
the template. Performance was important. Intentionally
avoiding JavaScript for speed and reliability issues, the
new event templates also push the limits of CSS.

The pages
nail the
anticipation
of an event
youre excited
to be part of

Daniel Mall
@danielmall

may 2014 47

Gallery Inspirational sites

rwd, ecommerce

www.gant.co.uk
MarkUp usemarkup.com

As of early 2014, there still arent many online retailers who have
taken the plunge into responsive design. GANT, a global lifestyle
brand with an American sportswear heritage, recently took that leap with
its UK and Swedish markets. Built on the Phoenix platform created by the
digital agency MarkUp (usemarkup.com), the new responsive frontend
ecommence site is a frictionless shopping experience that balances a
utility-first UI with the strong product photography youd expect from an
apparel brand.
Performance is a key aspect of making a successful online retail
experience and the technology that went into the GANT site helps to
keep the page load snappy. Site assets are automatically minified,
which includes auto generating sprites and concatenated CSS and
JavaScript files. Also, a caching strategy using Varnish and Redis
minimises page load times as much as possible.
Since the original site design was non-responsive, the speed of
development was a crucialbarometerof success. MarkUp developer
Calum Brodie says, Having complete flexibility in our frontend code,
and being able to choose the right technologies bespoke to this project,
gave us a massive headstart in implementing the whole responsive
design in less than a month.

48

may 2014

Inspirational sites

create once, publish everywhere

news.harvard.edu/gazette

Digital strategy team at Harvard University news.harvard.edu/gazette

The Harvard Gazette, the official news
outlet for Harvard University, covers the
prodigious amount of innovation and
discoveries across the campus and worldwide.
Redesigned to give the site a more
contemporary look and feel and be a great
reading experience on all devices, the site
content is the star of the experience. Drawn
in from all across the university, the articles
showcase the amazing amount of diversity in
thought-leadership that the Harvard
ecosystem fosters.
Created in-house by the digital strategy
team, the effort reflects findings culled from
over three years of user analytics. The team

focused on a mobile-first experience and the

resulting redesign demonstrates dedication
to the COPE model (Create Once, Publish
Everywhere) allowing for enhanced mobile
and social integrations.
Audience members already opted in to
the email newsletter receive updates daily
at 7am. To build awareness of this feature
in the site, without burdening readers with
intrusive pop-ups or interstitials, the sign-up
promotion remains viable despite the infinite
scroll on homepage, article and category
pages. As a result, the unobtrusive placement
of the form has accounted for almost 30 per
cent of new sign-ups since launch.

The structure
of the mobile
experience is
like moving
through an
airport
Brad Berkner
@bberkner

may 2014 49

Gallery Inspirational sites

HTML5, CSS, Javascript, jquery

www.kenyon.edu
FastSpot www.fastspot.com

Designed and developed by Baltimore-based FastSpot,

Kenyon Colleges new site is a modern example of how
a higher education website can act as the central hub for the
myriad of audience types on and off campus while still being
visually engaging. Built with FastSpots own BigTree CMS,
the site was developed with standards-compliant HTML5,
CSS and JavaScript, with many of the interactions enhanced
with jQuery. A visually cohesive design system comprised of
flexible modules and layouts drives much of the experience.
The less-is-more approach to the UI ensures nothing gets in
the way of an enjoyable on-screen reading experience.
Behind the scenes, the site brings to life a centralised
publishing system that allows the college staff to create
and organise content in one system and publish in multiple
locations. Art and technology director Curt Kotula explains,
The centralised publishing system we named Along
Middle Path allows them to create and organise content in
one system and then publish it in multiple locations. The
elegant responsive design includes numerous interactive
details present in both desktop and small-screen devices.

50

may 2014

next
month

The pros guide to

freelancing
Anna Debenham reveals everything you need to
know to run a successful business on your own

PLUS
Use CSS not jQuery
for UI animations

Build a responsive
WordPress portfolio

Top techniques to
make PHP go faster

ISSUE 254 on sale 22 April

Print edition, back issues and special editions available at

myfavouritemagazines.co.uk
Digital editions available on iTunes, Google Play, Kindle, Nook and Zinio

net.creativebloq.com

Sublime design
& creative advice

Design
Challenge

this month Featuring...

Focus on

This month...

56

adventure
travel sites
ALE X B R O OK E

PROFILEs

Gene Crawford discusses the use of animation

as something that can either contribute to a
neat user experience, or damage it very badly

Alex is a young, creative freelance web

designer and frontend developer from
Essex, UK w: alexy.me

Ol l ie B a rk e r

Profile

Ollie is a web designer at Better Brand

Agency, working on projects for the web,
apps and print w: olliebarker.co.uk

58

Yaron Schoen talks to Martin Cooper about

starting up, product design, working for Twitter
and how to pronounce his name

S h aw n K ing
Shawn works for West Virginia University
for clients such as WVU Healthcare and
Chiffon & Champagne w: partleecloudy.com

Brief

How we built

64

Razorfish and Goodboy explain how they

created a 3D game called Super Spice Dash to
promote McDonalds Spicy McBites

52

may
december
2014 2013

This month wed like you to design a website for an

adventure holiday site. It may be white-water rafting
in Wales, yurt living in Wyoming, base jumping in New
York or yomping through Brazil. The theme, style and
branding is up to you.

Design challenge

ALEX BROOKE

EXPLORE:THEWORLD

A site designed to inspire adventure through imagery and good deals. See a full-size image: netm.ag/brooke-253

EXPLORE:THEWORLD is a search website

that allows people who want an exciting
travel adventure to fulfil their dreams. The site
allows people who are searching for an
adventure holiday to search for a country that
they want to visit, and then directs them to a
page explaining about all of the adventurous
things that they can do there, with examples,
ideas and inspiration.
The site also supports bookings and
promotes finding the best deals, giving users
the chance to book their holiday through the
site by pulling in various data from travel
comparison sites.
The site also has an individual page for
each country, which is customised with
beautiful photography reflecting the essence
of each country. The site would be built to be
responsive, using media queries so that people
can view all of the same information easily on
their mobile phones.

Close up
(1) The main focus of the homepage is to allow the user to
search for a country; putting the search bar as the primary
call to action achieves this. (2) Once the user has selected
a country, the navigation area is customised to the said
country to make it feel more personal and to reflect the
users search. (3) Fantastic photography related to the
main adventures of the country is used to draw the users
attention. There is also a small summary and a call to
action that allows the user to find out more or to book
their trip. (4) Another search function is available to allow
users to search for a specific adventure in their chosen
country. (5) Tweets displayed from users that have already
explored the country are displayed here, encouraging
other users to visit the country. (6) Everyone loves food,
so by displaying the countries local delicacies, everyone
can get a taste of what the country has to offer them.

my month
What have I been doing
this month?
This month has been
my first month of being
a freelance web
designer. Ive done a lot
of learning about
business, worked on a
photography website
and Im currently in the
process of planning a
big project with a wellknown international
model. Its been a scary
but exciting month!
Which two websites
have I visited for
inspiration?
designspiration.net,
abduzeedo.com
What have I been
listening to?
Frank Turner,
Disclosure, CHVRCHES

may 2014 53

Showcase

Design challenge

OLLIE BARKER

Adventr

Promoting adventure using user generated content. See a full-size image: netm.ag/barker-253

my month
What have I
been doing?
The frontend
development of an
educational website.
Sites Ive visited?
Lately inspired-ui.com
for app inspiration and
www.siteinspire.com for
web inspiration.
What have I been
watching?
House of Cards, Dexter
and the majority of
whats on Netflix.
What have I been
listening to?
Broken Bells, Boy and
Bear, Jamie Cullum,
Coasts, Two Door
Cinema Club and
Arcade Fire.

54

may 2014

The concept of Adventr is to help

individuals and groups find the best
adventures and journeys that the planet has to
offer with a real element of getting the
adrenaline pumping.
The web content is based on content uploaded
from users, sharing their own journeys,
experiences, journal entries and media. This
helps to populate the site as well as providing
the best information and advice for future
travellers. One of the main brand elements
of the concept involves hexagons. This is
based around the idea that all the journeys
featured will be categorised into six overlapping
categories: explore, travel, culture, water, relax
and nature.
I wanted to focus on the location and the
journey itself. I believe the idea of finding your
ideal adventure and looking at how to get there
is more powerful as it stops the discouragement
you feel when you see the travel costs.

Close up
(1) Adventures will be based around, and tagged by,
six categories: explore, travel, culture, water, relax and
nature. (2) An interactive map on the front page is used to
showcase the most popular and interesting adventures
using a filter option and hover pop-ups to refine and
display additional information. (3) The main content of the
homepage is based around an infinite scrolling concept.
It will initially display a featured adventure, latest tweet,
member statistics and a member content upload area.
Multiple types of content will be loaded in and dynamically
arranged including feeds from multiple social networks.
(4) The mobile version of the website strips the design
down to its basic elements, removing the interactive map
in favour of a call to action button and the three stages
are transformed into a slider. If users submit content on a
mobile they would use a companion app.

Design challenge

2
4

SHAWN KING

Go

Using geolocation and Google Maps to celebrate Rail Trails. See a full-size image: netm.ag/king-253

GO is a site concept dedicated to Rail Trail

enthusiasts, giving users the ability to
discover trails, plan trips, set goals and keep
track of their miles on the trails. To accomplish
this I would create a custom Google Map to fit
the design of the site. The trails on the map
would be geolocations gathered from Rail Trail
organisations. Your geolocation would be based
on the GPS from the browser, or your user
profile (based on if the browser is GPS capable).
There would be few graphical elements
implemented on the site. The design is contentdriven and utilises web fonts and font icons.
Developing the responsiveness of the site
would be based on content breakpoints rather
than device breakpoints. This addresses the
sites layout needs rather than just handling
them from a device by device point of view.
The overall goal would be to have a site that is
lightweight regardless of device, and provides
users with the information they want to see.

Close up
(1) Once youve signed into GO, the first thing youre
presented with is a map of nearby trails. The trails
surrounding you on this map are based on your GPS
location. If you want more options, or to view trails in a
different area, you can drag the map, zoom in and out, or
search. (2) Favourite trails help you to remember the trails
you love. (3) Click on any trail to view shared images, get
directions, begin planning a trip, or add miles. (4) My Trail
is the core of GO for each user. This section provides you
with information about trips, goals, and miles you have
logged on trails. Additionally you can create new trips,
establish new goals, and log your miles. (5) GO also has
sections to display posts from social networks, follow GO
on social networks, and view resources for Rail Trails.

My month
What have I
been doing?
A new interface design
for an in-house LMS at
West Virginia
University called SOLE.
I also just completed
the design and
development for
Chiffon & Champagne.
Which sites have I
visited for inspiration?
Smashing Magazine
and A List Apart.
What have I been
listening to?
Young the Giant, Lorde,
Imagine Dragons,
Cannery Row Spotify
playlist, noisli.com.
What have I
been watching?
Men at Work, Rush,
The LEGO Movie.

may 2014 55

Showcase

Focus on

Focus On

Using animation
Gene Crawford says animation can either help to create a great user
experience, or hurt it badly, and suggests how to achieve the former

PROFILE

Animation in a website design can

either lead to a really neat user
experience or hurt it very badly. A simple
mouse interaction on a button or link where
it changes colour to indicate state, called a
hover, is possibly the most basic form of
animation youll encounter or work with.
More diverse forms are things like full
navigation sections that fly in or out of the
screen or fully animated scenes built from
illustrations. These types of elements all
must be used strategically and with concern
for the balance between the animation and
the content.
You can also use animated elements to
help people understand where important
items on the page are. For example, if
a first time user has just logged into an
application, having something highlight
where you begin can speed up their
understanding of what that app does.
Or, if you have a piece of content on your
homepage that you just dont want people
to miss out on, building in an interesting
interaction or fade on load effect would help
them take notice of it.
The ugly side of using animations is when
they get out of hand, where every element
on the page is moving or chirping at you.
You never want to overwhelm someone
when theyre trying to make sense of your
pages content the first time round.
Remember the blink tag? Keep that in the
back of your brain as you plan your usage
of animation on your next site design and
it will serve you well.

Genes mission is to work tirelessly

at providing inspiration and insight
for developers. His recent projects
include unmatchedstyle.com

(1) The website for the brand asset

management service Brandisty
(brandisty.com) uses animation to keep
you visually interested in its page, which
works to compel you to explore the copy
more. (2) The icon designer website
Streamline Icons (streamlineicons.com)
animates the page illustrations on

the initial page load, delivering a very

dynamic experience on the first time
visit. (3) The marketing page for the
Vimeo Video Player (vimeo.com/player)
uses various types of animation and
video to communicate the narrative of
what the player is all about and why its
so awesome.

USA/Canada Offer!
Subscribe to

and save 45%*

Great Reasons
to Subscribe:
l Save


up to 45% on the shop price*

l Get


13 issues delivered direct to

your door

l Get


your copy early

l Stay


up to date on new web

technologies

l Exclusive


access to the worlds

leading experts

Prices
Every 6 Months: $67.99 (Save 38%)
1 Year: $135.99 (Save 38%)
2 Years: $244.99 (Save 45%)

Live in the
UK? Turn
to Page 14

SAVE
UP TO
45%*

Subscribe online at www.imsnews.com/net-a030

Or call toll-free on 1-800-428-3003 quote code a30

Terms and Conditions: * Savings compared with buying 13 full priced issues at $16.99 from the US newsstand. This offer is for new North American
print subscribers only. You will receive 13 issues in a year. Minimum subscription term is 12 months. If at any time during the first 60 days you are
dissatisfied in any way, please notify us in writing and we will refund you all unmailed issues. Prices correct at point of print and subject to change.
Offer ends 15 June 2014.

Showcase

Profile
Profile

Profile

Yaron Schoen
yaronschoen.com

Brooklyn-based designer Yaron Schoen tells

Martin Cooper about how just a few,
simple lines of code ignited his
love affair with web design
Yaron Schoen describes himself a
human interface designer. He
makes machine interfaces that are
pleasing and comfortable for people. By
his estimation, over 300 million people
have used his creations over the past 10
years. Before you continue reading, you
may like to visit his site (www.
yaronschoen.com) and use the handy
pronunciation guide so you can get his
name just right.
net: Why dont you introduce yourself?
YS: Im a Brooklyn-based interface
designer. Im also the founder of Made for
Humans (madeforhumans.com), a small
design shop, Float (www.floatschedule.
com), a project planning and team
scheduling service, and Kiddo (getkiddo.
com), that creates software for parents.
net: You created a tutorial to help people
pronounce your name?
YS: Yup! I get a lot of how do you
pronounce your name?, so I decided to
help people out. The options were to
either create a quick tutorial to help
people pronounce it, or to completely
change my name to Ron Stone or
something. I chose the former.
net: Where does the clan Schoen hail from?
YS: I was born in Manhattan, moved to
Israel when I was 13, and came back to NY
when I was 27. My wife was born in a
small Kibbutz in Israel, and I met her in

58

may 2014

Profile

info
w: yaronschoen.com
location: Brooklyn, New York
expertise: interface design,
product design, creative
direction, entrepreneurship

clients: AOL, Travelocity, Charity:

Water, Wishbone, Pixable

may 2014 59

Showcase

Profile
Profile

the beaches of Sinai almost a decade ago.

My god, time flies. Our two-year-old
daughter was born in Brooklyn.
net: How did you wind up becoming
a designer?
YS: Mainly by chance. Even though I was
always very passionate about art and
illustration, I never really paid much
attention to graphic design until I
attended a few Multimedia classes in my
early twenties. It was there that I first
embraced graphic design and discovered
many of the tools that I use to this day:
Photoshop, Freehand (Illustrator), Flash,
After Effects, 3D Max, you name it. I
mainly focused on Freehand because of
its simplicity and, unlike 3D or video, its
zero rendering time. Plus I enjoyed
experimenting with illustration.
net: And the web? When did it first make
an entrance in your life?
YS: The first time I surfed the web was in
the mid-nineties. I was intrigued, but
honestly I was way more interested in
playing Space Quest 3. The real aha
moment for me was when I was introduced
to HTML in my multimedia class. I
remember this vividly, it was the first time
I used the default Windows text editor to
create a 100px table with a red background

Parental software Schoen founded Kiddo. Its a company that creates software for
parents. Its first product is a baby activity tracking app that is launching soon

colour. The fact that a few lines of text in a

text editor could create something visual in
a browser blew my mind.
net: Whats your style as a designer?
YS: Honestly, I dont know. Its funny how
you can immediately recognise the style
of one of your peers, but when it comes to
yourself, its a lot harder. Its kind of like
your voice; you have no idea how it really
sounds until you listen to a recording of
it. When it comes to design influences, Im
a bit polar. I was always into Art Nouveau,
Tiffany lamps, stained glass and that sort

of aesthetic. But at the same breath Im a

Swiss modernism junkie. So perhaps some
of those influences are apparent in my
work? Who knows. I just do my best to
adapt my style to any given project.
net: Do you think a designers role can
sometimes become mythologised?
YS: Even though design is a hot
buzzword, I honestly am not so sure that
the tech community fully embraced the
role of the designer as much as it likes to
claim it did. Were getting there, but I still
see huge gaps in basic design thinking
within companies. All that said, things
are definitely changing for the better.
net: I enjoyed your blog post Real
designers nurture (netm.ag/real-253).
What motivated you to write it?
YS: Thank you! I sometimes have the
tendency to jump from one idea to the
other. Half building things and moving
on, or shipping a feature and then
immediately moving on to the next. So I
wrote it as a reminder to myself that
shipping is just the beginning, and
success usually comes from persistence,
iteration and nurturing.

Sleeping lions Schoen created a series of posters of sleeping animals designed for baby and toddler rooms
to help convince them sleep is good. Hes pretty sure parents will appreciate this

60

may 2014

net: When it comes to product design, is

there space for soul?
YS: Im not sure how to define soul, and I
dont think our industry has defined it yet
either, so its hard to answer that. I prefer
music with soul, so Im assuming the
same applies to interfaces too, right? I

Profile

office culture

Yaron Schoen

yaronschoen.com

Whats on your
desktop today?
iMac, Logitech MX cordless mouse,
Persian mouse rug, small statue of
Captain America

The little things

Websites: Twitter, Soundcloud,
Google apps, New York Times
Apps: Twitter, Google Maps, Wunderlist,
Day One, Badland
Audio: Beatles, Andrew Weatherall,
Nicolas Jaar, Nouvelle vague, Chet Baker
Reading: Codex Seraphinianus by
Luigi Serafini
Brooklyn Beta Brooklyn Beta asked Schoen to design its 2013s event site. He tried to keep true to what the
conference is all about: people. Food poisoning Since Schoen had a pretty nasty case of food poisoning a
few years ago, he co-created Eatify with Sarah Lensing to present sanitation grades for restaurants in NYC

definitely can spot a soulless design, and

its usually just an apathetic carbon copy
of something else. So perhaps soulful
product design is achieved by injecting
some of your own emotion and
experiences, or some cultural reference
that you feel connected to? Interfaces are
conversation frameworks between you
and a computer, and Id rather not have
an apathetic conversation. So I guess,
yeah theres a place for soul.
net: How did Float come about?
YS: Float (www.floatschedule.com) is a
cloud-based service for project planning
and team scheduling. Glenn (CEO) and I
worked together at Fantasy Interactive,
and when he approached me with the
idea of Float it was a no brainer. We both
felt the pain point of managing teams
and projects and knew that this was a

huge and complicated problem that we

were excited to find a intuitive solution
to. In the beginning we focused on
agencies but we now have
pharmaceuticals, architects, consultants,
publishers and universities all using
Float, with more than 20,000 projects in
30 countries.
net: You used to work for Twitter until
recently. How was that experience?
YS: Believe it or not, Im not a huge web or
app user. I use a very limited number of
services on a daily basis. Twitter is one of
them. So it was a huge honour to work on
a product that I love so much. Twitters
design problems may seem simple from
the outside (only 140 characters!), but
thats thanks to the amazing work the
design team has done in order to make it
seem so. Throughout my time there I got

Whats on the walls?

House Industry poster, James Jean
postcards, Adventure is Out There by
Rogie King, and my Animals Sleeping
poster series.

What will you do for lunch?

Whatever, its probably not that healthy.

What hours do you work?

Since we had our daughter my schedule
stabilised to normal hours: 8:30am to
5pm. I try to avoid working after 5pm
but sometimes I have no choice.

What else do you do?

Since I currently work from home, it
takes discipline to not stop everything
and binge-watch Game of Thrones.

How often do you hang out

with other designers?
Quite often. There are so many amazing
designers and devs to meet in NYC.

may 2014 61

Showcase

Profile
Profile

Charity proceeds Schoen has been collaborating

with charity: water for years now. This year it was
his privilege to design a poster for its September
campaign with proceeds going to villages in India
Beyond pixels Schoen is passionate about music
and aims to spend two or three hours a week
dedicated to creating electronic music

Timeline

From discovering HTML to

going freelance via Jerusalem
and New York
1999
Discovers HTML.

2001
Starts first full-time job as a designer
at a small agency in Jerusalem.
Stays there for six years, becoming
its creative director.

June 2007
Moves back to NY to join Fantasy
Interactive (Fi) where he designs sites
for EA, National Geographic, TWC,
Nintendo and more.

July 2009
Leaves Fi to join AOL as its senior
designer for the entertainment group.

August 2009
Leaves AOL to go freelance. Founds
Made for Humans and Float.

May 2010
Forms part of the founding team of
Julpan, a stealth engineering startup.

September 2011
Julpan is acquired by Twitter.

October 2011
Helps build the Twitter NY office
and hires its first designers.
Daughter is born.

November 2012
Leaves Twitter to rebuild Made
for Humans, work on Float and
create Kiddo.

62

may 2014

to work with some amazing people, on

hard problems, while building the
satellite office in NYC. Overall it was an
amazing experience.
net: What does it feel like working for a
startup thats been acquired?
YS: Startup life is a whirlwind in general.
The rollercoaster of emotions isnt for
everyone. You can feel like the master of
the universe and the lowest scum of the
earth all in one day. Being acquired is
similar. The emotions are mixed between
the excitement of new challenges and the
nostalgia of the old ones. As long as there
is a solid transition strategy in place,
things stabilise quickly. The team gets
acquainted with its new surroundings
and starts focusing on the future.
net: Do you want to tell us a little about
Made For Humans?
YS: Made for Humans is a small design
studio that I founded after leaving AOL
back in 2009. I wanted a platform from
which to launch my design and
development projects. The companys
thesis is that an interface is essentially a
communication channel between people
and computers, and our job is to facilitate
that channel in a way that works best for
both. I kept the company open while I
was at Twitter, and its current team
consists of myself and two former Fi
mates. Were taking on few select

projects each year. I feel that client work

keeps us thinking fresh and pushes us
into new and different areas.
net: Beyond the web and design, do you
have pixel-free hobbies?
YS: Music was my first passion in life. I
was obsessed with classical music as a
child, up until I was a teenager when
grunge became a thing. I even learned to
play the violin but I wasnt really
persistent with practice, so if you ask me
to play the violin, well dont. Today I
produce and mix electronic music, Im no
professional but it makes me happy.
When Im burnt out on a design, music is
wonderful for me. I try to work on my
music at least two or three hours a week,
though that isnt always possible.
net: My dentist is lovely, but you seem to
hold yours in uncommonly high regard?
YS: Ha! Yeah, shes great. I like to find
inspiration mainly from sources outside
of our industry and I enjoy learning from
other small businesses. My dentist
thrives on customer service and a
friendly face. Its a reminder to me that
functional design isnt enough, there
needs to be that extra something to get
your customers hooked. Perhaps thats
the soul in web design?
Next month: we talk to the design
team behind charity: water

Showcase

How we built

How we built

super spice dash

Razorfish and Goodboy explain how they created the pedal-to-themetal-bleeding-edge-action-fest 3D game to promote Spicy McBites

Brief
McDonalds Spicy McBites. Small
in size, but big in spice. McDonalds
asked Razorfish and Goodboy to
step up to the spice challenge and
position the duality of its small
product with an impactful flavour
in an engaging way.

64

may 2014

Close up
(1) Super Spice Dash is an immersive fast-paced
game. The game is an endless runner, using a
chase-cam from a third-person perspective. The
player must go as far as possible in this neverending adventure. (2) The big wow factor is that
weve created an extremely visual, visceral 3D
game in HTML5 that works on almost any device.

(3) The game has different worlds to play: The

Treetop Topple, a lush and green forest; Snowy Peak
Mountain, icy and scary; and Sand Storm Mirage, a
hot and rocky world full of traps.
(4) The players are able to login with Facebook
and challenge their friends. Theyll see a special
scoreboard made for them and their friends.

How we built

Cyril Louis

John Denton

Mat Groves

Timeline

Razorfish and Goodboys

McBites adventures
19 August 2013
Cyril is creative director
on the McDonalds account
at Razorfish
w: www.razorfish.com
t:@Millice_

John is a creative partner

and the uptight aesthetic
at Goodboy
w: www.goodboydigital.com
t:@juannacho

A bedroom coder turned pro,

Mat is a technical partner
at Goodboy
w: www.goodboydigital.com
t:@Doormat23

The project starts with the question:

what adventures did the McBites go on
to come back so hot and spicy?

30 August 2013
The Super Spice Dash concept is ready
and goes into production.

I cant believe its not Flash. Thats

likely to be the reaction when you
sit down and feast your eye balls on
Super Spice Dash. Its a fixed perspective
racing game, created to market
McDonalds Spicy McBites. The bright,
brash and blisteringly fast site uses web
standards to create a sensation of speed
that is truly remarkable. We sit down
with London agencies Razorfish and
Goodboy, and discover what makes them
and the site tick (so quickly).
net: Hello! Thanks for making time to
speak to us. Why dont you introduce
Razorfish and Goodboy?
CL: Razorfish London is a full-service
digital agency, founded in London in 1995
with the mission of bringing technology,
creativity and media together. Were now
280 people strong and experts at creative,
design, social media, digital media,
analytics, technology, innovation, service
operations and user experience.
GB: Goodboy are new kids on the block
in agency terms, although as individuals
weve been in the industry for ever.
Were the I cant believe its not Flash
agency, founded to make rich, entertaining
content that reaches everyone,
everywhere. We take a tech-first approach
to creative meaning that aesthetics and
performance are intrinsically linked.
net: And the McDonalds Super Spice
Dash, can you describe the project?
CL: Super Spice Dash is an evolution of the
McBites launch and a big step up. The need

to reach the burgeoning iOS market meant

if we wanted to keep everything inbrowser, wed need to start from scratch.
GB: With this in mind, we started looking
into possible games that might fit with the
new product. We ended up with two key
approaches. One was a more simple legacy
device friendly pitch and put type of
mini-golf game. The other was the pedalto-the-metal-bleeding-edge-action-fest.
We werent 100 per cent certain how far
wed be able to take the second option and
keep everything looking and playing great.
So with a mountain to climb, we all settled
on option two.
net: How did you land the job and what
was the client brief?
CL: Razorfish is the digital agency of
record for McDonalds UK and responsible
for most of the digital campaigns. We
asked our friends at Goodboy to partner
after the initial creative idea.
net: What is McDonalds like as a client?
CL: Theyre very smart and effective and
commission a great number of campaigns
every year. Super Spice Dash was one of
them, used to launch the spicy version of
the popular chicken McBites.

2 Sept 2013
The collaboration with Goodboy starts
and the details of the game are worked
out. Wireframing finishes.

9 Sept 2013
The look and feel of the campaign is
approved and design of the game kicks
off. Razorfish works with Goodboy on
the low poly aesthetics.

16 Sept 2013
All POC groundwork and the initial
cross-device testing completes. Design
starts for level aesthetics

23 Sept 2013
Development continues, adding game
functionality, scoring system, timing.

30 Sept 2013
Development integrates level layouts
and artwork as well as social scoring
functionality, with final tweaks
for retina mobile devices and checks
on the orientation-flexible
design performance.

6 October 2013
net: How did you prototype the project
and communicate your ideas?
GB: Once we had settled on the loosest of
game styles, we went directly to starting
on proof of concept as, more than ever, we
needed to prove the concept could actually
work at all!

Game QA begins.

16 October 2013
The campaign goes live and the site
works on all the different devices.

may 2014 65

Showcase

How we built

4
3

Evolution

Goodboy and Razorfish discuss the evolution of the project

(1) We started by creating a wireframe to scope out the basic form of the
game and the rough scope of the UI. The 3D track was definitely a big
coup for a browser mobile game. The sketch was mainly in the form of
the original engine proof of concept. (2) We used Flash as a quick means
of producing, testing and tweaking the level set pieces. (3) We have
hand-drawn a series of worlds, from jungle to snowy peak mountains.
We then selected the top three to be illustrated. (4) The three worlds that
we selected are really different from one another and are all made of
sprites having the same function.

66

may 2014

How we built
net: Why did you opt for a gaming angle
as opposed to another experience?
CL: The product is a very playful one by
nature, and this spicy edition even more.
We wanted to illustrate the adventures
that the McBites went through to become
so hot and spicy, in a fun, viral and
sharable way. We wanted to combine an
epic and immersive gaming experience
with advertising in a playful way.
net: In pure technical terms, which tools,
technologies and platforms did you use
to build the site?
GB: Lots! I mean, there really was a
lot of tech in SSD. There were regular
tools such as perennial coder favourite
Sublime Text 2 for getting the code down.
The development team took place on a
Bitbucket repo managed with SourceTree.
The games 3D was so specialised for
device performance that we developed our
own super lightweight engine. HUD and
UI was handled by our own open source
engine, Pixi.js [see a tutorial for using
Pixi.js on page 104]. Flash got a look in
too as, once again, we used it (well its IDE)
as a convenient level editor, publishing
spitting track data out direct to our server
for instant cross device testing.
There was even a bit of tech applied to
the visuals we created. We used a great
iPad app called Tres (netm.ag/tres-253) by
The So3, which allowed us to create the
low-poly-style backdrops and in-game
assets. Its actually a really cool app, and
outputs either high-res PNG or SVG assets.

Icy cold Snowy Peak Mountain is the second level of the game. Its an icy world full of scary traps

net: What were the biggest technical

challenges that needed to be overcome?
GB: Getting the game to run on a range
of mobile devices including Android and
iOS phones and tablets. Oh, and of course,
Internet Explorer always likes to throw in
a few curve balls. The simple answer would
be all of the browsers.
Making a one-size-fits-all solution
that fits lots of patently different sizes
is no easy task. Responsive design is one
thing, but SSD had to dynamically cope
with pretty much everything! Responsive, layout, gameplay, performance and
control method. The whole nine yards.
iOS also had its own specific challenges.
Namely the curse of the WebView. It will
probably come as a surprise to more than

just us quite how severe this issue is. Basically, any WebView that isnt iOS Safari
is subject to a 3.3 times performance hit.
There is no trick around it or anything like
that. Only Safari gets the Nitro JavaScript
engine, and when it comes to a high performance mobile browser game, thats a
very big deal!
net: Looking over the horizon, which
web technologies are you looking
forward to experimenting with?
GB: As a borderline institutionalised Apple
fanboy Ive got to admit that the browser
performance of devices like the HTC One
really has been an eye opener. Not so much
on this game, but seeing it throw around
WebGL content with ease is quite a thing
to behold! WebGL and in particular its
application to 2D content is something we
think has really amazing scope.
net: Whats the feedback from the client
and its customers been like?
CL: The game was very well received by
the clients, and the public. The customers
spent an average of more than seven
minutes playing with many coming back
for more fun later.
net: Whats the secret of a good burger?
CL: Two beef patties and three-part bun.
GB: Three slices of cheese.

Burning hot Here is the third level of the game, Sand Storm Mirage, which is a burning hot world

Next month: we talk to the

team behind Code for America

may 2014 67

Features Cover feature

68

may 2014

Cover feature

t some point with any technology, theres

a feeling that pretty much anything
that can be done has been done. When
something is no longer quite as new
and shiny, interest wanes and attention is drawn to
the next big thing. This has often been the case in
the web industry, which is prone to getting terribly
excited by a certain aspect of technology before,
sooner or later, relegating it to the mundane.
When CSS first appeared, it was revolutionary, and
over time it has evolved to enable designers to create
flexible, tightly-crafted and beautiful web page
layouts. Of late, though, theres been the suggestion
from various quarters that CSS is tired and perhaps
its time in the sun has gone.
I want to showcase that theres still plenty of
excitement and life in the world of CSS, whether
thats in cutting-edge properties you may not yet
have explored, or through using an aspect of CSS in a
way youd not previously considered.
Here are some tips from some of the industrys top
CSS experts.
(Note: Some techniques in this feature are cutting-edge
and may not be fully supported across all browsers.
Thoroughly test and ensure fallbacks are in place before
making any work live.)

Match images to site

01 colour schemes

Christopher Schmitt, conference organiser

Author
Craig Grannell
is a writer, designer and
musician. Hes been
writing for net since
before border-radius
was new and exciting,
and you can follow him
on Twitter at
@craiggrannell
Illustration
Mike Chipperfield
is co-founder and
creative director
of Brighton-based
collective Magictorch
(www.magictorch.com)

Conferences have their own colour schemes and,

with many speakers, workflow for managing
portraits can be complex. Manually applying filters
doesnt scale and relies on you having access to,
say, a specific Photoshop action. I now use highres greyscale PNGs and add tones using CSS filters.
This enables me to match any portrait to an events
scheme, and to also reuse images across multiple
themes. I just need a new CSS rule for each.

See a demo: cdpn.io/v/pDLzl

Evenly share space in a

02 grids last row

Stephen Hay, designer and author

If youve an unknown number of items to be
displayed in a grid, you can use Flexbox to split the
last row evenly. So if theres only one item, it will
take up the entire row; if there are two items, the
row will be split in half, and so on.

See a demo: jsbin.com/EtUJUVA/1

may 2014 69

Features Cover feature

Create particle animations

03 with box-shadow

Ana Tudor, coder and maths fanatic

By mixing box-shadow with some maths and Sass,
you can graph 2D curves, emulate 3D motion and
create crazy particle animations everyones going to
mistake for canvas ones!

See a demo: codepen.io/thebabydino/pen/paAJw and

codepen.io/thebabydino/pen/shtGe

Animate polyhedra

04 with transforms

Ana Tudor, coder and maths fanatic

Youve probably seen pure CSS polygons created
with borders, but weve a much more powerful tool
in the transform property. Chaining and applying
transforms on nested elements allows us to
create complex polygons with image backgrounds
or borders and transparent interiors. Using 3D
transforms, we can combine these 2D shapes into
polyhedra and make the solids merge, unfold,
explode or recombine in a manner easily mistaken
for WebGL.

Shane Mielke

Freelance designer
shanemielke.com
Previously of 2Advanced, freelance designer Shane
Mielke jokes, I learned in an age of web design where
if you werent animating everything and anything, you
werent doing your job, and so thats always been a
part of my mentality. Once, such animated content
would have been a Flash-fest, but Mielkes latest sites
animation is based around CSS and JavaScript. Project
links are atop rotating cuboids, while press items become
magazines flicking open on a rollover; elsewhere,
screengrabs subtly shift in 3D space.
Mielke explains web design has always been about
figuring out something cool you want to do and how to
accomplish that, and believes CSS is well-suited to the
type of visually dynamic design he creates: Im a big
fan of things initially appearing to be very simple. Then,
when you interact with them, you see a level of depth,
intricacy and love that brings everything to life. CSS is
perfect for this, because if something doesnt work in an
older browser or on certain platforms, everything rolls
back and the effects dont show.
Mielke emphasises the importance of structure.
Many of his pages are unordered lists manipulated with
JavaScript and CSS, so theres no complication regarding
positioning and floats; he also notes how CSS can add
extra spice, such as tweens when selecting items,
yet people rarely tap into this. Bloat, though, must be
avoided: Its all about the developer. You can just as
easily make a huge page with web standards as with
Flash, when striving for certain effects.

70

may 2014

See a demos: codepen.io/collection/eErLu

05

Master calc() for positioning

Ana Tudor, coder and maths fanatic

I loved calc() from the moment I discovered it. Its

useful for taming margins, padding or dimensions,
and can be a lifesaver when used for positioning or
sizing backgrounds, inside gradients or transforms,
and combined not just with the same old units, but
also the new and cool viewport ones.
Below CSS can be a

useful method for applying

tones to greyscale
images, according to
Christopher Schmitt

Make the box model sane

06 with box-sizing

Sawyer Hollenshead, Oak Studios dev and designer

Use box-sizing to save your sanity. Without it, an

element with a defined width of 250px and 25px

of padding combines to a width of 300px, making
mixing pixels and percentages tough. With box-sizing:
border-box borders and padding are instead placed
within the defined width.

07

Vertically centre with CSS

Trent Walton, Paravel founder

Historically, its been tough to vertically centre

something with CSS, such as if youve an image with
adjacent text you want vertically aligned. Instead
of stomping and cursing, use Flexbox to deal with
alignment woes.

See a demo: codepen.io/TrentWalton/pen/FDBbu

Target a bank of related

08 objects

Jonathan Smiley, Zurb partner and design lead

Shave CSS line weight by using approximate attribute
selectors on class names, to target a large bank
of related objects, rather than attaching common
attributes to every single class. For example ...

[class*="-block-grid-"] { }
... would target the likes of:

.small-block-grid-3
.large-block-grid-5

09

Control hyphenation
David Storey, open web advocate

Hyphenation is taken for granted in print, and some

developers use the hyphens property online, but

few are aware of other properties that provide finer

control. If youre not careful, you get hyphenation
ladders where hyphens are used across multiple
lines. A general rule of thumb is no more than two in
a row, which you can control using hyphenatelimit-lines . Also, hyphenate-limit-chars enables you to
specify the minimum length of a word that will be
hyphenated, along with the minimum number of
characters before and after the hyphen break.

Take advantage of

10 writing modes

Above left Ana Tudors

demos showcase how

some CSS magic can
create polyhedra that can
be animated and even
exploded/recombined

Above top Particle

animations with boxshadow, maths and Sass,

courtesy of Ana Tudor

Above right A digital

plotter in CSS, again
utilising box-shadow and
using Ana Tudors mastery
of maths

David Storey, open web advocate

Writing modes enable you to define the direction in
which text flows. Some East Asian text is written
vertically, lines growing from right to left, specified
with writing-mode: vertical-rl ( tb-rl in IE). Vertical text
isnt really used in European writing systems, but
can be handy for table headings when youve limited
horizontal space.

11

Use gradients in unusual ways

Ruth John, designer

Background gradients can look great when used

with borders and bullets. I use both on my blog
(rumyrashead.com/category/speak-write-mentor) and
with a preprocessor can call a mixin with the reused
code, so as not to repeat it manually. Dont go supercrazy because gradients can be processor-heavy.
SCSS mixin for list bullets:

@mixin gradedBullet($colour) {
background-image:
linear-gradient(left,

may 2014 71

Features Cover feature

lighten($colour, 15%) 10px,
$colour 11px,
$colour 20px,
darken($colour, 15%) 21px,
darken($colour, 15%) 30px,
transparent 31px
);
}

12

Use string-matching on links

Ruth John, designer

On my blog, Ive used CSS attribute selectors with

string-matching to style social icons. These appear
throughout my blog, sometimes with text and
sometimes without, but always with an icon. To
style the right link with the correct social icon, I use
a string match on the href attribute of the anchor
element. I use *= so the href on the anchor element
only has to contain the string I specify.

/* for all social links */

.social a:before {display: inline-block; padding-right:
30px; font-family: 'FontAwesome';}
/*Each specific link*/
.social a[href*="twitter"]:before {content:"\f099";
color:#52ae9f;}
.social a[href*="github"]:before {content:\f09b;
color:#5f2e44;}
.social a[href*="feed"]:before {content:"\f09e";
color:#b47742;}

13

Make FOUT work for you

Jason Pamental, principal at H+W Design

The web is built on the premise it should deliver

content, even if the browser cant render the bling.
Slow-loading web fonts can be frustrating, FOUT
(Flash Of Unstyled Text) jarring as navigation
and text reflows while fonts download. Google
and Typekit provide an answer: the web-font
loader. By injecting classes in a page, based on the
loading status of fonts, you can style fallbacks with

those classes to keep reflow to a minimum, also

eradicating WebKits invisible content syndrome.

See a demo: hwdesignco.com/otf/google

14

Explore SVG for backgrounds

Emil Bjrklund, inUse web developer

The only browsers now without SVG support are IE8

and below and Android 2 WebKit, and so using SVG
for backgrounds in CSS is feasible, especially along
with a PNG fallback solution, such as Grunticon. SVG
can be styled by CSS, and there is interesting bleedthrough of CSS properties (filters!) from SVG that we
can play with as applied to HTML.

Focus users with

15 3D transitions

Emil Bjrklund, inUse web developer

Using 3D transformations and making use of the
z-dimension in user interfaces can be really useful,
notably for hiding/showing or collapsing/expanding
content. Its also quite easy to have a fallback to a 2D
transition, or no transition at all, in those situations.
Its an area where a little progressive enhancement
can go a long way.

Create circular menus with CSS

16 and maths

Sara Soueidan, frontend developer

Above right Jason

Pamental says that you

can make FOUT work for
you through utilising a webfont loader

Right Ruth John

shows how theres

more to gradients than
backgrounds, using them
for borders and bullets on
her blog

72

may 2014

Circular menus are popular in mobile apps, and

you can use CSS transforms and transitions to
create a simple circular menu. This menu can be
modified and customised to create an upwards- or
downwards-opening menu, too. Theres no direct
way in CSS to translate an item diagonally, but you
can use the value of the circles radius on which
you want to position the items, and apply a simple
mathematical rule to calculate the horizontal and

Foldable.Me

By Mint Digital
mintdigital.com

Product development studio Mint Digital

partakes in an annual hack-week. A recent brief
was all about creating something to bring the
online world offline and scratch a creative itch.
The result was Foldable.Me (www.foldable.me),
a tool that enables you to design, print and
construct a customisable cardboard avatar. On
selecting a gender, the tool enables you to add

hair, facial features, clothing and colours, and

the little cardboard figure can be twirled with
the flick of a finger or a mouse-pointer drag.
Developer Peter Westendorp recalls that it
was suggested that a 3D preview of the avatar
should be built using CSS 3D transforms: This
sounded crazy and unrealistic, but we gave it a
shot. After a few hours hacking on a prototype,
it became apparent this really did work. The
technology was especially useful in terms of the
way it fared across browsers: We could show
the model in 3D on the latest browsers, whilst
gracefully degrading to a 2D model on older

vertical translation values to pass to the translateX()

and translateY() functions. That way, you end up with
a diagonal translation to move the menu items to
the correct positions on the circle. The click event
that closes/opens the menu can be handled using
JavaScript, or you can take it one step further and
have a CSS-only menu by using a CSS checkbox hack.
In my demo, I use JavaScript and the HTML5 classList
API, which isnt supported in all browsers so youll
need to view the demo in a modern browser to make
it work, or uncomment the jQuery code instead of
using the classList API code.

See a demo and full tutorial: codepen.io/SaraSoueidan/

pen/wpHBt CSS Checkbox hack example: codepen.io/
TimPietrusky/pen/fHmiI

17

Animate links on hover

Paul Lloyd, The Guardian interaction designer

Hover states shouldnt be relied on to make an action

work or provide important information, but you can
still enhance interfaces for mouse-based users. On
24ways.org, we reveal article titles when you hover
over links in the previous/next navigation. This

ones. Thats the great thing about CSS it can

just naturally degrade without entirely breaking
the user experience.
Although Westendorp rightly states that
3D transforms shouldnt be wheeled out for
every project, he believes they and other new
CSS features are nonetheless something
designers and developers alike should continue
experimenting with: That way, we will keep
coming up with some great universal UX
improvements. We have to continue innovating
and shouldnt be hesitant to try out new
techniques. It keeps our work interesting.

was achieved by creating a ::after pseudo-element

containing generated content sourced from the value
of a data- attribute, with a CSS transition applied to
have it slide into view on hover.

See a demo: jsbin.com/xaruj/1/edit

Make simple keyframe

18 animations

Paul Lloyd, The Guardian interaction designer

On 24ways.org, we added animated corner flaps to
summaries, which opened on hover. This was done
by combining the @keyframes rule with the animation
property, altering the position of a background
image to achieve sprite-based animation. The trick
is to declare the number of frames you have in your
animation sprite with the steps() value.

Demo: jsbin.com/buwa/1/edit

Create floating 3D effects

19 with shadows

Catherine Farman, Happy Cog developer

A recent project required a floating product photo
with a round shadow beneath, creating a 3D effect

may 2014 73

Features Cover feature

of popping off the screen. The shadow uses several
CSS3 features: border-radius alpha transparency and
box-shadow . It works well for product grids, showcase
imagery in a homepage hero, or any whimsical
design with a skeuomorphic bent.

Demo: codepen.io/cfarm/pen/FHxnr

Update page elements

20 using :target

Simon Madine, HERE senior web developer

CSS isnt a programming language in the usual
sense, but you can still do clever things without
falling back to JavaScript. For example, the :target
pseudo-class is applied to elements that are the
target of a clicked link.
You can use this to define the state of a page,
target a parent containing lots of elements, and your
links become a means to control the look and layout
of all the children with a single click.

See a demo: jsfiddle.net/DMNSn

Provide feedback with

21 subtle animations

Neil Renicker, designer and developer

Above Catherine Farman
shows how CSS creates
a floating shadow effect
beneath a product image

Below left The new

24ways.org reveals
animated titles when
mouse users hover over
previous and next links in
the site navigation

Below right 24ways.org

uses simple keyframe

animations to add a little
extra visual interest to
each item when the cursor
hovers over it

74

may 2014

CSS pseudo-elements ::before and ::after along with

CSS transitions, can enable delightful animation
that provides subtle feedback to mouse users. For
example, build a CSS arrow within a pseudo-element,
apply a transition to the pseudo-element
( transition: all ease-in-out .15s; ), and then add a simple
layout change to the :hover pseudo-class (such as
amending margin-top ).

See a demo: codepen.io/neilrenicker/full/Eyhqn

22

Prepare for will-animate

Paul Lewis, coder and Chrome developer

relations team member

If youve used -webkit-transform: translateZ(0) to

magically make your pages faster, the hack, which
in many browsers simply creates a new compositor
layer, is being replaced by will-animate . Soon, youll
be able to tell the browser what you plan to change
about an element (its position, size, contents or
scroll position) and the browser will apply the right
optimisation under the hood.

From more information: tabatkins.github.io/specs/csswill-change

23

Humanise input fields

Yaron Schoen, Made For Humans founder

Adding quick animations to elements that users

interact with makes an interface feel less computery.
With input fields, try putting a transition call within,
so whenever you focus or unfocus it, theres a
smooth transition.

input, textarea {
-moz-transition: all 0.2s ease-out;

Cover feature

Resources
CSS-Tricks
A superb website written by Chris Coyier that provides
insight into all things CSS, including browser behaviour,
use-case scenarios for a range of properties and values, and
critical thinking of specs.
css-tricks.com

Mozilla Developer Network

Mozilla prides itself on openness, and thats especially so
when it comes to sharing knowledge. Within MDN, youll
find all manner of CSS news, demos and tutorials.
developer.mozilla.org/en-US

-o-transition: all 0.2s ease-out;

-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}

24

Pause and play CSS animations

Val Head, designer and consultant

You can pause and play CSS animation by

changing its animation-play-state property. Setting it
to paused stops your animation in place, until you
change animation-play-state to running , for example
on hover.

.animating_thing {
animation: spin 10s linear infinite;
animation-play-state: paused;
}
. animating_thing:hover {
animation-play-state: running;
}

25

Above Neil Renickers

subtle animation provides

useful feedback for mouse
users, and its all done
through CSS
pseudo-elements

W3C Cascading Style Sheets

This is the home on the web for official news and
information all about CSS standards. Mailing lists are
available should you want to get more involved in the
direction of the technology.
Above Indochinos product
page lacks a visible Add to
w3.org/Style/CSS

Codecademy

Cart button, while Clearly

Contacts presents the user
with an obvious buying path
as soon as the page loads

For those starting out or in need of a quick refresher course,

Codecademy provides tutorials that enable you to learn the
building blocks of the web.
codecademy.com/tracks/web

CodePen
An interactive playground combined with a teaching
aid, CodePen enables you to create and share your
demonstrations of web-page components, seeing changes
live as code is amended.
codepen.io

Dont use CSS variables

Dave Shea, designer and author

Were finally getting CSS variables, for example

to write a colours hex value once and reference it
through a stylesheet. But the official spec is verbose,
adds syntactic complexity, offers underwhelming
functionality, and is largely unsupported by most
browsers. In an era where Sass is widely popular and
goes beyond variables with powerful programming
logic like custom functions and if/else statements,
the official spec comes up far short.
Hopefully these top tips have renewed your view
of CSS and the possibilities it represents in web
development and design. Dont forget to test any
of these techniques thoroughly to check browser
support before putting any work live.

Interactive playground You can see changes to demos live via CodePen

may 2014 75

FeatureS Second feature

Tom Dougherty shares his tips for ensuring a smooth

ride for you and your clients on digital creative projects

76

may 2014

S
Author
TOm dougherty
(@DoughertyTom)
is user experience
director at Delete. He
has a background in
interactive design and
has led the UX on a
wide range of projects
for clients such as Red
Bull, Expedia and IKEA
deleteagency.com

omething we all know is that

delivering great work on time and
on budget is key to maintaining
healthy relationships with the
businesses and clients you work
with. The value of clear communication
for strengthening those relationships
should not be underestimated.
When embarking on a new project
or client engagement, its important to
remember that youre taking the client on
a journey with you, and sometimes into
the unknown.
As a UX professional, I spend the
majority of my time convincing the
clients we work with to be customer
focused, and to think and communicate
from the perspective of their users. As an

may 2014 77

clients view
Sam Warriner, head of
brand partnerships at
Metro Newspapers, tells us how
important the following factors are
in building successful relationships
with digital agencies you work with.
plain english
When it comes to creating
innovative digital solutions in
partnership with agencies and
designers, clear communication
is critical from both sides. Theres
nothing worse than feeling
alienated from your own project
due to an overuse of technical
jargon being spouted out by people
in meetings and phone calls.
As a client, its also important
not be afraid to ask for a clearer
explanation when something is,
in your view, being communicated
poorly to you.
Understanding their
creative process
Having an overview of the agency
process helps to understand what
goes into the project and all that
needs to be considered. I guess just
as important is an understanding
of the expectation of work required
from our side, and the involvement
we will need to commit to
throughout the project.
Spending time in the
agencys environment
While working on a recent project
for Metro in partnership with
Expedia I personally spent some
time in the studio with the digital
agency partner, Delete. Witnessing
the designers in action was a great
way to see the project develop, and
understand some of the thinking
that goes into the creation phase.
This isnt something that Id ever
done before, but its certainly the
type of involvement I would push
for and encourage in the future
with our agency partners.

78

april 2014

industry its time we applied that same

philosophy inwards to help improve the
working relationships we have with our
own customers.
Here Ill share my thoughts on how
to keep clients engaged throughout the
project lifecycle, a few techniques to
ensure client comprehension as well as
things to steer clear of. As with any good
plan, fundamentally, it comes down to
ensuring your client knows where theyre
heading, how youre going to get them
there and what the outcome will be.

Clear communication
It sounds obvious, right? But youd be
surprised how often this is neglected.

after? Are you looking for HP or Part Ex?

Transmission type? Have you considered
the GTI? Erm
Not wanting to be exposed as a total
novice, I took the classic intimidated
customer approach of blagging my
way through the questions, gradually
revealing my ignorance. What I realised
was that, as a customer, I wasnt offered a
tailored customer experience matched to
my knowledge level.
Rather than spotting this and guiding
me through the conversation, the car
dealer took it upon himself to reel off
streams of acronyms and jargon that
didnt resonate with me whatsoever.
This situation forced me to evaluate

The single biggest problem in

communication is the illusion that it
has taken place
As playwright George Bernard Shaw
once said, The single biggest problem
in communication is the illusion that it
has taken place. This statement was
highlighted to me recently while going
through the process of buying a new car.
I encountered a series of uncomfortable
situations as a customer through my
lack of knowledge. After a couple of early
conversations with different car dealers I
quickly realised I had no idea what I was
being asked when it came to defining
my requirements. Is it a 1.6 or 1.8 youre

whether the way we, as experts in

our field, are communicating with
our customers. Is our communication
sufficient and is there more we can do
to ensure our clients are truly in touch
with the processes and programs we are
taking them through?

The process We provide a creative process overview to

Project charter Heres a project charter template used to

build the picture of a project on a single printable page

illustrate key project phases to clients

The appraisal
Before engaging on any digital project
with a client, its well worth evaluating
their digital knowledge level. Usually
youll be able build a picture of this with

Second feature
Good communications

Determine your clients level

of technical understanding
and offer to run
introductory workshops

very little probing throughout the sales

and negotiation stage. Start with simple
things like evaluating the quality of the
brief youve been supplied or asking the
client to declare the individuals who will
be working on the project from their side.
Some clients will have a full digital team
who are well versed in digital activity
whereas others will have no single
team member specifically dedicated to
managing digital projects and, therefore,
will probably lack experience.
Understanding this knowledge level
early on, and assessing the level of handholding that will be required throughout
the project, will allow you to design a
project process around them and enforce
some steps at the beginning to provide
some basic education. You shouldnt be
afraid to raise any concerns you have
about the level of understanding with
your client as long as you have some
methods in place to overcome this.
Possible preliminary steps you could
offer include running an introductory
workshop where you can introduce the
basic principles of website and/or app
design and all thats considered. Also
provide a printed glossary dummies
guide handbook that clarifies key terms
that may well come up throughout the

project, such as SEO, UX and responsive.

Another valuable approach is to run a
project inception meeting. Its a great way
to kick off a new project with your client.

inception meeting
The session should be used to introduce
the main project stakeholders and
their responsibilities from both sides ensuring you explain your roles and the
types of tasks you will be completing.
For a high majority of businesses,
redesigning their website is not an
everyday task and not usually something
they would have been through many
times. This means the phases of work
youll be proposing will be unfamiliar to
them, so clear explanation is crucial.
Walking through your creative process
will help a client understand the main
project phases you have proposed and
the types of outputs to expect at each
stage. You can also highlight where you
require their input too. Be prepared to
adjust your process around your client. I
find its always good to start with a top
level view of the main components before
getting down into the granular detail of
the project plan, which can be a little
daunting to some people. It can often be
worth while sketching out a customised

top level project process with the client

in the room. This will demonstrate youre
willing to shape your process around
their needs, which wont go unnoticed.
A good exercise to run with a client
early on is the project charter definition.
This is especially helpful if the brief
youve been provided is inadequate or has
some clear holes.

The project charter

The charter is designed to capture the
most important information about the
project. The document should serve as
the guiding tool for the duration of the
project, consisting of:
lT
 he shared project mission What is

the fundamental purpose?

lM
 easure objectives and success What

are we aiming to achieve and how can

we measure our performance?
lP
 roject imperatives What is essential
for the project to be a success?
lC
 urrent situation What is happening in
the business? Why is the project needed?
lA
 ssumptions What have we assumed?
lC
 onstraints What limiting factors do
we need to account for?
lR
 isks What factors could have a
negative impact on this project?

may 2014 79

FeatureS Second feature

Ideally, youll have a fair amount of
information already from your early
discussions in the sales stage so prepopulating will help prompt discussion
and speed the process up. Encourage
your client to stick it up on their wall so
its always front of mind and not lost in
a larger document somewhere. Itll also
be a constant referral point for both sides
if and when a stakeholder attempts to
sway the project in the wrong direction
or take you off brief. We all know that can
happen occasionally.

Cut the jargon

I was once introduced in a meeting like
this: This is our UX director, Tom,
hell be responsible for defining the
UX and IA and will be leading the UAT
right through to deployment, to which
the client asked, Sorry, what is it you
do? For the most people reading this,
my introduction makes perfect sense.
However, the majority of people you are
working for are not web professionals.
In that situation the client was
honest enough to admit they had no
idea what any of those things meant,
forcing us to re-introduce my role and
in what capacity I would be working
with them. Unfortunately, not every
client will have the confidence to alert
you at such an early stage and may
fudge their way through a meeting, not
wishing to draw attention to their lack of

Above Beware! Jargon can add confusion to a project

Right Running informal drop-in sessions allows clients to
stay up-to-date with project developments

80

may 2014

knowledge. This will undoubtedly cause

both parties problems along the way as
misunderstanding gradually creeps into
the relationship.
Try to avoid using industry jargon
as much as possible. Despite what you
may think, using jargon doesnt make
you appear smarter to your clients. As
David Ogilvy once said, Our business is
infested with idiots who try to impress by
using pretentious jargon.

approved designs and, to be fair, unless

it was clearly explained at the time, its a
justified comment to receive.

Dont leave your

clients behind
Its all well and good kicking things
off the right way but what happens
once the project is in full flow? This
can sometimes be the most concerning
time for clients as there can be long

A good way of keeping clients on board

is to invite them into your studio space
at a few key points during the project
Rather than talking about IA, describe
the process in everyday terms, find a
suitable analogy that helps the client
draw a picture in their heads or better
still show them real examples of previous
work. Explain the purpose of this
phase of work, why its required, whats
involved, and benefits it provides.
Removing the ambiguity from crucial
terms you use will also ensure a smoother
ride. Weve all heard the dreaded, I
didnt know what sign off meant, weeks
after youve coded up your previously

periods of time in-between meetings and

presentations without any updates.
A good way of keeping them on board is
to invite them into your studio space at a
few key points during the projects main
production phase. These should be fairly
informal sessions where one or two of the
clients project team drop in and review
work in progress. They will usually find
this rewarding, seeing you in action, and
its a great opportunity for them to chip
in with their views whilst youre still
developing the solution.

Second feature

Clients view Drop-in sessions give the client the opportunity to offer their views on a project while youre still developing the solution

drop in sessions
If you do decide to invite clients into your
office at key points in the development of
the project, try doing the following to get
the most from client drop-in sessions:

Demonstrate the creative steps

youve undertaken so far by showing
the client examples of any sketches,
wireframes, designs prototypes youve
worked on.

Introduce different members of the

team who have been involved in
the project at various levels, such as
developers, designers and animators.
This will help the client understand the
combined skill sets that are utilised
throughout a project and create a
connection with the wider team.

Use the time to have an informal catch

up with the client about any concerns
or issues they may have that havent
been shared in more formal situations.
This can work to your advantage in
overcoming problems early.

Take them for lunch or a beer after. If

you can spare the time and you think
theyre worth it, its always good to offer
a bit of extra love.

Be prepared to adjust
Hopefully what Ive illustrated here is
that theres not an exact approach that
works for all. You need to invest the time
to understand your clients knowledge
level, ways of working and preferences
and then mould your approach to the
relationship management around them.

A great way to assess your approach along

the way is to have a few informal calls
on a one-to-one level with your client
to gain feedback on your presentations,
workshops, meetings, webinars and
conference calls. This will enable you to
learn and make any adjustments to your
methods as you go.

Dont forget to plan

your next journey
Of course the fundamental point to
all this is that you build a lasting
relationship with your clients and one
that should result in further work. If
youve delivered great work, your clients
happy and youve taken them along for
the ride with you, then youll be in a
much better position to start planting the
seeds for your next journey together.

things to remember
Here are some additional top tips to
ensure a smooth client relationship.
If you have concerns early on over the level
of hand-holding a client will require throughout
a project, its well worth factoring this into your
project and account management estimates in
order to avoid heavy over run on this time.

After presenting your project process, leave a

printed version in the clients hands so they can
take it away and review in their own time.
At the start of each presentation or key
meeting you have with your client it can be
helpful to plot whereabouts you are in the
overall creative process. Briefly recap the stages

youve completed and what follows next. This

will help provide them with context.
Taking the time to walk a client through some
of your thinking and creative processes during a
drop-in session will often prove beneficial in the
long run, especially if youre being challenged by
other stakeholders in later presentations.

may 2014 81

Brendan Dawes

New York
20.06.14

Ethan Marcotte

Register today!
Jenn Lukas

DAVE SHEA

Price: $375

NICOLE SULLIVAN

Brendan Dawes, Jenn Lukas,

Ethan Marcotte, Karen McGrane
Dave Shea, Nicole Sullivan
and eight other great speakers

Carl Smith

TICKETS ON SALE NOW! Register at

www.generateconf.com

Were
back in
London too
26 September 2014
Grand Connaught Rooms

Follow @netmag for details

Tips, tricks
& techniques

this month Featuring...

84

98

Slash design/build time 

84

create a cloud icon 

90

translate design details 

94

Dan Nisbet says theres a technique thats

gaining traction to slash design-build time

Fabio Benedetti takes a look at how easy it

is to create an icon with Adobe Fireworks

Tim Hettler explains how Sass can bridge

communication gaps and translate designs

Desktop

Mobile/tablet

104

HEAD-TO-HEAD

96

master openType 

98

Mark Dalgleish takes a closer look at Grunt

and Gulp, two JavaScript build tools

Jason Pamental explains how to add web

typography delight with OpenType features

Standards

Tomomi Imura discusses touch-first

development using pointer events

103

get started with Pixi.js 

104

Yeoman generators 

108

Accessibility

114

Mat Groves explains how to use 2D

renderer Pixi.js to deliver interactive content

Vitaly Kondratiev explains how to write

custom generators for multi-site projects

Lonie Watson introduces aria-controls to

create relationships between elements

Browser support

Exclusive videos

We feel its important to inform

our readers which browsers the
technologies covered in our tutorials
work with. Our browser support
info is inspired by @andismiths
excellent When Can I Use web
widget (andismith.github.io/caniusewidget). It explains from which
version of each browser the
features discussed are supported.

Look out for the video icon

throughout the tutorials. This
issue, four of the authors have
created exclusive screencasts to
complement their tutorials and
enhance your learning. From
Fabio Benedettis cloud icon to
Jason Pamentals use of
OpenType, follow the links to
view the video screencasts.

may 2014

83

PROJECTS RWD

A b o u t t he a u t h o r

Dan Nisbe t
w: www.think.eu
t: @thedistricts
areas of expertise:
Visual design, CSS,
JavaScript
q: whats the worst
youve ever screwed up
at work?
a: the tea round. Its
considered a matter of
life and death in
our studio

RwD

REM units
Desktop

Mobile/tablet

10

3.6

2.1

11.6

32

26

84

may 2014

Slash design/build time

with proportional RWD
Dan Nisbet says theres a technique thats gaining traction, that allows
us to slash our design-build overhead. The secret: the humble em
No matter how you work, implementing the
principles of responsive web design (RWD) on a
large, complex project can be tricky. Like it or not,
attaining the hallowed ground of multi-device,
cross-platform layouts has a tangible overhead.
The more breakpoints and grid changes
your content and framework dictate, the more
complicated and time-consuming it becomes to
maintain a project. At its worst, an elegant start can
descend into a nightmare of specificity and confused
overriding declarations. Potentially impacting your
site performance with bloated CSS and an increased
page load.
Expanding on already well-documented responsive
techniques, well look to form a predicable pattern

of responsive scaling, which can result in cleaner,

lighter CSS and increased maintainability.
Combining an em-based layout and typography
with flexible widths, we can serve up consistent
large screen designs in which all elements both take
full advantage of available screen real-estate and
resolution. Change the layout once and you can be
quietly confident that the change has been reflected
throughout all of your breakpoints, and all controlled
by a single CSS declaration. Sound good to you? Lets
get started.

Dealing with the screen

The crux of any responsive site is in the definition
how major and minor breakpoints allow a flexible

RWD
grid to collapse, or equally, expand. No matter
your preferred workflow, producing visuals with a
modular style guide or designing in browser, its the
viewport width and its effect on our content that
should drive our design decisions.
But the viewport width isnt the end of it. We also
have to contend with a multitude of physical screen
sizes with differing resolutions. Your content can
both be magnified and reduced depending on the
display. It can have a marked effect on the legibility
of your content and effectiveness of your layout.
For example, typography set to look comfortable
on a large display will be totally inappropriate for a
smaller device.
This isnt a new problem. In fact, screen resolution
has always been a limiting factor in how weve
designed websites. Remember the 960 grid, or
designing for 760 before that? RWDs flexible

Screen resolution has

always been a limiting
factor in how weve
designed websites
approach to layout has helped us negotiate this
limitation. Yet, it can still hold some challenges and,
surprisingly, an opportunity.

Proportional thinking
In many ways, responsive typography has already
gone some way in addressing our concern. Its
common to encounter a site where headings and copy
reduce in size as the screen real estate tightens.
While triggered by a narrowing viewport, the text
can also be seen as applying appropriate scaling
for the screen resolution. It becomes acceptable

focus on

Size matters
As craftsmen and makers of websites, we can often be found
struggling to resist the urge to resize our browser, watching
as our breakpoints work their magic. Were all guilty of it and, as a
basic smoke test, it gets us through.
But by only assessing the effectiveness of our layouts by
viewport size, were doing a disservice to people using our website.
We ignore how differing displays can have physical implications,
how the context of use and accessibility functions can impact the
sites legibility and browsing experience. Nothing can truly match
testing your layouts on real devices. You are far more likely to find
and resolve issues that you may not otherwise foresee.
Apart from screen resolution, the physical display size can have
a large bearing on our typography and layout. Its generally true
that the larger the screen, the greater the comfortable viewing
distance. Consider the distance you maintain when working on a
laptop, compared to a watching your state-of-the-art in-home
cinema. Switching the displays at their respective distances would
have you struggling to use both. As it turns out, there is already a
standard in place that suggests we are most comfortable viewing
screens at around a 30-degree angle.
But this presents us with a problem. Given that perspective
will reduce the perceived size of something at greater distances,
our text and interface could be wildly off. Ideally we require our
layouts to be perspectively-proportional with our viewing distance.
Reflowing our content based on the viewport width would simply
not be enough. By implementing proportional scaling and defining
a scale factor above 100 per cent enables us to enlarge our layout
and type to compensate, with little to no extra cost.
For further reading, try Life beyond 960px (webdesign.tutsplus.
com/articles/general/life-beyond-960px-designing-for-large-screens)
and Responsive Typography: The Basics (ia.net/blog/responsivetypography-the-basics).

Marked effect Differing screen resolutions can have a marked effect on

both the layout and legibility of your content

may 2014 85

PROJECTS RWD

focus on

The humble em
Ems: the flexible poster boy of responsive web design. You
may have first come in contact with them as units of
measurement in your stylesheets, but, satisfyingly, their humble
beginnings can be found in the early days of the printing press.
Its perfectly acceptable to use them, safe in the knowledge that
they are font-relative and will flex with our typography. However, it
can be helpful to understand what the basic em unit represents. To
do that, we need to brush up on a little history.
When the printing press came about, the faces of individual
letters were cast on a solid body of metal. Stacked next to each
other, the body would provide padding around each letter, creating
a word, a sentence and, when mixed with other elements, an entire
page. In many typefaces, a capital M was cast on a body roughly
equal in both width and height (this height is also known as the
point-size). This square was termed as an em, which can be read as
equal-to-M and in modern typography is known as the Em-box.
Interestingly, ems have a narrower form termed an en, which is
half the size of an em unit. It didnt make the CSS specification, but
its legacy can still be seen in the en-dash.
Early em units were predominately used as a horizontal
measurement. But on our screens, letters are rarely equally spaced.
Letter kerning, or letter-spacing in CSS, mean that an em unit
equates to a vertical font measurement. One defined by the vertical
space needed for any given letter. When we increase the point-size
of a font by a percentage or otherwise. The vertical space required
by the Em-box also increases, resulting in our relative em unit being
equal to a larger value then it was before.
For further information, try reading The incredible em and
elastic layouts with CSS (v1.jontangerine.com/log/2007/09/theincredible-em-and-elastic-layouts-with-css) and watch More Perfect
Typography (vimeo.com/17079380).

to reduce the font size because the reduction is

countered, in part, by a magnification at smaller
resolutions. The most common and perhaps most
inefficient approach to responsive typography is
the simple styling and then restyling of elements
at individual breakpoints. Client-side scripts are
also often used to dynamically resize headings,
maximising their size to fit within the available
space, FitText (fittextjs.com) and slabText (github.com/
freqDec/slabText) being some of the more popular
open-source projects. But there is another approach,
a simple yet powerful technique and one that should
capture our interest.

Controlling scale with

relative units
No doubt youve used pixels to size your typography
and layout and why not? Converting a design into
HTML requires a common unit and theres nothing
wrong with using pixels. But there is a drawback.
Pixels are absolute values, ignoring the context of
their environment. (Its often accepted that a single
CSS px equates to a physical screen pixel. In a highdefinition world, thats not always the case.)
Ems are different. Defined as font-relative lengths,
they are directly proportionate to a parent elements
font-size. Defining this as a percentage will scale any
child attributes defined in ems by that factor. Setting
your font-size on the root of your document, you
have a global effect on your typographic proportions.
Lets create a basic document with a HTML fontsize of 100% , with headings set in ems. Now, lower
the HTML font-size to 80% . Everything defined in
ems will scale by 80% . We can better take advantage
of this with the introduction of media queries.
For example:
@media screen and (max-width: 55em) {
html { font-size: 80%; }
}

Equal ems A capital M creates an em-box roughly equal in both width and height
Relative units Typesetting your headings and copy with relative units allows
for a simple, yet powerful approach to responsive typography

86

may 2014

RWD
By simulating different viewport widths, you can get
a feel for how our typography now scales. This can
work both ways, by defining a font-size above 100%
we can also enlarge our text.
@media screen and (min-width: 75em) {
html { font-size: 135%; }
}
A simple premise, but a powerful one. By using this
method you can effectively control an entire sites
typographic sizing with a single CSS declaration,
completely avoiding the need to repeatedly target
individual elements. If your documents vertical
rhythm is composed of relative units, it will also
scale beautifully. Find a live example of this on
CodePen: cdpn.io/eujaA.

Adding a little more structure

As weve seen, defining our typography with
ems can allow us to take full advantage of its
relative properties. But ems are not only valid for
typographical elements, we can use them to define
any CSS measurement and, in doing so, well bind
them into a relational relationship with the root
font-size.

Ems have a more

inheritance-friendly
counterpart in the
form of rems
Sounds good. But if youre not careful, ems can
cause trouble. When nested they can produce
unwanted scaling through inheritance. But ems have
a more inheritance-friendly counterpart in the form
of rems.
A rem functions in the same manner as an em,
with the only difference being that it looks directly
to the root font-size for its relational value. This
works around our inheritance issue and is perfect for
our application.
While rems were broadly supported by leading
browsers around the same time as media queries, for
pre-CSS support, however, we can use px values as a
unit fallback.
Expanding on our previous example, lets add a
little more structure, being sure to define all of our
layout and typography in rems with one exception.
Because of an issue with Safari, well need to define
our media queries in standard ems. You can view the
expanded example on CodePen: cdpn.io/gHqEj.

Define values Use ems and rems to define CSS measurement values, creating a relational relationship

With that in place, the entire layout now scales,

getting smaller as the screen narrows and larger as it
widens. But importantly, it stays in proportion with
both our typography and its surrounding framework.
But, lets be honest, without a flexible grid at its
heart, we are some way off a truly responsive layout.
We need a plan.
We can still achieve our flexible layout in precisely
the same way we would normally approach a
responsive build. We just have to show a little
discipline in where we introduce percentages into the
mix. Its helpful to visualise two separate planes of
effect within our document.

resource
CodePen
demos
Scaling with relative
units: cdpn.io/eujaA.
Adding layout:
cdpn.io/gHqEj
Flexible and
proportionally scaled:
cdpn.io/jLeDC

Plan of attack
The horizontal: anything that makes up the
combined width of the document is defined as a
percentage. This includes the likes of: widths ,
margin , padding , and border-left and right .
The vertical and everything else: specified in rems
and bound to the documents root font-size it should
be our default unit, including: min- and max-width ,
top and bottom relative, and absolute positioning.
Lets put that into action:
html { font-size: 100%; }
h1 { font-size: 2.75rem; }
h2 { font-size: 2.125rem; }
.wrapper {
width: 100%;
min-width: 50rem;
margin: 0 auto;
}
.header {
position: relative;
width: 100%;

may 2014 87

PROJECTS RWD

Default rems

Anything that makes

up the combined
width of the
document should be a
percentage, everything
else should default
to rems

height: 3rem;
}
.header-logo {
position: absolute;
top: 1rem;
left: 6%;
width: 5rem;
padding: 1.3rem 1.5rem;
}
.article {
overflow: hidden;
}
.article-content {
float: left;
width: 56%;
padding: 2rem 6% 4rem;
}
.article-aside {
float: right;
width: 26%;
padding: 1.5rem 5% 3rem 0;
}
.article-figure {
padding: 0 2%;
}
.article-figure > img {
margin: 1.5rem 0 0;
}
.auxiliary-list
{
margin: 0;
padding: 0 0 0 6%;
}
.auxiliary-list > li
{
display: inline-block;
}
.aux-item

{
width: 19%;
margin: 2rem 5.6% 2rem 0;
padding: 3.1rem 0;
}
.footer {
width: 97%;
padding: 3rem 0 0 3%;
}
@media screen and (max-width: 55em) {
html { font-size:80%;}
}
@media screen and (min-width: 65em) {
html { font-size:115% }
}
@media screen and (min-width: 75em) {
html { font-size:135%; }
}

Using a CSS
preprocessor like
Sass can save us a lot
of the heavy lifting
For the sake of brevity, were only dealing with layout
within our example. You can view the complete
styles on CodePen: cdpn.io/jLeDC.
This all seems pretty straightforward, but, with
percentages controlling two aspects of our layout,
it can be a little confusing. So, to be clear, the
percentages that make the documents overall width
are not directly influenced by our root scaling.
By maintaining this separation we can produce
a site that is both flexible and one that can be
proportionally scaled.

In the wild
While these short examples show the basic premise
of what were looking to achieve, its real life
application will often rely on converting a design
comp into styled HTML. For that, well need a
method of expressing pixel measurements in rems.
Luckily for us, this already exists. Its a formula
you should already be familiar with. Its the same
as one we use to find proportional percentages in a
responsive workflow, that is:
target context = result
Because rems are font-relative lengths, our context
is then tied to the root font-size. Assuming a HTML
font-size of 100% equates to 16px , then an example

88

may 2014

RWD
Left By maintaining
two planes of
separation, we can
have a site that both
scales proportionally
and maintains a
flexible structure

measurement of 58px would be 58 divided by 16

equals 3.625 rem. This is also true of converting px
based font-sizes to rem units.
Its completely feasible to work out our rem values
longhand. But that in of itself creates an overhead,
a barrier to working efficiently. Using a CSS preprocessor like Sass can save us a lot of the heavy
lifting. With a simple mixin in place, we can define
all of our measurements in pixels, making our CSS
easier to digest.
$em-root: 16px !default;
@function rem($target, $context: $em-root)
{
@return ($target / $context) * 1rem;
}

efficiencies when working with a larger team. Many

conversations on how the content should reflow
and associated complexities can be reduced. Testing
and QA become easier, as expectations are the same
throughout the large-screen experience. This can
allow us to invest more time in crafting interaction
and our experience as a whole.

taking it too far

Scaling your content has its limitations. Dont use
it to the detriment of your small screen experience.
Proportional RWD can work beautifully with a
mobile first approach. We can look to craft our small
screen experience with the introduction of a major
breakpoint defining a small and large screen layout
each controlled by an independent scaling pattern.

Hidden benefits

Conclusion

Often overlooked, the browser zoom function allows

users to control the magnification of a site. It forms
an important part of a suite of accessibility tools for
people with visual impairments. Untested, it can
cause layouts to behave unexpectedly, potentially
impacting site navigation. With our scaling patterns
in place, we find ourselves replicating this native
behaviour and testing against it becomes part and
parcel of our workflow.
Scaling also helps us to present a more consistent
experience over a wider number of screens.
This consistency can help to find workflow

A simple execution, combining flexible widths

with proportional scaling, can deliver a number
of benefits. It achieves our responsive goals while
presenting consistent, predicable layouts to our
audience and reduces the need to re-flow our
content. By echoing the browser native scaling
function, we inherently test our designs against an
undervalued accessibility feature.
On larger projects, the scaling of layouts reduces
the need for redundant CSS, and allows for a more
efficient team workflow, slashing our design and
build time.

video
Watch an exclusive
screencast of this
tutorial created
by the author:
netm.ag/tut1-253

may 2014 89

PROJECTS Fireworks

A b o u t t he a u t h o r

Fabio
Benede t t i
w: dribbble.com/cocorino
t: @cocorino
areas of expertise:
visual design, branding
iIlustration, UI design
& icon design
q: whats the worst
youve ever screwed up
at work?
a: I designed a cover for
a catalogue to be screen
printed, I messed up
the pagination and
swapped the front cover
with the back cover,
and had to reprint more
than 100 covers myself

fireworks

Create a Cloud
Icon in Fireworks

Fabio Benedetti takes a look at how easy it is to create a bespoke

vector-based icon with screen design tool Adobe Fireworks

video
Watch an exclusive
screencast of this
tutorial created by
the author:
netm.ag/tut2-252

90

may 2014

One of the most fascinating fields in visual

design is icon design. Nowadays were invaded
and bombarded by icons everywhere: on products,
printed materials, packaging, the web and overall in
software. Being an icon designer presents some
challenges, of course, but its also a very interesting
exercise that allows you to learn new things and
develop greater attention for details. Icons can
communicate a message very quickly, occasionally in
a way that is quicker than words. Most importantly,
if well designed, they can be understood by everyone,
no matter their language or culture. In this tutorial
were going to explore how to design a cloud icon for
a cloud-based software to share and upload files.

In recent years, the business in the cloud has

exploded (in a positive way!), so if youre working
in visual design, its very likely youll stumble upon
a task that entails designing an icon with some
sort of cloud element to it. For this task, well use
Adobe Fireworks, a vector-based tool that supports
raster graphics as well. From web design, UI design
icon design or even wireframing, Fireworks offers
speed and flexibility superior to more expensive
software. Even though Adobe decided to stop further
development on Fireworks, many designers are still
using it because of its straightforward interface,
accuracy and capacity to achieve pixel-perfect results
in a relatively short time.

Fireworks
When designing an icon, I
generally start sketching out
ideas on a notepad in order to have
a clearer picture of where Im
heading to. However, a cloud icon is
something that has strong circular
geometry, so if using pen and paper
isnt your thing, you can start by
opening Fireworks, or your favourite
vector tool.
The main part of this exercise
is based on circular shapes and a
strong rational. Instead of Photoshop, for example, Fireworks is very
object-oriented rather than layer
based, so dont worry too much
about naming your layers. You can
drag the object onto the canvas
directly by selecting them with the
Pointer tool ( V ).

01

Set up your canvas to 800px

wide and 1000px high. Give
it a light grey background (for
example, #CCCCCC ) and select the
Ellipse tool ( U ).
(The sizes of the different circles
were going to design are purposely
chosen, but well come back to this
in step three.)
With the Ellipse tool selected,
press shift and draw a perfect
circle of 180px for 180px . Copy
and paste it ( Cmd+C , Cmd+V ) and
scale the new circle to the size of
291px per 291px .
In order to do that, select the
shape, use the shortcut

02

Getting started Once youve opened your favourite vector tool, create two perfect circles. The sizes follow design rules of the golden ratio

Cmd+Shift+T and then, from the

numerical transform window, select
the Resize option.
The two circles weve
designed follow a common
rule found in mathematics and in
nature thats generally called the
golden ratio, based on Fibonaccis
theory. The golden ratio identifies
the relationship between two
proportions. These two circles
follow a ratio (called the Fibonacci
ratio) of 1:1.61. That means that, if

03

the first circle is 180px , we can

multiply that for 1.61 and get the
other diameter for the circle, which
is approximately 290px .
In design in general, the use of
the golden ratio is pretty common
because it creates pleasing compositions to the eye.
Copy the smaller circle
( 180px ) and move it to the
left until the first half of the circle
intersects the square in the exact
middle. To do that you can either
copy and paste the shape in place
( Cmd+C , Cmd+V ) or select the
circle pressing alt on the keyboard
and dragging it to the right. This
command will duplicate the shape.
If you want to be even more precise,
you can select the shape, press
alt+shift and move the shape. With
this command the circle will move
on a fixed horizontal axis without
moving up and down.

04

expert tip

Why
Fireworks?
We dont know why
Adobe has decided to stop
making Fireworks after
version CS6. What we do
know is that Fireworks
lets you achieve pixelperfection results in an
amazingly short time,
keeping your source file
small and tidy. One of the
most interesting features
of Fireworks is that, by
default, every pixel is
snapped onto the grid. If
you scale shapes and you
need to get rid of half a
pixel, press Cmd+K to
solve any issues.

Our cloud is starting to take

shape. For now, we have an
outline view. If youre an Illustrator
user, you can see how Fireworks
behaves in a similar manner but

05

Intersecting shapes With three intersecting circles, the shape of the cloud starts to emerge

may 2014 91

PROJECTS Fireworks
also how quickly you can build
shapes. At this stage, copy the
shapes on the left-hand side of the
big circle, reflect them and position
them to the right of the circle in
order to create a symmetrical
shape. To do that, select the shapes
on the left, right click and from the
contextual menu, select Transform
> Flip Horizontal . Then move them
to the right to create the backbone
of the cloud.
Now you can start to get rid
of the unwanted shapes
(such as the circles on the left-hand
side and the right-hand side and the
squares). Select them with the
direct sub-section tool ( A ) and
press delete . Otherwise, you can
do that from the Layer panel.
The beauty of Fireworks is that
you can select, copy, paste and deal
directly with objects rather than
focusing to much on layers. After
deleting the unnecessary shapes,
fill the three remained shapes with
a solid light grey colour (#BBBBBB).

06

Were now going to use one

of the most important panels
in Fireworks: the Path panel. From
the toolbar window select Path
and the path panel will appear. With
the sub-selection tool ( A ) select all
three circular shapes. Make sure
you use the sub-selection tool and
that the three circles are not
grouped, otherwise the Union
Shape tool from Path will not work.
Once you have the three shapes
selected, click on the Union Paths
icon and the shapes will merge into
a single one. This is very similar to

07

Outline shape Using the Property panel, set the fill to null or transparent and outline the stroke. This creates a simple and light outline shape

the Pathfinder tool in Illustrator, but

has some nice features, which well
explore further. You should now
have one shape on your canvas and
be able to see the anchor points.
We have a basic shape of a
cloud on the canvas. The job
is now refining the details and make
sure that the icon is meaningful for
our task. Select the Rectangle tool
( U ) and design a rectangular shape
264px x 64px . Position it at the
bottom of the cloud in order to
make the bottom of the cloud a
straight line.
One thing to remember is that,
in Fireworks, everything snaps to
pixel by default. Theres no need to

08

activate the snap to pixel function

as in Photoshop. On the other hand,
if youre resizing a vector shape and
you need tot get rid of half pixels,
just press Cmd+K and this will fix
the issue.

command underneath the stroke

size in the property panel. You
should have your cloud shape now
outlined in black. With the pen tool
( P ), remove unnecessary anchor
points if you need to.

Now some fun for the next

part. We want the icon to be
simple and light. Therefore, were
going to use an outline shape
instead of a full shape. In the
Property panel, set the fill to null or
transparent and the outline stroke
to 30px black. Set the value of the
Edge to 3 to make the hardness of
the stroke a bit softer and appealing
to the eye. You should also align the
stroke to outside using the dedicate

Some tweaks to the icon are

needed in order to add
another element. Ideally, add an
arrow pointing upwards to
represent uploading files into the
cloud. To do that we need to modify
the stroke. Here, we explore one of
the most interesting features of the
Path panel in Fireworks. Select the
shape and, from the Path panel,
click on the icon resembling 2S
(called Convert Strokes to Fills ). It

09

10

resources

Extensions and Path panel

Union shape We use the Union Paths tool

92

may 2014

Over the years, developers have created some super cool extensions to make Fireworks even more powerful. One of the best is Path Panel. You can download the
extensions at netm.ag/pathpanel-253. Smart Resize is another interesting one, and
available at netm.ag/smartresize-253. Smashing Magazine also features a wide section
dedicated to Fireworks: netm.ag/smashingfireworks-253.

Fireworks
expert tip

Gradients
The Gradient panel will
help you achieve great
results in icon designs.
Offering different types
of gradients, from Linear
to Radial and Ripples, this
is a unique screen tool.
The Ellipse gradient in is
very good. If you use these
gradients in combination with the blending
modes (such as Multiply,
Average, Screen), you can
achieve unexpected and
wonderful results in your
screen design.

Uploading files The arrow indicates the uploading of files to the cloud. The Punch Path tool creates space at the bottom of the cloud

will expand the stroke to a solid

shape and may take a bit of
memory, so be patient. Its
something similar to the Expand
function in Illustrator, but a little
more straightforward to achieve.
We need to make some
space for the arrow. To do
that, lets redraw a circle of 180px
with the Ellipse tool. Position the
circle in the middle of the bottom of
the cloud. You can use the Align
panel to be 100 per cent precise.
From Window, choose Align .
Once the shape has been aligned
in the middle, were going to go back
to our Path panel and use the Punch
Path tool.

11

The shape we have now has

to be refined as we dont
want to leave straight or rough
edges where the gap has been
opened in the cloud bottom line.
Lets draw two circles both of
30px x 30px and position them at
the edges where the circle shape
has been cut off in order to make
the cloud silhouette smooth and

12

neat. Once thats done, lets merge

them with the cloud shape using the
Path panel tool Union Path.
Before going on with the
arrow, lets have a look a the
geometry of the icon so far.
Everything should be well-aligned
and smooth. The golden ratio we
used is definitely making the final
product pleasing to the eye.

13

Now that the shape of the

arrow is done, lets merge all
the vectors together and apply a
gradient to make the cloud icon
more interesting. Apply a linear
gradient that goes from top to
bottom ( #0085B2 to #0059B2 ) to
have a shade of blue that reminds
us of the tone of a clear sky.

16

17

Lets check the geometry

again. Have a look at how

everything is perfectly aligned and

how the shape is crafted with logic
and consistency.
Now that the icon is ready,
you can place it everywhere
you like. You can use it as a splash
screen element, on a login form, or
even on a desktop, or in online
stores. As its vector-based, you can
scale it up and down without losing
any details. Enjoy!

18

Lets have a closer look at the

arrow. With the rectangle
tool, draw a vertical rectangular
shape 36px wide and 200px high.
Then from the Property panel, set
the roundness to 100% .

14

We can now finish up the

shape of the arrow pointing
upwards. Make sure the bottom of
the arrow is aligned with the edge
of the cloud.
Design a rectangular shape
35px x 120px and rotate it 45
degrees. Align it to the top of the
base of the arrow. Copy and paste
it and flip it horizontally to create a
rounded arrow shape.

15

Icon ready Once the shape of the arrow is complete, all the vectors are merged together

may 2014 93

PROJECTS Sass

A b o u t t he a u t h o r

T im He t t l er
w: www.timhettler.com
t: @timhettler
areas of expertise:
HTML, CSS & Sass,
JavaScript, Grunt
q: whats the worst
youve ever screwed up
at work?
a: At my first job, I
forgot a semi-colon in
a line of JavaScript and
completely broke one of
the largest sites on the
internet for about
20 minutes

SASs

Translating Design
Details With Sass

Tim Hettler explains how Sass can help bridge the communication gap

between designers and developers, and translate designs from Photoshop

As much as I love CSS, it has trouble keeping up
with the complex sites we build today. It cant
do calculations, loop through a series of items, or
even store values for later use, all of which are
important to have when working on large site. Add in
multiple developers to a project and it becomes
almost impossible to maintain the visual consistency
of a site as it grows larger.
Luckily, Sass, the popular CSS extension language,
provides everything we need to manage the visuals
of a complex site and faithfully create subtle design
details that are too difficult or time-consuming to do
with CSS.

Designers are from Venus

RESOURCE
talk slides
See the slides from
Tim Hettlers talk,
Sweating the Small
Stuff: Recreating
Subtle Design Details
Using Sass, which
this tutorial is based
on: timhettler.github.io/
sweating-small-stuff

94

may 2014

One reason visual inconsistencies get introduced

during the development process is that designers
and developers have different ways to talk about
the same thing. As a developer, I would love it if a
designer told me, That headline needs to be 28px
and the colour is #cdff03 . But that is, unfortunately,
not how most humans talk. They say things like
The font size we use for every headline and use
fancy colour terms like electric green, and the
developer translates how humans talk to what CSS
requires. Every time this translation is done by hand,
it introduces an opportunity for human error. A
better way to handle this is to store these values as
Sass variables:

$font-size--headline: 28px;
$color--electric-green: #cdff03;
By using variables, designers and developers can
discuss the details of a project in equal terms.

Speaking the same language

A bigger problem is that designers have the ability
to do things in graphics programs like Photoshop
that have no CSS equivalent. The developer has
to guess how to represent it on the web. Avoiding
translation entirely is the best way to reduce errors.
Sass introduces a number of functions that allow you
to adjust the colour of an element in the same way its
done in Photoshop. If the hover colour of a button is
achieved in Photoshop by darkening the base colour
by 20% , you can express that in Sass using the
darken function and create a mixin that takes the
background-color as a parameter:
@mixin button-color($color--bg) {

background-color: $color--bg;

&:hover {
background-color: darken($color--bg, 20%);
}
}
The relationship between base and hover colour is
now clearly defined in the code, making Sass self-

Sass
documenting in a way that isnt possible with CSS. By
abstracting the code into a reusable mixin, we ensure
this relationship is applied to every button we create.

Automating designer intent

An issue I ran into recently was determining when
to use a light or dark text colour. In order to ensure
enough contrast for proper readability, a light text
colour should be used against dark backgrounds,
and vice-versa. Typically, a designer will hand me a
large matrix of every background colour and which
text colour should accompany it. I created a function
that looks at the lightness value of a colour and
returns the light colour if its less than 50% , and the
dark colour otherwise. Despite having faith in my
function, certain pairings werent what I would have
chosen by hand. After some research, I discovered
the human eye is actually more sensitive to certain
colours. Knowing that, I wrote a new function to take
this bias into account (find it on GitHub: github.com/
timhettler/compass-yiq-color-contrast):

Sass makes it easier to

create complex,
detailed sites without
losing any visual details
@function yiq-contrast-color($color, $dark, $light) {

$red: red($color);

$green: green($color);

$blue: blue($color);

$yiq: (($red*299)+($green*587)+($blue*114))/1000;

@return if($yiq < 128, $light, $dark);
}
The colour is translated from RGB to the YIQ colour
space, which weights the parts of a colour according
to their impact on our perception. The result is
a value between 0 and 255 that represents the
overall brightness of the colour. Using this function,
the contrast pairs that were produced matched up
exactly with what the designer wanted. We may not
be able to completely replace designers intuition, but
in this case weve used Sass to turn a designers gut
feeling into a repeatable pattern.

Drop Shadow to box-shadow

Sass can also help you translate complex layer
effects. Take the drop shadow effect and its CSS
counter-part box-shadow . In Photoshop, a drop
shadow is expressed with an angle, distance,
spread and size. However, a box-shadow in CSS is

represented by an x- and y-offset , blur-radius and

spread-radius . I dont mean to spring a trigonometry
question on you, but imagine our box-shadow is
a right triangle. Since we know the values of the
angle and hypotenuse (the distance), how would you
determine the length of the opposite and adjacent
sides of the triangle (the x- and y-offset )? Stumped?
Its okay, I didnt remember how to do it either.
Luckily, we can use trigonometric functions that
are provided in Compass, a popular CSS authoring
framework that extends Sasss functionality, to do the
maths for us:

video
Watch an exclusive
screencast of this
tutorial created by
the author:
netm.ag/tut2-253

$x-offset: cos($angle) * $distance;

$y-offset: sin($angle) * $distance;
We no longer have to guess at these values since we
have a formula to convert them for us. Translating
the blur and spread of our box-shadow from their
Photoshop counterparts is tricky. In CSS, the spread
is added to the blur to determine the total shadow
size. However, the Photoshop size value represents
the total length of the shadow, and the spread
indicates how much of the shadow is a solid colour.
Again, we can create a simple formula to convert from
the Photoshop values to the CSS box-shadow syntax:
$css-spread: $size * $spread/100;
$blur: ($size - $css-spread);
Now that weve converted the Photoshop values
to the four values required for a CSS box-shadow ,
we have a pixel-perfect representation of the drop
shadow. Grady Kuhnline has packaged this entire
process into a Compass extension (github.com/
heygrady/compass-photoshop-drop-shadow). Using his
mixin, you can convert a drop shadow into a boxshadow with one line of code:
// Sass
@include photoshop-drop-shadow(120, 5px, 0, 5px,
rgba(#000, 0.75));
// CSS
box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.75) ;
By automating this translation, we can have full
confidence that what is coded in CSS is exactly what
the designer intended in Photoshop, and none of the
subtle design details will be lost.

More than just mixins

Sass gives us the ability to bridge the communication
gap between designers and developers, making it
easier to collaborate and to create complex, detailed
sites without losing any visual details.

may 2014 95

PROJECTS Head-to-head

HEAD-TO-HEAD

A b o u t t he a u t h o r

Ma rk
Da l gl eish
w: markdalgleish.com
t: @markdalgleish
areas of expertise:
JavaScript, frontend
development and
Node.js

Grunt vs Gulp

Mark Dalgleish takes a closer look at Grunt

and Gulp, two competing JavaScript build tools
gruntjs.com

gulpjs.com

Grunt is a Node.js-based task runner, most commonly

used for frontend projects.

Gulp is a lightweight build tool, using Nodes stream

API to speed up and simplify complex build processes.

Philosophy
Grunt builds are mostly made up of JSON-like
configuration rather than code. Instead of writing a
programmatic build script, you supply options to a
series of pre-packaged build tasks inside a Gruntfile.

Gulp takes the opposite approach, favouring code over

configuration. There are only a few simple methods
you need to create a working Gulpfile. Due to its
streaming API, builds are extremely fast.

plug-ins
Grunt has a large, growing community surrounding it.
There are currently almost 2,300 plug-ins available,
supporting common tasks like static asset compilation
and deployment.

Fact file
ALTERNATIVE
Many small JavaScript
projects leverage npms
scripts functionality
to create an extremely
lean build process. This
approach is particularly
popular in the Node
community where
the more minimal
solutions are often the
most popular.

DEPENDENCIES
Grunt and Gulp require
Node.js (nodejs.org).

INSTALLATION
Grunt
npm install -g grunt-cli
Gulp
npm install -g gulp

96

may 2014

Gulp still has a relatively young ecosystem, but there

are already around 300 plug-ins that have been
published to npm. A core benefit of Gulps streaming
API is that plug-ins are small and easily connectable.

speed
Tasks run synchronously by default. Each task is
individually configured to interact with the file system.
This I/O-heavy approach can cause performance
degradation if your project grows too large. Grunt
plug-ins try to improve the situation, but its not ideal.

Gulp plug-ins usually just transform virtual files in

memory, making them much faster than their Grunt
counterparts. The larger and more complicated your
build process becomes, the more youll appreciate
Gulps superior performance.

scaffolding
Yeoman, a very popular JavaScript scaffolding tool,
has first-class support for Grunt. The vast majority
of Yeoman generators create a project that includes a
Gruntfile. There is even a Yeoman generator the can
scaffold Grunt plug-ins.

The Yeoman team are prototyping the use of Gulp in

their official generators. Yeoman was instrumental in
the creation of many Grunt plug-ins, so this process is
likely to be repeated with Gulp. Just like Grunt, theres
a generator that can scaffold boilerplate Gulp plug-ins.

verdict
The Grunt team is planning to implement similar virtual file transformations to Gulp, so the
choice between the two will increasingly depend on whether you prefer configuration or
code for your build process. Unless your build is modified by frontend designers with little
JavaScript experience, Gulp is likely to be a much more popular choice in the long run.

awards
2014 VOTING ENDS
24 MARCH

THE CATEGORIES
Game Changer of the Year Best New Web Technology Open Source Project of the Year
App of the Year Best Online Portfolio Side Project of the Year Demo of the Year
Best Collaborative Project Redesign of the Year Podcast of the Year
Conference Talk of the Year Grassroots Event of the Year Entrepreneur of the Year
Emerging Talent of the Year Young Developer of the Year Young Designer of the Year
Developer of the Year Designer of the Year Outstanding Contribution
Team of the Year New Agency of the Year Agency of the Year

SHORTLIST ANNOUNCED 31 MARCH

www.thenetawards.com

PROJECTS Typography

A b o u t t he a u t h o r

Jas on
Pa men ta l
w: hwdesignco.com
t: @jpamental
areas of expertise:
web strategy and
design, responsive web
design, web typography,
Drupal
q: whats the worst
youve ever screwed up
at work?
a: Wait, what database
did I just delete? Oh
_______

typography

Master OpenType

Jason Pamental explains how to add web typography delight with

OpenType features for better kerning, proper ligatures and numerals

resource
sample code
Download a sample
page that includes
loads of tips and tricks
you can try in your
own projects: www.
hwdesignco.com/otf/
opentypedemo.zip

98

may 2014

We can all agree that embeddable web fonts are

one of the biggest advances for design on the
web since its inception, particularly in the age of
responsive design. With so many elements that move
and change from one screen size to the next, great
typography and distinct typefaces are one of the only
constants that work equally well on every device
(except devices using the Opera Mini browser).
Just adding web fonts is only part of the story.
Words may have meaning, but letters have emotion.
OpenType (OT) is a cross-platform font file format
developed by Adobe and Microsoft. Its features
add greater depth and variety by expanding the
character sets of OT-enabled typefaces to include
such typographic delights as ligatures, swashes,
stylistic alternates and even real kerning. Expand
your emotional vocabulary by exploring all these
marvellous features; theres no reason to stop with
just the typeface.

Just what are all these typographic beauties? Well,

for starters there are ligatures (including standard,
discretionary and contextual varieties). These are
combinations of characters that historically tend
to blend together when drawn or cut, such as ff, ffl,
fi or fj. Technically, this is when the hood of the f
is combined with the tittle of the lower case i or j,
but you can see how it could become hard to keep a
straight face when discussing the topic. One of my
personal favourites is the less common ligature for
ct and st as seen in Adobe Caslon Pro, among others.
Then there are swashes, like those found in Fairbank
(shown in use from Fonts.com): lovely swoops and
embellishments that add a truly distinct character
when put to good use.
Other common features include stylistic alternates
and various options for numerals, including tabular
figures (evenly spaced and perfect for financial
tables), fractions, oldstyle figures (with both

Typography
ascenders and descenders to fit well with upper and
lower case letters) and of course, kerning tables.
(That alone may be worth the price of admission,
as Ive always felt that browsers tend to do a fairly
middling job of spacing type on screen.)

resources

A bit of backstory
These characters and features have existed for
centuries, but only recently have they become usable
on the web. Ligatures were first seen in Sumerian
manuscripts and many subsequent forms of writing
and calligraphy. With the advent of movable type,
ligatures were used to improve letterspacing to allow
spacing tighter than otherwise separate blocks of
type would allow. Many of these features fell out of
favour with the advent of photo- and then computerbased typesetting. Its only in recent years that
better font formats have made them available again,
and use of them has increased.
With the arrival of OpenType (or more correctly
Open Font Format) on the desktop and its derivative

There finally exists

a pair of font formats
that can be used
nearly universally
Web Open Font Format (WOFF), for use on the web,
there finally exists a pair of font formats that can
be used nearly universally. The significance here
is these formats support a much wider array of
characters and features for finer typographic control
than ever before. As in all things web, use of these
features is supported at varying levels in all the
major browsers, but its prevalent enough now to be
worth serious consideration and use.
The CSS required has been around for a few years,
and is part of the CSS3 type module. Unfortunately,

opentype support
Here are a number of vendors and services, with some notes
on their use of OpenType.
Fontdeck.com
Fontdeck uses tags to surface typefaces that have OpenType
features enabled (fontdeck.com/typefaces/all/tags/opentype) and
shows you what OpenType features are supported. Very handy.
Fonts.com
Monotypes service allows searching for typefaces by availability
of OpenType features here: www.fonts.com/support/faq/opentypefeatures-tab. It also has an innovative way to include features in
its web interface on assigned selectors, making it unnecessary to
include your own CSS.
Typekit.com
Typekit supports OpenType features on select typefaces. Elliot Jay
Stocks, creative director at Typekit, says it will highlight and utilise
OpenType features to a much greater extent in the near future.
Typography.com
H&FJ also support OpenType features in its typefaces, with some
of the most extensive and fine-grained controls over exactly what
features you want to enable, giving you a bit more control over the
size of the eventual download. See some good documentation from
its user guide: www.typography.com/cloud/user-guide/font-features.
WebINK.com
Extensiss web font service supports OpenType features, and has a
support page listing all of the fonts that support them. Interestingly
you can view a list of all typefaces, and also lists broken down by
feature: helpme.webink.com/customer/portal/articles/346788-webinkfonts-with-opentype-features.

Above In the magenta text, no ligatures are used. Note the awkwardly
antisocial ffl and ffi

may 2014 99

PROJECTS Typography

resources

further reading

its been slow progress to get wide enough support

for the WOFF format, so it follows that browser
implementation and support has evolved slowly as
well. Its worth noting, though, that every major
shipping browser does support OpenType features
(with the exception of Opera Mini). You can check
on how far back that support extends easily on Can I
Use: caniuse.com/#search=woff.
Thankfully, even though support and syntax
vary, tools like Sass can help make it more practical
to give it a try, and if the syntax doesnt work or
the feature is unsupported, the user just ends up
with normal text. Of course, theres always a catch;
enabling OpenType features does increase the file
size, but with care and caching it doesnt have to be a
performance killer.

So why bother?
Design is about communication and people make
judgements about usability based on aesthetics.
So its our duty to pull out all the stops in how
we communicate with our typographic choices.
Furthermore, you must remember we read by
scanning groups of shapes, not individual letters. So
the smoother the flow, and the easier it is to grasp
groups of letters and understand them as words and
phrases, the faster the user will comprehend the
message you are trying to get across, and youll be
doing it with style.

The details, please

There are lots of resources available in print and online to
help you further your understanding of how to make the best
use of OpenType. Here are a few to get you started:
Rich Rutters tool
The co-founder of Fontdeck has put together a tool to play with
OpenType features that allows you to turn various features on and
off. You can test different fonts and view the resulting CSS to boot.
clagnut.com/sandbox/css3

Once you have a font included in your site that has

OpenType features enabled, using them in your CSS
is fairly straightforward. The official CSS3 syntax
looks like this:
p{
font-feature-settings: "liga" 1, "frac" 1;
}
This code would turn on both standard ligatures
and fractions, if those features are available. Due

My Sass mixin
A Sass mixin that allows you to include OpenType features in your
own projects, handling the browser prefixing changes for you.
github.com/jpamental/otfeatures
The Impact of Aesthetics on Attitudes Towards Websites
An article by Jennifer Chen published on Usability.gov.
netm.ag/usability-253
Code samples:
(use Google web fonts and include Sass files as well)
www.hwdesignco.com/otf/opentypedemo.zip

100

may 2014

Above Kerning is one of the most subtle features to illustrate, but its
cumulative can have a profound impact on the readability and aesthetics

Typography

to syntax variations, the actual safer way to include

them would look more like this:
p{
-moz-font-feature-settings : "liga=1", "frac=1";
-moz-font-feature-settings : "liga" 1, "frac" 1;
-webkit-font-feature-settings : "liga" 1, "frac" 1;
-ms-font-feature-settings : "liga=1", "frac=1";
-o-font-feature-settings : "liga" 1, "frac" 1;
font-feature-settings : "liga" 1, "frac" 1;
}

The nice thing about

OpenType features is
they fall back to regular
type all on their own
Yes, Firefox is in here twice. Thats due to a syntax
change somewhere around Firefox 14. Heres a more
complete list of what features exist and how to
reference them:
"c2sc" : small caps from caps
"calt" : contextual alternates
"clig" : contextual ligatures
"dlig" : discretionary ligatures
"hist" : historical character alternatives
"hlig" : historical ligatures
"kern" : enable use of embedded kerning table
"liga" : common ligatures
"nalt" : alternate annotation
"salt" : stylistic alternatives
"smcp" : small caps
"ss01" : alternate stylistic set 1
"ss02" : alternate stylistic set 2
"ss03" : alternate stylistic set 3
"ss04" : alternate stylistic set 4

"ss05" : alternate stylistic set 5

"swsh" : swashes
"zero" : slashed-zero
The following options require a sort of conditional
logic (at least in your own mind), as you can really
only enable one of these pairs at a time:

Above left You can now

skip the character codes
and use a line of CSS
Above right Old-style
figures sit both above and
below the baseline

Number case:
"lnum" : lining numbers or "onum" : oldstyle numbers
Number spacing:
"pnum" : proportional or "tnum" : tabular (for lining up rows of
numbers like financials)
Fractions:
"frac" : normal fractions or "afrc" : alternate fractions
Dont want to remember all that? If you use Sass, Ive
got a Mixin for you: github.com/jpamental/otfeatures. It
provides the list above and does all the code writing
for you. For a more exhaustive list, try Adobe: netm.
ag/adobeopen-253.

A reasoned approach
Every element of your design must be there for
a reason, but its important to remember that
sometimes, a good reason is simply for greater
beauty. And thats OK. The nice thing about
OpenType features is they fall back to regular type
all on their own, so theyre pretty safe to add to your
design, and the level of polish they add can be quite
noticeable. With greater emphasis on readability,
increased pixel density and screen quality, more
and more users are reading longer content online.
That means the benefits in readability from better
typography can quickly translate into increased
loyalty, greater perceived usability, and even parades
of unicorns and puppies (OK, so maybe that last one
is an exaggeration).

video
Watch an exclusive
screencast of this
tutorial created by
the author:
netm.ag/tut2-253

may 2014 101

The all-new

magazine iPad edition

The iPad edition of net has been completely rebuilt from the
ground up as a tablet-optimised reading experience.

Try it
for free
today!

Youll find additional imagery, exclusive audio and video content in

every issue, including some superb screencasts that tie in with
the practical projects from the issues authors. Dont miss it!

Try it for free today with our no-obligation 30-day trial at

uk: netm.ag/itunesuk-253 US: netm.ag/itunesus-253

Web standards
This feature has been implemented already in
Internet Explorer 10, and will be adopted in Blink
(the rendering engine for Chrome and Opera) soon.
Mozilla has also accepted the recent implementation
for Firefox.The example below gets the x and y
pointer coordinates relative to the upper left edge of
the browser window, using the pointer events. Youll
notice the code looks very similar to mouse events.
document.body.addEventListener(pointerdown, function(e) {
console.log(pointerdown, e.clientX, e.clientY);
}, false);

pointer
events

Tomomi Imura discusses touch-first

development using pointer events
Event types including touchstart , touchend and
touchmove are fired only on browsers that
support touch events on touch-enabled devices.
When you build an application for multiple
environments, you dont want to discriminate against
your users by which device and user-input theyre
using. To make both touch and mouse user input
methods work, you need to support both touch and
mouse events together.
You probably wish there was a single set of events
to handle both the iOS touch event model and the
standard mouse events. Well, Microsoft has been
working on MSPointers to support multi user-inputs.
It was submitted to the W3C for standardisation at
the end of 2012 and has now reached the Candidate
Recommendation. This event model is called Pointer
Events and is designed to offer adaptive inputhandling, allowing hardware-agnostic pointer input
from devices like a mouse, pen, or touch.

if(typeof window.MSPointerEvent != 'undefined'){

// Pointer events supported!
}
The only available browsers that support the Pointer
Events are IE10 and above, while Chrome and Firefox
are catching up, so you need to include the touch and
mouse events until the feature id is available.
var isTouchSupported = 'ontouchstart' in window;
var isPointerSupported = navigator.pointerEnabled;
var isMSPointerSupported = navigator.msPointerEnabled;
var downEvent = isTouchSupported ? 'touchstart' :
(isPointerSupported ? 'pointerdown' : (isMSPointerSupported
? 'MSPointerDown' : 'mousedown'));
document.body.addEventListener(downEvent, function(e) {
var x = isTouchSupported ? e.targetTouches[0].clientX :
e.clientX;
var y = isTouchSupported ? e.targetTouches[0].clientY:
e.clientY;
}, false);
See a similar interactive demo at CodePen (netm.ag/
pointer-253). I hope Pointer Events are supported on
all browsers soon to build a better web.

PROFILE

touch events

The event is fired when any pointing makes contact

with the screen, for instance, a finger touching down
on the screen. This is also a compatible mouse event.
After firing a pointer event, the mouse events for the
primary contact will be fired as well.
To support IE10, you need to use the prefixed
version, so pointerdown , pointermove and
pointerup event handler event types should be
written as MSPointerDown , MSPointerMove and
MSPointerUP respectively, while supporting IE11, you
can drop the prefix. The feature detection for the
pointer events with ms vendor prefix can be written:

Tomomi Imura (@girlie_mac) is an open web advocate and frontend

engineer, who loves everything mobile and writes about HTML5, CSS,
JS, UX, tech events, gadgets (girliemac.com)

may 2014 103

PROJECTS JavaScript

Download
the files here!
All the files you need for
this tutorial can be found at
netm.ag/pixi-253

A b o u t t he a u t h o r

Mat Grov es
w: www.doormat23.com
t: @Doormat23
areas of expertise:
JavaScript, visual
coding, games
programming
q: whats the worst
youve ever screwed up
at work?
a: I once made a project
that was only 99 per
cent awesome

javascript

Get started with pixi.js

Mat Groves explains how to use 2D renderer Pixi.js to seamlessly

deliver interactive content across different devices and browsers
Pixi.js (www.pixijs.com) is a 2D renderer. In a
world gone mad on 3D were going all flat, but
not because were anti-3D; we love those little
triangles! The aim of this project is to provide a fast,
lightweight 2D library that works across all devices,
both mobile and desktop. The Pixi.js renderer allows
everyone to enjoy the power of hardware acceleration
without prior knowledge of WebGL.

Why use it?

resource
watch a DEMO
See a demo of what
well be making in
this demo here:
goodboydigital.com/
pixijs/koi_fish_pond

104

may 2014

The main reason for using Pixi.js is therefore as a

means of delivering awesome, interactive content that
can reach as many devices and browsers as physically
possible. Right now, the browser landscape is a world
of fragmentation so Pixi.js is intended as a handy tool
to have in your back pocket to help reach them all,
and make them all play nice!
To get started, download the source files by visiting
netm.ag/pixi-253. Open up the index.html file and youll

see that the basic HTML is set up for you, including

the all important importing of Pixi.js:
<!DOCTYPE HTML>
<html>
<head>

<title>My Pixi.js Koi Fish Pond</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
.rendererView {
position: absolute;
display: block;
width: 100%;
height: 100%;
}

JavaScript
</style>

<script src="js/pixi.js"></script>
</head>
<body>
<script>

// Code goes here
</script>
</body>
</html>
First, well need to create an instance of a Pixi.js
renderer. Pixi.js has two renderer flavours: WebGL
and Canvas. The best way to create a renderer is to use
the autoDetectRenderer function. Pixi.js will perform
an internal check and make sure to return a renderer
most suitable to the users browser:
var viewWidth = 630;
var viewHeight = 410;
var renderer = PIXI.autoDetectRenderer(viewWidth,
viewHeight);
renderer.view.className = "rendererView";
Now we have a renderer, we add its view to the DOM:
document.body.appendChild(renderer.view);
Its time to create a Pixi Stage element. Much like
Flash, the Stage element is the root display object
where all visual elements will be added. The only
parameter for creating a stage is its background
colour. Lets use white!

in-depth

Have your cake

and eat it
Reaching tablets and mobiles while also tapping into the
power of WebGL can seem something of a dichotomy. On the
one hand, you have relatively modest GPUs (although getting
better every day) of mobile devices and on the other you have
technology designed expressly to tap into the power afforded by
the GPU grunt of modern desktop computers.
I started work on Pixi.js expressly for that purpose. To allow the
creation of content that can utilise WebGLs amazing performance,
but to do so in a fashion that means it can fall back to Canvas in
a seamless manner, delivering the same core content to mobile
devices and non-WebGL browsers.
While the Canvas fallback inevitably lacks some of the graphical
features of the WebGL iteration, the thing Pixi offers is a single
code base that can harness the abilities of WebGL when theyre
available, but deliver the same content via Canvas without
additional effort or knowledge.
In much the same way as we now accept adaptive design as a
staple feature of UI aesthetics, I wanted Pixi.js to do the same thing
for visual effects and fidelity. Where its available, WebGL can push
the boundaries and enable insane new tricks to play with. However,
the Canvas fallback is always on hand to filter the experience back
to devices playing catch up in the GPU arms race.

var stage = new PIXI.Stage(0xFFFFFF);

To add some visuals to our new stage, we need a
Texture and a Sprite . A Texture stores the information
that represents an image. It cannot be added to the
display list directly and so has to be mapped onto a
Sprite . Texture.fromImage tells Pixi.js to create a new
Texture based on the image path provided, which can
be reused for multiple Sprites . Now we create a Sprite
that will use it:
var pondFloorTexture = PIXI.Texture.fromImage("img/
pondFloor.jpg");
var pondFloorSprite = new PIXI.Sprite(pondFloorTexture);
Once a Sprite has been created, for it to be rendered, it
must be added to the Stage display list:

Eat cake Full-on eye candy in WebGL with full functionality Canvas fallback

stage.addChild(pondFloorSprite);
Done! If you were to render the stage now you would
see a nice image of a rockpool floor on your screen. If

may 2014 105

PROJECTS JavaScript

Focus on

Pixi in practice
The thing I get asked most about with Pixi.js is when were
going to add particular physics features or collision systems.
Pixi.js is a renderer rather than a games engine. Much like Flash,
Pixi.js is simply there to create interactive content. How and what
people do with it is up to them. As an example, we made Run Pixie
Run (netm.ag/runpixie-253) as our first demo of what Pixi can do. In
this instance we used it on render duties to make a slick, all-device
browser game. We recently worked with Razorfish to make the
Saver Menu (netm.ag/saver-253) site as part of McDonalds latest
campaign, which is all about a tight, interactive experience site,
tailored for desktop and tablet.
WHAT NEXT?
Done with the fishies? Heres a few resources to get you going:
Pixi.js homepage
For inspiration and examples, visit the home of Pixi.js (pixijs.com)
The nuts, bolts and forks!
See the GitHub repository: github.com/GoodBoyDigital/pixi.js
Goodboy archives
Where I go to talk shop: www.goodboydigital.com/category/pixi-js
HTML5 Game Devs forum
Where everyone talks: www.html5gamedevs.com/forum/15-pixijs

you come from the Flash side of the world then you
will know where Pixi.js gets a lot of its terminology.
Now we have a rockpool, we need to create 20
swimming fish and add them to the stage:
// set how many fish we would like to add
var totalFish = 20;
// create an array to store a reference to the fish in the
pond
var fishArray = [];
for (var i = 0; i < totalFish; i++)
{
// generate a fish id betwen 0 and 3 using the modulo
operator

var fishId = i % 4;

fishId += 1;

// generate an image name based on the fish id

var imagePath = "img/fish"+fishId+".
png";

// create a new Texture that uses the image name that
we just generated as its source

var fishTexture = PIXI.Texture.fromImage(imagePath);

// create a sprite that uses our new sprite texture

var fish = new PIXI.Sprite(fishTexture);

// set the anchor point so the fish texture is centred on
the sprite

fish.anchor.x = fish.anchor.y = 0.5;

// set a random scale for the fish - no point them all
being the same size!

fish.scale.x = fish.scale.y = 0.8 + Math.random() * 0.3;
// finally lets set the fish to be a random position..

fish.position.x = Math.random() * viewWidth;
fish.position.y = Math.random() * viewHeight;

// time to add the fish to the pond container!
stage.addChild(fish);
We created more sprites and modified the sprite
properties. Every Pixi.js sprite has a position, scale
and rotation property which you can modify to
move them around. We now need to add a few extra
properties to make the little guys swim around:

Run Pixie Whether a game like Run Pixie Run or an interactive campaign, Pixi.js
gives you the power to deliver to all devices

106

may 2014

// create a random direction in radians. This is a number
between 0 and PI*2 which is the equivalent of 0 - 360
degrees

fish.direction = Math.random() * Math.PI * 2;

// this number will be used to modify the direction of the
fish over time

fish.turningSpeed = Math.random() - 0.8;

// create a random speed for the fish between 0 - 2

fish.speed = 2 + Math.random() * 2;

// finally we push the fish into the fishArray so it it can
be easily accessed later
fishArray.push(fish);
}

JavaScript
Lets create a bounding box for the fish. Well use this
to ensure, when the fish swim out of the bounds, they
wrap around the scene. The padding ensures the fish
are off screen before it wraps to avoid any popping.
// create a bounding box for the little fish
var fishBoundsPadding = 100;
var fishBounds = new PIXI.Rectangle(-fishBoundsPadding,
-fishBoundsPadding,

viewWidth + fishBoundsPadding * 2,

viewHeight + fishBoundsPadding * 2);
The waves are created using another Pixi.js object
called a TilingSprite . Using this, we can scroll the waves
over the pond to give a nice water effect. We create a
new texture and create a new tiling sprite:
var waveTexture = PIXI.Texture.fromImage("img/waves.
png");
var wavesTilingSprite = new PIXI.TilingSprite(waveTexture,
viewWidth, viewHeight);
wavesTilingSprite.alpha = 0.2;
stage.addChild(wavesTilingSprite);
We then set the alpha of the object. This is a
Pixi.js property that sets how opaque a display object
is. Now add our new waveSprite to the stage. Only one
more thing to set up now! The displacement filter will
create the real time wobbly water effect. (Note: this is
a WebGL-only feature.)
// create a new wave texture to add over the fish
var waveDisplacementTexture = PIXI.Texture.
fromImage("img/displacementMap.jpg);
var displacementFilter = new PIXI.DisplacementFilter(wave
DisplacementTexture);
// configure the displacement filter..
displacementFilter.scale.x = 50;
displacementFilter.scale.y =
50;
// apply the filters to the stage
stage.filters = [displacementFilter];
Its time to create the update loop to run each frame
and update the position of the fish, water and
displacement. Use the requestAnimationFrame , like so:
var tick = 0;
requestAnimationFrame(animate);
function animate()
{
We loop through the fish array and update the
position of the fish based on speed and direction. The
fish are wrapped as they reach the edge of the screen.

// iterate through the fish and update the position

for (var i = 0; i < fishArray.length; i++)
{

var fish = fishArray[i];

fish.direction += fish.turningSpeed * 0.01;

fish.position.x += Math.sin(fish.direction) * fish.
speed;

fish.position.y += Math.cos(fish.direction) * fish.
speed;

fish.rotation = -fish.direction - Math.PI/2;

// wrap the fish by testing there bounds..

if(fish.position.x < fishBounds.x)fish.position.x +=
fishBounds.width;

else if(fish.position.x > fishBounds.x + fishBounds.
width)fish.position.x -= fishBounds.width

if(fish.position.y < fishBounds.y)fish.position.y +=
fishBounds.height;

else if(fish.position.y > fishBounds.y + fishBounds.
height)fish.position.y -= fishBounds.height
}
Lets update the tiling water texture. A TilingTexture
has an extra property called tilePosition that controls
the offset of the texture as it tiles. Increasing this on
each frame will give the illusion of the water moving:

// increment the ticker

tick += 0.1;

// scroll the wave sprite

wavesTilingSprite.tilePosition.x = wavesTilingSprite.
tilePosition.y = tick * -10
We also need to update the displacement map offset.
Moving this each frame will scroll the displacement
map giving the lovely illusion of rippling water.

// update the displacement filter by moving the offset of
the filter

displacementFilter.offset.x = displacementFilter.offset.y
= tick * 10
We need to render the scene using our renderer.
Calling this function will draw all of the contents of
the stage to the renderers view that we attached to
the stage. Once the scene has been rendered we
requestAnimationFrame again. This creates a loop of
constant updating and rendering:

// time to render the state!
renderer.render(stage);
// request another animation frame
requestAnimationFrame( animate );
}
Done! Dont be 'koi', load it up and try it out.

may 2014 107

PROJECTS Tools

A b o u t t he a u t h o r

vi taly
kondr at ie v
w: www.deloittedigital.
com/eu
t: @vitkon
areas of expertise:
JavaScript, frontend
engineering
q: whats the worst
youve ever screwed up
at work?
a: an SQL delete
statement where I
forgot the 'WHERE'
clause. It was such a
relief that DevOps had
an hourly backup

tools

Yeoman generators

Vitaly Kondratiev explains how to write custom Yeoman generators,

which are particularly useful in multi-site and project environments

Custom Yeoman generators can be very useful in
multi site and project environments and
significantly improve speed of development, team
collaboration and the quality of the code, while also
acting as a virtual coach for more junior team
members. This allows us to share best practices and
ideas. In this tutorial well try to achieve the following
with our custom Yeoman generator:
l Organise code into a maintainable folder structure.

This is hardcoded into the generator and remains

consistent in every project.
l Choose browser compatibility requirements (for
example, Internet Explorer 8+).
l Choose a preferred preprocessor (SASS / LESS /
none). Create related folders and sample style files.
l Offer a choice of UI frameworks based on the
preprocessor and compatibility choices above (for
example, Bootstrap 2/3, Foundation 3/4/5).
l Offer a choice of recommended libraries for
common scenarios (for example, a IE8+ generator
will not have jQuery 2.0 in the list).
l Choose and enforce coding conventions (check
JSHint is enabled in the IDE and build process),
ensuring consistent JavaScript coding conventions.

Getting Started
Under the bonnet, Yeoman has three tools:
l Grunt (gruntjs.com) JavaScript task runner to help
with repetitive tasks (concat, minification, Sass
compilation) and other build related tasks.
l Bower (github.com/bower/bower) package manager
for JS libraries.
l Yo (github.com/yeoman/yo) scaffolding tool that uses
a concept of generators to create a boilerplate for a
new project based on your preferences.

108

may 2014

Start by installing Yeoman globally on your machine.

npm install -g yo
Now, you have an option to choose generators that
are maintained by community to give you a quick
start on the project. But what if you require a unique
project and components structure, and a prompt
system that will make the right components choice
based on your input? Thats where a custom Yeoman
generator comes into play. Start by setting up globally
a generator called generator :
npm install -g generator-generator

Generator setup
Create a folder starting with generatorGENERATORNAME (for example, generator-netmag )
and run the generator. Make sure the folder name
starts with the generator- prefix and run yo generator
in the folder.
It will ask you a few questions and create a
generator core in your folder. Then you will need to
create a symbolic link to your generator folder:
npm link . This enables you to access your local
generator globally, making development much easier.
Next, create a new folder elsewhere and see what
you get with your newly created Yeoman generator,
yo netmag . Not too much to look at, is it? Lets teach
our netmag generator to do something useful for us.

Generator logic
Have a closer look at the generators code in app/
index.js. Every method you place on the
netmagGenerator.prototype will be invoked one after
another. If you need a private method that doesnt

Tools
have to be invoked, just put an underscore in front of
the method name. For example, netmagGenerator.
prototype._dontInvoke .
At the very top of the generator is our constructor
function. It links up Yeomans libraries, sets up a
listener for the end event (when the methods on the
prototype finish executing) and gives access to our
generators package.json file. We will leave that bit as it
is for now.
We need to ask a few questions in order to make
decisions on what libraries we are going to use for the
new project.
For that purpose we will substitute the default
askFor method with one of our own. This is what our
method looks like:
NetmagGenerator.prototype.askForLegacy = function
askForLegacy() {
var cb = this.async();
var prompts = [
{

Custom Yeoman
generators can
significantly improve
speed of development
name: 'legacySupport',
type: 'list',
message: 'What browsers do you intend to support?',
choices: [
'Modern',
'IE8+',
'IE7+'
],
default: 0
}
];
this.prompt(prompts, function (props) {
this.legacySupport = props.legacySupport.
toLowerCase();
cb();

Focus on

Getting started with

Yeoman Generators
When starting a new web project, we tend to take on too
many best practices all at once. With several teams working
on different projects in various locations you havent got much
time to share the knowledge and lessons learnt. Heres where
your own team or companys generators come in handy. For
junior developers the generator will be a guiding light in the ocean
of various frameworks and solutions, acting as a virtual coach.
For more senior members it will be a point where their
knowledge, best practices and coding conventions can be shared
and synced across the company.
A custom Yeoman generator can introduce a common project
architecture and structure (such as SMACSS), define and enforce
certain coding conventions, help choose required tools from a
defined set of frameworks and plug-ins, set up testing, as well as
providing some boilerplates and basic examples.
When creating a generator, having the option to react based
on the response of the user creates a lot of possibilities. You can
conditionally fetch dependencies, create files, tests, configuration
files for various tools (EditorConfig, Git, JSHint), and anything else
you can think of.
You dont need to worry much about concurrent processes,
race conditions and other concerns you may have about the Node
environment. Its all been taken care of. Its super easy to get
started, so lets get our hands dirty with it.
If you havent worked with Yeoman before and are looking to
get up and running with it quickly, make sure you have installed
Node.js, Git and, optionally, Ruby and Compass (if you plan to use
Compass) and check the quick start guide at yeoman.io.
Yeoman generators rely on the Inquirer.js prompt system.
Make sure you check github.com/SBoudrias/Inquirer.js if you want
to dive deep into how prompt types (such as checkboxes, lists)
and control helpers (for example, validation, prompt hierarchy,
filtering) work.

}.bind(this));
};
The prompts array contains an object for each
question. In our case, were trying to find out what
browser support is required for the project.
Remember we included Yeomans libraries at the
top? This allows us to call this.prompt passing the

may 2014 109

PROJECTS Tools
prompts array with questions and an anonymous
function for the callback that is triggered when a user
gives us the answer. We then save the answer to the
this.legacySupport variable for later analysis and invoke
this.async to switch to the next method in our index.js .
The next method were going to add is going to ask
the user what CSS preprocessing is preferred, if any.
This method behaves exactly like our first one and
saves the answer into the this.cssPre variable.
Our next method is going to help the user to choose
a UIFramework based on their previous answers. We'll
dynamically build a choices array and add only those
frameworks that fit the bill. For example, if a user
chooses IE8+ compatibility and Sass preprocessing,
we will see Twitter Bootstrap 3 and Zurb Foundation
3 in the list of options. We will again save the users
choices into the variable this.uiFramework .

resource
source code
Check out the full
source code for this
Yeoman generator
at github.com/vitkon/
netmag

110

may 2014

NetmagGenerator.prototype.askForUiFramework = function
askForUiFramework() {
var choices = ['None'];
var cb = this.async();
if (this.legacySupport === 'ie7+') {
choices.push('Twitter Bootstrap 2');
}
if (this.legacySupport === 'ie8+' || this.legacySupport ===
'modern') {
choices.push('Twitter Bootstrap 3');
}
if (this.legacySupport === 'ie8+' && this.cssPre ===
'sass') {
choices.push('Zurb Foundation 3');
}
if (this.legacySupport === 'modern' && this.cssPre ===
'sass') {
choices.push('Zurb Foundation 4');
choices.push('Zurb Foundation 5');
}
var prompts = [
{
name: 'uiFramework',
type: 'list',
message: 'Choose your preferred UI framework',
choices: choices,
default: 0
}
];
this.prompt(prompts, function (props) {
this.uiFramework = props.uiFramework.toLowerCase();
cb();
}.bind(this));
};
Our next method will be suggesting a multiple choice
of CSS and JavaScript libraries to include into our

new project. And again, some options will be added

dynamically based on prior answers. This is how
multi-choice array looks like:
var choices = [
{
name: 'Lo-dash',
value: 'includeLoDash',
checked: false
},
{
name: 'Modernizr',
value: 'includeModernizr',
checked: true
},
{
name: 'RequireJS',
value: 'includeRequireJS',
checked: true
},
{
name: 'ParsleyJS',
value: 'includeParsleyJS',
checked: true
}
];
Then, to satisfy modern browsers, we will add jQuery
2.0 and we will add jQuery 1.10 to the list for legacy
browser support:
var choiceJQuery = {
name: 'jQuery',
value: 'includeJQuery',
checked: true
};
if (this.legacySupport === 'modern') {
choiceJQuery.name += ' 2.0';
choiceJQuery.value += '2';
} else {
choiceJQuery.name += ' 1.10';
choiceJQuery.value += '1';
}
choices.unshift(choiceJQuery);
If the user decides against using UIFrameworks , I
suggest using Normalize.css and 960 Grid System:
if (this.uiFramework === 'none') {
choices.push(
{
name: 'Normalize.css',
value: 'includeNormalize',
checked: true

Tools
},
{

resources
name: '960 grid',
value: 'includeGrid',
checked: false

}
);
}
Now that we have all the answers, lets start
scaffolding our new project. The this.mkdir variable
creates folders in your new folder, and this.copy copies
files over from the generator folder to the new one.
NetmagGenerator.prototype.app = function app() {
this.mkdir('app');
this.copy('_package.json', 'package.json');
this.copy('_bower.json', 'bower.json');
this.copy('_index.html', 'app/templates/index.html');
};
NetmagGenerator.prototype.projectfiles = function
projectfiles() {
this.copy('editorconfig', '.editorconfig');
this.copy('jshintrc', '.jshintrc');
};
Dont forget to configure your .jshintrc and .editorconfig
to maintain consistent coding conventions across
your projects. I also prefer using JSHint (www.jshint.
com) in conjunction with the SublimeLinter plug-in in
Sublime Text 2, it automatically picks up .jshintrc and
shows your errors in real time as you type.
Next, we include conditions (Ruby syntax) into our
_bower.json file, which contains all our dependencies.
For example, what Bootstrap 3 with the LESS option
enabled looks like:
"dependencies": {<% if (uiFramework == 'twitter bootstrap
3') { if (cssPre == 'less') { %>
"bootstrap": "~3.0.3"<% }} %>
}
The last thing is to properly wire up all included
libraries into index.html . In our generator folder we
create the app/templates/ index.html , adding a bit of
logic to it like so:
<% if (uiFramework == 'twitter bootstrap 3' && cssPre ==
'less') { %><link rel="stylesheet" href="bower_components/
bootstrap/dist/css/bootstrap.min.css"><% } %>
When working on large scale and long running web
projects, it's crucial that we work in a unified way, in
order to keep our code highly readable, consistent,
well-documented, scalable and bullet-proof.

further information
Here are a few suggestions of where you can find more
information about the tools mentioned in this article,
including a summary of each one:
Yeoman is an OS X, Linux, and Windows friendly system-wide
command-line tool that seeks out any installed generators on
your computer and then gives them control to scaffold an app for
you. Get familiar with what Yeoman can do for you out of the box
and what other generators are out there that have been created
by the community
When you get your head around generators and building your
own custom one, you'll need to dig deeper into the prompts
system. Inquirer.JS will ease the process of asking end user
questions, parsing, validating answers, managing hierarchical
prompts and providing error feedback in your generator.
github.com/SBoudrias/Inquirer.js
JSHint is a community-driven tool to detect errors and potential
problems in JavaScript code and to enforce your teams coding
conventions. It is very flexible so you can easily adjust it to your
particular coding guidelines and the environment you expect
your code to execute in. Dont forget to include .jshintrc in your
generator to keep your code conventions and recently even code
complexity requirements in sync across the team.
www.jshint.com
Bower is a package manager for your app and the bower.
json file tells Bower which components to install in the app/
bower_components directory. These are JavaScript and CSS
components which youll use within the website youre building.
If a component is available in Bower, its preferred to use package
management rather than including component code into the
generator. Bower is also capable of understanding the difference
between packages needed for development (for example, unit
testing tools) and those needed for development and runtime.
github.com/bower/bower
If your preferred IDE is Sublime Text, SublimeLinter is a must
have plug-in. It supports lint programs (for example JSHint) and
highlights lines of code the linter deems to contain (potential)
errors in real time while you type. SublimeLinter automatically
picks up your .jshintrc configuration for your project and helps
to achieve great results in maintaining code conventions and
consistency in your application.
github.com/SublimeLinter/SublimeLinter

may 2014 111

ON
SALE
NOW

THE NINTH ANNUAL

HOT 100
THE GEAR, TALENT & CUTTING-EDGE CREATIONS
IGNITING YOUR TECH WORLD RIGHT NOW

PROJECTS Accessibility

accessibility

Using aria-controls

Lonie Watson introduces the aria-controls attribute for creating

relationships between elements when doing so in the DOM isnt practical
There are a handful of ARIA 1.0 attributes that
can be used to indicate relationships between
elements when those relationships cant be
ascertained easily from the DOM. One such attribute
is aria-controls (netm.ag/aria-253). The aria-controls
attribute creates a cause and effect relationship. It
identifies the element(s) that are controlled by the
current element when that relationship isnt
represented in the DOM. For example, a button that
controls the display of information contained within
a div :
<button onclick="showInfo();" aria-controls="I">Show info</
button>

<div id="I">Information.</div>
The more the two elements are separated in the
DOM, the more useful the aria-controls attribute is.
Imagine a checkbox that controls the filtration of
search results, or a tab that controls a tabpanel :

When a user agent (UA) supports aria-controls , it

makes it possible for focus to be moved from the
current element directly to the element it controls.
The alternative is to navigate through all the
intervening content in hope of discovering what may
have changed elsewhere on the page. However, UA
support for aria-controls is still inconsistent.
Firefox and Internet Explorer both expose ariacontrols through their accessibility API (IAccessible2
and UI Automation respectively). Assistive
technology (AT) support is less encouraging. Jaws
(14+) supports aria-controls , but only in Firefox.
When Jaws encounters the aria-controls attribute
it announces, Use the Jaws key Alt and m to move
to the controlled element. NVDA, VoiceOver and
Window-Eyes dont support it in either browser.
Despite such lacklustre support among screen
readers, the aria-controls attribute is still worth
using. Creating relationships within the DOM is
more robust, but isnt always practical or achievable.
The presence of aria-controls wont damage the user
experience for people using UAs that dont support it,
and itll enormously improve the UX for those people
whose browser/screen reader combinations do.

PROFILE

<ul role="tablist">
<li><a href="#" onclick="displayTab(1);" role="tab" ariacontrols="panel1">Tab 1</a></li>
<li><a href="#" onclick="displayTab(2);" role="tab" ariacontrols="panel2">Tab 2</a></li>
...

</ul>
<div role="tabpanel" id="panel1">...</div>
<div role="tabpanel" id="panel2"></div>

114

may 2014

Lonie Watson is a senior accessibility engineer at The Paciello Group

(paciellogroup.com). She is chair of the British Computer Association of
the Blind and a member of the W3C HTML Accessibility Task Force

0%
10
UK
D
SE
BA

9015

VPS

T
OR
PP
SU

Create your own custom

ly
From on

11

.99 per month

vCPU

HDD

Fully scalable & customisable

VPS without the compromises

Advanced VPS technology

Your VPS specs can be modified

on the fly to ensure you can meet
any sudden changes in demand or
popularity.

Affordable yet high-quality VPS

hosting without compromise. We
use branded Intel processors and
Dell servers in our UK data centre.

KVM is the latest generation of

virtualisation technology, offering
high-performance access to
server resources.

100% UK support 24/7

Free & instant setup

RAM

99.99% uptime SLA

Full root access

Find out more www.heartinternet.co.uk/vps

Call us now

0845 644 7750

www.heartinternet.co.uk

9000

Web hosting | Reseller hosting | VPS | Servers

Projects
Slash design/
build time with
proportional RWD
Create a cloud icon
in Fireworks
Translate design
details with Sass
Master OpenType
Get started
with Pixi.js
Create a best practice
guide with a custom
Yeoman generator