Create a smooth 3D design with Build a mobile Develop a game

UI for any screen after effects app with ionic for the browser
Natural animations with Dramatic new ways to Create hybrid apps with Get started with Phaser
the power of Famo.us showcase your work HTML5 and AngularJS for super-fast rendering

Project
The voice of web design

Create a
simple and
Issue 260 : November 2014 : net.creativebloq.com
easy workflow
with the top tools
 Welcome

Welcome

editors note
Responsive web design: the idea is
straightforward, its execution isnt. But
designing responsively doesnt have to mean more
grey hair often its just a case of starting off on the
right foot. This issue Justin Avery, who won a net
Award for Am IResponsive? (ami.responsivedesign.
is), talked to a real whos who in RWD to find out the
techniques you can need to ensure a fast, beautiful
and future-friendly final product.
To find out more, listen to the accompanying
podcasts (responsivedesign.is/feeds/podcast). Its also
worth watching Dan Malls Responsive Design is
Still Hard/Easy! talk at Beyond Tellerrand (vimeo.
com/101875373) as well as Ethan Marcottes keynote
at our own Generate New York conference (netm.ag/
marcotte-260), which complement the feature.
Finally, dont miss our special digital edition offer.
Get a free Apple Newsstand or Google Play Store
version of this months mag at no extra charge.
OuriPad edition in particular is well worth checking
out, as its tablet-optimised and features additional
imagery and exclusive audio content which you
wontfind elsewhere. Turn to page 43 for details.
Enjoy the issue wherever you are!
Oliver Lindberg, editor
oliver.lindberg@futurenet.com
@oliverlindberg

Featured authors
Justin Avery Ruth John Paul Woods Phil Coffman

Justin runs the RWD Weekly
newsletter and Responsive
Design.is and on page 68 tells
us how to master advanced
techniques to get more out of
responsive web design
w: justinavery.me
t: @justinavery
Ruth has been wireframing,
designing and coding for over
adecade, currently for The Lab
at O2 (Telefnica). On page
103 she discusses interesting
uses of the new Vibration API
w: rumyrashead.com
t: @Rumyra
Paul is a design director at
Edenspiekermann, where he
works between digital and
brand design. On page 76
hedives into digital editorial
design and longform stories
w: paulthedesigner.ie
t: @paulillustrator
Texas-based digital designer
Phil is currently the head of
design at PCPartPicker. On
page 90 heexplains how
touse After Effects to create
stunning 3D images
w: philcoffman.com
t: @philcoffman

february 2014 3
 Future PLC, Quay House, The Ambury, Bath, BA1 1UA +44 (0)1225 442244
@netmag /netmag +netmagazine flickr.com/photos/netmag netmag@futurenet.com net.creativebloq.com

Editorial
Editor Oliver Lindberg oliver.lindberg@futurenet.com,
Deputy editor Martin Cooper martin.cooper@futurenet.com, Production editor Ruth Hamilton ruth.hamilton@futurenet.com,
Digital editor Tanya Combrinck tanya.combrinck@futurenet.com, Art editor Mike Brennan mike.brennan@futurenet.com,
Editor-in-chief Dan Oliver dan.oliver@futurenet.com

Editorial contributions
Justin Avery, Andrew Betts, Sarah Brown, Ian Carrico, Robin Christopherson, Phil Coffman, Ian Coyle, Gene Crawford, Tim Evko, Simon Foster,
Tobias Gnther, Steve Grunwell, Marko Heijnen, Brian Hoff, Will Howe, Kirsty Hulse, Sally Jenkinson, Ruth John, Mark Jones, Alex Matchneer,
James Miller, Anton Mills, Tim Nash, Adekunle Oduye, Simon Richings, Brandon Schmittling, Ben Scott, Carl Smith, Paul Woods

Art contributions
Daniel Byrne, Martina Flor, Ben Mounsey, Ben OBrien

management
Head of content and marketing, photography, creative and design Matthew Pierce matthew.pierce@futurenet.com,
Director of content and marketing Nial Ferguson nial.ferguson@futurenet.com Creative director Robin Abbott bob.abbott@futurenet.com,
Acting group art director Simon Middleweek simon.middleweek@futurenet.com Editorial director Jim Douglas jim.douglas@futurenet.com,
Chief executive Zillah Byng-Maddick zillah.byngmaddick@futurenet.com

Advertising Director of advertising sales James Ranson james.ranson@futurenet.com +44 (0)20 7042 4163
Advertising sales director Suzanne Smith suzanne.smith@futurenet.com +44 (0)20 7042 4122
Senior sales executive Victoria Sanders victoria.sanders@futurenet.com +44 (0)20 7042 4176
Marketing Group marketing manager Philippa Newman philippa.newman@futurenet.com
Circulation Trade marketing manager Daniel Foley daniel.foley@futurenet.com
Print & Production Production controller Roberta Lealand roberta.lealand@futurenet.com
Licensing Licensing & syndication director Regina Erak regina.erak@futurenet.com +44 (0)1225 732359
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 November 2014

Future Publishing Limited 2014. All rights reserved. No part of this magazine may be used or reproduced without the written permission of the publisher. Future Publishing Limited (company
number 2008885) is registered in England and Wales. The registered office of Future Publishing Limited is at Quay House, The Ambury, Bath, BA1 1UA. All information contained in this
magazine 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.
Readers are advised to contact manufacturers and retailers directly with regard to the price of products/services referred to in this magazine. 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
The ABC combined print, digital and digital which is derived from well managed, certified
publications circulation for JanDec 2013 is forestry and chlorine-free manufacture. Future
14,304 Publishing and its paper suppliers have been
independently certified in accordance with the rules
A member of the Audited Bureau of Circulations of the FSC (Forest Stewardship Council).

Colophon
Apps used paper Typefaces
Google Docs, InDesign, Reddit: COVER PaceSetter Gloss 250gsm Antonio, Amatic SC,
Ask Me Anything, YouTube, Skype, P3-82 Galerie Fine 100gsm Merriweather, Share
FutureSource, Photoshop, GitHub P83-114 Grapholvent 70gsm Tech, Titillium Web

4 october 2014
contents
Issue 260 : November 2014 : net.creativebloq.com

FEED FEED

SIDE PROJECT of the month 16

Tim Evko explains how he put together an
app to help developers improve their skills
clients from hell
A 3D designer struggles when a client gets
a bit click-happy with their Delete key
Workspace 18
Simon Richings introduces AnalogFolks strangely shaped London
office, complete with three mezzanine levels, phone booths for when
the creatives need total focus, and lots of techy toys
17

BEYOND PIXELS 20
Ian Coyle shares his mission to build a
motorbike with his own fair hands

NEED list 21
What we want, including an app that makes
your mobile screen mirror the sky outside

EVENT report 23
Sally Jenkinson reports from the 10th
and rather more mature dConstruct

voices
Consulting with clients 26
Proper consultation is the key to a great VOICES
client relationship, says Simon Foster
INTERVIEW 32
Death to all devices 28 We chat to designer
Devices are about to change forever. and typographer
Brandon Schmittling investigates JasonSanta Maria about
how he makes his decisions,
Big Question 38 and why some of the very
We asked the professionals: whats best type choices are
thesecret to a winning pitch? almost invisible

Q&A 40
FT Labs Andrew Betts on why its time for

the web community to take itself seriously
Wordpress evolution
Marko Heijnen looks at the 4.0 update and
speculates on the future for WordPress
SUBSCRIBE to net
UK readers turn to page 24
US readers turn to page 57
42
and save up to 50% Worldwide: netm.ag/17vH1hU

6 november 2014
 Contents

regular
regulars
GALLERY 44 Network 8
The latest mail, tweets, posts and rants
Brian Hoff shares the
new sites he rates this Exchange 10
month, including Airbnbs high- Tim Nash, Kirsty Hulse, Ben Scott and
profile rebrand Steve Grunwell answer your questions

Showcase
design Challenge 52
Three designers tackle aquarium sites

Focus on 56
Gene Crawford on off-screen navigation

profile 58
We go behind the scenes at Bearded

how we built 64
We chat to the team behind On the Fence

PROJECTS
Build smooth digital UIs 84
Mark Jones on how the Famo.us framework
brings native app performance to the web

Features
Boost your Git workflow 94
Tobias Gnther explains how you can use
Tower to streamline your Git workflow

The Pros guide A journey into Head-to-head 96

toRWD 68 digital longform 76 Alex Matchneer on React versus Ember.js
Justin Avery on how to use basic RWD Paul Woods introduces the tools and
techniques to build asolid foundation, techniques you need to get started Build hybrid mobile apps 98
then take your design to the next level creating rich digital longform stories James Miller uses Ionic to build a mobile
app in a rapid development environment

web standards 103

project
Create a dramatic
perspective shot 90
Phil Coffman on how to use
After Effects with Photoshop
to display your work in a new way
Exclusive video tutorials!
Look out for the video icon in the tutorials for
exclusive screencasts created by authors
Ruth John takes a look at the Vibration API
Develop a browser game 104
Anton Mills guides you through how to
create a browser-based game with Phaser
Take the pain out of Sass 108
Ian Carrico explains how to set upyour
Sass development environment properly
ACCESSibility 114
Robin Christopherson on virtual assistants

november 2014 7

contact us @netmag
freelance rate
survey 2014
I enjoyed the Creative Bloq
post called Freelance Rates
survey 2014: Are you on the
money? Where can I find the
results for the 2013 survey?
Martin Bak, Slovakia
For the past few years,
UK-based designer and
developer ColeHenley has
published his rates surveys.
You can find previous
surveys on his personal site
at netm.ag/Rates-260.
I dont agree
Many thanks for all the great
work in issue 258. I would
however like to challenge you
on Katie Kovalcins article on
The Top 10 Learning Websites.
I use Udemy, so I know how
it works. I thought the article
was misleading to anyone
who hasnt tried it out. Im
8 november 2014
/netmag +netmagazine
not saying its better than
theothers, but I think she
waswrong in some areas.
For example, in the article
she said: It can be pretty hard
to find a really great course
unless you are willing to shell
out a lot of money. This is
complete rubbish. If you cant
find a cheap course on Udemy
that is good then you havent
looked far enough.
Nigel Brewster, Durham, UK
Styles of learning vary
greatly from person to
person. With this in mind
we didnt set out to uncover
the single best learning site.
Rather we wanted to present
a menu of options from
which our readers could
choose, which is why Katie
looked at a range of
different aspects of each
service (tasks, scope for
growth and so on). We
sought togive our readers
some information and an
opinion they could use to
inform their choice. Indeed,
in her conclusion, Katie
wisely tells people to try the
different services andsee
which works.
Where to start
I had had no idea what I
wanted to do with my life.
Ihave dabbled in a little bit
of everything, but a couple
of months ago, I started
feedback@netmagazine.com
looking into web design and
development, and I have
found my passion. While I
am still just starting to learn
HTML and CSS, I am alittle
overwhelmed by all the
different ways that I could go.
I read your magazine every
month, and take everything
in. But I was hoping you could
throw out a helping hand or
point out someone who could
give me some advice.
Kyle Narovich, Cadillac, MI
Its great youve discovered
your passion welcome to
the web community! In
many ways, the web
community is the answer to
your question about finding
advice. Wed say follow
people whose work you find
fascinating on Twitter,
check out their personal
pages and ask questions.
Online learning Last issue, Katie Kovalcin explored a range of online code schools,
to help readers find the best site for their personal learning style
Mail, tweets,
posts and rants
net.creativebloq.com
Youll find everybody is
friendly and happy to help.
On the real-world side of
things, try and find some
local conferences and
meetups to attend. Make
aneffort to join in and you
will find itll pays dividends.
Good luck!
steroid apps
It was a great piece on building
smooth native apps with
Steroids (issue 259). How
would you go about integrating
a database search?
Tunde Akinbode, Lagos, NG
Article author Alex
Newmansays: You can
usethe localStorage API,
orlook into building an
APIto work with your data.
Ilike MongoDB, Express
andNode.js.
 Network

THE POLL
COOL Stuff
Whats the best way to We learned

find new clients?

This month
Dissecting Apple
Apple launched two
Ask past clients to Give your site an new phones and
recommend you SEO makeover 7% a watch. And the world
and your work 26% If people cant find stopped, and hung off
Happy clients should you, how will they every single one of Tim
be your best fans, so hire you? Cooks manicured words.
ask them to shout! Even cynical journalists
Write for industry were swept along. The
Write an ebook 4% publications 7% New York Times David
Show the world Publication helps Carr put himself on the
youre the master of cement your status psychiatrists couch and
your chosen subject as an expert asked: why?
netm.ag/apple-260
Offer free help Create an online
andadvice 14% course 1% Ditching Twitter
Offering a free taster Sharing skills is a Its impossible to
of your services can great way of getting imagine being part
help drive leads your name out there of the web community
and not having a Twitter
Blog 10% Traditional word account and probably
Blogging can convey ofmouth 32% being on it far too much.
passion for your Do good work, do it well However, Erin Kissane isnt
subject and your work and happy clients will convinced that being part
want to tell their peers of the great Twitter hive
is doing her any favours.
In her essay Ditching

From our timeline Usually half a ham

andcheese baguette,
Twitter she charts how
her relationship with
Whats in your daily work bag? screwed up Post-its the service has changed
scrawled with illegible notes, irrevocably.
Chewing gum. A load In my work bag: and a blunt pencil. netm.ag/twitter-260
ofchewing gum. I computer, mankini, @KevnGibsn
cantwork without it! dongle, leurve. Be careful what
@DanMReese @brucel Laptop, charger, youwish for
adapter, mouse, All that glitters is
I like to keep my bag Random cable portable charger/power not gold, even if
simple and uncluttered. adapters, business bank, cables, ear pods, pen, its an Amex and youre
Laptop; headphones; cards, Post-it notes, notebook, USB flash, tissue, sipping Bollinger in first
phone charging cable plus chargers, old receipts, iron phone (doh) and mints. class. Rather, looking back,
deodorant and ibuprofen for supplement pills. @SaraSoueidan blogger Ali Mese felt his
emergencies! @PikiDigital corporate life was a gilded
@AndiSmith Laptop and cables, tomb. So he quit. Sadly,
Keys, bus card (usually hearing aid batteries, the start-up dream wasnt
Mostly food. In fact, empty), handcream and net magazine, rainproof quite the escape hed
alot of food. The rest lipbalm in delicious coat, Nikon DSLR, and whatever hoped for.
isalready at work! flavours, a notebook and pen. book Im reading currently. netm.ag/startup-260
@TimSeverien @thebabydino @j_mes

november 2014 9
 Practical
advice from
Send your questions to netmag@futurenet.com industry experts

this month featuring... QUESTION OF THE MONTH

Tim Nash What is the single biggest factor in

Tim is a consultant who
specialises in WordPress influencing a site to rank nowadays?
development and training Earl Grey, Gibraltar
w: timnash.co.uk
t: @tnash

Kirsty Hulse
Kirsty is head of SEO
atLondon-based search
agency Found
w: kirstyhulse.com
t: @Kirsty_Hulse

Ben Scott
Ben is a senior web
developer at the BBC,
where he insists on RWD
w: reload.me.uk
t: @BPScott

Steve Grunwell
Mastering SEO When it comes to scoring highly in Googles ranking, theres no silver bullet but reading
Steve is a full-stack
Googles Webmaster Guidelines should ensure you get the best start possible
developer and speaker
based in Columbus, OH
w: stevegrunwell.com Kirsty Hulse: There isnt a single top factor that influences ranking. Google uses
t: @stevegrunwell literally hundreds of different metrics to determine a sites quality, including links,
dwell time, spelling and grammar, and social signals. As a first point of call ensure
that your site is appropriately accessible to search engines. Theres no point in having
great content or off-site engagement if Google cant crawl your site properly. Googles
Webmaster Guidelines (netm.ag/guidelines-260) are an ideal place to start.

WordPress adoption in enterprise stacks. WordPress

Time to move on?
Do you think WordPress has had its time?
So many devs seem to hate it.
Mustafa Kurtuldu, London, UK
Tim Nash: WordPress is currently
managing around 22 per cent of websites
and that figure continues to grow. The
number of contributors is increasing and
theres an increase in the rate of
is not goinganywhere. As for haters,
thats justthe nature of the web.
SEO
Meta data
Do meta-keywords matter any more?
Sergei Golubev, London, UK
KH: No, Google stated in 2009 that
itdoes not use meta-keywords to

10 november 2014

Meta data Search engines like Chinas Baidu still use meta data to work out their rankings
determine ranking, and Bing has cited
that these can be used to flag spam; so
meta-keywords largely just serve as a
way of signalling to competitors your
target keywords. Having said that, this
does depend on the country you are
operating in, as some search engines
such as Chinas Baidu still use them.
PHP
The right foundations
Do you think its important to be able to
use PHP without a framework such as
Laravel, before you can use it with one?
Andrew Milne, Bristol, UK
Steve Grunwell: Id compare it to
learning an instrument: music theory
isnt nearly as sexy as learning some
sweet guitar licks, but understanding
why something works is just as
important as knowing how to do it.
Thats not to say Laravel cant be your
first foray into PHP, but if you find
theres something you want to do that
Laravel doesnt have a method for,
checkthe PHP docs.
Sass
Keeping code elegant
Do you have any tips for writing Sass so
that you dont end up with loads of
compiled style sheet bloat?
Elliot Davies, London, UK
Ben Scott: Sass is a powerful tool but it
lets you do smart and silly things with
equal ease. When writing Sass I would
constantly remind myself: if something
would be a pain to write in regular CSS,
then it is probably abad idea. Avoid
excessive nesting usea naming
convention such as BEM toavoid styles
overlapping. Be wary ofusing @extend
and instead opt for modifier classes.
Formore tips, read this article by Nicolas Search (netm.ag/graphsearch-260).
Gallagher (netm.ag/gallagher-260).
Sass
Workflow
What editor/preprocessor setup do you use
for your workflow and why?
James Bavington, Rugby, UK
BS: Sass is my CSS preprocessor of
choiceas it offers advanced features
thatother tools lack. I try to avoid using
them where possible, but it is useful to
have them there if needed. Breakup
(github.com/BPScott/breakup) allows me to
create per-viewport style sheets without
creating lots of per-size partial files.
Iuse Grunt to watch for file changes
andtrigger compilation, and Sublime
Text 2 is my text editor.
WordPress
Non-Server Fixes
Whats the best way to improve
performance on a cheap host that you
onlyhave FTP access to?
Robert ORourke, Liverpool, UK
TN: With server side off-limits, look
athow you can reduce http requests
(minification and concatenation of
Q&As
3 simple steps
Whats the best outreach
strategy to earn natural
links and exposure?
Pinnacle SEO, Armagh, UK
Kirsty Hulse: There are a number of
tips for this, but start by trying to
better understand your audience.
Pinnacle SEO @PinnacleSEOTwit
Know your Audience
Getting apicture of the human
behind the conversion helps you
create tailored content, which should
boost engagement. Try Google Analytics
Demographics & Interest reports (netm.
ag/analytics-260) and Facebooks Graph
Pinnacle SEO @PinnacleSEOTwit
Test Your Ideas
Usability testing services, such as
Feedback Army (feedbackarmy.com),
will provide answers to a text-based
survey about your website or page,
whilefivesecondtest.com gives an idea of
peoples first impressions of your designs.
Pinnacle SEO @PinnacleSEOTwit
Paid Promotion and Seeding
Content often needs a little push
toget the level of reach we want.
Reddit Sponsorship and paid Stumbles
can be hugely effective, and content
platforms like Outbrain (outbrain.com) can
give your content exposure on some huge
publications with massive readership.
november 2014 11
exchange Q&As
CSS/JS), reduce the size of files (especially
images) and look at lazy loading. On the
theme side, if possible look at reducing
the number of DB queries and caching
fragments. You could also consider going
completely static. Depending on your
hosting you may wish to offload static
assets to a CDN. Finally consider an
alternative host FTP access-only is
never a good sign.
SEO
Pandas and Penguins
Weve had Panda for content and Penguin
for links. What direction do you see search
engines taking with future updates?
Andrew Isidoro, Cardiff, UK
KH: With OK Google and its transition
into the Internet of Things, Googles
future is heavily invested in voice search,
connecting multiple devices without the
user even having to pick them up. When
it was announced, the Hummingbird
update was cited as a platform, which
suggests that Google will continue to
build upon this. For SEO, this means
ashift from traditional targeted
keywords to more natural language-
centric strategies. Think FAQs, location
based forums and reviews.
Wordpress
SPDY and HTTP2
Whats your current feeling on SPDY/
HTTP2? Should sites (not necessarily
WordPress ones) be trying to implement it?
Phil Nash, London, UK
TN: While HTTP2 is still in its infancy,
its based on the more mature SPDY
protocol (netm.ag/SPDY-260). The latter is
already being used in the production of
SPDY is pronounced speedy and is a protocol thats
been designed to speed up the web.
12 novemebr 2014
servers on major web services such as
Google, Facebook and Twitter, and in
most circumstances it reduces page
load.If you have root access to a server,
implementing SPDY is a fairly simple
process. Its also supported by major
vendors such as Apache and NGINX.
Implementing SPDY on your server is
aquick and relatively simple win for
performance and security.
PHP
embracing Laravel
My app choked on PHP Smarty, so I moved
to JavaScript-based templates, with great
success. How is Laravel?
Dan Nagle, Huntsville, AL
SG: Laravels default templating system,
Blade (netm.ag/blade-260), is rather
simple, yet super-effective and holy
smokes is it fast! One thing I really enjoy
about Blade is that while you can work
with raw PHP in your views, the requisite
<?php ?> tags stick out as a reminder to
keep your application logic out of the
views. As for JavaScript, while I havent
done it myself, I have heard from
colleagues that Laravel works really
wellwith the popular JS frameworks.
WordPress
jQuery calls
WordPress can include an extra call to
jQuery on the frontend. How do you
prevent that?
Tim Evko, New York, US
TN: If you are seeing multiple versions of
jQuery loading, its normally because a
theme or plugin is loading the additional
version rather than WordPress. You can
check if WordPress has jQuery registered
by using wp_script_is( jquery ); . To de-
register jQuery:
function net_remove_jquery() {
if ( ! is_admin() && wp_script_is(
jquery ) ) {
wp_deregister_script(jquery);
} can pre-minify as part of our workflow,
} before getting to WordPress, then this is
add_action(wp_enqueue_scripts, net_
remove_jquery);
The above code checks that we areon not
on an admin screen and that jQuery is in
Embracing Laravel This frameworks templating
system, Blade, is simple, fast and effective
our scripts list, before de-registering it.
However, if a theme or plugin is forcing
aversion of jQuery in thehead and not
through registering the script with
WordPress, that script will remain.
Ideally you want to remove the spurious
call by the plugin ortheme rather than
removing the WordPress version.
SEO
Should I care about SSL?
My site is now SSL-only since Google
started factoring SSL in ranking. Most
sitesare still not bothered. Is it worth
thehassle?
Dan Nagle, Huntsville, AL
KH: In August this year Google
announced that sites with HTTPS would
be used as a ranking signal. However,
this is a small tweak to the algorithm,
currently affecting only 1 per cent of
queries. I would not recommend making
this change purely for SEO reasons, as
impact is likely to be minimal.
WordPress
Minification
Whats the best practice for concatenating
and minifying CSS/JS? Using
wp_enqueue_scripts versus Grunt?
Matt Walters, London, UK
TN: Its not so much about best practice
but what fits your workflow. Where
possible, I would try to avoid leaving it to
WordPress, as we dont want to put extra
strain on the server at page load. So if we
going to be a more efficient way of doing
things. Grunt is a good tool for this and
we can let the web server handle it with
tools like the PageSpeed Module (netm.ag/
speed-260).
 T HE AWARD - WINNING

TAILORED FOR TABLET.

Experience additional multimedia content
in our fully interactive iPad edition

TRY IT
FOR FREE
TODAY!

Computer Arts readers know design matters. Thats why weve completely
reinvented our digital edition as a fully interactive iPad experience with
impeccable usability. Theres also additional interactive content,
such as image galleries and bonus videos, which bring the
motion content featured in the magazine to life.

TRY IT FOR FREE TODAY WITH

OUR NO-OBLIGATION 30-DAY TRIAL AT
http://goo.gl/sMcPj (UK) or http://goo.gl/aib83 (US)

Digital replicas also available on Google Play, Nook and Zinio

 People, projects
& paraphernalia

This month Featuring...

Side PROJECT OF THE MONTH 16 Clients FROM HELL 17 Workspace 18

Tim Evko explains how hes created a One 3D designer has a nightmare project Simon Richings introduces AnalogFolks
handy three-part app aimed at helping when a client gets a little too click-happy London office, complete with three
developers improve their frontend skills with their Delete key mezzanine levels and lots of techy toys

BEYOND PIXELS 20 Need LIST 21 Event REPORT 23

Having fallen in love with motorbike riding, What we want this month, including an Sally Jenkinson reports from the 10th
Ian Coyle shares his new mission to build appthat generates psychedelic gradient outing of Brighton conference dConstruct
abike of his very own backgrounds for your devices and this year its all grown up

november 2014 15
FEED
Side project
The practice app
How Tim Evko created a three-part app to help
devssharpen their frontend skills
Side project of the month
net: Lets kick off with an easy one:
whoareyou and what do you do?
TE: Im a frontend web developer from New York.
Currently, I work for an agency where I build
WordPress themes and web applications. In my
sparetime, Im usually working on a side project
orwriting an article about web development.
Info
job: Frontend
net: And your side project whats that all about?
webdeveloper
TE: The Practice App (tevko.github.io/practice) exists
company: Loewy Design
tohelp other frontend web developers get better at
w: timevko.com
their trade. It has three different sections. Firstly, the
t: @tevko
random section gives out 20 random tasks for users
tobuild on CodePen, with each task organised by
difficulty level. Next, the Dribbble section uses the
Dribbble API to pull in arandom Dribbble shot, and
the user can choose to be redirected to CodePen where
they can try to duplicate the shot with code. Finally,
the third section allows the user to solve a random
16 november 2014
open issue on GitHub. Its a great way to contribute to
the open source community and Ihave Thomas Davis
of cdnjs to thank for the idea.
net: How did the idea come about?
TE: One slow day at work last year, I decided that
Iwanted to sharpen some of my frontend skills by
building something cool on CodePen. The only
problem was that I didnt have much inspiration,
andIcouldnt find a site that gave cool suggestions
so I made my own!
net: How does the site work under the skin?
Howdoes it generate its ideas?
TE: The site is hosted on GitHub Pages, and I use a
couple of different libraries for Markdown to HTML
formatting, keyboard shortcuts and scrollbars. I use
aspreadsheet to generate the ideas every week, which
is then converted to a JSON file. The ideas are piped
into the page with AJAX at the users request.
net: Whats the reaction been like?
TE: The response has been great. Traffic has
increasedconsistently, thanks to mentions from
allover the web. The project has had plenty of
contributors on GitHub, and has generated a bit
ofpraise on Twitter aswell.

