Web Designer (2015)

EX
PE P
RT AG
TUES
TOOF
RI
A
LS
32
FREE 55
HTML5
CSS3
jQuery
MINS OF
HTML VIDEOS
www.webdesignermag.co.uk
WordPress
FOUNDATION 6 EXCLUSIVE
BEHIND THE
SCENES WITH DPDK
BUILD
RICH 3D
DIGITAL GENIUSES REVEAL

THEIR TRADE SECRETS
UNLEASH THE HTML5 3D

LIBRARY PLAYCANVAS
SAY HELLO TO
JS PROMISES
UNIQUE UI
INTERACTION
MANAGE ASYNCHRONOUS
OPERATIONS THE EASY WAY
NAVIGATE WITH DEVICE

ORIENTATION
THE TEAM BEHIND THE BUILD REVEAL HOW TO CREATE FOR ALL SCREENS
GITHUB
HOSTING
VR AND
THE WEB
GET YOUR SITES ONLINE

FREE WITH GITHUB PAGES
THE NEW RULES & TOOLS FOR THE

NEXT GENERATION OF WEB DESIGN
WHY YOU NEED

MODERNIZR 3
INTERACTIVE
PRELOADERS
IMPRESS USERS WITH
HTML AND CSS
COMPLETE BROWSER SUPPORT

WITH THE LATEST VERSION
ISSUE 243
<meta>
welcome
Welcome
to the sue
THE WEB DESIGNER MISSION
To be the most accessible and
inspiring voice for the industry,
offering cutting-edge features
and techniques vital to
building future-proof
online content
Highlight
We love to
translate a story into
an idea, and then
translate the idea to
an engaging user
experience
Steve
Jenkins
The team at DPDK refuse to be

pigeon-holed. Page 32
A new foundation for responsive design
ention responsive design and not far

behind will be the mention of
frameworks. At the forefront of RD
frameworks sits ZURBs Foundation. A
powerful and creative platform it is hard
to ignore. And, the latest version, 6,
simply reinforces that message.
Web Designer has teamed up with the
good people at ZURB to get an insight to what
Foundation 6 is set to bring designers and
developers. Creating for all screens is now going
to be quicker, more efficient and more powerful
thanks to a host of new features. These include a
lightweight library, flexible Sass, a new desktop
companion app, collaboration on prototypes, flexible

navigation patterns, premade components, built-in
animation, all alongside a tutorial on building JS plugins.
Looking into the future, virtual reality is going to have a
big say in how the web evolves. Discover the new rules,
new tools and platforms that will be building the next
generation of the web. Plus, we have an exclusive
interview with the people on the Mozilla VR team. Make
sure that you read this.
We take a look at how to get total browser support
quicker and easier with the help of Modernizr 3. Lead
developer Patrick Kettner guides you through the maze.
We look at the HTML5 3D library PlayCanvas, JS Promises
and the Stripe API. Enjoy the issue.
A lean site will

lead to a faster site
which in turn will
allow for more
success
Follow us on Twitter for all the news & conversation

@WebDesignerMag
Visit our blog for opinion, freebies & more
FREE exclusive with this issue
83
Designer resources
Video Tuition 55 Minutes of expert web design video guides from
Web Mentor
Assets
75 Ultrafaded light leak effects
5 HTML5/Responsive web templates
Fonts
Rakesly and Walken from Typodermic fonts
www.filesilo.co.uk/webdesigner
meta _________________________________________________________________________ 3
<meta>
contributors
This issues panel of experts
Imagine Publishing Ltd

Richmond House, 33 Richmond Hill
Bournemouth, Dorset, BH2 6EZ
+44 (0)1202 586200
Web: www.imagine-publishing.co.uk
www.greatdigitalmags.com
Magazine team
Editor Steven Jenkins
steve.jenkins@imagine-publishing.co.uk
01202 586233
Welcome to that
bit of the mag
where we learn
more about the
featured writers
and contributors
Senior Designer Benjamin Stanley

Production Editor Carrie Mok
Photographer James Sheppard
Senior Art Editor Will Shum
Editor In Chief Amy Squibb
Publishing Director Aaron Asadi
Head of Design Ross Andrews
Contributors
James Rosewell, Alex Berg, Mark Billen, David Howell, ZURB, Tam
Hanna, Mark Shufflebottom, Richard Lamb, Ralph Saunders,
Jerad Bitner, James Deeley, Josh Carpenter, Patrick Kettner, Sean
Tracey, Ross Hamilton, Alex Hoskins, Steve Holmes, Jen Neal
Advertising
Digital or printed media packs are available on request.
The biggest and

most noticeable
difference for
Foundation 6 is that its
ZURB
now half the filesize of
The team behind the latest incarnation of the powerful front-end
Foundation 5.
framework have got together to tell you how to build with Foundation 6.
Weighing in at 60KB Discover the new features and an exclusive tutorial from the team on how
to build your a Foundation JS plugin. Enjoy. Page 38
CSS & 84KB JS
Jerad Bitner
Jerad Bitner is a technical
project manager for
Lullabot by day. He is a VR
enthusiast working with
JanusML, Node.js, and other
JS technologies. In this issue
he explores VR and what
lies ahead for the web.
Page 64
Head of Sales Hang Deretz

01202 586442
hang.deretz@imagine-publishing.co.uk
Sales Executive Luke Biddiscombe
01202 586431
FileSilo.co.uk
Assets and resource files for this magazine can
be found on this website.
Register now to unlock thousands of useful files.
Support filesilohelp@imagine-publishing.co.uk
International
Web Designer is available for licensing. Contact the
International department to discuss opportunities.
Head of International Licensing Cathy Blackman
+44 (0) 1202 586401
licensing@imagine-publishing.co.uk
Subscriptions
Patrick Kettner
Patrick is a web developer
who lives in Seattle with his
partner Katrina. He works as
a program manager on
Microsoft Edge, and as the
lead Modernizr developer, he
shows us whats new in
version 3 and tells you why
you need it. Page 72
Mark Shufflebottom
Mark is a professor of
Interaction Design at
Sheridan College. This issue
Mark continues his
augmented 3D UI tutorial
that uses mobile device
orientation and shows how
to add interaction to the 3D
space. Page 52
subscriptions@imagine-publishing.co.uk
To order a subscription to Web Designer:
0844 848 8413 +44 1795 592 878
Email: webdesigner@servicehelpline.co.uk
13-issue subscription (UK) 62.30
13-issue subscription (Europe) 70
13-issue subscription (ROW) 80
Circulation
Head of Circulation Darren Pearce
01202 586200
Production
Production Director Jane Hawkins
01202 586200
Finance
Finance Director Marco Peroni
Founder
Group Managing Director Damian Butt
Printing & Distribution
Printed by Southernprint Ltd, 17-21 Factory Road

Upton Industrial Estate, Poole, Dorset, BH16 5SN
David Howell
David is an experienced
writer, author and journalist
who runs his own
publishing company Nexus
Publishing. This issue he
takes his interview skills to
the offices of digital gurus
and creatives DPDK. See
what he finds out. Page 32
Tam Hanna
Tam Hanna started off his
career programming in C
and C++. Due to that, he can
understand the pain caused
by duck typing and
prototypical inheritance.
This issue he shows how to
get free web hosting via
GitHub Pages. Page 46
Sean Tracey
Sean is a technologist
currently playing with
technology for a
London-based newspaper.
This issue he takes a closer
look at the Stripe API and
demonstrtes how to integrate
secure credit card payments
into your sites. Page 78
Ralph Saunders
Ralph is a seasoned
front-end developer
working at Redweb and
coach at codebar.io. In this
issue he explores
PlayCanvas, the 3D HTML5
game engine and shows
how to build rich 3D
experiences. Page 58
4 __________________________________________________________________________meta
Mark Billen
Mark is a freelance
technology journalist with a
background in web design
and development. This
issue he tackles the
Lightbox pages and reveals
how to create a host of
quick-fire techniques you
need to know. Page 14
Got
web skills?
Were always looking for the

hottest web-design talent. Email
webdesigner@imagine-publishing.co.uk
with examples of your creative work
Distributed in the UK, Eire & the Rest of the World by

Marketforce, 5 Churchill Place, Canary Wharf,
London E14 5HU
0203 787 9060
www.marketforce.co.uk
Distributed in Australia by Network Services (a division of
Bauer Media Group), Level 21 Civic Tower, 66-68 Goulburn
Street, Sydney, New South Wales 2000, Australia,
+61 2 8667 5288
Disclaimer
The publisher cannot accept responsibility for any unsolicited material
lost or damaged in the post. All text and layout is the copyright of
Imagine Publishing Ltd. Nothing in this magazine may be reproduced
in whole or part without the written permission of the publisher.
All copyrights are recognised and used specifically for the purpose
of criticism and review. Although the magazine has endeavoured
to ensure all information is correct at time of print, prices and
availability may change. This magazine is fully independent and
not affiliated in any way with the companies mentioned herein.
If you submit material to Imagine Publishing via post, email, social
network or any other means, you automatically grant Imagine Publishing
an irrevocable, perpetual, royalty-free license to use the materials across
its entire portfolio, in print, online and digital, and to deliver the images
to existing and future clients, including but not limited to international
licensees for reproduction in international, licensed editions of Imagine
products. Any material you submit is sent at your risk and, although every
care is taken, neither Imagine Publishing nor its employees, agents or
subcontractors shall be liable for the loss or damage.
Imagine Publishing Ltd 2015

ISSN 1745-3534
DOMAINS | MAIL | HOSTING | eSHOPS | SERVERS
1&1 CLOUD SERVER
TEST THE
TOP PERFORMER
Easy to use
ready to go
The 1&1 Cloud Server offers unbeatable
performance in terms of CPUs, RAM
and SSD storage! Implement your
cloud projects with the perfect
combination of exibility and
powerful features.
Load balancing
SSD storage
Billing by the minute
Intel Xeon Processor
E5-2660 v2 and E5-2683 v3
1 month free!
Then from 4.99 per month*
TRIAL
TRY FOR
30 DAYS
CLICK
UPGRADE OR
DOWNGRADE
CALL
SPEAK TO
AN EXPERT
0333 336 5509

* 1&1 Cloud Server 1 month free trial, then from 4.99 per month. No minimum contract period. Prices exclude 20% VAT. Visit 1and1.co.uk for full offer details,
terms and conditions. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. and/or other countries.
1&1 Internet Limited, Discovery House, 154 Southgate Street, Gloucester, GL1 2EX.
1and1.co.uk
<meta>
insid
ontents
Cutting-edge features, techniques and inspiration for web creatives

Chat with the team and other readers and discuss the latest tech, trends and techniques. Heres how to stay in touch
Quick look
08 Whats happening with
Microsoft Edge?
@WebDesignerMag
Cover focus
The software giant has given its new browser an

update. But how does it compare with its
competitors? Web Designer investigates.
10
Webkit: The best must-try

resources out there
Discover the libraries and frameworks that
will make your site a better place to visit
12
Hold the hamburger

Alex Berg director of strategy at Fell Swoop
analyses the success of the hamburger menu
and questions whether we should be using it
14
Lightbox
A showcase of inspirational sites and the
techniques used to create them
26 belVita Bites: Behind the

breakfast biscuit
Resn and Droga5 team up to create 15 wacky
minigames to promote the biscuit that offers
four hours of early morning energy
32
38
Inventing tomorrow
Web Designer talks to DPDK, a collection of
creative thinkers who refuse to be pigeon-holed.
They tell us what its like to be them
38 Responsive Design Recoded

The team behind the build of the new front-end
framework Foundation 6 give away their secrets
on how to build for all screens
64 VR + The Web
Discover the new rules, tools and platforms that
you are going to need to build the next
generation of the web
72
Whats new with Modernizr 3?

Jam-packed with new features and
improvements. Find out why you need it
90 Hosting listings
An extensive list of web hosting companies.
Pick the perfect host for your needs
98 Next month
Whats in the next issue of Web Designer?
6 __________________________________________________________________________meta
32
ProFile: DPDK
A studio standing at the epicentre of design and tech
18
Lightbox: PeanutizeMe
If you love Snoopy youll love this site
FileSilo
7JTJU UIF WEB DESIGNER POMJOF TIPQ BU
A comprehensive collection
of free designer resources!
GPS CBDL JTTVFT CPPLB[JOFT BOE %7%T
94 Get the latest must-have resources and videos
q.JOTPG)5.-WJEFPHVJEFT
q6MUSBGBEFEMJHIUMFBLFGGFDUT
q)5.-3FTQPOTJWFUFNQMBUFT
q3BLFTMZBOE8BMLFOGPOUT
<tutorials>
Web gurus take you step-by-step

through professional techniques
94
46
Free GitHub hosting

Set up free web space to show off your repositories with
the help of GitHub Pages
52
Code a mobile 3D UI - part 2

In the second part of this unique browsing experience
tutorial find out how to add interactivity
58
Build rich 3D experiences

Learn how to use the HTML5 3D library PlayCanvas to
create new dimensions without the heavy code lifting
Never
miss an issue
Subscribe
64
The new rules and platforms for building the next generation of the web
<header>
Turn to page 62 now

USA readers turn to
page 83 for an
exclusive offer
50
web workshop
Code a draggable fading effect
tuckeffect.com
Add interest and interaction to homescreens
The tools and trends to

inspire your web projects
56
08 New improved MS Edge

The Microsoft browser gets improved
Create scrolling text with colour

change
deuxhuithuit.com
How to add a two-tone animated effect to text
HTML5 and JavaScript support. But, how

does it compare with other browsers and do
users care? Web Designer takes a closer
web developer
look at whats happening
10
Webkit: The best must-try

resources out there
72
How to get total browser support with a host of new

features and improvements
Need a new framework or library? Then

this is where you need to start
78
12
Comment:
"MFY #FSH
accepted for menus on smaller screens.
5IFSFBSFTUJMMTPNF
VTFSTXIPEPOULOPX
XIBU UIFJDPONFBOT
But how effective is it?
Alex Berg
The hamburger icon has become the
Whats new with Modernizr 3?

Integrate payments with Stripe
Discover how to utilise the API to add secure credit and
debit card payments to your projects
84
Say hello to JS Promises

Learn how to manage asynchronous operations
the easy way
meta _________________________________________________________________________ 7
News
CONTACT US AT: webdesigner@imagine-publishing.co.uk | @WebDesignerMag
Header
The tools, trends and news to

inspire your web projects.
Whats happening
with Microsoft Edge?
With new updates to its browser will designers and developers
rethink their opinion. Web Designer investigates
hen it comes to web

browsers there is only
one that sits at the top
of the tree, Google
Chrome. Look back to the beginning of
2009: it had a measly one per cent of the
market while Microsofts Internet Explorer
was streets in front with nearly 70 per cent of
the market worldwide. Regionally, it was even
more popular in the US getting closer to 80
per cent.
Back to the present day and Chrome is the
king while Microsofts browser has fallen a
long way from grace. Microsofts answer was
to finally say goodbye to Internet Explorer
and reinvent itself as Edge. Would this be the
browser to relive the glory days? We will leave
that for you to decide for yourself.
Microsofts share of the browser market is
still on a downward spiral but Edge has been
given a boost with a host of new additions. An
update to Windows 10 sees improvements
across all aspects of the platform including
Edges rendering engine EdgeHTML 13. So
what has been added? A number of CSS

pseudo-classes, the a[download] attribute,
user inputs, various graphics updates and the
inclusion of Web Components. Highlights
include the a[download] attribute. Its official
description is as follows, When used on an
<a>, this attribute signifies that the resource it
points to should be downloaded by the
browser rather than navigating to it. The
HTML meter element which allows
representation of a scalar measurement of a
known range, or fractional value: is now
supported. Responsive images are getting a
lift in Edge with extended support for <srcset>
and sizes and the <picture> element. On the
communication front there is the Object RTC
API. This enables mobile endpoints to talk to
servers and web browsers with Real-Time
Communications (ORTC) capabilities via
native and simple JavaScript APIs. There is
also support for the <template> element use
in Web Components. This is the first of the
four major components to be supported by
the Edge browser.
Responsive images are getting

a lift in Edge with extended
support for <srcset>
To get a closer look at what Edge is

supporting, considering, in development and
not planning to support head to bit.
ly/1HmqlkM for more information.
A good indication of HTML5 support in a
browser can be found at HTML5test
(html5test.com). How well is Edge13 doing?
With a score of 453 out of 555 it still has a long
way to go to offer enough support to make
designers and developers make the switch
from Googles Chrome. However, it is an
impressive improvement on its predecessors.
Edge is hitting a score of 402 while Internet
Explorer 11 is hitting a very unimpressive 336.
How does this compare with the other major
browsers out there? See the boxout below.
HTML5 support is not the only element of
any good browser, JavaScript support is
critical. The JavaScript engine powering
Microsoft Edge, Chakra, has seen some major
improvements including asm.js which is now
enabled by default. Check out the Kangax
ES6 compatibility table (kangax.github.io/
compat-table/es6/) to see how it compares
with its competitors. You may be surprised.
The big question is will designers and
developers switch back? We ran a poll on
Twitter asking MICROSOFT EDGE: Are you
using it? Only 14 per cent said Yes. Perhaps
now might be the time to take a look again.
How does Edge compare with other browsers?

What level of HTML5 support does Microsofts browser currently offer? Is it better than
Google, Firefox or Opera? Here we compare browser scores
453
Chrome 44
Opera 31
Firefox 40
Note: all scores out of 555 / source: HTML5test.com
8 _______________________________________________________________________header
Edge 13
Safari 9.0
Get Web
Designer
digital
editions
Get your hands
on a collection of
top Angular tips
and techniques
Web Designers latest digital
addition to our burgeoning
collection is Advanced Angular.
The AngularJS library has quickly
become a fundamental part of a
developers arsenal and on offer
from us here is a host of
must-know tips and techniques to
get the most out of it.
Dont forget The Art of
Responsive Design and The Web
Apps Handbook. Youll be able to
get an insight into how to build
apps with HTML, CSS and
JavaScript as well as learn about
how to create using the most
popular libraries out there,
including PhoneGap.
Plus, check out Web Design
Superstars, 225 Best Web Tools
and Resources and Amazing
Websites and How to Build them
Vol 02. But how can you get your
hands on a Web Designer digital
edition, you ask? Simply head to
bit.ly/1hsGYgl and youll be able
to download the free Web
Designer app. After that you will
find these digital editions waiting
f
i
h
Header
Inspiration
Sites of the month
02.
01.
03.
04.
01. Si Le Soleil
silesoleil.com
02. Hoover-Mason
hoovermason.com
03. Holm Marcher & Co

holmmarcher.dk/en
04. Olmo
olmo.it/en
Graphics
Colour picker
Typesetter
Themematic
on.be.net/1MkaZMw
bit.ly/1SAmyAV
bit.ly/1Xcahcy
bit.ly/1NAW2Uj
A classic collection with must-see additions.
A crisp, clean theme with swathes of brilliant
Create Great
Biondina 4
The very talented Ana Gomez Bernaus
Gill Sans Nova
created this gorgeous commissioned

collection of street-inspired art.
White/Black
white space. Sans serif fonts and subtle

#372022
background tones complete the look.
#664039
Weissenhof Grotesk
#905749
bit.ly/1HW3reM
A geometric sans serif with curved corners.
#B17351
#D2A866
Header
Resources
CONTACT US AT: webdesigner@imagine-publishing.co.uk | @WebDesignerMag
webkit
Discover the must-try resources that

will make your site a better place
Viewer
fengyuanchen.github.io/viewer/
A jQuery image viewer plugin that offers
a wealth of easy-to-apply options. The
plugin can be seen in action via the main
page. Switch between Modal and Inline
mode and modify your options. By
default all are selected, these include
navbar, rotatable, fullscreen and
keyboard. Check out the docs on GitHub
for what they do and how to apply them.
Concise Framework
GooCreate
Scrollify
concisecss.com
goocreate.com
A CSS framework built with Sass, none of

the usual bloat and a small learning
curve. Its a basic framework that offers
the option to add as you build.
Do you want to create WebGL 3D scenes

without having to learn complicated
coding? Well take a look at this inbrowser creation tool.
projects.lukehaas.me/
scrollify/#home
Need to add extra power to your
scrolling? This jQuery plugin is simple to
set up and offers a host of options.
TOP 5 PHP development frameworks
The best tools for building your applications
Laravel
Symfony
Phalcon
CakePHP
Yii
laravel.com
Tagged as the framework for
web artisans Laravel is a
modern framework with a
modern toolkit.
symfony.com
Symfony uses a set of reusable
components that allows the
user to select the components
they want.
phalconphp.com
A full-stack PHP framework. It
uses an innovative architecture
to make it the fastest PHP
framework ever built.
cakephp.org
Rapidly build prototypes
without the need to configure
XMLs or YAMLs. Set up your
database and start building.
yiiframework.com
A high-performance framework
that creates base code to go
with your database. Customise
the code to fit your needs.
10 _____________________________________________________________________header
Header
Comment
Device detection
comes of age
Does advanced device detection and responsive design improve UX and profitability?
James Rosewell
51degrees.com
Founder and CEO, 51Degrees
he days of desktop dominance in web

browsing are gone; mobile is swiftly
becoming the dominant browsing
platform Amazon.com is a prime
example. SimilarWebs engagement data suggests that
visits to the site from mobile and desktop are now
almost equal. This shift brings a new level of complexity
to website optimisation.
Whilst most websites recognise this change, few are
able to fully optimise for the full range of devices and
browsers now hitting websites: desktops, smartphones,
tablets, e-readers and smart TVs. Historically responsive
web design (RWD) was seen as the solution to this
issue. RWD enables a website to dynamically change its
appearance for different devices. However RWD is
limited. It often simply means the addition or reduction
of columns on a page and in some cases RWD will
remove a proportion of content because it takes up too
much space without considering the consequences.
Proponents of RWD believe that the same navigation
and content should be used irrespective of the type of
device. However RWD does not consider the
consequences of changing a multi-column newspaper
site (for example) into a single column site for
smartphones: the page becomes very long and user
experience suffers. For example, on a smartphone The
Wall Street Journal homepage is more than three
metres long. This level of content compacted into a
smartphone-friendly screen size results in the need for
continuous scrolling a negative user experience.
RWD also has an impact on sites that rely on
advertising. RWD can cause adverts to be resized into
non-existence or laid out on the page in a manner that
disrupts browsing experience, so users may choose to
avoid a website on the grounds of unnavigable intrusive
advertising. A particular issue for eCommerce sites is
that RWD does not support personalisation by device
type. People have a propensity to make lower value
purchases on smartphones, and more costly and
considered purchases on a larger screen, yet RWD will
deliver the same content to both.
RWD has its place in web design and development
workflow. However, as smartphones and tablet devices
become smarter with advanced intuitive browsing
features, simply resizing content is no longer enough.
Device detection is
an important facet of
personalisation
A solution that remains as one of the most

misunderstood techniques in web optimisation is device
detection. Rudimentary device detection solutions
designed in the last decade have led to disappointment
with device detection. But it need not be that way.
Device detection empowers a webpage to understand a
great deal of information about the device that is visiting
the site prior to making a decision about the content to
send to it. This could include information on browser

type and capability, processing power of the device
and screen resolution to name but three of thousands
of categories. Device detection is an important facet of
personalisation but does not require a user to register
or share personal preferences. Armed with this
information websites can send content that is not only
optimised for detailed device specifications but also
contextualises the likely environment of the user,
delivering a better user experience.
Common benefits of device detection include the
placement of advertising based on device
characteristics such as touch-screen functionality and
physical screen size. Advertising can be personalised,
non-intrusive but clearly visible and optimised on the
page in turn generating increased revenue.
This is the approach that was recently adopted by
Wiggle.com, the UKs number one online cycle shop.
Following analysis it concluded that people were more
likely to buy smaller ticket-priced items on a mobile
phone whilst considered purchases, such as expensive
bicycles, would still be made on the desktop. With the
help of device detection, Wiggle now adapts the layout
of its website for smartphones and tablets to optimise
the experience for each different device type visiting
the website. As a result it is delivering tailored content
to its web visitors on whatever device they use to visit
the site. Device detection can also aid web analytics. By
adding detailed device specifics to high volume
websites, certain correlations can be spotted between
devices and user abandonment. This may highlight
issues with excessive video buffering; leading to
website drop-offs associated with particular devices.
Device detection can flag issues with development
and design that may not have otherwise been visible.
For websites to be more profitable, context is critical.
Some basic analytics will demonstrate different user
behaviours on different devices. Device detection can
then optimise websites to take advantage of this. As
smartphones and tablets become the primary
platforms for browsing, being able to differentiate
amongst different device types, brands and specific
characteristics enables a website to deliver a unique
and relevant experience to every visitor and one that
will drive improved user experience and profitability.
header_______________________________________________________________________11
Header
Opinion
Hold the hamburger

Do people really know how to use the hamburger icon? Alex Berg takes a closer look
Alex Berg
he hamburger menu, once the darling

of the UX community, has recently come
under fire. Its initial allure was
understandable. In an increasingly mobile
world, the hamburger icon presented a handy solution
to shrinking screen sizes. Within a short period of time,
it became common to see the hamburger menu
implemented on lots of different sites. But, guess who
got lost in the shuffle? The customer.
First, despite widespread usage, there are still some
users who dont know what the icon actually means.
Second, while most users know to look to the icon for
their needs, the less directed customer needs to be
persuaded, even wooed. Third, and finally internet users
are a lethal mix of lazy and impatient. Test after test has
shown the more data you ask for from customers, the
lower your corresponding completion rates are.
Of late several blog posts from authorities on UX
have called out our industry-wide delusion. After
12______________________________________________________________________header
Director of Strategy & Analytics

reading a few of these damning posts, we decided to
conduct an a/b test to supplement our user testing. We
limited the audience to just desktop users. Our control
would get the current experience with the hamburger
menu, while our test group would receive the navigation
options expanded by default. This was just a head-to-head
test pitting the hamburger icon vs. a revealed state-listed
menu on the same plane.
We set up our test using Optimizely, an optimisation and
testing platform. Optimizely offers an engagement goal,
which can sum up the total session clicks in the control vs.
our experiment.
Our challenge was one of traffic. The exposed navigation
outperformed the hamburger menu in both total clicks, as
well as the more broadly defined engagement goal.
With the exposed option, navigation clicks were up 47
per cent and overall engagement 16 per cent. Of note, it
took fewer than 750 visitors to prove this out, an indication
the outcome was arguably so obvious we shouldnt have
fellswoop.com
bothered with the test in the first place.
The test exceeded Optimizelys default threshold for
relevance (90 per cent) and hit 99 per cent plus.
Engagement was up with a 16 per cent improvement.
So, does this mean the hamburger menu is dead? I
doubt it. Like it or not, the hamburger icon solves a very
real problem. And, it typically usability tests pretty well
as most users understand its meaning. However, that
doesnt mean it will necessarily perform as well in the
wild, as, at least in our test, exposed options are simply
more compelling than hidden ones.
Our conclusion? For simple navigation schemes,
exposing part of your navigation is a good idea.
However, for sites with more complex navigation,
extracting two to three categories might not work. In
these cases, we recommend at least supplementing the
hamburger icon with a menu label for extra clarity and,
of course, testing with your target customers. Every
audience is different.
Our revolutionary NEW

Web Hosting platform
100%
guaranteed
UP TIME
100% guaranteed
uptime!
Smart SSD storage

& intelligent load
balancing
Dedicated SSL
certicates
Web Hosting from:
1.99
per month ex VAT charged at 20%
Call 0333 0142 708

or visit fasthosts.co.uk/hosting
SERVERS WEB HOSTING DOMAIN NAMES EXCHANGE EMAIL
LightBox
Chapter 3
chpt3.com
Designer - SOON_ thisissoon.com
Development technologies HTML5, CSS3, Bootstrap, jQuery, Angular JS, GSAP, Skrollr, Fonts.com
14____________________________________________________________________ lightbox
AngularJS powers the logic

and allows the code base to be
simple and familiar
LightBox
Chapter 3
#2C2C2D
#9E9E9E
#BE1522
#454545
#9C9C9F
Above
Above
Avenir LT styles the muted lines of small subtext dotted

below the various quotes and headings
Adobe Garamond Italic by Robert Slimbach and Claude

Garamond handles the very classy nuggets of text
lightbox ____________________________________________________________________ 15
LightBox
Chapter 3
Animate CSS properties on

