Issuu on Google+

free!

3-month trial worth $75

Create unlimited prototypes

The voice of web design

Issue 282 : August 2016 : net.creativebloq.com

How to build super-fast progressive web apps

new features in angular 2

Build apps with the allimproved framework

10 essential tips for atom

Master GitHub’s open source text editor Features

Create responsive CSS layouts for real-world work


Welcome

Welcome

editor’s note

Progressive web apps are the next big thing. They combine the best of mobile sites and native apps and are fast, secure and responsive. They are also a nifty solution for those who want to access the web from their mobile in places where connectivity isn’t great. So it’s no surprise that one of the first progressive web apps was built by Flipkart, India’s largest ecommerce site, and has resulted in a 70 per cent increase in conversions. Progressive web apps are being embraced by Google, alongside other big players including Mozilla and Opera. It’s a very exciting movement. As Remy Sharp puts it: “Even though native hacks will always be ahead, the web always gets there.”

So this month we invited Chris Mills, senior technical writer at Mozilla, to give us the low-down on the new technologies that make progressive web apps possible, and how to get started. This issue also comes with three free months of InVision’s Professional plan, which enables you to build unlimited interactive prototypes. Flip to page 90 to redeem. There, you’ll also to find out how to use InVision’s new suite of plugins, Craft, to design with real data and save time while doing so. Here’s to the future!

Oliver Lindberg, editor @oliverlindberg

Featured authors chris Mills

sara WachterBoe t tcher

Mat Vogels

K ace y coughlin

Chris is a senior technical writer at Mozilla. From page 68 he tells us how the progressive web apps revolution is bringing the perks of native apps to the web w: developer.mozilla.org t: @chrisdavidmills

Sara runs a content strategy consultancy and wrote Design for Real Life with Eric Meyer. On page 26 she analyses why delight is a bad goal for web designers w: www.sarawb.com t: @sara_ann_marie

Mat is a designer and leads the education efforts at Webflow. From page 76 he breaks down how to get started with the Flexible Box Layout module w: matvogels.com t: @matvogels

Kacey is an UI engineer on the internal tools team at LinkedIn. On page 94 she explains how to tackle technical debt within an organisation w: kaceycoughlin.com t: @kaceykaso

august 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

Amy Abt, Cemal Cebi, Bjarne Christensen, Matt Cooper, Kacey Coughlin, Ian Devlin, Matt James, Sam Kapila, Fabrice Lejeune, Chris Mills, Raluca Mircea, Rune Nørager, Chris Perry, Lukas Ruebbelke, Alicia Sedlock, David Sloan, Richard Thompson, Ray Villalobos, Mat Vogels, Sara Wachter-Boettcher, Clark Wimberly

art ContributionS

Linzie Hunter, Ben Mounsey, Tory Putnam, 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 14 auguSt 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

july 2016

APPS uSED

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

PAPER

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

TyPEfACES

antonio, Share tech, merriweather, titillium Web


contents Issue 282 : August 2016 : net.creativebloq.com

FeeD

FEED

side pRojecT of The monTh 16

helena price‘s techies project celebrates minority groups in the tech industry

clienTs fRom hell

17

Beyond piXels

20

need lisT

21

eVenT RepoRT

23

one forward-thinking client has plans to revolutionise web design

chris perry has built a reputation as the man to fix your guitar in Riyadh

the stuff we want this month, including a beautifully reimagined pinball app

woRkspace

18

amy abt gives us a tour of the renovated industrial warehouse in Minneapolis that is home to Westwerk

Ruth hamilton reports from the first ever Render conference in oxford

voices The downside of delighT

26

sara wachter-Boettcher on why creating delight should never be your priority

psychology in design

28

Rune nørager considers why psychology is absent from our design process

2 sTeps To BeTTeR pRojecTs 37 Bjarne christensen talks through Stupid Studio’s novel billing plan

Big QuesTion

41

educator and author donna lichaw shares her insights on story-first design

6

august 2016

inTeRView

32

We chat to Mule Design co-founder erika hall about being uncomfortable, misused insights and rethinking research

38

What are the biggest barriers to innovation in the tech industry? We asked the pros

Q&a

VOICES

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

alicia sedlock shares her favourite new websites, including one for an art exhibition that lets its users plays with structure

RegUlaRs neTwoRk

8

eXchange

10

the latest mail, tweets, posts and rants

erica heinz, josh clark, Ross Bruniges and dan edwards share advice

showcase

free InVIsIon

prototypes see page 90

design challenge

52

focus on

57

pRofile

58

how we BuilT

64

three designers mock up bike shop sites

sam kapila unpacks grid systems

Boundary-pushing digital agency jam3

a 3D world for a regeneration project

PRoJects Rwd foR enTeRpRise

84

cRafT and skeTch

90

Technical deBT

94

head To head

97

aTom

98

matt james on how to deliver a great site when you can’t use the usual resources

FeatURes The fuTuRe of weB apps

clark wimberly walks through how to add data to your Sketch designs with Craft

The incRediBle

68 poweR of fleXBoX 76

chris mills walks through the technologies bringing the power of native apps to the web

anatomy oF a comPonent

JUst a class @metaData

as support for flexbox grows steadily, mat Vogels explains how to get started with this new layout module

PrOjECt

eXploRe The new feaTuRes in angulaR 2 108

lukas Ruebbelke gives us a tour around the latest version of this framework html css DiRectives selectoR

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

kacey coughlin explains what tech debt is and how to tackle it head-on

Webpack versus Browserify

Ray Villalobos runs down 10 top tips for working with github’s text editor

fonT sTacks wiTh sass

102

weB sTandaRds

106

accessiBiliTy

114

fabrice lejeune shows you how to build an efficient font stack with Sass

ian devlin on semantics in htMl

david sloan on designing accessibility

august 2016 7


Mail, tweets, posts and rants contact us

@netmag

/netmag

netmag@futurenet.com

net.creativebloq.com

medium.com/net-magazine

You can read Chris’ post at netm.ag/robinson-282, and if you want to get involved in an upcoming Design Challenge, drop us a line.

no more Agencies

A chAllenging Blog post net: Many thanks to Chris Robinson for his blog post about putting together his Design Challenge entry for a brewery site, which he managed to write while balanced on his wife’s exercise ball and (possibly) covered in his baby son’s wee. A man of many talents.

net: With recent highprofile studio closures and in-house teams becoming more and more common, many are speculating we may be witnessing the demise of the web design agency. We explored the issue in a feature, which we recently republished (netm.ag/agency-282). Here are some of your thoughts: In my opinion, 80 per cent of small businesses can now get by with a simple Squarespace or WordPress site. The other 20 per cent want a hip brand, and that’s where an

No more agencies Tech journalist Tanya Combrinck’s article on the demise of web design agencies prompted plenty of insightful comments

agency can not only help but is needed in my opinion. Fortunately for us, most of those 20 per cent are located in Silicon Valley. But when a tool like WordPress or Squarespace comes out for mobile or web app development, combined with the massive influx of code-literate people to the workforce, I think development timelines and costs will plummet and that will mark the true end of the web agency, with branding and marketing agencies simply having a few designers and coders on the team.

Andy Brewer, Santa Cruz, US

Challenge blog Find out the thought process behind Chris Robinson’s challenge entry in his blog post at netm.ag/robinson-282

8

august 2016

Clients are always likely to need agencies for two purposes: development

because their resource requirements are subject to spikes when they periodically need to redevelop their infrastructure; and maintenance and operations because they need insurance against staff turnover and institutional capture (the problem that occurs when the ambitions and limitations of key staff members end up driving the corporate agenda).

Alex Morrison, Brighton, UK

“Specialising in a particular sector is one answer” is the hidden gem in this article. The web design industry is being squeezed at both ends, and surviving in the middle is all about positioning and niching down.

James Joseph Finn, NY, US


Network tHE PoLL

What is the most common reason for going over-budget? Uncertain scope 44% Lack of clearly defined goals and planning

Endless meetings 2% All talk, no action

Sign-off delays 6% Red tape can cause a project to get stuck

Drama 3% Clashes of egos and attitudes

Lack of communication 5% A good workflow needs everyone to be on the same page

Outdated systems 3% Can you navigate the labyrinth of legacy systems?

Poor estimates 37% It was unrealistic from the start

From our timeline

What’s your biggest CSS bugbear? Last row of flex items not stretching the entire row when justifycontent isn’t default. @thebru1905

Putting padding on a div and wanting a border to be on the inside of the padding not outside the div. @Mandeee_J

Inconsistent form styling capabilities across browsers @James_M_South

There’s a pseudoelement for first-letter, but not for last-letter. @GarettCreative

‘column-gap’ accepts any valid length … except percentages. @revoltpuppy

How you can’t stack background images with rgba(). @muzzlehatch_