SAVING SPACE
Exclusively for net: the latest in a series
of anonymous accounts of nightmare clients
Clients from hell
Im a 3D designer who creates mockups
forliving spaces. A while ago, a decorator
commissioned me to design several apartments
forher. Six days into the project, she calls me:
Client: I need you to add my company logo to
allthe pictures of the apartments.
Me: Okay, no problem. Just send me the logo.
Client: Its on my website.
After spending far too long looking through her
website, thebest option I can find is a 320x320px
logo from the main page.
Me: Im sorry, but this picture is not big enough.
Do you have the original files that came with the
picture? From whoever designed your logo?
Client: Oh I deleted those years ago. They were
Illustration: Ben OBrien huddleformation.prosite.com
taking up space.
She tells me who designed it, and I track him
down, but he has no backups.
Me: We have two options: I can either use this
tinylogo and produce something a bit small
andabit blurry, or I can redesign your logo.
Client: Well redesign it then. I dont want it
lookingugly.
Me: At my currently hourly rate, I will have to
charge an additional 200 for the logo redesign.
Client: What?! Why would you do that?
Me: Ill be doing more work. It takes time to
redesign a logo.
She grumbles but agrees. I recreate the logo and
design all of the apartments before uploading the
pictures to her website. Despite the extra fee, she
is delighted.
A year or so later, she calls me up for additional
work, and makes a point of saying I wont be able
to charge for the logo redesign again.
Me: No, of course I wont charge for that just
send me the logo I made you last year.
Client: I dont have it any more. I deleted it. It was
taking up space.
Me: So you want me to design it again? For free?
Client: If you have to. But you should still have
it,right?
Frustratingly, I had deleted it in order to free
upsome space.
clientsfromhell.net
Feed
How to
Optimise images
for the web
Web images must be beautiful,
butthey also need to be generated
with site speed, efficiency, context
andusability in mind
top tools
It is impossible pin down one tool
as the best image optimiser.
Across our Twitter followers some
programs did, however, receive
more recommendations than
others. tinypng.com, jpegmini.com,
smushit.com and kraken.io all fared
well. However, the hands-down
winner was ImageOptim-CLI
(netm.ag/imageoptim-260).
Size versus quality
Speeding up image load times
inevitably means throwing away
information and sacrificing quality.
Different compression tools treat
this trade-off between size and
quality differently. ImageOptim-
CLI, made by Jamie Mason, runs
batches of images through
different optimisers. Mason has
also run comparisons of the main
compression tools. Visit his GitHub
repository (above) for his findings,
and more about ImageOptim.
Other factors
A small image isnt a sure-fire
winner theres a lot more to
handling images correctly for the
web. Cropping for user focus might
help drive sales conversions, for
example. And factors like giving
files friendly names and precise alt
text all play an important role in
making great web images
(netm.ag/imageSEO-260).
november 2014 17
FEED
from the web
1
Tucked Under a bridge
Simon Richings introduces AnalogFolks quirkily
proportioned London office, filled with techy toys
workSPACE
AnalogFolks London studio
isin occasionally trendy
Clerkenwell, surrounded by more
than its fair share of great coffee
shops. Its nestled underneath a
hotel and a road bridge, so people
are always surprised when they
enter the large and unusually
shaped space and find it full of
natural light.
The most important thing about
our space is its flexibility. We work
on a broad range of marketing
projects, from online platforms
tofilm. The office has three
mezzanine levels (1), which may
seem a little greedy. However, it
means there are plenty of distinct
areas for us to arrange ourselves in,
18 november 2014
without ever being in danger of
becoming cut off. Regardless
ofrole, were all trying to make
greatwork together.
Lots of workplaces have this
famous Anthony Burrill poster
(2),but we really do believe in its
simply stated maxim. Also, weve
realised the be nice to people
partactually brings a competitive
advantage, as its another reason
why talented people want towork
here. So, ironically, this actually
makes us quite evil.
Our guiding principles are dotted
around the space and this is one of
them: We use digital to make the
analog world better (3). Its
fundamentally about not using
technology for technologys sake,
and always thinking about people
and value first.
Having said that, we really do
like playing with new toys. Theres
always something remarkable to
interact with in thestudio. Were
using this drone (4) in an upcoming
hack day.
The phone booths (5) are cool
little cubicles which you can escape
to at those times when you need
pure focus, whether thats for
writing aparticularly tricky piece
of code or penning a few words
about youragency for a popular
digital creativity magazine. You can
also use them to make phonecalls.
Office canine Frankie (6) is an
important fixture. He is super-
attentive and very well-behaved.
Especially if youre concealing
abiscuit in your right hand.
Simon (in the foreground) is executive
PROFILE
creative director at the London office
of independent global creative agency
AnalogFolk (analogfolk.com)
FEED
Beyond pixels
Stuff I like
Carl smi t h
Advisor, nGen Works
devianthippie.com
HipChat/Slack
Yes Ive done the unthinkable,
Ive put HipChat and Slack
next to each other. But thats
actually the way I use them.
Iuse HipChat at nGen Works,
and Slack at the Bureau of
Digital Affairs. Both do an
amazing job of keeping me
connected to my teams.
hipchat.com, slack.com
Polldaddy
I use this to find out how
different groups of people are
feeling about a topic from
finalising an agenda to voting
on a company policy. People
respond quicker to the survey
format. There is some
information I absolutely
couldnt capture without it.
polldaddy.com
Google Docs
One of nGens core values is
transparency and this is the
app for that. Everyone can
see whats being documented
and provide feedback in real
time. Were experimenting
with collaborative proposals
where clients can contribute
in the same manner.
docs.google.com
20 november 2014
motorcycle building
This month having been swept off his feet by the joy of
motorbike riding, Ian Coyle is on a mission to build his own
beyond pixels
I had been pushing the motorcycle in the hot
July sun for a mile when I heard a third person
astutely comment: It works better if you ride it!
Pausing to catch my breath and survey the long
uphill road back to my workshop, I began to
question my dedication to learning to build these
two-wheeled gasoline-powered machines.
Carburetors are the bane of my existence these
days. In theory, it seems easy: airflow plus gasoline,
add a spark, equals combustion. But to be honest,
not long ago, I didnt even know what a carburetor
was, let alone the difference between a regulator,
rectifier, stator and rotor.
I rode my first motorcycle eight years ago,
oneday after I sold my jeep to pay for it and seven
daysafter I had crashed over the handlebars at
themotorcycle training class. It was a beautiful
Yamaha XS650 Special, built by Jano Bachleda
(janocycles.com), a talented craftsman and now
goodfriend. Forthe first few summers, he taught
me how to ride the beautiful curved roads through
the mountains of Colorado.
There is something romantic about hitting
theroad on a bike. Like most stories, there is a
beginning, middle and end. The first chapter is
about leaving everything behind. Even with a group,
youre alone on the bike. Slowly you leave behind
your everyday distractions and preoccupations.
Themiddle chapter is the ride. Engaged only in the
journey, its fast straightaways, long curves,
switchbacks and the feeling of the machine. Then
perhaps after a mountain-top pit stop its on
tothe third chapter: the ride home.
Ive since sold the XS to build another bike, but
Istill remember my first ride. Looking back now,
that motorcycle changed my life and set me on a
new path of creative pursuits. About five years ago
Idecided I wanted to build my own bikes, and my
first project was to reimagine my own version of
myfirst XS650. Its been a fun, humble, and at times
frustrating pursuit. Ive not read Zen and the Art of
Maintenance, but Id call the phase Im currently in
Patience, and the Art of Asking for Help.
Growing up, I was never very interested in
mechanics. There were many days my father
askedif I wanted to help change the oil in the car
orlearn how to replace its brakes. All I wanted
todowas play on our new Apple IIGS. But as Im
learning how to build these bikes, I find I call him
most weekends to seek his advice. While the irony
isnt lost on me, its been one of the best parts of
this new creative pursuit.
Ian is creative director at
PROFILE
Huge/KingCoyle (hugekingcoyle.
com), aPortland-based
innovation lab focused on
design,culture and craft
 Need list

Need list

Stuff we want
Small objects of web design desire: from a collection of essays designed
to inspire, to a psychedelic gradient background generator

1 2 3

antetype  130 per license The business of web design 10 reddit - ask me anything free

4 5 6

YoWindow Free colorful css generator  Free tiiny free

What we think
(1) Designed by designers for designers, Antetype is a tool for creating responsive UIs for enterprise sites and apps (antetype.com).
(2) The Business of Web Design is a collection of short essays designed to spark inspiration and feed creativity (netm.ag/Busweb-260).
(3)AnAndroid app from the makers of Reddit, Ask Me Anything curates the sites collection of online interviews accessibly (netm.ag/Reddit-260).
(4) YoWindow is a magical weather app that makes your phones screen mirror the outside world, and its new to Android (netm.ag/Yo-260).
(5) The Colorful CSS Gradient Background Generator does what it says on the tin, gaudily and in real time (netm.ag/CSSback-260).
(6) Tiiny is a sharing app that enables users to share tiny looping images and videos, each of which disappears after a day (netm.ag/Tiiny-260).

november 2014 21
 next
month

Essential
JavaScript
22 JavaScript tools every web designer
anddeveloperneeds to know

PLUS
Build a web UI with Create modular Prototype with
HTML5 Boilerplate content systems Origami and Quartz
and jQuery UI inWordPress Composer

ISSUE 261 on sale 3 November

Print edition, back issues and special editions available at

myfavouritemagazines.co.uk
Digital editions available on iTunes, Google Play, Kindle, Nook and Zinio

net.creativebloq.com

dconstruct
This year marks the 10th birthday of Jeremy Keiths Brighton
conference,and its all grown up. Sally Jenkinson reports
Event report
Date: 5 September 2014
Location: Brighton, UK
URL: 2014.dconstruct.org
This year, dConstruct celebrated its 10th
birthday, and with this new milestone came
ashift in attitude and pace. dConstruct had grown
up, and it wasnt afraid to show it.
A Brighton-based technology conference with
adifference, the established gathering is renowned
for showcasing atypical aspects of working with the
web. Its strength has always been the breadth of
itsexpert speakers backgrounds, brought together
through an expertly curated theme for the day
thisyear, Living with the Network.
dConstruct 2014 once again delivered an
exceptional, thought-provoking set of talks.
Photography: Tom Morris tommorris.org
However, this was not the lighthearted conference
of years gone by. Where previously there were
addicted toasters, YouTube video comments and
erotic fanfiction passages, instead the day brought
history lessons, dystopia, complex stories warning
about privacy and freedom, and a great deal of
political undertones.
The powerful talk content was emphasised by
anotable lack of slides in most sessions, coupled
with heavilyscripted, highly polished deliveries.
Feed
EVENT GUIDE
Fronteers
Date: 9-10 oct 2014
Location: amsterdam, nl
Founded in 2008, Fronteers is
Europes largest conference for
fontend developers. Speakers
include Meri Williams, Rachel
Nabors and Sara Soueidan.
fronteers.nl/congres/2014
Paris web
Date: 16-18 oct 2014
Location: paris, FR
A top line-up of experts gathers
in Paris to explore accessibility,
design and open standards.
Talks from Bruce Lawson,
Benjamin Becquet and more.
paris-web.fr/2014
The web is
Date: 30-31 Oct 2014
Location: cardiff, uk
Warren Ellis kicked off the day by discussing To celebrate 25 years of the
historical cunning folk, and giving us a reminder web, 16 of the greatest digital
that modern web workers are ... part of something innovators will come together to
very old, yet constantly renewed. Next came a talk tell their stories. Speakers will
from Georgina Voss, around the frictions in the include Brad Frost, Linda Liukas
network, before Clare Reddington provided some and Keren Elazari and more.
light relief in the form of her Playable Cities. theweb.is
Other highlights included Brian Sudas lecture
onbalance and our relationship with the network, full frontal
and a talk from Mandy Brown (above) on how Byron Date: 7 november 2014
the immortal light bulb illustrates how the network Location: brighton, uk
is as messy, sexist, racist and fucked up as we are. The webs brightest and best
Finally, the excellent Cory Doctorow returned for gather in Brighton to share
anencore of his 2004 talk, closing out the day. andexplore ideas surrounding
The shift in focus and delivery appeared to topics like open source, CSS
polarise feedback from attendees, with some andthe physical web.
finding the days shift in tone and delivery puzzling, 2014.full-frontal.org
but others praising the conference for providing
compelling talks unlike those found anywhere else. thingMonk
As usual, all sessions were recorded and can be Date: 2-3 december 2014
found at netm.ag/dConstructvids-260. Location: london, uk
Excited by the Internet of
Things? Then ThingMonk is the
Sally (sallyjenkinson.co.uk)
conference for you. Now in its
PROFILE
isafreelance technical
consultant, speaker and author, second year, the London show is
who helps people with their now a two-track event.
digital strategies thingmonk.com
november 2014 23
 Two simple ways to subscribe
Online: www.myfavouritemagazines.co.uk/netp1y
Phone: 0844 848 2852 and quote code NETP1Y
Subscribe to
And get 10 issues free*!
Great Reasons to Subscribe
Get 10 issues free* Stay updated on the new
Get your copy before net hits web technologies
theshops Exclusive access to the worlds
The perfect gift for Christmas! leading experts

UK offers 6 month DD 25.49 (Save 26.89)*

1 Year 53.99 (Save 23.88)* 2 Year 93.49 (Save 62.25)*

Not from the UK? Here

are your exclusive offers Special
Europe: 33.99 (Every 6 months) Christmas
ROW: 41.49 (Every 6 months) Offer!
Live in the US? Turn to Page 57

Terms & conditions: * UK savings compared with buying a two year subscription from UK newsstand. Europe and ROW have no set newsstand price
and therefore we cannot advertise the specific savings you will make. You will be charged in GBP. This offer is for new print subscribers only. You will
receive 13 issues in a year. Full details of the direct debit guarantee are available upon request. If you are dissatisfied in any way you can write to us
or call us to cancel your subscription at any time and we will refund you for all unmailed issues. Prices correct at point of print and subject to change.
Offerends 31 January 2015. For full terms and conditions visit: www.myfavouritemagazines.co.uk/terms
Opinions, thoughts & advice

business

consulting
with clients
Death to all Devices 28
In a world of super-flexible metal and the
Internet of Things, Brandon Schmittling
askswhats next for devices

Get your new designer-client

relationship off to a flying start
by investing some time in proper
consultation, says Simon Foster
Quite often when I start a new design
project or meet new clients, Im
interview32 reminded of a very common scenario from
We chat to designer, typographer and A Book my time as a hairdresser. At least once a day
Apart co-founder Jason Santa Maria about the a client would come in to the salon, sit in
secret to making the right type choices my chair and produce a picture from a
magazine of how he/she would like their
hair to look. If I was lucky, then the picture
they had selected was of a person with a
similar hair type, hair texture, skin tone,
face shape, lifestyle and so on.
But nine times out of 10 this wasnt the
case. So I developed a method of consultation
that would let the client know that we should
probably look at a different direction, while
still making them feel they were in control,
Q&A40 and without causing offence.
FT Labs director Andrew Betts on lucrative Firstly Id ask them to look at the picture
URLs, exciting new tech and why everything and describe the hair texture, thickness,
isnot awesome in the web community colour, length and then the face shape, skin
 Opinion

tone and eye shape to build up an overview

of the person in the photo. Then Id ask them
the same set things about themselves, at
which stage the whole point of my question-
ing would start to become apparent.
Id then ask, So why do you think this
person looks good with that haircut?, to
which the only logical reply would be along
the lines of: Because the stylist has consid-
ered their hair type and face shape and
lifestyle and cut the hair accordingly. So
what youre saying is if I cut your hair with
the same consideration to your own indi-
vidual needs youll look good? YES.

passing on knowledge
How does this relate to web design?
Consultation is an often-overlooked aspect
of the design process (especially by the less
experienced) but it is massively important.
How many times have you taken on a client
and theyve sent you a bunch of links to
websites they like that are very well
designed, easy to use and aesthetically
beautiful, but totally inappropriate for that
particular clients needs? And Im sure we
all complain about our clients making silly
requests like make it pop or make the Once the client feels comfortable talking
logo bigger, but who is to blame for that?
Well, surely its us. to you, feedback becomes something
We are the ones with the knowledge of our
industry, and we need to pass that on to our collaborative and enjoyable rather than
clients and potential clients. We need to give
our clients an insight into how the design painful and daunting
process really works and educate them how
to evaluate the needs of their particular point where the client trusts you and feels the why you can then start thinking about
project. This gives them the tools they need comfortable talking to you about their the how. How will the users needs be met?
to communicate with us effectively from an project, feedback becomes something Howwill you convey the clients message?
early stage, and makes the whole procedure collaborative and enjoyable rather than How will you build the site? How will the
far more enjoyable for everyone. painful and daunting. Once youve built this information architecture be handled? How
relationship, ideas from both sides can be often will you iterate the design phase?
Building bridges exchanged without fear of ridicule. We shouldnt forget that we arent really
Through educating our clients about our designing for our clients, we are designing
design process we can also manage expecta- Designing for users for their customers. A lot of clients have
tions, explain budget issues and make the Research is a fundamentally important phase ahard time understanding that, but if
process work for us, rather than against us. of any web project and I believe that consul- youconsult properly throughout the project,
We as designers need to remember that for tation forms a large slice of this. If you really you should be able to steer your clients
most clients, hiring a web designer is an get to know your clients business and thoughts in that direction, and produce a
intimidating experience, especially if youre culture, then you can start to understand better product, together.
not so tech savvy. why the website needs building in the first
Often clients just need a way of starting a place, why they have picked you to work on
Simon (simonfosterdesign.com) is a freelance
PROFILE

dialogue, and if you consult properly with it (which helps you understand client expec- frontend web designer, writer and lecturer based
them you can quite quickly build up a rela- tations), and why users will be coming to the in London. He specialises in responsive design,
tionship of trust. When youve reached a site. Once you have a good understanding of HTML/CSS and web typography

november 2014 27
VOICES Essay

28 november 2014

Mobile
Death to
all devices Illustration by Ben Mounsey
Super-flexible metal and the birth of the Internet of
Thingsmeandevices as we know them are changing forever.
Brandon Schmittling considers a future of device disappearance
Smartphones are stupid. In fact, all devices are
stupid. They make us dependent, they demand that
we respond to commands, theyre expensive and they
cut us off from the people around us. Our obsession with
them is limiting our ability to create a more seamless,
less intrusive digital world. We have the opportunity to
create a connected future that is so much more than 10
billion mobile devices flickering like stars in the sky.
The easy part
Until recently, the idea of developing effective AMOLED
display technology which unflattens screens was
fanciful. AMOLED combines OLED with Active Matrix,
allowing for the display of pixel data on a flexible surface.
There have been several versions of AMOLED devices
demoed since 2010. But only now, as engineers make
progress in using graphene to fashion essential parts
like memory chips and batteries out of the material, can
the possibility of completely flexible, paper-thin devices
become real. Just look at the Paddle concept phone from
Hasselt University iMinds (netm.ag/paddle-260). These
progressions will mean we can start saying goodbye to
the fragile, fussy and intrusive devices we have today.
The hard part
To get to this kind of post-device future, we need to
embrace the concept of device disappearance. This is
the unravelling of the idea that you physically need to
hold on to something in exchange for the integration of
Essay
digital experiences and touchpoints into the world
around. To do this will require changing how we relate
to objects and ourselves.
In todaysinterconnected era, functionality has become
concentrated into one single device. In the coming era,
functionality will become a diffuse array of digital
elements forming an intra-connected, self-organising
network. It wont be anything like a smartphone.
Socially, the very concept of a device is too small for
the future, and will exhaust itself in the long run. Devices
are tools that serve a cultural function. Once we no longer
have a need for them, they change.
In the West, we love to fetishise objects, and we do
thisthrough devoting time to our devices. In everyday
life we see tension between the human need to socialise
and the desire to spend time with our devices. Right now
we are swinging really hard into technology, but this
wont continue if we dont see a return on our efforts.
Culturally, theres a fallacy when we talk about
theconnected generation. While global smartphone
penetration will reach 60 per cent by 2019 (netm.ag/
smartphone-260), that doesnt necessarily mean those
devices will link to each other in a meaningful way, or
that information will be shared freely between them.
Connection alone does not solve anything.
Whats even more disconcerting is the fact that
complete connection remains a very new idea. All the
great world cultures share hero myths, in which heroes
disconnect and return with solutions. The Navajo twins
november 2014 29
VOICES Essay
left their tribe, Buddha his castle and King Arthurs
knights all marched off in different directions. Discon-
nection is as important now as it was then.
Getting people connected and then challenging the
idea of disconnection making disconnection seem odd
represents a complete shift in how weve told stories
for thousands of years. We need to accept that people
may not want or need to be connected. Goals and
attitudesare likely to change between generations,
making the ideal of connection a moving target at best.
Finally, were starting to experience device fatigue.
Were hunting around like never before for micro-
applications of the handheld device, and still its leaving
our hand. Thats what the Internet of Things is all about.
Now that we have a taste we cant go back.
The futures building blocks
Ive tried to identify five building blocks to make the
post-device future easier to imagine. As we invent it,
Were starting to experience device fatigue. Were hunting
around for micro-applications of the handheld device,
and still its leaving our hand. Thats what the Internet of
Things is all about. Now that we have a taste we cant go back
technology for the post-device future needs to promote
connectedness, create time, close literacy gaps,achieve
ubiquity and embrace evaporative data.
Promote connectedness
Connectedness is to do with removing boundaries
between digital and non-digital contexts.The more
connectedness we have, the more fluidly we can move
from one behaviour to the next, without interrupting
ourselves with a device reference. Consider Nod, for
example (hellonod.com).There will be a lot of testing
around this idea, until the contours of life with comput-
ing are better understood.
Create time
This is about reducing effort, automation, and helping
you shut off and shut out. Its also about the next wave
of privacy and emphasising the break between off and
on.We should be able to treat devices like paper (weight-
less, can be hidden, no breakage) and not worry about
damage and the time weve invested in them.
Close literacy gaps
Few people can fully use their current devices. Ideas like
programming without code are setting us on this path,
30 november 2014
but we need to think more generally like how we play
music without instruments. Future devices can increase
participation rather than curtail it.
Achieve ubiquity
As Cory Doctorow observed, computers are all around
us they just have cases we dont recognise. We need
away to trust whats going on around us if we are going
to embrace an explosion of computing thats even less
controllable. Fortunately, hes proposed a series of solves
that help to move us in the right direction, based on the
Trusted Platform Module (netm.ag/platform-260). Watch
him discuss the idea at netm.ag/doctorow1-260.
Embrace evaporative data
Deji Olukotun, the Ford Foundation Freedom to Write
Fellow at PEN American Center, said earlier this year
that the phone is essentially a device for collecting data
and pushing ads.Citizens will continue to want a
stronger sense of ownership over their data because all
citizens have the ability to be vocal activists now. As
reporting data becomes more universal, we accelerate
the creation of an economy based on personal data. Future
technology should offer users the ability to opt out or
benefit from their participation in this economy.
Death to devices
As we get closer to a future in which the format of our
technology changes so dramatically, well need new and
different terms, perspectives and expectations. If we
start thinking now about the shortcomings of our current
tech beyond can it control my TV? we can address
larger social and cultural issues, and bring humanity and
technology into closer alignment. With each wave of
computing comes opportunities and this one is clear:
lets expand our horizons, correct our course and start
imagining a world without devices.
Read an extended version at netm.ag/schmittling-260
PROFILE
Brandon Schmittling (@elbuenob) is
seniorinteraction designer at Huges Brooklyn
office(hugeinc.com), and has presented at
SXSW Interactive
VoiceS Interview

Jason santa maria

Words by Martin Cooper Photography by Daniel Byrne

The designer, typographer and co-founder

of A Book Apart explains why typography
is as much about looking to the past as
the future, and why some of the best
typography choices are invisible

32 november 2014
 Info
job: Senior designer,
Vox Media
w: jasonsantamaria.com
t: @jasonsantamaria
Voices Interview
The purpose of typography
Type has to serve two main
purposes. It has to introduce
and welcome a reader It
opens the door and lays out
the carpet. Once youre into
the article, the typography
needs to disappear. When
youre reading, it should be
like flowing water.It should
move you along.
34 november 2014
Id love to say there was a eureka
moment, but there wasnt. It was more
of an oh shit moment. Jason Santa Maria
laughs as he recalls how he first discovered
design and fell under its spell. I originally
went to school to learn about illustration.
Ive loved to draw all of my life, he says.
When I got to college I discovered loving
illustration wasnt enough to be good at it,
and everyone around me was considerably
better at it thanIwas.
That realisation propelled Santa Maria
intothe world of the web, and hes now one
of the webs most renowned designers,
typographers, speakers, teachers and com-
munity members, and he has the CV to
proveit. His whistle-stop tour of previous
jobs includes spells as creative director at
Happy Cog, A List Apart and Typekit; he co-
founded A Book Apart and Editorially; and
has his own studio, Mighty (madebymighty.
com). His current gig is as senior designer at
Vox Media (voxmedia.com).
Born and raised in Philadelphia, Santa
Maria moved to New York in 2007. It was a
city, he confesses, that possessed a certain
romantic pull at that time. His decision on
where to set up camp was, however, a more
pragmatic one.
I ended up in Brooklyn because of the
property prices, he smiles. But even then
it was a place where you could gather to-
gether with a lot of people of a similar age
who were practicing similar trades, and its
where you could get a studio space. Design
has always thrived around here. Not only in
Brooklyn but certainly in Manhattan back
from the days of all the ad agencies.
Turning to type
Santa Maria is, of course, best known as
a typographer. It all started when I was in
school, he recalls, explaining how he and
his friends immersed themselves in Ray Gun
magazine, and the work of David Carson and
Neville Brody.
They were the designers who were
reallypushing typography in uncomfortable
and interesting directions, he recalls. A
lotofpeople in my classes myself
included wereswept away with grunge
letterforms and their malleability. For
better for worse,that was where I started to
really lookat type as something more than
just words.

