The voice of web design
Issue 266 : May 2015 : net.creativebloq.com
Project
Create app layouts with Foundation for Apps
Welcome
win!
Welcome
editor’s note
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
an apple watch For full details turn t0 p57
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 oliver.lindberg@futurenet.com @oliverlindberg
Featured authors Cole Henle y
Seb Lee-Delisle
Vasilis Van Gemert
Viviana Doctorovich
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
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
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
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
may 2015 3
@netmag
Future PLC, Quay House, The Ambury, Bath, BA1 1UA +44 (0)1225 442244 /netmag +netmagazine flickr.com/photos/netmag netmag@futurenet.com
net.creativebloq.com
Editorial
Editor Oliver Lindberg oliver.lindberg@futurenet.com, Production editor Ruth Hamilton ruth.hamilton@futurenet.com, Art editor Mike Brennan mike.brennan@futurenet.com, Designer Rich Carter richard.carter@futurenet.com, Commissioning editor Martin Cooper martin.cooper@futurenet.com, Commissioning editor Julia Sagar julia.sagar@futurenet.com, Staff writer Sammy Maine sammy.maine@futurenet.com, Staff writer Alice Pattillo alice.pattillo@futurenet.com
Editorial contributions
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 Stanton, Nick Swan, Megan Williams, Leon de Wit
Art contributions Ben O’Brien, Tobias Hall, Ben Mounsey, Chloe Wright
management
Content and marketing director Nial Ferguson nial.ferguson@futurenet.com Head of content & marketing, photography, creative and design Matthew Pierce matthew.pierce@futurenet.com Group editor-in-chief Dan Oliver dan.oliver@futurenet.com, Group art director Rodney Dive rodney.dive@futurenet.com
Advertising Advertising sales director Suzanne Smith suzanne.smith@futurenet.com Circulation Trade marketing manager Juliette Winyard juliette.winyard@futurenet.com Production Production controller Nola Cokely nola.cokely@futurenet.com Production manager Mark Constance mark.constance@futurenet.com
Licensing International director Regina Erak regina.erak@futurenet.com Subscriptions Phone our UK hotline 0844 848 2852; international +44 (0)1604 251 045 Subscribe to net online at myfavouritemagazines.co.uk
NEXT ISSUE ON SALE 16 April 2015 All contents copyright © 2015 Future Publishing Limited or published under licence. All rights reserved. No part of this magazine may be reproduced, stored, transmitted or used in any way without the prior written permission of the publisher. Future Publishing Limited (company number 2008885) is registered in England and Wales. Registered office: Registered office: Quay House, The Ambury, Bath, BA1 1UA. All information contained in this publication is for information only and is, as far as we are aware, correct at the time of going to press. Future cannot accept any responsibility for errors or inaccuracies in such information. You are advised to contact manufacturers and retailers directly with regard to the price and other details of products or services referred to in this publication. Apps and websites mentioned in this publication are not under our control. We are not responsible for their contents or any changes or updates to them. If you submit unsolicited material to us, you automatically grant Future a licence to publish your submission in whole or in part in all editions of the magazine, including licensed editions worldwide and in any physical or digital format throughout the world. Any material you submit is sent at your risk and, although every care is taken, neither Future nor its employees, agents or subcontractors shall be liable for loss or damage.
We are committed to only using magazine paper which is derived from well managed, certified forestry and chlorine-free manufacture. Future Publishing and its paper suppliers have been independently certified in accordance with the rules of the FSC (Forest Stewardship Council).
Colophon 4
may 2015
Apps used
Google Docs, Dropbox, InDesign, Skype, Illustrator, FutureSource, Photoshop, Future Folio
paper
COVER PaceSetter Gloss 250gsm P3-82 Galerie Fine 100gsm P83-114 Grapholvent 70gsm
Typefaces
Antonio, Share Tech, Merriweather, Titillium Web
contents
win!
an apple watch For full details turn t0 p57
Issue 266 : May 2015 : net.creativebloq.com
FEED
FEED
SIDE PROJECT of the month 16
Guy Moorhouse taught himself animation to create GIF project Mooooooving
clients from hell
17
BEYOND PIXELS
20
NEED list
21
EVENT report
23
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
One developer chronicles his best/worst exchanges with a self-absorbed customer
Megan Williams considers the similarities between lean UX and roller derby
Web stuff we want, including a hipster business guide and a beautiful print mag
Ruth Hamilton reports on the goings-on at Reasons to be Creative’s London event
voices start charging
In-house design teams can be undervalued. Paul Boag offers a solution
26 VOICES
The reality of magic design 28
Vasilis van Gemert fights to reintroduce engineers into the creative process
Big Question
38
Q&A
40
How do you manage your cashflow? Seven web experts share their tips and tricks
Vivaldi designer Alte Mo gives the lowdown 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
6
may 2015
INTERVIEW
32
Web designer and natural businessman Greg Storey shares his thoughts on remote working, starting again and life after Happy Cog
SUBSCRIBE to net and save up to 60%
Take advantage of the New Print and digital Bundle Turn to page 24 to find out more
Contents regular
GALLERY
44
Nathan Ford showcases his favourite online offerings, including quirky news site The Public Domain Review
regulars Network
8
Exchange
10
The latest mail, tweets, posts and rants
Andy Budd, Nick Swan, Dan Mall and Rachel Andrew share their advice
Showcase design Challenge
52
Focus on
56
profile
58
how we built
64
Three designers mock up ferry sites
Gene Crawford on the perfect sign-up page
We catch up with thoughtbot‘s thinkers
RetroFuzz’s ecommerce site for Wrangler
PROJECTS Prototype a web app
84
Tackle CSS 3D
94
Head to head
96
Design better app icons
98
Brandon Arnold on how to mock up a responsive app using Foundation for Apps
Features How to get paid more
Leon de Wit explains how to render a button in space using CSS 3D
Get started 68 with hardware 76
It can be tricky to turn your passion into money. Cole Henley looks at how we can become more profitable
With the Internet of Things causing a stir, Seb Lee-Delisle explains how to turn your hand to hardware
Xero versus FreeAgent
Michael Flarup shares some tips for designing memorable, apt app icons
web standards
Project
Build working sites quickly with Webflow 90
Julian Shapiro walks through how to use Webflow to build a production-ready site
Exclusive video tutorials! Look out for the video icon in the tutorials for exclusive screencasts created by the authors
103
Chaals Nevile considers digital currencies
Create data visualisations 104
Peter Cook shows you how to use D3.js to represent data from social networks
Automate dev tasks
108
Accessibility
114
Alex Newman explains how Grunt can take care of repetitive development tasks
Cathy O’Connor on accessible ecommerce
may 2015 7
Mail, tweets, posts and rants contact us
@netmag
/netmag
+netmagazine
tutorial, since it’s becoming a major player in the JavaScript framework war.
Clint Milner, Colorado, US
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 sorry to 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
8
may 2015
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 more control 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
netmag@futurenet.com
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.
net.creativebloq.com
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 we need to be more supportive of our digital project managers
Network THE POLL
what are the top business headaches for studios? None – we’ve having a great time 10% The industry is booming and we’re surfing the wave!
Increased competition 23% There are so many firms out there competing for the same jobs
Internal teams 3% We’re seeing clients building their own in-house teams
DIY tools 15% Are design tools becoming so good that clients can make their own sites?
Getting paid by customers 15% Customers expect very long payment terms
Uncertainty 9% The economy is still iffy and clients aren’t committing to longterm jobs
Finding funding 4% Banks just aren’t willing to lend to small businesses
Finding the right staff 21% It’s so hard to find skilled designers and devs
From our timeline
As freelancers, how do you combat clients who are reluctant to pay? I put salt in their coffee till they pay up. @mikeycattell Tell them I’m going to use the design for a different, well known client @gluszczenko Track down the accounts person. Buy them something nice. @matvenn
Blowtorch and a pair of pliers? #marselluswallace @thepixelgrid Explain to them the Peter Blunt System. Caddyshack 2: netm.ag/ caddyshack-266 @submagma I send them a picture of my Louisville Slugger baseball bat @martinbean
I pray all the time :) @snolanuk Threaten to take down the site ;) @amerz pic.twitter.com/ pfpddpvaGU @john_shepherd Offer to sell the copyright to their competitors. @BenjieMoss
COOL Stuff We learned This month Not so switched on
We’re tech-savvy and so are our users, right? They’re connected, online, cloud-enabled ... or maybe not. Mozilla recently did some research into how people share, store and revisit content. It seems although users are aware of new tech, they tend to prefer their tried-and-tested friends. netm.ag/mozilla-266 AI plays like a boss
Winning at Atari’s classic Space Invaders requires great intelligence ... of the artificial kind. Google’s leading AI boffins have built a learning algorithm that has cracked most, but not all, of Atari’s classic games. The system has, through understanding how the games award scores, taught itself to be a human-pwning player. netm.ag/atari-266 Who needs designers?
In other AI news, computers are eyeing up designers’ jobs too. Sagmeister & Walsh and computer scientist Donald Knuth have dabbled with programmatically directed design, be it logos or typefaces. As designers embrace code, this trend in maths-driven crayoning could be on the rise. netm.ag/AIdesign-266
may 2015 9
Send your questions to netmag@futurenet.com this month featuring... Andy Budd UX designer and Clearleft partner Andy curates dConstruct w: clearleft.com t: @AndyBudd
Practical advice from industry experts
QUESTION OF THE MONTH
How do you create valuable long-term revenue products in web design? Tim Vogt, Zwolle, NL
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
Mint products Mint Digital starts new companies around products it has incubated internally
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. 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
10
may 2015
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
Q&As
3 simple steps How do you stand out from 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.
Reading around VATMOSS is a complex issue. Find out more in Rachel Andrew’s post on the topic for Webdesigner Depot (netm.ag/andrew-266) or on her own site (netm.ag/andrew2-266)
Be amazing
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?
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.
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
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.
RA: That is one of the hardest parts of dealing with VATMOSS. You need
may 2015 11
Illustrations: Hey (heystudio.es)
having to pay each country individually, sellers make one return to their own MOSS, which then distributes the VAT.
exchange Q&As 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 VATregistered 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.
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.
Gaining traction This book sets out a five-step plan for startups looking to gain traction
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
Making friends Events such as this Dribbble meetup can help you stay plugged in to the community
12
may 2015
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 the potential 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.
ENJOYED READING THIS MAGAZINE? Subscribe and make great savings at www.myfavouritemagazines.co.uk