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.