Issuu on Google+

The voice of web design

Issue 278 : April 2016 :


Apply dramatic effects to your websites




editor’s note

A couple of months ago I made a call to use design (and development) as a force for good. This issue we have a few brilliant examples of just how it can make a difference. We profile Hactar, a product and service design agency specialising in helping grow organisations with a social conscience (p58), which was shortlisted for a net award last year. And we also interview Rachel Inman, a user experience designer at Google, who is on a mission to try and make the world just a tiny bit better than how she found it (p32). We also have some great goodies for you: readers can try out ZURB’s new feedback app Notable for one month free (p100), and we have teamed up with

Webflow, one of our 10 best prototyping tools for 2016 (see issue #276), to give you a 20-page guide all about responsive design. If that’s made you hungry for more, check out our brand new Responsive Web Design Handbook: Vol 2, which – over 228 pages and 20 practical projects – covers pretty much everything you could wish for about designing for multiple screens (flick to p93 for a sneak peek). All of this knowledge can be used to make a change. Do it if you can.

Oliver Lindberg, editor

Featured authors Louis L az aris

Jordan Moore

Wren L anier

dudLe y store y

Louis is a frontend developer, a managing editor at SitePoint and curator of Web Tools Weekly. From page 68 he lists 50 amazing free tools for web pros w: t: @ImpressiveWebs

Jordan is a freelance user experience designer specialising in responsive web design and mobile technologies. From page 76 he dives into living style guides w: t: @jordanmoore

Wren is a UX designer with a passion for creating beautiful digital products. This issue, she curates our gallery of great new sites (p44) w: t: @heywren

Dudley is a designer, teacher and author from Calgary. On page 84 he explains how to use CSS blend modes to create exciting effects w: t: @dudleystorey

april 2016 3


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

editorial editor Oliver Lindberg, Production editor Ruth Hamilton, art editor Rebecca Shaw, Commissioning editor Julia Sagar, deputy commissioning editor Sammy Maine, staff writer Dominic Carter, staff writer Alice Pattillo Creative BloQ global editor-in-chief Dan Oliver, managing editor Craig Stewart, Content manager Kerrie Hughes,

editorial ContriButions Gemma Ballinger, Michelle Barker, James Bates, Simon Carr, Antony D’Andrea, Michael Dowell, Martin Hughes, Galya Iliev, Sam Kapila, LeeAnn Kinney, Wren Lanier, Louis Lazaris, Jordan Moore, Jon Nemeth, Steven Pemberton, Matt D. Smith, Dudley Storey, Robert Stulle, Joe Warren, Dan Willis, Matt Willmott

art ContriButions

Ben the Illustrator, Daniel Byrne, iStock, Ben Mounsey, Tobias Hall


Content and marketing director Nial Ferguson, editorial director: games, photography, creative and design Matthew Pierce, group art director Rodney Dive

advertising advertising manager Sasha McGregor CirCulation trade marketing manager Juliette Winyard ProduCtion Production controller Nola Cokely Production manager Mark Constance

liCensing senior licensing and syndication manager Matt Ellis

neXt issue on sale 17 marCH 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

april 2016


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


COVER Pacesetter gloss 250gsm P3-82 galerie Fine 100gsm P83-114 grapholvent 70gsm


antonio, share tech, merriweather, titillium Web


Editors' Choice

worldwide customer rating

Design. Redefined.

AFFINITY DESIGNER Professional graphic design software for Mac Affinity Designer is the fastest, smoothest, most precise vector graphic design software for Mac available. Whether you’re working on branding, websites, icons, UI, or creating concept art, Affinity Designer will revolutionise how you work.

No subscription. Free updates. Try for free now at:

contents Issue 278 : April 2016 :



siDe proJect of the month 16

John brown created a gallery of artistic CSS animations, adding a div each day

clients from hell


beYonD piXels


neeD list


eVent report




gemma ballinger shows us her favourite things in Studio Output’s workspace, including the team’s own artwork

a manager fails to grasp the efforts behind getting his site to the top of Google

Creative michael Dowell spends his downtime whittling spoons from wood

Stuff we want, including a calendar app that lets you see what’s round the corner

Joe Warren travels to Florida to bid an emotional farewell to JSConf

voices inspect anD aDapt


robert stulle on how to introduce an agile workflow in an agency environment

Digital-first branDing

James bates wonders why digital still comes second when building a brand


Delight isn’t a Design goal 37

Dan Willis explains why specific goals are required for successful projects

big Question

How do you approach a responsive redesign? We asked the experts



april 2016



Google UX designer rachel inman talks about designing products that help people, artistic expression and breaking down barriers in the office


tinder project manager scott hurff chats about designing products people love



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? See page 51

Contents rEgular



Wren lanier runs down the best new websites around, including a hip clothing collaboration inspired by basketball

RegUlaRs netWork




the latest mail, tweets, posts and rants

andy booth, Marko Dugonjić, Jeremiah shoaf and bruce lawson share their advice


free Notable

30-day trial See page 100

Design challenge


focus on




hoW We built


designers mock up hairdresser sites

sam kapila looks at SvG animation

We chat to the founders of hactar

a synaesthetic experience for an orchestra

PRoJects css blenD moDes




responsiVe uX


Dudley storey explains how to use CSS blend modes to create dramatic effects


galya iliev runs through 10 Sketch tools to help you create pixel-perfect designs

50 amazing free Web Design tools 68

liVing stYle guiDes

louis lazaris reveals 50 high-quality tools to help you in your web design projects – and they’re all free

Jordan moore runs down the benefits of a great digital style guide, and explains how to create one



animate a character With createJs 104

martin hughes explains how to animate a character in Flash, powered by JavaScript and CreateJS

ExCluSIVE VIDEO tutOrIalS! look out for the video icon in the tutorials for exclusive screencasts created by the authors

matt D. smith on how to use illustrator to master wireframing for responsive designs



Web stanDarDs






ZUrB’s Jon nemeth shows you how to use notable to add feedback to your designs

steven pemberton argues that HtMl5 is holding back the web

antony D’andrea explains how to build a custom plugin that sends feedback to Slack

leeann kinney on hidden disabilities

april 2016 7

Mail, tweets, posts and rants contact us


Call to aCtion I was flipping through the February issue of net and your editor’s note caught my eye. I recently turned down a full-time job offer at Clearleft to explore how design and technology can help refugees prosper in Europe. Andy, Rich and Jeremy have been kind enough to let me rent a desk



at Clearleft while I get Prosper ( off the ground. I really liked your call to use design as a force to make a difference. We’ve grown a community of digital workers from around the world who are working together to build an opensource platform that is a central database of refugee crisis initiatives. You’re playing a wonderful role in a great magazine with readers who might be interested in what we’re doing.

John Ellison, Brighton, UK

Oliver Lindberg: That’s fantastic to hear! I’m glad my note resonated with you, and Prosper looks like a great project. We also welcome messages from other readers telling us how they are making a difference in the world.

Making a change Prosper is a community of digital professionals aimed at helping refugees in Europe


april 2016

Bad Branding I was wondering how you (or other net readers) deal with clients that have ancient and badly done branding, but want a modern website? I’ve been finding this a lot lately with work I’m doing. I think it’s near-impossible to get a nice, up-to-date design when the branding the client provides is dated. I get very frustrated and start doubting my skill, but deep down know it’s because the colours, logo etc. are already there and aren’t nice to work with. Not all clients want a rebrand, so their websites suffer because the branding is so old!

Kieran A, Glasgow, UK

net: Thanks for your letter Kieran. It’s certainly a tricky situation. We asked Clearleft’s James Bates for his thoughts: “I’d suggest having an honest conversation with the client. Express your concern that you don’t think their existing identity has enough flexibility to allow them to be presented in the way they want. The key here is what they want. We’re not designing for ourselves, and whilst it might not be our preference aesthetically, it may still meet the client’s brief.

If they agree, consider using the site design as a vehicle for suggesting improvements to their identity. It may even lead to some further work.” It’s also worth checking out James’ article on page 28, in which he explores why branding should be tackled digital-first, for more tips on updating client branding.

StaCk Breakdown I was wondering whether you might be able to write an article on different stacks companies use to manage their workflow. Rather than listing all of the tools (there could be dozens), you could focus on the headline tools. Quite often developers and designers in your articles mention tools in isolation, so it would be helpful to see the whole throughput, and perhaps some of the decision-making process behind why they set up the stack they did, and how it benefits their customers.

Robin Waite, Stroud, UK

net: Thanks for your suggestion, Robin. That’s a good idea! For now, you might like to check out The Complete Web Design Toolkit ( and for tips on building a great stack.

Network tHE PoLL

Which broWser do you use for development? 3% safari Safari offers Reading List features that some find useful. However, there are no favicons and you can only call back one recently closed tab via hotkey, which can be tiresome

1% opera The simple, lightweight Opera is still an underdog – but now you can use Chrome extensions with it, things may be looking up 1% Microsoft edge Microsoft Edge has introduced new tools built in TypeScript that do not require reloading. Devs still need convincing though

26% Firefox Firefox has crept up as a favourite over the past year or so. With the dedicated Developer Edition, you can build, test, scale and more all from one place

69% chrome With smooth Google Apps integration and no ad or tracker blockers, Chrome reins supreme. Android syncing makes this a hit among anti-iOSers

From our timeline

Why is user-generated content worth the effort for small companies? Unless your business is truly awful you should have more users than staff – therefore more content. @inpocketdev It sells the product/ service from the user’s perspective. @muzzlehatch_ Writing skills need to be honed before you get a big audience. @sladedesign

When done right – it can go oh-so-wrong – this is the path to global exposure (Reddit, etc). @nonswearyphil Because it’s cheaper! @Gary_SmallSEO

It creates a wider sense of customer value and inclusion, and it covers an aspect of market research. @JohnnyMcCauley2

Genuine UGC is the best way to give your product or service authenticity in your target market. People relate to real people. @barrymcgee It takes away the time needed to manage site content manually – time that can be used to grow and invest in the business. @mezzarino Asking your users for content will cut down resource costs for content marketing – just be sure to reward them for their input! @123reg

cool stuff We learned this month Feedback loop

When is web design critique useful, and when is it damaging? In this article, Facebook product designer Tanner Christensen explains how the social media company constructs its critique sessions to ensure they remain valuable and effective. Sure to get the thumbs up from design teams everywhere. Who Needs MarketiNg?

This blogging omnibus charting how Stuart Hall built a health and fitness app in just six hours – which then went on to generate 2.3 million downloads and a full-time salary – sounds too good to be true. But here he details the process from day one, and reveals how the app relied on a good story to sell itself. es6 Made easy

Still haven’t learnt ES6? Eric Elliott explains why it’s about time you did, and explodes some of the common excuses people give for putting it off. On top of that, he’s also curated a master-post of resources, including blogs, videos and tutorials, all of which will help you hit the ground running.

april 2016 9

Send your questions to This monTh feaTuring... Andy Booth Andy is senior designer at Telegraph Media Group in London w: t: @theandybooth

practical advice from industry experts


Should I use a carousel on my ecommerce site? Dan Davies, North Wales, UK

Marko Dugonjić Marko is the founder and UX director at Creative Nights and Typetester w: t: @markodugonjic

JeremiAh ShoAf Jeremiah is a freelance designer and creator/ curator of Typewolf w: t: @typewolf

Bruce LAwSon Web developer Bruce is an advocate of the Open Web and lurid hair dye w: t: @brucel

Invisible content Studies show users tend to engage less with content that’s not immediately visible

MD: Ideally, no. Studies have demonstrated that users miss content on carousels, with items that aren’t immediately visible often being engaged with less. My suspicions are that users perceive automatic movement on a page to be advertising. A fully accessible carousel can also be difficult to develop, especially if keyboard access support is required. If you really need to present content in a similar way visually, consider using a slideshow – it’s less obtrusive and places the user in control. Alternatively, simply look to vertically scrolling content! Web typography

Js: This depends on your target audience

Grotesque, Exchange, Proxima Nova and Tungsten Rounded. Using seven typefaces is extreme; however, I think it made the design highly engaging and helped to unite Wired’s branding across print and the web. Obviously you need to always keep performance in mind, but if you have a tech-savvy audience

as well as your skill as a designer. The redesign of Wired featured seven font families: Ambroise, FF Oxide, Brandon

and stick with a consistent typographic system, there is nothing wrong with mixing multiple font families.

Type rules What’s the maximum number of fonts that should be used on a web page? are fonts with lots of line-weight variation still the way to go for noobs?

Bryan Lopez, Denver, US


april 2016


3 simple steps What’s new in web typography for 2016? Clarice Gomes, Toronto, CA ‫‏‬

JS: Here are three trends in type that I’ve been noticing lately and that I expect to see more of throughout 2016 ...

Type rules Wired’s ambitious new website typography scheme includes seven font families

Heavy SerIfS


<nav> eleMenT Which htML5 element keeps you up at night as you try to better understand how to use it correctly?

Kevin Lozandier, New York, US

Bl: None now – but when I was writing Introducing HTML5, I did lie awake thinking about <nav> . I changed my advice between first and second editions: basically, only use it for the most important navigation. It’s useful for screenreader users, and having loads of <nav> blocks on a page diminishes its utility. It’s a good example of how realworld usage trumps theoretical purity, and that’s why HTML5 won and XHTML 2 was drowned in a bucket at W3C.

with key stakeholders and understand the challenges they’re facing. htML5

HouDini proJecT ordinary developers increasingly have access to similar abstractions as browser engineers. What do you wish such devs had control of?

Kevin Lozandier, New York, US


Bl: I’m excited by the Houdini project, which aims to add extensibility hooks to CSS so you can take advantage of all the heavily optimised, performant behaviour built into browsers. It also allows you to override things when you want and change how CSS works or invent your own layout models. At the moment CSS is a ‘black box’ for web developers – this will change that. See for an introduction to Houdini.

What kind of languages do you need to know to become a UX designer?



Lawrence Agyei, Chicago, US

Heavy, high-contrast serifs such as Noe Display will continue to become more and more popular, as high-density displays are better able to render the fine lines of serifs like these.

Playful SanS-SerIfS

Quirky, geometric sans-serifs such as GT Walsheim are trendy at the moment. This style of typeface takes the geometric model of Futura and adds a few playful touches, creating warmth.

FuTure opporTuniTies

MD: The core languages of the web are HTML, CSS and JavaScript for frontend coding; and PHP, .NET, Ruby, Python, Perl, Java and the like for server-side coding. Whilst familiarity with some of these languages certainly helps, the most important skills one needs to develop as a UX designer are empathy and

What do you see as the biggest ecommerce opportunities in 2016? the low-hanging fruit? the most exciting?

communication. To achieve set project goals, you must first and foremost get to know your customers, collaborate

Ben Seymour,‫‏‬Oxford, UK

TyPe dIverSITy

aB: The rise of shopping on your mobile is old news now. It will continue to grow predictably and there is no turning back. The challenge is to predict the next step.

I think we’ll see a more diverse use of type on the web in 2016. People are sick of seeing the same small handful of typefaces used everywhere. Typewolf is

Virtual reality is still majorly underdeveloped, but I think a hidden gem is flash sales. Ecommerce sites need to be

a great place to discover new typefaces from indie foundries.

april 2016 11

exchange Q&As treated like a real live environment, and a big opportunity is to advertise a sale when your site is busy. Sites like Groupon have had their moment, and retailers are starting to become more reactive with social media. How special would a customer feel if they were suddenly offered a pop-up deal on the product they were interested in? A quick reaction to site traffic equals a quick sale. landing page Perceived trustworthiness is important in ecommerce. Which site would you choose?

Web typography

non-sTanDarD FonTs What’s the best service to use to add non-standard web fonts?

Craig Thacher, Oxford, UK

Js: I’m a big fan of self-hosting web fonts. If you are relying on a service such as Typekit or Google Fonts and their servers go down, the type on your site will go down as well. Some designers seem to think self-hosting is complicated but it really isn’t. Most places where you purchase fonts will provide you with a self-hosting kit that is surprisingly easy to set up. Many indie foundries only offer self-hosting so you’ll have a much wider range of type choices as well. ecoMMerce

sale conversions What’s the best way to test and improve sales conversions?

James Hall, Leeds, UK

aB: Test, test and test again. Run through your checkout flow, or test the process by buying something. You need to treat it as a customer and look out for anything that could put you off – poor-quality images,

too many checkout questions and small buttons are just a few examples. Another trick I’ve learned is to ask users to find a product on your site without using the search bar. You’ll be amazed how differently people think compared to you when browsing a site.

distractions or email signups (unless that’s what you want users to do). If you are an unknown site, you will be judged on how trustworthy you are. So, clean and clear trumps a busy page. UX

researcH MeTHoDs htML5

WeB coMponenTs What are your thoughts on the process of standardising new elements being more democratic, with what the Web component specs enable?

Kevin Lozandier, New York, US

Bl: Web Components don’t standardise new elements; they simply allow you to define them. Your <woo-groovy> element may be completely different from my <woo-groovy> element. There’s no built-in browser UI for custom elements (as there is for <label> or <em> or <input type="range"> . Therefore, I worry that we may get hundreds of nearlyidentical web components sprinkling UI sugar over ‘real’ elements (e.g. for custom date pickers or carousels) with little or no support for non-JavaScript browsers or accessibility.

What methods do you use to conceptualise systems from a high level?

Luke James Taylor, Sheffield, UK

MD: Thorough research is imperative! This includes user and stakeholder interviews, audits, analysis and plenty of reading. In understanding project goals and constraints, concepts will start revealing themselves. On a tactical level, nothing beats a good design workshop or week-long design sprint (read Google Ventures’ thoughts on the latter: www. Rather than generating ideas from thin air, conduct collaborative activities with team members and stakeholders. The best tools are often a Sharpie and paper, a whiteboard and markers, and lots of sticky notes.


lanDing pages If you could focus on one thing to improve conversions, what would it be?

Clive Walker, Horsham, UK

aB: The landing page. The average user will make up their mind if they trust your website within three seconds at best Sale conversions Insights can be gained by watching users locate a product without using the search bar


april 2016

– so you better hope your page is fully loaded, and shows off what you are trying to sell. Don’t hide it behind unnecessary

research methods Week-long design sprints are the latest workflow approach from Google Ventures



£ .99 4.99 From

per month* excl. 20% VAT




NEW! Full SSD webspace NEW! Full SSD databases ■ NEW! PHP 7 with OPcache ■ Unlimited traffic ■ Unlimited e-mail accounts

NEW! 1&1 DDoS Protection on NGINX for even more performance, reliability and top security ■ Geo-redundancy: Parallel operation in physically separate data centres ■ 1&1 CDN ■ 1&1 SiteLock

■ ■





NEW! 1&1 WP Wizard: Personalised user guide for installation and design ■ Ready-to-use templates included ■ 24/7 support ■ 1&1 WP Expert Support ■ 1&1 Community




0333 336 5509 * 1&1 Managed WP Basic from £0.99 per month with 12 month contract term and 1 month billing cycle with payment in advance. Some features listed are only available with 1&1 Managed WP Unlimited from £6.99 per month. Prices exclude 20% VAT. Visit for full offer details, terms and conditions. Rubik’s Cube ® used by permission of Rubik’s Brand Ltd. 1&1 Internet Limited, Discovery House, 154 Southgate Street, Gloucester, GL1 2EX.

New york 22 April 2016 Learn cutting-edge CSS, JavaScript, user experience and web performance techniques, and much more!

cameroN moll

DaN mall

sarah DrasNer

uNa kravets

DesigNer aND author

creative Director

seNior uX eNgiNeer


tickets oN sale Now

People, projects & paraphernalia

This monTh FeaTuring...


John Brown created a gallery of artistic CSS animations, adding a div each day


Creative Michael dowell spends his downtime whittling spoons from wood




Need LiST


A manager fails to grasp the efforts behind getting his site to the top of Google

Stuff we want, including a calendar app that lets you see what’s round the corner





Gemma Ballinger shows us her favourite things in Studio Output’s workspace

Joe Warren travels to Florida to bid an emotional farewell to JSConf

april 2016 15


Side project

100 DAyS of N DIvS John Brown added a div each day to create his gallery of artistic CSS animations Side project of the month

Info job: Technical director, Instrument w: t: @thisisjohnbrown

net: Tell us a bit about 100 Days of N Divs … JB: For 100 Days of N Divs (, I did one pure CSS animation every day for 100 days. I started with one div on the first day, then two divs on the second, three on the third, and so on. The divs had no classes, IDs or data attributes, and I didn’t use any JavaScript. It sounds like a punishment, but it was genuinely fun. net: How did you create the images? JB: It’s all about layering, offset and chance. Every day I started from scratch: just empty divs, no CSS. Setting up the basics always puts me in the mindset for getting down to business. From there, I would engage one div, get it doing something; anything that struck me. Then I’d add the next div with the same characteristics, but slightly offset, and see how it interacted with the first. Is it good? Save it. Is it bad? Revert! Like all art, it’s about experimentation.


april 2016

net: Are there any new CSS features that you’ve been excited to use? JB: I love that filters are now a thing on the web. On a practical level, they save a lot of overhead for cool transitions and hover effects, which makes it much easier to turn awesome designs into a reality. Some filters make for crazy artistic outlets – with those options, I usually don’t really understand how they work, but they look brilliant. net: Has this project had an impact on your day-to-day work? JB: Absolutely! I’ve used the knowledge I’ve gained on this project on dozens of occasions. Not only have I saved myself tons of time, but I’ve been able to help my co-workers too. Sometimes I have been able to tell them if something is even possible, or I’ve given them a path of exploration to help them answer their own question. I’m definitely a better frontend developer because of 100DoND. net: Is there a piece you’re particularly proud of? JB: Day 056: Nowhere Near [top centre]. On the most up-to-date browsers the boxes start to smear and it just looks beautiful. I would never guess it was CSS if I didn’t know differently. This was the sort of thing I had in mind when I started the project.


How to

Beat impostor syndrome No matter how much work you put in, sometimes it can be difficult to feel deserving of your success. We asked our followers how they tackle impostor syndrome

seo-ver it

Exclusively for net: the latest in a series of anonymous accounts of nightmare clients Clients from Hell

Illustration: Ben the Illustrator (

I own a web design and SEO company, and I recently designed a website for a client that said they were a huge worldwide company in their niche. I gave them a discount on the design in the hopes that they would sign up for our monthly maintenance plan. After much to-ing and fro-ing with the design, I finally finished the site and got paid. Over the next several months the client called and emailed asking for freebies here and there: “Can you add this photo?” “Can you change the font here?” “Our intern broke the site, can you fix it?” The worst time was when the manager of their Beverly Hills office called me angrily: Client: My site isn’t showing up in Google on the first page for words related to our business! He then listed words that he felt the company should be the first Google result for. Client: My competitors are ranking a lot higher than me, and I want to be number one. Me: Well, basic SEO is included in your web design package, but that only includes writing page titles, meta descriptions, and some basic keyword optimisation. Client: If you SEOd it, why am I not ranking first?

Me: It’s not that simple. Being number one for everything you just mentioned can take a lot of time and ongoing SEO work. Client: So I can expect to be number one in how long? Me: Like I said, there’s more work involved. If you leave everything as it is, you won’t be first for any of those search terms. You have to build links, write content, and get Google to view you as an authority. Client: I am an authority. I know everything about [his niche]. What is the difference between my site and [competitor’s site]? Me: About $20,000 per year in SEO services. I can do this for you, but it isn’t what we agreed on originally. Do you want to hire me again? Client: No. I’ll do it myself. This client’s site is now broken. It looks like a jumbled mess of pictures and stuffed keywords. They emailed me asking if I could just spend five minutes fixing it and, of course, I directed them to the sign-up page for our monthly maintenance service. I have not heard back.

Build ConfidenCe @neil_berry suggests taking time out: “Build confidence by looking back at your designs and you’ll realise the great work you���ve achieved.” @soopadoubled agrees that taking a step back can help: “Network, talk to other designers/ developers. Read and learn.” @IvanMcConnell turns the problem on its head: “I manage it through discussion with people I respect, but also use it as fuel to prove I AM good enough.”

fAKe iT If that doesn’t work, fake it ‘til you make it. “One word: Bravado!” says‫@‏‬PXLagency, while @cjkoepke jokes: “Accept that we’re all impostors.”

eMBrACe iT @AshConnnolly reminds us it’s not necessarily a bad thing: “It helps to not confuse impostor syndrome with being humble and openminded.” @ceeeeeebs agrees: “Only the worst designers feel that they don’t have anything more to learn. If you don’t feel impostor syndrome you’re probably doing it wrong.” @aharvard suggests embracing the feeling: “Instead of overcoming it, recognise that it’s a good thing! It shows that you’re growing your skills. Overcome the negative stigma.”

april 2016 17

1 2

3 5 4

gemma Ballinger reveals how blank-canvas walls and sweet treats keep Studio Output ticking workSPACE


april 2016

Studio Output is a creative agency living in an old piano works in Clerkenwell, London. We’ve been in the building for five years and have seen the area around us develop into a creative and dining hotspot. We chose this open space to encourage collaboration and making. Everyone is thrown in together; the partners, creatives, strategists and producers are all in one big room so we can see the people and things that inspire us. It’s a fun, buzzing environment. The whitewashed walls [1]

us, we gave the design team an open brief to interpret them. The result is this series of colourful prints [2]. It’s always interesting to see what comes out when there are very few constraints. Music plays a pivotal role in the studio and really helps to ease the pressure and motivate us. The sounds are often subjective to the mood at the time, but Tom Vek tends to be someone we all agree on. Around 4.30pm on a Friday afternoon we start to wind down, the cheesy party tunes come on and the beers come out.

are perfect for displaying past creations. Our values are a vital part of how we work and, to remind

We’ve amassed quite a collection of books [3] between us. Unit Editions is doing some beautiful

and luxurious retrospectives on design heroes like Herb Lubalin and Wim Crouwel’s design group Total Design. We also have a collection of books in which our work crops up, too. We’ve never been brilliant at keeping plants in the best shape, but we are nurturing a lovely little cactus collection [4] – a gift from a kind client. And we couldn’t finish things off without a mention of food. We’re close to Leather Lane and Exmouth Markets, which both have a fantastic range of fresh food for all budgets. Occasional biscuits and endless cups of tea [5] keep us fuelled in our daily routines. Wednesday 3pm is choc o’clock, and we all hover around bowls of sweets and chocolates – essential for feeding creative minds. ProFILE

Food For thought

Gemma heads up the marketing department at Studio Output (www., a forward-thinking creative agency in London

Our revolutionary NEW Web Hosting platform

100% guaranteed UP TIME

100% guaranteed uptime!

Smart SSD storage & intelligent load balancing

Dedicated SSL certificates

Web Hosting from:


per month ex VAT charged at 20%



Beyond pixels

Stuff i like

Harry Brignull

User experience consultant

Validately Validately offers a bunch of user research tools. I love the ‘moderated discussion’ screen sharer. When participants connect to a specific URL, it instantly starts sharing their screen and webcam with you. Everything is recorded in the cloud. When you’re interviewing lots of people it’s so much easier than Skype.

Statwing Statwing basically analyses user surveys for you. You give it the raw data, it gives you charts, tables, t-test results, and even natural language descriptions of relationships in your data. It’s light years ahead of competitor tools.


april 2016

Spoon carving

This month … when he needs a break from his computer, Michael Dowell gets back to basics by whittling wood bEyOnd PIxELs Too much time in front of a screen can

leave a person feeling in need of something more tangible. It’s a trait I’ve seen materialise amongst many designers and developers I’ve worked with. A desire to craft with your hands and create something physical is becoming increasingly important. The beauty of wood carving is in its simplicity. You can create a nice little set-up, in my case consisting of a work bench (a tree trunk salvaged from nearby woodland), a stool and my tools (an axe, knife and hook). The beauty of crafting wood is that, once you have these simple tools, it shouldn’t cost you anything except time. Spoon carving or (to start with) whittling, can feel like a long process, but the satisfaction gained from crafting something unique is highly rewarding, if not rather addictive. Not only do you get the opportunity to escape the studio, but through working with raw materials you gain new knowledge and skills: the finer applications of axe work, the unique attributes of varying woods, the precision of knife work and an eye for what it takes to create a refined product. My latest big accomplishment occurred last August. I decided to carve spoons for my wedding favours. Many months later, I had created a set of over 60, and finally felt like I had learnt the foundations of the craft.

When you compare carving to digital design you can spot multiple shared disciplines. Preparation is essential to getting a result you are happy with. Design is a craft; we should never lose sight of that. It takes time to nurture and bring to life. It always helps me to sketch my ideas using simple shapes and thinking quickly, and then push further and refine things later. Research is too easily overlooked. In order to work well, you need to be constantly hungry for knowledge. A designer/carver should thrive on learning about their surroundings and themselves. Go with what feels right and trust your own judgment. Know when to stop. Take a step back and see the whole picture; you can’t add the wood back on. Working with raw, natural materials in a tactile way is a humbling experience, and it’s liberating to be able to create something. After a long commute and a day spent in front of the screen, I’m able to pick up where I left off the previous day, switch off and unwind. Does this time spent impact positively? Absolutely.


ethnio Recruitment for user research can be a pain. Avoid agency fees by doing it yourself with ethnio. You create a questionnaire so you only get target users, and they book themselves into the calendar. It can also pay them using Amazon gift cards. Neato.

Michael (@michaeldowell) is a cross-disciplinary creative with over 12 years of design knowhow. He is currently creative director at MSLGROUP UK

Need list

Need list

Stuff We Want Small objects of web design wonder: from a comprehensive Sketch guidebook to an app that crowdsources stress solutions 1

Discover sketcH app



Hvass&Hannibal t-sHirt







axis viDius





Designing proDucts people love


What we think (1) Whether you’re new to Sketch or a seasoned user, Marc Andrew’s got you covered in this guide ( (2) You’ll find this wearable masterpiece from Hvass&Hannibal in InVision’s new T-shirt Marketplace, along with creations by Mike Kus and Alice Lee ( tshirts-278). (3) Future turns your daily events calendar into a spiral, making it easier for you to see what’s around the corner ( (4) Anonymous social media app Koko crowdsources cognitive therapy to guide you through your problems ( (5) Take to the skies with Axis VIDIUS, the world’s smallest first person-view drone that streams straight to your mobile ( (6) This month’s Q&A star Scott Hurff (p41) shares the secrets of great product design in this book, with over two dozen expert interviews (

april 2016 21

next month

nEw SkIllS In wEb dESIgn

10 essential areas to skill up on in order to stay ahead of the curve â&#x20AC;&#x201C; including svg and layouts

PlUS create delightful animations with cSS and JavaScript

web performance tips and techniques from the bbc

avoid the biggest cross-device testing mistakes

ISSUE 279 on SalE 17 March Print edition, back issues and sPecial editions available at digital editions available on itunes, google Play, kindle, nook and Zinio


EVENT GUIDE ENHANCECONF DATE: 3-4 March 2016 LOCATION: London, UK Enhanceconf is a one-day event focused on progressive enhancement, and how we can use it to push the web forward without neglecting any users. Speakers include Jen Simmons, anna debenham and robin christopherson.



After seven years, Joe Warren waves goodbye to JSConf EvEnt rEport

JSConf Last Call was the final outing for JSConf, a series of community-focused conferences from Chris and Laura Williams. After Laura started suffering from health problems, the duo decided to say goodbye to JSConf with one final event. I’d encourage everyone to read the About blurb on the site to fully understand why. Arriving at the now-familiar Omni Amelia Island Resort felt more like I’d just started a holiday. After unpacking in the ocean-view room it was time to head to the pre-conference food and drinks. The atmosphere at the bar was that of meeting up with friends and having a good time – a mood that continued throughout the event. Gaurav Seth opened the conference with a look inside Chakra – Microsoft’s JavaScript engine. After walking through what Chakra does, Seth announced that it was being open sourced ( Microsoft/ChakraCore)! He went on to reveal that a PR was being put into Node.js to provide the option to use Chakra instead of Google’s V8. Another highlight from the day was Pam Selle’s great talk on streams, aptly named ‘OMG streams’.

In it, she described the differences between types of streams and provided a small introduction to RxJS. Definitely something to check out. Several talks also paid tribute to JSConf. Jed Schmidt took the audience on a journey through the history of BoroJS, explaining how the team adopted the JSConf model within various JS meetups in New York. We also heard from Jan Lehnardt on the history of JSConf, including some memorable videos and photos from previous years. Videos of all the talks will be available at After all the talks had finished Chris got up in front of everyone and said goodbye, in what I can only describe as the most emotional speech I’ve ever seen (pictured above). The atmosphere in that room was one of appreciation and love amongst a community of friends. I’d like to end this article by thanking Chris and Laura Williams, who have spent countless hours of their lives building the JSConf community. Good luck with everything and thank you for having me.


Photography: Matthew Bergman

DATE: 4 dEcEMBEr 2015 LOCATION: aMELia iSLand, FLorida URL:

Web developer Joe (@joezo) currently works at hungry Geek, the engineering team at holiday Extras

DATE: 8-10 March 2016 LOCATION: BrühL, dE created for Java enthusiasts, JavaLand offers a programme of lectures, community activities and an entire day of training. The event offers plenty of networking, and even a kids’ event for the programmers and developers of tomorrow.

CONvERSIONXL LIvE DATE: 30 March-1 apriL 2016 LOCATION: TExaS, US pitched as the most useful conversion optimisation event you’ll ever attend, conversionxL promises to reveal processes that will boost profits on any website. Speakers include annie cushing, pauline Marol and nir Eyal.

CLARITY DATE: 31 March - 1 apriL 2016 LOCATION: San FranciSco, US clarity is a style guide conference, with a keynote by richard danne and talks by rachel nabors, Brad Frost, Stephanie rewis and many more. it will present a creative approach to web design.

april 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 an annual subscription

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 an annual subscription

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. If you are dissatisfied in any way you can write to us at Future Publishing Ltd, 3 Queensbridge, The Lakes, Northampton, NN4 7BF, UK to cancel your subscription at any time and we will refund you for all un-mailed issues. Prices correct at point of print and subject to change. For full terms and conditions please visit: Offer ends 30 March 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



save up to



Opinions, thoughts & advice




In an era where brands increasingly live online, James bates asks why the branding process still treats digital as less important



Edenspiekermann’s Robert Stulle on the art of being agile in an agency environment


You’ve all heard about agile methods like scrum and Kanban. They have proven to be successful ways to build and manage software. But are agile approaches also compatible with the project-based business model of an agency? Is it possible – or even advisable – to use a method that keeps your client in the dark about what they will get in the end? Welcome to Edenspiekermann, a global agency that shapes brands by creating digital products, services and experiences. We are around 100 people from over 16

UX designer Rachel Inman explains what’s so great about working at Google, and why she only wants to build things that are useful


Inspect and adapt

Tinder’s lead designer Scott Hurff talks about making dating apps endearing, and urges designers to pay attention to users’ thumbs

nations working in five offices worldwide. With backgrounds in graphic design, corporate design and typography, we have


gone through an interesting transformation over the past six years. The world has changed and the design business has changed. We are now deeply involved with digital product development and employ about as many developers as we do designers.

CompliCated vS Complex

Learning new processes was not enough. We had to adopt a new mindset, in which planning involves guesswork and control must be replaced by trust

In my experience, this paradigm shift is often too challenging to accept. If the agency management or the decisionmakers on the client side can’t commit

but because the environment wasn’t ready for that agility. Let me remind you of the three roles in a scrum. First, there’s the product owner. He acts like a CEO for the project, representing the interests of the end users and ranking tasks according to their business value. Then there’s the scrum master who, like a referee, moderates the process without influencing it. Finally, there’s the team, which manages itself. Wait, what? The team manages itself? That’s correct. If you can’t accept this, you will only be frustrated by agile methods. An agency with an agile-minded management is halfway there. But only

to this new way of thinking, the project is doomed. I’ve seen many projects fail, not because the team couldn’t be agile,

the agency that can educate its clients, and build trusting relationships through agility will be truly successful.

agile m anagement

We have to let go of our old methods and mindsets. We have to create an atmosphere of transparency. So to the bosses, managers, and anyone else calling the shots, I would say this: open yourselves to change. Push yourselves out of your comfort zones. Admit that Gantt charts are pure science fiction. If you let go of your notions of control and create an atmosphere of trust, great things are sure to happen. And don’t think you’ve nailed it. Ever. In our modern working environment, a winning strategy means being open to constant change. The journey never ends. And I think that’s great.


In 2009, we learned (the hard way) that the waterfall process of sequential design does not work well with digital projects. So we taught ourselves new, agile approaches and got an experienced ‘scrum master’ on board. The results were terrific and we never looked back [for an introduction to the agile approach, see]. Using agile methods led us to adopt agile mindsets. This was more than a change of method, it was a change in our company culture and our client relationships. The iterative and user-centric nature of agile techniques helps us create beautiful, useful digital products. We describe tasks in ‘user stories’ and base every decision regarding design or technology on researched user needs. As a result, we are sure to create stuff that is relevant and of value to the user. Still, I have to admit that we’re far from smooth sailing. We found agile methods easy to learn, but hard to implement in our organisation. Learning new processes, methods and techniques was not enough. We had to adopt a new mindset, acknowledging that planning involves guesswork, and control must be replaced by trust. As a multidisciplinary team, it was especially important that we learned to see digital product development as a process that isn’t complicated (like a machine), but complex (like a football game). It can’t be controlled or predicted. It can only evolve in a way that allows for constant adaptation, learning and change.

Robert (@robertstulle) is a partner and co-owner at the Berlin office of branding agency Edenspiekermann (

april 2016 27



april 2016



Digital-first branDing Illustration by Ben Mounsey

James Bates asks why digital is still treated like a second-class citizen when it comes to building a brand identity

Branding has always been a very top-down process: through identity and messaging, brand designers have tried to define and influence what consumers think. Then with consistent exposure, they hope to build recognition, trust and eventually loyalty. This approach arguably worked when you had control over static mediums like advertising, packaging and even television, but these days brands no longer exist purely on a shelf or a billboard. They live online. I’m not just talking about purely ‘digital’ brands. All modern brands now find themselves in a fragmented, multichannel environment where, as consumers, our first or most frequent engagement is a digital one. We no longer just walk past brands on the streets or shelves; we’re carrying them in our pockets and wearing them on our wrists. As consumers we now expect more. We engage with brands and the web provides plenty of platforms for us to do so, and for us to share our own experiences with others. As a result, it’s no longer enough for brands to just tell their consumers they’re great, they now need to live up to those claims. This has levelled the playing field, pitching well-established, well-funded brands squarely against smaller innovators.

the amount of space around the logo, what Pantone colours to use or how to lay out a business card. In contrast, the digital guidelines are relegated to a couple of pages containing a fictitious homepage mockup and maybe some banner ads. All too often, digital branding feels like a second-class citizen. Over the past few years we’ve observed a shift to a more bottom-up approach. We’ve seen organisations eschew the traditional branding agencies and approach Clearleft, and other agencies like us, to do more than just help them interpret their brand. They’ve been asking us to get to the very heart of their business and shape their identity from a digital-first perspective.

experIence eqUals Brand

The web has been around for two decades and ‘digital’ has been a mature part of brand strategy for ages. So why is it that so few branding agencies seem to think hard enough about a brand’s application in these channels? Is it that there’s too much complexity? Is it their lack of familiarity with the medium?

If we agree that a brand is essentially what its customers think of it (as opposed to what it thinks) then it’s an approach that makes sense. As experience designers we spend our time working with organisations, understanding how their objectives overlap with the needs of their customers, then creating tools and services to fulfil those needs. It’s the combination of these real experiences – not just the marketing material – that define a brand, since that’s what the customer remembers and will communicate to others. As Amazon’s Jeff Bezos says: “Your company is formed primarily not by what your company says about itself, but what it does.” As digital specialists we bring an acute working knowledge of the medium to the table, and understand the challenges and possibilities it offers. We understand the digital landscape and the other experiences your

As designers, we’ve all been there. In order to figure out how to interpret the client’s identity, you turn to the brand guidelines, only to find plenty of detail about

customer is using to benchmark your brand. Establishing an organisation’s position, personality and attributes is still core to any brand strategy, and

UnfamIlIar experIences

april 2016 29

VOICES Essay remain consistent, irrespective of channel. But I’m still amazed at how – when it comes to a brand’s identity – many fail to even get the basic components to work on screen. Symbols that are overly complicated or too subtle to survive being scaled at screen resolutions. Wordmarks that are too ornate, or typefaces that fail to remain legible once shrunk to fit into interfaces. No thought given to how the identity should be represented as an avatar or icon (I’ve seen whole brands homogenised to a single letter to solve that problem). What about colours? How does your carefully chosen palette survive the plethora of screen, display and gamma models we work with? I’ve seen guidelines that specify five different shades of grey, most of which you’d struggle to differentiate between on less capable displays. Are the colours chosen suitable to help legibility, reinforce affordances and meet accessibility and colour contrast requirements? You’d be surprised how many still don’t even specify RGB or HEX values.

platforms and devices we design for mean it’s nearimpossible to continue creating rigid, highly-prescriptive identity systems. I see parallels with responsive and mobile-first thinking. We’ve learnt to let go of the control that came with a fairly small set of screen sizes and devices, and started to think about creating flexible design systems where components work irrespective of their container. Instead of starting at the highest possible fidelity and scaling down for mobile, we start with the lowest, ensuring they work before scaling up.

scalIng to fIt It feels like brand designers could learn from this. We need to pay more attention to the elements that make up the systems and create rules for how they can be recombined, all while still being imbued with the brand attributes. The recent Netflix identity redesign by Gretel is a great example of this, showing how with just

I’m still amazed at how many fail to even get the basic branding components to work on screen. Symbols that are overly complicated or too subtle to scale up well. Wordmarks that are too ornate, or typefaces that fail to remain legible

consIstency versUs flexIBIlIty Whilst consistency is important, a good identity needs to be flexible too. The ever-increasing range of channels,


april 2016

a few elements an identity can be scaled to suit whatever environment it finds itself in. As digital continues to disrupt traditional businesses and the marketplace becomes ever more competitive, organisations are being forced to look sharply at how their brands are performing online. Doing a second-rate job in these channels isn’t going to cut it anymore. Just as the advent of digital forced us to re-evaluate traditional business models, it’s also making us change the way we think about branding. Ensuring your identity works from a digital perspective is crucial these days, and as digital thinkers we’re clearly well placed to help with that. But we need to seize the opportunity to help brands do a better job, which may mean acquiring new skills or being able to push outside of our traditional comfort zones. So, the next time you’re considering creating a new brand or refreshing your current one, consider whether the conventional branding agency is the right place to start.


Then we come to text and typography. A few years ago you could forgive designers for not paying enough attention to these online, as we didn’t have the flexibility and control you’d have in a print environment, but that’s all changed. Have you checked whether your font is available to embed, optimised or even legible on-screen? Have you specified fallbacks for scenarios where that font isn’t available? I’ve seen organisations spend thousands of pounds creating custom typefaces without thinking to specify that they should be optimised for screen. What about copy and messaging, have you considered the differences in writing for digital as opposed to print? These are the basics, but digital experiences contain so much more. We also need to consider how we use interactive elements like imagery, video, sound and animation. And what about the common UI elements? Google has done a great job of this of late; its recent identity redesign and the previous Material Design programme nicely address all these aspects and create a consistent experience that obviously has digital at its core, but works equally well offline.

James (@jvbates) is a designer and creative director at Clearleft in Brighton, UK. He’s been helping brands improve their digital experiences for over 15 years

Boost your Google Ranking with simple do it yourself online marketing Simple Steps

Competitor Analysis

Keyword Tool

Search Engine Optimisation

Carry out website optimisation by yourself without any previous experience

Local Online Marketing

Ensure that you will be found wherever your customers are looking for you

Social Media Optimisation

Benefit from the potential of Facebook and other social networks in order to strengthen your brand

Local SEO

Shows you how successful your keywords are both on a national and local basis - to ensure that more people in your area find you.

FREE 30 DAY TRIAL Simply visit

Voices Interview

Info job: UX designer, Google t: @rachel_inman


Rachel Inman Words by Sammy Maine Photography by Daniel Byrne

Googleâ&#x20AC;&#x2122;s UX designer on visual thinking, helping people do good in the world, and how she found her fire

april 2016 33

Voices Interview Rachel Inman doesn’t like exclusivity. Describing herself as a “bit of a nerd” growing up, it reminds her of when one group of kids felt entitled to exclude others. In a business environment, people can often unconsciously create an ‘us versus them’ mentality too. “The ‘them’ could be the clients, the project managers, your engineering team – anyone you perceive just doesn’t get what you’re trying to create,” she says. “You feel like they are against you or threaten your power. This is dangerous because it can lead to secrecy and defensiveness. Communication breaks down. Egos flare.” Thankfully in her role as UX designer at Google, Inman is able to ensure everyone on her team has a say. “It’s baked into our process,” she enthuses. “Engineers, PMs and designers are writing user stories together, disseminating research, and forming a shared understanding of the ‘why’.” Not only does this make for a more effective workflow, it also has a positive effect on job satisfaction. “Morale is high because there are no more walls. A design solution from an engineer is just as valid and celebrated as an engineering idea from a designer.”

Bigger Picture Inman didn’t get to Google with a traditional Computer Sciences degree: she received a BFA in Industrial Design from the Carnegie Mellon School of Design, and also dabbled in architecture and urban design during her time there. “I think I was giving my academic advisor a headache,” she remembers. “Every semester, I was maxing out on the units I could take.” Prior to university, she’d attended an art school and concentrated on sculpture of “the type you can’t really give your mom for her birthday because it’s too unwieldy to put on a shelf.” She had planned to continue experimenting with these large sculptures, but found herself questioning her path. “I started thinking more about what I wanted to put out into the world as a creator. Were my creations making life better for others? I wanted to find a more direct way than sculpture to do good in the world.” The choice led her to CMU. Taking part in industrial design classes there was to, as Inman puts it, “fulfil a desire to affect the entirety of a person’s experience.” For one


april 2016


project, she spent an entire summer conducting research around Pittsburgh, sitting in public spaces for hours and taking notes on people’s activity. Inman credits the diverse curriculum and opportunities at CMU with helping her see the bigger picture – something that has come in handy at Google.

Sm all But might y Since joining Google, Inman has worked on a wide range of teams and projects. She is currently engaged in building business applications for Google employees to use. Last year, as part of the Google Earth Outreach team, she worked on the launch of Global Fishing Watch – an initiative to monitor fishing activity. “One of my most exciting days was coming to the UN headquarters to watch my programme manager present a demo to an assembly of island nation representatives,” she enthuses. “It was so inspiring to see them get on board with the idea that this tool could really empower their local leaders and environmental activists.” Inman also led the team that redesigned the public-facing site introducing Google Earth Engine ( Earth Engine is a resource exploring changes in the Earth’s surface; users can sign up to gain

responsive, enabling users to learn about this tool anywhere. One challenge was to establish what users from different academic disciplines needed to see in order to use the platform in their projects. “Finding out what users wanted wasn’t hard; it was narrowing that down to the essentials that was tough, ” Inman explains. “Our project team is small but mighty, which I find really exhilarating.” Working at Google has also enabled Inman to learn a different side of UX. Prior to joining the company, she spent three years as a senior experience designer at R/GA, which she describes as “a wonderful training ground” for her design career. However, predominantly working on commercial sites aimed at helping people buy things meant she soon found herself questioning her path again. “My desire to feel useful took over and I grav itated tow ards Google because the products they create provide such great utility to people around the world. They don’t rely on flashy interactions – they aim to be intuitive, simple, and occasionally smile-provoking.”

“I gravitated towards Google as its products provide such great utility to people around the world”

access to a wealth of geophysical, climate, weather and demographic datasets. A key aspect of the redesign was to make the site

PerSonal goalS

could argue that designers are failing to focus on their user, Inman says that the basic aspects of design are relative to the individual designer. However, she does concede that at one point or another, all designers will lose their focus on the user. “We have the best intentions, but other constraints push us in a different direction,” she offers. “It’s unfortunate, but it happens. Though, if you notice it happening a lot in your workplace, you might want to speak up or head for the door.” She also emphasises that each designer’s priorities depend on their personal goals. “Maybe you want to design a game for users to play that will likely distract them from what they really need to do, but does bring them temporary joy. That’s valid.” Inman, however, is not interested in creating games. “My definition of necessary is very rooted in a desire to create useful things that help people do good in the world.” The key questions she asks are: Does this solution help people accomplish a core goal? Does it engage the user as little as possible, while still giving them maximum value? And finally, can this solution spark exponential good?

Recently, there’s been discussion within the industry that some basic aspects of design have become lost under the weight of ‘unnecessary’ embellishments. Whilst some

hoW, Why and Who Taking all this into account when tackling a new project – at such a large company – is

april 2016 35

Voices Interview

undoubtedly a daunting prospect. Inman begins by investigating the project’s background, stakeholders, and the user problems they’re trying to address. This usually means digging through a load of documents about previous projects, reviewing research findings, and sometimes learning about a new subject altogether. “Being transparent about research, insights from users, and my own intentions is an incredibly important part of starting a project,” she urges. “Everyone should try to come to a shared understanding around why we’re doing this project and who we’re doing it for, before we can move on to the ‘how’. You can always go back to the ‘why’ and the ‘who’ you defined in the beginning, to remind your team of the original mission course.” Inman also makes diagrams for herself, in order to better understand the problems she’s solving. While it’s not something she was formally taught, she thinks a lot of designers find this approach helpful, purely because they’re visual thinkers. “I used to do this sort of thing as a kid in science class so I could remember how to complete experiments,” she laughs. “The

Despite busying herself with an array of projects at Google, Inman makes time to work as an expert in residence for the General Assembly’s New York campus, teaching ‘Introduction to UX Design’. She covers a wide range of topics during the 12-week course, but it’s a taste for experimentation that she wants her students to gain from the programme. “In many cases, they come in with no design experience, and leave with a foundation they can build on,” she begins. “If my students walk away with any message, I hope it’s that they don’t need permission to create and experiment. Aside from understanding their users, I really want them to feel free to keep making, testing, failing and continuing. That’s the only way they’ll get better!”

While she’s busy inspiring others, Inman finds her own inspiration in artists, designers and other thought leaders. Current

Margolin. One quote from Margolin has had a particular impact: “Designers occupy a dialectical space between the world that is and the world that could be ... To plan effectively in the present requires a vision of what the future could and should be like.” “This quote resonated with me during a slump,” says Inman. “I had been working very hard on several projects and they were all technically going well, but I’d lost the fire inside me.” Around that time, a white paper from CMU arrived in the post. In the margins, the author had included quotes from designers and design thinkers like Margolin. Inman took photos of the quotes, and kept looking at them throughout the week. “This quote reminded me of the reason I got into this crazy world of design – to try and make the world just a tiny bit better than how I found it, ” she recalls. “That might seem like a naively optimistic goal, but I still believe it to a certain extent.”

teacher would demonstrate and I’d quickly sketch what she was doing so I could replicate it later.”

influences include illustrator and writer Maira Kalman, sculptor Henry Moore and World History of Design author Victor

next month: We chat to Filament Group partner Patty Toland


april 2016

“I got into this crazy world of design to try and make the world just a tiny bit better than how I found it”

a viSion of the future


Delight is not a Design goal Dan Willis explains why specificity is key to design success

As soon as you hear that the primary goal of the design is to delight users, you know your project is in trouble. It’s not that delighting users is a bad thing; far from it. You’re not going to argue against delighting users any more than you would avoid solutions that are ‘intuitive’ or ‘userfriendly’. These are words that everyone can comfortably agree on, but they provide little actual guidance or value.

Delight is a weak goal, and that’s a problem for me because I expect design to take on big, fat problems. When design is ambitious, it is a powerful tool. Rather than relying on vague concepts like delight, I depend on three principles that have

might be tempting to focus on the second part of this and treat it as a challenge to the designer to perform at a high standard. In fact, this principle is primarily a challenge to the organisation. It takes organisational commitment to position design so that much can be expected of it. Principle two: Design is what it does, and what it does is solve problems. It is not the purview of magicians squirrelled away in dark caves. Design is first a practical tool, a hammer rather than a magic wand. The less tangibly you define design, the more you have to defend it to others. Breezily announce you’re going to design an intuitive look-and-feel that will bring delight to users, and you’re going to have endless group discussions about

emerged over the course of my career. Principle one: Expect a lot from the design; expect a lot from the designer. It

which shade of blue is user-friendly. But when you position design as a way to solve problems, it helps non-designers

My Design principles

solving big probleMs If design is only a tiny segment of your project timeline, it can only solve tiny problems. You see this when project leads think they’ve figured out a solution and bring in a designer right before launch just to make it look pretty. They’re asking little from design. The earlier on in the project design work begins, the greater the challenges it can address. Start designing from the beginning and you’ll have the option of introducing an iterative approach. With iterative design, solutions become hypotheses, hypotheses are tested with users, and design improves well in advance of launch. Designers must work holistically even as they deliver solutions for individual iterations, as every iteration informs the overall design. The overall design becomes like a pencil sketch, improving with each iteration. That’s asking a lot from a designer and even more from an organisation, which is exactly what I think we should be doing.



more readily understand the challenge and make meaningful contributions. Principle three: The design process should both involve the entire team and protect the individual expertise of each team member. UX design works best as a group activity, with designers and nondesigners collaborating in order to define what the design must accomplish. Armed with a solid problem statement created by the team, people with expertise in content strategy, information architecture, design and usability should be responsible for crafting solutions. Non-designers should continue to participate in the design process throughout the project. This means the traditional design reviews that resembled some twisted form of interior decoration (‘I like the buttons from solution one, but with the colour scheme of solution two …’) can be replaced with more helpful critiques. Based on their particular areas of expertise, team members assess how well a design solves the problem the designer intended to address.

Dan (@uxcrank) is a consultant, designer, speaker, author and illustrator with clients who count on him to solve their biggest, fattest, hairiest problems

april 2016 37

VOICES Big question RWD

how do you approaCh a responsive redesign? Web pros are often called on to redesign a website to make it responsive. We asked the experts how they approach the challenge

a a ron gus ta f s on

Chris t op her s Chmi t t

Author, Adaptive Web Design

I always begin any website project with the purpose of the site. I list the core tasks a user would need to be able to accomplish on the site, before examining the content to ensure it clearly links to those tasks. Following that, I author markup that supports those tasks. Next I begin to look at ways visual design can ease the completion of those tasks across a broad spectrum of screen sizes, colour profiles and such. Finally, I look for ways to enhance the interactive experience with JavaScript in order to create the best experience possible, on whatever device a customer might be using.

in ayail i de l eón p ers s on

Lead web designer, Canonical

For a responsive retrofit, start with a group exercise where every team member lists what they would like to work on, design or fix in the existing site. Once you have that wish list, you can start grouping all the items by topic, and then prioritising and scoping the different stages (or releases) of your project. 38

april 2016

Designer and web developer

If you have the time and budget to start over, a blank page is the best starting point. There are lots of existing patterns and workflows for creating a responsive web design, especially when the client can step back from what they’ve built so far and enhance their message. Right now, my focus is on retrofitting legacy sites and apps for organisations that don’t have the time or budget to reinvent their online persona, and are being penalised by search engines for not being mobile-friendly. The best approach is to use one <style> and <script> element to associate RWD design rules and behaviour, and bring fixed-width layouts into the next century.

he y don piCk ering

rosie Ca mpbel l

Interface designer and author

Technologist, BBC R&D

We tend to forget that websites are responsive by default, without CSS. We make them unresponsive by adding fixed widths. So I start by removing all the CSS. That way, I get to see if the flow structure of the document is in a good state. Source order is important for accessibility, so I press to make changes to the markup first. Then I continue by reinstating just the styles that don’t affect layout, like colours, font families and so on. That’s a good foundation for a mobilefirst responsive design.

If there’s anything I’ve learnt from the devs I’ve met, it’s that responsive design is first and foremost about accessibility. The best responsive sites respond not only to different devices, but also to different user capabilities, requirements and environments. Start by looking at accessibility resources and make sure your site complies as much as possible. From there, think about how you can future-proof your site to respond to emerging technology as display screens evolve.

s t ép h a nie wa lt er

Web and mobile designer

I start by doing a content inventory. It helps me see which elements will need special attention for multi-screen optimisation. Once all the page elements are listed, I prioritise them from a mobile-first perspective: is this title more important than the image? How important is it on mobile? On desktop? Next I start wireframing the larger screen to get the big picture, while thinking ‘what will this element look like on mobile?’ This creates a mix between wireframes and content choreography, with components at different sizes to communicate responsive decisions to developers.

ly z a da nger g a rdner

CTO and co-founder, Cloud Four

When we have the freedom of a full redesign, we’ll start with moodboards and element collages, and we’ll build a pattern library. When we need to adapt a fixed-width site with minimal impact to the extant wider-screen layout, we’ll audit the site for patterns and start figuring out how to make responsive variants of these patterns. In all cases, the key is the creation of a system of small responsive patterns that can be combined to build consistent, sophisticated interfaces.

further reading Listen CarefuLLy

HaLL Of fame

aLL tHe smaLL tHings

The Responsive Web Design Podcast is a treasure trove of interviews with the people behind some of the web’s biggest RWD projects ( Hosted by

Studying other people’s work can be the best way to get your head around something you don’t understand. With that in mind, this list of 50 responsive web design

Nobody said responsive design was easy, and in this article ( CSS expert Jonathan Snook explores the details designers need to be aware of. This consolatory

adaptive content veteran Karen McGrane, this podcast goes behind the scenes with big sites including Facebook, Netflix and Google+.

examples and best practices ( examples-278) is the perfect way to grasp the fundamentals of this approach.

and enlightening discussion covers the hassle of breakpoints, container queries, content delivery networks, and more.

april 2016 39

with web hosting from £1 just how good can we be? “The best web hosting company I've ever used” Mike Wade, Salisbury

“Full featured but still easy to use” Frank Serrels, UK

WEB DESIGNERS STRUGGLE TO DELIVER £500 WEBSITES AND STILL MAKE A HEALTHY PROFIT? HERE’S HOW YOU CAN MAKE MONEY FROM THESE CLIENTS, WITHOUT LIFTING A FINGER The Starting Point Website Plan Affiliate Programme is an easy way to help your contacts get a quality, professional website at a low-cost and generate revenue for you. When your affiliate application is received and accepted you will be given a unique referrer / discount code that you can hand out. Your contacts use your code to obtain a £100 discount off the usual £599* set-up fee for a Starting Point Website, this is their incentive to enter your code and your way to offer your contacts a special discount meanwhile... make £100-£200 per successful referral

Read more reviews at *price excludes VAT.

sign up for free at

Slash your interne et, TV & phone bills!!

One quick call. Thousands of deals.

We do the hard work for you: 1

Call free and speak to our London based impartial experts.


We review over 6,000 deals from the top UK providers to find the right one for you - with our Lowest Price Guarantee.


Our experts do the hard work, answer your questions and even arrange your installation!

Save up to


per year

83% of ou


custom r ers


We’re proud to be the only service to be accredited by Ofcom for TV, broadband and home phone comparison

Call us free and we’ll do the hard work!

Experts available: Monday-Friday 8am-8pm, Saturday 9am-5.30pm, Sunday 10am-5.30pm Or text “DEAL” to 81400 and we’ll call you

0800 466 1053

*20% of Simplifydigital customers received an average saving of £408. Data based on 1,538 records between 1st of Jan 2010 to 8th Nov 2010. ** Out of 445 consultations between 01/01/2010 and 03/05/2010, 368 Simplifydigital customers saved money by signing up to our recommended deal. Lowest Price Guarantee Terms and Conditions apply – see for full details. Standard SMS network charges apply.

Q&A distribution. Lots of tech companies treat products more like toys, because if something dies, it’s easy to discard. I reject the notion that everything lives or dies by a viral loop, or just because something is pretty. Products exist to alleviate people’s problems, period. What’s important is the experience someone has when using something you’ve created. Of course, aesthetics have their place. Aesthetics can improve trust, reinforce a product’s value, and demonstrate empathy.


Scott Hurff The Tinder product manager spills his secrets on designing products people love Info Job: Product manager and lead designer, Tinder w: t: @scotthurff

net: How do you keep an eye on how effective the UX is at Tinder? SH: The primary focus of the product team’s mission is to make the Tinder experience as fun, productive, and endearing as possible. Putting yourself out there in a dating-like context can be really stressful. I’m lucky to be a part of a team that includes Jonathan Badeen. He’s the guy who invented the ‘swipe right’ (and left), and his worldview has always been to make people feel as comfortable as possible.

net: How can designers sift out the good stuff and stay relevant? SH: Designers need to step up and help teach each other what they’ve learned. There’s a phrase somebody told me recently: “Don’t compare your insides to somebody else’s outsides.” We can only learn so much by downloading the latest apps or breaking down someone else’s code. The beauty of the internet is that it’s an open place, and it was built on the backs of people who shared their ideas and experiences. That’s the best way for the digital product design industry to move forward. net: You’ve spoken about designer’s exaggerated focus on the ‘ideal state’. How can designers ensure they look further afield? SH: The ideal state is only one piece of what I call ‘the UI stack’. There are four other states: partial, error, loading and blank. Really, every screen has every state caught up in it. Screens need to be designed to seamlessly move between each state. So I challenge product designers everywhere to do the work to account for these states, for every screen and in every flow they create.

net: In your new book Designing Products People Love, you talk about “screen-lickable products”. What do you mean by that? SH: At the time I was quoting Steve Jobs and his supposed outburst when he saw the Aqua version of OS X ( I just love that emotional reaction. Product designers all hope and wish for that moment where somebody goes, “Wow, that’s exactly

net: You wrote a blog post entitled ‘How to design for thumbs in the era of huge screens’ ( thumb-278). How has this new era challenged and changed the way you work? SH: It’s opened my eyes to the importance of ergonomics. I had always wondered why I was annoyed that the ‘Done’ button was at the top of the phone, and to use it I had to contort my hand into some weird prop you’d see in Hook or something. That’s what led me to think through things like thumb zones and how UI elements can be placed to be the most convenient for thumbs. Research shows that’s how most people hold their phones: with one hand and one thumb that drives. People do, of course, re-orient the phone almost without knowing it to accomplish certain tasks, but

what I hoped for.” In the past few years, products have been devalued because consumer technology enables cheap

the thumb is the primary driver. I’m now researching tap target sizes, and why big buttons just feel better than tiny little ones.

april 2016 41

Never miss aN issue!

#276 FEB 2016

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

#277 MArch 2016

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

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


#271 SEPT 2015

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

cATch UP oN ANy iSSUES yoU’vE MiSSEd By dowNloAdiNG oUr diGiTAl EdiTioNS

#275 JAN 2016

#274 dEc 2015

#273 Nov 2015

#272 ocT 2015

#270 SUMMEr 2015 #269 AUG 2015

#268 JUl 2015

#267 JUN 2015

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

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

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

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

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

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

PreFer to reaD oN aNDroiD, PC or maC?

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

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

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



Gallery Inspirational sites Wren L anier

Sensational design and superb development

Wren is a UX designer with a passion for creating beautiful digital products. In her spare time, she enjoys eating bagels, making trouble and napping w: t: @heywren

HTML5, JavaScripT, SvGOMG inTacto

Fleximize provides loans to UK businesses, and this clever microsite showcases just how keen it is to connect with entrepreneurs. Built with HTML5 and SVG animation, Fleximize: Mission pushes the boundaries of web technology. Engaging illustrations and transitions move the viewer through a series of venues. An elaborate animation sequence introduces one of the heroes of the mission as he parachutes into headquarters to introduce three mini-games. And while you probably wouldn’t choose any of the games over your

Argentinian agency inTacto has created an experience that is web-friendly and highly performant. In addition to HTML5, the site was mainly composed of JavaScript. The most complex SVG animations were created in After Effects and exported in the JSON format using bodymovin, and SVG illustrations were compressed with SVGOMG to keep file sizes low. “Using SVG was a key decision,” says creative director Alejandro Lazos. “We have infinite love for SVG, but creating a site like this using only SVG took us out

favourite mobile time-waster (hello, Two Dots!), each has been well designed, with its own unique setting and controls.

of our comfort zone, so we were forced to learn new things and experiment with new technologies. It was a great experience.”


april 2016

“First it just looks like a super-fancy SVG animation intro, but then it unfolds into a series of clever, fun mini-games” Rachel NaboRs (@rachelnabors)

Inspirational sites

HTML5 canvaS, JavaScripT, rWD Sutu

In These Memories Won’t last, award-winning digital comic artist sutu has created a beautiful, poignant interactive story about his grandfather’s rapid slide into dementia and memory-loss. Unlike many online comics that sit on the screen just as they would on a page, TMWl incorporates movement and music into the reading experience in ways that both illuminate and challenge the reader. The carefully crafted scrolling and interactions

will have completely faded away and cannot be retrieved,” says campbell. “I designed this effect to frustrate users, to share with them the pain of losing a memory and not being able to go back.” best of all, the site is accessible across devices. “I thought it was important that it works on smartphones as well as desktop,” campbell notes. “We store a lot of our memories on our phones as photos and videos, and these memories are at

highlight the fragile nature of memory. “by the time you reach the end of the story, the earlier parts

risk of being lost due to devices breaking down or technology outdating.”

“A touching story that makes better use of the web medium than any comic I’ve seen” beTh DeaN (@bethdean)

april 2016 45

Gallery Inspirational sites

si t e of t he mon t h

GracefuL DeGraDaTiOn, cSS3 aniMaTiOn, SvG SFCD

The new portfolio site from sFcD – a product design agency based in New York and san Francisco – deftly combines text, video and animation in refreshingly new ways. Rather than seeming noisy or overwhelming, the effect is stunning in its simplicity and wry juxtaposition. “We were looking for a way to illustrate the idea of blending the old analogue world with the new digital one,” says creative director Dmitry Tsozik. “We found inspiration in the archives of midcentury book covers and posters.” The use of fullscreen background video in several sections is particularly striking, especially as the site loads quickly and scrolls cleanly.

“some tricks to distract the user while doing a lot of heavy lifting in the background, similar to what magicians do with their audience.” Performance tests ensured each user would get the best possible experience – the video and animations will gracefully degrade, based on the available bandwidth and cPU. Yet the best feature of the design may be the content-rich menu overlay, comprised of both contact information and snippets of work. sFcD isn’t the first agency to put meaningful content into a menu, but it has built by far one of the best implementations of recent times. Dare we hope that overlay menus with a scant three or four links

cTo alexey Rechkunov says they’ve employed

will soon be a thing of the past?


april 2016

“This is the future of digital agencies. Beautiful site and gorgeous work” bUzz UsboRNe (@buzzusborne)

Inspirational sites HTML5, THree.JS Convoy

Nike’s collaboration with hip French fashion brand Pigalle has resulted in a vibrant neighbourhood basketball court, some seriously cool European-influenced sportswear, and a site that’s as daring and designforward as the brands it represents. Created by French agency Convoy – themselves basketball players and friends of Pigalle designer Stéphane Ashpool the site combines clever asynchronous scrolling with bold geometric shapes that echo the lines of a basketball court.

“The scrolling effect of the header is a reflection of the movement in basketball from one part of the court to another, between the lines,” says Convoy designer Nordine Benotmane. “We really wanted to emphasise the colour, pattern and lines, which are strong aspects of the Pigalle brand.” The result feels unexpected and full of energy – as if anything could happen. It’s not your typical ecommerce experience, but for powerhouse brands like these it hardly matters. All items listed for sale were already sold out.

april 2016 47

Gallery Inspirational sites

cSS3, vue.JS, GSap Immersive Garden

as complaints about the ‘sameness’ of the web reach a fever pitch, it’s refreshing to discover a site like acme experience. With this design, French agency Immersive Garden has reinvented the so-called brochure site in a way that feels exciting but also clean and professional. each line of business in acme’s extensive portfolio gets its own section; an attractive collage of images zooms and slides to reorganise itself, smoothly transitioning from topic to topic. excellent typography and clear, focused content accompany each set of photos. You can easily imagine an executive using this site in lieu of a Powerpoint deck to pitch new business and show off acme’s capabilities. section content is equally elegant; the image collage bleeds through the background of each page, adding depth to the minimal, grid-based layout. small details – like the negative space around each caption – allow the eye to easily move across all the content. It’s a refreshing design that feels classic and print-inspired, but infinitely more refined than a basic template. The web as we know it, but more mature. Finally.


april 2016

Inspirational sites

JQuery, MOrpHSvGpLuGin, ScrOLLMaGic Bonne Marque

Bonne Marque, a digital agency from Sweden, takes an aggressively design-centric approach with its new portfolio. Brash, futuristic and unapologetically opinionated, the site offers a rare example of talented designers pushing their craft forward, regardless of the outcome. “We will continue creating, inspired by our pure path to offer clients their best shot of creativity in an industry threatened with safe business choices,” says founder Alexander Engzell. Much of the design is dominated by

such as project videos playing inside the oversized initials of each project. A slight asynchronous scroll effect on the columns of the case studies brings motion and energy into what could otherwise feel like a typical reading experience. But Bonne Marque’s desire to differentiate itself from other agencies really shines through in the site’s copy – in particular on the contact form, which confronts visitors in a rakish Mad Libs style. “We make it difficult for potential clients to contact us,”

animation effects that urgently demand the viewer’s attention, but the true delight here comes from subtle details,

says Engzell, “because we insist on working with clients who have a sense of humour and adventure.”

april 2016 49

Gallery Inspirational sites

HTML5, cSS, JavaScripT Sons & Co.

The new portfolio for New Zealand architecture firm Tennent Brown is a retro-influenced delight, reminiscent of mid-20th century book design but enhanced with clever 21st century interactions. Created by NZ firm Sons & Co, the site deftly balances numerous photos of home interiors and exteriors with long chunks of copy, creating a showcase of creative work that’s both light and immersive. Large, angled page headers are a bold homage to great typography, but with a modern twist: the text slides over an invisible ‘step’ as you scroll down

Arnold. “It’s an optical trick created using three duplicate text elements. Each element is masked to reveal a single line of text, then skewed and rotated on different planes. On scroll, it gives the illusion of a single element with text flowing over a stepped path.” On each case study, a monochromatic introduction gives way to lush, full-colour project photos. The juxtaposition is unusual but not unwelcome, allowing clients to tell their stories in a way that feels more authentic than typical marketing copy. “The aim was to bring people’s

and transition into the content. “The ‘stepping’ text is deceptively simple,” says Sons & Co. co-founder Matthew

attention to the designs of Tennent Brown, but also to illustrate the way they think and work,” says Arnold.


april 2016

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

13 issues of net in print and digital


Annual Industry Report worth £100


Discounts to industry events including Generate


Inspirational design annual worth £9.99


Monthly net Pro email newsletter


Special discounts from selected design 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 13 issues in a year. Prices correct at point of print and subject to change. Full terms and conditions myfavm_ag/magterms. Offer ends 31 March 2016

Sublime design & creative advice

This monTh FeaTuring...

focuS oN


Design Challenge This month ...

SVGs are great for adding personality to sites. Sam Kapila takes a look at some different techniques for tackling SVG animation

Hairdressers Profiles

s iMon C a r r Simon owns DesignUps, a digital design agency in Tennessee w: t: @simoncarr

M at t W il l Mo t t


We chat to the co-founders of Hactar, the unique agency working exclusively with companies that bring about social good

Matt is a web designer and dev, concentrating mostly on the Shopify platform w: t: @matt_willmott


MiC he l l e B a r k e r Michelle is a designer and frontend developer at Mud, with a passion for CSS w: t: @mbarker_84


How we built


Creatives at Soleil Noir brought classical music into the digital world in a multi-sensory experience for the Orchestre de Paris


december 2013

This month weâ&#x20AC;&#x2122;d like you to design a website for a hairdressing service. It could be a freelancer who travels from home to home, or for a new company entirely. The new site should be straightforward to use, but also aspirational.

Design challenge

1 2




siMon Carr

Fin hair

This classic site uses toned-down colours and touches of animation to create a slick experience

Fin Hair is a company with a mysterious appeal. The company is aiming for midrange to high-end clientele; clients who have a classic sense of style, but want a dramatic new look. The word ‘fin’ means ‘the end’ or ‘finished’ in French. In this case, it describes a finished look. The logo uses brushstroke-style lettering on top of a diamond shape. The result is a modern mark with personality. This would be animated subtly with CSS3 keyframes. The layout is predominantly black and white, but the colour treatment for the main photo was difficult to nail down. It soon became clear that toning down the use of colour helped give the site a more classic quality. A geometric overlay makes this image feel more modern. For the build, all code would be based on a fluid-width responsive framework. Something like would be used to generate custom responsive layouts.

Close uP (1) Choosing a name was an important part of the process – Fin means ‘the end’. The identity uses a brushstroke treatment on top of a diamond shape. The name would animate in to give the impression of being painted on. (2) The main hero image has been edited to remove saturation for a more classic look. After experimenting with graphic treatments, the final edit is a geometric split image, which has a mysterious and modern feeling. (3) Behind the tagline ‘Love your look’, I have used a watercolour brushmark to make the wording stand out. The brushstroke also references the styling and movement of hair. (4) The services are listed just below the fold, allowing visitors to easily locate services and pricing. (5) The mobile view presents the hero image front and centre, with the services and call to action shifting below.

My Month what have you been doing this month? At the end of 2015 I launched DesignUps, a new company focused on designing digital experiences for startups and tech companies. which sites have you visited for inspiration? and what have you been watching? Spaceballs, 80s cartoons with my son. what have you been listening to? Casino Versus Japan, Ben Folds, Thom Yorke, Nickel Creek.

april 2016 53


Design challenge


5 2

3 4

My Month what have you been doing this month? Getting back up to speed after eating copious amounts of chocolate. I intend to start reworking my own site soon. which sites have you visited for inspiration? Pinterest for inspiration and the InVision blog for its variety. what have you been watching? Very little, as I’ve been trying to read more instead. what have you been listening to? Oh Wonder’s self-titled debut album, and anything Spotify’s Discover Weekly suggests.


april 2016

Mat t WillMot t


An ordered, clutter-free design ensures users know exactly where to go for the information they need

Clearcut is designed to be fairly minimal, as in my research I found that many sites tried to include everything on the homepage, leading to a cluttered layout. Below the main image are the options to book an appointment. A popup would appear in which the user could finalise the booking. Below the appointment information there are brief paragraphs of information about the salon, with some photos. More detailed content would be assigned to its own page, which could be accessed from links in the main navigation. This would help keep the homepage clutterfree, while also allowing for more detailed information when the user wants it. On mobile, I’d keep the homepage simple, with just the booking section. A hamburger menu would direct users to further content.

Close uP (1) The above-the-fold area is kept fairly minimal, with important information like opening hours and contact details at the top of the page for ease of discovery. (2) The colour scheme is intended to be genderneutral. This, plus the fonts used, give an elegant and sophisticated style that should appeal to a wide range of users. (3) The short phrase ‘Be the best you’ provokes a positive feeling, whilst also leading you eye down the page. (4) Towards the top of the homepage is the option to book an appointment by selecting which day, treatment and team member you’d like. The drop-down options would be linked, only offering the options that are still available. (5) On mobile, the homepage would just feature the booking section, with all other content on its own dedicated page, for an easier browsing experience.

Design challenge




1 4

MiChelle Barker


This high-end, specialist salon site embraces a cinematic experience without sacrificing usability

Première is a high-end salon specialising in technically advanced, bespoke styling for catwalk, film and special occasions. Première’s stylists consider themselves artists, and the website needs to feel like a work of art, while providing an exceptional UX to reflect the salon’s ethos. The design is bold and clean, inspired by art galleries and fashion magazines. The colour scheme is deliberately minimal, so the photographs can take centre stage. Icons are loaded as SVGs so they always look crisp. CSS keyframe animations, ScrollMagic and GSAP are used to animate elements into view as the user moves through the site, creating a cinematic experience. The site will use Pinterest’s API to enable users to create an inspiration board for their desired style, to help the stylists create the perfect solution for the client.

Close uP (1) Plenty of white space allows the content to breathe and adds to the art gallery feel, while making the initial page view all the more striking. (2) The navigation is fixed as the user scrolls. JavaScript is used to effect transitions when a user clicks a menu link, so that the page scrolls smoothly. (3) Cutting-edge CSS properties such as clippath and mixblendmode are used to provide interesting visual effects. The site uses Modernizr to ensure these features are only served to supporting browsers as progressive enhancements. (4) The asymmetric grid is built with flexbox, allowing for the versatile positioning of elements. (5) The booking form is designed to be easy to use on all devices, and has been built with native form elements so it is still simple to complete on mobile.

My Month what have you been doing this month? Publishing my Web Design Advent Calendar ( and getting ready to start a new job at Mud. which sites have you visited for inspiration? Mainly Pinterest, particularly looking at hair and fashion sites. what have you been watching? I’ve just finished The Bridge series three, and started on Jessica Jones. what have you been listening to? The Staves and the Wainwright Sisters.

april 2016 55




Focus on

Focus on

AnimAting SVgs Sam Kapila shares some tips for bringing SVGs to life


Scaleable Vector Graphics (SVGs) are now fully supported in most wellknown browsers, going a few versions back. We’ve seen SVGs go from experimental and partially supported to a delightful part of the user’s experience, and an extra layer of personality for web apps, products and online brands. A lot of this came in the form of animation, supported by CSS3 and by lightweight JavaScript libraries. Using some key features in Sketch and Illustrator, designers can export HTMLsupported code to display an SVG (including shape tags like rectangle, circle and line). To find out how to animate SVGs without tinkering in CSS, take a look at this article by Jakob Jenkov: However, with CSS alone, SVGs not only respond to changes in scale, but to other CSS3 animation attributes. They transform (both in 2D and 3D) and transition effortlessly, without a designer or developer needing to export out new assets – each of the elements can be classed and called out individually by CSS. Sarah Drasner’s motion-path solution on CSS-Tricks (netm. ag/drasner-278) is worth a look. JavaScript tools such as Velocity.js and Vivus can provide support for these animations, with well-made presets and classes that handle eases, fades and more. These tools take the guesswork out of deciding out if an animation is too long or short, allowing designers and devs to focus instead on how animations inform the user’s interaction, and delighting them with a bit of the unexpected.

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




(1) Vivus (maxwellito. is a class-based JavaScript tool for various styles

examples of animation styles, timing options and advanced options. (2) The site for

depicting tacos, sombreros and cacti. It uses Velocity.js, and animation is

designer Katie Kolvacin has delightful vector animations all over her personal site

of animation. Its documentation website includes

El Burro (www. includes delightful line art

triggered by scrolling. (3) Sparkbox

( All are built with SVGs, and are fun to watch.

april 2016 57





Jonty Sharples and Andy Beaumont explain how their startup is helping to make the world a better place Jonty Sharples and Andy Beaumont met whilst working at London agency Albion; Sharples a design director and Beaumont working as a creative technology director. After three years at the company, the two decided to go their own way, together. They launched Hactar in 2014, with the aim of only working on projects that brought about social good. We spoke to the co-founders about the challenges of their chosen career path, and why Hactar is a business with a difference. net: Hactar helps organisations with a social conscience. Why is this important to you? AB: If the thing you do for a living can be used to either make the world a better place or to make it worse, why would you choose the latter? Despite the stresses of starting a business, I sleep better at night now. JS: We wanted to build an agency that didn’t litter, and one that helped create and support positive, ongoing social change. Helping organisations doesn’t mean just being there from day zero to launch, listening to them and their users; it’s about being with them throughout their product journey, beyond delivery. To bastardise a Paul Valery quote: ‘A website is never finished, only abandoned’. And I think the same can be said of a client relationship. We love partnering with our clients, and these partnerships are rarely abandoned. net: Was it something you both strived for from the very beginning of Hactar? JS: Absolutely. Having worked for years across the digital sector, we’ve all been exposed to, and involved in, some rotten working practices – both in process and execution. We felt that Hactar should be there as a tonic for underserved


april 2016

Team time (L-R) Jonty Sharples, head of design Fadi Dagher, tech lead Sonny Baker, Andy Beaumont


info Location: London, UK Established: 2014 Selected clients: SuperCarers, Responsible 100, BeyondMe, NSPCC, Code Club Expertise: Product design, service design

april 2016 59

and oversold digital service clients, whether novice or well-seasoned. AB: When you’re starting a company, you need to think about what your own personal goals are, as well as the goals of the company. I wanted to spend my days working on projects that would make me feel good. When your work has only positive outcomes, the bumps and challenges along the way don’t get you down. net: Do you think there are enough agencies rooting for ‘the little guy’? JS: In a word, no. We have a mantra: always provide something meaningful, whatever the budget. Living by this rule has allowed us to take on clients that other agencies wouldn’t give the time of day to. AB: It’s growing, but it’s a very difficult sector to serve. Budgets are sometimes tight enough that typical agency scheduling is impossible – you can’t do this kind of work with endless senior staff and an account management team whose primary function is to squeeze more money out of the client. Because we knew this from day one, we designed our own agency the same way that we design products for our clients: by re-thinking what it should be from the perspective of the client. net: You explain that you produce ‘thinking and technology solutions’ at Hactar. Do you think others are too

quick to focus on the tech aspect and not the ‘thinking’ behind projects? JS: We’re a small agency, so working cheekby-jowl isn’t so much of an effort, more a necessity. The individuals we bring together are experienced enough to operate autonomously, but when a strategic brief needs another brain or a coding puzzle needs a fresh set of eyes, it’s only ever an elbow nudge (or Slack message) away. A huge part of our job at the beginning of any client relationship is outlining how we approach a project, and what the business requirements are. The notion of a segregated digital strategy should by now be redundant. We design and build digital stuff, but it’s part of a much bigger piece of service thinking. Do we really need a huge complex platform today? Can we leverage or adapt an existing internal process until we know it’s the right thing to put money behind? Digital is a tool in the toolbox; I think the art is knowing when not to use it. net: You created a platform for new carer service SuperCarers in just three weeks. Can you tell us a bit about that? AB: SuperCarers was a special case for us as it’s a fast-moving startup with incredibly passionate founders and investors who all know what they need to achieve and why it’s important. Working at that startup pace while also trying to run an agency was an

Left BeyondMe is a charity that links grassroots charities with industry specialists, and was Hactar’s first client Above Jonty Sharples (left) and Andy Beaumont outside their office in Soho, London


april 2016


office culture

Jonty SharPleS Co-founder

What’s on your desktop today?

Laptop. Artefact Cards. Empty coffee cup. Time-share cat. Lots of files. Too many tabs in Safari.

What little things make your life worthwhile?

SuperCarers Working with this passionate startup posed a particular challenge

Responsible 100 Hactar built a bespoke platform for businesses to assess their sustainability

education, but we shared the vision and the goal so it was something we couldn’t let go of. JS: SuperCarers has the most remarkable founders; like all our clients they’re wedded to the cause, and it shows. Trying to keep pace and endeavouring to steer product development when it needed steering was always going to be a challenge. We’ve worked alongside startups before, but I think at some point the boundaries between agency and client began to blur, for good and ill. There were times when the processes and roles we’d designed together just imploded, and it took a lot of effort from everyone to rebalance how we were working, as a partnership.

possible we set out to become partners with our clients. This means we get to know them, their organisation, and their users incredibly well. AB: One of the most important things you can do in a client relationship is to have the client in the room when you’re discovering user goals or conducting usability testing. It’s often educational, surprising, enlightening and energising for them to see and be a part of this process. It also helps us become a part of their team. It’s important to care about a project enough that you’ll sweat the details.

Websites: www.YouAreListening.To,, Apps: Slack, Sketch, 1Password Audio: ‘The Best Show’, Radio 4, a mysterious high pitched buzzing sound that seems to come from all corners of the office at once Reading: Whose Mouse Are You?, Tom Drury, recruiter spam

What do you have on the walls?

The Polish poster for Trading Places, which makes it look like some great lost psychedelic masterpiece.

What will you do for lunch? Anything egg.

What hours do you work? All of them, in order.

net: Your work with BeyondMe was called “collaborative and informative” by the client. Why is it important to approach projects in this way? JS: I say this a lot, but we’ve been incredibly fortunate with our clients. One of the many advantages of working in the social good sector is that clients tend to be wholly

net: Jonty, your past talks have focused on learning to listen and be less arrogant. Do you think that’s something that has ensured the success of Hactar? JS: Absolutely. The design industry can still be incredibly opaque. We pride ourselves on being open and transparent with our clients. Walking into a client’s office and laying down a one-size-fits-all solution, an inflexible way of working, or inferring that we have all the answers, isn’t good

invested in their cause and impact. BeyondMe was our first client, and we’re still working with them today. Where

for anyone. We have a responsibility to understand the inner workings of the organisations we partner with, otherwise

What else do you do in the office?

Complain about the price of office space. Discuss where to eat lunch. Try to act cool when passing Chris Morris on the stairs.

Describe your working culture in three words ... Tennessee Williams play.

april 2016 61




A look through the key dates in Hactar’s history June 2014 Sharples and Beaumont leave Albion, get really drunk, and open Hactar

June 2014 BeyondMe becomes Hactar’s first client

october 2014 Work begins on SuperCarers

December 2014 Works with Code Club on its 12-month platform strategy

January 2015 Pitches for its first piece of work and vows never to pitch again

may 2015 Work begins with Responsible 100

June 2015 Sonny Baker joins Hactar as culture minister

July 2015 Nominated for New Agency of the Year net award

november 2015 Begins work with NPC and the NSPCC on SupportShare

December 2015 Fadi Dagher becomes ‘head of thinking more’

SupportShare For this service that provides support for mistreated children, Hactar created a web app that enables the support organisations to learn about the services of other UK providers

it’s not a partnership, it’s a design dictatorship. Not being a colossal dick 100 per cent of the time helps, too. net: Andy, you made a Tumblr of sites that hide their content behind invasive pop-ups ( Do you think the trend has diminished at all? AB: I think at the very least it made a few people stop and think about the experience they were forcing on their users, but it’s hard to see a meaningful decline in these tactics. On the other hand, maybe it was the thing that started the conversation that led to Apple incorporating content blocking APIs in iOS and OS X’s Safari. The problem is this is an arms race and Apple just gave everyone nukes. Now we’ve got nukes, we should be very afraid of what the ‘growth hacker’ army will unleash on us next. net: Can you reveal a little bit more about your process at Hactar? JS: In the words of Jeff Gothelf in Lean UX, “What’s the smallest thing you can make or do to test your hypothesis?” We’re all about the smallest thing. Some clients have found that unnerving; ‘Why aren’t you spending all the money?’, ‘Where’s my big bang?’, ‘Why don’t you have all the answers?’ By starting small, with research, workshops and with reckons, we’re far better placed to build something robust and valid. We’ve only ever had one client that was totally befuddled by this iterative approach. AB: Our projects tend to differ wildly, so our process varies too. We’ve been careful to hire and work with people who are more


april 2016

interested in questioning, interrogating and improving a process than following a recipe card. Every project we take on should teach us something, and the process should evolve with us. net: Were there any challenges you overcame during the set-up process? JS: Many challenges. It’s not like you’re just working as a contractor; doing the work when you like and taking a break if there’s a fallow patch. This is a very different proposition. Growing an agency is challenging if people think they’re buying individuals rather than a team. We’ve worked really hard in the last 12 months to ensure that as we grow our clients get to meet everyone. They get to meet Hactar. AB: There have been fewer challenges in the first year of Hactar than in a single day of working in a big ad agency. It’s a bullshit-free zone. Nobody asks us to synergise their brand into emerging disruptive digital native millennials. net: Any advice you’d give to others wanting to go their own way? JS: Do it. Just make sure you have a cushion to absorb the bumps. Remembering that you’re now a business owner – big or small – is pretty key. You will learn to love a good spreadsheet, but you shouldn’t spend your life in them. AB: Forget everything you learned working for a big agency and do it the way you know it can be done. Next month: We chat to Mike Busby, chief design officer at BitGold


How we built

How we built

Resonance How Soleil Noir Studio brought a new dimension to classical music in a synaesthetic experience for the Orchestre de Paris





brief When the Orchestre de Paris moved to a new music hall, the Philharmonie de Paris, Soleil Noir Studio was tasked with creating an immersive experience to promote the new venue and attract a new, younger audience.


april 2016



Close up (1) Resonance invites users to conduct the music and capture their interpretation. Forms on the screen are linked to the instruments on the score. (2) The user can choose between two classical masterpieces: Dvořák’s Symphony No. 9, ‘From the New World’ and Bernstein’s ‘Mambo’ from West Side Story. (3) During this odyssey, users can click to capture their favourite moments as a screengrab.

(4) At the end of the journey, users are invited to select a signature visual from the different screen captures. They can move into the 3D scene and give their creation a name. (5) These posters then become part of a gallery page, featuring other users’ creations. (6) The About page explains the concept of synesthesia through the work of artists like Paul Klee and Kazimir Malevich.

How we built Panagiotis thomoglou

camille chalvin

Rodne y Paul timeline

The key stages in the project DeCember 2014 Panagiotis is a senior developer, creative technologist and technical lead for the site w: t: @hellopath

Camille is digital strategist at Soleil Noir, and was responsible for the production of the site w: t: @CamilleChalvin

Resonance (www.orchestredeparis. com/resonance) is a synaesthetic experience by French agency Soleil Noir, to promote the Orchestre de Paris. The website uses audio and WebGL to enable visitors to explore classical music through sound and colour. Like conductors in a performance, users move their mouse to the tempo of the music to draw ribboned patterns. There are two worlds to travel through – one based on Dvořák’s Symphony No. 9 ‘From the New World, and the other on Bernstein’s West Side Story. Here, creatives from Soleil Noir explain how they made classical music more approachable. net: What was the brief? CC: The Orchestre de Paris was moving to a new home in the Philharmonie de Paris and needed to address a new, younger public. They asked us to address this target with a playful and immersive experience that would make users feel the emotion of symphonic art beyond the music.

Rodney is art director at Soleil Noir, and leads the studio’s interactive efforts w: t: @Palrdy

net: What were your top priorities? CC: To fight prejudice, and encourage people to have a different vision of classical music without altering the pieces. To be playful while still showing the nobility of the art of music. net: The site deals with quite a specialist subject matter. How did you tackle the research stage? CC: Our team was a representative panel of the people we’d like to address: some new to classical music, some fans, all young. Along with the client, we put together a list of easy and inspiring works that could be appreciated by novices. The creative team also did some research into Orchestre’s archive. After that, they chose two musical extracts from the selected works.

net: Can you tell us more about the concept behind Resonance? RP: Some studies showed that when listening to music, the human brain involuntarily evokes an experience of colour. This process is called synaesthesia. Influenced by the work of artists like Paul Klee, Kazimir Malevich and Viking Eggeling, we

net: How did you approach the CSS animations on the site? PT: For the sequential animations we used GreenSock’s great TweenMax and TimelineMax libraries. If you have multiple sequences of animations, it is really hard to handle them with pure CSS – you need a bit of JavaScript power. The rest of the interactions – such as the mouse rollovers and simple animations – were made just with CSS keyframes and the transitions using transformations. We focused on transformations like scale, translate and skew because they take advantage

imagined an experience in which colours and forms are linked to the instruments on the score.

of the GPU, which was a very important aspect in order to boost the performance of our interactions!

The Orchestre de Paris comes to Soleil Noir with the idea of creating an experience for the youth to discover and experience classical music in an immersive way

January 2015 After three weeks, the synesthesia concept is born

february 2015 Soleil Noir works to connect MIDI files, 3D forms and 30-second prototypes of Bernstein’s ‘Mambo’. The orchestra is thrilled!

marCH 2015 The graphic universe of Dvořák’s piece is brought to life: dreamlike with a hint of Indian symbolism

June 2015 The graphic universe of Bernstein’s piece is created: colourful, inspired by New York in the 1960s

august 2015 The experience, named Resonance, is launched on desktop and tablet

november 2015 After three months of intense collaboration the experience is released on an interactive screen at the Philharmonie de Paris

april 2016 65


How we built 2




The research, testing and prototypes that led to the final design (1) The teamâ&#x20AC;&#x2122;s early UX design and website wireframes. (2) First sketches, exploring possible artistic forms the music instruments could take. (3) Guidelines for the final musical elements. (4) A 3D model of a scene from the experience, created in Cinema 4D. (5) A MIDI simplification built with Logic Pro. (6) An interactive screen at the Philharmonie de Paris took Resonance from a desktop experience into the real world. 4




april 2016

How we built net: What was the most complicated part of creating the animations? PT: The most difficult part was to connect the MIDI file with the forms. There were a lot of instruments on the score and we had to isolate the most significant ones in order to simplify the sheet. It was a long and difficult process! net: What are the key design features? RP: We created a set of beautiful scenes with different forms and colours to ensure we held the user’s attention. We wanted the experience to be surprising, taking place in an everchanging universe. PT: One of the main features is the customisation of the poster. To ensure a unique and personal rendering, we provided an advanced toolbox that allows users to craft scenes in 3D. That’s why we created a full 3D environment, using WebGL technology. net: Why did you make the experience for tablet and desktop only? PT: The real problem wasn’t to be responsive, but to be fluid. The 3D part of the site needs a lot of resources so it was impossible to achieve a good performance on mobile. CC: And anyway, large screens offer a more immersive experience.

Classical options There are two classical pieces to explore: a dreamy landscape for Dvořák’s Symphony No. 9 and a colourful, New York-inspired world for Bernstein’s West Side Story

net: Keeping the site running smoothly must have been a key consideration. How did you approach performance? PT: During debugging we used Chrome DevTools a lot to help us find memory leaks and expensive operations. For the 3D part we used the Shader Editor, a Chrome extension that gives you the ability to edit and experiment with your shaders in real time.

net: What was the biggest technical challenge you encountered? PT: The biggest technical challenge was to organise a large number of different clusters of animations and forms for each MIDI event. Each cluster had a unique style and behaviour, but they all inherited the same base functionality, so we could eliminate duplicate code. net: What was the biggest lesson you learned during the project? RP: We learned a lot about design processing and team coordination. An experimental project like Resonance asked for the creation of enormous amounts of content: researching, testing, sketching, storyboarding and so on. This preliminary work prepared us for potential complications and meant we could react faster because we had the big picture in mind. net: What advice would you give a studio facing a similar sort of brief? CC: Even a topic like classical music can be led to innovation. There is a meeting point between the classic and modern. You just need to find it.

Music gallery Users pick their favourite screenshot of their creation, and share it in the gallery

Next Month: Around the World in 12 Dishes, by Elespacio

april 2016 67

Features Cover feature


april 2016

Cover feature

The web tools movement is as hot as ever and there are plenty of free, high-quality options available. Louis Lazaris runs down 50 useful finds


Author louis lazaris Louis (@Impressive Webs) is a frontend developer, a managing editor for SitePoint, and curator of Web tools Weekly, a newsletter for frontend developers. he blogs at www.impressive

ILLuStrAtIon tobias hall tobias is a freelance illustrator, letterer, designer and mural artist working out of London. he has worked on an eclectic mix of projects and boasts a growing list of international clients

n many occupations, solving problems and finding ways to be more productive are top priorities. This is especially true for web designers and frontend developers who perform and repeat many microtasks. The fact we work with open web technologies that are often used to build free and open source software means we have a plethora of tools at our disposal. In my ongoing research into web tools, I come across dozens of new options every week – scripts, plugins, browser extensions, native apps, web services, libraries, frameworks, graphic packs and so much more. After wading through the mountains of possibilities, I’ve put together a categorised list of 50 amazing tools that can benefit web designers or frontend developers. And the best part? They’re all absolutely free!

HTML, CSS & SaSS TooLS 1 ai2html This is an open-source script that converts your ‘.ai’ documents to HTML and CSS, from the developers at the New York Times. It looks like a really powerful and useful tool for designers who work in Adobe Illustrator. The script is a JavaScript file that you download and drop into the scripts folder of your Illustrator install.

It’s a toolkit of JavaScript plugins that helps you take advantage of the latest standards and conveniences in CSS development, and it’s well worth looking into (see boxout p72 for more).

3 autoPrefixer You’re not still writing CSS vendor prefixes by hand are you? Keep your development files clean and let Autoprefixer (now a PostCSS plugin) do the hard work for you as part of your build process.

4 uikit While Bootstrap and Foundation are the clear winners in terms of popularity in the framework space, UIkit is worth checking out. Its core features and interface components are right up there with the big kids on the block.

5 aniColleCtion AniCollection is a library of CSS animations. It sports an interface that lets you easily add animations to your collection and quickly grab the necessary HTML, CSS or JavaScript code to implement them in your project. You can even submit your own.

6 briCk

2 PostCss The community around PostCSS is Mozilla’s UI library, based on the new Web Components standard. It includes a calendar, a form that can be hooked into an IndexedDB component, a tabbar and

gaining momentum and growing steadily.

lots more.

april 2016 69

Features Cover feature

susy A popular layout toolkit based on Sass

ai2html this open source script for converting AI files to htML and CSS comes from the developers at the new York times

7 html_Codesniffer You’re probably familiar with basic HTML and CSS validation. This tool is specifically for accessibility testing, and you can use it directly through the site or as a bookmarklet. It will test your HTML against WCAG 2.0 Level A, AA, AAA, and Section 508 compliance.

8 htmlhint Linting has slowly overtaken validation in importance. This tool has multiple options and lets you cycle through the warnings and errors in your code.

9 domflags A Chrome extension that lets you flag elements in the DOM using a domflags

attribute. When the DevTools are opened, the first flagged element will be autoinspected, and keyboard shortcuts can be used to navigate through the flags. This tool is handy for tackling a messy DOM that’s hard to navigate.

10 susy A Sass-based layout toolkit that’s gained steam over the past year or so. It has a strong community and offers lots of customisable features to suit the needs of just about any project.

11 CritiCal Did you get the memo? Inline CSS is a requirement for good performance. Addy Osmani’s Critical is available as a Grunt plugin, and along with Filament

htmlhint A static code analysis tool for htML

Group’s loadCSS script ( it is a great option for extracting and loading your above-the-fold styles.

12 shoelaCe Shoelace is an easy-to-use Bootstrap 3 visual grid builder. Amongst its features are responsive media query views and a fully functional preview.

13 sass lint A node-based code quality tool for Sass/ SCSS code, available as a Grunt or gulp plugin. Sass Lint is especially great for beginners who aren’t too familiar with Sass best practices.

JavaSCripT TooLS 14 reaCt Facebook’s popular library includes a virtual DOM and optional JSX syntax. Its reusable components are designed to to help anyone building large, dynamic web apps.

15 babel A JavaScript transpiler that lets you use domflags this Chrome extension makes it easier to

navigate deeply-nested htML elements in the Devtools


april 2016

babel A JavaScript transpiler that allows you to use next-generation JavaScript right now

the newest ECMAScript features (ES6, now called ES2015) without having to wait for browsers to catch up.

Cover feature

uikit the well-supported frontend framework offers a large selection of components

16 annyang A small JavaScript library to help you build voice-controlled interfaces. It has a really nice API that’s easy to use. After

JSCS is not just another code style linter. What’s so powerful is that it enables you to specify your own custom style guide, against which your code is linted including the library, you define your commands along with the behaviour in response to those commands.

17 list.js This is a fast and powerful way to create search, sort and filter functionality for lists, tables or just about any type of grouped content. All you need is some HTML and a few lines of JavaScript.

18 VerbalexPressions

list.js Add search, sort, filters and flexibility to htML lists and tables with this tool

the actual expression, it can be a great way to learn, too.

19 skeuoCard Skeuocard progressively enhances credit card inputs with its skeuomorphic interface. There are a few scripts like this one, but Skeuocard is one of my favourites. Users enter their details inside a realistic representation of a credit card, which automatically matches the layout of the specific card type (Visa, Mastercard etc.). They can even flip the card over to fill in the other side.

20 jsCs This is not just another code style linter. What’s so powerful about JSCS is that it enables you to specify your own custom style guide, against which your code is linted. Alternatively, you can choose to test your codebase against popular style guides from jQuery, Airbnb, Douglas Crockford, Wikimedia and more.

21 Chart.js If you’re like me and can’t stand the thought of writing regular expressions One of many available JavaScript charting libraries, but certainly one of the nicest. There are six HTML5 canvas-based chart

from scratch, this is the library for you. It’s a plain-English way to write regex and since the return value compiles to

types, and all charts are responsive, modular and interactive. The library is small and dependency-free.

Make THe MoST of your TooLS

there’s no way a list of 50 tools can even come close to doing justice to the amount of free stuff available, particularly for frontend developers. although i’ve tried to include only tools that are in it for the long haul (i.e. those that are well supported by the community), there’s no guarantee they will still be around in a year. due to the ever-changing nature of this industry, a lot of these tools will be outdated in a short time. many in the industry have expressed their concerns over the huge influx of tools and technologies, and how hard it is to keep up. my advice is this ... firstly, learn from tools. because most tools are open source, you can peek at the code and learn stuff. this alone can help you become a stronger developer, even if you never actually use most of them in a real project. second, solve problems. is it ridiculous to build a site with Css alone, and not sass? no, because sass is just one means to an end, and all it does is produce the Css you would have written in the first place. yes, sass is a great convenience, but it’s not required. don’t be overly concerned about falling behind or using the newest tools just for the novelty.

april 2016 71

Features Cover feature

a CLoSer Look: poSTCSS

PostCSS is included as one of the tools in this feature but the short description I provided doesn’t do it justice. PostCSS isn’t just a single tool, but a community of plugins and plugin developers pushing CSS forward to what we want it to be in the future, or what we envision it will be when certain features are fully supported in all browsers. As with any tool, PostCSS certainly could introduce major drawbacks to your workflow (including buggy behaviour), which you may have to discover on your own. But if you need some incentive to get started with it, here’s a sample of the features it can enable:

jQuery boilerplate A great tool for getting started with jQuery plugin development

● Conic gradients ● The :any-link and :any-button pseudo-

22 Quill

classes ● Fallbacks to convert modern CSS to equivalent code that works in older browsers ● Language extensions, including @if , @each , @for , variables, selector namespacing, quantity queries and much more As I mentioned, this barely scratches the surface of what’s available in the PostCSS ecosystem. It’s worth immersing yourself in PostCSS and how the plugins can be incorporated into your workflow. Below, I’ve included some resources to help get you started. If you’re up to the task, you might even come up with a plugin you can write yourself. ● it’s time for everyone to learn about

PostCss ( – A great article to start with as an introduction to PostCSS ● PostCss deep dive ( – A series of articles on Tuts+ ● ( – A searchable catalogue of PostCSS plugins This is an embeddable rich text editor supported in all modern browsers, as well as IE 9 onwards and mobile. It offers powerful customisation options through a clean API.

23 awesomPlete Lea Verou’s easy-to-use form input autocomplete widget. I love that it can be used with just HTML and the library, without any extra lines of JavaScript. On top of that, it offers advanced customisation options through built-in events and methods.

24 jQuery boilerPlate jQuery plugin developers will appreciate this boilerplate, which provides a nice starting point for making plugins. The source is well commented so it’s useful for those just starting out with jQuery plugin development.

25 foundation for aPPs You’ve no doubt heard of ZURB’s Foundation framework. This is a separate project specifically designed for building responsive web apps. It’s based on AngularJS, but doesn’t require advanced knowledge of Angular.


april 2016

DeSign TooLS 26 CssketCh CSSketch is an open source CSS plugin for Sketch, the popular Mac-based design and prototyping app. With it, you can write CSS inside Sketch, applying the styles to the items on the page in your current Sketch file.

27 fluid for sketCh Another Sketch plugin: this one assists with designing responsive layouts in Sketch. Fluid’s features include the ability to relatively pin, offset, centre and size objects, and use mathematical expressions.

28 allthefreestoCk This is a massive single resource where you can search for free stock photography from loads of different sites. It includes popular free sources such as Unsplash, along with other, lesser-known sites, to give you plenty of options for populating your designs.

29 oCtiCons There are countless options for icons, and GitHub has released its own nicely designed set. Octicons is available as

Cover feature exactly what it should do, without an unnecessary focus on device sizes.

35 ioniC One of the biggest HTML5-based mobile app development frameworks, built with mobile-optimised CSS and JavaScript components. Ionic boasts a very strong community, which is great for those looking for a good long-term option.

36 embed resPonsiVely

transformicons SVG and CSS icons that can be animated with CSS transitions

an icon font (or web font), which is commonly inserted into a page using CSS pseudo-elements.

30 transformiCons Transformicons is a different kind of icon set. These are SVG- and CSS-based icons that incorporate CSS transitions for an animated effect that can be controlled with some JavaScript.

ish does exactly what it should do, without an unnecessary focus on device sizes. It’s the only responsive layout testing tool you need

0to55 An online tool to help designers find variations of a chosen colour in hex format

rWD & MobiLe TooLS 33 PiCturefill The popular responsive images polyfill allows you to use HTML’s new <picture> element and its associated srcset and sizes attributes in your projects today, with strong browser support.

34 ish There are loads of responsive layout testing tools, I’m only including one, because it’s all you need. ish does A simple online tool that lets you grab responsive embed codes for all sorts of popular media sources. It supports YouTube, Vimeo, Google Maps, Instagram, Vine and more.

37 tablesaw Responsive tables are one of the most difficult layout considerations. Tablesaw is a set of jQuery plugins to help in this area, by means of features like stack, toggle, minimap and more.

38 Qaid A bookmarklet that provides a tool panel with which you can overlay an image of a design (with alpha setting) to compare to your work in the browser. You can also test breakpoints.

31 iCono One final icon option; this time a pure CSS set built with CSS pseudo-elements.

32 0to255 An online colour tool that helps designers find variations of a chosen colour (e.g. for choosing hover states, contrasts, gradient colours, borders and so on). This takes away the need for guesswork with hex codes, and is great for those who design in the browser.

ionic this is a popular library of mobile-optimised CSS and JavaScript components

april 2016 73

Features Cover feature 39 grunt-resPimg A Grunt plugin to automate tasks associated with responsive images: image resizing, rasterising of SVGs and PDFs, and lossless optimisation.

40 email framework An HTML email framework to help build responsive email layouts and templates. This one offers well-tested modules, grids, typography, buttons and more.

Svg TooLS snap.svg this is an SVG-manipulation library from the Adobe Web Platform team

41 snaP.sVg An extensive JavaScript library from the Adobe Web Platform team. This provides a clean API for creating, animating and otherwise manipulating SVGs on the web.

Cross-device testing tool Browsersync will live-reload your project for every edit and save in all browser instances. It even syncs up navigation and scrolling in the browser sessions Circulus.sVg Sara Soueidanâ&#x20AC;&#x2122;s helpful SVG pie menu navigation builder

reSourCeS If you want to keep up with the latest in frontend tools, there are quite a few dailies, weeklies, and other resources you can subscribe to. Here are a few of my recommendations for those wanting to keep up and discover new stuff.

web tools weekly My own weekly newsletter. This features a list of tools for frontend developers, broken down into categories.

javascript weekly


april 2016

In addition to links to articles and tutorials, this weekly includes lots of great JavaScript and jQuery tools and plugins.

42 ViVus A dependency-free JavaScript library that animates your SVGs, giving the appearance of drawing. The on-page demos are well worth checking out.

43 CirCulus.sVg Five design-related links every day, often featuring new and useful tools for designers and frontend developers. An online tool that lets you generate the SVG code for a pie menu. As the site points out, pie menus have (surprisingly) been found to be more usable than standard nav in many instances.

totally tooling tips

44 Paths

sidebar A YouTube show by Addy Osmani and Matt Gaunt that includes tips and suggestions on modern tooling. An interactive interface to help explain the path element syntax for building SVGs. The editor allows you to download the completed shape in SVG format.

Cover feature

browsersync this is a powerful tool for synchronised cross-

Paths An online SVG editor that helps you understand SVG’s path element syntax

45 sVg editor

device testing and live debugging With this tool you can upload an SVG file or paste in your SVG code, and it will optimise it by removing white space, unnecessary attributes, namespaces and so on, to reduce file size.

will live-reload your project for every edit and save in all browser instances. It even syncs up navigation and scrolling in the browser sessions. You can add CSS outlines for debugging, and a latency option enables you to mimic a slower internet connection.

beST of THe reST

48 braCkets

46 atom The GitHub dev team’s hackable text editor for modern development. Atom comes full-featured, with packages, themes, smart auto-completion, multiple panes and more. Best of all, it can be fully customised via HTML, CSS and JS.

47 browsersynC Browsersync is like LiveReload, but on steroids. It’s a powerful tool for synchronised cross-device testing that

atom Github’s text editor can be customised to suit your needs Adobe’s contribution to the text editor race is an open source editor with focused visual tools, preprocessor support, and the ability to ease in-browser design through live preview. It also integrates well with Photoshop via the Extract for Brackets extension.

49 aCCessible html5 Video Player This is a video player from the PayPal accessibility team. It has custom controls and a keyboard-accessible and

screen reader-supported UI. There are no scripting dependencies and it uses HTML5 form controls for volume and progress indicators.

50 let’s enCryPt If you’re looking to switch a project over to HTTPS, you’ll want to investigate this option. It’s a free, open and automated certificate authority that provides you with a hassle-free way to go secure. So that’s it for my 50 free tools. It’s likely some of these were familiar to you, but I’m sure you found at least a few options that you’ve never seen or considered before. If you work regularly with design and frontend technologies, no doubt you’ll be able to add some of these to your workflow or toolbox. So what are you waiting for? Make use of these free tools and go build something great!

let’s encrypt this automated service will help you switch a project over to httPS

april 2016 75

Features Secondary feature

Living styLe guides

A living style guide might be the missing piece of your workflow. Jordan Moore explains what they are and how to create one


he use of style guides in web projects has been on the rise in recent years, thanks to a heightened community awareness, with various industry pros demonstrating their use and effectiveness. This increase could also be a consequence of more ambitious web projects, coupled with the adoption of responsive web design on a more capable web. No matter what the cause, style guides are an effective tool as part of the modern web design workflow. They will help you design and build faster, with more accurate and consistent results. Whilst they are primarily a tool for you as a designer and/or developer, they can be a deliverable for clients too. Style guides give clients an insight into the design system being established, and the palette that will form their product. Samantha Warren has explored this idea in detail with her Style Tiles (, which is a method for demonstrating a visual language to clients in the form of fonts, colours and interface elements.

What is a style guide? In contrast to a traditional static web design layout composition produced in Photoshop or similar, a style guide is a set of elements and components that when used together can form a complete layout or parts of that layout. When produced correctly, they


april 2016

Author Jordan Moore Jordan is a freelance user experience designer from Northern Ireland, specialising in responsive web design and mobile technologies

Features Secondary feature

left GoV.uK’s style guide

has attracted much praise from within the industry

right the clear, thorough

guide is beneficial for designers, developers and even content producers

are scalable and flexible, making them the perfect tool for building responsive designs. In this article, I’ll use the terms ‘style guide’ and ‘design system’ interchangeably, as I believe style guides are most effective when they form a system for managing existing designs and allowing the production of new ones with ease. So why would you want to switch from a traditional workflow? For a start, introducing a style guide means you will be able to get into the browser quicker and spend less time in desktop design tools. At their most useful, style guides enable you to work up all your design concepts in the browser, demoting the likes of Photoshop and Sketch to asset creation tools, rather than what you use to envision layouts. The problem with the traditional approach of asking clients to sign off on static layouts is that these are essentially photographs of what the website might look like. Of course, we’ll try our best to make the final product look like the promise we’ve made in this photo, but we’re creating an idealistic render, without having to contend with all the living parts of the web. Many small nuances – such as type rendering and spacing – may change. This can amount to the client feeling like they have been misled by the Photoshop render. Using style guides as a design deliverable eradicates these difficult discussions with a client, and can dramatically speed up your workflow. They make design changes easier to complete without much hassle, and get you in the modular mindset from an early stage in the project workflow. Starting with the basics, let’s look at the ingredients of what makes a good style guide.

type This includes the whole typographic hierarchy, covering headings, lists, block quotes and paragraph text. It should also cover any variations within these categories, such as captions, drop caps and any other special typographic treatments, and UI contexts like buttons, navigation and form fields.

grids and spacing This should include both horizontal and vertical layout grid systems. Grid guidelines enable you to rapidly prototype and build layouts without having to make time-consuming adjustments to spacing and margins.

Colour Your primary colour palette, including the main link colours, actions and element colours (for example, buttons, labels and icons). There will also be colours outside of this palette for circumstances outside of the ideal design state, like error and system messages, and validation.

Modules Modules comprise elements such as buttons, form fields, tabs and navigation, as well as collections of elements such as captioned images and blog post meta data. They also include combinations of elements working together – for example an article heading, date and introduction paragraph, a tooltip with a small heading and text, and so on. Ideally your style guide should give you everything you need to design and build a page at a moment’s notice, without having to open up Photoshop or

Secondary feature

ReSouRCeS FoR STYle GuIDeS Making your first style guide can be a scary thought if you haven’t used one before. Thankfully there are plenty of resources out there from talented internet folks who have been there and done that! Here are some of the best.

style guide boilerplate

get started Brett

Sketch. In regards to the format, a style guide should be live HTML, categorised in a manner that is easily maintainable for you and any other designers that might come into contact with it. I find the headings I’ve covered here help as a base to get started with, but feel free to add subheadings and get more specific. Take a look at Brad

Introducing a style guide means you will be able to get into the browser quicker

Jankford’s style guide boilerplate is a great starting point. It covers some elements we tend to forget Think of this as Bootstrap for style guides. Brett Jankord provides the essential framework, making sure you’re covered for all potential assets that might appear in a web project. It’s particularly useful if you are giving clients WYSIWYG editor access in your CMS.

Frontend style guide and pattern library Anna Debenhan has been collecting style guides in the wild. Take a look if you want a few examples to inspire your own approach. If you really want to deep dive into improving your workflow with style guides, this open source resource from Anna Debenham and Brad Frost has you covered. It includes plenty of reading materials on the creation of style guides and using them within different methodologies.

Frost’s Atomic Design ( as a potential methodology for organising this part of a design system.

Planning a style guide Before you code a single line of your design system, you need to know roughly what parts you’re going to need for it. Early on in the project, when a client has provided the initial content and assets you’ll be working with, you should aim to establish the foundation of your design system with a set of wireframe sketches. Wireframes are a style guide’s secret weapon. Taking time to sketch out all the screens in your product, including any specific UI components you’ll likely need in the final product, means you’ll have a list of all the required elements and can start building a strong, informed design system.

april 2016 79

Features Secondary feature

get a bird’s-eye view


It’s at this point I recommend finding a large physical work area where you can spread out your wireframe sketches, so they are all visible at once and you can get a broad view of the system you’re about to establish. Look over your sketches and notice patterns emerging. Perhaps a combination of elements appears together frequently, and could become a reusable module? Also look for patterns that are trying to emerge. For example, a list of blog articles might take a similar format to a list of search results, but let’s say the elements are arranged in a different order. Perhaps changing one of the two to match the other will help the user read a pattern they have subconsciously learned elsewhere in your product.

What happens when you want to apply a style guide to an existing project? Bringing a set of established designs under the control of a style guide can seem like a daunting task, but much of the work is already done for you. Just like you would with a set of sketches, I recommend getting a bird’s-eye view of your entire product and running an audit. Ask the following questions:

What is consistent? Identify the type, grids, colour and modules that are consistent throughout the product and start to group and catalogue them under the appropriate headings. Be aware of similar styles that are perhaps inaccurate copies of other items, and which can be corrected and grouped under an existing style.

Catalogue everything

What is redundant? Now is the perfect time to simplify the visual language. Are there too many typographic styles? In what context are they being used? Are they trying to convey similar messages? If there are different patterns being used for the same purpose or to say the same thing, consider removing the less effective pattern. It helps to have meaningful data and analytics to inform such decisions.

What patterns are emerging? Beyond the patterns that already exist, are there any reoccurring design patterns that need to be catalogued, given an identity and a purpose? Here you can start to solidify the brand’s visual language and add definition to its message.

Where are the gaps? usually projects without a design system in place will have gaps in the component set. For example you might finish cataloguing your style guide, only to find there isn’t a numbered list style, or a table style.


april 2016

Key wireframes rough

sketches of type, layout and modules will help you identify the components your style guide will need

I like to use a set of Post-It Note page markers to label all of the elements in my wireframe pages for reference. For example, a module like a breadcrumb that occurs throughout the sketches could be labelled ‘M01’. ‘M’ indicates it’s a module. The number indicates which module it happens to be in my system – the next module would be M02, M03 and so on. The element itself could be repeated elsewhere, so this breadcrumb pattern might appear on a product page as well as a blog article, both labelled M01, so I don’t end up designing and building multiple versions of the same element when it comes to prototyping the wireframes. After you’ve finished cataloguing and labelling the wireframes, it’s simply a matter of taking that catalogue of elements and modules and building them as a live HTML style guide. Think of it like an Airfix model. You have an instruction sheet (your

Secondary feature

wireframe sketches) and a set of labelled parts (your style guide) corresponding to the instruction sheet. Once you have a concept of what you want to create, you will know what parts you are going to need, and at that point you’re ready to start building your design system. The best part of approaching design systems in this manner is that it enables you to rapidly produce new screens and components – each scenario is only a wireframe sketch away. The style guide reminds you of your existing components and patterns when drawing your next sketch. Once the sketch is complete, you are ready to build quickly with the wireframes as your instruction sheet, using the ready-made elements in your style guide.

aFter the guide is CoMPlete

It is essential a style guide is maintained beyond its initial conception. It must remain current, rather than being a snapshot of what the product’s design system looked like at a particular time. It should be the visual lexicon of your project – the entity you consult whenever a design decision is made after sketching. All new components and modules are made from its DNA, so from a user experience perspective, any new pieces will look consistent as part of the complete brand picture.

left Different coloured markers can help you differentiate between type, modules and grids right Label your living style guide so you can cross-reference wireframes and your component kit

Technically speaking, a style guide is never complete; it grows with your project

Technically speaking, a style guide is never really complete; it’s an ever-evolving document that grows with your project. It’s impossible to know in advance every combination of elements, patterns and modules that will need to exist, beyond what you currently have planned. But that’s OK! True to the ever-changing nature of our web, a style guide can only be as complete as the current state of your product. In its (mostly) complete state, a style guide is a reference for the over-arching visual language of the product you are building. It means you can visualise how new features might take shape, and the look and feel they adopt. It’s also a living library of tested elements and components that can be

If you have never used a style guide in a web project before, try it on your next project and see the difference it makes in helping you design, build and prototype quicker. With practice, they’ll become easier to create, and you’ll even find patterns within your style guide that can be reused to speed up the process of creating the next style guide! A useful style guide goes beyond the capabilities of a visual reference. It becomes your product’s

used to quickly construct new screens or parts of a product, making it the most efficient way to rapidly build projects on any scale.

DNA, from which every piece of current and future design originates to produce the consistent style and characteristics of the rest of the product.

april 2016 81

Tips, tricks & techniques

This monTh FeaTuring...




Use Css blend modes for dramatiC effeCts


get feedbaCk on yoUr designs with notable


bUild a CUstom plUgin for slaCk


10 tools for preCise designing in sketCh


web standards: html5 is the new flash


aCCessibility: hidden disabilities


master responsive UX with illUstrator


animate a CharaCter with CreateJs














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 out for the video icon throughout our tutorials. This issue, two authors have created exclusive screencasts to complement their articles: Dudley Storey’s guide to creating effects with CSS blend modes, and Matt D. Smith’s tutorial on creating a responsive UX with Adobe Illustrator.

april 2016 83


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

DuDl e y S t ore y w: t: @dudleystorey job: Developer, designer, instructor, writer areas of expertise: HTML, CSS, SVG q: what is your earliest memory? a: My younger brother breaking his leg as a toddler (not my fault!)


Use Css blend modes for dramatiC effeCts

Blend modes are now part of an official CSS specification. Dudley Storey explains how to use them to achieve cutting-edge website designs You may be familiar with blend modes from Photoshop or other parts of the Adobe suite: they’re the curiously-named options in the Layers palette that can create dramatic differences in how layers of pixels interact with each other. What you may not have been aware of is that Adobe, in combination with contributors from all over the world, has been quietly moving much of its innovative work in layout, typography and imagery into the CSS specification.

ViDeo Dudley Storey has created an exclusive screencast to go with this tutorial. Watch along at netm. ag/blendvid-278


april 2016

Blend modes revisited Features such as flowing text around (and within) shapes, true drop-caps and blend modes have been making their way into browsers for years. In this article, I’m going to show you how to use blend modes to solve some of the biggest colour and workflow problems that web designers face today.

Your list of available blend modes will contain various names, depending on the version of Photoshop you’re using. Although this list can be lengthy, you need to know just four things:

1 Not every blend mode has been moved from Photoshop into CSS. I’ve highlighted only those that appear in the current spec in fig 1 2 Aside from normal (the default), each of the modes specifies how the pixels of a layer influence the perceived colour of the pixels immediately above it (previously our control was limited to CSS properties like opacity , or colour values with alpha components; blend modes provide us with a far greater degree of influence)

4 The blend modes are collected into groups (see

fig 1). While these aren’t directly referenced in CSS, remember that all the darken modes have a similar


FoCuS on

browSer Support

Figure 1 Photoshop CSS blend modes, organised into groups. Modes that aren’t available in CSS have been shaded out

effect, just to different degrees. The same goes for lighten modes 5 Modes in the darken and lighten groups are opposite in effect to each other In my experience most designers play around with blend modes in Photoshop until the result looks ‘right’. Rather than explaining each of the modes in depth, I’m going to use examples to demonstrate how they can be used today.

Blend modes can solve some of the biggest colour and workflow problems we face today CSS support for blend modes is shared between two properties: mix-blend-mode and background-blendmode . Not surprisingly, background-blend-mode only affects CSS background layers, whereas mix-blendmode affects arbitrary HTML elements. Both have full access to the entire range of blend modes.

Faces in circles

CSS blend modes are supported in every modern browser except one. Microsoft Internet Explorer / Edge has yet to build support (although you can – and should – vote for the developers to do so: and In addition, Safari 9 doesn’t yet support the hue, saturation, colour and luminosity modes. Chrome 46 also has a few bugs when it comes to rendering elements that use the multiply, difference and exclusion modes. Because of those issues, it’s important we treat blend modes as a progressive enhancement to our designs, not a required (or expected) feature, with graceful fallbacks. In most of these examples, that will happen automatically – IE/Edge users will see and interact with the original unaltered content, with no functionality lost. Detecting browser support for blend modes is fairly straightforward. You can use Modernizr: Modernizr.addTest("mix-blend-mode", function(){ return Modernizr.testProp("mixBlendMode"); }); Or JavaScript’s support of @supports : if ("CSS" in window && "supports" in window.CSS) { var support = window.CSS.supports("mix-blendmode","difference"); support = support?"mix-blend-mode":"no-mix-blend-mode"; document.documentElement.className += support; } Both of these methods rely on detecting a class added to the root HTML element with JavaScript, and building CSS that depends on the presence or absence of those classes. Alternatively, you can detect support for blend modes directly in CSS: @supports (mix-blend-mode: difference) { // CSS if the browser supports difference as a mix-blend-mode }

Almost everyone is familiar with the ‘faces in circles’ design motif (see fig 2). Very frequently those faces are also monochromatic, containing all the degrees of colour from a single hue, in order to create visual consistency and cohesion. Traditionally this process is done in Photoshop, meaning that any change to the image must be reprocessed and exported using the same tool. But with blend modes, we can do all that natively inside CSS.

april 2016 85

PROJECTS CSS To demonstrate this, we’ll take an image (fig 3, from, make it a background, and add a colour behind it. The HTML will be a simple link: <a href="#"></a> And the CSS: a{ border: 5px solid #000; border-radius: 50%; display: inline-block; width: 16rem; height: 16rem; overflow: hidden; background: url(profile1.jpg) no-repeat center hsl(200,50%,50%); background-size: cover; } inline-block mode is used so the link may be provided with both a width and a height . Combined with a border-radius of 50% and hidden overflow , it creates a perfect circle. background-size: cover ensures the image completely covers the space; and hsl colour is used behind the image as it is very easy to alter, which will become important later. The result is still full colour. To change this, we’ll add a background-blend-mode : a{ background-blend-mode: luminosity; } Figure 3 A bitmap

image layered on top of a background base layer in a solid colour

luminosity allows the pixel colour of the background layer to ‘soak through’ to the upper layer. The result is a monochromatic image that uses the background

Figure 2 Image in a circle with a luminosity blend mode

colour’s tonal range. To alter the effect, we can simply change the background colour. If we wanted it to be more green, for example, we could change the hue component: background: url(profile1.jpg) no-repeat center hsl(120,50%,50%); If the background colour is close to black or white, the blended result is (not surprisingly) black-andwhite, aka greyscale.

transitioning Blends You might reasonably assume you could animate blend modes by adding a transition and setting the blend mode to normal at another state, such as hover : a{ transition: 1s; } a:hover { background-blend-mode: normal; } Disappointingly, you’ll find that this will not work: blend modes cannot be animated directly. However, with a little parallel thinking, we can animate the background colour and use that to create a transitioned hover effect with blends: a{ transition: 1s background; will-change: background; } a:hover { background-color: transparent; }


april 2016

CSS If we set the background to transparent , the luminosity blend has no effect. By explicitly changing the background, we make the animation more efficient, and successfully transition the effect. You can see a variant of this code at

alternatives An alternative for older browser versions could be achieved with a combination of vendor-prefixed CSS filters: a{ filter: grayscale(100%) sepia() hue-rotate(105deg) brightness(90%) saturate(110%) contrast(140%); } Unfortunately, this won’t work in Microsoft Edge either, since it doesn’t yet support CSS filters (although support is present in the latest Windows Insider preview). A final alternative would be to create the entire UI in SVG.

automatic text contrast A common issue with heavily art-directed pages is text crossing over multicoloured backgrounds, such as images. Ideally, text should always maintain

The Luminosity mode allows the pixel colour of the background layer to ‘soak through’ a high contrast ratio, no matter what the background is (see Lea Verou’s contrast ratio calculator for more info: While careful colour considerations and CSS properties like text-shadow can help address these

issues, blend modes solve them entirely. Let’s use an extreme example: a heading that crosses over a background that moves from white to black:

Figure 4 Text (in white) in

front of a white-to-black gradient using a difference blend mode

body { background-image: linear-gradient(90deg,#fff 49.9%,#000 50%); } With heading text with the content of ‘BAD BOY’ in its default black, any section of the text that sits on the black part of the background will not be visible. There have always been solutions for this. You could turn the entire design into an image, or surround a portion of the text with a <span> element in order to alter it with CSS. However, all these methods have significant drawbacks. With blend modes (specifically mix-blend-mode , since we’re dealing with HTML elements) we can provide a solution using just two lines of CSS: h1 { color: #fff;

Figure 5 Text (in white) in front of white and a dark, photographic background image

april 2016 87




Figure 6 Text clipping mask using mix-blend-mode (photograph by The Narratographer:

mix-blend-mode: difference; } Note that this reverses the default colour of the text, meaning if the browser doesn’t support blend modes, the first word in our text will be invisible. To address this we can use @supports to check if the browser supports mix-blend-mode : While they are still fairly new, the web offers a lot of further education on blend modes: cssgram ( – Una Kravets uses blend modes and CSS filters to excellent effect in this filter library, which replicates popular Instagram filters in pure CSS. css blend modes could be the next big thing ( – Bennett Feely gives an excellent overview of blend modes in this article on Medium. His CodePen account ( is also full of useful examples, as is his blog ( gradients). compositing and blending in css ( – Sara Soueidan has an excellent technical, in-depth overview of compositing and blending on her blog. Blending modes demystified ( – This useful article by Justin McDowell was recently published on A List Apart. It covers all the basics of CSS blend modes.

@supports (mix-blend-mode: difference) { body { background-image: linear-gradient(90deg,#fff 49.9%,#000 50%); } h1 { color: #fff; } } This also involves a little parallel thinking: since browsers that don’t recognise @supports will

With blend modes we can create text clipping paths predictably and across browsers ignore anything inside the feature query, we can style the default appearance of the page outside it. We can use the CSS inside @supports to build the background and employ mix-blend-mode . The result doesn’t just work in these extreme examples, but whenever the text layout changes (see fig 4), or when it crosses over a sufficiently dark background image (see fig 5). Variations on this idea can be useful in all kinds of circumstances. Robin Rendle gave a great example of how it can be used for the label of an animated <meter> element (see

text Punch-out There are many different ways of creating text clipping paths – WebKit has a unique method,


april 2016

CSS and SVG supports a variation of the technique – but by using blend modes we have a way of doing so predictably and across browsers. The essential technique relies on a background hidden by a flood-fill on another element (see fig 6): <div class="dark"> <h1>London</h1> </div> That containing <div> is filled with a backgroundimage : .dark { background-image: url(london.jpg); text-align: center; background-size: cover; } And the heading inside it is styled with a background colour: .dark h1 { margin: 0; font-size: 20vw; text-transform: uppercase; line-height: 1.9; color: #fff; background: #000; } The heading ‘sees through’ to the hidden background image by using mix-blend-mode : .dark h1 { mix-blend-mode: darken; } As with the ‘faces in circles’ example, this is nicely progressive: IE users will see white text on a black background, and all others will see the blend mode effect. There’s also the opposite effect – black text on a white background with a clipping mask – as shown in

Better Borders Web design has existed in a world of rectangular image borders for a long time, partly because making clipped borders has meant a lot of custom work and processing in a bitmap editor. But by using blend modes we can get similar results, with very little effort required. We’ll take a suitable image (see figure 7), and combine it with a greyscale, tightly compressed 16 or 32-bit PNG image with a distressed border

(see main image, page 84). Since the car image is illustrative, it needs to be placed in the page as an <img> tag. This means the distressed PNG can’t be added as a background. mix-blend-mode interprets a element’s background image as being on the same layer as the image itself for compositing purposes, so the background needs to be placed on another element:

Figure 7 Original

illustrative image, on which we will apply our clipped border effect (Photograph by Caroline: credit-278)

<div class="distressedborder"> <img src="sunbeam.jpg" alt="Photograph of a red Sunbeam Harrington Le Mans sports car"> </div> The CSS: div.distressedborder { background: url(masque-24.png) #fff; background-size: 100% 100%; background-repeat: no-repeat; } div.distressedborder img { width: 100%; mix-blend-mode: screen; } With an appropriate background image, screen is an excellent mode for creating the impression of a dusty, distressed image, without the need for a lot of processing in Photoshop. You can find a variation of this example at

conclusion There are many, many more uses that blend modes can be set to. You can find a variety of examples on my CSS blend modes web developer reading list:

reS ource In summer 2015 Dudley Storey gave a presentation on CSS blend modes at a CodePen meetup in San Francisco. Take a look at the slides and examples at

april 2016 89


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

G AlyA Il Ie v w: t: @galyailiev job: Community, Bohemian Coding areas of expertise: Sketch q: what is your earliest memory? a: Playing with a toy truck gift from my 3rd birthday


10 tools for precise designing in sketch Galya Iliev runs down her top 10 tips and tools that will help you create pixel-perfect designs in Sketch

vIdeo For more on pixelprecise editing in Sketch, take a look at this video from the Sketch team: netm. ag/sketchvid-278


april 2016

With Sketch you get the best of both worlds: scalable vectors and precise pixel controls. The tools you’ll find in Sketch will help you create sharp edges and defined, balanced outlines, which are the foundation of a great design. Sketch can automatically align your shapes to pixel edges, and also provide you with the ability to preview and edit each pixel to ensure your exports are sharp. This is especially important when you’re preparing assets for the different screen sizes, pixel densities, and platforms available. When working with vector shapes and exporting

numbers. By keeping an eye on the Inspector, taking advantage of tools such as Pixel Fitting and Pixel Zoom, precise editing can be easily achieved. In this tutorial we will explore some of my favourite tools for designing with pixel perfection.

assets, you may want to ensure all shapes and layers are aligned to the document’s pixel grid, to avoid the blurry edges that can result from fractional

iPhone and the various Android pixel densities, things are looking more complex. But with Sketch’s preset artboards, a bit of planning and some simple

1 Preset artboards When designing for mobile I always keep in mind the various screen sizes and resolutions. Around the time of the original iPhone there was only one screen size and only one resolution: one point equaled one pixel. Today, with Retina displays in



hAndy shortcuts Sketch offers a number of features to help to keep your workflow smooth and take the pain out of complex tasks. Here are two that are worth trying.

Preset artboards Sketch has common artboard sizes built-in

mathematics, preparing assets for multiple screen sizes and pixel densities is a breeze.

2 Design at 1x When Apple introduced the first Retina iPhone, many designers started designing in 2x resolution immediately, scaling down to 1x for legacy phones as an afterthought. However, when the iPhone 6 Plus arrived this became problematic. After all, if you design something pixel precise at 2x, chances are if you scale it up by 1.5x, it’ll end up on a fractional position. Many designers have gone back to designing at 1x, because when vector dimensions are scaled by 2 or 3, you’re guaranteed they won’t end up as fractional digits.

Custom shortcuts

To create a Round to Nearest Pixel Edge shortcut (or any custom shortcut), simply open Keyboard in your Mac System Preferences and click on the Shortcuts tab. Next, select App Shortcut and ‘+’ to choose Sketch from the Applications list. You must enter the exact name of the menu item (in this case ‘Round to Nearest Pixel Edge’), and enter your own shortcut combination.

Sketch loves maths

You can perform math operations in all numerical inputs of Sketch’s Inspector to speed up your design workflow. You can add, subtract, divide, multiply, and in some cases, use percentage to tweak your shapes. Give it a try.

Fractional numbers cause the rendering of sub-pixels ... the main reason for blurry edges 3 Inspector The first way to detect whether your designs are precise is to be aware of their Position and Size values. The Inspector is the main command centre for your Sketch document. It contains all properties and details for a selected shape or layer. This is your go-to place for spotting imperfections in the form of fractional numbers.

Designing at 1x Exporting assets at different resolutions takes seconds

4 Position and Size values Fractional numbers cause the rendering of subpixels – the main reason your exported bitmap asset might have blurry edges. You can fix this manually: just edit the Position and Size values to full numbers. Working with shapes within groups can be tedious, but with cmd+Click , you will be able to directly select any shape and edit its values.

Position and Size values Fractional numbers will result in blurry edges

april 2016 91

PROJECTS Sketch 5 Show Pixels Seemingly smooth vector curves and edges can be deceptive. By enabling Show Pixels, you will be able to see every individual pixel in your document. This setting can be enabled by going to View > Canvas > Show Pixels ( shift+P ). What you see will be equivalent to exporting the image to PNG and then zooming in. Note that when you’re at 100 per cent zoom (actual size), there is no difference between these two modes, but when you zoom in further, the pixels will be visible.

6 Show Pixels Grid If you want a hint of what your design will look like upon export, but don’t want to look at big blurry

By enabling Show Pixels, you will be able to see every individual pixel in your document pixels, then pixel zoom is your friend. Make sure Show Pixels Grid is enabled by going to View > Canvas > Show Pixels Grid ( Shift+X ). Show Pixels Grid allows you to differentiate between fuzzy pixels in low contrast that would otherwise go unseen. When combined with Show Pixels, any edges that do not align with the pixel grid will be visible.

7 Round to Nearest Pixel Edge Referred to as the best hidden feature in Sketch, Round to Nearest Pixel Edge solves many pixel alignment imperfections. Once you have spotted a vector shape with sub-pixel values, you can select the shape and then select Layer > Round to Nearest Pixel Edge . Sketch will automatically align the edges with the pixel grid. This works for both the Position

Pixel Fitting You’ll find Pixel Fitting options in Sketch’s General Preferences

and Size values. This feature provides a quick way to ensure your designs are consistent, especially when you’re importing icons.

8 Edit Vector Points If your shape is not aligned as desired, you can edit the individual vector points by selecting the shape and clicking Edit in the toolbar. This will bring up your vector editing options in the Inspector, where you can switch between four different point modes and select a pixel rounding preference.

9 Round to Full Pixels Pixel precision is nice when needed, but you don’t have to limit yourself. For example, when designing tiny icons, you can disable the pixel rounding preference for complete freedom of point movement. However, if you want to ensure your shape’s edges are consistent, enabling Round to Full (or Half) Pixels will help.

10 Pixel Fitting A global setting that ensures pixel precision from the start is the Pixel Fitting setting, found in Sketch > Preferences... > General tab > Pixel Fitting . This preference ensures any layer you insert or resize ends up on a full-pixel edge (with the exception of rotation). If you’re frustrated by the lack of pixel grid freedom you have, you can disable Pixel Fitting when necessary. Designing for pixel perfection is an important practice for many designers. This kind of precision goes a long way, especially when you want to future-proof your designs for clean and sharp rendering. Nevertheless, you can certainly break this rule when you desire complete freedom of movement. That’s what I love about Sketch: it

Round to Nearest Pixel Edge Pixel rounding preferences in Edit mode


april 2016

provides a unique blend of flexibility and precise pixel control. If you haven’t given Sketch a try, download the free trial now.

From the makers oF

On sale now

In this special edition youâ&#x20AC;&#x2122;ll find everything you need to know about the latest responsive design and development techniques, from cutting-edge layout options to responsive images and emails Master responsive design today! Pick up your copy at

PROJECTS Promotion Promotion

communicate with your users via twilio With Twilio’s communications API, you can can connect your

users by voice, video or messaging, with just a few lines of code Communication lies at the heart of successful applications and businesses. The ability to connect users efficiently paves the way to amazing user experiences. Take carwow (, a new way of buying cars, and (landmax. pro), a software service that covers the needs of property agents and landlords. carwow reversed the car purchasing process. Rather than having to find a dealer to sell you a car, you choose the car you want and let local dealers send offers to you. carwow discovered that dealers prefer to interact with customers over the phone, and turned to Twilio Voice to handle those calls. The integration was implemented within a day. When a user receives an offer they have the option to either call the dealer and enter a unique offer ID, or request a callback. In both cases the buyer is connected to the dealer the way they want. Estate agents usually rely on old communications technology. decided to modernise this by integrating the communications around property management. In August 2015 it launched LMX phone, powered by Twilio, which brought a unified view of all call, SMS and email history to its system. The Twilio API can build powerful communications into any application, and it takes just a few lines of code to get started.

Build a click to call system Let’s develop an application using the Twilio API. We’ll make a similar application to carwow’s feature, in which a user enters their phone number to request a callback. We’ll need a few things to get started: ● ● Node.js ● ● A Twilio account (sign up for a free trial at ● ● ngrok (, which enables you to expose your local server to the internet


april 2016

To save time I’ve set up a starter application. You can prepare it like this: $ git clone $ cd netmag-twilio $ npm install If you don’t have Git, you can download the package from this page of resources: Run npm install within the downloaded directory. Start the application: $ npm start Open up http://localhost:3000 and you will see a form for a user to enter their phone number. It doesn’t do anything just yet though. Now start ngrok, too: $ ngrok http 3000 You will see a screen that includes an ngrok URL with a random subdomain. Enter this URL into your browser and you will see our running app. Stop the server for now (‘ctrl+C’), but leave ngrok running. Now let’s configure the application. Open config.js and fill in the values. You’ll find your Twilio Account SID and Auth Token in your account portal, where you can also purchase a Twilio phone number. Enter the ngrok URL you just created as the ngrokUrl .

making a phone call We use the Twilio module to create a client for the Twilio API. Open up index.js and add the following line after we create our app variable: var app = express(); var twilioClient = twilio(config.twilioAccountSid, config. twilioAuthToken);

Promotion'/calls', function(request, response) { twilioClient.makeCall({ to: request.body.phoneNumber, from: config.twilioPhoneNumber, url: 'http://'+config.ngrokUrl+'/calls/forward' }, function(err, responseData){ if (err) { response.render('index', { error: err.message }); } else { response.render('thanks'); } }); });

The Twilio API can build powerful communications into any application We call makeCall on our twilioClient and pass an object made up of three items: ● ● The number to call: This has been submitted through the form● ● The number to call from: Our Twilio number ● ● A URL: Our ngrok URL with the path /calls/forward The URL is important. Twilio will initiate the phone call, and when it is answered it needs to know what to do next. To find out, Twilio makes an HTTP request (known as a webhook) to the URL you provide here. Your application needs to respond to the request with XML instructions called TwiML . TwiML tells Twilio what to do with the call next. Let’s build the /calls/forward endpoint to complete our call now.'/calls/forward', function(request, response) { // TwimlResponse is a builder for the XML we need to return. var twiml = new twilio.TwimlResponse();'');

Photo: iStock

Further down index.js you can see the application’s routes. The form on the homepage makes POST requests to /calls , so this is where we need to do the work. Currently, /calls simply renders a template. We need to make a call to the Twilio API and render different results if the call succeeds or fails. Change the route to the following code:

response.set('Content-Type', 'text/xml'); response.send(twiml.toString()); }); When Twilio makes the request to this endpoint, the previous code will return the following TwiML : <?xml version="1.0" encoding="UTF-8"?> <Response> <Play></Play> </Response> This tells Twilio to play the MP3 file hosted at that URL. If you had two phones to test this with you could use twiml.dial(PHONE_NUMBER) , which would forward the call on to another number. Start up your application, enter your phone number in the form and submit it. Your phone should ring, and when you answer the MP3 will start to play. Congratulations, you’ve built your first Twilio application!

the road to success Around one in four calls made on the carwow platform results in a sale, and there were 5,900 calls placed in August 2015. estimates it saves around 60 per cent compared to traditional phone systems, and the business has grown 30 per cent month-on-month since releasing LMX phone. Now you’ve built a Twilio application there’s more to learn. There are many ways Twilio could enhance your application: sending and receiving SMS messages, two-factor authentication and video conversations, to name just a few. Visit for more code, tutorials and ideas, and text ‘netmag’ to 60047 for a promo code to get you started

april 2016 95


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

MAt t D. SMi t h w: t: @mds job: Design director, Studio Mds areas of expertise: UX, UI, HTML, Sass q: what is your earliest memory? a: Hiding in the closet and pooping in my diaper


Master responsive UX with illUstrator

Adobe Illustrator is as powerful as ever. Matt D. Smith shows you how to use the vector-crunching workhorse for wireframing

ViDeo Matt D. Smith has created an exclusive screencast to go with this tutorial. Watch along at AIUXvid-278


april 2016

Think Adobe Illustrator is for print design and logos? Well, you’re right, but over the last decade the graphic designer in me has morphed into an intensely focused UX and UI designer. And guess what? Illustrator is still my main weapon of choice for wireframing. I use and love Sketch for detailed UI, but not for UX. Illustrator is blazingly fast at rendering vectors. No software handles a massive amount of points, shapes, buttons, boxes, text fields, lines and so on, better than Illustrator. It’s a vector-editing beast and it includes some unique features that are great for quickly designing wireframes for

small task. The learning curve with Illustrator can be steep, but not if you know the simple subset of tools to use, along with direct selection and layerless design techniques. Once the software becomes ingrained deep enough in your brain, your hands become autonomous, and you can start to focus fully on the core problems at hand. I rely on my process with Illustrator so heavily that I have created an entire online video course dedicated to teaching these techniques. It’s called AIUX (, and it’s a decade of my design experience, philosophy, and wireframe process all rolled into one.

responsive websites. If you don’t know the software very well though, you can spend a full afternoon trying to do one

UX is without a doubt a very broad subject, but for the purposes of this article I’m referring specifically to wireframe screen designs. All screens and

RWD components should be designed to inform the flow and functionality of an app or website, rather than being indicative of style, typography or art direction. Let’s dig into some of the tools and techniques behind the AIUX process.

Tools There are hundreds of tools and tool options within Illustrator, but we can boil them down to nine essential ones. To get fast and furious, these are the tools you need to know: ● Selection ( V ) ● Direct Selection ( A ) ● Pen ( P ) ● Type ( T ) ● Eyedropper ( I ) ● Rectangle ( M ) ● Edit Artboards ( Shift+O ) ● Stroke and Fill Focus & Swap ( X and shift+X ) ● Group ( cmd+G ) and Ungroup ( cmd+shift+G ) Memorise these tools and their shortcuts as quickly as possible. Maybe 99 per cent of all UI elements

One of the best ways to achieve clarity is with a simple colour palette and global swatches will be created and manipulated using those tools. Once you have those down, you’ll have a great foundation to build from.

Global swaTches


keep it cleAr I’ve experimented with a ton of wireframe presentation styles, but one has stood the test of time in terms of readability and clarity: a simple outline style with incredibly minimal colour usage. There’s a reason why default HTML styles are so simple. They may not win any design awards, but they do exactly what they need to do – communicate functionality. The styles offer no confusion about black text, underlined-blue text, checkboxes, or radio buttons. It’s all crystal clear. When designing wireframes, we have one objective: to be crystal clear. I haven’t found a better way to achieve this than with a simple colour palette using global swatches coupled with the outline style of UI elements.

colour guide

We want to create these wireframes as quickly as possible so we can communicate our idea early on, and move on to making the actual thing. A simple style with four main colours can do the trick. Borrowing from the simplicity of HTML, we can use a dark grey for our text and main outlines of UI components. #222 or #333 works nicely as a primary colour instead of a full black. This creates a nice – but not too harsh – contrast amongst other elements. Additionally, using a light grey such as #f4f4f4 for the main background creates a subtle depth without going overboard. With that colour in place, we can use modules for our content with a white #ffffff background and a dark #222 border. These two colours, in conjunction with the unmistakable blue #0077ff for primary CTAs, create a bulletproof functionality recipe that works for even the most complex interfaces. It can be tempting to use a brand colour for primary CTAs in your wireframes, but that can lead to misguided conversations about colour. Shy away from it if possible.

It’s important when you’re designing wireframes that you focus on clarity above all else. Always err on the side of being overly explicit with your UI, labelling your icons and making your calls to action (CTAs) incredibly clear. One of the best ways to achieve clarity with your wireframes is with a simple colour palette that uses global colour swatches. The four main colours I use are dark grey, blue, light grey and white (see image overleaf for specific hex values). My preferred secondary colours are super-light grey, light grey, medium grey, red and green. These are used for items like buttons, icons, messages, image placeholders and so on (see boxout opposite for more on this). You should set these colours as global colour swatches before you begin. This allows you to easily

speedy clicking Learn what these keys do. Memorise it. Don’t you dare click them from the tool panel, use the quick keys!

april 2016 97


focus on

wirefrAMeS Wireframes are like scaffolding for a new building that’s under construction. Before you can work higher than the first storey on a new building, scaffolding must be put up around the perimeter. When the work and the building is finished, the scaffolding will be disassembled and there will be no trace of its existence. It’s the same with wireframes. Although when you’re starting a web project it’s definitely possible to jump straight into code or designing a layout, you don’t necessarily want to build something before you count the cost – not on a large-scale, anyway. Multi-device wireframes are great for helping visualise the scope of the work at hand. Scaffolding is pretty generic; most looks the same and provides the same function. Similarly with wireframes, it’s OK if they have the same blue buttons your last five projects had. We’re not trying to win any design awards at this point. We want to create just enough wireframes to help our builds go faster and keep them in line with specific goals. I like to design core screens with a multi-device view to get a picture of what’s roughly going to take place with UI design and development. The aim is to create just enough screens to inform what we’re building, solve the complex issues, and tackle the basic layouts and flows. From there on out, I stick with mobile-only wireframes to capture the remaining parts of an experience. Once the core views are established, the mobile-only ones can be shoed into similar views during UI design and development.

colour guide A simple and consistent colour palette you can rely on will take a ton of guesswork out of designing wireframes

change all instances of any colour at once, even if you have dozens of screens designed. This is similar to the way you would set up $color variables in Sass when coding the frontend.

Mobile-FirsT 99 per cent of the time, I design mobile wireframes first. If you’ve never forced the mobile constraint from the very beginning of a project before, it can seem daunting. However this approach will make your life much easier in the long run. Designing mobile-first forces you and your team to prioritise. Prioritise your content. Prioritise your CTAs. Prioritise your navigation. Prioritise the flow of information. Prioritise your objectives. This one point alone will save you hours and hours of discussion and arguments about folds, columns, carousels, primary CTAs and more.

Tackling navigation For context purposes, it helps to show a device frame around the design. I start with a small mobile body frame (a simple outline will do) with a screen size of 320x575 at 1x resolution. This is close to the smallest size you’ll need to design for, not including smartwatches. You don’t have to start with a fullscreen design (e.g. the homepage) either. You may want to design a few components first, like the mobile navigation. By considering the navigation at the start, you can make an informed decision as to whether or not a hamburger menu is the best option – perhaps you can fit five menu items there instead. It’s a good idea to deal with these constraints up-front, which is what working mobile-first forces you to do. Go mobile You’ve heard the mobile-first philosophy preached over and over. It’s not just a fad – you need to master this technique


april 2016

Once you’ve designed your navigation and maybe the footer, you can flesh out one of your core screens as well, still using the mobile viewport as your

RWD constraint. Keep in mind we’re not worrying about typography choices, colour schemes, art direction, and so on. We’re intently focused on a clean and highly functional layout that serves both user needs and business objectives. Make it look nice, but substance trumps style at this point.

MulTi-Device DesiGn It’s impossible to know exactly which breakpoints will be used in the code, but it’s pretty common to have at least three: small, medium and large. Alternatively mobile, tablet and desktop. It helps to think of these device sizes like keyframes in an animation. A basic animation consists of two keyframes for one object – the object animates across the screen by transitioning from the one keyframe to another. The easing and timing can be tweaked until the motion ‘feels’ right. This is similar to responsive design breakpoints. We won’t know exactly what the media queries will be in the beginning, but we can use some defaults to

Designing mobile-first forces you to prioritise: your content, your CTAs, your navigation get ideas for our layout. The actual breakpoints will be tweaked in the code later. Just like our mobile designs, it helps to put context around the larger sizes. For the medium and large sizes, I use simple device outlines for both a tablet view (768x1024) and a laptop view (1280-1366x800). These are starting points that will be tweaked later, rather than defining media queries. You can download all these device wireframes for free at

progressively wider Progressive enhancement is a term used mostly in the development world, but it works great for designing responsive screens too

drag them to the device width of your choosing. With this approach you can quickly determine how many columns you might need, experiment with different widths, and so on. Once you have your first component or core screen designed, you can rinse and repeat this process for the larger laptop views. Make adjustments as necessary to the column count, column width and UI orientation across all of the device views. Especially keep in mind the flow of HTML, from left to right and top to bottom.

exporTinG DocuMenTs

It’s when we’re ready to scale our designs up to the next device width that Illustrator really shines. The almighty direct selection tool ( A ) will become your new best friend. With it, you can draw a rectangle around the right side of virtually the entire layout and drag it over to the right. This will quickly scale your whole screen from the small 320px view to the medium 768px tablet view. You’ll need to move around the interior layout a bit and adjust a few things, but the direct selection tool

When showing all three devices for one screen, I like to keep them all on one artboard. The next set of devices is put on a second artboard. Continue as necessary. You can access the artboard controls by hitting the quick key shift+O . It’s worth noting that it’s not necessary to create a mobile, tablet and desktop version for every single screen at the wireframe stage; only the core ones. Once we have three or four sections laid out in a responsive fashion, we can move on to mobile-only mode for the remainder of the screens. This ensures we’re not spending too much time trying to perfect every little detail of each responsive screen. After we’ve got a few artboards for the core responsive screens, we can line up all the mobile views side by side, depending on what makes sense for each page. Keeping each artboard roughly the same width keeps things simple when reviewing. Once the screens are ready to be exported for others to see, save a second copy of your AI file as a PDF. Make sure the ‘Use artboards’ option is checked on the Save dialog box. Each artboard

makes this a piece of cake. You can select multiple objects, text fields, and isolated anchor points of background vector shapes, all at the same time, and

you’ve got in your document will now be exported as a multi-page PDF that can be opened and reviewed by your team.

Direct selection

e Ven t Matt D. Smith will be presenting ‘Responsive design in the real world’ at Generate New York in April. Find out more at

april 2016 99

PROJECTS Feedback Exclusive offer! one month free ZURB is offering net readers one month’s free access to Notable. Go to notableoffer-278 to claim Offer expires 30 April 2016

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

Jon neme th w: t: @jon_nemeth job: Design lead, ZURB areas of expertise: Product design, frontend development q: what is your earliest memory? a: Pre-school Mickey Mouse dance sessions. I don’t remember what it looked like or what it had to do with Mickey Mouse, for that matter


Get feedback on your desiGns with notable

Unclear and disorganised feedback can bring projects to a screeching halt. ZURB’s Jon Nemeth explains how Notable can change all that


april 2016

3 While on the call, furiously write down notes,

Taking a product from prototype to production requires enormous amounts of communication. From design sketches and wireframes to actually producing code, meaningful iteration requires organised and actionable feedback. Product design platform Notable and two of its powerful modules, Notebooks and Code, were born out of the ZURB team’s frustration with collecting feedback on static images uploaded to their local intranet for client review. They found that simply writing down notes they collected during client calls wasn’t enough to guarantee wins. Let’s look at a typical scenario:

What happened? Put simply, there are barriers to communication and understanding within this workflow. When doing design and development work, especially remotely, the context often gets lost. Your stakeholder may say something like, ‘Make that header shorter, and change the colour to beige’.

1 Upload or email your work to a stakeholder 2 Get on a conference call to discuss it

While you may think you know exactly what they mean, there is all kinds of potential for miscommunication. Your client may not understand

trying to document the feedback

4 Take the feedback you’ve recorded and iterate on it 5 Repeat steps 1-2 6 Stakeholder is confused because you haven’t captured their feedback accurately

Feedback the header to mean the same thing you do, and your idea of beige may be closer to manilla folders while your client was thinking about khakis. The solution? Eliminate the potential for noise and diffusion between creator and client. Get feedback in context.

Put your ideas in a notebook The Notebooks module in Notable allows you to give and solicit contextual feedback on any kind of design work, from sketches and wireframes to mockups and screenshots. Images can be uploaded directly from your computer, captured via a URL, or added using the handy browser extension. Notebooks in Notable are made up of individual ideas or screens called Pages. A Page can have multiple versions, making it easy for your team and stakeholders to see the evolution of your ideas. Simple dividers called Sections allow you to further organise your work and frame the story you are trying to shape.

organised assets The Notebook, Page and Sections mentality is similar to how you might document ideas in your physical notebooks. How you use these organisational tools is largely up to you, but generally it’s best to arrange them in such a way that you are telling a coherent and consistent narrative with your work. With just a few clicks, you can easily create a central repository

it possible to collect and organise feedback on something that complex? The answer is another powerful module in Notable: Code.

Live code and feedback The Code module picks up where Notebooks ends by allowing you to receive the same kind of critical and in-context feedback, but on live code and at specific screen breakpoints. For some agencies, the divide between design and code is unfortunately a concrete one. Designers build out concepts and throw them over the proverbial fence to the developer. Even for those more progressive agencies whose designers and developers are either the same person or work in the same room, it can be a struggle to get meaningful feedback at the coding stage. The Code module can satisfy both agency types. There are three relatively simple ways to get your code imported and ready for feedback: ● ● Manual upload ● ● URL capture ● ● Yeti Launch (a desktop companion app for the Foundation frontend framework)

of design assets, organised into sections based on concepts. But now for the real magic: giving and soliciting feedback with your team and stakeholders. Once your work is uploaded into Notebooks, you and anyone you share your Notebook with can quickly and easily leave feedback. By simply clicking and dragging the cursor, people can attach annotations directly on any part of an image or screen, leaving no doubt as to what they are referring to. All comments are displayed in a side-panel, making it easy to keep track of the order of the feedback, and jump to specific notes.

After uploading a working, responsive prototype made up of HTML and CSS pages, you’ll be brought to a screen similar to the Notebooks view. Attaching feedback works in much the same way: just click and drag your cursor and leave annotations directly on your prototype. Comments are organised in the same sidebar, but with one very convenient difference. When a user clicks on one of the comments in the sidebar, the screen will automatically adjust the page view to the specific breakpoint that feedback was left at. It will also reveal any other annotations made at that specific dimension. The beauty of this is that finding out exactly what screen size your stakeholders are referring to no longer requires any guesswork. Is a button not looking quite right on your client’s phone? Tell them to leave a note, you’ll get to it, and this time you’ll know exactly what they are talking about. No more back-and-forth to track down where the issue is – one piece of feedback is all you’ll need. The team at ZURB has been using Notable and all of its powerful modules daily in its client work, battle testing and optimising them for speed and efficiency. To get started with Notable Notebooks and Code yourself, we’re offering net readers a month of

The Notebooks module makes the feedback process quick and easy for still images, but what about a working responsive prototype? How is

access, totally free. Get feedback at every step of the design process, iterate with confidence and move your projects forward.

Notable helps eliminate the potential for noise and diffusion between creator and client

april 2016 101



The world’s 20 most influential designers – as voted by their peers PLUS: Collect all 20 variants of Non-Format’s special die-cut cover

Print and digital editions on sale now

Standards understandable, and compared to the declarative definition, not short either. The poster-child of HTML declarative markup is the hyperlink: <a href="talk.html" title="My talk" target="_blank" class="overt">HTML5 is the new Flash</a>

HTML5 is THe new fLasH

Steven Pemberton argues it’s time we returned to a declarative web The big advantage of standards is that you don’t get locked in. If you don’t like what a browser (or photo-viewer, or whatever) does, just download a different one and use that instead. On the other hand, using a proprietary format restricts which software you can use. And if you want to change, you have to convert all your documents. The key term for describing the original web (and I would claim, its success) is the word ‘declarative’. A declarative definition describes what you want, rather than how to get it. Declarative definitions are typically short and easy to understand. A classic example is when you learn in school that the square root of number x is the number r, such that r×r=x. Simple, short, obvious, understandable. This doesn’t tell you how to calculate the square root; but no problem, because we have machines to do that for us. You can define the ‘how’ in about 10 lines of code that are most certainly not simple, obvious or

EntEr HtML5 Unfortunately, we now have HTML5. HTML5 is no longer about declarative markup: it is about programming. Rather than researching what people needed from the web and then defining declarative ways of describing those things, the designers of HTML5 (themselves mostly programmers) took the position that if you want something new, you should just program it. So even something as simple and obvious as a drop-down navigation list needs to be programmed out. This is no longer easy. And furthermore, it is no longer standard. Why isn’t it standard? Most webauthors are not programmers, so to help them, along came frameworks. Lots of them. And they are all different, not standardised. If your framework of choice stops being supported, or doesn’t work on one of the browsers you want to support, what are you going to do? You will have to recode all your documents if you want to change. And what about in five or 10 years’ time? How many of those frameworks will be still working and supported? At least one has already died. HTML5 is a disaster for the web. It is time for a new movement to lead it to its full potential. We must seize back the declarative web, so our web pages can be authored by programmers and non-programmers alike, and still readable and usable in 10, 20, 100 years’ time. Join me!



This compactly encapsulates a lot of behaviour, including: what the link looks like, what happens when you hover over it, activation in several different ways, what to do with the result, and hooks for presentation changes. Doing this with programming would be a lot of work. In the early days of the web we fought off an attack from the makers of then-leading web browser Netscape, which wanted to define all presentation using programming (see JSSS for details: JSSS-278). Luckily we managed to introduce the declarative CSS instead, and keep web authoring accessible for non-programmers.

Steven co-designed the programming language Python was based on, and was the fifth person on the open internet in Europe. He now chairs the W3C Forms working group

april 2016 103


Download the 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

MAr t in hughes w: t: @wefail job: Director, Wefail areas of expertise: HTML, CreateJS, JavaScript, Flash, iOS development q: what is your earliest memory? a: Drawing dinosaurs; always drawing dinosaurs. I could draw you anything, as long as it was a dinosaur


AnimAte A chArActer with creAteJS Martin Hughes explains how to use CreateJS to animate

a character in an interactive environment

res ource If you want to browse for tips on putting your code together, a good place to start is the CreateJS thread on Reddit: www.


april 2016

Remember when you could animate things in Flash and add ActionScript to make fun sites? Well now there’s a new way: with CreateJS (www. CreateJS is a set of JavaScript libraries created by ex-Flash god Grant Skinner. Modular libraries including Tween, Easel, Preload and Sound enable rich interactive content – and the great thing is it all works on mobile as well as desktop. In this tutorial I’ll walk through how to create an animated interactive character in Flash, powered by JavaScript and CreateJS. The character will follow clicks/touches within a parallaxed room, forming the basis of our new site.

initial parent level (we’ll refer to it as the root) we have two layers: ‘Code’ is where we’ll keep the bulk of our code; ‘Camera’ will hold the container clip (labelled ‘scene’) that holds each layer of the room, as well as our Rat Boy character.

First, download and open ‘WEFAIL_CreateJS_ tutorial.fla’ in Flash Professional CC 2015. If you’ve ever used Flash, you’ll recognise the layout. On the

to move, his animation is in idle mode. The timeline changes to walkloop when he’s moving, and transitions between the two with walkstop :

CharaCter animation Let’s focus on our Rat Boy puppet. Open the Library window and click on the clip labelled ‘bodynest’ to see the character’s animation clip. His body parts are broken into layers and animated across 150 frames. In the code layer you’ll see frame labels: walkloop , walkstop and idle . When Rat Boy isn’t being asked

CreateJS if (this.parent.parent.parent.setSpeed == 0) { this.gotoAndPlay("idle"); } This tells the animation to go to the idle loop if our movement speed is equal to 0 . We’ll set the variable setSpeed value in the root layer code later. Midway through the walkloop frames, there’s this code: if (this.parent.parent.parent.setSpeed == 0) { this.gotoAndPlay("walkstop"); } This detects if Rat Boy has reached his destination and stopped. If so, we skip to walkstop and transition his animation to flow into the idle loop.

the environment Now we want to label our landscape elements to create a parallax effect. Go back to the root level

Modular libraries including Tween, Easel, and Preload enable rich interactive content (click ‘Scene 1’ in the top-left) and double-click the ‘scene’ clip, where you’ll find the three landscape pieces that make up the parallax environment. ‘Land00’ is our foreground layer, which will move at a faster speed than all others and pass over our character. ‘Land01’ is positioned below Rat Boy and will move slightly slower than both Rat Boy and the foreground layer. ‘Land02’ is a final layer of depth, and will move slowest of all. Here’s where the fun starts. Back on the root level (Scene 1), select the ‘Code’ layer keyframe. We start by setting the initial speed of the environment’s movement, which is 0 as we’ve not yet interacted with the site.


creAteJs: A closer look CreateJS brings all the interactive tools of Flash to both desktop and mobile via JavaScript. Which means one version of your game will work across all platforms, operating systems and browsers. This tutorial covers just movement and interaction, but there are plenty more elements to learn, from complex audio engines, to simple pre-loader animations, to platform games. Anything that was once produced in SWF format can now be put together via the CreateJS JavaScript libraries. The site itself if a good example of what CreateJS is capable of. The libraries work seamlessly with elements such as responsive layout (Breakpoint), dynamic content (tour dates via JSON, Twitter feeds), and audio code to fade in and out of different audio files, depending on user interaction. Before I started following this method to build interactive work, I would look at things like CSS animation and really struggle to see how I could animate complex elements, such as a character. Looking beyond that to see how I could then interact with it was even more of a headache. But if you’re familiar with Flash, you can easily put your animation together and output it as JavaScript via CreateJS. All your frame labels and symbol names will remain intact, making it easy to target with code, before or after it has been published. HTML5 animation no longer has to take days to produce; you can complete your animation in hours. Interactive design should be about the idea first and the construction second. Finding the right tool that would make that possible was pretty difficult post-Flash, but CreateJS has solved that problem.

this.setSpeed = 0; Stage width and height setup this.WIDTH =; this.HEIGHT =; The co-ordinates of the mouse are now stored as myPosition : this.myPosition = new createjs.Point(stage.mouseX, stage. mouseY); this.ratSpeed = 0;

april 2016 105

PROJECTS CreateJS We have three speeds for our environment pieces. One of each will be attached to our fore-, mid- and background pieces, to create our parallax. We’ll also set the character to face left initially.

class is perfect for this. Similar to enterFrame from the old days of Flash, Ticker provides a heartbeat at a set interval. We’ll use it later to trigger our main function, updateScene .

this.speeds = [1.2, .9, .8]; this.ratBoyDirection = "left";

this.updateScene = function () {

To save time when calling each clip, we’ll compact our variable target names to simplify those paths. this.scene = this.scene; this.ratboyMC = this.scene.ratboy; this.ratboyInner = this.ratboyMC.ratboy; this.torso = this.ratboyInner.torso; this.head = this.torso.head; this.arm1 = this.torso.arm1; this.arm2 = this.torso.arm2; this.lands = [this.scene.land00, this.scene.land01, this.scene. land02]; this.body = [this.ratboyInner.torso, this.torso.head, this.torso. arm1, this.torso.arm2]

this.myPosition.x += (stage.mouseX - this.myPosition.x) / 10; this.myPosition.y += (stage.mouseY - this.myPosition.y) / 10;

Fire up touch and mouse code. When working with touch-enabled devices you must enable the stage to accept mouse events. mouseEvents accepts a frequency for the number of times per second it broadcasts mouse over/out events.

We also want the character to flip to face left or right, depending on the current mouse positon. We have this set inside ‘Scene 1 > camera > ratboy > ratboy’, over two frames ( left and right ).

createjs.Touch.enable(stage); stage.enableMouseOver(10); Familiar interface Users benefit from the familiarity of the Flash interface, but the output is JavaScript

First we’ll get some inertia on the movement of the environment when the user hovers the mouse over the stage.

the brains behind the stage To fire our interactive movement we’ll need to update our live site at a set interval. The Ticker

We want to have Rat Boy’s torso bend to look up or down, depending on where the cursor is. var pt = new createjs.Point(0, 0); var globalPoint = this.torso.localToGlobal(pt.x, pt.y); var dx = this.myPosition.x - globalPoint.x; var dy = this.myPosition.y - globalPoint.y; var angle = Math.atan2(dx, dy)* (180 / Math.PI)*-1;

if (angle > 0) { this.ratBoyDirection = "left"; angle *= -1; } else { this.ratBoyDirection = "right"; } We then set the inertia speed for when our character stops moving (so if you change the value from 5 to 1, and he’ll snap immediately to a stop). this.ratSpeed += (this.setSpeed - this.ratSpeed) / 5; Set the direction of movement depending on which side of Rat Boy the user clicks. if (this.ratboyMC.currentLabel == "right" && this.ratSpeed < 0) { this.setSpeed *= -1; } else if (this.ratboyMC.currentLabel == "left" && this. ratSpeed > 0) { this.setSpeed *= -1; }

moving around This will be familiar to anyone who has built inertiadriven movement in AS3 before. We’re moving the landscape pieces at independent speeds when the user ‘looks’ around the stage.


april 2016

CreateJS l = this.lands.length; var land, ground, speed; for(var i=0;i<l;i++) { land = this.lands[i]; ground = land.ground; speed = this.speeds[i] //move land ground.x -= this.ratSpeed * speed; land.x = (this.myPosition.x-this.WIDTH/2)*(speed/3)*-1; land.y = (this.myPosition.y-this.HEIGHT/2)*(speed/6)*-1; } We also need to address the placement of our Rat Boy character. The following code anchors him to the middle of the viewport.

the result The published file, made up entirely of JavaScript, which will work across all platforms

this.ratboyInner.gotoAndPlay("walkloop"); }

this.ratboyMC.x = (this.myPosition.x - this.WIDTH / 2) * (1 / 3) * -1; this.ratboyMC.y = (this.myPosition.y - this.HEIGHT / 2) * (1 / 6) * -1; Let’s get those arms moving when Rat Boy’s walking. l = this.body.length; for (i = 0; i < l; i++) { var clip = this.body[i];

When not interacting with the site, we set Speed back to 0 .

We need to update our scene at a set interval – the ticker class is perfect for this

this.on(‘mouseleave’, this.handleMouseLeave, this);

clip.gotoAndStop(this.ratboyInner.currentFrame); } } Here’s the ticker that we mentioned above the updateScene function: it basically sits down here and fires the function at a set interval. We’re setting it to follow our file’s FPS rate (which you can set in the Properties window in Flash) – ours is 30FPS in this example. createjs.Ticker.on("tick", this.updateScene, this); Mouse Commands

this.handleMouseLeave = function () { _this.setSpeed = 0; } Finally we detect user interaction and call the above mouse functions.

Let’s PubLish Here I’ve kept the main code block inside Flash, making it simple to hit Publish and see the working file. Ideally you would call the code in as a separate file, so it would be at hand to edit without having to keep publishing out from Flash. Once published, you can go into your directory and see how the output is structured. ● HTML file: This sets the canvas up and calls in the brains behind the site from the ‘.js’ file ● .js file: Here you’ll find all your animated bitmap clips, labelled with their position, rotation and scale values. Our code is displayed at the bottom in one neat block – it would be easy to call the code in as its own separate ‘.js’ file away from Flash, if you chose to do so ● Image directory: In here is the new spritesheet that is created on the fly from every bitmap; a simple compact output of all images with a JSON file that separates each frame out

On mouse down we set Speed and start the character’s walkloop animation.

Hopefully this tutorial helps you get a foothold with

this.handleMouse = function () { this.setSpeed = (this.ratboyMC.currentFrame == 1) ? 8 : -8;

CreateJS and how it works alongside Flash. Take it apart, hack it together, build something fun. Hope you’ve enjoyed it. Go forth and make things.

res ource When you’re getting to grips with CreateJS, Stack Overflow is a good place for any tech-based queries you may have: overflow-278

april 2016 107


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

An t on y D’AnDre A w: t: @antonydandrea1 job: Full-stack PHP developer, Newsflare areas of expertise: PHP, JavaScript, MySQL q: what is your earliest memory? a: Playing with my Lego in the living room


Build a custom plugin for slack Antony D’Andrea walks through how to build

a simple PHP script that sends feedback to Slack

ViDeo If you are completely new to Slack, Steve Dotto has done a great overview of its main features and how these can be used within a team:


april 2016

Slack is an instant messaging service that has really taken the world by storm. Companies around the globe are using it not only as an internal messaging system but also in many other creative ways. This is largely made possible by the excellent API that Slack gives developers access to. If you can’t find what you are looking for from the existing selection of plugins, you can simply build new ones to suit your needs.

a simple PHP script that sends feedback received from a web form to Slack. Start by going to your team’s Slack channel and clicking the arrow next to your username in the top right. Select ‘Apps & Custom Integrations’ from the dropdown. In the top-right corner, click ‘Build your own’, and then ‘Make a Custom Integration’. Select ‘Incoming Webhooks’ – this is what we are going to use to send data into Slack.

In this tutorial, I will show you just how easy it is to tailor Slack to meet your needs by building

Next, select the channel you wish to send your messages to. This could be an existing channel or


focus on

integrAtion types In Slack, you can add integrations to make the tool useful in many areas of your business. There are four different types of integrations.

incoming Webhook

make a change Slack offers plenty of options for customisation

you can use the option to create a new one. Now all you need is the webhook URL. This is a URL that is unique to your webhook, and is what we will send all of the data to. You will see there are some other options listed, such as the name and the icon. The name is the name that will appear when a new message

If you can’t find what you’re looking for in the existing Slack plugins, you can build new ones arrives, and the icon is what appears next to it. You can configure them here or change them programmatically with the data you send later. I have changed the name here to ‘Feedback received’ and left the default icon.

Configuring the form

This enables you to send messages into Slack from other sources. It is a powerful feature as it means you can interact with any API, and alert Slack users of certain events – for example, if somebody has bought something from your company website.

outgoing Webhook

This enables you to read Slack messages from outside. Again, this can be quite powerful as it means you can send messages to anybody, even if they do not have Slack. For example, if you had a feedback form that sent messages into a Slack channel, you could use this to respond to the feedback by simply adding a comment from within the channel.


A bot behaves like a user within a channel. They have a name, profile picture and can send messages to the rest of the channel. Bots can be set up to do a huge variety of tasks. For example, they can ‘listen’ to the channel and respond accordingly by fulfilling a request or replying. A good example of this is the Slackbot channel, which everyone has access to on their own account. If you send it ‘Hello’, Slackbot will respond with a greeting.

Slash Command

In Slack, you can run commands from within the chat. For example, you could send ‘/mute’ as your message and this will mute or unmute the channel that you send it in. Many integrations add new commands you can run.

Now we have our Webhook URL, we can get on with some code. Let’s start with the form. I have created a very basic HTML form: <form method="POST"> <p>Forename:&nbsp;<input type="text" name="forename" /></p> <p>Surname:&nbsp;<input type="text" name="surname" /></p> <p>E-mail Address:&nbsp;<input type="text" name="email" /></p> <p>Please rate your experience from 1 to 10:</p> 1 <input type="radio" name="rating" value="1" /> 2 <input type="radio" name="rating" value="2" /> 3 <input type="radio" name="rating" value="3" />

april 2016 109



5 useful integrAtions Slack can do a lot more than just send instant messages. Simply go to to browse the hundreds of pre-built apps (or integrations, as they are called) that add a variety of different functionalities for you and your business to use. Here are some of my favourites: twitter This allows you to monitor a Twitter feed within a Slack channel. It automatically posts into the channel any Tweets that are sent to or from a Twitter account. mailChimp If you use MailChimp for marketing, you can use this to monitor your campaigns by receiving alerts when people subscribe or unsubscribe from lists and the sent status of campaigns. github If you have a team of people working on code on GitHub, this will post commits and pull requests to a channel in Slack for your team to see. You can set it to monitor more than one repository and specify certain branches in each. It also tracks changes on GitHub issues. If you use Bitbucket or Subversion, there are similar apps available for those. trello If you are using Trello, this will post alerts to Slack when changes have been made to a board. There is a lot of scope for flexibility in what alerts you want – you can fine-tune things as far as only alerting if a card’s description changes or if a label is added. giphy A fun integration (pictured below) that adds a Slash command that pulls a random image from Simply install the integration and run /giphy [search word] . You may be surprised by the results!

Slack apps You can connect many of your favourite apps to Slack

4 <input type="radio" name="rating" value="4" /> 5 <input type="radio" name="rating" value="5" /> 6 <input type="radio" name="rating" value="6" /> 7 <input type="radio" name="rating" value="7" /> 8 <input type="radio" name="rating" value="8" /> 9 <input type="radio" name="rating" value="9" /> 10 <input type="radio" name="rating" value="10" /></p> <p><button value="1" type="submit" name="send_ feedback">Send Feedback</button></p> </form> It has three text fields and a group of radio buttons for rating the service from 1 to 10. For the purpose of this tutorial, I won’t be storing anything in a database or adding fancy CSS. Let’s add some PHP. First, I am adding some very basic validation that makes sure that none of the fields are empty. if (!empty($_POST) && isset($_POST['send_feedback'])) { if (empty($_POST['forename']) || empty($_ POST['surname']) || empty($_POST['email']) || empty($_ POST['send_feedback'])) { echo 'One of the fields left blank.'; return; }

Slack APi Build a custom integration to tailor Slack to your specific needs


april 2016

Slack To make the code a bit cleaner, I am storing each of the $_POST values into variables. Since I now know none of them will be empty or non-existent, I can start right away with no further checks. $forename = $_POST['forename']; $surname = $_POST['surname']; $email = $_POST['email']; $rating = $_POST['rating'];

Converting to JSon Slack requires the messages to be in the JSON format. To do this, we will form an array and use PHP’s json_encode to easily convert it into JSON. $payload = array(); $text = "$forename $surname has given a rating of $rating out of 10.\nContact them via $email."; $payload['text'] = $text; $payloadJson = json_encode($payload);

feeding back Fill out your form and your feedback will appear in Slack

It’s very straightforward: first I create a string using the variables, then I put it into the array and convert it to JSON. Notice the \n in the string. Slack recognises this as a new line character.

The first line prepares our POST fields. The entire JSON must be sent in a field called 'payload' . The next few lines set up the URL and attach the POST fields to the request. Then the curl_exec runs the request and returns true if it’s successful. We could tell cURL to return the exact status code that we could use to provide better error handling, but for the purposes of this demo a simple true / false will suffice. Fill in the form and click send, then check Slack to see how this looks when we run it.

Slack is not limited to basic text; we can make things more interesting by sending attachments When someone submits a form, the JSON that this produces looks like this: { text: "Joe Bloggs has given a rating of 5 out of 10.\nContact them via" } This is all that Slack expects. The content must be given with a key, text . Now we just make a basic cURL call to our webhook URL that was generated earlier. $post = array('payload' => $payloadJson); $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $webHookURL); curl_setopt($ch, CURLOPT_POST, count($post)); curl_setopt($ch, CURLOPT_POSTFIELDS, $post); $result = curl_exec($ch); curl_close($ch); if ($result === true) {

echo 'Feedback sent successfully'; }

Sending AttAChmentS So we have successfully sent messages from a web form to Slack. But Slack is not limited to basic text; we can make things a bit more interesting by sending attachments. In Slack, attachments can be used to send images, videos and to add some interesting formatting to the messages. Let’s add a bit of colour to our feedback, to indicate positive and negative comments. First, I am going to split the string into two parts: a title and the main text. $title = "Feedback received from $forename $surname"; $text = "They gave a rating of $rating out of 10.\nContact them via $email."; Now I am going to have a set of if statements to check the rating and set the attachment up accordingly. if ($rating <= 4) { $payload['attachments'][0]['fallback'] = 'BAD FEEDBACK';

april 2016 111

PROJECTS Slack $payload['attachments'][0]['title'] = $title; $payload['attachments'][0]['text'] = $text; $payload['attachments'][0]['color'] = 'danger'; } elseif ($rating > 4 && $rating <= 7) { $payload['attachments'][0]['fallback'] = 'MEH FEEDBACK'; $payload['attachments'][0]['title'] = $title; $payload['attachments'][0]['text'] = $text; $payload['attachments'][0]['color'] = 'warning'; } elseif ($rating > 7 && $rating <= 10) { $payload['attachments'][0]['fallback'] = 'GOOD FEEDBACK'; $payload['attachments'][0]['title'] = $title; $payload['attachments'][0]['text'] = $text; $payload['attachments'][0]['color'] = 'good'; }

Colour coded In Slack,

it’s possible to add an attachment that will apply effects, such as different colours, to your messages


april 2016

Of these, color is the part we are interested in. Slack has helpfully pre-defined some colours: ‘good’, ‘warning’ and ‘danger’ will show green, amber and red respectively; but you can put a standard HTML colour code here if you wish to pick your own colours. Since I happen to want those three colours, I have just used the pre-defined version.

You can have multiple attachments, so the attachment key needs to contain an array

So what is going on here? In Slack, you can have multiple attachments, so the attachment key needs to contain an array. As I know I am only having one attachment, I have hardcoded the [0] to assign all the attachment parts to the ‘first’ attachment. The parts that have been included are:

Next we JSON-encode it in exactly the same way we did before, and send via cURL . Let’s submit some feedbacks and see the output on Slack. The colour gives us an idea of the feedback at a glance.

● fallback : This is a requirement of all attachments. Even if you will probably never see it, you should put something descriptive there ● title : This is shown as bold above the attachment ● text : As before, this just shows the text you have given ● color : This places a border of the given colour on the left hand side

The documentation of Slack’s API is very good ( It gives the full details of what you can attach to messages and the ways you can customise things. This tutorial has barely scratched the surface but hopefully it has given you a solid base from which you can build your own custom integrations.

hACking SlACk

on sale noW

Written by the industryâ&#x20AC;&#x2122;s leading experts, The Ultimate Guide to WordPress Vol II shows you how to get the best from the worldâ&#x20AC;&#x2122;s most popular content management stystem Pick up your copy at

PROJECTS Accessibility


Hidden disabilities Not all disabilities are obvious. LeeAnn Kinney puts the spotlight on the impairments we tend to ignore

There is also a plethora of situations in which a person can experience temporary – or ‘situational’ – disability. This could be a new parent who is sleepdeprived, and only has one arm available because the other is cradling a baby. Or a cancer patient may be dealing with ‘chemo brain’ – side effects from chemotherapy that include difficulty concentrating and mental fogginess.

Temporary disabiliTy Reducing cognitive load and presenting information in a clear, concise manner not only benefits the aforementioned, but also those with a learning disability or whose native language is not English. Many older people face loss of fine motor skills, reduced vision or memory. It is not unlikely that a large percentage of us will find ourselves or our loved ones in one of these situations. It is imperative we take every type of user into consideration, never assuming we know exactly who our users are, what their limitations might be, and how they are using and navigating our sites. We need to consider as many invisible, situational and otherwise ignored disabilities as we can; building accessible websites from the beginning, and not as an afterthought.


Have you ever found yourself in a situation where you were headed up to a high floor in a tall building and the elevator was broken? 15 flights of stairs later you’re panting, out of breath and annoyed? Maybe you’re lucky enough to have the physical strength and ability to get up those steps, but imagine if that wasn’t the case. What if you’re in a wheelchair and stairs aren’t an option? Or you’re elderly and walking that many flights isn’t possible? Situations like these can be a small nuisance for one person, but an immense barrier for another. Just as things like dropped curbs, ramps and lifts can help people in physical spaces, so too do users on the web benefit from virtual accessible spaces. When we build sites that do not consider accessibility, we are excluding an astounding percentage of the population. Too often, we only consider disabilities that are immediately noticeable, such as people who are blind or deaf, in a wheelchair or maybe missing a limb. But there are many disabilities that are a little more inconspicuous; those that we are unable to see just by looking at someone. These might include cognitive or learning disabilities, colour blindness and other visual impairments.


april 2016

LeeAnn (@_leekinney) is a frontend developer and web accessibility advocate. She is co-leader of Girl Develop It Philadelphia and co-organiser of ELA Conf

San FranciSco 15 JULY 2016 Learn cutting edge CSS, JavaScript, user experience and web performance techniques, and much more!

MikE MonTEiro

Sarah DraSnEr


Lyza DanGEr GarDnEr

DESiGnEr, arTiST

SEnior UX EnGinEEr

DESiGnEr, SPEakEr, WriTEr



Projects Use CSS blend modes for dramatic effects 10 tools for precise designing in Sketch Master responsive UX with Illustrator Get feedback on your designs Animate a character with CreateJS Build a custom plugin for Slack

0800 1 777 000


Guide To

Responsive Web desiGn Responsive versus adaptive design Content strategy for responsive design Build animations that scale Make your sites run faster on mobile RIP responsive design

in association with

SubScribE To NET

get the No.1 magaziNe For WeB desigNers aNd developers delivered to your door, your device, or Both

NEW priNt & digital editioN great reasoNs to suBscriBe Print edition delivered to your door ● Interactive digital edition download ● Read on iPad, Android, Kindle, Nook and more ● 13 issues in a one-year subscription ● Money-back guarantee ●



save up to


% Terms & conditions: Prices and savings quoted are compared to buying full priced UK print and digital issues. You will receive 13 issues in a year. If you are dissatisfied in any way you can write to us or call us to cancel your subscription at any time and we will refund you for all un-mailed issues. Prices correct at point of print and subject to change. For full terms and conditions please visit: Offer ends 31 March 2016


Contents RespOnsive veRsus adaptive design


COntent stRategy fOR RWd


BuiLd aniMatiOns that sCaLe


Make yOuR sites Run fasteR On MOBiLe 16

OpiniOn: Rip RWd


in association With


editor’s note

We have been keen supporters of the idea of responsive web design since the very beginning, and, boy, have we come a long way. It’s not a theory any more. It’s now a well-established standard that has truly revolutionised web design. That doesn’t mean it’s got any easier. Designing for a myriad of devices (and global audiences) poses significant challenges. And thanks to Google’s mobile-friendly update last year, it’s now more important than ever to figure responsive design out. So for this special guide we have invited some of the best experts to cover the issues that should be integral to every responsive design project: Ben Callahan discusses the difference between responsive and adaptive design, Matt Gibson dives into content strategy, Sarah Drasner explains how to create scalable

animations, Andy Davies explores how to make sites perform better, and Brad Frost controversially claims that responsive design is dead! And if that’s not enough, you should check out our brand new Responsive Web Design Handbook: Vol 2 ( RWDhandbook-278). It’s packed with practical solutions for cutting-edge layout options, responsive images, emails and WordPress portfolios, plus much more. You’ll find a teaser on the back page. Go, make it responsive!

Oliver Lindberg Editor, net magazine

a note from our partner At Webflow, we want to empower everyone to create for the web. But for web creativity to mean anything, it has to be consumed. It has to be created for someone. It has to be designed to meet people’s needs, whether for entertainment, education or support. So we’re just as passionate about empowering everyone to consume web content. And that’s one reason responsive design is so important to us. For design to be truly responsive, it has to give people the content they’re looking for, anywhere, any time, and regardless of what device they’re using. It means helping people all over the world, whether they’re using a feature phone in Tunisia or a 6S in Silicon Valley. It means that instead of making assumptions about what people want

when they’re ‘on the go’, we use research, informed hypotheses, and constant testing and iteration so we know what they want and how to give it to them. Today, over 300,000 designers, creative professionals and entrepreneurs use Webflow to share their creativity with the world. We hope this supplement gives you the knowledge, ideas and inspiration you need to build for the web responsively, whatever tools you use.

John Moore Williams Head of content strategy, Webflow

responsive guide 3


Special report

Author BEN CALLAHAN Ben is the president of Sparkbox and founder of the Build right workshop series. he writes about the web on industry blogs, and speaks at events IlluS trAtor MikE BrENNAN Mike (@mike_ brennan01) is a graphic designer based in Bath. he is currently art editor at Total Film


responsive guide

Special report

Ben Callahan unpicks the differences between responsive and adaptive design, and explores how they can help us build flexible layouts


very time I hear someone ask, “Which is better, responsive or adaptive web design?” I wince. The question itself reeks of misunderstanding, similar to the ‘native apps versus web apps’ conversation. Rather than attempting to answer the question of which is better, I’d like to try for a bit of clarification around these terms.

LAyout Back in 2010, the foundations of how we worked on the web were challenged with the introduction of responsive web design (RWD). Initially defined as a purely frontend technique involving a single DOM and some very fancy CSS (fluid layouts, flexible media and media queries), RWD was the practical answer to the theory of One Web ( journal/1716) many of us desired.

During this time, many web makers realised they could take a shortcut by skipping fluid, percentage-based layouts and just create several static, typically pixel-based layouts using media queries. Since this approach didn’t match the original definition of responsive web design, we began to call this approach ‘adaptive web design’. Perhaps we should have said ‘adaptive layouts’, since the only real difference was the missing percentage-based, fluid layout of a responsive approach.

MorE tHAN LAyout Around the same time, some supersmart folks like Aaron Gustafson and Karen McGrane were using the term ‘adaptive’, but in different ways.

Adaptive design philosophy Gustafson published the first edition of Adaptive Web Design in May of 2011. In this tremendous work, he succinctly describes adaptive web design as a “philosophy … which grounds me and helps me put any new technology, technique, or idea in perspective.” By Gustafson’s definition, adaptive web design is primarily about progressive enhancement. Responsive techniques are a part of this approach, but do not make up the entirety of the solution. Instead, fluid layouts, flexible media and media queries are used in combination with other core principles like universal

responsive guide 5


Special report

accessibility, embracing fault tolerance, and enhancing on demand. This book is a manifesto for those of us that want to build experiences using web technology that will reach as many people as possible.

Adaptive content strategy McGrane has been speaking about adaptive content since at least 2012 (netm. ag/adapting-278). Her presentations on the topic are some of the best I’ve seen. She challenges attendees not to “give in when our content authors demand a WYSIWYG text editor that works ‘just like Microsoft Word’.” She shares techniques that empower you to capture content in chunks instead of blobs, which enables you to serve multiple channels from within a single content management system. Sometimes, this might mean serving a different article title to a small screen than you do to one with a larger viewport width. After all, truncation is not a content strategy. McGrane’s thinking here is specifically focused on our process as it relates to content. Her ideas could be integrated as easily into an m-dot site, a responsive site, or a site embracing Gustafson’s adaptive web design philosophy.

Adaptive techniques Of course, there is (at least) one more usage of the term adaptive design floating around. It comes into play when we recognise there may be

Seminal work Aaron Gustafson’s Adaptive Web Design is a must-have for every web-maker

some component of a web system that requires such a variation in experience from one device to another, it’s more efficient to create two separate versions of that component to be served in different situations. Which version to serve could be based on any number of factors, including screen or viewport size, location, user agent, or pretty much anything else you can dream up. You may recall Luke Wroblewski writing about RESS (Responsive Design + Server Side Components) back in 2011 ( This idea has been expanded over

device metrics Google’s Device Metrics page offers some details about a handful of common devices


responsive guide

the years, and folks have used it as an iterative step towards a fully responsive approach, or as a great solution on its own (

SHiftiNg our MiNdSEt At Sparkbox, we’ve recently been working with an organisation to help it redesign a large ecommerce site. The company came to us because it was looking for a web studio that had helped other big brands make the shift to responsive. When we got involved, its design team had already spent a significant amount of time planning its approach. As you can imagine, it had established a system of breakpoints for small, medium, large, and extra-large screens. This is a natural step to take, given our industry’s history of breaking the web’s inherent flexibility by fixing widths with CSS. However, this way of thinking actually creates the illusion of control, instead of truly embracing the fluidity needed to work with a responsive mindset. Ideally, we would have established a much more robust foundation. We could have taken a more iterative approach, using prototyping and constantly refactoring the designs into a system of reusable patterns. Of course, this can create

The QA challenge

go adaptive For more clarification on ways to integrate adaptive content into your work, read Karen McGrane’s Content Strategy for Mobile

challenges later in the process (see the boxout on ‘The QA Challenge’). Today’s web demands an excellent experience at any width – not just for an iPhone, iPad and Cinema Display. It’s this ideal that drove me to write ‘There is no Breakpoint’ ( breakpoint-278). These days, it’s common for our work to include dozens and dozens of media queries. Some of these are for major breakpoints, and some are minor. Major breakpoints occur when there

BriNgiNg tHEM togEtHEr Adaptive layouts, adaptive content, adaptive web design. With all these terms floating around, it’s easy to see why there is so much confusion. Adaptive layouts and adaptive content encourage us to think about unique experiences or content for unique situations. Conversely, a purely responsive approach is one that drives us to see what we’re building as a single experience (despite its ability to shift), and to serve the same content and functionality to every device.

I would encourage you to begin every project with a responsive mindset – aiming for parity of content, functionality and experience are coordinated shifts across elements in the system – typically a layout shift in columns. Minor breakpoints (aka tweakpoints) are for more detailed shifts in-between those major breaks – think subtle font size or spacing adjustments. This way of thinking allows us to operate at a system level, and to acknowledge that our designs must work

The question of an adaptive approach versus a responsive one is tricky to address, mostly because the terms are so confusing. I would encourage you to begin every project with a responsive mindset – aiming for parity of content, functionality and experience – and only to veer from this ideal when needed. And when you find those points, an adaptive

well across a tremendous spectrum of device sizes. One web, designed for the broadest audience possible.

approach can be used to – well – adapt. I suppose the unfortunate answer to our initial question must be: it depends.

When I graduated from college, I took a job as a software engineer. I was basically responsible for fixing the bugs. I worked with this guy (we’ll call him John) who was my ‘tester’. Any time I committed code, John was notified and would test it for me. Nine times out of 10, he denied my requests to merge code and rejected my work. Nine times out of 10, the work I was submitting was actually correct and ended up getting merged. Let’s just say, John and I didn’t get along so well. So what was happening? John and I were operating from two different perspectives. I was looking at a problem from the context of a developer who wanted to build the best possible experience. This drove me to consider solutions that challenged the way the product worked but benefitted our users. John was viewing the problem from the context of the bug report. In his world, there was one solution and I was rocking the boat. This tension is not uncommon. Imagine that the product being tested is a fluid, web-based interface. The complexity of testing a simple interaction goes through the roof. No more PDF spec documents of what the interface should look like. Now, we’re testing across a myriad of devices, browsers and bandwidths. Needless to say, this can be frustrating. The only viable solution I’ve found is education. Our QA engineers need to be just as aware of the intricacies of a responsive approach as our designers and developers. In fact, they need to sit in the same room, hear the same conversations, have access to the same tools. This is a big shift for organisations, some of which are still struggling just to put designers and devs together. We have a lot of work to do to allow this mindset to permeate our culture. That change works best when it happens as a ground-swell. So, as cheesy as it sounds, you need to be the change you wish to see!

responsive guide 7



WebfloW takes the pain out of responsive design Want the responsive power of a developer without spending all day in a code editor? It’s time you met Webflow As a smart, savvy web professional, you will have got used to building out multiple mockups for different screen sizes, or translating those mockups into clean, production-ready code. But it doesn’t have to be this way. You don’t have to kick off your development process by building a bunch of static representations of a living, breathing, dynamic website. Or translating all those representations into code. Instead, why not start your next website with a tool that: ● Works with the basic building blocks of the web (HTML, CSS and JavaScript) ● Has a completely visual interface ● Looks and feels like the tools you know


responsive guide

● Lets you visually manipulate markup so what you see is actually what you get ● Automates a lot of the most annoying aspects of responsive design for you In other words, why not use Webflow?

A fAmiliAr, visuAl workspAce From the moment you log in, you’ll feel right at home. Instead of translating your designs into code with a text editor, you’ll use familiar visual tools to achieve exactly the look you want. Just pick an HTML element, drop it onto the canvas, give it a class name and style away. All our pre-built components are responsive, so you’ll never have to ask yourself, ‘Will this work on


meet a truly visual Cms

With Webflow, every design change you make will cascade down on to all smaller devices

my phone?’ You’ll start designing in the desktop view, but there’s no need to keep switching between device sizes. Instead, every edit you make will automatically cascade down to smaller viewports (so your desktop styles cascade to all sizes, while tablet styles only affect smartphones).

animations that work beautifully on every device (as long as you remember there’s no hover on mobile). That means freelance designers get the power to design, prototype, build and launch websites all by themselves. Which also means a faster design process, and happier clients.

Webflow’s clean, production-ready code means your sites will be ready to launch as soon as you get sign off And you aren’t stuck with whatever reflow Webflow comes up with. Nope – everything is customisable. Switch over to tablet or mobile views to make your site look, feel, and perform just the way you’d like. Since people use devices other than iPhones to access the web, Webflow even offers adjustable breakpoint previews, so you can see exactly how your site will look on the boss’ BlackBerry. Super-handy when you know your audience has a particular fondness for Nexus devices, for example. Webflow also allows you to create rich, engaging interactions and

But Webflow isn’t just for freelancers. Agency and enterprise designers can easily use it to: ● Wireframe, prototype, and rapidly iterate on ideas ● Easily illustrate interaction concepts ● Quickly build ready-to-launch landing pages ● Build blogs and other content hubs

Of course, Webflow is more than just a visual web design tool and hosting platform. With the allnew, all-visual Webflow CMS, you can easily build totally custom, content-driven websites. With no need to mess with databases, PHP, or hiring a developer. Or trying to cram your unique content into what is, in the end, just another blogging platform. With Webflow CMS, you can create completely custom structures for your content, design that content in a familiar visual interface, and edit it right on the live website. Plus, adding new dynamic content is as easy as filling out a form. While other CMSs can produce similar end results, they usually require extensive collaboration with designers and developers – an involved process that can take months. But with Webflow CMS, a single designer can create a powerful, dynamic and responsive site in a matter of days, or even hours. Want to learn more about the future of content management? Take a look at

Webflow’s clean, production-ready code means your sites will be ready to launch as soon as you get sign off. And even if you can’t use Webflow’s code (for whatever reason), you can export it for your dev team to work from.

Discover the future of responsive design at responsive guide 9


Content strategy

Content strategy

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

MAt t Gibs on w: t: @duckymatt job: Chief creative officer, Cyber-Duck areas of expertise: UX, IA, HTML and CSS, project management


Responsive web design is often seen as an implementation challenge. Here, Matt Gibson considers it through the lens of content strategy

Usually, when we talk about responsive design, we talk about implementation. We muse about how to use media queries, fluid grids and other techniques to make our designs stretch and adapt to any screen size or environment. While that’s a good start, these techniques alone won’t ensure our designs are easy to use across a plethora of platforms, let alone actually useful for our audience. This is where content strategy comes in. It defines which content we’ll need, and – more importantly – why we need it in the first place.

mobile-first The approach outlined by Luke Wroblewski in Mobile First is quite rightly touted as the most appropriate way to approach the canvas for responsive design. However I think we should go further, and consider content strategy through mobile-first. Starting with a smaller canvas increases focus. It makes us concentrate on what content really matters and what is core to the user experience. If we start with a huge desktop canvas, we’ve got all this extra space to play with. It’s tempting to shove more and more content onto our canvas, regardless of how much value it adds. We end up reducing the worth of our core content by surrounding it with content that, for the majority of users, isn’t relevant. The result is interfaces so full of noise that users struggle to identify and use the parts that are genuinely useful. Instead, we should carefully consider why our content exists. Often, plenty of our content is included (or not) purely because of assumption. And assumption is the enemy of a solid content


responsive guide

strategy. The trouble is, it’s easy for us to make assumptions about what users want or need, especially when it comes to mobile. There’s this pernicious idea that people only use their mobile phones when they’re in a rush, or ‘on the go’. Of course, that may be true some of the time. But research studies have found that 60 per cent of smartphone data is used indoors. People are just as likely to use their mobile whilst sat at their desk, relaxing on the sofa, or even while sat on the toilet (apparently four in 10 of us regularly use our mobile phones in the loo). So how can we avoid making these assumptions? The obvious starting point for challenging our own biases about what our users really need is to speak to them. Conducting research by interviewing users, observing them and analysing any available data helps strip away the veneer of assumptions.

Content parity matters This is why content parity is so important. We must get out of the habit of presuming what a user will or won’t need – or do – based on the device they’re using. Instead we need to ensure our core content is available across any platform. So, no more proverbial slamming of doors in the faces of our users, forcing them to download our app, or telling them their screen isn’t big enough. No more presumptions about what content people might find useful on their phones. For example, I recently ordered something from Amazon on mobile, before realising I’d given the wrong payment details. This should have been easy to rectify, but because Amazon hides the content

Content strategy

related to editing an order on mobile, it wasn’t. Requesting the desktop version of the site kept redirecting me to a different page. So I ended up having to wait until I had access to my laptop to fix my order, all because Amazon presumed people wouldn’t need to edit orders on their phones. As Karen McGrane says: “You don’t get to decide what device somebody uses to access the internet. They do” (

parity and priority Of course, content parity doesn’t mean we shouldn’t adapt how we prioritise our content for different

We must not presume what a user will or won’t need based on the device they’re using platforms. The main priority for users accessing your site on smaller screens might not be the same for users on bigger screens. We applied this thinking to the website menu. It has parity on every platform, so you can still access all the content, whatever device you’re using. But as screen space becomes more scarce, we change the menu items that are immediately visible. We even begin to surface new menu items: directions to our office, or our phone number. We knew from traffic data this was the content people were looking for on their mobile

devices. By giving it more priority, we could make it easier for people to find.

finding your Core Content So how do we define our core content? A good place to start is writing down both organisational and user goals and finding any areas of clear overlap. Then, using research as a base, map out user journeys that are based on the types of tasks users come to the website to complete. From this, you can begin to plan what content you’ll need and how you should communicate it. Chances are you have some of the content you need already. By auditing our existing inventory of content, and framing it against the items that support both our organisational and user goals, we can define what content to keep and what content we’ll need to create. That doesn’t mean you need to have every single piece of content ready and in place before designing. From my experience, this just isn’t realistic. Instead, our designs will ultimately be shaped by understanding and knowing what our content will be made of, and the types of content required.

planning for portability As the landscape we’re designing for is constantly shifting, our content needs to be flexible. We must create content with portability in mind from the outset, because it will need to reach more places and platforms than ever before. Ultimately, a deviceagnostic approach to content strategy is best. Let content dictate layout and interface design, rather than the other way around.

responsive guide 11



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

S Ar Ah Dr ASner

w: t: @sarah_edo job: Senior UX engineer, Trulia (Zillow Group) areas of expertise: JUX, SVG


Create animations that sCale for all deviCes Sarah Drasner explains how, by using the right tools and smart design,

we can make our animations shine in a multi-device world


Animation on the web is particularly nuanced, as we have to adjust our work to take into account bandwidth, code compatibility and product design. In this article I’ll explain the recommended set-up for a truly scalable animation. I’ll also cover different ways of working with the animation to achieve positive user experiences and parity across our multi-device world. I will cover a selection of key use cases: adding CSS animation to SVG sprites, dealing with standalone graphics that require complex movement, creating a responsive experience that adjusts to the viewport, and making animations simpler for mobile.

to load up additional HTTP requests or bog yourself down with replacement image media queries. As an alternative to the img attribute, the picture element handles image replacement quite nicely, but when dealing with different-sized moving images, it becomes much more cumbersome to keep the animation consistent. SVG is far superior in this way: we can write code once and continue to adjust the visual complexity of our image. SVG also provides a navigable DOM, so it becomes simple to reach inside a complicated graphic and animate elements individually. As its name suggests, SVG is built to scale. It’s incredibly simple and

I highly recommend using SVG (Scalable Vector Graphics) for graphics with responsive animations. These are resolution-independent, so you won’t have

intuitive to adjust the size of a SVG. Even with these key features, though, units and even the way we perceive images will change from

responsive guide



reSponSive informAtion

Figure 1 With this approach, as well as changing the size we also reduce the complexity of our design

screen size to screen size. Don’t worry; I’ve got you covered! Let’s take a look at a few ways of working with responsive animation.

SVG SpriteS and CSS animation This first technique works particularly well for responsive, standalone animation – for example when illustrating text. We start with a typical responsive sprite, and adapt not just the size of the image, but the complexity of the graphic too. This makes a lot of sense when you think about what we can visually interpret on a smaller screen. In order for the graphics of our animation to remain clear, we must also consider screen real estate. Take a look at the illustration above (you’ll find the final animation at On the left you can see we have designed for desktop, tablet and mobile implementations. On the right, we have done two things to get ready for export. The first is to remove repetition. We can see clearly that the desktop and tablet views are similar enough that we could either alter the properties or replace them with CSS media queries. An example of such an alteration would be to adjust the background so it’s green instead of blue. For the mountains, the change in design between different device sizes is significant enough that we will need to apply a class on the element to hide or reveal it. The most important part of this technique lies in the way we’re handling the viewBox attribute. You can think of the viewBox as a little window in which we view the SVG. The SVG itself can extend beyond the bounds of the viewBox , but only the area within it will be visible. The rest will be cropped out. For the desktop and tablet versions, we want only the first tile to be shown, so initially we set the

Responsive development with SVGs doesn’t have to stop with the SVG. The fact that the SVG DOM plays so nicely with HTML DOM attributes means you can have multiple pieces that switch places on the screen. Even things like infographics – traditionally flat images that are totally inaccessible to screen readers – can become completely accessible. Infographics are a great example of how animation and responsive design can completely overhaul the way we show information, but the use of infographics as a sharing mechanism has steadily declined. One possible reason is that in the last two years, mobile engagement has increased over even desktop. Infographics that are exciting on desktop become an arduous affair on a mobile device. With the rise of traffic on mobile, sharing via social media becomes frustrating and causes the engagement potential of these images to decline. Animation, with its potential for attracting attention as well as interaction, could completely revolutionise this way of presenting information. Responsive animation means keeping our large mobile audiences engaged. Adding accessibility into the mix means we’ve got an all-inclusive, interesting, easy-to-use way to show a lot of information at once.

animation options Animation can help make infographics much more accessible on mobile

viewBox inline in the SVG to cover just the top section of the sprite: viewBox="0 0 490 474" . We then shift the visible area with JavaScript to "0 490 500 500" .

responsive guide 13



focus on

reSourceS Jank Free The Chrome team’s performance website offers articles, videos and guides to educate developers on how to avoid performance pitfalls while animating. SVGomG Jake Archibald’s SVG optimiser can save you from an incredible amount of cruft. This visual GUI extends the terminal-based SVGO, but its visual indicator quickly shows you the results of your work. animation in reSponSiVe deSiGn Val Head’s responsive animation article presents different ways to implement responsive design with focused art direction and choreographed UX, without limiting performance. animatinG SVG with GSap This post takes you through a myriad of GreenSock features via live demos of capabilities and comparisons. Each section comes with links to their docs, which provide good jumping-off points. reSponSiVe animated inFoGraphiCS In this presentation, I take a detailed look at how we can breathe new life into the infographics format with animation, and explain how to implement these updates yourself.

Complex moVement Any time you have a standalone graphic with more complex movement, I suggest switching to the GreenSock Animation Platform (GSAP), rather than using CSS. Although there are loads of cool things that GSAP has to offer, the main advantages in this case are twofold. The first is cross-browser stability. Thanks to all our browsers and systems, frontend development means a large testing matrix. When we include mobile, it gets exponentially more complex. Older Safari browsers on older Apple devices can have spotty support for moving SVGs, and there are a lot of gotchas on Android as well. GSAP offers really stable movement, without sacrificing speed. The second advantage is the timeline. This allows for the stacking of tweens and even staggered effects, with streamlined and intuitive code. For the rest of the examples in this article, I’ll pair GSAP and SVG. Let’s first establish that animating elements with transforms and opacity is the most performant

Animating elements with transforms and opacity is the most performant approach approach. It’s easier for the browser to optimise because it reduces repaints, which is the most important thing to keep your eye on for jankand stutter-free animation. Also, if we use the attributes within the SVG DOM they will scale in tandem with the entire SVG, because they are honouring the space within the viewBox . So if you scale a complex SVG using percentage, flexbox or other techniques, your animation will also scale accordingly. This means you don’t have to adjust anything; you can focus on writing your code correctly just once. And that is a pretty huge boon. For example, let’s consider a really complicated animation like the one shown in fig 2 (code at netm. ag/demo2-278). I will usually design all the elements I need first, and slowly reveal them over time. This allows me to plan things out in advance, which leads to cleaner, more legible code. The finished animation is completely scalable – you can randomly adjust the button while it’s running and have the entire thing adjust to a new percentage (see fig 3).

reSponSiVe Ux Figure 2 The original design in Illustrator – we design everything first, and then slowly reveal things


responsive guide

Designing a responsive experience that adjusts to the viewport relies on some planning in the design stage.

Animation initially, so it can be triggered by a user click event. Now everything is scoped to its requisite section, all the way from design to finished product, it’s easy to know where to go for adjustments. We separate out these builds and have each Lego-like piece adjust via percentage, and it scales beautifully. Alternatively, flexbox would work equally well, depending on the support level.

leSS pizzazz on mobile

Figure 3 The animation changes sizes when you click the button, but the animation experience stays consistent

You can think of it like little interlocking Lego blocks: we go through the design, build and development stages, scoping each particular area to itself, but what the user ends up with is a complete (yet completely different) view on each viewport. We took this approach for our Huggy Laser Panda animation (shown on page 12). Take a look at it in action at We designed this carefully, considering the units that would have to switch and stack. On mobile, to make the pieces correctly interlock, we adjust the positioning of the right section (outlined in magenta for clarity), and flip it so it can stack appropriately. We make sure each part shown in the boxed sections is exported within individual SVGs and properly named, including smaller units or groups. This means in our export settings (I use Jake Archibald’s SVGOMG), we do not remove unnecessary IDs or groups. We then use multiple functions. Each section is scoped independently, and there is one repeated function for all of the animations that loop.

Let’s face it, mobile connections (particularly in less developed countries), can be pretty slow. Whether you only have a few key animation interactions on your site or a huge WebGL experience, sometimes an animation that looks beautiful on desktop need not scale down to a mobile experience. In the case of a large canvas animation, or even a really complex SVG animation that is non-critical to the user experience, sometimes the best thing you can do is to tone it down or turn it off for smaller devices. Active Theory’s site does a beautiful job of this (fig 4) by showing you a full particle canvas animation on desktop, which is replaced with a simple polygon background on mobile. The interactions on mobile are still very on-point, transitioning beautifully beyond even what we expect on native. The team still shows off its interaction prowess in the way you navigate the site, which is arguably more impressive on mobile than an animated background would be anyway. The design saves the bandwidth for what counts.

ConClUSion Whether you design for responsive from start to finish or simply turn animations off on mobile, having a concrete plan for what your viewers experience from device to device is vital. This is particularly true in a landscape where mobile is king. Content, type of image, and user bandwidth all help guide animation choices for responsive design.

Figure 4 Active Theory

keeps its visual language consistent, while dropping heavy canvas animations on mobile

function revolve() { var tl = new TimelineMax();, 4, {transformOrigin:"50% 50%", rotation:360, repeat:-1, ease: Linear.easeNone}, "begin"); ... return tl; } This makes the design much easier to build off and reason about. We can even pause each animation

responsive guide 15



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

Andy dAvies w: t: @andydavies job: Web performance advocate, NCC Group areas of expertise: performance, ecommerce, web development


Make your websites run faster on Mobile

Andy Davies explores how we can build pages that deliver a speedy experience across all the devices Mobile phones and tablets are quickly becoming the main way we access the web, with many retailers and news organisations seeing more than half their traffic coming from these devices. Phones and mobile networks are getting faster, but there’s still a huge discrepancy in capabilities. Cheaper phones tend to have slower processors and less memory – and even though 4G networks are being rolled out, we still spend large amounts of time connected to 3G or even 2G networks. 4G speeds in the US fell as more people switched, so faster networks might not save us, in any case. The sites we’re attempting to deliver are getting larger – figures from the HTTP Archive (mobile. show the average mobile site is now over 1.2MB. We’re asking more and more of our visitors’ devices and the networks they use.

Measure what Matters It’s easy to measure page size or the number of HTTP requests, but they don’t really represent our users’


responsive guide

experiences. We need measures that are relevant to the visitor’s experience – for example, how quickly usable content appears, or when someone can start interacting with a page. We can create filmstrips in WebPageTest that show the progress of our pages as they load. This tool even has a metric – Speed Index – representing how quickly the visible screen is drawn. Lower scores are better, and 1,000 is a great target to aim for. Using the W3C User Timing API ( user-timing) we can also measure critical events, such as how long our hero image takes to load in our visitors’ browsers.

the critical rendering path Once we understand how long we’re making people wait, we can start to work on reducing that time. The areas I concentrate on first are the resources a browser needs to display content and the dependencies between them. This is known as the critical rendering path (for more on this,


page progress

there’s an excellent guide from Google’s Chrome team: When the browser receives the HTML for a page, it starts building the DOM. As it’s doing this it discovers the other resources a page needs: style sheets, scripts, images and so on. The style sheets are downloaded, parsed and the CSS Object Model (CSSOM) is built. Scripts may query the style information of elements – dimensions, position and so on – so any synchronous scripts that follow the style sheets don’t get executed until the CSSOM has been built. Once the browser has the DOM and the styles that apply to the elements, it can start to lay out and paint the page to the screen. It’s also at this point the browser finally discovers any custom fonts or background images. Many of the resources on the critical rendering path just keep growing. In the last two years, the size of

If we want fast sites, we must be more deliberate about what we include on our pages style sheets and scripts have grown by a third, and fonts have more than doubled. We’re too relaxed about how our pages perform. If we want fast sites, we must be more deliberate about what we include.

We can go further still and split our styles into those needed to render a page’s core content and those that can be loaded later. The smaller the set of core styles, the less work a browser has to render the page. For this we can use a library like Filament Group’s loadCSS ( The Guardian is known for pioneering this approach and actually inserts its core styles directly into the HTML. Others are following similar approaches: one mainstream retailer has a core CSS of only 6.8KB, and its site is very fast for most of its visitors.

A filmstrip from WebPageTest illustrating how the Guardian’s homepage renders

Fonts We’ve fallen in love with web fonts, but at what cost to our visitors’ experience? Fonts are discovered late in the critical rendering path and at this point downloading the font or retrieving it from cache may be the only thing that’s preventing the text on the page from being displayed. Could you limit the number of custom fonts you use to one, or maybe two? Or could you follow Medium’s lead and only use the fonts already available on devices ( If you can’t, look at how you can shrink the font download. Sub-setting can remove any glyphs you don’t need. All modern browsers support WOFF, but WOFF2 (with its more efficient compression) will make the download smaller still. Currently we rely on JavaScript to control whether a font blocks text rendering, but new browser features will enable better control in CSS. The font-display

styles CSS has a tendency to grow over time – as sites evolve people are cautious about changing existing styles and so add new ones instead. Gzip compression reduces the download size of CSS but the browser still has to decompress it and parse the rules. The uncompressed size of style sheets can be 10 times the downloaded size and contain thousands of rules that introduce a noticeable impact on performance. Structured approaches to CSS and design such as Atomic Design, OOCSS and so on, coupled with style guides, are a great way to manage CSS over time. Teams that adopt these approaches appear to be better at keeping CSS under control.

page growth HTTP Archive shows what mobile pages are made up of and how they’ve grown over the years

responsive guide 17



blocking script element. This introduces the risk that when their scripts are slow to load, they delay the rest of the page. In the worst case scenario they may be completely unavailable or break your page completely.

taMe iMage size Although I’ve focused on measuring performance based on time, size still does matter – particularly where visitors pay for their data, or have really slow connections. Images continue to contribute the largest proportion of the page size, so delivering the optimal version is vital. Initially, responsive design used a single image and relied on browsers scaling it to fit the device, but this leads to devices downloading images that are far too large for them, wasting bandwidth, and increasing processor load. Tim Kadlec observed some devices taking over a second to resize large images. The srcset attribute and picture element give us better control over the images we deliver to mobile devices. srcset hints to the browser which image

waiting game We all hate waiting for fonts to load

property will allow us to control render blocking behaviour in CSS. It’s only available in Chrome Canary at the moment, but should gain wider use. Finally, W3C preload hints will remove delays by enabling us to specify fonts that should be downloaded without waiting for CSS to be parsed first.

scripts When a browser comes across a synchronous script (one without the async attribute) it pauses DOM construction until the script finishes running. If the script isn’t already in the browser cache, then it must be downloaded, adding to the delay. Often to prevent the delay from scripts, we add them to the bottom of the page. However, browsers have got more intelligent and the preloader now downloads these early (even though they won’t block). By including scripts early and using the async attribute, we help the browser to prioritise the download appropriately. The browser knows it must download the script, but it also knows it doesn’t need to wait and can carry on building the DOM. Unfortunately most scripts are included synchronously and so block DOM construction. Changing them to non-blocking and triggering their behaviour using an event handler will improve our rendering performance. Third-party scripts such as A/B testing and tag management are often included using a normal


responsive guide

Size matters – especially where visitors pay for their data, or have really slow connections it should pick, but the browser is free to override that choice. It’s generally used where we have the same image but want to deliver different versions in terms of size or resolution. picture on the other hand is an instruction to the browser, and uses a media query-like syntax to define which image the browser should choose. It’s typically used where a different crop of an image is needed for a smaller-screen device. There’s still the challenge of deciding what size images and which variations our design needs, but by using srcset and picture we can deliver optimal images to most modern browsers. PictureFill allows us to polyfill them in older browsers too.

Be deliBerate As Lara Hogan reminds us in Designing for Performance, fast sites don’t happen by accident. They’re something we need to be deliberate about, both in the processes we adopt and the techniques we choose to use. With new features like responsive images, better control over font loading and APIs like service worker, browser makers are offering us new tools to help make our pages faster. How deliberate are you being?





Brad Frost explains why the ‘responsive’ label is no longer relevant fast-paced web design landscape. It’s up to us to help steer our organisations and clients in the right direction. We web designers and developers have seen the future, and realised it requires us to step up to the plate and take a more active role in our organisations’ decision making. To do that, we must discard the blame game. No more ‘Oh, I want to do the right thing, but my clients are dumb and my boss won’t let me.’ Take ownership. It’s not easy convincing people to follow one path instead of another, but that’s what’s required in order to do great work. It’s critical to fight on behalf of our users, and push back when asked to do things that are detrimental to the user experience. Make your clients and stakeholders understand why adding 17MB videos and 23 tracking scripts to a web page is a terrible idea. And if they still disagree, stick to your guns. Things like responsiveness, performance, accessibility, patterns and documentation should be baked into our workflows by default. You don’t have to ask permission to follow your craft’s best practices. If that means doing things on the sly, so be it. In 2016, we need to roll up our sleeves, fight the good fight, and do whatever we can to make great experiences for our users.

Responsive design is dead. OK, maybe it’s not that dramatic, but we’ve thankfully reached a point where responsive design has become the default approach for creating things for the web. Five-plus years ago, the ‘responsive’ label gave us something to rally around as we frantically searched for ways to cope with this explosion of web-enabled devices, screen sizes, form factors and so on. But the time has come for us to stop shoving the word ‘responsive’ in front of everything. Folks like Andy Clarke and even Ethan Marcotte himself have predicted this day would come, and I think in 2016 it’s finally here. To look at the future of responsive web design is simply to look at the future of web design. That is not to say responsive design is no longer important (it’s more critical than ever), but the time has come to move beyond surface-level labelling and focus on the tangible things organisations can do to create great experiences. Now the novelty of responsive design has worn off, how do we roll up our sleeves and really get things done?

Fighting the good Fight


It’s not the responsibility of business folks and other non-web stakeholders to keep up with the insanely


responsive guide

Brad ( is a web designer, speaker and consultant based in Pittsburgh, PA. He has helped create tools including This Is Responsive, Pattern Lab and


From the makers oF

in association with

Like this? You may also like this ...

Pick up your copy at

Net 2016 278 april