QUICK START GUIDE TO USING SVG

Learn how to implement, export, optimise and animate with CSS

BUILD A 3D UI CODE WITH SVELTE
Create a WebGL
interactive interface
Combine with Sapper for
lightning-fast reactive sites

WORDPRESS
The voice of web design

WORDPRESS:
20 BEST PLUGINS
Be more productive and creative with
Issue 332 : June 2020 : net.creativebloq.com this essential collection of add-ons

SEO
WOMEN IN TECH:
ARE THINGS GETTING BETTER?

Expert
insight on
how to target
top spot on
Google in

secrets
2020

PRO ADVICE: STAY AT THE 5 TOP TIPS TO HELP LAND

ISSUE 332 FOREFRONT OF YOUR FIELD YOUR DREAM DEVELOPER JOB
 Welcome

WELCOME

EDITOR’S NOTE
Heard of Bing, Yahoo, Ask, AOL, DuckDuckGo,
Baidu and Yandex? You probably have, but none
of them hold a candle to the world number one
search engine, Google, when it comes to market
share. According to Statcounter (https://netm.
ag/2Jrqac0), Google has just over 92 per cent of the
market share with Bing coming a very distant second
with less than three per cent. As for the rest they
don’t even hit two per cent market share. So it would
seem to make perfect sense to focus on Google when
considering SEO. And this is exactly what our lead
feature on page 48 does in this edition of net. SEO
consultant Carl Hendy has been in the business for
over 15 years and he gives some invaluable insight on
the questions you need to ask yourself/your teams
for a successful SEO strategy. Discover common
mistakes to avoid, what type of content you need to
be creating, the implications of poorly developed
sites, how JavaScript fits into the SEO scenario and a
host of tools you need for SEO success.
Elsewhere, senior developer Joe Ford selects 20
essential WordPress plugins to make you more
productive and creative. Aude Barral offers top tips
to help land your dream developer job and Christine
Brewis discusses how gender parity in tech has
changed over the last ten years. Enjoy.
Steven Jenkins, Editor
@netmag

FEATURED AUTHORS
CARL SUSH JOE MARK
HENDY K ELLY FORD SHUFFLEBOT TOM

Hendy is an SEO consultant with
over 15 years experience at solving
complex SEO issues. On page 48 he
reveals how to create a successful
SEO strategy that will improve your
Google ranking.
w: https://carlhendy.com
Kelly is a freelance designer that
specialises in HTML, CSS and Scalable
Vector Graphics (SVG). On page 70
he puts his knowledge to good use
with a quick start guide to exporting,
optimising and working with SVG.
w: www.sushkelly.co.uk
Ford is a senior developer at Tillison
Consulting and has a passion for PHP,
WordPress and Laravel. On page 56,
he handpicks an essential selection
of WordPress plugins to power up
your daily workflow.
w: https://tillison.co.uk
Shufflebottom is professor of
interaction design at Sheridan
College. He demonstrates how to use
the three.js library to create a WebGL
animated interactive interface on
page 64.
w: http://webspaceinvader.com

june 2020 3
 Future PLC, Richmond House, 33 Richmond Hill, Bournemouth, BH2 6EZ +44 (0)1202 586200
@netmag /netmag flickr.com/photos/netmag netmag@futurenet.com net.creativebloq.com medium.com/net-magazine

EDITORIAL
Editor Steven Jenkins steve.jenkins@futurenet.com
Group Editor in Chief Claire Howlett Senior Art Editor Will Shum
CREATIVE BLOQ
Editor Kerrie Hughes kerrie.hughes@futurenet.com

CONTRIBUTIONS
Mark Billen, Kyle Carpenter, Dominic Carter, Tom May, Carl Hendy, Mark Shufflebottom, Jo Cole, Matt Crouch, Joe Ford,
Sush Kelly, Oliver Lindberg, Robyn Larsen, Christian Heilmann, Trine Falbe, C S Rhymes, Shakeel Quadri, Aude Barral, Christine Brewis,
Camille Gribbons, Andrew Couldwell, Edan Kwan, Cody Staudenmier, Scott Agrimson

PHOTOGRAPHY
All copyrights and trademarks are recognised and respected

ADVERTISING
Media packs are available on request
UK Commercial Sales Director Clare Dove clare.dove@futurenet.com Advertising Sales Manager Michael Pyatt michael.pyatt@futurenet.com
Account Sales Director Matt Bailey matt.bailey@futurenet.com Account Sales Director George Lucas george.lucas@futurenet.com
Account Sales Manager Tom Walsh tom.walsh@futurenet.com

INTERNATIONAL
net is available for licensing. Contact the Licensing team to discuss partnership opportunities.
Head of Print Licensing Rachel Shaw licensing@futurenet.com

PRINT SUBSCRIPTIONS & BACK ISSUES

Web www.myfavouritemagazines.co.uk Email enquiries contact@myfavouritemagazines.co.uk Tel 0344 848 2852 International +44 (0)344 848 2852
Group Marketing Director, Magazines & Memberships Sharon Todd

CIRCULATION
Head of Newstrade Tim Mathers 01202 586200

PRODUCTION
Head of Production US & UK Mark Constance Production Project Manager Clare Scott Advertising Production Manager Joanne Crosby
Digital Editions Controller Jason Hudson Production Manager Nola Cokely

MANAGEMENT
Chief Content Officer Aaron Asadi Chief Revenue Officer Zack Sullivan Commercial Finance Director Dan Jotcham
Managing Director Prosumer Keith Walker Head of Art & Design Greg Whittaker

PRINTED BY
William Gibbons & Sons Ltd, 26 Planetary Road, Willenhall, West Midlands, WV13 3XT

DISTRIBUTED BY
Marketforce, 5 Churchill Place, Canary Wharf, London, E14 5HU www.marketforce.co.uk 0203 787 9001

ISSN 1355-7602

DISCLAIMER
All contents ©2020 Future Publishing Limited or published under licence. All rights reserved. No part of this magazine may be used, stored, transmitted or
reproduced in any way without the prior written permission of the publisher. Future Publishing Limited (company number 2008885) is registered in England
and Wales. Registered office: Quay House, The Ambury, Bath BA1 1UA. All information contained in this publication is for information only and is, as far as
we are aware, correct at the time of going to press. Future cannot accept any responsibility for errors or inaccuracies in such information. You are advised
to contact manufacturers and retailers directly with regard to the price of products/services referred to in this publication. Apps and websites mentioned
in this publication are not under our control. We are not responsible for their contents or any other changes or updates to them. This magazine is fully
independent and not affiliated in any way with the companies mentioned herein.

If you submit material to us, you warrant that you own the material and/or have the necessary rights/permissions to supply the material and you
automatically grant Future and its licensees a licence to publish your submission in whole or in part in any/all issues and/or editions of publications, in any
format published worldwide and on associated websites, social media channels and associated products. Any material you submit is sent at your own risk
and, although every care is taken, neither Future nor its employees, agents, subcontractors or licensees shall be liable for loss or damage. We assume all
unsolicited material is for publication unless otherwise stated, and reserve the right to edit, amend, adapt all submissions.

We are committed to only using magazine paper which is derived from responsibly managed, certified forestry and chlorine-free manufacture. The paper
in this magazine was sourced and produced from sustainable managed forests, conforming to strict environmental and socioeconomic standards. The
manufacturing paper mill and printer hold full FSC and PEFC certification and accreditation.

4 june 2020
6 june 2020
june 2020 7
CONTENTS
Issue 332: June 2020 : net.creativebloq.com

FEED FEED

SIDE PROJECT 13
WORKSPACE 15
C S Rhymes discusses his book project for Shakeel Quadri gives us an insight into his freelance studio designed
helping developers avoid mistakes by a local award-winning architect

CLIENTS FROM HELL 14

The latest in our series of nightmare clients

VOICES
SHOWCASE YOUR DEV SKILLS 16
Aude Barral shares 5 top tips for landing
your dream developer job

ESSAY 18
Christine Brewis examines how gender
parity in tech has changed

THE 5G UI REVOLUTION 26
Tris Tolliday describes his vision of a web UI
catapulted forwards by 5G

Q&A 27
Andrew Couldwell discusses his new book
on design systems, Laying the Foundations

BIG QUESTION 28
Our experts reveal what they do when they VOICES
are stuck in a creative slump
INTERVIEW 20
Photo: Bence Bamer

UX designer at
Booking.com, Camille
SAVE UP TO Gribbons, reveals how she

71 %
first got into the industry

TURN TO
SUBSCRIBE TO IMAGINE FX PAGE 6
AND TAKE ADVANTAGE OF THE to find out more
about the savings on
PRINT AND DIGITAL BUNDLE offer for subscribers

8 june 2020

FEATURES
GOOGLE
SEO SECRETS
Experienced SEO consultant Carl
Hendy offers up expert advice on
targeting top spot in search
Contents
REGULAR
GALLERY 30
Mark Billen runs down
Photo: Anette Joost
this month’s best sites,
including Illuminating
Radioactivity, Kern Inc, Scars
of Democracy and SOTM
1917 – Into the Trenches
REGULARS
EXCHANGE 10
Robyn Larsen, Christian Heilmann and
Trine Falbe share expert advice and tips
SHOWCASE
PROFILE 36
Lusion founder, Edan Kwan, chats about
battling demons and winning awards
HOW WE BUILT 42
Oblio reveals how it created its innovative
3D navigation for the Knives Out film
PROJECTS
WORDPRESS:
48 20 BEST PLUGINS 56
Joe Ford handpicks an essential
selection of must-have plugins for
improved productivity and creativity
QUICKSTART GUIDE
ON HOW TO USE SVG 70
Sush Kelly shows how to export, optimise
and add animation to SVG with CSS
PROJECT
BUILD A 3D USE SAPPER AND
INTERACTIVE INTERFACE 64 SVELTE TO BUILD A FAST SITE 76
Mark Shufflebottom reveals Matt Crouch explains how to take a
how to use the three.js library minimalist framework and combine it
to create a WebGL animated with server rendering
interactive interface for your site
june 2020 9
 Practical
advice from
Send your questions to netmag@futurenet.com industry experts

THIS MONTH FEATURING... QUESTION OF THE MONTH

ROBYN LARSEN Should I work for a client I don’t align with or

A former nuclear
engineer from British
shut up and take the money? Maybe I can
Columbia, Canada, Larsen
is a UX speaker currently influence from the inside?
working as a front-end Leslie Haverford, Cumbria, UK
developer for Shopify in Singapore.
w: www.robynlarsen.ca TF: It depends on whether the misalignment is in the core business model, an internal
t: @robyn_larsen process, or on a smaller scale. It also depends on what position you hold.
If the problem is that you don’t see yourself contributing to a business model like
CHRISTIAN HEILMANN surveillance capitalism (think Facebook), then I would probably look for another job.
A developer evangelist, There is not much chance of you changing anything from the inside in a company that
presenter and JavaScript makes their profits from data trade.
lover living and working If you hold a middle management position or are in a department or organisation
in Berlin, Heilmann is with a flat organisational structure, there might be ways you can make some positive
principal program
change from the inside. I believe conversations around ethical designs should be
manager for browser tools at Microsoft.
w: christianheilmann.com framed around all the right things the company/product should be doing and ideally
t: @codepo8 not what things we should not be doing/avoiding within our designs. This is a healthier
way of framing that conversation. Until this ideal becomes true within most startups
TRINE FALBE in the emerging world (India in my case), how do you suggest we have conversations
Living in Esbjerg, within our team where the most popular question tends to be: “Why should I care
Denmark, Falbe is a UX about being ethical when my country doesn’t have a law around that?” The
consultant, teacher,
Photo: Anette Joost

conversation when you operate in a market that doesn’t have legislation tied to ethics
speaker, writer and shouldn’t be any different from markets that do.
co-author of The Ethical
Compliance is not simply linked to ‘because the law says so’. Compliance with, for
Design Handbook.
w: ethicaldesignhandbook.com instance, GDPR has cost-benefits. For instance, do you measure the costs that come
t: @trinefalbe with poor data handling? The hidden costs in customer service, support, and social
media backlash? We
typically don’t
account for these
costs. But we should.
Also, just because
your own country
doesn’t have
legislation, doesn’t
mean you don’t have
to comply. If a
company has users in
the EU, even just
one, it needs to
The Ethical Design Handbook (ethicaldesignhandbook.com) offers practical techniques to influence a
positive change in your company and help your business grow without dark patterns comply with GDPR.

10 june 2020

All the new features that will go into Edge’s developer tools will be based on user feedback and user testing
EDGE DEVTOOLS
What makes Edge’s DevTools stand out
from Chrome’s and Firefox’s?
Ben Brehaut, Bournemouth, UK
CH: I don’t think it is the right approach
to try to beat the competition in a space
like developer tools. Our job is to give
In our case, the current developer tools
are based on the Chromium ones and
what we contribute to them based on
the needs of our users goes back into
the core project. That way, any browser
not trying to innovate for the sake of
All the features that will go into
developer tools are based on user
feedback and user testing. One of the
lot of users and many developers in the
needs than the very vocal and visible
developer crowd at conferences and on
Twitter. One thing we’re working on is
how the browser developer tools can
We don’t see the browser tools as
a standalone project but as a piece of
an end-to-end developer story from
Q&As
3 SIMPLE STEPS
When designing your
UX to work globally,
how do you deal with
the difference in word
lengths between different
languages? English vs
German comes to mind.
Ben Furfie, Merseyside, UK
Image: Fauxels via Pexels.com
Focus on extremities
RL: It’s really helpful to understand the
design extremities. Focusing on English to
Japanese or German really brings light to
the design practice.
design to continuous delivery. We love
to see what other browser makers
come up with and we’re in constant
communication about how we can help
each other. It is exciting to see how
fast we became a productive partner
in the Chromium project and I am
looking forward to contributing more
improvements based on user research.
JAVASCRIPT
What JavaScript engine is the best one in
your view?
Xulika Vincent, via Twitter
CH: Any that is open source, maintained Use pseudo-localisation
by various players, has a thriving Using pseudo-localisation as a design and
community and is easy to embed. I’ve development practice helps if you don’t
worked with various ones in the past have access to the actual translation.
There is an amazing article from the
released Chakra with the original Edge Netflix design team that talks about
browser. But I am not in control over scaling UIs with pseudo-localisation (bit.
ly/pseudo-local).
use the one their browser comes with. It
doesn’t matter what I like, what the user UI illustrations
has is what we need to concentrate on. In some of our marketing
That said, I am worried to see how many collateral at Shopify, we
Node setups are woefully outdated and use UI illustrations (HTML
as such, vulnerable to attacks. We have representations of the
product) where text and imagery scale.
releases. Our job as server admins is to
keep things secure and up-to-date.
june 2020 11
 Network
COOL STUFF
WE LEARNED
THIS MONTH
DESIGN MOBILE APPS FOR
ONE-HAND USAGE
The ever-expanding
size of smartphone
screens presents new
challenges and opportunities
for web designers and app
developers. In this article,
Maitrik Kataria looks at how
designing apps for one-hand
usage can help overcome
these obstacles.
https://netm.ag/3aVZX0W
FIREFOX TURNS
CONTROVERSIAL NEW
ENCRYPTION ON BY
DEFAULT IN THE US
If you’re paranoid
people are snooping
on which sites you’re
visiting, this decision by
Mozilla might be welcome
news. As of late February,
the browser has turned on
by default DNS over HTTPS
(DoH) to protect the privacy
of users. And while DoH
won’t stop data collection
entirely, it makes it difficult.
https://netm.ag/2x0MXIH
10 EVIL TYPES OF DARK UX
PATTERNS
The UX field was
developed to improve
interactions between people
and services. However,
some UX designers aren’t
above gaming the system to
make visitors undertake
actions that benefit the
company instead of the
user. It’s dubbed dark UX,
and these are its evil
patterns to be wary of.
https://netm.ag/2QdLkhR
12 june 2020
WHICH UX ERRORS ARE
THE MOST IRRITATING?
Neglecting
mobile UX
6.90%
Hidden calls
to action
6.90%
Excessive
animations
17.24%
From our timeline
Which books should web designers read?
Not strictly ‘web design’
but User Friendly by @
cliffkuang & @fabtweet
should be on the list. It explores
applied user experiences, tells
myriad fantastic stories, and
gives practical advice to explore
the concepts it presents. It’s so
well written to boot!
@tomjepsoncrtv
Don’t Make Me Think by
Steve Krug may be
usability focused but is
essential reading for anybody
who works in web design and
development. If a client
THE POLL
Unreadable
fonts
3.45%
Needless sticky
headers
3.45%
Autoplay videos
3.45%
Obtrusive pop-
ups
58.62%
Design is a Job by @
monteiro.
@marekIsOkay
questions a web design decision, User Friendly by Cliff
I can usually point them to a Huang. Definite
chapter in this book. companion to The Design
@TheArtOfAwe of Everyday Things.
@webcraftsman
Thinking, Fast and Slow
by Daniel Kahneman – There are too many to
an absolute classic and mention but why not try
invaluable for designers. a classic graphic design
The Design of Everyday Things by book – A Smile in the Mind – to
Don Norman – another design/ bring some fun and pleasure to
psychology staple, and one that web UI and UX?
changed how I think about @chopsmcmutton
design. Designing for Emotion
by @aarron is another Design as Art by Bruno
personal favourite. Munari.
@JonLabonski @cbecker
 Side project

HOW NOT TO
MAKE A WEBSITE
C S Rhymes discusses his book project for helping
developers avoid mistakes when building websites
and improving a user’s experience
SIDE PROJECT OF THE MONTH

Tell us what your side project does

INFO I decided to write a book (How NOT to Make a
Website) aimed at developers and business owners to
help introduce them to the wonderful world of
making websites.

Why did you create it?

I have over 12 years of experience as a web developer

C S RH Y MES and I have seen some pretty bad sites in my time. I

thought it would be helpful to share my knowledge to
Rhymes is a senior
developer specialising help others get the most out of their website.
in Laravel and Vue.js. In
his spare time he enjoys What technologies were used in building it?
blogging, writing books, I originally wrote the book in 2014 with Word but have
developing Jekyll themes
updated it this year, rewriting it using AsciiDocs. This
and contributing to
Laravel packages. enabled me to output both HTML for the Kindle store,
w: www.csrhymes.com/
as well as PDF format, which I used to create the
books paperback. I normally write my blog posts in
t: @chrisrhymes Markdown so I found AsciiDoc format pretty simple
to get to grips with and it seemed a bit like
development too, using the command line to generate
the different formats and then customising the styles
with YAML.
The artwork was created using an iPad and the resulting in me releasing an open-source Jekyll theme
Paper app with the Apple Pencil. Creating the artwork called Bulma Clean Theme.
was something I had never done before so I decided to
keep to simple line drawings, but it ended up working How has it been received?
surprisingly well with the lower resolution of black- The decision to publish the book has increased my
and-white Kindle displays. confidence in my own writing abilities, leading me to
I launched the book on the Kindle store and then sat write another book called How NOT to use a Smartphone
back waiting for the sales to come flooding in, but it and writing regular blog posts.
didn’t quite work out as expected. I quickly realised
that writing the book was only the beginning of the What do you think you’ll do next with it?
process and that I was going to need to put a lot more I used to write blog posts on and off, but last year I
time and effort into promoting it. I tried some pricing started writing more regularly after I discovered the
offers in the discount store but it didn’t seem to fantastic community on https://dev.to as well as
generate much traffic. discovering I could share my posts on the Laravel
This led me down the road of updating my own News website.
website to help promote the book. After a few It’s amazing what one side project can lead to. I
iterations of the website, I eventually settled on using almost didn’t release the book but looking back now
Jekyll with Bulma. I soon realised that I could actually I’m so glad I did. Getting over the finish line and
build a theme that others could use for their own site, pressing the publish button was a great feeling.

