BUILD FAST WEB APPS WITH REACTGlvfryhu#wkh#ehqhwv#of the hottest JS library

MAKE TYPE WORK ON ALL DEVICES Ensure text is easy to read on any screen size

FROM PHOTOSHOP TO PROTOTYPECreate rich, layered mockups with UXPin

FREE 100-PAGE BOOK + 40 MINS OF VIDEO

Issue 267 : June 2015 : net.creativebloq.com

The voice of web design

FREE BOOK

PROJECT

Exclusive! Harry Roberts

introduces the ITCSS approach

100-PAGE GUIDE TO WORDPRESS WORTH 6.99

june 2015 3

Welcome

EDITORS NOTE

FEATURED AUTHORSDENISEJACOBS

Denise a creativity evangelist (watch her Generate talk at netm.ag/Denise-267). On page 28 she calls for more diversity on the conference circuit w: denisejacobs.com t: @denisejacobs

COREYELL IS

Corey is a senior frontend engineer at 10up. From page 68 he explains how to create perfect WordPress themes, the painless way w: coreyellis.me t: @zzramesses

CL ARISSA PE TERSON

UX designer and developer Clarissa is author of Learning Responsive Web Design. On page 100 she explains how to master responsive type w: clarissapeterson.com t: @clarissa

HARRYROBERTS

Harry is a consultant frontend architect. On page 84 he introduces Inverted Triangle CSS, his methodology for managing large CSS projects w: csswizardry.com t: @csswizardry

WELCOME

There is a lot of talk of imposter syndrome at the moment. Both Brad Frost and Elyse

Holladay called recent presentations I have no idea what I am doing , and Christian Heilmann admitted he often feels like a fraud (netm.ag/fraud-267). I feel the same. Its easy to be overwhelmed. Maybe it was possible to know everything about creating websites 20 years ago, but today its not. We are hit by an avalanche of new tools, approaches and devices every week. You dont need to be an expert in everything, but its good to be aware of as much as possible. And thats where net comes in. We feel its our duty to edit the information out there and present it for you to pick and choose from.

This month, for example, we exclusively reveal Harry Roberts CSS architecture methodology for large projects and explain how to get started with React the JavaScript library thats taken the community by storm.

As you can see from our cover, we also explore plenty of WordPress. If thats your thing, dont miss The Ultimate Guide to WordPress, which comes free with this issue. Turn to page 82 to find out how to download your copy right now. Enjoy!

Oliver Lindberg, editoroliver.lindberg@futurenet.com@oliverlindberg

4 june 2015

ART CONTRIBUTIONS

MANAGEMENTContent and marketing director Nial Ferguson nial.ferguson@futurenet.com

Head of content & marketing, photography, creative and design Matthew Pierce matthew.pierce@futurenet.com Group editor-in-chief Dan Oliver dan.oliver@futurenet.com, Group art director Rodney Dive rodney.dive@futurenet.com

EDITORIAL CONTRIBUTIONS

EDITORIALEditor Oliver Lindberg oliver.lindberg@futurenet.com, Production editor Ruth Hamilton ruth.hamilton@futurenet.com,

Art editor Mike Brennan mike.brennan@futurenet.com, Designer Rich Carter richard.carter@futurenet.com, Commissioning editor Martin Cooper martin.cooper@futurenet.com, Commissioning editor Julia Sagar julia.sagar@futurenet.com,

Staff writer Sammy Maine sammy.maine@futurenet.com, Staff writer Alice Pattillo alice.pattillo@futurenet.com

Ben Anderson, Derek Boateng, Tanya Combrinck, Jason Cranford Teague, Gene Crawford, Matt Dennewitz, Tom Dougherty, Corey Ellis, Niels van Esch, Sarah Frisk, Val Head, Denise Jacobs, Bryan James, Scott Jehl, Tom Jepson, Joseph Karr OConnor, Mina Markham, Lorna Mitchell, Doug Neiner, Rob Mills, Clarissa Paterson, Yesenia Perez-Cruz, Josh Pollock, Harry Roberts,

Claudina Sarahe, Pam Selle, Bojan Wilytsch, Thomas Jame Winstanley, Kamil Zieba

Alexandra Bruel, Ben OBrien, Ben Mounsey, Chandler Williams

ADVERTISING Advertising sales director Suzanne Smith suzanne.smith@futurenet.comCIRCULATION Trade marketing manager Juliette Winyard juliette.winyard@futurenet.com

PRODUCTION Production controller Nola Cokely nola.cokely@futurenet.comProduction manager Mark Constance mark.constance@futurenet.com

LICENSING International director Regina Erak regina.erak@futurenet.com SUBSCRIPTIONS Phone our UK hotline 0844 848 2852; international +44 (0)1604 251 045

Subscribe to net online at myfavouritemagazines.co.uk

All contents copyright 2015 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.

NEXT ISSUE ON SALE 14 MAY 2015

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

COLOPHON APPS USED PAPER TYPEFACESGoogle Docs, Dropbox, InDesign, Skype, Illustrator, FutureSource, Photoshop, Future Folio

COVER PaceSetter Gloss 250gsmP3-82 Galerie Fine 100gsmP83-114 Grapholvent 70gsm

Antonio, Share Tech, Merriweather, Titillium Web

We are committed to only using magazine paper which is derived from well managed, certied forestry and chlorine-free manufacture. Future Publishing and its paper suppliers have been independently certied in accordance with the rules of the FSC (Forest Stewardship Council).

6 june 2015

CONTEIssue 267 : June 2015 : net.creativebloq.com

RAWK THE WEB 28Denise Jacobs introduces the initiative that aims to diversify our conference circuit

DIGITAL STYLE GUIDES 26Tom Dougherty looks at how we can create style guides fit for the digital age

WORKSPACE 18Nerf guns sit next to awards certificates in Superhero Cheesecakes Amsterdam office. Niels van Esch gives us a tour

BIG QUESTION 38How do you build a sustainable web career? We asked seven web professionals

Q&A 40Claudina Sarahe shares her thoughts on collaboration and community

COPYWRITE FOR ENAGEMENT 43Rob Mills reveals the golden rules for writing copy that enagages its audience

VOICES

INTERVIEW 32We chat to Scott Jehl about the project that

changed the face of web design, and why its our duty to start being more responsible

SUBSCRIBE TO NETAND SAVE UP TO 60%

VOICES

FEED

SIDE PROJECT OF THE MONTH 16Bryan James broke new ground with CSS clip-paths to create In Pieces

BEYOND PIXELS 20Val Head shares what shes learnt on her foray into jewellery making

CLIENTS FROM HELL 17One generous young designer learns that you should never cover a clients costs

NEED LIST 21Web stuff we fancy this month, including an app that sorts out your news feed

EVENT REPORT 23Oliver Lindberg shares all the news from SmashingConf Oxford

FEED

TAKE ADVANTAGE OF THE NEW PRINT AND DIGITAL BUNDLE Turn to page 24 to find out more

june 2015 7

Contents

CRAFT PERFECT THEMES 68WordPress expert Corey Ellis lays out all the dos and donts you need to know to build a great WP theme

THE DEATH OF THE DESIGN AGENCY 76Tanya Combrinck casts a critical eye over the state of the web design industry today

DESIGN CHALLENGE 52Three designers mock up ticketing sites

FOCUS ON 56Gene Crawford considers paper craft

HOW WE BUILT 64Hello Mondays NASA GeneLab website

PROFILE 58Derek Boateng on career-changing projects

SHOWCASE

TRANSFORM PSDs INTO LAYERED PROTOTYPES 90

Kamil Zieba walks through how to turn Photoshop files into rich

prototypes using UXPin

GALLERY 44Yesenia Perez-Cruz shares her favourite

websites, including creative agency Fuzzcos off-the-wall portfolio site

NETWORK 8The latest mail, tweets, posts and rants

EXCHANGE 10Jason Cranford Teague, Mina Markham, Ben Anderson and Josh Pollock give advice

REGULARS

CSS PROJECTS WITH ITCSS 84Harry Roberts introduces his CSS project methodology: Inverted Triangle CSS

GIT BRANCHING STRATEGIES 110Lorna Mitchell takes a look at the different Git workflow strategies

REACTIVE DATA UIS 90Matt Dennewitz on how to create a UI that updates in real time, using Backbone.js

RESPONSIVE TYPE 100Clarissa Paterson explains how to ensure your type is easy to read on any device

HEAD TO HEAD 98Marionette.js versus Ampersand.js

WEB STANDARDS 105Sarah Frisk introduces Chassis

WEB APPS WITH REACT 106Doug Neiner shows you how to build a super-fast web application using React

ACCESSIBILITY 114Joseph Karr OConnor on WP accessibility

PROJECTS

FEATURES

PROJECT

REGULAR

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

8 june 2015