scroll with Skrollr.js
Ed Opare-Aryee, front-end dev at SOON_ offers a beginner-level look at the Skrollr.js plugin
1. What is Skrollr?
Skrollr.js by Alexander Prinzhorn (prinzhorn.github.io/
skrollr) is essentially a JavaScript animation library used
widely for parallax scrolling. Most simply, it allows the CSS
properties of any page element to be manipulated
depending on the position of the horizontal scrollbar. By
defining keyframes at certain top-scroll offsets within the
element attributes themselves, you can initiate desired
effects.
</script>
</body>
</html>
3. Animation starting states

Add the starting state of your animation by selecting the
keyframe you would like your animation to begin. By
setting the elements CSS opacity value at 0 using the
data-bottom-top attribute, the CSS properties specified
in the attribute will be added to the element at the point
of the keyframe. For example, in this instance the
element will start by being invisible when it is just below
the browsers viewport.
<p data-bottom-top="opacity: 0">

My first paragraph
</p>
2. Add the skrollr library

To begin, within your HTML page add the Skrollr
JavaScript file at the end of your <body> block as shown.
This will add the Skrollr animation library to your site by
telling the document to load the file from a CDN server.
Below this, we call skrollr.init() to initalise the library.
Adding your JavaScript at the bottom in this way allows
your CSS and HTML elements to load first and will
prevent an issue called Flash Of Unstyled Content or
FOUC from occurring.
<html>
<head>
<title>Scrolling Animation Example</title>
</head>
<body>
<p>My first paragraph</p>
<script src=" "https://cdnjs.cloudflare.com/
ajax/libs/ skrollr/0.6.30/skrollr.min.js"></
script>
<script type="text/javascript">
var s = skrollr.init();
Parallax scrolling
The effect that parallax scrolling creates is still

popular. But, when using it be imaginative. Look
at examples and create something different
16____________________________________________________________________ lightbox
4. Animation ending state

Add animation end states by choosing the keyframe
where you would like the animation to end and adding
the CSS properties to be applied to the element at that
keyframe. In this case using the data-center attribute
and specifying the elements opacity as 1, the invisible
element will become visible when its in the middle of the
browser viewport. Skrollr will transition between CSS
property values, so when the element is halfway
between the bottom and centre of the screen its opacity
will be 0.5:
<p data-center="opacity: 1" databottom-top="opacity: 0">

My first paragraph
</p>
5. Specify the easing function

When specifying CSS properties in the keyframe
attributes you can also specify an easing function the
animation should use to transition between values. We
do this inside the keyframes by adding the name of the
easing function after the property within square brackets.
In this instance we can see the swing easing function
stipulated like so:
<p data-center="opacity[swing]: 1"

data-bottom-top="opacity[swing]: 0">
My first paragraph
</p>
6. Add more keyframes

Multiple keyframes can then be added to elements to
create more complex animations during scroll. The
following will make the element appear and disappear
repeatedly as the element moves up or down the page.
Check Skrollrs full documentation on GitHub (github.
com/Prinzhorn/skrollr) for more options, along with the
accompanying project files.
<p data-top="opacity: 0"

data-100-top="opacity: 1"
data-700-top="opacity: 1">
My first paragraph
</p>
LightBox
Peanutize Me
peanutizeme.com
Designer - Ludomade ludomade.com
Development technologies HTML5 <video>, CSS3, JavaScript, jQuery, RequireJS, Video.js, Typekit
18____________________________________________________________________ lightbox
It became clear at the offset

that we were going to need to
work with compressed assets
LightBox
Peanutize Me
#BEC46A
#FDA886
#EDD075
#57A4D8
Above
Above
Futura PT Web Extra Bold by ParaType styles the thick text

used throughout for headings and labels
Snoopy Regular designed by Charles Schulz and Nate

Piekos is the cartoony font used sparingly as <p> text
lightbox ____________________________________________________________________19
LightBox
Peanutize Me
Speed up asset
Compress
performance for the web with Pngyu
Ludomades frontend Developer Alex Bergin explains how crucial
image asset management and PNG compression was performed
The Pngyu application offers quick, intuitive

drag-and-drop file compression for your PNG web
assets here we examine the core features.
1. Streamline performance
3. Remove excess metadata
Drag and squash
One of the most important steps in the building of

Peanutizeme.com was asset compression. During design,
thousands of assets were produced to make the site as
robust and customisable as possible. By removing
unnecessary image metadata and carefully stepping
down to the minimum number of colours,
load times would be reduced and the performance
greatly improved.
When PNG images are saved from Photoshop, for

example, they have tons of metadata saved within the
actual image file. In many cases the metadata outweighs
the actual image in file size. For a project such as this that
level of metadata wasnt necessary so the images
needed to be stripped clean to optimise them. Images
were processed through a GitHub-hosted GUI application
called Pngyu (see technique box) used for compressing
images and the preferred program of choice here.
Pngyu is a freely available at nukesaq88.github.io/

Pngyu for Mac and Windows users. Once
downloaded, installed and launched, the app provides
a range of compression options specifically for PNG
formats. Start by dragging single or multiple files into
the list panel.
Default or Custom
2. The compression of assets
Using various methods, the design team compressed
nearly 1GB of image data down to a mere 32MB. This
reduction allowed more assets to be cached in the
browser, and in turn, facilitated the delivery of a faster and
smoother user experience. For illustration purposes an
original uncompressed skin asset is shown initially
weighing 493KB, 100 per cent of its original file size.
4. Reduce colours
At original, highest resolutions each image drew from a
palette of 256 colours. However if the image could
reference a small palette the overall size would decrease.
Complex assets like skin and jackets couldnt be reduced
beyond 128 colours without creating a harsh and uneven
gradient, shown here as a compressed 128-colour image
at 39kb (7% original size). Simpler assets, like glasses,
could reduce to 32 colours and still maintain a high
quality look and feel.
The app automatically determines the original image

information, notably the initial file size. From here you
can use the Default settings and simply press the
Compress Start button or toggle the Custom tab to
set colour palette and quality/speed sliders.
Picture perfect PNGs

Colour levels can range from 256 down to just 2, while
the High Quality or High Speed slider offers finer
tuning between image rendering and weight. You can
also toggle dithering and IE6 alpha support, alongside
viewing Preview to observe the results.
5. Visual QA Pass
Cartoon fonts
The Peanutize Me site uses its own custom

cartoon font Snoopy Regular. When using this
style of font make sure it is used sparingly.
20 __________________________________________________________________ lightbox
Colours were reduced on all assets to what was deemed

