Page 1

Save $27

Free three-month Pro trial

The voice of web design

Issue 283 : Summer 2016 : net.creativebloq.com

Save $20

Free video course on performance testing

Project

Make sites work offline and improve performance


Welcome

Welcome

editor’s note

Learning by doing is a great way to boost your skills. If you don’t know how something works, just start experimenting. In our Cover Feature this issue, Modernizr’s Patrick Kettner shows you don’t need to be scared of implementing cutting-edge web technologies – there are almost always fallbacks available so users on older browsers don’t miss out. And if you want to play around with frontend techniques further, give CodePen a go. Find out just how much you can do with this powerful code editor in Tim Holman’s walkthrough from page 76. We’re also offering you all an exclusive three-month free trial of the CodePen Pro plan, so you can dig even further.

There are all kinds of ways to broaden your horizons in our fast-paced industry. Whether that’s by experimenting, sharing code, meeting peers with a similar or different skillset, or by going to conferences and attending workshops (there are four to choose from at September’s Generate London: netm.ag/workshop-283). If you can’t travel, try a virtual event. I recommend the CSS Summit (netm.ag/CSSsummit-283), and readers can get 20 per cent off any ticket with the code NETMAG. Never stop learning!

Oliver Lindberg, editor @oliverlindberg

Featured authors Patrick k e t tner

tim holman

amanda cheung

rohit BoggaraPu

Patrick is product manager for Edge at Microsoft and the core developer of Modernizr. From page 68 he highlights seven killer web features you can use right now w: github.com/patrickkettner t: @patrickkettner

Tim is an interactive developer at CodePen. From page 76 he walks through eight amazing features of the frontend playground you need to know about w: www.tholman.com t: @twholman

Amanda is lead UX developer at DockYard and adjunct professor at the Massachusetts College of Art and Design. She curates our gallery this issue, from page 44 w: www.dockyard.com t: @acacheung

Rohit is a yogi in the making, and software engineer at Adobe in Bangalore. On page 96 he walks through how to create interactive charts in Ionic 2 w: github.com/rohitb4 t: @4two2

summer 2016 3


@netmag

/netmag

Future PLC, Quay House, The Ambury, Bath, BA1 1UA +44 (0)1225 442244 flickr.com/photos/netmag netmag@futurenet.com net.creativebloq.com

medium.com/net-magazine

editorial

editor Oliver Lindberg oliver.lindberg@futurenet.com, Production editor Ruth Hamilton ruth.hamilton@futurenet.com, art editor Rebecca Shaw rebecca.shaw@futurenet.com

editorial ContributionS

Rohit Boggarapu, Amanda Cheung, Simon Foster, Leo Frishberg, Chad Gowler, Tim Holman, Dean Hume, Ryan Irelan, Sam Kapila, Iain Lobb, Luke Matthews, Mindy McCutcheon, Chris Mills, Soledad Penadés, Toby Pestridge, Femke van Schoonhoven, Dylan Smith, Marcelo Somers, Aaron Speer, Dudley Storey

art ContributionS

Ben Fearnley, Will Ireland, Ben Mounsey, Sébastien Thibault, iStock

management

editorial director: games, photography, creative and design Matthew Pierce matthew.pierce@futurenet.com, group art director Rodney Dive rodney.dive@futurenet.com

Creative bloq global editor-in-chief Dan Oliver dan.oliver@futurenet.com, managing editor Craig Stewart craig.stewart@futurenet.com, Content manager Kerrie Hughes kerrie.hughes@futurenet.com, Staff writer Dominic Carter dominic.carter@futurenet.com CommerCial Commercial sales director Clare Dove clare.dove@futurenet.com, Senior advertising manager Sasha McGregor sasha.mcgregor@futurenet.com, director of agency sales Matt Downs matt.downs@futurenet.com, Head of strategic partnerships Clare Jonik clare.jonik@futurenet.com CirCulation trade marketing manager Juliette Winyard juliette.winyard@futurenet.com ProduCtion Production controller Nola Cokely nola.cokely@futurenet.com Production manager Mark Constance mark.constance@futurenet.com liCenSing Senior licensing and syndication manager Matt Ellis matt.ellis@futurenet.com

neXt iSSue on Sale 11 aug 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

summer 2016

APPS uSED

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

PAPER

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

TyPEfACES

antonio, Share tech, merriweather, titillium Web


contents Issue 283 : Summer 2016 : net.creativebloq.com

FeeD

FEED

side proJeCt of the month 16

simon Caminada‘s Alloy browser offers a new way for users to organise their tabs

CLients from heLL

17

beYond pixeLs

20

need List

21

event report

23

A designer finds himself in an unwanted power struggle with a physical therapist

toby pestridge gives us a peek into the underwater world of octopush

The stuff we want this month, including a tool that makes storyboarding simple

oliver Lindberg shares all the goings-on from the latest beyond tellerrand event

WorkspaCe

18

Quirky mascots, unusual transportation and inspirational art make the Underbelly studio unique. mindy mcCutcheon shows us round

voices Game over

26

After a rapid rise, web games are waning. iain Lobb asks if they’re gone for good

Create first

28

thinkinG outside the box

37

biG Question

38

Leo frishberg presents an unusual new methodology for inventing the future

aaron speer walks through the limitations of off-the-peg website builders

How do you refactor code? We asked the experts for their tips and tricks

Q&a

41

The fT’s senior developer patrick hamann on the importance of passing on your skills

6

summer 2016

VOICES

intervieW

32

Jeff veen, the co-founder of Typekit, shares his thoughts on web analytics and explains why he chose to move into venture capital

sUBscRiBe to net And sAve Up To 54%

TAke AdvAnTAge of THe prinT And digiTAl BUndle Turn to page 24 to find out more Want the Pro package? Turn to Page 51


Contents rEgular

GaLLerY

44

amanda Cheung runs through some great new websites, including one that revolutionises how we tell stories online

RegUlaRs netWork

8

exChanGe

10

The latest mail, tweets, posts and rants

Zoe Gillenwater, Jackie balzer, kevin hoffman and tim millwood share advice

showcase

free 3-month CodePen Pro trial See Page 76

desiGn ChaLLenGe

52

foCus on

57

profiLe

58

hoW We buiLt

64

Three designers mock up community cafés

sam kapila on testing typography

sebastien Gabriel, the designer responsible for keeping google Chrome consistent

reword – a tool to tackle online bullying created by Leo burnett melbourne

PRoJects serviCe Workers

84

atomiC

90

patternpaCk

94

ioniC 2

96

dean hume on how to use service Workers to serve content when you’re offline

FeatURes tomorroW’s teChniQues todaY 68

the best of Codepen

Chris mills shares some awesome new browser features that you can start using right away

Think you know Codepen? Think again. tim holman shares eight underused gems to streamline your workflow

76

dudley storey runs down 10 guidelines to remember when creating scalable svgs

marcelo somers explains how patternpack can help you keep your code in sync

rohit boggarapu shows you how to build interactive charts in ionic 2

PrOjECt

10 GoLden ruLes for responsive svGs

femke van schoonhoven shows you how to prototype an interactive app in Atomic

100

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

Web standards

106

soledad penadés takes a look at the new Mediarecorder Api

Web performanCe testinG 108

ryan irelan runs through the tools you need to start testing performance

aCCessibiLitY

Chad Gowler on asking about gender

114

summer 2016 7


Mail, tweets, posts and rants contact us

@netmag

/netmag

netmag@futurenet.com

net.creativebloq.com

medium.com/net-magazine

The web is becoming more reliant on professionals if anything, as applications are increasing in complexity. The need for web-based software to be testable and performant has never been more important. Also AI is a long, long, long way from automating programming. netm.ag/crockford-283 gives this some context.

Robert Smith, Manchester, UK

Is web desIgn dead? net: As the web continues into its awkward 20s, society is becoming less and less reliant on web professionals. In issue #276, Conny Liegl explored this phenomenon, and took a closer look at the areas where web designers can’t be replaced by DIY tools (netm.ag/design-283).

Web design has become so sensitive that it can change the base of a business if not executed properly. UX and content are the most crucial part of a design which can lure a visitor and convert them into a customer. Trends change every year ... I feel like we should follow the trend but as a reference, not copy them fully.

John McCann, MA, US

Programming style In this talk from JaxConf, Douglas Crockford explains why automatic programming is not on the cards yet (netm.ag/crockford-283)

new scrIpt net: In issue #272, Trine Falbe explored how to successfully conduct user testing with children (netm.ag/children-283). Great article. There is a lesson here for interviewing all age groups … Not to let the script dictate the conversation. In fact, the conversation should dictate the script.

YellowLabs, Auckland, NZ

Off the mark?

Web professionals In issue #276, Conny Liegl explored our growing reliance on automated services in place of web professionals (netm.ag/design-283)

8

summer 2016

First off, thank you for your great publication. I’ve been reading it for years and it’s always been right on the money. However, I opened up the August edition to find the team photo of Jam3 [p58-59]. I find this photo a bit

offensive and am surprised that in this day and age people are presenting women in this way. I am pretty sure you have run articles on the sexism in the industry before and this photo is not going to help.

Barry Ramsey, Basingstoke, UK net: You’re right, we work hard to support and encourage diversity in who we represent in the mag. In this instance, the image was supplied by Jam3 and it was by far the strongest and most striking option for that opening slot. There are a lot of problems around sexism in the tech industry and we recognise it’s a very important issue, but we try to balance this with letting agencies choose how to represent themselves.


Network tHE PoLL

Where do you get most of your clients from?

cool stuff We learned this month ConVerSational interfaCeS

Sponsorship 3% A direct way to reach out to a select group

Via your website/ Google search 6% Great SEO ensures your site stays prominent in search results

Content marketing 3% A smart way to get your message in front of a large audience

Dribbble 5% A strong profile lets clients know exactly what you can do

Designer Adrian Zumbrunnen recently made his website conversational as an experiment. He was overwhelmed by the response: he received over 300 emails within the first day and a burst of media coverage. Here he details what these kinds of interfaces might mean for the future of web design. netm.ag/conversation-283 a Web for eVeryone

Word of mouth 78% A solid reputation among past clients gets you a long way

Pitching process 5% Your sales skills win over new clients

from our timeline

How do you approach your web layouts? Focus on the site’s goal. Establish the grid. Determine interaction hierarchy. Get inspired, then go do what you do best! @TKDSNR I sneak up from behind when they aren’t looking and stuff them in a big bag. @stewartritchie Depends on the need, but optimised for speed and mobile bandwidth.

Currently I use Bootstrap, Sass and import only what I need. @cbillowes Look at Awwwards. Realise there’s not the time/budget to attempt anything half as good. Go home. Light a candle. Cry in the shower. @Octavector It needs to be centred around the content, and what that content will look like on a mobile device. @jpeach17

I try to determine how the business’ needs for the site will match up with the user’s expectations, then build to that. @anthonylweb I write HTML, then CSS, then JS; mobile first, up to desktop sizes. If it doesn’t fit on mobile, it can probably get thrown out. @nonswearyphil 1.Think like a user: Easiest way to get what I need on this website? 2. Think like a business: How to funnel users/convert/convey? @Shambix

The principle of ‘offline first’ is a laudable one, but it requires JavaScript capabilities that aren’t present on every device. Jeremy Keith reminds us that sites that are reliant on JavaScript exclude millions of users; we should be building a web that works for everyone. netm.ag/keith-283 ethiCal DeSiGn

Tristan Harris is a former design ethicist; he used to work at Google where his role was to “design things in a way that defends a billion people’s minds from getting hijacked”. In this article he describes how design can exploit psychology and reframe our experiences, for better or worse (often worse). netm.ag/harris-283

summer 2016 9


Send your questions to netmag@futurenet.com This monTh feaTuring... Zoe Gillenwater Zoe is a web designer and dev specialising in UX, RWD and accessibility w: www.zomigi.com t: @zomigi

Practical advice from industry experts

QUESTION OF THE MONTH

How different is Drupal 8 to previous releases? Graham Dougmont, Brisbane, AU

Jackie BalZer Jackie writes CSS as head of frontend development at Behance w: www.Jackiebalzer.com t: @jackiebackwards

tim millwood Tim is a freelance web developer with a focus on Drupal and Ruby on Rails w: tim.millwoodonline.co.uk t: @timmillwood

kevin Hoffman Kevin specialises in digital and content strategy, and UX design w: kevinmhoffman.com t: @kevinmhoffman

New release Much of Drupal 8 is now based on Symfony, which means big changes for developers

TM: Very, but you may not notice. For site builders who never touch a line of code, but just install and configure modules, nothing should be too unfamiliar. The biggest change comes for developers and themers. There is much more YAML, much more OOP, and even Twig for the frontend. A lot of the codebase is now based on Symfony, so we have proper routing, controllers, services and other great modern PHP practices. This may seem scary for existing Drupal developers, but it’s really not. It’ll set you up for greatness with many other PHP platforms and frameworks also using Symfony. Flexbox

Flex-basis How does flex-basis differ from height/width?

Barney Carroll, London, UK

ZG: The value for your flex-basis property is your starter width or height. If you have flex-grow or flex-shrink set to a nonzero value, your boxes can get bigger or smaller than the flex-basis value in order to fit the space. If you have flex-wrap on,

10

summer 2016

you can think of flex-basis like a minimum width (or height, if using column orientation), because as the items can wrap when they run out of space, they never have any reason to shrink smaller than the flex-basis value. If you have flex-grow off and flex-shrink on, flex-basis becomes more like a maximum width, because you’re telling the browser items that aren’t allowed to grow bigger than the flex-basis value.


Q&As

3 simple steps What apps do you use the most for collaborative working? Sara Soueidan, LB

KH: It may seem like there are hundreds of collaboration tools for remote teams to choose from, but if you consider them in three basic categories, it’s a lot easier to pick what’s right for your team.

flex learning If you’re still getting to grips with flexbox, take a look at Wes Bos’ video tutorials (flexbox.io)

FrontenD DeveloPment

socially accepTable What is your definition of done?

Dan Davies, North Wales, UK

Jb: This is a difficult question! A quick Google search says, informally, ‘socially acceptable’. You might feel compelled to wait until your product, website or feature is complete, polished and bulletproof before releasing it into the world, but if we think in terms of a minimum viable product that can be iterated on and improved over time, then you need only wait until you have the smallest possible acceptable unit for people to start using, before you can get feedback and insight on your work. Nothing is ever completely done when there is always room to improve. Collaboration

beTTer ToGeTher What are the best tools for collaboration between designers and developers, or interdisciplinary teams as a whole?

Liz Brown, Amsterdam, NL

Kh: In terms of physical tools, the best ones are a whiteboard and whiteboard markers, and Post-It notes or paper with permanent markers. If you mix the two and write on a whiteboard with a permanent marker, don’t panic! Trace over the non-whiteboard marker line with a similar-coloured whiteboard marker, then erase it like you normally

would. It will get 99 per cent of the permanent marker off. The rest you can get with whiteboard cleaner. DruPal 8

TesTinG TiMe How should modules and sites be tested in Drupal 8?

AsyNcHroNous discussioN Tools

Slack seems to rule the market in the web design space, but a lot of the enterprise teams I know that use JIRA and Confluence opt for HipChat.

Enk Spenge, Ghent, BE

TM: PHPUnit has been added to Drupal 8, which is awesome. Not all core tests use it yet, but many do. When you write a module, there are three main types of tests you can write, all based on PHPUnit. Unit tests are basic raw tests that allow you to test the basic functionality of a class or method. Kernal tests bootstrap many aspects of Drupal to allow for fairly functional tests. Finally, there’s browser tests. These are the slowest option, but enable users to test UI elements and do a full bootstrap. JavaScript testing has also recently been added.

Video coNfereNciNg Tools

There are many choices, but I keep two around because one invariably fails. I usually go with Appear.in or Hangouts, both of which can be launched directly from Slack. I like UberConference as a third fallback.

Flexbox

FallbacK soluTions What are your fallback solutions for non-supporting browsers, both for layouts that do and don’t follow source order?

Aaron Bazinet, Beaumont, CA

ZG: One of the great things about flexbox is that it automatically overrides most other layout CSS in browsers that support it. So, for your flexbox fallback you can use whatever CSS you normally would

sHAred documeNTATioN Tools

Docs can be simple, Office-style docs (Google Docs), prototypes (Balsamiq), or even shared whiteboarding environments like one I’m building called ‘Boardthing’. Shared docs are most commonly stored in Dropbox or GitHub.

summer 2016 11


exchange Q&As to create your layout (including floats, inline-block or table-cell ), and add flexbox on top as an enhancement to optimise the use of space. If you’re using flexbox to visually reorder content, there’s no fallback for this. However, you should only be using reordering as a progressive enhancement anyway; the flexbox order property doesn’t change screen reader or tabbing order, so it should only be used for cosmetic reordering that doesn’t affect the meaning of your content. If you stick to this rule, it won’t matter if a few users see the nonreordered content. DruPal 8

Good To Go? is Drupal 8 really ready to use?

Fiona Cook, Birmingham, UK

TM: Drupal 8 has been out for over six months, and there is even an 8.1 release now. With previous Drupal releases, we have had to wait for contributed modules to become stable enough to use for primetime sites. The module everyone used to look for was Views, which is now part of Drupal core. Many other modules are also ready, some of which only have alpha or beta releases (make sure you test these using something like Behat). There has also been a big push to port modules, which is awesome to see – it just cements the fact that Drupal is a serious platform with great backing. Taking all of this into account, Drupal 8 is very much ready to start building sites on. Its use depends on the complexity of the site, but the more complex the site, the longer the development, at which point Drupal 8 will be even more ready.

dev landscape Previously frontend-only languages like node are being used futher back in the stack

12

summer 2016

strike a balance Achieving a good balance between current and new technologies is part of the working methodology at Behance

Collaboration

Flexbox

love and peace

MulTi-row layouTs

How can designers and developers better understand each others’ needs?

Liz Brown, Philadelphia, PA

i’ve heard that, despite being able to, flexbox is not meant for multi-row layouts (which should be for CSS grids). true?

Kh: Love, peace and understanding is all they need. But that takes very different forms for each discipline. In order to build alignment on ‘the thing that’s in your head’, the best thing you can do is communicate using the full spectrum of human senses. Don’t just write out requirements, describe them in a conversation. Even better, draw them. Better still, prototype them. If you can make or draw a box, a circle, a triangle and a line, you can pretty much describe anything that’s possible in UI design.

Octavector, Kent, UK

ZG: You heard right! Flexbox is not a grid system – it’s all about making the best use of space on the current row or column. When your flex items wrap to a new row or column, they don’t care about lining up with items in the surrounding rows or columns. This doesn’t mean you can’t use flexbox for grid-like layouts, but to do so you’ll have to assign explicit widths to your boxes, which negates one of the main reasons to use flexbox to begin with.

FrontenD DeveloPment

FrontenD DeveloPment

Job descripTion

new Toys

How do you know what a ‘frontend dev’ is these days? it seems to be an everexpanding set of skills.

Do you prefer to really nail the current technologies or adopt new tech?

Kam Banwait, London, UK

Jb: I consider a frontend developer to be, traditionally, anyone who writes code relating to the client side of a website. It’s definitely an ever-expanding set of skills, but that’s what makes this such an exciting time! The frontend coding landscape is more robust than ever: there are advances in CSS, exciting changes in JavaScript, as well as frameworks and toolkits galore to learn about. Plus, languages that were once only relevant on the client side are expanding further back into the stack (i.e. node), making it possible for frontenders to be some of the most well-rounded developers there are.

Alexander Wigmore, Bridgend, UK

Jb: There is an important balance, and at Behance we do some of both. Nailing a technology is useful in terms of stability and predictability, and tends to happen organically when something proves itself reliable and useful over time. Since most new frontend technologies are based on existing ones, knowledge begets knowledge, enabling you to pick up new technologies more easily. However, adopting new tech is still a worthwhile endeavour – it keeps both you and your product relevant, and may arguably be the most fun part of being a web developer! Plus, you can be effective with new tech without first mastering it.


San FranciSco 15 JULY 2016

Learn about SVG animations, design sprints, modern workflows and more, from the likes of Mike Monteiro, Lyza Gardner, Wes Bos and Braden Kowitz

Sydney 5 september 2016

The first time in Oz! The show features John Allsopp, Nick Finck, Erika Hall and Zoe Gillenwater, and will explore flexbox, animation and responsive web apps

London 21-23 september 2016

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

TickeTS on SaLe now

www.generateconf.com


People, projects & paraphernalia

This monTh FeaTuring...

Side PROJeCT OF THe MONTH 16

Simon Caminada‘s Alloy browser offers a new way for users to organise their tabs

BeyONd PiXeLS

Toby Pestridge gives us a peek into the underwater sport of octopush

20

CLieNTS FROM HeLL

17

Need LiST

21

A designer finds himself in an unwanted power struggle with a physical therapist

What we want this month, including a tool that makes storyboarding simple

WORkSPaCe

18

eveNT RePORT

23

Mindy McCutcheon shows off the quirky mascots and inspirational art at Underbelly

Oliver Lindberg shares all the goings-on from the latest beyond tellerrand event

summer 2016 15


FEED

Side project

Alloy

Simon Caminada set out to revolutionise the browser experience with his task-based approach

an essay about cats. Another eight cat video tabs and two Wikipedia pages. I’ve already got 30 tabs open, and counting. With Alloy I can organise them: A task for the cats, a task for the trip. Any task you like. With a simple click I can switch to the tabs I need, hiding the others.

Side project of the month net: What is Alloy (alloy.simoncaminada.ch)? SC: Alloy is a web browser. What’s different about it is its structure: Alloy is task-based, which means you can associate tabs to tasks and only display currently relevant content. It’s designed for the power user who has many tabs open at once. Info job: Designer and developer w: simoncaminada.ch t: @SimonCaminada

net: How did the idea develop? SC: I often have multiple browser windows open, each packed with tabs for different tasks. I thought that this problem couldn’t be uncommon and that browsers haven’t really evolved in user experience for a long time. I mapped out what could be better, and now that’s what Alloy is all about. net: Can you explain the tasks and tabs work? SC: The tabs are still the same as you know them; what’s new are the tasks. They are superior to tabs and build a new level of organisation. You only see the relevant tabs for your selected task, the other tabs are completely hidden. For example: I’m planning a trip to San Francisco. This takes about 20 tabs open for hotels and activities. Besides that I’ve got to write

16

summer 2016

net: What technologies did you use? SC: Alloy is built up on Electron, which is built on Chromium. Electron allows you to build native applications with web technologies. I chose this platform because it delivers a good foundation and means I can develop at a faster pace than would be possible if I was building it from ground up, which is especially important for a side project. net: How did you manage to fit the project around your day job? SC: The first few days I had a lot of ideas for improvements and wanted to implement them right away. But after some time I learned to just make a short note for later. The actual development was done in small steps in the evenings and at weekends. net: What was your biggest challenge? SC: The biggest challenge is to deliver a powerful tool, so users can actually switch from their current browser. The tasks are a big step towards this, but it needs more. Unfortunately, Alloy hasn’t overcome this problem yet, but the project is still in alpha and I hope to get to this point in not-too-distant future.


Feed

how to

name your web design agency What you name your agency is important, because it’s the outside world’s first impression of your business. Here are some tips to help you get it right

A good story

Fighting it out

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

Illustration: Sébastien Thibault sebastienthibault.com

I was contracted to finish designing a business card for a physical therapist, and then to apply the same branding to some other materials. The card project was finished, so I sent a photo for the client to use on his professional Facebook page. He approved it but then started asking for micro-changes to the text position, sending 12 changes over three days. Some of the changes he wanted wouldn’t work because of features like Facebook buttons, and I let him know that. I also let him know the changes were adding costs to his final invoice. Client: Great, that’s great! I like that kind of pushback! I really dig working with designers in a kind of ‘wrestling’ relationship where we get into arguments back and forth about the designs because I used to design jewellery and know things about design. Design works best when both sides hash it out in a struggle! Me: You like to fight over every decision? Client: Yes. Me: And you think this process makes for the best work? Client: Yeah!

