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
http://slidepdf.com/reader/full/net-2015-05 2/136
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 3/136
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
@oliverlindberg
WIN! AN APPLEWATCH
For full detailsturn t0 p57
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 4/136
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).
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 5/136
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 6/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 7/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 8/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 9/136
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 10/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 11/136
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.
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 12/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 13/136
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
http://slidepdf.com/reader/full/net-2015-05 14/136
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 15/136
may 2015
15
People, projects& paraphernalia
THIS MONTH FEATURING...
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 16/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 17/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 18/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 19/136
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 20/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 21/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 22/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 23/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 24/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 25/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 26/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 27/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 28/136
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
http://slidepdf.com/reader/full/net-2015-05 29/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 30/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 31/136
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 32/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 33/136
may 2015
33
Interview
INF
job: Web design
w: airbagindustries.c
t: @Brilliantcra
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 34/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 35/136
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”
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 36/136
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”
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 37/136
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 38/136
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.
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 39/136
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.
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 40/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 41/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 42/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 43/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 44/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 45/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 46/136
GALLERYInspirational sites
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 47/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 48/136
GALLERYInspirational sites
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 49/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 50/136
GALLERYInspirational sites
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 51/136
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 52/136
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
THIS MONTH FEATURING...
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...
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 53/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 54/136
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.
Which sites have you
visited for inspiration?
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 55/136
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!
Which sites have you
visited for inspiration?
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 56/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 57/136
#1
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 58/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 59/136
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!
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 60/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 61/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 62/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 63/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 64/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 65/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 66/136
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.
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 67/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 68/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 69/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 70/136
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 …
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 71/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 72/136
72
may 2015
FEATURESCover feature
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 73/136
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 within 28 days of completion 28%
Payment within 7 days of completion 23%
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 74/136
74
may 2015
FEATURESCover feature
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?
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 75/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 76/136
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 77/136
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).
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 78/136
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.
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 79/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 80/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 81/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 82/136
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 83/136
may 2015
0
0
0
0
0
Mobile/tablet
0
0
0
0
0
Desktop
Tips, tricks& techniques
THIS MONTH FEATURING...
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.
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 84/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 85/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 86/136
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">
<!-- main-conte nt -->
</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">
<!-- main content -->
<div class="grid -block">
<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">
<!-- our feed -->
</div>
</div>
<div class="grid -block shrink">
<!-- our navigation- ->
</div>
</div>
As our block is vertical, we can stack our content
and navigation on top of each other. Here, we have
added a panel into our app using zf-panel – the F4A
Panel Directive – and given it the position it will
animate from.
Next let’s add our content blocks in cards:
<div class="grid-block vertical">
<!-- main content -->
<div class="grid -block">
<div zf-panel positio n="left" id="info">
...
</div>
<div class="small-12 grid-c ontent feeds">
<div class="grid- block small-up-1">
<div class="grid- content">
<div class="card">
<div class="card-se ction">
<h4>This is a title< /h4>
<p>This is really great arti cle content. It’s not
dynamic now, but could be later.</p>
</div> </div>
</div>
<!-- more cards -->
</div>
</div>
</div>
<div class="grid -block shrink">
<!-- our navigation- ->
</div>
</div>
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 87/136
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 vertical">
<!-- main content -->
<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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 88/136
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">
<!-- main content -->
<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 class="menu-bar icon-top dark">
...
</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.
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 89/136
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.
<!-- main content -->
<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.
<ul class="menu-bar icon-top dark">
<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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 90/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 91/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 92/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 93/136
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.
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 94/136
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
View sourcefiles here!
All the files you need for
this tutorial can be found at
netm.ag/CSScode-266
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 95/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 96/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 97/136
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 98/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 99/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 100/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 101/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 102/136
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
http://slidepdf.com/reader/full/net-2015-05 103/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 104/136
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
View sourcefiles here!
You’ll find all the files you
need for this tutorial at
netm.ag/D3git-266
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 105/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 106/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 107/136
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!
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 108/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 109/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 110/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 111/136
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.
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 112/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 113/136
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 114/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 115/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 116/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 117/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 118/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 119/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 120/136
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 121/136
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,
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 122/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 123/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 124/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 125/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 126/136
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
http://slidepdf.com/reader/full/net-2015-05 127/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 128/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 129/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 130/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 131/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 132/136
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
View sourcefiles here!
The files for this tutorial can
be found at netm.ag/shop-266
and you can watch a demo
atnetm.ag/demo-266
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 133/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 134/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 135/136
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
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
7/21/2019 net 2015-05
http://slidepdf.com/reader/full/net-2015-05 136/136
From the makers of
Wor l d ags net