Web Designer 265 (Sampler) by Future PLC

Ex perpa t ge tu s o to f ri al s

FREE

HTML5

CSS3

jQuery

JavaScript

144 minutes of angular Videos

@WebDesignerMag

/WebDesignerUK

NPM5 WHAT’S NEW? UP CLOSE with the package manager’s latest update

ESSENTIAL SOLUTIONS TO EVERYDAY PROBLEMS

SEO BOOST YOUR

RANKING Understand what search engines are looking for

Pros reveal their build secrets

7 steps tO great 3d DESIGN 10 MUST-KNOW THREE.JS TIPS 8 PROJECTS TO INSPIRE (with CODE) PLUS: BUILD AN INTERACTIVE WEBGL visualisation & CODE A 3D MELT EFFECT

Responsive video masking with SVG GENERATE A STATIC BLOG WITH GULP CROSS-PLATFORM NETWORKING WITH HUMBLENET ANIMATED INTROS WITH CSS

Issue 265

Welcome to the issue The Web Designer mission To be the most accessible and inspiring voice for the industry, offering cuttingedge features and techniques vital to building future-proof online content

Add wow to the web with 3D

D was touted as the next big thing for the web back as far as we can remember – 2012. But technology and browser support rarely catch up until years later. Finally, the web has caught up and 3D environments are now a permanent part of the internet. This makes now the perfect time to jump in and start mixing up your designs with 3D. In our latest lead feature on page 42, digital designers Marpi, Johnny Slack and Mark Shufflebottom give an insight into a new dimension. Marpi reveals the seven steps to great design and the inner workings of his many impressive projects. Code is included so you can jump in and experiment.

Johnny Slack is a whiz with three.js and shows you how to create a mind-bending 3D melt effect. You cannot fail to be impressed. Again, code is included. To top off the feature, our resident 3D expert Mark Shufflebottom reveals ten of his most valuable three.js tips and shows how to build a 3D environment. Keeping 3D company we have JavaScript. Matt Crouch answers your questions. He takes a look at the big issues and gives the answers you need to succeed. With over 20 essentials solutions, this is a feature you cannot miss. Check it out on page 66. Elsewhere we have a close-up look at the latest update to Node package manager, npm. Find out why you need to be using it today. Plus we have plenty of quality tutorials to keep you learning. Enjoy.

“

Make it run fast and fluid – 60fps, all the time. Around 50% of the work is making sure it runs and looks good everywhere. But it’s worth it

”

Meta

Contributors

This issue’s panel of experts Welcome to that bit of the mag where we learn more about the featured writers and contributors…

Future Publishing Limited Richmond House, 33 Richmond Hill Bournemouth, Dorset, BH2 6EZ

Editorial Editor Steve Jenkins

steve.jenkins@futurenet.com 01202 586233

Designer Harriet Knight Senior Art Editor Will Shum Editor in Chief Amy Hennessey Contributors Jake Davis, Daniel Ward-Murphy, Marpi, Johnny Slack, Mark Billen, David Howell, Paul Betteridge, Leon Brown, Mark Shufflebottom, Steven Roberts, Luke Harrison, Tam Hanna, Simon Jones, Matt Crouch, Phil King, Philip Morris Photography James Sheppard All copyrights and trademarks are recognised and respected

Web 3D experts This issue we have a trio of 3D experts. Digital artist Marpi (marpi.pl) and audio-visual coding artist Johnny Slack (johnnyslack.co), along with our very own Mark Shufflebottom, reveal how to build impressive 3D experiences for the browser. Learn how to create with WebGL and three.js. Page 42

3D environments have become part of the internet, and “with support across all types of devices, they are the best way to get more immersive experiences to everyone ” Simon Jones

Mark Shufflebottom

Simon has always used npm as his package manager of choice. In this issue he takes a closer look at the updates to the latest release and reveals what improvements they will bring to your workflow and projects. Page 74

Steven Roberts

Mark is a Professor of Interaction Design at Sheridan College of Advanced Learning near Toronto. In this tutorial, Mark is creating a fully interactive environmental visualisation using the WebGL library three.js. Page 50

Paul Betteridge

Steven is the lead front-end developer at Better Brand Agency in Middlesbrough. In this issue he takes a closer look at responsive video masking and explores its possibilities with the help of of SVG and Clip Path. Page 56

Tam Hanna

