Issuu on Google+

TRIAL FREE! 3-MONTH WORTH $27

Unlock the full power of CodePen with Pro features

BUILD A SITE WITH MATERIAL DESIGN

NODE.JS FOR DESIGNERS

The easy way to implement Google’s visual language

with better scripting FEATURE

The voice of web design

Issue 277 : March 2016 : net.creativebloq.com

CSS Shapes Modular CSS PostCSS Media Queries And much more!

Industry pros reveal the skills that will really matter


Welcome

WELCOME

EDITOR’S NOTE The new year has only just begun, and it’s time to start brushing up on your skills. That’s why, this issue, we are looking at some exciting developments in the world of CSS (page 68). We have also quizzed some of the industry’s leading experts to find out their predictions for the biggest trends for 2016, so you know what’s on the horizon (page 76). One recurring theme is the increasingly intrusive nature of advertising. It comes up in our poll, the interview with Dave Rupert, is mentioned in our trends feature and in our opinion piece by David Carroll of Parsons School of Design, who argues adblocking is the biggest boycott in history.

Let’s make 2016 the year to fix the web. We can all play a part in it, and the best way to start is by just experimenting, putting your stuff out there and getting some feedback. Frontend developer playground CodePen is great for that, and we can’t recommend it highly enough. That’s why we have teamed up with Chris Coyier to offer you a free three-month Pro trial for CodePen, worth $27 (see page 96). Head to codepen.io/promo/ net-mag to redeem. The offer ends on 1 May, so don’t miss it. And please share your Pens with us!

Oliver Lindberg, editor oliver.lindberg@futurenet.com

FEATURED AUTHORS DAN CORK

EVA FERREIRA

RAQUEL VÉLEZ

MUSTAFA KURTULDU

Dan is a developer at Holiday Extras and passionate about UI development. From page 68 he dives into the future of CSS, from CSS Modules to PostCSS w: www.dancork.co.uk t: @dancork

Eva is a designer and speaker from Argentina. On page 98 she explains how to develop creative layouts with clip-path and CSS Shapes w: www.evaferreira.com.ar t: @evaferreira92

Raquel is a senior software developer at npm, Inc and a robotics engineer. On page 26 she looks at how to get new coders on board efficiently w: rckbt.me t: @rockbot

Mustafa is a design advocate at Google in London, and is passionate about creativity. On page 84 he introduces the Material Design Lite template w: www.designtoday.info t: @Mustafa_x

march 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 Hector Arellano, Espen Brunborg, David Carroll, Dan Cork, Jonathan Cutrell, Eva Ferreira, Rebecca Garza-Bortman, Craig Grannell, Tae Won Ha, Daniel Hooper, Jenna Hussey, Nicola Jones, Sam Kapila, Paul Kinlan, Mustafa Kurtuldu, Jessica Lord, Sean O’Brien, Umesh Pandya, Pam Selle, Adrian Spiegelt, Rebecca Stickler, Jim Thacker, Raquel Vélez

ART CONTRIBUTIONS Ben the Illustrator, Richard Jenkins, Makers Company, Dale Edwin Murray, Ben Mounsey, Alex Thomas

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 18 FEBRUARY 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.

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

march 2016

APPS USED

PAPER

TYPEFACES

Google Docs, Photoshop, Dropbox, FutureSource, Illustrator, InDesign, CodePen, GitHub

COVER PaceSetter Gloss 250gsm P3-82 Galerie Fine 100gsm P83-114 Grapholvent 70gsm

Antonio, Share Tech, Merriweather, Titillium Web


Issue 277 : March 2016 : net.creativebloq.com

FEED

FEED

SIDE PROJECT OF THE MONTH 16 Fabian Burghardt makes Swiss Style simple with his colour picker tool

EVENT REPORT

19

WORKSPACE Rebecca Stickler gives a tour of the historical mansion in Pennsylvania that WebpageFX calls home

17

Nicola Jones reports from the Ampersand typography conference in Brighton

BEYOND PIXELS

18

Rebecca Garza-Bortman puts on a show as the frontwoman of rock band Happy Fangs

NEED LIST

22

The stuff we want this month, including a pack of Top Trumps for web nerds

CLIENTS FROM HELL

23

A favour backfires when a web developer struggles to break ties with a client

VOICES CODERS ON BOARD

26

Raquel Vélez explores how we can get new coders set up quickly and efficiently

A FUTURE MOBILE WEB

28

Paul Kinlan takes a closer look at the rise of progressive web apps

ADBLOCKING IS A BOYCOTT

37

David Carroll considers how digital marketing has failed its audience

BIG QUESTION

41

UX expert Arthur Moan explains how the discipline is changing

6

march 2016

INTERVIEW

32

We chat to Paravel’s Dave Rupert about ‘mama bear’ syndrome, what a site says about its creators, and why we’ve got metrics all wrong

38

How do you run a meetup? We asked the faces behind some of the top tech events

Q&A

VOICES

SUBSCRIBE TO NET

TAKE ADVANTAGE OF THE PRINT AND DIGITAL BUNDLE

AND SAVE UP TO 54%

Turn to page 24 to find out more Want the Pro package? Turn to Page 51


Contents

REGULARS

REGULAR

GALLERY

44

Espen Brunborg runs down the best new websites around, including an interactive timeline that spans 14 billion years

8

NETWORK The latest mail, tweets, posts and rants

10

EXCHANGE

Stephanie Rieger, Nicolás Bevacqua, Lara Schenck and Adrian Holovaty share advice

SHOWCASE

FREE 3-MONTH CODEPEN PRO TRIAL SEE PAGE 96

52

DESIGN CHALLENGE Designers mock up supermarket sites

57

FOCUS ON Sam Kapila looks at good style guides

58

PROFILE Stripe UI designer Benjamin De Cock

64

HOW WE BUILT An underwater adventure for Firefox

PROJECTS 90

PRINCIPLE

Daniel Hooper explains how to use Principle to demonstrate animation ideas

FEATURES THE FUTURE OF CSS

94

ATOM

Jessica Lord shows you how to use Atom, GitHub’s hackable text editor

WEB DESIGN

68 TRENDS 2016

Dan Cork takes a look at the new features and tooling options changing the way we build our CSS

76

Web professionals, from Eric Meyer to Cole Henley, predict the trends that will shape the industry in 2016

97

HEAD TO HEAD

Pam Selle compares Angular 2 and Aurelia

98

CSS SHAPES

Eva Ferreira explains how to use clip-path and CSS Shapes to build creative layouts

103

WEB STANDARDS PROJECT

BUILD A STATIC SITE WITH MATERIAL DESIGN LITE 84 Mustafa Kurtuldu introduces a template that adds a Material Design look and feel to your sites

EXCLUSIVE VIDEO TUTORIALS! Look out for the video icon in the tutorials for exclusive screencasts created by the authors

Jonathan Cutrell on CSS’s Level 4 Selectors

104

WEBGL

Hector Arellano explores how to integrate photos into video in real time with Pixi.js

108

NODE.JS

Tae Won Ha explains how designers can use Node.js to boost their productivity

114

ACCESSIBILITY Umesh Pandya on inclusive products

march 2016 7


Mail, tweets, posts and rants CONTACT US

@netmag

UX FOR KIDS Adobe web designer Aga Naplocha asked her Twitter followers for their advice on teaching the concept of UX to children (netm.ag/twitter277). Here are some of their ideas:

@aganaplocha I need your help! How do I explain what

/netmag

+netmagazine

UX is to 8-year-old children learning how to code in Scratch? @DesignUXUI UX is making sure your guests are happy. @Hellchick “I make it so that you’re not confused when you use something, or use the menu in your game.” @GaryRae You could use a hopscotch as an example of good UX. It’s obvious where you’re going, how to get there, and what to do next. @katecaldwell I loved @monteiro’s chair example. [netm.ag/chair-277]. @askehansen ‘Good UX is placing the light switch right next to the door’ ... I think everyday UX is a great way for

@zmh Have them each make a game and watch as the other plays it while speaking out loud – mini usability study!

Explaining UX Steve Shreve suggested this no-frills diagram to explain what UX is to children (from userexperiencerocks.wordpress.com)

8

march 2016

netmag@futurenet.com

net.creativebloq.com

Influential event Generate was crowned Most Influential Design Conference in the Creative Market Awards. Thanks to everyone who voted!

GIT ARTICLE In issue #267 we printed an article about Git branching options, written by Lorna Mitchell. It was recently published on our site Creative Bloq (netm.ag/ branch-277), and Lorna shared it on Twitter:

@lornajane My Git branching strategies article is now available, includes general advice and also pictures! @PurpleBooth Those diagrams are pretty, how did you draw them? @lornajane I use Draw Express. I can’t use a mouse so my touchscreen android device is life-changing! www. drawexpress.com @jarlskov Great article! I’m in the process of introducing

proper Git habits to my team, so that’ll prove useful!

GENERATE WIN Creative Market, an online marketplace for digital design goods, recently announced the results of its inaugural awards. The big news is that our very own web design event, Generate (generateconf.com), was voted by the community as the most influential design conference of the year (see netm.ag/win-277 for all the winners). A massive thanks to everyone who voted for Generate! It’s fantastic to get such good feedback from the community. We can’t wait to do it all again in 2016 and add a few more cities!


Network THE POLL

WHAT WOULD YOU LIKE TO SEE LESS OF IN 2016? 6% Infinite scrolling When will it end?!

5% Parallax sites It was cute at first but we’re looking for something a bit more original

7% Stock photos No more pics of women laughing at their phones, please

4% ‘This site is best viewed in/on’ messages It should be best viewed on all devices!

16% Scroll hijacking Don’t tell us where to go, pal

3% Load screens We’re fed up of waiting 58% Intrusive advertising The battle continues against those damn pop-up ads

1% Fullscreen photography It’s just too much for our eyes to take in

From our timeline How do you network without seeming needy? It’s very useful to discuss what projects each of you are working on. You’ll often find your skills complement those around you. @JaredRigby Get drunk, often. @Dorkfeatures

Find a common ground, try to make a genuine connection before selling yourself :) @rem_ram

Isn’t networking really just being friendly and open with people? @matthamm Engage in conversation and don’t spend all your time pitching AT people. Talk TO them. @DowsonCreative Make a point of seeking out people you’ve only spoken to on Twitter, but never actually met. @nonswearyphil

Build your network before you need it – help others achieve their goals rather than looking for what you can get. @dw_interactive

COOL STUFF WE LEARNED THIS MONTH PICTURE PROCESSOR

Thanks to the release of Google Cloud Vision API, it’s now possible for developers to build powerful applications that can understand the contents of a picture. By making its Deep Learning algorithms available to the public, Alessandro Vitale explains how Google opened up the playing field for startups to come in and monetise the service. netm.ag/cloudvision277 SEARCH BARS SOLVED

The usefulness of hamburger icons fires up some heated opinions from web pros, but when it comes to UX it’s a bad idea to hide search bars inside them. Dan Bayn explains that, by using the search box to suggest main navigation pages, devs can make hub pages both discoverable and responsive. netm.ag/search277 CONVERTING COPY

Sell to the people behind the person you’re networking with. Become their friend (not just a provider) and they’ll recommend you. @TomWade Be persistent. Don’t just go to an event once. Go several times and become familiar with those who are becoming familiar with you. @mfjordan

Copy can make or break your web conversions, as this article exploring PeopleSpark’s staggeringly improved metrics reveals. Founder and CEO Mitchell Harper gives marketers the lowdown on how to craft killer copy that converts, and explains why you need to test your text. netm.ag/peoplespark277

march 2016 9


Practical advice from industry experts

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... STEPHANIE RIEGER Stephanie is a designer at yiibu, a small user experience consultancy w: stephanierieger.com t: @stephanierieger

QUESTION OF THE MONTH

Could (and should) healthcare providers use IoT devices to monitor populations, as a basis for preventative care? Andy Owen, London, UK

NICOLÁS BEVACQUA Nicolás is a JavaScript consultant, blogger and author w: bevacqua.io t: @nzgb

ADRIAN HOLOVATY Web developer Adrian co-created the Django framework w: holovaty.com t: @adrianholovaty

LARA SCHENCK Lara is an independent WordPress developer and teacher based in NYC w: notlaura.com t: @laras126

Bright idea Vitality’s GlowCap smart medication bottle helps reminds patients to take their medicine

SR: Connected and sensor-enabled devices that monitor a person’s health are growing in popularity. It’s likely we will see more of them in the future, as they have the potential to greatly improve health and reduce the cost of delivering care. There are however many unanswered questions, including who can access a person’s data, how to ensure device and data interoperability, and how closely national or private care should be directly tied to ownership of such devices. FREELANCE

IMPOSTER SYNDROME How do you overcome ‘imposter syndrome’ when first starting a freelance business?

Dylan J Harris, Newport, UK LS: To paraphrase the wise words of Mike Monteiro in Design is a Job (netm.ag/ designisajob-277): you never stop feeling like a fake; you just get to a point where you’re so busy you forget about it. Take on projects that scare you, grit your teeth

10

march 2016

and stick with them. And stop reading so much advice about freelancing. A lot of what’s out there is very prescriptive, and the reality is that everyone comes up with their own process. Oh, the irony! ES6

IS ES6 AN IMPROVEMENT? Are ES6 features really an improvement, or do they just blindly copy other languages?

Jeremy Geoghegan, Wisconsin, US


Q&As

PYTHON

LEARNING PYTHON STYLE What tips do you have for a new Python developer coming from C++/Java?

Jonathan Feint, Sydney, AU AH: Don’t just learn the Python syntax: learn the Python style. Learn how to ‘think’ in Python; how to do things idiomatically. It’s possible to write a Python program using C++ or Java style, and you’ll probably be tempted to do this at first. The result might technically be correct, but it’ll be less elegant – and more confusing to colleagues – than writing it in a ‘Pythonic’ fashion. The best ways to learn Python style are to read ‘The Zen of Python’ (python. org/doc/humor) and the Python Cookbook (netm.ag/cookbook-277). Style guide David Beazley and Brian K. Jones’ Python Cookbook is a good introduction to ‘Python style’

3 SIMPLE STEPS What is the best way to find clients with serious attitude and respect for a designer’s work? Aga Naplocha, Warsaw, POL LS: In my experience, it comes down to budget. More money means more risk, so your clients (and you) will take the relationship more seriously.

ES6

TRANSPILING NB: There are a few traits shared between groups of features in ES6. Features like arrow functions and enhanced object literals aim to make your code simpler and easier to read. Features like rest and spread help you focus on what you want to accomplish and not so much on how you do it (incidentally, that vastly improves readability). Iterators, generators, collections, promises and template literals help improve your code’s expressiveness while avoiding utility libraries. INTERNET OF THINGS

BACKEND CONNECTIVITY How much does backend connectivity factor into frontend UX? Is design merely a consumer of data from IoT?

What are the advantages and drawbacks of transpiling?

Joe Adams, New York, US NB: Transpiling allows us to compile JavaScript written in one of the most recent versions of the language down to something that browsers understand. Today, lots of developers use Babel (babeljs.io) to transpile ES6 into ES5. As ES6 gains broad support in modern browsers, transpilation will shift towards compiling ES7 into ES5, and eventually, into ES6. Transpilation can be seen as a sliding window that will always let us use cutting-edge features of JavaScript. Not everything can be transpiled, however: for example, proxies. ES6

Brooks Grigson, Dallas, US

BROWSER SUPPORT

SR: The old expression ‘garbage in, garbage out’ is all the more relevant with the Internet of Things. It’s now easier than ever to gather all manner of personal and environmental data, but people won’t engage with that information unless it’s both meaningful and useful. Creating thoughtful services that collect and then display the right data, at the right time, and in a way that users can understand and (crucially) act upon, depends a great deal on the design of your API.

How can we help browsers better support ES6, when transpilers create ES5?

DOUBLE YOUR RATE

Save up a few months’ living expenses and experiment with your pricing and process: appearing busy and expensive is attractive. Use any client-less time for blogging and public projects.

TALK TO PEOPLE

I’ve never gotten client work from a job board, and I’ve also never had a bad client. My best projects have come from referrals from real people. Talk about what you do and be stoked about it.

August Kottila, Helsinki, FIN NB: By using transpilers. While transpilers compile the latest features of JavaScript into something that browsers understand today, they also help the creators of those browsers to gain insight into what features are the most desirable for developers, which in turn helps them focus on those features. As browsers catch up their implementations of the ES6 specification, users will eventually

INVEST IN CONFERENCES

Pick a conference and set aside the cash. What you learn and the conversations you’ll have will be invaluable, and in turn make you more valuable as a service provider.

march 2016 11


EXCHANGE Q&As move to writing their applications natively in that version of the spec – or better yet, transpiling the next version of the spec against the latest broadly supported version, moving the goalposts and repeating the cycle. INTERNET OF THINGS

INTEROPERABILITY What is the current Achilles heel of the IoT? SR: Interoperability is a persistent problem. While it may be trivial to connect one ‘hero’ device to another, it’s still hard to make meaningful connections between more random devices. This is solvable if we can agree on standards instead of constantly aiming to disrupt, define or own aspects of this growing ecosystem. The IoT has the potential to redefine our world and could help solve some of its most pressing problems but for that to happen, we’ll need to work together.

Next step Django is a great way to speed up Python development – but learn Python first

a shortcut, and the best way to use it is if you understand how to do things without that shortcut. Not only will that make you appreciate Django more; it’ll make you use it more effectively.

FREELANCE

INTERNET OF THINGS

MANAGEMENT TOOLS

RESEARCH TECHNIQUES

Can you recommend any project management tools that are especially good for working with others or sharing tasks?

When designing for the IoT, how do I gather feedback when possibilities are way beyond users’ mental models?

Ron Romero, Los Angeles, US

Ranae Guiles, Atlanta, US

LS: It’s easy to get bogged down by all of the project management tools out there! I find simpler is better. For development tasks, I use Trello (trello.com), and for tracking bugs and changes, I use a simple Google Docs spreadsheet. I have columns for description, link, screenshot, then ‘Done’ and ‘Approved’. Also, Slack (slack. com) is great for quick communication with clients; emails can be too formal and interpreted wrongly. I also like to do weekly video chat check-ins.

SR: We find that design research techniques such as roleplay and storytelling are increasingly useful when modelling products that are too early to adequately prototype, but also too different for users to fully envision and understand. These techniques can jump-start mental models and uncover not just how a person may use a product, but how it may make them feel. They can also reveal potential tensions the product will create in social, private or more ambiguous contexts.

be using Angular 2, it might be a good idea to learn the JavaScript superset, as that would give you an upper hand in understanding the Angular source code, as well as TypeScript software that has been open-sourced. If it were me, I’d definitely go for ES6. PYTHON

PEP 8 CONVENTIONS How important is PEP 8? Do I really need to know it?

Max Marshall, New York, US AH: I’d say it’s important to be familiar with PEP 8 (the set of conventions on how to format Python code), but it’s not an be-all and end-all: I particularly disagree with its suggestion that lines should be wrapped at 72 characters. Don’t be dogmatic about it. I recommend watching Raymond Hettinger’s PyCon 2015 talk, ‘Beyond PEP 8’ (netm.ag/hettinger-277), on YouTube. He gives salient counterexamples to many PEP 8 guidelines.

PYTHON

GETTING STARTED

ES6

Should I start with Python or Django to learn web development using Python?

ES6 VS TRANSCRIPT

Will Riley, East Horndon, UK AH: I’m old-school – I think you should learn the individual components first, before learning Django. First learn Python, then learn SQL, then learn how HTTP works, then learn HTML/CSS. After you know all that, learn Django. Django is

12

march 2016

If I only want to learn one language, should it be TypeScript or ES6?

Jess Sutton, Gloucester, UK NB: It depends. ES6 might be the better alternative as it’s where the language is going, meaning it’s going to stay relevant forever, while that’s uncertain with TypeScript. If you predict you’re going to

PEP talk It’s important to be familiar with PEP 8 style conventions, but don’t get hung up on them


NEW YORK 22 APRIL 2016 Learn cutting edge CSS, JavaScript, user experience and web performance techniques, and much more!

CAMERON MOLL

DAN MALL

SARAH DRASNER

UNA KRAVETS

DESIGNER AND AUTHOR

CREATIVE DIRECTOR

SENIOR UX ENGINEER

DEVELOPER

www.cameronmoll.com

www.superfriend.ly

www.trulia.com

www.ibm.com

TICKETS ON SALE NOW

www.generateconf.com


E

People, projects & paraphernalia

THIS MONTH FEATURING...

SIDE PROJECT OF THE MONTH 16

EVENT REPORT

Fabian Burghardt makes Swiss Style simple with his colour picker tool

Nicola Jones reports from the Ampersand typography conference in Brighton

WORKSPACE

19

Rebecca Stickler gives a whistle-stop tour of WebpageFX’s historical mansion

NEED LIST The stuff we want this month, including a pack of Top Trumps for web nerds

17

22

BEYOND PIXELS

18

Rebecca Garza-Bortman puts on a show as the frontwoman of rock band Happy Fangs

CLIENTS FROM HELL

23

A favour backfires when a web developer struggles to break ties with a client

march 2016 15


FEED Side project

SWISS STYLE COLOR PICKER Fabian Burghardt shares his love of minimal design through a colour picker with a Swiss twist SIDE PROJECT OF THE MONTH

INFO job: Digital freelancer w: fabianburghardt.de t: @fabuchao

16

march 2016

net: What is the Swiss Style Color Picker (swisscolors.net)? FB: It’s a tool for designers and those who are interested in international graphic design. Basically it’s a collection of handpicked colour combinations inspired by Swiss Style posters and artworks. All the colours are presented as isometric cubes. The user can click on any colour and copy out its hex code. net: How did you make it? FB: I used flexbox for the grid and CSS Shapes for the solid shapes. I couldn’t find a good JS or CSS trick for the grain effect, so I used Photoshop to create a 50 per cent grey solid shape and added the noise effect. This PNG image is on top of every colour box with 10 per cent opacity, and creates the illusion of a grainy solid without strongly influencing the original colour.

net: The colours change when you refresh the page. Are there an infinite number of combinations? FB: The colour combinations are fixed. It’s hard to find an algorithm that recreates the authentic Swiss Style colour combinations, so it’s actually just a set of ready-made combinations that are randomly arranged on every refresh. net: How long did it take to make? FB: I had the idea for some weeks but never thought a colour picker would be interesting for other people. But one day, when I was bored during a university course about ebooks, I used the six hours to build it. At home I composed the colour combinations and uploaded the whole thing the next day. net: Did you run into any problems? FB: I used clipboard.js for the copy-to-clipboard functionality, but it isn’t fully supported by Safari. I had to add a workaround for Safari users later. net: What has the reaction been so far? FB: I never thought this little tool would cause so much excitement. About 100,000 site views in one month and a lot of nice blog posts and emails showed me that there is a really big symbiosis between the designer and web communities.


Feed

EVENT GUIDE DIGITAL SUMMIT PHOENIX DATE: 8-9 FEBRUARY 2016 LOCATION: ARIZONA, US This two-day event covers everything from digital strategies and content marketing to UX, analytics and social media. Speakers include Melanie Deziel, Cliff Seal, Tony Quiroz and Eve Mayer. digitalsummitphoenix.com

FORWARD 4

AMPERSAND Nicola Jones reports from the Brighton conference, where EVENT REPORT

After a year’s hiatus, Ampersand conference returned to the elegant surroundings of the Brighton Dome in November. Attendees filed into the intimate Studio Theatre where they were greeted by Richard Rutter who, along with his team at Clearleft, had curated a schedule of talks that would both complement and challenge one another. It was a forward-facing, practical and optimistic day. The highlight of the morning was an honest talk by Marcin Wichary of Medium. Wichary cares a lot about the quality of the reading experience on Medium, and he took great joy in confessing some of the extreme lengths he’d gone to in the name of typography, such as the curious case of the disappearing Polish S (netm.ag/wichary-277). As an industry, it feels like we’ve spent quite some time talking about the challenges of responsive design and the quickly changing landscape. Ampersand was full of positivity and excitement about what we can now achieve as the industry matures and technology catches up. Jen Simmons’ talk (netm.ag/simmons-277) was the

