Professional Documents
Culture Documents
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
SAY HELLO TO
JS PROMISES
UNIQUE UI
INTERACTION
MANAGE ASYNCHRONOUS
OPERATIONS THE EASY WAY
THE TEAM BEHIND THE BUILD REVEAL HOW TO CREATE FOR ALL SCREENS
GITHUB
HOSTING
VR AND
THE WEB
INTERACTIVE
PRELOADERS
IMPRESS USERS WITH
HTML AND CSS
<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
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
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
Advertising
Digital or printed media packs are available on request.
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
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
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?
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.
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!
TRIAL
TRY FOR
30 DAYS
CLICK
UPGRADE OR
DOWNGRADE
CALL
SPEAK TO
AN EXPERT
1and1.co.uk
<meta>
insid
ontents
webdesigner@imagine-publishing.co.uk
Quick look
08 Whats happening with
Microsoft Edge?
@WebDesignerMag
www.webdesignermag.co.uk
Cover focus
10
12
14
Lightbox
A showcase of inspirational sites and the
techniques used to create them
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
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
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
18
Lightbox: PeanutizeMe
FileSilo
A comprehensive collection
of free designer resources!
q.JOTPG)5.-WJEFPHVJEFT
q6MUSBGBEFEMJHIUMFBLFGGFDUT
q)5.-3FTQPOTJWFUFNQMBUFT
q3BLFTMZBOE8BMLFOGPOUT
<tutorials>
94
46
52
58
Never
miss an issue
Subscribe
64
The new rules and platforms for building the next generation of the web
<header>
50
web workshop
Code a draggable fading effect
tuckeffect.com
Add interest and interaction to homescreens
56
web developer
10
72
78
12
Comment:
"MFY #FSH
accepted for menus on smaller screens.
5IFSFBSFTUJMMTPNF
VTFSTXIPEPOULOPX
XIBU UIFJDPONFBOT
Alex Berg
84
meta _________________________________________________________________________ 7
News
CONTACT US AT: webdesigner@imagine-publishing.co.uk | @WebDesignerMag
Header
Whats happening
with Microsoft Edge?
With new updates to its browser will designers and developers
rethink their opinion. Web Designer investigates
453
Chrome 44
Opera 31
Firefox 40
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
02.
01.
03.
04.
01. Si Le Soleil
silesoleil.com
02. Hoover-Mason
hoovermason.com
04. Olmo
olmo.it/en
Graphics
Colour picker
Typesetter
Themematic
on.be.net/1MkaZMw
bit.ly/1SAmyAV
bit.ly/1Xcahcy
bit.ly/1NAW2Uj
Create Great
Biondina 4
White/Black
#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
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
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.
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
Device detection is
an important facet of
personalisation
header_______________________________________________________________________11
Header
Opinion
12______________________________________________________________________header
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.
100% guaranteed
uptime!
Dedicated SSL
certicates
1.99
per month ex VAT charged at 20%
LightBox
Chapter 3
chpt3.com
Designer - SOON_ thisissoon.com
Development technologies HTML5, CSS3, Bootstrap, jQuery, Angular JS, GSAP, Skrollr, Fonts.com
14____________________________________________________________________ lightbox
LightBox
Chapter 3
#2C2C2D
#9E9E9E
#BE1522
#454545
#9C9C9F
Above
Above
lightbox ____________________________________________________________________ 15
LightBox
Chapter 3
</script>
</body>
</html>
<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
16____________________________________________________________________ lightbox
LightBox
Peanutize Me
peanutizeme.com
Designer - Ludomade ludomade.com
Development technologies HTML5 <video>, CSS3, JavaScript, jQuery, RequireJS, Video.js, Typekit
18____________________________________________________________________ lightbox
LightBox
Peanutize Me
#BEC46A
#FDA886
#EDD075
#57A4D8
Above
Above
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
1. Streamline performance
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.
5. Visual QA Pass
Cartoon fonts
20 __________________________________________________________________ lightbox
t have to
n
do
u
yo
so
t
en
em
ag
an
m
er
rv
We do all the se
Winne
ISPA Cust
omer Cho
ice
2
013 + 20
1
Aw
4 + 2015ard
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
LightBox
DS | Signature Art
ds-signatureart.com
Designer - DPDK dpdk.com
22 ___________________________________________________________________ lightbox
LightBox
DS | Signature Art
#0D090A
#352A2E
#A60044
#A6927A
Above
Above
lightbox ___________________________________________________________________ 23
LightBox
DS | Signature Art
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.
Animation in action
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:
BRAND
NEW
BELVITA BITES:
BEHIND THE
BREAKFAST
BISCUIT
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
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
BELVITA BITES
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
BELVITA BITES
GORGEOUS GORDON
GARY GLEESON
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.'
Want more?
Go to GreatDigitalMags.com
and get great deals on brilliant
back issues & exclusive
special editions
Plus Save
even more
if you
subscribe
Exclusive
books & special editions
greatdigitalmags.com
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
34 _________________________________________________________________pro file
DS | SIGNATURE ART
ds-signatureart.com
INDUSTRY INSIGHT
pro file_________________________________________________________________ 35
36 _________________________________________________________________pro file
Web - DPDK.com
Founders Ferry Perret Gentil
Rolf Vreijdenberger
Pim van Helten
Year founded - 2001
Current employees - 40
Location(s) - Rotterdam
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
feature __________________________________________________________ 39
Motion UI
40__________________________________________________________ feature
Collaborate on responsive
design prototypes
Upload your responsive design web
pages to easily get contextual feedback on
any breakpoint
Imran Oozeerally
Barclays
Doug Macklin
Golden State Warriors
Nick Pettit
Team Treehouse
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
The hassle-free
setup it provides is
unparalleled
feature ___________________________________________________________ 41
TUTORIAL
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.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:
plugins with our JS, lets see what that looks like.
<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>
<!-- this data attribute is what foundation
looks for to initialize your plugin -->
<div class="column card"> <!-- repeat as
many of these as you like -->
<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.9) translate(0px, -10%);
}
.is-stacked .column:nth-child(3) {
transform: scale(0.8) translate(0px, -20%);;
}
.is-stacked .column:nth-child(4) {
transform: scale(0.7) translate(0px, -30%);
}
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(){
44 __________________________________________________________ feature
}
};
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:
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);
.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
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!
<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
46
Tutorials
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.
1. Sign up!
<html>
<body>
<h1>An error has occurred</h1>
</body>
</html>
Attention: Unix!
Left
47
Tutorials
Get free web hosting with GitHub Pages
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.
Analytics caveat
Top left
48
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.
19. Troubleshooting
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
Slide to unlock
<comment>
What our
experts think
of the site
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>
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.
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
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.
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.
Positioning above
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 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
53
Tutorials
Create an interactive mobile 3D interface
.hidden{
display: none;
}
.visible{
display: block;
}
Top left
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;
}
.head a {
display: inline-block;
float: left;
width: 10%;
padding: 10px 0 0 10px;
text-decoration: none;
}
.head h2{
display: inline-block;
width: 70%;
margin: 0;
padding: 7px 10px 0 0 ;
float: right;
text-align: right;
}
p{
padding: 5px 10px;
}
Tutorials
Create an interactive mobile 3D interface
background: #714c6e;
}
#info3 .head a{ color: #eed8ec; }
#info3 p{ color: #584356; }
function fade1(){
var change = document.getElementById(
'info1' );
change.classList.remove('bounceInLeft');
change.classList.add('bounceOutLeft');
}
function fade2(){
var change = document.getElementById(
'info2' );
change.classList.remove('bounceInLeft');
change.classList.add('bounceOutLeft');
}
function fade3(){
var change = document.getElementById(
'info3' );
change.classList.remove('bounceInLeft');
change.classList.add('bounceOutLeft');}
function fade4(){
var change = document.getElementById(
'info4' );
change.classList.remove('bounceInLeft');
change.classList.add('bounceOutLeft');
}
55
web workshop
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
Site Overview
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  
and two sets of text per layer should be used.
<div id="wrapper">
<span class="scroller">
<span class="scrText dark">These Are 
;Our Words</span>
<span class="scrText dark">These Are 
;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><!--overflow-hidden-->
</div><!--scroll-image-->
</div><!--scroll-container-->
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.
p;Our Words</span>
<span class="scrText light">These Are&nbs
p;Our Words</span>
</span>
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%)
}
}
.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;
}
.scroll-image img {
width:100%;
height:auto;
}
.overflow-hidden {
overflow:hidden;
}
.relative
{
position:relative;
}
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
Left
59
Tutorials
Build 3D experiences with PlayCanvas
that can be moved with WASD and Arrow keys, with the
mouse controlling the swivel.
Animation setup
Top left
60
pc.script.create('playbot_control', function
(app) {
var Playbot_control = function (entity) {
this.entity = entity;
};
Playbot_control.prototype =
{
};
return Playbot_control;
}
);
Tutorials
Build 3D experiences with PlayCanvas
app.keyboard.on(pc.EVENT_KEYUP, this.keyUp,
this);
};
Playbot_control.prototype = {
};
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);
},
var states = {
idle: {
animation: 'Playbot_idle'
},
run:
{
animation: 'Playbot_run'
}
};
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');
}
}
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%
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%
SCIFINOW
The number one magazine for sci-,
fantasy and horror fans
12 issues, save 50%
29.99
BY POST
SUBSCRIBE TO
ANY MAGAZINE
FOR JUST
29.99
YOUR DETAILS
Title
Surname
Address
First name
Postcode
Telephone number
Mobile number
Email address
This subscription is Q for me Q a gift
Country
First name
Postcode
Telephone number
Country
PAYMENT DETAILS
CHEQUE
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
by telephone Q
by email Q
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
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
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.
Oculus Rift
Samsung Gear VR
oculus.com/en-us/rift/
oculus.com/en-us/gear-vr/
Google Cardboard
HTC Vive
Razer OSVR
google.com/get/cardboard/
htcvr.com
razerzone.com/osvr
WE INVESTIGATE SOME OF THE TOOLS AND PLATFORMS THAT DEVELOPERS ARE USING TO BUILD,
DISPLAY, AND COLLABORATE ON THEIR WORK
Unity 3D
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
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.
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.
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.
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?
Patrick Kettner
Lead Modernizr developer
feature ___________________________________________________________73
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.
74___________________________________________________________ feature
"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
.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:
{
"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
<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.
feature ___________________________________________________________75
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
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.
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.
Modernizr GitHub
source code
customizr
bit.ly/1IegIzt
bit.ly/1P6HFgh
bit.ly/1SikoG0
76 __________________________________________________________ feature
bit.ly/1LxUIzM
www.linuxuser.co.uk
Available
from all good
newsagents &
supermarkets
today
ESOURC
ER
VERY IS
DE
E FRE
SU
OWNLOA
ED
ON SALE NOW:
ESSENTIAL GUIDES
DEFINITIVE REVIEWS
INDUSTRY INSIGHT
EXPERT OPINION
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
<script src="https://code.jquery.com/
jquery-1.11.3.min.js"></script>
<!-- Add this -->
<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.
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(){
Store keys
<script src="scripts/core.js"></script>
Left
79
Developer tutorials
Integrate payments with the Stripe API
Top left
80
<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>
Developer tutorials
Integrate payments with the Stripe API
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?
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);
});
}
});
});
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];
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"
}
)
;
81
Developer tutorials
Integrate payments with the Stripe API
stripe.charges.create
({
amount: price,
currency: "gbp",
source: card_token,
description: "Customer cheese order"
}, ...
Detecting fraud
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
submitOrder(res.id, function(response)
{
store.closeForm();
store.showReceipt(response.thingsBought);
}
17%
SAVE UP TO
ALL TITLES
JUST
49.99
CHRISTMAS
REAL CRIME
Uncover the most fascinating and
notorious true crimes in history
13 issues, save 4%
OW IT WORKS
The action-packed science and
technology magazine
13 issues, save 10%
TM
STER
EE THESKIE
INCREDI
100
OVER
ILLUSTRATIONS
&PHOTOS!
HE ALBATROS
O
AB
AN EEL
UGLY DUCKLINGS
ONLINE AT
OG
w ldlife
he winter
GADGET
Packed with the latest, coolest and
most exciting tech
12 issues, save 17%
KINGFISHERS
JAGUAR
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%
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%
Developer tutorials
Manage JS with
asynchronous tasks
Promise objects aim to remove redundant and/or excessive
callback functions from background tasks
84
Developer tutorials
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
<html>
<body>
<script>
function Matz()
{
setTimeout(function(){ alert("Oi!"); },
(Math.random()*10000));
}
Matz();
</script>
</body>
</html>
<body>
<script>
var aMatz=new Promise(
function Matz(resolve, reject)
{
setTimeout(function(){ resolve("Oi!"); },
(Math.random()*10000));
});
aMatz.then(function(){alert("Matz is
here!")});
</script>
</body>
3. Adapt to Promise
5. Transcendental Oi!
<body>
<script>
var aMatz=new Promise(
function Matz(resolve, reject)
{
setTimeout(function(){ resolve("Oi!"); },
(Math.random()*10000));
});
</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
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
85
Developer tutorials
Manage JS with asynchronous tasks
<body>
<script>
var aMatz=new Promise(
function Matz(resolve, reject)
{
setTimeout(function(){ resolve("Oi!"); },
(Math.random()*10000));
});
aMatz.then(function(){alert("Matz is
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;
var aMatz=new Promise(
function Matz(resolve, reject)
Advanced
functionality
Top left
86
{
setTimeout(function(){
if(window.doritIsHere==false)
{resolve("Oi!");}
else
{reject ("Eeek!")}
}, (Math.random()*10000));
});
aMatz.then(function(){alert("Matz is
here!")});
alert("We're done 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>
window.doritIsHere=true;
var aMatz=new Promise(
. . .
aMatz.then(function(){alert("Matz is
here!")}).catch(function(){alert("No, it's a
Dorit!")});
alert("We're done here");
</script>
</body>
</html>
9. Clean me up
Developers who are familiar with object-oriented
programming languages know the concept of a finaliser:
<script>
window.doritIsHere=true;
var aMatz=new Promise(
. . .
aMatz.then(function(){alert("Matz is
here!")}).catch(function(){alert("No, it's a
Dorit!")}).finally(function(){alert("It's
done!")});
alert("We're done here");
{
setTimeout(function(){
if(window.doritIsHere==false)
{resolve("Oi!");}
else
{reject ("Eeek!")}
}, (Math.random()*10000));
Developer tutorials
Manage JS with asynchronous tasks
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)
{
setTimeout(function(){
alert("Spawning new Matz!");
resolve(new Promise(Matz));
},1500);
});
<script>
window.doritIsHere=true;
matzBuilder.then(undefined,function(){
alert("Unhandled Inner Error")
}).then(function(val){
alert("Queueing completed! " + val);
});
</script>
<body>
<script src="jquery-2.1.4.js">
</script>
<script>
function DeltaColor(resolve, reject)
{
setTimeout(function(){
this.myElem.css( "color", "green" );
}, (Math.random()*10000));
}
</script>
</body>
function AddClosure(what)
{
return function (resolve, reject)
{
setTimeout(function(){
what.css( "color", "green" );
resolve();
}, (Math.random()*10000));
};
}
$( window ).load(function() {
var e1=new Promise(AddClosure($("#k1")));
e1.then();
var e2=new Promise(AddClosure($("#k2")));
e2.then();
var e3=new Promise(AddClosure($("#k3")));
e3.then();
var e4=new Promise(AddClosure($("#k4")));
e4.then();
var e5=new Promise(AddClosure($("#k5")));
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
Manage JS with asynchronous tasks
<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</
id="k3">xxxxxxxxxxxxx</
id="k4">xxxxxxxxxxxxx</
id="k5">xxxxxxxxxxxxx</
. . .
window.myArray=[e1,e2,e3,e4,e5];
Promise.all(window.myArray).then(function(){
$("#master").css( "color", "blue" );
});
});
p.then(onFulfilled, onRejected);
p.then(function(value) {
// fulfillment
}, function(reason) {
// rejection
});
Top left
88
window.myArray=[e1,e2,e3,e4,e5];
Promise.race(window.myArray).then(function()
{
$("#master").css( "color", "blue" );
});
});
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
+44 (0)1202586431
Hosting listings
SHOPPING CART
VIRUS FILTER
FIREWALL
PHONE SUPPORT
EMAIL SUPPORT
29.88
1GB
5GB
20
59.88
5GB
50GB
500
123-reg (www.123-reg.co.uk)
Pro
107.88
10GB
100GB
750
123-reg (www.123-reg.co.uk)
Bus Pro
179.88
20GB
Unlimited
1,000
123-reg (www.123-reg.co.uk)
Plus (MS)
59.88
2GB
25GB
100
123-reg (www.123-reg.co.uk)
Pro (MS)
107.88
5GB
50GB
500
123-reg (www.123-reg.co.uk)
179.88
10GB
150GB
1,000
PHONE NUMBER
PACKAGE
POP3
ACCOUNTS
Plus
MONTHLY BANDWIDTH
Starter
123-reg (www.123-reg.co.uk)
webdesigner@imagine-publishing.co.uk
WEB SPACE
123-reg (www.123-reg.co.uk)
DATABASE SUPPORT
Got a deal
you think we
should list?
2020Media (www.2020media.com)
Light User
45
20MB
1GB
2020Media (www.2020media.com)
Everyday
100
200MB
10GB
15
2020Media (www.2020media.com)
Business/Pro
275
500MB
20GB
50
2020Media (www.2020media.com)
JAVA Tomcat
300
100MB
3GB
15
2020Media (www.2020media.com)
ASP.Net
275
100MB
3GB
15
4D Hosting (www.4dhosting.com)
60
5GB
Unlimited
20
4D Hosting (www.4dhosting.com)
120
10GB
Unlimited
75
4D Hosting (www.4dhosting.com)
180
20GB
Unlimited
100
4D Hosting (www.4dhosting.com)
Big VPS
204
75GB
500GB
Unlimited
4D Hosting (www.4dhosting.com)
Bigger VPS
360
100MB
1,000GB
Unlimited
4D Hosting (www.4dhosting.com)
Biggest VPS
720
200GB
1,500GB
Unlimited
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
45
10GB
200GB
Unlimited
Blacknight (www.blacknight.com)
Medius
79
20GB
400GB
Unlimited
Blacknight (www.blacknight.com)
Maximus
45
30GB
600GB
Unlimited
Bravo14 (http://bravo14.co.uk)
Starter Linux
N/A
130
2,000MB
2,000MB
10
Bravo14 (http://bravo14.co.uk)
Starter Windows
N/A
20
2,000MB
2,000MB
10
Bravo14 (http://bravo14.co.uk)
Business Linux
N/A
45
4,000MB
4,000MB
4,000
Bravo14 (http://bravo14.co.uk)
Business Windows
N/A
45
4,000MB
4,000MB
4,000
Bravo14 (http://bravo14.co.uk)
Ultimate Linux
N/A
60
Unlimited
Unlimited
Unlimited
Bravo14 (http://bravo14.co.uk)
Ultimate Windows
N/A
60
Unlimited
Unlimited
Unlimited
Designwasp (http://designwasp.com)
Starter
30
3GB
20GB
1,000
Designwasp (http://designwasp.com)
Home
40
10GB
50GB
10,000
Designwasp (http://designwasp.com)
Business
60
Unlimited
Unlimited
Unlimited
Designwasp (http://designwasp.com)
Windows Unlimited
60
Unlimited
Unlimited
Unlimited
Designwasp (http://designwasp.com)
Windows Home
40
10GB
50GB
1,000
Designwasp (http://designwasp.com)
CheapHost
10
300MB
100MB
Personal
12
1GB
Unlimited
10
Personal Plus
48
Unlimited
Unlimited
50
Business
108
5GB
Unlimited
1000
Business Professional
132
Unlimited
Unlimited
Unlimited
eHosting (www.ehosting.com)
Starter
23.88
1GB
25GB
10
eHosting (www.ehosting.com)
Personal
59.88
2.5GB
Unlimited
50
eHosting (www.ehosting.com)
Expert
95.88
5GB
Unlimited
250
eHosting (www.ehosting.com)
Virtual
227.88
50GB
Unlimited
Unlimited
Evohosting (www.evohosting.co.uk)
Starter
N/A
29.99
500MB
1GB
Evohosting (www.evohosting.co.uk)
Home
N/A
54.99
2.5GB
30GB
50
Evohosting (www.evohosting.co.uk)
Business
N/A
79.99
6.5GB
Unlimited
Unlimited
Evohosting (www.evohosting.co.uk)
eCommerce
N/A
159.99
30GB
Unlimited
Unlimited
Fasthosts (www.fasthosts.co.uk)
Personal
32.87
5GB
Unlimited
50
Fasthosts (www.fasthosts.co.uk)
Business Bronze
58.38
50GB
Unlimited
500
Option
Fasthosts (www.fasthosts.co.uk)
Business Silver
76.39
Unlimited
Unlimited
Unlimited
Option
Fasthosts (www.fasthosts.co.uk)
Business Gold
101.89
Unlimited
Unlimited
Unlimited
Fasthosts (www.fasthosts.co.uk)
WD Starter
149.99
20GB
Unlimited
Unlimited
Option
Option
Fasthosts (www.fasthosts.co.uk)
WD Advanced
199.99
Unlimited
Unlimited
Unlimited
Option
Option
Starter Professional
29.80
2.5GB
10GB
1,000
Home Professional
89.99
Unlimited
Unlimited
10,000
90 _________________________________________________________hosting listings
+44 (0)1202586431
SHOPPING CART
VIRUS FILTER
FIREWALL
PHONE SUPPORT
EMAIL SUPPORT
Unlimited
Unlimited
Unlimited
349.99
Unlimited
Unlimited
Unlimited
ICUK www.icukhosting.co.uk
Professional
30
250MB
1GB
50
option
ICUK www.icukhosting.co.uk
Advanced
50
2GB
2.5GB
150
option
ICUK (www.icukhosting.co.uk)
Enterprise
80
2GB
500MB
Unlimited
option
ICUK (www.icukhosting.co.uk)
Professional Plus
90
500MB
5GB
100
option
ICUK (www.icukhosting.co.uk)
Premium Plus
150
1GB
12.5GB
500
option
ICUK (www.icukhosting.co.uk)
Enterprise Plus
300
2GB
20GB
Unlimited
option
ICUK (www.icukhosting.co.uk)
Reseller Windows
200
Unlimited
Unlimited
Unlimited
option
ICUK (www.icukhosting.co.uk)
Reseller Linux
200
Unlimited
Unlimited
Unlimited
option
ICUK (www.icukhosting.co.uk)
Reseller Enterprise
500
Unlimited
Unlimited
Unlimited
option
Mail M105
15.17
256MB
3GB
50
PACKAGE
POP3
ACCOUNTS
129.99
MONTHLY BANDWIDTH
Reseller Professional
WEB SPACE
Business Professional
PHONE NUMBER
DATABASE SUPPORT
Home H25
24.47
1GB
8GB
50
Professional - P55
45
2GB
15GB
75
Reseller R25
97.88
2GB
30GB
250
Reseller R105
271.60
4GB
Unlimited
Unlimited
LCN (www.lcn.com)
Blog
20
100MB
1GB
LCN (www.lcn.com)
Starter
30
1GB
1GB
10
LCN (www.lcn.com)
Starter
30
1GB
1GB
10
LCN (www.lcn.com)
Dynamic
50
2GB
2GB
20
LCN (www.lcn.com)
Premium
80
5GB
5GB
50
LCN (www.lcn.com)
Unlimited
120
Unlimited
Unlimited
Unlimited
LD Hosts (http://ldhosts.co.uk)
LD Budget (Linux)
07891 235858
11.88
1GB
1GB
500
LD Hosts (http://ldhosts.co.uk)
LD Home (Linux)
07891 235858
23.88
10GB
10GB
5,000
LD Hosts (http://ldhosts.co.uk)
LD Pro (Linux)
07891 235858
41.88
50GB
50GB
20,000
LD Hosts (http://ldhosts.co.uk)
LD Unlimited (Linux)
07891 235858
60
Unlimited
Unlimited
Unlimited
LD Hosts (http://ldhosts.co.uk)
Windows Home
07891 235858
17.88
2GB
2GB
1,000
LD Hosts (http://ldhosts.co.uk)
Windows Unlimited
07891 235858
60
Unlimited
Unlimited
Unlimited
Shared-Server Pro
64
2GB
1TB
1,000
Shared-Server Advanced
109
5GB
1.5TB
5,000
NameHog (www.namehog.net)
Email Only
11.99
2.5GB
15GB
10
NameHog (www.namehog.net)
Starter
36.99
10GB
150GB
Unlimited
NameHog (www.namehog.net)
Home Pro
59.99
25GB
Unlimited
Unlimited
NameHog (www.namehog.net)
Business
109.99
Unlimited
Unlimited
Unlimited
Namesco (www.names.co.uk)
StartUp Plus
89.99
500MB
5GB
10
Namesco (www.names.co.uk)
Business
149.99
2,000MB
20GB
100
Namesco (www.names.co.uk)
Business Plus
89.99
3,000MB
30GB
200
Namesco (www.names.co.uk)
Designer
239.88
1GB
20GB
200
Namesco (www.names.co.uk)
Designer Plus
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
Netplan (www.netplan.co.uk)
Shared 100
60
100MB
1GB
Netplan (www.netplan.co.uk)
VS100
600
5GB
5GB
Netplan (www.netplan.co.uk)
VS200
1,000
10GB
10GB
10
Netplan (www.netplan.co.uk)
VS300
2,000
15GB
50GB
20
100+
Netplan (www.netplan.co.uk)
Dedicated Servers
3,000+
73GB+
1,500GB
PurplePaw (www.purplepaw.co.uk)
N/A
25
100MB
1GB
10
PurplePaw (www.purplepaw.co.uk)
Play
N/A
40
100MB
1GB
10
PurplePaw (www.purplepaw.co.uk)
Plus
N/A
65
750MB
5GB
25
PurplePaw (www.purplepaw.co.uk)
Power
N/A
95
2GB
10GB
100
PurplePaw (www.purplepaw.co.uk)
R3 Reseller
N/A
660
10GB
50GB
Unlimited
clikpic
includes
ecommerce
Co
m mp
o a
an bile tib
d p le
ta ho w
bl n ith
et es
s
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
1and1.co.uk
RESOURCES FILESILO
PLUS
55 MINS
OF EXPERT
HTML
VIDEO
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
TOTAL
RESOURCES
83
TUTORIAL FILES
www.filesilo.co.uk/webdesigner
94
95
RESOURCES FILESILO
HOW TO US
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
04
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.
www.webdesignermag.co.uk
Issue 244 of
96
E FRE
SU
ESOURC
ER
ED
EVERY IS
S
D
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
APP REVIEWS
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?
HOW TO GET
BETTER CODE
CREATE 3D
NAVIGATION
EB DESIGNER