Issuu on Google+

Build apps with ampersand.js We introduce the best new framework around

The INternet of things in CSS Adapt your code for a plethora of devices

Design beautiful work portfolios Build case studies easily on top of WordPress

The voice of web design

Issue 262 : January 2015 : net.creativebloq.com

SEmplice: Save 50%

build Mobile apps

Exclusive offer on this portfolio tool

the easy way

Issue 262 january 2015 

ÂŁ5.99

Web vs mobile apps, native vs hybrid, the top frameworks, distribution tips & much more!

Speed up your mobile apps

Make use of the GPU for hardware acceleration FEATURE

Why you should use scalable vector graphics today


New york 17 April 2015 Featuring Mike Monteiro, Val Head, Pamela Pavliscak, JoonYong Park, Anton Repponen, Irene Pereyra, Dave Rupert... and lots more to be announced

tickets on sale now

www.generateconf.com


Welcome

Welcome

editor’s note

Can you believe it’s only been six years since the launch of the Apple App Store? This year the number of mobile app downloads worldwide (from all the big app stores), will exceed 135bn, and worldwide mobile app revenue is estimated to reach $35bn. So think of apps what you like, but the market is massive – and there are now so many approaches, libraries and development environments it’s hard to keep track. To make your life easier, this issue we invited top agency AKQA – which has built several innovative and award-winning apps – to explain how to get started, what the different tools can offer and how to recognise when an app might not be what you want to build after all (page 68).

Tying in with our cover feature are tutorials on how to improve your apps’ performance by taking advantage of hardware acceleration and the GPU, and an introduction to hot new JavaScript framework Ampersand.js. And if you want to start developing for the much-hyped Internet of Things (or ‘Stuff That Talks to the Interwebs’ (STTTTI), as Seb Lee-Delisle likes to call it), don’t miss the article on page 94. Now enjoy the issue!

Oliver Lindberg, editor oliver.lindberg@futurenet.com @oliverlindberg

Featured authors Sara Soueidan

Jon Boydell

K amil Ogórek

Dan Tello

Sara is a self-employed frontend web developer based in Lebanon, focusing on HTML5, SVG, CSS3 and JavaScript. On page 76 she tells us everything about SVG w: sarasoueidan.com t: @SaraSoueidan

Jon is a group technical director at ideas and innovation agency AKQA. On page 68 he, with help from two colleagues, explains how to build mobile apps w: akqa.com t: @AKQA

Kamil is a senior client-side engineer in X-Team and an Ampersand.js core team member. On page 84 he introduces us to this powerful new framework w: kamilogorek.pl t: @kamilogorek

Daniel is a senior frontend developer at Viget, disc golf enthusiast and bacon addict. On page 28 he addresses some of the common ‘mobilefirst’ hesitations w: viget.com t: @dantello5

january 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 Gary Evans gary.evans@futurenet.com

Editorial contributions

Nate Abele, Dave Arel, Jon Boydell, Gene Crawford, Peter Gasston, Sacha Greif, Bradley Haynes, Jimmy Jacobson, Ruth John, Sam Kapila, Johanna Kollmann, Matt Keas, Kamil Ogórek, Marc Roberts, Luis Daniel Rodriguez, Mark Sadecki, Tobias van Schneider, Tal Shoham, Sara Soueidan, Donald Sutherland, Dan Tello, Leonard Teo, Keir Whitaker, Paul Woods

Art contributions Kyle Bean, Ben Mounsey, Ben O’Brien

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 Acting group art director Simon Middleweek simon.middleweek@futurenet.com

Advertising Advertising sales director Suzanne Smith suzanne.smith@futurenet.com Circulation Trade marketing manager Juliette Winyard juliette.winyard@futurenet.com Production Production controller Marie Quilter marie.quilter@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 23 December 2014 All contents copyright © 2014 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.

Print 10,632 Digital 3,672

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).

The ABC combined print, digital and digital publications circulation for Jan–Dec 2013 is

14,304

A member of the Audited Bureau of Circulations

Colophon 4

january 2015

Apps used

Google Docs, InDesign, YouTube, Skype, Illustrator, FutureSource, Photoshop, GitHub, Evernote

paper

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

Typefaces

Antonio, Amatic SC, Merriweather, Share Tech, Titillium Web