Me: To be perfectly honest, that style of combative working relationship doesn’t suit my business model. It tends to make projects take far longer and cost more. I don’t mean any disrespect, and if that means you’d rather not work with me, that’s fine. But that said, I have some great ideas for your brochure, so if you’d like to continue I look forward to seeing you on Friday. Client: Wow, who pissed in your cornflakes? Cancel Friday’s meeting and forget about getting any more work from me! I’ll find some college student to finish the rest of the work since your artistic sensibilities are apparently so delicate. NEGATIVE ENERGY SUCKS, AND I WON’T HAVE IT IN MY LIFE! As he’d paid for the work I’d already done, I happily sent him the project files and wished him good luck. I guess he wasn’t as interested in pushback as he thought he was.

clientsfromhell.net

‫‏‬Of course, it works best if you can come up with a name that means something to you. @de says, “When myself and @ryanhavoc were at our lowest point, we came together to build something stronger.” They liked the phrase ‘United we stand, divided we fall’ from the fable of the lion and the oxen (netm.ag/divide-283), and got the name No Divide and the ox logo from there.

rAndoM eleMent If you don’t have that, a more unstructured approach can work. When @deanleigh was after a name for his full-service agency, a random name generator came up with Wholething. The team at @parallax “repeated words out loud to each other until we found one that sounded cool”, and @hankchizljaw likes to translate words into Latin until he finds one with an available domain.

whAt’s in A nAMe? Another option is to use a play on your real name. @RichardCarter used the surnames of the original partners to get Peacock Carter, even though he was “told it sounds like a private detective agency!” They kept it even when Peacock left the business.

summer 2016 17


3

1

5

2

4

Mindy McCutcheon shares the stories behind the handmade gems in Underbelly Creative’s Salt Lake City studio workSPACE Underbelly Creative is a small design studio nestled in the heart of Salt Lake City, Utah. When founder Anthony Lagoon started Underbelly in 2012 from his living room, he never dreamt he’d one day have a fully staffed creative studio pumping out products for clients across the globe. The Underbelly team has grown from a couple of friends helping Lagoon with freelance work, into a 13 person ass-kicking team. The studio specialises in great digital design, and we have a talented pool of illustrators, designers, developers and photographers who collectively make Underbelly an awesome place to work.

18

summer 2016

We quickly outgrew our previous workspaces. In December 2014 the studio moved a few blocks across town to a new space where we’d be able to better stretch our legs. Thus began our endless quest to create the perfect studio with just the right amount of lighting, optimal paint tones and adequate sound-proofing for when foosball games [1] get too rowdy. One unique piece in our studio is the giant custom table [2], which was hand-crafted by Lagoon’s father-in-law. We also have some awesome artwork from our very own team, including a huge mural

[3] designed by one of our

illustrators and posters that display

reminders of things we strive for every day. When we’re not busy being super-serious (ha, just kidding), we’ve created over 15 versions of our mascot, Monstro [4], including Marty McFly, Indiana Jones, The Dude, and more. Lastly, when we need to zip around for meetings or errands, we can choose from an extensive collection of transport methods, including bikes, skateboards and scooters. However, hands-down the most popular modes of transportation are our Onewheel and Boosted board [5]. The results of their use have not always been positive, though – there have been a few instances of injuries, holes in the walls, and quite a bit of road rash. Nonetheless, we have a blast using them! ProFILE

InsIde Underbelly

Mindy is Underbelly’s operations manager extraordinaire (underbelly.is). As well as keeping the team running smoothly, she competes as a professional cyclist


FEED

Beyond pixels

Photography: Marc Brakels

stuff I lIke

Rachel smIth Developer, CodePen

www.rachsmith.com

Coolors This is the easiest way for me to come up with attractive colour palettes for demos. It’s great for people who are not naturals at choosing colours that work together. www.coolors.co

Developer Tea Developer tea is a short podcast that explores topics outside those specific to development. It keeps me thinking about the human side to a profession that can often focus on the technical. www.developertea.com

proDuCTive app Productive is a simple yet very customisable app that helps me form good habits. I love the UI art direction; it’s not too overwhelming. productiveapp.io

20

summer 2016

OctOpush

This month … Toby Pestridge burns off excess energy with a spot of underwater hockey bEyOnd PIxELs At the bottom of a swimming pool in a sports centre in Dorset, there is a small ‘X’ on the centre tile. You wouldn’t know it was there unless you were looking for it, but it marks the point where, every Tuesday night, a three-pound lump of lead and plastic is placed and then beaten from one end of the pool to the other by two teams. This is underwater hockey. I started playing around 10 years ago when I was looking for an activity to keep me fit, but wanted something different from the usual football or running. I knew about underwater hockey (or ‘octopush’ as it’s also known) from my scuba diving days, so I looked for a local team I could join. Underwater hockey originates from the 1950s, when it was created by a scuba club in Southsea to provide the divers with something to do in the winter months. Although it’s not recognised as an Olympic sport, it has a governing body, official leagues, and the world championships were recently held in South Africa. The game is played on the bottom of a pool, and the aim is to get the puck into the opposing team’s goal. Players wear a diving mask, snorkel, water polo hat (to protect their ears), fins and a rubberised glove, and use a short ‘pusher’ to move and flick the puck. It’s a high-energy sport that’s not quite full contact, but bumps

and scrapes are inevitable. My colleagues are used to me arriving at the office looking like I’ve just returned from Fight Club! Besides the obvious health benefits, the main thing I’ve gained from playing this crazy sport is a strong reliance on good teamwork. I’m the creative director in an agency, and I’m always liaising between our design team, the developers, clients and project managers. Everybody has a task and a role to play, and we have to pull together to reach our collective goal. It’s also important to debrief after a game to discuss what worked, what didn’t work, and how we can improve next time. Digital project debriefs are equally important, where we discuss the ups and downs of a completed piece of work, and any lessons we can learn for the future. I think it’s really good to have an activity outside of work – something that inspires you or gives you a different perspective. Sometimes the office can be a hard place to find inspiration, so get out there, find yourself a random hobby and use it to make something awesome!

PROFILE

From up NorTh I find a lot of inspiration for my web animation design in film and video. A friend recommended the From Up North galleries and I’ve been coming back ever since. www.fromupnorth.com

Toby (@TobyPestridge) is the creative director at Createful. He began his career in print design and now specialises in design for apps and the mobile web


Need list

Need list

Stuff We Want Small objects of web design wonder: From an elegant way to store your notes to a tool that makes storyboarding simple 1

Meep

2

Free

Bear

4

Mod

3

Free (Beta)

Sketch app eSSentialS

5

$29

BoordS

FroM $28

6

VArIouS

data viSualiSation

£31.99

What we think (1) Get your favourite blogs and top news stories delivered directly to your ears with ‘eyes-free’ personal radio app Meep (www.meep.com). (2) Bear offers an elegant, flexible way to compose, synchronise and store notes on your Apple devices (www.bear-app.net). (3) Learn Sketch the practical way with this book and accompanying tutorial files (netm.ag/essential-283). (4) Put down your Moleskine, there’s a new notebook in town. Send your Mod off once it’s full and the team will digitise it, ready for you to revisit in a dedicated app (modnotebooks.com). (5) This webbased tool from Animade promises to make storyboarding simple. It’s currently in beta, with new features being added all the time (boords.com).

(6) Learn how to analyse, design and curate information to build effective data visualisations in this new book (netm.ag/visualisation-283).

summer 2016 21


next month

thE bESt nEw toolS for frEElancErS We review essential tools for every aspect of the freelance life, from time-tracking to workflow

PlUS create user interface elements with react

art direct your layouts with cSS flexbox, grid, Shapes and more

build a Material Design app with angular 2

ISSUE 284 on SalE 11 aUgUSt Print edition, back issues and sPecial editions available at

myfavouritemagazines.co.uk digital editions available on itunes, google Play, kindle, nook and Zinio

net.creativebloq.com


Feed

EVENT GUIDE Craftini DATE: 5 August 2016 LOCATION: Online if you’re a crafter (not the kind who’s handy with papier-mâché), you can explore everything to do with the Craft CMs from the comfort of your own desk thanks to this online conference. www.craftini.net

BEyoND TEllErraND

Postcards, procrastination and progressive enhancement: Oliver Lindberg reports from sunny Düsseldorf EvEnt rEport

JSConf iCeland DATE: 25-26 August 2016 LOCATION: ReykjAvik, is Designers and devs from Mozilla, Microsoft, npm and netflix are all lined up to share their gems of web wisdom at this nordic javascript extravaganza. 2016.jsconf.is

frontend ConferenCe

Marc Thiele, the organiser of beyond tellerrand, must have a direct connection to the weather gods. How else would you explain the glorious sunshine that has shone down on the Düsseldorf show for the last six years running? No wonder the attendees, coming from 21 countries this time, enjoyed nearly 2,000 scoops of ice cream from the van parked in the courtyard. There couldn’t have been a better start to two days packed with 13 inspiring talks. In his session, Christopher Murphy gave a very personal account of how he was taken to hospital on New Year’s Day with a suspected heart attack. He encouraged everyone not to stop procrastinating, and to use time during any project efficiently to widen their knowledge. And that’s exactly what beyond tellerrand is all about: broadening your horizons. The conference, which had a delightful text-mode ANSI art visual theme, covered a wide range of disciplines around web design and, well, beyond: the security issues of AngularJS, web typography, CSS animation, progressive enhancement, the Internet of Things, game design with JavaScript, and loads more.

Stand-out sessions were delivered by Catt Small, and British artist Dominic Wilcox. Small talked about designing socially impactful digital experiences and how she’s been creating a mobile sex education game for young adults called SenseU (senseugame. com). Wilcox’s talk showed off a recent project in which he encouraged children to draw their own invention ideas (netm.ag/invent-283), which he then turned into physical installations with the help of local craftspeople. The conference concluded with Mr Bingo, who explained “how to get the public to fund your daft ideas”. By way of an example, he reminisced about how he had crowdfunded a book celebrating the best of his Hate Mail postcard project with an incredible rap video (netm.ag/rap-283). A perfect start and a perfect ending, and an amazing atmosphere throughout, partly thanks to DJ Tobi Lessnow’s ‘musical sketchnotes’. For more on beyond tellerrand Düsseldorf, see the wrap-up post at netm.ag/wrap-283. See you in Berlin in November!

proFILE

Photography: Andreas Dantz

DATE: 9-11 MAy 2016 LOCATION: DüsselDORF, geRMAny URL: beyondtellerrand.com/events/duesseldorf-2016

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

DATE: 1-2 septeMbeR 2016 LOCATION: ZuRiCh, Ch Design meets tech for this twoday show with speakers including sara soueidan and tim kadlec. tickets have sold out for the past five years, so don’t dilly-dally. www.frontendconf.ch

Smartweb DATE: 7-9 septeMbeR 2016 LOCATION: buChARest, RO A superb lineup including bruce lawson, una kravets and Rachel Andrew make this community event in bucharest a smart choice for your events diary. www.smartwebconf.com

loopConf DATE: 5-7 OCtObeR 2016 LOCATION: FlORiDA, us Wordpress lovers can top up their knowledge in this two-day conference (plus workshop day) in a Fort lauderdale resort that promises beachside bliss. www.loopconf.com

summer 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

From

ÂŁ55

based on an annual direct debit

save up to

29

%

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

From

ÂŁ45

based on an annual direct debit

save up to

31

%

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

From

ÂŁ66

save up to

54

%

based on an annual direct debit

15% off Adobe creATive cloud We have teamed up with Adobe for a limited time to offer you 15 per cent off the Creative Cloud All Apps plan when you subscribe to net. Sign up now to save ÂŁ82!*

myfavouritemagazines.co.uk/netmag * Participants must subscribe before 31 August 2016. Valid in Europe only, not the US. The offer is available on the Print Only and Print & Digital bundle plans, with direct debit payment. The discount code will be emailed to you once the first subscription payment is debited from your account. Adobe, Creative Cloud, the Creative Cloud logo are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.


Opinions, thoughts & advice

web games

Game over CreAte fIrst, reseArCH lAter

28

Creating the products of the future is a tricky business. leo frishberg explains why designing to fail can actually help reduce the risks

IntervIew

32

Q&A

41

We catch up with Jeff veen to hear how he helped pioneer data-driven development, and revolutionised the type industry with Typekit

We talk bit-rot, progressive enhancement and the importance of passing on your skills with the FT’s senior developer Patrick Hamann

Iain Lobb charts where it all went wrong for web games, and wonders if we are headed for a glorious revival It was 2009, and people all over the world were awaking to find lost and lonely cows wandering into their Facebook feeds. FarmVille, Zynga’s light farming simulation with heavy viral-sharing mechanics, was sweeping the globe, heading a boom in web-based games. Millions of dollars poured into social games from both players and investors. Elsewhere, indie developers were creating unique games with Flash, uploading them to an audience of millions on portals like Kongregate and Newgrounds. While standards-based web technologies allowed for only limited gameplay possibilities, plugins like Flash, Shockwave, Java and Unity enabled a richer experience, closer to traditional console and PC games. In this golden age of web gaming, broadband adoption was growing rapidly, but speeds were still not great; many users didn’t have the bandwidth to stream video at a reasonable quality. In this context, a highly optimised Flash game – downloading in just a few seconds, but offering an hour or more of gameplay – was


Opinion

a pretty good use of bandwidth. Web games were poised to conquer the world.

PLayer down

BattLe ground There has been not only a battle of technologies, but a battle for the hearts and minds of players – and for the way we

For all these changes in gaming habits, the technology to power web-based games is in the best place it has been for years access and consume media. Today, internet speeds allow us to stream high-quality video from YouTube, Netflix and Twitch, or to download games from Steam, mobile app stores and game console networks. Young gamers seem just as happy to watch their YouTube heroes DanTDM and PewDiePie play games as they are to play themselves. Minecraft stands almost as an industry in its own right, with its own books, magazines, shows and celebrities, monopolising the free time that was once spent on browser-based games. But for all these changes in gaming habits, the technology to power web-based games is in the best place it has been for years. While browser vendors have started to finally pull the plug on plugins (market leader Chrome recently dropped

all support for Shockwave, Java and Unity plugins), 2D game performance using HTML5 Canvas is now fantastic, even on mobile devices. WebGL adoption is also higher than ever. Frameworks have emerged to help developers build on these technologies more easily, from optimised 2D renderer Pixi.js to robust framework Phaser. Unity now has a WebGL exporter, meaning Unity-authored games can also be played in the browser without plugins. We have the tools to make web gaming great again, if players want us to. We can build it, but will they come?

PROFILe

Fast-forward to 2016, and web games are in sharp decline. There are fewer players and fewer new games. Zynga’s most valuable asset is now reportedly its San Francisco office building, having struggled to transition to mobile games, and major players from web gaming are diversifying into other areas. Web portals like MiniClip have moved towards publishing mobile games. Many indie game developers have switched their focus from the web to downloadable PC games and mobile app stores. The decline of the web game correlates strongly with the rise of the smartphone. Steve Jobs, in his 2010 ‘Thoughts on Flash’ blog (netm.ag/flash-283), bemoaned the plugin’s performance, and barred it from the iPhone. Open standards advocates urged a switch to HTML5 technology that was far from ready to power games, leaving web games consigned to the desktop in the age of mobile. Android supported the Flash plugin for a while, but Flash content struggled to compete with native apps. While web games were constrained by slow JavaScript and ActionScript code, and software rendering, native apps could be coded ‘to the metal’ of the device they ran on, allowing smooth, 60 frames-per-second rendering on relatively low-powered devices. Perhaps downloadable, app-based games just make more sense on mobile, where players may not have a fast, continuous connection, or unlimited data. Games can be downloaded once and played whenever users want, even without an internet connection. Web games, on the other hand, can’t be launched offline, and always have to be re-downloaded before play. The transition to mobile apps had an attraction for indie web game developers too – they could finally sell games directly to players rather than relying on advertising revenues from free games.

Iain (www.iainlobb.com) is a veteran game developer, currently specialising in Unity. He co-hosts The Creative Coding Podcast

summer 2016 27


VOICES Essay

28

summer 2016


Essay

process

Create first, researCh Later Illustration by Ben Mounsey

Leo Frishberg presents a new methodology to help minimise the risks involved with inventing new products

Here’s a problem: You’ve been working on a super-cool project for a couple of sprints, only to discover the end users don’t really need whatever it is. Or you’re part of a startup, focused 150 per cent on getting the technology stood up, but your friends and family don’t understand the reason for the thing you’re building. Or you’re the product owner on an agile team, buried deep in the enterprise. In spite of being trained in product ownership, you don’t have a good sense of the end user’s expectations – only the business group’s ‘requirements’. What do you do now? Let’s be clear: inventing the future is hard. Really hard. The statistics bear it out – less than 10 per cent of startups are still in business two years later; less than 10 per cent of new ideas become profitable ... ever. So given the likelihood of failure when embarking on something new or disruptive, how can you reduce that risk?

A new ApproAch One approach, the approach I’ve been using for over 20 years, rests on a simple notion: Fail fast, intelligently. You may be familiar with the ‘fail fast’ part – a viral meme of recent past – but that modifier (‘intelligently’) makes a huge difference. My personal approach is called Presumptive Design (PrD) and with Charles Lambdin, I have written an entire book about it (www.presumptivedesign.com). It’s not that I invented the process – rather, we took the time to write it down. In a nutshell, PrD is a method to rapidly reduce the risks involved with inventing the future.

PrD is an agile-like method, meaning it embraces many of the same values promoted by agile culture. It is based on five principles, but these offer guidance to reducing risk rather than being hard-and-fast rules. You are free to figure out how to apply the principles in your own organisation as appropriate to your context. Let’s take a closer look at each of those five principles.

1 Design to fail This is the key to PrD: You design an artefact you know will fail. Wait, I hear you protest, nobody in my organisation will let me design something we know will fail! That’s crazy! But the fact is, almost all organisations offer products, services and outcomes that fail. The problem is that, in the most extreme cases, they fail after spending millions of dollars. Instead, we promote the notion of failing intelligently. ‘Design to fail’ means you start with the expectation your artefact will fail. You begin the process knowing you are intentionally designing something that will provoke critical reactions from users.

2 create, discover, analyse The typical approach to inventing the future starts with research. The research leads to deep analysis to find meaning behind the results, proceeds to conceptualising and ends up in a design. PrD turns this on its head: you begin by creating an artefact, then offer this artefact to your stakeholders during the discovery phase. Then you figure out what their reactions actually mean.

summer 2016 29


VOICES Essay 3 Make assumptions explicit One of the biggest challenges to inventing the future is the assumptions we rely on; assumptions about who will be living in our imagined future, what they will value, feel and do. Sadly, most organisations fail miserably at surfacing any of those assumptions explicitly during the product definition phase, and products get imbued with all sorts of intentions that are not aligned with external stakeholder values. This is the toughest principle to apply effectively. But consider the old maxim: Half the solution is in the statement of the problem. The purpose of PrD is to get key internal stakeholder assumptions out in the open, and get these assumptions rigorously tested out in the field without creating a bona fide solution. We care deeply about the assumptions behind a design brief because if those assumptions are wrong, the entire downstream workflow is at risk. The most expensive way to discover you’re working on the wrong problem is to build the solution.

and services. To do this, it needed to move aggressively into software products. In the PrD ‘creation session’ (a workshop in which internal team members align on their assumptions), key TrwoSound stakeholders brainstormed about potential software applications they believed their customers could use. These took the form of simple paper prototypes of various screens representing new functionality – new to both TrwoSound, and, they presumed, new to their customers (principle 1: Design to fail). Over a period of a few weeks, the design team visited handfuls of TrwoSound customers, offering the artefacts in ‘engagement sessions’ – interview sessions with external stakeholders (principles 2-5). In most cases, customers didn’t understand the offerings, or more importantly, offered clear reasons why these putative solutions wouldn’t work in their context. Superficially, it sounds like the process was a complete failure, but just the opposite is true! The results were a resounding success on a number of levels:

We care about the assumptions behind a design brief because if those assumptions are wrong, the entire downstream workflow is at risk. The most expensive way to discover you’re working on the wrong problem is to build the solution 4 Iterate, iterate, iterate You don’t know just how much you’ve failed, or in what ways, by working with a single stakeholder. You need to see a few folks before you can be confident of how wrong you were at the start. While there isn’t a hard-and-fast rule for how many people you need to see or how many times you need to repeat the process, we like to say you should do it until you run out of time, resources (people or money) or lessons learned (saturation).

● The TrwoSound team quickly aligned on a set of assumptions, many of which they didn’t even know they had ● TrwoSound’s customers had the opportunity to critique those assumptions, not through a simple survey or interview, but by reacting to an artefact that embodied those assumptions ● TrwoSound inexpensively determined how far off their own assumptions were from their customers’ without building anything other than a provocative artefact

5 The quicker you go, the sooner you know

puTTIng IT ALL TogeTher Consider this case study that illustrates the principles of PrD in action. A small manufacturer of high-end network digital audio/video equipment (we’ll call it TrwoSound) was interested in expanding its products

30

summer 2016

The boTToM LIne PrD is an agile way to reduce the risk of inventing the future. It enables internal teams to imagine a desired future within hours, quickly capture reactions to that imagined future from their intended audiences, and do so less expensively than any other research method I’ve ever used. In the end, PrD raises your confidence that you and your team are solving the right problem.

proFILe

Consider the first principle: Design to fail. You are going to fail. On purpose. You aren’t going to avoid it, no matter how much time you spend on the artefact. In fact, that misses the point. So why delay getting the artefact in front of your customers? The only reason for delay comes from calendars – it may take a week or two to get appointments with your stakeholders. If the stakeholders are available, you’re ready to go.

Leo is currently principal at product strategy consultancy Phase II, and has a strong experience-centred design philosophy (www.presumptivedesign.com)


Voices Interview

Info job: Design partner, True Ventures t: @veen w: about.me/veen

Jeff Veen Words by Jim McCauley Photography by Will Ireland

The co-founder of Adaptive Path and Typekit charts his journey from fonts to finance, and shares how he helped change the face of web analytics


Interview

summer 2016 33


Voices Interview “I’d never thought, like, some day I’d be in finance,” says Jeff Veen. But here we are; having played a major role in some of the most web’s most important developments – spearheading UX-driven design at Adaptive Path, bringing analytics to the masses at Google Analytics, and upending the way we approach fonts on the web at Typekit – Veen is now a design partner at venture capital firm True Ventures. He’s also made the surprisingly smooth transition from the West Coast to Hoxton, London. “You know, we’re on the other side of the road when we’re driving around, but other than that it’s still startups and pourover coffee and fixed-gear bicycles everywhere I look,” he smiles. Veen’s early years were marked by an interest in technology, but a career in straight computing was never on the cards. “I did a bit of computer science in university,” he says, “and found I was not interested in the rigour of learning the math and things like that, but I was enamoured with what you could do with the machines themselves.”

DIGITAL DAWN So after studying journalism and history, Veen found himself working at a Santa Barbara newspaper just as traditional print publishing methods were being swept away by digital workflows. Different departments were being merged together, and the young Veen found himself not only writing and editing stories, but also getting involved in issue planning and laying out pages. “I found it fascinating, ” he says. “I was really interested in the information hierarchy and even things like how the flow of the pages worked together.” All this meant a brand new thing called the World Wide Web was a natural fit: putting words and pictures on the screen was just like putting words and pictures on the page, but with an extra interactive element. “It just seemed so fluid and intuitive back then, like it was the obvious next step.” Veen started making web pages back in 1993, including an HTML CV that would later score him his big break with Wired magazine. Veen responded to a call for interns by sending in an email containing a link to his CV online. “I was apparently the first person that had done that,” he recalls. “It got their attention and they called me up for an interview.”

34

summer 2016


Interview

His time on Wired – most notably working on HotWired, its web-based spin-off – taught Veen some valuable lessons. “That sense of discovery and collaboration, I think, is something that informed a lot of my values throughout my career,” he notes. “The fact that ‘all of this is new, we need to figure it out together so we can make something that’s bigger that we can all benefit from’ – it’s a very different competitive stance than I think exists today on the web.”