to be an acceptable palette, before being ran a thorough
visual QA pass. Ludomades internal Art Directors, the
clients and the Peanuts brand team reviewed all assets to
ensure the high standards of the beloved brand were still
met. Any asset that failed to meet the test was sent back
to the production table until it was approved.
Providing helpful, reliable, hassle free hosting for 15 years
t have to
n
do
u
yo
so
t
en
em
ag
an
m
er
rv
We do all the se
Our Managed Hosting is
Winne
ISPA Cust
omer Cho
ice
2
013 + 20
1
Aw
4 + 2015ard
UK based (support and serv

Value for money
A worry free service
Reliable and Stable
99.97% uptime since May 2007
99%
of our
customers
rate us good,
very good or
excellent
Try us today.
30 day no quibble money back guarantee.
Sign up today and get
any package using the code
LightBox
DS | Signature Art
ds-signatureart.com
Designer - DPDK dpdk.com
Development technologies HTML5, CSS3, SVG, JavaScript, GSAP, WebGL
22 ___________________________________________________________________ lightbox
Each signature is translated

into a 3D signature of art using
WebGL
LightBox
DS | Signature Art
#0D090A
#352A2E
#A60044
#A6927A
Above
Above
The highly restricted use of different versions of the

Citron font is used exclusively across DS Signature Art
Here the Citron font is presented in a lighter version, in

comparison to the Regular version on the left
lightbox ___________________________________________________________________ 23
LightBox
DS | Signature Art
Create and manage animations

using GreenSocks TimelineMax
Discover some code-based GSAP animation sequencing tips and tricks, as used by DS Signature Art
1. Set up a timeline
GreenSock Animation Platform, or GSAP, is a very
powerful and user-friendly animation library. One of its
most powerful features is Timelines. They work like
regular tweens, but give you the ability to sequence
animations. The entire intro animation of Signature Art is
controlled by a single TimelineMax instance. If you have
ever used TweenMax, TimelineMax is easy to pick up. For
docs and examples, check out greensock.com.
// create a new timeline

var tl = new TimelineMax();
// animate foo.bar to 100 over 0.5 seconds
tl.to(foo, 0.5, {bar:100});
// after that, animate foo.bar to 200 over 0.25
seconds tl.to(foo, 0.25, {bar:200});
// add 'ds-logo-out' label 10 seconds after

'ds-logo-in'
tl.add('ds-logo-out', 'ds-logo-in+=10');
3. Add callbacks to timelines

Other than tweens and labels, you can also add callbacks
to a Timeline. Callbacks are functions that will be
triggered at a particular time (or label). This way, you can
execute any code in sync with the animation sequence.
The DS Signature Art site made use of this quite
extensively for the intro animation. Callbacks control
playback of video and SVG content, as well as states of
the WebGL particle system.
// add a function to the timeline

// it will be executed on the 'title_1' label
tl.addCallback(function() {
// show the relevant container
$contentDivs[0].style['display'] =
'block';
// play the intro title svg
introTitleSVG_01.play();
}, 'title_1');
5. Setters and getters

TweenMax can animate any numeric property. JavaScript
has syntax to bind functions to a property of an object,
which are then called whenever the value is read or set.
Combining these two enables you to define custom logic
that is controlled by a number, and use TweenMax to
animate that number. This is a great way to keep the
main Timeline clutter free, while opening up a ton of new
possibilities.
// define property 'bar' on object Foo

Object.defineProperty(Foo.prototype,'bar',{
// this function is called whenever foo.bar is
set
// like foo.bar = 5
get: function() {
return this._bar;
},
// this function is called whenever foo.bar is
read
set: function(v) {
// define any custom logic here
this._bar = v;
}
});
6. Link the library!

If you are keen on delving even further into GSAPs
TweenMax and TimelineMax by following the coding
techniques covered here, you will of course need to add
the latest library to your pages first. Greensock provides
the main framework freely, while subsequent plugins will
require subscription access, so TweenMax.min.js can be
downloaded or simply linked via CDN within your
document <head> or before your closing </body> as
follows:
2. Add labels
Even though Timelines are powerful, it can still be difficult
to keep long sequences manageable as more and more
parts are added. Using labels from the get go is a good
way to combat this. Labels are strings positioned at a
particular time. Subsequent tweens can then be
positioned relative to a label. You can also position other
labels relative to a label, giving your animation sequence a
semantic structure.
// add 'ds-logo-in' label at 0.5 seconds

tl.add('ds-logo-in', 0.5);
// tween light.intensity to 1.0,starting at that
label
tl.to(light, 0.5, {intensity:1.0}, 'ds-logo-in');
// a bunch of other tweens
Animation in action
The Greensock GSAP set of tools has been used

extensively. Check out https://greensock.com/
examples-showcases to see what it can do
24___________________________________________________________________ lightbox
4. Think in proportions
Without a visual reference, tuning animation durations
from 0.3 to 0.25, and then back to up 0.35 can quickly
become a headache. Instead, work here on DS Signature
Art started with animations lasting 1.0 second, while
timing other animations proportionally. The timeScale of
the main Timeline was then used to adjust the overall
timing. This timeScale property can itself be tweened,
which is akin to adding easing to the entire sequence:
// set the time scale to half of normal speed

tl.timeScale(0.5);
// tween the timescale of the main timeline
// from 0.5 to 2.0 over 5 seconds
TweenMax.fromTo(tl, 5, {timeScale:0.5},
{timeScale:2.0});
<script src="https://cdnjs. cloudflare.com/ajax/

libs/gsap/1.18.0/ TweenMax.min.js"></script>
Discover the latest and greatest gadgets

and explore the tech inside
BRAND
NEW
FROM THE MAKERS OF
Every issue packed with

The latest tech Everything from hoverboards, drones,
wearables, sports tech, smart homes and more...
Buying advice New and cool kit and where to get it
Tech teardowns Under the skin of the latest gadgets
and more ...
CALL THE ORDER HOTLINE

0844 249 0270*
OR ORDER ONLINE
imaginesubs.co.uk/gadget
and enter code NEW15T
*Calls will cost 7p per minute plus your telephone companys access charge. Please use code NEW15T. This offer entitles new UK Direct Debit subscribers to receive their first 3 issues for 1.
After these issues standard subscription charges will apply; currently 15 every 6 issues. New subscriptions will start with the next available issue. Details of the Direct Debit Guarantee available on request.
This offer expires 31st December 2015.
BELVITA BITES:
BEHIND THE
BREAKFAST
BISCUIT
Resn and Droga5 teamed up to create 15 wacky

minigames to help kick-start mornings
tarting the day the right way will kick start the creative juices flowing faster and
quicker, and allow more time for getting rid of the ridiculous, or will it? Resn
teamed up with Droga5 New York to promote belVita Breakfast Bites in the US
market. Resn describes the site as the kind of work we love: strong creative
concept, wildly interactive, and, above all, fun.
The site offers a smorgasbord of 15 games, though Resn readily admit they
definitely (and sometimes deliberately) stretched the definition of game. As the
creative gurus at the New Zealand agency said, is throwing food onto the head of a
blond Yanni-lookalike a game? They werent so sure and thought that interactive
toy better describes the project.
Putting aside titles, Resn believes that These experiences, from blow-drying wet
dogs to protecting random objects from being stolen by a kleptomaniac eagle, were
the result of purging our unconscious minds of their repressed metaphysical
desires onto the substrate of the digital plane. Again they werent too sure about all
26_____________________________________________________________ design diary
the strangeness, but they liked it and hoped everyone else did as well. With no
knowledge of what breakfast biscuits actually were, Resn approached the project
from a four hours of energy angle as Lead Creative Showjumper, Gorgeous Gordon
reveals, The belVita #MorningWin website was released as part of Droga5s
belVitas Breakfast Bites campaign. Droga5 approached Resn to collaborate on
fulfilling their vision of creating a whole bunch of fun, customised, absurdly
interactive bite-sized websites.
At the time, we didnt even know that breakfast biscuits were a thing. To think we
had been eating porridge and having to wait patiently until Pep-Peps birthday to
eat biscuits. The concept was a revelation for us. And the idea seemed tailor-made
to suit our sensibilities. Making crazy sites was right up our alley. Sure, it is usually a
blind alley that, more often than not, ends in our users experiencing an existential
crisis. But, hey, thats not a bad thing, is it? Just call us the Albert Camus of
interactive gaming.
The concept behind the belVita Breakfast Bites campaign was four hours of
energy (from each biscuit). So, the idea was, that during the campaign, we would
give users a website that would last just four hours. Users who tweeted the
#MorningWin hashtag would receive a link to a customised website with a selection
of games, personalised with their tweet, Twitter handle, and profile picture. It was all
about engaging Twitter users and rewarding them with something special, just for
them. The astute user would notice their own tweet at various points in the
experience on a whiteboard in a meeting room or on a banner being towed by an
airplane. Theyd also see their Twitter handle and profile picture. These were subtle
touches, surprising little Easter eggs for the user to discover and enjoy. We didnt
want to hit them over the head with it. Then, after the four hours had elapsed, the
users site would rate back into the ether of the internet, a sobering reminder of how
temporary biscuits really are.
With an idea in mind now it was time to meet their collaborative partners on the
project, Droga5, who were based in New York. Although we do work with our fair
share of brand clients, many of our projects are done in partnership with another
creative agency. This was the case for belVita, where we were asked to collaborate
by New York-based Droga5 to develop the digital component of an integrated
marketing campaign, explains Gerrard Gebhardt, Tactical Beard Trimming Advisor.
We love working with fellow creatives, and belVita was no exception. We had
worked with Droga5 in the past, on a very different campaign (Never Stop. Never
Settle for Hennessy neverstopneversettle.resn.co.nz), so in many ways this was
familiar territory, but in many other ways it was not.
Youd be forgiven for thinking, with Droga5 being in New York and the Resn
Wellington team in New Zealand, that the interaction and communication would be
BELVITA BITES
Project
Web
Agency
Web
Project duration
No. of people
involved
Total man hours
belVita Bites
belvita.resn.co.nz
Resn
resn.co.nz
15 seconds (of fame)
1/4
12 Nigels and a half Gary
design diary _____________________________________________________________ 27
BELVITA BITES
Nothing goes amiss at Resn, not

even laser eyes
minimal. It was anything but. Communication was daily at least and often several
times a day, using almost every communication medium available in this day and
age. Except fax. I dont think we ever faxed each other. Actually, on second thoughts,
we might have. The time zone difference actually worked in the favour of the
project. We worked while they slept and vice versa. Plus there was a cross over
window at the start of our day and the end of theirs when we would have meetings
via all kinds of video conferencing software. Oh, then Droga5 got on a plane and
came to Wellington to co-habit for a spectacular week of internet havoc and bird
watching (it is New Zealand, after all).
Wed describe it as fun, fruitful, fertile, and felicitous. Resn collaborated closely
with the Droga5 team on everything from storyboarding and prototyping, to the
design and animations. Wed discuss everything from the big unifying ideas, like
fitting in with brand identity and the theme of breakfast in general, to the nitty-gritty
minutiae of the artistic details, the physics, and little Easter eggs we threw in. For us
its the little details that really push things to the next level and working closely with
fellow creatives, who are operating on the same wavelength, can really get those
juices flowing.
Keeping in phase with the project ideas so far more silliness was to come, but
with absurdity cast aside it was time for both Resn and Droga5 to get serious with
the game concepts. Gary Gleeson aka Junior Feline Amusement Technician gives
it fit the overall theme of the Breakfast Bites campaign and it sounded absurd
enough. After selecting the strongest concepts we turned them into silly pictures.
Then we threw away the worst pictures and punished those responsible. Careers
and lives were lost in the process. Also egos. And limbs.
Once we had culled our silly pictures, it was time to turn the surviving concepts
into game prototypes. Our prototyping process focused on finding the fun. We
developed a snazzy hi-tech visual interface where any of us could instantly change
any parameter within the game using a simple slider. Sun melting the robot too
quickly? Push it one way. Too much robot ice? Push it the other. When we thought
we had a good balance, we unleashed the games on the entire Resn/Droga5 team,
to optimise the enjoyment. If, at any point, fun was suboptimal, we could alter the
parameters, until we zeroed-in on maximal amusement.
About half of the final ideas came from the devious minds of the Drogans and
about half from us. That sort of balance was a theme throughout the process and
one which made both teams push themselves creatively.
Even at the prototype stage, we were aware that the entire experience would
have to work on every platform available, including all the major desktop browsers
as well as Android and iOS tablets and mobile devices. It all had to work. Its called
responsive design, baby. And these days theres no excuse for neglecting anything.
We even made a version for the Sega Dreamcast. Yes, we did. Okay, no we didnt.
That was a lie. But its a lie that reveals a deeper truth.
To keep the smart visuals company, there needed to be some
smart back-end development. But, there are inherent dangers as
Ginny Gackson, Theoretical Digestion reveals, Were happy to
announce the back-end development duties were handled with
aplomb by everyone involved. Except for that one time when a dev
who shall remain nameless (Dave!), spilled their coffee on a
designer. Second degree burns ensued. Occupational health and safety people!
We have workplace hazard protocols for a reason.
Anywho, we had some dedicated PHP developers developing a system to
monitor Twitter for hashtags, pulling those into a CMS system where they were
Prototyping focused on finding the

fun. We developed a snazzy visual
interface to change parameters
an insight into the process. After Droga5 came to us with the concept, we worked
furiously. Ironically, the silliest ideas require the hardest work. Or maybe its not
ironic at all. Maybe its post-ironic. Whatever it is, the concepting process saw both
Resn and Droga5 pitching game ideas. Initially, we tabled any suggestion, as long as
28_____________________________________________________________ design diary
BELVITA BITES
DEITIES OF DIGITAL DESIGN

The visual design style of belVita Bites is distinctive with a touch of the absurd.
Though, very much a reflection of the personalities working on the project, the
team still had to get their message to the masses. Protection and Extortion
Manager, Gina Geronimo gives a hint of the gory details. The duties were handled
very well, thank you. Our 12 senior Illustrators all gathered around our communal
Wacom tablet and sacrificed their synapses to the deities of digital design. Of
course, this is just industry jargon for what really happened, but were reluctant to
go into the actual gory details. What happens at Resn, stays at Resn.
What we will say is that, as odd as our game concepts were, we wanted to take
it even further with the visual design and bring unexpected elements to each
game. We hid moustaches under beards. We made eagles wear overalls. We had
panpipe solo cut-scenes. Occasionally we had to tone things down, like when we
removed a prehensile tongue of one of the creepier characters in a particular
game. But, honestly, no one was sorry to see that one go. There were even drips
coming off the tongue. Eww. Just, eww.
We gave our long suffering art department two distinct goals. The first was to
impart a collective visual aesthetic for the experience as a whole. The second was
to design a unique look for each individual game. In other words, make everything
look the same but, at the same time, totally different.
We like to mess with our designers. It makes them better people or so we tell
them. Yet, surprisingly, they actually struck the right balance for the visual tone of
the experience. If you look at each individual game, youll notice that each one has
its own unique visual signature. Yet, there is also a unifying style and colour
palette that integrates the whole experience [together]. Getting this right was a
challenge, but we were very happy with the end result. And our designers are
actually better people for it. They will even tell you that themselves. Right,
designers? Yes, sir. See?
human moderated and replied to with customised links to the personalised

version of the website. This was a lot of backend work, but we pulled it off without
a hitch. Whew!
In terms of development, the major challenges were, firstly, the sheer volume
of games we had to create in timeframe available. We had only three to four days
to develop each game, which, as you might imagine, isnt a lot of time. Some of
the original concepts for games didnt work in practice and we had to change
them on the fly. Droga5 was integral to this process and understood the
challenges and both offered creative solutions and were receptive to our ideas on
how to make things work. We both wanted the best end product and the flexibility
of our collaboration couldnt have been better.
At Resn, we have developed our own custom animation pipeline for HTML, that
ensured we were able to build each experience, as widely different as they all
were, about as efficiently as is possible. However, the fact that every game was so
different, with their individual assets, animations, and gameplay mechanics,
meant that the scope for achieving any additional economy of scale, over and
above that enabled by our custom pipeline was then limited. We do always
manage to get things finished before the launch date, though. Its a good thing
that we can code quickly!
After such an exhilarating journey it only seems fair that the last word goes to
Senior Photocopier Gwen Glitter. They talk passionately about how much they
care for the belVita Bite project, in fact every project they ever work on. We care
a great deal about every project we do. They are our children, in a way. Even after
theyre all grown up and doing their thing out in the world, we like to give them
every advantage we can.
From SEO, to analytics, to awards, to social media, to the dark arts of online
marketing, we try and give our projects as much support and aftercare attention
There are 15 games to play in belVita Bites but who is the

best beard trimmer at Resn?
A beard is like a mitten for your face. What if

you trim it and it never came back?
GORGEOUS GORDON
LEAD CREATIVE SHOWJUMPER
I didnt make the beard trimmer. Im a deft

hand at trimming beards though. The skill is all in
the hand action. Youve got to shake that thing
hard and fast if you want results. For practice Id
recommend vigourous *REDACTED*.
GARY GLEESON
JUNIOR FELINE AMUSEMENT TECHNICIAN
I made the beard trimmer. All must bow before

my beard-trimming prowess. I crush all that stand
before me. I am the master barber, where all
others are merely trainees. Or junior hairdressers
at best.
GERRARD GEBHARDT
TACTICAL BEARD TRIMMING ADVISOR
as we can. Its not that were better than other digital production companies out
there, but we do seem to win a lot of awards (#humblebrag). We are but a small
company, with less than thirty full-time employees across our two offices, but we
punch well above our weight in terms of marketing things and winning stuff. And
other junk.
Well also take care of our children well into their old age. There are many Resn
projects that have come back to us once theyre too long in the tooth to survive
on their own. Just as dog years are much shorter than a human year, website
years are shorter still. A five-year-old website is as old and frail as a ninety-year-old
human. Thus the Resn domain is like an old-age home for our websites. Well host
them long after theyve retired, even though they keep us up with their longwinded stories that go nowhere. We might not care how many unique visitors
they had that one day in May of 2009, but well nod politely and pat them on the
back before giving them their tray full of medication.
So, as you can see, from the cradle to the grave, we offer a full lifetime care
package for every website we build. Its the least we can do. Theyre our
brainchildren, after all. And we have a soft spot for our cerebral progeny.'
design diary _____________________________________________________________ 29
Want more?
Go to GreatDigitalMags.com
and get great deals on brilliant
back issues & exclusive
special editions
Instant access to back issu
Plus Save
even more
if you
subscribe
Exclusive
books & special editions
greatdigitalmags.com
All available today on
greatdigitalmags.com
Standing at the
epicentre of design
and tech, the team
at DPDK are creative
thinkers that refuse
to be pigeonholed.
Diverse skills have
lead to a business
that shapes digital
products that
enhance and
disrupt our lives
32 _________________________________________________________________pro file
who DPDK
what Creative strategy and digital
production for a wide range of
engaging projects and products
where Calandstraat 5a, 3016 CA,
Rotterdam, The Netherlands
web DPDK.com
Key clients
Peugeot
Nationale Nederlanden
DS Automobiles
Vitens
Sense / SOA AIDS NEDERLAND
pro file_________________________________________________________________ 33
efining DPDK can be difficult, as the

agency offers a diverse range of skills to
its clients. Whether they need a
production company, design boutique,
game studio or technology services, DPDK brings
fresh and dynamic solutions to every account. Few
agencies have the breadth of skills that DPDK
possesses, placing it at the forefront of the digital
design that shapes our world.
Pim van Helten, CEO at DPDK, explains how the
agency came into being: Officially, the agency
started in 2001 with Rolf Vreijdenberger and
myself, but it took shape when I joined the agency

after graduating in 2004.
We offered technical production at leading
advertising agencies. Back then we mainly
developed with Flash and PHP, which was often
the basis for innovative projects of the (old) web. I
functioned mainly as a producer, while Rolf
functioned as the creative developer. Between
2004 and 2010 we grew the agency fast, mainly
because we then focused on adopting creative
developers. Because we worked for many
different agencies we were able to build up an
outstanding portfolio, which

encompassed a number of
skills that were in demand.
As a calling card, an
agencys website is often the
first point of contact with a
new client. Michael Vromans,
creative director, outlines the
approach that DPDK took with
its design. Our website should
convey what we stand for and
who [we] are going to
cooperate with. It is therefore
extremely important for us that
we present ourselves clearly
through our website.
Van Helten continues: In
addition, our website is a
platform to show how proud
we are of our work. Often our
projects are complex and
developed by a large team. We
therefore like to highlight how we came to our final
product. Through a case study on our website we
outline the background story. That takes a relatively
long time to design, but we like it simply because
we love our jobs.
How agencies actually earn their work can be
manifold. As one of the longest established
businesses in the digital space, DPDK has been
able to work with some of the worlds best known
brands. We are an agency that often pitches for
We have a broad customer base

and do not have to pitch [by] default,
as many customers know what they
can expect
challenging projects, Vromans tells us. Fortunately,
we have a broad customer base and do not have
to pitch [by] default as many customers know
exactly what they can expect from us. But pitching
keeps the agency sharp and brings new insights
and ideas to the team. It is also great to outperform
the competition!
With a world-class reputation that proceeds it,
how does DPDK choose which clients to work
with? Are there any business criteria that a new
client must meet for them to be suitable for DPDK?
Vromans continues: We do not service a limited
domain when it comes to the markets our
customers do business in.
We do, however, have a strong preference for a
client who understands the what of technology.
Understanding the what of technology means that
you put customer experience at the heart of your
transformation from [the] outside in. They keep
on innovating its never over. Every improvement
34 _________________________________________________________________pro file
DS | SIGNATURE ART
ds-signatureart.com
[to] the digital customer experience will open up

new possibilities to improve the way they do
business. Clients who understand the what of
technology often have a digital culture with a
strong overarching digital vision.
Our service is very dependent on cooperation,
so we prefer clients who bring out the best in us.
We have learned that digital projects can lead to
internal process changes for our clients. We assess
whether or not our future clients can manage this
change prior to a project.
In addition, over the years we have made our
trade-offs within the industry. For example, we do
not develop comprehensive e-commerce systems.
Today there are specific systems, but in the past
we have learned that this expertise does not fit
with our core competences. We also do not offer
outplacement of our team members. We like to
work closely together with our clients, but do so
from our own organisation.
Many agencies gain a reputation within a specific
sector, or their work has a clear thread running
through it that marks it out as their work. Does
DPDK have any work that defines it? Van Helten
explains: Translating offline to online user
experience is one of our specialties. The Catch The
Dragon campaign we created for Peugeot for
instance is an interactive prolongation of a
television commercial. For the film, we combined
Peugeots existing commercial with a 360 virtual
reality test drive we had already filmed in the sunny
French mountains.
Peugeots TV commercial was filmed in Los
Angeles by night and features a dragon tattoo
coming alive, flying out of the new 208. It was quite
a challenge to combine these completely different
worlds. We blended the virtual test drive and the
commercial into an interactive virtual reality film, in
Attention to detail enables DPDK

to make world-class campaigns
INDUSTRY INSIGHT
Your signature is personal and unique. And

thats what car brand DS is all about: expressing
yourself. To celebrate their partnership with the
Dutch Filmfestival, we turn your signature into a
piece of art.
Just like in Hollywood, the festival boasts a
boulevard of fame with autographs and hand
imprints of prize-winning actors and actresses.
Inspired by these signatures, we developed the
idea of leaving your own signature in the avant
garde style of DS.
The intro is a seamless mix of code, design
and video all melted together. Because of this
state of the art approach, the intro even plays on
mobile devices.
Writing your signature works best on mobile.
Just draw with your finger and voila: there it is.
Visiting on desktop? No problem. Just connect
with your smartphone and draw on there. Your
signature will appear on your desktop screen
like magic.
To create the right look in 3D signature and
statue, we started out with 3D experiments
where shapes were simple. In a line of
prototypes, we added detail, texture and lighting
to end up with an atmosphere that fits the avant
garde spirit of DS.
DS signature art is all about you and your
personal expression, and as such the interface
has been kept to a minimum but always in line
with DS style. A soundtrack that really
complemented the innovative nature of the
project and the brand was designed. Its
progressive, modern and a tad experimental.
Signature Art is also available as an
installation at the Filmfestival. We built a motion
sensor controlled version of the website where
visitors can write their signature by writing in
thin air.
Pim van Helten,

CEO
We love to translate a story into an idea,

and then translate the idea to an
engaging user experience through our
production. With all the necessary
specialists that work together at DPDK
we can achieve a cutting edge
production within a relatively short time
pro file_________________________________________________________________ 35
which youve set out to catch the

dragon by moving your
smartphone around. The site
works flawlessly on mobile
devices, which is a unique feature
for such a complex product.
We love to translate a story into
an idea, and then translate the
idea to an engaging user
experience through our
production. With all the necessary
specialists that work together at
DPDK we can achieve a cutting
edge production within a relatively
short time.
Some of the projects that DPDK
has completed are large and
complex, so how does DPDK
approach each and every project
that comes through their doors?
Van Helten explains the approach.
Large-scale projects often have a
timeline of six to 12 months. Half of
our projects we produce within six
months. The core of a team
consists of two backend
developers, two frontend
developers, an art director and a
producer. Often, a strategist and
the creative director also join the
team, depending the nature of the
project. Larger projects at DPDK
usually have the focal point
towards technical development,
because backend integrations
with systems used by our clients
are time consuming to develop.
The toolset that is now available
to digital developers is massive
DPDK is a studio, design boutique
and continually evolving, with
and production company
some agencies even developing
their own frameworks to be used
in their projects. So how does DPDK approach
using its toolset? Van Helten outlines its current
practices: Whenever we develop a backend, we
work with Drupal. Its the most flexible and reliable
Open Source system available and has a large
support community.
For design and frontend there are the usual
suspect such as Photoshop, but all in all we do not
cling to a certain package simply because it
worked last time. When youre focusing on
creating cutting edge, you have to be willing to try
new methods every single time in order to
become cutting edge. The one tool where both
the whole team and the client connect is the
project management tools Basecamp for project/
team communication, Jira for bug tracking, Github
Cooperation and collaboration
for software repositories and Google Apps for
are at the heart of everything
sharing documents and presentations.
36 _________________________________________________________________pro file
We are very excited about how WebGL is

influencing the Web. Since WebGL is embraced
widely by the mobile industry, we see that this
technique is maturing very fast indeed. With this
technique its possible to create rich experiences
for advertising campaigns and interactive websites.
Also this year we have already experimented with
WebGL and WebVR within a number of our
productions. It is fantastic to see whats possible
and how the Web develops through these tools. We
are very excited about the future!
The vast proportion of prospective clients will
often have a very clear idea of how they would
like their campaigns to reach their customers.
Mobile devices are now at the centre of these
relationships, which often influences how agencies
like DPDK will approach a piece of work. Vromans
explains that: Across all of our websites we work
with responsive designs from a mobile-first
approach. Weve been seeing mobile traffic grow
for years now. Therefore, all products that we
develop need that mobile-first approach. We
believe that if you have the perfect mobile layout,
you can translate the design easily to a much
better design for desktop and tablet.
We also develop many native apps. If you want
to use specific features of the mobile phone such
as fingerprint, camera, or the NFC-chip then you
have to develop native. At the moment, for this
type of project, there are no alternatives for
developing native, but it could be that in the future
fewer and fewer native apps will be developed.
The ways in which film productions are evolving
are fascinating. There doesnt seem to be a week in
which there is not a really great idea on Kickstarter
that will make shooting killer shots at low cost
possible. Think of a drone that automatically follows
a dynamic object or an add-on for your camera
that records all your movement in order to
completely eliminate those movements afterwards,
giving you an always stable shot.
At its core, a creative agency is effectively only as
good as the people it employs. But what are the
kinds of qualities that DPDK will look for in a
Web - DPDK.com
Founders Ferry Perret Gentil
Rolf Vreijdenberger
Pim van Helten
Year founded - 2001
Current employees - 40
Location(s) - Rotterdam
[1] Creative strategy

[2] Digital production
[3] Branding and campaign
[4] Web and mobile
[5] Motion and animation
prospective employee and what advice would the

team give to anyone looking to take a step into the
industry and furthering their career?
In our profession, everyone is now a digital
native, so make sure you excel at something, says
van Helten. At DPDK we hire for passion, not for
experience. We always look for the team player that
is broadly oriented within the industry and wants to
be the best in [their] field. For us as an agency, it is
important that you connect to the core
competences of the agency; management of
change, conceptual thinking, team collaboration
and production management.
As an agency in constant demand, what does
the future hold for DPDK? Vromans concludes: We
Across our sites we work with

responsive designs from a mobile-first
approach. Weve been seeing mobile
traffic grow
expect to both expand and diversify. The digital
revolution has only just begun and we believe that
our best days are yet to come!
It is difficult to define an agency like DPDK, as it
strives to be different with its approach to each
brief, but also how the philosophy within the
company has developed. Just as the digital space is
rapidly evolving, so DPDK remains on the bleeding
edge of design.
Story into ideas is the workflow for

cutting-edge digital design at DPDK
DPDK has evolved into a fine

digital agency
TIMELINE
Year
Year
Year
Year
2001 - 2005
2005 - 2010
2010 - 2015
2015 - 2020
no of employees
no of employees
no of employees
no of employees
10 - 25
25 40
40 +
Long freaking
nights with Flash as
the basis for its
creativity.
Servicing
production for leading
ad agencies gave the
team direction.
Collaboration and
production strategies
formed the base of the
DPDK operation.
Expanding core
competences,
innovation and
entrepreneurship.
pro file_________________________________________________________________ 37
FULL CO
ES
file
er
ON FILES
DE
s GET
IS FEATUR
TH
ILO
sil
gn
o.c
o.uk/webdesi
38 __________________________________________________________ feature
Responsive Design Recoded
5 new F6 features New look

CHECK SOME OF THE EXCITING NEW ADDITIONS TO FOUNDATION
Half the filesize
Like, literally. Half. For serious
More flexible Sass

Any grid. Any time
The total filesize of every component and

In Foundation 6 customisation is what it is
class in Foundation 6 now weighs in at
all about. The Sass mixins have been
Use less divs
60KB CSS and 84KB JS, with plenty
made stronger to allow devs to build
for the grid
of room to make them even smaller
even more customised rows with
Combine rows and columns in a
when selectively removing any
any number of columns they need.
single div for a maxwidth centered
unused components.
So, if a designer or developer
column, by using the following
wants to use a four-column grid
A11y friendly
code example:
inside a five-column grid inside a
The base for fully
<div class=row
twelve they can. This means that
accessible sites
column> </div>.
almost any grid can be created. But,
All code snippets will come with
dont get too overexcited, a grid still
attributes and roles along with instructions
needs to functional.
on how and why these things need to be used. This
Starter projects
will help ensure that every website built on
A totally swoll build system
Foundation 6 will be able to be seen
Right to left
Foundation 6 will be offering not only
anywhere, on any device, by anyone.
the CSS versions and the regular
compatible
Styled for simplicity
Not everyone reads from left to
Sass versions of Foundation, but a
right. Add the following for sites
The styles you need. None
souped-up stack complete with a
that need it. Add dir=rtl to the
that you dont
custom static site generator
With the goal that the base styles
HTML tag and $globaltextnamed Panini to help flatten files
are to act as a wireframe rather
direction: rtl; in the settings to
into single HTML documents.
than a final design, the team pulled
make your site flip for rtl
Panini is a Gulp-powered build
more and more styles from
languages.
system that can do a lot. It can compile
components, so users can more easily style
Sass to CSS, combine JS into one file and
them to fit the brand of their production work.
create production-ready code.
The biggest and most noticeable

difference for Foundation 6 is that its now
half the filesize of Foundation 5
THE CREW BEHIND FOUNDATION 6

TELL US HOW IT ALL GOT STARTED
he newest version of Foundation is here and,

according to ZURB, the team behind the build
itself, its a whole lot more than just a visual iteration,
code restructure or a simple change in version
number. ZURB had tons of phone calls, conversations
at meetups, and even sent staff on the ZURB World
Tour to hear how people were using past versions.
From New York to Hong Kong to Ontario and
Sydney people spoke about their love of rapidly
prototyping with Foundation and their interest in how
ZURB used it for production sites. From these
conversations the teams goals for the next version of
Foundation would rely on getting people producing
faster prototypes, so they can iterate quickly, and then
taking those prototypes to production code thats
leaner and more maintainable.
The biggest and most noticeable difference for
Foundation 6 is that its now half the filesize of
Foundation 5. Weighing in at 60KB CSS & 84KB JS the
Foundation team has put tons of care and energy into
producing a framework thats as light as possible while
still being a powerful foundation for any website. The
ability to pare down the components to the ones youll
use and a larger emphasis on more powerful Sass
functions will help users decrease file size even more.
A lean site will lead to a faster site which in turn will
allow for more success for the Foundation community.
The Foundation team made a big push for a more
a11y-friendly framework in Foundation 5.5 and are
continuing that work by re-coding every component
with accessibility in the forefront of their minds. Every
Foundation component uses accessibility standards
and the team has been working with some killer a11y
advocates to make sure theyre hitting the mark. All
code snippets will come with attributes and roles
along with instructions on how/why these things need
to be used. This will help ensure that every website
built on Foundation 6 will be able to be seen
anywhere, on any device, by anyone.
Foundation has always been very careful about the
styles added to the framework with the goal that the
base styles are to act as a wireframe rather than a final
design. The team is doubling down on that effort and
pulling more styles from components, so users can
more easily style them to fit the brand of their work.
The styles can be updated with variables in the Sass,
but the team is standing firm that not every selector
with every declaration gets a variable. This means
users will be able to write their own CSS and not just
be hunting down and modifying theme variables for
every style the aim is styles and variables where they
make sense, while avoiding abstractions.
Since Foundation 3 the framework has had strong
ties to Sass and used it to make the lives of developers
feature __________________________________________________________ 39
Flexible navigation patterns

Customisable and modular navigation
easier. In Foundation 6 these Sass mixins have been

made stronger to allow devs to build custom rows with
any number of columns they need. If a design needs a
four-column grid inside a five-column grid inside a
twelve, then the new mixins will make that super quick
and easy.
Users still have the ability to use the mixins for most
every component and rename the classes to match
their necessary names. This means developers can
convert presentational classes from prototypes to
semantic markup and not need to import those classes
into their final code. This has always been a great part
about Foundation with Sass, but the team is taking
care to make it even more powerful.
Finally, Foundation 6 will be offering not only the
CSS versions and the regular Sass versions of
Foundation, but a souped-up stack complete with a
custom static site generator named Panini to help
flatten files into single HTML documents. Devs can
spin up a browser sync server and there are tons of
ways to better optimise code with UNCSS and UglifyJS.
This is the same stack ZURB uses to build for their
client work and they are making it available for the

first time to the Foundation community.
Motion UI
animation library. So what can the Motion UI

element slides, to how far it spins, to how
library do for designers and developers?
intensely it shakes. Motion UI also
Need more
The most important thing is that it will
includes a large number of premade
components?
make prototyping easy. When
CSS classes in order to help you get
A the bottom of every
moving to a production
going quickly.
component, hidden away in the
environment, the library gives
It is worth noting that the library
documentation, you can find a
users total control over how
was designed specifically for use
selection of building blocks that
effects work.
with the Foundation frameworks,
expand on that particular
The core of the library is a set of
but it can also be adapted to work
components functionality
powerful transition and animation
with any frameworks animation
or style.
Sass mixins, which give users
library, such as Angular or React. Take
complete freedom and control over the
a look at page 44 for an example of a
details of an effect, from what direction an
practical application.
EASILY CREATE ANIMATIONS

AND TRANSITIONS
This Sass library includes more than two dozen
different built-in transition and animation classes.
Originally part of the Foundation for Apps code, ZURB
has decided to make it its very own library. The
updated version includes significantly more robust
transition options, an animation queueing system, and
flexible CSS patterns that can work with any JavaScript
40__________________________________________________________ feature
New desktop companion app

Spin up projects with a single mouse click
Theres a new menu system that is completely

customisable and modular.
Foundation for Sites 6 comes with a new companion

app, Yeti Launch (foundation.zurb.com/develop/
yeti-launch.html), that makes it dead simple to spin up
Sass projects, compile them and upload them to
Notable Code where you can get feedback directly on
the site.
Modular JavaScript utilities

Create your own JS plugins
Collaborate on responsive
design prototypes
Upload your responsive design web
pages to easily get contextual feedback on
any breakpoint
The new command-line tool (CLI) enables users to set

up blank Foundation for Sites, Apps, or Emails
projects with fewer dependencies than ever before.
Users can also choose to install through NPM, Bower,
Meteor, or Composer.
Stakeholders and collaborators can annotate and

review coded webpages on any device. Take your
Foundation projects from prototype to production
with Notable (foundation.zurb.com/responsivedesign-code-review).
The utility libraries are publicly accessible so users can

make their own amazing plugins.
Quick project starts

Spin up projects faster than ever before
50 building blocks and 15 new templates

A growing library of resources
Pop these premade components into your projects
and save time and resources.
Whos using Foundation?

THE POWER OF THE FRAMEWORKS HAS ATTRACTED SOME BIG NAMES. HERES WHAT THEY HAD TO SAY
Imran Oozeerally
Barclays
Doug Macklin
Golden State Warriors
Nick Pettit
Team Treehouse
It was decided early on that the new site would be
I have been using Foundation for several years now,

not because Im content to stick with what I know, but
because it remains the best framework of its kind by a
long shot. The ease of customisation and hassle-free
setup it provides are unparalleled.
The Foundation framework has not only helped me
cut down my workflow time, but more importantly it
inspired me to grow as a web developer. I studied
Computer Science in college, but knew hardly
anything about front-end web development prior to
working in my current position. When I discovered
Foundation, it made me want to improve my workflow
and get up to speed with the changing landscape.
I personally prefer using Foundation because of its
mobile-first responsive. I did an assessment of the

front-end frameworks available at that time and
decided to use Foundation. I particularly liked
Foundations grid system and general philosophy.
The front-end was completed on schedule,
integrated into CQ5, and released with great success. I
believe that Foundations robustness was a big factor
to the success of the project. In fact the modules built
for the dotcom website are being used across various
other Barclays projects.
Thanks for producing this great framework, and
keep up the good work!
Prototype to production
THE TENETS OF FOUNDATION 6
Foundation for Sites 6 is aimed at helping people get
their projects from prototype to production. To make
sure every decision was working towards that goal,
the Foundation team came up with specific tenets that
include the following:
Prototyping in Foundation 6 should...
Get me running with minimal dependencies, but
give me tools that modern sites need.
Be able to rapidly produce a proof of concept in
code with easily readable presentational classes.
Have a base style that is as unopinionated as the
wireframes were replacing them with.
Give me a common range of plugins that can be
easily configured without writing JavaScript.
Production in Foundation 6 should...
Be able to easily streamline code by using Sass
mixins to create semantic classes.
Let me quickly pare down the streamlined file
size by selectively importing the components I used.
Be styled to match my custom designs without
the need to override code or change tons of variables.
Yeti launch
more robust grid system. When I design new web

projects, I always start by thinking about the mobile
experience before I move on to larger screen sizes,
and I personally feel like Foundation has an edge with
block grids and collapsible rows.
The hassle-free
setup it provides is
unparalleled
Once a site, app or email is uploaded to Notable

Code, users can receive contextual feedback on
individual elements at all different screen sizes. This
SPIN UP FOUNDATION PROJECTS
hopefully means feedback from clients and
WITH THE PUSH OF A BUTTON
stakeholders on actual elements and not just vague
Working with Sass and build systems is awesome,
notes about pieces of a website.
but setting up a machine to work with them can be
The app itself was created using Foundation for
daunting. Some users love the increased benefits
Apps and wrapped with an Electron shell. This
a full web stack brings, but are simply not
allowed the ZURB team to use web
up for the challenge of hopping into
technologies to rapidly prototype and
JS knows
command line to set up an entire
then take those straight to a native
breakpoints
build system.
app-like experience.
You can easily use JS to expose
Thats why along with the
Future versions will include the
the breakpoint of the current
launch of Foundation for Sites 6,
ability to spin up templates and
device by using the Foundation
ZURB has released a free Mac app
selectively import components,
MediaQuery object:
(also coming to Windows soon) to
and in the very near future the
Foundation.MediaQuery.
spin up any Foundation website,
app will be expanded to Windows.
current.
email or app. This installs a new
Yeti Launch will be perfect for new
instance and runs a build system to
users to spin up projects quickly and
compile Sass, Concatenate JS and even
even for more advanced users who want to
compress images. Then it lets users take those
quickly and easily create a prototype and share it for
projects and upload them into Notable Code, a new
instant feedback.
service to upload prototypes and get contextual
Grab Yeti Launch at: foundation.zurb.com/
feedback straight on the coded pages.
develop/download.
feature ___________________________________________________________ 41
TUTORIAL
Build your own JS plugin

DISCOVER THE TECHNIQUES NEEDED TO CODE A CUSTOM ADD-ON
Anyone who has ever needed to make a custom
plugin for a web design knows it can be a pain. Even
if you utilise a framework, there hasnt been a lot of
built-in support for layering over the top of it and
creating whatever doodads and whizbangs you might
want. Foundation 6 has solved this problem by
offering a plethora of public APIs to make it faster and
simpler to integrate your own custom plugins. Part of
the 50 per cent code reduction is due to separating
out these common functions and these utilities. Were
going to show you how.
What were doing:
Setting up a custom trigger for our element to
fire, based on the users input.
Grabbing the index of the current card, well need
that going forward.
Calling on our Foundation.Motion library and
animating the card out. For this demo, we used
slideOut(Left/Right) for swipe events and
scaleOutDown for button clicks.
Once our animation is complete, fire our custom
trigger and remove the card from the view as we dont
need it anymore.
Finally, if we opted for modals, (we did), lets invoke
that modals destroy method and clean up our DOM
structure a bit.
Put it all together, and youve got yourself a
custom-built plugin that seamlessly works within the
Foundation framework. We save you time by providing
utility functions. There are a quite a few we didnt go
over in this article, but information about how to use
them can be found on our docs page. Weve given
designers a set of power tools to build their own
plugins and functionality, and we cant wait to see
what you do with it.
The JS utilities in Foundation 6 save you time and
effort. Separating out the common functions into
smaller utilities saves code and gives you power tools
for your production. Foundation not only has very
useful popular plugins for you to develop with, but
also tons of tools to help you build your own.
View the full code for this plugin here: github.com/
zurb/foundation-sites-6/blob/tutorial/testing/js/
swipin.js.
Build a responsive card swiper

Well start with some of the utility functions and
existing plugins were going to want:
Foundation.MediaQuery
This utility library has a few helper functions such as
Foundation.MediaQuery.
atLeast('breakpointString');
as well as an event emitter that triggers when a
breakpoint is hit.
42 __________________________________________________________ feature
Foundation.util.swipe.js is a file in the JS folder that

adds a swipe event emitter to jQuery elements. We will
utilise this with:
$element.on('swipe swiperight swipeleft');

Foundation.util.motion.j is the file that is the
JavaScript behind the Motion-UI library. It adds
custom classes to add transitions to elements and
move them offscreen. We will utilise this with:
Foundation.Motion.animateOut($element,
animationClass, function(){
//optional callback
//do stuff
});
This file is dependent on another helper file:
foundation.util.animationFrame.js,
which has one function to utilise hardware
acceleration to improve animation effects. This will be
called with:
Plugin.prototype._init = function(){
//do stuff
this._events();
};
Plugin.prototype._events = function(){
//add event listeners
};
//add logic functions here \/...
Plugin.prototype.destroy = function(){
//remove event listeners
//remove elements from the DOM
Foundation.unregisterPlugin(this);
};
Foundation.plugin(Plugin);
These are the non-optional methods for each plugin,
and naming conventions should be followed
(otherwise Foundation._reflow() wont work!).
Everything else is up to you.
Now that we know how to start a plugin, we can
build our Tind...er, Card Swiping plugin, for
succinctness and humour, were going to call it
Swipin. Since we know how to build the skeleton of a
plugin already, we dont need to go over that, so lets
look at the _init function in detail.
Foundation.Move(timeOfAnimationInMS,
$element, function(){
//apply animations/transitions
here.
});
Swipin.prototype._init = function(firstTime)
{
this.$element.addClass(this.
options.containerClass);
Custom
this.$cards = this.$element.
columns
find('.' + this.options.
Foundation.util.triggers.js is an
You can use the gridcolumn
cardClass);
event listener/emitter helper file. It
function in order to create a
if(this.options.hasDetail &&
listens for click events on:
column class with a custom size:
firstTime){
[data@include gridthis._makeModals();
close="idOfThingToClose"],
column(4 of 5) makes an
}
[data-open="idOfThingToOpen"],
80%wide column.
if(this.$element.find('.' + this.
[dataoptions.btnContainerClass).length){
toggle="idOfThingToToggle"]
this.options.hasBtns = true;
as well as listening for any other events you may
}
want to tap into.
if(!Foundation.MediaQuery.atLeast(this.
Next up is foundation.reveal.js. We want details for
options.unstackOn)){
our little image-filled cards, so lets programmatically
this._stack();
create some modals that will open when we click or
}
tap on our cards. Reveal has its own dependencies as
this._events();
well, including foundation.util.sizeAndCollision.js, to
};
properly size modal frames, detect collision events,
and set the offsets of the modal element. Were going
to create these on the fly with:
new Foundation.Reveal($element);
and add a few elements within them.
That covers the basic components were going to
need, so lets see how a plugin is built. The basic
structure of each and every JS-based plugin is this:
function Plugin(element, options){

this.$element = element;
this.options = $.extend({}, Plugin.defaults,
this.$element.data(), options);
this._init();
Foundation.registerPlugin(this);
}
Plugin.defaults = {};
A few things that we did:

Add the container class to the root $element for
easy styling.
Create a jQuery collection of our individual cards.
Check a boolean to see if we need to make our
modals, the firstTime argument is passed from the
constructor functions call to _init(), we dont want to
make more modals when we reflow this plugin.
Check the markup for a button container, if we
have buttons, then well need that boolean in our
event handler.
Check the size of the screen, if its below our
unstackOn threshold, well stack our cards and add
the swipe event listener.
So we know we can programmatically create
New Foundation for Sites

6 JS Plugins
Stick anything, anywhere (nearly)
Make sticky sidebars that fix position as the page
scrolls and can unstick when they hit other elements,
or a sticky topbar navigation that follows users down
the page. Items can stick to the top, bottom, left or
right and anchor to any other element on the page.
Simply add the .sticky class and [datasticky] to an
element to create something that sticks. Sticky
elements must be wrapped in a container, which will
determine your sizing and grid layout, with [datasticky-container].
plugins with our JS, lets see what that looks like.
our elements to the modal we just created

_this.reveals.push(reveal); // and save our
Swipin.prototype._makeModals = function(){
new modals to their proper place
var _this = this,
$modals = $modals.add(reveal.$element); //we
modal = '<div class="reveal" data-reveal></
dont need the elements, so $modals is a
div>', //declare our reveal markup
temporary variable
closeBtn = '<button class="close-button"
});
aria-label="Close alert"
$(document.body).append($modals);// attach
type="button"><span>×</span></
them to the DOM all at once.
button>', //utilize a Foundation helper CSS
};
class close-button
lorem = '<p>This is just some lorem ipsum
And now we have our modals, they are attached to
for this tutorial</p>'; //and generate some
the DOM, and they have open and close triggers
generic text for the sake of this lesson.
applied to them, thanks to our handy triggers library.
var $modals = $(); //create an empty jQuery
Next, we need to check out our _events function. It
collection, well need that in a minute
manages triggers from media query changes, and
this.reveals = []; //save our shiny new
applies event listeners to our cards. It will need to
modals to our current plugin, we need that
delegate some of these tasks to helper functions, but
too!
well leave those out for brevity.
this.$cards.each(function(){ //iterate
Swipin.prototype._events = function(){
through all our cards
var _this = this;
var $card = $(this),
$(window).on('changed.zf.mediaquery',
imgSrc = $card.find('img').attr('src'),
function(){
//since each card has an image,
_this._handleMQChange();
grab the src attr
});
id = this.id || Foundation.
if(this.stacked){
Responsive
GetYoDigits(6, 'cardthis._addSwipe();
typography
detail'), // we need an id
}
Change the values in the
for our triggers utility
this.$cards.off('click.zf.
$headersizes variable in
functions, so lets make
swipin tap.zf.swipin')
order to create responsive
one. GetYoDigits gives you
.on('click.zf.swipin tap.zf.
typographic scales that change
a psuedo-random string.
swipin', function(e){
to adapt themselves to a
reveal = new Foundation.
_this._handleClick(e, $(this));
variety of different
Reveal($(modal).attr('id',
});
screen sizes.
id)),//generate our modal for this
};
card
Here, were applying a listener to the window, for
$closeBtn = $(closeBtn).attr('data-close',
media query events, and adding the click handler for
id); and update our close button with the
our cards. Since we only add the swipe listener when
data-close attr for our triggers utility
the cards are stacked, lets take a look at our card
$card.attr('data-open', id);
markup, CSS, and stacking logic.
reveal.$element.append($closeBtn, '<img
The markup:
src=" + imgSrc + "/>' + lorem);//append
<div class="row medium-up-3" data-swipin>
<divclass="columnssmall 6right"data sticky

container>
<divclass="sticky"data sticky>
<imgsrc="assets/img/interchange/small.jpg">
</div>
</div>
Toggler add and remove classes

without writing JS
Quickly prototype interactions by toggling classes
onto any element using simple data attributes. To
setup a class toggle, start by adding the attribute
datatoggler to an element. The value of datatoggler is
the class you want to toggle. Also give the element a
unique ID so it can be targeted. Then, add datatoggle
to any element, with the ID of the target as the value of
the attribute. Now, any time you click on this element,
the class will toggle on and off on the target.
<ulclass="menu"id="menuBar"data toggler=".
expanded">
<li><ahref="#">One</a></li>
<li><ahref="#">Two</a></li>
<li><ahref="#">Three</a></li>
<li><ahref="#">Four</a></li>
</ul>
<p><adata-toggle="menuBar">Expand!</a></p>

<div class="column card"> 
<div class="thumbnail">
<img src="http://placehold.it/450x650">
<div class="button-group expanded">
<a class="button tiny alert">No Thanks</a>
<a class="button tiny success">Yes Please</
a>
</div>
</div>
</div>
</div>
The Sass:
.swipin {
position: relative;
top: 50px;
.thumbnail .button-group {
feature __________________________________________________________ 43
margin-bottom: 0;
margin-top: .25em;
.button {
border: 1px solid #FEFEFE;
border-radius: 0px;
}
}
}
.is-stacked .column {
position: absolute;
left: 0;
width: auto;
transition: transform .5s ease;
transform: scale(0.6) translate(0px, -30%);
}
.is-stacked .column:first-child {
transform: scale(1) translate(0px, 0);
}
.is-stacked .column:nth-child(2) {
}
transform: scale(0.8) translate(0px, -20%);;
}
}
The stack is simple, merely adding a class to the
main element, setting a z-index so the cards stack
correctly, and hiding buttons as well be swiping now:
Swipin.prototype._stack = function(){
var counter = this.$cards.length,
_this = this;
this.$cards.each(function(){
$(this).css('z-index', counter)
.find('.' + _this.options.btnClass).hide();
counter--;
});
this.$element.addClass('is-stacked')
.trigger('stacked.zf.swipin');
this.stacked = true;
};
The _unstack function is pretty similar:
Swipin.prototype._unstack = function(){
How to build with the

Motion UI
CHECK OUT FOUNDATIONS SASSBASED ANIMATION LIBRARY
Motion UI ships with over two dozen premade CSS
transition classes, which we used in the tutorial.
However, if you want to streamline your CSS output,
and create more fine-tuned effects, you can use
Motion UIs Sass mixins.
First, comment out
@import motion-ui-transitions in app.scss

to remove the pre-built classes.
Next, add this code to your Sass file. Well replace our
44 __________________________________________________________ feature
var _this = this;

this.$cards.each(function(){
$(this).css('z-index', '')
.find('.' + _this.options.btnClass).show();
});
this.$element.removeClass('is-stacked')
.trigger('unstacked.zf.swipin');
this.stacked = false;
};
While our cards are unstacked we get:
}
};
Because the whole card has an event listener, we
need to see if one of the buttons was clicked, and if it is
then we will stop propagation so our event doesnt
bubble to our [data-open] listener and open our
modal. If it wasnt a button though, lets allow that
modal to open. Our swipe listener will look like this:
this.$cards.off('swiperight.zf.swipin
swipeleft.zf.swipin')
.on('swiperight.zf.swipin', function(e){
e.preventDefault();
_this._swipe($(this), 'Right');
}).on('swipeleft.zf.swipin', function(e){
e.preventDefault();
_this._swipe($(this), 'Left');
});
Which calls this:
Which, when stacked gives us:
Now were getting somewhere! Of course, though we

have our cards and they stack nicely, we have to be
able to do something with them. Lets look at our click
and swipe handlers
Swipin.prototype._handleClick = function(e,
$card){
var $target = $(e.target),
isBtn = $target.hasClass(this.options.
btnClass);
if(isBtn){
e.stopImmediatePropagation();
var isYes = $target.hasClass(this.options.
yesClass);
this.dismissCard($card, isYes, this.options.
animOut);
basic slide with a custom hinge.
.hinge-in {
@include mui-hinge(
$from: right,
$fade: true,
$duration: 0.25s,
$timing: easeInOut
);
}
.hinge-out {
@include mui-hinge(
$state: in,
$from: right,
$fade: true,
Swipin.prototype._swipe = function($card,
dir){
var isYes = dir === 'Right';
this.dismissCard($card, isYes, 'slideOut' +
dir);
};
And this dismisses our card with the slideout
animation to the left or right. This function, is the
bread and butter of this whole plugin. We wanted to
make two common user interactions, click buttons
and swiping right or left, and combine them in a
responsive way with a recognisable layout.
Swipin.prototype.dismissCard =
function($card, isYes, animOut){
var trigger = (isYes ? 'yesplease' :
'nothanks') + '.zf.card',
idx = this.$cards.index($card),
_this = this;
Foundation.Motion.animateOut($card, animOut,
function(){
$card.trigger(trigger, [$card]).remove();
if(_this.options.hasDetail){
_this.reveals[idx].destroy();
}
});
};
$duration: 0.25s,
$timing: easeInOut
);
}
Lastly, in
plugin.js
, replace the references to
slide-in and slide-out with hinge-in and hingeout

When you refresh the page and use the plugin, youll
see the new effects in place. You can refer to Motion
UIs full documentation (at https://github.com/zurb/
motion-ui) to learn more about making use of the
custom effects.
A look ahead at Foundation

for Apps 2
WHAT DOES THE FUTURE HOLD FOR ZURBS WEB APP FRAMEWORK?
Last year ZURB launched Foundation for Apps, an
Angular-powered framework that was primarily
focused on creating fully responsive web apps. It
includes a flexbox-powered grid built for flexible,
responsive app layouts, in addition to a series of
Angular directives for creating off-canvas panels,
modals, notifications, and more.
Foundation for Apps was created as a brand new
framework, because the team at ZURB felt like
Foundation 5, while an amazing tool for building
websites, was not as great when it came to building
web apps. Further, there were no existing solutions in
the open source world for building fully-responsive
web apps designed specifically for the browser. Much
like how Foundation for Emails (previously known as
Ink) is designed specifically for HTML email,
Foundation for Apps is designed specifically with
HTML apps in mind.
The framework borrows fairly heavily from existing
ideas in Foundation for Sites, but it also includes many
unique components specifically designed for
responsive web apps, including a flexbox-powered
app grid, collapsible panels, flexible menu patterns,
and responsive action sheets. The frameworks
JavaScript is built on the Angular framework, so its

specifically designed with single-page apps in mind.
Foundation for Apps also shipped with a small plugin
called Front Router, which allows for the creation of
Angular routes (URLs) directly within the HTML of
each page.
Version 1.0 of Foundation for Apps launched in
December of 2014, and the Foundation team is already
hard at work on Foundation for Apps 2, which is going
to be powered by version 2.0 of the Angular
framework. Foundation for Apps 2 features even more
robust responsive layout options, a greatly improved
visual style, and more powerful Angular components.
Many ideas developed in Foundation for Sites 6 will
also be ported to Foundation for Apps 2, ensuring it
features all the latest improvements.
Angular 2 is a drastic departure from Angular 1, so
the JavaScript codebase will be overhauled to fit
Angular 2s new design patterns. The code will also be
written in TypeScript, a new superset of JavaScript
designed by Microsoft its also the official language
of Angular 2. Angular 2 is due to launch next year, and
ZURB will be at the forefront of Angular 2 development
with Foundation for Apps 2.
Angular 2 is due to launch next year,

and ZURB will be at the forefront of
Angular 2 development
Responsive emails
GET ALL-SCREEN FRIENDLY
Brandon Arnold
Foundation Lead, ZURB
We wanted to learn how people actually used
Foundation, so we travelled around the world and
hopped on hundreds of calls to actually watch how the
community used the Framework and discussed what
they needed from it. It was amazing!
Responsive email design has been growing steadily

in popularity, and its no surprise as to why: 47 per
cent of email opens are actioned on a mobile device
(litmus.com/blog/mobile-opens-hit-record-highof-47), and some brands see upwards of 70 per cent
of their emails opened on mobile. Ensuring that
emails looked good on any device was imperative,
therefore ZURB created Foundation for Emails,
formerly known as Ink, for our own emails. This was
then later released to the general public as open
source software.
Foundation for Emails helps people build
responsive emails that look great on all major email
clients, especially Outlook! We took on the significant
workload of figuring out all the different quirks in all
the most popular email clients and devices in order to
provide a framework for creating emails that just work,
no matter where theyre opened. Sone of the features

in 2.0 include:
s"GVMMZMFYJCMFHSJE even on small screens! That
means you can create any number of columns and
have a fully flexible small grid.
s#VJMUXJUI4BTT This means you can wield the
powers that come packaged with Sass including
variables, mixins and partials!
s/FXUFNQMBUJOHMBOHVBHFn*OLZ Say goodbye to
sifting through hundreds of pesky table tags. With
Inky you can write tags like <row and <columns> to
spit out the six table tags needed to just get the
skeleton of your email together.
s)FMQGVM6*DPNQPOFOUT Row, Columns, Callouts,
Inline Lists, Vertical Lists, Block Grid and Thumbnails.
s*OMJOFBMMPGUIFTUZMFT Theres a handy Gulp task
that inlines all your CSS from a remote stylesheet.
s)BOEMFCBSTUPLFFQZPVPOUSBDL Weve included
the support of Handlebars templates to keep you from
repeating yourself! Things like the header and footer
of your email can stay the same, allowing you to
change only the content that matters!
Weve also packaged up a handful of battle-tested
templates to get you up and running with Foundation
for Emails 2.0! Were really excited to share the
workflow improvements with the world, and cant wait
to see what you can do with it.
&YBNQMF DPEF
<row>
<columns large=8 small=4>
</columns>
<columns large=4 small=8>
</columns>
</row>
A better solution than this:
<table class="row">
<tr>
<td class="wrapper">
<table class="six columns">
<tr>
<td class="expander">
</td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="six columns">
<tr>
<td class="expander">
</td>
</tr>
</table>
</td>
</tr>
</table>
<row>
<columns large='6' small='12'>
</columns>
<columns large='6' small='12'>
</columns> </row>
feature __________________________________________________________ 45
Tutorials
Get free web hosting

with GitHub Pages
GitHub is commonly used to host portfolios of code. Showing the code in action
increases its effect ten-fold
46
DOWNLOAD TUTORIAL FILES

Tutorials
raditionally, developers solved the

problem of hosting by adding a link to
content hosted at an external website.
Few coders know that each and every
GitHub repository comes with a dedicated area for files
which are served via a normal web server.
In fact, GitHub supports three different repository
types. A Project site acts as a deployment vector for the
above-mentioned cide examples. User and/or
organisation sites differ from project sites in that they are
instead intended to represent a firm or an individuals
web presence.
From a technical point of view, taking GitHubs offering
is interesting as long as websites remain static. GitHub
does not provide databases or other active content if
you plan to host a forum or a WordPress-managed blog,
this is not the host of choice.
Please be aware that GitHub Pages is not a
replacement for a classic web host. It is a hosting option
for placing GitHub-related content, which enables its
users to test code.
git add --all

git commit -m "Initial commit"
git push -u origin master
6. Check if working
3. Initialise the local copy
The following steps are based on an Ubuntu workstation.
Open a Terminal window, and create a new and empty
folder. In the next step, enter the following commands to
connect the folder to the GitHub server. During the
process, a group of metadata files are spawned.
echo "# TAMHAN.github.io" >> README.md

git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/
TAMHAN/TAMHAN.github.io.git
1. Sign up!
4. Position your web content
Using GitHub Pages requires a GitHub account. If you

have not signed up yet, hit GitHub.com and click the big
green Sign Up button at the top right. For GitHub Pages,
purchasing a premium account is not necessary as there
are no privacy options provided either way (see steps 20
and 21 for more information).
Your Terminal windows working directory now contains

an empty file called README.md. Put a second file called
index.html in the same folder: the location of README.
md shall be the root of the web host, while subfolders
below readme.md will go to a subfolder of the newly
created website.
2. Create a page repository
5. Upload the data
Personal pages must be created in a repository where

the name must match your username in a 1:1 fashion
along the rest of the string shown in the window. If you
have not created a repository before, then set one up
according to the parameters in the image that follows.
From the point of view of the git client, a GitHub

Pages-hosted website is little more than an exposed Git
repository. Due to that, the newly created page and any
contained images must be pushed to the server before
they can become visible to the World Wide Web.
After this upload, our website is ready for testing. Open

the URL <username>.github.io in a browser of your
choice. Be aware that all GitHub user names are lower
case by force: even if you log in as TAMHAN, the correct
URL will still be tamhan.github.io.
7. Create a 404 message

All GitHub repositories can be equipped with a default
404 page which is displayed to users who attempt to
access invalid or non-existing parts of the GitHub
repository. In the case of our example, the file 404.html
contains a friendly error message.
<html>
<body>
<h1>An error has occurred</h1>
</body>
</html>
8. Deploy, the second

As GitHub Pages are hosted in a Git repository,
committing changes should be accompanied with a
descriptive message such as the one shown in the code
Attention: Unix!
GitHub Pages is hosted on a Unix operating

system. This means that paths and file names are
case sensitive a nasty trap for people switching
from Windows Server.
Left
Using GitHub Pages requires you to sign up at GitHubs site

an act which may not appeal to the taste of more
libertarian individuals
Top left
GitHub Pages requires a specific repository name based

on the scheme <NAME>.github.io picking any other name
leads to issues
Top right
Our GitHub Pages-hosted website is being served as a

normal HTTP page when its access URL is entered into a
browser of choice
47
Tutorials
Get free web hosting with GitHub Pages
featured in this step. Do not wonder if the client will ask

for username and password from time to time as a
security precaution.
git add --all

git commit -m "Add 404 page"
9. Its really just GIT

As we have stated earlier on, a GitHub Page is really little
more than a publicly exposed Git repository. In the case
of our website, you can just open up github.com/
TAMHAN/TAMHAN.github.io in order to see the
commit history along with a stub file left over from an
editor crash.
10. Lets start a project

While personal pages on GitHub might be nice, the real
value lies in the creation of websites for projects. Let us
set out by creating a new project containing a bit of C
code simply upload it in order to make GitHub show
the project contents view when the repository is opened
in the WebView.
Launch automatic page generator button in order to

start the modification process.
provides a total of twelve different themes; you can

switch between the two groups with the arrow symbols
pointing to the left and right.
12. Do the Markdown!

In the next step, GitHub will open an editor where the
contents of the projects homepage can be edited. The
product uses a Markdown-like syntax which is
well-known from a variety of CMSs and a few Mac
OS-based editors.
13. Add Google Analytics

Tracking the successes of a GitHub repository is a
process that is best accomplished via the use of
Google Analytics. In the first step, you should work on
following the comprehensive instructions that have been
outlined on the Analytics documentation at support.
google.com/analytics/answer/1032385?hl=en in order
to obtain the Google ID. Then, once you have the Google
ID to hand, you can now enter it into the box at the
bottom of the Markdown editor.
15. Go live
Finally, click the Publish button in order to go live with the
changes. GitHub will confirm the successful generation
via a small banner at the top of the screen. You can go
ahead and open tamhan.github.io/
ImagineProjPageTest in order to take a look at the
results of our labour.
11. Automagic generation
16. Do the branching
In the next step, click the wrench icon on the right-hand

side of the screen. Next, move down towards the
Automatic page generator segment and click the
The files intended for the GitHub page of a project are

not stored in the main branch. Instead, GitHubs
generator automatically generates a branch called
gh-pages which acts as the host containing the files
intended for the projects homepage.
Analytics caveat
Deploying Google Analytics is complex from a

legal point of view: in many countries, users need
to be notified that their data is collected and/or
forwarded to Googles servers.
Top left
Even though the Editor embedded into GitHub Pages

looks a whole lot like WordPress, it works with a
completely different markup language
Top right
GitHubs automatic page generator is well-hidden: find it in

the settings dialog of a project
Right
Forgetting to remove temporary files before starting the

commit process leads to weird and sometimes
embarrassing results
48
14. Choose your layout

Presenting a bland website is no fun. Thus, click Continue
to Layouts in order to open a preview alongside with a
ribbon permitting you to select the style. GitHub
Tutorials
Get free web hosting with GitHub Pages
Do the domain!
One way to make GitHub
Pages a little more
professional is through the
use of subdomains. You
can add a CNAME record
at your web or domain
provider in order to
redirect traffic to GitHub
Pages as the system is
based on DNS names, your
site will continue to
benefit from GitHubs
optimisation and CDN
service. For example,
orgname.github.io/
projectname could be
redirected to project.
tamoggemon.com.
If your domain provider
does not offer the CNAME
option, you can
alternatively use an apex
domain which forwards to
the IP adress of GitHub.
GitHub officially advises
against the use of apex
domains as they do not
permit the use of a CDN
further information on the
topic can be found at bit.
ly/1NpCaZX.
17. Delete a personal page
19. Troubleshooting
20. The NSAs best friend
Getting rid of a personal page is not difficult. Open the

repository containing its files, and switch into the Settings
pane. Then, move into the Danger Zone tab and click the
Delete this repository button.
The automatic page generator can be a bit troublesome

at times. Fortunately, the GitHub team provides a
selection of frequent issues which can be accessed by
opening the URL help.github.com/categories/
github-pages-troubleshooting/.
While GitHub repositories can be declared private, this

flag does not apply to any Pages content found within.
Be aware that any content uploaded to the Pages system
is made publicly available if someone finds it, consider
yourself officially out of luck.
18. Delete a project page

Should you ever decide to eliminate your project page,
simply remove the gh-pages branch. This can be
accomplished by opening the branches tab of the
repository in the web interface. Next, click the little
garbage can next to the gh-pages branch in order to
banish it forever.
21. HTTPs: missing in action

Another significant limitation of GitHub Pages involves
the fact that HTTPs is not supported. Even though
secure HTTP might be easy to crack for dedicated
attackers, it nevertheless provides an urgently-needed
extra layer of security that is absent here.
49
web workshop
Make a draggable
fading effect
As seen on tuckeffect.com/
Enticing object
As the page loads the site
is hidden away behind an
illustration. A button
beckons the user to drag
down to reveal more info.
Background
The background image i
an HTML5 Canvas Tag
that contains the
illustration, this way it ca
easily be changed.
Drag downwards
As the user drags down
the shirt starts to ride up
the torso, showing that
the shirt is actually being
lifted up.
50
Belting up
Finish the drag
As the shirt lifts, the belt is

revealed with a variation
of the site title. Notice
how it stands out against
the illustration.
As the drag reaches the

bottom, the shirt moves
back and tucks into the
jeans. It then fades out to
reveal the real site behind.
Make a draggable fading effect

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner
ruit of the Loom have recently conducted

a survey about the way men dress and
found some fascinating results. It seems
that men who tuck their shirts in are
happier, wealthier and generally more successful
all-round. This study was done to promote the brands
new undershirt.
Coincidentally this new Fruit of the Loom undershirt is
especially made so that it stays tucked into clothes.
Researchers and scientists have no real idea why this is
found to be true but it does provide a great way to
market a new shirt that adheres to these new findings.
The website features an animated film to report these

findings that was created by the agency Porter &
Bogusky while the microsite that holds this was created
by Legwork Studio.
The site itself features some lovely interaction around
tucking in a shirt in order to get into the site, which has
both great illustration and animation that highlights Friut
of the Looms findings in a neat way. Once the shirt is
tucked safely away behind the belt and trousers the user
is let into the real site as the illustration fades away. An
ingenious way to tie in illustration, interaction and a
brand strategy in one easy activity!
Slide to unlock
<comment>
What our
experts think
of the site
These days almost everyone has to slide-to-unlock their phone. We thought a

take on that interaction in the playful illustration style of the campaigns
animated spots was a great opportunity to establish the tone of the site while
simultaneously reinforcing the goal: encourage tucking.
Dave Soderberg, creative director, Legwork Studio
Technique
1. Create the pull-down transition
In your HTML page add the tags as shown here. The
main part is that the container will cover the screen until
the drag element is dragged downwards, then the div
below will be revealed. This is actually just held
underneath the other content.
<div id = "container">
<div id = "drag"></div>
</div>
<div>Your real site goes here</div>
2. Style the container

Move to the head section of the site and add some style
tags then the container CSS can be added to those. This
positions the container above the page content and
positions it absolutely to fill the screen so that the site
cannot be seen below it.
3. Such a drag
The drag element is made into a circle by adding a
border radius to it and by changing the width and height
to 150px. This is centred horizontally on the page ready
to be dragged downwards and given a light grey
background so that it can be seen.
4. Add the behaviour

EXPERT ADVICE
Clean outlines
The canvas element is able to draw
very clean lines, which looks good
but can be a little difficult to make
look unique. The Tuck Effect site
gives the lines a hand-drawn look to
avoid this and uses texture to add a
little shading to the arms and torso.
Just before the closing body tag in your document, add

script tags and then add in the JavaScript code shown
here. A reference to the elements are stored for use in
the code, then the starting and ending position are
recorded. Event listeners are added for the mouse down
and mouse up events.
var div = document.getElementById("drag");

var outer = document.
getElementById("container");
var start = div.style.top;
var end = start + 300;

window.onload = addListeners;
function addListeners(){
div.addEventListener('mousedown', mouseDown,
false);
window.addEventListener('mouseup', mouseUp,
false);
}
5. On and off
When the mouse is pressed down a mouse move
listener is registered then when it is released this listener
is removed. The idea behind this is that it keeps the
movement purely restricted to when it moves and stops
it being dragged and sticking to the mouse even when
let go, which can happen!
function mouseUp(){
window.removeEventListener('mousemove',
divMove, true);
}
function mouseDown(e){
window.addEventListener('mousemove', divMove,
true);
}
6. Tidy it up
Now the function of when the mouse moves is ran and
this really does all the work. It constrains the object to be
dragged on the y axis only and for 300 pixels. When it
reaches 300 pixels the container div is faded out using
CSS transitions.
function divMove(e){
if (e.clientY < end && e.clientY >= start){
div.style.top = e.clientY + 'px';
}
if (e.clientY >= end){
outer.classList.add("fadeOut");
} }
51
Tutorials
Create an interactive
mobile 3D interface
Part two of our tutorial takes an augmented menu that uses the mobiles device
orientation controls and adds interaction to create a fully working site experience
52

Tutorials
n part one of this tutorial in issue 242, a unique

mobile augmented website menu was
created. The site was created with the help of
the three.js library and was rendered using the
CSS3 renderer rather than the WebGL renderer to give
maximum compatibility with devices. The 3D was an
integrated part of the design as the user had to rotate
their phone around them to display the interface,
augmenting the site around them. This placed the user in
the centre of the interface.
The movement of the phone was created using the
Device Orientation Controls that come bundled with
three.js and this sort of turned our phone into something
similar to an Oculus Rift.
Now, in this final part of the tutorial, the interface will be
given some content so that it actually becomes useful.
This content will be hidden from the user until they click
on the appropriate icon in 3D space, at which point a 2D
panel will slide in over the top of the existing 3D menu
system. The animation in the panels,will be powered by
the Animate.CSS library, which will slide on the new
content. This gives us access to a quick way to create
animated elements.
Each panel will be colour-coordinated to match the
icon that has been clicked and then the panel can be
removed again by clicking a burger menu icon in the top
left to take the user back to the experimental menu.
1. Pick up from part one

This tutorial picks up directly where it was left off at the
end of part one. First link up the animate.css library,
available from daneden.github.io/animate.css, which
weve already downloaded and put in the CSS folder. This
will power the sliding on of popover content later on.
<link rel="stylesheet" href="css/animate.css"

/>
2. Content panels
There are going to be four content panels in the project
these will appear when the user clicks on one of the
icons in the menu inside the 3D scene. Add the code as
weve below to the body of the page just above the script
tags. This creates a top bar section and an area for text.
<div id="info1" class="panel hidden

animated">
<div class="head">
<a href="#" onclick="fade1();">☰</a>
<h2>Chat</h2>
</div>
<p>Text here </p>
<p>Text here </p>
</div>
3. Panel details
You can fill the text with your own content or even
images. You may notice that there is a strange code in
the link tag, this is actually the code to create the three
lines of the burger icon for the menu button. This will
take the users back to the 3D menu screen.

animated">
<div class="head">
<h2>Arriving</h2>
</div>
<p>Text here </p>
<p>Text here</p>
</div>
appropriate icon the panel will slide in from the left.

Clicking the burger icon will make it slide back to the left.
<div id="info3" class="panel hidden animated

weather">
<div class="head">
<h2>Weather</h2>
</div>
<p>Text here</p>
<p>Text here</p>
</div>
5. Five into four

Each panel will be styled up to match the colour of the
icon using CSS code the colour will be used to reinforce
the selection made by the user. There are five icons and
but only four panels. One icon is the logo of the website
so that will not link anywhere, but it will orientate the user.

animated">
<div class="head">
<h2>Events</h2>
</div>
<p>Text here</p>
<p>Text here </p>
</div>
Positioning above
The new panels added in this tutorial are

positioned on a z plane above the background
CSS panels so that they appear in front of the 3D
scene as 2D panels.
4. Panel power
The panels are constructed from regular HTML elements
and will be hidden from the site using CSS. Then linking
up the CSS Animate code when the user selects the
Left
The Animate.CSS library is used to create transitions in the

app and slide the appropriate content over the top of the
existing menu
Top left
The HTML for the panel is created that forms the structure
of the overlaid content that appears above the interface
when the appropriate icon is clicked
Top right
In the CSS the panels are styled to have individual looks so

that each icon slides content over the interface in a similar
colour scheme. This content hasnt quite fully fallen into
place in the image
53
Tutorials
Create an interactive mobile 3D interface
6. Responsive srcset behaviour

Save the HTML document for now and open the project.
css file from the CSS folder. Add on the code in the next
few steps to style the content in the panels appropriately.
The first content merely creates the generic style for all
of the panels that place this above the other content on
the page.
7. Hide and seek

When the App starts up the menu should be visible and
nothing else. The hidden class is used to hide all the
panels when the App first launches and then only as the
user taps the device screen should it be visible to the
user. The visible class was actually used during testing
but is not used in the final site.
.hidden{
display: none;
}
.visible{
display: block;
}
8. Break down the parts

After the panel is styled up, each panel will have a head
section that has a burger menu button to take users
back to the menu and a heading so that they know they
are seeing the right content on the screen. This CSS just
Know your code
HTML is the content of your website while CSS

provides the way those elements are rendered
by the browser giving a unique design. The
JavaScript part of the site provides functionality.
Top left
The Animate.CSS library is used here, and this slides the

content onto the screen with a bounce. Here the content
is just about to bounce into final position
Top right
As the weather icon is clicked you can see the panel just
beginning to be animated into position and its
transparency is just fading in here as well
Right
When the user clicks on the burger menu in the top left of
the panel the content slides back off the screen to the left
as shown in this image. This allows the menu to be
accessed again
54
allows for the head section to have the right height for
both of those elements.
.head{
height: 45px;
}
9. Position the menu

The link in the head section of the panels is the burger
menu icon and here the code is floating that icon to the
left of the screen. Its given a slight padding around the
top and left so it isnt too close to the sides. The text
decoration is set to none and ensures that the underline
doesnt appear below this.
.head a {
display: inline-block;
float: left;
width: 10%;
padding: 10px 0 0 10px;
text-decoration: none;
}
10. Lay out the heading

Now, turn your attention to the h2 heading tag, which is
made to float to the right of the menu icon. The padding
on this reflects the slightly different shape of the text and
the icon, with there being less top padding on the text.
The text is also aligned to the right so that the menu and
heading are on opposite sides of the screen.
.head h2{
display: inline-block;
width: 70%;
margin: 0;
padding: 7px 10px 0 0 ;
float: right;
text-align: right;
}
11. Paragraph settings

Below the heading there is just a couple of paragraphs,
but if this was your own design this could contain a
variety of content, from images, videos or anything else
you wish to display on a HTML page. As there is only text
in the example there is just a 5 pixel padding for the top
and bottom and 10 pixels for left and right.
p{
padding: 5px 10px;
}
12. Individual style

Each panel shares the same generic styling that has
been applied in the previous six steps. Now you need to
concentrate on giving each panel a colour scheme that
fits with the initial icon that it represents. Here the panel
is given a light green background with dark green text
and header.
13. Blue section

As in the previous step, the styling is now looking at the
individual panels. The second panel will be styled up with
a light blue background, giving a darker blue colour for
the text. The header panel of this is the reverse of that
styling with a dark blue background and lighter text.
14. Third panel

The third panel takes on purple characteristics for the
colour scheme with lighter styling for the background
and a darker header section on this panel. The colours
help to reinforce to the user the icon that theyve just
clicked on to give them a way to orientate themselves in
the mobile web site.
#info3.panel{ background-color: #d1b3ce ; }

#info3 .head{
color: #eed8ec;
Tutorials
Create an interactive mobile 3D interface
Using Animate CSS

The Animate CSS library is
a relatively lightweight
library with the smaller
version weighing in at only
52KB. This consists of one
CSS file that has
keyframes built for various
CSS movement and
animation. This saves us
the time in the tutorial of
having to put these
together and it is always
worth your while as a web
designer to build on the
shoulder of other libraries.
When you can, dont
reinvent the wheel!
To use the library, all
that needs to happen is
that the library is linked to
your page, which we did in
step one. Then, any
content that needs to be
animated must have the
class animated applied to
it. Finally, an animation
style should be applied as
a class, such as
bounceInLeft. This will
immediately call the
animation into effect.
background: #714c6e;
}
#info3 .head a{ color: #eed8ec; }
#info3 p{ color: #584356; }
15. Final panel colours

