FREE!

66-PAGE EBOOK
Exclusive in-depth excerpt
from Lea Verou’s CSS Secrets

PROJECT
The voice of web design

Key rules
for testing
and optimising
Issue 279 : May 2016 : net.creativebloq.com
across devices

NEW SKILLS IN
WEB DESIGN
LAYOUT TECHNIQUES ANIMATION PROTOTYPING TOOLS
PERFORMANCE TYPOGRAPHY SVGs AND MUCH MORE!
 Welcome

WELCOME

EDITOR’S NOTE
We’re thrilled to announce that Generate, Our friends at fffunction have built us a brand new
our conference for web designers and frontend site (generateconf.com), where you’ll find details of all
developers, is expanding this year. Generate is now our events. You can also follow us on Lanyrd (lanyrd.
in its fourth year and has established itself as a com/series/generate) and Twitter, and for even more
valuable source of practical takeaways, inspiration info and details of exclusive discounts, sign up to our
and networking opportunities. Generate newsletter (netm.ag/newsletter-279).
Not only will we return to New York next month If you attend one of our new events, you’ll
and run our flagship London event in September automatically become a founding member, which
(this year preceded by a workshop day), we’re also means you’ll get 50 per cent off tickets for all future
adding three one-day, one-track shows on three Generates around the world – for life.
continents! First is San Francisco on 15 July (tickets See you at Generate, wherever you are!
on sale now), where you can see Mike Monteiro, Wes
Bos and Stephanie Rieger. We’ll then head to Sydney Oliver Lindberg, editor
in September, followed by Bangalore in November. [email protected]

FEATURED AUTHORS
CHRISTOPHER IAN ALLISON DONOVAN
MURPHY FENN WAGNER HUTCHINSON

Christopher is a writer and Ian is an independent consultant Allison is a frontend developer Donovan is a Dublin-based
designer based in Belfast. He’s in London, where he helps working at Happy Cog and frontend designer and
a passionate educator and from businesses get UX design done. living in Philadelphia. She developer. On page 84 he
page 68 lays out 10 web skills From page 76 he explains how curates our gallery this issue, explains how to create a bank
you should be focusing on to create a top UX portfolio from page 44 of micro-interactions
w: www.christophermurphy.org w: www.chopstixmedia.com w: www.alliwagner.com w: www.hop.ie
t: @fehler t: @ifenn t: @alliwagner t: @donovanh

may 2016 3
 Future PLC, Quay House, The Ambury, Bath, BA1 1UA +44 (0)1225 442244
@netmag /netmag +netmagazine flickr.com/photos/netmag [email protected] net.creativebloq.com

EDITORIAL
Editor Oliver Lindberg [email protected], Production editor Ruth Hamilton [email protected],
Art editor Rebecca Shaw [email protected], Commissioning editor Julia Sagar [email protected],
Staff writer Dominic Carter [email protected], Staff writer Alice Pattillo [email protected]
CREATIVE BLOQ Global editor-in-chief Dan Oliver [email protected], Managing editor
Craig Stewart [email protected], Content manager Kerrie Hughes [email protected],

EDITORIAL CONTRIBUTIONS
Marc Andrew, Shehzad Azram, Tanya Combrinck, Jodie Doubleday, Andy Goodman, Kev Hoyle, Donovan Hutchinson, Sam Kapila, Yunmie
Kim, Jamie Knight, Sammy Maine, Jim McCauley, Cordelia McGee-Tubb, Kevin Ngo, Chris Pearce, Jemma Proctor, Nathan Riley, Amber Leigh
Turner, Tomer Sharon, William Smith, Craig Sullivan, Allison Wagner, Evan You

ART CONTRIBUTIONS
Ben the Illustrator, Daniel Byrne, Ben Mounsey, Marco Goran Romano

MANAGEMENT
Content and marketing director Nial Ferguson [email protected], Editorial director: games, photography, creative and design
Matthew Pierce [email protected], Group art director Rodney Dive [email protected]

ADVERTISING Advertising manager Sasha McGregor [email protected]

CIRCULATION Trade marketing manager Juliette Winyard [email protected]
PRODUCTION Production controller Nola Cokely [email protected]
Production manager Mark Constance [email protected]
LICENSING Senior licensing and syndication manager Matt Ellis [email protected]

NEXT ISSUE ON SALE 21 APRIL 2016

All contents copyright © 2016 Future Publishing Limited or published under licence. All rights reserved. No part of this magazine may be reproduced, stored, transmitted or used
in any way without the prior written permission of the publisher. Future Publishing Limited (company number 2008885) is registered in England and Wales. Registered office:
Registered office: Quay House, The Ambury, Bath, BA1 1UA. All information contained in this publication 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. You are advised to contact manufacturers and retailers directly with
regard to the price and other details of products or services referred to in this publication. Apps and websites mentioned in this publication are not under our control. We are not
responsible for their contents or any changes or updates to them. 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.

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

APPS USED PAPER

COLOPHON
TYPEFACES
Google Docs, Photoshop, Dropbox, COVER PaceSetter Gloss 250gsm Antonio, Share Tech,
FutureSource, Illustrator, InDesign, P3-82 Galerie Fine 100gsm Merriweather,
CodePen, GitHub P83-114 Grapholvent 70gsm Titillium Web

4 may 2016
Issue 279 : May 2016 : net.creativebloq.com

FEED FEED

SIDE PROJECT OF THE MONTH 16

WORKSPACE 18
Frogs and lily pads help coders master William Smith gives a tour of Motley Agency’s office, complete
flexbox in Thomas Park’s new game with artisan booze, Moomins and rogue ping pong balls

CLIENTS FROM HELL 17

Some over-zealous Photoshopping
threatens to offend an important client

BEYOND PIXELS 20
Amber Leigh Turner shares the relaxing
benefits of pouring your own candles

NEED LIST 21
The stuff we want, including the VR
headset everyone’s been waiting for

EVENT REPORT 23
Nathan Riley reports on Awwards’ recently
launched Amsterdam event

VOICES
PROGRESSIVE FRAMEWORKS 26
Evan You explores a new framework option
that offers devs the best of both worlds VOICES

ZERO UI 28
INTERVIEW 32
Andy Goodman explores the need for user Filament Group’s
interfaces to start taking a back seat Patty Toland talks
about the dangers of not
USER OBSERVATION 37 paying performance and
Tomer Sharon considers how careful accessibility the attention
observation can help us solve problems they deserve

BIG QUESTION 38
How do you debug animations? We asked
TAKE ADVANTAGE OF THE
web professionals their approaches
SUBSCRIBE TO NET PRINT AND DIGITAL BUNDLE
Q&A 41 Turn to page 24 to find out more
CodePen’s Tim Holman chats about AND SAVE UP TO 54% Want the Pro package? Turn to Page 51
bouncing back and keeping things fun

6 may 2016
 Contents

REGULAR REGULARS
GALLERY 44
NETWORK 8
Allison Wagner selects The latest mail, tweets, posts and rants
her favourite new sites,
including the redesign of a EXCHANGE 10
magazine’s site to align it Heather Burns, Heydon Pickering, Scott
with the print publication Jehl and Geri Coady share advice

SHOWCASE

FREE
DESIGN CHALLENGE 52
Three designers mock up theatre sites

CSS SECRETS FOCUS ON 57

EXCERPT Sam Kapila on how to write an About page

SEE PAGE 96 PROFILE 58

BitGold designer Mike Busby

HOW WE BUILT 64
An online recipe book of global recipes

PROJECTS
MICRO-ANIMATIONS 84
Donovan Hutchinson walks through how to
build a set of simple, adaptable animations

FEATURES
SKETCH AND ZEPLIN 90
Marc Andrew on how Zeplin helps bridge
the gap between designers and developers

NEW SKILLS DESIGN A WINNING CSS LINTING 94

IN WEB DESIGN 68 UX PORTFOLIO 76 Jodie Doubleday looks at how to use linting
From SVGs to prototyping tools, Your portfolio is the perfect place to to keep your CSS maintainable
Christopher Murphy runs down the tell your story. Ian Fenn shows you
areas you should be focusing on now how to make your work shine HEAD TO HEAD 97
CSS-in-JS versus CSS Modules

SVG ICONS 98
Shehzad Azram looks at the benefits of SVG
PROJECT icons and shows you how to implement one
SITE PERFORMANCE
TIPS FROM THE BBC 104 WEB STANDARDS 104
Jamie Knight reveals the Kevin Ngo introduces Mozilla’s A-Frame
techniques the BBC uses to
keep its site smooth and speedy OPTIMISATION 108
Craig Sullivan presents 15 rules to help
optimise your sites for different devices
EXCLUSIVE VIDEO TUTORIALS!
Look out for the video icon in the tutorials for
exclusive screencasts created by the authors
ACCESSIBILITY 114
Cordelia McGee-Tubb explores onClick

may 2016 7
 Mail, tweets,
posts and rants
CONTACT US @netmag /netmag +netmagazine [email protected] net.creativebloq.com

as a layout option! To use it,

go to _variables.scss and set
$enable-flex to true . The full
details are at netm.ag/flex-
279. It’s also possible to
add flexbox on top of older
versions of Bootstrap, as
flexbox automatically
overrides most other layout
CSS in browsers that support
it. Adding flexbox as a
progressive enhancement
will get you easy vertical
centring and equal-height
columns, and blocks that are Flexbox extras Wes Bos wrote an article explaining the ins and outs of flexbox.
You can now find it online at netm.ag/bos-279
LAYOUT WOES more responsive in size to
Do we ditch Bootstrap 4 and their content.”
go with flexbox, or use both @bradwatersart Nail on the just about to complete her
for adaptability? Can they be head @davatron5000. apprenticeship. It has been so
combined? SITE INSIGHTS @kevinSuttle 99/100 sites’ cool watching her grow over
Gregory Danelian, net: In issue #277 we navigation mirrors its the last 12 months – she has
Edinburgh, UK published an interview internal organisational turned out to be a cracking
net: Here’s what Zoe with Paravel’s Dave Rupert. structure: netm.ag/conway-279 illustrator and taken to 3D
Mickley Gillenwater had to One quote in particular @bradwatersart Does this like a duck to water. As an
say: “Good news – Bootstrap resonated with readers (see mean they are thinking about employer, the apprenticeship
4 actually includes flexbox image below). themselves and not the user? has been an overwhelmingly
@dawnahukanna Some self- positive experience, and
focus and some self-defining we are in the process of
(right in front of their nose). organising two more.
@bradwatersart I agree Sush Kelly, London, UK
“Your website is a manifestation - looking inwards rather net: Thanks for the update!

of your organisation’s problems. than outwards. You can read Sush’s article
at netm.ag/apprentice-279.
It shows the world how you APPRENTICE HIT
National Apprentice week
has just passed (14-18
work together” I work at Imaginate, a March), and there’s quite
multidisciplinary design a buzz around work-based
Dave Rupert consultancy. Last year I wrote learning at the moment.
an article for Creative Bloq It’s great to see studios
about apprentices in the supporting inexperienced
Company issues “Your website shows you more of what a group of people does design industry. Afterwards, designers and developers
than what a group of technologies can do,” says Dave Rupert we took on Meg, who is in this way.

8 may 2016
 Network

THE POLL
COOL STUFF
WHICH TOOL DO YOU USE WE LEARNED
THIS MONTH
TO CREATE ANIMATIONS? WEATHER MEN
Side projects are
Principle 5% GreenSock 35% a great way to test
With this versatile Claiming to be “the new out new skills and make
option you can create standard for HTML5 your CV look even more
a short animation, a animation”, this high- impressive. Sometimes,
slick interaction, or performance tool is a though, they take on a life
a multi-screen app firm industry favourite of their own. This was the
case for Jonas Downey and
Trevor Turk, who spent two
Animate CC 6% Other 24% years developing their
Flash may be dead, Alternative options successful Hello Weather
but die-hard fans can aplenty – Bounce.js, app on the side.
use this replacement Atomic and Easee all netm.ag/helloweather-279
from Adobe got a mention
FIGMA FURNITURE
Good design can
Velocity.js 13% After Effects 17% draw inspiration
The brainchild of Adobe CC’s 3D, motion from some pretty
Julian Shapiro, this graphics and animation surprising places and the
speedy animation software is holding its recently launched Figma
engine combines the own amongst animation is a case in point. Having
best of jQuery and enthusiasts previously studied furniture
CSS transitions design at college, Sarah
Pease explains how she
transferred that discipline’s
principles to help create

From our timeline Showing prototypes.

@rajrindra
this collaborative interface
design tool.
netm.ag/furniture-279
What’s the secret to a successful
web design pitch? It’s all about providing BUTTON BOOST
value. If you’re not Technology curation
Knowing that it’s OK Repeat the client’s showing how the site is site Product Hunt
to just say ‘No’ for the wants and desires back communicating brand ideas and already had a thriving
greater good of the to them during the driving sales, then it won’t work. Twitter community, so it
website. #speakup pitch, while illustrating how @cm_vernon was wary of developing a
@3fiveInc you will solve each one. Facebook login platform if
@shumylaj PSDs. Clients love them. there wasn’t a worthwhile
Jedi mind tricks. Lots of PSDs, lots! tradeoff. But, as Lukas
@matthamm In a crowded market, @danjdavies Fittl explains here, once
sell your agency’s they tested a Facebook
beliefs and explain Be honest about Login button on their site,
A thorough how they align with those expectations and don’t Product Hunt saw its
understanding of the of the potential customer. try to bullshit your way signups skyrocket.
client’s brand and the Everyone can bamboozle through. That goes for both netm.ag/button-279
provision of an effective solution. someone with techology! parties, really.
@gramatter @lukewillmatt @Robb0wen

may 2016 9
 Practical
advice from
Send your questions to [email protected] industry experts

THIS MONTH FEATURING... QUESTION OF THE MONTH

HEATHER BURNS Do you use any ‘offline’ tools for illustration?

Heather is a web designer Sara Soueidan, Lebanon
and digital law specialist
based in Scotland*
w: www.webdevlaw.uk
t: @webdevlaw

HEYDON PICKERING
Heydon is a freelance web
accessibility consultant,
interface designer and writer
w: www.heydonworks.com
t: @heydonworks

SCOTT JEHL
Scott is a designer
and developer working
at Filament Group
w: www.scottjehl.com
t: @scottjehl
Work in progress Geri Coady’s initial pencil sketch and final design for an A List Apart article illustration

GERI COADY
GC: My illustration process is exactly the same as my web design workflow – I always
Geri is a colour-obsessed
illustrator and web designer
sketch on paper first. Even the roughest of sketches gives me a starting point, instead
based in North America of opening a blank digital canvas. Sometimes I’ll use a scanner to import them and
w: www.hellogeri.com place them in Illustrator, but usually I’ll just hold my sketchbook up to my webcam and
t: @hellogeri snap a photo. I make sure my clients understand they’re purely conceptual at this
point, which significantly speeds up the overall process.
* Heather Burns is not a lawyer, and her
answers pertain to UK law LEGAL considered company assets. What’s
DATABASE RIGHTS more, many websites using databases
As a side project I have made a search will have commercial agreements in
engine of sneaker sites, which uses place that allow them to restrict who
(credited) images and descriptions from is scraping from them and for what
the sites I have spidered. I show price purpose, and others will ban scraping
comparisons for all sneakers and link to altogether. You therefore run the risk
the ecommerce sites. Is this legal? of violating intellectual property,
Andy Barefoot, Munich, DE commercial agreements, or both. You
HB: This is an area of law known as need to check the terms and conditions
database rights. While some databases of the sites you have spidered to see if
(i.e. collections of information) will be aggregation and scraping are allowed
available through an API, others are for commercial use. Crediting the source

10 may 2016
 Q&As

3 SIMPLE STEPS
What is the best resource
for learning how to apply
a11y on websites?
Anneke Sinnema, Enschede, NL

GC: There are a number of helpful

resources you should look into. These
are some of my favourites.

Responsive breakpoints The right breakpoints depend on the content and design you’re working with

of the images and descriptions will not ACCESSIBILITY

protect you on its own. LABEL WRAPS
Should labels wrap all inputs or only THE A11Y PROJECT
RESPONSIVE DESIGN checkboxes and radios? This is one of my favourite
BREAKPOINTS Mike Riley, MD, US resources. It is a collaborative project
What are the best media query breakpoints HP: Wrapping an input in a label makes that strives to make accessibility easier
to use for responsive web design? the label itself clickable. It’s possible and to understand. You can find accessible
Rob Thomas, TX, US legitimate to wrap any field in its <label> pattern libraries, plus a checklist that is
SJ: It depends on the site. The design element, but it’s frequently done for helpful for beginners.
and content should shape the layout’s checkboxes and radios because they’re
breakpoints. Start with your small- small and tricky to target with a mouse
screen layout, make your browser click. It’s not well known, but using a
window larger until the design starts to for attribute on the <label> pointing at
feel too wide or difficult to use, or the line the input’s ID will also make the <label>
length of the text columns exceeds 75 clickable. For radio buttons, clicking the
characters or so. Check the width of the <label> would select it. For basic text
window and create a breakpoint to adjust inputs, clicking the <label> simply places SIMPLY ACCESSIBLE BLOG
the design for all viewports wider than the cursor inside it, ready to type. Accessibility is not just ticking
that. Repeat as necessary all the way up checklist boxes, so it can be helpful
to your largest layout. LEGAL to delve deeper. On this blog (netm.ag/
NEW COMPANY simple-279) there are fantastic articles.
WEB TRENDS If my side project is successful should I spin Search through the archive for clarification
NEW FRAMEWORKS it off into a newly incorporated company? on any confusing topics.
With the web constantly evolving, how Martin Fraser, Fife, UK
do you decide what to keep up with, what HB: As a private company, incorporating
to ignore or specialise in? is a big step up. Your side project will
Michael Groen, NL become its own entity, and you will be
SJ: My approach is to try to maintain running that entity rather than your
a general understanding of the purpose project. Your personal financial liabilities
of new technologies and frameworks as will be limited, but your administrative
they gain popularity and standardisation burdens will increase exponentially. WEB AXE
in browsers. Often, I won’t research a You’ll need to appoint a management Web Axe (www.webaxe.org) is
particular technology very deeply until team who are also shareholders in the a regularly updated website and
I need it in my work, but it’s good to business, and you must file a raft of podcast with plenty of resource roundups.
understand the problem it solves so financial statements. Once you’re lucky Its Twitter account is also worth following
you can make informed decisions about enough to reach that level, speak with for all the latest accessibility news.
when it might be useful. your accountant.

may 2016 11
EXCHANGE Q&As

WEB DESIGN
TOP TRENDS
Flat/Material’s been popular for years. Any
idea what direction design will go next?
Peter Pec, SI
GC: I think we’ll see more 3D design,
especially 3D animation. Although Flash
as a technology became unpopular due to
accessibility concerns and a push towards
web standards, some of the most creative
web design work was once in the hands of
Flash developers. Now CSS animation is
becoming popular, I think we’ll see more
well-considered design that challenges
our expectations, and (hopefully) fewer
cookie-cutter templates.

Copyright exceptions Some limited use of copyright works without permission is allowed
ACCESSIBILITY
FORM FIELDSETS
Should every form have a fieldset, even desist within 72 hours. Almost always, been updated, and can often result in
if there’s only a single context (address, the plagiariser will comply, but a few pages requesting more CSS than they
email subscription)? will become difficult or abusive. The actually need. Fortunately, HTTP/2 is
Mike Riley, MD, US important thing is that you have evidence quickly making its way onto the scene.
HP: You have to think about the benefit to you have contacted the plagiariser and This improves the ways browsers
users. A <fieldset> on its own doesn’t offer tried to negotiate with them. You can communicate with the server – HTTP
anything more than a <div> element – it’s then either use the IPO’s mediation requests aren’t as costly, so keeping files
just a wrapper. If there’s only one field, service, file a takedown request with separate will become good practice. Test
an extra wrapping element is probably the web host where the material resides, your pages with a tool like webpagetest.org
redundant. I’d only use a <fieldset> where or take legal action. and make an informed decision.
a <legend> can offer information that
applies to multiple fields. For a single PERFORMANCE LEGAL
field, all the clarification you need should FILE OPTIONS COMMERCIAL ADS
be in that field’s <label> . When the input Is it better to link to one large CSS file used Can I use any TV (video) or radio (audio)
is focused, screen readers will usually site-wide, or multiple smaller files only commercial ad in my website without any
announce the <legend> text, followed by where needed? legal problems?
the <label> , so check they make sense Mike Riley, Baltimore, MD Enrique Vargas, Mexico City, MX
when read out in this order. SJ: Traditionally, it has been best practice HB: No. There are a range of issues
to keep HTTP requests to a minimum, to to consider, from terms of service to
LEGAL reduce demands on the browser. Also, we intellectual property to age restrictions.
COPYCATS tend to reference CSS files at the top of an Use an ad network; this ensures the
A designer develops her own product then HTML document – because the browser advertisements are fully licensed for use
sees exactly the same graphics and layout will generally only render the page and can be removed from the site if they
used by a different company. What to do? content when all the CSS files are loaded are found to be unsuitable.
Suzanne Stecker, Boulder, CO and ready, it’s best to minimise the time
HB: If your intellectual property it takes to do this.
rights have been infringed, and the Of course, we often work with many
infringement does not qualify as an CSS files while maintaining a site, so it
exception to copyright (netm.ag/except- has become common to combine these
279), the first thing to do is contact the into one file when preparing them for
plagiariser in writing. Politely inform delivery to the browser. This means
them you believe they have copied your fewer HTTP requests, and tends to be
work without permission. Back up your beneficial for subsequent page visits as
claim with source files, contracts or other the entire CSS will be cached. However,
evidence that you are the originator of it also means re-downloading all of a Top trends First popularised by Microsoft’s Windows
the work. Then, request they cease and site’s CSS after only a portion of it has Phone, flat design has been around for some time

12 may 2016
 NEW YORK 22 APRIL 2016

Learn cutting-edge CSS, JavaScript, user experience

and web performance techniques, and much more!

CAMERON MOLL DAN MALL SARAH DRASNER UNA KRAVETS

DESIGNER AND AUTHOR CREATIVE DIRECTOR SENIOR UX ENGINEER DEVELOPER
www.cameronmoll.com www.superfriend.ly www.trulia.com www.ibm.com

TICKETS ON SALE NOW

www.generateconf.com
 People, projects
& paraphernalia

THIS MONTH FEATURING...

SIDE PROJECT OF THE MONTH 16 CLIENTS FROM HELL 17 WORKSPACE 18

Frogs and lily pads help coders master Some over-zealous Photoshopping William Smith shows us Motley Agency’s
flexbox in Thomas Park’s new game threatens to offend an important client office – also the home of the Moomins

BEYOND PIXELS 20 NEED LIST 21 EVENT REPORT 23

Amber Leigh Turner shares the relaxing Stuff we want, including pocket notebooks Nathan Riley reports on Awwards’ recently
benefits of pouring your own candles to remind you of the principles of RWD launched Amsterdam conference

may 2016 15
FEED
Side project

FLEXBOX FROGGY net: Do you think games make learning easier?

TP: If they’re designed well, absolutely. Games
have three things going for them. They’re interactive,
Thomas Park so you can play with cause and effect and start
layouts with a cute positioning game developing an intuition for what’s going on. They’re
scaffolded, so in the best cases you get a smooth
SIDE PROJECT OF THE MONTH learning curve that guides you from beginner to some
higher level of expertise. They’re fun, so they invite
net: Where did you get the idea for Flexbox multiple play-throughs and mean you don’t mind the
Froggy (flexboxfroggy.com)? challenge of learning a new subject.
TP: A couple of years ago I did some work at Mozilla
on a tutorial for its code editor Thimble. We used an net: Did you encounter any challenges?
example tutorial that involved positioning furniture TP: One was the game art. I experimented with
in front of windows and doors to block zombie different styles, ranging from more realistic to pixel
intruders. The tutorial used absolute positioning, art. In the end I went with a flat design where I could
INFO
but with CSS flexbox coming into its own, I realised it get away with constructing the art using simple
job: HCI and computer
education researcher, could be used in a similar way. The idea really started polygons. A second challenge was that while most
Drexel University to crystallise last fall, when I spoke to Luke Pacholski, of the flexbox properties fit well within the game’s
w: thomaspark.co the creator of CSS Diner (flukeout.github.io), which mechanics, there were a few (like flex-grow and
t: @thomashpark was a huge inspiration. flex-basis) that I wasn’t able to make work. I haven’t
overcome that one yet, so if anyone has ideas, please
net: Why did you go for a frog theme? get in touch!
TP: The goal of Flexbox Froggy is to use the flexbox
properties to position the frogs on their respective net: Do you have any more games in mind?
lily pads. I initially brainstormed a bunch of ‘key TP: One game idea my Drexel colleague Meen Chul
and lock’ pairs with distinct colours and shapes. Kim and I have been discussing is along the lines
Some ideas were bird and nest, hermit crab and shell, of the classic Lemmings. You get specialist miners
bumblebee and honeycomb, and eel and seaweed. I that represent different computational concepts like
focused on the frog theme because my limited artistic conditional and iteration, and you have to use them in
abilities were already being maxed out and the name the right combination to dig mines through growing
was too good to pass up. obstacles. Stay tuned!

16 may 2016
 Feed

HOW TO

MODERNISE LEGACY CSS

Bringing an old site into the
modern era can be tricky, so we
asked our Twitter followers how
they get CSS up to date

REVIEW AND REARRANGE

@theonico85 says, “review code,
and (slowly but surely) move

CALL BEFORE YOU PHOTOSHOP