contents Issue 262 : January 2015 : net.creativebloq.com

FEED

FEED

SIDE PROJECT of the month 16

Donald Sutherland on the tool that makes adding Google Maps to sites much simpler

clients from hell

17

BEYOND PIXELS

20

NEED list

21

EVENT report

23

Workspace

18

Events company Evolero has recently moved into a new coworking space in Tel Aviv. Founder Tal Shoham shows us around her team’s new home, where slick glass and steel meet rustic, salvaged furniture

A business solutions specialist tackles a disobedient client with a connection issue

Sacha Greif on how martial arts help him put work problems into perspective

The web stuff we want, including a set of abstract new source code screenprints

The Web Is ... explores what the web means to different people. Marc Roberts reports

voices succeed with large clients 26

Leonard Teo explores how to bag a gig with a high-profile client, and what to do next

Desktop-last 

28

Big Question

38

Q&A

40

Dan Tello considers why the industry is so afraid of embracing mobile-first design

What’s your approach to prototyping? We spoke to the pros to hear their techniques

Kutlu Çanlıoğlu chats about how he tackled the multi-platform BBC iPlayer redesign

The myth of late nights

42

Paul Woods debunks the fallacy that you need to work overtime to be successful

6

january 2015

VOICES

INTERVIEW

32

We chat to net’s Young Designer of the Year, CSS wizard Harry Roberts, about kicking his ‘view source’ addiction and why we should hang on the those ‘unsexy’ old tools

SUBSCRIBE to net and save up to 61%

Take advantage of the New Print and digital Bundle Turn to page 24 to find out more


Contents

regulars

regular

GALLERY

44

Peter Gasston picks out his favourite new sites, including a cheeryful creation dedicated to Pablo the flamingo

Network

8

Exchange

10

The latest mail, tweets, posts and rants

Sam Kapila, Bradley Haynes, Nate Abele and Keir Whitaker share their tips

Showcase design Challenge

52

Focus on

56

profile

58

how we built

64

Three designers create firework sites

Gene Crawford on presenting your work

Digital marketing agency Forward3D

How Great Apes built a 3D design tool

PROJECTS Build Modularised apps

84

The CSS of the IOT

94

Head to head

96

Build a custom UI

98

Kamil Ogórek introduces Ampersand.js, the new ‘non-frameworky’ framework

Features

Luis Daniel Rodriguez explains how to write the stylesheets of tomorrow today

Build mobile apps the easy way 68

Discover The power of SVG

AKQA’s Jon Boydell gives the lowdown on all the tools and frameworks you need to tackle mobile apps

Sara Soueidan gives a crash course in the different effects you can create using scalable vector graphics

76

Johanna Kollmann pits agile against lean

Matt Keas walks through how to create unique, interactive web experiences

web standards

project

Create beautiful case studies with semplice 90 Tobias van Schneider shows you how to use Semplice to build a top online portfolio

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

Ruth John on device orientation events

103

3rd party content & RWD 104 Jimmy Jacobson uses iframes to add third party content to a responsive site

improve app performance 108

Dave Arel on how hardware accelerated compositing can boost mobile app speed

ACCESSibility

Mark Sadecki on the canvas element

114

january 2015 7


Mail, tweets, posts and rants contact us

@netmag

Email marketing I have a question I hope you can help me with. This is about emailing: programming and design strategies, best practices and new trends. With social media around, maybe for some people this seems out of date, but I think it’s still an excellent way to contact potential customers.

Pedro E. Vargas, Mexico

Dr Dave Chaffey of digital strategy advice site SmartInsights.com says: “Hi Pedro, it’s good to hear your enthusiasm. Email marketing is certainly alive and kicking, particularly for marketing to existing customers. Many retailers get a far higher proportion of sales from email than social media. In terms of design, the main trend is the move to responsive design using media queries, which

8

january 2015

/netmag

+netmagazine

has been essential with the increasing use of email on mobile devices. Check out the stats at netm.ag/stats262 – no surprise to find iOS in top position, with over a quarter of all opens! As with many aspects of marketing, it is the strategic approach which makes the biggest difference. Contextspecific, personalised content is the order of the day, delivered by dynamic content insertion which is now available through many marketing automation systems.”