Paul has 15 years’ experience leading digital organisations and pioneering digital marketing, across a plethora of competitive markets. He is a ‘Google Leader’ and this issue lets you know how to boost your ranking with essential SEO. Page 62

Leon Brown

Tam is a coding veteran who loves to experiment. This issue he introduces you to the cross-platform networking library HumbleNet, which uses WebRTC and WebSockets to emulate a lossy protocol. Page 86

4___________________________________________________________________________meta

Leon is a freelance web developer and trainer who assists web developers in creating efficient code for projects. This issue he reveals a host of techniques, as seen on the top-class websites featured in our Lightbox. Page 14

Matt Crouch Matt is a front-end developer at Cinolla. How can you improve the performance of your code? Should you still be using jQuery? In this issue, he answers a mixture of questions covering all you should know as a JavaScript developer. Page 66

Luke Harrison Luke is a web developer from Sheffield, UK who is all about scalable and efficient front-end architecture. In this issue he explores how to generate a static blog with the help of Gulp and Mozilla’s Nunjucks. Page 80

Advertising Media packs are available on request Commercial Director Clare Dove clare.dove@futurenet.com Senior Advertising Manager Mike Pyatt michael.pyatt@futurenet.com 01225 687538 Account Director George Lucas george.lucas@futurenet.com Account Manager Chris Mitchell chris.mitchell@futurenet.com International Web Designer is available for licensing. Contact the International department to discuss partnership opportunities International Licensing Director Matt Ellis m att.ellis@futurenet.com +44 (0) 1225 442244 Print subscriptions & back issues Web www.myfavouritemagazines.co.uk Email contact@myfavouritemagazines.co.uk Tel 0344 848 2852 International +44 (0) 344 848 2852 Circulation Circulation Director Darren Pearce 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 Finance & Operations Director Marco Peroni Creative Director Aaron Asadi Art & Design Director Ross Andrews Printed by William Gibbons, 28 Planetary Road, Willenhall, WV13, 3XT Distributed by Marketforce, 5 Churchill Place, Canary Wharf, London, E14 5HU www.marketforce.co.uk Tel: 0203 787 9060 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 holds full FSC (Forest Stewardship Council) certification and accreditation Disclaimer

All contents © 2017 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.

ISSN 1745-3534

Contents

Meta

Inside issue 265

Cutting-edge features, techniques and inspiration for web creatives Chat with the team and other readers and discuss the latest tech, trends and techniques. Here’s how to stay in touch…

webdesigner@imagine-publishing.co.uk 08 What are the tools and trends in the web development market?

•

@WebDesignerMag

•

www.creativebloq.com

Cover focus

Web Designer takes a closer look at global tech publisher Packt’s Skills Up 2017 report

10 Webkit: The best must-try resources out there Discover the libraries and frameworks that will m ake your site a better place to visit

13 Strategy for site success Daniel Ward-Murphy, strategy director at Salad examines what it takes to make a great site

14 Lightbox A showcase of inspirational sites and the techniques used to create them

26 Flying colours Find out how two supersonic agencies brought Brussels Aiport stats to life

34 Small but perfectly formed Createful, the vision of one man who wanted to create amazing mobile solutions

42 Web 3D: Pro build secrets The third dimension is now standard on the Web. Find out how to create impressive experiences from the experts

66 JavaScript: Your questions answered Find out how to future-proof your code,

improve peformance and much, much more

74 NPM5: What’s new? Get up close and peronsal with the latest

update to the package manager

92 Hosting listings

An extensive list of web hosting companies. Pick the perfect host for your needs

94 Course listings Want to start learning online? Check out what courses are out there with this list

98 Next month

What’s in the next issue of Web Designer?

6___________________________________________________________________________meta

JS: Your questions answered

Future -proof code and improve performance

NPM5: What’s new?

Discover the latest must-know updates

Visit the WEB DESIGNER online shop at

FileSilo

myfavouritemagazines.co.uk

96 Get the latest must-have resources and videos

• 144 minutes of expert Angular video guides from Pluralsight • 50 Abstract art textures • 12 Text Highlighter Pro PS actions

for the latest issue, back issues and specials

Tutorials

Web gurus take you step-by-step through professional techniques

Never miss an issue

Subscribe Turn to page 32 now USA readers turn to page 85 for an exclusive offer

50 Create an interactive visualisation Integrate an interactive input slider to take control of a 3D WebGL visualisation

56 Responsive video masking

Discover how to add video backgrounds with SVG

62 SEO: boost your ranking