snippets into smaller partials to
improve at later date. Test, test,
test!” @dalecruse agrees: “Take
inventory first. You can’t throw out
Exclusively for net: the latest in a series the garbage until you know what
of anonymous accounts of nightmare clients you have.” But @theonico85
reminds us to be careful: “Even just
CLIENTS FROM HELL moving CSS around can have
adverse effects.”
When I first got started as a graphic We called the client to let him know his signs
designer, I was working as the pre-press were ready. He was so excited by the turnaround
person at an outdoor print shop. One day, we he said he would drive in with a truck and pick up TAKE IT SLOW
got a cold call from a guy running for mayor in the order himself. We set up the sales floor with “Painfully,” says @iandevlin, who
a city about 90 minutes away, who wanted to us all his signs arranged from one wall to the other warns that a full modernisation
to put together a range of outdoor campaign and waited for him at the front. takes a serious amount of
signs. We took the job. He was a nice guy and The client pulls up. Steps out of his truck. patience. “Reconsider every code
had a good design brief – plus, the order would Approaches the door. And there, on his forehead, construct and mercilessly kill
be enough to meet the sales target for the is a huge purple birthmark – the ‘ink blotch’ I had every one that doesn’t need to
shop for weeks. perfectly airbrushed away. He came in and looked be there,” adds @dalecruse.
This was before scanners were common or around, agape. @CHEWX suggests Sassing it up:
cheap, so later that day, he sent a courier over We all stood there like woodland creatures “Copy and paste from CSS to
with his headshot for all the signs. When he caught in headlights, waiting for him to react. SCSS and slowly modularise.”
arrived, we saw the envelope had been rained No one moved or breathed. We thought we @ryannoondesign agrees,
on, and the photo was not in a sleeve. We gently were about to get chewed out and have to and also prescribes “a good
Illustration: Ben the Illustrator huddleformation.prosite.com

pulled it out and noticed a bit of water damage redo everything. SMACSS treatment.”
– but nothing I couldn’t fix in Photoshop. It also Then, after a couple of minutes of him closely
had what we figured was an ink blotch on the inspecting the signs:
man’s forehead from the postal ink getting wet JUST DON’T
and bleeding through the envelope. Client: These look great! And you even took out @LuckychairNews wouldn’t
My manager instructed me to scan the photo, my birthmark. Cool! bother. He comments: “Retire
airbrush it and lay out the signs. No one bothered legacy code and rewrite!”
calling to ask first – the timeline was tight, and We nearly fell to the floor in relief. @LucPestille has a similar
we assumed anyone would want their photo approach, and says he’d modernise
retouching before being blown up to eight-feet “with a big stick, a burlap sack,
tall. The production crew managed to put all the a bonfire and a cup of tea.”
signs together over the course of two days. clientsfromhell.net And @blucube is also inclined to
agree: “Delete delete delete delete
delete delete delete delete delete
delete. Start again.”

may 2016 17
 6

1
4

MOTLEY CREW to have a game – though they

should be warned that Niko ‘the
sales guy’ is just as competitive
William Smith introduces Motley Agency’s swanky as you might expect.
Along with a couple of fighting
sport participants, we also have
WORKSPACE some part-time rockstars at
Motley. We keep a guitar [4]
At Motley we do everything Moomin. Our biggest success story handy for when inspiration
from new business strategy is Moomin.com, and the now-spun- strikes (and it’s not the digital
to service design, UX and visual off company still shares our office transformation kind).
design, product development, with us. This little fellow [1] There’s eating your own dog
operations and growth. We work brightens our days (both literally food and then there’s drinking the
with exciting new startups and big and figuratively). offerings of your own boutique
Finnish companies that wish they We’re pretty smart, but there’s omni-channel artisan wine store.
could be exciting new startups. no harm in getting smarter. The We hide a stash in our secret globe
Our office is right in the centre library [2] is where that magic bar [5], and there’s even more in
of Helsinki, on the top two floors happens: business, psychology, the sideboard.
(and roof terrace) of Lönnrotinkatu management, marketing, design Not only handsome modern
5. It’s the former headquarters of and a smattering of tech. We’re design, but our fancy light fittings
one of Finland’s oldest insurance mostly just reading Strategyzer’s [6] are also the perfect place for
firms and is almost certainly the Value Proposition Design though. a collection of long-lost ping pong
swankiest Mad Men-inspired office However furiously you are balls to somehow end up.
occupied by scruffy designer-types typing, hunched over that poor,
Motely Agency (www.motleyagency.com)
with beards in all of Finland. overworked MacBook, it’s not
PROFILE

is a web design agency based in Finland.

If we had to pick our company exercise. For that, we have a ping William is a growth hacker and full-stack
spirit animal, it would be a pong table [3]. Visitors are welcome Scotsman

18 may 2016
FEED
Beyond pixels

STUFF I LIKE

NINA FREEMAN
Game designer
www.ninasays.so

CANDLE-MAKING
FLIXEL
When I first started making
games, some friends
introduced me to Flixel – an
open source AS3 game This month … the methodical process of pouring soy
library. It’s straightforward candles helps Amber Leigh Turner wind down
and fits my needs as a
beginner programmer. BEYOND PIXELS
It taught me all the basics
I needed in order to graduate By day, I’m a self-employed designer and bottles to make interesting holders. I was able
to languages like C++. marketing consultant who helps clients to really flex my creative muscles.
www.flixel.com establish and build visual identities to meet their My family and friends loved the pictures of the
marketing goals. I love helping clients create a candles I was making, so I started selling them
visual identity to use throughout all of their through Facebook. Soon after, I gave my candles
DISNEY TSUM TSUM marketing and branding collateral. a name (Candleflare) and opened an Etsy shop.
I travel to a lot of events and Working as a designer and marketing A creative hobby outside of my job helped me
my airport time-passer is consultant means I spend a lot of time on the strengthen my mental health, relieve stress and
Disney Tsum Tsum, a simple computer – more than I’m willing to admit. avoid burnout. The best benefit, however, is that
match three-style game. You While I love what I do for a living, so long in front I found myself motivated again in my design
swipe to match a row of of a screen can be stressful and taxing. Feeling business. While you wouldn’t necessarily think
digital Tsum Tsum plushies. unmotivated and on the verge of burnout drove that graphic design and candle-making could
I am shamelessly addicted me to find another creative outlet that would pull influence each other, I learned a great deal about
to these toys, and have a me away from the computer when my work was what it takes to experiment, create a product,
pretty huge collection. done for the day. design for it, and bring it to market – something
netm.ag/tsumtsum-279 I’ve loved candles since before I can remember, I haven’t had experience with before. I’ve gained
so making my own seemed to be a perfect fit. insights I now use in my business to help better
I researched candle-making on Pinterest, understand my clients and their goals.
GIRLSCAMERA and found so many creative ways to make them Candle-making is a great outlet for me to
GirlsCamera is an iPhone app and the containers in which they are displayed. experiment, relieve some stress, try new things
for people who like to cover I purchased a soy candle kit and made my first (creatively and in business), learn as I go, and use
their selfies in adorable candles with my mom. It was so relaxing and my new knowledge to help my clients. Plus, my
stickers. GirlsCamera has a peaceful to go through the methodical and house always smells amazing.
great DIY feature that lets structured process, from measuring the wax
you draw stickers and share and oil, to melting, picking a container and
Owner of January Creative in
them, so the library is huge. pouring the wax.
PROFILE

Nashville, Tennessee, Amber

I’m not sure how I’d decorate After making my first candles, I started to (@amberlturner) has been a
my selfies without this app. experiment with different candle containers, self-employed designer for over
netm.ag/kawaii-279 even learning how to etch glass and cut wine eight years

20 may 2016
 Need list

NEED LIST

STUFF WE WANT
Small objects of web design wonder: from retro UX posters
to hotly anticipated VR headwear

1 2 3

RESPONSIVE DESIGN NOTEBOOKS £12 OCULUS RIFT $599 GET READY FOR CSS GRID LAYOUT $6

4 5 6

UX POSTERS SPRINT $28 VALIDATING PRODUCT IDEAS $39

What we think
(1) Carry the core principles of RWD wherever you go thanks to these notebooks designed for your back pocket (netm.ag/notebook-279).
(2) It’s finally here! The Oculus Rift offers an immersive VR experience for tailor-made games and content. But you probably knew that already
(netm.ag/oculusrift-279). (3) Rachel Andrew walks through the cutting-edge essentials of CSS Grid Layout in this guide (netm.ag/grid-279).
(4) Remind yourself of the web design fundamentals with these posters inspired by vintage propaganda artwork (netm.ag/uxposters-279).
(5) In one working week companies of any size can solve problems and move forward. Find out how from three partners at Google Ventures
(netm.ag/sprint-279) (6) Inspired by Tomer Sharon’s column (p37)? Discover more about user observation in his book (netm.ag/productideas-279).

may 2016 21
 NEXT
MONTH

MASTER BROWSER
DEV TOOLS
We reveal how to get the most out of Chrome, Firefox,
Safari, Edge and Opera when building websites!

PLUS
Combine the power Get started with 7 hidden gems
of SVG and D3 Project Comet, of the GreenSock
visualisation Adobe’s new UX tool Animation Platform

ISSUE 280 ON SALE 21 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
 Feed

EVENT GUIDE
NOW WHAT? CONFERENCE
DATE: 13-14 APRIL 2016
LOCATION: SOUTH DAKOTA, US
With top-notch speakers
including Facebook’s product UX
and content strategist Jonathon
Colman, Now What? Conference
offers two days of talks and
workshops to help you maintain
and improve your site.
2016.nowwhatconference.com

CONVERGE SE

AWWWARDS AMS
DATE: 13-15 APRIL 2016
LOCATION: SOUTH CAROLINA, US
With its vision of a united,
Nathan Riley stocked up on Dutch treats and design thriving web design community,
Converge SE has grown into one
inspiration at the Awwwards Amsterdam conference of the most popular events in the
US. Featuring Cards Against
EVENT REPORT
Humanity’s Jenn Bane, Adobe’s
Bradee Evans and CodePen’s
DATE: 27-29 JANUARY 2016 The day ended with a fantastic presentation by Rachel Smith, this promises to
LOCATION: AMSTERDAM two members of the creative team at Resn (pictured be an inspiring event.
URL: conference.awwwards.com/amsterdam-2016 above), who discussed the importance of designing www.convergese.com
for the concept and client rather than our own
Although a relative newcomer to the web personal ambitions. The duo also touched on their REACT AMSTERDAM
events scene, the Awwwards conference in ideology of pushing boundaries and rethinking our DATE: 16 APRIL 2016
Amsterdam was nothing but inspiring, professional perceptions of what a website truly is, a concept that LOCATION: AMSTERDAM, NL
and educational throughout. From the point we went down very well with the creative audience. This conference is “a celebration
arrived at the Royal Tropical Institute in true British To top off a fantastic couple of days we were of three good things coming
tourist style (i.e. late because we’d got lost), it was moved on to a former chapel-turned-events venue together: React and spring in
clear we were in for a fantastic couple of days. for an evening of networking, complete with a buffet Amsterdam”. There are talks
The first day kicked off with an eye-opening talk and open bar. It provided the perfect opportunity to from PayPal’s Jamis Charles
from Anrick Bregman of UNIT9, giving a run-through pick the brains of some of the speakers, as well as and Facebook’s Tadeu Zagallo.
of the incredible work they’ve been doing in the VR the lucky individuals who had picked up trophies Grab a ticket to discover what
space. If that wasn’t enough to get everyone’s brains at the Awwwards prize-giving ceremony that had React can do for your apps.
ticking, Bregman’s talk was immediately followed by taken place earlier. www.react-amsterdam.com
Huge’s Josh Payton, with some high-energy insights My biggest takeaway from the event was the
into the processes and projects at one of the most realisation we are entering an exciting new age GENERATE NY
globally respected agencies. To wrap up the day, the of web design that encourages the experimental, DATE: 22 APRIL 2016
guys from MediaMonks took to the stage to explain welcomes the wacky and embraces new media. Not LOCATION: NEW YORK, US
the importance of combining video production and forgetting the epic selection of edible Dutch treats net’s very own conference is back
Photography: Bebokeh Studio

web to truly connect users to a brand. provided over the course of the two days! in New York for its third year.
The morning of the second day provided a real Featuring a truly stellar lineup
mixture of speakers. One of my highlights was Greg of speakers, including Cameron
Barth, who gave a very honest account of his career Moll, Dan Mall, James White, Una
PROFILE

Nathan is the design director and

and how creating a personal project on a shoe-string co-founder of Green Chameleon Kravets, Tim Kadlec and more,
budget paved the way for the mind-blowing (www.greenchameleondesign.com), it’s the one not to miss!
portfolio of work we see today. a creative agency based in Bristol generateconf.com/new-york-2016

may 2016 23
SUBSCRIBE TO NET
GET THE NO.1 CHOICE FOR WEB DESIGNERS AND DEVELOPERS
DELIVERED TO YOUR DOOR, YOUR DEVICE, OR BOTH

PRINT EDITION ONLY DIGITAL EDITION ONLY

Take out a print subscription to net and Take out a digital subscription to net
get your copy before it hits the shops. for on-the-go access to our interactive
Each issue is packed with the latest web edition, with streaming screencasts,
trends, technologies and techniques extra images and more

FROM SAVE UP TO FROM SAVE UP TO

29 31
% %
£55
BASED ON AN ANNUAL SUBSCRIPTION
£45
BASED ON AN ANNUAL SUBSCRIPTION

Terms & conditions: Prices and savings quoted are compared to buying full priced print and digital issues. You will receive 13 issues in a year.
If you are dissatisfied in any way you can write to us at Future Publishing Ltd, 3 Queensbridge, The Lakes, Northampton, NN4 7BF, UK to
cancel your subscription at any time and we will refund you for all un-mailed issues. Prices correct at point of print and subject to change.
For full terms and conditions please visit: bit.ly/magterms. Offer ends 30 April 2016
 ARE YOU A WEB
PROFESSIONAL?
GET OUR PRO PACK
SEE PAGE 51

PRINT & DIGITAL EDITION

Enjoy a combined print and digital subscription, and take advantage
of print as well as exploring the digital experience on the go

GREAT REASONS TO SUBSCRIBE

FROM
Print edition delivered to your door SAVE UP TO
£66
54
13 issues in a one-year subscription
%
iPad and iPhone edition download
Android edition download
Money-back guarantee

myfavouritemagazines.co.uk/NETMAG16
Opinions, thoughts & advice

WORKFLOW

PROGRESSIVE
ZERO UI
Andy Goodman explores how, as we move
towards a mesh of connected devices, user
interfaces need to recede into the background
28
FRAMEWORKS
Evan You walks through
the different framework choices
for developers, and introduces
an exciting new option
The world of frontend development
today is an intimidating one. With so
many frameworks and libraries, it can be
INTERVIEW 32 quite difficult to figure out the best choice.
Filament Group co-founder Patty Toland on We keep seeing beginners asking the
the benefits that only open source can bring, question: Which framework should I learn?
and the dangers of ignoring performance The answer is almost always: It depends.
You have to pick the right tools that fit the
constraints of each project.

BIG FR AMEWORKS
It can be tempting to go with a full-featured
framework that claims to have solved all
the hard problems for you. However, it will
only be a good choice when you are indeed
facing the problems these frameworks are
designed to solve.
Q&A 41 Are you building a fully-fledged single-
Developer and engineer Tim Holman chats page application that requires client-side
about his dream job at CodePen, quirky side routing, hundreds of components and mul-
projects, and dealing with career setbacks tiple teams working on different features
 Opinion

in parallel? If the answer is no, big frame-

works are probably not for you.
In trying to deal with the complexities
of large-scale applications, frameworks
introduce complexities of their own in the
form of extra layers of abstractions and
tooling requirements. You have to first
conquer a steep learning curve before
becoming productive. While for a large
project this is probably a wise price to pay,
it’s total overkill for simpler scenarios.

MICRO-LIBR ARIES
Many developers advocate for the idea of
building your own stack with micro-librar-
ies. This approach gives you the utmost
flexibility: you can ignore the things you
don’t need and you get to decide every
part of your stack. This is great for simple
projects where all you need is a few micro-
libraries that solve specific problems.
However, if you extend this strate-
gy to larger projects, you’ll find yourself
having to make so many choices in order
to build a suitable stack that it leads to
decision fatigue. Moreover, the wiring
and plumbing required to make sure eve-
rything works well together can quickly It’s possible to create a framework
become overwhelming. It takes a lot of
experience to get it right, and if you aren’t
a seasoned developer, your code may end
up much less maintainable than desired. simplicity for small projects and
VIEW LAYER-CENTRIC a full-featured stack for large projects
There is a third category on the library-
framework spectrum: the view layer- rate and there is no single ‘best’ stack. This is what I call a ‘progressive frame-
centric libraries. The common trait in Again, this can lead to decision fatigue. work’, and I believe Vue.js qualifies as one.
this category is that libraries provide a For the simplest use case, you can pull it
standalone, ready-to-use view layer for PROGRESSIVE down from a CDN and get the benefits of
efficiently rendering dynamic content and It’s possible to create a framework that reactive, declarative data bindings with no
handling user interactions. This is often offers the best of both worlds: simplicity set-up at all.
sufficient for simple projects. for small projects and a full-featured stack For really ambitious projects, you can
At the same time, they can tap into their for larger ones. The key is that the user use the official command tool to scaffold
ecosystems of tools, libraries and conven- can scale up the framework’s complexity a recommended stack with the best-in-
tions to handle more demanding scenarios. incrementally, when the project demands. class development experience. There are
The aim here is incremental complexity: To achieve that, the framework must also official libraries to deal with common
don’t over-engineer it if the size of the be divided into incrementally applicable needs such as client-side routing, Ajax data
project doesn’t justify the overhead. parts. Start with the view layer as the core. fetching and touch gesture handling. If you
React is a great example in this category. Then add routing, data persistence, build think the idea of a progressive framework
Its core library is just a view layer, but its tools and higher-level architecture. These is plausible, check it out at vuejs.org.
community has created tools and libraries parts should work well together, but they
to fill in the gaps. The only issue is that should also be decoupled: so the user is free Designer and frontend engineer Evan
PROFILE

contributors have such diverse opinions to use them one at a time or all together, or (www.evanyou.me) is the author and maintainer
that the ecosystem has a very high churn even swap some out for custom solutions. of Vue.js, and a core developer at Meteor

may 2016 27
VOICES Essay

28 may 2016
 Essay

INTERFACES

ZERO UI
Illustration by Ben Mounsey

Andy Goodman explores a possible future in which we don’t

need complicated interfaces to interact with our products

Zero UI has been sometimes misinterpreted as As we move into a connected world where objects,
meaning getting rid of the interface entirely. What people and environments are all joined together by a
it actually refers to is a process where many of the visual mesh of invisible electronic tethers, the decision making,
interfaces we currently spend so much time with recede the services we want, and the results we expect from our
into the background, leaving us open to engage with the interactions become exponentially more complicated.
stuff that is important and useful to us. It is analogous Not only will a system have to predict what someone
to inbox zero, where we strive to achieve a blissful state wants to do next, but it will also need to know where
in which everything is dealt with, calm and invisible. If they are, where they are heading and what their intent
that is possible, of course. is. It will be about how we as humans interact with entire
I started my career as an interaction designer in 1994, systems, and how the constellations of things around
although it wasn’t called interaction design then. us become part of an endless dialogue between us and
My job title was probably ‘graphic designer’, and since the world.
then I have been labelled a UX designer, experience I don’t think there is a huge groundswell of opinion
designer and service designer. What we can deduce bemoaning the terribleness of interactive systems,
from these titles is that the object being designed has products and devices. Quite the opposite in fact; we seem
become less tangible over time, and less to do with to be entranced by them all. And why not? The devices
interactions happening on the screen. I’m not sure what are beautiful, the systems are intelligent and the
people that practice Zero UI will be called, but it will be services make life so much easier. A few dissident voices,
something different again. from the likes of Sherry Turkle, have put together pretty
strong arguments for the social and emotional dissonance
ELECTRONIC MESH that our addiction to electronic media causes. But in the
This shift away from the very controllable – although end the benefit the digital world has brought us far
quite primitive – environment of screen and pointer exceeds the problems it has caused.
means the things we are trying to do are becoming more Nevertheless, we can all agree that removing the
complex. They now have to take into account a lot more complexity these devices bring into our lives would be a
ideas around human behaviours, motivation, emotion, genuine improvement on the state of things. Not just for
and all kinds of weird things like that. the older generations, who try as they might are often
We’ve always had to bring aspects of psychology confounded by the intricacy and closed-shop paradigms
and perception into our work, admittedly in a pretty of software, but for all of us that have ever struggled
amateurish way most the time. Understanding what with an update or service switch.
would make someone click a button, how users would
retain information, and the barriers to committing to a VISUAL CREATURES
decision is important – but for all the elegance of the The phrase ‘Zero UI’ is designed to provoke people,
interfaces we have designed, they are all two-dimen- because as designers we spend a lot of time thinking
sional, with simplistic cues and triggers. about the way things look, and not much time thinking

may 2016 29
VOICES Essay

about anything else. It is inevitable because of the way go and design a whole different set of patterns, but they
platforms and computer interfaces have always been, probably wouldn’t be as good and would require people
and also the way that we interact with the world to learn new ways of interacting.
generally. We are primarily visual animals, and so we However, there is a whole set of more complex things
sometimes forget how important all those other senses we are trying to do now, which are really quite hard
are in conveying experience, and how important a part problems to solve. One example is the Uber app on your
of our memory and identity they are. Apple watch: in principle a genius simplification of the
If we think of the ways in which we can make use of experience – just open the app and call a car. But we all
those other senses, we can start creating interactions know how flaky GPS is, what if the car gets sent two
that become more intuitive, more pleasurable and blocks away? With such a simple interface the user has
more subtle; and that create less work for us. The objec- no way of adjusting the information to give the precision
tive is to be able to spend less time fiddling around required. So they end up checking on their phone and
with computers, but still achieve the same outcomes, the magic is killed. We will need multiple layers of fail-
enjoy the content they provide for us and the commu- safe and redundancy in systems to allow these types of
nications they enable. interactions to become commonplace.
The irony is that rather than delivering on the promise
of freedom, computers have in some sense enslaved us. COORDINATED SYSTEMS
Not in a Terminator or Matrix sense, but in a much more Imagine a Zero UI scenario where the user wants to travel
mundane way. It’s the fact that the battery life on our to the other side of the country. Leaving aside the booking

Because the machines haven’t been designed well

enough, it feels sometimes like we’re serving them rather than
the other way around. We’re constantly having to feed them
and keep them warm and keep them powered
phone isn’t good enough, or that we can’t work out of the plane ticket for now (the complexity of which
what’s wrong with our router that’s causing most prob- requires a detailed visual interface), all the systems that
lems. Who would have thought such banal things would enable you to get to your destination could coordi-
become such a major factor in our lives? nate, from the alarm that gets you up in the morning,
Because the machines haven’t been designed well to your coffee machine grinding a double shot, to the
enough, it feels sometimes like we’re serving them alert that tells you when to leave and that you need to
rather than the other way around. We’re constantly take the subway rather than trying to get a cab across
having to feed them and keep them warm and keep them town at that time of morning, to the system that allows
powered. Kevin Kelly’s seminal book What Technology you to walk straight through the pay barrier at the train
Wants alludes to this idea that machines are a kind of station, and so on.
domesticated animal that have evolved over time to get Recently Matías Duarte, Google’s VP of design, talked
us to look after them. about how atomised apps are the future of the mobile
experience, and how even computer power will be
ESTABLISHED PATTERNS distributed into smaller units, away from the device.
Let’s wind back and consider the problem interaction This is very close to the vision I have for Zero UI, but
design was there to solve initially. It was designed to help perhaps a bit more conservative (necessarily). I would
us understand how a computer or a machine works and love to see a world where we can go about our daily
provide an interface for us to operate it. When I was business without having to waste valuable brain
younger, I always knew I was going to do something to cycles on trivial things like making sure the cab finds
do with computers and design because I was the only one our exact GPS coordinate.
in the family that could programme the VCR. I would
think: this is really bad, why can’t it be easier? That is
PROFILE

the motivation of any designer. Andy (@goodmania) is a pioneer of the service

A lot of those purely functional parts of the UI have design industry and part-time futurist. He’s a
frequent speaker at SxSW, TEDx and O’Reilly,
been solved now, with the help of patterns that are pretty
and writes about emerging technology
good for simple kinds of interface problems. You could

30 may 2016
VOICES Interview

PAT T Y TOL AND

Words by Tanya Combrinck Photography by Daniel Byrne

The co-founder of Filament Group

warns of the repercussions of ignoring
performance, and explains why fixing
chaotic content is so satisfying

32 may 2016
Interview

INFO
job: Partner,
Filament Group
t: @pattytoland
w: www.filamentgroup.com

may 2016 33
 For Patty Toland, the top priorities when
making a website are accessibility and
performance. “Those are far and away the
most important pieces, ” she emphasises.
“Making sure the site is fault-tolerant,
that it works on slow networks and is usable
if you have a visual impairment or are using
a screen reader – those are essential right out
of the gate.”
Toland is co-founder of Filament Group,
a small agency that was voted Agency of the
Year in the 2015 net awards and is known for
its dedication to open source and principled
stance on building websites. Functional
problems, such as an intricate UI or a situation
where the complex must be communicated
in a clear way, are the team’s niche.
Filament came into existence in the early
2000s when Toland was working at another
company with her now-business partner Todd
Parker. When that closed during the dotcom
crash, a client asked them to continue on a
project, which they did under the banner of
their own agency. Within six months more
projects had arrived, and they needed to hire.
Accessibility came onto their radar when
they were joined by Scott Jehl, who had
previously designed projects for blind and
deaf users, and experienced how challenging
the web could be for them if it were not
designed and developed thoughtfully.
Ensuring the sites Filament Group delivered
were accessible to everyone soon became
central to their values. To this end, the team
began to focus heavily on progressive
enhancement, jointly authoring the book
Designing with progressive enhancement.
The second pillar of Filament Group’s value
system evolved organically out of the first.
“When you think about approaching design
from a progressive enhancement standpoint
– that is, you’re thinking of the most stream-
lined, functional, robust foundation for your
websites – then performance optimisation
naturally flows from that.” Toland notes that
optimising for performance benefits both
businesses and the wider community; better
optimised sites will be available to more
people, they will tax the networks less and
be more sustainable.