Above Santa Maria at work in the Brooklyn apartment he shares with his girlfriend Top right A Polaroid
OneStep the designer saved from his parents attic: Photography is one of my big loves, he says
His tastes may have changed, but those
early typefaces mark a special place in Santa
Marias development. Looking back, I might
not appreciate those designs aesthetically
but Iappreciate them for what they did: they
opened the door for me, he explains. They
made me want to learn more about classicism
and historical typographic movements.
Defining type
How does Santa Maria define typography?
Its the written word given visual form,
hereplies. Thats the
si mple def i n it ion, You know, more
because it can be so much
more. Type can bea story often than not I just
in its own right.It can be gather up a bunch of
a supporting layer to a
story, and itcan be a dis- typefaces that are
tracting layer, too.
Despite his boundless
contenders and play
enthusiasm for type, with them
Santa Maria is at pains to
emphasise that its just one component in
adesigners toolbox. Design has many
ingredients contrast, hierarchy, colour
andgrid systems, type. To be a designer, you
must understand how they each influence a
design.Its the way that they all work in
concert thats important, he sums up.
And what, in his opinion, is the secret of
good design? Its staying away from any-
thing thats too of the moment, he muses. thandodging bad and jarring links. Indeed,
Its about not being trite, its about doing
something thats honest, something that
feels like a natural form of communication.
Its not about surface-level polish.
When it comes to picking the right type-
faces to use in a design, Santa Maria believes
history plays an important role. Just like
buildings, typefaces can be read by somebody
with an eye for their inherent social and
historic specificity, he explains.
There are many ways you can place a
typeface in time, whether its a particular
type of italic or stroke, or different kinds of
serifs whether theyre bracketed or not,
he comments. But type design is a craft of
recursion. Theres a lot of revival happening
because many designs were very successful,
and also because they can be improved
technologically. Type-
faces can also respond to
newer mediums.
looking back
With this histor y
inevitably come certain
connotations and links.
When you can choose a
typeface that has some
sort of other symbolism
behind it, it makes your choice feel more
valid. It doesnt mean its necessarily the
right choice, but it feels as though youve
discovered something that was meantto be.
Thats not to say that Santa Marias type
choices are entirely driven by symbolism.
Although it certainly feels good to weave
intoa design a typeface that carries a
complementary story, thats less crucial
site, and anyone else, canpost up work and
he says, avoiding bad references is more
important in achieving design success than
finding positive connotations.
The designers process of choosing a face
begins with notebooks, lists and a hunt
through his many, manyshelves of books.
Interview
I keep up to date with news and with
foundries that I like, he explains. That
work pays off when Im looking for a
typeface I know that three years ago
therewas this Serif that was justperfect.
But, you know, more often than not I just
gather up a bunch of typefaces thatare
contenders, and play with them.
Font Hunting
When hunting for a font, Santa Maria also
prefers to stray off the beaten track in
favourof smaller type foundries. Theyre
mainly independents; not the bigger ones.
Places like Just Another Foundry (justan-
otherfoundry.com), Okay Type Foundry (okay-
type.com), he lists. People that are doing
some really interesting things. Not Monotype
or big guyslike that.
There are also a few handy sites Santa
Maria has bookmarked for inspiration.
Onewonderful siteis called Fonts In Use
(fontsinuse.com), where the curators of the
chart out the typefaces used in that work.
And it all links together, so if you like that
Bodoni, you can click on it and see all of
theuses of it. Thats a great way to see
designwork and also see how different
designers use typefaces.
november 2014 35
Voices Interview
Returning to the business of design, I ask
Santa Maria how he knows when hes made
the right choice. When the typography feels
like it can disappear into the background and
doesnt seem as though it needs to flaunt
itself. And it does so with ease and a grace
that benefits not only the story being told,
but the overall design too, he responds. Its
difficult to make that happen visually as you
dont necessarily notice the pieces that make
that happen, but you notice it when it isnt
there. You notice when something is working
against that goal.
So, should type be invisible? It can be.
Butnot completely. Type has to serve two
main purposes, Santa Maria says. It has
to introduce and welcome a reader it opens
the door and lays out the carpet; it should
tease and be cinematic. Once youre into the
article, the typography needs to disappear.
So typography can be a tease, rather than
trumpeting over everything thats there.
When youre reading it should be like flowing
water.It should move you along.
Going Responsive
All this talk of structure and flow through
apage leads us on to the subject of the arrival
of responsive design. Did Santa Maria feel
aloss of control when responsive broke?
Initially I think I was afraid, but as I
startedthinking about it more, it was quite
exciting. Thats because youre able to
makethe typography more suited to the
environment its being read in. Thats a very
36 november 2014
powerful thing being able to tailor the ty-
pography to a situation rather than choosing
one direction and it being just good enough.
That said, responsive didnt bring about
particularly radical changes in Santa Marias
workflow. He explains that what works in
one space is probably a good place to
startinanother. So, if something looks by Vox Media, where theyre now working
goodon a desktop or on a phone, and you
move to another envi-
ronment, its not Good typography
amatter of throwing
everything out and feels like it can
starting from scratch. disappear into the
Rather, he says, Youre
just fine-tuning. background and
Side projects
doesnt need to
Before the conversation flaunt itself
draws to a close, I ask
about Santa Marias book, On Web Typography
(netm.ag/ontype-259). What motivated him
to pick up a pen?
Stupidity mostly, helaughs. It took onpicking up some neglected type and
much longer than I expected. The real
motivation was, a lot of the books Iread about
typography talked about the history and
principles, but not about things that are
harder to define, like aesthetics or dissecting
a typeface, and trying to understand why
theforms look the way they do. Those are
difficult topics to tackle because there are
no right answers, theres just a spectrum
from good to better. Its easy to put a
typeface into a website, buttalking about
Left Santa Maria splits his time between
working at home, at a local coworking
space and at Vox Medias Manhattan
office Above Just some of Santa Marias
extensive book collection
why [it works] is more troublesome. My book
is a means to think through these problems.
Another side project was Editorially
(editorially.com), a collaborative writing
platform that closed its doors in May. Since
then, the founders Mandy Brown, David
Yee andSanta Maria have been acquired
on the companys backend story editor.
Were trying to solve
many of the same prob-
lems Editorially was
trying to solve. Its an in-
teresting project to work
on because we all love
writing and the writing
process, and we also love
making beautiful tools
that make people want to
create, Santa Maria says.
With Editorially over, theres a gap in Santa
Marias schedule for a new side project and
when we spoke to him, he was planning
photography projects. Its easy, heexplains,
to dig too deeply into one subjectand refine
one skill set to the detriment of others. Varied
side projects give Santa Mariaan outlet to
broaden his horizons and explore other
areas.Illalways jump on an opportunity
to work with someone I admire, or learn
something new, he smiles.
Next month: We chat to A Dao of
WebDesign author John Allsopp
VOICES Big question

Industry

Whats the secret to

a winning pitch?
You know youd be ideal for a project, but how do you get a potential client to see
how fantastic you are? Industry pros give their guides to perfect pitching

S up ri ya De v-
P urk ay s t h a L e a Simp s on
Head of Client Services Strategy director, TH_NK
forward3d.com think.eu

Winning a pitch is about three things. First,

credibility. Do you deserve to be there? And
could anyone in the room look foolish for having
chosen you? Second, engagement is the pitch
amonologue or a dialogue? Third, commitment.
What exactly is the client going to get? Vague
claims of betterness or revenue uplift arent
convincing. Credibility gets you in the room but
alone it wont win pitches. Its the other two
thatyou need to focus on, with engagement
being the more critical.
Da n Edwa rds
Freelance designer
Danedwards.me
Remember the client is buying
from you, and your personality
is what will set you apart. Put
yourself in their position: avoid
buzzwords, be patient and take the
time to understand what the client
really wants. Above all, show you
are passionate, be honest and dont
be afraid to ask tough questions.
First things first, make sure
youactually want to do it. A
successful agency is usually one
which knows when to say no to the
wrong pitch. Make sure your team
isclose and has rehearsed a lot you
cant fake chemistry. Its important
to behave as any good host would,
which means being attentive to all
ofthe team, not just the most
seniorperson. Remember that a
pitch works both ways this is an
agencys chance to see whether the
client has the right ambition and
culture for them, too. Show interest
by asking questions, and challenging
some of the preconceived notions
within the brief.

38 november 2014
 Big question

M at t Connolly Ow en Shiffl e t t
Client services director, Rockpool Digital Art director, Viget
rockpooldigital.com owenshifflett.com

People spend a lot of time preparing and

Believe in your pitch, and believe in practicing their pitches, but the reality is
thatits the deviations from the script that create
yourteam. Believe in what you are early trust and excitement. To invite meaningful
pitching and who you are pitching with. participation, treat the pitch as a kick-off, rather
than a sales endeavour. Be ready to evolve the
Passion and confidence are difference- conversation on the fly to adapt to the flow of the
discussion. Bring your deck, but let it be your
makers and they can only happen when ideas and interactions that drive your pitch.

the pitch team trusts each other and the

concept it has created. And whether its
awin or loss, get the pitch team together S t e v e Pip e
Managing director, Si digital
and explore what worked well, and what sidigital.co

could have been done better. Trust your

1. Give yourself plenty of time
teams opinions and believe intheir ability to prepare and practice. We
to keep improving. doat least one dummy run to the
team before pitching to the client.
2.If you can, call the client toask
questions beforehand this helps
T om Dougher t y
build a rapport. 3.Doyour research.
User experience director, Delete
deleteagency.com Understand the problems facing
theclient, its competitors and the
Demonstrating a commercial understanding of your clients business and
industry as a whole. 4. Encourage
the impact you believe your work could have on it will instil confidence
thatyou are able to operate beyond just producing pretty design work. Most questions. The pitch should be more
businesses will be measuring their digital activity on a set of objectives and KPIs of a discussion than a monologue.
that are typically established early in the pitch phase. Extracting these from your
client and referencing them throughout your presentation will convey a sense of
5.You wont win every pitch. Dont
business acumen that clients are always encouraged to see. get disheartened.

Pitching is a life skill
Being able to sell ideas in meetings is
anessential work skill. Lifes aPitch by
Stephen Bayley and Roger Mavity (netm.ag/
pitch-260) takes the view that good pitching
doesnt just help in the office its a life skill
which, when mastered, leads to a happier social
life as well as a more fulfilling career.
Further reading
Make them love your idea
Working in a creative industry is, in
general, a pleasure. Until, of course,
somebody pours cold water on your cherished
idea. IdeaSelling by Sam Harrison (netm.ag/
ideaselling-260) is a book aimed at creatives
who need to sell themselves and their ideas,
and its packed with techniques and tips.
Sell me a pen
Jordan Belford is the Wolf of Wall Street.
Hes a convicted criminal and also a
master salesman. In this video netm.ag/
sellpen-260 he explains why successful people
ask questions and dont just rely on blarney
(fast-forward to around 90sec). Questioning,
heasserts, is the most critical part of selling.

november 2014 39
Voices Q&A
Q&A
Andrew Betts
The FT Labs director on messy hacks,
lucrativedomain names and why the web
industry needs to start taking itself seriously
net: Why dont you introduce yourself?
Info AB: Im the director of FT Labs at the Financial Times.
job: Director, We look after the FT web app (app.ft.com), and much of
company: FT Labs the FTs frontend web development. I also run Edge
w: trib.tv conference (edgeconf.com) and co-organise the London
t: @triblondon Web Performance meetup (londonwebperformance.org.
uk). Before this, I ran a web development agency
called Assanka, spent a year in the UK air traffic
control service and briefly worked in Zimbabwe,
building a tracking system for a manufacturing
company that had six computers between 300 staff.
I love open collaboration. My team has just
launched a public polyfill service (cdn.polyfill.io) to
take the pain out of auto-polyfilling missing features
in legacy browsers, and its available to everyone.
net: How did you get started on the web?
AB: My mum wanted a website for her company,
soIdid something in FrontPage, then got frustrated
at how inflexible it was, so I learned HTML and CSS.
It was satisfying to be able to put something out
there that the whole world could see and use, and
the barrier to entry was so low. It was the boom of
the late 90s and the web was going to solve every
40 november 2014
problem. I felt excited to be part of it. I registered a
few domain names for sites that weregoing to be the
Next Big Thing. Turns out I wouldhave been better
off doing nothing with themat all, because the ideas
were rubbish, but the domains themselves turned out
to be a pretty good investment. I owned freestuff.com
and .co.uk for 10 years, and they did a lot better than
my savings!
net: Looking at the web, which technologies are
getting you most excited right now?
AB: At FT, we want ServiceWorker as soon as possible.
Wed also quite like CSS Grid Layout, and were
waiting patiently for Web Components. The way we
build websites has changed fundamentally over the
last few years, but the foundations are the same.
Nowwith these new technologies, its as if were
getting a new set of foundations. Its big news.
net: How did you approach creating an experience
that would work offline for the FTs app?
AB: Right now if you want to have an offline web
appand its not the simplest thing in the world, youll
find it a frustrating experience. My colleague Matt
Andrews has written a tutorial (netm.ag/andrews-260)
that goes into detail on some of the problems.
For the moment our approach is a messy
compromise of many hacks almost too gruesome
todescribe. For example, we convert images into
text,then convince the browser that eachpair of
characters is actually just one two-byte character
(which is usually Chinese). Then we can do the reverse
to get our image back again, but we can now store
twice as many images on your phone or tablet!
ServiceWorker, of course, solves this problem far
more elegantly.
net: Finally, tell us about your relationship with
theword awesome.
AB: Awesome is one of those words like ninja,
rockstar and app that is applied to pretty much
everything to the point of making the word useless.
But that doesnt mean that it cant do harm. I tend
to mentally associate reckless superlatives and
developer hero-worship with a culture thats come
tobe called brogramming (a word I also dont like).
Were a young industry, with little regulation,
alackof strong professional bodies or chartership,
andyet web development is arguably as vital to the
modern world as law or banking. I want to see an
industry of diverse, professional practitioners,
withameasured, thoughtful and mature community.
The only thing truly awesome about the web is its
existence and our responsibility to look after it well.
Everything else is ephemeral.
voices Opinion
WordPress evolution
Marko Heijnen reflects on the 4.0 update and considers the future for WordPress
WordPress recently launched a new
version, 4.0, amid much excitement
around the releases updates and how they
would benefit end-users and developers.
The release boasts over 1,200 updates
since 3.9. Although no groundbreaking
new additions were included, 4.0 leads the
way for future releases, with a number
ofunderlying changes and clean-ups
making WordPress 4.0 a more stable CMS.
New additions
My personal contributions to the release
ofWordPress 4.0 included one patch.
Iinitially co-created the WP_Image_Editor.
class with Mike Schroder in WordPress 3.5.
With ongoing improvements, the update
forWordPress 4.0 adds the method get_.
quality() . An important class that handles
allimage manipulation within the plat-
form,the new method will help developers
retrieve the current quality of an image when
using the class directly in their own projects.
Whilst a number of incremental changes
are present within the frontend and backend,
42 december 2013
WordPRess
the WordPress 4.0 release additionally
included code cleanups and an application
of standards for increased code quality.
For example, almost all uses of the PHP func-
tion extract() were removed. The function
previously exploded an array into variables,
which although handy to use,accidentally
overwrote variables without users knowing.
Users were previously unsure as to what was
being parsed by extract() .
The removal of the 4.0 leads the way
function increases the
stability of WordPress
for future releases,
as a package, as no vari- with underlying
ables have the possibility
of being overwritten.
changes and
Additionally, Scruti- clean-ups making
nizer, a code inspection
platform, was used to
WordPress 4.0 a
detect dead code and more stable CMS
unused variables by
searching through the codebase to find
possible issues. Although not necessarily
fixing every issue, the access modifiers gave
a goodindication as to the current status of
the code, increasing the overall quality.
The code cleanups and removal of dead
code within update 4.0 are a huge benefit to
developers, making it easier to contribute to
the ongoing improvement of WordPress as
a CMS platform.
With textarea support for Customizer,
less code is required for developers to
test themes. When installing plugins
on a dev version of WordPress, a
new tab is visible. This saves
developers time when completing
updates as it displays all features
being worked on as plugins.
The future
The most notable change in this
release is the creation of updates
we can build on. But what do I
think is the next big step for WordPress?
Theincorporation of a RESTful API.
More complex websites and mobile apps
are continually being built with WordPress,
so it is important for WordPress to have
aRESTful API. Such an inclusion could
support current WordPress apps as well as
mobile apps that use WordPress as a
backend.As a feature available as a plugin
now, users are currently
able to test this service.
Going forward, the
platform will continue to
update its legacy code and
add the APIs that devel-
opers need to better
accommodate these user-
cases as their popularity
increases.Although a lot
of work is still needed
around this, I am hopeful
that we will see this update in WordPress
4.1 or 4.2.
Secondly, I expect to see the rebuild of the
image editor in WordPress. A new project in
which I am involved, the current version
displays a number of issues including
extendibility. Although the status of the build
and release date are currently undetermined,
I see a huge potential here for a more extend-
able UI for plugin developers to create new
features for users.
There are also plans to extend the class
WP_Image_Editor with new methods. Hope-
fully these extensions add the default
inclusion of image filters (such as greyscale
or sepia). As a personal goal for this project,
I will begin working on new ways to show
images on mobile.
Marko (markoheijnen.com) is an avid WordPress
PROFILE
enthusiast, and has been making contributions
since 2010. As well as working full time for 1&1,
he is the main core developer for GlotPress
Gallery Inspirational sites
Brian Hoff

Brian is the founder and

creative director of Brian Hoff
Design, a Philadelphia-based
boutique digital agency
creating web and mobile
platforms and products
w: brianhoffdesign.com
Sensational design and superb development t: @behoff

HTML5, Canvas, CSS3, Backbone, jQuery, Modernizr

airbnb.com
DesignStudio wearedesignstudio.com, R/GA rga.com, Airbnb
Airbnb has not only received a beautiful
new website and app, but a rebrand that
helped position more of a focus on the
companys hosts and community. During the
rebrand, DesignStudio a global agency that
has also worked with the likes of Nokia and
Sony PlayStation became an extension of
Airbnbs internal team.
In collaboration with R/GA, the team
built a fun, interactive tool using HTML5,
Canvas and CSS3 (with CSS animations) and
Backbone, jQuery and Modernizr for feature
The Make
Airbnb Yours
tool is a great
example of
detection that allows users to make the
Airbnb logo their own. Users can create a
using modern
unique community symbol using a collection technology in
of over 1000 illustrations and forms. a unique way.
The redesign also helped flush out the High fives all
inconsistencies that Airbnb had previously around
faced across desktop, mobile and its app. These
Carlos Gavina
all now feel part of the same experience. All @Carlosgavina
parties did a wonderful job of creating a sense
of community through new photography, warm
colour palettes and graphic treatments. The
whole experience now feels much more human.

44 november 2014
 Inspirational sites

jQuery, HTML5, CSS

vans.com
Huge hugeinc.com

The new Vans website was designed by Huge, a digital agency that
specialises in business strategy, design, marketing and technology
services. Stationed across seven offices throughout the US and London,
Huge has worked with some of the worlds best-known brands.
The new site was designed with a high amount of content in mind
and a focus in helping the brand grow up, while maintaining the audience
that has been with it for over 30 years, says Huges executive creative
director Jon Jackson.
Beyond selling shoes and other clothing merchandise, Jackson
emphasised that Vans is also a content provider. One of the goals
of the redesign was to combine content and product, and get people
into the site either way. The new site presents a more simplified style
than wed usually expect from the brand, which not only improves the
shopping and navigating experience, but also helps Vans move towards
its current audience and their updated style.
Much like its audience, Vans website has grown up as well, with
asmart responsive design that means its just as beautiful and useful
ondesktops as it is on a variety of other devices and screen sizes.

november 2014 45
Gallery Inspirational sites
si t e of t he
mon t h
HTML5, CSS Transforms
firstborn.com
Firstborn firstborn.com
Firstborn is a full service agency specialising in areas
ranging from digital strategy to web design and content
strategy. Its recent redesign is a real gem. It has personality
and grit whilst maintaining a clean and modern aesthetic,
which vice president and executive creative director Dave
Snyder says was one of the projects creative goals.
The large typography is mixed with a sharp, bright red
colour palette, helping the redesign feel more bold and
powerful than before. Captivating graphics and images
46 november 2014
of theagencys work are emphasised, taking up large The sites
portionsof the screen. It makes a real statement. interactions
Beyond aesthetics, what I love most about the site is the
are fun while
balance and grid. The site breathes with beautiful white
space amongst all the imagery and typography, meaning all
being snappy
theelements flow perfectly. And while the studio could have enough to not
kept a more boxy grid approach to styling various areas, it hinder the
subtly broke expectations by balancing call to action buttons, experience
animations and fades, all executed with the level ofpolish Jonathan Suh
youd anticipate from this team. @jonsuh
The previous site really revolved around the work we do
and thats a huge indicator of the mentality here at Firstborn.
However, we wanted to add a bit more around the people and
what grounds our approach to that work, explains Snyder.
 Inspirational sites

HTML5, CSS3 animations, Backbone

starwars.com
Disney.com disney.com

The new Star Wars site is a fine example of simplicity

sprinkled with a just the right amount of detail. The use of
parallax and animation for the navigation and hero image give
thescrolling experience personality without going overboard.
The site is packed with little tricks and treats, which give it
some extra personality for example, the mobile hamburger
menu and close icon for search turn into lightsabers, and different
highlight colours help differentiate each section.
The creators even got a little fancy with the loader. Created
using CSS only, one circle rotates clockwise while the other moves
anti-clockwise, and with one element an interesting approach.
This site houses a ton of information and the grid system is
flexible enough to allow for variety in layout while maintaining
enough structure for the continued addition of content. The
creators have also crafted a responsive design that leaves viewers
happy, no matter what device theyre on. Building a content-
heavy site that can be maintained across avariety of devices
istough, but this is a great example of it being done right.

november 2014 47
Gallery Inspirational sites

HTML5, jQuery

adage.com
Area 17 area17.com

Three things in particular get me really excited about web design:

great typography, a strong structure and beautiful balance. The
new AdAge nails all three. This news website, which is highly regarded in
the marketing and media community, carries most of its weight on the
shoulders of beautiful and readable Tiempos Text (and Tiempos Headline
for, well, headlines). What I love about this typeface choice is that while it
has an editorial nod, its curves also pack some personality.
The experience and layout remains equally enjoyable as you scroll
down the page, and each section feels well thought-out and unique, with
comfortable breathing space around the various elements. Far too often
I come across news websites that cram text and headlines into every
little fold, nook and cranny. This is a welcome breath of fresh air.
The redesign attempted to address AdAges business needs while
enhancing the overall user experience, says Miguel Buckenmeyer of
Area 17. The visual design the typography, the use of white space,
the extra templates and so on are clear nods to print editorial, and we
believe help differentiate the overall product.

AdAges
website is
not trying
to be too
clever, and
this is a good
thing. They
understand
their audience
and display
articles in
a feed-like
style
Yaron Schoen
@Yarcom

48 november 2014
 Inspirational sites

HTML5, CSS Perspective property

orangina.eu
Achtung! achtung.nl

Theres so much to say about the Orangina redesign,

Idont know where to begin. This website has it all:
beauty, craft, quirkiness, unexpectedness, movement,
balance. Upon loading up the landing page, youre presented
with lovely, highly detailed product photography, animations
and what might be the finest use of CSS3s perspective
property Ive ever seen.
Button and image box perspectives shake things up
(pun intended) and add welcome personality by throwing
something unusual at what could have been a standard,
mundane grid. The main typeface Berthold Block Condensed
compliments the quirkiness of the graphic and grid
elements nicely, too.
According to Achtung!, the design took Oranginas
Shakethings up slogan as its starting point, with animations
adding a wonderful touch and shaking product photography
complimenting the theme perfectly. Well done for bringing
arefreshing new site to the web!

november 2014 49
Gallery Inspirational sites

HTML5, SVG, CSS Transforms

dsg.com/baseball2014
Viget viget.com

Digital agency Viget is known for pushing

the envelope in its designs, and its site for
Dicks Sporting Goods Gear in Action campaign
certainly lives upto expectations.
The product assignment was to develop a
shoppable and shareable lookbook to highlight
new baseball products for the 2014 season,
says co-founder and CEO Brian Williams. The
lookbook displays products in an engaging,
scene-driven format that allows visitors to easily
discover, share and make purchases.
We used vector assets whenever possible,
says frontend developer Chris Manning. This
allowed us to create SVG images that scale well,
save on file size, and move commonly used icons
to web font files to improve page load times.
Frontend developer Doug Avery stressed the
challenges of creating such a unique experience:
CSS transforms were used as a way of scaling
the video to solve the issue of overwhelming
computer capacity.
The result is a beautiful blend of smart UX,
engaging storytelling and beautiful film. What
more could you ask for?

50 november 2014
Sublime design
& creative advice

this month Featuring... Design

Challenge
This month...
Focus on 56

Aquarium
Gene Crawford considers the benefits and
pitfalls of the trend for off-canvas navigation,
made popular by Facebooks mobile site
websites
Sarah Brown
PROFILEs

Sarah is a freelance web designer and

developer from Louisville, Kentucky
w: sarahsfolio.net t: @sarahthewebnerd

Ade k unl e Od u y e
Adekunle is a product designer at NASDAQ
OMX, working on web-based products
Profile 58 w: adekunleoduye.com t: @adekunleoduye
We meet the faces behind Beardeds award-
winning design work, and find out why theyre W il l Ho w e
on a mission to give something back to the web Will is a Newcastle-based art director and
designer working across print and digital
w: willhowecreative.com t: @WillHowe

How we built
How a team of university students joined web
agency Springload to create a fun-filled tool
toget New Zealands young people voting
Brief
Wed like you to design a site for a public aquarium.
Maybe its a slick, glossy and industrial creation like
Orlandos SeaWorld, or a more modest affair like Sea
Life in London. Alternatively you might create a local
64 centre that works to conserve a single species of fish.

52 december
november2013
2014
 Design challenge

Sarah Brown

Kihanni Bay Aquarium my month

