net - June 2016.pdf

8/18/2019 net - June 2016.pdf

http://slidepdf.com/reader/full/net-june-2016pdf 1/116

SAVE $98!Free two-monthPusher trial

with Creative CloudSAVE 15%

The pro’s guide to 20 brilliant

MASTERBROWSERDEVTOOLS

Issue 280 : June 2016 : net.creativebloq.com

web design PROJECT

Exclusiv

8/18/2019 net - June 2016.pdf


8/18/2019 net - June 2016.pdf


june 2016

3

Welcome

EDITOR’S NOTE

FEATURED AUTHORS

JENNIFER

TANG

Jenn is a product designer at

ZURB. From page 76 she walks

through 10 ways to use design

to guide people and drive

engagement

w: netm.ag/tang-280

t: @happyimadesignr

ANDI

SMITH

Andi is the director of web

development at AKQA. From page

68 he introduces 20 new techniques

to help you get the most from

browser developer tools

w: www.andismith.com

t: @andismith

NADIEH

BREMER

Nadieh is an astronomer-

turned-data scientist-turned-

data visualisation designer.

On page 84 she explains how

to boost D3 charts with SVG

w: www.visualcinnamon.com

t: @NadiehBremer

PATRICIA

GARCIA

A software developer with

over 10 years’ experience,

Patricia helped fight Ebola

with offline JavaScript apps.

Read about it on page 28

w: github.com/patriciagarcia

t: @patggs

WELCOME

Last month we looked at new skills in web

design, but there’s one under-appreciated

skill that is being neglected of late. I’m talking of

politeness and kindness. Many of you will take it for

granted, but I see rudeness on social media and in

emails every day, and there’s just no need for it.

If you email someone, address them by name,

however busy you may be. If someone offers you

work, send them a polite reply, even if you can’t

do it. ‘Not interested’ just doesn’t cut it as a response.

And this applies to everybody, however well-known

you may be.

Let’s not forget what makes our industry so

special: its close-knit, open community that’s always

eager to share and offer support. See it as a future

investment, too. In our column on page 37, Harvey

Wheaton explores the importance of embracing

and immersing yourself in the web community.

If you’re polite to someone, they will be more likely

to remember you in the future and help you out when

you need it. It’s a skill you should foster just as much

as your design and development skills.

Now enjoy what your peers have to share with

you this month. If you like what you’ve read, why

not drop the author a Tweet to say thanks?

Oliver Lindberg, editor

[email protected]

8/18/2019 net - June 2016.pdf


4 june 2016

MANAGEMENTEditorial director: games, photography, creative and design Matthew Pierce [email protected],

Group art director Rodney Dive [email protected]

EDITORIAL

Natalie Be’er, Aiden Bennett, Demian Borba, Nadieh Bremer, Tanya Combrinck, Anna Dahlström, Katie Fenn, Patricia Garcia, Cole Henley,

Clayton Hunt, Sam Kapila, Craig Lockwood, Jim McCauley, Christopher Murphy, Alex Pate, Chris Robinson, Carl Schooff, David Sloan,

Andi Smith, Jenn Tang, Neil Turner, Luke Wagner, Harvey Wheaton

Lisa Boomer, Andrea Manzati, Ben Mounsey, Sébastien Thibault, iStock

ADVERTISING Advertising manager Sasha McGregor [email protected]

CIRCULATION Trade marketing manager Juliette Winyard [email protected]

PRODUCTION Production controller Nola Cokely [email protected]

Production manager Mark Constance [email protected]

LICENSING Senior licensing and syndication manager Matt Ellis [email protected]

All contents copyright © 2016 Future Publishing Limite d or published under licence. All r ights reser ved. No part of this magazine may be reproduced, stor ed, transmitt ed or use d

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.

NEXT ISSUE ON SALE 19 MAY 2016

Future PLC, Quay House, The Ambury, Bath, BA1 1UA +44 (0)1225 442244

@netmag /netmag flickr.com/photos/netmag [email protected] net.creativebloq.com medium.com/net-magazine

COLOPHONAPPS USED PAPER TYPEFACESGoogle Docs, Photoshop, Dropbox,

FutureSource, Illustrator, InDesign,

CodePen, GitHub

COVER PaceSetter Gloss 250gsm

P3-82 Galerie Fine 100gsm

P83-114 Grapholvent 70gsm

Antonio, Share Tech,

Merriweather,

Titillium Web

We are committed to only using magazine paperwhich is derived from well managed, certifiedforestry and chlorine-free manufacture. FuturePublishing and its paper suppliers have beenindependently certified in accordance with the rulesof the FSC (Forest Stewardship Council).

EDITORIAL CONTRIBUTIONS

ART CONTRIBUTIONS

Editor Oliver Lindberg [email protected], Production editor Ruth Hamilton [email protected],

Art editor Rebecca Shaw [email protected], Commissioning editor Julia Sagar [email protected],

Staff writer Dominic Carter [email protected], Staff writer Alice Pattillo [email protected]

CREATIVE BLOQ Global editor-in-chief Dan Oliver [email protected], Managing editor

Craig Stewart [email protected], Content manager Kerrie Hughes [email protected]

8/18/2019 net - June 2016.pdf


8/18/2019 net - June 2016.pdf


6

june 2016

Issue 280 : June 2016 : net.creativebloq.com

FIGHTING EBOLA WITH JS 28

Patricia Garcia explains how an offline-first

JavaScript app helped tackle a major crisis

THE NEW HOMEPAGE RULES 26

Natalie Be’er explores how we can adapt

our homepages to fit their new purpose

WORKSPACE 18

Christopher Murphy gets a guided tour of Brewbot’s Belfast hub

from one of his students, co-founder Jonny Campbell

GO COMMUNAL 37

Harvey Wheaton considers the career

benefits of embracing the tech community

BIG QUESTION 38

How do you simulate different network

conditions? We asked the web pros

VOICES

INTERVIEW 32

Cloud Four co-founder

Lyza Danger Gardner

discusses the negative

repercussions of pitting

yourself against others

within the industry

SUBSCRIBE TO NETAND SAVE UP TO 54%

VOICES

FEED

SIDE PROJECT OF THE MONTH 16

Matthias Martin is giving his CSS skills

a shot of life with a 100-day challenge

BEYOND PIXELS 20

Craig Lockwood spends his spare time

creating knives for professional chefs

CLIENTS FROM HELL 17

An exasperated graphic artist gets a lesson

in how to understand clientese

NEED LIST 21

The stuff we want, including a helpful deck

of cards to help you plan your UX

EVENT REPORT 23

Oliver Lindberg shares his experiences

at Smashing Conference Oxford

FEED

TAKE ADVANTAGE OF THE

PRINT AND DIGITAL BUNDLE

Turn to page 24 to find out more

Want the Pro package? Turn to Page 51

Q&A 41

We chat to yiibu’s Stephanie Rieger about

design fiction and future technologies

8/18/2019 net - June 2016.pdf


june 2016

7

Contents

FREE PUSHER: TWO

MONTHS FREESEE PAGE 96

BOOST YOURDEVTOOLS SKILLS 68

The embedded browser development

tools are better than ever. Andi Smith

lists 20 techniques you should know

GUIDE PEOPLE

WITH DESIGN 76

Jenn Tang shares 10 design techiques

you can use to guide your users and

influence their actions

DESIGN CHALLENGE 52

Three designers mock up brewery sites

FOCUS ON 57

Sam Kapila on the theory of colour

HOW WE BUILT 64

A unified online presence for Penguin

PROFILE 58

We chat to belgian agency EPIC

SHOWCASE

7 HIDDEN GEMS

OF GREENSOCK 104

Carl Schooff uncovers some

hidden features within the

GreenSock Animation Platform

GALLERY 44

Anna Dahlström shares

the best new sites

around, including a photo-led

site for some innovative new

woolen trainers

NETWORK 8

The latest mail, tweets, posts and rants

EXCHANGE 10

Carl Smith, Lorna Mitchell, Meg Lewis and

Joe Leech share advice

REGULARS

D3.JS AND SVG 84

Nadieh Bremer shows you how to use SVG

gradients to enhance data visualisations

CHROME DEVTOOLS 104

Katie Fenn shows you round the Sources,

Console and Network tabs in DevTools

ADOBE XD 90

Demian Borba explains how to design and

prototype a simple app with Adobe XD

PATTERN LIBRARIES 94

Alex Pate considers the benefits of building

a library of reusable components

MOBILE UX 98

Neil Turner presents 11 rules to help you

build ergonomic mobile interfaces

WEB STANDARDS 103

Luke Wagner introduces WebAssembly

ACCESSIBILITY 114

David Sloan on designing accessibility

PROJECTS

FEATURES

PROJECT

REGULAR

EXCLUSIVE VIDEO TUTORIALS!

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

HEAD TO HEAD 97

Clayton Hunt compares Jasmine and Mocha

8/18/2019 net - June 2016.pdf


8

june 2016

CONTACT US @netmag /netmag [email protected] net.creativebloq.com medium.com/net-magazine

Mail, tweets,posts and rants

PM SUPPORT

I’ve seen too many times

what happens when a client

insists that it doesn’t need

the services of a project

manager – the end result

is rarely pretty or what was

desired. I also know from

painful experience what

it’s like to suffer from the

overload of too many projects

running concurrently and

little support from ‘upstairs’

– burnout is only just around

the corner.

Chris Perry, Riyadh, SA

net: This comment refers

to ‘Project managers are

badass’ (netm.ag/gertz-280),

an article we published

recently by Rachel Gertz.

Take a look at our Medium

channel (medium.com/net-

magazine) for more articles

from net magazine.

NEW CODERS

Adobe’s Aga Naplocha

asked for advice on how

to introduce beginners to

coding without frightening

them (netm.ag/coders-280).

Here’s what you had to say:

@bel4r ‘Why use it?’ is very

difficult for many designers.

@liamjay66 Starting out,

I found it difficult to know

what code I should learn.

@_zouhir Blank HTML page

with few boxes. Let them

play with Chrome DevTools

Console CSS properties.

Small explanation about

HTML tags set, selectors and

external CSS. Do not mention

JS yet. Atom or Sublime with

a cool theme and syntax

highlighting will attract them

– let them mess around and

build something.

SHOPIFY AWARDS

net: Shopify has launched its

Ecommerce Design Awards

and teamed up with InVision

and net to offer an awesome

prize to four winners: a two-

day, all expenses-paid trip

to New York City to receive

creative mentorship from

industry-leading experts,

including net editor Oliver

Lindberg. For more details

about how to enter, see

netm.ag/shopify-280.

THROWBACK TALKS

net: We’ve been looking

back at some of the great

talks of Generates past on

Twitter, starting with Oliver

Reichenstein’s ‘Information

Entropy’ (netm.ag/entropy-

280). It brought back some

memories for the speaker …

@reichenstein When you

watch these videos right

after the conference, you

want to hide below a stone.

I remember the audience

being dead silent, it felt like

walking on thin ice. The

message doesn’t feel that

extreme these days.Love your PM In this article, Louder Than Ten’s Rachel Gertz explored the role ofthe project manager, and encouraged web pros to stand up and support them

Throwback videos Oliver Reichenstein explored information entropy at our firstever Generate conference in London 2013

8/18/2019 net - June 2016.pdf


june 2016

9

Network

From our timeline What advice would you give to someone

starting out in the web design industry?

Remotely 2%

Apps like Skype mean

you can test without

leaving your chair

Social media 2%

Send a shout outfor quick opinions

Ask the public 28%

Cafés, pubs and the

like offer plenty of

test subjects

I don’t 20%

How helpful can it

really be?

Dedicated tool 20%

There are plenty of

options to do the

hard work for you

Focus group 8%

Hit your target

audience with a

dedicated session Set up a survey 12%

Set questions make

for simpler analysis

Outsource it 8%

Hand it over to a

specialist who knowswhat they’re doing

HOW DO YOU CO NDUCT

USER TESTING?

THE POLL

C O O L S T U F F

W E L E A R N E D

T H I S M O N T H

SOCIAL SYSTEMS

Social ‘mega-apps’

– feature-rich social

platforms that function like

operating systems – are

creeping in. In this article,

Stephanie Rieger explores

the changing role of social

giants like Facebook,

Slack and China’s WeChat,

and how the future

might look as this trend

continues to grow.

netm.ag/megaapps-280

CHATTER BOTS

The bot revolution

is coming and it’s

going to revolutionise how

we interact with services

in the physical world –

at least that’s what Ted

Livingston and the team

at Kik believe. Arguing

that they’re more than

just consumer fulfilment

tools, Livingston explains

how chat bots and apps

will herald the beginning of

a new era of the internet.

netm.ag/chat-280

WHO? WHAT? WHERE?

Clients eager to

put the user at

the centre of their web-

based projects have led

to the emergence of what

Jared Spool refers to as

‘context-aware design’. By

recognising that context

is constantly changing,

developers can create an

intuitive experience that

ensures the user always

remains in control.

netm.ag/crux-280

Publish everything

online, even your

mistakes – then show

how you fix them. Be fierce,

hungry to learn and network

like crazy.

@furryronin

Engage with the

industry in person:

blog about, attend and

speak at meetups/conferences.

Learn from a range of different

perspectives.

@calum_ryan

Sign up for a CodePen

account (Pro is totes

worth it), put your work

out there and learn from others.

@SaraSoueidan

Know it’s OK to be

wrong or not know

the answer.

@ninjanails

Don’t freelance first –

gain some commercial

experience.

@icanbeautiful

Speak to people, share

your work and ideas. Be

prepared to have your

work criticised. Make your own

decisions. Learn flexbox.

@danjdavies

Don’t wait for things to

happen to you, go out

there and make them

happen. Blog, Tweet, engage.

Also, study business.

@myfirstraygun

Develop processes for

all aspects of your work:

customer service,

record keeping, design and

development ... all of it.

@EsbieNet

8/18/2019 net - June 2016.pdf


10

june 2016

UX

FUTURE-GAZINGWhat does the future of UX design look

like? Customer experience? Service design?

Sergei Golubev, London, UK

JL: User experience (or more correctly

user-centred design) puts users’ needs at

the heart of all digital design decisions.

UX is often limited as it doesn’t extend

beyond the mobile or desktop screen.

Taking the UX process and putting the

customer at the centre of not only design

but also the way organisations develop

their products and services is a natural

step. Following business successes from

a user-centred approach, we are seeing

organisations creating new roles such

as VP of customer experience.

BUSINESS

INDUSTRY CHANGES

How has the industry changed since you

started your web design business? As

tech and design became recognised by

Lumen or Slim framework?José Borges, Albufeira, PT

QUESTION OF THE MONTH

Send your questions to [email protected]

Practicaladvice from

industry experts

CARL SMITH

Carl is a partner at Bureau

of Digital, where he helps

digital agenciesw: devianthippie.com

t: @carlsmith

LORNA MITCHELL

Lorna is a PHP and API

specialist, open source

project lead and trainer

w: www.lornajane.net

t: @lornajane

MEG LEWIS

Meg is a designer and

founder of collaborative

workspace Ghostly Ferns w: darngood.co

t: @darngooood

JOE LEECH

Joe is a user experience

and product design

consultant and writer

w: mrjoe.uk

t: @mrjoe

THIS MONTH FEATURING...

LM: I love microframeworks; they are such a lightweight basis for simple web

applications and APIs. In PHP we have some great choices, including Lumen (lumen.

laravel.com) and Slim (www.slimframework.com), but also Silex from the Symfony project

(silex.sensiolabs.org). My recommendation is definitely to try Slim. Its v3 release is very

modern and uses the best of PHP tools throughout. It also performs well, and I can

vouch that its docs and community support are excellent.

Lightweight option Lumen is a microframework from Laravel focused on delivering fast services and APIs

8/18/2019 net - June 2016.pdf


june 2016

11

Q&As

companies as an investment rather than

a fad, did your sales approach change?

Courtney Bradford, TX, US

CS: We started nGen in 2003, and even

then it was kind of the Wild West. We

always made a point to be at least one

step ahead of our clients. Initially, that

meant being great at process. Then it

changed to being great at standards-

based development. Then accessibility.

Then UX. Then responsive. Then digital

transformation. Today clients are

smarter, and if you aren’t constantly

changing to incorporate the newest

beneficial approaches and technologies

you’ll slowly lose relevance.

BACKEND

WEB SERVICES

Any tips on designing a great web service?

It’s really hard, especially with sorting and

filtering on endpoints.

David Yell, Southampton, UK

LM: Designing an API is hard, especially

when you want to keep your options open

for how you might want to use it in the

future. My advice is to start with some

quite specific use cases and design for

those. You can always add more features

later, but you can’t ‘unpublish’ the ones

you have already shipped. Sorting and

filtering can expose a lot of internal

detail, such as column names. One

alternative approach that has worked for

me is to create some ready-made filters

for users, which combine useful filtering

and sorting options.

UX

BUSINESS MINDS

What can designers do in a business

when the leadership doesn’t truly embrace

UX and design thinking?

Ross Chapman, London, UK

JL: There’s a lot of talk about how

designers should know how to code,

but I’d hire a designer who knows how

businesses work over one who can code

every time. Understanding how your

organisation measures its success and

then matching that to user needs gives

you a strong justification for design

thinking. You need to be saying things

like: ‘We ran some user research and

uncovered some unmet user needs,

we’ve worked with the finance team

and believe these changes represent

a $ opportunity for the company.’ I’ve

written a primer for business for UX

designers at netm.ag/primer-280.

CLIENTS

BRAND IDENTITY

What’s the best way to handle a full

brand identity project?

Ian Paget, Reading, UK

ML: I love putting together set priced

packages available in three tiers for

all my clients: I offer them a fancy

package with just the bare minimum,

3 S I M P LE S T E P S

What’s the best place togo to learn PHP and Git?Chris Weir, Irvine, UK

LM: When you’re looking for resources

to improve your skills, it’s important to

know whether you learn best from written

resources, video or something else.

KNOW YOUR LEARNING STYLE

Personally I do best with books.

However, I also make sure I actually

practice my new skills as well as reading

about them.

LEANPUB BOOKS

Leanpub is a really exciting platform

for technical books. PHP Pandas by

Dayle Rees is a great modern tutorial

for PHP. I’ve also written a Git Workbook

that is full of practical exercises, plus a

downloadable sticker chart for when you

master each skill.

VIDEO COURSES

There are a lot of sites offering

video content, but I find some of the

videos are poor quality and hard to watch.

For something more polished check out

the O’Reilly Learning Paths. There’s one

for Git, and for PHP there’s a video for

beginners and one that’s more advanced.

Business minds Joe Leech’s primer lays out the business basics for UX and design ( netm.ag/primer-280 )

8/18/2019 net - June 2016.pdf


12

june 2016

EXCHANGEQ&As

BUSINESS

PRICING UP

What’s the best strategy for pricing

a web design project?

Peter Javorkai, Budapest, HU

CS: Taking a stance on pricing is a great

way to start a war! But I don’t want to

shy away from a challenge so let’s do

this. There are a few variables that play

a huge role, such as your familiarity with

the type of project, users, technologies

and client. I always start by comparing it

with a previous project and using the real

cost of that as a base. Then I modify the

pricing based on differences in structure,

goals, timeline, value to client, value to

our portfolio and approval process. If

we’re having a really good quarter I might

bump the price up 20 per cent, if we’re

slow I may nudge it down a bit. And

although we use time to estimate, we

generally provide a fixed budget.

UX

ADVANCED SEARCH

I’ve been experimenting with really

advanced, flexible, multifaceted search.

Any pointers?

Lewis Cowles, Essex, UK

JL: Search has very little to do withinterface design, and this can trip up

an inexperienced team. Search is about

providing exactly the right results in

the first five listings. If your users are

turning to filters or re-ordering the

results it means you’ve failed to give

them what they need or expect. Choose

the very best search engine you can find

(or afford to use), and spend time setting

it up to deliver the best quality results

it can. This can often mean manually

choosing search results for certain

queries. Keep monitoring the search

terms users have typed in and tweak

your results based on this.

CAREER

TEAM EFFORT

How has collaboration impacted your

creative career?

Andy J. Miller, OH, US

ML: When I started out as a freelancer,

I felt like I had to do everything myself to

prove I was a ‘good designer’. Over time

I’ve learned I’m not good at everything.

Collaboration is a great way to hand the

baton to someone who is more skilled at

a specific area of design. The end result

is always far better than if I had done it

all by myself! Personality, drive and

willingness to sit quietly beside someone

in a room without it being awkward are

some things I look for in a collaborator.

UX

INDUSTRY ADVICE

What one piece of advice would you give

to people coming into the UX industry?

Rob Whiting, Yorkshire, UK

JL: Brush up on your research skills.Doing the best design work and making

the right decisions requires a strong

understanding of users’ needs, and

without research you can’t be sure of

what users want. Running research

sessions is pretty easy – just ask a few

users (even friends or family), to talk

you through your website or app for 20

minutes or so as you note any problems

they have. It’s not rocket science!

an extra-fancy package that includes

a bit more, and a super-fancy package

that gives them everything they could

possibly need. Everyone loves having

options, and I find most companies tend

to go with the mid-range package.

UX

NATIVE PERKS

What should the UX of a native app

be when you also have a web app?

AKA: Why download the app?

Jonathan Baker-Bates, London, UK

JL: Best practice for apps is to follow

the design patterns of the platform.

However, as web also has its own

patterns, it’s easy to end up with a real

Frankenstein app user experience that

just doesn’t feel right. The app should

match the branding, tone of voice and

feel of the web app or website. Follow the

patterns set out in the excellent iOS or

Android app design documentation,

and if possible develop the apps natively

rather than using a cross-platform app

framework like PhoneGap.

CLIENTS

DESIGN CHOICES

How many options should you present

to a client?

Phil Ward, Adelaide, AU

ML: I only present the number of options

that truly make sense for the needs of

the brand. Quantity may make you feel

like you did more work, but presenting

options that don’t work is risky. What

if the client likes those designs? I never

promise a set number of options to

clients, rather, I tell them I’ll generate

as many directions as their brand would

benefit from.

Team effort The Ghostly Ferns freelancers all havedifferent skills, from product design to illustration

Left Services like PhoneGap are designed to help create cross-platform apps, if you don’t have scope

to go native Right The UI of a native app should have the same tone as the web app or website

8/18/2019 net - June 2016.pdf


8/18/2019 net - June 2016.pdf


SAN FRANCISCO 15 JULY 2016

Learn all about SVG animations, the Internet of Things,

TICKETS ON SALE NOW

MIKE MONTEIROCO-FOUNDER, MULEwww.mikemonteiro.com

SARAH DRASNERUX DESIGN MANAGER, TRULIAsarahdrasnerdesign.com

PETER SMARTUX DIRECTOR, FANTASYwww.petesmart.co.uk

LYZA DANGER GARDNERCO-FOUNDER, CLOUD FOURwww.lyza.com

8/18/2019 net - June 2016.pdf


june 2016

15

People, projects& paraphernalia


SIDE PROJECT OF THE MONTH 16

Matthias Martin gave his CSS skills a shot

of life with his 100-day challenge

BEYOND PIXELS 20

Craig Lockwood spends his spare time

creating knives for professional chefs

CLIENTS FROM HELL 17

An exasperated client gets a lesson

in how to speak clientese

NEED LIST 21

The stuff we want, including a book that

lets you peek inside the mind of a designer

WORKSPACE 18

Christopher Murphy takes a guided tour

of Brewbot’s HQ with one of the founders

EVENT REPORT 23

Oliver Lindberg shares his experiences

from Smashing Conference Oxford

8/18/2019 net - June 2016.pdf


16

june 2016

FEEDSide project

net: Where did the idea for your 100 Days

CSS (100dayscss.com) challenge come from?

MM: I was annoyed by the restrictions in daily

business. Everything has to perform well in the

old browsers and be optimised for search engines,

conversion rates, and a wide range of devices. In this

project, I don’t worry about any of these things and

use as many experimental features as I want. I have

a little notebook for my ideas, most of which are

spontaneous thoughts I get throughout the day.

net: Have you learnt any new skills?

MM: I’ve learnt many new tricks and techniques,

especially in the area of animation. It is a powerful

tool and has become an important part of interfaces

I am creating. I find the variety and complexity

exciting – there are a hundred ways to transition

a square into a circle, and each is the right way for a

particular situation. I have also learned to love SVGs.

They are very useful if you want to animate anything

that is not a circle or a rectangle.

net: Have you run into any obstacles?

MM: In the second week I encountered my first

performance issues on the project website, which

were due to the many embed exercises. As I did not

want to split up the site into multiple pages, I wrote

a JavaScript function that loads and unloads the

exercises based on the user’s viewport.

net: How has this project pushed your creativity?

MM: The challenge to come up with a good exercise

each day keeps me attentive towards other creative

work, and I am becoming quicker at designing my

ideas. As I usually work better with a time limit;

this gives me an extra boost of creativity.

net: Would you recommend a challenge like this?

MM: If you have something you want to learn or

achieve, I would highly recommend starting a

100-day challenge. The concept itself can be

transferred to almost anything and it is incredible

what other people already have accomplished. For

me, it is no longer an exhausting task, it has become

a natural part of my daily routine. You are mistaken

if you think you do not have time for it.

100 DAYS CSSMatthias Martin is improving his CSS skills and

inspiring others with his daily challenge

SIDE PROJECT OF THE MONTH

INFO

job: Junior art director

and web developer

w:matzemachtdesign.de

t: @RoyDigerhund

8/18/2019 net - June 2016.pdf


june 2016

17

Feed

I l l u s t r a t i o n : S é b a s t i e n T

h i b a u l t

s e b a s t i e n t h

i b a u l t . c o m

clientsfromhell.net

I work as a graphic artist for a country

newspaper. Our sales reps liaise with

clients, then supply us with excellent design

briefs and high quality, print-ready assets.

At least, that’s how things go in the perfect

world of my daydreams.

The reality is I’ve become fluent in ‘clientese’,

that private language of the deranged and

defective, and cobble together the advert they

want despite their best efforts to make their

instructions unintelligible. Sometimes, though,

even I am not up to the task of translation.

Client: Can you sharpen the yellow in the banner

of this ad?

Me: The swatch I’ve used is 100 per cent yellow.

It doesn’t get any more yellow, I’m afraid. Do you

want a different colour? I could add some orange,

or I could lighten the tint.

Client: No, the yellow is fine – but can you make

it sharper?

Me: It’s vector – that means pixelation isn’t going

to be an issue. It won’t look blurry when it prints.

To be honest, I’m not sure what you mean.

Client: Like this!

He sends a PDF example of a yellow advert.

I check the separations, and it’s 100 per cent

yellow. Just like in my ad.

Me: The example you sent has the same swatch

value that I’ve used.

Client: Are you sure? We won’t be happy if it

comes out differently.

Me: Well, it is being printed on low-quality

newsprint stock. Some colour variation does

happen, but since the yellow is only on one plate,

we shouldn’t have any real issues. This is part of

the reason our services are cheaper.

Client: Okay. Well just sharpen it then to be sure.

Me: But … never mind. Sure thing.

I send the same proof I did the first time.