A NEW PATH HotWired was also where Veen started to see the potential of UX- and data-driven development. The platform was supported by advertising, which meant from the beginning everything was driven by metrics. “We quickly realised we could tell how it was being used, and optimise based on that use,” Veen explains. “And that led us down the path of: Instead of shipping something and then seeing how the statistics drove the future iterations, could we find a way to do that before we even ship?” As it turned out, yes, they could. Veen joined six others to form Adaptive Path, with a plan to use research methodologies to inform products before they were built. This

Smarter and smaller than the big rockstar agencies of the late 90s, Adaptive Path was a perfect fit for the more cautious times following the dotcom bust of 2000-2001. “We could do these nimble, lightweight projects with the goal and the pitch being that we would improve the functionality of the site that existed already, using a set of methodologies that introduced companies to their customers. It was incredibly successful, it worked really well.” And yet it wasn’t Veen’s ideal environment. He didn’t enjoy consulting that much, he felt a need to create his own product instead of troubleshooting other people’s. This led him to launch Measure Map, a web app that helps people analyse their blog statistics. The product was quickly bought by Google and resulted in Veen spending two years designing Google Analytics – “and for better or worse that’s still more or less the interface that they have today.”

“Instead of shipping and then letting the stats drive future iterations, could we do that before we even ship?”

information would influence the direction of the project, as a way of reducing the overall risk and therefore the overall cost.

FONTS AND FINANCE Realising the size and scope of Google was interesting, but it still wasn’t where he wanted his career to be, Veen left looking for a new project to pursue with his original Measure Map team. Around the same time, browsers started to introduce the @font-face rule they had previously shunned, and concern began to rise that fonts were about to be Napsterised, like music had been.

Veen saw an opportunity: “What if we put a little bit of protection on the font files, and we would host all the fonts and sell them as a subscription service like Spotify, which was also very new at the time? You would have access to an entire library, you wouldn’t have to make licensing decisions to be creative, you could choose any font you wanted, and since we were hosting them we could measure the usage and pay royalties based on that. It worked like a charm. It grew like crazy and really started to change the way the web looked.” It didn’t hurt that around the same time, the iPhone and the iPad were forcing developers to step away from Flash, and instead build sites using CSS, JavaScript and, of course, web fonts. “It was a big sort of transitional period,” reflects Veen, “and I think Typekit dipped into it right at the perfect inflection point.” Typekit was later snapped up by Adobe, which wasn’t just interested in web fonts but also in shifting its Creative Suite to a subscription model, a process that Veen and his team were well qualified to help with. “A large part of the conversation was to do with if we could take what we had learned about selling design assets as a service rather than as a software sale, through a subscription model with royalty payments and all of that kind of stuff, and

summer 2016 35


Voices Interview

help migrate Creative Suite into what became the Creative Cloud,” he explains. After three and a half years as VP of design for Creative Cloud, it was time for Veen to move on again. With no clear plan what to do next, Veen started talking to True Ventures, the company that had been the lead investor in Typekit. He had a good relationship with the team, in particular Tony Conrad, the partner who had led the investment. The pair had a series of lunches and coffees, and Conrad began asking Veen if he might be interested in joining True Ventures. “I’d never considered venture capital as part of my career, but the more we talked about it the more I realised that in some ways it paralleled a lot of what I’d been doing,” Veen explains. “This idea of figuring out the things that work on the web, sharing them with other people, helping guide the way that all happens. In the way Silicon Valley works today, having some influence over the things that get funded is a great way to help guide and shape the direction of the web.” Today Veen dedicates roughly half his time

acts as an advisor to companies such as Medium and WordPress, and has just started a podcast – Presentable – in which he chats with guests about how design is changing the world. There are also, of course, speaking engagements, including his talk at Generate London on crafting a creative culture (www.generateconf. com/london-2016).

Still fully engaged by the ever-changing world of UX, Veen is currently fascinated by the possibilities of virtual and augmented reality and how they’re going to affect interaction models. “I also think that exposing all the power of machine learning, through either chat and messaging interfaces or voice interfaces, is a whole other area of research we’re going to have to start doing to create user experiences for digital products, ” he enthuses, “which I find, frankly, thrilling at this point in my career. There’s never an

holding the industry back: diversity, in terms of gender, ethnicity, age and socio-economic background. Veen believes it’s something we must address if the practice of UX and product development is going to mature. “There’s been a very particular kind of person that has been a user experience designer for way too long,” he says, “and what we’re seeing is the products that come out of teams that don’t have very much diversity don’t consider the range of options for the solutions that they provide, and leave a lot of people out.” It might not be a technical issue, but it’s a tough one to tackle and Veen is well aware that True Ventures needs to practise what it preaches. “If you go look at our About page it’s not a tremendously diverse place,” he admits, “and we’re working on that as well, as a way of saying: Look, this is very important, and it’s going to be the way forward. Let’s get this right, now.”

to the investment side of things; the rest he spends in more of a mentorship role with the companies in True’s portfolio. He also

opportunity to be bored.” While technology is moving forward in leaps in bounds, there is an area that is

Next month: Netlife Research’s senior UX designer Ida Aalen

36

summer 2016

MODELS OF INTEr ACTION

“Having some influence over what gets funded is a great way to help shape the direction of the web”


Opinion

Thinking ouTside The box Aaron Speer considers the benefits and failings of off-the-peg website builders When I was 13, I attempted to bake a cake from scratch. I gathered all the ingredients and worked my way through the instructions, confident I was on the path to sugar-filled bliss. When I opened the oven, my dreams were shattered. I had missed some crucial step that meant the difference between a fluffy cake and the sad substitute in front of me. After that, for me, box cakes were a bit of a miracle. Suddenly, cake nirvana was achievable. In many ways, DIY website builders are like box cakes. For a variety of situations, they offer a great balance of ease of use, flexibility and cost. They provide those not familiar with web development an avenue to create their own professional website. There’s something wonderful about that level of dissemination of web authorship. Why then, with the proliferation of affordable site builders, would a client ever choose to pay an agency tens of thousands of dollars for a bespoke website? In an

age when anyone can make a surprisingly high quality website, is there any use for dedicated development agencies? As a developer at one of these agencies, I would argue that the answer is an emphatic: yes! Here are some reasons why.

Agency perkS One of the most immediate advantages of a custom website is the design itself. While the quality of templates available from DIY solutions has vastly improved, it’s hard to deny that there’s a certain amount of homogeneity amongst them. We live in a world of layer-cake homepages and washed-out stock photos. Even if a website’s message is unique, a generic design can cause it to get lost amidst a sea of visually similar competitors. Having a site that doesn’t just display a client’s product to a user but truly communicates with them can make the difference between a captured sale and a bounced visit.

PROFILE

TREnds

Another benefit digital agencies bring is their broad base of experience with various external web platforms. A successful site interacts with a myriad of third parties to deliver a holistic experience. DIY builders can provide a certain level of interaction with popular platforms, but how do these builders deal with an outdated financial reports API that still uses SOAP calls and XML responses? A development team can pull together all those disparate threads in a succinct, maintainable way that ensures that the site continues to serve the client for years instead of months. Perhaps the largest benefit of working with a development agency is also the least tangible: a comprehensive digital strategy. This can often be the most difficult aspect to sell to clients. After all, most sites are relatively simple systems. Is it really necessary to spend hours aggregating existing content, poring over URL structures and creating complex user flow documents? In 2009, Amazon hired a UX team to help it increase its sales. After a few weeks of rigorous user testing, analysis and brainstorming, it recommended a single change to the registration form. That one well-informed update increased Amazon’s yearly profits by $300,000,000. Without putting in the legwork to determine how users were experiencing the site, Amazon never would have even known there was a problem to solve. A beautiful website with no strategy behind it is like a Bentley without a steering wheel (at least until all cars become self-driving, at which point this metaphor starts to break down). Creating a site on Squarespace is a great solution for many situations. Like my beloved box cakes, it’s affordable, easy and provides increasingly high-quality results. But when a client needs a site that goes beyond mere adequacy, that speaks to the user in a meaningful way, it’s still vital to work with a talented digital agency. At the end of the day, companies pour their lives into creating amazing products and services; shouldn’t their website work just as hard? Aaron is a lead developer at Westwerk (westwerk. com), where he spends his time finding inventive solutions to difficult problems, and expanding his web toolkit

summer 2016 37


VOICES Big question Programming

How do you refActor code? Refactoring your codebase can be a daunting but necessary undertaking. We asked some web professionals to share their tactics

cHrIs t op H reIn A r t z

Ire A derInok un

www.creinartz.de

www.ireaderinokun.com

UI/UX engineering lead, Trivago

Two situations make refactoring difficult: scope changes and unforeseen issues. I try to scope refactorings as much as I can. Defining the main goals for each step and doing requirement engineering on the most critical steps beforehand helps with this. I also try to be lean in my process and avoid overhead in planning. It is not about striving for instant perfection – I concentrate on base functionality first and to improve this in every step.

L e wIs cow p er

Frontend developer, FinLeap hi.lewis.red

Step one is making sure my test suite is up to scratch, and I’m confident my tests will fail if I make a mistake. I start by fixing any low-hanging fruit, which helps familiarise me with the code. I then draw that functionality out on paper, which allows me to think in a more abstract way about the problem. Once I have a good idea what the code should achieve, I can begin refactoring in earnest. 38

summer 2016

UI designer and frontend developer

When I start a new project, the philosophy I follow is: First do it, then do it right, then do it better. The first time I write out something, it’s almost always awful. It’s only through iterative refactoring that it gets somewhere decent. Once I’ve got a project to work, I go through the code several times, trying to make each piece of logic as clear as possible and breaking things up into discrete functions. For example, instead of a having a function called ‘changeColourPinkToBlue()’, I would rewrite it as ‘changeColour('pink', 'blue')’ so it is more easily adaptable to other situations. I find it’s easier to do this when the project is done (or rather, working), as I can see how each piece connects together.


k A roL In A s zcz ur

dA n denne y

Designer and developer

Frontend developer, Code School

www.thefox.ise

www.dandenney.com

Refactoring is a time-heavy, non-trivial task, thus we need to understand why the problem exists in the first place (other than the age of the codebase). Refactoring calls for both a reactive and preemptive approach – fixing things is easy, but what are we holding the quality of the change against? A key strategy is to define systems and standards (in terms of design, frontend or backend) we can hold ourselves accountable for. That way, the change can be quantified and contribute to a bigger, more cohesive goal. BA r A k cH A mo

Web app developer and UX designer www.github.com/BarakChamo

Refactoring is about finding a better route to your destination – whether that’s a large-scale refactor, optimising an algorithm or cleaning up bloated styles. Start by isolating a part of the codebase that needs to be refactored, covering it with the appropriate suite of tests and getting to work on abstracting common behaviour, separating large components, and optimising your code. A test-driven approach is a great way to refactor your code incrementally, in a way that can be integrated into an existing project with confidence.

In the past few years, most of my refactoring has been in HTML email code. With no standards and an ever-increasing number of clients, the code you use to create layouts is in a constant state of flux. The baseline for my strategy is to maintain a pattern library in a single file that contains the code used to create all colours, text and layouts. This is complimented by a snippet for each pattern. When something needs to change, I update the pattern and then update the related snippet.

n AtA LyA sHeL Burne Frontend developer

www.artist-developer.com

Refactoring the architecture enables me to stay focused on design, and iterate with speed and accuracy. My first step is to establish a goal and get my team on board. My audit includes reading the compiled CSS, extracting UI patterns, and figuring out what I have to do to feel confident that deleting something won’t break anything else. I am currently creating a living style guide that will identify all my style leaks, and eventually allow me to write composable and testable styles.

furtHer reAdIng CSS Dig

CSS Dig is a Chrome extension that helps you on your refactoring journey by creating a detailed breakdown of what all your selectors are doing, and showing you how many colours and spacing values are on your site. In this post (netm.ag/dig-283) creator Tom Genoni explains how it works.

RefaCtoRing JavaSCRipt

In this handy post (netm.ag/JS-283) Martin Fowler works through an example body of code and explores four different refactoring directions: refactoring to top-level functions, to a nested function with a dispatcher, using classes, and transformation using an intermediate data structure.

funCtional CSS

In this case study (netm.ag/shipping-283), Cole Peters explains how he refactored a CSS library to achieve a 50 per cent reduction in file size. Peters took inspiration from various CSS architectures to establish a functional approach that would leave the code more compact, flexible, performant and useful.

summer 2016 39


London 21-23 september 2016 Generate is back in London for its fourth year. Join us for three amazing days of insight, inspiration and practical tips

Jeff Veen

Bruce Lawson

ida aaLen

Brendan dawes

about.me/veen

www.brucelawson.co.uk

www.idaaa.no

www.brendandawes.com

design ParTner, True VenTures

dePuTy cTo, oPera sofTware

senior uX designer, neTLife research

MoMa-eXhiBiTed arTisT and designer

TickeTs on saLe now

www.generateconf.com


Q&A We’ve been studying how speed impacts engagement at the FT and found that users consumed 7.2 per cent less content on a slower website (netm.ag/ft-283). If you think of that in relation to our revenue, you understand the benefits to both users and businesses. net: You call yourself a progressive enhancement advocate. What is it about that approach that resonates with you? PH: Contrary to popular belief, our users actually use the products we build in the real world: one full of non-ideal browsing conditions and failure around every corner. Progressive enhancement enables us to build experiences that are inclusive to all our users and are resilient to the failures of the real world. It’s quite simple: just start with the basics, not a 300kb JavaScript library that your local barista told you about. We should not forget the basics.

Q&A

Patrick Hamann The FT’s senior developer on bit-rot and being brilliant at the basics Info Job: Senior developer, financial Times t: @patrickhamann

net: What are you up to at the moment? PH: After working at the Guardian for three years – during which we’d shipped the new responsive theguardian.com with great success – it was time to move on. I was given an opportunity to join the talented team at the Financial Times to build the next generation of FT.com, which I’ve been doing for the last year. You can see the beta site at next.ft.com. net: You’ve worked on some very large codebases. What are the challenges of working at scale? PH: By and large I’d argue that a big codebase shares most of the problems you’d find in a smaller one: eliminating unused CSS (a problem I think is unsolved), caching, asset build pipelines and versioning, and so on. You also get more ‘bit rot’ – best practices becoming anti-patterns over time. But personally I’ve found most of the challenges at scale are people problems not technical ones. I’m yet to work in a large organisation that isn’t affected by Conway’s Law. net: You’ve talked a lot about performance optimisation – why is performance so important? PH: A fast experience is the difference between the user staying on your website or going to a competitor.

net: What are you excited about in frontend development at the moment? PH: The web is under threat. Users are spending more time in native – and thus siloed – app experiences away from the openness of the web. Yet we still seem to be building sites that take 20 seconds and cost £1.20 per load on my roaming connection, ultimately driving our users away further. Fortunately, technologies like the Service Worker and associated APIs are here to help. I can’t wait for a new era of fast, resilient websites that still function offline, can synchronise my data in the background and notify me with updates. Some people are calling this progression ‘progressive web apps’. I prefer the term ‘the web’. net: How would you describe London’s web scene? PH: It’s amazing. I’m extremely privileged to live and work in London with such a thriving community. It’s possible to attend a meetup nearly every day of the month. Once you whittle out the ones I like to call ‘recruitment agencies in disguise’, we have some of the largest of their kind in the world, such as London React, and some of the most passionate and inclusive, such as Front-end London. net: Why do you make an effort to be so active in the community? PH: I’m a strong believer that we’re all life-long learners, especially within our industry. I’ve learnt more from observing others and hearing their experiences than any university degree could offer. So naturally, I also believe it’s important that we give back to the community by sharing our own experiences and helping teach the fundamentals to the craftspeople who will come after us.

summer 2016 41


Never miss aN issue!

#281 JULY 2016

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

#282 AUGUST 2016

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

save uP to 31% wiTh A diGiTAL SUBScriPTioN SEE PAGE 24

Got aN aPPLe DeviCe?

Download net’s digital edition for your iPad, iPhone or iPod Touch

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

#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


cATch UP oN ANY iSSUES YoU’vE MiSSEd BY dowNLoAdiNG oUr diGiTAL EdiTioNS

#280 JUNE 2016

#279 MAY 2016

#278 APriL 2016

#277 MArch 2016

#275 JAN 2016

#274 dEc 2015

#273 Nov 2015

#272 ocT 2015

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

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

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

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

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

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

PreFer to reaD oN aNDroiD, PC or maC?

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

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

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

NETM.AG/NET-GooGLEPLAY

NETM.AG/NET-ZiNio


Gallery Inspirational sites AmAndA Cheung

Sensational design and superb development

Amanda is the lead UX developer at DockYard and an instructor at MassArt. She is based in Massachusetts w: www.dockyard.com t: @acacheung

SKROLLR, ILLUSTRATOR, PHOTOSHOP

www.pleAsuretoburn.Com Lifeblood www.lifebloodagency.com

Ray Bradbury’s classic Fahrenheit 451 opens with, “It was a pleasure to burn,” in reference to a world where books are banned and burned upon discovery. Pleasure to Burn is a project that aims to change the way we tell stories on the web, hoping to evolve digital storytelling in both creation and experience. “Illustrators create each scene, while editors build out the story on their CMS. Stories can be deployed as fast as they can be created,” says Lifeblood’s Travis Weihermuller.

44

summer 2016

The site includes an excerpt from the aforementioned dystopian novel, paired with layered illustrations. Text moves through painted landscapes and scenes masked in a way that integrates the copy with images. “A system was created so publishers could easily deploy a story without needing an army to bring it to life,” continues Weihermuller. “The idea was to make longform content more immersive – the images and content are in balance with one another, without sacrificing usability.”

“As tech evolves, we too can grow as storytellers. The creators here present an entirely new way to absorb classic literature, making the old new again” LogAn FAerber (@LoganFaerber)


Inspirational sites

PROGRESSIVE WEB APP, OFFLINE, MOBILE

wAshingtonpost.Com/pwA The Washington Post www.washingtonpost.com

The Washington Post is currently testing its progressive web app mobile experience. “Any technology that allows us to offer a superior experience to our readers is a priority,” explains chief product and technology officer Shailesh Prakash. “readers want instant load times, and the combination of google’s AMP [Accelerated Mobile Pages] and progressive web app technologies allows us to offer a game-changing experience for the mobile web.” by definition PWAs are progressive, responsive, connectivity-independent, app-like, fresh, safe, discoverable, re-engageable, installable and linkable. Leveraging PWA technologies is hugely beneficial to user experience because no time is wasted when getting content to readers. Further, PWAs offer offline-friendly reading capabilities, and the app shell model allows for native-feeling interactions (for example, the ability to swipe right to see the next article). David Merrell, who is a senior product manager at The Post, shares some data with us: “Within the PWA prototype, thanks to precaching pieces of articles, we see load times average 80 milliseconds. This is beyond even what we thought we could achieve, and we think users will really respond to it.” Interestingly, The boston globe was an early adopter of responsive web design, and now The Washington Post is experimenting technologically as well. It’s incredible to see how an industry founded on the printed medium adapts to the digital world.

“The Washington Post’s use of PWAs gives readers near-native performance with no user experience penalties. It’s the clear way forward” Lauren Tan (@sugarpiraTe_)

summer 2016 45


Gallery Inspirational sites

si t e of t he mon t h

CSS ANIMATION, BODYMOVIN, GREENSOCK

www.wAAArk.Com Waaark www.waaark.com

every interaction on Waaark’s site reveals an incredible attention to detail. Art director Jimmy raheriarisoa and frontend developer Antoine Wodniack, the individuals who make up the French studio, have thought through everything. They have planned how scenes transition from one page to another, how text fades in a certain way, and how complex SVg graphics animate in. everything is brought to life while maintaining performance and accessibility. The pair have added

46

summer 2016

keyboard shortcuts and swiping gestures to make the experience better for people with a wide range of motor abilities. When asked about their newly released portfolio site, Wodniack explained that collaboration was key: “With the web becoming more and more creative, it’s becoming vital to assemble a creative duo between a developer and a designer. Developers always need new challenges to blossom, and designers need solutions to make their ideas possible.”


Inspirational sites PARALLAX, HEADROOM.JS

www.mAdebyfew.Com Few www.few.io

Made by Few is an annual web conference hosted by Few, a design and development agency in Arkansas. Sally Nixon’s illustrations immediately caught my eye when I came across this website. I loved the detailed, bright drawings that feature in the masthead and the speaker descriptions. It took me a moment to realise that there was repetition in the crowd, because this is so subtle. As I explored the site, I found more surprises. “At Few, we love pleasant

accidents and encourage exploration,” says Arlton Lowry, co-founder of Few and conference organiser. Sticking close to their philosophy of exploration, there are hidden gems scattered throughout the site (I won’t give them all away, but try hitting the Konami Code!). These fun elements give the site a lot of personality that Arlton attributes directly to the agency culture. “We believe when you provide people with an open and fun environment, there’s no telling what will come of it.”

“The transitions and smaller animated details give this site an overall feeling of fluidity that is usually difficult to achieve with web content” rAcheL SMITh (@rachsmiThTweeTs)

summer 2016 47


Gallery Inspirational sites

DROPBOX, ILLUSTRATOR

www.smAllviCtori.es XXIX www.xxix.co

Small Victories is an interesting new service from creative studio XXIX. “The idea for using a service like Dropbox for super-simple web hosting and publishing had been kicking around our studio for a couple of years, and we finally had the bandwidth to resurrect the project this year,” explains Jacob heftmann, principal at XXIX. “People in our shared studio started using it for presentations, moodboards, event photos and client proposals – we knew then that we had a useful tool on our hands. The most interesting technical aspect is probably the fact that even the marketing site is hosted on Small Victories itself.”

48

summer 2016

I found the website’s aesthetic as appealing as the tool itself. Small Victories gives off a De Stijl vibe with its simplified visual components and use of primary colours. I like seeing the different ways designers and developers choose to break up normal vertical scrolling, especially when their technique doesn’t scroll-jack and can still operate at 60 frames per second. XXIX chose to separate sections of content into “sheets of paper” that scroll away one at a time. “The branding with the flags plays off the name – we think of each site you make as a small victory,” heftmann explains.


Inspirational sites

CANVAS, ANIMATION

www.appyfizz.com

Sagmeister & Walsh www.sagmeisterwalsh.com Appy Fizz is a sparkling drink that describes itself as ‘the champagne of fruit drinks’. The new Appy Fizz website was part of a more extensive rebranding project by NYC-based design firm Sagmeister & Walsh. As the creators explain in their case study, the identity “visualises carbonated bubbles through a dynamic graphic language of 3D spheres and circles.” The design is an interesting mix of super-flat and implied three-dimensional elements. The circular language written in bold red, white and black reminds me

of the work of Yayoi Kusama, the worldrenowned artist associated with pop art, minimalism and polka dots. Art and its space in commercial industries is a theme Sagmeister & Walsh play with throughout their work, and it’s a topic I’m interested in. Even more interesting to me is how this combination translates to the web. Here there are many animations and interactive canvas elements that speak the same visual language – a carbonation simulation even follows the user’s mouse around as it is moved across the website.

“Decorative patterns and other artistic elements are often treated as somehow less important than the ‘serious’ content. But art is often the thing that makes otherwise interchangeable products valuable and memorable” MArIA MATVeeVA (@rgbcoLour)

summer 2016 49


Gallery Inspirational sites

GREENSOCK, HAMMER.JS, VIDEO

www.booounCe.CmisCm.Com Jongmin Kim www.blog.cmiscm.com

Booounce is a project by interactive developer and designer Jongmin Kim, who, along with Sanghee Cho, began designing the circle, line and bouncing ball animations a few years ago. Unfortunately that project was cancelled, but there was a silver lining, because the duo were left with concepts they still wanted to work with. “I really loved the concept, so I redesigned them and made this project to share inspirational videos for motion lovers,” says Kim.

50

summer 2016

Booounce is a site that showcases motion design, and what’s impressive is that it is able to demonstrate its own motion design capabilities without taking away from the content. I love how the swinging border around each preview is composed of its three most prominent colours. On hover, this border thickens and fills with the single most prominent colour. Its clear visual system has personality, and it is scalable for the growth of additional videos and GIFs.


you are invited to join net Pro

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