june 2020 13
FEED Clients from hell
SOMETHING FROM NOTHING
Exclusively for net: The latest in a series of
anonymous accounts of nightmare clients
CLIENTS FROM HELL
I’ve just finished developing a site for a client
who has been a pain in the ass since day one.
The client worked in the publishing industry
and was trying to set up an independent copy-
editing service. Apparently he was very well
known, and claimed to have designed the logo
for the publishing house that he had worked
for previously.
Even though I had a bad feeling about him,
he paid upfront without even batting an eye,
so I went ahead.
I have since learned I don’t charge enough.
Once I get a client, I have a very organised
system for content submissions, including a
client portal with detailed instructions for how
to submit everything that is needed – copy,
images, content, etc.
I set up links and reminder emails from day
one asking for items. The client ignored all of
them. I also have an alternate Dropbox option
where clients can simply drop what I need
14 june 2020
when they have it – I have this in case the client
is intimidated by my other system.
Despite these two very clear, very easy to
use options, the client insisted on sending me
items and instructions via email.
Me: If you could send me your items via the
client portal or by Dropbox, that would be
great… It helps me keep everything organised,
which helps keep the project on track.
Client: Oh, I guess you just aren’t very
organised. You can simply set up email folders.
Me: I’m extremely organised. Which is why I
have this easy-to-use client portal for you to
submit files. Please try to follow the process I
have laid out; it will keep your project from
being delayed.
Obviously, he just sent files via email.
It was also painful getting feedback and
direction from him. The following are image
files he sent me in individual emails with the
subject line ‘for the website’:
A B&W vector of a Victorian drawing ‘Monty
Python’ pointing hand.
A ton of images of kittens that he had found
on Unsplash.
VERY explicit instructions to create a logo
with a house, cat and books in it.
Over the next few months, I cobbled together
a design that included ALL of those disparate
elements and still managed to make it look
appealing and cohesive.
That’s when the client fired me.
Client: We have decided that we will go with
someone else.
Me: Okay, give me some feedback, what
exactly happened?
Client: It’s not what we asked for.
It was.
Client: It doesn’t really express what it is that
we’re about.
I’d asked MANY times what they were
looking for. Details were not forthcoming.
Client: And you put a limit on revisions. How
can you ask for more money when it’s not
perfect yet?!
He said he’s not going to pay me, but here’s
the thing: I control the URL and I actually host
the site… so we’ll see how this goes.
clientsfromhell.net

2
QUAD TECHNOLOGY
Shakeel Quadri gives us an insight into his freelance studio
designed by a local award-winning architect
WORKSPACE
The studio is based at Romney
Marsh Kent (aka the Fifth
Continent), famous for its
panoramic landscape/coastline
views and wildlife. The studio
location provides a connection with
the countryside and blends into its
surroundings thanks to the
cladding of Siberian Larch. The
unique building uses oversized
windows to create panoramic views
in every direction. This creates an
immersive and inspiring
experience to work from. The
windows achieve bags of natural
light and prevent eye strain, while
the surroundings offer many
glorious sights, from wildlife
walking past, to being mesmerised
by weather extremes. A perfect
work/life balance is achieved by
5
positioning the studio within
private/gated grounds but yet far
enough away from the residence to
ensure a professional working
environment is maintained.
[1] The Herman Miller desk
provides a great work platform,
whether I’m glued to my Mac or
meeting with clients, it allows
me to be able to swivel and speak
on one side of the desk and
showcase on the screen at the
other. Ergonomically, all cables
are fed neatly under the desk,
which is fully adjustable. [2] As
with everything within the studio,
design is at the forefront, which is
why the Herman Miller Sayl chair
was the perfect choice for making
a design statement and ensuring
that a good quality supportive chair
Feed
is used. [3] Being a freelancer can
be a lonely existence and so music/
radio is important. That’s why the
Porsche design speaker is used – it
not only sounds great but makes
an excellent design piece too, with
its original 911 tailpipes being used
as the speaker outlets. In addition,
Bose headphones are used while
on calls. [4] The Himalayan salt
lamp has many benefits such
as: balance, electromagnetic
radiation, cleansing, deodorising
and purifying the air, boosting
blood flow, raising energy levels,
sharpening concentration and
performance, and enhancing your
mood. [5] I love gadgets and this
robot vacuum is just cool – it looks
really great and it actually does a
cracking job of whizzing around
hoovering up the place before then
returning back to its dock to charge
up and get ready for the next
scheduled run.
Quadri is the director of Quad Technology,
PROFILE
specialising in freelance web design and
digital marketing services.
w: quadtechnology.co.uk
june 2020 15
Opinions, thoughts & advice
ESSAY
Christine Brewis discusses how gender parity
in tech has changed over the last ten years, and
what more can be done
INTERVIEW
Camille Gribbons, UX designer at Booking.com,
shares some learnings about the unique
challenges of designing for a brand new market
Q&A
We catch up with Andrew Couldwell to learn
more about his new book on design systems,
Laying the Foundations
DEV SKILLS
HOW TO SHOWCASE
18
YOUR DEV SKILLS
Aude Barral shares 5 top tips for
landing your dream developer job
Photo: Bence Bamer
Developers, the validation of your
technical skills will be what
convinces a recruiter to hire you 90 per
cent of the time. But when it comes to a
job interview, how can you make yourself
20 memorable (for all the right reasons)?
Here we run through what recruiters are
looking for and how to ensure you stand
out during that all-important interview.
1 POLISH UP YOUR
PROGRAMMER’S PORTFOLIO
A programmer’s portfolio is essential in
any tech-recruiting process. It is your
personal business card and enables you
to showcase your coding skills through
personal projects. In terms of format, you
have options! You can go from single web
pages to complex software projects. As a
27 candidate, your portfolio will show your
development level, your career goals and
the skills you wish to acquire. It is also a
way for a recruiter to examine your ability
 Opinion

to explain your projects – good

communication skills are always a
prerequisite.

2 SHOWCASE YOUR
GITHUB ACCOUNT
Having a GitHub account shows you can
write intelligible and maintainable code.
Recruiters use GitHub to check a
candidate’s reputation by identifying
number of followers; their experience
level by looking at the date they joined;
their technical skills or areas of interests
by detecting use of keywords for languages
and technologies; their ongoing and/or
finished projects and their level of
commitment through the public activity
on the site. What’s more, contributing on
Photo: ©Laurent Rebelle

GitHub is a sign you care for the open-

source community and are willing to work
with others on side projects, which is a
great asset as a developer.

3 TELL RECRUITERS HOW

YOU USE STACK OVERFLOW
Stack Overflow is your everyday developer
tool, the collaborative question and
answer site that addresses topics related
to computer programming and answers
most of the questions you may have as a
programmer. Stack Overflow is a perfect
tool for recruiters to measure a candidate’s
knowledge level. They will use it to have
a closer look at your degree of involvement
in the development community and your
reputation. Do you answer questions that
get upvoted? How many contributions
have you made so far? Were you granted
some moderation privileges? All these
insights can be great assets for your
application, so don’t ever hesitate to put
them forward!
4 MASTER LIVE CODING
INTERVIEWS
You don’t really like live coding interviews,
do you? Well, you’re not the only one. They
are a source of anxiety for most developers
and are considered as one of the hardest
and most stressful challenges during a
tech hiring process. However, live coding
examine a candidate’s logic, their ability
to explain their thoughts, all the while
testing their ability to code under
pressure. So, train yourself to master live
coding interviews! They are increasingly
being used by recruiters, especially in
those sexy tech companies you may want
to work for one day.
Not only do they enable interviewers
to detect your level of knowledge and
performance, but live coding interviews
also assess your communicative and
collaborative skills within a team – in the
case of collective interviews.
5 SHINE AT PROGRAMMING
ASSESSMENT TESTS
For recruiters eager to avoid mis-hires
due to a lack of technical skills, coding
tests are an efficient approach to assessing
developers before hiring them: it is a
perfect tool to identify and hire the most
talented developers. During an online
coding assessment test, you will be asked
to solve real, practical programming
your technical skills, while benefiting
from an objective and automated analysis
of your performance.
Tech recruiters or HR managers can
organise these programming tests using
online platforms that automatically
evaluate a candidate’s coding skills. Once
you’ve completed the test, a report
materialises. It enables recruiters to
study, compare and shortlist candidates
in the most efficient way, without any
unconscious biases.
If online coding tests seem a bit nerve-
wracking, remember they can be a great
asset in your application because they let
you demonstrate your coding skills.
Finally, programming assessment tests
provide an enhanced candidate
experience. Some of them now include
cool coding puzzles or even games to solve
in your favourite language, letting you
demonstrate your developer skills in a
tech-friendly environment.
Barral is co-founder of CodinGame, a gamified
PROFILE

interviews are a great source of problems you could encounter in your training platform for developers and a powerful tech
information for recruiters because the day-to-day programmer life in a company. hiring tool for companies.
practical exercises enable them to These tests mean recruiters can check w: www.codingame.com

june 2020 17
VOICES Essay

WOMEN IN TECH

HOW EMOTIONAL LABOUR

HINDERS WOMEN IN TECH
Christine Brewis, head of digital marketing at Studio Graphene,
discusses how gender parity in tech has changed over the last
ten years, and what more can be done

Historically, the tech industry has borne the
hallmarks of an all boys’ club. Although the tide is
changing elsewhere in the workforce, as recently as
December 2019, research has found that the ratio of men
to women in IT has been largely static, with the percentage
of female IT professionals hovering at around 16 per cent
for ten years.
Even with more tangible barriers to diversity in the
workplace broken down, such as access to higher
education, the number of women working in the sector
remains woefully low. According to recent research by
Studio Graphene, 62 per cent of women in tech think
that the image of the technology industry being male-
dominated is a deterrent for women to enter the sector.
And for those women who have chosen a career in tech,
many continue to face discrimination.
The same research revealed that half (49 per cent) of
women working in the UK tech sector have experienced
some form of discrimination in the workplace: one in
five have resigned from a role in a tech company because
of discrimination or harassment in the workplace.
These eye-opening figures should serve as a red flag
to companies who continue to turn a blind eye to
subliminal practices that promote, or facilitate,
discrimination. While it’s important to strive for pay
parity and equal representation, it is just as important
to tackle the silent biases that hinder women from
climbing the career ladder.
INVISIBLE BARRIERS
Nowadays, the barriers that might keep women out of
the tech industry (or out of leadership roles in general)
haven’t disappeared – they have simply changed and
aren’t quite so plain to see. Women continue to face
systemic barriers and frustrations in the workplace, with
certain scenarios common across all sectors.
It’s a familiar scene we’ve likely all witnessed at some
point or another: a colleague is leaving the company and

18 june 2020

someone has been assigned the job of buying them a
leaving present. A probable outcome in this scenario is
that the person chosen to shoulder this additional
responsibility will be a woman. We might also find
ourselves tasked with taking the minutes at business
meetings, making the coffee for someone who is visiting
the office, or even arranging a whip-round for a
colleague’s birthday card.
In order to meet expectations, it is a reality that women
often take on many of the daily housekeeping tasks in
the office alongside the pressures of their everyday roles.
While this is not a new concept, it is a phenomenon that
frequently remains unuttered: the surplus emotional
labour that women are expected, arguably unconsciously,
to carry in the workplace environment, which often goes
unrecognised and uncompensated.
At the present time, particularly in tech – traditionally
a male dominated sector – this can be a significant barrier
to career progression. Only 15 per cent of people working
in STEM roles in the UK are female, and only 5 per cent
of leadership positions in the technology sector are held
by women today. Although much progress has been made,
it seems like the underlying behaviours that pigeonhole
women into specific roles still persist.
“It is immediately clear that idle sexism continues to run
rampant in the office; it is so idle, in fact, that many women are
probably completely unaware of the extra effort they put in to try
and safeguard their professional reputation”
Throughout my career, time and time again I have
noticed that not enough consideration is given to the
trivium of the everyday: the more commonplace
behaviours that might have their hand in the fact that
there just aren’t enough women occupying the most
senior roles in the technology sector. It is plain to see
that we are still thought of as more ‘suited’ to deal with
the emotional grievances of our colleagues. Like it or
not, women are often the chief caregiving figures of the
office, always with a sympathetic ear to lend and a
paracetamol to hand.
Social stereotypes mean that such beliefs extend
beyond just our personal lives, and are culturally
embedded into the fabric of our working lives. If we pay
attention, it is immediately clear that idle sexism
continues to run rampant in the office; it is so idle, in
fact, that many women are probably completely unaware
of the extra effort they put in to try and safeguard their
professional reputation.
But even if such cultural assumptions are unintentional,
consciously having to live up to gender expectations
means that women have less time to dedicate to achieving
results that will earn us recognition in the boardroom.
Essay
All of that extra smiling and taking care of others requires
precious time and energy, and it doesn’t help us climb
the corporate ladder and into senior roles any quicker.
If anything, such practices inadvertently benefit men
while putting women at a disadvantage.
CHANGING THE MESSAGE – WHAT
CAN BE DONE?
So, what can we do to release women from their office
caretaking roles? I believe that it is important to stay
conscious of these more casual instances of sexism, so
that we can question them, recognise them as real
problems, and address them where possible. It could be
as simple as asking yourself, ‘why am I being asked, or
expected to do this, and not a male colleague?’.
Additionally, a positive measure that companies could
take to redress gender parity would be to offer additional
training for all employees to improve skills such as
communication and empathetic leadership, so that the
nurturing doesn’t always fall to female colleagues. Or
even devising a rota for organising office events and
presents might help to assuage some of the burden.
At Studio Graphene, our stance on challenging the
gender diversity crisis hinges on always keeping these
questions in mind, in addition to taking a ‘proactively
neutral’ approach throughout the recruitment process,
rather than encouraging positive discrimination.
Owing to this, we now have an inspiring team of female
engineers at our office in India. As a woman in the tech
industry, this is particularly heartening to hear, especially
given the rigid guidelines in India when it comes to
offering six months maternity pay; sadly, a prospect
shunned by many businesses.
The insights of the women working in our Delhi office
should therefore offer some reassurance to women
looking to get into the tech industry, and the words of
one of our engineers, Sakshi, are especially pertinent.
To properly challenge gender norms in the industry today,
and in the workforce at large, “we need to think both
short-term and long-term, and break down the walls
that institutionally keep women out”.
Brewis is head of digital marketing at app,
PROFILE
website and IoT software development
company Studio Graphene, which has offices
in London, Geneva and New Delhi.
w: www.studiographene.com
june 2020 19
VOICES Interview

Camille Gribbons
Words by Oliver Lindberg

UX designer at
Booking.com, Camille
Gribbons reveals how
she first got into the
industry

IN FO
job: UX designer at Booking.com
w: camillegribbons.com

20 june 2020
Interview

Photo: Bence Bamer

june 2020 21
VOICES Interview
Camille Gribbons had always pictured
herself on Broadway. At 18, she had
done musical theatre for six years,
performing in community shows in her
home of Phoenix, Arizona, and had
become a local celebrity. She auditioned
for acclaimed theatre programmes all over
the US but failed to get into the big
universities, so she entered Arizona State
University to pursue an exploratory major.
“It’s for people who have no idea what
they want to study,” Gribbons chuckles.
“For the first couple of years I switched
my major probably every six months. I
started out with Mandarin because I
wanted to travel the world but it turned
out the programme at my school feeds
people directly into the CIA, and I didn’t
want to spy on people! Then I looked into
political science, global studies,
Photo by Bence Bamer
22 june 2020
psychology and teaching, but none of
them could really hold my interest. Then,
one summer in between semesters, I quit
my student job as a housekeeper and came
across this get-rich-quick scheme online.
The basis was to create a website for a
niche audience, get a good amount of
traffic, and integrate it with Google Ads
or affiliate marketing in order to make a
nice monthly income.”
Being a fan of The Bachelor franchise,
Gribbons decided to build a simple site on
Squarespace and took some classes online
for how to advertise on Facebook. Needless
to say, she didn’t get rich but she
discovered she really enjoyed the creative
aspect of designing the website and
customising it with basic HTML and CSS.
So she switched her major once more, this
time to graphic information technology,
which covered web and graphic design,
photography and animation.
Gribbons then got the opportunity to
study in Brisbane as part of an exchange
programme. Even though she was initially
disappointed (Australia had not been on
her radar at all but Queensland University
of Technology was the only school abroad
that enabled her to gain credits for her
course of study), it turned out to be the
best possible career move. As soon as she
arrived, she started reaching out to every
software and web company in the area to
ask for an internship. Email marketing
software company Vision6 took her on
and eventually hired her as its resident
junior web designer. Gribbons was
mentored by its UX designers and pursued
various other freelance opportunities for
local small businesses around Queensland.
When she wasn’t studying, she was
working mornings, nights and weekends
to build up her skillset.
“When it rains it pours,” Gribbons
recalls. “I redesigned Vision6’s website,
and suddenly freelance work was just
coming in. I was building and redesigning
sites, helping with branding, graphics and
print material – everything under the sun.
It was almost like school was just my way
to be in Australia. I was still going to
classes but everything I learned in web
and UX design I basically learned from
working on the job.”
As her course was coming to an end and
she had to decide what she wanted to do
with her career, Gribbons started applying
to all the big companies – Uber, Google,
Twitter, Facebook etc – but wasn’t
successful. Then she reached out to one
of her mentors at Vision6 who had joined
Booking.com in the Netherlands. He
referred her, and within a month and a
half of interviews, Booking.com flew
Gribbons out to Amsterdam in order to
take part in the final round. She was
accepted into the company’s graduate
programme and so relocated to
Amsterdam. From middle-of-nowhere
Arizona straight to a major hub after
graduation, it was a dream come true.
Gribbons was keen to work for a market
completely different to her own and learn
localisation techniques. As Booking.com
 Interview

was building up its strategies for emerging

markets, she joined a team that initially
was tasked with focusing on Japan, Brazil,
Mexico, India and Indonesia. It was the
latter that became Gribbons’ focal point
for the next year.
“Indonesia was identified as one of the
fastest growing markets in Southeast
Asia,” Gribbons remembers of the time.
“They were experiencing an internet
boom, and everybody was suddenly buying
and booking things online. Usually people
would just walk into a hotel and book it
there and then, but now they were starting
to book rooms online beforehand. I heard
that Booking.com was experimenting with
an idea to compete with the local players,
and I thought that it was so exciting. It
was brand new, we were building
something from scratch – almost like

“I was still going to

classes but everything I
learned in web and UX
design I basically
learned from working
on the job”

working at a startup – and owned every

part of the process!”

Photo by Bence Bamer