A calming design that lets the content and photography shine (see the full-size image at netm.ag/brown-260)
What have I been
doingthis month?
Ive been in the process
of rebranding myself
The concept of Kihanni Bay Aquarium
Close up and redesigning my
wasformed around my previous visit
website, as well as
toHawaii. The state has a subtle beauty that (1) I intended for the photograph with the tagline to be
finding freelance jobs
Iwanted to portray in my design. By using only the first element viewers see, so that this sets the overall inmy community.
one colour besides black and white the look and feel of the website. (2) If the viewer is looking for
Which websites have I
photography and content speaks for itself. anything in particular, they can click on the magnifying
visited for inspiration?
As an aquarium website, its main goal is to glass icon to push the navigation to the left. A text field designspiration.net for
display information so viewers can plan their will then appear for them to search what they are looking general inspiration,
visit. In the case of Kihanni Bay Aquarium, for. (3) When hovering over a photo in this section of andinspired-ui.com for
mobile inspiration.
that information is particularly important, as the website, a white overlay will appear, alongside the
viewers will be mostly tourists from outside title of the blog post and a Read more link. (4) This is What have I
ofthe state or country. an application that visitors can use during their trip to beenwatching?
Season 2 of Hemlock
As well as visiting info, I felt that viewers Kihanni Bay Aquarium users are able to keep track of
Grove, NBCs Hannibal
would also want to see more news and a brief the next show time so that they dont miss out on the full re-runs, many classic
sneak peek into the aquarium before visiting. experience. (5) When using this application, users are also horror films.
I chose to use a four-photo grid to display the able to find information about the aquarium, see other
What have I been
blog posts rather than just bland text. show times, play games and even share photos of the listening to?
The site would be built to be responsive, and memories they are making. The Album Leaf,
all elements would stack using media queries, Exitmusic, and Green
so that people can view all the information they orBlue.
require on all devices.

november 2014 53
Showcase
Design challenge

2
1

Adekunle Oduye

My month Neptunes World

What have I been An image-led site that puts the users needs first (see the full-size image at netm.ag/Oduye-260)
doingthis month?
Organising a frontend
development and
design conference
I decided to use some of my UX skills
Close up
forthis design challenge rather than
inNew York.
starting with how the site was going to be (1) I decided to put the address and transport icons in
Which websites have designed, I focused on why. I had to really aprominent position right underneath the logo, because
Ivisited for inspiration?
thinkwhy someone would come and visit the typical user will likely want to know the location of
A lot of zoo and theme
park sites (such as anaquariums site, who would be the typical the aquarium and how to reach it. (2) A large hero image
bronxzoo.com, and visitor, and the process they would gothrough would take most of the space. This would be used to
aquariumofthebay.org) whenexploring the site. highlight any special exhibitions happening at the time.
to get a good sense The Neptunes World site will use web (3) On the mobile version, the sidebar would become
what information is
technologies like HTM5, CSS3 and JavaScript. a header. As the user scrolls down, the address and
usually displayed on
homepages. The CSS3 will be written in Sass, and will transport icons would minimise to give the main content
leverage frameworks like Compass (compass- more real estate. (4) The daily schedule would show the
What have I
style.org) for patterns and reusable modules, times and names of the shows. If the user clicks on a
been watching?
House of Cards. andSusy (susy.oddbird.net) a simple but show, a video preview would start playing. (5) Finally,
Itsawesome! powerful layout framework that helps make theres an interactive map that the user can interact
thedesign responsive across mobile devices. withto plan their visit and learn more about the animals
What have I been
listening to? Since the site is going to be image-heavy, on display.
Michael Jackson: Greatest using CSS3 to handle animations and display
Hits, RnB and some icons is very important. Techniques like Object
hip-hop.
Oriented CSS, SMACSS and lazy loading will be
used to enhance performance.

54 november 2014
 Design challenge

Will Howe

Discovery Pools
A bold and vibrant site that transports users under the sea (see the full-size image at netm.ag/Howe-260) my month
What have I been
doingthis month?
Making a splash with a visually rich and
Close up A responsive overhaul
interactive design is this one-page site for of a charitys
an aquariums new penguin-filled Discovery (1) After a fullscreen loading animation, an animated ecommerce presence
Pools. The design would feature a prominent Discovery Pools logo would load up as a background and a creative online
and print marketing
background visual, composed of above-water, image in the centre of the screen, with a CSS fill animation
campaign for a
underwater and aquarium photography. followed by a scroll down prompt. (2) The second section software company.
On scrolling, the user would be taken on would incorporate some subtle parallax scroll on the
Which websites have I
anengaging journey through some of the new foreground penguin. (3) The third section would act as
visited for inspiration?
pools, exploring and interacting with each agallery carousel, as well as providing space for additional tympanus.net/codrops
section. Regular Book Now buttons act as calls text content. CSS multiply blend modes could be used tobrush up on CSS and
toaction, to ensure the opportunity to convert on the image mouseovers, with a more conventional JS trends, and browsing
a casual visitor into acustomer isnt missed. image fallback available for non-compliant browsers and spotify.com albums for
colour palette
The site makes use of on-scroll effects and mobiles. (4) An interactive map would allow users to get
inspiration.
UX to give a clean, visceral experience. Subtle more info on specific areas and animals in the pools. (5) A
What have I been
parallax effects will be used on backgrounds final prompt to subscribe to the conservation magazine
listening to?
and elements, making clever use of the would lead down to a footer made up of contact details
Q-Tip, People Under
versatile Skrollr.js JavaScript library. and directions. theStairs, Michael
Based on a 12-column grid, sections within McDonald and the
the page could stack responsively for mobile, pleasant distraction of
Nerdist.com podcasts.
although for the sake of UX, parallax and
someanimate-in effects would be sacrificed
for mobile and tablet.

november 2014 55
Showcase Focus on

Focus On

Off-Canvas Navigation
It saves room in your design and has the wow-factor, but approach
off-canvas navigation with caution, warns Gene Crawford

There is a navigation design pattern

thats emerged for multi-device layout
that, unlike most other patterns, utilises
off-screen space to hold a lot of navigation.
Popularised largely by Facebooks mobile
website, this off-canvas navigation is an
attractive and elegant solution for websites
with a lot of navigation or other elements
for multi-screen design.
The basic concept is that for smaller
mobile device screens, important
navigation items are only a single view
away. It brings back a decent amount of
space to the main area of your design, and
it also looks pretty cool. Lets face it, clients 1
want designs with wow-factor and a slide-
in, off-canvas navigation could be just what
the doctor ordered for good or bad.
There are some negatives, however.
Itspretty advanced to work into a website
build, and you need to know what youre
doing so it both scales properly and doesnt
break down across devices and browsers.
Itdoesnt scale well outside of mobile
device screen sizes and it can be confusing
to people when encountered on a desktop
computer. This is probably why weve seen
so many different variations in the use
andimplementation of this pattern.
The off-canvas navigation pattern is
intriguing. Im not a huge fan of it for 2 3
websites. I think it has its place in native
mobile applications, but generally speaking
Im never a fan of hiding the important
things you want your websites visitors to (1) The website for Muse (choosemuse. a large off-canvas menu to house just
see - like your websites navigation. com) a brain activity device employs about everything youd need to interact
the interaction model thats present with the site. (3) The website for Time
in the off-canvas navigation. When magazine (time.com) uses the same basic
activated it covers the homepage UX pattern as the off-canvas menu for
Genes mission is to work tirelessly
PROFILE

to provide inspiration and insight with a sightly transparent, coloured its main site navigation, but in this case
for developers. His recent projects background. (2) The mobile web version the menu covers up content instead of
include unmatchedstyle.com of Facebook.com (m.facebook.com) uses displacing it.
USA/Canada xmas Offer!
Subscribe to and save up to 50%

Great Reasons
to Subscribe
l Get
 your copy early

l Stay
 up to date on the new
webtechnologies

l Exclusive
 access to the worlds
leading experts

l The
 perfect gift for Christmas!

Prices
6 months $60.99 (Save 45%)
1 year $143.99 (Save 35%)
2 years $220.87 (Save 50%)
Special
Seasonal
Subscribe online at imsnews.com/net-a039 Offer!
Or call toll-free on 1-800-428-3003 quote code a039
Live in the UK? Turn to Page 24
Terms and Conditions: * Savings compared with buying 13 full priced issues at $16.99 from the US newsstand. This offer is for new North
Americanprint subscribers only. You will receive 13 issues in a year. Minimum subscription term is 12 months. If at any time during the
first 60daysyou are dissatisfied in any way, please notify us in writing and we will refund you all unmailed issues. Prices correct at point of
printandsubjecttochange.Offer ends 28 February 2015
Showcase
Profile

The Beardeds From left: content strategist Caralyn

Green, designer Matt Braun, founder Matt Griffin,
developer Patrick Fulton, developer Brett Bender
Profile

Bearded
bearded.com

We meet the small but perfectly

formedwebdesign team intent
ongiving something back to
the web industry
If theres one thing Bearded is really
lacking in, its beards. Only one of its
members can be truly described as hirsute.
Luckily, what it lacks in facial hair, itmakes
up for in design excellence. Founded in 2008
by Matt Griffin (the proud owner of the
aforementioned single beard), the web
designagency has been honed into a crack
team of five talented individuals, each
specialising in a particular field.
Working alongside Griffin are designer Matt
Braun, content strategist Caralyn Green and
developers Brett Bender and Patrick Fulton.
We caught up with some of the team to find
out the thinking behind their mission to move
the web forward, and the real slightly geeky
story behind that agency name ...

net: Why dont you start off by describing

Bearded, its personality and values
MG: We started Bearded in 2008 as just a
designer and a developer. From the beginning
our central idea was that of collaboration.
Weve always been single-team sized right
now those five people represent disciplines
encompassing research, UX, content strategy,
design and full-stack web development.
No oneperson can be hero-level at all
ofthethings that go into making great web
experiences, socollaboration between people
who each specialise in one part of the system
is the key. Since we started Bearded I gave up
Photography: Noah Purdy

the idea of my work. But thats OK, because

our work is so much better than anything
Ive done on my own.
The other big thing we wanted was to do
workthat we could feel good about at the end
of the day. Which is why you see so many

58 november 2014
 Profile

info
Location: Pittsburgh, PA, USA
Established: 2008
Team size: 5
Expertise: User experience, web
design, frontend development,
workshops and training
Selected clients: Carnegie
Museums of Pittsburgh, Intel,
Leukemia and Lymphoma Society
Awards: Shortlisted for nets
2014 Agency of the Year, multiple
HOW Interactive Design Awards

november 2014 59
Showcase
Profile
Above Childrens Museum of Pittsburgh website,
featuring a responsive calendar
Right A custom web application for a photography
initiative at the Carnegie Museum of Art
nonprofits on our roster. Its not really
where the big bucks are but my feeling is
that no one can pay you enough to dislike
what youre doing with your time.
Time is really all that any of us have,
soyou better make sure youre having
experiences you feel good about during
thattime. For me that means doing quality
work, learning and growing as craftspeople,
enjoying the interactions with each other
and our clients, and making the world a
little better if we can while were at it.
Wow.That got kind of heavy, huh?
net: Where did the name come from?
MG: Well, Ive had a beard for most of
myyears since high school, so it seemed
like asafe bet. But theres a more arcane
explanation that involves type. Fair
warning: aside from being a citizen of
theinternet, Im also a letterpress printer.
Ready? Here we go. Were all familiar with
Above Bearded developers Patrick Fulton (left) and Brett Bender having an impromptu code review Right Designer Matt Braun (left) and founder Matt Griffin at
theirVandercook no. 4 printing press. Braun is setting wood type, while Griffin checks a proof
60 november 2014
the term typeface right? Well, all physical
type has an anatomy. The face is the surface
that gets inked, the ledge the letterform
emerges from is the shoulder, and the slope
between the face and shoulder is the beard.
It isnt particularly noticeable, and it isnt
the part that prints. But without it there,
supporting the face, you couldnt print
anything. So thats my long and rarified
metaphor for Bearded. It doesnt make
avery good elevator pitch.
net: How did the agency start?
MG: Two guys in our homes making sites
and a logo for next to nothing. Not long into
it we got a leaky office and a third dev. It
was humble beginnings for sure. We really
had no idea what we were doing with pretty
much anything, which was kind of an asset.
If wed known how ignorant we were about
running a business I may have never
recovered from the resulting panic attack.
net: Whats the web design scene in
Pittsburgh like?
PF: In short: awesome! The community
here is close-knit, vibrant and excited about
the web. There are so many web and tech-
related meetups here that one could attend
a different event on nearly any weeknight.
Pittsburgh itself is great, too. Many people
think of it as an American football-crazed,
dirty, smoky steel town but thats not
really the case any more. We still love our
sports teams, but the city and surrounding
region are beautiful.
net: You say: We do more than
incorporate future-friendly technologies
we help move the web forward.
Canyou give us some examples?
MG: Everything we come up with that
seems remotely useful we write about,
speak about or put on GitHub for people
touse. Which to me is just what one should

Carnegie Learning A collaborative effort Bearded took care of content strategy, design and frontend
development, while Carnegie Learnings development team built out much of the site in ExpressionEngine
do on the web. Weve all received so much
great free knowledge from everyone before
us, as well as our contemporaries
anything we can do to give back will only
bea drop in the bucket, compared to what
weve already received. Were just trying
tobalance the scales a little.
net: Whats the key to a successful
agency-client relationship?
MG: Honesty. Thats the big one. If
somethings bugging you, dont bottle it up
and make assumptions about the clients
intent. Tell them about it. Theyre on your
team, after all! They want the same thing
you do a startlingly successful project.
A smart friend of mine, Norm Goldberg,
who works at another Pittsburgh agency,
said a client once told him there were only
two things they wanted from him: Dont
surprise me, and dont make me cry. Even
good surprises arent a good thing, because
they mean the clients out of the loop.
Thats pretty good advice. Bring them
into the team so theyll never be surprised.
Because theyre embedded in the process.
There will likely be less crying that way.
Hey, this is pretty good marriage advice,
too. Do you guys have a magazine for that?
net: How do you run your initial meetings
with a client?
MG: Thats a whole article right there! Not
long ago we brought Seven Heads Designs
Kevin M Hoffman in on a project, and he
really workshopped us on kick-offs. Its
totally changed the way we work. Before our
first meeting we do a series of stakeholder
and user interviews to get the lay of the
land. Then we design a custom one- or
two-day workshop to explore those themes
through various collaborative activities.
Itsprobably currently the most fun and
exhausting part of my job.
net: How do you ensure you and your
client are on the same page before the
pixel-pushing begins?
MB: Over the last year weve really refined
our research and discovery phase. Its
important to know what problems youre
trying to solve before you start trying to
solve them. So before we get into design we
ask a lot of questions. This includes the
interviews and the kick-off workshop, and
alot of IA, UX and content strategy work
where we get to know the client, and why
were making what were making.
We explore who the client is, who its
not, and who it wants to be. We also
attempt to define who the users are, what
their stories are, and how theyll find a use
for what were making. With this we can
define the overall direction, and potential
hurdles become more evident.
net: Do clients sometimes find it hard to
understand your creative direction?
MB: Occasionally but for the most part,
no. We never have a big reveal on our
Profile
office culture
MATT GRIfFIN
Whats on your desk?
A 13" Retina MacBook Pro, a Cinema
Display, an external keyboard, and a
Logitech Marble mouse both keyboard
and mouse with wrist rests (totally
necessary). A figure of Finn from
Adventure Time, A Happy Meal toy of
Speed Racers Mach 5 car from when I
was a kid. My badass NASA coffee mug.
Whats on your walls?
A lot of letterpress prints by friends,
abike map of Pittsburgh done by our
friends at Deeplocal, Kevin Cornells
original illustration from one of my
firstA List Apart articles, and a
JacquesCousteau CED.
What hours do you work?
Burnout can be a real problem
especially when you love what you do
so we keep to normal business hours.
We almost never do nights and
weekends, because that will cut into the
next weeks productivity.
What else happens?
We have a decent video game
setup.Wehavent had time to play in
awhile, though. Or maybe its just
because Matt Braun destroys everyone
at Golden Eye every time.
How often do you hang out?
We hang out all day during the week!
We mostly spend time with friends,
spouses and kids on the weekends. We
have a great time at the office when
were here, though.
Describe your office culture
inthree words.
Friendly web nerds.
november 2014 61
Showcase
Profile
Timeline
Beardeds story: from launch
to the present day
November 20008
Bearded is founded in Pittsburgh
asatwo-person team
November 2011
Bearded launches its first responsive
website. It stops using static
mockupsin favour of creating
HTML/CSS/JS comps
february 2012
Bearded wins a HOW Interactive Design
award for its iPad app for LISC
june 2012
Its responsive site for the Pittsburgh
Childrens Museum launches,
prompting Ethan Marcotte to say hed
like Bearded to stop making the rest of
us look so bad
july 2012
Matt Griffins first article is published
by A List Apart. This eventually leads to
his regular How we work column
march 2014
Bearded is hired to work with Intel,
Samsung, the Linux Foundation and
Lullabot, to rework the UX, IA and
content strategy for the Tizen
websitesin time for the new
SamsungZ unveiling
april 2014
Bearded is shortlisted for nets
Agencyof the Year award
may 2014
What Comes Next Is the Future,
MattGriffins documentary about
thepeople who build the web, is
fundedon Kickstarter
62 november 2014
Wood Type Revival A Kickstarter-funded personal project that seeks out lost historic wood type and
converts it into digital fonts for modern designers. There are currently 10 fonts available
projects. Clients are able to view their sites
wireframes and mockups in a browser, so
theyre exposed to real stuff very early in
the process. Our clients are our partners,
and weve found it works best to keep the
process transparent and let them in on
things early. If we have an off-the-wall
idea, we might do a quick mockup or sketch
and just show it to them early. But more
often than not, its an idea that might have
already been discovered together in our
kick-off meetings or presented in the
research phase, so theyre expecting it.
net: Are all your sites built from scratch
ordo you have a menu of elements and
components that you draw together?
PF: We begin building our sites with the
help of Stubble, our starter kit (netm.ag/
stubble-260). Stubble is a simple collection
of our most commonly used patterns
itsBeardeds boilerplate. Stubble helps
usquickly put together our wireframes,
andmake a consistent and clear start on
ourmockups.
net: Tell us about your What Comes Next
isthe Future project ...
MG: Well, were making a movie. Its a
documentary about the people who build
the web, which gives me an excuse to nerd
out with people whose work and ideas Ivery
much admire. The main things Ive done so
far are upgrade the heck out of my gear and
schedule more interviews.
In October I have a big trip to Austin
planned, but before that Ill be going to
Boston to do some shooting with Ethan
Marcotte, and hang out with Filament
Group and Dan Cederholm. One of the
biggest realisations weve had in the last
month is that to make a watchable film,
weneed more than just a bunch of expert
interviews. We need characters, story
areal narrative arc.
So thats what were taking a first stab
atwith Ethan in Boston. There will be more
than just a person in a chair talking about
the web. I mean, now well have multiple
people walking around and talking about
the web! Totally different right?
net: So whats next for Bearded?
MG: Well, by the time this prints well have
launched our new two-page website. We
had been building a massive new Bearded
site for more than a year, and recently
decided to scrap it.In two weeks we totally
redesigned everything as asimple site
thats the absolute MVP for us. It says
whowe are, what were good at, and how
toget a hold of us.
What we realised is that Bearded has
changed a whole bunch in the past year,
and the big site wed been slowly chipping
away at between projects just didnt
represent us any more. Its always a tough
thing to do, letting goof things you really
like and have been working on for a long
time. But it was also a huge relief because
weknew it wasnt right any more.
It reminds me of a Hemingway quote that
came to me via Hillman Curtis book MTIV:
take out the good parts, and see if it still
works (netm.ag/MTIV-260). If you like
something too much to throw it away
whenits outlived its use, thats a problem.
Especially with the web which is so
mercurial, youve got to be ready to toss it
all out and start over, should the need arise.
Hey, thats pretty good. I should write that
on my bedroom mirror or something.
Showcase How we built

How we built

onthefence.co.nz
A team at Massey University joined Springload to create a humorous web
tool that would get New Zealands young people excited about politics

1 5

Brief
In 2011, a group of third year
students produced a colourful,
humorous Flash tool to guide
inexperienced voters to make an
informed decision. In 2014 the
toolgot a responsive update, with
help from web agency Springload.
Close up
(1) The On the Fence site is built around an image of
a sheep teetering on a fence a metaphor for being
undecided. (2) A responsive approach was essential.
Our primary audience are young, first time voters,
who often access socially shared content through
mobile. We wanted them to be able to complete
the game on their mobile device. (3) As the game
progresses, the sheep is dressed in props relating to
how the user answers each question. (4)Humorous
language and a cheeky tone of voice help re-frame
political issues for a young audience. (5) Clear,
simple actions guide 92 per cent of users to
complete all 17 questions, with an average time on
site of 7.48min. (6) In the last New Zealand election,
close to 60 per cent of 18 to 24 year-olds turned out
to vote. This site provides the opportunity for young
people to make sure theyre ready to get involved,
and enrolling to vote is the first step.

64 november 2014

K arl K ane Josh Barr
Design lecturer Karl leads Josh is a frontend director
Massey Universitys Design andundercover designer at
&Democracy Project, the Wellington-based design and
initiative behind the tool development studio Springload
w: massey.ac.nz w: springload.co.nz
t: @musettecc t: @joshbarrnz
In 2011, the Design & Democracy
Project at Massey University
decided to tackle the apathy towards
politics amongst young people in New
Zealand. A team of third-year students
embarked on a six-week hackathon
to create a Flash tool aimed at getting
youngsters engaged. After being blown
away by the positive response from
New Zealanders everywhere, the team
brought in web design agency Springload
to help make a responsive version. Here,
Kieran Stowers one of the original On
the Fence creators and Springloads
Josh Bar walk through the project that
put a new slant on New Zealand politics.
net: How did the project start out?
KS: It began in 2011, when a young lady
named Rebecca Whyte approached Massey
University College of Creative Arts and
asked if the students could do anything
about the lack of enthusiasm for politics
shed noticed amongst young people
in New Zealand. A group of third year
students, including myself, researched,
conceptualised, prototyped, branded,
marketed and launched On the Fence just
six days before the New Zealand general
election, and over 30,000 Kiwis from
around the world responded.
net: Who worked on the project,
andwhat were your roles?
KS: The tool is a product of Massey
Universitys Design & Democracy Project,
an initiative led by Karl Kane. I was the
designer and team leader that helped
How we built
Kieran Stowers
Timeline
How the On the Fence
projectdeveloped
September 2011
Massey University group launches
Graphic designer Kieran is Onthe Fence version one after
junior research officer on the a six- week long hackathon
project, and oversees creative
direction of the frontend tool
w: kieranstowers.co.nz Oct 2012
t: @kieranstowers
The On the Fence concept is refined
inKieran Stowers honours year project
develop the 2011 version. Now, I act as
junior research officer, overseeing the March 2014
creative direction of the frontend tool. Massey University and Springload
JB: Karl and Kieran approached Springload starttalks about collaborating on
anew, responsive On the Fence
in early 2014 to collaborate on a new
version of On the Fence. We contributed
advice on UI and interaction design, as May 2014
well as managing the build, frontend Questions and policy areas are
development and devOps. developed and finalised with the team
net: What were your main goals when
June 2014
you started out, and how did they evolve?
Backend application Democratic is
JB: We discussed success in human
completed, and a questionnaire is sent
terms we imagined a busy family with out to a panel of experts
highschool-aged children sitting down to
dinner, and someone going: Hey, I saw
this funny sheep game at school today July 2014
it helped mefigure out who to vote for. Design and development of the
frontend app, mobile device testing,
As the project progressed, we narrowed
user testing and refinement
the focus toward first-time voters and
pre-voters, allowing other digital tools
tomeet wider audiences. August 2014
Our major technical goal was moving On the Fence launches, attracting
the 2011 Flash-based On the Fence to a 30,000 visitors in its first three days
responsive website. We knew wed need
to architect the app to work on any size of
September 2014
screen, and a wide range of browsers.
The team starts developing tools to
help high schools use On the Fence in
net: Tell us about the user research you their Civics Education curriculums
conducted, and what you found out.
JB: We tested guerilla-style, with friends
and family. We were mainly looking
for the best way to input responses to
questions, and we found that users wanted
to respond with a few definite reactions,
rather than an ambiguous sliding scale.
KS: Joshs 14 year-old sister Ani user-
tested the app several times, and there
november 2014 65
Showcase How we built

1
2

Evolution

The team walk through the evolution of On the Fence,

frominitialUI discussions to device testing
(1) It was important to start with a shared vision and a clear direction. We
prototyped the user interface mechanics on paper first. (2) We tried many, many
iterations of the final voting mechanism. This component was refined right up
until the go-live day. (3) The Design & Democracy team worked out the questions
for each policy area at Massey Universitys Open Lab. (4) On the Fence is full of
images. Kieran Stowers produced a fantastic set of visual assets for the app.
(5)We tested on a range of desktop and mobile browsers. Believe it or not,
Android 2.3 is still really common in New Zealand!

66 november 2014