When approaching a new implementation, it’s always best to try out as many solutions as possible Comment - Jake Davis - p11

Strip back SEO and understand how to overcome the challenges set by the latest search algorithms

Web Workshop 54 Animate sliding image intro

flavinsky.com Bring together image and text to add interest

60 Sliding page section navigation https://intelligo-group.com Introduce slide out screens to reveal new sections

Web Developer 74 NPM5: What’s new? Discover the new features of the latest update

80 Build a blog with Gulp How to generate a static blog using task runner Gulp and Mozilla’s templating engine Nunjucks

86 Ever heard of HumbleNet? 34

ProFile: Createful

A closer look at one mans vision

Lightbox: OUIGO

It’s a cross-platform networking library that simplifies the transition to the browser

A 3D pinball extravaganza

meta__________________________________________________________________________ 7

News CONTACT US AT: webdesigner@imagine-publishing.co.uk | @WebDesignerMag

Header

The tools, trends and news to inspire your web projects

Web developers: want to make money?

Get Web Designer digital editions

The latest Skills Up report from global tech publisher Packt takes a look at the tools and trends that will make devs rich, maybe

Get your hands on a collection of the best contemporary techniques

hen it comes to web development, it is pretty easy to assume that JavaScript is top dog. But, obviously it’s not that simple. Imagine turning up for an interview and saying ‘I’m great at JavaScript’. We think they might want to know a little more than that. JavaScript is the basis for thousands of different libraries and is included in endless frameworks. There’s a few that spring immediately to mind, such as React and Angular. But web development is not just about JavaScript either – there are hundreds of libraries that a developer could have in their arsenal, but you cannot learn them all, so it’s very much a matter of choosing the right ones to ensure that you get the job you want. And, if the libraries and tools that populate your dev arsenal are in demand, you can make a little more money than expected. Global tech publisher Packt recently released Skill Up 2017, its developer skills

Need an instant hit of Web Designer? Check out our digital specials. The Web Apps Handbook Volume 2 and The Developer’s Guide to JS reveal the best tools and methods to build apps with web technologies and learn how to get started with ES6 and npm. Don’t forget Animate with HTML & CSS and 3D and the Web. We cherry-pick a collection of the best animation and 3Drelated techniques to add interest to any project. Plus, check out Advanced Angular, 20 Quickfire HTML & CSS Techniques and Amazing Websites and How to Build them Vol 04. How can you get your hands on a Web Designer digital edition? Head to bit.ly/1hsGYgl, download the free Web Designer app and find them waiting for you as an in-app purchase.

and salary report. In a nutshell, the report takes a look at the tools developers are using, who’s getting paid the big bucks, and some of the emerging trends that web developers should be on the lookout for. The report is based on replies from over 4,700 respondents from across the globe. In its executive summary it revealed that full-stack development is dominating as a technical role across industries; 60% of respondents have either a ‘reasonable amount of choice’ or a ‘significant amount of choice’ over the tools they use at work; developers need to work in an environment they love – IDEs are among the most loved tools; 47.57% of respondents say their manager has less technical knowledge than they do; there’s a container revolution happening – Docker is being learned across today’s tech workforce; and Python remains consistently popular across job roles. Looking further into the report what else did we learn? As well as being a global,

“

Full-stack development is dominating as a technical role

Want to add kudos and cash to your development role? Then think about Docker

8________________________________________________________________________header

”

survey – which included respondents from the US, UK, Brazil, Australia and India – it revealed the average salaries of developers and tech professionals. As you might expect, it’s the US that comes out on top. They earned an average of £104,000, compared with Europe that sat at £75,000, while North Asia came in at around £55,000. To put this into some kind of perspective, it wasn’t web developers that topped the list. The big earners by role were big data engineers, security engineers and information architects. But, we all know web developers aren’t in just for the money; they are in it for the love. More importantly, what tools were popular? In a straight top tools chart (including all job roles), it was Python that was happily sitting at number one. Elsewhere in the top ten were Git, Java and Docker, with JavaScript coming in at number 11. Other notable tools included React, Jenkins, Sublime Text and PHP. Drilling down by role revealed differing results. For web developers, Git was number one; for mobile developers, Xcode was top choice. But, if you are looking to boost your salary above the average, there are certain tools that can help you achieve this. By role, web developers needed to know Fiddler and Bootstrap. But, as we have mentioned, it’s not all about the money. So, what tools are web developers and tech pros planning to learn? Docker, Python, Angular and Jenkins. For web developers specifically, it was Docker, Angular and React. We have only skimmed the surface here. Get your hands on the full report (www.packtpub.com/books/info/packt/ skill-report-2017-direct-download) and find out how you can start making the big bucks and discover the tools and skills that people want.

