FREE video tutorials
feedback app +
Create an audio app in JavaScript Build with the Web Audio API and Backbone.js
The voice of web design
Issue 268 : July 2015 : net.creativebloq.com
Mock up motion with Keynote Add slick interactions to your prototypes
Get more out of Sublime Text
Boost your productivity with the best text editor Project
Tips for mastering the Genesis Framework
Free gift Worth $114! Visual feedback tool Trackduck 6 months free
s e t i s e v i s n o p s e r g n i d l i u b r o f s l o o t t s e t a re g 0 1 e Th
Welcome
Welcome
editor’s note
We’ve got two big announcements this month. Voting for the net awards has just opened at thenetawards.com. We received a ton of nominations and as the standard was extremely high, drawing up the longlist was a tough job. It gets harder and harder every year! Please take a few moments to vote for your favourites, and help us whittle down the 210 nominees. Once we’re down to five per category, it’ll be up to our 100 industry judges (thenetawards.com/ judges) to make the final decision. Also, tickets are now on sale for Generate London (generateconf.com/london-2015). The conference is expanding to a two-day, one-track event with the net awards ceremony taking place on the evening of
day two. Speakers include Eric Meyer, Rachel Andrew and Sara Soueidan. There’s also an event report on page 22 about Generate New York, which – according to your feedback – was our best yet. Finally, this issue’s freebie is a six-month subscription to Trackduck, a visual feedback app for web designers and developers, worth $114! Turn to page 94 for some tips on how to use this tool in combination with Trello and Slack for better remote working and more efficient collaboration. Enjoy!
Oliver Lindberg, editor oliver.lindberg@futurenet.com @oliverlindberg
Featured authors Ben Call ahan
Rosie Campbell
Jak e Giltsoff
Carrie Dils
Ben is a founder and the president of Sparkbox. From page 68 he lists 10 indispensable tools for responsive web design w: bencallahan.com t: @bencallahan
Rosie is a research technologist at BBC R&D. On page 28 she explains how to go about designing for displays that don’t exist yet w: medium.com/@rosiecampbell t: @RosieCampbell
Jake is a designer at Typekit. From page 76, he and Christopher Murphy explain how to create beautiful web typography w: jakegiltsoff.co.uk t: @designbyjake
Carrie is a freelance web developer based in Texas. On page 108, she shows you how to get started with the popular Genesis Framework w: carriedils.com t: @cdils
july 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 Mike Brennan mike.brennan@futurenet.com, Designer Rich Carter richard.carter@futurenet.com, Commissioning editor Martin Cooper martin.cooper@futurenet.com, Commissioning editor Julia Sagar julia.sagar@futurenet.com, Staff writer Sammy Maine sammy.maine@futurenet.com, Staff writer Alice Pattillo alice.pattillo@futurenet.com
Editorial contributions
Jesse Beach, Wes Bos, Rosie Campbell, Min-Sang Choi, Gene Crawford, Ian Devlin, Carrie Dils, Laura Franz, Dulcie Fulton, Aaron Gustafson, Daniel Kling, Tom May, Jessica Moon, Kianosh Pourian, Matt Hamm, Paul Robert Lloyd, Neil McCallion, Nathan Riley, Dainius Runkevičius, Chokdee Rutirasiri, Dale Sande, Tim Taubert, Marcus Taylor, Mark Williamson, Clark Wimberly, Indi Young
Art contributions Ben O’Brien, Rob Monk, Ben Mounsey, Joby Sessions, Steven Wilson
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
Advertising Client director Suzanne Smith suzanne.smith@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 11 June 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
july 2015
Apps used
Google Docs, Dropbox, Box, InDesign, SugarSync, Illustrator, FutureSource, Future Folio
paper
COVER PaceSetter Gloss 250gsm P3-82 Galerie Fine 100gsm P83-114 Grapholvent 70gsm
Typefaces
Antonio, Share Tech, Merriweather, Titillium Web
contents Issue 268 : July 2015 : net.creativebloq.com
FEED
FEED
SIDE PROJECT of the month 16
Designer Scott Savarie learned iOS coding to create mobile mockup design app Napkin
clients from hell
17
BEYOND PIXELS
20
NEED list
21
EVENT report
22
A job for a sales rep leads to a frenzy of haggling for an exasperated designer
Workspace
18
Five top-notch web freelancers share No.73, a bike-friendly, collectible-filled workspace near Oxford. Matt Hamm gives us a tour
Designer Dulcie Fulton tells us about the meditative benefits of letterpress printing
Web stuff we fancy this month, including MethodKit’s project management cards
Tom May explores ways not to be a dick at our very own Generate New York show
voices Take time to discover
26
Chokdee Rutirasiri explains why we should explore projects before diving into the work
Design for future displays 28
Rosie Campbell explores the challenges of UX design for ‘smart wallpaper’
How to be more confident 37
Jessica Moon sets out ways to appear more impressive in client meetings
Big Question
How do you balance style against site performance? Experts reveal their tips
Q&A
Indi Young explains how empathy can foster creativity and collaboration
6
july 2015
VOICES
INTERVIEW
32
Cennydd Bowles tells us about his UX work for Twitter and Clearleft, and why you need to evolve to stay abreast of the world of interaction design
38
40
SUBSCRIBE to net and save up to 60%
Take advantage of the New Print and digital Bundle Turn to page 24 to find out more
Contents regular
GALLERY
44
Paul Robert Lloyd shares his favourite websites of the past month, including the bold typography of Bloomberg Business
regulars Network
8
Exchange
10
The latest mail, tweets, posts and rants
Ian Devlin, Aaron Gustafson, Laura Franz and Marcus Taylor answer your questions
Showcase design Challenge
52
Focus on
56
profile
58
how we built
64
Three designers mock up bike hire sites
Gene Crawford considers design for speed
Goodboy put the play back into ad work
Super Top Secret on Publik Coffee Roasters
PROJECTS Add motion to mockups
90
Remote working tips
94
Head to head
97
Sublime text
98
Clark Wimberly explains how to use Apple’s Keynote to bring Sketch mockups to life
Features Responsive web design
Dainius RunkeviÄ?ius reveals tools to keep projects smooth for remote working teams
beautiful web
68 typography
Sparkbox president Ben Callahan runs through the hottest tools for building sites that work on any device
76
Christopher Murphy and Jake Giltsoff explain how traditional principles help us create typography for the future
Project
Build a drum machine with Backbone.js 84
Neil McCallion combines the Web Audio API with a modular architecture to create a music app
Exclusive video tutorials! Look out for the video icon in the tutorials for exclusive screencasts created by the authors
Framer versus Origami
Wes Bos lists the tools you need to become a power user of the popular code editor
web standards
103
smarter sass toolkits
104
Genesis framework
108
Accessibility
114
Tim Taubert on the Web Cryptography API
Dale Sande and Kianosh Pourian explain how to build better Sass components
Carrie Dils introduces the WordPress framework and working with child themes
Jesse Beach on testing with Quail
july 2015 7
Mail, tweets, posts and rants contact us
@netmag
Freelance woes I know you sometimes give advice to freelancers. I agreed with a friend to create a new webpage for her shop. I asked for a deposit of £200, which she paid. Once I’d finished the page, she ordered a new logo, which I created for her. When I asked her for a second payment, she told me that she hadn’t asked for a logo, I had just told her that she needed a new logo. All I have now is the £200 deposit, and she won’t pay any more. I have suspended her webpage on my server. I know I made a mistake when I didn’t sign a contract. Could you give me advice on what I should do?
/netmag
+netmagazine
have been clearer if you had a written contract, but that doesn’t mean there isn’t a contract in place at all. The contents of emails, texts and conversations can also form the terms of a contract. Broadly speaking what a dispute like this boils down to is what exactly you were asked to do, when, and what your client said they would pay for it. This is just the sort of case that the small claims court is designed to deal with, but it’s always worth trying to resolve things away from the courts first – pull together a timeline of events, set out your position clearly in writing, tell her what you believe you are owed and why, and if that doesn’t get a favourable response (and you have time) you can issue a claim without the need for lawyers. Good luck!”
A new start I’m keen to begin a career in web design and would like to know where best to start. I’m a manager at a media agency, predominantly working in paid search and display advertising. My current role requires me to speak to creatives sometimes and the creative itch has re-risen, but I have a couple of concerns. Firstly, if I skill up, will I have to start at the bottom and work back up to a decent salary band? And secondly, if I go freelance, and do this in my spare time, what is
the best place to start? I’m interested in HTML5, CSS and JavaScript. Thanks!
Anonymous
Christopher Murphy (christophermurphy.org), interaction design principle at Belfast School of Art, says: “If anything, adding skills will take you up the salary bands. Our industry is short of multidisciplinary individuals, and combining managerial experience with creative abilities should put you in a strong place. As for your second concern, I’d suggest focusing on where your passions lie. A solid understanding of HTML, CSS and JavaScript, coupled with some knowledge of communication design history, and you should be set to conquer the world.”
Hi there. I wish to purchase your September, October, November and December 2014 issues. Is this possible?
Khairol Azmil, Kuala Lumpur, MY
That’s a tricky situation, Zoltan. Here’s what Phil Gorski, a solicitor at Blacks Solicitors (lawblacks.com), has to say: “Things would
You can buy back issues from netm.ag/back-268, but we only keep the past few issues in stock. For older issues, your best bet is to go
july 2015
for a digital edition – you can buy any of our past issues (from Dec 2013). Flip to page 42 for how to get hold of these.
net.creativebloq.com
Back issues
Zoltan Gal, Swindon, UK
8
netmag@futurenet.com
Going it alone For more tips and advice on going freelance, download The Freelance Handbook, completely free at netm.ag/freelance-268
Network THE POLL
What do you use to show off your work portfolio? Cargo 6% The publishing platform made up of freestanding websites
Dribbble 14% Billed as ‘Show and tell for designers’
Krop 1% A job board for professionals in creative and tech
Semplice 1% The responsive system based on WordPress
Behance 19% An industry favourite showing off your work
Own site 58% There’s no better way to showcase your skills
Coroflot 1% A job board working with design companies
From our timeline
How can we improve collaboration between designers and developers? Only hire polymaths. @soyrex
Crossover skills are essential. Designers need to know how to code and developers need to understand basic design principles. @matthamm HIDE THE CRAYONS SO THEY HAVE TO LISTEN @fruitblindness
Pair designers and devs together to work on design solutions. @danklingjr Be clear about the vision, goals and story of the design task. Getting alignment and buy-in here is crucial for me. @bileye Sit opposite each other. Talk. Easy! @blucube
Start with pen and paper and work on the problems first. Common understanding is key. @johnoxtonking Empathy, sitting together, remembering you’re both trying to solve user problems, sharing pain points, compromise. Oh, and bribes. @monsika Communication and understanding what each other’s role is. Knowing what expectations both groups have before starting. @brisayswhaat
COOL Stuff We learned This month Being Twitter-famous
Having half a million followers on Twitter is a genuinely bizarre experience, Anil Dash discovered. This fascinating post reveals how he accidentally earned this celebrity-level audience (without actually being famous), and how it added a whole new level of weird to his life. netm.ag/famous-268 Crush the butterflies
Apps that target female customers usually come laden with visual clichés like flowers, butterflies, hearts and cutesy fonts. Groove CEO Jennifer Aldoretta did some research, and found that women don’t really love pink that much. Here she offers seven practical tips to help you design for women, without reinforcing stereotypes or patronising your audience. netm.ag/women-268 China gamifies life
China’s government is taking the concept of gamification to a whole new level. This article examines a new, nationwide electronic system that will give each of its 1.3bn citizens a score for their behaviour, based on everything from criminal record to social media activity. netm.ag/china-268
july 2015 9
Send your questions to netmag@futurenet.com This month featuring... Ian Devlin Ian is a senior web developer at pixolith in Düsseldorf w: iandevlin.com t: @iandevlin
Practical advice from industry experts
QUESTION OF THE MONTH
One ecommerce site I work on has 35,000 products. What’s the best approach for search? Jordan Carroll, Belfast, UK
Aaron Gustafson Aaron is a web standards and accessibility advocate working at Microsoft w: aaron-gustafson.com t: @AaronGustafson
Laura Franz Laura writes, presents and gives workshops on web typography w: laurafranz.com t: @laura_type
Marcus Taylor Internet entrepreneur Marcus is the founder of Venture Harbour w: ventureharbour.com t: @marcusataylor
UX tips Don’t overthink your layout – look at what companies like Zappos are doing
MT: For search result pages on large ecommerce sites, it’s important have the right amount of filtering and categorisation to allow the customer to find exactly what they are looking for, within one click from making their search. For example, let’s say you sell craft beer, and your website has 35,000 craft beers. If a customer is looking for a strong Belgian pale ale, but only searches for ‘Belgian beer’, you would want to have filtering parameters by alcohol volume brackets, and by beer type. The more variation between the products you sell, the more creative you’ll need to get with custom filtering parameters. HTML5
The future What’s next with HTML5?
Sergei Golubev, London, UK ID: When HTML5 reached candidate recommendation status in 2014, work on that version of the specification finished. However, work continues on the next version of the specification under the
10
july 2015
label HTML 5.1 (you’ll find the nightly version at w3.org/TR/html51). As a nightly specification, this continues to be updated and changed, with new ideas added and old ones removed in much the same way as HTML5 was. Everyone is welcome to contribute too, so if you have ideas or questions, feel free to make your voice heard.
Q&As
3 simple steps What’s the most important factor that folks miss when setting up an ecommerce site? Sam Moore, New Hampshire, US
MT: The most common hurdles come down to laying poor foundations and in not factoring in how they’re going to attract traffic to the site.
Type rules When deciding on fonts, consider the ways in which type will be used on the page. Look at how typography has been treated in this site design by Greg Goins (greggoins.com)
Web standards
Web typography
Reset files
Type rules
1. Choosing bad software/services
Will CSS reset files become a thing of the past, because of modern browsers?
C ould you make ‘10 commandments for typography’ to consider every time you start a project?
From sluggish web hosting to inferior shopping cart platforms, the wrong software can set you back in many ways. Don’t skimp on your foundations.
Chris Johnson, Indiana, US
AG: A CSS ‘reset’ is not required by any means. Each browser has its own style sheet – the ‘browser default’ style sheet – that sets the baseline styles for every element on a page. This way an HTML document can render nicely without any CSS at all. This is not likely to change, so if you want to override browser default styles, you’ll need a ‘reset’ of some sort. ecommerce
Payment options Is an HTTPS/SSL certificate required for sites using third party payments?
Benjamin Read, London, UK
MT: It’s not required, but I’d highly recommend using an SSL certificate if customers are entering any sensitive data (e.g. their shipping address) on your site prior to paying for the item on a third party payment gateway. By encrypting your customer’s data, you reduce the likelihood of it being stolen or used maliciously. It also has the potential to increase conversion rates, as the green HTTPS sign in the URL bar acts as a trust signal. Finally, Google announced last year that it will be ranking websites with SSL certificates higher than those without, so there is an SEO benefit.
Edgar Montes, Michigan, US
LF: Here you go: 1. Read the text. Take notes. 2. Get a sense of the tone and feeling. 3. Look for recurring words and numbers. 4. Note sections and subsections in the text. How many levels of headings will you need? 5. Note other text-based elements you have to set. Are there captions, pull quotes, numerical data or a featured paragraph? Are there titles in the text you’ll need to italicise? 6. Start considering appropriate fonts – at the size you plan to use them. They’ll look different as body text compared to headline text. 7. Discard fonts that don’t support the tone of the text, as well as those that have issues within recurring words and numbers, or that can’t accomplish what you need them to. 8. Test the remaining fonts across different browsers. 9. Attend to the ‘holy trinity’ of good text: size, line height, line length. 10. Use your line length to set the grid if possible. If your site is responsive, consider line length and readability when setting breakpoints.
2. Neglecting SEO
Search traffic is extremely important to ecommerce, so when site owners don’t factor it into the site’s build, the effects are particularly dramatic. Be sure to choose a CMS that allows you to create well-optimised pages.
3. Not thinking about mobile
This year, several of our websites have been receiving up to 40 per cent of all traffic from mobile and tablet devices. If your website isn’t optimised for mobile, you’re could be neglecting more than a third of your potential customers.
july 2015 11
exchange Q&As HTML5
Web standards
Datetime
Headless HTML5
Will there be a bright future for the datetime and datetime-local values for the input type attribute?
I read that I should exclude <head> and <body> for HTML5. What do you think?
Pepijn Gieles, Eindhoven, NL
ID: It’s hard to say. At the moment neither of these values are present in the HTML5 specification, but datetime is in the HTML5.1 nightly specification, while datetime-local appears to have been dropped altogether. Browsers have been slow to adopt many of the other proposed input types, which suggests datetime is facing a similar battle. Adopting any of these types brings UI requirements, and of course each browser will implement them differently (as we see with the audio and video controls), resulting in a non-uniform experience across browsers, which isn’t ideal. ecommerce
Platform problems My client has more complex ecommerce needs than Shopify can handle. Where can I turn?
Andy Hunt, Hull, UK
MT: First off, decide whether you want a hosted solution (like Shopify), which hosts your site and product database on its servers, or a self-hosted solution (like Magento), where everything is managed on your servers. Presuming you’d be looking at hosted solutions, I’d recommend looking into services such as Bigcommerce (bigcommerce.com) or Volusion (volusion.co.uk).
Zachary Sohovich, California, US
AG: While it’s true most browsers will automatically inject missing elements and close unclosed elements for us, generally that isn’t considered a best practice. When we play it fast and loose with markup, we create documents which are harder to read, update and debug. Web typography
Small serifs Have you ever found a serif that looks good small – and if so, what?
Melanie Sumner, Chapel Hill, US
LF: Absolutely! We tend to think that sans-serif fonts work better at small sizes – but it’s not about serifs, it’s about letter structure and stroke width. Look for a generous x-height, open apertures, thin strokes that aren’t too thin, and thick strokes that aren’t too thick. One of my favourite serifs – and it looks great small – is Merriweather. HTML5
Scrolling replacement The scrolling attribute for iframe is obsolete in HTML5. What do I use in its place? overflow: hidden does not seem to work.
Ghalib Ali, Al-Hasa, SA
ID: You’re right, setting overflow:hidden on the iframe is supposed to work, but it currently doesn’t in any of the major browsers, which is disappointing. The seamless attribute, which indicates that the iframe’s browsing context is to be rendered so it appears to be part of the calling webpage, is also intended to help with this – but again this is not yet supported by any of the major browsers. For now, sadly, you still have to use the scrolling attribute, even though it is deprecated in HTML5. ecommerce
Building trust What’s the best strategy to establish trust with your customers?
UXwins, Seattle, US Ecommerce Hosted solutions include Volusion
12
july 2015
MT: Sit down and write out the potential concerns your customers may have when
Small serifs Merriweather works well at small sizes (image from the very useful goodwebfonts.com)
buying from you – and then use this list to counter objections on the website. We all experience a degree of anxiety before making a purchase, which impacts our level of trust in the seller. To reduce this anxiety, we need to understand the customer’s concerns and counter them before they’re consciously aware. There are lots of general tactics that can build trust, such as using SSL certificates, having a well-designed website and displaying your refund policy, but it’s always best to go for a walk in the customer’s shoes to understand their specific concerns. Web standards
Getting involved How can we get more independent professionals in the web industry involved with web standards work? My previous experience in BSi technical groups was always through my employer sponsoring my time and costs.
Ben Seymour, Oxford, UK
AG: I think the advent of the WhatWG (whatwg.org) and the W3C’s Community Groups has done a lot to enable more independent folks to get involved with the development of web standards. And that’s over and above the W3C’s existing Invited Expert programme. The Responsive Images Community Group is a prime example of an independent group getting things done at the W3C. I highly recommend participating in CGs you are interested in, or starting ones you think need to exist.
ENJOYED READING THIS MAGAZINE? Subscribe and make great savings at www.myfavouritemagazines.co.uk