min-width has a default value of 0, but maxwidth has a default of ‘none’. Why can’t min-width be more like max-width? :( @AshConnnolly People who don’t use appropriate selectors and just put classes everywhere! CSS can do so much without JS when understood. @MartinDarksnow Floating elements does not add to the stack height and you have to use display inline-block with font-size hack instead. @philtomlinson83

cooL stuff We Learned this month TOO maNy TyPEfaCES

Conventional wisdom tells us not to use lots of different typefaces, but Bethany Heck has been producing great designs that do exactly that. She explains that the rule is likely there to stop designers using varied type as a crutch to add visual interest to an otherwise dull design; but if your design principles are sound then why worry about this? netm.ag/type-282 HaPPy COg STarTEr fiLES

There’s no ‘right’ way to kick off a web project, but some ways are righter than others. Developer Allison Wagner shares the ins and outs of Happy Cog’s frontend toolkit, giving an insight into its naming conventions, folder structure and overall approach to starting a new project. netm.ag/start-282 THE wEb Of THE fUTUrE

Flexbox and Grid are transforming the way we do layout on the web. In this month’s cracking episode of the The Web Ahead, host Jen Simmons is joined by Jeffrey Zeldman, Rachel Andrew and Eric Meyer to discuss how it’s all going to pan out. thewebahead.net/115

august 2016 9


send your questions to netmag@futurenet.com This monTh feaTuring... Erica HEinz Erica is a freelance UX and product designer working out of Brooklyn, New York w: www.ericaheinz.com t: @ericaheinz

Practical advice from industry experts

QUESTION OF THE MONTH

Why are many apps and websites throwing away the hamburger icon? Keshav Soni, Chennai, IN

JosH clark Josh is a mobile/IoT designer and author of Designing for Touch w: www.bigmedium.com t: @bigmediumjosh

ross BrunigEs Ross is long-term web developer in the web standards community w: www.thecssdiv.co.uk t: @rossbruniges

Dan EDwarDs Dan is creative director at No Divide and the co-founder of oozled.com w: www.danedwards.com t: @de

Increased engagement When Facebook moved its key navigation options out of the hamburger menu’s drawer and into the tab bar at the bottom of the screen, it saw big increases in engagement

JC: Despite its broad use, the icon itself is still opaque to many users. Studies show that a button labeled ‘Menu’ attracts 20 per cent more use than the hamburger. But even more problematic is the menu itself. Tucking links into an ambiguously labeled drawer flatlines engagement; people aren’t motivated to explore what’s inside. Key actions should always be visible in the canvas of the page. It’s OK to keep that hidden menu as a contingency, but better to make it obvious in the page body where to go next. Business

Challenges What’s been your biggest challenge and how have you overcome it?

Mark Finn, Newcastle, UK

De: Cash flow. At the end of the day, you need to make money – especially once you expand to more than just you.

10

august 2016

Ensuring we book work in well in advance, and keeping to schedule are things we’re constantly improving. We’re now actively seeking new clients, rather than waiting for the phone to ring, keeping on top of our runway to ensure we’re never in the position that we can’t pay the bills the following month.


Q&As

3 simple steps What are some of the best practices for awesome website performance? Mark Anthony, Atlanta, US RB: There are three key things to focus on:

touch corners In Windows, toolbars slide into view with gestures from the side and bottom of the screen, accommodating the resting location of hands on hybrid keyboard/touch laptops and tablets

Design for touch

uX

Corners anD eDges

researCh phase

Do you find corners and edges a problem on touchscreen laptops as users grab there to adjust the screen angle?

When do you know it’s time to move out of the research phase in a uX project?

Adrian Roselli, Buffalo, US

JC: Corners – especially bottom corners – are actually the designer’s friend. People who use keyboard/touch hybrids tend to rest their arms alongside the keyboard, thumbs resting at screen corners. When you cluster frequent controls and gestures in those bottom corners, people can just flick their thumbs without even lifting their arms – an ergonomic win! But yes, accidents happen with touchscreens – just look at all the calls we make from pockets. The best solution is to offer graceful recovery of mistakes. Undo is invaluable.

Sam Baker-Salmon, Brooklyn, US

eh: It depends on the type of research. Competitive research should of course cover all competitors. Expert, individual or group interviews can usually end when you see a pattern. User-led discovery, immersion, or parallel inspiration needs up-front scoping. In lean/agile projects, the schedule decides. In looser projects: pause whenever you have uncertainty (get clarification!) or a mess (organise and aggregate!). Stop when you see patterns. 80 percent of ‘done’ is a good place for review – the last 20 per cent of anything tends to drag. Business

Performance

lazy loaDing

Making the Move

how do i lazy load responsive images?

how do you transition from freelance to agency without losing clients?

rB: This is fiddly if you’re using the picture element or srcset attributes on an image, as you’ll have to do a fair number of JS calculations to work out which one you want to load. There is an open source library called lazysizes (netm.ag/lazy-282) that looks to do a lot of the hard work for you. In the future (or now if you’re happy only supporting Chrome) you could use preload (www.w3.org/TR/preload). This allows you to define custom loading logic like lazysizes, but does so in the browser with rather a lot less code.

De: I’m going to assume you mean expanding from a one-man band to an agency here, which is exactly what I did. When Ryan Taylor and I launched No Divide, both of us finished the projects we were working on, and agreed any ongoing work was going to be brought into No Divide. As far as our clients were concerned, nothing changed, they just got a stronger team. We honoured our existing rates for six months and were transparent about all our reasoning. Good clients will always stick by you.

Chris Laursen, Brooklyn, US

Joanna Kosinska, UK

OptImIse Images

Images are probably the heaviest part of your site, so use the right one for the job (photos should be JPG, graphics PNG/SVG). Optimise them in your editor before saving and strip meta-data before they hit your user’s browser.

Lazy LOad cOntent

Load what you need, when you need it. For example, lazy load images so they only appear when they come into view on the page.

.

InvestIgate fReeBIes

New specs like preload and HTTP/2 are not available to all users, but that doesn’t mean they should be ignored. Keep a keen eye on Can I Use and remember that today’s performance best practices may become unnecessary.

august 2016 11


exchange Q&As uX

riCh experienCes What design process should we use to turn desktop apps into rich mobile experiences?

Sanat Patel, Boston, US

JC: Don’t try to convert a desktop experience into mobile. It’s far easier to start with an ideal mobile experience and build out, than to squeeze in. Identify the core functions of your site and then design mobile flows that embrace those essentials. Definitely keep secondary features and content, but consider pushing those off to secondary screens. Every mobile screen should have one or two primary actions, but allow you to drill deeper for more complex detail.

transitions When freelancers Dan Edwards and Ryan Taylor formed No Divide, many clients stuck with them

accessiBle uX

navigation

Design for touch

how do you convince your boss who wants 38 navigation items that five will do?

gesture MeMory

eh: Approach persuasion as its own design challenge. First, try to see it from their perspective: visibility does yield taps/clicks. Listen, research and ask questions until you agree on the business and user goals. Next, mentally zoom out, and position the navigation within each user flow. Prioritise the ‘red routes’: show how a simpler navigation optimises conversion in each, and a busier nav distracts. Finally, let the users speak for you. User tests can reveal hard truths from an outside angle. People need to reach conclusions in their own way. Lead; don’t force them down the path.

Francois Jordaan, London, UK

Dan Beazley, AU

Business

expanDing Work is coming in, you’re busy and think you could bring on another developer to help. how do you expand successfully?

Paul McKay, Leicester, UK

De: First off, be 100 per cent sure you need them. Run at 150 per cent for a while and see how much you really need this new employee. Offer a three-month probation period with achievable goals – if they are the right person, you’ll know immediately. And of course, if they are, then do everything you can to keep hold of them. Happy employees = great work = happy clients = more work.

12

august 2016

What are your favourite techniques to help users discover and remember gestures? JC: There are two kinds of gestures. Direct gestures create the illusion of physical cause and effect: pinch to zoom, or swipe to pull out a drawer. For these, subtle animations and visual cues are best. When a drawer peeks into view or a carousel slowly advances, your visitors subconsciously whisper, ‘Hey that moves, maybe I can move it, too’. Abstract gestures, like a three-finger swipe, are faster alternatives for things that would otherwise take a few more button presses. The best approach here is to let people use the slow way first and, after a few times doing that, reward them by demonstrating the shortcut gesture with an overlay or animation.

‘check’ is my cue for accessibility tests. Does it pass the squint test? Device tests (including screen readers)? These answers then circle back to more creative research and accessible design. Performance

BuDget setting on what basis should i set a performance budget?

Benjamin Read, Hatfield, UK

rB: If performance is important to you, then go ahead and set one now – it can be fairly hard to retrofit values once a product has been designed and hard work gone into coding it. The main rule is that performance shouldn’t just be something that developers have to adhere to in spite of growing pressure to achieve results. Performance is about weighing up the cost of a new feature, design flourish or library choice, together as a team.

accessiBle uX

Business

WorkfloW

BuilD it up

Do you have a process you use to ensure accessibility is factored into the uX flow?

What should we build up before making the leap into our own web business?

eh: I’ve found that truths about sites getting sued for inaccessible websites are pretty convincing for getting business to pay attention to accessibility. Many accessibility tactics (e.g. HTML semantics and attributes, file naming) can also be justified by scalability or SEO benefits. In the think-make-check cycle of lean UX,

De: I’d say the absolute essentials are: an existing client (or clients) that will guarantee you a minimum amount of work, a buffer in the bank (maybe three to four months), a strong portfolio of work (but not just a catalogue, your very best work only), and a willingness to learn and get creative.

Adrian Roselli, Buffalo, US

David Darnes, Bristol, UK


DOMAINS | WEBSITES | HOSTING | CLOUD SERVERS

xxxxxxxxxxxx

SAFEST OF THE

SAFE! INCLUDED

HOSTING? ONLY THE SAFEST!

SSL CERTIFICATE

HIGHEST SECURITY EXCLUSIVE TO 1&1!

1&1 provides the highest standard of protection available! Show your online visitors that their security is your top priority with: SSL Certificate included Geo-redundancy Certified data centres

1TRIAL TRY FOR 30 DAYS

1MONTH SHORT TERM CONTRACTS

DDoS protection

1CALL

SPEAK TO AN EXPERT

0333 336 5509 Visit 1and1.co.uk for full product details, terms and conditions. 1&1 Internet Limited, Discovery House, 154 Southgate Street, Gloucester GL1 2EX.

december 2013 13

1and1.co.uk


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

Helena Price‘s Techies project celebrates minority groups in the tech industry

BeyONd PiXeLS

Chris Perry has built up a reputation as the man to fix your guitar in Riyadh

20

CLieNTS FROM HeLL

17

Need LiST

21

An enthusiastic client has some ideas to revolutionise web design as we know it

The stuff we want this month, including a beautifully reimagined pinball game

WORkSPaCe

18

eveNT RePORT

23

amy abt gives us a tour of the renovated warehouse that is home to Westwerk

Ruth Hamilton reports from the first ever Render conference in Oxford

august 2016 15


FEED

Side project

TecHies

Helena Price’s photo project tells the stories of underrepresented groups in the tech industry Side project of the month net: What is Techies (www.techiesproject.com)? HP: Techies is a photo project that explores tech in 2016 through the voice of underrepresented people in the industry. So that includes women, people of colour, LGBT, folks over 50, disabled, you name it. Basically no straight white dudes. Info job: Photographer w: www.helenaprice.com t: @helena

net: What prompted you to embark on the project? HP: I worked in tech for several years. Most of my work is in Silicone Valley and I follow the industry closely. In general tech is in a weird place right now. Tensions are high, conversations about diversity and inclusion have kind of risen to a boil, and at the same time there are people that still believe that these problems don’t exist, and that tech is a perfect meritocracy. So I wanted to create a project that challenges all of those assumptions. net: How did you launch the project? HP: I did a call for subjects on Medium and I had 500 people apply in two weeks, which I whittled down to about 100 people. In general I focused on folks that came from backgrounds you wouldn’t expect a typical

16

august 2016

techy to come from, people who’d been through massive obstacles to get into Silicon Valley. net: What problems did you come up against? HP: It was a really, really intense three months. I worked at my desk for 15 hours a day, ate every meal at my computer, and didn’t leave my house. It was also emotionally intense getting to know 100 people’s intimate stories and their hardships. But I think the work is important enough that it was worth it. net: Do you have a favourite subject you featured? HP: One was February Keeney. She’s an engineering manager at GitHub who spent her first decade or so in tech as a man, and once she transitioned became really acquainted with the privilage that she once had and what she lost. There’s also Nancy Douyon, who had a rough upbringing in illegal immigrant communities in the states, but is now doing amazing research work at Google. There’s Kent Brewster who’s worked in tech since 1978 and can remember the day that agism became a thing. Those are just a handful of people. I have a hard time whittling it down. net: Did you learn anything that surprised you? HP: There’s a lot of things I expected to hear. There’s the things that when we hear it, it makes sense. Like, there’s discrimination in tech. But then when you start to hear it over and over and over again through the lens of different people’s experiences, that’s when it becomes really profound.


Feed

how to

Get useful user feedBack We asked our followers how they get feedback to explore whether their site or product is serving its users in the way they want

Use the tools

Browser-ception

Exclusively for net: the latest in a series of anonymous accounts of nightmare clients Clients from hell I’m a freelance web developer, and I have a client who is notorious for requesting absurd features. One day I received an email with this request for his website. Client: Can you code a frame in our portal so that users have a browser window inside a browser window that uses the person’s local ISP bandwidth instead of the web server?

Illustration: Sébastien Thibault sebastienthibault.com

My guess at this point is that he is asking for an iframe on one of his pages, but I call him to check. Me: Can you explain exactly what you need? Client: We need a frame on the website that is a browser that users can go to other websites in. It needs to go through the user’s ISP, though. Will you check if there is a plugin for that? Me: I don’t believe there is anything like that exactly. What I could do is add an iframe that allows you to display a webpage within a webpage, but it wouldn’t be a full web browser. Client: We really want the full features of a web browser in the frame. Me: OK, but why?

Client: We want to offer a full desktop experience on our website. We want users to feel like they’re using a full computer from our website, like when I use a virtual desktop. Me: … Client: I think this will blow people’s minds – a full computer in their browser. But we need to use their bandwidth instead of ours, because it’s going to get expensive. Me: … Client: I think this is going to be huge. Me: … Client: So you’ll research if there’s a plugin? Me: Sure. I just ended up letting the client know there is no such plugin, and that while I could create one, it would be a very large project. It didn’t take long for him to forget this bad idea. Of course, that’s because he thought of a new, more exciting bad idea – but that’s another story.

clientsfromhell.net

‫@‏‬bluemwhitew recommends @bugherd’s feedback form, but triggered from a footer link so it’s less intrusive. Meanwhile, @mrcodella notes that ZURB’s Notable project tracking tool is good for collecting customer feedback and “has a ton of different test formats”. @lapierrej takes a different route – he prefers to build an integrated feedback process into the app itself.

live interviews Impersonal forms don’t always reveal the right information. “Thoughtful, in-depth interviews” are what’s needed, according to @kayleighkarutis. “Surveys only go so far – sometimes you need to really dig in, in person.” @dbomb concurs that “actually talking with them” is necessary to get the most useful user insights.

watChing people For others, even a good grilling isn’t enough. Surveillance is the way to go. “Watch what users actually do,” says @alpower. “Do not believe what users say they do, as memory is fallible and people say what they think you want.” @GarettCreative suggests encouraging people to participate by offering something back, such as an ebook or insider tips.

august 2016 17


4

1

2 3

5

The renovated warehouse basement Westwerk calls home has been split into areas for work and play. amy abt explains workSPACE Westwerk is a Minneapolisbased digital design agency founded in 2005 by Dan West. We’ve spent the last decade producing meaningful results for clients in nearly every industry, from startups to Fortune 500s. When we moved into our current office in 2012, we knew it would be one of our biggest challenges to date: converting a 4,500 squarefoot, raw warehouse basement into a warm, inviting place to work. Led by Dan’s twin brother and agency director Dave, we spent the next 145 days crafting the space by hand. And when I say ‘we’, I really mean it. Westwerk employees, friends and family all had a part

18

august 2016

in its construction. The result is a vintage-inspired office that combines all the modern amenities of a digital agency with the oldworld charm of a turn of the century warehouse. Our space is subtly divided into two distinct areas: one for work and one for play. On the work side is the main ‘boardroom’ decked out in client-branded skateboards [1]. This area features hundreds of pieces of wood panelling [2], each of which has been hand-dipped in one of six different stain colours, exemplifying the care and detail we bring to all of our projects. Whenever we win a bid for an exciting new project, we channel

our inner Will Ferrell and give the office cowbell [3] a hearty ring. On the play side of the office, a shuffleboard table, pool table, and some of the cutest office dogs anyone will ever have the pleasure of petting help keep spirits high and encourage team bonding. We’re big foosball fanatics, so every Friday a fierce battle ensues to defeat the reigning champs and claim the revered foosball trophy [4]. After the games, we like to put aside our rivalries and relax with some beers from client Rush River Brewing [5], which are always on tap in our fully-stocked kitchen. Finally, no work week would be complete without a free massage from our regular masseuse, who works her magic to keep our team happy and healthy. ProFILE

Werk hard, play hard

Amy (centre) is VP of marketing and accounts at Westwerk (westwerk.com), an agency based in Minneapolis and driven by smart design


FEED

Beyond pixels

stuFF i like

k e vin loz andier UX engineer

@KevinLozandier

ImgIx With imgix, representing content in accommodating and performant ways on the web becomes fun again! With this service I can significantly minimise the footprint of images for end users, provide better fallbacks for emerging web standards, and accommodate various art direction concerns all at once! www.imgix.com

axe Accounting for accessibility isn’t easy. To make well thought-out concessions for those who need assistive technologies to understand content, I turn to aXe. It provides me with invaluable recommendations before I start improvising. www.deque.com/products/axe

20

august 2016

Fixing guitars

This month … Chris P Ś erry uses his guitar-fixing skills to bring Western music to expats in the Middle East bEyOnd PIxELs I’ve been working in IT in Riyadh for the last 16 or so years. Initially I was a systems developer, and introduced CSS to my team – heady days. Over recent years though, I’ve mostly worked as a project manager, primarily delivering infrastructure. It’s through this rather circuitous route that I came to be repairing guitars. I quickly learned that you have to put some effort into keeping yourself amused when not in work, as things I might normally take for granted like cinemas, the pub and live music events aren’t available here. People can be remarkably resourceful in creating a more familiar life for themselves. With expats comes western music, and the means to make that music. For me that means guitars. While I’ve been here I’ve built up my own small collection, and have steadily acquired the tools needed to adjust them. Like working on code, it rewards patience and benefits from time spent understanding the problem. Rather unlike the day job though, there’s no need to advertise. Perhaps inevitably, word has got around that I can take an unplayable instrument and turn it into something perfectly giggable. I just get these phone calls that start: “Is that Chris...?” Having started my working life as an RAF avionics technician and growing up with a dad who worked as a joiner, I’ve developed an affinity

for stringed instruments. It may not be immediately obvious, but structurally a guitar is very similar to an archery bow. The tension between strings and the gently curved wood – it’s a simple geometric principle that’s in play, which takes careful adjustment to get right. I can see parallels between this and the structural underpinnings of HTML: only once a firm base has been established can you proceed further. You can make a guitar from an attractive exotic wood, but on its own this doesn’t make it playable. It’s the same with a web page: without organised HTML, making it look and function well is going to be harder than it needs to be. Eventually, I’m hoping to come back to code and web development in particular. There’s a real satisfaction in being able to see immediate results from small changes. I get that from the work I do on guitars; it’s there as soon as you plug in and play. And you can see it in the smiling face of the guitarist whose pride and joy has just been transformed from a clanking mass of wood and wire into a tone machine, thanks to you.

PROFILE

SVP With 60FPS being all the rage these days, why not watch everything in 60FPS? With SVP I can do just that! Using clever frame interpolation, SVP enables me to enjoy or debug visual content at 60FPS and above. www.svp-team.com

Project manager Chris (@Chris_ Perry_61) works in the Middle East delivering infrastructure. He’s also a forum moderator at www.sitepoint.com


Need list

Need list

Stuff We Want Small objects of web design wonder: from the latest prototyping app to the most colourful pinball game you’ll ever see 1

DIgItal DeSIgN theory

2

$24.95

INkS.

4

JuMP Start SaSS

3

$1.99

Sketch MaSter

5

$29.95

Prott

FroM $39

6

VarIouS

grow Vol.2

Free

What we think (1) This book examines the relationship between print design and digital experience via a series of critical essays (netm.ag/theory-282). (2) INKS. reimagines a traditional pinball game, adding beautiful bursts of colour wherever your ball hits a wall (inksgame.com).(3) Master Sketch with this collection of video training courses from Peter Nowell (sketchmaster.com). (4) Still not found time to learn Sass? Kick-start your learning with this book for beginners (netm.ag/jump-282). (5) Create simple, interactive prototypes quickly and easily, then share your designs with others to get fast feedback (prottapp.com). (6) Winning and keeping clients is key to building a successful business. This guide explores nine methods you can use to do just that, from web optimisation to content marketing (netm.ag/grow-282).

august 2016 21


next month

ModErn SItES for a ModErn wEb

10 cutting-edge features you can use on your sites today, while maintaining support for older browsers

PlUS build a bulletproof app with Service workers

10 golden rules for SVGs in responsive design

Get started with web performance testing

ISSUE 283 on SalE 14 JUly 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 Europython DATE: 17-24 July 2016 LOCATION: BilBao, ES if Python is your thing, get yourself to Bilbao for the biggest Python conference in Europe, with over 150 talks over the course of the week. 2016.europython.eu

thE FrontEnd guidE

RENDER

The inaugural Render conference explored frontend tech with a touch of humour. Ruth Hamilton reports EvEnt rEport

DATE: 15-16 SEPt 2016 LOCATION: Bologna, it the Frontend guide to life, the universe and Everything (to give it its full title) promises to skyrocket you into a galaxy of all things frontend. Head to the site for 42 reasons to attend. 2016.fromthefront.it

An EvEnt ApArt

Render is the latest web conference to hit the events circuit. Hosted by the same people that brought you the now-retired jQuery UK, Render is a two-day show focused on frontend technologies. The inaugural event was compered by Addy Osmani and Ben Foxall (together with their seemingly endless supply of slogan T-shirts and jokes of varying quality), and it was absolutely jam-packed with information and ideas. What stood out was the palpable enthusiasm the speakers had for their particular subject. Val Head fizzed with excitement about web animation (although she emphasised the need for a light touch; “not just showing what you can do, but doing it with style”), and Jack Franklin delivered an impassioned defence of jQuery – it may be an OAP in web terms but it’s very much still relevant, not least as a valuable educational tool. Perhaps most infectious, though, was Jake Archibald’s enthusiasm for Service Workers. His talk explained how this exciting new API would help put you back in charge of the experience you’re offering by enabling you to serve some content to users when they don’t have a connection. No longer, he

explained, would your users be left staring at the “white screen of death”. Another memorable session came from Robin Christopherson, who drove home how far we still have to go with accessibility by playing the audio alternative to a CAPTCHA (a recording of letters and numbers) and asking the audience to write down what they heard and compare answers. Not one pair had the same result. Mixed in with the usual suspects were some more unusual talks, which went down a storm with the audience: Frederick Vanhoutte used creative coding to explain the science of rainbows, and Mariko Kosaka explained how Canvas helped her turn a cute picture of a cat into a knitting pattern. The final keynote by Jeremy Keith summed up the feeling of many audience members when he announced that his brain was “fried”, and likened the Render experience to the scene in The Matrix where Neo is plugged in and learns Kung-Fu in seconds. For your own taster, you can watch all the videos at netm.ag/rendervid-282.

proFILE

Photography: Katura Jensen

DATE: 21-22 aPril 2016 LOCATION: oxFord, uK URL: 2016.render-conf.com

ruth (@ruthehamilton) is the production editor on net. She is offering free biscuits to any contributor who reads their commission properly

DATE: 3-5 oct 2016 LOCATION: orlando, uS For this ‘special edition’ show in orlando, the an Event apart crew are offering a special gold Pass, which includes an exclusive backstage tour of disney’s Hollywood Studios. netm.ag/event-282

FrontiEr DATE: 16 nov 2016 LOCATION: london, uK aral Balkan, Ben Foxall and ruth John are all signed up for this one-day conference taking place in a brand new tech events venue in the heart of london. www.frontierconf.com

gEnErAtE BAngAlorE DATE: 25 nov 2016 LOCATION: BangalorE, in net’s own conference is coming to india, for a one-day, one-track conference in Bangalore. Keep your eye on twitter for details. www.generateconf.com

august 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 July 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 cc 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.


Opinions, thoughts & advice

User experience

PsycHoLogy As A DesIgn tooL

rune nørager considers why psychology is absent from our design process, and the benefits of incorporating this knowledge

28

Sara Wachter-Boettcher explains why priotising delight in your design process means letting your users down

IntervIew

32

Q&A

41

We chat to Mule Design co-founder erika Hall about being uncomfortable, misused insights and rethinking research

Story-first advocate Donna Lichaw talks through the similarities between product development and filmmaking

The downside of delighT I took a friend from out of town to a restaurant in my neighbourhood the other day. She has coeliac disease – the real-deal autoimmune disorder that makes gluten attack her small intestine. Eating out is stressful; some places assume she’s just avoiding carbs, or that a little bit won’t hurt. They’re wrong. My friend hates bothering staff, so she doesn’t go to new places much. But here she is, across the country, trusting me to lead her right. I’m anxious to find a good meal that won’t trigger her illness. She asks the host a bunch of questions: What’s safe? Are you sure about the sauces? Can you prep my food separately? They’re patient. They’re confident. They’re kind. We’re told there’s no gluten-free dessert, but we don’t mind. Then, out of nowhere, a dish of homemade ice cream appears. It was delicious. But it wasn’t what made that


Opinion

meal memorable. It was everything leading up to it: all the small ways my friend’s needs – needs most of us don’t have – were treated as valid and worthwhile. That’s the thing about delight: it’s a wonderful feeling, but a terrible goal, because you’ll only ever get there if everything else has already gone well. Restaurants figure this out fast, or they fail. But on the web, we’re still stuck on it: Inspire and delight! Delight is the key to UX! Add delight to your designs! It sounds good. Who wouldn’t want to leave their users grinning ear to ear? But the reality is less rosy. By laser-focusing on delight, we’re failing real people.

When delight failS

JuSt an edge caSe? When I wrote about that JAMA study a couple of months ago, more than a few people told me that no one would use Siri that way – and anyone who does is an idiot and deserves what they get. We can do better than blame our users. Karen McGrane has said, “You don’t get to decide which device people use to access the internet: they do.” This is the same. You might not understand why someone

Delight is a wonderful feeling but a terrible goal, because you’ll only ever get there if everything else has already gone well would use Siri during a crisis, but that doesn’t matter. Apple gave them ‘an intelligent assistant that helps you get things done just by asking’, and they’re using it. The real problem is that Apple never thought about tasks like these. Across our industry, design teams are trained to focus on best-case scenarios; happy users achieving desired outcomes. That’s normal. Of course we want people to have a wonderful time with our products. But sometimes, they won’t. They might be depressed. They might be in pain. They might be having a full-fledged ugly-crying public meltdown. In other words, they’re human. Our job isn’t to judge them or push them away. It’s to help them get things done – and treat them with respect while we do so.

In my book with Eric Meyer, Design for Real Life, we call scenarios like these ‘stress cases’. A stress case is something you put at the centre of your work – a lens you use to see whether your decisions hold up under pressure. Try it out. Whenever you find yourself imagining happy users contentedly clicking around, pause. Ask yourself, ‘What if someone in the opposite scenario used this product?’ Would it work, or would it make them feel unwelcome and unsupported? It’s not complicated or resource-intensive. All it takes is a little less ‘delight’ , and a little more compassion.

prOFiLe

Recently, JAMA Internal Medicine released a study (netm.ag/study-282) that looked at how smartphone AIs like Siri and Cortana handled crisis situations, such as a user asking for help with domestic violence or rape. The short answer is they didn’t. In fact, they often cracked a joke instead of attempting to look up the information. I’m sure the engineers at Apple meant well when they loaded Siri up with jokes: they wanted to make it fun and personable. But that design direction only works when things are going well. If a user is frustrated or under stress, it feels insensitive, and it’s not helpful. Once you start looking for misplaced ‘delight’, you find it everywhere, from the cutesy Facebook feature that wants you to ‘See what your year looked like!’ – and then shows you a picture of a dead loved one – to Microsoft’s chatbot Tay, which started out having light conversations with teens, and was immediately trained by trolls to harass women and praise Hitler.

Sara (@sara_ann_marie) runs a content strategy consultancy, and co-authored Design for Real Life with Eric Meyer (www.sarawb.com)

august 2016 27


VOICES Essay

28

august 2016


Essay

user experience

Psychology as a design tool Illustration by Ben Mounsey

Rune nørager asks why human psychology is missing in the process of user-centred design

You are probably familiar with the concept of user-centred design (UCD). There are many variations, but the basic elements look like this: Explore > Design > Test/Iterate/Refine > Deploy UCD is an invaluable tool that helps us uncover unmet user needs and turn these into new design solutions. However, unfolding UCD as it is used by practitioners reveals a striking pattern: science-based knowledge of human behaviour is vague, if not missing altogether. Instead, the primary focus is on how we can gather information about user needs in the design process and then, in iterative user testing loops, refine the design concepts until they are ready for deployment. Is essence, the human part of technological development is pretty much a black box.

UDC anD HCD I find it useful to analytically differentiate between a user- and a human-centred design (HCD) approach to product development. UCD is what I call a process-based discipline, rooted in anthropological and ethnographic methodology. HCD is an expert-based discipline rooted in knowledge of human psychology. This distinction is not absolute, but it helps communicate a critical point: UCD does not directly utilise the vast amount of knowledge we have accumulated about humans; knowledge that could have a big impact on design solutions and provide a foundation for innovation.

To give an example of an area where HCD could impact on design: One of the most powerful memory mechanisms we have is memory for location in a spatial layout. Developments like responsive GUIs, despite delivering wonderful new features, cut off this mechanism. For some UCD practitioners, the human side is addressed implicitly through their general knowledge. However, we need this aspect to be more explicitly present. Without formal HCD knowledge present in the development process, we can only address the human side through the test-iterate loop. This is too uncertain, and valuable insights about humans are certain to be overlooked and lost. Thus, often teams will fit products to ‘the user’ rather than to humans, which means we end up with products that generate friction in daily use and burden users unnecessarily. Furthermore, great solutions are only explored by chance and intuition, rather than directly guided by knowledge.

MIssIng InsIgHts So why is the human side so underrepresented in product development? In my experience, it has to do with the inability of psychology to deliver concrete answers in a pragmatic fashion. UCD has a host of really useful tools that help gather, structure and present user insights. HCD has little to offer apart from a handful of relatively abstract design heuristics that often don’t connect with the issue at hand – or are so specific that they have limited applicability. The scope of heuristics

august 2016 29


VOICES Essay may be too narrow and the gulf between psychological theory and practical use too big. Fortunately, over recent years this gulf has started to disappear.

a new paRaDIgM Cognitive psychology has undergone a revolution in the past 30 years, and a new theoretical paradigm has emerged. Rather than focus on the most intellectual learnings (and their limitations) we now have an elaborate understanding of the basic cognitive skills that form the basis of everyday behaviour. From this shift has emerged a more consistent view of human behaviour that can be integrated into the design heuristics we already use, as well as providing new guidelines to extend and supplement UCD. You may have read Thinking Fast and Slow by Daniel Kahnemann. The book introduces the dual-process theory that basically states that people have two kinds of mental resources that underlie our behaviour: A basic System 1 and an advanced, intellectual System 2.

of focus. In GUIs, however, there is a huge bias towards content and meaning only being conveyed with fine, high-resolution details. The macrostructures present tend to be more related to styling than function. Contemporary GUIs often do not provide support for peripheral vision – if you squint, you see few meaningful macrostructures. Only by conscious, focused inspection of the GUI does it makes sense. Hereby access to the vast System 1 resource all humans share is wasted. A good way to design macro-level information that our System 1 can appreciate can be found in the legacy of Walt Disney’s animation principles. These were later promoted by Pixar’s John Lasseter and eventually found their way found into GUIs thanks to Steve Jobs and his tight connection to Pixar. You might also consider movie editing principles as an inspiration for how to design for immediate understanding. Finally, word of caution: do not ask users to think aloud in user tests. When we ask people to verbalise what they do, we risk moving into the realm of System 2, and

Without formal psychological knowledge present in the development process, we can only address the human side through the test-iterate loop. This is too uncertain, and valuable insights are certain to be overlooked and lost

In pRaCtICe A favourite test of mine is the squint test. In this, the tester looks at a design through squinted eyes to reveal the macrostructures as they appear in our peripheral vision (which is actually 96-98 per cent of our visual field). Peripheral vision taps into System 1, whereas focal vision taps into System 2. Peripheral vision cannot appreciate fine details of text, icons and symbols; only relatively coarse structures. The natural world has both, and as we casually navigate around in it we rarely need focal vision – only the occasional road sign or bus number might require a bit

30

august 2016

obscuring how well your design connects with the desirable properties of basic System 1 processes. A better approach is to ask users to verbalise their thought processes afterwards, while seeing a video recording of their own interaction.

HCD toolbox This article only explores a small preview of the insights on offer. Take a look at our HCD toolbox (www.designpsychology.com/insights), for more formal knowledge about psychological mechanisms. There is plenty to learn, no matter what product you’re working on. The gap between theoretical psychology and practical applicability to product development is closing up. Any product development team should therefore have access to these insights to help guide their design decisions. It can be in the form of a trained psychologist, or, even better, having your design team connect with our HCD toolbox.

prOFiLe

UCD is suited to tapping into the higher-level System 2 behavioural functions, where we explore what people verbally report about their conscious thoughts and needs. HCD is geared towards helping us understand what goes on down in the System 1 engine room of our behavioural thought processes. System 1 is immensely desirable from a design perspective – technology becomes truly intuitive when it fits System 1. Furthermore, when it comes to System 1, all humans are the same, regardless of age, culture or language. In essence we can make universal design when we consider System 1.

Rune is CEO of Designpsykologi (www. designpsykologi.dk), a company that transforms scientific research findings about human nature into novel products


Info job: Co-founder, Mule Design t: @mulegirl w: www.muledesign.com

32

august 2016


Erik a Hall Words by Julia Sagar Photography by Tory Putnam

Ever wondered why web design is like performing a face transplant? The Mule Design co-founder tells all

august 2016 33


Voices Interview Erika Hall isn’t a surgeon, but she’s not afraid of dropping a visceral medical metaphor to explain the intricacies of web design: “If you redesign the experience you’re offering to the world, and don’t redesign the workflow inside the organisation, that’s like doing a face transplant without hooking up the nerves and blood vessels underneath it,” she announces. “The new face will wither and die and slide off the skull.” Hall is talking about Mule Design’s redesign of the National Audubon Society’s site, which resulted in a 300 per cent increase in returning visitors. More specifically, she’s talking about why it’s essential to engage the entire organisation during a redesign, and how one of the hardest parts of that process is persuading people to change their habits. “Users have habits we have to design for – clients and designers get that. Organisations have habits too. And these habits are extremely difficult to change,” she continues. “You need to recognise that any change is work, even if what you’re doing is going to eliminate a lot of difficult workarounds and make everyone’s life easier on paper. The workarounds [still] feel easier than any new process because they’re habits running on cognitive autopilot.” To change habits, says Hall, you need to understand why people in an organisation do what they do. “You need to connect the organisation’s goals to a material benefit for anyone who needs to work differently to achieve that goal. This requires understanding how people view their jobs, and do their jobs and communicate with each other. You have to listen to people before you ask them to change.”

Mule Work Audubon is the perfect example of Mule doing what it does best: web design and content strategy, in close collaboration with its clients. The interactive design studio provides strategic consulting, design and technology services to organisations around the world, alongside quirkier personal projects like Unsuck It, an online translation device for corporate jargon labelled “delightfully hostile” by The New Yorker. Hall co-founded Mule with designer Mike Monteiro in 2001, after the pair met at experience design firm Hot Studio (acquired by Facebook in 2013). “We started Mule

34

august 2016


Interview

because we loved the work and wanted to keep doing it, but on our terms. We were both terrible employees. Really, I feel bad for all of our former managers,” she laughs. “Also, in 2001 the much-hyped new internet economy cratered. So that helped. We had to make our own jobs.” The studio’s first client was a wildlife preserve called Fossil Rim. Yahoo followed soon after, then the UN – and they haven’t looked back. Now a tightknit team of 12, the studio has started doing more training and organisational consultation in recent years, alongside its project work. Despite reports claiming otherwise, Hall says there are plenty of opportunities around: “There was a lot of noise a couple of years ago about the end of client services. This noise seemed to emanate from designers who were tired of running their shops and wanted to go in-house, which is fine. However, there is still a tremendous amount

she’s the author of Just Enough Research – an engaging cookbook of research methods – and has delivered a number of talks on the subject, reminding people of its importance in improving your odds of success. The problem, she argues, is that we also use the term ‘research’ for activities intended to gather new knowledge for its own sake. “That makes it sound like an optional luxury,” she points out. “We need to stop thinking of research as a bonus add-on. Gathering the information you need to solve a problem is a part of solving the problem.” Hall suggests reframing it as evidencebased design. “The point is that all of our design decisions should be based on evidence, otherwise it’s just speculation. Imagine hiring an architect and telling them to forgo surveying the site to save money, or not to think about how the building will be used. That seems ridiculous.” The way to begin the research process, she

information or guesswork? How confident are you in your information? Where are the risks that you’re wrong? The answers to those questions will tell you what information you need to gather.

of work out there to be done.” Everything Mule does starts with research. It’s a topic particularly close to Hall’s heart:

advises, is to start by thinking about the scope of your decisions, and then the inputs to those decisions. Are you working from

thinkers. Also, it’s very tempting to give into confirmation bias. When there is so much data available, it’s quite easy to find

“It’s very easy to treat the things that are easiest to measure as though they are the most important”

Too Much daTa One mistake Hall sees a lot of designers making is to forget that data alone won’t guide us. We’re generating an unfathomable amount of data: we carry devices embedded with sensors, and more and more human activity is routed through the internet. “There’s no limit to what we can track and measure,” she explains, adding that this is exciting to designers and technologists who want to make better-informed decisions. But more data doesn’t necessarily create more meaning, and might even make it harder to see what matters. “It’s very easy to react to the data, and treat the things that are easiest to measure as though they are the most important,” she warns. “We have lazy brains that are overactive pattern-matchers, so we want to go to where the patterns seem to be, rather than taking time to be disciplined, sceptical

august 2016 35


Voices Interview

something to back up an opinion you already have, or to support your desired design.” As Hall will argue during her talk at Generate Sydney in September (netm.ag/hall282), what we can’t count still counts. But how important – really – is unquantifiable data like human experience and choice, and how can designers build these aspects into their strategy? “When you say ‘unquantifiable data’, it can sound like some sort of magical fairy dust, but qualitative data simply means descriptions. It’s often much richer information than measurements, ” she explains. “Descriptions are much easier for humans to work with because we are storytellers, not calculators. Measurements will never tell you why something is happening, and the ‘why’ matters a tremendous amount.” The way to harness this information is simple: observation and discussion. By watching a handful of people using a site and talking to them, Hall claims you could find out why conversions have dropped off in just a day. “Sure, you could A/B test different fixes, but that’s just trial and error, and depends on you seeing statistically significant changes. It’s very wasteful.” The point is this: if you start by counting and measuring, you will likely count and measure what’s easiest – and that might be the wrong thing. “Figure out what your goal is and stop worrying about looking smart. That’s my best piece of advice ,” Hall asserts. “Most bad decisions are somehow grounded in insecurity about looking smart. That makes people dumb.”

Fear goo Hall is big on tackling fear. She calls it ‘fear goo’ and says it’s endemic in humans. In design, it often manifests in people trying

36

august 2016

to solve something by themselves, rather than being collaborative or asking for help. It’s also found in organisations where leaders are afraid of being questioned, and staff are afraid of questioning the leadership. But asking questions is the cornerstone to good research – and it’s also key to knowing how much research is enough. “Start with the problem you’re solving and ask what information you lack,” she advises. “Take a hard look at your embedded assumptions. Your questions will determine the approach and methods you should take to answer them. If you ever stop asking questions, you’re doing it wrong.” She’s also big on avoiding complacency. Striving to be comfortable isn’t productive: comfort means you’re not growing. Fortunately, Mule keeps Hall happily on her toes. “Running one’s own business is a fantastic way to remain uncomfortable all the time,” she smiles. “Really, I’m not even being facile. So, I have that on lock. New challenges all the time.” She continues: “The gift of experience is that I’m now comfortable in situations that would have made me throw up earlier in my career. I want to take on new kinds of work

fantastic people working at Mule, I want to do right by them and give them the support and opportunities they need to shine.” Mule also has a renewed focus on its home city of San Francisco, in terms of client work and beyond. The studio’s new space has given the team room to run an art gallery and offer a variety of events that are open to the community. “That’s been a lot of fun, and really important to us. So many new companies seem to be taking from San Francisco and not giving back. Cultural shifts that seem innocuous, like catering lunch in-house, deprive local restaurants, for example. We’re here because we love it. If you’re just going to stay sealed up in your posh office all day, you could be anywhere.” It’s all about focusing your energies: “Technology changes, but human nature doesn’t really. We need to stop getting distracted by the next shiny thing, whether it’s wearables or bots or VR, and focus on what we’re trying to accomplish, ” Hall reasons. “Design is bringing change. What change do you want to see in the world?”

that make the best use of all of this accumulated expertise. And we have such

Next month: True Ventures design partner Jeff Veen

“Running one’s own business is a fantastic way to be uncomfortable all the time. I have that on lock”


Opinion

two steps to better projects Bjarne Christensen talks through a billing plan that works for your clients and your budget We love our clients, and we love designing a creative online presence for them. But a few years back, we didn’t know if we could continue doing web projects at all. Up to two-thirds of our projects lost money, usually due to production cost overruns. What’s more, making templates felt like putting on a colourful Band-Aid without diagnosing the problem. We didn’t want to be template vendors: we wanted to understand our clients’ businesses in a way that would really move the needle for them and for their customers. So we stopped making templates. We reduced our Photoshop use drastically. And we developed a system that makes us and our clients much happier.

The CreaTive phase We divide projects into two parts: an initial creative phase, which works on a fixed budget, and a second production phase with an agile budget.

The creative phase begins with an inquiry from the client and a meeting over coffee. On this free ‘coffee date’ , the client and I see if we have chemistry and if the project is something we’re excited about. I explain that if Stupid Studio is going to really provide something of value, we need time to get to know the client’s business, strategy and market position. A company’s online presence is often its face to the world, and creating it requires a partnership between them and us. When I frame it this way, the company usually says, ‘Of course you can’t design for us before you get to know us’. And the fixed price gives them a sense of security that the process won’t drag on forever. Once the customer has signed on, I return for a meeting with the team and ask my ‘100 questions’ – basic information about who they are and where they’re going. I take the answers back to my team, so we’re prepared for our first workshop.

The produCTion phase After the workshops, we create a debrief document with everything we’ve learned. The customer has paid for this and it belongs to them, which means that technically they could choose another agency for production. Usually they choose us, and we begin to build the site. About 80 per cent of our projects are built directly with code, in the browser and on the relevant platforms. This means we get very few of the surprises that used to result in production cost overruns. For the production stage, we use an agile budget. We list what we think will be the number of hours required for each task, plus an ‘uncertainly factor’ of 1 to 5, which gives us some elbow room if tasks prove to be more complex than expected. Listing production tasks by priority allows for flexibility if an idea for a great new functionality appears halfway through the build. It also helps the client see the financial repercussions of new requests from their side. Our two-part billing structure allows us to build better websites while making sure we get paid for everything we do. Our numbers have improved, and our clients are happy too.

PROFILE

busInEss

This is where it gets fun. We plan two half-day workshops with the client, in which a developer, a creative, a designer and myself (as creative director) visit the customer with a roster of games and mindbending exercises designed to get them to think about how their online presence can serve their strategy and their brand. For example, we ask clients to draw their own company’s logo. A lot of grown-ups don’t draw any more, so asking them to use this part of their brain gives them and us valuable information about how they see their brand. We also ask the customer to bring in songs that express where the brand is now (maybe a forgettable 2003 Britney Spears hit) and where they think they’d like the brand to go (maybe slow jazz or edgy electronica).

Bjarne (@Arnii_dk) is creative director and a partner at Stupid Studio. His focus is on adding value to brands with design and creative digital solutions across platforms and technologies

august 2016 37


VOICES Big question Creativity

What are the bIggest barrIers to InnovatIon? What’s stopping us from building the cool stuff of our dreams, and what’s holding the web back from its full potential? We asked the experts

ya ron s choen

Irene P ere y r a

www.yaronschoen.com

www.antonandirene.com

Product designer, Compass

Although we’ve made progress, our design tools are still extremely primitive in the context of 2016. Design within organisations is still a hodgepodge of tools, files, printouts, sketches and thoughts scattered throughout teams. That is not to say we should blame our tools for everything, but having tools that help us with the design process (not only the execution), would help us move towards innovation quicker.

a ndy budd

Founding partner, Clearleft www.clearleft.com

It depends on what you mean by ‘innovation’ and whether you think it’s automatically a good thing. A lot of companies are constantly chasing new ideas to give themselves a competitive advantage. However, this can often come at the expense of the basics. While it’s important for companies to explore the ‘future’, it shouldn’t be at the expense of the ‘now’ or the ‘next’. 38

august 2016

UX director, Anton & Irene

Simple: The status quo and the current era of web design trends. We have long abandoned the more experimental early days of the internet for what I like the call ‘the Bauhaus era of web design’. Most sites nowadays are boring cookiecutter boxes with extremely high usability, but very little innovation. A total snooze-fest. Innovation only happens if you are able to look at a problem from a new perspective, and most web designers are too busy copying each other, designing for the lowest common denominator, and basically assuming users are idiots. Birds fly in formation not because they are looking forward, but because they are looking at each other.


a r a l ba l k a n

Ja n l ehn a rd t

Founder, Ind.ie

Vice president, Apache CouchDB

www.ind.ie

writing.jan.io

We should be asking: What’s the biggest thing holding the internet (and humanity) back from its potential? The answer is the web itself. We believe the web is decentralised, but it is dominated by an oligarchy of monopolies. We believe the web is freedom, but it is funded by surveillance. If we are to tackle the staggering concentration of wealth and power in the world that is catapulting us towards an unsustainable global feudalism of corporations, we must move beyond the web towards decentralised, commons-based alternatives. M at grov es

Co-founder, Goodboy www.goodboydigital.com

The most amazing piece of tech in web design is WebGL. It gives the most flexible and powerful ways to make modern web experiences. The problem is the browsers that do not support WebGL or have poor implementations of it: IE 9 and10, and the Android Stock browser. With cutting-edge content, you need to spend a big chunk of time implementing a fallback for these browsers, which takes time, costs money and puts people off using WebGL to really kick the visuals up to 11. The good news is that this is slowly changing.

The biggest barrier to innovation is the missing inclusion. We are an industry claiming to define and invent the future. Yet, it’s mostly (hetero, cis) white men with their problems and ideas for solutions that are in positions of power. In the very diverse world of the web, this is holding us all back. We need more people with more diverse backgrounds and experiences to work on our collective future. If your product is inaccessible to marginalised people, it’s neither radical nor revolutionary.

cas sIe Mcda nIel

Design director, Mozilla Foundation www.janeandjury.com

We have an over-reliance on constructs like Google’s Material Design, UI patterns in general, and prescriptive toolsets. If a UI pattern works exactly right for your problem, use it, by all means – these are amazing resources! But make sure there is a good reason for doing so. I see too many designers copying instead of thinking for themselves, and what’s worse, they are afraid to make mistakes because our culture is so hostile to any kind of design that is different.

resources Fight the power

If online tools and the web in general are starting to give you the creeps, check out Aral Balkan’s social enterprise Ind.ie (www.ind.ie), which is building technologies that enable you to retain ownership and control of your data and online identity, and have private conversations easily.

sorting the hodgepodge

A bunch of designers, including Frank Chimero, Josh Brewer and Tim Van Damme, have banded together to build a tool called Abstract that helps with managing and connecting design workflows. You can read about it here, and sign up to get a notification when it’s ready: netm.ag/half-282

not another code oF conduct

How can we make the web industry more inclusive? Reducing the amount of idiotic behaviour that goes on at conferences would be a start, but not everyone’s in favour of codes of conduct. Web developer and event speaker Jenn Schiffer tells it like it is in this satirical rant: netm.ag/conduct-282

august 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 a failing product, and I started to wonder if the story was inherent to successful products or something that could be engineered – just like a movie. Once we started to approach product development like film development, we were able to quickly and easily reimagine the product into something that is now very successful.

Q&A

Donna Lichaw The story-first advocate explains why you should make your users heroes Info Job: Consultant, author, educator w: donnalichaw.com t: @dlichaw

net: Tell us a bit about what you do ... DL: I help businesses and nonprofits better engage their audience with websites, software, apps and services. For example, I will help you figure out how to get more people to use your app, or how to encourage more people to buy something. net: In your book, The User’s Journey, you describe a story-first approach. In a nutshell, what is this? DL: If you’re building successful businesses, your job is to move people to action. You need to get them excited about your product or service, get them to want to do something, help them through a path, and then make sure they see value in engaging with your brand. Before I worked in tech, I was a filmmaker and had lots of practice doing all these things. Developing a successful product is much like developing a successful story for a film. It all starts with a fairly simple story structure. Without it, you’re launching best guesses. net: What inspired you to develop this approach? DL: After many years working on digital products, I started to see the most successful were those that had a solid story at their foundation. The rest did not. A few years ago, I was helping a startup revive

net: How did you end up moving into tech? DL: I actually started working in tech at the same time I started making films. In college, I made films in school and worked as a multimedia designer, project manager and information architect the rest of the time. Early on it seemed like my work in tech was like a 2D version of my 3D work in film, but as tech got more sophisticated, the two became more similar. As the industry became concerned with user research and approaching design problems as human problems, my work in tech started to resemble my work making documentaries. I did qualitative and quantitative research to help uncover and solve problems, and then architected solutions that had to not just work, but be engaging. net: You do a lot of speaking at events. What do you think is key to a great conference presentation? DL: A story! When I was working with that fledgling startup a few years ago, I started teaching a class that had a lot of contact hours. I was afraid my students would lose interest or not retain what they learned. I read some books about presentation design and they all preached the importance of having a solid story structure at the core of your presentation. This was around the time I started asking myself if everything needed a story in order to engage an audience. I wove story structure into my classes, the product for the startup, my talks and workshops. What I’ve found is that if you want to engage your audience, you need to make each person feel like a hero. The best way to do that? Craft a story, call them to action, take them on a journey, provide value, and help them see what they can do next. net: What are you working on at the moment? DL: I just finished up the first part of a really fun project for the nonprofit that maintains Central Park in New York City. We set out to answer why people use the park, why they donate to the conservancy, and how to get more of those people to donate. The answers are the foundation for a digital strategy that will guide website and product development for the next year. Other than that, I’m working on one of the coolest projects I’ve ever worked on: we have a new baby at home. That will be my top project for the next couple of months at least.

august 2016 41


Never miss aN issue!

#280 JUNE 2016

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

#281 JUly 2016

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

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)