Client: Much better. Thanks. That wasn’t so hard,

was it?

Me: No, it wasn’t. It really, really wasn’t.

LEARING CLIENTESE

CLIENTS FROM HELL

Exclusively for net: the latest in a seriesof anonymous accounts of nightmare clients

Our Twitter followers dole out

advice on how to successfully

communicate your brilliant ideas

TALK IT OUT

@manuel_sofia says honesty

is the best policy: “Be straight-

talking. No marketing BS or lies.

Give facts and figures.” “Make it

simple and to the point,” says

@Michael0glesby. “Clients always

want more. Make sure scope creep

is covered.” @missstephwalker

also advocates keeping an eye on

costs: “Pay attention to covering

every aspect of the project – it will

serve you when dealing with late,

unexpected requests.”

KNOW YOUR AUDIENCE

“Learn about your client,” offers

@formforthough. “Take them

through what your work will do to

their business.” @McKay_1988

suggests starting by talking to the

client. “It determines the language

you use and what to include.”

“Don’t guess and don’t be afraid

to engage the prospective client

to fill gaps in their brief before

submitting a proposal,” says

@DecibelDigital.

STEP-BY-STEP

@matthamm lays it out nicely.

“1. Keep it simple (no blurb)

2. Summarise the project 3. List

the design problems and proposed

solutions 4. Clear project timeline

5. Show a pricing table, keep it

simple and show the breakdown

6. List or show your process.”

WRITE A GOODPROPOSAL

HOW TO

8/18/2019 net - June 2016.pdf


1

18 june 2016

In 2013, four friends started

a Kickstarter campaign for

Brewbot, a unique company that

would combine smart technology

with brewing to enable anyone to

brew beer using their smartphone.

The project was successful, raising

over £114,000.

The company’s design-focused

vision has seen it featured in Fast

Company, New Scientist, Wired and

more. As they put it: “We believe

that thoughtful design, intuitive

technology and natural materials

simply belong together; to us,

they’re inseparable.”

Brewbot employs a distributed

team of creatives based all over

the world, from San Francisco and

Chicago to Bristol and Dunbar in

Scotland. The hub, however, is in

Belfast. I dropped into the studio

for a guided tour from co-founder

Jonny Campbell, a graduate from

my Multidisciplinary Design course

at Belfast School of Art.

A Brewbot (1) occupies pride of

place in the corner of the studio,

on hand for the team to experiment

with new recipes and enable them

to pursue their goal of making

brewing beer accessible to all.

The hardware lab (2) is where

new products are imagined and

brought to life. The team only use

the best materials to create their

Brewbots, and the lab provides a

space for them to sweat the details.

When your focus is brewing,

a studio bar (3) is de rigueur (for

sampling purposes, of course).

This is a space for getting together

and promoting conversation and

collaboration.

With a remote team, hot desks (4)

are essential, offering visiting team

members a space to call home

when they’re in the city. No one

wants to be cooped in a dark and

dreary workspace. A skylight

allows sunshine to work its

wonders, and sheds a little light

on the dark arts of brewing.

The team recently expanded its

vision by opening its first bar (5),

nestled underneath the studio.

Serving a cornucopia of craft beers

– local and global – the bar has

rapidly established itself as a

thriving addition to Belfast’s

flourishing nightlife.

A passionate educator and a mentor

to many creative entrepreneurs,

Christopher (@fehler) is a writer

based in Belfast

WHAT’S BREWING?Christopher Murphy takes us on a tour of Brewbot’s Belfast

studio as he checks in on his graduate, Jonny Campbell

WORKSPACE

2

3

4

P R O F I L E

8/18/2019 net - June 2016.pdf


8/18/2019 net - June 2016.pdf


P R O F I L E

20

june 2016

FEEDBeyond pixels

For as long as I can remember, I have

had a fascination with knives. As a kid

I remember my grandfather (‘Bamps’) having a

chest of drawers filled with his treasures. The

third drawer down was my favourite, and it held

a collection of old knives.

I can still remember the first knife I ever

owned, a 3" folding pen knife with a mock ivory

handle, given to me by Bamps from his collection.

I treasured that knife and wish I still had it now.

I now know why I love knives so much: apart

from their beauty, I love the pure utility of a knife.

A knife is a tool that performs a task with little

fuss; no batteries required. A good knife will last

a lifetime and beyond.

As a child of the late 70s, my teenage years

were rudely interrupted by the advance of home

computers. Move forward 20 years and I have

been working with computers for over half of

my life. This equates to tens of thousands of

hours hunched over a keyboard with a blue

phosphorus glow burning into my face. A few

years back I made the decision to change this

unhealthy lifestyle and to balance screen time

with other pursuits.

I have always been a maker, with multiple

projects on the go at the same time. I also love to

cook, so the decision to make a kitchen knife was

obvious to me. I bought a cheap belt grinder and

spent any spare time grinding into various pieces

of steel and practicing the heat treatment

process until I had a technique I was happy with.

There are only a few people in the UK making

quality kitchen knives by hand and I am focused

on one goal: to produce the highest quality

kitchen knives possible. I use only the finest

carbon steels and hardwoods. You can see

a video of me making a paring knife at netm.ag/

lockwood-280 .

I now have an order book for kitchen knives

with orders from Michelin-starred chefs from

around the world. In the beginning, I did not

market the knives in any way apart from posting

images to a dedicated Instagram account. Like

the web community, chefs are pretty good at

sharing what interests them.

Making knives has taught me to focus on the

detail and to iterate on my designs. I have come

to realise any work I do on the web will one day

be lost, but in generations to come I would love

for somebody to think of one of my knives as a

treasure, just as I did with my Bamps’ knives.

KITCHEN KNIVESThis month … Craig Lockwood creates knives for

Michelin-starred chefs around the world

BEYOND PIX ELS

STUFF I LIKE

SARA SOUEIDANFrontend developer

www.sarasoueidan.com

MOLESKINE TIMEPAGE

This is a calendar app, but

instead of the usual grid

format, it’s arranged into a

timeline that shows events as

a continuous flow. The app

has a sleek UI and nice

interactions. Plus, new

features are added with every

update, such as the latest

monthly heat map view.

netm.ag/timepage-280

PAYDIRT

There are quite a few

invoicing and time tracking

apps, but most are packed

with too many features.

Paydirt is the simplest I have

found, but it has everyt hing

I need to run my small

freelance business.

www.paydirtapp.com

DECKSET

Using markdown is the

quickest way for me to create

slides, and Deckset allows me

to do exactly that. Although

it is missing many

customisation features, it

helps me focus on the actual

writing process, which is

great when I’m short on time.

www.decksetapp.com

Craig has been developing for

the web since his teens, and until

recently ran Five Simple Steps.

When not doing web stuff he

makes knives (chopknives.com )

8/18/2019 net - June 2016.pdf


Need list

(1) This handbook offers back-to-basics advice for working with HTML typography in email (netm.ag/type-280 ). (2) Peer into the mind of

influential designer Aaron James Draplin as he reveals the thought processes behind his work in this amusing book (netm.ag/draplin-280 ). (3) Sara

Wachter-Boettcher and Eric Meyer ex plain how to adjust your design work for the stressed or t ime-pressed (netm.ag/life-280 ). (4) Freelancers

and creative entrepreneurs can take their careers to the next level with this roadmap to success (netm.ag/creativetruth-280 ). (5) Become the

master of your inbox with Polymail, an email productivity app that lets you schedule, snooze and even unsend your emails (netm.ag/polymail-280 ).

(6) Plan your website in the real world before you dive into code with these UX Flowchart Cards (netm.ag/flowchart-280 ).

Small objects of web design wonder: from an HTML

typography handbook to a deck of UX planning cards

NEED LIST

What we think

STUFF WE WANT

DESIGN FOR REAL LIFE $18PRETTY MUCH EVERYTHING $40A TYPE OF EMAIL £15

POLYMAIL FREECREATIVE TRUTH £24.99

32

4 5

UX FLOWCHART CARDS $29

june 2016

21

6

1

8/18/2019 net - June 2016.pdf


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

ISSUE 281 ON SALE 19 MAY

BUILD A PROFITABLEDESIGN BUSINESS

In our special money issue we provide the best financeadvice and explain how to boost your ecommerce sales

NEXTMONTH

PLUS

Reveal and hide

a menu withCSS animations

7 great techniques

for your Shopifytoolbox

Implement Material

Design elementswith Pixate

8/18/2019 net - June 2016.pdf


june 2016

23

Feed

EVENT GUIDE

IA SUMMIT

DATE: 4-8 MAY 2016

LOCATION: GEORGIA, US

This year’s IA Summit focuses on

the migration from a page-based

model to cross-channel, data-

dependent, multiplatform

creations. Léonie Watson and

Carolyn Dew are on the speaker

list for this prest igious gathering.

www.iasummit.org

BEYOND TELLERRAND

DATE: 9-11 MAY 2016

LOCATION: DÜSSELDORF, DE

If you can’t wait for the return of

beyond tellerrand Berlin, now’s

your chance to attend one of t he

biggest design, technology and

inspiration conferences. Talks

and workshops come from Lil

Chen, Mr Bingo and Val Head.

beyondtellerrand.com

CODE MOTION

DATE: 9-12 MAY 2016

LOCATION: AMSTERDAM, NL

With two days of workshops

followed by a conference

weekend, the biggest dev

conference hits Amsterdam in

May. Four speakers have been

announced: Bert Jan Schrijver,

Davide ‘Folletto’ Casali, Bruce

Lawson and Leslie Hawthorn.

netm.ag/codemotion-280

UX LONDON

DATE: 18-20 MAY 2016

LOCATION: LONDON, UK

Bringing industry leaders from

around the world to present a

combination of inspirational talks

and lively, hands-on workshops,

UX London returns for three

days. The schedule includes talks

from Abby Covert, Cennydd

Bowles and Leah Buley.

2016.uxlondon.com

EVENT REPORT

P R O F I L E

DATE: 15-16 MARCH 2016

LOCATION: OXFORD, UK

URL: smashingconf.com/oxford-2016

It’s the season of design systems. One of the

major takeaways from the third SmashingConf

Oxford was to move away from designing individual

pages in favour of reusable pattern libraries.

The approach was first mentioned by interaction

designer Alla Kholmatova, who encouraged

everyone to explore modular design for semantic

and structural behaviours. Jina Bolton took a deeper

dive into the topic when she explained Salesforce’s

approach to living design systems and how she

helped create a style guide that could be used by

various different teams (also see Salesforce’s open

sourced projects at github.com/salesforce-ux and

Bolton’s post at netm.ag/salesforce-280 ).

Mark Boulton, who was the conference’s mystery

speaker, explored how design systems can provide

consistency and prevent the marginal degradation of

a brand’s reputation that results from disconnected

experiences. A design system helps you establish

a shared vocabulary, becomes self-policing and

creates design health.

The more technical talks repeatedly hailed the

arrival of flexbox for better layouts, especially the

presentation by Campaign Monitor’s Chris Wright,

who created Flexbox Adventures (netm.ag/flexbox-

280 ). Wright noted that while many frameworks

(such as Bootstrap and Foundation) tackle content

breakpoints by focusing on devices, components

that are dependent on the viewport are brittle.

Instead, content should only respond to the

available space. Flexbox, especially combined with

CSS columns, can help designers avoid too many

media queries; a point that Vasilis van Gemert also

picked up on in his excellent talk. Both speakers also

urged listeners to start playing with the upcoming

CSS Grid Layout module.

More excellent frontend tricks were provided by

Sara Soueidan, who took us on a whirlwind tour of

SVG animation, and Smashing Magazine’s editor-in-

chief Vitaly Friedman (who stepped in for Rachel

Nabors when she was denied entry to the UK) with

a fast-paced presentation that included more than

300 slides crammed with practical techniques.

For slides, see SmashingConf Oxford’s Lanyrd

page (netm.ag/slides-280 ). Videos of the talks can

be found at vimeo.com/smashingmagazine .

SMASHINGCONF OXFORD

Oliver Lindberg

m a r c t h i e l e . c

o m

Oliver (@oliverlindberg) is net’s

editor and has been working with

the title since the Iron Age. He’s

also, in the words of Carl Smith,

a “dancing machine”

8/18/2019 net - June 2016.pdf


Terms & conditions: Prices and savings quoted are compared to buying full priced print and digital issues. You will receive 12 issues in a year.If you are dissatisfied in any way you can write to us at Future Publishing Ltd, 3 Queensbridge, The Lakes, Northampton, NN4 7BF, UK tocancel your subscription at any time and we will refund you for all un-mailed issues. Prices correct at point of print and subject to change.

For full terms and conditions please visit: bit.ly/magterms . Offer ends 31 May 2016

SAVE UP TO

29%

SAVE UP TO

31%

PRINT EDITION ONLY DIGITAL EDITION ONLY

FROM

£55FROM

£45

SUBSCRIBE TO NETGET THE NO.1 CHOICE FOR WEB DESIGNERS AND DEVELOPERSDELIVERED TO YOUR DOOR, YOUR DEVICE, OR BOTH

Take out a print subscription to net andget your copy before it hits the shops.Each issue is packed with the latest webtrends, technologies and techniques

Take out a digital subscription to net for on-the-go access to our interactiveedition, with streaming screencasts,extra images and more

BASED ON AN ANNUAL SUBSCRIPTION BASED ON AN ANNUAL SUBSCRIPTION

8/18/2019 net - June 2016.pdf


SAVE UP TO

54%

myfavouritemagazines.co.uk/NETMAG16

PRINT & DIGITAL EDITION

FROM

£66

Enjoy a combined print and digital subscription, and take advantage

of print as well as exploring the digital experience on the go

Print edition delivered to your door

12 issues in a one-year subscription

iPad and iPhone edition download

Android edition download

Money-back guarantee

GREAT REASONS TO SUBSCRIBE

ARE YOU A WEBPROFESSIONAL?GET OUR PRO PACKSEE PAGE 51

8/18/2019 net - June 2016.pdf


Opinions, thoughts & advice

THE NEWHOMEPAGE RULES

The role of the homepage haschanged. Natalie Be’er explores

how our design approach needsto evolve with it

Could your website survive without

a homepage? Based on today’s user

behaviour, I’d venture to guess the answer

is yes. Over the years, how we use websites

has evolved. We need to start designing

homepages that work for our product and

its users, rather than simply copying

trends. It’s easy to follow the same

homepage design pattern as the latest hot,

new startup. It’s also lazy.

In 2015, we saw the prevalence ofresponsive design and its impact: large

hero areas above the fold, with single

calls to action, rows of three words or

phrases explaining the product, a full-

bleed value proposition, and then a grid of

interchangeable media or products.

Change the logos on these homepage

designs and I’d bet users would barely

notice that the exact same website was

being used for a different product.

USER EXPERIENCE

Q&A 41Co-founder of yiibu and Generate speaker

Stephanie Rieger discusses emerging

technologies and design fiction

INTERVIEW 32Cloud Four co-founder Lyza Gardner talks

about performance, pattern libraries, and the

danger of comparing yourself to others

FIGHTING EBOLA WITH JAVASCRIPT 28Patricia Garcia helped create an offline-first

JavaScript app that became a key player in the

fight against Ebola. Here she explains how

8/18/2019 net - June 2016.pdf


june 2016 27

Opinion

Until the early 2000s, homepages large-

ly functioned as a signal to users that

the brand had an online presence. The

pages didn’t need to function much beyond

displaying this presence and contact infor-

mation. As more companies and people

came online, homepages evolved into

brand salesmen, trying to prove that the

product was worthy of users by presenting

as much content up-front as possible.

This approach worked ... until users

stopped coming directly to the homepage.

We’re now seeing search, social media and

email driving traffic directly into product

or article detail pages, completely bypass-

ing the homepage. For example, in 2014

The New York Times reported its homepage

visits were down 40 per cent even though

its online readership was unchanged. It

still receives homepage visits, but they no

longer form the majority of its traffic.

A DIFFERENT A PPROACH

The most important part of designing a

homepage that meets your users’ needs

is asking the simple question: Who is

currently visiting the homepage? Look at

your analytics and try to understand where

the user is coming from and what their

internal path is after the homepage.

The New York Times found its homepage

traffic was coming from power users:

those who were loyal, frequent and

knowledgeable about the product. It didn’t

need value propositions or an explanation

of the brand; it needed tools and content

personalised to these users’ interests.

On a different type of website, these

loyal users might immediately funnel into

a logged-in state or purchase flow. In that

case, the homepage should be designed

with that flow front-and-centre, rather

than making users search in the top-right

corner for the correct button.The way navigation functions is also

changing. When a user comes to a site,

however they may have got there, they

need context. Design for a user that

has zero knowledge about your brand

and product. Clear navigation is cru-

cial. Prioritise site content and embrace

tiered navigation when necessary – the

best navigation acts as a kind of table of

contents for the site. Try not to resort to

The key is this: at any point on the

website, the user should be able to identify

that it’s the same experience. When they

bypass the homepage, consistency is key.

Elements like navigation, branding and UI

should remain the same throughout the

ecosystem, even (or especially) if it’s a large

one. That way, no matter how or where a

user arrives on your site, they’ll be greetedwith the information and encouragement

they need to take the next steps.

It’s not all about the homepage any more.

But that doesn’t mean that homepages

don’t serve an important – if evolving –

purpose to those that do use them.

hamburger menus, which can easily end up

being the equivalent of a junk drawer.

If your users are bypassing the

homepage, your content pages must work

extra-hard to give users all the informa-

tion they might be missing – every content

page should be viewed as an entry point to

your brand and product.

Make sure the content on the pageanswers the following questions: What else

can I find here? What value is this offering

me? Why should I care about this?

The first question can be addressed with

navigational elements or breadcrumbs.

Some brands find that reiterating their

mission statement below the page content

helps anchor and guide the user. Providing

context about the brand or product can

help users in exploring other content.

Natalie (www.natalierachel.com ) is a user

experience lead at Huge, and is responsible for

producing intuitive and intelligent work P R O F I L E

Users have stopped coming to thehomepage – we’re now seeing search,

directly into detail pages

8/18/2019 net - June 2016.pdf


VOICESEssay

28

june 2016

8/18/2019 net - June 2016.pdf


june 2016

29

Essay

FIGHTING EBOLA

WITH JAVASCRIPTIllustration by Ben Mounsey

In September 2014 I joined the software team of an

NGO working at the intersection of tech and public

health. By then the Ebola outbreak in West Africa had

reached epidemic proportions, with thousands of cases

reported. One month before, the outbreak had reached

Nigeria, where the NGO had provided phones and a

custom Android application that helped reduce the

reporting time for suspected cases from 12 hours to

almost nothing. Now it was the time to bring that

expertise and those tools to the most affected countries:

Guinea, Sierra Leone and Liberia.

THE CHALLENGESThe Ebola virus is non-airborne and contagion requires

direct contact with the bodily fluids of an infected

individual. To control the outbreak, infected persons

must be isolated and everybody who has come into

contact with them must be kept under observation for

the 21 day-long incubation period. This requires the

collection of an enormous amount of data, and it is

critical that the information collected is reported

promptly so sick persons can be treated and proper

quarantine implemented.

This is a scenario where technology shines. As well

as speeding up the transfer of data considerably, even

a simple application based on web forms can have a

positive impact. For example, things like making certain

fields mandatory, or letting users choose from a set of

options in a drop-down can greatly improve the quality

of the data collected.

However, while the technology solutions required

are simple, implementing them in the context of a

critical emergency situation in a developing country

makes things much more challenging. Shipping early is

not a nice-to-have but a must – there is no excuse for

taking a long time to deliver a feature or not fixing a bug

when human lives depend on it.

More important than that, internet connectivity is a

scarce resource that can’t be counted on. Even when

broadband internet is available, it is not unusual for it to

stop working for hours or days. Designing the applica-

tions to be offline-first is a necessity.

Because of these constraints, we chose CouchDB as

our central piece of software. CouchDB has been designed

with distributed systems in mind, making it perfect to

use in an offline context, where a local database is

contained in each device. Offering an HTTP REST API,

it became not only our database but our backend, too. In

the frontend, PouchDB offers a JavaScript database that

can store data locally while offline, then synchronise

with the CouchDB backend when back online.

SCALING OFFLINE APPLICATIONSWith the combination of CouchDB and PouchDB we were

able to move from zero to production in a week in two of

our most important applications, and with a relative

simple and clean codebase. This worked very well in

Nigeria, where the scale of the outbreak was relatively

small. However, the complexity got higher as the amount

of data and number of users grew.

OFFLINE-FIRST

Patricia Garcia explains how shrewd use of technology helpedtackle an emergency situation in a developing country

8/18/2019 net - June 2016.pdf


VOICESEssay

30 june 2016

In offline applications with a high amount of data that

needs to be accessed and modified by many users, two

significant problems appear.

First, synchronising the remote database with the

local one (especially initial synchronisation) gets

increasingly slower. On top of that, browsers have a limit

for the amount of data that can be stored locally. For

example, the newest Firefox and Internet Explorer

have soft limits of 50 and 10MB respectively, after which

the user is asked to authorise the application to use

more space – not an ideal experience. The most permis-

sive browser is Chrome, allowing a single application to

use up to 6.66 per cent of the total free space on the hard

drive. However, this might still cause problems when

dealing with low-cost mobile devices.

Lack of local space can have even more dramatic

consequences. In general, when the available local space

is full, the browser starts clearing out data based on an

LRU policy. That means the data from the application

used most recently is deleted, losing all changes that

haven’t been synchronised to the remote database.

The second major problem occurs when more than one

user modifies a document while both their devices are

offline. When the local databases synchronise with the

remote one, CouchDB will detect both versions. As it has

no way to know which is right, it will just choose one and

mark the other as a conflict.

SOLUTIONS

Fortunately, most of the time these two problems can

be addressed by knowing our application and our users.

To solve the data issue, we need to ask ourselves what

data must be locally available for the application to work.

Often that is a relatively small dataset, saving us from

the problems of maintaining a big local database.Where some functionality requires a very big part of

the database to be replicated locally, we must consider

if that functionality should be available at all times, or

if we can make it available only when access to the remote

database is possible.

In one of our applications we found that some users

did require access to all the data at all times. However,

these particular users were all working in an office.

We realised what we really needed was not an offline-

first application, but an offline-first architecture.

We set up a local CouchDB database in each office, with

the local and remote databases synchronising when

the connection was working.

In the case of document conflicts, it is possible to

resolve this issue programmatically, but with the right

data architecture we can avoid it altogether. The question

to ask is: which data is going to be updated together and

which data is going to be updated separately?

Personal data about a suspected case will seldom be

edited, but data about their possible symptoms will be

added every day, often by different persons. If we keep

all the information in the same database document,

conflicts could be quite common, but if we maintain a

separate document for the personal data, and each day

add a new document with the symptom information,

much of the risk of conflict disappears.

THE AFTERMATH

More than two years after the Ebola outbreak began,

there is finally reason to celebrate. Although it is very

difficult to say for sure all cases have been identified,

and therefore that the outbreak has ended completely,

the epidemic is finally under control and people can

return to their normal lives.

In the 15 months on the project I discovered the big

difference technology can make in a situation like that.

I also learned in emergency situations, you need to be

pragmatic in your technical decisions.

Keeping in constant contact with the situation and

your users is vital, to make sure you understand the

problem and their needs. Although we had team

members spending time on the ground in affected

countries, when we were working from our office in Berlin

it could have been all too easy to lose sight of the context:

an emergency situation in a developing country.This is true in every industry perhaps, but more true

than ever here. Without constant detailed feedback

from the field, one can provide beautifully engineered

solutions, but not useful ones.

A software developer with over 10 years’

experience, Patricia (@patggs) has a

passion for working in open source

and impact-driven projects

P R O F I L E

8/18/2019 net - June 2016.pdf


8/18/2019 net - June 2016.pdf


32

june 2016

VOICESInterview

LYZA GARDNERWords by Jim McCauley Photography by Lisa Boomer

Cloud Four’s co-founder talks aboutexciting new web technologies, andthe dangers of measuring yourself

against the industry’s standards

8/18/2019 net - June 2016.pdf


june 2016

33

Interview

IN

job: CTO a

co-founder, Cloud Fo

t: @lyzadang

w: www.lyza.c

8/18/2019 net - June 2016.pdf


“I actually dropped out of high school

when I was 14, because I hated it, ”

reveals Lyza Danger Gardner. She’s not your

average high school dropout, though – what

she did instead was to go straight to univer-

sity. Allowed by Portland State University to

test in instead of finishing school, Gardner is

one of those developers who started on an

arts degree and then discovered web develop-

ment along the way.

“One day I was in the library and I was

playing with one of the first web browsers,

probably Mosaic or something. I happened

to click on the View Source option and saw

HTML, and I was like, oh wow, this totally

makes sense to me.”

This was back when the only way to learn

HTML was to be self-taught, and that is

exactly how Gardner started on the path that

led to her to co-found Cloud Four in 2007. The

studio launched with a focus on the mobile

web, the principles of open, transparent work,

open source, education and respect.

“What we wanted to do – and this sounds

kind of aspirational or sort of loosey-goosey,

but in retrospect it’s a legitimate thing – was

to create an organisation that internally

fostered the people involved and treated them

with great esteem,” she tells us. “At the same

time, we wanted it to be constantly looking

at the edge of what the web can do, and helping

shepherd it to the right kind of future.”

OLD FIR AND NEW TECH

Based in an old warehouse in Portland,

Oregon (“There’s a lot of exposed brick and

high ceilings, and because we live in the fir

forests of the Pacific Northwest, all the floors

and stuff are old fir, and it’s lovely”) Cloud

Four has been going for eight years. “We’re

kind of mature compared to the technology

startups in the area, ” says Gardner, “but

we’ve stayed very small. There’s a grand total

of about 10 of us.”

Top of Cloud Four’s job list at the moment

is a subject close to Gardner’s heart: service

workers. “It’s a script that stands between

your client-side web application and the

network, ” she explains, “so you’re able to

intercept network requests from your ap-

plication and respond to them in different

ways as makes sense.”

Service workers can be used to explicitly

cache items to save on server requests and

provide a good offline experience. However,

8/18/2019 net - June 2016.pdf


Interview

june 2016

35

this current project is taking things to a

whole new level, creating a production-class

of solution for Smashing Magazine’s site.

“It’s a very high-traffic, high-performance,

complex WordPress site with a lot going on.

Actually trying to make a service worker

for them that performs well at scale is going

to be an interesting challenge.”

PUZZLES AND

PATTERNS

A huge part of Cloud

Four’s work is responsive

design. One thing

Gardner has noticed is

how well responsive has

bedded in. Rather than

having to sell responsive

to sceptical clients, now-

adays the studio’s role is more helping them

improve the way their site works across

different devices. “A lot of our clients are

starting to integrate pieces of that kind of

thinking into their work, but we can come

in and help with the big picture and the

cutting-edge stuff and bringing it all

together and the best practices.”

One of Cloud Four’s specialities is convert-

ing existing sites to responsive without

having to throw everything out and start

again. In order to do that, the team uses

pattern libraries.

“It’s interesting to take a site, break it down

into the constituent patterns, break those