OPEN SOURCE PERKS

Filament Group is well known for its heavy
investment in open source projects, which
offer – as Toland describes it – “double bang
 Interview

for your buck”. They have introduced the transformed almost immediately into a and collapses. So there are some really in-
studio to a large community of smart, like- content strategy role. It was at this point she teresting and fun meta-structures you can
minded people that can contribute their found her true vocation. “It was very clear build into your system to make responsive
expertise to solving complex coding to me that a structural, systemic understand- screen designs and responsive interactions
challenges, as well as running rigorous tests ing of how content works was something I make sense.”
on its components to ensure they’re well really enjoyed, and was an area where I had Toland finds great value in articulating
structured. Open source work can also be something to offer,” she tells us. things that might otherwise go unsaid;
used in client projects to Building design digging into the nuances of the decision-
ensure these benefits are “There’s no other systems and style guides making process that underlies design choices
passed on. is Toland’s speciality. “I and exposing the system of reasoning.
“It has changed the way we could gain really like helping people “You get to a point where you can see that
way the company works
the exposure or work through the full everyone on the team starts to own the un-
and dramatically in- complexity of a problem,” derstanding of the system,” she says.
creased our visibility,” the insights we get she says. This might “The really satisfying part is when
says Toland. “There’s no mean auditing a website someone who is fairly new to the project
other way we could get us
from the open consisting of thousands finds an unprecedented problem that doesn’t
this kind of exposure, or source community” of pages, categorising the have an example in the system, and they can
the insights we get from components and justify- articulate why they think they need a new
participating in the open source commu- ing the existence of text. variation of a component. Seeing the tools
nity. It just makes us better.” Design consistency is key. Toland defines we’ve helped to develop take on a life of their
this as “building the visual, and structural own, and a kind of integrity that allows
SYSTEMS THAT M AKE SENSE language into a design project that provides people to work with them and be effective,
Toland began her career as a business writing the logical infrastructure so the pieces can that’s my favourite part of it.”
consultant and soon developed an interest fit together effectively.” Responsive design
in the way design could influence how a is throwing up some interesting challenges SHARED RESPONSIBILIT Y
message is perceived. Then, following a two- in this area, because now content structures One of the most important lessons
year stint with the Peace Corps in Ukraine need to have scalability built in. responsive design has taught Filament Group
(an exercise that taught her a lot about “how “The structural language needs to have is that good accessibility and performance
to articulate your base assumptions”), Toland not only a logic for a size and scale, but also practices are everyone’s responsibility –
took a job as a writer back in the US, which logical variations for how content expands individual designers and developers, client

may 2016 35
VOICES Interview

decision makers, and especially third-party

infrastructure companies like CMS provid-
ers, MVC platform makers, advertisers and
data tracking tools. The web is only as strong
as its weakest link.
Toland recalls when Filament Group
worked on the Boston Globe site in 2010
and 2011. “So much of our design decision- 16.3MB to 3.5MB, which on a typical 4G con- that is something that’s so worrying and
making process had to work around the ad nection resulted in a saving of about 25 worth talking about.”
network constraints, and there were little or seconds of page load time and a cost of about
no opportunities to think creatively about 32 cents in data. SHIFTING CONTROL
how responsive could work around the then- And research carried out by Pew Research Thankfully, it does seem like that discussion
fixed advertising units available.” Centre (netm.ag/pew-279) is shining further is happening. When we spoke to Toland, she
Ad networks and data tracking tools were light on the implications of technological had just heard about Brave, a new browser
a gatekeeping constraint back then, and decisions for users and being built by a team
remain so today: they add page weight and consumers. For example, “On the Boston headed by Mozilla co-
introduce processes that slow down perfor- it found that 19 per cent of founder Brendan Eich.
mance. But at the same time, if a site doesn’t Americans – usually those Globe project, so Brave blocks intrusive
work with them, the revenue model starts of lower income – are much of our design ads and trackers while
to break down. totally or heavily reliant giving users the option
“Journalism is vitally important – those on their smartphones for process had to work to accept respectful ads
people need to get paid, and ads are how
that happens,” Toland explains. “There
internet access. What’s
more, a sizable proportion
around ad network or pay sites directly with
micropayments.
needs to be a dialogue about how to solve of these routinely go over constraints” As well as providing a
these problems in a way that’s more princi- their data cap and have solution to a growing
pled, that gives everyone a better sense of had to cancel or suspend their service. problem, it is also sparking conversations
the value of what’s being exchanged.” Web development practices that invisibly about how much privacy users are being
eat up the data allowances of those who are asked to trade for content, and whether they
IRRESPONSIBLE DESIGN dependent on their smartphones are danger- even realise that trade is taking place.
Today’s web may be flawed, but Toland is ous, Toland emphasises, as this could impact Toland proposes a system that gives more
excited about changes on the horizon. The their ability to access essential content and priority to performance and accessibility,
launch of technologies like Apple’s built-in services or engage in society. In a similar and gives publishers the control they need
adblock in iOS9, for example, are bringing vein, she recalls a time when Filament Group to integrate ads more seamlessly. “I’m not
these issues to a larger audience. developer Maggie Wachs discovered that a sure where the incentive lies for people to
Toland cites an article published by The registration tool for refugees in Europe didn’t make that happen, but browsers [like Brave]
New York Times in 2015 (netm.ag/NYtimes- work without JavaScript. could be a good first step.”
279) that looked at the page weight of the “It’s profoundly irresponsible, ” she says.
top 50 news sites when Apple’s ad-block was “If you’re not conscious about those decisions Next month: We catch up with Cloud
enabled. Boston.com’s homepage went from you can put people in a risky place. I think Four’s Lyza Danger Gardner

36 may 2016
 Opinion

and interpreting. Let’s take a closer look at

these now.
The first step is to watch people as they
go about their daily lives – at home, work,
or wherever is relevant to the particular
product being built. Observing will help
you uncover not only what has happened,
but also why it happened.
At this point you also need to listen.
Learn the language people use in their
own environments, as well as witnessing
conversations they have with others.
Listening to people’s jargon enables you
to identify the words they use to describe
things. For example, when using online
banking, many people struggle to find
mortgage information because banks use
the word ‘loan’. Uncovering user jargon can
help you identify the language you should
USER RESARCH be using in your product.
While you’re doing this, you should be

USER OBSERVATION
paying attention to a variety of occur-
rences that might have implications for
users’ needs. Just standing there watching
what people do can be a challenging and
overwhelming experience if you don’t
Tomer Sharon explores how observation can help
know what to look for. Noticing and
us solve the problems people really care about paying attention to behaviours such as
routines, annoyances, interferences and
I live in North New Jersey, on the East My story isn’t unique. We all have so on turns ‘just being there’ into an
Coast of the US. For four years we problems that, for one reason or anoth- effective design tool.
rented a house with a detached garage that er, we work around instead of addressing To support your observations you need
we mostly used to store outdoor toys for our properly. In my story, the important to gather artefacts people use or create to
kids. Every winter, when the weather problem was not the frozen keypad – it complete certain tasks. These might signal
turned very cold, the keypad to open the was my relationship with my landlord. user needs or missing features or products.
garage door froze over and stopped It’s the same thing with product For example, if you were conducting an
working. Definitely a problem. development and user research. In far too observation in a grocery store, you might
When this happened, I would crawl many cases, people, teams and organisa- collect a person’s grocery list.
into the garage through a small window tions develop products that nobody needs Finally you need to interpret your
(which became smaller and smaller every and that do not solve any problems. Or findings. Figure out what the observed
year – I have no idea why) and turn the door even worse, they solve problems that users behaviour means and why the person is
system from automatic to manual. This don’t care enough about. doing it that way.
way, the kids were able to open and close User research can help you find valid
the garage while bypassing the frozen THE ART OF OBSERVATION and reliable answers to your most burn-
keypad. When spring arrived, I switched One of the most reliable ways to find out ing questions about your audience. When
the system back to automatic. how people are currently working around you go back to creating your product, try
I had a problem and found a bypass for a problem – and how much they care about to identify, validate (or invalidate) what
solving it. The issue was that it was the solving it properly – is through observa- your audience really needs, and how they
same story every year. The real solution tion. Although it’s not an easy technique are currently solving the problems they
was to pick up the phone, talk with my to apply, observing people in their natural really care about.
landlord, get a quote from a technician to context while using a product or service
fix it, argue with my landlord about the can go a long way towards establishing a
Tomer is the head of UX at work and living
PROFILE

cost, get another quote, and so on. Yet I deeper learning. space provider WeWork, and the author of
didn’t do that. I didn’t care enough about There are five key pillars in this process: Validating Product Ideas through Lean User Research
the problem to solve it properly. observing, listening, noticing, gathering (rfld.me/tsharon)

may 2016 37
VOICES Big question

DEBUGGING

HOW DO YOU
DEBUG ANIMATIONS?
The speed of some animations can make debugging tricky. Here, seven
developers reveal the tools they use to dig into code and fix any issues

S T E V EN FABRE PAT RICK BROS SE T

Founder, Easee DevTools engineering manager, Mozilla
www.stevenfabre.com www.medium.com/@patrickbrosset

Generally speaking I like to use the Chrome

Inspect Element tools, which are getting
Animations play an important
better every day. Instead of typing everything role in user interactions.
manually or doing the back-and-forth from
cubic-bezier.com to your text editor, you can now Specially crafted animations
change the animation’s speed and easing with
a slider and visual cubic-beizer graph editor.
not only look good but can help
Once I’m happy with the timing and easing of users make sense of changes in a
the animation, I like to enable paint flashing to
identify and fix elements that may potentially
user interface. Getting the perfect
make the animation jerky. animation, fine-tuned to progress
and last just the right way, is a trial
DUDL E Y S T ORE Y
and error process.
Designer and developer Tooling is key. Debugging
www.thenewcode.com
animations requires you to be able
First, I avoid typos by writing to see and edit CSS key frame rules
CSS animations in Sass, using right in the browser, and live edit
either CodePen or CodeKit – both
of which flag syntax errors. If I am
complex cubic-beizer curves. But
stuck with an unexpected result, more importantly, being able to
I work backwards: one simple pause, seek, slow down or speed up
check is to set my CSS animation(s)
an animation and edit its properties
to a single to { } declaration, which
allows me to ensure the elements at any time is essential. Both Firefox
I’m animating can actually reach and Chrome’s developer tools now
their final states. allow you to do just this.

38 may 2016
 R ACHEL NABORS VA L HE A D
Web animations advocate and consultant Web motion designer
www.rachelnabors.com www.uianimationnewsletter.com

Debugging CSS animation has become

CSS animations and transitions can infinitely easier recently thanks to new
be tricky to debug – especially in UI developer tools options in Chrome and Firefox.
These new animation inspectors have saved me
animation, where the movement is often loads of time! I use these because they have the
very quick. That’s why I like Firefox most features (though some are experimental).
Both have visual timelines and cubic-beizer
Developer Edition’s animation tools so editors for individual animations. Canary’s
animation inspector is my current favourite.
much. In the animation panel, I can scrub The editable timeline, playhead scrubber, and
through an animation or even a group playback speed control let me get a really good
look at what’s happening in the code.
of animations to see what’s actually
happening. If an animation has already BR YA N JA MES
run, I don’t need to refresh the page, just Freelance interactive designer
and creative coder
back that playhead up. I’m also looking www.bryanjamesdesign.co.uk
forward to trying out Chrome (Canary)
I don’t debug animations
DevTools’ new user timing measures to in any particular way – it’s
measure the performance of specific purely trial and error. Recently,
groups of animations at a time. I’ve started using my own small
personal group of transition sets
that I tend to stick to, so I’m getting
quicker at spotting errors with just
S A R A H DR ASNER
Senior UX engineer my eyes. My transition set is a
sarahdrasnerdesign.com group of variables declared as
descriptive names, for when
For JavaScript, I usually use GreenSock, which comes equipped with particular eases are necessary
timeScale(value) . This handy function allows me to slow a whole timeline
down so I can see how things are interacting. There’s also timeline.seek(value) ,
– akin to the standard set of ease-
which allows me to find a specific place in time. The longer the animation, the out , linear and so on, but a lot
more helpful this tool will be to your workflow. more bespoke and varied.

RESOURCES
TOOL TIME LISTEN UP ANDROID ANIMATIONS
So now you’ve got the basics of animation Hosted by Cennydd Bowles and Val Not to be outdone by Google Canary,
debugging, what next? Take your CSS Head, Motion and Meaning (netm.ag/ Android provides both hosted and
animation skills further with this list of coding podcast-279) is a podcast for web designers on-device tools to help designers perfect
tools compiled by Sarah Drasner (netm.ag/ devoted to all things motion. It covers the their animations. In this article (netm.ag/
debugging-279). It’s packed with straightforward history of motion design, principles you need android-279), Chet Haase covers the three
explanations and working examples to help you to know, mistakes to avoid and more, plus links most beneficial animation debugging tools
create beautiful, intuitive animations. to a wealth of further reading. for Android developers.

may 2016 39
 Q&A

this kind of thing too. I’ll be working on something

and remember something a site did three years ago
that could be applicable for this specific problem.

net: You’re building a collection of cursor effects ...

TH: I just thought it’d be fun. Particles are a great
little coding exercise for new people, and I was
brushing up on them a little. I don’t like code going
to waste, so I moved them into a library to live, and
I can just refer back to them at any time.

net: Do you think more people should loosen up

and have fun with the web?
TH: If anything, I’d say the web is getting weirder
every day. Different people like different things
though. Some people are happy to work on
architecture and systems. I was never one to
sit around and not join in on the games, so that’s
where I channel my energy. I definitely think some
people can take it a little too seriously, but that’s
true of every industry.

net: Do you like experimenting with new web tech?

Q&A
TH: It’s interesting; no single piece of technology

TIM HOLMAN
really gets me going, it’s more about what we are
doing with it. My eyes really go starry when I’m
trying to build something, and the new technology
is the key.

net: You have a degree in Games and Interactive

The self-proclaimed tinkerer talks about his Entertainment. Has this impacted on your work?
work at CodePen, and the fun side of the web TH: Not really. I feel like my degree did some broad
strokes over programming in general, but didn’t
net: Tell us about your work at CodePen ... really lead me down a creative path or a practical
INFO TH: CodePen is like a dream for me. I’m fairly sure path. I was fortunate enough to have a few people
Job: Engineer, CodePen I signed up in the first 10 minutes it was released. shove me in the web direction early, and I really fell
w: www.tholman.com It’s been a blast being part of the community that in love with it. Writing essays about ‘Are games art?’
t: @twholman really shapes the product as a whole. I kind of work Come on, who needs that.
on everything; if I have just 30 minutes I can work
on a bug or tiny feature, but if I have three hours, net: You’ve had a lot of highs and lows in your
I’m looking more at the bigger picture. This kind career so far (netm.ag/timeline-279). What advice
of workflow is perfect for me. would you give to others suffering setbacks?
TH: Setbacks can be pretty dangerous to a person
net: You have a lot of side projects – what do you creatively. If a big company turns you down, it can
get out of that? be hard to lift your chin up and get straight back
TH: I definitely feel a nag when I haven’t made into development. The recruitment process can be
something in a while. I guess in a way it’s expression, really brutal sometimes ... most of the time, actually.
but mostly I tend to want to make people laugh. When I’m in a dark spot like that, I try to create
All the strange and odd stuff I dig up can really something new. Something small or something big,
inspire new ideas. Plus, you never know what it doesn’t really matter. Once your head is working
hitches you’ll run into. Elevator.js, for example, on a problem, it becomes easier to forget about what
was a library to scroll to the top of the page was bothering you and move forwards.
(easy) but it ended up involving easing functions,
requestAnimationFrame, and detecting browser Tim Holman will be speaking at Generate NYC in April:
features. I tend to have a pretty good memory for www.generateconf.com/new-york-2016

may 2016 41
NEVER MISS AN ISSUE!

#277 MARCH 2016

Discover the future of CSS,
including CSS Shapes and
PostCSS. Plus, we reveal the
top design trends for 2016

SAVE UP
#278 APRIL 2016 TO 31% #272 OCT 2015
We reveal the UX insights
We show you how to top up your WITH A DIGITAL you can glean from Google
tool stack without spending a Analytics, and explore how
penny, and walk through the SUBSCRIPTION to design for smart devices
SEE PAGE 24
basics of CSS blend modes

GOT AN APPLE DEVICE?

Download net’s digital edition for your iPad, iPhone or iPod Touch

NETM.AG/NET-IPAD (UK), NETM.AG/NET-IPAD-US (US)

CATCH UP ON ANY ISSUES YOU’VE MISSED
BY DOWNLOADING OUR DIGITAL EDITIONS

#276 FEB 2016 #275 JAN 2016 #274 DEC 2015 #273 NOV 2015
We run down the prototyping Your guide to great UI design. Discover how to build perfect Join the Sketch revolution!
tools you need to sit up and take Plus: We introduce flexbox – the layouts without media queries, We help you make the switch
notice of in 2016, and show you CSS module that will help you and take a look at the 15 APIs to the new top tool. Plus:
how to get started with ES6 tackle complex site layouts that will solve your dev problems what makes a great portfolio

#271 SEPT 2015 #270 SUMMER 2015 #269 AUG 2015 #268 JUL 2015
We tackle the new design The freelance special: we Designers share their tips for We run down the 10 top tools
challenges presented by look at the pros and cons building a better web. Plus, you need to build responsive
the advent of wearable of going it alone, and share discover how to optimise sites, and introduce the
technology tips for landing big clients your sites for mobile Genesis Framework

PREFER TO READ ON ANDROID, PC OR MAC?

net is also available on Google Play and Zinio, as well as Kindle, Nook, Windows 8 and more

NETM.AG/NET-GOOGLEPLAY NETM.AG/NET-ZINIO
GALLERY Inspirational sites
ALLISON WAGNER

Allison is a frontend
developer living in
Philadelphia and
working at renowned
studio Happy Cog
w: www.alliwagner.com
Sensational design and superb development t: @alliwagner

TYPOGRAPHY, VIDEO, CONTENT FILTERING

WWW.THEFORECASTER-INTERACTIVE.COM
Nico Roicke www.nicoroicke.de

The Forecaster is an interactive extension to content filters help structure the information and
the documentary of the same name detailing the surface content that otherwise might get lost in the
investigation of financial advisor Martin Armstrong. sheer volume of information included. For example,
It’s intended as a research tool for viewers of the select ‘Exclusive video’ and ‘Front page headlines’
documentary, to help them unpick the complex and the layout changes dramatically.
backstory surrounding the controversial figure. I especially love how Roicke has handled video.
“One of the most pressing questions viewers will The stills on the site are given a half-tone overlay
have is if they should believe Armstrong and his treatment that reads very editorial and subversive.
forecasts,” says designer Nico Roicke. “We didn’t want On clicking play, a modal launches and users can
to give a predefined explanation, but all the information watch the video on YouTube, without the site-specific
that’s needed for them to find their own answer.” art direction. By folding external assets into a very
Typography is used to express hierarchy as well specific design system, Roicke was able to find the
as delineating different content types. Additionally, best of both worlds.

44 may 2016
 Inspirational sites

PARALLAX, TYPOGRAPHY

WWW.EPICURRENCE.COM
Rally Interactive www.beta.rallyinteractive.com

Salt Lake City-based studio Rally Interactive has become known for its
elegant, forward-thinking design and interaction work and this site is
no exception. It was created in support of Epicurrence 3, Dann Petty’s design
conference-slash-outdoor adventure in the snowy mountains of Colorado.
“The Epicurrence 3 site was a fast and chaotic labour of love,” recalls creative
director Ben Cline. “The goal of the site was to draw further attention to the
conference series as well as acquire invite requests for the third event. Aesthetically
speaking, the focus was on bold typography and a broken grid.”
Epicurrence, a portmanteau of ‘epic’ and ‘occurrence’, is an appropriate
description for the site itself. Employing parallax scrolling techniques to play
against the site’s broken grid; thin vertical lines that draw the eye down the
page; large, bold typography and subtle animation, the site leaps at users with “One of the best designed sites
kinetic energy and invoking a sense of adventure – a not-so-subtle prerequisite I have seen in a long time, great
for conference attendees (lift passes for skiing/snowboarding come bundled job, @letsgorally. Looks fantastic”
with conference tickets). It’s a clear measure of the site’s success that the
conference had garnered over 1,000 invite requests within two weeks of
launch, and I can see why.

may 2016 45
GALLERY Inspirational sites

SI T E OF T HE
MON T H

TYPOGRAPHY, FLEXBOX

WWW.SCIENTIFICAMERICAN.COM
AREA 17 www.area17.com

Science and technology magazine Scientific revival typeface called Brunel, by Paul Barnes and
American was in need of a redesign to closer Christian Schwartz of Commercial Type. So using
ally its print and digital touchpoints, and Brooklyn’s Brunel and visual elements similar to those in the
Area 17 more than delivered. Its design accentuates magazine were obvious choices. In the era of web
the respected 170-year old brand’s content through fonts, there is really no excuse for an editorial brand
careful treatment of design basics like typography, not to be using the same basic palette of typefaces
negative space, layout and photography. online as well as off.”
“Aligning the brand online with the strong From a frontend layout perspective, I was happy
personality of the print magazine was a goal of the to see the site using CSS flexbox effectively to support
design and the project overall,” says design director various layouts across screen sizes. The team has
Miguel Buckenmeyer. “The print magazine’s visual prioritised content to give a beautiful, elegant layout
identity was based on an exquisite English modern on different devices.

46 may 2016
 Inspirational sites

ANIMATION, CANVAS, PIXI.JS

WWW.ATIEVA.COM
Superhero Cheesecake www.superherocheesecake.com

Atieva is currently designing that the particles then quickly follow.

and prototyping a luxury electric “It’s a metaphor for the automotive
vehicle from the ground up. The industry,” says Atieva design lead
California-based company went Robbin Cenjin, “and the impact of
through a fairly extensive redesign companies like Atieva that think
with development partner Superhero differently and will make the market
Cheesecake in 2015, and their hard move in new directions.”
work paid off. Visually speaking, the Managing partner Rian Verhagen
site quickly conveys a commitment explains how the team created the site’s
to luxurious detail and emerging distinctive animations: “A lot of them
technologies. Every interaction, were first developed in After Effects.
from the point of entry into various From there on, the frontend team
sub-pages, is seamless. started recreating everything in code.
The HTML5 Canvas mouse-aware The interactive circle animations were
animations on the homepage panel built using Pixi’s graphics class and a
are particularly interesting, and nod lot of custom calculations.”
to the circle motif as a foundational I love how the animations don’t serve
design element. When a user moves a strictly ornamental purpose, and more
their mouse, they disrupt the particles broadly speak to how Atieva positions
forming the circle, creating new paths itself within the automaker industry.

“Finally SciAm
fans get an
experience
as noble and
distinguished as
the research and
writing the site
publishes. I wish
I had done it”
MICHAEL JOHNSON

may 2016 47
GALLERY Inspirational sites

CSS TRANSITIONS, HOVERS

WWW.POC-SCULPTURE.COM
Pier-Luc Cossette www.plcossette.com

P.O.C. is a beautiful little portfolio neutral palette, complementing the work

site for eccentric woodworker of the artist with great success.
and sculptor Pierro Caron, designed and Cossette’s eye for design is highlighted
developed by fellow Canadian Pier-Luc by his playful approach to layout. “The
Cossette. It’s chock-full of surprise and challenge was to create a grid as sexy as
delight, from the image loading effects it was uncommon. The key is to take time
to hover animations over the sculptures to think and rethink when designing on
themselves, through to the elegant display a special grid,” he explains. “I did extensive
of each sculpture’s details. research in an effort to find an original
With regard to tone, Cossette explains, way to present the artworks of P.O.C. and
“His sculptures are unique, spontaneous, make the user feel like they were viewing
bold, worked and reworked. They tell a an art exhibition.”
story and show the richness of one of our To this end, Cossette succeeds, as
most valuable resources: wood.” the site he created is truly a work of art,
This organic sensibility extends into highlighting the intricate work of a sculptor
the animations, photography, and warm, with its equally intricate design.

48 may 2016
 Inspirational sites

CSS ANIMATION, SVG

WWW.SWISSINCSS.COM
Jon Yablonski www.jonyablonski.com

Swiss in CSS is an experimental CSS constraints of client work. “I am a big

playground designed and developed believer in self-initiated projects, and
by Jon Yablonski. His inspiration for the when I decide to start one, I am mindful
project came from the International to choose an idea that speaks to several
Typographic Style (or Swiss Style) that creative pursuits,” he adds.
has been a key influence in his career. Swiss in CSS did just that: “I could build
“As a design student, I was enamoured a gallery to showcase these experiments
by the work of designers like Josef Müller- I had (re)created, while paying homage
Brockmann and Armin Hofmann and the to the style that had influenced my own
way they used typography, grid systems design sensibilities in so many ways. It
and shapes to communicate visually,” is a way of giving back, and I hope that
he explains. “It was a style that stood it influences the young designers to look
in sharp contrast to the predominantly back at the history of design.”
digital style I was surrounded by in the Yablonski gets creative in his HTML
late 2000s, which always seemed to be and CSS too. Instead of nesting div after
a bit too decorative and unrefined for div , he leans on generated content in
my taste.” :before and :after elements, as well as
The project, which started with CSS gradients, SVGs and CSS borders
Yablonski recreating some of his to recreate the famous Swiss Style he
favourite Swiss Style posters using CSS loves. Animation adds a layer to the work
animations and transitions, provided an the original designers could have never
outlet for experimentation outside of the imagined, but would surely love.

