net 2015-05

7/21/2019 net 2015-05

http://slidepdf.com/reader/full/net-2015-05 1/136

Issue 266 : May 2015 : net.creativebloq.com

PROJECT

The voice of web design

Create a

layouts wFoundati

for Ap

7/21/2019 net 2015-05


W o r l d M a g s . n e t W o r l d M a g s . n e t

Wor l d ags net

http://worldmags.net/


7/21/2019 net 2015-05


may 2015

3

Welcome

EDITOR’S NOTE

FEATURED AUTHORS

SEB

LEE-DELISLE

Seb is a digital artist who

loves lasers. On page 76 he

shows us how to get started

experimenting with hardware

w: seb.ly

t: @seb_ly

COLE

HENLEY

Cole is web developer and

designer at Mud. On page

68 he looks at how we can

become more profitable

w: cole007.net

t: @cole007

VIVIANA

DOCTOROVICH

Viviana is a senior UX designer

for Firefly. On page 41 she

explains how you can learn

to love your clients

w: fireflylearning.com

t: @vivdoc

VASILIS

VAN GEMERT

Vasilis teaches at a university

in Amsterdam. On page 28 he

argues why an engineer should

be part of every design team

w: vasilis.nl

t: @vasilis

WELCOME

It’s all about the money! This month’s issue

is packed with advice on how to, quite simply,

make more money making websites. As you may

have noticed, there’s also a special 20-page guide to

designing amazing ecommerce experiences.

Plus, we’ve teamed up with Treehouse to offer you

an exclusive 60-day trial (worth $50), which provides

you with full access to more than 1,000 online videos

on web design, coding, business and more. Simply

visit jointreehouse.com/netmag to sign up.

We’re also excited to announce that the net awards

are back! We’re now accepting nominations and you

have until 19 April to tell us who you think deserves

to be honoured this year. Our awards are unique in

this industry: there’s no complicated entry process,

nor is there an entry free. The awards are solely

based on nominations. They matter. The lack of an

entry fee also ensures the work takes centre stage

and we can really uncover new talent.

So, head to thenetawards.com, spare a few minutes

and cast your nominations in as many of the 20

categories as you like. The winners will be revealed

after Generate London on 18 September. Who knows?

Maybe it’ll be your turn this year. Good luck!

Oliver Lindberg, editor

[email protected]

@oliverlindberg

WIN! AN APPLEWATCH

For full detailsturn t0 p57


Wor l d ags net



7/21/2019 net 2015-05


4 may 2015

ART CONTRIBUTIONS

MANAGEMENTContent and marketing director Nial Ferguson [email protected]

Head of content & marketing, photography, creative and design Matthew Pierce [email protected]

Group editor-in-chief Dan Oliver [email protected], Group art director Rodney Dive [email protected]

EDITORIAL CONTRIBUTIONS

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

Art editor Mike Brennan [email protected], Designer Rich Carter [email protected],

Commissioning editor Martin Cooper [email protected], Commissioning editor Julia Sagar [email protected],

Staff writer Sammy Maine [email protected], Staff writer Alice Pattillo [email protected]

Rachel Andrew, Brandon Arnold, Paul Boag, Andy Budd, Jo Casley, Craig Coles, Cathy O’Connor, Peter Cook, Gene Crawford, Anna

Debenham, Irene Demetri, Viviana Doctorovich, Michael Flarup, Nathan Ford, Vasilis van Gemert, Matt Hamm, Seb Lee-Delisle, Dan Mall,

Alte Mo, Guy Moorhouse, Cole Henley, Chaals Nevile, Alex Newman, Julian Shapiro, Benjy St anton, Nick Swan, Megan Williams, Leon de Wit

Ben O’Brien, Tobias Hall, Ben Mounsey, Chloe Wright

ADVERTISING Advertising sales director Suzanne Smith [email protected]

CIRCULATION Trade marketing manager Juliette Winyard [email protected]

PRODUCTION Production controller Nola Cokely [email protected]

Production manager Mark [email protected]

LICENSING International director Regina Erak [email protected]

SUBSCRIPTIONS Phone our UK hotline 0844 848 2852; international +44 (0)1604 251 045

Subscribe to net online at myfavouritemagazines.co.uk

All contents copyright © 2015 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 ser vices

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 16 APRIL 2015

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

@netmag /netmag +netmagazine flickr.com/photos/netmag [email protected] net.creativebloq.com

COLOPHONAPPS USED PAPER TYPEFACESGoogle Docs, Dropbox, InDesign,

Skype, Illustrator, FutureSource,

Photoshop, Future Folio

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


Wor l d ags net



7/21/2019 net 2015-05



Wor l d ags net



7/21/2019 net 2015-05


6

may 2015

Issue 266 : May 2015 : net.creativebloq.com

THE REALITY OF MAGIC DESIGN 28

Vasilis van Gemert fights to reintroduce

engineers into the creative process

START CHARGING 26

In-house design teams can be under-

valued. Paul Boag offers a solution

WORKSPACE 18

Sound-absorbing clouds, Bambi figurines and a three-foot wooden

dinosaur ... Etsy’s office is unlike any other. Jo Casley gives a tour

BIG QUESTION 38

How do you manage your cashflow? Seven

web experts share their tips and tricks

Q&A 40

Vivaldi designer Alte Mo gives the low-

down on the adaptable new browser

LEARN TO LOVE YOUR CLIENTS 41

Viviana Doctorovich thinks by changing our

behaviour, we can learn to love our clients

VOICES

INTERVIEW 32

Web designer and

natural businessman

Greg Storey shares his

thoughts on remote

working, starting again

and life after Happy Cog

SUBSCRIBE TO NETAND SAVE UP TO 60%

VOICES

FEED

SIDE PROJECT OF THE MONTH 16

Guy Moorhouse taught himself animation

to create GIF project Mooooooving

BEYOND PIXELS 20

Megan Williams considers the similarities

between lean UX and roller derby

CLIENTS FROM HELL 17

One developer chronicles his best/worst

exchanges with a self-absorbed customer

NEED LIST 21

Web stuff we want, including a hipster

business guide and a beautiful print mag

EVENT REPORT 23

Ruth Hamilton reports on the goings-on

at Reasons to be Creative’s London event

FEED

TAKE ADVANTAGE OF THE NEW

PRINT AND DIGITAL BUNDLE

Turn to page 24 to find out more

WIN! AN APPLEWATCH

For full detailsturn t0 p57


Wor l d ags net



7/21/2019 net 2015-05


may 2015

7

Contents

HOW TO GETPAID MORE 68

It can be tricky to turn your passion

into money. Cole Henley looks at how

we can become more profitable

GET STARTEDWITH HARDWARE 76With the Internet of Things causing

a stir, Seb Lee-Delisle explains how

to turn your hand to hardware

DESIGN CHALLENGE 52

Three designers mock up ferry sites

FOCUS ON 56

Gene Crawford on the perfect sign-up page

HOW WE BUILT 64

RetroFuzz’s ecommerce site for Wrangler

PROFILE 58

We catch up with thoughtbot‘s thinkers

SHOWCASE

BUILD WORKING SITES

QUICKLY WITH WEBFLOW 90

Julian Shapiro walks through

how to use Webflow to build

a production-ready site

GALLERY 44

Nathan Ford

showcases his

favourite online offerings,

including quirky news site

The Public Domain Review

NETWORK 8

The latest mail, tweets, posts and rants

EXCHANGE 10

Andy Budd, Nick Swan, Dan Mall and

Rachel Andrew share their advice

REGULARS

PROTOTYPE A WEB APP 84

Brandon Arnold on how to mock up a

responsive app using Foundation for Apps

AUTOMATE DEV TASKS 108

Alex Newman explains how Grunt can take

care of repetitive development tasks

TACKLE CSS 3D 94

Leon de Wit explains how to render

a button in space using CSS 3D

DESIGN BETTER APP ICONS 98

Michael Flarup shares some tips for

designing memorable, apt app icons

HEAD TO HEAD 96

Xero versus FreeAgent

WEB STANDARDS 103

Chaals Nevile considers digital currencies

CREATE DATA VISUALISATIONS104

Peter Cook shows you how to use D3.js

to represent data from social networks

ACCESSIBILITY 114

Cathy O’Connor on accessible ecommerce

PROJECTS

FEATURES

PROJECT

REGULAR

EXCLUSIVE VIDEO TUTORIALS!

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


Wor l d ags net



7/21/2019 net 2015-05


8

may 2015

NOT SO BADASS

Just wanted to say I agree with

most of this article [pictured

below], but I have worked with

many project managers who

over-promise to the client.

They keep the other members

of the team behind closed

doors. They play Chinese

whispers between the client

and the team. It’s no wonder

the client does not get what

they are expecting.

Seb Green, Manchester, UK

Thanks, Seb. Obviously,

everyone’s experiences will

be different, and we’re sorryto hear you’ve had some bad

ones. Does anyone else have

any opinions to share?

REACT

I’ve seen AngularJS get a lot

of coverage lately, but haven’t

seen much about React. I’d

love to see a walkthrough or

tutorial, since it’s becoming a

major player in the JavaScript

framework war.

Clint Milner, Colorado, US

Funny you should mention

that, Clint. It is indeed the

JavaScript library du jour,

created through a Facebook

and Instagram collaboration.

The first React conference

took place at Facebook HQ

at the end of January and

you can watch all the talks

at netm.ag/react-266. Next

month we’ve got a tutorial

on React lined up, explaining

how to build advanced

interfaces with the library

– and there’s plenty more

to come!

DREAMWEAVER

I am a web development

student and and have a quick

question regarding Adobe

Dreamweaver. I have just got

my first taste of it, and I must

say I am not impressed with

it at all. I would much prefer

to hand-code everything,

because I feel like I have morecontrol over my work this

way. I constantly feel as if I am

doing extra steps when using

Dreamweaver. When I raised

this concern to my teacher,

she clearly stated that it was

better to use Dreamweaver

because it is becoming the

norm for web designers and

developers. When I searched

for something to back this

up, I found the exact opposite

of what my teacher said. It

seems like people prefer to

use Sublime or some other

editor. Could you please give

me some insight as to whether

I should fully immerse myself

in Dreamweaver, or focus on

another editor to construct

my sites in the future?

Kyle Narovich, Michigan, US

Good question, Kyle.

Maybe you should show

your teacher a copy of net

magazine! Dreamweaver

is still widely used, and

in fact its latest version is

pretty good (you can read

our review at netm.ag/

dreamweaver-266). But

you’re absolutely right,

many web designers prefer

to hand-code and use text

editors like Sublime.

Chances are you’ll need

to dig into Dreamweaver to

pass your course, but in your

spare time you should learn

to hand-code.

EMAIL FOR ANNA

DEBENHAM

I read an article where it

was mentioned that you are

coming up with a site for

beard fans called Trim.mr.

Can I get the web address?

I am eager to join in as I like

sporting different beard styles

and moustaches.

Anonymous, IN

Err ... sadly, Trim.mr isn’t

real. It’s just a concept Anna

Debenham came up with

for our Design Challenge

in issue #256 (see netm.ag/

trim-266). Maybe she’s hit

on something, though?

Show the love In the Voices section of issue #264, Rachel Gertz argued that weneed to be more supportive of our digital project managers

CONTACT US @netmag /netmag +netmagazine [email protected] net.creativebloq.com

Mail, tweets,posts and rants


Wor l d ags net



7/21/2019 net 2015-05


7/21/2019 net 2015-05


10

may 2015

TAX

VATMOSS

What is the VATMOSS thing I’ve seen

mention of on Twitter?

Jonathan Stevens, Poundgate, UK

RA: This is the change in VAT place of

supply rules in the EU. Until 1 January

2015, companies selling digital products

(software, ebooks, services such as

hosting) to consumers charged VAT at

the rate in the country of the seller. Now

VAT has to be charged at the rate for the

location where the product will be used.

If I sell an ebook to a person who lives in

Germany, I need to charge the German

VAT rate. That VAT then must be paid to

the German tax authority. The MOSS is

the ‘Mini One Stop Shop’. Instead of

How do you create valuable long-termrevenue products in web design?Tim Vogt, Zwolle, NL

QUESTION OF THE MONTH

Send your questions to [email protected]

Practicaladvice from

industry experts

ANDY BUDD

UX designer and Clearleft

partner Andy curates

dConstruct w: clearleft.com

t: @AndyBudd

NICK SWAN

Nick is a bootstrapping

entrepreneur who enjoys

building sites and apps

w: britstrapped.com

t: @nickswan

DAN MALL

Creative director Dan is the

founder of SuperFriendly

and co-founder of Typedia w: danielmall.com

t: @danielmall

RACHEL ANDREW

Web developer and

writer Rachel co-founded

CMS Perch

w: rachelandrew.co.uk

t: @rachelandrew

Please note: Rachel Andrew is not a tax adviser and

you should always consult a professional or contact

your tax authority yourself to clarify any action you

intend to take

THIS MONTH FEATURING...

AB: It’s really difficult to incubate a product inside a service company. The effort

required to build and maintain a product often clashes with the needs of your clients,

and regularly takes a back seat. This is partly down to the difference in cashflow

between these two practices – small but recurring revenue versus intermittent billing.

It gets even more problematic once the product is launched and you need to recruit

a whole different set of skills, from sales and marketing to technical support. This is

one reason why agencies like 37signals (37signals.com) shut down their agency practice,

while other companies like Mint Digital spin out entirely separate entities.

Mint products Mint Digital starts new companies around products it has incubated internally


Wor l d ags net



7/21/2019 net 2015-05


may 2015

11

Q&As

having to pay each country individually,

sellers make one return to their own

MOSS, which then distributes the VAT.

PRICING

GOING SOLO

If I’m a soloer and my client has multiple

zeroes in the bank, shouldn’t we split risk?

Cennydd Bowles, London, UK

DM: Some customers are paying you to

take their risk from them. Others want

to share it with you and are willing to

share the reward as well. In most

projects, you are sharing risk because

each party is sacrificing something:

your customer is sacrificing their money

to hire you and you’re sacrificing effort

that could have been spent elsewhere.

Whether you realise it or not, risk is

shared in most transactions.

BOOTSTRAPPING

PERSONAL PROJECTS

How do you decide if you should get

funding or investors, versus saving money

to start a project yourself?Andy Layman, Seattle, US

NS: If you are just starting out and trying

to prove an idea, fund it yourself. Most

of the cloud computing service providers

have programs that offer free hosting

resources to help startups get going

(Microsoft’s BizSpark, Amazon’s AWS

Activate, Cloud Platform for Startups

from Google). Keep costs down and get

building. Once you’ve proven your idea

through generating some revenue,

if you want to scale it up quickly you

need to look to take funding. As you

have already shown there is a market for

your idea, you will be in a much stronger

negotiating position. However, you also

need to consider what you want the

outcome to be. If you want quarterly

targets and goals, teams and employees,

accountability to investors, look for

funding. If you want to grow a business

and keep total control, stay self-funded.

Just because you’re self-funded doesn’t

mean you can’t grow to become a large,

successful business.

PRICING

SCOPE CREEP

How do you handle scope creep? Is there

a way to prevent it rather than react to it?

Jessica Ivins, Chattanooga, US

DM: Believe it or not, scope creep is

a project management problem, not

a pricing one. Price is one of the most

valuable assets in a transaction, and

it’s overkill to use it to control scope.

It’s like bringing a gun to a knife fight.

The best way to prevent scope creep is

to create a clear scope and stick to it.

TAX

FINDING CUSTOMERS

How do I work out where my customer is?

Charlotte O’Donnell, Sheffield, UK

RA: That is one of the hardest parts

of dealing with VATMOSS. You need

Reading around VATMOSS is a complex issue. Find out more in Rachel Andrew’s post on the topic forWebdesigner Depot (netm.ag/andrew-266 ) or on her own site (netm.ag/andrew2-266 )

3 S I M P LE S T E P S

How do you stand outfrom the rest at the start?Dan Davies, Flint, UK

AB: Standing out from the crowd sounds

scary, but it’s not as difficult as you think.

BE AMAZING

There are lots of mediocre devs

and designers out there, so quality

really does rise to the top. Hone your

skills and be the best at what you do.

HAVE A THING

One of the best ways to get

noticed is to do one thing well.

Maybe you could be the best freelance

WordPress developer in Brighton, an

Agile expert, or you could specialise in

a sector such as band websites.

GET YOURSELF NOTICED

Most leads come from word of

mouth, so you need to develop

a good reputation. Write blog posts,

talk at events, post your work online,

help people in forums, meet with agency

founders and attend networking events.


Wor l d ags net



7/21/2019 net 2015-05


12

may 2015

EXCHANGEQ&As

BOOTSTRAPPING

BUILDING MOMENTUM

What’s the best way to get sales initially,

without spending a fortune on advertising

and marketing?

WebWise Media, Exeter, UK

NS: I have been trying this tactic

recently: ask your target customers for

advice. Put together a brief email that

outlines your offering, and ask the person

if they feel others in their industry will

benefit from something like this. Some

people will respond with advice, which

can of course be valuable in its own right.

If your offering really is as good as you

think it is, the person you are

corresponding with will probably become

a customer. You then need to test various

channels such as SEO, AdWords,

Facebook and LinkedIn, and take a very

data-driven process to ensure a channel

is profitable for you – or delivering on

the goals you set. If you want to read up

on this, a great resource is Traction by

Gabriel Weinberg and Justin Mares

(tractionbook.com).

HIRING

NEW BLOOD

How do you go about finding your first

employee? At what point should you bring

someone in to offset your skills?

Chris Da Sie, St. John’s, CA

AB: It’s important to be hooked into

the local design and development

community when starting your own

agency, so go to local events and try

to meet as many people as possible.

Craft your story so people know what

you stand for and why you’d be good to

work with. Almost all of our early team

started as friends who realised it’d be

more fun to work with us than their

existing companies. Another good idea

is to start working with freelancers you

really like and keep giving them so much

work that it makes sense to go full-time.

Lastly, building a reputation is a great

way to attract talent. So even when we

use a traditional approach to recruitment

and post a job ad, we get a higher than

usual response rate as people know who

we are and want to work with us.

PRICING

SHIFTING RISK

Does value pricing push excess risk

onto the consultant?

Cennydd Bowles, London UK

DM: Value pricing godfather Ron Baker

tells us that “profits come from risk”

(netm.ag/baker-266) – so the consultant

does want some risk, in order for thepotential for profit. Excess risk, though?

That implies an unnecessary amount of

risk. In any transaction (that doesn’t

involve coercion), both parties enter

willingly, so each adopts the amount of

risk they feel comfortable with.

Otherwise, neither would enter into the

transaction. No form of pricing – value

or otherwise – could force someone to

adopt risk they aren’t content with.

to collect two non-conflicting pieces of

proof for the rate you charge and store

this proof for 10 years. For Perch we are

collecting the address a user enters in

their account, their IP address and also,

after payment, the country their credit

card is registered with, or the country

PayPal believes them to be in. If we don’t

get two matches, we have to contact the

customer and clarify where they are.

We’ve only had to do this once in the

past two months.

TAX

GOING INTERNATIONAL

I’m a web designer and work with clients

in other European countries. Do I have to

worry about this [the new VAT rules]?

Finley Roberts, Cirencester, UK

RA: It only applies to digitally delivered

products. So, for example, if you design

websites for clients and you sit at your

computer doing the work (even if it’s

just customising a theme) for each client,

this does not apply to you. If you are VAT-

registered you would charge VAT at your

rate, unless the client had a VAT number

and then you could leave off the VAT and

they would report it under the reverse

charge rules.

If, however, you design WordPress

themes, and put them on a website

for any number of people to download

and use immediately, with no further

customisation by you, that would be

seen as selling a product. In this case,

you would need to charge VAT at the

rate of the customer.

Gaining traction This book sets out a five-step plan

for startups looking to gain traction

Making friends Events such as this Dribbble meetup can help you stay plugged in to the community


Wor l d ags net



7/21/2019 net 2015-05


Choosing a registrar and web host to build your

business on can be tough. You want a reliable

partner that puts your needs first. A partner that

practises the very best in terms of security. A partner

that puts your privacy rights first. And a partner that

is available to support you, 24 hours a day, at just a

click of a button.

Namecheap.com is a domain registrar and hosting

company that has been in business since 2000. To

put that into context, it has been around longer than

Facebook, Twitter and LinkedIn.

The firm has over four million domain names under

management, and boasts over two million satisfied

customers. What’s more, Namecheap is the world’sfastest growing registrar.

Why should you try it? Because Namecheap takes

business seriously, and its customers even more so.

The firm promises to be honest and straightforward,

and to never bombard you with unwelcome up-sells

and advertising. It promises to simply provide you

with a safe, secure and dependable online platform

for your business.

Namecheap also has a growing presence in the UK

and Europe. With data centres in Nottingham and

Amsterdam, the company is well positioned to serve

the UK, Ireland and further afield.

CORE TECHNOLOGIES

What makes Namecheap special is security coupled

with simplicity. Trust it with your online presence

and it will deploy technologies such as WhoisGuard

and Comodo PositiveSSL to protect you, your clients

and your business. Namecheap also provides a set of

DNS servers spread across the US, Europe and Asia,

which deliver highly reliable DNS service. Plus, you can

expect URL and email forwarding at no extra charge.

Along with a highly f lexible domain management

system, Namecheap offers unparalleled levels oftechnical support. If you have a question, there’s always

an expert on hand to help – 24 hours a day, seven days

a week.

TRY NAMECHEAP FOR FREE

To put Namecheap to the test today, head off to

namecheap.co.uk/easyas123. There you’ll be able to

grab your very own .website domain name – free

with purchase of any of its hosting packages – and

experience real peace of mind, too.

GETTING YOUR BUSINESSONLINE IS EASIER THAN 1, 2, 3

IntroducingNamecheap: a better registrar for the UK

ADVERTISING PROMOTION

Try Namecheap for f ree: visit namecheap.co.uk/easyas123W o r l d M a g s . n e t W o r l d M a g s . n e t

Wor l d ags net





7/21/2019 net 2015-05



Wor l d ags net



7/21/2019 net 2015-05


may 2015

15

People, projects& paraphernalia


SIDE PROJECT OF THE MONTH 16

Guy Moorhouse shares how he challenged

himself to learn animation to create moving

GIF project Mooooooving

BEYOND PIXELS 20

Lean UX designer and roller derby coach

Megan Williams on why her two vocations

have more in common than you’d expect

CLIENTS FROM HELL 17

One worn-down developer chronicles his

best/worst conversations with a customer

who thinks the world revolves around him

NEED LIST 21

The web stuff we want this month,

including a hipster guide to business and

a beautiful and absorbing print magazine

WORKSPACE 18

Sound-absorbing clouds, Bambi figurines

and a 3ft wooden dinosaur ... Etsy’s office

is unlike any other. Jo Casley gives a tour

EVENT REPORT 23

Reasons promises to recharge creative

batteries of all kinds. Ruth Hamilton

reports back on the London event


Wor l d ags net



7/21/2019 net 2015-05


16

may 2015

FEEDSide project

net: How did Mooooooving come about?

GM: I’m not really an animator, and with

Mooooooving (mooooooving.com) I wanted to see

if I could do an animation project. That’s how most

of my side projects come about – me setting myself

a challenge to learn something new.

net: Why did you decide to use Processing?

GM: I actually made the first few animations with

Flash (it’s still good for some things!), but it was a bit

cumbersome for what I had in mind. Processing offers

a nice immediacy between code and expression. You

get into a feedback loop where iterating the code

informs the process and outcome. It’s kind of like

working out your destination after you’ve departed.

net: What is it you enjoy most about the project?

GM: I enjoy the escape, the freedom. The industry

I work in can be very self-regarding, so it’s nice to

break out of that bubble. Working as a web designer

is also very practical and logical. It’s about designing

systems and interactions. Mooooooving offers a nice

counter to that. It’s more like making music or art –

a form of personal expression for its own sake. You

know, the stuff that makes us human.

net: Have you faced any challenges?

GM: Yeah, loads! I’m not a trained animator, and

while I think I can see when something’s not quite

right, it has been a learning curve. Easing, timing

and motion are all really hard to get right. I have

total respect for character animators. The other real

challenge is the maths. For example, moving an

object in a circle requires an understanding of

trigonometry. I wasn’t very good at maths at school

so I’ve had to relearn things. Maths teachers should

totally be teaching this stuff using Processing – it

would be way easier to grasp!

net: Has the project affected your everyday work?

GM: It’s definitely tuned my eye in to the details

that add realism and grace to animation. One of

the reasons I started this project was to hone my

animation skills. It is becoming more prevalent in

modern interfaces and I think when done well it can

really elevate the experience for the user.

MOOOOOOVINGDesigner Guy Moorhouse taught himselfanimation to create this collection of GIFs

SIDE PROJECT OF THE MONTH

INFO

job: Designerand technologist

w: futurefabric.co.uk

t: @Futurefabric


Wor l d ags net



7/21/2019 net 2015-05


When working freelance it can

be difficult to keep a handle on

money. So how do you tackle

those slow-to-pay clients?

ESTABLISH SOLID T&Cs

@wibbleweb gives some excellent

advice: “Clear communication of

payment terms, both in contract

and verbally prior. This cuts out a

lot of ‘We weren’t aware of your

terms’.” @iamlucid says, “Map out

project milestones for approval

before start”, and suggests

implementing a “kill clause

and penalty for delays.”

BUILD A RELATIONSHIP

“I maintain a lot of communication

with my clients and share research

on how their project came to be.

Inclusion is the key to fast pay.”

says @vittorpia. @thepixelgrid

agrees that “maintaining a cordial

relationship with the client

throughout” is essential, while

@LeroyKirby points out that

if there is trouble further down the

line, a good relationship will help

the client empathise with

your situation.

STAGGER PAYMENTS

@RichardCarter suggests

“staged payments through the

project and final payment before

launching the website.”

@maloneforthewin invoices each

Friday for that week: “If it’s not

paid on Monday, work stops

Tuesday”. @PXLagency agrees,

advising you take a deposit on top,

to cover any discrepancies.

PREVENT LATEPAYMENTS

HOW TO

clientsfromhell.net

may 2015

17

Feed

I am a software developer, and I have one

particular client who thinks he is the centre

of the universe. Here are some of the best/worst

conversations I have had with him ...

Client: This all takes too much time. From now on

you will only work for me. Cancel all other projects

and clients. Costs don’t matter.

Even though I would never kick out any client

because another client demands it (especially this

one), I calculated what he would have to pay me

for a whole year in advance and sent him an offer.

Client: Outrageous! You know I don’t have that

kind of money!

Client: A user has reported a bug. Fix it.

Me: OK, what kind of bug?

Client: I don’t know. That’s your job.

Me: I need some kind of error description so I can

figure out the problem. The software is being

used by over 10,000 people a day. One person

having a bug isn’t specific enough to fix anything.

Client: Look, I don’t know this stuff. We got

a negative review that says it doesn’t work.

I don’t care how, I just want you to fix it ASAP.

The next day, I claimed I had fixed it. For moral

reasons, I didn’t charge the client. For a variety

of other reasons, I wanted to.

Client: Why is the deadline in two weeks?

You said it would take 48 hours of work!

Me: Well, I have other clients and it’s only eight

days left until the deadline.

Client: What do you mean eight days? It’s 12 days!

Me: Eight business days. I don’t count weekends.

Client: Why not? I work on weekends.

Me: OK, but I don’t.

Client: It’s still just three days you need for

the work.

Me: Three days? 48 hours is six days.

Client: No, it’s three days.

Me: Do you expect me to work 16 hours a day?

Client: Of course!

ALL ABOUT ME

CLIENTS FROM HELL

I l l u s t r a t i o n : B e n

O ’ B r i e n

h u d d l e f o r m a t i o n . p r o s i t e . c o m

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


Wor l d ags net



7/21/2019 net 2015-05


1

18 may 2015

Etsy’s London office is a really

special place to work because

it is our first permanent home

in the UK. When we first viewed

the space in Clerkenwell, it had

hideous bright blue walls and

laminate floors and needed some

TLC. Thankfully, our fearless office

manager and designer saw past

all that and fell in love with the

enormous floor-to-ceiling

windows (1). It’s a wonderfully

light and airy place to work.

The whole Etsy UK team

contributed ideas and suggestions,

and as a result the office is full of

reclaimed materials, greenery and

quirky decor from Etsy sellers. As

soon as you walk through our front

door you see a mantelpiece (2) with

handmade soft toys, vintage Bambi

figurines, London maps and some

painted logs – it’s definitely not

your standard corporate office!

All the desks (3) are made by

Etsy seller WickedBoxcar (netm.ag/

boxcar-266) from reclaimed wood,

and the bright orange barn doors

make our space unique. Sound-

absorbing textile ‘clouds’ all over

the ceiling aid the acoustics,

and the enormous industrial

metal lights (4), from a salvage

yard in Devon, give the office

an urban feel.

It was important to us to have

plenty of cosy, comfortable places

to meet, so we have a large kitchen

on the mezzanine, with a huge

farmhouse table that we all sit

around for ‘Eatsy’ – our weekly

shared lunches. There is generally

a lot of cake! Cupboards full of

vintage teacups and plates make

the space very homely.

We all decorated the office

with art and homewares from our

favourite Etsy sellers to give it real

personality. My favourite items are

the crocheted zebra head mounted

on the wall of our meeting room

and the three-foot 3D wooden

dinosaur puzzle called Ralph (5)

that stands opposite my desk.

A wall mural and some lights

spelling ‘ETSY’ are just a couple of

the DIYs we’ve attempted since we

moved in. We had a wallpaper

printing workshop recently, so

maybe we’ll wallpaper one of

the meeting rooms next!

DIY fanatic Jo is communications

manager at Etsy UK (etsy.com ), an

online marketplace for handmade

and vintage wares

HANDMADE HAVENEtsy’s Jo Casley reveals how the London branch used

its own sellers to build a bespoke workplace

WORKSPACE

2

5

3

4

P R O F I L E


Wor l d ags net




7/21/2019 net 2015-05



Wor l d ags net



7/21/2019 net 2015-05


P R O F I L E

20

may 2015

FEEDBeyond pixels

Roller derby is often described as a cross

between football and rugby, but on roller

skates. It may seem chaotic, but it is a very

strategic and team-oriented sport. It’s actually

pretty similar to working on a lean UX design

team ... but with more hip checks and bruises.

In 2006 I made two life-changing decisions:

I started a career in user experience design and

I joined a women’s flat-track derby league.

During the day I was creating wireframes and at

night I was tearing up the track on eight wheels.

Currently I am a lead UX designer at PayPal and

the coach of the Santa Cruz Derby Girls. Over the

years I have found some common themes that

are relevant to both teams.

The first is to do with collaboration. Being

able to collaborate with a variety of talented

individuals is the key to any successful team.

Without the ability to prioritise and work towards

a set of common goals, no team will be able to

achieve impactful progress. This task is easier

said than done when working with individuals

that have strong opinions, which is why it is

essential to have a facilitator to help keep the

team from straying from common goals.

In the case of roller derby, my role as a coach

is to drive consensus and keep everyone on task.

The same role is played by my project manager at

work. She keeps my team focused so everyone is

working towards accomplishing our deliverables.

In both cases, this means my teams can achieve

more than we could as individuals.

Another common thread is iteration. In lean

UX and roller derby, my teams are frequently

iterating on ideas. In roller derby, every game

is an opportunity to develop offensive and

defensive strategies. We hypothesise about what

will be successful against a particular opponent,

but we are not able to validate these theories

until we face them. Similarly, in lean UX we

constantly test our designs to see if our proposed

design solutions will create the desired user

experience. Without formulating hypotheses and

testing, my teams cannot identify why particular

strategies do or do not work. This knowledge is

key to building a resilient and adaptable team

that can withstand challenges and setbacks.

I’m very thankful to have a hobby that allows

me to continually grow skills that directly apply

to becoming a better designer on a lean UX team.

Although I’m still trying to figure out how I can

wear my skates at work.

ROLLER DERBYThis month ... Megan Williams draws some unexpected

parallels between lean UX and roller derby

BEYOND PIX ELS

STUFF I LIKE

LORNA MITCHELLDevelopment consultant

lornajane.net