was no shortage of politically disaffected
(yet willing) participants at Massey
Unis School of Design. Social media also
provided a rich resource for feedback
justmake sure you have a thick hide.
net: How did you come up with the
design concept and visual language?
KS: The sheep on the fence is a metaphor
for being undecided, and represents the
herd mentality most people show when
it comes to voting. It was particularly
appropriate because the sheep narrative
and farm setting is familiar to a lot of
NewZealanders. The visual style borrows
from Saturday morning cartoons, internet
memes, video games and the growing
array of flat-style graphic websites.
Staying true to New Zealand culture
was also an important factor. We used a
font designed by legendary New Zealand
typographer Joseph Churchward, and
famous Kiwi comics such as Foxtrot Flats
also help setthe scene.
net: Youve got some great illustrations.
What was your process for those?
JB: Kieran actually has a time-lapse
video from 2011 with him illustrating and
creating the first On the Fence character
and scenes in about two hours.
KS: From there, more characters were
created to help tell the story. Theres
an awkward cow that stares a lot and
interrupts, and Durgie the helpful
chicken, who introduces the tool.
The sheep avatar provides a bit of
nonsense fun and acts as a very loose
way to interpret users political leanings.
Each policy statement has two extreme
agreement points, each with a prop that
is generated onto the sheep when the user
Making friends Users can share their custom
sheepavatar with their friends on Facebook
Yeah bro The tools copy is based on New Zealand colloquial language, with responses ranging from
Noway! to Yeah bro. It was allowed to be silly, but not confusing or misleading, says Kieran Stowers
selects their response. We used vector
graphics, which are easy to manipulate,
and make animation a breeze.
JB: At last count, we had about a megabyte
of detailed vector art (including a full
wardrobe of props for our sheep to wear).
Kieran and I worked to balance the image
detail against the loading times, haggling
over the detail in the scenery. Its really
important to set a performance budget
and stick with it.
net: What technologies and tools did
youuse to build the site?
JB: We realised we would need to
handle a high number of connections,
without spending the whole budget on
infrastructure. We looked for something
fast and light, and settled on an
asynchronous stack: new-kid-on-the-
block Node.js with nginx on the front.
Alien abduction We used SnapSVG library for the
final scene,where a sheep is abducted by aliens
How we built
On the Fence is actually three
applications. The game section is a
one-page web app built on Backbone.
Marionette (marionettejs.com), a great
framework thats surprisingly fast on
mobile devices, with solid memory
management. With over six million
clicks,swipes and pages visited, its
doinga sterling job.
net: What were the biggest challenges,
and how did you overcome them?
JB: With a rich visual language, we had
to balance clarity and fun. The first On
the Fence featured a parallax scrolling
farm scene. Users enjoyed this, but we
discovered they were leaving after only
ahandful of questions. This time, we
dialled back the open-world experience,
which was a risk, but weve seen a
substantial increase in the time on site.
KS: The constant challenge is not to dumb
down the information but to translate
it, reword it and re-package it. These
policy provocations needed to take lofty
political ideology down into the realm of
plain speech, turning it into something
that could be understood by our panel
members, as well as the target audience.
Our direction was guided by the question:
Would a 16 year-old kid get this?
Next month: We chat to the creators
of The Field Museums new website
november 2014 67
Features Cover feature

Au thor
Justin Avery
By day, Justin
Illustration
(@justinavery) is a
technical consultant, Martina Flor
and by night he curates Berlin-based Martina
the RWD Weekly creates type, lettering
newsletter, hosts a and illustration work for
responsive podcast and clients all over the world
runs responsivedesign.is martinaflor.com

esponsive web design sounds
incredibly simple. Opt for flexible
grids for the layout, use flexible
media (images, video, iframes),
and apply media queries toupdate
these measurements to best arrange
content on any viewport. Inpractice
weve learnt it is not really that easy.
Tinyissues thatcrop up during every project keep us
scratching our heads, and occasionally even carving
fingernail trenches on our desks.
Since I began curating the Responsive Design
Weekly newsletter (responsivedesignweekly.com) Ive
been fortunate enough to speak with many members
of the web community and hear their experiences.
Iwanted to find out exactly what the community
really wanted to learn, so I circulated a survey to
readers. Here are the top results:
1. Responsive images
2. Improving performance
3. Responsive typography
4. Media queries in JavaScript
5. Progressive Enhancement
6. Layout
With those topics in mind, I ran a series of podcasts
(responsivedesign.is/feeds/podcast) asking some of
our industry leaders for their thoughts. In their
responses, one point was unanimous: focus upon
getting the basics right before you start worrying
about exciting and advanced techniques. By taking
things back to the basics, we are able to build a robust
interface for everyone, layering on features when the
device or users context allows.
So ... what about these advanced techniques?
Ihear you ask. I think Stephen Hay summed it up
best when he said: The ultimate RWD technique is to
start off by not using any advanced RWD techniques.
Start with structured content and build your way up.
Only add a breakpoint when the design breaks and the
content dictates it and ... thats it.
In this article, Ill begin with the basics and add
layers of complexity as the situation allows, to build
up to those advanced techniques. Lets get started.
Responsive images
Fluid media was a key part of RWD when it was first
defined by Ethan Marcotte. width: 100%; , max-width:
100%; still works today, but the responsive image
landscape has become a lot more complicated. With
increasing numbers of screen sizes, pixel density
anddevices to support we crave greater control.
Cover feature
The three main concerns were defined by the
Responsive Images Community Group (RICG):
1. The kilobyte size of the image we are sending
overthe wire
2. The physical size of the image we are sending
tohigh DPI devices
3. The image crop in the form of art direction for
theparticular size of the viewport
Yoav Weiss, with help from Indiegogo (netm.ag/blink-
255), has done the majority of the work on the Blink
implementation Googles fork of WebKit, and by the
time youre reading this it will be shipped in Chrome
and Firefox. Safari 8 will ship srcset , however the
sizes attribute is only in nightly builds and <picture>
is not yet implemented.
With the arrival of anything new to our web
development process, it can be difficult to get started.
Lets run through an example step by step.
<img
<!-- Declare the fallback image for all non picture
supporting browsers -->
src="horse-350.jpg"
<!-- Declare all of the image sizes in srcset. Include
the image width using the w descriptor to inform the
browser of the width of each image.-->
srcset="horse-350.jpg 350w,
horse-500.jpg 500w,
horse-1024.jpg 1024w,
horse.jpg 2000w"
<!-- Sizes inform the browser of our site layout.
Here we're saying for any viewport that is 64ems and
bigger, use an image that will occupy 70% of the view-
port -->
sizes="(min-width: 64em) 70vw,
<!-- If the viewport isn't that big, then for any
viewport that is 37.5ems and bigger, use an image that
occupies 95% of the viewport -->
(min-width: 37.5em) 95vw,
<!-- and if the viewport is smaller than that, then
use an image that occupies 100% of the viewport-->
100vw"
<!-- always have alt text.-->
alt="A horse" />
From a performance point of view it doesnt matter
ifyou use min-width or max-width in the sizes attribute
but the source order does matter. The browser will
always use the first matching size.
Also, remember we are hard-coding the sizes
attribute to be directly defined against our design.
november 2014 69
september
Features Cover feature

Stephen Hay

The ultimate RWD technique

is to start off by not using any
advanced RWD techniques.
Thats it. Start from the basics
and go from there. Start with
structured content and build
your way up. Only add a
breakpoint when the design
breaks and the content
dictates it and ... thats it.

70 november 2014

Cutting the mustard
Cutting the mustard is an approach that toboth sets, however the HTML5 groupwill also
involves testing for specific device features. benefit from localStorage, querySelector and
Ifthese features exist then the user is served addEventListener .
amore advanced and immersive experience,
while those that do not support them will still if('querySelector' in document
get the content they were looking for.
The test effectively separates users into two
groups; those with HTML5 capabilities and those
without. The same initial content is delivered
This may cause issues moving forwards. For example,
if you redesign your site, youll need to revisit all of
the <img> or <picture> s and redefine the sizes. If
youare using a CMS, this can be overcome as part
ofyourbuild process.
WordPress already has a plugin to help (netm.ag/
picture-260). Itdefines the srcset on WP standard
image varieties and allows you to declare sizes in
acentral location. When the page is generated from
the database, it swaps out any mentions on <img>
andreplaces them with the picture markup.
Basic
Think about whether you really need to include an
image. Is the image core content, or is it decorative?
One less image will mean a faster load time
Optimise the images you do need to include using
ImageOptim (imageoptim.com)
Set expire headers for your images on your server
or.htaccess file (see details under Performance)
PictureFill (github.com/scottjehl/picturefill) provides
polyfill support for pictures
Advanced
Lazy load your images using jQuerys Lazy Load
plugin (appelsiini.net/projects/lazyload)
Use HTMLImageElement.Sizes and HTMLPictureElement
for feature detection.
The advanced PictureFill WP plugin, found on
Github (netm.ag/imgtags-260), will allow you to define
custom image widths and sizes values
Performance
To get the fastest perceived performance on our pages,
we need all the HTML and CSS required to render the
top part of our page within the first response from the
server. That magic number is 14kb and is based on the
max congestion window size within the first round-
trip time (RTT). Patrick Hamann, frontend technical
lead at the Guardian (theguardian.com), and his team
have managed to break the 1000ms barrier using
amixture of frontend and backend techniques. The
Guardian's approach is to ensure the required content
Cover feature
Cutting the mustard allows us to organise users
into tiers based on feature detection. These tiers
all receive a different website experience, but
every user still has access to the basic content.
There's a useful BBC article at netm.ag/
&& 'localStorage' in window mustardarticle-260, or check out a presentation
&& 'addEventListener' in window) { by the BBCs Tom Maslen who first coined
// bootstrap the javascript application the term 'cutting the mustard at netm.ag/
} mustardvid-260.
the article is delivered to the user as quickly
aspossible and within the 14kb magic number.
Lets look at the process:
1. User clicks on a Google link to a news story
2. A single blocking request is sent to the database
for the article. No related stories or comments are
requested
3. The HTML is loaded containing Critical CSS
in the <head>
4. A Cut the mustard process is undertaken and any
conditional elements based upon the users device
features are loaded
5. Any content related to or supporting the article
itself (related article images, article comments and
soon) are lazy loaded into place
Optimising the critical rendering path like this means
the <head> is 222 lines long. However, the critical
content the user came to see still comes within the
14kb initial payload when gzipped. Itsthis process
that helps break that 1000ms rendering barrier.
Conditional and lazy loading
Conditional loading improves the users experience
based on their device feature. Tools like Modernizr
allow you to test for these features, but be aware that
just because a browser says it offers support, that
doesnt always mean full support.
One technique is to hold off loading something until
the user shows intent to use that feature. This would
be considered conditional. You can hold off loading in
the social icons until the user hovers over or touches
the icons, or you could avoid loading an iframe Google
Map on smaller viewports where the user is likely to
prefer linking to a dedicated mapping application.
Another approach is to Cut the mustard see boxout
above for details on this.
Lazy loading is defined as something that you
always intend to load on the page images that are a
part of the article, comments or other related articles
but that dont need to be there for the user to start
consuming the content.
november 2014 71
Features Cover feature

Basic If you are supporting multiple languages with your

Enable gzipping for files and set expire headers
forallstatic content (netm.ag/expire-260)
Use the Lazy Load jQuery plugin (appelsiini.net/
projects/lazyload). This loads images when approaching
the viewport, or after a certain period oftime
Advanced
Set up Fastly (fastly.com) or CloudFlare (cloudflare.
com). Content delivery networks (CDNs) deliver your
static content to users faster than your own server,
and have some free tiers
Enable SPDY for http2-enabled browsers to take
advantage of http2 features like parallel http requests
Social Count (filamentgroup.com/lab/socialcount)
allows for conditional loading of your social icons
Using the Static Maps API will allow you to switch
out Interactive Google maps for images. Take a look at
Brad Frosts example at netm.ag/static-260
Ajax Include Pattern (netm.ag/ajax-260) will
loadcontent snippets from either a data-before ,
data-after or data-replace attribute
Responsive typography
Typography is about making your content easy
to digest. Responsive typography extends this to
ensurereadability across a wide variety of devices
andviewports. Jordan Moore admits that type is one
thing he isnt willing to budge on. Drop an image or
two if you need, but make sure you have great type.
Stephen Hay suggests setting the HTML font size
to100 per cent (read: just leave it as it is) because
eachbrowser or device manufacturer makes a
reasonably readable default for a particular resolution
or device. For most desktop browsers this is 16px.
On the other hand, Moore uses the REM unit and
HTML font-size to set a minimum font size for certain
content elements. For example, if you want the byline
of an article to always be 14px, then set that as the
base font-size on the HTML element and set .byline {
font-size: 1rem;} . As you scale the body: font-size: to suit
the viewport you will not impact the .by-line style.
A good reading line length is also important aim
for 45 to 65 characters. Theres a bookmarklet you can
use to check your content (netm.ag/bookmarklet-260).
design, then line length may vary as well. Moore
suggests using :lang(de) article {max-width: 30em} to
cover off any issues there.
To maintain vertical rhythm, set margin-bottom
against content blocks, <ul> , <ol> , <blockquote> ,
<table>, <blockquote> and so on, to the same as your
line-height . If the rhythm is interrupted with the
introduction of images you could fix it by adding
Baseline.js (netm.ag/baseline-260) or BaselineAlign.js
(netm.ag/align-260).
Basic
Base your font on 100 per cent body
Work in relative em units
Set your margins to your line height to maintain
vertical rhythm in your design
Advanced
Improve font loading performance with Enhance.
js (github.com/filamentgroup/enhance) or deferred font
loading (netm.ag/defer-260)
Use Sass @includes for semantic headings.
Often we need to use the h5 style in a sidebar widget
that requires h2 markup. Use Beardeds Typographic
Mixins (netm.ag/mixin-260) to control the size and
remain semantic with the below code:
.sidebar h2 {
@include heading-5
}
Media queries in JavaScript
Ever since we have been able to control the layout
across a variety of viewports through media queries,
weve been looking for a way to tie that into running
our JavaScript as well. There are a few ways to fire
JavaScript on certain viewport widths, heights and
orientations, and some smart people have written
some easy-to-use native JS plugins like Enquire.js
(netm.ag/enquire-241) and Simple State Manager (netm.
ag/simple-260). You could even build this yourself
using matchMedia . However, you have the issue that
you need to duplicate your media queries in your CSS
and JavaScript.

Responsibly responsive
Web designer Scott Jehl asks
if RWD is bad for performance
I think the web in general has a problem with
bloated pages, and that problem both preceded
and continues alongside responsive sites. In
that light, I dont think its fair to attribute the
performance issues found in many responsive
sites to RWD itself, but rather to a broader lack
of follow-through with widely-recommended
optimisations. RWD is defined as nothing more
than a means for adapting visual layout, and its
the best approach we have for doing that.
All of the performance recommendations
we need to follow for building sites in general
concatenating, minifying or gzipping code,
optimising imagery, caching and so on should be
applied to responsive sites as well. Sometimes its
tricky to pull off with multi-device code, but I think
its more of a challenge than an impossibility.
Responsible Responsive Design by Scott Jehl will
be available Oct 2014 (netm.ag/responsible-260)

72 november 2014
 Cover feature

Ethan Marcotte

At the end of the day,

flexible layouts and media
queries are the only
prerequisites of a
responsive design.
Everything layered on
top of that is at the
discretion of the designer
or developer.

november 2014 73
 Cover feature

