Free! 148-page guide to WordPress The voice of web design
Issue 286 : November 2016 : net.creativebloq.com
Feature
master the science of A/B testing
The Perfect Way to Plan Your Site We reveal the five crucial steps you need to follow to streamline your journey from discovery to design
Discover the best practices and pitfalls of designing with data
Plus! Top tutorials
The 5 key React concepts grids with PostCSS ● Progressive web apps ●
● Ideal
Welcome
Welcome
editor’s note
Over the last months I’ve had the privilege of travelling within Europe, to the US and Australia, with Generate Bangalore to follow on 2 December. One thing has become clear on these trips: our industry knows no borders. Of course it doesn’t – digital design and development is truly global. A lot of people work remotely these days and might not even have met their colleagues, who are often in different timezones. From Slack to Skype, we now have the tools to make this easy. Nothing quite compares to a meeting in person, however, and there’s something quite wonderful about peers coming together in a room, networking and sharing tips and techniques. Let’s hope that the
current political climate, in particular in the UK and US, won’t make this too painful. Wouldn’t it be a shame if a UK-based conference, for example, only had UK speakers and a UK audience? No one wants this. Let’s use our voice to make that known. In the meantime, enjoy another global issue with contributions from India, the US and Canada, the UK, the Netherlands, Sweden, Singapore and more. Many of our writers were not born in the country they live in either, myself included, and that’s rather amazing. See you around!
Oliver Lindberg, editor @oliverlindberg
Featured authors Anna Stout
Michel Ferreira
Sophia Voychehovski
Shik har K apoor
Anna is the owner of web design and marketing agency Astute Communications. From page 68 she runs down the five critical steps of site planning w: www.astute.co t: @Astute_Anna
Michel is a UX designer for Booking.com, which swears by designing with data, and from page 76 he takes you on a deep dive into A/B testing best practices w: www.michelferreira.me t: @multimichel
Sophia is the founder of UX studio Rewired, and teaches object-oriented UX, which she introduces us to on page 28, to companies around the world w: www.rewiredux.com t: @sophiavux
Shikhar is currently a UI engineer at Flipkart, India’s biggest ecommerce company. On page 84 he explains how to build a progressive web app w: www.flipkart.com t: @kapoorshikhar
november 2016 3
@netmag
/netmag
Future PLC, Quay House, The Ambury, Bath, BA1 1UA +44 (0)1225 442244 flickr.com/photos/netmag netmag@futurenet.com net.creativebloq.com
medium.com/net-magazine
Editorial
Editor Oliver Lindberg oliver.lindberg@futurenet.com, Production editor Ruth Hamilton ruth.hamilton@futurenet.com, Art editor Rebecca Shaw rebecca.shaw@futurenet.com
Editorial contributions
Daniel Buchner, Andy Budd, Tanya Combrinck, Ash Connolly, Matthew Croud, Victor Erixon, Phil Garnham, Nina Geometrieva, Jesse James, Shawn Jansepar, Sam Kapila, Shikhar Kapoor, Dan Mall, Jim McCauley, Heather Migliorisi, Theo Nicolaou, Ally Palanzi, David Paliwoda, Julia Sagar, Cory Simmons, Caleb Thompson, Alex Turner, Ray Villalobos, Sophia Voychehovski
Art contributions
Alex Duce, Grégoire Gicquel, Cormac Jordan, Michael Lester, Ben Mounsey, Marco Goran Romano, Bryan Tan
management
Editorial director: games, photography, creative and design Matthew Pierce matthew.pierce@futurenet.com, Group art director Rodney Dive rodney.dive@futurenet.com
Creative bloq Global editor-in-chief Dan Oliver dan.oliver@futurenet.com, Managing editor Craig Stewart craig.stewart@futurenet.com, Content manager Kerrie Hughes kerrie.hughes@futurenet.com, Staff writer Dominic Carter dominic.carter@futurenet.com Commercial Commercial sales director Clare Dove clare.dove@futurenet.com, Senior advertising manager Sasha McGregor sasha.mcgregor@futurenet.com, Director of agency sales Matt Downs matt.downs@futurenet.com, Head of strategic partnerships Clare Jonik clare.jonik@futurenet.com Circulation Trade marketing manager Juliette Winyard juliette.winyard@futurenet.com Production Production controller Nola Cokely nola.cokely@futurenet.com Head of production UK and US Mark Constance mark.constance@futurenet.com Licensing Senior licensing and syndication manager Matt Ellis matt.ellis@futurenet.com
NEXT ISSUE ON SALE 3 Nov 2016 All contents copyright © 2016 Future Publishing Limited or published under licence. All rights reserved. No part of this magazine may be reproduced, stored, transmitted or used in any way without the prior written permission of the publisher. Future Publishing Limited (company number 2008885) is registered in England and Wales. Registered office: Registered office: Quay House, The Ambury, Bath, BA1 1UA. All information contained in this publication is for information only and is, as far as we are aware, correct at the time of going to press. Future cannot accept any responsibility for errors or inaccuracies in such information. You are advised to contact manufacturers and retailers directly with regard to the price and other details of products or services referred to in this publication. Apps and websites mentioned in this publication are not under our control. We are not responsible for their contents or any changes or updates to them. If you submit unsolicited material to us, you automatically grant Future a licence to publish your submission in whole or in part in all editions of the magazine, including licensed editions worldwide and in any physical or digital format throughout the world. Any material you submit is sent at your risk and, although every care is taken, neither Future nor its employees, agents or subcontractors shall be liable for loss or damage.
Future is an award-winning international media group and leading digital business. We reach more than 49 million international consumers a month and create world-class content and advertising solutions for passionate consumers online, on tablet & smartphone and in print. Future plc is a public company quoted on the London Stock Exchange (symbol: FUTR). www.futureplc.com
Colophon 4
november 2016
Chief executive Zillah Byng-Thorne Non-executive chairman Peter Allen Chief financial officer Penny Ladkin-Brand Tel +44 (0)207 042 4000 (London) Tel +44 (0)1225 442 244 (Bath)
Apps used
Google Docs, Photoshop, Dropbox, FutureSource, Illustrator, InDesign, CodePen, GitHub
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).
paper
COVER PaceSetter Gloss 250gsm P3-82 UltraMag Plus gloss 90gsm P83-114 Grapholvent 70gsm
Typefaces
Antonio, Share Tech, Merriweather, Titillium Web
contents Issue 286 : November 2016 : net.creativebloq.com
FEED
FEED
SIDE PROJECT of the month 16
Ryan Taylor gives the low-down on open source pattern library Astrum
Clients from hell
17
BEYOND PIXELS
20
Need list
21
Event report
23
One designer faces a contract with some suspicious-looking updates
Caleb Thompson explains how painting models helps him focus his mind
Workspace
18
Dan Mall gives a tour of his office in Philadelphia, which acts as the headquarters for SuperFriendly’s handpicked project teams
The stuff we want this month, including a personalised video conferencing tool
Jesse James gives his review of the inaugural Abstractions conference
voices Essentialist design
Victor Erixon on why it’s time designers embraced the rise of essentialism
Object-oriented users
Sophia Voychehovski explains why UX design should be based around objects
26 VOICES
28
Whose responsibility is UX? 37
Andy Budd explores the role of UX designers, and why we need them
Big Question
Q&A
6
november 2016
32
Twitter and Socialcast veteran Josh Brewer introduces Abstract – the new tool that aims to be the glue that unifies the design process
38
What are the dos and don’ts of web design? We asked seven pros for etiquette tips
Pip Jamieson shares her experience of launching networking site The Dots
INTERVIEW
41
SUBSCRIBE to net and save up to 47%
Take advantage of the Print and digital Bundle Turn to page 24 to find out more Want the Pro package? Turn to Page 51
Contents regular
GALLERY
44
Ally Palanzi runs through her favourite new sites, including an interesting site for an interesting conference
regulars Network
8
Exchange
10
The latest mail, tweets, posts and rants
Nils Sköld, Bill Sourour, Sally Jenkinson and Jason Grigsby share their advice
Showcase
design Challenge
52
Focus on
57
profile
58
how we built
64
Three designers mock up volunteering sites
Sam Kapila homes in on site performance
free 148-page
WordPRess guide See page 82
We go behind the scenes at IBM Studios
An edible, interactive world by Resn
PROJECTS Progressive web apps
84
Illustration
90
Web typography
94
Flipkart’s Shikhar Kapoor walks through how to build a progressive web app
Features
Nina Geometrieva reveals her methods for making illustrations people think are rad
The Perfect way to plan your site 68
The science of good design
Anna Stout runs through the five critical stages you need to follow before you start designing a site
Michel Ferreira argues that data is the key to great design in this deep-dive into A/B testing
76
Cory Simmons gives an introduction to this small but mighty PostCSS function
Web Standards
101
React
102
Astro
106
Head to head
111
Accessibility
114
Daniel Buchner on blockchain technology
Ray Villalobos runs down five things to get your head around to truly master React
Project
Save your grids with Postcss-ant
Phil Garnham shows you how to make your typography accessible to all
96
Exclusive video tutorials Look out for the video icon in the tutorials section for screencasts created by the authors
Shawn Jansepar explains how to use Astro to build apps that blend web and native
Alfred versus Quicksilver
Heather Migliorisi puts the focus on SVGs
november 2016 7
Mail, tweets, posts and rants contact us
@netmag
/netmag
netmag@futurenet.com
fundamental ideas behind Flexbox is that it will grow or shrink itself depending on how much, or how little, room is available to it. I personally recommend using min/max widths on your elements and then letting Flexbox (with your flexgrow and flex-shrink numbers) take control over how to divvy up the extra space, or carve into items to make everything fit.
Flexbox and Susy
PORTFOLIO PUZZLE
Comment on Wes Bos’ guide to Flexbox (netm.ag/ bos-286): Flexbox does some exciting new things with grids, but if I’m not mistaken, it still forces you to calculate/ set width percentage. Although not a framework, Susy auto-calculates widths, saving a tremendous amount of tedious work. Combining the two is certainly an interesting option though. Just my $0.02!
When showcasing your work on your own site, is it best to give live links or show static graphics/screenshots? I had always felt that links are the way to go, but that offers a potential issue: it is possible for a designer to create a wonderful looking site, add it to their own portfolio, and then for the client to then make their own changes and completely mess with the slick-looking site! There is also the possibility that a client will redesign a site some time after you deliver it, so you could end up inadvertently claiming another designer’s work as your own!
Joel Paterson
Wes Bos: Hey Joel. While you can still set widths in pixels and percentages with Flexbox, it’s not necessary to do the ‘add everything up to 100 per cent’ dance you used to with floats. I often tell people to ‘embrace the flex’ - meaning that Flexbox is, well, flexible! One of the
8
november 2016
net.creativebloq.com
of the best portfolio sites even have broken links. In theory, it’s fine to use screengrabs of sites to show off your work, and keep the link relatively hidden away (here’s one example of how you might do that: www. shanemielke.com/work/wbmadmax). And of course, you should also be checking for broken links and other issues of the sort you describe (something we’re all probably guilty of not doing regularly enough). If you’re really proud of a particular design that goes on to be changed by the owners, I don’t see anything wrong in posting a screenshot, labelling it clearly as a mockup, and not having a link at all. However, if clients are changing your designs after you’ve delivered them,
medium.com/net-magazine
there may be a deeper issue. Maybe you should work on persuading them to pay you to maintain the site over the longer term.
Sydney posts Our first ever Generate Sydney conference took place on 5 September, and we had a blast. A couple of attendees have written great blog posts about the event, so if you missed it you can catch up. Ben Buchanan’s thorough post (netm.ag/ buchanan-286) runs through the take-aways from each session, while Clint Brown’s review (netm.ag/brown-286) picks out some recurring themes – for example, both Mark Zeman and Val Head advocated bringing a rich, timeline-based approach to UI design.
Richard Coull, Dundee, UK
net: You can’t expect a website you design to stay the same forever, and some
Hidden link On his portfolio site, Shane Mielke uses mainly screengrabs, but viewers can find a link to the live site by expanding the ‘info’ section
Network THE POLL
How do you prefer to send and receive large files? Email Everyone is familiar with it, but it’s not the most efficient for large files 1.09%
WeTransfer or similar service Simple to use and very popular 29.35% Dropbox Fast and efficient, it even integrates with your desktop environment 38.04%
BitTorrent Peer-to-peer option for the tech-savvy 3.26% FTP Old faithful 8.70%
Google Docs Great for collaborating as well as sharing 14.13%
Other 5.43%
From our timeline
What do your clients find most confusing about the process of making a website?
@LittleDotChris Clients forget they are paying for a service not just the end product. It costs £X because I spent a month building it
@woodss That it can’t look exactly the same on a huge number of browsers and devices, despite our best efforts
@petebarr Hi-fidelity concept sign-offs to an actual launch-ready site bridge. Makes you want to jump off a real bridge sometimes
@TazJohnston I’ve stopped sending wireframes to some clients as they can’t visualise
@7strel That they are not the end user. We are making a website for their clients’ needs, not theirs
@andybudd The variance of price between agencies is hugely confusing for clients
@martinthorne The word ‘process’: we will get approval, then after we’ve built the site people think they can design again
@caroseuk That they need to supply the content for the site to look/function as expected
@maxray We have had to return to desktop mockups to get sign off as they can’t grasp prototypes
@danjdavies They see one design for desktop and think it looks like that across all breakpoints
COOL Stuff We learned This month Autofill
Did you know that you can scan in credit card information with mobile Safari? It’s even possible to create a form that supports this feature. This article by Jason Grigsby of Cloud Four explains how autofill works, why it’s important (forms get filled in 30 per cent faster, apparently) and how to use it in conjunction with other advanced features. netm.ag/autofill-286 Feature Queries
Modernizr has long been a great way to find out if a new CSS feature is supported by the browser, but it requires JavaScript. In this article Jen Simmons introduces feature queries (or the @supports rule) as a faster, more robust alternative solution. netm.ag/queries-286 Pattern Lab Node
Pattern Lab is a set of tools that helps large teams to build atomic design systems. This screencast by Chris Coyier and Brian Muenzenmeyer provides a quick introduction to the Node version. It shows you what Pattern Lab can do, why you should use it and how to get started. netm.ag/node-286
november 2016 9
Send your questions to netmag@futurenet.com This month featuring... Nils Sköld Nils is design director at Ape, a digital product studio in Sweden w: www.nilsskold.se t: @nilsskold
Practical advice from industry experts
QUESTION OF THE MONTH
How do you remedy the isolation of working alone or in a small team? Kris Jeary, Kent, UK
Bill Sourour Veteran programmer Bill is the founder of Dev Mastery w: www.devmastery.com t: @billsourour
Sally Jenkinson Sally is a solutions architect focusing on transformation w: netm.ag/jenkinson-286 t: @sjenkinson
Jason Grigsby Jason is the co-founder of Cloud Four and co-author of Head First Mobile Web w: www.userfirstweb.com t: @grigs
Getting out If you work in a small team, getting out to events can help you connect with others
SJ: Being able to celebrate your successes and talk honestly about struggles is invaluable. So I’m lucky in that some of my closest friends are people that I used to, or still, work with. We speak daily, and social media definitely helps to facilitate this, but it’s great to meet up in person regularly. I’m also in multiple Slack teams that cover different topics, and usually have Twitter open. On top of this, speaking at conferences for several years has been brilliant for getting me out of my comfort zone and my office, and around the world to meet all sorts of new people.
Career
Value of eduction Do you think having a formal education helps you once you’re in the industry? As a graduate of 2014 I feel not.
Alex Marsh
BS: Given the choice between two candidates, one who is formally trained
10
november 2016
and one who is self-taught, both with zero experience, I advise my clients to call the formally trained one first. If someone has a good theoretical base, then it’s easier to teach them how to apply that theory to problems in the real world. When someone has been building little projects in bootcamps
Q&As
2 top tips Do you think there will be a pushback to more HTML-coded sites in the next five years, powered by API-based CMSes?
Ben Furfie, North-West England, UK
User decisions Uber improves the user experience by making some assumptions about what users want
and following online tutorials, it’s harder to teach them how to abstract that experience into knowledge that can be applied to new or bigger problems. Once experience comes into play though, formal education becomes less and less of a deciding factor. If you want to be at the front of the queue for an interview at any company, your goal should be to demonstrate that you have successfully solved the kinds of problems that company is likely to face. If you can do that, little else matters. So, does a formal education help? Absolutely. Do you really need one to make it in this business? Absolutely not. Responsive design
Media queries Is it best to have my CSS media queries close to the ‘standard’ CSS or in a large block on their own?
Paul Coupe, Sheffield, UK
JG: It depends. For most of our projects a Cloud Four, we’re building pattern libraries. Because we’re working on individual components, it makes sense to keep the media queries in CSS files associated with that component. Then we rely on the build process in Drizzle, our open source pattern library, to combine the CSS. We don’t tend to combine media queries specifically as part of that build process, because doing so changes the order of CSS.
BS: Yes. Building frontends using exclusively client-side code (HTML, JavaScript and CSS) and hooking them to APIs via AJAX has two clear advantages over the server-rendered-HTML model (PHP, ASP, JSP and so on).
Product design
Good and great What key design attributes make a product design better than the competition?
Mash The Web, London, UK
NS: Products that know what the user wants and execute on that knowledge without asking for permission will always win. Reducing choice is always a good design principle. And if you don’t know, guess! Guessing is a hundred times better than asking multiple questions just to be 100 per cent right. Uber is great because it assumes you want a taxi right now to where you are. So it doesn’t ask you those questions: instead it gives you the minutes until the closest car can arrive. If you want to be picked up somewhere else you have to correct the product – but since it’s right most of the time, what you’re usually getting is the simplest and best experience possible.
Benefit 1: Ubiquity
Client-side code is based on open standards and can run virtually anywhere. These days, with technologies like Cordova, React Native and Electron, ‘anywhere’ includes desktop and mobile apps too. This provides an incredible opportunity for code reuse across platforms. We see many apps taking advantage of this today, including Slack, Twitter, Medium and Facebook.
Business
Work/life balance
Benefit 2: Cost
Is it realistic to expect a healthy work/life balance when running a small business?
Static hosting is unbelievably cheap. Cloud providers like AWS, Azure and Google Cloud let you host static files (JavaScript, HTML, CSS, images and so on) on a global, distributed infrastructure for next to nothing. The reuse enabled by benefit 1 also leads to lower costs, as companies write things once and use them everywhere.
Wez Maynard, Portsmouth, UK
SJ: My experience is that it’s much easier to have a better work/life balance when you’re in charge of your own destiny, but it requires the right attitude. Because I work directly with almost all of my clients, I can control my schedule and locations, which helps hugely. If you need
november 2016 11
exchange Q&As to, book in your ‘life’ time like your work – schedule in gaming days, holidays and learning periods in advance. Keep a financial buffer for these periods, and don’t ever fall into the trap of seeing it as ‘lost’ money if you’re not working. Product design
Set process Is there a set cycle process for improving the design of a product?
Hon Lee, London, UK
NS: I find the best process for continuously improving your product is this: every quarter, do a complete runthrough of your products. Look at the data, do user tests, perform design reviews, read your ratings and so on. You don’t have to be super-detailed every time – it doesn’t have to take more than a week. Summarise the research and identify the part of your product that is performing the worst. It can be a single screen, flow or specific function. The rule is: if it ain’t broke, don’t fix it (no matter how ugly you think it is)! Spending your energy on parts that are working well is a waste of time; instead you should dedicate a couple of months to fixing the worst performers. When you’re satisfied, restart the process. Keep doing this and your product will be great. Responsive design
Fluid or adaptive? Fluid, responsive or adaptive? Any preferences or no-gos?
Benjamin Christine, Exeter, UK
JG: Only Aaron Gustafson can talk about ‘adaptive web design’ without a followup question asking him to define the term – I’ve heard many definitions over the years. I often use Liquidapsive.com to show fluid, adaptive and responsive design examples and make sure I’m talking about the same things. If those are the definitions you’re working with, then I have a strong bias towards responsive web design. It covers the broadest range of screens and helps everyone start to think about designing for a continuum of screens. Something designed responsively has a better chance of working well with future devices that we cannot anticipate.
12
november 2016
Adaptive design There are many definitions for adaptive design. Aaron Gustafson outlines one in this book
Career
Job demand With frontend/backend devs now out there, where is the demand going? Which area should newbies focus on learning?
Chris Rose, Kent, UK
BS: As of right now, there seem to be more jobs for frontend devs than for backend devs (at least according to metasearch I just did of UK job postings). But I wouldn’t make that the deciding factor in terms of choosing a direction for your career. Being a web developer is hard work. There are long hours and difficult days. The most important factor is that you enjoy it so that you can make it through those tough days. My advice to newbies is to learn a bit of both and see what you enjoy more. Product design
Gut feeling When designing products, when is it okay to use gut feeling rather than data?
Benjamin Christine, Exeter, UK
NS: Always! The best products and the best design teams are design-driven, but data-informed. Data can tell you what problems you need to solve, but it won’t tell you the solution. It can also give you different answers, depending on how you interpret it - in the end, you are always making some kind of judgement call. You could try and test every solution possible, but the results will still almost
always be inconclusive. No one wants to test 50 shades of blue (like Google famously did): you as a designer have to pick what to test, and that’s where your experience comes in. I find your gut feeling is almost always right. Experience is also a type of data. Business
Small fish How can a small team of coders compete in a large city’s industry?
WebTegrity, San Antonio, US
SJ: Firstly, try not to restrict yourself to city-based battles if there could be other opportunities elsewhere. Aside from that, I think this comes down to whether you’re just another replaceable resource, or if there’s a reason why people need your team. Don’t be afraid to break out of pigeonholes. For instance, I enjoy projects that are both highly technical and require people-focused UX activities, and I know this mix lets me do my best work. Knowing why you stand out and what type of work makes you happy are important foundations to lay. It may be that you can build up a reputation for being the city’s expert in a particular technology, sector or approach. Don’t be scared of a large industry – it’s a sign that there are lots of smart people to work with (not against) and hopefully learn from too.