may 2016 49
GALLERY Inspirational sites

“The friendly
icons and well-
considered
animations make
this site a joy to
browse”
YESENIA PEREZ-CRUZ

ICONOGRAPHY, CSS HOVER EFFECTS, SVG

WWW.PARCOURSCANADA.COM
Locomotive www.locomotive.ca

Parcours Canada is a gorgeous site designed and tools and mechanisms were used interchangeably from one
developed by Montreal’s Locomotive to promote site to another. But more important, we were amazed that
Canadian tourism. Its purpose is to aid and inspire individuals, the pictures were small and of poor quality. They’re your
couples and families alike in the planning of custom trips best asset when selling holidays,” account director Daniel
throughout Canada. Savouyaud explains. “Our goal was simple: make people
There is a lot to love about this site: the art direction is embark on a trip before even lifting off.”
spot on, with meaningful and succinct iconography, a playful The attention to detail crafted by Locomotive – including
colour palette and gorgeous photography. The team has also peekaboo bonus-content hover states, CSS loading animations
taken performance and display density into consideration, on card-like blocks of content, and colourful large-format
employing SVGs for all graphical elements. photography – is a solid nod to a traveller’s playful sense of
Before starting work, Locomotive researched similar sites. adventure that surely inspires visitors to take the next step
“While studying the competition, we discovered the same and explore Canada’s vast wilderness.

50 may 2016
 YOU ARE INVITED
TO JOIN NET PRO
For more than 20 years, net magazine has been at the
forefront of web design and development. Join net Pro and
as a special introductory offer, you can save £30!

WHAT YOU’LL GET

13 issues of net in print and digital

Annual Industry Report worth £100

Discounts to industry events

including Generate

Inspirational design annual

worth £9.99

Monthly net Pro email newsletter

Special discounts from selected

design industry partners

WORTH
£371
JOIN TODAY VISIT www.myfavouritemagazines.co.uk/netpro
Terms and Conditions: Pricing and savings quoted are compared to buying full priced UK print and digital issues. You’ll receive 13 issues in a year.
Prices correct at point of print and subject to change. Full terms and conditions bit.ly/magterms. Offer ends 30 April 2016
Sublime design
& creative advice

THIS MONTH FEATURING...

DESIGN
CHALLENGE
FOCUS ON 57 This month ...
How does your About page look? Sam Kapila
explains how to use words, design and images
to open a window into your personality THEATRES
Y UNMIE K IM
PROFILES

Yunmie is a senior designer currently

working at UX agency cxpartners
w: www.cxpartners.co.uk t: @yunmie

JE MM A P R O C T OR
Jemma is the founder and managing
director of One Ltd
PROFILE 58 w: www.oneltd.co.uk t: @oneltd
We chat to product designer and developer
Mike Busby about how he’s shaking things K E V HO Y L E
up at successful financial startup BitGold Kev is the owner and designer of
Lancashire-based agency Iced
w: www.icedgraphics.com t: @icedgraphics

BRIEF
We’d like you to design a website for a theatre. It
could be a huge theatre in the West End or a smaller,
independent venue dedicated to uncovering local talent
and grassroots acts. Users need to be able to see
HOW WE BUILT 64 what’s on quickly, and book tickets easily.
Elespacio teamed up with a food advocate to
present a digital cookbook celebrating small
producers from around the world
 Design challenge

YUNMIE KIM

GLASS THEATRE
This scheme caters for different types of theatre fan, and takes the mystery out of choosing a seat MY MONTH
What have you been
doing this month?
After talking to people about their theatre
CLOSE UP Working on a blog
experiences, I identified a few different post about improving
types of users: people who go for a show, people (1) When a user selects a date in the calendar, the relevant interdisciplinary team
who go for a certain date, and people who go for shows are displayed. (2) The current show (or featured workflow through
better documentation.
the venue itself. The Glass Theatre’s website is show) section provides enough detail that users can skip
designed to serve all of these user types. the ‘more info’ step if they like, especially when they Which sites have you
The homepage features an image of the know about the show already. (3) As the user has already visited for inspiration?
www.siteinspire.com.
theatre itself, communicating its unique selected the particular number of people and ticket type
personality. Information about current and (e.g. student), the system can display simple price figures What have you
been watching?
upcoming shows follows this closely. The here. (4) When a seating zone is chosen, the system will
If YouTube counts,
calendar function serves users who come to automatically suggest the best available seat(s) with an
I’ve been fascinated
the site with a certain date in mind (such as option to change the selection manually on the seating by videos of character
an anniversary). plan. When a seat is selected manually, the system will customisation in online
As the booking process is designed in a single also suggest an adjacent seat for the next ticket. (5) When games.
page, a user can try a different time, date, seat a seat is chosen, a user can see the views from the seat, What have you been
or seating zone to find the best deal for them, and photos of the seat and its surroundings, in order to listening to?
without wasting unnecessary time on page give an idea of what it might be like to sit there. I usually rely on Spotify
to guide me, so it varies.
loading. I chose to focus on the seat selection
I was listening to Future
step because it seemed to be a big pain point Islands today.
– usually, users book their seats without much
idea of what they’re paying for.

may 2016 53
SHOWCASE Design challenge

1
3

2
5

JEMMA PROCTOR

MY MONTH NOTIONAL THEATRE

What have you been This design tackles the tricky proposition of a large metropolitan theatre with lots on offer
doing this month?
Working on two
new websites for the
Sheldonian Theatre The site has been designed for a large CLOSE UP
and Examinations metropolitan theatre and venue space
School at the University with lots of different performances, shows (1) In the main navigation I focused squarely on enabling
of Oxford. and events on a rolling basis. The challenge users to find what they need as quickly as possible.
Which sites have you I set myself was how to balance the needs of They can find out more about the theatre by clicking on
visited for inspiration? the theatre with lots of ‘stuff’ to sell, with a single ‘About us’ heading. (2) I was inspired by dating
www.fornasetti.com
the needs of the user who wants to find out websites and the idea of letting people find shows they
and performingarts.
what’s right for them without getting lost in might be interested in based on more emotive social
withgoogle.com.
an ocean of content. or cultural criteria. In the ‘3 Steps To A Great Night Out’
What have you
My solution was to borrow from other feature, users can search based on things like a particular
been watching?
Agents of Shield (guilty
content-rich platforms (for example, news, occasion or their favourite films. (3) Clicking on a show
pleasure) and season media and crowdfunding websites) and from the homepage brings you to a dedicated show page
five of Breaking Bad. combine this with the user-centred search where you can find out more about the production, access
What have you functionality you’d typically find on a dating video content and read user reviews. (4) Users can also
been listening to? or travel website. go behind the scenes and watch vox pop-style video
Mostly ‘Magic Dance’ In terms of important techy stuff, I’d use interviews with the cast and director, as well as behind-
in honour of the late, Ajax for live reload when someone uses the the-scenes insights. (5) The site aggregates all the social
great goblin king
filters on the homepage. Filter boxes would chatter around particular shows and curates these so
himself, David Bowie.
have autocomplete so users will always receive users can find out what other people thought.
a search result.

54 may 2016
 Design challenge

4
2

KEV HOYLE

CHORLEY LITTLE THEATRE

A smart user interface means purchasing is never more than one click away for this little theatre

Chorley Little Theatre is just that – a little CLOSE UP MY MONTH

theatre in Chorley. It only holds 236 seats
but is the perfect location to watch a top act in (1) On the What’s On page, users can search by the act What have you been
doing this month?
an intimate location. I wanted to redesign the image and some basic information. (2) The six featured
Putting together
existing site (www.chorleylittletheatre.com) to acts can be booked instantly from the homepage slider.
a 30,000-product
simplify the navigation process, cater to mobile For each act there is a ‘quick buy’ feature, which allows ecommerce site and
and tablet users, make more of a feature of the up to six tickets to be purchased in one click. (3) Booking its 20 partner sites.
acts scheduled to appear, and integrate a ticket can be initiated by clicking on any of the act information Which sites have you
purchasing system. sections throughout the site. (4) Ticket availability is visited for inspiration?
The site would be created using ZURB’s indicated by circles of varying colours. Shows with low www.creativeboom.com
Foundation framework, and purchasing availability are shown in the Chorley Little Theatre’s deep and fromupnorth.com.
functionality would be added with OpenCart. red. When a show is sold out or has less than six seats What have you
The homepage features a large scrollable available, the icon changes to a phone icon, to indicate been watching?
banner that displays the latest acts. The a ‘last call’. Smartphone users can click the icon to call Fargo, Community,
Regular Show.
simplified navigation means ticket purchasing the box office. (5) At the booking stage, users choose their
is always only one click away, no matter preferred seats and live information displays the selected What have you
what device the user is on. Finally, I have seat numbers and total cost. been listening to?
The Staves and the
designed the online booking so that it is clear
Wainwright Sisters.
and simple: just pick the act, select the seats
and purchase.

may 2016 55
 Focus on

FOCUS ON

‘ABOUT’ PAGES
Sam Kapila shares what to consider when crafting your About page

Personal sites such as blogs or

portfolios are a great way to learn
more about the people we follow in our
industry. We can see them outside of their
social media avatar and get a glimpse of
their life outside of their work. 1
About pages can easily become an
afterthought, but with a little thought
you can create well-written and well-
presented, authentic content that matches
your personality. When working on an
About page, there are a few key things
worth considering.
First, plan out the content. Share a
little about what your life is like outside
of work – this is important, yet can
easily be overlooked. Share your hobbies
and interests, and write as if you were 2
introducing yourself in real life. You could
even consider using first person.
Second, consider contrasting or bold
typography, experimenting with different
font weights, font families and colours. Be
intentional with white space, so the focus
is on what you want to share about yourself.
It is a great way to lead the viewer through
the text – those who are just quickly
scanning the page will pause at anything
that stands out.
Finally, consider sharing some photos. 3
Many About pages focus on the portrait of
the owner, but glimpses of your hometown,
beloved pets and favourite foods can
help viewers connect with who you are.
Edit the photos so they fit together with
your personal brand, and the type and
message of the site itself. (1) French artist and his labours of love. through his photo, House (allison.house/
wood sculptor Pierre (2) Charleston-based along with long- about) shares her
Caron (poc-sculpture. designer Blake and shortform nickname and
com/mon-histoire) Saurez (blakesuarez. versions of his bio. photos of her most
PROFILE

Sam (samkapila.com) is a designer

living in Texas and an instructor shares his story, com/contact) gives (3) On her About memorable work
at The Iron Yard, an international, along with beautiful readers a glimpse of page, Austin-based experiences, all in
immersive coding school quotes and photos of his goofy personality designer Allison a friendly voice.

may 2016 57
 INFO
Location: Toronto, Canada
Designing since: 2007
Areas of expertise: Creative
direction, product design and
development
Worked with: adidas, Ford,
Notable.ca, BitGold, GoldMoney
 PROFILE

MIKE BUSBY
@mikebusby

The designer giving financial

UX a much-needed shot of life at
successful startup BitGold

In the digital world, the way we trade

currency is evolving rapidly. Recent
startup BitGold allows you to pay and save
in “the century’s best performing currency”:
gold bullion. In January 2015, busy co-running
an agency and with a lifelong interest in

of BitGold’s chief designer. He jumped at the

chance, and led the company to remarkable
success – it is now used in over 100 companies
around the world. We got the low-down on his
creative process.

net: What drew you to BitGold?

MB:
and economics, so when the opportunity
came up to work on an early-stage FinTech
company I jumped at the chance. It wasn’t
until a few months in that I realised we had
something really special. I could already sense
that both the product and company would
experience the growth we have seen. Not only
was it the success of the company that kept me
going, but the fact I played such a large role in
product design and development – at the time
I was the only designer, and one of the very
few frontend developers.

net: BitGold was voted a Startup to Watch in

2016 by Forbes – what is it about the design
strategy that you think has made it so popular?
MB: I think any company with a well thought-
out design strategy will do well in this space.
It is my belief that this industry is one of the
most convoluted and poorly planned from a user
experience perspective. BitGold is approaching

simple tools for both payments and savings.

may 2016 59
SHOWCASE

BitGold This startup provides a platform on which users can buy, store and spend gold bullion. Busby was
the company’s second hire, and has led it to worldwide success over the past year

net: Can you tell us a little bit about the running in a web view, packaged as an
BitGold Hybrid Mobile App? a hybrid app and leverage all our skills. app. I feel as though given the constraints
MB: We had a number of strong business Trying to design a mobile app that we had to work within, we ended up with
goals, but above all else we needed to get works on both platforms is extremely a very well-rounded product.
something out fast. We wanted to keep it
in-house as much as possible due to time net: What tools and techniques did
and budget. We debated heavily between too. The development was also incredibly you use?
a native iOS and Android app. Our entire tricky – native code is 10 times more MB: We used a number of open source
design team is composed of developers, performant than web-based technologies projects essentially designed to package
web apps as mobile apps. For the design
side, we had to combine the two platform
interface guidelines into one. We decided
we would focus more on the iOS side of
things, as initial research showed more
users on iOS than Android.
Performance was a major challenge.
This is like building a responsive web app
and then trimming out any expensive

the most.

net: When it comes to building apps, do

you prefer native, hybrid or responsive?
MB: Hybrid and responsive apps share
very similar constraints due to the fact
they are both based in web browsers;

Since I do a lot of frontend development

I’m usually heavily involved when
Home office Busby’s home office, housed in his new condo overlooking the Toronto skyline. “This is building hybrid or responsive apps.
where I feel most comfortable designing, and where I find I am most creative,” he explains I don’t do iOS or Android development,

60 may 2016
 OFFICE CULTURE

MIKE BUSBY

What’s on your desktop?

Two Thunderbolt Displays, 15" MacBook
Pro, 12" MacBook, business cards, a
wicked pyramid sculpture, a glass of
champagne and a sketchbook.
Little things that make your
Jord Boards This freelance branding project for a snowboarding instructor gave Busby the platform to life worthwhile:
experiment with a new design style
Websites: StumbleUpon,
Medium, Dribbble
so I tend to stick to UX/UI design and Music: EDM, metal, drum and bass
asset creation. Obviously a lot more time I was fortunate to land a client willing to Podcasts: ShopTalk, Design Details,
is spent in Photoshop, and the challenge give me that opportunity. 99% Invisible
there is keeping control over the quality. What do you have
Some developers are great at building out net: Do you have any other passions on the walls?
designs, others not so much. A lot of time outside of work? I just moved into a new apartment,
is spent interfacing with the developer, MB: Cars are a big part of my life. Ever so the walls are a blank canvas.
adjusting and rebuilding components. since I was a kid, I always was interested
What will you do for lunch?
As to what I prefer, it really comes down in the design of cars. It was the typical
It’s winter here in Toronto, so I try
to the goals of the business. Like most designer lack-of-satisfaction-with-the-
my best to bring lunch to work.
designers, I have a thing for perfection, norm that really got me interested in
so being in control of all aspects
What hours do you work?
creative outlet; taking something I usually start around 8am and finish
around 6pm, although the ideal time for
standard and making it unique.
me to work is actually 7pm until 2am.
net: Tell us about a highlight from your
Unfortunately, I don’t get to work those
time as a freelancer ... net: In the past, you worked with Ford
hours that often.
MB: There is one project that stands out: Canada. Tell us a bit about that ...
What else do you do
I designed a logo for a snowboard MB: We created a microsite that was
in the office?
instructor. After the client provided me based around events organised by
I dabble in the fine art of ping pong
with some examples of logos she liked, Notable.ca and sponsored by Ford
from time to time.
I quickly realised I didn’t usually design Canada. The project went through
in the particular style she was interested multiple iterations, with many levels How often do you hang out
in. I let her know, but she had faith in me. of approval required. After the sixth
with other designers?
iteration, we came to an agreement on I enjoy attending Dribbble meetups and
hanging out with my friends in the
my design was accepted. the design. While the client was strict
industry whenever I get a free moment.
I selected this project over others not with visual design, we were given
because of its size or that fact that it was complete creative freedom with the UX. Describe your working culture
for a big-name client, but because it was This was a blessing, as we were on a very in three words
a challenge for me. I don’t typically do a tight schedule. After many long nights, Methodical, precise, simplistic.
lot of brand design, nor do I depart so far we launched on time without any
from my usual style. Challenging yourself

may 2016 61
SHOWCASE

TIMELINE
A look at the pivotal dates in
Mike Busby’s design career

AUGUST 2006

Moves to Canada from London

JULY 2007

Secures first freelance client project

Ford Canada Busby battled strict design guidelines and a tight deadline to create this microsite for
MAY 2009
Notable.ca and Ford Canada
Rebuilds portfolio website for the
seventh time net: There’s a lot attention being given behind a menu. The features that are not
to animation at the moment. How do needed as often are kept in the ‘More’
FEBRUARY 2010 you approach this aspect of your job? menu for easy access. We have users from
MB: Having a good understanding of UI all over the world, and in turn many
Scores first big-name client development allows me to directly build
my animations in browser. I brainstorm utilised. I took all this into account when
concepts, build prototypes and iterate designing the navigation we have today.
APRIL 2011

Beats cancer Unfortunately this process isn’t exactly

scalable. With both our team and product MB: I used to refer to Dribbble, but lately
growing constantly, I don’t always have I’ve found the amount of credible UI
APRIL 2012
the time to build every interaction or inspiration there is dwindling. Most UI
Takes on full-time startup work animation. This is where prototyping posted there is to grab other designers’
tools like Principle, Framer and After
become popular on Dribbble. The work
NOVEMBER 2013
a liking to Principle. I can prototype is not necessarily posted to solve product
Meets his girlfriend and partner in crime interactions there quickly, and hand over design problems; it’s not really a user
the concept to a developer to implement interface at that point. Recently I have
fully. I am then free to tweak them once
SEPTEMBER 2013
complete if I feel it’s necessary. outside of the digital word; industrial
Leaves the product design world to and editorial design have been great
form his own creative agency
net: You rolled out the new navigation for sparking my creativity.
design for BitGold back in November
SEPTEMBER 2014 – how did you approach that? net: With BitGold looking to expand,
Starts as a contractor at BitGold; MB: The previous navigation was actually
second hire of the company a result of a major direction change where MB: As our product is currently used in
we dropped a Bitcoin wallet component 100-plus countries at such an early stage,
JANUARY 2015 from the product before public launch. this has always been an important focus.
We ended up combining some navigation We are still in the middle of building the
Becomes CDO at BitGold
elements to create a functional, but ugly entire ecosystem, so we are very much
list of features. focused on that. As in most companies,
As we were a new product and users we have to be reactive to any changes and
were just starting to understand us, I new ideas. We are consistently adapting
wanted to keep a similar experience, so the product experience.
I decided to combine the concepts created
for the mobile app. I wanted the core Next month: EPIC, the agency
features to remain visible, not hidden creating digital awesomeness

62 may 2016
SHOWCASE How we built

HOW WE BUILT

12 DISHES
Elespacio created an online recipe book that celebrates small food
producers and takes viewers on a culinary journey around the world

5
6

CLOSE UP
BRIEF
(1) The homepage was conceived as a gateway illustrations capture the essence of each recipe
For this self-initiated project, to the individual recipe pages. (2) Each page and the independent producer behind it. (5) This
digital agency Elespacio joined food
features a recipe and relates it to an independent project was a collaborative effort: digital creative
advocate Imogen Wells to create a
beautiful and thought-provoking food producer’s story. On desktop, the layout is agency Elespacio was joined by independent food
site that combines 12 tasty recipes split vertically. (3) From the beginning of the high- producers, a food advocate, a nutritionist, and
with the stories of small food level concepting stage, responsive design was a a food photography studio. (6) Each recipe was
producers around the world. must. You need to be able to browse comfortably carefully prepared by food advocate Imogen Wells
on your mobile and tablet while cooking! (4) The and artfully photographed by Lumen.

64 may 2016
 How we built

JUANMI JACEK DAVID

SANSINENEA Z AKOWICZ BONÀS

TIMELINE
The key dates in the
12 Dishes project

15 OCT 2015
Elespacio reaches out to Imogen Wells to
Juanmi is the founder and ActionScript hero-turned Art director David was explore the possibility of a collaboration
director of Elespacio. He came modest frontend dev Jacek is responsible for the UX and
up with the original idea for the Elespacio’s lead senior developer visual design of the site
site and acted as producer w: www.jacekzakowicz.com w: www.davidbonas.com
w: www.elespacio.net t: @jacekz t: @davidbonas 20 OCT 2015
The team prepares documentation
outlining the project and sends it to
Keen to embark on a self-initiated up with the idea of using illustrations. independent food producers
project but in need of a suitable We combined a vibrant colour palette
story to tell, Elespacio teamed up with with subtle texture as a reference to the
food advocate Imogen Wells to create a multicultural nature of the project, and 21 OCT 2015
small but perfectly formed online recipe also the type of food producers we were
High-level concept creation and
book featuring 12 dishes from around the interested in: small farmers, organic wireframe exploration starts, followed by
world, with a focus on independent food food, traditional production methods, development validation
producers and the stories behind each and so on.
recipe. The result (www.12dishes.com) is
a responsive site in which typography, net: The whole package is very print- 30 OCT 2015
illustrations and mouthwatering food like in its aesthetic. Did you face any
Content is curated and work begins
photography work together to bring a difficulties pulling it all together?
on the design and layout
selection of unusual recipes to life in DB: In the end we received an amazing
a thought-provoking way. response from the food producers and
they sent us great images, which we
net: What’s the story behind Around used as a base for the illustrations.
16 NOV 2015
the World in 12 Dishes? We thought elegant serif fonts would Each of the 12 dishes are cooked for
JS: I’ve always admired Imogen for create an interesting contrast with the Lumen to shoot. Meanwhile, the vector
illustrations are created
her passion and original point of illustrations and the colour palette.
view with regards to food. She sees food It’s also nice to see print-inspired
as a means to bring us closer to our typography in a digital context.
essence as humans; to grow respect for For the food photography, we were 18 NOV 2015
the people who choose to sacrifice some very lucky to convince our friends at Recipes and their ingredients
productivity in order to output products photography studio Lumen (lumenstudio. are finalised. The development
with a soul and real nutritional value. es) to get involved. They did an amazing phase kicks off

I thought it would be amazing to work job in almost no time.

with her because she is an incredible
source of interesting content. net: Was the site always envisaged 19 NOV 2015
as being responsive? Cross-device testing is completed,
net: What are the key design features? DB: We knew a lot of people used their and development sprints to transform
DB: To me, the most distinctive design mobile devices to follow recipes while the input into code start
features are the use of typography and they cook, so making sure the site
the illustrations. Initially we didn’t would work responsively was a must
know what to expect from the food from day one. We tried to imagine how 17 DEC 2015
producers in terms of image assets, people would browse content in these
12dishes.com goes live
so we decided to inject the designs with situations. A simple vertical layout
as much personality as we could. Also, seemed a good place to start. We took
we didn’t want the site to look like your that as a base to make sure the designs
usual recipe blog, which is why we came adapted well to all sorts of screens.

may 2016 65
SHOWCASE How we built

EVOLUTION

A look at the references, sketches and wireframes

that helped shape the final design
(1) The brief that was sent out to producers included a project description
outlining the intention, scope, structure and participation requirements for
the independent farmers. (2) The team created high-level concept sketches
of each of the key pages, including the individual recipe page, homepage
(shown here) and mobile version. (3) A wireframe of the recipe detail page.
(4) Moodboards featuring the visual research and references that were
used to inspire the look and feel of the site. (5) Lumen photographed all the
dishes – here meghli and rose petals is in the spotlight.

66 may 2016
 How we built

net: Did you face any compatibility

problems in different browsers?
JZ: We were using PNG files for the
illustrations, and at a certain point
in development (even with the newest
version of IE) we struggled to properly
scale these huge assets. To solve this,
we moved to compressed and optimised
SVG versions of the images.

net: The site has lots of neat effects

that add to the experience. Can you
talk us through a couple of them?
JZ: On the intro screen, the text is
animated using basic CSS3 transitions:
opacity and transforms. For the logo
animation we shifted the PNG sprite
with CSS3 key frames.
The menu also moves from one side The creators The site’s About page introduces the figures that made the project possible, including culinary
advocate Imogen Wells and dietician Dr Marta Guasch-Ferré
of the screen to the other. We loaded
the menu as a simple list, and grouped
it with JavaScript into sets that could be
moved left and right in their respective
containers. The latter ones work as net: Did you learn any useful lessons? to collaborate with someone who does.
masks, creating the visible effect. JS: We have tried several times to kick The beautiful thing is, this is win-win:
JS: I’m an old Flasher and as such I have off internal projects – you know, doing our favourite food advocate and the
a passion for good transitions. They the cool stuff that we can’t always find independent food producers gave us the
seem to have gone out of fashion in the time for. However, we had almost always luxury of telling their story, and we got
past few years, but I’m glad HTML can came up against a challenge: we needed the opportunity to show the world what
now do what Flash was doing back in the a story to tell! we could do.
day, or better. I believe transitions, when We are not really content creators;
applied tastefully, add to the overall we are designers and developers. If you net: What sort of challenges did you face
perception of quality in a website. don’t have something to say, you need along the way?
JS: The challenges were related to the
very tight deadlines, due to the fact this
was an internal project and all the work
need to be completed during the pre-
Christmas mayhem. In addition, there
were many stakeholders – the food
producers, the photography studio, the
food advocate and obviously our own
team – that needed to deliver material
to complete the project.

net: Did you get to taste all the dishes?

What’s your favourite?
JS: I did have the pleasure of tasting
all of them during the photoshoot
for the site. It was, by far, the tastiest
photoshoot I’ve been to! My favourite
dish is the lawar salad, closely followed
by the tropical coulant.