The final panel that is being styled up again reflects the
colours of the icon used to access it from the original 3D
menu created in part one of this project. This time the
colour scheme is given an orange theme with light tints
and dark shades used to create the panel. Save the CSS
file and close it.
#info4.panel{ background-color: #f5c5a7 ; }

#info4 .head{
color: #f5c5a7;
background: #b65212;
}
#info4 .head a{ color: #f5c5a7; }
#info4 p{ color: #b65212; }
16. Start the JavaScript

All of the requisite elements are now in place for the
design and content of the panels. Its just a case of
adding the desired functionality to make these panels
work. In the JavaScript code locate the global variables
on lines 56 and 57, then add this function below it. This is
called into effect when the menu burger icon is pressed
on the first panel.
function fade1(){
var change = document.getElementById(
'info1' );
change.classList.remove('bounceInLeft');
change.classList.add('bounceOutLeft');
}
17. Bounce around

The next code is for the second panel and these series
of functions take the ID of the relevant info panel then
remove the class that has made them bounce onto the
screen from the left. Once this is removed the code to
make them leave is added and the elements bounce
back out to the left.
function fade2(){
'info2' );
}
18. Use Animate CSS

The CSS styles that are being added and removed for
these sections have not been created here instead they
are from the Animate.CSS library that was hooked up to
our page in the first step of this tutorial. You can visit
daneden.github.io/animate.css to see more styles.
function fade3(){
'info3' );
change.classList.add('bounceOutLeft');}
19. Customise the animation