TODO.TXT

This simple to-do list app is

the one that ‘stuck’. It really

helps me keep my par t-time

job, full-t ime business,

open source projects and

household on track! It’s a text

file that you store in Dropbox

... not rocket science but very,

very platform-independent.

todotxt.com

HUBOT

This is the best business

intelligence tool I’ve found

in years. Hubot sits in your

Slack/HipChat/IRC channel

and notifies you of events on

your monitoring/source

control/issue tracking/

continuous integration tools,

and can take commands to

execute on those same tools.

hubot.github.com

VIVOSMART

I’ve finally found a

smartwatch that doesn’t

require very large wrists to

wear. Now I get all my call and

text alerts on my wrist. It

integrates with my ANT+

heartrate monitor and tracks

my steps, sleep patterns,

and who knows what else?

netm.ag/vivosmart-266

Senior UX designer Megan

(@hellomeganw) spends her days

developing PayPal’s digital wallet.

In her free time she coaches the

Santa Cruz Derby Girls P h o t o g r a p h y : M a r k N o c k l e b y f l i c k r . c o m / p h o

t o s / n o c k l e b e a s t


Wor l d ags net



7/21/2019 net 2015-05


may 2015

21

Need list

(1) Curious about the Internet of Things? This book will help you get to grips with the basics of smart objects (netm.ag/norris-266 ).

(2) Darkroom is an iOS app that features raw editing tools, editable filters and more (usedarkroom.com ). (3) The Great Discontent magazine

combines beautiful photography and graphic design with interviews with top creatives (thegreatdiscontent.com ). (4) Are you fed up with the

uncertainties of cashflow? Ryan Castillo cooks up some recipes to help freelancers build defined revenue strategies (netm.ag/castillo-266 ).

(5) Do you cringe at the term ‘hipster’? This book could change all that, with its tips for making money in the modern world (netm.ag/hipster-266 ).

(6) Final is a credit card with a difference, and promises safer, hassle-free banking. It’s coming soon, so keep an eye out ( getfinal.com ).

Small objects of web design desire: from a beautifully crafted

print magazine to a business guide inspired by hipsters

NEED LIST

What we think

STUFF WE WANT

DARKROOM FREETHE INTERNET OF THINGS £16.99

HIPSTER BUSINESS MODELS £11

THE GREAT DISCONTENT $25

FINAL TBC

7 RECURRING REVENUE RECIPES $12

3

5

21

4 6


Wor l d ags net



7/21/2019 net 2015-05


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 267 ON SALE 16 APRIL

CREATE PERFECTWORDPRESS THEMES

Take the pain out of architecting, buildingand maintaining WordPress themes

NEXTMONTH

PLUS

Build advanced

interfaces withReact

Turn Photoshop

files into layeredprototypes

Create, manage

and scale large CSS projects


Wor l d ags net



7/21/2019 net 2015-05


may 2015

23

Feed

EVENT GUIDE

CONVERGE SE

DATE: 15-18 APRIL 2015

LOCATION: S. CAROLINA, US

Promising to inspire, Converge

SE was created to support

anyone who works in or with the

web. Learn new skills with

workshops in UX, development,

frontend and business, as well

as networking and enjoying

great entertainment.

convergese.com

INDUSTRY

DATE: 22 APRIL 2015

LOCATION: NEWCASTLE, UK

One of the UK’s premier web

conferences promises its most

practical event to date.

Professionals from the likes

of Google, Etsy and Adobe will

offer talks on everything

from typography and

frontend development

to content strategy.

industryconf.com

BEYOND TELLERRAND

DATE: 11-13 MAY 2015

LOCATION: DÜSSELDORF, DE

This year marks the fifth

anniversary of Germany’s

mega-popular web design

event. After repeatedly selling

out, the conference is now

being held twice a year.

beyondtellerrand.com

UX LONDON

DATE: 20-22 MAY 2015

LOCATION: LONDON, UK

Products, people and platforms

shape this three-day event for

user experience designers,

where you can find inspiration,

learn new skills and boost your

knowledge. Speakers include

Brad Frost, Karen McGrane

and Cecelia Weckstrom.

uxlondon.com

EVENT REPORT

P R O F I L E

DATE: 20 FEB 2015

LOCATION: LONDON, UK

URL: reasons.to

Reasons – shorthand for ‘Reasons to be

creative’ is a biannual event with outings in

London and Brighton. This year, however, creatives

of the capital were almost denied their year’s dose

of creative juice due to a skiing mishap on the part

of host John Davey. However, a little bleeding on the

brain wasn’t to stop Davey, who checked himself

out of his Austrian hospital and hopped on a plane

back to the UK in time for 20 February.

The day’s programme took in an eclectic mix

of designers, type specialists, programmers and

developers, proving that one of the best ways to

reignite your creative fires is to take a peek into

an industry specialism other than your own.

Following a short apology for hitting everyone

with a technical talk while they were still enjoying

their morning coffee, CSS wizard Harry Roberts

(above) kicked the day off by exploring the latest

issue causing his clients headaches: theming.

Despite heralding it as a “fascinating micro-topic”

of web design, he warned the audience: “If you can

avoid theming, do ... if you can’t avoid it, do the most

cosmetic, superficial skinning you can.”

Security specialist James Hall followed, pointing

out that we’ve been doing passwords wrong all this

time (forget single-word passwords, we should be

using sentences). Although it hardly matters, as

any Wi-Fi password can be broken with a spare five

minutes, CloudCracker and some pocket change.

In her ‘Beyond the hambuger menu’ talk,

Anna Dahlström revealed how she’d spent one

frustrating, embarassing day trying to control

her mobile using only voice. She emphasised that,

although we haven’t yet reached Her levels yet,

it was a shift we were going to see before long.

In the final talk of the day, Elliot Jay Stocks

announced that despite a string of successful side

projects, he was only an “accidental businessman”.

He framed the thorny topic of making money as an

issue of sustainability, saying “The business side

is an enabler for me to do what I love.” Stocks’

rule of thumb? A venture is sustainable if it makes

enough to pay those who create the project.

How much is ‘enough’ is up to you.

REASONS:LONDONRuth Hamilton reports on the event that promises to

recharge your creative batteries, whatever your specialism

Ruth (@ruthehamilton) is

net’s production editor. She

has a borderline-unhealthy

interest in grammar and no

sense of direction P h o t o g r a p h y : M a r c T h i e l e f l i c k r . c o m / p h o t o s / m a r c t h i e l e


Wor l d ags net



7/21/2019 net 2015-05


Terms & conditions: Prices and savings quoted are compared to buying full priced UK print and digital issues. You will receive 13 issuesin a year. If you are dissatisfied in any way you can write to us or call us to cancel your subscription at any t ime 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:myfavm.ag/magterms . Offer ends 30 April 2015.

SAVE UP TO

38%

SAVE UP TO

45%

PRINT EDITION ONLY DIGITAL EDITION ONLY

FROM

£26.99FROM

£19.99

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 tonet for on-the-go access to our fullyinteractive edition, with streamingscreencasts, extra images and more

BASED ON A 6-MONTH SUBSCRIPTION BASED ON A 6-MONTH SUBSCRIPTION


Wor l d ags net



7/21/2019 net 2015-05


SAVE UP TO

60%

TWO SIMPLE WAYS TO SUBSCRIBEONLINE: myfavouritemagazines.co.uk/NETSUBSPHONE: 0844 848 2852 AND QUOTE CODE:PRINT15, DIGITAL15 OR BUNDLE15

NEW PRINT & DIGITAL EDITION

FROM

£32.49

Enjoy a combined print and digital subscription, and take advantageof print as well as exploring the fully interactive digital experience

Print edition delivered to your door

13 issues in a one-year subscription

iPad and iPhone edition download

Android edition download

Money-back guarantee

GREAT REASONS TO SUBSCRIBE

Your subscription will then continue at £32.49 every 6 months - saving 31% on the shop price and giving you an 83% discount on a digital subscription


Wor l d ags net



7/21/2019 net 2015-05


Opinions, thoughts & advice

GET RESPECT:START CHARGING

In-house design teams can be under-valued and and over-worked. Paul Boag

explains how to turn the situation onits head by becoming a cost centre

When you read about in-house teams,

they always seem to work for some

trendy web startup backed by venture

capital. They have stock options and operate

without management hierarchy. Their days

are all scrum sessions, hipster toys and

collaborative brainstorming.

In reality, few in-house web teams are

like this. Most exist in traditional brick

and mortar businesses. They are under-

resourced, under-appreciated and over-

worked. Instead of hipster toys they have

cubicles. Instead of scrum sessions there are

management directives. If this sounds

familiar, then you may want to suggest

becoming a cost centre.

BECOMING A COST CENTREThe idea of becoming a cost centre is simple:

your web team operates as an independent

agency within your business. If a depart-

BUSINESS

LEARN TO LOVE YOUR CLIENTS 41

Instead of resenting your clients, why not

redirect your energies to changing your own

behaviour, asks Viviana Doctorovich

INTERVIEW 32

Web designer and businessman Greg Storey

shares his thoughts on remote working,

starting again and life after Happy Cog

THE REALITY OF MAGIC DESIGN 28

Designers think technical constraints don’t

apply to them. Vasilis van Gemert fights to

reintroduce engineers into the creative process


Wor l d ags net



7/21/2019 net 2015-05


may 2015 27

Opinion

ment wants you to do some work, it pays

for your time out of its budget. The root of

the problems experienced by in-house web

teams is that they are under-valued. By

attributing a monetary value to your work,

you change the way your team operates

within your company.

As a result, you will see a reduction in

trivial work. If colleagues have to pay for your

time they will think twice before asking you

to do something. This will free up some of

your time for strategic thinking. You can

undertake the kind of work that often gets

ignored by other departments.

You will be able to set the rate you charge

other departments. The ‘profits’ you make

from commissioned projects will cover this

vital strategic work. This can also be used to

cover the cost of providing your staff with

the training they need. You may even make

enough to recruit more staff.

Most importantly, becoming a cost centre

will help change the way others perceive

your team. You will be seen as more valuable,

allowing you to stop being an ‘implementor’,

and start becoming a partner.

At this point you may be thinking there

is no way you could get your management to

agree to this. You might be right, but before

you dismiss the idea, let’s take a look at the

arguments for becoming a cost centre.

THE BUSINESS CASE

Many management teams perceive web

teams as a necessary evil. It is a cost that

they know they must bear, but they do not

understand the benefits it brings. Moving

to a cost centre model gives them a clearer

picture of where their money goes. It also

focuses the entire organisation on ensur-

ing there is a return on any investment.

Suddenly, departments have to justify their

expenditure on digital.

It also ensures the organisation gets the

best value for money, because market forces

come into play. Your in-house web team is

in competition with external agencies and

can be compared on a level playing field. This

ensures they offer the best service possible.

If your management team still isn’t con-

vinced, that doesn’t mean you should totally

give up on the idea. It is possible to reap many

of the benefits of being a cost centre without

actually being one.

their request. At the end of the project,

provide them with the final total and also

send this to management. For smaller pieces

of ongoing work, provide a monthly running

total. The idea is to shine a light on ineffi-

ciencies and those who waste your time.

A WORD OF WARNING

Becoming a cost centre is not a magic solu-

tion. It has its challenges and won’t change

your organisation’s culture overnight. But it

can help and it is definitely something

worth considering – it enforces a degree

of professionalism that is often lacking

between internal departments.

THE ALTERNATIVE

If being a cost centre is just out of the ques-

tion, consider behaving like one. There is

nothing to stop you calculating a cost per

person, per hour for your team. Include

salary, overheads and time for things like

training and strategy work. The figure does

not need to be 100 per cent accurate – it is

more a guide than anything else.

Now when new work comes in from

another department, you cost that work. You

explain you have started tracking effort for

senior management. You give them the

‘price’ to the organisation and get them to

sign off against it.

This will give them pause for thought. If

they know senior management are going to

see the effort, they will feel the need to

justify it. They will think about the cost of

Paul is a digital consultant, author and speaker

who helps organisations such as the BBC adapt

to the new digital world (boagworld.com ) P R O F I L E

The root of the problem is that in-houseweb teams are under-valued. By

attributing a monetary value to yourwork, you change the way people see you


Wor l d ags net



7/21/2019 net 2015-05


VOICESEssay

28

may 2015W o r l d M a g s . n e t W o r l d M a g s . n e t

Wor l d ags net



7/21/2019 net 2015-05


may 2015

29

Essay

With computers, anything is possible – right? Wrong. If you’re notconsidering practical constraints and creating technical prototypes,

you’re living in a fantasy land, says Vasilis van Gemert

THE REALITY BEHIND

MAGIC DESIGN

A while ago I spoke to a designer who used to design

television sets for Philips in the 1980s. He and his

team would decide what new televisions would look like.

In turn, I told him about how we would work together at

the design agency I used to work for. I told him about the

waterfall process, where an interaction designer would

first create a fully functional wireframe. After the client

had signed it off, a visual designer would add colour (and

rounded corners) in a photo editing program. And when

those pictures were signed off, a developer would turn

them into something that worked in a browser.

My stories amazed him. To him, this sounded like the

assembly line in a factory, where the different parts are

turned into working televisions – after all the designing

had been done. Waterfall, he explained, is not meant to

be a design process. It’s how production works.

DISCIPLINES AND DESIGNS

A few weeks ago a colleague of mine sent me a paper

about prototyping (netm.ag/prototypes-266). It was written

in 1997, but its content is still relevant. In it, the authors

explain three different types of prototyping, and outline

when you should use them in the design process. These

three prototypes are created by the different disciplines

within a product design team.

Early on in the process, an interaction designer could

decide to create a prototype to see how a product will be

used. In this mockup, the focus is not on how things

look. Similarly, the technical aspects might be less

relevant. Such a prototype could look like a wireframe,

or a sketch.

At the same time, the visual designer might want to

explore what the new product would look like. In such

an early prototype, the user experience might not be

the most important thing and technical feasibility

might not yet be of concern. This designer just wants to

explore the look and feel of things. Such a prototype

could be created with photo editing software, but it could

also be a simple ‘pizza box’ (as is shown in a wonderful

example in the paper).

The third person in the team is the engineer. Early in

the design process the engineer would start prototyping

to see how far they can go. Is the technology advanced

enough to create the product we want to create? And if

it is, can it be done within our budget?

These three disciplines should be part of every web

design team. Right now – at least here in the Netherlands

– in most design teams you will find an interaction

designer and a visual designer, but the engineers are

missing. This is what surprised my TV-designer friend

the most. How can you design something if you don’t

understand the technology behind it?

THE WEB’S CATHODE RAY TUBE

In the 1980s, people wanted to design flatscreen TVs. It

would have been easy to create a slick-looking proto-

type with styrofoam, and everybody who saw it would

have been delighted. But back in the 80s, TVs were built

PROCESS


Wor l d ags net



7/21/2019 net 2015-05


VOICESEssay

30 may 2015

around a ‘cathode ray tube’, and these tubes are enor-

mous. No matter how hard you tried, it was impossible

to create a flat TV.

On the web, we used to have our very own ‘cathode ray

tube’ – we were technically held back by a single factor.

We had plenty of good ideas for fabulous looking websites,

but we had IE6 ... and IE7 and IE8. The weird thing is that,

contrary to the situation in TV design, this obvious tech-

nical constraint was never really one of the starting

considerations for our designs. And the reason is because

there was a fatal flaw in our understanding of computers

and the web: we believed that ‘everything is possible

with computers’.

As a result, we fantasised our ideal websites instead of

actually designing them: “I want a fullscreen high-res

video playing on the background, with text laid out in

equal height boxes with rounded corners, shadows and

gradients on top of them. And I want this to perform

perfectly for everybody. Always.”

This is called magic design. You dream up an idea and

wish the computer will do its magic. A technical proto-

type might show you very early on in the design process

that a site like this cannot be built without a team of very

skilled developers and an enormous budget. There’s

nothing ‘magic’ about it.

On top of thinking that everything can be done with

computers, there’s a whole world of designers out there

who really believe that ‘understanding the constraints

of a medium will limit their creativity’. This might be an

understandable attitude for an artist, but it’s not a useful

attitude when you’re trying to create a product.

So instead of ‘letting reality limit their creativity’ ,

these designers decided to let a tool dictate them the

possibilities. Understanding what’s possible in the

current landscape of browsers and devices is thought tobe limiting, but understanding what’s possible with

Photoshop is not. We’re not in the photo-editing business

– we design products that people have to work with.

PROMISING THE MOON

This is a naïve attitude. But there’s another reason why

we prefer beautiful, magic mockups without technical

validation. Art directors and sales teams love them,

because polished Photoshop mockups are easy to sell.

It’s easy to satisfy potential clients when you promise

them the moon. If things turn out to be impossible, that’s

a concern for later.

Sales teams are not in the business of creating a good

product, they’re in the business of making money. I used

to work at an agency where every design was sold like

this. And every website we ever created there turned out

to be a disappointment. The client was not happy because

the promised moon turned out to be impossible to reach.

The designers were unhappy because not much was left

of their beautiful fantasies. The developers were frus-

trated because they had to create something that’s

impossible to create. And the visitors were unhappy

because they had to use a crappy product.

LIMITED FANTASY

Without technical validation, we’re not in the design

business – we’re practicing sorcery. Which is fine in

works of fiction, but fails in reality. We’re creating fan-

tasies, and the problem with fantasies is that they’re

limited by our own imagination. If we refuse to under-

stand the constraints of our medium, we also refuse to

understand its possibilities. We’re limiting our creativ-

ity to the things we can make up.

In 2010 this might have been more interesting than

reality, but today reality turns out to be more interesting.

Technical prototypes can help you to validate your ideas,

and they can also help you to come up with new ideas.

Nowadays, we have things like WebRTC and the File API.

We can use visual filters in CSS. And did you realise that

the combination of Canvas and video can turn into some

incredibly spectacular results?

You might already know all this stuff, but without

a prototype you don’t know if these new features can be

used in production today. You’ll need a technical proto-

type, and you’ll want it early on in your design process.So as well as an interaction designer and a visual

designer, you’ll need a good engineer in your design

team. Because web design is product design, and not a

magical assembly line.

Vasilis (vasilis.nl ) teaches the next generation

of digital designers about web design and

development at the University of Applied

Science in Amsterdam

P R O F I L E

Without technical validation, we’re not in the designbusiness, we’re practicing sorcery. We’re creating fantasies.If we refuse to understand the constraints of our medium,

we also refuse to understand its possibilities


Wor l d ags net



7/21/2019 net 2015-05



Wor l d ags net



7/21/2019 net 2015-05


32

may 2015

VOICESInterview

GREG STOREYWords by Julia Sagar Photography by Chloe Wright

After a decade as a studio owner,the talented web designer has onceagain found himself pursuing anew path. Greg Storey discussesthe business of starting again


Wor l d ags net



7/21/2019 net 2015-05


may 2015

33

Interview

INF

job: Web design

w: airbagindustries.c

t: @Brilliantcra


Wor l d ags net



7/21/2019 net 2015-05


In 1994 Greg Storey took a break from

college. Frankly, his advertising and

history classes were getting old. In contrast,

his part-time job as a barista was exploding:

he’d been rapidly promoted to store

manager, persuaded the company to let

him redesign its retail signage, and was

starting to attract attention at a district level.

Curious about the prospects, Storey took a

break right before graduation and embarked

on a new career path.

As it happens, three years later – now

managing a small chain of coffee shops –

Storey was approached by the university’s

vice chancellor with a job offer (and an in-

vitation to finish school) that would set the

wheels in motion for a flourishing career in

web design. But two things transpire from

this tale: Storey is a natural business leader;

and he’s pretty good at starting new things.

DEAD GRAPES

Storey mixes design credentials with

business savvy. A proud connoisseur of

“dead cow and dead grapes” , he’s earned a

reputation over the last 13 years for being a

blunt voice in the world of web design. His

2004 blog post ‘A Better Tighty Whitey’ (netm.

ag/better-266) , in which he took it upon

himself to quickly mock-up “a better intel-

ligence brief” for President Bush, famously

made it onto the front page of The Wall Street

ournal, and you’ll find him weighing in on

all manner of industry discussions.

For many, Storey is best known as Airbag,

the name under which he’s blogged

prolifically since 2002 and also the name of

his successful web design studio, launched

in 2005. Storey had been working for a large

nonprofit in Southern California (“I was hired

as a designer and about six months later

was given the department to run”) when he

decided to try and hire Zeldman’s Happy Cog

agency for a project. “Shortly after the work

was done, I got this weird invitation from

Jeffrey: ‘I’m coming to California. I’d love to

grab lunch with you. Don’t tell your boss, ”

he recalls. “I called in sick and it was during

lunch that Jeffrey said, essentially: ‘You’re

too good for where you’re working now. I

think you should go freelance’.”

However, as the single source of income

while his wife finished studying full-time,

the financial risk was initially too great, and

it took Storey another 12 months to launch


Wor l d ags net



7/21/2019 net 2015-05


Interview

may 2015

35

Airbag Industries. “There’s never going to

be a perfect time,” he says. “Typically people

are scared because they don’t know if the

work’s going to be there. You may have one

job lined up but there’s no guarantee of the

next. But that never goes away – it doesn’t

matter if you’re one person or 500. It’s just

part of being your own boss.”

Airbag Industries thrived, and in 2009

Zeldman and Happy Cog CEO Greg Hoy

approached Storey with a new proposition.

“We found ourselves competing more and

more for the same projects,” Storey explains.

“And when our two teams got together we

were best friends. In some cases I’d say

family-level friendships.

So it got to the point that

we said, ‘Let’s just

stop. Let’s become one

company so we don’t

have to worry about these

other things.’”

HAPPY ENDING

Fast-forward six years to

today, and Storey is once

again in the position of pursuing a new

path. Last year, following an “apocalyptic”

18 months for web design in the US, he called

time on his Happy Cog family, with the part-

nership dissolving amicably in November.

However, he’s in high spirits when we catch

up with him, fresh from the split, to find out

what happened and how it feels to be start-

ing again.

“In the beginning it was very scary because

it wasn’t a planned departure. It was in the

moment, ” Storey admits. “But when I talk

to fellow business owners – guys I’ve known

for years – everyone of them has said this is

amazing. You know, the ability to start over.

And for a business owner you do think: if

I were to start from scratch tomorrow, what

would I do differently? It’s exciting.”

He continues: “Part of the reason I left

was we found ourselves in a place where, to

be frank, we were talking about letting

people go – in some situations where the

person was the breadwinner for their family.

I don’t have any children so I felt that it would

be easier for me to go. And I knew that my

leaving would make enough of a financial

impact that we could save

those jobs, and that those

people would help give

Happy Cog the best foot,

moving forward.”

There was a creative

drive behind his decision,

too. Hoy mentions in his

own blog post detailing

events (netm.ag/hoy-266)

that, for Storey, “the op-

portunity to simply focus on design ... won”and Storey agrees that a return to the

creative side of things was appealing.

As partner, president and, later, chief mar-

keting officer at Happy Cog, Storey had been

largely focusing on operations and business

development. “In succeeding to grow Happy

Cog I’d kind of worked myself out of design,”

he says. “We had a number of really

talented designers and design leaders in the

company so I was in a position where I could

stay and take over the reins of the creative

work, but we’d have had to find something

else to do for one or two of those people that

I cared for a lot, or they’d have to leave. And

I didn’t feel good about that. So I figured, I’ll

work something out and hopefully it’ll be a

lot more creative than before.”

TOGETHER/APARTExactly what that ‘something’ might be,

Storey isn’t yet sure. Immediately after

leaving Happy Cog, he had to finish closing

down the Austin office. In-between cancel-

ling utilities, selling computers and getting

rid of furniture, there wasn’t much time to

contemplate the future.

“I’ve been trying to use this event to

process what I want to do next, and I’m still

trying to figure that out,” he says. “I know I

probably could work as a designer but I don’t

want to lose everything I’ve learned in terms

of building and leading teams, and dealingwith clients. It’s not clear if there’s going to

be a way where I can just transition from

being a studio owner into an employee where

I can put all that into play.”

One option is to start up a studio again,

maybe under the Airbag name. If he did take

this option, there are a number of things

Storey would do differently this time around.

“Unless I could find some kind of really cool

town where rent is super-cheap and an

“People are scaredthe work’s not

going to be there ...but that’s just part

of being yourown boss”


Wor l d ags net



7/21/2019 net 2015-05


VOICESInterview

36

may 2015

amazing group of talent happens to live in

the same spot, then I’d go back to being

remote,” he says. “I’d focus on bringing teams

together, individuals together, at the neces-

sary times. There are so many tools now

that make it possible. I wouldn’t try to put a

shop together.”

A DIFFICULT MARKET

Storey has his eye on the market. Last year,

he says, was a disaster for client services in

the US. Storey runs Owner Camp (ownercamp.

com), a four-day retreat for digital studio

owners, and he’s heard first-hand just how

tough the past 12 months have been. “In 2014

I had the opportunity to talk to about 100

owners, and out of that group maybe 5 per

cent weren’t affected by 2014 whatsoever.

Freelancers were going a month in-between

gigs, or longer, and you had other shops that

were in the unfortunate position of having

to lay people off.”

So what went wrong? According to Storey,

there were a number of factors at play – onebeing poor weather. Storey suggests that

the significant drop in US GDP in the fourth

quarter of 2013 was due to people having to

take multiple snow days. These people

weren’t going out to spend money, which

meant manufacturers weren’t selling things.

“All these things tipped into a very huge

hit on the economy and consumer confi-

dence, and that definitely played a factor in

what happened with the web industry, ”

he says. “Fortunately things are definitely

showing signs of turning around.”

Industry stats, however, tell a more wor-

rying story. “The number of web design

studios or businesses was 122,000 in 2014,

but it’s growing faster than the revenue, ”

Storey warns. “By the time 2018 hits, the

amount of revenue will have grown around

40 per cent, combined, and the number of

studios will have grown by

80 per cent.”

According to Storey,

93 per cent of those

studios are one- to 10-

person shops. “What I’m

getting at, ” he explains,

“is you have these very

large companies and I’m

not sure they’re aware of

what the growth is within

this vertical. I don’t know if they see the

potential threat for a four-person company

to come in and rob a half-a-million dollar

project away from them.” [Read more of

Storey’s thoughts on this at netm.ag/future-266.]

HIGH ALERT

The answer, he suggests, is to develop a

niche and specialise. Aside from that, there

are a few bits of business advice Storey has

gathered over the years: “Even when times

are good, you should be on high alert, ”he

advises. “I’m not saying that because of

anything that happened at Happy Cog – this

is from being pragmatic. You cannot look at

a full docket of work and think you’re good.

You’ve always got to be closing business and

forging those relationships.”

“For a business to really succeed, the

more risk you take, the more reward is po-

tentially there. And having done this for 10

years I can tell you that the reward is worth

the risk. Even though there are times when

you’re not sleeping,

don’t want to come into

work, when you just

want the whole thing to

go down in flames so you

can start over again,

there are an awful lot

of times where it’s very

rewarding.”

Looking ahead, the

prospect of starting a

new chapter doesn’t appear to faze Storey

in the slightest. After all, he’s the master

of new beginnings. And anyway, he says,

starting afresh is the easy part.“Maintaining, managing, growing – that’s

the hard part. And you have to maintain your

own interest and passion too: hopefully it’ll

still burn as bright as it did on day one. That

to me is the toughest part, ”he reflects.

“But what I have learned, from very early on,

is if there’s something that I want to happen

and no one else is stepping forward, then

screw it. I’m not going to wait for someone

else to do it.”

“You have tomaintain your ownpassion: hopefully

it’ll still burn asbright as it didon day one”


Wor l d ags net



7/21/2019 net 2015-05



Wor l d ags net



7/21/2019 net 2015-05


VOICESBig question

38

may 2015

GORDON WOOD

Partner, Domani

domanistudios.com

About 90 per cent of ouragency’s revenue comes from

individual projects. Structuring eachproject’s contract with an emphasison up-front billing is critical, but justas important is encouraging clientadherence to payment terms byusing key project milestones anddeliverables as points of leverage.We’ve found that it’s always moreeffective to remind clients ofoverdue invoices when a project isactive, as opposed to after a site haslaunched. Implementing a systemthat can accomplish this begins withgood planning during the contractdevelopment phase, followed upby the finance team’s activeengagement with project managersthroughout the project’s lifecycle.

Tight-fisted clients, unexpected expenses, complex taxes ... managing yourmoney can be a minefield. Seven web pros share their tips for handling cashflow

HOW DO YOUMANAGE YOUR CASHFLOW?

BUSINESS

JEANETTE CLEMENT

Head of digital,

Clement Graphics

clementgraphics.com

My advice would be to make full use of

online banking functionalities. For instance,

you can set up payment transfers to pay bills

on the very last day they are due. Your suppliers

will be happy and you will have maximised the

funds in your account for as long as possible.

However, be sure to check transfer times

between different banks.

BEN COLEMAN

Design director, fffunction

fffunction.co

We split project fees in half

and insist on the first payment

being made before we start a

project. We have 14-day payment

terms on all other invoices, which

helps with cashflow – although

there’s always a chance that things

will go awry! We also set aside 35

per cent of every invoice payment

to cover our VAT and Corporation

Tax. Anything left over at the end

of the year is a bonus.


Wor l d ags net



7/21/2019 net 2015-05


may 2015

39

RESOURCES

JASON WARNES

Managing director, TH_NK

think.eu

Whilst short payment terms are ideal,they are rare and longer terms can be

mitigated by clients agreeing to a higherfrequency of invoicing. Planning andcontrolling variable freelance and contractcosts allow us to flex with demand,turning the dial up and down without

committing to an increased cost base.However smart you are with cashflow,it all means nothing if, as a business,you’re not focused on growth anddelivering a healthy margin.

DAN ED WARDSCreative director, No Divide

nodivide.us

We vary the payment terms depending

on the size of the project. If a project is

estimated to take less than three months then

a 50-50 agreement will be in place, but any longer

and we apply a payment schedule that spans over

the project duration. For example, 25 per cent

up-front, and the remaining 75 per cent split over

the course of the project. These payments are

based on dates set out before the start, not on

deliverables. We also have agreements in place

– for both ourselves and the client – as to what

happens if the project overruns.

NICKY THOMPSONInterface developer

symphonicknot.com

For my business, I use YNAB (youneedabudget.com/business ) – budgeting

software that lets you mark money into ‘buckets’ for whatever you need it

for. That might be a new laptop, books, conferences or holiday pay. For me, the

huge benefit is in saving for yearly expenses like taxes, liability insurance and

organisation membership. It’s very reassuring to know bills won’t surprise me,

and this means I can focus on finding and doing good work. Another tip is to dip

in and out of subscription services like Office and BrowserStack, so you only pay

for what you need. I use Bitbucket (bitbucket.org ) for source control as well as

GitHub, as private repos are free.

GOOD INTENTIONS

Kristina Halvorson didn’t become a

leading voice on content strategy without

learning a few valuable lessons first-hand. In

this post (netm.ag/halvorson-266 ), she shares

her experiences of launching startups, from

racking up thousands of dollars’ worth of

debt to laying off 75 per cent of her staff.

GET TO WORK

Helmed by Jason Blumer and Dan Mall,

The Businessology Show is a podcast that

gives hints and tips on the business of design

and the design of business (businessology.biz ).

It’s also worth checking out Unfinished

Business (unfinished.bz ), in which Andrew

Clarke and his guests offer advice.

COUGH UP

Finding it hard to get your clients to pay

you on time? Freelancer Nicole Martinez

feels your pain. Here, the New York-based

designer doles out some advice on how to deal

with different types of tricky clients, including

‘the one who doesn’t pay’ and ‘the design

savant’ (netm.ag/martinez-266 ).

MATT GR IFF IN

Founder, Bearded

bearded.com

To make cashflow morepredictable, we price and bill

based on weekly sprints. We havea weekly cost per person, and weknow our weekly expenses for thecompany. We have a spreadsheetthat charts out how many projectswe can expect each month withdifferent variables (like hiring anextra person), and what kind ofprofit or loss that equates to. Thishas been invaluable in helping usmake decisions around things likehiring and taking on new projects.


Wor l d ags net



7/21/2019 net 2015-05