#275 JAN 2016

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


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

#279 MAy 2016

#278 APril 2016

#277 MArch 2016

#276 FEb 2016

#274 dEc 2015

#273 Nov 2015

#272 ocT 2015

#271 SEPT 2015

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

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

PreFer to reaD oN aNDroiD, PC or maC?

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

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

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 AliciA Sedlock

Sensational design and superb development

Frontend developer Alicia is a responsive web enthusiast, and loves digging into new CSS specs w: www.aliciability.com t: @aliciability

SVG, HTML5, ES6

fS-untitled.fontSmith.com The Space Between www.the--space--between.com There are plenty of sites that show different font variants in action, but none as full of personality as FS-Untitled. The site was built by collaborative studio The Space Between to show off all the fonts of its versatile new typeface. “By creating a digital playground with 48 unique scenes, we gave ourselves the perfect platform to present the typeface in many different ways,” says designer Steven Jones. “We wanted to generate an overall feeling of

44

august 2016

playfulness that could in turn be beautiful, funny, provocative and inspiring.” The site demos the assortment of variants through a diverse set of fun and clever interactive animations and scenarios. “As the codebase was written from scratch with no framework, there were coding challenges at every turn,” recalls designer Matt Rudd. “How do you build an arcade game from text?” The end result is much more like a game than a font discovery tool.

“The best type specimen I’ve ever seen”

Kyre Song (@KyreSong)


Inspirational sites

CSS 3D, LESS, PHP

www.creAktif.com Creaktif www.creaktif.com

When we talk about designing digital products, the idea of pulling inspiration from physical mediums seems to have become taboo. The Creaktif website is a stunning example of looking at how things move in real life, and translating this into familiar, yet stunning interactions. For example, as the user scrolls down the homepage, the design appears to concertina up like a piece of paper. “Every time we make a portfolio for ourselves, we try to build something different, to make something that would surprise the user,” says creative director and founder Axel Corjon. “Here, we wanted to make a bridge between digital and paper.” A big challenge in the digital animation space is making interactive animations feel natural. Creaktif’s portfolio makes me feel as though I’m folding through a pamphlet they’ve handed to me in person – and unlike the parallax trend of yesteryear, it doesn’t feel gimmicky. “We just fool around with some crazy ideas and make them when we get the time,” adds Corjon. “Our next portfolio will be even more crazy and fun.”

august 2016 45


Gallery Inspirational sites

si t e of t he mon t h

SaSS, SVG, jQuEry

www.norwegiAnStructure.com Bielke&Yang www.bielkeyang.com

Structure is an architectural art exhibition that explores artists’ interpretations of ‘structure’, resulting in an incredible arrangement of experiments, playing with different materials and aesthetics. The team at graphic design studio Bielke&Yang worked to capture the mood of the exhibition in its identity scheme and then the website itself. Viewers can interact with the homepage by dragging and repositioning different elements however they want, resulting in a new experience each time they visit the site. The idea was that this would mimic the exploratory process the exhibitors

46

august 2016

went through. The team effectively took the concept of ‘structure’, and rather than approach it as a passive noun (order, lack of chaos, everything in its place), saw it instead as a verb, allowing users to define their own structure and layout. According to the team, the main challenge was ensuring the site remained easy to navigate and did not become too chaotic. Especially on mobile devices, the mechanic of arranging elements on the page had to be balanced correctly within the rest of the content. The result is both an information repository and an exploratory playground.


Inspirational sites WEbGL, anGuLar

www.Sound-of-chAnge.com Hungry Boys www.hungryboys.ru

Sound of Change is a website as interesting as its aim: allowing buskers to share and earn money for their music online. “The main goal of the design is to help deliver the project essence. But of course we didn’t want to do this in a bland way,” says Sergey Andronov, art director at Hungry Boys. “We wanted to immerse the user in the street music atmosphere.” The combination of bold, highcontrast section headings and energetic, sketch-like animations reflects the same excitement as watching buskers perform in person. “There’s always a story behind

[street music], and a special aesthetic we wanted to convey on the site, in its details and content,” says senior copywriter Galina Belozerova. “For example, as the users go from section to section, it’s as if they are walking around a city and coming across street musicians. First they’re in an underpass with one musician playing, then the next section takes them to the subway with the music of another.” Paired with an interactive map showcasing video clips from social media, the website turns a physical happenstance into a universally accessible archive of music.

“This website is so beautiful it makes me feel all sorts of fuzzy things” JudITH WöllEnSTEIn (@judwoellenStein)

august 2016 47


Gallery Inspirational sites

rEaCT, SaSS, CSS bLEnD MoDE

www.vAm.Ac.uk

Made By Many www.madebymany.com The V&A Museum is a treasure trove of art and history, and a staple in london’s extensive museum scene. A museum of this magnitude deserves a website that’s been built and designed with care and craft. “unlike most off-the-shelf CMSs ... our bespoke system uses the museum object as the atomic unit of content,” writes Kati Price, head of digital media at the V&A. “This means we have a single source of truth about each object.” Although Atomic design is an upcoming method of design in the web design space, the fusion of physical objects into

48

august 2016

the digital ecosystem provides a level of context and intimacy any museum in this age would strive for. “The objects in our collection can therefore be portable in a way that they will never be in the physical space,” Price explains. The site becomes art in itself, with new blending options in CSS3 being used in clever ways to fuse images and content into not just a website, but a full artistic composition. By putting examples of art so prominently in its design, this website would feel at home with any other piece of art featured at the museum.

“Elegant and fitting for a national museum of art and design. A big improvement” Matthew CoCK (@MatthewCoCK)


Inspirational sites

CSS aniMaTion, WorDPrESS, rWD

www.greenwichlibrary.org Verbal+Visual www.verbalplusvisual.com

Public service websites don’t have a great record of being beautiful or easy to use. Luckily, that trend is beginning to fade away, and Greenwich Library’s website is the latest to adopt a modern new look. When creating the site, the visual design came secondary, however – as a public service, usability comes first and anything else is icing on the cake. The redesign is the result of two years’ worth of research, user testing and design. In a statement, library director Barbara Ormerod-Glynn explained that the site update was vital because it meant the

library could provide its services 24/7. It also addressed issues people were having when trying to find what they needed in a sea of content. One of my favourite parts is the illusion of drawing elements while the user scrolls. This is a trick many developers create explicitly with SVG, but the simple combination of CSS transformations and layering elements here creates just as interesting an effect as a more complex SVG line drawing. The colourcoded navigational elements also add personality without having to splash colour over every element.

august 2016 49


Gallery Inspirational sites

CanVaS, MiCrio, CSS aniMaTion

tuinderluSten-jheronimuSboSch.ntr.nl Q42 www.q42.nl, Fabrique www.fabrique.nl, NTR www.ntr.nl

However you think the web should be used, you can’t deny its educational potential. This is why I instantly fell in love with interactive documentary Jheronimus Bosch, the Garden of Earthly Delights. Built as a companion to an upcoming documentary by Pieter van Huijstee entitled Hieronymus Bosch, Touched by the Devil, the website aims to provide a unique insight into this famous work of art through an immersive combination of music, narrative and imagery. Q42 handled the technical implementation on the project, with the Fabrique and NTR working on the design. “Our main aim was to tell the story of the painting by using rich content

50

august 2016

