ANGULAR 4.0.

0 FOUNDATION SVG POLYGONS CSS OPTIMISED

Everything you need to know Build a card-based UI to How to create eye-catching Minimise your CSS code
about the latest update enhance aesthetics & usability animated vector images and save precious space

Feature

DESIGN FOR
The voice of web design

OFFLINE Create the perfect UX

even when there’s
Issue 293 : June 2017 : net.creativebloq.com no network

ISSUE 293
 Welcome

Welcome

editor’s note
Tired of designing the same layouts over
and over again? We feel your pain. The web
is littered with sites that look and feel identical,
leveraging the same templates and grid systems. It’s
important to take note of the latest trends, tools and
techniques you should be using right now in order for
your work to stand out from the crowd.
Our cover feature this month, from Adobe’s Aga
Naplocha, will show you how to make magic with
CSS. She will show you how to boost your creativity
with a brilliant guide to the top CSS properties. By
drawing inspiration from fields and areas that go
beyond traditional digital design, we can break old
habits and create truly bespoke sites and apps.
Our second feature this issue takes a look at
designing for offline. Without question, offline use
is currently a fundamentally flawed user experience.
Steven Trevathan explains why Alex Feyerke’s
Offline First concept is so important and why every
app designer should implement it right now. It’s a
feature that really got us thinking, and one we’d be
very interested in hearing your thoughts on.
Our Projects section is headed by an Angular 4.0.0
masterclass, and backed up with essential reading
on card-based layouts, a new way to streamline CSS
code and a look at how the human brain perceives
your website’s performance.
Enjoy the issue!

Featured authors
agnieszk a steven Juri nataliya
naplocha trevathan strumpFlohner sayenko

In this month’s cover feature, UI &
UX designer Aga shows you how to
make magic with CSS. Head over to
page 68 to discover how to make
your designs stand out
w: aganaplocha.com
t: @aganaplocha
Designing for offline isn’t always
a priority for us designers. You’ll
think differently when you read
Steven’s thought-provoking feature
over on page 76
w: stevetrevathan.com
t: @strevat
Angular version 4 is upon us
already, and Juri is on hand to
talk us through every new
feature over on page 84 – it’s
an unmissable guide
w: juristr.com
t: @juristr
Let Nataliya show you how to
animate SVG polygons for some
eye-catching results. Her tutorial
on page 108 is guaranteed to get
your creative juices flowing
w: www.nataliyasayenko.com
t: @NSayenko1

june 2017 3
 Future PLC, Richmond House, 33 Richmond Hill, Bournemouth, BH2 6EZ +44 (0)1202 586200
@netmag /netmag flickr.com/photos/netmag netmag@futurenet.com net.creativebloq.com medium.com/net-magazine

editorial
editor Philip Morris philip.morris@futurenet.com
Senior art editor Will Shum will.shum@futurenet.com
Production editor Callie Green callie.green@futurenet.com

editorial ContributionS
John Allsopp, Kevin Ball, Leo Barnes, Tanya Combrinck, Dan Cork, Fluerie Forbes-Martin, Sergei Golubev, Michael Hollauf, Steve Jenkins, Jan Jongboom,
Sam Kapila, Remy Luisant, Tom May, Jim McCauley, Denys Mishunov, Carrie Mok, Christopher Murphy, Agnieszka Naplocha, Irene Pereyra, Shane Prendergast,
James Reece, Nataliya Sayenko, Adam Silver, Juri Strumpflohner, Steven Trevathan

art ContributionS
Marcus Faint, Harriet Knight, Ben Mounsey, Steve Mumby, Laurie Newman, Newton Ribeiro de Oliveira

management
Creative director: magazines Aaron Asadi aaron.asadi@futurenet.com, art & design director Ross Andrews ross.andrews@futurenet.com,
editor-in-chief: creative & design Amy Hennessey amy.hennessey@futurenet.com

Creative bloq
editor Craig Stewart craig.stewart@futurenet.com, associate editor Kerrie Hughes kerrie.hughes@futurenet.com,
operations editor Ruth Hamilton ruth.hamilton@futurenet.com, Staff writer Dominic Carter dominic.carter@futurenet.com

CommerCial Commercial sales director Clare Dove clare.dove@futurenet.com, advertising manager Michael Pyatt michael.pyatt@futurenet.com,
Head of strategic partnerships Clare Jonik clare.jonik@futurenet.com, Head of subscriptions Sharon Todd sharon.todd@futurenet.com
CirCulation trade marketing manager Juliette Winyard juliette.winyard@futurenet.com
ProduCtion Production controller Nola Cokely nola.cokely@futurenet.com
Head of production uK and uS Mark Constance mark.constance@futurenet.com
liCenSing Senior licensing and syndication manager Matt Ellis matt.ellis@futurenet.com

neXt iSSue on Sale 18 maY 2017

all contents copyright © 2017 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.

Future is an award-winning international media

group and leading digital business. We reach
more than 49 million international consumers a
month and create world-class content and
advertising solutions for passionate consumers
online, on tablet & smartphone and in print.
We are committed to only using magazine
Future plc is a public Chief executive Zillah Byng-Thorne paper which is derived from well managed,
company quoted Non-executive chairman Peter Allen certified forestry and chlorine-free
on the London Chief financial officer Penny Ladkin-Brand manufacture. Future Publishing and its paper
Stock Exchange suppliers have been independently certified in
(symbol: FUTR). Tel +44 (0)207 042 4000 (London) accordance with the rules of the FSC (Forest
www.futureplc.com Tel +44 (0)1225 442 244 (Bath) Stewardship Council).

Colophon
APPS uSED PAPER TyPEfACES
google docs, Photoshop, dropbox, COVER PaceSetter gloss 250gsm antonio, Share tech,
Paper, FutureSource, illustrator, P3-82 ultramag Plus gloss 90gsm merriweather,
indesign, CodePen, adobe Sketch P83-114 grapholvent 70gsm titillium Web

4 june 2017
contents
Issue 293 : June 2017 : net.creativebloq.com

FeeD FEED

SIDE PROJECT OF THE MONTH 14

WORKSPACE 16
protopaper Kit is Sergei Golubev’s new Fleurie Forbes-Martin gives us an inside look at Salad Creative’s new
design collaboration project seaside offices on the sunny south coast

CLIENTS FROM HELL 15

The latest in our series of nightmare clients

BEYOND PIXELS 18
Shane Prendergast on his Ironman training

NEED LIST 19
design goodies we want this month

EVENT REPORT 21
Leo Barnes reports from uX Camp Brighton

voices
PRODUCT USABILITY 24
Michael Hollauf discusses the Snapchat-
Microsoft continuum

MAKING THE IOT A REALITY 26

Jan Jongboom explores the development
challenges driven by the Internet of Things VOICES

STORY 35
INTERVIEW 30
Christopher Murphy explains why you We talk to Jonathan
should build an audience before you launch Stark about his
wide-ranging career,
Q&A 37 mobile strategy and why
Derek Featherstone on the biggest website he thinks you should never
accessibility misconceptions bill by the hour. Ever.

BIG QUESTION 38
We asked a panel of experts: What have

sUBscRiBe to net
you learned in the last year? TaKE advanTagE of ThE
prInT and dIgITal BundlE
COLLABORATIVE UX 40 Turn to page 22 to find out more about
James Reece discusses the merits of cross- and SavE up To 47% the savings on offer for subscribers
disciplinary teams and creating better uXs

6 june 2017
 Contents

rEgular RegUlaRs
GALLERY 44
NETWORK 8
Irene Pereyra runs The latest mail, tweets, posts and rants
down her favourite new
sites, including a typographic EXCHANGE 10
homage to parenting from Dan Perrera and Mike Brondbjerg share
Studio lovelock their advice with readers

showcase
DESIGN CHALLENGE 52
designers mock up music-making sites

FOCUS ON 57
Sam Kapila introduces CSS grid resources

PROFILE 58
hillary Clinton’s web guru Mina Markham

HOW WE BUILT 64
This Page and Energize’s The goldfinch

PRoJects
FOUNDATION 92
Kevin Ball walks you through foundation’s

FeatURes
new cards component

HEAD-TO-HEAD 97
Dan Cork rates Ionic 2 and react native
MAKE MAGIC DESIGN
WITH CSS 68 FOR OFFLINE 76 WEB PERFORMANCE 98
Aga Naplocha on the new trends, Steven Trevathan tells you why you Denys Mishunov explores how the brain
tools & techniques you need to use should create great offline uX too perceives web performance

WEB STANDARDS 103

John Allsopp on the end and the beginning
of genuinely personal tech

PrOjECt CSS 104

ANGULAR 4.0.0 Remy Luisant gives you a rundown on his
MASTERCLASS 84 new program for reducing CSS files
Juri Strumpflohner walks
you through every new feature SVG 108
in angular version 4 Nataliya Sayenko shows you how to
create and animate Svg polygons

ACCESSIBILITY 114
Adam Silver on designing for users with
visual impairments

june 2017 7

contact us @netmag
Behind the COVeR
We had the ‘Make magic with
CSS’ coverline early on in the
cover-making process, so it
was an obvious choice to base
the design around ‘magic’.
Our designer, Will, started
with a moodboard of images,
and a clear vintage 1920s
theme quickly emerged. Old
magician posters were our
early favourites, so Will went
about recreating one.
Using Adobe Sketch on
the 12.9-inch iPad Pro and
sketching with an Apple
Pencil, the first designs
revolved around a magician’s
face. This was the focus of
the cover for weeks, while
Will worked on choosing
an appropriate font. Once
this was selected, Will was
able to create the InDesign
document. Initially we
struggled to ensure that the
8 june 2017
/netmag netmag@futurenet.com
main coverline had enough
impact. The magician’s face,
which you can see below, was
too distracting. In truth he
looked a bit sinister really. We
agreed that we should lose
his face, and that the chosen
typography and design
flourishes would ensure
that the ‘magical’ theme
remained. We lost the face but
kept the hands, moved the
coverline up to make it more
prominent and improve its
readability, and then focused
on the choosing the right
colour scheme.
Initially there was a
multicoloured option, but
it was again proving too
distracting. Sometimes less
really is more with design,
and we made the decision to
use a greyscale background.
net.creativebloq.com
We felt this really suited
the topic and helped the
coverlines pop more.
Choosing the finishing colour
of the text, top strap and
spine took plenty of thought.
There wasn’t a combination
that we didn’t try. We nearly
went for a moss green (there
was also a slimey green one
inspired by an old Absinthe
poster) but eventually, after
much discussion, we decided
that red would grab the eye
better. We hope you agree!
Philip Morris,
Bournemouth, UK
WeB deSiGn
MYthS BUSted
net: This Creative Bloq
post (netm.ag/myths-293),
originally from net #284,
Mail, tweets,
posts and rants
medium.com/net-magazine
asked you to challenge your
assumptions, break out
of old habits and discover
what’s newly possible with
layout on the web. CSS Grid
is now compatible with the
majority of web browsers,
and it is being heralded
as the most important
breakthrough in web design
for years. Not everyone is
overly enamoured though.
Here’s what one Twitter user
had to passionately say.
I welcome CSS Grids, but the
web isn’t a sub-medium of
print, so I will never advocate
designs slavishly copying
magazine layouts.
@ShirtlessKirk
We enJOY A
Bit Of PR AiSe
The UX and Interactivity
depts for the @MLB’s mobile
app need to pick up an issue
or two of @netmag
@nervousjuice
net: Thanks @nervousjuice.
It’s fair to say we agree
with you on this. We’ll let
them know about our latest
subscription offer and see if
they’re interested. Failing
that, maybe send them a
copy of issue 291 (get it here:
netm.ag/buy-issue–291) for
the six trends changing the
face of user experience.
 Network

THE POLL
cool stuff
Where do you go to learn a neW We learned

Web design or coding skill?

this month
The briCkS we LAy
Ethan Marcotte
has unpacked a
lie designers often tell
Tuts+ General themselves: that design is
5.36% Assembly somehow distinct from the
1.79% world it sits in. He reminds
us that, “individual design
decisions beget collective
A book consequences,” and invites
Treehouse 5.36% us to consider the impact,
12.50% and potential harm, each of
our decisions could have.
ethanmarcotte.com/wrote/
the-bricks-we-lay
Something else Lynda.com
12.50% 7.14% beTTer Grid SySTemS in
Ui deSiGn TooLS
Author Ryan Lucas
explores the history
Google search Codecademy of grid systems and their
46.43% 8.93% suitability for responsive
design situations. He
argues that we need
better tools for designers
to work with grids
visually as opposed to

From our timeline new tab (so users won’t “leave

the site”)
using code, as layout
decisions shouldn’t be
What’s the number one thing you wish @DavidSkorepa left to developers.
netm.ag/gridsystems-293
clients would stop asking for? Carbon copies of their
main competitor’s site PrACTiCAL CoLoUr
“Make it pop.” Classic hhhhhhhhhhhhhhhhhhhhhhhhhh @ch12i5 Theory for CoderS
@EscoTony hhhhhhhhhhhhhhhhhhhhhhhhhh This guide to applying
hhhhhhhhhhh Obscure alterations proper colour theory
@McKay_1988 based on their own, to your websites is written
“Make the design single personal by Natalya Shelburne, who
‘pop’ more” A news section which preference, likes/dislikes, is both a classically trained
@amportfolio they’ll “definitely which don’t fall in line with fine artist and a frontend
update” but will target audience developer. She takes you
“Make it pop!” inevitably lie empty for the rest @Octavector through the process of
@OllieBrkr of time selecting and coding a
@fraserboag Free onsite complementary colour
workshopping, travel, scheme that will make
Make the logo bigger!!! Rotating homepage and strategic insights your site look great.
Ahhhhhhhhhhhhhhhhhh carousels and/or while planning a project tallys.github.io/color-theory
hhhhhhhhhhhhhhhhhhh everything to open in a @mattecook

june 2017 9
 Practical
advice from
send your questions to netmag@futurenet.com industry experts

This monTh feaTuring... QUESTION OF THE MONTH

Dan Perrera What’s your ‘go-to’ font for web design? A fail
Dan is a designer,
developer and proprietor safe that does everything you need it to; the one
of Fore Design.
w: foredesign.co that just works?
t: @dperrera
Dan Hicks, Hertfordshire, UK
Mike BronDBjerg
Mike is a partner at Kultur
Design working on
information design.
w: www.kultur.design
t: @mikebrondbjerg

Fail-safe fonts When used right you still can’t beat Helvetica and Georgia
when it comes to working with web fonts

DP: It might sound boring, but I gravitate towards Helvetica and Georgia, which are
still very beautiful options when treated with sensitivity. These two are classic
typefaces that perform well on screen and have the advantage of being highly
available, web-safe fonts.
When I’m looking for a face that has a bit more personality but is just as versatile, I
tend to choose Montserrat (available through Google Fonts), which has been a
workhorse and personal favourite for a while now. It’s a well-designed geometric sans
that works nicely at both large and small sizes, tracked out or tightened up, all-caps or
sentence case, ultra-light or extra-bold.

Web design visualisation? do you use sVg a lot?

Data visualisation Aga Naplocha, Warsaw, Poland
Which Javascript libraries do you MB: The king of libraries is D3.js (d3js.
recommend to start with for data org), and is most likely what you’ll

10 june 2017

out of the box Check out Highcharts for a great place to find chart templates that support older browsers
use eventually, but it can have a steep
learning curve. It renders as SVG, which
is great for display on high-res and
retina screens. That SVG vector output
can then be extracted and used in print
or other applications. Alternatively,
P5.js (p5js.org), based on Processing, is
a great drawing and animation library
that’s versatile and very simple. Finally,
Highcharts (www.highcharts.com) has
many chart templates you can use out of
the box, is responsive and falls back well
to support older browsers.
TYPe
siMple solution
do you think variable fonts are an over-
engineering of a small problem?
Jamie, London, UK
Dp: Absolutely not! Today, designers
are forced to make compromises
that balance the use of web fonts and
performance. Let’s say you want to use
regular, italic, bold and bold italic for
two fonts. You’d be forcing the user to
download around 1MB in font files and
make four network requests, which
negatively affects performance and
thus user experience. Variable fonts are
an impressive technical leap forward.
A variable font bundles all weights and
variations of a font into a single file,
while promising reduced file size and
allowing the typographer to customise
the typeface for different displays. That
makes for a better reading experience,
fewer design compromises and better
performance. Hard to argue with that.
Q&As
3 simple steps
What datasets or APIs do
you favour for your dataviz
projects, and why?
Martin Hollywood, London, UK
MV: I prefer data that has more dynamic
characteristics, which creates more
interesting and expressive visualisations.
Arduino Pulse sensor dAtA
In one project, I hooked up
volunteers to an Arduino Pulse
Sensor (pulsesensor.com) and visualised
Web design their pulse waveforms. They really
trenD forecast engaged with the visualisation when they
What, in your opinion, are the future could feel their own pulse directly changing
trends in data visualisation, and why? the output.
Living Data Lab, Brighton, UK
MB: From a data science point of view,
machine learning and cloud platforms
are going to have a big influence. But
at the other end of the spectrum,
projects like Dear Data (www.dear-data.
com/theproject) are also showing the
beauty, self-awareness and ownership
in recording and visualising small, Audio dAtA
personally interesting data. Finally, Last year I used audio data to turn
people are starting to explore the use of the Reasons To conference logo into
VR in visualising spatial and network a three-minute animated visualisation.
data. It remains to be seen if this will be Audio data is great to work with creatively,
insightful, or just floating 3D pie charts. as it contains really dynamic fluctuations in
value that can create nice visual variation.
TYPe
sans coMeDy
Why is Comic sans so frowned upon? it
makes me laugh every time.
Simon Bibby, London, UK
Dp: Laughing every time you see it
might be part of the problem. Type is
the most powerful tool in a designer’s
toolbox, so it stings when we see it
used inappropriately. Imagine a bank’s
website in Comic Sans – it’d be hard to
take them seriously. The problem traces
back to the dawn of desktop publishing. Air Pollution dAtA
Since computers made design decisions I really enjoyed creating a
like changing fonts incredibly easy, non- visualisation of the rise and fall of
designers misused the power. As Comic NO2 levels in London using King’s College
Sans was in Windows 95, it became one London’s air pollution data (www.londonair.
of the first widely misused and most org.uk/LondonAir/API).
maligned typefaces in the world.
june 2017 11
 New york 27-28 April 2017

14 talks, 4 workshops, 2 amazing days: learn about practical

frontend solutions, design systems, the future of the web & more!

sara soueidaN JeN simmoNs peter smart catt small

FreelaNce FroNteNd desigN Head oF uX aNd product product desigNer,
web developer advocate strategy, FaNtasy etsy
www.sarasoueidan.com www.mozilla.org www.petesmart.co.uk www.cattsmall.com

tickets oN sale Now

www.generateconf.com
 People, projects
& paraphernalia

This monTh FeaTuring...

Side PROJeCT OF THe MONTH 14 CLieNTS FROM HeLL 15 WORkSPaCe 16

Inside Sergei Golubev’s new design How a string of inappropriate comments Fleurie Forbes-Martin takes us on a tour
collaboration project ProtoPaper Kit nearly ended up in a court of law of Salad Creative’s stunning seaside office

BeyONd PiXeLS 18 Need LiST 19 eveNT RePORT 21

Shane Prendergast is a web developer by The stuff we want this month, from the Leo Barnes tells us why UX Camp Brighton
day, Ironman competitor at all other times newest books to the latest software is like no other web developer conference

june 2017 13
FEED
Side project
ProToPaPer KiT
Sergei Golubev guides us through his new
visual design collaboration project
Side project of the month
net: Tell us what ProtoPaper Kit is…
SG: ProtoPaper Kit is a paper prototyping kit for
designers to collaborate with stakeholders at design
workshops. A set contains over 120 elements cut out
of a high-quality cardboard: from buttons, icons and
checkboxes to fields, panels and popovers. It helps to
Info quickly mock up an app or website design without any
job: Pixel-perfect UX special tools or skills needed. I’m currently finalising
designer, entrepreneur the kit and also working on the magnetic version
and foodie. founder of that’ll be ready to order at protopaperkit.com.
The School of UX and The
UX Conference in London.
net: What inspired this project?
w: aperfectpixel.co.uk
SG: I often see dozens of people gathering around one
t: @sgolubev designer’s screen during ideation stage suggesting
their ideas and asking that designer to tweak their
design mockups. That doesn’t seem very collaborative
to me. Why not give opportunity to everyone and
design high-level concepts together! While business
stakeholders might not necessarily have Photoshop
skills, they are very keen to express their vision. And
the best way to do that is by visualising it – using
paper prototype.
net: Who is the project aimed at, and why will it
help them?
SG: ProtoPaper Kit gives everyone a way to jump in to
the design process and be creative without being
14 june 2017
constrained by not knowing how to use graphics
software. Every idea matters. I want to enable
everyone to contribute during design workshops,
instead of only a designer being a medium to execute
ideas on the computer. Moreover, good ol’ paper never
runs out of battery.
net: What techniques did you use to create
ProtoPaper Kit?
SG: I usually go for what’s called ‘fake it before you
make it’ approach: prototype early, test as soon as
possible to get initial feedback, and keep working on
the product. Rather than spending huge amounts at
print shops and being limited in time, I bought my
own equipment to work with cardboard so as not to
depend on third parties and being able to prototype as
many times as needed, showing my progress and
testing with my colleagues quicker. It’s all in the
details, while keeping it “Simples!” as my namesake
Sergei from the meerkat TV ad says.
net: What’s the biggest challenge you’ve faced, and
how did you overcome it?
SG: I’m quite new to printing. It’s been a steep
learning curve, especially understanding so many
limitations of printers and cutters. Digital is way
easier. With hundreds of elements in the kit, that’s a
lot of tweaking. Having my own equipment to create
first prototypes allowed me to learn at my own pace.
net: What do you do in your day job?
SG: I’m currently consulting British Gas on User
Experience design. As well as running School of UX
and organising The UX Conference for designers and
developers to understand each other better.

inappropriate comments
Exclusively for net: The latest in a series of anonymous
accounts of nightmare clients
Clients from hell
I was hired by an engineering company
who designed eco-friendly propellers to
do their marketing stationary for an expo in
Amsterdam. We discussed price, they signed off
and I started the work. As the clients had a hectic
schedule, we communicated only via email.
I’d just sent over the first drafts when I got
this message:
Client: The designs are horrible!
Me: Oh? The design is exactly what you asked
for. What’s the problem?
Client: The image quality is horrible. I’m not
paying for this. I thought you were a designer!
Me: Oh okay, I get it. The files are low-DPI
roughs to give a sense of the design, not final
products. The files are too big to include in an
email. We can share via Dropbox if you prefer.
Client: (Totally ignoring me) Even the social
media icons are blurry! Get better quality icons!
At this point, I figured it would make sense to
call to make sure we were on the same page.
Me: Hi, which icons are pixelating?
Client: All of them! When I zoom in on the
business card you can see the edges are not
smooth. Fix it!
That’s not the worst of it. Because he was so
insistent that I was screwing him over with “bad
quality work”, I agreed to work in their office for
three weeks so he could inspect the files. He
insisted on zooming in on every image to make
sure there weren’t any pixels.
That’s still not the worst of it.
He kept hitting on me and once ‘joked’ that my
chest was distracting him. Not great, right? Well,
one day I had to work on his computer and while
Alt-Tabbing through screens I accidentally saw
an open window. It was a correspondence from a
woman he’d been seeing on the side. He was
married. What’s more, he texted me later that
day and asked if I would go to dinner with him.
The next day, I dropped off all the designs and
my invoice, and walked out while he complained
that I was being “totally unprofessional”.
I got paid a month later. His personal assistant
knew what happened and convinced him he
stood to lose more if it went to court.
clientsfromhell.net
Feed
how to
deal with slow
paying clients
Chasing up people who are late
with paying their invoices is one of
the least enjoyable parts of
running your own business. We
asked the @netmag Twitter
followers for their top tips and
strategies for getting paid on time.
Plan ahead
“A good contract protects you AND
your clients,” says @agervs. “I
create a clear, structured plan
emphasizing payment times/
conditions with my clients, give
them a copy and refer to it
regularly.” If you know someone is
likely to be a problem, you can act
to mitigate that. “Repeat offenders
have to pay in advance before start
of project if it’s a flat fee, weekly
payments if I’m charging hourly,”
says @manonatelier.
Go in Gently
In the first instance,
@simonminter recommends “a
combination of sarcasm, wit,
charm and pleading”, but if that
fails you can use your control of
their website as leverage. “In the
extreme, we’ll stop work or even
put services on hold. But we never
let it get to that stage!” says
@Web_Wise_Dan.
Get leGal
The last resort is to turn to the
legal system. @scatteredbrainV’s
threshold for calling her lawyer is
three reminders, while @savvo
says the small claims court has
never failed him.
june 2017 15

