Free! 37-page ebook The voice of web design
Issue 275 : January 2016 : net.creativebloq.com
MASTER INTERFACE DESIGN The pro’s guide to the best tools and techniques in UI design
Accessible user experience tips from A Web For Everyone project
Tackle the powerful CSS module to build better sites
Plus! top tutorials
Animate with After Effects, typography in email, the WordPress REST API & more!
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
This month we’re excited to launch net Pro, our new package for web professionals, offering web trends, industry insight and more. It includes every issue of this very magazine – in print and digital – but also discounts to industry events including Generate, a free design handbook, and lots of other goodies. For details turn to page 51. Pro members will also get an annual industry report based on the Web Design and Development Industry Survey we have just launched. This survey will help us create a unique snapshot of the industry, and it’s a chance for you to have your say. It should only take around 10 minutes, and as a thank you everyone who completes the survey will get a free
download of The Ultimate Guide to Web Design Volume 3 – that’s 228 pages of expert advice, worth £9.99! Turn to page 14 for more info. Speaking of free downloads, this issue also comes with a free 37-page excerpt from A Web For Everyone – Designing Accessible User Experiences by Sarah Horton and Whitney Quesenbery, courtesy of Rosenfeld Media, which covers interaction design and how to create accessible wayfinding. Flip to page 96 for details. Enjoy!
Oliver Lindberg, editor oliver.lindberg@futurenet.com
Featured authors Johan Ronsse
L aura Cortes
Al asdair Monk
Diana Mounter
Johan works for Mono in Belgium. He is a self-taught user interface expert, and from page 68 explains how to become better at UI design w: johanronsse.be t: @johan_ronsse
Laura is a digital creative lead and UX designer at Londonbased innovation studio UNIT9. From page 76 she introduces the UX of virtual reality w: laura-cortes.com t: @Lolaacortes
Alasdair is a senior product designer on the human interface team at Heroku. On page 28 he considers the future of design tools w: alasdairmonk.com t: @almonk
Diana is a senior product designer and self-taught coder at Etsy. On page 26 she explains how to empower designers to code w: broccolini.net t: @broccolini
january 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
Editorial contributions
Paul Airy, Wes Bos, Dan Cork, Laura Cortes, Joke De Winter, Ben Everard, Paul-Jervis Heath, Sam Kapila, Tushar Merwanji, Alasdair Monk, Diana Mounter, Jan Jongboom, Reed Lauber, Emerson Loustau, Ryan McCue, Andy Orsow, Edu Pou, Julien Renau, Liam Richardson, Johan Ronsse, Philip Zastrow, Andrew Zusman
Art contributions
Ben the Illustrator, Ben Mounsey, Luke O’Neill, Jamie Schildhauer, Kai Wood
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 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 29 December 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
january 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 275 : January 2016 : net.creativebloq.com
FEED
FEED
SIDE PROJECT of the month 16
Luke Neverest is building an app that lets users connect blocks to create sounds
clients from hell
17
NEED list
19
BEYOND PIXELS
22
EVENT report
23
A web developer takes on a client who’s a little out of their depth online
Web stuff we want this month, from a Wi-Fi boosting bulb to a nifty robot
Workspace
18
Edu Pou explains why The Barbarian Group’s giant superdesk is the perfect catalyst for collaborative creation
Ben Everard explains how his woodworking skills have changed his outlook on life
Reed Lauber hops aboard The Queen Mary for the fourth annual CSS Dev Conf
voices From Design to code
Diana Mounter explores how companies can help their designers get into coding
26 VOICES
Blame your tools
28
Q&A
41
Pop-up innovation labs
37
Alasdair Monk examines how our design toolkits must evolve to meet our needs
We chat to net’s Emerging Talent of the Year, developer Tiffany Rayside
Paul-Jervis Heath on how to widen your company’s horizons with a pop-up lab
Big Question
We ask the professionals: Is SEO still relevant in 2016?
6
january 2016
41
INTERVIEW
34
We chat to Tim Kadlec about how we can make the web truly global, and what happens when performance is a matter of life or death
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 regular
GALLERY
44
Julien Renau runs down the best new sites around, including one that lets users visualise a symphony
regulars Network
8
Exchange
10
The latest mail, tweets, posts and rants
Karen McGrane, Ilya Grigorik, Jack Franklin and James Hall answer your questions
Showcase
design Challenge
52
Focus on
57
profile
58
how we built
64
Designers mock up party planner sites
free Accessibility ebook
See page 96
Sam Kapila on the UX of typography
Product designer Brad Haynes
Reed‘s inventory of perfect G&T combos
PROJECTS Flexbox
84
Loading animation
90
GitHub Dashboard
94
Head to head
97
Email typography
98
Wes Bos explains how to tackle layout problems with the flexbox module
Features The pro’s guide To UI design
Andy Orsow shows you how to create a loading GIF in After Effects and Photoshop
UX OF VR: A NEW
68 MEDIUM EMERGES 76
Johan Ronsse lifts the lid on the craft of user interface design, and shares some tips and techniques
Laura Cortes takes a look at the UX challenges facing designers as virtual reality takes off
Project
Container-based RWD with element queries 108
Philip Zastrow on how element queries will help us create container-based design systems
Exclusive video tutorials! Look out for the video icon in the tutorials for exclusive screencasts created by the authors
Emerson Loustau explains how he built a custom dashboard to share Git repos
Dan Cork compares Ionic and TouchstoneJS
Paul Airy explains how to master HTML typography in your emails
web standards
103
Rest API
104
Accessibility
114
Jan Jongboom on the Bluetooth API
Ryan McCue explores how REST can be used to pull content and data out of WP
Andrew Zusman on dyslexic users
january 2016 7
Mail, tweets, posts and rants contact us
@netmag
Get published I have been a subscriber to net for several years now. I was wondering how one contributes to the magazine, either with an article or in the Voices section? Do you just choose from submissions or do you approach potential writers first?
Antony D’Andrea, London, UK
/netmag
+netmagazine
net: A mixture of both. We’re always open to new contributors! If you want to get involved, pitch your idea to netmag@futurenet.com. Make sure you think about where your article would fit in the magazine. For example, could you write a tutorial about a new technique or technology? Do you have a side project we could cover in our Feed section? Or do you have an opinion you’re itching to share in Voices?
Award winner Arrived last night: net Award – Outstanding Contribution. Gorgeous! I’m at a loss for words.
Molly Holzschlag, Arizona, US net: Thanks Molly! A very deserving winner. You can
netmag@futurenet.com
Designer artwork Alice Lee fought off tough competition to take home the Young Designer of the Year award, and painted this still life of her gong at home
read Molly’s post about her award at netm.ag/molly-275.
Still life I just got my award in the mail yesterday and wanted to say a very sincere thank you for mailing it over! It was the centrepiece of my daily stilllife paint exercise set up (and also extremely challenging glass to paint in the morning light). Thanks again :)
Alice Lee, San Francisco, US
net: You’re very welcome! Check out Alice’s impressive artwork above.
From twitter
Making a contribution Molly Holzschlag took home the Outstanding Contribution award for her pioneering work in web standards
8
january 2016
net.creativebloq.com
Interesting article by @falkowata about behaviour change [Designing health apps, issue #273]. Some health
apps should focus on being a crutch. Obsolescence=success
@designfunction
Tickets booked for @netmag Generate conference in NYC next year with @rachelsulek. Thanks @DanLewistech for sending us!
@amymeganyoung
Great article in @netmag by @davidwieland [‘Fast food’ design, issue #275] ... Brilliant stuff! The article echoed a lot of my thoughts, especially the ‘fast food recipe’.
@iluv2vapeit
True Story: Once had a client ask that I supply an #a11y statement to a website, but only have it read aloud to blind users.
@Spellacy
Network THE POLL
What’s your go-to project management tool? Active Collab 7% A recent update has increased users
Flow 5% A tool for discussing tasks and planning projects
Asana 8% Users were a fan of this tool’s interface
Teamwork Projects 5% Keeping all your projects in one place
Basecamp 11% The grandfather of project management apps
Pivotal Tracker 1% Cross-project collaboration and flexible UX
Trello 30% This freebie offers plenty of helpful features
Slack 33% Our App of the Year proves popular
From our timeline
What are the tell-tale signs that a website needs an overhaul? If it’s not responsive. That’s a must now. The web needs to move on from fixed-width and m. sites. @djnels When you get an email saying “What bonehead designed your site?” #truestory @fwa Flash. Has to be Flash. @amymarquez
’Welcome to our website. Click here to enter.’ @bit_byte_bit If it’s not responsive or has an excessive page load time. @gem_sherwood Maybe look at your analytics and see if users are doing what you want them to. @EChesters
Copyright 2009. Tables, Flash, RealPlayer videos, no RWD and that annoying dancing baby GIF. @victoria_fws Slow to load, fixed grid, annoying UX. But enough about Facebook. Er ... patterned backgrounds and Comic Sans? @philpicton When is it not? If a day before you push to production all is superb, you are either a bad dev or from the future and probably a bad <future job title here>. @TeodorsZeltins
COOL Stuff We learned This month Web Redesign
Web design is in a tricky position, with designers under pressure to learn to code. That’s no mean feat – especially given the speed web development moves at. In this article, Vlad Magdalin experiments with a new approach that enables designers to create sites powered by real data, without the need for them to dive into code. netm.ag/design-275 Tactile Tech
Could touchscreens be a thing of the past? Ling Lim argues that even though we design tactile user interfaces, we rarely consider the user experience. With technology like Google’s Project Jacquard relying on motion sensitivity, could we be heading for a world where we don’t have to touch anything? netm.ag/UX-275 Election UX
Back in 2012, CNN was about to release its first responsive experience for election night, and Sophia Voychehovski was in the designer hotseat. Thankfully Voychehovski delivered, and you can find out how she produced an object-based system based on her goals. netm.ag/oriented-275
january 2016 9
Send your questions to netmag@futurenet.com This month featuring... Karen McGrane Karen is the author of Going Responsive, a new book on RWD w: goingresponsive.com t: @karenmcgrane
Practical advice from industry experts
QUESTION OF THE MONTH
Can sites serve non-JS or plain HTML on the fly to non-JS browsers using Node.js or other means? Jay Daniels, Georgia, US
Ilya Grigorik Ilya is a web performance engineer at Google, author and speaker w: igvita.com t: @igrigorik
Jack Franklin A developer evangelist at Pusher, Jack also runs JavaScript Playground w: jackfranklin.co.uk t: @Jack_Franklin
James Hall James is a director at web security and development firm Parallax w: parall.ax t: @MrRio
Universally friendly The GoCardless website uses the idea of ‘universal’ JavaScript
JF: Recently the idea of ‘Universal’ JavaScript has become popular and serves as a good solution to this problem. What you do is run the same JavaScript on your Node.js server as you run in the client. On the first visit the client is served rendered HTML from the server, but then JavaScript takes over and the app is powered from the client-side JavaScript. If the user doesn’t have JavaScript, they just continue to get rendered HTML from the server. This approach was used to build the GoCardless site and it’s worked really well (it’s also entirely open source: github.com/gocardless/splash-pages). Security
Alert, alert What is the best way to keep an eye on security measures?
Shane Hudson, West Sussex, UK
JH: The most important thing you can do is keep an eye on influential people within your technology communities.
10
january 2016
If you’re developing in Ruby on Rails for example, make sure you’re following its blog. Use an RSS reader such as Feedly, and subscribe to a blog that covers the latest news on each piece of tech in your stack. From a software point of view, I’d recommend checking out Netflix’s Conformity Monkey and
Q&As read online – although if you enjoy the book it’s probably worth purchasing a paper copy. The book takes you through all the best bits of JavaScript and explores how to use it both, in the browser and on the server with Node.js. Web performance
PageSpeed Insights Will there be a time when Google Analytics won’t stop me getting 100 per cent on Google PageSpeed Insights?
Dan Davies, North Wales, UK
Security Monkey. If you’re using AWS, look at Amazon Inspector preview.
IG: PageSpeed Insights intentionally sets a high bar: all resources should be cached and have a long cache lifetime. There are cases where this is not possible – not for technical reasons, but for policy and security (for example, to guarantee a five-minute update cycle you must set a low cache TTL, and ga.js is one such script amongst many). To reduce the impact of such scripts, make sure they’re marked as async !
Web performance
Responsive design
Script tags
Liquid and adaptive
What are your thoughts on using async and defer with script tags?
What about this whole new-fangled ‘liquidapsive’ thing?
IG: Please do! By default script tags are ‘parser-blocking’: if the document parser encounters a script tag it must stop, fetch the script and execute it, before it can proceed. This can have a huge impact on how quickly your page renders (if at all). When you add the async tag you allow the document parser to proceed without blocking. Take a look at my article on web fundamentals (netm.ag/fundamental-275) and recommendations on async versus script-injected approaches (netm.ag/ async-275) for more on this.
KM: Liquid and adaptive are terms used to describe grids that are not completely fluid, as in a responsive design (visit liquidapsive.com for some demos). While responsive design is handled client-side, adaptive is also used to refer to serverside techniques. Adaptive content means sending different content to different devices, while adaptive designs serve different HTML to solve particular layout or design problems. ‘Adaptive’ can be used in so many different ways, it’s a good idea to clarify that it’s not a synonym for ‘magic’.
Eloquent JavaScript Marijn Haverbeke’s book is a great introduction to JavaScript
Wes Bos, Hamilton, CA
3 simple steps What do you say when a client asks you to ‘just make their site responsive?’
Ivo Lukač, Zagreb, HR
KM: Different organisations roll out a responsive redesign in different ways. Here are three options:
Responsive retrofit
No magic wand automagically makes a site responsive, but Capital One found that with a componentised backend already in place, it could quickly retrofit its existing desktop site.
Michael R Bernstein, New Mexico, US
Parallel beta
Some companies want users to be able to test out a responsive design and then return to the ‘classic’ version of the site. Fidelity says its beta approach brought in lots of user feedback.
JavaScript
Learning JavaScript Are there any resources you would recommend for learning JavaScript?
Samuel Maggs, Bath, UK
JF: The best resource is Marijn Haverbeke’s Eloquent JavaScript (eloquentJavaScript.net). It serves as an excellent introduction not only to JavaScript, but programming in general. The best part is that it’s entirely free to
Security
Email addresses I have noticed more and more larger sites openly displaying their email address on their contact page. Is there something new happening with spambots?
Theo Lawrence, Welshpool, UK
JH: Since spam filtering has improved, many sites simply publish email addresses in plain text. There are many
Mobile-only responsive
An existing m-dot site can be used as a sandbox for rolling out a responsive design in stages. The Guardian and the BBC delivered their responsive sites to smartphone and tablet users first, before the desktop site.
january 2016 11
exchange Q&As different ways to protect email addresses, but given how easy it is to run a crawler that can parse and execute JavaScript, many methods are still open to attack. I recommend using CloudFlare (cloudflare.com). It has a free product called ScrapeShield that includes email obfuscation, and also offers free SSL certificates. Using CloudFlare will shift the burden of keeping up to date with advances in scraping technology. JavaScript
Enlightened JS Learning JavaScript is daunting. How do you go about becoming an enlightened JS developer?
Fares Marek, Harpenden, UK
JF: I’m not quite sure what makes an enlightened developer, but the solution is to write JavaScript. Come up with a project idea and build it. If you just work through tutorials you’ll never make that step to building your own applications, which is when you learn the most. Establish an end goal and use tutorials, and books and so on to guide you through the process. Getting stuck and figuring out solutions is the best way to learn. Security
Safe Passwords These days people have to remember so many complex passwords. How do you keep your accounts safe while being able to easily access them?
Dario Grandich, Leeds, UK
JH: I’d highly recommend using a password manager such as 1Password or LastPass. With these solutions your passwords are decrypted once they arrive at your computer, so they can’t be intercepted. The password for your vault
should be a short phrase. Often, people pick passwords such as ‘n3tm4g’ – short jumbles of letters and numbers. These are difficult for humans to remember, but really easy for computers to guess. Inputting symbols and upper/lower case characters can also be troublesome, especially on mobile. It’s much easier to remember a passphrase if you construct it as a sentence or generate it from a personal story (see xkcd comic above). Make sure you never use your vault password for anything else. You can then generate a unique and random password for each of the sites you visit. If a site gets hacked, you’ll only have to change the password for that one site. I don’t think passwords are going anywhere for a long time. We’ll just have to make the best of it! Responsive design
Bootstrap template What do you think of using the stock Bootstrap responsive template?
Victor Lombardi, New Jersey, US
QUIC test drive Google’s experiments with QUIC are yeilding great results
12
january 2016
KM: Frontend frameworks like Bootstrap can be useful for prototyping, as they come with a set of pre-defined assumptions. However, that’s also their
drawback. Using them for production code means you wind up with more than you need. Rather than accepting Bootstrap wholesale, many teams use it as a starting point from which to build their own pattern library. Developing a shared vocabulary for modular components and their purposes is the real benefit of a pattern library. Bootstrap only gets you started. Web performance
QUIC protocol What are the advantages of QUIC protocol? What do other vendors think of it, and will we be able to test drive it one day?
Christian Schaefer, Düsseldorf, DE
IG: In a nutshell, QUIC is HTTP/2 over UDP. It’s an experimental protocol that aims to reduce round trips (0-RTT handshakes), reduce the impact of packet loss (via pacing and error correction), improve mobility, and more. Check out ‘Experimenting with QUIC’ (netm.ag/quic275). We’re seeing great results (netm.ag/ result-275) and there is a lot of interest in it from the community. To test drive it, build the toy server in Chromium, or try deploying an app on Google App Engine (netm.ag/cloud-275)!
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