If you visit Dan Edens Animate.CSS site you can try out
different animation styles before applying them to your
content. Find styles that work together and make sense

with your functionality rather than choosing the most
attention grabbing animation that you see.
function fade4(){
'info4' );
}
20. Grab the link

Following this youll need to scroll down through the
code until you find the code that has the click function
event listener on the pic variable. Inside this function, add
the two lines of code in bold shown below. These lines
check that the icon that has been clicked on is not the
first icon, and if so it stores the current icons ID in the
change variable.
pic.addEventListener( 'click', function (

event ) {
console.log(event.target.id);
if(event.target.id != "0"){
'info'+event.target.id );
21. Finish the code

Now continue with the following code that turns off the
hidden property, and if it has been clicked on previously
it removes the bounce out CSS. The bounce in animation
is added to bring the panel onto the screen. Save this,
upload it to a server and connect using your phones
browser to see it all working.
55
web workshop
Create scrolling text

with colour change
As seen on deuxhuithuit.com/en/
Intro
The site opens with a
striking piece of animated
text, set against an
eye-catching colourchanging background.
Beyond home
Try the Projects page out
to see some clever
scrolling techniques, with
slower scrolling in the
centre column.
Portfolio section
A little further down you
will find, in bold black and
white, a Current Projects
section with nice hover
effects and links.
56
The scrolling text
Site Overview
Scroll down to find

another (and simpler)
version of the scrolling
text animation, we are
emulating in this tutorial.
The Deux Huit Huit site

combines carefullythought-out parallax
effects, CSS animations
and subtle hover effects.
Create scrolling text with colour change

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner
eb design agencies building their

own showcase websites must
always walk that fine line between
building a website which will
impress and engage potential clients and building a
website that will only impress other web designers.
French Canadian digital agency Deux Huit Huit have put
together a website that is simple and unfussy, but
designed to have enough fireworks to dazzle browsing
clientele without leaving them completely intimidated.
Among the bells and whistles on offer are some neat
parallax effects, particularly on the Projects page, and a
few sections that burst into life with colour-changing

backgrounds. Probably the most impressive effect that
Deux Huit Huit utilise is found directly after the intro
message on the homepage. Set over a monotone image
of Chteau Frontenac (or a model of it, anyway) are the
scrolling words Featured Project, continuously moving
across the screen in ticker-tape style.
What is most striking is how the words appear to
change from dark grey to white as they hit the boundary
of the image and then back again as they leave it. So,
how is this effect achieved? As ever, we learn by doing.
Lets re-create the scrolling text with colour change.
Stop Trying to Impress Your Peers

<comment>
What our
experts think
of the site
As mentioned in the intro, web designers can make the mistake of building
their websites with too much of an eye on impressing other web designers,
rather than luring in potential clients. Its an easy trap to fall into, leaving you
with a website that is inscrutable to the layman and useless as a marketing tool.
Richard Lamb, freelance web designer at Inspired Lamb Design
Technique
1. First layer
The effect is achieved with a series of layers arranged
over each other. We build our layers from back to front,
beginning the first set of text. To ensure that the text
flows on one line, spaces should be coded using &nbsp
and two sets of text per layer should be used.
<div id="wrapper">
<span class="scroller">
<span class="scrText dark">These Are&nbsp
;Our Words</span>
<span class="scrText dark">These Are&nbsp
;Our Words</span>
</span>
</div>
2. Second layer
Below the above code, but within the wrapper, add the
following divs and the image which will interact with the
text. While it may seem like we are using a few
superfluous divs, the CSS applied to each, with z-indexes
and positioning, will hold the entire construct together.
<div class="scroll-container">
<div class="scroll-image">
<div class="overflow-hidden relative">
<img src="img/bg.jpg"/>
</div>
</div>
</div>
3. Third layer
The third layer represents the second set of text, which
will scroll above the image. This should be placed below
the image, within the three divs applied in the previous
step. This should have a unique identifier, front.
<span class="scroller front">

<span class="scrText light">These Are&nbs
p;Our Words</span>
<span class="scrText light">These Are&nbs
p;Our Words</span>
</span>
4. First layer CSS

The initial CSS here sets the vital hidden overflow for the
wrapper, so the text does not break the boundaries of
the screen space. Absolute positioning for the scroller
builds the base for our construct. The animation
keyframes will follow.
5. Animation keyframes
Set your animation keyframes for a smooth transition
across the screen, creating an endless loop for the
scrolling text. Remember to include all vendor prefixes
for browser variations, including on the animation
declaration in the scroller div.
@keyframes scroll-left {
0% {
transform: translate(0, -50%)
}
100% {
transform: translate(-50%, -50%)
}
}
6. Second layer CSS

Use padding to set the boundaries of the container
which will hold both the image and the front text. Using
the relative rem measurements will allow us to easily
match subsequent values on the front scroller later on.
The scroll-image div is given a z-index value to keep it
behind the front text.
.scroll-container {
padding-left:8rem;
padding-right:8rem;
width:100%;
EXPERT ADVICE
Sleight of hand
This particular Web Workshop is a great example of
using CSS trickery to create the impression of
something happening which actually isnt. While it may
appear that a single line of scrolling text is changing
colour, in fact there are two lines of scrolling text, one
on top of the other, strategically set to appear and
disappear at concurrent points. It is actually a very
clever piece of trickery when you think it through and
understand the method. And it raises an interesting
point about how we should approach CSS animations
and effects.
Sometimes you dont have to figure out how to
make a particular HTML effect or animation work.
Sometimes you are better off figuring out how to
simply make it look like its working. Sure, an element
scrolling into frame on page-load is actually scrolling
into frame. Thats a simple effect to achieve. But if you
are striving to create an effect that is more complex,
dont rule out the possibility of trying different
techniques that create the illusion of the effect, rather
than the effect itself. Its not cheating to use a little
trickery, the effect is just as good and it may just make
your work a little simpler.
box-sizing:border-box;
}
.scroll-image {
position: relative;
z-index: 10;
}
7. Second layer CSS (cont)

The image itself should be given a 100% width value to
keep it from breaking its boundary. The overflow-hidden
relative div, with its self-explanatory values, can easily be
combined into one class, if need be. The hidden overflow
keeps the white text within the confines of the image.
.scroll-image img {
width:100%;
height:auto;
}
.overflow-hidden {
overflow:hidden;
}
.relative
{
position:relative;
}
8. Third layer CSS

The final layer, containing the front set of scrolling text, is
assigned the following values, not applied to the initial
text layer. A z-index to keep it at the front and a left value
that mirrors the padding of the image container, bring
the text in line with that in the first layer.
9. Text colours
Finally, assign colours to the dark and light classes, so
that each layer of text has the colour differences which
create the illusion of a single layer changing colour. A little
piece of HTML sleight of hand has been pulled off.
57
Tutorials
Build 3D experiences
with PlayCanvas
Learn how to use the PlayCanvas library, a 3D HTML5 game engine delivering
beautiful interactive experiences
58

Tutorials
TML5 Canvas has been a fantastic

addition to the webs feature set for 2D
experiences, allowing for easy
adoption among developers with
straight forward APIs, documentation, and generally
quick development times. HTML5 canvas has made the
web the go-to platform, should someone want to learn
whats involved in creating a 2D experience quickly and
with minimal fuss.
Despite 3D experiences with native web technologies
being a reality for the same amount of time as 2D ones,
there hasnt been as much progress. Even drawing
something as simple as a triangle in WebGL means
learning about things called shaders and understanding
what a buffer is. This complexity really whittled down the
number of people making engaging experiences for the
platform. Until libraries like three.js came about, a lot of
developers simply wouldnt bother as it was just too
much of a learning curve.
This is something that PlayCanvas has obviously been
aware of and tackled cleverly. There is an open source
game engine on github (github.com/playcanvas/
engine) for people who want to write code, but theyve
also produced a fantastic game editor as a web app. This
tutorial covers using the editor to create a basic scene
with a first-person viewpoint.
for creating a new project. The default platform game

and model viewer projects are both good introductions
into whats possible with PlayCanvas. For this tutorial,
create a blank project.
5. Download assets to projects

Clicking the green download button will bring up a list of
projects the asset can be added to. Once added to a
project, this asset will appear in that projects asset library
panel, ready for use in a scene.
3. Check out the editor

As can be seen above, settings and tools are on the far
left. The hierarchy panel lists all the entities available in
the scene. The 3D area is the scene. The assets panel is a
library of all assets available to the project. The inspector
displays information and tools on selected entities.
6. Add an asset to a scene

Back in the editor, the model will be in the assets panel.
1. Get started with PlayCanvas

Visit playcanvas.com and create a free account, which
makes most of the features available. The playable demo
for this tutorial can be found at playcanvas.com/
project/364550/overview/web-designer-243 Logged in
users can also view and edit the project in the editor.
2. Create a new project

The big orange + New button will bring up some options
4. Grab some assets
Play with Mip
PlayCanvas has a store of 3D assets that the

community has produced. It seems that in future some
of these may be paid for, but at the moment they all
seem to be free. Find a model that has some animations
as well as an environment to put it in.
In the scene settings the environment texture

has a Mip dropdown. The demo scene looked
odd with a Mip of 1, but a Mip of 3 blurred
everything and really created a sense of space.
Left
Shows the framing of the camera and model in the scene.

The wide angle on the camera will make the model appear
closer in-game than it looks here
Top left
Detailed inspector view of the scene and environment

settings. Camera and environment are the main focus
here, but experimenting with fog can be interesting
Top right
The scene with just the Playbot model and the 3D

environment assets downloaded and then added to the
scene, blurred using the Mip dropdown
59
Tutorials
Build 3D experiences with PlayCanvas
The model will have a 3D preview as an icon and also

have meshes in the inspector panel. The environment
will look like a cube net. Click and drag both into the 3D
area to add them to the scene.
that can be moved with WASD and Arrow keys, with the
mouse controlling the swivel.
12. Controlling the model

To control which animation is playing, a script
component will be required. Select the model in the
hierarchy, and over in the inspector panel add a new
script component. Call this script model_name_control.js.
13. Anatomy of a script

All new PlayCanvas scripts look similar to this one. The
code registers a script called playbot_control and makes
the entity object (representing the 3D model in this case)
publicly available. This entity is then returned for the
PlayCanvas (pc) engine to consume.
7. Scene & environment settings

Click the cog at the bottom left of the editor to see the
options that are available to you appear in the inspector
window. The tutorial scene took the camera exposure
down, and then it bumped up the intensity of the
environment. This was because the highly reflective
Playbot model was too bright.
8. Moving the camera

To make the scene interactive, add a fly camera script
component to the camera entity in the hierarchy using
right-click. Fly camera creates a first-person-view camera
9. Tweak the fly camera

Test playing the game will reveal the camera moves very
quickly. To create a scene where the player can slowly
explore the model and examine it up close, take the
speed down, reduce the near clip, and finally increase the
field of view.
10. Compose your scene

Next, lets look at using the translate tool on the far left of
the editor and then put the entities in their default
positions. The demo for this tutorial starts off with the
player looking Playbot directly into the reflection in his
soulless eyes.
11. Assign animations
Animation setup
Animations should be listed under the animation

component as assets. Activate is required for
animations to play, and loop is required for
animations to loop.
Top left
When adding an animation from the animation assets

area, the PlayCanvas editor will highlight all animation
assets in the projects library
Top right
Adding a script from the scripts area will cause the

PlayCanvas editor to highlight them in the library. New
scripts can also be added here
Right
The mini metal titan Playbot in midstride, running across

the featureless landscape, the sun shining behind him and
infinity in front
60
Selecting the model entity in the hierarchy will present

you with a few options inside of the inspector panel. Click
to add a component and then choose an animation.
From there you will now be able to add the animations
that came with the model. If there arent any such
animations, then you will need to work on a different
model from the store.
pc.script.create('playbot_control', function
(app) {
var Playbot_control = function (entity) {
this.entity = entity;
};
Playbot_control.prototype =
{
};
return Playbot_control;
}
);
14. The Initial function

Extend the first function to setup some event listeners
and the default state animation to use on the model.
blendTime float will be used to blend different animations
together, avoiding a snap between the two. Think of this
like a main function.
var Playbot_control = function (entity) {

this.entity = entity;
this.blendTime = 0.2;
this.setState('idle');
app.keyboard.on(pc.EVENT_KEYDOWN, this.
keyDown, this);
Tutorials
Build 3D experiences with PlayCanvas
Try adding lights

and shadows
To really take the scene to
the next level, try adding
in a light source as well as
a surface, so that the
model can cast shadows.
A plane works well for the
surface, as it doesnt need
a material, but under the
Shadows section in the
inspector, the Receive
checkbox will need to be
checked for this.
Its worth playing with
the different types of
lights that PlayCanvas has
to offer as each have
different options that
change the look of light
and shadow.
The demo scene uses a
directional light with the
intensity taken down
slightly. Upping the
shadow resolution will
give a better quality
shadow, and reducing the
shadow distance will make
it less blurry. The Cast
Shadows checkbox must
be ticked.
app.keyboard.on(pc.EVENT_KEYUP, this.keyUp,
this);
};
15. Extend with prototype

After defining the initial function, the prototype should be
used to set up further variables and define further
functions. This way long functions and other complicated
logic is visually separated from the initial function, or
main function.
Playbot_control.prototype = {
};
16. The setState function

In the initial function there was a call to a function called
setState which was going to set the animation the entity
was using. The code calls part of the PlayCanvas API
which plays animation on entities and passes it the name
of the animation, with the blendTime defined before.
setState: function(state) {
this.state = state;
// Set the current animation, taking 0.2
seconds to blend from
// the current animation state to the start
of the target animation.
this.entity.animation.play(states[state].
animation, this.blendTime);
},
17. The state object

The previous step passed the name of an animation
using this object. Abstracting animations to states like
this allows for simpler names and concepts to be used in

the codebase and also means less typing should your
model come with long animation names.
var states = {
idle: {
animation: 'Playbot_idle'
},
run:
{
animation: 'Playbot_run'
}
};
19. Play testing time

Finally, the scene is ready for play testing. Clicking the
play icon will bring up a launch menu. Launch will launch
the game in a new tab. This is the full experience, and
what players would get if the game were published.
20. Project Page

Back on the main PlayCanvas website, there will be a
project page for the game that has just been created.
Here a preview image can be added, along with
developer and community comments, and other
information about the project.
18. Key binding

The final part of the puzzle is to bind the state changes
to key presses so players can interact with the scene.
The code will play the run animation while a user holds
down the spacebar key, going back to its idle state upon
its release.
keyDown: function(e) {
if(this.state != 'run' && e.key == pc.KEY_
SPACE) {
this.setState('run');
}
},
keyUp: function(e) {
if(e.key == pc.KEY_SPACE)
{
this.setState('idle');
}
}
21. Publish the game

On the publish tab theres an option to publish the game,
which will make a build of the game public through the
PlayCanvas website. Publishing a build allows for
selection of particular scenes. When publishing is
complete, PlayCanvas will craft a unique short URL for
the game.
61
SAVE
UP
TO
ON A GIFT SUBSCRIPTION THIS
CHRISTMAS
JUST
GADGET
Packed with the latest, coolest and
most exciting tech
12 issues, save 50%
The action-packed science and

technology magazine
13 issues, save 46%
ALL ABOUT HISTORY

Bringing history to life for the
whole family
13 issues, save 49%
HISTORY OF WAR
The stories, strategies, heroes and
machines of historic conicts
12 issues, save 50%
DIGITAL PHOTOGRAPHER
Inspiration, tutorials and tools for
enthusiasts and professionals
12 issues, save 50%
RETRO GAMER
The number one magazine for
classic gaming
12 issues, save 50%
ALL ABOUT SPACE

Discover the wonders of the solar
system and beyond
13 issues, save 49%
SCIFINOW
The number one magazine for sci-,
fantasy and horror fans
12 issues, save 50%
29.99
10 ISSUES, SAVE 50%
ORDER HOTLINE 0844 856 0644**

ONLINE AT www.imaginesubs.co.uk/xmas151
BY POST
Send your completed form to:

Imagine Subscriptions, 800 Guillat Avenue,
Kent Science Park, Sittingbourne, Kent ME9 8GU
SUBSCRIBE TO
ANY MAGAZINE
FOR JUST
29.99
Exclusive Christmas offer

Save up to 50% on the
shop price*
YOUR DETAILS
Title
Surname
Address
First name
Postcode
Telephone number
Mobile number
Email address
This subscription is Q for me Q a gift
Country
DELIVERY DETAILS (IF DIFFERENT FROM ABOVE)

Title
Surname
Address
First name
Postcode
Telephone number
Country
Never miss an issue of your

favourite magazine
UK 29.99 Magazine name
Free delivery, direct to

your door
FOR MULTIPLE ORDERS PLEASE CALL THE ORDER

HOTLINE 0844 856 0644**
Ideal Christmas gift - that

lasts all year!
Free e-card to send
when you buy as a gift
PAYMENT DETAILS
CHEQUE
Q I enclose a cheque for

(made payable to Imagine Publishing Ltd)
CREDIT/DEBIT CARD
Q Visa
Q Mastercard
Q Amex
Q Maestro
Card number QQ QQ QQ QQ QQ QQ QQ QQ
Expiry date QQ QQ
Issue number (Maestro) Q Q
Signed
Date
All subscribers receive a monthly e-newsletter of news and offers.
Please tick if you would prefer not to receive any promotional material from Imagine
Publishing:
by post Q
by telephone Q
by email Q
Please tick if you would prefer not to receive any promotional material from other companies
by post Q
Use code XMAS151 for this extra-special price.

nd
Order by 2 December to start your subscription

the rst issue after Christmas.
** Calls will cost 7p per minute plus your telephone
companys access charge.
by telephone Q
by email Q
Please tick if you DO wish to receive such information by email Q

TERMS & CONDITIONS
* Titles are priced at 29.99 saving up to 50% on the shop price. For the full list of titles and issue details
please visit www.imaginesubs.co.uk/XMAS151. This is a UK-only offer, for overseas offers please visit
www.imaginesubs.co.uk/XMAS151 or call +44 (0)1795 592 869. Gift subscriptions ordered by 2nd
December will begin with the first issue on sale January 2015 orders after this date will start with the
following issue. You have the option of sending a digital gift card so please include your email address in
the form above. Non-gift subscriptions will start with the next available issue.
Offer ends 31st December 2015. Promo code XMAS151
THE NEXT GENERATION OF WEB DESIGN IS HERE. BUT HOW WILL THE RULES
C H A N G E A N D W H AT TO O LS A N D P LAT F O R M S W I L L BE A D E S I GN E R S FR I E N D ?
THERES A LOT TO CONTEMPLATE WHEN DESIGNING FOR THE WEB. ITS NOT EASY, AND IF YOURE READING THIS
YOU PROBABLY HAVE A GOOD IDEA OF WHAT WERE TALKING ABOUT
onsider that designing for the traditional web of

were finding that there are some general guidelines to
today is still a two-dimensional medium. The
follow. Some of the best and brightest minds are out on
audience is looking at a flat screen. They scroll up and
the front lines discovering the sort of guidelines we need
down, sometimes left and right, on a two-dimensional
in this brave new world of user experience.
plane. Your goal is to make those two dimensions convey
There are new guidelines to define and explore, but
meaning and order in a way that touches their hearts
there are also many design principles with which we are
and minds. You want to give them an experience
already familiar and stay the same. The basic way
that is both memorable and meaningful,
the human eye works stays the same.
within the confines of two dimensions.
Principles such as contrast, colour, and
WEB REALITY
Now consider how you would
pattern recognition are still valid tools.
The prospect of designing for
accomplish the same goal in a
These concepts can still be useful as
a new dimension is a very
three-dimensional medium. There
the building blocks in our new
exciting one. Check out the Catch
are new factors to consider such as
virtual medium. We may even be
the Dragon site www.
the users head angle and their
able to explore them further.
catchthedragon.nl. This
viewing radius. How do you make
But VR is just for videogamers,
combines and 360-degree
elements touchable in a manner that
right? you may think. Virtual reality
video and VR.
is intuitive without the benefit of haptic
has the potential to change the web
feedback? How do you deal with
too, and there is work happening in many
locomotion in a 3D space when a user is
arenas on just that. The idea of the metaverse
actually sitting or standing still? Does your UI move
is not about a game, but a medium where the virtual
with the user or disappear altogether? How do you use
and the physical realities come together to form a new
audio cues to get a users attention so that they turn their
way of life, change it forever, and make it better.
head? Were no longer designing in a flat medium, but
As web designers and developers, we can be at the
within all the space around a person.
forefront of this new digital medium. We already are at
It may seem like there are fewer constraints and that
the forefront of the current prolific digital medium; the
can be freeing, but also scary. We know that with some
web. The bleeding edge is sharp, but we roll with it in
form of constraints, or rules, that it can be easier to work
stride and push the boundaries of what is possible. This
within those confines. It may seem like the skys the limit
is just another step into the unknown. We should do so
when designing for a three-dimensional medium. But
with confidence and enthusiasm.
Education
The proliferation of online courses is just getting
started. Once you can immerse yourself into an
online classroom, the possibilities could be
endless. Check out Unimersiv.com for a glimpse
into some of whats already available.
Socialising
Were already connected with each other through
Twitter, Google+, Facebook, and other social
networks. Imagine logging in and walking around
in these sites with their own architecture and
content with your friends. Check out Beloola.com
for one companys vision.
Relaxation
Wouldnt it be great to re-visit your most relaxing
vacation spot anytime you wanted? With capture
devices becoming ubiquitous in the form of
mobile phones, and lately 360 cameras, you may
be able to visit wherever you like from the comfort
of your home.
Creation
Jerad Bitner
Technical project manager
and VR enthusiast
VR is the next medium for the

web and should become a natural
transition for web developers and
designers. My recommendation is
to start studying architectural
design now so this can be applied
to your virtual worlds.
VR is rapidly becoming a new and exciting

medium for artists, both young and old. For
examples, see this video of a classic Disney
animator drawing in VR (vimeo.com/138790270),
and check out this augmented reality colouring
book for children (youtube.com/
watch?v=SWzurBQ81CM).
Exploration
So many countries, so little time. With 360 videos
being taken worldwide of some of the most
beautiful and remote places, you can now fully
immerse yourself into these places to make you
feel like you are really there.
A LOOK AT SOME OF THE MAJOR

PLAYERS IN THE HMD MARKET
Virtual reality is currently nothing without a headset.
This is the hardware that makes the magic happen and
there are various headsets in various stages in their
production lifecycle. Most VR headsets are set to come
to the consumer in early 2016.
The big name in the world of virtual reality is Oculus
Rift, or OR as it will inevitably become known. This is
the trailblazer for bringing VR to the public and
Facebooks purchase of Palmer Luckeys device means
it will reach every corner of the market. As with any
new tech the pleasure of owning such a device will be
great but it wont be cheap. But, the budget option
(less than 5) is already out there in the shape of
Google Cardboard. Go get one now.
Oculus Rift
Samsung Gear VR
oculus.com/en-us/rift/
oculus.com/en-us/gear-vr/
Facebook bought Oculus for $2 billion (1.3 billion) to

get their hands on this one. The consumer version is
set to release in Q1 of 2016 and is the default for
almost all VR software. Its to ship with hand controls.
A product of Samsung and Oculus, the Gear VR is a

wireless headset used with a Samsung phone. The
headset can be found for $99 (65), but the Samsung
phones are typically around $700 (464).
VR COMES WITH A NEW SET OF EXPECTATIONS FROM USERS, AND TOOLS

WITH WHICH WE CAN CONNECT THEM TO OUR MEDIUM
Interfaces will no longer constrain themselves to
two-dimensional screens sitting on a desk. The screen
appears to disappear with a screen mounted to your
head. As you move your head there is new canvas space
available all around. The head-mounted display gives a
sense of depth and scale, which we can utilise and take
advantage of. Instead of a screen in front of us, we can
have browsers and apps represented all around us.
Additionally we want to think of how to organise these
apps in the space around us. Spatial organisation of our
UI components can help a user to remember where they

can find things. Or it could degrade into the nightmare
desktop weve all seen with a massive clutter of icons.
But even then, our brains make sense out of that chaos,
as long as were the ones who created that said chaos.
Placing typical UI elements in such an environment
can be tricky. It can be hard to work out what is optimal
when the skys the limit. To get an idea of some factors
involved in finding the level, take a look at some research
by Mike Alger which is in turn based on useful
observations provided by Alex Chu of Samsung. Algers

research concludes that a measurable area looking as
follows is what is optimal for user interface elements.
This conclusion is based on several factors as
explained by Mike Alger in his paper. The first is the field
of view when a user is looking straight forward. This
distance is variable per device, but to give you an idea,
the Oculus Rifts FOV is 94.2. The second factor is the
distance a user can comfortably see. This distance is
around 0.5 to 1 meters from the user due to how the
eyes try to focus more and strain after this distance.
Oculus recently recommended a distance of 0.75
meters to developers. The third factor is the head
rotation of a user. Horizontally the comfort zone is
about 30 from the centre with a maximum distance of
55 to the side. The fourth is head pitch, or the distance
up and down that is comfortable for a user to position
their head. Upwards this is comfortable up to 20 with a
maximum of 60. Downwards this is comfortably 12
with a maximum of 40.
Creating memorable experiences

An interesting side effect of experiencing virtual reality
through a head mounted display is that its more
Have you ever watched or read Dream Catcher? Well,

within the story, one of the main characters has what
he calls a memory warehouse. He can recall any given
memory as hes built a virtual warehouse in his mind.
He can walk around the building and find any memory
due to its relative position to other memories. As such,
he follows a path to locate a particular memory.
This technique is not as science fiction-esque as a

movie, though. The memory warehouse or memory
palace is a system of storing information in your brain
by creating an imaginary building and filling it with
imagery of what needs to be recalled. You can learn
how to build your own memory palace at wikihow.
com/Build-a-Memory-Palace.
Our brains were always meant to store

information to stay alive, like where you can find
food and resources, how to get home, and which
plants are edible or poisonous. This is most likely
why we are so good at remembering things
visually and spatially.
By creating virtual worlds in which we can see
and hear, we are better able to create memories in
the human brain, so its important that the
experience be a positive and even desirable one
for our users.
Google Cardboard
HTC Vive
Razer OSVR
google.com/get/cardboard/
htcvr.com
razerzone.com/osvr
A much cheaper version of using your phone as a

head mounted display, the Cardboard is actual
cardboard and works with many phones. The
Cardboard app is available on Android and iOS.
HTC and Valve have partnered on this headset which

comes with hand controllers and multiple light sensors
for room-scale VR applications. It is due to be
available in late 2015.
This is a little different in that it is the first open source

virtual reality headset. The goals of the project are to
make the parts available for you to build and upgrade
over time.
directly tied in with your memory due to the feeling of

being inside a new environment rather than watching it
Another useful tool is how scale can affect the user.
on a screen. Our brains can retain a lot of data that we
Creating a small model of something like a robot can
gather from on-screen reading and watching, but
make the user feel powerful, as though the robot were
feeling as though youre a part of it all creates
a cute toy. But scale the robot up to three or four times
memories of the experience, not just retention of what
the size and its now far more menacing. Depending on
we learned through reading.
the memory youre trying to create, scale can be
Creating memories and engaging a user on a
useful in shaping the experience of the user.
level where they can almost forget that
Steady
what they are experiencing is virtual is
Horizons
what we refer to as immersion.
When you are creating
Visually stunning scenery can affect
Immersion is at the heart of VR
immersive environments, make
the immersion experience as well.
applications. Being a core goal of a
sure you keep your horizon nice
A beautiful sunset, or a star-filled
VR experience, we should try to
and steady for your users in order
night sky can give the user an
understand the factors involved
to avoid inducing the all-tooenvironment to which they can
and the techniques that are quickly
often experienced
relate. Relating to known places and
becoming best practices when
VR sickness.
scenes is an effective means of
trying to achieve the creation of an
creating memorable experiences. Its a
immersive experience.
means of triggering other similar memories
and feelings and then building upon those with
Positional audio is a way of seeing with your ears.
the direction you are trying to take the user. An
Ingrained in us from early evolution of having to be
immersed user may have been there before, but now
aware of predators, our brains have attuned themselves
there is a new experience to remember.
to figuring out exactly where a sound comes from in
relation to ourselves. A recognisable sound that is
Teaching someone a new and wonderful thing can also
behind you and to your left can quickly trigger not only
be a useful memory trigger. Do you remember where
an image of what made the sound, but we can
you were when you first learned of HTML, or
approximate where that sound came from. It also
Photoshop? The knowledge that tends to stick out the
triggers feelings within us. We might feel a measure of
most to us can trigger pretty powerful images and the
fear or soothing depending on what our brain relates
feelings that we memorised in those movements.
this sound to and how close it is to us. As in real life, so
Heralded by some to be an important catalyst in
it is in VR. We can use positional audio as cues to gain a
changing how we learn, VR has the potential to
users attention, or to give them information that is not
revolutionise education. Indeed we are better able to
presented visually. Remembering a time when you
create memories through the use of VR, and what
were in VR and a sudden loud sound scared the pants
better memories than those of learning new and
off of you can immediately recall a memory of
interesting things?
everything else you were experiencing at the time.
Scale can be a powerful tool
Create beautiful scenes
Use sound to draw attention
Make learning memorable
Advertising in VR is a whole new field, and

companies are just starting to wrap their minds
around the possibilities of connecting with their
intended audiences in a whole new way.
Advertisers and marketers have been trying
new ways of selling products for ages. One of the
basic principles of selling or marketing is making
the consumer identify on a personal level with a
product in order for them to want to buy it. Many
tactics are engineered and employed to get
people to buy things, but almost all of them come
down to this one over-arching goal of having a
person identify with the product.
VR could be a huge catalyst for achieving this
goal. Visiting a shop in virtual reality where you
can walk around the wares, see their size and
shape, hold them up with your virtual hands to
really identify the products dimensions, and even
obtain additional information through a display of
information attached to the product all of these
are possible. Or perhaps youre taken to a whole
new place when you pick up the object to
experience the use and operation of the product.
All of these are additional ways that a person can
identify with a product on a deeper level than a
two-dimensional representation allows.
There are some great examples of how VR is
being used in the commercial space. Trillenium
(trillenium.com) is just one of the many. They are
looking to bring the retail experience to shoppers
by creating virtual stores that allows users to
browse through shops as in real life.
TAKE A LOOK AT THESE STANDARD EXAMPLES OF

USING WEBVR FOR CREATING VIRTUAL ENVIRONMENTS
Chrome Experiments for VR

vr.chromeexperiments.com
Utilises WebGL and Three.js to create a virtual
environment compatible with your smartphone and
Google Cardboard.
WE INVESTIGATE SOME OF THE TOOLS AND PLATFORMS THAT DEVELOPERS ARE USING TO BUILD,
DISPLAY, AND COLLABORATE ON THEIR WORK
Unity 3D
store, and has great documentation. The graphics are

Unity is one of the most ubiquitous of tools used today
more advanced and realistic by default and the learning
for VR development. At its heart its a game engine. It has
curve is similar to Unity. Many of the VR demos built with
a direct VR mode to preview your work in an HMD which
UE4 are much more life-like and smoother to navigation
can really boost productivity by designing for
within. It provides great performance with the
VR almost within a virtual environment.
conveniences of a modern editing
WebVR
Unity is quickly becoming the default
environment. UE4 itself is also cross
Standards
tool for VR development due to its
platform but exports to slightly fewer
When you are looking to
ease of use and the ability it affords
platforms than Unity. You can find
develop for the web and VR, take
for quickly making prototype VR
out more about UE4 at
a look at the WebVR standard
applications with it.
unrealengine.com.
drafted by Mozilla and Google:
Theres a huge community
mozvr.github.io/webvr-spec/
around this tool and so there are a
These are Autodesk products for
webvr.html
plethora of resources and
modelling, animation, lighting and VFX.
documentation to learn from. A market
They dont have VR support by default but
of 3D assets can get you up and running
through pricey plugins instead. AutoCAD and
in a short amount of time. If youre familiar with
3ds Max are long-time standards in the architectural
C++ or JavaScript, you can get into the scripting pretty
design industry and have some of the most precise tools
easily as well. All major HMDs are supported and its
in their UI. Like almost all GUIs for building 3D
cross platform. You can even export to WebGL. Unity
environments and drawings, these tend to be quite
can be found at unity3d.com.
massive UIs with a lot of tools hidden behind menus,
submenus, and toolbars. Learn more about 3ds Max,
One of the main competitors of Unity 3D, Unreal Engine
Maya and other Autodesk products at autodesk.com/
is also a gaming engine with VR integrations, an asset
products/maya/overview.
3ds Max & Maya
Unreal Engine (UE4)
Blender
Blender is quickly becoming a favourite modeller for VR
developers. Its free and open source software written in
Python. Theres a huge community of people devoted to
this software and its use. Many websites provide tutorial
videos, forums, and documentation. The softwares
official documentation is also quite impressive. Mainly for
modelling, UV mapping, lighting, rigging, and animation,
you can export your models to a multitude of formats
that can then be used with many other tools. Theres
even a great plugin for exporting your creations into
JanusVR with a free open source plugin at github.com/
void4/FireVR. You can download Blender and use it for
free at blender.org.
SketchUp
Googles SketchUp is a basic modelling application with a
very low learning curve that can get anyone up and
running in a short amount of time. The tutorials on the
website are very useful, not only teaching the basics of
the software, but also giving introductory lessons to
basic 3D modelling concepts. You can quickly learn the
basics of modelling with SketchUp and then move onto
more advanced tools like Blender if you desire. Its really
great for modelling, quickly learning the lingo, and then
SceneVR
scenevr.com
With multiuser support, this metaverse is built on
Three.js and NodeJS, with its own HTML-like markup.
INSPIRIT
Quake 3
mozvr.com/projects/inspirit
media.tojicode.com/q3bsp
Based on Three.js, built in Blender, and utilising the

Web Audio API, this example of virtual reality will
knock your socks off.
This is a working version and level rendered of the

game Quake 3 in WebVR. You can check out its source
here: github.com/toji/webgl-quake3.
moving onto bigger and better things. You can grab a

free trial version of the software at sketchup.com.
mode that you can use with Google Cardboard,

Samsung VR, or other headsets that are built to be used
in conjunction with a smartphone.
GearVRf
The GearVR framework (GearVRf) is an open source VR
rendering library for application development on
VR-supported Android devices. While many of the other
tools can export Android or iOS applications to use with
your phone, this is an Android native framework for
developing VR applications. You can dig into this one
more at gearvrf.org.
Three.js
This is a JavaScript library which works as a layer on top
of WebGL. It has many helpers and abstractions that
make working with WebGL much easier than the WebGL
API alone. WebGL is an OpenGL implementation within
modern browsers such as Chrome, Firefox, and Safari.
There are some excellent applications being developed
with Three.js which utilise 3D design to create anything
from fun demos, to multiplayer worlds and games.
Most WebVR implementations are built using Three.js
due to its ease of use and in part due to how popular
JavaScript has become. Doing 3D graphics in the
browser is hardly done without Three.js. Check out
github.com/borismus/webvr-boilerplate to get started.
Most browsers are still struggling with headset device
support, but theyre getting much closer to being
included in the main builds of modern browsers like
Chrome and Firefox. However, most phones can be
detected with github.com/borismus/webvr-polyfill and
if turned sideways, they can be switched to a dual display
Vizor.io
Vizor is an interesting take on a WebVR editor in your
browser built with NodeJS and Three.js. Its a visual
programming environment for WebGL, WebVR and
other HTML5 APIs. It features live preview, data flow
visualisation, network communication, publishing,
unlimited undo, and a catalogue of presets that can be
used as modular building blocks. Complex logic can be
nested in subgraphs and they can be rendered directly
to a specific render target, or simply used as a texture.
Loops are modelled as nested graphs that are evaluated
once per loop iteration. All within your browser. Give it a
try at vizor.io.
SceneVR
Scene is an open source platform built using WebGL and
Three.js for the client and NodeJS for the server side and
multiplayer component. With Scene you can create
virtual reality scenes using a simple HTML-like markup,
JavaScript, and a subset CSS. This approach makes it
quicker and less tedious for the web development
community to get involved and familiar with designing
for VR. You can create games like Puck-man (scenevr.
com/ws/puckman.scenevr.hosting/game.xml), or just
import a model and show it off to your friends. Virtual
environments built using SceneVR are even somewhat
compatible with our next tool, JanusVR. Try it out at
scenevr.com or read more at docs.scenevr.com.
Many apps are built with VR in mind anything

from video games, increasingly implementing VR
support, to desktop apps that enable you to have
a VR desktop. While much of the UX and useability
side of VR is being explored, many of these
applications are already extremely compelling.
A great place to start is the Oculus Share site,
with hundreds of games and demos for VR already
in the making, and thats just for the Oculus Rift.
There are many more being created for your
browser in WebVR, and for Android and iOS
devices in their respective app stores.
You can also check out some exploration into
journalism with VR. Theres a great piece created
for LA Times on graphics.latimes.com/marsgale-crater-how-we-did-it/ which was created in
WebGL for WebVR. You can experience this in VR
using your phone and Google Cardboard, or
simply go to the website graphics.latimes.com/
mars-gale-crater-vr.
JanusVR
Janus is more like an actual web browser for VR than a
development tool. Its a platform in the way that SceneVR
is a platform, and while the client is closed source and
built in QT5, the server-side component is open source
and written in NodeJS. Janus has full Oculus Rift support
with avatars and some hand control via the leapmotion.
com Leap Motion controller.
Virtual environments are written in much the same
way as a more traditional website is created. An
HTML-like syntax is used to set up rooms with basic
JavaScript support. As virtual environments are just
websites in Janus, you can serve them up like a
traditional site, using whatever server you like, hosting it
anywhere. Its distributed just like the web of today.
Within Janus you can hit tab to create a portal to a
new website, in much the same way you enter an
address into your usual web browser. Click the portal and
walk through to a new website, or room. You can even
place the Janus markup inside a traditional website
within comment tags so that when you view the site with
a typical browser, you see your regular website with
parsed HTML, and Janus sees the 3D version.
Janus lets you edit the code of the room from directly
within Janus, and save. This is one feature making it a
popular option for web developers to start the transition
to building VR. Janus even has built-in multi-user support
so you can walk around the internet with your friends,
and talk to them via the built-in voice chat support. Its a
lot of fun and has a very low learning curve, especially if
youre already familiar with web technologies.
HOW VR & AR COULD JOIN

FORCES FOR A NEW REALITY
Virtual reality consists of creating new worlds to
immerse yourself and others within. It replaces
the world you see with one created for you. There
are inherent problems with this when it comes to
locomotion its best experienced standing in one
place or sitting in a swivel chair so that the user is
not getting tangled in the cords, or bumping into
real-world objects. Most VR applications do not
take into account the actual physical surroundings
of the user.
Augmented reality deals with creating overlays
onto the real world in order to enhance it in some
way. AR takes into account the world around you,
JOSH CARPENTER (PRODUCT DESIGN LEAD ON THE MOZVR TEAM)
letting you see it and navigate within it but also
REVEALS HOW MOZILLA ARE BUILDING THE NEXT-GEN OPEN WEB
changes it in ways to make it more useful or
end of the year WebVR will be plug-and-play in Nightly
provide new experiences interacting with it. You
Q . What is the MozVR mission?
channels of Firefox desktop and Android. It will fully
can walk around with AR devices untethered by
To help build the next great generation of the open web
support the Oculus SDK. It will run at the native refresh
cables. Theres typically a camera which you may
by upgrading it for high-performance virtual reality and
rate of VR headsets, eliminating previous performance
see through, or perhaps light is projected directly
all forms of immersive computing beyond. We believe it
ceilings. It will be based on a new version of the WebVR
onto the retina to create pixels that appear to the
is the imperative of those of us who love the open web
API that will enable link traversal in VR. And it will be
user to be in the real world. This is the area that
to be proactive about extending it early into promising
products like MagicLeap (magicleap.com) are
frontiers like VR, so that it is present for developers and
concentrating on.
users from day one, and awesome.
Theyre fairly independent concepts but
already were looking for ways to make them
Q . Who works on the MozVR team, how did it come
converge. Imagine a device that could
together and how is it funded?
let you see and interact with the real
Were a group of designers, engineers, and
Liv Erickson @
world until you want to watch a
researchers working from the office of
WEBGL IS HARD. A-FRAME IS
misslivirose
movie with your friends in VR. At
the CTO, an organisation within Mozilla
GOING TO CHANGE THAT
This is the account for a VR & AR
that point it would take up your
that works to invent the next
developer at Microsoft who often
entire field of view and provide
WebGL is the backbone of todays WebVR. It has
generation of the web platform. Our
writes a lot about teaching VR &
a more virtual experience
amazing 3D performance and broad adoption.
team includes both full-time members
AR as well as sharing her
rather than augmented.
And its going to get much faster in the coming
such as myself and Vlad Vukicevic
experiences as she learns
The web is a concept that
year, thanks to new tech like WebGL 2 and shared
(co-creator of WebGL), and passionate
more herself.
works with both, either by
memory. That said, we love the accessibility of
volunteers who just want to work on
re-imaging webpages as virtual
HTML and CSS. Its critical for the growth of
something they believe in deeply. It was two
places you can interact with, or by
WebVR that as many people as possible can create
of us to start with, and weve been expanding
overlaying information from the web onto
VR experiences, and HTML and CSS are much
the team in response to positive feedback.
existing real world objects. The point is that the
more widely known than WebGL. To make it easier
underlying network of the internet itself can be
for more people to create VR content, weve built
Q . To experience WebVR, designers, and developers
applied to and can support both mediums in very
A-Frame, a library of building blocks for the VR
need to download the latest Firefox Nightly and
useful ways.
Web that enable developers to create responsive
Add-on. At what stage would you say development is
VR experiences with simple markup, no WebGL
currently at?
knowledge required. Were very excited to ship it
Setting the table. In 2015 our focus was establishing
by the end of the year.
critical baselines for performance and ease of use. By the
Magic Leap is a company bringing the VR and AR

experience together
much more accessible for developers, thanks to new

developer tools like A-Frame and Vizor.
Q . Firefox Nightly currently offers support for Android.
Are there any plans to add iOS to the list?
Firefox for iOS is very new so its too soon to say how it
will evolve, but our team would love to see WebVR
running inside it eventually, as is the case with Firefox for
Android. In the meantime, the great thing about WebVR
is that it runs wherever WebGL is available. With WebGL
enabled by default in iOS since version 8, developers can
create VR experiences for iPhones using solutions like
the WebVR Polyfill from Google engineer Boris Smus.
Q . Oculus Rift is the headline headset for VR. But
which hardware is getting you excited?
All of it! Theres so much to choose from. Multiple
companies approaching the market from very different
angles means we have an amazing array of hardware
coming, from low-cost mobile solutions to high-end
room-scale rigs. I personally have a soft spot for the
Vives full-positional tracking and motion control. Mice
and keyboards are wonderfully efficient input devices,

but theyre kinesthetically constrained. I want to design
like how Jiro makes sushi, with fluid motion and freedom
of movement. The hardware for that is going be a reality
soon, and I cannot wait.
Q . Finally, we are only at the beginning of what is a
very exciting future for the web. Where do you think
WebVR will be in 12 months time?
Youll put on your headset, and surf the web. Gliding from
link to link, into experiences that are worlds, not sites.
These experiences will satisfy new jobs to be done,
emphasising what is uniquely awesome about VR: awe,
immediacy, empathy, and so on. Youll still use your
phone and your laptop to book a flight. But youll preview
the destination in VR. Meanwhile, native VR will be
amazing, but WebVR will add an essential
complementary parallel. Lower friction, more content,
and truly connected with the rest of the digital world, not
just the other handful of people who own the same
headset as you. Were extremely excited about the next
12 months. Its going to get very, very interesting.
A COLLECTION THAT WILL

MAKE YOUR VR BETTER
Cardboard Design Lab

bit.ly/1X2cpU7
A set of intrinsic rules that you need to know
to be able to respect physiologically and
treat your users carefully. Google has
regrouped some of these principles in an
app so you can learn through this great
immersive experience.
WebVR Information
webvr.info
This is a convenient website that has lots of
links to information regarding the WebVR
specification, how to try it out, and how to
contribute to its formation. Its a great quick
stop for getting into the nitty gritty of the
idea behind WebVR and why.
James Deeley
Creative strategy director at Amaze
Virtual Reality has had a lot of excitement and
buzz recently. Yet, for it to be around for the long
term, brands are going to have to start getting
smarter in how they use it, particularly if it is to
avoid being another 2015 gimmick. We all expect
VR to have a big future in gaming and immersive
brand and retail experiences, but to reach the
everyday it will also need to offer something for
the home and contribute to the way we live our
lives today, and also tomorrow.
The smart approach is to see VR as a part of a
wider technology evolution, all built around the
individual, connecting to an ecosystem of devices,
cloud platforms and intelligent spaces.
This mixed reality will blend virtual reality

with augmented reality, ambient and in-store
technology and wearable devices.
We know that the next wave will move VR on
from being just a headset experience and extend
it into the wider environment. This might be via
the use of gloves, sensors and connected devices,
affecting the way we interact and control our
involvement, and that development has a real
purpose beyond just the wow factor.
The next leap forward will be to make the VR
world live using it to experience live events, to
control perspectives and go deep inside stories
and experiences. Then finally, VR will make it into
the home. Like all truly vital technology, for VR to
grow and become part of our everyday it needs to
start to disappear, to be so simple to use and so
beneficial that we dont think twice about it.
3D User Interfaces: Theory and Practice

bit.ly/1T3aBV7
This book addresses the critical area of 3D
user interface design a field that seeks to
answer detailed questions that make the
difference between a 3D system that is
useable and efficient and conversely, one
that causes user frustration, errors, and even
physical discomfort.
Oculus Developer Center

developer.oculus.com
Signing up for an account here can give you
access to the developer forums which
contain tons of nuggets of information and
discussion about VR, best practices, and
shared experiences by other VR developers.
Whats new with
Modernizr?
AFTER YEARS WITHOUT A MAJOR RELEASE, MODERNIZR 3 WAS PUBLISHED
IN SEPTEMBER 2015, JAM-PACKED WITH NEW FEATURES AND IMPROVEMENTS
72___________________________________________________________ feature
Whats new with Modernizr?
Why you need Modernizr

THE SECOND MOST USED JAVASCRIPT LIBRARY ON THE WEB, AND WITH GOOD REASON, MODERNIZR HELPS
YOU CREATE GREAT WEBSITES FOR BROWSERS OLD AND NEW
f you have worked on a website in the last five years,

you have undoubtedly run into Modernizr. Browsers
add new features to the web all the time, but unless you
are just making demos you probably arent that
comfortable using them for quite a while. It can feel
difficult to know when if ever you are actually able to
THE LATEST VERSION IS BIGGER AND BETTER. HERES WHY
deploy them into production and count on them to work.
Modernizr takes the stress out of that decision by giving
you an incredibly simple API to hundreds of different
From its inception Modernizr has had a core monolithic suite of feature detects. It turns out this is a terrible
battle-tested feature detects.
idea! Most websites never use a majority of the detects that were included. Even though it is a relatively
Cant you just send a different site to basic browsers?
small file, all those extra bytes add up, slowing down the load time for your site and making for
In a few cases that makes perfect sense, but it
some sad users. Modernizr 3 has done away with this by modularising every single detect,
adds a ton of work and headaches. If you
Changes to
allowing for 100 per cent custom builds tailored to your specific website. That means an
assume that the client isnt capable
detects
even smaller file to include and faster loading site for all of your users. The downside of
enough to render your latest and
A few detects have been
this is that there is no longer that single monolithic file to use when you are building your
greatest simply because it happened
renamed since version 2. Make
site, but keep reading to see how the Modernizr team has made it making your very own
to be made by Microsoft or Mozilla,
sure to read the changelog on
custom build of version 3 an absolute doddle.
prepare for a world of hurt. Those
modernizr.com to see if your
assumptions will inevitably come back
code will actually require
to bite you once the browser has been
Between the last incarnation of version 2 and 3.0, Modernizr comes with over 100 new
any updates.
updated. You need to actively check
feature detects, complete with documentation and polyfill information! While a full list is
each and every new version of every
available at modernizr.com/download, some of the highlights include the industrys most robust
browser to make sure it hasnt added or
Flash (and Flash blocking) detect, functional tests for video and audio autoplay (that means proper
removed something you inferred was there just
results even on mobile!) and nearly a dozen detects for new image, audio, and video formats and codecs.
because of its name, company, or version. Yuck. A much
By adding a Service Worker and AppCache detect you can check to see what the best way to make your
simpler method is to use Modernizr. It checks for the
website work offline would be, make your touch interactions work properly across all browsers by checking
actual HTML, CSS, or JavaScript feature you care about,
Touch and Pointer Events, or maybe reduce your @font-face download size by checking out unicode-range.
and gives you a simple true or false result. The code you
There are many more features that have been added, so make sure to checkout the Modernizr download
wrote to use the new and shiny will start working as soon
page to read the documentation on all of them.
as the feature is added to your users browsers, with no
changes needed on your part.
So feature detections are the way to go, but why
detection on GitHub, complete with comments and
should you use Modernizr instead of just rolling your
explanation for why each part was added.
own? Quite a few of the things Modernizr checks for
Modernizr 3 builds on top of all of this, with dozens of
seems very simple to test for yourself, but due to the fact
new feature detections, reduced file size, custom builds,
that humans create our web browsers, there is an
and much, much more.
endless amount of quirks and oddities between them.
As well as the large selection of new features in
Modernizr acts to clear house of these idiosyncrasies,
Modernizr 3, the website has been given a revamp. This
collecting and sharing the issues so that you get tons of
makes it easier to find the detects users need to add to
bug fixes for free! You dont have to find out that Internet
their builds.
Explorer 11 parses preserve-3d but never actually applies
The new site also allows for real-time search for
it, or that Chrome throws an exception for WebSQL only
detects on the download page and each detect now has
inside of Incognito Mode. You just get to write a simple if/
a special comment with useful information including
else, and focus on the code you actually want to be
polyfills and links. Total browser support just got a whole
writing. On top of that, Modernizr is 100 per cent open
lot easier.
source. You can view the code for every feature
Whats new?
Lean and mean feature detection machine
Hundreds of new detects
Patrick Kettner
Lead Modernizr developer
So feature detections are the way to go,

but why should you use Modernizr instead
of just rolling your own?
Modernizr 3 takes away of the

guesswork of browser support,
and lets me concentrate on
writing code for the problems I
actually want to be solving.
feature ___________________________________________________________73
A perfect fit for the

modern build toolchain
the way that sites are built. Ben Almans GruntJS was the
first really popular JavaScript build system, and Eric
Contra Schoffstalls Gulp quickly became extremely
popular as well. There are a number of ideological
differences between the two, but the Modernizr team
thinks both are great and has created tools to easily
MODERNIZR 3 INTRODUCES A NUMBER OF NEW WAYS TO INTEGRATE
integrate it into either of them. Created by Modernizr
QUICKLY AND EASILY INTO YOUR EXISTING TOOLCHAIN
team member Richard Herrera, both Grunt-modernizr
Visiting the official website has always been the
for you. This process is kept snappy by using a Service
and gulp-modernizr will search your code base for
default way to get your copy of Modernizr, and
Worker to cache all of the modules as you select them.
references to Modernizrs feature detects and
with version 3.0 it is stronger and better looking
That means that your build time actually speeds up
automatically generate a customised build with only
than ever.
the more you use it, and keeps it working
the features you actually use. Rather than
The new site includes a number of improvements
even if you are offline! The constant build
manually creating a new build every time
Keep an eye
to make generating your custom Modernizr faster
also gives you the ability to check on
you want to add something new, you
on file size
and easier. Powering the Download page, a new
just how much bloat (or lack thereof)
just have to write your code as
Its all too easy to bloat your
Universal Builder creates the exact same code as
your build has, with the compressed
though it was there already and your
build by adding too many new
any of the other tools you can use to create your
and uncompressed file size listed on
build system will take care of the
features always remember to
Modernizr. That means better consistency and fewer
the left-hand side of the page at all
rest! You get all of the benefits of
keep an eye on the overall file
chances for bugs to creep in. The new site
times. Remember that every byte
developing with the gigantic full
size to make sure your
automatically creates a build for you every single
you add, every single one of your
version of Modernizr with none of the
website stays fast.
time you change an option. That means that by the
users has to download. Be kind to your
performance concerns.
time you are ready to build, it has already been built
network and theirs keep it as small as
Full documentation is available on npm
possible. The site even has a fully responsive
and GitHub for both modules, but they are
design, allowing you to generate your build or check
both very simple to add to an existing project. Here is
the documentation on your mobile at any time.
an example of a Grunt configuration you can add to your
But having to go to the site to recreate the build every
existing Gruntfile:
...
single time you want to make a small change can quickly
modernizr: {
become tedious and boring. Its 2015 robots should be
"parseFiles": true,
doing boring junk like this. That is why version 3 has
"customTests": [],
CUSTOM BUILDS SPEED THINGS UP
added new ways to integrate Modernizr into your build.
Choosing the right

build for your site
AND MAKE FOR HAPPIER USERS
It is super simple to create a custom build of
Modernizr. Once you have a feature to detect (and
not before adding dependencies to your site
before theyre needed is a sure-fire way to bog the
site down), head on over to modernizr.com/
download. From there you can search for and
select any feature you want. You do not need to
know the exact Modernizr term for what you are
looking for, as the search box will scour
documentation, caniuse, and many other sources to
make it simple to find everything. Tapping on the
detect will pop up its documentation, including a
short description of the feature, any polyfills that
are available, as well as links to in-depth resources
like dedicated blog posts and specifications. Once
you have selected everything you want, tap on the
BUILD button to get a list of various ways to get the
code. As we will explain later on, Modernizr 3 fits
well into your modern build toolchain, so there are
a number of options available. The Build option
gives you the raw Modernizr file. Command Line
Config will produce a JSON file thats used to power
the Modernizr CLI tool. A Grunt Config can be
downloaded as well to automate your Gruntmodernizr setup. Finally, if you want to test
Modernizr results in the various browsers you
support, try it out on CodePen. You may not even
need to test for that feature any more!
74___________________________________________________________ feature
Whether you Grunt your site or

Gulp it, Modernizr can help
Once upon a time, when dinosaurs roamed the earth,
websites were written in notepad, uploaded to your FTP
server and you were done. But the web has grown up
quite a bit since the Jurassic period and with it so has
"outputFile": "/my/awesome/project/modernizroutput.js",
"tests": [
"emoji"
],
"uglify": true
} ...
The new modernizr.com has a brand new look, and a ton of new features
Working with CSS

MODERNIZR IS STILL THE SIMPLEST
WAY TO STYLE YOUR SITE
Since the very beginning, Modernizr has been a
fantastic way to add functional if statements to your
CSS. Rather than worrying about selector hacks or
specificity bugs to make sure that browsers purvey
the styles you intended, Modernizr gives adds a
class for every feature detect to the root element.
This means that you write clear and selfdocumenting CSS.
.cssgradients .header {
background-image: lineargradient(cornflowerblue, rebeccapurple);
}
.no-cssgradients .header {
background: url("images/glossybutton.png");
}
Sometimes Modernizr can clash with CSS you have
created, or perhaps some included in a framework
being used. That is why Modernizr has the
classPrefix option. This can can be added or
configured in any of the tools mentioned in this
article, like so:
and use Modernizr
{
"classPrefix": "webdesignermag-",
"feature-detects": ["css/gradients"]
}
Now, rather than this
<html class=cssgradients>
You dont have to generate the configuration by hand
Since Grunt/gulp-modernizr searches for references to
grabbing the build URL that is included by default in
the Modernizr detects, you almost never need to actually
the header of all builds of Modernizr (like modernizr.
include the tests portion. If you ever want to force the
com/download?emoji) will take you to a version with all
inclusion of certain detects, you can always add them to
of your detects, already checked. From there you can tap
that array.
on the BUILD button and grab the generated
If you love the idea of the Grunt and gulp versions,
Command Line Config.
but use one of the other build systems like
Using the above URL, you get the
Broccoli, Brunch, or Mimosa, you can get
following JSON file:
the same results by creating a wrapper
Modernizr.on
{
around the customizr npm package.
"minify": true,
Modernizr 3 adds the idea of
Also created by Herrera, customizr is
"feature-detects": [
asynchronous feature detects.
the abstracted crawl-and-build
"test/emoji"
Check out the Modernizr.on API to
mechanism that powers the Grunt
]
react to feature detects that take
and gulp packages. If you prefer
}
some extra time.
getting closer to the metal, and want
to eschew the built-in automation of
The tool works in Windows, Linux, and OS
Grunt and gulp, Modernizr now includes a
X, and can be integrated into any system that
command line tool to help get stuff done.
has the ability to call command line programs.
Jam with the console cowboys
But maybe your builds dont ever change. Or maybe
in cyberspace
you just dont want to have you entire team install (or
Almost all of the tools that Modernizr 3 introduces are
know how to use) the CLI tool. Cant there just be a way
built upon the its npm package. It even powers the
to download the prebuilt file? With Modernizr 3, there is!
Modernizr website! The straightforward command line
Npm and Bower, at your service
interface can take a JSON configuration file as input, and
The days of downloading a script from some random
uses it to create your custom build.
modernizr --config config.json --dest custom_
place on the web to include on your website has long
modernizr.min.js
since passed. We have proper dependency
you get this
<html class=webdesignermag-cssgradients>
One final change with the CSS in Modernizr 3 is the
no-js class. Previously, Modernizr would remove the
no-js class from the root element if it existed, and
then always add a js class. As of version 3, it will
continue to remove the no-js class unless the
enableJSClass option is false in your config. It will
also only add the JS class if a no-js class is found.
This lets you decide on whether or not a client has
enough JavaScript to really say it supports it.
management in the JavaScript world thanks to the

likes of Bower and npm. One of the most frequent
requests the Modernizr team has received is the
ability to treat it like any other JavaScript dependency,
and be installable via one of these package managers.
But, due to its highly modular nature, it was simply not
possible (let alone practical) to publish every possible
combination. It would require nearly a centillion
individual packages! But that didnt stop the Modernizr
team instead of registering and maintaining that
ridiculous number of modules, it has created a Bower
and npm download service.
What this means is that, rather than install a hosted
package from Bower or npm like you normally do (eg
bower install modernizr), you can install directly from
feature ___________________________________________________________75
the same custom URL that is included by default in the

header of every Modernizr build.
npm install https://modernizr.com/

download?promises-unicoderange --save
bower install https://modernizr.com/
download?promises-unicoderange --save
Thats it! Every time you run Bower or npm update, it will
check to ensure you have the latest and greatest version
of Modernizr, complete with all bug fixes and
performance improvements.
The only caveat to using the download service is that
if you ever want to add or remove detects from your
build, you will need to either update or remove the
existing entry in your package/bower.json. Since the new
dependencies would mean you are using a different
URL, you would end up with duplicate versions of
Modernizr in your project.
Code it forward
So you have created your build of Modernizr, but now
you have discovered that, horror of horrors, it doesnt
detect something you need! How can you remedy that
situation? The Modernizr team has thought of this too,
and created generator-modernizr-detect. Yet another
nodejs package, generator-modernizr-detect is a plugin
for the popular Yeoman tool. It will ask you a few
questions to generate all of the scaffolding you need to
create a new feature detect. Once you have created and
added it to your site, go ahead and create a Pull Request
on GitHub to share your discoveries with the rest of the
Modernizr community. Most of the detects that are
maintained were contributed by folks outside of the
project, many with little to no open source experience. It
is a great way to show off your research and knowledge

to a kind and caring community that helps power a huge
chunk of the web.
Working with JS
QUICKLY QUERY THE RESULTS OF
ANY FEATURE DETECTS
Looking forward
Version 3 is far from the end. Since its release in
September 2015, there have already been dozens of
improvements, with many more to come. One of the
things that is quickly becoming the most requested is
support for new module syntaxes. Between npm, ES7s
JavaScript modules, and tools like Browserify and
Webpack, modularity has become a huge part of the
JavaScript landscape. Modernizrs internal modules will
soon be updated to be compatible with these other
syntaxes. This means that someday soon you wont even
have to build the bundled Modernizr file any longer. You
will be able to just import or require each individual
detect as you need them, like you would any other
standard module.
In a perfect world, all browsers will implement features
as they are created, and tools like Modernizr will no
longer need to be used in order to figure out what and
when you can use them. But today is not that day, and
tomorrow likely wont be either. Adding the latest version
of Modernizr to your project can save countless hours
trying to research and debug different ways to handle
tiered browsing experiences. Version 3 has added a ton
of new ways to easily integrate an updated version to
your existing toolchain. Whether you grab it from the
website as you always have, generate it via Grunt or Gulp,
or download a prebuilt version through npm or Bower
via the download service, Modernizr wants to make it as
easy as possible to stop worrying about cross-browser
issues, and start making the next amazing website.
Many of the detects that are maintained

were contributed by folks with little to no
open-source experience
if (Modernizr.awesomeNewFeature) {
showOffAwesomeNewFeature();
} else {
getTheOldLameExperience();
}
Version 3 adds a few of new APIs that you can
leverage on your code. Modernizr.on was added as
a way to hook into all of the new asyncronous
feature detects. Since the code you write may
execute before the results of the detect are known,
you can register a callback to run once Modernizr
has finished.
Modernizr.on(videoautoplay,
function(supportsAutoplay) {
if (supportsAutoplay) {
//replace static image with video
}
});
Modernizr.atRule lets you check support for both
prefixed and unprefixed @rules (e.g. @font-face, @
keyframes, etc).
if ( !(Modernizr.atRule(keyframes) ) {
// load JS powered animation lib
}
Modernizr.prefixedCSS is similar to the older
Modernizr.prefixed, but will return the (possibly)
prefixed version of a value in kebab-case rather
than prefixeds camelCase
Modernizr.prefixed(backfaceVisibility)
webkitBackfaceVisibility
Modernizr.prefixedCSS(backfaceVisibility)
-webkit-backface-visibility
There are a few more, and some updates to older
APIs as well. Check out the complete changelog on
modernizr.com to see all of the changes.
5 tools and resources

Ryan Seddons guide to
Modernizr 3
Building Resilient Web

Apps NPM blog
Modernizr GitHub
source code
customizr
bit.ly/1IegIzt
bit.ly/1P6HFgh
bit.ly/1SikoG0
This short course in Modernizr 3

willl take you through the
fundamentals in JS and CSS.
Patrick Kettner lays out the

fundamental tools for keeping
Modernizr compatible.
The entire library is available

here on the GitHub repository,
free for you to dip into.
You can try customising your

own Modernizr build and
exporting it without having to
worry about optimisation.
76 __________________________________________________________ feature
bit.ly/1LxUIzM
How to use Modernizr

Responsibly
bit.ly/1GYl7Gh
Discover how a responsible
approach to Modernizr can
improve user experience.
FOR THE GNU GENERATION
www.linuxuser.co.uk
Available
from all good
newsagents &
supermarkets
today
ESOURC
ER
VERY IS
DE
E FRE
SU
OWNLOA
ED
ON SALE NOW:
Best backup tools DevOps explained Pygame Zero

THE LATEST NEWS
ESSENTIAL GUIDES
DEFINITIVE REVIEWS
INDUSTRY INSIGHT
EXPERT OPINION
BUY YOUR ISSUE TODAY

Print edition available at www.imagineshop.co.uk
Digital edition available at www.greatdigitalmags.com
Available on the following platforms
facebook.com/LinuxUserUK
twitter.com/LinuxUserMag
Developer tutorials
Integrate payments
with the Stripe API
Learn how to develop a custom Stripe form into an online web
store and handle the Stripe API with Node.js
78

Developer tutorials
Commerce is huge, and everywhere, no

retailer from before the time of the web
hasnt either felt its impact or been
gobbled up by web-born goliaths that have
adopted their business models for the internet era.
E-commerce is also hard, sure, you pay for things online
all of the time, but the credit card details arent going
straight from us to the service youre paying, often a
payment gateway service is used somewhere along the
line to process your credit card and pass along the
information to the retailer that you just made a purchase
from. If youre the owner of a small web store, or just want
to take payments for some reason or another on your
own website, integrating with one of these payment
gateways can be tough and complicated.
Fortunately for us, theres Stripe, a simple but powerful
API that allows us to process and receive monies from
card payments without too much hassle. In this tutorial,
youre going to take a demo web-store and implement
Stripe.js and the Stripe API into it.
1. Get a Stripe account

Before you kick this project off, youre going to need to
get ourselves a Stripe account. Head on over to
dashboard.stripe.com/register and follow the on-screen
instructions to get a Stripe account. Once youve recieved
a confirmation email from Stripe come back here.
2. Grab the project resources

Were not going to build a web store from scratch
because thats not what this tutorial is about. In the
FileSilo resources for this project, there is a prebuilt web
store with all of the things you need to handle a basic
ordering process. Download the demo files and move
them into a folder of your choosing, keeping the
directory structure intact.
3. Install Node.js dependancies
6. Initialise the store
Open up terminal (or command prompt if youre on

Windows) and change directory to the location you just
stored the project resources. Enter code/start and then
run npm install to install the Stripe Node.js library and
Express.js youll use these later when processing the
customers order.
Our demo store is made up of a couple of forms and

inventory items. You dont want to concern ourselves
with binding events and handling callbacks in core.js, so
all of the logic is in storeUI.js - but it hasnt been initialised
yet. In the init() function of your core.js file add the
following code:
4. Get the Stripe JS library

Stripe is a super-simple API, and using it has been made
even simple by the lovely developers over at Stripe who
have put together a ton of neat libraries for us to use.
Youre going to grab the Stripe.js library that will let us
build whats known as a custom forms which is a form
like any other, but with Stripe integrated into it. Open
index.html and just after where you import jQuery at the
bottom of the HTML document add:
<script src="https://code.jquery.com/
jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="https://
js.stripe.com/v2/"></script>

<script src="scripts/storeUI.js"></script>
function init(){
store = new store_events;
}
This will create all of the event listeners youll need for
the project.
7. Find the publishable Stripe key

In order to interact with the Stripe API, you need to get
whats called the publishable key. By including this key
with each request you make to Stripe, the API can
identify us and handle payments appropriately. You can
find your publishable keys at dashboard.stripe.com/
account/apikeys. Use the TEST key for this tutorial and
never share your secret keys with anyone.
8. Back to core.js
Once youve got your TEST publishable Stripe key, head
back to core.js and just after where you initialised the
store events, add Stripe.setPublishableKey();
function init(){
5. A home for the JavaScript

All of the code that the store uses to keep a track of an
order is in the storeUI.js file in the scripts folder. You dont
need to do anything with this, its a helper library for the
store, but you do need to initialise it, and you need a
place to do that from. Add the following just after where
you import the storeUI.js file into index.html and then
open core.js for editing.
Store keys
Instead of switching keys every time you want to

deploy to your production environment, save
them as environment variables. One for your
development and one for your live platforms.
<script src="scripts/core.js"></script>
Left
Once our order has completed and our payment

accepted, our store will generate an itemised receipt for
our customer
Top left
We dont want to build a whole store, we wouldnt have

enough time to talk about Stripe! This tutorial comes with
a demo store to get us on our feet quickly
Top right
The Stripe API gives us a bunch of keys to use when

accessing its API. You use the test key in this example so it
doesnt cost us any money, but you have to switch it over
when you go live!
79
Developer tutorials
Integrate payments with the Stripe API
store = new store_events;

Stripe.setPublishableKey('YOUR_TEST_
PUBLISHABLE_STRIPE_KEY');
}
9. Create a card payment form

You may have noticed that although you have some
code to make a shopping cart, you dont have any
markup to take the users card details when they try to
checkout. Lets do that now. In index.html, just after the
<button> element with the id of false_purchase add the
following markup to your code:
<div id="card_creds" data-display="false">

<div class="container">
<h3>Please enter your card details</h3>
<label>
<span>Card Number</span>
<input type="text" size="20" />
</label>
<label>
<span>CVC</span>
</label>
<label>
<span>Expiration (MM/YYYY)</span>
All in the platform
If you want put your store in an app, you dont

have to change much. Stripe has libraries for iOS
and Android. If youre running a Cordova app,
use the same process, but whitelist stripe.com.
Top left
Each item in the cart has data-attributes on the element

that keep a track of that items price and product
reference. When you send this information, it would be
prudent to check that the total sent is equivalent to the
produce selected
Top right
Once the order has been processed, send the client an

object that contains an itemised list of the products you
bought. This lets you know for certain the exact quantity
of produce purchased by the server
Right
When youre testing the code out, you dont want to be

using actual card details, what if you charge yourself
1,000,000 by accident. Stripe provides test details that
will work with your test publishable key
80

<span> / </span>
</label>
<input type="submit" value="Pay" />
</div>
</div>
10. Work with data-stripe

Right now, the #card_creds form doesnt do anything
special with Stripe. In order to make Stripe recognise the
form, you need to add data-stripe attributes to the
elements that contain specific parts of the cards details
so that they can be passed on to Stripe.
For the credit card number you add datastripe=number to the input where you expect the user
to add the card number, for the CVC (3 numbers on the
back of the card) you add data-stripe=cvc and so on
and so forth.
<div id="card_creds" data-display="false">

<div class="container">
<h3>Please enter your card details</h3>
<label>
<span>Card Number</span>
<input type="text" size="20" datastripe="number"/>
</label>
<label>
<span>CVC</span>
<input type="text" size="4" datastripe="cvc"/>
</label>
<label>
<span>Expiration (MM/YYYY)</span>
<input type="text" size="2" datastripe="exp-month"/>
<span> / </span>
<input type="text" size="4" datastripe="exp-year"/>
</label>
<input type="submit" value="Pay" />
</div>
</div>
11. Set users security and liability

Using the data-stripe attributes allows Stripe to strip out
all sensitive data about the user before it ever hits the
server. Cyber-crime is on the rise and you cant all afford
to have a security team working to ensure that all of the
servers are impenetrable. By allowing Stripe to take
sensitive payment data off of our hands before it ever
hits the server, you never have to worry about the
security of the users or the liability if ever you were to
have a data breach.
12. Test the cart

Right now, if you add some items to the cart and enter
your card details into the form, the page will reload. you
need to prevent the submit event and work some AJAX
magic with Stripe to get the card details off in a usable
way. Add the following code to the addEvents function
of core.js. Using the Stripe.js library, send off the card
details the user has entered to the Stripe API to be
processed. Once those details have been validated a
one-time-use token will be returned to us. To test the
code out, you can use any of the card details from stripe.
Developer tutorials
Why tokens?
So why are you using
tokens instead of just
handling card details
ourselves? Surely you can
better look after our own
customers data? Well, no.
Security is hard, no matter
how hard you, as an
individual try, its unlike
youll ever be able to
match the strength of
security offered by an
enterprise-level payments
platform. Stripes job is to
keep their API running and
their data safe, your job is
to sell delicious cheeses.
Let these guys take on the
card stuff, its what theyre
really good at. On a side
note, say you do store
card details on your
service and you get
hacked, youre liable for
that datas security, not
only does it suck being
hacked, but if the data was
stored poorly, you may be
subject to legal action
from your customers.
Ouch. Is it worth it?
com/docs/testing, so long as youre using the TEST

publishable API key.
order_form.addEventListener('submit',
function(){
Stripe.card.createToken(order_form,
function(status, res){
if(status !== 200){
alert("Something went wrong. Sorry");
order_form.reset();
}
else
{
submitOrder(res.id, function(response){
store.closeForm();
store.showReceipt
(response.thingsBought);
});
}
});
});
14. Tally up the order
15. Send the order to the server
Before you send to the order to the server, you need to

create a payload describing what they actually ordered
that you can process server-side. In the empty
submitOrder function of core.js add the following. First, it
takes all of the items out of the cart and puts them into
an array, then it gets the price of those items and creates
a total in pence (assuming youre using GBP) which you
will ultimately charge to the user. This isnt the most
tamper-proof way of calculating price, but its good for
demoing the power of Stripe.
Now that you have the payload containing the total price
and the items in the cart, as well as the stripe token weve
acquired, its time to send it to the server. you can do this
using a good ol fashioned jQuery AJAX request. Add the
following code just after the last bit of code you added to
submitOrder();
function submitOrder(){
if(token === undefined){ throw "No Stripe
card token has been passed"; }
var items = document.
getElementById('purchase_list').
getElementsByTagName('li');
payload = { items : [], total : 0 };
for(var g = 0; g < items.length; g += 1){
var thisItem = items[g];
13. The order token

We dont want the users card details to go anywhere
near the server because that opens up to a world of
potential trouble (see the Why tokens? boxout), but how
is a payment processed? Simple, you can use the token
you just received in the response from the Stripe API.
Along with the customers order, you send the order
token to the own server, where you can request Stripe
deduct a credit from the users balance. Before you do
that, you need to sort out the customers order.
payload.items.push({
productID : thisItem.getAttribute('dataproduct-id'),
price : thisItem.getAttribute('data-price')
});
payload.total += parseInt(thisItem.
getAttribute('data-price'));
}}
jQuery.ajax({
type : "POST",
url : window.location.origin + "/order",
data : {
order : payload,
stripe_token : token
},
success : callback,
error : function(err){
console.log(err);
},
dataType : "json"
}
)
;
16. Receive the order

In the root of your project folder, open stripeServer.js. On
lines 69-100 define a single endpoint, /order. This is
where you will handle the data that has been sent from
the demo store. On lines 37-67 you will have the
sortOrder function which tallies up the amount of each
item purchased by the customer and returns an
organised list.
81
Developer tutorials
17. Parse the request

On lines 71 and 72 of stripeServer.js,, parse the body of
the AJAX request sent to the server to retrieve the order
payload and Stripe token for the customer. Now that you
have a Stripe token, you can charge the customers card
(stored on the Stripe servers) using this token. you do
this with stripe.charges.create(); This function takes two
arguments. An option argument, which needs to contain
the amount of monies being charged (in pennies, a
currency and a payment source (our card token). The
second argument is a callback to handle the response
from the Stripe API.
stripe.charges.create
({
amount: price,
currency: "gbp",
source: card_token,
description: "Customer cheese order"
}, ...
18. Handle the Stripe response

If something goes wrong, Stripe will pass an error back to
the server, but if there is no error, everything has gone
great, youve been paid! (although it may take up to 7

days for you to receive the money); Now you need to
inform the user, which you do here with res.json. Its at
this point that you would write logic to set up a delivery
or store the order in a database somewhere or maybe
send a confirmation email, but that implementation is up
to you and your (or your customers) needs.
... function(err, charge)

{
if (err && err.type === 'StripeCardError')
{
res.set(500);
res.json({
status : "ERR",
message : "Something has gone horribly
wrong"
});
}
else
{
res.json({
status : "OK",
thingsBought : itemisedItems
});
}
});
Detecting fraud
Stripe uses machine learning algorithms to

detect potential fraudulent purchases. If you
know a payment was genuine you can tell Stripe
and theyll process the payment.
Remembering
your customers
In this tutorial, you
generate a token for each
purchase you want to
make, and seeing as the
tokens are single-use only,
it means that wed have to
get the user to enter their
card details every single
time they want to buy
something. That is going
to become a frustration
for them very quickly. So,
how do you store card
details for the customer
without storing card
details? The Stripe API
allows you to create a
Customer object that you
can associate with card
details by passing in the
charge token before you
process a payment.
Though you can only use
this token once to make a
charge, you can access the
customer any time you
like and make a charge to
them without them ever
having to make a
payment. Neat, huh?
82
19. Generate a receipt

On the client-side, the form will still be waiting for a
response from the server. Once payment has been
confirmed by Stripe the Node server sends a JSON-
encoded itemised list in its response. the helper library

thats been handling all of the store logic kicks in here
again. Once that the confirmation has finally been
received, it will reset and close the card details overlay
and if you pass the itemised list that the server sends
back, then it will generate a receipt to show the customer
what they have ordered. This will happen in the callback
you passed as part of the submitOrder function call, as
we have shown below:
submitOrder(res.id, function(response)
{
store.closeForm();
store.showReceipt(response.thingsBought);
}
20. Square one

So thats the order process complete. Now you can show
the customer what theyve ordered and then you can let
them continue on their way. In this case, you can now
reset everything when they close the receipt dialog, but
on a real store, we would let them browse around the
website or you can even view all of their orders in a
dashboard somewhere if thats what you want.
21. Prime time

When youre ready to take your new web store live, dont
forget to change the TEST publishable API key to the
LIVE one. Otherwise, all of the orders that you end up
taking wont actually charge the people for any of the
purchases that they make, regardless of the validity of
their payment method.
17%
SPECIAL OVERSEAS OFFER
SAVE UP TO
ALL TITLES
JUST
49.99
ON A GIFT SUBSCRIPTION THIS
CHRISTMAS
REAL CRIME
Uncover the most fascinating and
notorious true crimes in history
13 issues, save 4%
EXCLUSIVE CHRISTMAS OFFER

SAVE UP TO 17% ON THE SHOP PRICE
NEVER MISS AN ISSUE OF YOUR FAVOURITE MAGAZINE
FREE E-CARD TO SEND WHEN YOU BUY AS A GIFT
IDEAL CHRISTMAS GIFT - THAT LASTS ALL YEAR
OW IT WORKS
The action-packed science and
technology magazine
13 issues, save 10%
FIND OUR FULL

RANGE OF
TITLES AT THIS
GREAT PRICE
ONLINE!
TVS STEVE BACKSHALL SPEAKS OUT FOR SHARKS

From the makers of
TM
STER
EE THESKIE
INCREDI
100
OVER
ILLUSTRATIONS
&PHOTOS!
HE ALBATROS
O
AB
AN EEL
WITNESS THE GREAT MIGRATION MEET THE BIG FIVE

EXPLORE THE ICONIC SAVANNAH
UGLY DUCKLINGS
ONLINE AT
HOW NATURES YOUNG TRANSFORM

No 024
OG
w ldlife
he winter
ALL ABOUT HISTORY

Bringing history to life for the
whole family
13 issues, save 15%
GADGET
Packed with the latest, coolest and
most exciting tech
12 issues, save 17%
KINGFISHERS
Discover six of these

stunning b rds
JAGUAR
South Amer cas

most elus ve b g cat
3 99
2
ANT FACTS
20 fascinat ng facts
about this tiny insect
9 772
ORLD OF ANIMALS
Everything you need to know about
the worlds most amazing wildlife
13 issues, save 4%
The stories, strategies, heroes and

machines of historic conicts
12 issues, save 17%
www.imaginesubs.co.uk/xmas151
ORDER HOTLINE
+44 (0)1795 592 869
DIGITAL PHOTOGRAPHER
Inspiration, tutorials and tools for
enthusiasts and professionals
12 issues, save 17%
RETRO GAMER
The number one magazine
for classic gaming
12 issues, save 17%
LL ABOUT SPACE
Discover the wonders of the solar
system and beyond
13 issues, save 15%
SCIFINOW
The number one magazine for
sci-, fantasy and horror fans
12 issues, save 17%
Use code XMAS151 for this extra-special price.
Developer tutorials
Manage JS with
asynchronous tasks
Promise objects aim to remove redundant and/or excessive
callback functions from background tasks
84

Developer tutorials
sing callback functions is a sure-fire way

to induce JavaScript bloat: we know of
some code examples where the
accomplishment of a single task requires
the presence of a dozen callbacks. Furthermore,
callbacks are not a catch-all solution for event handling.
As the use of exceptions spreads over to JavaScript,
keeping an eye on the various error sources becomes
tedious pretty quickly.
Even though Promises have not been fully formalised
at the time of writing, they nevertheless provide a
fascinating alternative to callbacks. In principle, a Promise
is but a state machine object whose state reflects the
situation of the task at hand.
Deploying Promises significantly reduces the efforts
involved in callback and event handling. When done right,
core functions can be observed at a glance. Furthermore,
time becomes insignificant: if a Promise is invoked after
the event it is intended to analyse has taken place, it will
automatically transition through the necessary states.
As with all concurrent code, care must be taken to
avoid race conditions and similar problems. So, let us be
your guide and come along for a fascinating ride!
1. Set the stage

As Promises are not fully standardised at the time of
writing, care must be taken to ensure a consistent
working environment. The examples presented in this
tutorial worked well on a Firefox 42.0 hosted on a 64-bit
Ubuntu workstation.
2. Create a model
A Promise class is a wrapper around an asynchronous
payload. To keep things simple, we will start out by
creating a simple model of a good friend of ours. Matz
will greets us with a friendly Oi message once a day
sadly, the time when the actual Oi takes place is not

predictable so it could occur at any time.
<html>
<body>
<script>
function Matz()
{
setTimeout(function(){ alert("Oi!"); },
(Math.random()*10000));
}
Matz();
</script>
</body>
</html>
Greeting event by displaying a message box once the Oi

has been emitted.
<body>
<script>
var aMatz=new Promise(
function Matz(resolve, reject)
{
setTimeout(function(){ resolve("Oi!"); },
});
aMatz.then(function(){alert("Matz is
here!")});
</script>
</body>
3. Adapt to Promise
5. Transcendental Oi!
Adapting our Matz payload to a Promise involves the

creation of a method with two parameters. Both reject
and resolve can be invoked as normal members, along
with a value containing further information about the
state of the event at hand.
Classic event handlers suffer from a chicken/egg

problem: if the interesting event occurs before the
registration of the handler, information will be lost. As
Promises act as state machines, this problem can not
occur. Once Matz is done, its done forever, which means
that the late alert will always pops up.
<body>
<script>
{
});
</script>
</body>
6. Truly asynchronous
Then does not interrupt program execution. Instead, the
method stores the payload in an execution queue and
returns afterwards. Running the example accompanying
Dont block
Promises are not a way to perform

multithreading. If your Promise contains blocking
code, the JavaScript runtime will stall just as if it
were found in a normal function or member.
4. Announce events
Our Promise only actually becomes useful once we can
ensure that our code reacts on its completion. The
snippet accompanying this tutorial step announces the
Left
When push comes to shove, knowing the exact version of

the browser where a program is being run tends to be
really helpful
Top left
The timing of the two alerts depends on the mood of the

random number generator
Top right
Setting doritIsHere to true makes Matz think twice about

greeting passers-by a situation modelled with reject()
85
Developer tutorials
Manage JS with asynchronous tasks
Step 6 a few times will lead to different alert dialog

sequences depending on the speed of your system and
the random timeout value.
<body>
<script>
{
});
here!")});
alert("We're done here");
</script>
</body>
7. Dorit objects
Real-world processes have the nasty habit of failing from
time to time. We will model this via the presence of a
Dorit object: if she is around, Matz gets intimidated and
no longer greets passers-by. This is modelled via the
reject method, which gets invoked instead of resolve:
<script>
window.doritIsHere=true;
Advanced
functionality
Check out the Promise RSVP library offered at

github.com/tildeio/rsvp.js
Top left
The colours of the XXX-laden cells are changed as the

individual Promises fire off their payloads
Top right
Failed invocations of the then() payload are indicated by

the passing of undefined for val
Right
A finaliser is run regardless of the success of the

monitored operation
86
{
setTimeout(function(){
if(window.doritIsHere==false)
{resolve("Oi!");}
else
{reject ("Eeek!")}
}, (Math.random()*10000));
});
here!")});
</script>
8. Chain it up
Step 6 established that then() does not wait for the
completion of the Promise. Thus, its returned context can
be used to chain things up. In our example, the payload
passed to catch() is executed only if Dorits presence
causes Matz to bolt.
<html>
<body>
<script>
. . .
here!")}).catch(function(){alert("No, it's a
Dorit!")});
</script>
</body>
</html>
9. Clean me up
Developers who are familiar with object-oriented
programming languages know the concept of a finaliser:
it is a method that gets called on both success and

failure of the underlying operation. Its position in
program execution is shown in the flowchart
accompanying this step.
10. Implement the finaliser

With that, its time to get coding. Adding a finaliser is as
easy as invoking the final method at the end of the call
queue: the execution engine will ensure that its payload
gets invoked once the then or the catch payloads were
given an opportunity to run. Unfortunately, this feature
isnt supported on Firefox, and requires the use of
external libraries.
<script>
. . .
here!")}).catch(function(){alert("No, it's a
Dorit!")}).finally(function(){alert("It's
done!")});
11. Cascade the processes

In many cases, one asynchronous process kicks off
another one. This is one of the main issues in classic
JavaScript, as the number of callbacks raises with a
growth rate of O(n)=2*n. Fortunately, a Promise can be
made to return another one:
{
if(window.doritIsHere==false)
{resolve("Oi!");}
else
{reject ("Eeek!")}
}, (Math.random()*10000));
Developer tutorials
Do the closure
Setting parameters on the
Promise object returned
by the constructor is not a
valid way to pass them
into the function
responsible for the actual
handling of the payload.
Instead, parameters must
be passed using a closure
which returns the function
body. In the case of the
code shown in Step 15, the
element at hand is stored
as a parameter passed to
AddClosure. The inner
function can access it as if
it were a global variable,
as a closure is erected
around it during the
returning of the function
body. It will remain valid
for the entire life cycle of
that reference: as long as
someone can envoke the
function, its closure
remains alive. JavaScript
newbies should be aware
of this behaviour, as it is
the prime source of
excessive memory
consumption.
}
var matzBuilder=new Promise(function
MatzBuilder(resolve, reject)
{
alert("Spawning new Matz!");
resolve(new Promise(Matz));
},1500);
});
12. Gang them up, part one

With that, its time to show our MatzRaiser in action. The
following test fixture demonstrates how multiple then
commands are chained. By the way: the linear
indentation of the individual methods is recommended
in the standard.
var matzBuilder=new Promise(function

MatzBuilder(resolve, reject)
{
alert("Spawning new Matz!");
resolve(new Promise(Matz));
},1500);
});
matzBuilder.then().then(function(val)
{alert("Queueing completed! " + val);})
13. Gang them up, part two

If an error occurs in the inner part of the Promise and is
not handled in the first part of the then() chain, the
second part handles it automatically. The little snippet
shown here handles the fearsome Matz error in the

instantiation of the mage.
<script>
matzBuilder.then(undefined,function(){
alert("Unhandled Inner Error")
}).then(function(val){
alert("Queueing completed! " + val);
});
</script>
14. Promise arrays

Pictures must be downloaded in bulk. We will simulate
this problem via a Promise which eventually changes
the colour of a table cell assigned to it:
<body>
<script src="jquery-2.1.4.js">
</script>
<script>
function DeltaColor(resolve, reject)
{
this.myElem.css( "color", "green" );
}, (Math.random()*10000));
}
</script>
</body>
15. Set it up!