salad
Fleurie Forbes-Martin gives us a tour of the neon lights and
handcrafted woodwork in salad’s studio by the seaside
wORkSPACE
Sometimes I think we can
take the beauty and fun of our
agency workspaces for granted. As
Salad’s marketing manager, I
frequently look inward and try to
best capture our essence in order to
demonstrate to clients what makes
us truly unique. I have no shame in
saying that the bright colours and
giant polystyrene Salad sign are
what first attracted me to work
here (sorry, that lives downstairs).
Although we’ve been in our
quay-side dwellings for over eight
years, we only expanded upstairs
into the beautiful rafters you see
here at the beginning of 2017. We
used it as a great opportunity to
invite old friends and colleagues
to chink glasses and celebrate the
16 june 2017
expansion with all of us at Salad –
it was a lovely evening!
[1] But the expansion was no
mean feat – our MD Bella was in
constant negotiations for nearly
two years to get the space. By the
time we moved in, everyone was
ecstatic to spread their wings.
There are so few spaces that have
the amount of charisma and charm
that our office has and we couldn’t
be closer to the water’s edge if we
tried – about ten paces!
[2] I’d say it has a lot to do with
the fresh sea air that a fair few of
us here are ‘earthy’ in one way or
another. As such, we invested in a
little Himalayan pink salt candle
to absorb particles and purify the
air. I don’t understand the exact
1
science of it but we’re all convinced
it does something good. It’s
become our good luck charm now,
expelling any ‘bad ions’ caused by
the many electrical devices.
[3] At the heart of our business
and culture is food. We’re all
foodies and we make the time to
put our tools down, come together
and eat at lunchtimes. I think this
time is critical to maintaining
healthy team communication. Our
‘banquet table’ (which also doubles
as our board table) was lovingly
handcrafted from recycled pallets
by a friend of Salad’s.
[4] And finally for our
entertainment – Fridays at Salad
are more popularly known as
Old Music Fridays. Once given a
relevant theme from the week’s top
stories, everyone submits an album
of choice and they battle it out all
day until a winner is voted for.
Fluerie (@FleurieFM) is chief of
PROFILE
noise and friend making at south
coast branding and web agency
Salad Creative (@saladcreative)
FEED
Beyond pixels
Stuff i like
ivana Mcconnell
UX designer
@IvanaMcConnell
ScReenheRo
This Slack screenshare
integration speeds up my
workflow. Multiple people can
interact – by clicking and
typing – rather than relying
on one person presenting. For
remote teams, it makes pair
programming and problem-
solving easier.
slack.com/screenhero
teamtime.zone
Customer.io is distributed and
nomadic; we want to be
considerate when we
communicate, but time zones
are tricky to remember. So
one of our engineers, Alisdair,
built this app which displays
what time it is for everyone
on the team, in one place.
teamtime.zone
Reply all
I’m a podcast addict, and this
is one of my favourites.
Ostensibly a show about the
internet, Reply All is about
how we simultaneously build
and are shaped by technology
ourselves. As people who
build technology, we all need
reminders of its human
impacts every now and then.
gimletmedia.com/reply-all
18 june 2017
taking training up a gear
Shane Prendergast tells us how his triathlon training
is not too dissimilar from web development
bEyOnd PIxELs
Last September I cycled 3,200 miles from
San Francisco to New York, raising over
£13,000 for charity (rideforthechild.co.uk). It was
an incredible experience but afterwards I said to
myself that I wouldn’t do anything like this again,
A month later I found myself itching to get back
into training, strange, I know. I wanted a new
challenge as without exercise I felt quite lazy, had
less energy and ultimately I was becoming a little
bored. Throughout my cycle training I met many
athletes and the ones I admired the most were
triathletes, specifically full Ironman ones who
were in a club that consisted of less than 0.01 per
cent of the world’s population.
A full distance triathlon is a race that consists
of a 2.4-mile swim, 112-mile cycle and a 26.2-
mile run, all of which must be completed in under
17 hours. These challenges are hard enough
individually but completing one after another is
another level. I opted to enter The Lakesman
Triathlon (thelakesman.com) which is held in
Keswick, a town in the UK’s Lake District.
Being new to triathlon, I went out and got
myself a trainer who gave me a schedule which I
follow religiously. A typical week consists of 15 to
20 hours of training with one rest day a week
(unlike the training, the 5am starts don’t get any
easier!). Some sessions are short and intense,
others are longer and more endurance based.
Training to be a triathlete shares some
characteristics to web development in the
respect that you have a range of disciplines that
you need to learn and improve upon. Not doing so
is sure to cause you problems in the long run,
especially with a challenge of this size.
My main objective is to simply complete the
event in less than the 17-hour deadline. That said,
I do believe I’m capable of a sub-13 hour, if
everything goes to plan. I am dreading the
marathon as it’s my worst discipline, I feel I will
excel on the bike but I need to not to go too hard.
Throughout my training I’ve been in places I
never knew existed, both mentally and physically.
Training has opened up a new world and I have
been impressed at how my mind and body has
adapted. For me it’s not about being the fastest
or the fittest, but enjoying the experiences that
are enhancing my life.
Shane (@webknit) is a web
developer who is currently
PROFILE
working for Stein IAS, a global
B2B marketing agency
 Need list

Need list

Stuff We Want
Small objects of design wonder: from another browser update to an
exciting new website from Google, there’s plenty to soak up this month

1 2 3

ViVALDi brOwser FREE OpensOurce.gOOgLe.cOm FREE Directus FREE

4 5 6

prActicAL Design DiscOVerY $21 AutO LAYOut FOr sKetcH FREE tHe nAcHOs ui Kit FREE

What we think
(1) The Vivaldi browser’s new History feature means users can conduct a fully fledged analysis of their browsing patterns, all supported by
stats and a visually friendly interface (vivaldi.com). (2) Google has launched an all-new website (opensource.google.com) dedicated to showcasing
all of its open-source projects in one handy URL. (3) Directus (getdirectus.com) is an API-driven content management framework for custom
databases. (4) Unite your team towards a common goal with Dan Brown’s Practical Design Discovery (netm.ag/abookapart-293).
(5) This Sketch plugin allows designers to define and view a project on different screen sizes, not just the latest iPhone (netm.ag/sketch-293).
(6) The Nachos UI Kit for React Native (netm.ag/nachos-293) lets you pick from pre-coded UI components ready for your next app.

june 2017 19
 next
month

TYPoGRaPHY
In 2017
everything you need to know about
designing with web fonts in the coming year

PlUS
Why you should Essential advice Marcy Sutton
be using a Service on becoming a interview, Waaark
Design approach great public speaker profile & more

ISSUE 294 on SalE 18 MaY

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
LEEDS DIGITAL
FESTIVAL 2017
Date: 22-29 April 2017
Location: Leeds, UK
Highlights for 2017 include
the return of favourites from
last year, such as the FinTech
North and Northern UX
conferences, as well as coding
competition Code in the Dark.
leedsdigitalfestival.org

GENERATE
NEW YORK 2017
Date: 27-28 April 2017
Location: New York, US

UX CAMP BRIGHTON
Guaranteed to be packed with
insight, inspiration and practical
take-aways, Generate is back
again with an extra day of high-
quality workshops.
Leo Barnes reports from the popular unconference
www.generateconf.com
with a friendly festival atmosphere
SPRING I/O 2017
EvEnt rEport Date: 18-19 May 2017
Location: Barcelona, Spain
Date: 25 MARCH intelligent, well thought out questions at the end of The leading European conference
Location: BRIGHTON, UK your 20-minute session. focused on the Spring Framework
URL: www.UXCAMpBRIGHTON.ORG i couldn’t possibly cover everything i learned (or ecosystem is back for its
describe how amazing the lunch was). the diversity sixth edition featuring 40
on Saturday 25 March 2017, i returned to UX of speakers, with people from as far as Poland and sessions and workshops.
camp Brighton (@uxcampbrighton). i say italy, and the range of topics covered makes 2017.springio.net
returned because i attended and spoke the previous selecting sessions to attend a hard choice. Much like
year and now have the ‘UX camp bug’. a good festival, you miss as much as you see. ANGuLAR CRuISE
Founded by Patrick Sansom in 2011, this annual the whole day was topped off with pizza, beer Date: 29 May - 2 June 2017
event labels itself as an ‘unconference’. the idea is to and tim Minor’s legendary UX quiz. this year it Location: Miami, US
bring people interested in UX and related digital included a round where teams had to build a piece of The first Angular cruise
disciplines together with no headliners and no wearable tech from a bag of provided household conference, travelling onboard
product pitches, just a focus on the attendees junk and pitch it to the room. to say it was surreal is from Miami to Bahamas! A must
sharing, socialising and swapping stories. an understatement. i attend a few meetups and for all exotic Angular fans.
this year there were 45 sessions, which all took conferences throughout the year but UX camp ngcruise.com
place in five different rooms throughout the day. i Brighton fulfils my desire to meet intelligent people,
had elected to give a talk about my role as a talk about innovative concepts and create things out PIxEL PIONEERS
crossbreed of a business analyst and User of items that belong in the recycling bin. Date: 22 June 2017
experience designer. Location: Bristol, UK
one of the many things that i enjoy about this net’s erstwhile editor Oliver
Leo Barnes (@productoven) is a
event is how welcoming it is. talking at UX camp Lindberg has launched his own
proFILE

senior digital product consultant

Brighton is like giving a speech at a wedding – at technical consultancy conference, bringing a concise
nobody in the audience wants you to fail. everyone is Amido (@weareamido), which one-day package at a fair price.
fully engaged and you always get a series of specialises in cloud-first solutions pixelpioneers.co

june 2017 21
TRY 5
ISSUES
FOR £5 SAVE
UP TO

83%
Never miss an issue
13 issues a year and you’ll be sure
to get every one

Delivered to your home

Free delivery of every issue, direct
to your doorstep

Get the biggest savings

Get your favourite magazine for
less by ordering direct

Simply visit www.myfavouritemagazines.co.uk/springdesign

Hotline 0344 848 2852

 Choose from our
best-selling magazines
SAVE SAVE SAVE
83% 86% 86%

Computer Arts Digital Camera NPhoto

SAVE SAVE SAVE

80% 83% 83%

Paint & Draw 3D World ImagineFX

See our entire range online OFFer

enDS
www.myfavouritemagazines.co.uk/springdesign 31 MAY
*Terms and conditions: Savings compared to buying 13 full priced issues from the UK newsstand. The trial offer is for new UK print subscribers paying by Direct Debit
only. You will receive 13 issues in a year. Full details of the Direct Debit guarantee are available upon request. If you are dissatisfied in any way you can write to us or call 2017
us 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. Offer ends 31/05/2017

Opinions, thoughts & advice
eSSAY
Jan Jongboom explores the mounting
challenge facing web developers driven
by the Internet of Things in 2017
InTeRvIew
We talk to consultant, speaker and author
Jonathan Stark about why he thinks hourly
billing should be banished forever
STORY
In his new design of business column,
Christopher Murphy stresses the importance
of building an audience
UX
product
usability
Michael Hollauf discusses the Snapchat-
Microsoft design continuum and how it has
affected the usability of MindMeister
After ten years of running a SaaS
26 company, my co-founder and I decid-
ed it was time to do a usability test and see
how our customers were actually interact-
ing with our product, MindMeister. What
followed forced us to give some considera-
tion to our design philosophy. I think all
designers encounter this, consciously or
not, at one point or another.
Part of the usability test involved eye-
tracking software that allowed us to see
what parts of the interface people were
looking at. Despite all of the innovations
on interface design and UX that we’ve
seen over the last few years, it quickly
30 became apparent that when people get
stuck in software, they invariably look up.
As in: they are checking the place where
Microsoft Word or Outlook typically have
a big multi-tab collection of text elements,
icons and random drop-down menus, also
known as ‘The Ribbon’.
In terms of design, The Ribbon is a
horror, of course, but one thing is clear:
Microsoft has conditioned generations of
software users to expect tools and interac-
tive elements to be at the top of the inter-
face (not to mention that most millennials
know a floppy disk icon means save despite
35 never having seen one).
Which forces every designer to make a
choice about where they want to position
themselves: on the Snapchat end of the
 Opinion

continuum, where users are supposed to

figure things out and try to remember the
secret combos that unlock certain pages
and functionalities – or on the Microsoft
end of things.
In the more scientific terms of Don
Norman’s classic The Design of Everyday
Things, this is the battle between affor-
dances (all the useful things that a product
can do for a user) and the signifier (the
interface elements that inform the user
where they can push, pull, click or dial).
We’ve all had at least one painful experi-
ence with this battle: you try to open a door
not knowing it’s actually a sliding door, for
instance, and you end up smashing your
face right into it. Most of the time this will
be in front of a lot of people – important
people. This happens, explains Norman,
because the door lacked affordances and
signifiers. Uncoincidentally, this infa-
mously frustrating door is known as the
Norman door (Vox did a great job summing
up our universal irritation with the thing).
Another example of an affordance is that
of the light of a lamp. In this scenario,
the light switch is the signifier. Industrial
designers have decades of experience frus- We’ll have other frontiers to confront in
trating users by hiding signifiers because
they find minimalism more beautiful. the future: new interfaces such as virtual
The result is that you can’t find the light
switch (hidden in the wallpaper), can’t reality will again change how users
open the kitchen cabinet (you have to push
the edge, not pull) or you can’t get water interact and thus how we design
from the tap (you have to wave at the tap in
exactly the right spot). cated crowd alone? Then by all means, go sions – we dedicate 98 per cent of the UI to
In software, we’re evolving in the the Snapchat route. the creator’s own content.
same direction. Quora user Ivan Boyko After the usability tests, we moved a Fundamentally, we decided that we
recently made a good case about the arrival few tools and buttons around, because it would pursue a middle ground, helping
of flat design and how it ruined the acces- became clear that users couldn’t locate users as much as we can to understand the
sibility of the web. them quickly enough. We’re also debating tools and functionalities, but erring on the
Yes, flat design is prettier, but it also the status of our footer toolbar, which was side of innovation and minimalism. We’re
leaves less room for signifiers like the bev- neglected by the majority of test subjects. convinced that software design is better off
elled pseudo glass edge that showed you Should we keep the footer or let it go? For following the lead of bold companies like
which buttons were clickable in iOS. The now, it’s still there. Snapchat or Apple. Ditching the headphone
consequence is that today, you have to just I know we’ll have other frontiers to con- jack will be uncomfortable for a while.
know which buttons in iOS are clickable front in the future: new interfaces such But it will be replaced by something sim-
and which ones aren’t. as virtual reality will again change how pler and leaner, forcing companies that
If you’re designing software today, you users interact and thus how we design. profit off of Apple’s unstoppable success to
need an opinion about where you want to Ultimately, though, I think minimalism follow suit.
be. If you want the Microsoft Office users will reign supreme.
to feel comfortable, you’ll need to include We develop our UI with a 98 per cent Michael Hollauf is the co-founder of MindMeister,
PROFILE

plenty of signifiers. Or do you think your rule in mind. We never want to clog up the a mindmapping tool for team brainstorms, and
product can survive on the hip, sophisti- interface with our buttons and other intru- MeisterTask, a task management tool

june 2017 25
VOICES Essay

26 june 2017

culture
Making THE inTERnET
OF THingS a REaliTy Illustration by Ben Mounsey
Jan Jongboom explores development challenges driven by the
IoT and how these can be addressed in 2017
As developers, we’ve always understood the
potential for the Internet of Things market and its
ability to impact our everyday lives. However, while
recent headline technology shows such as the
Consumer Electronics Show and Mobile World Congress
have highlighted exciting new IoT concepts, there’s still
much that needs to be done in terms of addressing the
security and data integration challenges to bring prod-
ucts to scale and maturity.
Lately we seem to hear more about painful IoT project
failures – due, in part, to security issues – than we do
about IoT successes. The smart home may be one of the
biggest IoT markets but the elements that make up the
market remain in their infancy. Even some of the biggest
successes in this market so far – take the connected light
bulb for instance – remain standalone products in con-
strained environments, perhaps more ‘remote control’
than IoT in its truest sense.
Now, when consumer IoT products do arrive to market,
they still do not ensure that robust security measures
are baked in. If hacked, these products could in theory
put personal consumer data at risk. The burden of re-
sponsibility we, as developers, shoulder when building
secure connected consumer products, is great.
Yes, we are encouraged by the rising wave of digital
assistants such as Amazon Echo, which seem to have
Essay
overcome the security and adoption obstacles – for the
moment at least. But, for the most part, we remain
cautiously optimistic with regards to further successful
IoT project rollouts.
As the numbers of connected devices grows from
hundreds of thousands to millions and then billions of
devices, security issues are compounded by the fact that
the attack surface increases. One bug in a single system
component can compromise all others and many of these
devices are connected to an entire IP stack, increasing
the chance of popular hacks such as denial of service
(DDOS) attacks.
Truthfully, there are many reasons for the current
dearth of security efforts. For many of us, the IoT was a
natural evolution – we had already been connecting
devices and integrating data. Building devices with a
radio on top of the RTOS to run custom protocols in order
to receive and communicate data may have been the
early order of the day – but these often left wireless
communications insecure and systems and devices
vulnerable to attack.
As we enter 2017, we have learnt from these past lessons
and will start to adopt ‘security-by-design’ techniques
– in other words, using a default system that secures
wireless communications by incorporating key
components such as a hardware root of trust, identity
june 2017 27
VOICES Essay
and key management and the ability to securely provide
updates to devices in the field.
No one has yet solved all of the security issues the
IoT world faces. And, much debate on this topic is yet
to come. There are, however, a number of best practic-
es that can be used when starting out:
• Hardware root of trust – Not all security problems
can be solved in the software (when looking at tamper
proofing devices), so adding features like ARM TrustZone
to processors in order to hardware-isolate trusted and
untrusted code will be key. This means that if a hacker
has access to the physical device and can access the RAM,
they will not be able to make all areas vulnerable.
• Identity and key management – By using hardware-
enforced compartments (sandboxes) a set of secure
component boxes for software applications can be used
to partition, isolate and shield sensitive parts of the
Not all security problems can be solved in the software, even
when looking at tamper proofing devices, so adding features
like ARM TrustZone to processors in order to hardware-isolate
trusted and untrusted code will be key
software stack and critical peripherals from most of the
codebase. Breaking the conventional flat security model
of microcontrollers into compartmentalised building
blocks results in high security levels, as the reach of
flaws or external attacks can be limited to less sensitive
function blocks.
Attackers can now compromise the untrusted side
containing the application logic and communication
stack without affecting security on the private side, which
holds basic crypto functions and the actual keys. As the
private side is now quarantined from attacks and hard
to compromise, it can safely determine the security state
of the public side. Not all operating systems or RTOSs
offer this so developers should look for OS solutions
where this is available.
• Secure provisioning – It is important to have a trusted
relationship between the cloud and the device, as it can
not only be a trusted data channel, but also a way of
sending firmware updates to the device.
Performing firmware updates over the air is a delicate
process, not only is it vulnerable to attack, it can also be
detrimental to the battery life of the device. A combina-
tion of hardware support – to protect the keys used to
verify the firmware signature, as well as software support
– is needed, to achieve updates in an incremental manner
28 june 2017
in order to save battery life. If an update goes wrong, as
was the case in Taiwan recently when a bicycle rental
service was brought to a standstill because of a failed
system update, it can paralyse devices and networks.
• Prevention of remote, DDOS attacks – The hardware
root of trust also protects against remote attacks, which
often come in the form of denial of service attacks.
Compromised connected devices can overwhelm the
network and take down even the biggest brand names.
By securing end points with a hardware root of trust and
a cryptographic identifier, each IoT device can be
authenticated and authorised to connect to a specific
cloud service. This means that only the unsecure part of
the device can be compromised.
• Out-of-the-box secure platforms – This year there
will also be a move towards out-of-the-box secure
platforms that come ready with open ecosystems of
experienced talent, well-tested libraries and easy-to-use
APIs. These will also help to abstract away any significant
embedded security decisions and challenges, by
layering in security protocols to protect IoT solutions;
such as security domains that are isolated to TLS for
secure communications.
There is no silver bullet for solving all of the
security challenges associated with building the IoT and
its solutions needs careful thought. A specific method-
ology that aims to design, connect and integrate all of
the elements that make up the computing system from
the architecture upwards is needed. At ARM we call this
methodology Total Computing – it is the ability to create
synergies between the different layers of technologies
so that they complement each other. If we take the
security scenario as an example, we ensure that a root
of trust is baked in into every layer of a build, to enable
secure IoT communication through trusted digital
authentication and interactions.
PrOFIle
Jan is a developer and evangelist currently
working on the Internet of Things for ARM.
At ARM he works on developer relations, the
mbed platform, and connectivity for the IoT.
 Credit: Brad Smith Photography http://www.bradsmith.photography/

30
june 2017
Voices Interview
 Interview

Jonathan Stark
Words by Tom May Photography by Brad Smith

The consultant, speaker and author

explains why he thinks hourly
billing is nuts, and how a “treat ‘em
mean, keep ‘em keen” approach to
clients can really work

Info
job: President, Jonathan
Stark Consulting
w: jonathanstark.com
t: @jonathanstark

june 2017 31
Voices Interview
For anyone working in the world of
mobile, Jonathan Stark is a man worth
talking to. He’s been providing mobile
strategy, training and development as
president of Jonathan Stark Consulting since
2007. His ‘Jonathan’s Card experiment’ made
global headlines in 2011 by combining mobile
payments with social giving at Starbucks
across the US. He’s a popular speaker, has
written three books on mobile and web
development and hosts a weekly tech podcast
with Kelli Shaver called Terrifying Robot Dog.
So Stark who’s based in Providence, Rhode
Island, and has worked in tech since 2002,
knows a lot about where the industry is going,
and where web designers and developers are
getting things wrong. When it comes to the
latter, he’s got two words for you: hourly
billing. Spoiler alert: he’s not a fan.
“It’s just this thing that everyone is used
to, and typically no one even considers an
alternative,” said Stark. “When people start
freelancing, their immediate thought is ‘How
much should I charge per hour?’ , not ‘How
should I charge?’” But as the title of his latest
book proclaims, Jonathan Stark believes that
Hourly Billing Is Nuts. “Hourly billing for
professional services is a horrible practice
for everyone involved,” he argued. “It
devalues the expertise of the consultant and
encourages mistrust in the client, because
the financial incentives of the two parties
are misaligned.”
RelationshiP goals
As long as you bill hourly, clients will see you
as a ‘hired help’ to be directed, Stark said.
“But you’re better than that. You’re the
expert at what you do, your clients are not.
So stop letting clients tell you how to do your
job; take back control. You need to sell your
head, not your hands.”
Billing per project, in other words, isn’t
just about earning more money. It’s about
fundamentally changing your relationship
with clients, where it’s you who leads the
discussion about the scope of the project and
how much it’s going to cost.
How does that work out in practice? Stark
can think of no finer example than his own
experience within the industry. “For ten
years, I did software projects where I built
stuff for a fixed price instead of billing by the
hour,” he explained.
“Someone would phone me and say, ‘We
want you to do these five things.’ I would
usually thank them for their interest, but
reject their self-diagnosis.”
In doing so, he was clear and direct. “I
wouldn’t let them tell me what they wanted
me to do without validating that it was a good
idea. I’d say, ‘Why do you want to do this
project at all? Why don’t you not do it?’ They’d
reply, ‘Well I can’t not do it, our competitors
would eat us for lunch’ , or ‘Our bounce rates
on mobile is horrible, we’re not getting any
conversions on mobile.’ And I’d say, ‘Well
you’ve known about this for six months, why
do you want to do it now? Why not close down
the mobile site?’”
In short, Stark would offer every objection
he could think of to try to talk them out of
working with him. “‘Why don’t you do this
in-house?’ I’d ask them. ‘Why don’t you
outsource it? Why don’t you go overseas and
get a less expensive consultant than me?
Because I’m not going to be the cheapest
option.’ This is all in the sales call. And they’ll
respond, ‘No we have to do this, and we really
want to use you.’ And [by asking these
questions] I’d realise this is a very big deal
to them, it’s costing them a ton of money.
So I’d give them a price: a fair price for them
and an attractive price for me.”
stRaight talking
Stark found that the client’s response would
normally be one of shock. “They’d reply,
‘Hey, that’s crazy, that’s twice as much as
anyone else.’” But rather than caving in,
Stark would remain steadfast and explain
why he was charging that price. He would
suggest, for instance, that other firms’ bids
probably didn’t represent the final price but
an estimate; one that would inevitably rise
partway through the project. “I’d say,
‘Imagine what it will be like to go to your
boss and say we need another $50,000
because we’re three-quarters of the way
through the budget and we’ve still got
another three-quarters of the way to go.
“It’s a very different psychology when you
give someone an actual price,” he pointed
out. “When you give an estimate, it gets
scarier and scarier for the client as the project
goes along. They become terrified that it’s
going to go over budget, that it’s not going
to work. They start to really freak out.”
But if you make the scope of the project
clear, and match it to client objectives, Stark
said, the client will be much more amenable
 “They’re not just
giving you a bunch
of money for fun.
So you need force
them to reveal
their goals early”

to a higher price overall. “Just go into that

first phone call and do what I just described,”
he advised. “Try to talk them out of working
with you. Make it clear the reason you’re
asking these questions is that you don’t want
their money unless you can’t get them a
better offer.
“The idea is for them to further their
business goals,” he stressed. “They’re not
just giving you a bunch of money for fun. So
you need force them to reveal their goals
early. And when you go through the process
of how you’re going to measure what the
goals are, what a home run would look like,
you set yourself apart from anyone else
they’re talking to. And by the end of the call,
you’ll know whether or not it’s worth putting
together a proposal.”
This might all sound daunting, but it really
works, said Stark. “You’ll close a lot more
deals like this than doing it the old way,
taking orders and saying, ‘Yeah, I’ll do that
for you for $100 an hour.’ And you won’t waste
time on your proposal. Because by the time
you get off the phone you’ll know if you’ve
got a good fit, and you’ll have already
explained to them that you’re not the
cheapest option. So the proposal is basically
a summation of what you agreed to on the
phone, and there are no surprises.”
Credit: Brad Smith Photography http://www.bradsmith.photography/

Money MatteRs
But what about when organisations are fluid?
What do you do if the person you initially
agreed the scope of the project with moves,
someone else takes over, and the whole
project changes direction mid-stream?
Stark, as ever, has a quick and convincing
answer. “When you start giving your client
an actual price instead of an estimate, it
means you can ask for payment up front,
which I do. People are always surprised that
anybody would pay me 100 per cent up front,
but they do.