40

may 2015

VOICESQ&A

net: Let’s start with the obvious one – why do

we need another browser?

AM: Not everyone needs a new browser, but lots of

people out there want more control of their browsing

experience. Those people are our audience. Although

you could say the same about almost anything;

why do we need so many different car brands? They

all take you from A to B. It’s a matter of taste and

preference, and how you want the ride to be.

net: What’s behind the name?

AM: Antonio Vivaldi, the composer. He’s represented

through our little red character inside the browser

(netm.ag/vivaldi-266). And of course we wanted a

name that is short, international and easy to spell.

net: Is there a core philosophy Vivaldi is following,

or a particular problem you’re looking to solve?

AM: We are making a browser for our friends, for

all those people who want more from their browser.

We would like to equip people who want full control

over their browsing experience. We’re not just talking

about visual aspects such as tab placement, but

features like mouse gestures, keyboard shortcuts

and private data control, many of which are present

in their infant stage in our Technical Preview.

net: How will the experience differ from those

we’re used to?

AM: What I think is great about Vivaldi is the way

you can shape your own experience. You never need

to settle for some preset default selected for you

– there will always be the choice to do things your

own way. Our job is to make sure you can tailor the

experience to your own personal needs, which is

something you don’t see too often in software these

days – everyone else is simplifying everything.

Also, nowadays user data synchronisation and other

conveniences are taken for granted, but usually

at the price of being tied to a single platform or

provider. That won’t be the case here.

net: Will Vivaldi be available across different

platforms, or are you targeting one sector?

AM: From day one of the Tech Preview we have been

on Windows, Mac and Linux, which I think is great.

That’s something we managed to do quite easily

because of the way we built the browser – using web

technology. Down the line, we also plan to have an

Android version. The priority now is to get a stable,

feature-complete desktop browser ready for release.

net: Under the hood, are you making your

own engine or using existing software?

AM: We build on top of Chromium, mostly

using JavaScript. We also rely on Facebook’s

React framework, Node.js, Browserify and

a long list of NPM modules.

net: Can we expect anything special in your UI?

AM: Creating a solid and coherent UI with such a

flexible product is a really fun challenge. We’re trying

to make it feel natural and familiar, but at the same

time we want to push boundaries and delight users.

Already we’re quite different to the other browsers

on the market with our adaptive UI, which colours

the whole browser based on the site you visit. This

will be taken further in future updates, where users

will be able to completely customise their own UI.

As Vivaldi is being built with web technology, it’s

very easy for us to experiment with new directions

and concepts, and implement things much faster thanyou could do with traditional software development.

So I can guarantee you’ll see new ways of solving

established UI patterns as we progress.

net: When can we expect an official launch?

AM: I can’t give you an exact date, but I can

tell you it’ll be sooner rather than later. We’re

working really hard to get all the features in,

while at the same time listening to our users

and shaping the product.

We get the low-down on Vivaldi, the newbrowser that promises an adaptable UI

INFO

Job: Designer, Vivaldi

w: atle.co

t: @atlemo

ATLE MO Q&A


Wor l d ags net



7/21/2019 net 2015-05


may 2015 41

Opinion

BUSINESS

P R O F I L E

Stop wasting energy resenting clients and putyourself in their shoes, says Viviana Doctorovich

They ask for too much. They don’t

respect the value of our time, our

knowledge and experience. They make

ridiculous demands. They just don’t listen.

They’re our clients and moaning about

them is the web designer’s favourite sport.

If you think I’m exaggerating, go to Twitter

and search for hashtags like #badclient,

#stupidclient and #horribleclient, and see

what comes up. The web is full of beauti-fully crafted articles, websites, even

memorabilia dedicated to expressing the web

design community’s disdain for its clients.

The main idea seems to be that we, the

designers, are a force for design good and our

clients are what stand between us and getting

some good work done. If they didn’t exist,

the web would be a better place.

The thing is, we can kick and scream as

much as we like but our clients aren’t going

away any time soon. Internal or external,

there is always going to be a client involved

in your projects and moaning about them

might be cathartic, but it’s unlikely to make

things better for any of the parties involved.

Maybe it’s time to change tack.

RADICAL ACCEPTANCE

I recently came across the simple yet

powerful concept of radical acceptance. Themain idea behind it is that we should totally

accept what we cannot or don’t want to

change, and focus on changing the things

we can and want to change.

How does this apply to our struggle with

our clients? It means we stop wasting energy

on fighting their existence and behaviour,

and totally accept that they’re not going to

disappear and that we cannot change them.

Once we have accepted this, we are then free

to focus our efforts on changing the one thing

that is in our control: our own behaviour.

How do we know how to change our

behaviour? A good starting point is using

our empathic skills. We have all been

‘clients’ at some point of our lives. Do you

remember how it felt like to rely on someone

else’s expertise? Maybe you had to use the

services of a repairman, a plumber, an

architect or a doctor.

Use your imagination to go back to those

moments in your life when you were a client

and try to remember all the details. What

was good and bad about the experience?

Can you think of anything that would have

made the experience of being a client better

for you? Excellent, I now challenge you to do

those things for your clients.

WATCH AND LEARN

Have you ever feel disrespected as a client?

Focus on being respectful. Respect is some-

thing earned and not given. To earn some-

one’s respect, we need to start by respecting

them and respecting ourselves. It’s about

knowing where our and other people’s

boundaries are, and ensuring they’re not

crossed. If we want our clients to respect our

boundaries, we must start by respecting

theirs and making it clear to them where our

own limits lie.

Or maybe you felt you were not being

listened to? Become a great listener. It’s

amazing how much more receptive clients

can be to what we have to say if we truly listen

to them first. And you’ll be surprised at how

much you can learn from them.

In his ‘Five secrets from 86 notebooks’

talk (netm.ag/bierut-266), Michael Bierut

says the reason he became a designer is

that he wanted to help people to solve

problems, and that he sees himself as a bit

of ‘doctor’. Bierut believes if he listens to his

‘patients’ really hard, they will actually give

him the solution to their problem them-selves. The first of his talk’s secrets is “listen

first, then design”.

It’s simple really. Treat your clients as you

want to be treated. You might be surprised

at the results.

Viviana (@vivdoc) is a senior user experience

designer at Firefly (fireflylearning.com ) and has

been working in digital for 10 years, with clients

of all shapes and sizes

LEARN TO LOVE

YOUR CLIENTS


Wor l d ags net



7/21/2019 net 2015-05


NEVER MISS AN ISSUE!

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

Download net’s interactive iPad edition, or read a print replica on your iPhone or iPod Touch

GOT AN APPLE DEVICE?

#264 MAR 2015We present the techniquesyou need to build your bestever site. Plus, a look at thetop 20 emerging design trends

#263 FEB 2015Discover the design tools setto revolutionise your workflow

this year, plus we look at howto boost site speed

#265 APRIL 2015Val Head shares her secrets for

amazing interface animations,and we reveal how to switchfrom CSS to Sass in WordPress

SAVE UP TO

45%

GO DIGITAL

FROM

£19.99Based on a 6-month subscription


Wor l d ags net



7/21/2019 net 2015-05


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

#261 DEC 2014Get the low-down on the top

JavaScript libraries. Plus, findout how to build a modularCMS in WordPress

#259 OCT 2014Find out how to build nativeapps with Steroids, andexplore the exciting newfeatures in WordPress 4.0

#258 SEPT 2014We share the SEO tips that willpropel your sites to the top of

Google, and show you how tomock-up a site with Sketch 3

#257 SUMMER 2014Want to join the Sassrevolution? We show you

how to make the most ofthis popular preprocessor

#256 AUG 2014We reveal 12 mind-blowingHTML5 hacks, and walk

through how to create code-free designs using Macaw

#260 NOV 2014Explore the advancedtechniques that will help youbuild responsive sites thatwork seamlessly on any device

#255 JULY 2014Find out how to take the painout of frontend development

with our handy Web DesignToolkit feature

#262 JAN 2015We reveal everything youneed to know to build yourfirst mobile app, and uncoverthe power of SVGs


Wor l d ags net



7/21/2019 net 2015-05


GALLERYInspirational sites

44

may 2015

ETQ-AMSTERDAM.COMBuild in Amsterdam buildinamsterdam.com

Anyone can throw together a good splash

page. Big image, clean text – done. As an online

retailer, ETQ truly sets itself apart. When the

collection page animates into view, the product and

site DNA is wound so tight it’s hard to imagine how

one would design the ETQ experience any other way.

“The concept we created is based on minimalism,

because that is what ETQ stands for as a brand,”

explains Daan Klaver, creative director at Build in

Amsterdam – the agency behind the design. “The

animations, transitions and subtle hovers give the

design more depth and make the experience richer.”

By stressing an austere, type- and image-

led aesthetic, this brand DNA holds together

exceptionally well at any viewport size. The site’s

strong use of Avenir Next and almost completely

colourless palette is surprisingly well suited to

ETQ’s product line.

On the type selection, Klaver explains, “We chose

the Avenir family because it is a timeless but still

modern font if you use it in the right way. We use

it in capitals and with big letter spacing to give the

typography on the site a little more character.”

The end result shines with an effortless cool.

Sensational design and superb development w: artequalswork.com

t: @nathan_ford

NATHAN FORD

Nathan is a product manager

at Monotype, where he’s

focused on making tools to

help designers express their

ideas better on the web

CSS3, WEB FONTS, JAVASCRIPT, RWD


Wor l d ags net




7/21/2019 net 2015-05


may 2015

45

Inspirational sites

HARDGRAFT.COMHard Graft hardgraft.com

In most ecommerce experiences, search is king. Hard

Graft, though, has mastered the art of the browse. As

James Teal, co-founder and creative director of the London-

based luxury outfitter explains: “The lack of a search bar

makes the experience much more visual and encourages the

user to explore; perhaps discovering items that they may not

have been looking for but have become drawn to.” Serving up

a cascade of attractive products doesn’t hurt, either.

Proudly pushing its products to the fore, there is no

mistaking what Hard Graft is all about. The neutral colours,

minimal typography and sparse copy give plenty of space

over to rich product shots that fully profit from every

pixel of detail.

“We made sure our product images are as good as they

can possibly be, and while the typography has evolved it

has always been secondary to the images,” Teal explains.

A quick look through the Hard Graft Pinterest account

shows that as its product line and overall brand continues

to grow, so does its fan base. This momentum is no doubt

thanks to a smart, simple site that showcases great

workmanship and values leisurely discovery over the

quick buy.

CSS3, WEB FONTS, JAVASCRIPT, GEOLOCATION

“The sitedoes agreat job ofpresentingthe casualluxurylifestyle.It’s a lot likebrowsingthe shelvesof a store”

SEAH CHICKERING-

BURCHESKY


Wor l d ags net




7/21/2019 net 2015-05



46

may 2015

S I T E O F T H E

M O N T H

THEDISSOLVE.COMThe Dissolve thedissolve.com

Those savvy readers already clued in to

the brilliance of movie site The Dissolve’s

content should go back and study its expert

graphic touches. Screengrabs fail to do justice to

the tactical employment of GIFs, scroll effects and

fades that gel into a notion of golden-age cinema,

refreshed for the web.

“Details are the perfect place to allow the

unique character of a design to reveal itself,

without getting in the way of the content,”

explains Joy Burke, senior interactive designer in

The Dissolve’s in-house design team. “We look

for ways to tie in the over-arching theme of the

film industry without being too literal about it.

It’s like whispering ‘film’, rather than shouting it.”

As a film resource, it ’s naturally awash with

powerful imagery, but The Dissolve’s insightful

stories and reviews are also refined by superb

typography. A thorough application of the

Harriet and Tablet Gothic families compliment

each other and the content well. Burke explains

that the team looked for a serif and sans-serif

from “foundries we love, admire and respect”,

as well as a robust selection of weights to

ensure “the flexibility we’d need to make

[the type] work for numerous purposes”.

CSS3, WEB FONTS, ANIMATION, JAVASCRIPT

“The colours,type and largephotos play onthe spirit ofthe 20s whiletackling thechallenges of themodern web”

RYAN RUSHING


Wor l d ags net




7/21/2019 net 2015-05


may 2015

47

Inspirational sites

The Public Domain Review (PDR)

is probably the most intriguing

site on the internet. It offers “a vast

commons of [historic] material”, free

for everyone to enjoy. At first blush,

the site’s design might not seem that

exciting, but just like its content there

is a rich, subtle wisdom at work.

The type and layout immediately

bring to mind newspapers: the kind that

actually printed news on paper. It’s an

anachronism that could seem amateur

if it didn’t work so well for this content.

The emphasis on text allows the stories

to easily captivate readers, and the

oddball imagery – a PDR speciality –

stands defiantly strange against a flow

of black text on a white background.

“It was very important to have no

clutter,” editor-in-chief Adam Green

explains, “giving primary focus to the

content, rather than constantly trying

to tempt you off to other pages.”

The use of Times, here, proves

inspired. “I did waver at first, knowing

how [Times] is generally received by

the design community,” Green admits,

“but at the end of the day it’s a good

solid font.” It is consistently given the

size and weight it needs to work, and a

switch to Georgia for body text softens

the experience for extended reading.

CSS3, JAVASCRIPT, RWD

PUBLICDOMAINREVIEW.ORGThe Public Domain Review publicdomainreview.org


Wor l d ags net




7/21/2019 net 2015-05



48

may 2015

HTLHOTELS.COMHTL htlhotels.com

Stockholm-based HTL offers a modern, boutique feel both in its website

and its hotels. Rarely will you find an online experience so tightly synced

with its real-life service counterpart. From the coral and blue colour palette to

the heavy Gotham typography, when you check in to an HTL location,

everything will feel comfortably familiar.

As Gül Heper, commercial manager for the hotel chain, describes:

“HTL has a timeless, Nordic, feminine and sporty expression. Both the

interior and the digital platform should be calm and peaceful, and by adding

elements of modern and technical materials or solutions we create an

active energy. Kind of like a cashmere sweater with an edge.”

Clean, simple messaging is further clarified by plenty of white space

and a striking confidence in a workhorse of a typeface: Gotham. “We

wanted to maintain a no-nonsense, modern profile and Gotham works

well in contrast to our handmade scripts,” Heper explains.

Provocative border touches and spots of handwritten type help enhance

the experience. There is nothing too fancy, here. For HTL, design choices

favour quality and utility over ostentation, both online and on-site.

CSS3, WEB FONTS, RWD


Wor l d ags net




7/21/2019 net 2015-05


may 2015

49

Inspirational sites

CIRCLESCONFERENCE.COMFocus Lab focuslabllc.com

Designing for designers is a tough task. A site for

this two-day event in Texas should not only deliver

the requisite information, but it really should ignite the

creative fires of potential attendees. By engaging

viewers with hand-painted type, organic layouts and a

liberal use of rich photography, the new site for Circles

Conference should certainly succeed in firing people up.

“Our concept was to symbolise the creatives coming

to the conference as ‘paint on the blank canvas’. [The

hand-lettering] adds a human aspect to the site,”

explains Sam Stratton, a brand and UI designer who

worked with site designer Charlie Waite at Focus Lab.

The site takes full license of the Freight typeface

family, pushing the expressiveness of type on every

page with a variety of weights and variants. Note

the hanging descending capitals and that exquisite

ampersand. A clever use of greyscale imagery mitigates

the typically jarring nature of photography gathered

from various sources, and the notes of pastel colour

accentuate the interactions throughout.

As Stratton describes, “Using the high-contrast serif

felt right and it differentiated Circles from other brands

like it. The black and white colour choice also paired

well with the editorial vibe we were going for.”

“The art direction issuperb, and this is oneof the best examplesof a responsive gridI’ve seen”

CSS3, WEB FONTS, RWD, JAVASCRIPT, ANIMATION


Wor l d ags net




7/21/2019 net 2015-05



50

may 2015

JOVACONSTRUCTION.COMPhoenix phoenix-m.com

All design disciplines feed off of each other, and the

stunning renovation work of JOVA Construction was

an obvious muse for its equally stunning website, created

by Montreal-based agency Phoenix. On scroll-through

the site seems to construct itself, as architectural lines

and fluid animations glide through a showcase of smart

interior design. The site is not all presentation, though:

a ‘Tips and Tricks’ section provides a curated resource

of expertise and sources of inspiration.

The blend of hard structural lines, large imagery

and calming earth tones evoke a modern feel, but

the typography truly gives the site its unique character

– the type feels clean, current and sturdy. Message and

product are seamlessly delivered.

Perhaps most impressive is the fact that there does

not seem to be a bad view on the entire site. Every section

of every page is impeccable, and while it doesn’t scale

down to mobile sizes, it expands very nicely across large

screens. Note the navigation here, too: the initial screen

maps the site well, and keeps the experience consistent

by employing one pattern for all sizes.

CSS3, WEB FONTS, JAVASCRIPT, ANIMATION


Wor l d ags net




7/21/2019 net 2015-05



Wor l d ags net



7/21/2019 net 2015-05


Sublime design& creative advice

HOW WE BUILT 64We discover how RetroFuzz put together an

engaging, cross-platform experience for jeans

brand Wrangler’s first ever ecommerce site

PROFILE 58thoughtbot is all about sharing. We caught up

with some of the makers and thinkers at the

international agency to find out more

FOCUS ON 56Conversion is key to many a successful site.

Gene Crawford looks at how to craft a sign-up

process that hooks people in

DESIGN

CHALLENGEFERRY SITES


BRIEF

We’d like you to design a site for a ferry service.Maybe it’s a functional chain ferry, or you could gofor something that aims to draw tourists to the area.Or you could go all out and make a site for a hugeservice, transporting holidaymakers to sunnier shores.

BENJY STANTON

Web designer Benjy works with holidaycompanies and web development agenciesw: benjystanton.co.uk t: @benjystanton

P R O F I L E S

CRAIG COLES

Craig is a creative frontend developerworking at True Digital in Bristolw: craigcoles.co.uk t: @craigrcoles

IRENE DEMETRI

Irene is a freelance digital designer workingon web, mobile and branding projectsw: youandigraphics.com t: @youandigraphics

This month...


Wor l d ags net



7/21/2019 net 2015-05


MY MONTH

What have you been

doing this month?

Working on some client

work plus a personal

project aimed at web

designers that I am

very excited about.

Which sites have you

visited for inspiration?

thebestdesigns.com

and mobilemozaic.com.

What have you

been watching?

Crisis , Scandal

and Suits .

What have you

been listening to?

Florence and

the Machine.

IRENE DEMETRI

SOLAR FERRIESThis fresh take on a ferry site combines an unexpected colour palette, intuitive search and prominent offers

Solar Ferries is a large, well-known ferry

service operating around the Greek

islands. My primary goal was to create a site

that enables users to easily search and book

journeys through a desktop or mobile, without

any obstructions. They will be able to find the

best available routes at the best prices in the

time frame they have selected. Users can also

book a complete holiday package, check out

the latest Solar Ferries offers, view routes

and browse through photos of the ferries.

The design is purposefully clean and

simple, with short loading times so any busy

holidaymaker can intuitively find their way

through and get the information they need.

I’ve opted for a more modern approach to the

ferry industry, with a youthful yet professional

colour scheme. Many of the homepage elements

are SVGs, making scaling and screen adaptation

for this responsive site easy and pixel-perfect.

CLOSE UP

(1) The search function is placed in a primary position,

in an easy-to-spot, bold colour. This will enable users to

quickly search for ferry routes they are interested in by

adding some basic journey details. (2) A large cinematic

GIF of the sea in the background adds subtle movement

to enhance users’ first impressions. (3) Social media icons,

through which users can interact with the company, are

in a discreet yet still prominent position. (4) Everyone is

interested in what offers are available. This promotional

area enables users to check the top five offers, plus more

when they click on the ‘plus’ icon. (5) On mobile screens,

the homepage’s elements will stack on top of one another.

At the top, users can focus on the search panel, or they

can click the hamburger menu to access more options.

1

3

4

2

5

may 2015

53

Design challenge


Wor l d ags net




7/21/2019 net 2015-05


54

may 2015

SHOWCASEDesign challenge

CRAIG COLES

HOLM FERRYFunctionality is at the forefront of this site, which offers GPS tracking data to keep travellers up to date

Holm Ferry is a small, independent ferry

service that offers trips to points across

the Bristol Channel. The concept behind the site

is to aid feedback with live weather updates and

current journey progression information, as

well as enabling users to book a trip.

The site presents users with the latest weather

information, which would be collated through

a third-party service to ensure up-to-date

forecasts. Location data of the ferry would be

attained using a GPS tracker. The coordinates

of the vessel would be sent to the site, and a

marker plotted onto a custom Google Map.

The responsive aspect of the site would be

focused around content breakpoints instead

of device breakpoints, as this would ensure

the same experience across all devices.

My overall goal was to design a site that is

lightweight regardless of device, provides users

with a simple booking experience, and presents

them with the information they want to see.

CLOSE UP

(1) A responsive, mobile-first approach creates a better

experience across multiple devices. Users can access

important information easily whilst on the go. (2) The

boat’s coordinates are relayed to the site, enabling users

to track its progress. (3) The location of the boat at all

times is clearly displayed on a Google Map that has

been custom styled to fit the look and feel of the brand.

(4) A simple, refined form allows users to book their next

trip easily without any confusion. (5) Up-to-date weather

information for a selected trip date enables users to

plan their next journey accordingly. This information will

also highlight whether there are any weather issues that

might affect the user’s journey. (6) On the mobile site, the

main view shows the ferry’s current position, the latest

weather information and also the expected arrival time at

its next destination.

MY MONTH

What have you been

doing this month?

Working on the

development of a pet

healthcare website and

redesigning Cahootify.



siteinspire.com and

patterntap.com are

regular ports of

call for inspiration

(nautical pun!).

What have you

been watching?I have started the epic

voyage of Breaking Bad

again. Whiplash and

Foxcatcher are my most

recently watched films.

What have you

been listening to?

Blink-182, Jimmy

Eat World, Muse

and Journey.

1 2

5

6

3

4


Wor l d ags net




7/21/2019 net 2015-05


BENJY STANTON

SWANSEA TO CORKThis pared-back site cuts out the marketing spiel and aims to take all the hassle out of booking a trip

4

5

I decided to design a new site for the

(currently closed) Swansea to Cork ferry

service. In my experience, holiday and travel

websites are tricky to use – especially on small

touchscreen devices. Many of them encourage

users to be very specific in their search before

they can access any results. To make matters

worse, these sites often try to achieve two things

at once (sell you the holiday experience and sell

you a ticket), which can get in the way when

you’re trying to search, book and pay.

The real challenge was to create a booking

form that worked mobile-first, so I did some

research into Luke Wroblewski’s mobile

interface patterns (lukew.com). I wanted the

form to be pre-filled with sensible defaults

– perhaps it could default to the most popular

ticket, showing tickets far enough in advance

to offer early-bird prices. I also wanted to make

it tap friendly. The option to fine-tune things

would be available, but not a necessity.

CLOSE UP

(1) I wanted the homepage to be as simple as possible,

allowing users to get straight on with the task of booking.

Of course, I know the (imaginary) marketing department

will want at least one attention-grabbing headline. The

simplicity of the design will help with the performance.

(2) The off-canvas navigation menu will slide out, offering

links to the main sections of the website, grouped by

user needs (instead of being an exhaustive list of every

page). (3) The search page will be pre-filled with sensible

defaults, which should minimise the effort on the user’s

part. (4) I’ve avoided using select menus, so the search

should be customisable within a few taps, allowing the

user to see available crossings quickly. They can fine-tune

things later. (5) Animating the icons with SVG and CSS

could help enhance the experience – for example, the

caravan could hitch on to the car if selected. (6) The copy

is in plain English, with a polite but concise tone of voice.

I wanted it to feel as human as possible, but without

wasting any words on twee messaging.

MY MONTH

What have you been

doing this month?

I’ve just finished a Tour

de France infographic.

Oh, and my tax return

… joy!



The new sites from

the Guardian and

Five Simple Steps.

What have youbeen watching?

Disney’s The Three

Caballeros on repeat,

with my little girls.

What have you

been listening to?

Man it Feels Like Space

Again by Pond, and

Ghost Culture by

Ghost Culture.

1

3

2

6

may 2015

55

Design challenge


Wor l d ags net




7/21/2019 net 2015-05


SHOWCASEFocus on

SIGN-UP BASICS

FOCUS ON

For many sites, conversion is key. Gene Crawford exploressome of the secrets behind a great sign-up page

If you are running a business that

relies on people signing up, signing

in or otherwise completing a form of some

kind on your website, you’ll know that

getting them through that process is

paramount. There are a number of things

you can do to make sure your sign-up

process is firing on all cylinders.

The big concept here is ‘conversions’ –

by which we mean ‘moving people through

our sign-up process’. Anything you do

design-wise should be engineered towards

improving this. Try to keep the user’s state

of mind at the forefront of what you do.

You have roughly eight to 10 seconds (if

that) to gain someone’s trust and secure

the all-important conversion.

I like to ask questions like: Does the

page describe what the person is signing

up for? Does the page show how the sign-up

works? Does it demonstrate the end result?

Does it explain why?

You see, when we as designers are

working, we typically think of the end

users as being like us: astute, optimistic

and familiar with (or at least interested in)

what we are doing. In short we assume they

have some level of desire to get past that

sign-up process.

This is often not the case. People don’t

really care – and furthermore, they have

little time or patience to put up with thingsthat don’t really hit them over the head.

So make sure at the point of sign-up or

purchase that your site has what it takes to

convince someone to care and complete.

(1) Design for the

Social Web by Joshua

Porter (netm.ag/

porter-266 ) is a

great resource for

providing insights

into the ‘how’ and

‘why’ of people using

your application.

(2) The homepage

for Slack (slack.com )

– the app for team

communication –

fires on all cylinders

when it comes

to getting you

to sign up. Even

the form looks

quick and easy.

(3) The homepage

for blogging and

social sharing

platform Tumblr

boasts all the

essentials of a

clear and quick

sign-up process.

You just know that

all you have to do

is complete that

easy form and you’ll

be in and blogging

within seconds ...

Gene’s mission is to work tirelessly

to provide inspiration and insight

for developers. His recent projects

include unmatchedstyle.com

P R O F I L E

2

1

3


Wor l d ags net



7/21/2019 net 2015-05


#1


Wor l d ags net



7/21/2019 net 2015-05


INFO

Location: US, Sweden, UK

Established: 2003 as apartnership, reset and incorporated

n late 2005

Expertise: Software product

design, development, growth

Clients: edX, Tile, LevelUp, Martial

Codex, Ello, Merck, Yammer


Wor l d ags net



7/21/2019 net 2015-05


may 2015

59

PROFILE

Design and development ‘bots’at this international agency

explain why it’s goodto share

THOUGHTBOTthoughtbot.com

For thoughtbot – a 100-strong international

team of ‘makers and thinkers’ – there’s

no such thing as over-sharing. Creatives at the

studio are massive proponents of open source,

run an online learning service and frequently

invite clients to join them at a neighbouring

desk. Alongside this, the company promotes

‘disciplined experimentation’, setting aside time

each week for employees to get creative. Here,

COO Matt Jankowski, Philadelphia managing

director Kyle Fiedler and CEO Chad Pytel explain

the motives behind the thoughtbot ethos.

net: Why don’t you introduce thoughtbot?

MJ: We’re a team of designers and developers who

build web and mobile applications. We have strong

opinions on what our clients are building and how

it should be built – and we look for projects where

those opinions will be an asset. We’re active

contributors to and maintainers of open source

projects. We run an online learning service for

developers called Upcase (upcase.com). We’ve

operated a series of SaaS apps over the years.

CP: Although we now have almost 100 people,

that’s not the way I think about the company.

We are small, local teams of just designers and

developers working directly with clients to build

great products their customers love.

net: What inspired the name?

CP: The original founding team would add ‘Bot’

to the end of words in the systems we would

build. The system that managed orders was called

‘OrderBot’, the one that managed customers was

called ‘CustomerBot’. When it was time to come up

with a name, we naturally suggested ‘thoughtbot’.

KF: But why all lowercase?

CP: Because we thought that was cool!


Wor l d ags net



7/21/2019 net 2015-05


60 may 2015

SHOWCASE

of how successful it was and is at addressing

a real need. It helps that it is about opening

up knowledge to the entire world, too.

A more recent example is a project for

a nonprofit trying to help elementary-to-

high school students with character skills

that will line them up to be successful later

in life. The organisation has idealistic goals,

and we were able to build a product that

made the process smoother for teachers

than the PDF system they were using.

net: What’s the secret of a fruitful

and smooth client relationship?

MJ: Communication, transparency

and honesty.

KF: Being as open as possible. We enjoy

having clients stay in our office with us

edX This site offers a way for users to watch and participate in online classes from top universities

Meet the speakers (Middle image, L-R) Philadelphia managing director Kyle Fiedler, CEO Chad Pytel and COO Matt Jankowski

net: You have offices across the US. How

did you choose where to set up shop?

MJ: We quickly grew a 20-person team in

Boston and kept it that size for years. We

were fearful about destroying our culture

by putting 100 people in the same office.

Fortunately, there are a ton of cities out

there! We hope to have a collection of

strong local cultures of 10-30 people each,

which share some common principles, but

mostly serve local clients.

net: Tell us about the work and projects

that make you most proud ...

KF: The work that I am most proud of is

the work that engages our clients’ users

the most. For me, online learning site edX

(edx.org) is one that jumps to mind because

during the creative process, because it

helps with communication on both sides.

The best clients I’ve worked with have

at some point sat at the desk next to

me. Otherwise it’s a lot of conversation

in Trello, Basecamp and Slack. All the

problems I’ve had with clients have been

from bad communication, and I’ve never

had a problem with over-communication.

net: On your ‘Our Team’ page, you say

you work on the principle of ‘disciplined

experimentation’. What does that mean?

MJ: We like the phrase ‘strong opinions,

weakly held’. We love to find the best way

to do something, and then rip it apart and

replace its flaws with something better.

We have an ‘experiments’ tracker, which

is living documentation around new things

that we’re trying.

KF: Part of that is our investment time.

We have Fridays to do what we think will

best benefit ourselves and the company.

That is where a lot of the time we need to

spend on open source, writing blog posts,

building new SaaS products, or learning

new technology, comes from. This is time

we can choose to spend doing what we are

most excited about. We are held responsible

for that time, and it’s a big factor in our

quarterly reviews.

net: You’ve produced a lot of very popular

open source products, including Bourbon

and Neat. Why open source your work?

KF: Chad and Jon [Yurek, co-founder] have

cultivated a culture of sharing because they

have done that since thoughtbot started.

We tend to see duplication in a lot of the

code we write, and we extract open source


Wor l d ags net



7/21/2019 net 2015-05


may 2015 61

to help solve those problems with

redundancy. Open sourcing work is also

generally good for marketing. It shows

the quality and care we put into our projects

and products. For Bourbon (bourbon.io) and

Neat (neat.bourbon.io) in particular, I know

we benefitted from contributions from

other designers and frontend developers.

net: What have you learned through

making and sharing so widely?

CP: That you don’t need to worry about

keeping things secret or about your

competition. Sharing the way we work

boosts our reputation within the

community, which then leads to more

success for us. Great chefs don’t worry

about publishing cookbooks, because

they know the recipe alone is not what

makes them successful.

MJ: The satisfaction I get when some

random person emails us to tell us about

how using one of our open source projects,

or reading something on our blog, helped

them get something done is incredible. It

feels great to help create those outcomes

for people, without ever meeting them or

even knowing who they are or what it

is they’re doing.

net: What’s your ‘Playbook’?

KF: Our Playbook serves as documentation

on the way that we work. It was designed

to help new employees get up to speed on

our process and our way of thinking. It

also helps us onboard clients to our process,

and gets them in the right mindset to start

working with us.

CP: While it is documentation of the way

that we currently work, we didn’t create

it so these processes would be set in stone.

We write the Playbook so that we can be

intentional about the change we make.

net: What’s the secret of a great,

and career-launching portfolio?

KF: I don’t think there is necessarily a

secret. Have good work and communicate

clearly who you are. I tell designers to only

put in the work they think is great and

don’t show anything less than that – even

if it’s just one piece. It’s better to leave