Demonstrating our code in action requires the presence
of a table containing a batch of red cells. Furthermore,
one master cell is created. Finally, each cell is assigned

with one instance of the Promise generated in step 14.
function AddClosure(what)
{
return function (resolve, reject)
{
what.css( "color", "green" );
resolve();
}, (Math.random()*10000));
};
}
$( window ).load(function() {
var e1=new Promise(AddClosure($("#k1")));
e1.then();
e2.then();
e3.then();
e4.then();
e5.then();
window.myArray=[e1,e2,e3,e4,e5];
});
</script>
<table>
<tr><th>Mater</th><td
id="master">xxxxxxxxxxxxx</td></tr>
<tr><th>Kid</th><td id="k1">xxxxxxxxxxxxx</
td></tr>
87
Developer tutorials
<tr><th>Kid</th><td
td></tr>
<tr><th>Kid</th><td
td></tr>
<tr><th>Kid</th><td
td></tr>
<tr><th>Kid</th><td
td></tr>
</table>
id="k2">xxxxxxxxxxxxx</
16. Wait for all

One especially interesting convenience function found in
the standard involves awaiting the completion of an
entire array of Promises. In our example, the master cell
gets coloured only after all the children have achieved
readiness by changing their colours.
. . .
Promise.all(window.myArray).then(function(){
$("#master").css( "color", "blue" );
});
});
18. Abbreviated then

