Issuu on Google+


3-month accounting trial worth up to £87

The voice of web design


Over 5 hours of exclusive video tutorial content


6 layout myths busted with CSS Grid, Flexbox and more

Issue 284 : September 2016 :

Take charge of all areas of your business from finance to workflow

Plus! toP tutorials

UI elements with React Angular 2 app making ● Sketch typography ● UXPin prototyping ● ●



editor’s note

Bangalore has established itself as ‘India’s Silicon Valley’. More than a million of its people work in tech, and there’s a huge community keen to learn the latest in web development. So we decided to bring our conference, Generate, to them. We’re thrilled to have Shikhar Kapoor, a UI engineer from Flipkart, India’s biggest ecommerce company that built one of the first progressive web apps, join us for the day as well as Harry Roberts, Tim Kadlec and more (see Things are different in emerging markets, and we must keep that in mind when we design and develop our experiences in the western world. There are performance issues in India as well as Asia and

Africa, and it’s a subject that Opera’s Bruce Lawson and Google’s Rachel Ilan Simpson will focus on at Generate London on 22/23 September, when they will explain how to reach the next four billion people, who may be on low-speed, intermittent connections, with fast, performant sites. Meanwhile, this issue comes with over five hours of exclusive screencasts (turn to page 83 for further details) as well as a three-month FreeAgent trial (see page 63). Now that’s what I call value for money. Enjoy it!

Oliver Lindberg, editor @oliverlindberg

Featured authors Femk e van schoonhoven

Jen simmons

leah Bule y

Pe ter nowell

Femke is a digital designer, lover of side projects, and co-host of the Design Life podcast. From page 68 she explores 20 great new tools for freelancers. w: t: @femkesvs

Jen is a designer and developer advocate at Mozilla, and the host of The Web Ahead. From page 76 she busts six layouts myths and invites you to break away from old habits. w: t: @jensimmons

Leah is a veteran of experience design and author of the book The User Experience Team of One. On page 28 she assesses the state of UX in 2016. w: t: @leahbuley

Peter is a San Francisco-based designer of apps, websites, brand IDs, and more. He reveals three typographic techniques for Sketch from page 96. w: t: @pnowelldesign

september 2016 3



Future PLC, Quay House, The Ambury, Bath, BA1 1UA +44 (0)1225 442244


editor Oliver Lindberg, Production editor Ruth Hamilton, art editor Rebecca Shaw

editorial ContributionS

Philip Ackerman, Gregor Adams, David Berner, Leah Buley, David Burton, Helen Clark, Tanya Combrinck, Robert Cramp, Ben Gremillion, Sam Kapila, Una Kravets, Tom May, Michele Mazzucco, Peter Nowell, Matt Ridding, Adrian Roselli, Julia Sagar, Femke van Schoonhoven, Jen Simmons, Kyle Stetz, Dan Tello, Alex Turner, Paul Welsh, Gareth Wilson, Daniel Zen

art ContributionS

Elena Afanasieva (Lena la Ballena), Monica Kvaale, Ben Mounsey, SĂŠbastien Thibault, iStock


editorial director: games, photography, creative and design Matthew Pierce, group art director Rodney Dive

Creative bloq global editor-in-chief Dan Oliver, managing editor Craig Stewart, Content manager Kerrie Hughes, Staff writer Dominic Carter CommerCial Commercial sales director Clare Dove, Senior advertising manager Sasha McGregor, director of agency sales Matt Downs, Head of strategic partnerships Clare Jonik CirCulation trade marketing manager Juliette Winyard ProduCtion Production controller Nola Cokely Head of production uK and uS Mark Constance liCenSing Senior licensing and syndication manager Matt Ellis

neXt iSSue on Sale 8 SePt 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

september 2016


google docs, Photoshop, dropbox, FutureSource, illustrator, indesign, CodePen, gitHub


COVER PaceSetter gloss 250gsm P3-82 ultramag Plus gloss 90gsm P83-114 grapholvent 70gsm


antonio, Share tech, merriweather, titillium Web

contents Issue 284 : September 2016 :



side pRoJeCT of The monTh 16

kyle stetz‘s scribble Audio tool transforms keyboard taps into looping sound

CLienTs fRom heLL


BeYond piXeLs


need LisT


evenT RepoRT




It’s a ‘little place of solace’ that combines tech-work and handicrafts zones. Una kravets invites us into her Austin, Texas home office

A site design is dragged back into the past after being shown off to the wrong people

david Burton uses sketchnoting to visually document conference talks

The stuff we want this month, including a set of cards to help you learn about the IoT

oliver Lindberg spills the beans from the debut san Francisco Generate conference

voices innovaTion aT The BBC


Robert Cramp explains how the Beeb found a new way to nurture innovative ideas

The sTaTe of UX in 2016


inCLUsive WeB design


Big QUesTion


Leah Buley examines some recent study results to see how organisations use UX

helen Clark reveals how her studio opened itself up to a more inclusive design process

What does Brexit mean for the web industry? Experts share their thoughts


happyCog founder Jeffrey Zeldman discusses his new studio


september 2016





Norwegian UX designer ida aalen explains how smart user research can help you solve the right problems – and even win new clients

sUBscRiBe to net ANd sAvE Up To 54%

TAkE AdvANTAGE oF ThE prINT ANd dIGITAl BUNdlE Turn to page 24 to find out more Want the Pro package? Turn to Page 51

Contents rEgular



dan Tello runs through some great new websites, including the return of 90s/noughties legends the powerpuff Girls

RegUlaRs neTWoRk




The latest mail, tweets, posts and rants

henrique alves, nir kaufman, mat marquis and Jonathan White share some advice

showcase design ChaLLenge


foCUs on




hoW We BUiLT


Three designers mock up climbing centres

sam kapila homes in on delightful design

free 3-month

freeagent trial See page 63

edenspiekermann staff talk open offices, agile processes and new digital journalism

south West Trains got Zone on board to deliver an easy-to-use ticketing site

PRoJects ReaCT








gregor adams shows how to build a fully accessible and customisable component

FeatURes 20 Top neW TooLs foR fReeLanCeRs 68

LaYoUT mYThs BUsTed

femke van schoonhoven explores 20 new tools to help you take charge of every area of your business

Jen simmons explores what’s newly possible with layout on the web, inviting us to break out of old habits



BUiLd a maTeRiaL design app WiTh angULaR 2 106

daniel Zen walks through creating a dialogComponent and to-do app with Angular Material

ExCluSIVE VIDEO tutOrIalS! look out for the video icon in our tutorials, and turn to page 83 for 22 bonus screencasts

Ben gremillion walks through building an app prototype in UXpin

gareth Wilson introduces hyperdev, a tool for prototyping, remixing and sharing ideas

peter nowell reveals three hidden typographic techniques

WeB sTandaRds


shadoW dom




philip ackerman on the ApI that standardises how we access sensor data

david Berner explains how to craft reusable, shareable components

adrian Roselli talks ‘fringe accessibility’

september 2016 7

Mail, tweets, posts and rants contact us



marketing material that will help your visitors become your customers”. Beyond that, I try to make sure a scope of work and a timeline are included. You don’t want to leave things up in the air, but show some definites. It helps keep scope creep out and makes clients respect you.

Alex Moschopoulos, Chicago, US

Writing a proposal net: In issue #280, we shared a range of advice from net readers on how to write a web design proposal. When we posted the article online at proposaltips-284, it elicited these further thoughts. In a web design proposal, I’ve always aimed to talk in terms of business over creativity. I usually try to make my points and push ideas in terms of potential results. However, I’ll never make up unreachable results to excite a client, or make promises I can’t keep. I’ve just found that most clients are thinking in terms of return on investment, and thus I try to make sure I bring them good ROI. Anyone can say, “I can make your company look great”. But few can say, “I can make you a


september 2016

I wish folks in the creative community would talk in term of business over creativity. Seldom do I see designers thinking beyond ‘usability’ and aesthetics. While their project looks amazing, they fail this test by not having put themselves in the target customer’s shoes and thought about how this will enhance their brand experience to convert them into a returning customer.

Brand Custodian, US

about how responsive design is leading designers to rely on boxes and grids, reducing the level of creativity (netm. ag/soul-284). Here are some of your comments. This is exactly how I feel. I’m redesigning my portfolio and looking for inspiration but it’s rare I come across a site that really looks different. Don’t get me wrong, there is still an abundance of beautifully designed sites out there. But it’s the same design style and becomes boring after a while.

Eloise Ranson, Surrey, UK

I think these ‘death of web design’ articles make us lose sight of who we do our job for – the end user. We need to consider what they already know, which is why there are now common usability conventions. I mean, you can write an 80-minute song or

a 4,500 page book that reads from back to front, but don’t expect anyone to listen to or read it. Same is true here. Sure, conventions can be a bit stilting, but if you consider the goal and audience for your design, you realise that they help users. That’s what we’re paid to do; that’s the real goal.

Ben Berzai, Philadelphia, US

Surely the challenge (apart from having to justify why your design is worth more than a site from Wix or Squarespace) is to maintain the responsive requirement (even though I personally detest having to design for such small screens – use a bloody computer!) and to have enough creativity to produce something that breaks the bounds of grids and boxes... and then sell it to the client.

Andy Gaucher, Derbyshire, UK

Talking seems like the important aspect. Wouldn’t it be more cool if your design talked as well? It’s like when you tell a joke: if you have to explain your UI, it’s a bad UI.

Pratik Kataria, India

is Web design losing its soul? net: We recently republished Noah Stokes’ opinion piece

Decent proposal Our article sharing advice from net readers on how to write a web design proposal stoked plenty of online debate (

Network tHE PoLL

How are you preparing for web design industry cHanges? Transitioning to a consultant or educator role 20.29%

Carving out a niche/ specialising 52.17%

Building a business based on an opportunity brought by a new platform 21.74%

I’m UK-based – considering moving business to Europe due to Brexit 7.25%

Learning better business/leadership skills 30.43%

Preparing to take a role on an in-house design team 13.04%

From our timeline

What do you miss about the web design scene of 10 years ago? Flash? And no one was an ‘expert’ yet. We were all still trying to figure this web thing out together. @IanMacDowell


The wild west feel of MySpace profiles being pimped up to the Nth.

   &n bsp;  &nbs p;    @MarmaaDuk

Richer animations! It’s so hard for illustrators and animators to contribute to this space now. @rachelnabors Not having to understand 23 technologies, on top of design, to get something live. @LucPestille There were less rules. We did not fill in boring standardised UX grids.

We created custom artistic layouts & emotional environments. @shanemielke No frameworks, no build tools, just a text editor, some browsers and core languages. @mattFrankJames I miss clients who wanted something new and interesting, not something the same as everyone else but with more pop. @bingojackson Hit counters! @nternetinspired

cooL stuff we Learned tHis montH ThE fUTUrE of ThE wEB

A sizeable brouhaha has erupted between people who believe that JavaScript is the way forward for the web, and others who are concerned that a web that doesn’t work without it will have negative consequences for accessibility. In this post Matt Griffin lays out the argument and considers how we can make things work for everyone. ThE myTh of ThE ‘rEaL JavaSCrIPT DEvELoPEr’

What makes you a ‘real’ developer? In this talk Brenna O’Brien, a frontend engineer at TED, discusses how as an industry we should work to reduce the intimidating level of cultural pressure to know absolutely everything. argUmEnTS anD ParamETErS In ECmaSCrIPT 6

The latest version of ECMAScript has made significant improvements to parameter handling in JavaScript. In this article Faraz Kelhini explores rest parameters, default values and destructuring, and other new features.

september 2016 9

Send your questions to This monTh feaTuring... Henrique Alves Henrique is a frontend consultant focused on user interfaces and UX w: t: @healves82

Practical advice from industry experts


What role does paper play in your design process? Christopher Murphy, Belfast, UK

nir KAufmAn Nir is the head of Angular development at Israeli consultancy 500Tech w: t: @nirkaufman

mAt mArquis Mat works at Bocoup and chairs the Responsive Issues Community Group w: t: @wilto

JonAtHAn WHite Jonathan is a designer and growth engineer, and writes on Medium w: t: @jonathanzwhite

Fast moving The simplicity of good old-fashioned pencil and paper allows for rapid design iterations

JW: I always start with paper and pencil. I use paper to record my observations during research and user experience interviews. I also use it to sketch out different wireframes and flows. Paper allows me to iterate quickly. Once I need higher-fidelity mocks, I switch to Sketch, then plug them into prototyping tool InVision. The fewer tools, the less overhead – and the faster I get things done. (For more on this subject visit; Eva-Lotta Lamm will also be leading a sketching workshop at net’s Generate conference in London on 21 September.) React

TemplaTing sysTems Is using another templating system (such as Handlebars) a bad idea?

Benjamin Read, Hatfield, UK

Ha: The way React was presented – by claiming ‘React is the V in MVC’ – ended up with people thinking it was a template library like Handlebars, Mustache, and so on. React components are way more powerful than traditional template


september 2016

libraries because it’s just JavaScript with JSX sugar. Take a simple usage for template literals: in Handlebars you must write a helper. In React you have all JavaScript’s power in your hands. FRontend

FuncTional programming the functional programming paradigm is gaining popularity in the frontend world with libraries like Redux and Immutable.


3 simple steps Any advice for a beginner who wants to learn frontend and design? Lawrence Agyei, Chicago, US

JW: The best way to get started is by jumping right into it and working on relevant side-projects. Your first 10 designs and websites are going to be pretty bad. And that’s OK. Get them out of the way as soon as possible. Predictable world Immutable data makes tracking state changes within applications a good deal easier

Where do you see this leading? do you see ooP constructs losing favour as apps become increasingly complex?

Robert Smith, Manchester, UK

JW: I think functional programming will continue growing in popularity, because functional programming makes it much more straightforward to reason about complex systems. With pure functions, it allows us to reduce unintended side effects and state mutations within our applications. Furthermore, immutable data makes tracking state changes a good deal easier. Even though functional programming is popular today, I don’t think objectoriented programming is going anywhere. Lots of applications today are still being built with OOP. Also, OOP isn’t bad. OOP principles help developers create abstractions that promote single responsibility and encapsulation. At the end of the day, both functional and object-oriented programming are just tools. It’s up to developers to take the time to think about the best way to architect their systems. angulaR

WHere To sTarT as an angular newbie, do I start with v1 or v2? What are their differences/benefits?

Theo Nicolaou, London, UK

nK: Definitely Angular 2.0. Angular 1.x was initially released back in 2010.

Almost everything has changed since then: JavaScript, the Web API, browser capabilities, design patterns used in frontend development and the general approach for building complex singlepage applications. Angular 2.0, as a brand new, modern platform, is built on top of modern web technologies and APIs, and implements the commonly used component architecture for building the presentation layer, as well as solid object-oriented principle infrastructures. If you are a complete newbie, I can’t see any reason not to jump into the latest frontend technologies. Angular 1.x is still relevant and commonly used in production, but it’s changing fast. React

BesT pracTices What are best practices when switching a React app from dev to production?

Lionel, IT

Ha: First, separate production and development builds. Make sure the node environment variable is set to production by using webpack.DefinePlugin , which removes all those helpful warnings and checks. If you want to ship your app with source maps use the DevTools configuration option set to cheap-modulesource-map to minimise the output. Finally, don’t forget to uglify the source by adding webpack.optimize.UglifyJsPlugin to your plugins.


Develop your design eye, your ability to identify and critique good design. Spend time looking at the objects and structures around you. Notice their colour, shape, and function – and their design.


For frontend development, start by reading through the HTML and CSS tutorials on Mozilla Developer Network. If you’re more of a hands-on learner, check out Codecademy’s interactive tutorials.

Putting it together

Frontend development’s beauty is that you can master it in conjunction with design. Find a project, small or big and invest time in doing everything from the wireframes to the implementation.

september 2016 11

exchange Q&As ReSPonSIve deSIgn

organisaTion For each size: one media query with all the things, or many media queries for different portions of the page?

Steve Luvender, Allentown, PA

mm: I’m big on having media queries organised around the modules they impact, rather than being grouped into a handful of overarching page-level media queries. It helps me keep everything organised, for one thing. Even if the styles for all the different parts of a site will eventually live in one monolithic style sheet, I try to work on each module in isolation as much as possible – whether or not that work is structured around a pattern library. FRontend

revival time Redux is an increasingly popular state management solution for JavaScript applications

either or Experimentation, such as A/B testing, can help teams iterate to better experiences in less time

tests, product teams can iterate to better experiences more quickly.

much of this is in the core packages vs third party?


Ha: Not much at all. The core team does good work keeping the migration path seamless. Discussions happen over Twitter, on React repos, and all weekly meeting notes go on GitHub as well. For any major release there’s a blog post on the React website. It’s not hard to know the patterns you should avoid or embrace. When a pattern is removed, you get plenty of time to upgrade; the app doesn’t break, you get a warning in the DevTools console. If you keep your app free of warnings, any upgrade should work out of the box. Regarding third parties, the React ecosystem is huge; it wouldn’t be fair to make comparisons but I believe it depends how early you adopt the library.

cHanging sTaTes In angular 2, what is the best way to handle a shared menu or filters section where the contents changes based on the page?

iTeraTive WorKing

Martin Fraser, Scotland, UK

How many iterations did it take take until you had the perfect filter mechanisms for airbnb’s app?

nK: There is no ‘best way’. I’m using Redux architecture as the state management solution for my Angular 2 apps. My shared menus and filters are dynamically reflecting the app state that can be triggered by the page content. Managing a single store that keeps an immutable application state, enabling me to affect different components without the need for complex communication.

Christiane Tänzer, Trier & Bonn, DE

JW: I’m not on the right team to answer that, but I imagine it took dozens. When trying to optimise an experience, one of the best ways is via experimentation – testing new product experiences against old ones. The goal with experiments is to identify how to improve existing features and optimise metrics such as activation and engagement. You can think of experiments like a game of hot and cold. You run one, move in a direction, and the data tells you if you’re hot or cold. Keep doing this until you reach the hotspot. I’m a proponent of metric-driven product development. By analysing qualitative and quantitative data collected from experiments like A/B



media queries

mm: Assistive tech can be a little quirky about block-level links when there are a handful of elements in them – being read aloud as more than one link, for example, or only reading out the first element in the block-level link – but I haven’t seen any really glaring issues come up around it. With just one heading in there, you likely wouldn’t run into any a11y issues at all, and it’s perfectly valid per the spec. It feels a bit weird to me in terms of styling, but that’s mostly a product of my getting started during the XHTML era, I figure.

Sam Rapaport, Huntington Beach, CA

Giorgio Pretto, Italy



september 2016

ReSPonSIve deSIgn

For a11y does it make any difference to nest <a> into <h2> or the other way around?

React simple things Upgrades in React should be straightforward if you keep your app warning-free

Daniel Schildt, Helsinki, FI

How much refactoring do new React version releases normally cause? How

Should different media queries exist per module? mm: The media queries appropriate to my overarching page layout may not be appropriate to the contents of a single module within the layout. The more responsive work I do, the more media queries I end up using to control smaller and smaller sets of styles: a line-length tweak at a certain point here, a change to the proportions of an image there. My content is the only semi-predictable thing I have to work with when I’m making decisions about breakpoints. It wouldn’t make sense to shoehorn those decisions into a predetermined set of one-size-fits-all media queries any more than it would to make those decisions based on a few common screen sizes.

sydney 5 september 2016

Generate is venturing Down Under! The show features John Allsopp, Nick Finck and Erika Hall, and will explore Flexbox, animation and responsive web apps

London 21-23 september 2016

A two-day, one-track event, plus a whole day of handy workshops! Speakers include Ida Aalen, Jeff Veen, Brendan Dawes and Mike Kus

BangaLore 2 December 2016

For the first time in Indiaâ&#x20AC;&#x2122;s tech hub! This development-focused event will feature Harry Roberts, Jonathan Snook and Flipkartâ&#x20AC;&#x2122;s UI engineer Shikhar Kapoor

TickeTs on saLe now

People, projects & paraphernalia

This monTh FeaTuring...


Kyle Stetzâ&#x20AC;&#x2DC;s Scribble Audio tool transforms keyboard taps into looping sound



david Burton uses sketchnoting to visually document conference talks



Need LiST


A site design is dragged back into the past after being shown off to the wrong people

What we want this month, including a set of cards to help you learn about the IoT





Una Kravets breaks down the tech and handicrafts zones of her Austin space

Oliver Lindberg spills the beans from the debut San Francisco Generate conference

september 2016 15


Side project

Scribble Audio Kyle Stetz’s online tool transforms keyboard taps into looping audio

do together. My essentials are the Web Audio API for sound, Bacon.js for working with streams, and Paper.js for working with Canvas. Using these together for a while has resulted in a kit of parts that I can use to build things out quickly. Each project gets a little easier than the last!

Side project of the month

Info job: Developer at Slack w: t: @kylestetz

net: What is Scribble Audio ( KS: It’s an instrument that turns your drawings into a musical composition. Sound is generated by the motion of your mouse (or your finger on a touchscreen), and that motion is repeated at 120 beats per minute, creating loops of sound. The keyboard allows you to select the note and the loop length control changes how long your scribbles take to loop, giving you just enough tools to build up a song. net: How did the idea develop? KS: I came up with a technique in a previous project ( that involves storing mouse motion in sync with music. I knew there was more to explore there – so I spent some time thinking about what other applications it might have. My breakthrough moment was realising how easy it is to manipulate timestamp data in order to get things to repeat in the future. net: How did you decide what technologies to use? KS: I use the same stack in every project, slowly evolving it as I learn more about what the tools can


september 2016

net: What were the design challenges, and how did you resolve them? KS: I wanted this to appeal to people who don’t consider themselves musicians, yet remain useful enough that a musician wouldn’t write it off as a simple toy. That creates some tension when deciding which features to include: they have to be simple and understandable, yet powerful enough to provide some variety. I built tons of features that I later stripped out because they didn’t meet that standard. net: You seem to have a few side projects you do outside your day job ... KS: Most of my energy goes into a record label I run, called Grind Select, where I design and build interactive websites to accompany our record releases. We’re giving bands a chance to express their identity in a totally unique medium, and that feels important to me. Sometimes those projects inspire further exploration, as is the case here. I feel that these projects are where I learn the most – the ones where I set the boundaries and ask myself honestly ‘what is the coolest thing I can make?’ And what’s more fun than building musical instruments?


how to

Hire tHe riGHt people It’s the people that make the agency, so how do you make sure your newest hire is the right fit? We asked our followers

Personality Counts

GoinG backwards

Exclusively for net: the latest in a series of anonymous accounts of nightmare clients Clients from hell After a month of intense back and forth redesigning a site for two entrepreneurs, we were ready to launch. My clients were very happy with their website – so happy, they wanted to show it off to their friends and colleagues. I didn’t hear from them for a week. Eventually, I wrote to check in:

Illustration: Sébastien Thibault

Me: We’re scheduled to launch tomorrow. I hope all is good to go? Client: About that. My innocent check-in a day before launch spurred a laundry list of last-minute changes, which stripped away weeks of work that had made the site unique, dynamic and current. Worse, some seemed to have been suggested by a friend who loved jargon, but didn’t understand responsive design and was obsessed with photo positioning and justified type. I realised the site was going to look quite similar to the original, static 2012 one. Their email indicated they were too busy to spend time discussing the deletions. I sucked it up and did as many changes as possible (some were crazy), given the now-tight launch deadline.

When I emailed them to look at the site and OK the changes, I couldn’t resist adding a personal note about some features that were cut that I knew they had loved: Me: I’ll miss the Future Challenges percentage circles and the great artwork we had in the ‘How we work’ section, but I hope the site is what you want it to be. The response I got after undoing weeks of work in six hours, without complaint? Client: That’s the problem with getting emotionally attached to your work. Nice to know my emotions were the problem, and not the ridiculous last-minute shift to an outdated design. But what do I know? I found out later that one of the people they’d shown the new design to was the guy who’d designed their 2012 site.

The right candidate isn’t just someone who does their job well, they’re also someone you can bear to sit next to all day. With this in mind, @cole007 recommends a pub interview, and @wez simply cautions: “Don’t hire assholes.” @alexispratsides suggests splitting the interview process in two, with a company-fit interview first, and if that goes well, a second interview focusing on skills.

soft skills Talent or a super-sharp mind can only get you so far; certain soft skills are required for a hire to become a good member of your team. “First and foremost, I look at attitude and passion,” says @felise. “Lack of those two are more detrimental than any lack of skill or experience.” @halfnibble advises that you ask them to show you the work they’re most proud of rather than grilling people on their knowledge of the latest frameworks.

MaChine learning If all else fails, why not apply some number crunching to the problem? @BryceBladon says: “A studio I consult at applied machine learning to the process – seeks referrals based on existing employee’s connections.”

september 2016 17


3 4 2


Una Kravets breaks down the two sides of her Austin workspace, which is split between tech work and handicrafts workSPACE I have a strong case of wanderlust and travel a lot, so my home office in Austin, Texas is a little place of solace for me. It’s in a beautifully eclectic part of town, and is full of travel mementos and art, with a lot of sunlight and a bright yellow accent wall. Most of the art hanging on the wall is practice watercolours or calligraphy by me, apart from the two posters at the top [1]. The first is a test print (used to test inks and screens on, so multiple images end up showing through) that I got from Industry Print Shop, in my neighbourhood, for only $5. The second was created for an event by Ryan Hamrick, a talented local


september 2016

lettering artist who also hosts whiskey events in my part of town. You may have noticed that I have two desks – one for tech; one for handmade art. The right-hand desk [2] was found in my apartment complex’s recycling room. I ended up commandeering it, giving me much-needed extra space for crafts and painting. I keep my calligraphy nibs and inks in a neat little box [3], so they’re easy to take around if I want to do some lettering at a coffee shop. My mug and yellow mason jar (which matches that yellow wall!) are full of brush pens and paint brushes respectively. The techy side of my desk features my unicorn rubber duck

(for rubber-duck coding), mouse and keyboard (I love the new Apple keyboard) and blogging microphone [4]. I write web development-related articles relatively often and always record each one I post to my website, so the user has the option to hear the post as well as read it. I also use it to record my weekly podcast, Toolsday (, remotely. From calligraphy to painting to podcasting to coding, I do a lot of things in this small space, and keep track of them all with to-do lists and planners (my life source!). My newest planner [5] is already filled with travel information for my next few trips. While I tend to work from my laptop because of my travel schedule, I love returning to my bright little home office in Austin, Texas. ProFILE

Homemade Haven

Una ( is a UI engineer on DigitalOcean’s creative engineering team. She’s a conference speaker and technical writer, and cohosts the Toolsday podcast


Beyond pixels

Stuff I lIke

Brenda S torer Designer and frontend developer

sVGo The time to use SVGs is here! But programs like Illustrator and Sketch still add clutter and hidden elements to files. SVGO is a Node.js-based tool that optimises SVGs through the terminal command line and can decrease SVG files by over 50 per cent.

BourBon and Bitters For projects where I use Sass as a CSS preprocessor, I add Bourbon with Bitters. Bourbon is a lightweight Sass library of mixins; Bitters complements it with base style sheets and variables ready to be customised to the design of your application. /

astrum Astrum is a pattern library I use to create style guides of reusable components for larger projects with many contributing devs. I like it because it’s JS-based and is easily added to applications built on any platform.


september 2016


This month … David Burton uses sketchnoting to visually document conference talks bEyOnd PIxELs Sketchnotes are notes taken during talks, conferences and events that try to summarise the key points and concepts in a visual way, so you’re drawing more pictures and writing fewer words. I think of it as more like doodling than drawing. It’s a mix of note-taking and creative expression, and a handy middle ground between my day job in a web design agency and more art-led personal projects. My interest started when I had my own conference talk turned into a sketchnote. I found the artist afterwards, bought him a drink and promised to return the favour one day. That day came a year later, and my first sweaty-palmed attempt wasn’t great. But with a bit of help from others and lots of practice, I’ve never looked back. I draw sketchnotes live, in one take. I use a pen and paper rather than digital tools, as I find that making physical marks is more committed and immediate. I love how ink feels alive as it flows from the pen and soaks into the page. It’s freeing to leave screens – and the Undo option – behind. I enjoy sketchnoting for three main reasons. First, it’s improved my concentration and attentiveness at conferences. I find I take more in and remember more of what I hear. The constant process of listening, understanding and visualising keeps me active and leaves no time for distractions. Sketchnoting is great for helping

understand non-linear information and seeing links and connections between concepts. Second, it’s a challenge. The live aspect means never knowing what’s going to happen or what I’ll need to draw. There’s no pause or rewind, so I have to stay sharp and ready to improvise. I make mistakes and have to cover them up. There’s always room for improvement and more practice. Third, sketchnotes lend themselves perfectly to sharing. It’s great for my job, which is all about sharing new ideas and concepts. Circulating notes with colleagues at work makes passing on information easy and way more interesting. I’ve met some great people and even made new friends from sharing my sketchnotes online. I’ve accepted invites and new challenges that have taken me in new directions. One of the most exciting was working on the illustrations for Ben & Andrew’s Bumper Book of Fun and Games. It’s a compendium of creative tools for better problem solving that includes games, tasks, interviews and stories. We made it in just five days, from start to finish, at last year’s D&AD festival.


David ( is head of innovation at Redweb. He’s a designer during the day, a painter and printmaker at night and an avid fly fisher in between

Need list

Need list

Stuff We Want Small objects of web design wonder: from a definitive guide to accessibility to a tracker blocker that will protect you online 1

PractIcal svg


From $9

Know carDs





InclusIve DesIgn Patterns







tIme Is money


What we think (1) Chris Coyier helps you harness the power and possibilities of crisp, performance-efficient SVG in this new book ( (2) Bring the Internet of Things to your fingertips with these decks of cards, designed to help you understand and design new products (know-cards. (3) Heydon Pickeringâ&#x20AC;&#x2122;s guide helps bust accessibility myths and runs down the rules for making your designs inclusive ( inclusive-284). (4) The free UI kit from InVision includes 45 design templates, 15 categories, and more than 99 UI components for web, tablet and mobile ( (5) Fitting its quest for ethical design, has released a tracker blocker protecting you from behavioural advertising ( (6) Convince your organisation to upgrade its web performance via case studies from Tammy Everts (

september 2016 21

next month

25 mInd-blowIng JavaScrIpt tIpS We reveal the latest hacks to master the most important programming language in the world

plUS build responsive web apps with container queries

get started with frontend testing strategies

create complex Flexbox layouts with postcSS

ISSUE 285 on SalE 8 SEptEmbEr Print edition, back issues and sPecial editions available at digital editions available on itunes, google Play, kindle, nook and Zinio


EVENT GUIDE Web Summer Camp DATE: 31 August3 september 2016 LOCATION: rovinj, Hr pHp gets a shakedown in this four-day hands-on event, which also focuses on the eZ publish Cms as well as sessions on web design, uX and content.


Working positively in a sometimes overwhelming world: Oliver Lindberg reports from net’s San Francisco debut EvEnt rEport

Our first-ever conference in San Francisco very much focused on the future of the web. Kicking off the one-day/one-track show was Lyza Danger Gardner, who gave an inspiring, candid account of the web’s ever-changing nature, which can create burnout and a feeling of being overwhelmed; unable to keep up. Comparing yourself with world-class performers can be demotivating, and it’s getting harder to specialise in one topic because you need a good general overview of everything to succeed as a developer (for more on this, see Gardner’s interview: Gardner’s talk set the tone for a day of just that: a general overview of various aspects of web design and frontend development, from SVG animations to the Internet of Things. Fantasy’s director of UX and strategy, Peter Smart, reminded us that we’re still in the first minute of the first day of the internet revolution (a quote by Intuit co-founder Scott Cook) and then took us on a mind-boggling journey of emotional intelligence on the web. Among the many examples of apps that are getting more intelligent, Smart showcased Lauren McCarthy and Kyle McDonald’s experimental pplkpr

DeSign matterS

( It monitors your physical and emotional response to the people around you, and optimises your social life accordingly (for more on Smart’s research on emotional intelligence, see emotion-284). Google Venture’s design partners Jake Knapp and John Zeratsky then talked us through the five-day design sprint they had created and explained how they worked with robotics startup Savioke to prototype a hotel robot with a personality that didn’t freak out guests. The day concluded with Mike Monteiro, cofounder and design director of local agency Mule. He delivered an impassioned speech about our responsibility as designers and what we can do to help fix a world that’s being thrown out of joint. A world in which it’s difficult to report gun sales on Facebook. A world where apps are being misused because their creators didn’t think of use cases different to their own. The world is designed to work that way, Monteiro claimed, but it doesn’t have to be so. We, ordinary people, can change the world because we can’t afford not trying. Go, do good.


DATE: 15 july 2016 LOCATION: sAn FrAnCisCo, usA URL:

From the Front DATE: 15-16 september 2016 LOCATION: bolognA, it subtitled ‘the frontend guide to life, the universe and everything’, this takes place in one of bologna’s oldest theatres.

oliver (@oliverlindberg) is net’s editor and has been working with the title since the iron Age. He’s also, in the words of Carl smith, a “dancing machine”

DATE: 28-29 september 2016 LOCATION: CopenHAgen, DK the theme at this year’s Design matters is the ‘relaxed, friendly, joyful’ attitude emerging in apps and websites. speakers include slack’s brandon velestuk and buzzFeed’s john niedermeyer.

Web unleaSheD 2016 DATE: 3-4 oCtober 2016 LOCATION: toronto, CA A 50-strong lineup that promises to bring attendees bang up to date with frontend development includes jonathan stark, matias niemelä and lea verou.

amuSe uX ConFerenCe DATE: 5-7 oCtober 2016 LOCATION: buDApest, Hu Workshops on content strategy and guerrilla research methods combine with top-line speakers such as russ unger and sara Wachter-boettcher.

september 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

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



based on a quarterly direct debit

save up to



digital edition only

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



based on a quarterly direct debit

save up to



Terms & conditions: Prices and savings quoted are compared to buying full-priced print and digital issues. You will receive 13 issues in a year. You can write to us (Future Publishing Ltd, 3 Queensbridge, The Lakes, Northampton, NN4 7BF, UK) or call us (UK: 0344 848 2852; overseas: +44 344 848 2852) to cancel your subscription within 14 days of purchase. Your subscription is for the minimum term specified and will expire at the end of the current term. Payment is non-refundable after the 14-day cancellation period unless exceptional circumstances apply. Your statutory rights are not affected. Prices correct at point of print and subject to change. For full terms and conditions please visit: Offer ends 30 September 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

Money-back guarantee



based on a quarterly direct debit

save up to


% or call +44 (0)344 848 2852

Opinions, thoughts & advice


the stAte of UX In 2016

Leah Buley uses the results from a recent study to uncover how different businesses approach user experience today


InnovatIon at the BBC

Robin Cramp explains how the BBC found a new way to nurture innovative ideas





Ahead of her talk at Generate London, Netlife Research’s Ida Aalen explains why taking time to test with users can have unseen benefits

Jeffrey Zeldman introduces his new studio, shares the inspiration behind its retro site and explains why it’s time to shake things up

Think of the quandary: You’re an established public service broadcaster with significant digital real estate, and product teams delivering and maintaining a backlog of requirements. How do you seek to move past those product team innovations, and push bigger changes that look beyond the here and now? Step in Connected Studio ( connectedstudio), a partnership between BBC R&D and Marketing & Audiences that has enabled the organisation to navigate the tricky waters of idea generation. Since its launch in 2012, the team has worked with the creative industry to help the BBC advance its innovation thinking through building and testing new concepts.

PitChing The process starts by the Connected Studio team highlighting where the challenges are: those steps that will advance a particular area of the BBC, or offer


something new. You need a brief, something that articulates the challenge you’re looking to address, with enough of a steer to get the creative community involved. We realised we needed a well thoughtthrough plan for addressing Intellectual Property when working with the external community. Nobody likes to feel exploited, especially when it comes to giving up ideas, so we provide a simple contracted premise: you come up with the idea, it’s yours! Just give the BBC an option period to decide if it’s something it wants; if not, you’re free to take it and commercialise it elsewhere. Development doesn’t go unrewarded either – teams that reach the shortlist have their time and effort covered. Establishing the right environment to investigate these briefed challenges is important too. In order to bring people face-to-face with the BBC, we have staged over 130 events across all levels of development, along with online submission. These are peppered with the right amount of support, insight and BBC expertise to help the ideas get off the ground.

All this helps us get a longlist of ideas down to a handful per brief that make it to the piloting stage. This is the period where ideas are funded to be developed; not in isolation, but again with the right mix of support to help shape the project. We pilot ideas by developing them to the stage where they can be tested in UX sessions. The audience element is key here. When you’re coming up with new concepts, you need to get their time as soon as possible. Exposure to the audience is built into each stage of the initiative, from events where the ideas are being worked up, through to testing the ideas once they’ve reached pilot stage. Without the audience’s voice in the mix, you’ll never know what you’re making is right.

BBC Taster has introduced a new angle of connection by letting the public peer behind the curtain and try out what the BBC is working on technical innovations from the Connected Studio, but experiments from internal BBC teams that would have otherwise remained behind closed doors. Taster presents a method for the audience to rate their appreciation of the pilot they’ve just interacted with in a light survey supported by a rigorous backend of analytics. The survey completion rate is 78 per cent, far outstripping the industry average of 17 per cent.


CollaboR ation

We then need to get these ideas out into the wild. Step into the breach BBC Taster ( Taster was created to address those challenging times when we had no space to show the world all these new, experimental ideas – not only the

Since its launch 18 months ago, Taster has introduced a new angle of connection between the BBC and its audience by giving the public the opportunity to peer behind the curtain and try out what the BBC is working on. Most importantly, they can

now leave their mark through feedback, to help the BBC shape future services. In four years, Connected Studio and Taster have established the BBC’s route to challenge, explore and iterate innovation: failing fast and (importantly) succeeding faster, whilst learning and sharing those insights across the BBC. We are also looking to build upon Taster’s success through partnering; allowing other organisations to share access to the platform with their own pilot projects. All of this has placed the BBC in the heart of collaborative innovation, allowing sharing and partnering to take the front seat.



Robin (@crampey) is part of the BBC’s Connected Studio, and has helped raise the profile of the BBC’s collaborative innovation approach

september 2016 27



september 2016


User experience

The sTaTe of UX in 2016 Illustration by Ben Mounsey

leah Buley dives into the results of a recent study to see how different organisations use UX today

We have seen big investments to buy, build or bolt-on design programmes in recent years. A few events stand out in my mind: IBM’s announcement it would earmark $100m and hire 1,000 designers in 2012; the tumult of design agency mergers and acquisitions through 2014 and 2015; Mike Bracken on stage at the O’Reilly Design Conference earlier this year reporting the jaw-dropping fact that the UK Government Digital Service has saved UK citizens £4.1billion. Despite those big moments, I continue to encounter many small moments – in hallway conversations at conferences or in phone calls with clients – that suggest lots of companies are still barely scratching at the surface of user experience design’s potential. So, before we haul out the confetti cannons, let’s stop and ask: Are the success stories emblematic of our industry overall, or are they just noteworthy exceptions?

signs that UX might be an underdeveloped capability – and consequently a risk factor – in an organisation. This research began with a basic question: In your opinion, what is the level of strategic impact of UX in your organisation? Participants ranked their answers on a scale of 1-5. ‘Low impact’ means someone has ranked their company as a 1 or 2, ‘high impact’ means they gave their organisation a 4 or 5. Let’s dig into what makes the difference between high and low impact when it comes to UX.


This is a question I’ve been researching over the past two years – first as an analyst at Forrester Research, and more recently on my own as an independent research and design consultant. My latest work is a study from May 2016 that asked UX pros from a variety of organisations about the state of UX where they work. In all 266 people participated, with titles ranging from UX designer to chief designer. The information they

It starts with where UX sits inside the organisation. UX by its nature spans product, technology, marketing and even operations, so many organisations struggle with where UX should sit functionally. Judging by the data, there’s no common standard; UX teams are pretty well distributed among the areas listed above. However, in companies where participants ranked UX high impact, it tended to sit in a distinct design or customer experience department. Where UX efforts were seen as low impact, it was more likely to be housed in product (low), IT (lower) or marketing (lowest). That makes sense; being in a stand-alone function gives UX more ability to work across the end-to-end customer experience. When UX is stuck in one organisational silo, it has less reach.

shared sheds further light on the variable state of UX today, and helps uncover what a strong UX practice currently looks like. It also pinpoints some warning

Another telling indictor is the balance of design to engineering. For respondents from high-impact UX organisations, the ratio of UX designers to engineers

The sTudy

september 2016 29

VOICES Essay sat somewhere between 1:4 and 1:20. In low-impact organisations, the ratio often clocked in at 1:20 or above. Where there are strong UX-to-engineering ratios, there’s also often strong UX leadership, securing budgets and headcount for strong UX teams. Not surprising then that high-impact UX is often accompanied by UX leaders at director level and above, while low-impact UX leadership tended to stop at manager level.

Process Activities like digital design, user research, prototyping and testing are the bedrock of a UX practice. But there’s more to it than that, and higher impact organisations recognise this. UX pros reporting higher impact were also more likely to report that design processes include more up-front framing and shaping work – efforts that define strategy, requirements, and quality standards. Lower impact teams tend to stick more to the bread-and -butter UX work.

that they’ve connected their work to hard measures like earnings. But it’s still more common to find highimpact teams doing some kind of maths to quantify their success stories. When asked ‘What measurable outcomes resulting from user experience are you most proud of?’ , high-impact respondents gave responses like: “multimillion dollar increases in conversion and customer lifetime value”. By contrast, one low-impact respondent answered, “We are moving so fast there has been no time or resources for testing/outcomes – even for small usability improvements.” The biggest differences in measurable impact seems to be around customer satisfaction and behaviours. High-impact UX teams sit in companies that have done the work to measure the relationship between UX, customer satisfaction and positive customer behaviours. Organisations with low-impact UX measure things, too, but they tend focus on reducing costs.

Organisations that aim to use human-centred design to lead their markets and capitalise on the potential of digital technologies do so by creating empowered, appropriately-staffed UX operations

ImPacT Ultimately, these indicators mean nothing if they don’t connect to impact. And, to be honest, too few UX professionals (across the board) can say definitively


september 2016

analysIs These differences seem subtle, but they underlie basic beliefs about UX. Does a company see UX as a tool primarily to create efficiency and cost control? Such organisations tend to be more interested in task completion, reducing clicks, bug reduction – in short, basic usability. On the other hand, an organisation that sees UX as lever to create competitive value expects UX efforts to net happier customers, understanding that happier customers are good for business. So what does all this mean? Ultimately, it shows that organisations that aim to use human-centred design to lead their markets and capitalise on the potential of digital technologies do so by creating empowered, appropriately-staffed UX operations. And for all the companies still sprinkling a little UX on existing processes? Well, don’t expect to change the world. Or your industry. Or even stave off the competition. It’s a digital world we’re living in, and UX design will be an integral part of it for a long time to come.


What this suggests is that for UX circa 2016, basic digital design work has become table stakes. The real benefits that lead to higher-impact UX now come from the UX professional’s ability to infuse product and service strategy with real insight about customer needs, and help evolve these offerings over time so they remain not only viable but also desirable. Related to these process questions are product questions. When UX is downstream of strategy and requirements, channels and touchpoints come predefined. In low-impact organisations UX has a narrower remit, focusing mainly on websites, marketing and internal tools – necessary, to be sure, but really just the price of entry for businesses today. When UX has more upstream involvement it’s more likely to define solutions that flow across multiple technologies, channels, devices and touchpoints. Those UX teams end up designing for more types of contexts, from basic web and mobile design to emerging digital channels and – in about a third of cases – service design.

UX veteran Leah ( provides assessment, planning and enablement services for UX design organisations, and wrote The User Experience Team of One

Voices Interview

Ida aalen Words by Julia Sagar Photography by Monica Kvaale

The Norwegian UX designer explains how smart user research can help you solve the right problems and even win new clients


september 2016

Info job: Head of communication, netlife Research w: t: @idaaa

september 2016 33

Voices Interview By her own admission, Ida Aalen is a very impatient person. “If I see something that doesn’t work, I get an urgent need to fix it,” she laughs. “It’s almost a problem. When I see tourists on the street holding their map upside down, I have to go over and help them.” It’s hardly surprising, then, to learn that Aalen is a champion for user testing, both in her day job as senior UX designer at Oslo-based digital design agency Netlife Research, and in the wider web community. “Some problems are more messy and complex than others,” she explains. “Strategy is a way of digging into what the problem really is – what is it that we really want to achieve? And user research is a way to make sure we’re fixing the right problems in the right way.” In May, Aalen’s article ‘Never show a design you haven’t tested on users’ (netm. ag/tested-284) received widespread praise when it was published on A List Apart. In September she’s set to explore the topic in more depth at Generate London, arguing that testing can be a key strategy for winning new work, and offering practical tips for

fitting it into even the most resourcestretched projects ( As Aalen herself points out, everyone knows the best way to make sure your designs work is to test them with real users – so why, if user testing is so self-evident, does more of it not happen? “People think it’s more expensive, more difficult and more time-consuming than it really is,” she explains. “Sometimes there’s maybe a fear of finding a weakness in our designs. But I think we should embrace this as designers, rather than thinking our designs should be perfect from the start. If you find a weakness in your design, that means you did your job: you found it.” Where user testing becomes particularly important, she says, is in weeding out the trickiest usability issues. Best practice rules and past experience will take your designs a certain way, but they won’t expose the ‘unknown unknowns’. “These are the things we don’t see, often because we have too much background knowledge,” she explains. “The saddest thing is that if you never test, you might never find out that a project is actually failing; that the

conversion rate could be a lot higher if you had just fixed some tiny details.”

Pitch Perfect One of the most interesting aspects of Aalen’s stance on user testing is that it doesn’t just come into play once a project has been given the go-ahead: it can also form a fundamental role in the pitch process. In her A List Apart article, Aalen recalls how her team restructured a meeting with a long-time NGO client by performing a quick usability test on the proposed design for a new sign-up form, and in doing so convinced the stakeholders of their ideas. Instead of showing the design first, the team began by presenting the results – a canny move, given that the client already had a sign-up form that worked “quite well”. The discussion that followed could then centre around ideas for improving the design, rather than nitpicking issues that hadn’t caused problems in the test. Aalen remembers it as one of the best client meetings she’s ever had. But this approach isn’t just applicable to existing clients; it can also be used to win


in the blood

new work. “We’ve set up a weekly lab day where people can drop in at short notice, so we’ve been able to show clients how real users interact with their existing website in the very first meeting we have, ” she explains. “It’s an approach I’m a lot more comfortable with than the sort of pitch work that is sometimes done.” Is there a danger designers could spend too long testing an idea that a prospective client hasn’t yet signed up to? “The key is to make the smallest thing necessary for you to be able to test it,” she advises. “Just throw something together that realistically shows the specific thing you want to test, and hold off the fine-tuning until after that first test.” Of course, this means entering the initial stakeholder meeting without having a comprehensive plan. But, Aalen emphasises, that’s OK – even if it feels uncomfortable at first. “When discussing something we’ve already identified as an actual problem, the client’s input has been very fruitful and valuable. Showing up with some unsolved problems lets the client become more involved. And

This summer marks six-and-a-half years for Aalen at Netlife, which she describes as a friendly, zealous and non-hierarchical place to work. When we catch up with her, she’s about to be promoted to head of communication – the next logical step in a career that’s seen her circling content from a number of different angles. Despite landing her first paid web design job (from her mum) aged just 12, she went on to study industrial design, and later communication and media studies at university, before working as a journalist for two of Norway’s largest online newspapers. Looking back, she says it’s now clear that these detours would eventually lead to UX. “I just didn’t know about the role of UX designers until I was 21. I thought you had to be a programmer or a graphic designer to make websites, ” she smiles. “However, working as a journalist left me with a firm belief that content is at the core of UX. My colleagues sometimes refer to me as a closet content strategist.” Right now, Aalen’s busy working with the

“I guess I imagined political parties being a bit bureaucratic, but it’s the opposite. It’s turned out to be kind of a dream project, where we get to do things the right way. We’re continually testing to make sure we’re heading in the right direction.” Aalen’s colleague Jørgen Blindheim, who is in charge of design and frontend, is working very closely with the developers at Appresso. There is no prototype; everyone on the project – the backend developers, the frontend designer, UX designer Aalen and the content strategist – is committing to the same repository.

it’s a time-saver in the long run. The testing lets us focus on the things that actually need to be improved in the design.”

Norwegian Labour Party to redesign its website ahead of parliamentary elections in 2017. “I’m having a blast, ” she says.

Britannica, and everyone had doomed it because of the rise of Wikipedia. But there are only around five million Norwegians,

“With user testing, there’s a fear of finding a weakness in our designs. But I think we should embrace this”

Shared WiSdom Aalen is happiest when she’s working in close, interdisciplinary teams. One of the first projects she was proud to work on was The Great Norwegian Encyclopedia (SNL), in 2011-2012. “It was seen as a relic from the past,” she recalls. “It’s like the Norwegian

september september2016 2016 35

Voices Interview

so, with our tiny language group, the Wiki approach can only get you so far.” Part of a small but tight multidisciplinary team, Aalen helped create a responsive website with a new identity and editorial strategy – and today the SNL is still alive and kicking. “More and more contributors are joining, all the Norwegian universities have chipped in and are using it as one of their main platforms to distribute their knowledge, and Norwegian schoolchildren and students are using it every day.” She continues: “I think the point I’m trying to make is that I would make shitty websites if it weren’t for the fact that I again and again have had the chance to work with people who are both nice and brilliant.”

Outside the day job, Aalen’s been teaching user research and UX at IGM for a number of years now. One of the most common testing errors she sees is the wrong ques-

phrase their questions. For example, if you ask someone if they can find the menu button on a page, you’ve already told them that there is a menu button. The secret, Aalen says, is to ask questions that give users a reason to find their own way. For instance: “Can you see if there’s anything here you would give as a birthday present for someone you care about?” For teams faced with very limited time and resources, she recommends guerrilla research as a killer strategy. “Go where your customers are and ask them. When we tested the new map for the Norwegian Post, we just went down to the post office. When testing for the Norwegian Labour Party, we went to the Central Station in Oslo with our hands full of chocolate and an iPad. If you combine

With this insight we can help tackle one of the biggest challenges facing the industry. “It’s too sad how many websites feel like they need a redesign just three years down the road,” she reflects. “I’m hoping our business won’t be like this in just two or five years; that ideas like module-based design and the focus on governance and continuous testing will mean that what we deliver doesn’t turn obsolete so quickly.” In the meantime, she’ll be working on her work-life balance. “The biggest lesson I’ve learned is that work isn’t everything. I wish I realised it earlier,” she says. “I love my work, but to be able to do my best – and to be happy – I need to have a life outside work. Nine to five, Monday to Friday. That’s enough.”

tions being asked, with researchers often accidentally leading interviewees towards a certain outcome through the way they

these face-to-face meetings with some online tests, you’ll get a lot of insight without breaking the bank.”

next month: Bruce Lawson on how to break into emerging markets

better teSting


september september2016 2016

“Go where your customers are and ask them ... You’ll get a lot of insight without breaking the bank”

Opinion We avoided compromises forced by late suggestions and lack of research; ideas were agreed and decided by the core team. Being inclusive doesn’t mean you end up with a website designed by committee. Dangers arise when people outside of the team feel left out of the process, so that if they are in a position to make changes, they often will. If they can’t make their opinions known, they might resent the redesigned website. Just letting people know that we genuinely wanted to make the best website for everyone meant that they wanted to help.

on tHe Front Line

InclusIve web desIgn Helen Clark explains how her studio opened itself up to a more inclusive design process The most difficult challenge posed by any web project is getting everyone to work well together. Often, those involved – clients, project managers, designers and developers – have different ideas about what the end product should look like and deliver. Frustration can ensue as both parties feel as though they’re not being listened to. The project can suffer from ‘too many cooks’ resulting in a confusion of content and ideas, where no one is completely satisfied with the outcome. This is not what I want web design to be like. The process shouldn’t be about ‘them’ and ‘us’. So what can we do to avoid it? For a recent project, we decided to throw open the doors of our web design process and see if we could build a better website by making everything public. Our client, Derby Museums, already works on projects using human-centred design, so they were really keen to work this way. From the get-go we documented the process online.

We set up a Tumblr page and uploaded user research, meeting agendas and outcomes, updates, a sitemap, wireframes and visual designs. We shared the link on social media and encouraged visitors to get involved and follow the project. Our method included a lot of research, both with the public and members of staff. We spent a day at an event at a museum speaking to visitors about their needs for the website, and charting and sharing the results. We also spent a day speaking to staff at one of the museums. We felt it was important to be at their place of work so they could easily come and talk to us about their ideas.

Listen up Listening to our client’s visitors and employees was an essential part of this project. Our web team worked closely with our client and made decisions based on all their suggestions and research feedback.



We also had some great suggestions from front-line staff. They are the ones who talk to visitors, know what they like and have to deal with complaints. It is worth talking to the people working directly with customers as they often receive different feedback than your commissioning client. In other sectors, the equivalent might be a call centre, sales team or reception staff. One problem we were told about by frontline staff was that visitors were struggling to find the entrances to the museums. A simple solution was to add ‘find the door’ to the website, with a short description and photo of the entrance, so visitors had access to this information in advance. It might not seem as though signage to the museums is the responsibility of the website, but if we can improve a visit to the physical site by giving the right information on the website, then we’re improving user experience overall. In order to make truly effective websites, we need great communication. How can we design something without knowing the needs of the current and potential users, as well as the needs of the client organisation across the board (not just the person or team commissioning the project)? It might be a little harder and take a little longer, but designing openly and inclusively is what we need to do to make the best websites for our clients and their users – and it’s a lot more fun too! Helen (@littlehelli) is a CX-focused web designer at Ablewild, speaker and occasional writer, trying to make the web a better place for everyone. Her musings on design can be found at

september 2016 37

VOICES Big question Culture

What dOes Brexit mean fOr the WeB industry? Does the UK leaving the EU spell certain doom for the web industry? We asked a range of designers working in both the UK and Europe

r achel a ndre W

Ol iv er reichens t ein

Co-founder, Perch CMS

Many of the people I have spoken to since the referendum are seriously looking at moving all or part of their businesses into Europe – that includes everything from small companies like mine through to larger startups and big organisations. This is going to have an impact in terms of available jobs in the industry and the vibrancy of the UK tech scene.

a nn a da hl s t röm UX designer

It brings a lot of uncertainty. Right now I’m trying to find positives. The low pound makes it cheaper for clients outside of the UK to hire us and I hope that leads to working relationships that otherwise wouldn’t have happened. We’re a talented and creative bunch and Brexit isn’t changing that. Perhaps this mess will further fuel remote working and help bring more opportunities to areas of the UK where there currently are less. 38

september 2016

Founder, Information Architects

As the owner of an agency based in a non-EU country, I can say this much: hiring talent from outside is vital, and in Switzerland this has become very difficult. Having offices in Berlin and Tokyo helps. In a financial depression agencies are the first to be hit, and the last to profit from an upswing. With today’s in- and farsourcing trend, more UX designers and developers will continue to move to corporations, work as freelancers or temp staff. We will have to use our creativity upon ourselves and reinvent how we do business, maybe even letting go of the current model that was fit for the advertising industry. Brexit may accelerate the inevitable.

emm a BOult On

l auren currie

Research director, Monotype

Designer and entrepreneur

As design professionals, my husband and I made a conscious decision a few years ago to start a business in Wales rather than overseas. We felt that the design industry here, in a UK embedded in Europe, was by far the best place for us. Wales has enjoyed an annual net benefit of £245m from the EU, some of which has enriched the digital and arts sectors here. It’s impossible to think of the UK in design terms without Europe. Our rich culture and heritage is interwoven and I can’t help but feel that we will see real and lasting damage by withdrawing.

We are in a crisis of a democracy. Brexit was a backlash against the political elite and a reflection of the unrest that has been sleeping beneath the surface for decades. We need to spread the ability to motivate, educate, inspire and inform. Designers are a breed of craftspeople who have the ability to do this. Designers pride themselves in getting beneath the surface of a problem. Now is our chance. I often meet creatives who talk avidly about changing the world. Now is our time!

he y dOn Pick ering

Designer, author, web accessibility advocate

Those who encouraged voters to leave the EU characterised the institution as a redundant bureaucracy, holding us back and making our lives unnecessarily complicated. This couldn’t be further from the truth. Unless we are able to negotiate a deal which preserves free movement, typically footloose workers such as web designers – who tend to travel and relocate frequently, dealing with international clients and organisations – will likely see rises in both the cost and the complexity of accessing the global marketplace.

rem y sh a rP

Founder, Left Logic

In running an event and needing sponsorship, we’ve seen a disproportionate number of companies turning us down, explaining that they’re reviewing their entire budget process. Money is tight. Personally, I’ll be looking for work that will benefit from a weak GBP. Then there’s our non-UK colleagues who suddenly don’t know whether they’ll remain in the UK, as much as they love the country. Leaving the EU feels like we’re closing a door. This is unlike our industry. Unlike the web.

resOurces I want my country back

Opera deputy CTO and avid traveller Bruce Lawson writes on his personal blog about his unhappiness at the divided state of the nation, and the consequences this will have for the free movement around Europe currently enjoyed by web professionals.

brexIt shell-shock

In this episode of the Creative Coding Podcast, laser expert Seb Lee-Delisle and game designer Iain Lobb break with their usual approach to discuss their shock at the referendum result and their general disillusionment with politics in the UK.

‘I voted remaIn,’ saId Pooh

Rachel Andrew joins Andrew Clarke for this episode of Unfinished Business. Both owners of UK-based web businesses, the pair discuss how they expect to be affected by the referendum result, and what action they’re taking to try to make things go more smoothly.

september 2016 39

London 21-23 september 2016 Featuring highly practical presentations on design and UX systems, layouts with Flexbox, user testing, web animations, and more!

Jen simmons

ida aaLen

PauL Lewis

micah godboLT

designer and consuLTanT, moziLLa

senior uX designer, neTLife research

deveLoPer advocaTe, fronTend coder, googLe

fronTend archiTecT, creaTor of sassbiTes

TickeTs on saLe now

Q&A Even the timing is similar. I launched Happy Cog just as the dot-com bubble was bursting – a time when nobody in their right mind would start a studio! But I had a hunch people were still going to need websites, even if they were no longer willing to drop half a million dollars on them. And now, when so many colleagues are complaining that the market for design studios is drying up, here I go swimming against the tide again. It may seem crazy, but I believe if you know what you’re doing, avoid greed and provide value, this is a wonderful time to be a designer.


Jeffrey Zeldman The founder of Happy Cog is shaking the industry up again with his new studio Info Job: founder, studio.zeldman; publisher, A Book Apart w: t: @zeldman

net: You’ve just launched a new company, studio.zeldman. What prompted this move? JZ: Happy Cog is a great studio. I had fun creating it, and it’s been an honour and an education to be part of its evolution. But I wanted to get my hands back into the work, and to do that I needed to start afresh, with a few equally adventurous collaborators at my side. net: Tell us about your studio setup ... JZ: I’m designing and managing projects, and working with designer/developers Roland Dubois and Noël Jackson, and Mica McPheeters (content). Our goal is to build our repertoire, portfolio and team ethos by quickly collaborating on exciting, small- to mid-sized projects. We hope to revive the excitement web users can experience, and stir pride in site owners, who’ll once again feel the true potential of the web to engage with customers via compelling, personal experiences. We seek good businesses that need assistance with messaging, engagement, or user task completion. net: You founded Happy Cog in 1999. What are you doing differently this time? JZ: I’m doing exactly what I did in 1999: starting small, with a handful of brilliant freelancers.

net: You’ve gone for a slightly retro look for your new site. What was your inspiration? JZ: Jen Simmons’ An Event Apart lectures on getting out of our layout ruts ( She reminds us how adventurous we were at the dawn of the designed web – how much fun design can still be for readers and designers alike. net: What are your favourite aspects of the new studio website ( JZ: I’m especially happy with the top and the bottom. At the top [an angled letter from Zeldman introduces the studio], a technical challenge was whether we could display text at an angle and still have it be not merely legible but invitingly readable. Roland ran CSS tests that showed we could ( – I wouldn’t have proceeded with the design if we hadn’t first verified that it would be readable. At the bottom, I love the form. It helps businesses figure out what they need, of course, and whether we’d be a good match. But it’s also just fun to play with, and it’s touchable – like Dieter Rams’ hi-fi buttons. net: You say you launched Happy Cog with a kind of “punk rock” ethos ( Can this punk rock spirit still be found in the web industry? JZ: Absolutely. I’ve been doing this since 1995. We went through an exciting but not user-focused ‘Wild West’ period. Then settled into a professionalism based on assumptions that subsequently got kicked to the curb by mobile devices and responsive web design. We’ve just emerged from six years of engagement with these new challenges and learned how to handle them professionally – but we’ve also fallen into a lockstep sameness. It’s time to shake things up again. net: You have an impressive CV. What are you most proud of so far? JZ: Hopefully, being a good dad to my daughter, and a decent friend and mentor to designers and developers coming up behind me.

september 2016 41

Never miss aN issue!

#282 AUGUST 2016 Jump into the future with progressive web apps, explore the power of flexbox and get acquainted with Angular 2

#283 SUMMEr 2016

We run through the cutting-edge browser features you can start using today, and uncover eight hidden CodePen gems

save uP to 31% wiTh A diGiTAl SUbScriPTioN SEE PAGE 24

Got aN aPPLe DeviCe?

Download netâ&#x20AC;&#x2122;s digital edition for your iPad, iPhone or iPod Touch


#277 MArch 2016 Discover the future of CSS, including CSS Shapes and PostCSS. Plus, we reveal the top design trends for 2016

cATch UP oN ANy iSSUES yoU’vE MiSSEd by dowNloAdiNG oUr diGiTAl EdiTioNS NETM.AG/NET-bAckiSSUES

#281 JUly 2016

#280 JUNE 2016

#279 MAy 2016

#278 APril 2016

#276 FEb 2016

#275 JAN 2016

#274 dEc 2015

#273 Nov 2015

The Money Issue: Build a profitable business, supercharge your ecommerce site, and find the right pricing strategy

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

The browser DevTools are better than ever – we share some tips on how to use them. Plus, get the low-down on Adobe XD

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

Discover which areas you should be skilling up on right now, and learn how to test and optimise your sites on all devices

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

PreFer to reaD oN aNDroiD, PC or maC?

We show you how to top up your tool stack without spending a penny, and walk through the basics of CSS blend modes

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

net is also available on Google Play and Zinio, as well as Kindle, Nook, Windows 8 and more



Gallery Inspirational sites Dan Tello

Sensational design and superb development

Dan is an ex-graphic designer who fell in love with code. He is now senior frontend developer at Viget w: t: @dantello5

Geolocation, three.js, GooGle cloud Platform Active Theory

Before things got started at Google I/O 2016, up on the screens was a web app the crowd could play with. Attendees could fold a sheet of paper into a paper plane and then launch it into a virtual sky by making a throwing motion with their phone.

At this point, the phone became a net, and they could motion to grab someone else’s plane out of the air. When the plane unfolded, it revealed geolocation-based stamps left by other plane catchers, as well as the opportunity to leave a new one. At the time of writing, the experience


september 2016

hadn’t made its way to the general public, but it’s promised soon. Paper Planes shows off the many exciting things you can create for the browser on your device: 3D animation with WebGL; touch gestures for folding the digital paper; motion sensing for launching and catching planes; Web Audio for sound effects; WebSockets for a multi-user experience; geolocation for tagging where planes had been. The result of bringing all of these technologies together in a single (shared!) experience is really something beautiful.

“There were folks from all over the world, and one of the planes I caught came from Iceland, which was pretty awesome” AnDrew Myrick (@andymyrick)

Inspirational sites

KnocKout.js, jQuery, GreensocK tweenmax Wieden+Kennedy

Old Spice Dream runner was an online campaign run in May that offered to turn your run maps into fabulous prizes. Visiting the site would load a web app requesting access to geolocation data. you could then start drawing your desired prize on the screen by physically moving around. Drawings were loosely and hilariously interpreted by judges, and actual prizes spanned from things like ‘a bent metal pipe’ and ‘inflatable shark leisure product’ to bigger ticket items like cars and vacations. As well as the creative use of geolocation, the site itself was very interactive, and it’s clear that it was designed mobile-first. in true Old Spice fashion, the splash screen parallaxed tigers in sunglasses, mythical creatures and old men in unitards in all directions as you tilted your phone. The fun use of the gyroscope hinted that what was going to happen next would also involve physical movement. choosing the web over a native app encouraged viral sharing on social media and instant engagement. A friend tweeted me a link, i clicked it, and seconds later i was running down my street drawing a (very short) red line.

“Really so much about this site is impressive. Didn’t know mobile web could do all this stuff!” doug avery (@averyquery)

september 2016 45

Gallery Inspirational sites

si t e of t he mon t h

Vue.js, localstoraGe, chemical x Cartoon Network

The greatest cartoon of the late 90s and early 2000s, Powerpuff Girls is back for 2016. And with it comes one of the year’s greatest web apps so far: a brilliant avatar generator built by cartoon network to promote the rebooted show. The fully responsive single-page app is driven by Vue.js, a new framework with some neat ideas. evan you, creator of Vue.js, says it’s well suited to “sites that need rich interactivity but do not need the architectural burden of fully opinionated frameworks”. The page weight comes in at just under 3MB for the initial load on mobile, and just over 3MB on desktop.


september 2016

Pretty impressive considering the entire page is image-driven and animated! Local storage is used to save the application state, so you can always come back and pick up where you left off. The beauty of building this as a web app is in its sharability. when i saw the Twitter storm of Powerpuffed avatars in my feed, i was one click away from joining in on the fun. no app stores, no passwords, no downloading, no app switching or device switching. Just one linkclick and i could start picking accessories to match my giant adorable eyes.

Inspirational sites react-router, maPbox, webPacK Sparkbox

Sparkbox just launched one of the most beautiful and well-built sites of the year; not for a big brand or a cool startup, but for a mid-western American industrial real estate company. Seriously. The homepage shows an animated map of Ohio with some range sliders to filter a list of available industrial sites. Clicking on a site sets off some really beautiful choreography: The map begins to zoom into the selected location. The homepage headline slides down and is replaced by the name of the selected location. The location list does a 3D box rotation to reveal the detail view. Screenshots cannot do it justice.

This site is server-side rendered, responsive, accessible, and fairly lightweight. “This was a perfect opportunity to pull out React in a way that perfectly aligned with the project goals,” explains Sparkbox founder Ben Callahan. “We were able to squeeze our JavaScript payload (not counting Mapbox) down to around 80KB!” A talented and wise art director once told me that the greatness of a project shouldn’t be dictated by how interesting the client is; every project is an opportunity to do something amazing. This site is a real testament to that wisdom.

“It’s simple but neat. I also like the fact that it works very well on mobile” evan you (@youyuxi)

september 2016 47

Gallery Inspirational sites

Polymer, webrtc, material desiGn

www.snapDrop.neT Robin Linus

Snapdrop is an open source progressive web app that lets you transfer files across devices. it’s directly inspired by Apple’s AirDrop, but built strictly with web technologies. robin Linus, the dev behind Snapdrop, wanted to explore progressive web apps when he came across ShareDrop. “i liked it and thought about how to improve it,” he explains. “ShareDrop uses webrTc only and isn’t compatible with Safari browsers. Snapdrop uses a webSocket fallback and some hacks to make it work with the download restrictions on iDevices.”


september 2016

Open up on two different devices on the same network, and each connected device will show up on the screen. Tapping or clicking on a device will open up your file picker. Once a file is sent, a prompt will appear on the receiving device asking for permission to accept the file. if you add it to your homescreen, you’ll get a nice icon for quick access, and Snapdrop functions in fullscreen like a native app. it’s a super-simple concept, beautifully executed, and a great example of what a progressive web app can do.

“A shining example of a progressive web app ... Unlike AirDrop, Snapdrop seems to work every time” cameron moll (@cameronmoll)

Inspirational sites

iscroll, jQuery, GulP The Washington Post The Washington Post recently launched a piece of interactive journalism on the Obama presidency. Over the span of Obama’s remaining time in office, a series of five ‘multimedia rooms’ will be published to this singlepage app. Each room contains collections of essays, videos and photo journalism focusing on a different aspect of his time in office. The layout, typography, illustrations, and engaging navigation really draw you in to spend time with the top-notch journalism. On touch devices, swiping left or right navigates between topics (and beautiful illustrations). “The spot illustrations

are designed to highlight key moments in Obama’s presidency, while evoking enough curiosity for the reader to dive in and consume the content in depth,” explain Emily Yount and Seth Blanchard, the in-house design and development duo behind this project. “We love the feeling of swiping through these important moments on a mobile device. It provides a definitive view of a complex subject through a simple action.” The content is backed by Washington Post’s custom CMS. The frontend was built with jQuery, iScroll, and custom gulp tasks, which enabled the duo to combine interactive elements with the raw article content.

september 2016 49

Gallery Inspirational sites

toucheVent, webaudio, sVG animation Jono Brandel

Sound + touch + animation = so much fun. Patatap is a portable animation and sound kit by Jono Brandel, with sounds by Lullatone. It actually launched in 2014, but with the increased chatter around progressive apps, I thought it was worth bringing up again (in case you missed it). It still holds up as one of the most fun experiences on the web. With Patatap, Brandel aimed to introduce the concept of ‘visual music’ to a wide audience. “Artists working in this field vary in discipline but many aim to express the broader condition of synesthesia, in which stimulation of one sensory input leads to automatic experiences in another.


september 2016

Hearing smells or seeing sounds are examples of possible synesthesia,” says Brandel. “In the case of Patatap, sounds trigger colorful visual animations.” What starts as a blank screen turns into visual music as you tap different parts of the screen, triggering overlapping sounds and SVG animations. Multi-touch is supported and different sounds can be played simultaneously thanks to the WebAudio API. Tapping the bottom-right corner of the screen causes the app to cycle between different sound kits and animation sets. Be sure to also check out Typatone, another brilliant project by the same folks.

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 l

12 issues of net in print and digital


Annual Industry Report worth £100


4 months free when you sign up for a Treehouse subscription


Discounts to industry events including Generate


Design annual worth £9.99


Special discounts from selected industry partners

all from just £135 £105

worth £371

Join todaY Visit Terms and Conditions: Pricing and savings quoted are compared to buying full priced UK print and digital issues. You’ll receive 12 issues in a year. Prices correct at point of print and subject to change. Full terms and conditions Offer ends 30 September 2016

Sublime design & creative advice

This monTh FeaTuring...

focus on


This month ...

Climbing Centre Pa ul W e l s h


Sometimes the little things can make a big difference. sam Kapila explores how you can add a touch of delight to your designs

Design Challenge Paul is the creative director at Manchesterbased digital agency Stage Two w: t: @spacedawwwg

MiC he l e M a z z uC C o


Michele is a designer and college student living in Brescia, northern Italy w: t: @michelemazzucco


We chat to partners at edenspiekermann’s Berlin office about why they’ve embraced agile, and their take on digital storytelling

M at t RiDDing Matt is a digital creative at Birminghambased web agency Clevercherry w: t: @clevercherry


How we built

We find out how Zone‘s new site and mobile app for South West Trains helps customers discover the best prices quickly and easily


We’d like you to design a website for a climbing centre. Perhaps it’s housed inside an interesting building such as an old church, or maybe it’s an outdoor centre in a beautiful area. Make sure you provide easy access to practical information such as opening times and prices.

Design challenge







Paul Welsh

the oveRhang

The branding for this 24/7 centre is inspired by the shapes and textures of the climbing wall itself

The Overhang is Manchester’s only 24/7 climbing centre. The idea was born from the growing popularity 24/7 gyms have these days and how that model could be applied to other indoor leisure activities. I decided the brand should be aimed more towards time-poor adults (who’d most likely be the ones enjoying a spot of late-night climbing). The style takes inspiration from outdoor brands such as The North Face and Jack Wolfskin, with a focus on cool imagery and intense, bold colours. The design uses dark blues and oranges, which gave me a nice contrasting palette to work with. The main task for the homepage is to introduce users to the brand and highlight the sign-up link as the main call to action. I’ve also used visual cues to lead users on to other important content.

Close uP (1) Full-bleed, bold imagery creates an instant impact. This image could be switched out for an autoplaying, looping video for browsers that support it. (2) The shape overlays, which act as backgrounds to text blocks, were inspired by the textures of a climbing wall. These shapes would move in a subtle, parallax fashion when the user scrolls, almost acting like shadows being thrown by a light source. (3) Typography has been kept simple but with lots of impact. To keep the page weight down, I’ve used just two weights of Verlag, a web font by Hoefler & Co. (4) Social links help get the word out. (5) The orange brand colour ensures the main call to action stands out. (6) Designed to look like the profile of a climbing wall, the fixed page menu acts as a frame on top of the scrollable content. The menu would scale in height, using multiple background images to fit any size screen.

My Month what have you been doing this month? Working on a largescale web app that will help teachers create tests, mark papers and report on progress. which sites have you visited for inspiration? I’m a big fan of the new Google Fonts site (fonts., and I’ve been using Pinterest a lot more for visual design inspiration. what have you been watching? Game of Thrones, Silicon Valley and Preacher. what have you been listening to? Of Monsters and Men, Blink-182 and Public Service Broadcasting.

september 2016 53


Design challenge




4 3

MiChele MazzuCCo

My Month what have you been doing this month? Working with an agency on some different projects, and trying to broaden my skills every weekend. which sites have you visited for inspiration? climazone (this layout is amazing), thoughtbot. com (I love their work), and makeitbright. what have you been watching? Daredevil, Steve Jobs and many others. what have you been listening to? A lot of rock music.


september 2016


Extreme climbers can venture to new heights with this Italian climbing company

Enco’s purpose is to allow people to enjoy amazing and extreme experiences in the heart of the Italian Dolomites. This climbing centre is not like others; it’s a series of organised outdoor ‘spots’ that help climbers enjoy a brand new way to climb. The site needs to convey the beauty of the places where the centres are located. To differentiate it from the competition I’ve created a unique layout – as the user scrolls down, the page is constantly changing, creating an engaging user interaction. In the central section users can explore the centres and see information such as opening times, locations and different galleries. The main navigation at the top of the page allows visitors to move from one page to another. Finally, at the bottom of the page they can sign up to receive email updates about events, courses and so on.

Close uP (1) The navigation allows users to explore the main pages of the website. In the mobile version this is replaced by a hamburger icon that opens an off-canvas menu on the left. (2) The background maps give the location of the selected centre. The ‘View location’ link directs to another page with a fullscreen map. (3) The dots allow the user to move through the various climbing spots. The latitude and longitude values of these points is also listed below the image. (4) The arrow invites the user to scroll to the other homepage sections, where they will find detailed information about the locations, including opening times, general information and images. (5) I used sharp shadows to give a sense of depth to layout elements. In fact, I wanted to explore various parallax effects when the user scrolls the homepage.

Design challenge






Mat t ridding


My Month

A topsy-turvy user experience invites visitors to keep on climbing

Duct is a unique climbing centre, social space and adventure park designed to help people of all ages and abilities take their leisure time to the next level. The climbing centre is built in the arches of a disused viaduct in Digbeth, Birmingham. The roof garden is home to an outdoor adventure park where visitors can relax and socialise. The page will anchor to the bottom of the screen, and the user will navigate by scrolling up the page rather than down. This will give the sense of climbing to discover information, as the skill level of activities being explained continually increases. The Duct logo is made of semicircles that represent the iconic arches, and the same shapes are utilised within the design of the website. The brand colours represent the mix of industrial and red brick buildings associated with Digbeth.

Close uP (1) The site’s navigation will be fixed to the bottom of the page. It’s clean, simple and designed not to interfere with the content. (2) The page is also anchored to the bottom of the screen. The user will scroll up the page rather than down, creating a unique user experience that ties in with the fact that Duct is a climbing centre. It also reflects the journey that climbers will take, starting at the bottom and progressing upwards as their skill level rises. (3) The website will be responsive, with the order of the sections changing through JavaScript DOM manipulation to create a better experience for mobile users. (4) The curves that reflect the viaduct’s famous arches are created using border radius. (5) The site utilises SVG graphics, so it will always look crisp, no matter what device it is viewed on.

what have you been doing this month? Battling it out with colleagues at our annual Clevercherry company day. which sites have you visited for inspiration? (I love the simple design and use of white space) and (great graphic design). what have you been watching? A couple of courting Lapwings flying around a field near where I live. what have you been listening to? Com Truise’s Silicon Tare and The Durutti Column’s LC.

september 2016 55

Bangalore 2 December 2016 Weâ&#x20AC;&#x2122;re bringing Generate to Indiaâ&#x20AC;&#x2122;s tech hub to talk about progressive web apps, performance, CSS architecture and more!

shikhar kapoor

harry roBerTs

FronTend engineer, FlipkarT

consulTanT FronTend archiTecT

Tim kadlec

weB Technology advocaTe, akamai

JonaThan snook

Freelance weB designer, developer and wriTer

TickeTs on sale now

Focus on

Focus on

Creating delight Sam Kapila homes in on a few examples of delightful design


On the web there’s a whole lot of information coming at us: articles, editorials, tweets, photos, forms, videos, podcasts ... the list goes on. Designer Milton Glaser once said, “The purpose of art is to inform and delight.” I’m not saying art is the same as design, but this thought sums up all we try to achieve with design. We base design decisions on content, yet on its own content isn’t always the best way to serve information. Delight holds readers’ interest and can add to their total visit experience – let’s look at a few examples. Even the slightest bit of animation can add delight to a design. An element on the page can fade in slowly, feeling sombre and elegant, or a quirkly elastic animation can look playful and friendly. CSS3 animation is key in making this happen. A good approach is to pair the transition and transform properties with some well-made SVGs – the options are endless. Storytelling is a valuable tool in design that can go beyond the text. Experiment with how photography, colour, and grid can play into a visualised story; give users context as to why they should spend time on the site. Something as simple as introducing a pop of colour or a creating a grid system with content that flows from left to right as they scroll can be delightful. Whatever the site’s goal, connect all the pieces of the experience together to bring delight. If there are GIFs that go along with the copy, or a consistent animation style for hovered elements, weave it through as much of the site as possible.

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



(1) Waaark (waaark. com) has quirky mouseover animations along with subtle animations of a


floating ship on its homepage. (2) Field Notes shares designer Aaron Draplin’s collection of vintage notebooks

(fieldnotesbrand. com/from-seed) – the driving inspiration for the Field Notes notebooks. (3) We

Are Nation (www. about) shares its story with clever GIFs to support the narrative.

september 2016 57

info Location: Amsterdam, Berlin, Los Angeles, San Francisco, Singapore

Established: 2009 Team size: 114 Expertise: Digital products, branding, service experiences Selected clients: Red Bull, Schiphol Airport, Bosch, ZEIT ONLINE, Volkswagen Awards: German Design Award, Red

Dot Design, iF Design Award, European Design Award




The international agency on agile processes, open offices and the new digital journalism Edenspiekermann was formed in 2009, when Spiekermann Partners merged with Eden, and it has since grown into a fullservice agency with offices around the world. The company promotes an open ethos, has waved goodbye to waterfall workflows, and is currently creating waves in the digital editorial space. It’s also known for taking a strong line on making correct design decisions – even if that means challenging its clients. We spoke with Robert Stulle and Christian Hanke, both partners working at the Berlin office, about the Edenspiekermann ethos. net: How would you describe your company culture at Edenspiekermann? RS: It’s very open. People don’t sit in offices with the doors closed, everyone is always available. If you want to work in silence, you’ll have to try and hide yourself away in a room somewhere (or put on some headphones). We’re all on a firstname basis, which isn’t the norm in Germany, and we try and reach a first-name basis with clients as soon as possible, too. We regularly invite clients to the office. There’s no façade; clients meet the whole team and see us at work. In our world, having fun and working aren’t mutually exclusive – the best work is created when people feel good about what they do. net: What are your core values? RS: Transparency and trust. We have low hierarchies and value everyone’s input. We try to eliminate the corporate crap as much as possible, and reach an understanding with our clients of the problems we really want to solve. Our most important goal is to create something of relevance, but fun is key, too.

september 2016 59



ZEIT ONLINE For this redesign project, Edenspiekermann rose to the changing demands of digital journalism by exploring a range of different storytelling methods

net: What’s your workspace like? RS: We’re on the sixth floor of a very long building - it was important to us that we could all work together on the same floor. We don’t have fixed seating; everyone is mobile, and we organise ourselves around the projects. We’ve covered a lot of our walls in whiteboard paint, magnetic paint and chalkboard paint. They’re gigantic doodle spaces. It gives people walking past an idea of what’s going on in the different teams. The centre of all office communications is our Italian coffee machine. If you spend half a day at the coffee machine, you’ll meet almost everybody and learn all you need to know about our agency.

Doodle boards Employees can decorate the office walls with whatever they’re working on


september 2016

net: You recently redesigned your website. What was your vision? CH: We’re in constant change as an agency, and our website reflects us and how we think in 2016. Last year we added our Singapore and Los Angeles offices, and we wanted a new website to reflect this growth and to unite our offices. We made everything more compact and more to the point. We kept the most important things at the fore: who we are, what we do, and our manifesto. net: What qualities do you look for when you’re hiring? RS: We probably care less about formal education and grades than other organisations. For us, it’s 50 per cent experience and 50 per cent mindset. It’s not a one-way street; we want to make sure it works for you, for us, for our clients and their customers, so we’re thorough when making hiring decisions. net: You redesigned ZEIT ONLINE. How would you characterise digital journalism today? CH: It is still telling the story, as always, but it has to go beyond this. Audiences are more demanding and have higher expectations. It’s about connecting with

the audience; thinking in moments; offering services. From video to nonlinear storytelling, stories can be brought to life in so many ways. Designing for digital journalism today is about understanding context, creating tools for journalists to expand their narrative space and inventing different ways to present news beyond traditional articles. net: What were some of the key insights you used to guide the ZEIT project? CH: People think in terms of topics, not single news items, and they need more native mobile storytelling. We always focused on balancing different narrative speeds, providing depth and analysis while staying up to date on the most recent issues and following developing stories. We wanted to offer ways of telling narrative stories that look and feel different. net: How did you gather feedback from users? CH: During development, a user group helped us in developing formats. We could ask questions on a weekly basis from really early on in the project. We also had a group of 35 users in a closed Facebook group, and the deputy editor-


office culture

robert Stulle Partner

What’s on your desktop?

In action The studio has an ethos of openness and communication. All employees are seated on the same floor, and arrange themselves to suit whatever project they’re working on

in-chief, Martin Kotynek, spent three hours a week talking to users throughout the project. For one particular story format, we scrapped the design three times and started from scratch, based on feedback from users. Three months before launch, ZEIT sent 3 percent of traffic to its beta site, collecting feedback and iterating upon it. So when the site went live, we could be confident it met the needs of ZEIT’s users. net: How does news need to be done differently on mobile screens? CH: Context, performance, language. It’s about respecting the context of the user; making it slick and having story formats that work great on mobile; and finally using a more approachable – even conversational – tone. When it comes to mobile, it’s all about being approachable, whether that’s the tone of voice, the design or the technology. It’s much more personal. With data visualisation for example, things have to be treated differently. We have to think in flow rather than complex graphics crammed with information. The users respond so much more – the share and view rates on mobile are much higher than with comparable infographics.

net: What is the thinking behind your Card Builder product? CH: The users we interviewed with ZEIT ONLINE said that they found mediumlength articles unsatisfying on mobile, because they didn’t match their natural mobile behaviour. We came up with a card-based format to tell stories visually with rich multimedia, but in a mobilefriendly format: Card Builder. It creates small, reusable micro-stories from stacks of cards, which can then be embedded everywhere, extending the narrative space. It works across all tonalities and story lengths, from GIFs to current affairs, and adds an additional layer to reporting. You can find out more, and see it in action, at cards. net: What tools do you use for communication in the office? RS: With upwards of one million messages sent this year, Slack has taken over as the office’s favourite tool for communicating and collaborating. WhatsApp is another tool, and – of course – good old-fashioned email. With clients, we communicate via tools like Basecamp, GitHub, Slack, DoneDone, and more. It’s a digital jungle out there.

Books, magazines, papers, a framed drawing, a little bird. A whole lot of coloured moderation cards – they are everywhere in our office and I often use them to take notes.

What little things make your life worthwhile? Coffee, chocolate, smiles and happy clients.

What do you have on the walls?

A few posters and some framed stuff, but not a lot. The whiteboard and chalkboard paints mean the walls are always changing.

What hours do you work?

We like our office hours to be regular, pretty much nine to five. Taking breaks is important. Getting sleep is important. Sometimes I hear people brag about their excessive working weeks and I think that they’ve got it all wrong.

What else do you do in the office?

I spend a lot of time with new business and business development. I also work in projects and I have managerial tasks.

How often do you hang out with other designers? Not a lot. I should do that more often. I think designers are better than their reputation.

Describe your working culture in three words Inspect, adapt, enjoy.

september 2016 61




How Edenspiekermann got to where it is today 1989 The European Designers Network E.D.E.N. is formed, later becoming Eden

2002 Erik Spiekermann founds the United Designers Network, later renamed Spiekermann Partners

2009 Eden and Spiekermann Partners team up to form Edenspiekermann

2009 The studio hires its first scrum master and adopts an agile approach

2011 Erik Spiekermann is given a German Design Lifetime Achievement Award

2014 Singapore office opens

2014 Lunch with the Queen of the Netherlands

2015 Employee numbers reach 100 worldwide

2015 Singapore and LA offices open

FontShop For the new FontShop site, Edenspiekermann started by writing a fictional press release, then worked backwards to create an easy way to buy fonts online

net: What about face-to-face meetings? RS: We start every project with a one-day kick-off session, which is an essential part of our approach. It brings the project team and our client together (and preferably their whole team, too). It isn’t about design or technology or process, but about content, purpose and meaning. Why are we doing the project together, and who are we creating it for? What is the problem we want to solve? What would success look like? net: How did you approach the redesign of FontShop? RS: We applied a process that we learned from Amazon, working backwards and starting by writing the press release. We described FontShop’s successful implementation and the benefits of the new product. With this vision of success, we could backtrack and work out how to achieve it in reality. net: Tell us a bit about your process ... RS: We worked in a multidisciplinary team of designers and developers, half Edenspiekermann and half FontShop. Working with scrum, FontShop’s marketing director Ivo Gabrowitsch assumed the role of product owner. The final result was a reinvention of font exploration, and an easy way to buy complex, licensed digital products online.

2015 Edenspiekermann comes to Hollywood: Los Angeles office opens


september 2016

net: FontShop previously didn’t have a style guide. Why did you decide to implement one? RS: The style guide is a living online document – we call it a component

library. It isn’t just a documentation of the design, but a toolbox containing all the building blocks needed for developers to work with, grow and develop the site. It’s important for us that the products we deliver will work for the client long-term, and we’ve used this approach for many projects. The FontShop style guide is public, and you can find it at www. net: Finally, what does Edenspiekermann do differently to other agencies? RS: We left the waterfall behind. In 2009, we learned sequential processes do not work well with digital projects, so we developed new, agile approaches and got an experienced scrum master on board. The results were terrific and we never looked back – we’ve been working agile ever since. This also helped us to develop an agile mindset: we ask questions, we put the user first, and we dare to say no. This hasn’t just improved the way we work; it has transformed our company culture and the relationships with our clients. net: We hear you have an ‘attitude’ ... RS: Yes, people tell us we have an attitude. We have a professional opinion, and we keep our brains switched on and question things during all stages of our work. That’s what our clients need, and it’s what they pay us for. Take a look at our manifesto. It describes how we feel about our profession and our projects. Next month: We sit down with data viz designer/dev Mike Brondbjerg


How we built

How we built

South WeSt trainS South West Trains got Zone on board to deliver a train ticketing site thatâ&#x20AC;&#x2122;s easy to use and gives you the best prices



5 6



brief South West Trains takes care of 230 million passenger journeys every year. Zone was hired to build a new website and mobile app that would simplify the ticket buying process by linking up to the national ticketing database.


september 2016

Close up (1) The ability to purchase tickets is a key feature of the homepage. The design was kept as simple as possible, whilst providing the most important information a customer might need. (2) Live travel updates are also a key element of the site, and feature prominently on the homepage. (3) The interactive map enables customers to navigate the network of over 200 stations. They can easily click to view more detailed station information. (4) The

FAQ section has been redesigned to hero the most relevant questions. (5) The mobile app interface is designed to show the key information as simply as possible, so customers can easily move through each step of the ticket buying process. (6) The systemâ&#x20AC;&#x2122;s USP is that it connects to the national ticketing database, giving customers the cheapest tickets possible, in the most transparent way, with no booking fees.

How we built Saya JoneS

GreG timmS

adam Jenkin timeline

A look at the key dates in the South West Trains project 25 november 2015 Saya is the group account director at Zone, and took responsibility for stakeholder management on the South West Trains project

Greg is Zone’s client production director. On this project he was responsible for production, programme set-up and the delivery framework

If you’ve ever bought train tickets online, you’ll know finding the best deal for your journey is a tricky business. Stagecoach Group decided it was time to tackle the problem, so it brought in Zone ( to create a new site for South West Trains (www.southwest The revamped site includes a ticketing system that connects directly to the national ticketing database to provide passengers with straightforward access to the cheapest tickets, plus a handy mobile app. We chatted to the team that helped streamline the experience for users. net: Can you tell us a bit about the brief? SJ: Stagecoach was determined to demystify the infamously complex rail ticketing process. When attempting to buy a train ticket online, a passenger is usually confronted with a complex array of grids and ticketing options – and no certainty that the ticket they end up with offers the best value. Stagecoach wanted to change that. net: What were the deliverables? GT: There are four key aspects to the solution. First, a website that features travel planning, live travel updates and general travel information. At its heart is a ticket booking capability that offers passengers easy access to the cheapest tickets. Second, an app that offers the core functionality of the desktop environment in an intuitive, easy-to-use interface. Third, a service layer that gives passengers access to the widest

As client technology director at Zone, Adam was responsible for the system architecture, planning, and leading the tech teams

possible variety of ticketing options available. Finally, a 24/7 hosting and support service.

Official appointment of Zone after a successful pitch process

4 January 2016 Production of the website and apps begins, with overall UX and visual design principles being agreed

11 January 2016 net: How many people were involved in the build? GT: At the project’s peak over 40 people were involved, sub-divided into five delivery teams. There were strategists, projects managers, business analysts, UX and creative design specialists, developers of all kinds, and deployment and infrastructure specialists. net: What did you learn from the UX research? SJ: That we needed to aim for a simpler, more linear experience. Research shows that the majority of UK rail passengers are confused by sales and journey information available to them. net: And how did you address this in the build? AJ: When you go to a ticket office in person and ask for ‘a single to Kings Lynn at 11.15’ – you expect just one efficient response: the cheapest possible ticket, for a train at the desired time, which will get you to your destination as quickly as possible. This was the experience we wanted to replicate on the website and app – a linear journey that simply gives the passenger the cheapest option available to them, as opposed to asking them to select from a range of options and make an uninformed decision. So, for example, if two singles would be a cheaper option

The first development sprint starts with multi-disciplinary agile teams

18 marCH 2016 Client and third-party testing begins and the first test ticket is successfully printed

3 may 2016 Episerver content upload commences. The site starts to take shape with multiple modules being linked together

18 may 2016 App Store approval is received

27 may 2016 Final checks and targeted pilot deployment is successfully completed

31 may 2016 Launch day. War room convened for a series of deployment activities involving all third-party suppliers and key stakeholders

september 2016 65


How we built




The Zone team talk through the sketches, wireframes and plans leading up to the final design



(1) The scale of the project meant we had two teams working concurrently from two ‘hive’ (war room) locations in the London and Bristol offices. (2) The initial scamp of the overall architecture in its simplest form. Our key challenge was visualising and planning the role of the middleware and the system dependencies. (3) Our initial style tiles designed to be applied to the website and apps. (4) We created wireframes for each stage of the ticket buying process on the app, including the ‘tickets to and from’ page. (5) The website makes extensive use of the Episerver content blocks. This gives content editors a modular way to build content for the pages, and enables easy re-use of content and personalisation across the website. (6) The modular design kit helped iterate the design sign off and defined how the modules should be built and used by content editors in the Episerver CMS.




september 2016

How we built for a journey, we don’t present it as one of a number of alternatives – we just give the cheaper option. net: What challenges did you face setting up the ticketing service? GT: When it comes to connecting customers to the all-important national database, Stagecoach previously didn’t have complete control over which tickets passengers were offered. Like every other train operating company, South West Trains used a third-party system – Stagecoach wanted to build a proprietary solution that would ensure customers were offered the best-priced ticket available. Having committed to building its own central booking engine, Stagecoach needed a way for customers to integrate with it … and that’s where Zone came in. We had to build a multiplatform, passenger-facing solution that would connect passengers with the cheapest tickets, and offer them all the journey planning and travel information they could possibly need, via one easyto-use interface. net: What were the key technical challenges on this project? AJ: Navigating the intricacies of UK rail fares and the complexities of tickets and price display was one of the biggest challenges. We decided to create a central middleware for the frontends, where this logic could be contained. We built the middleware

Page not found The animated 404 page adds a touch of humour, further emphasising customer engagement throughout every aspect of the site

as a RESTful set of services in Python. It’s very fast, easily testable and automatically scales using AWS. net: How did you put this together? AJ: The website, app and middleware teams needed to work closely together to agree on the message structures for sending and receiving data. For each endpoint exposed by the middleware, we used spreadsheets to sketch out the message structure and capture the data properties. Once it had been agreed by all teams, the middleware team would build the endpoints and distribute official API documentation, which is generated with apiDoc directly from the Python code. net: What were your main concerns? AJ: Performance was a key consideration throughout the project. We had to ensure the ticket purchase experience was fast, and that critical information such as travel updates and disruptions was always available, especially during crisis events such as station and line closures.

On the go Zone also built a mobile app

net: How did you ensure a smooth UX? AJ: Using LoadImpact, we stress-tested the system with thousands of concurrent users across different variations of ticket purchasing and travel information requests. The backend Stagecoach systems, our middleware and frontends supported everything we could throw

at it. We then made tweaks to the infrastructure, code and caching to ensure we met Stagecoach’s load requirements. LoadImpact also allowed us to test and optimise to accommodate traffic spikes from the website and mobile apps. Deployments were fully automated using Octopus Deploy and TeamCity. net: How does developing for a regulated industry differ from work you’d do for private businesses? SJ: It introduces another stakeholder group that must be consulted and informed – but this is something Zone is well versed in managing through our work with other clients in regulated industries, like Gatwick Airport. net: The project had a very short timeframe. How did you manage this? AJ: I acted as the one overriding tech authority, and there were tech leads overseeing each of five separate work streams. This, combined with an agile sprint-delivery model, allowed us to undertake a significant amount of build work in parallel. Close collaboration with the client team on a daily basis informed the sprint backlogs and ensured continuous cycles of testing and feedback. Next month: A behind-the-scenes look at font shop HypeForType

september 2016 67

Cover feature

There’s more to being a freelancer than working with clients. Femke van Schoonhoven explores 20 new tools to help you take charge of all areas of your business


reelancing looks idyllic from the outside. Working with the best clients, choosing fun projects, determining your own hours and working from wherever you like. But there’s a lot that happens under the hood to keep the momentum going. Doing the actual freelance work for your clients never takes up 100 per cent of your time. Soon you’ll be swamped with paperwork and admin – writing proposals, drawing up contracts, sending invoices, writing down tasks and managing your workflow. To accommodate that, we’ve seen an abundance of new tools spring into the market to assist freelancers. You can now write proposals and send them directly to the client without ever opening up your email client. Instantly glance at your revenue for the month and compare it to last year’s. Check how much time you spent on that new project last week. To help find the best, I’ve broken down the tools into the following categories: proposals, finance, legal, time management and workflow. Let’s begin!

author fEmkE van schoonhovEn When she’s not helping atomic build the nextgen prototyping tool, Femke (@femkesvs) freelances in digital design. she also co-hosts the design podcast Design Life

Illustrator ElEna afanasiEva Elena is a freelance illustrator and graphic designer also known as lena la Ballena. she was born in russia, has lived in ukraine and Mexico, and is now based in the Dominican republic

september 2016 69

Features Cover feature

rEading list GEt startED Freelancing tools are great to help with admin and the day-to-day running of your business. But what about actually attracting clients and getting paid in the first place? Here are a few insightful resources, ranging from courses to books, to help you get started.


The value of a great proposal shouldn’t be underestimated – they can be the key to winning or losing a project. I’ve tried out a number of different proposal tools and even used InDesign to make my own custom template. These tools aim to make things simpler by providing templates and customisation features. Many also enable the user to send the proposal smoothly to the client and track its progress – a feature that I’m a big fan of. A great course by Paul Jarvis for those looking to take a deep dive into business, marketing and sales for freelancers. Learn about pricing, positioning, the importance of process, exposure and more. I’d recommend this course to anyone new to freelancing.

Pay me or Else

start your freelance career A transparent guide to starting your own freelance career by apparel designer Brent Galloway. Learn about diversifying your income, branding your freelance business and marketing yourself.

freelance lift Liam Veitch’s Freelance Lift contains an abundance of resources. Choose a book from the library, watch training videos, listen to podcasts and read helpful blog posts.

the Pricing class From the team at The nuSchool is The Pricing Class. Not sure how to price your projects? Afraid you’re charging too little? The pricing class teaches you how to increase your rates without losing clients.


september 2016

and once completed you can send it straight to the client

02 nusii

the creative class Written by Lior Frenkel, Pay Me or Else teaches you how to avoid clients who don’t pay. The book contains bonus advice from 14 other freelancers, and best of all, it’s free.

nusii the proposal editing in this tool is attractive and simple,

Prospero From the nuschool, this stripped-back proposal tool will also help you price your project

01 ProsPEro

Currently in a private beta, Prospero not only helps you create a proposal but also helps you price the project. From the founders of The nuSchool, Prospero is a completely stripped-back proposal tool. There are no dashboards or even account settings; its strength lies in helping you create a proposal, rather than just letting you fly blind. It promises ‘More client, more money, less headache’. When you create a proposal, Prospero asks you some brief questions, such as your rate, the time it will take you to complete the project, and the type of work you’re doing (Prospero covers print and branding proposals as well as web and app design). It then smartly generates a proposal based on your answers, which you can edit. There’s no design customisation (only text-editing options), but the default design isn’t bad. When you’re finished with the proposal, you can download it as a PDF or send it directly to the client.

Nusii’s dashboard not only lets you create proposals, it also lets you glance over your sales revenue or proposal acceptance rate. I commend this tool on using the available data in a useful way so users can keep track of how proposals are progressing. The ‘send to client’ experience is smooth, and you’re notified when a client views the proposal. The proposal-editing process in Nusii is attractive and simple. However, visual customisation is limited and you can’t insert tables – an odd decision considering freelancers often like to include a breakdown of deliverables and expenses in a table. A nice touch is that the tool supports a range of currencies and languages, so you can use it almost anywhere.

Proposify select a proposal template to get started with this WYsIWYG option

03 ProPosify

A true WYSIWYG tool, Proposify comes with a range of templates. Though pretty bland, the templates give you a nice

Cover feature

place to start if you’re new to writing proposals, and the editor includes a range of customisable features (and even some basic drawing tools). However, it is quite like a word processor – you don’t get that beautiful proposal writing experience that I personally prefer. One of the benefits of Proposify is that you can embed videos and images. It also lets you create content snippets to drop into your proposals and re-use, which is a great time-saver.


05 ZiPbooks

ZipBooks is a new accounting tool that is not only free, but also beautifully designed and simple to use. You can use it to create invoices, track your time, manage payments and clients, track your expenses, and more. Once you’re logged in you’ll see a nice dashboard that displays your billings versus collections, revenue in the last 12 months, average collection period and more. Handily, you can set up late payment reminders for those clients that need them.

Keeping track of the money coming in and out is essential to the sustainability of any business. If you’re looking to get better insights into your earnings, try one of the following finance tools.

07 bonsai

Zipbooks this new and free accounting tool lets you track all your financial information

06 momEnto invoiced this tool lets you work with whichever payment method you prefer

04 invoicEd

Invoiced was co-founded by a freelance web developer, and inspired by his own personal struggles. This tool makes it nice and easy to create and send invoices to your clients. The specific payment method is up to you – Invoiced integrates with Stripe so you can set up online payments via credit card, Bitcoin, PayPal, or even offline. The smarts of Invoiced are in its ability to track your collections efficiency, how long it takes on average for you to get paid, and any monthly recurring revenue (useful for clients on a retainer). If you’re using an accounting tool to keep track of finances, Invoiced integrates with both Xero and QuickBooks.

ExpErt choicE FinancE

With its travel expense feature built in, Momento is great for freelance digital nomads. Momento will also turn approved estimates into invoices without any additional work. Refreshingly, unlike many other tools, Momento just has one pricing plan, with the option to pay monthly or annually. You’ll get access to all features and unlimited use of the tool during your subscription.

Still in beta, Bonsai gives freelancers the ability to send contracts and collect payments. When creating a contract, Bonsai will ask you what type of work you’re doing, to help it tailor the contract to your project. You’ll be asked a few questions, including your basic info, project brief, rate, when you’d like to be paid and so on. The tool will then provide an editable contract on your behalf that you can send to the client straight from the tool. Once signed, Bonsai generates an invoice for you to issue. You can also set the invoices to be recurring – handy. Not only is the functionality of Bonsai great, but the design and user experience is seamless. The tool is easy and enjoyable to use, omitting any unnecessary clutter.

bonsai send contracts, create invoices and collect payments, all via a seamless uX momento With a travel expense feature built in, Momento is perfect for freelancers who like to roam

september 2016 71

Features Cover feature

08 wavE Wave is another popular, free option. This straightforward tool has all the bare bones you’d expect from accounting software, but without the unnecessary bells and whistles. Its invoice flow moves through visual steps, making it easy to keep track of where a project is up to in the payment process. A nice touch is that you can create free, unlimited invoices on the go via the iOS app. It’s easy enough to send a receipt, set up a Stripe integration and connect your own bank account. Payroll features do exist, but are currently limited to the US and Canada only. You’re probably going to want to invite your accountant in to take care of the reporting features, like balance sheets and income statements.

wave this tool contains all the bare bones of accounting software without the unnecessary extras


Not the most fun category, but definitely one of the most important. Contracts don’t have to be as scary as they sound – they’re good for you and your client. While these tools are helpful and often include templates, if you’re unsure about the laws in your country I recommend consulting a professional.

09 tErmsfEEd

Selling products online? Chances are you’re going to need some legal documentation, such as a returns policy. TermsFeed has a range of free terms


september 2016

templates for you to use, including Terms & Conditions, Privacy Policy, and Terms of Service. There’s also a generator that asks you a range of questions and then builds a contract best suited to your use.

ExpErt choicE timE managEmEnt

11 cushion shake law Need a contract? Choose from a range of templates and get expert advice

10 shakE law

A very basic contracting tool, Shake Law lets you choose from a range of contract templates. A nice addition is that you can choose a contract template for an assignment-based or licensing project. Once you’ve created your contract, you can get it reviewed by a lawyer. While this sounds generous at first, Shake Law actually redirects you to a law firm, which requires an additional fee. The features of Shake Law themselves are pretty limited. For example, you can’t send the contract to the client (only download a PDF), and there’s no way to visually edit the plain contract. As a designer, the design and consistency of all my collateral is pretty important as I consider it a reflection of my skills and professionalism. I wouldn’t feel comfortable sending my clients something so plain. Rather than tracking time, Cushion helps you schedule your time – and not just at work. You can schedule time spent on projects, as well as time off. It highlights when you’ve overbooked yourself, to help you avoid burnout and encourage you to manage your time better. Easy to set up, Cushion also lets you display a badge on your website to show when you’re available, which is helpful for those interested in working with you.

timE managEmEnt

It’s the one thing we all wish we had more of: time. Unfortunately we can’t make more time, but we can choose how to spend it. Covering everything from time tracking to scheduling to estimation, time management tools are useful for any freelancer, even those who don’t bill based on time (like me).

cushion rather than tracking time, Cushion lets you schedule your hours for work and time off

Cover feature

12 timEly Elegantly simple time tracking software, Timely greets you with a calendar view the first time you log in. There’s no timer – rather, Timely encourages you to fill in the hours you worked on a particular project. You can view the history of a project and gain a good overview of time spent across all areas of the business. This tool lets you enter both your planned and logged hours so you can see the difference in your estimations. A nice way to teach you to estimate your time better if you’re always getting it wrong! Timely works in the cloud, or you can choose to access it from your browser.

timely a feature letting you compare your planned and logged hours helps you plan your time better

harpoon Create projects, track time, allocate invoices and record expenses

with spaces where you can set yourself goals and define your work habits (for example, how many hours or days per week you work). This makes it a great place to encourage you to plan ahead and keep track of your goals. Harpoon is almost like an all-in-one tool, with smart reporting and dashboard features. The only things it lacks are contracts and proposals.

13 harPoon

Though it may seem overwhelming at first, once you’ve spent a little time with Harpoon and oriented yourself, you’ll see it is a powerful tool. Harpoon lets you create projects, from which you can then track your time and add invoices and expenses. It prides itself on not just helping you invoice, but aiding you in your decision making and helping you plan better. You can quickly glance at your average revenue per project (or per month, day or hour, if you prefer) or check your outstanding invoices. There’s also an event revenue forecast,

freelancy If you bill by the hour, Freelancy will turn your tracked time into invoices; no maths required

14 frEElancy

Freelancy lets you turn time tracked into invoices, quickly and easily upon project completion. I personally don’t

in-dEPth What Do FrEElaNCErs WaNt? Some categories of freelance tools, like finance and time management, have more options than others. To get a sense of what freelancers thought were the most important tools, I ran a Twitter poll!

contracts and proposals This was the category in which freelancers wanted to see the most improvements or options. This was surprising, as there have been a few proposal-based tools that have had to shut their doors over the last year (Krit and Beagle, for example). Yet it seems we want more of them, not for them to go away!

time tracking Time tracking tools came in at last place, with only 10 per cent of votes. There are a lot of time tracking and management tools, with ranging levels of complexity. It seems the majority of freelancers are pretty happy with the current features and options.

workflow and organisation, and finance That leaves ‘workflow and organisation’ and ‘finance’ to come in close second and third.

september 2016 73

Features Cover feature

bill this way, so it would not work for me. However, for those who do bill per hour, I can see this being useful, as it saves you from having to do the maths to work out your fee. Freelancy’s reporting feature gives you a calendar overview of when you split your time. Here, you can easily see how much time you’ve spent and on which projects. You can filter by dates or by project, making it easy to see what your time was spent on and when. The reports are exportable, meaning you can download CSVs and charts for yourself or your clients. While automatically creating invoices from your time tracked is handy, you can also create invoices manually if you prefer. Perhaps you’re only tracking your time for internal reasons, or maybe it’s irrelevant to the client.

toggl track the time you spend on projects and view summary reports

15 toggl

I’ve been using Toggl ever since I started freelancing. While I don’t bill my clients per hour or day, tracking time informs me about how and where I spend my time. After tracking the time you’ve spent on certain projects, Toggl uses that data to generate reports. The desktop app reminds me to track my time and lets me do so without having to log in to the web app. Toggle also lets you create private and team-wide workspaces. So I can manage my personal time, but I could also invite a developer into a workspace if I wanted to track not only my time, but all the time spent on the project.


september 2016


Workflow tools can often take a little more effort to get your head around as they can be complex, yet powerful. I personally use my trusty paper-andpen to-do list, but I can definitely see the benefits of having a digital workflow tool, especially when it comes to organising bigger projects.

16 flow At its core, Flow lets you create workspaces and tasks so you can keep on top of your projects. Like many workflow tools, Flow lets you collaborate with team members through task assignment and in-built chat. I tried using the chat feature with my developer and it worked fine, but there’s nothing quite as smooth as Slack. There’s also a ‘focus mode’ that turns off notifications temporarily and lets your team know when you’ll next be available. Users create a selection of tasks to be completed, which are then organised into projects. Not all tasks can be seen by the whole team; Flow lets you create private tasks that you can share with your team members later. This is helpful if you have something you’d like to work on privately before sharing it with others. The calendar view gives you a nice overview of what’s coming up soon, and you can filter to see just your own tasks or everyone’s. And if you find yourself with a bit of free time on your hands you can navigate to the ‘unassigned’ section. Here, you’ll see all the unassigned tasks ready to be picked up.

ExpErt choicE WorkFloW

17 aZEndoo

Azendoo is a powerful workflow tool with a beautiful design and user experience. View analytics, attach documents, and group and organise your tasks into subjects. The whole experience has been thought through; you can filter on tasks, see a calendar overview, create repeating tasks, set due dates and add checklists. You can also broadcast messages, send direct messages to team members (if you have any) and view notifications. A great tool for keeping you on top of things.

azendoo Filter tasks, check the calendar overview, create repeating tasks and more flow In this tool, you can set up tasks to work on privately before sharing them with your team

Cover feature

bonus tools

There’s more to freelancing than just finance, time management and proposals; sometimes freelance life can throw up more unexpected challenges. I’ve rounded up three bonus tools to help you boost your creativity, get paid on time (without the stress) and prototype your ideas quickly and easily.

The team at Briefbox write a range of imaginative briefs – everything from designing local currency to creating branding for a painter – you just need to pick one and get designing. Once you’re done, you can upload your work to the site and get feedback from the community. The team has just launched its Pro accounts. These offer tips from trade professionals, and constructive criticism on every submission.

20 atomic

Just tell Julie Got a client that won’t pay? Just call in Julie Elster to get your money in the bank

18 Just tEll JuliE

Stuck in a situation where the client isn’t paying? Julie Elster offers to work as your accounts receivable virtual assistant to help retrieve absent payments; she works by calling your client on the phone and being ‘thermonuclear nice’. She has a proven track record, and is highly rated within the freelance industry.

Create and share prototypes with your client with Atomic, the fastest way to design beautiful interactions. Import an existing design from Sketch or Photoshop (or design in the tool itself), then link the pages together and fine-tune the transitions to create your prototype. Once finished, you can easily share your prototype with the client by sending them a link. The client can then add any comments or feedback on your design. Full disclosure: Femke van Schoonhoven works in marketing and design for Atomic.

atomic Prototypes are a great way to get ideas across, and atomic offers a quick way to build and share them

gEt startEd

briefbox Pick from a diverse range of hypothetical briefs to get your creative juices flowing

19 briEfbox

Briefbox is a collection of hypothetical briefs to help keep your creative juices flowing when you’re between projects.

That’s it! This is by no means an exhaustive list. There are hundreds of new freelancing tools popping up every year, so I encourage you to keep an eye out and see what’s improving over time. Remember, when it comes to freelancing there’s no one-size-fits-all. Each tool has its own strengths and feature set so it might take some time before you find the best ones for your toolkit.

Q&a Paul JarvIs you’ve been freelancing since 1998 (pjrvs. com). what made you to decide to build your own tool? PJ: Client work can definitely be difficult, but no one will push your skills and problemsolving abilities more than yourself – that’s why side-projects are so important. I helped build ofCourseBooks ( to stretch my UI skills in a team environment. And as a tool, we saw a severe lack in the market for how students wrote and shared notes in courses they took, so we decided to build something to help with that. in your almost 20 years of experience, how have freelancing tools influenced how you run your business? PJ: Freelancers aren’t good at their craft because of their tools. They’re good at their craft because of the understanding and knowledge they’ve built while using their tools. The most important tool I’ve got isn’t Photoshop or Sketch, it’s email – so I can quickly and easily communicate with clients. My workflow hasn’t changed much in 20 years. While things like Marvel and InVision are amazing to share your interactive vision with clients, it still comes down to your ability to communicate the why and how to stakeholders. is it worth investing time to learn how to use new tools, or better to stick with what you know? PJ: The best tool is the one you’re using right now, to do your work. If it’s not working, find another. Tools don’t matter. Building skill matters more.

september 2016 75

Second feature

Jen Simmons explores what’s newly possible with layout on the web, inviting us to challenge our assumptions and break out of old habits


hen the web was first invented, there was no technology for page layout. Every background was grey. Every page was a single column of text, filling the whole space from side to side. Over the years, we’ve created one hack after another to tackle page layout. The hacks have become far less messy, but everything we do today is still a hack. To hand-code a page layout, you must master the art of clearing floats, using negative margins to rearrange order, and dodging browser quirks. It’s painful. Many of us have given up and instead use a third-party framework; Bootstrap, Foundation, or one of their many competitors let us outsource the pain. We’ve shipped a lot of work using layout frameworks. We’ve been more efficient and suffered through fewer bugs. But now every website feels the same. Every website reaches for an identical 12-column symmetrical grid. Every site uses the same shapes and patterns over and over. And we are totally bored.

Author jen simmons Jen (@jensimmons) is a designer and developer advocate at Mozilla, and the host and executive producer of the Web Ahead. She presents talks and workshops around the world on page layout and the future of web design.

A new erA But there’s good news. Finally, we are getting real tools for page layout. Instead of hand-coded hair-pulling or boring formulaic frameworks, we can get creative. Flexbox, CSS Shapes, Masks, Clip-path, Initial Letter, Rotation, Multicolumn, Viewport Units, Object-fit and more are already opening up a world of new possibilities. Most profound of all, CSS Grid Layout will arrive sometime in the

september 2016 77

FeatureS Second feature

GridS MAde eASy Once we start making websites with CSS Grid, it’s likely we’ll assume we should code layouts the same way we do now: specify a fixed number of columns, place each item in a particular track, and alter the placements at different viewports using media queries. But CSS Grid can do things that no current framework can do. It’s much smarter and can figure out things on its own. Here’s an example using a common layout: a flexible, fluid grid of rectangles (you can see this example at spice-284). It’s easier to accomplish this with Flexbox than floats, but Flexbox is still a bit of a hack. You still have to use media queries and specify content widths. CSS Grid is the right tool for this job. And it only takes two lines of code. Yes, two. main { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));} The first line turns on CSS Grid. The second tells the browser to calculate how many columns to make, and to do so based on the content size. It also tells the browser to make the content a minimum of 280px and allow it to stretch to fill any additional space, sharing that space equally among the columns. Grid automatically calculates the row sizes based on the content size, and calculates the number of rows needed, without us telling it to.

layout land will become home to a community of designers trying out different layouts

next year, completely changing how we approach page layout on the web. The question will no longer be ‘which framework should we use?’ We aren’t going to need them any more. In fact, once CSS Grid arrives, using a framework will be much less efficient than handcoding your own layout in vanilla CSS. Third-party frameworks – even new frameworks based on Flexbox or Grid – will just get in the way. We should start asking ourselves, what kind of page layout will best serve this project? How can we tap into a hundred years of graphic design practice to communicate through our layout? Fighting the code will no longer be the hardest part of creating a layout.

Our biggest challenge will be fighting the limitations of our imagination. We developed powerful habits over the last 10 years. We squashed our creative ideas under piles of ‘the web doesn’t work that way’ and ‘you can’t do that’. Well, things have shifted. The boundaries between possible and impossible have drastically changed. It’s time to let go of long-held habits and myths.

myth 1 everything must be A floAting bAr of soAp Any float-based web page layout is like a bathtub full of hundreds of bars of soap. Every element on the page is a rectangle, fighting to rise up to the top. The header is a bar at the top, followed

figure 2 the photo is floated left, while the text flows around it in a non-rectangular shape


september 2016

Second feature

figure 1 CSS Grid lets us place things in vertical space, instead of cramming everything against the top of the page

by a bar of navigation, followed by a hero bar, a sidebar, a bar of content. Any time the viewport is resized and a different media query kicks in, the soap bars rearrange themselves, jostling for a position on top. Floats don’t allow for white space. Floats encourage busy pages crammed full of crowded content. Floats require us to artificially create content of the same length or aspect ratio. Although it still works on the basis of a grid of columns, CSS Grid has a different mental model to the layout frameworks we’ve been using. One of the biggest changes: it has rows. Rows! These allow us to line things up horizontally, but also let us distribute vertical space. Rows let us create white space. Our default will no longer be everything crammed up against the top of the page. There are ideas from a century of magazine design that become possible when we have the ability to control the space vertically. I’ve been collecting books on grid and layout design. In one of them, I saw a poster for the Lincoln Center’s 2007 Jazz Festival and wondered if the design could be accomplished as a web page: Figure 1 shows the result (

visible grids the CSS Grid inspector Firefox extension will make your grids visible while you code them

myth 2 rectAngles; only rectAngles By default, everything on a web page starts life as a rectangle. The tools we’ve been using keep it that way – we line up one box after another. Box. Box. Box. Now we have tools to help us break up the boxes. You can use Clip-path, Masks or Gradients to cut a box into a different shape. Triangles, diamonds, trapezoids – content can be cut into all sorts of

now we hAve tools to help us breAk up the boxes. content cAn be cut into All sorts of silhouettes silhouettes. Create a headline with a bold background colour, and slice across the bottom of that box with a diagonal line. Take a series of bio photos and cut them all into hexagons. CSS Shapes lets you float an element to one side, and flow the content that follows in a shape that’s not a rectangle.

Float a photo that’s been cut into a circle with border-radius , and then flow the accompanying text in a circular shape around the photo using shape-outside . Or create a complex illustration with lots of odd shapes, and use that image as a mask to get the browser to flow text around the shapes in the illustration. In Figure 2, a photo of grapes is floated left, while the text flows around a polygon ( With Rotation you can escape the perfection of everything being square to the page. Tip a headline a bit askew. Tilt a photo to give it some character. Put the credit for a photo sideways along the edge.

myth 3 we cAn’t control the fold On the web, we have no control over where the bottom edge of the screen cuts off the layout. We pretended for a while that all screens were 1024x768 pixels (or 800x600), but in reality we’ve never controlled the bottom edge of the screen. Despite meeting after meeting where people insisted their special snowflake must appear ‘above the fold’, we haven’t had any way to know where ‘the fold’ is. Until now.

september 2016 79

FeatureS Second feature reSourCeS jen simmons lab I’ve created dozens of examples of what’s possible using new layout CSS. See them at different screen sizes. Inspect the code. three presentations on layout Videos of three presentations about layout design and CSS: ‘Modern layouts: Getting out of your ruts’ gets into the history of web layout, its job and where we might go. ‘Revolutionise your page: Real art direction on the web’ explores future possibilities. And ‘Progressing our layouts’ teaches you how to implement new design ideas now, even if browser support is less than 100 per cent. firefox nightly The easiest way to see CSS Grid in action is to download and use Firefox Nightly. It has the most complete implementation of Grid, and you don’t need to bother with turning on a special setting or flag. css grid inspector firefox extension Install this extension to Firefox and gain a tool that lets you see the grids you are coding with CSS Grid. A visual tool makes it easier to understand what’s going on. rachel Andrew’s online workshop Want to learn all the CSS you need to create great layouts? Rachel Andrew has you covered.

figure 3 No matter the size of the window, the photo is half-width and full-height

With viewport units, we can size or place items in relation to the viewport. If we want to style an item so it’s a certain proportion of the viewport, we can. img { height: 50vh; width: 50vw } will size an image so it fills exactly half the viewport in each direction. In the past, defining both a height and a width for an image was a terrible idea. The image would end up being squished. But now, object-fit: cover tells the browser to maintain the aspect ratio of the image, and crop it to fit the defined box. Figure 3 shows an example. No matter the size of the browser window, the photo of Grace Hopper is always half the width and all of the height. Start scrolling and the article appears just ‘below the fold’. This layout (netm. ag/hopper-284) is accomplished with Viewport Units and Flexbox.

myth 4 12 columns is best It was in 2006 that the industry started advocating for the use of a 12-column symmetrical grid. We didn’t intend to become prescriptive, we just wanted simpler maths for hand-coding our fixed-width websites. 960 pixels fitted nicely inside a 1024px-wide screen and allowed us to create column units of 60px with gutters of 20px. Plus, having 12 columns meant we could easily break the space in half, thirds or quarters. Starting new projects with a Visio template made UX design seem more legitimate. It was easier to impose a standard on a team when you could point to a popular website and say ‘everyone is using this tool, we should do this’. We needed to tame the chaos. But after 10 years of almost every site using the

css layout news Signup for this free email list and receive a weekly collection of tutorials, news and information on all things CSS Layout. layout land See examples of new possibilities; join a community creating experiments.

figure 4 Apply grid-auto-flow: dense and the browser rearranges the order of content to make it fit


september 2016

Second feature

bright future A brief look at how layouts have evolved; we are at the beginning of a new era in web design

same grid, web design has become incredibly boring. The 12-column symmetrical grid conveys a feeling of stability and sturdiness, and we use it without asking if that’s really the feeling we want to convey. We’ve learned to art-direct through our choice of typefaces, but not yet through our layouts. With responsive web design there is no reason to maintain mathematical ratios based on a 960 grid. For years, Mark Boulton has been advocating the idea of using odd numbers of columns, like nine or 11, and trying out grids where the columns are not all the same size, but instead are based on a ratio like the golden ratio. Such grids are the staple of great graphic design in print. Creating custom grids would allow us to convey so much more about each project through its design, but somehow these ideas have not taken off. Why not? I think it’s because the maths is too hard when the underlying technology is the float. The team at Mark Boulton Design created an app called Gridset to make such design work easier, and the Sass community has built one library after another to abstract away the

maths of complex grids, but either way it all still feels too tricky and fragile. CSS Grid will make designing custom grids trivial. It will be just as easy to create 11 columns as it is 12. It will be a piece of cake to create a ratio-based array. The browser will handle most of the maths, we just have to get creative with what we want to do.

css grid will mAke designing custom grids triviAl. it will be As eAsy to use 11 columns As 12 There’s no reason to keep to 12 columns. Do something new and give your site a fresh look. We’ve got decades of graphic design practice to guide us.

myth 5 we hAve to use A lAyout frAmework Actually, writing CSS using the new Grid syntax will be easier than applying a framework, and updating old-style frameworks with CSS Grid will only make life harder. Get out of the habit

of reaching for a framework. Write your own vanilla CSS.

myth 6 we Are stuck in A rut becAuse of rwd I don’t believe that for a minute. It was hard for the industry to wrap its head around responsive web design, so we leaned on tools to help us relaunch our sites quickly. But there’s nothing inherent to RWD that requires we all use the same half-dozen layout patterns. We can create anything we want with CSS, and change it to whatever we want to at any breakpoint. Stop using cookiecutter tools and you won’t have cookiecutter results. Here’s a taste of the surprising waiting in CSS Grid: it can rearrange the order of the content to make it fit the available space using the grid-auto-flow: dense; property. Figure 4 shows the result (

letting go If you can let go of these myths, your work will stand out. You can make a splash and have a strong impact. Take advantage while the opportunity is still new. Start playing with these properties and see what’s possible.

september 2016 81

Tips, tricks & techniques

This monTh FeaTuring...




Create UI elements wIth reaCt


Implement BeaUtIfUl typography In sketCh

BUIld a moBIle app prototype wIth UXpIn


weB standards: generIC sensor apI

BUIld weB apps qUICkly UsIng hyperdev


Craft reUsaBle Components vIa the shadow dom 102















BUIld a materIal desIgn app wIth angUlar 2


aCCessIBIlIty: teChnIqUes wIth hIdden BenefIts 114

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 ( It explains from which version of each browser the features discussed are supported.

Look for the video icon throughout our tutorials. This issue, three authors have created screencasts to go with their pieces: Daniel Zen makes an app with Angular 2, David Berner uses the Shadow DOM to craft components, and Gareth Wilson introduces HyperDev. Plus, turn the page for 22 more free screencasts!

22 free ScreencaStS

Over 5 hours of tutorials

reSponSive web deSign

Responsive design foR enteRpRise sites

CReate a gRid that adapts to all sCReens

Responsive UX design with illUstRatoR

fleXible layoUts with sUsy and bReakpoint

Reveal & hide a menU with Css animations

Use Css blend modes foR dRamatiC effeCts

CReate a pyRamid layoUt with Css


bUild inteRaCtive emails with Css

data visUalisations with leaflet.js

data dashboaRd with angUlaRjs

animation and data viSualiSationS

CUstom animations with motionUi

CReate a bRanded loading animation

CollaboRate with sketCh and Zeplin

CReate a Consistent iCon set in sketCh

CUstomise sketCh with plUgins


fill yoUR sketCh designs with data


material deSign

bonuS video tutorialS

CReate a floating aCtion bUtton

bUild a site with mateRial design lite

10 poweR tips foR atom UseRs design a mobile app with adobe Xd pRototype with masteR html typogRaphy in email


View source files here! All the files you need for this tutorial can be found at

A b o u t t he A u t h o r

GreGor A dA ms w: t: @GregorAdams job: Web developer and artist


Create UI elements wIth reaCt.js Gregor Adams shows you how to build a fully accessible and customisable component using web technologies Components are containers that can be added in web pages, and act as an architectural guideline for writing reusable code. Some components are simple (a button, for example), while others are more complex – or contain groups of other components (such as a date-picker). It doesn’t matter which language we use to write this code; what’s important is how we structure it and how it can be used. Let’s write some simple components: <span id="current-date"> <script> var currentDate = document.getElementById('currentdate'); // get element


september 2016

currentDate.innerHTML = new Date(); // replace this script with the date currentDate.removeAttribute('id'); // remove id </script> </span> The code above will just show the current date. Since it removes its own content and id , it can be used multiple times on one page. We can write a server version of this in Pug (formerly Jade) so the client receives the prerendered component. mixin date span= new Date()


//- usage +date +date can now be placed anywhere in your template to show the current date. This is obviously a very functional way of writing a component – there is no interaction and no mutation.

Good UX and an awesome aPI In this tutorial, I’m going to build a radial knob called a potentiometer (informally known as a poti), using React.js. The complete code can be found at // native html range <input type="range" min=0 max=100 step=10 value=20 name='name'

Although we have a list of features, we should ensure our component is extendable onchange="handleChange(this)"/> // React component <Poti min={0} max={100} step={10} value={20} name='name' onChange={handleChange}/> Given that an input[type=range] offers a similar interface to our component, I have simply copied the element with its attributes and made it JSX compatible. In the image at the top of the opposite page, you can see that we have optional labels, different markers and rotation ranges, and custom styling. The requirements are mainly visual; the basic functionality is always the same. We rotate a button and expect an action or a return value. <Poti min={0} max={100} step={1} markers={['min',1,2,3,4,5,6,7,8,9,'max']} size={100} name=’volume’

fullAngle={300}> Volume </Poti> We now know exactly what we need and can start thinking about the implementation. Even though we have a list of required features, we should always make sure our component is extendable. Our component is based on an input[type=range] . Native HTML elements have one major advantage over custom components: accessibility. Every browser has a more-or-less comfortable way to use input or form elements. Adding these features to custom components can be tedious, and in the worst case irritate users who are used to the native implementation of their browser.

wrItInG the comPonent Let’s create the a basic, stateless React component, add properties and enable it to listen to events: const Poti = (props) => ( <label className="poti"> <input min={props.min} max={props.max} step={props.step} value={props.value} onChange={props.onChange} name={} type=’range’/> {this.props.children} </label> ) Poti.propTypes = { min: PropTypes.number, max: PropTypes.number, step: PropTypes.number, value: PropTypes.number, name: PropTypes.string, onChange: PropTypes.func } Poti.defaultProps = { min: 0, max: 100,

Getting started To begin with, we create a very compact, stateless component

september 2016 85

PROJECTS React step: 1, value: 50, onChange(e){} } The component will now render a <label/> with a nested input [type=range] , and allow us to listen to the change event. Besides the visual aspect and the fact that we want to change the value via a circular motion, our component already delivers all our requirements. The input is as follows: <Poti onChange={handleChange}> Volume </Poti> And the output: <label class="poti"> <input min='0' max='100' step='1' type='range'/> Volume </label>

chIld comPonents Now we can think about the markup of our poti. Letâ&#x20AC;&#x2122;s consider a poti that has three markers and a label:

markup The next stage is to start thinking about markup

<div class="Poti"> <div class="knob-wrapper"> <div class="knob"></div> <div class="markers"> <div class="marker">-10</div> <div class="marker">0</div> <div class="marker">10</div>

</div> </div> <label>Frequency</label> </div> As we take a closer look at the markup, we can uncover some potential child components: the marker and the knob. The given markup defines a knob with a dynamic rotation. The markers are dynamically generated from our properties, and each has a different rotation. To reduce the complexity of the poti, we can create components for them: const Knob = (props) => ( <div className='knob'> <div className='indicator'/> </div> ) const Marker = (props) => ( <div className='marker'> <div> <div className='marker-inner'> {label} </div> </div> </div> )

styles A designer should never be forced to overwrite styles with !important . The developer has to make sure that certain styles are fixed, while others are easily accessible. So how do we make sure our component does not break when it has been visually customised? Some popular libraries have chosen to rely purely on inline styles, while others still use style sheets, which are easier to customise but not as stable. A combination is where the magic is. We need to modify the HTML dummy to: 1 Give the wrapper a dimension and set a position to create a bounding parent 2 Position the markers in the centre of the wrapper 3 Distribute the markers around the knob 4 Position the knob in the centre and rotate it Without the above styles our component will be unstable, so we want to use inline styles for them. Letâ&#x20AC;&#x2122;s add these styles to our component and group them so theyâ&#x20AC;&#x2122;re dynamic and static (modified code at A component should be usable even if no additional styles are applied, so we need to make sure this is visible to the user:


september 2016


style systems The best way to deal with styles is to use a mixture of inline styles and style sheets

const style = { height: '1em', width: '1em', backgroundColor: 'currentColor' } These three styles are magic when it comes to customising a component. We have defined them as passive (by which I mean that they rely on other properties â&#x20AC;&#x201C; in this case color and font-size ), but we can easily change them to inline styles. So, to modify the size and background colour: .my-element { color: hotpink; font-size: 100px; } Note: donâ&#x20AC;&#x2122;t set background if you only need background-color . Setting background will overwrite any background-* properties that have a lower priority, therefore our inline style would disallow the usage of background-image and other properties.

InteractIons The component is now fully customisable and works as expected, but we still need to add the circular interaction. Since we need an internal state and a reference to an element, we canâ&#x20AC;&#x2122;t work with a stateless component (my advice is to work with stateless components until you really need a state or reference to an element). Instead we create a class that extends React. component . To do this we just need to change our code a little. class Poti extends Component { constructor(props){ super(props) } render(){

const {min, max, step, value, onChange, name, children } = this.props return ( <label className="poti"> <input min={min} max={max} step={step} value={value} onChange={onChange} name={name} type='range'/> {children} </label> ) } } Instead of relying on style sheets, we have defined the size through properties. This is because we need this value to calculate the rotation of the knob, and it also defines the base-size of the component. Rather than looking up the size on component DidMount , it is better to have this information available without having to render the component.

Work with stateless components until you really need a state or reference to an element To convert coordinates to degrees, we can use this pure function with two parameters: const coordToDeg = (pointer, size=0) => { const center = size / 2 const dX = pointer.x - center; const dY = pointer.y - center; const teta = Math.atan(dY / dX) * 180 / Math.PI + 90; if ((dX < 0 && dY >= 0) || (dX < 0 && dY < 0)) { return teta; } else { return teta + 180; } } This function returns the degree value while 0 and 360 are in the bottom-centre of the element, and 180 in the top-centre. Since React does not offer the offsetX and offsetY properties of mouse events (due to compatibility reasons), to get the actual offset of the pointer we need to write a small helper.

september 2016 87



Further reAdinG

const offset = (e, el) => { const boundingClientRect = el.getBoundingClientRect() const {top, left} = boundingClientRect const x = e.clientX - left const y = e.clientY - top return { x, y } }

event lIsteners With the help of these two functions, we can now calculate the rotation, but we need a value to set on our component. We will need access to the some of our properties and the reference to the knobWrapper . There are plenty of resources to help you out when working with components. Here are some of my favourites: react.js React.js is a JavaScript library for building user interfaces. Over recent years React has become one of the most popular JavaScript libraries. It offers a very nice developer experience, is easy to understand and takes care of a lot of things you don’t want to get your hands dirty with. one-listener A small JavaScript library that handles event-listeners for you, One-listener knows when to throttle a handler. This is especially helpful when working in environments where components are constantly mounted and unmounted, and there is little control. classnames Classnames is a simple JavaScript utility for conditionally joining classnames together. This library is more-or-less one of the basics when working with React. Adding conditional classnames has never been easier. autoprefixer A PostCSS plugin to parse CSS and add vendor prefixes to CSS rules, using values from Can I Use. Autoprefixer is a must-have for processing CSS. Never worry about vendor prefixes again, forget those funny looking mixins, just write your CSS and let Autoprefixer fill in the blanks. Autoprefixer can also remove superfluous rules.

We need to make sure we remove the listeners when we unmount the component updateValue(e) { const {min, max, onChange, size, fullAngle, step} = this. props const {knobWrapper} = this.refs const pointer = offset(e, knobWrapper) const deg = coordToDeg(pointer, size) const rest = (360 - fullAngle) / 2 const range = max - min const steps = Math.round(range / step) const boundDeg = Math.max(0, Math.min(fullAngle, deg rest)) const value = Math.round((boundDeg / fullAngle * range + min) / step) * step onChange(value) } Let’s break down what we have here: ● rest : If the fullAngle is less than 360 , this will be half the remainder. It will also define the start point ● range : The difference between min and max ● steps : The rounded number of steps in the range ● boundDeg : Provides the actual degree value we want to work with (it sets min and max bounds and subtracts the start) ● value : The value we can now return, or in this case use to call a function


september 2016

React â&#x2014;? onChange : This will be called if the user chooses to rotate the poti with the mouse or use the keyboard instead, which simply falls back to the underlying input element To make use of this method we need to add a few event listeners. The safest way to do this is to add the handlers via Reacts event handling: <div onMouseDown={this.handleMouseDown} onMouseMove={this.handleMouseUp} onMouseUp={this.handleMouseUp}/> This prevents us from using the component outside of its bounds, so I will add mousemove and mouseup listeners to window or any ancestor element instead. componentWillMount(){ window.addEventListener('mousemove',this. handleMouseMove) window.addEventListener('mouseup',this.handleMouseUp) }

This offers a better user experience and the same behaviour as an input[type=range] , but we need to ensure we remove the listeners when we unmount the component. We can also add an optional className when the component is focused by simply listening to the blur and focus of the input .

componentWillUnMount(){ window.removeEventListener('mousemove',this. handleMouseMove) window.removeEventListener('mouseup',this. handleMouseUp) }

handleBlur(e) { this.setState({ focused: false }) this.props.onBlur(e) }

render() { return <div onMouseDown={this.handleMouseDown}/> }

handleFocus(e) { this.setState({ focused: true }) this.props.onFocus(e) }

Final design Our final

poti is fully accessible and cutomisable

render(){ return ( <label className={this.state.focused ? 'focused' : ''}> <input onChange={this.handleChange} onFocus={this.handleFocus} onBlur={this.handleBlur}/> </label> ) }

Knob twiddling All the code used in this tutorial can be found at

With very little effort we now have a fully accessible and customisable component. The last step is to refactor the code and make sure the documentation is correct. I also decided to add full touch support. I hope you enjoyed this article. You might already write components on a daily basis, but maybe this approach will help you make your components accessible or easier to customise.

september 2016 89

PROJECTS Prototyping

A b o u t t he A u t h o r

ben Gremillion w: t: @ux_benjamin job: Content designer, UXPin areas of expertise: UI design, HTML5, CSS3, Photoshop q: which city has the best web community? a: New York! It has one of the highest concentrations of talented web agencies


Build a moBile app prototype with uXpin Ben Gremillion walks through how to build an app prototype with an off-canvas navigation drawer in UXPin In the world of apps, navigation doesn’t always fit. Navigation links take up space on every page. They’re either in the way or too far out of the way. They’re too small to tap with one finger or too big to fit in with everything else. As apps gained popularity, designers quickly learned to hide links until users needed them. The off-canvas navigation ‘drawer’, which stays out of sight until triggered, became just as common a solution as drop-down navigation bars on widescreen websites. Variations on the drawer idea seem endless, and explaining your vision about how a drawer – or any interactive widget – should function can present its


september 2016

own set of problems. If you want to share with your team the idea behind how a design should work, an interactive prototype will explain things better than any written document. Our app prototype uses contemporary styles: flat colours, simple shapes, lines to play down minor elements, and a horizontal grid. The idea is to reduce clutter while directing attention to key points. The off-canvas navigation, here sliding in from the right, uses a dark background to underscore the idea that it’s a separate ‘mode’ within the app. In this tutorial, we’ll build the above app prototype along with an off-canvas navigation drawer. I’ll walk you through each step of the way in UXPin.


Step 3 Create a new project, and add a name

The first step is to prepare the assets. Although you can design right in UXPin, in this case I’ve used Photoshop. For this tutorial we need two designs. The first is a to-do app screen; this shows the overall status of the project at the top of the screen, in a quick dashboard. The second is a navigation drawer; this will slide into view from the right when the user taps on the ‘Menu’ label. From Photoshop, export both your designs as PNGs.


If you don’t already have UXPin installed, head to, where you can sign up for a free trial.


Every prototype in UXPin lives inside a project folder. To create one, go to the dashboard and click the ‘+ New project’ icon in the top left corner. A new window will open, prompting you to add a name for your project.


Step 9 Arrange your layers to make sure the navigation is at the top of the pile

interface by clicking the ‘View options’ button in the upper right corner of the editor. From the ‘View options’ menu you can customise the editor interface further by controlling which side panels are visible. Next to each option you’ll see the reference shortcut keys to toggle them on and off – cmd+2 , for example, hides the left panel to give you more working space.


Now let’s set up our canvas. In UXPin, 14 adaptive breakpoints are available for devices ranging from an iPhone 6 all the way to large desktop display. The app will automatically open up a new tab for each breakpoint you add. In this case, we’ll change the canvas size in the right-hand menu to ‘iPhone 6’. Remember that the


Once you’re in the project folder, create a fresh prototype by clicking ‘Create another prototype’ in the bottomleft corner.


By default, UXPin’s side panels use dark backgrounds with light text. If you prefer, you can switch to the high-contrast light

white area will be visible to users; the light grey area will not. Import your two PNGs (the to-do app interface and navigation drawer) from Photoshop by dragging them from your computer onto the canvas. The images will import at 100 per cent of their original size, and you can then resize them inside the canvas. To help us get a bird’s-eye view of the whole project, we’ll lay both images side by side.


Every element in UXPin is its own layer. Make sure the navigation is on top of the app UI by arranging both in the left-hand Layers menu. Notice how we’ve named each layer clearly. While it might not be a big deal in this tutorial, imagine the confusion that could be created on a more complex project. Don’t fall into bad habits with layers named ‘Layer 2 copy copy_final’.


ExpErt tip

WorkinG notes Live comments are a great way to provide feedback, but sometimes you need internal notes just for your own reference, explaining to your future self why you made certain design decisions. Like digital Post-its, you can leave yourself colourcoded notes by grouping a series of boxes with text. To keep them to yourself, hide that group when you’re ready to show a prototype to your team and stakeholders.

UXPin has more than 1,000 pre-built elements to design with, from simple rectangles and shapes to icon sets, to entire website and app components. You can search for anything by name using cmd+F . You can also browse through any of the built-in element libraries, or add in elements from your own custom



Step 7 Select iPhone 6 as your canvas size – the white area will be visible to users

september 2016 91

PROJECTS Prototyping libraries. Here, we’ll just use a simple hotspot element. Hotspots are clickable areas, and we need them to make the prototype interactive. In the upper left-hand corner of the editor, click the ‘Add basic element’ menu and select the ‘Hotspot’ element.


Drag one spot from the search results to cover the menu icon. Then hit alt and drag it to duplicate it over the close icon. Resize both as needed. Since we’re working with a mobile prototype, we want to follow usability best practices and size our hotspot to at least 40x40 pixels.


With the same technique as you used in the previous step, create additional hotspots for each item in the navigation panel. Use the Interactions panel to create links to other views (or ‘pages’) as needed. If necessary, you can change or add these links after the fact as well. In addition to other interactions and animations, UXPin supports hyperlinks to both pages in the prototype at hand, and external links to outside websites.


Smart elements are like symbols in Sketch: change one instance and every copy of it will change as well. Select the navigation panel and its hotspots, then right-click on the panel and select ‘Smart element’. This has the added benefit of collecting the navigation components together


Step 15 Add interactions to your hotspots using the Interactions menu

so you can move them as a group later. So you can find it easily, rename the smart element by double-clicking it in the left-hand ‘Smart elements’ panel.

Click Save in the top bar. We’ve now correctly created the beginning and end states of the animation.

Let’s tell our hotspots what they need to do. Select the first hotspot and click ‘Add interaction’ on the Interactions menu on the right. Set the trigger to ‘Click (tap)’, then click ‘Advanced animation’ beneath ‘Action’.

First we’re going to define what the app looks like with the navigation in its open state. Drag the navigation bar to cover the app. Drag the first hotspot off-canvas and keep the second hotspot over the close icon (‘X’). Make sure you move the navigation panel’s hyperlink hotspots along with the panel itself. Don’t save the animation just yet – we still need to create the end state.

We want to add an animation to create a smooth transition as the drawer menu slides in and out of view. To do this, simply move the smart navigation panel into place. Once you’re in Advanced Animation mode, the editor will track the movements of any elements that you move across the screen.

Now we want to create the animation for when someone closes the navigation menu. Click on the second hotspot, then add an Advanced Animation with the Interactions panel as before. The navigation and hotspots will return to their original locations because Advanced Animations begin with the default settings.

Now you have the basic parts, you can copy this page with the ‘Duplicate’ button to the right of this page’s name in the Sitemap panel, located in the upper left corner of the editor. The advantage to duplicating a page is that it copies all interactions with it. If necessary, you can always copy and paste elements with interactions intact for new pages.





ExpErt tip

Pre-built elements UXPin contains basic shapes like boxes, arrows and circles. But it also has some fully built-out sets you can use as starting points for your work. Hit cmd+F to search for any element in UXPin, including pagination, breadcrumbs, navigation, bar, form, tabs and more. The search results will yield pre-made groups of elements, from simple navigation elements to complex sections of a full website.


september 2016

Let’s try it out! Click the blue ‘Play’ button in the top bar to test the prototype in a new tab. Try clicking the menu and close icons to see it in action. The new UXPin engine matches native app speeds, so the design will respond as if it’s already live. All the animation states and speeds are accurate.



In our experience, it can help to annotate the prototype with technical comments for developers and use cases for product managers. Click the top icon in the left-hand menu to drop comments wherever you’d like. It’s worth clarifying which flows you’ve created and which are



Step 21 You can easily add notes to your prototype, to give extra information and context

Step 22 Click the ‘Share’ icon to share the prototype with anyone who has the URL

pending at the top of your project, to prevent people from worrying about incompleteness.

It’s also possible to invite other team members to collaborate on the project. In the Dashboard, click your profile icon, then select ‘Team’. Here you can invite team members to edit your projects, and control which team members have access to each project in your account.

To share your prototype, copy the URL or click the ‘Share’ icon (top right part of the editor) for email options. Anyone with the preview URL can test the prototype, even if they don’t have a UXPin account.


Click the top button on the left side of the preview to enter comment mode – you can now leave feedback or notes on the design. Click anywhere on the


canvas to leave a note. Again, anyone with the URL can do this. Create a new iteration by clicking ‘Iterations > Create new iteration’. UXPin automatically saves your previous iteration to automatically document past design decisions. If anyone new joins the project mid-way through, they can gain context by reviewing your iteration history. Make changes to the design and interactions as necessary. Your team and clients will see the changes every time they refresh the preview in their browser.



Prototypes aren’t always limited to the UXPin Editor. You can also save them as PDFs, HTML/CSS, or a series of PNG files. This is a great way to review your progress or keep copies of your work if you find yourself without an internet connection. Click the ‘Share’ button in the upper right side of the Editor, then click ‘Export’ on the right. Choose which format you wish to download in.


This quick demo scratches the surface of what UXPin can do. We didn’t even look at nesting sets of elements in groups, precise editing with zooming, or colour picking. While navigation may pose new design problems in our smallscreened world, explaining design solutions is a snap, as long as you build interactive prototypes that let people try it on for size.


Step 25 Invite others to collaborate on your project with you

ExpErt tip

Auto-resize PrevieWs When previewing UXPin prototypes with different adaptive breakpoints (or simulated viewports), you can switch between the breakpoints by clicking tabs at the bottom of the screen. But look to the bottom right for more options, including ‘Auto resize’. When you switch this on and resize your browser window, the prototype should switch to the viewport size that fits best. Simply resize your window to see your designs for different adaptive breakpoints.

september 2016 93


A b o u t t he A u t h o r

G Are t h Wil s on w: t: @_gw job: Member of technical staff, Fog Creek Software areas of expertise: Code, copy, community q: which city has the best tech community? a: Sadly (as a proud Londoner) it’s still San Francisco. Its open, supportive culture means it’s easy to get meetings and advice

web apps

Build weB apps quickly with hyperdev Gareth Wilson introduces HyperDev, a straightforward new

tool that lets you prototype, remix and share your ideas

Video Gareth Wilson has created an exclusive screencast to go with this tutorial. Watch along at hypervid-284


A developer - we’ll call him Bob - had an idea for a web app he wanted to build. He thought it would take a couple of days to develop a prototype and then he could find out whether other people liked it. He added it to his to-do list. A few days passed, and whilst he kept meaning to get started on it, he just couldn’t find the time. Those days spread into weeks and those weeks into months. This is probably a problem you can relate to. I know I can. Many of us have an ever-growing list of projects and products that we’d like to make, but it can prove too difficult or time-consuming to actually get started. Over the years that web development has existed, we’ve seen the proliferation of tools, languages, libraries and frameworks that aim to make web development easier. Now before we even get to ‘Hello World’ we have to work through the complexity of configuring servers, running shell commands, compiling files, setting up build

september 2016

pipelines and mastering version control systems. The very tools and technologies that are supposed to support us in creating things, end up being a barrier to building them. The result is that potentially useful apps don’t get written because we just never get around to starting them. At least that was true for Bob – until he got access to HyperDev. Four hours later he had a working prototype and was ready to share it with the world.

EntEr HypErDEv HyperDev is a developer playground, like JS Bin or JSFiddle, except it’s for full-stack web apps. It removes all of the usual setup so you can just focus on writing code. Here’s what you need to do to get started building a web app in HyperDev: 1 Go to 2 That’s it, there is no step 2

Web apps That might sound hyperbolic, but it’s actually true. You see, when you hit a new project is automatically launched, containing a sample website. It has its own URL that can be accessed immediately by anyone you share it with. And it’s a real web app, with both server and client-side code. Perhaps more interesting than what you had to do to get that web app running is what you didn’t have to do: ● You didn’t make an account ● You didn’t configure and set up a web server ● You didn’t sign up with a host and wait for name servers to update ● You didn’t install an operating system, LAMP, Node or anything else ● You didn’t commit, build or deploy your code

EDitor tour In HyperDev, click ‘Show’ in the top left of the editor and a new tab will open with the running app, so you can see it working for yourself. In a typical developer playground you get one HTML, JavaScript and CSS file that you can edit. But here you can add as many files as you need, edit the code and build anything you want, including fully-functional web apps. Down the left-hand side you’ll see your project files – these have been separated into frontend and backend components. There’s a ‘Logs’ button, so you can see what your server is doing and debug any issues. There’s also a simple assets store for images, videos and other media. If you click into ‘index.html’ and make some changes, you’ll see those changes immediately reflected in the tab you opened earlier. That’s because as you type, your changes are automatically deployed and the browser tab is refreshed. At the moment, the server only runs Node.js, but support for other languages beyond JavaScript is in the works. There’s nothing special about the server itself, so code copied from Stack Overflow snippets or existing GitHub examples will work without any changes. In fact, you can import code directly from GitHub via ‘Advanced options’ under the ‘Project Info’ menu. It has NPM built-in too, so you can install any packages you want.

Mixing it up Also towards the top-left you’ll see an ‘Invite’ button. That’s for adding other people to work on the project with you. You can code together in realtime, just like in a Google Doc, and see the changes other editors make as they type them. Or you can just share your code for others to view.

The last thing I want to highlight is the ‘Remix project’ option under the ‘Project info’ menu. When you remix a project on HyperDev, you’re creating your own copy of that project that you can edit and make any changes you want to. So for example, there’s a number of ‘Getting started’ projects that provide bare-bones examples of ways of doing specific things like sending emails, connecting to databases or using technologies like React, CoffeeScript and Sass.

res ource There’s a collection of cool projects on HyperDev’s community site that you can view for inspiration, or remix as a starting point for your own apps: community

CorE ConCEpts Now, as IDEs go it’s pretty basic. It’s still in beta so it will be improving, but it’s not intended to replace a professional software development team’s robust toolset. The problem is at the moment, we pretty much apply that same toolset and Git workflow to all projects, regardless of size. For some, that’s like taking a sledgehammer to a nail. Spare a thought too for those just beginning to learn how to program – that kind of setup can make for a steep learning curve. Mastering Git or memorising terminal commands can be a distraction from simply learning the syntax and understanding core concepts. So when it comes to prototyping, writing a quick script or creating a project to scratch that itch, HyperDev makes for a fast, simple option. And its uses extend beyond prototyping and

HyperDev removes all the usual setup so you can focus on writing code developing products too. There’s no setup, so it’s handy for hackathons or recruitment code tests. It’s also great for users with server-side code examples they want to show off in documentation - with one click to a remix URL, users can have their own working version of the code up and running. You can work collaboratively, too, so it’s useful for code reviews, pair programming and teaching. I’ve seen folks using HyperDev for live coding too. Instead of a grainy screen-share, they can just share audio whilst watching the code get updated live in the browser. And since it makes sharing simple, it’s a great way to quickly get feedback on your latest creation. So the next time you’re casting a weary eye over your ever-growing to-do list, give HyperDev a try and see just how quickly you can start marking items off.

september 2016 95

PROJECTS Sketch Exclusive offer!

20% off

SkeTch MaSTer

To save 20% on all Peter Nowell Sketch courses, visit Expires 30 Sept 2016

A b o u t t he A u t h o R

P e t eR Nowel l w: t: @pnowelldesign job: Designer areas of expertise: Sketch, SVG, UI/UX q: which city has the best web community? a: The best community is online; live where you love


Implement beautIful typography In Sketch Peter Nowell reveals three hidden typographic techniques that can be used in Sketch and on your website

Res ouRce These lessons have been taken straight out of Peter Nowell’s upcoming Sketch Master course, Advanced Typography in Sketch, which dives into Sketch’s advanced textlayout and hidden font features


As designers and developers, we know that great typography is more than just choosing a pleasant font. But what are the practical techniques we can use to take our text to the next level? And how do we execute those techniques in a design tool like Sketch, or implement them on a website? In this article, I’m going to cover three techniques to boost your typography game: text on a path, hidden OpenType font features, and special characters. These techniques are exciting because few people know how to use them in Sketch, and they can help make your work look more professional. I’ve accompanied this article with a dedicated web page of resources and a gallery of beautiful examples for you to pull inspiration and code from (

TexT on a paTh ‘Text on a path’ is when a string of text no longer sits on a flat line but instead wraps around a custom line or shape. This is most effective when the path

september 2016

is a perfect circle or a very subtle arc. The more complex or curved your path is, the more likely your text will look childish – it’s easy to overdo this feature! In Sketch, text on a path is an old and slightly finicky feature that can be confusing to figure out on your own. The key is to understand how vector paths work under the hood, which applies to both lines and closed shapes. Every vector path has a start point and an end point, and a direction for the computer to move in while drawing that path. When you use Sketch’s Vector tool (aka the Pen tool), it’s easy to remember where you began drawing and in which direction you drew your custom path. But for shapes like a circle – which appear to be a continuous path – there’s no obvious way to know the start point or path direction. Enter Edit mode by selecting the path layer, then hitting the return key. Sketch automatically selects a vector point along the path, and that’s your start point. If you hit the tab key, Sketch will select the

Sketch next vector point, moving along (and therefore revealing) the path’s direction. This is important for text on a path because the direction of the path is the direction your text moves in. If the path isn’t moving left-to-right, your text will appear upside down. To reverse the direction of your path, go to ‘Layer > Paths > Reverse Order’ in the menu bar. Now your path is ready, it’s time to connect it with your text layer. The text layer must be directly above the path layer in the Layers list, and I suggest grouping the two layers to ensure this doesn’t change. Select your text layer, then go to ‘Type > Text on Path’. Next, drag to reposition the text layer around your canvas until the text sits exactly where you’d like it to along the path.

Top tips This can take a little time, as the position of the text layer can seem to have little relation to where it appears along the path. Furthermore, Sketch’s rendering engine can stumble when working with text on a path, appearing to crop the text in strange places. A quick zoom in and out again will typically fix this rendering bug.

When you choose a font and start typing, you’re only seeing a fraction of what it’s capable of One last tip for working with Text on a Path: I’ve found that the feature performs best when the path is open like a line, instead of being closed and continuous like a circle. Sketch’s Scissors tool will help you there, and I’ve written a whole article about how to use it: On your website, you can implement text on a path by using SVG’s <textPath> element. Sketch doesn’t currently support this feature in exported SVGs, but it couldn’t be easier to add the <textPath> element yourself. On the resources page you’ll find a CodePen template that will make this easy.


behiNd the feAtuRes As you explore the Typography panel, you’ll notice tons of options you never knew existed. These features hint at typography’s rich history and the conventions developed to support text in every imaginable design scenario. Here are a couple of personal favourites:


These combine multiple letters into a single character. This is particularly practical for combinations like ‘ ’ and ‘ ’ where parts of the letterforms would typically collide – like the top of the ‘ ’ and the dot on the ‘ ’. Those are ‘common’ ligatures, whereas others are considered ‘discretionary’ – highly stylistic and ornamental, like ‘ ’.


Numerals are the characters used for numbers. The distinction is that a ‘numeral’ is the visual symbol, and a ‘number’ is the actual value. ‘Old-style’ numerals have beautiful ascenders and descenders, making them ideal for use alongside lower case text. ‘Lining’ numerals are what we’re used to seeing on computers – all characters are the size of a capital letter, making them better suited for use alongside upper case text or in data tables. Just like other letters, numerals vary in width; a ‘ ’ is narrower than an ‘ ’. But when you’re designing data tables or interfaces with rapidly changing numbers (think timers or counters), it’s better to use monospaced numerals. Monospaced numerals (also known as tabular figures) are like code fonts – every character is the same width, making it easier to compare multiple values and eliminating unnecessary movement when values change.

fancy fonT feaTureS When you choose a font and start typing, you’re only seeing a fraction of what the font is capable of. Small caps, discretionary ligatures and alternate characters – often known as OpenType features – are just a few of the hidden capabilities. Most people don’t know that OpenType features are available in Sketch, and even other apps on

Sketch Master These tips are part of Peter Nowell’s Sketch Master courses – take look if you want to further your skills

september 2016 97



ResouRces There are so many resources related to the techniques in this article. Here are several of the most essential ones to help you kick off your own projects. I’ve gathered over a dozen more articles, tutorials, and code examples to help you design and implement beautiful typography (they couldn’t all fit in one article!) – you’ll find the full list at

Glossary of typographic terms FontShop has assembled tons of concise definitions (and visuals) for every typographic term that you can imagine. When you’re confused by an option in the Typography panel, here’s where to find your answer.

unicode character table (with hTML) When you’re searching for any character’s unicode value – or its coresponding HTML entity – this is your one-stop shop. Inserting these special characters via CSS content is also possible, and you’ll find an article about that on the main resources page.

caring about openType features Looking to implement these fancy font features on your website? This article covers exactly how to use the various CSS properties that enable the features, and details when to use them appropriately. These are an easy progressive enhancement for any website, and browser support has become quite good.

What fonts have these features? Generally, fonts made by the top type designers have the most features, although they are often expensive (but worth it!). Playfair is a great free font for trying these OpenType features and special characters out with, as are Hoefler Text and Avenir – which come pre-installed on every Mac.

extra features Within the macOS Fonts panel there’s a hidden menu option to show the Typography panel, providing access to extra font features

macOS like iWork. Using Sketch, enter Edit mode on your text layer and ‘Select All’. Next, open the default macOS Fonts panel by going up ‘View > Show Fonts’. The toolbar within the Fonts panel contains a gear icon menu near the left, featuring a mysteriously named ‘Typography…’ option. That’s where the magic happens! The Typography panel reveals which fancy font features are available for your selected text. For example, at the top you’ll often find a checkbox for ‘Rare Ligatures’ that enables more ornamental letter combinations like ‘ ’ or ‘ ’. There are tons of exciting typographic features that can be included in a font, but here is one more of my favourites: small caps. Small caps are a set of miniature capital letters that are typically the same height as a lowercase letter ‘x’. Using the Typography panel you can convert all lower case letters into small caps, which look great for short captions or the first line of an article.

Things to remember Although these font features are accessible from within Sketch, they can be slightly finicky. Here’s what you need to be aware of: First, when you are turning features on and off in the Typography panel, you may need to wait a moment or hover over the selected text before the changes take place. Second, if you change the font size or weight using Sketch’s Inspector, any fancy typographic features will be reset to their defaults; I suggest adjusting these two attributes in the Fonts panel instead. Changing other font-related attributes (such as colour, character spacing or line height) in Sketch’s Inspector won’t affect your typographic features. Implementing these fancy font features on your website is as easy as adding a few CSS properties, now supported by all major browsers.

SpeciaL characTerS In addition to fancy features like ligatures and small caps, many fonts contain special characters like


september 2016

Sketch dingbats, flourishes and symbols. In the opening image for this article, the bottle, sun icon, and hand gesture are all part of various fonts. When working on your design, there are two ways to access the special characters that have been included in a font. The first is to use Apple’s built-in Font Book app, which allows you to view each font’s ‘Repertoire’ (a grid of letters and glyphs) by clicking on the grid icon in the toolbar. As you scroll past the most common characters (A-Z), you’ll start to see the extended set of ligatures, small caps, diacritics (accent marks), and special symbols that the type designer has lovingly created for nerds like us. When you hover your cursor over a character, you’ll see a little tooltip with the character’s name and Unicode value. Best of all, you can drag that character out of Font Book and into any other app (like Sketch) where you’re editing text. Just make sure that in Sketch your text layer is in Edit mode – denoted by a blinking text cursor – before you drag and drop.

The Characters panel is powerful, giving you access to countless symbols and pictographs The characters panel Font Book isn’t the only way you can access these special characters; most of them can be inserted through the Characters panel. This panel can be accessed within Sketch and throughout macOS, at the bottom of the Edit menu in the menu bar (it’s now called ‘Emoji & Symbols’). If the Characters panel looks small, click the little icon in the topright corner that looks like a window with the ‘ ’⌘ symbol inside – this toggles between a compact and expanded panel.

The expanded Characters panel is powerful, giving you access to countless symbols, punctuation marks and pictographs. Simply double-click one of these characters to insert it alongside your text. A personal favourite of mine is the numero (‘ ’) which is far more elegant than a ‘#’ and more compact than writing ‘Number:’. Click on the gear icon at the top of the Characters panel to customise the list of categories in the sidebar. You can even add Unicode to the list, which allows you to browse every single one of the thousands of Unicode-compliant characters. In other words, this gives you access to pretty much every character you could ever imagine! I also find it useful to drag special characters that I use frequently into the Favorites list, which eliminates the need to search for that character every time you want to use it. When it comes to implementing your design on the web, inserting special characters is easy. Any Unicode character can be used on a website by either referencing the character’s corresponding HTML value or using CSS-generated content with the character’s Unicode hex value. On the resources page I’ve linked to a great website for quickly finding these values for any character, and another website explaining how to implement them in CSS.

font Book This app

contains a repertoire of every character included in a font, which you can then drag-and-drop into Sketch


characters panel This reveals a universe of special characters – including rare letters, pictographs, and Unicode symbols

As you can tell, this article merely skims the surface of each topic. That’s why I’ve made so many mentions of the resources page! It includes a gallery of beautiful examples, selected free fonts packed with OpenType features to try out, my own Sketch project files to pick apart, and many other helpful websites and templates. Happy typesetting!

september 2016 99



1 |








| Y

E | 1 0 T H








0 |1


1 0











1 0


1 0
























1 0












1 0







1 0






















1 0

1 0








AWA R D S 2 0 1 6




1 0


1 0









and win a MacBook Pro







The gadget world's most prestigious event is back and better than ever â&#x20AC;&#x201C; vote for the tech you can't live without!



Standards the measurement. However it does not specify a property for the value, because the number of values might vary between sensors: a temperature sensor might just record the temperature; while a device orientation sensor would record alpha, beta and gamma values.

ConCrete sensors Concrete sensor APIs built on the Generic Sensor API are meant to inherit from those generic interfaces and extend them when necessary. For example, a sensor for measuring the sound intensity would be used like this:

Generic SenSor APi

Philip Ackermann on the API that standardises how we access sensor data There are many different web APIs that define interfaces for different kinds of sensors, such as the Geolocation API or the Device Orientation API. However, those APIs do not share a common interface. They are used in different ways â&#x20AC;&#x201C; one accepts callback functions; another sends events. And as sensor information becomes more and more important, more APIs are likely to follow. Currently in Working Draft, the new Generic Sensor API (www. defines a common interface for accessing sensor information. The central interface is Sensor , which describes a basic sensor type. It defines two methods for starting and stopping the sensor: start() and stop() . The sensorâ&#x20AC;&#x2122;s state is defined in the property state , and the actual value(s) read by the sensor are stored in the property reading . The latter is a kind of wrapper around the measured sensor value. In its generic version it only defines a single property: the timestamp of

Note that whenever a new reading is measured, the onchange event handler is called, where you have access to the sensor-reading object. As mentioned before, this sensor-reading object can have different values. So when using a three-axis accelerometer sensor, it would look like this: let sensor = new AccelerometerSensor(); sensor.onchange = (event) => { console.log(event.reading.timestamp); console.log(event.reading.x); // Value 1 console.log(event.reading.y); // Value 2 console.log(event.reading.y); // Value 3 }; sensor.start();

support The Generic Sensor API is not supported by any browser at the moment. The only Web API already based on it (at least in its current draft) is the Ambient Light API, but there are more APIs on the roadmap. At the Fraunhofer Institute, my team and I are already working on an IoT-middleware in Node.js that implements the Generic Sensor API.



let sensor = new SoundIntensitySensor(); sensor.onchange = (event) => { // In this case event.reading would be // of type SoundIntensitySensorReading console.log(event.reading.timestamp); console.log(event.reading.soundIntensity); }; sensor.onerror = (event) => { console.error(, event.error.message); }; // Start sensing sensor.start();

Philip (@cleancoderocker) is a software engineer working at the Fraunhofer Institute in Germany. He is the author of three books and many articles on Java and JavaScript (


View source files here! All the files you need for this tutorial can be found at

A b o u t t he A u t h o r Photo: Seabass creatives via

DAviD berner w: t: @DaveOrDead job: Senior frontend developer, Campaign Monitor areas of expertise: CSS architecture, JavaScript, usability q: which city has the web community? a: The Sydney dev community is unreal. There is a meetup group for every language, regular conferences and all-round friendly devs


Shed Some light on the Shadow dom David Berner shows you how to craft reusable and shareable components by using the Shadow DOM to encapsulate CSS

viDeo David Berner has created an exclusive screencast to go with this tutorial. Watch along at shadowvid-284


We all start our projects with the best of intentions, but on large-scale projects, CSS always ends up spiralling out of control. We don’t set out to sabotage our future selves, but there are a number of factors at play. As teams grow there are more contributors to the codebase, deadlines pile up and are met with ‘temporary’ quick hacks, which then stack up. Eventually we end up in a quagmire of CSS. That’s not entirely our fault; some of the blame lies with the language itself. The main problems with CSS can be put into four definitive buckets: ● Everything is global ● No style encapsulation ● Specificity conflicts ● Difficulty getting rid of unused (dead) code

september 2016

These factors aren’t an issue for small projects and one-off websites, but once you start building at scale they can quickly grind a project to a halt or prompt one of the dreaded R-bombs: a refactor. Smart people have come up with methodologies – like BEM, SMACSS and CSS Modules – to circumvent this problem, but none are really tackling it head-on. If a previous developer has scoped styles to a base element tag (such as an a link or a button ), no amount of BEM trickery is going to stop those styles bleeding into our new component. It’s usually too risky to go back and change the base styles due to the other dreaded R-bomb: regression. So we end up writing bespoke reset helper classes and crying tears of frustration when the file size of our style sheet becomes gargantuan.

CSS The good news is a solution is in sight via the Shadow DOM – a term you’ve probably heard, but maybe not really explored. You may have used it unknowingly if you’ve ever dabbled with the HTML <video> or <audio> elements. All the internals for those elements are buried in the Shadow DOM by the browser vendors, and now us developers have the opportunity to make use of it as well. The Shadow DOM is one of four W3 specifications that make up Web Components. In essence, these enable you to build your own reusable components to share with other developers or use across your own sites. A good use case for them would be building bits of UI that don’t exist natively (for example, colour pickers, carousels, accordions or type heads). Or

The Shadow DOM is one of four W3 specifications that make up Web Components you might have some components you use all the time across various sites (like social buttons) that you’re sick of rebuilding every time.

An exAmple The basic mechanics of the Shadow DOM can be demonstrated with an example of a component I regularly need on my web apps: a notification, commonly used to convey important information to a user by way of a pop-up message. We’re going to build a pop-up that looks like the one pictured on the bottom right. When I package this component up for another developer to consume, I want to give them the ability to optionally include the heading, descriptive text and Reply button, but ensure there is always a Close button and date stamp. The first thing to do is write up the markup for the customisable content. I have intentionally left the elements classless at this point, to demonstrate how encapsulation works.


DeprecAtion wArning! The Shadow DOM has been kicking around for quite a while and has undergone some revisions over the years. Needless to say, not everything ended up making the cut. When you research online a lot of these defunct terms still come up for the Shadow DOM, so it’s worth being aware of which ones you can ignore. Replacements These have been deprecated, but the new versions haven’t been applied in any browsers yet. Here is a list of the old versions alongside their new variations: ● <content> replaced with <slot> ● ::content replaced with ::slotted ● createShadowRoot() replaced with .attachShadow() Didn’t make the cut These all enabled the consumer of the component to smash into the shadows and go wild with styling. Of course, this went against much of the original idea behind the Shadow DOM, so they all got the chop. ● The ::shadow pseudo selector ● The / deep / combinator ● Everyone’s favourite, the shadow-piercing descendantcombinator >>> I know what you’re thinking about that last one – how could anyone axe a selector with such an eloquent name? Well, I did notice it was mentioned in the CSS scoping specification as of 26 April this year, so it may end up making a resurgence.

<div id="notification"> <h3>New message in #customer-support</h3> <p>Have you guys thought about using Web Components yet?</p> <button>Reply</button> </div> You’ll notice I haven’t provided any markup for the date stamp or Close button. This is because we’ll be tucking these away in the shadows later.

new notification The notification component I’m using as an example in this tutorial

september 2016 103



ADDitionAl reADing Because full cross-browser support for Shadow DOM isn’t quite there yet, we have some awesome polyfills to aid us: ● webcomponentsjs ( A suite of polyfills supporting the Web Components specs ● x-tag ( A Microsoft-supported, open source JavaScript library ● polymer ( Created by the smart guys at Google, this is more of a platform than a straight-up polyfill Here are some useful articles on Web Components, the Shadow DOM and using it today: ● introducing slot-based Shadow Dom Api ( ● the state of Web Components ( ● Slots proposal ( ● how you can use responsive Web Components today ( today-284): Disclaimer – I wrote this one! Finally, there are the official specs. These aren’t always the easiest to read, but they’re a great way to find out what’s in the pipeline. ● CSS Scoping specification ( ● Shadow Dom specification (

Next, we use some JavaScript to add a shadow node to the new element via the attachShadow() API. This currently isn’t supported natively in any browser, so you’ll have to use the older createShadowRoot() version until it is. var notification = document.getElementById('notification'); var root = notification.attachShadow(); // need to use .createShadowRoot() for now Once we have the shadow attached, we can hide away the markup we don’t want to be modified by the consumer inside it. The backticks I am using are ES6 template strings, which enable me to easily create a string over multiple lines. root.innerHTML = ` <div class="wrapper"> <button>Close</button> <slot></slot> <p>1 minute ago</p> </div>`; You may not be familiar with the <slot> element in this snippet. Essentially what this allows us to do is dictate where our consumer’s markup will appear. It works in a similar way to Angular’s transclude functionality. In our case, it specifies the <h3> , <p> and <button> tags from our earlier markup. The other cool thing is that you can name specific slots for each piece of content. For example, you could have <h3 slot="heading">My title</h3> and reference it inside the Shadow DOM with <slot name="heading"> in order to pull the heading into the right spot in the shadows. Currently slots are not supported in any browser, so you will need to use a <content> tag to achieve the same thing. In Chrome DevTools, this will look like the image below left.

Styling theSe bAD boyS In order to apply CSS to our new component, we need to edit the string we attached to our root variable. We simply add a <style> tag containing our CSS above the markup we wrote earlier: root.innerHTML = ` <style> /* shadow DOM styles here */ </style> <div class="wrapper"> […] </div>`;

inside Devtools The <content> tag (soon to be <slot>) allows us to pull consumer-defined content into our component


september 2016

We’ve also got a whole host of cool pseudo-selectors to style different areas inside the shadows. The :host

CSS selector allows us to apply CSS to an element ‘hosting’ a shadow tree (in our case <div id="notification"> ). This selector has the lowest specificity of all, so can easily be overwritten by a consumer. You can also pass a selector to the host with :host($selector) ), which means the style will only apply if it matches the pattern. For example :host(.is-active) would only apply its rules to the host element if it also had the class is-active . Finally, :host-context($selector) matches the host element, if it or any of its ancestors matches $selector . For example, :host-context(.house-tyrell-theme) would only apply styles to the host element if one of its ancestors contained the .house-tyrell-theme class. Many people do site-wide theming by attaching a class to the <html> or <body> elements. With this approach, they can easily include your components in their theme. That covers the new selectors for the element outside the shadows, but what about the elements tucked away inside the shadow root? Still working inside the <style> tag, we can target these directly in the way we normally would. If I write rules for <p> and <button> elements inside the style tag, they will not affect any other buttons or paragraphs on the page. They also will not affect the content inside our <slot> element. This is because styles are scoped to

No external CSS bleeds in, and none of our custom rules are bleeding out the shadow root. This is the most important takeaway from this article. No external CSS bleeds in, and none of our custom rules are bleeding out. We have our desired encapsulation! As the above approach doesn’t affect the elements inside our <slot> tag, a reasonable question is: how do we reach those? We use another new pseudoselector: ::slotted . The h3 , p and button elements that we’ve pulled into our slot can be targeted with :slotted h3 and ::slotted p followed by the relevant rules. Again, these won’t affect any other elements on the page or inside our component.

CuStom pRopeRtieS This is my absolute favourite part of the Shadow DOM. Custom properties – aka CSS variables – are actually able to pierce into the shadows, so you can essentially set up an API by providing a list of variables to your consumer, that they are then able to

modify. So inside my Shadow DOM component I can write the following CSS: button svg { fill: var(--notification-close-button-color, #fff); height: var(--notification-close-button-size, 1rem); width: var(--notification-close-button-size, 1rem); }

Scoped styling Although we have three buttons on this page, only the close cross button is styled. Thanks Shadow DOM!

Take a look at the fill property. Essentially what is happening is that if the --notification-close-button-color variable is set then the button svg will use its value. If it has not been provided, it will use #fff as its colour. Our consumer can then write the following in their external CSS file, and set the variables that would override the defaults we set. Pretty powerful stuff. :root { --notification-close-button-color: orange; --notification-close-button-size: 1.5rem; }

CAn i uSe it? This is the burning question! Everything in this article works natively in Chrome and Opera at time of writing. Firefox has Shadow DOM behind a feature flag, and Safari is working on its implementation. Edge is slightly lagging and you’ll have to vote for it to get the team working on it. In the meantime, you’ll find links for some great polyfills for older browsers in the ‘Additional Reading’ panel (far left). I firmly believe Web Components and the Shadow DOM specification are the future of web development, and as we’re able to play about with them natively today, I encourage you to dive straight in. It’s time to walk in the light.

res ource David Berner recently gave a talk on the Shadow DOM at CSSConf Budapest and ScotlandCSS, the slides for which can be found at

september 2016 105


View source files here! All the files you need for this tutorial can be found at

A b o u t t he A u t h o r

DAniel Zen w: t: @danielzen job: System architect and CEO, areas of expertise: Full-stack JavaScript, agile deployment, best practices q: which city has the best tech community? a: I’ve lived in NYC and San Francisco and loved working in the Bay Area. I’m still curious to know what living in Korea or Japan would be like ...


Build a Material design app with angular 2 Daniel Zen walks through how to create a DialogComponent and to-do app with Angular Material and the Angular CLI

Video Daniel Zen has created an exclusive screencast to go with this tutorial. Watch along at angularvid-284


Angular Material is a UI component framework that implements Google’s Material Design specification for Angular 2 – the new, faster implementation of Angular, written in TypeScript. Although still in alpha, Angular Material already provides a set of reusable and accessible UI components based on Material Design. Angular 2 itself is designed for use across all platforms (web, mobile and desktop), and has many new technologies associated with it. At the JavaScript level we have the additional syntax of ECMAScript 2015 (ES6), typing and interface support from TypeScript, along with decorators from the Metadata Reflection API. It uses observables from the Reactive Extensions library to manage sequences of events in a functional programming way. It uses zones to encapsulate and intercept asynchronous activity to provide a form of thread-local storage, allowing Angular to automagically respond to data changes in asynchronous events to maintain data bindings. Finally, module loading is handled by SystemJS.

september 2016

In this tutorial we are going to use Angular 2 to create a simple to-do app with some signature Material Design elements.

Get set up Setting up the initial environment can be difficult. There is an angular2-seed available, as well as an angular2-starter . However, there is something even better: with angular-cli you can configure your Angular 2 project with a single command. Not only will it take care of the setup for all the technologies I mentioned in the last section (via Node and npm), it will also add in scaffolding for Jasmine unit testing, Protractor end-to-end testing, plus TSLint testing, and codelyzer static code analysis of Angular 2 TypeScript. Although you don’t have to use all of these, you definitely should. It’s so simple to use, you will wonder how you ever got along without it. Angular CLI is available as an npm package, so you will need to install Node and npm globally on your


FoCuS on

MAteriAl Design

to do Our simple to-do app, with Material Design card, toolbar and floating action button, all built in Angular 2

machine using npm install -g angular-cli . Now create a new Angular 2 app with ng new material2-do . You are going to have to wait a little bit, because after it generates the necessary files, it initialises a Git repo and does an npm install to download all the necessary modules into node_modules/ . Take a look at the package.json and get familiar with the modules and scripts there. You have now created a new Angular 2 application that follows the official best practices.

Add MAteriAl desiGn The default app knows nothing about Material Design (an oversight I’m sure), so we have to add

Angular Material already provides a set of reusable UI components based on Material Design it ourselves. You’ll find the full instructions at There is a list of published Angular 2 Material Design packages in the @angular2-material library. In this example we are going to use core (required for all Angular Material 2 apps), as well as button , card , checkbox , icon , input , list and toolbar :

Google’s Material Design guidelines provide a single underlying system for a unified user experience across all platforms and device sizes. As Angular 2 is designed for development across all platforms (web, mobile web, native mobile and native desktop), using Material Design makes more sense than ever. While mobile precepts are fundamental, touch, voice, mouse, and keyboard are all first-class input methods. ‘Material’ is a metaphor for a rational space and system of motion within our devices. Based on the study of paper and ink, as well as shadow and light, it is a virtual representation grounded in a tactile reality. Surface and movement are key to conveying how objects move, interact and exist in space and in relation to each other. Imagine taking a notebook into the Matrix, giving it futuristic, almost magical, capabilities. The visual treatment of elements is founded in print-based design. Material Design features bold use of typography, grids, negative space and colour, and edge-to-edge imagery. It makes core funcitonality immediately apparent – this is most evident with the floating action button (FAB), which usually displays the primary action a user must take. MD is one of the first interface guidelines to make animation and motion a first-class citizen. Motion is meant to reinforce the user as the primary mover; the user’s actions initiate motion capable of transforming the whole design. Use of motion should be meaningful and appropriate, focusing the user’s attention and maintaining continuity. In particular Material Design’s touch ripple effect is an excellent example of motion as user feedback.

Md rules Google’s Material Design guidelines have their base in print design, and feature bold colours and type, as well as clever use of motion

npm install --save @angular2-material/{core,button,card, checkbox,icon,input,list,toolbar}@2.0.0-alpha.5 For the vendor bundle to work, we need to add @angular2-material/**/* to the array of vendorNpmFiles in angular-cli-build.js . We also need to add the path to @angular2-material to the maps object:

september 2016 107



AngulAr 2 coMponent librAries Angular 2 is real, and it’s already starting to make its way into production websites. Written in TypeScript (a superset of EcmaScript 2015), Angular2 can be used with multiple flavours of JavaScript. Besides TypeScript and ES6, it can also be used with plain old pre-2015 JavaScript, as well as Dart. One of the huge advantages of Angular 1 was the availability of many user interface libraries, in particular AngularUI. Nascent Angular 2 has fewer options, but some libraries worthy of note are: ● Angular Material ( Material Design components for Angular 2 apps ● ng2-bootstrap ( Gives us Native Angular 2 directives for Bootstrap ● ng-semantic ( Angular 2 building blocks based on semantic UI ● primenG ( A collection of rich UI components for Angular 2 ● Wijmo ( Commercial components, including FlexGrid, FlexChart and FlexPie ● ng-lightning ( Components for Salesforce’s Lightning Design System ● Vaadin elements ( Material Design-inspired UI components In order for Angular 2 to match up to the rapid environment that AngularJS offers now, it will be necessary for these component libraries to enter production, and for even more of them to become available.

const map: any = { '@angular2-material': 'vendor/@angular2-material' }; Let SystemJS know how to process new modules by pointing to the main files of each of the packages: const packages:any = {}; // put the names of any of your Material components here const materialPkgs:string[] = ['core','button','card','checkbox', 'icon','input','list','toolbar']; materialPkgs.forEach((pkg) => { packages[`@angular2-material/${pkg}`] = {main: `${pkg}.js`}; }); Now it’s time to load the Material Design icon font in the <head> of src/index.html . Any font will work, but we are using the standard Material Design icons: <link href=" icon?family=Material+Icons" rel="stylesheet">

CreAte An Md diAloG We can now work with Material Design in our to-do app. One of the components currently missing from Angular 2 Material Design is a prompt or dialog, so for our first task we will make one! Let’s create a new component using a Material Design card, a toolbar, an input and a couple of buttons. In the src/app folder of your repo, type ng generate component dialog . This generates a new DialogComponent in src/app/dialog , and adds a barrel to system-config.ts so SystemJS knows how to load it. If you look at the generated dialog.component.ts file, you will see the first line is: import { Component, OnInit } from '@angular/core'; . Component is one of the main building blocks of Angular, and OnInit is one of the interfaces it implements. However, in order to have access to communication between nested components, as well as the Material Design components mentioned above, we need to import Input , Output and EventEmitter from @angular/core ; and MdCard , MdInput , MdToolbar and MdButton from their corresponding modules in the @angular2material library. To render these Material components, we need to inject the directives our DialogComponent requires. We will add the following directives to the @Components metadata: templateUrl: 'dialog.component.html', directives: [MdCard, MdToolbar, MdInput, MdButton], styleUrls: ['dialog.component.css']


september 2016

Angular We then declare a number of @Input variables ( okText , cancelText and so on) that allow us to define the contents of the dialog. We also need to add one @Output emitter that allows us to trigger a function with a value in the parent component when the dialog is closed. Now we can replace the generated constructor in dialog.component.ts with the following code: constructor() { this.okText = 'OK'; this.cancelText = 'Cancel'; } emitValue(value) { this.valueEmitted.emit(value); } As well as using the @Input variables inside our DialogComponent within the dialog.component.html template, the md-input allows us to accept input from the user: <md-input class="full-width" [placeholder]="placeholder" [(ngModel)]="value" #dialogInput (keyup.enter)="emitValue(value)" (keyup.escape)="emitValue(null)"></md-input> The md-buttons allow the user to click ‘OK’, ‘Cancel’ or whatever you decide to label these buttons: <button md-button (click)="emitValue(null)" color="primary"> {{cancelText}} </button> <button md-raised-button (click)="emitValue(value)" color="primary"> {{okText}} </button> Notice the keyup event handlers, which take care of things when the Enter or Escape key is pressed. These handlers are identical to the click event handlers for cancelText and okText . Escape does the same thing as cancel ( emitValue(null) ), and hitting Enter will have the same result as clicking OK ( emitValue(value) ). This allows us to prompt the user for a value via an md-input , and receive emitted output. We can see examples of a number of Material Design components: md-card , md-button , and so on. We also need to add some CSS in dialog.component. css in order to achieve the layout we desire – you can view the full code in the accompanying GitHub repo. Now let’s add this DialogComponent to material2-do. component.html to see what it looks like:

<app-dialog [title]="'Dialog Prompt'" [template]="'This is our new Material Design based Component:'" [placeholder]="'Enter text here'" [okText]="'Yes'" [cancelText]="'No'" [value]="'Starting Text'" (valueEmitted)="log($event)" [showPrompt]="true"> </app-dialog> Notice we have literal strings for all of the @Inputs . These require us to use both single and double quotes, otherwise Angular would interpret the contents as a variable name in the Component scope. We also have the one emitted @Output . This makes the dialog simple and extremely configurable. Most of the inputs would have defaulted to empty strings if omitted.

The keyup event handlers take care of things when Enter or Escape is pressed Let’s modify Material2DoComponent . We need to import DialogComponent and declare it as a directive, otherwise Material2DoComponent will not be able to render it. We will also add the log function: log(text) { console.log(text); } Let’s take a look at our handiwork. You can serve up the app (the default port is 4200) by running npm run-script start , which in turn runs ng server . You should see a prompt that looks like the one shown overleaf. If you open up the console, you can see what is logged: the contents of the input is emitted when you click ‘Yes’, and null is emitted when you click ‘No’. We are now ready to use this new DialogComponent to create our to-do app.

CreAte the MAin App We are going to use the following MD Components for the main app: toolbar , list , list-item , checkbox , button , icon , icon-registry , and its dependent, HTTP_PROVIDER , from the Angular HTTP library. So these need to be added to the import section of Material2DoComponent .

september 2016 109

PROJECTS Angular title = title.trim(); if (this.editingTodo) { this.editTodo(title); } else { this.addTodo(title); } } this.hideDialog(); }

dialog prompt Our Material Design-style dialog box

Once again, in order to be able to render these components, we need to include them in the @Components metadata directives array along with DialogComponent , which we just added: directives: [MdCard, MdToolbar, MdList, MdListItem, MdCheckbox, MdButton, MdIcon, DialogComponent], To gain access to the MdIconRegistry , we need to inject it, along with HTTP_PROVIDERS , via the @Components metadata providers array:

In material2-do.component.html we’ve given our application an md-toolbar where we have put the title, and an md-icon called add (which looks like a plus sign) for our floating action button (FAB), which allows us to create a new task: <button md-fab class="fab-add" (click)="todoDialog()"> <md-icon>add</md-icon> </button> We use md-card-content to hold an md-list and an *ngFor to iterate through, and display, our todoList array as md-list-items : <md-list-item *ngFor="let todo of todoList; let index=index">

providers: [MdIconRegistry, HTTP_PROVIDERS], Now we leverage our DialogComponent , adding in enough logic for a simple to-do application. The todoDialog is called to open our dialog, either with the task to edit ( todo ) or null if we are creating a new one. We set up the default variables for a new task, or if we are editing a task instead we change them accordingly. We then show the DialogComponent by setting the showDialog variable to true :

reSourCe Since Material Design is a specification, there are multiple implementations. Another way to use MD in Angular 2 would be Michael Seeman’s Angular 2 Material Design Lite:


todoDialog(todo = null) { this.okButtonText = 'Create task'; this.fieldValue = ''; this.editingTodo = todo; if (todo) { this.fieldValue = todo.title; this.okButtonText = 'Edit task'; } this.showDialog = true; } The updateTodo function is called when we wish to close it. The other functions ( editTodo , addTodo , hideDialog ) are helper methods for updateTodo . updateTodo(title) { if (title) {

september 2016

md-checkbox enables us to tick off items on our list. And we have two md-mini-fab buttons we can use to delete and edit our task: md-icons delete_forever and mode_edit : <button md-mini-fab (click)="remove(index)" color="primary"> <md-icon>delete_forever</md-icon> </button> <button md-mini-fab (click)="todoDialog(todo)" color="primary" [disabled]="todo.completed"> <md-icon>mode_edit</md-icon> </button> With a little CSS, these remain hidden until you rollover (or click). You can see the code in the repo.

GoinG forWArd As Angular Material 2 is still in alpha, there are some things missing – in particular, the signature MD button ripple effect. While there may be breaking changes to the API ahead, it is very much functioning. It also lives up to the claim of having a straightforward API that doesn’t confuse developers, and is easy to leverage for the creation of great looking applications.

Head to head

HeAd tO HeAd

A b o u t t he A u t h o r

r Ay Vil l A l obos w:

t: @planetoftheweb job: Senior staff author, areas of expertise: Frontend design, fullstack development q: which city has the best web community? a: Nova Scotia. I walked into a burrito shop there and someone recognised me from my tutorials ... instant respect

NW.js vs ElEctroN

Ray Villalobos takes a look at two of the most popular open

source frameworks for turning your existing web skills into apps NW.js


The father of web technology-based app development, NW.js ( started it all and offers support for browser features, Node.js APIs and JavaScript source protection. Electron ... I am your father!

Sometimes kids rebel, fork projects and branch out on their own. This is was the case with Electron ( The question is, will the student become the master?

legAcy The older of the two projects, NW.js started out as something called node-webkit. There’s a strength to being first to market and NW.js has support for some features not available in Electron.

Electron started life when a developer from NW.js created a tool for developing the Atom editor. Released three years after NW.js, it recently achieved version 1.0 and has a solid set of tools.

FeAtures The frameworks are pretty close, but because it’s been around longer NW.js has a few more features. It supports XP and SSL, as well as more browser features like Chrome apps and Chrome APIs.

Although Electron has been around less time, its features are pretty much on par with what’s available in NW.js. It supports Windows 7+ and has some better updating features and built-in App Store support.

ApprOAcH NW.js was originally built as a way to take advantage of the browser, so it relies more on the browser. The point of entry is an HTML page and you have better access to browser windows, tools and features.

Electron has tighter integration with Node.js, so the point of entry is a ‘.js’ file. Users can access Chromium through a single module, so your machine doesn’t need to be as powerful.


FAct File Quickstart Electron has an excellent interactive demo application that is a great way to kickstart your own projects. MOBiLE aPPs These platforms are designed for building desktop apps. If you’re looking to build mobile applications using web technologies, have a look at Ionic or React Native.

The NW.js framework offers a Google group as well as support through Gitter. There’s a lot more open issues (over 1,500), as well as fewer commits and fewer contributors (70) so progress is a bit slower.

Electron has Slack as well as discuss channels that are part of its larger GitHub groups. It’s definitely a lot more active in GitHub, with under 300 issues and over 400 contributors.

pedigree Being older, the list of apps NW.js has helped build is definitely longer (, but I couldn’t recognise most of them. I did see the TweetDeck desktop app and the Kindle Cloud Reader.

Electron has been used for a lot more recognisable apps ( from companies including Slack, WordPress and Basecamp. The apps seem to have a more uniform and native look and feel.

Verdict NW.js offers a bit more support for browser features, so if building things like Chrome apps is important, it’s the better fit. If you’re comfortable building Node.js apps, Electron will feel more natural and has the edge in terms of support and momentum – plus it helps that it’s backed by GitHub. Winner: I am Electron, like my father before me.

september 2016 111

Hosting Partners

Key hosting directory

contact us To advertise here, contact our sales team: +44 01225 68 7832

Featured Host

Catalyst2 is an award-winning

best possible performance,

managed web hosting and

proactive support and

fully managed dedicated

maintenance, migration from

server provider based in the

your existing servers, and a

UK, specialising in Linux and

dedicated account manager.

Windows web hosting.

As one of the UK’s most experienced hosting companies, Catalyst2 has built a stable, reliable and well-supported hosting platform that has provided dependable hosting for the last 16 years. Contact the team today to find out more.

Catalyst2 offers a unique solution called Managed Hosting Plus. This comes with all of its managed dedicated servers, and includes server management, backing up the server offsite, securing the server, optimising your application to provide the

“In 15 years of web development I’ve used countless numbers of hosting providers. Catalyst2 have surpassed all others in terms of support, server performance and ease of use. I wouldn’t hesitate to recommend them.” Eliot Webb, Director, Nordic Creative Limited

contact 0800 107 79 79 / WHat catalyst2 oFFers ● Shared web hosting: For both Linux (PHP / WordPress etc) and Windows (ASP and ASP.NET)

● Managed dedicated servers: Fully managed servers

expert tip

server tip... When looking at managed dedicated servers, check that everything you need is covered within the price. Do they include all security updates, monitoring, offsite backups, UK-based support, hardware and software firewalls and migration to the server as standard?

available, located in the UK and set up within 24 hours

● Email-only hosting: POP/IMAP and Exchange mailboxes ● Award-winning service: Winners of ISPA Awards for customer service in 2013, 2014, 2015 and 2016

● Freephone support: UK-based servers and a UK-based team ● Reliability: 99.997 per cent network uptime since May 2007

Advertisement 2020Media

1&1 internet

2020Media is small enough to care, large enough to cope. Free

1&1 Internet is a leading hosting provider enabling businesses,

site migration from any host and 12 months managed WordPress

developers and IT professionals to succeed online. It offers

is included with all WordPress hosting plans. The firm is known

a full product range, from domains and website building tools

for its knowledgeable, excellent service to agencies, designers,

to hosting packages and powerful cloud servers. 1&1 prioritises

developers and small businesses across the UK.

customer security, including SSL certificates with most products.

0800 035 6364

+44 (0) 333 336 5509

cyber Host Pro

Heart internet

Cyber Host Pro has been providing UK web hosting services

As one of the UK’s leading web hosting authorities, Heart

for over 15 years. It offers super-fast SSD, high-bandwidth web

Internet focuses on designers, developers and technically

hosting, and is optimised for WordPress. Visit the website to view

adept businesses. It builds on our four tenets – speed, reliability,

the website hosting, reseller hosting, cloud and dedicated servers

support, and security – to create award-winning solutions for

– plus get a 20 per cent discount for life (code: NETMAGLIFE).

over 500,000 customers.

0845 527 9345

+44 (0)330 660 0255

netcetera Netcetera provides hosting from one of Europe’s most energy-

advertise here!

zero-carbon solutions for businesses of all sizes.

Would you like to promote your hosting business & services to our audience of professional web designers and developers? If so, please call or email Chris as below.

0800 808 5450

reasons to advertise

efficient datacentres. It offers everything from reliable low-cost hosting for single sites through to complex cloud, racks and managed IT solutions. Netcetera has a large portfolio of green,

● Reach professionals – 75 per cent of readers are working in or seeking work in the web industry

● Variety of projects – future projects include mobile apps, web apps and CMS-driven sites

● Home workers - 51 per cent have a personal website under development

contact +44 01225 687832 /

PROJECTS Accessibility


Fringe accessibility Adrian Roselli talks through some well-known

techniques that have hidden benefits to accessibility There are a number of techniques that many of us know and use, but don’t seem to get credit for their benefits to accessibility. I call this ‘fringe accessibility.’ In this article I’m going to take a closer look at some of them.

Top Tips

Beyond Tech Perhaps the most important of all these isn’t technical: share your accessibility experiences. You don’t need to blog about it, but include things you have learned in bug reports, pull requests, tech support updates, social media and so on. Even if you feel it is mundane, you may be teaching someone who was completely unaware.


One of the easiest steps to take is to make sure interactive items are obvious. For hyperlinks, keep the underlines – these convey the purpose clearly and mean you do not have to stress about colour contrast. In addition, use a focus style for all interactive items. This helps users tabbing through the page and is as easy as adding the focus selector to your existing hover styles. If you are not sure which interactive elements to use, some tips: For a link to another URL (including an anchor), use a hyperlink. If you are changing something on the page, use a <button> . If you are submitting a form, use a submit button. If you find you need to use tabindex somewhere, first identify if a native interactive element would work better. One exception might be when you have scrolling content boxes, or elements that only show content on hover – you may need a tabindex=0 to give keyboard users access. Even then, do not

use a value greater than 0, as this will break the natural order of the page. Use headings to impart structure. Don’t skip levels, and don’t use <h1> for everything throughout. Treat headings like an outline of your content. Similarly, make sure you use the <main> element, but just once on a page. Proper use of headings and <main> allows some users to jump right to chunks of your content. As you are reviewing your page structure, pay attention to source order. Floats, absolute positioning, Flexbox and CSS Grid can all change the page flow, so be aware of this. Some other simple steps you can take: Set the lang attribute on <html> . Don’t disable zoom. Use captions and subtitles for audio and video, including obvious links to transcripts. Avoid infinite scroll.


september 2016

Adrian (@aardrian) is an invited expert with the W3C, has written some books, founded and ran a software development company for 20 years, and even co-founded

Projects Create UI elements with React Build a prototype app with UXPin Quickly produce web apps with HyperDev Implement beautiful type in Sketch Craft components via the Shadow DOM



Make a to-do app with Angular 2

0800 1 777 000

Net 2016 284 september