Header

Inspiration

Sites of the month

02.

01. 01.

03.

01. Viva Le Vevo

04.

parall.ax/viva-le-velo Gorgeous illustrations of the worldâ&#x20AC;&#x2122;s greatest bikes with their history

02. Tubelectric www.tubelectric.com.ar/home A boring subject matter made engaging with a few simple animations

03. Team Alpine Matmut Challenge bit.ly/2hg0kws A fun 3D driving game with simple controls

04. Pet Camp bit.ly/2vkPcEL Cute illustrations and pop-up info boxes tell users whatâ&#x20AC;&#x2122;s happening at Pet Camp

Graphics

Colour picker

Typesetter

WordPress

bit.ly/2uQ4wWY

bit.ly/2hg08gR

bit.ly/2vXjwSW

bit.ly/2tQuiJa

A new bold headline typeface, designed to

Looking to create your own listings

be an alternative to overused headline

directory? This theme is a great starting

typefaces such as Impact. Includes four

point to help you rival the big boys.

Atari Baby

literateakihabaraota

Beautifully crafted Japanese-style graphics and robots. What more could you want?

#505aa8

Blunt

CityLister

weights, each with matching italics. #c3c1e1

#8d8fc6

#d74699

#fee800

header_______________________________________________________________________ 9

Header

Resources CONTACT US AT: webdesigner@imagine-publishing.co.uk | @WebDesignerMag

webkit

Discover the must-try resources that will make your site a better place

NexusUI 2.0

nexus-js.github.io/ui Nexus ‘is a collection of HTML5 interfaces and JavaScript helper functions to assist with building web audio instruments in the browser’. The latest version has a more conventional JavaScript API, a pared-down collection of interfaces, and uses SVG graphics instead of canvas graphics to add a more user-friendly approach.

Puck.js

CSS database

Pinhole-js

www.puck-js.com So what is Puck? It’s an ‘open source JavaScript microcontroller you can program and debug wirelessly’. Take control using standard HTML and JS.

jonathantneal.github.io/css-db What’s happening with CSS? Check this list of CSS features and where they are in the process of becoming implemented web standards.

github.com/tidwall/pinhole-js Need a very simple API for visualising data structures? No bells or whistles, just clean lines and solid colours? Check out this 3D wireframe drawing library for JS.

Top 5 Web conferences – September 2017

Get yourself a seat at the biggest and best conferences coming your way soon

Reasons to: reasons.to A three-day conference/festival of design and code. It brings together a host of top-class speakers on many subjects.

Generate London www.generateconf.com Get ready for a conference packed with insight, inspiration and practical take-aways.

10h��header

Design Matters

React Boston

Web Expo

designmatters.io Aimed at the design community. Discuss what’s new in digital design, get inspired, meet new people and have fun.

www.reactboston.com A two-day, single-track conference all about React. Join them for a weekend of high-quality content and more.

www.webexpo.net Fancy visiting Prague and getting to see some great speakers? Then this is the web conference for you.

Header Opinion

The joy of interactive prototyping Discover how it can provide a better development journey

Jake Davis

rototyping is a process that has existed since the inception of ‘product design’. In the world of web and application development, the idea of prototyping is not new either. Many developers have created beta releases of their builds, to sense-check functionality and to help validate the project for additional funding or client sign off. The idea of interactive prototyping, however, is a step even before that, utilising the designs to feign a user experience without a single line of code being written. In the world of rapid and agile development cycles, this has become a necessary step to ensure time is not wasted developing an idea that would never satisfy the end user. When sending through a set of designs to a client or developer, especially in organisations where the design team is separate from the front-end team, it’s very difficult to work out a flow for a user when viewing each screen in isolation. Historically, web and app developers would rely on wireframes, design mock-ups and videos to relay the experience to any stakeholders or team who would need to build the solution. Interactive prototyping tools – now built into many UI design tools or low-cost platforms – utilise the designs and hot spots to allow for the creation of a tappable, swipable or pinchable vision of the proposed user experience. Grabbing a mobile and tapping through the designs or perusing a web design, while clicking away on call to actions, is the easiest way to present a proposed flow in the setting it will actually be used. Not many people would buy a mattress without being able to jump around on it a bit first – this is the digital UI equivalent! If the client, designer and developer – along with the wider project team – all have visibility of this interactive prototype, it also removes the age-old issue of misinterpretation of flow or expectation gap. Members of the project (both client and internal) are not always able to translate the repercussions of decisions made during the design process, particularly on flow while looking at something as systematic as a wireframe to visualise the flow. An element that according to the wireframe is only accessible by a complicated gesture