Next Month: Clearleft’s new digital

Get cooking The individual recipe pages feature quirky illustrations and mouthwatering photography strategy for Penguin books

may 2016 67
FEATURES Cover feature

NEW SKILLS
IN WEB DESIGN
Christopher Murphy lays out his skills roadmap,
pinpointing the areas you should be brushing up on

O
ur industry is evolving at a
dizzying rate, and it seems to
develop faster and faster each
year. Knowing what to focus
on in order to stay up to speed
AUTHOR can be a challenge. Ask 10 different
CHRISTOPHER designers or developers ‘What should
MURPHY I learn this year?’ and you’ll get 10
Christopher is a writer, different answers.
designer and speaker As a senior lecturer teaching
based in Belfast.
Interaction Design at the Belfast School
He’s a passionate
educator, mentor to of Art, it’s important to me to ensure
creative entrepreneurs, my curriculum’s up-to-date and fit for
and the author and purpose, so I welcomed the opportunity
publisher of Tiny Books to reflect upon the skills that web
www.tinybooks.org
professionals should be homing in
on this year. Like everyone, I find it
ILLUSTRATOR
a struggle to keep on top of everything,
MARCO GORAN
so I think it’s important to spend some
ROMANO
Italian illustrator time at the start of the year outlining
Marco’s work has been a list of topics on which to focus during
featured in books and the year ahead.
magazines around the To ensure this list was industry-
world, and in 2014 he
focused and relevant, I approached
was named one of Print
magazine’s ‘20 Under a number of others whose opinions
30’ New Visual Artists I respect (including Sara Soueidan, Andy
www.goranfactory.com Budd, Jonathan Snook, Dan Edwards

68 may 2016
may 2016 69
FEATURES Cover feature

Grid Layout Everything you ever wanted to know about CSS

Grid Layout, courtesy of Perch’s Rachel Andrew

Atomic Design Brad Frost’s methodology encourages

What the flexbox?! This is a free 20 video course by Wes Bos designed to help you master flexbox users to create design systems rather than pages

and Jake Giltsoff) to find out where they In my teaching I explain that HTML layouts that are perfect for RWD and
see things heading. I’ve combined their is a design element. We can do a great interface design.
thoughts with the topics I’m focusing on deal at the markup layer, and we owe it Flexbox is a layout mode that, as the
learning to create a ‘skills roadmap’ for to our content to do so. Understanding W3C puts it, is optimised for UI design.
the rest of 2016. CSS is important before embracing tools Chris Coyier’s flexbox guide (netm.ag/
Some of these topics will merit deep like Sass that abstract it – and the same guide-275) is regularly updated. Wes Bos
dives and focused research, others are goes for JavaScript. Know the cost of has also created a series of 20 free videos
included as areas to read up on and dependencies such as jQuery and other entitled ‘What the flexbox?!’ (flexbox.io)
familiarise yourself with. So without libraries and frameworks. Keep your to help you master this dark art.
further ado, let’s get started!

Don’t forget the basics: Know the cost of

1 Rediscover the basics
In the headlong rush into the future,
let’s not forget the basics. HTML, CSS
libraries and frameworks that abstract your code.
and JavaScript are the core building Keep your HTML, CSS and JavaScript tight and use
blocks of the web. Understanding
them – properly understanding them dependencies only if you need to
– is important. This year at the Belfast
School of Art, in addition to core HTML, CSS and JavaScript tight and rely CSS Grid Layout looks equally
design principles, I’ve been teaching on dependencies only if you need to. interesting. For more on this, take a
fundamental HTML, the principles look at Rachel Andrew’s Get Ready For CSS
of CSS and vanilla JavaScript.
As Sara Soueidan puts it: “Libraries
and tools come and go, but the only
2 Layout techniques
How we lay things out within
our viewports is evolving. There are
Grid Layout – one of A Book Apart’s new
Briefs series, it’s a short read that covers
the fundamentals. Finally, if you’re just
skills that will last a lifetime on the exciting developments here – not least starting out, I’d recommend Learn CSS
web are the fundamentals of the the Flexible Box Layout Module and CSS Layout (learnlayout.com). This takes you
three main pillars of web design: Grid Layout, which are rapidly reaching through layout principles in an easy-to-
markup, style and functionality, using maturity. Embrace these and you’ll be follow manner, so you can ensure your
dependency-less scripts.” able to create fine-grained, responsive skills are up to date.

70 may 2016
 The future
by Andy Budd

To prepare yourself for the future,

three areas I think worth focusing on
are motion design, augmented reality
and discursive UI.
Motion has the ability to inject
character and personality into
interfaces, as well as offering
affordances in terms of screen real
estate. As a result we’ve seen a rise in
animation that is now migrating to the
web. I believe animation is going to be
Web Typography This handbook by Richard Rutter will help you design beautiful and effective typography an increasingly important tool in any
product designer’s toolbox, and one that
designers need to start adopting now,

3Modular design
As screen sizes multiply, the
contexts we design for are changing.
Snook’s SMACSS (Scalable and Modular
Architecture for CSS), we end up with an
approach I call ‘modular design’, which
before they get left behind.
Augmented reality is certainly not
new, but with the nearing release of
What we need are ‘content building lends itself to the multiple contexts we HoloLens, 2016 is going to be the year
blocks’ that adapt themselves to any have to design for. that it hits the mainstream. In the early
environment. Learning about modular, stages, these augmented experiences
reusable fragments of content as a basis
for design helps us create content that
fits any situation, which is a powerful
4 Typographic principles
“95 per cent of the information
on the web is written language,”
will most likely be created by game
designers. However, the challenges
of navigating UIs that are overlaid
skill to have. says information architect Oliver onto the real world are considerable,
With this in mind, I’m looking Reichenstein. “It’s only logical to and require a whole new set of skills
forward to Brad Frost’s Atomic Design say that a web designer should get and experiences.
book, which should see the light of good training in the main discipline With the rise of artificial intelligence,
day this year. Frost is helpfully sharing of shaping written information. In we’re moving away from traditional
the content of his book while he works other words, typography.” graphical UIs and towards a world
on it (atomicdesign.bradfrost.com). Reichenstein raises a good of discursive UI: interfaces that hold
“My search for a methodology to point. However, I would argue that conversations with their users, either
craft interface design systems led understanding ‘the craft of words’ through text input or voice commands.
me to look for inspiration in other (netm.ag/craftbook-279) should take Senior interaction designers face a
fields and industries,” explains Frost. priority. Words are an essential steep learning curve to get to grips with
“Fields such as industrial design and design element and, as designers the demands of this new approach.
architecture have developed smart, of content, we often find ourselves Of the three, motion design is
modular systems for manufacturing working with language. A little time obviously the most pressing, so that’s
immensely complex objects like spent learning about language and where designers should put their
aeroplanes, ships and skyscrapers.” how it can shape user experiences money at the moment. However, the
Frost’s approach involves designing can go a long way. long-term future of design is discursive
systems built around atoms, molecules, That being said, the principles of UI, so that’s where they should focus
organisms, templates and pages. When typography – especially as applied if they still want to have a job in 10
we couple this approach with Jonathan to the web – is something I think years’ time.
Conferences we can all stand to learn more about. If your focus is on the frontend, the
drive learning Great typography enhances readers’ ability to design and prototype websites
enjoyment of content; something we and mobile apps, from wireframe to
Conferences are a great way to meet should all strive for. finished product, is extremely valuable.
like-minded individuals and hear from
the leading voices in our community.
They’re also a great place to learn new
Digital prototyping tools have come of age over
skills. Whether your focus is on design the last few years. Tools like InVision, Marvel and
or development, there’s a conference
that fits your bill perfectly – you just Principle enable designers to create fully fledged
need to find it.
Lanyrd, a social conference directory,
digital prototypes, quickly and easily
helps you to find the conferences that
are right for you. Even better, it allows I’m looking forward to reading I’d strongly recommend diving in and
you to make connections with other Richard Rutter’s Kickstarter-funded acquiring some new knowledge.
ticket-holders so you no longer feel like Web typography: A handbook (book. This progression in tooling also
you’re attending an event alone. Sign webtypography.net). While Rutter works means that designers focused on
up and you’ll soon discover a wealth on completing his book, I’d recommend designing complex, interactive products
of learning opportunities. exploring his site webtypography.net, now have the tools at their disposal to
We’re blessed with an abundance which provides a practical guide to turn their visions into rich prototypes
of web industry conferences. Three web typography. – complete with an emphasis on user
that spring to mind are Generate (run interaction and also, importantly,
by the net magazine team), Smashing
Conference and beyond tellerrand. All
have built strong, friendly communities,
5Prototyping tools
Digital prototyping tools have
come of age over the last few years,
animation and transitions.
Of course, understanding the
fundamentals of what is possible
and all are worth attending. and the opportunities in this space (and what is codable) is important.
If I could recommend one – highly are developing rapidly. Tools like This knowledge, coupled with
beneficial – way of learning, it would InVision, Marvel and Principle (not to an understanding of how digital
be to attend the occasional conference mention Adobe’s soon-to-be-unveiled prototyping tools work, will ensure
workshop. Yes, a workshop might be Project Comet) enable designers to create you’re future-focused and ready
an added expense, but look on it as an fully fledged digital prototypes, quickly for the exciting opportunities that
investment. Attending a workshop gives and easily. lie ahead.
you the time and space – away from
the studio – to focus on acquiring a new
skill. Not to mention a chance to make
new acquaintances.

Find an event Lanyrd is a great free tool for

discovering and getting more from events Framer One of many new prototyping tools, Framer offers a bold mission statement: “Prototype anything you can imagine”
 Cover feature

Project Comet This upcoming tool from Adobe

promises a whole new experience in UX design

6 Animation principles
Animation is increasingly expected
in the interfaces we design. “Subtle
animations and interactions, used
well, can be the difference between
an app or site that’s feeling native,
seamless and engaging, and one that is SVG on the web This practical guide to Scalable Vector Graphics comes courtesy of Typekit’s Jake Giltsoff
static and unintuitive,” states designer
Dan Edwards.
Understanding the principles that
underpin animation – ideas like
timing, easing and spatial awareness
– is becoming increasingly important.
There’s lots to learn from here, but I’d
recommend starting with the work of
Disney (netm.ag/disney-279).
There are a number of helpful tools
that allow you to work on animation
within an interaction design context,
and exploring these is going to become WebComponents.org This site covers everything you ever Time out Workshops like this React workshop with Wes Bos
increasingly helpful for designers. wanted to know about Web Components offer a chance to learn a new skill in a focused way
Tools like After Effects, Framer and
Atomic will become a valuable part
of the designers’ toolbox.
One key point to stress, however,
very small file sizes, and can be easily
edited, modified and maintained.”
Using SVGs offers a number of
8 APIsI find APIs a little complicated,
as I live firmly on the designer end of
is that animation should be used with benefits: reduced file sizes, improved the nerd-designer continuum, but that
caution. After all, as Sophie Paxton performance, and the possibility of doesn’t mean I can’t learn a little more
blogged, ‘Your UI isn’t a Disney movie’ lean and efficient animations. These about these technologies. I think it’s
(netm.ag/paxton-279). are all good things from a performance important that we spend a little time
perspective. A little time spent learning getting to know skills from outside our

7SVGsScalable Vector Graphics (SVGs)

have been around for a while, and
about SVGs will pay off considerably.
Giltsoff’s site ‘SVG on the web:
A practical guide’ (svgontheweb.com)
comfort zones.
Jonathan Snook states: “It’s a good
year to get back to basics. Browsers have
understanding them is a great additional affords an overview of the scalable implemented new APIs at a dizzying
skill to have. “In the constant battle landscape, and is the perfect primer pace and while frameworks abound,
between high-resolution imagery and if you’re just getting started with I think getting more familiar with
web performance concerns, there is SVGs. Sara Soueidan has also shared APIs like service workers will allow
pretty much only one way to go for a number of great resources through developers to build leaner and cleaner
logos, icons and illustrations on the her site, which is worth bookmarking. sites and applications. I’m pretty excited
web: SVG,” says Typekit’s Jake Giltsoff. If you’ve yet to dip your toe in the about Web Components also, but always
“Scalable Vector Graphics stay sharp SVG waters I’d recommend doing so feel like they’re going to be ready soon,
at all screen resolutions, allow for very soon. but never quite yet.”

may 2016 73
Treehouse In a few short years, Treehouse has grown to become the perfect one-stop shop for expanding your skillset

Skillshare This online learning platform’s focus is on enabling users to learn new skills. Its courses are taught by passionate creatives from all over the world

Online learning comprehensively cover the world of web design range of topics, many of which are web-related.
Our industry might be evolving rapidly, but and development, offering “a library of lessons If you’re interested in acquiring new skills
we’re incredibly fortunate to be living in an age that goes far beyond the surface”. Its learning I’d recommend exploring this library.
where educational resources are literally at tracks are also supplemented with short quizzes,
our fingertips. The web is an ideal medium and ensuring that what you’re focusing on learning Skillshare www.skillshare.com
there are numerous resources to kickstart your is actually sticking in your brain. Though its focus isn’t entirely web-related,
learning. Here are three of the best: Skillshare has a large volume of web-related
Udemy www.udemy.com material nonetheless. Membership is very
Treehouse teamtreehouse.com Udemy is an excellent source of video tutorials, reasonably priced and offers users the
Treehouse is a great resource that I can which make learning easy and enjoyable. It opportunity to learn at their own pace and
recommend highly. Its video tutorials offers a library of over 40,000 courses on a huge – importantly – to learn by doing.
 Cover feature

One efficient way to pick up skills The web is struggling under the weight conversational forms of discursive
in these areas is to spend some time of giant hero images, gargantuan video UI. Emmet Connolly, a digital product
identifying conferences that are running backgrounds and growing quantities designer at Intercom, spoke about
workshops in your particular area of of web fonts. Let’s all go on a diet and this recently in a talk titled ‘Design is
weakness. A day spent at Industry address this. Ask yourself, ‘How can I a conversation’ at Rebase in Dublin.
conference’s React JS Workshop with make this smaller?’ Trust me, your users Read some of his comments around
Wes Bos, for example, is a great way to will thank you. the subject at emmetconnolly.com.
learn something new, in a time-focused
manner, away from the everyday
distractions of the studio.
The web is struggling under the weight of giant
hero images, gargantuan video backgrounds and
9Performance
I’m sure we’re all guilty of having
built cumbersome, overweight pages in
growing quantities of web fonts. Let’s all go on
our time. We know we should do better
a diet and address this. Your users will thank you
(optimise!) and this year, like most
years, I’m reminding myself of the need
to be mindful when it comes to page
weight and performance.
10 New technologies
on the horizon
The web is evolving at a dizzying
In closing …
There’s never been a more exciting
time to work on the web, but, equally,
rate and, as part of this constant it’s never been more challenging. The
recently published a wonderful roundup development, we’re seeing a number of modern web is rapidly diversifying,
of his thoughts on this matter: ‘The new and exciting technologies starting and looks very different to when I first
website obesity crisis’ (netm.ag/obese- to appear on the horizon. Though these started wrestling with it in the early
279). Skewering, amongst other things, might not be within our reach at this 90s. It’s becoming increasingly difficult
‘fat ads’ and ‘interface sprawl’, he makes precise moment, our realm as designers – if not impossible – to hold everything
a passionate case for paring things back. is ever-expanding, and they might very you need to know in your head.
As he puts it: “Keeping the web simple well be soon. And that’s alright – after all, no one
keeps it awesome.” Virtual reality, augmented reality, can know everything. We are finding
I’d strongly suggest spending some discursive interfaces … there’s a lot ourselves increasingly gravitating
time developing your skills around on the horizon and plenty to learn here towards specialisms; focused areas
performance: learning about image (see boxout 71). It’s always good to stay of practice we can learn inside out.
compression; focusing on keeping ahead of the curve, and a little research So long as you can master the core
your HTML, CSS and JavaScript lean; and reading around these topics will add techniques around your area and
reducing weighty dependencies and a further string to your bow. acquaint yourself with other techniques
so on. All of these things matter, not With the recent growth in messaging- in related areas, you should be fine.
least due to the increasing shift towards centred services, one area worth You might not be able to dig deep into
mobile patterns of consumption, where focusing on in the coming months everything I’ve covered, but the key
bandwidth is expensive. is text-driven interfaces and other, is to keep on learning!

Fat sites explores ‘the website obesity Augmented reality The first fully untethered, holographic computer, Microsoft’s HoloLens promises to change the
crisis’ in this talk future of holographic computing

may 2016 75
DESIGN A WINNING
UX PORTFOLIO
For UX designers a CV isn’t enough: only a top-notch portfolio will get you on the
path to your dream job. Ian Fenn shows you how to make a great first impression
F
or any UX designer looking for before interview back then, it acted as a
work, a portfolio is practically teaser – a way of saying ‘Here’s what I’ll
mandatory these days. Apple, talk through when we meet’. Today, with
Google, IBM, and Adobe are among increased competition (over 100 applicants
the many companies that insist on average per role) and much ambiguity
job candidates submit a UX portfolio along over what pertains to UX design, that AUTHOR
with their CV. Hiring managers will review approach is not useful. What you need is IAN FENN
both documents, but typically only those a portfolio full of design-based stories. Ian (@ifenn) is an
independent consultant
with a decent portfolio will be invited to UX design expert Jared Spool nailed
in London, where he
interview. this in his post ‘A Great Portfolio isn’t helps businesses get UX
In this article, I’ll run through some a Collection of Deliverables’ (netm.ag/ design done. He’s the
tips for pulling together a portfolio your spool-279). In it he describes one UX author of the upcoming
prospective employers can’t ignore. designer’s portfolio, which was well put book Designing a UX
Portfolio
together, but didn’t specify the designer’s
TELLING YOUR STORY accomplishments: “He didn’t talk about
Over the past four years, I’ve spoken the projects he created the wireframe
with several hundred hiring managers for. He didn’t say how he developed the
and recruiters from across the globe. personas or how they were used. He didn’t
What they see from candidates most talk about places where the project got
often is portfolios containing galleries of complicated and he worked through it,
beautiful user interfaces or collections of producing an elegant outcome given the
commonplace design documents such as constraints. These are things that smart
site maps and wireframes. hiring managers look for.”
A decade ago this would have been fine. When you submit a UX portfolio before
If you were asked to submit a portfolio the interview, it will be examined without
FEATURES Second feature

you present, and often by a person

who has never spoken to you. For the
reviewer to understand your value as a
potential employee, they need some form

NON-DISCLOSURE of commentary as to how the work you

wish to share was achieved. A portfolio
containing only UI designs or project

AGREEMENTS deliverables just isn’t enough.

That said, if you are asked to present
your portfolio at the interview, you’ll need
Non-disclosure agreements (NDAs) are a a different solution. You’re in the room, Short story A design story doesn’t need to be lengthy, as
contract between a designer and their client and you can share your design stories this sample from my own portfolio demonstrates

that protects information the client deems yourself. There is no need for any written
confidential. They can raise problems when narrative. So pull together an impactful My research suggests many hiring
it comes to sharing work in your portfolio. deck of images, deliverables and key facts, managers prefer PDF-based portfolios,
Some designers choose to share their then present that instead. as they’re simple to navigate, annotate
work regardless. This approach will lead Remember, the purpose of a UX and share internally. They can also be
to many hiring managers questioning your portfolio is to get you an interview. It’s printed quickly for the daily commute
ability to keep a confidence and concern a sales document – in it, you’re trying to home. For a candidate, a key benefit is that
about your professionalism in general. illustrate what you can offer the person it can be customised for specific jobs – and
Just don’t do it. reviewing it by demonstrating what you the more relevant the portfolio, the more
An attractive option is to anonymise any did for others. It is not a place for personal likely an interview will result.
affected work. Be careful if you adopt this experimentation or for going into great It’s difficult to customise a web-based
approach, particularly if you intend only to detail about your needs or interests. You portfolio in quite the same way. However,
remove the name of the client. It is often can address your requirements later on an online portfolio will act as public
possible to identify the client by cross- in the hiring process. promotion every day and night.
referencing the obfuscated design against Portfolio communities are often image-
information in an accompanying CV. FOLIO FORMATS led, and this doesn’t tend to suit the
The ideal situation is to avoid signing One question that seems to vex many demands of the UX designer or researcher.
an NDA in the first place. The best time to candidates is whether their portfolio Another issue is that your competitors
query company policy on this is after the should be a PDF, a personal website or are often just one click away. A recruiter
company has shown an interest in hiring a gallery within a portfolio community recently told me he’d been impressed
you, not before. Ask them their policy on like Behance or Dribbble. Each platform by a Dribbble portfolio he’d been sent a
employees sharing work in their portfolios. has its pros and cons. link to, only to realise he’d taken a wrong
If they reply that all work is subject to an
NDA, decide if this is a deal-breaker.
Some clients may agree to let you
feature them in your portfolio if it’s
password-protected. If you do this, put the
minds of portfolio reviewers at rest on the
confidentiality issue – make it clear you
have permission. ‘Work made available with
permission’ is all you need to say.

Under wraps Designer Phil Verheul (www.philv.co.uk) Platform options Boraham Cho (www.medium.com/borahm- Share your story James Grant (netm.ag/grant-279) uploaded
keeps his portfolio password-protected cho) used Medium to quickly get his UX portfolio online his portfolio to SlideShare
 Second feature

In detail Portfolio sites like Dribbble aren’t enough to communicate the intricacies of UX Keep it real A short, pragmatic introduction like this from Janice Ahn (www.janiceahn.com)
design, or the stories behind the projects works better than vague marketing speak

turn and arrived on another designer’s a hiring manager will review portfolios best work, looking for projects where you
portfolio instead. Good for the recruiter, five minutes at a time, between doing really made a difference for your employer
who now had another prospective multiple other jobs, which might include or client.
candidate to contact, but not so good coaching new starters and meeting with Ensure it’s work you wouldn’t mind
for the original applicant. peers and managers. doing again. If you don’t want to sit in
a corner and produce wireframes every
day, leave past projects like that out of
your portfolio! Also, exclude work that

Research suggests reviewers will scan is too similar to another project – you
only need to tell a story once.
a portfolio for around a minute before For each achievement, write up the
business problem you were asked to
deciding to reject it or explore further address, the actions you took to solve it,
and what the results were. Many hiring
managers will be looking for evidence of
how you understood user needs, so ensure
FIRST IMPRESSIONS Jon Kolko, founder and director of the you cover that too.
Whichever format you opt for, the secret Austin Center for Design, has also posted The ability to collaborate and facilitate
to making an effective portfolio is to on the challenges that hiring managers is also seen as a definite plus. Be explicit
treat it much as you would any other face (netm.ag/kolko-279): “The sad reality and honest about your role and who
design project. In other words, make it of sending a portfolio to a consultancy
user-centred. Your first step should be is that your chances of getting a job are
to understand the reviewers. Few hiring a weighted dice roll, based on a mixture
managers review portfolios because of extremely fast first impressions,
they want to; it’s a means to an end. serendipitous timing, and who you know.”
They merely wish to exclude candidates Whether you’re looking for freelance
so they have a list of interviewees. work or full-time employment, increase
Research suggests recruiters and your chances of success by understanding
hiring managers spend six to 15 seconds the company you wish to work for. Ensure
reviewing a CV. You get a little more time your UX portfolio contains only what
with a UX portfolio, but not much: most you are confident will interest them,
reviewers will scan a portfolio for around and nothing more.
a minute before deciding to reject it or
explore it further. Exploring it further BEST FOOT FORWARD
will take another five minutes. Creating an exciting portfolio of design
In a blog post (netm.ag/wodtke-279), stories starts with gathering together your Funny start Adrienne Hunter (www.hunterux.com)
UX coach Christina Wodtke explains that biggest achievements. Pull together your communicates a sense of humour with her opening image

may 2016 79
FEATURES Second feature

you worked with. Any white lies on this keep an archive of previous stories for
front will quickly unravel later on in the SEO purposes, but ensure your portfolio
hiring process. prioritises the stories you consider most
relevant to your target audience.
QUALITY, NOT QUANTITY If you’re just starting out, it’s fine to
One of the things hiring managers have a portfolio of just one story, as long
look for is how well the portfolio has as it’s a good one. For junior roles, the
been curated. The quality of the stories smartest hiring managers will be looking
is more important than the quantity. for evidence of user-centred thinking,
If you’re creating a PDF-based portfolio, passion, self-education and collaboration.
the entire document probably shouldn’t A single story can be enough.
run more than 15 pages, even if you’re
very experienced. WRITE WELL
With an online portfolio, it can be With recruiters spending so little time
tempting to provide links to every single reviewing portfolios, it’s important to
thing you’ve ever worked on. Doing this write your stories well. First, ensure your
suggests you have no opinion about your spelling and grammar are perfect. UX

RESOURCES past work and that reviewers should

sort it out themselves. By all means,
research and UX design are detail-oriented
professions, so simple errors could easily
result in your portfolio being rejected.
There is plenty of conflicting advice First off, put together a simple list of
online about UX portfolio design. Here the points you wish to make. Then when
are some of the wiser posts. you do start writing, follow the advice of
advertising legend David Ogilvy (netm.
10 Tips for a Better UX Portfolio ag/ogilvy-279): use short words, short
netm.ag/moser-279 sentences and short paragraphs; avoid
An excellent selection of tips from hiring jargon if you can think of an everyday
manager Craig Moser. equivalent; and use an active voice to
bring your stories to life.
Avoid these 5 things when building Leave any editing until the end, as
your design portfolio editing as you go will only prolong the
netm.ag/schneider-279 time it takes you to write. If it is possible
Tobias van Schneider covers key to remove a word, remove it. Consider
annoyances often found with web- calculating the Gunning fog index
based portfolios. (gunning-fog-index.com) – which gives
a measure of complexity based on the
Never trust a skinny chef number of words per sentence, and within
netm.ag/stockwell-279 that the number of long words – for each
Amanda Stockwell explains how story. Aim for a result of less than 12.
a spreadsheet helps her design her
UX portfolio. USE IMAGES WISELY
During the course of any project, keep
How to wow me with your every deliverable or artefact you produce.
UX research portfolio Take photos of any activity you participate
netm.ag/travis-279 in (and ask teammates to take pictures
David Travis with advice for user of you). When you design your portfolio,
experience researchers. use these photos and extracts from your
documents carefully to support your
Designing a UX Portfolio written narrative.
lobsterbook.com For an online portfolio, try to avoid
The website of my upcoming book, using thumbnail images that require the
containing further wise resources. reviewer to click or tap to see anything
of value. Remember that hiring managers
have little time, and the less work they
Clean design A simple site design (www.jedmund.com)
allows reviewers to get to each story quickly have to do, the better.