At a Booking.com hackathon, Gribbons
collaborated with a front-end and back-
end developer as well as business
stakeholders to build an early version of
a new localised travel app called
BookingLokal, which ensured they got
signoff and allocated the necessary
resources for the project. They had no idea
how challenging it would be to tackle a
market from 7,057 miles away.
The team started work with a series of
assumptions they’d been given, before
any of them had ever visited Indonesia.
They had been told that even though
people in Indonesia now had access to the
internet, network conditions were slow,
and mobile devices were low end. So they
had to build the lightest site possible,
which ruled out animations and many
images. In addition, they had also been
briefed that users in Indonesia simply
wanted the cheapest hotel possible, and
that was their end game. Those
assumptions turned out to be incorrect
but unfortunately, the project’s first
product manager – due to fear of scope
creep – had implemented a rule ensuring
all communication had to go through him,
withholding vital insights.
“There was no direct communication
between the team in Indonesia and us,”
Gribbons remembers. “They had been
giving him all this feedback about the
work that we were doing, that the design
was too European, that it wasn’t localised
– but we weren’t being told any of it.”
Gribbons and her team were then sent
to Indonesia to sense the market and test
the prototype they had put together
within a couple of weeks. The first thing
she saw on a whiteboard in the local office
were the words “this design sucks”.
Gribbons was shocked. She couldn’t
believe it was referring to her designs

june 2020 23
 VOICES Interview
Photo by jaimeforsonphoto
because she had designed for the user that
she had been given. The brief, however,
had been completely wrong.
“The internet wasn’t slow, as it turned
out, it worked perfectly fine,” Gribbons
sighs. “And sites were using a lot of
animations, photos and loud and bright
colours. We also found out that it wasn’t
about the cheapest hotel for users. They
are bargain hunters. They are looking for
a high-quality hotel but they’re aiming
to game the system and hunt for coupons
and discounts to get the cheapest price
possible. Eventually we almost added
friction to the process, so they had a way
to look for promotions and deals.”
The team in Jakarta staged an
intervention with Gribbons. “They told
us that they couldn’t launch BookingLokal
with this minimalist design and subdued
colour palette. It wouldn’t be successful.
I didn’t understand why this feedback
hadn’t been used to inform the direction
of the product. I didn’t really know
anything about Indonesia, but it was our
local team’s culture. It didn’t matter that
they were a marketing and operations
team and not product people, they were
the experts. It was a pivotal moment.
From there I worked hard to completely
open up communication channels.”
24 june 2020
The product manager ended up leaving
on his own account, and the new one
ensured the team in Jakarta was involved
at every stage of the process, from design
sprints to user testing. This time the team
really immersed themselves into the
culture. Booking.com worked with a user
testing agency that recruited users and
set up user interviews to understand the
audience’s basic motivations and needs
for travelling.
“Apart from usability tests and
watching users interact with our product
and the competition, we also did street
testing. As the local team was mostly
focused on social media, we trained them
to go out to the malls, which are huge in
Indonesia, and get some feedback on
BookingLokal on the fly. We had to
establish a lot of feedback loops, and of
course there are still challenges, but it
was really valuable to learn from the local
team. There was just no way to be
successful without their help.”
The project went live and grew in
customers as new iterations were released
but in December, Booking.com shut it
down due to the company switching
priorities. Gribbons moved to the payment
component team, which she describes as
an internal Stripe service, to work on a
consistent payment experience for all
users across Booking.com’s funnel. The
lessons she learned on the BookingLokal
project helped her boost her skills as a
young UX designer. She subsequently
shared them in a conference talk at events
such as Amuse UX and Talk UX.
“People tell designers their only focus
should be the user,” Gribbons points out.
“We’re the champions of the users and
we need to fight their corner no matter
what. Yes, of course, the user is important,
and you should really understand them.
You need to first fulfil your user’s basic
needs and expectations before you even
start to think about innovating. But what
this project taught me is that you also
need to balance the needs of the business
and the team if you want to be taken
seriously and get things done. You have
to take a minimum-viable-product
approach, you have to make compromises,
and you have to find the best balance
between development, design and
business. In order to really have a voice
in the strategy, it’s important to focus on
all three areas, and that’s something that
is currently not being taught a lot. I’m
now working hard to bring everyone into
the design process and make sure they’re
really involved.”
 Interview

“Of course the user is

important… but you
also need to balance the
needs of the business
and the team if you
Photo by @ iam_alancastillo

want to be taken
seriously and get
things done”

june 2020 25
VOICES Opinion
USER INTERFACE
THE 5G UI
REVOLUTION
Tris Tolliday describes his vision of a web UI
catapulted forwards by 5G
5G is a data revolution about to
change every aspect of modern life,
connecting everyone in real-time with
unparalleled flows of data. For web
developers, 5G UI is set to revolutionise the
web GUI equilibrium… as soon as it has the
national coverage we see with 4G.
The web has been stuck in a 2D world with
the same top nav, hero and boxes of content,
but what if there was another way? What if
the client didn’t have to rely on the users’
hardware to deliver the experience, and
instead we hoisted it up to the cloud?
WHY IS 5G ANY DIFFERENT?
5G has two benefits over 4G. The first is latency
small enough for everything to feel responsive,
with early tests from Verizon hitting the 30ms
mark (10x quicker than the mobile browser
touch delay), and that figure is expected to
come down to around 10ms. Second is its
insane bandwidth, which at 2gbits per second,
26 june 2020
is large enough to push the heavy lifting away
from the client and onto the server.
From the server, we’ve seen what is possible
with the likes of Google Stadia, Steam Remote
Play and Project xCloud. All of a sudden,
graphic-intense 3D games are available for
the public to play in 4K on their living room
TV, assuming a decent broadband speed.
Now imagine what is possible if we extend
access to every pay monthly mobile phone in
the UK. 5G would enable everyone in the UK
to use their phone to browse content generated
by bleeding-edge cloud computers. We aren’t
talking about the SSR of today, but the whole
GUI being painted server-side, and pushed
to devices in real-time.
Let’s also consider the limitations of the
modern browser. Sure we can create graphics
on them, but without heavy optimisation,
anything too complex begins to chug. If you
have ever attempted 3D on the browser, the
limitations hit you pretty early on.
CLOUD COMPUTING IN THE
ADVENT OF AI
Meanwhile, sat on the cloud, are a quite
frankly insane amount of GPUs, among other
resources. This is thanks to huge investment
in AI and machine learning, these GPUs are
twiddling their thumbs waiting for researchers
and data scientists to create their next facial
recognition or speech-to-text model.
We can see this happening, because Google
Collab offers out free time on its dedicated
GPUs and TPUs for ML projects that won’t take
up its resources for more than a day. These
spare GPUs are gagging to be utilised, and 5G
UI would help this cross section of wants.
HOW COULD THIS WORK?
We can take hints from Steam Remote Play,
which utilises H.264 (and H.265 for the brave),
to stream a video capture from your home
computer in real-time, meanwhile your
mobile device streams touch events directly
to your computer. What’s incredible to me, is
that your mobile has very little to do in this
exchange. It displays a video stream, which
mobiles have been capable of since at least
2005. It also just sends any input events to the
server, not even concerning itself with
computing what these events mean.
This leads to the bigger question: what stack
do we run on the server? To this, my answer
is anything at all. If it can run on the cloud,
you can do it, it doesn’t even have to be
browser tech, which leads me to the best bit.
WEB 3.0
Now we have zero limitations, it’s time for
the web revolution. What does a website look
like in 3D or in 2D with 4K graphics? I cannot
even fathom what those more creative than
me can come up with.
All this has led me to one conclusion, it’s
time for front-end developers to expand their
horizons, and not necessarily on the web.
Build cloud native experiences, invest your
time in VR and AR. Try Unity, be bold.
There’s an old adage that comes into its
own: ‘If you dislike change, you’re going to
dislike irrelevant even more’. Get ready for a
5G revolution – change, evolve, or be ready
for irrelevance.
Tolliday is a creative technologist. He specialises in
PROFILE
innovation in the technology sector, to connect brands
with their customers.
w: tristolliday.com

Q&A
ANDREW
COULDWELL
The Brit in LA discusses his new book on
design systems, Laying the Foundations
Could you briefly introduce yourself to anyone who
INFO doesn’t know you?
job: Web designer and I’m a Yorkshire-born, Los Angeles-based designer
developer and developer with 15+ years experience creating
w: https://roomfive.net digital experiences for everyone from NASA to Harvey
t: @andrewcouldwell Nichols. I recently returned to freelance life after
several years leading design at Adobe and WeWork
in New York City, and I recently published a book
about design systems called Laying the Foundations
(designsystemfoundations.com).
What gave you the idea of writing a book about
design systems and who’s it aimed at?
During my time at Adobe and WeWork, I learned a lot
about leadership and the dynamics of working with
multiple teams and individuals. Unfortunately, it’s
not as simple as just doing your best work. You have
to learn to build a team, sell, earn trust and support,
play politics, work with stakeholders, be patient and
grind out results. The book is aimed at designers
(and developers) of all levels, and really anyone
Q&A
working on digital products, including copywriters,
design managers and PMs. It’s especially useful for
those working with teams in-house, but designing
systematically and working as a team is important
– regardless of your level, or where you’re working. I
think there’s something for everyone.
There are a lot of people writing about design
systems on, say, Medium right now, so why should
people pay money for a book?
Consider that a good deal of the articles you read on
Medium are written by people in employment, writing
publicly about the work that they’re doing for their
employers. These articles tend to paint a rosy picture
of their product, process, and culture. They can also
create the false impression that a design system isn’t
realistic for your own company, because your product
is more complex or plagued with legacy problems, or
your boss would never go for it, etc. The truth is the
individuals and companies that wrote those articles
have the same problems. They just choose not to write
about them.
Laying the Foundations is real talk about creating
design systems, written in a lucid tone of voice. It
doesn’t deal with ideals. Instead, it talks about how to
overcome legacy problems, earn trust and support, and
what to do in different scenarios. One reader described
it as being more of a manual. Another reader said:
“You could read 100 hot takes on Medium OR read this
one book filled with practical advice from an industry
vet. There’s so much valuable stuff in this book.”
As an expat Brit, what do you see as the pros and
cons of living in LA?
Los Angeles has year-round good weather, mountains,
forests, beaches, museums, rich diversity, great food,
bars, and sports teams. You even get to eavesdrop on
behind-the-scenes Hollywood chatter from time to
time. The pros on the work-side are the same as living
in any big city: you’re close to lots of companies and
startups with money to spend and interesting projects
to work on. The only con is being so far away from my
family and friends in England, which does suck, but
life is short – you have to live it, and your loved ones
are only a call, message, or flight away.
What is exciting you most in the field of web design
right now?
I think we’re in a strange period. Too many designers
are designing for other designers and not the people
that really matter (ie the target audience). I think our
industry just needs to take a breath and get back to
basics. I do like that there’s been a rise in interest in
accessibility and especially inclusivity, which are two
topics I cover a lot in my book.
june 2020 27
VOICES Big question

INDUSTRY INSIGHT

HOW DO YOU KEEP UP WITH

DEVELOPMENTS IN YOUR FIELD?
The web is ever-changing. So apart from reading this magazine, how does our
panel of experts avoid falling behind?

GEORGE H A DFIEL D ROB

Head of digital,
Mobas
mobas.com
From UI/UX research and trends, to knowing
about the latest Google Search algorithm
change, as head of digital at a full-service agency it’s
vital I’m in the know. Always an issue when facing
day-to-day workload pressures. So I use a Chrome
extension called Panda 5, which replaces my ‘new tab’
page with the most popular content from credible
platforms. It helps me stay on top of industry news.
Attending relevant meetups and conferences
immerses you into a world of excellent talent, too.
MEL IN EDOM WON Y I
Director of product delivery,
Illustrate Digital
illustrate.digital
For me it’s about finding balance.
I don’t chase UX design trends,
but I’m aware we need to keep an eye
on what’s new and experiment to see
what works for us. Going to events
and listening to talks is helpful, as is
following online collections like
Dribbble. Recently I’ve visited
WordPress and other industry
conferences around the world to get
insights from people on a one-to-one
basis, both agencies and brands,
learning from their experiences.
CH A L MERS
Chief experience officer,
Engine
enginegroup.com/uk
To design experiences well, you
must constantly build and
refresh your understanding of
what’s out there. So no matter the
problem or opportunity, we frame
the forces affecting business, as
well as consumer behaviour and
expectations. My go-to sources tend
to be consultancy reports
(SlideShare’s good for this), as it
often provides a good overview of
the landscape, from business to
tech. Services like Medium help me
understand what the thought
leaders in the space are predicting. I
also look at how designers at large
are experimenting, using Dribbble
and Core77. A combination of all of
these helps keep work fresh,
relevant and impactful.

28 june 2020
 K L AUDIA BRONOWICK A JACK
Senior developer, Indiespring REE V E
Indiespring.com Web developer, PS Website Design
pswebsitedesign.com

