one-month trial FREe! with Unlimited access to more than 2,000 creative online courses
visualise data with Leaflet
Build interactive maps with this JS library
The voice of web design
Issue 276 : February 2016 : net.creativebloq.com
Design a site for a global audiencE Four top tips to build the best experience possible
take advantage of es6 today!
Try out the best new JavaScript features Project
Create customised animations in Foundation 6
We review the top prototyping tools
New york 22 April 2016 Learn cutting edge CSS, JavaScript, user experience and web performance techniques and much more!
Cameron Moll
Hannah Donovan
Tim Kadlec
James White
cameronmoll.com
hannahdonovan.com
timkadlec.com
signalnoise.com
Designer and author
Product designer
web technology advocate
Visual artist and designer
tickets on sale now
www.generateconf.com
Welcome
Welcome
editor’s note
These are stressful times, and – reflecting over the last year – it’s hard to remember the good news. For me personally, one of the most impactful talks of 2015 was Eric Meyer’s ‘Designing for Crisis’, and we’re thrilled that Eric has written an essay on the topic for this issue (page 28). It’s a wakeup call: we tend to design for the perfect situation, but in reality this is rare. All sites will at some point be accessed by people in stressed situations, who can barely focus on your awesome design and beautifully crafted copy. The reason may be a personal crisis – as in Eric’s case – or a political one. Our work can help people in need; it can also enable those who don’t
have a reliable internet connection and empower or protect those in danger. Let’s use our skills to make a difference. This could mean ‘rickrolling’ ISIS as Anonymous does, being more empathetic in our work or taking on projects for social good. This issue comes with a one-month trial to Skillshare, which gives you access to more than 2,000 creative online courses (go to netm.ag/skillshare to redeem). Why not start with Noah Scalin’s course on socially conscious design (netm.ag/ designrebel-276)?
Oliver Lindberg, editor oliver.lindberg@futurenet.com
Featured authors Levin Mejia
Andy Budd
Eric Me yer
Sarah Drasner
Levin is a designer advocate at Shopify and creator of the Mighty Note app. From page 68 he reviews the 10 best web design tools for 2016 w: www.fourandthree.com t: @fourandthree
Andy co-founded Clearleft, one of the first UX agencies in the UK. From page 76 he explores the role design fiction is starting to play in our industry w: www.andybudd.com t: @andybudd
Eric is an author, speaker and co-founder of An Event Apart. On page 28 he examines the needs of users teetering on the edge of panic w: www.meyerweb.com t: @meyerweb
Sarah is a senior UX engineer at Trulia and a staff writer for CSS-Tricks. She curates our gallery this issue, starting on page 44 w: sarahdrasnerdesign.com t: @sarah_edo
february 2016 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 Rebecca Shaw rebecca.shaw@futurenet.com, Commissioning editor Julia Sagar julia.sagar@futurenet.com, Deputy commissioning editor Sammy Maine sammy.maine@futurenet.com, Staff writer Dominic Carter dominic.carter@futurenet.com, Staff writer Alice Pattillo alice.pattillo@futurenet.com, Managing editor (Creative Bloq) Craig Stewart craig.stewart@futurenet.com, Content manager (Creative Bloq) Kerrie Hughes kerrie.hughes@futurenet.com
Editorial contributions Nicolas Bevacqua, Jina Bolton, Andy Budd, Peter Cook, Sarah Drasner, Brian Graves, Phil Hawksworth, Scott Jenson, Sam Kapila, Geoff Kimball, Amin Lakhani, Joe Leech, Conny Liegl, Wez Maynard, Levin Mejia, Eric Meyer, Rachel Nabors, Simon Owen, Clay Pruzinsky, Harry Roberts, Todd Siegel, Abigail Sinclair, Courtney Symons, Heidi Valles, Emma Jane Westby
Art contributions Ben the Illustrator, Richard Jenkins, Ben Mounsey, Jamie Schildhauer, Peter Tarka (Folio Art)
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 Group content manager, creative and design Tom May tom.may@futurenet.com
Advertising Advertising manager Sasha McGregor sasha.mcgregor@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 Senior licensing and syndication manager Matt Ellis matt.ellis@futurenet.com Subscriptions Subscribe to net online at myfavouritemagazines.co.uk
NEXT ISSUE ON SALE 21 January 2016 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
february 2016
Apps used
Google Docs, Photoshop, Dropbox, FutureSource, Illustrator, CodePen, Future Folio, GitHub
paper
COVER PaceSetter Gloss 250gsm P3-82 Galerie Fine 100gsm P83-114 Grapholvent 70gsm
Typefaces
Antonio, Share Tech, Merriweather, Titillium Web
Our revolutionary NEW Web Hosting platform
100% guaranteed UP TIME
100% guaranteed uptime!
Smart SSD storage & intelligent load balancing
Dedicated SSL certificates
Web Hosting from:
£1.99
per month ex VAT charged at 20%
Call 0333 0142 708 or visit fasthosts.co.uk/hosting SERVERS • WEB HOSTING • DOMAIN NAMES • EXCHANGE EMAIL
contents Issue 276 : February 2016 : net.creativebloq.com
FEED
FEED
SIDE PROJECT of the month 16
Una Kravets’ open source library recreates Instagram effects in CSS
EVENT report
17
BEYOND PIXELS
18
Need list
22
Clients from hell
23
Find out what went down at beyond tellerrand Berlin, from Oliver Lindberg
Workspace
19
Courtney Symons invites us into Shopify’s enviably eclectic, personalised HQ in Canada
Simon Owen sings the praises of DigiHike; a walking group for techy types
Web stuff we want, including a computer you can buy with your loose change
A designer comes face to face with a client with an unhealthy fear of fraud
voices Is web design dead?
26
As the web hits its mid-20s, Conny Liegl wonders if web designers are still needed
Designing for crisis
28
Mentoring
37
Big Question
38
Eric Meyer implores web designers to consider the worst-case scenario
Joe Leech on how mentoring could help close the skills gap in the web industry
What was the biggest lesson you learned in 2015? We asked the professionals
Q&A
Maya Benari explains how she helped revolutionise government sites in the US
6
february 2016
40
VOICES
INTERVIEW
32
Cameron Moll discusses why tools aren’t that important, and explores the latest headache facing the web industry: Unified Design
SUBSCRIBE to net and save up to 63%
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
regulars
regular
GALLERY
44
Sarah Drasner reveals her favourite new sites, including Active Theory’s WebGL masterpiece for gaming franchise Halo
Network
8
Exchange
10
The latest mail, tweets, posts and rants
Harry Roberts, Jina Bolton, Scott Jenson and Emma Jane Westby share advice
Showcase
free One-month
Skillshare trial See page 96
design Challenge
52
Focus on
57
profile
58
how we built
64
Designers mock up theme park websites
Sam Kapila explores effective onboarding
Creative playground Hello Monday
A dendrochronological journey for Subaru
PROJECTS Foundation 6
84
Proto.io
90
Global sites
94
Head to head
97
Maps with leaflet
98
Geoff Kimball shows you how to use Foundation 6 to create custom animations
Features 10 best tools for 2016 Levin Mejia counts down the top prototyping tools you should be trying out in the coming year
Todd Siegel explains how to use Proto.io to build a moving prototype
What is design
68 fiction?
76
Andy Budd looks at how designers are drawing inspiration from sci-fi to create the products of the future
Project
Create Storyboards for your animations 104
Rachel Nabors considers how to use storyboards to plan and communicate animation ideas
Exclusive video tutorials! Look out for the video icon in the tutorials for exclusive screencasts created by the authors
Amin Lakhani shares tips for building a site that works for users all over the world
Phil Hawksworth on Jekyll versus Harp
Peter Cook explains how to build an interactive weather map with Leaflet
web standards
103
ES6
108
Accessibility
114
Brian Graves explores CSS level 4
Nicolas Bevacqua walks through the latest JavaScript language features
Heidi Valles on keeping things consistent
february 2016 7
Mail, tweets, posts and rants contact us
@netmag
/netmag
+netmagazine
netmag@futurenet.com
net.creativebloq.com
net: Great work, Keenan! Thanks for sharing this with us. If you want to learn more about sass, the official newsletter is a good place to start: sassnews.com.
skill share
Sass Framework Myself and a colleague have built a frontend Sass framework that I wanted to share with net readers. It’s called Concise (concisecss.com). We put a lot of hard work into the framework and we’re trying to spread the word. Check it out!
Keenan Payne, CA, US
On Twitter, Google UX designer Rachel Inman asked her followers if they thought it was beneficial for designers and engineers to sit together (netm.ag/twitter276). Here’s what they had to say:
@ItsTheSeff Yes. Quicker feedback loop. Faster collaboration. Effective discussion. @MartinJoiner X-skills for all ... Plus great solutions come easy when the people building it are the people using it.
Sass alert Sass has a very active and enthusiastic community surrounding it. Check out its website for links to more resources
8
february 2016
Flexible layouts Last issue, Wes Bos explored how the Flexible Box Layout module could be used to tackle complex page layouts
@jdrydn Our designer sits with us, and it has lots of ups and a few downs ... poor CSS, complaining about layouts, and so OCD about the colours! @Nbbirds Yep. It’s like having two heads – one for design and one for coding!
Big q mixup In our Big Question last issue (‘Is SEO still relevant in 2016?’) a mix-up meant Sam Crocker’s answer was placed with Kate Dreyer’s headshot. Apologies to Kate and Sam. Here’s what Kate really thought:
Flexbox support On Wes Bos’ tutorial ‘Solve your layout problems with Flexbox’ (issue #275), our browser support widget for flexbox was a little off. Flexbox has full browser support with Edge (from 12), Firefox (41), Chrome (43), Safari (8), Opera (33), iOS Safari (8.4), Opera Mini (8), Chrome for Android (46) and Android Browser (4.4). Find out more at netm.ag/flex-276. Thanks to Mateusz Chabros for pointing out our error.
“In 2016 SEO will be different, but still very relevant. Mobile search has now overtaken desktop, so things like voice search and app indexing will become a much bigger focus. Voice search lends itself to location-based queries, for which local SEO is key. App SEO is still in its infancy, but I expect to see it grow into its own form of SEO, which agencies will need to offer to clients in order to remain competitive.”
Network THE POLL
Which book had the biggest impact on your career? 2% CSS: The Missing Manual David Sawyer McFarland
2% Content Strategy for the Web Kristina Halvorson and Melissa Rach
3% 100 Things Every Designer Needs to Know About People Susan Weinschenk
30% Designing with Web Standards Jeffrey Zeldman
3% The Principles of Beautiful Web Design Jason Beaird
20% Responsive Web Design Ethan Marcotte
7% Other
17% Introducing HTML5 Bruce Lawson and Remy Sharp
16% Don’t Make Me Think Steve Krug
From our timeline
Build our own product @de
What is your web resolution for 2016? Hire my first full-time dev/guru/oracle! @no1son Learn Javascript (finally!) @mbarker_84 Build awesome s**t! @lukewillmatt
Move away from freelancing in agencies to more client work @PJL101
Have fun getting better at CSS animations and SVG @AndrianaArt To focus on what I feel comfortable doing in my own time, not what the community says is best @psdesignuk Stop buying domain names and build something for the ones that I do have @antonydandrea1
Work on more amazing projects using HTML5, Bootstrap and jQuery! @Gaffy1994 Build a side project with Laravel and Backbone @greenhornet79 Read more for fun @steve228uk
Finish a personal project and don’t get distracted until it’s done @damodogg3007
COOL Stuff We learned This month Web Revolution
A huge change is hurtling towards the web, and it’s going to arrive in the shape of WebAssembly. Created by Google, Mozilla, Microsoft and Apple workers, WebAssembly will allow developers to compile source code into a lowlevel binary representation that can be run by other applications. netm.ag/webassembly-276 Arrested Development
Considering the vast number of websites that need them, why are good frontend developers so hard to track down? Ilias Ismanalijev explains how great frontend development comes down to a perfect storm of performance metrics, marketing awareness and browser compatibility. netm.ag/frontenddev-276 Feedback Findings
With client feedback usually falling on deaf ears, it’s no surprise disgruntled users are taking to social media or letting their unhappiness fester. Either way, it’s bad news for product owners. To help the flow of conversation, Andrew Rasmussen identifies feedback pain points and reveals how companies can fix them. netm.ag/feedback-276
february 2016 9
Send your questions to netmag@futurenet.com This month featuring... Harry Roberts Harry is a consultant frontend architect, writer and speaker w: csswizardry.com t: @csswizardry
Practical advice from industry experts
QUESTION OF THE MONTH
What’s a good starter project for someone who wants to learn Sass? Christian Grosskopf, Kentucky, US
Jina Bolton Jina works at Salesforce UX, where she helps create design systems w: jina.me t: @jina
Scott Jenson Scott is the project lead for the Physical Web project at Google w: jenson.org t: @scottjenson
Emma Jane Westby Emma is an author,
educator, and a part-time beekeeper w: gitforteams.com t: @emmajanehw
Learning space Sites like CodePen and SassMeister are good practice spaces for users learning Sass
JB: Assuming you’re already familiar with CSS, I personally recommend refactoring a current project. You can start out small, with moving values over to variables and consolidating and documenting them. Work your way up to mixins, then further into more advanced concepts. It’s how I learned. But if you want to start from scratch, you can try your hand at making a UI library and style guide – maybe for a side project. SassMeister and CodePen are also great practice spaces.
GIT
Moving teams What is the best way to move a team from SVN to Git with the minimum impact?
Gary Gitton, Paris, Fr
EJW: Git has bridging commands that allow you to work with an SVN repository until you’re ready to make the switch.
10
february 2016
Atlassian has a great tutorial on migrating from SVN to Git (netm.ag/SVN276). Don’t fool yourself into thinking it’s just a technical problem though. The social part of the move is usually the hardest. For this I rely on Kotter’s 8-Step Process for Leading Change: netm.ag/steps-276.
Q&As Physical Web
The basics How does the Physical Web work?
Joel Hayward, Cambridge, UK
SJ: This four-minute intro video should give a good overview of how it works: netm.ag/intro-276. With more and more smart devices on their way, it’s clear we can’t just have ‘an app’ for each one. We need something simple and light that will enable us to just walk up and use any device. This is especially important for public use cases like bus stops or movie posters, where you might use the object just once.
3 simple steps Will multiple parent selectors ever be possible? Ryan Irving, Henley-on-Thames, UK HR: Multiple parents make stylesheets much more terse, which is always nice. It reduces filesize and maintenance, so it’s something we’re definitely interested in. The best thing is, we have it already!
GIT The basics This video gives a concise overview of the Physical Web
Team training
CSS
Steve Shreve, Florida, US
Preprocessors
EJW: Sit down as a team and figure out how you work best together. And I do mean as a whole team. Having someone impose (‘teach’) a workflow onto everyone else is much less effective than co-creating a process. There are a few exercises in Git for Grown-ups (24ways.org/2013/git-for-grownups) to get you started. Diagrams and step-bystep documentation that use real names and examples are crucial. Nurture a culture that encourages questions and documents answers.
Currently, the most obvious solution is to use a preprocessor’s in-built nesting functionality to list our multiple parents, then nest our one child in it. This still compiles out to relatively verbose CSS, but it is nice and terse in our source.
Performance benefits What are the performance benefits of using Sass/Less rather than ‘normal’ CSS?
Martin Oxby, Inverness, UK
HR: A preprocessor is to performance what a knife is to a meal – a good knife might make you work faster and more effectively, but it won’t necessarily make your food taste any better. You could use Sass to make nice DRY code that promotes reuse, lowers filesize, and helps performance, or you could use Sass to inadvertently generate a million lines of unnecessary CSS that completely destroy performance. Remember: garbage in, garbage out. Sass
Mistakes to avoid What is the #1 mistake you see most devs making when first learning Sass?
Rick Yentzer, Boston, US
JB: Sass gives you a lot of powerful features: variables, maps, mixins, functions and so on. A mistake new users often make is to abstract everything just because they can. When I first started I would make mixins for anything I thought might be repeatable – then it would turn out I wouldn’t even use them. I recommend building things only when you need them, and abstracting them when you find yourself repeating yourself.
Best way to get everyone on board and up to speed: devs, designers, all.
CSS
CSS architecture Have you ever had to go back to a client to modify the CSS architecture you had developed for them previously?
Philip Karpiak, Toronto, CA
HR: Not yet! Usually clients I work with have a pretty long-term view of their project, so we can be relatively certain of a general architecture (ITCSS, BEM, a combination, etc.). The hallmarks of a good architecture are that we can decommission certain aspects, introduce new paradigms, section off experimental bits, and so on. To this end, I have worked with clients where we’ve sunset certain naming conventions as they got too complex, or introduced Web Components to provide fully encapsulated and selfsufficient modules.
:matches()
There’s a pseudo-selector in Selectors Level 4 that provides this natively. :matches (or :any , in older specs) allows you to write much more terse selectors, which the browser expands internally.
cssnext
To get :matches() working requires a little extra work. It’s actually referred to as :any() in older specs, and requires vendor prefixing. To this end, I’d recommend using cssnext (cssnext.io) to transpile the new syntax back to better support.
february 2016 11
exchange Q&As Sass
element IDs When working with for / each / while , is there an effective way to target enumerated element IDs without wasting CSS file size?
Christopher McKirgan, Bristol, UK
JB: While @extend and placeholder selectors has both its lovers and haters, I think it’s a good way to tackle this particular use case. For example: %element-base { // Styles here } %for $increment from 1 through 4 { .element-#{$increment} { @extend %element-base; width: 3rem * ($increment - 1); } } In this example, .element-1 , .element-2 , .element-3 , .element-4 share base styles via a placeholder selector, but then the width changes respectively. CSS
Local scoping How will CSS local scoping affect style development in the long run?
Daniel Schildt, Helsinki, FIN
HR: CSS isn’t without its problems, that’s for sure. One of the most prevalent is collisions and leakages – things cascading into one another where we don’t want them to, and selectors inadvertently catching too much of the DOM. Local scoping (in whatever guise that comes along) will certainly help. I’d be keen to have an opt-in local scope that’s standards-based and non-JS. Unfortunately, scoped styles (netm.ag/ scoped-276) seem to have died a death. Physical Web
Decisions This handy chart guides users who aren’t sure whether to rebase or merge (netm.ag/options-276)
and the Physical Web is no different. Making the web better benefits everyone. Keep in mind that the Physical Web is all open source. Opera labs is already shipping its own version. GIT
Merging vs stashing What are your thoughts on merging versus stashing/rebasing?
Simon Owen, Manchester, UK
EJW: Do whatever works for your team. Need a very clean history? Use rebase to update branches and merge --ff-only to incorporate contributor work. Need to cater to novice contributors? Allow branches to be updated via merge (no one will die. I tried it once for science). If you want to do The Right Thing, I’ve created a flow chart to help you decide (see above).
Monetisation How is Google going to monetise the Physical Web?
Richard Simek, California, US
SJ: The Physical Web is part of the Chrome team, an open source browser for the web. The Chrome team tries to improve the web through open standards
12
february 2016
Physical Web
Possibilities What are the implications of the Physical Web?
Jeff Vreeland, Ohio, US
SJ: While everyone is excited about the ability of the Physical Web to control
smart Internet of Things devices, it actually goes much further than that. Imagine a dog collar, a movie poster or even a mall map. Any physical object or place can sprout a virtual notecard of simple information. This goes back to the roots of the web, where information could be seen by any device. This ability to add information to anything could unlock many breakthrough use cases. CSS
Project management How does a team cope with a joint project when they’re all at different CSS levels?
Fig Digital, Glossop, UK
HR: This is a huge problem for almost all my clients: people of different backgrounds and skill levels will always be expected to contribute to CSS. To help them do this as safely as possible, we can do a few things. 1) Write API-like CSS for them to consume. A UI toolkit that other people can implement means they are users of our CSS, not creators. 2) Use tools and linters to highlight syntax errors, misused naming conventions, etc. I created Nudge (github.com/csswizardry/ nudge) for this very reason.
ENJOYED READING THIS MAGAZINE? Treat yourself or someone else Choose from a huge range of titles Free personalised gift card when buying for someone else Guaranteed delivery in time for Christmas! Plus a range of stocking fillers from just ÂŁ5
Subscribe and make great savings at www.myfavouritemagazines.co.uk