patterns down and build a library of them,”

Gardner explains. “And then you start

piecing them back together in the combina-

tions that make up the elements on the

page and, in the end, the

whole page. You make

minimal adjustments to

the way the site feels for,

say, the desktop browser

for which it was origi-

nally designed.”

This approach ensures

the site is supported com-

fortably across a lot of

different platforms and

screen sizes. “That’s a complicated puzzleto solve, and it’s one that Cloud Four really

puts a lot of energy and focus on.”

Gardner is also currently refactoring the

internal software the team uses to create its

pattern libraries (which come in the form of

a website), so it can be open-sourced.

INDUSTRY YARDSTICKS

Something that’s clear about Gardner is that

she thrives on puzzles and on keeping pace

with the ever-changing world of web devel-

opment, even when it seems a hopeless task.

The aspect that’s challenging her at the

moment is CSS. “It’s becoming so powerful

that being an expert in CSS is like a field unto

itself at this point, and sometimes it feels

beyond me,” she admits.

This feeling hooks into the theme of

Gardner’s talk at July’s Generate conference

in San Francisco (netm.ag/gardner-280).

Entitled ‘Everyone Else is so Clever’ , the

presentation will address how web develop-

ers are in the habit of continually comparing

themselves to world-class performers, and

just how demotivating this can be.

“One of things that’s most rewarding for

me is to share with other developers the

psychological challenges of being really

good at what we do and not recognising it,”

she tells us. “Or just feeling the stress of the

kind of eternal change we’re facing every

single day.”

Part of this stress comes from comparing

yourself to others. “I see people who are

producing three open source projects a week.

That’s really cool, but part of me feels like

I’ll never be able to do anything like that, so

why even try?’ Yardsticks of success are

challenging, there’s no standard method to

establish whether you’re really good at

“CSS is becoming sopowerful that beingan expert in CSS is

like a field untoitself. Sometimes itfeels beyond me”

8/18/2019 net - June 2016.pdf


VOICESInterview

36

june 2016

what you do.” She goes on to explain that

because being a successful web developer

requires a good general overview of

everything going on, it is very difficult to

specialise in a particular topic.

What this does mean, though, is that

there’s plenty to keep Gardner busy. She’s

passionate on the subject of performance,

and delighted that advances in browser

technology and protocols, plus the growth

of HTTP/2, are bringing with them improved

web performance. However, this is countered

by frustration that some are taking advan-

tage of these improvements by making

poorly performing sites that seem to work

on a fast connection, but really don’t when

it matters.

Gardner blames this on a combination of

poor education, time pressures and a lack of

focus on the part of the developer. “It’s easy

to throw a lot of crap at a web page; it takes

a different perspective to step back and think

with a performance angle, but it will serve

you well in a lot of ways,” she says. “It’s not

just that it’ll make your site smaller, as a side

effect it will typically become more robust,

less fragile, and clearer and easier to main-

tain as well. People don’t necessarily think

about that.”

Gardner feels that in the long term it

needs to become much simpler to make

well-performing websites. This means

there’s an onus on standards- and browser-

makers to keep pushing performance in APIs

and browsers.

“As much as I do want developers very

much to take responsibility for their sites’

performance, ” she points out, “there’s a

responsibility in all parts of the ecosystem

to keep that moving forward.”

PRESSING

AHEAD

Moving forward is a theme

that seems to be on

Gardner’s mind constant-

ly; she’s fizzing with ideas

on where the web ought to

be going, and a mine of

information on new tech-

nologies that will change

the way it works as well as

how we interact with it.

We discuss Google’s Physical Web project,

whereby beacons attached to physical objects

can broadcast a URL via Bluetooth; sort of

like QR codes, but ones that people might

actually use.

“That’s a very good comparison, ” she

remarks, “but the idea is that it takes a little

less work. The things are around you waiting

to be discovered and not bothering you until

you look for them. So you might be 100 feet

away from a billboard but be able to interact

with it without having to walk up to it, get

your phone out, launch the camera or

whatever and take a picture of the QR code.”

Constantly driven by the possibilities of

the web (“There are a lot of developers around

the world who are really excited about the

web, so I hope we can just make it work for

everyone and continue being a really power-

ful platform”), Gardner brings herself back

down to earth with an

assortment of anachro-

nistic hobbies: letter-

press printing, distilling

essential oils in her

Portuguese alembic

copper still and main-

taining a library of old

and rare books.

She thrives on it, she

tells us, partly because

it involves working with tangible materials

in the real world, and partly because of the

limitations this brings. “It slows me down,

just because I’m working with things that

are actually things. With software and the

web and all the software tools we have, it’s

like the sky’s the limit, you can do anything,

and sometimes I like to have hobbies that

restrict me in certain ways.”

Next month: We catch up with Google

Ventures’ Braden Kowitz

“There’s aresponsibility inall parts of the

ecosystem to keepmoving forward

with performance”

8/18/2019 net - June 2016.pdf


june 2016 37

Opinion

CAREERS

P R O F I L E

Harvey Wheaton on why immersing yourself inthe tech community could land you your dream job

If ever there was a time to be in

digital, it’s now. The tech sector is

bursting at the seams with new ideas and

extraordinary opportunities for anyone

who can code. And there are thousands of

companies, from disruptive startups to

global giants, inviting programmers to

come along for the ride.

But to get a job in tech, it’s not just

hardcore software skills you need – ‘soft

skills’ are just as important. Any extra-

curricular activity over and above the

qualifications you’ve earned demonstrates

a genuine interest and passion for the

industry. When embarking on a career in

a fast moving and ever-changing sector,it is vital you do everything you can to

stand out from the crowd. That’s where

community comes in.

THE ONLINE COMMUNITYContrary to popular opinion, we coders are

a sociable bunch and like nothing more

than to communicate with others in our

industry. Online communities, also known

as forums or discussion boards, have grown

up around every new language or method-

ology as it came along.

They exist as a place for you to be

curious, ask questions, share information,

help you become a better programmer

and allow the industry to move forward.

Use the community to engage with like-

minded people, learn new code and hacks,

access learning resources, or even find a

mentor or coding buddy to learn with.

First and foremost, it’s important that

you find a community that suits you. Take

a look at one of the most popular options,

like Stack Overflow or Reddit, as a starting

point. From there you can explore others

with more specific niche interest. Havingfound one you like, it’s time to get involved.

The more you put in, the more you will get

out. You are the community, so be sure to

make the most of it.

THE LOCAL COMMUNITYOnline is great, but remember you have to

live and work in the real world. This means

socialising in person with your local com-

munity and building your own network.

There’s an old adage that still rings true:

it’s not what you know, but who you know.

And there’s nothing quite like a room full

of motivated business owners to put you

– stand by for another adage – in the right

place at the right time.

Wherever you are in the world, get to

know your local tech events and cut your

networking teeth by heading along to a few

socials. It may seem daunting at first, but it

does get easier. After having experienced

a few, it’s likely you will find ones you feel

are more useful and relevant to what you

are passionate about.

Finding these events is not difficult.

Check out your local startup incubator

(these are springing up all over the UK)

and register for Meetup.com to find ‘your

people’ and pin down the most relevant

events. Again, go for the most popu-

lar gatherings and from there you will

naturally gravitate towards the ones that

work best for you.

When you network, you are not just

gaining exposure to the people in the

room, you are building connections with

their extended network too, making

yourself visible to people far beyond

whoever you have just shaken hands with.

You never know what will happen or where

a new contact will lead. A new job, a new

country, a new language?

Use socials not just to tell people about

yourself but to ask questions. Be curious.

Find out about the innovations and ideas

that will get you out of bed in the morning

and the job you can see yourself working

full-time in.

As the tech industry develops and attracts

more and more people, it’s important to

recognise the value of being an active

member of the community, both on and

offline. Whether you use the community to

learn from or to build a web of connections,

employers and recruiters will recogniseyour passion and the genuine interest you

have in tech. And it is this energy and focus

that may well land you your dream role at

your dream company in this exciting and

wonderful industry.

Harvey (www.harveywheaton.com ) is the CEO

at CodeClan, where he coaches software

development teams to transform their workflow.

He’s also the chairman of Scrum Alliance

GO COMMUNAL

8/18/2019 net - June 2016.pdf


VOICESBig question

38

june 2016

STEVE SOUDERSChief SpeedCurver, SpeedCurve

www.speedcurve.com

Most website owners replicatedifferent conditions (56K, 3G,

etc.) with WebPageTest – but inreality, network conditions change.For accurate results, Headspinprovides access to real mobilenetworks in places like Bangaloreand Rio de Janeiro, for free.

The conditions for a single mobilecarrier also vary throughout theday. In most cases, I use SpeedCurvewith emulated network conditionsbecause it’s easy and consistent.To test with more realistic mobilenetwork conditions, I drop intoWebPageTest using the Headspinagents. I correlate these synthetictest results with RUM (real usermonitoring) metrics to understandwhat the user experience is like.

Your site might work great on your super-speedy home connection,but how will it perform in the wild? Web pros share their testing tips

HOW DO YOU SIMULATENETWORK CONDITIONS?

WEB PERFORMANCE

PAUL IRISHFrontend developer, Google

www.paulirish.com

For the web, latency is the most influential

network variable; while throughput/

bandwidth drops considerably on 3G and 2G,

changing it doesn’t impact web performance

as much. 150ms is a decent figure for ‘typical’

mobile latency, but you should test 300ms

as ‘typical slow’ as well. How? In the Chrome

DevTools, hop over to the Network Panel.

On the top toolbar you can choose a throttling

preset, or define your own custom preset.

ZENO R OCHADeveloper advocate, Liferay

www.zenorocha.com

It’s very easy for us to forget

about other users’ network

conditions when we’re at work

with our fibre optic internet, butperformance matters. I use

Chrome DevTools to emulate

different network conditions. You

don’t have to install anything and

it doesn’t affect traffic from other

tabs. Also there’s a variety of

presets, including Edge, 3G, 4G,

Wi-Fi, and even offline.

8/18/2019 net - June 2016.pdf


june 2016

39

RESOURCES

MARCY SUTTON

Senior frontend engineer, Deque

www.marcysutton.com

I test website performance usinga variety of tools, including the

Network Link Conditioner from Apple(downloadable as part of Xcode) and thethrottling mechanisms built into desktopChrome and Firefox. Loading a site onactual mobile networks with limited

bandwidth and higher latency is agood practice as well – you’ll identifyslowdowns impacting users around theworld, or even yourself as you catch thelast bit of connectivity when heading intothe wilderness. That reminds me, I needto do some more testing!

ZACH LEATHERMAN

Web Developer, Filament Group

www.zachleat.com

Set WebPageTest to simulate 3G on

the Connection select. Chrome also has

throttling built into its DevTools, and Canary has

added a really useful filmstrip view. But perhaps

most importantly, we need to know what

happens when requests fail (yes, JavaScript

requests can fail). SPOF-O-Matic is a Chrome

extension that will analyse your site for single

points of failure (SPOFs), and WebPageTest

provides a SPOF tab that allows you to set

specified domains to silently fail.

HARRY ROBERTSConsultant frontend architect

www.csswizardry.com

My preferred quick-and-dirty way of testing is to use Chrome’s throttling.

Here I can simulate preset network conditions and latency. However, there

is no replacement for testing in the wild. Late last year I did some performance

optimisation work for David Guetta/Euro 2016, and I actually carried out most

of the work over train and hotel Wi-Fi. These conditions were far more realistic

(slow connections, dropping packets, etc.) and gave me a great idea of how the

site was likely to perform in the real world.

APP CONDITIONS

With apps on mobile devices facing

possibly the most turbulent network

conditions, developers need to pay attention

to things like high latency and DNS delays.

Thankfully Apple’s Xcode tool does exactly this.

Yogev Sitton explains how to use it to put your

app through its paces: netm.ag/xcode-280 .

PROBLEM SOLVING

Network connectivity is just one issue

that separates fast websites from slow

ones. To see how it all works as part of a larger

picture, founder and host of the ScaleYourCode

podcast Christophe Limpalair sheds some light

on the situation in this comprehensive article

(netm.ag/performance-280 ).

IAN CARRICOPerformance engineer,

Vox Media

www.iamcarrico.com

We use WebPageTestfor some standardised

monitoring. Locally, we use ChromeDevTools or Charles to imitate theWebPageTest throttling. We’re

working on getting a good RUMtool to monitor what real users areseeing (and looking at outliers aswell as quartiles). We also activelyuse our sites under varyingconditions, usually within thebrowser embedded in the Twitteror Facebook apps. Data can only goso far – understanding our users’frustrations is invaluable.

SIMPLE SIMULATIONS

Sometimes a simple trick can make it easy

to test varying network conditions. In this

short post (netm.ag/simulations-280 ), Anthony

Fresina explores quick fixes for iOS and Android,

including Wi-Fi-free environments, emulator

commands and settings adjustments that could

save you headaches further down the line.

8/18/2019 net - June 2016.pdf


LONDON 21-23 SEPTEMBER 2016

Generate is back in London for its fourth year – join us for three

amazing days of insight, inspiration and practical tips

www.generateconf.com

TICKETS ON SALE NOW

LEA VEROUFRONTEND DEVELOPER

lea.verou.me

BRUCE LAWSONWEB DEVELOPER

www.brucelawson.co.uk

IDA AALENUX DESIGNER

www.idaaa.no

BRENDAN DAWESINTERACTION DESIGNER

www.brendandawes.com

8/18/2019 net - June 2016.pdf


june 2016

41

Q&A

an opportunity to design smaller, low-commitment

experiences that are modelled after today’s highly

mobile and social web. For example, what is the VR

equivalent of a small, meaningful, easily shareable

social thing like an animated GIF? How can VR learn

from progressive enhancement to deliver more

universal experiences?

net: What do you think is the role of design fiction

in the industry at the moment? Do you use this

approach in your day job?

SR: Design fiction is an emerging technique, but

an increasingly important one. As software seeps

into the world, products are not only growing in

complexity, they must also comfortably co-exist

within rapidly evolving ecosystems and mental

models. Design fiction is a means of prototyping

these more complex scenarios.

Rather than describe the most optimal future,

design fiction challenges teams to envision and raise

questions about their product’s place in the world.

What will it mean to co-exist with the product?

Who will the product help? Who could it hurt?

We increasingly use this technique to help socialise

and explore these challenging issues well in advance

of building a product.

net: You’re talking about the Internet of Things

at Generate San Francisco. Why does this interest

you in particular?

SR: I often speak to conference delegates who feel

the Internet of Things isn’t something they should

really worry about, because they primarily design

or develop for the web. This may have been true a

few years ago, but aspects of IoT are now seeping into

all areas of product design. My aim with this talk is

to break through some common myths and help you

think about IoT in a way that’s more relevant to your

day-to-day work.

net: It feels like the IoT has been slow to arrive.

What do you think has caused this?

SR: IoT touches so many areas that most people don’t

really know what it is. Industrial IoT is growing quite

well, but at the consumer level many products still

feel like a solution in search of a problem. I’m hopefulnew technologies such as Web Bluetooth and the

Physical Web will enable far more experimentation.

Faster prototyping, more frequent iteration, and more

ad-hoc consumer testing should mean more carefully

designed products, with better market fit, and

more time for consumers to understand how these

products could fit into their lives.

Stephanie Rieger will be speaking at Generate San

Francisco in July: www.generateconf.com

STEPHANIE RIEGER Q&A

net: You co-launched yiibu in 2006. What was

your original aim, and has this changed at all?

SR: yiibu’s aim was always to design for mobile

– although it was never really about the technology.

Even in 2006, we were fascinated by the use,

re-appropriation, and ultimately evolution of

technology at the hands of users. Although mobile

is now well-established, much of our work still

involves working with teams to determine how their

technical, design and commercial requirements

intersect with both established and emerging

user behaviours.

net: What do you do day-to-day?

SR: Lots of reading, thinking and discussing,

interspersed with epic bursts of writing and design.I’m also the resident bug-catcher. Hardware or

software, if there’s a bug I’ll probably find it.

net: Tell us a bit about an interesting project

you’ve worked on recently.

SR: We just soft-launched a side project called

oorümchi (oorumchi.com) that aims to explore the

intersection of just-in-time media and virtual

reality. Although the current narrative around VR

often assumes full immersion, we believe there’s

The co-founder of yiibu on theevolution of technology

INFO

Job: Co-founder, yiibu

w: stephanierieger.com

getrevue.co/profile/yiibu

t: @stephanierieger

8/18/2019 net - June 2016.pdf


NEVER MISS AN ISSUE!

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

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

GOT AN APPLE DEVICE?

#273 NOV 2015 Join the Sketch revolution!We help you make the switch

to the new top tool. Plus:what makes a great portfolio

#278 APRIL 2016We show you how to top up yourtool stack without spending apenny, and walk through thebasics of CSS blend modes

SAVE UPTO 31%

WITH A DIGITALSUBSCRIPTION

SEE PAGE 24

#279 MAY 2016Discover which areas you should

be skilling up on right now, andlearn how to test and optimiseyour sites on all devices

8/18/2019 net - June 2016.pdf


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

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

PREFER TO READ ON ANDROID, PC OR MAC?

NETM.AG/NET-GOOGLEPLAY NETM.AG/NET-ZINIO

#277 MARCH 2016Discover the future of CSS,including CSS Shapes andPostCSS. Plus, we reveal thetop design trends for 2016

#276 FEB 2016We run down the prototypingtools you need to sit up and takenotice of in 2016, and show youhow to get started with ES6

#274 DEC 2015Learn how to build perfectlayouts without media queries,and take a look at the 15 APIsthat will solve your dev problems

#272 OCT 2015We reveal the UX insightsyou can glean from Google

Analytics, and explore howto design for smart devices

#271 SEPT 2015We tackle the new designchallenges presented by

the advent of wearabletechnology

#270 SUMMER 2015The freelance special: welook at the pros and cons

of going it alone, and sharetips for landing big clients

#269 AUG 2015Designers share their tips forbuilding a better web. Plus,

discover how to optimiseyour sites for mobile

#275 JAN 2016Your guide to great UI design.Plus: We introduce flexbox – theCSS module that will help youtackle complex site layouts

8/18/2019 net - June 2016.pdf


GALLERYInspirational sites

44

june 2016

Sensational design and superb development w: www.annadahlstrom.com

t: @annadahlstrom

ANNA DAHLSTRÖM

Anna is a Swedish UX

designer in London.

She’s the founder of

Glimt, and likes fika

and flexible working

LOL Colors is a personal project by MacKenzie

Child, who designed, coded and launched the

colour palette collection site in just 24 hours as a

challenge to himself. For now everything is curated

by Child himself, but there is the potential to open it

up for others to add their own palettes. It was this

possibility that prompted Child to base the site on

Rails instead of something like WordPress.

The site works seamlessly from the big screen to

the small screen, and I picked it for its simplicity and

appealing design, combined with the curated angle.

Although creating the MVP took longer than expected,

Child finished the site in roughly 20 hours. “One of the

reasons it ended up taking so long was that I kept going

down rabbit holes and trying various things that ended

up not working,” he explains on his vlog (netm.ag/child-

280 ). “If I ever do this again, I just need to plan better

and think through everything I’m going to do before I

jump in to actually build it.”

When asked about what’s on the horizon for LOL

Colors, he says: “The two big things I want to do next

are to allow users to create their own palettes or create

collections of their favourites and show examples of the

palettes in use.” Personally, I can’t wait to see it.

RAILS, SASS, LOTS OF COFFEE

WWW.LOLCOLORS.COMMacKenzie Child www.mackenziechild.me

8/18/2019 net - June 2016.pdf


june 2016

45

Inspirational sites

When NBCUniversal reached out to UNIT9 to create an interactive second

screen experience for the new Syfy series The Magicians , one of the

challenges they were presented with was to think of a magic lesson for every

episode. The aim was to create a website that was more informative than game-

like, but still offered plenty of challenges and content for the user to discover.

In close collaboration with Syfy, the team at UNIT9 created 13 games for the ‘Magic

lessons’ part of the website. These can be played on all devices and adapt to the

device in question.

“The challenge on the technological side was building standalone games for the

13 lessons, which each required different tech – from AngularJS and WebGL to 3D

animations,” says UNIT9’s Ligia Stan.

After each episode has aired, the user can return to the site and take a different

lesson, as well as learning more about the characters. The team needed to ensure

the code, copy and assets became accessible at the same time the episode aired,

which meant finding a custom way to release content, beyond classical CMSs.

This was the team’s biggest challenge, but the result is one of the better examples

of its kind.

WWW.BRAKEBILLSU.COMUNIT9 www.unit9.com

“It’s technologically brilliant(on a fast connection) andlovely visually”

HTML5 VIDEO, WEBGL, CSS3 ANIMATIONS

8/18/2019 net - June 2016.pdf



46

june 2016

S I T E O F T H E

M O N T H

Allbirds is a new sports shoe brand from

the land of 29,221,344 sheep. It began when

co-founder Tim Brown observed the amazing qualities

of Merino wool, and wondered why it had never been

used in footwear before.

The website, which has been built using Shopify,

mixes lifestyle photography with illustrations. The

result is a delightful experience that doesn’t just tell

the story behind the Allbirds, but also gives you a feel

for the product itself.

“It’s designed to showcase the incredible attention

to detail and thought behind our product design,”

explains Brown on the reasoning behind the site.

site to life and articulate our mission of making better

shoes in a better way.”

Both Brown and the Red Antler team talk of their

extreme dedication to the UX of the site and how they

leaned into the details that so often are overlooked.

The mundane FAQ section is brought to life with

animated GIFs, and illustration is used throughout the

site as unexpected storytelling motif. It’s one of the

aspects I love most.

SCROLLMAGIC, GULP, BROWSERIFY

WWW.ALLBIRDS.COMRed Antler www.redantler.com

8/18/2019 net - June 2016.pdf


june 2016

47

Inspirational sites

“I love how the UI educates users about thesignificance of colour in search results. There’slots of content to handle, and yet they manageto make it look clean and effortless”

The website for Authentic Jobs,

a service that connects creative

professionals with great companies,

recently got a complete design and

code overhaul.

“We really wanted to give something

new to both employers and job-seekers

in this redesign,” says Adam Spooner,

who developed the site. “We added a

few new required fields – most notably,

skill level and compensation – that

we hope will make the job-seeking

experience even better.”

As part of the process, the team

reworked UI components that had

remained untouched for years and

varied between screen sizes. The new

design is fully responsive – anyone can

reach the site on any device, and access

almost all functionality, regardless of

their viewport dimensions.

The application process has also

been revamped, and the reimagined

listing page puts the spotlight firmly

on the job itself. Employers are now able

to include hero images to help convey

more of the personality and culture of

their company.

“We intentionally stripped away even

more of our branding so employers could

link to the application process as if it

was their own,” says Spooner.

The posting process has been

improved with the use of the Redactor

text editor. Spooner explains how

initial tests have indicated that it’s

much friendlier to those who copy

and paste job descriptions from Word

documents. Overall, the result of the

redesign is carefully crafted minimalist

beauty, just as you would expect from

Authentic Jobs.

REDACTOR, JQUERY-FILE-UPLOAD, SKETCH

WWW.AUTHENTICJOBS.COMAuthentic Jobs www.authenticjobs.com

“Allbirds isthat rarest ofsites: smartlydesigned withan authenticallypersonable toneof voice andeffortlessly usable.The split-pagecheckout processand microcopy tipsare particularlyneat”

8/18/2019 net - June 2016.pdf



48

june 2016

GOOGLE STREET VIEW: PETRAGoogle Brand Studio

Petra in Street View (netm.ag/petra-

280 ) allows anyone to explore the

ancient city of Petra. The city is brought to

life through photo sphere, Street View and

narration by Queen Rania Al-Abdullah of

Jordan. Viewers can explore interactive

hotspots including the iconic facade of

Al-Khazneh (the Treasury), an 8,000-seat

amphitheatre, as well as the tombs and

temples nearby.

The experience took days to capture

with the Google Street View Trekker,

a 22kg piece of equipment that carries

15 high-resolution cameras and captures

a photo every 2.5 seconds. It’s the fifth

and largest Street View project that

Google has launched in the Arab world,

and it’s pretty magical to be able to

explore one of the wonders of the world

from your own home.

It is predicted that virtual reality will

really take off in 2016, but we mustn’t

forget about the possibilities immersive

experiences like Google Street View’s

Petra create, which are accessible to

in Street View, I hope I’m one day able to

go there in person.

RWD, HTML5 AUDIO AND VIDEO

8/18/2019 net - June 2016.pdf


june 2016

49

Inspirational sites

WWW.ASHORTJOURNEY.COMcher ami www.cher-ami.tv

A Short Journey was born in the

summer of 2015, when the team

at cher ami took a break from client

work to collaborate with 3D artist Benoît

Challand. At first it was supposed to

be a short film, but it turned into an

interactive story about a journey to the

sea when the team realised a website

could involve the user more.

“We designed some elements in 3D

with Cinema 4D and other elements in

2D with Photoshop. The idea was always

to obtain a fresh design by combining

modern technology and classical

techniques,” says founder Jean-Frédéric

Passot. “We used WebGL to recreate each

scene in 3D and even if there are a lot of

tricky technical aspects in this website,

the goal was always to offer a nice feeling

of a sunny journey.”

The website launched as a greeting

card for the new year, to warm up clients

on cold winter days. A Short Journey

is a simple yet lovely example of how

interactivity can be used to move an

experience along.

HMTL, JAVASCRIPT, WEBGL

8/18/2019 net - June 2016.pdf



50

june 2016

Marvel started off as a side project in 2013. Today,

265,000 people use it to communicate their ideas. In

the newly released version, several parts of the app have been

reengineered in React to work faster and smarter, and the

web interface has been cleaned up and redesigned.

“A large part of the redesign was spent creating a style

guide based on a functional CSS principles, where we used

immutable classes to apply styles,” says co-founder Murat

Mutlu. “This has cut development time down drastically

and added consistency across the platform.”

As the Marvel team has grown, so has the scope of the

product. In version 2.0 a number of features have been

introduced, including new user roles and folders for organising

work. There is also a Stories section, with case studies from

the likes of ustwo, Deliveroo and Marks & Spencer.

With Marvel 2.0 launched, the team is now focused on

improving existing features and creating new products,

all aimed at removing friction and complexity and making

prototyping fun and accessible – something the team is

certainly doing a great job with.

WWW.MARVELAPP.COMMarvel www.marvelapp.com

REACT, PUSHER, DJANGO

8/18/2019 net - June 2016.pdf


WORTH£371

WHAT YOU’LL GET 12 issues of net in print and digital

Annual Industry Report worth £100

4 months free when you sign upfor a Treehouse subscription

Discounts to industry eventsincluding Generate

Design annual worth £9.99

Special discounts from selectedindustry partners

JOIN TODAY VISIT www.myfavouritemagazines.co.uk/netpro

For more than 20 years, net magazine has been at theforefront of web design and development. Join net Pro and

as a special introductory offer, you can save £30!

YOU ARE INVITED

TO JOIN NET PRO