me wanting more than thinking badly

about a project. Those poor ones are the

Martial Codex thoughtbot worked on the design for this service, which preserves the traditional master-apprentice relationship by offering a channel through which to teach martial arts over the web

OFFICE CULTURE

What’s on your desk?

I personally don’t like to keep much onmy desk. Right now it’s just my

computer, monitor, dot grid notebook

and keyboard, mouse and teacup.

What do you haveon the walls?

In Philly we just moved into a brand

new office, so nothing! We’re working

on that though. Most other offices have

a very large Ralph [thoughtbot’s robot

mascot] on the wall.

What will you do for lunch?

It depends on the day.

Sometimes we head outside around the

office, sometimes I bring something in.

Today I have leftovers.

What hours do you work?

I generally get in to the office

around 8.30–8.45am and head

out at about 4.45–5pm.

What else do you doin the office?

In Philly, ping-pong! A lot of our staff

try to get out of the office to take

breaks. You’ll see people going on coffee

walks, cookie walks and the like

throughout the afternoon.

How often do you allhang out?

Most days I have to head home for the

wife and kids. In other offices people

hang out after work or have a beer or

two when they are done working.

Describe your working culturein three words

Let’s go with: diligent, witty, thoughtful.

KYLE FIEDLER

Managing director


Wor l d ags net



7/21/2019 net 2015-05


62 may 2015

SHOWCASE

projects that always stick out and leave

a lasting impression.

net: Looking back across 2014, how has

the company’s focus changed?

CP: Working with so many new startups,

we see lots of industry trends. The big one

in 2014 was Edtech. In terms of thoughtbot,

we had opened eight new offices in the

prior two years and so we used 2014 as

a chance to take a breath and make sure

we wanted to – and were ready to – grow

even further.

net: What do you think is in store for

yourselves and the web industry in 2015?

MJ: I’m hoping that 2015 will be the year

I finally stop getting Evites for ‘webinars’.

CP: In 2015 we’ll see a general industry

trend around wearable devices and mobile,

but I expect that will continue for some

time. From a more user-centric approach,

I see it as being more about engagement

with the software in our lives and theimpact it has on us – for example,

how to deal with notification overload.

KF: I’m really interested to see how we

get all of the technology to work well with

each other. How do I have an amazing

experience on a desktop and then jump

to my phone to have a tailored experience

there? I think there is still some continuity

in the experiences that we as an industry

are still trying to smooth out.

net: You opened shop in 2003. If you could

travel back in time, what advice would you

give to the original ‘thoughtbots’?

CP: I would recommend against starting

a company with five equal partners that

‘does everything’. Once some of the early

partners left, and we started to say ‘no’ to

more things and be more intentional about

the work we did and the ways we worked,

we became much more successful and

happier in our work.

MJ: I would encourage them to not get

hung up on what seem like hard decisions

or stressful conversations to have. Be polite

for sure, but also be direct and aggressive

about crushing organisational cruft and

relationship debt both inside and outside

the company. Every time we’ve had to do

something challenging and worried about

it beforehand, the immediate aftermath is

just this tremendous sense of relief, like

the burden of the task is lifted and we’re

allowed to move on now.

net: Finally, who is Ralph P. Bot?

MJ: You know how in Fight Club there’s that

scene where they all keep saying ‘His name

is Robert Paulson’, and how at protests a

bunch of people will all wear those Guy

Fawkes masks? I’m pretty sure Ralph P.

Bot isn’t really like those things.

TIMELINE

A look at thoughbot’s journey,from launch to today

SUMMER 2003

The company starts operating as a tech

support and Java development group

AUTUMN 2005

Tech support is dropped as a service,

and the focus switches to web apps

built using Ruby on Rails

SUMMER 2007

thoughtbot hires its first full-time

designer and stops working as a

subcontractor to other groups

AUTUMN 2007

Launches its first SaaS product, an

error catcher service called Hoptoad

SUMMER 2009

Adds mobile (iOS, Android)

development services

SUMMER 2012

Expands to San Francisco and Stockholm

AUTUMN 2013

Expands to Denver and New York City.

Headcount crosses 50

WINTER 2013

Launches online workshops

service Upcase

SUMMER 2014 2013

Expands to Austin, Philadelphia,

and Raleigh. Total headcount

exceeds 100

AUTUMN 2014 2013

Launches new SaaS products

FormKeep and Hound

Tile thoughtbot worked on visual and iOS design, user testing and frontend development for Tile

Next month: Independent designer

and art director Derek Boateng


Wor l d ags net



7/21/2019 net 2015-05


They’re back! Join us for the 16th annual net awards.Spare a few moments to nominate your favourites today!

thenetawards.com

The nominations phase closes 19 April 2015

Game Changer of the Year

Best New Web Technology

Open Source Project of the Year

App of the Year

Best Online Portfolio

Side Project of the Year

Best Collaborative Project

Redesign of the Year

Podcast of the Year

Conference Talk of the Year

Grassroots Event of the Year

Emerging Talent of the Year

Young Developer of the Year

Young Designer of the Year

Developer of the Year

Designer of the Year

Outstanding Contribution

Team of the Year

New Agency of the Year

Agency of the Year

NOMINATIONS ARE NOW OPEN

“Anet award is the best award you can winin our industry. That’s because it comesfrom your peers. Thanks tonet magazinefor running it all these years.”Chris Coyier, Outstanding Contribution and Podcast of the Year 2014


Wor l d ags net




7/21/2019 net 2015-05


SHOWCASEHow we built

64

may 2015

HowRetroFuzz used compelling imagery and slick user journeysto bring this iconic jeans brand into the ecommerce arena

WRANGLER

HOW WE BUILT

(1) The main feature area uses large, engaging

photography to promote the latest collect ions and

specific products. (2) A USP bar underneath the

main menu showcases key incentives to persuade

users to buy through the off icial Wrangler site.

(3) Quick-buy functionality is layered over editorial

imagery, allowing the user to quickly and easily

enter the purchase funnel. (4) Various product shots

are key in highlighting the detail and quality of the

product. (5) Buying options, including available

sizes and lengths, are presented clearly to shoppers

to make it simple for them to add their preferred

product to the cart. (6) A fully responsive, modular

layout design ensures the site remains visually

consistent across all devices. (7) Features such as

the fit guide were developed to create an immersive,

interactive experience, which was also used on

third party websites and in Wrangler stores.

BRIEF

Jeans brand Wrangler taskedRetroFuzz with creating anengaging, multilingual, cross-platform experience for its firstever ecommerce site. The sitealso needed to reflect the brand’sheritage and show its commitmentto innovation.

1

4

6

3

CLOSE UP

2 5

7


Wor l d ags net




7/21/2019 net 2015-05


How we built

may 2015

65

MATT

SHILLIDAY

Senior designer at RetroFuzz

since 2010, Matt was

responsible for all UI across

the Wrangler project.

w: retrofuzz.com

t: @MattShilliday

MATT

KENDALL

Matt founded RetroFuzz in

2008 to create work for the

music and fashion industries.

He is now creative director

w: retrofuzz.com

t: @matthewkendall

As one of the world’s leading denim

brands, Wrangler needed a website

that reflected its heritage, style and

commitment to innovation. It was also

looking to expand its online offering

to enable it to target consumers around

the globe and sell directly to customers.

Here, the creatives at Manchester-based

agency RetroFuzz explain how they went

about building Wrangler’s first ever

ecommerce site: eu.wrangler.com.

net: How did the project come about?

MK: Wrangler approached us in 2012

to work on some new digital campaigns

after they’d noticed our work with Lee

jeans. In 2013 the brand knew they needed

a new website that was strongly focused

on educating target consumers in key

countries about the new innovations

they were making.

MS: Our first non-transactional version

of the site was designed and developed

in a little under six weeks. This began

Wrangler’s evolution towards its first

dedicated ecommerce platform.

net: What was the client’s brief?

MK: Following the successes of our first

two seasons of eu.wrangler.com, the call

came to make the site fully transactional,

so we set about creating a site that not

only adhered to ecommerce best practices,

but also reflected the brand’s personality

in a creative way.

AJ: With the growing use of mobile

and tablets, we needed to ensure the site

was fully responsive, as well as being

multilingual across nine countries.

net: What were your main goals when

you started out, and how did they evolve?

MK: We wanted to show people the

thought and attention to detail that goes

into designing every pair of Wrangler

jeans. This is a company that’s very

forward-thinking.

MS: The brand has great campaign

imagery so we wanted to inspire the user

by leading with large images that reflected

the Wrangler lifestyle and heritage.

Another key element was to educate

the user on the benefits of the innovative

smart fabrics available, such as water-

resistant denim.

AJ: Of course, we needed to ensure the

designs actually converted browsers into

buyers. Trying to balance all three goals

was a constant challenge.

net: What initial research did you carry

out, and what did you discover?

MK: The brand had a wealth of in-depth

consumer insight that we were able to use

to help inform our approach.

AJ: Real-world user research plays a large

part in all of our projects, and this was

no different. To supplement the existing

research, we carried out remote user

testing through UserTesting.com to gain

insights into what was working well on

some best-in-class ecommerce sites – not

just direct competitors but those with

interesting new takes on ecommerce,

such as Nike and Indochino.

MS: During our design sprints, we created

rapid prototypes that were then guerrilla

tested with passers-by in our local

shopping centre.

TIMELINE

A look at the key dates in theWrangler site project

JUNE 2013

First brief for Wrangler.com:

Wrangler settles on its new direction;

RetroFuzz receives its first

ecommerce-style site brief

1 AUGUST 2013

Fall/Winter 2013 (FW13) site launches:

After an intense six-week project,

the new, responsive site launches,

showcasing the brand’s full offeringfor the first time

2 AUGUST 2013

Ecommerce evolution: Discussions

immediately turn to setting the

site up to go transactional for FW14

DECEMBER 2013

FW14 project starts: With the

fulfilment partner appointed, RetroFuzz

starts work on concept documents,

wireframes and designs

MAY 2014

Frontend prototypes delivered: The team

hands over frontend prototypes

to ensure all responsive behaviour is

communicated clearly

AUGUST 2014

Site launches: The ecommerce

site goes live

DECEMBER 2014

Q1 results revealed: The firsttrading results come in, revealing the

conversion rates and identifying any

required optimisations

AMANDA

JOHNSON

Senior UX designer Amanda

makes design decisions backed

by rationale, metrics and

passion. She joined the team

at the start of this project

w: retrofuzz.com


Wor l d ags net




7/21/2019 net 2015-05


5

SHOWCASEHow we built

66

may 2015

1

2

4

3

EVOLUTION

A look at the moodboards, wireframes andresearch that fed into the final design

(1) It was important to retain Wrangler’s history for innovation,and its strong brand personality. (2) After researching ecommerce

best practices and user testing some of the leading ecommerce

sites, we set about creating wireframes. (3) Once we had a few

directions we were happy with, we tested prototypes with the

general public in a local shopping centre. This gave us some great

insights and informed future decisions. (4) Areas were highlighted

to indicate placement for either product- or lifestyle-led content,

which helped define the visual layout and hierarchy. (5) The final

product was rolled out, working fluidly across all devices.


Wor l d ags net




7/21/2019 net 2015-05


may 2015 67

net: How did you come up with the

design concept and visual language?

MS: In a lot of cases – and especially with

clothing – persuading a user to part with

money online is much harder than it

would be in a high street store. Having

great, detailed photography, and lots of

purchase. As a result, photography played

a large part in the visual language here.

A well-designed and easy to use site will

aid the buying experience, so we aimed

for a design that was clean and focused.

AJ: We wanted to include any familiar

ecommerce UI patterns, so the purchasing

process was as frictionless as possible.

MK: Our experiences from the two

previous seasons allowed us to drill

down into Google Analytics to see what

and the page visits up, we could be

correct for the audience.

net: What is the key to driving sales

and revenue from a website?

MS: All pages should be designed with

place a consumer visits might be a product

page. As content marketing becomes

integrate this as seamlessly as possible.

A good story attached to a product will

always help engage the user and give

depth and meaning to a product.

AJ: Language is key – keep it personal

and friendly, yet functional and

informative. This visit may be the

only touchpoint for a brand. You want

users to come away from the purchase

feeling excited.

MK: Understanding that an ecommerce

site is a living, breathing project. It’s

watching the pennies drop in – there

is always scope for improvement,

optimisation and new features. Going

live is just the start!

net: What technologies and tools did

you use to build the site?

AJ: Axure for wireframing. And pens,

paper and Post-it notes …

MS: Photoshop for design. And pencils.

MK: We also used static HTML for the

frontend prototypes.

net: What was the biggest challenge you

faced, and how did you overcome it?

MK: Time and location. This was a

relatively quick project, with stakeholders

in the UK, Germany, Switzerland and

Belgium, so good communication

was key. The most important tool overall

was a regular, set-agenda conference

call for all parties each week, to ensure

everything was aligned.

MS: Our great relationship with Wrangler

meant they were welcoming of quick

design sprints and early feedback phases.

This really allowed us to iterate quickly,

taking all feedback into account.

net: Finally, what’s the dress code like

at RetroFuzz?

MK: Denim, double denim and sometimes

even triple denim.

Next month: A behind-the-scenes

look at NASA’s GeneLab website

On the go The platform needed to work seamlessly across a range of different devices

Lifestyle focus The site includes bold imagery to help capture the Wrangler brand lifestyle


Wor l d ags net



7/21/2019 net 2015-05


AUTHOR

COLE HENLEY

Cole is technical director at design

agency Mud. He juggles his time

between ExpressionEngine, frontend

code and his two children

cole007.net

ILLUSTRATION

TOBIAS HALL

Tobias is an illustrator,

designer, mural artist and

hand-letterer extraordinaire

working out of London

tobias-hall.co.uk


Wor l d ags net



7/21/2019 net 2015-05


may 2015

69

Cover feature

Cole Henley looks at what we can do to turn our passionfor the web into a sustainable, profitable career

you have capacity to complete can be one of

the biggest barriers to being profitable.

So the first thing we need to know is how

much time we have available. My grandmother

always said there were 365 usable days in the

year. However, in reality we only have a fraction

of that available to work. Once we consider

weekends (104 days), then factor in 10 per cent

of the remaining time spent on management

and sales (26 days), 10 per cent spent learning

new skills and keeping up to date with tools and

techniques (26 days), 10 per cent spent on time

off (26 days) and 5 per cent on sickness and things

you cannot plan for (13 days), then we are left with

170 days – less than half of the year.

This means that if you considered your daily

rate based on what you want to earn, divided by

365 days, you need to double your rates from the

outset. And that’s without even factoring in quiet

or idle periods.

A further factor to consider is how much you

want to work. Many people choose to go freelance

or take on their own business because they

want a healthier work-life balance. For some

that means flexible working hours and time

off. However, this does require you to be realistic

and maximise the profitability and productivity

of the time you do spend working. For those of

us who primarily work on a project or client basis,

this hinges on accurately estimating and controlling

the work that you do.

VALUING YOUR TIME

Rachel Andrew at Perch (grabaperch.com)

has written about the problems in accurately

estimating time. “It comes down to discipline.

Being disciplined in approach doesn’t seem to be

any of us get into the business of

making websites through a hobby

or personal interest. Lots of us

love what we do and are in the

rare situation of being able to make a living doing

something we enjoy. Which makes it all the more

harder to be objective about making money.

We often find it hard to talk about the financial

side of our work. That is why I started the Freelance

Rates survey in 2011 (netm.ag/2011-266). When I

started working freelance I had no idea what was an

acceptable rate to charge. I knew what I used to earn

as an employee and how much I needed to survive,

but not what I wanted – or even could – charge. It is

a conversation few of us are happy to have in public,

but one that is absolutely essential to our success in,

and our enjoyment of, what we do.

WHAT WE SELL

To better gauge what to charge we first need

to have a clear understanding of what it is that

we sell. Although most of us think we are selling

skills or services, whether you are a developer or

designer, PHP or Ruby coder, content strategist or

server manager, freelancer or agency employee,

in all probability you’re actually selling two things:

your time and your expertise.

Knowing we are selling time helps us take control

of what we are charging. It helps us realise that

time is a finite commodity. Then, once we know

how much time we need, we can figure out how

that can be broken down into billable chunks.

One of the most common mistakes to make is

taking on too much work. Whether that is down

to underestimating how long something will

take, schedules slipping or simply an inability to

turn down a project, taking on more work than

HOW TOGET PAID MORE


Wor l d ags net




7/21/2019 net 2015-05


70

may 2015

FEATURESCover feature

very popular! There is no magic behind learning

how long things take you, and being able to apply

that to future work. You have to start to log the

time you spend, including the time you spend

not getting down to work, to be able to make those

projections,” she explains.

“That process can be quite uncomfortable. If you

log the way you spend your time for a few weeks

you see in black and white how much time is spent

messing about on Facebook, Hacker News, Reddit

or whatever. How often you dart between tasks.

How many days you sit at a computer for four hours

before actually doing any productive work.”

When we are in the business of selling time, the

only way to know how much to charge is to monitor

how long things take. And accurately knowing how

much to charge means having a clear understanding

of how much time is spent on what you do, as well

as how efficiently you use that time.

Andrew feels that breaking your work down

into bite-sized pieces can help make you more

productive with your time: “The Pomodoro

Technique (pomodorotechnique.com) is a great way

to get down to work, but also to log whether your

time estimates at the beginning of the day were

accurate.” At the beginning of the day, break your

task list into 25-minute sprints of work (known as

‘Pomodoros’), and write down how many sprints you

think each task will take. At the end of the day you

can see whether your estimate was accurate. “Do

this for a week or so and you’ll soon see a pattern

of which tasks you tend to estimate incorrectly.

Left Whatever your trade

in web design, chancesare that you are in thebusiness of selling your

time (credit: netm.ag/ clock-266 )Right RescueTime is

a useful tool for keepingtrack of how you useyour time

net money surveyThe results

We had nearly 400 responses to

the net magazine survey exploring

how people work and what they

charge. The majority of respondents

were from the UK and US, and

freelancers dominated. Over

half of respondents considered

themselves to be at a pro level,

with most of the remainder

identifying as intermediate.

Full results at netm.ag/results-266

A company (2 or

more employees)? 20%

Employed? 19%

Freelance? 61%

Are you ...

As a sub-contractor? 9%

Directly with clients? 73%

With other freelancers/agencies? 14%

Other 3%

Do you primarily work …


Wor l d ags net




7/21/2019 net 2015-05


may 2015

71

Cover feature

Q&A: Joel HughesTHE WEB STRATEGIST EXPLAINS WHY WESHOULDN’T BE ASHAMED OF MAKING MONEY

You’ve organised a conference on the business of web design.

What motivated you?

The event (thebusinessofwebdesign.co.uk ) was born out of a

desire to talk about the business side of our industry and to

stop people making the same mistakes I had made. Freelancers

and agencies don't go out of business because they haven't got

their head around the latest SVG techniques – it'll be because

of more basic business failings.

When you were organising your conference, what questions

did you find coming up time and again?

Easy: how much should I charge? Ultimately you have to

make your own mind up here. Smart folk are always testing

their pricing, seeing what their target market can bear and

so on. Remember, if no one ever queries your pricing, you're not

charging enough.

Many people in our industry are self-taught. Does that create

any problems when it comes to running our own businesses?

I think there is a guilt which runs through the industry where

we feel like we are impostors because we learn on the job.

We see that as a weakness when, in reality, it is a massive

skill. And it is the reason people pay us, because we can react

and adapt and solve new problems in a creative manner.

What tips do you have for keeping on top of the business

side of running a web agency?

Don't be ashamed of making money or afraid to talk about

money with potential clients. Some people cannot afford

you – fine, let them move on so you can spend your time

and energy with people who can.

Logging your time is the best way to get good

at estimating time,” adds Andrew.

Measuring time is a critical tool to help both

freelancers and agencies get better at gauging

work and ultimately at being more profitable.

TACKLING BILLING

Once you have a clearer idea of how your time is

being spent, you need to work out how best to bill

for that work. Some people bill hourly, others on

a day rate, while others work on a fixed-cost basis.

Rob Harr at Sparkbox (seesparkbox.com) thinks the

best approach is to bill hourly.

“This helps align our goals with our clients’ goals.

In a typical fixed pricing model, the client is pitted

against the agency. The client is trying to get as

much for the fixed price as possible, while the agency

is trying to get the project done as quickly as possible

… fixed-cost projects seem to have the worst

outcomes because they don’t allow for changes.”

Harr say one of the benefits of hourly pricing is

that it makes estimating easier. “Estimates are

hard for two reasons. Clients are always continuing

to define what they need as a project progresses

and those of us writing the estimates (designers

and developers) are always optimistic.”

Pro 59%

Intermediate 36%

Beginner 5%

How would you rate

your level of expertise?

Europe 71%

North America 19%

Oceania 3%

Asia 4%

Africa 1%

South America 1%

Where are you based?

From home 55%

Dedicated office 33%

Coworking space 8%

Coffee shop or similar 1%

Other 2%

Where do you

primarily work?

Knowing how much tocharge means having a clear

understanding of how long isspent on a task, as well as howefficiently you use that time


Wor l d ags net




7/21/2019 net 2015-05


72

may 2015


BILLING PRACTICES

41 per cent of respondents worked on a fixed-

rate basis, whilst of those who billed by time,

the majority did so on an hourly basis. 38 per

cent didn’t tend to use a contract, whilst almost

half used a contract adapted from a template.

Almost a third of respondents didn’t ask for a

deposit up-front but half requested 20 per cent

or more of the project estimate. Only 10 per

cent asked for less than 20 per cent. A third of

responses requested payment for work within

14 days of completion, with 28 per cent within

28 days and 23 per cent within seven days.

No, I don’t 38% Yes, adapted from a template 45% Yes, drafted by lawyer 17%

Do you use contracts?

Like the Pomodoro Technique, hourly billing

helps build flexibility into a project by breaking

down tasks into manageable sprints of work.

“Hourly billing means the scope can adapt to the

needs of the project,” he continues. “Each change

has to be accompanied by client conversations

about impact to the budget. Sometimes this may

mean that things take longer than anticipated,

and sometimes they take less time. This also

allows things to be prioritised as we go.”

INVOICING

Harr talks about the importance of weekly invoices

for keeping both the clients and the creative team

accountable to the spend. This is an idea echoed

by Andrew Clarke in the way his agency, Stuff and

Nonsense (stuffandnonsense.co.uk ), bills for work:

“We both schedule our work and invoice our clients

in one-week increments to make our time and

project management easier, our cashflow better

and our financial risks lower.”

One of the benefits of weekly billing is that

it means regular conversations with the client.

“You have to communicate with your clients

extremely well to make this work,” Harr says.

“Sometimes things will take longer than estimated,

this is fine, but surprises at the end are not.”

Good communication is critical in order to

be profitable. This means being clear from the

off about how you work, and ensuring regular

contact throughout the project. Constant

conversations mean you avoid surprises, help keep

a project moving and minimise slippage. “Not

communicating the budget well with clients is

one of the biggest pitfalls when companies move

to an hourly model,” explains Harr. “We are very

transparent on the hourly spend, and we empower

our clients to make budget decisions. I have seen

many agencies afraid to talk about money. This is

crazy to me. We have to be willing to have healthy

conversations about money with our clients.

“We use Google Sheets spreadsheets all of

the time. I love having the ability to collaborate

with internals and clients in real time. When

approaching a new project, we collaborate with our

prospective client to create an estimate in Google

Docs. This helps potential clients understand from

the start that they will help create and impact the

way we’ll work.”

GETTING PAID

One of the ways of managing how you work with

clients and ensuring you get paid is to have a

contract before starting work. This should outline

your expectations for working together, ownership

of the work and payment for it. In our net magazine

survey, 38 per cent of respondents said they didn’t

normally use contracts.

Contracts help you outline payments on a project,

how much you expect up-front to secure your time,

how payments are to be scheduled, what value is

due on completion and who owns the work until

It is essential that you ensurea steady reserve of cash

through prompt payment ofcompleted work and securingdeposits for work up-front


Wor l d ags net




7/21/2019 net 2015-05


may 2015

73

Cover feature

Fixed rate, by project 41%

Time-based, day rate 17%

Time-based, hour rate 35%

Value-based 3%

Other 4%

No 32%

Yes, 10-20% of total estimate 9%

Yes, 20% or more of total estimate 50%

Yes, fixed amount 8%

Yes, less than 10% of total estimate 1%

Payment within 14 days of completion 33%



Payment later than 28 days after completion 5%

Other 11%

How do you normally bill for work?

Do you usually ask for

a deposit up front?

What payment terms do you

normally use?

final payment is made. Using a contract doesn’t

have to be expensive, and although a contract

drafted by a lawyer will offer better protection,

adapting a templated contract is better than not

using a contract at all. For example, 45 per cent

of survey respondents used a contract adapted

from a template, such as Andrew Clarke’s Contract

Killer (netm.ag/killer-266).

Contracts can be critical for ensuring cashflow

through outlining payment schedules. Whether

you are a freelancer or an agency, it is essential

that you ensure a steady reserve of cash through

prompt payment of completed work and securing

deposits for work up-front. Alarmingly, 32 per cent

of survey respondents did not request a deposit

ahead of starting work on a project, and 33 per

cent of respondents expected payment more than

14 days after completion. Both these factors can

have a massive effect on cashflow.

Cashflow was one of the reasons Andrew

Clarke moved to weekly billing at Stuff and

Nonsense; both for the agency’s sake and for its

clients. “It’s common for clients to make a deposit

payment of between 25 and 33 per cent, and the

balance of a project’s costs on completion. This can

put a strain on the cashflow of small and medium

size businesses,” says Clarke. “Our SME clients

appreciate paying weekly as it puts less strain on

their cashflow than a large payment at the end of

a project. Scheduling and paying weekly gives them

a greater understanding of what we’ll be working

on together and what’s achievable within a week-

Left You don’t needheavies to chase up latepayments. Humour andemotional blackmail can

go a long way (netm.ag/

reminder-266 )!Right If you don’t use a

contract already, AndrewClarke’s Contract Killerprovides a great starting

template


Wor l d ags net




7/21/2019 net 2015-05


74

may 2015


long sprint. Should they choose to change their

mind or change direction, they know that they can

roll those changes into an additional sprint and they

also know the cost of that work in advance.”

Having a clearer idea of cashflow helps with

scheduling work and making sure you don’t take on

too much. However, an important part of securing

and sustaining work is knowing what to charge and

making sure your rate is competitive, whilst being

able to support your lifestyle.

KNOWING WHAT TO CHARGE

A final component of understanding profitability

is knowing what to charge. This breaks down to

understanding what you need to survive (your

outgoings and overheads) as well as the rate you

can command (the market).

Understanding our overheads is important. In the

web industry, many of us can work from any where

with a laptop and a wireless internet connection.

However, this can be dangerous. We need to be

realistic about the outgoings – both professional

and personal – which need to be covered.

It is also critically important to get into the

practice of saving some of what you earn. This

will help keep some money in reserve for quieter

or difficult periods, but also make sure you have

Explore further TIPS Break your work into manageable sprints, for example

25 minutes. This will help you focus and keep track of

how your time is spent

Bill hourly and invoice weekly. This will help both

you and your clients manage cashflow

Be clear up-front. Use a contract and set out key

milestones, expectations and payment terms

RESOURCES RescueTime (netm.ag/rescue-266 ) – RescueTime is a great

tool for monitoring your activity in the background. It gives

a realistic indication of where your time is spent and helps

you understand when you are most productive

Pomodoro (pomodorotechnique.com ) – Pomodoro is a great

technique for breaking your work down into manageable

chunks, helping you to focus on core tasks as well as

schedule in regular breaks

FreeAgent (freeagent.com ) – 50 per cent of respondents

who used accounting software used FreeAgent. An

invaluable tool for keeping track of work, expenses, banking

and invoicing (netm.ag/emails-266 ). If you are in the UK it

will even help you calculate and submit your tax return. For

a comparison of FreeAgent vs Xero, see page 96

An important part of securingand sustaining work is makingsure your rate is competitive,whilst being able to support

your lifestyle

WORKING HOURSIn terms of working practices,

72 per cent worked more than

seven hours a day, but fortunately

only 14 per cent toiled more than

nine hours a day! Similarly, the

majority of respondents worked

five days per week, with 20

per cent working less than that

and 19 per cent working more

than five days per week. Of the

sample, a clear majority worked

from home, with a third working

from a dedicated office and 8 per

cent from a coworking space.

Between 7 and 9 hours a day 58%

Between 9 and 11 hours a day 12%

Less than 7 hours a day 28%

More than 11 hours a day 2%

5 days per week 61%

4 days per week 12%

Less than 4 days per week 8%

More than 5 days per week 19%

How many hours a day

do you normally work?

How many days per week do you

normally work?


Wor l d ags net




7/21/2019 net 2015-05


may 2015

75

Cover feature

enough saved for fulfilling your tax obligations.

On this note, never underestimate the value of

a good accountant. If you value your time they

should be a worthwhile investment.

The other facet of knowing what to charge is

understanding market rates. When I went freelance

in 2011, I didn’t have the slightest clue what day

rate I could command in my new position. I had an

idea of what my earnings had been as an employee,

but nothing apart from anecdotal information

about the rate that somebody with my skills

and experience could charge.

This was one of the motivations behind the

freelance rates tool (ournameismud.co.uk/fraq)

I created off the back of my first survey in 2011.

Taking the data from survey respondents, it was

possible to get a snapshot of how rates varied across

location, skillset and experience. Such resources

and data give us more confidence in what we can

charge for our time - and ultimately what you can

charge boils down to confidence.

It is great to hear from people who felt the survey

gave them the confidence to charge more for their

services, and also those who used it as a resource

they could point their clients to if they were accused

of charging too much. Tools like this help us as an

industry have a more open conversation about what

to charge for what we do.

I’ve created a simple tool based on the responses

from our net magazine survey (netm.ag/survey-266).

Obviously this should be taken with a pinch of salt,

but it should help paint a very broad-brush picture

of what folk are charging across the globe based on

their status, location and expertise.

Left FreeAgent isan excellent resource

for keeping on top of your

business finances

Right The responses from

our survey have been used

to produce a handy tool

for looking at what people

charge across the world

ACCOUNTINGMATTERS42 per cent of

respondents were

self-accounting,

whilst almost

half used a local

accountant. Of those

that used accounting

software, half chose

FreeAgent (netm.ag/

FreeAgent-266 ), 14

per cent used Xero

and 10 per cent went

for QuickBooks.

Billings 2%

Crunch 5%

Xero 14%

Wave 7%

Sage 4%

QuickBooks 10%

FreshBooks 6%

Clear Books 3%

FreeAgent 50%

What accounting software do you use?

No, I self-account 42%

Yes, I use a local accountant 49%

Yes, I use an online service 9%

Do you have/use an accountant?

Whatshould yoube earning?

Find out atnetm.ag/survey-266


Wor l d ags net




7/21/2019 net 2015-05



Wor l d ags net



7/21/2019 net 2015-05


may 2015

77

Secondary feature

Over the last few years the

maker community has grown

exponentially. As such, it’s

a really great time to start

experimenting with electronics.

The more that our shiny gadgets

are locked down and proprietary, the

more we want find out what strange

magic is happening inside. As a direct

response, the open source hardware

community has grown, and new

prototyping platforms are constantly

emerging. It’s never been cheaper or

easier to get hardware for your own

hacking projects.

EXPLORING ELECTRONICS

My journey with electronics started

when I was a kid. My dad would often

bring home electronic components

from work for me to play with. I learned

about breadboards, making simple

circuits and soldering. I still love bright,

confectionary-coloured LEDs. Fast-

forward to a few years ago, when I was

told that you could use an Arduino to

attach large knobs and buttons to your

games and projects.

So I bought one. And it dawned on

me that this wasn’t merely a hardware

interface for my computer, it was an

independent device that could process

AUTHOR

SEB LEE-DELISLE

Award-winning digital

artist and speaker

Seb likes to make

interesting things from

code that encourage

interaction and

playfulness from the

public. Clients include

BBC, Sony, Microsoft

and Google.

seb.ly

As the web community goes giddy over the Internetof Things, laser king Seb Lee-Delisle gives the low-