Most then() invocations contain a success and a failure
clause. The Promises standard contains a special method
taking two parameters it prevents you from having to
invoke the failure method separately.
p.then(onFulfilled, onRejected);
p.then(function(value) {
// fulfillment
}, function(reason) {
// rejection
});
19. Antipattern: recurring events

Promises change their state but once: in the example
below, our Matz could say Oi once. Trying to shoe-horn
Promises into the role of a classic event bus as the one
shown in the image is not recommended other tools
like Radio.js provide a faster, slimmer and more
effective solution.
If work should proceed after one of the Promise objects

contained in the array is completed, the test harnish
must be modified along the lines shown in the code
accompanying this step.
Top left
If race() is used, one colour change is enough to trigger

the modification of the mater element
Top right
Radio, available from radio.uxder.com, allows you to create

event chain systems efficiently
Right
Promises are not and probably will not be supported in

Internet Explorer (Credit: caniuse.com)
88
21. Promises for IE

Analysing the compatibility of Promises on CanIUse
demonstrates that all versions of Internet Explorer dont
support it. Fortunately, a large variety of alternative
libraries are available. ES6-Promise has become a bit of a
quasi-standard due to its small size more information
awaits you at github.com/jakearchibald/es6-Promise.
17. Wait for one
Promise.race(window.myArray).then(function()
{
$("#master").css( "color", "blue" );
});
});
Sadly, this feature is not implemented in the A+ standard.