World Cup error I think I found a little mistake in issue 258. On page 49 [a Showcase page of a World Cup history site] there should have been a circle around 1954, not 1930. I’d also like to thank you for such an amazing magazine.

netmag@futurenet.com

happened to bag the trophy again this summer. He is still celebrating.

Mental Help Week Please read and get educated! RT @netmag #GeekMentalHelp Week: @benjaminhowarth on bipolar disorder: netm.ag/GMHW-262

Sam Kapila, Texas, Curaçao and Greenville, US

Thanks, Sam. We actively supported Geek Mental Help Week (geekmentalhelp.com) and were thrilled to have some devs share their very personal stories. Massive thanks go to Greg Baugues (netm.ag/Baugues-262), Christopher Murphy (netm. ag/Murphy-262), Benjamin Howarth (above), Hannah Donovan (netm.ag/donovan-

net.creativebloq.com

262) and Ed Finkler (netm. ag/finkler-262.com). Everyone really came together to raise awareness of mental health problems that many of us are affected by. If you also want to share your story, get in touch.

Windows woes Are there any plans to support Windows devices with the digital editions? Having been a regular reader of the print edition, it would be nice to go digital, but I don’t use either Apple or Android devices.

Steve Cowell, UK

You don’t need to have an Apple or Android device to read our digital edition, Steve. net is also available on Zinio, which supports PCs and Windows 8 devices: zinio.com.

Farhad Eftekhari, Espoo, FI

Well spotted! We blame the screen capture software that probably didn’t catch up in time when we took this shot. Of course the World Cup took place in 1954 in Switzerland. Editor Oliver Lindberg would like to remind everyone that, incidentally, Germany won the World Cup for the first time that year and also

Let’s celebrate! Big thanks to Sergei Golubev (@sgolubev), who tweeted us this fab photo to help us celebrate net’s 20th birthday last issue


Network THE POLL

which mobile platforms do you develop for? HTML5 hybrid apps 40% Native might offer more power and flexibility, but hybrid means one app works across many code bases

BlackBerry 10 3% A propietary, Unixlike OS that combines gestures and touch for navigation

Firefox OS 4% A relative newcomer, the open source Firefox OS promises many great things

Windows Phone 5% Microsoft’s slick successor to the much-maligned Windows Mobile

iOS 25% Apple’s all-conquering mobile operating system for tablets and phones

Android 22% Google is set to release version five of its Linuxbased juggernaut

From our timeline

When times are tough, what do you do to stay positive? I remind myself of what really matters: My family. I can get another job, a cheaper house, a cheaper car. I can’t get replace my family. @pstephan1187 Think like a proton. @iandevlin

Drink coffee, make lists and power on! @Jamesp0p

The same thing I do when times are good: work hard and help others. @Tevko Adventure time, every time! @thepixelgrid I grab some fresh air. No greater brightener or leveller than taking a walk or going for a run. @DaveThackeray

However bleak things look, it’s always better to communicate. Things are never as bad as they seem! #exceptwhentheyare @nlisgo <sarcasm> I look at my favourite website. It inspires me to be the best I can be. fabricland.co.uk </sarcasm> @humedini Surrounding myself with positive and creative people usually helps a lot – positivity spreads like a virus. @mstoiber05

COOL Stuff We learned This month An ode to the mechanical pencil

Pencil notes, this post’s author tells us, have more humility than those jotted in pen. The latter are definite, whereas the former are erasable and so gently provisional. That established, we’re off on a tour of the mechanical pencil’s history, with some unabashed fetishism of the Rotring 600 and its kin. netm.ag/pencil-262 Code’s cognitive load

If you want to make code that’s efficient, write code that’s easy to read. The problem is, how do you describe code that is easy to understand? We reach for woolly words like clean and clever or ugly and cryptic, but these are inadequate. We need to look for more rigorous measures of readability. netm.ag/read-262 Don’t mock Microsoft

If you’re giving a talk and need some comic relief, tell a joke about Microsoft. It’ll get a laugh, but it’ll be a cheap one – so says unlikely Microsoft advocate, Mozilla’s Christian Heilmann. Rather than the evil empire of old, Microsoft might just be one of the most important players in tech today. Clippy would be proud. netm.ag/microsoft-262

january 2015 9