down on building stuff that talks to the internet

GET STARTEDWITH HARDWARE

logic and run code by itself. In effect,

it was a tiny self-contained computer.

I got hold of an 8x8 LED matrix, made

a simple particle system, and I was

hooked. Over the last few years, I have

been integrating hardware into my

digital art projects more and more.

These electronic devices let you get out

of the computer and into the real world.

If you want to get into hardware

projects, you’re probably a l ittle daunted

by all your options. Two of the biggest

platforms in this arena are the Arduino

and Raspberry Pi. Each has different

strengths and capabilities.

ARDUINO

The Arduino is a prototyping circuit

board comprising a central chip and

several GPIO (General Purpose Input/

Output) pins that you can connect stuff

to. You can program each GPIO to be

either an input (to read data) or an output

(to control things like lights and motors).

But don’t just buy an Arduino –

it’s much better to buy some kind of

starter kit. Look for one with a variety

of components, jumper wires and a

breadboard, along with a good guide book

with exercises to get you started. There

are many kits available, including one

made by Arduino (netm.ag/starter-266).


Wor l d ags net




7/21/2019 net 2015-05


78

may 2015

FEATURESSecondary f eature

CASE STUDY

LASER LIGHT SYNTHS

Laser Light Synths (netm.ag/

laser-266 ) is one of my art

projects, first installed at the

2014 Brighton Digital Festival.

With the help of my engineer

friend Paul Strotten, I hand-

made four touch-sensitive

musical keyboards. They were

especially designed to be easy

to play – anyone playing them

would instantly be a musician.

As members of the public

performed, lasers projected

patterns that climbed up the

wall in front of them, in

response to the sound.

The synths were made

of transparent acrylic and

covered in hundreds of super-

bright LEDs that lit up when

the keys were touched. The

touchable surface was made

using cut-out copper foil

tracks that were connected

to capacitive sensing chips.

Inside was a Teensy 3.1, which

controlled the lights, read the

capacitive sensors and sent

MIDI data out to my

computer, which produced

the sound.

The LEDs I used are these

wonderful little things called

WS2812b – or Neopixels, as

Adafruit calls them (netm.ag/

led-262 ), and you can string

them together and control

them through one data pin.

They have a red, green and

blue LED on board, along with

a tiny little chip that controls

each one.

I spent about a month with

retina burn, but these LEDs

are so bright and colourful

that I can’t help but love

them. However, they do draw

a lot of current, so it was a

challenge to make sure the

power wires were thick

enough to support them.


Wor l d ags net




7/21/2019 net 2015-05


may 2015

79

Secondary feature

Programming the ArduinoThe Arduino comes with its own IDE

and programming language based on C,

but if you’re used to JavaScript it should

look fairly familiar. The main differences

are that it’s strongly typed, so you have

to specify what type of data the variables

and functions use. Working with strings

and text can be a pain too – it’s certainly

more involved than using JavaScript.

Code is compiled inside the IDE and then

programmed directly onto the Arduino’s

chip via a USB cable.

JAVASCRIPT OPTIONS

What? You only want to program in

JavaScript? Call me old-fashioned but

I think that working in multiple different

programming languages is good for

your brain. But I can understand why JS

programmers might be hesitant to invest

time learning a new language just for abit of tinkering.

The good news is you can control an

Arduino entirely in JavaScript with a

library called Johnny-Five (netm.ag/

johnny-266). You access all of the Arduino

inputs and outputs entirely from within

a Node.js app on your computer. There is

a catch – the code runs on your computer

and sends data to and from the Arduino,

so it has to be tethered to your computer

My personal favourite is the Sparkfun

Inventor’s Kit (netm.ag/sparkfun-266),

which comes with a nice case to keep

your projects in while you’re working

on them. It has a great manual with

clear diagrams and 16 example projects

to get you started.

There is an incredible variety of

Arduino code libraries, resources and

add-ons available, including ‘shields’

that sit on top of the board and give

you extra powers, like driving motors,

controlling LED screens, playing music

or sending out MIDI information.

Here are a few of the many Arduino-

compatible boards that I particularly like:

Adafruit’s Trinket (netm.ag/

trinket-266) – This is tiny and cheap,

with five GPIO pins. If you need more

pins and memory, try the Trinket Pro

or the Arduino Nano. Teensy 3.1 (netm.ag/teensy-266) – The

Teensy 3.1 is very fast and powerful,

and still very small. It uses 3.3V instead

of the standard 5V, so sometimes you

need to convert voltages in order to

work with some components. These

are the brains of my Laser Light Synths

(see boxout opposite), and they’re

very good at controlling thousands

of addressable LEDs.

Arduino Mega (netm.ag/mega-266) –

This is much bulkier than the Trinket

and Teensy (although that’s not saying

much), but if you need a lot of pins

and memory, the Arduino Mega is for

you. It has the added benefit of being

a genuine Arduino, so you know your

money is going to support the people

that created the project in the first

place. What’s more, it’s compatible

with most Arduino shields.

BUILD YOUR OWN ARDUINO

The incredible benefit of open sourcehardware is that you can easily move

from a one-off experiment to something

you can bring to production. You can take

the circuit layout of the Arduino, add

your own components and manufacture

your own products. This may not seem

important when you’re first starting out,

but if you get the bug, you’ll be designing

and manufacturing your own printed

circuit boards (PCBs) before you know it.

There is an incrediblevariety of Arduino codelibraries, resourcesand add-ons available,including ‘shields’

Arduino-compatible boards (clockwise from left ) Arduino Mega microcontroller board; Arduino Diecimila – an early Arduino; Teensy 3.1


Wor l d ags net




7/21/2019 net 2015-05


80

may 2015

FEATURESSecondary f eature

to work. However, it’s still a nice easy

way to dip your toe in the water.

There are two emerging platforms

that genuinely run JavaScript on the

microprocessor: Tessel (tessel.io) and

Espruino (espruino.com). They both

have their own lightweight JavaScript

interpreter, and although they don’t

have the availability and ubiquity

of Arduino, I’m confident that the

community will grow quickly.

RASPBERRY PI

The Raspberry Pi (raspberrypi.org) is

a cheap Linux computer that also has

a bank of GPIO pins, making it a great

platform for electronic prototyping.

It has only been around for a few short

years, yet already it has revolutionised

low-cost computing.

A strong and vibrant community of

makers has grown and already there

is a vast range of cases, peripherals

and learning resources available. The

brand new Pi 2 is faster and has more

memory than the previous models, with

backwards compatibility and the same

form factor as the previous B+ model.

Unlike Arduino, the Raspberry Pi can

easily drive HDMI screens and play large

audio files. If you’re already familiar

with Linux and Python or Node, it’ll

RESOURCES

DEVICES

Arduino: arduino.cc

Raspberry Pi: raspberrypi.org

Adafruit Trinket:

netm.ag/trinket-266

Teensy 3.1: netm.ag/teensy-266

Arduino Mega:

netm.ag/mega-266

LinkIt ONE: netm.ag/ONE-266

KITS

Sparkfun Inventors Kit:

netm.ag/sparkfun-266

Instruction manual:

netm.ag/manual-266

Arduino Starter Kit:

netm.ag/starter-266

ST4I

Workshop: st4i.com

Arduino code: netm.ag/code-266

Server code: netm.ag/server-266

be very easy for you to get started.

You don’t even need to attach a keyboard

or screen to the Pi, you can ssh in from

your computer to program it. And of

course the whole thing is connected

to the internet via the ethernet port

or a Wi-Fi USB adaptor.

Just like the Arduino has ‘shields’,

the Pi has ‘hats’ that sit on top of it

and provide special extra powers.

My favourite is Pimoroni’s Unicorn

hat (netm.ag/unicorn-266) – an array

of super-bright LEDs that sits on top

of the Pi. In fact, Pimoroni (pimoroni.

com) is an amazing UK success story

with a wonderful stock of Pi cases

and components.

You can’t have missed the hype about

IoT, or the ‘Internet of Things’. It’s so

ridiculous that I hate even using the

term. The fact that corporations like

Microsoft have a ‘Director of the Internet

of Things’ makes me throw up in my

mouth a little. I prefer using my own

term: Stuff that Talks to the Internet,

(STTTTi or ST4I for short). It’s equally

ridiculous, but at least it’s my ridiculous.

I’ll let you into a little secret about

the IoT: no one has really figured out

what it’s for. Sure we can control our

Lunar trails This interactive installation featured a 3m wide drawing robot with engineering grade servo motors, all powered by an Arduino Mega


Wor l d ags net




7/21/2019 net 2015-05


may 2015

81

Secondary feature

Arduinos with built-in internet

There are Arduino-compatible boards

that are already internet-capable. My

favourite is the Linkit One (netm.ag/ONE-

266), which has a Wi-Fi chip built in.

But that’s not all. It also has Bluetooth

and GSM. Stick a SIM card in it and it’ll

get mobile data straight off that. If that

wasn’t enough, it comes with GPS, and

an audio interface. You could make your

own low-tech smartphone with this

board. I really have no idea why you

would do that, but for some reason the

idea excites me.

The server side

Connecting to a public API is relatively

easy, and if you just want to set up a data

logging device you can use services like

Xively and data.sparkfun.com. If you want

your Arduino device to respond to things

on the internet, the easiest way is to poll

a data API at regular intervals (say every

one to five minutes).

But if you want it to respond

instantly to something, you can set up

a permanent socket connection to the

server. This is a bit trickier, but I’ve been

working on Node.js code to do this. It’s

all open source so you can keep an eye on

my GitHub (netm.ag/ST4Igit-266) to see

how it matures.

With GSM mobile data modules

dramatically dropping in price, it will

only be a couple of years until everything

will have its own internet connection.

The concept of adding Wi-Fi to a gadget

will seem really old fashioned.

I’ve long delighted in attaching

lights, buttons and tactile interfaces

to my projects, and with the growth

of the hackerspace network and

maker community, there are so many

opportunities to learn how to make

stuff. It’s time to take the work we’ve

been doing inside the computer out

into the real world.

thermostats and the colour of our lamp

with our mobile phone, but we’re still

flailing our arms around in the dark

trying to get a grip on how exactly it’s

going to work. We all know it’s going to

be big, we’re just not quite sure what its

killer app will be.

But here’s the thing about technologies

on the verge of finding their use:

they’re really fun to play with. Like

really fun. It’s the perfect time to be

imaginative, creative and just play

with this stuff. That’s why I put together

my ST4I workshop – it’s two days of

experimenting and learning and it

comes with a kit full of stuff including

a Wi-Fi enabled Arduino. Check out

st4i.com if to find out more.

HOW TO TURN AN ARDUINO

INTO AN ST4I DEVICE

A Raspberry Pi is already networked,

but an Arduino needs extra hardware

(and code) in order to connect. I like

the Adafruit CC3000 Wi-Fi shield

– it sits on top of your Arduino and

connects to your Wi-Fi, and there

are lots of code examples to help you

read data from the internet.

Creative components (top row) A selection of components that come with the ST4I kit; (bot tom, L-R) Arduino motor and midi shields; Raspberry Pi; Arduino Mega with CC30 00 Wi-Fi shield

Here’s the thing abouttechnologies on the use: they’re really funto play with


Wor l d ags net




7/21/2019 net 2015-05



Wor l d ags net



7/21/2019 net 2015-05


may 2015

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 When Can I Use web

widget (andismith.github.io/caniuse-

widget ). It explains from which

version of each browser the

features discussed are supported.

9884 104

PROTOTYPE A WEB APP 84

Brandon Arnold on how to mock up a

responsive app using Foundation for Apps

BUILD SITES WITH WEBFLOW 90

Julian Shapiro walks through how to use

Webflow to build a production-ready site

TACKLE CSS 3D 94

Leon de Wit explains how to render

a button in space using CSS 3D

HEAD TO HEAD 97

Matt Hamm and Anna Debenham compare

the merits of Xero and FreeAgent

DESIGN BETTER APP ICONS 98

Michael Flarup shares some tips for

designing memorable, apt app icons

STANDARDS 103

Chaals Nevile considers how we can

make the shift to digital currencies

CREATE DATA VISUALISATIONS104

Peter Cook shows you how to use D3.js

to represent data found in social networks

AUTOMATE DEV TASKS 108

Alex Newman explains how Grunt can take

care of repetitive development tasks

ACCESSIBILITY 114

Cathy O’Connor takes a look at how to

make your ecommerce site accessible

Look out for the video icon

throughout our tutorials. This

issue, four authors have created

exclusive screencasts to

complement their articles and

enhance your learning, including

Michael Flarup’s tutorial on

designing memorable app icons,

and Julian Shapiro’s guide to

building sites with Webflow.


Wor l d ags net



7/21/2019 net 2015-05


PROJECTSRWD

84

may 2015

Over the past several years, the web has

changed. We’re racing away from an advertising

web that discusses things, to a web of doing and

creating things. We’re transitioning to a more

app-centric web. People want to build fullscreen,

immersive experiences in the browser, and

they want these apps to work on any device.

This is why we at ZURB created Foundation for

Apps ( foundation.zurb.com/apps), the first frontend

framework created for developing fully responsive

web apps. Over the course of this tutorial I’ll show

how to use our new grid to create an app layout

that responds for every device. We’ll prototype

Angular routes and use our motion classes to add

slick animations to our views. From there it’s easy

to take this prototype and load in live data.

PLANNING THE APPWe’ll be creating a prototype of a simple news

aggregator app that could eventually pull in articles

from things like Designer News, Hacker News and

Product Hunt. Each source will live in its own view,

but will share a common header.

We’ll start with a simple sketch for a mobile and

desktop view (top right). We can see that on mobile

our app will follow a common theme, with tabs at

the bottom that enable the user to swap between

each news source, a list of the most popular articles,

and some information about that news source in a

side panel. In contrast, on the desktop version this

aggregator will feature the navigation along the left

side, the popular articles along the right, and the

content on the panel in-between the two.

DESIGN A PROTOTYPE FOR

A RESPONSIVE WEB APPBrandon Arnold demonstrates how to mock up a fully responsive

we a layout using ZURB’s Foundation for Apps framework

RWD

ABOUT THE AUTHOR

BRANDON ARNOLD

w: brandon-arnold.com

t: @brandon_arnold

job: Design lead, ZURB

areas of expertise:Product design, responsivedesign, HTML, SCSS

q: what’s the worst holidayyou’ve ever been on?

a: I booked a wine tastingthrough a discount site.We ended up in a mustyworkshop, sipping wineand eating individuallywrapped cheese slices

VIDEO

Brandon Arnold has

created an exclusivescreencast to go with

this tutorial. Watchalong at netm.ag/

foundationvid-266

View sourcefiles here!

All the files you need for

this tutorial can be found at

netm.ag/foundationgit-266


Wor l d ags net



7/21/2019 net 2015-05


may 2015

85

RWD

It would be difficult to accomplish this distinction

between desktop and mobile using a traditional grid

system. However, Foundation for Apps was created

to solve these types of problems easily.

CREATING A NEW PROJECTThe Foundation CLI makes it easy to install new

Foundation for Apps (F4A) projects, and will make

it even simpler to update when patches and upgrades

arrive. You’ll install the CLI once, then you can create

hundreds of new projects with one simple command.

You’ll need to ensure you have Ruby, Node.js and

Git installed on your machine. For information on

installing the CLI, visit netm.ag/install-266.

Once the CLI is installed, creating a new app is as

easy as entering a single command. Let’s call our

app ‘yetinews’.

foundation-apps new yetinews

You’ll be greeted by ZURB’s yeti, who will spin up a

new project for you. This can take anywhere from 30

seconds to a couple of minutes, so sit tight and wait

for the yeti to tell you he’s all finished. Once your

app has been created we’ll cd into that directory:

cd yetiNews

Then we’ll start our app:

foundation-apps watch

This runs our gulp task, creates some routes and

starts up a server on your machine. You can view our

new app by visiting localhost:8080/ .

CODING MOBILE-FIRSTWhen we open our newly created project, we can

see several files and folders in the base directory.

Let’s head straight over the ‘client’ folder and take

a look at what we’ve got there.

If you’re already a Foundation user you’ll see

some familiar things – l ike ‘app.scss’ and ‘app.js’,

where you put all your custom Sass and JavaScript.

There’s the ‘_settings.scss’ where you can change

nearly every style in the framework, and some

template pages and the ‘index.html’. Let’s start

by opening ‘index.html’.

F4A supplies a sample page for your new

project, but since we’re learning how to build

an app, we’ll start by nuking everything between

the body tags. After the body tag we’ll create

the grid-frame . This contains the entire app and,

by setting a defined width (100 per cent) and

a defined height (100VH), it allows us to easily

carve the screen up vertically.

<body>

<div class="grid-f rame">

</div>

</body>

Now we’ll create the header and main content area

of our app. We’ll introduce grid-blocks , grid-content ,

the vertical grid and the shrink class.

<div class="grid-frame vertical">

<div class="grid- content shrink">

</div>

<div class="grid -block">

</div>

</div>

Let’s break down these new elements:

vertical : This can be applied to grid-frames and

grid-blocks to force their direct children to be

displayed vertically as opposed to horizontally

shrink : By default, flex-box wants to spread

elements out evenly across the available space. The

shrink class tells the element to only be as large

as it needs to be. Items without a shrink class will

take up the remainder of the space

grid-block : These are roughly analogous to rows,

but unlike rows they can be sized. Mainly, they

We’ll prototype Angularroutes and use motionclasses to add slickanimations to our views

Early concepts A sketch

showing what our app will

look like on smaller mobile

screens and larger desktops


Wor l d ags net



7/21/2019 net 2015-05


PROJECTSRWD

86

may 2015

Introducing F4A ZURB’s

new framework enablesusers to build web apps

that work on any device

are items set to flex, allowing every item inside

of them to be aligned without floats

grid-content : This is used when you want to put

regular content ( <p> , <h1> and so on) in your app.

They can be sized or not sized. In the case of the

latter, the grid will attempt to fit the content inside

of them evenly across their parent

We need to name our app, as well as including some

actions at the top of the page. We’ll add a title-bar

to the app to quickly create a simple header:

<div class="grid-frame vertical">

<div class="grid- content shrink">

<div class="primary title-bar">

<div class="center title">Yeti News</div>

<span zf-toggle ="info" class="left hide-for-larg e"><a

href="#">info</a></span>

</div>

</div>

<div class="grid- block">



</div>

</div>

This creates a basic header, with a link titled ‘info’

that we’ll use to toggle an info panel. Foundation

uses zf-toggle to call panels, modals or off-canvas

menus based on their id . When the user clicks this

on smaller screens, we want our info panel to pop

out. On larger screens, we’ll need to hide this panel,

as its contents will already be displayed.

We now have the basic header for our app, so

let’s build out the content area and navigation.

We’ll start by creating our info panel, then a series

of cards that will act as our news articles, and finally

the navigation.

We’ll start inside the block we created underneath

our header:

<div class="grid-block vertical">




<div zf-panel positio n="left" id="info">

<div class="grid-content">

<h1>Designer News</h1>

<p>Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu

sed erat molestie vehicula.</p>

</div>

</div>

<div class="small-12 large-9 grid- content">



</div>

</div>

<div class="grid -block shrink">



</div>

</div>

</div>

<div class="grid -block shrink">

<!-- our navigation- ->

</div>

</div>


Wor l d ags net

7/21/2019 net 2015-05


may 2015

87

RWD

Foundation for Apps, like its ‘For Sites’ counterpart , comes

with tons of variables to enable users to change just about

anything about the visual look of their apps.

To quickly change the look we’ll head over to the settings

file, which can be found at client > assets > sass > _settings.scss .

Once open, we can begin changing variables.

Some of the most high impact changes include:

$rem-base: This controls the base font size, and can shrink

or enlarge the text and spacing within your app

$body-background: This is used to change the background

colour of your app

$body-font-color : This can change the default text colour for

p tags and h1 to h6 tags as well. Swapping two variables

here could easily convert your app to a dark theme

$primary-color : This is the main colour of your app and is used

for all links and buttons. Many components have a primary class

that, when applied, can turn them from a plain white to a theme

based on the primary colour

There are plenty of variables for every component, so you’ll rarely

need to override the existing styles . Not only does this make

creating your app easier and quicker, it also prevents duplicate

code from being written just to style your app.

STYLING FAST

WITH SASS

FOCUS ON

Fast work In this tutorial, we changed a few variables and easily created a distinct

style for our app, all in about 15 minutes

To size our feed we’ve used the parent sizing grid,

and to style individual items in the grid we’ve

used our card components. Parent sizing allows

us to declare the size of direct child elements on

the parent when we know how many items we

want in each row.

Here we add small-up-1 , because on small screens

we only want to display one item in each row, but on

larger screens we’ll want more. We then use the card

component to create clean-looking box dividers that

hold our article title and description.

Next we’ll add our navigation:



<div class="grid-block">

...

</div>

<div class="grid-block shrink">

<ul class="menu-bar icon-top dark">

<li><a><img zf-iconic="" data-src="assets/img/

iconic/person.svg"> Designer</a></li>

<li><a><img zf-iconic="" data-src="assets/img/iconic/cog.svg"> Hacker</a></li>

<li><a><img zf-iconic="" data-src="assets/img/

iconic/star.svg"> Product</a></li>

</ul>

</div>

</div>

We used the menu-bar component to make a tab list

for our app, and added some iconic icons to make it

feel more like an app tab bar. The menu-bar has tons

of customised options. By default it’s horizontal, but

it can also become vertical.

This gives us the main layout for our app on a

mobile screen. Next we’ll take a look at how to adapt

this layout on a desktop screen.

ADAPTING FOR DESKTOP

We’ve created the layout for our mobile site, but

we want it to display differently on a desktop.

We’ll make the following changes to our code to

get it to properly match the sketch we created

earlier. Here are some areas we’ll change to make

our layout match:

F4A’s variables enableusers to change justabout anything aboutthe look of their app


Wor l d ags net



7/21/2019 net 2015-05


PROJECTSRWD

88

may 2015

Foundation for Apps offers places where users can get help

or access additional resources. Below are some of the URLs

to check out for more information on the Foundat ion family and

ZURB as a whole.

Foundation for Apps Docs (foundation.zurb.com/apps/docs ) – For

more information regarding F4A components and directives, visit

the Foundation for Apps Docs

Foundation Docs (foundation.zurb.com/docs ) – To build marketing

sites and landing pages, view information for Foundation for Sites

by visiting the Foundation Docs page

Ink (zurb.com/ink ) – To build HTML emails using a ZURB framework,

check out Ink, our Foundation for Emails framework

Foundation Forum (foundation.zurb.com/forum ) – If you get stuck

or need help with any of the ZURB Frameworks make your way to

the Foundation Forum

Foundation Training (foundation.zurb.com/learn/training.html )

– If you’d like to learn Foundation from the people who create

it, take a look at our Training pages

GitHub (github.com/zurb/foundation-apps, github.com/zurb/ink,

github.com/zurb/foundation ) – Any other questions can be directed

to the respective ZURB GitHub accounts

Twitter – For quick queries, tweet @ZURBFoundation

ADDITIONAL RESOURCES

RESOURCES

YetinewsWhen installing a new Foundation for Apps projec t, you'll be greeted by our friendlyyeti to alert you of progress

<div class="grid-block vertical medium-horizontal">


<div class="grid-block medium-order-2">

<div zf-panel position="left" id="info" class="large-3

large-grid-content">

<div class="grid-content">

...

</div>

</div>

<div class="small-12 large-9 grid-content">

<div class="grid-block small-up-1 medium-up-2 large-

up-3">

...

</div>

</div>

</div>

<div class="grid-block shrink medium-order-1">


...

</ul>

</div>

</div>

We have introduced a few new classes to help

make our layout adapt to large screens – things

such as medium-horizontal , large-grid-content and

medium-order-1 .

Let’s take a look at these:

[size]-horizontal : The same way we can tell a grid

to be vertical, we can also tell it to go back to being

horizontal at a certain breakpoint. In this case

we’re telling the grid to be vertical, but on medium

screens and larger, we want it to switch and

become horizontal

[size]-grid-content : There’s a panel that is off-screen

on small devices, but on larger screens we want

that panel to be in line with the content. By adding

a class to the panel to tell it when to be large-grid-

content , we’re able to make it part of the grid on

large screens

[size]-order-x : We knew we wanted the navigation

to be on the bottom on mobile devices, but on

the left of the screen on medium devices and

above. To achieve this we’ll use F4A’s source

ordering classes, which let us declare which items

will display first on screen, regardless of what

order they sit in the code. We used medium-order-1

on our navigation to tell it to come first on screens

above a medium size, and medium-order-2 to tell

our content to come second

Now we have a unique layout that works on all size

devices, takes advantage of the extra space on larger

screen and uses the same markup for all.


Wor l d ags net



7/21/2019 net 2015-05


may 2015

89

RWD

ANGULAR ROUTING AND VIEWS

So far all our content lives on ‘index.html’. However,

we’re creating a single-page web app, so we want to

make the navigation bring up different content in

the main content area.

A basic website is a collection of HTML files

connected by links. Single-page apps work slightly

differently – all your site’s logic is handled on one

file: ‘index.html’. This contains the core elements

of your app, such as the header, navigation and

footer. The individual pages are stored as separate

HTML files in a templates folder.

Now, let’s put together a view for our app. Earlier,

we created a grid-block for our main content area.

Let’s use that block as the container for our view.


<div class="grid-block medium-order-2" ui-view>

...

</div>

We have added a ui-view to our div . This will tell

Angular which area of the page should be swapped

out. We’ll need to take all the content inside that

div and move it to a separate file, so cut that code

and we’ll use it in a second.

In our ‘templates’ folder we already have a file

named ‘home’. We’ll use that file as the basis of

this view. In F4A we’ve created a system for creating

routes that doesn’t require the user to know Angular

or UI-Router. We use Front-matter at the top of our

template files and then our gulp task parses that

out as a route.

In our ‘home.html’ file we’ll keep everything

within the dashes, but replace the HTML under it

with the HTML we just cut from the previous page.

Next we’ll look at the Front-matter .

---

name: designer-news

url: /

animationIn: hingeInFromLeft

---

The Name is how we’ll reference our app, and the

URL is what the ‘/’ in our URL will turn into. While

those are the only two required parameters to make

the views work, we’ll also add an animationIn option

to animate the view as it comes in.

For this app we’ll call this view ‘designer-news’,

with just a slash for the URL (because we want this

to be the default view) and a hingeInFromLeft class

from F4A’s motion UI. We can create more pages in

the ‘templates’ folder, give them their own names

and their own URLs.

Lastly, let’s link our views to our navigation. We’ll

use ui-sref as opposed to hrefs and call the links by

the names we gave them in each template.


<li><a ui-sref="designer-news"><img zf-iconic="" data-

src="assets/img/iconic/person.svg"> Designer</a></li>

<li><a ui-sref="hacker-news"><img zf-iconic="" data-

src="assets/img/iconic/cog.svg"> Hacker</a></li>

<li><a ui-sref="produc t-hunt"><img zf-iconic="" data-src="assets/img/iconic/star.svg"> Product</a></li>

</ul>

There we have it – a complete prototype for our news

app. We have looked at swapping from a vertical grid

to a horizontal one, and featuring a slide-in panel

content that becomes inline on larger screens. While

this app is pretty basic, it has many of the same

principles of a more complex one, and would be ready

for you or a backend dev to hook up dynamic data.

We have introduceda few new classes tohelp make our layoutadapt to large screens

Mobile view The

completed mobile app,

ready to be built out for

larger screens

RESOURCE

ZURB offers freeproduct design

lessons, ranging fromsketching interfaces

to the right way toask for feedback: zurb.com/university/lessons


Wor l d ags net



7/21/2019 net 2015-05


PROJECTSPrototyping

90

may 2015

Many site-building tools take a developer-first

approach, making it difficult for designers to

work with them. Thankfully, Webflow (webflow.com)

has corrected that mistake, providing designers with

the Photoshop-like pixel precision they need to build

a production-ready website, without the assistance of

a developer. Webflow is not merely a toy for those

who don’t know how to code; it allows you to build

sites from scratch, giving you the power to precisely

meet client specifications. What’s more, Webflow is

now offering a free plan – perfect for getting started

and exploring what the tool has to offer.

In this tutorial, I’ll show you how to use Webflow

to design a page that showcases rich multimedia

content. In doing so, you’ll witness the enormous

workflow benefits that using a site-builder can bring.

We’ll create an interactive display of content using a

slider widget, along with a lightbox that showcases

retina-quality images. I’ll show you how to make

sure both of these components look as good on

mobile as they do on the desktop – without fiddling

around with CSS media queries. We’ll also create a

navigation bar that responsively transforms into

a drop-down menu on smaller screens.

We’ll then finish it off with a form that will enable

you to collect emails from your visitors so you can

stay in touch with them. And we’ll do all that – and

make our design fully responsive – in just 16 steps.

BUILD WORKING SITESUICKLY WITH FLOW Julian Shapiro enables designers to build

feature-rich, production-ready sites in no time at all

PROTOTYPING

ABOUT THE AUTHOR

JULIAN SHAPIROw: julian. com

t: @Shapiro

job: Web designer

areas of expertise:HTML, CSS, JavaScript

q: what’s the worst holidayyou’ve ever been on? a: Any time I get suckeredinto bowling

VIDEO

Julian Shapiro hascreated an exclusive

screencast to go withthis tutorial. Watch

along at netm.ag/ webflowvid-266

View source

f iles here!Download the assets you

need for this tutorial at

netm.ag/pixatepics-265


Wor l d ags net




7/21/2019 net 2015-05


Prototyping

may 2015

91

Step 1 Begin building your layout usingSections, Containers and Columns

Step 2 Elements can be filled with images, colours and gradients

that you can also add secondary

classes, to help differentiate styles

across related elements).

Inside the Style panel ( S ), you’ll

find the Background palette. From

here, let’s fill the body with a vibrant

background image. Using the Cover

style will guarantee that your image

‘covers’ the full width, while the

Fixed position ensures it scrolls

with the rest of the site.

03You want visitors to be able

to efficiently navigate your

site – especially on mobile devices

01

Webflow’s site builder starts

you off with a blank canvas

set on a 940px grid . You can switch

view modes between ‘Desktop’,

‘Tablet’, ‘Phone-Landscape’ and

‘Phone-Portrait’ by toggling the

device icons in the top toolbar.

Webflow’s workflow is optimised

so changes cascade downwards.

I’ll first design the site in desktop

mode, then optimise for smaller

screens. Let’s begin by opening the

Add Element panel (keyboard

shortcut A ) and dragging a

‘Section’ (the equivalent of a

content wrapper) onto our canvas.

02Let’s spice up this blank

canvas. To edit the styling

of an element, a ‘class’ must be