“

Design director at Pocket App

www.pocketapp.co.uk with or will react differently to a proposed piece of functionality than expected. Companies spend large amounts of time and money on A/B testing and focus groups to try and optimise their interface based on user and business objectives. None of this is possible with only the feedback of the business, designs and developers – it requires the insight of the end users themselves. The interactive prototype also becomes a testing ground for all new functionality or changes in approach that will inevitably crop up during the development process. Utilising this design-only prototype can aid in getting approval from the project stakeholders and validation from user groups before reworking code in the development environment. To gain the full benefit of the prototyping process, it needs to be considered a live file throughout the project’s life span, constantly updated with each new phase, alteration and bug fix. With each of these changes there will be different treatments to achieve the same goal. Using the interactive prototype can allow for numerous versions to be created and tested with quick succession. When approaching a new implementation, it’s always best to try out as many solutions as possible; however, this can be time-consuming to do using development and is not a true representation using just flat designs. This can help try, test and validate the perfect approach from the bank of available ones, rather than just the one we happen to develop. In summary, embedding prototyping into any developer’s workflow may seem to some as an unnecessary step in the world of rapid developmentbased prototyping; however, it can reduce rework substantially when dealing with clients, stakeholders and, most importantly, end users. It allows the proposed design and experience to be demonstrated as it was meant to be, in a way that the user can physically navigate and connect with. It could be the difference between when a client or stakeholder works out that they do not agree with the proposed design – this could be either during the early design phase, or many months and caffeine-fuelled coding nights later.

Getting the build in the hands of the end users is invaluable or requires numerous taps may on paper seem fine, but once actually dropped onto the screen may seem clunky or too hidden. This is the point where rework is required to alter an interface element that had already been ‘signed off’, or has been present throughout but had not been fully understood until all members of the team were able to play around with the build in their hands. It’s a lot easier to facilitate this during a design prototype stage than with a beta build. This ability, for people to get their hands on the experience before development, extends to that of the end users, who can give valuable feedback on the proposed solution. This is the key reason it is so important for web and application developers to go through this process for all technical builds. Getting the build in the hands of the end users is invaluable: it allows for test groups to be put together and validate the approach and idea. Over the many projects that I have been part of at Pocket App, every single one has benefited from the utilisation of interactive prototypes. Even following all the best practices, user research, latest trends and industry experience, there will still be areas of the experience that users will not resonate

”

header_______________________________________________________________________11

Header

Resources CONTACT US AT: webdesigner@imagine-publishing.co.uk | @WebDesignerMag

webkit

Discover the must-try resources that will make your site a better place

UI Kitten

bit.ly/2silV8y UI Kitten is a mobile framework with a set of easily customisable elements. It offers a bunch of commonly used elements as a single dependency with similar UI design. The main benefit is that users can create their own configurations and reuse them in the development process. So, configure them once and use anywhere.

Local SEO

Moon

Flow

bit.ly/2tZZnhI Ranking your business is becoming more important than ever. In the first of this series of posts, find out about best practices and how to work with Google.

moonjs.ga Moon describes itself as ‘a minimal, blazing fast library for building user interfaces’. It is smaller and faster than Vue, React and Angular.

danross.co/flow So what is Flow? It is a typeface built for wireframing. It’s free and it comes in three weights – circular, rounded and block. Go get it now.

Top 5 CodePens to inspire

Feast your eyes on this impressive collection of code examples

Airport Distance Map bit.ly/2f3ejoC A combination of HTML, CSS and JS allow users to drag markers to get distances.

Pattern bit.ly/2tZarMl Animated patterns morph into new animated patterns, creating a continually rotating selection of patterns.

12h��header

Animated Search Box bit.ly/2vdERKn Add a little oomph and focus to your search option with this simple animated search facility.

Fitty

Centring

bit.ly/2ufwIk4 This is a neat combination of code that ‘Snugly resizes text to fit its parent container’. Quick and easy to use.

bit.ly/2hjgS6Z An oldie but goodie. This CodePen offers a collection of code examples to make sure you get it right.