Instead, developers are recommended to use the Q
library which, incidentally, also supports the termination
of Promise payloads.
20. Cancel and Query

The basics of UI design dictate that users should be
provided with progress information to shorten the wait.
From the makers of

The
Annual
Its been an exciting year for web design, with new elements
coming into play every day. Creatives are introducing new
ways to surf the web and the Web Design Annual will take you
through the best this year had to offer. Grab your copy today!
Also available
A world of content at your fingertips

Whether you love gaming, history,
animals, photography, Photoshop,
sci-fi or anything in between, every
magazine and bookazine from
Imagine Publishing is packed with
expert advice and fascinating facts.
BUY YOUR COPY TODAY

To advertise here contact Luke

luke.biddiscombe@imagine-publishing.co.uk
+44 (0)1202586431
Get your listing highlighted! Contact Luke

+44 (0)1202 586431
Hosting listings
SHOPPING CART
VIRUS FILTER
FIREWALL
PHONE SUPPORT
EMAIL SUPPORT
WEB CONTROL PANEL
SERVICE LEVEL AGREEMENT
29.88
1GB
5GB
20

0845 859 0018
59.88
5GB
50GB
500

123-reg (www.123-reg.co.uk)
Pro
0845 859 0018
107.88
10GB
100GB
750

Bus Pro
0845 859 0018
179.88
20GB
Unlimited
1,000

Plus (MS)
0845 859 0018
59.88
2GB
25GB
100

Pro (MS)
0845 859 0018
107.88
5GB
50GB
500

Bus Pro (MS)
0845 859 0018
179.88
10GB
150GB
1,000

PHONE NUMBER
PACKAGE
POP3
ACCOUNTS
0845 859 0018
Plus
NAME AND URL
MONTHLY BANDWIDTH
Starter
WEB SPACE
Whether youre a hosting firm keen to promote your

products or a happy customer who wants a favourite
provider to be listed, drop us a line with the details!
COST PER YEAR
DATABASE SUPPORT
Got a deal
you think we
should list?
Keep an eye on the latest packages and

deals with our comprehensive list of service providers
2020Media (www.2020media.com)
Light User
0870 321 2020
45
20MB
1GB

Everyday
0870 321 2020
100
200MB
10GB
15

Business/Pro
0870 321 2020
275
500MB
20GB
50

JAVA Tomcat
0870 321 2020
300
100MB
3GB
15

ASP.Net
0870 321 2020
275
100MB
3GB
15

4D Hosting (www.4dhosting.com)
Big Web Hosting
0207 183 0602
60
5GB
Unlimited
20

Bigger Web Hosting
0207 183 0602
120
10GB
Unlimited
75

Biggest Web Hosting
0207 183 0602
180
20GB
Unlimited
100

Big VPS
0207 183 0602
204
75GB
500GB
Unlimited

Bigger VPS
0207 183 0602
360
100MB
1,000GB
Unlimited

Biggest VPS
0207 183 0602
720
200GB
1,500GB
Unlimited

Blackfoot Hosting Ltd (www.blackfoot.co.uk)
Home
N/A
40
500MB
5GB

Business
N/A
50
1GB
20GB
100

eCommerce
N/A
100
2GB
40GB
200

Professional
N/A
150
3GB
60GB
300

Blacknight (www.blacknight.com)
Minimus
35359 918 3072
45
10GB
200GB
Unlimited

Medius
35359 918 3072
79
20GB
400GB
Unlimited

Maximus
35359 918 3072
45
30GB
600GB
Unlimited

Bravo14 (http://bravo14.co.uk)
Starter Linux
N/A
130
2,000MB
2,000MB
10

Starter Windows
N/A
20
2,000MB
2,000MB
10

Business Linux
N/A
45
4,000MB
4,000MB
4,000

Business Windows
N/A
45
4,000MB
4,000MB
4,000

Ultimate Linux
N/A
60
Unlimited
Unlimited
Unlimited

Ultimate Windows
N/A
60
Unlimited
Unlimited
Unlimited

Designwasp (http://designwasp.com)
Starter
0844 372 9848
30
3GB
20GB
1,000

Home
0844 372 9848
40
10GB
50GB
10,000

Business
0844 372 9848
60
Unlimited
Unlimited
Unlimited

Windows Unlimited
0844 372 9848
60
Unlimited
Unlimited
Unlimited

Windows Home
0844 372 9848
40
10GB
50GB
1,000

CheapHost
0844 372 9848
10
300MB
100MB

Digital Gibbon Ltd (http://digitalgibbon.com)
Personal
01865 589 990
12
1GB
Unlimited
10

Personal Plus
01865 589 990
48
Unlimited
Unlimited
50

Business
01865 589 990
108
5GB
Unlimited
1000

Business Professional
01865 589 990
132
Unlimited
Unlimited
Unlimited

eHosting (www.ehosting.com)
Starter
0844 999 4100
23.88
1GB
25GB
10

Personal
0844 999 4100
59.88
2.5GB
Unlimited
50

Expert
0844 999 4100
95.88
5GB
Unlimited
250

Virtual
0844 999 4100
227.88
50GB
Unlimited
Unlimited

Evohosting (www.evohosting.co.uk)
Starter
N/A
29.99
500MB
1GB

Home
N/A
54.99
2.5GB
30GB
50

Business
N/A
79.99
6.5GB
Unlimited
Unlimited

eCommerce
N/A
159.99
30GB
Unlimited
Unlimited

Fasthosts (www.fasthosts.co.uk)
Personal
0808 168 6777
32.87
5GB
Unlimited
50

Business Bronze
0808 168 6777
58.38
50GB
Unlimited
500

Option

Business Silver
0808 168 6777
76.39
Unlimited
Unlimited
Unlimited

Option

Business Gold
0808 168 6777
101.89
Unlimited
Unlimited
Unlimited

WD Starter
0808 168 6777
149.99
20GB
Unlimited
Unlimited

Option
Option

WD Advanced
0808 168 6777
199.99
Unlimited
Unlimited
Unlimited

Option
Option

Heart Internet (www.heartinternet.co.uk)
Starter Professional
0845 644 7750
29.80
2.5GB
10GB
1,000

Home Professional
0845 644 7750
89.99
Unlimited
Unlimited
10,000

90 _________________________________________________________hosting listings
To advertise here contact Luke

+44 (0)1202586431
Get your listing highlighted! Contact Luke

+44 (0)1202 586431
Featured host of the month: 111WebHost 111webhost.com

Getting more out of one of our quality listed hosting providers
the ridiculously low price of 1 per month. For this, users get 1GB of
webspace and 1GB of monthly traffic. For those looking for more,
there is 5GB of webspace and unlimited traffic for just 2.50 a month.
Unlimited webspace and traffic is available for just 5 a month. They
also provide specialist hosting for WordPress, Joomla and Drupal.
SHOPPING CART
VIRUS FILTER
FIREWALL
PHONE SUPPORT
EMAIL SUPPORT
WEB CONTROL PANEL
SERVICE LEVEL AGREEMENT
Unlimited
Unlimited
Unlimited
349.99
Unlimited
Unlimited
Unlimited
ICUK www.icukhosting.co.uk
Professional
0845 009 9175
30
250MB
1GB
50
option
ICUK www.icukhosting.co.uk
Advanced
0845 009 9175
50
2GB
2.5GB
150
option
ICUK (www.icukhosting.co.uk)
Enterprise
0845 009 9175
80
2GB
500MB
Unlimited
option
Professional Plus
0845 009 9175
90
500MB
5GB
100
option
Premium Plus
0845 009 9175
150
1GB
12.5GB
500
option
Enterprise Plus
0845 009 9175
300
2GB
20GB
Unlimited
option
Reseller Windows
0845 009 9175
200
Unlimited
Unlimited
Unlimited
option
Reseller Linux
0845 009 9175
200
Unlimited
Unlimited
Unlimited
option
Reseller Enterprise
0845 009 9175
500
Unlimited
Unlimited
Unlimited
option
JAB Web Hosting (www.jabwebhosting.com)
Mail M105
0800 043 0153
15.17
256MB
3GB
50
PACKAGE
POP3
ACCOUNTS
129.99
0845 644 7750
MONTHLY BANDWIDTH
0845 644 7750
Reseller Professional
WEB SPACE
Business Professional
NAME AND URL
COST PER YEAR
PHONE NUMBER
DATABASE SUPPORT
111WebHost is a provider committed to making website

hosting easy to use while offering the best possible value. It
provides solutions for small- and medium-sized businesses as well
as individuals and web designers and developers are high on their
list. 111WebHost offers a range of top-value packages starting at
Home H25
0800 043 0153
24.47
1GB
8GB
50
Professional - P55
0800 043 0153
45
2GB
15GB
75
Reseller R25
0800 043 0153
97.88
2GB
30GB
250
Reseller R105
0800 043 0153
271.60
4GB
Unlimited
Unlimited
LCN (www.lcn.com)
Blog
01438 342 490
20
100MB
1GB
LCN (www.lcn.com)
Starter
01438 342 490
30
1GB
1GB
10
LCN (www.lcn.com)
Starter
01438 342 490
30
1GB
1GB
10
LCN (www.lcn.com)
Dynamic
01438 342 490
50
2GB
2GB
20
LCN (www.lcn.com)
Premium
01438 342 490
80
5GB
5GB
50
LCN (www.lcn.com)
Unlimited
01438 342 490
120
Unlimited
Unlimited
Unlimited
LD Hosts (http://ldhosts.co.uk)
LD Budget (Linux)
07891 235858
11.88
1GB
1GB
500
LD Home (Linux)
07891 235858
23.88
10GB
10GB
5,000
LD Pro (Linux)
07891 235858
41.88
50GB
50GB
20,000
LD Unlimited (Linux)
07891 235858
60
Unlimited
Unlimited
Unlimited
Windows Home
07891 235858
17.88
2GB
2GB
1,000
Windows Unlimited
07891 235858
60
Unlimited
Unlimited
Unlimited
Media Temple (http://mediatemple.net)
Shared-Server Pro
+1 310 841 5500
64
2GB
1TB
1,000
Media Temple (http://mediatemple.net)
Shared-Server Advanced
+1 310 841 5500
109
5GB
1.5TB
5,000
NameHog (www.namehog.net)
Email Only
01604 212 904
11.99
2.5GB
15GB
10
Starter
01604 212 904
36.99
10GB
150GB
Unlimited
Home Pro
01604 212 904
59.99
25GB
Unlimited
Unlimited
Business
01604 212 904
109.99
Unlimited
Unlimited
Unlimited
Namesco (www.names.co.uk)
StartUp Plus
0845 363 3632
89.99
500MB
5GB
10
Business
0845 363 3632
149.99
2,000MB
20GB
100
Business Plus
0845 363 3632
89.99
3,000MB
30GB
200
Designer
0845 363 3632
239.88
1GB
20GB
200
Designer Plus
0845 363 3632
479.88
Unlimited
30GB
Unlimited
32.89
109.99
274.89
300
720
1,200
1,800
1GB
5GB
Unlimited
20GB
160GB
2x500GB
2x500GB
Unlimited
Unlimited
Unlimited
Unlimited
Unlimited
Unlimited
Unlimited
500
1000
1000
Unlimited
Unlimited
Unlimited
Unlimited

DEVELOPER
ONE
RESELLER
VM500 Server
2200DC Server
3000DC Server
2600QC Server
Netcetera
www.netcetera.co.uk
0800 808 5450

0800 808 5450
0800 808 5450
0800 808 5450
0800 808 5450
0800 808 5450
0800 808 5450
Netplan (www.netplan.co.uk)
Shared 100
0207 1000 424
60
100MB
1GB
VS100
0207 1000 424
600
5GB
5GB
VS200
0207 1000 424
1,000
10GB
10GB
10
VS300
0207 1000 424
2,000
15GB
50GB
20
100+
Dedicated Servers
0207 1000 424
3,000+
73GB+
1,500GB
PurplePaw (www.purplepaw.co.uk)
Email
N/A
25
100MB
1GB
10
Play
N/A
40
100MB
1GB
10
Plus
N/A
65
750MB
5GB
25
Power
N/A
95
2GB
10GB
100
R3 Reseller
N/A
660
10GB
50GB
Unlimited
hosting listings __________________________________________________________91
Clas sif ied Ad ver t ising
clikpic
Websites for photographers
Try the new Clikpic for only 40 pa
includes
ecommerce
Visit www.clikpic.com for a FREE 14 day trial

POSTGRES
DEVELOPMENT
ISSUES?
Dont waste time trouble-shooting

If youre developing an application or environment thats not
in production, dont waste time if youre faced with an issue.
Our Developer Support gives you access to some of the most
knowledgeable Postgres experts in the world youll be back
on track in no time.
Developer Support is available on a monthly subscription. Minimum term is 6 months.
UK +44 (0)870 766 7756

US +1 650 378 1218
2ndquadrant.com/developersupport
Co
m mp
o a
an bile tib
d p le
ta ho w
bl n ith
et es
s
s Stunning range of new templates.

s New admin system makes it even easier to use.
s Stylish slideshows and carousels throughout.
s New blog styles with extra options.
s Easy upload and link to your social media.
s And much more besides!
Clas sif ied Ad ver t ising
01202 586442
DOMAINS
BEST OF
BRITISH
Claim your piece of Britain!
Whatever you do with your domain name, celebrate your
place in the UK with a truly British web address!
.99
From
CLICK
UPGRADE OR
DOWNGRADE
CALL
SPEAK TO
AN EXPERT
rst year*
excl. 20% VAT
CERTAINTY
GEOREDUNDANCY
0333 336 5509

*1&1 Domains from 0.99 rst year. After 1 year regular prices apply. Prices exclude 20% VAT. Visit 1and1.co.uk for full offer details, terms and conditions.
1&1 Internet Limited, Discovery House, 154 Southgate Street, Gloucester, GL1 2EX.
1and1.co.uk
RESOURCES FILESILO
YOUR FREE RESOURCES
LOG IN TO WWW.FILESILO.CO.UK/WEBDESIGNER AND DOWNLOAD THE

LATEST COLLECTION OF MUST-HAVE VIDEOS AND RESOURCES
PLUS
55 MINS
OF EXPERT
HTML
VIDEO
75 ULTRA FADED LIGHT LEAK EFFECTS

ADD A TOUCH OF RETRO WITH THIS COLLECTION
YOUR BONUS
RESOURCES
ON OUR BRAND NEW FILESILO
THIS ISSUE YOU WILL FIND AN
UNMISSABLE COLLECTION OF
VIDEO GUIDES AND RESOURCES
s 55 Minutes of expert Web Design video
guides from Web Mentor
(webmentor.org)
s 75 Ultrafaded light leak effects from
SparkleStock
(sparklestock.com)
s 5 HTML5 and Responsive web templates
layouts from HTML5UP and W3Layouts
s The Rakesly Bold and and Walken Crisp
fonts from Typodermic fonts
WEB DESIGN VIDEOS
HTML, APPS AND WORDPRESS
TOTAL
RESOURCES
83
TUTORIAL FILES
THIS ISSUES ASSETS
94
FILESILO THE HOME OF PRO RESOURCES

DISCOVER YOUR FREE ONLINE ASSETS
A rapidly growing library
Updated continually with cool resources
Lets you keep your downloads organised
Browse and access your content from anywhere
No more torn disc pages to ruin your magazines
No more broken discs

Print subscribers get all the content
Digital magazine owners get all the content too!
Each issues content is free with your magazine
Secure online access to your free resources
This is the new FileSilo site that
replaces your disc. Youll find it by
visiting the link on the following page.
The first time you use FileSilo youll
need to register. After that, you can use
the email address and password you
provided to log in.
The most popular downloads are

shown in the carousel here, so check
out what your fellow readers are
enjoying!
If youre looking for a particular type
of content like brushes or fonts, use
the filters here to refine your search.
Cant find the resource youre looking
for in these filters? Click on More
Options to specify exactly what kind of
resource you want.
Green open padlocks show the issues
you have accessed. Red closed
padlocks show the ones you need to
buy or unlock.
Top Downloads are listed here, so
you can get an instant look at the
most popular downloaded content.
Check out the Highest Rated list to
see the resources that other readers
have voted for as the best!
Find out more about our online

stores, and useful FAQs like our
cookie and privacy policies and
contact details.
Discover our amazing sister
magazines and the wealth of content
and information that they provide.
95
RESOURCES FILESILO
HOW TO US
EVERYTHING YOU NEED TO KNOW ABOUT

ACCESSING YOUR NEW DIGITAL REPOSITORY
To get access to FileSilo, please visitwww.filesilo.co.uk/webdesigner
01
Follow the
instructions
on-screen to create an
account with our secure
FileSilo system, or log in
and unlock the issue by
answering a simple
question about
the magazine.
You can access
the content for
free with your
issue.
02
If youre a print
subscriber,
you can easily unlock all
the content by entering
your unique Subscriber
ID. You can find this on all
correspondence from
Imagine Publishing,
including the clear plastic
envelopes your
magazine gets delivered
to your door
in every month.
03
You can access

FileSilo on any
desktop, tablet or
smartphone device using
any popular browser
(such as Safari, Firefox or
Google Chrome).
However, we recommend
that you use a desktop to
download content, as you
may not be able to
download files to your
phone or tablet.
04
If you have any

problems with
accessing content on
FileSilo, or with the
registration process, take a
look at the FAQs online or
email filesilohelp@
imagine-publishing.co.uk.
MORETUTORIALS
ANDINSPIRATION?
Web Designer is all about giving web designers and developers what they want. Make sure
that you pay a visit to the Web Designer website where you will find a treasure trove of
design and development tutorials. All the latest technologies and tools are covered
including HTML5, CSS3, jQuery, PHP and responsive design. Plus, delve into the lives of the
worlds biggest agencies with our exclusive interviews. Find out how they design and
develop some of the best websites seen on the web.
Issue 244 of
96
is on sale 7th January 2016 from GreatDigitalMags.com
UNLOCK THE POWER OF ANDROID
E FRE
SU
ESOURC
ER
ED
EVERY IS
S
D
w w w.li t t l e gre enr o b ot .c o.uk
Available
from all good
newsagents and
supermarkets
ON SALE NOW
OWNLOA
> Unlock your superphone > New Nexus 5X & 6P > Best budget smartphones
HARDWARE REVIEWS
ANDROID HACKING
TIPS & TRICKS
APP REVIEWS
HELP & ADVICE
BUY YOUR ISSUE TODAY

Available on the following platforms
facebook.com/littlegreenrobot
twitter.com/lgrobot
HOT
100
What are the new tools, techniques and technologies that you will be
using in 2016? We get the industry pros to reveal all
HOW TO BECOME
A DESIGN PRO?
Advice, tips and pointers on how to

improve your design skills
HOW TO GET
BETTER CODE
The techniques and tools to analyse

code and avoid mistakes
BUILD WEB APPS

WITH PHONEGAP
A close-up look at how to create

web-friendly apps the easy way
Visit the WEB DESIGNER online shop at

for back issues, books and merchandise
98 _____________________________________________________________ next month
CREATE 3D
NAVIGATION
Utilise HTML, CSS and JS to add a

new dimension to menus
ALL IN YOUR NEXT
EB DESIGNER
sue 244 on sale
Thursday 7th January 2016

Web Designer (2015)

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Web Designer (2015)

Загружено:

Авторское право:

Доступные форматы

EX

DIGITAL GENIUSES REVEAL

UNLEASH THE HTML5 3D

NAVIGATE WITH DEVICE

GET YOUR SITES ONLINE

THE NEW RULES & TOOLS FOR THE

WHY YOU NEED

COMPLETE BROWSER SUPPORT

The team at DPDK refuse to be

A new foundation for responsive design

ention responsive design and not far

companion app, collaboration on prototypes, flexible

A lean site will

Follow us on Twitter for all the news & conversation

FREE exclusive with this issue

This issues panel of experts

Imagine Publishing Ltd

Senior Designer Benjamin Stanley

The biggest and

Head of Sales Hang Deretz

Printing & Distribution

Printed by Southernprint Ltd, 17-21 Factory Road

Were always looking for the

Distributed in the UK, Eire & the Rest of the World by

Imagine Publishing Ltd 2015

DOMAINS | MAIL | HOSTING | eSHOPS | SERVERS

1&1 CLOUD SERVER

Then from 4.99 per month*

0333 336 5509

Cutting-edge features, techniques and inspiration for web creatives

The software giant has given its new browser an

Webkit: The best must-try

Hold the hamburger

26 belVita Bites: Behind the

38 Responsive Design Recoded

Whats new with Modernizr 3?

A studio standing at the epicentre of design and tech

If you love Snoopy youll love this site

7JTJU UIF WEB DESIGNER POMJOF TIPQ BU

GPS CBDL JTTVFT CPPLB[JOFT BOE %7%T

94 Get the latest must-have resources and videos

Web gurus take you step-by-step

Free GitHub hosting

Code a mobile 3D UI - part 2

Build rich 3D experiences

Turn to page 62 now

The tools and trends to

08 New improved MS Edge

Create scrolling text with colour

HTML5 and JavaScript support. But, how

look at whats happening

Webkit: The best must-try

How to get total browser support with a host of new

Need a new framework or library? Then

But how effective is it?

The hamburger icon has become the

Whats new with Modernizr 3?

Say hello to JS Promises

The tools, trends and news to

hen it comes to web

what has been added? A number of CSS

Responsive images are getting

To get a closer look at what Edge is

How does Edge compare with other browsers?