Terms and Conditions: Pricing and savings quoted are compared to buying full priced UK print and digital issues. You’ll receive 12 issues in a year.Prices correct at point of print and subject to change. Full terms and conditionsbit.ly/magterms . Offer ends 31 May 2016

8/18/2019 net - June 2016.pdf


Sublime design& creative advice

HOW WE BUILT 64Penguin Books needed an online presence that

unified its existing brands and microsites. We

find out how Clearleft rose to the challenge

PROFILE 58We chat to one of the founders of EPIC, the

small Belgian agency that snags big clients and

refuses to be constrained by technology

FOCUS ON 57Gone are the days of web-safe colours – now

we are free to experiment. Sam Kapila explores

how to choose the colours for your projects

DESIGN

CHALLENGE


BRIEF

This month we’d like you to design a website for abrewery. Tap into the artisan craft beer trend, embraceold fashioned ales or branch out into something newaltogether – it’s up to you. Just make sure you capturethe imagination of your beer-loving audience.

P R O F I L E S

COLE HENLEY

Cole is a bearded socialist, teacher, fatherof two, and technical director at Mudw: www.ournameismud.co.uk t: @cole007

CHRIS ROBINSON

Chris is a freelance web designer andfrontend developer based in Hertfordshirew: www.thelonelypixel.co.uk t: @lonely_pixel

AIDEN BENNET T

Aiden is a frontend web developer at Aiir,a platform for radio station sites and appsw: www.aiir.com t: @AidenLBennett

This month ...

BREWERIES

8/18/2019 net - June 2016.pdf


june 2016

53

Design challenge

MY MONTH

What have you been

doing this month?

Tidying up my portfolio

and working on a

redesign for theweb

designforum.co.uk .

Which sites have you

visited for inspiration?

None outside the usual

culprits. I have a bit of

an infatuation with the

colour yellow at the

moment as I’ve recently

redecorated my flat

– it seems to be

subconsciously

affecting my designs.

What have you

been watching?

Mozart in the Jungle .

What have you

been listening to?

Classical (see above).

CHRIS ROBINSON

PEBBLETONS An innovative split-screen design enables this site to promote two different products at once

Pebbletons is an established brewery

and a well-known maker of scotch. It was

very important that its new website promoted

not just its fabulous range of scotches but also

its beers, which were going mostly unnoticed by

users on the old website. With this in mind the

homepage is split into two halves, with one side

dedicated to each type of drink.

Strong background colours complement the

product photography. As the user scrolls down

the site, the products change and animations

kick in, with the products on the left sliding

up and the ones on the right sliding down.

The background colours also change to match

the new products.

On mobile devices the split is removed and

replaced with a toggle that sits behind the

product imagery, allowing users to quickly

switch between the two categories. Strong CTAs

are used throughout to encourage users to click

through and find out more.

CLOSE UP

(1) Navigation is tidy and simple to keep the look of the

site clean. On mobile this is replaced by a hamburger icon,

which toggles an off-canvas menu that slides in from the

top. (2) Contrasting background colours are used to mark

out the two halves of the website. As the user scrolls,

the colour changes and switches from the left side to the

right to quickly shift emphasis from one product type to

another. (3) A pager is used to indicate which sect ions the

user is currently viewing. To keep things simple there is

a maximum of three sections, which means a total of

six products can be promoted on the homepage.

(4) I didn’t want to use generic fullscreen background

images. Instead I opted for strong photography and

bold colours to really show off the products. (5) When

you transition from one section to another, the word in

the background animates and changes to describe the

products currently in view.

2

1

3

4

5

8/18/2019 net - June 2016.pdf


54

june 2016

SHOWCASEDesign challenge

AIDEN BENNETT

T IM SYKESThis simple site has broad appeal and ensures all users can find exactly what they want

The Tim Sykes website provides users with

all the information they might need.

When they land on the homepage they are

greeted with a general overview of the product.

More detailed information about the range of

beers and events can be accessed by clicking on

the accompanying content sections, to ensure

the homepage itself doesn’t become cluttered

and overwhelming.

For the navigation, I wanted to stick with

patterns the user was already familiar with.

The fixed header has been very popular over

the last few years as it provides an accessible

way to navigate pages. The hamburger icon

is also widely known and most users now

understand its function.

When the hamburger menu is open the icon

transforms into a cross. For this I would use

JavaScript to add a class and CSS animations

to rotate the lines.

CLOSE UP

(1) A large image with clear accompanying text towards

the top of the page ensures the user instantly knows

what kind of product the site is for. (2) Fixed navigation

at the top of the viewport provides a way for users to

easily move around from wherever they are on the site.

(3) Using CSS animation, the hamburger icon transforms

into a cross when the menu is open, to let the user know

they can tap again to close the menu. (4) The store locator

lists Tim Sykes distributors, making it easy for potential

customers to find the product they ’re after. (5) I have

included a jQuery content slider/carousel lower down the

page to help display information that isn’t vital but st ill

helps to promote the beer.

MY MONTH

What have you been

doing this month?

Improving my icon

design skills in Sketch

3, learning how to

use Principle for

prototyping, and

exploring how I can

further visualise

website interactivity

using mockups.



lukejamestaylor.com ,

www.takeitapp.co/en

What have you

been watching?

11.22.63 , The Simpsons ,

Skins.

What have you

been listening to?

New Found Glory,

Slayer, Blink-182.

4

1

2

5

3

8/18/2019 net - June 2016.pdf


june 2016

55

Design challenge

COLE HENLEY

BRUISERThis no-nonsense offering draws its branding from its heritage, and has a flavour that packs a punch

Bruiser is a new brand of independent,

no-nonsense craft beers brewed in a

former amateur boxing club in the industrial

centre of Sheffield. Because of our roots,

the branding is inspired by the culture and

terminology of the amateur boxing ring.

The site aims to provide an introduction

to the brand, explaining the process behind

brewing and the individual qualities of each

beer. Whilst ultimately a physical sport, boxing

is defined by movement and lightness of foot.

Similarly, Bruiser beers combine strength with

a fine balance of delicate and subtle flavours.

The design mirrors this apparent paradox, with

clear, sophisticated typography alongside dark,

gritty black-and-white imagery.

The site is responsive, to be built mobile-

first. Web fonts and technologies like flexbox

enable us to build simple, consistent layouts

without impacting on performance.

CLOSE UP

(1) The design uses simple navigation for mobile and

desktop, and shuns the hamburger icon in favour of clear

language to signpost the key areas of the site. (2) Strong

use of high-contrast imagery communicates the brand

and story behind the company. (3) An interactive carousel

showcases Bruiser beers, highlighting the full range of

different options available and their individual qualities.

(4) Sophisticated web typography helps reinforce the

brand. The site employs the beautiful Abril Fatface for

headings and core messaging, which is contrasted with

the simple, geometric Quicksand for body copy. (5) The

magazine-style layout has been created using flexbox.

This lets us control layout between different viewports

and devices, providing a more linear mobile layout but

a more complex, grid-based desktop layout. (6) Logos

are all SVGs, to ensure the identity is crisp at different

resolutions and to keep down page size.

MY MONTH

What have you been

doing this month?

It has been a crazy

month at Mud with

several site launches.



netm.ag/micro-280

– an entertaining

read about Alastair

Humphrey’s miniature

escapes.

www.viget.com

– a cracking new

site design with anemphasis on what

they’ve learned

in their projects.

What have you

been watching?

At this time of year a

lot of energy/emotion/

despair goes into

watching my beloved

MUFC’s fall from grace.

1

3

2

5

6

4

8/18/2019 net - June 2016.pdf


33% OFFVPS

33% OFFPremiumHosting

50% OFFResellerHosting

6 monthsFREE

VPS Backups

USE CODE:

HIRBV33

USE CODE:

HIRBP33

USE CODE:

HIRBR50

CALL SALES ON:

0330 660 0255

Your websites deservegreat web hosting

The UK’s best web hosting backed by

free 24 x 7 support

8/18/2019 net - June 2016.pdf


Focus on

june 2016 57

COLOUR THEORY

FOCUS ON

Sam Kapila’s take on choosing colours for web projects

One of the best things about the

current web design scene is how much

more of a role is played by colour. The days

of web-safe colours are gone, and we can

focus on colour as a crucial design tool.

Here are a few things to keep in mind as

you choose colours for your projects:

First, go for colour contrast. Multiple

system settings, plugins and glare

protectors mean users today have total

control over how their screens look – so

it’s vital to keep contrast in our designs.

But there’s another reason why this is key:

colour-blindness. There are plenty of types

of this common impairment, and the more

contrast between content and background

colours, the less likely it is viewers will

become unable to see content.

Second, stray away from black and white.

Warmer or cooler shades of dark greys and

off-whites still provide ample contrast,

can work better with monochromic tones

or palettes, and look a bit more interesting.

Also avoid primary colours, which can give

off an elementary school art class or 1990s

web design vibe. With rgba() as a colour

option (including transparencies) in CSS

we can experiment a lot more!

Finally, use colour to draw the user’s

eye. Bold or unique colours can be used

as a way to draw attention to actions

(like buttons, clicks and so on) or to must-

see and must-read content. Similarly,

colour hierarchy can come into play to set

secondary content back so it supports (but

doesn’t distract from) the primary purpose

of a page, section or module. (1) The site for Pycon

2016 (us.pycon.

org/2016 ) is based

around several

inviting, bright

shades of blue. The

slate colour used for

unexpected colour

palette full of

vibrant, contrasting

shades. (3) The

site for art project

In Space We Trust

(inspacewetrust.

org ) makes use

of monochromatic

gradients, paired

with bright white,

bold typography.

Accent colours

create interest.

P R O F I L E

the darkest areas

is a fresher look than

black. (2) Digital

communications

agency Details

(www.details.ch )

has gone for an

Sam (samkapila.com ) is a designer

living in Texas and an instructor

at The Iron Yard, an international,

immersive coding school

3

1

2

8/18/2019 net - June 2016.pdf


58

june 2016

SHOWCASE

PROFILE

The small Belgian digitalagency with lofty ambitions

EPICwww.epic.net

EPIC launched in 2009 with one clear aim:

keep the studio small but think big when

it comes to clients and quality. Together, the four

founders had everything they needed to lead the

studio to success – Hugues Lismonde covered

backend development, Benoît Rondeux was a

pro in project management, Morgan Leidgens

brought business savvy to the table and Karim

Maaloul had a background in web design and

interactive animation.

With the exception of Leidgens (who runs his

own company), the founders now each take

charge of a different department at EPIC. Along

with its groaning awards shelf and impressive

client list, the agency has caught the industry’s

attention for its innovative side projects and

internal experiments. We chatted to creative

director Maaloul to find out more.

net: Tell us how EPIC came about ...

KM: EPIC was founded seven years ago based on

the observation that the digital market in Belgium

was divided into two segments: large, Brussels-

based agencies with international ambitions and

small studios targeting local SMEs. Given that we,

as founders of EPIC, had already been working for

these so-called large agencies, we knew there was

this niche in-between to seize. We came up with

the idea of creating our own agency that was

limited in size but delivered the quality and

ambitious approach of a large, reputable one.

net: How do you stand out in a crowded industry?

KM: EPIC offers a unique blend of experiences:

between us we have worked for well-known

agencies, freelanced, been martial arts champions,

and launched a designer furniture shop. But the

common trait is that we are all driven by a genuine

8/18/2019 net - June 2016.pdf


june 2016

59

INFO

Location: Liège, Belgium

Established: 2009

Areas of expertise: UX and UI,

branding, interactive, motion des

illustration, digital strategy

Clients: Red Bull Media House,

Crop Trust, UPS, EXKi, Studio 100

Awards: Five FWAs, nine Awww

Site of the Day, CSS Design Award

Best Belgian Design Agency 2015

8/18/2019 net - June 2016.pdf


60 june 2016

SHOWCASE

scheduled to work on. Work kicks off

at 9.30am, and we break for lunch at 1pm.

Lunch is often combined with a table

football tournament.

At 2pm we’re back on track, satisfied

and full of motivation. The show must go

on. Those who are craving caffeine have

a break at 4pm for coffee and chit-chat in

the kitchen. The day ends around 6pm with

a quick progress check from each of the

project managers.

net: How do you test UI?

KM: We are constantly looking to provide

the best interfaces for the websites we

produce, and at the heart of our approach

is empathy. With this in mind we begin

every project by systematically trying to

get under the skin of our clients and their

target audiences. We always ask a lot of

questions before coming up with a

suggestion. We are not used to doing

A/B testing ourselves, but we sometimes

outsource it to external companies for

Crop Trust EPIC has collaborated extensively with this NGOdedicated to safeguarding crop diversity, creating its branding,logo, website, annual report, animated video and more

Babel, the Cat who would be King This interactivebook required EPIC to master UX for children

Chill the Lion One of Karim Maaloul’s polygonexperiments and 2015’s most hearted CodePen

passion for everything related to digital

and we have this constant urge for quality

and creativity. This state of mind has been

conveyed in every single step of the projects

we have produced so far, and I’m sure our

clients can feel it from the first contact.

net: Talk us through a typical day in

the life of EPIC.

KM: We start the day off right with a fresh

lemon juice or cup of tea or coffee. First

thing we have our daily stand-up meeting:

together with the team, we gather to

discuss the different projects we are

certain projects (for example when it

involves kids or when there’s a need to

fulfil a very specific objective).

net: Can you tell us about your personal

polygon experiments?

KM: In the beginning, these experiments

were an attempt to learn three.js. I come

from the era of Flash and ActionScript,

and three.js brings me the same excitement

that coding a character in Flash did a few

years ago. After a few months of practice

I created Chill the lion (netm.ag/chill-280),

which became the most hearted and viewed

CodePen of 2015. Clients have started to

ask us to come up with concepts based on

these experiments, showing the same look

and feel.

net: Your interactive children’s book

Babel (babeltheking.com) is beautiful.

How did you approach the UX?

KM: Babel was created a couple of years

after my daughter was born. She was too

young to understand the story when I

started the project but it was amazing to see

what a 2-year-old little girl was capable of

doing with a tablet. She loved scratching

the clouds, and blowing on the iPad to

simulate wind. It was obvious which parts

were most appealing to her.

Children tend to be more intuitive and

spontaneous, and that’s also true when

it comes to UI and UX. Where adults like to

think before activating an option, children

are more open to trying things. That has

a huge impact when you want to build

8/18/2019 net - June 2016.pdf


june 2016

61

a seamless workflow. Watching kids

play with the app was both an invaluable

help and a ruthless eye-opener. The project

was completely different from everything

we had previously done, both technically

and in terms of storytelling and user

experience.

net: For your work with the Crop Trust,

was it difficult to balance the needs of

the client and the user?

KM: The initial request from the Crop Trust

was to rebrand the organisation, build a

strong digital presence, find new ways to

share their vision and help them to support

their endowment campaign. In other

words: it was one hell of a challenge, and

their expectations were pretty high to say

the least.

Before we started to design anything,

we spent almost a month reading, talking,

meeting with the Crop Trust teams and

stakeholders, and benchmarking other

NGOs around the world. Why did we spend

so much time on this? Because no matterhow empathic you can be, it’s impossible to

solve a problem if you do not understand it.

And it also helped us narrow the scope of

the project and define the outputs more

precisely. While we were doing this we

had to keep an eye on the bigger picture

to come up with an innovative solution.

This approach ensured we stayed on the

same page from the very start of the project

and meant the Crop Trust could give us

more freedom. And that’s what every

agency dreams of, isn’t it?

net: Tell us a bit about your Spartans

vs Hipsters game (epic.net/mmxiv)?

KM: The game started with a brainstorm

about the yearly, boring topic of the New

Year’s greeting card to send to our clients.

The idea of sending ruthless Spartans

(which were part of EPIC’s previous

branding) to kill some cuddly hipsters

appealed to everyone.

We all had a lot to learn before we

could master a multiplayer, cross-device

HTML5 game. We also created a small paper

Spartan figure with conductive ink that the

player could place on the screen of their

smartphone and use to control their

Spartan within the game.

Making this project happen required

an amazing commitment from the entire

team. There were numerous challenges,

from the creation of the paper model, to

synchronising the players with the game

engine. Plus, everyone had to fit this non-profitable project into their schedules.

net: How did you structure the project

to ensure it stayed on track?

KM: Although it’s fun to work on projects

with no brief or client pressure, we learnt

from previous internal projects that it

was vital to first define the output of the

game, what we wanted to feature and what

experience we wanted to provide. We set

OFFICE CULTURE

What little things make yourlife worthwhile?

Apps: Photoshop is my main daily tool;Sketch comes second but could quickly

become my favourite. I use Pocket to

save links to read later.

Audio: Fado [a kind of classical music

from Portugal] helps me to code.

Reading: Currently Creativity Inc ,

the story behind Pixar.

What do you haveon the walls?

Some dangerous designer wall

lamps we often bump into.

What will you do for lunch?

Today is our special monthly ‘discoverylunch’, where one of the team presents

a topic they care about. Our two Italian

frontend developers have been assigned

the mission of cooking for all of us.

What hours do you work?

As a husband and father of two, I strive

to find the right balance between work

and family time. I’m usually at the office

9am-7pm and I work for a couple of

hours in the evening.

What else do you doin the office?

Discuss animation with the frontends,

and attend way too many management

meetings. I also (sometimes) wash the

dishes then give a roasting to those

who don’t wash theirs.

Describe your working culturein three words ...Wise, mighty, visionary.

KARIM MAALOUL

Partner and creative director

Spartans vs Hipsters This popular game started out as a way to liven up the agency’s New Year card

8/18/2019 net - June 2016.pdf


62 june 2016

SHOWCASE

a list of must-have and nice-to-have

features, defined a deadline and estimated

the resources needed.

We’ve always believed it’s essential to

keep an eye on those ‘ties’ to stay focused

on the final result. Paradoxically, we also

strive to never be limited by resources

or technical constraints if we believe

something is going to improve the global

user experience.

net: How do you ensure you get the

most from these experiments?

KM: We firmly believe that experiments

help us broaden our horizons. They

enhance our technological knowledge and

expertise while broadening our creativity

and boosting our visibility and credibility.

To ensure they’re effective, we always

respect three rules.First: Do or do not, there is no try.

Whatever your experiment, just do it! Make

an end product; make something you can

use and share. Experiments cost time and

money, the least you can do is to make it

useful for your portfolio, right?

Second: Sharpen your weapons. Just as

an athlete trains before a competition to

improve their abilities and develop new

techniques, experiments are the best way

to acquire new skills. It’s these skills that

will help you when you are competing to

win the sexy project of your dreams.

Third: Have fun! Nothing great is created

without passion. Experiments must be

something you love, and be refreshing

and really foster creativity.

net: What can brands do to better connect

with their audiences?

KM: Brands could pay more attention to

what their design agency advises them to

do! More seriously, a brand is something

emotional. Most of the greatest brands are

the result of passionate, long-term and

very hard work from a dedicated team.

Because brands are so deeply involved in

building a great story for their customers,

it’s often very difficult for them to let

someone from the outside influence theirstrategy. However, we truly believe this

is the best way to find a disruptive way to

push the brand forward.

Another common mistake is that clients

muddle up what they need and what their

customers actually need. We have received

countless change requests that were brand-

oriented but certainly not aiming at making

the user’s journey easier. As with a lot of

things, empathy is the key.

TIMELINE

Key dates in the evolutionof EPIC

2009

EPIC is founded by four digital lovers

2010

First digital experiment is released:

Tweets for Honor, an augmented-reality, 3D, Twitter-based game

FEB 2011

Hires first employee

JUNE 2011

Starts developing an interactive

book for kids on iPad

2012

The team continues to expand and

moves into its current loft space

2013

NATO joins EPIC’s portfolio

2014

Releases Spartans vs Hipsters

– another personal project

SEPT 2015

Steps into the world of agile and

embraces Scrum methodology

DEC 2015

Chill the lion is the most hearted

and viewed CodePen of the year

2016

Three new team members join, and

EPIC embarks on a project with one ofForbes’ three most powerful brands

Left Work in progress forupcoming HTML5 gameTrackfinity, which will giveplayers a glimpse of whatit’s like to be a DJ

Below The EPIC teamembrace 80s fashionfor casual Friday

8/18/2019 net - June 2016.pdf


8/18/2019 net - June 2016.pdf


4

5

3

SHOWCASEHow we built

64

june 2016

HowClearleft unified a mass of brands and micrositesto create a one-stop shop for book lovers of all ages

PENGUIN BOOKS

HOW WE BUILT

(1) The sidebar anchors the core navigation, and

reinforces the fact that all site content is part of

the Penguin universe. The logo updates to reflect

the particular page content. (2) One goal was to

highlight the quality and diversity of Penguin’s

design values and heritage. The use of large imagery

(where appropriate) celebrates this and allows the

visual content to speak for itself. (3) The design

employs a system of visual containers that help

mark out different types of content and create a

hierarchy. (4) Penguin has a huge catalogue and the

team worked hard to ensure an engaging experience

across all devices, no matter what the content.

(5) After much testing and deliberation, Bliss was

selected as the new digital typeface to complement

the renewed brand system.

BRIEF

Penguin Books needed to presenta unified web presence in theUK, bringing its existing brandsand author microsites under oneroof to improve the quality andconsistency of its digital offering.Clearleft took on the challenge.

CLOSE UP

21

8/18/2019 net - June 2016.pdf


How we built

june 2016

65

BEN

WHITE

UI designer Ben brought his

experience of interaction design

to the project through modern,

responsive design

t: @iambenwhite

BEN

SAUER

As the UX lead on the project,

Ben’s expertise was used to

develop the digital strategy

w:www.redbeard.org.uk

t: @bensauer

When Penguin Books merged

with Random House it recognised

a need to unify its UK web presence

(www.penguin.co.uk ). With a number of

existing brands, from Penguin Classics

to Peppa Pig, and an audience of both

children and adults, this represented

quite a challenge. Penguin needed to

create a consistent visual language

(and HTML prototype) that would work

across all its brands while reflecting its

strong design heritage. With that in

mind, the company called in Clearleft.

net: You have described the site as an

IMDb for Penguin; can you elaborate?

BS: In a world dominated by Amazon,

you have to ask yourself why people

would visit a publisher’s site? The clear

answer is to get closer to the authors and

their titles, so we set about turning the

Penguin site into a one-stop shop for

book fans. Somewhere they could come

to hear interviews from authors, read

exclusive content, and learn about

upcoming titles. However, rather than

being limited to official content, we

wanted to draw information from

around the web – magazine articles,TV and radio interviews, and so on.

As such the project had a big content

strategy component.

net: Tell us about the research stage ...

BS: We’re big proponents of both design

research and formative usability testing

at Clearleft, so this formed a large part

of the discovery phase. We undertook

workshops and one-on-one interviews

with a range of internal stakeholders;

from brand managers to the marketing

teams responsible for delivering content

on the site. We also spoke to authors to

understand their needs and concerns.

Once we had some early concepts

ready, we tested them with a range of

potential users. This included home

visits with parents and children to

assess the navigational concepts for

Puffin and Ladybird books.

net: What are the typical user journeys

on a Penguin site?

BS: On a site as large as this there are

numerous user journeys to consider,

so we mapped each one out in detail

before jumping into design. A common

journey would involve a fan searching

for a particular author on Google.

This presented a clear opportunity to

influence the user’s experience before

they even reached the Penguin site.

To do this we recommended the

landing pages used structured data.

This would allow the pages to be seen

by Google as the canonical listing for

that author, augmenting the typical

search results with rich biographicaldata. So by the time the fan had clicked

on the link, they already expected the

page to be the authority on the author

they were searching for.

net: The project required three teams

– how were they organised?

CK: The engagement started with a

three-month discovery phase in which

we ran workshops, interviewed brand

CLARE

KIRKLAND

Clare was responsible for

facilitating and managing

the project delivery, and

embedding agile practices

w: clearleft.com

TIMELINE

The key stagesin the project

NOVEMBER 2014

Planning and discovery to determine the

strategic direction, focus and product

backlog for the first release

FEBRUARY 2015

Two-week production sprints for the

Consumer and Corporate workstreams

MAY-JUNE 2015

UX and design work starts on the

Children’s workstream, using the

modular design language established

by the Consumer workstream

JULY 2015

In-depth testing sessions and

focus groups take place for the

Children’s workstream

AUGUST 2015

The high-fidelity HTML prototype for

the Consumer stream is finished

MID AUGUST 2015

A manual conveying the design strategy

is passed on to the internal Penguin team

so they can continue to develop the site

SEPTEMBER 2015

UX and design work across all

three workstreams completes

FEBRUARY 2016

Launch of Corporate, Consumer

and Children’s websites

8/18/2019 net - June 2016.pdf


4

5

SHOWCASEHow we built

66

june 2016

6

1

2

EVOLUTION

A look at the sketches, wireframesand moodboards that led to

the final design

(1) During the discovery stage, Clearleft started

to develop user personas with the client based

on research and business intelligence. (2) The

next stage was to map the user journeys for

these specific users, with a user story mapping

technique and lots of Post-Its. (3) Once a clearer

idea of specific user stories had been developed,

the team ran co-design low-fi sketchingsessions with business stakeholders to get their

input into the design process. (4) The ideas and

thoughts from the sketching sessions were

consolidated and iterated into more detailed

concepts. (5) The team began to explore the

UI design system using moodboards.

(6) The moodboards were iterated and

developed into early design ideas. These were

then iterated into the final designs, with input

from the client and dev teams.

3

8/18/2019 net - June 2016.pdf


Author hubs Enabling users to get closer to authors was a key aim for the project. Individual author hubsaggregate relevant and interesting content, along with author details

How we built

june 2016 67

owners and authors, and put a roadmap

in place. We then spent several months

working with the Penguin brand agency

to develop a consistent design language

that would work across all its various

brands. At that point we split into two

separate teams: one focusing on the

adult consumer proposition and one

focusing on the children’s brands. We

also introduced a third team, responsible

for the new corporate site.

net: Tell us about some of the key

design features.

BW: We developed a design system

that was consistent within the Penguin

brand whilst allowing other brands

(such as Jamie Oliver or Puffin) to

express themselves. An example of

this is the sidebar design, which is

reminiscent of a book spine and anchors

the page in the Penguin universe. The

contents of the page and the hero image

– much like a book jacket – allow the

individual brands to shine.

net: How did you pick the typefaces?

BW: Penguin historically used Avant

Garde as its primary brand typeface,

but the project highlighted the need for

a new digital typeface to compliment

the renewed global brand system. We

agonised over the details – choosing

a new typeface for such a well-known

brand is no small task! We finally settled

on Bliss; a natural, humanist typeface

by Jeremy Tankard. Apart from looking

great and working excellently on screen,

it has a fitting Englishness we thought

would be perfect for Penguin.

net: Did you build the entire site from

scratch? What tech did you use?

BW: We designed everything from

scratch, providing Penguin’s technology

partners at Cognifide with a responsive

prototype to help guide implementation.

The project was built on top of Adobe

Experience Manager, a decision that was

made before we joined the project.

net: How did you approach the task of

importing Penguin’s legacy content?

BS: A significant amount of existing

content needed to be moved to the new