80 may 2016
 Second feature

Word up Advice of advertising legend David Ogilvy: use short words, short sentences and short paragraphs

If your portfolio is part of your interactions required low. Don’t make

personal website, expect a reviewer to reviewers jump through hoops to get what
explore the rest of the site too. Keep it all they need; they won’t.
professional – host the drunken photos A PDF-based portfolio should be less
and questionable memes elsewhere. than five MB so it can be sent by email
easily. If you want to make it available
VISUAL DESIGN BASICS via a cloud storage site instead, use more
People perceive attractive products as than one as employer firewalls do block
easier to use than ugly ones. Both PDF- some. Include your name in the file name
based and online portfolios are subject so reviewers can easily identify your

Keep things smart: adopt a consistent

grid structure, and limit the number
of typefaces and colours you use

to this rule, which is known as the portfolio once saved to their hard drive.
aesthetic usability effect. If your skills ‘UX-Portfolio.pdf’ won’t stand out!
do not include visual design, there are two
fundamental principles you can follow FINAL WORDS
to keep things smart: adopt a consistent Like it or not, the UX portfolio is here to
grid structure, and limit the number stay. Portfolios are a critical part of the
of typefaces and colours you use. recruitment process for many companies,
but as many as nine out of 10 candidates
KEEP THINGS LEAN are failing to deliver what’s required.
If you’re creating an online portfolio, These tips will give you a competitive
ensure it’s responsive and as efficient as advantage that could help you snag the Download option Khoi Nguyen Truing (www.khointruong.
possible. Keep code weight and the human role of your dreams. Good luck. com) allows reviewers to download her case studies as PDFs

may 2016 81
 FROM THE MAKERS OF

On sale
now

Master responsive design today!

Pick up your copy at

www.myfavouritemagazines.co.uk/design
 Tips, tricks
& techniques

THIS MONTH FEATURING...

90 104 108

CREATE A SET OF HEAD TO HEAD: PERFORMANCE ADVICE

MICRO-ANIMATIONS 84 CSS-IN-JS VS CSS MODULES 97 FROM THE BBC 104

COLLABORATE BETTER MAKE YOUR SVG 15 TIPS FOR CROSS-DEVICE

WITH SKETCH AND ZEPLIN 90 ICONS ACCESSIBLE 98 OPTIMISATION 108

TAME YOUR STYLE SHEETS WEB STANDARDS: ACCESSIBILITY:

WITH CSS LINTING 94 WEBVR 103 USING ONCLICK WISELY 114

Desktop Mobile/tablet
0 0 BROWSER SUPPORT EXCLUSIVE VIDEOS
We feel it’s important to inform Look out for the video icon
0 0
our readers which browsers the throughout our tutorials.
technologies covered in our tutorials This issue, Marc Andrew has
0 0 work with. Our browser support created an exclusive screencast
info is inspired by @andismith’s to complement his article on
0 0 excellent Can I Use web widget Zeplin: take a look to see how
(andismith.github.io/caniuse-widget). Sketch and Zeplin can be used in
0 0 It explains from which version of tandem to enable communication
each browser the features discussed and bridge the gap between
are supported. design and development teams.

may 2016 83
PROJECTS Animation

A B O U T T HE A U T H O R
DONOVA N
HU T CHINS ON
w: www.hop.ie
t: @donovanh
job: Frontend designer
and developer
areas of expertise:
CSS animation, web design
and development, startups
q: what’s the most useless
gadget you own?
a: A solar-powered
Japanese waving cat.
It uses a solar panel to
charge a tiny battery, which
powers an electromagnet
to rock the arm. I love it

ANIMATION

CREATE A SET OF
MICRO-ANIMATIONS
Donovan Hutchinson
n discusses how we can create a bank of
small, simple animations that can be applied in multiple situations
Animations can help our user understand might be a list of links fading in, or a Submit button
our designs. They can also add polish and even changing from ‘Submitting’ to ‘Done’.
make your site feel faster. We can have animations These simple animations may not be the main
that introduce the page content, or animations reason people visit your site, but they can make the
that activate when we interact with the UI or difference between an average and an exceptional
when we scroll. experience. Each one plays a part in communicating
VIDEO Big, splashy animations are great for attracting your brand.
Ever wonder how you attention and making our sites more fun, but it’s
can bring animation
into the workflow of a
the small ones that really boost the quality of our ANIMATION LIBRARIES
larger project and keep work. We can call these ‘micro-animations’: the As we develop our projects and they get bigger
it consistent? Donovan small animations that achieve one single purpose, and more complex, it’s easy for all these micro-
Hutchinson explains
as opposed to larger ones that tell stories through animations to become inconsistent. Different
how in this video
from Defuse Dublin: multiple sequences of movements. timings, easing and styles can add up to problems
netm.ag/defuse-279 These subtle movements draw visitors to what we when conveying a unified brand. We can solve this
want them to see or understand. A micro-animation problem with a little forward-planning.

84 may 2016
 Animation

FOCUS ON

TRANSITIONS VS
ANIMATIONS
Transitions and animations are both ways to introduce
movement to your web pages, but each works in a different
way and comes with its own set of considerations. Essentially,
Aha! A simple, reusable fade animation causes this light bulb to light up a transition is a rule that tells the browser how to go from one state
on page load (netm.ag/animatepen-279)
to another (and back again), whereas an animation is a series of key
frames that describe more complex movements.
In this article, I’ll look at how we can create The syntax for the transition property is simpler. You only need
a library of small, generic micro-animations to add one rule to your element’s CSS:
that can be applied to our projects as needed and
reused many times. This common set of source transition: all 0.5s linear;
animations can be used across multiple scenarios,
and adjusted as necessary by overriding and This tells the browser to animate all aspects of the CSS (height,
changing specific properties. width, colour, transforms and so on) over a period of 0.5 seconds,
and to do so in a linear easing style. If added to a link, then the

Micro-animations are browser will try to animate the hover state.

However, transitions aren’t so great when you want an
the subtle movements animation to happen without any interaction – that’s when you’ll
need animation. Animations are a series of movements that the
that add up to an browser applies to an element, which usually occur straight away

exceptional experience and are not reliant on user input. If you want to fade in some
content on page load, this is the option to go for.
You can use timing functions to dramatically change the feel of
It’s almost like an object-oriented approach, both animations and transitions. Rather than sticking to the basic
where we create generic animations and associated ease-in or ease-out , try some custom Béziers (I recommend
classes, and modify them as required. This saves using www.cubic-bezier.com to generate them). With the right Bézier
the creator from having to reinvent an animation curve, your animations can bounce and zoom around with all sorts
each time one is needed, and also ensures they of character.
remain consistent across a project.
Once we’ve decided what sort of movements
we want to put across, how do we deliver these
micro-animations? Putting animations in your
style guide (24ways.org/2015/animating-your-brand)
is a great way to start. We can define a range of
animations, and set out rules for how they are
used in our projects.

SIMPLE ANIMATIONS
Creating your own library may seem a large task,
but we can start with basic examples and build them
up. Let’s begin by creating some simple animations,
and looking at ways we can apply them.
Note: In this article I’ve omitted prefixes such
as -webkit- from the examples. I’d recommend Custom curves Sites such as www.cubic-bezier.com can help you create
including these on production code. You can use your own unique Bézier curves
a service such as Prefix-Free or AutoPrefixer
to help streamline this process.

may 2016 85
PROJECTS Animation

Fading in Let’s try triggering the animation when the user

In our first example, we’ll take a look at the fade-in clicks a button (netm.ag/click-279, fig 1). For brevity,
class, which we can use to cause elements to fade we’ll use jQuery.
into view. First update the HTML to include a button, and
hide the circle:
@keyframes fade-in {
0% { opacity: 0; } <div id="show-me" class="hidden"></div>
100% { opacity: 1; } <button id="click-me" class="fade-in">Press</button>
}
.fade-in { I’ve added a class of hidden that applies an initial
animation: fade-in 1s forwards linear; opacity of 0 . We can then use JavaScript to toggle
} the fade-in class on click:

This example is made up of two parts. The first $('#click-me').click(function() {

sets out what the animation will do, using keyframes . $('#show-me').toggleClass('fade-in');
It’s a simple fading-in animation, going from });
an opacity of 0 to 1 . The keyframes define the
animation, and we then apply it to a class using Transitions
the animation property. We aren’t limited to using key frames. While these
Here the animation fade-in takes one second, are well suited to standalone animations, if we’re
and plays just the once. We’ll go on to extend this dealing with a situation where we want to change
example so it does more interesting things, but first an object from one state to another, transitions are
let’s explore how we can apply the basic version in a better option (take a look at the boxout on p85 for
various ways. more on this).
A popular example is the hover state, where
Triggering animations a second state is described within the CSS. Adding a
A simple way to trigger an animation is by adding transition tells the browser to animate to this second
a class to an element. We can apply the fade-in class state. In the example below, the hover effect causes
to a div element (here I’m just using a circle) so it a link to animate from blue to red when the user
fades in on load (netm.ag/fade-279). hovers over it.
Simplifying prefixes
Prefix-free is a helpful The HTML looks like this:
tool if you want to avoid a{
having to write all the
browser prefixes
<div class="fade-in"></div> color: blue;
transition: all 0.2s ease-out;
}
a:hover { color: red; }

Let’s recreate the fade-in animation from earlier,

using transitions rather than key frames (net.ag/
scroll-279). We’ll adjust the code to use opacity
and a transition. The CSS becomes:

.fade-in {
opacity: 1;
transition: all 1s ease-out;
}

Rather than reinventing the wheel when we

want to detect when an element scrolls onto the
page, I recommend using a utility such as Wow.js
(mynameismatthieu.com/WOW).
To set it up, download the script and reference
it on your page:

<script src="js/wow.min.js"></script>

86 may 2016
 Animation

Activate the script by declaring the following code

in JavaScript:

<script>
new WOW().init();
</script>

We can now add the class wow to any element

we want to detect on scroll, along with the class
of animation we want to apply.

<div class="wow fade-in"></div>

This will apply the fade-in animation when the

element is visible.

MORE COMPLEX ANIMATIONS

If we want to be able to apply these animation
effects to as wide a range of objects as possible,
we should try and stick to the transform and opacity
Animation principles
hide them at will. Transform can scale, rotate and This article sets out some

Built-in easing values move objects. Let’s put these together to create principles you can apply to
make sure your animations
some more interesting effects. always run smoothly (netm.

are a little robotic. Introducing page content

ag/perf-279)

It’s worth taking time We can use a fade animation to add some polish to
our page load. Rather than suddenly showing all the
to create your own content at once, we can make it transition into place.
In this example (netm.ag/content-279), the content all
properties. As it happens, these are the properties fades and slides into place at the same time.
that perform best. Let’s create the animation and a corresponding
Even when limiting ourselves to these two class to go with it.
properties, there are lots of effects we can create.
Opacity can be used to pulse objects or show and @keyframes fade-up {
0% {
opacity: 0; transform: translateY(3em);
}
100% {
opacity: 1; transform: translateY(none);
}
}
.fade-up {
animation: fade-up 3s cubic-bezier(.05,.98,.17,.97) forwards;
}

Here we’ve created a new animation, fade-up ,

that uses a transform to position the object lower
on the Y-axis before animating. It’s called through
the class fade-up .
Notice we’re using a custom Bézier curve for this
animation. All preset CSS animation easing values
are based on Bézier curves, and the built-in values
( ease-out and so on) are a little staid and robotic.
It’s worth taking the time to create your own easing
Figure 1 Pressing the button applies a fade-in class with its own animation,
triggering the circle to appear rules. You can find out more at cubic-bezier.com.

may 2016 87
PROJECTS Animation

IN-DEPTH

CSS ANIMATION
FRAMEWORKS
There are great sources of inspiration online if you’re getting
started with your own CSS animation library. Some you can
simply include in your project and start straight away, or you might
want to use them to create something custom for your brand or
project. If you need more inspiration, you can also find lots of CSS Figure 2 Apply different timings to existing animations to introduce
a different effect
and JavaScript animation examples on CodePen.

Animate.css In the previous example I applied our animation

daneden.github.io/animate.css to the containing content element so the entire page
This is a solid starting point, containing a massive list of classes you would load as one element. Let’s take this further by
can apply to elements. Simply reference the CSS file, and when you making the elements slide into place independently
add classes to an element, the animation happens. This works best (netm.ag/independent-279, fig 2).
when adding or removing classes using JavaScript.

Motion UI
Consider ways content
zurb.com/playground/motion-ui
This Sass library from ZURB makes it easier to apply custom
might be introduced,
animations to your UI. It’s a little more involved than Animate.css, such as sliding up or
but very powerful. You can create and tweak animations to meet
your needs, then invoke them using JavaScript. appearing from the side
BounceJS We apply the fade-in class to each element,
bouncejs.com then specify an animation-delay value for each.
This is a useful tool if you want to create your own library of
animations. It has lots of fun presets and takes the heavy lifting fade-up { opacity: 0; }
out of writing complex animation code. It uses advanced transform h1.fade-up { animation-delay: 0.1s; }
operations to create the animations, which can then be added to p.fade-up { animation-delay: 0.25s;}
your own animation CSS file and applied as you wish. .image { animation-delay: 0.6s; }

GreenSock’s GSAP First of all we need to set the fade-up items’

greensock.com/gsap opacity to 0 in order to delay when the animation
GSAP is a JavaScript animation framework. If you’re creating more starts. The delay is then specified in fractions of
complex animations (such as in banner ads or hero images), GSAP seconds. The result is that the various elements
offers a set of tools for handling playback, SVG tweening and more. fade in at different times, but all use the same
This is great if you want to go further than what can be done in CSS fade-in animation.
animations, but does present a bit of a learning curve. We’re overriding the animation-delay value but
retaining the original properties of the animation
so it remains consistent. This ensures if we were to
change the animation duration or easing, it would
change for all places the animation was used.

Overriding the timings

We can continue this idea of overriding the animation
-delay property when introducing a list of items.
Let’s set up a list of Star Wars movies so each one
appears after the previous one (netm.ag/stagger-279,

88 may 2016
 Animation

fig 3). To achieve this, we set up initial key frames

for a fade-right animation.

@keyframes fade-right {
0% { opacity: 0; transform: translateX(-3em); }
100% { opacity: 1; transform: translateX(0); }
}

We can then apply this animation to the li elements

and use a nth-child() selector to add a delay to each.

li {
opacity: 0; animation: fade-right 12s cubic-
bezier(.05,.98,.17,.97) forwards;
}
li:nth-child(1) { animation-delay: 1s; }
li:nth-child(2) { animation-delay: 1.2s; }
... and so on ... We’re using opacity to fade the button in, while also Figure 4 Using JavaScript
we can add a class to an
applying rotation to shake the button left and right element that will cause it
This means if we want to adjust the timings of the as it appears. to animate when it scrolls
into view
fade-right animation, we only need to change one set We can apply this to the class wiggle using the
of key frames. animation property:

Getting attention <button class="wow wiggle">Look at me!</button>

Animations can also be handy for attracting the
attention of the user. Let’s create an example where The Wow.js script takes care of hiding the button,
a button will shake when scrolled into view (netm. and when we scroll to it, we see the wiggle
ag/wiggle-279, fig 4). To begin, we’ll create the key animation. We could use this technique to introduce
frame animation: content – for example when sliding in a link to
another article when the reader reaches the end of
@keyframes wiggle { their current reading. Alternatively, we could use
0%, 7% { transform: rotateZ(0); opacity: 0; } it to draw attention to a mailing list sign-up form.
15% { transform: rotateZ(-15deg); opacity: 1; } CodePen uses a similar animation to remind people
20% { transform: rotateZ(10deg); } to save their work.
25% { transform: rotateZ(-10deg); }
30% { transform: rotateZ(6deg); } TAKING IT FURTHER
35% { transform: rotateZ(-4deg); } If you’re approaching a large project, or just want
40%, 100% { transform: rotateZ(0); } a handy toolset of animations available to reach for
} as needed, this is an approach worth considering.
It can help take a hassle and effort out of animation,
and keep things consistent, too.
Think about what sorts of animations might
best represent your brand. You can then consider
how content might be introduced, such as sliding
up, appearing from the sides or flying around in
3D. Put together little animations that enable each
behaviour. Then you can apply these animations as
and when they are needed, either directly to your RE A DING
classes, or by dynamically adding and removing Learn all about CSS
classes using JavaScript. animation in Val Head’s
Even if you’re starting with an existing CSS pocket guide from Five
Simple Steps. It’s a
framework, taking the time to learn how to great introduction to the
create your own animations is a great way to topic and very easy to
really personalise your designs and add some read: netm.ag/head-279
Figure 3 This list of movie titles can be animated into place item-by-item
using animation-delay individual character.

may 2016 89
PROJECTS Sketch
Exclusive o !
£10 OFF
Get £10 off the Discover Sketch
app book at netm.ag/offer-279
with the code NETMAG
Offer expires 29 May 2016

A B O U T T HE A U T H O R
MARC ANDRE W
w: themmed.com
t: @themmed
job: UI designer, author
areas of expertise:
Visual design, frontend
development
q: what’s the most useless
gadget you own?
a: A Beanie hat with built-in
earphones. Yes, really

SKETCH

COLLABORATE BETTER
WITH SKETCH AND ZEPLIN
Marc Andrew
w introduces Zeplin, a handy tool to help design

Sketch has gained quite a bit of traction and specs manually, where hours of production time
a lot of acclaim over the past few years. It has can be potentially lost. Say hello to you and your
become the de facto application for the modern-day developer(s) working together as a tight unit, from
UI designer, and rightly so. Since Sketch started to hand off to sign off.
make a significant imprint on the digital landscape, As any designer can attest, creating and passing
many companion apps have sprung up around it that design specs to a developer can be one of the most
make the whole design and development process time-consuming parts of any project. But with
VIDEO much more streamlined. Zeplin you can rest assured your developer will have
Marc Andrew has One of those is Zeplin, a fantastic collaboration the most accurate specs, every step of the way.
created an exclusive
tool for designers and developers. This application In this tutorial, we’ll create a simple screen design
screencast to go with
this tutorial. Watch helps you transition from a final design in Sketch to for an iOS app inside Sketch, and then I’ll show you
along at netm.ag/ a working, pixel-perfect product with the greatest how to take that design into Zeplin. I’ll talk you
zeplinvid-279
of ease. Say goodbye to the confusion of half-baked through many of the time-saving features that are
specifications and the drudgery of creating your available to you from within that application.

90 may 2016
 Sketch

Step 2 Add a rectangle at the top; this is where your page header will sit Step 3 As we’re designing an iOS app, it makes sense to add a status bar

First, create a new Sketch (remember to remove the border). ( T ) and insert something like EXPERT TIP
01 document. From here we’re Place this at the top of the artboard. ‘Choose your membership’. You can
going to create a design for an iOS
app screen that shows a list of As we’re working on a
edit the font size, colour and spacing
in the Inspector panel. Place this
WORK WITH
03
membership options for a fictional
service. Press A to bring up your
screen for an iOS app, it
makes sense to include a status bar.
text layer inside the rectangle you
created previously.
ICONJAR
artboard choices, and choose the Choose File > New From Template Keeping the various icon
iPhone 6 option from the Inspector > iOS UI Design . Then, from the We’re going to create three sets you have on your
panel on the right. Use cmd+R and assortment of UI elements now
05 membership options, so machine in order and
rename it ‘Membership options’. presented to you, select one of let’s go ahead add those to our
Give the artboard a background the ‘Status Bars (White) Symbols’, design. Press R , and draw out a one for a project can be
colour of #FFFFFF. and position it at the top of rectangle 375x195 with a fill colour
the artboard. of #4B5D79. Then alt+click and With Iconjar (geticonjar.
Select the Rectangle tool drag the shape layer to duplicate com) you have access to
02 ( R ) and draw out a rectangle Now add in a title for this it. Repeat this process one more all your icons from one
375x80, with the fill colour #324158
04 screen. Bring up the text tool time. Give the second rectangle application, and can
a fill colour of #719A9A and make search, organise and tag
the third one #E2787D.
an icon you like? Just
Let’s bring some icons into drag it from Iconjar and
06 the mix. I’m using an SVG drop it straight into the
icon set called Entypo (www.entypo. project you’re working
com), but you can choose one of
your own. Select a suitable icon
for each of the membership options
(I chose the Trophy, Emoji Happy
and Price Tag icons). Place one in
each of your three rectangles, and
position them just away from the
left edge.

For each of the icons use

07 the Scale tool ( cmd+K )
and set the width to 50px. Give
them a fill colour of #FFFFFF and
add a subtle shadow just to lift
Step 6 Choose a suitable icon for each option – I’ve used an SVG set called Entypo them from the design slightly.

may 2016 91
PROJECTS Sketch

For each of the icons, click on

08 the ‘Make Exportable’ button
at the bottom of the Inspector
panel. ‘Do we need to set the
different sizes?’ I hear you ask.
Nope. And you’ll see why when
we bring Zeplin into the mix.

Time to add some text to

09 each of our membership
options. Let’s make these too
good to refuse. For the first option,
use the text tool ( T ) to add a
snappy title like ‘The Big One’,
as well as the price for that option.
Finally, add a short line of text to
spur the user to choose that plan
(something like ‘Includes everything Step 15 With the Zeplin plugin installed, you can now export selected artboards in record time
but the kitchen sink’).
As before, you can tweak the
font size, colour and spacing via the the relevant sections. Change the On the next screen, click It’s as effortless as that. Jumping
Inspector panel. Align all those text wording and pricing to reflect the
14 on the options in the right back to Zeplin, you will see our
elements to the right of the icon different membership tiers. column and give your project a title. artboard has now been imported
you inserted before. Let’s call it ‘Membership Concept’. into the application.
Now, ladies and gentlemen, Give it a density of 1x – the same
Let’s group together the
12 it’s time to hand over this as the artboards that we created Now we want to bring our
10 text layers we’ve just great design to our development previously. This will ensure any
16 developer into the mix, so
created. Select all those layers and team. The Zeplin has landed! Head of the assets we export from Sketch they can have an overview of the
press cmd+G , then use cmd+R on over to zeplin.io and sign up for will be the correct sizes. style guide, specifications and
to rename this group something an account – there’s a free option assets used on this project. From
suitable like ‘Title + Price’. Next, that allows you to create one Back in Sketch, if you go to the Members section in the right
use the Alignment tools at the project. Once you’ve done that,
15 the Plugins menu you will panel, click on ‘Invite’.
top of the Inspector panel to align download the Mac application. see the Zeplin plugin has been You can now enter the email
that text group correctly inside Install the app, launch it and then installed. This enables us to export addresses of your developer(s), and
the rectangle you created in an create your first project. selected artboards across to Zeplin they will receive a notification that
earlier step. in record time. Go ahead and do they can join the project. If they
As we’ve been working that now. Select the artboard we don’t have Sketch, or are working
With your new group
13 on a design for an iOS app, created, and choose Plugins > on Windows or Linux, that’s not a
11 selected, alt+click and choose the iOS option. This will Zeplin > Export selected artboards problem. They will be directed to
drag to duplicate the group twice, ensure Zeplin adheres to specific ( cmd+E ). A little notification box the Zeplin Web App, and can work in
and place a version inside each of iOS guidelines (such as measuring will pop up where you can select tandem with you from there. That
design elements in points). your project and click ‘Import’. puts the ‘How can we collaborate

EXPERT TIP

CREATE CUSTOM SHORTCUTS

Go to ‘Keyboard’ in your system preferences and click Shortcuts > App Shortcuts > +

I use on a regular basis are shift+ctrl+U for setting my type to upper case, and shift+ctrl+l
Step 9 Add descriptions of each option

92 may 2016
 Sketch

Step 18 Measure the distance between elements by hovering over any part of the design Step 19 You can even leave notes for your developer on different elements of the design

when all my devs are on Windows Want to leave a note for your receive specific updates – for EXPERT TIP
machines?’ argument to bed.
19 dev? Need their feedback example, when new designs are

Double-click on the screen

on a specific element? No problem.
cmd+click anywhere on your
uploaded or resources are updated.
SETTING
17 we imported, and from the
right panel you can do a multitude
design to do just that. Here you
can easily open and continue a
21
Finally, click on the ‘Guideline’
tab at the top of Zeplin. From
DEFAULT OPTIONS
of things: add a description for conversation between yourself here your developer can check the
the screen, add Tags to easily and the developer. This all happens colour palette you’ve set for the
manage multiple screens, or hover between the Mac app and web app project and a list of the fonts used. is one of those simple
over a colour and click the droplets in real time. They also have the ability to export things that often gets
icon to add that colour to your out the colours in an application- overlooked, and keeps
style guide. If you’re a user of Slack, specific file. users repeating the
You will also have an overview
20 you can take things one same processes many
of any assets you have imported step further. From the web app Give Zeplin a try alongside
across for that screen (which in dashboard, press ‘Add to Slack’.
22 Sketch. Never has it been if you’re drawing a
our case are the icons we made This will redirect you to the Slack easier for designers and developers rectangle and removing
exportable back in Sketch). Zeplin configuration page, where you can to work together so efficiently on the default border every
has now set these assets at the choose your team and channel. a project. It’s a match made in single time (we’ve all
required sizes for the project. Very This will then allow your team to collaboration heaven! been there), there’s
handy indeed.
Give this a try: draw the
Your developer can click on rectangle and remove
18 any element and see all the the border, then with the
associated specifications. For shape still selected, go
example, if they clicked on the titles to Edit > Set style as default
they would see a detailed overview No more insert, yawn,
of the typeface, size, line height and
so on that we set back in Sketch.
In our case all these specifications
will be in points, as we’ve created
a design for iOS. The developer
will also be able to measure the
distance between elements by
simply hovering over any part of
the design. Step 21 Under the ‘Guideline’ tab is the project’s colour palette, plus a list of fonts used