june 2017 33
Voices Interview
“The nice thing for the client is that this
makes it more likely that what you described
[about costs going up midway through] won’t
happen. They actually care about the project,
which I’ll have determined at the meeting.
They’ve already paid for it, so there really is
no reason to stop it. And if someone did want
to stop it for political reasons, well that’s fine
by me. I already have the money.”
sMaRt choice
Stark’s books, talks and podcasts are full of
this kind of simple, no-nonsense advice, and
we have space here to cover just one more.
“I recommend to people all the time to pick
a vertical,” he said. “It
makes it dramatically “Taking a narrow,
easier to do a better job if
you pick a specific industry critical approach
you’d like to serve.” and specialising
Although Stark didn’t
get round to taking his yourself makes it
own advice until recently,
since the start of 2016 he’s
easier for you to be
been focusing solely on an expert”
prov iding mobile
consultancy to credit unions. “It’s funny
because immediately a ‘rolodex moment’
starts happening,” he said. “As soon as I said,
34 june 2017
‘I’m going to do mobile strategy for credit
unions’ , people I’d known for years suddenly
said, ‘I know the CMO of a credit union. I
should put you guys in touch.’ It’s like magic.
“It happened to me twice in the first week.
I hadn’t announced it. I just put it out there
and two people said, ‘There’s someone I need
to introduce you to.’ That’s amazing for
someone building a business where word of
mouth is valuable. That’s like the top of the
heap in terms of customer acquisitions.”
betteR by design
It’s not just about getting more work, Stark
added, but doing a better job for the client
overall. “Taking a
narrow, critical approach
and specialising yourself
makes it easier for you to
be an expert for those
particular people,” he
pointed out. “It becomes
feasible from a time
standpoint for you to
research, say, the
governing body for
credit unions and find out what the
regulations are. You couldn’t do that for every
industry if you were a general web developer
just saying, ‘I can build websites for anybody.
Let me know if you need a website.’”
And happily. “Working with credit unions
has turned out to be a blast,” added Stark,
who first got into computing while he was
touring with a band in the 1990s and needed
to set up a mailing list for fans.
“Credit unions really are a quirky bunch:
they’re sort of like the hippies of the banking
industry,” he said. “They have some really
difficult problems. They’re stuck between
the big banks – Bank of America, Chase – and
start-ups like Silicone Valley, Bitcoin, PayPal,
Stripe and Square. All these people nipping
all over the internet left and right who don’t
have government regulations to deal with.
Credit unions, they’ve got an ageing field of
membership and they need to attract younger
people, but what do younger people want? I
just find it all fascinating.”
To learn even more about switching
from hourly billing to charging per project,
check out the book at hourlybillingisnuts.com
and the Ditching Hourly podcast at
ditchinghourly.com.
next month: Senior front-end engineer
& accessibility advocate Marcy Sutton
 The design of business

Monitor and others are incredibly easy to use with

very shallow learning curves.
When I launched Start! Stop Procrastinating and
Pursue Your Passion (tinybooks.org/books/start) it was
my email newsletter that drove the most traffic, by
quite a substantial margin. Twitter was useful, but
it paled in comparison when connecting with others
through their inboxes.

The ATTenTion economy

In a world where we’re constantly bombarded with
content it can be incredibly hard to keep up. Rivers of
content including Facebook, Instagram and Twitter
all too quickly become overwhelming. Stepping
outside of the flow, through a carefully considered
journal or email newsletter, offers a way to connect
with other like-minded individuals who‚ contrary to
what you might have been led to believe‚ are hungry
for useful information.
THE DESIGN OF BUSINESS

Audience
Don’t just sell, tell. As I explored last issue, people
buy stories by people. Spend some time developing
your brand’s story. What are you focused on? What
might you share that others might find useful?
Great newsletters focus on sharing ideas that are
thought-provoking and helpful. There’s a world of
christopher murphy stresses the importance of information on the web; what’s sorely missing are
ways to filter all of that information. Distil down
building an audience before you launch your discoveries and your audience will thank you.
Newsletters like Hiut Denim’s Chicken Shed
In the fifth article in my ongoing series Chronicles attract an audience because it’s the
Info exploring the design of business, I’ll explore the product of hard work and intense focus. It’s also light
Job: Writer, designer importance of building an audience for your product, on the hard sell, instead focusing on helping others.
and educator ensuring that your launch doesn’t go unnoticed. It’s critical to value your readers’ time; put the effort
t: @fehler As the old philosophical conundrum states: if a in and create value and your audience will thank you.
w: tinybooks.org tree falls in a forest and no one is around to hear it, Build a list and, when your product’s ready
does it make a sound? You might be creating the best to launch, you’ll have a group of like-minded
product or service you could imagine, but if you have individuals that are bought into your vision and
no audience the chances are that falling tree, when values. Many will happily repay your efforts by
you launch, makes very little sound. supporting you in return for all the hard work you
When launching something new it’s important put in along the way.
to have an interested audience in place. One way to
do that is to share your story as you confront the
challenges of building your brand head-on.
Don’t wait until everything’s finished to start
sharing your story. The end is only the beginning,
the journey to that end point is an interesting and
overlooked part of the story. Share that story and you
can start to build an interested audience while you
work on putting the finishing touches in place.
One way to do this is to build a mailing list. Email
newsletters are incredibly effective and according
to Campaign Monitor: email marketing is the king
of the marketing kingdom with a 3,800 per cent
ROI generating $38 for every one dollar spent. Even
better, dedicated tools like MailChimp, Campaign Get ahead MailChimp is a powerful tool for building an audience in advance

june 2017 35

Q&A
Derek
Featherstone
The founder of Simply Accessible explains the
biggest website accessibility misconceptions
net: You’ve spent decades working to improve web
Info accessibility. Are we making progress?
Job: founder, DF: Here’s the bottom line. The industry has
Simply Accessible made loads of progress in terms of techniques and
w: simplyaccessible.com infrastructure for making things accessible from
t: @feather a development/engineering perspective – making
things programmatically accessible. There’s a huge
area that is lacking, though: the design and user
experience component of accessibility. I’m sure many
people don’t agree with me. They’ll say that ‘building
things right meets the technical requirements of
accessibility and the rest is usability’. Your users
would disagree: if it is technically correct, but can’t
be easily used, what was the point in the first place?
Then you’ll hear this response: “Well, if it isn’t easy
to use it’s probably a usability issue that affects
everyone, so it’s not an accessibility issue.”
The impact of a usability issue for a person with
a disability can often be disproportionately higher
than it might be for a person without. Disability is
an amplifier: a usability issue that slows a person
without a disability down by five seconds might
Q&A
actually become a complete blocker for someone with
a disability. If your solution isn’t easy to use by people
with disabilities, you’re missing the actual point.
net: Do you think governments need to play a role
here, or is it better for the industry to self-regulate?
DF: There is no ‘or’ here – both are needed. I’d
certainly rather that we not need the legislative stick,
but I’ve seen it work, so we’ll go with both.
net: What sort of people do you work with?
DF: We’re working with teams all over the world,
in all kinds of industries: airlines, healthcare,
education... you name it. We help them figure out
‘where they are’ from a few perspectives: how
accessible is their site now? What is the level of their
skills and understanding? What areas in their process
need some infusion of accessibility? How does their
web app or kiosk stack up in usability testing with
people with disabilities? Once we’ve done that,
we take the role of sherpa and guide them while
they’re on their journey: fixing their issues directly
if needed, creating new designs for them that are
accessible, running cross-functional workshops so
that their teams all get up to speed and learn those
skills, mentoring, strategy and process change. It’s
a very tall order to create that kind of change at an
organisational culture level, but we absolutely love it.
net: What are the biggest misconceptions web
designers have about accessibility?
DF: ‘You’re taking away my creativity’. Not so much:
we’re telling you that there are some parameters
you should keep in mind. You’re creating something
that has a very specific purpose. You’ve likely heard
this before: putting these parameters around things
actually means that you need to be more creative to
come up with solutions that work.
‘All I need to worry about is colour blindness and
contrast, right?’ There’s so much more to it than
that. As a designer, you’re supposed to actually make
a much, much bigger contribution to things than
that. For example, keyboard interactions – sure, the
developer implements things to make them keyboard
accessible and have a good keyboard/tabbing
sequence. But you… yes, you the designer should be
spending your time designing keyboard interactions.
Yes, you need to make decisions on colour
combinations, but put some more thought into
designing interactions. Start thinking about
systems and things like that, and then you’re really
creating a more accessible design. Your design is
more intentional and not left to chance, and that
ultimately makes it much easier to use by people with
disabilities. Oh, and everyone else, too.
june 2017 37
VOICES Big question

Culture

WhAt hAve you leArned

in the lAst yeAr?
With new technologies, tools and techniques arriving all the time,
our seven experts reveal their biggest learnings over the last 12 months

Jef f t ol l A A ron Gus tA f s on

Executive creative director, Bukwild Author, Adaptive Web Design
bukwild.com aaron-gustafson.com

I swear I’ve tried every prototyping tool out there

over the last few years. But recently I found
myself falling back to the first one I ever tried,
Principle. It’s very flexible in its ability to frame up
interaction for both desktop click/scroll and allowing
full custom control for mobile gestures. I get a bit
nervous investing time and effort into just one tool, as
new options continuously pop up, and it’s enticing to
drop everything and move onto the next new thing…
And yes I will do that, it’s just the nature of the game.
Mich A el s A l A fiA
Digital strategy lead, Digimix Studios
digimix.co
Acquiring content from clients
has been a common roadblock.
We’ve developed a sales technique
that turns this into an opportunity. As
you draft your proposal, identify what
content exists now versus in the
future. Organise the client’s vision into
multiple versions of the site. Sell your
first project as version one, designing
a site based on existing content, and a
second project as version two,
designing features for future content.
In the last year, I’ve become
more interested in designing for
voice-based interfaces. It makes you
consider your interface as a
conversation with your customers.
What is the purpose of each and
every component on the page? Does
it further that conversation or is it a
distraction? In many ways, it’s like
Luke Wroblewski’s push for ‘mobile-
first’ thinking, with an emphasis on
solid content strategy and accessible
copywriting. Doing it well will create
amazing experiences for people who
can take advantage of this by way of
digital assistants and screen readers.
And when this is combined with
speech synthesis with real-time
translation, it can create
unprecedented opportunities.

38 june 2017
 JAs on Jones l Auren K el ly
Creative director, Integrity Music Founder and design psychologist, Dura
integritymusic.com dura.studio

At Dura, we’ve been experimenting with

As the creative director for a record conversational interfaces. With the shift to non-
label [Integrity Music, specialising in visual design, they open web design to a whole new
world of possibilities. With CUIs, we need to ask more
Christian worship music], I’m frequently human-focused questions, such as what kind of
personality do we want to express, how we represent
asked to quickly put together small character through individualisation and localisation,
microsites to promote upcoming album and even how we build trust and reciprocity. We’ve
been learning about character psychology, semantic
releases. In the past, coordinating and reasoning and a whole host of wider information to
connecting all of the necessary APIs could create successful human-technology communication.
These types of questions underpin our psychological
be a time-consuming and tedious task. approach to design at Dura, so it’s a very exciting time
to be working in the new medium.
Now I can leverage a platform like
Squarespace to have something up in a
couple of hours, and spend any additional t oM A nders on
time customising specific areas as needed. Creative director, Green Chameleon
craftedbygc.com
In an industry where time is literally
money, this has been a huge help. It’s more of a gradual realisation
than actual learning. It revolves
around how lucky we are, as web
JAy f ennel i designers, to be granted such freedom.
Co-founder, Cotton Bureau Drastically improved technology and
cottonbureau.com compatibility has allowed us to shift
our design approach to a more ideas-
I’m not sure I’ve learned anything new about web design in the last 12
months. I’m not sure I’ve learned anything new in the last three years. Since led philosophy. We’re now able to
we shut down our web studio in favour of a product business, I’ve extricated create things based on limits of our
myself from the day-to-day design of websites to take a complete look at our imagination, rather than by limits
company. We used to get lost in the minutiae of font performance or placed by tech. It’s this realisation that
frameworks, but what I’ve learned is that when viewed as part of the whole,
those things don’t much matter in whether our business sinks or swims.
has led me to challenge old workflows.

Why voice Uis are the next big
thing in Web design
While Apple’s Siri didn’t excite BBC UX
specialist Ben Sauer much, Amazon’s Echo
has won him over to voice-based interfaces. In
this article (netm.ag/voice-293), he explains
why we need to get on board with them, and
outlines cases where they serve users better.
resources
the vr Web is here
In an increasingly connected world, there
are a number of advantages that browser-
based VR provides over the traditional desktop
or mobile app model, argues Liv Erikson. She
explores the scenarios this new tech enables,
and dives into the new frameworks that have
evolved alongside it (netm.ag/vr-293).
the designer’s gUide to
prototyping in principle
Principle for Mac is a popular prototyping
tool that makes it easy to design animated
and interactive UIs. Designer Abhinav Chhikara
reveals how he was blown away by it (netm.ag/
prototyping-293) and provides the files of what
he made for downloading.

june 2017 39
voices Opinion
CuLtuRE
Collaborative UX
James Reece discusses the merits of cross-
disciplinary teams and creating better experiences
Have you heard the one about the UX
designer, front-end dev and copywriter
who went into a bar? They had a friendly pint
together, chatted pleasantly about work and
nothing untoward happened. Not laughing?
Well, you clearly aren’t an old UX hand, as the
notion of such a peaceful carry-on ever hap-
pening would have elicited snorts of incred-
ulous mirth around here just a few years ago.
Back then, UX design, editorial and tech-
nology teams were siloed and distant, work-
ing largely in isolation with minimal collab-
oration. It was a model that stemmed from
the era of industrial product design – where
every detail had to be nailed down before
sending it off to be manufactured. After this
point, change could not happen because it
was far too costly.
But the nature of digital means that magic
can happen where disciplines intersect. With
increasingly complex technical possibilities
and ever-inflating consumer expectations,
a holistic approach is key to ensure the best
possible results. This is because today, more
than ever, technology is the experience.
Much of my best work has been produced
when working on ideas closely with develop-
ers. For example, the design of an app inter-
40 june 2017
face went way beyond what I could have con-
ceived alone when a developer took my idea
and gave it steroids, manipulating data to
create a more dynamic version of the design
on the fly. By having different mindsets to
collaborate with, lateral thinking flows.
As our industry has matured, we’ve learned
to love one of the fundamental benefits of
our digital medium; it has a fluidity that
doesn’t exist in industrial design. Concepts
such as agile, minimum viable product and
continual improvement show that in digital,
change is good and to be embraced.
This contemporary thinking has led to
a collaboration between skillsets that is
becoming more important than ever, as the
challenges of today involve working with
concepts such as machine learning, chat-
bots, VR and the integration of complex data
sources. User interfaces are disappearing
and leaving technology itself to be the expe-
rience, without being masked by a design
facade. Services such as Google Assistant
and Amazon Echo are examples of a technol-
ogy-first, design-second world – and in this
world, collaboration is the watchword.
Knowledge is a powerful and often under-
rated currency when producing digital pro-
jects. Multi-disciplinary teams benefit from
a shared understanding of business needs,
audience insight, brand guidelines and tech-
nological constraints. Teams can concentrate
on solving problems together rather than
being bogged down by the need to create
reams of documentation for handovers.
Another benefit of this shared under-
standing is that cross-disciplinary team
members are more motivated, and there-
fore efficient, as all team members have a
better understanding of the wider context
of the project. Research is only as good as
the amount of times it is read, understood
and put into practice. Cross-disciplinary
teams also have better empathy for the audi-
ence who will be using their product, as the
whole team is closer to activities such as user
research or testing. Empathy means caring
about the end user, so empathetic teams
means better products get developed.
As an example, let’s look at creating a
chatbot interface. Here, technology is the
beating heart of the service. Next, UX design
plays the role of ensuring that the experi-
ence feels human and matches the user’s
needs. Editorial teams then devise the tech-
nology’s ‘personality’ – Google hired a team
of writers from Pixar and The Onion to help
make its Assistant feel funny and emphatic.
Visual designers add the delightful details
– tell Google Assistant you’re bored and it
sends a fun game to kill some time.
We all know that technology isn’t getting
simpler, so it’s key that digital teams truly
understand it in order to devise the right
solutions. But to do this we must collaborate:
with UX design, editorial and technology
experts all working as one to create a tech-
nology-led experience, the kind that makes
consumers feel weak at the knees.
In the words of Jony Ive: “You have to
deeply understand the essence of a product
in order to be able to get rid of the parts that
are not essential.” In digital, only through
collaboration of disciplines can we achieve
this level of understanding.
Oh, and obviously having a pint in the pub
is usually more fun if you’ve got a couple of
like-minded colleagues with you…
James Reece is a senior UX designer and
PROFILE
CCD at Zone (www.zonedigital.com). He is a
digital polymath with 15 years’ experience,
leading UX teams.
Never miss aN issue!

#291 APRiL 2017

Take an in-depth look at the six
main trends changing the face of
UX, and introduce five steps to
great image management

save uP
#292 MAY 2017 to 31% #286 NOV 2016
Dig into the science behind great
Discover how to master mobile wiTh A diGiTAL design with a look at the five
design through the golden rules of
SUbScRiPTiON
critical steps to planning a site
great mobile UX, plus 15 web APIs and a deep dive into A/B testing
SEE PAGE 22
in beta set to revolutionise the web

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 NETM.AG/NET-bAckiSSUES

#290 MARch 2017
We explore the design secrets
driving major brands, share tips
for futureproofing code, and dive
into Adobe XD’s latest features
#289 fEbRUARY 2017 #288 JANUARY 2017 #287 dEc 2016
We run down the design tools Take a dive into browser-based We run down 22 tools and
worth exploring this year, and VR, learn the rules of responsive techniques you need to know to
show you how to get started web type, and discover how the boost your efficiency levels. Plus:
creating a chatbot experience BBC keeps its sites fast best practices for great forms

#285 OcTObER 2016 #284 SEPT 2016
Explore the new features, tools
and libraries transforming the
way we use JavaScript. Plus, top
tutorials from Generate speakers
We reveal the top 20 new tools
for freelancers, the secrets of
killer CSS layouts, and how to
build a mobile app prototype
#283 SUMMER 2016 #282 AUGUST 2016
We run through the cutting-
edge browser features you can
start using today, and uncover
eight hidden CodePen gems
Jump in to the future with
progressive web apps, explore
the power of Flexbox and get
acquainted with Angular 2

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
Sensational design and superb development
si t e of
t he Mon t h
GSAP AnimAtion, APAche, PhP
The Goldfinch
Energize & This Page Amsterdam puttertje.mauritshuis.nl/en
Maybe I’m biased because I am Dutch, or maybe it’s
because we all love to root for the underdog, but a site
that celebrates a small tiny painting of a tiny bird in a grand
scale really tugged at my heartstrings. I knew the painting,
but before diving into this interactive experience I did not
know the painting was by Fabritius, who is widely considered
to be Rembrandt’s most talented pupil.
As you scroll through the site, beautiful and simple
animations reveal contextual and historical content for the
user – like how back in the 17th century goldfinches were
kept as chained pets in small cages, never allowed to fly. We
also discover how the goldfinch appeared in other historical
44 june 2017
irene Pere yra
Irene Pereyra is the
co-founder of Brooklyn-based
studio Anton & Irene.
Clients include Karim Rashid,
Zumtobel and The Met
w: antonandirene.com
t: @antonandirene ‫‏‬
paintings, and what its role was in Christian symbolism. The
musical score sets the right tone and the interactions invite
you to dive deeper into a story you never thought you’d be
interested in. You come away from the experience feeling like
you’ve learned something new and a newfound appreciation
for something you may have never otherwise noticed.
The site is the first in a series that tells the stories behind
some of the Mauritshuis’s paintings – a fantastic way to draw
visitors to the museum. Next time I’m in the Mauritshuis and
walk past the Goldfinch, I’ll probably pause and take in all the
dimensions that make this painting significant. If I’m with
someone, I might pass my knowledge on to them.
 Inspirational sites

“So much
personality
showing
through. I
love that it’s
as quirky
as her
artwork.”
PATRICK HAney
(@notasausage)

htmL, djAnGo, webPAck + GuLP, bAckbone

ShanTell MarTin
Anton & Irene shantellmartin.art

At the end of the workshops we give, when we vote for the winner as
a group, we always allow people to vote for themselves. But only if
they truly believe that their solution was the best of the bunch. so I’m
voting for one of our own sites here, the redesign of shantell Martin’s site.
at the beginning of each chapter there’s a Campaign status ticker
showing the amount of money donated to this cause so far. This makes it
clear the issue is not someone else’s problem, and moves this project from
simple storytelling to advocacy.
shantell is a good friend of ours, and also a fantastic and influential
emerging artist who is known for her playful, illustrative drawings. so we
wanted to create something playful and original that didn’t follow current
web trends and really captured her and her style while also giving fans a
way to personally interact with her artwork, beyond just case studies.
You navigate around her ‘body of work’ and zoom in and out of the
website’s sections that are positioned around her body. the art on the
interactive homepage reacts to the user’s mouse movements, and by
clicking on the word ‘play’ you launch a hidden easter egg panel where you
can control the way the illustration reacts to your interactions. For example,
choosing Love, strong, Dance or Chaotically creates different effects. our
personal favourite is when you push all the sliders to the max and hit Party.

june 2017 45
Gallery Inspirational sites

htmL5, GSAP AnimAtion, APAche

reSidenTe
Hello Monday residente.com/en

Hello Monday starts by telling the story of musician residente’s search for
identity, interactively. According to Andreas Anderskou, the founder of Hello
Monday, it all started with a Dna test. rene Perez (residente) found out that his Dna
originated from many different parts of the globe, so he went on a soul-searching
journey to understand the cultures that make up his genome. since residente is a
musician, music is a core feature throughout. Where most interactive experiences
struggle with sound, here it works beautifully.
Back in the early days of the internet, most sites had a visitor counter – and with
“We find great joy in
that, Hello Monday pays tribute to an old and forgotten, by some, feature.
Rene did the videos and Hello Monday created the user experience, which was a
trying to do things in
combination of concept, information architecture, user interface design, animation new, better, crazier or
and development. The beautifully designed map houses all the stories and allows easier ways, whether
viewers to get immersed in residente’s search for identity. it’s the experience on
In an era where we are all eagerly clicking away to the next tab or website, the the landing page or the
meditative pace of Residente was a breath of fresh air.
way you scrub a video”
anDreas anDerskou, HeLLo MonDaY
(@HeLLoMonDaYCoM)

46 june 2017

tYPekit, SVG, jAVAScRiPt
The nexT reMbrandT
JWT Amsterdam & Superhero Cheesecake nextrembrandt.com
The very real humans of JWT
Amsterdam taught a computer how
to paint like Rembrandt. Not just like
Rembrandt, but exactly like Rembrandt.
The unveiling of the painting in
Amsterdam last year stirred up some
emotions and discussions around the
future of AI and what role it might play
in art. Is it even art? Or is it kitsch? Are
we just fooled by a cold algorithm? Will
machines surpass humans in their
creativity? What is creativity?
The website tells the complex story
of how the painting was created using
machine learning, but in a fun and
easy-to-understand way. As a viewer
you can zoom into the artwork almost
to a microscopic level, which really
celebrates the insane amount of work
Inspirational sites
that was required in order to pull this
off. “To teach Rembrandt’s style to the
computer, the team gathered enormous
amounts of data about his paintings
– the geometries, the composition
patterns and even the height of the
brushstrokes off the canvas – and fed it
into the machine. This gathering process
took months and involved getting as
much visual information about the
originals as possible and then resizing
them to match each other.”
As I was scrolling through the
experience I couldn’t help but wonder
what Rembrandt himself would have
thought of this. I personally like to
think the old master would have been
extremely impressed, or at the very
least, flattered.
june 2017 47
Gallery Inspirational sites
jQueRY, hAmmeR.jS, htmL5
a iS for alberT
Studio Lovelock aisforalbert.com
Inspired by his first child, creative director
Joe Lovelock created a typographic homage
to parenting that takes the viewer through all
the letters of the alphabet accompanied by little
stories that all parents can relate to. When I
first saw the site, I was immediately drawn to
the flat, geometric illustration style and the
simple animation. The big letters are all made
of circles, squares and triangles, and the
illustrations are made of simple shapes. The
colour palette combines in multiple ways but
remains consistent in every variation. And yet
the words, and how they animate to tell a story,
are what really makes this project sing. My
favourite is N for Negotiating where the
animation plays little Albert throwing a
48 june 2017
tantrum. I eagerly clicked through every single
letter of the alphabet to see how they unfold.
By the time I got to the bottom I was double
impressed by the fact that this was a labour “Truth be
of love, an unpaid side-project that was done told for a long
in-between client work. When I contacted time I never
Joe and asked him why he decided to do this really believed
personal project, he told me that he really I would
just wanted to do something for his own
satisfaction that would let him push his skills
finish it”
Joe LoveLoCk,
further, without any of the constraints from
stuDIo LoveLoCk
a commercial brief. He also thought it might
(@JosePHLoveLoCk)
garner some attention for the studio, and that
long shot panned out – Studio Lovelock is
currently working on animations they’ve won
directly off the back of this project.
 Inspirational sites

htmL, cSS, jAVAScRiPt

balenciaGa
Bureau Borsche balenciaga.com/us

A couple of years ago we worked with Balenciaga on its website redesign

when Alexander Wang was still its creative director. But, as with most
haute couture brands when a new creative director takes the realm, the
company changed direction not only in what you see on the runway, but also
how it chose to communicate in all its channels. In 2015, georgian designer
Demna gvasalia was brought in and took his norm-core aesthetic and brand-
abstraction to Balenciaga’s runways. It’s not surprising then, that he chose
Bureau Borsche out of germany to head up his vision for what the new
balenciaga.com should feel like. And what was the inspiration? According to
Mirko Borsche, it came from the most unlikely of places: excel spreadsheets.
My first reaction was ‘huh?’ – the barebones and stripped-down design is
nothing like what you see on the web today. And that is precisely what I like
about it. Whereas some people complained that it looked too ‘undesigned’ or
too much like ‘wireframes’ I was enthralled, and was left wondering how in the
world they got away with this bold design. they don’t even show any products
on the homepage! unheard of. Fresh. radical. Weird. Brilliant. Cheeky. easy to
use. ultimately, genius. Where most redesigns go unnoticed, this one made
people sit up and take notice. Well done.

“Like always, if you have the idea

of doing something very simple,
the details are the hardest”
MIrko BorsCHe, Bureau BorsCHe (@MIrkoBorsCHe)

june 2017 49
Gallery Inspirational sites

GooGLe APis, jAVAScRiPt, webGL

land lineS
for the rest of the day.
Using a combination
Zach Lieberman and Google Data Arts team of machine learning,
lines.chromeexperiments.com data optimisation and
graphics card power, the
For those of you who think Google experiment is able to run
only makes stuff that’s useful, you efficiently without a need
couldn’t be more wrong. Because every once for back-end servers.
in a while, Google makes stuff purely to show “When the Data Arts team approached me
off the cutting-edge technologies that make about exploring a data set of earth images I “Chrome’s
Chrome work and make it (in my humble was quite excited – the images were beautiful,
opinion), the best browser. revealing all different kinds of structures
Land Lines is
Enter: Land Lines – a Chrome experiment and textures, both human made and natural,
a nice thing
that lets users explore Google Earth satellite and I was intrigued with how to connect this to play with
images simply by drawing or dragging with data set. I did a variety of initial experiments when you
their finger on their mobile Chrome browser, looking at image similarity and different ways need a break
or with their mouse on the desktop version. of filtering and organising them,” explains from political
Once you make a simple gesture, it shows you Zach Lieberman.
Google Earth satellite images with the exact I’m a sucker for incredibly simple
crisis”
saraH CorDIvano
shape you just gestured. It’s oddly transfixing, interaction that is backed up by powerful
(@MaPaDeLPHIa)
meditative and an incredibly creative way to and open-source code, and Land Lines is
showcase the power behind Google’s content. quite possibly one of my favourite Chrome
It’s also a fantastic way to procrastinate Experiments to date.
any other thing you might have planned