Aaron Gustafson has a neat trick that means /* declare the mobile first width for the grid */ Resources
you dont have to manage and match your media .grid-1-4 { float:left; width: 100%; }
Performance
queries in your CSS and your JS. The idea originally Network Link
came from Jeremy Keith (adactio.com/journal/5429) /* When the viewport is at least 37.5em then set the throttling (netm.ag/
and inthis example Gustafson has taken it to a grid to 50% per element */ stuntbox-260)
fullimplementation. @media (min-width: 37.5em) { Chrome Dev Tools:
Using getActiveMQ (netm.ag/media-260), inject .grid-1-4 { width: 50%; } Canary (netm.
ag/canary-260)
div#getActiveMQ-watcher at the end of the body element
and hide it. Then within the CSS set #getActiveMQ- /* Clear the float every second element AFTER the Enhance.js (netm.ag/
first. This targets the 3rd, 5th, 7th, 9th... in the grid.*/ enhance-260)
watcher {font-family: break-0;} to the first media query,
.grid-1-4:nth-of-type(2n+1) { clear: left; } Github South
font-family: break-1; to the second, font-family: break-2;
} Street (netm.ag/
to the third and so on. southstreet-260)
The script uses watchResize() (netm.ag/resize-260)
tocheck to see if the size of the viewport has @media (min-width: 64em) { .grid-1-4 { width: 25%; Polyfills
changed, and then reads back the active font-family . } Respond.js (netm.ag/
Now you can use this to hook JS enhancements like /* Remove the previous clear*/ respond-260)

adding a tabbed interface to a <dl> when the viewport
allows, changing the behaviour of a lightbox, or
updating the layout of a data table. Check out the
getActiveMQ Codepen at netm.ag/active-260.
Basic
Forget about JavaScript for different viewports.
Provide content and website functions to users in a
way they can access it across all viewports. We should
never need JavaScript
Advanced
Extend Gustafsons method by using Breakup
(github.com/BPScott/breakup) as a predefined list of
media queries and automating the creation of the
listof font families for getActiveMQ-watcher
Progressive enhancement
A common misconception about progressive
enhancement is that people think, Oh well I cant
use this new feature, but really, its the opposite.
Progressive enhancement means that you can
deliver a feature if its only supported in one or even
no browsers, and over time people will get a better
experience as new versions arrive.
If you look at the core function of any website,
you can deliver that as HTML and have the server
side do all the processing. Payments, forms, Likes,
sharing, emails, dashboards it can all be done.
Once the basic task is built we can then layer the
awesome technologies on top of that, because we have
a safetynet to catch those that fall through. Most of
theadvanced approaches we have talked about here
are based upon progressive enhancement.
.grid-1-4:nth-of-type(2n+1) { clear: none; } Picture.js (netm.ag/
/* Clear the float every 4th element AFTER the first. fill-241)
This targets the 5th, 9th... in the grid.*/ Flexbox Polyfill
.grid-1-4:nth-of-type(4n+1) { clear: left; } (flexiejs.com)
} Plugins
TableSaw (netm.ag/
Wave goodbye to using position and float for your tablesaw-260)
layouts. While they have served us well to date, their Fit Vids (fitvidsjs.com)
use for layout has been a necessary hack. Weve now Fit Text (fittextjs.com)
got two new kids on the block that will help fix all Adaptive UIs (netm.
our layout woes Flexbox and Grids. ag/allsopp-260)
Flexbox is great for individual modules, controlling Label Mask (netm.ag/
the layout of pieces of content within each of the label-260)
modules. There are layouts we attempt to deliver that All things RWD
can be more easily achieved using Flexbox, and this
Responsive Design
is even more true with responsive sites. For more on Weekly (netm.ag/
this, check out CSS Tricks guide to Flexbox (netm.ag/ newsletter-260)
flexbox1-26) or the Flexbox Polyfill (flexiejs.com). This is Responsive
(netm.ag/thisis-260)
CSS grid layout Responsive Design.is
Grid is more for the macro level layout. The Grid (responsivedesign.is)
layout module gives you a great way to describe your
layout within your CSS. While its still in the draft
stage at the moment, I recommend this article on the
CSSGrid layout by Rachel Andrew (netm.ag/grid-260).
Finally
These are just a few tips to extend your responsive
practice. When approaching any new responsive
work, take a step back and ensure that you get the
basics right. Start with your content, HTML and layer
improved experiences upon them and there wont be
any limit to where you can take your designs.

Layout
Flexible layout is simple to say, but it has many
different approaches. Create simple grid layouts
withless markup by using :nth-child() selector.
Thanks
With thanks to Jeremy Keith, John Allsopp, Stephen Hay,
Aaron Gustafson, Ethan Marcotte, Brad Frost, Patrick
Hamann, Jordan Moore and Scott Jehl, who all helped
formthe thoughts in this article.

november 2014 75
 Readabilty
Interactivity
creativity

r
ope
er ve
l
sign de
de
 Second feature

A Journey D
igital longform. Its a format
that has exploded in popularity
ever since The New York Times
launched its now-famous Snow

into Digital
Fall (netm.ag/snowfall-260)
piece in 2012. Shortly afterwards
came the Guardians equally renowned
longform story Firestorm (netm.ag/
firestorm-260), and soon the format was

Longform
being embraced by publishing houses,
brands, ad agencies anddesigners alike.
But how does one go about creating
a longform piece? What makes a good
reading experience online? And crucially,
how do you capture anaudience in a
world where people barely have an
Digital longform is where design, attention span of 140 characters, let

technology and journalism come alone 1400 words?

together to create rich stories.
Paul Woods, design director at
Edenspiekermann, introduces the
tools you need to get started
At Edenspiekermann, weve been
lucky enough to work on quite a number
of these types of projects in the past few
years, for both publishing houses such
as Zeit Magazin (zeit.de/zeit-magazin/
index) and brands such as Red Bull
(givesyouwings.redbull.com). So, without
further ado, lets take a step into the
world of digital longform.

An integrated workflow
It goes without saying that whatever
workflow you employ, an integrated
approach to design, development
and content creation from the start
Author is crucial to the success of any digital
Paul Woods project not just digital longform. The
(@paulillustrator) is problems with the traditional waterfall
a design director at
approach (designers handing PSD files
Edenspiekermann,
where he works to developers, and developers passing
between digital to content editors, with little or no
and brand design. interaction between the respective
His work has won parties) are numerous and well
several awards and
documented (netm.ag/agile-260).
is regularly featured
in international Static mockups and pixel-perfect
publications implementations are dead, and a close
paulthedesigner.ie collaboration between design and

november 2014 77
FeatureS Second feature
Snow Fall The now-famous article launched in December 2012 by The New York Times
development is key. At Edenspiekermann,
we approach our digital editorial using
aScrum workflow (netm.ag/scrum-260), in
which design and development take place
simultaneously. With digital longform
in particular, not only do design and
development teams need to work
together, but the writer or journalist
alsoneeds to be closely integrated right
from the very start.
Recently we developed a series of
longform pieces for the World ofRed
Bull campaign. For this project, we set
out to create rich visual worlds for each
of the seven athletes stories that would
feature on the campaign website (netm.
ag/stories-260). To write the stories, we
worked with journalists from across
A brief history of digital longform
Defined as a branch of journalism dedicated
to longer articles often taking the form of
creative nonfiction or narrative journalism
(netm.ag/longform-260), longform journalism
is certainly nothing new. However, it is only
in recent years that the format has reached
maturity in a digital context and been widely
adapted by media outlets. Now, traditional print-
based publications such as the Guardian and
TheNew York Times have embraced the long-read
format, and creating hugely popular feature
articles that are brimming with interactivity.
78 november 2014
Fontshop Choosing a digitally native font can make a world of difference to your article
the globe; a different one for each
athlete. We went back and forth between
content, design and development in a
truly integrated workflow.
The writers were encouraged to think
beyond the written word and include
suggestions for infographics, video and
other interactive elements. Likewise,
design and development decisions
which happened in parallel to writing
fed back into the writing process.
A balancing act
Digital longform is a field of digital
design that really benefits from
pushing the envelope in terms of visual
creativity. We found that the key to
a successful piece is the right mix of
The format draws its roots from early
experiments in parallax-style HTML5
storytelling around 2011 (such as Nike Better
World from Ian Coyle fieldnotes.iancoyle.
com). Combining digital know-how with its
rich heritage in printed longform journalism,
The New York Times launched Snow Fall in
December 2012 (netm.ag/snowfall-260).
Arguably the piece that kicked off digital
longform as we know it today, the piece centred
around the story of a group of skiers buried in
an avalanche and was told through the layering
readability, interactivity and creativity.
Itis a delicate balance.
On one hand you want to push the
interactive possibilities of digital and the
art-directed nature of longform. On the
other, people need to feel focused on the
words if theyre going to read anything
ofsignificant length. As we all know well,
in our digital world attentions spans are
short and distractions are many.
On the World of Red Bull campaign,
we started out really trying to establish
an individual look and feel for each
athletes story. We developed the stories
completely one at at time. By the time
we got to the third story, we felt wed
got the balance between readability,
interactivity and creativity just right.
of words, video and graphics. The story brought
in countless readers and a Pulitzer Prize, and
according to the Times, generated 3.5 million
page views in one week.
About a year after Snow Fall, the Guardian
released the almost-as-famous Firestorm
(netm.ag/firestorm-260). This took quite a
different approach and was far richer in media
and video, feeling much more like an app. Since
these two pioneering benchmarks, the format
has been widely adopted by media outlets and
brands the world over.

Make it personal In text areas, all excess distractions need to be minimised an approach taken here in the World of Red Bull athlete stories project
We then worked the things wed learnt
backinto theother stories.
When people need to read, all
other distractions need to instantly
disappear. Lose the interactive maps,
CSS animations and above all, parallax
scrolling (although we have used it once
or twice). White background, black text.
Think of it as entering focus mode.
One of the way we achieved this was
by using a modular, panelled approach,
so that interactive elements were
heavily separated from the reading
sections. These focused panels featured
little other than a single block of text.
Navigation can afford to disappear,
onlyreappearing when absolutely
necessary. Its what books (you know,
the things made with paper and ink)
have been doing for a very long time.
The message is simple: make it easy
foryour readers to read.
Think type
Arguably the most important decision
you will make when it comes to digital
editorial is type. From choosing the right
font to testing it across multiple devices,
the handling of typography makes or
breaks an editorial design after all, it
isthe base unit of this format.
It goes without saying that all
typographic decisions should be made
directly in the browser. Type rendering
in Photoshop, Sketch, and so on differs
drastically from how it appears in the
When people need to
read, all distractions
need to disappear.
White background,
black text
browser on your shiny 27" iMac, let
alone Windows machines, older Android
devices and feature phones.
These days, designers barely even need
to get their hands into code (although
they probably should) to test out fonts
in the browser. Tools such as Typecast
(typecast.com) and Fontshops Tryout
(next.fontshop.com) make it easy to test
Second feature
how fonts actually render. Investing
some time optimising text across
multiple devices, browsers and platforms
really pays off. Often a small change
such as setting "-webkit-font-smoothing:
antialiased" makes a massive difference
over long passages of text.
When setting type for digital editorial
or indeed any digital project never
underestimate the importance of
selecting a digitally native font (one
designed specifically for screen). These
usually have less contrast in the strokes,
meaning higher legibility, especially at
smaller sizes. Choosing a contemporary
digital font such as Klim Type Foundries
Tiempos Text (netm.ag/tiempos-260),
used on What Screens Want (netm.ag/
chimero-260) amongst many others
instead of an older font like Garamond,
which was never designed for screen,
can make a huge difference.
Its also important to choose a font
that is hinted (netm.ag/hinting-260)
byhand (tweaking the rasterisation
ofafont so that the optimal outlines
are mapped onto a screens pixels),
november 2014 79
FeatureS Second feature

Resources
Articles on longform
The Guardian browser
support principles
netm.ag/mustard-260
The Guardians approach to
progressiveenhancement
Diving into digital long-reads
netm.ag/longread-260
A basic introduction to digital
long-reads

Tools and processes

GhostLab
vanamco.com/ghostlab
Synchronised browser testing
for mobile devices
Catching on Digital longform is an increasingly popular format for editorial content, both for media outlets and brands
The Subsetter
subsetter.com
Remove the letters you dont need,
to greatly reduce the font file size so itdisplays far better across older Like any progressive enhancement
browsers and devices. technique, the organisations website
Fontshop Tryout
next.fontshop.com/tryout is designed mobile-first, with features
Test-drive web fonts in real time all about Performance loaded in progressively, based on
and collaborate freely with anyone Given that digital longform content is browser capabilities. The Guardians
on your artwork often consumed on the go, in situations site(netm.ag/guardianmobile-260),
Typecast where internet coverage is poor (such currently in beta,is a real benchmark
typecast.com ason the Tube), performance and page for performance and is blisteringly fast,
Design a working prototype using
speed area key considerations. even on the worst of connections.
a simple web interface, then export
production-ready HTML and CSS, No discussion on the importance of Web fonts can really rack up
orshare by URL performance in digital editorial would the kilobytes, so it is worthwhile
An introduction to Scrum be complete without a mention of the paying close attention to subsetting
netm.ag/agile-260 Guardians approach to progressive possibilities. Ask yourself, Do I need
A summary of why we work with enhancement (netm.ag/mustard-260) the full set glyphs for a font that I just
Scrum at Edenspiekermann based on the BBCs Cut The Mustard use for infographic numbers? Probably
technique (netm.ag/bbc-260). not. Optimise the hell out of your font
by kicking the unnecessary glyphs.
Tools like FF Subsetter (subsetter.com)
areperfect for this.
One big mistake that a lot of big
digital publications (and I mean a lot)
aremaking is trying to avoid any flickers
of un-styled system font. The problem?
On slow connections, the web font loads
after the images have loaded. Weve all
been there on the train, staring at a
blank screen waiting to read the latest
tech article and frustrated that the
images and CSS load before the web font.
Reality check: a flicker of un-styled
system font on page load is harmless.
No one cares if the text is in Times New
Roman and not your awesome custom
web font they just want to get on and
Keep it collaborative Close working relationships between designers and developers are vital for any digital project read the article. Use an asynchronous

80 november 2014

Amaphiko For Red Bull Amaphiko, modules were the used as the building blocks for each story, meaning it can be easily manipulated and edited, and even reused if necessary
approach to loading your web fonts
(netm.ag/asynchronous-260) for reading
on poor connections.
Manage that content
Although the idea of a completely
customised and art directed story may
seem fantastic to a designer, in reality
this is may not feasible. Not only that,
its often not even the best choice.
Journalists and editors will probably
need to be able to go in and edit the
content, change images and perhaps
even reuse the template for a new story
(albeit with a different art direction).
Perhaps you need to translate the
content into different languages? Or
non-Latin charters? Maybe even right
to left? On the World of Red Bull project
we needed to adapt (and localise) the
custom art directed to over 30 languages
in more than 60 countries.
A best practice approach to content
management and adaptation is to design
and build longform stories in modules
rather than pages. Modules are reusable,
easily dragged-and-dropped around the
page, can be added or removed as needed
and are easily integrated with a CMS.
Recently we created our own custom
Storybuilder tool for a project called Red
Bull Amaphiko, a project working with
social entrepreneurs in South Africa
(netm.ag/amaphiko-260). Using the
Storybuilder, the social entrepreneurs
created their stories using pre-defined
building blocks (modules).
A best practice
approach is to design
and build longform
stories in modules
rather than pages
We created a set of basic module types,
including image, text block, video
and so on that could be combined and
reordered to create an elegant longform
story. Think of it like a recipe the
building blocks are the ingredients that
can be combined to create a story. As
the stories grew, the users could also
add additional chapters. The visual style
of each story was chosen from a set of
themes in the global setting.
Second feature
Before diving into creating a custom
CMS, bear in mind that there are also
some great existing tools for managing
editorial content and these tools can
often be combined. For example, in
the past we have combined the highly
customisable Rails-based Active Admin
(activeadmin.info) with the JavaScript
drag-and-drop interface Sir Trevor
(madebymany.github.io/sir-trevor-js).
Weve also looked into API-based
solutions, such as Contentful (contentful.
com), for more complex editorial
projects. Of course, sometimes a far
simpler solution is all you need, and a
file-based CM like Get Kirby (getkirby.
com) will do the job just perfectly.
Storytelling
Above all, be flexible and open minded,
and chose the tools and processes that
best meet the projects needs. Inspect
and adapt your approach and be honest
about what works and what doesnt.
Lastly, and probably most importantly,
remember that the real make or break
of your digital longform will not be not
be the technology, typeface or custom
artdirection it will be the story.
november 2014 81
 on
sale
now!

In 164 packed pages, we show you how to get to the top of Google.
From making your site load faster and climbing the rankings to the
latest SEO tricks and techniques, this handbook contains everything
you need to know to become a master of SEO. Youll also learn all about
Analytics from a wide range of industry experts and Google itself
and key marketing techniques to drive your site or business
to the top of the worlds favourite search engine.
 Tips, tricks
& techniques

This month Featuring...

84 90 104

Build smooth digital uis  84 Head to head  96 Create a browser game  104
Mark Jones on how Famo.us helps bring Alex Matchneer considers the differences Anton Mills on how to create a browser-
native app performance to the web between React and Ember.js based game with the Phaser framework

create a perspective shot  90 Build Hybrid mobile apps 98 Take the pain out of Sass  108
Phil Coffman explains how to use After James Miller explores how Ionic can Ian Carrico walks through how to set
Effects to create adynamic display of work beused to build a mobile app upyour Sass development environment

Boost your Git workflow  94 Standards 103 Accessibility 114

Tobias Gnther shows you how to Ruth John takes a look at the new Vibration Robin Christopherson on how the war of
useTower to simplify your Git workflow API, and what to use it for the virtual assistants impacts accessibility

Browser support Exclusive videos

Desktop Mobile/tablet
0 0

We feel its important to inform Look out for the video icon
0 0
our readers which browsers the throughout our tutorials. This
technologies covered in our tutorials issue, three authors have created
0 0 work with. Our browser support exclusive screencasts to
info is inspired by @andismiths complement their articles and
0 0 excellent When Can I Use web enhance your learning, including
widget (andismith.github.io/caniuse- Mark Jones guide to building
0 0 widget). It explains from which digital UIs with Famo.us, and Phil
version of each browser the Coffmans tutorial on creating
features discussed are supported. perspective with After Effects.

november 2014 83
PROJECTS Frameworks Download
the files here!
Find the GitHub repository
accompanying this tutorial at
netm.ag/famGit-260

A b o u t t he a u t h o r
Ma rk Jones
w: thisismarkup.co.uk
t: @mark_jones
job: Lead frontend
developer, Kaldor Group
areas of expertise:
Frontend development,
best practices and
tooling
q: what was your
childhood nickname?
a: Desmond

Frameworks

Build smooth digital

UIs with Famo.us
Mark Jones explains how the Famo.us framework can
beusedtobring native application performance to the web

60 frames per second. Its the target we should
be aiming for when building digital interfaces.
Despite improvements to our development tools, it
isdifficult and at times seemingly impossible
toachieve animations that run smoothly and feel
natural. Why is this? Browser layout engines like
WebKit and Gecko were built for rendering text and
links with a few images in-between, rather than the
complex applications we see in browsers today.
Video
With the success of initiatives such as Jank Free
Mark Jones has created
(jankfree.org), its clear developers trying to create
an exclusive screencast
to accompany this experiences matching their native counterparts are
tutorial. Watch along at required to understand browser rendering intimately.
netm.ag/famousVid-260
Whilst this isnt something to discourage, Famo.us
aims to provide adifferent option.
Famo.us is a free, open source JavaScript
framework that helps you create smooth, complex
UIs for any screen. At its core is a 3D layout engine
alongside a 3D physics-based animation engine.
Famo.us renders to the DOM, with Canvas and
WebGL rendering contexts coming in the near future.
Unlike browser rendering engines, it has been built
with many similarities to 3D rendering libraries.
The performance of animations has been the focus
from the start of development, with the framework
beginning life as code that animated a single <div>
at 60fps without the use of CSS animations. In its
current form, Famo.us functionality focuses on
building your applications views, leaving it up to you
to decide how to handle other application concepts

84 november 2014

such as models, controllers and templating. At the
time of writing there is no IE support due to a bug in
IEs preserve-3d implementation, but support for the
browser is planned once this is fixed.
To follow along with this tutorial, download the
repository at github.com/markj-/netmag-famous and
use main.js as your starting point. main.js requires
the modules needed for all of the code samples,
but when developing properly you will only want
torequire the specific modules your code uses.
Eachcode sample has a corresponding branch in
the netmag-famous repository that you can switch
toin orderto see the code in full, or if you have
trouble getting anexample to work.
Creating context
The first aspect of Famo.us to understand is the
concept of a context. A context is not a visible
element, but instead provides the frame in which
aFamo.us application will run.
var context = Engine.createContext();
The performance of
animations has been
the focus from the very
start of development
To create something that our users will be able to
see, we need to create some Renderables, then add
them to our context. A Renderable is anything that
can be seen on the screen in our Famo.us context,
the most primitive of these being a Surface.
var surface = new Surface({
content: 'My first surface'
});
context.add( surface );
Surfaces map to elements in the DOM tree, in this
case a <div> containing a text node. Our content
property contains a string that will be inserted into
the Surface. This can be an arbitrarily long string
of HTML, following the normal rules of HTML.
Also available are ImageSurfaces, CanvasSurfaces,
InputSurfaces and VideoSurfaces, with all of these
mapping to their corresponding HTML element.
Size
Passing in the size property when we create our
Surface allows us to specify width and height in
a variety of ways. We can specify our Surfaces
Frameworks
In-depth
Under the hood
This tutorial covers how to use Famo.us, but now lets take
alook at the optimisations that the framework uses to bring
native performance to the web.
requestAnimationFrame
requestAnimationFrame (rAF) animations are a replacement
for setInterval animations that schedule animation work to be
completed during the current animation frame. The benefits
include: animations only running if theyre visible (saving us
precious battery life) and animations being synced to your
monitors refresh rate to avoid skipped frames that would
otherwise lead to janky animations.
To learn more about rAF and why we should be using it to
powerour animations, take a look at an excellent article by
LuzCaballero at netm.ag/request-260.
Batching DOM read/writes
When we modify the DOM, then query the DOM, then modify
theDOM again, we run the risk of causing layout thrashing
(netm.ag/thrashing-260) which decreases our applications
performance. Famo.us batches DOM reads and writes for us,
sothat all the reads happen followed by all the writes, preventing
the thrashing from occurring.
Flat DOM
Famo.us HTML output is a flat DOM with little nesting of elements.
Having a shallow DOM is one way to avoid expensive reflows (netm.
ag/reflow-260), so despite the output being unlike something we
would write by hand, it is an important optimisation to make for
efficient animations.
JavaScript transitions
There has been a trend over the past few years for developers
touse CSS transitions for all animations. Frameworks and
libraries such as Famo.us, VelocityJS and the GreenSock animation
platform have adopted JavaScript animations instead, which
allows optimisations to be made during the render loop. For more
information about CSS versus JS transitions and the potential
optimisations, this article by Julian Shapiro is a great read:
davidwalsh.name/css-js-animation.
november 2014 85
PROJECTS Frameworks

dimensions as a number (in pixels), as undefined var modifier = new Modifier({

(100 per cent of the Surfaces parent context width/ transform: Transform.translate( 100, 100, 0 )
height) and also as true (size the Surface to the });
width/height of its contents).
var surface = new Surface({
var surface = new Surface({ content: 'My first surface'
content: 'My first surface', });
size: [ 150, 150 ]
}); context.add( modifier ).add( surface );

Styling Modifiers let us define a collection of visual changes

Right now our Surface is looking kind of boring.
Wecan make it more visually appealing by
passing ina properties object during the Surfaces
instantiation. Youll notice these are standard CSS
properties, following the rule that the HTML inside
aSurface operates untouched by Famo.us.
to apply to our Surface. The Modifier we have created
applies a transform matrix, causing our Surface to be
rendered 100 pixels from the top and left-hand edges
of our context. Modifiers also allow us to change our
Surfaces opacity, size, origin and alignment.

var surface = new Surface({ The key to building

Resources
Links list
Theres a
comprehensive list
of resources to help
you find out more
about developing with
Famo.us at netm.ag/
hackpad-260
content: 'My first surface',
size: [ 150, 150 ],
large applications
properties: { is to create smaller
color: 'white',
backgroundColor: '#67b2e8' composable pieces
}
}); Origin and alignment
A Modifier that changes our Surfaces origin
This method of styling Surfaces may seem unusual andalignment is another way that we can lay out
at first, but the reasoning is linked to Famo.us ourinterface.
rendering being abstracted from the DOM. When
theCanvas and WebGL contexts are finished, we var modifier = new Modifier({
align: [ 0.5, 0.5 ],
willbe able to render our application to either one
due to not relying on DOM-based concepts such origin: [ 0.5, 0.5 ]
asclasses and IDs. });
Transform var surface = new Surface({
Our Surface will render in the top left of our context content: My first surface,
size: [ 150, 150 ],
by default. To move our Surface away from the top
left corner, we need to create a Modifier. properties: {

Left Famo.us' infamous stress test showcases what an early version of the framework was Right Famo.us University: your next stop on the way to mastering Famo.us

86 november 2014

color: white,
backgroundColor: #67b2e8
} chaining the add method) will only be affected by
});
context.add( modifier ).add( surface );
The align property defines the Modifiers anchor
point for the parent context, and the origin property
defines the anchor point for the child Surface. These
particular values will cause our Surface to becentred
within our context.
Notice how the Surface adjusts its position
whenwe change our browser window size. Try
setting the align array to [ 0, 0 ] . This causes the
centre of our Surface to anchor to the top-left
of theparent context, as this is now the parent
contexts anchor point.
Branches and leaves
To understand the effects of Modifiers we must first
understand Famo.us render tree. Luckily, the core
ideas are simple: a Famo.us context is the root of
the render tree. The render tree has a Surface for
each leaf. A leaf is affected by exactly the Modifiers
between it and the root.
var surface1 = new Surface();
var surface2 = new Surface();
var modifier1 = new Modifier();
var modifier2 = new Modifier();
var modifier3 = new Modifier();
context.add( modifier1 ).add( surface1 );
context.add( modifier2 ).add( modifier3 ).add( surface2 );
Frameworks
Demos Play with the
Adding a Modifier or Surface directly to our context demos and then download
the Famo.us starter kit to
creates a branch. Any Surfaces added to a branch (by see the code behind them
the Modifiers further up the branch.
modifier3 being added to modifier2 demonstrates
Modifier chaining, which is a pattern we can use
to separate different parts of a modification. For
example, if we wanted to rotate and move surface2 ,
modifier2 could handle the rotation whilst modifier3
could handle the positioning.
Views
The key to building maintainable, scalable
largeapplications is to create smaller composable
pieces that can be brought together to form our
application. Famo.us views allow us to group
Surfaces, encapsulate functionality and also provide
an eventinput and output, allowing communication
with other views in a decoupled manner.
Unlike other frameworks, views in Famo.us
are notrenderable, so they will not change our
applications appearance unless we have added
Renderables to the view. Views have no default
appearance; they are simply a collection of Modifiers
and Surfaces, which themselves affect what is
rendered. Views are treated as a single leaf on
therender trees branch, causing any Surfaces
thatare added to itto be affected by Modifiers
higherup the branch.
var surface = new Surface({
content: 'My first Surface'
});
var surface2 = new Surface({
november 2014 87
PROJECTS Frameworks
Focus on
Future developments
Here are some of the exciting things we can look forward to
in future Famo.us releases:
Famo.us Wrapper
The Famo.us Wrapper is similar to (and based on) Cordova
(cordova.apache.org). The Android version of the wrapper is being
built in conjunction with Intel and will allow your application to be
packaged with a Chrome 35 WebView, regardless of the Android
version its running on. Not developing for Android? An optimised
version of Cordova is also being worked on for iOS, Windows
Phone,Kindle and Firefox.
MVC framework
Famo.us provides us with much of the functionality we need
to build interfaces that rival native applications. However, it
leaves certain architecture choices (Models, Controllers, Routing,
Templating and so on) up to us. The Famo.us MVC framework will
provide a complete solution for our applications architecture if
youwould prefer not to roll your own.
Framework integrations
Already using another MVC framework? Dont let that get in the
way of taking a look at Famo.us. An Angular integration is already
available (famo.us/angular) with Ember, React and many more
integrations in the works.
Mobile templates
If youre used to developing with Bootstrap or Ionic youll be
pleased to hear that a project is underway to port many of the
templates they provide to Famo.us, allowing common application
layouts to be constructed with ease. With the added bonus of 3D
layout and physics, of course.
jQuery Widgets
Whilst jQuerys animation techniques are starting to show their
age, jQuery plugins are as popular as ever. Many of the more
ubiquitous plugins are being ported to Famo.us, allowing widgets
such as carousels to be swapped out for the Famo.us-powered
equivalent in a snap.
88 november 2014
content: 'Another surface'
});
var view = new View();
view.add( surface );
view.add( surface2 );
context.add( view );
Famo.us comes with many in-built views such
as FlexibleLayout, a view for providing ratio-based
responsive layouts that provide us with a starting
point for our applications. By composing several
of these views, we can quickly build common
application layouts with minimal effort.
Can touch this
Our application isnt going to be very interesting if
we cant interact with it. Famo.us events are captured
at three different levels. The first level is on the
Surface, the second is the Surfaces parent context,
and the third and final level is the Engine.
surface.on( 'click', function( e ) {
console.log( 'Surface clicked', e );
});
context.on( 'resize', function() {
console.log( 'Context resized' );
});
Engine.on( 'keyup', function( e ) {
console.log( 'Keyup event', e );
});
Animations
Weve covered many of Famo.us basics, but we
still seem to be focusing on displaying content,
something that modern browser engines are pretty
good at. Be it the animation of a scrollview or
the transitions between screens and menus, our
animations have to be smooth and feel natural
totheusers input.
Famo.us achieves this by doing away with CSS
animations, instead applying matrix transformations
directly to the Surfaces it is animating. We will use a
specific type of Modifier called a StateModifier , which
is simply a Modifier which contains its own state via
setTransform .
var context = Engine.createContext();
var surface = new Surface({
content: 'My first surface'
});
var modifier = new StateModifier();
 Frameworks

Left The Angular

context.add( modifier ).add( surface ); an element is interacted with, and with a choice of integration is ready and
waiting for developers
transition styles. with more integrations
modifier.setTransform( onthe way
Transform.translate( 100, 300, 0 ), Transitionable.registerMethod( 'wall', WallTransition );
Right Say goodbye to
{ duration : 1000, curve: Easing.inOutBack } the DOM and hello to the
); var surface = new Surface({ render tree

size: [ 150, 150 ],

StateModifier s setTransform method allows properties: {
animations to be triggered on Surfaces. The first backgroundColor: '#67b2e8'
parameter determines what we want to animate }
(such as rotations or opacity), andthe second });
describes how it should perform theanimation,
including the duration and the type of animation var modifier = new StateModifier();
curve. setTransform has a third parameter acallback
that runs once our animation is complete. context.add( modifier ).add( surface );

var wall = {
Where Famo.us excels method: 'wall',

is the combination of period: 500,

dampingRatio: 0.1
its physics engine with };

animations
Were using Famo.us Easing object to dictate
the curve of our animation. The Easing object
provides uswith over 30 easing curves to use
in ouranimations. Should we wish to sequence
severalanimations, we can chain them by calling
setTransform multiple times. When we chain
animations, the previous animation will finish
before the next one begins. Complex sequences of
animations are simple tocreate using this pattern.
Physics
Where Famo.us really excels is the combination of
its physics engine with animations. Our previous
animation occurred over a fixed amount of time.
Famo.us gives us the ability to create animations that
occur for varying durations, depending on the way
modifier.setTransform(
Transform.translate( 0, 400, 0 ), wall
);
This example shows how to register a Transitionable
method called 'wall' , which we use as the second
argument to our StateModifier s setTransform method.
This causes our Surface to animate 400 pixels
from the top of our context over a duration of 500
milliseconds, and when it arrives at its destination
itbounces as if it has hit a wall, causing it to come review
toa gradual stop.
David
Fetterman
Whats below the surface? With thanks to David
Famo.us is an exciting framework that is simple Fetterman, head of
touse whilst being incredibly powerful. This article Famo.us Labs, for his
review of this tutorial.
couldnt cover everything it does, so check out the
resources in the sidebars to find out more.

november 2014 89
PROJECTS After Effects Download
the files here!
Download the source
filesforthis tutorial at
netm.ag/perspective-260

A b o u t t he a u t h o r
P hil coffma n
w: philcoffman.com
t: @philcoffman
job: Head of design,
PCPartPicker
areas of expertise:
Design (visual, UX and
UI, product, interface,
website, application)
q: what was your
childhood nickname?
a: I didnt have one, but
I got my fair share of
coughing jokes with
my last name

After Effects

CREATe A dramatic
PERSPECTIVE SHOT
Phil Coffman walks you through how to use After Effects with
Photoshop tocreate a striking, tilted grid display of your work
Digital designers are always looking for new
ways to showcase their work. One popular
method is to present your screenshots in a grid,
angled away from the viewer. There are numerous
ways to achieve this look. One method I see regularly
makes use of Photoshops Smart Objects, which can
be skewed, rotated and scaled without permanently
altering the assets original state. All the designer
video
has to do is open a Smart Object, edit its contents and
Watch an exclusive
hit Save to see their work in all its isometric glory.
screencast of this
tutorial created by This approach is perfectly fine, but requires that
Phil Coffman at: the designer either a) knows how to skew a Smart
netm.ag/coffman-260
Object so that it appears at a natural 3D angle, or
b) accepts whatever preconfigured setup they can get
from a PSD resource. Being the control-freak that
I am, I wanted a better way of achieving this look
while maintaining aesthetic freedom.
Photoshops 3D tools continue to elude me, but
thanks to Adobe Creative Cloud I have After Effects
sitting there begging for me to use its 3D capabilities.
One of the amazing things about After Effects is how
easy its 3D tools are to use. With one enabled setting
and a virtual camera, you can build a 3D scene that
places full perspective control in your hands.
In this tutorial, Im going to show you how to set
up a simple grid of images in Photoshop and leverage
the power of After Effects to build a perspective shot
you can edit, change-up and reuse.

90 november 2014
 After Effects

This tutorial requires both

01 Photoshop and After Effects.
Thanks to Adobe Creative Cloud,
getting a copy of both is as easy as
navigating to the Apps tab in the
CC app and clicking Install .

Well begin in Photoshop, but

02 before we start you will need
a collection of images to work with.
In this example were showcasing a
grid of beautiful photos I sourced
mine from Unsplash (unsplash.com).
Open all of the images in a single
Photoshop document, with each
ontheir own layer. Your document
should be fairly large to begin with
Istarted at 4000x4000px.

Now we need to arrange the

03 images into a grid. What the
grid looks like is completely up to
you. In this example the images are
the same size, so I used the Align
tool to make sure they were in the
same location and spaced them out
left to right, top to bottom, across
the canvas. Youll want to leave a
decent amount of spacing between
each image. Im making a 4x4 grid
with 70px gutters.
Once youve assembled your
04 grid, youre almost ready for
the magic of After Effects. But first
its best to remove any unused
portions of our canvas. This can be
Step 5 After Effects is where all the perspective magic takes place
Step 4 Before moving out of Photoshop and into After Effects, you need to trim off all the excess space around your grid display
done quickly by going to Image >
Trim... , selecting Transparent Pixels
under Based On and all sides under
Trim Away , then hitting OK .
Photoshop will cut all the unused
space out of your canvas.
Now save your Photoshop
05 document and open up After
Effects. The first step here is to
create a new composition. In the expert tip
Composition Settings dialog give
ita name and set the size to
whatever you want your rendered Creating an
even grid
image to be. Im making a high-res
shot for Dribbble, so Im setting
mine to 800x600px. Next specify
the background colour I chose When making an evenly
amedium grey. Since this is a still spaced grid of items in
image you can leave the rest of the Photoshop, the first thing
settings alone. to do is make sure
Snap is turned on under
Next import your Photoshop View > Snap . Instead of
06 file. Go to File > Import > setting up a series of
File , select your image grid PSD, guides, I manually drag
make sure you have Import as alayer to sit directly
Footage selected in the Import nextto its neighbour (the
dialog box, and click Open . A snap will make sure it
Footage dialog will appear. Make clicks into place). Then,
sure Layer Options are set to holding down Shift , nudge
Merged Layers it will be much the layer over at 10px
easier to work with our layers as increments. Repeat this
amerged asset. process and everything
will be evenly spaced.
The Photoshop file now
07 shows up in the Project
window on the left, next to your
newly created composition.

november 2014 91
PROJECTS After Effects

Double-click to open up the tocreatethe perspective shot will

composition and then drag
thePhotoshop file into your
compositions Timeline. Dragging
afile asset into the Timeline instead
of onto the compositions canvas
will automatically centre the asset
on the canvas.
We need our Photoshop
08 asset layer to be a 3D layer.
You can either right-click on it and
select 3D Layer , or enable it by
clicking on the empty box below the
3D Box icon next to the layer name.
If you dont see a row of options
with icons, then click on the button
Toggle Switches / Modes at the
bottom of the Timeline to bring up
those options.
We wont see the magic
09 ofa3D layer until we add
aCamera to our composition.
Go to Layer > New > Camera...
orright-click in the layers region
ofyour compositions Timeline
andselect New > Camera . You
can leave the Camera settings at
their default orchoose to select
oneof the presets.
Next we need to make our
10 Grid layer lie flat in our
scene. Select your Grid layer and
expand its layer options by clicking
on the layers triangle. Under
Transform find the Orientation
property, click on the first value
of0.0 and set it to 270. Apart
from one small position tweak well
make in a minute to thislayer, we
wont touch this layers position
again. Everything weneed to do
beachieved with the Camera.
To set up the shot, select the
11 Camera layer and press the c
key, which brings up the tools we
can use to orientate the Camera.
Repeatedly pressing c cycles
through the four Camera tools:
Unified Camera, Orbit Camera, Track
XY Camera, and Track Z Camera.
The Unified Camera tool allows you
to move the Camera up, down and
around the scene. Orbit is similar,
and you wont really need it here.
Track XY keeps the Camera at its set
height but slides it around. Track Z
allows you to zoom in and out. Use
all of these together to find the right
perspective view of your grid.
With your perspective angle
12 dialed in the way you want it
(you can always adjust this later if
you need) its now time to begin the
process of adding depth to our grid
of images. To start this process we
need to duplicate our Grid layer.
Select the Grid layer and go to Edit
> Duplicate or type cmd/ctrl+d .
The top copy of the Grid layer
13 will be our master, but while
we need it in our Timeline, we dont
want it to be visible. Turn off its
visibility by clicking on the eyeball
icon. Its also good to give this layer
its own name. With the layer
selected, hit the Return key and
title it Grid Master. Master layer. This parent/child
Next, select the bottom Grid
14 layer, expand its Transform
properties and, while holding down
Step 11 Select the Camera layer and use the selection of tools to orientate the Camera
the alt key, click the stopwatch
icon next to the word Position .
Thisbrings up the option to specify
anexpression for the position
property. An expression gives us
the ability to dynamically control
aproperty rather than hard-coding
its values. The expression input field
should be highlighted in the
Timeline on a line titled Expression:
Position , but if its not simply click
on the words transform.position
and add the following expression:
position+[0,0,(index-1)*1] .
Now we need to establish a
15 parent/child relationship
between our copied Grid layer and
the Grid Master layer. Click on the
Parent dropdown on the copied
Grid layer that we applied our
expression to, and select the Grid
thenumber of duplicated layers.
relationship works in tandem with
the expression we added to the
child layers position. It might be
difficult to notice, but after setting
up the parent/child relationship,
thechilds position will adjust so it
isslightly down from the parent
gridlayer.
Now its time to start
16 simulating depth. Create
several duplicates of the child Grid
layer. I like to use the keyboard
method so I can quickly create
several duplicates. I have a total
of10 copies of the child Grid layer.
Youll start to notice that
eachduplicate is automatically
positioned 1px down from the layer
above it, thanks to our expression
and parent/child relationship. Sure,
these layers could be positioned
manually with each copy, but this
method is much faster and allows
for quick customisation to the
amount of depth by changing
The depth might be hardto
17 see at this point, depending
on what your images look like. One

