Net – december 2015 by Dario Pintar

FREe! 30-day trial

Unlimited access to on-demand video courses from leading experts

Visualise data with Angular

Build a data dashboard with this JS framework

The voice of web design

Issue 274 : December 2015 : net.creativebloq.com

Create an icon set in sketch

Design consistent icons with the app of the year

free wordpress theme options

Choose the right free theme for your project Feature

the 15 APIs developers need to know

Super responsive layouts without media queries

Essential APIs to solve most common dev problems

Welcome

editor’s note

This issue our focus is on site layouts. In our cover feature, Vasilis van Gemert suggests easier ways to create responsive sites – with cuttingedge CSS but without media queries. And in our lead tutorial Ray Villalobos explains how to build semantic, flexible and backwards-compatible layouts with Sass, specifically with two sets of mixins called Susy and Breakpoint. We also report from our Generate London conference and the net awards. Many of the winners are featured over the following pages: we profile New Agency of the Year Anton & Irene; interview Young Developer of the Year Julia Wallin; hear from the co-founder of Ladies that UX, our Grassroots Event of

the Year, about promoting women in tech; and look at how our Young Designer of the Year, Alice Lee, and the winner of Best Online Portfolio, Bethany Heck, present their work. Of course there’s also another tutorial about Sketch, our App of the Year. Once again, congratulations to all the winners! Our freebie this month is a 30-day trial of Lynda.com, which gives you unlimited access to its extensive library of on-demand video courses that you can watch anywhere. Happy learning!

Oliver Lindberg, editor oliver.lindberg@futurenet.com

Featured authors Vasilis van Gemert

Adam DuVander

Una K rave ts

John Allsopp

Vasilis is a lecturer at the AUAS in Amsterdam. From page 68 he explains how to create super-flexible, responsive layouts without media queries w: vasilis.nl t: @vasilis

Adam helps developers be productive and creative in his role at Orchestrate. From page 76 he lists the 15 APIs every developer needs to know w: adamd.org t: @adamd

Frontend developer Una architects design systems and builds software prototypes at IBM Design. She curates our gallery this issue w: unakravets.com t: @una

John is a developer, event organiser and the great grandfather of RWD. On page 104 he explains how to read local files with the File API w: webdirections.org t: @johnallsopp

december 2015 3

@netmag

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

net.creativebloq.com

Editorial

Editor Oliver Lindberg oliver.lindberg@futurenet.com, Production editor Ruth Hamilton ruth.hamilton@futurenet.com, Art editor Rebecca Shaw rebecca.shaw@futurenet.com, Commissioning editor Julia Sagar julia.sagar@futurenet.com, Deputy commissioning editor Sammy Maine sammy.maine@futurenet.com, Staff writer Dominic Carter dominic.carter@futurenet.com, Staff writer Alice Pattillo alice.pattillo@futurenet.com

Editorial contributions

John Allsopp, Fabio Benedetti, Tom Broadhurst, Tanya Combrinck, Dan Cork, Katherine Cory, Adam DuVander, Carlos Eriksson, Vasilis van Gemert, Dan Goodwin, Andre Harris, Kevin M Hoffman, Sam Kapila, James Koster, Una Kravets, Nick Moreton, Max Stoiber, David Wieland, Kyle Wilkinson, Daniël van der Winden, Ray Villalobos

Art contributions

Bobby Evans, Ben the Illustrator, Henk Bleeker, Richard Jenkins, Ben Mounsey, Jamie Schildhauer, Kai Wood

management

Content 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 Group content manager, creative and design Tom May tom.may@futurenet.com

Advertising Advertising manager Sasha McGregor sasha.mcgregor@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 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

NEXT ISSUE ON SALE 26 November 2015 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.

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

december 2015

Apps used

Google Docs, Photoshop, Dropbox, FutureSource, Illustrator, CodePen, Future Folio, GitHub

paper

COVER PaceSetter Gloss 250gsm P3-82 Galerie Fine 100gsm P83-114 Grapholvent 70gsm

Typefaces

Antonio, Share Tech, Merriweather, Titillium Web

contents Issue 274 : December 2015 : net.creativebloq.com

FEED

SIDE PROJECT of the month 16

How Paul Flavius Nechita created a new UI element every day for 100 days

clients from hell

BEYOND PIXELS

NEED list

EVENT reports

A freelance illustrator faces a client that doesn’t understand 2D design

Once a year, Dan Goodwin gets behind a local theatre’s technical desk

Web stuff we want this month, including a coveted mini Star Wars droid

The net team reports from Generate London and the 16th annual net awards

Workspace

Andre Harris shows us round COBE’s three-storey Munich workspace, and explains what keeps the digital creatives scoring design goals

voices Responsive reorganisation 29

Kevin M Hoffman looks at why responsive design requires flexible team structures

‘fast food’ design

Q&A

Why ladies that UX?

David Wieland argues that taking design shortcuts is bad for your company’s health

Young Designer of the Year Julia Wallin talks through her career so far

Lizzie Dyson explains why we need events to promote women in the tech industry

Big Question

There are plenty of CMS options. We asked the pros how they pick the right one

december 2015

VOICES

INTERVIEW

Stephen Hay explains why we all need to design content-first, and shares some thoughts on Apple’s UIs and Google’s Material Design

SUBSCRIBE to net and save up to 63%

Take advantage of the Print and digital Bundle Turn to page 24 to find out more Not in the UK? Turn to Page 51

Contents regular

GALLERY

Una Kravets rounds up her new favourite sites, including a conference website with an allencompassing theme

regulars Network

Exchange

The latest mail, tweets, posts and rants

Clarissa Peterson, Brad Frost, Val Head and Christian Holst answer your questions

Showcase

design Challenge

Focus on

profile

how we built

Three designers mock up car rental sites

free Lynda.com trial

See page 96

Sam Kapila on presenting a digital portfolio

New Agency of the Year Anton & Irene

Dpt’s physics-defying digital haiku website

PROJECTS SUSY AND BREAKPOINT

Sketch ICONS

Wake

Head to head

Ray Villalobos explains how you can build flexible layouts with Susy and Breakpoint

Features Create the perfect layout

Fabio Benedetti walks through how to design a consistent icon set using Sketch

The 15 Apis devs

68 need to know

Vasilis van Gemert explores some methods of creating responsive layouts without media queries

Adam DuVander counts down the 15 APIs that will address the most common developer problems

Project

Build a data dashboard with AngularJS 98

Nick Moreton explains how to use AngularJS to build data visualisations quickly and easily

Exclusive video tutorials! Look out for the video icon in the tutorials for exclusive screencasts created by the authors

Daniël van der Winden shows you how Wake can make sharing your work simple

Max Stoiber compares Sass and PostCSS

web standards

103

File API

104

Free Wordpress themes

108

Accessibility

114

Dan Cork explores the :has() pseudo-class

John Allsopp on how to edit content from the local system directly in the browser

James Koster explores the benefits of choosing a free WordPress theme

Carlos Eriksson on the cost of accessibility

december 2015 7

Mail, tweets, posts and rants contact us

@netmag

/netmag

+netmagazine

netmag@futurenet.com

net.creativebloq.com

@matthillco Thorough articles on accessibility.

@sgolubev Google’s

Wishlist

Accelerated Mobile Pages @webbist I’d like to see an article around transitioning skillsets, maybe a UI dev wants to be a backend dev, and vice versa. @philrdg I would love to see an article on the pitfalls of not having a good set of documented requirements. Maybe not sexy but so critical. @brentdanley Making AJAX applications crawlable.

We’re always keen to hear what our readers want to learn more about. This month, we asked our Twitter followers what kind of articles – and tutorials in particular – they would you like to see in net over the coming months. Here’s a selection of their ideas:

Great suggestions, guys! We’ll definitely look into all of them. In the meantime, if you want to read more about Google’s Accelerated Mobile Pages, check out this opinion piece by James Rosewell: netm.ag/amp-274. Keep those ideas coming!

New York outing We may have only just wrapped up Generate London, but preparations are well underway for Generate New York in April