Staying on top of the changes in JavaScripting (https://www.javascripting.

development isn’t easy. It takes time com/?sort=trending) is useful as it has the option
to look at currently trending JavaScript libraries and
outside of office hours. Reading, frameworks. CodePen (https://codepen.io) has a lot of
innovative effects created and regularly posted by the
researching and working on personal community. And the Dev community (https://dev.to) is a
projects for me is critical to stay on top. It great place to find new tools and technologies. That
said, it’s all well and good knowing where to look, but if
also helps that within the office we are you don’t set aside regular time to read up on the latest
given time and training to work with new advancements, it is easy to fall behind. Even blocking
out an hour a week of reading time helps hugely.
tools and technology stacks. We always
have several internal projects that allow SIMON
P ROC T OR
our junior developers a chance to flex Founder,
Codeminers
their skills, but also a way for senior www.codeminers.co.uk
developers to use and learn new methods
Growing your business in an
and tech. This means we can advise and evolving industry can be difficult; I
apply more appropriate solutions. strongly believe you have to spend
time in researching where you want
M A RCEL A the business to be. From there, you’re
BOHORQUE Z able to invest in your team properly
Web developer, onebite
and ensure everyone is skilled. If you’re
www.onebite.co.uk
doing this for yourself, then I’d
I get a lot of insight from the companies behind the software we use; recommend starting with community-
Litmus and Campaign Monitor are two examples that provide great insight driven video-training sites. You do have
into email marketing trends. AWS runs great conferences online and offline, to judge for yourself whether the
where it hosts multiple tracks for different levels of users to show off new tools
and technologies to improve current services and give inspiration for future
content is up to date, where it’s coming
projects. Alongside those, design podcasts are great for sharing new project from and who is creating it, but some
approaches. Listening to people discuss the latest technologies can be really of that content is absolutely fantastic
valuable, especially in the open-source world. for self-learners.

CREATIVE BLOQ
www.creativebloq.com/tag/web-design
Creative Bloq is the online home of net
magazine and its sister publications
Computer Arts and 3DWorld. The site’s Web
Design tag is where you’ll find all the latest
news, tips and advice from the designer and
developer community.
RESOURCES
NET MAG ON INSTAGRAM
www.instagram.com/netm.ag
It’s finally here, net magazine on the ever
popular visual social platform. The newly
created account will feature websites we love,
the happy smiling faces of industry experts, a
peek behind the scenes of leading agencies,
special offers and more.
@NETMAG ON TWITTER
https://twitter.com/netmag
net magazine’s Twitter feed is packed with
news, tips and inspiration on topics
including design, development, marketing,
usability, accessibility and security.
Alternatively, check out the Facebook page at
www.facebook.com/netmag

june 2020 29
GALLERY Inspirational sites

MARK BILLEN

Billen is a freelance writer who

has been writing about web
design and technology for over
15 years.
w: markbillen.com
Sensational design and superb development t: @Mark_Billen

TYPEKIT, TWEENMAX / GSAP, JQUERY

ILLUMINATING RADIOACTIVITY
https://illuminating-radioactivity.com

There’s no doubt that the notion of radioactivity strikes

fear into most people’s hearts. But how much do we really
know about what radioactivity is and why it’s bad? This engaging
website is dedicated to answering such questions with rich
references to science, politics and popular culture.
Single-page and seemingly infinitely scrollable in structure,
Illuminating Radioactivity starts with a charming interactive the font work is a significant triumph with distinctive sets like
header that figuratively clears things up. Random, multicoloured Opposit, Lexend Deca and Share Tech Mono applied tastefully.
PNG flakes bearing popular phrases are vanished on rollover Other highlights include a section that peels back photographic
or tap, revealing the title and dispelling the myths. This slices of the Grand Canyon, beautifully illustrating the radiated
inventiveness and dynamism continues therein, using rock formations. It’s a perfect distillation of the educational
GreenSock-soaked animation thoughtfully to manipulate colour, value the site has, with designers Tubik Studio proving masterful
images and typography. Delivering a large quantity of text, at telling factual stories.

30 june 2020
 Inspirational sites

NUXT.JS, GSAP, FONTPLUS

KERN INC
https://kern.inc

It‘s a shame that Western web design often

overlooks the Japanese scene. Given the obvious
language barrier and traditional font quibbles, it’s fair to say
much gets lost in translation. Thankfully good-looking
aesthetics are universal, with this site from Tokyo agency
Super Crowds inc providing case in point. Kern inc is a new
business portfolio for the design firm of the same name to
showcase its services. Here it proclaims a desire for
“shaping your identity with design” and adding more project
commissions to a bulging roster of case studies to browse.
Most impressive is the slick navigation device that drives
the Works section and a dock-like carousel menu for picking
icons. This ‘swiper’ element shifts horizontally on selection
and beautifully animates thumbnails into view with smooth
aplomb. From here, a click or tap of a chosen project
expands out to fill the viewport and deep dive into a
sumptuous stream of branding work for numerous clients.
As you might expect, it’s all handled with refined
respectfulness and a muted palette largely of cream
(#ECECEC) and black. This enables accent colours and
imagery to really cut through with greater pizzazz, without
ever compromising visual consistency.

june 2020 31
GALLERY Inspirational sites

CSS3, THREE.JS, MP4 VIDEO

1917 – INTO THE TRENCHES

https://intothetrenches.1917.movie

The epic war film 1917 has proven to be a commercial and critical
smash, doing huge box office numbers while scooping prestigious
accolades. Writer, director and producer Sam Mendes has crafted a story
that not only resonates historically but also marvels technically today.
Using innovative editing and cinematography, the makers managed to
drop audiences into World War I action with what seemed to be one
continuous shot. This technique is beautifully highlighted by this
immersive promotional website, where the movie’s pivotal backdrop is
reimagined in WebGL.
Designed as an interactive first-person journey into 1917’s production,
it renders 3D scans of the mile-long battlefield trench made for the
filming. Visitors are encouraged to ‘keep moving’ deeper into the gloomy
but richly detailed environment, finding a series of video hotspots.
Character clips and behind-the-scenes footage are seamlessly presented
in a ratio optimised for mobile screens, providing a neat narrative thread
from start to finish. Creative studio POWSTER, operating out of London
and LA offices, clearly worked closely with client Universal Pictures to
get the site’s tone just right. By blending impressive three.js development
with stellar graphics, sound and AR technology, 1917’s poignant drama
has been translated into a truly unmissable online experience.

SI T E OF
T HE MON T H

32 june 2020
Inspirational sites

june 2020 33
GALLERY Inspirational sites

JQUERY, HOWLER.JS, APPLE ARKIT

SCARS OF DEMOCRACY
https://www.scars-of-democracy.com

In a moment when politics are more divisively

dramatic than ever, this site seems incredibly
pertinent. Scars of Democracy is a breathtaking
artistic statement now immortalised online. The
roots of the project began at last year’s STROKE
contemporary art fair in Munich, Germany, where
artist Capo Finest exhibited some ‘revealing’ works.
Attendees were confronted by stylised paintings of
world leaders like Donald Trump and Angela Merkel,
stripped bare and covered in tattoos. These ‘scars’
referenced acts and implications from their time in
office, that could be scanned with smartphone
cameras to learn more.
This award-winning website translates that
experience to the web with a virtual gallery of eight
paintings to explore. Hover a mouse pointer over
each tattoo and click to read the significance before
watching embedded YouTube news footage. It’s a
thought-provoking idea, espousing the Universal
Declaration of Human Rights and Article 19’s
assertions over freedom of expression. However,
the technical highlight is on mobile and the official
downloadable app, which uses AR to great effect.
By leveraging visual-inertial odometry and Apple’s
ARKit, makers Plan.Net Pulse invite us to interact
with the works from the comfort of our home.

34 june 2020
 Inspirational sites

HTML5, CSS3, GSAP

AMANDA BRAGA
www.amandabraga.com

Selling fashion online has never been an easy task,

hence the considerable investments made to
innovate. Brands big or small are keen to convey style and
attitude with increasing technical complexity, but
sometimes less is more. Amanda Braga is a Brazilian
jewellery designer based in Miami, USA and this tastefully
classy new URL provides a profile of her work. Refreshingly
though, there is no hard sell of products but more of a
punchy focus on Braga’s story and approach. This is backed
by a short, single-page site that fuses subtle GSAP and CSS
transitions with elegant font work. Woodland font from
Pangram Pangram Foundry styles much of the text, which
beautifully unfurls into view upon vertical scroll. In fact all
the page elements across three sections warp through the
viewport this way, up and down, to great effect. In the
header too, we catch snapshots of Braga’s jewellery as
random hidden PNGs are toggled visible before falling away
momentarily. Credited designers Cappen, also from Miami,
opt to end everything with an oversized PHP contact form
that fits the overall theme seamlessly. Links to Instagram
simply point to an account page laden with fashion shots,
while the site’s responsive design ensures it looks just as
striking on all screens.

june 2020 35
SHOWCASE

PROFILE

EDAN KWAN
lusion.co

He swapped life as a singer for a

career making eye-popping digital
visuals. The Lusion founder chats
to Tom May about battling demons,
winning awards and where digital
advertising is heading

It’s become somewhat of a cliche

to complain that ‘all websites look
the same these days’ and ‘all the
creativity has gone out of web design’.
Visit the website of Lusion (lusion.co) to
see how this certainly isn’t the case.
Founded in 2017, the Bristol-based,
development-focused studio is on a
mission to build “epic real-time
interactive experiences to blow people’s
minds”. And a quick scroll through the
‘Work’ section of the site makes clear
that it’s very much succeeding, from an
immersive spatial audio experience for
Opera North to an cinematic exploration
in global storytelling for filmmaker
Julius Onah. We caught up with founder
Edan Kwan, to discover how he works to
bring such spectacular digital
experiences to life.

Could you briefly introduce yourself to

anyone who doesn’t know you?
I’m a self-taught creative coder originally
from Hong Kong. I’m best known for
producing particle effects for websites. I
have been in the industry for over ten
years working freelance, in big agencies
such as Firstborn and UNIT9, and now I
run a creative studio called Lusion.
In college and during my early 20s, I
was a recording artist in a band. I gave up
trying to pursue a career in the music
industry after realising it wasn’t for me.
So I worked on my English by watching
American TV and taught myself how to
code. I kept perfecting my skills,

36 june 2020
 INFO
Location: Bristol, UK
Designing since: 2010
Areas of expertise: Real-time
graphics, animation and real-
time look dev
Clients: Opera North, Logitech,
MaxMara
Awards: Lovie Awards,
Awwwards, FWA

june 2020 37
SHOWCASE
surviving on bread, and managed to make
a pretty cool Flash portfolio, which
attracted some agencies and landed my
first full-time agency job at Firstborn in
New York.
These days I split my time between the
business side of my studio and the
production work. I’m still passionate
about crafting artwork and mentoring our
junior employees.
What were the biggest lessons you
learned at UNIT9 and Firstborn?
Working for these agencies was essential
for my professional development. Having
briefly worked as a freelancer previously,
it was quite the culture shock to work in a
big team on projects for major clients. So,
one of the biggest lessons I learned was
working with others in a high-pressure
environment and remaining professional
even when everyone’s having a bad day.
The most important thing I learned
working at an agency was that the work
we produced is all about the client we
serve, rather than our personal artistic
ego. I guess it has helped to shape the
way I run Lusion in a way that always puts
our client’s needs first.
What led you to set up Lusion in 2017,
and what were the biggest challenges?
I actually co-founded another studio
before setting up Lusion. But I decided to
take a different direction and set up
Lusion to enable me to execute my vision.
The biggest challenge was having to learn
the business side of studio life. I’m an
artist at heart, so initially I had to work
on my charisma and marketing skills
more than my technical skill set. Before I
got into the business side of the industry,
I always thought that wordy marketing
was a lot of BS. But I have grown to
appreciate the power it has and how
essential it is in the advertising industry.
What does the company do?
We’re a small team of developers and
producers focusing on high-quality
production work. The majority of our
work involves combining R&D with
commercial work to produce unique
artwork for our clients. We mostly work
with other advertising agencies to create
38 june 2020
CineShader (https://cineshader.com/editor) - a cinematic real-time shader visualiser Lusion built out of
passion for the shader community
a visual or feature as part of the project.
However, our studio also has some of our
own clients that reach out to us directly
to do something specific, such as data viz
or creating visuals for their websites.
Can you give a few examples of how this
works in practice?
The last three projects we crafted at
Lusion offer a good example of how we
solve problems under different scopes.
MaxMara Bearing Gifts (bit.ly/
maxmara1) is a gift-ordering website that
was a collaboration with the creative
agency LOW. We took care of the creative
development, while LOW handled the
creative and design.
When we work on a project we have no
control over, we’ll suggest some elements
that we believe will improve the
experience. For this project, we proposed
a ribbon and particle dancing visual to
LOW, and they agreed to add it into the
production. Things like this don’t affect
the overall experience, but are more of an
add-on to the experience.
The Turn Of The Screw (bit.ly/turn-
screw) is an award-winning immersive
trailer for Opera North’s 2020 production
of Benjamin Britten’s opera. The client
wanted to demonstrate the spatial audio
feature of the experience, but gave us the
freedom to visualise the story of the
opera the way we wanted. We brought
together spatial recordings made on
location at Yorkshire Sculpture Park by
composer and sound artist James Bulley
with our own generative graphics visuals.
More freedom on creative can go either
way: you might totally lose track of what
the client wants or build something
amazing. Luckily our client loved it.
Finally, CineShader (cineshader.com) is a
cinematic real-time shader visualiser we
built out of passion for the shader
community. We designed and developed
the whole experience, so had total
flexibility in what we delivered to our
audience. Completely free of creative
constraints, we were able to optimise the
3D assets to build something lightweight
and beautiful for our community to use.
What are your go-to software and
hardware tools?
For software, it’s Houdini FX, Unity and
VS Code. We use Houdini FX for
composing 3D assets and it’s the best tool
we have found in the market that can
help us to produce some visual effects
other software can’t. Unity is the go-to
tool we use for most of our installation
work. Its high-quality rendering engine
blurs the line between real-time

The Turn Of The Screw (bit.ly/turn-screw) is an award-winning immersive trailer for Opera North’s 2020
production of Benjamin Britten’s opera
rendering and offline rendering. VS Code
is the go-to tool for almost all of our web
developers. It is powerful but lightweight
at the same time, which enables
developers to easily code both small and
big projects.
My hardware setup consists of an IBM
Model M keyboard, Logitech G-series
mouse and three QHD monitors. This is
mostly just my personal preference. I love
my retro-looking clicky keyboard, which
my colleagues hate, so I can’t really speak
for them.
What’s been your proudest moment at
Lusion so far, and why?
I’m immensely proud of Lusion’s studio
website. A lot of hard work, time and
dedication went into building the
website. I battled with my own demons as
a perfectionist and kept seeking ways to
go above and beyond before biting the
bullet and launching it.
The website has won many awards,
including the Lovie Awards, W3, Davey
Awards, Site of the Month and Site of the
Day for Awwwards, and Site of the Day on
FWA. Someone also started a thread on
Reddit about it, which was quite surreal.
I’ve been touched by the love for it. It
made all the blood, sweat and tears
totally worth it.
How much is your work about pushing
creative boundaries and how much is it
about just ‘getting the job done’?
In our line of work, I’d say 30 per cent of
the time is spent on getting the job done
and 70 per cent on the countless
tweaking to get it to the next level, where
it’s closer to being the perfect piece. In
the past, I’ve been guilty of being a
perfectionist and even now, I always go
the extra mile because pushing creative
boundaries drives me. There are a lot of
award-winning projects I’ve made still
believing they could be better after
launch. However, at some point I’ve
learnt that I need to accept ‘enough is
enough’. I need to sleep. Especially as I
have kids now.
What do you love most about your work,
and what are the least fun parts?
I love that every project is different
creatively and seeing it come together at
the end is just awesome. Sometimes it’s
not just about making something look
beautiful, it’s also about helping our
clients to realise their vision and solve
their problems. I guess the least fun parts
would be paperwork. As a creative, it can
really disrupt the flow if there’s
something urgent to do in the middle of
my process.
SPOTLIGHT
EDAN KWAN
What’s on your desktop
today?
Medicine and client’s contract.
Three little things that make
your life worthwhile.
My toddler’s manic laugh, the internet,
and Wotsits.
What do you have on the
walls?
At the office: a TV and some
abstract art.
At home: some drawings that my kid
did at nursery.
What will you do for lunch?
Probably one of the food stalls at St
Nick’s Market in central Bristol.
What hours do you work?
I usually do 9-6. It used to be way
longer, but I need to balance work and
home life now I’m a dad.
What else do you do in the
office?
If I’m not working, I’m drinking coffee or
playing Nintendo Switch with
my colleagues.
How often do you hang out
with other designers?
I should meet up with fellow designers
more often, but there isn’t a huge scene
here and with small kids, it’s tough.
Describe your working culture
in three words
Challenging, fun and motivational.
june 2020 39
SHOWCASE

TIMELINE

Key dates for

Edan Kwan
JULY 1986
Born in Hong Kong.

AUGUST 2006
Signed as a contract singer in
Hong Kong.

MAY 2009
First freelance gig building Flash
experience for Logitech.

MAY 2010 Lost Your Way In Nature - a graphic demo Lusion crafted to demonstrate our ability of building high fidelity
First contract job remotely working for realtime graphics for the web
an UK agency.

OCTOBER 2011
First time moving abroad working full-
time in New York. What made you move to Bristol and
what’s the web design scene like there?
JUNE 2013
I moved for my wife, who was training to
Moving to the UK to work freelance. be a teacher at the time. There’s not a big
JUNE 2016 web design scene like in London or
Get married. Manchester, but there are some really
cool agencies here like GC. I’ve noticed an
JUNE 2017
increase in tech startups building
My son is born.
immersive devices such as Ultraleap.
AUGUST 2017 Hopefully the Bristol scene will continue
Open up creative studio in to grow, as it’s known in the UK as a
Bristol, Lusion. creative city; Banksy, anyone?
MAY 2019
Release new studio website. Do you ever regret not continuing your
career as a recording artist?
It was a great experience, but I don’t
think I miss being dressed as a cloud on
national TV, which I did! I fit in more as a
coder than I ever did trying to schmooze
with ‘celebrities’, although I did meet
some big names in the Asian music
industry. Even now when I watch Hong
Kong dramas with my wife, I point out
people I met at parties. It’s cool I can still
impress my wife after ten years of her
putting up with me.
How do you think your job and company
will change in the next ten years?
Over the next few years, I hope to bring
on some new team members. I’ve enjoyed
sharing my expertise with the junior
colleagues, so I hope the working culture
at Lusion can also provide learning and
professional development opportunities.
I believe the digital advertising industry
is shifting toward the physical side from
the web. So I want us to continue making
really creative experiences, with an aim
to branch out to more physical
installations and VR-based work. Also, AI
is something that will inevitably change
the industry. A lot of production work will
become automatic and we have to adapt
and look at ways to incorporate it into our
business, rather than see it as a threat.
What are your ambitions for the future?
I want to balance my family life and my
work. With a second kid on the way, I
can’t work as many weekends as I
currently do. I also need to be more
disciplined with the gym and make sure I
actually attend rather than just paying for
the monthly subscription.
What thing do most people not know
about you?
People are surprised to learn I was a
singer. We had a billboard up in one of
the central areas in Hong Kong and on my
travels, I discovered one of our songs on a
karaoke machine. Don’t know if anyone
bought the album, though…

40 june 2020
 *

SAVE SAVE SAVE

94% 92% 88%

SAVE SAVE SAVE

93% 92% 92%

For great savings on our best-selling magazines, visit online

myfavouritemagazines.co.uk/spring
Order Hotline 0344 848 2852
SHOWCASE How we built
KNIVES OUT
Murder mystery film, Knives Out, grabbed everyone’s attention, and so did
the fun website that promoted it. Oblio tells Tom May how it created its
innovative 3D navigation
BRIEF
Knives Out is a fresh take on a familiar story.
It is a timeless whodunnit focused on the
complicated relationships within family, along
with the backstabbing that invariably happens
whenever money is at stake. The goal of the
digital campaign for Lionsgate was to familiarise
audiences with the family dynamic, characters
and interconnectedness of all involved in
this twisted and tangled web weaved by the
incomparable Rian Johnson.
42 june 2020
HOW WE BUILT
2
CLOSE UP
Although you can’t see it in print, this is no
ordinary flat and static homepage. View it on
your phone, tablet or computer screen, and
you discover a dynamic, moving, 3D diorama,
mixing up various elements of the movie in
an evocative and atmospheric manner. (1) A
3D knife serves the function of a Thrombey
family tree. (2) Ornamental pieces on
the homepage are populated with family
portraits; clicking on them links through to
more information on each character. (3) The
4
main navigation for the website. Clicking
here opens a panel with the various site
destinations: Gallery, Posters, Commentary,
Accolades, Shop, etc. (4) A rotating carousel
links through to various features and
sections within, and outside, the site. (5) A
call to action prompts users to scroll down
the page, to reveal more of the scene and
other characters. (6) The full 3D scene with
a LUT applied for accurate colouring and
blurring, to show the depth of it all.

CODY S CO T T
S TAUDENMIER AGRIMS ON
Staudenmier is an art director Agrimson is a snr developer
at Oblio, and responsible for at Oblio, and responsible
the overall look and feel of for executing the site and
the site experience. bringing the static to life.
w: oblio.io w: oblio.io
One of the big commercial and
critical hits of 2019, Knives Out
takes the classic Agatha Christie-style
whodunnit and gives it a modern twist.
Directed by Rian Johnson and boasting
an all-star cast led by Daniel Craig, it’s
one of the most original and inventive
movies of modern times, and so
demanded a website that could pull off a
similar trick (https://knivesout.movie).
Based in Portland, Oregon, Oblio is
a digital studio specialising in the use
of digital technologies as design tools.
Its award-winning team of inventors,
artists, designers and developers
has worked on countless projects,
including over 50 major motion picture
campaigns, so was the perfect fit for
Lionsgate. Here, Oblio’s art director
Cody Staudenmier and senior developer
Scott Agrimson explain how they
brought their client’s vision to life.
How did you get the job originally?
CS: This is actually a pretty cool origin
story. When the film was first announced,
our creative director, Jonathan Hooker,
reached out to Lionsgate (who we’ve
worked with for years and is always such
a great partner) and essentially said, “We
love Rian Johnson and would love the
chance to work on this film”. From there,
Lionsgate trusted us to execute the site,
all the way from the early teaser version
to what ended up being the site that
launched in September of 2019.
What was the brief from Lionsgate like?
CS: As with a lot of projects, the brief
started out pretty vague. The client
How we built
TIMELINE
Key dates in the
Knives Out project
JUNE 2019
Oblio receives the brief and begins
ideating initial concepts for the Knives
Out main site.
JUNE 2019
Initial script read and kick-off meetings.
JUNE 2019
was looking for creative and innovative
ways to display the traditional movie Oblio sends through initial ideas and
rough comps of site concept.
site content but with a heavy focus on
introducing people to the film’s all-star JULY 2019
cast. From there, it was really an organic Client signs off on the concept of a 3D
and collaborative process between us digital family tree.
and the client. We found ourselves in JULY 2019
conversations with Lionsgate where each Cody Staudenmier, the art director on
of us kept saying, “Wouldn’t it be cool if the project, designs each page of the
site with motion demos to show the
client and to hand off to the developer.
AUGUST 2019
The initial development of the site
begins. At the same time so does the
creation of the 3D knife asset that will
be featured on the site.
AUGUST 2019
The design of the site gets final sign off
from the client and filmmakers as
content creation gets started.
AUGUST 2019
Site goes into client and internal QA
while final features get polished.
SEPTEMBER 2019
Site gets launched.
Above To give the AR feature a purpose, Oblio
attached clues around the knife for a competition
june 2020 43
SHOWCASE How we built

EVOLUTION
(1) This was an extremely rough early comp 3
proposing a cloud of knives where each knife
was clickable. This design was loosely based on a
set piece in the film. (2) A subsequent screen
from that early pass, which illustrates what an
inner page could look like for each character. (3)
The Blender scene where we created the
interactive elements used on the site. (4) A final
version of one of the character posters for the
film, which the client requested we use for look
and feel inspiration. (5) Final design of the
mobile homepage.

44 june 2020

Above Synopsis page on mobile gives users the
background to the film
it did this?!”. In the end, the idea of a 3D
interpretation of a ‘family tree’ is what we
settled on.
The site harnesses WebGL to explore
the characters in 3D. How much of a
new departure was this for you?
SA: As a company, we’re always trying to
come up with new and interesting ways
to bring content to users. Because of that,
we have a pretty intimate familiarity
with WebGL, 3D and how to treat websites
like an environment in a real space. A
previous example of this was the website
we built for another Lionsgate film, Now
You See Me 2, which explored a series of
scenes in 3D space and used depth to
bring a pretty unique experience to users.
So when it came to Knives Out, it was built
on a foundation of knowledge gained over
the years and many previous projects, but
each with a unique take on the visuals. In
Above A character page that uses a LUT to match the colour theme of the site page to the character poster
a lot of ways, it’s the intersection of where
Oblio has been and where we hope to go.
What kind of movie assets were you
allowed to use?
CS: The assets were fairly limited.
Lionsgate had a mock of a ‘family tree’
inspired by one of the knives used in
the film. We used that as reference for
building out the main 3D knife and also
the initial trailer, which we used to pull
character content for the detail pages.
How we built
Otherwise, we were mostly left to our own
devices to build out the experience and
match the overall look and feel of the rest
of the campaign.
What technologies did you use to build
the site and what were the biggest
technical challenges?
SA: For the 3D model of the knife, syringe
and magnifying glass we used Maya and
Substance Painter to create the assets.
Then, to dial in the look and feel, we used
june 2020 45
SHOWCASE How we built
Above A gallery image that represents some of the look and feel Oblio tried to get across with the site design/concept
Blender because it enabled us to quickly
iterate different lighting and colour
scenarios. Once the scene was complete,
the real hurdle was replicating that look
in the browser. While the model and the
textures all import into three.js, the main
challenge was to recreate and tweak the
shaders and lighting to get the look right
and match what we had done in Blender.
There was also an AR component for
mobile. How did that come about?
SA: During our development phase, the
studio shared a link to an article about
using a mobile device’s native AR viewer
to complement a site experience that
uses 3D objects. It was followed by the
question; “Can we look into this?”. After
getting the site live, we circled back
around to this with the goal of finding
a technical and creative solution rather
than using AR for AR’s sake.
Around this time, Lionsgate also started
running a sweepstake where fans could
46 june 2020
solve clues for a chance to win cash and
prizes. We were able to brainstorm with
the client the answer to one of the clues,
a single word, that we would scramble
and hide each letter on the back of the
medallions that hang off the knife.
The user was prompted to ‘VIEW IN AR’ , from wide theatrical release, awards
where they could see the knife, look
around it, and uncover the letters to be
unscrambled. It felt perfect that the clue
was simple to find, but could only be
unlocked if you used the AR view.
How did you approach the audio?
CS: Audio is a key element to an
immersive site experience. We’ve
developed a great relationship with Matt
at Sleepy Volcano. He does fantastic work
so we bring him in on projects whenever
we can. We give some general direction
and then he scores the whole experience.
And typography?
CS: When designing, the main goal for
the type was to keep the feel of classic
and contemporary mystery novels.
How have you continued to develop the
site since launch?
CS: These campaigns are always evolving
season, and then home entertainment.
So we’re continuing to update and add
content to the site, but overall the creative
look and feel isn’t changing much.
What did you learn from this project
that you’ll use on future site builds?
SA: As a team, we had quite a bit of
familiarity with the 3D pipeline of
creating those elements in Blender and
then getting them into the browser, but
personally I hadn’t done a ton of that.
This project was great for being able to
not only do a deep dive into the software,
Blender in particular, but also to become
comfortable with the real-time graphics
and rendering pipeline as a whole.
GET IMAGINEFX FROM
£2.10 PER ISSUE!

SAVE UP TO

70 %

www.myfavouritemagazines.co.uk/digital
Available on
iOS or Android
june 2020 47
 SEO
FEATURES Google SEO secrets

48
secre
june 2020
EO
Google SEO secrets

With ever-changing
Google algorithm
updates and new
Google features, Carl

S
Hendy reveals how to
get started in SEO and earch Engine

drive more traffic to

Optimisation (SEO)

ets
refers to the process of
improving the signals a

your websites website sends to Google

in order to improve its
visibility within the
search results – therefore
sending more traffic to a
website. The more traffic
a website has, the greater
the chance for more
website conversions, an
increase in sales or an increase in website revenue.
The ‘SEO’ search results, also known as ‘organic
search results’, are shown below the Pay Per Click
AUTHOR (PPC) results that appear at the top of nearly every
CARL HENDY search query.
Hendy is an SEO Google search results are no longer ‘10 blue
consultant, solving links’, and the search result design and function
complex SEO issues and can change depending on the type of query that is
increasing organic traffic
searched, previous search history and the user’s
for FTSE and Nasdaq
listed companies. He
geolocation. Google has moved more towards
also owns https:// being an ‘answer engine’; providing the user with
voicesearch.com the answer (whether wrongly or rightly, that’s a
w: https://carlhendy.com discussion for another day) without the need to
t: @carlhendy click through to the website that provided the
answer originally.

june 2020 49
FEATURES Google SEO secrets

There are many ways to improve your
visibility within the Google search
results, and this is broadly broken down
into two core areas:
On-page SEO
Content - Google will be looking at the
quality of your written content. Is your
content well written? Is it informative?
Is the content credible, with authors
clearly identified? Is the content
unique? Does the content answer the
intent of the search query?
Code – Can Google crawl your website
efficiently? Does the page load quickly?
Does your website use JavaScript Google
can’t render correctly?
User Experience (UX) - Does your
website work across all types
of mobile devices? Is the
content hidden from the
users? Is it easy to navigate
of thousands of pounds every day due to
a decline in Google search traffic. You
could no longer find their website when
searching for ‘brand’. The issue? They
had misconfigured their robots.txt file to
disallow all search engine crawlers from
accessing the website.
In this situation, it was an easy fix for
the web developer. Once the changes
were made we were able to request for
Google to recrawl the website within
Google Search Console (https://search.
google.com/search-console/about) and
within a few minutes the website was
reappearing again. I never did send them
my invoice.
Some of the most common SEO issues
I see are related to website migration
failures. These can occur when:
Above A typical result page from Google

There are many ways to

around your website? Does your
website have intrusive website
advertising or use aggressive
pop-ups?
Off-page SEO
Backlinks - Backlinks from other
websites to your website are one of
the most trusted signals Google (and
other search engines) use to determine
the popularity and trust of a website.
Generally, the higher quality and
quantity of links you have from other
websites to your website, the greater
the visibility you will have within the
search results.
Brand demand - Are people searching
for your brand directly within the
search results? Do you have brand
demand outside of SEO traffic?
Entity-relationships - How does
Google understand your website or
brand in relation to other entities, eg a
place, person or thing? Does your brand
have a Wikipedia page?
When SEO goes wrong
Within three days of my first London
agency SEO role, I took a phone call
from one of the biggest fashion brands
in the world. On the end of the phone
was a very concerned web developer
who had claimed they were losing tens
improve visibility within the
Google search results, broadly
broken down into two core areas
A website changes domain name from
redwidget.com to bluewidget.com.
A website re-platforms, for example
from Shopify to Magento (or vice versa).
A complete redesign of website
architecture whereby content is moved
from one location to another.
Leaving staging/testing developer
environments open to Google, which
causes issues around the duplicate
content indexation.
Incorrect configuration of
internationalisation setup, eg where
you could end up with Google UK search
results appearing in Google Canada
search results.
When a company buys another
company and sites merge into one.
There are always many reasons a
migration might fail from an SEO
perspective; be it internal resource, lack
of expertise, stakeholder pressure or just
poor planning.
Other ways that websites can suffer
from SEO issues could be:
Poor quality written content.
Incorrect use of meta tags eg noindex/
nofollow. I often see the rel=canonical
tag incorrectly used.
A misconfigured robots.txt can have
instant negative ramifications if not
resolved promptly.
Poor user experience.
Intrusive advertising banners.
Non-mobile-friendly website – Google
has a great tool for checking if this is
the case: (https://search.google.com/test/
mobile-friendly).
Over manipulation of signals – for
example, trying to force too many

50 june 2020

Above An example of reduced visibility during website migration (https://netm.ag/2WLHUH2)
keywords or topics into one page or
artificially inflating your backlink
profile in an attempt to make yourself
look more authoritative.
All of the preceding issues are
avoidable and fixable if they were to
occur. However, failed migrations, in
particular, can take months and months
to recover from (and that is once you have
those fixes implemented).
Unfortunately within most companies,
SEO is never considered a priority until
it’s too late and the issues have occurred.
All those small recommendations on
the developer’s to-do list that are never
correctly prioritised compound and come
back to bite when your Google traffic
starts to disappear.
In most situations, Google will likely
punish a website with a death by a
thousand cuts approach rather than
an obvious, significant drop in traffic
overnight. There are scenarios where
you could receive a manual action
penalty from Google if you are trying to
manipulate the signals too hard.
SEO for web content
teams
Historically, web content was about
placing keywords on a page and creating
as many landing pages to target those
keywords individually as possible to grab
all that Google traffic. Today, content
should mostly be written with the end
user in mind and only created if it’s
relevant to the audience of your website.
There needs to be a purpose to the
page. The purpose of a page is the reason
(or reasons) why the page was created.
Every page on the internet is created for a
purpose, or for multiple purposes.
Pages should be created to help users.
Websites and pages that are created with
the intent to harm users, deceive users,
or make money with no attempt to help
users, would receive the lowest quality
rating by Google.
As long as the page is created to help
users, Google will not consider any
particular page purpose or type to be of
higher quality than another. For example,
encyclopedia pages are not necessarily of
higher quality than humour pages.
All of the content on a web page can be
classified as one of the following:
Main Content (MC)
Supplementary Content (SC)
Advertisements/Monetisation (Ads)
MC covers any part of the page that
directly helps the page achieve its
purpose. SC is the part of the page that
isn’t MC or Ads.
Google SEO secrets
Play by
the rules
Google’s algorithm has always been
changing and mostly improving (it does
get it wrong sometimes) as it scours the
web to find the best search results for a
user’s query.
In the early days, many SEOs were
asking: ‘How can I trick Google into
thinking my website is better than it
really is?’. Nowadays, it’s more: ‘How
can I work with marketing/product/
content/developer teams to make the
best experience possible for the user
while also matching the user’s intent?’.
If you successfully achieve that, you are
rewarded with an increase in visibility
within the search results. Google
does have its flaws, and there are still
techniques to fool Google, however these
are often short-lived. Google provides
answers for 3.5 billion searches a day, so
there are bound to be loopholes to exploit.
If you want to build a legitimate
brand and have consistent growth
of active users visiting your website,
then longer-term it is best to work
within Google’s Webmaster Guidelines
(https://support.google.com/webmasters/
answer/35769?hl=en). Whether you
agree or not with how Google approaches
search or policing the internet, if you
want traffic from its search queries then
it’s best to play by its rules.
june 2020 51
FEATURES Google SEO secrets
Above Screaming Frog extracts page-level information for identifying SEO issues
It can be text, images, videos, page
features (eg calculators or games). The
quality of the MC plays a very large role in
the page quality rating of a web page.
Ask yourself these questions before
creating any new content.
What is the purpose of this web page?
Is it clear what content is the main
content on important pages?
Does this page fulfil the requirements
of ‘intent’ for someone who is visiting
this page?
Do we need to create this content or
does similar content exist elsewhere?
Do we need to create new content or do
we just need to improve the content we
already have?
Does the current content answer
questions commonly asked?
Does the current content work well
with mobile / tablet devices?
Does this content currently sit within
a PDF?
Is the content URL clean? Is it in
the same case? Does it contain any
unnecessary hyphens?
Does the page have ‘boilerplate’ text?
52 june 2020
SEO for web developers
While poor-quality content can cause
issues for users, lower performance
rankings and reduced conversions, poor-
quality web development can have far
greater negative consequences for SEO.
Implementing the wrong server
response to Google, blocking a website
with a misconfigured robots.txt file, and
incorrect meta tag usage within the body
of the HTML can remove a website from
Google within hours. There are tools and
services out there that can help prevent
these issues from occurring.
Below are some examples of how web
developers can avoid SEO issues:
After website migrations or developer
releases, always check the robots.
txt file (eg https://www.website.com/
robots.txt) to ensure there are no
directives within robots.txt file that
could prevent Google from crawling.
Additionally, check meta header
tags to ensure there are no <meta
name=”robots” content=”noindex”>
within the HTML. It is very common to
see these creep in post-migration.
Do not leave staging environments
open for Google to crawl and
index. Always ensure that staging
environments have robots.txt
directives to block all crawlers. An
additional level of protection would be
to ensure all staging environments are
password protected.
At a recent Google Webmaster Conference
I attended at Mountain View Google
Headquarters, multiple Google engineers
highlighted that fast-loading websites
will improve the experience for users and
therefore improve your search visibility.
There are many ways you can improve
page speed:
Reducing file size and code bloat.
Compressing large images using a
service like Kraken (https://kraken.io).
Avoiding excessive DOM size.
Controlling cache expiries.
Removing all old third-party code and
tracking scripts that are not in use.
Google has a great web browser
extension called Lighthouse (https://
netm.ag/39tGEuW), which provides lots

of insights into page speed metrics and
basic on-page SEO metrics.
Web developers need to question
whether their website is mobile-
friendly, as Google crawls from a
mobile first crawler now. This can be
checked using a Google tool (https://
www.thinkwithgoogle.com/intl/en-gb/
feature/testmysite). This tool will give
early indications, however it is worth
user testing across multiple screen
sizes, all website pages and multiple
devices to ensure pages render
correctly and function across all
devices. Web crawling software such
as Screaming Frog (www.screamingfrog.
co.uk/seo-spider) or Sitebulb (https://
sitebulb.com) will enable you to check
thousands of URLs very quickly for
mobile-friendliness.
JavaScript websites can be
great for users, but webmasters
should tread carefully from an
SEO perspective
JavaScript and SEO
SEO for JavaScript-heavy websites has
always been an issue for SEO, however
Google has improved its ability to crawl
and index JavaScript websites recently.
JavaScript websites can be great for users,
but webmasters should tread carefully
from an SEO perspective.
Google itself has two crawling queues
1 The first and main one is a headless
crawler using the engine that has
JavaScript disabled. If the results from
a crawl (from this crawler) come back
with little to no page content (and JS is
detected on the page), it will add the
URL to the secondary crawler queue.
2 The secondary crawler queue is the
same as the first, but it has JavaScript
enabled in order for JavaScript to be
executed and therefore rendered. For
rendering, Googlebot now uses the
latest version of Chrome
Google will crawl a page, fetch the
server-side rendered content and then
run initial indexing on that document.
Rendering the JavaScript-powered
web pages takes processing power and
memory, however, and while Googlebot
is certainly very powerful, it doesn’t have
infinite resources.
So if the page has JavaScript in it, the
rendering is actually deferred until they
have the resources ready to render the
client-side content. Google then indexes
the content for a second time, several
days or weeks later.
When using any JS framework it is
important to note that any content
generated with these may carry less
weighting for SEO. For this reason,
JavaScript-generated components/
sections should not contain important
text, content or links.
If you were to have a search component
on the page that was loaded as a JS
component, this would be absolutely fine
as long as the important parts of the page
(content, links and so on) are available in
‘normal’ HTML.
If a JS component contains important
information, text or links, and a pure
HTML solution is not the preferred
option, we would recommend pre-
rendering a HTML server-side solution
so that it is served to the end-user (or
Googlebot) as HTML.
Another option would be for ‘dynamic
rendering’ , which means switching
between client-side rendered and pre-
rendered content for specific user agents.
Google SEO secrets
How do you
discover which
keywords and
topics to target?
Speak to customer service teams to find
out the most common FAQs. Answer
those FAQs within the web content.
Use internal search query data from
Google Analytics to review what users
are searching for once they arrive on
your website.
Use Pay Per Click (PPC) data to find
out what keywords have high search
volume, high click-through rate (CTR) and
conversion rate.
Use Google Trends (www.google.com/
trends), which is free to use, and look at
the ‘breakout terms’ towards the bottom
of the page to see what people are
currently searching for.
Use Google’s keyword data search tool
(https://adwords.google.co.uk/select/
KeywordToolExternal). Although this
data is not 100 per cent accurate, this is
currently the most accurate search data
freely available.
Here is one way to test if Google is
processing JS correctly:
Use the Inspection URL in Google
Search Console to test the target page and
ask the following:
1 Is the main content being loaded?
2 Is the navigation visible?
3 Is the design and layout of the
page visible?
4 Is the page loading without any issues
or errors?
If you answered ‘no’ to any of the
questions, then click on the More Info
tab and review the error log. It will then
show you a list of JavaScript errors that
occurred while rendering the page or
blocked resources.
Local SEO
If you are a business offering services
locally, one of the easiest and quickest
june 2020 53
FEATURES Google SEO secrets
ways to increase your visibility within
Google is to sign up to Google My
Business (www.google.com/intl/en_uk/
business). This is a free service (at least
for now) that enables you to appear
within the Google Maps search results
and often above the fold within search
results based on a user’s query and a
user’s location.
If you decide to go this route, it is
important to fill out as many of the
fields within the Google My Business
application as you can, provide multiple
high-quality, unique images, and verify
your Google submission.
Doing what you can to encourage
customers to leave reviews within your
search listing can increase credibility and
visibility for your business. What’s more,
within the platform, potential
and existing customers can ask
Encouraging customers to
leave reviews within your search
listing can increase credibility and
visibility for your business
questions, which enables you to engage
with them and improve relationships.
Many data sets suggest there is a
correlation between high numbers of
customer reviews and higher visibility
within the search results within Google’s
map pack.
At the end of each month, Google
will email some useful data on how
your listing has performed in terms of
visibility and clicks.
Another way to improve your visibility
within local searches is to ensure that
your main website has a local telephone
number, address details (if relevant)
and reference to the areas that your
business covers. Make sure you include
information such as business opening
hours and the products and services
you offer, as well as links to your social
profiles so that Google can start to
54 june 2020
understand the relationships between
your company’s different online assets.
SEO tools and services
There are thousands of tools and services
online that claim to be able to ‘automate’
the process of SEO. Do not be tempted
to purchase any of these, they’re often
a waste of money and also provide
misleading advice.
To help you avoid mistakes, what
follows is a list of recommended tools
that would work well if you are a beginner
and looking for something cheap but
actionable, or if you’re working within
enterprise SEO and need something
more heavyweight. Some of these tools
will have overlapping services and
outputs, and everyone will have different
requirements, so give them all a trial and
work out what’s best for your objectives.
Google Search Console
https://search.google.com/search-console/
about
A free service from Google that
enables you to extract and diagnose
SEO issues around indexing, mobile
compatibility and robots.txt. It’s
currently the only place where you can
get raw ‘keyword data’ that shows how
people found your website.
Sitebulb
https://sitebulb.com
A website crawler that will gather
each page of your website into an
easy to read format with outputs that are
very actionable. Prices start from £10 per
month, which is a bargain. It also has one
of the funniest monthly emails that will
arrive in your inbox.
Screaming Frog
www.screamingfrog.co.uk/seo-spider
I’ve always described Screaming
Frog as the best SEO tool money can
buy, however there’s also a free lite
version for smaller websites. Screaming
Frog will extract page-level information
for diagnosing SEO issues. Screaming
Frog also offers a server log file analyser
(www.screamingfrog.co.uk/log-file-
analyser) for those who want to dig a little
deeper into how Google is behaving on
your website.
Little Warden
https://littlewarden.com
From the creators of the legendary
SEO conference Think Visibility, is a
SAAS platform that runs automated
checks on your website’s health to
prevent issues around website
change monitoring, SSL
certificates, domain name expirations
and any other SEO horror. I’m still
amazed by the number of brands that
aren’t aware when their domain names
are about to expire. This service helps
prevent those issues. Very helpful if you
look after many websites.
Big Metrics
www.bigmetrics.io
One of the new kids on the
block, but extremely powerful
when you show large data sets
visually to clients. This service takes your
Google Search Console data and makes it
far more usable and actionable.
Google Analytics
https://analytics.google.com/analytics/web
Not an SEO tool as such, but it does
enable you to measure the success
of your SEO changes, how users are
engaging with your content, and how well
your content is converting into
customers/revenue. Content teams can
extract a lot of actionable data from
Google Analytics to help improve
on-page SEO performance.
AccuRanker
www.accuranker.com
Traditionally another way to
measure the performance of SEO is
 Google SEO secrets

Further reading
A lot is written about SEO and you could
end up down a rabbit hole trying to learn
and understand all the different opinions.
The best SEO experts I have worked with
generally tend to be those who learnt SEO
by setting up their own websites from
scratch and then using the knowledge
they had read to test theories and
improve understanding.
If you are looking to get started in SEO,
there is an old guide by Google that is
worth investigating. Okay, so it’s a little
basic and outdated, but is nevertheless
a good (and free) read (https://netm.
ag/2UI3tWb).
A nice follow on from that would be the
Moz Beginner’s Guide to SEO (https://moz.
com/beginners-guide-to-seo). Use this to
understand the core principles.

to look at how your website ranks for a

particular keyword query. AccuRanker
enables you to highlight features within
Google search results and check keyword
rankings across multiple geolocations
and mobile/desktop rankings. There is
currently discussion within the SEO
industry as to how important measuring
keyword rankings are due to Google
always changing the search layouts,
however most brands/stakeholders will
find some form of keyword ranking
performance reporting helpful.

SearchPilot
www.searchpilot.com
If you are working within enterprise
Top
SEO, you will find that you are often Little Warden is a SAAS
asked ‘What is the ROI of this suggested platform that runs
automated checks on
change?’ or ‘How do I measure the impact your site
of this change?’. The platform SearchPilot
Middle
will help you answer both of those Big Metrics - Google
questions. This platform enables you to Search Console made
more actionable
A/B test SEO changes.
Left
The Sitebulb website
If you have any SEO questions, or need crawler offers users
pointing in the right direction for further actionable outputs

SEO reading on a particular topic, please

feel free to reach out to me. My Twitter
account (https://twitter.com/carlhendy) is
usually the best method.

june 2020 55
FEATURES WordPress: 20 best plugins

56 june 2020
 WordPress: 20 best plugins

WordPress:
20 best plugins
Joe Ford presents his handpicked list of 20 WordPress
add-ons that will help solve client requests, speed up
workflow or just enable you to try something new

I
t could easily be argued that plugins were
what made WordPress big. Without them,
it’s just a blog platform that supports pages.
Yet the majority of the problems and bad
press cast towards the CMS are caused by the
AUTHOR plugin ecosystem. While the possibilities are
JOE FORD endless when almost anyone with an internet
Ford is the senior connection can find out how to write plugins,
developer at Tillison it does open the door for poorly written
Consulting in code and mistakes that can prove critical in terms
Waterlooville. He spends of security. To help steer through the ever-growing
his work days keeping
maze of what’s available, we’ve handpicked 20 of the
both websites and his
best plugins. Some are well known while some are
team running smoothly.
w: tillison.co.uk up-and-coming but all of them are recommended
t: @JoeFordTheNerd against three factors: minimal bloat, maximum
function and minimal footprint – meaning no
intrusive dashboard adverts or messages.
From caching solutions to labour-saving shortcuts
for developers, this list contains plugins to look out
for in a modern WordPress setup.

june 2020 57
FEATURES WordPress: 20 best plugins
Elementor
https://elementor.com
Elementor is a visual drag-and-
drop editor for WordPress that
simplifies the process of
building pages without having to dive
into code and theme files. The concept of
a visual builder is nothing new for
WordPress but Elementor manages to
deliver the most powerful toolset yet.
What’s more, it also seems to keep div
soup to a minimum and scores well in
page speed tests. Upgrading to the pro
version gives access to the theme builder
features that enable creation of reusable
blocks for headers and footers. Combined
with the Hello theme made by the same
developer, Elementor can completely
replace most features of a theme. The
plugin also has a mobile view and enables
separate control of most options to make
things easier for mobile screen sizes.
The concept of a visual builder
is nothing new for WordPress
but Elementor delivers the
most powerful toolset yet
Breeze
https://wordpress.org/plugins/breeze
Originally designed to work
with Cloudways hosting, the
Breeze plugin contains a
lightweight and simplified interface for
caching and minification and CDN
support that will work on most websites,
regardless of hosting platform. In both
hosting scenarios, the plugin resulted in
large gains in Google’s PageSpeed score
after activation. The ability to defer and
async JavaScript files is also built into
Breeze, which saves having to use a
separate plugin. These extra features are
surprisingly well developed and even
feature an interface to add CDN support.
Best of all, Breeze is free and at the time
of writing doesn’t even have a paid
version. All features are available right
out the box with no restrictions.
58 june 2020
WooCommerce
https://woocommerce.com/
woocommerce-4-0-sale
The number one WordPress
shopping plugin looks like it’s
here to stay as it launches its
latest version 4 update, which includes a
revamped admin menu featuring better
reporting and tools. WooCommerce
enables WordPress to be converted into a
complete eCommerce store. With features
such as variable products, import tools
and free and paid plugins to manage
Google shopping feeds, WooCommerce
stands up well against other options.
Shipping zones can be set up with ease
and localised down to postcodes.
However, be warned that the plugin does
have a few quirks, for example changing
the wording on the front end can
sometimes mean having to dive into
functions.php.
WP All Import
www.wpallimport.com
WP All Import is the perfect
plugin to handle large data
imports from CSV and XML
files. Uploading a CSV or XML file leads to
an interface where columns can be
mapped against Post Title, Content, Date
Published and all other post data. Once
data is mapped, it can be previewed and
tested before running the import. Use
cases include scraping data when
converting old websites to a CMS or
importing a massive amount of products
and custom data into WordPress. A handy
feature of this plugin is the option to
download any media files that are
encountered, download a copy and then Top Above
Elementor enables you WooCommerce is aimed
add them to the WordPress media library. to build websites without at turning WordPress sites
Although the plugin is premium, it having to tangle with code into eCommerce stores
quickly pays for itself in the time it saves.
 WordPress: 20 best plugins
left
Elementor
xxx
xxx
xxx
Below
Woocommerce
xxx
xxx
xxx
WP Headless
https://wordpress.org/plugins/
wp-headless
For larger content-heavy
platforms, a trending setup is to
run WordPress as a headless
CMS that is then accessed remotely by a
front-end app. The end product is a
content system where the content team
can work in the familiar WordPress
interface, while the front-end app
responsible for displaying the
information can be handled by the
development team in the front-end
framework of their choosing. WP
Headless simply negates the front-end of
a WordPress website by redirecting non-
authenticated users to the login page.
PhastPress
https://wordpress.org/plugins/
phastpress
PhastPress covers many of the
‘hard to get’ elements in
passing a PageSpeed audit with
advanced features such as inlining
critical CSS on the fly and loading all
scripts asynchronously. The range of
tools offered for free is vast and even
includes a free cloud-based image
optimising solution. While this plugin
can clash with the optimisation parts of
cache plugins such as Breeze, if the
overlapping features in Breeze are
disabled the two plugins work brilliantly
together. Although the plugin currently
has a small set of users, updates are
regular and reviews are high.
Broken Link Checker
https://en-gb.wordpress.org/plugins/
broken-link-checker
Given its name, it’s no surprise
to learn that the purpose of this
plugin is to check for broken
links. Once installed, it detects broken
links across a site and builds a list over
time. This is extremely helpful when
testing larger sites, as inevitably mistakes
happen during the build. When viewing
the front-end of the website as an admin,
broken links are shown with a
strikethrough, making errors easy to
spot. The detected links can also be
viewed in one big list for easy correction.
WP Mail SMTP
https://en-gb.wordpress.org/plugins/
wp-mail-smtp
Getting a website to send emails
when a contact form is
submitted or a notification
created used to be easy. With the rise of
advanced spammers and malicious email
activity, though, it’s getting harder to
deliver emails. This plugin opens the
door to route all emails sent by WordPress
through an external service such as
SendGrid, Pepipost SMTP and more. In
most cases the setup process simply
consists of pasting an API key from the
external provider and clicking save, then
all email sent by the website is routed
through the external provider.
june 2020 59
FEATURES WordPress: 20 best plugins
Duplicator
https://en-gb.wordpress.org/plugins/
duplicator
Duplicator has been around for
some time but continues to
improve and is one of the
easiest ways to both back up or migrate a
WordPress website.
Starting with a simple interface to
take a package of the website, the plugin
enables a download to be taken including
a zip folder and installer.php file. These
two files can be uploaded to any PHP
web server and accessed directly in the
browser, doing so provides a step-by-
step wizard to recreate the website on the
destination server.
ACF: Advanced Custom
Fields
www.advancedcustomfields.com
WordPress can be so much more
than just title and content
fields. Advanced Custom Fields
enables a developer to add more than just
the built-in fields to pages, posts and
custom post types. Input types include
links, images and even files, creating
endless possibilities to the type of
60 june 2020
Advanced custom fields
enable a developer to add
more than just the built-in
fields to pages and posts
content WordPress can manage. Fields
can even be set to show conditionally
based on the post type, category and
other factors. The data entered in these
custom fields can be used in template
files or even in visual builders like
Elementor to display dynamic content.
The SEO Framework
https://en-gb.wordpress.org/plugins/
autodescription
The SEO Framework makes a
fantastic bloat-free SEO toolbox
with everything that’s needed
for WordPress optimisation. With a
minimalist interface and no intrusive
adverts, the plugin is brilliant for users
who know what they need to edit for
on-page SEO and just need the means to
be able to make those changes. The
developer even goes as far as white
labelling the plugin so that no intrusive
brand names end up being plastered all
over the WordPress dashboard.
Migration from other plugins is made
easy with an inbuilt tool that brings
across metadata in bulk. The plugin also
features a free extension manager.
EWWW Image
Optimizer
https://en-gb.wordpress.org/plugins/
ewww-image-optimizer
A highly flexible image
optimisation suite, EWWW
Image Optimizer is packed with
 WordPress: 20 best plugins

JetEngine
Far left
Duplicator continues to be
one of the easiest ways for
users to back up or migrate
a WordPress website

Left
Advanced Custom Fields is
a plugin for anyone looking
to add more than the built-
in fields to pages and posts
Below
EWWW Image Optimizer
is a quick and easy way to
reduce the size of images
on a website
https://crocoblock.com/plugins/jetengine
JetEngine is an addon to the Elementor plugin that brings a huge amount of
flexibility and power in the form of dynamic content. This enables the creation of
custom post grids that show data from advanced custom fields or even helps to
restyle the default post list layout. For example, if a travel section of a website
needed to feature five different holidays with custom data such as price and
location, it would be very difficult with the standard Elementor post grid. But
with JetEngine, you would first create a listing item. This is the template for a
single repeatable item within the content grid. The listing item can be created
with the Elementor builder using the dynamic input options to draw data from
ACF or the built-in JetEngine meta boxes.
New dynamic content areas called ‘listing grids’ can be created using the
Elementor builder itself. The end result is a custom-styled post grid showing the
custom data.
JetEngine isn’t a free plugin but it does have a whole set of complementary
premium plugins that work well together as a bundle. All in all, the JetEngine
addon enables Elementor builds to drop down to a whole new layer of flexibility
and functionality.

tools to help reduce image sizes on a

website. It takes a different approach
from several other plugins by letting the
optimisation run on the web server rather
than offloading it to a chargeable cloud
service. A cloud service is also available
but isn’t the default.
The bulk optimiser feature is designed
to optimise all the files in the Media
Library in one long process and will go
through each and every image uploaded
to reduce the file size. The plugin also
has a tool to make a webp version
of all images as it goes through the
optimisation process.

Above The SEO Framework has a host of features to optimise your website for SEO

june 2020 61
FEATURES WordPress: 20 best plugins
WordPress Auto-
updates (Beta)
https://wordpress.org/plugins/
wp-autoupdates
A common complaint about
running a WordPress website is
that even in a 24-hour period,
plugins are likely to need updating. With
the current advice being to keep all
plugins at their latest versions where
possible, this can soon become an
impossible task when maintaining more
than one website.
While only in beta, this plugin eases
the burden of running a WordPress
website by safely updating plugins
where possible. It may even be included
by default in the next major version of
WordPress, although the authors have
said it won’t be included ‘as is’ in the
WordPress Core.
Flying Pages
https://wordpress.org/plugins/flying-
pages
Flying Pages is a tiny plugin that
detects when a user hovers over
a link and quickly preloads the
page in case the user clicks. If the user
does click the link, then the transition
between pages is instant as the
prefetched data snaps into view. With the
amount of emphasis on PageSpeed and
how it can affect conversion rates, the
value of this is great. Great care is taken
to avoid abuse or mistakes that would
cause the preloading to slow down the
server. Preloads are put into a queue
server-side and processed in batches.
While it won’t make PageSpeed scores
higher, it’s certainly worth testing to see
if it impacts conversions.
Really Simple SSL uses several
methods to change all http
links on a site to https,
including page recsources
62 june 2020
WP Paint
https://wordpress.org/plugins/
wp-paint
WP Paint is an image-editing
plugin that enables more
complex editing of images
directly in the Media Library. While not a
Photoshop replacement, the plug-in is
handy for minor edits that would
normally require downloading the picture
and opening a clunky image editor.
A premium version is available with
extra tools such as watermarks and
revisions but the free version comes with
plenty of tools to make your life easier in
a pinch.
Really Simple SSL
https://en-gb.wordpress.org/plugins/
really-simple-ssl
The best companion when
switching a website from http to
https and a quick and painless
way to fix mixed content issues, Really
Simple SSL uses several methods to
change all http links on a site to https.
This includes page resources and images,
which helps solve problems with only
some insecure assets on a page. With an FileBird
inbuilt failsafe, the plugin will warn a https://wordpress.org/plugins/filebird
user when attempting to activate SSL if It doesn’t take long for the
the certificate isn’t valid or isn’t in place, Media Library to become an
which saves causing any accidental infinite mass of images by the
problem for front-end users. end of a medium-size build. FileBird
enables the creation of folders in the
Media Library to better organise images.
This can be invaluable when the amount
of images build up and images aren’t
properly named for the search tool.
The user interface is fantastic and neat
but the free version is limited to just
ten folders.
Overall the plugin goes a long way to
keeping the Media Library experience
up to date, at least until WordPress next
updates this area.
 WordPress: 20 best plugins

HappyAddons
for Elementor
https://happyaddons.com
A second extension for the Elementor page builder, HappyAddons
doesn’t stand out at first glance against other extra module packs.
But reading further into the features list, it’s apparent that the
plugin holds some groundbreaking features. Cross Domain copy
paste is a timesaving superweapon, enabling right-click copy and
paste between entirely different websites. This means content
blocks can be reused from site to site with just a few minor style
alterations. In theory a whole library of prebuilt modules could be
built on a central site and then used as a personal template library.
Another nice to have feature is the on demand asset loading, which
keeps unused CSS away by only loading the CSS or JavaScript
required for the content on screen. A bootstrap grid is another
welcome addition that overlays the same grid system used in Sketch
and Figma on the page being edited, leaving less guesswork involved
in checking if text is properly aligned. Packed full of other features
and lots of template content for faster projects, HappyAddons is
overall a solid set of tools that can help any Elementor builder.

Top
WP Paint is an image-
editing plugin that works
Relevanssi directly in the Media Library
https://www.relevanssi.com
Above left
The standard WordPress search Avoid a messy Media
Library by using FileBird to
function leaves a lot to be
create folders
desired, however Relevanssi
Above right
aims to help with that. Best described as
Really Simple SSL makes
a ‘build your own search engine’ , switching from http to
https a lot easier
Relevanssi gives full control over the way
results work and enables a developer to
choose what a user can search for, while
offering ease of use functions for an end
user such as ‘did you mean’ and typo
detection. The index also learns over
time, which means the more people
search, the better the system gets.
One warning is that the search index
can grow to a rather large file size of
400MB or more, so make sure the server
has plenty of disk space.

june 2020 63
PROJECTS three.js View source
files here!
All the files you need for this
tutorial can be found at
github.com/markjsb/dotnet/
tree/master/3D_interface

A B O U T T HE A U T H O R
MARK
SHUFFL EBO T T OM
w: www.webspaceinvader.
com
t: @webspaceinvader.com
job: Professor of
interaction design
areas of expertise:
HTML, CSS, JavaScript,
WebGL

THREEJS

BUILD A 3D INTERACTIVE
INTERFACE WITH THREE.JS shows how to use the three.js library to create a
WebGL animated interactive interface for your site

It’s possible to create 3D content for the web
entirely in CSS but this is always going to be
constrained to flat planes. While there is nothing
inherently wrong with this, as designers we often
want so much more. Using the three.js library
affords us the opportunity to have lighting, shading,
reflection maps and genuine 3D shapes to give a
sense of depth to an otherwise flat screen. To push
the design even further, there is also access to
shaders to apply some filters to the image and give
the design a final polish.
In this tutorial, a 3D interactive animation will
play in the background while the foreground will
contain the regular 2D interface as normal HTML
elements purely for accessibility, as we could also
easily make parts of the 3D model clickable. There
will be a 3D model loaded in and there’ll still be
some manipulation to do with the model, such as
correcting textures and adding reflection maps.
Finally, some elements will be animated. Getting
access to these individual parts of a model shows
how different parts can be further animated, should
you require to do that.
1 GET STARTED
To start the project, open the ‘start’ folder in your
code IDE and open the main.js page. All the HTML
and CSS elements are completed and the libraries
are linked, ready to be used in the HTML. There are
some elements of code completed that mostly handle
touch, mouse presses and browser resizing, but let’s
start by adding some variables above that code.
let scene, camera, renderer, sphere, material, bg,
fg, composer, rgbPass, rmnt, filmParams, filmPass,
renderPass, copyPass;

64 june 2020
 threejs

let mouseX = 0, mouseY = 0, displaceSc = 50, shaderTime =

0, windowHalfX = window.innerWidth / 2, windowHalfY =
window.innerHeight / 2;

These are required to hold many aspects of the

scene, including some models, materials and post-
processing effects. Post-processing takes a number
of lines of code to implement, but the pay off is
worth it because the shader effects always have a big
impact on the scene.

let init = () => {

scene = new THREE.Scene();
scene.background = new THREE.Color(0xcccccc);
camera = new THREE.PerspectiveCamera(75,
window.innerWidth / window.innerHeight, 0.1, 2000);

renderer = new THREE.WebGLRenderer({ antialias:

true });
renderer.setSize(window.innerWidth, window.
innerHeight);
document.body.appendChild(renderer.domElement);

2 POST-PROCESSING
Here the code to start setting up the scene is created:
all of this code will be in the init function. It’s
important that this init function is placed after the Above After the cube texture is loaded, this is used as a reflection map on the sphere, which is also
given a displacement map to make it spiky
existing code already in the project, because it needs
access to some of the values set up in that code.
The scene is just like in the real world, with a
camera required along with something for the
camera to look at, in this case it will be some 3D
models and lighting. A scene is created that will
hold all elements that we’ll display, the background
of that is set to a light grey colour, then the camera
is added with a 75-degree field of view – it’s set
to match the screen dimensions and to display
elements within 2,000 units of the camera. The
renderer is set to fill the browser, the edges of the
models are softened by anti-aliasing the edges and
this is then added to the web page.

renderPass = new THREE.RenderPass(scene, camera);

rgbPass = new THREE.ShaderPass(THREE.
RGBShiftShader);
filmPass = new THREE.ShaderPass(THREE.FilmShader);
copyPass = new THREE.ShaderPass(THREE.CopyShader);
filmPass.uniforms.grayscale.value = 0;
composer = new THREE.EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(filmPass);
composer.addPass(rgbPass);
composer.addPass(copyPass);
copyPass.renderToScreen = true;
Above Loading the 3D scene brings the models in, but there are some textures that seem to be
params(); missing and a reflection map needs adding

june 2020 65
PROJECTS three.js
Above By making the texture visible on both sides of the model, the foreground and background discs are now visible
3 SORTING SHADERS
The code now moves to setting up all the post-
processing effects, as shaders. The regular scene
from the camera is stored, then all of the effects are
passed in, such as an RGB shift shader, a film shader
and a required copy shader. These are then stacked
up by putting them into an effect composer. Each
pass is placed in here and then the final copy pass is
what is rendered out to the screen. The last line calls
a params function, which was already created in the
code. In here you can find all the parameters that
affect the shader and it’s good to experiment with
these once all the code is finished.
let path = “assets/”;
let format = ‘.jpg’;
let urls = [ path + ‘interstellar_lf’ + format, path +
‘interstellar_ft’ + format, path + ‘interstellar_up’ + format,
path + ‘interstellar_dn’ + format, path + ‘interstellar_rt’ +
format, path + ‘interstellar_bk’ + format ];
let reflectionCube = new THREE.CubeTextureLoader().
load(urls);
reflectionCube.encoding = THREE.sRGBEncoding;
let textureLoader = new THREE.TextureLoader();
let displacementMap = textureLoader.load(“assets/tex2.
jpg”);
66 june 2020
4 LOAD CUBE MAP
This next section of code loads in a cube map. The
cube map is a whole environment that is reduced
down to six planes, and in this case the cube will
be used as a reflection map. If an element in the
3D scene is to be shiny, then it needs to reflect
something to give it that shininess. Just look
around you – there will probably be a number of
shiny objects that you will see reflections of your
environment in.
In this case the model is using this map to give
that illusion. Once that is stored in the reflectionCube
variable, another textured is loaded and this will
be used as a displacement map on the sphere in the
scene. The displacement map will eventually be
animated on the sphere by increasing and decreasing
the displacement amount.
let geometry = new THREE.SphereGeometry(200, 80, 80);
material = new THREE.MeshPhongMaterial({ color:
0x93eaff, displacementMap: displacementMap,
displacementScale: displaceSc, envMap: reflectionCube,
reflectivity: 0.4, side: THREE.DoubleSide });
sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
sphere.position.set(0, 0, -120);
 three.js

5 CREATE A SPHERE
Now a sphere is created with a radius of 200 units
and 80 subdivisions on the x and y axes. A material
is created that uses the displacement map and the
environment map made earlier. These elements get
placed together to create a mesh out of the geometry
and material, this is then placed into the 3D scene
and positioned away from the camera on the z axis
with a value of -120.
let light = new THREE.SpotLight(0xd8e5e5, 1.0, 0, Math.
PI, 1);
light.position.set(200, 500, 500);
light.target.position.set(0, 0, 0);
scene.add(light);
light.penumbra = 1.5;
let ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(ambientLight);
6 ADD A LIGHT
In order to see the world, we’ve created a light and
positioned it in front and above the centre point.
Because this is a spotlight, it can be pointed in
a direction, which is accomplished with target
position. Its penumbra is set, which is the lighter
outer region of a shadow, essentially meaning that
the light source has a soft fade. In order to get even
lighting in the scene, an ambient light is also added.
This is set low at 20% illumination, just so even
darker areas get a little light.
IN-DEPTH
CREATING INTERACTIONS
In the tutorial a 3D model is loaded, comprised of several
individual elements including materials. It’s really
straightforward to get access to any of these individual elements
in the code. The first step is to name the elements in the 3D
package that you choose. All 3D modelling applications should
enable you to rename individual objects. Then export the model in
a format that can be loaded into three.js. In our tutorial the
COLLADA model format has been chosen just because it’s easy to
read afterwards as it’s in XML format.
Once the model has been loaded, it’s a simple case
of finding that model. Three.js comes with a command
‘getObjectByName(‘name’, true)’. If you have added the model
to your scene, prefix this with ‘scene’ and join with a period. The
‘name’ is the name of the model that you have given in the 3D
modelling application, so replace that with the real name. The ‘true’
at the end refers to a recursive search. You should always select
true as it checks children of children for the model, which means
that the model is always found. If you store that model in a global
variable you can animate it or make it react to user input in some
way from anywhere within your code.

let loader = new THREE.ColladaLoader();

loader.options.convertUpAxis = true;
loader.load(‘assets/model.dae’, function(collada) {
let dae = collada.scene;
dae.scale.x = dae.scale.y = dae.scale.z = 1.3;
dae.updateMatrix();
scene.add(dae);

7 LOAD MODEL Above Naming your individual models in a 3D application means that it’s easy
to access individual models, therefore you can load large scenes but always get
It’s time to start loading the external model, so the access to your model for animation and interaction
loader is created that will handle that. The loader is
specifically for the COLLADA model format: there is
an anonymous function that acts as a callback and
this is initiated once the model has been loaded. The
model is then scaled to the right size for this scene, “In order to get even lighting
in the scene, an ambient light
which is scaled up slightly. This model is added into
the scene so that it will display.

bg = scene.getObjectByName(“Plane”, true); is also added. This is set low

bg = bg.children[0];
bg.material.side = THREE.DoubleSide;
at 20% illumination, just so
bg.material.transparent = true;
fg = scene.getObjectByName(“fPlane”, true);
even darker areas get a
fg = fg.children[0]; little light”

june 2020 67
PROJECTS three.js

fg.material.side = THREE.DoubleSide;
fg.material.transparent = true;
RESOURCES
fg.material.opacity = 0.5;

MODELS FOR FREE 8 TWEAK TEXTURES

Not everyone is a skilled 3D modeller or has the time to learn
how to become one. If you need 3D content for your WebGL
scene, then you can probably find something for free online. First
off you need to make sure that you can load the format of model
into WebGL, thankfully the three.js library has a number of
extensions for loading almost any kind of model that you can think
of. Check out the threejs.org site for examples of how to do this.
There are some great models for free on the CG Trader site (www.
cgtrader.com). The site does contain paid models, but when making
a search, just be sure to click the ‘free’ option. There will be
premium and ‘on sale’ content interspersed with your search
results, but free content is helpfully marked as ‘free’.
Another place to get models is Google’s Poly site (https://
poly.google.com). There are a lot of models on here and many
are created using the tilt brush, so if a more traditional model
is required, go to the menu and choose the category. Then use
the filter to filter out any tilt brush models, which are more like
3D paintings. Once you’ve found something, click the model and
hit the download icon to take a copy. There are many other 3D
sites that contain models as well, so if there is something unique
you are looking for, you should be able to find it online. As the
popularity of WebGL, VR and AR increases, there is becoming an
increasing demand for models and we will probably be able to find
3D models as easily as images in the future.
While the 3D model would now be visible, there are
a few things that need to be improved. The textures
on two of the planes are facing the wrong direction,
so now the code accesses those planes and references
the child model of them. Then the material of that
model is changed to be a double sided material and
the texture becomes visible. By default, transparent
textures are placed over a solid colour so each of
the textures is told to render over a transparent
background and therefore only the texture becomes
visible and not the background. The texture in the
foreground is reduced in opacity just to make it blend
with the scene better.
let wt = scene.getObjectByName(“l_circ”, true);
wt = wt.children[0];
wt.material[0].envMap = reflectionCube;
wt.material[0].reflectivity = 0.2;
wt.material[1].envMap = reflectionCube;
wt.material[1].reflectivity = 0.2;
let dk = scene.getObjectByName(“d_circ”, true);
dk = dk.children[0];
dk.material[0].envMap = reflectionCube;
dk.material[0].reflectivity = 0.4;
render(); });

9 APPLY REFLECTION MAP

More of the textures are accessed now. The reason
for this is so the reflection map can be applied and
the reflectivity of the surface can be set. In some
cases there is more than one texture on the model,
so that is sorted out here. As the model has loaded
the scene, it is told to update by calling the render
function that will be created shortly.

window.addEventListener(‘resize’, onResize, false);

document.addEventListener(‘mousemove’,
onDocumentMouseMove, false);
Above Use one of the many resource sites like CG Trader to find 3D models for document.addEventListener(‘touchstart’,
your WebGL projects onDocumentTouchStart, false);
document.addEventListener(‘touchmove’,
onDocumentTouchMove, false);
if (window.innerWidth <= 450) {
camera.position.z = 1000;
“The texture in the } else if (window.innerWidth <= 768) {
camera.position.z = 800;
foreground is reduced in } else {

opacity just to make it blend }

camera.position.z = 600;

with the scene better” }

68 june 2020
 three.js

10 MAKE IT FIT
The final part of the init function really just makes
sure that the resizing, touch and mouse events are
handled. Notice here that depending on the width of
the screen, the camera is altered so that it fits better
on tablet and mobile devices.

let render = () => {

requestAnimationFrame(render);
camera.position.x += ((mouseX / 3) - camera.position.x)
* 0.05;
camera.position.y += (-(mouseY / 3) - camera.position.y)
* 0.05;
camera.lookAt(scene.position);

11 SMOOTH MOVEMENT Above The reflection map is added to the 3D models and this gives a subtle effect, but when the
object moves the reflection shimmers
The render function is called to keep running at
60 frames per second using the browser’s built in
‘requestAnimationFrame’. The camera updates based on
the position of the mouse or touch on the screen,
making the scene interactive. There’s also a slight
easing applied to this so that the movement is
always smooth as the camera adjusts to the new
position from the user. The camera is told to always
face the centre of the scene so that it’s pointing at
the content.

let sclr = Date.now() * 0.002;

bg.rotation.z += 0.001;
fg.rotation.z -= 0.0007;
sphere.rotation.y += 0.004;
displaceSc = 150 + (Math.sin(sclr) * 40);
material.displacementScale = displaceSc;

12 UPDATE ELEMENTS Above The final content has a film grain effect and every so often the RGB channels split, based on
a random number
The content in the 3D model is set to animate by
rotating each plane. The sphere’s displacement
map is updated so that it pulses in and out using
a sinewave; this in turn updates the displacement
scale of the material.

let r = Math.floor(Math.random() * 150);

if (r == 0) rmnt = Math.random() * 0.006;
shaderTime += 0.1;
filmPass.uniforms[‘time’].value = shaderTime;
rgbPass.uniforms[‘amount’].value = rmnt;
composer.render(0.1); } init();

13 THE FULL EFFECT

A random number is generated that sends random
offsets of the RGB to the shader. All the shaders are
updated and the composer renders the scene to the
display. The very final line calls the init function to
make all the code run. Test this from a server and
Above The position of the camera is changed in order to make it more viewable on the much
you will be able to see the full effect. narrower screens of mobile devices, so that consistency can be maintained across screens

june 2020 69
PROJECTS SVG

A B O U T T HE A U T H O R
SUSH K EL LY
job: Freelance designer
w: www.sushkelly.co.uk
t: @maxray
areas of expertise:
HTML, CSS, SVG

SVG

A QUICKSTART GUIDE
ON HOW TO USE SVG
Sush Kelly reveals how designers and developers can get the most
out of SVGs. He shows you how to export, optimise and add animation

This tutorial is for designers and developers – WHAT IS AN SVG?

whether you create graphics or are given them
to build sites, it pays to know how to optimise them
and add animation where applicable. You don’t need
to know anything about the main graphics programs
such as Illustrator or Sketch, though we will cover
how these programs export SVG.
This tutorial does assume you have a basic
knowledge of HTML/CSS. SVG code is very similar
and so even if you have never looked at the insides of
an SVG, you should be able to follow along.
After completing this tutorial you will know more
about how SVGs work, the best ways to optimise
them and how to add movement to them. This
tutorial is a great starting point to extend your
knowledge in one of the most flexible image formats
currently available.
If you are familiar with building websites then
you will know there are several file types we use
for images. Even if you have never built a site it is
likely that you have encountered GIF (Graphical
Interchange Format), PNG (Portable Network
Graphics) and JPEG (Joint Photographic Experts
Group) files. SVG (Scalable Vector Graphics) is
another form of image but it differs from the rest in
that it is a vector image format rather than bitmap.
SVGs are a really great image format for a
variety of reasons. Because they are vector, they
are naturally scalable: the image you see is made
by plotting points mathematically and thus can
be resized with no loss of quality. They are more
efficient, and if embedded inline reduce HTTP
requests, helping performance. File size is small – it

70 june 2020

really is amazing what you can do with an animated
SVG that you would never think possible for such a
small file size.
Unlike a bitmap image, SVGs are easy to animate.
They have a DOM similar to web pages, the elements
that make up the image can be affected with CSS just
as you would with HTML.
SVGs can be a bit overwhelming if you actually
look at one in a text editor, but once you know what
you are looking at, it is no more confusing than a
simple web page.
But what about browser support? Support for SVG
is great. If you look at the Can I Use site, which is a
great reference, you will see lots and lots of green!
People often worry about older browsers but IE is
covered from version 9, as well as some of the niche
mobile browsers like Opera Mini.
WHAT MAKES UP AN SVG?
As mentioned, an SVG is made up of mathematical
shapes - rectangles, circles, polygons and lines.
They also contain paths, which enable you to draw
irregular shapes. The objects are drawn in the SVG
using maths coordinates on an x and y axis. You will
see that the values for shapes in your SVG will often
use the X / Y / Width / Height format. You view your
canvas through a viewbox, which is like a window
that looks onto the SVG canvas. The viewbox enables
you to hide elements out of view until you find you
need them.
The canvas (SVG tag) can have a width and height
(though this can be set in CSS if preferred) and it also
sets the viewbox window size. Again, note the X, Y,
width and height attributes, in this case start at 0, 0
and 300px wide and 150 high.
Create a new pen and add the SVG wrapper, each
shape can then be placed inside:
<svg id=”Layer_1” data-name=”Layer 1” xmlns=”http://
www.w3.org/2000/svg” viewBox=”0 0 300 150”>
<!-- elements here -->
</svg>
Rectangles are set using x and y to position the top-
left point and then have a width and height attribute.
Like HTML elements, they can have a class and ID.
<rect id=”square” x=”65.5” y=”0.5” width=”40”
height=”40” style=”fill:#eeb003;stroke:#333332;stroke-
miterlimit:10”/>
Circles are plotted from their centre points and so
use cx and cy (centre x, centre y) to set the point and
then a r (radius).
SVG
<circle id=”circle” cx=”20.5” cy=”20.5” r=”20” style=”fill:#e
eb003;stroke:#333332;stroke-miterlimit:10”/>
Polygons look more confusing, but are just a set of
points separated by a comma – x,y x,y and so on. A
polygon always assumes the last point will join to
the first point.
<polygon id=”polygon” points=”170.05 0.5 146.95
0.5 135.41 20.5 146.95 40.5 170.05 40.5 181.59 20.5
170.05 0.5” style=”fill:#eeb003;stroke:#333332;stroke-
miterlimit:10”/>
Lines have four values: x1, y1 and x2, y2. Similar to
the other shapes, we are just doing dot to dot.
<line id=”line” x1=”197.49” y1=”0.5” x2=”229.51” y2=”40.5”
style=”fill:none;stroke:#333332;stroke-miterlimit:10”/>
“An SVG is made up of
mathematical shapes –
rectangles, circles,
polygons and lines. They
also contain paths”
Paths are similar to polygons, the main difference
is they use a d (draw) property and then use an M
(move) before the path points. The end of a path
shows a z if it joins up to make a shape.
<path id=”path” d=”M33.21,74.71s19-
18.77,42.34-15.39S92.9,76.21,113.92,74.7
1s31.91-.67,49.18-7.84,28.16-13.25,38.67-
8,13.51,6.27,7.13,15.91-11.26,14.9-19.9,10-17.64-10.51-
8.25-16.51,15.76-5.26,18.77-2.26.37,14.64-4.88,11.64-
4.49-3.56-3-5.91” transform=”translate(-10.05 -8.4)” styl
e=”fill:#fff;stroke:#000;stroke-miterlimit:10”/>
EXPORTING FROM GRAPHICS PACKAGES
Let’s have a quick look at how we might export our
artwork from the main graphics packages.
Top CanIUse.com shows how comprehensive browser support for SVG images is
june 2020 71
PROJECTS SVG

Illustrator }
If you are using Illustrator, there are two ways to }
save your file as an SVG. The simplest option is to
choose File > Save As and select SVG. If you look at Here we are creating an animation called “fadeIn”
the code this creates, you will see it has some extra and telling the animation to go from opacity 0
information in there that we won’t actually need. to opacity 100%. We set how long we want the
You can also choose File > Export As and pick SVG. animation to last in addition to other settings on the
You can tweak your options here to choose inline element itself.
styles rather than using CSS. If you study the SVG Now we will add some styles to our box to make
(once you understand its workings) you will notice use of this animation:
that it maybe isn’t optimised quite how we would
want for web use. #square {
opacity: 0;
Sketch animation-fill-mode: forwards;
Sadly Sketch isn’t so good for exporting – you just animation-duration: 2s;
export your assets and choose SVG as an option. animation-timing-function: ease-in;
As with a standard Illustrator save, there is extra animation-name: fadeIn;
information and not the best optimisation. }

INTRODUCE ANIMATION
One of the really fun parts about an SVG file is that
you can animate it and make it interactive. For the
purposes of this tutorial, we are looking at how
you use CSS to animate your SVG, although there
are some amazing libraries out there, GreenSock
being probably the most well known for complex
animations and effects.
We should take performance into account. There
are four things that browsers can animate easily:
Opacity, Scale, Rotation and Position. That’s not to
say you cannot animate other properties, but they
will cause repaints of the browser, which will mean
jerky ugly animations.
CREATE ANIMATION
To fade an element within your SVG, we will use
keyframe animation in CSS. Let’s create the
animation first:
@keyframes fadeIn {
from {
opacity: 0;
} Now that we know the basics of creating an
to {
opacity: 1;
“There are four things
that browsers can
animate easily: Opacity,
Scale, Rotation
and Position”
We set the opacity to 0, then we set the animation-
fill-mode to forwards. This is a ‘gotcha’ that
sometimes catches you out, as otherwise at the end
of the animation your element will return to its
starting point. Set the animation-duration, then
choose an easing style with the animation-timing-
function. Most importantly, the animation-name is
needed of course! Check the codepen so see in action
https://codepen.io/maxray/pen/XWbBYzb
POSITION MOVE THINGS
FROM HERE TO THERE
animation and then using it on an element, let’s
move something left to right. We will create a new
animation called moveAcross.

@keyframes moveAcross {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
Above
Sketch has limited export options when using SVG and doesn’t offer great optimisation
}

72 june 2020
 SVG

#circle {
animation-fill-mode: forwards;
IN-DEPTH
animation-duration: 2s;

ADD REALISM TO
animation-timing-function: ease-in;
animation-name: moveAcross;
}

We use transform to animate and in this case tell

the element to start at 0px and finish at 200px. It
ANIMATION WITH EASING
is better to animate an element’s position like this
than animating margins or padding. We are using
the same duration, ease and the fill mode as before.
Check the codepen so see in action https://codepen.io/
maxray/pen/NWqBBqQ

MAKE ELEMENTS BIGGER AND SMALLER

When you are building your keyframe animations
you can set as many steps as you want, in this case
we have four, each set as a percentage from 0 to 100.

@keyframes smallBig {
0% { If you look at any moving object in real life, you’ll notice it
transform: scale(1); doesn’t move at a constant speed. A ball will accelerate as it
} falls to the floor, slowing as it compresses and then speeding up as
25% { it rises into the air again.
transform: scale(1.5); We can use easing functions in our animations to add realism.
} We tend to use ease, ease-in, and ease-out but you can make
50% { custom cubic-bezier eases, too.
transform: scale(.5); When you use ease-out, you will be starting fast and ending
} slow. Generally this works well when something is moving in.
75% { Ease-in acts in the opposite way, starting slow and finishing fast,
transform: scale(1.5); which is good for objects moving away.
} You can use cubic-beziers in easing too. You may have heard of
100% { the Bézier tool (Pen tool) in Illustrator. This is the same idea, using
transform: scale(1); control points to create a curve. Visit cubic-bezier.com, which is a
}} brilliant visual resource for creating custom eases that you can
#circle { then save out!
animation-fill-mode: forwards;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-name: smallBig;
}

We are letting this animate repeat forever – this is

achieved by using the infinite setting for the amount
of iterations:

animation-iteration-count: infinite;
See in action https://codepen.io/maxray/pen/YzXOQRd

ROTATION AND GROUPED TRANSFORMS

When adding a rotation, you may need to set the
transform origin so that your item spins as you Top
expect. This is actually the point within the SVG Using the Export As route enables us to specify inline styles

june 2020 73
PROJECTS SVG

you would like the element to spin around. You can

RESOURCES also add multiple transforms together (in this case
moving and rotating) by joining them together.

TAKING THINGS FURTHER @keyframes moveAcross {

from {
transform: translateX(0) rotate(0);
opacity:0;
}
to {
transform: translateX(-200px) rotate(360deg);
opacity:1;
}
}
#polygon {
animation-fill-mode: forwards;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-name: moveAcross;
transform-origin:158.5px 22.5px;
}
SVGOMG See in action https://codepen.io/maxray/pen/dyojjXe
https://jakearchibald.github.io/svgomg
This tool, built by Jake Archibald, is a real must-have for your ANIMATING PATHS
optimising arsenal for SVGs. It can remove unneeded tags and A great trick with paths is to use stroke-dashoffset
minimise code without affecting the visual appearance of the SVG. to make a line animate. Basically, you create a dash
You can upload your source image or just paste in the markup if that is longer than your whole path and then animate
you are using your SVGs inline. the dashoffset. This gives you an animating line!

Accessibility and SVGs svg {

https://simplyaccessible.com/article/7-solutions-svgs width:50%;
SVGs have a DOM similar to HTML and can be embedded in your height:auto;
pages in a variety of ways. As such there is quite a lot to take into }
account regarding accessibility. @keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#path {
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation: dash 15s linear forwards;
}
See in action https://codepen.io/maxray/pen/vYOVxpo

WHERE DO YOU GO FROM HERE?

SVG Path Builder
https://codepen.io/anthonydugois/pen/mewdyZ
This path builder pen by Anthony Dugois is great fun to use and
more importantly, is an excellent way to see how SVG paths
are constructed. You can drag your points around and play with
altering the parameters, all the while being able to see the actual
path code, too.
Hopefully you can now see how useful SVGs can be.
They offer the potential to create animations for
button effects, interactive graphs, charts and all
sorts of other applications. The principles in this
tutorial are just the beginning – once you have
mastered these you can add JavaScript to create
interactivity be it through data sources or user input.
There are JavaScript libraries, such as GreenSock,
that will supercharge your next project!

74 june 2020
 The number one destination
for web design news,
views and how-tos
Get Creative
Bloq direct to
your inbox with
our weekly
web design
newsletter

Graphic design Art Web design 3D Digital art

www.creativebloq.com

PROJECTS Sapper and Svelte
A B O U T T HE A U T H O R
MAT T CROUCH
w: www.mattcrouch.net
t: @mattcrouchuk
job: Front-end
software engineer
areas of expertise:
HTML, JavaScript, React
SAPPER AND SVELTE
USE SAPPER AND SVELTE
TO BUILD A FAST SITE
Discover how to take a minimalist framework and combine it
with server rendering to create a lightning fast reactive website
Frameworks such as React, Angular or Vue have
become the new normal for front-end
development. By breaking parts of a website into
components, we can more easily control how a
website looks and operates, while at the same time
making great experiences for the end user.
This approach is not without its flaws, though.
Speed is a big issue, with large JavaScript bundles
slowing down their delivery. Techniques such as
code splitting and server rendering go part way
towards solving the issue, but this can be tricky to
set up and it can end up having a worse impact if it’s
not maintained.
Svelte is a framework with a difference. It
analyses the code at compile time and creates a
set of modules in vanilla JavaScript, which avoids
the need for a runtime. Components are written in
single files, which keeps everything together in a
neat little package. Sapper is a framework built on
top of Svelte. It focuses on speed out of the box with
76 june 2020
View source
files here!
All the files you need for this
tutorial can be found at
https://github.com/netmagUK/
Tutorials
server rendering, link preloading and the ability to
create service workers all done for us. Combined
with Svelte, the end result is a highly customisable,
lightning fast site with a small footprint.
In this tutorial, we will be using Sapper to build
a blogging site using Svelte components. As Sapper
itself is still in development, its features may change
before its first official release. Still, the approach we
take here is a solid foundation for the future.
1 INSTALL DEPENDENCIES
Firstly, we need to download and install
dependencies. It relies on Svelte to work and requires
another framework to build the server, but the rest
depends on the application being built. In this case,
we need a few packages to help extract Markdown
files later on. Download the tutorial files, find them
on the command line and install the dependencies.
> npm install

2 BUILD OUT SERVER
Sapper is built in two parts – the client-side
framework and the server-side rendering of that
framework. This helps get that extra speed boost
for those on slower networks. It is built using Node,
which enables the Sapper middleware to do all the
heavy lifting for us.
Open server.js and create the server with Express.
Using the recommendations, we include “compression”
to shrink the files we send in addition to “sirv” to
serve static files.
express()
.use(
compression({ threshold: 0 }),
sirv(“static”, { dev }),
sapper.middleware() )
.listen(PORT);
3 MOUNT THE APPLICATION
On the client side, we need to tell Sapper where to
mount the application. This is similar to React DOM’s
“render” or Vue’s “$mount” methods.
Inside client.js, start Sapper and mount it to the
root <div> element. That element is included in the
template file, which we will come to later on.
import * as sapper from “@sapper/app”;
sapper.start({
target: document.getElementById(
“root”)
} );
4 START THE DEVELOPMENT SERVER
With the basic server and client files set up, we can
start the development server. This kicks off a build
of the server, client and service worker files, and it
will start up on port 3000 by default. Whenever a file
changes, it will rebuild the part of the application
that changed. Run the server on the command line.
Keep this window open while developing the site.
> npm run dev
5 SET UP A SERVER ROUTE
Anything inside the “routes” directory will turn into a
route for the application. Files with the “.js” extension
will become what are called “server routes”. These
routes have no UI, but instead are requested by the
application to fetch data. In our case, we will use
them to load up blog posts.
The routes/blog/index.json.js file will create the
“/blog.json” endpoint on our server. Import the blog
posts and create some JSON from them.
Sapper and Svelte
6 RETURN THE BLOG POSTS
Server routes export functions that correspond
with HTTP methods. For example, to respond to a
GET request, we would export a function called “get”
from the server route file. Create a “get” function
that responds with the data that we collected in
the previous step in a JSON format. Open http://
localhost:3000/blog.json in the browser and check the
posts are coming through.
7 CREATE INDEX PAGE
Pages in Sapper are regular Svelte components. Each
component is a single file with a “.svelte” extension,
and contain all the logic and styling for managing
itself. Any JavaScript this component needs to run
will live inside a <script> tag – just like any HTML
page. Inside routes/index.svelte, import a couple of
other Svelte components that we can use to build this
page. Export a “posts” variable that we will go on to
populate later.
8 FETCH BLOG POST DATA
With the page set up, we can start bringing in blog
posts. We need to do this as soon as the page is
loaded. In order for the server to be aware of this and
then request this data when it renders the page, it
needs to go in a separate <script context=”module”> tag.
On the server, Sapper will look for a “preload”
function, and wait for it to complete before showing
the page. Here, we are populating the “posts” variable
from the previous step.
<script context=”module”>
export async function preload() {
const res = await
this.fetch(“blog.json”);
const data = await res.json();
return { posts: data };
}
</script>
9 DISPLAY POST SUMMARIES
In Svelte, variables are reactive by default. This
means that, as they update, our components will also
update. As the “posts” variable now holds an array of
blog posts, we can loop over these and display them.
We can do this using an “#each” block. These will
repeat what is inside the brackets for each item in
an array. At the bottom of the component, outside of
any tags, add the HTML to display the posts.
<Container>
<ul>
{#each posts as post}
june 2020 77
PROJECTS Sapper and Svelte
IN-DEPTH
DEPLOYING TO
STATIC HOSTS
Sapper has the added ability of being able to generate a
static site without any extra development effort. This means
it can be hosted anywhere that hosts static files, such as GitHub
Pages, Netlify or Amazon S3. It can be cheaper and faster if the
site’s content rarely changes because it can be cached on servers
around the world.
Running “sapper export” will build the site. Once complete, it
then hosts it on its own server and starts to crawl the site, clicking
on any links it finds. Every page it visits it will save and create its
own HTML file.
Of course, not every site is a candidate for static rendering. If
it requires authentication, or has lots of content that frequently
changes, a server-backed approach is the one that will achieve the
fastest result.
Above: Starting the development server will kick off a build of the server, client and
service worker files
78 june 2020
<li>
<PostSummary {...post} />
</li>
{/each}
</ul>
</Container>
10 STYLE THE CONTAINER
We can use components to contain any repeated
logic and use them wherever they are needed –
styles included. The <Container> component currently
does not do anything, but we can use it to give a
maximum width to the content inside it.
Open up components/Container.svelte, and add
some styles inside a <style> tag. Any styles that
we apply inside a component are scoped to that
particular component, which means that we can use
a generic selector.
11 DEFINE A <SLOT>
If a component is designed to be the parent to
other components, we need a way to pass those
components through. The <slot> element does just
that, and can be placed anywhere that makes sense
inside a component’s markup.
With <Container>, we are wrapping the contents
in a styled <div>. Use <slot> inside the <div> to let
everything else through.
12 EXPOSE POSTSUMMARY PROPS
Not every component is going to fetch some
data. As we are loading the posts from the main
page component, it can be passed through to the
components it renders through its attributes.
Open components/PostSummary.svelte and define
some attributes at the top of the file. These are
getting filled in by the spread operator that we added
in step 9.
13 DISPLAY BLOG POST SUMMARY
When the attributes are populated, they are then
accessed like any other variable. By having separate
attributes for each part of the post summary, we
make the markup easier to read.
At the bottom of the component, add some HTML
to create the summary. The classes relate to the pre-
defined styles.
14 LINK TO BLOG POST
Unlike similar frameworks such as Next.js, Sapper
works with regular anchor links. At build time, it
is able to detect internal links, and also to make its
own optimisations.
Update the markup from the previous step by
wrapping it in a link. There is no need for you to
 Sapper and Svelte

create template strings in order to compose the {post.author.name}</div>

slugged URL. </div>
<img class=”post-image”
<a rel=”prefetch” href=”/blog/{slug}”> src={post.image} alt=”” />
<article>…</article> {post.html}
</a> </Container>
</article>
15 FETCH A POST BY SLUG
Sapper is able to create pages based on URL 18 DISPLAY HTML INSTEAD
parameters. In our case, we link to “/blog/slug”, which Looking at the page now, everything displays
means that it renders the component at “/routes/blog/ correctly apart from the actual post content.
[slug].svelte”. The markdown conversion generates HTML, but we
Inside that component, fetch the blog data like we see that printed as text on the post itself. Sapper has
did for the index page. The “params” object contains an HTML parser built in for this case. Placing “@html”
the parameters from the URL, which in this case is in front of it will use this parser.
the slug.
{@html post.html}
<script context=”module”>
export async function 19 SET PAGE <TITLE> VALUE
preload({ params }) { Our blog functions correctly, but there are a couple
const res = await this.fetch( of changes needed to finish it. One of those is to
`blog/${params.slug}.json`); update the <title> on the page to relabel the tab that
const data = await res.json(); it’s displayed in.
} </script> Svelte supports a <svelte:head> element, which
injects anything inside of it into the <head> of the
16 ERROR IF POST IS NOT FOUND page. Use this to set the title of the post as <title>.
Unlike the index page, there is a chance there isn’t a
blog post at the URL. In that case, we should display <svelte:head>
an error. Along with “fetch”, the “preload” method also <title>{post.title} |
includes “error” that changes the response to an error Sapper Blog</title>
page instead. </svelte:head>
At the end of the preload method, show an error
if there is no post found. Otherwise, set the “post” 20 UPDATING THE <TITLE>
variable for the page. Every page goes through a template in order to stamp
out the HTML for the rest of the page. This is where
if (res.status === 200) { any setup such as font imports and meta tags would
return { post: data }; be entered.
} else { Open up template.html, and add in a hook for
this.error(res.status, the contents of the <svelte:head> element from the
data.message); previous step. Add this in just before the closing </
} head> tag.

17 SHOW THE BLOG POST <head>

With the data fetched, we can now show the post on […]
the page. Similar to the PostSummary component, %sapper.head%
we will display each part of the post’s content inside </head>
curly brackets.
At the bottom of the component, add some markup 21 ADD PERMANENT HEADER
to display on the page. The final thing we need to add is a layout for the
blog. Instead of wrapping each page in a component,
<article> Sapper will look for a “_layout.svelte” file to take care
<Container> of this job for us.
<div class=”title”> Inside _layout.svelte, import the <Header>
<h1>{post.title}</h1> component and show that at the top of every page. It
<div class=”byline”>by provides a convenient link back to the homepage.

june 2020 79
HOSTING PARTNERS
CONTACT US To advertise here, contact our sales team: +44 01225 687 311 george.lucas@futurenet.com
Key hosting
directory

FEATURED HOST

Netcetera provides hosting Offering reliable website

from one of the most energy-
efficient datacentres in Europe,
all powered by green energy.
It offers everything from reliable
low-cost hosting for a single site
right through to complex cloud
racks and managed IT solutions.
One of its most popular products
is its Managed Cloud, designed
to help SMBs get the most from
their website, on their own cloud
server. Server monitoring comes
as standard for Netcetera’s Cloud
and Dedicated server clients
– something it believes should
be included in the price of the
hosting it provides.
hosting, dedicated servers,
co-location and cloud solutions,
Netcetera has a large portfolio
of green, zero-carbon solutions
for businesses of all sizes.
Customers can choose from its
fully managed cloud servers,
Linux and Windows for SMBs
and a fully managed cloud
solution for WordPress websites
to help them utilise cloud
technology without any hassle.
And with server monitoring as
standard and a full migration
service available, Netcetera
has made the switch to better
hosting really easy.

“We have several servers from Netcetera
and the network connectivity is top-notch
– great uptime and speed is never an issue.
We would highly recommend Netcetera”
Suzy Bean
EXPERT TIP
CONTACT
03330 439780 / SALES@NETCETERA.CO.UK
WWW.NETCETERA.CO.UK
WHAT NETCETERA OFFERS
Managed hosting: a full range of solutions for
a cost-effective, reliable, secure host.

CLOUD TECH TIP...
If you’re going to fully utilise cloud technology,
before deciding on a service provider ask whether
monitoring comes as standard and whether
management is included in the price. A fully
underutilised cloud will be a waste of money.
Dedicated servers: single server through to a full rack,
with free setup and generous bandwidth.
Cloud hosting: Linux, Windows, hybrid and private cloud
solutions with support and scalability features.
Data centre co-location: from quad-core up to smart servers
with quick set up and all fully customisable.

1&1 INTERNET
1&1 Internet is a leading hosting provider that enables
businesses, developers and IT professionals to succeed online.
With a comprehensive range of high-performance and affordable
internet products, 1&1 offers everything from simple domain
registration to advanced ecommerce packages.
0333 336 5509
WWW.1AND1.CO.UK
CATALYST2
As one of the UK’s most experienced hosting companies,
Catalyst2 has built a stable, reliable and well-supported
hosting platform for organisations across the UK. Catalyst2
specialises in very high-availability hosting and exceptional
customer support. Contact the team today for a quote.
0800 107 7979
SALES@CATALYST2.COM
HEART INTERNET
As one of the UK’s leading web hosting authorities, Heart
Internet focuses on designers, developers and technically-
adept businesses. It builds on its four tenets – speed, reliability,
support and security – to create award-winning solutions for over
500,000 customers.
+44 (0) 330 660 0255
WWW.HEARTINTERNET.UK
Advertisement
THENAMES
TheNames.co.uk offers great value cPanel web hosting, SSL
certificates, business email, WordPress hosting, Cloud, VPS
and dedicated servers. Part of a hosting brand that started in
1999, it is well established, UK based, independent and its mission
is simple: ensuring your web presence “just works”.
0370 321 2027
WWW.THENAMES.CO.UK
BLACKNIGHT
Blacknight is the leading Irish web hosting company and domain
name registrar, providing innovative solutions to more than
84,000 customers in 130 countries, with dedicated servers and
colocation, a comprehensive range of web hosting plans, domain
registration, email and productivity tools. ISO 27001 certified.
+353 59 9183072
WWW.BLACKNIGHT.COM
ADVERTISE HERE!
Would you like to promote your hosting business
and services to our audience of professional web
designers and developers? If so, please call or email
George as below.
REASONS TO ADVERTISE
Reach professionals: 75% of readers are working in or seeking
work in the web industry
Variety of projects: future projects include mobile apps,
web apps and CMS-driven sites
Home workers: 51% have a personal website
under development
CONTACT
+44 01225 687 311 / GEORGE.LUCAS@FUTURENET.COM
 NEXT
MONTH

STATE-OF-THE-ART
JAVASCRIPT
Discover the new APIs that can be tried today, what’s
new in React/Vue/Angular and the best dev tools

PLUS
Create a voice- Build responsive Use Protopie to
powered navigation layouts with CSS Grid create interactive
system and Flexbox prototypes

ISSUE 333 ON SALE 14 MAY

PRINT EDITION, BACK ISSUES AND SPECIAL EDITIONS AVAILABLE AT

myfavouritemagazines.co.uk
DIGITAL EDITIONS AVAILABLE ON ITUNES, GOOGLE PLAY, KINDLE, NOOK AND ZINIO

net.creativebloq.com