what you’ll get l

12 issues of net in print and digital

l

Annual Industry Report worth £100

l

15% off Adobe Creative Cloud (see page 24 for details)

l

4 months free when you sign up for a Treehouse subscription

l

Discounts to industry events including Generate

l

Design annual worth £9.99

all from just £135 £105

worth £371

Join todaY Visit www.myfavouritemagazines.co.uk/netpro Terms and Conditions: Pricing and savings quoted are compared to buying full priced UK print and digital issues. You’ll receive 12 issues in a year. Prices correct at point of print and subject to change. Full terms and conditions bit.ly/magterms. Offer ends 31 August 2016


Sublime design & creative advice

This monTh FeaTuring...

focuS on

57

This month ...

Community Café l uk e m at t he w s

Profiles

Font hosting services have come on in leaps and bounds. Sam Kapila takes a look at some options that let you try before you buy

Design Challenge Luke is a creative director at Essential Marketer in Birmingham w: essentialmarketer.com t: @lukewillmatt

D y l a n s mi t h

Profile

Toronto-born Dylan is a freelance brand and web designer based in London w: www.dylanatsmith.com t: @dylanatsmith

58

Google designer Sebastien Gabriel explains the challenges of designing the Chrome browser, and what it’s like in the SF tech bubble

s imon F o s t e r Simon is a freelance frontend web designer based in London w: simonfosterdesign.com t: @simonstretch

Brief

How we built

We go behind the scenes on the creation of Reword, a tool from leo burnett Melbourne set to take on online bullying

64

Please design a website for a new community café. The design and UI must clearly communicate its two strands of business – its tasty, affordable menu, and its programme of events – while reflecting the café’s values of being friendly, fun and accessible for all.


Design challenge

1

6

3 2

5 4

luke Mat thews

Froth house

My Month

This site acts as an information hub to unify a community through exciting events and delicious food

Froth House is a new coffee house looking to promote its passion for the community by bringing people together through events, and supporting local produce suppliers within its free range menu. The goal of the website is to promote a modern, sleek brand presence, and inform customers of the latest updates on the menu and in upcoming events. On desktop, the top section is split into two areas: the main banner is used for promotions, and the rotating widget on the right promotes upcoming events. Users can also share event information with friends through social media integrations, by email or by copying the link. As the user scrolls, the latest menu feeds, social media links, blog entries and location details will fade in. On mobile, the navigation will be condensed into a hamburger icon, and all the elements will become full width to allow for easier reading and interaction.

Close uP (1) The clean header UI has two main functions: effective navigation through the website, and a strong brand presence. (2) The main banner location features highquality photography and strong typography to engage users in key promotions. (3) A rotating ‘upcoming events’ widget utilises the primary brand colour, and there is functionality to allow users to research further information or share the event with friends via social media, email or the link itself. (4) Highlighted or new menu items will be automatically pulled through from WordPress custom post types. (5) Google Maps ensures users can find Froth House easily, while social media buttons enable sharing. (6) On mobile, social media icons move into a stripped-back header layout, which includes a hamburger icon for off-screen navigation toggle.

what have you been doing this month? Editing live music photography I shot at the start of the month ... 3,600 shots. Killer! which sites have you visited for inspiration? vanschneider.com (his weekly email always inspires me) and minimalsetups.com (I love browsing through great setups). what have you been watching? As a Brummie, Peaky Blinders has been flavour of the month. what have you been listening to? The Acacia Strain, Northlane, and Polar’s new album. I love my metal for working.

summer 2016 53


ShowcaSe

Design challenge

1

4

2

3

5

My Month what have you been doing this month? Coincidentally, I’m branding a coffee startup. which sites have you visited for inspiration? holyheck.dropmark.com is a goldmine. Shout out to the incredible photographers who make their work available royalty-free on Unsplash, too. what have you been watching? My girlfriend won’t let me say Hoodclips, so let’s go with the latest from both Louis CK and Louis Theroux. what have you been listening to? Bullion’s J Dilla and Pet Sounds mashups.

54

summer 2016

Dyl an sMith

town square

A clutter-free layout gets straight to the point and communicates everything you need to do in one viewport

Town Square is a down-to-earth café. There’s something for everyone, and the staff welcome everyone. My design reflects this, and I’ve been careful to lay it on the table in a way that isn’t cluttered. Without scrolling, visitors know where this place is, what it’s like inside, what events are on, that it won’t kick you out at 5pm and that other people love it. They also get a strong sense of the café’s values, and full menus are one click away. I can’t think of many other reasons someone would visit a café’s site. The responsive version stacks the content but remains so simple that navigation would only be a hindrance. And the homepage is mostly static, aside from the API needed for the ‘now playing’ feature and the event listings. Even a basic CMS would have no trouble cycling through the calendar, though an ecommerce backend would be needed for the shop.

Close uP (1) The Town Square logo brings together farm-fresh, earthy tones and fun, family-friendly colours. It’s straight to the point, represents the various offerings from the café and has loads of potential in application (like the modular content boxes to the right). (2) Woah, a sidebar! I don’t think I’ve used one of these in 10 years. A traditional header was looking a little too busy, and this layout lets all the important stuff live in the viewport at once. (3) I love how my local pub displays the cover of the record it’s spinning. This Last.fm-powered nugget is my digital homage to The Antelope. It also acts as a customer litmus test: only psychopaths don’t want to listen to Rumours. (4) These listings are top-of-the-page important, and speak volumes about the business. A CMS pulls the featured image from the next event. (5) Brandbuilding, folks. I’d print a run of these shirts, but I have a lot of friends who are jerks and zero friends who are kids.


Design challenge

1

3 4

5

2

siMon foster

PriCkles

My Month

The owners can easily update the content on this site for a café that cares for homeless hedgehogs

Prickles is a vegetarian hedgehog café. All the hedgehogs are rescue animals that are properly cared for, and the café has links with local animal welfare organisations and runs conservation workshops. Customers can play with the animals as they order their food. The menu is organic, Fairtrade and locally sourced whenever possible. The café has a small fixed menu, but the specials make up the bulk of what’s on offer. These are seasonal and depend on local produce, so change every few days, depending on what’s available. The site is mobile-first, responsive and built on a CMS so the client can edit the content themselves. This is particularly important as the menu, events and information will need constant updates. Instead of trying to cram everything onto the homepage, I went for a minimalist approach, with information broken down into digestible chunks.

Close uP (1) As the site is device-agnostic, the navigation menu goes from a conventional list at the top of the page to a hamburger icon when there is no longer comfortable space on the screen. (2) The logo (and hamburger icon) is an SVG image. This ensures a small file size while enabling us to scale the image to any size and screen resolution while retaining the same quality. (3) The illustrations on the homepage are the main areas of importance on the site. They are also accessible through the regular navigation (Menu, Events, About). (4) I’ve used a monospaced web font called Inconsolata available on Google Fonts. I decided to only use one typeface throughout the website to minimise download times and keep the site as quick as possible. (5) In the ‘Meet the hedgehogs’ section, the user can see images of all the animals, and find out a bit about their personalties and how they came to be at the café.

what have you been doing this month? Finishing off a client project for a filmmaker, and relaunching a personal project: freefaces.gallery. which sites have you visited for inspiration? typewolf.com and brutalistwebsites.com. what have you been watching? Russian movies dubbed or captioned in English (sovietmoviesonline.com/ en) and reruns of Charmed. what have you been listening to? I collect and DJ 50s/60s soul, jazz, funk, Latin and ska 7" records, so I just listen to them.

summer 2016 55


SYDNEY 5 SepteMBeR 2016 Generate is heading to Oz! Join us for a one-day, one-track event with talks on user experience, CSS and more

Erika Hall

JoNaTHaN SNook

Nick fiNck

JoHN allSopp

www.muledesign.com

www.snook.ca

www.nickfinck.com

www.johnfallsopp.com

co-fouNDEr, MulE DESigN

uX arcHiTEcT, XEro

uX SpEcialiST

auTHor aND DEvElopEr

TickETS oN SalE Now

www.generateconf.com


Focus on

Focus on

TesTing Typography Sam Kapila explores some try-before-you-buy font services

PRoFILE

A designer opens up Photoshop. She adds a font to all of her designs, saves her PSD and sends it to a developer. The developer opens the file and takes all the elements into code, using a system-friendly font as the one the designer has picked isn’t available on all systems. The designer is mad at the developer and the developer is now mad at the designer, too. These days, thanks to the great font hosting services available, we see much less of this. We have more fonts than ever on the web, with more capabilities and font families, legible aliasing, and Photoshoplike CSS3 (I’m looking at you, oh glorious text masking). What’s really exciting is that we can now do a lot of font testing – and in the browser, no less. Font hosting services like Typekit, Google Fonts and Monotype have made it incredibly easy to use their services, offering trial options that can be incorporated directly into a project. Certain services allow you to test more than that before you even touch any code. Typecast is a testing-only service that incorporates thousands of font families, so users can get into the other important details, such as font size, line height and column width. The best part about all of these services is the detail they provide on the size of the font files, and how it can affect your page load performance. With this level of testing, and what’s yet to come with HTML and CSS, we’ll continue to see typography become more and more important in the web design world.

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

1

2

(1) Google Fonts (fonts. google.com) redesigned its site in June, and included testing for background and

foreground colours. (2) TypeCast (www.typecast. com) has been around for a while and still features a lot

of the different font hosting services, so you can mix and match, export CSS, and play with column width.

summer 2016 57


info Location: San Francisco, US Working since: 2010 Areas of expertise: Web design, Android/iOS design, interface design, desktop app design


Profile

Profile

SebaStien Gabriel www.sebastien-gabriel.com

The Google designer on keeping Chrome consistent and new paradigms in UI design Four years ago the Chrome team turned to Dribbble in their search for a visual designer. They found the portfolio of Sebastien Gabriel, an unknown designer working in the south of France. The chance discovery launched Gabriel into an exciting career working on design problems that affect the experiences of hundreds of millions of people, and four years later he’s still relishing that challenge. We chatted to him about his journey from obscurity to the tech bubble in San Francisco, the Chrome 50 redesign, and the evolving scope of UX and UI design. net: Tell us about what you do at Google ... SG: My primary project has been to work on the Chrome browser on all platforms, including Android, iOS and Windows. I’m responsible for its visual consistency throughout this wide range of platforms. I get asked quite often what there is to design in a browser, but it is more complex than it seems. Designing a UI that is supposed to be as discreet as possible can be a tricky task. Lately I’ve refocused my efforts towards helping evolve the Chrome OS platform. net: What are the challenges of ensuring consistency across different platforms? SG: Maintaining consistency in the long run is the hard part because we do not redesign everything at once, but in waves bound to our six-week release cycle. While redesigning Chrome for Android, we also had to think about how this would translate to iOS even though this work was a year away. We try to ensure consistency both from a visual standpoint and technical standpoint by sharing

summer 2016 59


ShowcaSe

Profile

Above The Chrome hybrid layout introduces a touchscreen interface without compromising productivity Right Gabriel works to ensure visual consistency across the full suite of Chrome interfaces

visuals and trying to maintain feature parity from one platform to another, on timelines that are sometimes out of sync. It’s a balance between short-term solutions and long-term planning. net: How did you discover interface design was the right profession for you? SG: I studied a wide range of multimedia courses, from coding JavaScript to web design. Little by little, my interest moved from graphic and print design to web design to finally enter the realm of UI design, where I took a lot of pleasure in making pixel-perfect elements and components. I’m a bit OCD when it comes to organising

Office decor Gabriel’s walls are decorated with prints, including this Studio Ghibli design

60

summer 2016

things. UI design enables me to apply that OCD to pixels and interfaces. net: You were head-hunted by Google. Tell us how that happened. SG: Some of my future co-workers were going through portfolios, searching for the first full-time visual designer to join Chrome. They found my work on Dribbble and contacted me. I first thought the email was a fake because it came out of nowhere. I had absolutely no ambition to apply for Google and I was really far from thinking I had the necessary skills. I knew maybe one day I wanted to try moving to a foreign country as I was feeling a bit stuck in the south of France, but I never anticipated it happening in those conditions. I don’t think I really realised what was happening – even after the interviews in Mountain View – until I moved to California. In three months I went from working in a twoperson web agency in the south of France to being a designer at Google in California.

net: How are you finding the culture at Google and in San Francisco? SG: What I have found at Google is a lot of people that care an incredible amount about what they do and how well the company does. The Chrome team is made of people that believe in an ideal, and this applies to other teams as well. They truly care. San Francisco is a gorgeous city where the ever-growing cosmopolitan population meets a fascinating history and culture. Just like tech, it’s hard to keep up with it, or know where it’s going. I can sometimes feel overwhelmed by such a fast-paced environment. Coming from a background that is really far from Silicon Valley, I sometimes notice a disconnection from the ‘real world’, or at least the concept I have of it. Like we are operating in a vacuum. There is probably some truth to that – the downside of an extremely fast-growing industry – but some of it is also me learning the code of such a foreign, ever-changing environment.

net: What’s the web design scene like in France? SG: Things might have changed, but when I was working there it was a branch that wasn’t valued enough. When I started freelancing, the clients interested in investing in design were all from other countries: Sweden, Denmark and the US. France is a very centralised country so the most active web design scene is in Paris; there are some incredibly creative and inspiring agencies over there.

net: What were your aims with the Chrome 50 redesign? SG: The main goal was to catch Chrome on desktop up with its mobile counterparts (Android and iOS) in terms of visual design and layout. It was not a core UX redesign but more a refresh of the core UI. The scope broadened when we chose to go beyond a simple refresh, which was the initial intention, and replace every single bitmapbased asset with its programmatically rendered, redesigned equivalent – including


Profile

office culture

SebaStien Gabriel What’s on your desktop?

A Cinema display and a Lego TIE fighter.

Material Design Chrome recently got an MD update, which included adding delightful motion touches

all icons and UI elements such as the tabs. We reduced the number of bitmap assets from 1200 to 0 and made Chrome more scalable across different screen configurations, future-proofing its core UI. net: How did you implement Material Design principles? SG: The Chrome redesign blends the Chrome spirit, which is focused on speed and simplicity, and the Material Design spirit, which is focused on more delightful motion and opinionated design directions. We used MD iconography, as well as our internal MD colour scheme for all UI elements. We also implemented some elements of delight with the revamped states on buttons. I have to say that when people thought of MD applied to Chrome, they were expecting a more drastic redesign. We exercised a lot of restraint to adapt these guidelines, which were mobile-based, for a desktop product. net: Motion is a key part of Material Design. What’s your advice for using motion well in interfaces? SG: Motion has a lot of uses, which vary from pure aesthetic and delight to a great tool serving the interaction. It can serve as a hint that there is a hidden interaction, or as a way to locate the user within the spatial environment of your application. If used well and if it doesn’t get in the way of a fast user flow, it can also bring life and fun to an

interface. In doubt though, it’s better to use no motion than too much motion. Being aware of the platform you are designing on is also key – something that works on mobile might become a real hindrance when applied on a desktop platform. net: You’ve switched from PNGs to SVG for your interface elements and icons. Tell us about the advantages of this ... SG: The switch to SVG is on the design side only as we do not use SVG as-is in the implementation. Our engineering team actually converts the SVG code into Skiabased elements. This has a lot of benefits, both from an engineering and design perspective. We were able to maintain control of rendering on various resolutions (something you cannot achieve with simply scaled-up or down SVGs), while making all our graphical elements scalable. net: On your blog you mention your aim to retain ‘layout density’. Can you explain? SG: The desktop landscape (or ‘productivity platform’ as we like to call it in Chrome OS) is undergoing a lot of change at the moment. The mobile world, including tablet, is colliding with the desktop world and the industry is trying to figure out how. While we might be tempted to take some shortcuts and port one layout type to another platform, I think focusing on layout density and finding the right middle ground is the way to go. In practice, it means being

Little things that make your life worthwhile My first morning coffee … and the second one. Also jogging towards the Golden Gate Bridge.

What do you have on the walls?

A Totoro poster and another smaller one from David Lanham. I also have a printed canvas of one of my own photographs.

What hours do you work?

It varies a lot depending on the project. I usually try to keep a somewhat consistent 9 to 5 schedule. Sometimes more, sometimes less when I need time for myself.

What else do you do in the office?

Listen to podcasts a lot. I also try to focus so I can get out of the office – that way I’m happy to come back in.

How often do you hang out with other designers?

I tend to do this less as the years pass. I’m an introvert to start with, and now I’d rather spend more time with my wife. Being an introvert probably got me missing out on some cool people and design conversations though.

Describe your working culture in three words Stay the course.

summer 2016 61


ShowcaSe

Profile Left Gabriel’s Lonely T rex (and Easter egg game) has become a firm favourite Below The move from the south of France to Silicon Valley presented a change of pace

timeline

Key dates in Sebastien Gabriel’s career so far mar 2009 Starts writing a design blog

auG 2009 Joins web agency Wannaweb as an intern

aPr 2010 Joins Dribbble and starts giving away design freebies

Jun 2010 Finishes studies and converts internship into a full-time job

Dec 2010 Lands his first international freelance project

aPr 2011 Featured in a design magazine

Jan 2012 Joins Google as visual designer for the Chrome operating system

SePt 2014 Acts as visual design lead for the Chrome for Android redesign

more aware of the type of platform you are designing for, rather than trying to create a ‘one size fits all’ solution. net: You came up with two layouts, normal and hybrid. Tell us about the rationale behind this. SG: The hybrid layout is made to be used on convertible devices that have a built-in touchscreen as well as a mouse/trackpad and keyboard input method. It is the direct application of the ‘retaining the layout density’ principle, in that it tries to strike the right balance between making the interface touchable and retaining the dense layout that promotes productivity. Essentially, a regular (non-touch) layout is too tight and a mobile-optimised layout is too big, so I aimed right in the middle. The result is a stable UI with a consistent set of sizing principles adapted to a new, still-evolving platform paradigm.

Jan 2015 Leads the Chrome OS, Windows and MacOS redesign

Jan 2016 Becomes visual lead for Google’s productivity platform, Chrome OS

62

summer 2016

net: You spoke about feeling like a fraud in a blog post (netm.ag/impostor-283). What’s your advice for coping in such a competitive industry? SG: I think the impostor syndrome happens when you realise that a lot of people are better than you. Coping with it comes from realising that there will always be people better than you and that you should use them as a motivator rather than a source

of envy or self doubt. Find what you are good at and keep working on it. net: How are things different for newcomers in the industry today? SG: There are more people interested in the field, creating an endless stream of work showcases that are available on a lot of websites. It was hard to shine before and it has probably got harder. As our industry evolves, you need to evolve with it as a designer and find your niche. However, UI and UX design are such broad disciplines today that I absolutely think there are lots of opportunities for newcomers to shine. Tech and software design are expanding into areas we never conceived of, such as cars, VR, wearables and connected objects. What’s more, there have never been so many tools enabling designers to try things and solve problems so easily, from designing to prototyping to seamless collaboration. This can get overwhelming though, and finding what’s worth investing time in might be tricky with so many options. But once you figure out what you like to do, the advice to get there hasn’t changed: Stay the course and work a lot. Just like any other job, it takes time and experience to get good. Next month: We chat to the team behind the GoPro


macOS

Sierra is coming... LET THE EXPERTS AT MACFORMAT BE YOUR GUIDES TO APPLE’S NEXT OS SUBSCRIBE TODAY!

SAVE

45%

Av a i l a b l e f ro m w w w. m a c fo r m a t . c o m


ShowcaSe

How we built

How we built

RewoRd The team at Leo Burnett Melbourne reveal how they created an app that squares up to online bullying by challenging abusive language

1 3

2

4

5

6

Close up brief Leo Burnett Melbourne and headspace, Australia’s youth mental health foundation, set out to tackle online bullying with Reword, an app that prompts children to reconsider the language they use while posting online.

64

summer 2016

(1) The landing page allows visitors to choose one of two actions: they can download the tool immediately, or they can learn more about Reword by exploring video content. (2) Video content highlights the issue and explains Reword in a way that is relatable to both protectors (parents and educators) and young people. (3) Reword works like a spellchecker for online bullying by detecting potentially hurtful words and phrases. The red strikethrough and pop-up message alert the user to potentially harmful language, giving

them a moment’s pause to reconsider what they’re writing. (4) Visitors can try the tool for themselves. Once they’ve seen how it works, they can install Reword as a Google Chrome extension directly from the site. (5) The tool targets young people with a specific call to action: To take a stand against online bullying behaviour by putting a red line through their profile picture. (6) Young people can become co-authors of Reword by adding new bullying words and phrases, helping the tool grow as language and slang evolves.


How we built TiM shelle y

Michael RichaRdson

suzi williaMson timeline

Key dates in the development of Reword february 2013 Tim is associate digital creative director at Leo Burnett and directed the creative, design and experience for Reword t: @timjshelley

Michael is a senior frontend developer experienced in developing applications for both agencies and enterprises t: @mikrich

Online bullying is a big problem for today’s children. In Australia, 463,000 young people are bullied online each year, and 78 per cent of these are between 10 and 15 years old. Leo Burnett Melbourne (www.leoburnett.com.au/ Melbourne), along with mental health foundation headspace, set out to tackle the problem. It came up with Reword (reword.it), a site and app that aims to prevent online bullying by flagging up hurtful language and encouraging children to reconsider what they write. net: Can you tell us about the background to Reword? SW: The idea stemmed from the fact that technology has made online bullying near-impossible to escape. Bullying has moved from the schoolyard to social media, but kids don’t think about the effect their words can have. TS: We set out to find an innovative way to use communications and technology to effect real, positive change in the online environment; tackling bullying behaviour before it happens. net: How does the app work? TS: It’s like a spellchecker for online bullying. As a child types, Reword uses regex matching to search a database of millions of potential combinations of bullying words, and identify patterns. When a pattern is recognised, the child is alerted with a red strikethrough. SW: The red line is an intuitive symbol that encourages children to reconsider what they write.

Suzi is an account manager at Leo Burnett Melbourne, and part of the team that managed Reword from its inception t: @suzimaewill

net: Were you concerned about intruding on the user’s experience? TS: Given Reword integrates with many platforms, we didn’t have any reason to obstruct the user’s overall experience. We wanted to respect people’s freedom of speech and avoid unnecessarily interfering. We believe most young people don’t have bad intentions, but sometimes they don’t realise that what they’re saying could be harmful. The red line simply gives the writer a chance to reconsider their language. SW: Working with leading mental health experts, we learned that a young person’s moral compass doesn’t fully develop until adulthood, so we designed Reword as an educational tool. We want not only to protect potential victims, but also to protect children from being bullies themselves. net: How did you go about building it? MR: The extension is built using HTML, CSS and JavaScript. With the help of jQuery, the extension checks for text areas or content-editable elements, then attaches event handlers to enable the tool to check what the user inputs. TS: At the beginning of the process, we created a simple prototype as a proof of concept. This continued to evolve into a state that we could share with mental health experts. Given the subject and the impact on young lives, we wanted to include behavioural and psychological experts in the process to ensure the accuracy of communications, and guide the tool’s direction.

The initial concept of Reword is formed, including tool vision and early branding

DeCember 2013 Experience design phase begins and indicative UI direction is created. Initial prototype development kicks off

July 2014 Strategy phase is completed; website design and development commences

January-marCH 2015 Collaboration with headspace progresses. Focus groups help define priorities and refine communications. UX design and development is revisited

august 2015 Website and extension released for the beta testing phase

november 2015 The final lexicon is integrated with the backend system; website is synced and connected with live extension

february 2016 The tool is introduced in pilot schools and bug fixes are completed

marCH 2016 National launch to coincide with the National Day of Action against Bullying and Violence

summer 2016 65


ShowcaSe

How we built

1 2

evolution

The team at Leo Burnett walk through how the idea progressed

3

(1) Thinking about the user experience, we were inspired by the simplicity of a spellchecker. The red line is a universal symbol for ‘something’s not right’. (2) We continued to refine the functionality, design and language over multiple iterations. (3) We wanted flexibility to test and learn – writing the code on an open platform facilitated an iterative process. (4) We tested extensively and revised the code to make sure the tool worked in all text entry fields, to ensure Reword is effective everywhere we communicate online. (5) Young people were heavily involved in the creation and testing of the tool. (6) Their feedback helped hone the final design and language – many told us they actually wanted the pop-up to appear more often.