Animade profile Just read the Animade article in net [issue #272]. Regarding After Effects on the web, have a look at github.com/ bodymovin/bodymovin. It’s great for 2D.

Paul Thomas, Bristol, UK

@animade: It turns out our team actually discovered this soon after the interview – and used it for the logos on our new splash page at animade.tv!

tooling stats

After Effects Animade used After Effects plugin bodymovin to create its new splash page. Take a look at animade.tv

december 2015

I’ve just written a new post about my time at Generate: netm.ag/bennett-274. I was heavily influenced by Patty Toland’s amazing talk (netm. ag/tooling-273)!

Alex Bennett, Leeds, UK

net: Thanks, Alex! We’re glad to hear you enjoyed your time at Generate London, and appreciate the thorough write-up of your experience (as well as your designer colleague Eden Bell’s post about her key takeaways: netm.ag/ bell-274). If you want to check out our own event report, flip to pages 22 and 23. For our US readers (or those who fancy a little trip and don’t want to wait until next September for the next Generate), we have just announced the first details for Generate New York on 22 April (see page 115). What’s more, for the first time we’ll also be in San Francisco next year in July. See generateconf. com for further details.

Network THE POLL

What are the worst UX mistakes? * Unexpected actions from buttons 8% You click; nothing happens

Complex features 6% Let’s not get ahead of ourselves

Buggy forms 8% You’re saying that field is wrong but I know it’s right

Too much text 4% No subheadings or summaries? The worst. Forced mobile app download 33% Just to view your mobile site? Next!

Lack of performance 9% Those that neglect how fast the experience loads

Too many steps to sign in 10% What more do you want from me?!

Those ‘next page’ buttons 22% Ads are one thing but this takes the biscuit

*Based on ‘The worst UX mistakes coming from experts’: netm.ag/mistake-274

From our timeline

Which web design myth do you want busted? ’You can’t do creative design on a Windows PC.’ I seem to be regularly told this! ‫@‏‬Octavector ’Template sites are the future.’ They’re actually ruining the internet. Sameness kills joy. @DcDesignHouse To test UX you need a completed, fully operational product. @NanaAcero

Clients requesting a website fits within the fold. There are more screen sizes now than ever. CTA and key info – yes. A full site – No! ‫@‏‬TwiloNet ‘The fold’ doesn’t matter. Yes it does, at least when viewing on a widescreen monitor on a home PC. I don’t like scrolling down to find out what the site is about. @wendycockcroft

Sites should look the same on all browsers. @Jovan990 Waterfall model design processes. These generate poor design and poor value for money to clients, yet many design agencies work this way. @rosschapman That the hamburger icon is a bad design. ‫@‏‬devleakslinks ’Performance can be disregarded during design process. That’s a developer’s problem.‘ ‫@‏‬Spellacy

COOL Stuff We learned This month Drudge Details

There are valuable web design lessons to be learned from the Drudge Report, a news link website that has remained relatively unchanged since it launched in 1997. Although it looks simple, it’s fast, unique, and attracts three million visitors a day. netm.ag/drudge-274 Balancing Apps

Launch screens, the bursts of brand content that play when you load an app, are ignored by a lot of devs. Apple’s guidelines argue they improve the perception of your app, while users counter that they waste time. Thank goodness Free Time has created a clever way you can play by Apple’s rules and keep regular users happy. netm.ag/animation-274 Page Rage

Large pages have made mobile browsing a miserable experience. Publishers are less wary of stuffing in ads due to the combined rise of mobile traffic and social sharing, with many just after a quick click-through. The good news? Facebook is tweaking its News Feed algorithm to make promotion harder – unless you’re willing to pay. netm.ag/mobile-274

december 2015 9

Send your questions to netmag@futurenet.com This month featuring... Clarissa Peterson Clarissa is an independent user experience designer and web developer w: clarissapeterson.com t: @clarissa

Practical advice from industry experts

QUESTION OF THE MONTH

Where do you see ecommerce going in the next five years? Richard Abram, Manchester, UK

Brad Frost Brad is a web designer, speaker, writer and consultant w: bradfrost.com t: @brad_frost

Val Head Designer and consultant Val co-hosts the Motion and Meaning podcast w: valhead.com t: @vlh

Christian Holst Christian is leading ecommerce UX research at Baymard Institute w: baymard.com t: @Baymard

Building communities Hiutdenim.co.uk is an early example of a site being a ‘club’, not just a jeans shop

CH: For large ecommerce sites we’ll see much more ‘intelligence’ built in. Today personalisation is largely limited to cross-sells, retargeting and newsletter content. Personalisation will start to encompass the whole site, with the information displayed and layouts changing based on individual users’ prior behaviour. As machine learning and personalisation evolve, truly ‘predictive sites’ will emerge. Niche sites that focus on guiding users towards a better ownership experience and establishing communities will prevail over those just ‘shipping products’. Style guides

Every site? Do you think every site, no matter how small or large, should have a style guide?

Chris Bell, Derby, UK

BF: Probably. If you treat pattern libraries as big, separate projects they certainly won’t make sense for every simple

december 2015

website. But if you bake pattern libraries into your workflow and make them part of your process, you reap many rewards. I made a simple five-page website in a few days by reusing the first patterns I established early on. And you never know when your small website will take off and need to scale quickly.

Q&As

3 simple steps Ems, rems or pixels?

Margaret Alexander, Amsterdam, NL CP: Pixels are not a good choice for responsive sites. Using either ems, rems or both will give you a lot more flexibility.

Follow along Twitter is great for SVG tips. Follow people like Sarah Drasner, who created this SVG artwork

SVG Animation

Responsive typography

Twitter tips

Sass mixins

Pixels

Who should we follow or keep tabs on in the world of SVG animations?

Is it worth using Sass mixins? What are the advantages and disadvantages?

VH: There are so many smart folks talking about SVG on Twitter! They make it easy for the rest of us to keep tabs on all the latest tips and tricks. To learn all the ins and outs of SVG techniques, follow @SaraSoueidan, @AmeliasBrain and @Real_CSS_Tricks. For kick-ass animated SVG CodePen demos and tutorials follow @sarah_edo and @ChrisGannon. To get all the SVG news straight to your inbox, subscribe to @SVGWeekly (tinyletter.com/svgweekly) or @SVG_news (SVG-news.com).

CP: Sass mixins are really useful if you’re using rems and need to include a pixel fallback for IE8 and older browsers. You can also use Sass maps along with mixins, for example if you’re changing the font-size of several different elements at each breakpoint. Not only will there be less code, but it will be easier to see all your font sizes at a glance. You can also specify properties like line-height in the same manner.

Pixels are a fixed unit, so they are inherently not flexible. Not all devices display pixels the same way, so some may show text smaller or larger than you are expecting.

Gray Ghost, Buffalo, NY

Savannah Ashby, Queensland, AU

Style guides

Out of sync ecommerce

Enterprise platforms What’s the best ecommerce enterprise platform at the moment?

James Spencer, Gloucester, UK

CH: At Baymard, we’ve benchmarked the UX performance of the top 50 US ecommerce sites closely over the past five years, and we find it’s seldom the platform itself, but rather the extension, customisation or redevelopment of the site that determines the overall experience. Two sites using the same underlying platform can rank top and bottom in our benchmarks. Instead, match the platform with your developer team’s capabilities to ensure all required customisations are feasible.

A huge problem with pattern libraries is that they get out of sync with the live code, especially the HTML. How do you combat this? Sharing HTML between a pattern library and live code seems to be immensely difficult.

Rems

With rems, everything is proportional to the base font-size of the page. If your paragraph text is 1rem, you can make your h1 twice as big by sizing it at 2rem.

Jack Appleby, Brighton, UK

BF: Make a change to a pattern, and – boom – every instance of that pattern in production is auto-magically updated. As you mentioned this is really hard to achieve. The best way to get close to this Holy Grail is to have the pattern library and CMS share the same templating language. The pattern library should be the focal point of your workflow: make changes there first, then use tools like Grunt to help move

Ems

Ems work in a similar way to rems, but each element’s font-size is relative to the containing element’s fontsize . This allows you to change the fontsize of an entire element, like a div , with one CSS declaration.

december 2015 11

exchange Q&As CSS, JavaScript and HTML patterns into the production environment. SVG Animation

SMIL vs GSAP In terms of performance, how does the SVG <animate> element compare to Velocity.js/the GreenSock library?

Alan Sutherland, Bristol, UK

VH: The question of what to use when animating SVG tends to become a question of both browser support and performance. SMIL (the <animate> element) may technically be the most performant, but it is not supported by IE, and is being deprecated in Chrome, which makes it a less attractive option moving forward. Between those two JavaScript options, GreenSock will get you the best performance for animating SVG. It’s optimised to handle SVG elements and offers robust timeline controls. Style guides

Guide rot What strategies do you recommend to avoid style guide rot once everything’s live and in maintenance mode?

David Moulton, Cambridge, UK

BF: In addition to trying to achieve the Holy Grail (see ‘Out of sync’ answer), there are many things that can be done to keep a pattern library effective. Make it a key part of your workflow rather than just a passive artefact. Make it a resource all disciplines can benefit from, not just designers and developers. Make patterns agnostic to allow for maximum reuse. Make it contextual to demonstrate how and where patterns should be used. Make it beautiful and approachable. Make it easy to find, and make it public if at all possible.

SVG Circus This tool can be used to create looped animations quickly and easily

december 2015

Container queries These will enable users to set components’ breakpoints based on their parent container

ecommerce

Responsive typography

Small businesses

Keeping track

Should small businesses keep investing in running ecommerce stores?

What’s the best way to manage and keep track of font sizes?

CH: If the small business is developing its own products, then no. Focus all resources on developing new products and services, and simply utilise existing ecommerce platforms. If the business is a retailer, then yes – there’s no way around it. But don’t play the same game as the top sites, instead focus on where you can beat them, focusing on the experience beyond just selling the product. See the ‘Question of the Month’ answer on the future of ecommerce sites.

CP: I like to keep all my font style rules together in one section of the style sheet, so it’s easier to see what’s going on with the fonts. Use media queries to change font sizes at the viewport widths that make sense for keeping the text easy to read. It’s okay if those aren’t the same breakpoints you’re using for layout changes. Also, font sizing can be much simpler if you take advantage of CSS inheritance and only apply font-size where needed, not on every element.

SVG Animation

Style guides

Easier animating

Grids and sub-grids

Are there any tools that make animating easier, rather than coding by hand?

What effect will CSS grids and sub-grids have on style sheets in the future?

VH: We’re still waiting for that one perfect SVG animation authoring tool, but in the meantime there are a few options to try out. SVG Circus (svgcircus. com) is great for creating animated spinners and other looped animations quickly. Animatron (animatron.com) is a browser-based timeline animation tool that offers the option to output SVG SMIL animations. Edge Animate and Tumult Hype both let you import existing SVGs to animate, though neither exports out SVG animations at this time.

BF: The ability to create a grid, drop components into it, and have everything just work is tremendously exciting. The CSS Grid module is still being developed (so far as I know), but the end goal also requires element/container queries. Currently, we can only use the viewport to determine components’ breakpoints, but it would be fantastic if we could use components’ parent containers to dictate how they will display. Then we could create patterns in the abstract and drop them in anywhere!

Refresh Ideas, New Delhi, IN

Joe Leech, Bristol, UK

Daniel Weaver, West Virginia, US

Nigel Clutterbuck, London, UK

63% GIVE A GIFT THAT LASTS ALL YEAR

TREAT YOURSELF A magazine subscription is a perfect OR SOMEONE ELSE Christmas gift… SUBSCRIBE TODAY  Choose from a huge range of titles FROM JUST

 Save up to 63% off the cover price  Subscribe from just £44

 Free personalised gift card when buying for someone else  Guaranteed delivery in time for Christmas!  PLUS a range of stocking fillers from just £5

2 EASY WAYS TO ORDER Visit myfavouritemagazines.co.uk/Z604 Or call us on 0844 848 2852 Lines are open Monday to Friday 8am to 7pm and Saturday 10am to 2pm (GMT). Please quote Z604 when ordering by phone. Savings compared to buying 13 full priced issues from UK newsstand. This offer is for new UK print subscribers (paying by Direct Debit) only. You will receive 13 issues in a year. Full details of the Direct Debit guarantee are available upon request. If you are dissatisﬁed in any way you can write to us to cancel your subscription at any time and we will refund you for all unmailed issues. Prices correct at point of print and subject to change. For full terms and conditions please visit: myfavm.ag/magterms. Offer ends: 31st January 2016.

People, projects & paraphernalia

This month Featuring...

Side PROJECT OF THE MONTH 16

For Daily UI Elements, Paul Flavius Nechita challenged himself to create 100 different user interface elements

Beyond Pixels

Once a year, Dan Goodwin gets behind the technical desk to help present a family-run theatre arts school’s annual show

Clients FROM HELL

Need list

A freelance illustrator works with a client that doesn’t understand the difference between 2D and 3D design

The small objects of web wonder we want this month, including a mini Star Wars droid and a handy business management app

Workspace

Event REPORTs

Andre Harris shows us round COBE’s Munich workspace and explains what keeps the digital creatives scoring design goals

The net team reports on the takeaways from Generate London, and the triumphant winners at the 16th annual net awards

december 2015 15

FEED

Side project

Daily UI Elements

Paul Flavius Nechita challenged himself to create a new UI element every day, for 100 days Side project of the month

Info job: UI/UX designer w: dribbble.com/ NpaulFlavius t: @npaulflavius

net: What did you enjoy most about working on Daily UI Elements (100daysui.com)? PFN: I liked the fact that I felt I was improving my skills, and I’ve enjoyed the attention the project’s been getting, because it’s helped spread the word about the challenge. I think this is the best way for a young designer to improve their skills. You can read as many tutorials as you like, but sometimes it’s just better to sit down and start doing. net: Where did you get the idea from? PFN: There are many similar challenges, but my inspiration came from Casey Neistat, a film directorturned-vlogger who is creating some of the most amazing daily vlogs I’ve seen. I love his commitment and the quality of work he does, and that inspired me to better myself. I needed something new in my life when I started the challenge, and this is that something.

december 2015

net: Did you encounter any challenges of your own in the process? PFN: Committing to designing something every day can prove difficult. Most days I had everything planned out and a schedule to follow, but as the challenge ran through the middle of summer, there were some days when I woke up at 4am to get the shot done before getting ready for a four- or five-hour drive. Ideas don’t always come easy, and I have everyone around me to thank for helping with that. net: Did you learn any new skills while working on the challenge? PFN: I learned not to over-think. I always followed my instinct with the shots and accepted that simple is always better. net: Has the project helped you be more creative? PFN: Of course. I feel like my work is getting better and that this is a major point for me as a designer. net: Finally, what inspires you the most? PFN: My favourite sites are Dribbble, Behance, Designspiration and Creative Market. I also go on long walks and road trips. To be honest they rarely inspire me, but they do help me relax, and this plays a big part in the process of inspiration.

Feed

How to

MEASURE SITE PERFORMANCE Ensuring your sites are speedy is integral to keeping users happy, and new ones flowing in. We asked our Twitter followers how they keep tabs on performance

GOOGLE IT

Quick Turnaround

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

Illustration: Ben the Illustrator bentheillustrator.prosite.com

Clients from hell I’m a freelance illustrator and recently worked with a particularly challenging client. She first got in touch to ask me to illustrate a book cover. It was to depict a group of students going from their university to their primary healthcare unit. The timeline was short – just three days – but I thought I could squeeze it in. Aware that the turnaround was tight, I created a detailed sketch of how the final illustration would look, and sent it over to the client. They approved it, and I worked my ass off to have it done in time. I sent the final design over to the client. Then this happened: Client: They have their backs against the viewer. Me: Yes. That’s what you requested. Client: But I don’t like it. It feels aggressive towards the viewer. Me: Then why did you approve the sketch? Client: I didn’t think it would look like this. Me: Well, it looked exactly like this. Client: You have to change it. I’ve been working with images for years, it doesn’t look good.

Me: I work with images too, which is why I’m an illustrator and you hired me. I explained that because the illustration had been done exactly as requested and approved, any major changes at that point would cost extra time and money. Client: Oh, I don’t need big changes. Can’t you just turn them around? Me: That would require me to re-draw all the people in the illustration. It’s a pretty big change. Client: No, you don’t have to re-draw them. Just turn them. Me: … Client: They have their backs against the viewer, so just turn them so they’re in profile or something. Me: You do realise this is a two-dimensional illustration and not actual people that can rotate, right?

clientsfromhell.net

Google PageSpeed tools are by far the most popular among our followers. Both @Takaya213 and @_fbrz recommend it as a plugin, along with Chrome DevTools and Pingdom. “Test your website through Google PageSpeed. Minify files, optimise images, get fast ‪servers, make it‪mobile-friendly. Done,” asserts @AshterzSoft. “I also use a Chrome extension called Perfmap, which highlights <div>s in a webpage based on how quickly/slowly they load. Very handy!” adds @_achalv.

REGULAR UPDATES Certain tools provide updates that are sent to you directly, so you don’t have to keep checking (and won’t forget to keep an eye on performance). “I use DareBoost with automated weekly reports,” reveals @nhoizey. @DamienJubeau agrees DareBoost is a good shout.

CUSTOMER FEEDBACK Tools aren’t everything, however. “While getting perfect scores in testing tools is nice, it’s always good to see how things load in the real world,” emphasises @forbairt. “I ask the opinion of my average user, quick and simple,” says @chriskonings.

december 2015 17

Andre Harris reveals how the COBE designers get their kicks and smash goals from their three-storey playing field workSPACE COBE is a full-service UX design agency located in the heart of Munich. Our three-floor office space was designed by Peter Fink, an awesome designer and funnily enough, our neighbour too! The basement is pretty much our kicker stadium. I think Brits would refer to this as table football, but that’s neither here nor there. The ground floor is where we hustle! Full of iMacs, lamps, wireframe sketches and drinks laced in caffeine, this is truly where the magic happens. The first thing people usually notice is the number of football shirts in the office. Football plays an integral part in life at COBE:

december 2015

we watch games together and compete in fantasy football leagues via Kickbase, an app we created and still run. Whilst they are all pretty cool, the Bayern Munich shirt (1) holds a special place in our hearts. They are our local team and provide us with so much to scream and shout about. Another thing you’ll notice in our office is that everybody is wearing headphones (2). This is not because we don’t like each other; on the contrary – in an industry such as ours, unlocking your creativity is achieved in many ways. One of our CEOs likes to listen to classical music while he works. On the other hand, UX designer Joshi loves hip-

hop. Without our headphones, this finely tuned ecosystem could truly crumble. Respect the headphones. On the first floor of our office we have three separate rooms. Firstly our meeting room, which is often used to meet up with clients or discuss how COBE plans on taking over the world of design. Then there’s the glass room, which is used for brainstorming. This workshop is steeped in creative history. Finally, there’s the lounge. This room really says a lot about who we are and where we’ve come from. At this point, it’s home to our beloved sofa, computer games system (3) and our COBE logo (4). This used to be our original office space, but now after a few short years and a couple of new additions to the team, we’ve had to expand! PROFILE

Kicking off

Andre is a Londoner living and working in Munich. He is head of online marketing and PR at COBE (cobeisfresh.com)

FEED

Beyond pixels

Stuff I like

K im K nup

Software tester punkmiktests.wordpress.com

Songkick This app lets you track all your favourite artists through a nifty Spotify scan, then notifies you when they have gigs planned at a venue near you. It works well, looks great and you can even buy tickets through it. netm.ag/songkick-274

Feedly Since Google killed off Google Reader, I organise my blogs using feedly. I have them categorised for easy topic-related reading. I can read about the latest trends in technology and software testing on the way to work, and then end the day reading about my hobbies such as sewing and photography. feedly.com

december 2015

technical theatre

This month … once a year, Dan Goodwin immerses himself in the mysterious world of the theatre beyond pixels My mum started a dance school in my hometown of Winchester 35-odd years ago. That dance school is now a theatre arts school, teaching dancing, singing and drama. It’s largely run by my sister, who wasn’t even born when it started. Every year the school puts on a show. Back in the day that was in the local village hall, but now it’s in professional theatres. For about as long as I can remember, I’ve helped out with technical stuff on the show. Originally that involved cowering over an analogue dimmer rack, operating a very basic set of lights whilst my Dad wrestled with the sound rig (actually a bunch of domestic hi-fi kits). More recently I’ve been part of a large team made up mostly of amateur volunteers, under the supervision of a small number of professionals. Over the course of a week we ‘get in’ a sizeable touring lighting rig and stage set, rehearse, perform and ‘get out’ again at the end. I’ve operated sound, mixing up to eight lowcost radio mics, whose unreliability has often added an extra element of unwanted drama behind the sound desk. I’ve also been thrilled to operate a follow spot. This is pretty much the lowest of the low in the ‘LX’ (electrical, lighting) team, but it’s a job I’ve longed to do since I was a kid watching professional panto and the Royal Variety Performance on TV.

What keeps me going back year after year, taking the February half-term week (when my wife would much rather we were snowboarding in the Alps) off real work to work for nothing? As well as being a family heritage thing, it’s totally different to my day job; I get to immerse myself in the world of the theatre with its obscure language and terminology, customs, traditions and even superstitions. I love rigging and operating technical equipment of any kind, and most of all it’s huge fun. Working as a team on the largely physical job of rigging for a show, the switch of pace to rehearsal, then performance, then the massive effort to clear it all out again at the end (over the space of a few hours on the Sunday night, much quicker than the get in) leaves me buzzing, refreshed, inspired and dreaming of switching careers. I’m unlikely to ever do that – the poor pay and unsociable working hours would mean my family would be broke and pretty much never see me – but I’ll still be looking forward to that week every year. Dan (@bouncingdan) is the user experience director at fffunction (fffunction.co) and loves bringing users into the design of anything and everything

Photo: Al Power

This is my go-to site for everything software testingrelated. It has resources about tons of types of testing, a blog feed, details about events and workshops, an online learning platform called The Dojo and a forum for discussions. ministryoftesting.com

PROFILE

Ministry of Testing

Need list

Stuff we want Small objects of web design wonder: from a clever Star Wars droid to a handy business management app 1

BB-8 app

£129.99

Practical responsive images

CSS Master

£3.00

High performance Android apps

Free

PocketSuite

$44.99

Free

Vectr

Free

What we think (1) This scaled-down version of Star Wars’ BB-8 is a droid with intelligence you can control from your smartphone (netm.ag/BB8-274). (2) Brush up on the value of images and explore the latest tools available for a responsive approach with this ebook (netm.ag/responsiveimages-274). (3) This comprehensive guide takes you through the performance issues facing Android apps and how you can diagnose them (netm. ag/apps-274). (4) Get a firm understanding of CSS concepts that you can apply across different screen sizes with this free book (netm.ag/css-274). (5) The latest version of PocketSuite is an easy way to sync information and run a better business from an app (netm.ag/pocketsuite-274). (6) Design websites, apps, logos and more without touching any code by downloading this free app for web and desktop (vectr.com).

december 2015 21

FEED

Events

Generate London

Smart objects, SVG and stressful scenarios: Ruth Hamilton reports from net’s London conference Event report Date: 17-18 September 2015 Location: London, UK URL: generateconf.com

PROFILE

Bright and early on the morning of the 17 September, the first web designers and developers entered London’s Grand Connaught Rooms for net’s very own Generate conference. With outings in London and New York (and soon San Francisco, too), Generate offers a mix of practical, inspirational and workflow-based talks from the brightest minds in the web industry. Practical tips came thick and fast from Rachel Andrew and Sara Soueidan. The former provided a fast-paced guide to CSS Grid Layout,

Ruth (@ruthehamilton) is net’s production editor. She has a borderline-unhealthy interest in grammar and no sense of direction

january 2014

urging listeners to explore the module and suggest modifications while it’s still in development. The latter, in her first-ever UK talk, roused the audience with her infectious enthusiasm for SVG. Equally passionate was ‘iconist’ Michael Flarup, whose presentation was punctuated with some memorable 80s visuals. He offered some rules to ensure your icon doesn’t disappear in the App Store: concentrate on a single object, make sure your design scales well and whatever you do, don’t use words. Huge’s Josh Payton’s talk considered the rise of the digital polymath. He pointed out that although we may recoil at the word ‘generalist’, some of history’s greatest game-changers dabbled in a number of different vocations, from Da Vinci to Michelangelo. Dan Goodwin looked at the subject in a more practical way, focusing on the increasing demand for designers to create smart products. He urged listeners to “slow down”, reminding

them that users expect physical products a long time, and problems are not so easily solved when you can’t simply push a fix out. A theme that cropped up repeatedly was that of designing for a worst-case scenario. Eric Meyer’s heartfelt talk followed a personal crisis in which a poorly designed site worsened the situation. He encouraged designers to come up with crisis-driven personas and contexts, and emphasised that these were not “edgecases” which could be pushed to one side, but simply “stress-cases”. Sarah Richards explored the theme through the lens of content strategy, revealing that in a panicked situation, your users’ vocabulary shrinks right down. She highlighted the need for the writers to speak the same language as their audience, as well as being brutal with the amount of content of their site. Jon Setzen asked people to “think about when your audience is having their lowest experience with your brand, and how you can improve that.” However, he cautioned against getting too bogged down in function: “Design can be too precious, but it can also be too dull. When there are 15 versions of everything, it’s the beautiful products that will rise to the top.” Photos of Generate London can be found at netm.ag/photos-274, and videos of all the talks will be on Creative Bloq’s YouTube channel soon (netm.ag/CByoutube-274).

Feed

EVENT GUIDE FUTURE OF WEB DESIGN Date: 2-4 Nov 2015 Location: New York, US The 9th annual Future of Web Design NYC conference offers a healthy blend of inspirational sessions and practical advice. This year’s speakers include Tobias van Schneider, Pamela Pavliscak and Jen Simmons. futureofwebdesign.com/nyc-2015

FORM AND FUNCTION Date: 14 Nov 2015 Location: Metro Manila, PH Form and Function Class 6 is a pioneering web design event in Asia created by volunteer designers and dedicated to the local community. Join their battle against evil design, with talks from Rachel Nabors, Angela Obias and Brad Frost. formfunctionclass.com

MOBILE UX DAY Date: 20 Nov 2015 Location: London, UK This one-day conference is for those interested in developing their mobile UX skills. Thought-provoking talks come from Diana Mundo, Jiri Jerabek and Daniel Fozzati, and hands-on workshops will take place throughout the day. mobileuxlondon.com

DOTCSS DATE: 4 Dec 2015 LOCATION: Paris, FR Pitched as the largest CSS conference in Europe, dotCSS explores both technical and design matters. This year, key speakers include Chris Eppstein, Una Kravets and Andrey Sitnik. Sister conference dotJS will follow on 7 Dec. 2015.dotcss.io

december 2015 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

£44

based on an annual subscription

save up to

digital edition only

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

From

£45

based on an annual subscription

save up to

Terms & conditions: Prices and savings quoted are compared to buying full-priced UK print and digital issues. You will receive 13 issues in a year. If you are dissatisfied in any way you can call us to cancel your subscription at any time and we will refund you for all un-mailed issues. Full details of the direct debit guarantee are available upon request. Prices correct at point of print and subject to change. For full terms and conditions please visit: myfavm.ag/magterms. Offer ends 15/12/2015

Not in the UK?

Turn to page 51

Print & digital edition

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

great reasons to subscribe ●

Print edition delivered to your door

●

13 issues in a one-year subscription

●

iPad and iPhone edition download

●

Android edition download

●

Money-back guarantee

From

£53

save up to

myfavouritemagazines.co.uk/NETMAG15

Awards 2015

The ceremony took place at the lavish Grand Connaught rooms in London

We report on the 16th annual net awards - celebrating the brightest and best in web design and development The 2015 net awards took place on 18 September, just after our Generate conference, at London’s Grand Connaught Rooms. 200 guests from around the world came together to celebrate the very best in web design and development. The event was compered by comic Roisin Conaty (best known from Channel 4’s Man Down), who had the audience wrapped round her little finger in no time. As the all-important gongs were handed out, it became clear that the net awards are like no other. Not only was the shortlist geographically very diverse, with nominees as far-flung as Turkey, China and Lebanon, but this year’s winners were dominated by women. It was a refreshing reminder that talent in the industry comes from all corners. Sara Soueidan took home the gong for Developer of the Year (netm.ag/sara-274), Alice Lee won Young Designer, and Julia Wallin beat off tough competition to pick up Young Developer of the Year (which prompted Roisin to blurt out that at Julia’s age, she couldn’t even cook a chicken). The evening concluded with Patty Toland, partner at Filament Group, accepting the trophy for Agency of the Year, before valiant winners and stoic almost-winners made their way next door for the after party.

For more information, visit thenetawards.com

december 2015

The BBC News team’s trophy was picked up by a merry Tom Maslen and John Cleveley

Stand-up comic Roisin Conaty compered the evening, and had the audience in stitches

Our partners

JP74’s Jake Smith was in the mood for a party

Awards 2015

the winners Technology Awards Open Source Project of the Year

Atom

Best New Web Technology

Responsive Images

Game Changer of the Year

Slack

App of the Year

Sketch

The glam Sway bar provided late-night refreshments at the official after party

Community Awards Conference Talk of the Year

Darius Kazemi: Tiny Subversions Grassroots Event of the Year

Ladies that UX

Podcast of the Year

The Web Ahead

Project Awards

Best Collaborative Project

Responsive Images Community Group Redesign of the Year

theguardian.com

Side Project of the Year

Species in Pieces

Best Online Portfolio

Bethany Heck

Individual Awards

Emerging Talent of the Year

Tiffany Rayside

Young Designer of the Year Bohemian Coding’s Emanuel Sá got the gong for Sketch

GitHub’s Amy Whitney took home the trophy for text editor Atom

Alice Lee

Young Developer of the Year

Julia Wallin

Brewbot cooked up a special IPA for the proud winners

Designer of the Year

Tobias van Schneider Developer of the Year

Sara Soueidan

Outstanding Contribution

Molly Holzschlag

Team Awards Team of the Year

BBC Responsive News Team New Agency of the Year Yoav Weiss took home two trophies for Responsive Images

Anton & Irene

Agency of the Year

Filament Group

Do you know the owner of this magnificent beard?

december 2015 27

Opinions, thoughts & advice

Process

‘Fast food’ design

David Wieland considers the trend for cheap, heavily templated website options, and why they do more harm than good

Q&A 33

Julia Wallin – net’s newly crowned Young Developer of the Year – explains how she found her way in the world of the web

INTERVIEW 34

Stephen Hay shares his enthusiam for contentfirst design, and argues that Material Design isn’t all it’s cracked up to be

Responsive Reorganisation Kevin M Hoffman explores how organisations are throwing out the traditional structures in favour of something more flexible Responsive web design has not only changed how we design sites, it’s also changed the way design teams work together. Companies are evolving to support what good responsive design efforts need: small cross-disciplinary teams, more iterative conversations, and smaller loops into production to test ideas. I believe these changes mirror a larger trend in business: a move towards more organic ways of structuring people and processes. This is happening because responsive design is as much about designing for multiple contexts as it is about multiple screen sizes.

Pyr amid structure Organisations are historically structured in a pyramid shape. There’s leadership at the top, then discipline managers (such as vice presidents of marketing, CTOs and

Opinion

Photography: Michelle Gray

Case Study Here’s an example from a company that should warm any geek’s heart: Nintendo. The site play.nintendo.com uses character stories, game tips and quizzes to create a seemingly never-ending path of content. It also uses responsive design in an interesting way. On a smaller screen, it narrows the focus onto individual characters, and creates a sequence of stories and tips around those characters. On a larger screen, however, it emphasises content types over characters, and surfaces more choices per screen. This design choice isn’t just based on the availability of more pixels. This is a deliberate attempt to adjust context. Zeroing in on a long trail of character traits on smaller screens creates a more linear, addictive flow. This mobile flow caters for its particular context – restless kids at a restaurant table, for example. On desktop, they might learn ‘how do I beat that level’, but on smaller screens they fall into a loop of ‘tell me everything there is to know about one thing’.

One way of making things more flexible is to organically mix expertise within small teams, organised around goals as opposed to disciplines Changing a design to suit what is going on in someone’s life is a key strategic benefit of responsive design. We can use our knowledge about device capabilities and a visitor’s context of use to create appropriate benefits that go beyond just progressive enhancement.

Team Evolution The Nintendo website includes intellectual property, game content and key messages. The content has to be coordinated between product teams, marketing oversight, legal experts (because kids), and game designers. Not to mention all the staff tasked with working on the site itself. To do this efficiently, smaller, more iterative conversations have to take place between these departments. This is a great

example of the ‘responsive reorganisation’ I’m talking about – a situation where responsive design can be the impetus for better ways of building together. This evolution of how organisations structure themselves is not unique to the web design industry, and has been well documented in business research (see this article by John P Kotter for starters: hbr.org/2012/11/accelerate). You may find something that will help your organisation approach responsive design collaboration in a whole new way. Read the extended version: netm.ag/RWD-274

PROFILE

so on), followed by the various teams they oversee. This approach has been around since the industrial revolution. It allows manufacturers to scale and produce greater numbers of a product without sacrificing on quality. You already know this process; you probably call it ‘waterfall’. Responsive design requires us to design different things at the same time. We may be designing two or three experiences within the same code base, changing the hierarchy of content and functionality based on screen size and device capability. This requires a team to be flexible. One way of doing this is to organically mix expertise within small teams, organised around goals as opposed to disciplines. When it works well, it offers the right expertise and accountability, and facilitates rapid collaboration. Smaller, mixed teams can more easily reach out for dependencies such as content, approval or domain expertise. Because a responsive experience has the potential to reach audiences across different contexts, it changes how organisations collaborate. Responsible parties need to be more informed.

Kevin (kevinmhoffman.com) is the author of the forthcoming book Meeting Design, and founder of Seven Heads Design

december 2015 29

VOICES Essay

december 2015

Essay

Culture

‘Fast food’ design Illustration by Ben Mounsey

David Wieland on why taking the shortcut when creating your website is bad for your company’s health

Interactive design is a complex and poorly understood industry – after all, it is only decades old. What to an outsider seems a simple, albeit technical process (‘make a website’), is actually a complex combination of dozens of disciplines intertwining over an entire spectrum. Countless of factors influence this process: project owners coming in with varying levels of knowledge, business strategies determining the achievable goals, the analysis of client behaviour, and so on. A good web design should take weeks of preparation before a single pixel is drawn on the screen. And by ‘good’ I mean ‘effective’: one that helps the project owner (ipso facto the client) do their business better.

Fast food recipe Something rather unsettling is happening. For a while now I have been having a hard time telling websites apart. It happens with sites I come across via producthunt. com, or every so often a recommendation over Twitter. I get this uncanny feeling I’ve seen it all before. Imagine this: a simple white tagline set in geometric white letters, superimposed over a stunning full-screen photo of the sun setting over a lush mountain range mirrored in a lake. A one-syllable word set in white bold letters in the top left corner, and a coy ‘Sign up’ in a hairline pill-shaped button in the top right. You’ve never seen this website before, because I just made it up. But you recognised it. And that’s precisely

the problem. Are designers getting lazy, or have we reached design singularity? Why are things beginning to look the same?

Design Singularity The internet as we know it has now been around for about 20 years. Web design has grown out of the experimental period, much like a college student who has left behind their adolescent punk-goth phase. Now that the internet is accessible by all, it has become an absolute first priority for any self-respecting business, product, hobbyist, cat-owner or startup to own a website. It’s like the 1896 Klondike Gold Rush: everyone can have a website! Similar to the event in Klondike, when the web became open to all, businesses opened up to service those looking for help. Content management systems such as WordPress run on templates without too much hassle, and so the template industry was kickstarted. Promises of luscious colour schemes, modern typography and flexible navigation solutions available after a one-click installation lured in the uneducated business owners. Only after the transaction (and nights of frustrated fiddling) did the realisation kick in that their site would never look as good as advertised. Incidentally, around this same time, web service startups billowed out of the wet soil like mushrooms, and they had a very special reason to cultivate their online presence: to gain traction, so to improve chances

december 2015 31

VOICES Essay of earning explosive revenue and/or a multimilliondollar buyout. The best way of doing that was to garner masses of users, and that meant calibrating the website to make the discovery and onboarding process as painless as possible.

A homogenous soup All this resulted in the recipe I described earlier: compelling full-screen key visual, brutally simple payoff, and a clear sign-up call to action. Airbnb became amazingly successful with it; it worked for Path, Snapchat and Square. And nowadays, we’re seeing that strategy everywhere. Clients often request a similar look and feel, hoping this look will rub off its successes. A quick glance on Producthunt.com and land-book.com confirms exactly this: it’s a homogenous soup of noncommittal texts set in geometric fonts over large images with a button underneath. Just try this: check out five random sites, and afterwards try to remember which one was which.

The design process The design process makes or breaks any site design. It always begins with understanding, or exploration. No matter how designers refer to this step: it’s plain old desk research. We Google your business, we analyse your competitors, trying to understand the forces in your market and what makes your desired customers tick. A designer will ask you a lot of questions, some of which may make you uncomfortable because you have no idea how to answer them. That’s good: we all need to reflect on our business every so often. A redesign is often a strategic wake-up call. To paraphrase Mike Monteiro, what begins with a web design often ends in a restructuring of the company. Only after having true understanding of the context of your business is it appropriate to roll out a design strategy: These are the people you’re targeting. That is how you’ll be selling your product. And this is the set of achievable goals by which we’ll measure whether your site is on the right track.

There is a reason Squarespace is so affordable: it does none of the legwork for you. It won’t care about your business model, or what your visitors are like. All it does is give you the tools to place your content in passable website interfaces

Nurturing properties This brings me to the core of the problem: digital design yields passable results remarkably quickly, as long as you know how to mix the fast food ingredients. But much like fast food, this kind of design is disastrous to the health of your business. Rather than imbuing your company with any nurturing properties, it simply satiates your immediate craving to have a professionallooking website. A professional website for a payment provider shouldn’t just look the part: it knows who you are, that you were coming, and has set the table for you. It answers your deepest concerns, holds you by the hand and shows you how to continue on after you’ve made your decision. There is a very good reason Squarespace is so affordable: it does none of the legwork for you. It won’t care about your business model, or what your visitors are like. All it does is give you the tools to place your content in passable website interfaces.

december 2015

And after that, we can finally worry about the design you can see: the web design structure, colour schemes, typefaces and so on. If after all this your designer is convinced that the fast food recipe is still a valid outcome, then good for you: at least you’ve done your research to back it up, and hung up some stringent goals to ensure you’re all working towards the same outcome. There’s nothing harmful about following trends: they’re the zeitgeist of our industry, and will come and go. Trends like this are everywhere; in editorial design, architecture and fashion. The difference between those industries and our interactive design industry is the overabundant availability of resources and tools accessible for non-designers, with their singular intent of making things appear passable or professional when they really aren’t. Similar to a Mona Lisa colourby-numbers: you can recreate what the masterpiece looked like, but it’ll display none of the brilliance or insight of the master.

PROFILE

In the words of Emmet Connolly, the director of product design at Intercom, “It’s a world where your credit card provider and sock subscription service look like exactly the same company” (netm.ag/flat-274). It’s almost as if everything’s done as an after-thought.

David is the design lead at Grayscale (grayscale.com.hk). Together, team Grayscale transform the web landscape in Hong Kong one client at a time

Q&A

winner question decisions made by developers that I see as more experienced than myself. net: How did you get involved with Hello Monday? JW: I applied for an internship there in 2013, as part of my education at Hyper Island. My approach was very straightforward, and I remember my portfolio at the time was only one page with three projects that I was proud of, and thought represented me both as a developer and a person. Even though the code on that page was not very impressive, the expression in my portfolio and the projects I’d chosen apparently stood out for them.

Q&A

Julia Wallin net’s Young Developer of the Year on how to forge your own career path Info Job: Freelance developer w: juliawallin.se t: @juliawallin

net: How did you first get into web development? JW: The internet was a great fascination to me as a kid, where I could live out my obsessions with everything from Harry Potter to horses. I used to spend most of my time on online communities where you could style your profile with simple HTML and CSS. After a while I realised I could create websites with the same code, and that’s when I started my career as a developer. net: How did you feel winning net’s Young Developer of the Year? JW: I was very surprised! I did not expect to win at all, especially after checking out my competition and seeing what a talented and strong group of developers I was up against. net: Do you feel your age has helped or hindered you in your work? JW: I think the fact I’m sometimes seen as ‘young’ and often work with people older than me has both good and bad sides. The good is that it makes me humble, realising that I still have a lot to learn, and eager to do new things and experiment with different ways of working. The bad might be that it sometimes makes me unconfident in my own work, and not

net: What advice would you give to others wanting to get into the industry? JW: It’s taken me a while to understand that in the development world there are a thousand ways of doing things, even if most developers make it sound like there is only one. I think it’s really important to be humble, open to new ways of doing things, and not be afraid to experiment and make mistakes. Listen to other developers, learn from them, but also don’t be afraid to do your own thing. net: You’ve also just joined Appsters – can you tell us how that came about? JW: Appsters is a small agency based in Stockholm, and I was first approached by one of them about a year ago in New York. I was attracted to the idea of working with only developers, and being at a very small agency where you have to take on things that are outside of your comfort zone. I will continue doing frontend development for various clients and projects at Appsters, and I will also start to approach things that are pretty new to me, such as app development, more backend-heavy projects and even design. net: Has that posed any particular challenges? JW: I’ve had to learn some new frameworks and code languages they use a lot. That was challenging at first, but also really rewarding. net: Can you tell us about some of your favourite projects you’ve worked on this year? JW: I’ve been working on a really crazy music site for friend and musician Grey Gersten (also known as Eternal Lips) that will launch mid-October. As a kick-off project at Appsters, I got to create the new Appsters site, Appsters.se. net: What are your long-term career goals? JW: The phrase ‘long-term career’ scares me a bit because I think it sounds stagnated. I want to keep doing new things that interest and excite me!

december 2015 33

Stephen Hay Words by Tanya Combrinck Photography by Henk Bleeker

The web strategist and art director explains why he’s still brimming with enthusiasm for his work after two decades of designing for the web

december 2015

Interview

Info job: Web strategist w: the-haystack.com t: @stephenhay

december 2015 35

Voices Interview Like so many working on the web today, when we ask Stephen Hay what his job is he just laughs, because it’s so difficult to define. Encompassing various elements of design and consulting, it’s one of those roles that can’t be explained in a single title, or even a sentence. Hay was born in the US, but has lived in the Netherlands since the 90s. It was there he founded a company that became wellknown in the early 2000s for accomplishing the then-difficult task of producing websites that were both accessible and beautiful. In 2010 he struck out as an independent consultant, and he now works on responsive and multi-platform projects in a variety of roles, including art direction. “I would say there’s very little art direction on the web ... and I think we need more of it,” Hay begins. “What I mean by art direction is that you’ve taken the big values and goals of a client’s website or product, and translated them into moods and metaphors that associate with those goals. Then you’ve come up with an overarching creative concept on which to hang every design decision. Every decision is tested against that theme, and if it doesn’t fit you have to throw it away.” For example, Hay suggests, if you were selling toothpaste, you might focus on the idea of a good smile and use that as a general theme for your campaign. “It’s about the feeling you want to get across. That determines which typeface you choose, how much white space you use, even how a user will interact with the website.”

An apple a day For Hay, Apple stands out for having employed an extreme form of art direction to create the suggestion of a lifestyle around its products. The user becomes something more than a normal person. “Remember the Think Different campaign?” he asks. “You’re now like Pablo Picasso, because he ‘thought different’, and when you use this product you’re thinking different as well. We’re like these people who have thought differently from anyone else, and have therefore branded their own space in history. Apple and you, the user, are taking part in that. That’s a pretty lofty and almost nauseating thing.” Nauseating advertising campaigns aside, Hay has other issues with Apple’s approach

july 2015

Interview

nowadays. “I think the best OS Apple did was around the System 7 [introduced in 1991]. I really loved their old operating system UI thinking, but recently I think Apple has been going in this direction of simple-looking as opposed to actually simple to use.” He refers to the “faux-minimalist” approach, in which designers simply reduce the number of elements on display to make things look straightforward. “It’s always disappointing when it’s not actually that simple. If they’d made it slightly more complex, how it looked and how easy it was to use would be more in line.”

Tool religion

Hay thinks we need to simplify our workflows and only add tools when absolutely necessary. “You have to control the tools; they shouldn’t control how you work.”

Web beginnings Of course, Hay is experiencing today’s bloated workflows and strong adherence to tried-and-tested formulae through eyes of someone who was there at the web’s beginnings (“I’m kind of old,” he shrugs). As a teenager he loved typography and drawing graffiti, which led him to study graphic design at university. When the web came along it reignited his childhood interest in computers. “It was 1995. As soon as I started playing around with it I thought ‘this is a huge thing’ and it didn’t let me go after that.” Hay remembers the late 90s and early 2000s as a time of great creativity. “I think there was a lot more variety in web design then. There was a lot of creative work going on that really pushed the edges of the constraints we had. Designers came from a print background and they were trying to do everything they did in print on the web, which produced a lot of variety.” He compares this to the situation today, in which the tools we use make it easy for

“Material Design has interesting principles, but but essentially it’s a single company’s design language”

Simplicity is a topic that’s on Hay’s mind a lot these days. He’s concerned by the rise of what he calls a ‘tool religion’ , where people are so hung up on what tools they’re using and how they are strung together that it starts to determine how things are designed. “I recently read something about how someone had written a small bit of Sass that generated quite a lot of CSS, but they didn’t realise how much. In the end they discovered it was making up about 75 per cent of the CSS for the whole project. So while Sass is a fantastic tool, if it’s not used correctly it can be counter-productive.”

everyone to follow the same design patterns. “It’s not necessarily a bad thing because a lot of these patterns have been proven to work, ” he muses, “but I feel like there’s less of that cowboy attitude of ‘I just came up with this idea and I’m going to figure out how to make it’.” Hay puts a lot of this down to an obsession with metrics and the results of testing. The cost of testing something new has to be justified, and people are reluctant to get too creative for fear of things not working as well as the proven patterns. Equally overrated, in Hay’s opinion, is Google’s Material Design system. While the rest of the industry is getting excited over this new ‘design toolkit’, Hay sees it as nothing more than Google’s vision for design, opened up to the public so they can use it to create applications for Google’s devices. “The way people talk about Material Design makes it feel as though it’s a new discovery in design. There are interesting principles in there, but I don’t see why another company would want to adopt Google’s design guidelines,” he explains. “Outside of Google I don’t think it’s a huge thing, and I don’t really think about it very much to be honest.”

Content rules For Hay, the key to effective web design is to start with the content. His background in print may well have influenced this

december july 2015 2015 37

Voices Interview

philosophy: “If you look at a lot of really well-designed magazines, they have a style for the whole magazine, but often they’ll do the typography specifically for particular articles. They have the content, and they can design based on what they know about that content.” It’s common for clients to request a design before they’ve written the content, but Hay thinks it’s the wrong approach. “A lot of web design is the creation of very attractive containers that you can just pour any type of content into; it’s the newspaper model of making a framework to hold whatever might be there on a given day. That works great for newspapers, but it’s not the best way to design for a lot of different types of messages or applications.” Hay compares designing content to building up a clay sculpture. “You add only what’s necessary and then refine that, as opposed to throwing everything on there and then taking things out.” If you start with content, all the design decisions can be based on that. You know the parts that are important and where the emphasis needs to be, as well as how things relate to each other, and can design accordingly. “It’s hard to do that if you’re just making something generic that people are

december july 2015 2015

going to fill in later,” says Hay. “That’s more like designing themes or skins, it’s not really designing for your content.” The content-first theme is one of the main strands of his book, Responsive Design Workflow, which also advocates rethinking design deliverables. Hay advises getting rid of detailed wireframes and focusing on getting a design comp in the browser, so people are confronted with the reality of the browser as early as possible in the design process. “It means you get everyone used to the fact that the site is going to change in a lot of ways on all these different form factors,” he says.

Digital Art

Hay started programming aged 11 and stopped after a couple of years, so the languages he knows don’t translate well any more. “Right now I’m learning programming so it can help me in my work, but also so I can start doing this kind of programmatic art.”

Work/play Asked what else is exciting to him these days, Hay replies with exuberance: “Oh man, everything! Sara Soueidan’s SVG work, that’s just amazing. Val Head has done some great work around animation ... you can’t not get excited when you see that stuff. I even get excited about microdata, it’s ridiculous. “I think I could be doing so much more than what I do today; we’re not even doing a fraction of what we could do. What we do is such fun, it seems so much like play. There’s always something new, and it’s so hard to keep up with. But it never gets boring.”

“Add only what’s necessary, rather than throwing everything on there and taking things out”

Earlier in life Hay was a painter, but that’s on pause these days and he’s interested in computer-generated art; especially the work going on around Processing. He cites the work of Seb LeeDelisle as a particular favourite. “I really immensely enjoy that stuff. When I start thinking about making new art for myself I think in terms of combining the painterly approach with that kind of work.”

Next month: Independent developer, consultant and trainer Tim Kadlec

Opinion

industry

Why Ladies that UX?

Ladies that UX co-founder Lizzie Dyson explains why we need groups to promote women in tech Past a certain point, the digital sector struggles to keep women interested. In August, WISE published new figures (netm.ag/stemstats-274) showing that women make up 14.4 per cent of STEM (science, technology, engineering, mathematics) occupations. That is 1.6 per cent up on last year’s figures, but the number of female managers has dropped by 0.6 per cent: 572 fewer than 2014. Why are women leaving these senior roles? At the start of my career as a UX consultant I was the only woman on my team. This didn’t worry me, but as I started attending networking events I began to notice it was mainly men turning up. I thought to myself, where are all the women? Not long after, Georgie Bottomley joined the team and we attended events together. After a few glasses of wine, the lack of women came up in conversation, as did

the structure of web events. We thought it would be great to be able to sit next to someone and have a conversation, instead of having to put your hand up and voice your ideas in front of a big crowd. We wanted something informal and relaxed after a long day at work, and so Ladies that UX (ladiesthatux.com) was born.

Time for change We put a call out for the women in the industry to join us for a bite to eat. Tickets started to sell and we got so excited! We realised there were other women out there, and by having a women-only group we were attracting their interest. After advertising our events on Twitter word started to spread, and women got in touch and asked if they could start their own groups. We’ve grown quickly: in just over two years we’ve reached over 40 cities worldwide

(Tokyo being our 40th). Each city runs slightly differently, depending on what the attendees want from the meetup. The main theme is always the same: a supportive community that promotes women. We need more women in leading roles to inspire, to challenge and to change the way women are portrayed in the workplace and the media. Women tend not to shout about their work as much as they should. The speaker circuit has become stale, showing the same old, predominantly male, speakers. Many are paid a small fortune to speak about theories and idealistic digital lives. Georgie and I were approached frequently and asked, “Do you know of any women in the industry willing to talk? We can’t find any!” To prove them wrong, we created Talk UX, a conference with 21 female speakers, 13 of which had never spoken before. The aim was to encourage women in the industry to get out there and shout about their work. There are so many amazing women out there doing amazing things. We wanted real people to speak about real projects; things they had been working on the week before, and could answer questions on. We didn’t want to hear from someone that was so far removed from the groundwork that they could never explain why a button was on the right, not the left. I think paying attention to the small details and thinking about the way we worded our speaker requests definitely helped. We sold the conference on having a friendly and relaxed environment, and created a space that women would feel empowered. We also promoted the event through our networks, inviting women that had been attending our events since they graduated from university. Women in tech groups are still vital. By providing a friendly environment, we’re allowing women to meet, share ideas and discuss their careers; something that they may not have had the chance to do before. With groups like Ladies that UX I know we’re getting one step closer to that elusive 50 per cent industry split. Want to get involved? Visit our website and get in touch.

PROFILE

winner

Lizzie is a UX designer at BBC Sport. Along with Georgie Bottomley, she co-founded Ladies that UX, a collaborative community that promotes women in the web industry

december 2015 39

VOICES Big question CMS

How do you choose the right CMS? There are plenty of CMS options out there, each with their own benefits and quirks. We asked seven experts how they pick the right one for their projects

M a rk Brow n

Co-founder, Backdrop CMS

markjbrown.com

jenlampton.com

I ask my client three questions: What are you using it for? Who is going to maintain it? Are you a PHP or .NET shop? I’ll choose a CMS that lets me deliver the client’s needs with the least amount of effort. Each CMS has its own strengths and weaknesses, so I pick primarily based on the workload. If the customer is maintaining it, my second priority is something that matches their skills.

L e wis N y m a n

Frontend developer lewisnyman.co.uk

The diversity of devices is increasing. If you identify an opportunity to provide content to a device that doesn’t even have a web browser, how would you achieve that? As you learn from your users, you’ll want to be able to adapt your CMS accordingly, not rebuild from scratch. The best CMS is one that provides the balance between achieving your short-term goals and the flexibility to support your unknown future goals. 40

Jen L a mp t on

Cloud and solution architect

december 2015

I ask my clients ‘Who’s on your team?’ These days choosing the right software depends less on what you need it to do, and more on who needs to use it, build it, and support it after the website has launched. Are you crowd-sourcing your content? Does your editorial team have creators, reviewers and legal experts, who all need to sign off on each article? Do you have in-house developers with sysops chops, willing to take on a new project? Do you have a design team of HTML and CSS masters? If you have neither, are you willing to start a relationship with a contractor or firm to design, build and maintain your new site?

He at her McN a mee

Phil H aw k s wor t h

nearlythere.com

rga.com

Technology director, R/GA

Community organiser, Drupal Belfast

A great way to get to know a CMS, especially an open source one, is to attend events held by enthusiasts and contributors. You’ll see case studies and speak with people who’ve used that CMS, and learn about changes and roadmaps so you can make more future-friendly decisions. The more local your event, the more likely you’ll find other people you can lean on for support or hire to help you. Just make sure you do the essential research, and come with good questions. You’ll get much more out of your day. Emm a Ja ne Hogbin W es t by

Technical project manager gitforteams.com

I’m a teams-first, not a tech-first person, so I think a brilliant team that loves a ‘lesser’ CMS really well can do a lot more than a disparate group of people who aren’t motivated while using a ‘better’ tool. Select your CMS based on existing expertise within the team, enthusiasm to learn a specific (new) tech, and the quality of the community of support available (including documentation, meetups, IRC). Narrow your choices, then prototype your problem with your shortlist of CMSs. Find the limitations early and benchmark your assumptions. Then you’ll know what’s best for your team.

There is huge pressure to find a CMS that can do everything. Resist. Simplicity and ease of use should be regarded at least as highly as power and features, and identifying features you will genuinely need regularly requires honesty and discipline. Don’t attempt to solve problems you don’t have, or default to the biggest, best and most expensive tools. Value the simplicity of the author’s experience to avoid your site going stale. Safeguard the development experience to make it easier to maintain and evolve your site. Protect the performance and design of your site to get the best from your team’s talents.

Jeff E at on

Digital strategist, Lullabot lullabot.com

Take time to understand your site’s content and the day-today needs of the content editors. Talk to people who’ve worked on similar projects, and ask them how their CMSs handled the features you’ll need. For simple sites, most commercial and open source CMSs are roughly equivalent, and it’s easy to sink time into endless feature comparisons. Getting a picture of what’s most important helps cut through the crap.

Resources CMS Database

New to CMSs and need some help navigating the world of content management? CMS Design Resource (cmsdesignresource.com) is a great place to start. Created by Jesse Sutherland, this site is both a resource and community where web enthusiasts can share CMS news and ideas.

Easy Goals

In this amusing article (netm.ag/goals-274), Robert Mohns predicts, via the analogy of a coffee machine, that you’ll find a CMS easy to use depending on how closely it’s related to your content. By mapping your CMS to your content, Mohns argues that it’ll be quicker for you to do your job and fix problems.

Build Your Own

Bas van den Wijngaard used to be a firm advocate of building your own CMS. But when the company he worked for decided to use a third-party CMS, he suddenly found himself focusing on different projects and enjoying this work even more. In this article (netm.ag/build-274) he shares his insights.

december 2015 41

Gallery Inspirational sites Una K rave ts

Sensational design and superb development

Node.js, Express

thestlbrowns.com HLK Agency hlkagency.com

For this website about the history of the St. Louis Browns baseball team, digital agency HLK has crafted a very beautiful experience. The site reads like a well-crafted vintage book, complete with chapters and textured typography. Users can scroll through each chapter for a time-based, story-like experience. Inspiration for the site has been pulled from 1920s manuscripts and advertisements, with many of the images directly from the years they are describing. This brings a uniquely dated feel to a modern, digital

december 2015

space. This is completmented by a greyand-brown toned colour scheme, accented by a single shade of orange. Some of my favourite parts of this site are the little details, such as the menu button (circular with a hamburger menu inside) that converts to a baseball on hover. I also love the timeline on the left-hand side, which follows the screen and updates on scroll. The site is built using Node.js and the Express framework to allow for smooth updating and flow between content.

Una is a frontend developer, architecting design systems and building software prototypes at IBM Design in Austin w: unakravets.com t: @Una

Inspirational sites

After Effects, Modernizr, jQuery

legworkstudio.com Leg Work legworkstudio.com

Leg Work does a lot of great work on the web, from graphic design to interaction and media. So it comes as no surprise to find that its own personal site is no exception. The studio’s personality shines through via fun, mixed-media illustrations. It combines vintage photo effects (such as the dot grid pattern) with digitally painted white accents and scans of physical handwriting to create unique art to represent the agency. However, it is not just the illustrations that make this website notable – the interactive animations really bring it to life. Some of the illustrations themselves are actually videos instead of static visuals, created with After Effects, and website components like the sidebar animate smoothly. The website is designed with mobile in mind, and mobile interactions are mirrored in the desktop experience, where the user can swipe with the track pad to get through the sections. The website is built using Modernizr to ensure compatibility, and jQuery for interactions.

december 2015 45

Gallery Inspirational sites

si t e of t he mon t h

jQuery, AngularJS, Google Maps

codeconf.com GitHub GitHub.com

The site for CodeConf really goes above and beyond the standard conference website. I was lucky enough to also attend the event as a speaker, and I must admit I was extremely impressed with the thorough branding (even the food was very in-theme). The conference was held in Nashville, Tennessee, and everything about this design pays homage to this location. The website itself is nicely responsive and has a warm, cohesive colour palette. The whimsical illustrations give the site character and create a playful country-rock aesthetic that continues throughout the page (and even into the event itself).

december 2015

No details are spared, as even the menu’s decorative horizontal rules (only seen on smaller screen sizes) flow with the countryrock aesthetic. The site implements Google Maps for location features, and is built with jQuery and AngularJS. Everything is illustrated: all of the venues, the ‘set list’ of speakers, the call to action for buying tickets, and breaks between sections. There is also a fun cast of characters that can be found dotted around the site: vector cacti, unicorns, dragons, octocats, and cowboys and girls playing music and posing playfully around the page.

Inspirational sites JQuery, jQuery UI

ibm.com/design IBM Design ibm.com/design

“This has so much personality, in the best way. It feels drastically different from the simple designs for most developer conferences”

In the past few years, IBM has invested in growing a design programme and steering the company towards a human-centric approach to creating software. It recently came out with the IBM Design Language, which contains an update for its animation vocabulary. It provides design guidance and resources for web developers, all open-sourced on GitHub. What I love about this animation update (even more than the fact that it’s open sourced) is how the studio looks at IBM’s heritage and the physical world for inspiration, instead of other digital properties. Hayley Hughes, IBM design language lead, says that the team pulled

inspiration from machines; in particular their solid planes, physical mass and rigid surfaces. “From the powerful strike of a printing arm to the smooth slide of a typewriter carriage, each movement was fit for purpose and designed with intent,” she explains. “Our software demands the same attention to detail to make products feel lively and realistic.” Why is animation so critical to IBM’s Design Language? “Just as a person’s body language helps you read the conversation, animation relays critical information that helps users understand how to navigate and use our products,” Hughes says.

Ally Palanzi (@mylifeasalllly)

december 2015 47

Gallery Inspirational sites

Jekyll, GitHub Issues, Swiftype

beautifulopen.com Trek Glowacki GitHub.com/trek

Trek Glowacki started the Beautiful Open project after noticing an increasing number of sites for open source projects that had been designed with intention. He wanted to start chronicling them, and in 2009 began to build a list of commendable websites. The format and look was borrowed from Built with Ember (builtwithember. io), which is itself open source and was inspired by the Bootstrap website (expo.getbootstrap.com). This design shortcut allowed Trek to focus solely on finding and curating the collection, rather than working out an implementation strategy.

december 2015

The site is entirely static. It’s generated with Jekyll, submissions are managed through GitHub Issues, and the site is hosted on GitHub Pages. Search is provided by Swiftype. “I wrote essentially none of the code that powers the site, which is itself an expression of the aesthetic I’m hoping to communicate to people interested in the visual design of open source: you don’t need to be a great programmer (or even a great designer) to make and publish something useful and beautiful,” Glowacki says. “Software has a long and vibrant history of this kind of digital bricolage”.

“Trek is doing a huge service to the design communities. This shows that open projects can and should be beautiful” Garth Braithwaite (@garthdb)

Inspirational sites

Modernizr, Google Web fonts

CodePen.seesparkbox.com Sparkbox seesparkbox.com

Sparkbox is a digital agency based in Ohio. When redesigning CodePen this year, it decided to open source its entire design process. I love the concept of this site and the idea of opening up the creative process so fully. “Interestingly, designing in the open hasn’t really impacted a ton of decisions yet,” reveals Sparkbox designer Katie Kovalcin. The most feedback the process has received has been centred around the user interviews the team held, making it easier to garner participants. Performance was a key topic that drove a lot of the design decisions for

the project. On CodePen, pens loading an iframe posed a really interesting performance problem, so when toggling to view more than six pens in the redesign, the team opted to convert them into an image-only grid. The project is ongoing, with Sparkbox and CodePen currently working together on a style organisation system. “Coming up with a system that made sense for design organisation (especially for things like buttons), while also encompassing their many unique uses and classes is a challenge we’re still ironing out,” Kovalcin continues.

december 2015 49

Gallery Inspirational sites

“This is a great example of a page designed for performance, with animated GIFs, internal CSS and avoiding render blocking JavaScript. It even works well with JS disabled” Nick Whitmoyer (@whistle)

Sketch, Gulp, Varnish

fantasyfootball.viget.com Viget viget.com

One of the unique things about interactive agency Viget is that it spends a lot of time building things simply for the practice of creative problem solving. From experiments with WebSockets and Elixir (like JamBells) to communitydriven sites (like SpeakerRate), the projects are intended to stretch technical and creative limits. All of these projects are part of Pointless Corps (pointlesscorp.com), Viget’s innovation lab, which is separate from client work. The website featured here in particular examines a vision for the future of fantasy football, using a variety of means.

december 2015

It is well organised and there are prototypes for every aspect of the season, from the draft through to post-season. The creators started the process by simply sketching ideas out with pencil and paper, before moving into Sketch for wireframing and light prototyping. They then refined the design in Photoshop and leveraged After Effects for final animation to bring the designs to life. The site is built with simple HTML, CSS and JavaScript, and hosted on GitHub Pages using a gulp starter environment that Dan Tello, a frontend developer at the company, created.

Save up to 57%

when you subscribe today take out a subscription to net and get delivery direct to your door, Wherever you are in the world

Print l 13

issues delivered to your door

l Packed

with the latest web trends, technologies and techniques

l Prices

include shipping

Europe from €80 (save up to 38%) US/Canada from $105 (save up to 52%) Rest of the world from $112 (save up to 49%)

Digital

Print + Digital

l Interactive

l Choose

l Stream l Get

videos and galleries

screencasts, extra images and more

instant access to the latest issues

l 13

when and how you read your magazine

issues in a one-year subscription

l Apple

and Android edition download

Europe from €60 (save up to 23%)

Europe from €101 (save up to 51%)

US/Canada from $60 (save up to 23%)

US/Canada from $127 (save up to 57%)

Rest of the world from $60 (save 23%)

Rest of the world from $134 (save up to 55%)

Subscribe online at myfavouritemagazines.co.uk/NETMAG15 Terms and Conditions: * Prices and savings quoted are compared to buying full priced print and digital issues. This offer is for new subscribers only. 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 unmailed issues. Prices correct at point of print and subject to change. For full terms and conditions please visit: myfavm.ag/magterms. Offer ends 15/12/2015

Sublime design & creative advice

This month Featuring...

Focus on

Design Challenge This month...

New columnist Sam Kapila shares her tips for presenting a digital portfolio that is coherent, interesting, and tells your story

Car rental Profiles

K at he rine C or y Katherine is a freelance web designer and Drupal frontend developer w: katherinecory.com t: @katherinecory

K y l e W il k in s on

Profile

Kyle is partner and creative director at design consultancy Hacksaw w: kylewilkinson.co.uk t: @KyWilkinson

New Agency of the Year Anton & Irene explain the secret behind their studio’s dynamic launch and impressive pitching success stats

T om B r o a dhur s t Tom is studying communication design at the University of Salford w: netm.ag/broadhurst-274 t: @t_broadhurst

Brief

How we built

When asked to build a site to show off 12 ‘interactive haikus’, Dpt used Pixi.js to create a design that defied the laws of physics

december 2013

We’d like you to design a car rental website. It could focus on vintage favourites, high-speed choices or a more sensible variation. No matter the style, the user must be able to easily navigate the website to find the exact option they’re looking for.

Design challenge

2 1

3 5

Katherine Cory

Wanderlust Travel Hire

This classic and unusual vehicle rental service puts a romantic twist on hiring a car

Wanderlust Travel Hire is an aspirational, luxury brand taking inspiration from brands like Mr & Mrs Smith Hotels and The Luxe Nomad. With this site, people can hire a classic car and explore their dream locations at their own pace, for as long as they wish, anywhere in the world. Anything from classic cars and camper vans to Vespas and motorbikes can be rented, and routes are not pre-planned so every trip is one-of-a-kind. The website will allow customers to search for their transport by location, the dates of their holiday and the number of travellers. Customers have the opportunity to return the car to the location of pickup or another destination anywhere in the world. All cars are reviewed by previous customers, allowing new customers to filter by rating, as well as by price and facility, in order to find the perfect car for them.

Close up (1) Photography plays a large part in the design, to show an aspirational lifestyle and inspire customers. Time has been spent photographing the cars to ensure they’re looking their best. (2) Calligraphy-style typography is a breath of fresh air in the car industry website space. Holidays and driving classic cars should be fun, and the typography reflects this. The headline typeface is paired with a sans-serif, Avenir, to bring a classic, yet modern feel. (3) The language used throughout the site is personal, playful and friendly to make customers feel at ease. (4) After a customer’s homepage search, they are presented with a list of appropriate cars, showing a description, the price and reviews. A customer can filter these results and narrow down the results further, or they can alter their search. (5) The mobile homepage gets straight to the point. When landing on the homepage, the customer only initially sees the search form, before scrolling further.

My month What have you been doing this month? Rebranding my business, and blogging about it at selfbranding woes.com. Which sites have you visited for inspiration? Instagram and Pinterest – I follow illustrators, and interior and fashion designers, for new perspectives. What have you been watching? I shamefully love reality TV and I’m binging on The Profit and Project Runway. What have you been listening to? My ‘Play it Forward’ playlist – Spotify knows me better than I do.

december 2015 53

Showcase

Design challenge

6 2

Kyle Wilkinson

WHEELS My month What have you been doing this month? Redesigning the Barnsley Council website; streamlining its services to make it easier for the public to complete tasks online. Which sites have you visited for inspiration? Enterprise and Hertz as they seem to be the market leaders. What have you been watching? 80s films – they’re the best. What have you been listening to? 80s music – it’s the best.

december 2015

This site takes its inspiration from mobile interfaces to speed users through the hire process

In a world where we mere humans have an attention span of only eight seconds, service websites have become something that we all need to get through as effortlessly and painlessly as possible. Wheels guides users through a simple, stepped process to enable them to concentrate on making quick yet informed decisions, and delivering information exactly when it is required. The Wheels interface feels familiar and moves the user through the purchase process in a manner that is akin to the mobile interfaces that we’re all so enamoured with. Information about each class of car is presented using AJAX for rapid client-side updates as a user moves back-and-forth, changing their mind. This ensures the site feels quick and responsive to the user’s decisions, delivering a user experience that is both productive and pleasurable.

Close up (1) With no extraneous information, the main search interface allows the user to move effectively into the research phase, quickly illustrating that Wheels understands its users’ pain points and increasing the likelihood of a purchase that isn’t wholly price-driven. (2) An AJAX-driven search box responds quickly to the user’s input. (3) The background image is a simple addition that provides an aspirational subtext to the site. (4) Familiar breadcrumbs allow users of all levels of web literacy to easily step through the process both ways. (5) Quick access to the information users really need about each class of car is provided through easy to understand iconography and placement. (6) Reducing click frustration is paramount on a website that requires quick, interactive tweaks to search criteria. This is tackled by allowing the entire product section to be the touch area on touch devices.

Design challenge

3 2 4

Tom Broadhurst

My month

MOTION

A muted colour scheme and minimalist aesthetic makes this site stand out

Motion is a high-end car rental site. The design is very modern and minimalist, to contrast with the cluttered and difficult to navigate existing car rental websites. I decided to go with a one-page website to make it much easier for users to navigate and find important information. The site has a simple booking system in which the user would choose the pick-up and return locations, dates and vehicle type. I have removed unnecessary additional options to make the booking process quick and easy. The greyscale colour scheme, paired with the homepage hero image, conveys a sense of simplicity and luxury. The site is based on a 12-column grid, enabling me to align the content across various device platforms, and create a unified theme throughout. The animations would be fairly minimal and could therefore be achieved with CSS.

Close up (1) The header stays at the top of the page when the user scrolls down, to ensure easy access to the navigation menu. (2) A simple booking form encourages the user to book when they first enter the site. (3) Vehicle pages featuring a selection of exterior and interior images give the user a clear look at the vehicle they are booking. (4) A prominent ‘Book Now’ button guides the user straight to the booking form, making the process much easier and increasing the likelihood the user will proceed. Users can also add a vehicle to their ‘favourites’, enabling them to build up a list of their preferred cars for future bookings. (5) Additional information about the vehicle is provided, such as a general overview, main features and the ability to check vehicle availability at each location.

What have you been doing this month? I have a couple of exciting freelance branding projects on the go, and I’m in the process of redesigning my website. Which sites have you visited for inspiration? siteinspire.com, webdesignserved.com, onepagelove.com What have you been watching? I’m really into Person of Interest and Under the Dome – and of course Manchester United. What have you been listening to? I have been listening to Beats 1 Radio quite a lot recently.

december 2015 55

Focus on

Focus On

Presenting your work Sam Kapila shares a few ideas on how to make your work shine in an online design portfolio

PROFILE

Creating an online portfolio is hard work for a designer. We can be our own toughest clients, and making a collection of diverse projects look like they belong together is tricky. However, it is possible to create a folio that is interesting, cohesive, highlights your strengths and shows who you are as a designer. Firstly, be consistent. For example, each project thumbnail on your main portfolio page should be treated consistently from project to project, even if one is a website and another is an icon set. Use similar image sizes, or angles and lighting if the thumbnails are photos. The ‘less is more’ philosophy can help entice the viewer to click on the thumbnail for more detail. Go for a dramatic crop that focuses on the most visually strong part of a project. This works extremely well when showing larger-scale online branding and patterns. Choose an appealing and moody photographic treatment or show a simple, well-crafted logomark on a light, complementary background colour. Typography sets the tone, so when picking typefaces err on the side of minimalism. The typography should support the work, rather than distracting the viewer. Consider sticking to one extensive type family rather than mixing in too many different tones. These few steps towards consistent presentation and thoughtful storytelling can help us better present our work and show the world who we are as designers.

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

(1) Alice Lee (byalicelee.com) puts the focus on her work and keeps everything else simple. The design reflects her attention to detail, playful

design choices and versatility. (2) Bethany Heck (heckhouse.com) isn’t afraid to show details, zooming into binding on books, and metallic lettering

on thank you cards. Her unusual crops and angles add mystery. (3) Fuzzco (fuzzco.com), presents its work so thoughtfully. All thumbnails,

whether they’re for logos or online magazines, have been crafted to connect with the next, and each one becomes part of the project itself.

december 2015 57

winner

info Location: Brooklyn, US Designing since: 2014 Areas of expertise:

Design, products, digital, UX, photography, video

Selected clients: Karim Rashid, Netflix, Balenciaga, Wacom, USA Today Awards: Red Dot, Emmy, Webby, Adobe Max, Cannes Lions, net New Agency of the Year 2015

Profile

Anton & Irene antonandirene.com

The Brooklyn-based duo on why they went from agency bigwigs to hands-on designers Anton Repponen and Irene Pereyra first met while working as agency directors at Fantasy. Soon, it became clear they weren’t doing as much design work as they’d like, so in 2014 they took the plunge and founded Anton & Irene. The studio has already started making waves in the industry, snagging Karim Rashid as its first client and picking up net’s New Agency of the Year award (see their awesome acceptance video at netm.ag/accept-274). We chatted to the duo about their extraordinary pitching success rate, and why there’s really no need for user research. net: You went from being agency directors to designers. Why the move? AR: We became directors quite quickly at the very beginning of our careers, and it was definitely not something we had planned on. After a couple of years ‘on the job’ we realised the things we enjoyed doing most were the things that had nothing to do with being directors. There are a lot of things that start to eat up your time, like the performance reviews of your designers, and discussions about finances and business strategies, and you end up doing less and less actual design work. IP: We definitely learned a lot from all of these extra-curricular director activities, but we wanted to make sure we kept designing and didn’t become the kind of directors that just point at other people to do stuff. That works really well for some people, of course, but for us it was like dying a slow death. We like making things. We like working on stuff ourselves, and the only way to keep doing that was to start our own studio. At larger agencies you get promoted away from the things

december 2015 59

Showcase

Profile

Studio base Anton & Irene’s incredibly beautiful, sunny loft studio space in Brooklyn. Every item in the studio was hand-picked and has some kind of story behind it

you are best at, but as an independent design studio, we could ensure we would always be the primary designers. net: What was your experience like when you launched Anton & Irene? AR: We were very lucky and it was quite easy. By the time we started our studio we were already known as designers and were associated with some pretty successful projects. We’ve worked with

a ton of people over the past seven years at companies like Google and Microsoft, and a lot of designers who worked for us in the past are now at places like Apple, Spotify and Facebook. Our network is quite large – it wasn’t like we just came out of nowhere. If we had started our own agency earlier, we would have had a very different experience I think. It was good timing. net: What advice would you give to others setting up an agency? IP: You have to be very sure about who you go into business with, because at the end of the day, a business is basically the same as a marriage. It’s very important to be aligned on very many different levels because there is a high chance for irritations to build up if you aren’t. Anton and I both have a similar outlook on to what extent we will let money make decisions for us (as little as possible), how many hours we want to work (from 9am to 6pm every day, and never on the weekends), and what kinds of work we want to take on (interesting work that will challenge our skillsets). You might think that these things go without saying, but you’d be surprised how often that can go wrong.

december 2015

net: Can you tell us about your process working with Karim Rashid? IP: Believe it or not, the Karim Rashid project was quite possibly the easiest one in our careers. Initially we were actually quite apprehensive about taking on the project, since we thought it would be impossible to design for a designer. Especially for one as prolific and influential as Karim Rashid. We were worried that he would end up ‘directing’ the project, which would have been a total nightmare. The only reason we decided to move forward with the project was because we had worked with Alexander Wang on the redesign of Balenciaga.com the year before, and he respected our expertise as digital designers and never crossed into our domain. As soon as we met with Karim and his team we knew it was going to be a good working relationship. We liked them right away. net: You’ve said that you ‘don’t do user research’. Is this still the case? IP: Yes that’s true. It’s just not part of our process. Although we sometimes get vilified by other UX designers for not doing it, we refuse to do research just because other people feel that it’s

Profile

office culture

Irene Pereyra What’s on your desktop today?

Karim Rashid Anton & Irene’s first ever client project was to redesign the website for iconic product designer Karim Rashid

just something you have to do. Everyone has their own way of coming to a solution, and user research just happens to be one of them. net: Does this ever cause difficulties with your clients? IP: It’s actually never affected any of our pitches or work with clients, and very rarely have clients insisted on user research. In those cases we asked them to hire an outside company to conduct the user research, and then together with the client we’d decide on what we wanted to action from it. Though in reality nothing surprising ever came out of it. It’s funny how dogmatic the UX field has become, with so many rules on process and things. I really dislike that. net: How important is UX to you? What makes a good user experience? IP: Wow, this is a massive topic we could discuss for hours. A good user experience is everything, of course. Everything. You want things to make sense and be designed around the person who will be using it. However, I do find it interesting how so many things have become boring and visually uninteresting under the flag of ‘good user experience’. Maybe it’s OK

for some products to be hard to use, or difficult to figure out. Maybe your mom shouldn’t always be able to use it. Think of Snapchat. Good UX still means many different things to many different people, and even people within the UX community are still arguing about UX versus UI and what it all means. I find these discussions kind of uninteresting to be very honest. Stuff is either good or it’s not. You can call it whatever you want and get there with whichever means you need to. net: Can you tell us about some work which initially didn’t go down well with the client, and how you bounced back? IP: When we were working on the redesign of USAToday.com back in 2012, we almost got fired when the client didn’t like the creative work that came out of the three-month discovery phase. They basically threatened to fire us if we didn’t come up with something better by Monday. It was Thursday. We had three days to come up with a totally new and different framework, and through some sort of miracle we managed to get something that was really, really good. By the time they saw it on Monday we had won back all

Monocle and Wallpaper magazines, Bowers & Wilkins headphones, a Kindle, a red Swingline stapler, and a large bottle of Pellegrino.

What do you have on the walls? A group of Cold War-era illustrated Russian hazmat posters on how to prepare for a nuclear attack, as an ode to Anton’s Russian heritage; an original ‘Vormgevers’ Wim Crouwel poster; a hand-drawn architectural isometric drawing of the neighbourhood in Amsterdam that I grew up in.

What will you do for lunch? Today we have quite a lot of stuff to do, so we’ll order some wraps and some fresh squeezed juices. Normally we try to get out of the studio.

What else do you do in the office? We listen to music all day and we watch John Oliver at lunchtime, and every Monday morning we discuss what we need to get done that week over coffee.

How often do you hang out with other designers? Pretty much exclusively. Most of our friends are designers or in a closely related creative field. The more niche you become, the more niche your group of friends become.

Describe your working culture in three words Disciplined, organised, efficient.

december 2015 61

Showcase

Profile

Timeline

A look at the key dates in Anton & Irene’s history OCT 2008 The pair meet and start working together

AUG 2010 Design a watch that would go on to win a Red Dot in 2010

Nuro watch This watch has one dial for the hours and another for minutes – they rotate, and the time is indicated in the hourglass. The design won the duo the ‘Best of the best: Design Concept’ Red Dot award

2010 Start working with the Google Chrome team, where they complete a number of projects over two years

2012 Work on USA Today

MAY 2012 Present at the OFFF Barcelona design conference on the main stage

SEPT-NOV 2013 Live in Tokyo for a little bit while working on-site with Wacom

OCT 2014 Launch Anton & Irene, the studio

NOV 2014 Win their first client, Karim Rashid

2015 Work on personal projects: an analogue wristwatch designed by Repponen and an online documentary about Pereyra’s childhood home in Amsterdam

SEPT 2015 Win the net award for New Agency of the Year

december 2015

the respect needed to keep the job, and to maintain a good relationship with the client. We realised our mistake was that we did not include them enough in our working process, and that they would have been able to pull the handbrake much earlier on if we would have shown them stuff sooner. Ever since then, we’ve stopped doing ‘grand reveal’ presentations and show our work-inprogress almost on a daily basis. Better safe than sorry! net: You state you’ve won 84 per cent of your pitches – what’s your secret? AR: We learned by making mistakes. Every time we lost a pitch, we would request a call with the client to ask where we went wrong and why they didn’t choose us. It’s amazing what you can learn from that. It’s important to be 100 per cent dedicated to the pitch for the entirety of the time that you are working on it. It’s also important to show the client at least two different concepts, and you should always present in person. Most importantly, you have to sell yourself and your process. They basically have to look at your presentation and if your concept doesn’t match their needs, they should think to themselves ‘but we can work with these guys if we let them know what we’re thinking’. It’s all about building that trust and understanding right from the beginning.

net: How do you stay excited about design, and beat creative block? IP: To be very honest, I am really unaware of trends and what is happening in our field currently, and I kind of like it that way. I think I am afraid that if I get too wrapped up in what is happening out there I will inadvertently start copying stuff. The things that inspire me are kind of random. I like good stories. I like weird facts. I like stats. I like history. I like finding things that other people walk past. I like unusual people and unusual situations. I like making things make sense. I like taking a massive amount of stuff or information and sifting through it to see categories and similarities. I like fixing things that are broken. I like putting things in order. I like things to be neat and organised … AR: I somehow stopped looking at other things that happen in digital a long time ago. Most of the books I read aren’t industry books, I read both fiction and non-fiction – that inspires me much more. If I read blogs or any other online publications they tend to be about photography, video, industrial design, art, fashion or architecture. I am trying to get inspired by other industries and borrow something from there to bring into my work. Creative block is a myth. Next month: Product designer and ‘problem untangler’ Brad Haynes

LOSE YOURSELF IN A WORLD of

Vinyl

FIND YOURSELF IN OXFAM’S ONLINE SHOP

oxfam.org.uk/shop

Showcase

How we built

Interactive Haiku When asked to present 12 short digital experiences, Dpt used JavaScript and Pixi.js to create a playful site that defies the laws of physics

3 5

Brief Dpt was asked by the NFB and Arte to create a website that would enable artists to submit their own interpretations of a ‘digital haiku’. Dpt’s mandate then evolved into making a hub to present the 12 selected projects.

december 2015

Close up (1) The portal needed to include the NFB or Arte logo (depending on where the website was being seen). (2) The design was kept slick and discrete so as to not overshadow the individual interactive haikus. (3) A short promotional animation was prepared for the launch, expressing the project’s unique and light-hearted nature. (4) We wanted to make sure the logo was a key element in the

experience. Everything starts with it falling apart as the visitor scrolls through the page. (5) Each haiku has its own web address, so we created a menu and transitions that gave visitors the impression that they never left the interactive haiku environment. (6) For the call for submissions, the art director was obsessed with making everything feel like jelly.

How we built Nicol as S.Roy

Raed Moussa

Guill aume Tomasi Timeline

The key stages in the interactive haiku project February 2014 Dpt’s creative director Nicolas was in charge of the overall concept w: dpt.co t: @nsroy

Interactive art director Raed developed the project’s identity and designed all the interfaces w: dpt.co t: @heyRaed

In a project headed by the National Film Board of Canada and FrancoGerman TV network Arte, creative studio Dpt developed a framework to present 12 interactive interpretations of a haiku (a Japanese poem). Each lasted less than 60 seconds and was designed by a different team from around the world. After first tackling the ‘call for submissions’ platform, Dpt moved on to build the hub site itself (interactivehaiku. com), using a physics engine to bounce colourful shapes around the screen as the user scrolls past the projects. We caught up with the team at Dpt to find out how they tackled the technical challenges of the project. net: How did you get involved with the interactive haiku project? NR: The NFB approached us in the spring of 2014. They wanted to work with us on the project, but needed to know first if we would prefer to submit an interactive haiku, rather than work on the platform, as it would have been a conflict of interest to do both. We decided to work with them on the platform. net: What’s the concept behind the interactive haiku website? NR: Our original mandate was to create a site that would allow artists to submit their haiku projects (haiku.departement. ca). The brief then evolved to include the main hub presenting the projects and an installation that would appear at Tribeca Film Festival. The NFB and Arte gave us a lot of latitude for the concept. We

Guillaume is a creative coder at Dpt. He worked on interactivity and coded the entire platform w: guillaumetomasi.com t: @Guitouxx

wanted the site to be a metaphor for the project, so we built it like an interactive haiku. Everything from the colours and shapes to the animations is short, sweet and playful. net: How did you start the project? NR: We explored different avenues to make the site fun and playful, including creating a scanimation effect when people scrolled through the page. Using a physics engine, we toyed with making colourful shapes bounce around the screen as users scrolled down. This made the site very reactive, but asked for little interaction from the users. They would experience the site without the interaction being too distracting. net: Can you tell us a bit about the key design features? RM: From a design perspective, we wanted visitors to literally feel the weight of the content. Objects in space seem to float effortlessly, but reality kicks in as they rain down the page and break apart the stability of the viewer’s experience. Although our main concern was to push content forward: we asked ourselves, why couldn’t the medium itself be part of the show? In French, the term ‘mise en abyme’ expresses the placement of content in an identical container. Extrapolating from the concept, we just placed the experiences in a larger but similar ‘container’. Technically, people had to leave the main hub to land on each haiku’s page, but the team worked hard

Dpt is approached by the NFB to work on the call for proposals site

April 2014 The team starts work on design. Dpt’s creative coder researches different kinds of interactions that might be interesting

June 2014 The call for proposals is launched in English, French and German.

August 2014 Deadline for creators to submit their projects. Dpt is asked to work on the full ‘hub’ site presenting the 12 projects

September 2014 Design work starts on the hub, and goes through many iterations. The goal is to keep the design playful, but not overshadow the creations

December 2014 The beta version for the hub is released and testing starts. The 12 creators get access to the API

February 2015 The hub is launched with four projects. New projects are added every week

April 2015 The project is presented as a physical installation at the Tribeca Film Festival

december 2015 65

Showcase

How we built

Evolution

A look at the early sketches, discarded concepts and prototypes that led to the final design

(1) The art director created some sketches to get across the bouncy, jelly effect to the reluctant developer. (2) and (3) We did a number of bounce tests using PhysicsJS. (4) Figuring out how to display all the haikus on one screen, while keeping the playful shapes in the interactive ‘loop’ was a challenge. (5) We focused on displaying each haiku individually. In this scenario, a description and certain labels could be included. (6) During this iteration of the design, we still had a ‘Shuffle’ button that made the haiku projects fly through the screen horizontally, with shapes bouncing everywhere. The idea was fun on paper, but chaotic in practice.

december 2015

How we built on making sure people never really felt like they were leaving the main hub at all. Background transitions, menu options and other elements were carefully designed to ensure a coherent and contained experience. net: What software did you use? NR: We used HTML5, CSS3 and lots of JavaScript. Backbone.js for the MVC structure, TweenLite for animations, Pixi.js and PhysicsJS for physics animations. net: How did you make the animations so fluid? GT: The art director was obsessed with making everything feel like you were in a tub of gelatin, which created quite a challenge on the technical side. The creative coder was challenged with creating shapes that seemed to respect – and at times, defy – the laws of physics. Everything is coded in JavaScript, using a physics library called Pixi.js. It took a lot of testing and debugging. net: What was the most complicated development challenge? NR: The hub is a collection of 12 projects by 12 different teams from all around the world, so we needed to create an API that could be used on all the different projects, to ensure consistency across

Bouncing about As users scroll down the homepage, colourful shapes float around the screen and bounce off various objects, injecting an element of playfulness

the experience. All the creators had to do was include a single JavaScript file. This then allowed them to use simple methods to call up a share window, show the hub menu, link to other haikus and collect stats, for example. Another challenge was that we needed to encapsulate these projects inside either the NFB or the Arte framework, depending on the visitor’s location. This is usually a complicated process, but we made sure it was automated for the

creators. We tested extensively in-house on different platforms and devices, and were lucky to have the team at the NFB also do some very thorough testing and bug-tracking. net: How long did the entire project take, from start to finish? NR: The call for proposals website took about two months. The hub to present all the projects took much more time because we had to develop a framework that would encapsulate all the projects, and the navigation was more complex. In all, with all the back and forth, we spent about six months on this project. net: What was the biggest lesson you learned during the project? NR: A cross-continent project, with one producer in Canada, one producer in France and 12 creators spread around the world, is logistically complex. Basecamp was a great help to keep everyone on track and keep the communication flowing.

Design match Although each haiku is hosted on its own, separate page, the design elements are kept similar to give the visitor the impression they have not left the main hub

net: What advice would you give any studio facing a similar sort of brief? NR: We were dealing with other people’s code on top of our own, so our advice would be to give yourself a lot of time for testing!

december 2015 67

FeatureS Cover feature

december 2015

Cover feature

There are a number of ways to create responsive layouts without media queries. Vasilis van Gemert shares some useful techniques, ranging from primitive to highly powerful

Authors Vasilis van Gemert Vasilis (@vasilis) is a lecturer at the Amsterdam University of Applied Sciences. When he’s not teaching web design, he’s probably in his hammock, creating art for the web Illustration Bobby Evans Bobby is an illustrator based in north London, who has worked with clients as varied as Penguin, Habitat and Vodafone. He also runs the award-winning Telegramme Paper Co with Kate Brighouse telegramme.co.uk

hanks to media queries, we can create websites that work on any device. Without them the current web simply couldn’t work. But there are other options as well. In certain situations, a different technique can solve our responsive design problems in a more systematic, algorithmic way. If you are, like me, a lazy person, you might be interested in designing these kinds of layout systems whenever possible. Systems like these are self-governing – they have to be able to make decisions for themselves and for us, based on the constraints we give them. We’ve always been able to create flexible layout systems on the web. Even with ancient CSS properties like float you could create layouts that adapted to different screen sizes. Recent implementations of new CSS features, like flexbox and viewportrelative units, have enabled us to take CSS layout to a level of flexibility we could only dream of before.

december 2015 69

FeatureS Cover feature

Lists CSS columns are perfectly suited to lists, both short and very long

Inline-block By using float or inline-block, the layout will change by itself if the screen is big enough

Float and display: inline-block Let’s start this exploration of layout systems with a simple example. Many blogs show a list of introductions on their homepage. On a small screen you probably want to display these articles one on top of the other, but on wider screens a layout with more than one column makes sense. If you give each article max-width: 20em and tell it to float: left , the browser will simply show as many columns as possible, depending on the width of your screen. This has worked since we invented floats. Floated items do not automatically clear; they bump against higher items. This means a blog that has been laid out this way will sometimes show gaps. Depending on how you look at it, the chaos of floating things can either be a cause for concern or a wonderful, serendipitous design feature. You can think of these gaps as being chaotic, or you can call them ‘active white space’ and be very happy with them. If you don’t like white space you can use display: inline-block; . Float is a very simple technique that results in primitive yet flexible

december 2015

responsive layout systems. It works just fine without media queries, although you might want to add a few to tweak the design if needed. Bare-bones floating might not be perfect for all use cases, but it’s definitely an option worth considering.

Multi-column I’m not sure why – perhaps because of buggy and incomplete implementations

Viewport boundaries CSS columns only work for articles if the content fits within the boundaries of the viewport

Horizontal scroll CSS columns might work for articles if we can convince the user to scroll horizontally

the viewport. People simply don’t want to scroll down and up again while reading. There is a very nice and simple way to use columns in articles, but only if you can somehow convince your users to scroll horizontally. You can create a simple horizontally scrolling multi-column layout by setting the height of the article to a maximum of 100 per cent of the viewport, and by telling it to use columns of no less than

Float is a very simple technique that results in primitive yet flexible responsive layout systems. Bare-bones floating might not be perfect for all use cases, but it’s definitely worth considering – but you don’t see many websites that use CSS columns. This is a pity, since it’s a highly flexible technique. It’s perfect for lists of links, like navigations, footers, search results or photo blogs. CSS columns are almost never used for articles. They become horrible to use when the article is higher than

20em. The problem you now need to solve is how to explain to your visitors that they should scroll horizontally. You could add new UI elements to clear this up. Or if you’re lazy, you could choose to always make sure the columns never fit completely in the viewport. It’s remarkably simple to achieve this. These few lines of CSS are all you need:

Cover feature Grids and shapes

Em units Text set with em as a unit will be too big on small screens for this particular design

article { columns: 20em; /* never be smaller than 20em */ height: 100vh; /* be as high as the viewport */ width: 75vw; /* be 75% of the width of the viewport */ } There are many reasons why CSS is awesome, but the fact that the initial value for overflow is visible is definitely one of them. Without that weird but fantastic CSS property this multicolumn layout wouldn’t work.

Flexbox and the viewport Tab Atkins gave a very clear description of what flexbox is: “Flexbox is for one-dimensional layouts – anything that needs to be laid out in a straight line (or in a broken line, which would be a single straight line if they were joined back together)” That sounds a bit like float , but of course it’s much more powerful. With flexbox you can create simple looking layouts that would have been impossible a few

years ago. For instance, you can tell items what to do with any leftover white space. You can leave it at one of the ends, you can distribute it evenly between (or around) them, or you can choose to stretch the items – which basically gets rid of the white space. I used this last option to lay out the list of links to my online activities on my homepage. I didn’t want this list to be an orderly multi-column layout, I wanted the browser to simply fit as many items on each row as possible. For the first version of this design I used this code:

Not all content needs a design system. There are many things – like longer, one of a kind articles, books and magazines – that need to be carefully crafted by hand. To design this kind of content you need fine control over how things are laid out. Many magazine designers have been laughing at the web for ages, since we couldn’t use shapes to lay out text around images. Quite a few browsers have implemented CSS Shapes, which lets you create fantastic, magazine-like layouts. Layouts that use these shapes a lot will probably need media queries to make sure everything works on all screen sizes. But the things we will be able to do with them will be amazing. More and more browsers are also starting to ship experimental implementations of CSS Grid Layout. This specification lets you define table-like structures you can place your content in. Its true power lies in the fact you can visually rearrange the content in any way you want, while the source order stays the same. This in combination with media queries will allow you to create websites that present the content in a truly optimised way for any viewport. Content choreography, as Trent Walton calls it, will finally be easy to do. I’m especially looking forward to seeing the fantastic things we will start to make once we start combining CSS Shapes and CSS Grids with viewportrelative units. My mind is blown already.

ul { display: flex; flex-wrap: wrap; font-size: 2.5em; } This looks OK on large screens, but is problematic on smaller screens (see image above). I wanted all items to always be visible inside the viewport, no matter the size. To fix this, I could have used media queries, of course. But wouldn’t it be great if the browser could somehow adapt the font size

Example Here, Emil Björklund uses CSS Grid Layout, CSS Shapes, the clip-path property and more

december 2015 71

FeatureS Cover feature CSS Columns for article layout On the web we are used to scrolling from the top of the page to the bottom. This is why we never use multi-column layout for long articles. Scrolling to the top of the page is not what you want when you’re halfway through reading an article. This is unfortunate, since multi-column layouts are fantastic for long texts. There is a reason why they are so successful in paper magazines and newspapers. There are two ways to use multicolumn layout on the web. A few years ago Håkon Wium Lie of Opera Software proposed a new way of reading long articles (netm.ag/lie-274): no scrolling, but ‘paging’ – you would flip from page to page like you do in books. With this you could create the same kind of layouts that we see in newspapers, only much more flexible. Unfortunately, no browsers were interested. The other way to use multi-column layout for long articles is by making the article as high as the viewport, and scrolling sideways. The problem here is how to convince your users this is a good idea. There is a very interesting startup, Blendle (blendle.com), that succeeded in convincing its readers. With a Blendle account you can buy and read complete articles from Dutch newspapers and magazines. It uses a multi-column layout to give its site a magazinelike look and feel, and by scrolling sideways it remains usable. The result is remarkably nice to look at and to use.

Blendle This Dutch startup convinced users to scroll horizontally

december 2015

to the size of the viewport? It turns out that, indeed, you can use viewportrelative units to do exactly that.

Viewport-relative units Instead of using em and media queries to make sure our layout works in different viewports, you can use the vw unit, which is a percentage of the width of the viewport. If you set the font size

is an even bigger problem since there is no way for the user to increase the font size. Browser zoom does not work with viewport-relative units! You can make sure that the font size never becomes too small by using a calc function: font-size: calc(1em + 1vw) . This works like a minimum font size. But while this is a clever trick to make sure our text is always accessible, it

The beauty of these techniques is that you order the browser to behave in a certain manner. Instead of designing every possible layout, you let the browser and the content figure it out to 2.9vw (for example) the layout will always fit in the viewport, as you can see in the example pictured below. There is a serious usability problem with using the viewport width as a unit for text though: it can easily become too small to read on very small screens. This

doesn’t solve the problem of how I can make all the links on my homepage fill up any viewport.

Viewport calculations It’s not really possible to always perfectly fit any text into any viewport

Resizing content By using vw as a unit, we can resize the content as if it were an image

Calc plus vw If we combine calc with vw and vh units for font size, we can create text that always fills the viewport

Cover feature

Calc function If we use a calc function we can make sure the content will fill up the viewport

with just CSS, but we can come close. There’s a brilliant CodePen (netm.ag/ voor-274) where Dillon de Voor explains this line of code:

screen sizes you need to define exceptions. For these cases media queries are usually the tool we need. And they’re fantastic.

font-size: calc(4vw + 4vh + 2vmin);

Container queries

With this specific calculation, this one sentence, set in a certain font, will always fit in any viewport. For my own site I changed the numbers in this calc function a little bit, and now the layout on my homepage does what I want. The content will always try to fill up the viewport as much as possible.

Quantity selectors The beauty of these techniques – float, CSS columns, and flexbox in combination with viewport calculations – is that you order the browser to behave in a certain manner. Instead of designing every possible layout for every possible screen size, you let the browser and the content figure it out together. Of course, this doesn’t always work. Often you need finer control over the different layouts, and for extreme

Soon after we started creating responsive designs with media queries, we found out that, while they are extremely useful, they can’t always help us achieve what we want. I bet you’ve often wished something like ‘element queries’ existed: changing the way elements look depending on their own size, instead of on the size of the screen. It makes so much sense. The reason these don’t exist yet is because they could cause endless loops. What should the browser do if you tell it that elements wider than 30em should be 20em wide? The Responsive Issues Community Group has come up with a possible future solution: we can’t use element queries, but we might be able to use container queries. With a container query you wouldn’t be able to style the element itself, you could only style its children. They might look something like this:

article:media( min-width: 30em ) screen { … } The proposed syntax will probably change in the future, but the basic idea makes sense.

Quantity selectors Aside from screen size, there are other conditions you can use to style things with. There have been a few brilliant articles recently about styling things based on quantity. It turns out you can apply different styles to an element based on the number of siblings it has. This technique doesn’t use media queries or container queries, of course; it makes very clever use of type selectors. There are some wonderful and very useful things you can do with this technique. Quantity selectors are quite handy for search results, where you don’t know if there will be one single result or hundreds of them. You can now change the way they look based on the number of results. It’s handy for filtering as well, as you can see in the example

december 2015 73

FeatureS Cover feature

Resources

Container Queries

Examples in this article

netm.ag/pickering-274 An article written by Heydon Pickering

netm.ag/marquis-274 In this, Mat Marquis explains the current state of container queries

The best way to learn new techniques is by playing with them. Here’s a list of all the examples I used in this article.

A Dao Of Web Design

Grid by Example

netm.ag/allsopp-274 John Allsopp’s all-time classic about the flexibility of the web

gridbyexample.com A fantastic site with lots of practical examples about Grid Layout, by Rachel Andrew

Viewport calculations CodePen

CSS Shapes 101

netm.ag/voor-274 A brilliant mathematical explanation of viewport calculations by Dillon de Voor

netm.ag/soueidan-274 In this, Sara Soueidan explains in depth what you can do with CSS Shapes

● Floating blogs (netm.ag/floating-274) ● A multi-column photo blog (vasilis.nl/voto) ● Multi-column article (netm.ag/multi-274) ● A list of links (vasilis.nl) ● Mixing vw, vh and vmin (netm.ag/vw-274) ● Filtering with quantity selectors (netm.ag/ quantity-274) ● Playing with Grid Layout and CSS Shapes (netm.ag/layout-274)

Quantity Queries

december 2015

Cover feature

Small sizes The size of the images is small, in order to fit all the pictures of the speakers inside the viewport

Clever design By using a combination of flexbox, quantity selectors, and a few viewportrelative units, clever design systems emerge

above, in which it has been used to enable users to filter all speakers of the Frontend Conference in Zürich. Initially, the user can see all the speakers and hosts. All images are small so they fit within the viewport. But when they filter the results to only show the hosts, and not the speakers, there’s much more room. This brilliant technique gives us the possibility of filling up the viewport with just the two images. The selectors that make this possible look quite complex at first. At first, I didn’t understand how they worked at all. Luckily for us, Heydon Pickering has done a fantastic job in explaining quantity selectors in this article: netm. ag/quantity-274. article { flex-basis: 100vmax; } article:nth-last-of-type(n + 2), article:nth-last-of-type(n + 2) ~ article { flex-basis: 50vmax; } article:nth-last-of-type(n + 6), article:nth-last-of-type(n + 6) ~ article { flex-basis: 33.33vmax; }

Make some space When a filter returns fewer results, the individual images take up much more space, of course

This block of code tells the browser each article should preferably be as wide as the longest side of the viewport. But if there are two or more articles, they should be 50 per cent of the longest side of the viewport. And if there are six or more, they must be 33.33 per cent. Vmax doesn’t just fill up the viewport in an efficient way, it also changes the

New CSS features like flexbox and viewport-relative units have made this way of designing much more powerful. We’ve only scratched the surface of these super-flexible, clever layout systems. And the results are already fantastic. I’m looking forward to seeing the brilliant stuff you come up with once you start exploring the possibilities.

We have always been able to let the browser decide the layout based on a few orders. CSS features like flexbox and viewport-relative units make this approach much more powerful composition depending on the ratio of the viewport. With just a few lines of code you can now create this layout system that responds to the content and the viewport.

Is this ideal? We have always been able to let the browser decide what the layout should look like based on a few clear orders: use as many columns as needed, as long as they are not smaller than 20em. Ideal for lazy designers and developers.

Sure, these kinds of design systems can’t be used in every single use case. There are other CSS modules – like CSS Grid Layout and CSS Shapes – that give us fine control over our compositions. But whenever possible, we could let go of this control and let the browser and the content figure things out. Or, like John Allsop says in ‘A dao of web design’: let’s “accept the ebb and flow of things”. For more on responsive layouts, see p84

december 2015 75

‹‹

‹‹ ‹‹

‹‹

❤

@ $$$

‹‹

‹‹ ‹‹

‹‹

API Request

‹‹

❤❤

‹‹

❤

‹‹

❤

‹‹

‹‹ ‹‹

❤❤

‹‹

server/ data source

‹‹

‹‹ ‹‹ ‹‹ ‹‹ ‹‹ ‹‹

‹‹

‹‹ ‹‹

‹‹

App client ‹‹

‹‹ ‹‹ ‹‹

‹‹

‹‹ ‹‹ ‹‹ ‹‹

‹‹

❤

‹‹

There may be no API more responsible for the growth in publicly available APIs than Google Maps. The search giant’s geographic service is now on millions of websites and has become the de facto standard for embedding location maps. Pair its ubiquity with the rise in mobile and it becomes a necessary part of any developer’s toolbox. A basic use case is plotting places, such as local search results, as markers on a map. You might also add paths for multiple points. More advanced usage creates interactions between frontend code and the map – for example, click a search result and highlight the place on the map.

‹‹

‹‹ ‹‹

‹‹ ‹‹ ‹‹ ‹‹ ‹‹ ‹‹ ‹‹

‹‹

Maps 01 Google netm.ag/maps-274

Adam Duvander

‹‹

API Response

‹‹

ew developer tools are being released daily, and at times you’ll probably find yourself choosing between doing your real work and exploring new technologies. Among these developer tools are at least 14,000 public APIs, provided by companies to save time, directly solve developer problems or augment their popular services. While disappearing for a day or two diving into something new can be great fun, not everything immediately leads to useful results. I’ve put together a list of great APIs, based upon years of research (and a few opinions). So instead of spending the rest of your life exploring every API, you can first focus on the 15 in this article.

Adam helps developers become more productive and creative, with a special focus on APIs. He has written for Wired and served as editor of ProgrammableWeb, the journal of the API economy adamd.org

‹‹

Adam DuVander counts down the 15 APIs you need to solve the most common developer problems, so you can focus on building something new

Author

‹‹

the 15 APIs developers need to know @

‹‹

Features Second feature

Google Maps Google Maps visualisations now go beyond basic markers, as with this demo

‹‹

animating flights in and out of London

structured commands, so anyone can create voice applications

Google Maps Geocoding API netm.ag/geocoding-274

Google Maps has become a suite of APIs, but this one deserves to be called out on its own. The Google Geocoding API accepts a location name – such as an address, city, or postal code – and returns the geographic coordinates needed to plot the place on a map. There are plenty of other options, but none rival the quality of Google results at a global scale. For one, the company starts with a parcellevel lookup, then hones the data using its Street View technology. Note that if you use the Google Geocoder, you must combine it with a Google Map.

IBM Watson

developer.ibm.com/watson

Best known for beating Jeopardy champions at their own game, IBM’s artificial intelligence service is also available via API. The technology employed by Watson is broadly called natural language processing (NLP), and with it Big Blue provides developers access to years of research via simple

‹‹

Facebook Among Facebook’s developer tools is wit.ai, which converts natural language into

‹‹

december 2015

FullContact FullContact works by turning email addresses into full profiles, such as this one for the company’s CEO

RESTful calls. The company’s recent acquisition of AlchemyAPI extends the suite of intelligent calculations to include visual identification. Among Watson and AlchemyAPI’s toolset are features that allow developers to determine keywords in a block of text, extract relations and other data from any text, and even recognise faces or objects in photos. If you need some intelligence in your app, you’d be silly to build the NLP and other technology on your own. Instead, focus on what your app will do with that intelligence.

FullContact

fullcontact.com/developer

From one kind of intelligence to another, FullContact provides information about the person behind an email address. From that one piece of data you can determine full name, age, location, gender and social network accounts. The service also accepts as input Twitter username, Facebook ID, or phone number in place of email address. You won’t find a trove of data for every single email

address, but in many cases you’ll find enough to determine the user’s company and their social influence. The service is especially useful for sales, which is why you’ll also find a FullContact service for company data, a business card reader, and even a disposable email identifier. Newcomer Clearbit is making progress, but FullContact is well-funded and has a four-year head start.

05 Twitter dev.twitter.com It’s hard to argue with the immediacy of Twitter, which is why every developer should consider how to incorporate the service. Depending on your audience, Twitter may be a great form of identity, speeding up or eliminating a registration process (see Stormpath). For almost everyone, the Twitter API can help expand your reach by enabling your users to share your application with their followers. Of course, your app can only tweet with their permission, but having their credentials can speed

Second feature

Facebook

developers.facebook.com

Speaking of services with a lot of users, you’d be crazy not to give Facebook integration a shot. Again, you need to know that your audience frequents Facebook, but with over one billion active users, there’s a good chance. You can use Facebook for social login (see Stormpath), sharing and app monetisation. The company has recently restricted what data is available to applications, but still left plenty of room for a rich developer ecosystem. Further to this, Facebook has its own natural language platform, Wit.ai, and mobile backend, Parse. There’s plenty to check out in the Facebook API.

Stormpath

stormpath.com

If you’re looking to perform any kind of registration on your site, don’t reinvent the wheel. Stormpath is a secure user management API with built-in support for Facebook login (and a few others). If you’re using a social network for identity only, it makes sense to build on top of Stormpath rather than keeping up with the quickly changing social API landscape. It maintains user profiles, allows for authorisation roles, and handles forgotten password flow. Stormpath supports Facebook, Google, LinkedIn and GitHub. For Twitter support (and about 100 others), consider OAuth. io, which partners with Stormpath for its non-login features.

‹‹ ‹‹ ‹‹ ‹‹ ‹‹ ‹‹ ‹‹

‹‹ ‹‹ ‹‹

up the process when a user is ready to share. Some may remember a series of Twitter guidelines that were widely interpreted as unfriendly to developers. The company has grabbed control of its user experience, but its reach cannot be denied. Its user base makes it an API to know.

‹‹

Twitter The One Million Tweet Map uses the real-time Twitter Stream API to display new geolocated tweets

‹‹

objects within photos, and calculates a confidence score

Stormpath Add social login functionality to your application without integrating directly with multiple social networks

‹‹

Alchemy AlchemyAPI’s Vision – part of IBM’s Watson suite – recognises

Twilio believes its API is so easy that anyone can use it. That’s why every new employee, as part of their welcome to the team, prepares an app to demonstrate to the entire company. When Michael Selvidge joined Twilio in 2011, he saw his app as a chance to share his love for the American musical duo Daryl Hall and John Oates. Selvidge used Twilio’s excellent documentation to walk himself through creating a text-to-speech menuing system that would allow callers to select a song by the band to play. With that, Callin’ Oates was born. It was a huge success: thousands of people called in the first few days, with dozens of media outlets covering what Selvidge called ‘Your emergency Hall and Oates helpline’. On the first anniversary of Callin’ Oates, Twilio announced it had been called over one million times. Selvidge has also celebrated the first anniversary with a few more hotlines: Bob Dialin’ (Bob Dylan), Diamond Rings (Neil Diamond), Phil Call-ins (Phil Collins), and If You Ring Me Now (Chicago). See the original at callinoates.com or by calling 01 719-26-OATES. Alternatively, find all the Twilio fun at netm.ag/oates-274.

‹‹ ‹‹ ‹‹

Fun with Twilio

S3 08 Amazon aws.amazon.com/s3 When your app grows past the prototype stage, you’ll need storage options beyond your local machine. You may surpass the capacity of shared hosting or even dedicated drives. In certain

december 2015 79

Features Second feature cloud hosting scenarios, you won’t even have permanent storage. For a reliable, scalable file system, you need an object storage service like Amazon S3, (‘simple storage solution’). This offers handy features, including letting users upload directly to your storage bucket, and options for replication and versioning of files. Amazon is the leader, but some of its competitors have S3-compatible services. If you aren’t using Amazon for cloud computing, check with your provider, because your app may run more efficiently if it’s using object storage within the same data centre.

Dropbox

dropbox.com/developers

Where you store your files is different from where your users’ files may reside. Over 400 million users sync files across Dropbox’s servers, making it an excellent API for file access. With users changing devices, it may be more likely that a file exists in Dropbox than on the computer or other device on which they’re using your app – bypass file

upload by connecting to their Dropbox account. Developers have built image gallery services, static site hosting and simple alternatives to file upload using Dropbox. For apps with an enterprise focus, consider Dropbox for Business or the company’s rival Box.

Apps 10 Google developers.google.com/google-apps With millions of organisations using Google Apps, you may find yourself helping out non-technical co-workers who use them in their workflow. For example, when new items are added to a spreadsheet, perhaps you send an email or add someone to your beta version. Many of these processes can be automated using tools like Zapier or IFTTT. For others, you can integrate Google Apps into your company’s systems using this API.

Stripe

stripe.com

If the past few years have shown us anything, it’s that if you want to collect

payments, you need to use Stripe. The startup has proven that clear, friendly and interactive documentation leads to incredible levels of adoption. PayPal’s Braintree has made excellent progress, but if you’ve already selected Stripe, you might as well take a half day (or less) to learn its API. At its heart, Stripe has a simple use case: accept payments from customers. The API opens up many more possibilities. Using its webhooks, you’ll be able to automate communications and customer onboarding (and off-boarding). Goodbye manual tasks!

Twilio

twilio.com

Often uttered in the same breath as Stripe, Twilio is another developer favourite. The telecommunications company provides a simple, welldocumented API for voice and text. Send or receive phone calls, SMS text messages, MMS images and more. You can build with Twilio as the basis for your app or as a valuable addition (such as two-factor authentication).

‹‹ ‹‹ ‹‹

‹‹

‹‹ ‹‹ ‹‹

What is a Webhook? Many of these APIs provide real-time updates via webhooks. Rather than calling the API periodically to check for new data, you supply the API provider with a URI on your server to receive updates. Often the accompanying changes are sent as part of the webhook, but at a minimum you’ll know when you need to connect to the API for the latest changes. The alternative is called ‘polling’, and can be time-consuming and expensive for both your applications and the provider’s servers. Webhooks are at the core of services like Twilio, which need to alert your applications when new phone calls or texts arrive. Choosing APIs with webhooks can make your application more reactive, reduce API calls, and give you plenty of opportunity to create automation to save hours of manual work. Amazon S3 SmugMug is a photo sharing product that uses Amazon S3 for storage so that it can focus on building visualisation and sharing tools

december 2015

‹‹

A dev’s best friend

‹‹ ‹‹ ‹‹ ‹‹ ‹‹

These and other APIs will help you supercharge your abilities. With repetitive problems taken care of, you’ll be free to focus on the part of your job that only you can perform. You may not find yourself using all 15 of these right away, but take the time to have at least some familiarity with the APIs in this article and you’ll be ready when your next project requires one of the 15, or a similar service. Read some documentation, try out some code, and see what’s possible. For a printable cheat sheet and more resources to get started, visit everydeveloper.com/15apis.

‹‹

sendgrid.com/docs

Transactional email is different from marketing email in that it is typically one email sent at a time to a single recipient. The message is highly targeted, with common examples being receipts,

‹‹

SendGrid

Collaboration has always been important within organisations, but increasingly distributed workforces are pushing the toolsets virtual. Slack, net’s Game Changer of the Year 2015, has become the popular choice for company chat (as well as knowledge and file-sharing). Whatever tool is at the centre of your collaboration, you want to be able to write code against it. Slack has a handful of built-in integrations, such as GitHub

‹‹

15 Slack api.slack.com

and Travis, but also provides an API for your own applications. You can listen for real-time events, access channel history and files, and post messages with bots. You can even incorporate build and deploy workflow into Slack so everyone is on the same page. HipChat is a competitor with similar features, but current momentum is in Slack’s favour.

‹‹

If your team is larger than just a handful of people, those sending marketing email are unlikely to be technical. It’s a controversial thing to say to developers, but you really should let marketers choose their own tools. Millions have chosen MailChimp, which is why it’s an API you should know, too. No matter what marketing email API you support, look in the docs for list management features and webhooks (see boxout opposite) to provide realtime alerts for as much functionality as possible. At a minimum expect notifications for unsubscribes, so you can build clean list management into your applications.

password resets, account confirmations and social notifications. SendGrid was the first to bring transactional email to developers. Its offering has since expanded beyond email delivery to include real-time email data (via webhook), triggered responses, and even some marketing features. At the very least, any app with user accounts or ecommerce will need to send transactional email. SendGrid has plenty of competitors, but the most well-known is likely MailChimp’s Mandrill.

Second feature

‹‹

13 MailChimp kb.mailchimp.com/api

‹‹

‹‹ ‹‹ ‹‹

Dropbox For the most common use cases, Dropbox uses

MailChimp Before you code something against MailChimp, make sure it isn’t one of the over 750 integrations that

SendGrid SendGrid’s Code Workshop generates code in your favourite language from a fillable form

likely to make you smile (ledhack.org/imma-let-you-finish)

‹‹

Slack There are plenty of productive Slack integration examples, but random interruptions from Kanye West might be the most

‘drop-ins’ that let you integrate with minimal code

‹‹ ‹‹ ‹‹ ‹‹ ‹‹

has already been built

‹‹ december 2015 81

‹‹

next month

The proâ&#x20AC;&#x2122;s guide to UI design

We reveal the best tools and techniques you need to design cutting-edge user interfaces

PLUS Build better site layouts with CSS flexbox

Create a custom loading animation with After Effects

Boost your workflow with the WordPress REST API

ISSUE 275 on sale 26 November 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

Tips, tricks & techniques

This month Featuring...

FLEXIBLE LAYOUTS WITH SUSY AND BREAKPOINT

Head to head: Sass versus PostCSS

Read local files with the file API

104

Create a consistent icon set in Sketch

Build a data dashboard with AngularJS

Explore Wordpress’ free theme options

108

Open up your design process with wake

Web standards: :has()

Desktop

Mobile/tablet

103

Accessibility: The cost of Accessibility 114

Browser support

Exclusive videos

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

Look out for the video icon throughout our tutorials. This issue, three authors have created exclusive screencasts to complement their articles and enhance your learning, including Nick Moreton’s guide to building a data dashboard with AngularJS, and Fabio Benedetti’s tutorial on designing icon sets in Sketch.

december 2015 83

PROJECTS Sass

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

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

Ray Vil l a l obos w: raybo.org t: @planetoftheweb job: Staff author, Lynda.com areas of expertise: Full-stack design and development, frontend design, JS, AngularJS, Sass, Bootstrap q: what gadget would you have trouble parting with? a: I still have my very first 512K Fat Mac. It still works and I’m never letting go

Sass

Flexible layouts with Susy and Breakpoint Ray Villalobos explains how to create semantic, flexible and backwards-compatible layouts with Susy and Breakpoint

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

Creating responsive layouts can be challenging because of the maths involved, so it’s common for designers to turn to frameworks and/or Sass to simplify the process. A lot of frameworks are based on a 12-column grid, but a responsive site doesn’t always fit into this structure. Here, I’ll show you how to use two Sass extensions to create truly flexible layout that transcends the 12-column grid.

The problem Designing responsive layouts can be tough, as it involves calculating the width of containers, rows, columns and gutters at different breakpoints. Frameworks can help by creating presets for common breakpoints. Bootstrap 3, for example,

december 2015

gives us a 12-column grid with four media query breakpoints. You then use classes that cause your content to take up a certain number of spots in the grid, and the gutters always take up 30px. This works brilliantly most of the time, but there are two problems. First, adding these classes to your markup can get a little verbose. Say you want a layout that uses all the columns on mobile devices, six of the 12 columns on small devices, and four on medium devices. That markup might look something like this: <h2>Services</h2> <div class="row"> <article class="service col-md-4 col-sm-6">

Sass

Focus on

What about Flexbox? Bootstrap grid In a simple Bootstrap 3 layout with just three breakpoints (two shown above), there are classes that don’t add semantic value

<img class="icon" src="images/icon-exoticpets.svg" alt="Icon"> <h3>Exotic Pets</h3> <p>We offer specialized care for reptiles, rodents, birds, and other exotic pets.</p> The second problem is that these classes add layout information to your HTML and make your code difficult to update, especially on a large installation. As your layouts get more complex, you might end up with some code that looks like this: <div class="photo col-xs-6 col-xs-offset-3 col-sm-3 col-smoffset-1 col-md-2 col-md-offset-2 col-lg-4 col-lg-offset-0"> The larger issue is that you have little flexibility. Your framework should take care of the maths,

Susy’s simple promise is to let you worry about the design while it takes care of the maths

Flexbox is the future of layouts, so why not use it instead? Most of us should use progressive enhancement to support older browsers. If you need to support IE8 or 9, it’s better to produce code that lays things out with a traditional model. The reason most people use flexbox is because it can be simpler to understand than the box model, but a layout system like Susy can provide a flexible and responsive grid that adjusts to different breakpoints and is relatively straightforward. What’s more, some users have reported slowdowns in performance at scale when using flexbox for laying out pages. It has also seen a lot of changes since its inception, so users are required to to work with several implementations of the spec, plus have a strategy to insert browser prefixes for older browsers (caniuse.com/#search=flexbox). In a serious progressive enhancement implementation, you’re still going to need to have a strategy for dealing with legacy browsers. Although tools like PostCSS and other are starting to simplify this process, using Sass with Breakpoint and Susy is much simpler to learn and implement. They also offer the backwards compatibility you need, without the hassle of dealing with flexbox plus the box model. Learn about flexbox and experiment with it for the time being, but it might not be the right solution for production layouts at the moment.

because that’s the hard part, but it shouldn’t be dictating the metrics of your layout. Who made these frameworks the boss of you?

Susy Susy’s simple promise is to let you worry about the design while it takes care of the maths. At its core it’s a set of Sass mixins for calculating widths in a completely flexible grid system (susy.oddbird.net). Start off by importing the library into your project via an import command: @import "susy"; . This gives you access to Susy’s grid framework, which couldn’t be simpler to implement. In its most basic form, there are just two mixins you’ll need to learn. First is the container mixin.

Enter Susy Susy is a series of mixins for Sass that takes care of the maths for any layout grid, so you can focus on the design elements

december 2015 85

PROJECTS Sass

In-depth

Create an image gallery quickly Need to create an image gallery or quick grid? Susy comes with a gallery mixin that makes that a cinch – just target your img tags and use the @include gallery mixin. You can easily create a four-by-four grid of images using the following: .gallery { @include clearfix; img { border-radius: 20%; display: none; @include breakpoint($small) { @include gallery(1 of 4); display: inline; &.hidesm { display: none; } } //breakpoint @include breakpoint($medium) { @include gallery(1 of 5); display: inline; &.hidesm { display: inline; } } //breakpoint } //img } //gallery With this layout each image takes up one of the four columns on the grid by default. I’ve also set up three different scenarios for my grid. On a mobile device, we hide the images to provide quick access to the content. At a $small breakpoint, we set up a four-column grid and through an additional class of .hidesm on the fifth image, we prevent the last image from displaying. At a larger breakpoint, we switch to a five-column layout and display the additional image in the fifth column. This is by far the quickest way to create responsive image galleries with a minimal amount of code.

Percentage width The welcome section on this site uses Susy’s flexible containers set to a percentage of the width of the viewport

Containers Containers help you control how the width of an element adjusts to different breakpoints. With Susy, we can redefine the containers inside any element at any time, without having to add any additional classes to our HMTL code. Let’s say I’m laying out a different website. If I want to create a container within an HTML element, I can add an include within my declaration, like this: #welcome { article { @include container(70%); } //article } This will make the item with a class of section work like a bootstrap container, without having to add a .container class into our HTML – meaning our HTML can be a lot more semantic. <div class="scene" id="welcome"> <article class="content"> <h1>Welcome to the Landon Hotel</h1> <p>The original Landon perseveres after 50 years in the heart of West London. The West End neighborhood has something for everyone&mdash;from theater to dining to historic sights. And the not-to-miss Rooftop Cafe is a great place for travelers and locals to engage over drinks, food, and good conversation.</p> </article> </div> In addition to making my HTML a lot more readable, this makes things easier to update. When we use classes like content and scene , it’s easy to redefine what those elements mean in terms of layout, instead of having to think about how many classes we’ll need to add in order to make our content behave the way we want it to.

december 2015

Sass Spans In Susy you create rows and columns using spans. To create an element that takes up one of three columns, you can write something like this.

mixin, and that container will lock on at 60em width, with gutters that are a quarter of the size of the columns. If we wanted to fit our earlier sections to this grid, we could write the declaration like this:

#usefulinfo { section { @include span(1 of 3); } }

#usefulinfo { section { @include span(4); } }

Any element in my layout can take up only the amount of space I need at that time What’s really great about this is that we never have to conform to a specific number of columns and then adjust the elements accordingly. Any element in my layout can take up only the amount of space I need at that time. This really changes the way you think about columns. If I was using Bootstrap, I would write the above code as .col-sm-4 since one third of 12 columns is four. With Susy, I don’t have to think about how many units I want to span; I can simply specify the amount of space I need. When you’re no longer thinking about the conversion to a specific number of columns, you can focus on what the layout should look like instead.

Setting up defaults Of course, in any layout system it’s good to have defaults, so we don’t have to specify the size of our gutters in every instance. We do that by modifying a variable called $susy at the top of our Sass: $susy: ( columns: 12, container: 60em, gutters: 1/4, gutter-position: inside ); Susy has a ton of defaults you can use to set up your default grid, but this basic set-up will take care of putting together a standard Bootstrap-like default. Don’t forget, everything in Susy is customisable so you’re never married to any of these, and can change them on a tag-by-tag basis. The default grid will now have 12 columns when we use the @include command in the container

This means each section takes up four of the 12 columns. However, I think it makes more sense to be able to say that an element takes up ‘one of three’ columns. If you need to offset columns to a certain position, you can use this notation: @include span(8 at 4 of 12); This lets an element take up eight columns, starting at the fourth position in a 12-column grid. So when you’re creating a layout, you can focus on what your content needs to do instead of how the design fits into your existing grid.

Padding Columns Another way to control the placement of your elements is by padding your columns. This adds a number of column spaces on either side of your columns. For example, you could move a column seven units to the right and pad it one unit from the left, like this: @include pad(7,1); This means that in addition to laying things out by thinking about positive spaces (how many columns an element should take up), you can do the reverse and create designs based on the spacing on each side of your content.

Span statements Using a simple @include span statement, we can set up each of the containers to fit into a custom, three-column grid

december 2015 87

PROJECTS Sass Managing Media Queries Focus on

Visualising your grids

In Susy, you can add a special variable called debug to your settings. This will enable you to visualise the grid in your layouts. Let’s take a look at how it works. $susy: ( columns: 12, debug: ( image: show, color: rgba(196, 34, 111, .25), output: background, toggle: top right, ), ); You can pass along four different parameters to these settings. First is settings, which will determine the type of visualisation you get. You can use show or hide to toggle the grid on or off, show-colums to show only the horizontal grid columns or show-baseline to show only the baseline grid. By default, the visualisation will display with a semi-transparent blue background, but you can modify the colour variable to change this. Output controls whether the grid displays in the background of the element or as an overlay on top of the content. Finally, Susy can generate a toggle to display the overlay while you hover over an element. You use the toggle option to describe where you want to display the toggle. The visualisation will show you the default grid, but you can modify the display of the grid on an item-by-item basis by adding a different include within your content, called show-grid(4) :

To make things truly responsive, you need to be able to combine column set-up and design with responsive breakpoints. To do this, we can use another set of mixins from a library called Breakpoint (breakpoint-sass.com). Breakpoint makes it easier to handle media queries in your layouts. It does so by simplifying the language you need to use to create media query breakpoints. Traditionally, you create these using a rule like this: @media (min-width: 34em) and (max-width: 62em) { .container { ... } } This creates a range of widths in which the declarations have an impact on your layout. Breakpoint encapsulates the calls into a commonsense mixin that’s much easier to write: .container { @include breakpoint(34em 62em) { ... } } The call is different too, because we can easily assign this inside an existing class. The great thing about Breakpoint is that it makes assumptions based on common layout needs. Breakpoint rules are easy to learn too. There are just three things you need to know:

1 I f you only include a single number in the breakpoint call, Breakpoint will assume a min-width media query call 2 I f you include two numbers, breakpoint will assume you want to specify a range between the two numbers (as in the previous example)

.container { @include show-grid(4); } It’s great for previewing the grid while in development, but don’t forget to turn this off as you publish to production. Negative space Using the pad include, it is possible to lay out your content based on negative space

december 2015

Sass 3 I f you include two values and one is a string, it assumes you are sending the mixin a feature value pair, so if you want you can still send in orientation or any other special media query rule Breakpoint has been folded into Susy since version 2.2.1. The Susy version works just like the Breakpoint mixins, but instead of calling breakpoint , you use susy-breakpoint . The same call would be made like this: .container { @include susy-breakpoint(34em 62em) { max-width: 50%; margin-left: auto; margin-right: auto; } }

Breakpoint and Susy When you combine Breakpoint with Susy you get a flexible grid that can easily adjust to different media query declarations. Let’s take a look at the HTML for the information section on a site. <div class="scene" id="hotelinfo"> <article id="usefulinfo"> <section id="arrivalinfo"> </section> <section class="checklist" id="services"> </section> <section class="checklist" id="accessibility"> </section> </article> <article id="greenprogram"></article> </div> Combining Susy and Breakpoint, we can create media queries that contain different grid layouts. In my layout I have three different sections, but I want them to have different rules depending on the width of the viewport. At these two different breakpoints, our layout behaves dramatically differently. In the larger breakpoint to the right, each section takes up three columns. In the smaller breakpoint, the first column takes up 100 per cent of the viewport, but the other two take up half of the viewport. This is what makes these mixins so powerful. The code for expressing these two layouts is concise: section { @include susy-breakpoint(650px) { @include span(1 of 3); } //breakpoint

Make a move At two different breakpoints our layout behaves differently, but this is fairly easy to express in Sass with Susy and Breakpoint

@include susy-breakpoint(450px 650px) { &.checklist { @include span(1 of 2) } //checklist } //breakpoint } //section First, we set up defaults for any element in a section tag. If those elements reach a viewport that’s greater than 650px, they will occupy a threeunit grid, with each taking up a single unit. If the layout is between 450px and 650px, the elements with a class of .checklist (the service and accessibility sections) will fit into a completely new grid with only two columns, and each element will take up one of those units. The arrival information takes up 100 per cent of the grid between these two breakpoints. Notice we didn’t specify what happens below 450 pixels. This is taken care of by the defaults – each section will take up 100 per cent of the viewport.

Mastering Layouts with Mixins What these two mixin frameworks give you goes beyond the code you use to create the layouts. The ability to express your layouts without having to worry about this grid or that grid changes the way your brain works when designing projects. Don’t get me wrong, I love frameworks. Bootstrap can help you create layouts with unprecedented speed. It offers a battle-tested grid that goes beyond layout to provide all kinds of CSS and JavaScript components to quickly handle common elements like tables, modals and forms. What the system of design I’ve outlined does is change the language you use to describe a layout. It’s a natural, backwards-compatible and easy to learn system that will change the way you think about designing websites.

Res ource Eric Suzanne, the developer behind Susy, has a collected together a great list of tutorials and videos to get you started. Check it out at susy.oddbird.net/demos

december 2015 89

PROJECTS Sketch

winner

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

Fabio Benede t ti w: fabiobenedetti.co.uk t: @cocorino job: Senior designer areas of expertise: Visual design, UX, UI, branding, icon design q: what gadget would you have trouble parting with? a: I still keep some old Kidrobot vinyl toys on my desk. Some of them are 10 years old now, and I love them dearly

Sketch

Create a consistent icon set in Sketch

Fabio Benedetti walks through how to create a neat, consistent collection of webmail icons in Sketch

Video Fabio Benedetti has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/ sketchvid-274

Nowadays, your typical web or desktop app looks sleek and tidy. And that’s what the average user expects it to be, too. Think about Things by Cultured Code, Dropbox or Fantastical by Flexibits. What do they all have in common? A nice UI and a consistent and appealing icon set. A good icon set may often be taken for granted, but a bad one is immediately noticeable. Creating an icon set may seem like an easy task, but it poses quite a few challenges. Many designers find it easier to design a unique icon rather than creating an icon set. That’s because a set of items presents a different type of rules. All icons need to work together as a team: you need to consider

december 2015

the weight, the strokes and the shapes in order to achieve a consistent result. This process may take a few iterations to get to your desired result, but it’s rewarding and interesting. For this tutorial we are going to use Sketch. Although you can choose whichever vector programme you like, Sketch is a great option. It is primarily designed to be a graphic application for web and mobile designers, UX designers and icon designers, and is becoming a solid alternative to the most common screen design software. The application looks and feels great, is well designed, and easy to learn if you come from other design tools like Illustrator, Fireworks or Flash.

Sketch

Step 1 Launch Sketch and create an artboard

Step 2 The plus icon is composed of two narrow rectangles with rounded corners

position and the background colour and select the features you prefer. In Sketch, you can work with multiple artboards. This is extremely handy for projects that have different views (for example a UI view and an icon view). This icon set is designed to fit a webmail UI, and we will be designing a set of six consistent icons. There will be the plus icon (indicating ‘more’), a bin icon (delete), a bell icon (notification), a mail icon (refresh and get emails), a pen icon (write a message) and a back arrow icon (previous email). Let’s start with the plus icon. Insert a rectangle ( R ) and draw a rectangle of 100 x 20px, then modify the radius to 40 so you have rounded corners.

Step 1 Select Artboard from the dropdown menu in the top left

Launch Sketch and create an artboard ( A ). Draw an area with your mouse or Wacom pen on the canvas – you can tweak the dimensions afterwards in the inspector panel on the right-hand side. You can also change the

Now you can copy and paste the same rectangle with rounded corners, and change its rotation to a 90 degree angle. You can do that through the Inspector panel, under Transform. The icons we are creating are all vectorbased, so we can adjust the size later by increasing or decreasing their dimensions. If you are used to working with rulers, adding them in Sketch is simple ( View > Canvas > Show Rulers ). You can click anywhere on the ruler to add manual guides, and they’ll stay visible as long as the rulers are visible.

Let’s group the first plus icon in a folder – this is how Sketch will display items when you hit cmd+G . In the Layer panel, you will see a folder with two separate items (rectangles) that are still individually editable. This is handy if you want to tweak the shapes afterwards – for instance, to remove round corners or modify the radius.

Expert tip

Illustrator Compatibility If you feel more comfortable designing your set of icons in Adobe Illustrator, that’s not a problem. You can design every vector shape in Illustrator and just copy and paste into Sketch. The two pieces of software are similar in terms of workflow, and Sketch will recognise the shapes you’ve created in Illustrator like a charm.

Let’s move on to a more complex icon: the bin. The primary shapes are similar to the plus icon, which is the reason why we started with the plus. Draw a Rectangle ( R ), roughly 15 x 84px. Copy and paste the same shape and start building the body of the bin.

Step 4 After you’ve grouped your plus icon, the two rectangles will remain editable

december 2015 91

PROJECTS Sketch We will have to set the radius to 40 here as well, to keep the set of icons consistent. We can keep going and use the same shape again for the body of the bin icon, simply by rotating it by 90 degrees. For the handle at the top, keep the same radius, and the angles will come out smooth and tidy. The rectangle at the top of the bin is 65 x 15px – basically 40px shorter in width than the base of the bin, which is 105px.

The bin icon is slightly more detailed than the others. If you want a more simplistic approach, you can leave the surface blank, but instead let’s give it a final touch here by drawing ‘dents’ in the middle, to mimic the surface of a real bin. Part of this icon, as well as the plus icon, can be re-used later on in the tutorial.

The second icon of our set is ready; let’s move on to the bell icon, which is more complex again. We want the icon to fit into the same surface area on the screen. To ensure this will work, we can draw circles on top of each icon that will function as guides. We can position the circles a distance of 70px from each other. This way when we finish the set, we’ll have a nice row of horizontally aligned icons, each of which occupies the same space on the screen.

Step 7 Add a final flourish to the bin icon with two ‘dents’ on the side

If you are used to Illustrator, this step is going to be fun: draw a simple circle ( O ) 89 x 89px.

You will now have a horseshoe shape that needs to be tweaked and transformed into a bell. In Sketch, select a shape and then press Edit in the toolbar at the top so the anchor points of the shape become visible. You will see a round point in each of the corners. By clicking any of these points and dragging them around, you can change their position. You can drag the anchor points and change the height of the bell too. Pretty handy!

Step 10 With anchor points visible, you can click and drag to change the shape

Then, go to Borders in the Inspector Panel and select ‘Inside Position’ with 15 thickness. This value is important – when we were drawing the rectangles for the bin, the shapes were 15px wide. This value needs to be the same in the bell, so the outlines will look consistent. Zoom in and draw a rectangle on top of the circle, then hit ‘Union’ from the top menu.

We can use the same shape that formed the bottom of the bin lid (about 105px in width) to design the bottom of the bell. The next step is to draw a full circle, cut it in half and centre it. This will represent the clapper inside the bell – it’s just a tiny detail, but useful in making the

expert tip

Combining Shapes Sketch features four main options to deal with shapes: Union, Subtract, Intersect and Difference. When you combine two shapes, they are put together in a sort of layer group. You can still modify and change each shape individually before pressing the ‘Flatten’ button on the top menu bar. If you keep your layers and folder organised, you can iterate and change every small detail.

december 2015

Step 12 The mail icon is made from two identical squares in different rotations

icon recognisable. You can also add a notification sign at the top by using a full circle filled with red. The notification icon will alert the user to a new message or any other related activity. The mail icon is an interesting one. Although it may seem more complex than the others, it is actually one of the easiest. Draw a rectangle ( R ) sized 110 x 110px. The corner radius will be only 20px in this case – we don’t want the rectangle to look too rounded. Copy and paste the shape, and rotate the new one 45 degrees anti-clockwise. Copy and paste the first rectangle again and then intersect the rotated one to give the envelope flap.

So far, we have been keeping the shapes separate in the layer list for each of our icons. In

Sketch

Step 14 The ‘new note’ icon looks like a pen on a piece of paper

The last icon (previous) can be easily made using the plus icon as a starting point. Use the same thickness as the plus icon to create an arrow pointing towards the left. To do that, we can take exactly the same plus icon and rotate it by 45 degrees. Then we can adjust the width of the sides of the arrow, tweaking each rectangle individually.

Step 13 It is possible to flatten your shapes to combine them into one path

Sketch, when you combine two shapes, you can still tweak each shape separately until you press the Flatten button in the Toolbar. When you flatten a shape, Sketch will combine the multiple paths inside the shape into one path. Some people prefer to use flattened shapes, but there is no real need for that here. Let’s focus on the last two icons. The pen will look like a rounded pen on a sheet of paper. For this, let’s use a rectangle of 30px width and rotate it 45 degrees. To make the top slightly rounded, let’s draw another rectangle on top of it, 24 x 24px. We’ll put the radius at 5, to make the shape nice and smooth. We can use the same shape we used for the bottom of the bin lid to create a sheet supporting the pen.

The ‘previous’ icon could easily be flipped horizontally to also create a potential ‘next’ icon. The roundness of the arrow is exactly the same as the plus icon.

Step 16 The ‘previous’ icon uses the components of the ‘plus’ icon

Now we just need to make sure these new icons fit in the guideline circles, like the rest of the set. We now have a full set of six consistent icons to be used in a user interface for a webmail service, but we also have a solid foundation for building other icons that can fit in the same set. What’s next? We can now extend this icon set or create the same one in different sizes for different purposes. In Sketch, we are dealing with vector shapes so it will be easy to adjust the size of each icon. Enjoy!

Expert tip

Consistency is key Consistency is the main focus here. You can iterate a lot on the same icons and shapes, and I always think this is a great idea. Some icons need thinking about more than others, but the efforts will pay off. When you create a set of icons, the consistency between them is the first thing that people will notice.

Step 17 Our six icons are now ready for use in a webmail application

december 2015 93

PROJECTS Process

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

Da niël va n der Winden w: bakkenbaeck.com t: @dvdwinden job: Digital designer, Bakken & Bæck areas of expertise: Digital design, prototyping q: what gadget would you have trouble parting with? a: I have my first, green iPod Mini lying around somewhere. It’s too damn iconic to throw away, and it was my gateway drug to gadgets, so to speak

Process

Open up your design process with Wake Wake is a tool that makes sharing work and getting feedback

simple. Daniël van der Winden shows you how to get started

Res ource If you have any questions about how to use Wake, visit support. wake.io, and the team will be glad to help

As designers, sometimes we’re too busy perfecting our work to share it with others who can help make it better. Over the past two years Chris Kalani and digital agency Bakken & Bæck have been building Wake (wake.io), a tool that makes sharing work in progress and getting feedback dead simple. “Even though we’re more connected than ever before, the majority of our design process remains isolated from the rest of our team,” Kalani says. “We believe access to the creative consciousness of your team will lead to more innovative design solutions. We want to change the way people make decisions by providing a place where raw ideas have a chance to evolve.”

december 2015

Sharing your work is important. The ideal design process involves consistent and frequent feedback. It forces you to articulate your thoughts and helps you make better design decisions. “We want to get designers’ ideas out into the open, not only for the sake of the project, but also to make sure they learn more,” says Kalani. “We do our best work when someone else has a chance to pick it apart and offer a fresh perspective.” Wake can help give designers a louder voice than they already have. To pitch an idea, you don’t necessarily have to take time out of someone’s day for a meeting. Share your idea on Wake and it might gain momentum within the organisation if other people pick up on it.

Process

Get started Getting started with Wake is easy – we’ve made sure Wake fits right into the designer’s workflow. “Removing the friction that goes into sharing is key,” Kalani says. “We don’t want people thinking too much about how to organise things, or who they’re sharing with.” First, get a team administrator to invite you to your design team on Wake. The invite will be sent out via email. Click the link in that email, or simply sign up via teamname.wake.io/join.

Mac app, shortcuts and notifications If you’re new to Wake, it’s best to start by downloading the Mac app via the Wake website. Then set a shortcut of your choosing via the Preferences panel, for uploading a screenshot or the content of your clipboard. Uploading doesn’t get easier than that. There’s a Sketch plugin available to install from the Preferences panel as well. Install that and you can upload your artboards directly from Sketch with cmd+shift+W . Your uploads will end up in a gridded feed, along with the uploads from the rest of your team.

Over time, the Wake feed turns into a great overview of sketches and design iterations Over time, the Wake feed will turn into a great overview of rough sketches and design iterations. Everyone on the team can comment on each other’s work, and the app supports desktop notifications so you’ll know when another team member has left a comment on your upload. This makes giving and receiving valuable feedback a whole lot easier. You can customise the number and type of desktop notifications you receive by diving into the Mac app’s Preferences panel. For example, I only get notified of mentions and comments on my own posts.

Everything is searchable After uploading your work, browse to teamname. wake.io. You’ll see your upload has appeared there. Click it and type a fitting description in the sidebar to the right. Make sure to tag the work properly. We tag uploads with #projectname. Every tag becomes a searchable collection of work. This

Instant inspiration Wake collects your team’s shared designs in a handy feed, which you can browse whenever you like

way, other team members can closely follow the progress of a project by simply typing #tagname in the search bar. New employees can dive in and see how a project evolved, from the start right up to where it is today.

Wake on the go Download the iPhone app to upload photos directly from your phone. This is very convenient when you’ve sketched something out on a piece of paper or a whiteboard. You’re able to scroll through the Wake feed from your phone and you don’t have to miss a discussion while you’re on the go. Tap new work and comment away! To increase Wake’s visibility within your company, Wake can also be integrated into Slack. It will post all new activity – uploads and comments – to a channel of your choosing, like #design or #critique. This integration nudges people to provide feedback on other people’s early work more often; from their desks, as well as from their phones.

Begin sharing Wake doesn’t just work for large design teams. “We have a lot of independent designers who use Wake to document their own process, ” reveals Kalani. “In doing so the rest of their collaborators still find a lot of value in seeing the progression and thought process.” If your team is not on Wake yet, sign them up via wake.io/signup. Breaking the ice and sharing your own work will usually get others to follow suit. If Wake becomes the place where everyone is able to see new, fresh work, your team will definitely continue coming back. Try it out with a few projects for a while. Upload your work in progress, and new ideas regularly and we guarantee you’ll love it.

december 2015 95

You’ve found your passion. It’s time to develop it. ST R E N GT H E N YO U R T E C H S K I L L S .

Advance your tech, creative and business skills with on-demand video courses taught by world-class experts. Learn online anytime, anywhere.

TRY IT FREE FOR 30 DAYS AT LYNDA.COM/NETMAG

Head to head

HEAD TO HEAD

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

Ma x S t oiber w: mxstbr.com t: @mxstbr job: Frontend developer areas of expertise: Frontend development, web tools q: what gadget would you have trouble parting with? a: My Mi Band

Sass vs PostCSS

Max Stoiber compares the benefits and drawbacks of Sass and PostCSS for transforming your CSS Sass

Actively developed for eight years now, Sass (sass-lang. com) is one of the most mature extension languages for CSS, and an industry favourite. It adds features and abilities like variables, mixins and loops. Although it originally used an indented syntax, Sass’ default syntax today is exactly like CSS.

PostCSS Created by Andrey Sitnik at Evil Martians, PostCSS (github.com/postcss) is, in essence, a wrapper for plugins. It exposes an easy to use, but powerful API. Using this API, developers can write small modules to transform CSS. This allows them to add features like variables, inline images and much more.

Usability If you know CSS, learning Sass is just a matter of understanding what it can do. Since every valid CSS file is a valid Sass file, you can simply enhance your CSS with variables, loops and so on.

Since PostCSS does nothing on its own, you have to find plugins that add the functionality to your CSS that you need. This makes getting started a bit tedious, because you need to do some digging.

Extensibility To add a new feature, you must first submit a feature request. The core team then thinks about the idea. If they approve it, you can code it out and it will get included in the next release.

To extend PostCSS, you simply write a module that uses the API to change something in the CSS. This allows for features like automatic prefixing based on up to date browser usage data.

Maturity Sass has been around for several years, and has a strong, core group of developers and supporters. It is still actively improved and has more than 170 releases under its belt. Bugs are a rarity and the documentation is excellent.

Fact file Alternative Less (lesscss.org) is another popular CSS extension language. While the fundamentals are similar to Sass, there are some syntactic and functional differences, like @variable instead of $variable , and selfreferencing loops.

PostCSS was first released two years ago. It is sponsored, so continued development and support is ensured. Already there is a big ecosystem of plugins and developers around it, and it looks like PostCSS is here to stay.

Performance Even though libsass, a C/C++ port of Sass, brought big performance improvements over the original Ruby implementation, compilation times are not perfect yet. The core team is working to improve this.

One of the biggest strengths of PostCSS is the performance. It is three-to-30 times faster than other popular preprocessors; a massive improvement if you have to compile thousands of lines of code.

Verdict PostCSS has the potential to add features that Sass cannot have. Compilation times are better, but it still is a new project. This means it is a bit more prone to bugs than Sass, which is also easier to get started with. PostCSS makes up for that with a big ecosystem of plugins and developers. For me, the winner is PostCSS.

december 2015 97

PROJECTS JavaScript

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

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

Nick More t on w: codepen.io/nickmoreton t: @ngmoreton job: Lecturer, Birmingham City University areas of expertise: HTML, CSS, JavaScript, AngularJS, WordPress q: what gadget would you have trouble parting with? a: I have a four-track tape recorder that hasn’t been used in over 15 years. I just can’t bear to throw it away!

Javascript

Build a data dashboard with AngularJS Nick Moreton shows you how using AngularJS values directly

in your HTML can make building data visualisations fast and fun

Video Nick Moreton has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/ angularvid-274

As soon as I began playing around with AngularJS, it struck me that its ability to grab data and use it directly in markup could offer great possibilities for data visualisation. This approach could present a really quick and simple way to create data visualisations from scratch, rather than having to rely on a separate library. In this tutorial we will start to build a data dashboard for a web app – in this case a RunKeeper clone called ‘JogTracker’. We will progress from using Angular values in HTML style, to inline SVG, before utilising the conic-gradient() polyfill. For me, the most appealing part of this technique is that you can start building data visualisations with even the most limited JavaScript knowledge. We will be largely using our script file to hold data,

december 2015

so if you can write JavaScript objects, you will be well on your way.

App setup For this prototype I am going to let Bootstrap do the heavy lifting when it comes to style and layout, so we can focus on the Angular-specific code. I will assume you have included the Angular library in your HTML, and have set up and linked your Angular app (see the example code at netm.ag/angularcode-274 for details on how to do this, if needed). We are now going to create the data structure for our JogTracker application. We’ll keep this really simple, with each ‘jog’ stored as an object with a time , distance and date property. We’ll store these objects in an array called $scope.data – $scope

JavaScript

In-depth

Pie charts Pie charts are notoriously tough to code. However, we can use Angular combined with conic-gradient (netm.ag/ conic-274) – a new CSS polyfill that enables circular gradients – to create them. Data tracking Like many fitness tracking applications, one of the most popular parts of Runkeeper is the ability to track your data

allows us to access this data directly from inside our controller in the HTML. $scope.data = [{ distance: 3.24, time: 34, date: new Date("May 01, 2015"), }, // And so on... ]

AngularJS’ ability to grab data and use it directly in markup offers great possibilities for data visualisation In order to create my visualisations I also need to know the maximum values for time and distance. This can be done for each with a short piece of JavaScript: $scope.maxDistance = Math.max.apply(Math, $scope.data. map(function(jog) { return jog.distance; }))

<div class="pie" style="background: conic-gradient( yellowgreen 30%, gold 0 60%, navy 0 100% ); </div> You specify the colour, blur and percentage of the circle taken up by each section. Remember that the percentages are cumulative, so, visually, the above code would show the first 30 per cent of the pie chart yellow-green, the next 30 per cent (60 per cent minus the first 30 per cent) as gold, and the final 40 per cent as navy. Knowing this, and knowing we can use arithmetic in our Angular values, we can create dynamic pie charts based on our data. In my JavaScript I run a loop to count the total number of jogs, and also determine what day each jog took place on, storing those counts in variables named after each day. $scope.total = 17 $scope.monday = 3 // And so on.. My conic-gradient value then looks like this: yellowgreen {{monday / total * 100}}%, gold 0 {{(monday + tuesday) / total * 100}}%,  navy 0 {{(monday + tuesday + wednesday + thursday + friday + saturday + sunday) / total * 100}}% I simply add all of the values as I go, divide them by the total and multiply by 100 to get my percentage for each colour.

I can then do the same to find the maximum time. Now I have all my data stored and accessible from my HTML, that’s it for JavaScript!

Bar chart The main visualisation I am going to create is a bar chart showing the last 10 jogs from my data, with a bar for both distance and time. Accessibility is important, so in the HTML I will create a table that contains the data, and use CSS to convert this visually to a bar chart.

december 2015 99

PROJECTS JavaScript

FOCUS ON

SVG Line Graph

We can use Angular values anywhere in our HTML markup, and this includes inline SVG. An example of this in our app would be creating a line graph showing the progression of a user’s distance over time. I give my <svg> a height of 200px in my CSS, and add a stroke width and colour to the <line> element. Now, in my markup, I use ng-repeat to output a <line> for every entry: <svg> <line ng-repeat="jog in data" x1="{{($index – 1) / data.length * 100}}%" x2="{{$index / data.length * 100}}%" y1="{{data[$index – 1].distance / maxDistance * 200}}" y2="{{jog.distance / maxDistance * 200}}"> </line> </svg> Each <line> has a start ( x1 and y1 ) and end point ( x2 and y2 ) for both axes. For my X axis I want to position the lines using a percentage of the width. I again use $index , but this time I need two values, so I remove one from the $index value for my start point, and use the original $index value for my end point. This means each line starts where the previous line ends. For my Y axis I need to do a similar thing, but with my distance value from each object. I can access previous values in my $scope. data array the same way I would in JavaScript – data[$index] is the current entry in our ng-repeat loop, data[$index-1] is the previous entry. I then divide this value by the maximum and times by the height, just like in the bar chart, to position the lines vertically.

To begin, I will leverage the ng-repeat functionality of Angular to loop through my $scope.data array and spit the data out into a table. <table class="bar-chart"> <tr ng-repeat="jog in data | limitTo:-10"> <td> {{jog.date | date}} </td> <td> {{jog.time | number}} Minutes </td> <td> {{jog.distance | number}} Miles </td> </tr> </table> This will create a table row for each entry in the data. I declare the individual name for each entry as jog . This enables me to access the properties of that object, such as jog.distance . I have also utilised some Angular filters using | . In the ng-repeat attribute, the limitTo filter allows you to limit the number of entries shown. A value of 10 will show the first 10 entries, however I want to show the last 10. For this I set the limitTo to -10 . We now have an accessible table showing our data. Let’s turn it into a bar chart. Firstly, we need to set up some CSS to override the appearance of our table. .bar-chart { display: block; height: 300px; position: relative; border-left: 1px solid #668284; border-bottom: 1px solid #668284; } .bar-chart td { position: absolute; width: 20px; bottom: 0; } This turns both the table and the cell into block elements, adds a border to show an X and Y axis, and sets up positioning and width on the cells that will become our bars. We set absolute positioning as we are going to use some Angular magic to space the bars out along our chart using the left property. I also set up some classes for each bar, in order to give them a background colour and offset their position. The .legend cell will show the date below the bars, so has been positioned as such. .time will sit next to the .distance bar, so has been nudged along with some margin. .bar-chart .legend { bottom: -40px; }

100

december 2015

JavaScript

.bar-chart .distance { background: #B9D7D9; } .bar-chart .time { background: #668284; margin-left: 30px; } There are plenty of extra stylistic touches, such as rotating text along the bars, so please see the example project for full code. OK, now to dig into the Angular magic in our HTML! <td ng-style="{ left:$index * 10 +'%' }" class="legend" > {{jog | date}} </td> <td ng-style="{ left:$index * 10 +'%', height: (jog.time / maxTime) * 300 + 'px' }" class="time"> <span>{{jog.time | number}} Minutes</span> </td> <td ng-style="{ left:$index * 10 +'%', height: (jog.distance / maxDistance) * 300 + 'px' }" class="distance" ng-class="{ 'highlight' : jog.distance === maxDistance }"> <span>{{jog.distance}} Miles</span> </td>

The key part of creating the chart is the ng-style attribute that applies styling using Angular data values The key part of creating the chart is the ng-style attribute that applies styling using Angular data values. Styling in ng-style is written like an object with key value pairs. You can also pass arithmetic and mix numbers and strings here. First let’s look at the left value, which is the same on all the cells. I want to arrange my 10 bars out evenly across the width of my chart, so will space them out in 10 per cent increments. left:$index * 10 +'%' To do this I utilise the $index value that Angular assigns to all the entries in the ng-repeat , going up from zero in increments of one, just like in a JavaScript array. So if we run the maths, my first cell will have a left value of: 0% – $index (0) x 10 (0)

+ ‘%’ (the unit as a string). My second cell in this column will have a left value of 10 per cent, the next 20 per cent, and so on. I can also use maths to vary the heights of my bars.

Access issues As the bar chart is a HTML table, we can add table headers just for screen readers for accessibility

height: (jog.distance / maxDistance) * 300 + 'px' Here I am taking the distance of my individual jog and dividing it by the maximum distance in the array. I then multiply this by 300 (the height of my chart in px) and then add my unit of px as a string. If we consider what would happen with the longest distance entry, the result of jog.distance / maxDistance would be one (as they are the same number), which would give a result of 300px. This means our largest bar will always be the full height of the chart, and the other bars will have heights relative to this. Ideally, most of this logic would be moved to our JavaScript, perhaps as a custom Angular filter, making the HTML cleaner. However for ease of understanding, at this stage we’ll use it directly in the HTML. The final piece of Angular data-vis magic is to use the ng-class attribute to apply a class, based on whether a condition is met. In this case, I want to add a class of highlight to the longest jog, so I add ng-class="{highlight:jog.distance === maxDistance}" to my <td> element.

Conclusion Our first Angular data visualisation is complete! It isn’t only in style attributes that Angular values can be used. We can use them inside inline SVG and even utilise them inside polyfills such as Lea Verou’s conic-gradient() to create more complex visualisations.

december 2015 101

100 PAGES OF TIPS AND ADVICE FOR ADOBE ILLUSTRATOR ON SALE NOW!

w w w . m y f a vo u rit e ma ga zin e s.c o.uk/des i g n/s tudi o-trai ni ng -adobe-i llu st ra t o r-2 0 1 5

Standards To understand the potential of this pseudo-class, let’s consider the developer’s favourite: a to-do app. Let’s start with a container div and two children, an input and a list. JavaScript will be needed to listen for events on the input and add items, though that’s where its remit should end. If we want to hide the list or show a custom message when empty, previously we’d be reliant on JavaScript to add/remove classes or update inline styles. :has() could change all that! Consider the following: .todo ul { display:none; } .todo ul:has(li) { display:block; } Regardless of what is added or removed from the list, CSS will do all the heavy lifting. We can even simplify this by combining it with the negation pseudo-class :not() already available in CSS3.

:has()

Dan Cork presents the new pseudo-class that addresses styling issues in CSS Until now we have worked around CSS’s inadequacies with JavaScript hacks - most commonly using jQuery to amend classes and apply inline styling. Thankfully the latest specs from the CSS working group go some way to changing this. One to get excited about is :has() . This relational pseudo-class will allow us to declare styles for an element based on those relative to it. In the snippet below all divs containing a paragraph would be styled with a red background. div:has(p) { background: red; } It may appear as if CSS can now traverse back up the DOM, when in actual fact it will evaluate the relative selectors with the element as the scope in the standard way. If it would match one element, it responds with our original element. So in the example above it would evaluate to div p and if an element would match, it would respond with the div . Inside the brackets we can add any CSS selectors, including + , > and ~ . We’re not limited to descendants of our scope element.

.todo ul:not(:has(li)) { display:none; } The nesting of the pseudo-classes here is very important, as .todo ul:has(:not(li)) can perform very differently. The latter example will match all lists within todo that contain anything that is not a list item. So if our list contained a li that contained a span, this selector would be valid. We aren’t limited to updating our scope element either; we could combine it with other selectors to apply styles to a sibling. Maybe we want a custom message to only show when our list is empty. .todo ul:has(li) + .message { display:none; } Browser support is extremely limited at the moment; in fact it’s non-existent. Despite this, we can start playing today. jQuery has supported :has() since version 1.1.4. Combine that with Polyfill.js (philipwalton.github.io/polyfill) and the following JavaScript, and we have a working solution: Polyfill({ selectors: [“:has”] }) .doMatched(function (rules) { rules.each(function (rule) { $(rule.getSelectors()).css(rule.getDeclaration()); }); }); Realistically, you probably don’t want the overhead in your production environment right now, but it’ll certainly give a glimpse of what’s to come!

PROFILE

CSS

Dan (@dancork) joined Holiday Extras in November 2014, having previously worked as lead developer for a digital agency. He will be speaking about CSS at Future of Web Design NY in November

december 2015 103

PROJECTS HTML5

Preview John’s book here! This article is taken from John Allsopp’s upcoming book. Read a draft at netm.ag/offline-274

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

John A l l s op p w: johnfallsopp.com t: @johnallsopp Job: Developer and author Areas of expertise: Web technologies

Photo: iStock

q: what gadget would you have trouble parting with? a: A notebook and Artline pen - not often used, but from time to time they’re indispensable!

HTML5

File API

*Partial support

Desktop

Mobile/tablet

8.4*

10*

104

Read local files with the File API

In HTML5, it is possible to view and edit content from the local system directly in the browser. John Allsopp investigates As the applications we build with web technologies aspire to match up to native apps, one area where the browser remains challenged is in its access to files on the user’s system. Browsers have, for many years, allowed users to select files to upload to a server in HTML form with <input type=″file> . But the content of these files has always been hidden from any JavaScript running in the browser. If we wanted to play video files, or edit images that were on the user’s local system, we needed to first upload the file to a server. If we could read the contents of these files, we could rely less on server-side functionality. Thankfully, with HTML5 we can now read files from the local file system. This means we can create apps that work better offline.

december 2015

The HTML input element of type="file" allows users to select one or more files from the local file system. Before HTML5, the purpose of the file input was solely to enable users to select files to be uploaded via a form. In HTML5, the input elements of type="file" now give developers access to metadata about the files selected: the file name, last modification date, and file size in bytes. If we want the user to be able to choose multiple files at a time, we need to give the input a multiple attribute. Then, we’ll create a change event handler for our file input (we’ll give this the ID fileChooser ), called when the value of the file input changes. document.querySelector("#fileChooser").addEventListener ('change',filesChosen, false)

HTML5 When the user chooses a file with the file input, our event handler is called and receives the event as an argument. The target attribute of the event is the file input. This has an attribute file, which is an array like object FileList , containing the file objects selected by the user. Even if we haven’t set a multiple attribute on our input, the files attribute is still a FileList , just containing a single item.

Getting data

Now we can iterate over the FileList , working through each selected file in turn and getting its name, size and last modified date: function filesChosen(evt){ var chosenFile = evt.target.files[0]; //get the first file in the FileList var fileName = chosenFile.name; //the name of the file as a string var fileSize = chosenFile.size; //the size of the file in bytes, as an integer var fileModifiedDate = chosenFile.lastModifiedDate; //a Date object } How might we use these? Well, we could use localStorage to remember details about files that have been uploaded to a server, and alert users when we have already uploaded a file with the same name, size and modification date, saving them an upload. Or, before uploading, we might determine those files that may take a long time to upload due to their size, and warn the user. However, this information is still quite limited. Luckily, HTML5 also provides a way of reading the content of a file.

In-depth

Taking photos with a web page Let’s look at how you can take a photo from a web page in an iOS or Android device. We need an input of type='file' , which has an accept value of image/*" and a Boolean capture attribute set on the element. <input type="file" accept="image/*" capture id="camera"> Now we add an event handler for change events: document.getElementById('camera'). addEventListener('change', photoTaken, false); We’re only taking one photo at a time, so we get the first file, and (for example) display it as a thumbnail: function photoTaken(event) { var file = event.target.files[0]; var thumbnail = document.querySelector("#thumbnail"); file = evt.target.files[0]; url = window.URL.createObjectURL(file); thumbnail.src = url; } This won’t work in desktop browsers (you’ll need getUserMedia , part of WebRTC and an emerging HTML5 specification), but it will work in iOS, Android and Blackberry 10 phones.

Reading files

The FileReader object allows us to read the content of a file once we’ve got a file from the user. For security, the user must actively give us the reference to the file in order for it to be readable. There are a number of FileReader methods for getting a file’s contents: ● readAsDataURL(file) : Returns the contents of the file as a dataURL , which might be used as the src of an img element, or an image in a style sheet ● readAsText(file [,encoding]) : Reads the file as a string, with the given optional encoding (default UTF-8) ● readAsArrayBuffer(file) : Reads the contents of a file as an ArrayBuffer Because JavaScript is single-threaded, and files may potentially be large, the FileReader read methods are asynchronous. This also means multiple files can be

Offline talk John Allsopp presented ‘The web’s future is offline’ at beyond tellerrand Berlin 2014. Watch the video at netm.ag/tellerand-274

december 2015 105

PROJECTS HTML5

focus on

Saving to the local file system In this tutorial, you’ll have noticed the only way for getting a file from the local system is for the user to expressly pass it to us, using <input type="file"> , or dragging and dropping. You’ll also notice that even when we can read the file or get a URL to it, we still don’t know anything about the location of the file on the local file system. What’s more, the URL that we get from the window using createObjectURL is anonymised, with all information about the file system removed. It’s also a one-time URL – we can’t, for example, save it in localStorage and use it the next time the user loads the page. Why? Well, we really don’t want to give random web pages much (if any) access to the local file system. Imagine if we knew the file path to an image, say file:///Users/johnallsopp/Documents/books/ offline/tests/img.png. We might try and iterate over all kinds of file names to see if we can find other images we hadn’t been given explicit access to. Given how restrictive read access to the local file system is, it’s no surprise the File API gives us no way at all of writing to the local file system directly. Imagine an arbitrary web page being able to save a malicious native app without the user knowing about it. So, while we have localStorage and the more powerful IndexedDB to save data to the client, we can’t simply write a file to the local system. Well, that’s not entirely true. There is in fact a proposed File System API, which provides read and write access to a virtual file system. However, it hasn’t been adopted by any browser other than Chrome, and the draft specification had remained unchanged in over 15 months at the time of writing, so it’s not likely we’ll see widespread adoption of this API any time soon.

read simultaneously. We can stop the reading of a file while it’s in progress using FileReader.abort() . Because these methods are asynchronous, rather than setting the value of a variable to the result of the method, we need to listen for events that are sent to the FileReader object. One of the events the FileReader receives is loaded when the file we want has been read. The target property of this event is the FileReader itself – this has a property called result , where the contents of the file that was read is contained. Here’s how we would get the dataURL for the contents of a file: var reader = new FileReader(); //create our FileReader object to read the file reader.addEventListener("load", fileRead, false); //add an event listener for the onloaded event function fileRead(event){ //called when the load event fires on the FileReader var pictureURL = event.target.result; //the target of the event is the FileReader object instance //the result property of the FileReader contains the file contents } reader.readAsDataURL(file); //when the file is loaded, fileRead will be called We add the event listener for the load event, and in the handler for this event we get the target.result , which is the value of the FileReader operation (so, a DataURL , string or arrayBuffer , depending on what operation we asked the FileReader to perform). We can listen for any of the following events on the FileReader object: ● loadstart : When FileReader starts reading the file ● progress : Intermittently while the file is loading ● abort : When the file reading is aborted ● load : When reading completes successfully ● loadend : When the file has either been loaded or the read has failed If a read succeeds, both a load and loadend event are fired. If it fails, error and loadend events are fired.

Putting it together We’ll let the user select an image file, then show it as a thumbnail. First, our input element: Offline-first This article by Alex Feyerke was one of the first to explore the

trend for offline-first web applications (alistapart.com/article/offline-first)

106

december 2015

<input type="file" id="chooseThumbnail" accept="image/*"> and we add an event listener for when the input changes

HTML5 document.querySelector("#chooseThumbnail").addEvent Listener(‘change’,showThumbNail, false) When the user makes a selection, we call the function showThumbNail() . In HTML5 we can use accept='image/*' to accept any image type. The target of the event is the input element, which has a property file (an array-like object called a FileList ). We get the first element in the FileList and read it. function showThumbNail(evt){ var url; var file; file = evt.target.files[0]; reader = new FileReader(); //we need to instantiate a new FileReader object reader.addEventListener("load", readThumbNail, false); //we add an event listener for when a file is loaded by the FileReader //this will call our function 'readThumbNail()'

of an image src attribute. In the HTML5 File API, the window object has a URL property. This has two methods: ● createObjectURL : Creates a URL for a given file ● revokeObjectURL : Destroys the reference between the URL and the file We can’t store a URL created in this way in, say, localStorage then reuse it in a different window, as it only persists for the life of the document while the window that created it is is open. Here’s how we might use this, in conjunction with an input of type file to get an image from the local file system and display it as a thumbnail. The input element is exactly as before: <input type="file" id="chooseThumbnail" accept="image/*"> and here's the JavaScript function showThumbNail(evt){

reader.readAsDataURL(file); //we now read the data

var url; var file;

}

The File API in HTML5 brings the browser closer to the native file system function readThumbNail(event) { //this is our callback for when the load event is sent to the FileReader var thumbnail = document.querySelector("#thumbnail"); thumbnail.src = event.target.result; //the event has a target property, the FileReader with a property 'result', //which is where the value we read is located }

URLs for Files Often, when we access a local file, we won’t actually want to use its contents directly, but use the file for some other purpose. For example, if it is an image file we may want to display the image; if it is a CSS file, use it as a stylesheet. One particular case is displaying a video stream in a video element, when working with getUserMedia . The simplest way of doing this is to get a temporary, anonymised URL from the browser to use as we would any other URL – for example as the value

var thumbnail = document.querySelector("#thumbnail"); //this is the image element where we'll display the thumbnail file = evt.target.files[0]; //because there's no 'multiple' attribute set on the input //users can only select one //we'd want to check this is the right sort of file url = window.URL.createObjectURL(file); //we create our URL (for WebKit browsers we need webkitURL.createObjectURL) thumbnail.src = url; //we give our thumbnail image element this URL as its source } We’re done! No need to worry about asynchronous file reads or callback functions. When we only want to use a file, and not read its contents, this is by far the preferred solution.

Wrapping Up The File API brings the browser closer to the native file system, allowing users to play, view and edit content from their local system directly in the browser with no need for these to be sent to a server. It even allows us to access the camera and take photos using capture=camera as part of the type attribute’s value. We will however still be waiting for some time (quite likely forever) to get full access to the native file system.

Res ource In this article, Nicholas C. Zakas explores the basics of working with files in JavaScript: netm.ag/files-274

december 2015 107

PROJECTS WordPress

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

James Kos t er w: jameskoster.co.uk t: @jameskoster job: Designer and developer, WooThemes areas of expertise: WordPress theme/plugin design and development q: what gadget would you have trouble parting with? a: Not technically a gadget, I’d say my carry-on bag. Having a bag that will hold all my hardware plus clothes for a week, whilst fitting in an overhead compartment is so useful

Wordpress

Explore WordPress’ free theme options

All WordPress-powered websites use a theme. James Koster looks at why a free theme might be a better choice than a commercial one You probably already have a good picture in your head of what a WordPress theme is. But have you ever specifically considered the intended purpose of a theme, or why themes were introduced way back in WordPress 1.5? wordpress.org describes a theme like so:

Resource Theme Hybrid is a project run by Justin Tadlock. Using the Hybrid Core framework, the members build a variety of themes that are uploaded to wordpress.org: themehybrid.com

108

undamentally, the WordPress theme system is F a way to ‘skin’ your weblog. Yet, it is more than just a skin. Skinning your site implies that only the design is changed. WordPress themes can provide much more control over the look and presentation of the material on your website. The key word in there is ‘presentation’. A WordPress theme is intended to provide the frontend interface

december 2015

for your website’s content. That’s the crux of it. Of course, they can do more. WordPress is way more than a mere blogging platform. Programmatically, there’s nothing to stop you building an entire ecommerce platform into a single theme. But that’s a terrible idea. The fact is that anything beyond presentation is better suited to a plugin. In short: themes are for content presentation, plugins are for content creation. It sounds obvious, right? But I’m going to bet that everyone reading this article has probably used or built a theme that includes features and functionality beyond of the intended scope of what a WordPress theme is expected to provide. That’s nothing to be ashamed of. It’s not even necessarily a bad thing. But it is fundamentally wrong, and things that are

WordPress

FOCUS ON

Free vs commercial at a glance In store Storefront is the official theme for WooCommerce. The core theme is lightweight and extensible, offering various presentation options

fundamentally wrong have a habit of coming back to haunt you. Having read this opening section you may think I’m being pedantic. You may even think I’m crazy. But hopefully after reaching the end of the article you’ll feel some sense of enlightenment.

The State of play Currently, commercial theme marketplaces like ThemeForest (themeforest.net), Creative Market (creativemarket.com) and Mojo Themes (mojo-themes. com) are thriving. They dominate the landscape and it’s easy to see why. On the surface, they offer a win-win proposition for theme creators and end users alike: consumers get access to ‘professionally’

Commercial themes offer oodles of features: page builders, sliders, portfolio modules, contact forms and so on, as a way of grabbing the consumer’s attention and suggesting good value for money. But is it really worth it? The more features a theme includes, the more it strays away from the true WordPress theme purpose. It also increases security risks, becomes more difficult to support and can have a negative impact on performance. Authors of free themes generally pay more attention to things like security and accessibility, in accordance with the guidelines required by wordpress.org’s theme review team. They leave out content creation features that folks can add themselves later via plugins. This modular approach gives you the flexibility to easily enable/disable the features you want. Commercial theme authors are making a lot of money, with some themes selling more than 100,000 times. It’s a very lucrative space. But that is not to say that successful business models cannot be employed around free themes. Many free theme authors are successfully monetising projects by offering commercial addons, or premium support services. Where should you look for free themes? wordpress.org is a great place to start as you know all the themes there have passed a strict review.

On the surface, commercial themes marketplaces offer a win-win proposition built products for a fraction of the price of hiring a designer or developer directly, while theme creators can operate in a contextually rich market to promote and sell their work. Commercial themes have been big news since before the turn of the decade, with many authors earning tens of thousands a month selling them. This lucrative opportunity has attracted more and more authors to the various marketplaces. They’ve become saturated with authors who now work tirelessly to distinguish their products from the competition. The obvious way for them to do this is to offer more value for money, but since the marketplace administrators control the product

Theme Hybrid Offer a range of themes all built to utilise their ‘Hybrid Core’ framework. They also offer a suite of plugins that many themes are integrated with.

december 2015 109

PROJECTS WordPress

in-depth

Underscores

Solid base Underscores is an Automattic project designed to give theme authors a rock-solid foundation for new parent themes

Underscores (underscores.me) is a lightweight project that serves as a fantastic starting point for theme authors. It offers just the right amount of features out of the box, so you can build upon these safe in the knowledge that at its core, your theme will be up to speed on all modern theme development best practises. What Underscores doesn’t do is provide any design or presentational CSS (beyond some very basic responsive menu treatments). It’s a starter theme that designers and developers can use as a beginning for their new projects. Many wordpress.com and (more recently) wordpress.org themes are based on Underscores. This is helpful for agencies that make the conscious decision to use themes from wordpress.org where possible. Code consistency makes developers’ jobs much easier and helps create a standard that others can follow. The Underscores project is managed on GitHub which makes it easy for the wider WordPress community to get involved in its development. It also means that, with so many people contributing, it is constantly growing and improving. Many free, open source themes are developed this way – it’s possibly one of the biggest advantages they have over their (mostly) closed source commercial counterparts.

Underscores Development is managed on GitHub. Developers report / fix bugs, discuss code and contribute enhancements on a daily basis

110

december 2015

prices, authors have no choice but to add more features to boost their product’s value prospect. And before we even realised it was happening, we’re in a situation where, to differentiate themselves from the competition, theme authors are executing development practises that are in direct conflict with what we outlined in the original section of this article. They are bundling ‘plugin territory’ features into the themes themselves. Without searching far, you can find commercial themes that include things like sliders, page builders, shortcodes and contact forms. It’s easy to see why consumers would be attracted to these products. They offer so much for so little. What’s not to like? Well, we’ll get to that shortly. But first, let’s take a look at what is going on at wordpress.org – the official, open source WordPress themes directory.

The wordpress.org standard Many themes on wordpress.com were originally built for and uploaded to wordpress.org. For a theme to be approved for download on wordpress. org it must go through a rigorous review process to ensure it meets the required standards. These

Wordpress.org will reject any theme that includes content creation features standards are set by folks who are regularly involved with the development of WordPress core itself, so we can assume they are intended best practises. In other words, they are recommended for all theme authors, irrespective of where the theme is intended to be distributed. One of the most prominent points in these guidelines is that themes categorically must not include any content creation features. The theme review team is very strict about the fact that any theme that includes functionality that can be deemed ‘plugin territory’ will not be approved. Obviously a theme that includes sliders, page builders and contact forms (the likes of which you might find in a commercial marketplace) would not be approved. You might think this makes the themes available here ‘worse’, but it really doesn’t. It makes them more lightweight, more succinct and more flexible. There are many other important guidelines that themes must adhere to regarding

WordPress things like security, consistency of theme options and accessibility – all important topics that most marketplaces do not enforce. However, the choice for consumers is still not clear-cut. At a glance, on one hand they’re facing the free themes on wordpress.org that are simple in terms of features but are built in accordance with a rigid set of guidelines. On the other hand there are themes on the commercial marketplaces that offer a whole bunch of ‘extra value’ for a price that is so low you hardly even have to think about it.

The commercial conundrum As we’ve already outlined, the arguments for using a commercial theme are strong. But the theme space is slowly and surely evolving. Consumers are starting to learn (sometimes the hard way) that the value proposition offered by commercial themes might not be as good as they first thought. In the beginning of the article I suggested how following practices that are fundamentally wrong can come back to haunt you. Well, let’s take a look at why you might run into problems with some commercial themes.

Portability As many commercial themes include features that enable content creation (sliders and portfolio modules being two popular examples), any content created by that feature is tied to that theme, locking you into using it. This might not seem like a problem at first, but it’s unlikely that a website will use the same theme forever. Two or three years down the road you or your client might want to change the design of their site. At that point all of the custom content will be lost and will need to be recreated. Imagine having to do this for all of your slides, services, testimonials, portfolio items – it’s a real pain. Now imagine being forced into making a theme switch, for a dozen websites at once, because of a security vulnerability in a theme ...

Security The bigger a product becomes, the more potential points of failure there are. This is made worse still in WordPress themes, as many bundle third-party PHP scripts and JavaScript libraries. If a vulnerability is found in one of those components, the site owner finds themselves at the mercy of the promptness of the theme author, who has to patch the script and upload a new version for you to download. To make matters even worse, many commercial themes do not provide update notifications, so the chance of you even learning about a critical

update could be slim. This issue has reared its ugly head a few times throughout commercial theme history, notably with the timthumb.php image manipulation script, and most recently towards the end of 2014, when ThemeForest announced a vulnerability in Revolution Slider, a plugin that over 300 themes were bundling as a part of their package.

Portfolio theme

One of many themes created by Automattic, Sketch is a portfolio theme that leverages Jetpack’s Portfolio module

Consistency WordPress works hard to provide a consistent experience to all users – the Customizer is a perfect example of this. But instead of embracing this API, many commercial theme authors have designed and built their own options frameworks. This means that switching themes will often require learning a whole new options layout/interface. This is frustrating for the individual user and harmful to the community as a whole.

Longevity For a long time commercial themes have been seen as an easy and lucrative business model. But not all authors are successful. Many invest huge amounts of time and effort in their products only for them to see minimal sales. With a poor ROI they’ve possibly cut their losses and moved on to pastures new. The problem for the consumer here is that while the author has left, the product remains. So anyone who purchases it might receive questionable levels of support, if any, and no updates even if a critical vulnerability is found.

Conflict with best practises We’ve already covered this to an extent but it’s so important right now that it’s worth repeating. Commercial themes are not bound by the same guidelines as themes on wordpress.org. So the

Resource ThemeShaper is a good blog to subscribe to if you’re interested in WP themes. There are regular updates on new themes, as well as theme development posts: themeshaper.com

december 2015 111

PROJECTS WordPress a rock-solid theme foundation. It means that as well as being familiar from a usability perspective, developers will likely find the code familiar as well. This highlights the portability of these themes. For more on Underscores, see the boxout on page 110.

Community-driven Popular, free, open source themes are often developed socially on GitHub. They have an active community that reports and fixes bugs, and contributes in other ways, such as providing translations and new features. This helps keep them ahead of their closed source, commercial counterparts.

Financially viable

Money making Make is a great example of a free theme – the project is monetised by a commercial plugin

vast majority of authors simply don’t spend the effort adhering to them.

Free is the future

Video Chrome Dev Tools’ device mode has more features than we could cover here. This five-minute video from Google gets into some of the details: netm.ag/device-274

112

As commercial marketplaces slowly adopt the wordpress.org guidelines in an effort to ensure their authors are building better products, the themes on sale will become more akin to their wordpress. org counterparts, and consumers will come to understand that baked-in features do not necessarily represent value. Free themes available on wordpress.org will always have the edge. Why? Portability, security, consistency. In the previous section we highlighted each of these as a potential pitfall with commercial themes. Interestingly, it’s quite the opposite with free themes on wordpress.org. You know that a theme there meets the required guidelines and will be portable. It’s been reviewed by the dedicated theme review team so will likely be very secure. All themes are required to use the Customizer for settings, so users can be comfortable in the knowledge that switching themes won’t mean learning a whole new options interface. But wait, there’s more.

Underscores-based The majority of new themes submitted to wordpress. org are based on Underscores (underscores.me), the popular developer-focused starter theme released and maintained by Automattic. Underscores is

december 2015

Some authors are finding new ways to build profitable businesses around their products, while still being able to list them on wordpress.org for free. For example, WooThemes (woothemes.com) offers its WooCommerce theme ‘Storefront’ for free on wordpress.org, then monetises the project through commercial Storefront plugins and child themes. This allows Storefront to meet all modern theme development best practises and negate the problems we’ve covered, while still staying profitable. Other companies have found alternative, successful interpretations of this freemium model. ThemeFoundry’s ‘Make’ theme is a good example. A free version is available on wordpress.org while it sells a ‘Make Plus’ upgrade via its website.

Easily updated Updating a wordpress.org theme is as simple as clicking a link in your WordPress dashboard. You will also get convenient notifications when updates are available, making it less likely that you will miss critical releases.

Accessible Any theme on wordpress.org that is tagged ‘accessibility ready’ has had a specific accessibility review to ensure that it’s accessible to folks with physical and visual impairments. This is an oftenforgotten feature that is (in my opinion) one of the most important for any website.

Your next project When you begin work on your next project, I’d recommend looking beyond the bright lights of the commercial marketplaces, to the humble wordpress. org theme directory. The catalogue there is becoming really diverse and I bet you’d be able to find a secure, accessible and attractive theme upon which to base your next WordPress project.

the magazine for real pros

3 issues for ÂŁ5 plus get the first issue fRee

new

professional photography is the all-new monthly magazine for professional photographers. each issue is packed with inspirational galleries, the latest news and reviews, business advice, plus in-depth interviews from world-leading professionals.

SubScRibe TOday

www.myfavouritemagazines.co.uk/PRPHOTO terms and conditions: the trial offer is for new UK print and print + Digital subscribers only. prices and savings quoted are compared to buying full priced UK print and digital issues. You will receive 13 issues in a year. for full terms and conditions please visit: myfavm.ag/magterms. Offer ends 31/01/2016

PROJECTS Accessibility

Accessibility

The cost of accessibility Carlos Eriksson makes a business case for

accessibility, and reveals the real cost of ignoring it Advocating the need for accessibility to business-owners often stirs up fears of increased costs. The social responsibility – the web is for everyone after all – should motivate them, but in reality that’s often not enough. The legal requirements (the Equality Act 2010) and risk of lawsuits should be enough to deter them from excluding people, but looking at the web landscape it’s clear that’s not enough either. Maybe it’s time we, as designers and developers, bring the importance of accessibility to the attention of business-owners in a language they understand. The reality is that ignoring accessibility is actually costing them in lost potential profit every year. Let’s look at some statistics. According to FSB, the average small- to medium-sized enterprise (SME) in the UK employs 4.8 people and has an average turnover of £673,000 every year. 20 per cent of people in the UK (12.6 million), have some form of sensory disability. With most websites failing to meet basic compliance, you’re saying, ‘No thanks’ to £168,000 every year.

The reality of accessibility

PROFILE

But accessibility isn’t about people with disabilities or meeting criteria on a list, it’s about people.

People like you and me. Because people of all ages, ethnicities and abilities can enjoy inclusive design. 49.3 per cent of people in the UK (31.2 million) – are 40 years or over. As we age, our eyes’ ability to focus degrades; a condition called presbyopia. We begin to struggle to focus and read small prints, and reading copy with poor contrast becomes difficult. Oliver Reichenstein writes that “web design is 95 per cent typography”, but none of that matters when 50 per cent of your audience struggles to read the copy on your website. Imagine something as small – but significant – as text contrast alienating half of your potential customers. These aren’t people with disabilities, they are simply, for lack of a better word, old. And thanks to constant advancements in medicine this percentage is only growing and growing. We see companies pouring their time and effort into social media and SEO, and ignoring accessibility. It’s an area where your competitors are as behind as you are, and the potential gains from redirecting this energy into accessibility are significant. As an average SME, ignoring accessibility is costing you and your business tens of thousands of pounds in lost turnover every year. Maybe it’s time we considered the true cost of accessibility?

114

december 2015

Carlos (@fiinixdesign) is a multilingual designer and frontend developer who believes accessibility can exist in the heart of form and function, without compromising either

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

Cameron Moll

Hannah Donovan

Tim Kadlec

James White

cameronmoll.com

hannahdonovan.com

timkadlec.com

signalnoise.com

Designer and author

Product designer

web technology advocate

Visual artist and designer

tickets on sale now

www.generateconf.com

90166

9000

A NAMESCO COMPANY

Projects Flexible layouts with Susy and Breakpoint Create a consistent icon set in Sketch

Open up your design process with Wake Data dashboards with AngularJS Read local files with the File API Explore WordPressâ&#x20AC;&#x2122; free theme options