Send your questions to netmag@futurenet.com this month featuring... Sam Kapila Sam is a designer and design educator living in Austin, Texas w: samkapila.com t: @samkap

Practical advice from industry experts

QUESTION OF THE MONTH

How could design education better support prospective UX/product designers? Rob Whiting, Beverley Country, UK

Bradley Haynes Bradley has been designing experiences for the web for over 10 years w: bradleyhaynes.com t: @bradhaynes

Nate Abele Nate is the founder of Radify and a member of the AngularUI team w: nateabele.com t: @nateabele

KeiR WHITAKER Keir Whitaker works at Shopify in the role of designer advocate w: keirwhitaker.com t: @keirwhitaker

Connecting Hunt for resources to supplement your education – there are plenty around. San Francisco-based Bridge (designerfund.com) offers one way for designers to connect with top local startups

BH: With a few exceptions, universities have a really hard time keeping up with the latest methodologies for building great products. Some programmes bring in designers from product teams to help – this is a step in the right direction, but the number of experienced designers that set aside that time is unfortunately very low. Honestly, the best approach is to just do the work and immerse yourself in products. Copy design trends on Dribbble. Redesign apps and become comfortable with the balance, proportion and task flows of popular ones. Get into design programmes like AIGA (aiga.org). And if an opportunity comes along to intern or freelance on an app, do it. ecommerce

marking products Do you recommend marking up products with schema.org (e.g. schema.org/Product)?

Christian Oliff, Osaka, JP and London, UK

KW: Absolutely – any structured data we can add to our product pages that helps search engines understand what they are

10

january 2015

parsing can only be a good thing. Given that schema.org is supported by Google, Microsoft and Yahoo and is fairly easy to implement, it seems like something we should be using as standard. To see how it is implemented in Shopify, go to product.liquid in Timber (netm.ag/timber262), our open source theme framework.


Q&As

3 simple steps How would someone go about creating a custom typeface? Ian Crook, Greenville, SC

Pinnacle SEO @PinnacleSEOTwit

Study typography Material design Angular’s Material Design module includes accessible element hints for the browser

AngularJS

Government guidelines What’s the best way to start to make sure I’m meeting government accessibility guidelines? Any best practices?

Adrian Roselli, Buffalo, New York, US

NA: There are few Angular-specific considerations. Accessibility guru Marcy Sutton (@marcysutton) gave an excellent talk on Angular and accessibility that you can see at netm.ag/access-262. Here are some of the highlights: ● Keyboard bindings: If your interfaces use custom click handlers, be sure to also enable ways to interact with those elements via the keyboard ● Native elements: When writing directives for custom UI elements, try to include the equivalent native element in your markup ● ARIA: While Angular does a lot for you, you still have to know your tools. The ngAria module provides Angular bindings for ARIA roles Typography

Older users When designing for 65-plus, how can typography be used to create a better experience for the user?

Laurel Isaacs, Austin, TX

SK: The go-to solution for a lot of designers is to make the type larger, but I think that should be up to the user. I  believe thicker line weights and details such as distinct letterform counters (the

negative space) and serifs reveal information about a letter, making it easier to read. A more open line-height is a must in all typography. product design

SK: There’s a reason typefaces cost as much as they do. One of the hardest things is to get a typeface that will look right and work correctly. Consider the principles of typography while designing, and read Elements of Typographic Style by Robert Bringhurst (netm.ag/elements-262).

Hamburger issues What is your position on the hamburger icon? It has split our community in two.

Pinnacle SEO @PinnacleSEOTwit

Ollie Barker, Stockton-on-Tees, UK

BH: I have two problems with the hamburger icon and accompanying slide-out drawer it triggers. First, it has become a place for lazy designers to throw the stuff they didn’t think hard enough about to warrant a place within the task flows. Designers should always strive to make their app focused and clean. Second, with new devices like the iPhone 6 plus, the top-left of the screen is too far away to reach easily (that can be addressed by moving the icon). That said, I think there are times when it’s OK to use a hamburger – such as for information that is secondary to the app’s main purpose. The bottom line is: present the information in a way that makes sense for the user. 

Design the characters

Use Illustrator or typeface design programs like Fontlab, Fontographer or Glyphs to design your characters. You’ll find plenty of helpful tutorials for doing so on creativebloq.com.