4

6

5

66

summer 2016


How we built net: How did you ensure you connected with your target market? SW: Youth groups were heavily involved throughout the entire process, from helping create communications like the tool’s alert messages, to testing the tool and informing the overall experience. It was here we discovered that 79 per cent of young people were willing to reword when prompted. Before launch, three pilot schools were selected to adopt the tool and help us gain insight into its use over a period of time. net: Are you planning to bring Reword to other platforms? TS: Our research identified Chrome as the key choice for the target audience, and close to 80 per cent of Australian schools have Chrome available. Plus, Chrome extensions can be built with standard web technology, which was another draw. We plan to extend Reword to Safari and Firefox, and implement Reword in mobile environments. net: Users can submit their own insults. How is that panning out? TS: We know that young people aren’t always receptive to adults telling them what to do. We also know that many bullying situations involve bystanders who see it happening but don’t take action. We wanted to empower young people to take a stand against online bullying. By encouraging the online population to collaborate and become co-authors of new bullying terms, we’re giving them ownership over Reword,

Other options Reword works everywhere we communicate online, and offers gentle guidance for young people who may not have considered the impact their words could have

while growing the tool’s intelligence and helping it recognise evolving language and slang. Within six weeks of launch, over 20,000 terms had been submitted. net: Can you tell us what technologies you used for the site? MR: We used AngularJS, supported by a build system created with webpack to handle code linting, compilation and minification. Custom Angular directives were created to handle the animations, using CSS3 transitions to render the animations. These animations were balanced with video content using native HTML5 video.

net: What was the biggest technical challenge you encountered? TS: Understanding syntax theory and determining exactly what combinations of words caused the red line to appear was a challenge that evolved over time and caused some problems in early development. We implemented unit tests to execute after every code change, and make sure we did not deviate from our established baseline. MR: We used Jasmine and Karma to perform these unit tests across an extensive list of keyword combinations to ensure we weren’t compromising the tool during development. net: What feedback have you had? SW: Parents are thankful for a resource to help them navigate the social media environment and protect their children when they can’t be there. Equally, educators have embraced Reword, introducing it to their classrooms and sharing it with parents via newsletters. Most importantly, young people have responded with enthusiasm, grateful that someone is trying to help solve this very real problem.

Strikethrough The design of the site and content takes its cues from Reword’s red line motif. Visitors can learn more about online bullying behaviour and try Reword before installing

Next Month: Zone’s ticketing project for South West Trains

summer 2016 67


Features Cover feature

Patrick Kettner shows you how to use seven awesome new browser features, and ensure users on older browsers can still play along too

Author PaTrick keTTNer Patrick (@patrick kettner) is a web developer and hacker from Seattle. he is the lead maintainer of Modernizr and a PM for Edge at Microsoft IlluStrAtIon beN FearNLey Ben is a designer specialising in digital art, 3D illustration and typography. he is currently the 3D designer at awardwinning agency loVE benfearnleydesign.com

68

summer 2016

N

ew APIs for the web seem to be released every week. It would be cool to be able to use them, but if you need to make sites for the average user, you won’t be able to implement them for years – right? Wrong. Exploring the latest and greatest of the web platform means you get to use the best tools at your disposal for your users and help push the web forward. Here is a number of different features – some old, some new, all underused – that can be implemented quickly on your site, and will be almost guaranteed to improve the experience.

The FoNT LoadiNg aPi If you have ever browsed the internet over hotel Wi-Fi, 2G,

or any other ungodly slow connection over the past few years, you will have undoubtedly encountered FOUT (flash of unstyled text). I love @font-face as much as the next guy, but when you’re loading a multi-megabyte font over a connection measured in bytes per second, you are going to have a bad time. The reason is that historically, browsers hide text from the user until the custom font has been loaded. However, new font dimensions can impact the layout of the page dramatically, and having a font change after the user has started interacting with the page could be an awful experience. Monitoring font rendering on the web has always been tricky, because we’ve never had a way to know whether or not a


Cover feature

summer 2016 69


Features Cover feature font has been loaded. Until now, the most reliable method was to load text into a canvas tag and constantly check its width until it changed, signalling a font load. What’s worse was knowing that all the text had already been downloaded by the browser, and users were being blocked from seeing the very thing they came to read, just to give the browser time to make it look prettier. With the new Font Loading API, you are able to take full control of the experience. The promise-based API notifies you when your web fonts have loaded – this means you can define a system font for the initial render, and a toggle CSS class so that you only use your web font after it has been loaded. <style> body {font-family: Sans-Serif} body.fontloaded {font-family: P4+rickrul3zSans} </style> <script> document.fonts.ready.then(function() { document.body.classlist.add('fontloaded'); }); </script> There is a lot more to this spec, but this feature alone is a huge win. The only problem is the same one we have with all new APIs: it’s new. And therefore its browser support isn’t stellar. As of July 2016, the API is only supported in

hidden content Even though all the text content has loaded, users are blocked from reading it because of @font-face

Firefox and Chrome. That is probably a large chunk of your market, but we can’t hang critical UX on a non-universal API. However, we can get a nearly identical API through Bram Stein’s super-lightweight Font Face Observer: var font = new FontFaceobserver('P4+rickrul3z-Sans');

Font Face observer Bram Stein’s tool is a lightweight way to polyfill font-loading events for browsers that lack them natively

70

summer 2016

font.load().then(function () { document.body.classlist.add('fontloaded'); }); Between these two APIs, you will be able to offer your users text that instantly loads, without having to give up your gorgeous web fonts.

Service workerS The hottest buzzphrase for web development in 2016 has to be progressive web apps. The new paradigm for creating web apps highlights offline functionality as one of the biggest missing pieces to the web. Service Workers bring us a stunning amount of power, chief among it the ability to programmatically intercept any and all network requests (read: 100 per cent offline support). It will almost certainly be the cornerstone of any groundbreaking new app. Even though all major browser vendors (sans Apple) have publicly committed to implementing Service Workers, it will still be months – if not years – before you can count on the API being in your user’s


Cover feature

caSe STudy

ModerNizr

appcache fail Jake Archibald’s classic ‘AppCache is a douchebag’ talk goes over all the ways this API can hurt you

browser. Does that mean we need to wait that long to use it? Hell no. We have been able to go offline since 2008 ... with AppCache. Don’t get me wrong, AppCache is terrible

} else if (window.applicationCache) { var iframe = document.createElement('iframe'); iframe.src = '/customBuiltIframe.html'; document.body.appendChild(iframe); }

With the new Font Loading API, you can take full control of the experience – it notifies you when your web fonts have loaded for a myriad of reasons, most of which are covered in colourful detail by Jake Archibald in his ‘AppCache is a douchebag’ talk from JSConf 2013 (netm.ag/douchebag-283). But AppCache has one major strength: incredible browser support. Every major JavaScript-enabled browser of the past few years has supported it. So while we can (and should) build with Service Workers, you can fall back to using AppCache for basic asset caching in other browsers. if (navigator.serviceWorker) { navigator.serviceWorker.register('/sw.js')

Obviously we want to use Service Workers when they are available, so we only ever fall back to AppCache after confirming Service Worker is not available. The only catch is that for AppCache to work, the manifest attribute (which is used to load the AppCache configuration file) has to be included when the page is loaded. The way around this is to append a hidden iframe to the page with just the manifest defined. <!doctype html> <html manifest="/offline.appcache"> <title>blah</title> </html>

Modernizr is a collection of lightningfast tests (or ‘detects’) devs can use to tailor their experience to the user’s particular browser. The Modernizr.com site was recently relaunched and now utilises a number of features listed in this article, including AppCache support and offline support through Service Worker. The download page features a completely client-side build process, which enables every visitor to configure a customised version of Modernizr. Use of the ‘full’ build version had increased exponentially, a fact that saddened the team because most sites never use any of the detects included in it, and as a result it wastes users’ bandwidth. After determining that this was mostly an educational issue, the team added a Web Worker to the page that calculates the size of the build, as well as the gzipped version. Because this heavy calculation is happening in the Worker and not the main thread (which would slow down the UI substantially), it is able to take place on the fly, every time an option is checked off. This is possible because a second, separate Worker is generating and caching a new build every time an option is changed. By the time the user is ready to download the file, it has already been created. This all goes to show that even though your site might seem simple, its features don’t have to be.

cutting-edge the new modernizr.com may seem

simple, but it packs a ton of cutting-edge features

summer 2016 71


Features Cover feature

FocuS oN

cLiPboard.jS

Just like jQuery did for the DOM, clipboard.js plasters over the ugly parts of clipboard access to give you an elegant API to add Cut, Copy and Paste support to your site. The clipboard API seems cumbersome to many, which is why Zeno Rocha’s clipboard.js is such a godsend. Its super-simple API abstracts away all the unsightly code that is required to get Copy functionality, while weighing in at a svelte 3KB. After being added to a page, you just need to include a button and the custom data-clipboard-action and data-clipboard-target attributes. You’ll get amazingly easy crossbrowser clipboard access – all without ever having to rely on Flash, or any of the other hacks that have been around for so many years. There’s no need to modify your HTML to use clipboard.js, as it includes an imperative API that can be used instead. Here we grab the innerhtMl of an element on our page: new Clipboard('.selector', { text: function(trigger) { return trigger.innerhtMl; } });

You don’t get full clipboard access everywhere, though – Safari lacks some of the requirements for the full feature set. But it degrades gracefully to selecting the text in all modern browsers. It’s tiny, fast and great – check it out!

72

summer 2016

hidden perks AppCache’s only saving grace is its support base – used carefully, you can get offline almost anywhere

And that’s it! Now you have your static assets cached, you will have much faster loading and browsing experiences. There are a ton of rough edges with AppCache so please do your research before deploying, but with careful attention you can give nearly all your users a great offline experience today.

web workerS Web Workers are probably the most under-utilised piece of the web. Introduced by WebKit in 2008, this API solves one of the most nagging problems with developing performant websites: the single-threaded nature of browsers. Because the browser doesn’t have a way to guarantee that one chunk of JavaScript won’t change the state that another chunk depends on, it has to run all the code in sequence. You may have learned this the hard way if you ever tried to attach a function to a scroll event on your site. Because it can fire dozens of times a second, anything over very simplistic functions quickly janks up the entire page. Web Workers solve this problem by creating a new context, separate from the DOM. That means you won’t

have access to the DOM, or a number of global window properties. Your main communication is postMessage , a callback-based, text-passing API that lets you send data from your main script to the worker and back again. // feature detect webworker, in case we are using an old browser if (window.Worker) { // worker.js is a separate JS file, which defines the worker var worker = new Worker("/worker.js"); worker.onmessage = function(e) { var result = e.data; console.log(result); } // We send a message to the Worker via postMessage. // It can be almost anything you want, (e.g. object, Array, or String) // but keep in mind it will be stringified before it reaches the worker worker.postMessage({msg: 'hello World'}); } In a separate file, which we have named worker.js , we set up our Worker:


Cover feature

clipboard Github’s slick ‘clone’ button makes it easier for users to quickly get their tasks done

you can surprise and delight users with a streamlined experience. Rather than relying on Flash libraries or other hacks, we can simply use vanilla JavaScript: var button = document.querySelector(‘. copyButton'); var range = document.createrange(); range.selectnode(button); web workers these are one of the most amazing features of the htMl5 specification

// Workers have a global function, importScripts, which does what it says on the tin // You can use it to load any JS file from your site, commonly external libraries importScripts('lib.js'); // All we need to do is wire up a global function called onmessage, and we can // receive any communications sent from our regular script onmessage = function(e) { // even though we sent an object in the above snippet, it was stringified. // so we need to parse it again to convert it to JSon. var data = JSon.parse(e.data) if (data.msg === 'hello World') { postMessage('right back atcha') } else { postMessage('I didn't want to say hello anyway...') } } Of course, this is a very silly example – you would never need a Worker just to send text back and forth. However, you can see how simple the API is, and how powerful it can be to have a space where you can run GPU-melting code

without losing so much as a frame on the main thread. Once you’ve souped up your site with Web Workers, you can do things

window.getSelection().addrange(range); try { var result = document.execCommand('copy'); var msg = result ? 'successful' : 'unsuccessful'; console.log('copy was ' + msg);

The Web Worker API offers a space where you can run GPU-melting code without losing so much as a frame on the main thread that previously would have been unimaginable: resizing gigapixel images without ever contacting the server, including full databases like PouchDB, or writing some AI for a chess game. Basically, if you can code it, you can add it to your page through a Web Worker, all while keeping everything silky smooth.

cLiPboard There have been ways to copy text since Microsoft shipped IE4 in 1997, but was a long, long road to where we are today: with an interoperable version shipping in all major browsers (Safari’s is still in Technical Preview, but it is coming soon!). It may seem like a relatively simple feature, and it is, but if you add it to the right thing on your site,

} catch(err) { console.log(err) } window.getSelection().removeAllranges(); Like most 20 year-old browser APIs it’s clunky, but it is fairly straightforward. You just create a range (the content that is being selected, in our case the .copyButton element), and then run execCommand('copy') on it. Like I said, it’s simple and small, and it can result in huge usability wins for any website.

The bLob aPi You don’t need to reach out to the server to create a file. With blobs (binary large objects), you

summer 2016 73


Features Cover feature

client-side content thanks to the Blob API, users can now easily save generated photos, text, and so on

can take any arbitrary content – be it user-created Canvas images, generated documents like those on coding sites like CodePen or JS Bin, or even the page you are already on.

Scroll Snap Points this new CSS spec enables devs to separate presentation from logic when coding carousels

a.innertext = 'Click me to download this page!'; document.documentElement.appendChild(a); </script> </head> <body/>

IndexedDB is effectively a full database inside the browser – it lets you store dozens of megabytes of content on mobile <!doctype html> <html> <head> <title>content demo</title> <script> var pageContent = new XMlSerializer(). serializetoString(document); var pageBlob = new Blob([pageContent], {type: 'application/octet-stream'}); var a = document.createElement('a'); a.href = url.createobjecturl(pageBlob);

This is super-useful any time the user creates content on your site, or you have to go on a trip back to your server to download some generated content just to trigger the ‘Save’ dialog prompt. All that is required is for you to pass in an array of the content you want to generate the blob from, as well as the mime-type you want the client to treat, and you get a binary blob representing that content.

If you want to be able to download that on the page, pass the blob into url. createobjecturl and create a link that points to it. You can either have the user click a button, or call .click() yourself. Either way, you get to download your files without ever leaving your user’s device, saving bandwidth and time.

ScroLL SNaP PoiNTS At nearly every job I have ever had, I’ve had to implement a carousel. Despite being a simple concept, it inevitably ends up being more code than feels right – and good luck trying to make sure it is accessible and performant. Because I am not alone in this Sisyphean task, Matt Rakow and Jacob Rossi from Microsoft created CSS Scroll Snap Points. Rather than animate all of your slides with JavaScript, Snap Points lets us separate our presentation from our logic and define the carousel-like interaction entirely in CSS. #carousel { scroll-snap-type: mandatory; } .slides { scroll-snap-points-x: repeat(100%); }

No response Workers can help you avoid long-running scripts that end up locking the uI and blocking your users

74

summer 2016

Now when the user stops scrolling, the most recent slide will snap to the left of


Cover feature the carousel container. Everything else works automagically, with GPU-powered goodness. Of course there is a ton more you can do with it, and a number of properties and values you can use to customise your carousel. It is worth noting that while the Internet Explorer team created the specification, it has evolved quite a bit since. As a result, the implementations are quite different across browsers – use a tool like Autoprefixer to make sure you are covering your bases. And as always, make sure you are loading a polyfill like scrollsnap-polyfill for non-supported browsers – you don’t want the content to be inaccessible.

iNdexeddb IndexedDB is yet another feature of the web platform that is criminally underused. Effectively a full database inside the browser, it lets you store dozens of megabytes of content on mobile (typically over 50MB), and anywhere up to hundreds of gigabytes on desktop (yes gigabytes, with a ‘g’)! It’s also a great option for storing blobs of data, like page assets or images, so they can be loaded even when the user’s device is offline. The biggest drawback to IndexedDB has always been its obtuse syntax. While technically brilliant, it is much more complex than document.cookie, localStorage, or any other data storage

dexie.js this minimalistic wrapper for IndexedDB from David Fahlander gives you jQuery-style syntax

method. You shouldn’t let that stop you any longer, though! There are some fantastic libraries that cover up browser differences, as well as giving you much more human-readable syntax. For example, Dexie.js gives you a beautiful jQuery-style syntax around your transactions, and the localForage wrapper gives you the power of

IndexedDB with the simplistic API of localStorage. Perhaps one of the coolest wrappers is Mikeal Rogers’ PouchDB. This is a complete client-side implementation of CouchDB, which means you get Couch’s built-in full replication (you can replicate the entire database down to a user’s device!). IndexedDB is ridiculously powerful, and with recent updates to Safari and the plethora of great libraries paving over browser inconsistencies, you should really check it out today.

coNcLuSioN

Pouchdb this open-source JavaScript database offers a complete client-side implementation of CouchDB

What I’ve covered here is the tip of the iceberg. There are dozens and dozens of APIs and features that have been created to improve the web platform. Not all of them get glossy cover features or in-depth blog posts, but they are there, waiting in your users’ browsers for you to wow them with. Don’t let a lack of full browser support stop you from playing with any new APIs. With just a little progressive enhancement, you can give a great experience to nearly all your users, and help push the web forward.

summer 2016 75


FeatureS Second feature

The BesT of Tim Holman runs down eight hidden gems in the industryâ&#x20AC;&#x2122;s favourite frontend playground


Second feature

Exclusive offer!

3-MONTH Trial wOrTH $27

Unlock the full power of CodePen with Pro features codepen.io/promo/ net-mag-2016

O

ver the past few years, CodePen and frontend development have become synonymous with each other. As an early user and early hire at CodePen, I had the benefit of learning and growing with the platform as it went from online editor and web playground to what it is today. Everyone has a different approach to development, and there are a few key CodePen features that sometimes go unnoticed and could use a shout out every now and then. Those are what we’ll explore today!

1 PrePrOcessOrs CodePen is a great place to build small components in isolation, without having to set up a development environment. You can design and experiment with a small piece, and when you’re happy, bring it into your larger application.

Author TiM HOlMaN tim is an interactive developer with a flair for all things weird. If he’s not working on CodePen or providing comic relief at tech conferences, you’ll find him hacking on something completely odd on his website: www.tholman.com


cOdePeN radiO Entrepreneur alert! If you’re looking at starting your own company, or are curious to see some of the inside dealings of one, CodePen’s Radio podcast (blog.codepen.io/radio) is an incredible resource. It’s not often you find a company that is completely transparent about more or less everything it builds, but CodePen is just that. The initial episode ‘The Big Idea’ talks about the origins of the company; the initial goals and problems it set out to solve, as well as what users could look forward to. The following episodes move on to some topics all companies must address, including server setups and frameworks, how the team communicates, to handle money coming in. The great thing about this resource is that it evolves with the company. One week there will be a large discussion on how responsibilities – from server uptime to community outreach and support – are doled out amongst team members. The next week, it’ll be a discussion on venture capital funding, with a balanced look at the pros and cons. Listeners can start from the beginning and follow as the company grows, discovering things like how it handled hiring its first staff (including interviews with each new employee), its experience with DDOS threats, and how the CodePen vision has changed over time. CodePen Radio enables you to venture through CodePen’s last few years in the vague comfort of your morning commute. And if there’s something you’re wondering about, send in a request!

What might not be immediately obvious is that to make isolated development much easier and quicker for everyone, CodePen gives you instant access to a lot of great preprocessors. There are four different HTML preprocessors you can use while creating and editing Pens: Markdown, HAML, Slim and Jade. These can be useful in writing more terse code; or perhaps you are working on projects in these languages and want to keep your examples consistent. Users also have access to JavaScript preprocessors (CoffeeScript, LiveScript, TypeScript and Babel), as well as CSS preprocessors (Less, Sass and SCSS, Stylus and the newer PostCSS). These can be invaluable in helping you get going quickly, but are also a great resource if you’re looking to learn a new language. The ‘View compiled’ option enables you to write with a preprocessor and then see how it translates out once it has been preprocessed. With over six million Pens on CodePen, we’ve had the opportunity to gather some interesting data on preprocessor usage. You can see this at netm.ag/data-283.

2 eMbed feaTures When it comes to including code in your blog posts, articles and presentations CodePen fits all your needs. The CodePen embeds are incredibly versatile, and have a few special features. All embeds have a theme that controls the style of the CodePen header, tabs and other details. There are two built-in

themes: light and dark. Every CodePen member also gets a customisable personal theme, which you can edit to match your blog’s theme or your heart’s desire. The special thing here is that if you change your theme, CodePen will retroactively update all your previous embeds. So there’s no need to go back and edit each post individually. If you’re a Pro member, you can unlock a few extra features in the world of embeds. Firstly, you have unlimited themes, so you can choose something special for your blog, something different for your slides, and something different again for one-off posts. You can also add your own custom CSS to the entire embed, altering the text styles, fonts and literally anything else. Secondly, Pro users can make their embeds editable. At every conference you head to (or watch online), you’ll end up seeing a few embedded Pens within slides. They’re a great way to showcase your code, as well as its resulting markup and styles. You can show something off while still allowing the code to be tweaked and tuned. Editable embeds are also great for interactive blog posts and tutorials – the author can embed a Pen on the page, and visitors will be able to edit and explore the code and see their changes take effect in real time. Finally, if you’re really going for full customisation, the CodePen iframe has a custom PostMessage API you can use to change the tabs dynamically. First we get the iframe instance and send it the tabs we want to appear: var embedIFrame = document.querySelector('. codepen-embed-iframe');

Go compare on the left is a CoffeeScript snippet in

embedIframe.contentWindow.postMessage({ activetabs: "css, result" }, "*");

its written state, and on the right its compiled version

light or dark CodePen users can choose from default light or dark (shown here) themes, or customise their own

The above message would set the active tabs on the embed to a split view showing the CSS alongside its result. This feature, combined with a custom theme, enables you to create your own interface and layout through which others can interact with your Pen. Take a look at netm.ag/tab-283 for a live example –


Second feature

Preprocessor use CodePen can be used in combination with a number of CSS preprocessors

here, a Pen cycles through its code to show each tab over time.

3 live view aNd live syNc Live View is a full-page view of your Pen that updates in real time, as you edit the code. It’s just like the preview in the editor, except that this URL can be open in another window or tab, in a different browser, or even on a completely different computer or device. This means, for instance, that you can use Live View to test your code in Firefox, Safari, Chrome, and on your phone all at once. There’s literally no limit to how many different browsers you can use. As an added perk, events are also synced across these views, so when you scroll on one screen, they will all scroll with you. When you click a checkbox on one, it will be checked on all the screens. It really does make cross-device and cross-browser testing a breeze. And

live url CodePen will text you the current Live urL

Javascript stats JavaScript preprocessors like Babel and CoffeeScript are also available

to make things even easier, CodePen also offers a feature that allows you to text yourself the current live URL, so there’s really no excuse not to get testing!

4 THe PaTTerN library As CodePen has grown, we’ve been able to see so many Pens and collections built out by the world. When you have so much code coming in, it’s hard not to see a

5 PeNs as resOurces Although CodePen was initially built to show smaller, more isolated code demos, it became apparent some users wanted a little more structure and obfuscation. The solution was to make it possible to use Pens as resources for other Pens. In its most basic form, this is done by exposing the raw, compiled JavaScript and CSS from each Pen. This way, you can

With Live View you can view your Pen updates in real time, in a different  browser or even on a different device few patterns emerging, as well as people solving similar problems in different creative ways. So if you’re in the mood for a little inspiration, or need some ideas to kick off a new project, the CodePen Pattern Library (codepen.io/patterns) is where you should head! The Pattern Library is an incredible resource filled with hundreds of Pens, all sorted according to specific needs. Looking to add a rating system to your site? There’s a pattern collection for that. Researching different breadcrumb patterns? There’s a collection for that. Submissions for the library are open to the public, so if you’ve made something fun or fitting, you’ll be a shoo-in!

build out a really large project structure with individual components. You can do this for any Pen: so for codepen.io/ team/codepen/pen/EVdVpQ you would add the suffix .js to view the JavaScript, or .css to view the CSS. You can link up CSS or JavaScript from one Pen and use it in another to form a ‘dependency’ in the looser sense of the word. However, if you use a preprocessor, it is possible to create a ‘real’ dependency. So if you define a set of variables and mixins for one Pen and link it up to another Pen as an external resource, you’ll be able to use those same variables and mixins in the second Pen, where they would otherwise fail or error.

summer 2016 79


Pattern library this resource collects Pens to suit a whole range of needs and requirements – if you’re looking for inspiration, head here

6 cOdePeN Tv Born on a random hack day in 2015, CodePen TV (codepen.io/tv) demos Pen collections in an endless loop on a full screen. So if you’re presenting at a conference, this would be a great way to show off what people are making on the big screen in the background. There’s also a little Mac screensaver (netm.ag/screensaver-283) you can use to display all your favourite Pens on your idle screens. This works really well with more visual CSS and Canvas Pens.

in CodePen. This feature has led to CodePen becoming a large part of the Mozilla Developer Network, as well as a number of other great resources. It works by passing specific parameters to a defined URL. To prefill a Pen with the code and options you choose, you can PoSt to codepen.io/pen/define/ with data, where the value of data is JSON containing all the bits you want prefilled. For example, here is a simple Hello World:

One of the most powerful and useful features of CodePen is its Prefill API, which enables you to add links and demos to your documentation and demo pages without having to actually code anything

<form action="codepen.io/pen/define" method="PoSt" target="_blank"> <input type="hidden" name="data" value='{"title": "New Pen!", "html": "<div>hello, World!</div>"}'> <input type="submit" value="Create New Pen with Prefilled Data"> </form>

dependency You can add the CSS from one Pen to another

When you submit this form, you will be taken to the CodePen editor, with the title and HTML of the Pen filled in as per the defined data. It doesn’t stop here either. You can define almost all Pen settings from this API, to offer up complete custom editors, with preprocessors included. You can read more about the Prefill API at netm.ag/ prefill-283.

7 Prefill aPi

80

summer 2016

8 cOdePeN TeMPlaTes When you’re saving a Pen, you also have the option to save it out as a template. The template feature lets you create and save a default set of code and settings for Pens, like a reusable starter kit. Maybe you like to use Markdown and Sass, and have jQuery available – you could make a template for that. Or maybe sometimes you use Jade, Sass and a responsive meta tag in the <head> . You could make a template for that, too. But templates aren’t just settings, they are the actual code in the HTML, CSS and JavaScript editors as well. Anything you write in the editor panels will be included in your template. These are incredibly useful when you’re working with a company JavaScript library or setup, and want to get a project up and running quickly. These templates are also increasingly being used in specific library setups as well: having react , react-dom and a basic component scaffold rigged up and ready to go in just one click really saves a lot of time!

clOsiNG All in all, CodePen really is a Swiss Army Knife for frontend developers. If you’re looking for inspiration you’re


resOurces Seeing people experiment with code is perhaps the best part of my job. Every now and then, someone will make a pen that acts as a live demonstration of a certain JavaScript or CSS feature. I find these incredibly informative and useful as resources:

flexbox playground

netm.ag/siques-283 This playground Pen by Gabi Siquès demonstrates interactively how each flexbox property behaves in relation to one another. With this tool, it’s really easy to find the specific properties you’re looking for.

codePen Tv CodePen tV dispays a slideshow of random animated Pens – just sit back and enjoy

going to find it. If you’re after a place to get hacking quickly and experiment,

initial boost you need. The more time you spend exploring CodePen, the more

easing Playground

netm.ag/roblewsky-283 This Pen by Craig Roblewsky lets you edit and customise GreenSock easings in real time, so you can get those interactions silky smooth.

loaders and spinners

The template feature lets you create and save a default set of code and settings for Pens; like a starter kit you’ve come to the right place. If you want to build something out in a clean isolated environment, or test a cool new library you’ve found online, there’s no doubt CodePen will help you get that

likely you are to discover its deepest, most powerful features – and all in all, the more fun you’ll have! You can, of course sign up for free on the CodePen website: codepen.io.

Prefill aPi With the Prefill API, you can offer links and demos in your documentation without having to code anything

netm.ag/loader-283 This collection supports over 500 unique loaders and spinners. If you’re ever in a rut, this will be the single point of contact that can take you out of it!


H

N

1 |

S

R E

H

A

T

1

N

| Y

E | 1 0 T H

T H

T H

A

A

I

T H

N

0 |1

N

1 0

N I V E R S A N A R

Y A R R S

|

N I V E R S A R Y A N

I V

A N N

H

I V

T

Y A R R S

1 0

N

1 0

E

|

0

R Y

IV

Y

0

H

N

N

R S A R Y V E N I

R

1

T

|

H

N

Y

T

|

A

A N N I V E R S A

T H

1 0

|

Y

R

A

R

|

N

A

IV

N

N

1 0

T H

A N N I V

E

S A R Y E R I V

|

E

1 0

S

A

I

Y

R

V

R

E

A

R

S

H

T H

A

N

N

Y

N

T

|

A

1 0

1 0

|

S

Y

V R

VOTE TODAY S

A

R

AWA R D S 2 0 1 6

R

Y

|

1 0

T H

I V E R S A A N N R

1 0

A

0

T H

|

E

T

A

E R S A R Y V N I

and win a MacBook Pro

A N N I V E

R

S

A

R

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

VOTE TODAY AT

WWW.T3.COM/AWARDS MEDIA PARTNERS:


Tips, tricks & techniques

This monTh FeaTuring...

84

96

100

Build an offline page using service workers

84

create interactive charts in ionic 2

Make a hi-fidelity prototype in atoMic

90

10 golden rules for responsive svgs

100

keep your ui code in sync with patternpack

94

weB standards: Mediarecorder

106

Desktop

Mobile/tablet

0

0

0

0

0

0

0

0

0

0

96

get started with weB perforMance testing

108

accessiBility: asking aBout gender

114

Browser supporT

exclusive videos

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

Look out for the video icon throughout our tutorials. This issue, two authors have created exclusive screencasts to complement their articles: Dudley Storey’s top tips for creating responsive SVGs, and Femke van Schoonhoven’s guide to creating hi-fidelity prototypes in Atomic.

summer 2016 83


PROJECTS Service Workers

View source files here! All the files you need for this tutorial can be found at netm.ag/servicegit-283 and you can see a demo at netm.ag/demo-283

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

De A n hume w: www.deanhume.com t: @deanohume job: Engineering manager, Huddle areas of expertise: Web performance, Service Workers, squirrels q: how do you take your tea? a: I’ll have a rooibos tea with honey, please!

Service WorkerS

Build an offline page using service Workers Dean Hume introduces Service Workers, and shows you how to get started using them to serve content to users when you’re offline

ViDeo There is a great video from the Chrome Dev Summit that covers helpful Service Worker libraries that minimise the amount of boilerplate code you’ll have to write: netm.ag/posnick-283

84

If you have ever been travelling through an area with poor (or no) mobile connectivity and needed to urgently access some information on your mobile, you’ll know how frustrating this can be. What if I told you there is a new feature already available in your browser that can help with connectivity and even offer users an offline web browsing experience? Hello, Service Workers! As a web developer, I’ve always been jealous of some of the great features native app developers are able to implement. Push notifications, offline browsing and access to the system capabilities are just a few of the things that have previously been out of our reach. That is, until the Service Worker arrived.

summer 2016

At their core, Service Workers are simply worker scripts that run in the background. They are able to intercept network requests, handle push messages and perform many other tasks, with just a few lines of JavaScript code. Google’s Jeffrey Posnick uses the following analogy: “Think of your web requests as planes taking off. Service Worker is the air traffic controller that routes the requests. It can load from the network or even off the cache.” Service Workers give you total control of every HTTP request made from your site, which opens up the possibility for many different use cases. While Service Workers are written in JavaScript, they are slightly different from your standard JavaScript file. The Service Worker:


Service Workers

FocuS on

the SerVice Worker toolbox Already on board Google’s Inbox offers users an enhanced experience using

Service Workers

● Runs in its own global script context (usually in its own thread) ● Isn’t tied to a particular web page ● Has no DOM access ● Is HTTPS only (we will look at that shortly)

If you find yourself regularly writing Service Workers and tapping into the caching API, you might find the Service Worker Toolbox (GitHub.com/GoogleChrome/sw-toolbox) helpful. Written by the team at Google, it is a set of simple helpers to get you started creating your own Service Workers. For example, it has built-in handlers to cover the most common network strategies. With just a few lines of code, you can decide if you want to use a network-first, cache-first or cache-only strategy.

You don’t need to be a JavaScript master to begin experimenting with Service Workers. They are event-driven and you can simply pick and choose the events you want to tap into.

Service Workers give you total control of every HTTP request made from your site In this article, I am going to run through the basics of Service Workers, as well as showing you how to use them to build a simple offline web page.

Browser support Believe it or not, Service Workers already have decent support in modern web browsers. The latest versions of Google Chrome, Firefox and Opera have all shipped with support for Service Workers. Work

A basic Service Worker file isn’t too complicated, but the toolbox provides a quick way to reuse common network caching strategies. The Service Worker Toolbox is available through Bower, npm or directly from GitHub. It uses Express-style routing, which allows you to define the behaviour for a specific section of the site. For example, if you wanted to send GET requests for the URL ‘/myapp/index.html’ and use a network-first caching approach, you would write the following in your Service Worker file: toolbox.router.get('/myapp/index.html', toolbox.networkFirst); Very clean and easy to read! If you are looking to get going with Service Workers, the toolbox can be a great starting point.

ready yet? Keep up to date on the status of Service Workers in your favourite browser with this site from Jake Archibald

summer 2016 85


PROJECTS Service Workers has begun on them in Microsoft’s Edge and they are currently under consideration in Safari. To keep up to date on what the different browsers are doing with regards to Service Workers, check out this site from Jake Archibald: netm.ag/ready-283. Service Workers have been described by Opera’s Bruce Lawson as the “perfect progressive enhancement”. It might seem obvious, but if your browser doesn’t support them, you will just be served a normal experience. It’s definitely worthwhile experimenting with them because you’ll only pass on added benefits to users with browsers that do support them.

the service worker life cycle Before we dive into a coding example, it’s important to understand the different stages that a Service Worker goes through in its life cycle. There are four general stages: registration, download, installation and activation. Because a Service Worker is simply a JavaScript file that runs in a background thread, you reference it in an HTML web page the same way you would any JavaScript file. Let’s imagine we’ve created a Service Worker file and named it sw.js . To register it, use the following code in your HTML web page:

Devtools check Chrome DevTools allows you to inspect and see all installed Service Workers

<html> <head>The best web page ever</head> <body> <script> // Register the service worker if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'). then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err);

}); } </script> </body> </html> Inside the script tag, we first check to see if Service Workers are supported in the browser. If they are, we register it using the navigator.serviceWorker. register('/sw.js') function, which in turn notifies the browser that it needs to download the Service Worker file. Service Workers use JavaScript promises, which are a really clean, readable way to deal with callbacks. A promise represents an operation that hasn’t completed yet, but is expected in the future. This lets asynchronous methods return values like synchronous methods. The navigator.serviceWorker. register() function returns a promise, and if the registration is successful we can decide how we want to proceed. Once the Service Worker has been registered (step 1) and downloaded (step 2), it gets installed (step 3) in the background. Your Service Worker can listen for the install event and perform tasks appropriate for this stage. In this tutorial, we want to take advantage of the installation step to cache some resources we are going to serve to users when they are offline. Once the install stage has completed, the Service Worker is activated (step 4) and in control of things within its own scope. The activate event isn’t the most exciting part, but you can use it to clean up the cache or perform any relevant tasks. To check a new Service Worker has been installed and activated successfully, fire up Chrome DevTools and navigate to ‘Resources > Service Workers’. You should see your newly created Service Worker. The Resources tab is also useful when you need to debug, delete or even temporarily stop any running Service Workers.