and enabling the user to find every little detail possible,” explains Q42’s Tim Logtenberg. To ensure performance was up to scratch, the team developed its own lightweight zoom interface (micr.io) that pulls its content from the Microsoft Azure cloud platform. Atop this is another custom interface enabling the user to access insightful narration, with CSS animations and requestAnimationFrame fusing the two layers together. The combination of mood-setting audio to match the tone of each panel creates an awe-inspiring experience that simply can’t be matched just by viewing the painting.


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 the Adobe CC All Apps plan (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 July 2016


Sublime design & creative advice

This monTh FeaTuring...

focus on

57

This month ...

BIcycle shops R a l UC a miR C e a

Profiles

Every new project needs a grid. sam Kapila runs through some considerations to bear in mind when setting yours up

Design Challenge Raluca is a UX and UI developer and digital art director based in Milan w: www.mirami.it t: @raluca_mirami

m at t C o op e R

Profile

Matt is a web designer and branding specialist at Doncaster-based web agency Damage w: netm.ag/cooper-282 t: @MatthewCooperUK

58

Jam3 operates at the sweet spot where craft, storytelling and technology meet. We caught up with a founder to find out more

C e m a l C e bi Cemal is the founder of EXENLABS, an agency specialising in Shopify ecommerce setup w: www.exen.co t: @cemalcebi

Brief

How we built

64

How uniform created a stylised 3D paper world to enable people to explore an exciting redevelopment project in London

52

december 2013

This month we would like you to design a site for a bicycle shop. It could be a bricks and mortar shop that does repairs, or it could be an online-only bike seller. Make sure the user can find the information they need easily, and are inspired to get cycling!


Design challenge 3

1 2

4

6 5

raluca Mircea

DUo

Wheel-inspired central navigation ties together the two halves of this bike retailer site

Born from the passion of two friends, the Duo bike brand produces bicycles to support all surfaces and weather conditions – all you have to do is to ‘Choose your road’ and challenge your limits. Elegance and technology are the brand’s main values. An attractive and clean design drives the site structure. The left side is dedicated to the main products and services, and the right features the technical information and shopping cart. The chosen bike sits in the middle, balancing the two contrasting parts of the site. The central navigational circle rotates like a wheel when a new category is selected, and the theme of movement is reflected again in the sub-menus: the bike types menu scrolls vertically, while different product options scroll horizontally. Orange has been used throughout as a highlight colour, as this represents the colour of light, and is associated with speed.

close uP (1) The layout is divided into two parts: on the left is the main navigation, and on the right details of the products in the selected category. The background will change according to the product selection. (2) The circular navigation mirrors a component of the bicycle, the wheel. When the user navigates from one category to another, the circle will rotate. The first model in each selected category is presented as the main image. (3) The ‘Love’ and ‘Share’ icons allow the user to express their favourites and share their choices. (4) For each model, the available colours are presented below the product photo. The user can click each colour to see that particular shade on the bike. (5) The shopping cart is inserted directly into the homepage, so products can be purchased immediately and easily. (6) In order to maximise the visibility of stock, other products from the selected category are listed in a slider.

My Month what have you been doing this month? I redesigned the layout of a dashboard, and began the development of my new site. which sites have you visited for inspiration? I discovered the work of Bryan James (bryanjamesdesign.co.uk) and fell in love with his beautiful sites and animations. what have you been watching? The Sorcerer’s Apprentice, because sometimes it takes a touch of magic. what have you been listening to? The melodic songs of a friend named Steve Howls, and Dardust.

august 2016 53


ShowcaSe

Design challenge

1

2

3

4

5

Mat t cooPer

My Month what have you been doing this month? Working on boosting my presence on the web, and enjoying some photography. which sites have you visited for inspiration? I often find inspiration through Awwwards and Dribbble. what have you been watching? Friends, Benidorm and the classic film Ghost. what have you been listening to? I listen to a range of music, from The Kinks to Kano. I’ve been listening to a lot of grime lately.

54

august 2016

CUlt moDeRn bikes

Innovative use of motion on this site encourages the user to explore further

This site sets out to display and sell beautiful bicycles under the brand Cult Modern Bikes, which brings together classic and modern bicycles. I’ve gone for a clean, bold and yet dynamic feel for the site. As the first point of visual contact, the website invites the user to navigate through Featured Bicycles, allowing them to learn more about the bikes available to purchase. My aim is for the user to realise instantly how straightforward it is to purchase a bicycle. The site makes any information they may need to make their decision readily available. Layer animations will be animated at different speeds within each section, to create a compelling and attractive feel of motion as the user scrolls. The site will be fully responsive, so the user can purchase quickly and easily while on the go.

close uP (1) The user is first met with the site’s header. This is bold, and contains all the links a customer needs to navigate the site. There are also options to register for an account and log in. (2) The homepage features a strong, powerful image of a featured bike. The design encourages the user to jump straight into the featured offers. On load, different elements transition at different speeds to give a unique visual edge, enticing the user to discover more. (3) The Top Picks section has a no-nonsense design that enables the user to navigate to the top categories on the website with ease. This section uses a hover effect. (4) The Classic Featured section further down the page allows the user to see the best-selling and exclusive classic bicycles the site has to offer. (5) The homepage is finished with a nice, clean display of the logos from the brands CM Bikes sells.


Design challenge 6 2 1

3

4

5

ceMal ceBi

byCo

A compact aesthetic and clean navigation make this site stand out from the competition

The Byco website features a very compact design, with all the clutter hidden away. On the homepage, the large slider provides the user with a clear image of the product. On click, this will take them to the range of bicycle collections, and then on to specific product details. All the relevant information is included on each product page in order to keep the homepage clean and simple. This also improves the experience on mobile devices. The main navigation is hidden behind a hamburger menu, and slides out when clicked. This ensures the main product slider has maximum exposure, to encourage clickthroughs. This hamburger approach is also used on mobile devices. When the user scrolls down, the menu icon sticks to the left of the screen, ensuring easy access whenever the visitor desires.

close uP (1) The homepage design has a strong focus on typography, usability and overall user experience. (2) Byco has a clean, urban and slightly vintage aesthetic. It’s a simple yet still very creative look that should please the eye of our most demanding visitors. (3) A dynamic carousel slides through the different bike options, highlighting the featured bicycles. (4) The navigation is hidden behind a simple hamburger icon that is pinned to the side of the page, so the user can always reach the content. (5) The layout has been designed with a soft touch and smooth lines to create a warm look, with a larger-than-standard size font and not too much pushy text. (6) I have used a bold text logo to create a strong look in the middle of the navigation. Although it is only a text logo, its prominent position ensures it catches the eye.

My Month what have you been doing this month? There has been a boom in requests for ecommerce, so I have been migrating a lot of customers to ecommerce platforms. which sites have you visited for inspiration? I usually get creative with the client’s imagination and try to create an image from that. what have you been watching? Cloud Atlas. what have you been listening to? ‘Boekatsjakka’ (dub mix) by Asino.

august 2016 55


San FranciSco 15 JULY 2016 Learn all about SVG animations, the Internet of Things, Google’s five-day design process and much more!

Mike MonTeiro

Sarah draSner

PeTer SMarT

lyza gardner

www.mikemonteiro.com

sarahdrasnerdesign.com

www.petesmart.co.uk

www.lyza.com

co-Founder, Mule

uX deSign Manager, Trulia

uX direcTor, FanTaSy

co-Founder, cloud Four

TickeTS on Sale now

www.generateconf.com


Focus on

FOcus On

Grid systems Sam Kapila walks through the key points to remember when developing a grid system for a new project

PROFILE

When I begin a new project, half the battle is starting on the right foot. I imagine others feel the same, as they navigate countless tools and blogs trying to work out what is new and recommended. However, no matter what problem we’re trying to solve, a few elements are always necessary, and one of them is a grid system. While Bootstrap and Foundation are great in many cases, it can take a lot of work to customise them for each project, and the array of options can make them heavy and clunky, with a lot of unnecessary features. With grids, it’s important to find a tool that is lightweight and lets you get to work right away. It should have CSS classes that are easy to use, and it should be responsive design-friendly. Lots of tools break things down by device type (e.g. mobile, tablet, desktop), but with different models and Retina displays, it isn’t that simple. Follow Trent Walton’s advice: introduce a breakpoint when the design itself breaks and not when a new device size should begin. Good grid systems rely on design principles to determine better breakpoints: appropriate column widths for typography; 12-, 16-, 18- or 24-column grids that allow flexibility with how columns can be divided; and consistency in spacing. Relying on clean and lightweight grid systems makes coding a new site a lot easier. It takes out some of the guesswork with structure, but without limiting what you can do.

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

2

1

(1) Simple Grid (www.simplegrid.io) is open source and keeps it simple with a 12-column grid, easy-to-remember class names and nice

3

documentation. (2) Pure (purecss.io) is used a lot by one of my colleagues at The Iron Yard. The documentation is so well done, it’s as if it

teaches devs about better CSS, design and responsive practices. (3) Flexbox Grid (flexboxgrid.com) is particularly

interesting as its one of the first grid systems I’ve seen that is specifically using the flex display option in CSS.

august 2016 57


ShowcaSe

Profile

Profile

Jam3 www.jam3.com

The agency working at the intersection of storytelling, design and technology Having produced innovative campaigns for clients including the Guardian, MTV, Spotify and Facebook – as well as being one of the top 50 all-time FWA winners with over 40 FWA awards – Jam3 has always stood out in the digital industry. The agency consistently pushes boundaries and uses the latest tech to create things that seem impossible. Adrian Belina, partner and executive creative director, explains how the 60-strong ‘Jam Fam’ does its thing. net: How did Jam3 come into being? AB: The name is a reference to our three founding partners: Mark McQuillan, Pablo Vio and me. We started as school buddies in a postgraduate programme in Interactive Multimedia – which sounds so dated now. Shortly after graduation, Mark suggested we join forces. It was a no-brainer, because we all knew each other’s working styles and we all shared the same passion for digital. net: What were your initial goals? AB: Make cool stuff and work with people you like. It sounds obvious, but it’s really guided us well. We always challenge ourselves to make each project better than the last, keep pushing the boundaries and have tons of fun while doing it. We found working that way always attracted like-minded people, so we just kept growing. net: What makes Jam3 stand out? AB: I think we’re best known for creating things that seem impossible. We’re kind of a Batphone you call if you’re looking to pull off something really challenging. I also think we’re known for taking things that little bit further. We really pixelpush hard at the end of our projects – what we refer to internally as ‘adding the sauce’. Nothing goes

58

august 2016

Jam Fam Adrian Belina (standing, with hat) and fellow co-founders Mark McQuillan (seated, with tie) and Pablo Vio (seated, hand on chin), together with some of their Jam Fam


Profile

info Locations: Toronto, Montevideo, Los Angeles Established: 2007 Team size: 60-plus Expertise: Design, technology, original content, storytelling, UX Selected clients: Saatchi & Saatchi, NFB, the Guardian, MTV, Facebook Recent awards: FWA Site of the Year, Gold Cannes Lion, Gold and Silver One Show Pencils, Webbys

august 2016 59


ShowcaSe

Profile

Above The Music Selfie Experiment used WebGL to create musical self-portraits Right For the MTV Video Music Awards, Jam3 invited users to generate their own GIFs of Miley Cyrus

out until we’ve added the sauce. We love the craft, we love all the little details. net: What’s it like to work at Jam3? AB: When new people come aboard, our Slack channel explodes with messages welcoming them to the ‘Jam Fam’. And it really is like a family: we hang out together a lot, starting with a ritual that’s basically a hazing – you have to eat at least one spicy ‘Armageddon’ chicken wing and we film you freaking out and put it on Snapchat or whatever. Around the office, there’s lots of good-natured ribbing, but there’s also tremendous fondness and respect. We also shuffle up our seating plan every couple of weeks based on who’s working on what. Putting team members in close proximity leads to better communication and collaboration, but also creates more camaraderie across the board.

net: Are you all based in Canada? AB: Our main office is in Toronto and that’s where the majority of our team is still located. But we have a production office in Montevideo, Uruguay, a small creative team in Poland, and our most recent opening in Los Angeles with a focus on entertainment clients. We’re seeing lots of growth there. An office in Europe is in the works. net: Tell us about your space in Toronto ... AB: It seemed wrong on every level at first. It was on the ground floor of an old building in the club district, and it had been used as a model suite for some condo project. Pablo and I knew in five seconds this was the spot. It didn’t feel like an office at all, which is what we wanted. We mirrored the windows on the outside for privacy, which provides for lots of entertainment when people use the mirror to do a duckface,

Bear 71 This documentary used remote-sensing cameras to track the movements of a grizzly bear over the course of a single day

60

august 2016

check their teeth or, on one sad day – true story! – pop their zits. net: What kind of client is the ideal fit? AB: We like clients who appreciate the value of design and share our passion for the specific magic only interactive projects can bring. Clients who aren’t afraid to take some risks and have a strong opinion about who they are and what they bring to the table. Clients who don’t want to do things just because it’s the trend. net: You won several awards for your Music Selfie Experiment. Can you tell us about that? AB: Lincoln Motor Company was rebranding itself as a car for people who didn’t follow trends and liked to express themselves in unique ways. We worked with its agency, Hudson Rouge, to

Facebook events Jam3 built a streamlined site to show off new events features


Profile

office culture

AdriAn BelinA Partner Sons of Gallipoli This graphically rich, interactive documentary was created using Pixi.js and WebGL

create something that would let people express themselves through music. Basically, we scanned your face and the site would look at your features and create a customised music track based on that. There were literally four million possible permutations, all generated dynamically while you watched. The site was launched during the Grammys broadcast and it just went gangbusters. net: What other work stands out for you? AB: In the same pop culture vein, we loved watching what happened with the work we did with Miley Cyrus for the MTV Video Music Awards. We created a tool that would let people remix images of Miley in all kinds of freaky ways. The kids ate it up. We knew there would be a bazillion assets coming in, and if anything was glitchy, this audience would call us out on it. We used a Node.js- and MySQL-based backend to scrape Twitter and Instagram and find all the entries; and S3 and Elastic Transcoder to quickly transcode uploaded videos for use on the web. A combination of Elastic Beanstalk and a CloudFront CDN allowed for full scalability and fast response times. We offloaded dynamic canvas thumbnail generation to web workers to ensure smooth playback. It was pretty complex! net: One of your core principles is ‘story’. Why is this so important? AB: One of our creative directors says we probably invented storytelling before we

invented fire. Storytelling is hardwired in society. It’s how we communicate, it’s how we remember things, and it’s how we create new things. It’s how we make sense of the world. In a more specific sense, storytelling became extra important to us in the early 2000s with the advent of Flash. Suddenly, animation, video and sound meant that web design could be so much more experiential. That was the moment when we really got hooked – and we still are. It’s what’s led us into all the interactive documentary work we’ve done, and now VR as well. net: Your interactive documentary Sons of Gallipoli tells the story of WWI through the eyes of the mothers of fallen soldiers. What were the challenges there? AB: The real trick here was to enable two kinds of experience: the first was the linear documentary experience at the heart of the site; the second was a more exploratory experience that allowed you to check out secondary content in asynchronous ways. It all had to function smoothly and intuitively or else it would take people out of the experience, which, because of the subject matter, was pretty intense. We used Pixi.js for the historical map, chapter nav and all the hotspots, and WebGL for the parallaxed illustrations. For the secondary content, we built a CMS on top of Cockpit and created a custom exporter that allowed us to use all the data within our framework.

What’s on your desktop?

A neon orange skull, a Canadian Mountie whose hand waves at you, and a bobblehead of myself that I got as a gift.

What little things make your life worthwhile?

At work I love getting and giving high fives, watching juniors become seniors, traveling to amazing cities, and working in a such an social industry where your client or even competitor can end up becoming your friend.

What do you have on the walls?

I love interior design, but I have an incredibly difficult time choosing art. After having bare walls for ages, I’ve finally purchased a photo print from a project called Bottom Ash Observatory.

What hours do you work?

All of them! Although I step away from the computer and get out of the office within reasonable hours, your brain never really punches out when you’re an owner. Your biz is your baby and it’s natural to get inspired at random hours.

What else do you do in the office?

Beer O’Clock, which is a Friday afternoon presentation on anything you want; Jam3 Days, where we close the office to do something fun like bowling or curling (because Canada) and even overnight camping, which we call Camp3.

Describe your working culture in three words Let’s make awesome.

august 2016 61


ShowcaSe

Profile

timeline

A look through the important dates in Jam3’s growth 2003 Mark, Pablo and Adrian meet on an Interactive Multimedia programme

2007 Shit gets real. The partners officially tie the knot and incorporate Jam3

2008 Jam3 moves out of the garage to its first office in downtown Toronto

2009 Jam3 and NFB launch Waterlife, the first of many projects together

2010 The first annual Jam3 Day staff outing

2011 Expands to a larger space in Liberty Village

2012 Bear 71 wins FWA Site of the Year, a Gold Lion and a Gold Pencil

2012 The first hack day event. Coding until the sun comes up

2014 Jam3 moves to current space in Toronto’s entertainment district

2016 The team breaks 60 people with new offices in LA, Montevideo, and Europe

62

august 2016

Jam Fam The Jam3 team has grown to over 60 people since its launch. Flexible seating plans, plenty of extra-curricular events and a questionable hazing ritual for new starters keep the team together

net: What qualities do you look for when you’re hiring? AB: Skill, passion and positivity. We have a strict ‘no assholes’ policy, no matter how talented or experienced you might be. When we’re looking to hire someone, it comes down to whether we’d want to work with them, but also whether we’d want to hang out with them after work. net: You contribute a lot to the open source community. What benefits does this bring? AB: Lots! Obviously, it gives us a better presence in the dev and broader web community, but we also get amazing feedback from that community about our code libraries and research. It means a lot of new hires already know how we work when they arrive. We are always happy to see our stuff forked and remixed on other projects, and of course, we love seeing people blogging and tweeting about our code. We share to give back to the community, and that’s its own reward. But getting a little buzz out of it doesn’t hurt. We’ll take it! net: Does open source work cause complications with clients? AB: Some clients aren’t used to seeing a project that uses dozens or even hundreds of open-source libraries, but we explain to them that we only open-source some of the nuts-and-bolts aspects, and not the core elements that make a project unique. That’s right in our contracts for transparency. We also built a server to comb through all the third-party library licenses we use so we know that everything’s legit. Fundamentally, we believe in open-source

as long as it’s done responsibly. It’s just good for everybody. net: Many of your projects involve building brand new technologies; does this make your workflow unpredictable? How do you manage that? AB: We’ve never really known any different, so we just deal with it! We just try to stay ahead and future-proof ourselves. When we have downtime, we’ll do some experiments, build a prototype, or mess around with something we’ve been curious about. We also do hack days, where a large number of us experiment together to try and crack a new problem. You have to just accept that change is always happening and pick your battles. If a timeline is tight and we’re looking at a fixed launch date, that’s probably a bad time to experiment with something new. But if everything’s under control, we’re never afraid to push it a bit. net: How do you choose which new tech to invest time in? AB: Not every new piece of tech is relevant to the project at hand. There’s a great quote from Clay Shirky about our current state of information overload. He says, “It’s not information overload; it’s filter failure.” We try to filter all the stuff we hear about through the lens of our specific client and project needs at that moment in time. That keeps you from chasing shiny things without a good rationale. Specificity is everything in this game. Next month: Google senior designer Sebastien Gabriel


ShowcaSe

How we built

How we built

Greenwich Peninsula Uniform brought a regeneration project to life with a stylised 3D paper world that can be explored in the browser 2

1

5

3

6 4

brief Uniform was recruited to build a site for London’s Greenwich Peninsula, one of the largest regeneration projects in Europe. The centrepiece of the site would be an interactive paper world that users could explore, to understand how the area will evolve.

64

august 2016

Close up (1) The paper world is a cutting-edge, 3D animated, interactive website, giving people an opportunity to explore the huge masterplan and get a sense of the vision for this new London destination. (2) Users can navigate the world in a similar way to Google Earth, zooming down to any of the seven districts to find out more information, explore in more detail, and access more content. (3) Each district has 360-degree imagery, allowing users to hold their iPad or smartphone up in the air and get a sense of the place. (4) There are also films

about each district, telling the story of the character of each area, and the type of people that might live and work there. (5) Animated features come to life, including cable cars and planes, alongside proposed ideas such as the floating running track. (6) The site was designed to work across multiple platforms, but also in a standalone application in the developer’s marketing suite within a small cinema space. Here the content is even richer and more immersive, with surround sound to match the visuals.


How we built

nick Bentle y

DaviD challener

James Pick forD timeline

Key dates in the Greenwich Peninsula project oCt 2015 Nick is a co-founder and creative lead at Uniform. He directed the site design for the Greenwich Peninsula project w: uniform.net

David is technical lead across all of Uniform’s digital projects, and led the implementation on the Greenwich Peninsula project t: @firedave1

Still image specialist James is senior 3D artist at Uniform and created the Greenwich Peninsula digital paper world t: @pickfordj

The team develops the brief, and researches how to represent areas where there is little actual collateral

nov 2015 The Greenwich Peninsula project (greenwichpeninsula.co.uk/vision) is a bold plan to redevelop 150 acres of land around London’s O2 Arena, regenerating a largely neglected space into a vibrant environment for living and working. Land developer Knight Dragon brought in creative agencies Made Thought and Uniform to create innovative marketing tools for the project, the key component being a stylised 3D model that could enable viewers to get a feel for life on the peninsula. Here, creatives from Uniform explain how the project panned out. net: Can you tell us about the brief? NB: Knight Dragon came to us with an ambitious new concept for marketing the peninsula: rather than a printed brochure or a simple website, they wanted to create a stylised 3D model – a digital ‘paper world’ in which the viewer could explore and interact with the bold vision for the area. net: How long did the build take, and how many people worked on it? NB: We benefited from being an integrated agency, so we had guys from lots of different disciplines all working together. A total of about eight people were involved, including 3D artists, creative and art directors, developers, illustrators and graphic designers. The project took about three months, but we’re now in a new phase to develop it further, add more content, create new experiences. There’s an appetite from the client to keep it moving.

net: How did you come up with the eye-catching paper aesthetic? NB: The paper world, developed with Made Thought, is key to the proposition for the area; it’s about differentiating it from other major London destinations. It allows everyone involved in all communications and marketing for Greenwich Peninsula to focus on the tone without getting too involved with the details of specific architecture. We wanted a solution that was futuristic, groundbreaking and content-rich. We couldn’t find another example where WebGL, or an interactive approach generally, had been used in this way. You can read some of our thoughts on the role of immersive tech in property at netm.ag/immersive-282. net: What technologies did you use to render it in the browser? JP: We utilised WebGL, as it’s integrated completely into all the web standards of the browser, allowing GPU-accelerated use of physics, image processing and effects as part of the web page canvas. We also utilised three.js, as this is one of the best libraries for working with WebGL. We created the world itself in 3ds Max and rendered it with Vray. We also made extensive use of Flatiron – a plugin that allowed us to embrace detailed texture and light baking to reduce scene size and optimise workflow for web use. It’s easier to use than the in-built 3ds Max solution, and unwraps and bakes in one go, saving us valuable time.

Uniform works with creative agency Made Thought to iterate visual ideas

nov-DeC 2015 It translates this into a visualisation using 3ds Max

nov-DeC 2015 The team plans and tests UX in an offline 3D environment prior to committing to code, to ensure the journey is intuitive

nov-DeC 2015 Animation is added to bring the world to life, incorporating as much as possible whilst maintaining good performance

DeC 2015 Adds pre-rendered 360-degree views to provide immersive, high-quality views at ground level

early Jan 2016 The project goes through multiple review and user testing stages with the outcomes helping refine the design

miD Jan 2016 The 3D paper world is integrated into the client’s existing site and made live

august 2016 65


ShowcaSe

How we built

2 1

evolution

3

The Uniform team walk through the sketches and iterations that fed into the final 3D world (1) Initial sketches of the peninsula layout, exploring how users would interact with the paper world. (2) Early style tests showing the design development and giving a feel of how the world would evolve. (3) To make the buildings appear less flat, we modelled in extra details and paper cutouts in 3ds Max. (4) On this texture map for one of the districts you can see how we baked the lighting information straight into the map to remove the need for real-time lighting. (5) Translating the illustrations into texture maps. For the people, we opted for an angular look to match the style of the buildings. (6) Animating the paper world – the tiny animated details bring it to life. (7) The final touches before we had a finished site: creating loading screens and refining the typography.

4

5

6

7

66

august 2016


How we built net: Can you tell us a bit about the pre-rendered eye-level views? JP: We built the main paper world to be navigable from some distance. The lowest you can fly down to is the ‘top of building’ height. This is to ensure the resolution of textures and models stand up well. We felt the best way of showing the eye-level views in the online version would be to pre-render them, so we could ensure the quality is as high as it needs to be. net: How did you ensure it would all perform well? DC: There were multiple stages of testing that took place throughout development. To begin with we were trying to add too much detail and texture, but soon found the experience didn’t work smoothly on certain platforms. The amount of animation also had an effect on performance, so we went for a scalable approach that tailors the experience by removing certain elements depending on the device it’s being viewed on. net: What was the biggest technical challenge? How did you overcome it? JP: Preparing our models for online use was a technical challenge for us as we’re used to throwing as much detail as possible at our photo-real CG images. Working with small file sizes to keep the loading times down, adjusting to work low-poly, low-detail, and with smaller texture sizes taught us to be clever with the process. We also ran the files through the three.js editor to create

Eye level The team regularly critiqued the 360-degree views at eye level, to ensure they communicated the right characteristics of each area, and the people placement worked well with the camera

JavaScript versions of the models. These were orders of magnitude smaller, which helped speed up the initial delivery of assets; something we’d identified as a key aspect in the project’s success. net: How much cross-browser testing did you need? DC: In short, a lot! As well as testing across different browsers on desktops and laptops, we tested on a variety of different devices. Although three.js is constantly being worked on and is the leader in WebGL development, there are still features that don’t work on some devices and browsers.

We use feature detection to serve the version appropriate to each browser – we don’t have animations or some of the more complex post-processing effects on the laptop version for some browsers. Where possible we have provided polyfills and fallbacks so the same level of experience can be shared on the greatest number of devices. net: What sort of feedback have you received since the site launched? NB: The client is particularly pleased we’ve created a tool that’s completely different in the industry, and there has been a high level of engagement both online and in the marketing hub. net: What’s your favourite part? DC: The purpose of the 3D world was to provide a fantastic way to visualise and interact with a map. There’s been great feedback on the cable cars, clouds, boats and other vehicles, the running track and the camera zooms. JP: Getting down to the 360-degree views and understanding the space. It’s particularly good on a tablet or smartphone.

Parkside 360 The unwrapped ‘equirectangular’ 3ds Max rendered image from the Parkside district that was used to create each of the eye-level views, rerendered on the inside of a sphere in three.js

Next Month: Leo Burnett’s online tool to fight online bullying

august 2016 67


Cover feature

The gap between native apps and web apps is narrowing. Here, Chris Mills puts the spotlight on progressive web apps, and explores how they can help our apps level up

Author Chris Mills Chris (@chrisdavidmills) is a senior technical writer at Mozilla, where he writes documentation about Web APIs, htML and CSS. he also leads the learning area at netm.ag/learn-282 ILLuStrAt0r linzie hunter Linzie’s hand-lettering and illustrations have appeared in books, magazines and ad campaigns for clients including Nike, the BBC, Marks & Spencer, and random house www.linziehunter.co.uk

The capabilities available to websites and apps have changed a lot since the early days of static pages. Even in recent times we’ve seen many significant advancements: native animations, simple flexible layouts (finally), real 3D graphics and streaming video, to name but a few. But there is still more to do, especially if the web is to compete effectively with native platforms. Spec writers and browser engineers have been looking at the features that make native platforms and their apps so popular, seeing how the web matches up, and working hard to fill any holes in the web platform’s capabilities. Essentially it boils down to a handful of killer features, some of which are pretty simple to implement, others not so much. The following isn’t an exhaustive list, but it covers the main areas. Native apps are:

● Offline: Web connectivity feels ubiquitous in many parts of the world, but it can’t be relied on 100 per cent of the time. It is annoying to not be able to use an app at all just because you are offline, and it needn’t be that way any more. ● Engaging: Once you’ve got a user to use your app, half the battle is over. But how do you keep them engaged and on top of the latest updates? Native app developers have long enjoyed the availability of push notifications for updating users. ● Speedy: Native code performs better than web code, or so some say. But as you’ll read later on, the gap is closing rapidly. However, the web also has some particular benefits. It is:

● Installable: Having the app available on the device and integrated with the underlying OS feels good – even better if you have a nice little tappable icon on your homescreen, and the app opens full-screen or in its own chrome. It’s the simple things, right? ● Discoverable: Us web nerds don’t really like closed app stores, but we can’t deny they improve the experience of finding apps – although some argue that even the best closed app stores are failing because of overcrowding.

● Linkable: It is possible to link to a web app at a given URL. ● Responsive: With tools like media queries, you can create complex app layouts that work across a variety of form factors (orientation, resolution, screen size, and so on). In fact, the web’s default layout model is inherently responsive, which makes it especially good for handling text. ● Data-centric: With HTML to provide semantics and structure, the web is great at handling data.

august 2016 69


Features Cover feature

Q&A BruCe LAWSoN opera’s deputy Cto shares his predictions for progressive web apps CM: Are progressive web apps going to make your breakfast cereal taste better? Bl: Totes – they’re more nourishing than sugar, and sweeter than honey. CM: seriously though, what problems are you hoping will be solved by this movement? Bl: The problem is the UX gap between native apps and the web, now we pretty much have API parity. Native apps can be ‘installed’ to the homescreen and tickled into fullscreen glory with your finger. PWAs add this UX feature (because UX is a feature) so you can save a web app to your homescreen, just like native. And with Service Worker, it can run offline. But, better than native apps: it never needs updating! The app lives on your web server. If you’re old as me, you might even call it a website, progressively enhanced into an app. CM: What new challenges are developers likely to face when coding such apps? Bl: Making an app manifest is easy. In fact, I made a generator to help you: netm.ag/ manifest-282. The biggest challenge is getting to grips with Service Worker, which is very powerful and therefore can contain many moving parts. CM: What impact will progressive web apps have on the developing world? Bl: We’re seeing the first progressive web apps coming out of India and Indonesia. That’s because there’s very little to install on lowerspecced devices (measured in KB, not MB). Flipkart in India made one because it wants to reach every phone, on the flakiest networks: the UX of apps, the reach of the web.

Pokedex.org Nolan

Lawson’s Pokedex.org provides a great example of a progressive web app that is also a huge amount of fun!

Kana this (getkana.com/

app) is a useful web app for anyone wishing to learn Japanese Kana characters

● Progressive: You can write web apps that give modern browsers the latest shiny goodness, while still providing an acceptable experience on legacy browsers. ● Secure: The web provides capabilities for apps to be secure, with its single-origin security model, and HTTPS. Creating secure web apps has become even easier thanks to initiatives such as Let’s Encrypt (see mzl.la/encrypt for more info). We want to create a web that allows for the kind of killer features found in native apps, but not at the expense of the basic things that it already does really well. This movement is termed progressive web apps, and is being championed by organisations including Mozilla and Google. Later on we’ll look at the new technologies that are enabling such advancements, but first let’s talk a bit about other approaches to helping the web catch up to native. Note: What’s interesting is that native app platforms are working on closing the gap with the web too, from the other direction. For example, with Rube Goldberg-esque contraptions that enable deep linking.


CSS | htML | JavaScript | typeScript

APAChe

CordovA

WhAt CAMe Before Apps with native capabilities aren’t a completely new concept. For a start, there have been many packaged ‘web’ app formats appearing in various places – for example Chrome apps – which allow verified packages to be installed on a device so they are usable offline, and have permission to access device hardware and the like.

We want a web that allows for the kind of killer features found in native apps We have had so-called ‘hybrid app’ tools for a while, for example Cordova and Electron. These allow developers to write apps using web technologies, and then translate them into native apps that will run on iOS, Android and so on. Tools like this are very popular, but they require several versions of an app to be created and distributed, and there are some limitations on the functionality that such apps can support. Not quite ‘write once, deploy anywhere’ as we know it. Also important is the offline-first movement. Advocates have experimented with and evangelised

the idea of creating web apps that will run offline by default, and then connect to the network to receive updates only if it is available. And before moving on, it is worth mentioning the single-page apps movement. In this, one single HTML page acts as the app’s container and loads the different views dynamically using XHR (or similar), with the aim of making web apps snappier and more responsive. This is the kind of app model supported by popular frameworks like Ember.js and AngularJS and, along with offline-first, forms the basis of a large part of progressive web apps.

Apache Cordova

Cordova gets us some of the way across the web/ native divide by allowing us to write apps in web code and then produce native app versions

instAllAtion And disCoverABility The first area of progressive web apps we’ll look at is installation and discoverability. This is made possible using the web app manifest, which is a JSON file containing information about the web app, such as icons, name, and display mode to use when opening the app: { "name": "My sample app", "short_name": "My app", "start_url": "./?utm_source=web_app_manifest", "display": "standalone", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "type": "image/png" }] ...

