net0520

AUTO-ANIMATE IN ADOBE XD Quickly and easily add animation to your prototypes

The voice of web design

Issue 331 : May 2020 : net.creativebloq.com

OPTIMISE WORDPRESS Learn essential techniques for a idvwhu#dqg#pruh#hĿflhqw#lqvwdoo

EYE-CATCHING UX

Introduce animation to content between screens

BROWSER SUPPORT

SECRETS OF CSS FEATURE QUERIES Discover how to use the support detection options baked right into CSS

IS GOOGLE TH E FUTURE FOR BROWSERS?

BUILD AN INTERACTIVE AR ECOMMERCE SITE

IR35 TAX REFORMS: WHAT YOU NEED TO KNOW AND DO

ISSUE 330

Welcome

WELCOME

EDITOR’S NOTE Hello everybody, I’m Steven Jenkins and I’m

ready for today and the future. Meanwhile, Adam

really excited to be taking over the reins of such a prestigious title. I am very much looking forward to

Kuhn takes a look at the support detection options baked into the browser in the shape of CSS Feature

bringing you my 20+ years experience in web design and magazines to give you what you want.

It’s hard to believe that HTML has been around longer than 20 years but 2020 marks the 30th anniversary of HyperText Markup Language. Back in 1990, Tim Berners-Lee started working on the first specification and by 1991 had sorted the specification for the first 18 HTML tags. Things have changed (a lot!) and in our latest lead feature, Matt Crouch takes a look at the hottest tags that you should be using to build standards-friendly sites that will keep you

Queries. Find out what to do if a CSS property is not supported in a specific browser.

Elsewhere, Joe Ford offers up a host of techniques to optimise and speed up your WordPress websites, while Vamsi Batchu gives a quick introduction on how to use the Auto-Animate feature in Adobe XD. Plus, get five quick tips from Merlyn Meredith for making your content accessible to all. Enjoy.

Steven Jenkins, Editor @netmag

FEATURED AUTHORS MAT T CROUCH

ADAM KUHN

JOE FORD

MARK SHUFFLEBOT TOM

Crouch is a front-end software engineer who works with people to make sure that their content is accessible to everyone. On page 58, he takes a closer look at the latest HTML tags you should be using now. w: www.mattcrouch.net

Kuhn is a front-end developer at Kong Inc, frequent CodePen contributor and creative code enthusiast with a passion for animation and pizza. He gives you an insight into CSS Feature Queries and how they work. w: https://codepen.io/cobra_winfrey

Ford is a senior developer at Tillison Consulting and has a passion for PHP, WordPress and Laravel. On page 76, he offers up a host of solutions to optimise and speed up your WordPress-based site. w: https://tillison.co.uk

Shufflebottom is professor of interaction design at Sheridan College. He explores how to make designs transition between screens to create eye-catching UX with the rellax.js library on page 92. w: http://webspaceinvader.com

may 2020 3

@netmag

Future PLC, Richmond House, 33 Richmond Hill, Bournemouth, BH2 6EZ +44 (0)1202 586200

/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, Darryl Bartlett, Mark Shufflebottom, Jo Cole, Matt Crouch, Merlyn Meredith, Joe Ford, Adam Kuhn, Andy Bell, Oliver Lindberg, Greenwood Campbell, James Poyser, Nico Turco, Eric Howard, Lisi Linhart, Christian Heilmann, Shane Mielke, Geri Coady, Harriet Knight, Kym Winters, Vamsi Batchu

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

may 2020

GREAT REASONS TO SUBSCRIBE O

Print edition delivered to your door

O

13 issues in a one-year subscription

O

iPad and iPhone edition download

O

Android edition download

O

Money-back guarantee

CHOOSE A PACKAGE £56.00 – ANNUAL PRINT

SAVE

28

% 12-month subscription (13 Issues)

£66.00 – ANNUAL PRINT + DIGITAL

SAVE

60

% 12-month subscription (13 Issues)

TERMS AND CONDITIONS: This offer is available to all new subscribers. Double up saving will be automatically applied at checkout. Subscriber will need to add both net and Computer Arts print + digital bundles to the basket separately for offer to apply. Prices and savings quoted are compared to buying fullpriced print and premium subscriptions. You will receive 13 issues per subscription. You can write to us or call us to cancel your subscription within 14 days of purchase. Payment is non-refundable after the 14-day cancellation period unless exceptional circumstances apply. UK calls will cost the same as other standard fixed line numbers (starting 01 or 02) or are included as part of any inclusive or free minutes allowances (if offered by your phone tariff). For full terms and conditions please visit: www.bit.ly/magterms. Offer ends: 31/05/2020

6

may 2020

£115.00 – NET + COMPUTER ARTS ANNUAL PRINT + DIGITAL PACKAGE

SAVE

67

%

myfavouritemagazines.co.uk/net/dbundle Available to EU, US & ROW subscribers INSTRUCTIONS

1

Add Computer Arts bundle to basket

2

Go back

3

Add net bundle to basket

4

Checkout

Applies to print and digital bundles only may 2020 7

Issue 331: May 2020 : net.creativebloq.com

FEED

FEED

SIDE PROJECT

14

CLIENTS FROM HELL

15

BEYOND PIXELS

16

Geri Coady talks about designing and making merch for Japan fans

WORKSPACE

17

Adam Greenwood gives you a quick tour of Greenwood Campbell’s voice-activated office and introduces Ralph, head of security

The latest in our series of nightmare clients

Eric Howard tells us how he cultivates his own lush green food forest away from work

VOICES THE IMPACT OF IR35 REFORMS 18

ESSAY

20

MAKING YOUR WEB CONTENT ACCESSIBLE

32

Beyond Tellerrand Berlin 2018, photograph by Stefan Nitzsche

IR35 changes are coming. Jack Poyser highlights what you need to know and do

Nico Turco examines the state of play for browsers and how Google fits in

Merlyn Meredith outlines five top tips for ensuring content is accessible for all

Q&A

33

BIG QUESTION

34

Meet Andy Bell, who is helping the community with an array of side projects

Our experts reveal what they do when they are stuck in a creative slump

VOICES

INTERVIEW

26

Chen Hui Jing reveals how basketball got her into web development and how she discovered her love for CSS

SUBSCRIBE TO NET AND TAKE ADVANTAGE OF THE PRINT AND DIGITAL BUNDLE

8

may 2020

TURN TO PAGE 6

to find out more about the savings on offer for subscribers

Contents REGULAR

GALLERY

38

Mark Billen runs down this month’s best sites, including Turn of the Screw, a site that looks to bring opera to a younger audience with its immersive 3D trailer

REGULARS EXCHANGE

Christian Heilmann and Shane Mielke share expert advice and tips

10

SHOWCASE DESIGN EXHIBIT

45

PROFILE

46

HOW WE BUILT

52

Find out how you can get your design concepts and prototypes in the mag Superhero Cheesecake tells us how it creates amazing interactive experiences

Jam3 reveals how it took us to the future with its adidas Ozweego 2048 site

FEATURES HOT NEW HTML TAGS

58

Matt Crouch looks at the latest HTML elements and reveals how they should be used to build future-friendly sites

HOW CSS FEATURE QUERIES WORK 68

Adam Kuhn shows how to use the support detection options baked right into CSS

PROJECTS BUILD AN INTERACTIVE AR ECOMMERCE SITE

82

AUTO-ANIMATE IN ADOBE XD

86

ANIMATE TRANSITIONS

92

Darryl Bartlett shows how to use 8th Wall and A-Frame to build a simple AR scene Vamsi Batchu explains how to create simple animations for prototypes

PROJECT

OPTIMISE AND SPEED UP WORDPRESS WEBSITES 76

WordPress isn’t known for its breakneck speed but in this tutorial, Joe Ford shows how to bring it up to scratch with a few changes and tweaks

Mark Shufflebottom explores how to make your designs transition between screens to create eye-catching user experiences

may 2020 9

Send your questions to netmag@futurenet.com THIS MONTH FEATURING...

CHRISTIAN HEILMANN A developer evangelist, presenter and JavaScript lover living and working in Berlin, Christian is principal program manager for browser tools at Microsoft. w: christianheilmann.com t: @codepo8

SHANE MIELKE Shane is a freelance creative director, designer and front-end developer. His handbook for digital creatives, Launch It, is available now. w: www.shanemielke.com t: @shanemielke

QUESTION OF THE MONTH

How do you decide whether to become a generalist a specialist, or somewhere between the two?

Fern Wicks, Southampton, UK

SM: Specialising and focusing on specific project types, skills and tools in a quest for mastery is a great strategy for many people. But I believe that everyone who does choose to specialise should frame that focus relative to what will ultimately be the duration of their careers.

Everyone needs a valid skill, style or knowledge of a tool to get their first job. We all have to start somewhere.

But as time goes by, our interests change with our lives and many yearn to explore new styles as they become popular. Often the industry also changes in uncontrollable ways, forcing us to learn new skills or tools outside of our comfort zones to stay relevant. Over a 20+ year career, this means that many specialists will choose to grow or be forced to upgrade or change skills, tools and styles to become a multi-talented generalist.

So you can have a fun and amazing career as a specialist, generalist or Shane Mielke’s book Launch It compiles 300 lessons he’s learned as a designer, developer and creative director both if you’re in it for the long game.

EDGE DEVTOOLS Are Microsoft Edge’s DevTools the same as Chrome’s since Microsoft decided to give up trying to be relevant with its own browser engine?

Jeremiah Lee, Stockholm, Sweden

CH: They are based on the developer tools of the Chromium open-source project, but they aren’t the same as Chrome’s. Any browser based on

10

may 2020

Practical advice from industry experts

Fkurplxp#dggv#wkhlu#rzq#ľdyrxu#ri# developer tools on the core tools and not all of them get contributed back.

At Edge, our focus is accessibility and making the developer tools integrate smoothly into a larger developer story.

We are also looking into making the developer tools easier to use by running xvhu#whvwv#rq#wkhp#dqg#Ľqglqj#rxw# where people get stuck. It is exciting to

Q&As

3 SIMPLE STEPS Can you tell me what accessibility tools are in Edge DevTools?

Simon Minter, Oxford, UK

Chromium features CH: Now Edge is built on Chromium, its DevTools offer familiar Chromium

features for assessing accessibility, such as the Accessibility pane and the Audits tab.

Webhint extension

The latest version of Edge is based on Chromium, but that doesn’t mean the developer tools are the same as Chrome

see how we can make the complexity of developer tools go away and get developers to use parts of them they didn’t even know about as they were kdug#wr#Ľqg1# As to the fact that we moved to the Chromium project instead of maintaining our own engine, this was a pragmatic decision. We realised that developers favoured Chromium over rwkhu#rļhulqjv#dqg#zh#vdz#lw#dv#dq# opportunity to improve this open-source project by adding our resources to it.

That way we improve the experience of all projects based on Chromium, which are browsers, but also the node infrastructure or Electron-based apps.

FORGING A CAREER How can you reach out to companies that interest you, even if they have no job openings on their web page?

María José Gaete Cerda, via email

SM: If you’re a design student, companies like Blizzard Entertainment hold Student Art Contests throughout the year (https://careers.blizzard.com/ en-us/students/contests) and portfolio reviews at events like BlizzCon. These are great opportunities for students to gain experience and is the primary way

that companies like Blizzard recruit future employees.

For the rest of us, whether you’re a designer or a developer, it’s important to have the following three things: 1) Actually have your work posted online. Whether you’re a designer with a personal portfolio or a developer with experiments posted on CodePen, street credibility is real and it starts here.

2) Have a skill or design style that the company already has employees for.

3) Most importantly, be really good.

If you check all three of these boxes and there’s no job posting, I recommend reaching out for advice from people who already work at the company you’re interested in on places like Twitter. If you’re polite and sincere, they should let you know what you’re missing. If your work is good enough, you might just vwduw#d#iulhqgvkls#wkdw#ohdgv#wr#Ľqglqj# out about upcoming job openings.

Finally, remember that you just might not be ready for some jobs, or the timing may not be right. Early in my career, I applied to places like Oakley and Blizzard multiple times and never got a response back. But years later I scored surmhfwv#dqg#mre#rļhuv#zlwk#erwk#ri#wkrvh# companies. So don’t give up hope.

The Edge DevTools team has also been

a major contributor to webhint, an open-source project that offers devs customisable hints for improving accessibility (and other key areas in web development). Webhint is available as a VS Code extension, a browser extension and a CLI tool, so you can get key accessibility insights during development, debugging and deployment.

Screen readers

The Edge DevTools team has also contributed more than 100 changes back into Chromium to improve the accessibility of the DevTools themselves. Now, developers using the DevTools without a mouse or with assistive technologies such as screen readers, can more efficiently navigate through DevTools. The PM on that project is Rachel Simone Weil, aka @ partytimeHXLNT on Twitter.

may 2020 11

Network

THE POLL

COOL STUFF

WHICH CMS DO YOU PREFER?

WE LEARNED THIS MONTH DON’T TELL ME YOU MISS ME: 3 BETTER APPROACHES TO USER RETENTION

Magnolia 3.33%

Statamic 3.33

Grav 3.33%

Few things are more off-putting than the

reek of desperation. But if your site is running a

retention campaign, that’s how you might be coming

ProcessWire 3.33%

Prismic 6.67%

across. To stop putting people off, this article

Textpattern 6.67%

inviting back former visitors. https://netm.ag/2SD8tM5

Kirby 6.67%

outlines three strategies for

FREE FONT DESIGNED TO MAKE IT EASIER FOR DEVS TO READ CODE

Scrawling through lines of code can be a taxing process, but the process can be made easier with a developer-friendly font. And few come more friendly than JetBrains Mono, a free font designed for straightforward parsing.

It even includes a bunch of multilingual options. https://netm.ag/37HbaAH DIGITAL TRENDS 2020: EVERY STAT YOU NEED TO KNOW ABOUT THE INTERNET

Want to know how people are using the internet to help inform your next web design project?

This digital overview uses information from data partners to create a detailed summary of how people around the world use the internet, devices, social media and ecommerce. https://netm.ag/2wmFCTx

12

may 2020

ExpressionEngine 3.33% Umbraco 3.33% Wagtail 3.33%

TYPO3 6.67%

WordPress 26.67%

Joomla!

6.67% Drupal 6.67%

Craft 9.99%

From our timeline

What do you think is the most annoying web design misconception?

That following grids, trends, or using templates is always a bad idea. Know your audience and understand your business maturity. You’d be surprised at how much you overcomplicate things for no reason. @iamlucid Designers that know a little about the web and expect things to be changed quickly just because they change their mind. @jordanairwave

The single page continuous scroll page.

Some person thought that it was a good idea to make things appear and disappear from the DOM depending on your scroll position. Also, fooling people that a page has a certain dimension and then keep adding to it. @Siderite [That] everything .should be reachable in three clicks. @daaazzle

That ‘number of pages’ has any relationship to a web project’s scope, complexity or cost. @blucube “It needs to be above the fold” @stevekreeger That because something already exists on a website, it’ll be easy to do on another one. @simonminter Either the idea that pixel perfection exists or that the design only needs to work on one browser. @frontendben

People, projects & paraphernalia

THIS MONTH FEATURING...

SIDE PROJECT

14

BEYOND PIXELS

16

Geri Coady talks about designing, illustrating and making merch for Japan fans

Eric Howard tells us how he cultivates his own lush green food forest away from work

CLIENTS FROM HELL

15

WORKSPACE

17

This month, one designer has to work with a liaison who didn’t know you could view websites on a phone

Adam Greenwood gives you a quick tour of Greenwood Campbell’s voice-activated office

may 2020 13

FEED Side project

GERI DRAWS JAPAN

Designer Geri Coady talks about her side project designing and making merch for Japan fans.

SIDE PROJECT OF THE MONTH

IN FO

GERI COADY Geri Coady is a UK-based illustrator and designer who has worked with clients such as A List Apart, Nokia Withings, Simply Accessible, and Asana. Her book, Color Accessibility Workflows, is published by A Book Apart. w: GeriDrawsJapan.com Insta: GeriDrawsJapan

14

may 2020

Tell us what your side project does.

My side project is something that is quite different from my daily job of design and illustration.

In essence, it’s a dual-purpose travel and language blog as well as an online shop where I sell my Japanrelated art prints and goods to like-minded fans worldwide.

Why did you create it?

As much as I love design, I’ve always wanted to create more physical products. There’s nothing quite like the feeling of holding a real, finished item in your hands that started as an idea in your head. While it’s fun to launch a website or see your illustration in an article, the satisfaction isn’t quite the same. It was only a matter of time before I started designing products that expressed my love for Japanese culture.

What were you hoping to achieve?

I wanted to share my love for all things Japanese with other people around the world. Most of my customers are people who’ve visited Japan or lived in Japan, and want to decorate their homes with art that reminds them of their travels. My secondary goal was to have a place where I could write about my own journey to learn Japanese, in Japanese—something that isn’t

quite appropriate for my personal blog which I prefer to keep in English.

What technologies were used in building it?

I didn’t want to invest a lot of time and effort into reinventing the wheel—I just wanted something that worked out of the box so I could immediately focus my attention into building my brand. My site runs on Squarespace, which I find offers a good balance between blog and e-commerce functionality—both of which are of equal importance for my side project.

How has it been received?

July 2020 will mark my third anniversary of launching Geri Draws Japan, and it’s been a big success. I’ve got customers in over 30 countries and steadily increasing sales. My project helped me win a trip to Japan back in 2016, where I got to film for a TV show exploring the ‘okonomiyaki’ food culture of Osaka and Hiroshima.

Most recently, my project helped me secure an artist residency in Japan that I completed in September 2019. For three weeks, I lived and worked in a renovated rice shop, creating a new solo illustration exhibition that I then held in the space’s downstairs gallery. Needless to say, I never expected my project to open so many new doors!

What do you think you’ll do next with it?

I have plenty of new products and ideas for 2020—but that’s one of the hardest things—finding time to make everything! I’m interested in exploring more language-learning products, as I love helping people learn Japanese. I’m also aiming to get my products stocked in more physical shops worldwide.

Feed

YEARS IN THE MAKING Exclusively for net: The latest in a series of anonymous accounts of nightmare clients

Illustration: Harriet Knight

CLIENTS FROM HELL I worked for a design agency about ten years ago. My predecessor built two complete websites for a client – neither of which had gone into use or were ever paid for – but the client was a big shot in the industry and got away with it.

I changed jobs to another agency, which got a call to build a website for this same client. I told my boss about the two websites that never saw the light of day at my previous employer and warned her to get paid upfront.

I went to the client’s offices to discuss the brief – it would be a rather large undertaking.

Client: Don’t worry about the content. I’ve actually already collated all the content into a mock website to give you an indication of what you’re looking for.

At this point, he showed me a demo model of one of the sites that were built at my previous boss’s agency!

Me: (feigning ignorance) Wow. Did you put that together yourself?

Client: (beaming with pride) Yes.

The client tells me he is assigning a liaison to work with me and this liaison will be providing the rest of the content to complete the site. The liaison turns out to be an ancient mechanical engineer with almost zero computer skills. He did not understand that he could minimise windows on his laptop and when he typed a URL into the browser, he didn’t understand that he could just hit Enter on the auto-completion, but laboriously typed out the entire URL with one finger. So our meetings to discuss the site were soulcrushingly frustrating. He insisted on printing out every page of the website to indicate where changes were to be made. After every meeting, I left with a stack of paper 50 pages or more deep, printed in colour, where he had indicated sometimes nothing, sometimes a full stop to be added to a sentence.

The most painful moment for me was when he was for the millionth time, micro-managing the placement of something on the site, because he wanted something to appear on

his laptop screen just so. Getting a bit exasperated with this man, I told him that yes, I can place that element so that it would display exactly there on his laptop, but he must remember that people are going to be looking at the website on all kinds of devices – from desktops to laptops to tablets to phones – and we have to build the site to accommodate whatever device the site is being viewed on. The man’s brain visibly ground to a halt… his jaw literally fell open… he stared at me in complete silence and astonishment for maybe 20 seconds and then said: “Do you mean to tell me that people are viewing websites on their phones???”.

This was my website liaison. A man that didn’t know websites were being viewed on any device other than a laptop.

However, the site got completed and went live. One page on the site was built to advertise special offers that would change every month. A year later, the client contacts me – they want to change the special offer.

The special offer on the page was still the mockup offer I had made up to fill the space and serve as a template. I suggest some times to meet – the liaison tells me he is going on holiday in three weeks and can’t possibly squeeze in an hour-long meeting before then.

Radio silence for another year. Liaison man contacts me, telling me they want to change the special offer. I say okay, please suggest a time to meet.

Radio silence for another year. Liaison man contacts me and says they have a designer who will take over the website updates. I say great! Please just make sure this person is proficient with WordPress and HTML and I will hand over everything to them.

Radio silence for a year. Last month I get an email – it is liaison man asking for the WordPress logins. His email signature advertises their “new website is now live!”.

Curious, I go to look at it – it’s the same website I had built about three years ago.

I also check the Special Offers page… and it is still the mockup advertising a fake special offer I made three years ago!

clientsfromhell.net

may 2020 15

FEED Beyond pixels

STUFF I LIKE

FOOD FOREST

Eric Howard tells us how he likes to get away from work by cultivating his own lush green food forest BEYOND PIXELS