HTTPS only – Say wHaT? In order for a Service Worker to run on a website, it needs to be served over HTTPS. While this does make it a little tougher to get started using them, there is an important reason for it. Remember the analogy of a Service Worker being like an air traffic controller? With great power comes great responsibility, and Service Workers can actually be used for malicious purposes. If someone was able to register a dodgy Service Worker on your web page, they would be able to hijack connections. To avoid this, Service Workers have been built so you can only register them on

86

summer 2016


Service Workers web pages that are served over HTTPS. This ensures the web page hasn’t been tampered with during its journey through the network. If you’d like to get started with Service Workers, don’t be put off by the fact that you need to serve your pages over HTTPS. There are a number of options you can use that are free. Firstly, if you would like to test Service Workers on your own computer, you can do so by serving pages from your localhost. They’ve been built with this feature in mind and it makes it easier for developers to develop locally before deploying their applications live. If you are ready to release your website into the wild there are a few free options. Let’s Encrypt is a new certificate authority that is free, automated, and open. You can quickly get started serving your site over HTTPS using Let’s Encrypt. If like me, you use GitHub for source control, you might have come across GitHub Pages. You

In order for a Service Worker to run on a website, it needs to be served over HTTPS can host directly from your GitHub repository for basic websites without a backend. The advantage is that by default, your web pages are served over HTTPS. When I first started experimenting with Service Workers, GitHub Pages allowed me to spin up a website and test out an idea in no time.