august 2016 71


Features Cover feature

This can be used to integrate the app more with the underlying OS (icon on homescreen, opens fullscreen instead of in the browser app, and so on), and in addition provides better discoverability on app listings – for example, it will appear in search engine results. This information is already used by Opera and Chrome on mobile for platform integration, with Firefox support following soon.

offline

top left tapping on a

desktop icon to open your favourite app is a key part of native app uX; the web app manifest is bringing this to web apps, too

top right harald Kirschner’s chromatic tuner app (netm.ag/chromatic-282) is a nice progressive example that works well on desktop or a mobile device

72

august 2016

The web’s offline problem has persisted for an incredibly long time, considering how simple it appears to be at first glance. The trouble is that implementing an effective offline technology set is far from simple. Storing an app’s data offline is not too much of a problem – modern browsers have had APIs like IndexedDB for a while now, with web storage being supported as far back as IE8. Asset storage, on the other hand, is a different ball game. For a while it looked like AppCache was going to solve this problem, but it proved not to be. Far too much was assumed about the way an app would be set up, and the developer didn’t have enough control over what was happening. Fast-forward to now, and we have Service Workers; a new technology available in Firefox, Chrome and Opera that allows developers to write offline apps in the same vein as AppCache, plus a lot more besides. It is a much lower-level API, and consequently the syntax is a lot more complicated, but it does give

developers a lot more power over how they want their Service Worker interactions to work. A Service Worker takes the form of a chunk of JavaScript written in a separate file and running in a special worker thread. It acts as a proxy server, sitting in between the network and your app (and the browser). When a request is made for an asset, the Service Worker can intercept it and customise the response before it is sent back to the browser to be used. To use a Service Worker, you first need to register it by running navigator.serviceWorker.register() in the main thread. navigator.serviceWorker.register('sw.js') .then(function(reg) { // do something to initialise app }); Then install the app using an install event listener over in the Service Worker thread. This often involves storing all the app’s essential assets using the Cache API (which incidentally can be used independently of Service Workers): this.addeventListener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.addAll([ '/sw-test/', '/sw-test/index.html',


Cover feature '/sw-test/style.css', '/sw-test/app.js' ]); }) ); }); Next, use a fetch event listener in the Service Worker to fire code whenever a request happens. This allows developers to customise the resulting response. So a developer could cache each request for files that don’t change much (such as the UI shell) in the install step, and then serve the versions stored offline in the cache when they are requested, instead of the network version. Bingo, offline apps!

hoW to deBug ServICe WorKerS Debugging Service Workers and related code can be tricky. Since Service Worker code runs in a separate thread and behaves differently to standard workers, we can’t just show them alongside normal scripts in browser DevTools. They need to be exposed separately to allow developers to see the full picture. Firefox has had Service Worker tools as of version 47 (Developer Edition, at the time of writing). You can find the tools by going to ‘About > Debugging’ and clicking on the Workers tab on the left-hand side of the page.

Service Workers are a new technology that allows developers to write offline apps fixing bugs debugging Service Workers (and other worker types) in Firefox has become a whole lot easier in version 47

this.addeventListener('fetch', function(event) { var response; event.respondWith(caches.match(event.request).catch( // write code to handle case where the requested file // isn't already stored offline in the cache ); }); It’s worth noting that Service Workers will only work over an HTTPS connection.

From here you can see a list of all workers (service, and other kinds) present in the browser, along with buttons to allow you to start and stop Service Workers, and debug them. This dashboard will update automatically as workers are registered on the browser. When the Debug button is pressed, a separate instance of the Mozilla DevTools toolbox will open to allow you to see console messages from the Service Worker, inspect the code, and so on. Chrome has had similar Service Worker tools for a few versions now. Take a look at the chrome://serviceworkerinternals page for more details.

user re-engAgeMent Native platforms have long relied on push messaging – the ability to push a message from the server to the client to tell a user that something has changed, or that something new is available – even when the app is not open. Maybe a news app wants to share breaking news with the user? Or perhaps your Pokémon is bored and wants some attention? Well, thanks to the web Push API, we now have this capability for web apps too. To use web push, a Service Worker must be installed and active on your app’s page(s), as explained previously. Then, we subscribe to the

Worker view Chrome also provides a view to allow access to Service Worker internals, making debugging easier

august 2016 73


Features Cover feature updateStatus(endpoint,key,'subscribe'); }) });

push service. This can be done by using ServiceWorkerregistration.pushManager.subscribe() , as shown below:

left System notifications are a great way to provide users with updates right the above

diagram illustrates the lifecycle of a Service Worker installation