platform. Fortunately this was handled

as part of a separate re-platforming

exercise that took place in parallel with

the design process. Due to the new

strategy, a considerable amount of

content needed to be created from

scratch. We provided support in the form

of content strategy and data structures,

but most of the heavy lifting was done

by the PRH marketing team.

net: What was the biggest technical

challenge you faced?

BS: Designing for a platform that saw

responsive design as a series of device-

specific breakpoints, rather the layout

being dictated by the content. As a result

the initial launch isn’t as responsive as

we would have hoped. However, in true

MVP style, this is being worked on as we

speak and more nuanced breakpoints

will start finding their way into the site

as the platform is developed over time.

net: Was there anything you wanted

to include but couldn’t?

BW: Oh, there are plenty of things that

didn’t make the initial launch, and have

been lined up for future releases. These

range from small design details, through

various content types, to features like

ecommerce. So we expect to the see

the site continuing to evolve over the

coming months and years as the internal

PRH team take ownership of the product

and release its full potential.

Next month: Behind the scenes’

on Fantasy’s site for The MetChildren’s stream The Puffin and Ladybird brands formed a separate stream, aimed at younger readers

8/18/2019 net - June 2016.pdf


FEATURESCover feature

8/18/2019 net - June 2016.pdf


69

Cover feature

june 2016

69

Cover feature

ith five browsers regularly releasing

bigger and better versions of their

embedded developer tools, the outlook

for web developers has never been

rosier. These tools are indispensable for

building, debugging, analysing and optimising our

sites and web apps.

In recent years, the Chrome and Firefox DevTools

have innovated at a breakneck pace to provide a

superior debugging environment. Microsoft’s Edge

has also made great steps forward, and Opera’s tools

are now in complete parity with Chrome.

Below are 20 tips to help you get even more from

your DevTools. If you’re new to Chrome’s DevTools

check out Katie Fenn’s great tutorial on page 104.

01 EXPAND ALL NODESThe Elements panel shows the Document

Object Model (DOM) tree of the current page

and is the first panel that appears when we hit F12

on Windows or ‘cmd+alt+I’ on Mac. In Firefox this

panel is called the Inspector, while in IE/Edge it is

called the DOM Explorer.

When you right-click on the page and inspect an

element, the DOM tree is automatically expanded

to reveal that element within the pane. We can also

drill down the DOM tree using the triangular arrow

to the left of each element. In Chrome, Firefox,

Opera and Safari, holding down Alt whilst clicking

that triangle to open a closed element will expand

every node underneath, providing you with fast

and full visibility of all the element’s children.

02MOVE ELEMENTSYou can drag and drop elements within

the DOM tree to change their position in

the document. Simply click and drag the element

into the position you want it, and a line will appear

showing where it will be placed.

03

INCREMENT CSS VALUESStyles applied to the elements in the DOM

are displayed in the Styles panel shown to

the right of the DOM tree. In Firefox, this panel is

called Rules. From it, you can modify the values for

any CSS property currently applied to your elements,

as well as adding new properties and values.

We can adjust numerical property values such as

margins, padding, borders, width, height, rotations

and even colour, using the cursor keys. The Up or

Down keys will increment or decrement the value

by a unit of 1. Holding the Shift key while pressing

AUTHOR

ANDI SMITH

Andi is the director of

web development at

ideas and innovation

agency AKQA. He blogs

at andismith.com andtweets at @andismith

ILLUSTRATION

ANDREA MANZATI

Andrea is an Italian

illustrator based in

Verona. His client list

includes The New York

Times , Bloomberg ,

Wired , Wallpaper*

and Computer Arts

www.alconic.it

BOOST YOURDEVTOOLS

KNOWLEDGEThe browser developer toolshave become indispensable

for web development.Andi Smith introduces 20

new techniques you can useto get the most from them

NEW SKILLS

8/18/2019 net - June 2016.pdf


Up or Down will change the unit to 10, while holding

the Alt key will change the unit to 0.1. In Chrome

and Opera, you can also use the mouse wheel to

adjust the value.

04 VIEW THE BOX MODELThe CSS Box Model describes the space taken

by each element, including margin, padding,

border, width and height. These values are used by

the rendering engine to calculate the rectangular

space taken up by the element, and ultimately the

layout of our page.

As modern web developers we often simplify our

layout calculations by configuring the Box Model so

the border and padding are included in the width

and height values. We use the following CSS:

body * { box-sizing: border-box; }

With an element selected in our DOM tree, we can

view the CSS Box Model of this element within the

Styles/Rules panel. In Chrome and Opera, this is

found under the Computed tab. In Firefox it is in

the Box Model tab; in Safari the tab is called Metrics,

and in IE/Edge it is called Layout.

Hovering over the Box Model diagram with your

mouse in Chrome, Firefox or Opera will apply

a coloured shade to the relevant element and

properties on the page, so you can visualise your

layout. You can edit the values of the Box Model

just by clicking and changing them.

05STYLE PSEUDO-CLASSESWe can force the display of CSS pseudo-

classes like :hover and :focus from within

DevTools. This enables us to style and debug these

element states without having to interact with them.

DEBUGGINGPERFORMANCE

The Timeline panel in Chrome and Opera

and the Performance panel in Firefox and

Edge provide detailed views of the frontend

performance of your page, mapping a recorded

timeline of events against the frame rate, CPU

and memory usage.

To reduce the amount of data collected, each

recording should focus on a particular action or

event. So if we want to test our navigation menu

opening and closing, we should avoid scrolling

the page during our test.

The overview of the captured recording

displays a number of useful charts (see image

above). You can focus in on different things by

selecting and highlighting part of the chart.

The top green chart displays our frames per

second (higher values represent higher FPS).

In Chrome and Opera, the red blocks above the

chart indicate where drops in the frame rate

and juddering (jank) occur

The bar chart below shows the network

requests, with lighter areas representing

response waiting times and darker areas

representing transfer times

In Chrome and Opera, the area chart

shows what CPU resources were used

during the events. If the Screenshot option

is checked, we can see a breakdown of how

the page displayed during the test. Checking

the Memory option shows how memory

is handled

In addition to the overview, a waterfall chart

shows the operations laid out sequentially,

while the flame chart (toggled in Chrome and

Opera using the View option) shows the call

stack. Clicking an item in these charts displays

a breakdown of the time this operation took.

This performance information can help us

locate code that is causing delays as well as

showing bottom-up scripts.

Box model Hovering over

the Box Model diagram

will colour in the relevant

element and properties

on the page

Recording performance The ‘record’ button in the

top left allows us to make a capt ure to analyse

8/18/2019 net - June 2016.pdf


june 2016

71

Cover feature

At the top of the Styles/Rules panel is an icon

that will enable the other states. Depending on the

browser, the icon is either a pin icon, three small

boxes, or the letters ‘:hov’ or ‘a:’.

In Safari, right-clicking on an element in the DOM

tree view of the Elements panel will show a menu bar

where ‘Force pseudo-classes’ is an option.

In Chrome, Firefox and Opera, whenever we turn

on a pseudo-state, an orange indicator will appear

next to the element. The :before and :after pseudo-

styles for an element can be found below the main

list of styles in Chrome and Opera.

06INFLUENCE CSSIn Chrome and Opera, long-hovering

over a particular CSS selector in the Styles

panel will highlight where it is being used on the

page. With an element selected, we can turn on

and off individual CSS classes to see what they are

styling. Simply toggle the ‘.cls’ option in the Styles

panel, then check and uncheck each class name.

07PICK COLOURSChrome, Opera, Firefox and Edge all offer

a colour picker to enable you to choose and

define the colours for your page. To access the colour

picker, click the swatch next to any colour property

within the Styles panel.

In Chrome and Opera, you can toggle the colour

value between hex, RGBa and HSLa using the arrow

icon alongside the value. You can also see a palette

showing the colours that are already being used on

your page in Chrome, Opera and Edge, as well as

creating a custom palette and a palette containing

the Material Design colours.

08DOCK THE DEVTOOLSEach of the developer tools can be

repositioned to one of three options: dock to

the bottom, dock to the right, or a separate window.

The docking option can be found in the top-right

corner of the DevTools (or top left in Safari). The

keyboard shortcut ‘cmd+shift+D’ will toggle the last

two chosen options in Chrome, Firefox and Opera.

In Edge, ‘ctrl+P’ will toggle between docking to the

bottom and a separate window.

09INSPECT MEDIA QUERIESWe can see how our web page will appear

on different screen sizes using Responsive

Design Mode. In Chrome and Opera, this is toggled

by pressing the devices icon to the left of the top

bar; while in Firefox the icon is a resizing square.

Firefox offers a series of differing width and height

combinations to try, with the ability to type into the

Left Don’t forget you canpress the ‘Pretty Print {}’icon to un-minify sourceJavaScript in Chromeand Opera

Right The colour pickerin Chrome allows for thecreation of custom palettes

Long-hovering overa particular CSS selectorwill highlight where it

is being used

8/18/2019 net - June 2016.pdf


72

june 2016

FEATURESCover feature

drop-down field to add additional sizes. IE and Edge

offer similar options to change display size within

the Emulation panel.

As well as a list of devices and the ability to

customise your own, Chrome and Opera offer an

additional Media Query Inspector (found under

‘More Options > Show Media Queries’) that enables

you to quickly view and change between each of your

breakpoints. These browsers also offer the ability to

throttle network speed and adjust round trip time

(RTT) to simulate slower networks.

10ENABLE EXPERIMENTSThere are a number of extra features in

the DevTools that aren’t quite ready for

mainstream release, but can provide some extra

Top Chrome’s Responsive

Design Mode has an

assortment of features

Right Microsoft is taking

the DevTools seriously with

a dedicated Twitter account

providing help and feature

updates

debugging functionality, as long as you’re willing

to accept they may not be stable.

Enable them by typing ‘chrome://flags’ into the

