Documente Academic
Documente Profesional
Documente Cultură
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 at our own Generate New York conference (netm.ag/
straightforward, its execution isnt. But marcotte-260), which complement the feature.
designing responsively doesnt have to mean more Finally, dont miss our special digital edition offer.
grey hair often its just a case of starting off on the Get a free Apple Newsstand or Google Play Store
right foot. This issue Justin Avery, who won a net version of this months mag at no extra charge.
Award for Am IResponsive? (ami.responsivedesign. OuriPad edition in particular is well worth checking
is), talked to a real whos who in RWD to find out the out, as its tablet-optimised and features additional
techniques you can need to ensure a fast, beautiful imagery and exclusive audio content which you
and future-friendly final product. wontfind elsewhere. Turn to page 43 for details.
To find out more, listen to the accompanying Enjoy the issue wherever you are!
podcasts (responsivedesign.is/feeds/podcast). Its also
worth watching Dan Malls Responsive Design is Oliver Lindberg, editor
Still Hard/Easy! talk at Beyond Tellerrand (vimeo. oliver.lindberg@futurenet.com
com/101875373) as well as Ethan Marcottes keynote @oliverlindberg
Featured authors
Justin Avery Ruth John Paul Woods Phil Coffman
Justin runs the RWD Weekly Ruth has been wireframing, Paul is a design director at Texas-based digital designer
newsletter and Responsive designing and coding for over Edenspiekermann, where he Phil is currently the head of
Design.is and on page 68 tells adecade, currently for The Lab works between digital and design at PCPartPicker. On
us how to master advanced at O2 (Telefnica). On page brand design. On page 76 page 90 heexplains how
techniques to get more out of 103 she discusses interesting hedives into digital editorial touse After Effects to create
responsive web design uses of the new Vibration API design and longform stories stunning 3D images
w: justinavery.me w: rumyrashead.com w: paulthedesigner.ie w: philcoffman.com
t: @justinavery t: @Rumyra t: @paulillustrator 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
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
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
SUBSCRIBE to net
the web community to take itself seriously UK readers turn to page 24
US readers turn to page 57
Wordpress evolution 42
Marko Heijnen looks at the 4.0 update and and save up to 50% Worldwide: netm.ag/17vH1hU
speculates on the future for WordPress
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
november 2014 7
Mail, tweets,
posts and rants
contact us @netmag /netmag +netmagazine feedback@netmagazine.com net.creativebloq.com
not saying its better than looking into web design and Youll find everybody is
theothers, but I think she development, and I have friendly and happy to help.
waswrong in some areas. found my passion. While I On the real-world side of
For example, in the article am still just starting to learn things, try and find some
she said: It can be pretty hard HTML and CSS, I am alittle local conferences and
to find a really great course overwhelmed by all the meetups to attend. Make
unless you are willing to shell different ways that I could go. aneffort to join in and you
out a lot of money. This is I read your magazine every will find itll pays dividends.
complete rubbish. If you cant month, and take everything Good luck!
find a cheap course on Udemy in. But I was hoping you could
that is good then you havent throw out a helping hand or
looked far enough. point out someone who could steroid apps
Nigel Brewster, Durham, UK give me some advice. It was a great piece on building
Styles of learning vary Kyle Narovich, Cadillac, MI smooth native apps with
greatly from person to Its great youve discovered Steroids (issue 259). How
freelance rate person. With this in mind your passion welcome to would you go about integrating
survey 2014 we didnt set out to uncover the web community! In a database search?
I enjoyed the Creative Bloq the single best learning site. many ways, the web Tunde Akinbode, Lagos, NG
post called Freelance Rates Rather we wanted to present community is the answer to Article author Alex
survey 2014: Are you on the a menu of options from your question about finding Newmansays: You can
money? Where can I find the which our readers could advice. Wed say follow usethe localStorage API,
results for the 2013 survey? choose, which is why Katie people whose work you find orlook into building an
Martin Bak, Slovakia looked at a range of fascinating on Twitter, APIto work with your data.
For the past few years, different aspects of each check out their personal Ilike MongoDB, Express
UK-based designer and service (tasks, scope for pages and ask questions. andNode.js.
developer ColeHenley has growth and so on). We
published his rates surveys. sought togive our readers
You can find previous some information and an
surveys on his personal site opinion they could use to
at netm.ag/Rates-260. inform their choice. Indeed,
in her conclusion, Katie
wisely tells people to try the
I dont agree different services andsee
Many thanks for all the great which works.
work in issue 258. I would
however like to challenge you
on Katie Kovalcins article on Where to start
The Top 10 Learning Websites. I had had no idea what I
I use Udemy, so I know how wanted to do with my life.
it works. I thought the article Ihave dabbled in a little bit
was misleading to anyone of everything, but a couple Online learning Last issue, Katie Kovalcin explored a range of online code schools,
who hasnt tried it out. Im of months ago, I started to help readers find the best site for their personal learning style
8 november 2014
Network
THE POLL
COOL Stuff
Whats the best way to We learned
november 2014 9
Practical
advice from
Send your questions to netmag@futurenet.com industry experts
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.
10 november 2014
Q&As
3 simple steps
Whats the best outreach
strategy to earn natural
links and exposure?
Pinnacle SEO, Armagh, UK
Meta data Search engines like Chinas Baidu still use meta data to work out their rankings
determine ranking, and Bing has cited constantly remind myself: if something Know your Audience
that these can be used to flag spam; so would be a pain to write in regular CSS, Getting apicture of the human
meta-keywords largely just serve as a then it is probably abad idea. Avoid behind the conversion helps you
way of signalling to competitors your excessive nesting usea naming create tailored content, which should
target keywords. Having said that, this convention such as BEM toavoid styles boost engagement. Try Google Analytics
does depend on the country you are overlapping. Be wary ofusing @extend Demographics & Interest reports (netm.
operating in, as some search engines and instead opt for modifier classes. ag/analytics-260) and Facebooks Graph
such as Chinas Baidu still use them. Formore tips, read this article by Nicolas Search (netm.ag/graphsearch-260).
Gallagher (netm.ag/gallagher-260).
PHP
Pinnacle SEO @PinnacleSEOTwit
The right foundations Sass
Do you think its important to be able to Workflow
use PHP without a framework such as What editor/preprocessor setup do you use
Laravel, before you can use it with one? for your workflow and why?
Andrew Milne, Bristol, UK James Bavington, Rugby, UK Test Your Ideas
Steve Grunwell: Id compare it to BS: Sass is my CSS preprocessor of Usability testing services, such as
learning an instrument: music theory choiceas it offers advanced features Feedback Army (feedbackarmy.com),
isnt nearly as sexy as learning some thatother tools lack. I try to avoid using will provide answers to a text-based
sweet guitar licks, but understanding them where possible, but it is useful to survey about your website or page,
why something works is just as have them there if needed. Breakup whilefivesecondtest.com gives an idea of
important as knowing how to do it. (github.com/BPScott/breakup) allows me to peoples first impressions of your designs.
Thats not to say Laravel cant be your create per-viewport style sheets without
first foray into PHP, but if you find creating lots of per-size partial files.
theres something you want to do that Iuse Grunt to watch for file changes Pinnacle SEO @PinnacleSEOTwit
Laravel doesnt have a method for, andtrigger compilation, and Sublime
checkthe PHP docs. Text 2 is my text editor.
november 2014 11
exchange Q&As
CSS/JS), reduce the size of files (especially servers on major web services such as
images) and look at lazy loading. On the Google, Facebook and Twitter, and in
theme side, if possible look at reducing most circumstances it reduces page
the number of DB queries and caching load.If you have root access to a server,
fragments. You could also consider going implementing SPDY is a fairly simple
completely static. Depending on your process. Its also supported by major
hosting you may wish to offload static vendors such as Apache and NGINX.
assets to a CDN. Finally consider an Implementing SPDY on your server is
alternative host FTP access-only is aquick and relatively simple win for
never a good sign. performance and security. Embracing Laravel This frameworks templating
system, Blade, is simple, fast and effective
SEO PHP
Pandas and Penguins embracing Laravel our scripts list, before de-registering it.
Weve had Panda for content and Penguin My app choked on PHP Smarty, so I moved However, if a theme or plugin is forcing
for links. What direction do you see search to JavaScript-based templates, with great aversion of jQuery in thehead and not
engines taking with future updates? success. How is Laravel? through registering the script with
Andrew Isidoro, Cardiff, UK Dan Nagle, Huntsville, AL WordPress, that script will remain.
KH: With OK Google and its transition SG: Laravels default templating system, Ideally you want to remove the spurious
into the Internet of Things, Googles Blade (netm.ag/blade-260), is rather call by the plugin ortheme rather than
future is heavily invested in voice search, simple, yet super-effective and holy removing the WordPress version.
connecting multiple devices without the smokes is it fast! One thing I really enjoy
user even having to pick them up. When about Blade is that while you can work SEO
it was announced, the Hummingbird with raw PHP in your views, the requisite Should I care about SSL?
update was cited as a platform, which <?php ?> tags stick out as a reminder to My site is now SSL-only since Google
suggests that Google will continue to keep your application logic out of the started factoring SSL in ranking. Most
build upon this. For SEO, this means views. As for JavaScript, while I havent sitesare still not bothered. Is it worth
ashift from traditional targeted done it myself, I have heard from thehassle?
keywords to more natural language- colleagues that Laravel works really Dan Nagle, Huntsville, AL
centric strategies. Think FAQs, location wellwith the popular JS frameworks. KH: In August this year Google
based forums and reviews. announced that sites with HTTPS would
WordPress be used as a ranking signal. However,
Wordpress jQuery calls this is a small tweak to the algorithm,
SPDY and HTTP2 WordPress can include an extra call to currently affecting only 1 per cent of
Whats your current feeling on SPDY/ jQuery on the frontend. How do you queries. I would not recommend making
HTTP2? Should sites (not necessarily prevent that? this change purely for SEO reasons, as
WordPress ones) be trying to implement it? Tim Evko, New York, US impact is likely to be minimal.
Phil Nash, London, UK TN: If you are seeing multiple versions of
TN: While HTTP2 is still in its infancy, jQuery loading, its normally because a WordPress
its based on the more mature SPDY theme or plugin is loading the additional Minification
protocol (netm.ag/SPDY-260). The latter is version rather than WordPress. You can Whats the best practice for concatenating
already being used in the production of check if WordPress has jQuery registered and minifying CSS/JS? Using
by using wp_script_is( jquery ); . To de- wp_enqueue_scripts versus Grunt?
register jQuery: Matt Walters, London, UK
TN: Its not so much about best practice
function net_remove_jquery() { but what fits your workflow. Where
if ( ! is_admin() && wp_script_is( possible, I would try to avoid leaving it to
jquery ) ) { WordPress, as we dont want to put extra
wp_deregister_script(jquery); strain on the server at page load. So if we
} can pre-minify as part of our workflow,
} before getting to WordPress, then this is
add_action(wp_enqueue_scripts, net_ going to be a more efficient way of doing
remove_jquery); things. Grunt is a good tool for this and
we can let the web server handle it with
SPDY is pronounced speedy and is a protocol thats The above code checks that we areon not tools like the PageSpeed Module (netm.ag/
been designed to speed up the web. on an admin screen and that jQuery is in speed-260).
12 novemebr 2014
T HE AWARD - WINNING
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.
november 2014 15
FEED
Side project
The practice app 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.
How Tim Evko created a three-part app to help
devssharpen their frontend skills net: How did the idea come about?
TE: One slow day at work last year, I decided that
Side project of the month Iwanted to sharpen some of my frontend skills by
building something cool on CodePen. The only
net: Lets kick off with an easy one: problem was that I didnt have much inspiration,
whoareyou and what do you do? andIcouldnt find a site that gave cool suggestions
TE: Im a frontend web developer from New York. so I made my own!
Currently, I work for an agency where I build
WordPress themes and web applications. In my net: How does the site work under the skin?
sparetime, Im usually working on a side project Howdoes it generate its ideas?
orwriting an article about web development. TE: The site is hosted on GitHub Pages, and I use a
Info
couple of different libraries for Markdown to HTML
job: Frontend
net: And your side project whats that all about? formatting, keyboard shortcuts and scrollbars. I use
webdeveloper
TE: The Practice App (tevko.github.io/practice) exists aspreadsheet to generate the ideas every week, which
company: Loewy Design
tohelp other frontend web developers get better at is then converted to a JSON file. The ideas are piped
w: timevko.com
their trade. It has three different sections. Firstly, the into the page with AJAX at the users request.
t: @tevko
random section gives out 20 random tasks for users
tobuild on CodePen, with each task organised by net: Whats the reaction been like?
difficulty level. Next, the Dribbble section uses the TE: The response has been great. Traffic has
Dribbble API to pull in arandom Dribbble shot, and increasedconsistently, thanks to mentions from
the user can choose to be redirected to CodePen where allover the web. The project has had plenty of
they can try to duplicate the shot with code. Finally, contributors on GitHub, and has generated a bit
the third section allows the user to solve a random ofpraise on Twitter aswell.
16 november 2014
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
SAVING SPACE
top tools
It is impossible pin down one tool
as the best image optimiser.
Across our Twitter followers some
Exclusively for net: the latest in a series programs did, however, receive
of anonymous accounts of nightmare clients more recommendations than
others. tinypng.com, jpegmini.com,
Clients from hell smushit.com and kraken.io all fared
well. However, the hands-down
Im a 3D designer who creates mockups Me: At my currently hourly rate, I will have to winner was ImageOptim-CLI
forliving spaces. A while ago, a decorator charge an additional 200 for the logo redesign. (netm.ag/imageoptim-260).
commissioned me to design several apartments Client: What?! Why would you do that?
forher. Six days into the project, she calls me: Me: Ill be doing more work. It takes time to
redesign a logo. Size versus quality
Client: I need you to add my company logo to Speeding up image load times
allthe pictures of the apartments. She grumbles but agrees. I recreate the logo and inevitably means throwing away
Me: Okay, no problem. Just send me the logo. design all of the apartments before uploading the information and sacrificing quality.
Client: Its on my website. pictures to her website. Despite the extra fee, she Different compression tools treat
is delighted. this trade-off between size and
After spending far too long looking through her A year or so later, she calls me up for additional quality differently. ImageOptim-
website, thebest option I can find is a 320x320px work, and makes a point of saying I wont be able CLI, made by Jamie Mason, runs
logo from the main page. to charge for the logo redesign again. batches of images through
different optimisers. Mason has
Me: Im sorry, but this picture is not big enough. Me: No, of course I wont charge for that just also run comparisons of the main
Do you have the original files that came with the send me the logo I made you last year. compression tools. Visit his GitHub
picture? From whoever designed your logo? Client: I dont have it any more. I deleted it. It was repository (above) for his findings,
Client: Oh I deleted those years ago. They were taking up space. and more about ImageOptim.
Illustration: Ben OBrien huddleformation.prosite.com
november 2014 17
FEED
from the web
1
18 november 2014
FEED
Beyond pixels
Stuff I like
Carl smi t h
Advisor, nGen Works
devianthippie.com
motorcycle building
HipChat/Slack
Yes Ive done the unthinkable,
Ive put HipChat and Slack
next to each other. But thats This month having been swept off his feet by the joy of
actually the way I use them.
Iuse HipChat at nGen Works,
motorbike riding, Ian Coyle is on a mission to build his own
and Slack at the Bureau of
Digital Affairs. Both do an beyond pixels
amazing job of keeping me
connected to my teams. I had been pushing the motorcycle in the hot journey, its fast straightaways, long curves,
hipchat.com, slack.com July sun for a mile when I heard a third person switchbacks and the feeling of the machine. Then
astutely comment: It works better if you ride it! perhaps after a mountain-top pit stop its on
Pausing to catch my breath and survey the long tothe third chapter: the ride home.
Polldaddy uphill road back to my workshop, I began to Ive since sold the XS to build another bike, but
I use this to find out how question my dedication to learning to build these Istill remember my first ride. Looking back now,
different groups of people are two-wheeled gasoline-powered machines. that motorcycle changed my life and set me on a
feeling about a topic from Carburetors are the bane of my existence these new path of creative pursuits. About five years ago
finalising an agenda to voting days. In theory, it seems easy: airflow plus gasoline, Idecided I wanted to build my own bikes, and my
on a company policy. People add a spark, equals combustion. But to be honest, first project was to reimagine my own version of
respond quicker to the survey not long ago, I didnt even know what a carburetor myfirst XS650. Its been a fun, humble, and at times
format. There is some was, let alone the difference between a regulator, frustrating pursuit. Ive not read Zen and the Art of
information I absolutely rectifier, stator and rotor. Maintenance, but Id call the phase Im currently in
couldnt capture without it. I rode my first motorcycle eight years ago, Patience, and the Art of Asking for Help.
polldaddy.com oneday after I sold my jeep to pay for it and seven Growing up, I was never very interested in
daysafter I had crashed over the handlebars at mechanics. There were many days my father
themotorcycle training class. It was a beautiful askedif I wanted to help change the oil in the car
Google Docs Yamaha XS650 Special, built by Jano Bachleda orlearn how to replace its brakes. All I wanted
One of nGens core values is (janocycles.com), a talented craftsman and now todowas play on our new Apple IIGS. But as Im
transparency and this is the goodfriend. Forthe first few summers, he taught learning how to build these bikes, I find I call him
app for that. Everyone can me how to ride the beautiful curved roads through most weekends to seek his advice. While the irony
see whats being documented the mountains of Colorado. isnt lost on me, its been one of the best parts of
and provide feedback in real There is something romantic about hitting this new creative pursuit.
time. Were experimenting theroad on a bike. Like most stories, there is a
with collaborative proposals beginning, middle and end. The first chapter is
Ian is creative director at
where clients can contribute about leaving everything behind. Even with a group,
PROFILE
Huge/KingCoyle (hugekingcoyle.
in the same manner. youre alone on the bike. Slowly you leave behind com), aPortland-based
docs.google.com your everyday distractions and preoccupations. innovation lab focused on
Themiddle chapter is the ride. Engaged only in the design,culture and craft
20 november 2014
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
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
myfavouritemagazines.co.uk
Digital editions available on iTunes, Google Play, Kindle, Nook and Zinio
net.creativebloq.com
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
dconstruct
in Paris to explore accessibility,
design and open standards.
Talks from Bruce Lawson,
Benjamin Becquet and more.
This year marks the 10th birthday of Jeremy Keiths Brighton paris-web.fr/2014
conference,and its all grown up. Sally Jenkinson reports
The web is
Event report Date: 30-31 Oct 2014
Location: cardiff, uk
Date: 5 September 2014 Warren Ellis kicked off the day by discussing To celebrate 25 years of the
Location: Brighton, UK historical cunning folk, and giving us a reminder web, 16 of the greatest digital
URL: 2014.dconstruct.org 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
This year, dConstruct celebrated its 10th from Georgina Voss, around the frictions in the include Brad Frost, Linda Liukas
birthday, and with this new milestone came network, before Clare Reddington provided some and Keren Elazari and more.
ashift in attitude and pace. dConstruct had grown light relief in the form of her Playable Cities. theweb.is
up, and it wasnt afraid to show it. Other highlights included Brian Sudas lecture
A Brighton-based technology conference with onbalance and our relationship with the network, full frontal
adifference, the established gathering is renowned and a talk from Mandy Brown (above) on how Byron Date: 7 november 2014
for showcasing atypical aspects of working with the the immortal light bulb illustrates how the network Location: brighton, uk
web. Its strength has always been the breadth of is as messy, sexist, racist and fucked up as we are. The webs brightest and best
itsexpert speakers backgrounds, brought together Finally, the excellent Cory Doctorow returned for gather in Brighton to share
through an expertly curated theme for the day anencore of his 2004 talk, closing out the day. andexplore ideas surrounding
thisyear, Living with the Network. The shift in focus and delivery appeared to topics like open source, CSS
dConstruct 2014 once again delivered an polarise feedback from attendees, with some andthe physical web.
exceptional, thought-provoking set of talks. finding the days shift in tone and delivery puzzling, 2014.full-frontal.org
Photography: Tom Morris tommorris.org
However, this was not the lighthearted conference but others praising the conference for providing
of years gone by. Where previously there were compelling talks unlike those found anywhere else. thingMonk
addicted toasters, YouTube video comments and As usual, all sessions were recorded and can be Date: 2-3 december 2014
erotic fanfiction passages, instead the day brought found at netm.ag/dConstructvids-260. Location: london, uk
history lessons, dystopia, complex stories warning Excited by the Internet of
about privacy and freedom, and a great deal of Things? Then ThingMonk is the
Sally (sallyjenkinson.co.uk)
political undertones. conference for you. Now in its
PROFILE
isafreelance technical
The powerful talk content was emphasised by consultant, speaker and author, second year, the London show is
anotable lack of slides in most sessions, coupled who helps people with their now a two-track event.
with heavilyscripted, highly polished deliveries. 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
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
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
Essay
Mobile
Death to
all devices Illustration by Ben Mounsey
Smartphones are stupid. In fact, all devices are digital experiences and touchpoints into the world
stupid. They make us dependent, they demand that around. To do this will require changing how we relate
we respond to commands, theyre expensive and they to objects and ourselves.
cut us off from the people around us. Our obsession with In todaysinterconnected era, functionality has become
them is limiting our ability to create a more seamless, concentrated into one single device. In the coming era,
less intrusive digital world. We have the opportunity to functionality will become a diffuse array of digital
create a connected future that is so much more than 10 elements forming an intra-connected, self-organising
billion mobile devices flickering like stars in the sky. network. It wont be anything like a smartphone.
Socially, the very concept of a device is too small for
The easy part the future, and will exhaust itself in the long run. Devices
Until recently, the idea of developing effective AMOLED are tools that serve a cultural function. Once we no longer
display technology which unflattens screens was have a need for them, they change.
fanciful. AMOLED combines OLED with Active Matrix, In the West, we love to fetishise objects, and we do
allowing for the display of pixel data on a flexible surface. thisthrough devoting time to our devices. In everyday
There have been several versions of AMOLED devices life we see tension between the human need to socialise
demoed since 2010. But only now, as engineers make and the desire to spend time with our devices. Right now
progress in using graphene to fashion essential parts we are swinging really hard into technology, but this
like memory chips and batteries out of the material, can wont continue if we dont see a return on our efforts.
the possibility of completely flexible, paper-thin devices Culturally, theres a fallacy when we talk about
become real. Just look at the Paddle concept phone from theconnected generation. While global smartphone
Hasselt University iMinds (netm.ag/paddle-260). These penetration will reach 60 per cent by 2019 (netm.ag/
progressions will mean we can start saying goodbye to smartphone-260), that doesnt necessarily mean those
the fragile, fussy and intrusive devices we have today. devices will link to each other in a meaningful way, or
that information will be shared freely between them.
The hard part Connection alone does not solve anything.
To get to this kind of post-device future, we need to Whats even more disconcerting is the fact that
embrace the concept of device disappearance. This is complete connection remains a very new idea. All the
the unravelling of the idea that you physically need to great world cultures share hero myths, in which heroes
hold on to something in exchange for the integration of disconnect and return with solutions. The Navajo twins
november 2014 29
VOICES Essay
left their tribe, Buddha his castle and King Arthurs but we need to think more generally like how we play
knights all marched off in different directions. Discon- music without instruments. Future devices can increase
nection is as important now as it was then. participation rather than curtail it.
Getting people connected and then challenging the
idea of disconnection making disconnection seem odd Achieve ubiquity
represents a complete shift in how weve told stories As Cory Doctorow observed, computers are all around
for thousands of years. We need to accept that people us they just have cases we dont recognise. We need
may not want or need to be connected. Goals and away to trust whats going on around us if we are going
attitudesare likely to change between generations, to embrace an explosion of computing thats even less
making the ideal of connection a moving target at best. controllable. Fortunately, hes proposed a series of solves
Finally, were starting to experience device fatigue. that help to move us in the right direction, based on the
Were hunting around like never before for micro- Trusted Platform Module (netm.ag/platform-260). Watch
applications of the handheld device, and still its leaving him discuss the idea at netm.ag/doctorow1-260.
our hand. Thats what the Internet of Things is all about.
Now that we have a taste we cant go back. Embrace evaporative data
Deji Olukotun, the Ford Foundation Freedom to Write
The futures building blocks Fellow at PEN American Center, said earlier this year
Ive tried to identify five building blocks to make the that the phone is essentially a device for collecting data
post-device future easier to imagine. As we invent it, and pushing ads.Citizens will continue to want a
30 november 2014
VoiceS Interview
32 november 2014
Info
job: Senior designer,
Vox Media
w: jasonsantamaria.com
t: @jasonsantamaria
Voices Interview
Turning to type
Santa Maria is, of course, best known as
The purpose of typography
Type has to serve two main
a typographer. It all started when I was in
purposes. It has to introduce school, he recalls, explaining how he and
and welcome a reader It his friends immersed themselves in Ray Gun
opens the door and lays out
the carpet. Once youre into
magazine, and the work of David Carson and
the article, the typography Neville Brody.
needs to disappear. When They were the designers who were
youre reading, it should be
like flowing water.It should
reallypushing typography in uncomfortable
move you along. 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.
34 november 2014
Interview
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 history plays an important role. Just like
early typefaces mark a special place in Santa buildings, typefaces can be read by somebody
Marias development. Looking back, I might with an eye for their inherent social and
not appreciate those designs aesthetically historic specificity, he explains.
but Iappreciate them for what they did: they There are many ways you can place a
opened the door for me, he explains. They typeface in time, whether its a particular
made me want to learn more about classicism type of italic or stroke, or different kinds of
and historical typographic movements. serifs whether theyre bracketed or not,
he comments. But type design is a craft of
Defining type recursion. Theres a lot of revival happening I keep up to date with news and with
How does Santa Maria define typography? because many designs were very successful, foundries that I like, he explains. That
Its the written word given visual form, and also because they can be improved work pays off when Im looking for a
hereplies. Thats the technologically. Type- typeface I know that three years ago
si mple def i n it ion, You know, more faces can also respond to therewas this Serif that was justperfect.
because it can be so much newer mediums. But, you know, more often than not I just
more. Type can bea story often than not I just gather up a bunch of typefaces thatare
in its own right.It can be gather up a bunch of looking back contenders, and play with them.
a supporting layer to a With this histor y
story, and itcan be a dis- typefaces that are inevitably come certain Font Hunting
tracting layer, too.
Despite his boundless
contenders and play connotations and links.
When you can choose a
When hunting for a font, Santa Maria also
prefers to stray off the beaten track in
enthusiasm for type, with them typeface that has some favourof smaller type foundries. Theyre
Santa Maria is at pains to sort of other symbolism mainly independents; not the bigger ones.
emphasise that its just one component in behind it, it makes your choice feel more Places like Just Another Foundry (justan-
adesigners toolbox. Design has many valid. It doesnt mean its necessarily the otherfoundry.com), Okay Type Foundry (okay-
ingredients contrast, hierarchy, colour right choice, but it feels as though youve type.com), he lists. People that are doing
andgrid systems, type. To be a designer, you discovered something that was meantto be. some really interesting things. Not Monotype
must understand how they each influence a Thats not to say that Santa Marias type or big guyslike that.
design.Its the way that they all work in choices are entirely driven by symbolism. There are also a few handy sites Santa
concert thats important, he sums up. Although it certainly feels good to weave Maria has bookmarked for inspiration.
And what, in his opinion, is the secret of intoa design a typeface that carries a Onewonderful siteis called Fonts In Use
good design? Its staying away from any- complementary story, thats less crucial (fontsinuse.com), where the curators of the
thing thats too of the moment, he muses. thandodging bad and jarring links. Indeed, site, and anyone else, canpost up work and
Its about not being trite, its about doing he says, avoiding bad references is more chart out the typefaces used in that work.
something thats honest, something that important in achieving design success than And it all links together, so if you like that
feels like a natural form of communication. finding positive connotations. Bodoni, you can click on it and see all of
Its not about surface-level polish. The designers process of choosing a face theuses of it. Thats a great way to see
When it comes to picking the right type- begins with notebooks, lists and a hunt designwork and also see how different
faces to use in a design, Santa Maria believes through his many, manyshelves of books. designers use typefaces.
november 2014 35
Voices Interview
Returning to the business of design, I ask powerful thing being able to tailor the ty- why [it works] is more troublesome. My book
Santa Maria how he knows when hes made pography to a situation rather than choosing is a means to think through these problems.
the right choice. When the typography feels one direction and it being just good enough. Another side project was Editorially
like it can disappear into the background and That said, responsive didnt bring about (editorially.com), a collaborative writing
doesnt seem as though it needs to flaunt particularly radical changes in Santa Marias platform that closed its doors in May. Since
itself. And it does so with ease and a grace workflow. He explains that what works in then, the founders Mandy Brown, David
that benefits not only the story being told, one space is probably a good place to Yee andSanta Maria have been acquired
but the overall design too, he responds. Its startinanother. So, if something looks by Vox Media, where theyre now working
difficult to make that happen visually as you goodon a desktop or on a phone, and you on the companys backend story editor.
dont necessarily notice the pieces that make move to another envi- Were trying to solve
that happen, but you notice it when it isnt ronment, its not Good typography many of the same prob-
there. You notice when something is working amatter of throwing lems Editorially was
against that goal. everything out and feels like it can trying to solve. Its an in-
So, should type be invisible? It can be. starting from scratch. disappear into the teresting project to work
Butnot completely. Type has to serve two Rather, he says, Youre on because we all love
main purposes, Santa Maria says. It has just fine-tuning. background and writing and the writing
to introduce and welcome a reader it opens
the door and lays out the carpet; it should Side projects
doesnt need to process, and we also love
making beautiful tools
tease and be cinematic. Once youre into the Before the conversation flaunt itself that make people want to
article, the typography needs to disappear. draws to a close, I ask create, Santa Maria says.
So typography can be a tease, rather than about Santa Marias book, On Web Typography With Editorially over, theres a gap in Santa
trumpeting over everything thats there. (netm.ag/ontype-259). What motivated him Marias schedule for a new side project and
When youre reading it should be like flowing to pick up a pen? when we spoke to him, he was planning
water.It should move you along. Stupidity mostly, helaughs. It took onpicking up some neglected type and
much longer than I expected. The real photography projects. Its easy, heexplains,
Going Responsive motivation was, a lot of the books Iread about to dig too deeply into one subjectand refine
All this talk of structure and flow through typography talked about the history and one skill set to the detriment of others. Varied
apage leads us on to the subject of the arrival principles, but not about things that are side projects give Santa Mariaan outlet to
of responsive design. Did Santa Maria feel harder to define, like aesthetics or dissecting broaden his horizons and explore other
aloss of control when responsive broke? a typeface, and trying to understand why areas.Illalways jump on an opportunity
Initially I think I was afraid, but as I theforms look the way they do. Those are to work with someone I admire, or learn
startedthinking about it more, it was quite difficult topics to tackle because there are something new, he smiles.
exciting. Thats because youre able to no right answers, theres just a spectrum
makethe typography more suited to the from good to better. Its easy to put a Next month: We chat to A Dao of
environment its being read in. Thats a very typeface into a website, buttalking about WebDesign author John Allsopp
36 november 2014
VOICES Big question
Industry
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
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
Further reading
Pitching is a life skill Make them love your idea Sell me a pen
Being able to sell ideas in meetings is Working in a creative industry is, in Jordan Belford is the Wolf of Wall Street.
anessential work skill. Lifes aPitch by general, a pleasure. Until, of course, Hes a convicted criminal and also a
Stephen Bayley and Roger Mavity (netm.ag/ somebody pours cold water on your cherished master salesman. In this video netm.ag/
pitch-260) takes the view that good pitching idea. IdeaSelling by Sam Harrison (netm.ag/ sellpen-260 he explains why successful people
doesnt just help in the office its a life skill ideaselling-260) is a book aimed at creatives ask questions and dont just rely on blarney
which, when mastered, leads to a happier social who need to sell themselves and their ideas, (fast-forward to around 90sec). Questioning,
life as well as a more fulfilling career. and its packed with techniques and tips. heasserts, is the most critical part of selling.
november 2014 39
Voices Q&A
Q&A
Andrew Betts
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)
The FT Labs director on messy hacks, that goes into detail on some of the problems.
For the moment our approach is a messy
lucrativedomain names and why the web compromise of many hacks almost too gruesome
industry needs to start taking itself seriously todescribe. For example, we convert images into
text,then convince the browser that eachpair of
characters is actually just one two-byte character
net: Why dont you introduce yourself? (which is usually Chinese). Then we can do the reverse
Info AB: Im the director of FT Labs at the Financial Times. to get our image back again, but we can now store
job: Director, We look after the FT web app (app.ft.com), and much of twice as many images on your phone or tablet!
company: FT Labs the FTs frontend web development. I also run Edge ServiceWorker, of course, solves this problem far
w: trib.tv conference (edgeconf.com) and co-organise the London more elegantly.
t: @triblondon Web Performance meetup (londonwebperformance.org.
uk). Before this, I ran a web development agency net: Finally, tell us about your relationship with
called Assanka, spent a year in the UK air traffic theword awesome.
control service and briefly worked in Zimbabwe, AB: Awesome is one of those words like ninja,
building a tracking system for a manufacturing rockstar and app that is applied to pretty much
company that had six computers between 300 staff. everything to the point of making the word useless.
I love open collaboration. My team has just But that doesnt mean that it cant do harm. I tend
launched a public polyfill service (cdn.polyfill.io) to to mentally associate reckless superlatives and
take the pain out of auto-polyfilling missing features developer hero-worship with a culture thats come
in legacy browsers, and its available to everyone. tobe called brogramming (a word I also dont like).
Were a young industry, with little regulation,
net: How did you get started on the web? alackof strong professional bodies or chartership,
AB: My mum wanted a website for her company, andyet web development is arguably as vital to the
soIdid something in FrontPage, then got frustrated modern world as law or banking. I want to see an
at how inflexible it was, so I learned HTML and CSS. industry of diverse, professional practitioners,
It was satisfying to be able to put something out withameasured, thoughtful and mature community.
there that the whole world could see and use, and The only thing truly awesome about the web is its
the barrier to entry was so low. It was the boom of existence and our responsibility to look after it well.
the late 90s and the web was going to solve every Everything else is ephemeral.
40 november 2014
voices Opinion
WordPRess
WordPress evolution
Marko Heijnen reflects on the 4.0 update and considers the future for WordPress
WordPress recently launched a new the WordPress 4.0 release additionally think is the next big step for WordPress?
version, 4.0, amid much excitement included code cleanups and an application Theincorporation of a RESTful API.
around the releases updates and how they of standards for increased code quality. More complex websites and mobile apps
would benefit end-users and developers. For example, almost all uses of the PHP func- are continually being built with WordPress,
The release boasts over 1,200 updates tion extract() were removed. The function so it is important for WordPress to have
since 3.9. Although no groundbreaking previously exploded an array into variables, aRESTful API. Such an inclusion could
new additions were included, 4.0 leads the which although handy to use,accidentally support current WordPress apps as well as
way for future releases, with a number overwrote variables without users knowing. mobile apps that use WordPress as a
ofunderlying changes and clean-ups Users were previously unsure as to what was backend.As a feature available as a plugin
making WordPress 4.0 a more stable CMS. being parsed by extract() . now, users are currently
The removal of the 4.0 leads the way able to test this service.
New additions function increases the Going forward, the
My personal contributions to the release stability of WordPress
for future releases, platform will continue to
ofWordPress 4.0 included one patch. as a package, as no vari- with underlying update its legacy code and
Iinitially co-created the WP_Image_Editor. ables have the possibility add the APIs that devel-
class with Mike Schroder in WordPress 3.5. of being overwritten.
changes and opers need to better
With ongoing improvements, the update Additionally, Scruti- clean-ups making accommodate these user-
forWordPress 4.0 adds the method get_. nizer, a code inspection cases as their popularity
quality() . An important class that handles platform, was used to
WordPress 4.0 a increases.Although a lot
allimage manipulation within the plat- detect dead code and more stable CMS of work is still needed
form,the new method will help developers unused variables by around this, I am hopeful
retrieve the current quality of an image when searching through the codebase to find that we will see this update in WordPress
using the class directly in their own projects. possible issues. Although not necessarily 4.1 or 4.2.
Whilst a number of incremental changes fixing every issue, the access modifiers gave Secondly, I expect to see the rebuild of the
are present within the frontend and backend, a goodindication as to the current status of image editor in WordPress. A new project in
the code, increasing the overall quality. which I am involved, the current version
The code cleanups and removal of dead displays a number of issues including
code within update 4.0 are a huge benefit to extendibility. Although the status of the build
developers, making it easier to contribute to and release date are currently undetermined,
the ongoing improvement of WordPress as I see a huge potential here for a more extend-
a CMS platform. able UI for plugin developers to create new
With textarea support for Customizer, features for users.
less code is required for developers to There are also plans to extend the class
test themes. When installing plugins WP_Image_Editor with new methods. Hope-
on a dev version of WordPress, a fully these extensions add the default
new tab is visible. This saves inclusion of image filters (such as greyscale
developers time when completing or sepia). As a personal goal for this project,
updates as it displays all features I will begin working on new ways to show
being worked on as plugins. images on mobile.
The most notable change in this enthusiast, and has been making contributions
release is the creation of updates since 2010. As well as working full time for 1&1,
we can build on. But what do I he is the main core developer for GlotPress
42 december 2013
Gallery Inspirational sites
Brian Hoff
44 november 2014
Inspirational sites
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 of theagencys work are emphasised, taking up large The sites
firstborn.com
portionsof the screen. It makes a real statement. interactions
Beyond aesthetics, what I love most about the site is the
are fun while
Firstborn firstborn.com balance and grid. The site breathes with beautiful white
space amongst all the imagery and typography, meaning all
being snappy
Firstborn is a full service agency specialising in areas theelements flow perfectly. And while the studio could have enough to not
ranging from digital strategy to web design and content kept a more boxy grid approach to styling various areas, it hinder the
strategy. Its recent redesign is a real gem. It has personality subtly broke expectations by balancing call to action buttons, experience
and grit whilst maintaining a clean and modern aesthetic, animations and fades, all executed with the level ofpolish Jonathan Suh
which vice president and executive creative director Dave youd anticipate from this team. @jonsuh
Snyder says was one of the projects creative goals. The previous site really revolved around the work we do
The large typography is mixed with a sharp, bright red and thats a huge indicator of the mentality here at Firstborn.
colour palette, helping the redesign feel more bold and However, we wanted to add a bit more around the people and
powerful than before. Captivating graphics and images what grounds our approach to that work, explains Snyder.
46 november 2014
Inspirational sites
starwars.com
Disney.com disney.com
november 2014 47
Gallery Inspirational sites
HTML5, jQuery
adage.com
Area 17 area17.com
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
orangina.eu
Achtung! achtung.nl
november 2014 49
Gallery Inspirational sites
dsg.com/baseball2014
Viget viget.com
50 november 2014
Sublime design
& creative advice
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
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
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
How we built 64 centre that works to conserve a single species of fish.
How a team of university students joined web
agency Springload to create a fun-filled tool
toget New Zealands young people voting
52 december
november2013
2014
Design challenge
Sarah Brown
november 2014 53
Showcase
Design challenge
2
1
Adekunle Oduye
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
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
Bearded
bearded.com
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
nonprofits on our roster. Its not really the term typeface right? Well, all physical net: Whats the web design scene in
where the big bucks are but my feeling is type has an anatomy. The face is the surface Pittsburgh like?
that no one can pay you enough to dislike that gets inked, the ledge the letterform PF: In short: awesome! The community
what youre doing with your time. emerges from is the shoulder, and the slope here is close-knit, vibrant and excited about
Time is really all that any of us have, between the face and shoulder is the beard. the web. There are so many web and tech-
soyou better make sure youre having It isnt particularly noticeable, and it isnt related meetups here that one could attend
experiences you feel good about during the part that prints. But without it there, a different event on nearly any weeknight.
thattime. For me that means doing quality supporting the face, you couldnt print Pittsburgh itself is great, too. Many people
work, learning and growing as craftspeople, anything. So thats my long and rarified think of it as an American football-crazed,
enjoying the interactions with each other metaphor for Bearded. It doesnt make dirty, smoky steel town but thats not
and our clients, and making the world a avery good elevator pitch. really the case any more. We still love our
little better if we can while were at it. sports teams, but the city and surrounding
Wow.That got kind of heavy, huh? net: How did the agency start? region are beautiful.
MG: Two guys in our homes making sites
net: Where did the name come from? and a logo for next to nothing. Not long into net: You say: We do more than
MG: Well, Ive had a beard for most of it we got a leaky office and a third dev. It incorporate future-friendly technologies
myyears since high school, so it seemed was humble beginnings for sure. We really we help move the web forward.
like asafe bet. But theres a more arcane had no idea what we were doing with pretty Canyou give us some examples?
explanation that involves type. Fair much anything, which was kind of an asset. MG: Everything we come up with that
warning: aside from being a citizen of If wed known how ignorant we were about seems remotely useful we write about,
theinternet, Im also a letterpress printer. running a business I may have never speak about or put on GitHub for people
Ready? Here we go. Were all familiar with recovered from the resulting panic attack. touse. Which to me is just what one should
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
Profile
office culture
MATT GRIfFIN
november 2014 61
Showcase
Profile
Timeline
November 20008
Bearded is founded in Pittsburgh
asatwo-person team
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
November 2011
Bearded launches its first responsive
website. It stops using static projects. Clients are able to view their sites month is that to make a watchable film,
mockupsin favour of creating wireframes and mockups in a browser, so weneed more than just a bunch of expert
HTML/CSS/JS comps theyre exposed to real stuff very early in interviews. We need characters, story
the process. Our clients are our partners, areal narrative arc.
and weve found it works best to keep the So thats what were taking a first stab
february 2012
process transparent and let them in on atwith Ethan in Boston. There will be more
Bearded wins a HOW Interactive Design
things early. If we have an off-the-wall than just a person in a chair talking about
award for its iPad app for LISC
idea, we might do a quick mockup or sketch the web. I mean, now well have multiple
and just show it to them early. But more people walking around and talking about
june 2012 often than not, its an idea that might have the web! Totally different right?
Its responsive site for the Pittsburgh already been discovered together in our
Childrens Museum launches, kick-off meetings or presented in the net: So whats next for Bearded?
prompting Ethan Marcotte to say hed
research phase, so theyre expecting it. MG: Well, by the time this prints well have
like Bearded to stop making the rest of
us look so bad launched our new two-page website. We
net: Are all your sites built from scratch had been building a massive new Bearded
ordo you have a menu of elements and site for more than a year, and recently
july 2012 components that you draw together? decided to scrap it.In two weeks we totally
Matt Griffins first article is published PF: We begin building our sites with the redesigned everything as asimple site
by A List Apart. This eventually leads to
help of Stubble, our starter kit (netm.ag/ thats the absolute MVP for us. It says
his regular How we work column
stubble-260). Stubble is a simple collection whowe are, what were good at, and how
of our most commonly used patterns toget a hold of us.
march 2014 itsBeardeds boilerplate. Stubble helps What we realised is that Bearded has
Bearded is hired to work with Intel, usquickly put together our wireframes, changed a whole bunch in the past year,
Samsung, the Linux Foundation and andmake a consistent and clear start on and the big site wed been slowly chipping
Lullabot, to rework the UX, IA and ourmockups. away at between projects just didnt
content strategy for the Tizen
represent us any more. Its always a tough
websitesin time for the new
SamsungZ unveiling net: Tell us about your What Comes Next thing to do, letting goof things you really
isthe Future project ... like and have been working on for a long
MG: Well, were making a movie. Its a time. But it was also a huge relief because
april 2014 documentary about the people who build weknew it wasnt right any more.
Bearded is shortlisted for nets the web, which gives me an excuse to nerd It reminds me of a Hemingway quote that
Agencyof the Year award
out with people whose work and ideas Ivery came to me via Hillman Curtis book MTIV:
much admire. The main things Ive done so take out the good parts, and see if it still
may 2014 far are upgrade the heck out of my gear and works (netm.ag/MTIV-260). If you like
What Comes Next Is the Future, schedule more interviews. something too much to throw it away
MattGriffins documentary about In October I have a big trip to Austin whenits outlived its use, thats a problem.
thepeople who build the web, is planned, but before that Ill be going to Especially with the web which is so
fundedon Kickstarter Boston to do some shooting with Ethan mercurial, youve got to be ready to toss it
Marcotte, and hang out with Filament all out and start over, should the need arise.
Group and Dan Cederholm. One of the Hey, thats pretty good. I should write that
biggest realisations weve had in the last on my bedroom mirror or something.
62 november 2014
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
Close up
Brief
(1) The On the Fence site is built around an image of language and a cheeky tone of voice help re-frame
In 2011, a group of third year
students produced a colourful, a sheep teetering on a fence a metaphor for being political issues for a young audience. (5) Clear,
humorous Flash tool to guide undecided. (2) A responsive approach was essential. simple actions guide 92 per cent of users to
inexperienced voters to make an Our primary audience are young, first time voters, complete all 17 questions, with an average time on
informed decision. In 2014 the who often access socially shared content through site of 7.48min. (6) In the last New Zealand election,
toolgot a responsive update, with mobile. We wanted them to be able to complete close to 60 per cent of 18 to 24 year-olds turned out
help from web agency Springload.
the game on their mobile device. (3) As the game to vote. This site provides the opportunity for young
progresses, the sheep is dressed in props relating to people to make sure theyre ready to get involved,
how the user answers each question. (4)Humorous and enrolling to vote is the first step.
64 november 2014
How we built
September 2011
Massey University group launches
Design lecturer Karl leads Josh is a frontend director Graphic designer Kieran is Onthe Fence version one after
Massey Universitys Design andundercover designer at junior research officer on the a six- week long hackathon
&Democracy Project, the Wellington-based design and project, and oversees creative
initiative behind the tool development studio Springload direction of the frontend tool
w: massey.ac.nz w: springload.co.nz w: kieranstowers.co.nz Oct 2012
t: @musettecc t: @joshbarrnz t: @kieranstowers
The On the Fence concept is refined
inKieran Stowers honours year project
In 2011, the Design & Democracy develop the 2011 version. Now, I act as
Project at Massey University junior research officer, overseeing the March 2014
decided to tackle the apathy towards creative direction of the frontend tool. Massey University and Springload
politics amongst young people in New JB: Karl and Kieran approached Springload starttalks about collaborating on
anew, responsive On the Fence
Zealand. A team of third-year students in early 2014 to collaborate on a new
embarked on a six-week hackathon version of On the Fence. We contributed
to create a Flash tool aimed at getting advice on UI and interaction design, as May 2014
youngsters engaged. After being blown well as managing the build, frontend Questions and policy areas are
away by the positive response from development and devOps. developed and finalised with the team
New Zealanders everywhere, the team
brought in web design agency Springload net: What were your main goals when
June 2014
to help make a responsive version. Here, you started out, and how did they evolve?
Backend application Democratic is
Kieran Stowers one of the original On JB: We discussed success in human
completed, and a questionnaire is sent
the Fence creators and Springloads terms we imagined a busy family with out to a panel of experts
Josh Bar walk through the project that highschool-aged children sitting down to
put a new slant on New Zealand politics. dinner, and someone going: Hey, I saw
this funny sheep game at school today July 2014
net: How did the project start out? it helped mefigure out who to vote for. Design and development of the
frontend app, mobile device testing,
KS: It began in 2011, when a young lady As the project progressed, we narrowed
user testing and refinement
named Rebecca Whyte approached Massey the focus toward first-time voters and
University College of Creative Arts and pre-voters, allowing other digital tools
asked if the students could do anything tomeet wider audiences. August 2014
about the lack of enthusiasm for politics Our major technical goal was moving On the Fence launches, attracting
shed noticed amongst young people the 2011 Flash-based On the Fence to a 30,000 visitors in its first three days
in New Zealand. A group of third year responsive website. We knew wed need
students, including myself, researched, to architect the app to work on any size of
September 2014
conceptualised, prototyped, branded, screen, and a wide range of browsers.
The team starts developing tools to
marketed and launched On the Fence just help high schools use On the Fence in
six days before the New Zealand general net: Tell us about the user research you their Civics Education curriculums
election, and over 30,000 Kiwis from conducted, and what you found out.
around the world responded. JB: We tested guerilla-style, with friends
and family. We were mainly looking
net: Who worked on the project, for the best way to input responses to
andwhat were your roles? questions, and we found that users wanted
KS: The tool is a product of Massey to respond with a few definite reactions,
Universitys Design & Democracy Project, rather than an ambiguous sliding scale.
an initiative led by Karl Kane. I was the KS: Joshs 14 year-old sister Ani user-
designer and team leader that helped tested the app several times, and there
november 2014 65
Showcase How we built
1
2
Evolution
66 november 2014
How we built
Making friends Users can share their custom Alien abduction We used SnapSVG library for the Next month: We chat to the creators
sheepavatar with their friends on Facebook final scene,where a sheep is abducted by aliens 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
Cover feature
esponsive web design sounds The three main concerns were defined by the
incredibly simple. Opt for flexible Responsive Images Community Group (RICG):
grids for the layout, use flexible
media (images, video, iframes), 1. The kilobyte size of the image we are sending
and apply media queries toupdate overthe wire
these measurements to best arrange 2. The physical size of the image we are sending
content on any viewport. Inpractice tohigh DPI devices
weve learnt it is not really that easy. 3. The image crop in the form of art direction for
Tinyissues thatcrop up during every project keep us theparticular size of the viewport
scratching our heads, and occasionally even carving
fingernail trenches on our desks. Yoav Weiss, with help from Indiegogo (netm.ag/blink-
Since I began curating the Responsive Design 255), has done the majority of the work on the Blink
Weekly newsletter (responsivedesignweekly.com) Ive implementation Googles fork of WebKit, and by the
been fortunate enough to speak with many members time youre reading this it will be shipped in Chrome
of the web community and hear their experiences. and Firefox. Safari 8 will ship srcset , however the
Iwanted to find out exactly what the community sizes attribute is only in nightly builds and <picture>
really wanted to learn, so I circulated a survey to is not yet implemented.
readers. Here are the top results: With the arrival of anything new to our web
development process, it can be difficult to get started.
1. Responsive images Lets run through an example step by step.
2. Improving performance
3. Responsive typography <img
4. Media queries in JavaScript <!-- Declare the fallback image for all non picture
5. Progressive Enhancement supporting browsers -->
6. Layout src="horse-350.jpg"
<!-- Declare all of the image sizes in srcset. Include
With those topics in mind, I ran a series of podcasts the image width using the w descriptor to inform the
(responsivedesign.is/feeds/podcast) asking some of browser of the width of each image.-->
our industry leaders for their thoughts. In their srcset="horse-350.jpg 350w,
responses, one point was unanimous: focus upon horse-500.jpg 500w,
getting the basics right before you start worrying horse-1024.jpg 1024w,
about exciting and advanced techniques. By taking horse.jpg 2000w"
things back to the basics, we are able to build a robust <!-- Sizes inform the browser of our site layout.
interface for everyone, layering on features when the Here we're saying for any viewport that is 64ems and
device or users context allows. bigger, use an image that will occupy 70% of the view-
So ... what about these advanced techniques? port -->
Ihear you ask. I think Stephen Hay summed it up sizes="(min-width: 64em) 70vw,
best when he said: The ultimate RWD technique is to <!-- If the viewport isn't that big, then for any
start off by not using any advanced RWD techniques. viewport that is 37.5ems and bigger, use an image that
Start with structured content and build your way up. occupies 95% of the viewport -->
Only add a breakpoint when the design breaks and the (min-width: 37.5em) 95vw,
content dictates it and ... thats it. <!-- and if the viewport is smaller than that, then
In this article, Ill begin with the basics and add use an image that occupies 100% of the viewport-->
layers of complexity as the situation allows, to build 100vw"
up to those advanced techniques. Lets get started. <!-- always have alt text.-->
alt="A horse" />
Responsive images
Fluid media was a key part of RWD when it was first From a performance point of view it doesnt matter
defined by Ethan Marcotte. width: 100%; , max-width: ifyou use min-width or max-width in the sizes attribute
100%; still works today, but the responsive image but the source order does matter. The browser will
landscape has become a lot more complicated. With always use the first matching size.
increasing numbers of screen sizes, pixel density Also, remember we are hard-coding the sizes
anddevices to support we crave greater control. attribute to be directly defined against our design.
november 2014 69
september
Features Cover feature
Stephen Hay
70 november 2014
Cover feature
This may cause issues moving forwards. For example, the article is delivered to the user as quickly
if you redesign your site, youll need to revisit all of aspossible and within the 14kb magic number.
the <img> or <picture> s and redefine the sizes. If Lets look at the process:
youare using a CMS, this can be overcome as part
ofyourbuild process. 1. User clicks on a Google link to a news story
WordPress already has a plugin to help (netm.ag/ 2. A single blocking request is sent to the database
picture-260). Itdefines the srcset on WP standard for the article. No related stories or comments are
image varieties and allows you to declare sizes in requested
acentral location. When the page is generated from 3. The HTML is loaded containing Critical CSS
the database, it swaps out any mentions on <img> in the <head>
andreplaces them with the picture markup. 4. A Cut the mustard process is undertaken and any
conditional elements based upon the users device
Basic features are loaded
Think about whether you really need to include an 5. Any content related to or supporting the article
image. Is the image core content, or is it decorative? itself (related article images, article comments and
One less image will mean a faster load time soon) are lazy loaded into place
Optimise the images you do need to include using
ImageOptim (imageoptim.com) Optimising the critical rendering path like this means
Set expire headers for your images on your server the <head> is 222 lines long. However, the critical
or.htaccess file (see details under Performance) content the user came to see still comes within the
PictureFill (github.com/scottjehl/picturefill) provides 14kb initial payload when gzipped. Itsthis process
polyfill support for pictures that helps break that 1000ms rendering barrier.
november 2014 71
Features Cover feature
Responsibly responsive performance issues found in many responsive concatenating, minifying or gzipping code,
sites to RWD itself, but rather to a broader lack optimising imagery, caching and so on should be
Web designer Scott Jehl asks
if RWD is bad for performance of follow-through with widely-recommended applied to responsive sites as well. Sometimes its
optimisations. RWD is defined as nothing more tricky to pull off with multi-device code, but I think
I think the web in general has a problem with than a means for adapting visual layout, and its its more of a challenge than an impossibility.
bloated pages, and that problem both preceded the best approach we have for doing that.
and continues alongside responsive sites. In All of the performance recommendations Responsible Responsive Design by Scott Jehl will
that light, I dont think its fair to attribute the we need to follow for building sites in general be available Oct 2014 (netm.ag/responsible-260)
72 november 2014
Cover feature
Ethan Marcotte
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 .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)
allows, changing the behaviour of a lightbox, or
This targets the 5th, 9th... in the grid.*/ Flexbox Polyfill
updating the layout of a data table. Check out the
.grid-1-4:nth-of-type(4n+1) { clear: left; } (flexiejs.com)
getActiveMQ Codepen at netm.ag/active-260.
} Plugins
Basic TableSaw (netm.ag/
Forget about JavaScript for different viewports. Wave goodbye to using position and float for your tablesaw-260)
Provide content and website functions to users in a layouts. While they have served us well to date, their Fit Vids (fitvidsjs.com)
way they can access it across all viewports. We should use for layout has been a necessary hack. Weve now Fit Text (fittextjs.com)
never need JavaScript got two new kids on the block that will help fix all Adaptive UIs (netm.
our layout woes Flexbox and Grids. ag/allsopp-260)
Advanced Flexbox is great for individual modules, controlling Label Mask (netm.ag/
Extend Gustafsons method by using Breakup the layout of pieces of content within each of the label-260)
(github.com/BPScott/breakup) as a predefined list of modules. There are layouts we attempt to deliver that All things RWD
media queries and automating the creation of the can be more easily achieved using Flexbox, and this
Responsive Design
listof font families for getActiveMQ-watcher 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)
Progressive enhancement flexbox1-26) or the Flexbox Polyfill (flexiejs.com). This is Responsive
A common misconception about progressive (netm.ag/thisis-260)
enhancement is that people think, Oh well I cant CSS grid layout Responsive Design.is
use this new feature, but really, its the opposite. Grid is more for the macro level layout. The Grid (responsivedesign.is)
Progressive enhancement means that you can layout module gives you a great way to describe your
deliver a feature if its only supported in one or even layout within your CSS. While its still in the draft
no browsers, and over time people will get a better stage at the moment, I recommend this article on the
experience as new versions arrive. CSSGrid layout by Rachel Andrew (netm.ag/grid-260).
If you look at the core function of any website,
you can deliver that as HTML and have the server Finally
side do all the processing. Payments, forms, Likes, These are just a few tips to extend your responsive
sharing, emails, dashboards it can all be done. practice. When approaching any new responsive
Once the basic task is built we can then layer the work, take a step back and ensure that you get the
awesome technologies on top of that, because we have basics right. Start with your content, HTML and layer
a safetynet to catch those that fall through. Most of improved experiences upon them and there wont be
theadvanced approaches we have talked about here any limit to where you can take your designs.
are based upon progressive enhancement.
Layout Thanks
With thanks to Jeremy Keith, John Allsopp, Stephen Hay,
Flexible layout is simple to say, but it has many
Aaron Gustafson, Ethan Marcotte, Brad Frost, Patrick
different approaches. Create simple grid layouts Hamann, Jordan Moore and Scott Jehl, who all helped
withless markup by using :nth-child() selector. 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
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 Fontshop Choosing a digitally native font can make a world of difference to your article
development is key. At Edenspiekermann, the globe; a different one for each readability, interactivity and creativity.
we approach our digital editorial using athlete. We went back and forth between Itis a delicate balance.
aScrum workflow (netm.ag/scrum-260), in content, design and development in a On one hand you want to push the
which design and development take place truly integrated workflow. interactive possibilities of digital and the
simultaneously. With digital longform The writers were encouraged to think art-directed nature of longform. On the
in particular, not only do design and beyond the written word and include other, people need to feel focused on the
development teams need to work suggestions for infographics, video and words if theyre going to read anything
together, but the writer or journalist other interactive elements. Likewise, ofsignificant length. As we all know well,
alsoneeds to be closely integrated right design and development decisions in our digital world attentions spans are
from the very start. which happened in parallel to writing short and distractions are many.
Recently we developed a series of fed back into the writing process. On the World of Red Bull campaign,
longform pieces for the World ofRed we started out really trying to establish
Bull campaign. For this project, we set A balancing act an individual look and feel for each
out to create rich visual worlds for each Digital longform is a field of digital athletes story. We developed the stories
of the seven athletes stories that would design that really benefits from completely one at at time. By the time
feature on the campaign website (netm. pushing the envelope in terms of visual we got to the third story, we felt wed
ag/stories-260). To write the stories, we creativity. We found that the key to got the balance between readability,
worked with journalists from across a successful piece is the right mix of interactivity and creativity just right.
78 november 2014
Second feature
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 font to testing it across multiple devices, how fonts actually render. Investing
backinto theother stories. the handling of typography makes or some time optimising text across
When people need to read, all breaks an editorial design after all, it multiple devices, browsers and platforms
other distractions need to instantly isthe base unit of this format. really pays off. Often a small change
disappear. Lose the interactive maps, It goes without saying that all such as setting "-webkit-font-smoothing:
CSS animations and above all, parallax typographic decisions should be made antialiased" makes a massive difference
scrolling (although we have used it once directly in the browser. Type rendering over long passages of text.
or twice). White background, black text. in Photoshop, Sketch, and so on differs When setting type for digital editorial
Think of it as entering focus mode. drastically from how it appears in the or indeed any digital project never
One of the way we achieved this was underestimate the importance of
by using a modular, panelled approach, When people need to selecting a digitally native font (one
so that interactive elements were designed specifically for screen). These
heavily separated from the reading read, all distractions usually have less contrast in the strokes,
sections. These focused panels featured need to disappear. meaning higher legibility, especially at
little other than a single block of text.
Navigation can afford to disappear,
White background, smaller sizes. Choosing a contemporary
digital font such as Klim Type Foundries
onlyreappearing when absolutely black text Tiempos Text (netm.ag/tiempos-260),
necessary. Its what books (you know, used on What Screens Want (netm.ag/
the things made with paper and ink) browser on your shiny 27" iMac, let chimero-260) amongst many others
have been doing for a very long time. alone Windows machines, older Android instead of an older font like Garamond,
The message is simple: make it easy devices and feature phones. which was never designed for screen,
foryour readers to read. These days, designers barely even need can make a huge difference.
to get their hands into code (although Its also important to choose a font
Think type they probably should) to test out fonts that is hinted (netm.ag/hinting-260)
Arguably the most important decision in the browser. Tools such as Typecast byhand (tweaking the rasterisation
you will make when it comes to digital (typecast.com) and Fontshops Tryout ofafont so that the optimal outlines
editorial is type. From choosing the right (next.fontshop.com) make it easy to test 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
80 november 2014
Second feature
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 Recently we created our own custom Before diving into creating a custom
(netm.ag/asynchronous-260) for reading Storybuilder tool for a project called Red CMS, bear in mind that there are also
on poor connections. Bull Amaphiko, a project working with some great existing tools for managing
social entrepreneurs in South Africa editorial content and these tools can
Manage that content (netm.ag/amaphiko-260). Using the often be combined. For example, in
Although the idea of a completely Storybuilder, the social entrepreneurs the past we have combined the highly
customised and art directed story may created their stories using pre-defined customisable Rails-based Active Admin
seem fantastic to a designer, in reality building blocks (modules). (activeadmin.info) with the JavaScript
this is may not feasible. Not only that, drag-and-drop interface Sir Trevor
its often not even the best choice.
A best practice (madebymany.github.io/sir-trevor-js).
Journalists and editors will probably Weve also looked into API-based
need to be able to go in and edit the approach is to design solutions, such as Contentful (contentful.
content, change images and perhaps
even reuse the template for a new story
and build longform com), for more complex editorial
projects. Of course, sometimes a far
(albeit with a different art direction). stories in modules simpler solution is all you need, and a
Perhaps you need to translate the file-based CM like Get Kirby (getkirby.
content into different languages? Or rather than pages com) will do the job just perfectly.
non-Latin charters? Maybe even right
to left? On the World of Red Bull project We created a set of basic module types, Storytelling
we needed to adapt (and localise) the including image, text block, video Above all, be flexible and open minded,
custom art directed to over 30 languages and so on that could be combined and and chose the tools and processes that
in more than 60 countries. reordered to create an elegant longform best meet the projects needs. Inspect
A best practice approach to content story. Think of it like a recipe the and adapt your approach and be honest
management and adaptation is to design building blocks are the ingredients that about what works and what doesnt.
and build longform stories in modules can be combined to create a story. As Lastly, and probably most importantly,
rather than pages. Modules are reusable, the stories grew, the users could also remember that the real make or break
easily dragged-and-dropped around the add additional chapters. The visual style of your digital longform will not be not
page, can be added or removed as needed of each story was chosen from a set of be the technology, typeface or custom
and are easily integrated with a CMS. themes in the global setting. 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
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
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
60 frames per second. Its the target we should Famo.us is a free, open source JavaScript
be aiming for when building digital interfaces. framework that helps you create smooth, complex
Despite improvements to our development tools, it UIs for any screen. At its core is a 3D layout engine
isdifficult and at times seemingly impossible alongside a 3D physics-based animation engine.
toachieve animations that run smoothly and feel Famo.us renders to the DOM, with Canvas and
natural. Why is this? Browser layout engines like WebGL rendering contexts coming in the near future.
WebKit and Gecko were built for rendering text and Unlike browser rendering engines, it has been built
links with a few images in-between, rather than the with many similarities to 3D rendering libraries.
complex applications we see in browsers today. The performance of animations has been the focus
Video
With the success of initiatives such as Jank Free from the start of development, with the framework
Mark Jones has created
(jankfree.org), its clear developers trying to create beginning life as code that animated a single <div>
an exclusive screencast
to accompany this experiences matching their native counterparts are at 60fps without the use of CSS animations. In its
tutorial. Watch along at required to understand browser rendering intimately. current form, Famo.us functionality focuses on
netm.ag/famousVid-260
Whilst this isnt something to discourage, Famo.us building your applications views, leaving it up to you
aims to provide adifferent option. to decide how to handle other application concepts
84 november 2014
Frameworks
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
november 2014 85
PROJECTS Frameworks
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
Frameworks
november 2014 87
PROJECTS Frameworks
Future developments
view.add( surface );
view.add( surface2 );
context.add( view );
Here are some of the exciting things we can look forward to
in future Famo.us releases: Famo.us comes with many in-built views such
as FlexibleLayout, a view for providing ratio-based
Famo.us Wrapper responsive layouts that provide us with a starting
The Famo.us Wrapper is similar to (and based on) Cordova point for our applications. By composing several
(cordova.apache.org). The Android version of the wrapper is being of these views, we can quickly build common
built in conjunction with Intel and will allow your application to be application layouts with minimal effort.
packaged with a Chrome 35 WebView, regardless of the Android
version its running on. Not developing for Android? An optimised Can touch this
version of Cordova is also being worked on for iOS, Windows Our application isnt going to be very interesting if
Phone,Kindle and Firefox. we cant interact with it. Famo.us events are captured
at three different levels. The first level is on the
MVC framework Surface, the second is the Surfaces parent context,
Famo.us provides us with much of the functionality we need and the third and final level is the Engine.
to build interfaces that rival native applications. However, it
leaves certain architecture choices (Models, Controllers, Routing, surface.on( 'click', function( e ) {
Templating and so on) up to us. The Famo.us MVC framework will console.log( 'Surface clicked', e );
provide a complete solution for our applications architecture if });
youwould prefer not to roll your own.
context.on( 'resize', function() {
Framework integrations console.log( 'Context resized' );
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 Engine.on( 'keyup', function( e ) {
integrations in the works. console.log( 'Keyup event', e );
});
Mobile templates
If youre used to developing with Bootstrap or Ionic youll be Animations
pleased to hear that a project is underway to port many of the Weve covered many of Famo.us basics, but we
templates they provide to Famo.us, allowing common application still seem to be focusing on displaying content,
layouts to be constructed with ease. With the added bonus of 3D something that modern browser engines are pretty
layout and physics, of course. good at. Be it the animation of a scrollview or
the transitions between screens and menus, our
jQuery Widgets animations have to be smooth and feel natural
Whilst jQuerys animation techniques are starting to show their totheusers input.
age, jQuery plugins are as popular as ever. Many of the more Famo.us achieves this by doing away with CSS
ubiquitous plugins are being ported to Famo.us, allowing widgets animations, instead applying matrix transformations
such as carousels to be swapped out for the Famo.us-powered directly to the Surfaces it is animating. We will use a
equivalent in a snap. specific type of Modifier called a StateModifier , which
is simply a Modifier which contains its own state via
setTransform .
88 november 2014
Frameworks
var wall = {
Where Famo.us excels method: 'wall',
animations modifier.setTransform(
Transform.translate( 0, 400, 0 ), wall
Were using Famo.us Easing object to dictate );
the curve of our animation. The Easing object
provides uswith over 30 easing curves to use This example shows how to register a Transitionable
in ouranimations. Should we wish to sequence method called 'wall' , which we use as the second
severalanimations, we can chain them by calling argument to our StateModifier s setTransform method.
setTransform multiple times. When we chain This causes our Surface to animate 400 pixels
animations, the previous animation will finish from the top of our context over a duration of 500
before the next one begins. Complex sequences of milliseconds, and when it arrives at its destination
animations are simple tocreate using this pattern. itbounces as if it has hit a wall, causing it to come review
toa gradual stop.
David
Physics Fetterman
Where Famo.us really excels is the combination of Whats below the surface? With thanks to David
its physics engine with animations. Our previous Famo.us is an exciting framework that is simple Fetterman, head of
animation occurred over a fixed amount of time. touse whilst being incredibly powerful. This article Famo.us Labs, for his
review of this tutorial.
Famo.us gives us the ability to create animations that couldnt cover everything it does, so check out the
occur for varying durations, depending on the way 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 from a PSD resource. Being the control-freak that
ways to showcase their work. One popular I am, I wanted a better way of achieving this look
method is to present your screenshots in a grid, while maintaining aesthetic freedom.
angled away from the viewer. There are numerous Photoshops 3D tools continue to elude me, but
ways to achieve this look. One method I see regularly thanks to Adobe Creative Cloud I have After Effects
makes use of Photoshops Smart Objects, which can sitting there begging for me to use its 3D capabilities.
be skewed, rotated and scaled without permanently One of the amazing things about After Effects is how
altering the assets original state. All the designer easy its 3D tools are to use. With one enabled setting
video
has to do is open a Smart Object, edit its contents and and a virtual camera, you can build a 3D scene that
Watch an exclusive
hit Save to see their work in all its isometric glory. places full perspective control in your hands.
screencast of this
tutorial created by This approach is perfectly fine, but requires that In this tutorial, Im going to show you how to set
Phil Coffman at: the designer either a) knows how to skew a Smart up a simple grid of images in Photoshop and leverage
netm.ag/coffman-260
Object so that it appears at a natural 3D angle, or the power of After Effects to build a perspective shot
b) accepts whatever preconfigured setup they can get you can edit, change-up and reuse.
90 november 2014
After Effects
november 2014 91
PROJECTS After Effects
Expert tip
92 november 2014
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.
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 Now lets blur this layer by adding the Iris Shape , which may or may those are set, click Render at the
todarken all the duplicated layers, aGaussian Blur effect. Set its not have an impact on the softness top-right of the Render Queue
apart from the top one. Select the Blurriness property to something of the blur. window and youll have a shiny new
layer thats second from top and go like 40. Under the Transform image file.
to Effect > Color Correction > Hue & properties of this layer, set Opacity The final thing you need
Saturation or right-click on it and to 70 per cent and increase its Z
22 todois export an image of I typically render out my
select the same options. position (the third value under yoursexy perspective shot. Go to
23 images as JPGs set to the
Position ) so that it sits lower down Composition > Save Frame As > highest quality. If you render to a
In the Hue & Saturation than the image grid above. Lastly, File... and youll get After Effects format that supports an alpha
18 effects panel drop the name this layer Shadow. Render Queue . All you need to do is channel (PNG, PSD, for example)
Master Lightness value down to specify the Output Module , which then the background colour of your
something like -35. Select the Hue Now you have a grid of 3D is the file type (JPG, PSD, PNG and composition wont be included
& Saturation effect under Effects
20 images which you can easily so on) and Output To location. Once inthe rendered file.
on the applied layer, copy it via Edit update via Photoshop. Its simple
> Copy or cmd/ctrl+C , select all of toreposition the grids perspective
the other bottom layers and paste with the Camera in After Effects,
the same effect. Now all the layers, and change the depth by making
other than the top one, will havea quick duplicates.
slightly dark tint.
If you want some final polish,
The final effect for simulating
21 turn on Depth of Field on the
19 depth is to create a shadow Camera. Expand the Camera layers
thats being cast by the 3D images options and turn on Depth of Field
onto the composition background. under Camera Settings . Getting
After Effects has a lighting system, this looking just right requires
but I find that to be overly complex lotsof trial-and-error. Itypically
for an effect like this. Instead, make experiment by adjusting the Focus
a duplicate of the bottom Grid layer Distance , Aperture and Blur Level
and adjust its Master Lightness values these can each be higher
under Hue & Saturation to -100. than 100% . You can also change up Step 21 Turning on the Depth of Field option can help add polish to your composition
november 2014 93
PROJECTS Git
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
A b o u t t he a u t h o r
Git
T obias
94 november 2014
Git
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 Conflict wizard Towers
no live connection you have to download new You can restore any of your stash items, either Conflict Wizard helps
usersunderstand and
changes from the remote repositories to be able completely or in parts. solvemerge conflicts in
toinspect them. avisual way
work more easily and tedious: managing SSH keys, creating passcodes and
generating access tokens is both time-consuming
efficiently with the Git and error-prone.
Thats why Tower now integrates with popular
version control system code-hosting services like GitHub (github.com),
Bitbucket (bitbucket.org) and Beanstalk (beanstalkapp.
atregular intervals. This makes sure youre always com). After connecting your accounts just once in the
up-to-date with whats happening on the remote app, you no longer need to juggle with usernames,
server, without having to remember to sync things passwords, tokens and URLs any more.
up yourself. Cloning a repository from one of your accounts
isthen simply a matter of a single click. You can
Keeping your working copy clean create new repositories directly in your hosting
In many situations, it is advisable or sometimes account right from within the app. And, last but
even required to have a clean working copy (i.e notleast, you can even manage SSH keys connected
no uncommitted local changes) expecially when with your account.
pulling or rebasing, switching branches, or cherry-
picking commits. Becoming productive
With its stash feature, Git already provides In the end, its not about the command line versus
the necessary tools to make this possible. On a GUI client, because both approaches are valid and
thecommand line, you simply need to call the can be used side-by-side. Some things are indeed
git stash command to put your current local changes easy to do on the command line: like completing
ona clipboard. The hard part is simply to remember a commit, initiating a merge and creating a stash.
to do this. In version 2, Tower automatically offers Other things, however inspecting commit
to do this for you, in situations where stashing history, creating branches via drag and drop, and
yourlocal changes would be a good idea to help solving conflicts in a visual way are far easier in
youavoid conflicts. aspecialised GUI application.
Its visualisation of stashes also helps make things In the end, the question is how to be productive.
very intuitive: each stash can be inspected as easily How to get access to the professional features. In
as a commit, including the exact changes it contains. aneasy way.
november 2014 95
PROJECTS Head to head
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 React ember.js
t: @machty An open source, Facebook-sponsored JavaScript An open source, heavyweight framework for building
job: Lead engineer,
library for building user interfaces. It ditches traditional client-side web applications. It provides universal data
Express Checkout;
Core team member, data binding in favour of a unidirectional, re-render binding and a URL-driven approach to structuring
Ember.js everything approach that is component-centric. applications with a focus on scalability.
areas of expertise:
Client-side JS Scope
applications
q: what was your Reacts homepage describes it as a JavaScript library Ember.js homepage describes it as a framework for
childhood nickname? for building user interfaces (netm.ag/react-260). React creating ambitious web applications (emberjs.com).
a: Little Man
provides a simple yet performant API for client-side Client-side rendering is one of the features Ember
rendering, and can be used as the rendering engine for provides, but it also intends to provide structure to
other JavaScript libraries (including Ember). scalable web applications beyond just the view layer.
Managing State
React implements a unidirectional data flow, so Embers object model facilitates Key-Value
whenever a components setState method is called, Observation, which allows Ember to re-render
that component (and any of its children) will re-render. changes to specific properties. Two-way binding is
Data flows downwards, events (clicks, form submits) supported, but for the most part, Ember encourages
flow upwards and ultimately translate into a setState . unidirectional data flow.
Scalability
Fact file React is arguably the most performant and flexible Embers patterns for structuring applications are
Data-binding rendering library around, even when rendering large baked into the framework in a convention-over-
Ember features one- lists. That said, it doesnt intend to provide any sort of configuration manner and have seen great success in
and two-way data- application structure, and must be used in conjunction the ecosystem of large JavaScript applications. That
binding via Key-Value
with other libraries or architectures (such as Flux, said, Embers view layer is less performant when
Observation (KVO).
React doesnt use KVO, react-router) for any medium- or large-scale apps. rendering large lists, particularly relative to React.
but instead re-renders
using a unidirectional Secret Weapon
data flow originating
from calls to setState . Every time setState is called, React generates a new Embers recent secret weapon is ember-cli ,
virtual DOM with the latest data and efficiently diffs theofficial command line interface for building
Contributors itagainst the previous version, generating a minimal andmanaging Ember applications. ember-cli makesit
React was built and is
list of changes that need to be made to the real DOM incredibly simple to generate and import Ember
actively maintained by
Facebook. It was open- to bring it in sync. addons into your projects.
sourced in mid-2013.
Ember was forked verdict
from SproutCore in
2011 and is maintained Keeping in mind that React is a UI library and Ember is an application framework, you should
entirely by the Ember give both React and Ember a try. If youre building something large, lean towards Ember. If
community.
youre building something smaller but performance-sensitive, opt for React.
96 november 2014
WordPress
THE COMPLETE GUIDE
148
pages of
web-building
advice
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
Mobile
I like frontend development. Its simple and phone functionality through the use of JavaScript.
quick. In comparison, creating apps for mobile Cordova is the open source version of PhoneGap,
platforms can be long andlaborious. Thankfully, an HTML5 hybrid app framework
programmers have brought the world of native apps l AngularJS (angularjs.org) is Googles JavaScript
to web developers through HTML5 hybrid app MVW framework, supplying the business logic part
frameworks. These use the devices webview to of the app. Angular provides a way to structure
display the app, so we can use frontend technologies JavaScript to make use of modular patterns and
like HTML, CSS and JavaScript to build apps that give correct separation of concerns
the same experience. Using a framework means one l Ionics UI framework is a set of tools that help
set of code can be deployed onto multiple platforms, youbuild aesthetically pleasing, native user
video reaching a wide audience with minimum effort. interfaces. Similar to Bootstrap, it can be used to
James Miller has put Ionic (ionicframework.com) is a rapid development write HTML in its prescriptive manner, instantly
together an exclusive framework for hybrid mobile apps. It is made up of delivering afunctional interface
screencast to go
three different technologies:
alongside this tutorial.
To watch along, visit I have put together a networking app for nets
netm.ag/ionicvid-260 l Cordova (cordova.apache.org) forms the core of the Generate conference (netm.ag/ionicgit-260) to go
application framework, allowing access to native alongside this guide. There is significantly more
98 november 2014
Mobile
HTML5 hybrid app Views are used to display the user interface. They consist of HTML,
world of native apps Services organise and share data. Use services to connect to an
external server and to manage the data layer of the application.
to web developers
Controllers manage the user interactions that bind your view
So what do those lines of code do? The first creates andservice.
an Ionic build from a sidebar menu template,
including Cordova, AngularJS and the UI framework. Modules collect and organise components (scopes, directives,
The next moves us into the newly created folder, views, services and controllers, plus others) allowing you to
where the third adds iOS as a platform (alternatively abstract areas of the application.
you could use Android, by replacing the references
to ios with android ). The fourth line runs the build, Learning resources
which moves the top level of files to the platform lO
fficial Angular JS tutorial (docs.angularjs.org/tutorial/step_00)
level. The final line runs the iOS simulator, which Start here for the fundamentals, including correct unit testing
should show everything correctly installed. through Karma
Creating the project also creates a demo lE
gghead.io (egghead.io)
application, so you can play around with Ionics John Lindquist has a tremendous set of video tutorials featuring
features straight away. all aspects of AngularJS
lA
ngular best practices (netm.ag/best-260)
The Interface Joe Eames videos on PluralSight offer excellent explanation on
When building an app in Ionic, you must only work structure and the best practice ways to use this framework
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
november 2014 99
PROJECTS Mobile
with Chrome
<ion-list>
<ion-item class="item-avatar" ng-repeat="person in network
| orderBy:'name' | filter:search " href="#/app/person/{{person.
When building apps with Ionic, the default method of testing id}}"> ...</ion-item>
is to emulate the device by using the command line interface. </ion-list>
Waiting for Ionic to compile, build and install the app on the
emulator can be a slow and painful process. Fortunately Chrome The code uses the elements created by Ionics
offers an alternative. custom directives. This provides all the styling
Chrome developer tools include the ability to emulate a mobile andfunctionality needed to make things look
device (netm.ag/emulation-260). As Chrome uses the same browser greatwithout much effort.
engine (Webkit) as the webview in Ionic, there should be like-for- <ion-list> creates a placeholder for the list,
like emulation. To enable mobile emulation, navigate to your project and using ng-repeat creates a loop on <ion-item> .
in Chrome. Right-click and select Inspect Element to bring up the Identical to a foreach loop, this lists each contact
developer tools. Next choose the blue symbol at the top right of thatexists in the network array (obtained from a
the Inspect Element window it looks like a > symbol with three service) and displays their data.
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
When something is
Emulate. You may need to refresh the page to start the emulator. typed in the search box,
Features: this code will remove
lS
creen Viewport resolution adjusts the window view, setting
the boundaries to the device chosen. You can also change the
items that dont match
orientation, emulating both landscape and portrait
lS
ensors Touch Events replaces mouse clicks with emulated On the directive ng-repeat , a filter:search is
touch allowing you to test the performance of gestures specified. The filter points to a text input box
lU
ser Agent Spoofing tells Chrome you are coming from a mobile that sits above the list and acts as a search. When
device, rather than the desktop that you are developing with something is typed in the search box, this simple
piece of code will remove items from the list
The obvious downfall to this approach of emulation is that you that dont match. Before Angular this kind of
cant use the native plugins (camera, contacts and so on) available functionality required much more code, but now
within Ionic as there is no physical device. Likewise Chrome will be issignificantly easier to implement.
more powerful than the devices webview, so performance when The file js/app.js initialises the app, setting up
emulating can be misleading. For functionality and styling however, the top-level functions for the application. URLs
Chrome is extremely helpful at speeding up development of HTML5 decide which template (page) is injected in to the
hybrid apps.
Emulation The device emulation is fairly hidden this is where you will find it
Plugreg An excellent resource, linking browsing plugins to their sources
.state('app.person', {
url: "/person/:personId",
views: {
'menuContent' :{
templateUrl: "templates/person.html",
controller: 'PersonCtrl'
}}})
exclusive
pixar
tutorial
Learn to render
realistic skin using
Pixars RenderMan
Web APIs The above would cause the device to vibrate for 100
Vibration
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.
API Uses
// stop vibration
navigator.vibrate([]);
navigator.vibrate(0);
Uses
Ruth John takes a look at the latest in Some uses of the Vibration API come to mind
immediately. The most popular choice is user
along list of mobile-influenced Web APIs feedback letting users know that, yes, that button
has been pressed or that input theyve filled in isnt
Over the past couple of years, weve seen a in the correct format. Gaming also provides a big
massive influx of Web APIs influenced by mobile pull, not just in terms of user feedback, but also for
devices. Theres no mystery here: if web tech wants collapsing boulders and shooting spaceships.
tokeep up to date, its going to need similar access to The usefulness doesnt stop there. Jos Dirksen uses
device features that you get with native technologies. it alongside Web Sockets to send Morse code signals
Enter the Vibration API. (netm.ag/morse-260), and Terence Eden has had some
funfaking incoming calls (netm.ag/calls-260). Ilike
Current support the idea of bringing music into the equation, asa way
The current W3C specification went into Candidate of picking up on playing music (see my demo here:
Recommendation status on 9 September. It is already netm.ag/dance-260), but also generating it, as with
supported in Gecko and the latest versions of Android The Lab at O2s haptic library (netm.ag/haptic-260).
and Blackberry browsers, and recently landed in The wonderful Christian Heilmann has even coded
Chrome and Opera. However, there is still no support a fun polyfill for laptop and desktop users. All you
for mobile or desktop versions of IE or Safari. need to do is include his code (netm.ag/buzz-260)
Its a good idea to test for support within your code: in your build and it adds a shake to your page every
time the Vibration API is called. Clever stuff.
if ( vibrate in navigator ) { Hopefully this API will start to become more
// vibration is supported widespread soon. Its great to explore functionality
} else { 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
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 To install the Yeoman project template generator,
creating games for internet browsers, and open a new terminal window and type the following
overthe past 12 months Phaser (phaser.io) has gone (remember to prefix with sudo if youre on Mac):
from strength to strength. This game framework
provides a friendly and intuitive ecosystem for game npm install g yo generator-phaser-official
development and also leverages the excellent Pixi.js
(netm.ag/pixi-260) for outstanding Canvas and The first thing we need to do is to create and compile
Game WebGL-rendering performance. a project to test everything. Create a new folder for
your game and cd to it in your current terminal
The Wizard is a retro
styled rogue-like game Getting started directory, then type:
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 yo phaser-official
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 Yeoman will ask you for the answers to few questions
netm.ag/wizard-260 project template for game development this will while creating the template: the game name (weve
save a lot of repetition when creating games. used netmag-phaser), the version of Phaser you
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:
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.
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);
Getting started
this.title = this.game.add.sprite(0, 0, menu);
Main state Here is the games main state. The aim is to squash as many
creatures as possible
player by its centre point (horizontally) and not its avelocity to x-y and leave Phasers physics system Right The final game state
top left point. to handle the rest. Our player can now move around is the Gameover state.
We have switched out the
We add the player to the physics system by using while jumping. graphics and added a score
game.physics.arcade.enable() and setting the players At line 83 there is an example of how we update
body to collide with the boundary. At this stage the aPhaser text field. We simply use setText() and
player will react to gravity, and collide with the floor. the text content we want to render. It will use the
Lines 24 to 32 create an array of enemies using existing text style properties we instantiated it with.
the same method as above. There are a few extra An example of how to test for collisions between
properties we create on each enemy that are used in two sprites (not a physics-based collision) is to use
their jumping functionality. This sets an intensity the Phaser.Rectangle.intersects method() , as per line 113.
for their jump height and a delay between each jump. Wepass it two sprites.bounds() and it will return a true
The logic for jumping is in the Statesupdate() method. or false , based on if they are colliding or not. If the
collision returns false , it hides the enemy until the
false then the player is in the air, and we give the thatwill help you create some fantastic games.
A b o u t t he a u t h o r
Ian Ca rrico
w: iamcarrico.com
t: @iamcarrico
job: Webchef, sass
FourKitchens
Sass development
childhood nickname?
a: Nutboy, because I
ateNutter Butters like
itwas my job
frontend development 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
For users that have not used Homebrew before, section below, and jump to Ruby versions.
open the terminal and run this line of code to install
the package manager: Install rbenv
To install rbenv, run the following on OS X:
$ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/
homebrew/go/install)" $ brew install rbenv ruby-build
$ echo eval "$(rbenv init -)"' >> ~/.bash_profile
Once youve installed Homebrew, you will be able
to run the command brew on the command line. Open up a new terminal window rbenv should now
Toensure you are ready to move forward, run brew be installed to your system. Now we need to install
doctor , which will check to ensure Homebrew the version of Ruby that we want to use globally,
installation is ready to use. If there are any errors, which at the time of writing is 2.0.0p451.
Homebrew also provides instructions on how to fix
the installation. $ rbenv install 2.0.0-p451
If you already have Homebrew installed, $ rbenv rehash
additionally run brew update , which will make $ rbenv global 2.0.0-p451
The first line will download and install the right Bundler
version of Ruby onto your system. The second line Sass, Compass and the many Compass extensions
rehashes rbenvs knowledge of what versions you are distributed using RubyGems. As each gem can
have installed, and should be run after installing exhibit pretty big changes in-between versions,
anyversion. The last line will set the global Ruby wewant to document the versions needed in code
version to be the version we just installed. as well. We do this through Bundler (bundler.io),
By default, rbenv will download and install Ruby ourfriendly Gem version manager for Ruby.
versions into ~/.rbenv/versions . If you ever want to Installation is easy, just run:
uninstall a version of Ruby, just delete the version
folder from ~/.rbenv/versions . So, the command youd $ gem install bundler
need to use to uninstall the version we just installed
would be: Gemfiles
The two files that Bundler uses to make sure the
$ rm -rf ~/.rbenv/versions/2.0.0-p451 versions of gems are accurate are Gemfile and Gemfile.
lock . We can create the former with the versions of
Ruby versions gems we want to use, the latter is made by Bundler
No matter which program you are using to manage with the exact versions of each gem we are using.
your Ruby versions, they can all respect the file Both must be committed to version control, so that
named .ruby-version in your projects folder. This every developer installs and uses the exact same
is aone-line file that will document the version of Ruby gems.
Ruby we started this project with.
With rbenv, you can create this file by:
Speed up your workflow
$ rbenv local 2.0.0-p451
with a task runner ...
You can also create it by running: Gulp.js helps automate
$ echo "2.0.0-p451" > .ruby-version common tasks
Always commit the .ruby-version file to your version Each project can have different Gemfiles, as tools
Homebrew This allows for control. Then anybody else working on the project, update and change continually. As a starting point,
package installation on OS
X, and can be used to install
as long as they have RVM, rbenv or chruby installed, here is an example of a Gemfile with the most
a variety of tools will always be using the same version of Ruby. 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.
Focus on
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:
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.
Next, within your project directory, create a According to the Sass official documentation, to use Sass you must
package.json file and install the required npm pay Hampton Catlin a compliment and get Natalie Weizenbaum
packages by running: some candy. Technically not required, but at least paythem a follow
on Twitter.
$ npm init
$ npm install --save-dev gulp compass-options gulp- Awesome Compass extensions
compass I use each of these tools personally on almost every project I do.
Gulp uses the file gulpfile.js within your project Breakpoint (breakpoint-sass.com)
directory to create and manage tasks. Below is an Creating simple media queries
simple gulpfile that will compile your Sass for you, S
ingularity (singularity.gs)
using Compass. Grids without limits
To run the command, just copy the code into Toolkit (github.com/Team-Sass/toolkit)
your gulpfile.js, and run gulp sass . At github.com/ The Swiss Army Knife of responsive web design
iamcarrico/netmag-code there is a more complex Color Schemer (github.com/Team-Sass/color-schemer)
example gulpfile with many more tasks you can run. A robust colour toolset
Navigator (github.com/Team-Sass/navigator)
var gulp = require('gulp'); A Ruby testing framework for Sass
var compass = require('gulp-compass'),
paths = require('compass-options').dirs(); Where else can I find information?
There are many folks writing excellent tutorials and blog posts on
gulp.task('sass', function() { Sass every day. Check out the Sass community page (sass-lang.
return gulp.src(paths.sass + '/**/*.scss') com/community) for the latest in Sass writings. Also, I cannot
.pipe(compass({ recommend enough Dale Sandes book Sass in the Real World,
config_file: './config.rb', available on GitBook (netm.ag/realworld-260).
css: paths.css,
sass: paths.sass Get involved
})) There are many Sass meetups across the world. Find the one that
.pipe(gulp.dest(paths.css)); 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
Thats it! (sassconf.com) or Camp Sass (campsass.com) to really dive deep
That wasnt so hard was it? A little bit of within the community.
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.
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 the time so who knows who the final winner will be?
smartphone operating systems iOS and Actually, I do the answer is disabled users. Whilst
Android have been vying for supremacy in the these in-built AI agents are hard at work making
battle to have the best and quickest intelligent life easier for all smartphone users, the disabled
personal assistant. We all know about Siri, the perky community is benefitting from the escalating efforts
AI that comes on all new iDevices, who is extremely of the tech giants more than any other.
helpful when she works and extremely frustrating
when she doesnt. Youve probably heard of Google Saving valuable time
Now too, which is the equivalent on Android phones. Its to do with those valuable seconds that these AIs
Now theres a new kid on the block: Cortana (netm. save us, because for disabled users such as myself
ag/cortana-260) for Windows Phone. And shes (Im blind) what Siri can do in five seconds might
already holding her own against the incumbents take me five minutes, or sometimes 10. In many
helped along by a series of hard-hitting Microsoft cases I might not be able to manage to find what Im
ads that pit Cortana against Siri (netm.ag/mirror-260). looking for at all because the websites Im using are
inaccessible to my screen-reading software.
A showdown A similarly slow and painful experience is had
Both Siri and Cortana are able to tell you Winston by many who cant use a mouse. Try using your site
Churchills birthday, provide turn-by-turn directions from the keyboard and youll soon see what I mean
to your nearest pizza place, and bring up pictures of itll either not work at all or itll take you entire
pigmy marmosets (officially the cutest monkeys in minutes to get where you want to go.
the world). However, a painstaking perusal of the So for the blind, the motor-impaired, those with
various phone face-offs online have thrown up some learning disabilities or dyslexia, those older users
interesting results. Here, for example, is a video of a who love the KISS principle, for positively millions of
recent tussle between Siri and Cortana, managed by impaired smartphone users out there, this battle has
Mashable, which sums up the current key differences benefits far beyond the modest boost in convenience
between the AIs: netm.ag/mashable-260. experienced by the average user. And even the
Mashable favours Cortana in its video showdown, contenders themselves have no idea just how far
but the contestants are becoming faster and fitter all thisthing will go.
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