Page 1

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

net 271 (Sampler)  

You can subscribe to this magazine @ www.myfavouritemagazines.co.uk

Read more
Read more
Similar to
Popular now
Just for you