created in the Style panel (note

where screen real estate is limited.

A responsive ‘Navbar’ will do the

trick. Creating one in Webflow is

easy: From the Add Elements

panel, drag a Navbar above the

Section element we previously

added. Position it with the help

of the Navigator tool ( F ) – just

like you would with a layer in

Photoshop. Note the blue lines

that appear when moving an

element – these are positioning

guides, use them to help you

accurately place elements.

04In Webflow, you have total

control over the styling of

any element. With the safety net

of undo ( cmd+Z or the arrow

icons), you can confidently play

with positioning, gradients,

borders and shadows, and you can

animate the transition of all these

properties. Check out the Effects

palette to learn more. With your

Navbar finished, convert it into a

‘Symbol’ by clicking the icon in the

Assets panel ( H ). Symbols allow

you to duplicate content into a

group that you can thereafter edit

in one shot. Remember symbols

from Flash? Same thing.

EXPERT TIP

Alt

EDITING

SHORTCUTS

Step 5 Typographic elements already have default classes


Wor l d ags net




7/21/2019 net 2015-05


PROJECTSPrototyping

92

may 2015

Desktop users will be able to click

to toggle through the slides, and

mobile users will be able to swipe.

Let’s drag a ‘Slider ’ into the Tab

panel for our first Tab. With the

auto-play feature, your slider will

greet visitors with automatically

scrolling content.

08

Let’s create an image gallery

for the second Tab using

the ‘Lightbox’ widget. A lightbox

displays your images in a fullscreen

window. You can make the images

align in a responsive grid by using

a Columns section then placing

a Lightbox element inside each

column. In the Lightbox Settings

05To keep your content from

spilling off the sides on

narrow screens, add a ‘Container’

into the Section. Drag and drop

a ‘Heading’ into the Container,

aligning it as centred text using the

Typography palette. Notice that

typography elements already have

default classes. Accordingly, when

styling a default heading, it will

automatically change the default

style for all headings, unless you

remove the Heading class or add

a secondary style class. We now

have the essential building blocks

for our site: Section, Container,

Navbar and Heading.

06Now the plot thickens.

Let’s build a slideshow

nested inside of a ‘Tab’ Container.

Drag a Tabs element from the

widgets library. Tabs are great

for organising lots of content and

delivering it to the viewer through

a single click. You can easily switch

between the individual Tabs with

the Navigator ( F ) to individually

edit their contents. Also note that,

to help find or select a specific

element or layer, the Breadcrumbs

feature on the bottom toolbar

makes selecting parent elements

a total breeze.

07Visitors must be able to

interact with your site. Let’s

give them a slideshow that works

responsively across all devices.

palette from Image Settings

( D ), click the ‘Add Image’ icon.

You can enable users to view

multiple images as a group inside

the window by toggling ‘Link with

other Lightboxes’ and creating a

group name for all your images.

09Tab three will be our

container for the contact

form, where visitors can submit

their emails. Utilising the same

layout controls from the columns,

you can make the contact form

responsive so mobile users can

easily fill out the fields. However,

in order to separate the fields into

columns, the Columns section

must be inside a Form block. After

doing that, drag and drop each field

into the individual columns. This

way, the columns with fields inside

can be adjusted for different

devices.

10Why not make it easy for

your visitors to share your

site with friends? Let ’s add a new

Container below the Tabs. From

the widgets library, add the social

buttons for Twitter, Google and

Facebook. In the Settings ( D )

for each button, you can edit the

‘Share URL’ and customise the

layout style to display the ‘boxes’

in a vertical manner. To save screen

Step 7 Create a completely unique slider with animated interactions

Step 10 Add social sharing buttons to enable visitors to share your content

EXPERT TIP

Settings

SAVING VERSIONS


Wor l d ags net



7/21/2019 net 2015-05


Prototyping

may 2015

93

real estate, let’s align them next to

each other horizontally by changing

the display settings for each button

to Inline-Block .

11Now let’s preview the site.

Click the ‘eyeball’ icon in the

upper-left corner to toggle the

preview mode and inspect your site

as a live mockup. While previewing,

you can also switch between the

different view modes to see how

your design flows on smaller or

larger viewports. Webflow

provides four default view modes,

but you can test the design’s flow

at any size by manually shrinking

the width of your browser window.

This is one of the many benefits of

working directly in the browser!

12We need to bring some more

life to this page. Let’s add

hover states to these buttons so

that feel interactive. A site that

responds when the user interacts

with it is key for establishing a user

experience where each element’s

purpose is clearly understood. In

the Style panel, above the Classes

field, you’ll find the States

drop-down. Select Hover and

create a unique style for your

button. With a new style, you

can animate its transition. In the

Effects palette at the bottom of

the Style panel, add transitions

to the style’s properties.

13Let’s switch to the ‘Tablet’

view mode so we can

optimise our design for that type

of device. Notice that the Navbar

button is now an icon indicating a

drop-down menu – this means it’s

responding to the new device’s

size. Users can now press the icon

to open the menu.

14To design this, open the

menu from Settings ( D )

and edit your typography as

desired. Then switch to ‘Phone-

Landscape’ mode and repeat the

style touch-up process. Notice how

the contact form automatically

adjusts into vertical formation

here, thanks to its responsiveness.

Finally, let’s switch to ‘Phone-

Portrait’ mode so we can see how

things look one size further down.

Here, the menu tabs are displayed

Step 16 If you’re building a more complex website, you can also export your code and build on top of it in your IDE of choiceStep 15 Go live with the push of a button

COLLECT EMAIL

ADDRESSES

EXPERT TIPvertically, as are the lightbox

thumbnails and contact form.

Pretty neat, no?

15After optimising your design

for the various viewport

types and cleaning up any unused

styles with the Style Manager

( G ), go ahead and publish your s ite

by clicking the ‘rocket’ icon in the

top-right of the toolbar. With a

single click, your site will be live,

and you will be provided with the

shareable URL. You can still

continue to make changes to

your site as needed – plus, you

can always unpublish your site,

or keep it private with a Password.

16

We’re on our last step!

In the Webflow designer,

the export code button in the

top toolbar will zip the site’s

content so you can send it to

your client or another developer.

To publish the site to your own

domain, click the ‘Webflow’ icon

in the top-left corner to go to

Settings . From there, you can

connect your custom domain

under the Hosting tab.


Wor l d ags net




7/21/2019 net 2015-05


PROJECTSCSS

94

may 2015

Last year we developed the new Orangina

website (orangina.eu) with Achtung, with the

aim of creating something that felt organic and

playful. However, one simple feature turned out to

be quite challenging: the buttons. The unorthodox

shapes we were after can be tedious to create using

CSS. Often the easiest option is to resort to using

images – however, this is not ideal as it makes

everything far less flexible.

You can create a lot of shapes with CSS using

2D transforms and CSS-generated content, but

that didn’t cut it for this particular shape. The

solution: CSS 3D. Our button is actually a shape

rendered in 3D space, but since it is only one colour,

the ‘depth’ becomes unnoticeable, creating the

illusion of sloping edges. This allowed us to animate

the shape of the button on hover by changing the

element’s position in 3D space.

WHAT IS CSS 3D?CSS 3D was introduced in Safari on the f irst iPhone

(iOS 2). The new CSS properties enabled users to

position elements on the page in 3D space. Since

then, these properties have been standardised

into a W3C specification, and by now they’ve been

adopted by all the major browsers.

When I talk about CSS 3D, I’m talking about

both the perspective property and 3D transforms.

The perspective property is used to define a

3D environment and to set the depth of this

environment. After the 3D environment is defined,

all the nested elements will be located in this 3D

space, where transforms can be used to position

them. So, for example:

HTML<div id="stage">

<div class="element"></div>

</div>

CSS#stage {

-webkit-perspective: 300px;

perspective: 300px;

}

.element {

-webkit-transform: translateZ(-300px);

transform: translateZ(-300px);

}

As you can see, the perspective property is defined

in pixels. This value determines the distance from

the drawing plane to the assumed position of the

viewer’s eye. After the perspective has been set,

nested elements can be moved on the Z-axis to

make them appear closer or further away.

The scaling used to simulate this effect is

calculated using the equation S=d/(d-Z) , where

d is the value of the perspective property, and Z

is the value of translateZ (see sidebar resource). In

the previous example, the element will be scaled

to half its original size. In addition, the perspective-

origin property can be used to determine the position

of the vanishing point. The default value for the

perspective origin is ‘50% 50%’, placing the position

of the vanishing point in the centre.

When you combine different transform properties

– for example a scale and a rotation – you can create

some interesting results.

REATE A DYNAMIBUTTON WITH CSS 3Leon de W t walks through how to move past 2D transforms anduse CSS 3D properties to render shapes in 3D space

CSS

ABOUT THE AUTHOR

LEON DE WIT

w: egotribe.nl

t: @egotribe

job: Frontend developer,Egotribe

areas of expertise:HTML, CSS, JavaScript

q: what’s the worstholiday you’ve ever

been on?a: To be honest, allmy holidays havebeen pretty awesome

No

4.1

No

40

Mobile/tablet

7.1

34

10*

No

26

Desktop

31

CSS 3D TRANFORMS

Partialsupport


All the files you need for

this tutorial can be found at

netm.ag/CSScode-266


Wor l d ags net



7/21/2019 net 2015-05


may 2015

95

CSS

RESOURCE

For a detailedexplanation of how your

3D elements are beingrendered, have a look at

netm.ag/transform-266

Buttons The finished

button in situ on the

Orangina website. On

hover, the button shifts

in 3D space

.element {

-webkit-transform: translateZ(-300px) rotateY(20deg);

transform: translateZ(-300px) rotateY(20deg);

}

In this example, the element will be scaled due to

its position on the Z-axis, and will also be rotated

20 degrees along its Y-axis. Bear in mind the order

of transformations is important – they are applied

from left to right. If you changed the order in the

above example, putting the rotation first, the

element would be positioned differently. The order

of transformations can mean the difference between

rotating around the origin of an element and rotating

around the origin of its parent.

PUTTING IT INTO PRACTICE

We used the following CSS for our button:

.button {

-webkit-perspective: 100px;

perspective: 100px;

}

.button:after {

-webkit-transform: rotateY(-6deg) rotateX(-5deg)

translateX(-4%);

transform: rotateY(-6deg) rotateX(-5deg) translateX(-4%);

}

THE RESULT

To see the finished button, visit netm.ag/CSScode-266.

By using the :after pseudo element as the

background of the button, we are able to set the

perspective on the button element itself, and use the

transform property on the :after element. This also

allows us to transform the background separately

from the text.

Using a negative Z-index on the :after element

places it behind the text. Also, using the :after

pseudo class saves us from using an extra HTML

element (you could achieve the same effect using

a wrapper div ).

By adding a transition to the element, you can

create some neat animated effects – for example

when you hover over the button. The following code

will cause the background of the button to animate

to a mirrored state.

.button:after {

-webkit-transition: -webkit-transform .3s ease-out;

transition: transform .3s ease-out;

}

.button:hover:after {

-webkit-transform: rotateY(6deg) rotateX(5deg)

translateX(4%);

transform: rotateY(6deg) rotateX(5deg) translateX(4%);

}

THINGS TO KEEP IN MIND

There are some things to remember with CSS 3D:

3D transforms and perspective aren’t supported

by some browsers, most notably IE9 and lower.

Both IE10 and IE11 do not support the

transform-style: preserve-3d property, which

isn’t covered in this article, but can be a

useful feature for certain situations. For a full

browser support table have a look at caniuse.

com/#feat=transforms3d

At this moment the -webkit- prefix is still

needed for both the transform and the

perspective properties in Safari and most

Android browsers

3D transform can cause jagged edges in Firefox.

We worked around this here by adding: outline:

1px solid transparent;

Putting a 3D transform on an element will

trigger hardware acceleration. This has several

benefits, such as smoother animations. One

issue to be aware of is that in WebKit browsers,

enabling hardware acceleration can cause

blurry images and text

Using CSS 3D is pretty cool, and I hope this article

has given you some inspiration on how to use it in

your projects.

By adding a transition

to the element, youcan create some neat


Wor l d ags net



7/21/2019 net 2015-05


PROJECTSHead to head

96

may 2015

Matt Hamm Anna Debenham

ABOUT THE AUTHOR

ANNA DEBENHAMw: maban.co.uk

t: @anna_debenham

job: Frontend Developer

q: what’s the worstholiday you’ve everbeen on?a: When I was a teen,my choir did a US tour.A week in, about 20 of

us caught a puking virus

ABOUT THE AUTHOR

MATT HAMM

w: supereightstudio.com t: @matthamm

job: Co-founder,Supereight Studio

q: what’s the worstholiday you’ve everbeen on?a: I went to beautifulVenezuela and my sonand I both got dysenteryfor nearly the wholethree weeks

FREEAGENT VS XERO

HEAD TO HEAD

Xero (xero.com ) is the largest of the online accounting

software providers in the world. Key features include

automatic bank, PayPal and credit card account feeds,

invoicing, accounts payable, expense claims, fixed

asset depreciation, purchase orders and quotes.

The native Xero ‘Touch’ mobile and tablet app is

available for free on iOS and Android platforms,

and is perfect for quickly scanning receipts for

expense claims.

UK bank feeds support is fantast ic, with over 55

high street banks included. Yodlee feeds are free

and work perfectly, but direct bank feeds incur a

small monthly fee (around £3.50, depending on

which bank you use).

Xero is global – however, the localisation is primarily

geared towards New Zealand, Australia, the United

Kingdom and the United States, with over 160

different currencies supported.

£9 /month: send a maximum of 5 invoices and 5 bills,

and reconcile 20 bank transactions.

£20 /month: unlimited invoice bills and reconciliation.

£25 /month: unlimited invoice bills and reconciliation,

plus additional multi-currency accounting.

FreeAgent (freeagent.com ), based in Scotland, is one

of the most popular online accounting services in

the UK. The tool hooks up with HMRC’s Government

Gateway, so self-assessment and payroll can be f iled

without leaving the site.

There’s no official FreeAgent app, but the site is

designed to work nicely in browsers on iOS, Android

and Windows Phone. If you’re desperate for an app,

there’s a third party one for iOS called mobileAgent.

Thousands of bank feeds are supported using Yodlee,

and there’s no extra charge outside of the regular

plan for enabling these. FreeAgent automatically pulls

in your daily transactions and can also automatically

explain them for you.

FreeAgent is focused on the UK tax system, but if

you’re based outside the UK you can use a ‘Universal’

account. It supports 99 different currencies, as well

as multi-currency invoices and bank accounts.

£19 /month plus VAT for sole traders.

£24 /month plus VAT for partnerships/LLPs.

£29 /month plus VAT for limited companies.

$24/month for US businesses, or $20/month

everywhere else. Yearly plans also available.

DEVICE SUPPORT

BANK FEEDS

LOCALISATION

PRICE

XERO FREEAGENT

You won’t go wrong with either of these tools, as they both offer a huge range of features.That said, Xero’s £9/month package may be ideal if you’re running a very small businesson the side. Ask your accountant if they have a preference, or – since both options offera 30-day free trial – give them a go to see which feels right to you.

VERDICT


Wor l d ags net




7/21/2019 net 2015-05



Wor l d ags net



7/21/2019 net 2015-05


PROJECTSIcon design

98

may 2015

Creating that one, singular piece of graphic

design that users will interact with first each

time they see your product can be an intimidating

task. A beautiful, identifiable and memorable app icon

can have a huge impact on the popularity and success

of an app. But how exactly does one make a ‘good’app icon? What does that even mean? Fear not, I’ve

put together some tips and advice to help answer

these questions, and guide you on your way to great

app icon design.

WHAT IS AN APP ICON?

The first things you need to understand when setting

out to create your icon is what exactly an app icon

is and what job it has to perform. An app icon is a

visual anchor for your product. You can think of it as

a tiny piece of branding that not only needs to look

attractive and stand out, but ideally also communicate

the core essence of your application.

The word ‘logo’ is thrown around carelessly these

days. App icons are not logos. While they certainly

share branding-like qualities, they’re under a lot ofdifferent restrictions. It’s an important distinction for

the designer to make: logos are scalable vector pieces

of branding designed for letterheads and billboards.

Icons are most often raster-based outputs customised

to look good within a square canvas, at specific sizes

and in specific contexts. The approach, the tools, the

job and therefore the criteria for success are different.

From a practical standpoint, what you are creating

when you’re making an app icon is a set of PNG files

in multiple sizes – ranging from 29 x 29px all the

W T DE IGN

BETTER APP ICONSMichael Flarup walks us through his top tips for designing

a icons that are memorable, apt and unique

ICON DESIGN

VIDEO

Michael Flarup hascreated an exclusive

screencast to go withthis tutorial. Watch at

netm.ag/iconvid-266

ABOUT THE AUTHOR

MICHAEL FLARUP

w: pixelresort.com

t: @flarup

job: Designer

areas of expertise:Pushing pixels andbuilding products

q: what’s the worst holiday

you’ve ever been on?

a: All my vacationsare awesome. Proof:flysleepy.com


Wor l d ags net



7/21/2019 net 2015-05


may 2015

99

Icon design

way through to 1024 x 1024px – that needs to be

bundled with your app. This set of carefully crafted

designs will be used in the many contexts of the OS

where users encounter your application – including

the App Store or Google Play, Settings panel, search

results and your home screen.

App icons can essentially be made in any application

capable of producing raster files, but common choices

are Photoshop, Illustrator and Sketch. Free tools like

appicontemplate.com offer clever PSD templates that

can help you get off the ground quickly.

Now let’s take a look at some of the best practices

of app icon design.

1 SCALABILITY

One of the most important aspects of an icon is

scalability. Because the icon is going to be shown

in several places throughout the platform, and at

several sizes, it’s important your creation maintains

its legibility and uniqueness. It needs to look good

on the App Store, on Retina devices and even in the

Settings panel.

Overly complicated icons that try to cram too

much onto the canvas often fall victim to bad

scalability. A very big part of the conceptual stages

of app icon design should be dedicated to thinking

about if any given design scales gracefully.

Working on a 1024 x 1024px canvas can be deceptive

– make sure you try out your design on the device

and in multiple contexts and sizes

Embrace simplicity and focus on a single object,

preferably a unique shape or element that retains

its contours and qualities when scaled

Make sure the app icon looks good against a variety

of backgrounds

2 RECOGNISABILITY

An app icon is like a little song, and being able

to identify it easily in amongst all the noise of the

store or your homescreen is a key component in

great icon design. Like the verse of a song needs

to resonate with the listener, so do the shapes,

colours and ideas of an app icon. The design needs

to craft a sense of memory and connection on both

a functional and an emotional level.

Overly complicatedicons that try to cramtoo much in often fall

victim to bad scalability

Seeing squircles Black pixel fragments are sometimes found at the rounded

edges of iOS app icons because designers have used transpa rency

ALPHA

TRANSPARENCYOne of the most common mistakes designers make

when creating and bundling iOS app icons is in the use of

transparency. On iOS, all the icons are presented as squares with

rounded corners (affectionately called ‘squircles’). However, this

rounding is done programmatically by Apple, when the icons are

uploaded – not by the designer.

This detail escapes many people when they first try their hand

at app icon design. Alpha transparency is not supported in icons

for iOS – designers are required to deliver a square PNG file. If

you bundle and upload an icon with transparency through iTunes

connect, the transparent areas are replaced with solid black.

Commonly, the designer’s pre-rounded corners are turned black,

then programmatically rounded by Apple. This would be fine if it

weren’t for the fact that most tools and templates that enable this

sort of rounding are ever so slightly inaccurate, due to the notorious

difficulty of reproducing the squircle.

This often leads to small black fragments on the rounded

edges of the icon, where the designer’s pre-rounded ma sk clashes

with the black pixels Apple has introduced. If you look closely on

light backgrounds, you’ll see a surpr ising number of icons – even

from large publishers – that suffer from this issue.

So remember: always deliver full square PNG files when

designing iOS app icons. The option to export icons with rounded

corners in popular templates is often intended for use on

promotional material, such as on websites and email marketing.

Never pre-round an icon before you submit your app to the App

Store and never include any transparency.

FOCUS ON


Wor l d ags net




7/21/2019 net 2015-05


PROJECTSIcon design

100

may 2015

There are several fantastic resources online to help you

get started and set you on your path to creating better app

icons. I created and maintain appicontemplate.com , which offers a

set of free PSD templates. With these, amateurs and professionals

alike can quickly render and export all the icon sizes needed for

the various platforms, simply by editing a single Smart Object

in Photoshop. There are templates for iOS, Android, OS X and even

templates that help you make screenshots for your app.

Around 500,000 templates have already been downloaded. Most

of these include standard assets, shapes, textures and colours

that give the designer something to build on, along with contextual

screenshots that show your icon in native environments like the

App Store and on a homescreen.

By utilising Smart Objects, the templates enable you to work in

a single canvas – the largest size needed – and then see the other

sizes rendered automatically. This enables you to quickly assess

how well a given concept scales. Smart, one-click export actions

are bundled, and you’ll also find helpful videos and tutorials on

how to get the most out of the templates. The goal is to empower

everyone to build better icons for the devices around us.

Another great resource is Bjango Actions (bjango.com/articles/

actions ) by Marc Edwards – a collection of clever Photoshop actions

for both icons and UI work. If you’re just getting started with icons,

The Icon Handbook by John Hicks is a great reference book covering

a more general approach to individual icon types and the history

of icons.

TOOLS TO GET

YOU STARTED

Your icon will be vying for attention amongst

thousands of other icons, all of which have the

same 1024px canvas to make their impact and secure

their connection with the viewer. While scalability

is a huge part of recognisability, so is novelty.

The search for a balance between these qualities

is the very crux of the discipline.

Bland, overly complicated icons are the enemy of

recognisability. Try removing details from your icon

until the concept starts to deteriorate. Does this

improve recognisability?

Try out several variations on your design. Line

them up in a grid and try to glance over them,

seeing what aspects of the designs catch your eye

Try to deconstruct your favourite app icons and

figure out why you like them and what methods

they use to stand out

3 CONSISTENCYThere’s something to be said for creating consistency

between the experience of interacting with your app

icon and interacting with the app it represents. I feel

like good icon design is an extension of what the app

is all about. Making sure the two support each other

will create a more memorable encounter.

Shaping a sleek, unified image of your app in your

users’ minds increases product satisfaction, retention

and virality. In short: making sure your icon works

harmoniously with the essence, functionality and

design of your application is a big win.

One way to ensure consistency between app and

icon is to keep the colour palette of your interface

and icon in line, and use a similar and consistent

design language – a green interface reinforcedby a green app icon, for example

Although it’s not always possible, one way to

tighten the connection between your app and your

icon is for the symbolism of the icon to directly

relate to the functionality of the app

4 UNIQUENESSThis almost goes without saying, but try to make

something unique. Mimicking a style or a trend

is perfectly fine, but make it your own. Your app

IN-DEPTH

This is my pet peeve:only in the rarest ofoccasions is it OK to

use words in app icons

Helpful templates appicontemplate.com ‘s iOS app icon template, where the

many icon sizes are automatically rendered


Wor l d ags net



7/21/2019 net 2015-05


may 2015

101

Icon design

icon is constantly competing with other icons

for the users’ attention, and standing out can be

a perfectly valid argument for a design. Uniqueness

is a tricky part of design, because it not only relies

on your skills but also on the choices of others

who are trying to tackle a similar task.

Consider what everyone else is doing in your

space, then try a different direction. Always do

your research – the world doesn’t need another

checkmark icon

A singular glyph on a one-colour background

can be a tricky route to go down if you want to

stay unique. Play around with different colours

and compositions, and challenge yourself to find

new and clever metaphors

Colour is a great and often overlooked way of

repositioning a concept

5 DON’T USE WORDS

This is one of my all-time top pet peeves. Only

in the rarest of occasions is it OK to use words in

app icons. If you have to retreat to another tool of

abstraction – the written word – I’d say that you’re

not using the full force of your pictorial arsenal.

Words and pictures are separate representational

tools, and mixing them in what is supposed to be

a graphical representation often leads to a cluttered

and unfocused experience, which is harder todecode. Is there really no better way to visualise

the application than with dry words? Whenever

I see words in app icons, I feel like the designer

missed an opportunity to more clearly convey

their intentions.

There’s no need to include the app name in the icon

– it will most often be accompanying the icon in the

interface. Instead, spend your time coming up with

a cool pictorial concept

“But Facebook has the ‘f’ in its app icon”, I hear

you say. If you’re using a singular letter and you

feel like it’s a good (and unique) fit, then the letter

loses its ‘wordy’ qualities and becomes iconic by

itself. However, this is more often the exception

than the rule

Your company logo and name in a square is never

a good solution. Do you have a mark or a glyph

that works well within the constraints? If not,

you’re probably best off coming up with something

new. Remember, icons and logos are not the same,

and shouldn’t be forced into the same context

MAKING YOUR MARK

On the App Store and on Google Play, there are many

examples of bland and unopinionated icon designs.

Your icon is the strongest connection you’ll have with

your user. It is what they’ll see first when they meet

you in the App Store. It’s what they’ll interact with

every single time they use your app. It is what they’ll

think of when they think of your app. Anything short

of a well thought-out, fitting and attractive solution

is a failure to utilise your greatest visual asset. Your

app icon should not be an afterthought, it should be

a working part of the process.

App icons are tiny little pieces of concentrated

design, and there’s something really appealing about

that process of creating one. Whether they’re detailed

or simplistic, conventional or creative, these iconshave one unifying property: they all grasp for people’s

attention within the same limited amount of space,

on a completely level playing field. It’s a specific

challenge, and the answer is always within those

same pixels.

There’s no doubt it can be intimidating to crown

your application with a singular piece of graphic

design, but I hope the tips I’ve outlined here will

make you more confident in taking on the challenge.

Now go forth and make a fantastic app icon!

Left An app icon needs to

work at multiple resolutions

retaining the legibility of the

concept across the range

of sizes

Right Icons can be detailed

or simplistic, just make

sure that they’re creative,

interesting and accurately

convey your intentions


Wor l d ags net




7/21/2019 net 2015-05


This all-new guide includes everything you need to do more with JavaScript, the programming language of the web.Through 27 practical projects, you’ll learn how to speed up both

Become a JavaScript master today!

ONSALENOW!

Available at all good newsagents and online at

netm.ag/javascript-265W o r l d M a g s . n e t W o r l d M a g s . n e t

Wor l d ags net




7/21/2019 net 2015-05


Web standards

may 2015 103

Most of us pay online with credit cards, stored

credit and more. Ecommerce is a gazillion-euro

(pound, rouble, yen ... ) industry. Many people don’t

use cash, and increasingly merchants don’t accept it.

The world is online. So what problems can W3C’s

Web Payment group (w3.org/Payments/IG) solve?

Payment online is often complicated, fragmented

and expensive. We manage multiple accounts, and

pay sometimes enormous fees for them. Accepting

money is often difficult, especially across currencies

and countries. Payment systems could be simpler,

more efficient and more accessible. We don’t know

which solutions will be adopted, but there are some

key points we clearly need to consider:

1. Simple technologyA solution must be simple to implement for users

and vendors. Increasing complexity decreases uptake;forgetting this means failure.

2. Costs, available services and competitionIf transactions cost 30 per cent, transferring funds is

unattractive and selling goods requires high margins

to be viable. Accepting credit cards costs money, and

has other requirements. Currency exchange can be

costly or risky for consumers or small merchants.

But handling money involves work. If the

process is unprofitable, few providers will bother,

in turn contributing to limited services and high

costs. Enabling merchants and buyers to easily

choose and change payment handlers will promote

competition on service and price.

3. Individual transfers matterCountries receiving significant remittances, or those

with a large informal economy, need person-to-

person transfers. Many current payment systems

make that difficult or expensive.

4. Law, security and privacyAlmost everyone worries about payment security.

Neither cash nor electronic systems are perfect, but

minimising the risk of fraud and theft matters to us

all. Security and tax services are designed to ensure

money is not being hidden or funding illegal activity.

People are increasingly concerned about privacy,

so bypassing legal controls won’t fly – but nor will

reporting requirements for kids buying sweets.

5. Getting the right players to the tableEnsuring proposals have a realistic probability of

adoption is a key challenge. There are some very big

players involved in the situation, with real outcomes

at stake. ‘Reducing costs’ sometimes means reducing

somebody’s income, and those ‘somebodies’ may

work actively against such changes. Picking the

changes that produce an overall increase in wealth,

by providing more or better-distributed business

value than they destroy is difficult. So is balancing

the sometimes competing goals of businesses,

governments and people’s varying understanding of

the ‘common interest’. There are no guarantees of

success, even with everyone cooperating.

THE DESTINATIONThere is plenty of work to be done before millions

of ‘unbanked’ people trade stocks or currencies,

governments collect appropriate taxes on the sale

of a small handmade doll, or you and I negotiatea price and buy that doll from the maker directly

online, without middlemen.

Some changes won’t happen, others will surprise

us. Shifting from cash to digital currencies has

complex, far-reaching consequences. But the game

is afoot …

WEB PAYMENTSChaals Nevile considers how to make the

shift from cash to digital currencies

Chaals (netm.ag/chaals-266 ) works in the CTO Office of Russian

search and web giant Yandex. He has worked on many different

web standards and is interested in how the web helps people P R O F I L E

ECOMMERCE


Wor l d ags net




7/21/2019 net 2015-05


PROJECTSD3

104

may 2015

Networks are everywhere, from the social

graphs of Facebook through to related artists

on Last.fm and Spotify. Conceptually, they’re pretty

simple – they just consist of nodes (representing

people or things) and links. But they can rapidly

become unwieldy as they increase in size.

One of the best ways to understand these

networks is through visualisation, where we’d

typically represent each node as a circle and draw

lines between linked nodes. However, if we’re

working with more than a few nodes and links,

we need to be pretty smart to figure out where

to position the nodes.

Luckily help is at hand with the powerful

visualisation library D3.js (d3js.org). D3 has a ‘force

layout’ component that is typically used for laying

out networks. We will use it in this tutorial to help

us visualise some ‘similar artist’ data from Last.fm.

Code samples are in a GitHub repo at netm.ag/D3git-

266, and you can start the tutorial by opening ‘index.

html’ and ‘main.js’ (intermediate versions are in

the numbered directories).

We will start by creating a very simple network

consisting of three nodes and two connections.

We’ll introduce D3’s force layout and explain how

it can be used to visualise our simple network.

We’ll then show how the layout can be configured

in order to change the behaviour of the visualisation.

Lastly, we’ll load in some similar artist data from

Last.fm and I’ll show you how to customise

the visualisation by setting the circle sizes

and adding some simple interaction.

ADDING THE NODES AND LINKS

Starting with ‘index.html’ from the Git repository,

let’s add an SVG element for our visualisation:

<svg width="1200" height="800"></svg>

CREATE VISUALISATIONSUSING NETWORK DATAPeter Cook shows ow w can use D3.js to v sual se

the complex relationships found in social networks

D3

ABOUT THE AUTHOR

PETER COOK

w: animateddata.co.uk

t: @animateddata

Job: Web developer

Areas of expertise: Full-stack web designand development, datavisualisation

q: What’s the worst

holiday you’ve everbeen on?a: Cold and wet summerholidays in the UK!

VIDEO

Peter Cook has createdan exclusive screencast

to go with this tutorial.Watch along at

netm.ag/d3vid-266


You’ll find all the files you

need for this tutorial at

netm.ag/D3git-266


Wor l d ags net



7/21/2019 net 2015-05


may 2015

105

D3

Now open ‘main.js’ and create some network data:

var nodes = [ {"name" : "Miles"}, {"name": "John"}, {"name":

"Thelonious"} ];

var links = [ {"source": 0, "target ": 1}, {"source": 0, "target":

2} ];

We’ve created two arrays: nodes , which contains

the nodes of our network, and links , which stores

connections between pairs of nodes. Each link is

made up of a source and target node. The integer

value refers to the index of the node within the nodes

array. Let’s add our nodes and links to the page:

function createNodes() {

d3.select('svg').selectAll('line')

.data(links)

.enter()

.append('line');

d3.select('svg').selectAll('circle')

.data(nodes)

.enter()

.append('circle')

.attr('r', 5);

}

createNodes();

Our function createNodes adds a line element for each

link and a circle element for each node. The nodes

haven’t been positioned yet, so they’ll appear as

partial circles in the top left of your browser window.

POSITIONING THE NODES

D3 provides a number of ‘layouts’. These are reusable

functions that take your data and transform it by

adding things like X and Y positions. For example,

the tree layout takes a nested JSON structure and

appends X and Y coordinates to each node so that

they’ll be laid out in a visually appealing way.

The force layout is a general-purpose algorithm

that positions nodes according to rules of physics.

For example, we could have a rule that says: ‘all

nodes are attracted to the centre of the container’

and another that says ‘every pair of unlinked nodes

repels one another’. The force layout works by

applying the physics rules repeatedly (an ‘iteration’),

until a steady state is achieved.

D3 provides a numberof ‘layouts’ – reusable

functions that take yourdata and transform it

One of the strengths of D3 is that it harnesses web

standards such as HTML, SVG, CSS and JavaScript, meaning

we can leverage the debugging tools found in modern browsers

such as Google Chrome. When learning D3 it can be disheartening

to be faced with a blank browser screen after sweating over some

precious lines of code. However, when this happens there are some

regular ports of call that can help us diagnose the problem.

The first is the DOM inspector. This will tell us whether our HTML

or SVG has actually been added to the DOM. In the case of SVG, the

positions and size of the nodes are defined by at tributes such as

X, Y, width and height. There could be a problem if these are missing