embodiment of this; calling for the industry to break out of its design rut, and inspiring us with both stunning magazine layouts and the unapologetic creativity of early website design. She put this into context by demonstrating some of the CSS properties available to us to create editorial design. The web really doesn’t have to be full of three columns and neglected sidebars. Other highlights were Matthew Young’s case study on Pelican Books, for which he put equal focus on designing a beautiful reading experience for both print and ebooks simultaneously, rather than mimicking the print version. Sarah Hyndman (netm. ag/hyndman-277) delved into the psychology of typefaces and took us on a journey through some of her experiments in ‘dating’ and ‘tasting’ type. Her light-hearted talk captured the message at the centre of the conference: we all have a responsibility to our content and our readers to make good decisions about type.

PROFILE

DATE: 13 NOVEMBER 2015 LOCATION: BRIGHTON, UK URL: 2015.ampersandconf.com

Nicola (@nickin00) is senior designer within the digital design team at Monotype

DATE: 8-13 FEBRUARY 2016 LOCATION: CALIFORNIA, US Five days of workshops on topics including advanced JS, the IoT and algorithmic art, with the Web Technology Summit conference right in the middle, on the 10th. Speakers include Kassandra Perch, Douglas Crockford and Sarah Drasner. www.jfokus.se

IOT TECHEXPO DATE: 10-11 FEBRUARY 2016 LOCATION: LONDON, UK Bringing together key industries from across Europe, IOT TechExpo is two days of toplevel content and discussion, “where the world becomes the web”. Catherine Mulligan, Charles Ewen and Lauren Sager Weinstein will be speaking. www.iottechexpo.com

RUBY CONF AU DATE: 10-13 FEBRUARY 2016 LOCATION: GOLD COAST, AU Three days of Ruby goodness set in the brand new conference centre at the Sea World Resort. Workshops are offered on day one from Rails Girls and Richie Khoo, followed by two more days of talks. www.rubyconf.org.au/2016

march 2016 17


FEED Beyond pixels

Gig photography: Amber Gregory

STUFF I LIKE

SARAH RICHARDS Content strategist sarahjrichards.com

Working in content can be really emotional – people get very attached to their copy, and so on – so I practice mindfulness to keep calm and focused. This app sends me reminders and has some good guided practice. Even using the 15 second pause can make a difference. www.mindfulnessdailyapp.com

POETICA Poetica brings Google Docsstyle collaborative editing to my WordPress drafts: I love it for getting feedback on my writing. Its markup tools look and feel like writing on paper, which makes my inner editor very, very happy. Far superior to just tracking changes. poetica.com

BLINKIST I’d read 24/7 if I could get away with it. Blinkist takes a book and boils it down to the salient points. I use the audio function a lot so I can digest a book while I walk. I thought this would help me test out books before I buy them, so I’d probably buy fewer. Didn’t happen. So didn’t happen. blinkist.com

18

march 2016

PERFORMING LIVE This month … Rebecca Garza-Bortman spends her downtime rocking out as Happy Fangs’ frontwoman BEYOND PIXELS When you see the San Francisco-based rock band Happy Fangs play live, you might guess that some of these rockers are also designers. We take the stage wearing geometric war paint. Our amplifiers all repeat one stark chevron pattern. All our instruments and attire – even my water bottle – are black and white. This kind of consistency doesn’t happen by accident. Our guitarist Michael Cobra runs his own agency, Cobra Creative. Our drummer Jess Gowrie makes her own fibreglass drum sets for a living. And when I’m not singing or writing songs for Happy Fangs, I’m designing a luxurious living space for the future of online education – a site called MasterClass (masterclass.com). In Happy Fangs, we focus on the visuals just as much as the music. So when we get up on stage or take over your video player, it’s a visual explosion as well as an auditory one. I love being the band’s frontwoman, guiding an audience from song to song, and adding commentary to blend one story into the next, turning a string of songs into a complete, mind-blowing set. Although designers rarely put themselves on full display to their audience, design requires the same uncharted creativity as writing songs. In 2010, I embarked on just such an unmapped design challenge: to develop a visual language for YouTube, then the web’s Wild West. At that time,

visual decisions on the site were second-class considerations and the employees were still adjusting to the new search engine. The process of developing a cohesive visual style to apply site-wide was only part of the challenge. In order for this new visual language to see the light of day (and to hear the purr of cat videos), I had to campaign, crusade even, for the design internally first. I became the design’s frontwoman, guiding my co-workers through the reasoning behind each change and explaining to them why all these elements needed to be released to the world together, in a complete, pixel-perfect set. We designers often talk about creating products that satisfy our users’ desires. There are few places where your product can be celebrated so loudly and proudly as when you’re in front of your audience. Your product is not just the songs you write or the visual elements you construct: it’s the complete, crisp, thoughtful set you create. So play your set loud and proud and wait for the audience to echo back!

PROFILE

MINDFULNESS DAILY

Rebecca (@bortrock) is the designer and first employee at MasterClass and the singer of Happy Fangs. For her wedding, she performed a rock opera


feed 1 2

5

4 3

An ultra-modern business housed in an old world location: Rebecca Stickler shows us WebpageFX’s historical mansion WORKSPACE WebpageFX is a digital marketing agency located in Harrisburg, Pennsylvania. When we outgrew our old office, we knew we didn’t want a traditional workspace and set our sights on the historical Moffitt Mansion along the Susquehanna River. It hadn’t been maintained since the 70s and was definitely in need of some care, but we partnered with a local development company to restore both the interior and exterior of the building. The result was a functional and modern workspace that also preserved the building’s original elements, like exposed wooden beams and the fourth floor widows’ walk.

Our first floor features a mural of the Harrisburg skyline [1], which was hand-drawn by a local artist. You’ll find many of the major city landmarks on our walls, including the State Capitol. To keep our team motivated, we set goals at the beginning of each month. If we’ve completed them by the end, we earn something that everyone can enjoy, like office kayaks [2] or a party. We also encourage growth by offering incentives for reading and listening to books [3] on both personal and professional topics. There’s an extensive library to choose from. We’re passionate about giving back, both to our local community

and to communities around the world, which is why we started our #FXBuilds [4] programme in 2014. We completed our first goal of raising $25,000 towards building a school in Guatemala, and we’re now working to do the same for a community in Ghana. Finally, no explanation of WebpageFX would be complete without mentioning desk panther [5]. What started off as a white elephant gift at a Christmas party quickly turned into one of the greatest trolling accomplishments of all time, as one of our team members used it as a pseudonym for a Twitter account that seemed to know everything about everyone (including other employees’ cats). He was able to remain anonymous for months. We’re still not entirely sure how he did it. PROFILE

A SPACE IN TIME

Rebecca (above, center) is a content marketer at WebpageFX (www. webpagefx.com), a digital marketing company in Pennsylvania

march 2016 19


FEED Need list

NEED LIST

STUFF WE WANT Small objects of web design wonder: from a deck of web-themed

1

BUILDING A DEVICE LAB

2

$3

5

$60,000

OZO

€19

WEB TRUMPS

4

3

CODECODE NINJA

$18

GOING RESPONSIVE

6

$10PM

MASTERING RESPONSIVE WEB DESIGN £31.18

What we think (1) Destiny Montague and Lara Hogan explain how making a device lab can give you valuable user experience insights (netm.ag/devicelab-277). (2) The perfect gift for geeky friends, Web Trumps turns web and app companies into 32 uniquely designed cards (netm.ag/webtrumps-277). (3) Karen McGrane highlights why responsive design makes good business sense and shows you how to implement it from concept to launch (netm.ag/responsive-277). (4) Capable of capturing 360-degree videos, the OZO camera is a revolutionary step for VR production, and a snip at 60 grand (netm.ag/ozo-277). (5) CodeCode Ninja uses specially designed flash cards to sharpen your development skills (netm.ag/ninja-277). (6) Ricardo Zea pushes your HTML and CSS skills to the limit with this book for seasoned site designers and devs (netm.ag/webdesign-277).

22

march 2016


Feed

HOW TO

LEVEL UP FAST We asked our Twitter followers how they keep up with new techniques and keep on top of the latest frameworks

WHO TO FOLLOW

DON’T YOU QUIT ON ME Exclusively for net: the latest in a series of anonymous accounts of nightmare clients

Illustration: Ben the Illustrator (bentheillustrator.prosite.com)

CLIENTS FROM HELL I provided temporary hosting services to a client as a stop-gap measure to get an HTML landing page online as quickly as possible for an upcoming event. While this temporary site was up, I built my client a WordPress site that she would pay to host. It became apparent over the following two years that she would never pay for me to complete that site, so I continued to host the temporary site. I had a clause in the original agreement that if she wanted this site to stay up, she would have to pay a nominal annual hosting fee. She paid the fee in 2013 and 2014, and I have invoices and receipts showing this. In September of 2015, there were some hosting maintenance issues that had nothing to do with her but reminded me why I didn’t want to be in the business of hosting clients’ live sites. So, I informed her via email that I would no longer be offering hosting services and she would need to purchase them directly from a hosting provider. All that remained for her to do – besides finding a new provider in the coming months – was to pay that annual fee one last time. She called me and declared that she had never paid me for hosting services and insisted that I could not simply stop offering a service.

After about 30 minutes of attempting to remind her of our original agreement and explain what hosting is, I told her that I felt our relationship was no longer mutually beneficial and that she would need to find another webmaster. This resulted in her screaming at me, in-between sobs. I ended the call by asking her to call me back when she had calmed down. The next communication I got was from her new webmaster – a friend of her spouse who ‘works in IT’. With him as an intermediary, I got her site migrated to her own hosting account (which I did free of charge, as they used my affiliate link to purchase the new hosting) and sent them both a migration report and a final invoice for the hosting services she had received thus far in 2015. Today she emailed me, once again upset that I was ‘suddenly’ charging her for something she hadn’t had to pay for before. The amount in question? The amount that she had paid twice before but that this year had driven her to screaming sobs? $11.84.

clientsfromhell.net

New ideas and tools can come from a whole range of places. @SaraSoueidan: “I follow people and trends, read about basic concepts, but only learn what I need, when I need it.” @Tevko offered some helpful suggestions for hearing about the latest developments: “Follow tech people, read tech mags, work in coworking places and best, attend tech meetups.”

JUST DO IT A lot of out followers suggested just getting stuck in. “Learn by doing. Pick a project and build something. Learning is limited without a goal,” says @MartinDarksnow. Don’t go overboard, though. @katymoe suggests, “With each new project try one new framework/technique and keep everything else to what you know.”

DON’T BURN OUT “It is easy to get overwhelmed by new things coming up every month,” warns @SaraSoueidan. @myfirstraygun agrees: “I try to use the right tool for the job and continually improve, but I don’t learn the tool of the week for its own sake.” “I build what interests me & try to use the right tool for the job. Fastest way to burnout = trying to keep up with everything,” adds @MartinDarksnow.

march 2016 23


SUBSCRIBE TO NET GET THE NO.1 CHOICE FOR WEB DESIGNERS AND DEVELOPERS DELIVERED TO YOUR DOOR, YOUR DEVICE, OR BOTH

PRINT EDITION ONLY

DIGITAL EDITION ONLY

Take out a print subscription to net and get your copy before it hits the shops. Each issue is packed with the latest web trends, technologies and techniques

Take out a digital subscription to net for on-the-go access to our interactive edition, with streaming screencasts, extra images and more

FROM

£55 BASED ON AN ANNUAL SUBSCRIPTION

SAVE UP TO

29

%

FROM

£45

SAVE UP TO

31

%

BASED ON AN ANNUAL SUBSCRIPTION

Terms & conditions: Prices and savings quoted are compared to buying full priced print and digital issues. You will receive 13 issues in a year. If you are dissatisfied in any way you can write to us at Future Publishing Ltd, 3 Queensbridge, The Lakes, Northampton, NN4 7BF, UK to cancel your subscription at any time and we will refund you for all un-mailed issues. Prices correct at point of print and subject to change. For full terms and conditions please visit: myfavm.ag/magterms. Offer ends 29 February 2016


ARE YOU A WEB PROFESSIONAL? GET OUR PRO PACK SEE PAGE 51

PRINT & DIGITAL EDITION Enjoy a combined print and digital subscription, and take advantage of print as well as exploring the digital experience on the go

GREAT REASONS TO SUBSCRIBE Print edition delivered to your door 13 issues in a one-year subscription iPad and iPhone edition download Android edition download

FROM

£66

SAVE UP TO

54

%

Money-back guarantee

myfavouritemagazines.co.uk/NETMAG16


Opinions, thoughts & advice

WORKFLOW

A FUTURE MOBILE WEB

28

Paul Kinlan takes a closer look at progressive web apps, which cherry-pick the best bits of native apps and the web

CODERS ON BOARD Raquel Vélez looks at how an onboarding-focused approach to development can help get new coders started as efficiently as possible

Q&A

41

UX expert Arthur Moan explains how the discipline is changing, and why it’s helping to take the risk out of launching new products

INTERVIEW

32

We take five with Paravel’s Dave Rupert to find out why our metrics are broken, and how websites can be a window on their creators

Your newest teammate has just pulled the codebase onto their machine for the first time. Unfortunately for them, everyone is away at meetings and won’t be available to answer questions until the end of the week. Now what? When someone joins a team, they already need to deal with HR and get to know their new teammates. Add to that the daunting nature of learning a new codebase, and the first several weeks on a new team are difficult at best. It’s in everyone’s favour to optimise the onboarding process. From a financial perspective, every minute a developer isn’t contributing code is costly. From a developer’s perspective, every minute they’re not shipping code is unproductive. So how do we make onboarding more effective in less time? Let’s do what we always do: let’s look at the code.


Opinion

APPLICATION STRUCTURE Look at how your codebase is structured. Could you send your file tree to another developer (who does not work with you ... that would be cheating), and have them tell you how the application works? Codebases are in a constant state of disarray. The code you write today will be refactored eventually. Therefore, as you’re working through your application, anticipate your next teammate and ask yourself: what can we do, on an architectural level, to ease someone in? Start by using well-named folders that clearly explain what they’re for. Avoid the dreaded ‘util’ file at all costs. Make it explicitly clear where the code lives, so when someone starts hunting around, they’re spending more time thinking about how a chunk of code works and less about where it lives.

TESTS

DOCUMENTATION Are you confident that the documentation around your code is sufficient? In particular, does your documentation cover interdependent codebases? No matter the size of your team or application, there will always be code that depends on the output of some other code. Reduce the number of questions about how functions work by clearly document-

The code you write today will be refactored eventually. Ask yourself: what can we do, on an architectural level, to ease the next person in? ing what each function does, what parameters it takes, and what the output of that function is. To make it easier for someone to understand what each chunk of code does, embrace the ‘many small modules’ approach to writing code. Allow for abstraction at high levels, but be clear under the hood how everything works. You can’t know which part of the codebase your next team member will be working on, so prepare it for anyone. Above all else, make sure the documentation is easy to find. You want everyone on your team to be able to find the answers to their questions with ease.

LET’S DO THIS We’re used to thinking about the user when we create our products. But what if we

consider the newest member of our team as we build our codebases? The best teams share an understanding of where each bit of code lives, what it does, and why. They can then spend their time discussing how that code should work. Working on ‘how’ instead of ‘where’, ‘what’ or ‘why’ is essential to productivity. In short, we need to acknowledge the reality: we are not the only ones looking at our code, and one day we won’t touch it at all. Let’s consider those who are picking up the pieces after we’re done with them, and make it as easy as possible for them to ramp up, as quickly as possible.

PROFILE

How much of your codebase is adequately tested? Do all your tests pass? Do you name your tests? In other words: can someone run your test suite and immediately know what your application is supposed to do? When a newcomer joins the codebase, one of the first things they’ll need to do is run the tests. When they get to the point where they’re fixing a bug or adding a new feature, you want them to find out as soon as possible if they are breaking other parts of the application. Write your tests so someone can run them and read what is supposed to happen as the application runs. This way your new team member will be able to understand what the code is already doing, allowing them to ask more complex questions about the rationale behind it.

Raquel Vélez (@rockbot) is crafty about code and culture at npm, Inc. She also enjoys adorable animals, funny GIFs, and chocolate

march 2016 27


VOICES Essay

28

march 2016


Essay

MOBILE

BUILDING FOR A FUTURE MOBILE WEB Illustration by Ben Mounsey

Paul Kinlan considers how the future mobile web will combine the perks of native apps with the best bits of the web

Mobile has changed the world. Everyone on the planet is getting access to the internet, many for the first time. In India over six million internetconnected smartphones are sold each month. That means each year the equivalent of the entire UK population is getting connected, in that one country alone. The way people are using their devices in India is similar to the way the younger generations do in the UK. Huge amounts of time is spent inside apps. The companies building these apps are now building their own content discovery and distribution platforms to rival the reach and scalability of the web. At the same time, native platforms are incorporating more of the core strengths of the web – most recently, the ability to link to content – directly into their platforms. Watching how millions of people are getting online and almost bypassing the web is galling. A new way of thinking about how we build apps and content experiences for the web is needed. One that is progressive in allowing us to build for the web at large, but takes inspiration from the deeper engagement that can be found in native app platforms.

Linkable: The raw power of the web, sites, pages and paragraphs can all be directly connected to each other and thus shared easily Indexable: The openness of the web and the ability to easily parse the content inside each page means huge amounts of the world’s content can be understood and made available to search Composable: Embedding pages, components and functionality allows us to create and mash-up new experiences quickly Ephemeral: Everything lives and dies with the tab – when a user leaves a site, there are no remnants of it left on the user’s machine taking up resources The web as a medium embodied by SLICE is amazingly rich and powerful, but the world is changing with mobile. As tension builds between the web and native apps, our understanding of the underlying properties of the web needs to adapt.

WEB DRAWBACKS There are at least four core criticisms of the web as a platform that I want to touch upon.

WEB BENEFITS One way to think about the properties that embody the power of web is through an acronym: SLICE. Secure: The web is sandboxed from the device and from other sites, so it can’t leak data

The web is for documents: This was originally true. However, it quickly grew past this to live documents with JavaScript and dynamic content, generated by complex server logic. The web doesn’t have a ListViewController baked in, but neither do

march 2016 29


VOICES Essay the host OSs on mobile – they are part of the framework shipped with the platform The web is slow: Not true; it’s just our experience of the web that’s slow. As an industry, this is our fault – we don’t treat performance as critical The web doesn’t work offline: True – unless we build it to work offline. But who would launch a web browser without an internet connection? The web can’t do X, Y and Z: The specification and standards process means we don’t always get access to the new hotness the second it arrives. However, this does mean we can learn from the mistakes of other platforms before we bake them into the web These arguments imply there is a clear separation between the web on mobile and mobile native platforms, but it is much more complex. Mobile platforms, social platforms and app developers all want properties embodied by the web: content that is hosted inside their own experiences, with no need to install.

tolerant sites; the notification system so you can keep users up to date with relevant information; and potentially much more in the future. But fundamentally, it changes what the web will deliver to users. We’ve started to think of this in terms of progressive web apps.

PROGRESSIVE WEB APPS Progressive web apps are a way to think about building web apps combined with new platform capabilities in the browser. They play to the strengths the web has today (instant access and universal availability, link-powered, with the advantages of an SPA), as well as including some of the abilities of native app platforms. Essentially, progressive web apps combine the best bits of the web (SLICE) and app-like qualities: Robust in the face of flaky networks Load instantly; can be launched from the home screen Responsive to touch, with smooth interactions Able to use device capabilities like push messages

Progressive web apps are a range of new platform capabilities in the browser. They play to the strengths of the web – including instant access and universal availability – as well as including some of the utility of native app platforms

30

march 2016

This new approach requires us to employ progressive enhancement throughout our stack. We need to embrace server-side rendering: site structure, layout and content are rendered and merged on the server and streamed to the browser for it to display. We also need to incorporate single-page app architecture: a shell of the app is sent to the browser, which then takes over navigation with JavaScript and Service Worker. Progressive web apps will ideally render on the server in the first request and then upgrade into client-side rendering with a caching layer provided by the Service Worker. The benefit with this model is that if a browser doesn’t support Service Worker your web app should still work well in the browser, but is dramatically enhanced when a Service Worker is available. We have the tools and a framework to enable us to build modern progressive experiences, but we need to go out and actually build them today. That’s up to us as an industry to do.

PROFILE

APPS AND SLICE It’s not a question of if, but when native app platforms embody all the principles of SLICE. ‘S’ is a core principle of mobile platforms, and ‘I’ has recently been partly solved, with both Apple and Google presenting solutions for indexing app content. ‘C’ has always been available with the libraries and toolkits provided by native frameworks. Most recently, linkability issues have been solved with deep app-linking on both iOS and Android. That leaves ‘E’: Ephemerality. The ability to quickly load an experience or a piece of content, consume it and then leave it is the web’s biggest strength. It is what gives it its reach and ability to work on any platform. That said, the web and browsers would benefit from being less ephemeral at times, and having the ability to act like they are installed and part of the native platform. New APIs such as Service Worker and push notifications are starting to get us there, but they require us to change how we build experiences. 10 years ago, Ajax fundamentally changed the way developers approached apps for the web, and more importantly the expectations of users. Service Worker will be the next step of change. Service Worker gives you access to the underlying systems of the browser: the networking stack so you can build robust, connectivity-

Paul (@Paul_Kinlan) works on the Chrome developer relations team, and focuses on building the next generation of web apps (paul.kinlan.me)


DAVE RUPERT Words by Tanya Combrinck Photography by Jessica Attie

Paravel’s lead developer discusses hostile discourse, sick metrics, and why we need a revolution in the way we think about websites

32

march 2016


Interview

INFO job: Lead developer, Paravel w: daverupert.com t: @davatron5000

march 2016 33


“‘Why did I get involved in websites?’ I think that’s a good annual crisis to have, ” says Dave Rupert. “Part of the reason is that there are so many bad ones. I’m trying to make the internet OK, rather than this advertising wasteland.” Rupert’s career in web development began in 2002 when Trent Walton paid him $80 for a schooling in HTML. Since then, they, along with long-time compadre Reagan Ray, have forged ahead as the three-man web-building team that is Paravel (paravelinc.com). These days, more and more of Paravel’s work involves integrating with large organisations, which means facing challenges brought about by people as opposed to technology. As best practices have become more widely adopted, the actual process of building a website has become more straightforward. The hardest challenges today come from people and the intricate structures into which they arrange themselves. One exercise in particular is sure to uncover tensions: “If you want to discover trouble spots in your organisation, all you have to do is redesign your site’s main navigation, ” says Rupert. “Every department wants to be in there, so there’s this full organisational battle happening in a 50px by 800px stretch.”

TEAM TALK One of Paravel’s best-known accomplishments is Microsoft’s 2012 homepage redesign, hailed by many as a milestone in responsive design. According to Rupert, the combination of personalities on the team was key to the redesign’s success. “I didn’t know project managers could be this good!” he enthuses. “They let us exist in a bubble, shielding us from the politics of any big organisation.” The final state of your website can say a lot about your team, Rupert continues: “Websites are very rarely the product of one engineer or one designer; they’re usually the product of a bunch of personalities clashing. Your website is almost a manifestation of your organisation, and your organisation’s problems. It shows you more of what a group of people does than what a group of technologies can do.”

HOSTILE DISCOURSE But it isn’t only big organisations that need to work on communication and empathy. According to Rupert, the whole web design industry needs to work to improve the tone


Interview