50 june 2017
Sublime design
& creative advice
This monTh FeaTuring...
focus on
Sam Kapila gives an introduction to the CSS
Grid Layout Specification and lists some
must-read resources in her latest column
Profile
We talk to Mina Markham about working on
Hillary Clinton’s presidential campaign and
encouraging girls to code
How we built
The inside take on how This Page and Energize
came together to create The Goldfinch – the
most hotly talked about website in the world
Design
Challenge
57 This month ...
music makers
MiC h a e l W ong
Profiles
Michael is an award-winning freelance UI/UX
designer from Sydney, Australia
w: dribbble.com/mizko t: @mizko
a ly s s a l o W
Alyssa is a designer in Chicago, IL. She is
currently product designing at Eight Bit Studios
58 w: alyssalow.com t: @alyssalowww
M a x s a unDe r s
Max is a senior designer at Mud, a web design
and digital agency based in Bath, UK
w: dribbble.com/maxsaunders t: @maxsaunders
Brief
This month we’d like you to design a website for a shop
that sells musical instruments. It could be a bricks-
and-mortar store that specialises in one particular
instrument; an online marketplace for musicians to sell
64 things; or anything in between.
 Design challenge

4 5

Michael Wong

MusiCMasters
My Month
what have you been
A community for teaching and learning music doing this month?
Picked up surfing,
featured in a Microsoft
video for the Surface
MusicMasters is an online learning
close uP Book, started filming
community where anyone can discover,
an Adobe series and
take or even teach a musical class. Every course (1) It’s important that users can find relevant courses writing weekly for my
is vetted to maintain a high-quality standard they trust. So having an advanced search with the ability newsletter for
marketplace. The unique value proposition of to sort by specific filters is an essential part of the site. designers, freelancers
this platform is its community, trust and Tell MusicMasters what instrument you want to learn, and makers.
transparency. MusicMasters has provided a suite what level and the rating, and we’ll show you the most which sites have you
of tools to make this experience extremely relevant courses so you can get started. (2) Users can see visited for inspiration?
simple for both sides of the marketplace. the latest enrolments. Not only is this social proof and Chrome extension
Panda is my inspiration
Users have access to advanced searching validation, it also shows that the course and community is
and news source. I also
capabilities, pre-sale access to course content, active. (3) Users can quickly understand what to expect in love marketing,
real video testimonials and ultimately a live the course. With an outline of all the videos, the duration designernews.co, TNW
chat system with the teachers to clear any and a custom course overview video, the platform gives and Kissmetrics.
uncertainties before committing. These anyone interested in enrolling in the courses a taste what have you been
powerful features also empower teachers to of what to expect before committing. (4) Reviews are watching?
convert more bypassers into students. supported with rich media. Students can share a video Random Netflix films.
The overall design has been kept minimal, testimonial of their progression, displaying real value what have you been
to allow the teacher’s content to tell the story. from the course. (5) The live chat platform encourages listening to?
A combination of navy blue and a pastel green communication. Not only does this clear uncertainties, Listening to hardstyles
and deep house.
creates a balance of professionalism and trust this establishes trust for the student, the teacher and also
with a harmonic and calm vibe. the platform.

june 2017 53
ShowcaSe Design challenge
My Month
what have you been
doing this month?
Playing soccer,
lettering, illustrating
and petting my cat.
which sites have you
visited for inspiration?
My go-tos are
Dribbble, siteInspire,
Designspiration and
Medium. For this
challenge, I also looked
at Airbnb, Rent the
Runway and various
music instrument
eCommerce sites.
what have you been
watching?
Netflix’s Abstract,
Chicago Blackhawks
games and Fixer Upper.
what have you been
listening to?
Devlin’s latest album.
54 june 2017
alyssa loW
sounDCheCk
A vibrant site for renting instruments and equipment
Soundcheck is a music instrument and
equipment rental company that services
musicians, instructors and school music
departments. This solution bridges the gap
between musicians and instruments, creating
an intuitive online experience that meets their
musical needs.
The photography of the instruments is
important for decision making. Therefore, the
UI aesthetic is clean and inviting so it doesn’t
compete with imagery. I chose a vibrant
pink and deep plum to represent the energy,
excitement, and professionalism that ties
with the music industry. Typography should
also contribute to the online experience, so I
chose Circular because the characteristics of
the letterforms are playful, yet neutral and
consistent. Aside from renting, users can rate
and share their experiences about that item,
creating an online community.
2
4
close uP
(1) Being able to search for a specific item is an important
feature. Therefore, it’s the primary feature on the
homepage. The user types in the item, then selects
their rental period. (2) When tapping on Rental Period, a
calendar will slide up where they can select their desired
dates. Depending on the timeframe, the price at the
bottom will fluctuate for that specific item. (3) When the
user scrolls past the product overview, the fixed nav will
switch from its default state to a condensed product
overview state. This allows the user to make selections
and add the item to their cart seamlessly, even after
scrolling past the product overview. (4) The product
overview is simple and organised so users can easily get
a scan, make selections and rent their item. More detailed
specs and customer reviews are below. (5) Audio samples
for each item are accessible within the photo gallery. That
way the user can get a sense of what the item sounds like
before renting.
 Design challenge

Max saunders

opus My Month
what have you
Photorealistic renders and WebGL are used to display customisable instruments
been doing
this month?
I’ve been busy on a
Opus creates handmade, bespoke classical close uP yet-to-be-revealed film
instruments aimed at design-savvy 18 to industry project
35-year-olds. Each product is offered with a (1) The star of the show is the violin, so I’ve allowed plenty amongst others – keep
your eyes peeled.
range of customisable elements, a key function of screenspace to show off all of the design features.
that would be carried out within the This violin would be rendered in 3D to enable smooth which sites have you
instrument’s landing page. movements between sections of the item and also to visited for inspiration?
SiteInspire, Awwwards
By using photorealistic renders combined enable the user to see their various customisations on
and Pinterest.
with WebGL, each step within the Build section the instrument in real-time. (2) Naming each instrument
would see the violin spin and pirouette into with phonetically-pleasing Italian names is a reference what have you been
watching?
positions that best show off each of the custom to the past and the historic birthplace of classical music.
OJ: Made in America,
elements. The user could then choose from (3) If money was no object then high profile tie-ins with Abstract: The Art of
a variety of commissioned, curated patterns, relevant musicians and groups such as Clean Bandit Design (it’s a Netflix
colours and finishes to create their unique would appear in videos across the website, advocating Original show) and
versions of the instrument. and extolling the virtues of the products that are on sale. Bojack Horseman.

The industrial look and feel has been chosen (4) The Build section functions as a stepped process that what have you been
to reflect the creation aspect and it also is split into the four main parts of a violin. (5) I wanted to listening to?
Mike Posner and Kygo
contrasts nicely with the clean classic lines of add a layer of extra interactivity to the page, which can
– to the annoyance of
the instruments; it was important to frame be seen in the form of a blue contextual rollover on the the studio.
them in a way to appeal to the new wave of strings, and this would play a music sample from the violin
classical musicians. when a user hovers over it.

june 2017 55
 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 Art Web design 3D Digital art

www.creativebloq.com
 Focus on

Focus on

the CSS Grid

Sam Kapila gives an introduction to the CSS Grid Layout Specification

Over the past few years, it’s been

interesting to watch web layouts take
centre stage within the world of CSS. The
main catalyst for this coming to the
forefront is a better understanding by
everyone of the importance of the user
experience and content flow of any 1

responsive website. Or maybe we’re in a

post-float development world. First with
Flexbox and most recently with CSS Grid
layout options, our choices and abilities for
thoughtful layouts are expanding greatly.
We’re still in the early days of Grid’s
adoption in browsers. Visit caniuse.
com/#feat=css-grid for some interesting
numbers and notes around the current
adoption. It is currently supported on the
WebKit Nightly if prefixed with -webkit-
and it looks like non-mobile browsers such 2
as IE, Edge, Firefox, Chrome, Safari, and
Opera will all have partial to full support in
their next release. My hope is that by the
time this is published, the global support
percentage will have gone up significantly
from the current 6.28 per cent.
There are some helpful resources around
CSS Grid. Luckily, css-tricks.com/snippets/css/
complete-guide-grid has a complete guide,
written and updated by Chris House (chris.
house). Also, for the more visually inclined,
Rachel Andrew (twitter.com/rachelandrew)
3
has done a phenomenal job collecting all
resources around grid, with blog updates
and, best of all, examples of common UI
patterns (gridbyexample.com/examples). These
resources should have you up and running in
supporting browsers in no time.

(1) Can I Use CSS adoption rates. complete-guide-grid) examples of