A BAsic exAmple Let’s take a look at a really simple example. Earlier I mentioned that Service Workers are event-driven, and one of their most powerful features is that they allow you to listen out for any network requests by tapping into the fetch event. When a fetch event occurs for a resource, you can decide how you want to proceed. You could alter anything on the outgoing HTTP request or the incoming HTTP response. It’s rather simple, but extremely powerful at the same time! Imagine this snippet of code in your Service Worker file: self.addEventListener('fetch', function(event) { if (/\.jpg$/.test(event.request.url)) { event.respondWith( fetch('/images/unicorn.jpg, { mode: 'no-cors' })

); } });

hosting options GitHub Pages allow you to host a website over SSL directly from a GitHub repository

Here we are listening out for the fetch event. If the HTTP request is for a JPEG file, we intercept it and force it to return a picture of a unicorn, instead of its intended URL. The code above will do this for every HTTP request made for a JPEG file from the website. While you probably wouldn’t want to do this for a real-world website, it does give you an idea what Service Workers are capable of!

let’s BuilD An offline pAge If you’ve ever tried to access a web page when you have poor or no internet connectivity, you may be familiar with the ‘There is no internet connection’ screen. In my daily commute, I use trains and buses to make my way around. As you may expect, I often go through areas with poor connectivity and seeing a screen like this really sucks. This is where Service Workers come to the rescue. One of my favourite features of Service Workers is the caching API, which can be used to speed up your website and even offer offline capabilities. The caching API provides a way for you to store resources in the browser’s cache so you can access them at a later date. It doesn’t replace HTTP caching, but instead gives you programmatic control over how and when to cache resources in the frontend. Let’s use the caching API to add offline functionality into a simple web page. Service Workers’ ability to intercept HTTP requests enables us to decide if we need to fetch a resource from the server or fetch it from the cache. So if we have no connectivity, we can simply retrieve it directly from cache. With this in mind, the following logic will help us build an offline web page:

summer 2016 87


PROJECTS Service Workers

in-depth

Further reADing AnD leArning Articles about Service Workers are exploding all over the internet. If you’d like to learn more and start experimenting with them, I thoroughly recommend checking out the following resources: ● lyza gardner: making A service worker – A case study netm.ag/gardner-283 ● mDn: using service workers netm.ag/MDN-283 ● google Developers: service worker libraries netm.ag/google-283 ● codelabs: your first progressive web app netm.ag/codelab-283 ● Addy osmani: getting started with progressive web apps netm.ag/osmani-283 ● progressive web apps pwa.rocks I also recommend taking a look at the Google Chrome GitHub repository (netm.ag/repo-283) that contains a load of different Service Worker samples – there are some great use cases in there! If you’d like to see a working example of this tutorial in action, it is available on GitHub (netm.ag/servicegit-283). There is also a fully working demo available at netm.ag/demo-283. Simply enable and disable your internet connection, and the page will update when you refresh.

sad dinosaur Many of us will be used to the frustration of being presented with a screen similar to this one

● The first time a user visits our web page, we install the Service Worker and add an offline HTML page into cache ● If a user tries to navigate to another web page but isn’t connected to the internet, we return the cached offline HTML page as a response instead ● If the user tries to navigate to another web page and has connectivity, we simply continue as normal

Service Workers are an open source initiative, and there are so many great features to come Let’s use this as a flow for our offline application. Once your Service Worker has been downloaded and registered, you can then listen out for the install event and add any resources into cache. self.addEventListener('install', event => { // pre cache the resources we need event.waitUntil( caches.open('offline-cache').then(function(cache) { return cache.addAll([ '/styles/styles.css', '/img/offline.svg', '/offline-page.html' ]); }) ) }); Here we are listening out for the install event. Once it is triggered, we open up a cache called ‘offline-cache’. The cache name can be any string you like, and each new string will create a new version of the cache. Once the cache is successfully opened, we

88

summer 2016


Service Workers then add all the required resources into it using the cache.addAll() function. Our cache is now primed and ready! We can access the resources that have been saved into the cache whenever we need to. Every time you navigate to a new page, you will also trigger the fetch event. Using this, we can determine if the HTTP response for a web page was successful. this.addEventListener('fetch', event => { // request.mode = navigate isn't supported in all browsers // so include a check for Accept: text/html header. if (event.request.mode === 'navigate' || (event.request. method === 'GET' && event.request.headers.get('accept'). includes('text/html'))) { event.respondWith( fetch(event.request.url) .catch(error => { // Return the offline page return caches.match('offline-page.html'); }) ); } else{ // Respond with everything else if we can event.respondWith(caches.match(event.request) .then(function (response) { return response || fetch(event.request); }) ); } }); Here we are listening out for the fetch event, and detecting if the user is trying to navigate to another page. You may also notice that the fetch event has a catch associated with it. If there is an error while the user navigates, we simply return the offline page from cache. That’s it! With a few simple lines of code, we’ve managed to cache important resources and listen out for any failed responses from the server. The next time a user visits the page without an internet

Alternative experience Once you have resources saved into the browser’s cache, you can access them without an internet connection

connection, they should see a screen like the one at the bottom of the page. This technique could be extended much further. There are some fantastic examples of offline web pages on the net today. The Guardian even built an offline page with a crossword puzzle included in it (netm.ag/guardian-283)!

get started Lyza Gardner’s article provides a great introduction to Service Workers

whAt is still to come? In this tutorial, I’ve only touched on a few of the great features that Service Workers bring to the table. It only takes a few minutes to get up and running using Service Workers, and I urge you to give them a try. Service Workers are an open source initiative that is being worked on by many browser vendors and developers in the community. There are so many great features still to come: ● Web Bluetooth: Enables wireless communication with devices over Bluetooth 4, using the web ● Web NFC: Uses near field communication to enable wireless communication between two devices ● Geofencing: Enables websites to set geographic boundaries around specific locations and then receive notifications when the hosting device enters or leaves those areas And that’s just a few of the new features coming soon to a browser near you! For a long time native applications have been able to offer more enhanced features than traditional websites. With the introduction of Service Workers, this feature gap is starting to close. The web will always be awesome, but there is no reason why we can’t improve it and pass on even better features. At the end of day, we are building great websites for our users!

reS ource Service Workers are constantly growing. The W3C Working Draft explains some of the finer details of what’s still to come and what is in progress: www.w3.org/ TR/service-workers

summer 2016 89


PROJECTS Atomic

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

Femk e vAn Schoonhoven w: www.atomic.io t: @femkesvs job: Marketing and communications, Atomic areas of expertise: Design, prototyping, marketing q: how do you take your tea? a: Weak! I love loose leaf flavoured green tea, and can easily enjoy a whole pot to myself over a morning

Atomic

Make a hi-fidelity prototype in atoMic Femke van Schoonhoven walks through how to prototype an interactive recipe app with cloud-based tool Atomic

video Femke van Schoonhoven has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/ atomicvid-283

90

It’s easy to get caught up in trying to develop an idea within a static mockup or flat file drawing tool, but a prototype is worth a thousand meetings. Why would you settle for anything less than exploring your ideas in an interactive way? Maybe you have an idea for how a transition could behave, but you’re not quite sure if it would feel right to the user. Quickly prototyping the transition and interacting with it directly gives you a much more realistic experience of how the final product could work in the real world. We’ve seen tools bring prototyping to the design space, but none quite like Atomic. Now there’s a way to build fully interactive, hi-fidelity prototypes that look and behave like the real thing.

summer 2016

Prototyping in Atomic is incredibly fast: you can create beautiful, advanced mockups in minutes, without writing any code, installing any software or drinking too much coffee. You’ll be able to preview with the prototype directly on your mobile device, or share it with a teammate for feedback. We’ve also pre-made all the assets you need to get started so you won’t have to import a thing (but you can import from Sketch and Photoshop too). In this tutorial we’ll explore a simple swipe transition inside a weather app that we’ll create in Atomic. We’ll walk through the easy steps for crafting transitions, and if you need a challenge, I’ll also cover some more advanced prototyping features for you to explore.


Atomic

Step 2 The Sample Project contains sample files to help you get familiar with Atomic

Step 4 Go to app.atomic.io/d/recipeapp to explore the sample file for this project

Let’s get started! If you don’t already have an account, open up Google Chrome, visit atomic.io and sign up for a free trial. This lasts for 30 days, which should be plenty of time for you to explore Atomic and make your first prototype.

Welcome to the Editor! If you’ve used a design tool in the past, Atomic will probably feel familiar. Let’s look around. On the left you’ll find access to drawing, layout and prototyping tools, as well as two tabs that let you switch between the Pages and Layers panels. On the right you’ll notice the Properties panel, which lets you change your page size, as well as bringing up settings for styles and transitions.

01

Now you’re signed in to your account, this is a great time to explore. You’ll notice a sample project has been set up for you. This has some introductory sample files you can play around with while you’re getting familiar with Atomic. Alternatively you can visit our Showcase (atomic.io/showcase), which has a collection of prototypes built by others. If you get stuck, the best place to look for a solution is our help centre: help.atomic.io.

02

Create a new Project by clicking ‘New Project’ and name it ‘Recipe App’. Pressing Enter will open the project folder. Here you can view all the designs within this particular project. As this is a new project, it’s empty. However, designs will fill up here over time as you create them.

03

Instead of creating a new empty design, head to app.atomic.io/d/recipeapp. This will open a sample file we’ve created to help you get started. See the ‘Copy and edit’ button in the bottom right corner? Click that and add it to your Recipe App project. Click ‘Edit now’. Just like that, a copy of our sample file is now inside your project ready for you to edit.

04

05

On the Assets page of the sample file you’ll see we’ve created all the elements used in this prototype for you. Switch to the Layers panel, then click some of the elements on the canvas. The elements you select will be automatically highlighted in the layers panel. Speed up your workflow by pressing ‘?’ to see the range of keyboard shortcuts you can use.

06

ExpErt tip

LeveL uP Once you’ve got the hang of how transitions work, it’s time to step up your game with Advanced Motion control. This enables you to fine-tune your transitions by letting you select individual easings, durations and delays for each element in your transition. This is all done on a simple, easy to use timeline. To bring up the timeline, select a hotspot, then choose ‘Advanced Motion’ from the motion drop-down in the Properties panel to reveal advanced options.

You can preview and interact with your prototype whenever you want to by clicking ‘Preview’ in the bottom-right corner of the Editor. We’ll use this later to test out how our transitions feel. Selecting ‘Preview’ now will show you the assets in fullscreen mode, but if you navigate to Page 2 using the arrows, you’ll see a reference

07

Step 6 In the sample file’s Assets page you’ll find the elements you need

summer 2016 91


PROJECTS Atomic example of the first state of our prototype. Try interacting with the reference example by clicking on the ‘Saved Recipes’ button in the header to preview what we’re going to create. Now you’re familiar with the prototype we’re building, it’s time to get started! Select ‘Edit’, to get back into the Editor, and then on the Assets page select all the elements and copy them to the clipboard. Go to Page 1 and paste the elements onto the page.

08

Step 15 Atomic will animate any changes you make between Page 1 and your new Page 2

Without any elements selected, set the background fill of your canvas to #F6F7F8 (look in the right-hand Properties panel). Place the Header on the canvas, top and centre. You’ll want to rearrange the assets so your first state (All Recipes) is positioned on the canvas, and the assets for your soon-to-be-created second state (Saved Recipes) are off the canvas to the right. Here’s why: when the same object exists on Page 1 and Page 2, Atomic will animate any changes between them automatically.

09

When you initially previewed the prototype, you may have noticed the newsfeed of recipes on the ‘Reference – All Recipes’ page is vertically scrollable. To add this effect, arrange the recipe cards in a vertical stack, including the ‘Come

10

back tomorrow’ text that should be placed last, at the bottom. Select the recipe cards and ‘Come back tomorrow’ text, and choose the Container tool that will have appeared at the top centre of the Canvas. Select ‘Create scrolling container’. The content will then be grouped and placed inside what we call a scrolling container, with vertical scrolling enabled by default. Make sure you define the boundaries of your container by dragging the bottom boundary up to mask the elements and meet the canvas.

11

For this particular transition, we want the ‘Saved Recipes’ grid coming in from the right, and the ‘Add more’ text coming up from below. To make sure this happens, place each element in its respective starting position. For example,

12

‘Saved Recipes’ should be placed on Page 1, off the canvas and to the right; whereas the ‘Add more’ text should be placed on Page 1, off the canvas and below. As we’re creating a tap transition, where we want the elements on our next page to slide in, it’s important they also exist on Page 1, off the canvas, to define their starting position. At any time you can refer to the ‘Reference – All Recipes’ page to see how this page should be arranged.

13

Now we’ve set up the first page, it’s time to create the second state for the transition, which we’ll do on a new page. Make sure the Pages panel is selected, then hover over Page 1 to bring up the hamburger menu in the bottom right of the Page card. Click the menu and select ‘Duplicate’.

14

Navigate to your newly duplicated page to create the second state: your Saved Recipes. It’s important here not to delete any elements on the page, as this will break the transition. Because we’ve duplicated the page, Atomic knows that the elements on both pages are the same connected elements. Therefore it knows to animate any changes we make to the properties of the elements on Page 2 (size, position, rotation, opacity, colour and so on).

15

First move the ‘All Recipes’ scrolling group to the left, off the canvas, and the ‘Saved Recipes’ element and ‘Add more’ text into their new positions: in the body (in place of the ‘All Recipes’ group) on the bottom half of the canvas, and in the centre respectively. The only element we’re not moving in this transition is the Header. This is

16

ExpErt tip

PrevieW on mobiLe

Step 14 For our transition, duplicate page 1

92

summer 2016

Now you’ve finished your prototype, what better way to interact with it than on your mobile device? To view your prototype on your mobile, copy the Share link and paste it into your browser on your mobile (Safari if you’re on iOS; Google Chrome if you’re on Android). You’ll have the option of adding it to your homescreen, making it super quick and easy to access. Swipe left and right to see the transition you’ve created, and shake to refresh if you’re making changes.


Atomic

Step 18 Add an interaction hotspot over the area you want users to interact with

Step 19 Customise your transition, including the trigger gesture and motion type

because the header remains on screen and only changes subtly – we’ll get to that soon.

settings: Gesture: Click or tap ; Go to: Page 2 ; Motion: Ease in-out ; Duration: 250 .

For the header, we want the blue background to slide across on the second state. While on Page 2, with the Layers panel open, expand the group titled ‘Header’ and select the blue rectangle. Then move this to the right so it’s placed behind ‘Saved Recipes’. Nice!

We want to be able to toggle back and forth between the two transitions, so we’ll also now need to place a hotspot on Page 2 to take us back to Page 1. Copy the hotspot from Page 1 using the keyboard shortcuts, and paste it on Page 2 over the ‘All Recipes’ text in the ‘Header’. Remember to update the destination page setting of the new hotspot to Page 1.

Page 1 in the pages panel and click Preview in the bottom right of the editor (shortcut cmd+enter ). Click or tap on ‘Saved Recipes’ on your prototype to go to Page 2. Then, select ‘All Recipes’ prototype to be taken back to page 1. Nice!

17

Now comes the fun part of creating the transition. On Page 1 we’re going to draw a hotspot over the ‘Saved Recipes’ text in the Header, as this is the area we want our user to interact with. Select the Interaction Hotspot tool from the Tools Panel at the far left of the Editor (or just press H ). You can draw hotspots using the same method you’d use to draw a rectangle on the canvas: just click and drag.

18

Once you’ve drawn your hotspot, with it still selected, you’ll see an Interactions section appear in the Properties panel to the right. This is where you can specify the trigger gesture, destination page, motion type and duration of the transition. For this transition specify the following

20

21

It’s time to preview your transition! Navigate to

Now you’re a pro! Select ‘Edit’ to return to the editor, then if you delete the assets and two reference pages (by selecting the page’s hamburger menu and then ‘Delete page’), the prototype you’ve just made is ready to share. You can easily create a Share link by pressing ‘Share’ in the bottom right of the editor.

22

ExpErt tip

Work With Your teAm Want to work on your prototype with a team member? No problem! Unlike other collaborative design tools, Atomic has a true multi-user editing environment. Look for the ‘+’ button by the Project Name and invite teammates to work together on the same designs, at the same time with you.

19

Step 21 Click the Preview button to see your transition in action

summer 2016 93


PROJECTS Process

Process

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

MArcel o S oMerS w: www.marcelosomers.com t: @marcelosomers job: Experience design solution architect, Slalom Consulting areas of expertise: Design systems, CSS architecture, UI prototyping q: how do you take your tea? a: Coffee with too much creamer

reS ource Marcelo Somers explores alternative strategies for distributing your pattern library and keeping it in sync in this blog post: netm.ag/grail-283

94

Keep your uI code In sync wIth patternpacK Marcelo Somers walks through how to use PatternPack

to design, develop and distribute your pattern library The aim of a pattern library is to reach a situation where the library’s documentation is automatically in sync with the apps it powers, which tends to mean sharing CSS code so the developers can copy and paste HTML snippets that ‘just work’. In practice, this gets complicated quickly. We regularly see situations like:

assets using npm or Bower, so your application will need to use one of those. Spin up a new Node project with npm init and then run npm install --save-dev grunt patternpack to get your dependencies. You’ll need to create a gruntfile. js in your project’s root directory and add a basic PatternPack configuration to it:

● The desire to share the UI code in multiple codebases so different apps can look similar ● Multiple release branches in different states undergoing bug fixes as work makes its way through development, testing and production ● Designers pushing the UI code forward with prototype ideas that aren’t ready for production

module.exports = function (grunt) { grunt.initConfig({ patternpack: { run: {}, build: {}, release: {} } });

To deal with these situations, we created PatternPack (www.patternpack.org), an open source tool for designing, documenting and distributing pattern libraries. This tool helps us establish a repeatable process for centralising and sharing versioned UI code, making it as simple as importing a library like Bootstrap into an application. PatternPack isn’t prescriptive about the design and frameworks it can be used with. Instead, it gives you many of the tools you’ll need to build your patterns from the ground up, including Sass or Less compilation plus Autoprefixer, static site generation via Assemble, and automated distribution scripts.

GettinG started There are a few dependencies you’ll need to get started: Git, Node.js and Grunt. If your consuming application doesn’t use Grunt that’s OK, this is only for the pattern library. PatternPack distributes your

summer 2016

grunt.loadNpmTasks('patternpack'); grunt.registerTask('default', ['patternpack:run']); } There are plenty more options for configuration, which you can explore at netm.ag/options-283. Once you’re done configuring PatternPack, you’re ready to start it up. Open a command prompt and run grunt patternpack:run . This will: ● Generate the files and folders you’ll need ● Build your pattern library in a temporary directory, html/ ● Start up a web server at http://localhost:8888/ ● Start a watch task that will automatically rebuild the pattern library when any changes are made (compatible with LiveReload)


Process addinG patterns Patterns are composed of two files: a Markdown ( *.md ) file that contains all the content for a documentation page, and a Sass/Less file with the styles for that pattern. To get started, add two files into one of your folders ( atoms/ , molecules/ or templates/ ) with your pattern name (e.g. atoms/ buttons.md or atoms/buttons.scss ). For your Markdown file, we recommend starting with this template: --title: Buttons --# Buttons Insert your documentation here ## Example <div class="library__example"> Insert your live example here </div> ## Code Insert your code example here Your Sass files will be globbed together into a _patternpack-patterns.scss or .less file that you can @import in your master patterns.scss file.

releasinG your code PatternPack’s most powerful feature is the ability to easily version and release your code, which allows other applications to pull in your styles and lock them to a specific version, preventing any unexpected changes. In the default Grunt configuration, you have a patternpack:release task. This does a few things: ● Rebuilds your pattern library in the html/ directory ● Copies the files from your build ( html/ ) directory to the dist/ directory ● Bumps the patch version number in the package.json file ● Commits all files in a new commit, entitled Release v#.#.# ● Tags the commit v#.#.# PatternPack’s release process follows semantic versioning principles (semver.org). There are additional tasks available for bumping minor and major versions. Before running the release task you’ll want a clean working copy, since the

release tasks will stage and commit all your files (it runs the equivalent of git add . && git commit ). After running the release task, review your changes in the new commit to ensure they are all there. Your compiled distribution files will show up in dist/ . You can push your changes with git push --follow-tags . At this point, your changes are published, versioned and ready to be consumed by one or more applications.

inteGratinG with your apps PatternPack builds an npm- or bower-compatible project, so integrating your pattern library is as simple as npm install my-awesome-pattern-library . In client projects, we most often point a package.json

PatternPack helps us establish a repeatable process for sharing versioned UI code file directly to a private Git repository to pull in the files. You can point to any tag, branch or commit, and update as needed.

GoinG forward PatternPack is a starting point for building pattern libraries. As yours evolves, you can theme it, add additional tools (for example, compiling your SVGs into a single sprite), and even integrate frameworks. If you’re interested in learning more about PatternPack, take a look at the GitHub repository (github.org/patternpack/patternpack) where you’ll find expanded documentation, and our Slack channel (slack.patternpack.org) where my co-creator John Gully and I are available to help.

summer 2016 95


PROJECTS Ionic

View source files here! All the files you need for this tutorial can be found at netm.ag/ionicgit-283

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

Rohi t bogg AR A p u w: github.com/rohitb4 t: @4two2 job: Member of technical staff, Adobe areas of expertise: JavaScript, UI development, data visualisation q: how do you take your tea? a: Green, boiling hot, with lemon

IonIc

Create interaCtive Charts in ioniC 2

Rohit Boggarapu covers the process of creating interactive charts in one of the most popular hybrid app frameworks

Res ouRce For a user, a hybrid app is no different from a native iOS or Android app. But for a dev things are very different. This article explores what exactly a hybrid app is: netm.ag/hybrid-283

96

When you work in a small team, it tends to be difficult to write and maintain separate code for Android, iOS, and Windows. Thatâ&#x20AC;&#x2122;s where hybrid frameworks like Ionic come into the picture. They not only enable us to write a single piece of code that can be used on all three platforms, but mean we can do so using our existing tech stack. In this tutorial we are going explore how to tackle a common task like data visualisation in Ionic 2, one of the most promising hybrid app frameworks out there. I will use the FusionCharts JavaScript chart library (fusioncharts.com), for this project as it offers a large library of over 90 charts, is compatible with every device and browser, and is very easy to work with.

Setting up ionic 2 To develop apps with Ionic 2, you need Node.js version 4+ and npm running on your OS. You can download

summer 2016

the Node.js package from nodejs.org/en/download and npm will be installed along with it. If you already have a different version of Node.js running and want to run version 4+ as well, you can do that through Node Version Manager (github.com/creationix/nvm). Next you need to install Ionic 2 Beta using npm. To do this, run npm install -g ionic@beta in your terminal from a user account with root privileges (we are installing the module globally). To simulate the Ionic app we are creating in multiple platforms, we need one more Node module: Cordova . You can install this globally using npm install -g cordova . We are now ready to create our first Ionic app. However, with this setup, weâ&#x20AC;&#x2122;ll only be able to see the application in a browser. To simulate the app for an iOS or Android device, we need to build that particular platform module to Cordova. In this tutorial we will be building the iOS module, so you need to run ionic platform add ios .


Ionic Finally, you need to install Xcode. You’ll find instructions for this at developer.apple.com/xcode.

FocUS on

Let’s tALK ioNic

creating an ionic 2 app In this tutorial, we’re going to create an Ionic 2 app named ‘Charts’. We’ll create a ‘charts’ folder in your current working directory and bootstrap the app with a sample application. The sample app will contain a basic page, as described at netm.ag/start-283.

Ionic enables us to write one piece of code that can be used on Android, iOS and Windows To create this app, run ionic start charts --v2 in the current working directory ( charts is the name of the app and --v2 tells Ionic we want to create an Ionic 2 app). On execution of this command, a charts folder will be created in the current working directory. To test the app in the browser, navigate to the charts folder and run ionic serve . This will launch the app in your default browser.

adding a new page

Now let’s add a page/component to the charts application that will create JavaScript charts. First, we will just add a simple HTML page with ‘Hello World’ in it. In Ionic 2, pages can be added to the Ionic app using the @Page decorator (an Ionic module based on Angular 2 components), which has access to the complete Ionic functionality. A bare-minimum page requires a template HTML file (which contains the markup), and a JavaScript file (containing the logic needed). You can find more details about Ionic pages at netm.ag/pages-283. To create the page we will add donut-chart.js and donut-chart.html files to the charts/app/pages donut-chart directory. In the HTML file, we can add the code for app navigation and a simple ‘Hello World’ heading:

Ionic 2 is a hybrid app framework that helps in building native and progressive web apps. App developers can code in the languages of the web (HTML, CSS and JavaScript) and then build the app into a platform of their choice. Ionic also provides several pre-built components to enable you to bootstrap the application, so building basic applications is relatively easy. Features like push notifications, one-stop solutions for authentication, and the ability to make changes to your apps without the need for an update makes Ionic 2 one of the best frameworks for building apps. These features were present in Ionic 1 too, but folks at Ionic decided to bring more to the platform with Ionic 2. Ionic 2 is still in beta, but you can start building apps with it already, to leverage the features it currently supports.

ionic 1

Ionic 1 was significant because it changed the way how people could build and deploy apps. A lot has changed since Ionic 1, especially in the framework it is built upon: AngularJS. AngularJS got its first major upgrade in the form of Angular 2. Ionic 2 also got a major upgrade and was built on the core concept of Angular 2 components. In fact, it wasn’t just upgraded, but some of its core components (like the navigation) were also overhauled. A summary of the changes brought in can be found on the official Ionic blog: netm.ag/changes-283. Ionic is now planning to bring in support for the latest features of the web, including Web Workers, ES6, TypeScript and Windows 10.

<ion-navbar *navbar> <button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Hello Ionic</ion-title> </ion-navbar> <ion-content> <h1>Hello World</div> </ion-content>

ionic takeover Although Ionic 1 has more market share today, Ionic 2 is all set to overtake it as it offers some major advantages over Ionic 1

summer 2016 97


PROJECTS Ionic

In-depth

WheRe NeXt? After you are done with making simple charts, you might want to explore further, and make complex visualisations for your own applications. So here are some resources to help you in your exploration:

Fusioncharts developer center

www.fusioncharts.com/dev We’ve used the FusionCharts JavaScript charts library for making charts in this tutorial, and its documentation should be your first point of reference if you are having any issues rendering them. It is pretty detailed and addresses all the problems a developer might have. It also includes a live chat feature, which might come in handy if you need immediate support.

ionic 2 documentation

ionicframework.com/docs/v2 Although Ionic 2 is still in beta, its documentation is already mature. If you get stuck with anything related to Ionic 2 – installation, theming and so on – you should refer to this. The docs include a dedicated tutorial for getting started with Ionic 2, which should help you get productive very quickly.

Fusioncharts galleries

www.fusioncharts.com/javascript-chart-fiddles www.fusioncharts.com/dashboards When initiating a new project, often we find it difficult to start from scratch; we stare at the blank canvas wondering where we should begin. If that sounds familiar, you will find FusionCharts’ demo gallery and dashboards section a huge help. The demo gallery contains over 800 live samples, including the complete source code. There is a good chance whatever you are trying to make is already available. Just fork the fiddle and proceed from there!

example chart Our doughnut chart representing the revenue split of a hypothetical company by product categories

In the JavaScript file, we reference the HTML file created as the template for this component. Since we are not doing anything fancy just yet, we can just add an empty constructor ChartsPage . import {Page} from 'ionic-angular'; @Page({ templateUrl: 'build/pages/pie-chart/pie-chart.html' }) export class ChartsPage { constructor() { } } We’ve just created a standalone component; now we need to link this into the main app. To do this we need to reference the component we have created in the app.js file in the app folder, and use the component in the pages property of the app component constructor. import {ChartsPage} from './pages/donut-chart/donut-chart'

chart collection FusionCharts offers a collection of chart demos and fully built dashboards, plus downloadable source code

98

summer 2016

constructor(app, platform, menu) { // default app constructor this.app = app; this.platform = platform; this.menu = menu; this.initializeApp(); // set our app's pages - we are adding donut chart here this.pages = [ { title: 'Welcome', component: HelloIonicPage }, { title: 'Donut Chart', component: ChartsPage} ];


Ionic // make HelloIonicPage the root (or first) page - default step this.rootPage = HelloIonicPage; } After making these changes, the Ionic app in the browser should auto-reload (or use ionic serve from the terminal again). Now a new link should be visible in the side menu of the app, and on clicking that you should see ‘Hello World’ written on the screen.

creating a JavaScript chart Now it’s time to modify our ‘Hello World’ page to create a doughnut chart. To be able to use the FusionCharts library, we need to first include the fusioncharts.js and fusioncharts.charts.js files in the www/index.html file. Quick Tip: If both the files are in the same folder, then adding fusioncharts.js will be enough, as this will automatically include fusioncharts.charts.js . <script type="text/javascript" src="path/to/fusioncharts. js"></script> We will now modify the HTML from the previous step to create a chart container: <div id="chart-container"></div> In the constructor in donut-chart.js , which we created above, we need to add the following code to create the chart inside the chart container:

There are more than a hundred attributes you can use to improve your chart’s design FusionCharts.ready(function() { var revenueChart = new FusionCharts({ type: 'doughnut2d', renderAt: 'chart-container', width: '100%', height: '450', dataFormat: 'json', dataSource: { "chart": { "caption": "Split of Revenue by Product Categories", "subCaption": "Last year", "numberPrefix": "$", "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,# 8e0000", // more chart attributes

}, "data": [{ "label": "Food", "value": "28504" } // more data ] } }).render(); }); In this code we are creating a new chart through the FusionCharts’ constructor. The properties used are briefly explained below: ● type defines the type of chart ● renderAt is the ID of the container where we want to render the chart ● width and height are used to set the chart dimensions ● dataFormat is the format in which we are going to feed the chart data (you can use JSON as well as XML) ● dataSource contains chart cosmetics inside the FusionCharts chart object and the actual data to be plotted inside the data array Although I have shown only four attributes in the chart object, there are more than a hundred others you can use to improve your chart’s design. You can read more about that at fusioncharts.com/dev/chartattributes.html. Once this code is added, run ionic serve to relaunch the app. You should see a ‘Donut Chart’ link in your side menu. If you followed all my steps properly, when you click that link you should see a doughnut chart! If not, please refer the code on the GitHub repo for this project (netm.ag/ionicgit-283) to see where you went wrong. Note: After checking it in the browser, use ionic emulate ios to load your app in the iOS simulator.

Summing up As you’ve just seen, it is not difficult to get started with data visualisation in Ionic 2. Although I’ve just made a simple doughnut chart to demonstrate the process, it is possible to create complex charts with multiple datasets using the same process. The only thing you need to figure out is the format in which FusionCharts accepts the data for that particular chart type. Once you are able to do that, you will be able to make any chart from the library. If you need any help with this topic or if you have any questions about the content of this tutorial, feel free to catch me on Twitter (@4two2). I’m always happy to help!

summer 2016 99


PROJECTS SVG

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

DuDl e y S t ore y

w: www.thenewcode.com t: @dudleystorey job: Developer, designer, instructor, writer areas of expertise: HTML, CSS, SVG q: how do you take your tea? a: Green, in a Zen garden

SVG

10 golden rules for responsive svgs Dudley Storey runs through the things you need to remember when creating SVGs that scale to all devices The many advantages of SVG – including infinitely scalable vector images, small file sizes and direct integration with the DOM – make it a natural fit for responsive design. Despite the SVG specification being a decade old, it’s relatively recent support in many browsers and tools means there are still a number of tricks, loopholes and gotchas that catch out even experienced web designers and developers. Here, I’ve summarised the most important of these as 10 golden rules.

1 Set up your toolS correctly

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

100

Just as a craftsman sharpens his tools before beginning work, anyone working with SVG must set their applications up to deliver the vector format in the most efficient and optimised method possible. There are a number of settings to implement. First, unless there are compelling reasons to do otherwise, set measurements to ‘pixels’ in your vector tool. While it doesn’t matter to SVG (which will measure the viewBox and elements happily in almost any measurement system) it makes sense to develop the SVG drawing using common CSS units, rather than the print default of inches; and it also

summer 2016

makes it much easier to add @media queries and other interventions later. Don’t make the canvas area any larger than it needs to be. Like bitmap images, any ‘blank space’ in the SVG won’t be used, and is best substituted with CSS margins. Note that many vector tools, such as Sketch, will automatically ‘crop’ the canvas area to selected elements. At the same time, don’t crop the canvas area to the exact edges of elements. Antialiasing will still be applied to the SVG, and cutting it too close may also crop out the antialiasing. Instead, leave at least 2px clear wherever the edge of the canvas comes close to an element. Responsiveness and performance are closely related, so set the decimal precision to be no more than two points. SVG doesn’t think in integers, so a vector point can have a value of 1.45882721px. This extreme precision is entirely unnecessary, and only adds to code bloat and file size, so it’s better to truncate it at this point. Similarly, draw vector shapes using as few points as possible. Many new designers assume more points is better, when the reverse is actually true: a few


SVG points, placed well, provide greater control over an element, while also reducing file size. If you’re given vector files that do not follow this rule, don’t worry – most vector graphics applications have a ‘simplify’ option you can use to reduce the number of points in an element without changing its shape. Alternatively, for detailed work I’d suggest a plugin like Astute Graphics’ VectorScribe.

2 remove height and width attributeS Most apps add a lot of proprietary, unnecessary code in their SVG export (see the boxout opposite for more on this). The only required code at the start of most SVG files is the following: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> <!-- SVG code here --> </svg> For our purposes, the most important aspect is the removal of the width and height attributes that most

Processing your SVG code through a tool like SVGOMG will trim it markedly applications include automatically. This makes the SVG fully responsive in modern browsers. If you’re processing a lot of SVGs, or are in a rush, you don’t need to complete this step by hand. Instead, you can follow the suggestions laid out in the third golden rule ...

In-depth

export coDe Vector drawing applications have significantly improved their SVG export in the last 18 months. Older versions of Illustrator export code that looks like this: <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www. w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve"> … </svg> As I explain in Rule 2, most of this code is complete cruft, and actually gets in the way of making a responsive SVG. You can trim it out by hand, or use the tools mentioned in Rule 3. Thanks to work by Dmitry Baranovskiy, Adobe Illustrator CC 2015.2 no longer exports the long version of the SVG code, but a significantly streamlined one. Sketch 3.2 has also improved SVG export markedly. If you haven’t upgraded recently, it’s very worthwhile doing so.

3 optimiSe and minify Svg output Whatever tool you use to create your SVG content, it’s still worthwhile processing its output through a tool like SVGOMG, which will trim the code markedly. Typically, you can save around 20 to 80 per cent in file size. The same code can be integrated locally as a gulp or Grunt task: www.npmjs.com/ package/svgo.

4 modify code for ie Rule 2 mentioned that correctly optimised SVGs are fully responsive in modern browsers. That’s true if we count Microsoft Edge as a modern browser. For IE 9-11, we have a few issues to address. If we are using the SVG as an image: <img src="countdown.svg alt="Countdown">

summer 2016 101


PROJECTS SVG

focuS on

progreSSiVe enhAncement Developing a site progressively means building on the strengths of browsers, while compensating for their weaknesses and the relative fragility of the web. Sites are built in layers of technology: 1 html: Content is built and delivered in semantic HTML5 markup written in logical order, which also serves to enhance SEO and accessibility. Since there’s no page without content, this is considered the base layer of any site or web application. 2 cSS: This markup is enhanced with CSS for layout, presentation and light interaction or animation. If the CSS doesn’t load for any reason, the resulting page will probably be ugly, but it can still be used. 3 JavaScript: Finally, the functionality of the page is enhanced with JavaScript. Since JavaScript is the code most likely to be blocked, buggy, or otherwise fail to load, it should be considered the top-most layer of development. If it doesn’t run, the essential nature and usability of the site should be unaffected. Progressive enhancement is a discipline; one that has to be inculcated in a development team. Like accessibility, it’s something easy to neglect and lose sight of, but when this happens it is never without significant cost.

We can force IE9-11 to display the image correctly using the CSS attribute selector: img[src$=".svg"] { width: 100%; } Note that this means your image will scale to fit the width of its container. I prefer to create a series of helper classes I can apply to all images, not just SVG, that will also address this issue: .w50 { width: 50%; } SVG images work well in general production, but have limited interactivity: most browsers will ignore interactivity and animation inside an SVG placed on a page as an <img> . In addition, SVG images are an extra HTTP request for the browser. For these and other reasons, SVG is increasingly used inline. In that case, the SVG code needs a little more treatment for IE: <body> … <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 525 365" preserveAspectRatio="xMidYMin slice"> In addition to the preserveAspectRatio attribute, IE needs a little more guidance to preserve the correct scaling of the image: take the width of the SVG ( 365 in this case), divide it by the height ( 525 ) and multiply the result by 100 per cent. This will become the padding-bottom value for the SVG, ‘propping’ it open enough in IE to display the SVG in its correct aspect ratio: <body> … <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 525 365" preserveAspectRatio="xMidYMin slice" style="width: 100%; padding-bottom: 69.52%; height: 1px; overflow: visible"> Note that, in order to keep things concise and clear, the code samples in the rest of this article don’t

optimisation A combination of intelligent hand-editing and post-production optimisation can reduce SVG file sizes markedly

102

summer 2016


SVG

Scaling options Using SVG for hero text means it will automatically scale in line with its container

include these changes. Amelia Bellamy-Royds has written an excellent article on scaling SVG, which you’ll find at css-tricks.com/scale-svg.

5 conSider Svg for hero text There’s currently no CSS standard for sizing text to its container. It’s possible to scale text using vw units, but that will almost always require at

Keeping the SVG inline for hero text preserves accessibility and SEO value least two media query interventions to ‘clamp’ the text at certain viewport limits. However, SVG text will resize to a container automatically: <header> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80"> <text x="0" y="66">Kauai</text> </svg> </header> The CSS: header svg text { font-weight: 900; font-size: 90px; fill: blue; } Keeping the SVG inline preserves accessibility and SEO value, and allows the text to be styled using any font already embedded in the page. See netm.ag/ hero-283 for more information.

6 leave width and height in place for progreSSive iconS One exception to Rule 2 is icons and small logos, which should retain their width and height attributes if you want them to be progressively enhanced:

<a href="http://codepen.io"> <svg role="img" aria-label="CodePen" width="50" height="50"> <title>Codepen</title> <use xlink:href="#codepen" /> </svg> </a> … <svg style="display: none;"> <symbol id="codepen" viewBox="0 0 50 50"> <path d="…"/> </symbol> </svg> You can see an example of this technique in action at netm.ag/storey-283. If we only size the SVG icons with CSS, and the site’s style sheet doesn’t load, the icons will appear at the default size of a replaced element: 300px x 150px. By keeping the height and width as attributes, we can size them to the nearest reasonable touch size by default, and use our CSS to enhance the way they are presented.

7 uSe vector-effectS to keep hairlineS thin By default, SVG scales everything with the viewport, including stroke thickness. Usually this works out fine, but in some cases – diagrams and strokes applied as effects on the outside of text in particular – you may want to keep strokes the same thickness, no matter what the size of the drawing. This is the domain of the little-known vector-effect property, which can be applied as a presentation attribute or in CSS: path { fill: #fff; stroke: #111; stroke-width: 2; vector-effect: non-scaling-stroke; } Take a look at netm.ag/hairline-283 for a full example of this technique.

summer 2016 103


PROJECTS SVG SVG, making it usable everywhere, as outlined in the previous rule.

10 integrate media querieS into Svg Many people don’t know that CSS media queries can be written inside SVG itself:

vector effects A non-

scaling-stroke line has been applied to this speech bubble so it will not change in width when the viewport is resized

8 remember bitmapS Many developers assume SVG can only use vectors, but JPEGs and PNGs can also be applied to an SVG drawing. And so long as you’ve followed my rules so far, those images will be responsive when you add a bitmap via the <image> tag: <image width="1024" height="768" xlink:href="lake-louise. jpg" x="1300" y="150" role="image" title="Crowsnest Pass"></image>

9 conSider adaptive SolutionS Making things go ‘squish’ is only one part of responsive design. What RWD is about, in the larger sense of adaptive design, is presenting appropriate content at all viewport sizes. This can be achieved in a variety of ways. responsivelogos.co.uk provides a series of examples that use SVG sprites, but I prefer to integrate media queries into the SVG to create what I call ‘branding modules’. This approach enables me to add, remove and modify the visibility of components. Read more about adaptive branding modules in my article at netm.ag/adaptive-283. This same technique can be used for diagrams, illustrations, maps and more. In the simplest modules, the CSS itself can be written inside the

<svg xmlns="http://www.w3.org/2000/svg" viewBox="14 82 272 139"> <defs> <style> svg g { transition: 1s; } @media all and (max-width: 90rem) { #drink, #coke { opacity: 0; } } </style> </defs> <g id="coca-cola"> <path d="M109.6… > It’s important to note that the media query can only ‘see’ the element it is inside of: that is, any measurement relates to the element itself, not the page. One potential downside of this approach is that the canvas area of the SVG will always remain the same, relative to the elements inside it. This can result in very small elements at small viewport sizes, framed inside a relatively large canvas area. There are several solutions to this, including resizing the viewBox (netm.ag/resize-283) and scaling up the elements to compensate (vagari. github.io/svg_queries).

concluSion The infinite scalability of SVG is its greatest asset, but a feature that is still somewhat underserved by browsers and vector graphics editors. By integrating these guidelines into your production workflow and communicating them to others in your team, you can create smoothly responsive SVG for the web, making it part of the assets you use in development every day.

adaptive solutions The classic Coca-Cola logo rendered at different adaptive sizes

104

summer 2016


PROJECTS Standards var recorder = new MediaRecorder(stream); recorder.addEventListener('dataavailable', function(e) { // e.data contains the captured data in a Blob // We can set it as source of a video element var el = document.querySelector('video'); el.src = URL.createObjectURL(e.data); }); // Starting to record is easy recorder.start(); // And we can stop, some time after // This will trigger the `dataavailable` event when the captured data has been encoded recorder.stop();

MediaRecoRdeR

Soledad Penadés on the API that lets you record audio and video in your browser Browsers have traditionally focused on consuming and displaying content, which was fine for reading static text. Modern JavaScript and powerful new features such as WebGL and Web Audio enabled us to build creative applications that were also very easy to distribute, but while we were able to generate a myriad of sounds and graphics in real time, there was no easy way we could capture and share them. The available solutions involved using plugins, writing encoders in JavaScript or maybe porting existing ones from C/C++ to JavaScript via asm.js, Emscripten or PNaCl. These weren’t very efficient, usable or even compatible with other browsers, so media capturing never became widespread.

Capturing made easy In contrast, the new MediaRecorder API lets you record media streams with just a few lines of JavaScript code. It also uses a familiar syntax, which makes it really approachable. For example, we could start a webcam stream and record a short video using the following code:

streams, streams everywhere MediaRecorder deals with audio and video streams, which can contain any number of audio and video tracks. It’s fairly similar to the ‘track’ concept found in DVDs, but instead of inserting a physical disc in a device and launching a player, we can obtain streams from webcams, AudioContexts and Canvas contexts. Eventually we’ll be able to obtain streams from other sources, such as the whole screen. This flexibility enables us to build apps that generate video and audio files entirely in the frontend, without a backend server for encoding or processing data. It also means we no longer need to send uncompressed data over the network, which is terribly slow and expensive.

Browser support Right now, Firefox is the browser that implements the most MediaRecorder features. Chrome and Opera currently offer limited support – for example, both have just recently enabled developers to record from Canvas. Edge seems open to implementation, and Safari has been mostly silent. Given that each browser release enables developers to do more by implementing new features, the most sensible option is to apply a good dose of feature detection and progressive enhancement, and start offering MediaRecorder as an option to your users where possible.

PROFILE

API

It will also use native hardware capabilities where possible, for maximum efficiency (read: batteries will last longer).

Soledad (www.soledadpenades.com) is a technical evangelist at Mozilla, where she puts new Web APIs to a test by building real-time audiovisual experiments


PROJECTS Performance Save $19.99

testing coUrse

Free access to Mijingo’s Learn Web Performance course mijingo.com/netmagperf Code: NETMAGPERF

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

ryA n irel A n w: www.mijingo.com t: @ryanirelan job: Founder, Mijingo areas of expertise: Web development, CMSs, education q: how do you take your tea? a: Green!

Performance

Get started with web performance testinG Ryan Irelan outlines why web performance testing matters,

and runs through the tools you need to get started

Video Ryan Irelan’s video course ‘Web Performance Testing’ on the fundamentals of web performance testing. It takes everything in this article and goes more indepth: mijingo.com/webperf

108

Web pages are growing. In 2015, according to the HTTP Archive, the average web page has increased in size by 16 per cent. Two-megabyte pages are common now, and it’s not hard to find even bigger pages. These big pages can be slow and expensive for visitors. Fortunately, we can fight the trend head-on by performance testing throughout the project process. You’re nodding your head saying: ‘Yes! I noticed how bloated and slow many sites are now!’ You’re on board. You get it. But you might have others you need to convince.

Why performance matters Let’s cover three common reasons why it is important to include web performance testing as part of your web development and design project process. The reasons are: SEO, user experience, and bandwidth and server resources. Let’s look into each one a bit more.

summer 2016

search engine optimisation Several years ago, Google announced it was going to eventually include page speed in its ranking algorithm. According to its own research, most users will abandon a page that is slow to load, and not even try to pursue it again – even if the load time is increased only by 100 to 400 milliseconds. If that page was listed at the top of the rankings for a certain search term on Google, that results page would no longer be as valuable to the searcher as it would be if all the results at the top of the list were accurate, relevant and fast. Google prides itself on providing relevant search results, so it needs to consider page speed in its ranking process.

User experience According to Brad Frost, “Good performance is good design.” A slow website or web page isn’t just bad for search engine optimisation; it’s also bad for


Performance the visitors that do make it to your site. A slow site makes it harder for them to find the information they’re looking for and to accomplish the tasks they need to (like transferring money between bank accounts, or buying your products). So web performance is not just a technical topic, it’s a design consideration too. One sure-fire way to keep your user experience from suffering due to poor performance is to build performance testing right into your workflow. If your process is siloed (designers design; developers develop), then break up the verticals and have developers, designers, stakeholders, managers – whoever is involved in the project – talk to each other about decisions that may impact performance throughout the project. Here are some common performance pitfalls that can arise at different stages: ● Web font payloads ● Image requirements (like full-bleed carousels) ● Third party scripts for advertising and tracking

A well-performing site respects server and client resources – both can be expensive Identify the impact of these common pitfalls early on in your project. Ask tough questions about how a certain feature or technology will impact the performance of the site.

Bandwidth and server resources

resources

Further leArning Articles and tutorials on web performance testing have increased over the last couple of years, so there is plenty out there to read. Here are some that I like and would be helpful to anyone getting started. planning for performance alistapart.com/article/planning-for-performance An excerpt from Scott Jehl’s Responsible Responsive Design that gets technical on how we can plan for better performance. how users perceive the speed of the web netm.ag/irish-283 Paul Irish’s Fluent 2015 keynote explores the real implications of poorly performing websites. Design decisions through the lens of a performance budget netm.ag/yesenia-283 An Event Apart talk by Yesenia Perez-Cruz on how to hoist performance considerations up into the design process. setting a performance budget timkadlec.com/2013/01/setting-a-performance-budget Tim Kadlec is an important contributor to the web performance testing community and this is a seminal article on performance budgets and testing. Webpagetest.org quick start guide netm.ag/quick-283 Right from the WebPageTest documentation is this step-by-step guide on how to run your first test and understand the metrics.

A well-performing website respects both server and client resources. Both can be expensive and we should always aim to reduce the amount of resources our websites require to run. In the past, we might have implemented server-side fixes for a poorly performing website. We’d increase server memory, offload assets to a CDN, or move the database to a dedicated server. But all these solutions can be expensive. Sometimes they’re necessary, sure, but often they are just an expensive patch for the symptoms of performance problems. On the client side (the computer or mobile device your visitor is using) is where some serious implications can arise. We can’t buy our visitors faster devices or increase their data plan. But we can eat up that valuable data if our homepage is delivering a whopping 2 or 3MB payload.

summer 2016 109


PROJECTS Performance

in-dePth

AutomAting WebPAgetest tests In addition to running WebPageTest tests manually, you can also automate them and include them in your standard development workflow. If you use Grunt to build your projects, you can use the grunt-perfbudget module by Tim Kadlec (netm.ag/kadlec-283), which will automatically run tests according to parameters you specify in your Gruntfile.js file. Kadlec’s module will allow you to test against a performance budget, which you specify in the Grunt task. You can test against public WebPageTest servers or against a private instance you run yourself. Another option for automating your WebPageTest tests is WebPageTest Bulk Tester (netm.ag/davies-283), a Google Spreadsheet by Andy Davies that feeds WebPageTest.org your testing scenarios and records the results back in the spreadsheet. Leveraging the script-ability of the Google Spreadsheets, you input your target URLs and specify scenarios you want to test. The tests are kicked off right from the spreadsheet and the results are recorded for you to analyse later. The tests consist of a URL plus a scenario. The scenarios allow you to specify connection speed, location, web browser, number of runs, video generation (of the page render), and whether you want to only test the first view, or first and second views. WPT-Bulk-Test supports either the public WebPageTest instances or a private one you run yourself. Before you start your own tests, you will need to make a copy of the read-only spreadsheet and save it to your own Google account.

Data costs WebPageTest’s companion site helps us understand how our pages look in terms of cost of mobile data around the world

performance metrics There are dozens of performance metrics you could use to determine the speed of your site. There are vendor-specific metrics (like Google’s PageSpeed Analyzer), environment-independent metrics (those that don’t change between local development and the server), and combo metrics (metrics that combine several metrics to come up with a data point). Every project might have a different set of performance metrics, but here are some important ones we want to keep an eye on throughout the project process: ● Page weight: The size of the full page payload in KB or MB ● Total number of requests: How many separate requests the web browser has to make to completely load the requested page ● Time to first byte (TTFB): The amount of time it takes the server to return the first byte of data to the client The first two metrics listed here are environmentindependent. Your page weight and total number of requests should not change, regardless of if the site is running on your laptop or on the production server. The third metric, TTFB, is only valuable when you measure it in a production or simulated production environment. Its value will change depending on the device your site is being run on, and the only TTFB we care about is the one our visitors will experience. In the Further Learning boxout on the previous page, I’ve included some links to additional information about metrics so you can explore further.

Webpagetest Bulk tester This Google Spreadsheet feeds WebPageTest.org testing scenarios and records the results

perceived performance Technical metrics are vital, but in addition to these it’s also important to continuously evaluate

110

summer 2016


Performance the perceived performance of your website. This is a measurement of how fast your website feels when a visitor loads a page. You might not be able to measure perceived performance with a single metric, and the perception of performance may vary between users, but there are still some ways we can test for it. In a moment we’ll review WebPageTest, one of the core tools we use for web performance testing. WebPageTest has two important metrics that help us gauge perceived performance: ● Start render: The time it takes to go from a blank white browser window to the first page elements showing ● Speed index: This is similar to start render, but a metric specific to WebPageTest.org. It is a numerical score calculated based on other metrics – low scores are better

We have what we need to test for performance right in our favourite web browser There are other ways to test perceived performance, but start render and speed index are two quality metrics with which to begin.

testing tools When it comes to testing for performance, the great news is that we have what we need right in our favourite web browser. Add to that some additional web-based tools, and there’s no need to use anything else.

Browser developer tools The browser testing tools are part of the developer tools that come with each browser. If you’ve ever inspected the markup of a page, adjusted CSS to test an implementation, or viewed the console log for errors, then you’ve used the developer tools. Whether your preferred browser is Safari, Chrome, Firefox, or Microsoft Edge, you have the tools you need for testing.

Webpagetest WebPageTest, an open source project currently funded by Google, is the most popular way to performance test your web pages. It can run multiple tests against different browsers and connection speeds. You pass in a URL to the page

you want to test and WebPageTest.org spits out an in-depth report of how your page performs. If you need or want to host your own instance of WebPageTest, then you can download and run the source code. To find out more, take a look at the boxout opposite.

test results The results of a test on Google PageSpeed Insights

pagespeed insights Google’s PageSpeed Insights is a simple, helpful performance testing tool that tests the performance of the submitted page for both desktop and mobile experiences. It is also results-focused, in that it provides you with information on how to fix your site, based on the test results. PageSpeed Insights returns a score from zero to 100 – it considers 85 or above to be acceptable or well-performing. The tool is very opinionated about what it measures and how it measures it; the only aspects of performance it cares about are time to above-the-fold load, and time to full page load. PageSpeed returns a report that contains two tabs: mobile and desktop. You’ll get a speed score and a user experience score for each. One thing I really like about PageSpeed is that it also includes – in as much detail as possible – advice on how to fix the issues it finds. Users can just click on the ‘Show how to fix’ link to find out more about how to improve the test result for that particular metric.

go forth anD test By making testing a standard part of our project process, we will become more aware of how our design and development decisions impact the website performance. When we work together, across disciplines, to minimise the decisions that negatively impact performance, we can create lighter and faster pages. After all, a fast and lean web page is the ultimate nod of respect to our website visitors.

summer 2016 111


Hosting Partners

Key hosting directory

contact us To advertise here, contact our sales team: +44 01225 68 7832 chris.mitchell@futurenet.com

Featured Host

Netcetera provides hosting

“We have several servers from Netcetera and the network connectivity is top notch - great uptime and speed is never an issue. We would highly recommend Netcetera.” Suzy Bean

Offering reliable website

from one of the most energy-

hosting, dedicated servers,

efficient datacentres in Europe,

colocation and cloud solutions,

all powered by green energy.

Netcetera has a large portfolio

It offers everything from reliable

of green, zero-carbon solutions

low-cost hosting for a single site

for businesses of all sizes.

right through to complex cloud,

Customers can choose from its

racks and managed IT solutions.

fully managed cloud servers,

One of its most popular products

Linux and Windows for SMBs

is its Managed Cloud, designed

and a fully managed cloud

to help SMBs get the most from

solution for WordPress websites,

their website, on their own cloud

to help them fully utilise cloud

server. Server monitoring comes

technology without the hassle.

as standard for Netcetera’s Cloud

And with server monitoring as

and Dedicated server clients

standard and a full migration

– something it believes should

service available, Netcetera

be included in the price of the

has made the switch to better

hosting it provides.

hosting really easy.

coNtact 0800 808 5450 / sales@netcetera.co.uk

www.netcetera.co.uk WHat Netcetera oFFers ● Managed hosting: A full range of solutions for

expert tip

cloud tech tip ... If you’re going to fully utilise cloud technology, before deciding on a service provider, ask whether monitoring comes as standard and whether management is included in the price. A fully managed cloud can make your business fly; an underutilised cloud will be a waste of money.

a cost-effective, reliable, secure host

● Dedicated servers: Single server through to a full racks, with free setup and a generous bandwidth

● Cloud hosting: Linux, Windows, hybrid and private cloud solutions with support and scaleability features

● Datacentre colocation: From quad-core up to smart servers with quick setup, and all fully customisable


Advertisement catalyst2 catalyst2 is an award-winning, fully managed hosting provider to organisations across the UK. It specialises in very high-availability hosting and exceptional customer support. Contact the team today for a quote.

coNtact ● 0800 107 79 79 ● sales@catalyst2.com

www.catalyst2.com

cyber Host Pro Cyber Host Pro has been providing UK web hosting services for over 15 years. It offers super-fast SSD, high-bandwidth web hosting, and is optimised for WordPress. Visit the website to view the Website hosting, Reseller hosting, Cloud and Dedicated servers – plus get a 20% discount for life (code: NETMAGLIFE).

coNtact ● 0845 527 9345

www.cyberHostPro.com

Heart INterNet As one of the UK’s leading web hosting authorities, Heart Internet focuses on designers, developers and technically adept businesses. It builds on our four tenets – speed, reliability, support, and security – to create award-winning solutions for over 500,000 customers.

coNtact ● +44 (0)330 660 0255 ● sales@heartinternet.uk

www.Heartinternet.uk


PROJECTS Accessibility

AccEssIbILIty

Asking About gender Chad Gowler explores when it’s okay to ask about your users’ gender and how to do it the right way We ask our users to give us a lot of data about themselves and we have a responsibility to make sure we do so in a sensitive and inclusive manner. One of the pieces of information we ask for a lot is gender. We live in a society based around the idea that gender is a radio button of male or female. However, this does not apply to everyone – between 1 and 5 per cent of the UK population is gender variant. This includes people that are transitioning or have transitioned between genders, as well as those that have a gender identity that is non-binary (neither male nor female). Some people are genderless. These users may have difficulty answering a traditional gender question.

When to ask

hoW to ask There are ways to make a gender field more inclusive. One option is to add ‘Non-binary’ as a third option to your radio button – although be aware that this still might not cover everyone. Avoid using ‘Other’ or ‘Transgender’, as many trans and non-binary people feel put off by these. The ideal approach would be to supply a text field for everyone to fill out however they like, although it is difficult to get information from these. A good compromise is to include ‘Male’ and ‘Female’ checkboxes, then a text field for everyone else. This way, users can put their gender easily, and you can still get statistics out. But remember, the easiest way to be inclusive is not to ask unless you absolutely have to.

PROFILE

Before we think about how to ask about gender, we need to consider if we should be asking for this information at all. Monitoring diversity is a good example of when asking about gender is appropriate – for example a tech conference may need to collect this data to find out if its outreach programmes are working. Alternatively, you may need it for hooking up to a third party, such as a public sector service. In cases like this you need to make it absolutely clear to the user who you are sharing this information

with and why. You should avoid asking about gender for things like advertising. It’s also important to avoid making assumptions about a user, no matter how sure you are that gender matches up to a particular attribute. Gender and gender reassignment are protected characteristics under the Equality Act, so be sure if you use gender to inform the services you’re offering that you are not breaking the law.

114

summer 2016

Chad (@kitation) is a web developer based in Sheffield. She specialises in empathy and inclusivity, and talks about gender in conferences all over the UK (www.kitation.co.uk)


Projects Build an offline page with Service Workers Make a hi-fidelity prototype in Atomic Keep code in sync with PatternPack

9000

9012

Create interactive charts with Ionic 2 10 golden rules for responsive SVGs Get started with web performance testing

0800 1 777 000

Net 2016 283 summer  
Read more
Read more
Similar to
Popular now
Just for you