address bar in Chrome (or ‘opera://flags’ in Opera)

and then hitting ‘Enable’ on the option for ‘Enable

developer tools experiments’. New functionality can

then be toggled on and off from within the Settings

menu under the Experiments tab.

Current experiments include an Accessibility

and Promise inspector, and a layout editor for

changing margins and paddings (accessible from the

Style panel). You can find even more experimental

features in the Chrome DevTools by pressing the

Shift key six times when on the Experiments tab.

These include experiments to display a contrast line

in the colour picker; CPU throttling and showing a

GPU data graph on the Timeline panel.

Firefox also lets users turn on experimental

features individually from its settings menu.

11DEBUG ANIMATIONDebugging CSS animations can be difficult

at times, but Chrome, Firefox and Opera

have turned their attention to making this process

easier. Each has provided new features to enable

you to analyse how your animations are playing

and working together.

To play and replay animations at different speeds

in Chrome and Opera, use the Animations panel

accessible from the Console tray (press Esc to toggle

open), or the Animations panel in Firefox.

The controls allow for the debugging of CSS

transitions, CSS animations and the Web Animations

API (netm.ag/wilson-280). From the Animations

panel in Chrome/Opera there is also live editing of

animation timings and delays, with a drag-and-drop

interface for further debugging.

12 DEBUG ANIMATION EASINGAlongside each CSS transition and animation

style that contains an easing property,

you can find a swatch. Clicking this will open up

an easing debugging menu with predefined easing

options, together with a graph tool allowing for

greater customisation and live previews.

13MONITOR EVENTSThe Console panel is great for logging

debugging information about your web

page and entering JavaScript to interact with the

document. In Chrome, Opera and Safari it can

also be used to monitor and log events.

To monitor a particular event use:

monitorEvents(elem, 'eventType');

8/18/2019 net - June 2016.pdf


Android extras On Android you can even screencast your device back toDevTools by hitting the icon in the top right

Top Chrome’s FPS meterand new AnimationInspector in action

Left In the easing editorthere are a numberof predefined optionsavailable, together with agraph to customise easing

DEBUGGING DEVICES

All of the browsers offer the option to view your

responsive pages at the dimensions of popular devices

with emulated user agent strings. However, the rendering

engine on those devices is likely to differ from the one on your

development machine. We can test more accurately by

attaching devices to our machine and using the DevTools.

ANDROID

Chrome can be used to test Android devices like so:

On your Android device, go to the Settings icon and select

Developer Options. If the option is missing, go to About

Phone and tap the build number seven times

Select the USB debugging checkbox and press OK at

the prompt

Connect the device to your computer with a USB cable

In Chrome on your desktop, type ‘chrome://inspect’ into the

address bar

A prompt to allow desktop access will appear. Press OK

The Chrome Inspect page will display the device’s open tabs

and any WebViews with debug enabled. Click Inspect next

to the tab you wish to debug to begin

iOS

Safari (Mac only) can be used to debug iOS devices like so:

Open Safari and make sure the Develop menu is enabled

by going into ‘Preferences > Advanced’

On iOS go to the Settings icon; select ‘Safari > Advanced’

and enable Web Inspector

Connect your iOS device to your computer using a USB cable

Open Safari on your iOS device

Go to the Develop menu. Your device should be listed,

together with each open tab

If you wish to use Chrome or Windows to debug iOS pages try

the iOS Webkit Debug proxy at netm.ag/proxy-280 .

Where elem is the element you wish to monitor

and eventType is the event (for example, mouse , click ,

keydown , touch , resize or scroll ). If the element you

wish to monitor is currently selected in the Elements

panel, you can use $0 to access it.

To stop monitoring events use the command:

unmonitorEvents(elem);

14RE-RUN CONSOLECOMMANDSAfter running a command in the Console

panel, simply press the Up arrow to reveal a history

of previous console commands. To re-run one,

hit Enter.

15CHANGE FRAME FOCUSIf your web page contains one or multiple

iframes (as is often the case with tools

like CodePen, JS Bin and JSFiddle), debugging the

right frame from within the console can prove

a challenge. You can target the frame from the

DevTools console by selecting the frame from

a drop-down list found at the top of Chrome and

Opera’s console window; or with the frame selection

icon in the top-right of Firefox’s menu bar. Safari

offers the same option to the right of the console

command line.

16EMULATE GEOLOCATIONGeolocation can be emulated in Edge

from the Emulation menu. In Chrome and

Opera, geolocation and the accelerometer can be

8/18/2019 net - June 2016.pdf


74

february 2014

emulated by selecting ‘More Tools > Sensors’ from

the menu on the right-hand side. Geolocation allows

you to override your position with another set of

longitude and latitude coordinates, or emulate an

unavailable position.

17EMULATE ORIENTATIONAccelerometer emulation can be found in

the same panel as geolocation in Chrome

and Opera. This allows you to change the alpha, beta

and gamma values of the device orientation:

Alpha represents the motion of the device around

the Z-axis from 0 to 360 degrees

Beta represents the motion of the device around

the X-axis from -180 to 180 degrees, resembling

a front-to-back motion

Gamma represents the motion of the device

around the Y-axis from -90 to 90 degrees,

resembling a left-to-right motion

Changing the values will trigger a deviceorientation

event, which you can test with: monitorEvents(window,

'deviceorientation'); .

18RUN A PERFORMANCE AUDITYou don’t need to be an expert in how

network traffic and pages render to find

useful tips for how to speed up your site. Chrome

and Opera both provide the ability to audit, and

offer advice on how to improve the network and

page performance.

To run an audit, select the Audits panel, choose the

tests you want to execute and hit Run. The network

audit will identify bottlenecks in your site load (such

as large image sizes); while the performance audit

will identify ways to speed up your page (such as

removing unused CSS rules).

19FILTER RESOURCESThe Network panel in each browser shows

a list of resources that have been requested

during page load, together with the status code,

the file size and the amount of time it took for the

request to return. The accompanying waterfall graph

visualises the time spent loading each of these

resources onto the page.

While the resource list can be filtered by type

(such as CSS, images or XHR) in each browser,

Chrome and Opera also allow for advanced filtering

in their search boxes, with the following prefixes:

domain : To filter resources from the specified

domain

larger-than : For file size

Top left Firefox’s DevToolshave caught up with

Chrome’s, offeringa ton of great featuresand functionality

Top right Emulating deviceorientation with Chrome

DevTools

Below Find quick wins for

improving performanceon your website with theAudits panel

8/18/2019 net - June 2016.pdf


june 2016

75

Cover feature

New features Chrome

Canary offer the latest and

greatest DevTools features

for you to try

mixed-content : For filtering resources loaded

through HTTP on a secure site

status-code : To filter on a particular status code

(such as ‘404 not found’).

A number of extra columns are also available in

Chrome and Opera’s Network panels that can

provide further useful information. These include

Cache-Control and Initiator. You can toggle columns

on and off by right-clicking any of the headers.

20DEBUG ASYNCHRONOUSLYThe Sources/Debugger panel allows you

to add breakpoints and walk through your

code, watching variables and examining the call

stack as you go. By watching a variable you can

monitor its value as your program is executed.

To add a watch, just type the name of the variable

into the panel on its right-hand side. The watch

will keep its value up to date as you step through

your code.

With Chrome and Opera you can also view the

full call stack of asynchronous JavaScript callbacks

and promises by checking the Async box in the

right-hand corner. When you walk through the call

stack, the watch values will also update to their state

at the time. You can make debugging the call stack

easier by naming callbacks rather than making them

anonymous functions.

SUMMING UPBrowser developer tools can be invaluable when

developing and debugging web projects. It really

is worth investing the time to experiment and

explore the DevTools in your browser of choice so

you get to know how it all works. And with new

features appearing all the time to address classic

problems (such as a layout editor) and help debug

brand new web functionality (like the Sources

Service Worker panel), it has never been more

important to stay up to date.

Filter resources loadedthrough HTTP on

a secure site with the

RESOURCES

Want to learn more? You can get the

latest updates for Chrome DevTools on

Google’s official developers page (netm.ag/

update-280 ), with tutorials and videos on

how to use the latest features.

Umar Hansa offers weekly DevTools tips

in the form of animated GIFs straight to your

inbox at umaar.com/dev-tips , and you can find

more advice at devtoolsecrets.com . Or follow

@chromedevtools, @firefoxdevtools or

@edgedevtools on Twitter.

LIFE ON THE BLEEDING EDGE

If you want to stay on the cutting edge,

the preview versions of each browser will

often reveal new DevTools features weeks

before they arrive in the main release. This

also means you can provide feedback to the

browser developers.

Chrome Canary: netm.ag/canary-280

Firefox Developer: netm.ag/firefoxdev-280

Opera Beta:www.opera.com/computer/beta

Webkit Nightly: nightly.webkit.org

MORE FEATURES

Chrome DevTools can be extended with

plugins to add extra features, such as the

ability to debug JS frameworks and build

tools: netm.ag/extend-280 .

8/18/2019 net - June 2016.pdf


8/18/2019 net - June 2016.pdf


Second feature

june 2016

77

Have you ever wondered how

sites like Facebook or apps

like Snapchat get users to

come back again and again?

It’s not magic; whether

they know it or not, they are using

psychological tools that play on our

emotions and biological instincts.

The fascinating thing is that humans

usually don’t realise why we are drawn

to something or moved to do something

at first. Studying the psychological

triggers that spur users on will help us

understand how to utilise these to make

more effective products.

At ZURB, we utilise psychological

triggers and patterns to increase

engagement with the products we

design. Over the last two decades,

we’ve helped over 300 companies do

just this. In this article, I’ve pulled

together 10 techniques we use at

ZURB to help us build addictive

and effective products.

01 FAMILIARITY BIAS

People are naturally biased

towards things they find familiar. People

like and trust what they know; change is

scary and uncomfortable. That’s why the

best new products and experiences use

familiar patterns.

Familiar moments create trust, while

unfamiliar patterns create confusion

(at least at first). When the pull-to-

refresh option was first introduced onTwitter, many people were baffled. Now

that interaction is near-universal. With

repeated exposure, users can develop

a fondness for things that they initially

disliked or didn’t understand.

AUTHOR

JENN TANG

Jenn (@happyim

adesignr) is a product

designer at ZURB.

She joined the company

to do what she does

best – solve problems

and create beautiful,

smart designs

10 WAYS TO

GUIDE PEOPLEWITH DESIGN Jenn Tang explains how

designers can pull emotionaland cognitive strings to guideusers through their products

and drive engagement

8/18/2019 net - June 2016.pdf


78

june 2016

FEATURESSecond feature

Often, the best design comes from iterating on

someone else’s ideas. Successful products are

built using patterns that have proven effective

in other places. A deeper look at these patterns

reveals that they play on human psychology and

behavioural tendencies

There’s an almost unlimited wealth of research

and data on these topics available for curious

designers to pick through, but that also presents

a challenge – it’s literally everywhere. The research

is so plentiful and so spread out that it takes

a tremendous amount of time and effort to pick

out the applicable gems.

ZURB set out to collect the psychological

motivators in a product design resource library

called Design Triggers (zurb.com/triggers ). In it,

you’ll find a collection of common psychological

motivators, cognitive biases and behavioural

patterns that can be used to plan entire workflows

that trigger users into action.

iPhone’s patterns started to enjoy much

more widespread adoption, Apple was

able to abstract its interface by pushing

for flatter designs.

Takeaway Make it easy for users to get

to know you! Provide a tour or demo to

introduce users to your product. Familiarity

bias is powerful, so use things that are

known to your audience to help them adopt

your product faster.

02RELATIVE VALUEHave you ever suffered from

choice paralysis? Don’t worry, we all do.

It’s difficult to evaluate the cost or value

of an item on its own. People are wired to

compare. Having a starting point to help

you choose is always going to be easier

than appraising with no reference.

Not every feature needs to be new for

it to be memorable. When the iPhone

was first released, it was a very foreign

idea: it was a phone that was completely

touchscreen, with no physical keyboard,

and it used brand new gestures like

pinch-to-zoom.

The interface, however, was very

familiar. Apple designed a calendar

that resembled a physical calendar. The

iPhone’s virtual keypad looked like the

buttons from its physical counterpart.

Apple chose use familiar patterns rather

than abstract representations.

Designing the iPhone’s interface this

way meant the phone immediately felt

familiar to users. These interactions

and metaphors for the real world helped

people adapt faster while learning

how to use the new device. When the

Relative value techniques work

remarkably well in helping users

make decisions and follow through on

purchases. The tried-and-true example

of this is a pricing table. When people

are trying to make a decision, they feel

more comfortable about it if they can

compare it to something else. Making

other prices visible helps reassure them

they’ve made the right decision.

Options also make us feel in control.

The pricing table for ZURB’s responsive

email course displays pricing in three

tiers, so the user can clearly see their

different options. This helps them

evaluate what’s included in each tier

and make a better decision.

Takeaway When possible, highlight the

key features of a product in comparison to

DESIGN TRIGGERS

Hand holding Airbnb makes it easy for potential customers to learn all about the service,

with clear explanations of each feature

Show options ZURB University highlights the differences between three course options to

make it easier for potential students to choose what’s right for them

8/18/2019 net - June 2016.pdf


june 2016

79

Second feature

other packages or even to competitors. This

makes it easier for users to make a decision

and determine which option will provide the

most value.

03 BANDWAGONWhether it’s signing up for a

new app or sharing a new meme, we’ve

all jumped onto a bandwagon at one

point or another. That’s because we, as

consumers, are easily swayed by the

behaviour and opinions of others.

When people see others enjoying a

product or service it impels them to try

it out as well. Even if their own personal

interest in the product is low, seeing

that friends, family or large numbers

of people have joined already heightens

their curiosity.

FOMO (‘fear of missing out’) can

be a powerful trigger. When creating

products, you can home in on this

by highlighting the ways people are

enjoying your product.

If a product is new, there are methods

that can be employed to suggest it hasa much bigger community than it may

have in reality. For example, including

imagery of people using the product

or service can give the illusion that

many people are already benefiting

and enjoying the experience.

Takeaway Highlight the activity of users’

connections to demonstrate the popularity

of the product or the benefits of specific

features. The greater the number of users

someone perceives a product to have, the

more likely it is they will be swayed.

04 AUTHORITYWhen people are told to do

something by an authority figure, they

tend to obey the direction and rarely

question it. Authority can trump our

own instincts.

There was a classic experiment

at Yale University by psychologist

Stanley Milgram that demonstrates the

strength of this phenomenon (netm.

ag/milgram-280). When someone

posing as the teacher instructed study

participants to administer an electric

shock to another man posing as a fellow

student when they answered a question

incorrectly, 65 per cent of participants

obeyed even though didn’t want to.

Why? Because they had been instructed

to by an authority figure.

As designers, we can establish our

organisation as an authority in its space

through building trust. Infographics and

statistics can help users see the value in

something and show your organisation

is reliable.

Like many other companies, on its

website Campaign Monitor supports

its offerings by featuring testimonials

from big, trusted brands like Airbnb and

37 Signals. If the user has had positive

experiences with any of those othercompanies, they will be inclined to feel

positively about Campaign Monitor

before they even start using its services.

Takeaway By establishing authority

through testimonials, data and reviews,

designers can build trust in a product.

Make testimonials and data clearly visible

on websites and place them strategically

around barrier points.

Designers can buildtrust in a product byestablishing authoritythrough testimonials,

data and reviews

On the bandwagon Services like Foursquare highlight

which of the user’s friends are signed up to t he tool

Authority figure Campaign Monitor brings attention to the trusted brands that use its tools and services

8/18/2019 net - June 2016.pdf


80

june 2016

FEATURESSecond feature

Takeaway Play on our instinctive drive

to succeed by giving users achievable goals.

Make it social so they can compete against

friends, to increase user engagement and

satisfaction. Go for the win!

07 ZEIGARNIK EFFECTHumans love to complete things.

It’s satisfying to finish and celebrate.

Tasks that remain uncompleted can

linger in people’s minds even after their

attention has been focused towards new

goals. It’s often easier to recall details of

uncompleted tasks – the closure gained

from completing a task frees you from

the responsibility to remember it.

LinkedIn does a great job of getting

users to do things with its stepped

approach. It uses notifications to inform

users of how complete their profiles are,

as a percentage. This plays on users’

desire to finish things and encourages

them to figure out how they can reach

100 per cent completion.

Takeaway The key is to get people to start

something so they want to complete it. Make

Understand that users will extend their

opinions about how a site looks to make

assumptions about its credibility and

backend functionality. Paying attention to

usability alone isn’t enough – for people to

use your site, it also needs to look good.

06 ACHIEVEMENTWe have a biological drive to

succeed. In turn, achieving our goals

makes us feel good and increases our

motivation to take on more challenges.

People want to be rewarded for their

efforts and enjoy being pitted against

others to demonstrate they have the

drive to succeed. Nike+ and Fitbit have

capitalised on this desire to win with

their leaderboards. Not only do these

help people reach their goals, they also

promote more engagement with the

companies’ products.

However, keep in mind that while your

users may enjoy competition, no one

likes something that is completely out

of their reach. Learn from Fitbit, which

calculates its leaderboard for each week,

instead of an overall basis.

05 FAITH IN AESTHETICSPeople judge a product by its

appearance first, before considering

its content. The visual design affects

more than just surface aesthetics; users

often describe more attractive sites as

easier to use.

When presented with the option

of a brand name medicine like Bayer

Aspirin or a generic pharmacy brand,

most people automatically feel like

the brand name is better quality.

Why? It has a lot to do with the design

and look of the packaging.

Humans judge if something is

trustworthy or not within seconds.

For most people, the more attractive

something is, the more trustworthy it

seems. In a study asking people if they

would trust a health website, 83 per cent

of negative comments stemmed from

the aesthetics rather than the content,

criticising things like the visuals, text

size or the name of the site.

Takeaway Don’t underestimate the

power of beautiful and consistent design.

Appearances first A better designed product inspires more trust than generic options

For the win The Nike+ Challenge leaderboard inspires users

to engage in some friendly competition

Stepped approach Weekend Getaway look by Polyvore. Asking customers to follow just just four simple steps to

complete a look means they are unlikely to abandon the process

8/18/2019 net - June 2016.pdf


june 2016

81

Second feature

barriers to entry low and vary the length of

steps to keep people motivated.

08 SELF-EXPRESSIONUsers feel a stronger connection

to products that reflect and display their

own sense of identity. Customisation

provides a way to transform products

into unique versions that represent each

user’s sense of self. When people can

add something to a website to make it

more personal to them, they feel more

ownership of it.

Nike allows its customers to customise

the colours of their trainers, so they

aren’t stuck with the colours a company

has defined for them. The standard

options may not quite reflect someone’s

personality and could be deterring them

from buying. People perceive things they

own (or create) as being more valuable,

and in turn want to show others how

unique they are.

Takeaway Find ways to make the user

experience feel more personalised and less

transactional and cold. Don’t be afraid to

have a little fun. Letting your users show

off their style in a small way can boost their

enjoyment of an app, website or product.

09 RECIPROCITYHumans don’t like the feeling of

owing anything to anyone. When people

receive a gift or someone does them a

favour, they feel socially obligated to

return the favour. Designers can use this

to their benefit by providing something

exclusive as a gift. This can keep that

feeling of indebtedness on users’ minds.

Offering free samples or trials is a great

marketing strategy.

Takeaway Start giving before you

giving something for free to create a feeling

of obligation.

10 SURPRISE AND DELIGHTUnexpected perks can increase

levels of user satisfaction and make an

experience more exciting. Interesting

rewards produce increased levels of

dopamine in the brain.

Give a little extra thought to a product

to include exciting and unexpected

details. Surprise is an addictive feeling

and turbo-charges emotions to foster

loyalty in your products.

Takeaway Surprise your users with a

special birthday gift, even if it’s just a note

in their inbox. Or delight your users with an

Easter egg – it’ll keep them coming back and

they might even share it with their friends.

GUIDE YOUR USERS TO SUCCESSAmong many other things, being a

product designer means understanding

how users make decisions. Since the

invention of advertising, we have been

aware of a number of emotional and

cognitive triggers. Designers can pull

on these strings to help encourage users

to adopt their product.

Unlike a design trend, which may

change in less than a year, these triggers

will remain relevant for decades. When

skilfully used by a designer, these tactics

can make products more intuitive and

addictive, resulting in a more satisfying

experience for our users.

Surprise users witha birthday gift, evenif it’s just a note intheir inbox. It’ll keepthem coming back

Return the favour Roku offers a variety of free deals and trials that compel users to give the

paid service a try

Keep it unique Nike customers can make their shoes personal to them through its

customisation options

Element of surprise ZocDoc sends surprising messages to make users f eel special

8/18/2019 net - June 2016.pdf


SYDNEY 5 SEPTEMBER 2016

Generate is heading to Oz! Join us for a single-day, single-trackconference with talks on user experience, CSS and more

www.generateconf.com

TICKETS ON SALE NOW

ERIKA HALLCO-FOUNDER, MULE DESIGNwww.muledesign.com

JONATHAN SNOOKUX ARCHITECT, XEROwww.snook.ca

NICK FINCKUX SPECIALIST

JOHN ALLSOPPAUTHOR AND DEVELOPERwww.johnfallsopp.com

8/18/2019 net - June 2016.pdf


june 2016

0

0

0

0

0

Mobile/tablet

0

0

0

0

0

Desktop

Tips, tricks& techniques


EXCLUSIVE VIDEOSBROWSER SUPPORTWe feel it’s important to inform

our readers which browsers the

technologies covered in our tutorials

work with. Our browser support

info is inspired by @andismith’s

excellent Can I Use web widget

(andismith.github.io/caniuse-widget ).

It explains from which version of

each browser the features discussed

are supported.

94 104

BOOST D3.JS WITH

SVG GRADIENTS 84

DESIGN A MOBILE APP

WITH ADOBE XD 90

GET STARTED WITH

PATTERN LIBRARIES 94

ACCESSIBILITY:

DESIGNING ACCESSIBILITY 114

11 TIPS FOR ERGONOMIC

MOBILE INTERFACES 98

WEB STANDARDS:

WEBASSEMBLY 103

GET MORE FROM

CHROME DEVTOOLS 104

7 HIDDEN

GREENSOCK GEMS 108

Look out for the video icon

throughout our tutorials.

This issue, Demian Borba has

created an exclusive screencast

to complement his article on

Adobe Experience Design: take

a look to see how this new tool

helps you design, prototype and

share your digital experiences

without breaking your stride.

108

HEAD TO HEAD:

JASMINE VS MOCHA 97

8/18/2019 net - June 2016.pdf


PROJECTSSVG

84

june 2016

SVG

View source

files here!

All the files you need for this

tutorial can be found at

netm.ag/D3git-280

in a scatterplot chart, <rect> to create a bar chart,

<line> as an axis, parallel coordinates or slope

graph, <text> as labels, and the extremely useful

<path> for practically everything else. Furthermore,

SVGs are resolution-independent, thus look great

on any display or zoom level.

Even if you’re just using SVGs for their shapes,

you can create wonderful visualisations. However,

they can do much more – think of SVG filters for

example. In this tutorial, we’ll take a deep dive into

one specific aspect and look at a few different ways

it can be applied to brighten up a visualisation.

Let me introduce you to SVG gradients!

BOOST D3.JS CHARTSWITH SVG GRADIENTSNad eh Bremer

ABOUT THE AUTHOR

NADIEH BREMER

w: www.visualcinnamon.com

t: @NadiehBremer

job: Data visualisationdesigner, Adyen

areas of expertise:Data visualisation, D3.js

q: what’s the last lie

you told?

a: I said I couldn’t joinfriends for dinner dueto work, but I just reallywanted to read the newfantasy novel by BrandonSanderson

RESOURCE

One of the best booksfor learning D3 is Scott

Murray’s InteractiveData Visualization for the

Web , and it’s availableonline for free!

netm.ag/scott-244

D3.js has taken over the world of interactive

data visualisation. An enormous number of

examples can be found, each showcasing its own

fun and useful twist on the library. You see, D3 is

not a charting library, but something much better.

It gives you only the basic tools to create data

visualisations, and in doing so enables you to create

practically anything you can think of. Even though

some ideas might take more time than others,

you’ll get there eventually. And this freedom is

exactly what I love about D3.

At its core, every D3 visual is built out of SVG

elements. For example, <circle> for each datapoint

8/18/2019 net - June 2016.pdf


june 2016

85

SVG

LINEAR GRADIENTS

Sometimes when I create a line chart with a single

line it just feels a bit too empty and can get lost on

the white background. To make it stand out more,

I place a l ight gradient below it using D3’s d3.svg.area

function, filled with an SVG gradient (see fig 1).

I want the gradient to run vertically from the top

(where it is the same colour as the line but a lighter

shade) to the bottom (where it should become white,

or transparent). This is what is known as a linear

gradient; something that changes colour along a

straight line.

We start with an SVG. This is the canvas on which

our line chart will be drawn. We then create a defs

element onto which we can append a linearGradient

element. It’s very important to give the gradient a

unique ID – we will use this later when we need to

give the area below the line its fill.

var areaGradient = svg.append("defs")

.append("linearGradient")

.attr("id","areaGradient")

.attr("x1", "0%").attr("y1", "0%")

.attr("x2", "0%").attr("y2", "100%");

The last two lines of the code above define how the

gradient should run. Think of it as a invisible line:

x1 and y1 are the starting positions of the invisible

line and the x2 and y2 indicate its end point, to give

the direction of the gradient. It’s often easiest to

define these as percentages, although it is possible

to use exact pixel locations. By default the locations

refer to the bounding box of the element onto which

the gradient is applied. We want the gradient to run

vertically, so x1 and x2 should be the same

( 0% is fine), y1 has to be 0% and y2 100% .

Now we can define the colours of the gradient.

At least two colours are needed for a gradient, but

you can use as many as you like. For each colour in

the gradient you add a stop element. Within this you

specify the shade with stop-color , and the location

(along the invisible line) where you want this colour

to be pure (the exact colour) with offset .

Optionally, we can also set the opacity of each

colour with stop-opacity . Here I’m making the

shade slightly lighter at the top and completely

transparent at the bottom.

At its core, every D3visual is built out of SVGelements – but theycan do much more

If you’ve ever looked up anything about D3.js before, it’s

very likely you’ll have come across a D3 example hosted on

bl.ocks.org . This page by D3’s creator Mike Bostock has become the

prime location for the D3 community to share (small) visualisations

or code samples. The diversity of char ts and useful functions found

on this page is mind-boggling, and it’s an extremely useful resource

for those creating visualisations with D3.

However, it used to be quite a hassle to get your code into

a block (and even more so if you wanted to start or fork from

another block), because you had to create and adjust your code

on a local server and then upload and commit it to GitHub’s gists.

But those days are over, thanks to the introduction of Block Builder

(blockbuilder.org ). Created in 2015 as a Kickstarter project by Ian

Johnson, it is especially useful for those starting with D3 who

are not used to working in a terminal.

You can start with a blank slate or copy/fork over someone else’s

example and edit the code directly in the browser. The results of

your changes will be displayed immediately in the frame at the top

of the screen, so there’s no need to continually switch between

code editor and browser while you tr y and find a result you’re happy

with. You can also add new files, and even upload a small thumbnail

of the block’s result. Everything you save will become part of your

own block gallery. Check out the 3-minute video on blockbuilder.org/

about to learn how easy it is to use!

BLOCK BUILDER

FOCUS ON

D3 in the browser A screenshot of the Block Builder website showing the

interactive visualisation at the top and the code below

8/18/2019 net - June 2016.pdf


PROJECTSSVG

86

june 2016

areaGradient.append("stop")

.attr("offset", "0%")

.attr("stop-color", "#21825C")

.attr("stop-opacit y", 0.6);

areaGradient.append("stop")

.attr("offset", "80%")

.attr("stop-color", "white")

.attr("stop-opacit y", 0);

Now the linear gradient is set up, we can create an

area chart and f ill it with the gradient. To do this,

use url(#gradient-ID) in the fill style, along with the

unique ID we set earlier.

svg.append("path")

.style("fill", "url(#areaGradient)")

.attr("d", areaFunction(dataset));

Afterwards, draw the line on top of this area of the

chart so the viewer can read results off your graph.

In my chart, I’ve also placed circles to emphasise

the locations of specific data points.

A SMOOTH LEGENDLegends are very common in data visualisations.

When you’re using colours to represent a particular

aspect of your data, you need to explain what each

colour means. This is where a legend comes in.

In some charts, you will be using colour to

discriminate between discrete cases (for example,

different countries), in which case the colours are

often all very different. However, you can also

use colour to indicate a quantitative value.

Here we’re representing the temperature outside

(see fig 2). The colour changes gradually to indicate

the temperature going from low to high. To show

this in a legend, we’re going to create a long

rectangle and fill it with a gradient going from left

to right. We can reuse the gradient we created for

our line chart, but flipped by 90 degrees (so x2 now

runs to 100% , rather than y2 ). Although generally

a rainbow palette is not recommended in data

visualisation, people are used to seeing colourful

temperature maps, and I’ve chosen nine colours to

use in our example.

Instead of writing out each stop to append,

we can put all of the colours in a dataset and use

D3’s nifty data step to make the process quicker.

With D3 it is possible to access any property of the

dataset in the subsequent chaining steps using

an anonymous function, thereby enabling us to

set the colour and offset in just two lines.

svg.append("defs")

.append("linearGradient")

.attr("id", "legendGradientMulti")

.attr("x1", "0%").attr("y1", "0%")

.attr("x2", "100%").attr("y2", "0%")

.selectAll("stop")

.data([

{offse t: "0%", color: "#2c7bb6"},

{offset: "12.5%", color: "#00a6ca"},

{offset: "25%", color: "#00 ccbc"},

{offset: "37.5%", color: "#90eb9d"},

{offset: "50%", color: "#ffff8c"},

{offset: "62.5%", color: "#f9d057"},

{offset: "75%", color: "# f29e2e"},

{offset: "87.5%", color: "#e76818"},

{offset: "100%", color: "#d7191c"} ])

.enter().append("stop")

.attr("offset ", function(d) { return d.offset; })

.attr("stop-color", function(d) { return d.color; });

Like before, the final step is to create a rect and fill

this using the unique gradient ID.

svg.append("rect")

.attr("x", 0).attr("y", 0)

.attr("width", 500).attr("height", 20)

.style("fill", "url(#legendGradientMulti)");

Figure 1 A smooth SVG

gradient applied to an areachart that lies below theline chart

Figure 2 The gradient of different colours represents the temperature in alocation, explained in a legend below (based on www.weather-radials.com )

8/18/2019 net - June 2016.pdf


june 2016

87

SVG

The charts these legends go with are recreated

after the fabulous work of www.weather-radials.com

showing the temperature in New York or Beijing

in 2015. The average temperature each day is

indicated by a coloured line, and these lines are

arranged to form a circular graph. The legend below

explains what each colour means. One graph uses

a gradient from one colour to another, and the other

progresses through all nine colours.

DATA-BASED GRADIENTSIn a manner similar to the previous example, we

can also create multiple gradients. We could make

a unique gradient for each data point, based on a

particular aspect of the data. I used this approach

in an exoplanet visualisation (fig 3, nbremer.

github.io/exoplanets), where each planet was given

a gradient based on the stellar class of the star

it orbits. I used a subtle sphere effect to give the

impression each was lit by the star in the centre.

So let’s go back to the 90s and turn a collection

of flat circles representing the planets in our

own solar system into 3D-looking spheres with

radial gradients (fig 4). I’ve created a small dataset

containing the planet’s name and diameter. Each

will be generalised by one colour, which we’ll use

to create a unique gradient for each planet.

var gradientRadial = svg.append("defs")

.selectAll("radialGradient")

.data(planets)

.enter().append("radialGradient")

.attr("id", function(d){ return "gradient-" + d.planet; })

.attr("cx", "15%")

.attr("cy", "50%")

.attr("r", "85%");

The code is slightly different here: instead of first

appending a gradient element, we now immediately

append the planets dataset and only after the

enter do we create a gradient element (in this

case radialgradient ). This way, a gradient is created

for each point in the dataset. Keep each point’s ID

unique by basing it on the data. The index i usually

works, but here the planet name is safer. This

ensures we can access the correct gradient later.

Keep each point’s IDunique. This ensureswe can access the

correct gradient later

A radial gradient is slightly different to a linear

one. We create it in a similar way to an SVG circle:

supply the centre of the gradient with respect to the

object bounds to which it will be applied, using cx

and cy . These values default to 50% , which is the

centre of the object.

To simulate the appearance of a star shining on

the planets from one side, we’ll move the centre

of the gradient to the left by setting cx to 15% .

The radius of the gradient (where a gradient stop of

100% should end) is indicated by r . It also defaults

to 50% , but due to our cx offset, this is now 85% so

it fills the entire circle.

We can use the planet data to append the colour

stops. To create the appearance of a sphere that

is being shined upon, the colour at 0% should be

lighter. By using d3.rgb().brighter(k) I don’t have

to specify a separate colour, as D3 will do that

calculation for me. The value k defines how much

lighter I want the colour to become. At around

50% I set the true colour in the dataset. At the edge

I want a colour that is slightly darker, giving the

appearance of shade. Logically, there is also

a d3.rgb().darker(k) that we can use.

gradientRadial.append("stop") .attr("offset ", "0%")

.attr("stop-color", function(d) {

return d3.rgb(d.color).brighter(1); });

gradientRadial.append("stop")

.attr("offset ", "50%")

.attr("stop-color", function(d) { return d.color; });

gradientRadial.append("stop")


.attr("stop-color", function(d) {

return d3.rgb(d.color).darker(2.5); });

Figure 3 In this exoplanet

visualisation, each planet

has its own data-based

gradient, creating the look

of a sphere

8/18/2019 net - June 2016.pdf


PROJECTSSVG

88

june 2016

If you were to inspect the HTML after running

this, there would be eight different radial gradients

present. Last, we need to create eight circles, give

them a radius as defined by the data, and fill them

with the correct gradient.

svg.selectAll(".planets")

.data(planets)

.enter().append("circle")

/* Set the class, location and radius attributes ... */

.style("fill", function(d) {

return "url(#gradient-" + d.planet + ")"; });

I’ve also added the Sun, which has its own radial

gradient, but I’ve left cx , cy and r with the default

setting of 50% to make it look like the Sun is

glowing from the centre outward.

A disclaimer: Although the diameters of all

the spheres are correct relative to each other,

the distances are of course completely bogus.

And I’m sorry that Saturn has no rings.

PLAYING WITH THE ORIENTATIONSWe’ve now explored how to set colour aspects based

on data, but there are a lot more possiblities. We can

set practically everything based on data – even the

orientations of each gradient.

To try this out, let’s make a D3 chord diagram

showing the collaborations between the Avengers

in the Mar vel Cinematic Universe (fig 5). The

chords that run between the six Avengers are

sized according to the number of movies in which

they both appear. We’re going to fill these chords

with a simple linear gradient, changing from one

Avenger’s colour to another’s.

A chord is usually not exactly horizontal or

vertical. So we’ll have to set the x1 , x2 , y1 and

MARGIN CONVENTIONS

IN-DEPTH

Unique gradients For each planet in figure 4 a unique gradient element

has been created

All D3.js creations start with an SVG element, which is the

canvas on which the data visualisation is drawn. Ideally,

you would set the width and height of the SVG e qual to the chart

area. But as everything that falls outside the S VG is invisible,

this can result in clipped axis labels and ticks. There is a way to

avoid clipping, but still use width and height to specify only the

chart region: the margin convention.

First, set up the margin, width and height:

var margin = {top: 20, right: 20, bottom: 20, left: 20},

width = 700 - margin.left - margin.right,

height = 500 - margin.top - margin.bottom;

Create the SVG, giving it a size that incorporates the w idth, height

and margins. Append a <g> element and translate this by the top

and left margin:

var svg = d3.select("body").append("svg")

.attr("width", width + margin.left + margin.right)

.attr("height", height + margin.top + margin.bottom)

.append("g")

.attr("tra nsform", "translate(" + margin.left + "," + margin.top +

")");

Now the origin (0,0) location of your canvas has shifted down and

to the left with the <g> element. The benefit is that you can set

your scales to intuitive values while the axes are still visible inside

the SVG as a whole (full example at netm.ag/margin-280 ):

var xScale = d3.scale.linear()

.range([0, width]);

var yScale = d3.scale.linear()

.range([height, 0]); /* This flips the scale so it starts at the

bottom */

We can set practically anything based on data,

even the orientationof each gradient

8/18/2019 net - June 2016.pdf


june 2016

89

SVG

Figure 5 Each chord has its own unique gradient, where the orientations(and colour) are defined by the data

y2 values based on the locations of each Avenger’s

outer arc. This data is not in our original dataset,

but after we’ve supplied it to D3’s d3.layout.chord

function, we will get back a new dataset containing

the start and end angles of each arc (as d.source.

startAngle and d.target.endAngle ). This is the dataset

we supply while creating the gradients.

We need to know the pixel positions of the

invisible line that runs from one end of a chord to

the other. These are then used to give the x1,..,y2

attributes of each gradient. We can apply some

trigonometry using the radius of the chord diagram

and the location halfway along each Avenger’s arc

to get back these positions. The full trigonometric

formula has been removed from the following

code, but you will find it in the GitHub repo that

accompanies this article (netm.ag/D3git-280).

To make a unique ID for each chord we create

a string combination of the Avenger’s index value

at each end of a chord. D3’s d3.layout.chord always

sets one (of the Avengers) to source and the other

to target , which makes a unique pair. Later, when

drawing the chords, we can use the same technique

to call the correct gradient.

var grads = svg.append("defs").selectAll("linearGradient")

.data(chord.chords())

.enter().append("linearGradient")

.attr("id", function(d) { return "gradientChord-" + d.source.

index + "-" + d.target.index; })

.attr("gradientUnits", "userSpaceOnUse")

//The pixel location of one end of a chord

.attr("x1", function(d,i) { return /* ...trigonometry based on

d.source values... */ ; })

.attr("y1", function(d,i) { return /* ... */ })

//The pixel location of the other end of a chord

.attr("x2", function(d,i) { return /* ... */ })

.attr("y2", function(d,i) { return /* ... */ });

Since each Avenger is defined by its own index

number, we can make a colour function, colors ,

that returns each Avenger’s colour per index value.

This makes it easy to refer to the right colour while

appending the two colour stops.

grads.append("stop")


.attr("stop-color", function(d){ return colors(d.source.index);

});

grads.append("stop")


.attr("stop-color", function(d){ return colors(d.target.index);

});

All that remains is to call the right gradient ID

while setting the fill style of the chords (with the

same function as we used to set the gradient ID).

ROUNDING UPDuring this tutorial, we’ve looked at four different

ways to use SVG gradients in data visualisations,

but there are always more things you can do. With

gradient animations, you could simulate a flow

from one part of the data visualisation to another,

for example.

So next time you’re designing a data visualisation,

let your creativity run free. With D3.js, you don’t

have to be constrained by what you think are

the limits of the tool. With a little out-of-the-

box thinking and effort, you can make the most

amazing things.

Figure 4 Each planet’s gradient ha s been set to make it look like a sphere.Here, the four giant planets are clearly visible

8/18/2019 net - June 2016.pdf


PROJECTSPrototyping

Exclusive o!

SAVE 15% ONADOBE CC

Exclusive discount for new

Creative Cloud subscribers

See page 102 for details

90

june 2016

Y

W

DESIGN A MOBILEAPP WITH ADOBE XDDem an Borba s ows you ow A o e Exper ence Des gn CC ena es you

to design and prototype digital experiences quickly and seamlessly

PROTOTYPING

ABOUT THE AUTHOR

DEMIAN BORBAw: adobe.ly/xd

t: @demianborba

job: Productmanager, Adobe

areas of expertise:Design thinking, mobiledevelopment, communityengagement

q: what’s the last lieyou told? a: “Honey, you can inviteyour mom to visit us!”(When I was planning

a surf trip to Mexico)

VIDEO

Demian Borba hascreated an exclusivescreencast to go withthis tutorial. Watchalong at netm.ag/

adobevid-280

8/18/2019 net - June 2016.pdf


Prototyping

june 2016

91

rectangle (#FF2BC2 with no border)

in Artboard 1 and set its dimensions

to 375x230 using the property

inspector panel on the right.

05To turn the border or fill on

and off, click on the ‘eye’ icon

on the right. Hit shift+cmd+[ to

send it all the way to the back, or go

to Object > Arrange > Send to Back .

If you want to change colours using

hexadecimal values, click on the

colour icon, and when the native

colour picker pops up, select the

second tab at the top and change

the drop-down to ‘RGB Sliders’.

06 Using the text tool ( T ), click

to create a header for your

team page. Mine is Helvetica Bold,

20, #FFFFFF, x: 18, y: 123.

Let’s start putting together our

list of team members. Draw a grey

square where the team member’s

photo will sit (100x100, x: 8, y: 238,

#D0D0D0 with no border).

07To the right of this, we need

a white rectangle (260x100,

x: 108, y: 238, #FFFFFF with no

border) on which we’ll include the

team member’s name as a header

and job title as a subhead. For now,

use placeholder text, and style it up

as you wish.

08To show this box will be a

tappable area, we’ll include

an arrow icon. Drag ‘path.svg’ from

01First, ensure Adobe XD is

installed on your computer

(netm.ag/XD-280 ). Launch it, take

a look at the welcome screen and

start a new design with an iPhone

6 artboard template.

02Use the Artboard tool

( A ) to create a second

artboard, then change their titles

(by double-clicking on them) to

‘iPhone 6 – Team Page’ and ‘iPhone

6 – Detail Page’. Change both

Artboards’ background colours to

black using the property inspector

on your right. With the Select tool

( V ) selected, you can press the

spacebar at any time to pan across

your design.

03I’ve put together a folder

of assets that I’ll be using

throughout this tutor ial. You can

download them at netm.ag/

XDassets-280 . From Finder, drag

‘iphone-status-bar.svg’ to the top

of Artboard 1 ( x: 8, y: 5 ). Then copy

and paste it into Artboard 2, so

both artboards have the status bar

on the top. Hit cmd+L to lock

these status bars in both artboards

so their properties cannot be

modified. To unlock them, you can

use the shortcut again or click the

‘lock’ icon.

04Let’s focus on Artboard 1

(the team page). Using the

Rectangle tool ( R ), draw a pink

Finder onto the XD canvas to

a point off the artboard. Then

reposition it to x: 330, y: 279.

09From Finder, drag a headshot

into place on the grey square.

10Now we can create our list.

At this point, you would

normally be copying and pasting the

top item, moving the copied version

down and adjusting the margin. You

would do the same for new items,

and if you wanted to change the

margins, you would have to do it

manually, one by one.

Well, not with Adobe XD – you

can use the Repeat Grid feature.

Select the items you want to repeat,

click on the ‘Repeat Grid’ button on

the property inspector on your right

( cmd+R ) and use the green handles

to repeat the items vertically. You

could also repeat them horizontally

for a tablet version.

11Adjust the margin of your

repeated grid by hovering on

the edge of your items, clicking and

dragging. Let’s set the margin to 7.

Drag the repeat grid to the bottom

of your artboard. We now have four

rows to play with.

EXPERT TIP

With the Adobe XDwelcome screen, youcan create projects basedon presets for phones,tablets or the web, oryou can use customdimensions. There areUI kits for Apple iOS,Google Material Designand Microsoft Windows.You can also access agorgeous step-by-step

you through the mainfeatures of Adobe XDfrom the welcome screen.

WELCOME

SCREEN

Step 10 Use the powerful Repeat Grid feature to creat e your list of team members

Step 1 Start your design by selecting the iPhone 6 artboard from your template options

8/18/2019 net - June 2016.pdf


PROJECTSPrototyping

92

june 2016

the team member’s contact details

(375x45, x: 0, y: 400). Use the Text

tool ( T ) to create a text element

reading ‘Placeholder link’, centre it,

style it up, and place it at

x: 169, y: 416.

16Let’s use the Repeat Grid tool

to create two more instances

of this text element. First, convert

the text to a Repeat Grid ( cmd+R ),

then hold the option key while

expanding your grid horizontally.

Beautiful, isn’t it? Direct-select the

text ( cmd+click ) and change the

contents to read ‘Email’, ‘Twitter’

and ‘LinkedIn’.

17To finish the design, create

a white box (360x214, x: 8,

y: 445) that will include the team

12While properties (colours,

x and y positions, and so on)

are global, each item’s content can

be unique. Edit the text fields to

each individual’s name and job title.

You can double-click to enter the

grid and the group, or cmd+click to

direct-select any element within a

group or repeated grid. Now we just

need to grab all the headshots at

once and drag them onto the grid

and we’re finished with this screen.

13Let’s jump to Artboard 2

(the detail page). Again, we’ll

start with a placeholder rectangle

(375x444, x: 0, y: 0, #FFFFFF with

no border) and drag a headshot to

fill it. We’ll create a darkened effect

by changing the image’s opacity to

60 per cent and sending it to the

back ( shift+cmd+[ ).

14Then lock the headshot item

( cmd+L ) and add another

arrow (‘back-arrow.svg’) to indicate

the user can return to the team list.

This needs to sit at x: 20, y: 40. It is

important to lock the image first,

because otherwise the SVG will

replace the headshot.

15 We want to include a pink bar

on each page, which will list

member’s name and biog. First add

a text element using the placeholder

‘Person name’. For the text element

that holds the biog, we want to use

Area Text. To do this, select the Text

tool ( T ) and click and drag to define

the area for your copy. Again, type

some placeholder text for now, and

adjust its styling properties.

18Now let’s make some new

artboards for other team

members. First unlock the main

image ( cmd+L ), then click on

Artboard 2’s title to select it, and

hit cmd+C to copy it. Zoom out

( cmd+- or use the trackpad to

pinch-to-zoom), then hit cmd+V

to paste three new artboards.

Add some biog info to each page.

Update the names and headshot

images, and arrange the artboards

on the canvas. Cool! Our design is

finished for now.

19 It’s time to start defining the

app’s flow. A prototype can

be worth a thousand meetings, so

we will create one to communicate

our design intent. Simply jump to

Prototype Mode (top left), select

the item that will be tapped by the

user (hold cmd to direct-select),

and drag a wire to the right

artboard. When the mouse is

released, we can set the segue,

easing and duration. Simple!

20Let’s go though each of the

items on our list on Artboard

1 and wire them to their respective

detail page. For each of these, we

Adobe XD’s new Repeat Grid feature enables you to repeat elements quickly and cmd+R vertically or horizontally. You can adjust the grid’s margin by hovering, clickingand dragging on the edges of your elements. Best yet, you can have your properties multiple images from Finder to your grid to populate placeholder objects.

REPEAT GRID

EXPERT TIP

Step 18 Duplicate your detail page so there is one f or each team memberStep 12 Drag all the headshots onto the grid

8/18/2019 net - June 2016.pdf


Prototyping

june 2016

93

want to set the segue to Slide Left,

and the easing to Ease out. Next we

can wire the back arrows on each of

the detail pages back to Artboard 1

– remember to set the segue to

Slide Right this time. Boom – our

prototype is ready.

21To test the prototype, click

on the Play button on the

top right (Preview). You don’t need

to close the Preview window to

update your design or your wires.

Just start making changes, and

they will automatically be reflected

on the Preview window.

22It’s easy to record a video

of your interactions when

testing the prototype. With the

Preview window open, click on the

Record button to start and stop

recording. Save the ‘.mov’ file and

share with your stakeholders.

23To share the prototypes on

the web, click on the last

button on the top right (Share

Online). Click on the Create Link

button. All the assets will be

uploaded to Creative Cloud and a

link will be created. If changes are

necessary, you can go back to

Step 24 You can export designs as PNGs for Web, iOS and Android at different sizes, or S VGsStep 23 Share prototypes on the web

Design Mode, make the changes

and share again. The whole flow

just works!

24From XD, you can export

PNGs for Web, iOS and

Android at different sizes, as well

as highly optimised SVG files.

25

Congratulations! You’ve

mastered the basics of

Adobe Experience Design CC

(Preview). Feel free to share your

prototypes on the web and social

media – add #adobexd so we can

see your work.

Step 21 Any changes to your design will be refected immediately in the previ ewStep 20 Wire each item on your list to its respective detail page

EXPERT TIP

Adobe XD introduces abrand new Pen tool thatenables you to quicklydraw paths. You can evenadd, move, and removeanchor points, editproperties, and adjustBézier curves while you’restill authoring the path,allowing you to draw theperfect shape in no time can edit vector objectsthat you import intoAdobe XD.

PEN TOOL

8/18/2019 net - June 2016.pdf


PROJECTSProcess

94

june 2016

PROCESS

At Pusher, we’ve been experimenting with

pattern libraries as a way of encouraging modular

development, simplifying our workflow and

reducing repetition. We’ve created a framework

around which we can build project-specific libraries

of all of the components and elements that makeup our pages, and it has been invaluable.

WHAT IS A PATTERN LIBRARY?Although definitions differ, the core concept of

a pattern library is a collection of frontend patterns

that make up a website. Patterns can be split into

components and elements. Elements tend to be

the smaller items such as form inputs, buttons

and spans. Components are slightly larger: think

navigation bars or image sliders.

GET STARTED WITH

PATTERN LIBRARIESAlex Pate

ABOUT THE AUTHOR

ALEX PATE

w: www.alexpate.uk

t: @alexjpate

job: Frontendengineer, Pusher

areas of expertise:SVGs, Sass, building tools

q: what is the last lie

you told? a: That I was going toget this article finishedby December

RESOURCE

Vault is heavily based

on Primer, a toolcreated by the team

at Rareloop. For aPHP take on pattern

libraries, check it out:

github.com/rareloop/ primer

A fresh project; a fresh slate. A chance to

put the new tools and techniques you’ve learnt

since the last development cycle into practice. This

is the project that will be hyper-organised. This is

the project where repetition will become a thing

of the past. But old habits die hard and before youknow it, the codebase is bloated, repetitive and

slowing the development team down. Any of that

sound familiar?

Keeping on top of your code is no trivial task.

There are a million and one ‘tips and tricks’ that

promise to be the saving grace of the frontend.

When it comes to design, we hear terms like

‘atomic’ and ‘modular’ being thrown around all the

time. But how do we enforce these methodologies,

and what do they look like in practice?

Exclusive o!

PUSHER: TWOMONTHS FREE

Pusher helps you build realtime apps quickly and easily

See page 96 for details

8/18/2019 net - June 2016.pdf


june 2016

95

Process

Although they take time up-front to build, the

long-term benefits of pattern libraries are clear.

There’s more consistency, less duplication and

overall, more solid foundations for you to build on.

Likewise, testing becomes a whole lot easier.

Of course, you should still run tests on built pages,

but knowing individual elements and components

will work individually will help streamline the

process and reduce the number of final bugs.

There’s nothing more satisfying for a frontend

developer than knowing an element will just

work, regardless of its surroundings.

Besides the organisational benefits, pattern

libraries can also improve the overall quality

of code. They guide us to adopt modular coding

patterns (such as BEM or OOCSS), and having

a neutral environment to develop in helps to

ensure patterns are free of context-bias (i.e. they

are usable anywhere, in any template).

In the past few months in which we’ve had our

functional library, another benefit has become

clear. Onboarding new developers has suddenly

become a lot quicker. Having an easily digestible

reference for our patterns helps them get started

quickly and encourages them to see each pattern

as a Lego block they can use to build a page.

IS IT WORTH THE EFFORT?

Of course, every new technique comes with its

downsides. Pattern libraries shouldn’t be a place

where code goes to die. They need to be cared

for and maintained.

One of the hardest parts of introducing a new

stage into a product development cycle is building

the habit. I can recall various times when I’ve

discovered that components on production don’t

reflect those in the pattern librar y.

In order to combat this, we opted to use the

library as a proving ground. Rather than seeing

it as an optional extra that sits alongside our

development cycle, we integrated it to the point

that we now build all our patterns in the library

first, before porting them to create page templates.

Changes to existing patterns are first done in

the pattern library, and then on production. This

ensures the library is kept up to date.

Pattern libraries bringmore consistency, lessduplication and moresolid foundations

HOW DO I GET STARTED?

There are loads of great resources out there to help

you set up your own pattern library. Explore free,

open source frameworks such as Pattern Lab, or

check out example pattern libraries from the likes

of MailChimp (ux.mailchimp.com/patterns) or A List

Apart (patterns.alistapart.com).

We required something much simpler for our

projects at Pusher. In the end, we decided to build

our own framework using the tool our customer-

facing products are built on: Rails. Enter Vault.

On top of the benefits that pattern libraries bring

by default, we also set out some key criteria we

wanted our library to meet.

Firstly: creating new patterns should be a breeze.

We opted to take advantage of Rails’ built-in

generator. Creating the relevant files for a new

component is now just a case of running:

rails generate component navigation/global

This will then create the relevant Sass partial

( components/navigation/_global.scss ), and view partial

( components/navigation/_global.html.erb ), and well as

adding the necessary reference within the main

style sheet.

Secondly, the library should be easy to update

and sit in a centralised location where everyone

can access it. With it being Rails, we opted to host

it on Heroku (although of course, other web hosting

providers are no doubt just as good!).

Although we have afforded ourselves some

luxuries, such as filtering and quick access to

the raw HTML code, for the most part we wanted

something that would sit in the background.

The framework needed to be as stripped-back as

possible, to let the patterns take centre stage.

CONCLUSION

From the perspective of solving our problem,

Vault has been a success. It has improved our

workflow, but more importantly it has made

our codebase cleaner and leaner.

Having such success with Vault internally,

we decided to open source it to the development

community (github.com/pusher/vault) and we

would love to hear what you think. If you have

any comments or questions send me a message

on Twitter.

Although, like all tools, there is no one-size-fits-

all solution. The project was hacked together in a

couple of days, and although it works for us, don’t

feel inclined to use it if it doesn’t suit you. If you’re

after something a bit different, consider building

something from scratch.

8/18/2019 net - June 2016.pdf


8/18/2019 net - June 2016.pdf


Head to head

june 2016

97

Clayton Hunt explores which JavaScript framework

will help you tackle your testing needs

ABOUT THE AUTHOR

CLAYTON HUNTw: www.programming

fromscratch.com

t: @ClaytonHunt_104

job: Software consultant

areas of expertise:C#, JavaScript

q: what is the last lieyou told?

a: I spent a bit more on mySurface Book than I waswilling to admit at the time

Jasmine ( jasmine.github.io ) is an all-in-one BDD

(behavior-driven design) testing framework that can

be used either in the browser or in node. Out of the

box, it handles asynchronous tests, mocking objects,

custom matchers, and running test subsets.

Jasmine uses an expect function to start all

assertions, followed by a matcher that will

determine if the value passed to the expect is

a match. Any matcher can be negated with a not

between the expect and the matcher.

A callback allows asynchronous tests to finish. To

create synchronous tests, Jasmine’s Clock enables

users to step through time and control the execution

of timeout and interval functions.

Jasmine includes a ‘spies’ feature that allows any

object or function to be mocked. Calls to a function

can be verified, parameters checked, and alternate

values returned. Spies can help turn untestable

code into testable code.

A suite of tests can be disabled using xdescribe .

Similarly, a test can be marked pending and thereby

skipped by using xit . Jasmine can focus on a test suite

with fdescribe , or a test with fit .

Mocha (mochajs.org ) is a highly extensible unit testing

framework that can be used with both node and the

browser. Using plugins such as Chai, Should a nd Sinon

it is easy to configure a custom testing framework

with exactly the right options for your project.

Mocha uses plugins like Chai, Should and better-

assert to handle assertions. Chai includes an expect

function followed by a fluent syntax that allows for

very expressive tests. Assertions in Mocha can also

be negated using not .

Mocha enables users to use a callback to signify the

completion of asynchronous tests. In order to avoid

writing asynchronous tests, another library (such as

Sinon) would have to be used.

Mocha provides no direct mocking facilities. As

with asynchronous testing, a librar y like Sinon must

be used to provide mocking capa bilities. Sinon is

commonly used with Mocha to verify call counts and

alter the return values of the targeted function.

Mocha will mark a test as pending if the tes t does not

have a function. It can isolate by appending only to

the it or describe . Marking more than one test or

suite with only can have unexpected results.

ASSERTIONS

ASYNCHRONOUS TESTS

MOCKING

TEST SUBSETS

JASMINE MOCHA

Both libraries are perfectly equipped for testing your JavaScript. Recently I switched fromJasmine to Mocha. However, after writing this I think Jasmine may be the better library forme. Jasmine provides what feels like a more natural expectation syntax, and its Clock wouldhave helped tremendously in testing a piece of asynchronous code I have recently written.

CONCLUSION

FACT FILE

JASMINE

DOCUMENTATIONThe documentation

for Jasmine also formsthe tests that verify the

framework is working.Each piece of Jasmine’s

library is demonstratedand verified at the

same time.

MOCHA GROWLUsing a growl reporter,

Mocha can notify youof test results with

a toast notification.This means you can

minimise the browserwindow running the

tests while you work.

JASMINE VS MOCHA

HEAD TO HEAD

8/18/2019 net - June 2016.pdf


PROJECTSMobile UX

98

june 2016

RESOURCE

For lots more insights,tips and advice fordesigning mobileinterfaces that arecomfortable to use, takea look at the excellentDesigning for Touch byJosh Clark: netm.ag/

clark-280

My wife and I bought some new cutlery a few

years ago. It’s a great looking set: big, chunky

handles with sharp lines cut from gleaming stainless

steel. It looks great on the table, but we never

actually use it. Not because it’s too fragile or too nice

to use every day (like the niceness will somehow

wear off), but because it’s too damn uncomfortable

to use. Those sharp lines might look great, but they

cut into your hands. Those chunky handles make

the utensils heavy and unwieldy.

I often think of my poor, unused cutlery set when

I use some mobile designs: they might look great

on the surface, but start to use them and you soon

find out that an all-too-important factor has been

neglected: the ergonomics. The noble art of creating

designs that fit the human body (rather than the

other way around) is one of the true unsung heroes

of the design world.

Ergonomics has always been very important to

industrial designers, but it’s becoming increasingly

important to digital designers as well. Why? Becausesmartphones and tablets are changing the way we

interact with digital designs. We no longer only

use a cumbersome keyboard and a mouse to tell

our digital friends what to do. Now it’s more direct,

more physical. We hold our devices. We tap them.

We pinch them. We lovingly stroke them.

This increasingly physical bond with our beloved

mobile devices forces designers to not only think

about how a design looks and feels, but also the

physical aspects of using it. It forces designers to

think about how users hold and interact with their

smartphones and tablets; about how much of the

screen they can comfortably reach and how a design

will feel in the hand. It forces designers to think

about the ergonomics of a mobile design.

So how do you go about creating a mobile design

that is ergonomic and therefore comfortable to use?

This is how I do it.

1 GET OUT OF THE OFFICEEven before I start thinking about possible designs

I like to get out of the office to carry out some first-

hand observations. I might spend a morning or

afternoon looking at where, when, how and why

people are using their mobile devices.

I will make a note of how people are holding

and interacting with their device, what they might

be doing at the time and the sorts of challenges and

distractions they might have to contend with. This

information will help inform the ergonomics of the

design, and means that when it comes to testinga design I can test against scenarios I know actually

happen in the real world.

2 DESIGN FOR MULTIPLE HOLDSIf you observe people using mobile devices, you’ll

soon see that they use a variety of different holds

(see image opposite). The variety of holds used and

the frequency with which users change their hold

means it’s important to design with multiple holds

in mind. For example, I usually start a smartphone

11 TIP F R ERG N MI

M BILE INTERFA ENeil Turner runs down 11 tips or creating mobile and tablet

MOBILE UXABOUT THE AUTHOR

NEIL TUR NERw: uxforthemasses.com

t: @neilturnerux

job: UX designer

areas of expertise:

UX design, UX research,agile UX

q: what is the last lie

you told? a: That the tooth fairy isreal (sorry, should havehad a spoiler alert)

8/18/2019 net - June 2016.pdf


june 2016

99

Mobile UX

design with one-handed use in mind (as this is the

most challenging), but will always test designs out

across a range of holds to see how comfortable each

of them are.

3 PLACE POPULAR CONTROLS IN REACHI always try to place frequently used controls, such

as buttons and links, where they can be easily

reached by fingers or thumbs. The middle and

bottom of the screen are good areas to use, although

bottom corners can be tricky to tap when a device is

being held in only one hard.

It’s still the convention to place menus at the top

of the screen. However, this can be a hard-to-reach

area, so it’s a good idea to also support a swipe

action to bring up the menu.

4 PLACE CONTENT ABOVE CONTROLSYou don’t want someone’s finger or thumb obscuring

the content as they tap the screen, so I’ll always try

to place content above controls. I’ll also ensure key

information is not in an area of the screen where it

can easily be obscured by a finger or thumb – such

as the bottom corners, which are frequently covered

up when a smartphone is held in one hand.

5 DESIGN WITH PORTRAIT MODE IN MINDWhilst the hold used might change, one thing that

is much more consistent for both smartphones

and tablets is the tendency for people to hold them

vertically for the majority of the time. A horizontal

hold is often used for particular tasks, such as

viewing videos or photos, but this is the exception,

not the norm.

Of course a mobile design should ideally support

both portrait (vertical) and landscape (horizontal)

modes, but unless I’m designing a video or photo-

How do you usually hold your mobile? One-handed? Two-

handed? I’m a cradle in one hand, tap with the other kind of

guy. There are lots of dif ferent ways someone can hold a mobile.

In a 2013 study (netm.ag/hold-280 ) the subjects used their mobile

in one hand for about half the t ime (49 per cent), cradled it in one

hand and tapped with the other for about a third of the time (36

per cent), and for the remaining 15 per cent of the time held it with

two hands, and tapped with their thumbs. I suspect today you’d see

even more two-handed use, as the growing size of smartphones

makes one-handed use increasingly difficult.

The study also found that 90 per cent of the time people hold

their smartphone vertically, and will frequently change their hold

depending on what they’re doing. For example, they might swap to

a two-handed thumbs hold when typing, or utilise a one-handed

grip when carrying a drink.

As you would expect, people hold tablets differently from their

smartphones. A recent study (netm.ag/tablet-280 ) found that the

majority (88 per cent) of tablet use takes p lace whilst seated. Tablet

users are likely to tap away with both hands whilst the t ablet is flat

or propped up, or use one hand to secure the tablet and the other to

tap. Tablet users are also more likely to hold their tablet vertically,

with 60 per cent of use taking place in portrait mode.

IN-DEPTH

HOW WE HOLD

OUR DEVICES

Hold on The three main holds used for a smartphone, and the frequency whichthey’re typically used (images and figures from netm.ag/hold-280 )

Device usage This study (netm.ag/tablet-280 ) explores how people use

mobile, tablet and phablet devices

Out of the way The BBC iPlayer iPad app places controls in easy to reac h areas

and below content

8/18/2019 net - June 2016.pdf


PROJECTSMobile UX

100

june 2016

heavy site or application, I will always design with

portrait mode in mind.

6 DESIGN FOR THUMBSThumbs drive the majority of all smartphone

interactions. This is because thumbs are exclusively

used when a mobile is held in one hand and heavily

used when it is held in two hands. If you take a look

at your own thumbs you’ll notice that they’re slightly

larger than your fingers, and therefore need a larger

tap target.

I always try to make tap targets at least 44 x 44

points (16 x 16mm), with at least 7 points (2.5mm)

between them. Bigger tap targets are always better

and you should certainly not go any smaller than

44 x 30 points (16 x 11mm).

Even if I’m designing for tablets, I will still design

for thumbs because a design should support the

least accurate method of touch that it wil l encounter.

A large tap target isn’t just good for thumbs, it’s

great for fingers too.

Bigger tap targets arebetter. There’s no biggertarget than the wholescreen, so design withlarge gestures in mind

FACEBOOK’S MOBILE APP

Mobile is pretty important to Facebook. Nearly a billion

users and counting access Facebook on their phone every

day, and an increasing number only access Facebook on their

mobile. Fortunately the Facebook team clearly know a thing or

two about ergonomics. The Facebook app is a great example of

an ergonomic mobile design.

The team understand the impor tance of designing for multiple

holds and ensuring the design works well when used one-handed

or two-handed, and in both portrait and landscape modes. The

main feed can be easily navigated with a deft f lick and tap of the

thumb, and big gestures are supported, such as a swipe-to-the-

right or -left to change the view.

Controls are largely in the middle and bottom of the screen,

where they are within easy reach of fingers and thumbs. When

more options are available, such as after tapping the drop-down

arrow for a particular post, these appear at the bottom of the

screen. Content is always above controls so users can still see what

they’re interacting with, and although links and icons are a little

on the small side, they are at least well spaced out. Big blocks of

content also make for nice large tap targets.

The one area Facebook does fall down on is minimising

interactions. Given that Facebook wants users to stay on their

app as long as possible, this is hardly surprising – and it is the

only blemish in an otherwise ergonomically excellent design.

CASE STUDY

Easy use The Facebook app is a great example of an ergonomic mobile

design, and is comforta ble to use with one or both hands

Thumbs up The Spotify app is certainly designed to be thumb-friendly,

with nice large tap targets

8/18/2019 net - June 2016.pdf


june 2016

101

Mobile UX

7 DESIGN FOR BIG GESTURES

I’ve said that bigger tap targets are better. What

bigger tap target is there than the whole screen?

Try and design with big gestures in mind, such

as allowing users to swipe to move forwards or

backwards in a photo gallery, or to bring up a

menu. Remember users might not realise a gesture

is supported, so it’s always a good idea to provide

a secondary way to do something, such as tapping

an arrow icon to bring up the next photo.

8 RISE TO THE CHALLENGE

In ergonomics you sometimes hear talk of designing

to suit at least 95 per cent of users by creating a

design that is comfortable from the 2.5th to the

97.5th percentile of users. There will always be

extreme users that are very hard to accommodate

– as we all know you can’t please everyone all the

time, but if you can create a design that the more

challenging users can use with comfort, it should

also work for all those in between. This is why I

design with challenging users and scenarios in mind.

For example, think of a busy commuter walking

down the street with coffee in one hand and mobile

phone in the other, or someone with arthritis.

9 KEEP INTERACTIONS TO A MINIMUM

Do you know which the most comfortable mobile

device interaction is? It’s not a tap, or a swipe,

or a press. It’s no interaction at all. The less

interaction your mobile design requires, the less

you have to worry about the ergonomics. I always

try to keep interactions to a minimum. Ruthlessly

cut down mobile forms, use autosuggests, and

restrict notifications to only the things a user

really needs to be notified about.

10 PROTOTYPE DESIGNS

You simply can’t judge the ergonomics of a mobile

design until you can physically hold it in your

hands and try out different grips. This is why I will

prototype a design as soon as possible. My tool of

choice is Axure, but there are lots of other great

prototyping tools. In the past I’ve even run user tests

with simple paper prototypes. A sketch or paper

printout stuck onto a mobile device will tell you

a surprising amount about the ergonomics.

11 TEST, TEST, THEN TEST SOME MORE

Want to know the one guaranteed way to create

ergonomic mobile designs? It’s to test designs, then

iterate and test, iterate and test ... and continue until

you’ve got a bunch of different people, covering a

bunch of different devices, all reporting that the

design is comfortable to use. It’s that simple.

Mobile devices are of course designed to be

‘mobile’, so I will tr y to get out of the office and testdesigns in the environments and situations they’re

likely to be used in. Coffee shops are a favourite

of mine. I try to test designs with as many people

as possible (at least five or six) and focus on more

challenging scenarios, such as using a smartphone

one-handed. If the design works well when the user’s

interactions are more constrained, it’s sure to excel

the rest of the time. It’s primarily by continually

testing and iterating that you can create truly

ergonomic mobile designs.Test time To test a design you need to be able to hold it in your hands.For this there are plenty of protot yping tools available, including Axure

Within reach

Green areas are easy toreach, amber takes more

effort and red areas arehard to reach (image from

netm.ag/hold-280 )

8/18/2019 net - June 2016.pdf


Save 15% on your first year when you become anAdobe CC member! Follow this link to redeem:

GET 15% OFFCREATIVE CLOUD

netm.ag/AdobeCC-280Terms & conditions:

Discount applies to the All Apps plan (individual membership) and is eligible to readers that are new to theAdobe Creative Cloud only. The offer excludes the United States, Canada and Mexico and expires 31 July 2016.

8/18/2019 net - June 2016.pdf


Standards

june 2016 103

WebAssembly is an emerging standard

that defines a low-level, high-performance

compiler target to complement JavaScript. That is,

WebAssembly is not something you’d typically

write directly, but something you’d compile from

another language. For size and load-time efficiency,

WebAssembly defines a binary over-the-wire

format, along with a human-readable text format

that browsers will show for viewing, debugging,

profiling or modifying purposes.

To understand the purpose of WebAssembly,

we can look at how developers are already using the

related technologies. Emscripten is an open source

compiler from C/C++ to JS based on clang/LLVM, and

asm.js is the low-level, highly optimisable subset

of JS generated by Emscripten.

Emscripten can be used to compile whole, portableC/C++ applications by leveraging the SDL, OpenGL,

OpenAL and other API portability layers provided

by Emscripten, as well as the high performance of

asm.js. These applications often contain millions

of lines of code, written over many years, making

a manual rewrite to JS almost impossible.

Another common use for Emscripten is to compile

standalone C/C++ libraries and wrap the generated

asm.js with a more idiomatic JS interface so the

library can be easily used as part of a larger JS

application. Any computationally intensive task

is a good candidate (for example, cryptographic

algorithms, mapping or databases).

So why do we need a new standard? One reason

is that, for large codebases, JavaScript parse time

becomes a bottleneck – preliminary experiments

show WebAssembly decoding more than an order

of magnitude faster.

Another reason is that JavaScript is a high-

level language and its semantics don’t perfectly

line up with what a low-level compiler needs to

generate. As a new standard with a low-level focus,

WebAssembly is able to tailor its instruction set to

match the compiler’s needs, which allows better

performance while preserving all the safety and

portability of JavaScript.

That being said, asm.js has been a critical

stepping stone for WebAssembly in several ways.

On a technical level, asm.js implementations

demonstrated a new, lightweight sandboxing

strategy that allows much tighter web integration

than previous plugin approaches, while delivering

near-native performance. On a practical level,

we are providing a polyfill for WebAssembly

by translating to asm.js when browsers don’t

have native WebAssembly support.

CURRENT PROGRESS

Standardisation work is currently ongoing in a

W3C Community Group, with active work in public

GitHub repos (webassembly.github.io). Progress has

been fast, with experimental implementation work

in all major browsers. Demos should soon become

available that run on multiple browsers (on preview

builds, after setting a user preference) followed by

a period of feedback, iteration and convergence on

the initial spec. At our current pace, we may see

native implementations of the initial WebAssembly

feature set landing in mainstream browsers as

early as this year. And with the asm.js-based

polyfill, developers should be able to start usingWebAssembly even sooner.

Once this work stabilises, we already have a big

list of additional features, ordered by demand and

feedback, that will allow WebAssembly to integrate

more tightly with the web platform and support

more languages. Exciting times ahead!

WEBASSEMBLYLuke Wagner

of this emerging web compiler target

Luke (blog.mozilla.org/luke ) is a research engineer at Mozilla and

co-chairs the W3C WebAssembly Community Group. He was

one of the inventors of asm.js and implemented the initial asm.js

optimisations in Firefox P

R O F I L E

JAVASCRIPT

8/18/2019 net - June 2016.pdf


PROJECTSChrome

104

june 2016

Chrome Developer Tools offer a wealth of

features to help you debug your websites. You

can access them by clicking the hamburger menu in

the top-right of your screen and going to ‘More tools

> Developer tools’. Within the DevTools you’ll find a

number of different tabs, including Sources (which

deals with information about scripts), Console

(an interactive command-line) and Network (which

monitors the network connections of pages). In this

article I’ll take a closer look at each of these three

tabs, and explore how they can give you insights into

your scripts and network traffic.

SOURCESThe Sources tab is packed full of features to tell you

what is going on while your scripts are running.

Your first question might be how you can see what

your scripts are doing while they are running at

their usual speed. Let’s get started by learning how

to pause the execution of your script. If you select

a script from the File Explorer pane on the left, its

contents will appear in the main pane. Clicking on

a line number in this pane will create a breakpoint,

which will pause the execution of a script before

the line is evaluated.

While your script is paused, you can inspect the

values of your variables in the Scope pane on the

right. You can even expand objects and inspect

their properties, and double-click them to change

their values. If you remember the days of debugging

scripts using only the alert() function, this will be

an especially exciting feature!

GET M RE FR M

HR ME DEVT LKatie Fenn digs into the Sources, Console and Network tabs

to reveal how they can provide insights into your web pages

CHROME

ABOUT THE AUTHOR

KATIE FENNw: www.katiefenn.co.uk

t: @katie_fenn

job: Senior UI develo per,Sky Betting & Gaming

areas of expertise:JS, CSS, PHP, test-drivendevelopment, React

q: what’s the last lieyou told? a: ‘Pluto is not a planet’

VIDEO

Katie Fenn presented‘Chrome DevTools: Frontto Back’ at ScotlandJS2015. In it, she exploredsome of the featuresfrom this article, as wellas introducing somenew ones: netm.ag/ scotlandjs-280

8/18/2019 net - June 2016.pdf


june 2016

105

Chrome

The Call Stack pane on the left of the window

shows a list of in-progress function calls. Functions

in the callstack appear above the function that called

them. The function at the top is the current scope,

followed by the function that called it.

Clicking on functions in the list will show the

line where the call was made, and the Scope pane

will refresh to list variables when the function was

called. The ability to trace function calls is invaluable

when debugging your code, because it allows you to

work backwards from a variable’s unexpected value

and find out where things went wrong.

The Watch pane allows you to enter lines of

JavaScript code that will be run every time your

script pauses at a breakpoint. It will display the

returned value for each line of code you enter, which

is much quicker than hovering over code with your

mouse. You can use any variables or functions that

are in-scope when the script pauses, including

global functions such as jQuery.

Clicking on the {} symbol at the bottom of the

window inserts line breaks into minified code. This

makes it slightly easier to read the soup of condensed

code on production sites.

Execution ControlBeing able to pause scripts isn’t much use if you

can’t resume them again. The Execution Control

buttons (see image at the top of page 98) are the most

powerful feature of the Sources tab. The first four

control how the script resumes:

Resume: When your script is paused, this is

highlighted in blue. It restarts the execution

of paused scripts. Execution continues until

the next breakpoint is encountered.

Step over: This will resume the script and pause

execution on the following line, ‘stepping over’

any functions called.

Step into: This resumes execution and pauses

the script on the first line of the next function

that is called. If paused on a line that calls two

functions, and the first has already been called,

the debugger will step into the second function.

If no function is called, it functions identically

to the step over button.

The console is an interactive JavaScript prompt that you

can run code in to help you debug your scripts. For instance,

running console.log(window) will output the global properties of

the window object, and running window.blah = "blah" will add new

property "blah" . console.table() displays array and object data in

a formatted table.

console.warn() , console.error() , console.debug() and console.

info() work the same way as console.log() . However, they are

colour-coded for convenience and can be shown or hidden using

the console filter controls.

DevTools gives you a shortcut for selecting elements similar

to jQuery. $$('.menu') will select elements similar to jQuery’s

selection API. $0 to $4 store references to the last five selected

elements in the Elements tab. time() will start a timer that can be

stopped and displayed with timeEnd() . This can be used as a quick

and simple benchmarking tool.

debugger acts in the same way as sett ing a breakpoint, which

is convenient on those occasions when your code is more accessible

in your editor than in DevTools. When your scripts are paused in

the Sources tab, the scope of the console will match that of your

paused script. This will give you access to all the variables and

functions your code does.

CONSOLE

IN-DEPTH

Script manipulation The sources tab can pause execution of scripts, inspect their state and

play them out step by step

The Sources tab is fullof features to tell youwhat is going on whileyour scripts are running

8/18/2019 net - June 2016.pdf


PROJECTSChrome

106

june 2016

Step out: Resumes execution and pauses the script

when the current function returns to the line it

was called from.

There are two more buttons, but these are not

concerned with script resumption. Deactivate

breakpoints stops breakpoints pausing the execution

of scripts. This is useful when you are debugging

code that is executed often and that you want to

ignore. Pause on exceptions will pause your scripts

immediately before exceptions are thrown, and can

help you investigate errors.

NETWORKThe Network tab’s job is to monitor the network

connections of your web pages. Whether it is a web

page, a script, an image, a style sheet or even a

WebSocket connection, this tab shows all.

WaterfallUnder the Network tab is a chart of the requests

a page makes for resources. Each row represents

a single request, and includes details of its size, its

type and the time taken to download. The requests

are visualised by a timeline affectionately known

FURTHER READING

FOCUS ON

These resources will teach you about dif ferent ways to

use Chrome’s DevTools, and help you stay up to date with

the latest features.

Chrome DevTools homepagenetm.ag/homepage-280

The Chrome DevTools site is full of links to documentation and

useful resources. It’s also worth following the official Twitter

account (@chromedevtools) to find out about features as soon

as they are announced, and discover tips and tricks.

Node inspectorgithub.com/node-inspector/node-inspector

This open source project enables you to debug Node.js scripts

using DevTools. You can use it to step through server-side

code, view outgoing HTTP requests, and even profile the

performance of scripts.

What’s new in Chrome DevToolsnetm.ag/osmani-280

Addy Osmani’s 2015 talk is a great resource for discovering

the latest and greatest features of DevTools. Osmani works

at Google on the Chrome project.

Remote debugging on Android with Chromenetm.ag/debugging-280

Use DevTools to remotely debug websites on Android

devices. This is an essential part of developing sites for mobile

platforms, because running your code on real devices often

exposes things emulators do not.

Firefox Developer Toolsnetm.ag/firefox-280

Firefox also has a great set of developer tools, which will be

familiar to anyone who has used Chrome DevTools.

Network info The Network tab shows all network traffic and gives youpowerful features for troubleshooting performance problems

Execution control (L-R): Resume, step over, step into, step out, deactivate

breakpoints, pause on exceptions

8/18/2019 net - June 2016.pdf


june 2016

107

Chrome

as the waterfall, due to the cascading way files are

loaded as the browser parses the page.

You may have noticed that the bars are split into

two sections. The lighter colour represents the

time spent on tasks occurring before the actual

request, such as DNS lookups and queuing for one of

Chrome’s six network connections. The darker colour

represents the request itself: sending the request,

waiting for the server to respond, and downloading

the resource. If you mouse over the bar, DevTools

will show you a breakdown of each.

The timeline is useful for troubleshooting the

order and content of data you are sending across the

network, which can guide you towards the goal of

a faster-loading website. Downloading scripts and

style sheets stops the browser parsing your HTML

and rendering it to the screen, so you may want to

use the waterfall to slim them down or prioritise

their order in the page.

Clicking on the names of requests will show you

detailed information, including the HTTP status

code, the URL and IP address, and the request and

response header information. The Response tab

shows you the raw body of the returned data, and the

Preview tab formats response data for requests to

JSON and XML files in an expandable tree.

Waterfall items can be filtered by clicking on

the icon that looks like a funnel, and you can filter

items by filename by entering text into the free text

field. You can even query against HTTP status codes,

response headers, HTTP method and response size

– try experimenting with the field’s autocompletion

to discover what you can do.

ScreenshotsOne of the most useful features for optimising the

order content is loaded in is screenshot capture.

Click the camera icon in the top left to turn this on.

This will show snapshots of your page at specific

intervals when it is downloading. You can click on

the screenshots to see the exact point in the timeline

at which it was taken. Double-clicking displays an

expanded view of the screenshot.

Screenshots allow you to finely optimise how the

page content loads. If your content only becomes

visible very late in the timeline, a style sheet or

a web font might be taking too long to download and

need optimising. Improving a page’s time to first

render keeps your users happy.

ThrottlingOne of your most important concerns when building

a modern website is how it performs on mobiles

and tablets, when connectivity is at a premium. To

simulate slow connections, DevTools has a network

throttling feature that slows your connection to the

speed of a 2G or 3G line. To enable it, click on the

drop-down menu where it says ‘No throttling’. Here

you can select a range of network profiles, and even

simulate being offline.

When throttling is enabled, a warning icon is

displayed in the Network tab title bar to remind you.

It is not unusual to forget and start wondering why

your connection is so bad!

CONCLUSIONThis article only briefly summarises the features

DevTools gives you to debug your sites. Once you’ve

stepped through your own code in the Sources tab

and seen exactly what it is doing, you will be able

to find and fix problems quicker. You will also gain

confidence in tackling the new problems that are

arising as frontend technology advances.

We’ve also glimpsed one of DevTools’ main

features for profiling performance: the Network

tab. Our job as developers is increasingly focused on

making our sites work quicker. Understanding the

Network tab unlocks learning about performance

techniques such as the optimisation of content and

the critical rendering path. It also gives you valuable

evidence of any improvements gained when you

make changes to your site.

Integrating DevTools into your work really pays

off, and the insight it gives you makes you a more

effective developer.

The Network tabmonitors the networkconnections of yourweb pages

Timeline extras Clicking on request names shows request information, such as HTTP request

and response headers

8/18/2019 net - June 2016.pdf


PROJECTSAnimation

108

june 2016

As GreenSock’s geek ambassador I spend

my days helping users tackle their animation

challenges in our support forums and through

in-person training. I love seeing animators reach

those A-ha! moments when they discover a GSAP

feature that solves a common obstacle. The

following gems usually take beginners a while to

stumble into, but once mastered, can revolutionise

their animation workflow.

If you’re not familiar with the basics of GSAP,

Sara Soueidan has written a great guide (netm.ag/

soueidan-280). You should also definitely watch

GreenSock’s Getting Started video (greensock.com/

get-started-js).

1 TWEEN A TWEEN! HUH?This gem is a little mind-bending but bear with me

– it’s worth it. At its core, GSAP simply animates the

numeric properties of JavaScript objects. Yeah, that

sounds pretty boring but it’s the secret behind the

flexibility of the entire platform.

Most GSAP animations apply those numeric values

to CSS properties like opacity, transform, width,

height, and so on. To move an object along the

X-axis (left to right):

var myTween = TweenLite.to(".logo", 10, {x:500});

However, what most folks overlook is the fact

that the tween ( "myTween" in this example) is a

JavaScript object itself, and as a result has various

properties and methods that can be tweened.

For every animation created by GSAP, whether

it be a single tween or a timeline (a collection of

tweens), there are methods for getting and setting

different properties.

For example, the timeScale() method gets or sets

the playback speed of an animation where 1 equals

7 HIDDEN GSAP GEM reveals some often-overlooked features of the GreenSock

Animation Platform that may open a whole new world of possibilities

ABOUT THE AUTHOR

CARL SCHOOFF

w: www.greensock.com

t: @greensock

job: Geek ambassador,GreenSock

areas of expertise: GSAP, HTML5,training, support

q: what is the last lieyou told? a: The lima beanswere delicious!

RESOURCE

Sara Soueidanpresented a fantastic

overview in theNovember 2015 issue

of net. Find the onlineversion of ‘Supercharge

SVG animations withGSAP’ at netm.ag/ soueidan-280

View source

files here!You’ll find demos for all the

gems listed here at

greensock.com/gems

ANIMATION

8/18/2019 net - June 2016.pdf


june 2016

109

Animation

normal speed (the default), 0.5 is half speed, 2

is double speed, and so on.

// returns the current timeScale

myTween.timeScale()

// sets the timeScale to 2 (plays twice as fast)

myTween.timeScale(2)

Instead of setting the timeScale() to a specific value,

which would cause an abrupt change in speed, you

can tween the timeScale() of the tween for super-

smooth acceleration or deceleration.

//accelerate to 4x normal speed over the course of 2 seconds

TweenLite.to(myTween, 2, {timeScale:4, ea se:Power4.easeIn);

Note that when tweening a tween you can provide

any ease you want for even more control, as shown

above. Demos for tweening timeScale() , progress()

and all the other gems listed here can be found at

greensock.com/gems.

2 RANDOM ACCESS RUNTIME CONTROLS

Every GSAP animation, whether it be a single tween

or a timeline with 1,200 tweens, can be controlled

using handy methods like play() , pause() , reverse() ,

and so on. This means that during runtime (while

your animation is playing) the user can interact

with a simple UI and have total control over

playback. One convenient feature that is often

overlooked is that some of these methods accept

HTML5 BANNER ADS

FOCUS ON

Runtime controls With GSAP’s dynamic runtime controls you can save yourself

hours of development time

Did you know that GSAP is exempt from file size calculations

on every major ad network, including Google’s DoubleClick

and AdWords, AOL’s Advertising.com, Sizmek, Flashtalking and

Flite? It’s the only robust animation library with such widespread

industry support since the demise of Flash.

This in itself is a hidden gem, because it means you can freely tap

into GSAP’s rich feature set in your ads, without worrying about its

file size counting against you on these net works (unless a publisher

objects, which is extremely uncommon).

Native technologies like CSS animations and large JavaScript

libraries like jQuery simply weren’t designed to deliver the precise

choreography animators need for banner ads. GreenSock went to

bat for developers, reaching out to the IAB and the major publishers

to prompt a discussion about file size and performance policies in

the post-Flash world. We’re happy to report that GSAP has been

embraced wholeheartedly, and we’re grateful to the industry for

its support along the way.

For more on HTML5 ads and why we need t o reconsider our

approach to kilobytes in the modern era, read The Kilobyte

Conundrum: greensock.com/kilobyte-conundrum . Now go forth

and build your ads with G SAP.

The tween is a JS objectitself, and has variousproperties and methodsthat can be tweened

8/18/2019 net - June 2016.pdf


PROJECTSAnimation

110

june 2016

parameters that allow you to jump to a particular

point in an animation.

Below are multiple uses of the play() method to

illustrate this flexibility:

// plays the animation forward from current time

timeline.play();

// jumps 3 seconds into the animation and plays f rom there

timeline.play(3);

// jumps to the "section2" label and plays from there

timeline.play("section2");

Imagine you have a 45-second animation and you

only want to test the last five seconds? No problem,

just use a negative value:

// jumps 5 seconds from end of timeline and plays from t here.

timeline.play(-5);

No need to keep watching the first 40 seconds of

the animation over and over each time you preview.

This alone can save you tons of time (and your

sanity) during production.

Just like play() , the reverse() method can jump

anywhere. A little bonus tip that not many people

know about:

// jump to end of timeline and reverse from there.

timeline.reverse(0)

One of the coolest implementations of GSAP’s

random access abilities is using a scrubber UI to

control the progress() of an animation. An HTML5

range slider works great for this.

var tl = new TimelineLite({paused:true});

tl.from("#hero", 0.5, {scale:0.2, opacity:0})

.from("#greensock", 0.5, {yPercent:115, ease:Back.easeOut});

function update(){

tl.progress(progressSlider.value); // change the timeline’s

progress based on the slider’s value

}

There’s plenty of free GreenSock tutorials, demos and videos

waiting for you at greensock.com/learning . If you or your team

really want to commit to becoming GSAP expert s through more

formal training options, there are a number of ways to go:

Step-by-step training

www.nobledesktop.com/books/gsap

This is GreenSock’s off icial curriculum we use in our classes

and on-site training. Learn GSAP through a series of real-world

projects, with detailed step-by-step instructions. Available in print

or ebook, with complete lesson files for Mac and PC .

On-site training

greensock.com/training

Carl Schooff will visit your office and guide you through GSAP in the

most direct and entert aining way. Need an accelerated overview?

Or perhaps HTML5 banners are your biggest hurdle? No problem.

The training can be fine-tuned to meet your t eam’s current skill

level. You’ll learn tips and tr icks you won’t find anywhere else.

Learn GSAP in NYC

www.nobledesktop.com/classes/greensock

Carl Schooff will be teaching GreenSock’s two-d ay comprehensive

class at Noble Desktop in NYC this June. Boost your animation

skills while you take in the best a NYC summer has to of fer. Noble

Desktop’s world-class training facilities provide a fantastic learning

environment. Book soon as seats are limited.

Video tutorials

netm.ag/tichy-280

Petr Tichy is a talented GSAP animator with a hear t for training

developers. He is extremely skilled at communicating complex

concepts in a way everyone can understand. His GreenSock

Workshop provides over eight hours of high-quality videos that will

show you how to build three impressive GSAP projects. His blog at

ihatetomatoes.net is loaded with excellent tutorials as well.

LEARN GSAP

RESOURCES

As well as standard

number of customisable

eases crafted to serve

8/18/2019 net - June 2016.pdf


june 2016

111

Animation

progressSlider.addEventListener("input", update);

This type of precise control makes it super-easy

to get to any part of an animation and study it

repeatedly, as fast or slow as you want.

3 DRAG AND SPIN

GreenSock’s Draggable was originally built to

show off some advanced momentum-based

animation capabilities of ThrowPropsPlugin , such

as flicking elements around a screen and making

them naturally drift to a stop within boundaries.

However, it turned into much more than that.

At its most basic, it makes interactive dragging

or spinning any DOM element crazy simple, even

when you’re dealing with SVGs.

// allow dragging along x and y axis (using transforms)

Draggable.create("#myDiv", {type:"x,y");

// confine movement only along x a xis inside an element with

id of stage

Draggable.create("#myDiv", {type:"x" bounds:"#sta ge"});

// spin

Draggable.create("#myDiv", {type:"rotation"});

Draggable has some advanced features:

getDirection() – Find out which direction the

element is being dragged

autoScroll – Dragging an element close to the

edge of its container causes it to smoothly scroll

at a speed based on its proximity to the edge

hitTest() – Find out when the element overlaps

another element by a certain percentage

liveSnap – Snap to sets of coordinates while

dragging

throw – Integrated with ThrowPropsPlugin , this

creates natural, momentum-based physics after

being released (flicking)

One of Draggable’s most exciting features is that

it even works on elements with nested transforms.

You can drag an element that’s inside a rotated

container, for example.Draggable is one of GSAP’s most unique tools,

but few people know about it – probably because

dragging is not always associated with animation.

It is completely integrated with GSAP’s animation

core for ultra-high performance and consistency.

4 EXPRESSIVE EASES

Think of easing like the style of a movement. It has

a tremendous effect on how your animations feel to

the audience. Do you want things to glide to a stop

or bounce? Or accelerate in and out, jerk around,

or act like a rubber band?

Your easing choice can make the difference

between a robotic, lifeless animation and a mind-

blowingly realistic one. In addition to all the

standard eases that are widely available, GSAP

offers several customisable eases that have been

crafted to serve very specific needs.

RoughEase takes a smooth ease curve and adds

deviations to produce a very jagged or rough curve.

It can be configured to deliver wildly erratic and

random jolts, or consistent back and forth motions.

It is perfect for shake and flicker effects.

SteppedEase provides an easy way to define the

specific number of steps a transition should take.

The easing curve literally looks like steps. For

example, if x is 0 and you want to tween it to 100

with five steps (20, 40, 60, 80, and 100) over the

course of two seconds, you’d do:

TweenLite.to(obj, 2, {x:100, ease:SteppedEase.config(5)});

SteppedEase is extremely useful for sprite sheet

animations as it allows images to be offset by

specific intervals over any length of time.

SlowMo makes it simple to achieve a slow-

motion effect. It combines three eases into one,

starting fast, decelerating ( easeOut ) to a constant

rate ( Linear ) and then accelerating ( easeIn ) at the

end. You can configure how long the animation

should stay linear and how strong the eases at the

beginning and end should be. It’s perfect for text

Ease visualiser GreenSock’s Ease Visualizer provides an easy way to test every ease and configure

expressive eases

8/18/2019 net - June 2016.pdf


PROJECTSAnimation

112

june 2016

effects that you want to shoot in quickly, linger and

then accelerate out.

In addition to the demo for these eases, be sure to

experiment with every ease in our Ease Visualizer:

greensock.com/ease-visualizer .

5 RENDER ANYWHEREA common misperception is that GSAP is just for

animating DOM elements or SVG. Not true. It can

animate almost any property of any object ( <canvas>

animations, attributes, CSS rules, or even generic

JavaScript objects, all using exactly the same

syntax).

Want to use a 2D WebGL renderer like Pixi.js or

go 3D with three.js? No problem. Below is some

code for animating three circles rendered by DOM,

WebGL (Pixi) and SVG:

//identical syntax regardless of where things are rendered

TweenMax.to(PIXICircle.position, 2, {y:250t});

TweenMax.to("#DOMCircle", 2, {y:250});

TweenMax.to("#SVGCircle", 2, {y:250});

When you invest time to learn GSAP, you’ll be

amazed at how this knowledge can be transferredto a wide range of projects. GSAP even works great

with Adobe Animate CC.

6 TAKE CONTROL OF GSAP ANIMATIONSImagine a web page, app or game with a bunch of

animations running that you need to pause all at

once when the user clicks a button. With GSAP it’s

easy. TimelineLite has an exportRoot() method that

gathers all active animations and wraps them in

a single timeline that you can control.

By applying what you learned in the first gem,

you could even tween the timeScale() of that

timeline and put your whole game (missiles, enemy

movements, explosions) into slow-motion with

just two lines of code:

// place all active animations in one timeline

var tl = TimelineLite.exportRoot();

// slow down all animations to quarter-speed over the course

of 1 second

TweenLite.to(tl, 1, {timeScale:0.25});

To see a practical implementation of this technique,

visit www.greensock.com and notice the animation

up at the top, then click on the green ‘Download

GSAP’ button. The animation pauses when the

overlay opens and then resumes when it closes.

The code that is run when the overlay opens has

no idea of the names of the animations that are

running or how many there are, it just grabs them

all with exportRoot() .

7 ADVANCED SVG SHAPE MORPHINGWant to morph a circle into a hippo into a star and

then into an elephant? No problem. We need just

three lines of code:

tl.to(circle, 1, {morphSVG:"#hippo"}, "+=1")

.to(circ le, 1, {morphSVG :"#st ar"}, "+=1")

.t o(circle, 1, {morphSVG:" #elephan t"}, "+=1");

Now that MorphSVGPlugin has arrived, it has never

been easier to animate SVG <path> data. The huge

advantage over SMIL and other libraries is that it

does not require the start and end paths to have the

same number of points; MorphSVGPlugin intelligently

subdivides the paths and adds points where

necessary so you get the smoothest results.

MorphSVGPlugin is available to Club GreenSock

members, which is the main source of funding for

GSAP’s ongoing development and support. Members

get access to premium plugins that solve very

unique challenges and integrate seamlessly into

the rest of the platform. All Club GreenSock bonus

plugins are available free for testing on codepen.io.You can fork the hippo demo, drop in your own SVG

and experiment as much as you like.

CONCLUSIONNow these hidden GSAP gems have been revealed

it’s time to release their true power in your projects.

Explore the demos, grab the code and have fun

pushing your animations to the limits. If you need

any help, just swing by the GreenSock forums

(greensock.com/forums); I’ll be there.

Export root Chris Gannon’s Love and Bubbles is a great example of many t imelines and random tweensthat can be controlled with exportRoot()

8/18/2019 net - June 2016.pdf


FROM THE MAKERS OF

Pick up your copy at

www.myfavouritemagazines.co.uk/design

On salenow

Master responsive design today!

8/18/2019 net - June 2016.pdf


114 june 2016

PROJECTSAccessibility

“I’m an accessibility consultant, stop hiring

me,” wrote Joe Dolson in a recent blog post

(netm.ag/dolson-280). This seems like strange advice,

but Dolson makes an important point. Accessibility

specialists are often involved too late in the game,

when all they can do is report issues and help

prioritise what can be fixed with the time and

resources remaining.

Remediation is a short-term way to deal with

accessibility. A WCAG audit can tell you what’s

wrong and recommend code fixes, but it won’t tell

you that issues were introduced because the visual

design process didn’t consider colour contrast

requirements, or that the selection process for a

JavaScript UI framework didn’t include requirements

for accessibility support.

Microsoft is adjusting its design process to focus

more on disability to increase the involvement of

people with disabilities in its design research (netm.

ag/microsoft-280). This way, it can creatively address

the design challenges that affect people in different

contexts and situations.

MATURITY MODELS

Accessibility as remediation and accessibility as

a driver for innovation are at two ends of a scale

of accessibility maturity. There are models that

help organisations measure their current level of

accessibility maturity, identify the risks of remaining

at that level, and uncover what they need to do to

move to a higher level.

Some models are very much geared towards

legal or standards compliance, but I like to use an

approach adapted from Jess McMullin’s Rough Design

Maturity Continuum (netm.ag/continuum-280). This

focuses instead on developing more effective and

sustainable ways to integrate accessibility into

the design process. We use this continuum to help

organisations take steps to integrate accessibility

into every part of their project lifecycle.

There are a number of ways your organisation

can move along the continuum. During the initial

user research stage, involve people with disabil ities

in activities. When design decisions start to be made,

ensure everyone making those choices considers

the implications on accessibility. Implement

processes that ensure the tools and frameworks

you use in development have good accessibility

support, and that you know how to accommodate

any shortcomings. Finally, use the Manifesto for

Accessible UX (netm.ag/manifesto-280) as a guide

to drive change in accessibility practice.

DESIGNING ACCESSIBILITYDavid Sloan explores the value of a more matureapproach to accessibility as a core design quality

P R O F I L E

ACCESSIBILITY

David ([email protected] ) is UX research lead with

accessibility consultancy The Paciello Group. He is also co-chair

of the W3C Accessible Online Learning Community Group

8/18/2019 net - June 2016.pdf


8/18/2019 net - June 2016.pdf


PROJECTS

Build it, Rank it, Share itAn online business doesn’t just magically

happen, you need the right tools for the

right job. You need every advantage

you can get over your competition.

Boost your Google Rank

with RankingCoach

Create your website quickly

and easily with Sitebuilder

Boost D3.js withSVG gradients

Design a mobileapp with Adobe

Get started withpattern libraries

11 tips for ergonmobile interface

Get more fromChrome DevToo

7 great hiddenGreenSock gem

Documents

net - June 2016.pdf