navigator.serviceWorker.ready.then(function(reg) { reg.pushManager.subscribe({uservisibleonly: true}) .then(function(subscription) { // update uI, etc. in light of subscription // update status to subscribe current user on server var endpoint = subscription.endpoint; var key = subscription.getKey('p256dh');

This method returns a promise that resolves with a subscription object. This object has an endpoint property (which contains a unique URL pointing to a push server), and a getKey() method, which can be used to generate a public key for encryption purposes. You’ll need to access both of these, then send the results to your app’s server. To send a push message on the server, make a request to the endpoint URL. This causes the push server to send a message to the app’s Service Worker. If you want to send data along with the push message, it must be encrypted using the key. Push message data currently only works on Firefox, but Blink-based browsers shouldn’t be far behind. The Service Worker listens for a push message using a push event handler. Once a push event is fired, you can access the message data using the event object’s data property. Then you can respond to the message however you like – for example by firing a notification, or sending a channel message back to the main thread to update your app in some way. self.addeventListener('push', function(e) { var obj = e.data.json(); // respond to the push message in some way

reSourCeS

tooLS ANd BLogS

● the service Worker cookbook (serviceworke. rs) – Useful real world recipes for Service Workers and Push ● oghliner (mozilla.github.io/oghliner) – Node tool for converting apps to offline using Service Workers

● Platform status (platform-status.mozilla.org) – Platform status dashboard for implementing modern web app APIs in browsers ● emscripten (emscripten.org) – Tool for transpiling native code to fast JavaScript ● service Worker and Push devtools (netm.ag/ addition-282) – Additions to Firefox DevTools to help debug Push and Service Workers ● WebAssembly (webassembly.github.io) – Early news and info on WebAssembly

● the Mdn App Center (developer.mozilla.org/ en-US/Apps) – Mozilla’s hub for modern web app development techniques ● Progressive Web Apps (netm.ag/ progressive-282) – Top-class Google tutorials on implementing progressive web apps ● Offline first (offlinefirst.org) – The offline-first landing page, containing information and

Now you’ve been introduced to the wonderful world of web app development, you’re thirsty for more, right? Follow these links for more information on subtopics I’ve covered.

74

august 2016

tutorIALS

further links to DevTools to help debug Push and Service Workers

reFereNCe doCS ● Web App Manifest (netm.ag/webapp-282) – Guide for the Web App Manifest format ● service Worker (netm.ag/service-282) – Reference for the Service Worker API ● Push (netm.ag/push-282) – Reference and tutorial for the Push API ● notifications (netm.ag/notify-282) – Reference for the Notifications API, including related tutorial ● Channel Messaging (netm.ag/channel-282) – Reference for the Channel Messaging API, including related tutorial


Cover feature

// e.g. a notification or channel message }); Note: Most of the Service Workers family of technologies (Push and so on) enjoy reasonable support across Chrome and Firefox, with other browsers considering them carefully. Push data only works in Firefox at the time of writing.

PerforMAnCe Performance has long been a sore point between web apps and native apps, with native developers dismissing the web’s performance capabilities. But the divide is significantly narrower in the modern day, with much faster JavaScript engines in browsers, and fast in-browser code for running things like animations and 3D graphics, which can increasingly take advantage of available GPU power. In addition, we are now capable of transpiling native code (such as C++) across to JavaScript, using technologies like Emscripten. When we say JavaScript here, we are talking about asm.js, a highly-optimisable subset of JavaScript that can take advantage of AOT compilation techniques to provide near-native performance. This has proved so popular that it is being supported in not only Firefox, but Chrome and Edge too, and asm.js/web has been added as a publishing target for popular 3D engines Unity and Unreal. And the next generation is on its way – a number of browser vendors are collaborating on speccing

out and implementing WebAssembly, which will do a similar thing to Emscripten, but in a faster, more standard, more performant way. It will use a format called wasm, rather than asm.js. Given that it will have a concrete spec, we should be able to rely on compilers outputting valid wasm, and browsers then running that output consistently, regardless of which compiler created it. Watch this space.

Platform status this

app from Mozilla (platformstatus.mozilla.org) provides progress information on the implementation of modern web APIs in browsers

There are some exciting new technologies designed to address the web’s shortcomings ConClusion As you can see, the web is continuing to evolve, with some exciting new technologies designed to address some of the remaining shortcomings our beloved platform has traditionally suffered, as well as boasting even better performance. These will allow web apps to stand proud beside native apps, while not losing sight of what made the web great to begin with.

august 2016 75


Secondary feature

The incredible power of flexbox With every browser but IE fully supporting flexbox, it’s time to put this powerful layout module to use. Mat Vogels breaks down how to get started

F

Author Mat Vogels Mat (@matvogels ) is a designer and leads the education efforts at Webflow, where they are changing the way we build on the web webflow.com

lexbox is going to change the way we build for the web. Forever. OK, that’s maybe a little grandiose. But in just a few years of even partial browser support, flexbox has already converted many doubters into believers through its power to dramatically simplify the way we tackle difficult layouts. Flexbox, or the Flexible Box Layout, is a powerful CSS layout module that gives web designers and developers an efficient and simple way to lay out, align and distribute elements in a container. It solves many layout problems we have been struggling to solve for a long time. Although flexbox has only recently come into its own as a web standard, it was first introduced to the spec in 2009 (or 278 years ago in internet time). Since then it’s gone through two iterations

(in 2011 and 2012) that have brought it to its current form. Flexbox is currently considered a W3C Candidate Recommendation and is stable to use in any of your web projects. While flexbox can be used to create full site layouts, it really shines when used for specific subsections of your site.

Flexbox basics In its most basic form, flexbox is made up of two elements: a flex container (or flex parent) and flex items (flex children). A flex container is a containing element (like a div ) given the display property flex . Flex items are child elements of a flex container, which can be manipulated through various display properties. Flex containers and flex items each have their own range of properties that can be combined in different ways to

august 2016 77


Features Secondary feature

start learning there are plenty of online resources, like Webflow, that can help you learn flexbox

complex layouts Flexbox can be used to design complex layouts, like this split-screen design, with ease

browser use If most of your audience uses IE, you may want to avoid flexbox

browser support Internet Explorer is the only browser that doesn’t fully support flexbox

create a range of complex layouts. Items inside a flex container can be laid out horizontally or vertically, aligned and distributed in various ways, and stretched or shrunk to fit the available space. All these options let you easily create responsive layouts.

versions that don’t support flexbox at all. Even the most updated version (IE 11) only partially supports it. 10 years ago this would have been a huge red flag, but since the emergence of Chrome and Safari, IE usage has plummeted. As of April 2016, IE’s audience is in the range of 10-15 per cent (gs.statcounter.com) across all devices. That’s a fairly low percentage, but it still represents a lot of people. The most important thing to remember when considering whether to use flexbox is your audience. If the majority of them still use IE, tread carefully. If 99 per cent are on Chrome, go wild!

is the web really ready For Flexbox? The short answer is yes – but your mileage may vary. As mentioned, flexbox is a W3C Candidate Recommendation and is stable on nearly all browsers. The exception? You guessed it: Internet Explorer 8 and 9 are the only browser

In this guide, I’ll walk through how you can create a flexbox layout, using both Webflow’s graphical user interface (GUI) for flexbox, and standard CSS.

how to use Flexbox To start using flexbox, you need to first create your flex container (the parent element that will contain your flex items). In this example, we’ll use a div block. Before we style the element, let’s add three more div blocks inside our flex container to act as the flex items. At this point, the items will be stacked. With our child divs in place, we can set the parent container’s display property to flex . Flex Container { display: flex; }

layout directions The layout direction is simply the direction your elements will distribute themselves. The default direction of a flex container is row , which will display the child elements horizontally. You can switch the layout to vertical by setting the direction to column .

starting layout Notice that each of our flex items are stacked since we haven’t added display: flex; yet

78

august 2016

Flex Container { display: flex; flex-direction: row; }


Secondary feature

horizontal layout With the parent container set to flex, the items inside it distribute themselves horizontally

orientation options (L-r) the desktop layout; mobile layout; mobile layout with the direction reversed

Flex Container { display: flex; flex-direction: column; } Whichever direction you set on your flex container is referred to as its ‘main’ direction, while the other direction you didn’t choose becomes the ‘cross’

Items inside a flex container can be laid out horizontally or vertically, aligned in various ways, and stretched or shrunk to fit the space direction. Thus, by default, the main direction will be horizontal and the cross direction will be vertical. Flexbox also lets you reverse the layout. When reversed, children of a flex container will be laid out right-to-left (if direction is row ) or bottom-to-top (if direction is column ). Flex Container { display: flex; flex-direction: row-reverse; }

Flex Container { display: flex; flex-direction: column-reverse; } This can come in handy if you want to reverse the layout on smaller screens. For example, let’s say on desktop screens you want to display text on the left side of the screen and an image on the right (see surfboard image above). On mobile, this would move the image below the text. By reversing the direction, you can ensure that the image appears above the text instead.

adjust alignMent Flexbox’s settings also give you two different methods for aligning content: vertically and horizontally. Here are your horizontal alignment options for items inside a flex container: ● flex-start : Items set toward the start of the row (left, unless you’ve reversed the layout) ● center : Items centred within the row ● flex-end : Items set towards the end of the row (right, unless you’ve reversed the layout) ● space-between : Items evenly distributed along the row ● space-around : Items evenly distributed along the row, with equal space on either side of each element

display setting With Webflow, you can visually manipulate your flex items’ layout direction

Flexbox experts

The team behind the Flexible Box Layout Module isn’t the only one singing its praises. The following designers and developers are great people to follow for more insights and tips.

jen simmons

Designer advocate at Mozilla, host and executive producer of The Web Ahead t: @jensimmons

chris coyier

Founder of CodePen and CSS Tricks t: @chriscoyier

sara soueidan

Freelance developer, author of Codrops’ CSS Reference, and co-author of Real-Life Responsive Web Design t: @SaraSoueidan

gadzhi Kharkharov

Designer at Webflow t: @kkga_

august 2016 79


Features Secondary feature So the code might look like this: Flex Container { display: flex; flex-direction: row; align-content: flex-start | flex-end | center | space-between | space-around | stretch; } Here are your vertical alignment options for items in a flex container:

horizontal layouts there are several options for aligning items along the horizontal axis

child properties Flex items can also have their own flex-based properties

adjusted size Flex children can adjust their size to fill available space

resources

● flex-start : Items aligned to the top of the row ● center : Items are centred within the row ● flex-end : Items aligned to the bottom of the row ● stretch : Items stretched across the height of the row ● baseline : Items aligned to their baselines (the imaginary line that text sits on)

Flex items also get their own flex properties. When an element is placed inside a flex container, it becomes a flex child, and is granted its own set of flex-based CSS styles

Flexbox defense

The code might look like this:

www.flexboxgame.com The Flexbox Game allows you to visually solve flexbox layout puzzles without writing a single line of code. If you’re a visual learner, this is the one for you.

a complete guide to Flexbox

Flex Container { display: flex; flex-direction: row; align-items: flex-start | flex-end | center | baseline | stretch; }

Flexbox Froggy

Flexbox layout examples

Learning flexbox has never been easier, with a variety of resources available across the web. With these guides, resources and games, you’ll be flexing your flexbox muscles in no time.

the Flexbox game

www.flexboxfroggy.com An online game that teaches you the basics of flexbox while you help some frogs get across a pond. It’s never been easier to jump into flexbox.

80

august 2016

www.flexboxdefense.com Who says flexbox isn’t serious? In this game you’ll use common flexbox layouts to position cannons and thwart oncoming waves of enemies.

netm.ag/complete-282 CSS-Tricks is a great resources for all of your flexbox code snippets. Be sure to bookmark this one.

www.flexbox.webflow.com At Webflow we’ve designed and built some of the most common flexbox layouts around. Here we teach you how you can easily create them yourself.

By default, a flex container’s children will always try to fit on a single line. If you want to change this, you can add the wrap attribute. This allows children to wrap to a new line if they run out of space. Flex Container { display: flex; flex-wrap: wrap; }


Secondary feature By default, flex items display in the same order as they appear in the source code. With flexbox, you can override this behaviour to ensure elements display in exactly the order you want. The are four main options you can use here:

Flex size there are three different preset options for flex sizing

sizing options the three most common sizing presents in action

Flex items also get their own flex-based properties. When an element is placed inside a flex container, it automatically becomes a flex child, and is granted its own set of flex-based CSS styles. These styles control sizing, alignment, and display order.

Flex sizing Flex children can alter their width or height (depending on the container’s layout direction) to fill available space. Webflow gives you three preset options for flex sizing: shrink if needed, fill empty space, and don’t shrink. Note that each child element can have its own settings, which allows for a plethora of design options. Flex Item { flex-shrink: <number>; flex-grow: <number>; flex-basis: <length> | auto; } Let’s take a look at what each of these options does:

● Shrink if needed: Sizes the item based on its width/height or its content. The item won’t grow larger than it needs to, but may shrink to its minimum size to prevent overflow ● Fill empty space: Allows the item to expand to fill all available space inside its parent. If you set this on all items in a flex container, they’ll expand to take up equal amounts of empty space ● Don’t shrink: Sizes the item based on its width/height or its content, but doesn’t allow it to shrink, even if that will cause overflow Flex items can also have their own alignment settings, which override the default alignment set by their parent flex container. These alignments behave as explained previously. Flex Item { display: flex; flex-direction: row; align-items: flex-start | flex-end | center | baseline | stretch; }

● Auto: The default value, which orders items as they are in the source ● First: Item appears first in its flex container ● Last: Item appears last in its flex container ● Custom: You can customise the order your item will be displayed in Custom order can be defined as a number, which specifies the order in which the flex item appears inside a flex container. Flex Item { order: <integer>; }

why should i use it? I’m glad you asked! Using flexbox allows you to easily create responsive layouts that were once very difficult (or impossible) to create with older CSS layout modules. Take a look at the examples in the image below – many of which you’ve probably already seen across the web. Almost all of them would take a considerable amount of CSS (especially across different screen sizes), but only take a few simple lines to achieve with flexbox. To see these examples in action, visit flexbox.webflow.com.

endless possibilities (From top left): Split-screen layout; flexible grid; hero cover; pricing table; grid with featured item; equal-height elements; split grid with featured item; holy grail; alternating list; fixed footer; vertical centre; sidebar

august 2016 81


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


Tips, tricks & techniques

tHiS montH feAturing... AnAtomy of A component

JuSt A cLASS

84

102

108

@metADAtA

HtmL cSS DirectiveS SeLector

Responsive design foR enteRpRise sites

84

head to head: webpack vs bRowseRify

97

web standaRds: semantics in html

fill youR sketch designs with data

90

10 poweR tips foR atom useRs

98

eXploRe the new featuRes in angulaR 2 108

tackle youR technical debt

94

build an efficient font stack with sass

Desktop

Mobile/tablet

0

0

0

0

0

0

0

0

0

0

browSer Support 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.

inDeX.HtmL Home component About component itemS component

App component

102

106

accessibility: a uX manifesto

114

eXcLuSive viDeoS Look out for the video icon throughout our tutorials. This issue, four authors have created exclusive screencasts to complement their articles, including Matt James’ guide to taking on RWD without the usual resources, and Clark Wimberly’s tutorial on how to add data to Sketch designs using Craft.

august 2016 83


PROJECTS RWD

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

MAt t JAMes w: mattjamesmedia.com t: @mattFrankJames job: Frontend developer, Wells Fargo Advisors areas of expertise: CSS, RWD, JavaScript q: what’s the first video game you ever played? a: Pong

RWD

REsponsivE dEsign foR EntERpRisE sitEs

Matt James explains how you can deliver a modern, performant site when you don’t have access to resources like Grunt and Sass

Video Matt James has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/ RWDvid-282

84

august 2016

The current frontend landscape is a sea of build tools, frameworks and complexities. These resources often aim to simplify the workflow by automating any redundant development tasks, but it’s important to remember that they are not accessible for many developers. For those of us behind a proxy or firewall in an enterprise setting, these tools are either impractical or unavailable due to restrictions, security concerns or other organisational hurdles. How then to handle the task of turning around an aging site to meet the needs of the current multi-device landscape when these time-saving tools aren’t an option? What’s more, how should we approach required content while still providing an efficient and performant platform for the user?

We tackled these issues during our work on Wells Fargo Advisors’ website (www. wellsfargoadvisors.com). Faced with some very real limitations, our team put together a patchwork of available tooling and creative code solutions to deliver a product that respects the user, meets the content requirements and complies with the organisation’s security guidelines.

Performance and knowledge Before getting started, it’s important to note that any process we used would need to respect a number of concerns. Primarily, the site architecture needed to be usable for our content publishers. That meant relying on Sass beyond the initial build was not sustainable. Similarly, a technique


RWD

in-Depth

the Joy of brAckets

old sites In early 2015, the Wells Fargo Advisors site was looking much as it had in 2009

like Critical CSS was out of reach, because it would be too complex for those less versed in frontend development. Whatever product we put in place would need to be maintainable by someone with a basic knowledge of web languages, and remain performant based on our initial work.

Practical challenges

It’s completely possible to get the majority of the basic tasks a command-line build tool provides from your text editor – and sometimes a little more. Adobe’s open-source editor, Brackets, is actually able to provide a lot of these features through its extension ecosystem. Even with a proxy to consider, you can download the zip files for the extensions directly from their respective GitHub repos, drag them into the extension interface in Brackets, and add a ton of functionality. There are extensions that auto-prefix CSS, lint JavaScript, process Sass or Less, and much more. It even has a Node-based, built-in server that automatically updates as you make changes to your files. It’s possible to get so much done with Brackets, you might not even need to reach for further tooling. Brackets also has a feature called Extract that will parse a PSD into a working page with HTML and CSS. While it lacks the ability to add breakpoints, as Reflow or Dreamweaver can, it is another quick way to move right into the browser. As Brackets has matured since its introduction, Adobe has been moving some of its core features into Dreamweaver, even going as far as to make Brackets the foundation for Dreamweaver’s text editor.

When the designs for the site arrived, they introduced a set of complexities that we, the development team, would need to overcome to bring the product to life.

For many, these tools are unavailable due to restrictions or security concerns text editor Adobe’s open source text editor, Brackets

First among those challenges were nine desktop PSDs meant to represent a 90-page responsive site. We needed to get those comps into the browser as quickly as possible and represent the mobile behaviour so stakeholders could view the product in a real-world setting. The second issue was that every page contained a large, full-width hero image that could easily eat up precious kilobytes of users’ data if it was not implemented responsibly. The third major issue was our implementation of web fonts. For a variety of reasons, we were required to host and serve very large web font packages (plural). Even on a good connection, these could take seconds to render. On a bad connection, they

extend it Various extensions help you tackle a whole range of tasks

august 2016 85


PROJECTS RWD

edge reflow This design software enables user to create HTML documents and supporting CSS files

bordered on unusable. Finding a solution to improve user experience and get content on the page before the fonts had fully loaded was crucial. Let’s unpack these challenges individually and look at the ways our team was able to overcome each of them.

getting comPs in the browser The first issue was to get the comps in the browser. There are many tools to do this, but we have the luxury of working with Adobe products, so the Edge Reflow CC programme was a godsend. Despite the fact that it is no longer being actively developed, it is a fantastic tool that is still available in the 2014 and 2015 versions of Creative Cloud. With a properly organised PSD, Reflow will create a structured HTML document and output a CSS file to support it. While the CSS is not ideal for production, it gets the design out of Photoshop and into the browser quickly and efficiently. Once the base design is in place, Reflow allows you to add breakpoints in the interface and reorganise the content, and then it updates the CSS automatically. Suddenly, it’s possible to socialise a working prototype in a real world setting and demonstrate responsive behaviour at the same time.

sleuthing to piece together a workflow that provides the essentials: Sass preprocessing, minification and concatenation of scripts, image optimisation and browser syncing. There’s a lot of capability to be had in a robust text editor. However, there are areas where a build tool can really pick up the slack, and there are a few GUI options that do 85 per cent of the tasks that most people use command line tools for. Our team settled on Prepros. It’s a wonderful tool that does all the things you’d expect: Sass processing, image compression, browser syncing with device testing, minification and concatenation, autoprefixing, and so on. If you’re into Jade, HAML or CoffeeScript, it’ll process those files. Even better, it has Babel.js built in and will transpile ES6 into ES5. Best of all, it’s cross-platform-compatible. That meant those working on Windows 7 could use the same tool as those on Macs. A license is around $30 – pretty cheap considering all it can do. Plus, it has an unlimited trial period.

nested media queries Using these tools, we can call on the power of Sass’ nested media queries to take the desktop styles and back-roll them into a mobile-first style sheet. First, as an example, we’ll take the base styling for the right rail: pageSidebar{ display: flex; flex-direction: column; justify-content: flex-start;

working with Prepos While we’re on the subject of tools, let’s talk about build tools. As amazing and useful as the Grunts, gulps and Broccolis of the world are, they are sometimes not a viable option behind a corporate proxy. Often, it’s a hard sell to introduce open-source JavaScript into a code base that might interact with potentially sensitive client information. Without these tools, it takes a little

86

august 2016

Prepos This GUI tool tackles tasks like device testing and image compression


RWD

width: 25%; flex: 0 0 25%; padding: 0 1em; } Then as mobile designs become available, we’ll pull the styling for larger screens into nested media queries and leave the constants alongside the newly determined styling for small screens: pageSidebar{ display: flex; flex-direction: column; justify-content: flex-start; flex: 0 0 auto; padding: 0 1em; @media screen and (min-width: $bpBig){ width: 25%; flex: 0 0 25%; } @media screen and (min-width: $bpSmall) and (max-width: $bpBig{ flex-flow: row wrap; justify-content: space-between; padding: 0 1em 0 0; } } The same thing is done for every module on the site. Once processed into CSS, the styling for each

module is grouped together in the output CSS, and all devices are covered. Don’t sweat the repetition of media queries throughout the final CSS, as gzip compression on the server largely eliminates the redundancy. Now we’ve got our design into the browser, added some responsive behaviour and met our basic build needs, let’s look at how we’re going to handle the issue of the resource overhead.

image solution

Compressor.io reduces the size of the images on your site, without affecting quality

There are a few GUI options that do most of the tasks command line tools are used for tackling heavy images First up are those hero images. Like the ballast on a hot air balloon, hero images have the potential to drag the whole site to a halt if not handled properly. For mobile devices, it’s easy to reach for an image {display: none;} for a given viewport, but thanks to the browser’s pre-fetching of images, the user pays for the request anyway. Better to lazy-load the image through JavaScript based on screen size. Small-screen browsers will never even make the request, saving a good chunk of data and speeding up loading of the rest of the content. This is the approach we took to conditionally loading those hero images. There are, indeed,

august 2016 87


PROJECTS RWD

Focus on

further resources There are many resources available for developers that don’t have access to the latest open-source tools. These resources can help us build a modern product that streamlines resource delivery and facilitates modern techniques that might otherwise be impossible in a security conscious environment. Prepros prepros.io Prepros.io provides the bulk of the baseline tasks found in command line build tools like gulp or Grunt. With Sass processing, file minification and concatenation, ES6 transpiling, image optimisation and more, Prepros is a viable cross-platform GUI option. brackets brackets.io Brackets is Adobe’s open source text editor. Its extension ecosystem is navigable behind a proxy and can accomplish many of the tasks of a build tool. compressor.io compressor.io Compressor.io is an online tool providing lossy image compression. Using drag and drop functionality, Compressor.io can strip upwards of 75 per cent of an image’s file size without any perceptible loss of quality. imageoptim imageoptim.com/mac ImageOptim is an image compression tool for OSX. It has lossless compression that saves some file size over the standard Photoshop save-for-web, to provide another option in the responsive image srcset attribute.

several different ways to do this, but this is the approach that suited our needs: <div class="heroImg" data-src="/images/mvp/banners/3-1_ banner"><!--all the other top body necessities--></div> This div would contain everything that would go in the hero section of the page: the H1, callout text and call to action. Within the opening div tag is a data-attribute that has a truncated file path to the image we want to load if the screen is above a given size. The script below pulls that data attribute and uses it to generate the image and its relevant attributes: function insertImg(){ var bannerImg = document.getElementsByClassName('her oImg'); if(window.innerWidth >= 750 && (bannerImg.length > 0)){ var imgPath = bannerImg[0].getAttribute('data-src'); var hero = document.createElement('img'); hero.src = imgPath + '.jpg'; hero.srcset = imgPath + '@2x.jpg 1.5x, ' + '@3x.jpg 2x'; hero.alt = " "; bannerImg[0].appendChild(hero); } Once it has created the image, it appends it to the div . This function is called on load, so as the page loads, the script checks the screen size and then creates the image if it is needed. Small-screen users get no image (and no image request) and mid-to-large-screen browsers are provided with three potential resolutions to choose from via the srcset attribute. For our purposes, we were doing simple fixedwidth resolution swapping, but this function could

svgomg jakearchibald.github.io/svgomg SVGOMG is an online tool for SVG optimisation built by Jake Archibald. Its GUI interface lets you upload SVGs, which it then strips of any excess code and provides an optimised download or SVG code for inline use. It also works offline through the use of Service Workers.

resource overhead Even with notable content and resource overhead, it’s possible to deliver a performant experience

88

august 2016


RWD be extended to accommodate the more robust srcset with the sizes attribute and the w descriptor.

image compression Before we even serve the images, it’s going to take a bit of work to generate the appropriate sizes for the srcset . Hopefully, you’re doing a good job with Save For Web in Photoshop, but there are additional savings to be had after the fact. Prepros has a built-in lossless image compression feature, but by far the biggest gains for us came from an online tool called Compressor.io. This tool provides lossy compression and made a huge difference in file size. Admittedly, it’s a bit laborious to upload and download each image individually, but seeing a 200k banner image cut down to 41k makes it well worth the time.

serving web fonts Finally, let’s take a look at the font situation. For reasons outside our control, we were required

Compressor.io provides lossy compression and made a huge difference in image file size to implement two separate, self-hosted web fonts in a manner that was, well, less than efficient. For the body text, a JavaScript file is required first, which then adds a series of classes to the <html> tag and generates a CSS file that uses those classes to apply the font. Obviously, this could take a while, even under ideal circumstances. To deal with this, we lazy-load the necessary files with JavaScript, allowing the browser to display system fonts in the interim while it parses the web font package. It leads to a flash of unstyled text, but we felt it was far better to have content on the page almost instantly. Our solution looked like this. First, we set up a function to lazy-load render blocking resources to the head when called: function loadResource(resource, src) { var type = ""; switch (resource) { case 'text/css' : var item = document.createElement('link'); item.href = src; item.rel = 'stylesheet'; item.type = resource;

break; case 'text/javascript' : var item = document.createElement('script'); item.src = src; item.type = resource; } document.getElementsByTagName('head')[0]. appendChild(item); } Next, we combine that function for our heading font alongside an Ajax call to the script for our copy font: function fontLoader() { loadResource('text/css', '/css/mvp/archerMvp.css'); $.getScript( 'path_to_web_fonts.js', function( data, textStatus, jqxhr ) { try { Typekit.load(); } catch (e) { console.log(e) } }); } This prevents the font dependencies from blocking rendering, providing the user with content almost immediately.

resPonsive results That’s an awful lot of hoop-jumping to arrive at the same place many of you with command line tools could automate down to a fraction of the time. However, it shows that resources are out there to get the job done even with these limitations. Our load times are very respectable: on a wired connection, the first visit is 3.00 seconds, and for 3G the first visit is 5.65 seconds. Not bad, considering what we were up against. If you’re in a more typical development environment with a more refined workflow, you might have read this process and felt the need for a shower. While this approach is certainly more work than the automated alternative, it reaps the same rewards. In some ways, the limitations of an enterprise setting can be almost liberating. There’s no stress about whether you need to switch to gulp because that’s the thing now, or concern yourself over which framework is the right one for your project. You work with the tools available and fall back on a strong understanding of the basics. In a period of extensive dependencies, it’s comforting to know that it’s still possible to deliver the most efficient experience possible through core languages and scrappy resourcefulness.

Video In this talk Scott Jehl describes a number of detailed techniques for optimising your site, and touches on the core concepts from his book, Responsible Responsive Design: netm.ag/jehl-282

august 2016 89


PROJECTS Sketch Exclusive offer!

Unlimited prototypes

Get unlimited InVision prototypes for 3 months! netm.ag/offer-282 Code: INV-NETMAG

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

Cl A rk Wimberly w: clarklab.com t: @clarklab job: Designer, InVision areas of expertise: UX, design, BBQ q: what’s the first video game you ever played? a: Sneak ’n Peek for Atari 2600

sketch

Fill your sketch designs with data InVision’s Clark Wimberly shows you how to use Craft to populate your Sketch designs with real content

Video Clark Wimberly has created an exclusive screencast to go with this tutorial. Watch along at netm. ag/sketchvid-282

90

august 2016

Screen design has come a long way in the past few years. Heck, we weren’t even saying ‘screen design’ a few years ago. As scores of graphic designers and illustrators evolve to tackle screen design, so too must our toolset. We’re no longer creating static, singularly-specced pieces of art – we’re planning living, breathing design systems that must work across a variety of environments. This new set of demands has given birth to an explosion of flexible, focused new tools. My favourite of the bunch is Sketch, a rising star from the team at Bohemian Coding. Sketch lets me work faster than I’d ever dreamed, all while freeing me up to do what I do best: design. It’s light enough to quickly prototype and strong

enough to go high-fidelity when I’m ready. One of Sketch’s biggest strengths is its growing community, which has created a huge selection of plugins that extend Sketch in any direction you want. Craft (www.invisionapp.com/craft), from InVision LABS, aims to power the design workflow of the future. It offers a growing set of tools, all built to save time and add realism while designing. The time comes from countless saved steps (goodbye copy and paste!) and the realism comes from quick access to real data and content (goodbye lorem ipsum!). In this lesson, we’ll take a look at using three key tools from Craft: Photos, Type and Duplicate, to create a complete and realistic screen design for a list of contacts.


Sketch

step 3 Add a tabbed footer, with a floating action button for adding a new contact

step 6 Add text layers where the names and addresses of your contacts will sit

Let’s start by creating a new document in Sketch and setting up an artboard to work inside. In a fresh document, hit Insert > Artboard or simply the A key to activate the Artboard tool. In the right pane you’ll see a menu filled with predefined artboard sizes (created to match popular devices and scenarios). Select iPhone 6 and an artboard will be created for you in the centre of the canvas.

the right. We’ll also add an indicator – a simple black line – to show that the Contacts view is selected. Now’s also a great time to set the artboard background colour (black), which you can do by selecting the artboard and then picking a colour in the Inspector.

01

Although we’re specifically creating a list of contacts in this lesson, we’ll need some extra interface bits to complete the illusion. With the rectangle tool ( Insert > Rectangle or R ), draw out a header across the top of the

02

artboard. Insert the title ‘Contacts’, and some icons for good measure, like ‘menu’ and ‘search’ actions in the left and right corner of the artboard, respectively. Before we get to the data, let’s also build out a quick tabbed footer, complete with a FAB (floating action button) for adding a new contact. With the rectangle tool, draw out a white rectangle and place it at the bottom of the artboard. Using the oval tool ( Insert > Oval or O ), draw a circle for the FAB.

03

Next, insert some icons to show the user where to click: a ‘plus’ inside the FAB, a ‘user’ icon in the left tab, and a ‘history’ icon on

04

With our stage set, it’s time to create a single contact item. This is the item that will be filled with data, duplicated, and arranged into a grid to complete a full list of contacts. Let’s start with a simple circle, which will act as a placeholder for the avatar (a photo that represents each user).

05

Next to the oval, let’s also insert of pair of text layers. With Insert > Text or simply the T key, use the Text tool to insert a layer that reads ‘Name Here’, and another underneath that reads ‘Email here’. These will be the layers we fill with data from the Type panel inside Craft.

06

expert tip

Web dAtA Aside from the built-in data sources, Craft can help you grab almost anything from the web, even from live websites. When using the Type and Photo panels, you’ll see a Web tab. Use the built-in mini-browser to navigate to and insert your favourite web content. It even works when you have multiple layers selected, by grabbing new data for each instance and allowing you to insert a bunch of images or text at once.

Time to make the sausage! We’ll start by inserting a real name and a real email address. First, select the layer that reads ‘Name Here’ and open up the Type panel (located in the Craft bar next to the Inspector). You’ll be

07

step 7 Using the Type panel, populate the design with some random names

august 2016 91


PROJECTS Sketch

step 9 Select a source from which headshots can be pulled

presented with a menu of data to select from. Pick ‘Names’, then select from male, female or both. Your text layer will automatically be filled with a real name. We’re going to fill the email text layer the same way we did the names. Select the ‘Email here’ layer, open up the Type panel, and select Email Address to quickly insert a realistic email address.

08

Next up we want to fill that grey circle with a real photo avatar, which we’ll do with the Photos panel. Start by selecting the circle layer, then open up ‘Photos’ from the Craft pane. Here, you’ve got a few options, like sourcing from a local folder, Dropbox, or the web at large. Here I’m selecting a local folder full of images I downloaded from the website uifaces.com. Click ‘Place photos’ and Craft will fill your circle with a random face taken from your collection.

09

With a single contact filled, it’s time to create a complete list of contacts. Before we do that, let’s insert a small dividing line under the layers we just created.

10

92

august 2016

step 13 Resize the Duplicate Control layer, and the contacts will multiply to fill the space

To repeat our single contact element into a whole list, we’re going to use Craft’s Duplicate panel. With your group selected, open up the Duplicate panel and check out the options. We’ve got two choices: Inside Selection and Specific Count. The first allows you to select the area you want the list in, then fills it with however many items fit. The second lets you define the exact count (‘I want a grid X items wide and Y items tall’).

11

We’ll be using the Inside Selection option, which I’ve found is perfect for screen design. Since this is a vertical list, not a grid, we’re only going to check the Vertical option. Click Duplicate

12

Content and you’ll see a few things will happen. First, your single contact group has been tripled. Second, each time Duplicate does its magic, your fields get re-populated, so each new group uses fresh data. Third, there is a new layer created under your contact groups, which we’ll use to define the area we want to be filled with contacts. To make the contact list fill the entire screen, we’re going to resize the Duplicate Control layer. Simply grab the bottom handle of the shape and drag it down to the bottom of your artboard. As soon as you let go, Duplicate will automatically create more contact groups to fill the new space,

13

again filling each new group with fresh data. Now our list is in place, you might notice the spacing isn’t quite right. With Craft, adjusting gutters is pretty simple. With the Duplicate Control layer selected, open the Duplicate panel once again, and notice that the button now reads Adjust Gutters. Instead of nudging each new layer around the canvas, simply change the Vertical Gutter option to 20, then hit the Adjust Gutters button. Your list will automatically snap into the correct spacing.

14

With our list complete and populated with real-looking folks, let’s double back to the

15

expert tip

Photo memory Craft has a really strong brain, which means it remembers which layers have already been filled with data by the Photos and Type panels, and will fill any new layers born from them using the Duplicate panel. Already have a grid in place? When selecting more than one layer to fill, Sketch will automatically fill each with a different piece of data from the sample set (i.e. a unique image for each box, or a unique name for each text layer).


Sketch

step 14 Adjusting the gutters is easy in Craft

interface and insert some flair, maybe in the form of a full photo header. We’ll start by selecting the original ‘header-bg’ shape we drew with the rectangle tool, and resizing it down towards the first contact in the list. The header should probably stop around 20px from the first item, since that’s the same gutter we used in our list. With our newly sized shape selected, let’s open up the Photos panel, and head to the Unsplash tab. Unsplash is an amazing online resource, filled with royalty-free, high-quality photos.

16

step 15 Insert a box above the contact list – we’ll fill this with a full photo header

Craft lets you filter by colour and category, so finding a perfect photo for any occasion is easier than ever. With our dark colour scheme, I think the Space category will do just fine. Click Place Photo and your new photo will drop into place.

top of the image. Sketch allows you to ‘stack’ fills on a single shape, so all we need to do is click the little ‘+’ icon in the Fills section of the Inspector. I’ve added a 50 per cent black layer on top of the image, which now looks just right.

Since Craft places a random photo based on our filters, it’s easy to shuffle the image again and again, until you find one you like. Simply keep clicking Place Photo until you like what you see. The photo I like is a little bright, so I’m going to turn it down a notch by adding a dark translucent fill on

That’s all there is to it! The normal mad dash to find content usually consists of searching, copying, pasting, and repeating – no longer. Filling an entire layout with realistic data is just a few clicks away, and you don’t even have to leave your favourite design program.

17

step 16 Unsplash is an impressive online photo resource

18

expert tip

CrAft mAnAger The Craft Manager is the quickest way to make sure your plugin is up to date. It’s a little application that sits in your toolbar and allows you to update all Craft panels with a single click. It also will alert you when Craft releases new tools, like the latest, Style Manager, which creates a living style guide right inside your document.

step 18 There you have it – a realistic mockup full of data

august 2016 93


PROJECTS Workflow

workflow

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

K Ace y coughl in w: kaceycoughlin.com t: @kaceykaso job: UI engineer, LinkedIn areas of expertise: HTML, CSS, JavaScript q: what’s the first video game you ever played? a: Freeway on the Atari 2600

Tackle your Technical debT

Kacey Coughlin walks through how to identify, track and reduce technical debt within an organisation If you work in tech, you’ll have probably heard about ‘technical debt’ at some point. The mere mention is enough to send some programmers packing. Technical debt refers to the work that needs to be done before any project or job can be considered properly complete. This debt must be addressed at some point, or the issues it causes will only grow. Technical debt is the clean-up work that arises from using a less optimal design in the short term, due to a schedule or budget not allowing for better planning or designs. A company may use shortcuts or hacks to get a product shipped faster, ultimately delaying the second release of the product in favour of expediting the first. Sometimes tech debt is necessary. As Ipek Ozkaya put it: “A little debt speeds up development, and can be beneficial as long as the debt is paid back promptly with a rewrite that reduces complexity and streamlines future enhancements.”

WHY? So why does tech debt happen? There are a number of possibilities:

video Kacey Coughlin presented ‘Declare bankruptcy on technical debt’ at FITC. You can watch her talk at: netm.ag/FITC-282

94

august 2016

● Lack of knowledge: Perhaps the programmer just does not know the framework or codebase ● Lack of process: Maybe the business side does not know what tech debt is, and pressures engineers to move faster – making decisions without considering future implications will always come back to haunt you ● Lack of testing: Testing beforehand ensures your code runs as expected, and can uncover bugs before shipping

Technical debt could also come from not using industry standards or open source package libraries. Proprietary libraries or frameworks require far more resources to build and maintain. Taking advantage of good open source options typically saves time – the solutions will already be tested and vetted of possible bugs, and might have a strong community backing with support. Trying to shoehorn in an outside library after the fact will undoubtedly be more difficult, and cause more debt. Or maybe the cause is just delaying the inevitable, and not refactoring code. Remember that code cleanup you said you were going to do right after launch? That ticket for ‘spring cleaning’ you have been ignoring in your backlog? Refactoring bad code in a timely manner, keeping dependencies up to date, and of course fixing bugs, are great ways to keep tech debt at bay.

WHO? Keeping up with debt does not have to mean fighting a losing battle, but you do have to be an advocate for it. You may have to push back on a design or product review in order to prioritise sorting out messy or old code. Technical debt is not just an engineer’s problem, or even a PM’s problem; it is everyone’s problem. From design to QA, what goes into that system or product is your responsibility. In the words of America’s homeland security campaign: If you see something, say something. At LinkedIn, one of our core values is ‘act like an owner’ – if you are working in a codebase, you own that code. If you are managing a product, you own that product. If this was your personal project,


Workflow going into your personal portfolio of work to be held up as an example of your competency, how would you treat it? Acting like an owner means holding yourself, and your teammates, to a higher standard; which begets a better product.

HOW? One major way to reduce technical debt is through code refactoring. This means a programmer goes back through the codebase, removing code that is no longer being used and rewriting code that is less than optimal. That might mean anything from just removing a few classes, on up to uninstalling packages or libraries, or possibly even replacing a whole framework. It’s key to make sure you are prioritising the right code for clean-up first. The code you are refactoring should have the biggest effect in terms of reducing debt. Do not worry as much about reducing the number of nested levels in your Sass files; instead worry about replacing those simple jQuery animates with CSS transitions. Code refactoring can be done any time. Personally, when I am writing code – whether it is a bug fix or adding a new feature – and I see something that can be done better, I take care of it. Little things like hoisting variables, using CSS shorthand, or pulling

Technical debt is the clean-up caused by using a less optimal design in the short term something out into an add-on, can go a long way to making code that is more maintainable, and ideally easier to read. If there is a part of the codebase that has not been touched in a long time, that might be a place to start refactoring without causing a lot of downtime. Refactoring code should restructure the existing code without changing its external behaviour. Improving readability, reducing unnecessary complexity, and introducing adequate separation of concerns should not cause more bugs and issues. Spoiler: If no one can understand your code, you are not a badass. Testing is said to be twice as hard as writing code; so if you write your code to be as clever as you are, you will never be able to debug it. Tech debt does not just live in the code though – hardware maintenance and upgrades also help reduce debt. Anything from the computer your developer is using to the servers your services are

running on can be a bottleneck, causing undue debt. Regular updates and monitoring help forewarn many issues, so you can replace that bad hard drive before it brings everything down.

WHERE? Now we know what to look for and how to fix it, how do we monitor it? Like all good systems, there should be a way to measure and track every outcome; data that can tell us where an issue might arise. There are several solutions to tracking and monitoring technical debt. The simplest is inline TODOs, alerting yourself, and anyone else, that this solution should be fixed. If you use a ticketing/bug tracking system like Jira, generating and associating a ticket with each TODO will help make sure those are not forgotten. If you are in an agile or scrum environment, having an epic dedicated to refactoring will help track your progress towards paying down debt over time. Some things will be constant, like system or dependency upgrades; but some debt may not be exposed until a more experienced developer joins the team. Having good documentation, which is comprehensive and reviewed regularly, can help expose weaknesses before it is too late. Documentation takes planning, and planning requires complete knowledge of the product and requirements. Documentation and project specs with well thought-out timelines, realistic milestones, and buy-in from all team members, should minimise the debt accrued during development. And that same documentation will serve as a guideline for the next person when it is time to review and clean up. Having accurate project specs also means pushing back on scope creep and acting like an owner. When timelines are blown up due to additional features being added after development has begun, code quality will inevitably go down, leading to more debt.

DEFEND THE CODE Being vigilant of tech debt and working to minimise it is all part of the job. Whether you write markup on the frontend, maintain data stores on the backend, or maintain the infrastructure it all runs on; it is everyone’s responsibility to defend against debt. No one wakes up in the morning and says, ‘I would love to refactor some 10 year-old code today!’ Tech debt haunts engineers in the industry every day, and can even scare away good talent if your company is known for having old ghosts lurking in your code. So go forth, be good owners, and defend your code. Your future coworkers will thank you!

august 2016 95


From the makers oF

On sale now

The ultimate guide to JavaScript â&#x20AC;&#x201C; updated for 2016! Explore the latest tools, techniques and frameworks, tackle animations, create stunning interfaces, and much more Pick up your copy at

Print: netm.ag/JavaScript-2016 Digital: netm.ag/net-ipad-us or netm.ag/net-ipad-uk


Head to head

HeAd tO HeAd

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

richA rd t homp s on

w: www.inviqa.com t: @Zaylril job: Technical Team Lead areas of expertise: JavaScript, AngularJS, Magento 2, RWD q: what’s the first video game you ever played? a: Treasure Island Dizzy, although my favourite childhood game was definitely Mario Kart!

webpack vs browserify

Richard Thompson pits fully featured Webpack against customiseit-yourself option Browserify in a battle of the module bundlers webpAck

brOwseriFy

webpack (webpack.github.io) is a modular loader for JavaScript, with a focus on large-scale singlepage applications. It provides features such as code splitting, loaders, hot module swapping and performance optimisations. It’s built from the ground up for static asset management on the frontend.

Browserify (browserify.org) allows you to write modular JavaScript code, and has a focus on making node code work in the browser. These modules are then bundled up into a single JavaScript file. All of the additional functionality within Browserify comes from transforms and plugins.

eAse OF use webpack is quite easy to set up. However, it requires you to set up a configuration file and understand which loaders you want to use, which can add some complexity for a new user.

Browserify is extremely simple to set up. It’s all you’d really need on a small project. The syntax is very straightforward and you can use it via the command line or your favourite task runner via the API.

perFOrmAnce And FunctiOnAlity

FAct File AlternAtives SystemJS is looking to shake things up in the JS community. It uses JSPM for its package management, has the advantage of skipping the bundling step entirely during development, and generates productiononly bundles. Hot module replAcement The hot module replacement feature in the webpackdev-server supports real time injection of updated modules into the running app when a bundle change is detected, which is great for speedier app development.

webpack provides a huge amount of functionality out of the box. It has intelligent bundling of your build files and can even optimise your CSS and image assets for best performance, by inlining images and CSS when needed.

The vast majority of functionality comes from transforms or plugins. Browserify can watch/bundle JS files and transpile your ES6 just as webpack can. You just need to put this together yourself, which can require extra research.

build tOOl integrAtiOn Integrations with gulp and Grunt are simple. However, webpack supports many of the functions offered by these out the box, including bundling and minification/ transpiling. So it’s really up to you whether to ditch the traditional build process.

Browserify integrates extremely well with existing build tools such as gulp. There are plugins and transforms to accomplish virtually any task. Be aware that it can require quite a lot of additional work and research to put everything together, though.

suppOrt And cOmmunity webpack is well supported within the frontend community. It supports all JS module formats (CommonJS, AMD and so on) and can be integrated with virtually any framework or library.

Browserify has a strong community following and endless plugins to enable you to process frontend assets. It supports the CommonJS module format out the box, but has transforms to support others.

Verdict Both webpack and Browserify accomplish the same thing, but go about it in different ways. If you’re looking for something more opinionated and want more features out the box (especially in relation to hot module swapping), then webpack is the clear winner. If you prefer to wire everything together and have complete control over your build process, or are after better NodeJS support, Browserify is probably the better choice.

august 2016 97


PROJECTS Atom

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

r Ay Vil l A l obos w: www.raybo.org

t: @planetoftheweb job: Senior staff author, Lynda.com areas of expertise: Frontend and fullstack web design and development q: what’s the first video game you ever played? a: Space Invaders on a Commodore PET with about 4K of RAM

Atom

10 Power tiPs for Atom users

Ray Villalobos runs down some tricks to help you streamline your

processes and work smarter with GitHub’s open source text editor First there was Vi, BBEdit, then TextMate and Sublime Text. Now Atom – the cross-platform, open source offering from GitHub – is the latest text editor to win over the developer community. Active and rapid development by a respected team from GitHub means this tool has a solid future. Touted as the most hackable text editor, it ships with a super-small core and can be easily extended using modern web technologies and a variety of methods, including packages, themes, init scripts, key-maps, custom style sheets and snippets. In this article, I want to show you some of the extra-useful features you may have missed, but that can yield genuine workflow improvements, helping you work faster and more efficiently.

1 Allow pending pAnes

Video Ray Villalobos has created an exclusive screencast to go with this tutorial. Watch along at netm. ag/atomvid-282

98

august 2016

If there’s one setting that I really recommend, it is to turn on Allow Pending Pane Items. If this is off, it will open a new pane every time you click on a file, and after a while your screen will be littered with tabs you didn’t really mean to open. You’ll find this option under Settings > Preferences – it’s one of the large number of general settings available. Thankfully, the current default setting is now ‘on’, but if you’ve been using Atom for a while you might have this option turned off. With Allow Pending Pane Items on, you can double-click on the title of the pane to keep any temporary pane items. The title will switch from italicised to normal text.

2 Tune your pAckAges Since Atom is built from a collection of packages, you will want to go through each of these and fine-tune them. Turn off packages that you’re definitely not going to be using – the application will start faster and perform better. I always turn off Welcome, About and Background-tips, plus the annoying Wrap-guide package, since all it does is show you a vertical line at the 80th character. I also turn off language support for things I will never use (Perl anyone?). Because most of Atom’s functionality is hidden within the packages, it pays to go through the individual packages and look for a settings button. If it has one and you use that feature often, take the time to explore the options on offer. You’ll find a lot of hidden gems in there. For example, the Tree-view package controls the functionality of the file tree you use to open files. One of the hidden commands within the preferences for that package is an option to Hide VCS ignored file. That lets you show or hide any files that are ignored by your version control system. So for example, if you have hidden folders like ‘.git’, ‘.sass-cache’ or ‘node_modules’, you can choose to show or hide these with this option. It’s also worth exploring the default keybindings for each package. This is a great place to learn how to speed up your workflow, but it’s also the best way to get the code for customising your keybinding. Plus, you can go further down the page to read more about each package.


Atom

in-depth

Power Combos

pending panes The tab on the left is not italicised, while the tab on the right

Using the mouse is fine, but to get really fast with the editor, these command key power combos will get you what you want much faster. It takes a while for these to become second nature, so make sure you spend some time forcing yourself to use them. It’ll pay off in a big way once they become a part of your regular workflow.

is because it’s a pending pane

command palette Notice the small icon next to each keystroke. You can click on that and it will copy the code for that command to the clipboard. Quickly open the keymap option from the Atom menu and paste. You can then easily modify any command.

3 cusTomise keymAps

cmd-shift-p (Mac), ctrl-shift-p (Windows) Access just about any tool in the menus/preview command key combinations.

Jump to line ctrl+G (Mac), ctrl+G (Windows) Get to any line, row or column quickly.

Speaking of keymaps, Atom’s key bindings are fully customisable. Open the Keymap option from the Atom menu and you can remap any keyboard combination. I like to map the Toggle Soft Wrap option to a keyword combination like this:

Bookmarks

'atom-text-editor': 'cmd-ctrl-\\': 'editor:toggle-soft-wrap'

cmd+R (Mac), ctrl+R (Windows) Context-sensitive index of the current document built by Atom.

4 explore The Tree view You can do a lot from the tree view. If you right-click anywhere on the tree view, you’ll get a lot of extra commands that will help you do things quicker than going through the menus. One of my favourites is to open new panes quickly using the file tree. Make sure your current pane is focused and then right-click on top of a file in the file tree. You can then choose to split the editor to the top, right, bottom or left. Of course, you can also create panes with the command keys, but when you open panes in that manner, Atom always retains the previously opened pane. Using the tree view saves you from having to close the previous pane. You can also adjust your tree to fit your content. To quickly modify the width of the file tree so that it matches the longest file name, double-click in-between the file tree and the editor. Need all the room you can get? You can quickly toggle the tree view by hitting cmd+\ . Sometimes, you need to have a quick path to a document so you can perform a terminal command. If you do that a lot, consider the Open-terminal-here

ctrl+F2 (Mac), ctrl+F2 (Windows) You can create and navigate through custom bookmarks you place in documents. This command lists the current bookmarks.

symbols

Find any file cmd+P (Mac), ctrl+P (Windows) Looking for a file? Skip the file tree and try this combination for a quick list of all of the files in the current project.

Folding cmd+K cmd+# (Mac), ctrl+k ctrl+# (Windows) To get a quick overview of a document, fold to different levels.

hidden settings Look through all your packages settings to find hidden gems

august 2016 99


PROJECTS Atom

Focus on

Github CommAnds If you want to get the most out of Atom’s integration, learn some of the command key combinations that let you quickly get to common GitHub pages. ● alt+G O : Open the current file on on GitHub ● alt+G B : Open GitHub’s blame page, which helps you figure out who did what on a project ● alt+G H : Open GitHub’s history page for this file. It allows you to see the changes on an individual document over time ● alt+G I : Review issues regarding this page ● alt+G C : Copy the GitHub URL for this project ● alt+G R : Compare the current branch with a different branch ● alt+G G : Open current repository in GitHub

Focus on

stArter PACkAGes Part of what makes Atom awesome is the great number of packages that come pre-installed with the application. But to really make it sing, there are lots of other packages that will improve on what it can do. Here are the ones I use. ● emmet: A series of shortcuts that will improve the speed with which you write your code ● html-entities: Quickly encode and decode HTML entities, so you just type in characters like ‘®’, and it will convert it to ‘&reg;’ for you ● linter: Check your syntax directly from within your editor. Sub-plugins exist for many languages and you should load up on the ones you use. It will highlight errors in the gutter, so you’ll make fewer mistakes ● open-in-browser: Quickly open the current file in your default browser. Whenever I do a new Atom installation, this is one of the first packages I install ● open-recent: Open recent files and folders in a new window ● open-terminal-here: Open the terminal or command prompt directly from a file or folder by using the context-sensitive menu in the file tree ● pigments: Preview colours in projects – so things like ‘#6677CC’ will automatically show up in the right colours ● sort-lines: Adds ways to sort lines in your files

100

august 2016

navigation options When you’re opening new panes, use the file tree and one of these commands

(atom.io/packages/open-terminal-here) package. This lets you right-click on a file name in the tree view and will open a terminal directly to that folder.

5 go mouseless To really get the most out of Atom, you need to let go ... of the mouse. Almost all of Atom’s functionality can be accessed through keyboard shortcuts, without having to lift your hands. The most common is the Command palette ( cmd+shift+P ). This is also a great way to find out what the key combinations for different commands are. There are lots of other great power combos that give you access to other features you should try out – take a look at the boxout on page 99 for more.

Let go of the mouse. Almost all functionality can be accessed through keyboard shortcuts 6 reAch conTenT FAsT For very long documents, you can create something called a bookmark with cmd+F2 . This will place a special icon in the gutter, and if you hit ctrl+F2 you’ll open up a dialog box where you can see a list and search through your bookmarks quickly. F2 will move you forwards through your bookmarks and shift+F2 backwards. Another great way to navigate is to use symbols by using cmd+R . Atom will analyse the current document and build you a quick outline based on its contents. So, for example, if you’re working on a markdown document, it will list the headlines; if it’s CSS, it will list declarations; and so on. The whole thing is searchable, so this feature can be a super way to get to content.


Atom

command palette The Command palette is a great way to access most of

Folding levels Folding to different levels using the keyboard bindings

7 Find Any File

9 Fold like A Boss

Of course, Atom has great find features, including the ability to look through not just the current buffer (file), but also through multiple files. One of the features I like the most is the ability to quickly look for a file in the current project. Instead of looking through the file tree, you can use cmd+P and look through the list, or type the name of the file into the search box.

You probably already know you can fold by hitting the triangles in the gutter within the editor, but there’s a series of commands under the Edit menu that lets you fold to different levels immediately. The keyboard shortcut is cmd+k and cmd+# (you can use a number from 1 to 9).

Atom’s functionality without having to use the keyboard

8 mAsTer mulTiple cursors If you’re coming to Atom from Sublime Text, working with multiple cursors is probably one of those features you can’t live without. To create multiple cursors from a selection, simply hit cmd+D . That’s great for a few items, but if you want to choose all the items from a selection in the entire document, use cmd+ctrl+G . cmd+click will let you add new cursors anywhere. My favourite way to create new cursors when I need to choose something at the same position above or below the current cursor is ctrl+shift+up/down . Be careful, because those might already be taken over by mission control on a Mac, so may have to use custom keybindings.

enables you to visualise the structure of your code quickly

10 inTegrATe wiTh giT If you’re using Atom with Git and GitHub, there’s some sweet integration that you’d expect from an editor that was built by GitHub. Atom has excellent colour coding within the file tree that tracks changes to your documents, plus there are some useful command keys you can use. For example, if you’ve modified some documents and then use cmd+shift+B , you’ll get a list of all of the modified documents, which is similar to doing a Git status command. If you’re on a file that has been changed and you want to check out the HEAD revision, you can simply use cmd+alt+Z . It’s the equivalent of doing a Git checkout in the terminal, but a lot quicker. There are also a number of commands in a special package called Open on GitHub. You can look for this in the packages menu, but it’s also accessible through your keyboard. You can use alt+G and then a letter like O to open the project in GitHub, or B to open the blame page on GitHub.

conclusion

Fast path A quick path to the current document

In this tutorial we’ve only scratched the surface of what is possible with Atom. There are so many more things you can do by adding packages, creating your own snippets and modifying the styles available. However, hopefully some of these essential tips will help you get comfortable working with Atom, boost your efficiency, and make you think about how you can adjust and customise it to make it work for you.

august 2016 101


PROJECTS Sass

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

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

FAbRice L e jeune w: www.dogstudio.be t: @fabricelejeune job: Lead frontend developer, Dogstudio areas of expertise: CSS, Sass, the KISS principle q: what’s the first video game you ever played? a: A soccer game on a Commodore 64: International Soccer

SaSS

Build an efficient font stack with sass

Fabrice Lejeune explains how to set up an automated system that will enable developers to manage lots of font variables easily

Res ouRce Written by Hugo Giraudel, this is an opinionated style guide for writing sane, maintainable and scalable Sass: sass-guidelin.es

102

august 2016

Often, it is possible to create an effective design using a few simple font varieties. Font stacks like this make sense to developers and are easy enough to work with. However, when we work with our (beloved) designers at Dogstudio, you can be sure we’ll be facing a lot of font variants. And when I say ‘a lot’, I mean at least 15 in most cases. Quickly, it gets to the stage where I can’t remember all the properties of each variant. I often see developers creating complex systems for simple tasks, such as managing a font stack. Systems like this can be tedious to set up and implement. In this article, I will explain how we automate this system at Dogstudio.

SaSS mapS to the reScue Instead of simply defining variables for each font variant, I will create a font stack map and some

mixins that will enable me to use the map easily. You’ll find the full code for this tutorial at netm.ag/ fontsgit-282. $base-font-stack: ( // Sans-serif helvetica: ( light: ( family: (Helvetica Neue, Helvetica, Arial, sans-serif), weight: 200, style: normal ), light-italic: ( family: (Helvetica Neue, Helvetica, Arial, sans-serif), weight: 200, style: italic ), regular: (


Sass family: (Helvetica Neue, Helvetica, Arial, sans-serif), weight: 400, style: normal ), regular-italic: ( family: (Helvetica Neue, Helvetica, Arial, sans-serif), weight: 400, style: italic ), bold: ( family: (Helvetica Neue, Helvetica, Arial, sans-serif), weight: 700, style: normal ), bold-italic: ( family: (Helvetica Neue, Helvetica, Arial, sans-serif), weight: 700, style: italic ), ), // Serif georgia: ( regular: ( family: (Georgia, Times, Times New Roman, serif),

Our Sass map is the only thing we will ever update when we want to edit a font variant weight: 400, style: normal ), regular-italic: ( family: (Georgia, Times, Times New Roman, serif), weight: 400, style: italic ),

in-depth

sAss mixins And Functions Without question, one of the most powerful and valuable features of Sass is its mixins and functions. Being able to automate much of the repetitive CSS is amazing, both when building and maintaining a clean and efficient codebase. mixins Mixins are one of the most used features in the whole Sass language. They are the Sass equivalent of macros in other programming languages. Mixins allow developers to define styles that can be reused throughout the style sheet, making it easier to maintain. This concept help us to DRY out our CSS. But you can go further with mixins. By writing more complex mixins you will become more efficient when writing your style sheet. Needless to say, the possibilities are endless. Functions A function is very similar to a mixin. However, the output from a function is a single value. This can be any Sass data type, including numbers, strings, colours, booleans, lists and maps. Functions help you write more readable and DRY Sass by letting you move your reusable logic out of specific declarations, and even out of your mixins. This can make all the difference in the world when you’re working on something that’s even a little bit complex. a KISS library Like with all frameworks, taking a little more time to write an efficient library will benefit all your future developments. But I must warn you against abusing the power of mixins. If a mixin ends up being too long, then it should be either split into smaller chunks or completely revised. Keep it simple, stupid!

) ); Let’s take a closer look at exactly what’s going on here. We have a Sass map (of maps of maps) called $base-font-stack . This is the only thing we will ever update when we want to add, remove or edit a font variant. Ever. At the first depth we have maps named by the font group name (for example, Helvetica, Brandon, Clarendon). At the second depth we have maps containing the properties of each font group variant.

Simple sites Example of a simple design using a font stack with Sass

august 2016 103


PROJECTS Sass the variant (the default being regular ). Then it will output the font family, weight and/or style. @include font(helvetica, bold); @include font(helvetica, light-italic, weight style); @include font(georgia); Easy, isn’t it? These simple lines of code will save you a load of time.

FocuS on worKFlow

weight and style Adobe TypeKit’s guide to the weight and style values to use in your CSS

This identifier should be unique among the group ( regular , bold , italic ). Finally, these settings maps have three keys: ● family : CSS font-family value ● weight : CSS font-weight value ● style : CSS font-style value

magIc mIxIn Once we’ve finished our Sass map, it’s time to add the first magic mixin: @mixin font($group, $variant: regular, $properties: family weight style, $font-stack: $base-font-stack) { $font-properties: map-deep-get($font-stack, $group, $variant); @if $font-properties { @each $property, $values in $font-properties { @if contains($properties, $property) { font-#{$property}: map-get($font-properties, $property); } } } } Once called, the mixin will loop through $base-fontstack until it finds a match for both the group and

The workflow I follow when putting all this together is equally straightforward. First, I identifiy all the font variants that have been used by our designers. This step is easier if they provide you a style guide. Second, I convert them into fonts that are suitable for the web. In most cases we use web font kits, but sometimes we convert fonts into web fonts and import them like other assets. Third, I create the map by adding all the values for the family, weight and style properties.

go Further To use web fonts you have to declare several @font-face rules. But during the development stage, you often try out multiple font variants. In the end, you don’t really remember which variants you’re actually using. This results in imported fonts that take up bandwidth and HTTP requests, but aren’t used. So what if our smart system could automatically declare the @font-face for only the web fonts that have actually been used? For this, we’ll add an optional font-face property to our font variant map. font-face: ( family: 'Avenir', path: 'Avenir/Avenir-Light', formats: (eot woff ttf svg) ) In our font mixin we call a new track-fonts mixin, which aims to list the used font variants and store them in an array. Now we have stored the fonts, we can call @include import-fonts(); at the very end of our code, in order to add just the necessary @font-face rules.

concluSIon

time saver This font map details all the fonts used in a design, with a handy mixin to make it easier to use

104

august 2016

I hope this article has shown you how mixins can help you win back lots of time in your workflow. We’ve been working with this system for several months now at Dogstudio, and all the developers are happy. I hope you will be too.


PROJECTS Standards

SemanticS in HtmL

Ian Devlin explains why using the correct HTML tags is so important In most professions, learning and mastering the basics is the first step – and one of the most important. Sadly, in the web development industry this does not appear to be the case. Many developers never take the time to learn and truly understand one of the most important tools of our trade: HTML. HTML is the cornerstone of what we do – all the pages we build require some HTML – and yet many do not know what tags are available, how and when they should be used, or what attributes they support. Some developers cannot even see why using an <a> tag for a button and a <div> for a page’s main heading is even a problem. What difference does it make? CSS can be used to make any element look the way we want it to anyway.

Why do semantics matter? Page semantics do not really matter to humans, but they do matter to machines, and since machines also

increased accessibility The added bonus to writing semantic HTML is that some of the machines reading your page’s content use it to present the data to humans who are unable to read it for themselves. An obvious example of this is a screen reader, which will read a web page’s content, interpret it, and then present the content to the human user. If the content of your page is semantic, then the screen reader will have a better chance of understanding it, interpreting it, and presenting it in the form you intended. This automatically makes your site’s content accessible to a wider audience. How can that be a bad thing? The examples given here are basic, but they hopefully give an idea of how important semantics in HTML can be, as well as giving you accessibility for free. If you haven’t already, please take some time to learn and appreciate all of what HTML has to offer, and use it accordingly. You never know when you yourself will be thankful for it.

PROFILE

HTML

read your content, it is important they understand it the way you intend it to be understood. This information can then be presented correctly to other humans who may wish to view the content the machines have collected. As a human user, I can see that you intended the main heading of your article to be ‘The importance of accessibility’. However machines can’t recognise this unless you provide this information in the content – which, in HTML, can be achieved by enclosing it in a <h1> tag. If your content contains a link to another site, enclosing it in an <a> tag and adding the URL to the tag’s href attribute will also ensure the machine knows what to do with it. Software that understands HTML will expect a valid href attribute when it encounters an <a> tag. If a <button> tag is used instead, it won’t know that this specific content is a link and its meaning will be lost. Similarly, a date value of ‘last Thursday’ will mean nothing to a machine, but enclosing it in a <time> tag and setting its datetime attribute correctly will instantly give it more meaning, should it be required. This may seem like common sense, and yet <button> tags for links, <a> tags for buttons, and <i> tags for icons litter the web. Even some of the most (in)famous frameworks are guilty of this, exacerbating the problem.

Ian (www.iandevlin.com) is a frontend engineer for trivago, working on – amongst other things – improving the website’s UI and UX. He is passionate about semantic HTML and accessibility, and believes the web should be available to all


PROJECTS Angular

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

AnAtomy of A component A b o u t t he A u t h o r

L uk As ruebbeL k e

JuSt A cLASS

w: onehungrymind.com t: @simpulton

HtmL cSS DirectiveS SeLector

Job: Author, trainer and consultant Areas of expertise: Angular, JavaScript, Caffeine q: what’s the first video game you ever played? a: Outlaw on the Atari 2600 when I was five years old. Nothing like shooting a punk dead with a one-pixel bullet

@metADAtA AngulAr

ExplorE thE nEw fEaturEs in angular 2 Angular 2 boasts language improvements, tooling enhancements and distilled best practices. Lukas Ruebbelke takes a closer look

video Lukas Ruebbelke has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/ angularvid-282

108

august 2016

Angular 2 is here, and it is a brave new world! With language improvements, tooling enhancements, new browser features and the best practices gleaned from AngularJS 1.X, it has evolved from a framework that provides us with a mostly sane approach to building web apps to a fullfeatured platform we can use to target everything. Angular 2 is completely evolved, and that means everyone is going to have at least one – if not many – moments of disorientation when they are learning the framework. In this article, we are going to take a tour around a simple Angular 2 website and get acquainted with Angular components and how they work. Under the hood of most Angular 2 mechanisms is a vanilla ES6 class, with Angular using metadata to enhance the class with all its powers. We will use component metadata to tell Angular how the class is supposed to behave.

This article will focus on just the essentials. Check out the repository at (netm.ag/angulargit-282) and the accompanying screencast for a treasure trove of extra tips and techniques.

The RooT componenT The single most important theme in Angular 2 is components. These are the basic building blocks that everything else is built upon. As a result, the genesis of every Angular 2 application is its ‘root’ component. In the body of our main HTML file we start with a single app element that is the entry point for our application. Everything inside this tag is visible until Angular is bootstrapped. // index.html <body> <app>Loading...</app> </body>


Angular

inDeX.HtmL

FOCuS On

WebpAck And ModuLe LoAding App component Root component An Angular 2 application must always have a root component in the main HTML file

WebpAck

To bootstrap the app, we import the bootstrap method from the platform-browser-dynamic package. We also import the root component. Then we call the bootstrap method, passing in the root component and an array of providers. // boot.ts import {bootstrap} from '@angular/platform-browserdynamic'; import {AppComponent} from './app.component'; bootstrap(AppComponent, []);

Angular has evolved into a full-featured platform we can use to target everything To create a component, create a TypeScript class called AppComponent to represent the component, and then import the Component class from the Angular core. Finally, decorate the class by adding @Component metadata and passing a configuration object to it. You can enhance your component by augmenting the config object with properties such as selector (the HTML tag representing the component), template and styles . You can also specify an array of providers (services, for example) and directives . In a moment we are going to repeat this same process when we create a child component. Note that in Angular 2, it is considered best practice to favour fine-grained components with a single, specific task. A rule of thumb is that you have accomplished this when your HTML is small enough to be inlined within the decorator without being cumbersome.

moDuLe bunDLer Modules have been around for a long time and, even though modules were not officially supported in ES5, the workarounds were surprisingly effective. ES6 provided official support for JavaScript modules and Angular 2 leverages them heavily. We already had the concept of a â&#x20AC;&#x2DC;moduleâ&#x20AC;&#x2122; in AngularJS 1.X as an organisational mechanism, and now it is enforced at language level. Because modules are still not supported by browsers, we need to rely on third-party mechanisms to make sure all our modules are loaded and available to the browser at runtime. This is why an Angular 2 project will generally use either SystemJS or webpack to handle that implementation detail for us. Webpack is an extremely popular solution for handling module loading within web applications. Not only can it bundle your modules, but it also provides an impressive list of additional bundling capabilities. For instance, it can take all of your Angular 2 templates, SCSS, web fonts, vendor libraries and so on, and output them all into a single, optimised bundle for deployment. Webpack also plays really well with task runners like gulp â&#x20AC;&#x201C; you can sequence a bunch of tasks via gulp and then seamlessly defer the bundling task to webpack. If that alone was not a huge value add, webpack ships with a web server that allows us to serve up our Angular 2 application and even perform hot reloading when we make changes. Check out github. com/webpack/webpack for more details.

august 2016 109


PROJECTS Angular

in-depth

it’s Just A cLAss! As we have seen, an Angular 2 component is really just an ES6 class in sheep’s clothing. But what about all the other building blocks in Angular 2? For instance, what does an Angular 2 service look like? The response to these questions is almost always: it’s just a class! Classes are a central theme to Angular 2. No matter if you’re building a service, pipe or a directive, the starting point will always be a class. The only difference is that the metadata will change depending on what you are trying to accomplish. So to create a service, we first start by creating our class, importing our dependencies and then decorating that class with Angular 2 metadata. In this case, it is considered best practice to swap out @Component with @Injectable to ensure that metadata is generated properly for your class. Because the Angular core team has taken this approach, we get twice the framework in half the language. The majority of our application ends up being vanilla JavaScript classes with just enough Angular metadata to bring everything together into a coherent application. Not only does this provide better organisational lines within our applications, but it makes the learning curve for people coming from a classical language background much gentler. So whenever you find yourself staring at the computer wondering how to build a specific thing in Angular, remember that the answer is more than likely going to be: it’s just a class!

Working example Our Angular 2 application bootstrapped with a single root component (you’ll find this example in the GitHub repo)

// app.component.ts import {Component} from '@angular/core'; @Component({ selector: 'app', styles: [ h1 { text-align: center; } ], template: <h1>Hello Angular 2!</h1> }) export class AppComponent {} You’ll find a working example in the ‘01-gettingstarted’ branch of the GitHub repository.

child componenTs Let’s create a home component. The first thing we are going to do is create our HomeComponent class and set the title and body properties. We will also import Component from @angular/core so we can use it to decorate our new class in just a moment. // home.component.ts import {Component} from '@angular/core'; export class HomeComponent { title: string = 'Home Page'; body: string = 'This is the about home body'; } We are going to enhance our Component metadata with the selector we want to use to target our

inDeX.HtmL Home component About component itemS component

App component stacked elements We can stack additional child components in our root component

110

august 2016


Angular component, the path to the HTML template and some CSS for aesthetic purposes. // home.component.ts import {Component} from '@angular/core'; @Component({ selector: 'home', template: require('./home.component.html'), styles: [ .content-card > .mdl-card__title { color: #fff; height: 176px; background: url('../images/home-card.jpg') center / cover; } ] }) export class HomeComponent { title: string = 'Home Page'; body: string = 'This is the about home body'; }

No matter what you’re building in Angular 2, the starting point will always be a class We can bind to any public properties or methods in our TypeScript class, so in our home.component. html file we are going to use curly brace string interpolation to render our title and body values. // home.component.html <div class="content-card"> <div class="mdl-card__title"> <h1>{{ title }}</h1> </div> <div> {{ body }} </div> </div> We can repeat this process for an ItemsComponent and AboutComponent and then make all three of our newly minted child components available to the AppComponent by importing them and injecting them in via the directives array on the class metadata. // app.component.ts import {Component} from '@angular/core'; import {AboutComponent} from './about/about.component'; import {ItemsComponent} from './items/items.component.ts'; import {HomeComponent} from './home/home.component';

inDeX.HtmL Home component

About component

itemS component

App component

@Component({ selector: 'app', template: require('./app.component.html'), styles: [require('./app.component.css')], directives: [HomeComponent, AboutComponent, ItemsComponent] }) export class AppComponent {}

single component

We can set up routing to display a single component at a time

Angular 2 components by nature are self-contained, so when we want to render them on the page, we just need to add our component selectors to the markup as you can see below. The pleasant side effect of this component-driven architecture is that our HTML is now a DSL and very descriptive of the domain model we are working in. // app.component.html <main> <div> <home></home> <about></about> <items></items> </div> </main> If you check out the ‘02-components’ branch of the repository, you will see a working example of this.

RouTing Creating a bunch of components and dumping them on a page is interesting but not necessarily reflective of how we build apps in real life. We need to be able to navigate between components as if they were pages in a website, and we can use the ComponentRouter to accomplish this task. We are going to update our boot.ts file slightly by importing the ROUTER_PROVIDERS from the Angular router package. We will then insert ROUTER_PROVIDERS into our providers array in the bootstrap method call.

reSOurCe If you want to know more about how Angular 2 works under the hood, head to the Thoughtram blog for a ton of in-depth articles: blog.thoughtram.io

august 2016 111


PROJECTS Angular // boot.ts import {bootstrap} from '@angular/platform-browserdynamic'; import {ROUTER_PROVIDERS} from '@angular/router'; import {AppComponent} from './app.component'; bootstrap(AppComponent, [ ROUTER_PROVIDERS ]); Because this is a small application, we are going to configure our routes in the root component. We will start by importing the Routes decorator and the ROUTER_DIRECTIVES from Angular’s router package. We need the ROUTER_DIRECTIVES if we want to create links to our routes in our HTML. //app.component.ts import {Component} from '@angular/core'; import {Routes, ROUTER_DIRECTIVES} from '@angular/ router'; import {AboutComponent} from './about/about.component'; import {ItemsComponent} from './items/items.component.ts'; import {HomeComponent} from './home/home.component'; @Component({ selector: 'app', template: require('./app.component.html'),

Ultimately, we are just working with components that can be stamped out

reSOurCe For a great introduction to Angular 2, check out the totally free ‘Angular 2 Fundamentals’ series by egghead.io. John Lindquist goes through the basics in step-by-step, easy to digest videos: netm.ag/ fundamental-282

112

august 2016

styles: [require('./app.component.css')], directives: [ROUTER_DIRECTIVES] }) @Routes([ {path: '/', component: HomeComponent}, {path: '/home', component: HomeComponent}, {path: '/about', component: AboutComponent}, {path: '/items', component: ItemsComponent}, {path: '/*', component: HomeComponent} ]) export class AppComponent {} We will then decorate our AppComponent with some additional @Routes metadata that contains the routing table for our application. A basic route is an object that consists of a path and the component that the path links to. Did you notice the '/' and '/*' routes? The former matches the root URL of the application ( http://example.com ) and serves the HomeComponent ,

single child Our application rendered with a single child component per section

while the latter matches any unregistered URLs and serves HomeComponent . Now that our routes are configured, we can update our templates to link to specific routes. To link to a registered route in the component HTML, we will place a [routerLink] attribute on an anchor tag. The value should be an array of paths. In this case, since we don’t have any extra parameters, we just need one path (which we specified in the @Routes decoration). // app.component.html <header> <div> <nav> <a [routerLink]="['/home']">HOME</a> <a [routerLink]="['/about']">ABOUT</a> <a [routerLink]="['/items']">ITEMS</a> </nav> </div> </header> <main> <div> <router-outlet></router-outlet> </div> </main> If you check out the ‘03-routes’ branch of the repository, you’ll see our routing table in action.

in closing All complex systems are just composed of a bunch of smaller systems that work together to produce something impressive. Angular 2 is incredibly powerful, and because of that it can seem like we are standing at the foot of a cliff trying to figure out how we are going to get to the top. The process becomes far less daunting when we realise we are just working with components that can be stamped out using the simple process of creating the class, importing our dependencies, decorating our class, enhancing our component and repeating from the beginning.


Y

R

Y 1

R

S

|

A

R

|

1 0

A N N I V E R S A

T H

E

0 H

I V

T

A N N

E R S A R N I V Y A N

S

|

A

R Y

|

1 0

T H

AWA R D S 2 0 1 6

E

0

R

1 H

V

T

A

N

N

S A R Y E R I V

|

1 0

T H

A

N

N

I

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

VOTE TODAY AT

WWW.T3.COM/AWARDS


PROJECTS Accessibility

AccEssIbILIty

A UX MAnifesto

David Sloan introduces a vision of how we can share responsibility for integrating accessibility into UX design Accessibility is often treated with apprehension; a complex social, technical and legal challenge that might seem unachievable. So, when my colleagues Henny Swan, Sarah Horton and Léonie Watson and I thought about how we might try to reduce the complexity of accessibility, we wondered about the idea of a manifesto. We’d seen the agile manifesto, so how about producing a common and simple articulation of what it means to integrate accessibility into the process of designing quality user experiences? You’ll find the manifesto at www.accessibleux.org. The focus underpinning it is that accessibility is a core value; a shared concern; an intrinsic quality. And it’s about people, not technology.

There’s recognition of the constraints within which we have to work. People’s capabilities and preferences are unique and variable. Environmental factors influence accessibility needs. Changing organisational processes can often be complex, so we need to be strategic about setting goals and the tactics we apply to meet them. The manifesto concludes with a set of commitments that people working in accessible UX should make. We need to focus our efforts on delivering quality UX, and make accessibility a shared responsibility across our teams. We need to learn from people with disabilities about their needs and preferences. And we need to constantly build on – and share – our accessibility skills.

Using the mAnifesto We intended the manifesto as a simple way to demonstrate to all stakeholders that accessibility is a shared responsibility – and a way for companies to focus their accessibility efforts on people. Use it to clarify your thinking about how to tackle accessibility strategically, before diving into techniques for involving disabled people in research, design and development. And use the manifesto site to share your experiences!

PROFILE

A creAtive chAllenge The manifesto first defines a set of beliefs surrounding the potential value of integrating accessibility into UX. Digital resources can increase social and economic inclusion, but approached incorrectly they can have the opposite effect. Attention to accessibility can drive innovation and creativity, while inattention compromises quality and user experience. Achieving these benefits requires deliberate action.

114

august 2016

David (@sloandr) is UX research lead with The Paciello Group, a specialist accessibility consultancy. He is also co-chair of the W3C Accessible Online Learning Community Group


Projects Responsive design for enterprise sites Fill your Sketch designs with data Tackle your technical debt 10 power tips for Atom users Build an efficient font stack with Sass

9000

9012

Explore the new Angular 2 features

0800 1 777 000


Net 2016 282 august