Expert tip

Introducing After Effects

Step 9 Add in your After Effects camera
If youve never worked in After Effects before, dont let that scare you: think of
it as Photoshop set to motion. After Effects is primarily a Timeline-centric app.
Your layers stack on a Timeline and you have a stage area where you work with
compositions. Youll see a lot of Photoshop favourites such as Filters, which are
referred to as Effects, Blending modes, Alignment tools and so on.

92 november 2014

Step 17 A good way to create a feeling of perspective is to darken the layers that sit behind the top layer
way to heighten the 3D illusion is
todarken all the duplicated layers,
apart from the top one. Select the
layer thats second from top and go
to Effect > Color Correction > Hue &
Saturation or right-click on it and
select the same options.
In the Hue & Saturation
18 effects panel drop the
Master Lightness value down to
something like -35. Select the Hue
& Saturation effect under Effects
on the applied layer, copy it via Edit
> Copy or cmd/ctrl+C , select all of
the other bottom layers and paste
the same effect. Now all the layers,
other than the top one, will havea
slightly dark tint.
The final effect for simulating
19 depth is to create a shadow
thats being cast by the 3D images
onto the composition background.
After Effects has a lighting system,
but I find that to be overly complex
for an effect like this. Instead, make
a duplicate of the bottom Grid layer
and adjust its Master Lightness
under Hue & Saturation to -100.
Now lets blur this layer by adding
aGaussian Blur effect. Set its
Blurriness property to something
like 40. Under the Transform
properties of this layer, set Opacity
to 70 per cent and increase its Z
position (the third value under
Position ) so that it sits lower down
than the image grid above. Lastly,
name this layer Shadow.
Now you have a grid of 3D
20 images which you can easily
update via Photoshop. Its simple
toreposition the grids perspective
with the Camera in After Effects,
and change the depth by making
quick duplicates.
If you want some final polish,
21 turn on Depth of Field on the
Camera. Expand the Camera layers
options and turn on Depth of Field
under Camera Settings . Getting
this looking just right requires
lotsof trial-and-error. Itypically
experiment by adjusting the Focus
Distance , Aperture and Blur Level
values these can each be higher
than 100% . You can also change up
After Effects
expert tip
a different
viewpoint
After Effects gives you lots
of control over how you
view your composition.
You can create up to four
simultaneous views and
specify the POV for each
(Active Camera, Front,
Top and so on). This can
be helpful when making
sense of your 3D scene.
Plus, you can set the zoom
level of your scene and
adjust the resolution down
from Full if you notice
adrop in performance.
the Iris Shape , which may or may those are set, click Render at the
not have an impact on the softness top-right of the Render Queue
of the blur. window and youll have a shiny new
image file.
The final thing you need
22 todois export an image of I typically render out my
yoursexy perspective shot. Go to
23 images as JPGs set to the
Composition > Save Frame As > highest quality. If you render to a
File... and youll get After Effects format that supports an alpha
Render Queue . All you need to do is channel (PNG, PSD, for example)
specify the Output Module , which then the background colour of your
is the file type (JPG, PSD, PNG and composition wont be included
so on) and Output To location. Once inthe rendered file.
Step 21 Turning on the Depth of Field option can help add polish to your composition
november 2014 93
PROJECTS Git
A b o u t t he a u t h o r
T obias
Gn t her
w: git-tower.com
t: @gntr
job: CEO, Tower
GitClient
areas of expertise:
Version control with Git
q: what was your
childhood nickname?
a: Tobidobi and it still
accompanies me today
Video
This is a step-by-step
course for learning
version control and Git,
tailored to beginners.
It includes a free online
book, videos and an
ebook: learn-git.com
94 november 2014
Git
streamline your git
workflow with Tower
Tobias Gnther explains how to boost your Git productivity
byusing Tower to simplify tedious, time-consuming tasks
Git has been a synonym for modern version
control for a couple of years now. The challenge
today is to find ways to use it professionally and
productively. Tower (git-tower.com), a desktop
application for Mac, makes Git a bit more
straightforward by helping people work more easily
and efficiently with the Git version control system.
Crafting meaningful commits
Merely saving a new revision of your project wont
necessarily help move things forward especially
if, when people come to look at your revision, its
difficult to see what has changed. Version control
makes sense only when your commits make sense.
This requires a commit to be granular: to only
contain changes from a single topic.
Making granular commits ensures two things:
1 Changes can be understood more easily. If you
mix different topics in the same commit, your
co-workers (and you) will have a hard time figuring
out what each piece of code really does
2 Changes can be undone. Big, bloated commits
withmany different topics are hard to revert,
because you will not only undo error-infected code,
but also any other topics that have been crammed
into that same commit
With its staging area concept, Git makes it easy
to only include certain files in your next commit.
Taking this one level deeper working only with
Exclusive offer!
20% off Tower
Visit git-tower.com and use
the code NETMAG20 to
receive 20% off Tower. Valid
from 2 October until
4 November 2014
individual parts or even lines of changes means
your commits fit really perfectly. This is tedious
to doon the command line, which is where
Tower comes in. It makes the process much more
straightforward by simply selecting the parts and
lines of code you want to include in the next commit.
Dealing with problems
I dont know about you, but I find myself making
mistakes. Regularly. All the time, actually. No matter
how much experience I have, mistakes remain a
constant. I cant avoid them, but I can make sure
thatIm able to quickly undo things.
Making it easy to recover from mistakes is one of
the core jobs of a version control system. The good
news is, Git allows you to undo almost anything. The
bad news is, the necessary commands are spread all
over the system, sometimes requiring quite complex
sets of parameters.
Of course, this is where a GUI application shines:
rolling back to an older version of your project
just like reverting a historic commit is as easy as
right-clicking the commit in question. Your last
commit can be amended by holding the alt key in
the commit interface. Its even possible to discard
unwanted local changes on just a single line of code.
Solving merge conflicts
Merge conflicts are nothing to be afraid of. They
occur when a file is modified in contradictory ways.
In this situation, a user must decide which version is

correct (Git cant do this automatically), or even edit
the final version until its correct.
As easy as this sounds, the situation can be quite
abstract. Thats why the latest version of Tower,
Tower 2, has introduced a new conflict wizard that
helps to visualise the situation. Users can clearly
see which versions of the file have clashed, how
they looked, who made the changes and in which
commits. They can then decide easily how the
solution should look, simply by clicking the files
theywant in the final resolution.
Staying up to date
In most cases, your local repository will be connected
with one (or multiple) remote repositories that are
used to exchange data. The commit data that you
caninspect in these remote repositories, however,
isonly as up-to-date as your last sync. There is
no live connection you have to download new
changes from the remote repositories to be able
toinspect them.
To avoid having to do this manually, Tower 2
performs a fetch operation in the background
Tower helps people
work more easily and
efficiently with the Git
version control system
atregular intervals. This makes sure youre always
up-to-date with whats happening on the remote
server, without having to remember to sync things
up yourself.
Keeping your working copy clean
In many situations, it is advisable or sometimes
even required to have a clean working copy (i.e
no uncommitted local changes) expecially when
pulling or rebasing, switching branches, or cherry-
picking commits.
With its stash feature, Git already provides
the necessary tools to make this possible. On
thecommand line, you simply need to call the
git stash command to put your current local changes
ona clipboard. The hard part is simply to remember
to do this. In version 2, Tower automatically offers
to do this for you, in situations where stashing
yourlocal changes would be a good idea to help
youavoid conflicts.
Its visualisation of stashes also helps make things
very intuitive: each stash can be inspected as easily
as a commit, including the exact changes it contains.
Git
Conflict wizard Towers
You can restore any of your stash items, either Conflict Wizard helps
usersunderstand and
completely or in parts. solvemerge conflicts in
avisual way
Managing hosting services
You would think that cloning a repository wouldnt
be a big deal. Thats true if you have all information
readily available. A host of different authentication
options can make this seemingly simple task quite
tedious: managing SSH keys, creating passcodes and
generating access tokens is both time-consuming
and error-prone.
Thats why Tower now integrates with popular
code-hosting services like GitHub (github.com),
Bitbucket (bitbucket.org) and Beanstalk (beanstalkapp.
com). After connecting your accounts just once in the
app, you no longer need to juggle with usernames,
passwords, tokens and URLs any more.
Cloning a repository from one of your accounts
isthen simply a matter of a single click. You can
create new repositories directly in your hosting
account right from within the app. And, last but
notleast, you can even manage SSH keys connected
with your account.
Becoming productive
In the end, its not about the command line versus
a GUI client, because both approaches are valid and
can be used side-by-side. Some things are indeed
easy to do on the command line: like completing
a commit, initiating a merge and creating a stash.
Other things, however inspecting commit
history, creating branches via drag and drop, and
solving conflicts in a visual way are far easier in
aspecialised GUI application.
In the end, the question is how to be productive.
How to get access to the professional features. In
aneasy way.
november 2014 95
PROJECTS Head to head
React vs Ember.js
A b o u t t he a u t h o r
Alex Matchneer takes a look at the differences between
Alex Reactand Ember.js, and considers which to use and when
Matchneer
w: machty.com
t: @machty
job: Lead engineer,
Express Checkout;
Core team member,
Ember.js
areas of expertise:
Client-side JS
applications
q: what was your
childhood nickname?
a: Little Man
Fact file
Data-binding
Ember features one-
and two-way data-
binding via Key-Value
Observation (KVO).
React doesnt use KVO,
but instead re-renders
using a unidirectional
data flow originating
from calls to setState .
Contributors
React was built and is
actively maintained by
Facebook. It was open-
sourced in mid-2013.
Ember was forked
from SproutCore in
2011 and is maintained
entirely by the Ember
community.
96 november 2014
HEAD TO HEAD
React
An open source, Facebook-sponsored JavaScript
library for building user interfaces. It ditches traditional
data binding in favour of a unidirectional, re-render
everything approach that is component-centric.
Scope
Reacts homepage describes it as a JavaScript library
for building user interfaces (netm.ag/react-260). React
provides a simple yet performant API for client-side
rendering, and can be used as the rendering engine for
other JavaScript libraries (including Ember).
Managing State
React implements a unidirectional data flow, so
whenever a components setState method is called,
that component (and any of its children) will re-render.
Data flows downwards, events (clicks, form submits)
flow upwards and ultimately translate into a setState .
Scalability
React is arguably the most performant and flexible
rendering library around, even when rendering large
lists. That said, it doesnt intend to provide any sort of
application structure, and must be used in conjunction
with other libraries or architectures (such as Flux,
react-router) for any medium- or large-scale apps.
Secret Weapon
Every time setState is called, React generates a new
virtual DOM with the latest data and efficiently diffs
itagainst the previous version, generating a minimal
list of changes that need to be made to the real DOM
to bring it in sync.
verdict
Keeping in mind that React is a UI library and Ember is an application framework, you should
give both React and Ember a try. If youre building something large, lean towards Ember. If
youre building something smaller but performance-sensitive, opt for React.
ember.js
An open source, heavyweight framework for building
client-side web applications. It provides universal data
binding and a URL-driven approach to structuring
applications with a focus on scalability.
Ember.js homepage describes it as a framework for
creating ambitious web applications (emberjs.com).
Client-side rendering is one of the features Ember
provides, but it also intends to provide structure to
scalable web applications beyond just the view layer.
Embers object model facilitates Key-Value
Observation, which allows Ember to re-render
changes to specific properties. Two-way binding is
supported, but for the most part, Ember encourages
unidirectional data flow.
Embers patterns for structuring applications are
baked into the framework in a convention-over-
configuration manner and have seen great success in
the ecosystem of large JavaScript applications. That
said, Embers view layer is less performant when
rendering large lists, particularly relative to React.
Embers recent secret weapon is ember-cli ,
theofficial command line interface for building
andmanaging Ember applications. ember-cli makesit
incredibly simple to generate and import Ember
addons into your projects.
WordPress
THE COMPLETE GUIDE
148
pages of
web-building
advice

Make your own website today its easy!

Personal blogs E-commerce sites Design tips

Available at all good newsagents or visit

www.myfavouritemagazines.co.uk/computer
PROJECTS Mobile
A b o u t t he a u t h o r
Ja mes Mil l er
w: james-miller.co.uk
t: @jimhunty
job: Technical lead,
AnalogFolk
areas of expertise:
Frontend development
q: what was your
childhood nickname?
Hunty it was my
fantasy wrestlers
name on my first ever
web project
video
James Miller has put
together an exclusive
screencast to go
alongside this tutorial.
To watch along, visit
netm.ag/ionicvid-260
98 november 2014
Mobile
Build hybrid Mobile
Apps with IOnic
The Ionic framework enables web developers to create mobile apps
inarapid development environment. James Miller explains how
I like frontend development. Its simple and
quick. In comparison, creating apps for mobile
platforms can be long andlaborious. Thankfully,
programmers have brought the world of native apps
to web developers through HTML5 hybrid app
frameworks. These use the devices webview to
display the app, so we can use frontend technologies
like HTML, CSS and JavaScript to build apps that give
the same experience. Using a framework means one
set of code can be deployed onto multiple platforms,
reaching a wide audience with minimum effort.
Ionic (ionicframework.com) is a rapid development
framework for hybrid mobile apps. It is made up of
three different technologies:
l Cordova (cordova.apache.org) forms the core of the
application framework, allowing access to native
Download
the files here!
Download the GitHub
repositoryfor this tutorial
atnetm.ag/ionicgit-260
phone functionality through the use of JavaScript.
Cordova is the open source version of PhoneGap,
an HTML5 hybrid app framework
l AngularJS (angularjs.org) is Googles JavaScript
MVW framework, supplying the business logic part
of the app. Angular provides a way to structure
JavaScript to make use of modular patterns and
correct separation of concerns
l Ionics UI framework is a set of tools that help
youbuild aesthetically pleasing, native user
interfaces. Similar to Bootstrap, it can be used to
write HTML in its prescriptive manner, instantly
delivering afunctional interface
I have put together a networking app for nets
Generate conference (netm.ag/ionicgit-260) to go
alongside this guide. There is significantly more

detail in the app than the guide touches on, so have
arummage if youre interested in exploring further.
First, follow the installation instructions at netm.
ag/gettingstarted-260. Once completed, you will
have installed Ionic, Cordova, and will be set up for
development on Android (and iOS if youre on a Mac).
Command Line Interface
For frontend developers the command line can
sometimes be a scary place, but with the emergence
of technologies like npm, Grunt and Gulp, weve
really got to grips with it. The Ionic command line
interface (CLI) is built on top of Cordovas; a natural
extension that uses the same intuitive commands,
aswell as a few extras.
To get started, open up the terminal and cd to
thefolder that you wish to build the app. Type in the
lines below, pressing enter after each:
$ ionic start Generate sidebar
$ cd Generate
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
HTML5 hybrid app
frameworks bring the
world of native apps
to web developers
So what do those lines of code do? The first creates
an Ionic build from a sidebar menu template,
including Cordova, AngularJS and the UI framework.
The next moves us into the newly created folder,
where the third adds iOS as a platform (alternatively
you could use Android, by replacing the references
to ios with android ). The fourth line runs the build,
which moves the top level of files to the platform
level. The final line runs the iOS simulator, which
should show everything correctly installed.
Creating the project also creates a demo
application, so you can play around with Ionics
features straight away.
The Interface
When building an app in Ionic, you must only work
within the top-level www folder. The files within
this folder are used to build the application.
In /templates you will find HTML files with
snippets of code that are injected into the
application. The aim here is reusability, giving
amore modular approach to development. In the
Mobile
Resources
angular 101
You will find Angulars steep learning curve a lot easier
toscale if you have a good grip of the terminology used.
Two-way data binding is described as Angulars killer feature for
areason. It allows the data structure to be combined with elements
on the page. If you change a field in a form bound to another
element for example a heading as you type, the changes would
appear instantly in the heading. This forms part of the scope.
Scopes are JavaScript objects that allow the division of an
application through inheritance. Each object will have its own scope
made up of its own set of variables and functions, however it can
also inherit these from its parents. Scopes allow for concerns to be
better laid out and provide a more focused approach.
Directives create custom HTML elements and define their
interactivity. This mixes templating and JavaScript functionality
to create reusable components. Out of the box, Angular offers
anumber of ready-to-use directives.
Views are used to display the user interface. They consist of HTML,
CSS, templating and directives.
Services organise and share data. Use services to connect to an
external server and to manage the data layer of the application.
Controllers manage the user interactions that bind your view
andservice.
Modules collect and organise components (scopes, directives,
views, services and controllers, plus others) allowing you to
abstract areas of the application.
Learning resources
lO
 fficial Angular JS tutorial (docs.angularjs.org/tutorial/step_00)
Start here for the fundamentals, including correct unit testing
through Karma
lE
 gghead.io (egghead.io)
John Lindquist has a tremendous set of video tutorials featuring
all aspects of AngularJS
lA
 ngular best practices (netm.ag/best-260)
Joe Eames videos on PluralSight offer excellent explanation on
structure and the best practice ways to use this framework
november 2014 99
PROJECTS Mobile
Focus on
Mobile emulation
with Chrome
When building apps with Ionic, the default method of testing
is to emulate the device by using the command line interface.
Waiting for Ionic to compile, build and install the app on the
emulator can be a slow and painful process. Fortunately Chrome
offers an alternative.
Chrome developer tools include the ability to emulate a mobile
device (netm.ag/emulation-260). As Chrome uses the same browser
engine (Webkit) as the webview in Ionic, there should be like-for-
like emulation. To enable mobile emulation, navigate to your project
in Chrome. Right-click and select Inspect Element to bring up the
developer tools. Next choose the blue symbol at the top right of
the Inspect Element window it looks like a > symbol with three
horizontal lines. This will display a secondary menu at the bottom
of the screen, where you should choose the Emulation tab.
Choose your desired device from the dropdown and press
Emulate. You may need to refresh the page to start the emulator.
Features:
lS
 creen Viewport resolution adjusts the window view, setting
the boundaries to the device chosen. You can also change the
orientation, emulating both landscape and portrait
lS
 ensors Touch Events replaces mouse clicks with emulated
touch allowing you to test the performance of gestures
lU
 ser Agent Spoofing tells Chrome you are coming from a mobile
device, rather than the desktop that you are developing with
The obvious downfall to this approach of emulation is that you
cant use the native plugins (camera, contacts and so on) available
within Ionic as there is no physical device. Likewise Chrome will be
more powerful than the devices webview, so performance when
emulating can be misleading. For functionality and styling however,
Chrome is extremely helpful at speeding up development of HTML5
hybrid apps.
Emulation The device emulation is fairly hidden this is where you will find it
100 november 2014
sample app, I renamed the templates and their
assigned JavaScript functionality to maintain
aworking application throughout development.
To display a list of contacts on the network.html
template, a few Angular directives were used.
<ion-list>
<ion-item class="item-avatar" ng-repeat="person in network
| orderBy:'name' | filter:search " href="#/app/person/{{person.
id}}"> ...</ion-item>
</ion-list>
The code uses the elements created by Ionics
custom directives. This provides all the styling
andfunctionality needed to make things look
greatwithout much effort.
<ion-list> creates a placeholder for the list,
and using ng-repeat creates a loop on <ion-item> .
Identical to a foreach loop, this lists each contact
thatexists in the network array (obtained from a
service) and displays their data.
When something is
typed in the search box,
this code will remove
items that dont match
On the directive ng-repeat , a filter:search is
specified. The filter points to a text input box
that sits above the list and acts as a search. When
something is typed in the search box, this simple
piece of code will remove items from the list
that dont match. Before Angular this kind of
functionality required much more code, but now
issignificantly easier to implement.
The file js/app.js initialises the app, setting up
the top-level functions for the application. URLs
decide which template (page) is injected in to the
Plugreg An excellent resource, linking browsing plugins to their sources

application and how it will be controlled. Below is the
example applications person page in the router.
.state('app.person', {
url: "/person/:personId",
views: {
'menuContent' :{
templateUrl: "templates/person.html",
controller: 'PersonCtrl'
}}})
The purpose of the page is to display the contacts
data in a form. At the end of the url line :personId
is defined. This is a namespace for a variable
(number or string) that can be parsed through to the
Controller. Once received by the Controller (see next
section), it can talk to the data store and obtain the
data relating to that contacts details.
The pages templateUrl links to the template file
person.html , which contains all of the HTML required
to display the page. Finally, we define the Controller
that will manage the interactions for the page.
Controllers
Controllers ( js/controllers.js ) manage user interactions
as well as the discussion between data store and user
interface. Within a Controller you can manage what
dependencies are injected, ensuring each area of the
app gets exactly what it needs.
.controller('NetworkCtrl', function($scope, $location,
PeopleService){
$scope.network = PeopleService.list();
... })
Here the Controller manages the network page. Note
the PeopleService dependency, which is our gateway
to the data storage. A variable called network is set
to access the PeopleService to get a list of contacts to
display. This is how the data goes from end to end.
Services and Storage
There are different ways to write services (Providers,
Factories, Service and so on) but the differences are
negligible at this level. For a small app, a standard
service will do the job, as with PeopleService .
Within this service is the list function:
this.list = function(){
var people = JSON.parse(localStorage.getItem('people'));
return people; }
We are using localStorage as a permanent data
store. The list function retrieves the JSON object
from localStorage and returns it for use within the
Mobile
Helpful info Ionics
controller. localStorage is perfect here, as it creates website is a constantly
growing resource of
a simple, device-independent store. If your project information for each of
gets bigger, consider Cordovas storage plugin. thetechnologies it uses
Extension through Plugins
With Cordova at its core, Ionic has the option to
use Cordovas official and community plugins. The
Cordova community has created plugins to cover
almost all native functionality, accessible through
JavaScript. The most complete source of plugins
available is PlugReg (plugreg.com).
Plugins are installed using the CLI. The example
app uses the official notifications plugin. To install
the notifications plugin, type:
$ cordova plugin add org.apache.cordova.dialogs
This can be seen in action when a user wants to
delete a contact. This makes it easy to display a
native confirmation pop-up, instead of a typical
JavaScript one.
navigator.notification.confirm(
'Are you sure?', // popup message
$scope.removeContact, // callback function
'Delete Contact', // box title
['Delete','Cancel'] // button labels
); RESOURCE
ionic creator
If you install plugins, remember to build before you The Ionic team are
putting together
emulate to make sure the plugin files are distributed
a drag-and-drop
into the correct platform-specific folders. interface, called Ionic
Creator to help non-
Conclusion developers create
Ionic apps. Looks a
Beyond these basics, you can extend the Sass file to very exciting project to
give your app a more customised look and feel, add follow. ionicframework.
com/creator
more JavaScript components, and even deploy the
finished product on the app stores.
november 2014 101
 issue 188
on sale
now!

exclusive
pixar
tutorial
Learn to render
realistic skin using
Pixars RenderMan

digital and Print editions out now!

Newsstand for iOS: www.bit.ly/3dworld-app
Print: www.myfavouritemagazines.co.uk/design

Web APIs
Vibration
API Uses
Ruth John takes a look at the latest in
along list of mobile-influenced Web APIs
Over the past couple of years, weve seen a
massive influx of Web APIs influenced by mobile
devices. Theres no mystery here: if web tech wants
tokeep up to date, its going to need similar access to
device features that you get with native technologies.
Enter the Vibration API.
Current support
The current W3C specification went into Candidate
Recommendation status on 9 September. It is already
supported in Gecko and the latest versions of Android
and Blackberry browsers, and recently landed in
Chrome and Opera. However, there is still no support
for mobile or desktop versions of IE or Safari.
Its a good idea to test for support within your code:
if ( vibrate in navigator ) {
// vibration is supported
} else {
Web standards
// vibration isnt supported
}
Using it is as simple as calling the navigator.vibrate
method and passing in aparameter for time.
// vibrate for 100ms
navigator.vibrate(100);
This bit of code would set vibration on for 100
milliseconds. If you wanted a more explicit pattern,
you can pass in an array of millisecond values that
repeatedly turn the vibration on then off.
// vibrate on, off, on
navigator.vibrate([100, 200, 400]);
The above would cause the device to vibrate for 100
milliseconds, then pause for 200 milliseconds, and
then vibrate again for a further 400 milliseconds.
You can also stop vibration prematurely by passing
in an empty array, or simply a zero.
// stop vibration
navigator.vibrate([]);
navigator.vibrate(0);
Uses
Some uses of the Vibration API come to mind
immediately. The most popular choice is user
feedback letting users know that, yes, that button
has been pressed or that input theyve filled in isnt
in the correct format. Gaming also provides a big
pull, not just in terms of user feedback, but also for
collapsing boulders and shooting spaceships.
The usefulness doesnt stop there. Jos Dirksen uses
it alongside Web Sockets to send Morse code signals
(netm.ag/morse-260), and Terence Eden has had some
funfaking incoming calls (netm.ag/calls-260). Ilike
the idea of bringing music into the equation, asa way
of picking up on playing music (see my demo here:
netm.ag/dance-260), but also generating it, as with
The Lab at O2s haptic library (netm.ag/haptic-260).
The wonderful Christian Heilmann has even coded
a fun polyfill for laptop and desktop users. All you
need to do is include his code (netm.ag/buzz-260)
in your build and it adds a shake to your page every
time the Vibration API is called. Clever stuff.
Hopefully this API will start to become more
widespread soon. Its great to explore functionality
like this and as you can see, pretty fun too.
Ruth (@Rumyra) wireframes, designs and codes. You can often find
PROFILE
her chatting about web development, building apps and how an extra
div is not the answer to your styling problems
november 2014 103
PROJECTS JavaScript Download
the files here!
Find the GitHub repo
forthistutorial at:
netm.ag/phasergit-260