Lecturer and front-end engineer w: lisilinhart.info

SVGSUS

Svgsus is an incredibly handy

tool for Mac OS X that enables users to search through their locally stored folders of SVG icons and then quickly copy and paste whichever ones they need. This makes the whole process of inlining SVG icons into web projects much easier. http://www.svgs.us

WAVE ACCESSIBILITY TOOL

WAVE is a nifty tool that checks the accessibility of a site. You can install it as a browser plugin and test any site with it. It gives you visual feedback on where your accessibility might go wrong and how to fix it. https://wave.webaim.org

COLOR HUNT

Color Hunt gives you a simple four-colour palette and you can also search for palettes by colour (red, green, blue, etc). I prefer this colour palette site because it’s limited to four colours. The search via colours enables me to quickly find colours that could match my design. https://colorhunt.co

16

may 2020

got tired of buying bagged or bulk soil, so built my own compost bin.

The local farmer’s market has loads of great produce and it’s almost always straight from the farm to the consumer. But! There is nothing like plucking a cherry tomato from the vine, still warm from the sunshine of an early morning and the burst of flavour that it contains.

When you’re in an office for five days a week, sometimes it seems like all the days bleed together. The garden has created a reason for me to watch the weather, to follow the rain, to think about the seasons in a new way.

My garden is still a lot of work (though it’s getting more self-sustainable each year). Even on weekends when I hope to do nothing useful, I find myself picking lettuce or repotting a rescued cactus. It doesn’t feel like work – it’s calming and constantly bearing edible gifts. And of course, a little wood-fired cooking with good friends and all of that wonderful produce never hurt.

PROFILE

LISI LINHART

A couple years ago, I co-founded a creative digital studio, Fathom, in Sacramento, CA. Of course, bootstrapping a new firm involves plenty of stress, but thankfully we’re based in one of the most productive agricultural valleys in the US. When not pushing pixels and hacking on software projects, I need to get away from my screen and dive into the garden.

I’ve slowly converted my 1/8th of an acre suburban lot into a food forest. What started as a single planter box for fresh tomatoes has turned into a year-round quest to increase food production of our little land footprint, while learning about the natural world in a new way and designing a space that is both calming and functional. Being surrounded by lush greenery is always relaxing for a few specific reasons, which I’ll tell you about here.

The digital world moves super fast, as we all know. The plant world has a different timescale, whether it’s a tomato’s journey from seed to stalk or a fruit tree’s slow growth over years. Working on an alternative timescale to the normal agency project cycle is a refreshing exercise in patience.

A garden is a microcosm of life and processes.

It lets me pull back from technical work to explore and refine a more complex system. For instance, I

Eric Howard is co-founder and chief technologist of Fathom, a digital creative studio in Sacramento, CA. w: www.fathom.company

feed 4

3 2

1

5

D#yrlfh0dfwlydwhg#rĿfh#zlwk#qhrq#oljkwv#dqg#vpdoo#grjv/# Adam Greenwood#vkduhv#wkh#Juhhqzrrg#Fdpsehoo#vsdfh WORKSPACE Juhhqzrrg#Fdpsehooġv#vwxglr# lv#orfdwhg#lq#d#vwxqqlqj#Judgh# LL#olvwhg#exloglqj#lq#wkh#khduw#ri# Erxuqhprxwk/#zlwk#vhyhq#plohv#ri# jroghq#vdqgv#mxvw#d#vkruw#zdon# dzd|1#Lwġv#vlwxdwhg#rq#wkh#wklug#iorru# ri#d#vkduhg#zrunvsdfh/#zkhuh# hqgohvv#vxssolhv#ri#elvfxlwv#dqg# dzdug0zlqqlqj#vxvkl#fkhiv#pdnlqj# oxqfk#lv#wkh#qrup1# Wkh#riilfh#lv#d#odujh#rshq0sodq# vsdfh/#zklfk#lv#wkh#devroxwh#shuihfw# vhwxs#iru#frooderudwlrq#ehwzhhq# whdpv#iurp#zhe#ghvljq#dqg# ghyhorsphqw#wr#fuhdwh#dq|wklqj# iurp#yrlfh#vnloov/#wr#rufkhvwudwlqj# gljlwdo#wudqvirupdwlrq#dqg#dovr# exloglqj#fkdwerwv1# [1] Zkhq#|rx#zdon#lq#wr#JFKT# lq#wkh#pruqlqj/#mxvw#vd|#wkh#zrugv# ģKh|#Jrrjoh/#rshq#wkh#riilfhĤ#dqg#

or#dqg#ehkrog/#wkh#oljkwv#frph#rq/# wkh#vfuhhqv#duh#dzdnh#dqg#rxu# idyrxulwh#Vsrwli|#sod|olvw#vwduwv# sod|lqj#wkurxjk#wkh#vshdnhuv1#Zh# oryh#xvlqj#wkh#qxphurxv#Dpd}rq# Doh{dv#dqg#Jrrjoh#Krphv#wr#dvvlvw# xv#zlwk#surmhfwv#zkhq#exloglqj# yrlfh#vnloov/#exw#wkh|#duh#dovr#ixq#wr# sod|#jdphv#ru#whoolqj#wkhp#wr#Ġedunġ# wr#h{flwh#rxu#pdvfrw/#Udosk1#[2] Rxu# olwwoh#Udosk#kdv#wkh#prvw#lpsruwdqw# uroh#dw#JF/#Khdg#ri#Vhfxulw|1#Kh#lv# ilhufho|#surwhfwlyh#ryhu#wkh#vwdii# dqg#pdnhv#d#txlfn#ghflvlrq#rq# zkr#kh#dssuryhv#ri1#Dowkrxjk#kh# lv#qrupdoo|#hdv|#wr#shuvxdgh#diwhu# d#txlfn#ehoo|#uxe1#[3] Lw#zrxogqġw# eh#d#JF#riilfh#zlwkrxw#d#olwwoh#elw# ri#qhrq1#Zh#oryh#vrphwklqj#wkdw# vwdqgv#rxw/#dv#wkdwġv#h{dfwo|#zkdw# zh#olnh#wr#gr1#Ixq#idfw#Ğ#wkh#iluvw#

PROFILE

GREENWOOD CAMPBELL

gd|#zh#xqyhlohg#rxu#qhz#riilfh/# vrpherg|#dfflghqwdoo|#expshg# lqwr#lw#vr#zh#kdg#wr#rughu#dqrwkhu# rqh#vwdw$#+Qrw#vxuh#li#wkdw#idfw# lv#pruh#Ġeulqjlqj#xs#sdlqixo# phprulhvġ#dv#rssrvhg#wr#Ġixqġ1,# [4] Zlwk#d#exv|#whdp#wkdw#vshqgv#d# orw#ri#wlph#dw#rxu#folhqwvġ#riilfhv/# wkh#vfuhhqv#duh#wkh#shuihfw#sodfh# wr#vkduh#djhqf|#qhzv/#xsfrplqj# hyhqwv#dqg#wkh#rgg#lqvsludwlrqdo# txrwh1#Wkh|ġuh#dovr#d#eulooldqw#zd|# wr#fhoheudwh#wkh#whdp1#Zh#dozd|v# kdyh#d#ĠPrvw#Ydoxdeoh#Sod|huġ#ri# wkh#prqwk#dqg#wkh#vfuhhq#lv#d# juhdw#sodfh#wr#dssuhfldwh#wkhp$#[5] Zh#uhdoo|#oryh#rxu#phprudelold# vwdwlrq/#ixoo#ri#pdq|#gliihuhqw# lwhpv/#iurp#whfk#surgxfwv#ri#wkh# 4<;3v#wr#vshfldo#hglwlrq#iljxulqhv/# ru#rxu#YU#khdgvhw#wkdw#zh#oryh# jhw#rxw#iurp#wlph#wr#wlph1#Zh#duh# frqvwdqwo|#dgglqj#wr#lw/#dqg#hyhq# kdyh#d#vshfldo#vhfwlrq#ghglfdwhg#wr# doo#ri#rxu#oryho|#folhqwv1# Adam Greenwood is the chief executive officer of the human tech agency, Greenwood Campbell. w: www.greenwoodcampbell.com

may 2020 17

Opinions, thoughts & advice

TAX REFORMS

20

Nico Turco on whether developers should encourage browser diversity or monopoly and how Google fits into it all

INTERVIEW

26

Q&A

33

Chen Hui Jing shares her love for CSS and why DevTools have the potential to be much more than a debugging tool

Meet Andy Bell, the educator and web designer who’s helping the community via an astonishing array of side projects

Beyond Tellerrand Berlin 2018, photograph by Stefan Nitzsche

ESSAY

THE IMPACT OF IR35 REFORMS IR35 changes are coming… James Poyser highlights what you need to know In 2000 a new piece of tax law was introduced called IR35. It was designed to stop tax avoidance and prevent companies from hiring someone through a limited company, rather than employing them directly and ensuring they pay the appropriate National Insurance and income tax.

On 6 April 2020, new IR35 reforms come into effect in the private sector. From then onwards the onus will be on medium/ large companies to ensure any contractors who provide services to them through a limited company or personal services organisation (PSC) are paying the correct amount of tax.

Previously, it was down to the contractors to determine their status as ‘outside IR35’ (so not a disguised employee ie they pay themselves a salary, dividends and pay corporation tax from profit), or ‘inside IR35’ and liable for a client’s employment tax.

Opinion

DO I NEED LEGAL ADVICE? If you employ hundreds of contractors or freelancers to deliver work on a shortterm contract, there is a huge amount of work in determining whether every one of them is working inside or outside IR35.

For some the task is too great so they either don’t engage with contractors using a PSC, move them into an ‘umbrella’ – whereby a third party administrates the contracts on the company’s behalf, or place everyone inside IR35 and minimise the risk of getting it wrong and a tax bill.

It’s complex to determine it correctly.

There are many factors to consider, such as how the person delivers the work, use of their own equipment and if you have your own professional insurance.

Using a third-party legal advisor can help you make an accurate assessment.

HMRC also has a tool called CEST, though it’s not as reliable as you would think, so legal advice is encouraged.

Many people are being (incorrectly) found to be operating inside IR35 and deemed to be like an employee. So, they would pay employment taxes but receive none of the benefits that employees are entitled to by law.

Not only are contractors now paying employee taxes, end clients are more often than not making contractors pay the client’s employer’s taxes – National Insurance and Apprenticeship levy.

Where an umbrella scheme is being introduced, people see a further reduction in pay because there are admin costs.

Either way, it can have a detrimental effect on your income and how you work.

NONE OF THE BENEFITS AND RIGHTS. IT’S NOT FAIR Many people have legitimate businesses and pay their corporation and NI tax. But because of the way companies are making assessments, many people are finding that they are effectively being locked out of running a business. Plus, they strongly object to ‘inside IR35’ rulings and paying all the employers’ tax but receiving none of the benefits and rights.

THE CONSEQUENCES As people want to keep their legitimate businesses running, they are not accepting the inside IR35 assessments, leaving contracts and looking for ones that are ‘outside IR35’.

A handful are staying with their client if they have been deemed inside simply because they have a mortgage to pay.

However that’s high risk, because HMRC could say you should have been operating that way all along and land you with a retrospective tax bill.

HOW CAN YOU PREPARE? A third-party assessor is quicker and cheaper than you think (certainly cheaper than getting it wrong). Then it’s all about how you structure things and the evidence you have such as: O Insurance policies and schedules – keep the schedule for at least five years for Professional Indemnity.

O Business premises proof - lease or contract for premises and utility bills.

O Contracts – for all engagements you have with clients.

O Efficiency gains – tenders and proposals for fixed-price job gains.

O Proof of assistance – employee records, accounting records.

O Marketing spend – receipts, briefs and copies for marketing undertaken.

O Repair at own expense – contract clauses, details of mistakes rectified, details of costs incurred by you to rectify your mistakes.

O Client risk – accounting records of write-offs, for example.

O Business entity – receipts for production as well as copies of materials such as websites and business stationery.

O Billing – invoices and correspondence related to payment terms.

O Substitution ie where someone else delivers work on your behalf – contact clauses, level of sign-off by the client, payment terms, audit trail of previous substitutes and subcontracting.

PROFILE

WHY DOES IT MATTER IF YOU ARE INSIDE?

Poyser is founder and CEO of inniAccounts, an online accountancy for self-employed people and founder of offpayroll.org - a place to find IR35-friendly clients. w: www.offpayroll.org.uk

may 2020 19

VOICES Essay

20

may 2020

Essay

BROWSERS

WHAT DOES THE FUTURE HOLD FOR BROWSERS? Illustration by Kym Winters

Nico Turco examines the state of play with browsers, whether developers should encourage diversity or monopoly and how Google fits into it all

January 2020 saw the release of the first Microsoft Edge browser to be powered by Google’s Chromium engine, which joined Chrome, Samsung Internet and Opera in the list of Chromium-powered browsers.

According to Statcounter, this means 70 per cent of users are now using Google-powered browsers.

SO, IS GOOGLE’S DOMINANCE A BAD THING? Browser ‘monoculture’ has been a topic of heated debate within the developer community, ever since the days of Internet Explorer’s dominance in the early 2000s. The argument goes that if usage of a browser becomes so prevalent, developers stop coding for any other browsers and over time standards erode and the dominant company can create its own ecosystem, locking users into their products and opening the doors to potentially harmful abuses of its position.

Supporters of the monoculture say that having only one engine frees up developers from maintaining different engines across a range of browsers, all with their quirks and idiosyncrasies, to focus on new feature sets that add value to users and improve people’s browsing experience. They make the case for faster innovation and increased investment in product development.

I look at that 70 per cent and growing user base and I feel that more Chromium-powered browsers in the world means we have a single point of failure – if a Chromiumbased engine goes wrong at base – or worse still gets compromised by hostile forces - there will be issues across more of the web. When bolstered by concerns about Google’s commitment to privacy, monetisation

and data selling, we could see a browser landscape where Google holds a monopoly over browser engines – and the touch points within them - that a lot of users use to access the web.

Many developers believe in diversity, fair competition and the forces for good across the web: a future where no single provider is entirely dominate and where users have a healthy choice of tools to do the job.

WHAT CAN DEVELOPERS DO TO HELP PROMOTE DIVERSITY? To avoid driving us towards a monopoly, designers, developers and tech-savvy people need to take an impartial look at what’s happening in the browser space and what this means for the people who use it.

Community-led change can educate people about what’s happening in this space. We have a legacy of effecting change based on our traditional stance. A stance that can be described as non-conformist, subversive and sceptical of poor practices. This has been the norm for nearly two decades. Take a couple of recent examples where critique from developers made big tech rethink their choices.

In 2019 the Chrome team were challenged by the community when they announced that their engine would support a new html tag: ‘<std-toast>’ – a notification tag that jumps from the bottom of the screen – the naming of which raised questions around clarity.

The fact that the introduction of this tag wasn’t discussed with the parties involved (and impacted) was seen as Google abusing its power to bypass best practice W3C standards process. This sparked a reaction from the

may 2020 21

VOICES Essay people behind the standardisation of the web and the

Google’s attitude could be at times described as

development community, and resulted in <std-toast> not being used across other browser engines.

avoiding the conversation about basic web standards.

Changes made have ignored the normal approval and

Mozilla, its developers and community hold a different vision for the web. They’re more focused on an ad-free

consideration loop on multiple occasions. In some ways, its size has led to the company setting these standards

future, where monetisation of data isn’t at the heart of business models. Their work in this area helped Apple

across the web. This means potentially harmful or exploitative changes could go live, without proper checks

– in light of its brand standing that is rooted in privacy – rethink the amount of data Safari was capturing about

conducted by a third party.

More people are aware of generally exploitative

users. This reduces the amount of data that can be sold

practices; however, they still cannot interrogate the

to target ads to people based on browsing behaviour.

Microsoft’s Edge team recently made changes to the

technology in a way that would be meaningful without help from people like us.

Chromium engine, which means users will soon be able to move multiple tabs to a new window. It’s a small step

The increased adoption of a Chromium-based engine gives Google more control over future browser

but a positive one that comes from the benefits of opensource projects. This shows that browser developers do

development and the direction of the web. This means development is conducted on the terms of what Google

have the ability to create change for the better of people using the web together.

most finds appropriate.

Also, with more Chromium browsers around, people may fear for their privacy. Although the link between

So what are the opportunities? Having outlined what developers can and are doing to challenge monopolies, it’s also important to explore the problems and the increased usage opportunities that Google’s Chromium engine presents.

Google as a brand has helped to further the conversation around accessibility. Firstly, it holds the space in which the conversation about accessibility typically happens – it invests a lot of money in talking about it globally.

Secondly, a Chromium engine powers Opera, which is the main assistive browser. Thirdly, Microsoft and Google working together using a Chromium engine could improve accessibility support across browsers.

Chromium-powered browsers also mean more people can enjoy richer web-based experiences – this now extends to Edge users. This is because Chromium, unlike the older Microsoft engine, allows for progressive web applications and scalable components – core features of a modern browsing experience - to be part of the browsing experience of more people.

So what are the potential issues? There’s a number of problems connected to Google’s size and power. Chrome has historically had the support of developers due to the tooling facilities that enable exploration, iterative development and even the powering of unique applications like Brave.

That said, Firefox’s tool set is expanding quickly and differently from Chrome’s performance-focused feature set. Firefox’s approach has recently focused on CSS layout inspection and it led the effort of supporting the full CSS grid specification. As a result, we’ve seen big names in the web community publicly stating their move away from Chrome to take full advantage of such features.

22

may 2020

the Chromium-powered browsers and Google exploiting data isn’t cause and effect, greater use could make for increased targeted advertising whilst increasing the scope for the exploitation of privacy concerns. However, with current versions of Edge, download privacy settings are enabled as default. The question is, how will Google react? For example, could more aggressive messaging on plugin downloads from Edge become the norm?

These issues don’t even touch on reports of Microsoft using dark UX patterns and advertising techniques to encourage users at start-up to move away from Firefox, towards its new Chromium-powered engine.

DUTY OF CARE There is a need for developers to be good stewards of the internet. We are the people with the know-how of the techniques and practices tech companies use. We can unpick the rationale and motivation behind their decisions. With that in mind, we need to use our voices to share our concerns when we see movements like Microsoft adopting a Chromium-powered engine.

Developers have a duty to educate users, when this will help to shape the browser landscape. We need to act in this way if we want to see a diverse future and not a monopoly. Whether that’s switching to a different browser based on the data usage policy of the vendor, or publicly voicing dissent about vendors’ practices – we all have a part to play in making the internet – and the browsers we use to access it – better. This can and will help to maintain diversity in the face of monopoly.

PROFILE

MORE CHROMIUM-POWERED BROWSERS: THE OPPORTUNITIES AND ISSUES

Turco is a senior front-end developer at Foolproof, an experience design company with offices in the UK and Singapore that delivers digital products and services globally. w: www.foolproof.co.uk

SUBSCRIPTION OFFER

3 FOR 3 JƺɎ ɵȒɖȸ ˡȸɀɎ ‫ ב‬ǣɀɀɖƺɀ Ȓǔ Əȇɵ Ȓǔ Ȓɖȸ ƳƺɀǣǕȇ ɎǣɎǼƺɀ ǔȒȸ ǴɖɀɎ

$3, €3, £3 CHOOSE YOUR MAGAZINE!