or if they’re set to values outside the bounds of the window.

If our HTML and SVG is all present and correct but we want

to check what data has been bound to an element, we can right-

click on the element and choose Inspect Element. If we then go

to the Properties pane and expand the element, we should see

a __data__ property.

This is a property added by D3 containing data that’s been

joined to the element. If we don’t see the __data__ property,

then something has gone wrong with our data join!

DEBUGGING D3

IN-DEPTH


Wor l d ags net



7/21/2019 net 2015-05


PROJECTSD3

106

may 2015

Let’s create our layout:

var forceLayout = d3.layout.force();

Here, D3 is creating a layout function for us, which

we’re assigning to the variable forceLayout . This

function is also configurable:

forceLayout.size([800, 600]).on('tick', update);

We’re setting the size of the layout and specifying

a callback function update . On each iteration the

physics rules are applied, X and Y coordinate values

are updated on the data property of each node, and

the callback function update is called:

function update() {

d3.select('svg').selectAll('circle')

.attr('cx', function(d) {return d.x;})

.attr('cy', function(d) {return d.y;});

d3.select('svg').selectAll('line')

.attr('x1', function(d) {return d.source.x;})

.attr('y1', function(d) {return d.source.y;})

.attr('x2', function(d) {return d.target.x;})

.attr('y2', function(d) {return d.target.y;});

}

This function updates the circle centres and line

endpoints based on the X and Y computed by the

layout. Our final piece of code tells the layout about

our nodes and links:

forceLayout.nodes(nodes).links(links);

We can now start the force layout:

forceLayout.start();

If you load the page, you should see the nodes and

links magically move into a sensible arrangement!

CONFIGURING THE FORCE LAYOUT

Now let’s configure the force layout. I find the two

most useful configuration settings are linkDistance

and charge . linkDistance sets a target distance for

linked nodes – typically you’ll want linked nodes to

be closer together. charge defines the charge (or force)

between every pair of nodes. The default setting is

‘-30’ but we can experiment with different values.

A negative value means the nodes repel one another,

while a positive value results in the nodes attracting

one another. Play around with this setting:

forceLayout.charge(-100);

In essence, a D3 layout is a function that takes your data and

does something to it – such as adding X and Y positions, or

in the case of hierarchical data, reducing it to arrays of nodes and

links. Layouts are responsible for some of the more impressive

visualisations seen on the D3 examples page (netm.ag/gallery-266 )

including circle packing (netm.ag/bubble-266 ), chord diagrams

(netm.ag/chord-266 ) and force-directed graphs (netm.ag/force-266 ).

In the simplest case a layout simply adds some useful positional

information to your data. For example, the pie layout (netm.ag/

pie-266 ) takes an array of data, computes start and end angles

for each pie segment and adds this to your data.

Layouts come into their own with more advanced structures

such as hierarchies and networks. There are several layouts for

dealing with hierarchical structures including tree, partition and

circle packing layouts.

Networks can be visualised using the force layout (as in

this article) or the chord layout, amongst others. The force

layout is in fact a general-purpose physics-based engine and

is behind a variety of visualisations including The New York Times ’

‘Four Ways to Slice Obama’s 2013 Budget Proposal’ (netm.ag/

budget-266 ).

D3 LAYOUTS

FOCUS ON

Exploring layouts D3 offers a ra nge of layout options that can be used to cr eate

all kinds of interesting visualisations


Wor l d ags net



7/21/2019 net 2015-05


may 2015

107

D3

There are lots of other configuration options, such

as gravity (for setting an central attractive focus)

and I encourage you to experiment with them.

LOADING REAL DATA

So far we’ve only visualised three nodes and frankly,

that’s not very interesting! So let’s load in some

real data. I’ve collected some data from Last.fm

and collated it into an array of nodes and an array

of links. Each node represents an artist:

[ {"listeners": 28889, "name": "Booker Ervin"}, ... ]

Each link represents that two artists are similar:

[ {"source": 4, "target": 6}, ... ]

I’ve put each of these arrays into a single JSON file

– ‘data/network.json’ – in the GitHub repository.

Let’s modify our ‘main.js’ so it loads in the data

using the function d3.json() :

d3.json('data/network.json', function(err, json) {

// all the existing code in here

});

You’ll need to be viewing your page from a

local server (such as MAMP, WAMP or Python’s

SimpleHTTPServer) for this to work. If you don’t have

a server set up, you can change the data file path

from ‘data/network.json’ to https://rawgit.com/prcweb/

d3networks-examples/master/data/network.json, which

will avoid CORS restrictions.

If you refresh your page you should now see

a network of jazz musicians linked by similarity.

SIZING THE NODES

Each node has two pieces of data on it: the artist’s

name and a listener count. It might make sense to

size the circles according to the number of l isteners so

that more popular artists appear as larger circles. We

can easily achieve this by defining a scale function to

map from the listener count into a radius value:

var radiusScale = d3.scale.sqrt( ).domain([0, 500000]).

range([0, 10]);

Similar artists Visualising

similar artist data gathered

from Last.fm’s API. Each

node represents an artist

and the links connect

similar artists

It might make senseto size the circles somore popular artistsappear as larger circles

We can then set the r attribute of the circles using

the .attr() function:

d3.select('svg')

...

.append('circle')

.attr('r', function(d) { return radiusScale(d.listeners); });

You’re seeing the power of D3 in this new piece of

code. When we create the circle elements, we ‘join’

the artist array to the circles, meaning each circle

element can access the particular artist’s data that

it represents. The .attr call will iterate through

each circle, invoking a callback which sets the radius

according to the listener count.

INTERACTION

At the moment, we don’t know which artist each

circle represents in our visualisation, so let’s add

some code to update an info box when the user

hovers over a circle. First add a simple div element

above the SVG element:

<div class="info">Hover over a circle for details</div>

Then in a similar manner to how we used .attr() , we

can use .on() to set up an event handler on each circle:

d3.select('svg') ...

.attr('r', function(d) { return radiusScale(d.listeners); })

.on('mouseover', function(d) { d3.select('.info').text(d.

name); });

After adding a bit more CSS, we’ve ended up with

a nice interactive jazz network explorer.

Now have a think about any networks you’re

interested in and have a go at visualising them

using the power of D3!


Wor l d ags net



7/21/2019 net 2015-05


PROJECTSGrunt

108

may 2015

In the not too distant future, robots will rule

the earth and we will relinquish control to

our mechanical overlords. However, while we still

have control of our computers, we can use them to

automate frontend web development tasks to make

our lives easier.

One of the many tools available to help with this

is called Grunt (gruntjs.com). Grunt is a task automator

written in JavaScript that can do a number of things

to speed up your development process. These include

running a simple http server, listening for file

changes and live reloading your browser, minifying

and compressing your JavaScript and compiling CSS

from a preprocessor. It can even go as far as building

out entire static websites based on JSON data and

Markdown files.

SETTING UP YOUR GRUNT PROJECT

In order to set up a new Grunt project, you must

first make sure you have npm – the Node.js package

manager – set up.

Start by creating a new project folder and typing

the following code:

$ echo "{}" > package.json$ npm install -g grunt --save-dev

$ touch Gruntfile.js

Open up Gruntfile.js and write:

module.exports = function(grunt) {

// Project configuration.

grunt.initConfig({

});

};

We’ll create a simple http server that will listen for

file changes while we work. We can set our browser

to LiveReload when we save files in our project.

$ npm insta ll grunt-contrib-watch --save-dev

$ npm insta ll grunt-contrib-connect --save-dev

$ echo 'Hello World!' > index.html

In ‘Gruntfile.js’, edit the grunt.initConfig() function

and add the following:

grunt.initConfig({ connect: {

server: {

options: {

open: true,

livereload: true

}

}

},

watch: {

}

});

Now, towards the bottom of ‘Gruntfile.js’ but before

the closing }); add:

// These plugins provide necessary tasks.

grunt.loadNpmTasks('grunt-contrib-watch');

grunt.loadNpmTasks('grunt-contrib-connect');

// Default Task.

grunt.registerTask('serve', ['connect','watch']);

Note that the server will only run if Grunt is running.

Therefore we run the watch task to not only watch

AUTOM E DEVELOPMENTK U IN UNT

Alex Newman explains how to use this handy task automator

to take care of repetitive frontend development tasks for you

GRUNT

SLIDE DECK

‘Hyper-optimizedworkflow’ is a greatpresentation frommy colleague JasonLengstorf on taskautomators beyondGrunt. Find it atnetm.ag/lengstorf-266

View source

f iles here!You’ll find the files you need forthis tutorial (plus some extras)

at netm.ag/grunt-266

ABOUT THE AUTHOR

ALEX NEWMAN

w: copterlabs.com

job: Co-owner,Copter Labs

t: @thedotmack

areas of expertise:Web and app designand development,creative consulting

q: what’s the worstholiday you’ve everbeen on?a: When I was a kid,my dad took me toa theme park calledSplendid China, whichwas a large replicaof China made out ofdetailed miniatures,with no rides


Wor l d ags net




7/21/2019 net 2015-05


may 2015

109

Grunt

The grunt-markdown plugin compiles Markdown files to

HTML for use in your project. In your terminal in the project ’s

root, type:

$ npm install grunt-markdown --save-dev

Add the following to the bottom of your ‘Gruntfile.js’ where you

have your grunt.loadNpmTasks functions listed:

grunt.loadNpmTasks('grunt-markdown');

Add this to the grunt.initConfig function:

markdown: {

all: {

files: [{

expand: true,

src: '*.md',

dest: '',

ext: '.html'

}]

}

},

Create a Markdown file called ‘index.md’ with the following content:

# Hello World

**Lorem ipsum dolor sit amet**

Run grunt serve at your project’s root and you’ll see the Markdown

compiled as index.html in your browser. You can also use a single

template with multiple Markdown files to roll your own simple

static site content generator.

More information on configuring grunt-markdown is available at

netm.ag/config-266 .

USING MARKDOWN FILES

IN-DEPTH

Streamlined development Grunt acts like an a ssembly line worker, taking

care of repetitive development ta sks so you don’t have to

for file changes, but also to keep the server alive.

You can now type grunt serve in your terminal and

a browser window will pop up and go to the URL

http://0.0.0.0:8000. Now we’re cooking with gas!

MINIFY YOUR JAVASCRIPT

You can use Grunt to compress your JavaScript

to serve smaller-sized files to your users.

Type the following into your terminal at

your project’s root:

$ npm install grunt-contrib-uglify --save-dev

At the bottom of your ‘Gruntfile.js’, where you have

your grunt.loadNpmTasks functions listed, add:

grunt.loadNpmTasks('grunt-contrib-uglify');

We now have to configure our settings. In the grunt.

initConfig function, in-between the last line of the

less configuration and the first line of the watch

configuration, add:

uglify: {

js: {

files: {

'assets/js/main.min.js': 'assets/js/main.js'

}

}

},

We run the watch taskto not only watch for to keep the server alive


Wor l d ags net



7/21/2019 net 2015-05


PROJECTSGrunt

110

may 2015

When you do this, be aware of your commas. Make

sure all properties at all levels of the configuration

tree are separated by , and check the last property

at that level of the tree doesn’t have a trailing comma.

If you mess up your commas, you’re going to have a

bad time.

COMPILING CSS FROM A PREPROCESSORGrunt is awesome for workflows involving CSS

preprocessors like LESS or Sass. The following is

an example of how to set up your project to compile

LESS files to CSS.

In your terminal in the project’s root, type:

$ npm insta ll grunt-contrib-less --save-dev

At the bottom of your ‘Gruntfile.js’, where you have

your grunt.loadNpmTasks functions listed, type:

$ grunt.loadNpmTasks('grunt-contrib-less');

Add this to the grunt.initConfig function, between the

last line of the uglify configuration and the first line

of the watch configuration:

less: {

style: {

files: {

'assets/css/main.min.css': 'assets/less/main.less'

}

}

},

AUTOPREFIXER TO THE RESCUEGrunt is also really handy for ensuring your code

stays future-friendly, as it gives you the freedom

to code without having to remember vendor prefixes

for new technologies.

In your terminal in the project’s root, type:

$ npm insta ll grunt-autoprefixer --save-dev

Add the following code to the bottom of your

Gruntfile.js, where you have your grunt.loadNpmTasks

functions listed:

$ grunt.loadNpmTasks('grunt-autoprefixer');

The following is a list of awesome plugins from the official

Grunt community site. Grunt is very well documented, so if

you visit gruntjs.com/plugins , you’ll find plenty more to explore.

contrib-uglify (netm.ag/uglify-266 ) – Minify files with UglifyJS

$ npm install grunt-contrib-uglify --save-dev

contrib-clean (netm.ag/clean-266 ) – Clean files and folders

$ npm install grunt-contrib-clean --save-dev

contrib-jshint (netm.ag/jshint-266 ) – Validate files with JSHint

$ npm install grunt-contrib-jshint --save-dev

contrib-copy (netm.ag/copy-266 ) – Copy files and folders

$ npm install grunt-contrib-copt --save-dev

contrib-watch (netm.ag/contrib-266 ) – Run predefined taskswhenever watched file patterns are added, changed or deleted

$ npm install grunt-contrib-watch --save-dev

contrib-concat (netm.ag/concat-266 ) – Concatenate files

$ npm install grunt-contrib-concat --save-dev

contrib-connect (netm.ag/connect-266 ) – Start a connect web server

$ npm install grunt-contrib-connect --save-dev

karma (netm.ag/karma-266 ) – Grunt plugin for karma test runner

$ npm install grunt-karma --save-dev

concurrent (netm.ag/concurrent-266 ) – Run Grunt tasks concurrently

$ npm install grunt-concurrent --save-dev

contrib-cssmin (netm.ag/cssmin-266 ) – Minify CSS

$ npm install grunt-contrib-cssmin --save-dev

TOP 10 GRUNT PLUGINS

FOCUS ON

Grunt’s watch taskallows you to listen for other tasks in response


Wor l d ags net



7/21/2019 net 2015-05


may 2015

111

Grunt

Add this to the grunt.initConfig function between the

last line of the less configuration and the first line

of the watch configuration:

autoprefixer: {

main: {

src: 'assets/css/main.min.css',

},

},

SETTING UP THE WATCH TASK

Grunt’s watch task allows you to listen for file

changes and run other tasks in response, as well

as LiveReloading your browser. Note that you have

to install the LiveReload (livereload.com) browser

plugin in order for this to work.

Now, add the following code inside your

watch configuration:

watch: {

js: {

files: [ 'assets/js/*.js' ],

tasks: [ 'uglify:js' ],

options: {

livereload: true,

}

},

css: {

files: [ 'assets/less/*.less' ],

tasks: [ 'less:style', 'autoprefixer:main' ],

options: {

livereload: true, }

},

}

BRINGING IT FULL CIRCLE

Let’s create some files to test our Grunt setup

with. Type the following into your terminal at

your project’s root:

$ mkdir -p assets/{js,css,less}

$ touch index.html assets/js/main.js assets/less/main.less

In ‘index.html’, write:

<html>

<head>

<title>G runt Tutorial Test</title>

<script src="assets/js/main.min.js"></script>

<link rel="stylesheet" href="assets/css/main.min.css">

</head>

<body>

<h1>Hello World!</h1>

<img src="http://www.pl acecage. com/330/330 ">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing

elit.</p>

</body>

</html>

In ‘main.js’, write:

alert('Welcome to my demo. I am an annoying alert box.')

In ‘main.less’, write:

@primary-color: red;

@background-color: lighten(yellow,25%);

body {

background: @background-color;

h1 { color: @primar y-color; }

}

Finally, edit your primary task at the bottom of

‘Gruntfile.js’ to the following:

grunt.registerTask('serve', ['uglify:js','less:style','autopre

fixer:main','connect','watch']);

Now type grunt serve in your terminal at your

project’s root. A browser window should pop up,

displaying your project. If you’ve typed everything

correctly, you will see Nicholas Cage’s glorious

likeness placed on a pastel yellow background

(see a souped-up demo at netm.ag/gruntdemo-266).

Congratulations! You’ve successfully automated

some awesome stuff, thus proving my point that

Grunt’s brand of magic is only trumped by fuzzy-

faced kittens perched upon flying zebra-unicorns.


Wor l d ags net



7/21/2019 net 2015-05


Graphic design Web design 3D Digital art

www.creativebloq.com

The number one

destination for web design news, views and how-tos.

Get CreativeBloq direct to

your inbox withour weeklyweb designnewsletter


Wor l d ags net




7/21/2019 net 2015-05



Wor l d ags net



7/21/2019 net 2015-05


114 may 2015

PROJECTSAccessibility

An online shopper goes to your site and finds

exactly what she wants, at the right price. She

presses enter on the checkout button. A modal dialog

displays a form to enter payment information. She

uses tab and shift-tab, but the modal dialog does

not take keyboard focus. In frustration, she notices

that the footer links in the main page below the

dialog are being highlighted and visibly focused one

by one. Lost sale.

What’s happening? The shopper represents

someone who can see, but cannot use a mouse.

She may be using a keyboard on a laptop, or a

wireless keyboard with a mobile device.

If you have to prioritise accessibility requirements,

the WCAG 2.0 Guideline 2.1 ‘Keyboard accessible:

Make all functionality available from a keyboard’

(netm.ag/guideline-266) is a top priority. People

with physical or motor disabilities use keyboard-

only devices, and/or assistive technology that

programmatically uses keystrokes such as sip andpuff straws, or single switches. Blind people using

screen readers also use a keyboard – not a mouse.

As a sighted, keyboard-only user I need to know

where I am (visible focus indicator) and be able to

use keyboard controls to navigate and complete

checkout. Test it yourself. If you are using browsers

on a Mac: configure full tab key navigation. Go

to a form or page on your site. Set the cursor in

the browser URL bar. Unplug your mouse, and

don’t use a touch pad.

Use tab and shift-tab to navigate focusable

elements: links, buttons and form fields

Use up/down arrows to change radio/checkboxes,

and space to select

Use Enter for submit buttons and to open links

Check:

Is the visible focus indicator present? Is it easy

to locate?

Does focus disappear for a while? Check for visibly

hidden content that should be hidden for all users

until the user activates it

Can all dynamic elements be accessed with

a keyboard? Check expand/collapse, modal dialogs,

and panels that slide in and out. For improvedexperience, manage focus: on close, go back to

where the user took action

Making sure your ecommerce site is keyboard

accessible helps many more people buy the way

they want, using their preferred technology.

ACCESSIBLE ECOMMERCECathy O’Connor walks through how to make your responsive

ecommerce website accessible to people who do not use a mouse

P R O F I L E

ACCESSIBILITY

Cathy (@cagocon) is the accessibility programme manager at

PayPal, working with product teams to help deliver innovative

products that as many people as possible can use


Wor l d ags net




7/21/2019 net 2015-05


NEW YORK 17 APRIL 2015

Learn responsive web design, user experience, CSS,the Internet of Things, how to present to clients and much more!

TICKETS ON SALE NOW

www.generateconf.com/new-york-2015

DAVE RUPERTLEAD DEVELOPER,

PARAVELdaverupert.com

IRENE PEREYRAUSER EXPERIENCE

DIRECTOR AND DESIGNERantonandirene.com

PAMELA PAVLISCAKFOUNDER,

CHANGE SCIENCESchangesciences.com

JONATHAN SNOOKLEAD FRONTEND DEVELOPER,

SHOPIFYsnook.ca


Wor l d ags net



7/21/2019 net 2015-05


PROJECTS

Design a mockupa responsive web

Build working s

Create a dynamibutton with CSS

Learn to designbetter app icons

Create visualisatusing network d

Automate fronttasks using Gru

Where ideastake shape.

www.shutterstock.com

Streamlined search • Fresh content added daily • Versatile pricing plans


Wor l d ags net



7/21/2019 net 2015-05


From the makers of

IN ASSOCIATION WITH

10 TIPS FOR DESIGNING GREAT ECOMMERCE EXPERIENCES

IMPROVE YOUR SIT E’S USABILITY

OPTIMISE YOUR STORE’S PERFORMANCE

GET STARTED WITH SHOPIFY THEMES


Wor l d ags net




7/21/2019 net 2015-05


2

ecommerce guide

ECOMMERCEWelcome

EDITOR’S NOTE

A NOTE FROM OUR PARTNER

CONTENTS WELCOME

Do you remember boo.com, the

fashion ‘e-tailer’ that famously

crashed and burned, making it one of

the greatest dot-com busts in history?

In the 15 years since then, ecommerce has

come a long way and learnt a lot from its

mistakes. Boo.com was behind the times

in its ‘usability’ – it was designed for 56K

modems and above – but today we know

how crucial good design, speedy loading

and well-considered user experience are

to an online store’s success.

In this special ecommerce guide, we

have gathered some of the industry’s

top experts to explain how to get

ecommerce right: Christian Holst from

Baymard Institute, which conducts large-

scale research studies on ecommerce

Today, Shopify powers more than

150,000 online stores. More and

more web designers are choosing Shopify

as their solution because of its easy-to-

use, theme-based system. This gives you

100 per cent design freedom, and offersmerchants all the tools they need to run

a successful business.

We are huge fans of web designers,

and we owe a lot of our success to your

support over the years. It’s for this reason

that we want to give back as much as

possible – whether it’s supporting design

conferences and meetups, sharing

usability (see facing page); Shopify’s

designer advocate Keir Whitaker;

Radware performance evangelist Tammy

Everts; and Gavin Ballard, a consulting

software developer and author of

Mastering Shopify Themes.

Take their advice to heart and you

will soon be well on your way to building

ecommerce sites that delight clients

and convert customers.

Oliver Lindberg

Editor, net magazine

creativebloq.com/net-magazine

insights on our blog, or with our generous

referral program. We want to give you all

the tools you need to succeed with us.

The ecommerce market is ready and

waiting for you to jump in, head-first.

This supplement will help you prepareto make that leap. Enjoy!

Harley Finkelstein

Chief platform officer, Shopify

DESIGN FANTASTIC

ECOMMERCE SITES 5

Keir Whitaker reveals his tips

for a top ecommerce experience

TACKLE PAGE BLOAT 12

Tammy Everts looks at four

main areas slowing down your

sites, and how to tackle them

GET STARTED WITH

SHOPIFY THEMES 16

Gavin Ballard shows you how

to build great Shopify themes

IN ASSOCIATION WITH


Wor l d ags net




7/21/2019 net 2015-05


ecommerce guide 3

Usability

Ecommerce has seen massive growth over

the past five years, and in the US alone online

sales have exceeded the $250 billion mark. However,

there are still major issues with usability that are

costing retailers millions of dollars in lost revenue.

One particular area that requires attention is the

process of exploring and locating products. Large-

scale ecommerce usability studies we’ve conducted

over the past five years at Baymard Institute show

that things like category navigation, on-site search

and the checkout process are still major roadblocks

(see baymard.com/research for more).

For example, despite assessing ecommerce sites

beyond the $100 million turnover mark, when users

were relying on the sites’ categories and filters, only

10 to 30 per cent could successfully find products

that matched basic purchasing criteria – such as a

sleeping bag for cold weather, a camera bag for their

digital camera, or a jacket for the spring season.

On-site search experiences reflect similar issues.

Among the top 50 US ecommerce sites, 70 per cent

of the search engines failed to return relevant results

for product type synonyms – for example, when

“hair dryer” was the term used by the site, a search

for “blow dryer” produced no results. It also showed

34 per cent of sites didn’t return useful results when

users searched for a model number, or misspelt the

product name by even a single character.

As well as tackling these structural aspects,

there are a host of specific interface details to get

right. While these elements may not hurt sales

much individually, collectively they will have an

impact. For mobile ecommerce sites alone there

are more than 70 interface details to tackle in the

checkout process alone – such as explicitly marking

optional and required fields (netm.ag/marking-266),

and aligning the back button behaviour with

user expectations (netm.ag/button-266).

Sometimes users may not even be able to

articulate the exact problem they’re experiencing,

but the more of these interruptive aspects there

are, the more likely it is that users will find your

site awkward or clunky. When designing and

implementing new ecommerce sites, paying close

attention to interface, layout and interaction details

is key to ensuring a great user experience.

A high performing ecommerce site requires

the prioritisation of these ‘unsexy’ topics. The

product category taxonomy needs to be solid,

the search logic should fully support the synonyms

users are entering, and the user’s flow needs to

be unhindered by interaction quirks. It doesn’t

matter how much time you spend on beautiful

design, product images and fancy campaigns, if you

don’t take the time to get these basic elements right,

the user’s experience will suffer.

BACK TO BASICSWhen it comes to ecommerce, the usability matters. Take time to perfect

search, navigation and interface design, says Christian Holst

P R O F I L E

USABILITY

Christian is the co-founder of Baymard Institute (baymard.com )

where he conducts large scale usability studies and benchmark

leading ecommerce sites


Wor l d ags net



7/21/2019 net 2015-05



Wor l d ags net



7/21/2019 net 2015-05


ecommerce guide

5

Special report

Despite being able to purchase

goods and services online

for many years, it’s only

recently that many of us

working in the web industry have been

able to offer ecommerce as a service to

our clients. Previously seen as expensive,

overly complicated and the domain of

large ‘boxed’ software producers, the

emergence of hosted, theme-based

platforms such as Shopify (shopify.com)

has levelled the playing field.

This, coupled with cost-effective

payment solutions like Stripe (stripe.

com) and Shopify Payments (shopify.co.uk/

payments), means it’s now possible for

an ‘evening and weekend’ web designer

to offer the same quality ecommerce

experience as a full-stack agency.

When it comes to creating an

ecommerce site, it’s fair to say that it’s

a very similar process to any web project.

However, as with any discipline, there

are a few things worth considering when

designing specifically for online selling.

Let’s have a look at some ways you can

enhance your ecommerce offerings.

1 SHOW ME THE PRODUCT

It’s worth remembering that our principle

goal as web designers is to help our

AUTHOR

KEIR WHITAKER

Keir works on the

platform team at

Shopify, and also

co-hosts regular

web industry-focused

podcast The Back to

Front Show

keirwhitaker.com

Keir Whitaker runs through the services, toolsand resources you need to set yourself apart when

it comes to attracting ecommerce clients

10 TIPS FOR DESIGNING GREAT

ECOMMERCE EXPERIENCES

clients sell their products. I’m sure

we’ve all visited online stores where the

company’s products appear to be the

least important element on the page. Put

simply, making the product (or products)

and its ‘Add to cart’ button the central

focus of a page layout is a very quick win.

Another thing to remember during

the prototyping stage is the product’s

associated textual information (title,

description and so on). Not all products

have the same length, or type, of

information associated with them.

For example, some might have a price

and description, where others might

have options such as different sizes

and colours. Spend some time testing

your product page design with varying

amounts of product information. Only

when you break the layout will you be

able to compensate with your design.

It’s also vital to make the buy button –

and for that matter the price – incredibly

clear. Buy buttons are also a great place to

test different micro-copy. Tools such as

Optimizely (optimizely.com) make testing

different variations a very easy process.

Finally, there are a few things to keep

in mind when creating clear navigation

into the various store categories. A

consistently placed link to the cart,


Wor l d ags net




7/21/2019 net 2015-05


ECOMMERCESpecial report

6

ecommerce guide

a running total of its contents, and a total

price (making it clear if this includes tax

and postage or not) will help customers

feel in control.

To further boost a customer’s trust

in an ecommerce store, it’s worth

considering factors including:

Clearly displaying contact details

Making shipping costs, taxes and

timescales for delivery very clear

Showing testimonials from happy

customers

I recently wrote an article exploring some

of these factors in detail. You can read the

full thing at netm.ag/trust-266.

2 PHOTOGRAPHY IS KINGWhilst not necessarily the natural

domain of a web designer, helping your

clients out by producing great product

photography is a natural add-on to

your service list. Product photos are

essential for providing potential buyers

with as close to an in-person shopping

experience as possible.

If you aren’t showcasing products at

their best, you are immediately putting

yourself at a major disadvantage. Online

customers don’t have the ability to see

your products in person. They can’t

touch it, try it on or ‘feel the quality’.

As well as standard product shots, it’s

worth considering ‘in situ’ or comparison

shots. For example, someone wearing a

T-shirt is arguably far more engaging

than a mocked-up graphic with a design

photoshopped on.

Another good idea is to showcase the

product in relation to other items, such

as a laptop or mobile device, giving a

quick visual guide to its size. Bellroy

(bellroy.com) does a great job of this with

its wallet range. It also makes great use

of video to showcase its products in use.

There are an increasing number of

photographers specialising in product

photography. While you might not do

this yourself, it’s worth thinking about

teaming up with a local photographer

and offering it as part of your service.

3 EXPLORE MOBILEAccording to a recent post by Jay Fiore

(netm.ag/fiore-266), nearly half of all

ecommerce sales will take place on a

mobile device by 2018:

“M-commerce, which accounted for a little

more than one quarter of total ecommerce

retail sales in 2014, will account for nearlyXXXXX XXX TXxxxxxxx

KNOW YOUR APPSMost hosted ecommerce platforms

now offer third-party integration via

an API. Having a good understanding

of what integrations are available for

your preferred platform will allow you

to offer a wider range of services.

Popular app categories include

shipping, digital product distribution

and management, reporting, and

integration with accounting packages.

Having a working knowledge of what’s

available on your preferred platform is

one way in which you can add value

onto a project. Being able to advise

your clients on the full ecommerce

life-cycle will allow you to further your

relationship – and revenues – post-

launch. Here are four apps I have used

and would recommend:

List Builder (sumome.com/app/list-

builder ) – A lightbox popover that

can be customised to appear after a

given amount of time. Alternatively,

you can use ‘smart mode’ to ask

visitors to subscribe when SumoMe

thinks they’re getting ready to leave

your website

Olark (netm.ag/olark-266 ) – A live

chat and analytics facility allowing

merchants to interact directly with

their merchants in real time

HelpScout (helpscout.net ) – An

elegantly simple help desk app

which is free for up to three users.

Third-party integrations allow you

to see customer data, such as order

history, when replying to enquiries

SendOwl (sendowl.com ) – A platform

that allows you to sell and distribute

digital goods easily. You can use it

on its own or with popular

ecommerce platforms

By providing a goodmix of relevant productnews, interesting links email newsletterswill lead to sales

Ecommerce master Today, Shopify powers over 150,000 stores across the globe

Know your apps The Shopify App Store

features over 600 apps


Wor l d ags net




7/21/2019 net 2015-05


ecommerce guide

7

Special report

half of all e-commerce sales in 2018. That’s

3x growth for m-commerce while non-

mobile ecommerce grows only 31 per cent

over the same period.”

Put simply, your ecommerce site needs to

work across all devices, today and in the

future. It needs to be built responsively.

Designing ecommerce sites poses a

number of challenges, especially when

catering to mobile devices. The good news

is that many great designers have paved

the way for us. We can draw inspiration

from big-name ‘e-tailers’ and companies

specialising in customisable themes

(themes.shopify.com), which are constantly

refining and testing their designs.

4 CONSIDER YOUR CAROUSELSFor many years now, off-the-shelf

themes have shipped with a product

carousel front and centre on the

homepage. However, recent studies

have shown that carousels are counter-

intuitive, as visitors simply don’t stay

on the homepage long enough to see

a full rotation of images. Additionally,

large images downloading over slow

mobile networks can lead to the customer

leaving in frustration before they have all

downloaded. Craig Tomlin wrote a very

interesting article (netm.ag/tomlin-266)

on how sliders are killing conversions

– definite food for thought.

In place of a slider you could feature

a number of your products on the

homepage. On the flip side, product detail

pages are a great place to consider using

a carousel. This is a common design

pattern found on mobile ecommerce

sites in particular. Kyle Peatt wrote up

his findings from his work at Mobify in

a fascinating article that you can read

at netm.ag/peatt-266.

5 DON’T REINVENT THE WHEELThe web is awash with toolkits and

frameworks to make the ecommerce

design process easier. Shopify maintains

a free, open source theme framework

called Timber (shopify.github.io/Timber )

that’s packed full of well-maintained

documented code as well as snippets for

all eventualities, including:

Pagination

Breadcrumbs

Newsletter sign-up form

Forms

Typography

Grids

The framework is built to be fully

responsive, too. To give it a try, open a

free Shopify Partner account (shopify.com/

net266) and you can create as many fully

functional ‘dev stores’ as you need.

6 TACKLE LIST-BUILDINGPermission-based marketing is a

great source of revenue. By providing

a good mix of relevant product news,

interesting links and regular offers,

Showing off Online shoe retailer Greats gets straight to the

point by displaying a grid of products on it s homepage

The mobile side On the Shopify platform, mobile

transactions now account for over half of all sales

Size matters Bellroy does a great job of showcasing the size of it s wallets in relation to it s likely contents


Wor l d ags net




7/21/2019 net 2015-05


ECOMMERCESpecial report

8

ecommerce guide

email newsletters will lead to sales.

Consequently, building an email list is a

good strategy for any online retailer.

Services like MailChimp (mailchimp.

com) don’t only make it ridiculously

easy to start building a list for free, but

they also provide excellent responsive

email templates that you can use or

customise. MailChimp also allows you

to track the success of email campaigns

via its ecommerce features. Free apps

such as MailChimp for Shopify (netm.ag/

chimp-266) make integration as simple as

pasting a form into your template.

7 GO AGAINST THE GRAINI am sure at times we have all been

frustrated by a pop-up when browsing

an online store. As annoying as they

might be, they are a proven tactic when it

comes to selling online. Serving primarily

as an email l ist-building tool, tests have

RESOURCESThere’s plenty to learn when it comes

to ecommerce, but thankfully there

are a lot of great resources including

insightful blogs, free apps to help

with list building, and open source

theme frameworks. Here are six to

get you started:

Ecommerce University (ecommerce.

shopify.com ) – Learn how to build,

launch and grow an online business

Learn how to build themes for

Shopify (netm.ag/themes-266 ) –

A three-part introduction to every

aspect of building a Shopify theme

SumoMe (sumome.com ) – A suite of

free tools to help you grow traffic

to your website and email list. Very

applicable to ecommerce

Shopify blog (shopify.com/blog ) –

All things ecommerce, including

trends, marketing, inspiration

and insights from successful

online merchants

Timber (shopify.github.io/Timber ) –

An open source responsive theme

framework for Shopify, which

includes design patterns applicable

to any ecommerce project

Transactional Email Templates

(netm.ag/email-266 ) – A great

collection of open source email

templates suitable for ecommerce

notifications from Lee Munroe

shown that pop-ups consistently drive

more email captures when compared to

a sidebar opt-in form. In fact, one test

showed that this approach was 1375 per

cent more effective (netm.ag/popup-266).

Whilst it may go against your every

instinct to implement a pop-up, it’s

worth considering – or at least testing.

8 REVEL IN THE DETAILMany online stores arguably follow a

similar look and feel – often with good

reason. Certain design patterns are

accepted and feel familiar to customers.

However, there’s still plenty of room

for design innovation when it comes to

ecommerce. Attention to detail will shine

through, and adding in a few ‘delighters’

will always impress. One great example is

the Good as Gold online store (goodasgold.

co.nz), which turns the brand logo into a

spinner during pageload.

Theme framework Timber is an open source Shopify theme framework featuring many

common ecommerce design patternsSupercharged receipts Receiptful is a new app that allows you to customise your

HTML notifications with ease

Email capture Best Made Company greets visitors with a newsletter sign-up on arrival


Wor l d ags net




7/21/2019 net 2015-05


ecommerce guide

9

Special report

but can easily be extended to include

information on related products, bricks-

and-mortar store opening times, how to

get in touch with the retailer and more.

Email templates are an often overlooked

element of the online retail experience.

These are another opportunity to set

yourself apart from other designers

working in the ecommerce space.

10 HEED THE 80/20 RULENo two clients are the same. Their needs

are all unique and it’s for this reason

that they could never use the platform

that you specialise in. Does this sound

familiar? I’ve certainly been in this

situation a few times.

Thankfully the ‘there’s an app for

that’ saying can be applied to the

ecommerce world too. For example,

There’s plenty of roomfor design innovation ...Attention to detail willshine through, andadding a few ‘delighters’will always impress

there are over 600 apps in the Shopify

Apps store – many of which solve very

niche problems. It’s worth familiarising

yourself with the app landscape. Knowing

what’s on offer will definitely help in

difficult meetings, where the client needs

that final 20 per cent of functionality.

For situations where an app really doesn’t

exist, it’s still possible to build your own

via an API integration.

TAKING THE CHALLENGEDesigning an ecommerce store can be

a very exciting challenge, as your input

as a designer will be required across

the board – from product photography

to selecting which apps to use, right

through to the layout of transactional

email templates. It also offers a numberof ways to set yourself apart from

other designers. By focusing on the

extra details, you can start to offer new

services to your clients and increase your

revenue streams.

2015 is set to be the biggest online sales

year ever and mobile is clearly going to

be leading the way. It’s a great time to

get started if you haven’t yet offered

ecommerce as a service.

The designers at Longboard Living

(longboardliving.com) have also added

some really nice features to their site.

Not only do they go to town on the size

of the images (the site looks great on

mobile and large screen), they also make

it possible to hide the menu, so users can

get even more skateboard on the page.

9 REMEMBER NOTIFICATIONSMost ecommerce platforms deliver

notifications via email. Offering bespoke

HTML and plain text email templates

for your clients is another service you

can add to your list. Abandoned cart

emails have proven especially effective

in persuading customers who have left

items ‘on the table’ to return and buy.

They are also a great place to introducecustomers to related products or even

an enticing discount.

HTML email templates can be time

consuming and hard to test across

numerous email clients. With this in

mind, I recently wrote an article that

outlines how to leverage open source and

fully tested transactional email templates

in a Shopify store (netm.ag/carts-266).

The examples I gave are pretty simple,

Moving backgrounds Clever use of background video separates Longboard Living from more traditional ecommerce stores


Wor l d ags net




7/21/2019 net 2015-05


Explore how you can use ecommerce platform Shopify

to create revenue streams for your business

GROW YOUR BUSINESS WITH SHOPIFY

PROMOTION

Running a web design business ishugely rewarding. Whether you work

on your own or are building up a smallagency, the freedom and benefits aremany and varied.

However, as organisations begin to bring‘digital’ in-house, the scope for new andfinancially beneficial projects is lessening.Even established freelancers are findingtoday’s market a challenge.

Luckily, there’s one area that has

experienced exponential growth inrecent years: ecommerce. Thousands ofweb designers are putting their HTML,CSS and JavaScript skills to use and arethriving, thanks to the huge demand forknowledgeable ecommerce designers.

Convinced? First you need to decidewhich ecommerce platform works for you.Here, we’ll focus on Shopify (shopify.com),a fully hosted ecommerce platform thatalso provides Shopify POS (point of sale)

for in-store payments, Shopify Mobilefor smartphone transactions, and ShopifyPayments to accept credit cards directly.

WORKING WITH SHOPIFY

Ben Crudo Consulting (bencrudo.com)focuses exclusively on Shopify projects,with about 50-60 per cent of contractscoming from the Experts marketplace(experts.shopify.com) – where Shopifysends its 140,000 merchants when they

need help with their store. The companyhas grown to a staff headcount of six,and that number will increase, accordingto founder Ben Crudo.

“Becoming a Shopify Expert helped putme on the Shopify map as a developer,”Crudo says. “I’ve found that with therobustness of the API and the flexibilityof the theme programming, in almostall cases I’m able to build an efficient,economical solution around Shopify.”

10

ecommerce guideW o r l d M a g s . n e t W o r l d M a g s . n e t

Wor l d ags net



7/21/2019 net 2015-05


Command C (commandc.com), a

design and development company in

New York, first encountered Shopify

when a merchant with a Shopify store

came to them looking for a redesign.

“We just dove in,” says senior project

manager Amanda Bernsohn. “It took

our developers about a day and a half

to get familiar with the API – it was

really fast.” Now, Command C works

with larger Shopify clients using the

Shopify Plus enterprise plan.

For Ottawa-based Fancy Boys

(thisisfancyboys.com), working with

Shopify has been a way to fortify

its reputation. “When Shopifycame about, it allowed us to provide

something as crucial as ecommerce

without all the fuss and muss that was

originally associated with that,” says

Fancy Boys’ creative director Martin

Gomez. “Shopify helped our company

accelerate our growth, client list and

reputation very quickly.”

San Francisco-based Stitch Labs

(stitchlabs.com) is an inventory

management software company that

sells its app in the Shopify App Store,

earning 80 per cent of every app sale.

“When we chose to work with

Shopify, it was very customer driven,”

says co-founder Jake Gasaway. “So

many people we were talking to were

using Shopify ... that was where it all

started.” Stitch Labs achieved massive

growth from Shopify and its other

endeavours, securing $3.5 million

in financing in 2013.

Developers can also create themes to

sell in Shopify’s theme store, receiving70 per cent of each sale. Although

the online design and development

landscape is shifting, numerous

opportunities exist in the ecommerce

space – from new entrepreneurs

looking for store builds, to existing

client upgrades and maintenance.

Ecommerce isn’t going anywhere.

Martin Gomez is the creative director of Ottawa-based digital agency Fancy Boys, and says Shopify giveshis company the edge it needs to compete with larger agencies

Shopify’s fully hosted,

customisable ecommerce

platform is used by

merchants worldwide.

Its free Partner Program

gives designers and developers

access to unlimited test stores

to play around with and use

to build client sites.

Further perks include prioritised

support, monthly revenue share,

marketing resources and glimpses

into Shopify’s roadmap.

Shopify themes are fully

customisable and built using

HTML, CSS and Shopify’s easy-to-

learn templating language Liquid.

If you’ve never worked with Liquid,

there are many tutorials to get

you started.

Shopify’s robust API also

makes it easy to integrate with

third-party apps.

WHY SHOPIFY?

“Shopify allowed us to provide somethingas crucial as ecommerce without all the fuss.It helped us accelerate our growth, client listand reputation very quickly” Martin Gomez, Fancy Boys

Join Shopify’s Partner community today: shopify.com/net266

IN NUMBERS

$4.7 million paid to app developers

$4.2 million paid to theme

developers

40,959 connections made between

merchants and Shopify Experts

A LOOK BACKAT 2014

FOCUS ON

ecommerce guide 11

Promotion


Wor l d ags net



7/21/2019 net 2015-05


12

ecommerce guide

ECOMMERCEPerformance

Three seconds. Case study after case study

indicates this is how long most visitors will wait

before they bounce if a page is not loading quickly

enough. It’s no coincidence that plenty of studies

show us that this is also the point at which business

metrics – from page views to revenue – begin to be

seriously hurt by slow page rendering. Whether your

goal is to convert browsers into buyers or to ensure

your advertisers’ content is seen by as many people

as possible, your eye should be on this three-second

target. However, looking at industry-leading sites

year-over-year for the past several years, the

opposite trend seems to be in place: pages are

actually getting slower.

At the end of 2014, the median rendering time of

the top 100 ecommerce pages (ranked according to

page traffic by Alexa.com) was 6.5 seconds for primary

content and 11.4 seconds for complete load (access

the full report at radware.com/fall-sotu2014 ). Only

12 per cent of the top 100 pages rendered feature

content in less than three seconds, while 22 per cent

took 10 seconds or longer to become interactive.

These are alarming numbers. When one in five

of the world’s leading online brands takes more

than 10 seconds to become usable, that’s a sign

something is fundamentally wrong with the waymodern web pages are being served to visitors. An

equally alarming finding is that the median top 100

page has significantly slowed down in just one year.

At the end of 2013, the median page took 5.3 seconds

to render feature content and 8.6 seconds to fully

load. In other words, the median top 100 page has

slowed down by more than 20 per cent in a mere

12 months. And if you find these numbers troubling,

consider this: the top 100 sites perform much better

than the rest of the web.

PAGESPEED AND BUSINESS METRICSWhy is the difference between 5.3 seconds and

6.5 seconds such a big deal? While a 1.2-second

slow-down may sound negligible, when it comes

to PageSpeed, every second counts. Walmart.com

found, for every second of load time improvement,

conversions increased by up to 2 per cent. At Staples,

one second of improvement increased conversions

by a staggering 10 per cent.

When I analyse individual pages, I encounter the

same four problem areas. If your goal is to improve

your page rendering speed (and I hope it is), these are

the problem areas you should scrutinise and fix first.

The good news is that there’s a lot of low-hanging

fruit here. Unless you’re already aggressively

optimising your pages, tackling these areas will

help you generate some performance wins.

1 IMAGESWith the advent of Retina displays, consumer

expectations of image quality have never been

greater. Yet with the overwhelming advent of

mobile usage, consumers expect those same

images to render quickly on their smartphones and

tablets. In order to remain competitive, site owners

must somehow miraculously meet consumers’

demand for large, high-resolution product images,

TA KLETammy Everts reveals four common problem areas you

should target to help speed up your ecommerce site

PERFORMANCE

RESOURCE

Tammy Everts has

written a blog postexploring the Radware

report referenced inthis article. Read it at

netm.ag/everts-266

ABOUT THE AUTHOR

TAMMY EVERTS

w: webperformancetoday.com

t: @tameverts

areas of expertise:web performance, userexperience, ecommerce

q: what’s the worstholiday you’ve everbeen on?a: A canoe trip deepin Algonquin Park,Canada – incessantthunderstorms anda malfunctioning tent

Images typically comprise between50 and 60 per cent ofa page’s total weight


Wor l d ags net




7/21/2019 net 2015-05


ecommerce guide 13

Performance

while at the same time ensuring those images

don’t clog the pipe to the user’s screen.

Images typically comprise between 50 and 60

per cent of a page’s total weight. In my research,

I found that the bulk of images on most sites are

not fully optimised for performance. For example,

when analysing the top 100 Alexa-ranked retail

sites, I found that 35 per cent of sites fail to compress

images, and only 13 per cent of sites got the top page-

speed score of ‘A’ for image compression. Image

compression is a basic optimisation technique,

yet many sites are missing out on it.

To make images render more efficiently, ensure

they are consolidated (also called ‘spriting’),

correctly sized and formatted. You should also ensure

you’re fully leveraging the browser cache and local

storage, which will help render times on subsequent

pages in a transaction, as well as return visits.

2 STYLESHEETSStylesheets are an incredible boon for modern

webpages. They solve a myriad of design problems,

from browser compatibility to design maintenance

and updating. Without stylesheets, we wouldn’t

have great things like responsive design.

When poorly executed, however, stylesheets can

create a host of performance problems. These range

from stylesheets that take too long to download and

parse, to improperly placed stylesheets that block

the rest of the page from rendering. Stylesheets

According to the HTTP Archive (httparchive.org ), the median

top 100 web page carries a payload of 1335KB (at time of

writing). One year ago, that number was 1022KB – the median top

100 page has ballooned by 30 per cent in just 12 months. If page

bloat is hurting desktop performance – which it certainly is – just

think of the pain it’s causing in the mobile arena.

Page size is just part of the problem. Page complexity is arguably

an even greater performance challenge than page size. In the 12

months between the last quar ter of 2013 and the last quarter of

2014, the median top 100 Alexa-ranked page grew its total number

of page resources by 21 per cent, from 87 to 106 resources.

Each of these resources represents an individual ser ver

call. Not only does each server call introduce an incremental

performance slowdown, it also increases the risk of page failure.

For example, poorly executed CSS can create a host of performance

problems, ranging from stylesheets that take too long to download

and parse to improperly placed CSS files that block the rest of the

page from rendering.

DECONSTRUCTING

‘PAGE BLOAT’

FOCUS ON

Resources 106 page resources means 106 potentia l points of failure for your page

Breakdown Every content type on the page, from images to Flash, has grown

Talking numbers In just one year, the median top 100 ecommerce page

slowed down by more than 20 per cent


Wor l d ags net




7/21/2019 net 2015-05


14

ecommerce guide

ECOMMERCEPerformance

should be placed in the document HEAD , which

allows the page to render progressively.

3 CUSTOM FONTSCustom fonts allow designers unprecedented

aesthetic control over the typefaces used in their

designs. This desire for control accounts for the

surge in popularity for custom fonts. In 2010, only

1 per cent of the top 1,000 websites used custom

fonts. Today, that number has grown to 45 per cent.

This popularity comes with a performance price

tag, as some fonts require huge amounts of CSS code,

while others have heavy JavaScript or are hosted

externally – all of which can dramatically slow

down page rendering.

4 THIRD-PARTY SCRIPTSThird-party scripts – such as those used for ads,

recommendations, analytics and tracking beacons

– offer a number of benefits, including increased ad

revenue, higher conversion rates and better visitor

data. These benefits explain the recent proliferation

of third-party scripts on ecommerce pages. In fact,

third-party calls can make up to 50 per cent – or

more – of a page’s total resource requests.

Cumulatively, these third-party requests can

have a huge impact on performance. Not only do

Hero image An unoptimised hero image on this reta il page takes more than si x seconds to render

CSS files Here, there are t hree CSS files that t ake between 5586ms to 7732ms to download. The page relies

on these files to define layout and st yles

Responsive design Both the CSS and JavaScript files for RWD resources are not only heavy (requiring upto 6528ms to download) they also block the rest of the page from rendering

these scripts increase page weight and latency,

they also represent the single greatest potential

point of failure for web pages. All it takes is one non-

responsive, unoptimised third-party script to take

down an entire site. Despite this, site creators often

neglect to measure the impact of third-party content

on a site’s usability.

The solution is to defer scripts so they load after

critical page content. If deferral is not an option

(as with some analytics tools and third-party

advertisers), then use an asynchronous version of

the script, which loads in parallel with the critical

content. You should always know which scripts are

live on your site, prune dead scripts, and monitor

third-party performance constantly.

FASTER NETWORKS AND DEVICESThe growth in size and complexity of pages present

critical web performance problems that can’t be

entirely mitigated by technological advancement.

In tech, we typically think about things getting

better, cheaper and faster. And in an ideal situation

– in which users have access to great hardware,

great networks and well-optimised pages – this is

definitely the case. However, most of us tend to focus

on this best-case scenario and ignore the fact that

worst-case scenarios are rampant on the web. Site

owners design their pages and apps with best-case

hardware and networks in mind, to the detriment

of every other technological use case.

Our use of the web today is highly situational.

In the past, we could expect a relatively consistent

user experience, as we used our desktop computers

on speedy local networks to browse somewhat

dynamic (but mostly static) pages that were hosted

on, at most, three or four different servers. Today,

we’re more likely to use mobile devices on congested

wireless networks to browse highly dynamic pages

stuffed with rich content and hosted on dozens of

different servers. Because of this, we’re seeing an

increase in sub-optimal user experiences.

While we can’t affect the end-user environment,

we do have a great deal of control over our pages.

Luckily, there are a wealth of opportunities to

optimise our pages so we can serve our visitors

the user experience they expect and deserve.

All it takes is oneunoptimised thirdparty script to takedown an entire site


Wor l d ags net




7/21/2019 net 2015-05


Terms & conditions: Prices and savings quoted are compared to buying full priced UK print and digital issues. You will receive13 issues in a year. If you are dissatisfied in any way you can write to us or call us to cancel your subscription at any time and we

will refund you for all un-mailed issues. Prices correct at point of print and subject to change.For full terms and conditions please visit: myfavm.ag/magterms . Offer ends 31 December 2015.

TWO SIMPLE WAYS TO SUBSCRIBE ONLINE: myfavouritemagazines.co.uk/NETSUBSPHONE: 0844 848 2852 AND QUOTE CODE: PRINT15, DIGITAL15 OR BUNDLE15

SUBSCRIBE TO NETGET THE NO.1 CHOICE FOR WEB DESIGNERS AND DEVELOPERS

DELIVERED TO YOUR DOOR, YOUR DEVICE, OR BOTH

Print edition delivered to your door, 13 issues in a one-year subscription,

iPad and iPhone edition download, Android edition download, Money-back guarantee

GREAT REASONS TO SUBSCRIBE

Your subscription will then continue at £32.49 every 6 months - saving 31% on the shop price and giving you an 83% discount on a digital subscription

SAVE UP TO

60%

FROM

£32.49BASED ON A 6-MONTH SUBSCRIPTION

NEW PRINT & DIGITAL EDITIONEnjoy a combined print and digital subscription,and take advantage of print as well as exploringthe fully interactive digital experience


Wor l d ags net







7/21/2019 net 2015-05


ECOMMERCEThemes

16

ecommerce guide

With over 140,000 stores currently running

on Shopify, there are plenty of opportunities

for developers looking to work with the platform.

In this article, I’ll give you an overview of what’s

involved in Shopify theme development, including

taking a look at the Liquid templating language,

showing you how to tweak an example theme,

and exploring the principles of theme design.

SETTING UP A DEVELOPMENT STOREBecause we need somewhere to preview our theme

designs as we work on them, the very first thing we

need to do is to create a ‘Development store’. These

stores have all of the functionality of real Shopify

stores (apart from accepting payments), so they’re

a good testing ground for us.

To create a development store, you need to be

part of the Shopify Partner Program. Registration

is free and you can sign up at shopify.com/partners.

Once you’re registered and logged in to your Partner

dashboard, open up the ‘Development stores’ tab

and hit ‘Create new’.

After the store has been created, you’ll be taken

to the administration dashboard, where you’ll see

a tab called Themes in the left-hand sidebar. Click

it and you’ll see your store has been set up with

a simple default theme named ‘Launchpad Star’.

SHOPIFY THEME STRUCTUREIn a real-world scenario, we’d have a copy of all

theme files on our desktop (checked in to Git or

another VCS), and perform our edits locally before

syncing them to our Shopify store. For the sake of

simplicity, we’ll be using Shopify’s web-based theme

editor, which gives us nice syntax highlighting

and supports revisions. It also does a good job of

GET TARTED WITH

PIFY THEMEShopify expert Gavin Ballard introduces the techniques you need

o build Shopify themes that impress clients and convert customers

THEMES

ABOUT THE AUTHOR

GAVIN BALLARD

w: discolabs.com

t: @gavinballard

job: Founding partner,Disco

areas of expertise:Full-stack development,Shopify

q: what’s the worst holiday

you’ve ever been on?a: My parents may readthis, so I’ll plead the Fifth!

RESOURCE

Interested in learningmore about Shopify

theme development?Check out Gavin

Ballard’s ‘MasteringShopify Themes’ course

at gavinballard.com/mst


The files for this tutorial can

be found at netm.ag/shop-266

and you can watch a demo

atnetm.ag/demo-266


Wor l d ags net




7/21/2019 net 2015-05


ecommerce guide

17

Themes

conveying the directory structure that all Shopify

themes share.

Open up the web editor by clicking the … button

on the default theme and then selecting ‘Edit HTML/

CSS’. Once the editor loads, you’ll see that Shopify

theme files are organised into six directories, each

with a specific purpose.

LayoutsThese serve as the ‘base template’ for all the pages

in your theme, and as such contain all the HTML

common to every page (for example, the <head>

section). Most themes only require the single default

layout, which is called theme.liquid .

TemplatesThese contain the HTML structure for the different

types of pages in your theme. For example, product.

liquid is used for your product pages, while index.liquid

is used for your homepage and article.liquid is used

for blog articles. You can create variations of each

template type – for example, article.photo.liquid for

photo-based posts and article.video.liquid for video-

based posts.

SnippetsThese are small pieces of HTML code that you can

use in different places around your site. Extracting

a common piece of code (such as the markup for

a pagination widget) lets you include it in those

different places without duplicating your code.

AssetsThese include all of the static assets you’d like to

use with your theme, such as images, stylesheets

and JavaScripts. Shopify has built-in support for

Sass stylesheets, so if you’re a Sass aficionado you

can simply save files with a .scss extension directly

in your theme. Assets are served from Shopify’s

CDN automatically.

ConfigsConfigs is a directory containing specifications for

theme settings, which enable theme designers to

give store owners a way to tweak some aspects of

the appearance of their themes themselves.

Having the right tools on hand can make theme development

much easier. Here are some of the tools you need to know:

IDEShopify’s web-based code editor has had a facelift recently, but it’s

still no match for a specialised development environment. You can

use whatever editor you’re comfortable with – don’t forget to check

it has a plugin or extension that supports Liquid templates.

REVISION CONTROLEven if you’re not collaborating with others on your theme, using

Git or Mercurial is a no-brainer for keeping your projects organised.

It’s also a prerequisite for some deployment tools.

GRUNTTask runners like Grunt are super-useful when building themes,

as you can automate tasks like image and asset optimisation before

pushing your theme live. I also like to use Grunt to automate the

packaging of my themes for distribution as a Zip file, and to ‘watch’

my source files and automatically push changes to Shopify as I’m

working. Check out netm.ag/scaffold-266 for an example Grunt set-

up specifically for Shopify themes.

SHOPIFY THEME RUBY GEMThis handy little utility watches your theme files for changes and

automatically uploads them to Shopify. This is especially important

as there’s currently no way to preview and develop your themes

locally. A simpler, more cross-platform tool for this – Phoenix

– is in the works at the time of writing.

DEPLOYMENT TOOLSDeploying Shopify themes to live and test stores has been a pain

point for a while, and it’s only recently that a few players have

stepped in with some solutions. Beanstalk (beanstalkapp.com/

shopify ) and dploy.io (dploy.io ) both allow manual and automated

deployment of your themes from a Git repository.

TOOLBOX

FOCUS ON

Beanstalk This app takes the pain out of deploying your Shopify theme

Shopify’s web-basedtheme editor gives usnice syntax highlightingand supports revisions


Wor l d ags net



7/21/2019 net 2015-05


ECOMMERCEThemes

18

ecommerce guide

Locales

Locales are JSON-formatted translation files for

all the different locales your theme may support.

You’re not required to provide translations for

multiple languages with your theme, but it’s a good

idea to make sure your theme supports possible

future internationalisation.

WHAT’S THIS LIQUID THING?Looking at the structure of the theme in the web

editor, you’ve probably noticed that lots of the files

end with a .liquid extension. Liquid is an open source

template markup language created by Shopify.

Because of its nature (simple, secure and stateless),

it’s a good fit for supporting dynamic content, logic

and inclusion within theme templates, without

sacrificing security or performance.

Like most HTML template languages that you

might be familiar with (such as PHP or Ruby’s ERB),

we use Liquid by inserting special tags into regular

HTML markup. Whereas PHP and ERB use tags that

look like <?php ... ?> and <% ... %> respectively, Liquid

uses tags that look like {% ... %} (control tags) and

{{ ... }} (output tags).

The Liquid code to render a list of the products

inside a product collection might look like this:

{% if collection.products.size > 0 %}

{% for product in collection.products %}

<a href="{{ product.url }}">{{ product.title | upcase }}</

a><br />

{% endfor %}

{% else %}No products in collection!{% endif %}

We can see from this example that Liquid gives us

the ability to:

Write conditional statements like {% if ... endif %}

Iterate over lists with {% for ... endfor %}

Output content with {{ ... }}

Apply filters to output like | upcase

Access variable objects that Shopify provides

to our templates, like collection

Shopify’s documentation (docs.shopify.com/themes)

is an excellent resource if you’d like to learn more.

Let’s dive in and see Liquid in action by making

some improvements to our default theme.

LIQUID IN PRACTICEWhen developing a store, it’s useful to have some

sample products and data loaded so you get a better

sense for what visitors will be seeing. So, if you

haven’t already, jump into the ‘Products’ section

of your store admin and create some products.

These are features that – for bet ter or worse – you’ll see

being requested again and again by clients.

CAROUSELSClients love carousels almost as much as de signers love to hate

them. For usability reasons, I recommend opting for an alternative

presentation method, but if for some reaso n you’re stuck with a

carousel in your design, make it ‘less bad’ by:

Using high-quality images

Using text labels instead of icons for navigation between slides

Not automatically animating slides

Making slides accessible with WAI-ARIA attributes

NEWSLETTER POP-UPSPersonally, I detest pop-ups demanding my email address and

obscuring page content. Unfortunately for me, the data shows that

in-your-face pop-ups are pretty effective at driving email signups.

To try to hit the right balance between useful and annoying:

Make a clear value proposition. ‘Subscriber s get 15% off, join

now!’ is better than ‘Subscribe’

Ask at the right time – after a period of time or percentage

of site scrolled, not the second visitors land on your site

Measure results holistically – check you’re not killing your

conversion rates for the sake of more email addresses

LIGHTBOXESHigh quality product photography is absolutely essential in

ecommerce, so it’s a common pattern to give a closer look at your

sexy product s through a lightbox widget. If you’re implementing

one, remember to:

Use progressive enhancement and don’t leave things broken

for NoScript or mobile users

Ensure it’s keyboard accessible

Avoid breaking the user’s flow and interrupting their purchase

3 POPULAR FEATURES

IN-DEPTH


Wor l d ags net




7/21/2019 net 2015-05


ecommerce guide

19

Themes

Note that the GitHub repository for this tutorial

(netm.ag/shop-266) has some sample products you

can import to get testing quickly. It also contains

copies of the theme files, and its commit history

follows this tutorial.

We’re going to make changes to the cart page.

To properly test this, we need to visit the page for

one of the products we’ve created, add it to the cart,

and then navigate to the /cart page in our store.

My first thoughts when looking at this cart page

are to remove the ‘Special instructions’ text area

(not really necessary for a store selling magazines,

is it?) as well as the ‘Update’ button on the right-

hand side (its purpose is a little unclear). Both of

these elements also currently take the focus away

from the main action we really want the user to take

– clicking ‘Checkout’.

To make this change, open templates/cart.liquid

in the web editor. You’ll see the HTML markup

for the cart page. Near the bottom of the file,

you should see <textarea id="note"> and then a

little further on, <input id="update-cart"> . You can

remove them from the template by simply deleting

them, or by wrapping them between {% comment %}

and {% endcomment %} tags.

Next, we’re going to add something to the

cart page – a small list of products that the customer

might also like to purchase. We’ll start by replacing

the contents of the <div> that held the special

instructions text area, with the following markup:

<label>Other issues you might be interested in:</label>

<ul>{% for product in collections.frontpage.products %}

{% include 'upsell-product' with product %}

{% endfor %}</ul>

As you can see, we add the markup for an unordered

list, then iterate through each product in the default

‘Frontpage’ collection (referenced by collections.

frontpage ). We then use {% include ... %} to include

a snippet to render each product, passing the current

product using the with keyword.

The snippet we’ve just referenced doesn’t exist

yet, so let’s create it. Open the ‘Snippets’ folder

in the web editor and click Add new snippet… . Name

it ‘upsell-product’, then add the following code:

<li><a href="{{ upsell-product.url }}">

<img src="{{ upsell-product.featured_image | product_img_

url: 'icon' }}" />

{{ upsell-product.title | escape }}

</a></li>

Notice that inside the snippet, we refer to the product

variable that was passed with the {% include %} tag by

the name of the snippet. The product_img_url filter is

applied to the main (‘featured’) image for the product

to return a URL to an appropriately-sized image. The

escape filter should be applied to any user-generated

content, like a product title.

Note that there are some improvements we could

make to this code, like hiding products already in the

cart and making them addable directly from the list.

See the GitHub repository for an implementation.

THEME DESIGN PRINCIPLESOnce you start to get the hang of it, you’ll find

that working with Shopify themes is pretty

straightforward, especially if you have some prior

experience with web development. Here’s a bit of

advice to bear in mind as you go on to build your

own themes.

First off, keep your pages, concepts and code

simple and well-organised. Shopify and Liquid

have constraints; work within them instead of

trying to be too clever. This will help you avoid

any maintenance nightmares.

Secondly, all calls to action (like ‘Add to cart’and ‘Check out’) should be prominent and accessible.

Ensure that every action a visitor takes brings them

closer to the sale.

Finally, never underestimate the power of user

testing. Get friends, family and co-workers to sit

down in front of your theme, sight unseen, to try

to buy something. A word of warning: this process

is often soul-crushingly disheartening, as you end

up throwing away half of your ‘features’ – but you

will end up with a better theme as a result.

Cart page The default cartpage (left) and the samepage after our templatemodifications (right)

Shopify and Liquidhave constraints; workwithin them instead oftrying to be too clever


Wor l d ags net



7/21/2019 net 2015-05


From the makers of

Wor l d ags net



net 2015-05

Documents

Transcript of net 2015-05