of its online discourse. He describes the tendency to attack, and even demonise, people with opposing opinions as “very weird” – yet he confesses that he’s felt the urge to do it himself. “The phrase ‘Kill your darlings’ comes to mind, ” he says. “If I’ve spent months making something and someone attacks it, my instinct is to protect my baby. So now I’m a mama bear character about my code.” This kind of behaviour is particularly unhelpful for people hoping to enter the industry, says Rupert. “If you are a young coder and you see people coming at each other with guns and knives, [you’re likely say, ‘No, thank you. I’m just going to live at my parents’. If we create a hostile environment, we will not attract talent; talent is probably the first thing to leave in a very weird, crowded and over-excited room. We need to slow our roll, and back away from this religious level of discussion.”

devices, Rupert recently set himself the task of switching to Windows. This idea was conceived when he discovered half of the listeners of ShopTalk, the industry podcast he co-hosts with Chris Coyier (shoptalkshow. com) are Windows users, most likely because the audience is global. It occurred to him that Mac usage exists within a particular geographic bubble: in the wider world, even web designers use other devices. The exercise has proved to be an interesting investigation into the stigma attached to Microsoft products. “I pull out [my tablet] at a meeting and people are like, ‘Woah! A Surface! I’ve never seen one before!” he laughs. “People’s schemas get rocked by someone using a device they don’t expect.” Although he loves Apple products, Rupert maintains that if we assume that everyone is using them to build sites, we strip the web of what it’s good at, which is working on everything. By buying into the monoculture of devices, we bottleneck ourselves. Greater diversity would help us build a better web. In the spirit of making the web work better for all its users, in 2013, Rupert started The Accessibility Project (a11yproject.com). A collection of short, easy-to-read articles on a notoriously difficult subject, its aim is to make accessibility itself more accessible. One key principle is to be forgiving and avoid

“Your website is a manifestation of your organisation’s problems. It shows the world how you work together”

ALL DEVICES, ALL PEOPLE Rupert’s love for the web began at the age of 14, when he created his first site using AOL Pages. Like most people who were there at the start, he is passionate about the web’s founding principles: that it should work on all devices, for all people. Intrigued by the tendency of US and UKbased web professionals to use only Apple

implying that people are bad if they don’t know all the techniques. “If we only imagine the web in terms of able-bodied people, we’ve missed out on a whole sector of the population, ” says Rupert. “We unintentionally give them the finger.”

PURIT Y VS PR AGM ATISM Paravel founder Trent Walton’s post on device-agnostic development (netm.ag/ agnostic-277) outlines the team’s principles for building websites. Sites should be built with the assumptions that people are on slow connections and that they’re tapping rather than clicking. They should be built so they’ll work on old or obscure browsers; and so they’ll look good on tiny screens. Rupert is keen on evangelising these ideals, but also realistic about the feasibility of always being able to follow them. “There’s a theoretical purity, [which is] how a site could be, and then there’s the reality of a boss who opens the door and says, ‘We’re using Angular today!’” he jokes. “How one person views the web might not be how someone who has a job and a boss and responsibility views it. This is kind of a stoner conversation, but maybe every website is the perfect manifestation of what it was ever going to be. Maybe websites are a

march 2016 35


VOICES Interview

reflection of our organisations, more than they are of a theoretical, purified model.”

BLINDED BY TR ADITION Rupert asserts that the industry is too stuck in its ways when it comes to many aspects of design. As an example, he cites Jen Simmons’ concept of ‘sidebar blindness’, which she discussed in ShopTalk 185. According to Simmons, eye-tracking and heatmap data show that no one looks at sidebars; we have been conditioned to ignore them. Yet we all continue to use them, even though no one is looking. Another aspect of the web that needs to be shaken up is advertising. Adverts and tracking are becoming so intrusive that the use of adblockers, which Rupert describes as a “very shocking technology”, has become mainstream. “How to do ads well might be the big thing of 2016, ” he says. “I was very surprised to learn recently that two major web design publications experience a 40 per cent ad block rate. They’re losing out on 40 per cent of their money. That’s sad, especially for these small, independent publishers.” Rupert suggests that the problem should be approached from a more user-focused perspective, and that the value of adverts and tracking data should be reappraised. Mostly as a learning exercise, he runs a single advert on his website that happens to get a click-through rate that’s 10 times the industry average. But while his data suggests that one advert works better than 10, he doesn’t see a valuation 10 times the industry average. Our current model is based around packing in as many ads as possible. “I would like to experiment with a model whereby

36

march 2016

advertisers pay per kilobyte: a metred feed, like when you paid per letter for the classifieds in a newspaper, ” he says.

SICK METRICS Rupert believes that much of the web’s brokenness is brought about by aiming for the wrong things: traffic, Likes and hearts. “We have a perverse view of metrics, ” he says. “We measure time on site, but maybe people shouldn’t be spending a lot of time on your site. Maybe you should be communicating your ideas so effectively that they only stay a few seconds. Our metrics trick us. ‘Oh, I got 10 page views because I did the thing where you click ‘Next Photo’ and it loads a whole other page.’ That’s not better. We have these sick metrics, and we’re poisoning our own well with them.” For Rupert, one area of promise is the work of the Chrome team on progressive web apps and the Service Worker. “The app economy is eroding, ” he points out. “If you spend tens of thousands of dollars to build an app and launch to one market, that’s much riskier than launching to everyone.”

Rupert explains that under the progressive web app model, if you visit a website twice for more than five minutes you will be invited to put it on your home screen. If you do that, some assets will be cached, meaning the site will load faster and behave more like a native app. “That’s such a beautiful invitation, and I think it’s the future of bui lding products efficiently, ” he says. “I hope people will really get behind it.” One of Paravel’s guiding principles is: No one gives a shit about what you do. While this might sound like harsh advice, Rupert has found it’s the best attitude to take when you unveil your latest masterpiece and the blog post gets three Likes. “Realise that everyone’s busy, ” he says. “You invested your heart in something and that’s still valid and good, so don’t let Likes and faves dictate what you’re putting out. Some things will be a smashing success and others will wither on the vine, and that’s OK. Don’t expect success: just enjoy it if it happens.”

“Metrics trick us. Getting 10 page views because clicking ‘Next Photo’ loads a new page is not better”

Next month: Google interaction designer and UX expert Rachel Inman


Opinion

Many sites are now seeing adblocking rates that range between 10 and 50 per cent of their audiences. Unfortunately, a complex web of companies has built profitable businesses based on these flawed metrics, even turning a blind eye to revenue earned from fraudulent bots. To resolve this misalignment, multiple players have to shift their bedrock measures while questioning their reasoning for increasingly tracking users. Can this rapidly eroding trust with consumers be restored before it’s too late?

WHAT’S REALLY AT STAKE?

ADBLOCKING IS A BOYCOTT David Carroll takes a closer look at how marketing technology has failed It’s been called the biggest boycott in human history; nearly 200 million people worldwide are now blocking online ads. Adblockers are browser extensions that prevent digital ads and trackers from loading. Trackers gather data about us through our browsing habits, and are used to target ads and record if we have viewed them. Advertisers only pay publishers when their ad loads into our field of view. Adfraud is also becoming an increasingly concerning trend. This occurs when bots impersonate humans to buy and sell clicks through ad traffic networks. The digital ad marketplace is rife with these vulnerabilities. This is partly because it’s largely powered by JavaScript, but also because traffic data is automated and arbitraged through high-speed trading markets that are fragile and opaque. As a result, some industry observers are

starting to wonder if the digital ad market has become subprime. Fraudulent ad inventory is being bundled in with quality inventory. The impact on revenue is driving publishers to plant increasingly intrusive and invasive adtech on their pages, which in turn drives users to install adblocking software.

WHAT CAUSED IT? The experience of most ad platforms used by media buyers and publishers consists of data-driven dashboards. These interfaces encourage industry insiders to become fixated on traffic reports and conversion rates, with measures limited to the idea of an impression rather than accounting for users’ attention and satisfaction. This promotes a degraded user experience that is irritating at best and harms our privacy at worst.

PROFILE

MARKETING

In Europe, adblocking rates are at least double that of the US. Some speculate this could be related to differing cultural attitudes about privacy: in the EU privacy protection for consumers is applied horizontally across the market, while the US’s policy is split into specific vertical sectors. The mostly US-based adtech industry vehemently opposes regulation, as well as initiatives like the Do Not Track standard proposed to allow people to opt out of privacy-invasive tracking. The industry insists that it gives users a mechanism to control their privacy but this requires us to carefully read volumes of obfuscated legalese in policies. Then we’re expected to laboriously configure a cookie-based opt-out program that is inherently insecure. Installing an adblocker, by contrast, involves a few clicks. There are legitimate reasons to be concerned about our privacy. Researchers are discovering how much of our browsing and mobile data is leaked to unknown third parties. Think about how searching for health-related content on the web can be appended to a personally identifiable profile without our knowledge. In the US, the FBI is now barred from tracking suspects’ browser histories without a warrant. Then what prevents governments from purchasing data about users from consumer data-brokers that embed their trackers on the sites we browse? Adblockers.

David Carroll (@profcarroll) is an associate professor of media design at Parsons School of Design, where he teaches graduates building the near future (medium.com/@profcarroll)

march 2016 37


VOICES Big question INDUSTRY

HOW DO YOU RUN A MEETUP? Meetups are the perfect way to build a community, but they don’t appear out of nowhere. How can you start one? We asked the meetup masterminds

M A RGO T VA N DER K ROG T

OL IVIA OBINEME

Host, CreativeMornings

Host, CreativeMornings Baltimore

creativemornings.com/ams

creativemornings.com/bal

Meetups should be about bringing communities together. In an increasingly digital world, CreativeMornings embraces the traditional ‘tribal’ campfire, connecting likeminded creative people by way of an inspirational talk and free coffee. My advice? Make sure people know what they’re getting and don’t try to do too much. Keep it simple. In an eventsaturated city like Amsterdam, it’s important to do this one thing and do it well.

RICH A RD WIGGINS Founder, MK Geek Night mkgeeknight.co.uk

From my experience, the hardest thing is to find a suitable venue. Look for somewhere that reflects the vibe you are trying to achieve; a good location with proximity to public transport can be key too. If you need sponsorship, you’ll need to be cheeky and ask, and make sure you start this process early. Last but not least, free pizza gets the biggest cheer! 38

march 2016

You’ll need confidence, patience, persistence and people. Confidence: if your meetup has a genuine purpose and you yourself find value in having it, you should be confident that you are indeed capable of putting it together. Patience and persistence: not everybody pounces at the first call. Be persistent in letting them know you’ve got something going on. They will answer soon enough. People: as well as the ones attending, you need people that support you, and more importantly, help you organise. Having a partner or a team can make all the difference, even if they’re just cheering you on. Be sure to thank them afterwards.


JA MES BUR T

JA MES PIECOW Y E

Organiser, Brighton Java

Professor, radio talk show host

meetup.com/Brighton-Java

jamesed.com

Hosting a meetup is like hosting a party: you need to make sure everyone is having a good time and is talking to someone. You should have someone greeting new arrivals and introducing them to the people who are already there. It’s also good not to have too many chairs available before the talks start. People who are standing are more likely to talk to strangers; but if someone has already sat down and started fiddling with their phone, they won’t seem so approachable. L IZ ZIE DY S ON Co-founder, Ladies that UX ladiesthatux.com

Firstly, ask yourself why you want to start a meetup? Is it to solve a problem or to meet other like-minded people? It should definitely be something you are passionate about – as things get busier this will drive you to strive for more. Look at other meetups around you and ask what do you like about them, and what you would change. Make it lean: start small with a relaxed and friendly atmosphere and capture what attendees want and don’t want from the group. This will help you structure future events and stay on the right track.

Setting up and running a successful meetup requires the dexterity of a magician, the grace of a ballet dancer, the thick skin of a comedian and the time-management skills of a Formula 1 driver. For me, the whole process comes down to successful planning and deathdefying execution, all of which requires unwavering teamwork and trust. 90 per cent of a good meetup is logistics and 10 per cent is creating a buzz around the reason you are getting together in the first place. Make it worthwhile and you will have people coming back for more!

K IM K NUP Co-organiser, Brighton tester meetup meetup.com/SoftwareTestingClub

Finding speakers can be hard but I’d suggest approaching people directly instead of putting out an ad. Use the six degrees of Kevin Bacon (since social media, it is only three) to find someone who likes to speak at events and invite them directly. Then set up a Twitter account, create an unusual hashtag and tweet the hell out of your meetup. I also like to scour local tech event calendars and add the meetup to those.

FURTHER READING MULTIPLE MEETUPS

IT’S GOOD TO TALK

GOING DIGITAL

Never mind organising a single meetup: São Paulo-based web developer Hanneli Tavante tasked herself to run 12 in a single month. In a recent blog post, Hanneli reveals how she tackled the challenge and dealt with a few bumps in the road along the way (netm.ag/hanneli-277).

Getting authoritative speakers is one of the toughest hurdles for event organisers to clear, so if you’re a developer with something valuable to share, there will be a meetup nearby that would love you to take to the stage. Meetup organiser Hannes Stiebitzhofer explains the benefits (netm.ag/hannes-277).

LinkedIn software engineer Rachel Sanders decided to combat the reallife obstacles people face when it comes to attending meetups by hosting them on the internet (netm.ag/unhangout-277). By using Unhangout, she could invite people from well beyond Silicon Valley.

march 2016 39


Q&A

teams work. The challenge for people working in UX is to meet these new business demands. It is not enough for teams to conduct tests with users sporadically – research needs to be run strategically and continuously for the findings to be embedded in the company’s KPI analysis. It’s also a challenge to find experienced UX designers and researchers to join the growing in-house teams.

Q&A

ARTHUR MOAN The UX expert on the changing face of user experience INFO Job: MD, Userzoom UK w: www.userzoom.com t: @arthurmoan

net: Can you tell us a bit about UserZoom? AM: The UserZoom (www.userzoom.co.uk) software was created because we wanted to take UX testing beyond the lab and into real-world scenarios. Back in 2007, we believed there had to be a better way to conduct user research than sitting in a lab for hours to complete a study. UserZoom’s founders wanted to empower companies to conduct their research in more than just one location and use samples that were bigger than just five to 10 participants. net: Has the way we approach UX changed? AM: Yes, UX has definitely grown up. Making sure a product or website is usable and fun used to be an add-on to the development process – in most cases, companies would not even make the time to test prototypes or ideas. They would then develop and roll out products that users wouldn’t adopt. This has changed; most companies don’t take that risk any more. They don’t work on an idea without having users validate it first. net: What challenges are facing the UX industry at the moment? AM: Executives now need to understand what user experience research really entails and how UX

net: How are testing technologies, especially for mobile, changing the scope of the profession? AM: Until recently mobile and native app testing was restricted to the usability lab, as technologies were not available to do this remotely in an effective way. This meant you would always be restricted to small sample sizes and highly qualitative feedback. Context of use is king, therefore creating an artificial environment such as a usability lab restricts the capture of useful information. Most clients we work with are adopting a mobile-first strategy and need to ensure they fully understand the experience on both a qualitative and quantitative level, which technologies such as UserZoom now permit. net: Which UX testing tools (apart from your own) would you recommend, for small and large organisations? AM: We only work with large organisations and although not regarded as a UX tool per se, MVT (multi variant testing) is a highly regarded method to optimise conversion rates. Optimizley, Maxymiser and Qubit are three tools I have seen our clients work with very effectively. For small organisations where only a limited budget is available (e.g. £2-5k), the market is littered with low-end, affordable solutions that can deliver some useful insights, which are better than having no insights at all. net: How do you convince stakeholders there is an ROI for UX research? AM: This is getting much easier to do as industry stats clearly state that organisations with a strong focus on UX typically have a higher share price. Due to the overall maturity of UX and the adoption of agile development and testing techniques, UX research is prevalent during the entire product evolution. More stakeholders have experience of UX and believe in the value of research. I would say that convincing them that there is an ROI is now much easier. However, UX professionals still have a job to do in creating and promoting ‘brand UX’ within their organisations and empowering stakeholders to understand what they do, how they do it and what the outcomes of research will deliver to the business.

march 2016 41


NEVER MISS AN ISSUE!

#275 JAN 2016 Your guide to great UI design. Plus: We introduce flexbox – the CSS module that will help you tackle complex site layouts

#276 FEBRUARY 2016 We run down the prototyping tools you need to sit up and take notice of in 2016, and show you how to get started with ES6

SAVE UP TO 31% WITH A DIGITAL SUBSCRIPTION SEE PAGE 24

GOT AN APPLE DEVICE? Download net’s digital edition for your iPad, iPhone or iPod Touch

NETM.AG/NET-IPAD (UK), NETM.AG/NET-IPAD-US (US)

#270 SUMMER 2015 The freelance special: we look at the pros and cons of going it alone, and share tips for landing big clients


CATCH UP ON ANY ISSUES YOU’VE MISSED BY DOWNLOADING OUR DIGITAL EDITIONS

#274 DEC 2015

#273 NOV 2015

#272 OCT 2015

#271 SEPT 2015

Discover how to build perfect layouts without media queries, and take a look at the 15 APIs that will solve your dev problems

Join the Sketch revolution! We help you make the switch to the new top tool. Plus: what makes a great portfolio

We reveal the UX insights you can glean from Google Analytics, and explore how to design for smart devices

We tackle the new design challenges presented by the advent of wearable technology

#269 AUG 2015

#268 JUL 2015

#267 JUN 2015

#266 MAY 2015

Designers share their tips for building a better web. Plus, discover how to optimise your sites for mobile

We run down the 10 top tools you need to build responsive sites, and introduce the Genesis Framework

Discover how to plan, build and maintain WordPress themes, and manage large CSS projects with ITCSS

What should you charge? How do you ensure you’re paid on time? Discover this and more in our special money issue

PREFER TO READ ON ANDROID, PC OR MAC? net is also available on Google Play and Zinio, as well as Kindle, Nook, Windows 8 and more

NETM.AG/NET-GOOGLEPLAY

NETM.AG/NET-ZINIO


GALLERY Inspirational sites ESPEN BRUNBORG

Sensational design and superb development

Espen is a creative director and co-founder of Primate, a small web agency that creates innovative online products in Edinburgh w: primate.co.uk t: @ebrunborg

ANIMATION, JAVASCRIPT

KARIMRASHID.COM Anton & Irene antonandirene.com Designer Karim Rashid is as prolific as he is celebrated. With over 3,000 designs in production and work in 20 permanent collections worldwide, it is perhaps no surprise that his own website had taken a back seat for the past 10 years. Until he commissioned Anton & Irene, that is. With its trademark embrace of engaging interactions, emotive typography and truly deviceagnostic layouts, the duo has delivered a site that invites vigorous exploration. Which was, of course, the point: “Our main goal was to showcase the plethora of products and projects in a visually enticing way,” say the pair on their blog.

44

march 2016

This plethora of products also presented a challenge. How does one deliver 5,000-plus images of varying shapes and sizes in a responsive environment? The solution: a re-imagining of conventional layouts and a lo-fi approach to structuring to give a precise, flexible grid combined with bold (yet unobtrusive) typography. Perhaps the most impressive thing about Rashid’s new site is the seamless transitions between viewports. “We always design all screens simultaneously ... The moment we have an idea for a component or a layout we try it on all screens and see if it makes sense across the board.”

“OK, OK, admit it. Karim Rashid’s new site rocks” GARY PIKOVSKY


Inspirational sites

PIXI.JS, WEBGL, IXI.JS, WEBGL

HISTOGRAPHY.IO Matan Stauber cargocollective.com/matanstauber

project at Bezalel Academy of Arts and Design – is an interactive timeline spanning no fewer than 14 billion years, from the Big Bang to present day. Literally extending over the entire history of the known universe, it is an immense, interactive infographic that challenges our preconceptions of how to communicate complex subjects. Covering topics ranging from literature and music to assassinations, inventions and religion, Histography’s timeline invites us to explore events from our rich past, each dynamically pulled from Wikipedia and represented on screen as a small black dot. There are two modes: the horizontal, left-to-right view that allows the user to home in on a specific time period; or the helix-like time machine that presents a curated list of key events. Stauber says he has always been fascinated by the idea of showing history unfold over time: “Timelines are the most popular way of visualising history, and yet I felt they where always very limited. From the beginning of this project I knew I wanted to create a timeline that is not limited to a year, decade or a period. I wanted a timeline that could contain all of history.”

“Remember what Google Earth felt like in 2005? OK, not quite that good, but not that far away either”

march 2016 45


GALLERY Inspirational sites

SI T E OF T HE MON T H

SVG, ANIMATION, JQUERY

ONTHEGRID.CITY Hyperakt shyperakt.com Although stressful to many, moving office can also be a great source of inspiration. When Hyperakt relocated to Gowanus, Brooklyn, the team’s excitement at discovering the hidden treasures of their new surroundings led to the incarnation of On the Grid: an international neighbourhood guide, curated by designers. What strikes me most about the site is the minimalist yet impressionable brand, which was “designed to be highly structured, yet playful and dynamic, just like the content on the site” (netm. ag/blog-277). The no-nonsense aesthetic shuns

46

march 2016

the typical hero image trap and makes great use of the viewport even at extreme sizes. And then there’s the attention to detail. From the animated logo to the 100 (and counting) unique city illustrations and simple animations, On the Grid clearly isn’t just another lifestyle blog. On its blog, Hyperakt explains how it wanted to create “a reliable resource that captures the true essence of the places we love, through beautiful photography, candid descriptions and design-driven curation.” With more curators joining every month, On the Grid may soon come to a neighbourhood near you.


Inspirational sites WEBGL, JAVASCRIPT, NODE.JS

DEUTSER.COM We Can’t Stop Thinking wcst.com Professional services sites face a particular communications challenge: there is no tangible object to showcase. When creating a new site for consultancy Deutser, We Can’t Stop Thinking needed to figure out how to distill a wide array of services into a single, core benefit. The team decided to focus on the idea that Deutser delivers clarity in an uncertain world. “The dispersed particles represent chaos – something many companies encounter in today’s world. Clarity is represented by the

particles coming together to form something of meaning,” explains creative director Nicholas Scimeca. The metaphor is as clear as the message is strong. Ensuring the experience worked seamlessly across devices was another challenge. “The particles are built using WebGL canvas with the aid of three.js for simplification. We built a custom animation and queuing system, which gave us more control over animation, transitions and frames per second,” adds Scimeca.

“Grafik loves @onthegridcity – @Hyperakt’s ace city guide created and curated by designers.”

march 2016 47


GALLERY Inspirational sites

VIDEO, JAVASCRIPT

LSPRODUCTIONS.COM Whitespace whitespacers.com LS Productions recently broadened its horizons from sourcing great locations (under the moniker Location Scotland) to become what is now the UK’s largest stills and motion service production company. Its new branding and website was produced by Edinburgh agency Whitespace. the piority was to let the company’s work do the talking: “They have such an incredible portfolio, ranging from stills to motion, that our main task was to create a structure that complemented minimal type with image.” This approach is immediately evident on the homepage,

48

march 2016

which encapsulates the company’s broad offering with a fitting mixture of animated typography and video. The main technical challenges – keeping load times to a minimum and managing different crops for the high-quality imagery – were overcome by replacing higher-res images where required, and using JavaScript to dynamically manage the height and aspect ratios of images at various screen sizes. The final result, Bryant says, is a “stripped-back site that uses modular panels, clean type and a minimal colour palette to act as a subtle backdrop for the beautiful work”.


Inspirational sites

VIDEO, JAVASCRIPT

LORDZ.CH Eidenbenz/Zürcher www.e-z.ch “Play is older than culture, for culture ... always presupposes human society, and animals have not waited for man to teach them their playing.” Thus begins Johan Huizinga’s Homo Ludens, where the author discusses the impact of play in society. The element of play is one that Lordz, a dance academy based in Switzerland, takes seriously. For Lordz, dance is not just about movement; it is an art form, a playful means of cultural expression. Tasked with designing a site for the academy, Eidenbenz/Zürcher used this ethos to guide its artistic direction.

“We wanted to create something that confronts the digital experience with the very heart of Homo Ludens,” explains art director and partner Daniel Zürcher. “A playful way of getting an insight into the daily practice of dancing; the movement, the feelings, and so on. To achieve this, we used the newest technology in filming, post-production and, of course, programming.” The result is quite stunning; a uniquely recognisable and inspiring site that truly captures the heart of the organisation through the use of video – a rare feat these days.

march 2016 49


GALLERY Inspirational sites

“Stirling work from iA, ushered through to being live by a whole bunch of talented people”

KIRBY, JQUERY, SASS

MONOTYPE.COM iA ia.net The new Monotype site is, at first glance, extremely simple. Yet its journey from conception to launch started as far back as 2013, when iA joined an in-house team at the type foundry to help develop the vision for the future of Monotype online. The project started with extensive research in order to simplify the corporation’s domain structure and information architecture. Rigorous user testing over a period of six months informed the initial HTML prototypes, from which the main concept was born. “We worked on the the visual language, developing a series of font micro-sites that were tested and optimised over

50

march 2016

time. The basic idea is that the type is the star,” explains Oliver Reichenstein, founder of iA. “The homepage is reduced to the essence. The deeper you dive in the richer it gets.” The team also decided on the daring idea of using a type tester on the homepage. The concepts were developed into content prototypes using Kirby. This allowed iA to not only test the design in a live environment, but also to produce new supporting content, and continuously refine and systematise the design. “Overall,” Oliver says, “Monotype.com was a model of modern web development, from research, to concept to production. And we hope it shows.”


YOU ARE INVITED TO JOIN NET PRO! For more than 20 years, net magazine has been at the forefront of web design and development. Join net Pro and as a special introductory offer, you can save £30!

WHAT YOU’LL GET 13 issues of net in print and digital Annual Industry Report worth £100 Discounts to industry awards including Generate Inspirational design annual worth £9.99 Monthly net Pro email newsletter Special discounts from selected design industry partners

WORTH £371 JOIN TODAY VISIT www.myfavouritemagazines.co.uk/netpro Terms and Conditions: Pricing and savings quoted are compared to buying full priced UK print and digital issues. You’ll receive 13 issues in a year. Prices correct at point of print and subject to change. Full terms and conditions myfavm_ag/magterms. Offer ends 31 January 2016


Sublime design & creative advice

DESIGN CHALLENGE

THIS MONTH FEATURING...

FOCUS ON

This month...

57

SUPERMARKET SITES JE NN A HU S S E Y

PROFILES

Sam Kapila explores what information to share when building an online style guide, and looks at three websites that do this well

Jenna is a UI and UX designer working at Hertfordshire-based agency Daymedia w: jennahussey.co.uk t: @jhussey2

S E A N O’B RIE N

PROFILE

Sean is a designer at True Digital, Bristol. Clients include npower, Fuller’s and Bob Martin w: truedigital.co.uk

58

UX designer Benjamin De Cock discusses his work for online payment service Stripe, helping build a brand to take on PayPal

A DRI A N S P IE GE LT Adrian is a 16-year-old designer currently working at UX agency COBE in Munich w: adrianspiegelt.com t: @adrnspg

BRIEF

HOW WE BUILT

64

Mozilla and Rachel Nabors explain how they built DevTools Challenger, an online showcase for Firefox’s new CSS visual editing tools

This month, we’d like you to mock up the homepage of a supermarket’s site. As well as aesthetics, think carefully about what information visitors will expect to see and how easy it will be to order the products they want.


Design challenge

2

4

1

5

3

JENNA HUSSEY

SHOPBUY This shopping site offers two modes, catering to impatient shoppers and determined browsers alike

Although the experience of online grocery shopping differs from in-store shopping, there are similarities in the types of visitors: there are the ‘get-in-get-out’ folk and there are the ‘browsers’. Shopbuy aims to offer both audiences a satisfying experience. Shopbuy’s core feature is the ability to switch between shopping modes easily. We’re all familiar with shopping for individual items, but I’ve also chosen to focus on shopping by meals so users can purchase everything they need quickly and easily. They can also select how many they’d like each meal to serve and the site will identify the quantities needed. Shopbuy is heavily community-based. Users can create their own meals, which are then available for anyone to add to their own basket. ‘Browsers’ looking to try something different can get inspired by someone else’s cooking, whilst users looking to get in and get out quickly can do just that.

CLOSE UP (1) The shopping mode toggle allows the user to switch between how they wish to shop: by meals or items. This switch changes what content is displayed to the user and how they navigate, but the two modes are structurally consistent. (2) The search bar takes prominence in the header so it is easily accessible for users who have a good idea of what they’re looking for. (3) The quick buy option allows the user to add an entire meal to their basket: great for those ‘get-in-get-out’ shoppers! (4) The user’s basket can be displayed and hidden at any point during their shopping experience: no need to take them to a separate page. (5) The ability to edit the servings is a cool feature of the site. The user simply selects how many servings of a meal they would like, and the site identifies the quantities needed and updates the interface and total accordingly.

MY MONTH What have you been doing this month? Finishing up some longrunning web projects and starting some very exciting new ones. A bit of branding work here and there, too. Which sites have you visited for inspiration? designtaxi.com and siteinspire.com. What have you been watching? I’m a Celebrity... (obviously!), The Affair, and re-watching the Star Wars films. I’m getting prepared! What have you been listening to? Anything by Hans Zimmer or Jimmy Eat World.

march 2016 53


SHOWCASE

Design challenge

1

2

4

3

5

SEAN O’BRIEN

MY GOODNESS An online supermarket aimed at discerning shoppers, focusing on local, sustainable produce

MY MONTH What have you been doing this month? Designing an outpatient dashboard app and helping to redesign True’s website. Which sites have you visited for inspiration? behance.net and fromupnorth.com. What have you been watching? American Horror Story. What have you been listening to? A lot of scores, mostly by Hans Zimmer, Henry Jackman and James Newton Howard.

54

march 2016

My Goodness is an online supermarket aimed at the more discerning shopper. It isn’t about low prices; it’s about the quality and provenance of the products. The website delivers local, sustainable produce straight to the shopper’s kitchen. Site content will be tailored to the user based on their location, serving them with produce from their area. By helping customers support local, independent retailers, My Goodness makes responsible shopping convenient. On a return visit to the site, the user would see a logged-in environment, offering personalised content, including the option to reorder their latest basket, see the newest suppliers in their region and explore seasonal recipes with local ingredients. The responsive design uses beautiful food photography to focus the user’s attention on the high-quality produce central to the brand.

CLOSE UP (1) The global navigation has a simple feel, distinguishing it from the rest of the site design. It’s fixed to the top of the page for constant and easy access. (2) My Goodness has a more natural, organic feel than competitors’ websites, representing the brand’s sustainable ethics. (3) Personalised content based on the user’s location showcases local suppliers as well as new products from the surrounding area. (4) The product page utilises the Google Maps API to identify the exact location of product suppliers. (5) Feedback from similar local customers helps give credibility to suppliers and their products.


Design challenge

2

3 4

1

5

ADRIAN SPIEGELT

F&V A clean, minimal website focusing on discounted goods and time-limited offers

Supermarket websites, especially on desktop, tend to be loaded with very intrusive graphical objects. These are mainly there for marketing purposes, with the aim of selling more products, but they can be very disturbing to the customer, who may just want to buy one specific thing. I wanted to present a friendlier, more appealing web presence for my supermarket, so I made a complete site just for today’s offers. Here, you can find discounted goods, goods that are available for a limited time and so on, all in a beautiful interface that gives every single object space to shine. But what if you want to look for a specific product? Click on Search and you are greeted with a prominent search bar to help you find exactly what you are looking for. The images in the background fly up from the bottom of the page with a subtle parallax effect.

CLOSE UP (1) On mobile devices, the navigation bar is collapsed into a hamburger menu, which makes the header cleaner and easier to look at. (2) On a bigger screen, the header is displayed in its default state. The items change when you hover over them and stay in the same state if you click. (3) Each item is displayed with an appealing image to encourage customers to buy the product. (4) Inactive items in the main area are dimmed, but can still be seen easily by the user. (5) The main screen is basically a search bar: the most important feature on a supermarket site.

MY MONTH What have you been doing this month? Mostly working at COBE, but also thinking about ideas for some of my own projects. Which sites have you visited for inspiration? siteinspire.com and patterntap.com. What have you been watching? I’ve finally finished watching Narcos and I’m starting to watch Mr. Robot. I can really recommend both. What have you been listening to? A lot of Drake, The Weeknd and Flume.

march 2016 55


NEXT MONTH

50 FREE TOOLS FOR WEB DEVELOPERS From HTML, CSS and JavaScript to RWD - we list the amazing free tools every web pro needs to know

PLUS Cutting edge designs with CSS Blend Modes

Build interactive, Flash-like sites with CreateJS

FREE GIFT! 20-page responsive web design guide

ISSUE 278 ON SALE 18 FEBRUARY PRINT EDITION, BACK ISSUES AND SPECIAL EDITIONS AVAILABLE AT

myfavouritemagazines.co.uk DIGITAL EDITIONS AVAILABLE ON ITUNES, GOOGLE PLAY, KINDLE, NOOK AND ZINIO

net.creativebloq.com


Focus on

FOCUS ON

STYLE GUIDES Sam Kapila explores what to consider when building an online style guide, and looks at three sites that do it well

PROFILE

2015 seemed like the year of the style guide. While it’s awesome to see more and more websites sharing their design guidelines online, there are a few points to consider when creating your own. First, support your design elements with clear instructions. There are a number of online style guides out there that include all the elements of a design system, but with little to no information about when and why to use them. When it comes to writing do’s and don’ts, captions and labels, communicate as if you’re leaving the team, but want the system to live on. Share the goals of the system and its elements, and your expectations of what the outcomes should be. Be consistent with voice and tone. Second, consider the evolution of the design. Include patterns that may not exist now but might in the future. Considering how patterns will evolve helps a design system stay in place longer. Starbucks’ older style guide (netm.ag/star-277) may not include a lot of supporting content, but it does use sample layouts within its grid system that weren’t used regularly in the previous version of the site. Finally, take advantage of the interactive style guide. Build out elements that support multi-device design and the various states of those elements (like hovers on buttons), then design the style guide to reflect those patterns and interactions. When a style guide can show how elements change when a user interacts with them, it adds an extra layer of depth to the experience.

Sam (samkapila.com) is a designer living in Texas and an instructor at The Iron Yard, an international, immersive coding school

1

2

3

(1) NC.gov’s style guide (digitalstyle. nc.gov) includes supporting captions for design and markup patterns, setting the tone for

how these elements should be used. (2) CodePen’s guide (codepen.io/guide) has multiple button states, a responsive grid that follows its

grid system, and goes deep into form validation styling. (3) Frontify, a service that helps generate style guides, uses its own

product to build its style guide (frontify. com/styleguide). The result is well-organised, and goes into incredible detail.

march 2016 57


INFO Location: Emines, Belgium Designing since: 2007 Areas of expertise: Interface design, UX, frontend development Clients: Stripe, Postbox, Jolicloud


PROFILE

BENJAMIN DE COCK medium.com/@bdc

The UI designer putting the glamour into payment processing at Stripe Benjamin De Cock knows a thing or two about user experience. For the last three years he’s been working remotely at PayPal competitor Stripe, helping evolve the UX with the launch of each new product – no small feat given the startup’s rapid rate of expansion. Prior to this he ran his own web design business, Deaxon, and his task-sharing app (so much so that Stripe acquired it shortly

with De Cock to discover the highs and lows of life as a UX designer. net: What does your role at Stripe involve? BD: I start by making sure I understand the real behind some immediate, obvious and yet issues could be avoided early on in the process

the product should do, but also what it shouldn’t

net: In terms of UI, what are the biggest challenges you face at Stripe? BD: There are many interesting design Working together Benjamin de Cock (right) with fellow Stripe designer Greg Cooper

is a payments company handling a sensitive and

march 2016 59


SHOWCASE

uilang (above) This tool provides a human-friendly language to help designers get into code Dribbbox (right) Dribbbbox, a side-project helping designers build their portfolio

meets those requirements without

and it’s getting hard to get everything

relationship between the merchant and

security and privacy by using a visual language that’s reassuring, robust

exactly glamorous, and yet we want our customers to be delighted and excited by

The other interesting challenge is net: How do you evolve the site’s UX, while also keeping it familiar and usable? BD: trying to make every page look unique

swamped with work is that it makes the priorities more obvious and prevents us

net: Which product release/page update has been the most challenging so far? BD: The Bitcoin announcement page

that cryptocurrency isn’t exactly the easily imagine my despair! It was completely unexpected, but might send the wrong signal and make

We try to avoid this issue by sticking

it’s something we’re actively working on,

Stripe iOS dashboard De Cock and Michaël Villar took the lead on the iOS app

60

march 2016

net: How do you keep up with the speed at which Stripe is growing? BD: We don’t! Joking aside, the design team has been growing much more

product and how you integrate it to your site [see image on facing page] net: You specialise in making complex interactions feel obvious. What advice would you give someone facing this kind of challenge? BD:


OFFICE CULTURE

BENJAMIN DE COCK What’s on your desktop today? A MacBook Pro, a Cinema Display, a Stripe-branded Moleskine notebook and three little adorable woolly Yoshis. Stripe Bitcoin Finding the joy in a dry subject matter for the Bitcoin announcement page on Stripe was one of De Cock’s biggest challenges

What three things make your life worthwhile? Websites: Dribbble, Twitter, GitHub Apps: Sketch, Terminal, Slack Bands: Bonobo, Editors, Boards of Canada

Unique, innovative experiences come behaviours and interactions, even though

uilang tries to remove the barrier to entry to programming by providing or to skip some genuinely necessary text

What do you have on the walls of your office? A single lovely poster of Bob Dylan by Milton Glaser.

What will you do for lunch? Either the most boring sandwich ever or a super-fancy restaurant!

What hours do you work? your design choices, and make sure the

9am to 6pm.

about code and helps them switch to

Designing something good is a huge so it’s psychologically very hard to throw

net: If you had to pick one project that best represents your portfolio, what would it be and why? BD: [see bottom left] was exactly what I believe in: one project, collaborating closely and moving [Villar] and I had

net: Please tell us about uilang. What is it and why did you create it? BD: so many designers being limited by their

What’s so good about being based where you are in Belgium? The calm, the nature, the authenticity.

How often do you hang out with other designers? I usually meet a few people when I’m travelling to San Francisco, but otherwise I almost never attend meetups, conferences etc. I like people, but I also like being alone.

Describe your working culture in three words ... Always. Keep. Improving.

For example, the app could have been either a lightweight companion app

march 2016 61


SHOWCASE

TIMELINE

A look at the key dates in De Cock’s career SEPT 2007 Starts teaching HTML and CSS part-time

JAN 2008 Sets up Deaxon as his official one-man studio Stripe Open Source Stripe relies a lot on open source, and contributes its efforts as a way to give back to the community. This page lists the projects Stripe has open-sourced over the years

JUN 2010 Marries his wife, Jessica

SEPT 2010 First son is born

important part isn’t really about making the right choice, it’s just about making a choice – having a clear direction and

net: What advice would you give to someone who wants to join a startup in a similar role to you? BD:

Second, because I think the app has

MAY 2011 with stark and serious data (revenue Launches his first personal project: Kickoff

your project will also encourage you to set the right priorities and help you realise what’s truly important in the success

toggle with parallax, the cards are swipeable, the animations use spring

FEB 2012

the visual design, which gave us a solid

net: What’s the biggest lesson you’ve learned so far in your career? BD:

net: Stripe has employees all over the world. How do you solve issues created by the timezone difference? BD:

every project is the only way to truly grow as a designer, attract interesting clients and projects, and be genuinely happy in

Starts freelancing for Stripe

DEC 2012 Kickoff 2.0 goes into public beta, to much euphoria and panic

MAR 2013 Joins Stripe full-time

JULY 2014

Francisco since the very beginning,

Second son is born

net: What’s the biggest mistake people make when it comes to user interaction? BD: natural (and understandable!) inclination

MAR 2015 creating visually impressive mockups that look great on Dribbble but don’t

Gives a talk at CSSConf Australia about CSS animations

with your design choices, and learn to tools not only help remotes stay in the loop, they provide history and context

62

march 2016

Next month:


SHOWCASE

How we built

HOW WE BUILT

DEVTOOLS CHALLENGER How Mozilla and Rachel Nabors built an interactive deep-sea wonderland to showcase Firefox’s new visual editing tools

2

5

3

6

1

4

BRIEF To mark the release of Firefox DevEdition 44, Mozilla tasked a team of designers, including web animator Rachel Nabors, with creating an interactive experience that would showcase its new visual editing tools.

64

march 2016

CLOSE UP (1) Because the site uses both audio and animation, users can first choose how they want to experience the dive. (2) The page was transformed into a scale model of a 6,000 metre deep water column in the open ocean. (3) The UI is opacity-based instead of motion-based, to reduce the risk of motion sickness for people suffering vestibular disorders. (4) Users are challenged to use Firefox Developer

Edition’s new developer tools with each creature they encounter. Successes are rewarded with more information about these animals. (5) Users are given videos and step-by-step instructions to complete each challenge. A progress bar keeps track of discovered challenges and their completion status. (6) For narrow viewports, the layout switches to a single column.


How we built RACHEL NABORS

JEN FONG-ADWENT

MAT T CL AYPOTCH TIMELINE

The key stages in the project 8 SEPT Rachel is a web animation engineer, and was also involved with art direction and writing w: TinMagpie.com t: @rachelnabors

Mozilla’s Jen worked on audio design and acted as project organiser on DevTools Challenger t: @ednapiranha

‘Potch’ is JavaScript developer of DevTools Challenger and also does developer relations for Mozilla t: @potch

Jen Fong-Adwent approaches Rachel Nabors to get involved in the project. Rachel suggests a deep-sea theme

21 SEPT In early November, Mozilla released a new version of its developerfocused browser, Firefox Developer Edition 44. The browser also boasts powerful new creative tools designed to make CSS animation faster and easier, which Mozilla wanted to showcase. A creative team led by Mozilla’s Jen Fong-Adwent and web animator Rachel Nabors built DevTools Challenger (devtoolschallenger.com), a stunning interactive demo set deep in the ocean. Users can take the latest tools for a spin while bringing Kory Bing’s beautiful sea creature illustrations to life. net: What was the brief and how did you approach it? MC: The brief was to build an interactive experience that showcases the new design-oriented tools in Firefox Dev Edition. Once Rachel joined, the brief evolved rapidly to reflect her vision of what was possible in the timeframe. JF: We started by thinking about a theme, and how creatures could interact with the tools and their features. Our top priorities were to keep the demo engaging, succinct, educational and also fun. net: How useful are Firefox Developer Editions’ latest visual editing tools? RN: I’m so pleased with these tools. I went from having to refresh the page to see every little change in CSS animations, to making the changes directly in dev tools to find what works. The timeline scrubber will change your

animation process. It’s so much easier to back up a one-off animation or transition to see what it looked like, tweak it, then play it again. But for me, it was Firefox’s extensive support for editing and replaying CSS animations inline that made the biggest impact. My workflow was smoother and getting animations just right took much less time.

Exploration of the look and feel begins. Mozilla approves, and commits new team-mates to the project

28 SEPT Frontend development begins; music and sound effects are some of the first contributions to the codebase.

5 OCT net: What are the key design features of the experience? MC: There’s a visualisation of progress as you descend through the page, emphasised by the navigation that appears on the right. Bubbles appear for each challenge as they first scroll into view, and are marked ‘complete’ once a particular task is done. Managing this state and automating it wound up being the core work. I built a little state class called GoalManager that tracked progress and registered each challenge. Audio cues and in-page events could then be triggered, for specific challenges or globally. This bit of the project was fairly standard, vanilla JavaScript. Individual challenges had specific evaluation and success callbacks, and a ‘challenge complete’ event was dispatched for the audio cues as well as in-page changes.

Illustrations start pouring in. Tight communication ensures they are exactly as required

12 OCT Interactions, challenges and page layouts get nailed down. The experience is tested on motion designers at Blend fest

23 OCT The team hits its deadline for completing the code. No more features are added

26 OCT Portions of interaction are honed, details are added and motion design polished

3 NOV net: Tell us about the sea creatures … RN: I hired the excellent illustrator Kory Bing to take on the challenge of creating all the deep-sea critters. After extensive research, I came up with a series of

DevTools Challenger launches during Mozilla’s View Source conference

march 2016 65


SHOWCASE

How we built 2

1

3

EVOLUTION

A look at how the DevTools Challenger project developed (1) The most important artefact was a moodboard that was put together at the beginning of the project and changed very little until the end. (2) Most ideas were sketched in a notebook before getting hashed out directly in the browser. There were no mockups, only doodles and assets. (3) All the animals at our disposal had to be sorted by where they live in the water column. (4) Each of the features that needed to be shown were put on a card and different creatures that could demonstrate them were added as sticky notes. (5) Only after determining which creatures and challenges happened at what depths could the storyboard be created. (6) The first iteration of the page had near perfect copy and animations. Interfaces and logos were left until last. (7) The logo was one of the final visual elements to be added. It finalised the project’s name.

5

6

7

66

march 2016

4


How we built

interaction ideas and a list of specific creatures to demonstrate them. Kory illustrated the fish to perfection within stringent requirements, sending over PSDs with the fish in two frames of animation. Animating the fish was another story. net: How did you tackle the animation? RN: It was all CSS animation, steps() timing functions and generated sprites. I had a special set of Photoshop actions that converted the images to the right dimensions, and I used a set of custom mixins I made using Compass’ spriting functions to arrange and reference them. I’ll need to find a different solution for future projects, as Compass’ support is being wound down. The sprites were pretty big, so I ran them through tinypng.com to help compress them. When it comes to animating bitmap images, don’t do it by hand. Automate as much as you can. It’s busy work that a computer can do faster than you! net: At which stage was the sound introduced into the workflow? JF: The soundscapes and sound effects were introduced during early planning of the high-level scope of the demo. We went through a couple of variations for the ocean quadrants and various sound effects to see which fitted and how we could combine influences from

Bounce back Users open up Firefox Developer Edition’s dev tools to accomplish challenges, like getting this nautilus to bounce right by editing its cubic-bezier timing function

existing music elsewhere. The primary audio software used was Propellerhead’s Reason. We used the Web Audio API to load and control the audio. net: What would you say was the biggest technical challenge? MC: One of the key design metaphors was the notion that the viewport height represented 200 metres. This meant that the positions of all the content on the page were vertically responsive – that is, directly tied to the viewport. However, scroll position in browsers is expressed absolutely – resizing the window does

Deep dive The deeper you go, the darker it gets; visually, graphically, and even in terms of the audio

not adjust one’s scroll position. This meant if you resized the browser, the content you were viewing would drift out of the viewport. Worse, opening the dev tools would cause a massive jump in scroll position. This was a neardealbreaker for an experience so tied to the very idea that you can pop open the dev tools! net: How did you compensate for the scroll drift? MC: It wound up being one of the more novel pieces of code I’ve had to write. Because we were using a scrollwaypointing library, I could see a list of all the elements in the viewport. As users scrolled, I would determine the segment that was most in view. This required a decent amount of calculation, so I used a debounce that triggered the calculation only after scrolling had stopped. On every scroll event, however, I captured the distance between the current position and the top of the most in-view element. On resize, I was able to use this information to restore the scroll position to match this offset. The result is resizing that feels remarkably stable, considering the trickery required. Next Month: A synaesthetic creation for the Paris Orchestra

march 2016 67


Cover feature

The way we build our CSS is in the midst of a major overhaul. Dan Cork introduces some of the features and tooling revolutionising our style sheets

AUTHOR DAN CORK Dan (@dancork) is a developer at Hungry Geek, the engineering team at Holiday Extras. He is passionate about CSS and UI development dancork.co.uk ILLUSTRAT0R MAKERS COMPANY Makers Company is a studio of makers, artists and designers based in Cape Town, South Africa. It aims to create work that is honest, inspiring and fun themakers.company

On my way to Berlin last September, I was greeted with a smirk when I told a colleague I was heading to a conference on the sole subject of CSS. “Cascading Style Sheets? I thought they were dying out!” he exclaimed. Frontend development has been through a transformation in the past decade. The skillset required to work in the browser now includes accessibility, performance and a range of JavaScript application frameworks such as AngularJS, Ember.js, Backbone.js and most recently React. However, CSS had sadly been a little neglected. In 2006 Sass was born, and three years later along came Less. With their proprietary syntax, these preprocessors attempted to haul our style sheets into the future, but they were merely bandages on an otherwise ailing technology that didn’t conform to our idea of what modern web development should look like. Fast-forward to 2015 and things are looking much rosier for CSS. The oncestagnant language has undergone a revolution, in both the browser and the tooling available to us.

MAINTAINABLE CODE As the websites and applications we built increased in size and complexity, the many pains of working with CSS at scale were highlighted – most notoriously

the singular, global namespace that makes code maintainability impractical for frontend developers. Regardless of whether we applied a naming convention such as BEM, this lack of encapsulation still meant selectors could alter UI elements unintentionally. More troubling is that, in certain situations, our styles could fall foul of the cascade and never be applied at all. In his talk on CSS and React (netm.ag/ chedeau-277), Facebook’s Christopher Chedeau highlighted the absurdity that for JavaScript (and indeed many other programming languages), it is considered best practice to avoid the global scope. So why have we become so accepting of it in CSS?

MODULAR CSS Unfortunately there is still no method of creating a genuine local scope in browsers, but projects like CSS Modules (github.com/css-modules/css-modules) have sprung up that allow us to write modularlike style sheets and import them into our JavaScript components. There’s no need to make your selectors obscure as they’re already self-contained in a file (e.g. components/input.css ). The hard work required to transform these into selectors that are unique in the global scope will be done by your module loaders. Take a look at how a React input component may look.

march 2016 69


Case study

FROM LESS AND SASS TO POSTCSS At Holiday Extras we’ve primarily used Less, as this is what previous versions of Bootstrap shipped with. After seeing Aaron Ladage’s awesome talk (netm.ag/ladage-277) on PostCSS though, I felt inspired to attempt to convert our UI toolkit (github.com/ holidayextras/ui-toolkit) – a library of Reactbased UI components – over to that. My initial reaction was that of delight; writing web standards just felt right! I removed the proprietary syntax and left pure CSS, including a lot of the new specifications such as variables and colour functions.

Global problems In his talk on React and CSS, Christopher Chedeau explores the issue of global scope

/* components/input.jsx */ import React from 'react'; import styles from './input.css';

/* Less */ @blue: #5B83AD; .header { color: @blue; border: lighten(#F90, 10%); }

export default class Input extends React.Component { render() { return <input className={styles.error}>} /> } }

/* Sass */ $blue: #5B83AD; .header { color: $blue; border: lighten(#F90, 10%); } /* CSS (PostCSS) */ :root { --blue: #5B83AD; } .header { color: var(--blue); border: color(#F90 l(+10%)); } PostCSS has an extensive range of plugins, including certain things that technically aren’t CSS. One feature that still feels sadly neglected is nesting – something that even a hardened lover of standards can’t live without!

/* components/input.css */ .base { /* base styles */ } .error { composes: base; /* custom styles */ }

/* rendered html */ <input class="components_input__base__37495f components_input__error__a8g3kd" />

Circle function The CSS Shapes spec enables us to create shapes for our content to wrap around

Our classes are obfuscated into strings that should survive the cascade. Notice how we actually end up with two classes; this is the result of composition. In our CSS file we added composes: base; as a property


of the error class. The usage is similar to extends for Sass, but instead of duplicating the properties, it references the two classes in the export to our JavaScript module.

The arguments it accepts are circle(radius at originX originY) , and these can be absolute or proportional units (e.g. circle(50% at 100px 150px) ). The origin is where the centre of the circle sits relative to the

Top read Glen Maddern’s blog on Interoperable CSS is a must-read (glenmaddern.com/articles/ interoperable-css)

Interoperable CSS This interchange between JavaScript and CSS is made possible as CSS Modules compile to a lowlevel file format known as Interoperable CSS (ICSS). It allows us to declare our style sheets as dependencies of our JS, meaning only the required styles are loaded. For more on ICSS, take a look at Glen Maddern’s blog (glenmaddern.com).

We can use the new CSS Shapes spec to create shapes for our content

CSS SHAPES The elegance of print layouts has always been just out of reach for the frontend developer. Since its inception, CSS has limited us to a choice of two shapes: square or rectangle. Though we can give the illusion of other shapes by manipulating borders or applying background-images, our content will still only ever sit within a box. As progressive enhancements go, the new CSS Shapes specification is one of the best examples. We can use it to create simple or complex shapes for our content to flow around. Browser support is growing and for older browsers that don’t support it, our layouts will look as they always did.

The circle function With the circle function you can create a circle path based on the dimensions of an element, or pass custom properties to the function to customise it.

top-left point of the element (see a CodePen example at netm.ag/code-277. .shape { width:150px; height:150px; background: #f90; float: left; margin: 0 30px 10px 0; } In the CSS above, we have a floated element such as an image within our text. In browsers that don’t yet support CSS shapes, users would see a layout that looks like fig 1 (see image on facing page). We can enhance this with the circle function.

march 2016 71


FEATURES Cover feature

shape-outside: circle(); By adding the shape-outside property (fig 2), we tell the browser to format the surrounding content around the path we have defined, rather than the linear box. In this instance, as we’re not passing any arguments to the function, it defaults to a circle with a radius of 50 per cent and an origin matching the centre of the element. As you can see from the example, the background of the element is still a square, causing the text to overlap. One option to fix this would be to apply a border radius of 50 per cent. However, the circle function can take care of this too. -webkit-clip-path: circle(); clip-path: circle(); With clip-path (currently only supported in Chrome with a prefix) we can apply the path as a mask (fig 3). Now our content is wrapped around the floated element, rather than over the top of it.

Above left Clippy (bennettfeely.com/clippy) lets you visually create custom shapes and generates the CSS output Above right This illustration sums up the theory of responsive web design perfectly

72

march 2016

are some great tools available, like the CSS Shapes Editor extension for Chrome (netm.ag/editor-277) and Clippy (bennettfeely.com/clippy), that we can use to visually build shapes and auto-generate the polygon code for us.

Images Any images with a transparency can be used to automatically create a path, by passing the URL to the shape-outside property. /* html */ <img src="/path/to/img.png" /> <p>Lorem ipsum….</p> /* css */ img { float: left; shape-outside: url(/path/to/img.png); }

More shapes

For a great talk on this and other layout woes, I recommend ‘Modern Layouts’ (netm.ag/ simmons-276) by Jen Simmons.

For elements with irregular dimensions we can use the ellipse function. This accepts similar arguments to the circle function, with radius split into two: ellipse(radiusX radiusY at originX originY) . If you want extra customisation, the polygon function allows us to build our path using pairs of X and Y coordinates to create unique shapes. There

When media queries first hit our browsers, the variety of devices on the market with the capability of delivering the full web experience was limited. For many, mobile was very much an afterthought, or in many cases not a consideration at all.

MEDIA QUERIES


In-depth

LAYOUTS: THE PAST, PRESENT AND FUTURE Since I first started tinkering with the web back in the late 90s, right through to the present day, I’ve noticed an ever-present theme within the industry. We’re always searching for a better way to do layouts. In the early days we constructed our layouts with frames. We then decided tables were the way to go. In more recent years we’ve turned to divs. With divs we built grids and frameworks, media queries brought us the age of responsive web design and at present the hot topic is flexbox. Is this the solution we’ve been longing for, or is something else on the horizon? CSS Grid Layouts (www.w3.org/TR/css-grid-1) has

This led to the creation of the ‘mobile first’ methodology. This paradigm was easily the best approach to get designers and developers in the

The polygon function allows us to use pairs of create unique shapes right mindset to create immersive experiences for our shiny new pocket computers. Responsive web design went from being a pipe dream to the norm, and the web became a lot more accessible. Is this methodology still appropriate in 2015 and onwards though?

Mobile first For an in-depth look at mobilefirst design, try this book by Luke Wroblewski (bookapart.com/products/ mobile-first)

been in the making for the past four years. It first appeared in IE10 back in 2012 and since then has undergone quite a journey. What makes it interesting is the ability to create named areas, taking child nodes out of the flow of the page. The idea isn’t a new one – in fact a similar frame-based idea was discussed back in 1996 (www.w3.org/TR/NOTE-layout). The specification as it stands today looks like this: .my-grid { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; } We specify the areas of our layout using the gridtemplate-areas property. Each string is a row and each word within a string is a column. What sets this method apart from any that have come before it is its flexibility, the layout is no longer specified in the markup. Whole layouts can be reworked with ease by simply changing a class or using a media query. Rachel Andrew charts the full history of this exciting spec in her blog post ‘Three years with CSS Grid Layout’ (netm.ag/andrew-277).

/* Mobile */ @media only screen and (min-width : 480px) {} /* Tablet */ @media only screen and (min-width : 768px) {} /* Desktop */ @media only screen and (min-width : 992px) {} /* Large Desktop */ @media only screen and (min-width : 1200px) {}

CSS talks The latest hot topic is flexbox, which Rachel Andrew explored at Generate London (http://netm.ag/flexbox-277)


FEATURES Cover feature

Fragmented design A visualisation of Android’s device fragmentation as of August 2015

At the time, it was appropriate to distinguish between mobile, desktop and – later on – tablet as that is all there was. Our stylesheets would look something like the previous example, with explicit breakpoints for each type of device. There are a few fundamental problems with this approach in the modern day though. The number of devices on the market has exploded in recent years, and Android’s rise in popularity has created excessive fragmentation of device size and resolution. Couple this with other devices like iPhones and iPads, as well as the huge range of laptops and desktop computers available, and it has become simply impractical to target an individual device based on its screen. Herein lies the problem with this methodology: targeting devices. Paul Adams wrote a great post on the subject (netm.ag/adams-277) in which he

proposes a different approach: “Focus on jobs, then screens, but never devices”. Regardless of which methodology we talk of, there is a general agreement in the web community on one golden rule: content is king. Content is the meat of your site or application and it should be the primary consideration.

With the hover feature, can relay a hover state This is why from a UX perspective I am intrigued by the concept put forward by Adams. He suggests we make our first focus the jobs (actions) our user is trying to perform, then the screen. Never the device though. This way we can “[service] those jobs where they happen”. The Level 4 specs in Media Queries can take us some way to achieving this without relying on JavaScript.

Hover The hover feature gives us the ability to detect whether the main input for a device can relay a hover state. For a mobile or tablet, this would be the touch screen, for a laptop the trackpad, for a desktop the mouse, and so on. The feature will accept one of three values: None: Applicable when the input can’t hover or there is no pointer

RESOURCES CSS is moving fast and staying up-to-date can be tough. Here is a list of resources that should steer you in the right direction.

BLEND MODES netm.ag/kravets-277 Una Kravets (@una) spoke at last year’s CSSconfEU in Berlin, and her talk on ditching Photoshop and instead using blend modes and filters to create the same effects in the browser is superb.

74

march 2016

FLEXBOX www.zomigi.com For many, Zoe Gillenwater (@zomigi) is the guru of all things flexbox. Her website contains plenty of information on the subject, including links to some of her great talks.

THE WEB AHEAD www.thewebahead.net net Podcast of The Year 2015, The Web Ahead is a weekly show with a heavy focus on CSS

and the UI, hosted by Jen Simmons (@jensimmons). The list of previous guests is as extensive as it is impressive.

WHAT ELSE IS COMING? drafts.css-houdini.org The CSS-TAG Houdini Task Force has a collection of ideas for potential future specs. It’s a great way to stay in the know and contribute to the future of CSS.


Cover feature

The input can hover but it requires a significant user action (e.g. a long press) Hover: The input can easily relay hover states for the page A potential use case for this would be tooltips. Let’s take a look at how this might work: .element .tooltip { /* hide tooltip */ } @media (hover) { .element .inline-tooltip { /* hide inline tooltip */ } .element:hover .tooltip { /* show tooltip */ } } By default we could display an inline tooltip. If we detect that the primary input supports a hover state, we will hide this and display a pop-up tooltip when the user interacts with the element. When using the hover value we can use the shorthand @media (hover) rather than @media (hover:hover) .

Pointer The pointer media query is used to target the accuracy of a device’s main input. As with hover,

this accepts one of three discrete values, each of which indicates a different level of accuracy: None: The input is not a pointing device Coarse: Pointing device with limited accuracy Fine: Accurate pointing device

Hover and pointer Combine hover and pointer to better understand the user’s device. This slide is taken from my talk at FOWD (speakerdeck.com/ dancork/fowd2015)

Use cases for this are less obvious. If we consider accessibility, we could potentially use it to detect greater accuracy, and decrease the click target on an element by slimming down the proportions: .link { padding 1em; } @media (pointer:fine) { .link { padding: 0.25em; } }

CONCLUSION With so many things happening in the world of stylesheets, now is an exciting time to be a UI engineer. In the age of JavaScript component libraries, the most promising thing to come out of the working group is possibly Houdini (github.com/ w3c/css-houdini-drafts), a task-force that aims to expose some of the magic of CSS via APIs. A project well worth keeping an eye on.

march 2016 75


Secondary feature

Industry professionals predict what’s going to be big and important for the web in 2016, and reveal the trends they’d like to see

T

AUTHOR CRAIG GRANNELL Craig (@craiggrannell) spends most of his day smashing words into shape. He’s been writing about the web and design since 2001, when it was all green fields ILLUSTRATOR DALE EDWIN MURRAY Dale is a London-based illustrator whose work is influenced by hiphop, 90s skateboard graphics, and Scandinavian folk art daleedwinmurray.com

he web never stops evolving. 2015 was a year of increasing device diversity, amazing scripting smarts, gorgeous image-rich news sites, and a clamouring from some to recognise the fact not everyone has super-fast broadband and 4G mobile connectivity. But what will we see in 2016? Will the Internet of Things finally become a proper thing? Will tellies and wearables further impact on what you design? And what other styles and tech will influence designers, developers and thinkers? To find out, we asked leaders in those fields to predict the trends that will truly matter over the coming months …

ADVERTISING Happy Cog founder Jeffrey Zeldman (www.zeldman.com) says content sites and sponsors must address advertising in 2016: “The public has spoken: anti-user patterns do not work. As responsive web design focuses on content and performance, ad-blocking becomes the norm and people reject grotesque privacy intrusions, the industry will be forced to change for the better.” Andy Beaumont, CTO at Hactar (www.hactar.is), believes otherwise:

“2016 will be a year of really shitty advertising, where we’ll look back fondly at 2015’s overlays and modal pop-ups. When Apple legitimised ad-blocking, publishers panicked and ad networks began creating workarounds, the ultimate goal being ads that can leap out of your screen and smash you in the face until you Like a Facebook page.”

ANIMATION Designer Mike Kus (www. mikekus.com) thinks people will get creative with animation: “It’s common to employ small animations to provide users with feedback for actions, resulting in a smoother, more seamless experience, especially when used cleverly to disguise loading times.” In 2016, “enhance the visual appeal of websites and support storytelling on the web”.

BESPOKE ILLUSTRATION Illustrator Oli Lisher (www.lisher. net) hopes to see more bespoke illustration in 2016: “Custom assets make brands stand out. This is essential online, where everything is starting to look similar.” He says the explosion in popularity for massive header


FEATURES Secondary feature photography is becoming samey, and that illustration is a memorable alternative that can “set you apart and help describe

BIG-BRAND INFLUENCE SomeOne co-founder Simon Manchipp (www. SomeOneInLondon.com) draws attention

to check out Channel 4’s new idents: from what everyone else is doing. Not a logo in sight.” He suggests, instead of following a visual trend, focusing more on how design and branding works.

Custom illustration Oli Lisher, who worked on heroiclabs.com, hopes to see more bespoke illustration in 2016, instead of yet more over-familiar photo banners

CLIENT-SIDE APP APPROACHES Developer Jack Franklin (www.javascriptplayground.com) thinks 2015 was “dominated by ReactJS and its new approach to modelling user interfaces”. For 2016, he anticipates that tooling and UI ideas will develop and mature, with libraries like GraphQL and Falcor that “rethink how interfaces should talk to and fetch data from servers” becoming more popular.

CONNECTED HARDWARE Designer and developer Ruth John (www.rumyrashead.com) predicts a “big increase in the popularity of hardware connected with web technologies, through the growth of APIs bringing us exciting demonstrations of the Internet of Things”.

CSS GRID LAYOUT Web design consultant Eric Meyer (www.meyerweb.com) says support is coming for CSS Grid Layout faster than people realise, and it will revolutionise how we approach and build layouts. He explains that as require much “unlearning, breaking of habits and retraining”, but “combined with responsive design, it will be a truly potent combination”.

DATA OWNERSHIP Mud developer Cole Henley (www.ournameismud.co.uk) says discussions around data ownership will be big in 2016: “Growing commercial and government pressures – whether debating net neutrality or weakening

encryption to improve surveillance fundamental shift in the premise of the open web.” Unless we stand up for the liberties and privacy we today enjoy online, Henley says we’ll “lose the web as we know it”.

DESIGN LEADERSHIP James Box, director of UX at Clearleft (www.clearleft.com), predicts 2016 will see a rise in demand for design leadership. He says organisations have been investing in design in a bid to embrace the so-called ‘digital transformation’, but this investment “doesn’t always equate to impact”. Companies wanting to move beyond customer experiences” and a solid design culture will need help. Box sees this playing out through organisations hiring in-house managers or having consultants mentor their teams.

IN-HOUSE TEAMS Consultant Sally Jenkinson (www.recordssoundthesame.com) reckons 2016 will see “greater investment into in-house teams, leading to more

The new branding Simon Manchipp praises Channel 4’s new idents for their innovative approach to design and branding

78

march 2016

so they are increasingly focused on collaboration, training, and consultancy”. This blend of in-house teams and outside specialist expertise could be a boon for


Secondary feature

2016: THE YEAR OF JAVASCRIPT by Christian Heilmann

Material Design Google’s Material Design could continue to influence designers, although many hope for more depth and mould-breaking in 2016

focus and sustainability, and a “great learning experience for all”.

FEED-BASED DESIGN Tom Muller, associate creative director at Code and Theory (www.codeandtheory.com), says mobile devices are changing how people consume content. 2016 will therefore see a move towards feed-based design, where people “dip in and out of news and context streams that deliver content in a visually rich, easily scannable, ‘snackable’ format”. The homepage’s

decentralised, peer-to-peer alternatives and human experience”. Designer and Ind.ie partner Laura Kalbag (www.laurakalbag.com) hopes this will kill third-party scripts: “We’ve seen the indiscriminate addition of tracking scripts become controversial due to privacy and performance implications. use the excuse ‘My boss made me add thirteen scripts’, and we’ll return to networks that don’t rely on spying and sucking up data.”

“Commercial and government pressures will Cole Henley importance will diminish, and streams will be structured to “retain and increase traction in an environment where we need to marry depth of content with economy of time”.

ETHICAL DESIGN Ind.ie founder Aral Balkan hopes 2016 will see people building the web we really want. Ethical and regulation taming the excesses of companies that track and farm people”, and the likes of Ind.ie will “build

FLAT DESIGN Frontend developer Benjamin Hollway (nothingrandom.com) thinks we’ll see a “continuation of developers using grid frameworks. He hopes this will bring more consistency between sites. Designer Victor Erixon (victorerixon.com) wonders if people are “tired of seeing the same thing over and over”. He posits that although simplicity will stick around, designers will “try to break out of it” through shadow use

With ECMAScript6 becoming a ratified standard, we opened the gates to get support for the newer features of the language in all browsers. The support numbers are extremely encouraging and there is no doubt amongst browser-makers that the changes to the language are something to support. ES6 allows us to build huge applications. The syntactic sugar of classes allows developers who are used to other languages to use it in a way they are comfortable with, and the introduction of constants and block level scoping allows us to create less memory-intensive apps ready for low-end IoT and mobile devices. This means a lot of the tooling we use now (like libraries) will eventually fade out, as they aren’t needed as much any more. For developers, this means we have to take a good look at ES6 and see which parts are exciting and usable for us. We won’t have to use every part of the language in our products, but there is a massive benefit to taking advantage of the changes. We are already seeing this happening: every new API released is promises-based – a feature that was not part of ES5. All in all, this year will see a great increase in JavaScript as the go-to language to build software. And it is a good idea to catch up with latest developments and give feedback to those defining it, to ensure we as developers get what we need.

march 2016 79


FEATURES Secondary feature Designer Meg Lewis (www.megforever. com) is more optimistic: “I hope 2016 will see designers pushing boundaries, rules of mobile and web design – unique approaches to break the mould.”

solutions in place, there’s no excuse for not treating images with the utmost care and adhering to best practices. So no more scaling down oversized images for devices that don’t need them, or forcing visitors to download multiple images when only one will be shown.”

JOB TITLES ONE TOOL TO RULE THEM ALL by Christopher Murphy One development I believe we’ll see accelerating considerably in 2016 is the emergence of fully-fledged, endto-end digital prototyping tools. Who knows? 2016 may even see the rise of one tool to rule them all. New tools are arriving constantly. More importantly, we’re seeing these tools widening and deepening their capabilities. InVision, for example, already offers design prototyping tools, design communication and project management capabilities. The team recently incorporated moodboarding and are hard at work adding advanced animations for web and mobile design. The result? A single tool that handles the majority of frontend design requirements. The growing maturity of InVision is representative of this sector, which is driven by a desire to develop a tool that manages the frontend, UX design process from within a single application. In many ways this reflects the rapid evolution of our industry. Increasingly, designers are focusing purely on the frontend (and the front of the frontend, at that). Fullyfledged digital prototyping tools will only accelerate this process. One to watch out for in 2016? Adobe’s Project Comet. Billing itself as, “the first all-in-one solution for UX designers”, its inevitable integration with Adobe’s creative suite offers a tantalising glimpse of where we might be heading.

80

march 2016

Designer Christopher Schmitt (www.christopherschmitt. com) says 2016 will see ‘frontend architect’ become a popular job title as the distinction between designer and developer becomes more blurred, due to the “gateway drug” of Sass and automation systems like Gulp and Grunt. He foresees more designers building modules and style tiles, leaving others to make API calls for additional features. Elsewhere, author and consultant Joe Leech (www.mrjoe.uk) argues ‘head of UX’ is a “sticky plaster on a poor design process”. Although user-centred design

MOBILE DOMINANCE BaseKit’s Gordon Plant (www. basekit.com) predicts even more mobile dominance in 2016: “We can expect the main target devices for website creation to be mobile, but also small business content going to social media platforms by default.” Plant argues this will be where much website creation will need to start from.

FEWER ONE-PAGE SITES Hactar CDO Jonty Sharples (www.hactar.is) thinks it’s time for single-page websites to go: “2016

Jonty Sharples is the ideal approach for building apps and websites, “the whole team should be conducting user research, designing

PROGRESSIVE ENHANCEMENTS Web designer Aaron Gustafson (www.aaron-gustafson.com) suspects in 2016 the web community will have a deeper understanding of progressive enhancement: “For years it has been equated with ‘no JavaScript’, but it’s really about embracing the very nature of the web and its ability to adapt to just about any device or interaction method. The more we embrace this, the more users we can reach.”

RESPONSIVE IMAGES Frontend developer Jenn Lukas (www.jennlukas.com) hopes in 2016 image implementation techniques will get smarter: “With responsive image support growing rapidly and fallback

will be about discretion. So much of the form is understood. We need designers and developers crafting truly useful sites, rather than falling back on the onepager as a handy, novel trope. So: proper narrative, considered calls to action, sensible scrolling, and sites that are device- and bandwidth-agnostic.”

UX MATURATION UX consultant Paul Boag (www.boagworld.com) expects to observe a continued maturation of UX design. “In the past, UX and UI design were often considered interchangeable, but we’re beginning to recognise that UX design is a discipline in its own right. It looks at a user’s experience holistically, and recognises it does not stop at the edge of a screen,” he argues. “I expect a growing generation of designers no longer designing interfaces but working with others across organisations, improving the experience of customers


Secondary feature

New design tools Prototyping tools continue to rapidly evolve and absorb more capabilites. Christopher Murphy speculates that Adobe Comet could be the app to find favour in 2016

TIERED BUILDING Maker of websites Mat Marquis (www.matmarquis. com) says 2016 will see more web professionals framing their decisions around inclusivity: “We’re thinking about the web we build as a utility. browsers, but for all users, even those with tenuous connections or weak devices. Sites will increasingly be tiered experiences, starting with a functional baseline for all, and enhanced where and when they can be.”

SMART TVS Fresh Tilled Soil director of design Jason Pamental (www.freshtilledsoil.com) wonders whether 2016 will see smart TVs becoming big, and bringing with them some brand new challenges. “As connected devices, TVs will force us to think about designing for scale in the opposite direction of our more recent focus. We’ll have to think about layouts on screens several feet across, used at larger viewing distances. how content is presented and rendered.”

PROGRESSIVE WEB APPS by Bruce Lawson Progressive web apps will hit prime-time in 2016. They’re apps that live on your own servers, written in web technologies. But, using progressive enhancement, they can be installed on the user’s homescreen with an icon pointed to from a new manifest format (a light JSON file), and started up with a default orientation and no browser UI. Using Service Worker, they can run offline. This gives us all the advantages of web

publishing (immediacy, linkability with URLs, no installs or updating), and the user experience of installing apps (an icon that can be tapped to launch a full-screen, immersive app). By early 2016 PWAs will be available in Opera, Chrome, Firefox for Android. In browsers that don’t support them, you just have a conventional site: nothing breaks, and no one gets a worse experience.

Progressive web apps Flipkart and Inbox Attack showcase the early days of progressive web apps

VIRTUAL REALITY 2016 could be the year virtual reality makes it big, reckons Clearleft founder Richard Rutter: “Google Cardboard means VR experiences are available to anyone with a smartphone.” He notes the New York Times has shown the way by giving away a Google Cardboard viewer and making VR experiences of longform articles. “Expect more jumping on the VR bandwagon, including web versions using WebGL.” Ueno director of design Haraldur Thorleifsson (www.ueno.co.uk) agrees: “In 2016, VR will go mainstream. Devices are getting cheaper and more accessible, and this will have a big impact on how we design. Soon, we’ll have minimal or no they start to become more like real life.”

CONCLUSION The topics covered here are just a selection of those our interviewees John Allsopp’s views on the escalating importance of security, and Aaron Gustafson’s thoughts on the alternative device imputs that we will need to pay attention to in 2016, take a look at netm.ag/trends2016-277.

march 2016 81


SURVEY

WIN £250 of Amazon Vouchers

ARE YOU A WEB DESIGNER OR DEVELOPER?

Have your say! Whether you’re a beginner or professional, take part in the Web Design and Development Industry Survey 2016

PLUS! FREE EBOOK WORTH £9.99 Complete the survey to claim your free handbook

WWW.CREATIVEBLOQ.COM/SURVEY For full terms and conditions, please refer to: www.futureplc.com/survey-prizedraw-termsand-conditions. All entrants must be aged 16 or over. Closing date 15 February 2016


Tips, tricks & techniques

THIS MONTH FEATURING...

84

90

98

BUILD A STATIC SITE WITH MATERIAL DESIGN LITE

84

HEAD TO HEAD: ANGULAR 2 VERSUS AURELIA

97

INTEGRATE PHOTOS INTO VIDEO IN REAL TIME

104

DESIGN ANIMATION WITH PRINCIPLE

90

CREATE A PYRAMID LAYOUT WITH CSS

98

MASTER NODE.JS FOR DESIGNERS

108

GET MORE FROM ATOM

94

WEB STANDARDS: CSS LEVEL 4 SELECTORS

ACCESSIBILITY: INCLUSIVE PRODUCTS

114

Desktop

Mobile/tablet

0

0

0

0

0

0

0

0

0

0

103

BROWSER SUPPORT

EXCLUSIVE VIDEOS

We feel it’s important to inform our readers which browsers the technologies covered in our tutorials work with. Our browser support info is inspired by @andismith’s excellent Can I Use web widget (andismith.github.io/caniuse-widget). It explains from which version of each browser the features discussed are supported.

Look out for the video icon throughout our tutorials. This issue, two authors have created exclusive screencasts to complement their articles, including Mustafa Kurtuldu’s guide to designing sites with Material Design Lite, and Eva Ferreira’s tutorial on CSS Shapes and the clip-path property.

march 2016 83


View source

PROJECTS Material Design

files here! All the files you need for this tutorial can be found at: netm.ag/materialgit-277

A B O U T T HE A U T H O R

MUS TAFA K UR T UL DU w: getmdl.io t: @mustafa_x job: Design advocate, Google areas of expertise: UX design, HTML, CSS q: what’s your most impressive hidden talent? a: The ability to sleep through an earthquake (magnitude 7.6)

MATERIAL DESIGN

BUILD A STATIC SITE WITH MATERIAL DESIGN LITE Mustafa Kurtuldu introduces the template that gives users a simple way to add a Material Design look to their sites

VIDEO Mustafa Kurtuldu has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/ MDLvid-277

84

march 2016

Material Design Lite (www.getmdl.io) is a frontend template that enables you to easily add a Material Design look and feel to your projects. MDL was designed for static websites, as we wanted it to be framework and toolset agnostic. However, this doesn’t mean you can’t customise it for your own needs – MDL is just the starting point. In this tutorial we will be making a simple portfolio web site with a blog, About section and contact form.

INITIAL HTML SETUP First, create a blank HTML page and in the <head> of the document, add <link> tags to the typeface Roboto, MDL CSS file and the MD icon font, starting with the typeface stylesheet.

<link rel="stylesheet" href="https://fonts.googleapis.com/css ?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,m edium&amp;lang=en"> Next, add the MDL CSS doc, which contains all the styles we will use. The Material Design colour schemes are based on a primary colour and accent colours. These are specified in the CSS file name as follows: material. {primary}-{accent}.min.css . Our CDN hosts a number of combinations based on common Material Design shades. Here, we’ve used grey and pink: <link rel="stylesheet" href="https://storage.googleapis.com/ code.getmdl.io/1.0.6/material.grey-pink.min.css" />


Material Design

Icons are required for some of the components, so add a link to that here also. <link rel="stylesheet" href="https://fonts.googleapis.com/ icon?family=Material+Icons"> The last file to link to is the JavaScript file. This should be added to the bottom of our HTML page, just before the closing </body> tag. <script src="https://storage.googleapis.com/code.getmdl. io/1.0.6/material.min.js"></script> Finally, we need to include the <meta> viewport tag in the <head> of our page, so mobile devices will render correctly. <meta name="viewport" content="width=device-width, initial-scale=1.0">

MDL LAYOUT COMPONENT MDL has a number of different components, which can be used collectively or individually. The layout is considered a component that can be modified to suit

MDL has a number of components, which can be used collectively or individually your needs, and automatically adapts to different browsers, screen sizes and devices. The basic structure of a page has a <div> with the CSS classes mdl-layout and mdl-js-layout . These classes contain all the data on the page. Inside the main container, add a <header> tag for navigation with a mdl-layout__header class. Finally, inside the <header> , write a <div> with a mdl-layout__headerrow , which will contain the header content.

FOCUS ON

MATERIAL DESIGN PRINCIPLES The goal of Material Design is to push greater design standards across mobile and web by creating a visual language that amalgamates classical design theory with technology. There are three core principles that should be applied to each project. All of them are focused on enhancing the user experience, rather than degrading it. They are: Use material as a metaphor: Use light and depth to emphasise the visual hierarchy on a screen so it feels natural to the user, like real paper Be bold, graphic and intentional: This utilises and references the fundamental elements of classical design, such as typography, grids, space and colour Create meaningful natural motion: This should embrace the familiarity of real-world physical objects’ behaviour, and not be jarring or distracting The goal of Material Design isn’t to make the digital world stylistically homogenous, it’s merely a comprehensive guide for designing effective and elegant UIs; a starting point for your creative work. To quote Viktor Persson and Rachel Been on the Google Design website (netm.ag/brand-277): "You don’t have to adopt every element of the Material Design system in order for it to be beneficial to your identity system. Whether it’s a custom font, a unique colour story or distinct voice, everything that provides stylistic distinction in a product should be celebrated and supported in the Material Design framework." In other words, take what works for your brand, product or project and discard the rest!

<div class="mdl-layout mdl-js-layout"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> </div> </header> </div> Next, add content to mdl-layout__header-row. Start by creating a div with a mdl-layout__title class and add the website title. Then add a nav tag with a mdlnavigation class and in here add a href tags for each of your links. Each link needs a mdl-navigation class.

Pesto This contemporary cooking app helps you discover, share, and store recipes, and is an example of ‘expressing brand in material’

march 2016 85


PROJECTS Material Design <span class="mdl-layout__title">Simple portfolio website</ span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="#">Portfolio</a> <a class="mdl-navigation__link" href="#">Blog</a> <a class="mdl-navigation__link" href="#">About</a> <a class="mdl-navigation__link" href="#">Contact</a> </nav> Notice the navigation aligns to the left, next to the title. If you would like it to sit to the right, add a spacer <div> between the title and navigation. <!-- Title --> <div class="mdl-layout-spacer"></div> <!-- Navigation --> Finally, lets add the layout drawer. This will hold the slide-out content that appears on smaller screens and may be opened with the menu icon on any screen size. For this you pretty much replicate what we have in the navigation, except the spacer now needs to sit outside the <header> tag. <header class="mdl-layout__header"> <!-- header content and navigation --> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout__title">Simple Layout</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="#">Portfolio</a> <a class="mdl-navigation__link" href="#">Blog</a> <a class="mdl-navigation__link" href="#">About</a> <a class="mdl-navigation__link" href="#">Contact</a> </nav> </div> If you already have content on the page, you will notice that on mobile screens the drawer button

is floating on top of the content. This is to enable developers to define how much margin/padding appears above the content. To push the content down, you need to tell MDL that the header needs to be fixed by adding the mdl-layout--fixed-header class to the initial <div> container. <div class="mdl-layout mdl-js-layout mdl-layout--fixedheader"> <!-- Rest of the HTML page --> </div> To finish up the page you need to add a <main> tag that will house all the primary content. The basic structure should look like this: <div class="mdl-layout mdl-js-layout mdl-layout--fixedheader"> <header class="mdl-layout__header"> <!-- header content and navigation --> </header> <div class="mdl-layout__drawer"> <!-- drawer --> </div> <main class="mdl-layout__content"> <p>Hello world!</p> </main> </div>

THE GRID COMPONENT The MDL grid has been designed to reduce the usual coding burden required to lay out content for multiple screen sizes. The grid is defined and enclosed in a container element with the CSS class mdl-grid . It has 12 columns for desktop, eight for tablet and four for mobile, each size having predefined margins and gutters. To use the grid, add a <div> inside your content container, with the mdl-grid class attached. <main class="mdl-layout__content"> <div class="mdl-grid"> <p>Hello world!</p> </div> </main> The cells/columns will be defined inside the grid. There are two CSS classes to add here: the general cell class mdl-cell and the mdl-cell--COLUMNS-col class, where COLUMNS specifies the cell width.

Starting structure This is the basic structure of the page, although the behaviour of the <FOOTER> changes depending on where it is added

86

march 2016

<div class="mdl-cell mdl-cell--12-col"> <p>Hello world!</p> </div>


Material Design <div class="mdl-cell mdl-cell--4-col">Cell 1</div> <div class="mdl-cell mdl-cell--4-col">Cell 2</div> <div class="mdl-cell mdl-cell--4-col">Cell 3</div> In this example, the first row "Hello world!" is full-width (12 columns) and the second row has four cells (three columns). This second row will stay as a three-by-three column grid until it reaches less than 480px. You can target devices with specific classes here by adding the mdl-cell--COLUMNS-col-DEVICE class. If you want your tablet layout to look similar to a desktop layout, you should add these classes to make the last two cells appear as two columns with a full-width one before it: <div class="mdl-cell mdl-cell--12-col-tablet">Cell 1</div> <div class="mdl-cell mdl-cell--4-col-tablet">Cell 2</div> <div class="mdl-cell mdl-cell--4-col-tablet">Cell 3</div>

Footer There are two types of footer: a mega and a mini. In this example weâ&#x20AC;&#x2122;ll use a mini footer, which has a content structure made up of left and right sections, with CSS classes for each ( mdl-mini-footer__left-section and mdl-mini-footer __right-section respectively). Inside, we have a <div> for our logo/title and a <div> for our link list, which appears as a row.

The MDL grid reduces the usual coding burden required to design for multiple screen sizes Where we add the footer in the markup depends on the desired effect. If we would like to have the footer fixed, we need to to add it after the <main> tag. If we want it to scroll and appear after our content, we add it inside the <main> tag. <footer class="mdl-mini-footer"> <div class="mdl-mini-footer__left-section"> <div class="mdl-logo">Portfolio website</div> </div> <div class="mdl-mini-footer__right-section"> <ul class="mdl-mini-footer__link-list"> <li><a href="#">Help</a></li> <li><a href="#">Privacy & Terms</a></li> </ul> </div> </footer>

Custom grid Once you have set up our grid you can begin customising the design to suit your needs

Customising the layout You can customise the layout by hiding the mdllayout__drawer on desktop. To do that, add the mdl-layout--small-screen-only class to the drawer container. Afterwards, remove the mdl-layoutspacer from the <header> . To centre the title and navigation, place the nav in its own mdl-layout__ header-row and then write some custom CSS. .mdl-layout__header-row { padding: 0; justify-content: center; } To hide the navigation when scrolling down the page, you can now apply a waterfall technique to the <header> by adding the class mdl-layout__header-waterfall to the <header> . This way users can focus solely on the content (remember, this will only work when there is enough content to scroll). The final structure should look like this: <header class="mdl-layout__header mdl-layout__header-waterfall"> <div class="mdl-layout__header-row"> <span class="mdl-layout__title">Simple Portfolio Layout</span> <div class="mdl-layout-spacer"></div> </div>

Cell width The Grid contains all of the cells. Each cell width can be customised, though the defaults work well

march 2016 87


PROJECTS Material Design

RESOURCES

MUST-HAVE RESOURCES

<div class="mdl-layout__header-row"> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="#">Portfolio</ a> <a class="mdl-navigation__link" href="#">Blog</a> <a class="mdl-navigation__link" href="#">About</a> <a class="mdl-navigation__link" href="#">Contact</a> </nav> </div> </header>

The card component In this example, the portfolio page will feature each piece of design work via MDL cards. The card component is a virtual piece of paper that contains text, images and links. Colour picker The colour wheel on getmdl.io, where you can customise your theme by choosing a primary and accent colour

Get MDL www.getmdl.io The core website you need to read documentation and see templated examples of Materal Design Lite.

Custom CSS theme builder www.getmdl.io/customize This colour wheel enables you to choose primary and accent colours, and then link to a CDN or download a custom CSS based on your selection.

Github Repo netm.ag/materialgit-277 The core repo, which includes instructions on how to build the library, modify the style files with Sass and run it using node.

Expressing brand in Material netm.ag/brand-277 This article by Viktor Persson and Rachel Been discusses how Material Design can be adapted for your work, with examples of different brands and design styles.

The card component is a virtual piece of paper that contains text, images and links The default grid for MDL is three cards in a row for desktop, two for tablet and one full-width for mobile. If this is the grid you’re looking for, you won’t need to add any mdl-cell--COLUMNS-col numbered classes. We can even add these column cell classes directly onto the cards without a separate <div> container. To add a shadow for the card, use mdl-shadow--2dp class. The dp number in the class ranges from 2 to 24, and it controls the depth of the shadow. <div class="mdl-cell mdl-card mdl-shadow--4dp"> <div class="mdl-card__title"> <h2 class="mdl-card__title-text">Example Title</h2> </div> <div class="mdl-card__media"> <img src="../images/photo.jpg" border="0" alt=""> </div>

Starbucks Android Material Design netm.ag/starbucks-277 Chase Bratton’s case study on Starbucks’ first step in the interpretation of Google’s Material Design.

Material Design awards netm.ag/awards-277 A collection on the Google Play store that encourages and recognises excellence in applying Material Design in the creation of engaging user experiences.

Open drawer An example app layout with an open navigation drawer, along with a cross-section diagram of its component elevations along its z-axis

88

march 2016


Material Design <div class="mdl-card__supporting-text"> Text </div> <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> Read more</a> </div> </div> To add a max-width to the grid, you need to include some more custom CSS. The cards are responsive by default, so you can add the class to the parent grid and they’ll adjust automatically. Type focus Nesting grids allow us to customise the layout further for more typographical sites

.portfolio-max-width { max-width: 900px; margin: auto; }

INDIVIDUAL PAGES For the individual portfolio pages you can use the same card component as before, with full-width cells. In the code below, there’s an additional grid for the copy and images, to break up each section, and a utility class no-padding to remove undesired space. <div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow-4dp"> <!-- Title, photo and caption --> <div class="mdl-grid portfolio-copy"> <h3 class="mdl-cell mdl-cell--12-col mdl-typography-headline">Introduction</h3> <div class="mdl-cell mdl-cell--6-col mdl-card__ supporting-text no-padding"> <p>Text</p> </div> <div class="mdl-cell mdl-cell--6-col"> <img src="PHOTO" border="0" alt=""> </div> </div> </div> To add social share buttons to each post, use the tooltip component. The IDs should be unique, as they reference the container for each tooltip.

type="textarea"> . There are some transitions you can apply to the text field (e.g. expanding the input when a button is pressed). You can also add a pattern attribute and value to the <input> and associated error message in a <span> . <div class="mdl-textfield mdl-js-textfield mdl-textfield-floating-label"> <input class="mdl-textfield__input" pattern="[A-Z,a-z, ]*" type="text" id="Name"> <label class="mdl-textfield__label" for="Name">Name...</label> <span class="mdl-textfield__error">Letters and spaces only</span> </div> The final component is a button for the form. There are many variations of this component, including raised, icon and flat buttons. Here we have a simple, raised submit button that shows a ripple effect when it’s pressed. The different classes indicate the effects attached to the button. <button class="mdl-button mdl-js-button mdl-button-raised mdl-js-ripple-effect mdl-button--colored" type="submit"> Submit </button>

FIN <div id="tt1" class="icon material-icons">share</div> <div class="mdl-tooltip" for="tt1"> Share your content<br>via social media </div> The last page is the contact form. Let’s look at the text field component, which is essentially an enhanced version of <input type="text"> and <input

Now your layout is complete, you can start adding specific design elements to it. Alternatively, you can sketch a new layout first and try to recreate it using the grid. On the MDL website there are a bunch of templates you can refer to. There are many utility classes on the getmdl.io website for each component, so check there first before you start writing your own custom CSS. Now get designing!

RES OURCE If you want to explore Material Design with Android there is a great free course by design advocates Nick Butcher and Roman Nurik: netm.ag/android-277

march 2016 89


View assets here!

PROJECTS Principle

All the assets you need for this tutorial can be found at: netm.ag/assets-277

A B O U T T HE A U T H O R

DANIEL HOOPER w: principleformac.com t: @danielchooper job: Founder, Principle areas of expertise: Interaction design, software engineering q: what’s your most impressive hidden talent? a: I knit

ANIMATION

WITH PRINCIPLE Daniel Hooper shows you how to use his tool, Principle, to convey your animation ideas through interactive interfaces As designers, we often have new ideas that can be challenging to explain. We’ve tried hand-waving, whiteboards and special effects software, but these approaches tend to require a lot of work. They also often leave the interactive side of things up to developers to figure out, and they have enough to do as is! Showing off interactive designs makes you look like a rockstar, and helps your clients and coworkers understand new ideas more quickly. They will also make you a better designer; you’ll be able to try an idea and assess if it’s any good, without asking an engineer to spend valuable time creating it. Convinced? Let’s talk about Principle.

90

march 2016

Principle (principleformac.com) is a design tool that uses familiar concepts like artboards and keyframes to enable you to quickly design interactive and animated interfaces. In this tutorial, I’ll illustrate the core concepts of Principle by designing an interface with a scrolling list of items and an interactive layer. After this tutorial you’ll be able to apply these techniques to your own designs and see them running on your iOS device. Typically you’ll use images in your Principle designs, but I’ll stick to simple coloured layers to make it easier for you to follow along. Feel free to drag in your own assets if you’d like. Let’s get started!


Principle

Step 3 Add a rectangle to the top-centre of your artboard

Step 4 Duplicate your blue rectangle so there are three, spaced out down the artboard

Download Principle from principleformac.com. The free 14-day trial only counts the days you use it, so you can learn at your own pace! When you open up Principle, you’ll notice how similar it is to a drawing tool: the inspector and layer list are on the left, with the canvas to the right. The preview window to the top right lets you interact with your design at any time.

top of the window. Set its size to 347x347 and position it in the top-centre of the artboard. Set its fill colour to baby blue.

grab its bottom handle and resize it to fit within the artboard. Scrolling to the bottom should now work as expected.

Let’s make a list. Select the baby blue layer, duplicate it ( cmd+D ), and move the new layer below the original with a little spacing. Do this once more so there are three layers on the screen. The second and third layers will go off the bottom of the artboard.

Now the design is interactive, it’ll be fun to see it running on a device. Download Principle Mirror from the iOS App Store (netm. ag/mirror-277), connect it to your computer with a USB cable and try the scrolling on your device!

01

Select ‘Artboard 1’ in the layer list, then use the inspector to change its width to 375 and height to 667 (the iPhone 6 size). If you design for other devices or platforms, you can make it any size you want. Finally, set the fill colour to a dark blue.

02

03

Create a new layer by clicking the Rectangle button at the

04

Select all the layers ( cmd+A ) and group them ( cmd+G ). Use the inspector to set the vertical property of the group to Scroll . In the preview, you’ll be able to click and drag to scroll a bit, but you’ll notice it doesn’t let you see the third entry. This happens because the group is the same size as the content it scrolls. Select the group,

05

06

Next, we’ll add a tab bar to navigate between the different screens. Select Artboard 1 in the layer list, add a new rectangle layer, resize it so it’s half the width of the artboard, and put it in the bottom left of the artboard. Duplicate the layer and put it in the bottom right. Make the new layers any colours you want, just so long as they’re different.

07

EXPERT TIP

RETINA ASSETS This tutorial uses simple coloured layers to make it easy to follow, but you would typically include images to make your prototype feel like a real design. You can drag images into Principle to use them. If the images have ‘@2x’ or ‘@3x’ after their name, Principle will automatically import them at 1x size and display the highres version on Retina screens. If you’d like to replace an asset on an existing layer, just select the layer and drag a photo over the Image property in the inspector.

Step 5 Group your rectangles and resize the group to fit on the artboard

Step 6 At this point it’s helpful to review your prototype on a device

march 2016 91


PROJECTS Principle Let’s begin building the second screen of the design. We’ll use the current artboard as a starting point. Select Artboard 1 in the layer list and duplicate it to create Artboard 2. Delete the group layer from Artboard 2.

08

We have our two screens, but we need to add events connecting them. Select the right tab bar layer in Artboard 1, then click the lightning button on its right side. Drag from the Tap outlet to Artboard 2. Next, select the left tab bar layer in Artboard 2 and create a tap event that goes to Artboard 1. You should now have two event arrows above the two artboards. In the preview you can tap the tab bar buttons to navigate between the screens.

09

Let’s take a moment to try out some animation. When transitioning between artboards, Principle will automatically animate layers with the same name that are on both artboards. Currently our tab bar buttons have the same names on both artboards, but no differing properties to animate. Let’s change their height to see them animate: on Artboard 1, make the left tab bar button slightly taller to indicate that we’re currently on that tab. Do the same for the right tab bar button on

Step 9 We need to connect the two screens, so we’ll create a tap event

circle. Select Artboard 2 and add a new rectangle layer. Position it in the centre of the artboard, and turn up the radius property to make it a circle. Finally set the Horizontal and Vertical properties to Drag – you can now drag this layer around in the preview. Double-click the circle layer in the layer list and change its name to ‘Circle’.

10

Step 10 Change the tab button height

Artboard 2. The buttons will now animate their height when you click them in the preview. To experiment with some of Principle’s other features, we’re going to make a draggable

11

Step 12 To start our animation, we need to duplicate our Artboard 2

92

march 2016

We’re going to make Circle react to your drag and bounce back to the centre of the screen when released. To do this, we’ll need another artboard that we’ll enter when dragging begins. Select Artboard 2 in the layer list and duplicate it.

12

Now we’ll create events between the second and third artboards. Select the Circle layer in Artboard 2, click the lightning button and drag the Touch Down outlet to Artboard 3. Then select Circle in Artboard 3 and create a Touch Up event going to Artboard 2. Dragging and releasing the Circle layer in the preview will cause it to animate back to the centre of the screen.

13

Principle’s animations use a default easing curve of 0.3 seconds, but we can change it so the Circle springs back to the centre when released. Click the Circle Touch Up event arrow above

Step 13 Add a Touch Up event back to Artboard 2

14


Principle

Step 14 On the timeline for Circle Touch Up change the animation type to Spring

Step 16 Create the stroke width driver to make the circle’s stroke change on drag

the artboards and the animation timeline for this event will appear. Click the blue area between the two X keyframes and change the animation type to Spring . Do the same for the Y keyframes.

Stroke Width Driver. Position the Circle layer back in the centre of the artboard. Try it out in the Preview. Drivers make a lot of things possible, like parallax scrolling, layers that rotate as you drag them off screen, and much more.

Let’s make the visual appearance of the circle change when you start dragging it. We can do this by selecting Circle in Artboard 3 and changing its fill colour to white. Now the circle will highlight when you press down on it.

15

As a final touch, we’ll use drivers to make the circle’s stroke change when you drag it. Select the Circle layer in Artboard

16

3 and click the Drivers button at the top of the window. You’ll see that there are drivers available for Circle X and Circle Y because these properties will change when the layer is dragged. With the Circle layer selected, click the blue Add keyframe button under the Circle Y driver row. Choose Stroke Width in the popup. There is now one Stroke Width keyframe, but we’ll need to add another for anything to happen. Drag the Circle layer in Artboard 3 towards the bottom of the screen, right above the tab bar. Then set its stroke width to 6, which will automatically insert a second keyframe in the Circle

17

Now we’re ready to show off our design by recording it. Record your design by clicking the record button in the top right of the preview window. After interacting with your design in the preview window, click the record button again to stop recording. You can choose to save out a movie or a GIF file.

18

You can also email the principle file (.prd) to clients, and they can use the iOS sharing button to open the file in Principle Mirror.

19

EXPERT TIP

READ ON If you have come to user interface design from a graphic design background, you’ll know UI requires whole new skillsets to succeed. Psychology, technology and animation need to be considered. Research in UI dates back to the 1970s, yet despite its rich history, the design industry hasn’t learned. Principle is a step to improve this, but you shouldn’t stop there. Alan Cooper’s book The Inmates are Running the Asylum (netm.ag/ inmate-277) is a great resource to learn more.

That’s it! Now you’ve seen how to create powerful animations and interactions in Principle. If you want to continue experimenting, try making the tabs get brighter when they’re selected instead of changing height. You could also try setting the group’s height to 367 and vertical property to Paging .

20

Step 17 Add a second keyframe to the stroke width driver

march 2016 93


PROJECTS Atom

A B O U T T HE A U T H O R

JES SICA L ORD w: www.jlord.us t: @jllord job: Engineer, GitHub areas of expertise: Node.js, JavaScript, HTML, CSS q: what’s your most impressive hidden talent? a: Drawing straight lines (I went to architecture school)

ATOM

GET MORE FROM ATOM Jessica Lord d introduces Atom, GitHub’s net award-winning text editor built on web technology that is hackable to the core Atom is a text editor developed by GitHub and open sourced in early 2014. Since then Atom has grown to more than 500,000 monthly users. Out of the box Atom is Git-aware, includes Markdown previews, auto complete and more. It is designed to be hackable to the core. In addition to being open source, Atom is built using web technology: JavaScript, HTML and CSS. This makes Atom’s core and extensibility options accessible to a wide range of developers. In this article I’ll share ways in which you can extend and customise Atom, from managing packages to adding custom behaviours.

PACKAGE ECOSYSTEM At the time of writing, nearly 3,000 packages and 900 themes had been published for Atom. Atom itself is created by bundling the core app with dozens of packages for each default feature. These packages do things like add Markdown preview support, display your directory’s Git status, and control Find and Replace. They can be managed through the Settings view. Atom’s Settings view sets it apart because it includes a package manager by default, giving you access to the packages you have installed, as well as the thousands created by the community. You can browse and install these from within Atom. You can open the Settings view by clicking Packages > Settings View > Open in your menu bar or by using the cmd+, keyboard shortcut.

Packages With the Settings view open, you’ll find the Packages tab on the left. This will display all the packages you have installed, and their type:

94

march 2016

Community packages: Packages written by people outside of GitHub’s Atom team Core packages: These are developed by the Atom team and come bundled with Atom Development packages: Packages which you have on your machine and use in Atom from that local source From the Packages view, you can manage your installed packages by selecting to install/uninstall or disable/enable them. Clicking on a package in this view takes you to the package’s available settings (if any) as well as the README that describes the package. If you want to know more you can click on the link and be taken to the package’s repository or issue tracker.

Install The Install tab in the Settings view connects you to the thousands of packages available for Atom. At the top you’ll find featured packages, but you can also use the search bar to find the one you’re looking for. Packages are published to Atom using Atom Package Manager (APM), which is included with Atom. You’ll find published Atom packages in the Install view, and they can also be found on Atom’s website: atom.io/packages. Just like in the Packages view, clicking on a single package displays the README, so you can see what it does before you install it. It also links to the package’s code repository. You can install new packages from the community in this view by clicking the Install button on a listed package. You can then manage packages from the Packages view.


Atom

Development packages In order to use a package you’re developing locally in Atom before you publish it with APM, you can link it to Atom using the APM CLI. For instance, from within the package’s directory in Terminal or Bash, use the following command: $ apm link Linked packages will show up in the Development Packages section in the Packages view. You can see linked packages with this command: $ apm links

In the Install view, toggle the search bar to Themes to search the available Atom themes. Once you have themes installed, you can manage and set them as the current theme in the Themes view.

You can use CoffeeScript in this default file or create a new file, init.js , to use JavaScript. In init you can make use of the full Node.js API. For example, if each time you opened a window you wanted Atom to greet you with the version of Node.js it is using, you could add this to your init file:

UI and syntax themes

alert(process.versions.node)

Themes

Atom has themes for both the UI and the code syntax. The syntax themes style how the code looks in the editor itself, and the UI themes style how

Out of the box Atom is Git-aware, with Markdown previews and auto-complete the rest of Atom looks (e.g. the tabs and file tree). You can even make small changes to Atom without creating a complete theme or package.

To interact more with Atom, you can use the Atom API. Documentation on the API is available on the Atom site.

Styles.css Just like the init.coffee file, styles.css is a file that is loaded after Atom starts up. The styles you add here will override or add onto Atom’s existing styles, and they will take effect immediately upon saving. For example, you could change the editor’s background colour by adding this CSS: atom-text-editor { background: seashell; }

ALTERNATIVE CUSTOMISATION The Settings tab in the Settings view provides your options for customising Atom, but you can go beyond the default options by adding JavaScript or CSS within your config . Every instance of Atom has a .atom directory that contains its configuration settings, where you can create custom behaviour or styles. To open your .atom configuration directory, click the ‘Open config folder’ button on the left side of the Settings view.

Init.coffee The init.coffee file allows you to add custom behaviour to Atom every time a new window is launched. It’s executed after packages are loaded and any previous editor state has been restored.

A quick way to find the property names in Atom is to make use of the fact that underneath Atom is Chromium, so you have access to DevTools. You can toggle DevTools on and off by pressing alt+cmd+I . With DevTools open you can use the magnifying glass to select elements in Atom and reveal their class or element names. Target them in your styles. css file to change their properties. With Atom’s package manager and configuration files you can customise your Atom environment right from within Atom. This introduction should get you well on your way, and if you have any questions, open an issue on the project at www.github.com/atom/atom.

march 2016 95


A front end developer playground ABOVE:

Rainbow Firestorm by Jack Rugile â&#x20AC;&#x201C; codepen.io/jackrugile/pen/AokpF

codepen.io/promo/net-mag Need to

codepen.io/jobs


Head to head

HEAD TO HEAD

A B O U T T HE A U T H O R

PAM SEL L E

ANGULAR 2 VS AURELIA

w: thewebivore.com

Next-gen JavaScript frameworks Angular 2 and Aurelia are similar

t: @pamasaur

in goals and features. Pam Selle assesses how they match up

job: Software engineer areas of expertise: Building software, generally on the web q: what’s your most impressive hidden talent? a: My fingers are doublejointed (well, technically hypermobile), which freaks people out

ANGULAR 2

AURELIA

Angular 2 (angular.io) is the next version of the popular JavaScript framework AngularJS. It’s a complete rewrite of the framework, built looking towards the future of JavaScript and the web, with TypeScript and web components being key parts of its strategy.

Aurelia (aurelia.io) is an open-source framework developed as a product of Durandal, Inc. author Rob Eisenberg spent time on the Angular 2 team before leaving to focus on his own framework, which emphasises modern standards and componentisation.

COMPONENTS Angular 2 encourages an architecture based around components, or unified blocks of UI markup and behaviour, tracking towards the Web Components spec, and with a view to interoperability with other Web Component libraries like Polymer and X-Tag.

Aurelia also has components, but they’re more related to the MVVM pattern, where a component is made up of a view and view-model pair. While the framework is interested in supporting Web Components, its own components are not related to those specifications.

DATA BINDING

FACT FILE HOW NEW IS AURELIA? Although Aurelia first entered beta in November 2015, it isn’t as new as it may seem: author Rob Eisenberg has said that it’s the sequel to the Durandal framework (durandaljs.com). DATA FLOW IN ANGULAR 2 In Angular 2, data flow is managed through Observables, a proposed type in ES2016, and polyfilled using the RxJS 5 library. For Angular users, it represents a shift from largely objects and binding to observing streams of data.

For two-way data binding, you’ll need to use the ngModel directive to make an explicit relationship between the view and the data in its component. This is an indicator of the declarative nature of Angular 2, where dependencies are explicitly defined.

Aurelia provides a familiar data-binding style. Defining an attribute in the JavaScript exposes that value to the view, providing two-way data-binding without explicit declarations. Aurelia makes some assumptions about your code, requiring fewer declarations than Angular.

USING THE FUTURE NOW Angular 2 is written in TypeScript, intends to be friendly to other compile-to-JS languages, and encourages use of ES2015/2016. Its documentation includes sub-sites for JavaScript, TypeScript and Dart, but documentation varies widely between languages.

Aurelia is written in JavaScript and encourages its users to use ES2015/2016, and also provides a TypeScript version of its starter kit. The documentation has a helpful ‘Cheat Sheet’ of code snippets to help you get used to the newer syntax.

SUPPORT There’s some nervousness about Angular 2’s longterm viability. Although there is a team working on it within Google, it isn’t an official Google product (neither is Angular 1). It’s community-supported, and the risks around adopting such a framework remain.

Aurelia is Durandal Inc.’s official product, making it one of the only open-source JavaScript frameworks with commercial backing (Ember.js being the other one). When you need support for Aurelia, you know exactly where to go.

VERDICT Angular 2 and Aurelia might have a lot in common on their feature lists, but their approaches differ enough to make a difference. If it’s a race, Aurelia was first to beta and has stronger documentation. But if you’re looking for a framework that includes the world of Web Components and more informed data-binding, go with Angular 2.

march 2016 97


View assets here!

PROJECTS CSS

All the assets you need for this tutorial can be found at: netm.ag/CSScode-277

A B O U T T HE A U T H O R

E VA FERREIR A w: evaferreira.com.ar t: @evaferreira92 job: Web designer, speaker and professor areas of expertise: CSS, HTML, SVG, JavaScript q: what’s your most impressive hidden talent? a: Hiding silly jokes in the source code of my sites

CSS

CREATE A PYRAMID LAYOUT WITH CSS Eva Ferreira a shows you how to take advantage of the clip-path property and CSS Shapes to develop more creative layouts

VIDEO Eva Ferreira has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/ CSSvid-277

98

march 2016

It’s 2015 and we no longer need to design rectangles inside rectangles! This is one of the greatest times for CSS. There is no longer any need for us to stick to rectangle-based websites; we now own the necessary tools to play with layout, and enjoy great levels of browser support at the same time. In this article, I will shed some light on the world of the clip-path property and CSS Shapes. To do this, I will show you how to create and animate a food pyramid. The demo is divided into two: there’s a pyramid on the left and some lines of Potter Ipsum text on the right, which wrap around the pyramid’s side using CSS Shapes. The important thing to note is that our pyramid is divided into four parts: a triangle on top and three

trapezoids below it. These sections are independent from one another, enabling us to freely animate each part of the pyramid.

THE MARKUP In order for this demo to work it is important to keep our HTML clean, since that will be the base for all our CSS. <div class="wrapper"> <div class="pyramid"> <div class="zone">Triangle</div> <div class="zone">Trapezoid</div> <div class="zone">Trapezoid</div> <div class="zone">Trapezoid</div>


CSS <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> </div><!-- Closes .wrapper --> The .wrapper element has a top margin of 5vh and an auto-value on the sides to keep all the elements centred. In this example, .pyramid floats to the left (this is a requirement for the shape-outside property we will be adding later). Our four .zone elements will have a padding of 40px on the top and the bottom. The width, background images and animation delay will be different on each one. For this reason, we will be using the :nth-child() selector to apply these styles independently. The food pyramid consists of one triangle on the top and three trapezoids below it. Each

We now own the tools to play with layout, and enjoy great browser support, too part is defined by a .zone element, and each will have a different width. The triangle on top ( .zone:nth-child(1) ) will have a width of 25 per cent, the trapezoid that sits below 50 per cent, 75 per cent for the third element and a full 100 per cent width for the base of the pyramid. Now, we should have a square and three rectangles below it. It’s time to apply clip-path.

FOCUS ON

ON CLIP-PATH AND CSS SHAPES SUPPORT Clip-path and CSS Shapes can help us build creative layouts. Although they can yield amazing results, the limited browser support for these new properties might deter some developers from implementing them in production. Here, I would like to share some tools that will help you tackle this issue.

CSS Shapes CSS Shapes are currently supported in Webkit and Blink browsers (Chrome, Opera and Safari). If you want to use this property, don’t forget to add the -webkit- prefix in order to reach the Safari browser. For full browser support I’d suggest adding the Shapes polyfill, but bear in mind this will disable the :hover functions on the shapes you create.

Clip-path The clip-path property is currently supported in all major browsers (with the exception of Edge). Clip-path requires two different syntaxes: one using the predefined shapes (inset, circle, ellipse and polygon) and one with an SVG attachment for Firefox. If we wish to include trapezoids or triangles in Edge, we should go for the most common CSS hacks in which we create triangles through borders and trapezoids using perspective (Lea Verou has written a short article on her blog about it: netm.ag/verou-277). Last but not least, remember that @support, a CSS version of Modernizr, is also reaching browsers nowadays. This will be a wonderful tool to improve our fallbacks.

THE CLIP-PATH PROPERTY The clip-path property is a wonderful tool for hiding parts of an element (images, paragraphs and even divs) instead of showing the whole block. Clip-path provides a few basic shapes, such as inset, circle, ellipse and polygon. However, we can also use SVG to create more complex shapes and fallbacks. Thanks to clip-path, we can be more creative with our layouts and include non-rectangular shapes in our designs. The property was born from a now-deprecated clip property that used to require an absolute or fixed positioning. Although the clip-path property is not yet supported in every browser, we can reach an almost full support with an SVG fallback and the -webkitprefix. The only major browser that currently does

Helping hand Clippy is a wonderful tool by Bennett Feely to help you with clip-path

march 2016 99


PROJECTS CSS

IN-DEPTH

EXPLORE FURTHER Interesting layouts are created not only with time and dedication, but also by avoiding patterns. The web today has plenty of tools we can use to build more creative layouts. From border-radius to clip-path, we have reached a turning point and we can now say goodbye to the table-like web page of days gone by. We are free to go further. Sometimes in order to get creative we need some inspiration. There are many ways to get inspired, so find the solution that works best for you. Here are my recommendations:

Conference talks Jen Simmons’ ‘Getting out of our Ruts’ (netm.ag/simmons-276), is perfect listening if you’re interested in getting out of our comfort zone when designing. You should also check Rachel Andrew’s ‘The New CSS Layout’ (netm.ag/layout-277), in which she explains some new properties you can use to style your web pages.

Magazines Given that graphic design is way older than the web, we can see amazing layouts in magazines, books and even newspapers. This way, we can find inspiration and hopefully also build our desire to try new things.

Flash websites A few weeks ago, I found a 2008 Taschen book about Flash portfolios in my house. Even though it is seven years old, I could see many varieties of layouts that were very different from one another. Flash might be gone from the web, but that creativity should remain. The truth is that getting out of our comfort zone will bring us creativity!

not provide support for it is Edge. The clip-path spec is at Candidate Recommendation stage. In order to create our pyramid, we need to apply clip-path to our four .zones . We will use a polygon shape and define the coordinates of each point with X and Y values in percentages, using :nth-child to select each element independently. .zone:nth-child(1) { clip-path: polygon(50% 0, 100% 100%, 0% 100%); } .zone:nth-child(2) { clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%); } .zone:nth-child(3) { clip-path: polygon(16.5% 0, 83% 0, 100% 100%, 0 100%); } .zone:nth-child(4) { clip-path: polygon(12.5% 0, 87.5% 0, 100% 100%, 0 100%); }

The best way to get text to wrap around an element is by using the shape-outside property Getting coordinates in the right place through our code editor can seem impossible. If we wish to avoid trying to randomly guessing the coordinates, I highly recommend adding the -webkit- prefix and editing the code in the browser itself. Chrome DevTools will let us see the code in action while we write it, making it easier to draw our shapes.

THE SHAPE-OUTSIDE PROPERTY Now our pyramid is built it’s time to get the text flowing around it. The best way to get text

All the same Jen Simmons on how to get out of your design rut In-browser editing Avoid guessing the coordinates and take advantage of Inspect Element on Chrome

100

march 2016


CSS

to wrap around an element is using the shapeoutside property, which is currently in Candidate Recommendation maturity level too. Although the browser support is not good (it is only supported in Webkit and Blink browsers with the -webkitprefix) there is a polyfill available that will help us reach the remaining browsers. Like the clip-path property, shape-outside also has a few predefined basic shapes, such as inset, circle, ellipse and polygon. For this demo, we will be using the polygon to create the right-angled trapezoid that will make the text wrap around our pyramid. The values of these coordinates should be applied to .pyramid and look like this: .pyramid{ shape-outside: polygon(310px 0, 130px 405px, 558px 405px); }

The Animation The parts of the pyramid fall from top to bottom with acceleration that mimics the effect of gravity

background-color: rgba(202, 197, 94, 0.2); }

Bear in mind that these numbers are just examples â&#x20AC;&#x201C; you can adjust the angle of the shape depending on your taste and necessities.

THE INTERACTION Since each part of the pyramid is independent, we can easily perform :hover events on them. This brings with it many opportunities. We could make each .zone display different information, or simply make it open a new window. For this demo, I decided to play with blending modes in the :hover effects. Blending modes, which are more common in Photoshop than in CSS nowadays, let you tell the browser how you want your elements to blend together. There are multiple blending modes available to choose from: darken, lighten, overlay, hue and multiply, amongst others. A great tool for getting to know them is Sara Soueidanâ&#x20AC;&#x2122;s CSS Blender (sarasoueidan.com/demos/css-blender). I selected a background image with an RGBA background colour and an alpha value of 0.7. The blending mode I picked is lighten and on :hover I changed the background-color alpha channel to 0.2 with a 0.5 second transition. The code for the triangle on top looks like this:

THE INTRODUCTORY ANIMATION This is the most entertaining part: when we define how each element will enter the page. In this case, each part of the pyramid will enter from the top with transform: translateY(-500%); to transform: translateY(0%); Since every .zone is independent, accumulative animation-delays are ideal. Notice how the fourth element (the base of the pyramid) falls first. .zone:nth-child(1) { animation-delay: 2s; } .zone:nth-child(2) { animation-delay: 1.5s; } .zone:nth-child(3) { animation-delay: 1s; } .zone:nth-child(4) { animation-delay: 0.5s; } To this code, we should also add animation-fill-mode: forwards; in order to keep the element in the right place once the animation is over. When elements are falling from top to bottom the animation will look more realistic if we apply an ease-in timing function, because this emulates acceleration due to gravity (unlike the predefined ease value). The h1 element and the paragraphs have a simpler animation. They go from an RGBA value with 0 opacity to 1. They will also have different delays.

FINAL WORDS .zone:nth-child(1){ background: rgba(202, 197, 94, 0.7) url("img/vegetables. jpg"); background-blend-mode: lighten; transition background-color 0.5s; } .zone:nth-child(1):hover{

Implementation for clip-path might be a little slow, but it is moving forward and there are fallbacks available. Therefore, it is a wonderful time to begin using it in production. With these properties we can make more creative websites, and explore brand new layouts. Have fun with clip-path and break the mould with the layouts revolution!

RES OURCE If you want to explore the full reach of the clip-path property and its layout possibilities, take a look at this article by Drew Minns: netm.ag/minns-277

march 2016 101


ON SALE NOW!

THE IDEAL GIFT FOR ANY DESIGN AFICIONADO www.bit.ly/DesignAnnual


Standards :REQUIRED, :OPTIONAL :required and :optional apply to :read-write elements. By default, :read-write elements are :optional , but if one has the required attribute, it will match :required .

:DEFAULT The :default pseudo-class applies to the default value for a given form control. Typically, this would be the selected option in a <select> , or the default checked ‘radio’ button.

The :has() selector (aka the ‘coffee-cup cabinet’ selector) matches ancestors of elements matching any selectors passed in parentheses. For example: :has(.widget, .twinkle){}

CSS

LEVEL 4 SELECTORS Jonathan Cutrell takes a look at the new features coming to CSS The CSS Level 4 Selectors draft (drafts.csswg.org/ selectors) describes some of what we can look forward to in CSS in our browsers in the future. Let’s take a look at some of the new selectors!

:PLACEHOLDER-SHOWN :placeholder-shown selects elements with placeholders that are currently visible. So if an <input> has a placeholder, :placeholder-shown will match until the user types something into the input. If the input has a value on load, :placeholder-shown will not match.

This matches any ancestors of elements with the class widget or twinkle . The arguments for the :has() selector are called relative selectors, and are relative to the :scope (the matched ancestor). Because of it’s computational complexity, :has will not work in browser stylesheets. It will be accessible via JavaScript and other static contexts.

The :matches pseudo-class allows for one more complex selectors to be passed in as arguments (passing only one complex selector in has the same effect as just using that selector directly). When combined as a part of a complex selector, the :matches() pseudo-class allows for much more complex selections. For example, to select descendants of .container that do not match .row , but do have a class matching col (such as col-md-4 ): .container :matches(:not(.row), [class*="col"]){} Or to select all headings that are descendants of headers, footers and navs: :matches(header, nav, footer) :matches(h1,h2,h3,h4,h5,h6){}

:READ-WRITE, :READ-ONLY In the last example, the equivalent code for Level 3 selectors would have required individual selections for each combination. Level 4 selectors provide a welcome addition to an already-powerful CSS selection engine. Check out the specification on the W3C to find out more.

PROFILE

The :read-write and :read-only pseudo-classes apply to all elements. The :read-write evaluates to true if the element can be manipulated by the user. Form controls and regular elements with the contenteditable attribute will match :read-write . By default, all nonform elements will match :read-only .

Jonathan is the director of technology at Whiteboard (whiteboard.is) in Tennessee. He also hosts Developer Tea (spec.fm), a 10-minute podcast for developers

march 2015 103


PROJECTS WebGL

Download the files here! All the files you need for this tutorial can be found at netm.ag/pixigit-277

A B O U T T HE A U T H O R

HEC T OR AREL L A NO w: miaumiau.cat t: @hector_arellano job: Developer, Firstborn areas of expertise: JavaScript, WebGL q: what’s your most impressive hidden talent? a: I’m a good parent!

WEBGL

INTEGRATE PHOTOS INTO VIDEO IN REAL TIME Hector Arellano shows you how create seamless photo and video compositions that work in real time, using Pixi.js

RES OURCE To learn how to use Pixi. js to deliver interactive content across different devices and browsers, check out this tutorial by Mat Groves: netm.ag/ pixitut-277

104

march 2016

For the Fuel Up for Battle web app (www. fuelupforbattle.com), a gaming promotion for Firstborn’s client Mountain Dew, we created a digital hub that featured exclusive video content around the universe. To create a more personalised video experience, we integrated a photo of the user into a series of background images as if it was part of the composition. The integration is done in real time, while the video is playing. This meant the rendering had to be at 60fps so it would match the video in every single frame. In order to achieve this, we decided to use a WebGL renderer called Pixi.js. To integrate the photo into the background in a convincing way, there were several steps we needed to complete:

1 Generate a mesh with the points tracked for each frame of the video

2 Create a shader that corrects brightness and saturation, and simulates the depth of field of the surrounding pixels 3 Generate a shader that implements the final composition, depending on the background colour of the video In this tutorial I’ll go through each of these stages in more detail, and show you how you we can implement them with JavaScript code.

MESH GENERATION With the steps defined, let’s get started. The first step is to generate a mesh that matches


WebGL

IN-DEPTH

BILINEAR INTERPOLATION One of the key parts of generating data from a set of values is interpolating between the given initial values. This interpolation returns a new set of values that are dependent on the initial ones. A linear interpolation can be expressed as: Pi = Pa * ti + Pb * (1 - ti) Apply blur Use the first shader to apply blur and modify the colour of the user’s image

the desired position of the photo for each frame of the video. The developer should provide four corners for the corresponding sprite. These points are usually obtained by tracking the video with a video editor. With these points, the developer can generate a custom mesh with the desired resolution. Take a look at netm.ag/pixigit-277 to see the full code for this tutorial.

This just says that any point on the segment can be expressed as a weighted average of the borders from that segment. Let’s suppose we want to segment a line in two equal parts. The first thing to do would be to generate the weights ( t ) for each required point. To do this we divide 1 by the total number of segments required (the result is 0.5). This ratio is then multiplied by index positions for each point expected (0, 1, 2). This results in the following average values: T0 = 0 T1 = 0.5 T2 = 1

var mesh = new PIXI.mesh.Mesh(imageCaptured);

Now it’s time to obtain the points required for each segment:

for ( i = 0; i < gridY1; i ++ ) { for ( w = 0; w < gridX1; w ++ ) { animatedPoints[ offset ] = calculatePoint(w, i)[0]; animatedPoints[ offset + 1 ] = calculatePoint(w, i)[1]; uvs[ offset2 ] = w / 5; uvs[ offset2 + 1 ] = ( i / 5 ); var a = w + gridX1 * i; var b = w + gridX1 * ( i + 1 ); var c = ( w + 1 ) + gridX1 * ( i + 1 ); var d = ( w + 1 ) + gridX1 * i; indices[ offset ] = a; indices[ offset + 1 ] = b; indices[ offset + 2 ] = d; indices[ offset + 3 ] = b; indices[ offset + 4 ] = c; indices[ offset + 5 ] = d; offset += 6; offset += 2; offset2 += 2; } }

P0 = Pa P1 = 0.5 * Pb + 0.5 * Pa P2 = Pb To segment a line between two points, you need to generate a weighting value: T . For surfaces, the segmentation is done using two weighting values: U and V . The developer should generate the required weight values and perform three linear interpolations to obtain the desired segment point. Suppose the developer has four corners to generate a mesh. A first linear interpolation can be done between the upper corners using the U weight, then a second interpolation would be performed on the lower two corners using the U weight. Finally, the desired point would be a final linear interpolation between the two points obtained from the previous interpolation using the V weight.

mesh.drawMode = PIXI.mesh.Mesh.DRAW_MODES. TRIANGLE_STRIP; mesh.vertices = animatedPoints; mesh.uvs = uvs; mesh.indices = indices;

march 2016 105


PROJECTS WebGL

FOCUS ON

WRITING SHADERS For 3D applications like three.js and Pixi.js that are based on OpenGL, shaders represent one of the most powerful tools a developer has to generate complex effects on images and geometries. For WebGL, shaders are separated into two categories: Vertex shaders: Responsible for modifying the geometry sent to the graphics card Fragment shaders: Perform operations over the pixels drawn from the rasterised geometry Since Pixi is based on the idea of having hardware acceleration for sprite animations, most of the effects can be achieved by generating custom fragment shaders that will be applied over the sprite. The application will take care of the vertex shader and the developer can create any filter or effect without thinking about vertices and transformations. Pixi implements the fragment shaders as abstract filters (see GitHub repo). The application requires the dev to provide the fragment shader as a string that will be compiled in real time. The code for the shader is written in GLSL. This is quite similar to C, but it requires the user to understand some key concepts: Uniforms: To send values to the program in the GPU, the shader allows the user to define a set of variables called uniforms. These provide binding between the values defined in JavaScript and the data sent to the graphics card Varyings: If the dev wants to share information between the vertex shader and the fragment shader, varying variables must be implemented. One key thing about varyings is that the data sent must be able to be bi-linearly interpolated The example in GitHub shows the filters required to define all the necessary uniforms in JavaScript.

Mesh placement Use the mesh generated to place the photo on the composition

106

march 2016

This code sets the variables required to generate a mesh made up of five segments in the U-coordinate and five segments in the V-coordinate. It also defines the texture that should be used to render the corresponding mesh. Notice this texture is a PIXI.RenderTarget , and not the image captured by the webcam. This is because the image will be modified using a custom shader (or custom filter) to match the colours from the video and the depth of field. The two for loops are responsible for calculating the UV values for the vertices and the corresponding indexes, in order to generate the triangles required to define the mesh. This is done using a bilinear interpolation among the four corners ( VertexA , VertexB , VertexC , VertexD ), segmenting the [0, 1] domain by the total number of segments required (5 and 5, in the current case). The bilinear interpolation used to calculate the data for the mesh can be read in the boxout on page 105, and you can refer to the GitHub repo to find

Itâ&#x20AC;&#x2122;s time to generate a shader that applies the

out more about the used function. The final mesh placement can be seen in the image below left.

CREATING A SHADER With the mesh defined, itâ&#x20AC;&#x2122;s time to generate a shader that applies all the required modifications to the webcam image captured. Pixi.js allows users to generate custom filters to be evaluated on the pixels. These are then rendered in the current sprite (or mesh, in this case). The filter itself is only a fragment shader written in GLSL. This shader changes the RGB colour values of each fragment to the HSV space, to modify the brightness and saturation of the colour. It then calculates a custom blur for each point, making a bilinear interpolation of the blur intensity for each corner of the mesh. As we want to keep an outside blur on our image, we need to scale the UV mapping from the mesh inside the shader so it can define a safe zone for the blurred pixels. You can find the implementation of the shader in the GitHub repo, with comments for all the main executions of the code. The boxout on the left also explains some key concepts to remember when implementing a shader for Pixi.js.


WebGL

Now we have finished defining the fragment shader, itâ&#x20AC;&#x2122;s time to compile it inside Pixi.js. For this, a JavaScript function is defined that will have as input parameters the corresponding uniforms used in the shader. The following code shows the integration of the shader: function DepthFilter(corners, scale, power, hsva, level) { PIXI.AbstractFilter.call(this, null, ["HERE GOES THE GLSL SHADER AS A STRING"].join('\n'), { dimensions: {type: '4fv', value: new Float32Array([0, 0, 0, 0])}, uCorners: {type: '4fv', value: corners} //The rest of the uniforms are defined in the example. } ); } DepthFilter.prototype = Object.create(PIXI.AbstractFilter. prototype); DepthFilter.prototype.constructor = DepthFilter; Object.defineProperties(DepthFilter.prototype, { uBg: { get: function() {return this.uniforms.uCorners.value;}, set: function(value) {this.uniforms.uCorners.value = value;} } //The rest of the setters and getters are defined here. }); After the previous function is created, a series of setters and getters are defined for each uniform outlined in the abstract filter. This allows for changes to the values in real time, as Pixi.js renders the corresponding mesh for every frame. The result of the shader can be seen in the image at the top of page 105.

FINAL COMPOSITION So far the integration has a mesh that can change its position in real time and a shader that modifies the visual aspect of the image. However, the composition part still needs to be addressed. We need to generate a new PIXI sprite to render the background texture or the corresponding video frame, and a PIXI graphic to render the mesh on top of it: vsprite.filters = [new DepthFilter(corners, scale, power, hsva, level)];

All done Final composition from the images provided. The blending is done multiplying the pixels for each layer

container.addChild(graphic); graphic.beginFill(0XFFFFFF, 1); graphic.drawRect(0, 0, _width, _height); container.addChild(mesh); background.filters = [new CompositionFilter(renderTexture, darkness, level)]; imageCaptured.render(sprite) renderTexture.render(container); compositionTexture.render(background); This code generates a second shader that is used for the final composition. It takes two textures as parameters: one with the current background image or video frame; and a second with the mesh rendered over a black or white texture, depending on the required blending (addition or multiplication). Notice that the definition of the shader is exactly as the previous one performed. With the composition shader generated, the program renders the webcam image inside a sprite, using the DepthFilter shader to modify the image. The result is saved in the "imageCapture" render target. That render target will be used as the input texture to render the mesh. The graphic generated is placed inside a container, with the mesh generated and rendered in a second "renderTarget" variable. Finally the composition is completed, providing the renderTarget texture with render of the mesh and background, as well as the background texture (the one that holds the background image). The resulting composition is rendered into a final render target that can be used to generate a png (try compositionTexture.getBase64() ) or displayed on screen using the default Pixi.WebGLRenderer . For the current case, the final composition can be seen in the image above.

march 2016 107


PROJECTS JavaScript

Download the files here! All the files you need for this tutorial can be found at netm.ag/nodegit-277

A B O U T T HE A U T H O R

TAE WON HA w: taewon.de t: @hataewon job: Developer, TNG Technology Consulting areas of expertise: Java, JavaScript, OS X development

Node.js Script

q: what’s your most impressive hidden talent? a: I am a very good assistant when cooking. Chopping onions, garlic ...

JAVASCRIPT

MASTER NODE.JS FOR DESIGNERS Node.js isn’t just for developers: you can use it to speed up common tasks and boost your day-to-day productivity. Tae Won Ha shows you how

RESOURCE The Node.js website provides detailed documentation for the API. A separate section lists the features of ES6 that ship with Node.js by default nodejs.org/en/docs

108

march 2016

Have you seen your developer friends scripting like magicians on Terminal, and wished you could do so yourself? Using Node.js, and with a basic knowledge of JavaScript, you can become a script magician too. Node.js liberated JavaScript from the browser. With it, it became possible to write serverside applications and to use JavaScript for scripting – or for almost anything, for that matter. In this article, I will explore a few typical use cases for Node.js, to help you boost your productivity in your day-to-day work.

Let’s get started. First install Node.js using the appropriate installer: OS X: Official installer (from nodejs.org) or Homebrew Linux: Package manager of your distribution Windows: Official installer (from nodejs.org) All the scripts from this article can be found at netm.ag/nodegit-277. We will be using the arrow function notation (netm.ag/arrow-277) for brevity.


JavaScript

FOCUS ON

EXECUTABLE SCRIPTS Module manager npm is the package manager for JavaScript, and thus for Node.js. Use it to install a huge range of ready-made modules

On OS X and Linux it is very simple to make scripts executable by themselves so you can use them as real Terminal commands. For example, rather than having to call: $ node /path/to/do_sth_useful.js

INSTALLING MODULES All the features of Node.js that go beyond plain JavaScript are found in modules. There are builtin modules (the standard API), which provide basic functionalities like file system operations or networking. It’s easy to write your own modules, and there are a vast number of third-party modules ready for use. The module manager for Node.js is called npm. You can browse available modules, all of which are open source, at npmjs.com. To use those modules, we create a file named package.json and list the module

There are a vast number of third-party modules available for Node.js. Install them with npm names and their versions. For example, to use lodash and express , we write: { "dependencies": { "lodash": "^3.10.1", "express": "^4.13.0" } }

We can just: $ do_sth_useful Let’s see how this can be done. First, we remove the js -suffix from the script file. Next, we put all our scripts into a single folder: for example, bin in our home directory. They will share a single package.json file and thus also the node_modules folder. Then we add the so-called shebang line to the scripts. The very first line of each script should read: #!/usr/bin/env node This line tells the shell which program should execute the script. Additionally, we should make the script file executable: $ chmod +x do_sth_useful Finally, we should tell the shell where the scripts are located. We add the following line to the end of the .bashrc file (assuming we’re using Bash as our shell, as is the default in many cases): export PATH=~/bin:$PATH All scripts in the bin folder are now directly callable in the shell. If you want the bin folder to be invisible to graphical file browsers like Finder on OS X, you can rename it .bin . Alternatively, if you have Xcode installed, you can use: $ SetFile -a V ~/bin

The syntax for the version follows the semantic version syntax. Here, ^ means the highest version compatible with the specified version. To actually install the dependencies, we execute the following code in the folder where package.json is located: $ npm install

march 2016 109


PROJECTS JavaScript

IN-DEPTH

ASYNC VS. SYNC JavaScript, and therefore also Node.js, is single-threaded. This poses a serious problem for server-side apps, since any long-running operations, especially I/O operations, will block the whole app for some time. That’s why JavaScript has an event loop model that solves this problem by using callbacks. For example, to test whether a file exists, then to read and then to write a new file, we would write: fs.access("some/file", fs.R_OK, (err) => { fs.readFile("some/file", "utf8", (err, content) => { fs.writeFile("some/new/file", "some new data from the content variable", "utf8", (err) => { /* error handling... */ }) }) }); The nesting of multiple callbacks is known as ‘callback hell’. For small scripts that are written to complete one task, we don’t mind when an operation blocks the execution of the script, so we can use the synchronous versions of the functions above: fs.accessSync("package.json", fs.R_OK); // for simplicity we omit the try/catch block var content = fs.readFileSync("some/file", "utf8"); fs.writeFileSync("some/new/file", "some new data from the content variable", "utf8"); For a server-side app code like this would be suicidal, but for scripting purposes it’s better and easier. Node.js offers synchronous counterparts for many of its async functions. Thus, for scripting you can safely use xyzSync() instead of xyz() . As a side note, there are ways to use async functions as if they were synchronous: for example, by using the co framework (github.com/tj/co), or via Promises (netm.ag/promises-277). Since the chances are that the third-party modules you need won’t offer synchronous versions of their functions, co is worth a look.

The easiest way to register third-party dependencies is to let npm do it. For example: $ npm install --save lodash The --save option lets npm write an entry in package.json and it uses the newest version of the module. The files of the installed modules are stored in the node_modules folder. At the time of writing, there are more than 210,000 modules available. In many cases, the most difficult part of writing a script is finding out which modules are best suited to what you want to do.

PROCESSING TEXT FILES The task that crops up most often when scripting is text file processing, the most basic operation being reading. Let’s see how it is done with Node.js. Node.js has the fs file system module in its standard library. To use it, we have to first require the module: var fs = require("fs"); Now we can use all functions the fs module has to offer through the variable fs (the list of available functions can be found at nodejs.org/api/fs.html). To read the content of a file encoded in UTF-8: var contentAsString = fs.readFileSync("/Users/a_user/some/ folder/textfile.txt", "utf8"); In many cases you’ll want to extract information from one or more files. As a real-life example, let’s look at how the number of words of a net magazine article in the markdown format can be computed. The magazine has the following rule for articles: for layout purposes, each line of code (i.e. each line in the <pre> block), regardless of its length, counts as 10 words. We can use a bookmarklet written by Josh Emerson (netm.ag/gistlet-277) to create a script that does the job for markdown files. First, install the cheerio and marked modules: $ npm install --save cheerio marked Then create netmag-count.js with the content listed below: var fs = require("fs"); var cheerio = require("cheerio"); var marked = require("marked"); var fileName = process.argv[2]; var htmlContent = marked(fs.readFileSync(fileName, "utf8")); var $ = cheerio.load("<body>" + htmlContent + "</body>");

110

march 2016


JavaScript var countWord = str => str.replace(/\n/g, " ").split(" ").filter(element => element).length; var wordCount = countWord($("body").text()); var codeLines = 0; $("pre").each(function () { var code = $(this).text().replace(/^\n/, "").replace(/\n$/, ""); codeLines += code.split("\n").length; wordCount -= countWord(code); }); console.log("%d words (non-code) + %d lines of code = %d total", wordCount, codeLines, wordCount + (codeLines * 10)); To use it, specify a markdown file to process: $ node netmag-count.js my_article.md 468 words (non-code) + 54 lines of code = 1008 total Now let’s go through the script. First we require the following modules: fs : File system module from the standard API cheerio : jQuery for node.js (github.com/cheeriojs/cheerio) marked : Markdown to HTML converter (github.com/chjj/marked)

When working with images, you often need The gm module makes this easy to automate

Exponential growth The number of packages available through npm is growing rapidly, as this graph of data retrieved from modulecounts.com indicates

to convert them to a more useful format. We won’t discuss this in detail here, but you can find worked examples in the GitHub repo accompanying the article (netm.ag/nodegit-277).

PROCESSING IMAGES If you are working with images, you often need to batch process files. Using the gm module (github. com/aheckmann/gm), it’s easy to automate recurring tasks. To use the gm module, we first have to install GraphicsMagick (graphicsmagick.org), which it uses as a backend. This can be done via Homebrew on OS X and via package managers on Linux. Let’s see how we can remove the EXIF data from all JPEG images in a folder. Install the gm module: $ npm install --save gm And create remove_exif.js :

To obtain the argument ( my_article.md in the example above), we use Node.js’ built-in array process.argv . The first element of this array is the executing program. The second element is the script being executed. From the third element onwards (thus the index 2 ), the arguments we provide to the script are stored. The script does the following things: Reads the markdown file Converts it to HTML using marked Uses the bookmarklet logic to count the words Another use case I find helpful is reformatting CSV files. CSV files downloaded from a bank’s website have many unnecessary columns and are horribly formatted. Using the csv module (github. com/wdavidw/node-csv), it is almost a trivial task

var fs = require("fs"); var path = require("path"); var gm = require("gm"); var dir = process.argv[2]; fs.readdirSync(dir).filter(file => path.extname(file) === ".jpg"). forEach(file => { var originalPath = path.join(dir, file); var newPath = path.join(dir, path.basename(file, path. extname(file)) + ".exif_removed.jpg"); gm(originalPath).noProfile().write(newPath, err => { if (err) throw err; }) }); Now, to remove the EXIF data from all JPEG files in a folder: $ node remove_exif.js folder/containing/images

march 2016 111


PROJECTS JavaScript } return res.status(201).json({"username": req.body. username}); // Let’s pretend to have created a new user }) .get("/users/:username", (req, res) => { if (req.params.username === "tae") { return res.status(200).json({username: "tae", displayName: "Tae Won"}); } return res.status(404).end(); }) .use("/static", express.static(__dirname + "/public")) .listen(4000, () => console.log("Listening at http:// localhost:%s", server.address().port)); When you run the web app ... Versatile modules npm modules aren’t just for Node.js – you can use them also in browsers for frontend apps. Browserify (browserify.org) helps simplify this process

The main use case for Node.js in the industry is to build server-side web apps. However, even if you’re building frontend apps, it can still be very useful. We can quickly build a mock backend against which we develop the frontend. Afterwards, we can integrate the real backend. Mock backends are also very useful for writing browser tests – for example using Protractor. Protractor is designed for AngularJS, but it can be used for non-Angular apps as well. We will use express , one of the most popular web frameworks for Node.js. Install the express and body-parser modules and create server.js :

... the server is available under http://localhost:4000 . You can verify the responses by using Postman or any other REST client. As you can see, the express instance app has get() and post() (and other http methods, too: netm.ag/httpmethods-277). The calls can be also chained. When we want to POST a JSON body, we can use the body-parser plugin (or middleware in express parlance) to convert the raw body to a JavaScript object, which will be available under req.body for further processing. The responses can be modified by the res object, specifying the http status code with status() and, for example, a JSON body with json() . There are many other ways to customise the response, discussed in detail in the online documentation for the res object (netm.ag/response-277). Often, we want to serve static files. In this case, we can use the express.static() function to specify a folder from which to serve the content. In our example, all files in the public folder will be available under http://localhost:4000/static . There is a lot of middleware available for tasks like these (for an explanation of how to use it, see expressjs.com/en/ guide/using-middleware.html), so we don’t have to write all of the functionality ourselves.

var express = require("express"); var jsonParser = require("body-parser").json(); var app = express(); var server = app .get("/", (req, res) => res.json({msg: "Hello, World!"})) .post("/users", jsonParser, (req, res) => { if (req.body.username === "tae") { return res.status(409).json({error: "The Username " + req.body.username + " already exists."});

Node.js opened up the possibility to use JavaScript for non-frontend applications outside the browser. I hope that I have shown you that even if you’re not a developer, by using Node.js for scripting, you can easily boost your productivity. And by using appropriate third-party modules, you can achieve a lot without having to do a lot yourself. Happy scripting!

Using the fs module, we can obtain the names of all the files in a folder, and omit all non-JPEG files. We use functions of the path module, part of the standard API, for file path and name manipulation. Finally, we use gm ’s noProfile() function and write the result to imagename.exif_removed.jpg . There are many other things that can be done with the gm module, so it’s worth exploring its documentation, which can be found at aheckmann. github.io/gm/docs.html.

BUILDING A WEB APP

RESOURCE The Guide section of Express’s website provides good explanations of how to perform common tasks using the framework: expressjs.com

112

march 2016

$ node server.js

SUMMARY


The number one destination for web design news, views and how-tos. Get Creative Bloq direct to your inbox with our weekly web design newsletter

Graphic design

Web design

3D

Digital art

www.creativebloq.com


PROJECTS Accessibility

ACCESSIBILITY

INCLUSIVE PRODUCTS Umesh Pandya says it’s time to set an example and stop making products and services that exclude certain users vendor. I have seen first-hand how this approach has contributed to the commercial success and ‘brand warmth’ of mobile products we’ve developed – from banking through to retail sector clients.

THE PURPLE POUND The spending power of disabled people and their families – otherwise known as the ‘purple pound’ – is estimated at £212bn. The case for inclusive design becomes even more compelling when you combine this figure with the fact that three-quarters of disabled customers have ceased using a product or service because it was inaccessible or failed to understand their needs. We must all strive to ensure our digital products and services are accessible to disabled people too. When developing Wayfindr, we took an inclusive approach from the start. A joint venture between ustwo and the Royal London Society for Blind People, Wayfindr’s mission is to empower vision impaired people to independently navigate around the world. Whilst we started with blind people as an extreme user, the standard we have created is one that everyone can benefit from, meaning many people can reap the rewards from one product that is inclusive, not exclusive.

PROFILE

The world of ubiquitous computing is close, and it will bring huge opportunities for designers, engineers, city planners and social scientists to work together and shape a world we all want to live in. As we continue to weave computers more deeply into the fabric of our lives, more than ever we need to create digital products and services that are inclusive – not exclusive. Over the years, I’ve worked for clients on mobile products where accessibility was seen as a bolton feature. I often found myself thinking that if accessibility had been integral from the start, costs would have been smaller and the number of potential customers much greater. I also know that companies don’t choose to ignore accessibility. I believe that we – as makers of digital products – need to take responsibility for educating our clients on the relatively low implementation effort and the high value to be gained from making products accessible. It is easier to talk to clients about the importance of an inclusive approach when you are working on projects that put people at the heart of the design process. One outcome of thinking inclusively could be that the digital product utilises the assistive technology that is already built in by the smartphone

114

march 2016

Umesh (@the_ume) has been working as a designer for over 15 years. He is the co-founder and CEO of non-profit startup Wayfindr and a senior member of staff at ustwo London


PROJECTS Build a site with Material Design Lite Design animation with Principle Get more from text editor Atom Create a pyramid layout with CSS Integrate photos into video in real time

9000

9001

Master Node.js for designers

0800 1 777 000


Net 2016 277 march