myfavouritemagazines.co.uk/design1 OFFER AVAILABLE TO UK, EU, US, ROW SUBSCRIBERS *Terms and conditions: Áǝǣɀ Ȓǔǔƺȸ ƺȇɎǣɎǼƺɀ ȇƺɯ ɀɖƫɀƬȸǣƫƺȸɀ ɎȒ ȸƺƬƺǣɮƺ Ɏǝƺǣȸ ˡȸɀɎ ‫ ב‬ȵȸǣȇɎ ǣɀɀɖƺɀ ǔȒȸ ‫ בڡ בگ‬Ȓȸ ‫ בڟ‬ƳƺȵƺȇƳƺȇɎ Ȓȇ ǼȒƬƏɎǣȒȇِ ǔɎƺȸ Ɏǝƺɀƺ ǣɀɀɖƺɀً ɀɎƏȇƳƏȸƳ ɀɖƫɀƬȸǣȵɎǣȒȇ ȵȸǣƬǣȇǕ ɯǣǼǼ ƏȵȵǼɵ ٫ ȵǼƺƏɀƺ ɀƺƺ ȒȇǼǣȇƺ ǔȒȸ ƳƺɎƏǣǼɀِ çȒɖ ƬƏȇ ɯȸǣɎƺ ɎȒ ɖɀ Ȓȸ ƬƏǼǼ ɖɀ ɎȒ ƬƏȇƬƺǼ ɵȒɖȸ ɀɖƫɀƬȸǣȵɎǣȒȇ ɯǣɎǝǣȇ ‫ ג׏‬ƳƏɵɀ Ȓǔ ȵɖȸƬǝƏɀƺِ ¨ƏɵȅƺȇɎ ǣɀ ȇȒȇ‫ٮ‬ȸƺǔɖȇƳƏƫǼƺ ƏǔɎƺȸ Ɏǝƺ ‫ٮג׏‬ƳƏɵ ƬƏȇƬƺǼǼƏɎǣȒȇ ȵƺȸǣȒƳ ɖȇǼƺɀɀ ƺɴƬƺȵɎǣȒȇƏǼ ƬǣȸƬɖȅɀɎƏȇƬƺɀ ƏȵȵǼɵِ çȒɖȸ ɀɎƏɎɖɎȒȸɵ ȸǣǕǝɎɀ Əȸƺ ȇȒɎ ƏǔǔƺƬɎƺƳِ ¨ȸǣƬƺɀ ƬȒȸȸƺƬɎ ƏɎ ȵȒǣȇɎ Ȓǔ ȵȸǣȇɎ ƏȇƳ ɀɖƫǴƺƬɎ ɎȒ ƬǝƏȇǕƺِ IɖǼǼ ƳƺɎƏǣǼɀ Ȓǔ Ɏǝƺ (ǣȸƺƬɎ (ƺƫǣɎ ǕɖƏȸƏȇɎƺƺ Əȸƺ ƏɮƏǣǼƏƫǼƺ ɖȵȒȇ ȸƺȷɖƺɀɎِ Èk ƬƏǼǼɀ ɯǣǼǼ ƬȒɀɎ Ɏǝƺ ɀƏȅƺ Əɀ ȒɎǝƺȸ ɀɎƏȇƳƏȸƳ ˡɴƺƳ Ǽǣȇƺ ȇɖȅƫƺȸɀ ٢ɀɎƏȸɎǣȇǕ ‫ ׏׎‬Ȓȸ ‫א׎‬٣ Ȓȸ Əȸƺ ǣȇƬǼɖƳƺƳ Əɀ ȵƏȸɎ Ȓǔ Əȇɵ ǣȇƬǼɖɀǣɮƺ Ȓȸ ǔȸƺƺ ȅǣȇɖɎƺɀ ƏǼǼȒɯƏȇƬƺɀ ٢ǣǔ ȒǔǔƺȸƺƳ ƫɵ ɵȒɖȸ ȵǝȒȇƺ ɎƏȸǣǔǔ٣ِ IȒȸ ǔɖǼǼ Ɏƺȸȅɀ ƏȇƳ ƬȒȇƳǣɎǣȒȇɀ ȵǼƺƏɀƺ ɮǣɀǣɎ‫ ي‬bit.ly/magtandcِ ǔǔƺȸ ƺȇƳɀ ‫ ׎ב‬ȵȸǣǼ ‫ِ׎א׎א‬

THURSDAY 2 APRIL 2020 RICH MIX, SHOREDITCH, LONDON

The conference helping you build better JavaScript

NET READER

USE CODE NET30 FOR 30% OFF

HOSTED BY

LEARN

NETWORK

Catch inspiring, thought-provoking talks from JavaScript giants, including Jeremy Keith and newly added Mina Markham

Hobnob with our JS experts, mingle with fellow devs, brush shoulders with brands and associate with agencies

DISCOVER

SOCIALISE

Find out about the latest techniques, hacks and frameworks that can help you up your JS game and build better sites

Unwind at the GenerateJS networking drinks and break the ice by participating in our Creative Bloq break activities

Net Reader Offer Terms & Conditions: 30% discount on Standard Tickets using code: NET30 (normally £298 +VAT, only £208.60 +VAT with this offer). Cannot be used in conjunction with other offers and is not available on Student Tickets.

#GenerateJS

JEREMY KEITH

REMY SHARP

PHIL HAWKSWORTH

Going Offline

Using a modern web to recreate 1980s horribly slow and loud loading screens

Are you being servered? – Exploring a “serverless” web

MINA MARKHAM

NADIEH BREMER

CHARLIE GERARD

The Mythology of Design Systems

Creating an effective and beautiful data visualization from scratch

Strike a pose – Gesture recognition in JavaScript with Machine Learning & Arduino

Book tickets at generateconf.com Event Partners

Recruitment Partner

Association Partner

VOICES Interview

Chen Hui Jing Words by Oliver Lindberg

Beyond Tellerrand Berlin 2018, photograph by Stefan Nitzsche

The self-taught designer and developer from Singapore reveals how basketball got her into web development, how she discovered her love for CSS â&#x20AC;&#x201C; especially Grid and Flexbox â&#x20AC;&#x201C; and why DevTools have the potential to be much more than a debugging tool

26

IN FO job: Developer advocate at Nexmo w: www.chenhuijing.com t: @hj_chen

may 2020

Interview

may 2020 27

VOICES Interview

Photo YGLF Lithuania 2019 (https://lithuania.yglfconf.com)

Just over ten years ago, before Chen Hui Jing was a web developer and internationally sought after conference speaker, she was playing basketball full time in the Malaysian national team. As is so often the case when you’re pretty good with computers, she became the go-to IT person to sort out the Wi-Fi connection or help people log into their laptops. Her coach then made the assumption that she probably could figure out how to build a website as well and asked her to update the site for the Malaysia Basketball Association.

“At the time I was young and naive enough to think ‘oh yeah, sure, why not?

It can’t be that hard’,” Chen laughs as she remembers the experience. “That was my first web development project. I knew nothing about building websites at all but I did know how to view source. So my career started off with the trusty copy and paste command, let’s put it that way!”

28

may 2020

Chen – who graduated with a finance, accounting and management degree from the University of Nottingham Malaysia Campus – continued on the basketball team for another two years before taking a job as a project manager on a major banking project in Malaysia. However, as she didn’t have any prior work experience, the sheer scale of it made her feel like she wasn’t qualified enough to make a real difference. “I kept schedules and communicated with the team leads, but I felt like a postman, just transmitting messages from team to team,” she remembers. “There is value in this work, but through my interactions with the technical leads I realised I was actually more interested in how the systems worked. The developers were really kind.

When they could spare a minute, they would explain things to help me understand, even though I couldn’t implement what they told me myself. So

a couple of years later, when I got the opportunity to get hired as an entry-level web developer, I took it because I wanted to build stuff.”

Chen began teaching herself how to code – reading books, tutorials and blog posts, listening to podcasts and watching screencasts – but found that to make the information really stick, she needed to use a hands-on approach.

“I retain information best if I build the actual thing,” she explains. “For example, if I want to learn how to build a chat application, I can’t just follow along and copy and paste whatever the instructor is doing in a tutorial. I need to figure out what every line does, and if I can, I try to rewrite it in my own style or add an extra bit of functionality. So the concept is the same but the implementation is different.

That method still works best for me now.”

Chen returned to Singapore, where she had started her education, to pursue web development professionally. She focused on the basics – HTML, CSS and JavaScript – and discovered her love for native web technologies. CSS quickly became her favourite. “It was so intuitive and just made sense! JavaScript just felt that it took more effort. At the beginning I went a bit overboard with CSS. There were so many things I could easily have implemented with three lines of JavaScript but I’d go a very convoluted route to get it to work in pure CSS. In hindsight it was more trouble than it was worth, but it also meant that I found out a lot more about CSS than most people.”

One of the podcasts Chen listened to regularly was The Web Ahead with Jen Simmons. It was there that she heard about CSS Shapes, a property she found especially intriguing. “Jen talked about how you let text flow around a shape, which is something that you never saw on the web before. Everything was usually a box, a rectangle. So I dug a bit more into it, wrote a blog post and dropped Jen a short email to thank her and let her know about the article. Now, Jen is a very busy lady. She didn’t have to dedicate any time to this random person from half the world away. But Jen responded and even tweeted out my article. I think that was the first

Photo: ImageCon 2019 (www.imagecon.com)

Interview

post that gained traction. Everything previously had pretty much been for my own reference. I was just documenting my notes from my own learning.”

Chen became friends with Simmons, kept blogging and co-founded Talk.CSS, the first meetup in Singapore around all things CSS. Her passion for CSS led to Mary Lou from web design and development publication Codrops inviting her to continue to build up a CSS reference started by Sara Soueidan (tympanus.net/ codrops/css_reference). One of the properties she covered was CSS Grid. “I had heard about it from Rachel Andrew,” Chen recalls. “It sounded interesting but until I actually used it and built stuff with it, I didn’t realise how powerful it could

“You have to relinquish control, which should be the way we build things on the web because content can be viewed in so many contexts” be. It’s so much more straightforward than a lot of the hacks that we had to do in the past to build web layouts.”

Chen was also hooked by the different mindset that CSS Grid requires. “You have to relinquish control, which should be the way that we build things on the web,

simply because your content could be viewed in so many different contexts. It’s impossible to control. In print you come up with a really beautiful design, send it to the printer and then it comes out at a certain ratio, gets stuck to a certain wall and people walking by look at it that way.

On the web somebody could view your design on a 70-inch television screen or on a tiny 3-inch budget phone screen. So Grid and Flexbox came out because the spec editors thought we should have a tool that enables us to cater for this very uncertain canvas that we’re building for.

I can’t think of any other medium that functions the same way and challenges us – designers and developers – to simultaneously consider all the different

may 2020 29

VOICES Interview

Photos: JB Open 2018, photograph by Sarah Chua

possibilities and then write code that can adapt. It’s this unique constraint that’s one of the reasons I really enjoy building and designing for the web.”

Around the same time Chen was asked to speak about CSS Grid at the Mozilla Developer Roadshow in Asia (she believes Jen Simmons put her name forward) and about East Asian web typography at Webconf.asia in Hong Kong. “The organiser just took a chance on me because she had seen my articles but I had no real speaking experience at that point. It was the first time I spoke at – and even attended! – an international conference.

I learned that meeting people in person really does make a difference. A lot of it is about timing and luck. Vitaly Friedman from Smashing Magazine was in the audience and booked me for his conference the following year.”

Chen had no idea how her talk would be received and she felt that the topic – vertical writing modes – was relatively niche. However, the industry was waking up to the importance of localisation and internationalisation and the fact that not everyone in the world was reading left to right, so the talk hit a nerve. “Suddenly, I was offered opportunity after opportunity to speak at events around the world.

Whereas in my first year of speaking I

30

may 2020

went through the CFP process, the next year I got invited instead. So I think getting your first few conferences really gets the ball rolling. Speaking at events around the world means so much to me.

I’m always really grateful because I’m more expensive than most speakers, simply because I’m so far away.”

At the moment Chen is refining a topic that she presented about at conferences like CSSconf EU and Pixel Pioneers last year – learning CSS through DevTools.

“Firefox shipped a Flexbox Inspector, which made a light bulb go off in my head,” she enthuses. “Flexbox is my favourite CSS property to talk about because it can be very confusing for a lot of developers. The spec is very wellwritten but I didn’t really understand it myself until I saw the numbers laid out for me in the DevTools. And DevTools are with us in the browser all the time. They can help developers who are trying out new CSS properties figure out what’s happening in a more convenient manner, which also means that they’re less inclined to give up.”

As many people simply don’t know about the many different DevTools available in all browsers, Chen has made it her mission to stand on a stage and talk to a few hundred people at a time to spread

the word, which also helps the CSS Working Group as well as browser vendors.

“DevTools can potentially serve as a bridge,” she hopes. “They help developers understand CSS better, which could encourage the adoption of newer properties. The challenge is to get people to try new features and provide feedback early on in the process. There are several ones in particular that really benefit from having a visual overlay. Grid and Flexbox naturally but also properties like CSS Shapes and Firefox now comes with the Shape Path Editor built into DevTools.”

Seven years into her career, now a developer advocate for Nexmo, Chen still really enjoys the process of building something and then seeing it come to life.

Her fascination with browsers and HTML and CSS as the foundation of the web is completely infectious.

“My analogy for the web is that it’s like a car,” she laughs. “People use it to get from point A to point B. For them it’s just a tool to get things done but I want to know how the car works. I want to know what goes under the hood and how the engine is built and how it works. So every time I meet a browser engineer I get exceptionally excited! I think it’s a privilege that a lot of people in this industry don’t have.”

Interview

CSSConf Budapest 2019, photograph by Dori Nemeth

â&#x20AC;&#x153;DevTools can potentially serve as a bridge. They help developers understand CSS better, which could encourage the adoption of newer propertiesâ&#x20AC;?

may 2020 31

VOICES Opinion to trigger elements. Sites commonly use pop-up elements to convey promotional or privacy information. Make sure you can tab through these elements, fill out any forms in the pop-up and dismiss it if necessary.

CHECK YOUR CONTRAST Contrast is important for people with low vision or colour vision deficiencies.

Common colour vision deficiencies include difficulty distinguishing between shades of red, yellow and green.

Improving contrast is good for all users, improving legibility and reducing cognitive load. There are plenty of free extensions and resources to check the contrast ratio of

ACCESSIBILITY

MAKING YOUR WEB CONTENT ACCESSIBLE Merlyn Meredith outlines five top tips for ensuring web content is accessible for all Those with mobility or vision difficulties face frequent challenges when navigating websites, so when building sites with that in mind, try using a computer without a mouse for ten minutes.

You’ll probably notice things don’t work as you expect. You might use your keyboard’s tab key and arrow keys to move through a website and find content flows in an odd order, or links fail to highlight. With this in mind, here are five top tips for ensuring web content is accessible for all:

PERFORM AN ACCESSIBILITY AUDIT

MAKE SURE EVERYTHING GETS FOCUS A manual check is a great way to catch keyboard navigation issues. You may even find that there are important links on the page that you can reach, or “focus” on. Tab through links on your site (or press Shift + tab to go in reverse order) and look for an ‘active’ outline around links. Try form elements and press enter

USE STRUCTURE AND LANDMARKS Good use of HTML5 elements and Accessible Rich Internet Application (ARIA) landmarks give screen readers context.

It’s one of the easiest ways to seriously improve a site for screen readers.

ARIA landmarks define ‘roles’ for pieces of content. It’s a little structure that goes a long way, with roles like ‘banner’ , ‘navigation’ or ‘main’ providing context when navigating.

ADD A LINK TO SKIP TO MAIN CONTENT Using keyboard navigation to cycle through links in the header and navigation before you get to content can be frustrating. Now imagine that each time you go to a new page you have to do that again.

A ‘Skip to main content’ link provides a shortcut to page content, improving navigation and readability. Better still, the generally accepted pattern is to hide this element and only reveal it when necessary.

You may not have noticed, but after you land on a Google search results page you can hit tab to bring up a ‘Skip to main content’ link.

Auditing your site is simple and with a few small updates from your development partner, you can dramatically improve the accessibility of your content.

PROFILE

Conducting an audit covering keyboard navigation and screen reading can take you most of the way to full accessibility.

Performing an audit can be done using your own software, manual checks or free

auditing tools. The Audit tab in Chrome DevTools is a simple way to determine if your content and code address accessibility.

Running a quick accessibility audit will highlight automatically detectable issues on the page and tell you how to fix them. Audits will commonly find missing elements, errors in HTML and elements that haven’t been described well.

text with a background. Don’t forget about form elements and borders, too.

32

may 2020

Meredith is design executive officer at Tryzens, a company delivering technology solutions and services to retailers and brands on a global scale. w: tryzens.com

Q&A everything. Everything is organised to the nth degree and related to that, I couldn’t recommend bullet journalling and Notion (notion.so) more if I tried.

To date, which of your tools has got most traction and why?

I think one of the most talked about tools was Hylia (https://hylia.website), which is an Eleventy starter kit.

It was something I wanted to make for a while because I saw a gap for a tool that anyone could use to publish their own content – even if they couldn’t code.

I also wanted it to be really modular and easy to extend, which I achieved with a straightforward Sass setup that is powered by design tokens. The combo of this and its ease-of-publishing seems to have gone down really well with the web community and beyond.

How is your screencast course, CSS From Scratch,

Q&A

ANDY BELL Meet the educator and web designer who’s helping the community via an astonishing array of side projects IN FO job: educator and web designer w: hankchizljaw.com t: @hankchizljaw

Could you briefly introduce yourself to anyone who doesn’t know you?

I’m Andy, an educator and web designer from the UK. I’m trying to help people learn how to make highperforming, accessible and inclusive digital products and websites. I do this while also running a freelance design and development client-services business.

You’ve released a LOT of side projects to help the community: what drives you to do so and how do you find the time?

A lot of the time, these projects come from my own selfish need rather than trying to help the community.

It’s usually when I get part of the way through the project that I think, ‘Huh, maybe the community could really benefit from this. I’d better share it’.

A good example of this is my modern CSS reset (https://github.com/hankchizljaw/modern-css-reset), which spent so many years being tinkered with in private. Eventually, though, I gathered some folks might find it handy. Turns out they did!

In terms of finding time: I’m just one of those annoying, hyper-organised people that has a plan for

coming along and why should people sign up to it?

Glad you asked. That course is actually being amalgamated into a bigger project that’s being put together at the moment: Piccalilli (https://piccalil. li). Piccalilli started life as a CSS newsletter but it’s evolving into a brand new project that will be focused on tutorials, articles and courses that I produce along with, of course, the newsletter.

Along with my other related project, Front-End Challenges Club (https://front-end-challenges.club), my focus is increasingly in education, which is exactly where I want to be.

What can we expect from you in the future?

Education is certainly taking a front seat. I’m hoping to release two or three courses this year, along with the rest of the Piccalilli tutorials and Front-End Challenges Club challenges. The aim is for education to be the primary part of my business, with making websites for clients, the secondary part. A complete flip from where it currently is.

We’re also going to be adding some cool stuff to Every Layout (https://every-layout.dev), including a potential print version. Lots of work to do on that front, though!

What else is exciting you most in the field of web design right now?

It’s got to be JAMstack. Very much related that, something that really excites me more than any tech or tools is that performance and accessibility seem to be getting a front-row seat, which I’m very much on board with.

Static site generators seem to be leading this charge and my favourite, Eleventy, is definitely doing great things to help people produce incredibly lightweight websites. I see a very bright, speedy future.

may 2020 33

VOICES Big question INDUSTRY INSIGHT

WHAT’S YOUR PICK UP WHEN YOU’RE LACKING ENERGY? Found yourself stuck in a creative slump? Our panel of experts suggest some practical ways to get out of your funk S A L LY L AI T

Senior engineering manager, Monzo sallylait.com

ROCHEL L E DA NCEL

Experience design director, Randomly www.eversorandomly.com

Whenever I notice I’m feeling low on positive energy, I try to be mindful of the factors that could be contributing to it. Very often a change of scenery not only helps with restoring my energy and inspiration but also gives me some perspective to help identify the root causes of why it’s been happening. Anything from a quick walk to working in a different location helps me but it also can be a sign that I need to book a holiday and get away from it all for a bit longer!

N AT H A N A K RIL L

UK lead front-end developer, Crowd thisiscrowd.com

When I need to get in the zone and focus, I like to change my go-to music to one without lyrics – and I code away. Also, I’m part of CodePen, so when I need inspiration I go on there and look at what other people have done. When I find something interesting, I save it as I might use it at a different time. On top of all of this, taking a break and stepping away from the project I’m working on helps to clear my mind and come back with fresh ideas.

34

may 2020

The number one thing I’ve found to help me get out of a funk is to just accept that no one can be inspired and energised 100 per cent of the time; it’s best just to embrace your body’s need for down time, nurture it and come back re-energised. I’ve never done my best work when I’ve tried to power through something, so if time and deadlines permit, I come away from the screens and do something active or analogue, like go for a climb or visit a museum. I’ve tried to prepare for the times that I’m lacking in inspiration by writing down good ideas as and when I have them: these have saved me when I’ve needed to pull something out of the bag on a deadline!

DAVID BUR T ON

A NN A DA HL S T RÖM

www.madriver.co.uk

annadahlstrom.com

Head of digital, Mad River

UX designer

At Mad River HQ, we find aspects of live sites that inspire us: typographic treatments, interactions, or the way a responsive issue has been tackled.

Portfolio sites like Dribbble and Behance are good too. I dissect other media types and artforms to understand why they work. Instagram, photography journals, art galleries – all are fair game. On a personal level, I head out: walking in the woods, brewing coffee on the beach or flyfishing. Being outside soothes the soul and brings fresh perspective.

F R A NCES C O A DRIAT ICO

Digital designer, Crowd thisiscrowd.com

If I’m at work and I run out of inspiration, then I turn to Pinterest. Any other time I turn to social media because I use it on a daily basis anyway. So I thought to myself, why not browse Instagram for inspiration purposes, as well as for dog videos? I started following design accounts and I save anything that I find particularly interesting in different collections: I have one for each letter of the alphabet. Another thing that always works is to simply just step away from what I’m working on and either work on something else, take a coffee break or ask my colleagues for feedback.

Usually, it’s going for a walk and listening to a good podcast that gets me inspired. Sometimes that walk takes me past the store and I’ll pick up some chocolate for a bit of a ‘fika’ treat for when I get back.

[Fika is a Swedish tradition that means making time for friends and colleagues to share a cup of coffee (or tea) and a little something to eat.] Other times, it’s taking a break and doing something completely unrelated to work, or playing with our daughters. Their smiles and our oldest daughter’s imagination always reminds me of the beauty and simplicity in things.

MEL IN EDOM WON Y I

Director of product delivery, Illustrate Digital

illustrate.digital

I have a few things that will kick off my day right even if I’m not feeling my best. Listening and dancing to upbeat, happy tunes (these days mostly Lizzo) while getting ready, a longer walk to work through the park, latte from my favourite coffee roasters, followed by breakfast in the office while planning my day. In that particular order. If I need a pick up or inspiration during a difficult day, it will have to be by getting away from my screen or my desk. Mainly finding something to eat that can make me happy and full or a walk by the bay.

RESOURCES 3 WAYS TO STAY CREATIVE WHEN YOUR ENERGY SLUMPS

https://netm.ag/2v83dqw Are clients, deadlines and admin draining your spirit? Pete Sena has studied, collected and mashed up left and right brain creative techniques. Here, he suggests three ways to get your creative juices flowing again.

REKINDLE YOUR PASSION FOR WEB DESIGN

https://netm.ag/3bgCf0v Do you find passion for your work an important part of your career? In this post for Smashing Magazine, Jeremy Girard shares his moments of burnout in his career and what you can do to avoid them.

20 WAYS TO OVERCOME CREATIVE BLOCK

https://netm.ag/31v0Qu9 It’s great working in a creative industry but can be tricky to stay inspired all the time.

In this post, Tom May asks leading designers how they beat creative block. Follow these 20 quick-fire tips to get your creative juices flowing.

may 2020 35

NEVER MISS AN ISSUE!

#329 MAR 2020

Get the best out of UI elements, turn them into reusable components and build effective design systems

SAVE UP TO #330 APR 2020 Unleash the potential of HTML, CSS and JS to build powerful sites and improve UX performance with Google’s PageSpeed Insights

% 60

ON YOUR ANNUAL BUNDLE SEE PAGE 6

GOT AN APPLE DEVICE? Download net’s digital edition for your iPad, iPhone or iPod touch

NETM.AG/NET-IPAD (UK), NETM.AG/NET-IPAD-US (US)

#324 OCT 2019

Become a hybrid by learning both design and development skills, grow your sideline and land your dream job

CATCH UP ON ANY ISSUES YOUâ&#x20AC;&#x2122;VE MISSED BY DOWNLOADING OUR DIGITAL EDITIONS NETM.AG/NET-BACKISSUES

#328 FEB 2020

#327 JAN 2020

#326 DEC 2019

#325 NOV 2019

#323 SEP 2019

#322 SUMMER 2019 #321 AUG 2019

#320 JUL 2019

Incredible dev tools to use in 2020, learn how React, Angular and Vue. js are set to evolve and build a time-based UI animation

Bring 3D to your sites using three.js, offer screen sharing with WebRTC and JavaScript and make empathy part of your UX design

Get to grips with the evolving accessibility landscape, understand aria-labels and unit test your React apps

Get expert advice on increasing your income, spend more time on profitable tasks and build custom Gutenberg themes

Discover graphic JS libraries and create polished data viz and animations, learn the best Google tools and add top WebGL physics

Discover the 10 best CSS frameworks, pick up secret skills for improving UX and create a neural net to predict user answers

Unify your UX across multiple platforms, discover whether PWAs or native apps are best and add physics to three.js sites

Create dynamic data-driven animations using p5.js, pick up new skills producing CSS art and build static sites using Jekyll

PREFER TO READ ON ANDROID, PC OR MAC? net is also available on Google Play and Zinio, as well as Kindle, Nook, Windows 8 and more

NETM.AG/NET-POCKETMAGS

NETM.AG/NET-ZINIO

GALLERY Inspirational sites MARK BILLEN

Billen is a freelance writer who has been writing about web design and technology for over 15 years.

Sensational design and superb development

w: markbillen.com t: @Mark_Billen

GATSBY JS, APOLLO GRAPHQL, WEBGL

UN\REAL www.imdsg.ch

Very much an event in itself, UN\REAL is a promotional microsite for the fourth Swiss Interactive Media Design Day. Organised by the technical college GBS and hosted in St Gallen, Switzerland, this specialist symposium will celebrate a variety of digital media disciplines. Produced by KiloKilo, a Zurich-based agency specialising in motion, UN\REAL provides an experimental programme for the event alongside links for purchasing tickets. Featuring a strong black, white and yellow colour palette throughout, visitors are greeted with a random visualisation that animates with pointer movements. Largely typographic, there’s also some neat WebGL work powering hypnotic optical illusions. However, the real highlight emerges within the ‘REMIX’ mode found in the vertical left edge link on

38

may 2020

the site’s unique 360-degree bevel menu. This transforms into four draggable handles for manipulating attributes such as spacing, outline, crop and scale for the selected visualisation.

An input field even allows the text string to be customised, giving users a myriad of options for generating new creations.

Inspirational sites

CSS3, JQUERY, GSAP

PEST STOP BOYS www.peststopboys.co.uk

Purposefully, this funky little URL looks more akin to something the Pet Shop Boys might put out. The legendary synth-pop duo are back after all, busy publicising new album Hotspot and a series of live dates this year. But no, this site shouldn’t be confused with them despite the obviously deliberate naming choice.

Pest Stop Boys are in fact modern-thinking pest controllers marketing services to plagued millennials around the Brighton and Worthing area. A witty warning that “this website contains bugs” immediately sets a fun tone, before a fullscreen logo header floods the viewport. The colours are disarmingly vibrant, using two SVG backgrounds and CSS transforms to create an amusing rollover. Here a ‘bubble’ follows the cursor to provide a mask that not only splices the positive and negative graphics together but also reveals aforementioned bugs crawling beneath. It’s a simple yet neat trick that makes use of similar TweenMax animations we encounter when navigating further down the single page. In truth, there isn’t much more to scroll with Leicester-based marketing agency Herdl opting for a compact, business card-type design. A mission statement makes good reading, but the initial ‘Monkey Business’ says enough… That’s a Pet Shop Boys reference, not a service option.

may 2020 39

GALLERY Inspirational sites

SI T E OF T HE MON T H

HOUDINI FX, THREE.JS, WEB AUDIO API

THE TURN OF THE SCREW

www.operanorth.co.uk/turn-of-the-screw-immersive-trailer Opera can be something of an acquired taste, which can make enticing new and perhaps younger audiences into theatres to see performances somewhat tricky; a problem that this innovative website hopes to address.

The Turn of the Screw is an “immersive trailer” for Opera North’s 2020 actual stage production of Henry James’ novella, featuring compositions by Benjamin Britten. Built by the UK’s real-time development studio Lusion, the desktop-only project was a collaborative effort with York University’s AudioLab, XR Stories and sound artist James Bulley. What we get therefore is a wonderfully cinematic 3D experience featuring music recorded using spatial audio techniques. This is cued to interactive WebGL graphics and a narrative timeline, sweeping viewers through five spooky scenes. These place ghostly figures within haunted landscapes, enabling users to hover-zoom and control how closely each operatic vocal is heard. The effect is naturally most prominent with headphones, conjuring an atmospheric and often unsettling sense when the sound floats eerily behind. Thoughtfully, for true aficionados, there is also a choice between low, medium and high versions available, with the latter employing 100MBs of uncompressed FLAC audio for best results.

40

may 2020

Inspirational sites WEBFLOW, JQUERY, UNDERSCORE.JS

MOON ULTRALIGHT https://moonultra.com

In an age when the selfie is everything, the battle for better

how the MOON UltraLight operates over several scrolls or swipes. Bold imagery,

lighting is demanding new solutions.

While most cutting-edge smartphones

predominantly of phones, is expertly loaded into each little scene and

have flashes and enhancement tools for

manipulated to illustrate various

brightening nocturnal snaps, it can be tough to get natural results in darker

functions. The motion work, transitions and transforms are so perfectly

conditions. So despite the fact that they appear to be headphones at first, MOON

executed it’s a joy to behold and a real lesson in glossy ecommerce. Wholly

UltraLight is indeed a little light for illuminating device screens and

rewindable and identical across desktop and mobile versions, it’s heartening to

inevitably, cameras. This single page, parallax brochure provides a

see MOON UltraLight the URL is as universal as the MOON UltraLight itself.

sumptuously smooth insight into how

Rounding things off with a functional

the product works with Apple-like, stylish finesse. Produced by Digitas’

footer carrying associated navigation, we also get links to an integrated

award-winning senior designer Joseph Berry, the site imaginatively animates

shopping cart that stays seamlessly true to the overall experience.

may 2020 41

GALLERY Inspirational sites GSAP, PIXIJS, VUE.JS

HEIHEI I-SPY https://ispy.heihei.resn.co

Engaging the hearts and minds of young web users is growing increasingly difficult, given the myriad of competing distractions online. This was indeed the challenge for Travel Aotearoa, New Zealand, when attempting to extoll the virtues of the region to curious kids. The resulting experience is i-Spy, a kind of Where’s Wally (or Waldo) for the point-and-tap generation. Made for the children’s content network HeiHei and paid for by the broadcasting funding agency NZ On Air, the site was built by the remarkable folks at Resn. Featuring the charming artwork of Wellington-based illustrator T Wei, i-Spy challenges users to spot specific characters or animals concealed frustratingly in plain view. A choice of five detailed 2D locations are packed with lavishly hand-drawn scenery and crowds of maddeningly similar figures from ramblers to campers, swimmers and skaters.

Challenge mode sets your search skills against a timer, while Free Play makes the hunt more leisurely. Immediately accessible and fiendishly engrossing, it’s amazing how taxing i-Spy is for all ages and how cleverly little NZ factoids are dropped in to keep it mildly educational. Equally enjoyable across the devices, it’s probably still true to assume the game’s swipe-seek mechanics were engineered for touchscreens first.

42

may 2020

Inspirational sites

THREE.JS, NUXT.JS, ANIME.JS

WE ARE ZIZO https://wearezizo.com

Traversing not just the globe but also the dimensions, this is a 3D masterpiece. Very much themed around the notion of travel, ZIZO Festival is a new WebGL experience showcasing the talents of Japanese agency ZIZO. Boasting offices in Osaka, Tokyo and Nagoya, the team has combined animation technologies to render a serene adventure land for visitors to explore. Using an anime art style and indeed JavaScript library Anime.js, the traditional portfolio site structure is transformed completely into an interactive cartoon. Customisable scrolling, or gyroscopic tilts on mobile, zooms the viewport like a camera through Studio Ghibli-like blossom gardens, shrines, waterfalls and river trails to find key sections. Across each little vignette we discover who ZIZO is, the company values, what it does, services provided and also how to make contact. Within this we learn that ‘Waku Waku’, or the notion of looking forwards to good things, excitedly, is an important ingredient for ZIZO projects. Indeed this beautiful site embodies such spirit, both visually and more significantly in the splendid audio work featured throughout. Charming voice samples, looping birdsong, woodblock strikes and a whole selection of Hôgaku-style music adds immersive tranquillity not to be missed.

may 2020 43

DISCOVER

THE RISE OF THE ROBOTS

Explore the styles, tools and techniques to build CG mecha

NOW INCORPORATING All your favourite 3D content can be found in its new home!

FREE

7GB

OF RESOURCES & VIDEO

www.bit.ly/3dworld-app PRINT www.myfavouritemagazines.co.uk/3dwsubs NEWSSTAND FOR IOS

Issue 258 on sale now

Sublime design & creative advice

THIS MONTH FEATURING...

DESIGN EXHIBIT SHOW OFF YOUR WORK IN NET!

PROFILE

46

HOW WE BUILT

52

We talk to the team at award-winning studio Superhero Cheesecake to learn how they create unforgettable interactive experiences

Our feature format – the Design Exhibit – offers you the chance to show off your concept sites, portfolio projects and prototypes.

This is a great opportunity to reveal your design skills without necessarily needing to have had them developed into live commercial sites.

If you’re interested in being featured, please tweet us @netmag or email us at netmag@futurenet.com

Jam3 reveals how it took us into the future to showcase a new adidas sneaker with its adidas Ozweego 2048 site

may 2020 45

SHOWCASE

SurĽoh

INFO Location: Amsterdam, Netherlands

Established: 2008 Team size: 34 Expertise: Campaign and experience, product and platforms, innovation Clients: Heineken, Uber, Puma, Scotch & Soda

Awards: 139

46

may 2020

SurĽoh

PROFILE

SUPERHERO CHEESECAKE www.superherocheesecake.com

Designers at award-winning Amsterdam studio tell Tom May how they go about creating “unforgettable interactive experiences” Founded in 2008, Superhero Cheesecake doesn’t just have a brilliant name, it has done some quite brilliant work too. Teaming up with global brands and creative studios across the planet, it’s won more than 130 awards for its projects, which range from experiential websites to AR installations, data visualisations to online games. And through passion, pride and plenty of elbow grease, it continues to dazzle clients and the community.

We chatted to design director Massimo Meijer and senior visual designers Alicia Goodmanson and Joao de Almeida about some of their latest work, how seriously we should take AR, and where the studio is heading in the 2020s.

Your mission statement says you aim to create “unforgettable digital experiences”. But what makes an experience unforgettable and how do you achieve that in practice?

AG: For me, an unforgettable experience is something that surprises me; a little detail I wasn’t expecting. Something simple, yet clever. At Superhero Cheesecake, we try to create moments like this in almost everything we do.

This means every project has a core team working together to find new, innovative ways to delight the user.

may 2020 47

SHOWCASE

SurĽoh

Having a strong team from a variety of disciplines allows us to ideate and collaborate, to create something that’s beyond the expected. Bringing our combined skill sets and knowledge together, we’re able to create those ‘unforgettable’ moments.

JA: As with any other human-human or human-machine interaction, everything boils down to triggers and emotions. If an experience doesn’t cultivate a deep emotion, a ‘wow’, or simply pure delight, it will probably be forgotten. In practice, we have to make sure people discover those moments every single time.

What kind of tools and technologies do you work with?

AG: There are no rules when it comes to choosing what tools or technologies we use. It gives us the flexibility to experiment, find new ways to tackle problems and improve work processes.

Generally, if it’s a good fit for a project, we’ll give it a go. I’m constantly experimenting with new tools, whether it’s a prototyping tool or a platform to collate inspiration. I tend to share my findings with the team and if it’s interesting for people we’ll integrate it into our toolkit.

Typically, I’ll use Sketch and more recently Figma, as a core design tool. But I will also usually have Photoshop, Illustrator and Principle open, working across all tools at once.

JA: It depends on the project we are facing. By default, tools do not dictate our work. We use technology to enhance our desired outcome. So for example, you might see us working with 3D models, Lens Studio and After Effects one day, then Sketch and Craft CMS the next.

What are some of the key projects you’ve worked on recently?

MM: Dime Trap (dimetrap.com) gives users an interactive journey through hip-hop artist TI’s world, enabling them to explore what inspired his tenth album, but also the man himself. As you explore the album art, you hear first-hand accounts from TI, including stories about the Trap and the major events that have impacted his life.

48

may 2020

The Dime Trap album project enabled users to embark on an interactive journey through the world of hiphop artist TI

Evert_45 (evert45.com) is a digital storytelling campaign designed to fuse online and offline worlds, and communicate historically important accounts to a new generation whose experiences are part-digital, part-real.

Evert is a 13-year-old boy: he loves his mother, playing practical jokes and vlogging every minute of his day on social media. The only difference is it’s 1945, and he’s about to go on a journey across The Netherlands – with smartphone in hand – to find his missing brother. You can follow Evert’s journey in an immersive and captivating online experience, through imagined Instagram and YouTube content carefully crafted from interviews with World War Two veterans, historians and teachers.

The Next Rembrandt (www. nextrembrandt.com) tells the story of how a painting that looked like a 17th-century Rembrandt was unveiled to a bustling auditorium in 2016. In fact, it was created by a computer, using deep-learning algorithms, facial recognition techniques and data pulled from Rembrandt’s body of work. This website lets you discover how the painting was brought to life, move through interactive chapters and experience the process behind-thescenes; from first stroke to final pixel.

You’ve also been doing some interesting work with AR: can you share an example of that?

MM: For the introduction of the 2019 Porsche Macan S, we partnered with Cramer-Krasselt to create a one-of-itskind Facebook Spark AR effect. People all over the USA were able to see a Porsche Macan ‘come to life’ via coordinated Macan S OOH billboards and print magazine ads.

Using their cameras, they could project their own faces right into the driver’s seat and see exactly how they’d look driving around in a Macan themselves.

In addition, people were able to fully customise their Macan using a bespoke Spark AR user interface; changing the paint colour and choosing from an assortment of wheels and rims. And they could share their experience on social networks via a downloadable and shareable video and image.

What’s the secret to a good interactive experience in a physical location?

AG: Oh, that’s a good one. I’d say something that feels natural and fluid to engage with; nothing that requires a big learning curve. Also, being mindful of how the experience interacts with the environment around it.

SurĽoh

SPOTLIGHT

ALICIA GOODMANSON Senior visual designer

What’s on your desktop?

Superhero Cheesecake merged the online and offline worlds for the Evert_45 campaign, as a way of keeping history alive for a new generation

JA: This is perhaps the most difficult question for me to answer. I’d say it comes down to focusing on people and what surprises them. Nobody wants to see your logo or your company’s mission; at least not in a physical location. So leave all the unnecessary branding and commercial clutter aside and take the experience to a higher sensorial level.

There’s a lot of hype surrounding AR. How important do you expect it to be to your work in the 2020s?

AG: AR has helped mould the real-world with the digital world. It’s enhanced how we can interact with technology, opening the door for new ways we can communicate with our audiences. I expect, or at least hope, to see more of it in my work; it certainly won’t be ignored!

But like anything, it needs to serve a purpose for me to consider it for a project. Sure, there is hype around AR, but deservedly so. There’s no doubt we’ll continue to see further evolution of AR in the near future.

JA: As any other tool or technology, AR has its own life timeline. We’ve seen it with VR, chatbots, smartwatches, portable consoles, Google Glasses, you name it. In some ways they flopped and in some ways they succeeded; there are

always good takeaways from those experiences. As a company, we have to jump on board to make sure we evolve with the industry. We learn new tricks to old problems and eventually find the sweet spot of creativity and innovation.

AR seems to have way more potential than VR for example, which is why it’s been better adopted by the masses. In that sense, we can’t really call it hype.

However, I believe it will morph into something more seamless and perhaps more profitable.

Why do your sites win so many awards?

AG: Attention to detail, thoughtful interactions, unexpected moments, simple solutions to complex problems.

JA: Superhero Cheesecake is known for good front-end development and high attention to details regarding motion and interactivity. Those ingredients will guarantee you a spot in people’s minds.

You’re also known for creating online games for brands. Do you have any advice for someone taking on this kind of project?

AG: Whether it’s a game or any other project, I always start at the core of a brand – its essence – and build on from that. I believe that’s how you create

A folder named Desktop and a screenshot of a Tardigrade.

What’s on the walls?

A project road map, 40+ devices for all our testing needs, a neon sign and lots of drunk (slightly regretful) photo booth pics from various nights out.

What will you do for lunch?

We’re fancy and get a catered lunch.

Some highlights from today’s menu are sweet potato, chicken and rice, with a salad of couscous, baked cauliflower, feta and other yummy things.

What hours do you work?

Hmmm, it depends on the project.

Sometimes when we’re working with American clients we might need to have later meetings, so we’ll start a bit later that day. Monday, we’re punctual for our team weekly stand up. On Fridays, we finish early for beers.

What else do you do in the office?

Drink lots of coffee and beer. I’m all about that healthy lifestyle.

How often do you all hang out?

We have monthly parties, so that’s a given. But most of us will stay back on Friday for drinks. Occasionally we’ll go to creative events together, or take the afternoon off to visit some galleries.

Describe your office culture in three words Inspiring. Encouraging. Energetic.

may 2020 49

SHOWCASE

SurĽoh

TIMELINE

Key dates for Superhero Cheesecake OCTOBER 2008 Founded in a basement in Hilversum, North Holland.

NOVEMBER 2011 Officially listed in the chamber of commerce.

JUNE 2012 First FWA won with Volkswagen Das Interland.

APRIL 2015

The Next Rembrandt website enables users to get a behind-the-scenes look at how a variety of computer techniques combined to produce an authentic-looking painting by the Dutch master

Becomes agency of the year in The Netherlands.

MAY 2016 Hires its 30th employee.

JUNE 2016 Wins 16 Cannes Lions in one year.

JUNE 2017 Becomes second Dutch studio ever to be inducted into the FWA Hall of Fame.

JANUARY 2019 Wins 50th FWA.

JANUARY 2020 Prepares to open up a second office in the USA.

The Porsche Macan S campaign involved a oneof-its-kind Facebook Spark AR effect

50

may 2020

authentic, memorable brand moments that people can resonate with.

JA: I’d say the main thing to consider is the social aspect of your game. As a brand, if you cannot create a conversational piece that goes beyond the boundaries of your game, you might be spending money foolishly.

You’ve also done work with data art.

What are your tips for harnessing this technique for commercial ends?

AG: Using data visualisation can help make complex information more digestible. It can also shine a light on topics often missed, turning something dense or dry into something visually powerful. It can be a clever, aesthetically pleasing way to communicate important information, which in turn gives it potential for commercial use.

What else is exciting you in the world of web design right now?

AG: It’s not necessarily new, but something exciting me at the moment is meshing traditional, tactile practices to make digital experiences more real and authentic; for example, using illustrations or brush techniques to influence a style or an animated gesture.

I’m also excited to see more interesting

ways we can use data to capture our mood, the weather, songs we like and so on, to create a more personalised, realworld online experience.

JA: The fact that it’s becoming harder to keep up with top-level professionals. The bar is super high right now and I love it.

How do you see Superhero Cheesecake evolving in the future and what are the biggest challenges you expect to face?

AG: We’ve built up a really strong, crossdisciplined and global team, so we’re pretty excited about the future. Like any studio we have challenges, but we have a really open dialogue, which helps us stay on top of ‘challenges’ we might be facing and keeps us ahead of the pack. We’ll continue our mission to create humancentred, premium online experiences that aim to transform brands and make a lasting impression.

JA: I see us evolving into luxury brands, crafted work, installations and anything attached to emotion-driven experiences.

What do most people not know about Superhero Cheesecake?

MM: Every now and then, tourists drop by the office and ask where they can get some cheesecake.

JA: We have more printers than toilets.

The number one destination for web design news, views and how-tos Ecr Apc_rgtc @jmo bgpcar rm wmsp gl`mv ugrf msp uccijw uc` bcqgel lcuqjcrrcp

Graphic design

Art

Web design

3D

www.creativebloq.com

Digital art

SHOWCASE

How we built

HOW WE BUILT

ADIDAS OZWEEGO 2048 Jam3 took us into the future to showcase a new Adidas sneaker: here the team tell Tom May how they did it

2

4

3 1

5

CLOSE UP BRIEF Adidas asked Jam3 to help it launch the Ozweego: a classic silhouette modelled after the shoe brand’s greatest archival hits. The brief was to communicate a product story that would speak and appeal to both trendsetters and casual sneaker fans.

52

may 2020

(1) A WebGL wormhole reacts to how the user scrolls. For example, if the user scrolls fast, the wormhole will get faster and brighter. Scrolling also brings the user towards three different Ozweego models, rendered in 3D, within a 360 environment that spins with the product. (2) Next to the ‘Most Read’ marque, users can enjoy news channel-style rolling text, which presents a variety of topics about the future of style.

(3) The outlined blue and yellow shapes, in

addition to the central copy, respond as you move your cursor around the page. (4) The futuristic typography was inspired by the Ozweego silhouette. The curves and fluid feel of the shoe translated well into beautiful typography. (5) The audio can be toggled on and off. Audio was a major concern when it came to ensuring the site worked well on mobile, with concessions having to be made to make up for autoplay not being implemented on all browsers.

How we built CAROL INE L EUNG

ADAM ROMANO

DANIL O NAGUR A TIMELINE

Key dates in the Adidas Ozweego 2048 project Leung is a strategist at Jam3.

Her portfolio includes work with Toyota, Warner Bros. and Complex Media. w: jam3.com

Romano is a creative director at Jam3. His work has been recognised with over 40 major industry awards. w: jam3.com

Nagura is an interactive designer at Jam3, focused on creating visually strong digital designs. w: jam3.com

JUNE 2019 Jam3 gathers visual, cultural and tech inspiration with the client over the course of a three-day workshop.

JUNE 2019 Jam3 starts initial creative explorations.

Launched last summer, Adidas’s

Adam Romano and Danilo Nagura to

Ozweego silhouette was a new take on a shoe whose aesthetic reflects

find out how they put it all together.

the aggressive design of the 1990s.

What was the initial brief for this site?

Featuring material elements from its predecessors, the Ozweego model

AR: Adidas approached us with a very open ask: come up with a really tech-

brought ADIPRENE technology into the present. And to mark the occasion in style, the brand partnered with Jam3 and online fashion magazine Hypebeast to create the homepage of the future (hypebeast.com/2019/8/ozweego).

With a time-warping WebGL experience, the site takes the user to 2048: the 60th anniversary of the Ozweego. With laser grids and interactive elements, the user is transported to the future of style. We caught up with Jam3’s Caroline Leung,

driven, exciting way to launch the FW Ozweego. As a culmination of the brand’s most iconic silhouettes throughout history, the site essentially embodies the adidas brand story, which is ‘the past powers the future’.

You’ve already worked with adidas previously, right?

AR: Yes, we’ve partnered with them on a number of other digital-first campaigns and experiences – including ComplexCon and Coachella. But this was the most

JUNE 2019 Propose thought-starters around how technologies such as AI, StyleGAN and 3D modelling could help augment fashion editorial.

JULY 2019 With the Hypebeast partnership confirmed, Jam3 starts the research and writing of the piece.

JULY 2019 Creative direction and interactive elements are proposed.

JULY 2019 Finalise the styling direction for all three eras, along with creative direction and UX.

JULY 2019 Build process begins.

AUGUST 2019 Conduct performance and usability testing. Additional details such as headlines and gallery come together to complete the experience.

AUGUST 2019 Website published.

Above Three different Ozweego models are rendered in 3D

may 2020 53

SHOWCASE

How we built

1

2 3

EVOLUTION (1) To have more realism and fidelity in texture and colour, 3D models of the adidas Ozweego were generated through a 360 photo session. (2) Typography study to define shapes and composition. The typography follows the fluid silhouette of the adidas Ozweego, with rounded corners and diagonal curves. (3) Quick composition study to experiment with the placement of the logo, typography and wormhole creative direction. (4) Colour and treatment study. Glow and noise texture were the main treatments that helped us bring the futuristic feeling, however the typography and logos in outline help these elements stand out. (5) Study of compositions and lockup for notifications and microcopies. In addition to bringing news from the future, notifications/microcopies also serve as texture and bring movement and flow to the website. (6) Envisioning what fashion might look like in 2048, this is a 3D interpretation of how futuristic outfits would be stylised with the adidas Ozweego.

4

5

6

54

may 2020

How we built

Above The site allows the user to view the new sneaker in 360 degrees

Above The shoe is presented in a 360 environment that spins with the product

blue-sky one yet. Because today’s audience doesn’t experience anything in a vacuum, there was also a physical facet to the digital launch that took place in the Lower East Side in NYC. Ultimately, we landed on a broad enough concept that could be uniquely exciting in both mediums: the future of style.

How did you begin to progress from the initial concept?

AR: ‘The future of style’ is a hypothetical that we’d all daydreamed about in one way or another, so everyone was able to chime in with their own what-ifs. The future of the supply chain. Materials and silhouettes that we’ll need to navigate a warmer earth. The blurring lines between gender. What digital editorial would look like in 60 years.

Since the current ridiculous pace of culture could justify anything, we all were able to contribute suggestions that eventually made it into the experience – as a headline, part of the story, or a styling input. It was absolutely thrilling to see how such an out-there creative process [went on to] contribute to a really cohesive vision.

How involved was the client on a dayto-day basis?

CL: We were lucky enough to work with people from adidas who were just as passionate about culture and pushing

Above The typography is retro sci-fi themed and the microcopy is tongue-in-cheek

the bar as we were. The brief felt quite collaborative in the sense of the creative vision, thanks to the three-day workshop that kicked off the project. We’d pitch one idea and build on it with them in real time, based on what they’d learned from previous campaigns. Despite the tight timeline, our producers were absolute champs in coordinating communication and feedback across multiple time zones.

There’s a very clear graphic style present in this site! How difficult was this to nail in practice?

AR: The visual direction took cues from the fluid lines of the Ozweego silhouette, as well as a sense of retro-futurism that is meant to bridge the computational aesthetics of the 1990s, with 3D z-axis navigation to represent the future.

What technologies did you use to build the site and what were the biggest technical challenges overall?

DN: We built the site in WebGL. The biggest challenge was ensuring performance while also maintaining the fidelity and lighting of the Ozweego

may 2020 55

SHOWCASE

How we built

Above A circular carousel is one of the technical and artistic highlights of the site

models – all of which had to work across multiple devices.

There’s some entertaining microcopy on this site – who came up with that?

CL: The stylistic extremes of the creative direction permitted a lot of creative license. And our gorgeous writer, Evan, is a master of satire in his own creative practice. While a lot of the parameters were set by the initial client workshop, our client loved his sense of humour and encouraged us to go broad. From there, he watched CNN for about 15 minutes – and there the lines were.

We love the ‘retro future’ look of the typography especially. Can you tell us a little about how that came about?

AR: The typography was also inspired by the Ozweego silhouette. We translated the curves and the fluid lines of the shoes to shapes that could bring a futuristic feeling to the type.

56

may 2020

Were there any challenges in getting the site to work well on mobile? Was accessibility a concern in general?

DN: The challenges were primarily about figuring out how to condense such an immersive experience to a much smaller viewport, and ensuring it was still performative. The goal above all else was creating excitement about Ozweego and ensuring we were doing the brand justice.

Concessions needed to be made in terms of audio for mobile because we couldn’t implement autoplay on all browsers, but beyond that we were able to uphold the aesthetic integrity of the desktop experience.

Did you do any testing and if so, how did you go about it?

DN: We did: our QA team did a great job at making sure the outcome was the vision we all had in mind. A lot of our initial worries were around performance, and the development and QA teams worked

together flawlessly to ensure nothing was a compromise.

What did you learn from this project that you’ll use on future site builds?

CL: Embrace a broad concept. As terrifyingly open as the concept was, we were able to all own a piece of it. That sense of collective authorship really fuelled us through the timeline.

We learned a lot about how to work under extremely tight deadlines. At a certain point, a good portion of the company were all working on the project.

It was very much an all-hands-on-deck approach. This required us splitting into teams to address the requirements for both the digital experience and the complementary physical installation we built in NYC. Ensuring that both facets were conceptually harmonious required a lot of communication and trust.

Ultimately, we’re incredibly proud of what we’ve achieved.

GET NET FROM £2.10 PER ISSUE!

SAVE UP TO

70

%

W

Wklv#rļhu#lv#RQO\#dydlodeoh#yld#rxu#rqolqh#vkrs#

www.myfavouritemagazines.co.uk/digital Available on

iOS or

Android may 2020 57

FEATURES Hot new HTML tags

HTML elements are the building blocks of the web.

Matt Crouch highlights the tags you should be using to make sure you are building your sites the correct way

58

may 2020

Hot new HTML tags

This tag can distinguish supplementary information usually found in small print such as disclaimers or copyright notices. This would be used for inline content, rather than a full blocklevel <aside>.

While it will display as smaller text by default, it should be used sparingly and not purely for stylistic purposes.

Room rate: £80 <small>excluding VAT</ small>

CodePen (https://codepen.io/) uses <details> and <summary> elements in order to describe its different features on smaller screens

An <output> denotes where the

AU TH OR MATT CROUCH Crouch is a front-end software engineer for mobile video specialist Vidsy. He works with companies and creators to ensure their content is accessible to everyone. w: www.mattcrouch.net t: @mattcrouchuk

Whenever something on a page needs to be interactive, JavaScript is often the first port of call. Showing and hiding content can be as straightforward as toggling a class. But this behaviour is already available, with no added page weight, right inside HTML. The <details> element will hide its content by default. When the user clicks the heading, it expands to reveal the content inside. It can also be given a custom heading using the <summary> element. This can all be controlled using JavaScript as well, but gives some default behaviour for free.

It is supported by all major browsers apart from Internet Explorer, which will by default fall back to an open state to make sure the content is not lost.

This can be great for an FAQ section where bulky text blocks are not instantly required. <details> <summary>How does this element work?</summary> <p>Any content inside is hidden by default.</p> </details>

result of a calculation will be displayed. For example, range sliders have no visual indication of the actual selected value and an <output> can be used to hold that value.

Any content inside an <output> element is read aloud by screen readers as it changes, which is similar to an ARIA live region. <input type=”range” id=”slider” min=”0” max=”100” value=”40” /> <output for=”slider”>40</output>

When writing content that should be interpreted as computer code, the <code> element will separate it from the rest of the text. By default, it is styled using a monospace font.

Code snippets that cover multiple lines should also be wrapped in a <pre> element, which preserves the whitespace within it.

The content can be shown by providing the <code>open</code> attribute.

may 2020 59

FEATURES Hot new HTML tags

Most languages have some way to recreate common code. Each template stamps out copy of itself to be used as a starting point for some other use. In HTML, this task is achieved using the <template> element.

Any content inside the element is inert by default.

While a browser will parse what’s inside, it does not render anywhere or expose it to any selectors. It only becomes active once it is cloned.

Templates are cloned using JavaScript. Running template.content.cloneNode(true) on a selected template will deeply copy all of the nodes within it. They can then be updated like any other elements. These are usually used with web components to produce an interface in shadow DOM, but can be used anywhere repeated content is needed, like a table row. <template> <tr>

<td><!-- Name --></td> <td><!-- Email address --></td> </tr> </template>

While using overflow-wrap or word-break CSS properties gives some control over line breaks, they can end up either breaking in unsuitable places or not breaking at all. The <wbr> element hints to a browser where it could break a word up should it need to.

For example, dots in URLs could be misinterpreted as the end of a sentence. The <wbr> element can mark split points just before each dot. https://<wbr>www<wbr>.creativebloq<wbr>.com/

Sometimes there can be data that makes sense to humans, but machines can find difficult to parse. The <data> element provides a hook for them and to provide an alternative meaning with the value attribute.

It can be used for any shape of data, such as product IDs or ISBNs. For date or time values, the <time> element should be used instead. <data value=”9781484254516”>Practical Web Inclusion and Accessibility</data>

60

may 2020

Use Open Graph meta properties to provide contextual information when someone wants to share the page

Like most elements inside the <head> of a page, the <meta> element is easy to overlook. But this one gives important information about the page to the browser and can help crawlers such as search engines get a better idea of what it contains.

A theme-color can be defined to update the browser UI with more continuity with the page being shown. An application-name can provide a browser with a clean name free of any application state that can be displayed using a page’s <title> element.

Proprietary meta properties are provided by some social network platforms. Facebook uses its Open Graph protocol, which can also be consumed by other platforms such as LinkedIn. Twitter has developed its own Cards format, but will also fall back to Open Graph if these are unavailable. These properties help provide a rich experience on these platforms when users post to the page. <meta name=”theme-color” content=”#FFE3F5”> <meta property=”og:image” content=”http://example.com/image.jpg”>

Hot new HTML tags

While a <select> element enables users to choose from a list, it can be

Tables can be packed

overwhelming and

with information, but

difficult to use them in order to navigate large lists with

without a description the values inside may

similar values.

A <datalist> element defines

not be clear.

Surrounding text may give

options for other controls, such as an <input>. By using the list

some context, but a caption makes it explicit.

attribute on that element, it can then be populated with a value

The <caption> element should be the first inside the

from this list, much like an

<table> it describes. By default,

autocomplete function.

it appears above the table, but it can be adjusted using the

<datalist id=”meal-type”> <option value=”Meat”> <option value=”Fish”> <option value=”Vegan”> </datalist>

caption-side CSS property. <table> <caption>How many times a scoreline occurred by home and away teams</caption> […] </table>

When form controls would be logically grouped, the <fieldset> element can semantically link them together.

Groups of radio buttons are a perfect use-case for this particular element. A disabled attribute on a <fieldset> will disable all inputs inside it.

Any <fieldset> needs to be accompanied by a <legend>, which provides a title for that group. <fieldset> <legend>Remember me?</legend> <label><input type=”radio” name=”remember” value=”yes” /> Yes</ label> <label><input type=”radio” name=”remember” value=”no” /> No</ label> </fieldset>

The MDN web docs site is the first stop for many developers who need a quick reminder of the essentials. MDN (https://developer.mozilla.org) hosts a comprehensive breakdown featuring many web technologies, including CSS properties and JavaScript APIs. In particular its HTML section (https://developer.mozilla.org/en-US/ docs/Web/HTML) provides a detailed introduction to the fundamentals of this key language. For beginners, it talks through the basic structure of a document. From there, different tutorials introduce new concepts within the language.

For those that already have the basics covered, the MDN advanced topics cover cross-origin policies and how to preload content to optimise the user experience – all without needing to reach for JavaScript.

HTML specifications, while important, can be difficult to read.

On MDN each element has a helpful entry to walk through some of the complicated jargon and even suggests ways each one should, or should not, be used. The included editor provides a sandbox to quickly try out each element to see if it’s the right fit. It’s worth having a browse here, as many common elements are more versatile than on first glance.

Its content is constantly evolving, much like the web itself. It’s therefore worth keeping an eye on the release notes (https://developer.mozilla.org/ en-US/docs/Learn/Release_notes) to see what’s been updated each month.

Deprecated elements still have their own entry but will refer to a more suitable, modern alternative

may 2020 61

FEATURES Hot new HTML tags

Text displayed as subscript or superscript, such as atoms in chemical formulas or exponents in mathematical formulas, can individually be styled in CSS. To keep their semantic meaning, however, we can use the <sub> and <sup> elements respectively.

These should not be used purely for stylistic reasons. In those cases, CSS is the right approach.

H₂O

a² + b² = c² <track> elements can be read by JavaScript and displayed in creative ways in sync with the <video>

Similar to <source> the <track> element provides extra context that the browser can use to enhance the behaviour of the <video> or <audio> elements. In this case, it is data that is wholly dependent on the current time of the content being played, such as subtitles.

Their src attribute is a file in either a WebVTT or TTML format. Both provide a timestamp called a ‘cue’ and some kind of associated data. This is often text, but can also be objects or even HTML. Dependent on the type, this can then be displayed on top of a <video> element by the browser. The subtitle captions type is for text descriptions of what’s happening. This provides an immediate benefit for those that are hard of hearing or choose to have the sound muted.

They can also provide supplementary information such as metadata or chapter markers. Users can then use this information to more easily navigate media, while search engines can use it to index content. <video src=”video.mp4”> <track default kind=”captions” src=”cc.vtt” srclang=”en” /> </video>

Many websites provide contact information in order to locate the business or contact an author. The <address> element should be used to wrap all this information to make it easier for automated tools to pick it up.

It refers to the author of the website, but can also refer to the author of an article if placed within an <article> element. <address>

Email: <a href=”mailto:netmag@futurenet.com”>netmag@futurenet. com</a> Twitter: <a href=”https://www.twitter.com/netmag</a>@netmag</ a> </address>

Image maps enable different parts of an image to be clickable links. While these are not a new design pattern, they are still useful for creating interactions that would be difficult through text, such as a map.

A <map> takes a name attribute, which links it to an <img> element somewhere else with a usemap attribute. Each <area> inside a <map> defines a place the user can click. <map name=”london”> <area shape=”circle” coords=”200,75,50” href=”westminster.html” alt=”Westminster”> </map> <img usemap=”#london” src=”map.png” alt=”Map of London” />

62

may 2020

Hot new HTML tags

Pug works well with dynamic data.

It converts object properties into variables to populate templates

The <video> element was the standout addition

to arrive in HTML5. This, with its <audio> equivalent, powers virtually all of the media on the web today.

It can either have a src attribute that defines

the content to play, or a set of <source> elements within

HTML is a declarative language. While it has many features, they are statically defined and cannot change on their own. HTML can be made dynamic, but not without the inclusion of JavaScript and this often requires using some unclear syntax.

Pug (https://pugjs.org) is a templating language for HTML. It enables us to write conditional HTML and generate useful snippets to include whenever they are needed.

it that the browser can choose from. It will decide what source to play based on the order they are provided.

We can choose to serve higher quality videos to those with higher density screens, or less dynamic content for those who prefer reduced motion.

Some browsers are experimenting with displaying videos in a small, floating window on the screen while the tab is not active. This can be enabled using the autopictureinpicture attribute. It can also be explicitly disabled using disablepictureinpicture.

Similarly, content can be shared to a remote device like a Chromecast or Apple TV if the browser supports it. This can be controlled using JavaScript, or completely disabled with the disableremoteplyback attribute.

- for (var i = 1; i <= 3; i++) li item #{i} The Node library runs server-side in response to requests, but it can also be used to generate lots of HTML pages ahead of time.

<video> <source src=”video.webm” type=”video/webm”> <source src=”video.mp4” type=”video/mp4”> </video>

Similar to Pug, Emmet (https://emmet.io) is a tool that can speed up the repetitive process of writing HTML. Commands are typed using a syntax similar to CSS selectors. Emmet can then parse and expand its context into full HTML. li*3>{item $}

While the cite attribute on <q> and <blockquote> elements can be useful metadata, the <cite> element itself is used when we want to show the cited source to the user.

A <cite> element should only contain the name of the cited work, such as a book or a play. It should not include the names of anyone involved in its creation. <cite>Net magazine</cite>

While the syntax may seem convoluted at first, it can greatly speed up common patterns of nested elements such as tables, lists and navigations.

Emmet is not limited to writing HTML, it can also help navigate and modify it. For example, it can select all the contents of the current element and comment it out.

Editors such as VS Code show a preview of what an abbreviation will look like

may 2020 63

FEATURES Hot new HTML tags

Modern devices come with screens in a range of sizes, aspect ratios and pixel densities. By

A <q> element is an inline element designed to contain

supplying only small or only large images, users are getting a lower quality experience

a quote from someone or something. User agent styles will wrap its contents in quote marks automatically. It

either by receiving low-resolution imagery or by having the page load slower.

The <picture> element enables us to define different sources for the same image, depending on multiple factors such as screen width, device orientation or support for a specific format such as WebP. All that is required is setting the appropriate media query for each defined <source> with a srcset attribute.

For example, users navigating using dark mode can be provided with a darker image by using the prefers-colorscheme: dark media query.

has an optional cite attribute that can be a link back to the original source.

The <blockquote> element performs the same role but for longer, block-level quotes.

Jeremy Keith describes HTML as the <q>unifying language of the World Wide Web</q>. <blockquote> It has an optional `cite` attribute that can be a link back to the original source. </blockquote>

This then gives us specific control over what image to show when. The similar srcset attribute on the <img> element gives the browser more freedom over which source to choose. Use the <picture> element for deliberate art direction, such as simplifying a diagram for smaller screens. <picture> <source srcset=”images/2x-landscape.jpg 2x, images/1x-landscape. jpg 1x” media=”(min-width: 50rem)” /> <source srcset=”images/2x-square.jpg 2x, images/1x-square. jpg 1x” /> <img src=”images/1x-landscape.jpg” /> </picture>

By wrapping a word or phrase in the <dfn> element, it indicates that this is the term being defined. When it’s placed inside a <p>, <dl> or

<section> the content surrounding it is treated as the definition. An id attribute can be used to link back to it whenever it next appears in the page. <p> <dfn>Semantic markup</dfn> is HTML that provides meaning to content as well as presentation. </p>

64

may 2020

The Verge wraps its pull quotes in an <aside> element to remove them from the main flow

In technical writing, variables are a common occurrence. In order to avoid confusion with the rest of the words in a sentence, the <var> element can be used to separate and style these separately.

For larger expressions, MathML may be a more suitable approach. But <var> can be useful when referring to parts of a larger expression as part of a sentence.

Using Pythagoras’ theorem, the squares of sides <var>a</var> and <var>b</var> give the square of the hypotenuse <var>c</var>.

Hot new HTML tags

This element should contain a list of different actions that a user can perform.

For example, this would be used when selecting paint brushes in a painting application. Think of this as the interactive equivalent to the <ul> element.

Previously, the type attribute would affect how the menu behaves. The context type would have enabled items to be added to the context – or ‘right-click’ – menu, but this has since been removed from the specification. Right now, the default and only type BBC News uses an off-screen description to tell screenreaders that do not support <figcaption> about its role

available is toolbar, which is used to display these elements on screen.

By default, this element has no styling and is used purely to provide meaning to the set of actions.

Currently, only Firefox respects its semantics, but there is no harm adding this element now for when there is wider support. <menu> <li><button>Round</button></li> <li><button>Flat</button></li> <li><button>Fan</button></li> </menu>

Blocks of text can often have content such as a diagram, chart or image referenced within it. While it may be related, it’s not required to understand the context. For this sort of content, the <figure> element is the perfect choice.

As a rule of thumb, any related content that could be selfcontained are good candidates as they can be consumed separately from the main document flow. They will likely be referenced by a number in a larger block of text.

A <figcaption> element can be used to provide a description to the contents. Using this provides a semantic link and makes sure that the description does not form part of the figure itself.

If the content is tangentially related to the main document, such as a pullquote, then an <aside> element may be better suited. <figure> <img alt=”Chart showing a spike in React-based projects” src=”framework-usage.png” /> <figcaption>JavaScript framework statistics 2010-2020</ figcaption> </figure>

When displaying changes to a block of text, it can be useful to be able to visually see what changed.

The <del> element shows what was removed and <ins> what replaced it. Both can have cite and datetime attributes, which define why and when this change occurred.

Despite the constant negative press <del>covfefe</ del><ins>coverage</ins>

Bitbucket uses <del> and <ins> to display what code has changed in each commit

may 2020 65

FEATURES Hot new HTML tags

Showing content in a separate, highlighted window is a popular pattern on the web. These are commonly known as ‘modals’ , but the <dialog> element covers more use-cases such as alerts.

On its own, a <dialog> element will not be visible. It

will only show up with the open attribute applied, when it is displayed above the rest of the page content automatically.

The color input on iOS presents a more touchfriendly interface with limited options

While the <input> element may be one of the oldest elements around, it has a lot of tricks up its sleeve. Even today, many websites still do not use them to their fullest potential.

The type attribute on an input can change its behaviour dramatically. For instance, color will display a colour picker to the user without the need for any extra JavaScript. A range will render a slider to pick between two values instead of requiring a specific value to be entered. A date input shows a localised date picker without any extra overhead.

While these have wide browser support, those that don’t will show a regular text input and can then be provided with a fallback experience.

These all automatically validate their content in a way that makes sense for that particular input. For extra checks, the pattern attribute can accept a regular expression that the entered value needs to pass in order to submit. <input type=”color” value=”#FF0657” /> <input name=”username” pattern=”[a-z]{5,10}” title=”Between 5 and 10 lowercase characters”>

Its accompanying JavaScript API enables dialogs to be opened with the showModal method, which then gives it a ::backdrop pseudo-element. This can then be styled to dim the content behind it.

Currently only Chrome, Edge and Samsung Internet browsers are supported. For those that lack support, dialogs will render like any other container and can be polyfilled to act the same. <dialog open> <p>This is a HTML-powered dialog box.</p> </dialog>

Smashing Magazine styles the <kbd> element to look like a small computer key

When providing keyboard instructions, such as shortcuts or search inputs, we need to differentiate the key names with the rest of the surrounding text. The <kbd> element is specifically applied for this purpose. <kbd> elements can be nested where necessary, such as a combination shortcut.

Close this window by pressing <kbd>Esc</kbd>

66

may 2020

Hot new HTML tags The appearance of <meter> varies by browser, but it can be controlled by styling pseudo-elements individually

Each browser can be scaled based on the global breakdown of people using those browsers

CanIUse.com

For numeric data that has a defined range, the

Although many features of HTML are well supported on the web, the newer elements like <dialog> are not completely covered by all browsers.

The Can I Use database lists all HTML elements and shows which features about them are supported by different browsers and are sorted by popularity.

Any known quirks between browsers are helpfully highlighted and referenced.

<meter> element can provide a visual indication of what that data means in context. The browser can conditionally style the element to warn of overly high or low values.

A <meter> should not be used to denote progression.

For that, the <progress> element it better suited.

<meter value=”6.4” min=”0” max=”10” low=”4” high=”9” optimum=”7.5”></meter>

The book details how HTML5 has simplified the language and made things more semantic

While a specific date or time in a sentence may be obvious in context, machines parsing that content might not understand. The <time> element separates a date or time from the rest of the sentence and can provide a datetime attribute that shows the date in a format that is easier for machines to parse.

HTML5 for Web Designers

This short book by Jeremy Keith and Rachel Andrew (https://abookapart.com/products/html5-for-webdesigners) details much of the history of HTML, the need for a standardisation in HTML5 and where the language is heading in the future.

While aimed at priming designers for development work, there is plenty of useful guidance to work as a refresher for any developer.

GenerateJS is happening on the <time datetime=”2020-04-02”>2nd April</time>!

A description list (<dl>) groups a set of terms and their descriptions. It is used for sets of key-value pairs such as a glossary.

Each term is contained within a <dt> element, followed by a description within a <dd>. Multiple terms can be defined by one description and vice-versa. The order is the only thing that matters. <dl> <dt>Element</dt> <dd>A group consisting of a start tag, contents, and an end tag.<dd> </dl>

Pickering demonstrates that having solid HTML underpinning is key to keeping components approachable for everyone

Inclusive Components

Heydon Pickering has created the useful Inclusive Components project (https://inclusive-components. design) as a way to document standardised HTML structure for everyday patterns.

Many people rely on browsers understanding the meaning of content on pages. By building common features such as toggle buttons and collapsible sections using the right elements, we can help these people out as much as possible.

may 2020 67

FEATURES How CSS feature queries work

68

may 2020

How CSS feature queries work

HOW CSS FEATURE QUERIES WORK

New and exciting CSS spec is emerging at an increasingly rapid pace, but implementation can be daunting. Enter Feature Queries: support detection baked right into CSS

AU THOR ADAM KUHN Front-end developer at Kong Inc, frequent CodePen contributor and creative code enthusiast with a passion for animation, generative art and pizza. w: https://codepen.io/ cobra_winfrey t: @cobra_winfrey

B

rowser support has long been a thorn in the frontend developerâ&#x20AC;&#x2122;s side â&#x20AC;&#x201C; take Flexbox, for instance.

Somewhere around 2012 we saw Flex become spec as a W3C candidate recommendation.

For anyone with deep experience using floated layout models, this was generally seen as a godsend offering a multitude of sub-properties that allowed much more logical control

may 2020 69

FEATURES How CSS feature queries work of layout (including the Holy Grail of

the overlay is increased. This doesn’t

CSS - vertical centering). Problem was, however, browser adoption of Flex was

create the exact effect, but it’s certainly the next best thing using the properties

just too darned slow.

So help is needed when a property

that happen to be available, which is exactly the kind of use case Feature

doesn’t have full support across browsers (which is quite often). This is where

Queries are just perfect for.

Feature Queries work their magic. They use a standard CSS query format – not unlike the media queries we use to serve

Using properties without any support Let’s take a look at another example of

properly scaled content - meaning that we are able to offer up styles tailored

a shiny new CSS property that could go very, very wrong without proper browser

to our users’ browser capability range.

This doesn’t preclude us from writing

support: motion-path. In this CodePen example by this article’s author - https://

fallbacks, but it does ensure that we can always employ the best possible styles

codepen.io/cobra_winfrey/pen/yrxddx – I have taken an email capture, split up the

whenever possible.

user input by characters and got them to ‘fly’ into a hive upon submission. In order

Working with backdropfilter

to achieve a sort of random, frenetic bee-

While vertical centering in two lines is

like flight behaviour, I used the relatively newly implemented offset-path property.

pretty neat, have you ever tried achieving a frosted-glass background effect with

For the uninitiated, offset-path enables us to leverage CSS to transition, animate

Feature Queries use a standard CSS query format, meaning that we are able to offer up styles tailored to our users’ browser capability range just one? You’ll be delighted to know (in case you didn’t already) that backdropfilter is a thing and it can do just that – unless of course you happen to be an avid Firefox fan.

Now we’ll admit, it’s highly unlikely that a frosted glass blurred backdrop effect is a make-or-break factor of your user experience. But it is entirely plausible that the absence of this filter will make a particular component look pretty janky, because the contrast between the blurred background content and the overlaying text creates a very necessary visual distinction.

So here’s the part where @supports works its magic. If background content cannot be blurred to create that separation, then as a handy fallback and a helpful pseudo element the opacity on

70

may 2020

or simply place an element along an SVG path, giving us the sort of precision motion control that would otherwise be incredibly tedious if having to use other positioning properties.

Awesome, right? But here’s where our troubles begin: after a quick check of Can I Use (caniuse.com), it would seem that compatibility for offset-path only appears in later versions of Firefox and Chrome. While we’ve grown accustomed to support for advanced features ending at Internet Explorer (which still might merit some consideration for graceful degradation yet does not support Feature Queries), there are still many outliers like this. And running this animation without the presence of offset-path will only result in – as you might expect – an unpolished mess.

How CSS feature queries work

Chrome

Safari

Francine: A browser support case study If you haven’t had the pleasure of viewing developer Diana Smith’s ‘Francine’, an impeccably detailed baroque-style portrait, you can see it at https://diana-adrianne.com/ purecss-francine. Prepare to be blown away by the sheer power of CSS (and the obscene talent of Smith). That is, if you happen across it in a more recent version of Chrome.

While Francine was only ever intended as a fun side project designed to push the limits of what we know of CSS, it’s also a fantastic demonstration in code degradation and browser compliance – loaded up in Safari, we’re dealt an image missing

Feature Queries to the rescue, again Above Flex layout rendering discrepancies between Chrome and Firefox

Left Backdrop-filter support offers a relatively simple implementation for a frosted glass effect

Top Swarming bees follow a handful of motion-paths as supported in Chrome and Firefox

Detecting support (or lack thereof) for offset-path enables me to tailor my animation on a per-browser basis. Yes, it is true that this will mean losing some of the nuance offered by offset-path, but in exchange for this we get to see our bees safely land within the hive – and ultimately the end user is offered an experience that feels complete, as if to say ‘we couldn’t offer you the full intended experience, but we care about our users enough in order to offer the next best thing’.

many of the finer details and occasionally bearing some rather unsettling curvature.

Going further back and viewing in varying versions of Internet Explorer, Francine begins to resemble some kind of neo-cubist experimental piece.

Could Feature Queries rescue a complex piece like Francine? The answer is complicated – the image’s magic is in its realism, which will inevitably be sacrificed for lack of support. But with the proper fallbacks, we could at least deliver a compelling (if rudimentary) figure and quell some of the mutation in non-Chromium browsers.

How Feature Queries can help accessibility

So now that we’ve got the animation example out of the way, let’s consider how Feature Queries can also help us quash on-page animations in the name of improving accessibility.

Accessibility is a growing frontier - not only due to recent legal mandates, but also because of individuals working very hard in good faith to make sure the web is as inclusive as possible.

So how can Feature Queries help us with accessibility and how does animation factor in? Certain users may

may 2020 71

FEATURES How CSS feature queries work suffer a condition known as motiontriggered vestibular spectrum disorder, meaning the frenetic animations we referenced earlier might just induce nausea (or in some cases potential seizures). These users absolutely deserve your consideration and an on-site experience that accommodates this condition, yet we don’t want to remove the surprise and delight afforded by thoughtful animations. Fortunately, there’s prefers-reduced-motion, a Feature Query reliant on your user’s device accessibility preferences. @media (prefers-reduced-motion: reduce) { *{ animation:none !important; transition:none !important;

}

}

By bringing this Feature Query into play, we’re now able to eliminate all animations and transitions from our pages. Yes, you’ll note we’re using the otherwise ugly !important condition, but it’s difficult to think of a more literally important priority than our users’ physical wellbeing.

There is another critical consideration that needs to be made before we are able to call this query complete: are we using animations to reveal or change positions of any elements on our site? If this is the case, it will also be necessary to be sure that all of our animations or transitions are set to their final state, again using the prefers-reduced-motion query to properly set their post-animation states in order to offer as complete an experience as possible.

In many ways, when we consider CSS and what it fundamentally means, we need to consider the cascade and the fact that when browsers are unable to understand a property, they’ll simply ignore it. And Feature Queries do a fantastic job of illustrating the strengths of this format. First, we begin writing styles as we would like them to be consumed, in their optimal state. The browser will then handle as many of these as possible, falling back on compliant styles within our Feature Queries wherever it is necessary.

72

may 2020

Top

Since backdrop-filter is unavailable, let’s increase the background opacity to maintain distinction

Above

Detecting grid support – and serving up CSS accordingly – with more widely adopted Flex fallbacks

Top right

Conditionally removing animations based on user preference keeps our content accessible

How CSS feature queries work

We can use an operator to test if one of multiple properties is supported before then delivering our CSS accordingly other for proper display. It might look

@supports (grid-row-gap: 20px){ }

something like this: @supports (display: grid) and (mix-blendmode: difference){ }

This seems like an oddly specific property, sure – but what we’re really looking for is any browser support of grid-row-gap. You might have guessed it

Sometimes, we are faced with browsers that don’t offer support on multiple specific fronts. Fortunately, Feature Queries (in the same way as media queries) afford us the ability to chain them with multiple conditions.

Let’s look at an example – pretend we’d like to employ positioning and filter properties that are reliant on each

Furthermore, we can also use an operator to test if one of multiple

by now – Internet Explorer only partially supports CSS Grid specification, and

properties is supported before then delivering our CSS accordingly. And in

grid-row-gap is one of the many sub-

keeping with the flow of the cascade,

properties not supported. Oddly specific, yes, but also potentially critical for layout.

we should also keep in mind that some older browser versions (and yet again, all versions of Internet Explorer) do not yet support Feature Queries.

Something that’s also important to note: Feature Queries can detect partial support for varying sub-properties.

While we’ve spent a lot of time on CSS Grid, detecting support will likely play a renewed role in layout and positioning as subgrid – that is, child grid elements with properties unique and detached from parent grid elements – is on track for growing adoption.

Essential resources

The go-to guide for browser support

caniuse.com As has been noted throughout this article, there is no better single source of information regarding browser support to help inform your Feature Queries than Can I Use. Developer Alexis Deveria is doing a yeoman’s work here, with clean and easily searchable visual guides to browser support, with historical context included.

The magic of Feature Queries

https://www.youtube.com/ watch?v=T8uxmUQZsck Few developers work harder to share CSS knowledge and build a community the way that Jen Simmons does. In her Layout Land video series, she breaks down a number of advanced CSS properties into digestible pieces and in this particular instance, provides some excellent insights and use cases for Feature Queries.

One-stop testing solution

https://github.com/ireade/feature-queriesmanager Sometimes we can’t access certain browsers to properly test our CSS, and toggling features on and off can be a pain.

Fortunately Ire Aderinokun created this browser extension to toggle between @ supports() and @supports not() – thereby showing how our CSS would appear to users targeted by our Feature Queries.

may 2020 73

SIGN UP TO THE The voice of web design

NEWSLETTER TODAY! GET NEWS, TIPS & INSPIRATION WEEKLY

https://netm.ag/subscribe

SIGN UP

NOW!

Tips, tricks & techniques

THIS MONTH FEATURING...

76

82

OPTIMISE AND SPEED UP WORDPRESS WEBSITES 76

86

AUTO-ANIMATE IN ADOBE XD

BUILD AN INTERACTIVE AR ECOMMERCE SITE

82

92

86 CREATE ANIMATED INTERACTIVE TRANSITIONS

92

PROJECTS WordPress

A B O U T T HE A U T H O R

JOE FORD w: tillison.co.uk

t: @JoeFordTheNerd job: Senior developer Tillison Consulting areas of expertise: PHP, WordPress, Laravel

WORDPRESS

OPTIMISE AND SPEED UP WORDPRESS WEBSITES WordPress isn’t known for its breakneck speed but in this tutorial, Joe

Ford shows how to bring it up to scratch with a few changes and tweaks WordPress has become a staple name in the web design world, boasting user friendliness and customisation to all who want to try it. But with this ease of use comes a great window for undetected errors or problems. As Google tightens emphasis on page speed as a ranking factor, budding webmasters are increasingly getting caught out by not being able to get what they’ve built to run quickly.

So why does WordPress have a reputation for being so clunky? Out of the box the WordPress CMS is relatively fast, enabling users to apply a theme and write a large number of blog posts without running into performance issues. Problems arise as a side effect of WordPress’s popularity. There is a massive selection of third-party plugins, themes and even hosting providers aimed at the amateur starting out with little to no budget. There are plugins for pretty

76

may 2020

much anything a new user might want, however, these plugins are all of varying quality and it is not always obvious at first that installing a plugin has actually caused problems.

To give us a live example for the basis of this tutorial a target website is needed – we’ve have put together a brochure-style site as a demonstration.

HOW TO FIND OUT IF YOU HAVE A PROBLEM

Many page speed tests are available for free online, with favourites such as Google PageSpeed Insights and GTmetrix. For this tutorial, Google PageSpeed Insights will be used.

Go to Google PageSpeed Insights at https:// developers.google.com/speed/pagespeed/insights. Enter the URL of the page to test and press Analyze to

WordPress

“Out of the box the WordPress CMS is fast, enabling users to write blog posts without performance issues” start the process. After a few moments the results will appear, along with an overall score out of 100 for both mobile and desktop.

WHAT DO ALL THE METRICS MEAN?

First Contentful Paint is the time between a user requesting the website and the content appearing on the screen.

First Meaningful Paint is the time taken for content to render on the user’s screen in a meaningful and human-readable way.

Speed Index is a measurement of how quickly content on a web page is populated.

First CPU Idle is when the loading of the page has calmed down enough that the phone you’re using can handle input on the page.

Time to Interactive is similar to the last metric – it is an indication of when a page becomes completely interactive and stable.

Max Potential First Input Delay is the length of the longest task and an indication of the delay until a user can perform smooth actions on a website.

Below this list, several suggestions will be included, although these aren’t always easy to

Top left GTMetrix

understand. A few of the suggestions to pay particular attention to are…

TTFB – Time to First Byte If this metric flags up in Google PageSpeed Insights as a problem, it almost always means that the server in use is over capacity. This may be caused by bulky plugins or themes. It’s important to take inventory of installed plugins and decide whether or not they really add much to the business requirements or user experience. If everything installed is needed, then it’s time to look at upgrading the server.

combines two different sets of test and also provides a total page size and load time

Above This is generally how an unoptimised website will look on the first few tests; Google helpfully shows the problem areas

Properly sized images It’s possible that in parts of a page’s layout, images have been inserted at full resolution (eg 1,200 x

may 2020 77

PROJECTS WordPress Compress images Getting started on the actual optimisation; images and video are usually the largest items on a page.

Eliminate unnecessary background videos and ensure to encode video at a low bit-rate if it plays automatically. Install the plugin EWWW Image Optimizer from the WordPress plugin library. From the Media library, a new bulk optimise option becomes available.

How to configure the settings Before optimisation takes place, some adjustments can be made to the plugin settings to ensure a reasonable balance of performance against user

500) but are then scaled down by CSS to a more manageable size to fit a layout. This isn’t ideal as it means the image is loaded in its full size before being scaled down, which wastes time and bandwidth. These will get flagged by PageSpeed Insights. Use the suggestions from the tool to locate these images and consider resizing the image closer to the dimensions in which it will be displayed.

Next-gen images Most browsers now support the WebP image format, which employs much more efficient compression than .jpg and .png – it even supports transparency at a cost of just 22 per cent more bytes, typically three times smaller than a PNG. It’s easy to add support for WebP to WordPress and convert images in the media library to offer the format as an option to a user.

Enable compression Although it’s standard on most hosting setups, there are still cases or servers out there not using gzip compression. If this is flagged up, then the best course of action is to contact the web hosting company and ask for it to be enabled or consider changing host entirely. A plugin can also be used to attempt to force this setting on, which is covered further into the tutorial.

On the example test website, the following issues were flagged: Avoid enormous payloads One of the most important metrics is the total page size. This is the filesize of all loaded elements on a page, such as images, video, CSS and any scripts that are included. Using the drop-down tab, open the drop-down section to find the largest elements on the page. Avoid unnecessary videos on pages and if the video is essential, consider ‘lazy loading’ so it is not downloaded immediately.

78

may 2020

Above The First Meaningful Paint is the first time the full ‘above the fold’ content is loaded in its styled and complete form.

The rest of the page can still be loading but the user is able to start browsing. This image shows the above the fold content found on the web.dev website.

experience. Go to the Settings part of the plugin from the WordPress Dashboard: Settings > EWWW Image Optimizer Starting on the ‘Resize’ tab, add a max width and max height of 2000 x 2000 unless the website is specifically built to display high-res images. These numbers are chosen to filter out any massive images but shouldn’t trim any images appearing in the normal layout.

Another option to consider is found back in the settings and on the WebP tab, ticking both JPG/PNG to WebP will create a WebP copy of all images during the optimisation process and in most cases will solve the ‘serve next gen images’ issue detected in PageSpeed Insights.

The optimiser is now ready to run, head to: Media > Bulk Optimize Scan for unoptimised images then click Bulk Optimise. The process will take a moment, but when done the size of each page and overall PageSpeed score should be slightly better.

Resizing these images in an image editor or using a CDN with automatic sizing will also fix this issue and, while more expensive/time consuming, will usually provide even better results.

CACHING

Every time a user requests a page from a WordPress website, the server hosting it needs to run through the entire theme code from the header to the footer, generating the parts that the user needs before finally displaying in HTML to the user. When a website is receiving many hits a second, these pages are likely to render down to the exact same end code.

For this reason, there are many WordPress caching plugins that generate the page once before storing it away, then when a user arrives on the page again they are sent the plain HTML version of the page, bypassing the need to re-render it.

WordPress There is no right or wrong option out of the many available but the Breeze plugin (https://wordpress. org/plugins/breeze/) bundles many of these features cleanly into one and in this instance, works directly with the server hosting the website.

Install and activate the plugin and head to the Settings page, on the first tab tick the Cache system.

Minify HTML, CSS, and JS If the website being worked on is live, make sure to minify on a staging website as the options can occasionally cause problems at first.

Minification is the process of removing the characters in code that makes the code tidy and human-readable and also reduces the size of the page. Breeze is perfect for this. On the Settings page, tick the Minification button for HTML, CSS and JS. Save the changes and clear the current cache by hovering over the Breeze button at the top of the screen and select ‘Purge all Cache’. The changes can now be seen by opening the website in a new

“Live chat, analytics and tracking tools can bundle large JavaScript Ľohv#wkdw#dgg#vhfrqgv#wr# the time a page takes to become interactive” tab. Check to make sure everything works and then re-run the PageSpeed tests. An instant jump in performance should be seen.

If problems do occur and some JavaScript breaks or an element doesn’t render correctly, inspect the element in the developer tools to try and find which resource is not working. Once you have an idea of what stylesheet or script is causing the problem, head to the Advanced tab of the Breeze settings and paste the link to the offending script in the Exclude CSS or Exclude JS option (depending on the filetype).

This stops that file from being minified and should fix the problem at the expense of some performance.

IN-DEPTH

THE WHITE FLASH Sometimes browsing a website that has only been partly

optimised will result in a white flash of unstyled content loading when a page is viewed. This is also referred to as a flash of

unstyled content (FOUC). After the flash, the styled content quickly loads but the experience is jarring to a user and can make the website feel unfinished. This is caused when ‘critical CSS’ is

deferred by accident to attempt to prevent render-blocking. Critical CSS are the styles needed to render the page correctly when a user first loads the page. Once critical CSS has been identified, it should be made exempt from any deferring techniques and allowed to block the DOM. How do you get your critical CSS? You need to examine the above the fold content – the content a user can see without

scrolling down the page – and identify what CSS needs to load in order for the page to render with this content fully styled. This is

then extracted into its own CSS file, or in some cases inlined into the document. There are many online tools and even WordPress plugins that will do this automatically, although you’ll find most of them are currently paid tools.

Once the critical path CSS has been loaded, the rest of the styling for the website can be loaded asynchronously and a user’s perceived performance of the website will increase, even though the page still takes the same amount of time to load in entirety.

Above The infamous white flash is effectively a page of unstyled content. This is because the CSS has been deferred and hasn’t loaded yet

DEFER JAVASCRIPT

Live chat, analytics and tracking tools can bundle large JavaScript files that add seconds to the time a page takes to become interactive. Add the Defer attribute to these scripts so that they aren’t executed until the DOM has finished loading. This can be done from the Breeze settings under the

may 2020 79

PROJECTS WordPress Advanced options. First, identify any JavaScript

RESOURCES

GET PAGESPEED HELP PageSpeed is a complex topic and is becoming more and

more desirable in the field of web development. Here are a few resources to help you get ahead.

files loading on the page that are not critical to how the site functions or looks. Then enter the original unminified URL of the resource in the ‘JS files with deferred loading’ box and save the changes. This should force the file to only run once the page has finished loading.

More critical scripts can still be optimised by using the Async attribute. This fetches the script while the page is still rendering for a user and then executes it,

web.dev https://web.dev/fast

This Google website is full of fantastic guides going deeper into the subject than this tutorial has space to do.

interrupting the DOM if necessary.

BROWSER CACHING

Once an image, stylesheet or script has been downloaded by a user, in most cases that asset is unlikely to change by the time they open a new page or return to the website within a short period of time. To take advantage of this, browser caching can be used.

TUNE THE SERVER

Cloudflare www.cloudflare.com/en-gb Cloudflare contains various tools for speeding up a website, from a content delivery network, to attack prevention and caching, even the free tier will take a huge amount of load off a server.

Breeze https://wordpress.org/plugins/breeze This is a multipurpose caching plugin for WordPress made by the hosting provider Cloudways. This plugin contains all the main tools that are needed to optimise a modern WordPress website with minimal bloat.

BunnyCDN https://bunnycdn.com A content delivery network that works great with both WordPress and the Breeze plugin. Accounts are paid but costs are minimal and can be topped up as you go, rather than autobilled.

“A Content Delivery Network helps to reduce server load as much as possible by rŀrdglqj#vfulswv#dqg#lpdjhv# to specialised servers” 80

may 2020

WordPress websites that involve search features or the popular ecommerce plugin Woocommerce can be quite CPU intensive at high user counts. To help with this, it is worth increasing the raw power of the server. Increasing the CPU and RAM available to the server will take care of this.

Like most web apps, if the server running a WordPress website runs low on RAM it will begin to slow before crashing entirely. Usually, MySQL will fail first causing an ‘error establishing database connection’ error.

Cloudflare (www.cloudflare.com/en-gb) is a service that, among other things, screens traffic before it even gets to your website. The free plan can help massively in reducing bandwidth and server power wasted on bots and spammers.

CONTENT DELIVERY NETWORK

CDN stands for Content Delivery Network and helps to reduce server load as much as possible by offloading scripts and images to specialised servers close to users and designed to deal with these types of files. Setting a CDN up will take seconds off page load time and is relatively inexpensive. BunnyCDN (bunnycdn.com) is easy to use and cost effective, it also works great with the Breeze plugin used so far.

SET UP A CDN

To set up a CDN with BunnyCDN, first sign up for an account on the website and load the account up with credits – start with $10, which should last several months for a mid-traffic site.

First, a ‘pullzone’ is needed – click ‘Create a pullzone’ in the BunnyCDN dashboard. Enter a name

WordPress and the origin URL (the URL of the website the CDN is being used on).

Save the settings, making a note of the CDN hostname (<name entered above>.b-cdn.net).

If using the Breeze plugin, re-open the settings and head to the CDN tab. From there, enter the hostname in the CDN CName box, leave CDN content as it is and exclude any content as needed in the Exclude Content box. Once done, click Save and purge the cache. Over the next few minutes, assets should be served from the CDN instead of the local server. This can be checked by using Chrome DevTools to examine the URL of images on the homepage: if they are loading from <name>.b-cdn. net then the CDN is working correctly.

UPGRADE TO PHP 7

Making regular upgrades to PHP is something that has flown under the radar for many, with PHP 7.1 now at end of life. Many websites still run on the older and much slower PHP 5.6. Upgrading to at least PHP 7.3 would bring a major performance increase and should reduce the pressure on the server, making it more efficient.

TEST TO SEE WHAT VERSION OF PHP IS BEING USED

Depending on where and how the website is hosted, there are several ways to check the version of PHP being used. If FTP access is an option, create a new file called version.php and add the following code: <?php phpinfo(); ?> Upload this file to the root folder of the website and then access it from a browser. The details of the current PHP installation will be shown.

If SSH or shell access is available, open the server terminal and simply type: php -v The currently installed version will be shown.

Many hosting companies have a dashboard that is specific to them that shows this information. As a general guide, look for ‘Change PHP settings’ or something similar for the best chance of finding the version number.

If none of these approaches work, ask the person in charge of the hosting. If the version returned is lower than the currently supported version, attempt to upgrade to the latest stable version for a large performance boost.

Top The BunnyCDN

RETESTING

Once all changes have been made, return to Google PageSpeed Insights and run the tests again.

Significant improvement should have been made even though the score likely won’t be perfect. It can be difficult to optimise a website to 100/100 on both mobile and desktop as sometimes the problem doesn’t entirely lay at the feet of the webmaster. Poor themes and plugins can sometimes be critical. The important thing is to be aware that it is a factor and take it into account when planning new features.

In summary, site speed should always be modified and optimised to the maximum extent possible. The quicker a web page loads, the longer the site retains a user’s attention. Conversion rates skyrocket with even small increases in page speed.

dashboard showing options for both pull and storage zones in addition to various usage statistics

Above After running the various optimisations the PageSpeed result comes out much better; 100/100 is rarely obtainable but if the results are showing as green then they are more than acceptable

may 2020 81

PROJECTS AR

View source files here!

All the files you need for this tutorial can be found at https://github.com/darrylbartlett/AReCommerceTest

A B O U T T HE A U T H O R

DARRY L BAR T L E T T

t: @darrylabartlett job: CTO at Droplet areas of expertise: JavaScript, PHP & Mobile

AR

CREATE AN INTERACTIVE AR ECOMMERCE SITE

Darryl Bartlett shows you how to build a simple AR scene for ecommerce using 8th Wall and A-Frame

Augmented Reality is just one of many technologies that will change the way we interact. It’s still relatively new but even now there are several tools we can use to begin planning the next generation of interactivity for our users.

In this tutorial we will be looking at AR from an ecommerce perspective. Users will be able to hover over an image marker and our web app will display a 3D representation of an object. In this case, the object will be a VR headset called the HTC VIVE. The user will be able to interact with the object by rotating and a text description will appear underneath the object. A sound will play during interaction and a Buy Now button will also come into view when the image marker is found and the model is displayed.

We will be using 8th Wall and A-Frame for this project, so the first thing you will need to do is head

82

may 2020

over to www.8thwall.com/sign-up and sign up for an account. Once you are registered and logged in, you will need to select the ‘Start a new project’ option from the Dashboard. Pick a name for the project and then head to the Settings area to get your app key.

You will be needing this when it comes to the source code.

ADD THE LIBRARIES

Inside your code editor, you will need to include A-Frame, 8th Wall and your API key inside the <head> tag. <script src=”//cdn.8thwall.com/web/aframe/8frame0.9.0.min.js”></script> <script src=”//cdn.8thwall.com/web/xrextras/xrextras. js”></script> <script src=”//apps.8thwall.com/

AR

IN-DEPTH

NATIVE AR VS WEB AR The biggest difference between native AR and web AR is

how you access the experience. With native, the user needs

to download an app first, however with web AR, all you need is the browser (Chrome/Safari).

Development Above 3D models will need to be in GLB format; Creators 3D offers an excellent conversion tool (https://www.creators3d.com/online-viewer)

xrweb?appKey=ENTERYOURKEY”></script>’ Before we add anything, we must first set up the scene with the <a-scene> tag inside the <body>. <a-scene></a-scene>

ASSETS

We now need to place in our assets; these are done within the <a-assets> tag. We can then point to these assets from our entities later on. Our assets include a 3D model of the HTC VIVE and also a sound clip.

We won’t need to add our description text or button here as we aren’t relying on external resources for these. Assets can be anything from models, images or videos. <a-assets> <a-asset-item id=”vr-headset-model” src=”vrmodel. glb”></a-asset-item> <audio id=”descsound” src=”description.mp3” preload=”auto”></audio> </a-assets>

CAMERA AND LIGHTING

When developing for AR, the position of your camera will generally vary depending on what kind of scene you are building. Sometimes it might take some tweaking to get it right. The following coordinates are perfectly set up for the VIVE model.

The directional and ambient light is there so that the user can get a better view of the model itself.

Because the VIVE is quite dark, we need to make sure the intensity is a bit higher.

With native AR, you need a codebase for each platform (ARKit, ARCore etc), but when it comes to web AR, you can use just the one codebase.

Maximum reach:

Web AR: 2.9 billion devices ARKit (iOS): 1.1 billion

ARCore (Android): 0.5 billion Source: ARtillery Intelligence’s AR Global Revenue Forecast

(https://arinsider.co/2019/07/09/ar-revenues-to-reach-27-4-billionby-2023/) Experience With native, it’s more tailored towards a particular OS, whereas with web AR, you can only really create one experience for everyone. This isn’t always a bad thing; however you don’t get full access to the device’s computing power.

Let’s have a look at a few examples about how they might compare in a few different scenarios: Ecommerce This will work just as well for both native and web, as a customer may already have a particular brand app on their phone, so they could see how things like shoes/accessories look on them. They could also potentially go to a URL to do the same thing, especially if using a marker.

Advertising Inside web AR is where advertising would work the best, as you might pass a bus stop or billboard and be able to scan a marker to see more information about a product and buy it there without going to a checkout.

Games Games are more immersive if you are playing them in a real environment. This currently works better for native as you can take full advantage of the device’s power.

<a-camera position=”0 4 10” raycaster=”objects: .cantap”

may 2020 83

PROJECTS AR

RESOURCES

HELP WITH DEVELOPING WEB AR Here are some useful resources to assist you with building amazing web AR applications.

cursor=”fuse: false; rayOrigin: mouse;”> </a-camera>

<a-light type=”directional” intensity=”4” position=”1 1 1”></a-light> <a-light type=”ambient” intensity=”3”></a-light>

ENTITIES

The xrextras-named-image-target name will need to match the name of the image target that you upload to the 8th Wall Console in a later step.

In this example, the target is called vr-headset. jpg; however you don’t need to add the extension name (.jpg). You can find the image in the targets folder. The model, text and sound are also placed here. These will automatically be pulled in once a target has been found. You will notice that the model should also have a xrextras-one-finger-rotate component attached. This is so the user can rotate the model and get a better look at the product. Make sure that you also add the product-events component to the model entity; this is so we can include some

8th Wall Docs

www.8thwall.com/docs The number-one place to help you learn more about building AR apps with 8th Wall.

A-Frame https://aframe.io/docs/1.0.0/introduction A-Frame can be used for both AR and VR applications. Read through the official documentation to expand your knowledge even further.

Poly by Google https://poly.google.com If you are unable to create your own assets, then check out Poly

by Google to find 3D models for your projects. In most cases you will need to convert the file to a GLB file, which you can find information about inside the 8th Wall documentation.

8 Web AR Examples Where Brands Offered a Memorable Immersive Experience www.wowso.me/blog/webar-examples Check out these examples that show off how web AR can be both immersive and successful.

WebAR: the Augmented Reality for your Browser www.youtube.com/watch?v=IZMpfQ4znK8 Enjoy this interesting talk from last year’s International JavaScript Conference where Anastasiia Miroshnichenko walks us through contemporary web augmented reality.

extra functionality when the image target is found or lost. <a-entity xrextras-named-image-target=”name: vrheadset”> <a-entity product-events xrextras-one-finger-rotate gltfmodel=”#vr-headset-model”></a-entity> <a-entity text=”align: center; value: HTC Vive VR Headset; width:1.5;” position=”0 -1 -1” ></a-entity> <a-entity sound=”src: #descsound”></a-entity> </a-entity>

SET UP A BUTTON

We need to set up a button on the page so the user can buy the product. This doesn’t have to be part of the scene but works well as an overlay. To keep the scene clean, this can be placed in the top corner but will only appear when the user successfully hovers over the image. For now, we’ll put in a default link but this can always change depending on the object and items available for sale. Remember that you will need to grab the styles for linkbox and itemlink, which can be found in the final source code. <div id=”linkbox”> <a href = “https://www.vive.com/uk/product/” id=”itemlink”></a> </div>

BUILD OUT THE COMPONENT

Now to write out the code for the product-events component that we added to the model entity in the last step. The first thing we need to do is add a click listener so our sound will play when the VIVE model

84

may 2020

AR is tapped on. We have to use a physical interaction because of a browser limitation on iOS. AFRAME.registerComponent(‘product-events’,{ init: function(){

this.el.addEventListener(‘click’,function() { var soundclip = document.querySelector(‘[sound]’);

}

});

soundclip.components.sound.playSound();

}); Next, we need to add a listener inside the product-

events component so we know an image has been successfully found. 8th Wall already has a listener function in place called xrimagefound, which is called whenever an image target has been found. This will make our buy-it-now button visible and change the text on it to ‘Buy HTC VIVE’ but only if the name of the target matches ‘vr-headset’. this.el.sceneEl.addEventListener(‘xrimagefound’,

function({detail}) { if (detail.name === “vr-headset”) { document.getElementById(“linkbox”).style.visibility = “visible”; document.getElementById(“itemlink”).innerHTML = “Buy HTC Vive”; } else { document.getElementById(“linkbox”).style.visibility = “hidden”; } }); There is one last problem to solve. Currently the buy now button will stay on screen even when the user moves the camera away from the image marker. If the user has finished looking at the product, they wouldn’t want the buy now button to still be on the screen. We need to add the following code to the product-events component to hide the button once the model is no longer on screen. this.el.sceneEl.addEventListener(‘xrimagelost’, function() { document.getElementById(“linkbox”).style.visibility = “hidden”; });

MANAGE TARGETS

Head back to the 8th Wall Dashboard (console.8thwall.com) and click Manage Targets.

Upload the image target provided in the source code called vr-headset.jpg. Make sure you tick the Load Automatically box.

CONNECT DOMAIN

Before viewing your project, connect a domain to specify the location of your files. On the free plan, you will also need to authorise your device to view the project, which you can do from the Dashboard by scanning the QR code or clicking Authorize This Browser from your mobile.

Top You can use anything as an image marker with 8th Wall. This HTC VIVE image is the visual cue that is used to trigger our object and events Above Uploading an image target is simple and a number of formats are accepted but remember to make sure your target is loaded in automatically

TRY IT OUT

Print out the target and place it on the wall, or load it up on your computer. Head to the URL inside your mobile browser (Safari or Chrome) and move your device towards the marker. When you hover over the marker, the VIVE model should appear along with the text and buy now button. The sound should play once the VIVE has been interacted with.

CONCLUSION

Hopefully this tutorial has given you ideas for how to use AR in your projects. It might be a while before it hits its peak but I believe it’s going to be a game changer for web and native app developers.

Remember to download the full project at https:// github.com/darryl-bartlett/AReCommerceTest.

may 2020 85

PROJECTS Adobe XD

A B O U T T HE A U T H O R

VAMSI BAT CHU

w: www.vamsibatchu.com t: @vamsibatchuk job: Senior UX designer, SunTrust Banks areas of expertise: UX, mobile animation, JavaScript

ADOBE XD

LEARN HOW TO USE AUTO-ANIMATE IN XD

Vamsi Batchu explains how to create simple animations and transition hļhfwv#xvlqj#Dgreh XDġv#Dxwr-Dqlpdwh#fhdwxuh#and#duwerdugv

Prototyping is one of the most important processes in the design lifecycle, but it also plays a vital role in development by helping designers and dev teams with workflow maintenance. It is worth looking at the prototyping landscape as there have been some major changes.

As designers, we often need a lot of tools to design the various stages of the user experience workflow, from user research to mockups to prototyping to handing off the design specs to the dev teams. Until a year ago, more than half of the Mac community used the Sketch app and other tools in order to craft the designs.

86

may 2020

Adobe has entered the prototyping game late, but it does boast one of the best and quickest wireframing and prototyping tools – Adobe XD. Adobe is actively innovating on a day-today basis to create a cross-platform competitor that can be used for testing designs, creating wireframes, handing off specs to the dev team and also collaborative designing. With some of the best features out there such as voice triggers and speech, responsive resize, private sharing and asset extraction, XD has also recently announced the Auto-Animate feature. This means that XD can now be used to create seamless micro-interactions and

Adobe XD animations like tools such as Principle. This helps

these actions and enable the user to learn about the

designers to craft rich prototype experiences, from onboarding flows, animations for mobile carousels,

UI. Some common swipe actions are deleting and adding to a queue.

progress indicators and more. The best part about this feature is that it’s simple to learn and execute.

For this example, let’s look at a music playlist.

For the first artboard, we’re going to create a

Auto-Animate works on a simple principle of state transition, which means that when there are two

playlist screen with five songs in it. Each song is an individual card and essentially when each card

artboards connected, for each layer in the artboards the feature will check the properties that change

is swiped left, it should remove the song from the playlist. When a card is swiped right, it should add

in the artboards and then animate accordingly. So,

the song to the queue.

designers need not worry about writing complex logic to create animation. But it is critical to plan

Let’s get started and create the first card. You can add basic details such as the name of the song,

ahead with your animations and make sure to keep it simple. For Auto-Animate to work between layers, they need a shared name and to have the same group architecture. For example, on artboard A, if you have a layer L1 in group G1 but then in another artboard you place layer L1 in group G2, the feature will not be able to auto animate because of the name discrepancy. So it’s important to ensure you maintain a proper structure.

In this article, I will be explaining how to create simple micro animations using the Auto-Animate feature. We will be looking at both gesture-based and tap-based interactions.

SWIPE GESTURES TO ADD TO FAV OR DELETE

Swipe interactions are one of the most commonly used micro-interactions on mobile apps. These are an essential part of a mobile ecosystem because gestures help you to free up screen space by hiding

“Auto-Animate works on state transition, which means that when two artboards are connected, the feature checks for properties that change and then animates” name of the artist, length of the song and the rating. Now group all these elements into a single layer. Duplicate it until five of the similar cards are made. You can edit them based on your taste.

For the first card – C1 – we are going to add a left swipe for delete action. So, let’s create a small square with a red background, add some Delete text and an icon as shown in the screenshot below.

Group all these items into a layer called A1. Now

Above This depicts the artboard setup for the swipe example of creating micro-interactions

may 2020 87

PROJECTS Adobe XD

Above This image shows the two-artboard setup for creating an expanded card animation

combine C1 and A1 into a layer L ĝ– so that A1 is on the right side of C1.

THE SECOND CARD

For the second card – C2 – we are going to add an add to queue right-swipe action in a similar fashion. Create a group A2 with icon, text and green background. Add it to the left of the group C2 and create a combined layer named L2. Now, the first artboard (S1) is complete. Let’s duplicate the entire artboard twice, into two states – S2 and S3. We will be using S2 for delete swipe and S3 for add to queue swipe. In order to do that we need to make some changes for each of these artboards. Here are the settings for both swipes: O S1 – Change the Opacity of A1 and A2 to 0% and arrange L1, L2 so they are centre-aligned.

O S2 – Arrange the L1 card so the right edge of L1 is aligned with the other cards. Change the Opacity of A2 to 0%.

O S3 – Arrange the L2 card so the left edge of L2 is aligned with the other cards. Change the Opacity of A1 to 0%.

ANIMATE THE ARTBOARDS

Now that the artboards are completely set up, the next step is to animate them. You can do this by going into the Prototype mode on the top-left side

88

may 2020

of the tool. Now on the S1 artboard, click on the layer L1 and add an interaction on the right side of the tool by setting Trigger to Drag, Action to AutoAnimate and Destination to Artboard S2. You can also add easing based on your preferences. Test this interaction by clicking on the play button on the top-right side of the tool. On the S1 artboard, click on the layer L2 and add a similar interaction using the same settings but, in this case, set the Destination to S3. This interaction will create the left swipe.

EXPANDING CARDS

The second interaction we will be looking at is commonly seen on most apps and websites where you are going through a list or a catalogue of products and when you click on one of those, you are taken into a new page with more details about the product. Auto-Animate makes it super simple to animate this kind of interaction. For this example, let us start by creating a product catalogue page. You can choose any product like, for example a mobile phone (which is going to be our example), apparel, etc. For the first artboard (S1), create a header bar with a hamburger menu and a profile icon.

IMAGE AND DETAILS

Now, create a header text element with the number of catalogue items. For each of the product cards, we

Adobe XD

are going to have one image, the name of the phone, price and ratings. We can call these cards C1 to C6.

The best way to do this is to create the first card (C1) and then use an amazing feature of XD called Repeat Grid, which is found on the top-right corner of the Tool panel. This enables you to duplicate items with ease, keeping the alignment and spacing intact. The set up of this artboard is complete.

We are going to animate the second card, so it is important to ungroup the elements of that card so XD can perform Auto-Animate.

DESIGN THE SECOND ARTBOARD

Now to get to work on the second artboard.

Duplicate the first artboard and delete cards C1,

RESOURCES

ANIMATE EXAMPLES When Auto-Animate was first released by Adobe XD, tons of designers went in and crafted animations. Once designers

get familiar with the Auto-Animate feature, they can start exploring other complex animations that can be achieved using XD. There are lots of websites and experienced designers who have created tutorials for most of these animations. They can get you

started with the basics and then you can customise based on your needs. The best way to follow recent updates in Auto-Animate is

to go to the XD website where XD evangelists post a lot of tutorials on new developments.

C3-C6. We are going to use the existing card C2 to build this page, so the names of the layers are the same. First, expand the background of the card so that it covers the entire page below the header bar.

We can now arrange the other items in any way that we want – the basic idea being that it should be different from how the card was in the artboard S1, because that’s when you can see the transition.

For that reason, let’s bump up the name of the

“The Repeat Grid feature in XD enables you to duplicate items with ease, keeping the alignments and spacing intact” mobile to 25px and make it bold. Similarly, increase the size of the price and place it below the mobile name. Next is the important part – the image of the mobile phone. You have to increase its size significantly and also align it in the centre.

FINISHING TOUCHES

To tidy everything up and finalise the design, arrange the ratings and the stars below everything and to the left. Since this artboard represents the detailed version of the product, you can now include additional information about the phone such as memory, the available colours of the phone, accessories given with the phone and so on, based on your preferences. Everything else will follow as you scroll the artboard. You can also change the header icon of the hamburger, to enable the user to go back to the previous artboard S1. Remember

Let’s XD https://letsxd.com/prototyping This is a wonderful resource that introduces you to basic

prototyping in Adobe XD. Also, there is a series that is going to add more transitions into your designs. You’ll learn how to create basic transitions, add motion using Auto-Animate, use the Drag trigger, how to save space with overlays and much more. There are also custom kits created such as animated logos that you can download and break down to see the setup.

Adobe XD: Animations https://www.skillshare.com/classes/Adobe-XDAnimations/1850234034 This is a great course that uses the Auto-Animate feature to create animations for an example email product. The videos cover a wide variety of animation tips and tricks that can be applied to other user interfaces too. They have examples such as mask animations, button states, sliders, scrolling, text effects, overlay states, etc.

may 2020 89

PROJECTS Adobe XD

RESOURCES

ADOBE XD PLUGINS Adobe XD is known for its very large user base and it has an

ever-growing list of plugins and integrations that aim to make the tool better than its competitors. Below are a couple of

plugins that make a designer’s life easier by increasing productivity and reducing time-consuming tasks. These might also be really helpful for creating transitions.

Above This image shows the different settings available in auto animate feature which can be adjusted based on user preference.

to change the name of the icon to match the icon name in the first artboard.

CREATE MICRO-INTERACTION

Let’s go to the prototype mode now to create the micro-interaction. To do this, select the card C2 in the artboard S1 and drag the blue arrow to the artboard S2. In the Interaction panel on the right-hand side, set the Trigger as Tap, Action as Auto-Animate and Destination as S2. For smoother interactions, it is good to go with Ease Out for Artboard Plus www.producthunt.com/posts/artboard-plus This is an incredibly useful Adobe XD plugin. It keeps all the artboards and designs organised so that they are in a structured format. This life much easier when you have tons of artboards and it’s practically impossible to create transitions or prototype modes between them. You can also sort your artboards and create them in a grid, which really speeds up the entire process.

Tiled plugin Tiled plugin for Adobe XD helps designers to quickly build micro applications easily. Using this plugin, designers can sync the screens they design, make more adaptive artboard flows and also be able to link the hotspots on the screens. If you create a tiled account, then the team feedback will also be available for the designers to see within the XD app itself.

The best part about this plugin, though, is that you can get insights about the users – such as the time taken to complete a task, load times, etc – for your animations, which makes the iteration process simple.

90

may 2020

“Try changing the colours of the elements, sizes and shapes to see smooth transitions between artboards” Easing and a Time of 0.4 or 0.6 seconds. Click on the back arrow icon on artboard S2 and drag the arrow to S1. You can use the same settings for this to make it consistent. Now click on S1 and play the prototype to see the magic. You will observe a smooth animation when the card C2 is tapped. Adjust the Easing settings to make the animation smoother.

BEYOND THE BASICS

Above The Tiled plugin in Adobe XD can help to really improve the design flow process

You now have a basic idea of how to create simple interactions. You can also try auto animating by changing the colors of the elements, sizes and shapes to see smooth transitions between multiple artboards. In addition to tap and drag triggers, there are other triggers that designers can experiment with, such as using keyboard keys and gamepad keys to trigger prototypes on a particular key tap.

There is also a mode in which you can create and design voice prototypes for Alexa, Siri and so on, where you can assign sentences and speak them to get specific responses.

Discover another of our great bookazines From science and history to technology and crafts, there are dozens of Future bookazines to suit all tastes

PROJECTS Transition states

View source files here!

All the files you need for this tutorial can be found at https://netm.ag/37yYpYJ

A B O U T T HE A U T H O R

MARK SHUFFL EBO T T OM w: webspaceinvader.com t: @webspaceinvader job: Professor interaction design, Sheridan College areas of expertise: HTML, CSS, JavaScript

TRANSITION STATES

CREATE ANIMATED TRANSITION STATES

Pdun#Vkxŀherwwrp explores how to make your designs transition between screens to create eye-catching user experiences

If you follow any web design trends, you will undoubtedly have noticed a lot of content that animates between screens. This trend emerged, but moved beyond, the ‘one-page’ site and is particularly good for ‘sections’ of content. The biggest challenge for the designer with this kind of site isn’t creating the animated content – that is actually easy to do – but rather, thinking in terms of screens. The problem here is that not all screens are the same ratio and that causes a lot of issues for the content. As such rather than this be purely responsive, the design is going to have to work in breakpoints; larger screens will be landscape and once down to less than 768 pixels, the design has to become portrait.

This tutorial will focus on setting up some parts of the HTML content and CSS with the transitions

92

may 2020

powered by the rellax.js library. This entails linking to a library and just a few lines of code that enable the content to slide individually into place.

To get started, grab the project folder and ensure the ‘start’ folder is open in your code editor. The example content to add will go into the HTML, so open the ‘index.html’ for editing and if you scroll to the body you’ll find some code already there. This is mainly the fixed branding and navigation, then the second area of content to save having to put repetitive content in there. Inside the comment sections denoting the start and end of the first section, add the content. <header id=”rockies”> <div class=”absolute”> <div class=”bg rellax” data-rellax-speed=”-12”>

Transition states

</div>

</div>

<div class=”absolute md”> <img class=”rellax cov” data-rellax-speed=”-8”

src=”img/background.png”> </div>

<div class=”coverText”> <h2 class=”rellax” data-rellax-speed=”-20”>THE

ROCKIES</h2> </div>

<div class=”absolute fr”>

<img class=”cov” src=”img/foreground.png”> </div>

</header>

The main area of focus to consider here is that any content with the class of ‘rellax’ added will be animated into place, the speed of that animation takes place through the property of ‘data-rellax-

speed’. Negative numbers move the content slower than the speed of the scroll and vice versa. The structure of content is straightforward, with a div holding each layer. This contains either an image or text. This is kept simple with a background sky, a background and foreground image and text, to give a layered look. <script type=”text/javascript” src=”rellax.min.js”></script> Just above the JavaScript tags, add the tag above, which brings the rellax.js library into the project. var rellax = new Rellax(‘.rellax’, { callback: function(position) { console.log(position); } }); Adding the code above makes the rellax library work by querying all instances of the class and applying the movement. There’s a function here that enables seeing the screen position of objects in the console, which can be useful for working out CSS placement.

There’s more JavaScript included and this allows for content to smoothly scroll if the buttons are clicked instead. Save the HTML page and move over to the ‘design.css’, all code can be added right at the top of this file. All of the different breakpoint code has been included, meaning we’ll focus on HD desktops in the code here. .wrapper { position: relative;

IN-DEPTH

SMOOTH SCROLLING SOLUTIONS As part of the tutorial code, we have included some code that

makes use of intercepting the link to an anchor on the page.

The code then smoothly animates the transition of the page down

to this – because it is handled by the animation it provides a way to create a more seamless experience for the user. The buttons are doing the work, hence a cognitive offload for the user, with a pay off that the animation between states occurs. To add to this, the

browser’s history is also updated so that if the user clicks the back button it continues to work as expected.

There are many other solutions to this problem and many

scrolling libraries that can also be used just to make it even easier.

MoveTo.js (https://github.com/hsnaydd/moveTo) is a fantastic

library to use as it’s easy to implement with the inclusion of the library code that’s available through a CDN. What makes this a great consideration is that there are a number of configurable options that help get more unique results such as easing, duration, container and a callback after the animation has finished.

Probably the easiest library is smooth-scroll.js (https://github. com/cferdinandi/smooth-scroll) because it requires the least work.

It’s a one-line implementation and it will just pick the native ‘#’ link of an anchor.

Whichever solution it is that you pick, you will get the same result – smooth scrolling. It’s just a matter of how much control you wish to retain.

The library moveTo.js gives a great number of configurable options that enable your content to move up and down smoothly

“The problem here is that not all screens are the same ratio and that causes a lot of issues for the content” may 2020 93

PROJECTS Transition states

RESOURCES

EVEN MORE OPTIONS

}

header { height: 100vh;

overflow: hidden; position: relative;

Most of the animation that takes place in this tutorial is linked to the scrolling and movement through the page.

Moving elements like this is known as parallax scrolling because the elements move at different speeds, giving the illusion of depth.

The effect comes from games and cartoons and is a simple way to get attention as each element has its own speed. Initial implementations of this on the web required some heavy lifting from the browsers but this is much better now. Another option to

consider when trying to create a unique user experience is moving the content in different directions – rather than just have it move

up and down at different speeds, the content could move sideways

height: 200vh !important; overflow-y: hidden;

}

z-index: 200;

The wrapper handles enough content for two screens, which means that its length is exactly twice the height of the screen. This calculation is used because when content is added to move at different speeds, it will cause some overflow. The header is the first section so that gets just one screen of height.

at different speeds.

A great library that offers these kinds of results is the simpleParallax.js library (https://simpleparallax.com). This allows

for movement in a number of directions, enabling overflow to be visible or clipped and with a delay to the transition. Moving content

in unexpected ways is a sure-fire way to get the users’ attention: take a look at Limely, a digital agency site (www.limely.co.uk) to see a great example of unexpected movement. Two sides of a canyon open up as the user scrolls, leaving the content inside to move up at different speeds. With the combination of movement it is a very effective way of providing delight to your user.

The simpleParallax.js library enables content to move in different directions based on the scroll position of the browser

“The wrapper handles enough content for two screens, which means that its length is exactly twice the height of the screen” .bg { height: 100vh; background: url(../img/sky.jpg) no-repeat center center; -webkit-background-size: cover; background-size: cover; } .absolute { position: absolute; width: 100%; height: auto; } The background is given a sky image that will cover the background and then the class ‘absolute’ is created. This is used by most divs in order to get them in the correct position on top of each other.

The Limely website is a good example of moving elements in different directions to transition between states

94

may 2020

.md { height: 65vh; bottom: 15vw; } .md img { max-height: 630px; }

Transition states .cov { position: absolute; left: 0;

bottom: 0; height: auto;

}

width: 100%; object-fit: cover;

The mid content and front content have a similar setup, just with different positions. Here we have the mid layer CSS. This sets the relevant positioning to put the mountains in the correct spot. The ‘cover’ class is applied to any image and it ensures that each image covers the div to enable scaling of that image proportionally. .coverText {

position: absolute; width: 100%; height: auto;

}

bottom: 21vw;

The cover text class is going to hold the text, which ensures the position of it is put at the correct height from the bottom of the screen so the headline fits into the design. The browser width dictates the scaling of the image, so the text is positioned with ‘vw’ as well. h2 { padding: 0 0 0 8vw; font-size: 12vw; color: #fff; } .content { position: relative; color: #fff; height: 100vh; z-index: 100; } The final CSS to focus on deals with the formatting of the heading. The ‘content’ holds the second screen, so it is given a full page height. It is also given a slightly higher z-index to ensure it covers any gaps in movement from one section to another.

Taking a look at the remaining CSS code reveals the changes that are made to enable this to work on a number of different popular screens, but this can be further added to as needed.

Be sure to look at the final design in your browser to see the transitions smoothly move into place between screen sections.

Top As the screen transitions between states, the different layers move into place and move out to give the illusion of the scene building

Middle As the second scene

comes into view it’s the typography that helps drive the scene into the right place and make this successful as a design

Bottom The design is set

to work across a number of breakpoints for the user, including iPad portrait and landscape views

may 2020 95

HOSTING PARTNERS

Key hosting directory

CONTACT US To advertise here, contact our sales team: +44 01225 687 311 george.lucas@futurenet.com

FEATURED HOST

Netcetera provides hosting

“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

Offering reliable website

from one of the most energy-

hosting, dedicated servers,

efficient datacentres in Europe,

co-location and cloud solutions,

all powered by green energy.

Netcetera has a large portfolio

It offers everything from reliable

of green, zero-carbon solutions

low-cost hosting for a single site

for businesses of all sizes.

right through to complex cloud

Customers can choose from its

racks and managed IT solutions.

fully managed cloud servers,

One of its most popular products

Linux and Windows for SMBs

is its Managed Cloud, designed

and a fully managed cloud

to help SMBs get the most from

solution for WordPress websites

their website, on their own cloud

to help them utilise cloud

server. Server monitoring comes

technology without any hassle.

as standard for Netcetera’s Cloud

And with server monitoring as

and Dedicated server clients

standard and a full migration

– something it believes should

service available, Netcetera

be included in the price of the

has made the switch to better

hosting it provides.

hosting really easy.

CONTACT 03330 439780 / SALES@NETCETERA.CO.UK

WWW.NETCETERA.CO.UK WHAT NETCETERA OFFERS O Managed hosting: a full range of solutions for

EXPERT TIP

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 pdqdjhg#forxg#fdq#pdnh#|rxu#exvlqhvv#ľ|>#dq# underutilised cloud will be a waste of money.

a cost-effective, reliable, secure host.

O Dedicated servers: single server through to a full rack, with free setup and generous bandwidth.

O Cloud hosting: Linux, Windows, hybrid and private cloud solutions with support and scalability features.

O Data centre co-location: from quad-core up to smart servers with quick set up and all fully customisable.

Advertisement 1&1 INTERNET

THENAMES

businesses, developers and IT professionals to succeed online.

certificates, business email, WordPress hosting, Cloud, VPS

With a comprehensive range of high-performance and affordable

and dedicated servers. Part of a hosting brand that started in

internet products, 1&1 offers everything from simple domain

1999, it is well established, UK based, independent and its mission

registration to advanced ecommerce packages.

is simple: ensuring your web presence “just works”.

1&1 Internet is a leading hosting provider that enables

0333 336 5509

TheNames.co.uk offers great value cPanel web hosting, SSL

WWW.1AND1.CO.UK

0370 321 2027

CATALYST2

BLACKNIGHT

Catalyst2 has built a stable, reliable and well-supported

name registrar, providing innovative solutions to more than

hosting platform for organisations across the UK. Catalyst2

84,000 customers in 130 countries, with dedicated servers and

specialises in very high-availability hosting and exceptional

colocation, a comprehensive range of web hosting plans, domain

customer support. Contact the team today for a quote.

registration, email and productivity tools. ISO 27001 certified.

0800 107 7979 SALES@CATALYST2.COM

+353 59 9183072

As one of the UK’s most experienced hosting companies,

WWW.THENAMES.CO.UK

Blacknight is the leading Irish web hosting company and domain

WWW.BLACKNIGHT.COM

HEART INTERNET

ADVERTISE HERE!

Internet focuses on designers, developers and technically-

500,000 customers.

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.

+44 (0) 330 660 0255

REASONS TO ADVERTISE

As one of the UK’s leading web hosting authorities, Heart adept businesses. It builds on its four tenets – speed, reliability, support and security – to create award-winning solutions for over

WWW.HEARTINTERNET.UK

O Reach professionals: 75% of readers are working in or seeking work in the web industry

O Variety of projects: future projects include mobile apps, web apps and CMS-driven sites

O Home workers: 51% have a personal website under development

CONTACT +44 01225 687 311 / GEORGE.LUCAS@FUTURENET.COM

NEXT MONTH

THE SECRETS OF SEARCH

What you need to know to keep Google happy and stay ahead of your competitors in 2020

PLUS 20 best WordPress plugins for devs and designers

Build a 3D interactive interface with WebGL and three.js

Angular State Management using the NgRx library

ISSUE 332 ON SALE 16 APRIL 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