may 2016 93
PROJECTS CSS

CSS

A B O U T T HE A U T H O R
JODIE DOUBL EDAY
w: www.holidayextras.co.uk
TYLE
SHEETS WITH CSS LINTING
t: @jodiedoubleday
job: UI architect,
Hungry Geek
areas of expertise:
CSS, beer
q: what’s the most useless
gadget you own? Are your style sheets a bloated mess? Jodie Doubleday
y takes a look
a: I bought a camera to
check up on my new puppy at how CSS linting can help you create tidy, maintainable code
at home. It just means I can
now watch my dog chew
my mail remotely We often start our CSS clean, simple and with not a new concept – notably, it was used in the Unix
good intentions, but as teams grow and we operating system in 1979. We have recently seen a
continue to deploy our code, it’s usually the style heavy push for linting in our JavaScript projects,
sheets that suffer. Developers scroll to the bottom using services like ESlint or JSHint. So why not
of a CSS file, adding in their new bits as they go, apply the same principles to our CSS?
with blatant disregard to the structure or rules that
have gone before. FIRST STEPS
I thought I was the only person who was tired of Linting your CSS doesn’t have to be hard. If you’re
seeing relatively simple websites with 3,000-plus working on a small, uncomplicated project it’s as
lines of badly written, inconsistent code, often simple as manually copying and pasting your CSS
scattered with the dreadful !important declaration. into the CSSLint website (csslint.net). The strapline
However at conferences I’ve spoken to many people of this website will sum up your reaction as you
with the same passionate hatred as me, from small parse your first CSS file: ‘Will hurt your feelings
startups to tech giants. (And help you code better)’.
Our style sheets are becoming monsters we Don’t be put off by the errors or warnings you
need to tame. Daniel Eden recently spoke at the first encounter; the key is to learn why your code
dotCSS conference about the same problems is producing these errors, why they are important,
at Dropbox, and how his job is now focused on and (of course) how to fix them. At the time of
re-architecting the company’s CSS codebase. writing the most recent stable version of Bootstrap
(v3.3.6) produced three errors and 247 warnings.
START LINTING The next step is to customise your linting rules.
So how do we solve this issue? Where do we even CSSLint breaks all its rules down into six distinct
start? One solution is to bin the CSS and start again. sections: errors, compatibility, accessibility,
Hey, why not do a full redesign of the website while maintainability and duplication, performance and
you’re there? Although this seems like a fun project, OOCSS. Each section’s rules can be individually
it doesn’t really solve the issue. It just sweeps it turned off or on, depending on your project.
under the rug for another year, until the same thing For example, one of the rules states that you
happens again. This is where linting can be your must not use box-sizing in your code, as it’s not
springboard to maintainable CSS. supported by IE7 and below. Most companies have
If you have not heard of linting before, it is the ditched support for this browser (I’m so sorry if
static analysis of code to alert you to obvious errors yours hasn’t, I’ll give you a hug if we ever meet),
in your codebase. It gets its name from lint rollers therefore this rule is not needed. Switch it off and
of the real world, rolling over the top of your work, suddenly the warnings on Bootstrap will go down
picking up those unsightly balls of code. Linting is to 225. Not bad at all.

94 may 2016
 CSS

Here you need to be strategic; you can’t just CONFIG

make all your CSS pass linting by switching off rules You will need to create a .csslintrc file in the root
that give errors or warnings. Instead you should of your project or wherever you will be running the
comb through the list of rules given by CSSLint and CSSLint command from. CSSLint always checks
decide which you want to throw errors, which you the current working directory to see if there is a
want as warnings and which you are happy to let .csslintrc file present, and uses these rules over the
lie. At Holiday Extras we did just that: the UI team default settings.
discussed how important each of the rules were and Command line arguments will override anything
agreed which ones we should adhere to. that’s in the file, so if you need to tweak some rules
for a specific project, then I would suggest doing
TASK RUNNERS that, rather than changing the rules in your config
If your project uses a task runner like npm, gulp or file. The linting config file we use at Holiday Extras
Grunt, then the manual process of linting can be can be found at hxts.co/csslint.
taken away with a few simple commands. Here we
will use npm to install CSSLint globally. CI TOOLS
All these tools are very helpful for solving the
npm install -g csslint problem of messy style sheets and maintainability,
but you may still come up against some resistance
This installs the CSSLint CLI from the npm from some developers who will grumble about
repository and allows you to run linting on the their code taking longer to deploy. People don’t like
change, and in this case may get around it by simply

Linting is the static not running linting on their files.

If you have continuous integration tools like

analysis of code to alert Travis or CircleCI (both free if your project is open
source) set up, you can get them to do the legwork.
you to obvious errors If someone deploys CSS that fails linting, these
tools will fail the build and alert you or your team
in your codebase to the error. Nothing should go through a pull
request without first getting the big green light
command line. You or your team can now check the from your CI tool.
status of your work as you go, which is much better
than being alerted to all the errors after hours of PREPROCESSORS
development time. If you use a preprocessor like Sass, Less or PostCSS,
To run CSSLint on the command line: then of course there is a linting tool out there for
you to use. Most are based on CSSLint but there are
csslint [options] [path-to-file] a few exceptions with different rules. Before you
rely on these in your projects, you need to ensure
This will report all the errors and warnings you are using them for the right reasons.
according to the default settings. However, you If it’s code quality you are after, and your linting
can customise the rules by passing in a comma- rules mainly fall in the maintainability and
separated list of options to the linter. duplication section, then linting your unprocessed
code is perfect. If you’re looking to ensure the code
--warnings= --errors= --ignore= being served has a high level of performance, then
it would be more beneficial to lint your processed
For example, if you wanted any use of the !important CSS, as that’s what the browser will be consuming
declaration to throw an error, you would write: and where performance matters most.

csslint --errors=important [path-to-file] SUMMARY

This is only the start of a long road to ensuring your
This is great for customisation, but with over CSS stays beautiful. We always want to take pride in
30 rules to pick from your command line is going to our work, and nobody wants to re-factor code just
get pretty hectic pretty quickly. However, it’s likely because it has become a monstrous mess. You may
you are going to be using the same rules over and clash with a few developers along the way, but it’s
over again – this is where we can create a CSSLint surprising how quickly linting conditions people to
config file. code for the better.

may 2016 95
 Learn the secrets to
solving everyday web
problems with CSS.

Download a free chapter of CSS Secrets by Lea Verou at oreilly.com/go/netmag2016

In the past years, CSS has undergone a transformation from being a This free chapter offer is exclusive
simple styling language with limited power, to a complex technology to net magazine readers only.
with its own developer ecosystem, conferences, frameworks, and
tooling. CSS has grown so much that it’s practically impossible for If you like what you see,
any single person to hold all of it in their brain. get 50% off the full
As a CSS user, you know that the challenge today is not to memorize CSS Secrets ebook, or
all of CSS’s features, but to use its features in a creative way to 40% off the print book.
come up with DRY (Don’t Repeat Yourself), maintainable, flexible,
lightweight, and as much as possible, standards-compliant solutions.
Use code PCBW when you
That’s exactly what CSS Secrets is all about. Popular speaker and check out at shop.oreilly.com.
author Lea Verou aims to open your mind to new ways of using the Enjoy this discount on most
features you already know, and show you a few you haven’t heard of. other titles as well.

©2016 O’Reilly Media, Inc. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. D1700
 Head to head

A B O U T T HE A U T H O R HEAD TO HEAD
CHRIS P E A RCE

CSS-IN-JS VS CSS MODULES

w: chrispearce.co
t: @chrisui
job: Frontend engineer,
Lystable
areas of expertise:
JS applications, scalable
frontend development
Chris Pearce
q: what’s the most
useless gadget you own?
CSS-IN-JS CSS MODULES
a: A Fitbit, for all the CSS-in-JS takes in many different implementations, Taking its lead from the problems highlighted with
exercise I don’t do
based around the premise of writing your styles within scalable CSS, CSS Modules (netm.ag/modules-278)
JavaScript (surprise!). It was brought to the industry’s is a recent solution championed by Glen Maddern.
attention by Christopher Chedeau, and born out of With it, CSS is written in small, local chunks rather
Facebook’s frustration with keeping CSS scalable. than within a global namespace.

GETTING TO GRIPS
Writing styles with JavaScript will feel surprisingly You already know CSS! The big adjustment is that no
familiar. No preprocessors required – you have the classes will be shared between files. Reusing styles
full programmatic power of the JavaScript language. comes down to using the explicit composes keyword.

HURDLES
States (e.g. :hover ) and media queries will require CSS Modules maintains the nicer features of CSS
custom solutions if you’re not using a library (such as (states and media queries) but we still have to define
Radium or JSS). All styles need to be explicit as you all our states up-front and rely on source-order.
can no longer rely on cascade or nested selectors Similar to CSS-in-JS, cascade and nested selectors
(e.g. ul > li ). are not reliable between components.

INTEGRATION
Going ‘raw’ and writing your styles inline with your CSS Modules requires a simple build step (the most
components requires no extra tooling, and you can popular being webpack’s css-loader ) after which
start right now. There are libraries that help fill the you can simply import and reference styles in your
gaps of the CSS-JS jump. However, all come with extra JavaScript. First-class support for static templating,
RES OURCES tooling and output, which can result in bloat. such as Jade or HAML, is on the roadmap.
Take a look at the
slides from Christopher SUPPORT
Chedeau’s ‘React:
For support, you need look no further than the rapidly CSS Modules is stable (albeit rather new) and has an
CSS-in-JS’ talk, where
it all began, at netm. growing React Native community, where CSS-in-JS is active, united community behind it. There are great
ag/js-278. For a the primary method for styling apps. docs and articles to get new users going.
comparison of different
CSS-in JS-techniques VERDICT
from Michele Bertoli, go
to netm.ag/bertoli-278. Both solutions require an atomic, component-style architecture to be utilised to their full
Finally, you’ll find an
introduction to CSS
potential, and really shine at larger scales. They are both pretty new, and under constant
Modules from Glen iteration by some of the cleverest engineers around. CSS Modules (being a minimal layer on
Maddern at netm.ag/ existing CSS) is by far the simplest to start with, but the power and portability of CSS-in-JS
maddern-278.
(especially looking at cross-platform JS apps) means it is worth considering for some apps.

may 2016 97
PROJECTS SVG

A B O U T T HE A U T H O R SVG
SHEHZ A D A ZR A M

MAKE YOUR SVG

w: bitbucket.org/shez1983
t: @Cohaesus
job: Web developer,
Cohaesus
areas of expertise:

ICONS ACCESSIBLE
Backend development,
PHP, Python
q: what’s the most useless
gadget you own?
a: Electronic bubble wrap
(it was a gift). No one can
resist the temptation of Shehzad Azram
m explores how SVG icons could help solve
bubble wrap!
accessibility issues, and shows you how to implement one
Things have come a long way from the days the creation of a separate image, which would
when we used plain images as icons. Yet there increase the size of the sprite.
are still a number of accessibility issues when it Next came icon fonts. These are vector-based
comes to icons. Thankfully, SVGs could go a long and therefore resolution-independent, and things
way towards addressing this problem. In this article, like colour and position can be manipulated through
I’ll take you through the different icon options we CSS. They also boast wide-ranging support across all
have used in the past, then explore the benefits major browsers and versions. However, to make icon
(and drawbacks) of SVG icons. Finally, I’ll explain fonts accessible you have to include some extra code
how to implement SVG icons, using automation tools that browsers ignore but screen readers do not.
to reduce the workload. There are further problems with this approach.
If designers use their own CSS with a different font,
ICON HISTORY a different icon will show. If the font rendering fails,
First, let’s go through a brief history of icons so you the icon will not display; instead users get something
can understand how things have moved on. Before like a square box, which doesn’t mean much to
the advent of CSS, people used images to create anyone. Relying on CSS font positioning properties
icons, which gave rise to issues around accessibility like line height and font size can be unintuitive when
and semantics. Each icon would have multiple working with graphical glyphs, particularly when the
images to support different states – for example, icons need to align with images and text.
to show hover states, different colours or sizes. Fundamentally, using fonts to render vector
The number of icons being used increased HTTP images is a hack to get widespread browser support.
requests, and thus also the page load time. If you had However, if for whatever reason SVG icons are not
to redesign the site, you would need to build a whole a possibility, see the boxout opposite for a guide to
new set of images for each icon. using icon fonts properly.
When CSS was introduced, things got better.
People became accustomed to using sprites (many ENTER SVG
RE ADING images glued together in one big image), resulting Finally, along came SVG. These are based on an XML
For a really great break- in one request. As well as faster page loads, this also markup language for describing two-dimensional
down on how to style
improved accessibility. Readers were able to ignore vector graphics, which means you can create
with SVGs, take a look
at this article from the icons if they were for decoration purposes only, graphics using code. Alternatively, if you don’t want
Jakob Jenkov: netm.ag/ as there was no markup on the page. However, to write code, you can create graphics using software
jenkov-279
altering icons remained a cumbersome process – such as Illustrator, save them as SVGs, and the code
changing the colour or resolution still necessitated will be generated for you.

98 may 2016
 SVG

IN-DEPTH

MAKE YOUR CURRENT

Working icons How font icons might look when working correctly FONT ICONS ACCESSIBLE
Font icons on their own are not really accessible in older (and
some newer) browsers. In particular, mobile browsers such as
Opera Mini and Blackberry do not support @font-face . With these
browsers serving millions of users worldwide, it is imperative we
address the issues if we are to use font icons.
If your site is already in production or you support older
browsers, it may not be wise to switch to SVG icons yet. Also,
Alternative look How font icons appear when a font fails to render
it does take some time to get accustomed to a change in your
workflow. In the meantime you can use the following techniques
While SVG has been around since the last century, to make sure your font-based icons are accessible and render
it took over a decade for Internet Explorer to catch properly in problematic browsers.
up with v9. With the rapid decline of legacy IE usage, Most popular libraries use :before or :after CSS to include icons.
SVG is now a viable solution across the vast majority However, screen readers will try to read them even though they’re
of browsers and devices. There are still some older in the unintelligible area of unicode. To address this, we can add
browsers that do not support SVG icons, but there these icons using spans, and then add aria-hidden=true so they
are tricks to get around this. are not readable.
So why should we use them over font icons? In the event of no @font-face support, we can fallback to text,
SVGs, like font icons, are vector-based. Unlike font PNG or another glyph. You can include whichever option you want,
icons, you don’t have to use workarounds to make hiding these versions by default and only showing them when they
them accessible: they already contain semantic title are required. My preferred technique is to use Modernizer to detect
and description attributes. They scale to any size font-face support and a-font-garde from the Filament Group
without losing detail, so look great on HDPI displays. (netm.ag/garde-279) to handle fallbacks.
When a font icon request fails, the browser can show a default

Unlike font icons, icon instead, which may look horrible. To avoid this, make sure you
define an alternative glyph using unicode.
SVGs already contain
semantic title and
description attributes
On top of this, SVGs have more CSS properties,
providing designers and developers with greater
control over stroke width and colour (they can now
create multicoloured icons, for example), as well Correct icon How a Favourite icon might look
as enabling them to target different sections of the
icons individually. It is also possible to animate all
or part of an SVG with JavaScript or CSS.

IMPLEMENTING SVGS
Having looked at the background to the issues
surrounding accessibility with icons, the question
arises as to how SVG icons can best be implemented.
Let’s look at an example workflow. Along the way Incorrect icon How a Favourite icon is changed on failed request
I’ll explain the caveats you should be aware of when
using SVGs.

may 2016 99
PROJECTS SVG

Design icons in Illustrator

RESOURCES Start by creating your SVG icons in Illustrator. You
should use simple keystrokes as opposed to paths,

REFERENCES as this will lead to less code being produced. When

saving, make sure you save only the icon, and not
the whole drawing board or canvas.
Here are some resources you can go to for help with creating Go to Objects > Artboards > Fit to Artwork Bounds .
SVG Icons. You’ll need to manually adjust this if there are
strokes outside the icon (i.e. if the icon is not
Automation contained within a perfect square or rectangle).
Creating an SVG icon workflow (netm.ag/fallback-279) – Luke Make all the fills pure black and the strokes
Whitehouse walks though how to use gulp as a build tool (GitHub transparent. If we don’t do this, the icon will have
repo at netm.ag/whitehouse-279). Towards the end you’ll also find an inline fill attribute that we won’t be able to
code that will help you turn your SVGs into PNGs for browsers that override with the fill CSS property later.
do not support SVGs. Clean up your icons to remove any excess text
from Illustrator that is not required for your gulp
SVG icon sprites: An optimised workflow (netm.ag/osborne-279) or Grunt tasks. For this you can use something like
– This guide to handling multiple vector graphics by Shane Osborne SVGO, but be careful as this might also remove
is also worth checking out. some information needed for CSS.
Once you have saved all the icons, you may want
Troubleshooting to combine them all into a sprite. While these are
SVG on the web: A practical guide (svgontheweb.com) – This site similar to the PNG-based sprite sheets of old, you
accompanies Jake Giltsoff’s talk at Breaking Borders. It’s a really will now be able to reference each icon with an ID,
detailed guide that is useful for many aspects of SVG icons. rather than having to keep track of its position on
the sheet.
Bulletproof accessible icon fonts (netm.ag/filament-279) – From
Filament Group, this is the place to look for help with modifying font Add PNG fallbacks
icons to improve accessibility, as well as other issues. At this point you need to consider if you want to cater
for those browsers that don’t support SVG icons, such
a-font-garde (netm.ag/fontgarde-279) – This tool from Filament as IE8 or older Android devices. If you do, you’ll need
Group is also really handy for ensuring your icon fonts load reliably. to create a PNG fallback.
The repo gives a detailed guide on how to provide fallback in case First, use JavaScript to check whether the browser
of no @font-face support. in question supports SVG. If not, replace these
with the fallback PNGs. To make this simpler,
Luke Whitehouse has written some JavaScript code
(netm.ag/fallback-279) that should help. Although
it is not possible to change the colour or other
properties of PNG icons, this approach should be
sufficient for a fallback.

SVG options Services such as IcoMoon offer SVG images to download

100 may 2016

 SVG

Add and style icons with CSS

