FREe! 35-page CSS3 ebook
animate with scrollmagic
Full Flexbox and Grid Layout chapters from The Book of CSS3
Create slick effects with this JS library
7 seo tips for developers
Follow these steps for better site visibility
The voice of web design
Issue 271 : September 2015 : net.creativebloq.com
Design for WearaBles Start developing apps with JavaScript for smartwatches, fitness bands and Google Glass
material design with polymer Exclusive! Build an app the Google way Feature
The very best  plugins for security, SEO and more
Welcome
Welcome
editor’s note
The wearables market is massive – there’s a lot more to it than just the Apple Watch. And the best thing is you can start developing apps for these devices with web technologies! This issue we invited Daniel Gallo to explain how you can use JavaScript to build apps for smartwatches, fitness bands and smart glasses (turn to page 68 for his findings). If you have already started designing or developing for wearables, please email us at netmag@futurenet.com to share your experiences. This month we’ve also announced the shortlist for the net awards 2015. Head to thenetawards.com to see who has made the final five in each of our 20 categories. The judges have been busy making their
decisions, and we will reveal the winners at a big ceremony in London on 18 September, just after our Generate conference. Finally, this issue’s freebie is a 35-page ebook all about CSS3 layouts, courtesy of our friends at No Starch Press. You can download the complete Flexible Box Layout and Grid Layout chapters of Peter Gasston’s The Book of CSS3 – just turn to page 102 for details. Enjoy!
Oliver Lindberg, editor oliver.lindberg@futurenet.com @oliverlindberg
Featured authors Daniel Gallo
Shannon Smith
Amanda Glosson
Paul Woods
Dan works at Sencha as a technical sales engineer. From page 68 he explains how to use your JavaScript skills to develop apps for wearables w: danielgallo.co.uk t: @DanielJGallo
Shannon is the founder of Café Noir Design, a boutique web design company. From page 76 she lists the 30 musthave WordPress plugins w: cafenoirdesign.com t: @cafenoirdesign
Amanda is a frontend engineer who spends her time dreaming up ways to push pixels around screens. On page 28 she considers coding with empathy w: eightbysixteen.com t: @amandaglosson
Paul is an art director at Huge, Brooklyn. On page 90 he takes you through everything you need to know to adopt an agile workflow w: paulthedesigner.ie t: @paulillustrator
september 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, Acting art editor Rebecca Shaw rebecca.shaw@futurenet.com, Designer Rich Carter richard.carter@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 Clevely, Gene Crawford, Andrea Deevey, Rob Dodson, Alexander Engzell, Patrick Fox, Daniel Gallo, Amanda Glosson, Sergei Golubev, Michael Gooding, Sam Hernandez, Alexandra Humphry-Baker, Jesse Kris, Kim Lawler, Steve McNiven-Scott, Dan Neame, Adam Powers, Peter Richards, Shannon Smith, Ray Villalobos, Mindy Wagner, Paul Woods
Art contributions
Ben O’Brien, Dan Matutina, Ben Mounsey, Bryan Tan
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 3 September 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
september 2015
Apps used
Google Docs, Photoshop, Dropbox, FutureSource, Illustrator, CodePen, Dreamweaver, 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 271 : September 2015 : net.creativebloq.com
FEED
FEED
SIDE PROJECT of the month 16
Matt Daniels’ Sample-Stitch lets users create hip-hop beats with their keyboards
clients from hell
17
BEYOND PIXELS
20
NEED list
21
EVENT report
23
Workspace
18
Adam Powers gives a tour of BBH’s London office, with its props from adverts of years gone by and a mysterious moving sheep
One ecommerce client tries all the tricks in the book to get out of paying his invoice
Kim Lawler introduces Finest Imaginary, her laser-cut jewellery brand
The objects of web design desire we want, including a keyboard built for your hands
John Cleveley shares what he learned at Edge Conference
voices ON THE INSIDE LOOKING OUT 26
Alexandra Humphry-Baker looks at how to be a great in-house designer
VOICES
Coding with empathy
28
Spacecraft and data
37
Big Question
38
Amanda Glosson considers why we should put ourselves in other people’s shoes
Jesse Kris explains how you design software for space exploration
Is material design more than just a trend? We asked seven web experts
Q&A
GitHub’s Amy Whitney tells all about her research-led design approach
6
september 2015
41
INTERVIEW
32
Samantha Warren shares the thought process behind her hugely successful Style Tiles, and explains why no designer is an island
SUBSCRIBE to net and save up to 59%
Take advantage of the New Print and digital Bundle Turn to page 24 to find out more
Contents regular
GALLERY
44
Mindy Wagner selects the best sites around, including a site for a proposal tool that hijacks your scroll – in a good way
regulars Network
8
Exchange
10
The latest mail, tweets, posts and rants
Ben Seymour, Rachel McCollin, Kate Dreyer and Ranzie Anthony share advice
Showcase
Â
free 35-page
CSS3 ebook see page 102
design Challenge
52
Focus on
57
profile
58
how we built
64
Designers mock up image sharing sites
Gene Crawford considers responsive forms
We chat to the storytellers at Neo-Pangea
Behind the scenes on the NPR redesign
PROJECTS Get started with agile
90
7 essential seo tips
94
Head to head
97
Build an audio visualiser
98
Paul Woods walks through the processes you know to introduce an agile workflow
Features Design for wearables
Peter Richards presents his seven-pont plan to help you boost site visibility
30 must-have
68 wP plugins
Daniel Gallo considers the challenges of designing apps for the latest trend to shake the market: wearable tech
76
Finding the good stuff in the plugin directory is tricky. Shannon Smith does the legwork for you
Project
Create site animations with Scrollmagic 84
Ray Villalobos explains how to pin an element, create a tween and tackle scroll-based animation
Exclusive video tutorials! Look out for the video icon in the tutorials for exclusive screencasts created by the authors
WordPress versus Craft
Dan Neame shows you how to build an MP3 visualiser with WebGL
web standards
103
Native mobile apps
104
material design apps
108
Accessibility
114
Michael Gooding on HTTP/2
Steve McNiven-Scott uses NativeScript and Sitefinity to build a native mobile app
Rob Dodson explains how to build your first material design app with Polymer 1.0
Patrick Fox considers single-page apps
september 2015 7
Mail, tweets, posts and rants contact us
@netmag
Technique 16 In your ‘25 Hottest Web Design Techniques’ feature [net #269] there’s some excellent advice, apart the example in number 16. ‘Simplify your code’ is sound advice. However, in the example, the first version is clearer and simpler to read. The second version obscures the intent of the code. Make your code simpler to read and understand. Do not put it all on one line. Cleverer is not simpler (in my experience!).
Jonathan Muir, Leeds, UK
Sacha Greif, who wrote tip No 16, responds: “You make a good point: you should always strive to make your code easier to understand. This is why I’ve stopped using functions, and instead just copy and paste code blocks wherever I need
8
september 2015
/netmag
+netmagazine
them. Just like shorthand if statements, functions obscure the intent of the code. You shouldn’t be too quick to dismiss new coding patterns. What seems ‘too clever’ to you might be perfectly acceptable – or even more readable – to another developer. So while I do agree that we often value cleverness to the detriment of simplicity, I’d rather leave it up to each coder to find their own balance.”
Digital editions Does subscribing via iOS give one access to back issues or just new issues?
Greg Bowler, Los Angeles, US
You will also have access to a ton of back issues and specials like Practical Web Design, The JavaScript Handbook and the upcoming Ultimate Guide to WordPress Vol 2, on sale from 14 August (see page 82 for details) when you subscribe to our fully interactive digital edition for iOS.
netmag@futurenet.com
working with content on Twitter. It sparked an interesting discussion:
@escmum At what stage do you want to know the amount/ style of content you are designing for? @DavieB Content determines design. IMHO content is much more important than design. @davepaliwoda If you can’t have the specifics, you should at least understand the scale. @Chrisedmo From the start, but that seldom happens. @DarceyBeauu I prefer to design with content first. You can’t build a house without bricks. @pixelstylist Content rules. That’s the mantra, right? (Unless there isn’t any to begin with, which happens more often than you’d think!)
net.creativebloq.com
certifications I run a newsletter, Web Dev Weekly (webdevweekly.com) which features your articles regularly. I’ve recently launched a new project called CertifyMe (certifyme.io), it’s unofficial certifications for developers of mainstream CMSs and frameworks, starting with WordPress. It would be awesome if you could give me a little shout out to help get the ball rolling. As a thank you I can offer readers a 50% off, for life (code: NETMAG50OFF). Hopefully this can be of some use to you guys and your readers.
Mike Griffiths, Chester, UK
Thanks, Mike! It’s a great idea and I’m sure our readers will appreciate the discount.
Content Query Content strategist Sarah Richards (who’s presenting at Generate London: generateconf.com/london-2015) posted some questions about
Hot design In our ’25 hottest web design techniques’ article, web pros like Sacha Greif offered advice for making the web a better place
Network THE POLL
What are the biggest conference talk turn-offs? Name-dropping 25% Oh you know that guy? Yeah, we don’t care
Too much code 3% Too much jargon risks alienating your audience
Talking only about themselves 25% Get to the good stuff, not your childhood photos
Oversharing 4% You should probably keep that to yourself
Too many cats 6% Meow-ve over kitties! This is serious business
Not enough practical takeaways 16% Jokes aside, let’s learn something here
Obscenities 9% A foul mouth is not favourable
Too much rambling 12% … what’s your point?
From our timeline
How do you go about justifying your rates to difficult clients? “Fast/cheap/high quality – pick two” @gembarrett I point out that my rates cover more than just my time. Experience and quality are equally important @KirstyBurgoine Value-based billing sometimes clients just need a little education on the benefit you are bringing @wesbos
I send a bottle of Scotch and Cuban cigars – clients love it @38one I steer clear of set rates and price based on the value of my expertise @sunscreem Case studies. If you don’t have ’em yet, you probably shouldn’t be charging that much @thelinden
I don’t. If our relationship starts with them questioning my worth, then it’s usually best for all to move on @csswizardry I have never had to – now I’m wondering if I’ve been undercharging! @deanleigh By the time you talk rates clients should know why they want *you* and not others. Cost is then secondary to benefit @sjenkinson We had loads more great answers: find them at netm.ag/twitter-271
COOL Stuff We learned This month Like it? Buy it
“Building on the groundwork of its ‘buy buttons’, Facebook continues to develop frictionless shopping experiences for its users. Rather than hopping from an ad to the retailer’s site, soon you’ll be able to do your shopping directly from your Facebook timeline. Impulse buys just got harder to resist … netm.ag/facebook-271 All aboard
Getting new users onboard with your iOS app is fraught with complications, but the Safari View Controller is set to make the experience a whole lot easier. Rather than forgetting users’ data as they bounce around different browsers, Safari View Controller seamlessly signs up users as it can see if they are already logged into your web app. netm.ag/safariview-271 Credit where it’s due
Apple recently won a patent that would allow it to target adverts based on the user’s credit limit. This flies in the face of Apple’s policy of not using personal data to build a profile. However, just because they’ve won the patent doesn’t mean they’ll definitely go ahead with the idea. netm.ag/applecredit-271
september 2015 9
Send your questions to netmag@futurenet.com This month featuring... Kate Dreyer Kate is the SEO strategy lead at digital marketing agency Positive w: katedreyer.co.uk t: @KateDreyer
Practical advice from industry experts
QUESTION OF THE MONTH
What are your thoughts on Processing? Do you think it will become more mainstream? Alex Marsh, Lincoln, UK
Ben Seymour Ben is the author of the Practical Responsive Images pocket guide w: benseymour.com t: @bseymour
Rachel McCollin WordPress specialist Rachel is a web designer, developer and writer w: rachelmccollin.com t: @rachelmccollin
Ranzie Anthony Ranzie is executive creative director of design and tech agency Athlon w: weareathlon.com t: @VirtualRanz
Building identity Processing has been used for generative logos like this one by okdeluxe (netm.ag/logo-271)
RA: Processing (processing.org) was created to introduce artists to programming, and it has helped span the gulf between the two disciplines. I think it will grow as a tool to use when learning but it’s probably too niche to ever be called mainstream. It requires a lot more focus than other interactive alternatives that are appearing in the motion design space. Processing is essentially a tool for creating animations that are usable in a different context. As a text-first coding program, it is hard to imagine a visual designer picking up the language for an interactive animation. SEO
Duplicate content If I write a post for my work blog, can I publish it on my personal blog too?
Jamie Murphy, Manchester, UK
KD: Google rarely ranks two identical pages as it’s not a good user experience. You won’t necessarily get penalised, but
10
september 2015
it’s a good idea instead to post just the first paragraph or two, add a note explaining that you’re re-posting it and then back-link to the original article. You can also add a canonical tag pointing to the original if you want to be extra sure that Google won’t slap you on the wrist.
Q&As
3 simple steps What happens if I have multiple menus where some links are the same, but not all? Michael Russell, Dublin, IE
RM: The Menu Manager in WordPress is the best way to build multiple menus with differing links.
Tricky images Start off supporting resolution switching by adding the scrset attribute
WordPress
Template resources What are the best resources to learn how to make custom WordPress templates?
Brian N. Williams, Vancouver, CA
RM: Creating your own themes lets you design and build exactly the way you want. There are two good places to start learning: either convert existing HTML to a theme, or create a child theme for an existing theme. Look at my tuts+ series on converting HTML to a theme (netm.ag/ static-271), and Daniel Pataki’s guide to creating child themes (netm.ag/child-271). RESPONSIVE IMAGES
Tricky images Responsive images look really interesting, but also quite complex. Where would you recommend getting started?
Levi Kidston, Ohio, US
BS: You could start supporting resolution switching by just adding the srcset attribute with x descriptors ( 1x , 2x ) to your existing <img> tags. This already has solid browser support and enables you to provide pristine looking images for higher pixel density devices, without penalising everyone else with all those extra pixels. Using srcset with the width descriptor enables you to form an image candidate list that provides the browser with a list of different sized versions of each image, so the User Agent can choose the most appropriate one. In both cases
you must still include an image src , so non-supporting browsers will continue to work the old way. For broader browser support you can use a polyfill such as Picturefill (netm.ag/piturefill-271). SEO
Meta tags?
Add menus to widgets
You can add menus to widgets in your site – here I’ve created a Categories menu. You could code a list of categories in your theme, but using menus gives you more control over your menu’s content and order.
Should I add meta tags or just focus on writing good content (or both)?
James Angus, Brisbane, AU
KD: Both! Your content can be the best in the world, but search engines will struggle to rank it well if your title, description and other tags are left blank. Plus, if you don’t add them, Google will choose other text to display in search results, which is not ideal. Don’t bother with the meta keywords tag though – that died a long time ago.
Position your widget
Then add the Custom Menu widget to the widget area where you want to display your menu. Here I’m adding it to the footer. You can give your menu any title you want.
RESPONSIVE IMAGES
Performance issue Could responsive images help improve website performance?
Polly Maddox, Minneapolis, US
NB: Many responsive sites use simple fluid images, which do nothing for the payload. However, the srcset and sizes attributes can enable you to serve images which are more closely aligned to the context in which they will be needed – both in terms of resolution and dimensions – saving wasted pixels and hence file size. The picture element
Edit in the menus screen
This then displays the menu in the site’s footer. Whenever you want to edit that footer menu, just edit the menu you created in the Menus screen, and the widget will automatically update.
september 2015 11
exchange Q&As enables you to take advantage of newer, more efficient file formats like WebP and JPEG XR (which can potentially reduce file size by 20-30 per cent) while providing more standard formats (PNG/ JPG) as fallbacks. SEO
All HTTPS
coincides with the right timing in relation to where an object is and where it is going to be. What’s bad is when it’s used improperly. If you’ve ever played racing games you’ll have seen use of motion blur when the difference between blurred and normal states is so obvious that the eye considers the change an issue rather than an improvement.
Do we go HTTPS with everything now?
Wired Digital, Guildford, UK
KD: Google announced last August that it is now using HTTPS as a ranking signal, affecting fewer than 1 per cent of global searches. It’s thought that this has increased since then, but it’s still just one of many hundreds of considerations Google makes when ranking a site. However, moving to HTTPS has non-SEO benefits too: mainly increased security. It’s likely HTTPS will eventually become the standard, so if you have the time and resources, you may as well migrate sooner rather than later. WEB ANIMATION
Wordpress
Domain store Why does WordPress store the domain in the database?
Michael Lynch, Toronto, CA
RM: Sometimes you might need to tell WordPress that the URL where WordPress is located and the site domain are different – for example if you’ve got WP installed in a subdirectory but want the site to behave as if it’s in the root directory. You can change the settings for the site and WP domains via the General Settings screen. WordPress saves this setting to the database and uses it when displaying your site to users.
Motion blur Is motion blur a good way to help animation read more naturally at realistic frame rates?
David Stevenson, Launceston, UK
RA: I am a fan of Disney’s Animation Principles, and believe natural motion creates a sense of familiarity. When you try to recreate the physical world on a digital screen, small things like using motion blur with natural easing help create a more honest experience. That said, motion blur is only helpful if it
WEB ANIMATION
Animation tips What are the best resources for learning animation and shape rendering within HTML5 canvas?
Nick Lewis, Bristol, UK
RA: CodePen is a solid reference when it comes to viewing both the code and the animation, and sites like Codyhouse.co and tympanus.net/codrops are great for web motion inspiration. Kirupa (netm.ag/ kirupa-271) offers great animation tricks
Animation inspiration Nathan Gordon’s incredible Howl’s Moving Castle animation (netm.ag/castle-271)
12
september 2015
Disney tips Disney’s animation principles
for HTML animators. Finally, the GreenSock library (greensock.com) is a fantastic tool to help you produce smooth tweens and complicated animation chains. Just take a look at the Howl’s Moving Castle example (below left). RESPONSIVE IMAGES
Hundreds of thousands Some of my clients have hundreds of thousands of images on their sites. Do you have any tips for dealing with the image size/resolution variants at such volumes?
Zach Yuranigh, Broughton, AU
HJ: You can automate the production of the image variants using desktop application workflows or via command line scripts, but at larger volumes these can introduce delays. A bigger concern is that by ‘forking’ your content, you also risk ongoing maintenance, management and synchronisation headaches. Server-side Dynamic Imaging solutions are becoming more mainstream. These typically take a single master asset and generate almost unlimited variations of size, format and quality at request time. You are then free to experiment, knowing that the Dynamic Imaging solution can provide whatever variants you require, on demand. You could also consider building your own, or using an SaaS option. Some services offer additional benefits such as ‘point of interest’ for guided art direction. I would recommend coupling it with a suitable Content Delivery Network for scalability and reliability.
ENJOYED READING THIS MAGAZINE? Subscribe and make great savings at www.myfavouritemagazines.co.uk