Pinnacle SEO @PinnacleSEOTwit

Test, test, test

Typography

Managing Web type What is the best way to manage web typography within a team?

Robbie Weeden, Melbourne, AU

SK: In my experience, web typography management in teams has never been

Once I worked meticulously to design a typeface, but then when I came to test the typeface in Illustrator, the spacing was completely off. Take time to program character-to-character spacing and ligatures.

january 2015 11


exchange Q&As organised. It’s hard to keep track of licensing and such. Services like TypeKit make it a lot easier, since this allows for toggling of font weights and means everyone can use one kit for that one site. It’s also helpful to have a typographic style guide designed in HTML and CSS, as this makes it easy to connect weights and styles to HTML elements. AngularJS

Modelling Angular doesn’t really provide a ‘model’ layer – how should I model my data?

Stephen Fernandez, Holmston, UK

NA: Contrary to popular belief, Angular is not so much a framework as a library or toolkit. It provides some generic ways to organise your code, as well as some very powerful primitives to compose UIs and application logic, but how you compose them is up to you. Your ‘data model’ is $scope . Fortunately, you have a number of options. One is to box your objects in custom ‘classes’, like so: function Widget(properties) { angular.extend(this, properties); } angular.extend(Widget.prototype, { custom: function() { /* ... */ } }); myModule.controller(“WidgetsController”, function($scope) { angular.extend($scope, { widget: new Widget({ foo: true, bar: false }) }) }); The de-facto library for modeling data is probably Restangular (netm.ag/ restangular-262). This provides a highly fluent, configurable way to bind complex client-side logic to data coming from API endpoints. My company has published a similar, though much simpler library (netm.ag/radify-262), which provides conveniences for binding UI logic to API endpoints, but is centred around hypermedia. As such it makes some assumptions about your API to keep your frontend decoupled and flexible.

12

january 2015

VAT rules Shopify has a system in place to deal with the new VAT rules for ecommerce sytems

Ecommerce

Vat rules How will Shopify help retailers manage the new VAT rules being placed on the selling of digital products in Europe?

TheGenieLab, Newport, Wales and Miami, US KW: As a consequence of the new VAT rules, which will take affect on 1 January 2015, ecommerce systems will need to have the ability to specify separate tax rules for products categorised as ‘e-services’ (for more, Rachel Andrew has written a post at netm.ag/andrew-262). Shopify has a feature called Tax Overrides which offers merchants the ability to specify certain taxes on a ‘per collection’ basis. So, it’s now possible to create a collection (a logical grouping of products) which contains all products that fall into the ‘e-service’ category. Via the Shopify admin they can then apply region-specific overrides for this collection, which will be applied in place of their global tax rate setting when they enter their country during the checkout process. As with all tax matters, it’s worth seeking professional advice before making changes. Product design

New recruits What are product companies looking for in new design hires?

Julia Lawrence, Manchester, UK

BH: The first thing I do is look for their work online. The second is their work history, which I usually find on LinkedIn. Does this person have any experience? Do they articulate their background in an interesting way? After those first points

have been covered, I move on to a phonecall. I consider culture to be as important – if not more so – than skill level. I look for excellent communication, humility, hunger and likability. I’m constantly on the lookout for young people that just love solving problems – these have been some of my best hires. If someone proves they are capable of doing the little stuff, they can be trusted with the big stuff. It’s really that simple. AngularJS

App SEO How can I maximise SEO in my Angular app?

Michael Wiley, Stoughton, MA

NA: As with any context in which search engines meet JavaScript, you’re going to have to make some trade-offs. Often the dynamic parts of the apps I build live behind a login wall, and aren’t expected to be indexed. For public-facing parts, I mark them up accordingly and keep dynamic content progressive. One approach is to create Angular ‘widgets’: applications that occupy a small section of the page that they can progressively enhance by dynamically replacing its content (the BBC handles tabular data on heavily-trafficked pages like this). There are also services like Prerender. io (prerender.io) that you can use to crawl your apps in a way that takes JavaScript into account. Finally, Angular has announced that by the end of 2014, GoogleBot will take JavaScript fully into account when crawling applications, so this problem will be obviated entirely ... for one search engine, anyway.


.net 262 Sampler