Include SVG icons at the top of the page using a
server-side language like PHP or Python. You might
have to add title and describe attributes if these
haven’t been put in automatically (or edit them
if they are incorrect). This is important to ensure
the icons are accessible.
Next style the icons using CSS. As mentioned
previously, with SVGs you have bit more flexibility.
Remember to style the SVG using the ID of the <g>
tag (so if your symbol is <g id="#arrow-drop-down"…> ,
you should use the ID #arrow-drop-down to target
your CSS.

AUTOMATION TOOLS
While doing all this manually can be tedious, tools
such as gulp and Grunt can help. Through these
tools and with the help of plugins, we can automate
Enhanced workflow
the process of converting SVGs into sprites, setting gulp-svg2png: Converts SVGs to PNGs gulp is an automation tool
gulp-svg-symbols: Converts SVGs files into that can streamline your
workflow
We can automate the a single SVG file as a symbol

process of converting To use these tools, you need to install NodeJS

and either Grunt or gulp, then create some code in
SVGs into sprites and JavaScript that uses the aforementioned plugins.
This means you’ll need to be comfortable working
adding supporting CSS in JavaScript and the command line. You can also
follow the guidelines provided in references boxout
up PNG fallbacks and creating supporting CSS files. opposite.
Here are few plugin options for each step: To be able to style the SVGs by changing their
colour in CSS, the SVG code needs to be included
grunt-iconizr: A powerful plugin that can create in the HTML body of the page. It is worth setting
a CSS icon kit from SVG, and serve it as a SVG or up an include to bring this in automatically.
PNG sprite with CSS, Sass or Less You may also want to define a task called watch
grunt-svg-sprite / gulp-svg-sprite: As the names using the plugins gulp-watch or grunt-contrib-
suggest, these create sprites for SVG watch. This will watch for any changes you make
grunt-svgmin / gulp-svgmin: This is useful for in directories and automatically create new sprites,
stripping any excess information from SVGs in fallback PNGs and CSS, should you want to add more
order to reduce file size SVGs in the future.

GET STARTED
You should now have a basic idea why SVG icons
are a good idea, how to implement them, and any
particular caveats. Check the reference boxout for
further resources that will help you automate your
workflow and give some more detailed information
on the hows and whys of the SVG.
Remember, it may take some time to get used to
a new workflow, especially if you are working in a
large team that is accustomed to using font icons.
Due to time constraints and having to support old
browsers, it may not even be possible for you to use
SVG icons. However, you could certainly experiment
with them in a personal project before introducing
Automation help Task runner Grunt automates repetitive tasks them to your company and to the team.

may 2016 101

 The number one
destination for web design
news, views and how-tos.
Get Creative
Bloq direct to
your inbox with
our weekly
web design
newsletter

Graphic design Web design 3D Digital art

www.creativebloq.com
 Standards

libraries and frameworks. Only once emerging ideas

are established should we move to standardisation.
This is what the Extensible Web Manifesto (netm.ag/
extensible-279) encourages and this is the direction
Mozilla is taking with WebVR.

THE EXTENSIBLE WEB

Within Mozilla is the MozVR team, a small group
of researchers and engineers to which I belong.
MozVR is bringing high-performance VR to the web,
aligning with Mozilla’s mission to promote openness
and innovation on the web.
Recently we released a JavaScript framework
called A-Frame (aframe.io). A-Frame brings 3D and
VR to HTML, allowing developers and designers
to use the interfaces they know and use existing
tools and libraries as they like. The Extensible
Web Manifesto encourages standards to “develop,
describe and test new high-level features in
HTML JavaScript and allow web developers to iterate on
them before they become standardised”. That’s

WEBVR
what A-Frame is doing.
A-Frame is built off an entity-component system,
a pattern common in game development and
universal game engines like Unity. Developers can
Kevin Ngo explains how Mozilla’s write, share and plug in components that extend
A-Frame promotes innovation in VR new features. So if a feature doesn’t yet exist or isn’t
to par, they don’t have to wait on the core A-Frame
The first wave of virtual reality headsets is team. The ecosystem already features third-party
shipping. Many of us have dreamed about components that enable gamepad controls, physics
a Metaverse: virtual worlds we can explore as if and voice recognition. The extensibility of A-Frame
they were real. WebVR is VR within the browser grants developers permissionless innovation. With
and it’s a natural vehicle for driving that Metaverse. this short-term innovation scheme, developers can
Just as today we can jump from page to page on the rapidly experiment with new ideas in order to help
web, with WebVR we’re able to jump from world to advance WebVR.
world. Today we can publish a website; with WebVR Another tenet of the Extensible Web Manifesto
we spawn worlds free from gatekeepers. It is is to make new features easier to understand and
important that WebVR makes early advancements, build out. A-Frame introduces a virtuous cycle:
as we’re already witnessing fragmentation across developers try out new things while the MozVR
different devices in the VR ecosystem. team introduces bleeding-edge WebVR APIs.
With VR being fairly new and WebVR even more With A-Frame as a vehicle, we can ship tools and
of a greenfield, it’s difficult to know what will implementations around the new WebVR API to
emerge as common patterns or best practices. With developers immediately. They, in turn, can iterate
new features on the web there tend to be months and validate them. Hence the virtuous cycle.
or years of proposing and drafting behind closed For WebVR to succeed, we’re going to need new
doors, careful implementation by browser vendors interfaces, new tools and new ideas. Rather than
and gradual adoption by developers, and only then designing these slowly behind closed doors, we built
feedback and iteration. This is not a feasible course A-Frame so we could pull the entire web community
of standardisation for WebVR. into the effort. Together we’ll try lots of things and
For WebVR to evolve quickly, we need open slowly focus on the ones that work. Then we’ll look
experimentation and healthy competition between at standards. And then at the Metaverse.

Kevin (@ngokevin_) is a software engineer for the MozVR team at

PROFILE

Mozilla, based in San Francisco. He is a core developer of A-Frame,

MozVR’s WebVR framework

may 2016 103

PROJECTS Performance

A B O U T T HE A U T H O R
JAMIE K NIGH T
w: www.jkg3.com
t: @jamieknight
job: Senior accessibility
specialist, BBC
areas of expertise:
Accessibility, performance,
HTML, CSS
q: what’s the most useless
gadget you own?
a: A Three-branded Skype
phone I keep as a ‘spare’.
It’s a terrible phone but
works reasonably well as
a hammer or a doorstop

PERFORMANCE

SITE PERFORMANCE
ADVICE FROM THE BBC
Jamie Knightt reveals the techniques the BBC uses to speed

Last year during a user testing session for fast and our users flowing easily. I will first look at
the BBC News app, one of the users made preserving flow, then take a closer look at caching.
a comment that has really stuck with me. They
declared: “I like to flow”. I don’t think there’s a KEY GOALS
better summary of what performance means to our Preserving flow within a site will help meet the
users. On a fast app or website, the user can flow needs of different users. There are two goals to bear
around, interact and engage with the content. in mind:
Flowing experiences are good for site owners too.
RES OURCE A fast-flowing experience helps users achieve their 1 Minimise pauses: Delays reduce the user’s focus
This is a great goals, and in turn we achieve our organisations’ and introduce a switch in context
discussion of different goals. Amazon and others have demonstrated the 2 Prioritise content: Load the content the user
approaches to caching, strong link between performance and user activity: cares about most first
with pragmatic advice
on when and how to use as the wait for pages goes down, the amount of time
different techniques: and money the user spends goes up. To achieve both goals we must consider website
netm.ag/basics-279 In this tutorial I am going to explore some of performance holistically. Performance is about
the techniques we have used to keep the BBC site more than just how long it takes for a page to load

104 may 2016

 Performance

– to preserve our users’ flow we need to consider

the overall experience and where the pauses lie; IN-DEPTH
then think about which trade-offs we should make
to give the best experience.
Sometimes it’s possible to design out common
pauses once we have a understanding of how our
ADDING A CACHING
users consume our content. For example, if we
have a tabbed interface and we know one tab is
popular, loading the tab’s content with the rest of
LAYER WITH VARNISH
the page may give a better overall experience than HTTP cache headers are used by the hardware between your
lazy loading it on request. The first page load will servers and the user’s browser. These network caches can greatly
be slowed, but the ‘instant’ tab load will make the aid performance and reduce load on your servers. At the BBC, we
interaction feel much smoother. use Varnish Cache to provide our own HTTP cache as part of our
server infrastructure. This is known as a reverse proxy cache.
THE NETWORK Varnish works much like the browser cache. For files marked as
No matter how we slice it, we need to get content public, it can cache the complete page or parts thereof, and serve
across the network from our servers to the user. them direct to the user. It will serve the files until the maximum
The network is one of the main problem areas specified age of the file is reached.
for causing pauses, so it’s a good place to look in Varnish is very fast and easy to scale. If you need more capacity
order to improve our users’ flow. There are many you can add servers to your Varnish pool. For a high-traffic website,
techniques for optimising how we work with the even short caching periods of a few minutes can greatly reduce the
network – two common ones are to reduce page load on the main servers. Unlike a cache within the server software
weight and to reduce request count. The less we use itself, Varnish is technology-agnostic; with the correct headers set,
the network, the fewer pauses we expose our users it will work for any backend technology such as PHP, Node or Java.
to. However these optimisations all occur after the Varnish can also handle other, more advanced features.
first request for the HTML file is made. A technology know as an Edge Side Includes (ESI) allows Varnish to
cache separate parts of a page individually, and to combine them as

To preserve our users’ requested. This is very useful when working on websites made up
of many modules. It can also perform other optimisations, such as
managing cookies, various forms of routing and managing multiple
different ‘variations’ automatically, to increase the hit rate.
For more information about how we have used Varnish at the
BBC, check out the presentation at netm.ag/varnish-279.

The request for the HTML file is the lower

bound for page performance. Nothing happens
until it has been completed, so it’s a good place for
optimisation. Caching is powerful because it works
for the HTML request. Plus, it supercharges all our
other network usage optimisations.

CACHING Caching layer Varnish is an open source project providing a network cache that
Caches are created when a small amount of can be controlled directly by the site operator
something is stored closer to where it is needed,
normally to prevent rework. For example, if I am
eating Skittles, I tend to pour a few into my hand
and then eat from there. In effect, I am creating
a cache of Skittles in my hand as it’s quicker to eat
them that way than going back to the packet.
This same pattern is used in technology. There
are three caches we have to consider:

Server caches: Cached data on the server, such

as the results of database queries

may 2016 105

PROJECTS Performance

RESOURCES

FURTHER READING
There are plenty of articles out there to help you expand
your knowledge on caching techniques. These are some of
the best, to get you started:

A Beginner’s Guide to HTTP Cache Headers

netm.ag/young-279 Time limit The News homepage uses a 30 second max-age cache header
to get content in front of users quickly without too much load
A great guide for going deeper into the way cache headers work
and how to apply them to your project.
Caches built into the network,
Intelligent PHP Cache Control sometimes by the site operator (known as a
netm.ag/coyier-279 reverse proxy cache), but more often by ISPs
A good example of using caching controls headers with PHP. or other networking providers
The browser stores files on the
Speed Up your Mobile Website with Varnish user’s hard drive for reuse by the user
netm.ag/andrew-279
Rachel Andrew provides a great step-by-step guide to get you Caching can make for a huge performance
started with HTTP caching. improvement; at the BBC I have seen caching
increase performance more than 20 times in
Application Cache is a Douchebag production code. It is beneficial for site operators
netm.ag/archibald-279 too. With caching, more users can be supported by
A detailed look at other forms of caching available to developers, the same hardware, or less hardware can be used
targeting more modern use cases like offline apps. to support a given number of users. This reduces

BBC Weather: Changes to Technical Architecture

netm.ag/weather-279
A deep dive into how we have used varnish caching and CDN
failover with client-side variation.

the cost in hardware per user and therefore reduces

website operating costs.

DESIGN FOR THE CACHE

For it to be effective, we want to use cached data
as much as possible. To extend the Skittles analogy,
if I want a blue Skittle but I don’t have any blue
Skittles in my hand (aka my cache), I will have to go
back to the packet. This is known as the ‘hit rate’.
It’s a ‘hit’ when the item is in the cache and a ‘miss’
when it’s not. We want a high hit rate so the cache
takes most of the load.
One of the simplest methods to increase hit rate is
to reduce variation. Stretching my Skittles analogy
a bit, imagine if all Skittles were red. That way, any
Skittle in my hand would be a cache hit; I would
never need to go back to the packet. Applying this
to the web, if we can give the same page to as many

106 may 2016

 Performance

users as possible, the cache becomes more effective

as more requests will hit the cache.

CACHING HTML
So that’s the theory, let’s get practical. First, we
need to tell the world that our pages are cacheable.
Then we need to look at how to best use the
cached pages to boost performance without losing
functionality. For this deep dive, I will focus on
network and browser caches.
Let’s start by looking at caching the request for
the HTML. Caching of all file types is controlled
using HTTP headers. The headers are meta data
(data about data) sent from the server to the
browser and visible to all the network hardware
Server-side variation
in-between. To tell the world it has permission to how we treat pages. Cached items are identified
Across the BBC sites,
cache our pages and to share that cache between using the URL. There are ways to ‘revalidate’ cached signed-in users will have
their user name swapped
users, we set the following header: content, but for the simplest case one URL means
into place client-side
one cache entry, so caching HTML pages for too long
Cache-Control: public, max-age=30 can result in users missing content updates.
However, we can take advantage of this behaviour
Here, we have also set a time limit: the maximum when it comes to static assets. At the BBC we send
amount of time the cache should reuse this page all static assets with a maximum age of 31,536,000
for, in seconds. For this example, I have set it to 30 seconds set in the cache header. This ensures the
seconds. Explore the Further Reading boxout on the assets are cached for 365 days. In effect, assets are
left for more resources on setting cache times. only requested once. This is good for performance,
By setting the page to public , the user’s browser but bad for flexibility as changes to that asset will
(and any hardware along the way) will keep a take a long time to get to the user.
copy. So the first page load will make a request, In order to work around this, every time we
but all page loads after that will reuse the original release a new version of a page, we change the URL
response, until the time limit is reached. where the assets are kept. This trick means that
The effect of network hardware along the way new changes are put in front of users immediately,
can be profound. Many large networks (such as ISPs) but we still get the same performance benefits.
will have a cache shared between users. Mobile
operators also use this technique heavily – for CLIENT-SIDE VARIATION
example, to cache and recompress images served As we observed before, putting the right content in
over 3G. Site operators can also place a HTTP cache front of the user is key. An example from the BBC
in front of their service. This is what we have done would be showing signed-in users their user name
at the BBC (see boxout on page 105). on each page. People don’t visit the BBC to view
their user name, so it’s not priority content.
CACHE STATIC ASSETS FOR AGES If implemented server-side, this variation would
A technique we use a lot at the BBC is to treat static be terrible, as every signed-in user would have
assets (like images, CSS and scripts) differently to unique pages missing the cache. Instead, we give
all signed-in users a single page, then swap the
user name into place client-side. This is a good
example of progressive enhancement being used to
aid performance. It’s a subtle technique, but it gives
a huge performance boost.
RES OURCE
FINAL WORDS An in-depth discussion
In this article we have looked into using caching of how video files are
cached differently to
in order to enhance website performance. The web pages within the
enhanced performance will in turn lower operating BBC platform: netm.ag/
costs for our websites and preserve our users’ flow, video-279
Static assets BBC iPlayer stores static assets for a year – alterations to the
URL ensures users see new versions promptly leading to a great user experience.

may 2016 107

PROJECTS Testing

A B O U T T HE A U T H O R
CR AIG SUL L IVAN
t: @OptimiseOrDie
job: Optimiser of
everything, Optimal
Visit Ltd
areas of expertise:
Analytics, UX, split testing
q: what’s the most useless
gadget you own?
a: A videophone featuring
a (gasp) 1200/75 modem
and keyboard, with CRT
monitor. It’s like something
from a 60s Bond film!

Photo: iStock
TESTING

15 TIPS FOR CROSS-

DEVICE OPTIMISATION
Craig Sullivan presents the key rules to remember when optimising
and testing your sites to ensure compatibility on a range of devices

I started messing around with HTTP log files device experiences. If you get a small number of
and user agent strings over 15 years ago, complaints, you probably have a major disaster on
analysing and attempting to understand all the your hands. If you don’t get any complaints, it’s
different devices rocking up at the early John Lewis likely still broken.
ecommerce websites. What advice would I give We can’t rely on website visitors to be our ‘canary
myself, if I could go back in time? in the coal mine’ for device and browser problems
RESOURCE It would be this: Every website or product – we have to take responsibility, and become
If you want to use
you work on from now on will be broken – you smarter and more proactive in how we test. Device
Google Analytics to just don’t know where, on what device or browser, compatibility is a right not a privilege, and getting
optimise your device or how severely. If you hunt these defects down, it wrong is a form of neglectful discrimination.
experiences, this article
gives a complete step-
you’ll make easier money for your clients than This article outlines the key rules to remember for
by-step guide to mining almost all your other work put together. cross-device optimisation and A/B testing. Tackle
the data profitably: It’s taken me 15 years to realise that despite the optimisation tips first. If you’re making basic
netm.ag/mining-279
the tendency of customers to complain quickly, mistakes with device compatibility, performance
the vast majority won’t report bugs in your and usability, there’s no point bothering with A/B

108 may 2016

 Testing

testing. Find and fix the broken things first. Then,

when you’ve got enough traffic to run A/B tests
FOCUS ON
(at least 500 conversions or checkouts a month)
– you can make some new mistakes.

1. DON’T ASSUME RESPONSIVE

SOLVES EVERYTHING
BUILD A DEVICE LAB
I once built a tiny mobile site that’s not responsive, There are several ways to get a good testing rig. Here are some
yet now takes the best part of a billion Euros in options for you to choose from:
revenue every year. For the tasks required, it’s
perfect. It’s not responsive in fluid layout terms, Make your own device lab
but it is responsive to the needs of almost everyone Use analytics data to figure out the key devices your customers are
who uses it. Know the difference. using, then buy most (or all) of these for the office. You’ll find unlocked
Sometimes people think that ‘responsive’ is a phones on Amazon or eBay. There’s even a good book for building
sign of digital mastery. It’s just an attribute that your own lab: netm.ag/build-279.
conveys nothing of quality – like saying ‘we have
a website’ or ‘our website lets you click things’. It’s Friends and family
no guarantee of a great cross-device experience. If you need devices for testing, your colleagues, friends and family
I see many responsive sites that have a superficial may have what you’re after. Why not ask?
slickness but fail on usability because the team has
ignored customer knowledge. One good example is Open device labs
People donate their old phones and the labs make them freely
available for you to drop in and test your stuff. There’s probably one
Every website you work near you – check at www.opendevicelabs.com.

on will be broken – you Cloud testing tools: Desktop

just don’t know where There are a number of tools that let you test desktop browsers using
real software (not simulators). Take a look at www.crossbrowser

or on what device testing.com, www.browserstack.com and spoon.net.

Cloud testing tools: Mobile & tablet

an ecommerce site that went responsive and lost Rent devices from the cloud and control them as if your finger was
40 per cent of its revenue. It had built a great mobile there. Install apps from any iTunes store, rent a phone in Brazil,
experience but the desktop version sucked, and and control a tablet on 3G in California. Try www.appthwack.com,
that’s where 80 per cent of the money came from. www.crossbrowseresting.com or www.deviceanywhere.com.
Knowing where the golden goose is helps if you
want to avoid killing it! Browser sync software
These tools are useful for your lab. You can throw designs or live
2. DO YOUR RESEARCH FIRST sessions onto multiple devices in one click – a very handy way of
Optimising a site does not start with hacking at the seeing one page on 10, 20 or 30 devices! Try Browsersync (or the
page content. It starts with doing your research so grunt-browser-sync plugin) or Ghostlab to get started.
when your lips say ‘customer journey’, what comes
out isn’t a fairytale. It’s vital to know the visitors,
their tasks and goals, entry points, device mix,
paths, flows and abandonment areas first. It is very
difficult to solve a problem you don’t understand.
Using analytics data with UX research, surveys or
feedback is a rapid and lightweight way to remove
bullshit, ego and assumptions about ‘the journey’.
One hour of informed data is worth a thousand
hours of unchallenged opinion.

Open device labs Here, people donate their old hardware to make a free
Further reading: ‘Conversion research in one hour’ device lab where people can come and test their projects
(netm.ag/batman-279); ‘Session replay tools for
research’ (netm.ag/replay-279).

may 2016 109

PROJECTS Testing

IN-DEPTH

GET OUT OF THE OFFICE

There are some excellent tools and techniques for getting
feedback on your product. You want focus? Immerse yourself
in customer feedback.

Lab in a laptop
With the right software, you can turn your laptop into a mobile
usability lab that captures video, audio and faces. Here are some
options for this:

CamStudio (www.camstudio.org) – Basic but free Swapping devices A Google Analytics User ID view showing
overlapping device usage
Camtasia (www.techsmith.com/camtasia.html) – Good for the price
Snagit (www.techsmith.com/snagit.html) – Brilliant despite
some limitations 3. DO TRACK PEOPLE, NOT DEVICES
Silverback (Mac) (www.silverbackapp.com) – Widely used Unless you’re using an analytics set-up that tracks
Techsmith Morae (netm.ag/morae-279) – Pricey but excellent users, you’ll just end up tracking devices instead.
Companies complain that their ‘mobile’ traffic isn’t
Recording mobiles and tablets converting – and we find that the traffic is actually
Whilst I love usability rigs where you put your device under a converting, just on a completely different device.
camera and lights, it just never feels natural. Plus, it doesn’t work in People may use their phone to browse and add
a pub! So, some clever solutions here to mirror a device to another a product to their basket, but find it’s tricky to get
room, and a screen recorder for Android and iOS devices: through the checkout, so finish the sale on their
laptop. The site thinks of these as two people:
Reflector Airplay Mirroring (www.airsquirrels.com/reflector) a mobile customer and a desktop customer.
UX Recorder: iOS (uxrecorder.com) So your conversion problem is actually an
Screen Recorder: Droid (netm.ag/probe-279) attribution issue. How can you credit the sale to
a device experience if the customer uses more
Skype hugging (netm.ag/hug-279) is a great idea too – web-call your than one device? Google Analytics has a user view
participant and get them to turn their laptop around and hold the you can switch on (for logged-in users) that lets
phone in front of the webcam. Record the session, and you’re doing you track people, not devices, and there are many
mobile remote UX testing. analytics tools to help you make sense of this.

Remote recording 4. DON’T IGNORE THE WIDER CONTEXT

Use these for recording customers on a web call (mobiles may In this hyper-mobile device world, context is
need hugging): everything. What you need from an airline app
might be very different 48 hours before your flight
Skype & Hangouts (bit.ly/hosks) – You may need a screen compared to when you’re running for the gate. For
recorder to record the audio/video that person with the phone, you need to consider
Join.me (join.me) – Get the pro trial. This is my favourite option; the factors that impact the experience. These might
the software is superb, and it’s free include the tasks, goals, device, location, data rate,
Gotomeeting (gotomeeting.com) viewport, urgency, motivation, data costs, call costs,
Goto Assist (netm.ag/goto-279) or even the weather at the time of their visit!
Business Hangouts (netm.ag/hangout-279)
5. DO GET OUT OF THE OFFICE
Tip: If you have staging or test systems, you can share your (office- Making better products shouldn’t involve long
based, works on Firefox only) prototype with the customer, let days spent in the office. Why not break up the work
them drive and record the entire thing! day with visits to coffee shops and pubs? This is
one of the cheapest ways to find customers for UX
research. Offering a beer or coffee in exchange for
feedback on your prototype or design is a priceless

110 may 2016

 Testing

return on investment. And don’t forget the website

– if you have traffic, you can recruit people and run
tests with them online too.

Further reading: ‘UX tools to rule them all’ (netm.ag/

tools-279).

6. DON’T ASSUME EVERYONE

USES iPHONES
In most analytics set-ups, iPhone models are
lumped together, suggesting these are the main
customer devices. If you just look at models in your
data, this will skew your thinking; you need to split
devices by OS or platform to see the real picture.
Google Analytics might say my top model is the Device split Diagram showing the percentage splits across device
‘iPhone’ but even a handful of top Samsung models classes, OS and models
may add up to a much larger audience.
Every time someone is tempted to focus on their
own personal device preference instead of the the performance (as you browse your site on a Wi-Fi
customer mix, direct them to the diagram above connection), you can let the data tell you where it
right (it’s worth sticking it up on your office wall) sucks. Look at the DOM timings report: this records
to remind them what the data says. how long the webpage structure and content takes
to load. Making sites quicker is a game changer.
Further reading: ‘The ultimate guide to using Google There is a huge correlation between performance
Analytics for cross-device optimisation’ (netm.ag/ and conversion rate so if it’s slow, you’re spending
diagram-279) marketing money just to send people to your
competitors!

In your data, you need Further reading: ‘Interpret site speed’ (netm.ag/
to split devices by OS metric-279).

or platform to see the 9. DO COPY THE TESTING METHOD,

RATHER THAN THE CREATIVE
real picture When you look at the tests other companies have
run, you have no idea if they completely borked
7. DON’T FORGET CALL TRACKING the test or not. Their data, method, QA or sample
A mention for a free and rarely used technique. size might show they made elementary mistakes.
If you have touch devices that can make phone They might have run the test for too short a period
calls, you can track calls. Simply add an event (or of time or not checked if it was collecting data
pageview) to your analytics data each time someone accurately. You just don’t know.
taps a phone number to call you. Then you’ll know And even if you did have all the background info,
how many calls you get, exactly what web page you still couldn’t predict if their method would work
people called from and which marketing campaigns for you. Your customers, marketing, website and
or sources drove the most calls. everything else are completely different. In short,
I used this data to analyse a PPC account for the best practice rules for testing are mainly about
a large company. When we factored in the sales copying the method and not the creative.
coming from phone calls, it completely changed our
bidding. The saving was 40-70 per cent lower bills Further reading: ‘The endless suck of best practice
for PPC but the same amount of revenue. and optimisation experts’ (netm.ag/suck-279); ‘When
conversion optimisation best practices fail’ (netm.ag/
8. DO USE REAL DATA TO fail-279).
TRACK WEBSITE SPEED
Not many people know that Google Analytics 10. DON’T TEST WITHOUT PLANNING
collects real visitors’ measurements of how slow There are millions of things you could test in
your pages are, every day. Rather than imagining places all over your site. If you just ‘get started’

may 2016 111

PROJECTS Testing

advance, then run it for that time, stop it and

analyse it. Most of the tests being run in the
real world are completely fictional – and that’s
why people get disappointed when the promised
‘lift’ in conversion does not arrive. Calling tests
wrongly or waiting too long for results are common
problems that should be avoided.

Further reading: ‘Statistical significance does

not equal validity’ (netm.ag/stat-279); ‘Why every
internet marketer should be a statistician’ (netm.ag/
market-279).

14. DO SEGMENT BY DEVICE CLASS

If you have different devices or breakpoints in your
design, the A/B test will look completely different.
Hypothesis kit Ask people to describe the test they want to run using this sentence. If you’re If you’re not sure how your design looks on all
laughing, it’s a bad test devices, how can you be sure it works at all? If you
don’t analyse and segment the data by the different
device classes or ‘breakpoints’, how will you know
you might eventually get an optimal website – but the behavioural shift? One of my clients stores the
the heat death of the universe will get you first. exact design the customer saw in their data layer,
If there is stuff broken in your experiences, you which is very useful.
need to fix that first (before testing) as otherwise it Always understand how you’re targeting or
will drag everything else down. Once you have the segmenting people across mobile, tablet and
basics of performance and device compatibility, use desktop device classes. There is no ‘average’ visitor
analytics to identify opportunities. – not when the device experience varies so hugely.
‘Just changing stuff’ isn’t a good enough reason
to test; you need evidence or insight to drive a good 15. DON’T FORGET QA TESTING
test. The best learning comes from having great If you haven’t worked out your device mix, you are
questions to channel into your testing. probably not QA testing your A/B tests either. That
means quite a few of them are probably broken
11. DO ESTABLISH YOUR HYPOTHESIS – and if your A/B tests are broken, your data and
The Hypothesis Kit is one of the most useful things decision-making is likely flawed. About 30-40 per
I teach: cent of all my test designs fail basic QA, even with
high-quality developers – that’s JavaScript for you!
Because we saw [data/feedback] we expect that Assume it’s broken until proven otherwise.

[data metric]. SUMMARY

Here I’ve covered a number of tips for improving
Asking people to frame their question or A/B test your cross-device experiences. When you’re
in this way forces them to think about why they are starting out, knowing your device mix and
running the test and how success will be measured. understanding the customers behind those devices
is vital. The next stage is to work with data to help
Further reading: Hypothesis kit 3 (netm.ag/kit-279). you prioritise your efforts. Making a good testing
list (with the aid of Google Analytics) cuts the effort
12. DO RUN A TEST CALCULATOR FIRST for developers, but will increase the number of
It’s really good practice to run a test calculator defects you remove on popular devices.
before you A/B test. If it says it will take around Designing great cross-device experiences is
nine million years to finish, you can do something a careful balance of data, intuition, empathy and
more useful with your life. experimentation. If you allow these to occupy the
space usually filled by ego and opinion, good work
13. DON’T STOP AT 95% CONFIDENCE will flourish. As Stephen Hawkings said: “The
It’s a very common noob mistake to make with greatest enemy of knowledge is not ignorance,
A/B testing. You should decide your test time in it is the illusion of knowledge.”

112 may 2016

 ON
SALE
NOW

Written by the industry’s leading experts, The Ultimate Guide

to WordPress Vol II shows you how to get the best from the world’s
most popular content management stystem

Pick up your copy at

netm.ag/WordPressguide
PROJECTS Accessibility

ACCESSIBILITY

USING ONCLICK WISELY

Cordelia McGee-Tubb explores how to ensure your
clickable elements are actionable by everyone

The onClick handler is a powerful piece of these over arbitrary clickable elements. Ensure you
JavaScript. You can add it to any HTML element provide multiple ways to perform an action. You can
to make that element clickable. But should you? Alas, add a click event to an element that isn’t natively
there’s a big difference between making something actionable, as long as there’s another way to perform
clickable and making it actionable. that action with a keyboard.
Many frontend developers code first for what Imagine you’re coding a tiled interface, where
an element should look like, then what it should clicking a tile expands its content. Making the entire
do. So, ‘an X in the upper-right corner that closes tile a button would mean screen reader users would
a panel’ might result in code with the onClick hear the full text of the button, but no indication
tacked on after styling: <span class="pos-top-right" of what it does. Instead, adding an ‘Expand’ button
onClick="close()">x</span> . inside the tile and assigning the same click event
This span works as expected with a mouse, but to both tile and button would make the action
keyboard users can neither reach it nor activate it keyboard-friendly while preserving the mouse
with Enter or Space. So how can you ensure every affordance of a larger click region:
clickable element is fully actionable?
<article onClick="expand()">
MAKING ELEMENTS ACTIONABLE <h2>Article 1</h2>
Always tackle functionality first. If we think of the <p>Text…</p>
same element as ‘a button that closes a panel and <button onClick="expand()">Expand</button>
appears as an X in the upper-right corner’ it’s more </article>
obvious how to structure it with semantic, accessible
code: <button class="pos-top-right" onClick="close()" Test your website with just a keyboard to ensure you
aria-label="Close">x</button> . can activate each clickable element. If not, opt for
By default, the only HTML elements in the tab more natively actionable controls, or use onKeyDown
order whose click events work natively via keyboard events and ARIA to roll your own widgets that have
are buttons, inputs and anchors with href s, so favour full keyboard-mouse parity.

Cordelia (@cordeliadillon) is a web developer and designer

PROFILE

based in San Francisco. Her aim is to make the web more

accessible for everyone (www.cordeliadillon.com)

114 may 2016

SAN FRANCISCO 15 JULY 2016

Learn all about SVG animations, the Internet of Things,

MIKE MONTEIRO SARAH DRASNER PETER SMART LYZA DANGER GARDNER

CO-FOUNDER, MULE SENIOR UX ENGINEER EXPERIENCE DESIGN LEADER CO-FOUNDER, CLOUD FOUR
www.mikemonteiro.com www.trulia.com www.petesmart.co.uk www.lyza.com

TICKETS ON SALE NOW

 PROJECTS
Create a set of
micro-animations
Collaborate better
with Zeplin
Tame style sheets
9001

with CSS linting

Make your SVG
icons accessible
Site performance
advice from the BBC
15 tips for cross-
device optimisation
9000