BAD OR BADASS?Your description of a DPM [in issue #264] is unlike any I have encountered in my 10-year career. I find that most DPMs arent terrible, theyre just not as good as we need them to be. I once saw one turn a 7,000 reskinning project into a 50,000+ black hole. Meetings would be held with the client behind closed doors. The DPM specced out the project with the client, with no input from design or development. As this wasnt based on an off-the-shelf solution, there was a huge amount of technical knowledge the DPM didnt possess which was incredibly necessary for the process.Christopher Dowson, Nottingham, UKOuch! It seems weve hit a hornets nest with our article. Does anybody have

any positive experiences to report?!

MASTERING ECOMMERCEI have a T-shirt brand called Five Locs (fivelocs.com) and would like to sell online. Whats the best ecommerce template? Im a graphic artist / web designer so I know some HTML and CSS. Amon-Re Crosby, Georgia, USIts really down to personal preference. Shopify is one of the most popular platforms, and to find out how to get started with Shopify themes, check out our Ecommerce Guide you can download it for free at netm.ag/net-ipad (UK) or netm.ag/net-ipad-us (US) or buy it with our money issue (netm.ag/money-267). Another popular option is WooThemes (woothemes.com), and specifically the WordPress plugin WooCommerce.

DEATH TO FRAMEWORKS?Im sad, and Ive felt this way for a while now. Where has the creativity gone in web design? The frontenders are becoming increasingly obsessed with grids, technology and feasibility,

and their once great creations have been reduced to and . Where is the soul? The creativity? The art direction? Gone. Mark Williamson, Warwickshire, UKThanks, Mark. Noah Stokes expressed similar concerns in his essay Give Sites Back Their Soul in issue #263, and were also currently hearing it at web design conferences. Are we relying to much on frameworks at the expense of creativity?

IS THE BROWSER REALLY DEAD?Jonathan Starks title for this Generate NY (The Browser is Dead, Long Live the Web!) kicked off a debate on Twitter

(full conversation at netm.ag/stark-267). Heres a taster:

@HenrikJoreteg: I wrote a post titled exactly that: netm.ag/browser-267@JonathanStark: My talk is about the web outgrowing the browser ... are you saying the browser needs to catch up with the web?@HenrikJoreteg: We need to re-think what a browser is. It needs deeper integration with the OS. With addition of real offline apps it makes less sense to have it viewed as the app for accessing web.@Jonathan Stark: The web isnt dead, but the browser is circling the bowl. When people say The web is dead. Native will win what theyre really saying is The browser is dead.

Ecommerce options Find out more about Shopify in our Ecommerce Guide

CONTACT US @netmag /netmag +netmagazine netmag@futurenet.com net.creativebloq.com

Mail, tweets, posts and rants

june 2015 9

Network

WHICH CMS DO YOU USE MOST FOR CLIENT WORK?

THE POLL

C O O L S T U F FW E L E A R N E DT H I S M O N T H REDESIGNING THE NEWS

Mule Design - helmed by Mike Monteiro recently reworked the Seattle Times website. Monteiros Medium article about the process demonstrates why you should understand a companys business model before picking up a pencil and paper, as well as revealing some fascinating insights into the American news industry. netm.ag/news-267 DID I MENTION SLOW?

Theres something deeply delightful about seeing an old computer still hamming away. But what about connecting one to the internet? One man made it his mission to resurrect his old Mac Plus and introduce it to the internet. The tale is one of determination. The results? 1KB per second about sums it up. netm.ag/plus-267

WEVE SEEN IT BEFORE

Jeffrey Zeldman isnt seduced by wearables newness, nor is he overly worried about what they mean for web designers. In this article he argues that wearables should be treated just like any device: we should use structured markup, progressive enhancement and do lots of testing. netm.ag/wearable-267

Drupal 4%Open source and used by bloggers and firms alike

Statamic 4%A flat file CMS

Other 13%Including Perch (4%), Joomla (2%) and more

ProcessWire 6%A free, PHP4 open source CMS

Kirby 7%A database-less, file-based CMS

Craft 9%A smart, scalable CMS

ExpressionEngine 10%Open source and built

using PHP

Umbraco 13%A leading .NET-

based open source SMS system

MODX 15%The flexible and

feature-complete CMS, so they say

WordPress 19%Free, open-source ...

youve probably heard of it

Based on more than 1,300 replies from our Twitter followers.

A blessing. They keep out of my way so I can get on with creating.@sprkwd

Depends on the CMS. If you have to design around it, then a curse.@Insigniades

A blessing for some new to the game, a curse for a seasoned developer who has to support them.@Mustafa_x

Depends on the dev. If you use hacky code, they can be a curse.@OllieBrkr

They too often hinder creativity and impact on page loading speeds.@Perma_Design

Good CMSs are a blessing from the Space Pope. Bad ones are a curse from the Robot Devil.@LucPestille

I like them because they mean idiot marketers like me can arse around with websites without incurring developer wrath.@albinjindu

CMSs arent designed for the end user. When I can natively push to multiple platforms from a cloud, without plugins, Ill change my mind.@mickbetto

From our timeline Are content management systems a blessing or a curse?

10 june 2015

WORDPRESSADVANCED CUSTOM FIELDSWhy doesnt WordPress just integrate the Advanced Custom Field plugin (or something similar) from the start?Dan Davies, Flint, UKJP: Because not everyone needs what Advanced Custom Fields (ACF) does, and not everyone who does need it wants to

use ACF. Improvements to WordPress metadata API, which enables plugins like ACF to work, are planned. ACF is a great plugin, but some people prefer Pods, Custom Field Suite, CMB2 or other similar tools, while others prefer to work without a plugin like that at all. Its not the job of WordPress core to dictate to users which one to choose.

Which is good to start with, mobile-first or desktop-first? Naomi Takeuchi, Witney, UK

QUESTION OF THE MONTH

Send your questions to netmag@futurenet.com

Practical advice from

industry experts

BEN ANDERSONBen is a frontend specialist with a full-stack background w: banderson.me t: @ben_anderson

JASON CRANFORD TEAGUEJason is an author, trainer and the senior creative director at Capital One w: jasonspeaking.com t: @JasonSpeaking

MINA MARKHAMMina is a Sass-loving frontend architect working at IBM Design w: mina.codes t: @minamarkham

JOSH POLLOCKJosh is a WordPress developer, educator and tech entrepreneur w: JoshPress.net t: @Josh412

THIS MONTH FEATURING...

JCT: What we understand by mobile-first is really a overstatement of the original intent. When Luke Wroblewski coined the term, he was really thinking about how content that can be sacrificed for mobile devices is likely not critical for the desktop sites either. So, you should start by thinking about the content needed for the smaller screen, then evaluate anything you think is needed for larger screens.

For my designs, though, I prefer to design typography-first. As so much of the page is text, I think of this as the primary design element and elaborate the design from there, adjusting the typography as needed to respond to the screen context.

Type talk Jason Cranford Teague suggests designing around type elements, as seen on burningofcolumbia.com

june 2015 11

Q&As

REACT FLUX TIMEWhen do you know when its time to use Flux versus plain React?Donna Quintero, Florida, USBA: Start today by structuring all your React code to fit the original Thinking in React post (netm.ag/thinking-267). Keep all states in a top-level container component, which handles all Ajax fetching, updating and so on, and passes all data and callback handlers down to sub-components as props, to keep them as pure as possible. If you follow these principles, youll know when its time to make the switch when following these constraints strictly becomes too painful.

RWDKEEPING UP SPEEDWhats the best way to do responsive without sacrificing page speed?Jan Kenneth Regala, Makati, PHJCT: The best way to keep pages fast is through solid coding, using semantic HTML, and relying on CSS for the design rather than using images. Anything thats not actually graphic content (photos, illustrations, diagrams and so on) should be added in the CSS. Another good strategy is to move any non-immediate CSS code so its loaded in the footer of the document. Code that is not immediately needed to render the page on load (such as user interactions like hover, focus and active) can be loaded last. This doesnt affect the page

appearance, but allows important content to load faster. Another way to speed things up is to lazy load images (see overleaf for more on this).

WORDPRESSPAYMENT OPTIONSWhats the best shopping cart payment option, without redirecting to another site and if you dont want to use a credit card?Tony Notermann, Minnesota, USJP: My preferred way to handle payment processing is Stripe. Stripe can work as fields in your checkout form or in a modal. There are great implementations for all the popular ecommerce plugins like WooCommerce and Easy Digital Downloads, as well as for form plugins like Gravity Forms, Ninja Forms or Caldera Forms. PayPal Payments Advanced is trickier and more expensive to set up than the regular PayPal Express Checkout, but it will work without having to go to PayPals site.

SASSCSS FILESDo you advise using Sass as the preprocessor for every CSS file on a site build? Or keep one CSS file separate? Sam Baker-Salmon, Brooklyn, USMM: The beauty of Sass is that you can do both. By utilising the @import feature, you can keep your styles in separate files, or partials, and still have them output into one large CSS file. This is great for staying organised during development, while also keeping the performance

3 S I M P L E S T E P SHow would I go about adding sort button functionality to my events custom post type? Rick Yentzer, Boston, US

JP: FacetWP (facetwp.com) is the best plugin for this type of search it lets you create search filters that update instantly on the page.

67(367$57$7(03/$7(

Once Facet is installed go to the admin page. Create a template to show posts in the events post type.

67(3$'')$&(76Create Facets to search by custom fields, like date, price or even

taxonomies a custom taxonomy for locations would be smart here.

67(3&5($7(6+257&2'(6Create a new page and add the FacetWP shortcodes to show your

template and each of your facets.

)OX[WLPHThis diagram from netm.ag/flux-267 helps illustrate how Facebooks application architecture works

12 june 2015

EXCHANGEQ&As

access the map values. The benefit of this method is to keep from typing map-get($map-name, key) repeatedly. Check out an example at netm.ag/maps-267.

REACTREACT AND PREPROCESSORSHow can you integrate CSS preprocessors into a React workflow?Mike Herchel, Florida, USBA: I use Sass. For project-wide styles, just use your preprocessor of choice to generate CSS and it in as usual. For component-specific styles, use webpacks Sass-loader (or the equivalent Browserify transform) to import the styles in the component file itself. You can then apply conditional styles and classes to elements using plain JavaScript logic in render() . Also, check out the Class Names module on npm this will help when things get more complex.

RWD LAZY LOADINGWhats your technique for lazy loading responsive images?Marcel Weber, Nusplingen, DEJCT: Lazy loading images is a Just in time method of adding image files to the page that are not loaded or rendered until they are actually needed for display. This can greatly speed the apparent load time of the page, since those big image files dont have to come down the pipeline all at once. There are several methods for this. Most rely on backend tech or JavaScript, and none of them is perfect they often require that in the future, well all be using the HTML tag with separate sources based on media queries, coupled with JavaScript to load them as needed. For more details, see the Responsive Issues Community Group (ricg.io).

RWDUPDATING SITESWhats the best way to design a responsive site when theres an existing non-responsive site?-RUGDQ&DUUROO%HOIDVW8.JCT: The short answer is: start from scratch. The longer answer is that it depends on how the HTML of the non-

responsive site was coded. If were talking lots of divs or Cthulhu forbid tables, then refer to my short answer. If the original site uses well-coded, semantic HTML, adding responsive CSS shouldnt be too difficult. It may still require some tweaking of the HTML, but the trick will be to find ways to keep important content at the top of the longer scrolling screen. The new CSS flexbox method (netm.ag/flexbox-267), which allows complete reflowing of content boxes and is supported by almost all modern browsers (including mobile browsers) is a great solution.

SASSLOW SPECIFICITYWhat is your favourite way to keep specificity low in big projects with lots of module reuse? Mirko Garozzo, London, UKMM: Im a big advocate of SMACSS, which advocates categorising CSS rules and using meaningful names and shallow selectors to keep your styles as portable as possible. First, you define your base styles these are basically the HTML element tags such as , and . From there you start to define your modules, both major (header, footer) and minor (buttons, inputs). The idea is to take full advantage of the cascade and only add to styles, never override them. Avoid relying on the HTML structure to style modules and instead use named classes for example .button-primary , .button-secondary .

impact low. Plus, if you use the .scss syntax, you can still write vanilla CSS and have it compile normally. This makes things easier for non-Sass users who may need to add to your files. Id also suggest taking advantage of a shame.scss file for those one-off hacks that arent as clean as the rest of your styles.

REACTBUILD TOOLSWhen first starting with React, which build tool should you choose Browserify or webpack?Jin Foria, Beijing, CNBA: If youre just getting started, go with webpack (webpack.github.io). You wont regret choosing either one, but webpack comes with more functionality out of the box, enabling you to get up and running faster, without sacrificing advanced features. Browserify (browserify.org) is all about flexibility, which is great, but youll have to do more yourself (create additional gulp and Grunt tasks, set up a dev server, and so on). Its better if youre already heavily into the Node.js ecosystem and have strong opinions on how to set those up yourself.

SASSCOMPLEX VARIABLESWhats a good example of a complex but handy use of variables in Sass? Barbara Asboth, London, UKMM: Combing variables with maps is a great way to organise related variables into groups. Maps are structured in key: value pairs and are accessed with the map-get($map-name, key) function. I use this technique when defining breakpoints, colour palettes and z-indexes. You can even take it a step further and use a custom function to

%XLOGWRROVwebpack is a module bundler

60$&66 Explore the SMACSS methodology with this book by Jonathan Snook (smacss.com)

LONDON 17-18 SEPTEMBER 2015Explore CSS, UX, web performance strategies,

the Internet of Things, app icon design and much more!

REGISTRATION OPENING SOON 50 EARLY BIRD TICKETS AVAILABLE SAVE 100!

generateconf.com/london-2015

ERIC MEYERCONSULTANT AND CSS PIONEERmeyerweb.com

RACHEL ANDREWCO-FOUNDER, EDGEOFMYSEAT.COM rachelandrew.co.uk

PETER SMARTDIRECTOR OF UX AND STRATEGY, FANTASY petesmart.co.uk

Follow @netmag for details

june 2015 15

People, projects & paraphernalia

THIS MONTH FEATURING...

SIDE PROJECT OF THE MONTH 16Bryan James broke new ground with CSS clip-paths to create In Pieces, an award-winning site exploring endangered species

BEYOND PIXELS 20Sometimes its good to break out of your comfort zone. Val Head shares what shes learnt on her foray into jewellery making

CLIENTS FROM HELL 17One generous and trusting young designer learns the hard way that you should never cover a clients costs up-front

NEED LIST 21The web stuff we fancy this month, from a little black book of selling to an app that clears all the clutter from your news feed

WORKSPACE 18Nerf guns sit next to awards certificates in Superhero Cheesecakes Amsterdam office. Niels van Esch gives us a tour

EVENT REPORT 23Oliver Lindberg shares the news from SmashingConf Oxford, where talks took in everything from walruses to lasers

16 june 2015

FEEDSide project

net: Where did the idea for In Pieces (species-in-pieces.com) come from?

BJ: It initially came from simply tinkering with CSS clip-paths and specifically, the polygons they can create. At first I just wanted to know if CSS polygons would connect with CSS transitions and animate which they did, much to my delight. The idea that these endangered species are in pieces really formed the genuine heart of the idea.

net: Tell us about your process ... BJ: After illustrating each species in Illustrator, I would output a flat image, place it into the browser and trace over it. For the tracing stage, I created a JavaScript function which allowed me to click three times on a div element containing the flat image. This would return a line of code containing the percentage values of each co-ordinate for each triangle. These three co-ordinates simply draw what becomes the

triangles, using CSS clip-paths. After Id got the basic CSS in place, I made lots of tweaks to get rid of the gaps created when two shapes sit along the same line. I then animated each animal directly in the inspector, before moving into CSS.

net: How did you manage the project?BJ: Creating each of the 30 different animals was easily the most intense part. I had to make sure I didnt go over the top on the details. I set myself daily and weekly goals to make sure that I got the project out. It was fairly tough going at times!

net: What challenges did you face?BJ: A huge challenge was using CSS clip-paths in the first place, because not much has really previously been done with them. When I had problems, I had nowhere to turn for help, because nothing exists yet for the kind of thing I was doing. I just had to work things out for myself by experimenting.

net: What was your favourite part of the process?BJ: Undoubtedly the development parts when you first discover something that feels just right. I love diving into developing small details I get a bit of a kick from the minute details in interactive states that give the user a sense of feedback.

IN PIECESBryan James pushed the boundaries of CSS clip-paths to create this award-winning site

SIDE PROJECT OF THE MONTH

INFO

job: Web designerw: bryanjamesdesign.co.ukt: @WengersToyBus

What makes a successful online portfolio? We asked our Twitter followers for their top tips for

creating a lucrative online presence

CAPTURE YOUR CHARACTER

Only show your best: trust your gut and weed out the crap stuff! says @TobiasHall and @soyrex

agrees, advocating strong personal brand and a focus on

quality not quantity. @rathniley adds, Dont rely on

client work. Self-initiated projects can be just as impressive and showcase your full potential.

DOCUMENT YOUR DEVELOPMENT

@DrewChristiano suggests showing your work in progress,

not just the final designs: So much of the end result is the thought

processes behind it. @jonserness adds, Dont go overboard, but a

few detailed case studies will really give the viewer a taste of

your design know-how.

TARGET YOUR MARKETPut yourself in a potential

employers/clients shoes in every important decision you make,

says @jonserness. @obbyanderson agrees: While designer feedback can be useful, theyre not your target market. @nerv_agency makes a great

point: If content is king, distribution is queen. Good content

is key, but getting it to the right audience is equally important.

GAIN ONLINESUCCESS

HOW TO

clientsfromhell.net

june 2015 17

Feed

I was a relatively new freelancer and one of my first big jobs was for a magazine

client that needed me to design some posters for an upcoming event.

Me: It looks like its going to be roughly $XX to have these 10 posters printed at full size, in high-gloss full colour.Client: OK, sounds great. Do I get a discount if I order in bulk? I think I can sell some posters at the event.Me: Sure, its going to be around $XX for 10 of each print.Client: I can do that, but I cant get the money to you today. Can you cover it and I will pay you back? I promise Im good for it. I just need these printed in time for the event.Me (stupidly): Sure, Ill cover it so I can have printing done in time. Just promise you will pay me for the design and printing.Client: Of course, Im not a bad guy! Plus, Ill be making tons of money at this event. Im good for it. Get them printed!

When the posters were finished printing, I picked them up and brought them to the client at their event.

Client: Oh these look amazing! Hang one of each poster up for me Wow, you did a great job!Me: Thank you. Here is the final invoice. Do you have a cheque or cash for me?Client: Im too busy to deal with this now. Come back and check with me after the event.

After the event, I tracked him down.

Me: I need to get paid. I covered these printing costs up-front and my rent is due.Client: Well, I only needed the posters for the event today and I didnt sell any of them. You can just keep all of the posters. Im not going to pay you.

I was devastated. Not only did I not have enough money to pay my rent, I was stuck with hundreds of posters which I had no use for.

Over 10 years later, I still have these posters sitting in storage. I have given some of them away but I keep the rest as a reminder: never front for a client.

PAYING UP CLIENTS FROM HELL

Illu

stra

tion

: Ben

OB

rien

hud

dlef

orm

atio

n.p

rosi

te.c

om

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

16

18 june 2015

Superhero Cheesecake is an award-winning creative

digital production studio working out of Amsterdam. Our team is made up of visual designers, UX designers, motion graphics designers, developers and digital producers, all creating digital work for web, mobile and installations. In recent years we have made a name for ourselves by moving into international projects.

We moved into this office a year ago. Its inside a warehouse named Pakhuis Argentinie, which is Dutch for Warehouse Argentina. It is located near Amsterdams main waterfront, the Ij, and conveniently close to Amsterdam

Central Station. The space has a really creative and open vibe to it and the interior and materials feed our creative minds every day.

Its a spacious, light workspace with an open floor plan, a separate mezzanine level and huge windows that span over two floors. We have a huge games room (1) where our developers and designers can relax during or after a hard days work.

We also have fun nick-nacks around to keep us relaxed and inspired, like this little bloke (2). I am not sure where we found him I think he may have been kicked out of the garden gnome community for indecent

behaviour! As you can tell, we have a firm belief that you need to work hard and play hard. There are enough Nerf guns (3) in the office to serve a whole army.

We love to win awards especially Site of the Day awards from the FWA and Awwwards. Framing them (4) ensures we get our hit of pride every day and reminds us a lot of hard work is required to win them.

When we do win awards we have to be ready to uncork the champagne (5). On our desks youll always find a bottle or two within arms reach.

At Superhero Cheesecake, as the name suggests, we are all geeks. Youre not a real nerd if you dont like Transformers (6). There are plenty around in our office, ready to shift into action!

Self-proclaimed nerd Niels is managing partner and project director at Superhero Cheesecake (superherocheesecake.com)

PLAY STATIONNiels van Esch#lhv#xv#durxqg#Vxshukhur#Fkhhvhfdnhv#

mental metropolis, where work and play collide WORKSPACE

2

5

3

4

PRO

FILE

PRO

FILE

20 june 2015

FEEDBeyond pixels

Lately, Ive been trying my hand at both laser cutting wooden jewellery and making metal jewellery. Applying my design skills to two completely different mediums has been both exciting and frustrating. My biggest motivation has been to get away from the computer it starts to feel a little strange when you realise nothing you make exists beyond a screen.

Laser cutting was the first thing I tried. Its only a small step away from the familiar, in that I still create the designs in Illustrator. The laser essentially traces the vector shapes while it burns through the wood. Its so addictive to watch, and it smells like a campfire!

Designing objects to be cut instead of shapes to display on screen completely changes my mindset. Instead of worrying about breakpoints and screen sizes Im concerned with cut depth and order. I contributed a lot to the shops scrap pile before I reached a point where I was creating pieces I was happy with, but now Im hooked.

Metal smithing has been a bigger challenge. Its incredibly humbling when you step into a new discipline in which you have zero existing skills. I have a new appreciation for every piece of jewellery I own now! Heating, melting and hammering metal is hugely addictive. In my very first class I made an adjustable ring out of a piece of scrap printing plate. I sketched out pages and

pages of ring ideas when I got home I had huge plans. On my next trip to the studio, the reality of how much I still had to learn really sunk in.

My friend, Melissa Frost (who is an actual jewellery designer) offered to teach me how to solder rings, which I was really excited about. After a whole evening of trying my hardest at prepping and soldering metal wire I only had two rather flawed rings to show for it. The gap between my skills at metal work and what I wanted to create was hugely evident.

On one hand thats incredibly frustrating, but on the other its liberating. With no clients or deadlines for this work I have the freedom to spend time learning and improving. As hard as it can be to admit, I dont have to be amazing at this yet. Plus, since I have so much to learn, I see huge improvements in my skills with each new project. Thats what keeps me coming back. I wear that first ring I ever soldered as a reminder to myself that making something less than perfect is the first step towards making something Ill love.

JEWELLERY-MAKING This month ... trying her hand at creating jewellery

has pushed Val Head out of her comfort zone

BEYOND PIXELS

STUFF I LIKE

TOMOMI IMURADeveloper, PubNub

girliemac.com

MDN When I am coding in

JavaScript and forget how to use a certain method or need some references, I go to the Mozilla Developer Network.

I customised productivity app Alfred (alfredapp.com) so that

when I press alt+spacebar and type in mdn array filter() ,

it takes me to my MDN search results page.developer.mozilla.org

CREATIVE COMMONS Besides being a frontend

engineer, I also write technical articles and occasionally

speak at conferences. CC Search comes in very handy when I need some

interesting images or even just funny cat photos.

search.creativecommons.org

CHROME DEVTOOLSAs a frontend dev, I cant live without browser developer tools. I can inspect markup,

debug JavaScript, tweak CSS styles and so on. Chrome is

adding more features for mobile development and the new responsive view

is especially useful.developer.chrome.com/devtools

Designer Val (valhead.com) is known for her work with web animation. She teaches interface animation and wrote the CSS Animations pocket guide

june 2015 21

Need list

(1) For the intermediate to advanced CSS user, Lea Verou showcases some top undocumented tips for using CSS3 (netm.ag/verou-267). (2) Clear the clutter in your feed with Breaking an app that enables you to collate news stories, blog posts and anything else you want to read

(itsbreaking.com). (3) Start them young with this playful introduction to programming, with full colour illustrations and step-by-step examples (netm.ag/kids-267). (4) Discover the secret to a successful creative career in Khoi Vinhs collection of insightful interviews (howtheygotthere.us). (5) Harking back to simpler times, Noun Project focuses on using symbols as communication and the new Mac app comes with over 100,000

icons (thenounproject.com). (6) Advertising creative director Joshua Weltman spills the beans on how to sell, sell, sell (netm.ag/strangers-267).

Small objects of web design desire: from a kid-friendly programming book to an app that clears the clutter from your news feed

NEED LIST

What we think

STUFF WE WANT

BREAKING $2.99CSS SECRETS $33.99

NOUN PROJECT $9.99/mo

JAVASCRIPT FOR KIDS $34.95

SEDUCING STRANGERS $29.95

HOW THEY GOT THERE $25

3

5

21

4 6

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

ISSUE 268 ON SALE 14 MAY

10 BEST RESPONSIVE DESIGN TOOLS

We reveal the indispensable tools you need to make your site work smoothly on multiple devices

NEXTMONTH

PLUSBuild a drum

sequencer with the Web Audio API

Master the Genesis WordPress

framework

Become a Sublime Text power-user

june 2015 23

Feed

EVENT GUIDE

FUTURE INSIGHTS LIVEDATE: 1-14 JUNE 2015

LOCATION: LAS VEGAS, USThe fourth annual Future

Insights Live conference unites web pros of all kinds to explore the latest technologies pushing the web forwards. Inspirational sessions will be provided by the

likes of Jenn Lukas, Aaron Draplin and Rachel Andrew.

futureinsightslive.com

WEB DESIGN DAYDATE: 11-12 JUNE, 2015

LOCATION: PITTSBURGH, PATwo days of exciting talks

and workshops centred around web design. Speakers include

the guy who started that whole responsive web design thing,

Ethan Marcotte, alongside Denise Jacobs and Lyza

Danger Gardner. webdesignday.com

WEBVISIONS BARCELONADATE: 2-4 JULY, 2015

LOCATION: BARCELONA, ESWebVisions explores the future of design, content creation, user

experience and business, and holds conferences around the

globe. This July sees the likes of Stefan Sagmeister and Carolyn

Chandler hitting the stage in the sunny city of Barcelona.

webvisionsevent.com

WDCNZDATE: 31 JULY, 2015

LOCATION: WELLINGTON, NZLaunched in 2011, this one-day conference in

Wellington promises tech talks for web devs. This

years speakers are yet to be confirmed, so keep an eye on the website for more details.

wdcnz.com

EVENT REPORT

PRO

FILE

DATE: 17-18 MARCH 2015LOCATION: OXFORD, UKURL: smashingconf.com/oxford-2015

Flappy Bird, balloons, Kraftwerk and, of course, lasers: it must be SmashingConf

Oxford. As youd expect, the event started with a bang as Seb Lee-Delisle and Val Head projected an impressive laser show onto the ornate ceiling of the citys Town Hall. A common thread running through the day was the user. You only gain an understanding of real user needs from exposure to users, argued Meagan Fisher, Rachel Ilan Simpson and Richard Rutter, and this needs to be an ongoing part of the process. Recommended resources included Silverback and naturally Steve Krugs usability guide Rocket Surgery Made Easy. While there was thrilling talk of responsive images and how to build hybrid apps using NW.js (nwjs.io), the speakers also reminded us of users on older systems. While we get hysterical about the latest iPhone or the latest framework, there are a lot of people for whom an old computer or no-frills mobile phone provides their only access to the internet. We need to remember these users when we design and develop experiences.

This was highlighted by Bruce Lawson, who warned of the danger of turning Blink into another IE6 by creating a monopoly. Check out his slides (featuring a walrus, The Cheeky Girls and a scary clown) at netm.ag/lawson-267. Lawsons plea for us to love the web was also picked up by Christian Heilmann, who cautioned that the web was in danger because of native apps on monolithic closed systems, browser dependencies and walled content gardens. Heilmann called for the pipes to be unblocked and for us to build minimum lovable products for everybody.

To achieve this, we can use progressive enhancement (Zoe Mickley Gillenwater delivered a fascinating talk on how to use flexbox for this approach) or performance optimisation. Paul Lewis and Jake Archibald got the audience excited about Offline First and the Service Worker. If we save users from dodgy Wi-Fi, for example, we can beat native apps at UX. Users first: definitely not rocket surgery, but a goal we forget far too often.

SMASHINGCONF OXFORDFrom laser shows to Cheeky Girls analogies, Oliver Lindberg

reports on the goings-on at Smashing Conference

Oliver (@oliverlindberg) is nets editor. A native German, he has only recently been introduced to such British delights as Wheres Wally? and Dolly MixturesPh

otog

rap

hy:

Mar

c T

hie

le fl

ickr

.com

/pho

tos/

mar

cthi

ele

Terms & conditions: Prices and savings quoted are compared to buying full priced UK print and digital issues. You will receive 13 issues in a year. If you are dissatisfied in any way you can write to us or call us to cancel your subscription at any time and we will refund you

for all un-mailed issues. Prices correct at point of print and subject to change. For full terms and conditions please visit: myfavm.ag/magterms. Offer ends 31 May 2015.

SAVE UP TO

38%SAVE UP TO

45%

PRINT EDITION ONLY DIGITAL EDITION ONLY

FROM

26.99FROM

19.99

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

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

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

BASED ON A 6-MONTH SUBSCRIPTION BASED ON A 6-MONTH SUBSCRIPTION

SAVE UP TO

60 %TWO SIMPLE WAYS TO SUBSCRIBEONLINE: myfavouritemagazines.co.uk/NETSUBS PHONE: 0844 848 2852 AND QUOTE CODE: PRINT15, DIGITAL15 OR BUNDLE15

NEW PRINT & DIGITAL EDITION

FROM

32.49

Enjoy a combined print and digital subscription, and take advantage of print as well as exploring the fully interactive digital experience

O Print edition delivered to your door

O 13 issues in a one-year subscription

O iPad and iPhone edition download

O Android edition download

O Money-back guarantee

GREAT REASONS TO SUBSCRIBE

Your subscription will then continue at 32.49 every 6 months - saving 31% on the shop price and giving you an 83% discount on a digital subscription

Opinions, thoughts & advice

STYLE GUIDES FOR THE DIGITAL AGE

In an increasingly multichannel world, why are brand guidelines still focused

on print? Tom Dougherty looks at how to write the rules for a digital era

I know what youre thinking that headline sounds like something you

should have been reading 10 years ago, right? But how many times have you started working with a new client and been sent the outdated brand guidelines PDF to review? Weve all been there. 98 pages of print-focused layout rules, logo exclusion zones, CMYK references Then right at the back, youll find it tucked away: Digital usage. Normally consisting of two pages of inadequate information, leaving you asking many questions.

It seems crazy that in this day and age the digital environment is still considered secondary to above-the-line communication when it comes to providing guidance on how a brand should be visually represented. Digital channels are at the heart of most brand communication nowadays, and are certainly the places where higher volumes

BUSINESS

COPYWRITING FOR ENGAGEMENT 43Creating copy that hooks in its audience starts long before anyone sits down in front of a keyboard, says writer Rob Mills

INTERVIEW 32We chat to Scott Jehl about the project that changed the face of web design, and why its our duty to start being more responsible

RAWK THE WEB 28Denise Jacobs introduces Rawk the Web, an initiative that aims to inject some much-needed diversity into the conference circuit

june 2015 27

Opinion

of people will encounter a brand. Providing some guidance on how that brand should live and breathe online is essential.

ARE THEY REALLY NEEDED?Most creatively minded folk would argue that the lack of rules and guides is no bad thing, but from a brands perspective it can be damaging to have so much inconsistency across its digital output. At Delete many of the global brands we work with have a roster of digital agencies they often work with. This only reinforces the need to establish some base-line guides for people to work from.

So why is digital commonly neglected? Brand guidelines have traditionally been the output of branding agencies and design firms where digital communication is not a focus. This means the digital section of a style guide is often not fit for purpose for the multi-device, multichannel world.

Just think about the multitude of places that exist online where a brand can be visu-ally presented: a web page, mobile page, mobile app, email footer, Facebook ad, display banner, social post ... the list is endless. Of course, were not just talking about a static presentation either. Theres animation, audio, transitions none of which can be delivered in a PDF document.

WHAT CAN WE DO ABOUT IT?Its up to us, as digitally minded creatives, to challenge the traditional approach. There will always be an opportunity to have this discussion with your client early on. A few simple questions should soon make them realise work is required: How should the logo behave at different responsive break-points? Is there an icon fallback for small screens? What are your web typography standards? Clients will likely be looking to you for guidance on these issues.

Producing digitally focused guidelines is an opportunity for you to grow your relation-ship with a client, as you will be essentially operating as a digital brand guardian. If youre involved in a redesign project or even a one-off campaign, its worth pitching this as a key deliverable.

So how should you approach these digital brand guides? Well, for a start they shouldnt sit inside a PDF document! Its essential the information is displayed in the medium in

THE FUTUREIdeally, rather than ending up with two sets of brand guidelines, you want to have the print-focused guides accessible from this web page, too. That way you ensure there is one central point for accessing this informa-tion, which can be updated as required.

Picture this you start working with a new client and you receive the link to its online brand guidelines. A slick, responsive style guide containing all the basic rules, code snippets and digital assets you need. And then down at the bottom, youll find a downloadable PDF containing a few pages of print rules. Now that would be nice.

which it will exist. A simple HTML framework will allow you to categorise your elements clearly and provide code snippets where possible, to reduce the margin for error.

Things to consider include: logo usage (dimensions, colours, padding), responsive logo views, logo icons (app icon, favicon), RGB colour references, CSS typography styles, the standard masthead and footer, iconography, buttons (primary CTA, second-ary), patterns (overlays, backgrounds), grid structures, form styles, animation examples, video opening and closing frames, social post examples and accessibility standards.

Providing examples of usage will also help any agency or external partner understand the dos and donts. Downloadable digital assets will also prove handy: PNGs, SVGs, font files and so on.

Tom is UX director and partner at Delete (deleteagency.com), where he works with clients including Red Bull, Expedia, IKEA and Unibet P

ROFI

LE

At the back of the brand guidelines PDF,|rxoo#qg#lw=#Gljlwdo#xvdjh1#Qrupdoo|

consisting of two pages of information,leaving you asking many questions

VOICESEssay

28 june 2015

june 2015 29

Essay

Theres a diversity deficiency in our conference circuit. Denise Jacobs explains how shes fighting to change the

face of the web, one speaker at a time

RAWK THE WEBIllustration by Ben Mounsey

In 2005, I was teaching on a web design and devel-opment programme in Seattle when I heard about

a conference called WebVisions, and that Molly Holzschlag (molly.com) whose books Id used in my classes would be speaking there. Id never attended a conference before, so I jumped at the opportunity to go.

That decision changed my life. As I watched Molly on stage, it hit me: she and I teach the exact same thing except she talks for only one hour (not for 12 weeks), gets to travel all over the world, and doesnt have to grade papers! In an instant, it became crystal clear: I wanted to become a speaker. I wanted to be like Molly.

Despite that moment of clarity, it took me five years to turn this desire into a reality. Upon finishing my book The CSS Detective Guide at the beginning of 2010, I finally found the confidence to pursue speaking in earnest. I went all-in. By the end of the year, Id spoken at 16 events in the US and even in London. I was living the dream. But I quickly noticed that within the web confer-ence circuit, something was awry.

HOUSTON, WE HAVE A PROBLEMAlso in 2010, I was invited by Min Jung Kim to be part of the How to Rawk SXSW panel. She assembled a truly diverse group of panelists: Ben Huh, Annie Lin, Jeremy Keith and me. It was a great session, but there was some-thing that vexed me. I realised that at SXSW and most other conferences, a panel like this was the exception and not the rule. At one event after another, over the

course of that year, I would be one of a handful of women and/or people of colour not only as speakers, but in attendance in general and in all but one case, the only black female speaker.

That there isnt enough diversity in the tech industry is well-known. For years now there has been an oft-stated plea for change in the web conference circuit. In the 2007 article Beyond the A-List , Nick Finck lamented: I go to [conferences] and what do I see? The same handful of speakers giving darn near the same talk ... Nothing new, few new faces, fewer new ideas.

The causes of this diversity deficiency have deep-rooted origins which I decline to unravel here. But I will say this: I dont believe it stems from malicious intent. Over the years, Ive had the opportunity to be a nexus between conference organisers and speaker hopefuls, and I believe Ive determined the disconnect: visibility. Diverse aspiring speakers do exist, but they may not be making themselves widely known. Event organisers bend over backwards to put together a varied speaker line-up, but still have trouble locating talent.

This is lamentable, as the very people who are most needed, wanted and sought-after are missing out on the opportunity to not only share their expertise, but to build visibility, reach and authority. And attendees miss out on being exposed to a broader range of perspectives that will enrich them both professionally and personally.

Right after the How to Rawk SXSW panel, it became clear to me: diverse speakers need to rawk more than

CULTURE

VOICESEssay

30 june 2015

just one conference. So that we can be heard, we need to be seen. We need to Rawk the Web.

RAWK THE WEB: WHAT, WHY AND HOWRawk the Web (rawktheweb.com) is an ideology that when put into practice precipitates change. More than that, Rawk the Web is a philosophy, a way of operating in the world, and something I envision becoming a global initiative. The core tenet is to amplify the visibility of women and people of colour to give tech a more inclusive and diverse face. The focus is on these things:

OIncreasing the pool of visible, under-represented tech experts by giving them the resources, tools and support needed to become successful speakers

OProviding them with a mechanism to interface with conference organisers

OEncouraging diverse youth to pursue tech-related fields by providing strong role models

What are the projected outcomes? The pool of candidates will become bigger, will make itself more known, and it will become far easier for conference organisers to invite these people to speak, creating even better events. With more diverse conference line-ups, the tech industry will begin to better reflect the world from which it came: multi-gendered, multi-racial and multi-faceted. And finally, the next generation of diverse youth, seeing itself reflected in the faces of the tech industry, may be more inclined to become a part of it.

Shifting the imbalance is bigger than any one group. Its going to take everyone working in concert to create the change we want to see. Whether youre part of those under-represented groups or not, there are plenty of ways for you to begin to tip the scales.

The first is to amp up awareness. At the Future of Web Design in London in 2010, at one point I found myself in conversation with five of the fewer than 20 attendees of colour at the 700-plus attendee event. The Belgian friend I attended with later admitted he was uncomfortable being the only white person in the group. I know you did, I said to him. Welcome to my world.

At the next tech event you go to, look around. Be aware of any blindness you may have had towards the lack of diversity at events youve attended and see what feelings come up. Does it seem normal? Does it seem off? Why?

And what can you do to start challenging your own sense of what is normal?

The second thing you can do is to be supportive. If you know of anyone who is part of these under-represented groups, and who is interested in speaking and has valuable content to share, suggest them to event organ-isers. Volunteer yourself as an accountability partner to help them send talk proposals in, offer to mentor them, and make introductions with conference organisers on their behalf. Help bolster their self-confidence.

Finally, be proactive. There are a growing number of programmes that encourage women and people of colour to code. Direct anyone you think would benefit to check these programmes out, or consider sharing your exper-tise as a volunteer instructor.

Other groups are also working to change the face of tech. Ladies in Tech celebrates female speakers, Chicago Camps runs Speaker Camps for honing presentation skills, and theres also Tech by Superwomen and Black

Tech Week. You can support these organisations and many others. Find the ones that resonate with you.

Diverse speakers: you can give presentations to under-represented students at local schools, from elementary to college level, about your work in the tech industry and the range of jobs for students who like computers. This encourages future change in the number of diverse students in computer and design-related programs.

BE THE CHANGE TO MAKE CHANGEWhile its important for a community to work towards a common cause, it still boils down to each of us as individuals making a difference. Think about it: youre reading this article right now because I saw Molly Holzschlag speak at a conference in 2005. Through her example of speaking and writing about tech, I saw the possibility that I could be doing the same. I saw myself in her, and she was key to me changing the entire course of my life for the better. Whose life are you going to change? How are you going to Rawk The Web?

Denise (DeniseJacobs.com) is the founder and chief creativity evangelist of creativity and innovation collective The Creative Dose (TheCreativeDose.com)

PRO

FILE

Rawk the Web is a philosophy, a way of operating in the world,and something I envision becoming a global initiative. The coretenet is to amplify the visibility of women and people of colour

to give tech a more inclusive and diverse face

32 june 2015

VOICESInterview

SCOT T JEHLWords by Martin Cooper Photography by Chandler Williams

We catch up with one of the faces behind a landmark project in the evolution of RWD to find out how to prioritise performance, and why we need to start being more responsible

june 2015 33

Interview

INFO

job: Full-stack developer, Filament Group w: scottjehl.com

t: @scottjehl

The 2011 Boston Globe website project (bostonglobe.com) which saw design and frontend development studio Filament Group team up with Ethan Marcotte is seen as a watershed moment in the evolution of responsive web design. It was one of the earliest large-scale implementations of responsive design, and served as a refining ground for the approach and the processes that underpin it. One of the key figures on the project was Scott Jehl, a web designer at Filament Group, who has also worked with clients including Lego, Global News and eBay.

This game-changing moment for the web design industry was closely followed by a life-changing event for Jehl himself. He and his wife hopped on a plane to Southeast Asia, where they spent eight or so months travel-ling around. I left after I had finished up the Boston Globe project and, taking off [for Asia], I felt like I was in a good spot. I felt like I had a lot of answers, he recalls.

On the road, Jehl worked remotely for the Filament Group while his wife volunteered at a hospital. The couple put down roots for a few months, and Jehl found himself needing to access the internet using the local ser-vices. This came as something of a shock.

A DIFFERENT REALITY[In the US] we have it pretty cushy, he says. Wi-Fi, 4G and Apples latest gadgets are all taken for granted. By comparison, accessing the web via mobile networks in SE Asia as many of the locals do posed more of a challenge. It relied on a combination of basic protocols, luck and the data showing real determination to reach its destination. I really got to feel what it was like living in someone elses shoes, Jehl adds.

Experiencing this divide between the digital haves and have-nots brought about a new determination in Jehl. Having left the US filled with confidence won from the Boston Globes success, Jehl returned humbled and appreciative of a larger truth: design shouldnt just be responsive, it needs to be responsible too. I realised that there are a lot of big problems still to be solved, he reflects. The focus for me became performance, particularly on slow and intermittent connections.

The realisation was so strong it prompted Jehl to pen a book on the topic: Responsible Responsive Design (netm.ag/responsible-267),

Interview

june 2015 35

published in late 2014 by A Book Apart. The title explores ways to develop for a truly global audience regardless of network capabilities and it is already making waves in the web community.

RESPONSIBLE DESIGNBuilding sites that are crafted to work on slow connections may sound like the morally right thing to do, but theres also the business side to consider. Why should a US client with a domestic customer base spare their time and money making sure they have a site that will work in the developing world?

What you have to remember is, even in the US, 3G is still the most common connec-tion speed, Jehl replies. LTE hasnt domi-nated even in cities. I go into Boston and there are blackspots.

As for the business case, designing sites and applying optimisations that make the web feel quicker is a pretty easy sell: If a person is browsing with a prepaid SIM card, every byte they download has a real cost. And most sites on the internet are a megabyte-and-a-half or more in size. Thats pretty heavy.

So, designing sites with performance in mind helps everyone. However, Jehl admits that technically, it can be a tough proposition. For a site to feel slick it needs to render in one second or less on Wi-Fi, and in around two seconds over 3G. The perceived wisdom about how you maximise performance is constantly evolving. Jehl recalls the early

days of responsive, when there was an im-mediate focus on the size of the site. We were building sites that addressed a lot of differ-ent usage scenarios at once and this, inevi-tably, made those sites heavier.

Fluidity was a main concern and so was performance, he elaborates. One of the areas people directed their attention to was the raw file size. How big was the site? How many bytes were being downloaded?

Lately theres been a shift. The technical focus has moved on to exploring how we can deliver lighter sites, while still maintaining the same rich experience. One technique, Jehl says, is prioritising what arrives first. By managing the order in which content is displayed on screen, we can greatly influence

how the performance of the site is perceived. Al-though, of course, chang-ing the order in which content arrives doesnt reduce the weight of the site itself.

PERFORMANCE ISSUES

As we talk, it becomes ap-parent that Jehl believes performance should be the star that guides a project team. Per-formance should be considered at every turn, because it has a profound effect on a sites ability to reach an audience. If a site is not delivered quickly, you cant begin to think about usability, Jehl says, simply.

Our client interactions always start by getting everybody on the same page, he continues, explaining how to get a project off on the right foot. Performance becomes

baked into everything we produce through-out the course of the project. Again, Jehl makes the point that convincing clients of the need to focus on performance is never a difficult proposition. A highly performant site will naturally present low access barri-ers, which means more paying customers will be able to access it.

We move on to discuss performance budgets. Jehl explains there are, in his ex-perience, two common approaches. Theres the overall budget of how much code you want to deliver, and theres the budget of how much time you can afford to spend rendering this code on various connection speeds. Neither metric is perfect.

At Filament Group the focus usually rests on time-based metrics. The teams budgets are incorporated into their build tools so, when they make changes to a codebase, the code is optimised and then tested in a browser. This testing reveals whether the changes to the code have made any perfor-mance regressions against the budget is it still loading within one second on Wi-Fi, and under two-and-a-half seconds on 3G?

If we regress, Jehl says, we have to go back and figure out what happened. We tend to approach the budget that way, but Ive seen other companies have very successful

3G is still the most common

connection speed inthe US. LTE hasntdominated, even

in cities

VOICESInterview

36 june 2015

budgets that are based on file sizes. At Etsy I dont know if its an unwritten policy but when somebody adds something heavy to a page, they have to remove something of the same weight. That works too.

EXPLORING INLININGFinally we move on to exploring how a team can boost performance after theyve finished developing and editing their code. There are lots of automated processes we can use, Jehl reveals. We can let our tools combine files so we make fewer requests over the network. And we can start to deploy inlin-ing. Inlining involves serving up some of the CSS needed for a page in the same file as the markup. With the HTML and CSS com-bined, the number of server requests needed to build a page are reduced.

Inlining is, in Jehls opinion, simply in-credible. So incredible, Google commonly deploys the technique, which is one reason why its sites are so highly performant.

Inlinings a comparatively new thing thats come along in the last year or so, and its really taken off, Jehl enthuses. Its great because it offers such a dramatic im-provement. It can, in some circumstances, cut load times in half. Thats because a site can take two, three or more round trips to a server before it can start to render some-thing usable.

You shouldnt, of course, develop code with CSS and HTML combined. Its simply too messy, and, as Jehl points out, blending your concerns is bad practice. On the flip-side, he counters, if youre making the simplest one-page website, its common and actu-ally smart to put a style element in the head of a document, and add your CSS there.

Its smart because when the browser encounters externally linked CSS it will ef-fectively stop everything its doing. It will then request, download and parse the CSS. When all thats done, itll get back to the business of rendering your page.

So, yes, develop your code in silos, Jehl sums up, but when it comes to optimising your code, its a very different concern. Inlining is something we want to have our tools automate after weve finished developing. Its a production step.

TOMORROWS TECHNIQUES Jehls relentless quest for better performance doesnt end with inlining hes currently eyeing up the possibilities of HTTP/2. The problem with HTTP/1.1 is that, because it only allows one request per TCP connection, loading multiple assets efficiently is difficult. To get round this limitation, browsers can run multiple TCP requests in parallel. However, this is a limited fix, because too many TCP requests can lead to network

congestion and resource conflicts. Multiple requests also produce a lot of data duplication which, again, harms performance.

Whats attractive about HTTP/2, Jehl says, is that it makes a lot of todays performance hacks unnecessary. Certain browsers (Chrome and Firefox, for example) now support HTTP/2, but its still not widely accessible. The problem is, servers need to be converted so they can communicate in this language, Jehl explains. So its not

something thats going to happen overnight.

HTTP/2 also offers new features. The server can, for example, push assets to the browser in the same round trip that another request is made. The browser can say please send me this HTML document and

the server will think: I know, in addition to that HTML document, youre going to need this CSS file , explains Jehl, excitedly. The server will send both back to the browser in one request. So HTTP/2 mimics that same inlining workaround were using.

With that, Jehl draws our chat to a close. Rattling though his complicated schedule, he explains that hes off to Australia in a few days. It comes as no surprise to find hell be talking about performance.

Next month: We chat to digital product designer Cennydd Bowles

Inlining offerssuch a dramaticimprovement. It can, in somecases, cut loadtimes in half

VOICESBig question

38 june 2015

KRYS T YN HEIDE Designer, Levo krystynhei.de

On average, people entering the workforce today will switch jobs

every year-and-a-half. You should use that to your advantage and feel out different roles that interest you. Once you start to recognise patterns in what you enjoy, it will be easy to focus your energy and excel in that area. Ive been fortunate enough to work with insanely talented people since my very first job, which is simultaneously inspiring and challenging. Look for companies that are successful in the field youre interested in, even if its not the highest paying or most prestigious role. Youll learn from the best, which in this ever-changing industry, is more beneficial than most college courses.

Jobs in the web industry are many and varied. So whats the best way to navigate your way up the career ladder? We asked the experts

HOW DO YOU BUILD ASUSTAINABLE WEB CAREER?

BUSINESS

K IRS T Y BURGOINE Creative director kirstyburgoine.co.uk

Remember to be flexible. Agile is more than just development it applies to all parts of

running a business. No matter how well you plan things in advance, some projects will shift focus halfway through, and clients will change their minds. Being flexible will help you to work better with your client and ultimately create a better end product. Just dont be flexible when it comes to charging when the scope does change!

K ATHERINE CORY Web designer katherinecory.com

You can build a sustainable career by constantly producing

high quality work and engaging with the web community. If you tweet, attend relevant conferences, blog and share your work, you will begin to get noticed. You need a hunger to continue to learn and improve. Yes, it is stressful trying to keep up to date with everything, but focus on what you enjoy because the last thing you want is for your work to become stale.

june 2015 39

KEEP UP APPEARANCESSusannah Fox made a big career change recently so how and why did she do it?

Here (netm.ag/fox-267), Fox talks about why you should treat every day and task like a job interview. With further links to inspirational TED talks, this blog post will guarantee a new way to look at your career.

RESOURCES

CHRIS MIL LS Senior tech writer, Mozilla developer.mozilla.org

You need to generalise first, learn a good solid foundation of core technologies (including raw HTML, CSS and JavaScript), and then start thinking about specialising. Look around you to see what floats your boat. One of the key parts of having a successful, sustainable career is being happy and enjoying yourself, rather than just rushing towards the hottest, most profitable thing at the time. You should also be prepared to be constantly learning, as our industry evolves so fast.

K IM L AWLER Web designer kimlawlercreative.com

Keep shaking it up. Its easy to get comfortable following a tried-and-tested

workflow, or something that might have satisfied your clients in year one, but you need to constantly develop and offer more value than your peers. That doesnt mean you should undercut quite the opposite, you want to position yourself as the best choice for your clients. You need to get the fundamentals under your belt, too. Its awesome specialising in a CMS (for me its WordPress and Shopify), but having an understanding of PHP and code in general means you can diversify your career.

K IM GOODWIN UX executive, PatientsLikeMe & Cooper linkedin.com/in/kimgoodwin

Be willing to ask dumb questions. Find problems that interest you but try to learn from every problem, even if it doesnt interest you. Reflect on what worked and what didnt. Think hard about why. Share your learning, but dont assume your findings are a revelation to everyone else. Stay for a few years and learn how to make a difference over the long term. Take real vacations and set boundaries so you dont burn out. If youve stopped learning new things, change jobs before you get disengaged and less effective. Leave in a way that doesnt burn bridges.

AN ACCIDENTAL SUCCESSHow you find your way into the web isnt the important part its what you do

once you get there that counts. In this podcast (netm.ag/thyme-267), Gretchen Cawthon and Trina Fisher of Thyme for Design explain how finding your niche can lead you to finding your path through the web industry.

QUIT WHILE YOURE WINNINGLara Hogan is the senior engineering manager of performance at Etsy and

the author of Designing for Performance. In this blog post (netm.ag/hogan-267), she talks frankly about why quitting is natural, awesome and necessary and how it can actually be a good thing for your web career.

K AT THOMPSON UX designer katskii.co.uk

You need passion and dedication. How you show

that passion is more subjective attending conferences, writing blog posts, mentoring, keeping up to date with trends and technologies and being an active member of the community are key examples. In an industry that moves this fast, there will always be something new to learn. Competition is strong, but showing that youre actively involved can differentiate you.

40 june 2015

VOICESQ&A

net: How did you first get into web design? CS: My mother introduced me to web development when I was 14. When I was in college I worked as the web master (seriously, thats what the position said) for campus department. I took my sophomore year off and moved to Portland, Oregon. I needed a job and got one as a freelance frontend developer because I knew French and Photoshop. One thing led to another and they hired for me a couple of projects, one being my first PSD-to-markup build. After that gig I got another and another, and I never went back to Wellesley. I did think I would move to Europe and study architecture ... but I ended up in New York City. The rest is another story youll be able to hear part of it on The Start (thestart.fm) later in the year. net: How did you come to co-found SassConf?CS: SassConf was an idea that first came up either in Austin, Texas in SXSW 2012, or shortly after in New York. In short, a group of us Sam Richard, Scott Kellum, Mason Wendell and myself all found out

that we lived in the same city, and all loved Sass. We wanted to connect with others that loved Sass, to share and learn and be nerds. So we thought it would be pretty cool to get everyone together that loves the language and the contributors.

We started the NYC meetup, GothamSass, as a proof of concept. Our thought was if there are enough NYers, then perhaps there would be interest. One year later, we had SassConf 2013. Im super-excited for this years conference in Austin.

net: You have talked about how frontend development has changed over the years. Why do you think jQuery succeeded?CS: jQuery, and even Sass, or most of the successful OOS projects, succeeded because they were open and participatory by design. I cover this in more depth in a talk I gave at CSSConf Oakland in December (netm.ag/CSSconf-267). It is actually fascinating when you correlate it to studies of how behaviours form.

But if I had to pick one reason, jQuery provided a way for anyone to contribute. It had great documentation which lowered the barriers to entry. The first plugin was released two days after [John] Resig first blogged about jQuery (netm.ag/resig-267). He prioritised community. The value of community cannot be underestimated. Community is where change happens.

net: What has been the most significant change in frontend development? How do you think that has changed the way you work?CS: Tools. Our tools have got better. I feel like Im finally able to architect systems. Web design has always been bound by the rules of systems theory and design, but it was really hard to modularise and componentise the frontend. Node, NPM, Sass and other pre/post processors, browsers ... It is an exciting, fun time to be in development. net: What are the benefits of collaboration?CS: Its impossible to enumerate succinctly. Collaboration and participation are the behaviours that have the power to revolutionise our world. I think we those that work in development, especially open source have a tremendous upper hand because so much of our day-to-day is participatory and collaborative. When collaboration and participation are prioritised in civic society, the results are always tremendous. net: How can we make the web community more diverse and open to new things?CS: It starts at the individual level. We must be empathetic. The practice starts from within.

The co-creator of SassConf explains why community is where change happens

INFO

Job: Entrepreneur and frontend systems designer, Oddbird

w: itsmisscs.met: @itsmisscs

CLAUDINA SARAHE

Q&A

june 2015 43

Opinion

CONTENT STRATEGY

PRO

FILE

Writer Rob Mills explores how to create copy that hooks in your audience

I hear a lot of talk about content being important, but far less about why. Its

the latter Im most interested in. Copy can affect moods, sway opinion and influence buying habits, but in the end it all comes back to one thing: engagement.

As a writer, I set out to engage my audience, whether that is a client, a clients customer or a reader of my blog. But how can we ensure what we write is engaging? Well, it starts long before the writing itself. In fact there are three stages to the process: planning, creat-ing and measuring.

You could produce some well-written web copy in an appropriate tone, but it wont be engaging if you dont know who you are writing for and there is no strategy behind it. You need to know what your story is and who it is for only then can you decide how to tell that story. This allows you to make

informed decisions on things like language, tone of voice and tenses.

TAKING SOME TIMEOne obstacle I have regularly faced with clients is how long it takes to put content together: a long time if you want that content to be good, longer still if you also want it to be engaging. I recently took part in Gather-Contents webinar about content strategy for agencies, during which we completed an exercise concerning a web page with 700 words of copy on. It was determined that this 700-word page would take around 10 hours worth of time from briefing to publishing. Scale that up across all the pages on your website, chuck in more content types and you should see that without any planning, making the copy engaging is going to be a tall order.

There needs to be a stringent content production process. All stakeholders must know what that process is and where they are needed throughout it, and whether they are the content creator or not. A brief will help get things off on the right foot, providing it isnt too restrictive or too wishy-washy. If resources and budget allow (make it so!), a content inventory and audit along with audience research will further ensure what follows will be engaging.

Once your process is nailed down and you, the content creator, know what you are doing, now comes the production part of the process. When writing, keep your audience in mind, along with the personality and brand values of who you are writing on behalf of. If there are existing content guidelines available, this will be an excellent way to make your content engaging because it will help you write consistently and authentically in terms of brand language, tone and personality.

GAUGING ENGAGEMENT When the content has been signed off and published, the next step is to measure the level of engagement. This part can be tricky. Hopefully the very fact that you have planned the content and understood your audience will ensure your writing is engaging.

How you measure engagement depends on what metrics are available to you. Social media activity can help give some indication, analytics may reveal further insights, and if possible A/B testing content may help you refine copy to increase engagement. Even gauging feedback directly from your audience is useful. Reviewing your content isnt a one-off activity post-launch. Keep asking questions: Is it still accurate and relevant? Is it working for you? Is it working for your customers?

You must know the purpose of what you are writing and who you are writing it for in order to can make informed decisions on language, tone and style. This will ensure your content is engaging. Consider every word, have a strategy and keep refining after the publish button has been clicked.

Rob (@RobertMills) is content strategist for GatherContent. He is also a copywriter, editor, and published author. He collects typewriters and occasionally writes with a quill

COPYWRITING FOR ENGAGEMENT

GALLERYInspirational sites

44 june 2015

FSMILLBANK.COMTaylor/Thomas taylorthomas.co.uk

London design agency Taylor/Thomas designed this FS Millbank microsite for boutique type

foundry Fontsmith. It aims to showcase the FS Millbank typeface via a suitable real-world application: wayfinding.

We adapted impress.js by Bartek Szopka, which is effectively a presentation slide script, explains Craig Thomas, designer and partner at Taylor/Thomas.A lot of effort went into the web typography itself and getting the narrative right, using CSS and JavaScript to illustrate the particular facets of the typeface that make it special. Finally,

adjustments were made to make the site work well on mobile. The site was intended to be widely shared, so its delivery on mobile was key.

The design features nearly no images, so the entire graphic experience is built around the FS Millbank web font. CSS3 animations are used to rotate and scale elements, creating an immersive browsing experience, and the CSS3 3D Transform property provides visitors with alternate views of the typeface. The use of opacity and z-index creates a layered effect, which lends itself to the visually rich nature of the site.

Sensational design and superb developmentw: yeseniaperezcruz.comt: @yeseniaa

YESENIA PEREZ-CRUZ

Yesenia is a designer based in Philadelphia. She has created design systems for clients like MTV and Zappos, and currently works at Intuitive Company

CSS3 ANIMATION, FONTFACE, IMPRESS.JS, JQUERY TOUCHSWIPE, RWD

june 2015 45

Inspirational sites

FUZZCO.COMFuzzco Fuzzco.com

Fuzzco is a creative agency specialising in branding, web design and development,

photography, video and original content development. Its website is an exceptional showcase of the agencys work full of personality and unexpected touches, such as an infinite scrolling homepage. Users can scroll up or down, and when they stop, the page continues slowly in the same direction.

We wanted to do something unexpected with the homepage and when we added the subtle scroll we felt like we solved it, explains founder and creative director Helen Rice. We like the drama it adds to the experience.

Another delightful touch can be found on the sites Who page, which introduces the team at Fuzzco. We wanted the Who page to be simple and playful, Rice explains. We set up a monochromatic shoot for the more traditional photo and had everyone wear neutrals and stand in front of a cream paper background. We took tons of photos of everyone which we then ripped into pieces to make collages.

The page also features an illustration of each employees spirit animal. We would do more but it would be too much work to add someone new to the site! smiles Rice.

FONTFACE, JQUERY CYCLE2, RWD, CSS3 ANIMATION

The dapper kids at Fuzzco reinvented the infinite scroll. You can spend hours meditating on the meaning of existence while being blown away by the infinitely creative work that scrolls past, like your favourite song on repeat KEVIN SHARON #.(9,16+$521

GALLERYInspirational sites

46 june 2015

S I T E O F T H EM O N T H

The site for Ghostly Ferns a creative family based in New York simply oozes

personality. The entire Ghostly Ferns team has such a wide variety of skills and varying styles. Ghostly Ferns is full of a bunch of hard-working weirdos, says designer Meg Lewis. With this redesign we wanted to show off our personalities as well as our skills.

The result is a humorous site filled with quirky illustrations and design details (the animation on the ghostly Back to Top link is so much fun). The site also makes lovely use of web fonts; the

elegant serif face Kepler pairing beautifully with the friendly, geometric Halis Rounded.

Throughout the process, we really struggled to find a design that suited everyone individually, and the group as a whole. After a lot of scrapped designs, we decided to go as crazy and out-of-the-box as we possibly could, continues Lewis. Many of the things we joked about putting in, we actually decided to include and were glad we did. The result is indicative of our personalities and something were all really proud of. The site is perfectly weird and fun, just like us!

CSS3 ANIMATION, FONTFACE, JAVASCRIPT, RWD

GHOSTLYFERNS.COMGhostly Ferns ghostlyferns.com

june 2015 47

Inspirational sites

Alternative Apparel is a fully responsive ecommerce site,

designed by Portland-based agency Instrument. To ensure maximum flexibility, the site was built using a mix of two platfo