A b o u t t he a u t h o r
An t on Mil l s
w: holler.com.au
t: @antonmills
job: Technical
director,Holler
areas of expertise:
JavaScript, creative
technology, game
development
q: what was your
childhood nickname?
a: Otter, because one
kid said I had a face like
an otter when I was in
primary school. Kids can
be so mean (sniff, sniff)

javascript

Develop a browser
game with phaser
Follow Anton Mills as he guides you through the fundamentals
of browser-based game development with the Phaser framework

Now is a hugely exciting time for developers
creating games for internet browsers, and
overthe past 12 months Phaser (phaser.io) has gone
from strength to strength. This game framework
provides a friendly and intuitive ecosystem for game
development and also leverages the excellent Pixi.js
(netm.ag/pixi-260) for outstanding Canvas and
Game WebGL-rendering performance.
The Wizard is a retro
styled rogue-like game Getting started
mimicking the golden Youll need Yeoman (yeoman.io) set up on your
16-bit era, made machine, so if you dont have it (and why the heck
with Phaser. This fun
game is out now, and not?) follow the instructions on its website. With
you can find it here: Yeoman up an running, start by installing a Yeoman
netm.ag/wizard-260 project template for game development this will
save a lot of repetition when creating games.
To install the Yeoman project template generator,
open a new terminal window and type the following
(remember to prefix with sudo if youre on Mac):
npm install g yo generator-phaser-official
The first thing we need to do is to create and compile
a project to test everything. Create a new folder for
your game and cd to it in your current terminal
directory, then type:
yo phaser-official
Yeoman will ask you for the answers to few questions
while creating the template: the game name (weve
used netmag-phaser), the version of Phaser you

104 november 2014

 JavaScript

want to use (2.0.0), and your games width (900) and

height (480). When Yeoman has finished creating the
project, check everything has been set up correctly
by running grunt from the command line.
Your browser will open and the default game this
project contains will start running. Have a play!
Structure and states
Looking into the projects structure, there are a few
key folders we will be working with, including:
l  /assets the folder containing the image assets
l  /game the games JavaScript files
l  /game/state the games states
l  /dist the compiled game for hosting online
You will spend the majority of your time inside
the game and states directories; these are the
core project files. Each game is made up of several
states you can think of these as different stages
of a game. In our game we will use just four states:
Focus on
12 games, 12 weeks
Thomas Palef is an engineer based in Paris. He had very
little experience of game development but had always loved
games, so after an initial week of research he decided to use the
Phaser framework to jump in and learn how to develop games for
himself. He set himself a challenge: develop 12 games in 12 weeks
using Phaser. You can check out some of the games he made during
this challenge on his website (lessmilk.com/12games.php).
Keeping the graphics minimal allowed Palef to focus on the
game development and game logic itself, and not let the aesthetics
take up his time. I think youll agree that this lends his games a
stylised, retro charm which only boosts their brilliance.
Take a look through his games and use them as inspiration for
your own creations. Ask questions like: what ideas can you borrow?
How can you make it unique? What can you change? Theres a
whole world of game development at your fingertips and browser-
based games are extremely accessible, as youll see by browsing

Phaser provides a through Palefs gallery of games.

The Phaser framework is built on top of Pixi.js, a dedicated

friendly and intuitive rendering system for browsers. The frameworks are a fantastic
match, coming together to help users create great games, quickly.
ecosystem for game Read nets interview with Thomas Palef at netm.ag/side-260.

development
Preload, Menu, Play and Gameover. You can see these
JavaScript files in the game/states folder.
Each state is made up of a common layout. If you
look at the template states you will notice the most
common methods are Preload, Create and Update:

l Preload offers a place to situate an asset or data

preloading before the state is created
l Create is where we instantiate objects, place
graphics and set the state so it is ready to play Save the rabbits Explore Thomas Palefs creative and unusual game style
l Update can be thought of as the states main
tick. This method is invoked at 60 times a second
and contains the core of our games logic

Now is a good time to download or clone the

contents of this tutorials GitHub repository (netm.ag/
phasergit-260). Inside, there are a number of folders
for different stages in the game, including one
entitled Assets , which contains the imagery for this
game. Start bycopying the entire contents of this
folder to the /assets folder inyour game.

Identifiers
Jumping into the Preload.js state lets you set each of Pixi.js Find stunning examples of the work Pixi.js can do on its website
the copied assets to preload before our game starts.

november 2014 105

PROJECTS JavaScript
in-depth
Getting started
With Phaser being an extremely popular framework for game
development, theres no shortage of learning materials out
there. Your first stop for anything Phaser-related should be the
excellent Phaser website (phaser.io), which boasts a huge range
of examples, hosted with sample code, to walk you through each
piece of Phasers functionality. You can find the examples at phaser.
io/examples. Of particular note is the Activity Feed at the bottom.
This is a curated list of all things Phaser very handy!
PhotonStorm (aka Rich Davey, the creator and lead developer
of the Phaser framework) hosts a tutorial on creating your own
Phaser-based platform game. This has been updated to the Phaser
2.0.0 release we use in this article and is another great learning
resource. I would highly recommend jumping into this tutorial to
cover some of the basics for platform-based movement with the
frameworks in-built physics system. You can find the tutorial
online at netm.ag/firstgame-260.
Last but not least there is a Phaser ebook written by none
other than Thomas Palef, of 12 weeks, 12 games challenge fame,
and its fantastic! Check out the books accompanying web page
at discoverphaser.com for a little more information. It features
some great examples of games that you will build throughout the
chapters, its up to date with the Phaser 2.0.0 release and will
extend a lot of the functionalities covered in this article.
106 november 2014
Add the following to the preload.js preload() method:
this.load.image(menu, assets/menu.jpg);
this.load.image(background, assets/background.jpg);
this.load.image(player, assets/player.png);
this.load.image(creature_1, assets/creature_1.png);
this.load.image(creature_2, assets/creature_2.png);
this.load.image(creature_3, assets/creature_3.png);
this.load.image(gameover, assets/gameover.jpg);
The load.image method takes two parameters.
The first is a string-based identifier we will use to
reference the image if we need to create instances
ofit once its loaded, and the second parameter is
thepath to the image.
Next up is the games main menu scene. Open up
the Menu.js state, remove the entire contents of the
create() method and replace it with the following:
this.title = this.game.add.sprite(0, 0, menu);
Remember those identifiers we gave our assets at
Preload? We simply have to use game.add.sprite() , give
it a horizontal and vertical position of 0 and then use
the menu identifier we specified in the Preload state
for the main menu image.
Test your progress by running Grunt from terminal
to see the results load up in the browser. Your game
should boot up to a new menu with graphics.
Mechanics
In this section we will look at the game mechanics,
but to save lots of typing Ive created the basic
gameclass. Simply copy the Play.js from the folder
entitled 3-Play in the accompanying source code and
overwrite your current Play.js in /game/states .
Inspecting the code, there are a few key lines
ofthe framework to point out. Lines 10, 13 and 14
create a rectangle that is used as a boundary to keep
objects within it. These lines also enable Phasers
built-in Arcade physics system.
Lines 17 to 21 create our player. We load the image
the same way as before, but this time on line 20 we
Main state Here is the games main state. The aim is to squash as many
creatures as possible

set the anchor. This essentially means the objects
x and y position can be offset so we position the
player by its centre point (horizontally) and not its
top left point.
We add the player to the physics system by using
game.physics.arcade.enable() and setting the players
body to collide with the boundary. At this stage the
player will react to gravity, and collide with the floor.
Lines 24 to 32 create an array of enemies using
the same method as above. There are a few extra
properties we create on each enemy that are used in
their jumping functionality. This sets an intensity
for their jump height and a delay between each jump.
The logic for jumping is in the Statesupdate() method.
These lines create a
boundary rectangle
and enable Phasers
Arcade physics system
Lines 39 through to 54 create the variables for
score and time. They also use another of Phasers
functionality for rendering text. Using game.add.
text() you can create a string of text on-screen
while specifying fonts, fills and alignment. Phaser
has great text-based functionality were only
scratching the surface in this tutorial.
Update method
Now we can move on to the update() method, which
is where the main games logic resides. Lines 59 and
60 create shortcuts to the frameworks input system.
The cursors variable allows us to check if keys are
down, using cursors.right.isDown() , for example.
We use this in lines 66 to 73 by listening to which
keys are down, and if the player is not colliding with
the boundary object we previously looked at. We can
do this by using player.body.onFloor() . If this returns
false then the player is in the air, and we give the
JavaScript
Left At this point, our
games Menu state
player a velocity change using player.body.velocity.x . features new graphics and
We dont have to use actual x-y values, we just give only a few lines of code
avelocity to x-y and leave Phasers physics system Right The final game state
to handle the rest. Our player can now move around is the Gameover state.
We have switched out the
while jumping. graphics and added a score
At line 83 there is an example of how we update
aPhaser text field. We simply use setText() and
the text content we want to render. It will use the
existing text style properties we instantiated it with.
An example of how to test for collisions between
two sprites (not a physics-based collision) is to use
the Phaser.Rectangle.intersects method() , as per line 113.
Wepass it two sprites.bounds() and it will return a true
or false , based on if they are colliding or not. If the
collision returns false , it hides the enemy until the
enemy timer creates a new one.
Game over
The rest is mostly just standard JavaScript, but there
is one final part of Phaser to highlight the game.
state.start() method on line 129. Once this is invoked
it ends the current state and moves to any state we
specify as a string in this situation, when the timer
hits 0 we jump to the Gameover state.
In the Gameover.js, clear the contents of the
create() method. Similarly to the Menu state, we will
create a background image, but this time adding a
dynamic text field to show the users score.
Enter the following in the create() method:
this.gameoverbg = this.game.add.sprite(0, 0, gameover);
this.score_text = this.game.add.text(this.game.world.centerX,
325, this.game.score, { font: 32px Arial, fill: #ffffff, align:
center});
this.score_text.anchor.setTo(0.5, 0.5);
Game
A Ghosts and Goblins
remake (woohoo!)
Now save the Gameover.js file and run Grunt again. was released using
This time you should get the full menu screen, the Phaser by Karza
Games and wow is
game and a much improved Gameover screen. it impressive! Take a
Hopefully this has given you a taster for game peek, you will love it:
development with Phaser. Its a great framework int33h.com/test/gng
thatwill help you create some fantastic games.
november 2014 107
PROJECTS Sass
A b o u t t he a u t h o r
Ian Ca rrico
w: iamcarrico.com
t: @iamcarrico
job: Webchef,
FourKitchens
areas of expertise:
Drupal, Sass, Gulp,
responsive web,
performance
q: what was your
childhood nickname?
a: Nutboy, because I
ateNutter Butters like
itwas my job
video
This article is based
on Ian Carricos talk at
Sass Conf. Watch his
original presentation at
vimeo.com/86306777
108 november 2014
sass
Take the pain out of
Sass development
Ian Carrico walks through how to set up your Sass development
environment properly, saving you from future headaches
Using CSS preprocessors has become a standard
practice across web development. They have
provided us with immense power in our frontend
development, not just with new grid systems and
colour functions, but by offering us the opportunity
tokeep our code truly DRY. The problem is, ensuring
our development environment is ready for writing
Sasscan be tricky especially to those of us who
didnot start as Ruby developers, and are treading
unfamilar ground.
Latest and greatest
Sass is constantly evolving. It is a language that is
actively being developed, offering many community-
driven tools. If you want to explore the full power
of Sass, this article is for you. I will explain step-
by-step what tools you need to make sure your Sass
development starts properly, and point you in the
direction of the right documentation to help save
youfrom future headaches.
If you are brand new to Sass and do not need
thelatest and greatest features, there are a number
of applications to help start you off. My favourite
Sass playground is Sassmeister (sassmeister.com),
developed by Jed Foster and Dale Sande. If you are
looking for an application to run locally, get your
hands on a copy of Codekit (incident57.com/codekit).
Download
the files here!
Download all the source
codeyou need for this tutorial
at netm.ag/sass-260
Remember, Codekit is awesome, but it does limit
theversions of Sass you can use.
What makes Sass hard?
In short: Ruby. The Sass compiler is built on Ruby,
and most of the community code is deployed
as RubyGems. In order to ensure we keep our
development environments in sync, we need to
make sure our versions of Ruby and RubyGems are
consistent, and documented in code. On the plus
side, the tools we need to do this have been worked
on for a long time, and are (mostly) well documented.
Im not on OS X ...
This tutorial is meant mainly for OS X, but the tools
(except Homebrew) can be used on any Linux system.
The only change is that instead of using Homebrew
commands to install the packages, you will use the
native package manager for your version of Linux.
Every piece of software included has more detailed
installation instructions for different systems within
their documentation as well.
Easy win
Before we install anything, or get into the tools
we need, there is one configuration file everybody
should use. It stops RubyGems from installing the

full documentation of each gem locally, saving time
during gems install.
Run this single line from the command line:
$ echo gem: --no-rdoc --no-ri >> ~/.gemrc
Homebrew
For Mac users, the first step of this project is to
install Homebrew (brew.sh), the unofficial package
manager for OS X. Homebrew will enable us to install
the rest of thetools we need in order to tackle some
painless Sass development.
Preprocessors have
provided us with
immense power in our
frontend development
For users that have not used Homebrew before,
open the terminal and run this line of code to install
the package manager:
$ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/
homebrew/go/install)"
Once youve installed Homebrew, you will be able
to run the command brew on the command line.
Toensure you are ready to move forward, run brew
doctor , which will check to ensure Homebrew
installation is ready to use. If there are any errors,
Homebrew also provides instructions on how to fix
the installation.
If you already have Homebrew installed,
additionally run brew update , which will make
Sass
Left The Sass language
gives us more control over
our CSS than we have ever
sure all of the package information is up to date. had before
Generally, you should run this before any new
Right Sassmeister is a
package installations. webapp that will allow you
to compile Sass samples
Managing your Ruby versions and publish them to a
GitHub gist
Ruby is constantly updated, both with major releases
and patch fixes. It is important that we know which
version of Ruby we are developing on, as there
are differences in each version. Luckily, there are
standard practices to ensure the version of Ruby
youare using is correct.
There are three main tools that allow us to
manage our Ruby version: RVM (rvm.io), rbenv
(github.com/sstephenson/rbenv) and chruby (github.
com/postmodern/chruby). I recommend using rbenv,
and this guide will go over how to install, configure
and use it.
However, if you already have RVM or chruby
installed, do not also install rbenv, as the two are
not compatible with each other. If you already
haveone of these programs installed, skip the
section below, and jump to Ruby versions.
Install rbenv
To install rbenv, run the following on OS X:
$ brew install rbenv ruby-build
$ echo eval "$(rbenv init -)"' >> ~/.bash_profile
Open up a new terminal window rbenv should now
be installed to your system. Now we need to install
the version of Ruby that we want to use globally,
which at the time of writing is 2.0.0p451.
$ rbenv install 2.0.0-p451
$ rbenv rehash
$ rbenv global 2.0.0-p451
november 2014 109
PROJECTS Sass
Homebrew This allows for
package installation on OS
X, and can be used to install
a variety of tools
110 november 2014
The first line will download and install the right
version of Ruby onto your system. The second line
rehashes rbenvs knowledge of what versions you
have installed, and should be run after installing
anyversion. The last line will set the global Ruby
version to be the version we just installed.
By default, rbenv will download and install Ruby
versions into ~/.rbenv/versions . If you ever want to
uninstall a version of Ruby, just delete the version
folder from ~/.rbenv/versions . So, the command youd
need to use to uninstall the version we just installed
would be:
$ rm -rf ~/.rbenv/versions/2.0.0-p451
Ruby versions
No matter which program you are using to manage
your Ruby versions, they can all respect the file
named .ruby-version in your projects folder. This
is aone-line file that will document the version of
Ruby we started this project with.
With rbenv, you can create this file by:
$ rbenv local 2.0.0-p451
You can also create it by running:
$ echo "2.0.0-p451" > .ruby-version
Always commit the .ruby-version file to your version
control. Then anybody else working on the project,
as long as they have RVM, rbenv or chruby installed,
will always be using the same version of Ruby.
Bundler
Sass, Compass and the many Compass extensions
are distributed using RubyGems. As each gem can
exhibit pretty big changes in-between versions,
wewant to document the versions needed in code
as well. We do this through Bundler (bundler.io),
ourfriendly Gem version manager for Ruby.
Installation is easy, just run:
$ gem install bundler
Gemfiles
The two files that Bundler uses to make sure the
versions of gems are accurate are Gemfile and Gemfile.
lock . We can create the former with the versions of
gems we want to use, the latter is made by Bundler
with the exact versions of each gem we are using.
Both must be committed to version control, so that
every developer installs and uses the exact same
Ruby gems.
Speed up your workflow
with a task runner ...
Gulp.js helps automate
common tasks
Each project can have different Gemfiles, as tools
update and change continually. As a starting point,
here is an example of a Gemfile with the most
up-to-date versions of Sass and Compass available
at the time of writing. You can specify either exact
versions, or fuzzy versions (e.g >= 1.0) within your
own Gemfile.
For more information on Gemfiles syntax, look at
Bundlers documentation at netm.ag/bundler-260.
# Pull gems from RubyGems
source 'https://rubygems.org'
# Use Sass version 3.4.2 - 3.4.9.
gem 'sass', ~> 3.4.2
# Use Compass version 1.0.1 - 1.0.9
gem 'compass', '~> 1.0.1'
# Other Compass extensions
gem 'breakpoint', '~> 2.5.0'
gem 'singularitygs', '~> 1.4.0'
gem 'toolkit', '~> 2.6.0'
Save the file above as Gemfile , then run bundle
install . Bundler will then read the Gemfile, install
 Sass

Focus on

Why is Sass so great?

Bundler This can be used to ensure everybody is using exactly the same
same versions of the gems within your project
It may seem like this tutorial is long. Since we are playing
withRuby, there are lots of dependencies and requirements.
Is all of this worth it just for the power of a CSS preprocessor?
Why not use something a little simpler, keep everything in Node.
js? Better yet, lets just use Bootstrap that gives me everything
Ineed, right?
The reason I love Sass so much is not just because of the power
it has as a CSS preprocessor, it is because of the community that
has grown around it. This has not just made Sass more powerful,
but there are so many tools that have been built in Sass that I
couldnt possibly imagine building a site without it any more.

the needed versions of each gem and install them.

Finally, it will create the Gemfile.lock which will
contain the exact versions Bundler installed.

Using Bundler
From this point forward, instead of running your
usual Compass commands, put a bundle exec in front
of Ruby commands. So, to compile or watch your Sass
files, you can use:

$ bundle exec compass compile LibSass This is a C implementation of Sass, built to make compiling Sass even
$ bundle exec compass watch easier and faster. Although it does not currently have feature parity with Sass,
there is constant development

The bundle exec will ensure you are running these The beauty of this tutorial is that it only needs to be run once,
commands through Bundler, thus always using the and your environment is pretty much set up forever. Afterwards,
you will only need to update gem and npm package versions
proper versions of each gem.
occasionally. Moreover, the Sass community has been hard at
If you need to update the gem to a newer release, work trying to simplify this process even further, primarily through
you have two options, depending on the version building LibSass (libsass.org).
you want to install. If you want to update to anewer
version that is still valid to the Gemfile, you would
run bundle update gemname . If the version you want
to use is not valid, then the Gemfile needs to be
updated, followed by bundle install .

Wrapping it in magic
For bonus points, we can speed up our workflow
with a task runner. Gulp.js (gulpjs.com) can be
used to automate common frontend tasks, from
compiling Sass to minifying images. It runs each
task concurrently, ensuring the least amount of Team spirit The Sass community is constantly making new tools, blog posts,
tutorials and podcasts
timewaiting at our command line.
Setting up Gulp.js starts with ensuring you have In short, I am proud to be apart of the #teamSass community,
Node.js installed (nodejs.org/download). Once Node.js and will continue my work to make Sass development easier for
is installed successfully, then Gulp.js can be installed everyone. I am amazed at the creativity the community has used
tocreate the tools that power the web.
globally with:

$ npm install -g gulp

november 2014 111

PROJECTS Sass
Gulp.js This helps you automate into a simple and fast workflow
Next, within your project directory, create a
package.json file and install the required npm
packages by running:
$ npm init
$ npm install --save-dev gulp compass-options gulp-
compass
Gulp uses the file gulpfile.js within your project
directory to create and manage tasks. Below is an
simple gulpfile that will compile your Sass for you,
using Compass.
To run the command, just copy the code into
your gulpfile.js, and run gulp sass . At github.com/
iamcarrico/netmag-code there is a more complex
example gulpfile with many more tasks you can run.
var gulp = require('gulp');
var compass = require('gulp-compass'),
paths = require('compass-options').dirs();
gulp.task('sass', function() {
return gulp.src(paths.sass + '/**/*.scss')
.pipe(compass({
config_file: './config.rb',
css: paths.css,
sass: paths.sass
}))
.pipe(gulp.dest(paths.css));
});
Thats it!
That wasnt so hard was it? A little bit of
environment setting-up, and now your Sass
development can focus on the Sass, not the
underlying Ruby. From here, the sky is the limit.
Check out the tools the community has been creating
to extend your Sass development even further.
112 november 2014
In-depth
Where to go next?
Sass has been made so powerful because of the community
that has been formed around it. There are innumerable tools
that have been created to make frontend development easier,
faster and more DRY.
Twitter accounts to follow
The Official Sass Twitter: @SassCSS
Hampton Catlin, creator of Sass: @hcatlin
Natalie Weizenbaum, lead developer of Sass: @nex3
Chris Eppstein, creator of Compass: @chriseppstein
According to the Sass official documentation, to use Sass you must
pay Hampton Catlin a compliment and get Natalie Weizenbaum
some candy. Technically not required, but at least paythem a follow
on Twitter.
Awesome Compass extensions
I use each of these tools personally on almost every project I do.
Breakpoint (breakpoint-sass.com)
Creating simple media queries
S
 ingularity (singularity.gs)
Grids without limits
Toolkit (github.com/Team-Sass/toolkit)
The Swiss Army Knife of responsive web design
Color Schemer (github.com/Team-Sass/color-schemer)
A robust colour toolset
Navigator (github.com/Team-Sass/navigator)
A Ruby testing framework for Sass
Where else can I find information?
There are many folks writing excellent tutorials and blog posts on
Sass every day. Check out the Sass community page (sass-lang.
com/community) for the latest in Sass writings. Also, I cannot
recommend enough Dale Sandes book Sass in the Real World,
available on GitBook (netm.ag/realworld-260).
Get involved
There are many Sass meetups across the world. Find the one that
is closest to you and meet other Sassy people in your area. Follow
the general @SassMeetup Twitter account for information of all
meetups as well. Moreover, if you get the chance, go to SassConf
(sassconf.com) or Camp Sass (campsass.com) to really dive deep
within the community.
PROJECTS Accessibility
Accessibility
Virtual assistants
Following the introduction of Cortana, Robin Christopherson explains
why the AI war is especially welcome for users with impairments
For some time now, the two leading
smartphone operating systems iOS and
Android have been vying for supremacy in the
battle to have the best and quickest intelligent
personal assistant. We all know about Siri, the perky
AI that comes on all new iDevices, who is extremely
helpful when she works and extremely frustrating
when she doesnt. Youve probably heard of Google
Now too, which is the equivalent on Android phones.
Now theres a new kid on the block: Cortana (netm.
ag/cortana-260) for Windows Phone. And shes
already holding her own against the incumbents
helped along by a series of hard-hitting Microsoft
ads that pit Cortana against Siri (netm.ag/mirror-260).
A showdown
Both Siri and Cortana are able to tell you Winston
Churchills birthday, provide turn-by-turn directions
to your nearest pizza place, and bring up pictures of
pigmy marmosets (officially the cutest monkeys in
the world). However, a painstaking perusal of the
various phone face-offs online have thrown up some
interesting results. Here, for example, is a video of a
recent tussle between Siri and Cortana, managed by
Mashable, which sums up the current key differences
between the AIs: netm.ag/mashable-260.
Mashable favours Cortana in its video showdown,
but the contestants are becoming faster and fitter all
114 november 2014
the time so who knows who the final winner will be?
Actually, I do the answer is disabled users. Whilst
these in-built AI agents are hard at work making
life easier for all smartphone users, the disabled
community is benefitting from the escalating efforts
of the tech giants more than any other.
Saving valuable time
Its to do with those valuable seconds that these AIs
save us, because for disabled users such as myself
(Im blind) what Siri can do in five seconds might
take me five minutes, or sometimes 10. In many
cases I might not be able to manage to find what Im
looking for at all because the websites Im using are
inaccessible to my screen-reading software.
A similarly slow and painful experience is had
by many who cant use a mouse. Try using your site
from the keyboard and youll soon see what I mean
itll either not work at all or itll take you entire
minutes to get where you want to go.
So for the blind, the motor-impaired, those with
learning disabilities or dyslexia, those older users
who love the KISS principle, for positively millions of
impaired smartphone users out there, this battle has
benefits far beyond the modest boost in convenience
experienced by the average user. And even the
contenders themselves have no idea just how far
thisthing will go.
Robin is a founding member of AbilityNet (abilitynet.org.uk), a globally
PROFILE
acclaimed charity specialising in web, mobile and software accessibility,
where he acts as head of digital inclusion
 Projects
Build smooth digital
UIs with Famo.us
Create a dramatic
perspective shot
Streamline your Git
workflow with Tower
Build hybrid mobile
apps with Ionic
Develop a browser
game with Phaser
Take the pain out of
Sass development
9015

A fusion of creativity
Brilliant technology. Amazing art. Its a match
that helps deliver great images and videos to
creative professionals like you.

35 million images
1.5 million videos
30,000 new files added daily

Explore our innovative new tools

at shutterstock.com/labs.
9000