Grid Layout (caniuse. (2) See Chris House’s for a comprehensive Grid Layout
Sam (samkapila.com) is a designer
PRoFILE

living in Texas and an instructor com/#feat=css-grid) A Complete Guide introduction. (gridbyexample.com/

at The Iron Yard, an international, has up-to-date info To Grid (css-tricks. (3) Rachel Andrew’s examples) are a
immersive coding school regarding browser com/snippets/css/ interactive handy learning tool.

june 2017 57
ShowcaSe Profile

info
Location: Oakland, CA
Designing since: 2007
Areas of expertise: Front-end
development, UI design and
modular CSS
Clients: Hillary for America,
IBM Design, JCPenney, AT&T

58 june 2017
 Profile

Profile

Mina MarkhaM
mina.codes

The front-end architect tells us about

her work for Hillary Clinton and
encouraging girls to code

No one likes being on the losing

side, but for Mina Markham (mina.
codes) it must be tougher than most. She
recently spent over a year working for
Hillary Clinton’s presidential campaign,
putting her all into creating and
maintaining Pantsuit, the brilliantly-
named pattern library powering Clinton’s
web presence, as well as creating various
microsites along the way and coping with
the sheer pace at which a political
campaign moves.
In a parallel universe she’s doubtless
insanely proud of her contributions to
getting the first female president into the
White House; in this one she’s having to
adjust to the realities of life in Donald
Trump’s America (at the time of writing,
he’s still US President, but anything could
happen between now and publication).
Political campaigns being the way they are,
the election saw Markham out of a job.
Following a couple of months as a lady of
leisure, however, things are looking up for
Markham again; a few days before we
spoke to her, she confirmed that she’s got
a new job, which means she’ll shortly be
upping sticks and moving from New York
All Photos: Non-project photo Sara Kerens.

to California, where she’s taking up a new

post at Slack’s Oakland headquarters.
When we managed to catch up with her
she was in the middle of preparations for
moving cross-country to California, and
about to hit Broadway and see the current
musical phenomenon, Hamilton (after
which she also managed to snatch a selfie
with top science communicator, Neil
Degrasse Tyson).

june 2017 59
ShowcaSe
Profile
Before this, though, we managed to get
her to answer a few questions about her
career, her dedication to encouraging girls
– especially black girls – to get into coding,
her love of Sass, her talk at Generate New
York on 28 April and much more; here’s
what she had to say.
Could you tell us a bit about your
professional background?
I’m a front-end architect based in
Oakland, California. I started my career
making print ads for phone books.
Remember phone books? Anyway, I’ve
been working in tech for about five years
on teams ranging from a two-person
startup to a Fortune 25 corporation. I like
to describe my role as a translator between
the design and engineering teams. My
skills straddle both disciplines, and I feel
I’m most effective when I work in tandem
with design.
Oh, and if you want to make me happy,
bring me a cupcake.
What came first for you: design or code?
Design came first. Actually, writing came
first. I attended the Newhouse School at
Syracuse University with the intention of
becoming a magazine editor.
Unfortunately I realised that I hated
reporting, but loved planning the layouts
of my articles. At that point, I shifted my
focus to graphic design. From there, the
transition to code was an organic process.
As I would design sites for myself or
others, I would research how to implement
the ideas I had as needed. Eventually, I
taught myself enough to make the switch
to coding full-time.
Tell us about Pantsuit and your work on
Hillary Clinton’s campaign.
Pantsuit is the pattern library that fuelled
many of the apps on hillaryclinton.com. It
was the first, and longest, project I worked
on during the campaign. It was born out of
a desire to modularise our codebase in
order to make it more manageable and
maintainable. I created two versions of
Pantsuit. The first was a rewrite of the
codebase, while keeping a 1:1 UI parity. The
second version was built in parallel with
the redesign of hillaryclinton.com. As I
created components in Pantsuit, I would
60 june 2017
Workstation décor Markham’s desk in her Brooklyn apartment. Her walls are adorned with a custom print
from onehundredforty.com and several prints and paintings of ampersands
then incorporate them into the site
templates. That cyclical development led
to a lot of iteration, as I would discover
weak points in Pantsuit during the process.
In addition to Pantsuit and the redesign,
I built several microsites, including The
Briefing, which served as the home for
oppositional content, and the college
calculator, which was a tool designed to
highlight the benefits of Secretary
Clinton’s college affordability plan.
How did working on a political campaign
differ from your usual jobs?
Campaigns move at an incredible pace.
You could have an idea on Monday and it
would be live on Wednesday. Pantsuit was
completed in about two months, and I felt
bad taking that long. Deadlines tended to
be more urgent and unyielding. If you were
working on something for the caucuses,
you have to be done on time – otherwise,
the project is useless. The day-to-day work
wasn’t different from any other tech team.
How are you facing the next four years?
Armed with a full liquor cabinet! I spent
the last two years putting off or ignoring
large parts of my personal life, so for a
while I’m going to focus on getting my life
back in order. Self-care is paramount. I’m
no good to anyone if I’m not at my best.
For my sanity, I’m limiting the amount of
news I consume. I spend less time online
in general. This isn’t to say that I’m
putting my head in the sand, but I’m more
selective about what I expose myself to.
There is a thing as too much information.
Focusing on the large-scale implications
can get overwhelming, so instead I focus
on what I can do and things that are in my
control. I subscribed to Signal Boost
(signal-boost.com), which is a good resource
for action items to take.
You’ve written about impostor
syndrome; how do you cope with it?
Reminding myself of my accomplishments
and knowledge works pretty well. I keep
something I call a ‘brag file’. It’s where I
keep every notable piece of praise I’ve
gotten. Performance reviews, screenshots
of Slack messages and tweets, or
particularly verbose thank-you cards all
get filed away. Whenever I’m doubting
myself or my abilities, I read the file. After
a few items, I begin thinking, ‘Yeah! I’m
awesome. I can do this’. I start to feel like I
can do anything.
This exercise used to make me
uncomfortable. I, like many women, have
been socialised not to brag or appear to
confident, else someone may think we’re
arrogant. But I think once in a while
everyone’s ego, particularly those of
underrepresented minorities, could use a
good dose of bragging. Go ahead and do it
now. It feels good.

Book worm Markham’s desk is home to the complete A Book Apart book collection as well as a whole lot of
buttons and a signed letter from Hillary Clinton
Pants idea The pattern library and documentation
for Pantsuit were built by Markham
What skills do you feel that you need to
build upon?
Since I don’t come from a computer
science background, I lack a deep
understanding of programming.
Fortunately, I’ve been able to carve out a
niche for myself using the skills I already
possess. I want to dive deeper into
functional programming with JavaScript,
utilising ES6, and React. I hesitate to focus
on one specific framework because the JS
landscape is always evolving.
You’ve been talking at Generate New
York in April; can you tell us what’s your
session is about?
At Generate I share successes and failures
from my time at Hillary for America. It’s a
case study of how I built the Pantsuit
pattern library and utilised it in the
redesigned hillaryclinton.com.
College calculator Markham created the UI and
added animations and smooth transitions
You’re a fan of Sass, what about it
appeals to you?
What I’ve always loved most about Sass is
the community around it. I don’t just
mean the number of people contributing
code. There are several meetups and
conferences around Sass. Community
guidelines were drafted to create an
environment in which all Sass enthusiasts
feel welcome.
What’s the story behind Sassy Starter?
Sassy Starter is the result of laziness. A few
years ago, I noticed I always started new
projects with a similar structure. I was
beginning to dive deeper into CSS
architecture, and I used this project to test
out different methodologies to see which
one resonated with me and fit in my
workflow. Eventually I settled on a
structure and decided to open source it so
Profile
office culture
Mina MarkhaM
What’s on your desktop?
Ergonomic keyboard and mouse, Rubik’s
cubes, iPad mini and a framed letter
from Hillary Clinton.
What does your working
environment look like?
I usually work in cross-functional teams
in open office layouts. My desk has been
described as “organised chaos”.
Do you use any tools to aid
your workflow?
Atom, iTerm, Alfred and Kaleidoscope
are essential to my development
workflow. I use Sketch and Affinity
Designer for my design work.
Do you go out for lunch or eat
at your desk?
I tend to eat while I’m working, which is
a horrible habit I’m trying to break.
What hours do you find you
do your best work?
I’m kind of nocturnal, so I find myself
getting more productive as the day goes
on. Because of this, when possible I
start my work day later than most.
What do you like to listen to
when you’re working?
Right now I’m alternating between the
Hamilton soundtrack and Lemonade. If I
just need background noise, I’ll put on
Netflix and listen to something I’ve
already seen.
Describe your working culture
in three words
Just keep swimming.
june 2017 61
ShowcaSe
Profile

tiMeline

A look at the key dates in

Mina Markham’s history

May 2006
Builds first website (created completely
in Flash)

noveMber 2007
Starts job working as a production
designer for AT&T

SePteMber 2012 Pinned pride Markham attends and speaks at several conferences, many more than those shown.
Begins full-time work contracting as a She keeps the badges as souvenirs
web developer

June 2013
Gives her first talk at the Front-End
Design Conference
January 2014
Starts Dallas chapter of Girl Develop It
January 2015
Joins the team at IBM Design
June 2015
Moves to Brooklyn, NY to work for
Hillary for America
auguSt 2015
Finishes first version of Pantsuit
June 2016
Launches redesign of hillaryclinton.com
and second version of Pantsuit
March 2017
Starts work at Slack
others could benefit from it as well. The
architecture used is based on a
combination of ITCSS and SMACSS. This
latest version incorporates some of the
learnings from my work on Pantsuit.
What are you working on at the moment?
I haven’t been doing much except
recovering from the election. I’m really
looking forward to getting started at Slack.
Could you tell us about Front Porch?
Front Porch is a front-end conference
based in Dallas, Texas. It was started by
Chris Williams, born out of a desire to help
cultivate a cohesive development
community in Dallas. I was a speaker in its
first year; that was the second time I ever
spoke in public. Shortly after I started Girl
Develop It in Dallas, Chris asked me to co-
organise the conference with him. One of
the things that Front Porch prides itself on
is our commitment to creating an inclusive
environment for our attendees and
speakers. We also make finding and
cultivating new speakers a priority. We
want to ensure that fresh voices and
perspectives are given a chance to shine.
Is it important for you to be involved in
initiatives such as Black Girls Code and
Girl Develop It?
As far as I know, organisations like Black
Girls Code and Girl Develop It weren’t
around when I was growing up.
Furthermore, computer science and
technology was not a field I was
encouraged to join. I don’t think I even
knew it was an option until high school.
Even then, it never felt like something I
could do. I couldn’t see myself in the
archetype of a developer.
These types of initiatives are important
because they make programming more
accessible to girls and women. They
provide an encouraging learning
environment, as well as mental models for
the students to aspire to. When I was
attempting to start my career in tech, I felt
very alone and like I was stumbling
around. If I had something like Black Girls
Code to show me that women, black
women, can be developers, it would have
made a world of difference.
Which aspect of your work do you adore
the most?
I love making code and workflows more
efficient. It may seem weird, but I really
enjoy refactoring. One of my favourite
things is untangling and making sense of
messy codebases. Being about to dissect a
design and abstract out components is
great. Collaborating with designers lets me
scratch that design itch too.
Next month: Elegant French creative
web studio Waaark

62 june 2017
 THE WORLD’S LEADING DESIGN MAG

ON SALE
28 APRIL

P R IN T A ND DIGI TA L E DI T IONS ON S A L E AT
bit.ly/casubs • bit.ly/CA-iPad
ShowcaSe How we built

How we built

The Goldfinch
This Page and Energize talk us through their new site for The Hague’s
Mauritshuis museum and the biggest little painting in the world

2 3 4 5 6 7

brief
The Mauritshuis museum located in The
Hague needed a site to showcase itself and
its collection of art masterpieces. It hoped
to encourage new visitors by telling the
stories behind its collection, starting with
an in-depth look at Fabritius’ Het Putterje
– The Goldfinch.
Close up
(1) The Goldfinch – the most looked-at bird in
art – has so many wonderful stories to tell that
it deserved its own website. (2) The site was
developed with the most elegant UX possible to
ensure a seamless experience. (3) The Goldfinch
was the first painting in the world to be given
a CT scan. It revealed that Fabritius made the
painting in two phases. (4) Fabritius’s late work
show light spaces: white battered walls lit by
the Sun. Did Vermeer borrow this style from
his older fellow townsman? (5) Why is there a
goldfinch in a painting of Mary and Jesus? The
answer lies in the story of Jesus’s crucifixion
and his crown of thorns. (6) In Dutch, they’re
called puttertjes, meaning ‘little water drawers’.
This comes from a trick you can teach them:
to draw water with a miniature bucket. (7) The
Goldfinch is by Carel Fabritius (1622-1654).

64 june 2017

Jordi Busk ermolen
Jordi is managing partner at This Page
Amsterdam and was responsible for the
production of the site.
w: thispage.amsterdam
t: @thispage_ams
The Mauritshuis museum
(mauritshuis.nl) in The Hague is
home to a vast collection of art from
the Golden Age of Dutch painting.
It boasts work from the likes of
Rembrandt, Vermeer, Breughel and
Holbein, as well as one of just a
handful of surviving paintings by Carel
Fabritius: The Goldfinch (puttertje.
mauritshuis.nl/en). Thrust into the
limelight in recent years thanks to
Donna Tartt’s Pulitzer-winning novel
of the same name, The Goldfinch is also
the star of a new site from Energize
(energize.nl) and This Page (thispage.
amsterdam), telling the story of
Fabritius’ little painting and the world
it came from and encouraging people
to visit the Mauritshuis.
net: What’s The Goldfinch and why is it
such an important work of art?
RP: The Goldfinch is a painting by Carel
Fabritius from 1654. And although it
was painted centuries ago, it still is a
source of inspiration to many. The world
behind this apparently small painting is
much larger than one would suspect. It
is probably the most famous bird in the
history of art and one of the best-loved
paintings in the Mauritshuis.
The writer Donna Tartt described
the work as a ‘tiny, stand-alone
masterpiece’ and devoted a best-
selling novel to it. The composer
Antonio Vivaldi wrote a special flute
concert about the little bird, calling it Il
Gardellino (The Goldfinch). The Scottish
National Gallery in Edinburgh, which
How we built
roBin Pas
timeline
Key dates in the
The Goldfinch project
30 June 2016
First concept presentation for
Robin is creative director at Energize, Mauritshuis (the client)
the lead agency behind the site, and was
responsible for the concept.
1 november 2016
w: energize.nl Start specification, researching content
t: @EnergizeNL and design phase (UX, design, content,
copy and music choice)
exhibited the painting in late 2016, mid-deCember 2016
described it as one of the most beautiful Briefing ThisPage Amsterdam – front-
and mysterious paintings of the Dutch end/back-end development.
Development of videos, animations and
Golden Age.
trailer. In the sound studio for VO
recording and SFX
net: Can you tell us how you got involved
with the project? start of January 2017
RP: As the lead agency for the Specification and design phase for mobile
Mauritshuis we’ve developed a long-
term strategy for the museum to reach mid-January 2017
out to an international audience. The ThisPage Amsterdam work on front-end/
Mauritshuis has a large collection of back-end development mobile site
masterpieces. The Girl with the Pearl
end of January 2017
Earring, for example, is part of the
Testing and optimalisation
collection, but the paintings are more
famous than the museum itself. We
3 february 2017
want to enthuse people about visiting
Soft launch on desktop, tablet and mobile
the museum; that’s why we show and
tell which masterpieces can be seen in 9 february 2017
the Mauritshuis.
PR launch
JB: Energize approached us to be its
creative development partner for a february – marCH 2017
new website of the Mauritshuis. The Receive FWA, Awwwards and CSS
briefing was to create a rich, animated Winner site of the day awards
experience that takes you through
the journey of the famous painting,
Het Puttertje, which is also known in
English as The Goldfinch.
net: Could you tell us about some of the
site’s big design features?
RP: We wanted to give the viewer the
feeling that they could plunge into the
painting and bring it to life. So we left
as much room possible for exploring,
looking and intuitively discovering all of
the stories behind the painting. Videos
and animations start automatically and Novelisation Fabritius’s painting inspired the novel
we’ve reduced as much of the interface The Goldfinch by Donna Tartt
june 2017 65
ShowcaSe How we built

evolution

Inside the creative process behind the

The Goldfinch website
(1) The first stage involved the content, UX and the initial
stages of defining content, narrowing it down and laying
out a rudimental UX on what we could start designing.
We knew we wanted to present a seamless experience
for the end user. (2) With a layout based on the brand
guidelines we explored multiple angles in the design
process. We had to carefully consider where to place
navigational objects to ensure they would not interfere
with the site experience. (3) Sometimes we had to
denounce earlier designs. Simultaneously This Page
started to work on the front- and back-end development.
(4) This clearly shows how we worked out the animations
and transitions. Since timing was so important during
this stage we left nothing undocumented. Every
animation was thought through in advance and briefed
carefully to the animator so as to not frustrate the
backend development. (5) Technical, motion and testing.

66 june 2017

to eliminate any distraction. This focus
helps to enhance the experience as if
you were being read a book aloud. That’s
why we chose to do this website as a
one-pager without any excess scrolling
to keep you concentrating.
net: There’s a lot of stuff going on
throughout the website; how did you
ensure performance?
JB: We’ve used the request animation
frame of the browser to ensure our
animations will run smoothly without
blocking the execution of the JavaScript.
We’ve tried different approaches
regarding the animations to find the
best way. Also we lazy load assets based
on the scroll position so you don’t have
to load too much at the same time. We
used the proper CSS properties that
don’t cause any browser repaint which
are expensive regarding performances.
net: How did you animate the many text
pop-ups across the site?
JB: We started by taking a good look
at the UI elements, which helped us
find the right ideas. For example, the
masks used to animate the hotspots are
transforming into the underline.
We then fine-tuned everything so that
it fits with the other animations.
The art in question Created by artist Carel Fabritius
(1622-1654), The Goldfinch was painted in 1654
and is displayed at the Mauritshuis, The Hague
Mobile thinking Due to the amount of hotspots on the desktop version,
testing for mobile devices was highly time consuming
Technically speaking, we used the
GreenSock Tween library which enables
us to animate CSS properties and SVGs,
keeping the performance high.
net: Could you talk us through some of
the technologies running the site?
JB: For the frontend, we used a mix of
Stylus for the CSS, ES6 transpiled into
ES5 by Babel for the JavaScript and
React. React helped us to divide content
into chapters, blocks and hotspots and
to be able to reuse code as much as
possible. The magic touch is brought by
GSAP which lets us do the animations.
Everything is bound by Webpack.
We also have a PHP backend in Laravel
to help us manage the two languages,
store the original data and detect the
user device.
net: What were the biggest challenges?
JB: Keeping the performance smooth
was one of our biggest challenges
considering the amount of content and
animations. Also the responsiveness
was quite challenging with the amount
of content to be shown.
Besides, the audioflow was
challenging too: it has to live on its own
to not interfere with the video content.
net: What about testing and ensuring it
worked across various devices?
How we built
JB: It was quite a task to make sure
that the website worked across various
devices. Since every device requires a
different approach to deliver multimedia
content it was a handful. Also to test
all of the hotspots and make sure that
they fit on all devices was a lot of work,
considering the amount of hotspots in
the website.
net: Did you learn any useful lessons
while building the site?
JB: That a basic thing, such as scrolling,
can bring so much experience to
a website. Also we improved our
already-awesome development stack,
for example bringing in React for
component-based development was a
really nice addition to our workflow.
net: What’s your favourite thing about
the site?
RP: Personally, my favourite part is
about the Delftse donderslag (Delft
explosion) because of the story behind
this moment in time. It is a bit morbid.
There were so many casualties and the
artist Carel Fabritius died as well and a
lot of his work was lost. It’s a tragedy;
people thought he would surpass his
master Rembrandt eventually. But at the
same time it was the very starting point
of the journey of The Goldfinch and its
worldwide fame.
june 2017 67
FeatureS Make magic with CSS

68 june 2017
 Make magic with CSS

If you’re feeling
uninspired and tired
of building the same
layouts, then it’s time
to leverage the CSS
superpowers you might
be unfamiliar with. Aga
Naplocha shows how to
boost your creativity with
her top CSS properties

I
f you’ve been working in the web
industry for a couple of years, you
may feel that you continuously
code or design the same types of
layouts. Of course we observe new
trends and try to apply them in our work,
but the majority of sites still look the
same. Almost every one of them uses a
12-column grid, two and three-column,
boxed layouts and similar shapes. It’s
getting pretty boring to look at.
It’s time we started to draw inspiration Author

from fields or areas that go beyond digital AgA NAplochA

design. We haven’t forgotten about the Aga is a designer
and front-end coder
print and editorial designs that we all
at Adobe. She’s the
love looking at, so why can’t we break co-founder of the
old habits and try new CSS properties Awwwesomes – a
that open a whole new world of endless non-profit organisation
possibilities? Actually, we can! that teaches people
to do awwwesome
Over the next few pages I’m going to
things on the web, and
encourage you to explore visual styles is organising coding
that go way beyond the ones you may be workshops in Poland.
familiar with – using CSS. www.aganaplocha.com

june 2017 69
FeatureS Make magic with CSS
get inspired Looking at other people’s work can spark a great idea in you. these wonderful works from rosanna Webster and Barrakuz are a fantastic source of inspiration
Designers vs developers
Designers tend to complain that
technology limits their creativity and
imagination. They constantly hear, “It
can’t be done on the web,” or that their
design will take a lot of time and effort
in development. On the other hand,
developers are fed up with the constant
technical challenges they face when
converting designers’ sophisticated ideas
to HTML and CSS. Fortunately, these
problems are slowly drifting away thanks
to the revolution CSS is going through
right now. Probably all of us have heard
about Flexbox or CSS Grid. It’s amazing
that there are more and more possibilities
to build our layouts – and that it’s so easy
to do so. What about creating catchy and
beautiful imagery or layout elements? Do
we have tools for it? Of course we do!
collages are fun!
So let’s look in to some examples. If you
like creating distinctive and memorable
effects or you simply seek them out for
inspiration, I’m sure you’ll love this. With
a large variety of CSS features, we are
slowly abandoning graphic software to
achieve some effects. The future of web
graphics is bright, and finally it will make
us less dependent on the image editors.
What’s more, it will also enable us to
create and modify imagery directly in the
browser, using only a couple of code lines
(nothing complicated here!).
While writing this article, I was
intensively looking for some inspiration
and, happily, I came across a couple of
great collage artists – among others
Rosanna Webster (rosannawebster.com)
70 june 2017
Collage-inspired
designs are
enjoying their
moment of fame in
visual arts
and Barrakuz (barrakuz.com.pl). Their
work immediately stole my heart, and
I started to dream of creating similar
effects by using CSS properties, avoiding
the traditional solution of simply
attaching raster images already prepared
in a graphics editor.
Collage-inspired designs are enjoying
their moment of fame in visual arts; even
on the web they’re getting more and
more attention. If you are in doubt, check
out MailChimp – have a look at their
homepage. Did you notice the collage?
You may think it’s nothing complicated
– cutting out raster images and placing
them on the page. However, preparing
collages that truly adjust to the web’s
requirements – having them scalable,
animated and interactive – will make
them more attractive. Is it achievable?
The good news is that CSS shapes,
masking and clipping will do the work.
Moreover, playing with these techniques
is fun, fast and creative. Sounds cool,
right? So let’s begin.
Blend modes
Duotone gradient imagery and colouriser
effects are some of the hottest web design
trends this year. They are widely popular
layered design mailchimp.com uses collage-like design on
its homepages, which have playful CSS properties
across the web thanks to Spotify, which
implements them very consequently
and cohesively. Now you can finally stop
creating multiple colour versions of the
assets and just do this directly in the
browser, which will save you a lot of time.
Using CSS blend modes is not only a
great way to unify the look of the content
across websites but also gives you the
ability to set different colour versions,
changing only one value in CSS – the
colour. There are 15 possible blend
mode values such as screen, overlay,
lighten, darken and more. Each of them
represents different pixel operation,
resulting in various effects.
There are a couple of implementation
methods, depending on the type of
element you would like to apply the
effect to. You can use background-image and
background-colour set on the container
background-blend-mode: darken;

Dramatic duotone www.ortizleon.es is a great example of using blend modes to generate a duotone image background
Seamless blending As well as beautiful colours and typography, Nurture Design knows how to take advantage of blend
modes, in their case applied on a video (nurturedigital.com)
Bold choices Bolden’s website (bolden.nl) has this great example of mix-blend-mode, which has been fully achieved in CSS
or create an overlay with pseudo-
elements (ie :before and :after) on
the image wrapper in order to get a
colourising effect.
To achieve a satisfying duotone effect,
it’s recommended that you use a high-
contrast black and white image. You can
do this by applying CSS filters to set
greyscale and a high contrast level.
Another cool property is mix-blend-
mode, which lets you blend content
Make magic with CSS
of the element with the content or
background of its direct parent. It looks
nice, especially on squeezed text in which
letters are overlapped. You may ask why
in this case we don’t want to use proven
and known opacity. The answer is simple:
we can easily lose the colour vividness
using transparency only, and the final
effect won’t be as attractive.
The era of reusable images that are
edited directly in your web browser is
Case study
Front trends is one
brand definitely not afraid of
applying new CSS trends
Finding a website that uses all of these
properties isn’t easy. Perhaps because
some browsers don’t fully support
them, or because designers aren’t
comfortable using too many new tricks.
Happily, I stumbled upon a brand that
consistently uses new CSS features.
The Front-Trends websites are built
yearly for an annual conference for
front-end developers hosted in Warsaw,
Poland. The sites experiment with new
CSS superpowers, while keeping them
subtle, effective and usable.
Paweł Czerski, the founder of
Front-Trends and creator of the sites,
said experimentation is made possible
through the iterations of the site and
inspiration from conference speakers:
“We meet the brightest trendsetters in
web development, inspiring us to apply
new tricks straightaway.”
For example, the website from
2016 (2016.front-trends.com) uses
blend modes for pictures, clip paths
for the shapes (polygons) and even
the navigation uses polygons. The
2017 version (2017.front-trends.com) is
more plain in terms of shapes, but has
some clever features. Try the mobile
navigation, which is pure CSS with
transforms, using carefully tweaked
animations to achieve a natural effect.
Both sites were designed and
coded by one person, which, according
to Paweł, allows for more flexible
creativity. “By removing the difficulties
of communicating between designer-
developer, you can move the core design
process directly into the browser.”
june 2017 71
FeatureS Make magic with CSS
In-depth techniques
For an example of combining clip-path,
animation and background-attachment
properties, take a look at the example
below. There is an irregular shape,
created by clipping. First, you define a
simple block-element in HTML and add all
necessary CSS properties, including a clip
path. As the shape is difficult to define by
the polygon function, the path is included
in the url() addressing the SVG’s path. The
SVG code is placed in HTML.
Please note that if we want to use a
given path as an id element in the url()
function, we need to place the path
within <defs> tags as presented below:
<svg>
<defs>
<clipPath id=”clip-water” clipPathunits
=”objectBoundingBox” >
<path d=”M521.4,144.6c-3.9-4.8-9 …
[and more numbers]/>
</clipPath>
</defs>
</svg>
<div class=”splash”></div>
.splash {
clip-path: url(“#clip-water”);
background-image: url(‘../images/
cosmic.jpg’);
background-attachment: fixed;
} mask-image: url(#masking); /*referencing
If you would like to practice, the code of
this example is available at aganaplocha.
com/netmag/collage-water/index.html.
Just a quick note – as you can’t see
the movement in print, note that the
background inside the splash is animated,
and it gives a cool impression.
72 june 2017
create a mask the png file with transparency contains the
mask. the red background will be the visible part
coming, but we can’t forget about browser
compatibility. CSS blend modes are
supported in most browsers, but not yet
in Internet Explorer, Edge or Opera.
Masking is your friend
Masking is another attractive feature
that helps build more creative shapes
and layouts. It tells your browser which
asset elements should be visible. Masking
can be done in three ways: using a raster
image (eg PNG format with transparency
parts), CSS gradients or SVG elements.
Note that unlike a typical raster image,
SVG can be scaled or transformed without
a significant quality loss.
img {
mask-image: url(‘mask.png’) linear-gradient(-
45deg,
rgba(0,0,0,1) 20%, rgba(0,0,0,0)
50%);
to the element generated and defined in SVG
code*/
} element*/
It’s important to mention that Firefox
supports only the latest one, so we need
to use an inline SVG mask element.
What if we use a raster image with
transparency levels? The transparent
parts of the image won’t be seen, so in
other words, the opaque fragments will
be displayed, hiding other pieces.
What’s so powerful about masking is
its ability to apply the same properties to
background images – we can define its
position, size and repetition.
If you want to find some specific-use
cases for CSS masking, think about text
and images in the articles. Irregular
Final result Visit aganaplocha.com/netmag/mountains/ to see
the final mask – text will emerge from behind the mountains
containers and images are very popular
in print, however, quite tedious and time-
consuming to implement on the web.
But thanks to masking, not anymore! You
can also have fun using animated images
with transparency levels (eg GIF files) to
cut out part of the image. However, when
using these properties don’t forget about
cross-browser support, and add vendor
prefixes.
Don’t be afraid of clipping
Another great feature is CSS clipping. The
shape’s boundary is called the clip path,
however, this is not to be confused with
the deprecated clip property. In short,
clipping defines which image area should
be visible (sounds like masking, right?).
Clipping is similar to chopping pieces of
paper. Anything outside the path will be
hidden, while anything inside the path
will be visible.
clip-path: circle(radius at x, y);
clip-path: url(#clipping); /*referencing to SVG
For example, if a circle function sets a
clipping mask over the top of an image,
you will only see the part of the image
within this circle. The cool thing is that
we can use shape functions and SVG
as clip paths, which gives us a lot of
opportunities, for instance in animating
them into morphing shapes. Check out
this article from Chris Coyier about
creating transparent JPG using SVG clip
path (css-tricks.com/transparent-jpg-svg).
clipping vs masking
If you are still wondering what the
differences between clipping and
 Make magic with CSS

Background cutout
With clip path you can
remove background from
your image, instead of
using PNG files. See Aga’s
example at aganaplocha.
com/netmag/plants.

Step out of the box

and discover new
forms making our
page layouts richer
and less boxy
masking are, then remember that masks
are images and clips are only vector
paths. One fact worth mentioning is
that masking is more memory and
computation consuming, as it is a
full image. When using this process,
everything has to be done pixel by pixel. Text unboxed using Dev tools, you can check how the shape you’ve designed for your text behaves. See Aga’s example of this
at aganaplocha.com/netmag/shape-outside
This is why it’s recommended that you
use masks when you actually want the
partial transparency effect; if you want layouts richer and less boxy. It can all be be defined, otherwise it doesn’t work.
to have crisp edges, it’s best to use the achieved by applying shape-outside and For the shape you can go with the circle(),
clip paths. Currently, CSS masking and shape-inside properties that allow you to polygon(), inset(), ellipse(), and another
clipping are supported by most browsers, wrap your content around custom paths possible value is the url() function.
unfortunately this excludes Internet in CSS. So how does it work? Simply apply In this case, the url() function enables
Explorer, Edge and Opera. this piece of code the shape-outside property to define an
element shape based on the image. You
Rectangular is boring! shape-outside: circle(50%); /* content will flow might choose to use the url() function
Shape outside and shape inside to the around the circle*/ instead of the polygon() when you have a
rescue! Who said that text containers particularly sophisticated graphic with
always need to be rectangular? Content to the given floated image or container. many curves and points, and you want
can be cut into all sorts of different It is important to note that the float the content to wrap around it smoothly.
shapes. Let’s step out of the box, literally, property and the dimensions of the If you’d like to create more room between
and discover new forms making our page element – height and width - have to your element and the content, use the

june 2017 73
FeatureS Make magic with CSS
Essential
cSS resources
Here are some examples, prepared
especially for this article, which use the
mentioned CSS features. If you are ready
to throw yourself into some creative
CSS work, visit these links for some
inspiration.
Examples of the cSS properties
based on the article
aganaplocha.com/netmag
I prepared a couple of examples, using all
these cool CSS properties, to present how
they can be combined to achieve a collage-
like style on the web.
colofilter.css
lukyvj.github.io/colofilter.css
Easy to use, lightweight library with
colourful, duotone CSS filters. Let’s add a
pop of colour to your website!
creating non-rectangular layouts
with cSS shapes
sarasoueidan.com/blog/css-shapes
As always, Sara perfectly explains how
to use CSS shapes as well as addressing
some of the challenges that you might
face. A must read!
Jen Simmons lab
labs.jensimmons.com
Jen presents the latest CSS properties and
uses them in practical ways. If you want
to see how the hexagon layout is created,
visit this site.
Animated clipped Elements in SVg
www.smashingmagazine.com/2015/12/
animating-clipped-elements-svg
Even if it sounds complicated, you have to
check it out. Create delightful animations
with SVG.
74 june 2017
Manipulating SVg this animated slideshow is from Aga’s presentation at CSSconf Nordic, and was totally created in htML
and SVG. Visit aganaplocha.com/cssconf-oslo/#/41} to see it move
shape-margin property, which will act just
like a margin. Shape functions can be
animated, but only for defined polygons;
url() function unfortunately is not able to
be animated.
The painful part is that browser
support for shape-outside is limited
to Chrome and Safari only. Keep
your fingers crossed for its fast
implementation in other browsers.
Don’t forget about SVg
To be honest, I cannot imagine today’s
web without SVG (Scalable Vector
Graphics). Its name speaks for itself
- it scales, so it answers all concerns
regarding Responsive Web Design. The
SVG graphic will be crisp no matter the
screen resolution of the device it’s viewed
on. In this era of thousands of devices, it
is very important to pay attention to the
quality of rendered graphics.
Aside from scalability, there is another
feature that should encourage you to play
with it. The ability to manipulate SVG
with CSS – exciting right? If you have
never tried dabbling in CSS animations
and SVG code, you must try it now – it’s
unbelievable how fast you can achieve
amazing effects, levelling up your design.
You may think that in some cases it’s
easier to use raster images, however,
SVG has one big advantage over ordinary
images. Words included in SVG are kept in
the <text> tag and so remain text. What
are the benefits? It will be searchable,
If you have never
tried dabbling in
CSS animations
and SVG code, you
must try it now
selectable and accessible. We will also
be able to change it directly in the code.
Nevertheless, in such a case we have to
remember to embed the font face to be
sure that the font will be rendered.
Animating SVG with CSS is like
animating any other element in HTML
– it can be done with transitions,
transforms and keyframe animations.
Once you’re familiar with the SVG code,
the rest is straightforward and very
intuitive, because you basically do it just
like you would in HTML.
I would say that the coolest thing
about SVG is the possibility of grabbing
whatever part you want from it, even
a very specific fragment, and then
being able to make it come alive with
CSS animations. Thanks to this we can
create some very interesting dynamic
effects, not necessarily using JavaScript.
SVG has its own DOM API, so as a
matter of fact the whole SVG code can
be easily inspected using Dev Tools,
which I strongly recommend using while
exploring this topic.

@supports - this gives CSS the ability to perform a feature query
Make some noise –
distortion is welcome
The 1980s and 1990s are back! Glitch
- the aesthetics of chaos, noise and
jamming – is fast becoming a popular
design trend this year. The celebration
of glitches, failures and errors can be
seen on the web as well. If you’d like to
play a little with perspective and be more
visually chaotic, this is easily achievable
by transforming and skewing your site’s
elements. The perfect example of how
you can do it in CSS only can be found on
Anon’s Codepen, which presents skewed,
animated text (codepen.io/anon/pen/
BpObKj?editors=0100).
Make magic with CSS
transform: skew(60deg, -30deg) scaleY(.66667);
One line of code does the magic.
Remember to use
@supports statement
If you feel held back when you want to
use CSS properties that you suspect are
not supported by all browsers, @supports
rule is there to help you. @supports
allows you to check the browser support
for CSS property:value pairs. The code
that is included in the @supports block
will be rendered only if these conditions
are true, otherwise the code has not been
read by the browser.
Skewed text this
effect is very easy
to code, and adds a
strong visual accent to a
website. See this design
at tennentbrown.co.nz
In a case where the browser doesn’t
understand @supports, it doesn’t
generate a given part of the code either.
@supports (mix-blend-mode: overlay) {
.example {
mix-blend-mode: overlay;
}
}
In conclusion
Combining features such as blending
modes, masking, clipping, CSS shapes
and SVG’s powers gives us a great set of
tools, enabling us to boost our creativity
and break the norm of boring layouts.
This gives us an opportunity to create
a web version of things we currently
see in print, giving us a great source of
inspiration, while we’re waiting for CSS
Exclusions, currently supported only
in Internet Explorer and Edge, to be
implemented in other browsers.
Although some properties may still
experience problems with browsers’
compatibility, don’t hesitate to play with
them. Although your browser support
may be limited now, this will likely not be
the case in the future. It is just a matter
of time. If you would like to ensure these
effects only load on browsers that can
render them, use the @supports rule to
wrap the styles. Creative coding!
june 2017 75
FeatureS Design for offline

76 june 2017
 Design for offline

DESIGN FOR

OFFLINE
Y
Our most ou know the moment. You’re on
Author
the train attempting to open an
consequential work article you were reading earlier
Steven trevathan
Steven (@strevat) is
that morning but didn’t get the
comes through chance to finish. You’ve loaded it once
a software designer,
entrepreneur and
treating context, before, and you even have two bars of artist working on high-
performance software
service. However, it just won’t open. Your
motivation and their phone thinks it is online, but really it is
out of Washington, DC
steventrevathan.com
respective futures not. You are offline.
What you’re experiencing, day in and
with paramount day out in a variety of ways, is a problem
that we have all accepted as the standard IlluStrAtor
importance. Steven yet haven’t seen for what it truly is: MarcuS Faint
Trevathan explains a fundamentally flawed experience. Marcus (@MJFainty)
Regardless of whether you’re a maker or a is a graphic designer
how Offline First consumer of tech, we don’t expect things running MJ Faint Design
Co. in Bath. he also
to work offline, and decades of requiring
forces the next constant internet connection has set
works as an Art Editor
on a national film and
evolutionary step in us up to be blind to this issue. As such, television publication
supporting offline experiences requires mjfaintdesign.co
good design attention to be paid to the negative
space, which is somewhere we didn’t
really know to look until Alex Feyerke
introduced us to the concept of Offline
First (alistapart.com/article/offline-first) a
little more than three years ago.
However obvious it may seem, it’s
worth establishing what we mean

june 2017 77
FeatureS Design for offline

when we speak of ‘offline’ before

describing what Offline First is. Offline
is any scenario in which a user seeks
information or functionality while being
unable to access a supportive outside
network. This may be experienced due
to low bandwidth, a lack of internet
connection, server outages, or countless
other reasons.
At first glance it may seem like
designing for offline is as simple as
communicating to users that they cannot
access the app or that any new data they
enter will be lost, but this approach
falls far short of what is possible with
today’s technology. Instead, we should
look at this as an opportunity to create
a ‘deployed’ application that is as close Pokedex You can use advanced search, explore by type, weakness and ability all offline
to fully functional offline as it is online;

blending the experiential line between
native and web apps.
The Offline First methodology aims
to be deliberate about these experiences
by treating them as more than a patch.
It views offline state as an issue of
accessibility, and accessibility as the
centre of the product. It combines what
we’ve learned from the Mobile First and
Responsive Design movements, with
heavy emphasis placed on designing
for the most constrained environments
(offline) first and treating connectivity as
a progressive enhancement.
Fast-forwarding three years from
Alex’s insightful article, we now have an
offline-enabled Pokedex (www.pokedex.
org), an open source tool for hospitals of
the developing world with HospitalRun
(hospitalrun.io), Offline Gmail (support.
google.com/mail/answer/1306849?hl=en),
and even browser games like 2048
(gabrielecirulli.github.io/2048) that can
function entirely without connectivity.
Developers have proven the concept and
are now managing to deliver real-life
value with it.
complete understanding With non-digital objects it’s
easy to differentiate between various on and off
There’s a foundation
taking form for
what Offline First
apps can be
This is awesome, but unfortunately
with these type of things there is always
a catch. Offline UX patterns maintain
ambiguity and often open up more
existential questions than we started
off with. The question of what we are
able to (and should) do with regard to
offline state never seems to enjoy a
succinct answer, and the huge diversity
of internet-based software we’re tasked
to design certainly doesn’t make the
work any easier. That’s not to say that
there hasn’t been some interesting
developments in the field, though, and
there’s a foundation taking form for what
Offline First apps can be.
With most non-digital products that
aim to improve our quality of life, we
have an unspoken and true-to-form
understanding of the full system state.
We can visibly see that the desk lamp
is on, or that a desk drawer is open. We
can smell the cookies that are being
baked or feel the warmth of the oven as
it operates. If we didn’t sense state with
some of these objects, there could be
real-world consequences.
Good design Job stories help us to discover good design,
essential when it comes to offline use
With software, such indicators of state
that naturally register with our senses
don’t come with the territory. State is
manual and challenging to articulate,
and to express it well we must pay
proper attention to the environment the
product is used in (or the unpredictability
therein), and work with design patterns
our users comfortably understand (or can
easily come to rely on).
Good design is just as much about
context and reliability as it is about the
ease and pleasure of its use. Achieving
the proper design begins with an
understanding of the context and
motivations of our users. Luckily, when
thinking about offline experiences,
we’re already in the right frame of mind.
We’ve started with a complete lack of
connectivity as our context and will
attempt to provide value under these
conditions. To do so, we’ll need to see
more of the picture, however. Our users
could be offline and:

78 june 2017

case study:
Square’s register app
Square’s design team does an incredible job
with the offline experience of their point
of sale app, Register. And this is because
they have to; the ease of setup and use of
their software has landed it in the hands of
almost everyone from coffee shop vendors to
individuals selling products at fairs.
With such a diverse and mobile user base,
it would be challenging for the developers
and designers to define all contexts of use.
However, there is one partial context that is
easy to spot for its incredibly inhibitive nature:
offline. In yesterday’s world, a customer of
Perfect ui use this handy interaction model to help when
designing offline experiences
Digital till Square’s register communicates terms and
things to expect while using their offline solution
Register might not blame the software for their
own lack of connectivity. They might instead
blame the device they’re on or the Wi-Fi
coverage of the facility. But for Register, this
isn’t an adequate answer, as by not supporting
offline they harm customer satisfaction and
potential revenue.
● Recording patient medical data when
out in the field
● Reading while riding the metro to work
● Trying to upload a photo to social
media while on vacation in the desert
(and fighting off a hyena)
The next – and often more challenging
- steps are to gain an understanding of
what the motivations for each use are,
then to couple those motivations with
the contexts we’ve outlined. From there
we can choose from those couplings the
ones that will most benefit from our
attention in design. Having a grasp on
the crossover between motivation and
context allows us to understand and serve
our customers better, but can also provide
answers to broader product questions.
We can then record the context and
motivations in the form of a job story
(jtbd.info/replacing-the-user-story-with-
the-job-story-af7cdee10c27#.cs45pkc52),
a form of user story that centres around
context and motivation. For a pharmacist
whose prescription fulfilment system
depends on the internet, we could write
either of the following job stories:
● When a customer wants to buy
something and I’m offline, I want to be
able to collect payment anyway, so that
communication Instagram is a great example of an app
that clearly communicates its offline state
Design for offline
With attention paid to their core interactions,
Register doesn’t force their users to go
anywhere they wouldn’t expect to enable
offline payments. Instead, the users will
attempt to make their sale as usual, and
Register alerts them to their state and provides
an agreeable means to continue conducting
business. Imagine an illustrator selling her
comics at Comic-Con, which is being held in
the basement of a large convention centre
with limited internet access through a crowded
router. When few of her potential patrons
carry cash, her inability to accept credit cards
due to connectivity would bulldoze her sales
ambitions. Thankfully, Register remedies this
and is there for her when it counts.
we may be able to continue to serve
customers the medicines they need.
● When I’m offline and I’ve marked a
customer’s prescription as having
been fulfilled, I want to know that
the system will perform this function
when it has reconnected, so that I don’t
have to repeat my actions and record
fulfilment elsewhere.
These stories are each meant to be a brief
detailed objective that frames exploration
of design and product teams. They guide
our discovery of a proper design, and
serve well when designing for offline
experiences. With an appropriate sense of
context and motivation, it should become
easier to judge what interactions and UI
will be effective for our users.
When we’re ready to work on our
offline UI, whether starting from scratch
or improving upon an existing product, it
is wise to be mindful of our product’s core
interaction(s). This interaction (or group
of interactions) is what our users do to
repeatedly get value out of our software.
Where possible, we should use this
interaction model to help communicate
offline state.
For example, Instagram’s core
interactions might be scrolling through
lists of content as well as creating and
manipulating it. When we are offline,
we’re able to interact as we do online,
allowing us to go as far as we can
june 2017 79
FeatureS Design for offline
Must-read resources
The Offline First movement is
underway. We’ve already seen growth
in the community effort through
events like Offline Camp and the
tremendous support of giants such
as IBM, Google, Microsoft and more.
There is much more to be done,
however. Whether you’re getting up
to speed or want to contribute, these
resources exist to help you in building,
sharing, and discussing your work in
Offline First:
Offline First
(offlinefirst.org)
The home base for everything to do
with Offline First.
Offline First Slack team
(offlinefirst.org/chat)
Discussions ranging from design
patterns to service workers. All
experience levels and backgrounds
are encouraged to join.
Offline First newsletter
(http://offlinefirst.org/news)
The latest Offline First developments
from across the web.
Offline camp
(http://offlinefirst.org/camp)
The one-and-only offline
“unconference.” Many upcoming
events to be announced, so be sure to
check the website and follow
@offlinecamp on Twitter for updates.
Offline camp Medium
(https://medium.com/offline-camp)
Offline Camp publication featuring
session recaps, videos and reflections
from each camp.
improved thinking
Designing for offline
requires a new way
of thinking
80 june 2017
without running into roadblocks of
functionality. When attempting to
save, the app places the content in an
unobtrusive “waiting” state that is using
an existing feedback mechanism to
communicate to users that it hasn’t yet
been uploaded.
While it may seem obvious at times,
noting our core interactions is a
useful practice in helping us maintain
continuity in how customers expect to
interact with our app. The additional
benefit is that we can reuse UI where
they’re already looking for clues of cause
and effect.
While not all breeds of software
products can deliver their entire
functionality when they’re offline, they
can provide partial value or clues that it
existed to begin with. The bottom line
is that they must clearly communicate
state. Instagram and Slack are great
examples of apps delivering as much
value as they can up to their reasonable
limits while also unobtrusively
communicating state.
Not all applications are the same,
of course, so design patterns for these
situations will largely depend on who
you’re trying to serve, where they are
and what they need to do. There are
some common clues related to offline
experiences, however, that Jesse Beach
has excellently outlined (medium.com/@
jessebeach/my-biggest-takeaway-from-the-
second-offline-camp-in-santa-margarita-
ca-d0dd930cd02b#.2vhy76l1l). They are
reach, freshness and reliability (Jesse
refers to this as assurance).
Reach is about communicating how
far users may explore in our application
while offline. To use a video game
analogy, if our users are bound to a single
linear path, we don’t necessarily want
it to appear as though they’re operating
in an open world. The result of doing so
could mean a lot of wasted time on dead-
end paths on a quest to unreachable or
non-existent areas.
If state isn’t well communicated here, it
can become difficult to know if that area
is purposefully inaccessible or if there is
a bug in the system. So, we can improve
our user experience by establishing
clear boundaries when they are in an
offline state. Those boundaries should be
composed of reachable and unreachable
content or actions.
The visual indication of something
that is reachable or unreachable will
vary by product. For instance, an
eCommerce site may fade out products
that are not reachable when offline, but
in applications comprised of content
feeds - such as Twitter - the interaction
to load more content has no static visual
affordance, so there is a need to find a
different solution for communicating
reach in this circumstance.
Instagram’s approach to this is to use
their intercom UI pattern to alert users to
their lack of connectivity. The application

Offline indicators Instagram alerts users to a lack of
connectivity so the you’re always aware of what’s going on
provides users with a means to attempt
to load more content, but is consistent
with its feedback for why it was unable to
perform the request.
While reach helps users understand
what can be done, freshness lets them
assess whether or not an action is worth
their time. It might be represented as a
date on a news article, a timestamp for
the last time a currency converter rate
was updated (developers.google.com/web/
fundamentals/instant-and-offline/offline-
ux), a last-edited date for a collaborative
document, or perhaps when a photo was
last viewed. For example, if the weather
forecast was last downloaded just three
minutes ago, users may as well spend
the next two minutes putting on their
rain boots, rather than waiting for a new
forecast to download.
The combination of these clues helps
our users breeze through our application
with greater contextual awareness
and agility. In the cases where offline
state forms an impenetrable barrier
for an action (such as saving edits to a
collaborative document), the combination
user experience linkedIn is another example of an
app that provides good context awareness
Design patterns for
these situations will
largely depend on who
you’re trying to serve
of clues of reach and freshness deliver a
sense of reliability.
When one attempts to upload a photo
to Instagram without connectivity, the
photo and work they’ve done to it isn’t
destroyed due to an inability to send it
to the server. Instead, Instagram saves
the photo to their device and persists UI
for retrying that upload until the user
decides they don’t want to anymore. This
is an example that treats offline clues of
reliability very well.
What we want to achieve in
communicating reliability is simple:
make it clear whether or not data users
are concerned with is their responsibility
when they’re offline. We need to
immediately answer their questions
Design for offline
uploads No data is lost when Instagram loses connection,
and the app will keep trying to post until you tell it not to
of whether or not data syncs
automatically when they reconnect,
whether further action to sync is
required, or whether any progress will
be destroyed. A good rule of thumb is to
allow users to go as far as possible while
reliably preserving data locally until
connectivity is restored.
With a process focused on context,
motivations and accessibility combined
with an awareness of reach, freshness
and reliability clues, the designer
improves much more than simply the
offline experience. It won’t be simple,
but in the process they’ll have created an
accessible, fast and easy-to-use product
from the start. This is the promise of
designing Offline First.
june 2017 81
 LEARN TO INSPIRE
www.dphotographer.co.uk

E • FREE
SU
Available
VERY IS

RE

from all good

SOURC

newsagents and
supermarkets
DE

E
DO LOA
WN
ON SALE NOW
> Sharper shots > Backlit portraits > Beyond the golden hour
LANDSCAPE TIPS SHOOTING ADVICE WILDLIFE PHOTOS PORTRAIT GUIDES CAMERA REVIEWS

BUY YOUR ISSUE TODAY

Print edition available at www.imaginesubs.co.uk
Digital edition available at www.greatdigitalmags.com
Available on the following platforms

facebook.com/DigitalPhotographerUK twitter.com/DPhotographer
 Tips, tricks
& techniques

This monTh FeaTuring...

97

HEAD-TO-HEAD:
IONIC 2 VS REACT NATIVE 97

PSyCHOLOGICAL PERFORMANCE
OptimisatiOn (ppO) 98

WEB STANDARDS:
PERSONAL COMPUTING 103
84
REMyFICATION: MAKING
MINIFICATION EASy 104

WHAT’S NEW IN ANGULAR 4.0.0? 84

108

CREATE AND ANIMATE

92 SVG POLyGONS 108

ACCESSIBILITy: DESIGNING FOR

USE FOUNDATION TO BUILD A CARD-BASED UI 92 COLOUR BLIND USERS 114
PROJECTS Angular

A b o u t t he A u t h o r
Juri
S t rump fl ohner
w: https://juristr.com
t: @juristr
job: Software architect,
meetup organiser, author
areas of expertise:
JavaScript, Angular, .Net,
Software architecture

AngulAr

What’s neW in angular

version 4.0.0?
Juri Strumpflohner walks through the latest release of Angular, and
explains why there is no version 3, the huge performance optimisations
and the exciting news around the official Angular CLI

AngularJS has been around now for about six
years and has gained tremendous popularity
among frontend developers. It’s easy to set up, easy
to use, powerful data binding but at the same time it
has also aged, which made it hard for it to keep pace
with new emerging web technology. That’s why the
Angular team announced what they called Angular 2.
“It’s going to be a complete rewrite of AngularJS,”
“built for the future,” “no more controllers, but
component oriented and multi platform”. These were
some of the predictions from the Angular team
during the official announcement. Meanwhile, about
two years later, in September 2016, Angular 2 was
finally released and has successfully met many of
those promises. But wait? It’s only half a year later
now and we’re already talking about the new features
of Angular version 4. Exactly! But let’s go step-by-
step and uncover what Angular version 4 is all about.
The new features, improvements and most
importantly, why there is no Angular version 3.
It’s just AngulAr
Why no Angular 3? There are a couple of reasons for
this. In October 2016 the Angular team announced
their move to use Semantic Versioning (semver.org).
As the name already explains, semantic versioning
is all about adding meaning to version numbers. This
allows us developers to not only reason about any
upgrade, but to even let tools such as NPM do the
upgrade in an automatic and safe manner.

84 june 2017
 Angular

Focus on

under the hood

Credit: juristr.com
What does it mean? Explanation of a semantic version number and the according semantic
source maps for templates
meaning of each number We’ve heard that the AOT compiler converts our HTML templates
into highly optimised JavaScript code. Thus, plain standard source
maps won’t help much when it comes to debug our templates.
A semantic version consists of three numbers. Therefore in version 4 source maps are generated based on the
Whenever you fix a bug and release it you increase original templates in order to be able to better reason about the
the last number; if a new feature is added you generated code.
increase the second number and whenever you
release a breaking change you increase the first new packaging format
number. A breaking change happens whenever you The Angular package is now distributed over NPM as a flat
as a developer and consumer of a library have to step ECMAScript module. When you install @angular/core there will be
in and adjust your code after a version upgrade. a single core.js file which contains all the necessary source files
The Angular team takes semantic versioning concatenated as a single ECMAScript module (example file). This
very seriously. For example, giving a compiler error helps current web tooling, allowing for better tree shaking, faster
compilation and even faster loading in browsers.

As the Angular platform Further, currently still experimental optimisations have

shipped, such as exporting all modules as flat ES2015 modules,

evolves and gets more to which developers can opt-in by adding the ES2015 property
in the package.json. Also, the distributed bundles now contain
feature rich, breaking annotations for Google’s Closure compiler, an advanced JavaScript
compiler which is known for producing small and highly optimised
changes are inevitable bundles. We can definitely expect even better results from that in
the future.
for existing application bugs that went unnoticed
with the previous compiler version. Anything that Deprecated
will break an existing application when upgrading <template> now <ng-template>. The previously known <template>
Angular requires the team to bump the major tag has been renamed as it caused confusion with the browser’s
version number. native template tag. You should now use <ng-template>.
As the Angular platform evolves and gets more
feature rich, breaking changes are inevitable and will new or simplified
definitely occur. However, this doesn’t mean they _New:_
will arrive every other week. Titlecase pipe: {{ ‘juri strumpflohner’ | titlecase }} displays “Juri
The Angular team are committed to time-based Strumpflohner”.
releases that occur in three major cycles: patch
releases every week; three monthly minor releases New Email validator: A new email validator helps dealing with email
after each major release, and a major release addresses in forms.
with easy-to-migrate-over breaking changes
every six months. _Simplified:_
But breaking changes don’t have to be painful. Adding querystring params to http requests: This has been hugely
Moving from Angular version 2 to Angular version simplified and is now as easy as: http.get(‘/api/people’, { params: {
4 to Angular version 5 won’t be the same as moving onlyadults: ‘true’ } }
from AngularJS 1.x to Angular 2. These breaking
changes are not major rewrites, but could be as ParamMap now helps extracting router params: const id = this.
simple as a minor change in the core libraries route.snapshot.paramMap.get(‘personId’);`
which might perhaps break some code, but doesn’t
necessarily have to. Obviously there will also be

june 2017 85
PROJECTS Angular
deprecation phases which allow developers to adjust
their codebase accordingly and the team is currently
even evaluating the introduction of an LTS version.
Given this release schedule, continuing to use
Angular 2 as the name of the framework wouldn’t
make any sense. Thus, from now on following
the official branding guidelines (netm.ag/angular-
guidelines-293), Angular 2 is just called Angular
and Angular 1.x is called AngularJS. The explicit
version number should not be used, except when it is
indispensable such as for instance in situations like
‘this feature has been introduced in Angular 4.0.0’.
There’s probably a last curiosity you’re still
wondering about: why not Angular version 3.0.0?
This has a very practical reason. The core team
behind Angular releases the framework as a set of
different NPM packages. This makes Angular more
modular and allows developers to just include those
parts that are actually required in their applications.
From a codebase perspective however, all of these
packages are being developed in a single GitHub
repository (a so-called mono-repo). As such, for
convenience reasons, the Angular team versions
all packages with the exact same version number,
except for the router package.
The reason is that the router has been rewritten
three times before its final version and as a
consequence its package has already got to version 3.
In order to again align all the packages, the team has
decided therefore to skip version 3 and directly opt
for version 4.
smAller AnD FAster
The size of the final bundle is of major importance
in web development. This gets even more important
for a framework like Angular, which defines itself
as a platform meant to not only run on desktop
browsers but also on mobile devices. The production
bundle is the outcome of an Angular application or
JavaScript application in general. This gets deployed
on the production server and then delivered to your
user’s browser.
Compiling a JavaScript application for production
usually involves several optimisation steps such
as concatenating (ie bundling) multiple files into
a single or more output files and to minimise the
resulting JavaScript code as much as possible by
removing whitespaces and by rewriting variables
(names etc). The latest improvements around
ECMAScript 2015 (ES2015) now allows for even better
strategies such as removing unused code parts, also
known as tree shaking.
Angular has introduced a further concept called
Ahead of Time compilation (AoT). An Angular
application is composed of a series of components
86 june 2017
Credit: juristr.com
Different packages The misalignment between the different Angular
packages managed by the core team at Google
with their related HTML templates. These templates
have very Angular-specific instructions, called
template expressions.
<!-- person-detail.component.html -->
<div>
<label>Name:</label> {{ person.name }}
<label>Surname:</label> {{ person.surname }}
<div *ngIf=”person.address”>
<label>Street:</label> {{ person.address.street }}
<label>City:</label> {{ person.address.city }}
</div>
</div>
When you run your Angular application in
development mode, the Just-in-Time compiler (JIT)
takes these templates, interprets them and generates
the resulting HTML code.
Obviously, this has a negative impact not only
on the speed of your application, but also on the
size of the shipped bundle, because the entire JIT
compiler has to be downloaded together with
your application code to the user’s browser. We
definitely don’t want to ship our application to
production like this.
As a solution, the Angular team has introduced the
AoT compiler. This compiler is executed during build
time as another step besides your code minification
and bundling processes. The AoT compiler statically
analyses your Angular application, its templates, the
components and the dependencies between different
Angular modules.
Having this contextual information, it is able
to generate pure JavaScript instructions out of
the application’s templates. This means that the
HTML code you write in your component templates
completely disappears and is rewritten as optimised
JavaScript code as shown in the following excerpt
based on our previous template example:
Credit: Wassim Chegham: “Demystifying
AoT compilation in Angular”, NG-NL 2017
Angular

less than half The JIT compiler makes up 44.8%

Before: visualisation of the size of the different components of a simple Angular

application compiled with Angular version
const parentRenderNode:any = this.renderer.
createViewRoot(this.parentElement);
...
this._el_3 = import3.createRenderElement(this.
renderer,this._el_1,’label’,import3.EMPTY_INLINE_
ARRAY,(null as any));
this._text_4 = this.renderer.createText(this._el_3,’Name:’,(null
as any));
this._text_5 = this.renderer.createText(this._el_1,’’,(null as

2x Credit: Angular core team

any));
this._el_6 = import3.createRenderElement(this.
renderer,this._el_1,’label’,import3.EMPTY_INLINE_
ARRAY,(null as any));
this._text_7 = this.renderer.createText(this._
el_6,’Surname:’,(null as any));
optimisation results After visualisation of the size of the different components of a simple Angular
application compiled with the shipped ViewEngine optimisations in Angular version 4.0.0
Angular version 4.0.0 ships with a hugely improved
version of the ViewEngine, which allows the code
generation process to produce less code and thus to
reduce the bundle size even further. })
export class AppModule {}
AnImAtIons
To further optimise the size of the Angular core enhAnceD ngIF, ngFor
bundle, Angular animations have been moved into The ngIf directive gets a nice improvement in Angular
its own dedicated package under @angular/platform- 4. It’s been the target of many critiques even in
browser/animations. It’s opt-in now, and as a result AngularJS (v1.x) because of the lack of an else clause.
if you don’t import it in your application code the In order to simulate if-then-else blocks in Angular
tree-shaking step during the compilation process templates, developers had to use two ngIf directives
will make sure to not include the animations code with opposed boolean conditions.
in the final bundle. Instead, if you need animations,
simply import the package @angular/platform- <div *ngIf=”isLoggedIn()”>
browser/animations and reference the according Hi, {{ user.name }}
BrowserAnimationsModule. </div>
<div *ngIf=”!isLoggedIn()”>
import { BrowserAnimationsModule } from ‘@angular/ You’re not logged in.
platform-browser/animations’; </div>
@NgModule({
imports: [ BrowserAnimationsModule ], In Angular version 4 we now get an else instruction
as part of the ngIf directive. This can then transform

june 2017 87
PROJECTS Angular

the template on the previous page to

in-depth the following:

AngulAr Cli
<div *ngIf=”isLoggedIn(); else notLoggedIn”>
Hi, {{ user.name }}!
</div>
Just in time for the release of Angular version 4.0.0, the <ng-template #notLoggedIn>
Angular team also releases the first stable version of the You’re not logged in.
official CLI tool: v1.0.0. The Angular CLI is definitely the way to go </ng-template>
when working with Angular. It is our companion throughout the
whole development cycle, covering: But this is not the only addition to ngIf. It also has
better integration with Observables, as does ngFor.
● Generating a new project scaffold RxJS and Observables are already heavily being
● Generating Angular modules, components, services, pipes, used within Angular, even when it comes to
during development rendering async data into a template. When we
● Serving your application in development with an integrated execute an HTTP call with Angular, we get an
development server with live browser synchronisation Observable in return.
● Building your application including AoT compilation
● Creating test configurations for automated units as well as import { Component } from ‘@angular/core’;
end-2-end level tests import { Http } from ‘@angular/http’;
import { Observable } from ‘rxjs/Observable’;
By using the CLI to generate our initial project scaffold as well as import ‘rxjs/add/operator/map’;
our components, modules and services while developing, we make
sure to comply to the official Angular coding style guide. Moreover @Component({
we don’t have to be experts nowadays with JavaScript tooling as selector: ‘users-list’,
the CLI handles the configuration of TypeScript, test setup as well template: `
as code splitting strategies during the build process for us. <ul>
Also, by continuously getting new versions of the CLI, we get <li *ngFor=”let user of users”>
better, more optimised builds without having to change anything {{ user.username }}
by ourselves. Behind the scenes, the Angular CLI uses Webpack </li>
as its build tool. So if you’re an expert and need some more fine- </ul>
grained control over your build process, you now have an eject
button, using ng eject on your existing CLI generated project. })
This reveals the underlying Webpack configuration file, export class UsersListComponent {
allowing you to take full control. You can read more about the users;
CLI 1.0 release here: https://github.com/angular/angular-cli/wiki/
stories-1.0-update. constructor(private http: Http) { }

ngOnInit() {
this.http
Credit: Stephen Fluin, Angular core team

.get(‘/api/users’)
.map(res => res.json())
.subscribe((data) => {
this.users = data;
});
}
}

In this example, we use the Observable’s subscribe

Xxx Files scaffolded by the Angular CLI. This illustrates how much of the work is
done by the CLI under the hood
function to register a callback for when the data is
retrieved from our backend API. Once we have the
data we assign it to a local variable of our component,
users, which in turn is data-bound on the ngFor in our
template. The async pipe, which is already present in
Angular 2, lets us write this in a more elegant way:

88 june 2017
 Angular

import { Component } from ‘@angular/core’; <ul>

import { Http } from ‘@angular/http’; <li *ngFor=”let user of users$ | async as users; index as
import { Observable } from ‘rxjs/Observable’; i”>
import ‘rxjs/add/operator/map’; {{ user.username }} ({{ i }} of {{ users.length }})
</li>
@Component({ </ul>
selector: ‘users-list’, `
template: ` })
<ul> export class UsersListComponent {
<li *ngFor=”let user of users$ | async”> users$;
{{ user.username }}
</li> constructor(private http: Http) { }
</ul>
ngOnInit() {
}) this.users$ = this.http
export class UsersListComponent { .get(‘/api/users’)
users$; .map(res => res.json());
}
constructor(private http: Http) { } }

ngOnInit() {
this.users$ = this.http
.get(‘/api/users’)
.map(res => res.json());
} like ..; let i = index.
} Using the as keyword also works with ngIf. Within
We can directly assign the returned Observable
to our users$ variable and bind it in our template.
The Async Pipe (.. users$ | async) handles the
subscription and un-subscription on the Observable
for us, which makes it really convenient for directly
binding asynchronous data in our templates.
Note, the $ suffix in our variable name is simply a
naming convention to communicate this variable
holds an Observable.
There’s one caveat though. We cannot easily access
the collection within our template. Consider, for
instance, if we wanted to enumerate the position of
the rendered user entry in the collection with respect
to the total number of entries. While in version 2 we
had to fallback to subscribing to the Observable in
the component class, Angular version 4 now gives us
the possibility to handle such a scenario by assigning
the async result from the Observable to a so-called
template variable of users$ | async as users.
Also note how we can assign the index of the for
loop using the as keyword which is a more readable
alternative, compared to the previous syntax in
Angular version 2 where we had to write something
the ngIf expression we can again directly use the
Observable and assign it to a template variable.
Hence, once the asynchronous call resolves, we can
render that data in our template.
import { Component } from ‘@angular/core’;
import { Http } from ‘@angular/http’;
import { Observable } from ‘rxjs/Observable’;
import ‘rxjs/add/operator/map’;
@Component({
selector: ‘users-login’,
template: `
<div *ngIf=”user$ | async as user”>
Hi, {{ user.name }}!
</div>
})
export class UserLoginComponent {
user$;

import { Component } from ‘@angular/core’; constructor(private http: Http) { }

import { Http } from ‘@angular/http’;
import { Observable } from ‘rxjs/Observable’; ngOnInit() {
import ‘rxjs/add/operator/map’; this.user$ = this.http
.get(‘/api/auth/currentuser’)
@Component({ .map(res => res.json());
selector: ‘users-list’, }
template: ` }

june 2017 89
PROJECTS Angular
Doing this with Angular version 2, we would have
had to use the so-called safe navigation operator.
@Component({
selector: ‘users-login’,
template: `
<div *ngIf=”(user$|async)”>
Hi, {{ (user$|async)?.name }}!
</div>
})
export class UserLoginComponent { ... }
However, while this doesn’t look so much more
complex to write, if you don’t pay attention on how to
correctly handle the user$ Observable, multiple HTTP
requests can be fired to your server which obviously
results in a performance degradation.
These two additions to the ngIf and ngFor directives
makes working with Observables directly within the
templates a lot easier and more convenient.
typescrIpt 2.1
Angular version 2 was developed using TypeScript
1.8. Therefore, the Angular team cannot benefit
from new features introduced in TypeScript 2 while
developing the framework, such as: readonly,
never, Object spread and rest operators, keyof and
lookup types, untyped imports and much more.
TypeScript 2 also comes with better type inference
which in turn helps the Angular compiler speed up
the compilation process. Another feature introduced
with TypeScript 2 is strict null checks. strictNullChecks
can be activated in TypeScript 2 by setting the
according flags in the tsconfig.json:
{ to interpret dynamically rendered JavaScript
“compilerOptions”: {
“strictNullChecks”: true,
“noImplicityAny”: false
} Universal, aims to solve this problem. It has been
} developed as a community project by Patrick
As a consequence, null and undefined values are
treated as separate types. Whenever you declare a
new variable, you have to explicitly allow it to be null
and/or undefined.
let address: string;
let name: string | null;
let age: number | null | undefined;
address = null; // TypeScript raises an error
name = null; // OK
90 june 2017
name = undefined; // Error
age = null; // OK
age = undefined; // OK
Enabling strictNullChecks is quite a rigid setting,
however, as you can imagine it helps produce
more high quality code. Unfortunately Angular
version 2 was not strictNullCheck safe and hence it
wasn’t possible to enable this setting in an Angular
application up to now. While the team wanted to
enable this for the Angular 4.0.0 release, a bug at the
last minute prevented them from releasing it just
now. But, it is scheduled to be released in version 4.1.
It is important to note that upgrading the
TypeScript version in Angular from 1.8 to 2.1 was one
of the reasons for the necessity of having a breaking
change. Existing users that have started using
Angular version 2 with TypeScript 1.8 and which then
upgrade to Angular version 4 (using TypeScript 2) will
get breaking errors. Their application’s may possibly
not compile due to TypeScript 2 features that are
unknown by TypeScript 1.8 of course. This is one of
the reasons the team is bumping the major version
of Angular. But again, this breaking change can be
fixed as easy as upgrading the version number of the
TypeScript library that is being used.
AngulAr unIversAl
While single page apps (SPAs) are highly interactive
compared to server-side rendered apps, they usually
suffer in their initial startup time. When the user
first loads an SPA the entire application has to be
downloaded to the browser. It has to be bootstrapped
and then further calls are usually made to retrieve
the raw JSON data from some backend APIs. Another
weak point is SEO (Search Engine Optimisation).
Search engines have only limited capabilities
applications and work much better by analysing
static, server-side generated HTML pages.
Server-side rendering, known as Angular
Stapleton and Jeff Whelpley. Given the importance
of the project and the community feedback, starting
with Angular version 4.0.0, Universal is now part
of the core framework. It can now be found under
the @angular/platform-server package. At a high level,
Universal consists of two main parts:
● Server-side renderer which is responsible for
generating the HTML for a page at a given route
● Transitioning from the server view to the client
view in the browser
 Angular

The server-side rendering takes care of

bootstrapping the Angular module on the server. It
automatically patches all browser specific APIs and
replaces them with according server-side Node.js
calls. However, server-side rendering is not given
out-of-the-box but needs to be enabled specifically.
This is done by creating a server-specific counterpart
of the app.module.ts, usually named app.server.module.
ts, which imports the Universal package @angular/
platform-server as well as the AppComponent and
AppModule.

// app.server.module.ts
import { NgModule } from ‘@angular/core’;
import { ServerModule } from ‘@angular/platform-server’;
import { AppComponent, AppModule } from ‘./app’;

@NgModule({
imports: [ Build process The Ahead-of-Time(AoT) compilation is a key feature of Angular. It brings with it better
ServerModule, performance and a small payload size
AppModule
],
bootstrap: [ AppComponent ], appId: ‘universal-demo-app’
providers: [ ] }),
}) ...
export class AppServerModule {} ],
declarations: [ AppComponent ],
The Universal package exposes a renderModuleFactory bootstrap: [ AppComponent ]
function to bootstrap the Angular Server Module. It })
takes the according Angular server module (app.server. export class AppModule {}
module.ts) as well as options such as the index.html
file and request URL. Currently Angular server-side rendering is powered
by Node.js, which is the obvious choice for running
import {renderModuleFactory} from ‘@angular/platform- JavaScript on the server. There are adapters for the
server’; most popular Node.js frameworks such as Express
... and Hapi.js. Furthermore, community-based
renderModuleFactory(AppModuleFactory, { extensions to make Angular server-side rendering
document: indexHtml, work with ASP.net Core are available and extensions
url: req.url for Java and Python are planned.
})
.then(html => res.send(html)); FInAl thoughts
There are obviously a lot more features (and
When the server sends the pre-rendered HTML bugfixes) that go into the Angular version 4.0.0
application to the browser, the Angular application is release. To me, version 4 is a huge improvement
bootstrapped and needs to obviously account for the and makes Angular even more attractive. While
pre-rendered state that happened on the server. This only a few new noteworthy features have been
synchronisation is done by using the BrowserModule. added, the team really dedicated most of its energy
withServerTransition(..) function in the AppModule. to polishing the Angular platform after the first
major release about six months ago. This can be
import { BrowserModule } from ‘@angular/platform-browser’ seen by the major performance improvements, by
... integrating Universal into the core and by listening
@NgModule({ to the community feedback and aligning the CLI
imports: [ and by making it the official tool to be used when
BrowserModule.withServerTransition({ developing with Angular.

june 2017 91
PROJECTS Foundation

A b o u t t he A u t h o r
K e vin bAl l
w: zurb.com/about/profile/
kevin-ball
t: @kbal11
job: Foundation Lead
areas of expertise:
JavaScript, SCSS, Beer

FOUNDATION

USE FOUNDATION TO
BUILD A CARD-BASED UI
Foundation Lead Kevin Ball shows how you can build a card-based layout
and supercharge it with Flexbox using Foundation’s new cards component

Card-based layouts have taken over the web.
Made popular by Pinterest, Twitter, Facebook
and Google, cards have become a go-to design
pattern for many different use cases and it’s not hard
to see why. Cards work perfectly within responsive
web design. As self-contained units, they can be
moved, shuffled and mixed with different content
types. They also respond easily on different screen
sizes, from single columns on mobile devices to
multi-column on larger devices.
The ZURB team has used card-based layouts in
our design work for years. We’ve explored them
in websites and web apps in every industry from
finance to biotech and have always found them to be
a flexible part of a well-oiled design.
Foundation, the world’s most advanced frontend
framework, has always sought to equip web
designers with the tools they need to quickly build
and design responsive websites by including a wide
range of modular and flexible components.
Version 6.3 added to this collection of building
blocks with a brand new best-in-class off-canvas
implementation, responsive accordions/tabs, and a
powerful new card component.
In this tutorial we’ll be learning how to create a
responsive card-based UI that takes advantage of
Foundation’s Flexbox-based grid to open up a whole
slew of possibilities.
The first step is to set up a development
environment. For this tutorial, we’ll be using a node-

92 june 2017
 Foundation

based development environment, so you need to

install Node.js. The details to do this depend on your
environment, check https://nodejs.org/en/download/
package-manager. Once you have Node installed,
install the Foundation CLI using npm install -g
foundation-cli, which will make it easy to set up a new
Foundation project.
Let’s create a new project based on the ZURB
template. Run the command foundation new net-
magazine-tutorial, select ‘A website (Foundation for
Sites)’
, ‘net-magazine-tutorial’ and then ZURB
Template. This will set up a project template for us
based on Foundation, complete with build system
and development server.
The template comes with a sample page in src/
pages/index.html. For simplicity, we’ll remove that
sample and replace it with an empty <header>
</header> to start from scratch building out our card-
based UI. Run npm start from the command line to
FOCUS ON
SuperchArge
Your SKillS
To really up your frontend development skills, start thinking
about your website in terms of reusable components.
Separate out the code for those components into individual
partials for HTML, component files for CSS, and component files
for JavaScript. This will make it easier to think about things one at
a time, reduce the amount of work you do, and hand off between
different parts of your team.
Think mobile first. Start from the smallest possible screen size
and build up from there. Foundation helps you think about this by
having its sizing classes behave in a mobile-first manner, but the
core concept is framework independent.

The .card-section class Start from the core required content and progressively enhance
with more functionality and content as you get more screen real
defines an expandable estate. Cards are a great component for doing this, because they
work so well at all screen sizes.
content block, where If you possibly can, use Flexbox. You’ll have to be okay with

you might put content not supporting IE9, but if you can limit to IE10 and up, Flexbox
is a possibility, and it makes it easy to implement patterns that
have been challenging since the beginning of web development.
run the development server, and you should see a The learning curve is pretty quick, and we’ve found that adopting
bare HTML page ready for cards. Flexbox has sped up our frontend development by almost 50%!
Now it’s time to create our first card. For now, let’s
just put it straight inside a section with class .cards-
container. When creating a card using Foundation,
there are three core classes to be aware of: .card, .card-
section and .card-divider. For more advanced users each
of these corresponds to a SCSS mixin (card-container,
card-section and card-divider).
But, for this tutorial we will use the default classes
for simplicity. The .card class is the container; every
card will live within a .card. This defines things like
borders, shadows, and default colouring. The .card-
section class defines an expandable content block,
where you might put content, while the .card-divider
class defines a non-expanding block, such as a
footer, header or divider. Let’s use all of these classes
to create our first, basic card.

<header>
<div class=”row columns”>
<h3>Cards Are The Best</h3>
</div>
</header>
<section class=”cards-container”>
<div class=”card”>
<div class=”card-divider”>

june 2017 93
PROJECTS Foundation

<h4>Yeti Header</h4>
IN-DepTh </div>
<div class=”card-section”>

reSourceS
<img src=”https://foundation.zurb.com/sites/docs/assets/
img/yeti.svg”></img>
</div>
This tutorial takes you from zero to a great layout, but don’t <div class=”card-divider”>
stop there! Supercharge your card-based layout with some of <p>Yeti Footer</p>
the following resources. </div>
</div>
</section>

If we just do this, our card is huge, expanding to fill

the entire screen. We’re going to deal with overall
sizing shortly, but for now let’s use this as an excuse
to learn how to add component styles in the ZURB
template. Add a file _card.scss to src/assets/scss/
components/ specifying a max-width: 300px for .card and
include the file in our main css by adding @import
components/card; to src/assets/scss/app.scss.

In order to create a repeatable layout with multiple

Masonry.js cards, we’re going to want our cards to be reusable
http://masonry.desandro.com components that we can plug in over and over again.
A JavaScript library for great grid layouts. It works by placing The ZURB template that we’re using for this tutorial
elements in optimal position based on available vertical space. uses a templating language called Handlebars, which
includes the ability to create partials, or reusable
blocks of code. To move our card implementation into
a partial, simply cut and paste the .card component
we built into a file in src/partials, say src/partials/basic-
card.html. You can then include that content by simply
adding the line {{> basic-card}} in your index file.
We’ll cover different card types in a little bit, but
first let’s use our reusable basic-card to start creating
a larger, responsive layout for our cards. To do so,
we’re going to use a concept from Foundation
called the block grid. Foundation contains a few
different types of grids, but they all start from
the concept of rows and columns. A row creates a
Foundation cardpack horizontal block which can contain multiple vertical
https://github.com/zurb/cardpack columns. These basic building blocks make up the
The Foundation card pack gives you a great set of pre-built Flexbox core of almost all layouts.
cards to level up your card game. Block grids are a shorthand way to create
equally-sized columns and to allow yourself the
Foundation flex cards video lesson flexibility and freedom to add indefinite numbers of
https://www.youtube.com/watch?v=Du7rwO4y564 content and have it lay out nicely in equal columns.
Do you want more detail on Foundation’s cards? Check out this You simply add a class to the row and then add as
great video lesson. many column components as you like.
Foundation will lay them out for you neatly and
cleanly. Since we expect to have a very large and
changing number of cards, this is ideal for our
purposes. Let’s set this up quickly in a four-column
grid and add a few dozen cards. For now we’ll only
worry about large screens, so we’ll simply apply the
.large-up-4 class to the row.

94 june 2017

Header and footer A simple card with the Foundation Yeti on it, header and
footer created using the card-divider class
<section class=”cards-container”>
<div class=”row large-up-4”>
{{#repeat 24}}
<div class=”column”>
{{> basic-card}}
</div>
{{/repeat}}
</div>
</section>
Next, let’s consider what we want to happen on
different screen sizes. Foundation comes with
small, medium, and large breakpoints built in, so
we can simply apply a different block-grid class for
each breakpoint to shift things around. Let’s put
one card per row on mobile screens, and three per
row on tablet, by adding the classes .small-up-1 and
.medium-up-3 on the row. If we do this, and remove
the stopgap max-width property we put _card.scss.
We already have a beautifully responsive layout that
looks good on all screen sizes.
Now let’s diversify our set of cards, another type
is a pure edge-to-edge photo. Card sections and
card dividers contain padding by default, but to have
edge-to-edge content we can simply put the image
directly inside of the card. Let’s add this as a photo-
card.html partial in src/partials.
Foundation
Scalable layouts With
a simple block grid, we
<div class=”card”> already have a beautiful,
scalable layout for as many
<img src=”http://foundation.zurb.com/assets/img/ cards as we want to include
foundation-emails/inky-all-devices.svg” />
</div>
There are hundreds of possible ways we can put
together cards - for some inspiration, you can check
out the Foundation cardpack repository at https://
github.com/zurb/cardpack. But let’s move on to how we
manage layout when we have different-sized cards.
If you insert the photo-card partial into the layout
alternating with the basic-card as we did before, we
end up with a bit of a jagged experience because our
heights are different. This may be fine, or we may
want to adjust our layout to compensate.
For this tutorial, we’ll compensate by using
our favorite new CSS layout technique - Flexbox.
Foundation comes with a flexbox mode for its grid.
To enable it, you simply need to open src/assets/scss/
app.scss , comment out @include foundation-grid; and @
include foundation-float-classes; and uncomment @include
foundation-flex-grid; and @include foundation-flex-classes;
With the Flexbox classes enabled, it’s simple to get
our cards to be the same height. First, we can make
our columns flex parents by adding the .flex-container
class. This is a prototyping shortcut for adding the
display: flex; property to them. Once we do this, all of
the cards will become the same height, but since flex
child elements shrink by default, some of our cards
get kind of narrow. So to fix this issue we can simply
tell those elements to grow. This is done by either
targeting them with CSS and giving them flex-grow:
1; or for simplicity while prototyping, just by adding
the class .flex-child-grow. Once all of this has been
done all of our cards fill the columns and are nicely
the same height.
june 2017 95
 San FranciSco
9 June 2017

14 speakers, two tracks, one amazing day

TickeTS on sale now

www.generateconf.com

IonIc 2 vs React natIve
Dan Cork compares two of the leading frameworks for building native
A b o u t t he A u t h o r
mobile applications using web technologies
DA n Cork
w: dancork.co.uk
t: @dancork
job: CTO, Kick Interactive
areas of expertise:
UI development and
experience design
FAct File
IonIc 2
• AngularJS 2
• Cordova
• Latest version 2.3.0
React natIve
• ReactJS
• Cordova
• Latest version 0.42.3
alteRnatIve
Onsen UI may be worth
some consideration if
you’re looking for a little
more flexibility. It is
framework agnostic so
you can choose to work
with Angular, React or
even pure JavaScript
(onsen.io).
HeAd tO HeAd
iOnic 2
A lot has changed on the web in the four years since
Ionic’s inception. Devices are now much faster,
browser engines are much improved and Web APIs are
also more readily available than ever. Enter Ionic 2, a
polished SDK built on web languages with access to
native functionality.
FrAmewOrk
Like it’s predecessor, Ionic 2 is built around
AngularJS. With Angular 2 comes a whole host of
improvements including performance, tooling and
testing. Applications are now made up of components
and written in TypeScript, an ES6-like superset of
JavaScript, enabling more rapid development.
Ui cOmpOnents
Ionic 2 greatly builds upon the range of UI components
that were available in version 1. With improvements
to the existing components and new additions such
as toast popups, floating action buttons, badges and
slides, enabling a much deeper customisation and a
far more native feel.
dOcUmentAtiOn
The documentation is extensive with interactive
examples for iOS, Android and Windows. The barrier-
to-entry for beginners remains low: just install Ionic
from npm and fire up a new project using a template.
exAmples
Due to Ionic’s popularity, Google is awash with
examples and code snippets. Its website also contains
a showcase (showcase.ionicframework.com) of apps
that are live in the app stores of both iOS and Android,
including Untappd and Diesel.
Verdict
Neither framework appears to be better at present. Personally, I favour React for web
projects. It’s quick to set up and the UI is exceptional. For anyone looking to transition from
web to app development it would be the easiest step. React Native offers many possibilities
and it’s easy to see how you could create some incredible mobile experiences.
Head to head
reAct nAtiVe
Developed by Facebook, React is a flexible JavaScript
library whose popularity has soared over recent years.
With React Native the team has created a framework
for building real mobile apps, no different to those
written in Objective-C, Swift or Java, using JavaScript
and the core React library.
React Native lets us write React-based components
and applications in almost the same that way we
would for web. Everything is still written almost
entirely in JavaScript. If however you’d like to write
some native code, React Native is designed to
integrate seamlessly with it.
Like with the core library, the key selling point for
React Native is the UI. Though components are
written in JS, what ends up on the screen in 100 per
cent native UI. There are built-in components that map
to iOS and Android objects, inline styles to change the
look of the native UI and even support for flexbox!
The documentation is fairly comprehensive and
straightforward. For beginners, React Native may
prove daunting at first as there is still necessity at
times to step into Xcode and native codebases.
Due to React’s popularity, it’s fairly unsurprising that
adoption has been rapid (facebook.github.io/react-
native/showcase.html). Its GitHub repo (github.com/
facebook/react-native/tree/master/Examples/UIExplorer)
also demonstrates the views and modules available.
june 2017 97
PROJECTS
Web performance

A b o u t t he A u t h o r
Den y s
Mishunov
w: www. mishunov.me
t: @mishunov
job: Lead frontend
developer @ DigitalGarden
AS
areas of expertise:
UX, JavaScript

PPO

HOW WEB PErfOrmancE

IS PErcEIVED BY USErS
In this article, Denys Mishunov explores how the brain perceives
web performance and introduces us to Psychological Performance
Optimisation (PPO)
Before getting to the psychological part of
performance optimisation, let’s answer one
question, what is web performance? For the majority
of frontend developers the answer would include
something exciting like: 100-millisecond response
time, animations with 60 frames per second, loading
a page within one second and many other numbers.
Guess what? The world is a cruel place and
unfortunately not only web developers have access to
the web. It’s a public place that is also used by regular
users who seem to be forgotten in our definition of
performance. But what do they think about web
performance? Usually it’s fast or slow. “SpeedIndex
of this site isn’t as good as of that one. 280
milliseconds slower first paint is the reason, I guess,”
– said no user without DevTools ever. These diverging
views on performance come from the fact that time
can be observed from two points: objective and
subjective or psychological.
Objective is the time we can measure with a
stopwatch and is what we, developers, mean by
performance: seconds, milliseconds, etc. On the other
hand psychological time is the time as it’s perceived
by users. The reason why we should be looking at
psychological performance is that unless users
perceive the site as fast or faster, whatever we’ve done
to our performance optimisation matters very little.
We fail the main purpose of our optimisations.
Time percepTion in humans
Perception of time by humans is a complex process.
We can sense the flow of time, but the exact nature
of the mechanism by which this is done remains
unclear. The lack of a dedicated brain area for
temporal processing makes understanding the
process difficult. This does not mean we are out of
control. There is enough knowledge about it for the
purpose of performance optimisation. Let’s start
with the basic functional mechanism.
evenT in a nuTshell
Our memories about some period in time consist

98 june 2017
 Web performance

FOcus On

the Weber-Fechner
LAW
When we work with performance we have a couple of
questions to answer:

Waiting time Mental activity makes waiting barely noticeable. Lack of such ● What performance gain should we aim for?
activity during passive phase makes user notice the wait

● How far should we go in our optimisations before it’s

fine to stop?

Weber-Fechner Law in psychophysics explains how humans

perceive difference between two stimuli. Time is no exception to
this law and evidences from different studies suggest that for
short time intervals of up to 30 seconds, the minimal perceivable
difference between two durations should be around 20%. This is
how far you should go in your optimisations before most of your
users even notice the improvement.
Meanwhile, the very same 20% rule can be used for regression
allowance. If your new feature slows down an event (loading a
Time perception Sometimes there is a big difference between time, page, for example) by less than 20%, you do not need to postpone
measurable with a stopwatch and time as we perceive it
the launch: push it to production so that users could enjoy the new
feature while you find time to get performance parameters to their
of events. Try to remember your last vacation or previous level.
some special year. Probably, you don’t recall it as
a continuous process but rather as a set of events:
dinner with a loved one, trip to mountains, broken
leg. Maybe the last one is not so common and is
limited to only my memories but nevertheless,
you get the idea. The same happens on the web, all
interactions with a web application are defined by
events: loading a site, requesting a page, searching
information etc.
Almost all of such events can be split further into
smaller events or phases. For example, the event of
loading a page usually consists of the following
two phases:

● user is looking at the white screen

equal measures The rule of 20% can be used both for optimisation and for
● user starts consuming the information on regression allowance
the page

Here, the original event (fully loading requested

page) is not necessary over and might continue in the
background, considering some basic optimisations
are in action.
Phases during which our brain is triggered into
active state and is forced to output information
or process incoming one (typing, reading, etc)

june 2017 99
PROJECTS
Web performance
In-dePth
resources
To better understand the subject, here are some more
extensive resources.
arTicles and videos on Technical
aspecTs:
● deconstructing performance (https://vimeo.com/184659742)
talk by denys mishunov.
● critical rendering path (https://goo.gl/6nAXCN)
● True lies of optimistic user interfaces (https://goo.gl/mqMpwr)
● resource hints – What is preload, prefetch, and preconnect?
(https://goo.gl/rh1Sd4)
● rendering performance (https://goo.gl/pVoKaU)
● The prpl pattern (https://goo.gl/uoWM96)
● measure performance with the rail model
(https://goo.gl/smNG0e)
academic reading and research for
Those hardcore among us:
● subjective vs. objective time measures: a note on the
perception of time in consumer behaviour (https://goo.gl/OgfSoj)
● prospective and retrospective duration judgments: a meta-
analytic review (https://goo.gl/1uSx3z)
● attentional resources in timing: interference effects in
concurrent temporal and nontemporal working memory tasks
(https://goo.gl/0pyY4Z)
● a very interesting research to analyse speed perception:
speedperception: phase-1 results are public
(https://goo.gl/EsTP4A)
Books To dive even deeper:
● designing and engineering Time: The psychology of Time
perception in software (https://www.amazon.com/Designing-
Engineering-Time-Psychology-Perception/dp/0321509188)
● Time and human cognition: a life-span perspective
(https://goo.gl/mI9zhv)
● especially chapter 8: Judging the duration of time intervals:
a process of remembering segments of experience
(https://goo.gl/1U1n2a)
100 june 2017
are called active. On the other hand phases when
our brain is idling (looking at the white screen)
are called passive. Multiple research suggests
that people have a tendency to significantly (by
about 36%) overestimate passive durations while
underestimating active durations. Why so?
At any given moment our limited attentional
resources are divided between all the concurrent
tasks, including timing. As aforementioned, the
brain lacks a dedicated temporal processing area,
and to build our perception of time, it has to use
information from different sensors. During the
active phase of an event, mental activity drags
attentional resources off the temporal processing,
making users consider the wait as a shorter one or
not noticeable at all.
Passive phase is not defined only by brain idling.
Typical features of it are:
● Waste of time: the more valuable the customers’
time, the more negative their perception of those
that waste it.
● Boredom: this is the result of the idling state.
Boredom arises when an individual does not get
enough interesting information.
● Lack of control: users either have to wait for the
event to be over or cancel the event (close the
tab in our case). Lack of perceived control has a
significant, negative impact on human physical
and psychological well-being.
Due to these features, users’ complaints about
waiting, in most cases, are related exactly to the
passive phase. Let’s summarise:
● User’s interaction happens discretely: loading a
page, returning search results etc.
● Events, even remaining objectively unchanged,
can be split into active and passive phases.
● Active phase is well tolerated by users, does not
cause troubles and does not need to be treated
anyhow. Contrary to active, passive phase is the
core of the waiting problem and is the part that
should be addressed.
Using this knowledge let’s proceed to the basics of
psychological performance optimisation (PPO).
reducing perceived WaiTing Time
Here we should make an important note, changing
the objective duration of the event is not the aim
of PPO even though most of the techniques do
reduce objective durations. Instead, it’s all about
manipulating users perception of time.

So how do we make users perceive an event as a
shorter one without changing its objective duration?
Simply, within the time limits of an event, we should
reduce the harmless passive phase by increasing
the tolerable active one. We should either a) start
the active phase as soon as possible or b) keep users
in the active phase as long as possible. Once this
becomes clear, understanding a lot of performance
optimisation techniques and their purpose won’t be
a problem for you.
At first, it might look like an unusual view at
performance. But when it comes to the examples of
the PPO there is nothing new I could tell. As long as
you do performance optimisations, there is a high
chance you’re already using PPO even, possibly,
without realising it. The list of relevant techniques
includes but is not limited to:
● Critical rendering path optimisation (https://
goo.gl/6nAXCN): rendering the very first bits of
information on the screen as soon as possible. If
we speak events, this one is for loading a site or a
new page.
● Optimistic UI (https://goo.gl/mqMpwr):
update interface in response to user’s actions
optimistically, disturbing the user only if
something goes wrong. Optimistic UI is useful for
any type of non-critical action.
● Resource hints(https://goo.gl/ktsbtq): rather new
specification of special <link> instructions to
the browser that speed up communication and
connection to external hosts or assets on your own
site. Very broad field of application when it comes
to events, from faster loading of subsequent pages
on the same site to faster loading of the external
pages if you need to.
● PRPL (https://goo.gl/uoWM96): pattern in general
and its separate parts. Again, when it comes to
events, PRPL pattern benefits loading the whole
site or a newly requested page.
● Animations: probably the most seductive tool
available to our disposal. But it comes with a
warning. Animations, removing the boredom of
the passive wait, indeed can significantly improve
time perception of short events, related to the
same page: outputting search results, putting item
into cart, requesting additional information etc.
It might even be used for cross-page transitions
in SPAs. But, animations done badly might
significantly harm not only performance, but also
accessibility and overall perception of the project.
When we talk about psychological time,
unfortunately, there is no way we could universally
measure perception. But, are there any metrics we
Web performance
Brain power
Psychological performance
optimisation does not
could rely upon in order to know how good our site is change the duration of an
perceived by users? event. Instead it extends
the active phase at the
cost of the passive one
WhaT To measure?
Conventional parameters like an onload event are
not very informative for measuring perception as
they do not take users into consideration. Instead, we
should rely on the new generation of metrics:
● First Meaningful Paint (https://goo.gl/OJDe1Q):
this parameter is responsible for triggering your
user from passive to active in the phase of the page
loading event. But rendering on its own might not
be enough. The browser window might still be
unresponsive to a user’s interactions due to the
browser’s blocked main thread.
● Time to Interactive (TTI) (https://goo.gl/K7V1E2):
this is exactly the parameter that shows when users
can actually use the site instead of simply taking a
look at it.
Both parameters can be measured with popular
monitoring tools like WebPagetest (www.webpagetest.
org) or Lighthouse (https://goo.gl/1U4Esz). It also lands
in Chrome DevTools. It goes without saying that
these parameters should be as low as possible. You
might also want to keep an eye on the Speed Index
(https://goo.gl/WQoL7B) parameter to know how fast
the visual part (not only the first paint) of your page
is being output.
conclusion
We’ve covered the basic principles of PPO. I would
encourage you to keep going, read papers and any
materials you can find on time perception. You will
be surprised how weird and controversial our brain
is. Better understanding of how humans are wired up
might give you new opportunities in your work.
june 2017 101
 BECOME A VFX KING!
We go behind the scenes at ILM to find out
how the VFX team harnessed CG hair and water
to create a half primate, half human Kong

GET 5
ISSUES
FOR £5
When you sign up to a print
subscription. Visit
www.bit.ly/3dwsub

FREE!
6GB
OF RESOURCES
& VIDEO

www.bit.ly/3dworld-app
NEWSSTAND FOR IOS
PRINT www.myfavouritemagazines.co.uk/3dwsubs

Issue 221 on sale now!


StandaRdS
Personal
ComPuting
John Allsopp on the end and the beginning
of genuinely personal tech
So called ‘personal’ computing as we’ve known
it for 40 years, since the early days of Acorn,
Apricot, Apple and the TRS 80, is coming to a close.
Just as its precursors, mainframes and mini-
computers have persisted, occupying their
evolutionary niche, so too will the computing of apps
and screens, but these too will increasingly occupy
their own niches.
Why did I use quotes with ‘personal’? Because in
many ways this kind of computing experience is
deeply impersonal, even depersonalising. Computers
get in our way, they occupy all our attention while
we are engaged with them. As much as we believe we
can, humans are very poor at multitasking. We think
we can glance at our messages, while maintaining a
conversation, but as anyone who’s been on the other
side of this equation we know it’s not really the case.
The personal era is application oriented, where we
live inside specific apps – word processors and so
on – largely siloed from other apps (so much so that
taking even simply formatted text documents from
Web standards
one word processor to another is often a fraught
process). It’s screen-based, and even as UIs have
iterated from the command line to WIMP to direct
manipulation through touch, we read and we type
characters, or click or tap a text-labelled object or
block of text. As we observed, it requires more or
less all our attention – it interrupts and demands our
focus, it ironically imposes a barrier between us and
the rest of the world, even as it connects us virtually.
And while in recent years we’ve increasingly taken
computing with us, phones and tablets freeing our
interactions from desks and laps to smaller screens
in our hands, text-based interfaces are still the
foundations of our experiences of computing.
But what comes next? As Golden Krishna put it a
little while back now, the best UI is (often) no UI.
They’re very specific interactions for specific aspects
of our lives (fitness devices are, I’d argue, a very early
example of this, as are motion detectors that turn off
lights when you enter a room As Benedict Evans has
said “Things that look like expensive toys are often
the future”).
I’m also particularly interested in what happens at
the intersection of location awareness, sophisticated
in-ear devices like AirPods (think Moore’s law
and Koomey’s law, the latter is like Moores’ law
for battery life, and imagine supersensitive, tiny
in-ear noise-cancelling hearing aid-like devices),
and machine learning. While we’ve long imagined
AR (augmented reality) as being phone or glasses-
like devices giving a heads-up display (once again
computing getting in-between us and the world),
maybe it’s a more subtle whisper of context-based
information (taking into account time, location,
content via speech recognition and the identity of
the person I’m speaking with via voice recognition).
But what can you do other than sit back and wait
for the future to happen or buy expensive toys and
make believe it has?
Right now our mobile devices offer us geolocation,
and there are many easy-to-use AI and machine
learning APIs to explore from IBM (Watson), Amazon
(among others Polly aims to turn text into lifelike
speech) and of course Google. All mobile devices
allow us to play sound from a webpage, and most
have long given us access to the microphone (though
sadly not on iOS devices).
The building blocks are already there, and yet it’s
a space that’s barely been begin to be explored. But
I can start to see the inklings of an era of genuinely
personal computing.
Working on the web since its earliest days, John’s ideas have helped
PROFILE
shaped everything from responsive web design to progressive web
apps and Typekit. Follow him on Twitter @johnallsopp
june 2017 103
PROJECTS CSS

A b o u t t he A u t h o r
rem y L uis An t
w: www.luisant.ca
t: @remy_luisant
job: Adjunct Instructor
areas of expertise:
Teaching, combinatorial
optimization, digital
circuit design

css

Remyfication: maKinG
minification eaSy
Remy Luisant gives a brief tutorial on the use of his new program for
reducing the sizes of CSS files
Do you like small CSS files? Of course you do.
Smaller files download and parse faster. Faster
page loads mean happier customers and better user
experience. Happier users mean that your business is
happier and the world is a better place.
CSS files aren’t small by default. Minification takes
a file and makes it smaller, usually by removing
spaces and other characters that don’t need to be
there. Modern minifiers are very clever, moving
selectors around, rewriting values and combining
things wherever possible.
Make it small
The Remynifier repeatedly Remynification can get you a bit further
tries to use different
minifiers to reduce the
than minification. It is a process of running
input CSS file size CSS minification repeatedly, with the results of
minification being reused as inputs many times. This
works because current state-of-the-art minifiers
have developed independently. Each minifier varies
in which optimisations it performs, so it makes
sense to combine them to work together. What is left
behind by one minifier can be reduced by another.
When one minifier moves things around another
can get a chance to do its optimisations better. While
this process could be applied anywhere where you
have a group of source-to-source compilers, for now
let’s focus on CSS.
Before we Begin
The first thing you need to do is to think if you really

104 june 2017

 CSS

need to Remynify your files. Yes, there are bytes

to be saved, but you may create some broken CSS
in the process. Minifiers aren’t perfect, especially
the more advanced ones. Because the minifiers are
run repeatedly there are plenty of chances for any
problems to compound. This is not a problem with
Remynification, just a result of bugs and design
decisions in software that it relies on. In an ideal
world this would not have been a concern, but we
don’t live in one of those.
There are other ways of getting the size of your CSS
files down. Projects such uncss and purifycss help
you find unused selectors. Pre-compression with
Focus on
Why minificAtion?
Minification is the process of making CSS files smaller. There
are quite a few reasons why you might want to do that.
First and foremost, a file that is smaller results in a website
that takes less time to download. As an exercise you can use
your browser’s development tools to throttle down your internet
access to the speeds that can be expected over a slow connection.
It isn’t unusual for the CSS files to take a regrettably long time to

There are bytes to be download, making for a miserable user experience.

The other reasons are a bit more subtle, but that does not mean

saved, but you may that they should be carelessly neglected.

create some broken
CSS in the process
zopfli or brotli will buy you more space as well, also
freeing up your server from dynamically performing
compression. More details are in the boxout, if you
are curious.
Another safer way to reduce the size of your files
is to run many minifiers on your original CSS file,
choosing the smallest output file and calling it a day
there. This avoids the possible problems caused by
repeated minification.
If you are still curious and daring enough to want
to Remynify your CSS files, then read on.
Money is not that big of a deal when you are well-off and in
possession of a cable connection. People using smartphones are
not so lucky, often having to pay a premium for their
data access.
Even once the user gets the bloated file that they paid for, they
still need to wait for the browser to parse it and display it. Minified
CSS contains less characters that the browser will have to throw
out or skip over. If selectors or values get combined, that makes the
browser’s work even easier.
And finally, throughout every step of the way the radio and the
CPU have to keep operating, causing the user’s battery to get more
and more discharged. No one wants a discharged battery. Please
minify your CSS. Your friends using mobile devices will thank you.

Setting up the environMent

I’m assuming that you are using a POSIX-compliant
operating system. Mac, Linux and *BSD systems fall
under this category. You also need to be able to get
around using the command-line shell.
First of all you will need npm. I trust you
already have that installed. If not, check your OS
documentation for instructions on how to operate
the OS package manager and install npm.
Using npm you should install the command-line
versions of csso, crass, cssnano and clean-css. I went
with a system-wide installation here. You need the
command-line versions; nothing else will work.

sudo npm install -g csso-cli

sudo npm install -g cssnano-cli
sudo npm install -g crass
sudo npm install -g clean-css-cli

You also need to install the Julia programming Minification The common flow is a single minifier being used to minify CSS files
language. The Remynifier will work with Julia 0.5.

june 2017 105

PROJECTS CSS
ResouRces
resources beyond
remynificAtion
If you would like to spend some more time on improving the
size of your CSS files beyond minification, here are some
resources that you may find handy. You also should not neglect
your HTML, JavaScript, images and other resources.
Brotli
The Brotli compression algorithm, while not yet highly supported,
can squeeze the CSS even tighter than the previously common
algorithms (https://github.com/google/brotli)
Zopfli
If you are worried about Brotli not being widely supported, you can
use Zopfli, which will produce files in the .gz format (https://github.
com/google/zopfli)
Minification benchmark
If you don’t want to perform Remynification, but still want to
shop around for a minifier, you can use this piece of benchmarking
software to help you make your decisions (https://github.com/
GoalSmashers/css-minification-benchmark)
uncss/purifycss
Uncss and purifycss will help you discover and remove the unused
CSS that you might have in your files. You can find them both
GitHub at (https://github.com/giakki/uncss) and (https://github.com/
purifycss/purifycss), respectively.
Browser caching
You should also look into using the browser cache to avoid having
the user download the CSS file altogether (https://varvy.com/
pagespeed/leverage-browser-caching.html)
106 june 2017
Building Julia yourself isn’t for the faint of heart,
so I suggest that you use a distribution’s package
manager, if at all possible. If you don’t have access to
Julia through your OS, binaries and source code are
available from the Julia home page at (http://julialang.
org/downloads) Binaries ought to work in most cases
and you should do that. If you want to build Julia
from source, you can run the following commands:
wget https://github.com/JuliaLang/julia/releases/download/
v0.5.1/julia-0.5.1-full.tar.gz
tar -xf julia-0.5.1-full.tar.gz
cd julia-0.5.1
make
The last step will take a very, very long time –
please be patient. After it finishes you will find a
file called julia in the julia-0.5.1 directory. This is
the Julia executable that you will use to run the
Remynifier. However you chose to get Julia, make
sure this executable is in your execution path. Run
the following command:
julia -e “Pkg.add(\”SHA\”)”`
Julia is now ready to use.
Next, you need the code that does the
Remynification. You can get that from my page:
wget luisant.ca/remynifier.jl
Optionally, if you expect to work with this kind of
compression, you can also add zopfli and brotli to
your system. Zopfli is pretty common, but brotli may
require work in order to build and install.
the reMynification proceSS
To run the Remynifier in the default mode you have
to run the julia executable on the remynifier.jl file
and give the CSS file as the next parameter. Here’s
an example of Remynifying bootstrap.css.
julia remynifier.jl bootstrap.css
The Remynifier will keep you posted on its
progress by printing symbols. A plus symbol means
that it has found a new improvement in the file size.
The elusive @ sign tells you that the current best
result was matched by a new CSS file which wasn’t
seen before. A dot means that a previously unseen,
but not better, CSS file was generated and is queued
because it needs a little more processing. R and D
are two different messages about a dead-end being
reached; those are normal. The rare X symbol means
that a minifier has failed, though you don’t need to
 CSS

worry about it unless you don’t ever get any of

the other symbols.
After every forty progress symbols that appear on
screen you will also get a line which tells you how
far along in the process you are. The percentage
displayed is just an estimate, though typically you
won’t have to wait quite as long as it seems to
tell you.
When the program is done it will also tell you the
details of the path it took to arrive at the smallest
CSS file it found. You can use this to run the
individual minifiers yourself without the need
to wait for the Remynifier to find a good Before minification The original CSS file used on a site, before being repeatedly processed by the minifiers.
sequence again.
Do you feel impatient? Want the results right
now? You can abort the run at any time by pressing
CTRL+C. An output .min file is created as soon as
the program starts running. This file is updated
whenever a better CSS file is found, letting you get a
result even if the run does not finish.

The rare X means that

a minifier failed,
though you don’t need
to worry about it
Digging Deeper
You can still do a little bit better, if you are into
tweaking a couple of settings.
You can trade more time for smaller sizes. Add
a number after the name of the CSS file to set the
minimum search depth.
julia remynifier.jl bootstrap.css 5
This will make the Remynifier work a little bit
harder by making the minimum search depth a little
more. Searching to the depth of four is a pretty good
idea if your priority is space saving. If you choose a
depth of more than five then your Remynification
will likely stretch into hours. I really don’t suggest
doing that; there’s really not that much benefit past
that point.
Another thing is to target a compressed size
instead of the smallest uncompressed version of the
file. You can add an input that decides what kind of
compression you will use on the CSS. Right now, gzip,
zopfli, and brotli are possible. Add, after the search
depth, the letter g, z or b to have the Remynifier
optimise CSS for the compressed size.
julia remynifier.jl bootstrap.css 5 z
not the same An example of damage done to the CSS after minification has been run seven times
Using any of the three compression-targeting
techniques suggested is going to take more time and
make you wait even longer.
Not only are you performing a search by
running the minifiers, you are also post-processing
the minification results with a compression
algorithm. Patience is a virtue.
cloSing thoughtS
I don’t suggest that you put Remynified CSS files into
production without some proper testing. You will
need to make sure that you run the results through
all browsers and screen sizes.
As I mentioned before, the minifiers can make a
real mess sometimes. And, ones that could be hard
to track down. This delightful problem, for instance,
is only visible with Chrome. The Firefox browser still
renders the site properly.
You should compress your CSS files, as well as
using the caching that can be done on the user’s
computer. There is little point to Remynify your
files if you are not going to use the other techniques.
Remynification can get you files that are smaller, but
that won’t matter much if you leave the low-hanging
fruit on the table.
Most importantly, have fun playing around with it,
experiment with it and make sure to be sweet to the
people around you.

june 2017 107

PROJECTS SVG

A b o u t t he A u t h o r
NAtAl i yA
S Ay eNko
w: http://www.
nataliyasayenko.com
t: @nsayenko1
job: Web Developer
areas of expertise:
HTML, CSS, JS

SVG

Create and animate

SVG PolyGonS
Nataliya Sayenko shows you how to animate SVG polygons to create
images, taking inspiration from the facesofpower.net site
In this tutorial we will be creating some images
out of SVG triangles and animating them from
one image to another on a click event.
Convert Images to Polygons
The first step is to actually make the images. For this
I used primitive, which can be found at https://github.
com/fogleman/primitive.
The images used in the tutorial are personal
images of a few friends. These are ran through the
primitive utlity using the command line:
primitive -i input.jpg -o output.svg -n 250 -m 1
The -n 250 specifies 250 polygons, -m 1 specifies
a triangle shape, and -i input.jpg -o output.svg are the
input and output. It’s important that all SVGs have
the same number of polygons and are the same
shape. Output.svg will be a collection of polygons.
general overvIew of the logIC
To kick off we are going to start with two arrays: one
with the values we’re animating to, and one with the
values we’re animating from.
Every time a link is clicked, we are going to find
the SVG that matches the href of that link and
get the points attribute of each of the polygons in
that specific SVG. We’re going to extract all the
coordinates in the points attribute, get the fill color
of the polygon and then add these as properties of an
object. Then we’ll add all these objects to one of the
two arrays, the to array.
Next, we’ll use TweenMax to animate the values of
the from array to the values of the to array.
When the animation is complete, we’ll set the to
array to become the new from array.
On first run, the from array will contain all the
points values and all the fill colours of the currently
visible polygons.

108 june 2017

 SVG

html & Css FocuS on

SVG PAthS ANd

<a href=”#nat”>Nat</a>
<a href=”#bwl”>bwl</a>
<a href=”#kevin”>kevin</a>

<svg class=”svg-holder”>
polygons for #nat go here
PolyGoNS eXPlAiNed
</svg> What is a polygon? A polygon is a closed shape made
of line segments.
<svg id=”nat” class=”hidden”>
polygons for #nat go here <polygon points=”10,10 28,228 62,184”/>
</svg>
The points attribute defines each point in the polygon. In the
<svg id=”bwl” class=”hidden”> example above there are three sets of X,Y coordinates, so this
polygons for #bwl go here shape is some sort of triangle. We’re animating the values of the
</svg> coordinates in this example.
<svg id=”kevin” class=”hidden”>
polygons for #kevin go here It’s also possible to animate the d attribute of the path element.
</svg>
<path d=”M10,10L28,228L62,184Z”/>

Every time a link is The d attribute is not made of X and Y coordinates, but instead is

clicked, we are going made up of path instructions, like Moveto, Lineto, Curveto, Arcto,
and ClosePath. In the above path, the M stands for Moveto, and the
to find the SVG that first set of instructions for the path is move 46 right and 282 down.
The next is L, or Lineto, which tells the path to draw a straight line
matches the href of to the coordinates 10, 10. Then it draws another line to 62,184. The
last Z simply tells it to close the path - drawing a line to the first set
that link of coordinates in the path. This path makes the same exact triangle
as the polygon above. You can see that here: http://codepen.io/
After creating the SVGs paste them into the body nsayenko/pen/ryrQeN.
of the HTML. Duplicate the first SVG and give one of By changing the values in the d attribute or the points attribute,
the duplicates the class .svg-holder. we can animate the corners to have totally different coordinates
The .svg-holder is going to be the only one that is and achieve some pretty cool effects! In this tutorial we are only
technically visible and it will be the holder for all the animating the polygon element, but it’s possible to animate any of
polygons that are animated in and out of it. Give all the shape elements in an SVG.
SVGs except the holder the class hidden and an id with

Before This is what the image looked like before it was run after How the image looks like after being run through primitive.
through the primitive tool Saved as an svg, all triangles become <polygon> elements

june 2017 109

PROJECTS SVG

a unique name. This should match the href in

in-depth the links. The hidden SVGs will be hidden with
display: none;.

reSourceS ANd toolS It’s important to make sure the href of each link
matches the id of its respective SVG.

To create the images, I used primitive, a tool that transforms {{result.png would go here}}
an image into a collection of geometric shapes.
(https://github.com/fogleman/primitive) Declare Variables

The animations are driven by GreenSock TweenMax. GreenSock is let toPolygonArray = [];
a great animation platform with a suite of different tools that make let fromPolygonArray = [];
animating on the web pretty painless.
(https://greensock.com/tweenmax)
extraCt Polygon CoordInates
To understand the basics of the polygon element in SVG consult Now we have to run through each of our polygons
MDN (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ and get the coordinates in the points attribute. We
polygon). The pertinent part of this element is the points attribute, can do this using regex:
which defines the X and Y coordinates of the corners of the
polygons. This is the attribute that is being animated.
const getCoordinates = (polygon) => {
I used regex (https://developer.mozilla.org/en-US/docs/Web/ return polygon.getAttribute(“points”).match(/(-?[0-9]
JavaScript/Guide/Regular_Expressions) to get the numerical values [0-9\.]*),(-?[0-9][0-9\.]*)\ (-?[0-9][0-9\.]*),(-?[0-9][0-9\.]*)\
of the polygon point attributes. Regex is a nice way to match (-?[0-9][0-9\.]*),(-?[0-9][0-9\.]*)/);
characters in strings. };

Here’s some great animation libraries with SVG specific options

you might want to check out: UPdate Polygon arrays
SnapSVG (http://snapsvg.io) Every time a link is clicked, we’re going to run a
morphSVG (https://greensock.com/morphSVG) function that takes the href of the clicked link as an
velocity.js (http://velocityjs.org) argument and find the matching SVG, get the points
values, animate it, and update the from array.

the finished article This is what the final product will look like. An SVG element with some links that trigger the animation.

110 june 2017

 SVG

easier to work with when you are animating a lot of

const updatePolygonArrays = (idToAnimateTo) => values at once.
{
toPolygonArray = createPolygonPointsObject(document. anImate the Polygons
getElementById(idToAnimateTo).querySelectorAll(“polygon”));
const animatePolygons = () => {
animatePolygons(); const polygons = document.querySelector(“.svg-holder”).
querySelectorAll(“polygon”);
fromPolygonArray = toPolygonArray; fromPolygonArray = createPolygonPointsObject(polygons);
}
fromPolygonArray.forEach((obj, i) => {
TweenMax.to(obj, 1, {
The onUpdate method one: toPolygonArray[i].one,
two: toPolygonArray[i].two,
in TweenMax.to is three: toPolygonArray[i].three,

called every time the four: toPolygonArray[i].four,

five: toPolygonArray[i].five,

animation updates six: toPolygonArray[i].six,

ease: Power3.easeOut,
onUpdate: () =>
{
This function calls two other functions - polygons[i].setAttribute(“points”, `${obj.one},${obj.two}
createPolygonPointsObject and animatePolygons. ${obj.three},${obj.four} ${obj.five},${obj.six}`);
createPolygonPointsObject converts all the polygon }
elements into objects that we can animate the });
values of, and animatePolygons animates the polygons });
inside .svg-holder. }

const createPolygonPointsObject = (polygons) => { On every frame of the animation, this loop
const polygonsArray = []; animates the points attribute of the currently visible
polygons in .svg-holder to the new values set above.
polygons.forEach((polygon, i) => { The onUpdate method in TweenMax.to is called every
const coordinates = getCoordinates(polygon); time the animation updates, so here it’ll get run on
every change in the values of obj.one, obj.two, obj.
polygonsArray.push({ three, and so on. This way, the points values animate
fill: polygon.getAttribute(“fill”), and the shape morphs to have different coordinates.
one: coordinates[1], Next we can animate the fill. For each polygon in
two: coordinates[2], .svg-holder, set the fill to the fill in the toPolygonArray
three: coordinates[3], that is in the same index.
four: coordinates[4],
five: coordinates[5],
six: coordinates[6] polygons.forEach((polygon, i) => {
}); const toColor = toPolygonArray[i].fill;
});
TweenLite.to(polygon, 1, {
return polygonsArray; fill: toColor,
} ease: Power3.easeOut
});
});
This uses our getCoordinates function to get all the
coordinates in the points attribute and creates an
object with each coordinate and the fill. You have now completed this tutorial. Now the
It returns an array of objects. I decided to make polygons will animate their coordinates and their fill
them objects because that data type seems to be colours as expected.

june 2017 111

Hosting Partners
contact us To advertise here, contact our sales team: +44 01225 68 7832 chris.mitchell@futurenet.com
Key hosting
directory

Featured Host

As well as selling domain private label website, and an

names at rock bottom
prices, TheNames.co.uk
offers great value cPanel Web
Hosting, SSL Certificates,
Business Email, WordPress
hosting, Cloud, VPS and
Dedicated servers.
If you are a reseller, we
offer a comprehensive product
portfolio for your customers
and resellers, a ready-made
API for full automation.
Web developers and web
designers will appreciate our
low pricing, comprehensive
product range and UK support.
Part of a hosting brand
started in 1999, we’re well
established, UK based,
independent and our mission
is simple: ensure your web
presence “just works”.

CoNtaCt
0370 321 2027 / netsales@thenames.co.uk

www.tHenames.co.uk
Free WItH eVerY doMaIN
● Free Email Accounts
“… light years ahead of the competition in Receive two personalised email addresses with free fraud, spam
terms of continuity of service. On the very and virus protection.

rare occasion when we have a problem it is

● Free DNS Management
resolved immediately and courteously. Free lifetime DNS service that lets you manage DNS records on a
A first-class technology-based company globally distributed and highly redundant DNS infrastructure.

with excellent customer care”

● Easy-to-use Control Panel
Use our intuitive Control Panel to manage your domain name,
configure email accounts and renew your domain name.

expert tip ● Free Email Forwards

Domain name choice...

Create free email forwards and automatically redirect your
email to existing email accounts.

Before choosing a domain, make sure you check out ● Domain Theft Protection
the range of new domain extensions now available. Protect your domain from being transferred out accidentally or
There are hundreds to choose from. without your permission with our free Domain Theft Protection.

1&1 INterNet
1&1 Internet is a leading hosting provider that enables
businesses, developers and IT professionals to succeed online.
With a comprehensive range of high-performance and affordable
internet products, 1&1 offers everything from simple domain
registration to advanced eCommerce packages.
0333 336 5509
www.1anD1.co.uk
CYber Host Pro
Cyber Host Pro has been providing UK web-hosting services
for over 15 years. It offers superfast SSD, high-bandwidth web
hosting, and is optimised for WordPress. Visit the website to view
the website hosting, reseller hosting, cloud and dedicated servers
– plus get a 20 per cent discount for life (code: NETMAGLIFE).
0845 527 9345
www.cyberhostpro.com
Heart INterNet
As one of the UK’s leading web hosting authorities, Heart
Internet focuses on designers, developers and technically
adept businesses. It builds on our four tenets – speed, reliability,
support and security – to create award-winning solutions for over
500,000 customers.
+44 (0) 330 660 0255
www.heartinternet.uk
Advertisement
NetCetera
Netcetera provides hosting from one of Europe’s most energy-
efficient data centres. It offers everything from reliable low-
cost hosting for single sites through to complex cloud, racks and
managed IT solutions. Netcetera has a large portfolio of green,
zero-carbon solutions for businesses of all sizes.
0800 808 5450
www.netcetera.co.uk
CataLYst2
As one of the UK’s most experienced hosting companies,
Catalyst2 has built a stable, reliable and well-supported
hosting platform for organisations across the UK. Catalyst2
specialises in very high-availability hosting and exceptional
customer support. Contact the team today for a quote.
0800 107 79 79
sales@catalyst2.com
aDvertise here!
Would you like to promote your hosting business
and services to our audience of professional web
designers and developers? If so, please call or email
Chris as below.
reasoNs to adVertIse
● Reach professionals: 75 per cent of readers are working in
or seeking work in the web industry
● Variety of projects: Future projects include mobile apps,
web apps and CMS-driven sites
● Home workers: 51 per cent have a personal website
under development
CoNtaCt
+44 01225 687832 / chris.mitchell@futurenet.com
PROJECTS Accessibility
AccEssIbILIty
Designing for
colour-blinD users
Adam Silver gives his tips for making your designs
accessible to those with visual impairments
As a designer it’s easy to forget about colour-
blind users, because most designers aren’t
colour blind. We fall into the trap that we are
representative of the very users we are designing for.
This is far from true. In fact, one of my favourite
design proverbs is, “You are not your user.”
My dad is colour blind and he is more than capable
of reading the news and booking holidays online. He
is ready and willing to part with his money, and yet
most websites often cause unnecessary friction.
More widely, an estimated 4.5 per cent of your
users are colour blind. This rises to eight per cent
if most of your users are male. What this means is,
if like most designers you’re forgetting about these
people, then you’re not doing your job as a designer.
Your job as a designer is to solve real problems
for real users. If you’re not doing that then it’s a
good time to ask yourself what exactly it is you are
doing. Because at best you’re creating a piece of
art. The problem with this, though, is that most
websites aren’t art. Most users aren’t using your
site as a source of entertainment. Most users want
114 june 2017
the outcome of using your site and nothing more. In
which case, it’s a good time to remember about this
significant minority and beat your competitors who
aren’t thinking about this group of people.
The great thing about designing for colour-
blind people or, more broadly speaking, designing
inclusively, is that, invariably, improving the
experience for a minority normally improves the
overall experience for everyone else too.
Here’s a basic example: a lot of websites have grey
text on a white background. This lack of contrast
can make it hard to read, particularly for those who
have vision impairments. However, increasing the
contrast – which is a very simple thing to do – makes
things more readable for everyone.
It is actually very easy to design for colour-blind
people. First, turn colour off and second, run your
colour combinations through WebAim’s colour
contrast checker. After doing that, you’ll be 90 per
cent of the way already.
There’s something to say about design that ignores
people: people ignore it.
Adam (@adambsilver) designs inclusive web
PROFILE
experiences. He wrote MaintainableCSS, a free
book at maintainablecss.com.
9000
9012