Web Designer 264 (Sampler) by Future PLC

Ex pe pa rt g tues o to f ri al s

FREE

HTML5

CSS3

jQuery

JavaScript

167 minutes

of angular Videos

@WebDesignerMag

POWER UP YOUR

/WebDesignerUK

best-ever

PACKAGE MANAGERS which one is right for you?

BROWSER 20 must-have extensions

create pixel art with d3.js implement JSON data to make pretty patterns

REAL-WORLD CSS VARIABLES ORGANIC ANIMATED HEADERS WITH JS BUILD A HORIZONTAL SCROLLING MENU

today

Break out from the basics & learn the latest techniques TRANSLATE & TWEAK with

Add language support and customisation for multiple locales

DESIGN FOR Accessibility AND usability UNderstanD VOICE INTERACTION FOCUS ON MOBILE-CENTRIC UX

Issue 264

SMART CSS WITH SASS

How to use mixins, loops and functions

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

Are you ready for UX today?

ver been stuck in an endless circle trying to find an exit from a page? Ever purchased a product and sat there wondering is that it? The user experience can be frustrating, very frustrating. UX is ever evolving – remember how you used to search before voice search was introduced – and as designers and developers we need to keep up with the latest innovations and techniques In our lead feature on page 42, UX researcher Rebecca Hugo takes a closer look at the new technologies that are integrating into the user experience. What about accessibility and personalisation? Are you designing for voice search?

“

Have you thought about how VR and AR will be part of the user experience? What about the less tangible aspects such as ethics and responsibility? What about the small details? All are crucial in creating the ultimate user experience. Get it right and your users will love you for ever more. Getting back to the browser, we reveal 20 must-have extensions for Chrome/Firefox that’ll make your workflow faster and smoother. Once you’ve tried a few you’ll wonder how you ever did without them. npm is a great package manager , but is it the exact fit for your needs? We choose seven of the best and help you decide which one is right for you. Plus, we have our usual collection of quality tutorials to keep you learning. Enjoy.

Everyday websites and apps should not only be continuing mobile-centric design, but focusing on mobile-centric UX, too

”

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 Kevin Ball, Rebecca Hugo, Mark Billen, David Howell, Leon Brown, Mark Shufflebottom, Steven Roberts, Luke Harrison, Tam Hanna, Simon Jones, Matt Crouch, Lily Madar, Phil King, Philip Morris Photography James Sheppard All copyrights and trademarks are recognised and respected

Rebecca Hugo Greenwood Campbell’s UX researcher Rebecca Hugo brings you the UX trends and topics for 2017, including breaking boundaries with AR and getting chatty with conversational UI. Rebecca is an advocate for the user at every turn, communicating company purpose, and giving back control to the user. Page 42

A fundamental part of UX is remembering one simple “thing: people don’t think the way that you do. There is a likelihood that you are not part of your audience ” Simon Jones

Mark Shufflebottom

Browser extensions can be a huge time-saver for designers and developers alike, by speeding up tasks or staying in the browser. This issue, Simon looks at some must-have extensions to check out while building your apps/pages. Page 66

Steven Roberts

Mark is a Professor of Interaction Design at Sheridan College of Advanced Learning. In this issue he uses Perlin Noise to create a Flow Field that allows for animated generative growing lines to flow out of text. Page 56

Matt Crouch

Steven is passionate about design and code quality, currently working on some exciting projects at Better Brand Agency in Middlesbrough. This issue he’ll be showing you how to make Sass do the repetitive work in CSS. Page 52

Lily Madar

Matt is a front-end developer for Cinolla. Getting websites to work in multiple languages is notoriously difficult – particularly in React. In this issue, Matt takes a look at a tool that lets the browser do the work. Page 86

Leon Brown

Lily is a creative technologist and crafter with a keen interest in data visualisation. This month, she shows us how to use D3, a JavaScript library dedicated to ‘data viz’, in order to construct SVGs and make pixel art. Page 80

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

Tam Hanna Using JavaScript package managers allows you to integrate libraries effortlessly, saving valuable man-hours. This issue, coding veteran Tam shows you some of the best package managers available today. Page 74

Luke Harrison Luke is a web developer from Sheffield who is all about scalable and efficient front-end architecture. In this issue he explores how to use CSS variables and the Web Storage API to implement website theming. Page 60

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 Southernprint Ltd, 17-21 Factory Road Upton Industrial Estate, Poole, Dorset, BH16 5SN 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 264

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 Is there an alternative to Google Chrome?

•

@WebDesignerMag

•

www.gadgetdaily.xyz

Cover focus

The Chrome browser is more popular than ever. But is there a genuine alternative for designers and developers?

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

11 Year of the Grid ZURB’s Kevin Ball tells us how CSS Grid has sparked a renaissance of grid innovation

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

26 Striking a pose From the home of style we learn how Milan studio Gusto brought the You Matter site to life

34 Mission Possible With a vast reach across the digital media landscape Web Designer decided it needed to find out more about POSSIBLE.

42 UX Today The user experience is more important than ever. Find out what you need to know and consider in 2017 and beyond

66 Power up your browser Discover 20 essential Chrome and Firefox extensions that will speed up your workflow and enhance your projects

74 7 Best-ever package managers Which one is the ideal solution for your

project? We look at their pros and cons

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

Power up your browser

A must-have collection of extensions

7 Best package managers Decide which is the right one for you

Visit the WEB DESIGNER online shop at

FileSilo

myfavouritemagazines.co.uk

96 Get the latest must-have resources and videos

• 167 minutes of expert Angular video guides from Pluralsight • 200 Futuristic Light Leaks • 15 Seamless paper textures

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

52 Get cosy with Sass tasks Learn how to use mixins, loops and functions 56 Add animated text titles with p5.js

Use JavaScript to manipulate text shapes and grow free-flowing lines out of a text title

60 Site theming with CSS variables

CSS Grid opens our eyes to the possibilities of two-dimensional layouts with simpler and more semantic markup Comment - Kevin Ball - p11

Combine CSS variables with the Web Storage API to change the layout and colours and store for future use

Web Workshop 50 Build a scrolling menu

doberman.co Add interest to your navigation system

64 Create an iconic slide-out menu moa.repponen.com Introduce images to the popular design element

Web Developer 74 7 Best package managers Discover the pros and cons for the most popular options and decide which is best for you

80 Make a pixel art framework Explore how to combine JSON data structures with D3 to achieve various renderings of pixel patterns

ProFile: POSSIBLE

Crafting next-generation experiences

Lightbox: PlayUp

86 Translate and tweak with React Add language and layout support for multiple locales

Flipping effects everywhere

meta__________________________________________________________________________ 7

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

Header

The tools, trends and news to inspire your web projects

Chrome is king. But, are there alternatives? When it comes to web browsers, Chrome is top dog. But, there are other browsers out there you can try, you know

hen building a site, do you design and develop for the most popular or do you build for everyone? In an ideal world you would build for everyone, but realistically this is not a productive and fruitful solution. It could be argued ‘what about the 1% (or whatever) that are still using IE6?’. Yes there are still people using the antiquated browser, but thankfully only a very small number. And, it simply wouldn’t be worth it. But, as we all know, this is an extreme example of supporting older browsers. In reality the vast majority of users are using Chrome, Firefox and Internet Explorer. Well, at least on desktop. We’ll talk about mobile browsers a little more later on. Chrome is out in front by a country mile in nearly every combination of platform and continent you can think of. Worldwide

“

Chrome has an impressive 54% of the market share, but this still leaves around 46% of users either using a different browser or a combination of browsers. Just because you use Google on your desktop it doesn’t mean you are going to use it on your iPhone or your iPad. The majority of Apple users stick with the default browser. However, if you want to switch to Google Chrome on your Apple device, you can. It can be downloaded from the iTunes store. Go on, you know you want to. If we change the parameters – location, desktop, mobile, etc – then the figures can offer some interesting insight. For example, in the US, the most popular desktop browser after Chrome is Internet Explorer, closely followed by Firefox. Switching to desktop, mobile and tablet, it is Safari that leaps into second place with a 30% market share. But, this shouldn’t

Are there any alternatives out there especially for developers? Of course there are and one that fits the bill is the Ghost Browser

”

Head over to ghostbrowser.com and discover the benefits that Ghost can offer designers and developers

8________________________________________________________________________header

come as any surprise as the US is the bastion of Apple devices. But what happens when we change location? Switch to South America and Chrome has a whopping 77% market share across desktop, mobile and tablet. What happens when we change to mobile and tablet only? Not much really. Google’s share drops a little to 72% with Safari coming in at a very distant 9%. Head to Europe and the figures change again. Across desktop, mobile and tablet, Chrome weighs in with a 53% market share, with Safari getting around 17% and Firefox 11%. Switch to desktop only and Chrome stays very much the same while Firefox heads towards 20% and IE in third with 9%. It seems wherever you go, Chrome is the number one browser and there are very good reasons that it is out in front of its competitors. It offers great support for the latest web technologies and it’s the go-to browser for the everyday consumer as well at techies. On mobile it’s a better alternative (in our opinion) than the standard Android browser and Safari. While designers and developers need to think about what browsers users are using, are there any alternatives out there especially for us? Of course there are and one that fits the bill is the Ghost Browser. If you haven’t heard of Ghost, it is described as ‘For People Who Work in the Web’ and you can get it from ghostbrowser.com. So what does the Ghost Browser have to offer designers and developers? In its own words (this is for web developers), ‘Don’t let mundane tasks like logging in and out of different user level accounts run static on your game! Colour-coded Sessions let you stay logged in to all user levels at once, in one browser window, so you can stay focused on the code.’ There is a free version, so go and give it a try.

Get Web Designer digital editions Get your hands on a collection of the best contemporary techniques 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.

Header

Inspiration

Sites of the month

02.

01. 01.

03.

01. Marpi: Demos

04.

demo.marpi.pl A must-see collection of web 3D animations to enjoy and interact with

02. Oddboy oddboy.nz/home An interactive 3D text logo set against an infinite scrolling background

03. Thomson & Scott www.thomsonandscott.com Bubbles and more bubbles inside the text title instantly portray the brand message

04. Ammunition Group ammunitiongroup.com A simple scrolling site with a great use of colour and photography

Graphics

Colour picker

Typesetter

WordPress

bit.ly/2spQ0ST

bit.ly/2s5bYve

bit.ly/2spPm7Q

ecologist.mikado-themes.com

Make a statement with an upgraded version

Big fullscreen hero images, bold typography,

of the layered type family Idler. Use Detail

clean layouts and great colour palettes.

Apps Icon Collection

Empress

A gorgeous and colourful collection of app icons from the talented hand of Zivile Zickute. Check out the collection.

#e09f9f

Idler Pro

Ecologist

(shown) to add instant impact to text.

#f9b4b0

#fcd7d2

#fee3d7

#feece2

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

Carbon

carbondesignsystem.com From the hand of IBM comes the Carbon Design System, consisting of a design kit and a component library. The different elements of Carbon are systemic and logical, as they all follow the same universal principles. The Design Kit includes iconography, colour palettes, grids and templates, while the library has reusable HTML and SCSS partials.

Css doodle

Coolhue

Bulma

yuanchuan.name/css-doodle Create beautiful patterns and shapes. The component simply generates a grid of divs painted by its own content. Needs Web Components support.

webkul.github.io/coolhue Need a little colour inspiration for your next project? Choose from a host of well-matched colours. Simply click to copy the CSS code, ready to use.

bulma.io A modern CSS framework that is based on Flexbox. This easy-to-use tool will get you a mobile-first site using only the elements you want to.

Top 5 Web conferences – August 2017

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

An Event Apart

React Rally

Summer Camp

TypeCon

Design Week

bit.ly/2spflAN An Event Apart Chicago is three days of intense focus on digital design, UX and more. Speakers include biggest in the business.

www.reactrally.com A two-day single-track conference for developers who like to use Facebook’s React.js and React Native.

bit.ly/2sEGA69 UX, PHP and JS hands-on web development and web design workshops offer practical experience and knowledge.

www.typecon.com Love type and typography? If you do then check out this conference for everything that is type related.

bit.ly/1oiNLiJ An exclusive program to learn best practices and methods, design strategies and much, much more from the experts.

10h��header

Header Opinion

Why 2017 is the year of the Grid How CSS Grid has sparked a renaissance of grid innovation

Kevin Ball

017 is the year of the grid. When Firefox, Safari, and Chrome all turned on the new CSS Grid layout spec within a few short months of each other in early spring, it was like Willy Wonka’s chocolate factory opened up for the web world. Whereas traditionally web layouts think in “1 dimension”, with tight control horizontally and far less control vertically, CSS Grid opens our eyes to the possibilities of truly two-dimensional layouts with dramatically simpler and more semantic markup. CSS Grid is the future, but sadly for production websites it is still the future. Despite the coordinated leaps forward among Firefox, Safari, and Chrome, a combination of Microsoft’s Edge browser being slow to the party and the mobile device turnover cycle has CSS Grid’s global availability stuck in the low 60% range according to www.caniuse.com. When the open source community started talking about usage within the ZURB Foundation framework, even the biggest grid enthusiasts acknowledged that it would likely be unusable in production projects until mid 2018. That’s like showing us all the goodies in the chocolate factory, and then saying “Sorry, come back in a year, we’re not quite ready yet”. But CSS Grid had shown us what was possible with a truly two-dimensional grid, and we weren’t ready to give up on it. When the Foundation community started exploring the possibilities available to us today, we realised that there’s a tremendous amount of untapped potential in today’s technologies. Flexbox has attained wide spread adoption, but few if any grids take full advantage of its capabilities to lay things out vertically as well as horizontally. Flexbox not only makes things like vertical centring and automatic sizing a breeze, but also allows developers to swap the ‘direction’ of thinking from horizontal to vertical or vice versa. Flexbox remaps the layout world from simply boxes and lines to one of vectors that can point in either the x or y direction, wrap automatically, and finely control spacing.

www.zurb.com

Foundation Lead at ZURB

“

The new XY Grid in Foundation 6.4 takes advantage of both of these advantages to create a super simple, two-dimensional grid with fine-grained control of both padding and margin. This grid is simple to understand, simple to use, and dramatically speeds up the development of complex, responsive, two-dimensional layouts. And best of all, it’s built on technologies like calc and Flexbox that have greater than 95% global browser share, which means that it is usable in production projects right away. The XY Grid uses Flexbox to enable you to manipulate cells within the grid in either vertical or horizontal directions. Flexbox thinks in terms of vectors, so each ‘grid’ component defines a direction, either ‘x’ (horizontal), or ‘y’ (vertical). These horizontal and vertical components are then seamlessly nestable to create two-dimensional layouts with ease. The use of calc enables fine-grained control of both margin and padding across the cells of your grid, mimicking the power of CSS Grid’s row and column gaps. In addition, by introducing a concept of a grid ‘frame’, the XY grid allows you to fix your grid within particular parts of the viewport, trivially allowing fixed headers, footers, or other pieces and enabling independently scrolling components within the grid. This is done by leveraging the capabilities of Flexbox to automatically size children with tight control based on the space available to them and their parents’ size. After years of relative stagnation, grids are hot again. CSS Grid is taking the most powerful layout engine in the world, the browser, and giving it 10x the power. The result will be an incredible flowering of innovative new layouts as current limitations of technology begin to fall away and we’re able to truly think about our layouts in multiple dimensions. The spec will continue to grow in availability and adoption, and the next major version of Foundation will help developers fully harness the power of CSS Grid. But we don’t have to wait – the new Foundation 6.4 XY grid built on the widely available Flexbox and calc enables us to simply apply this thinking today.

CSS Grid opens our eyes to the possibilities of truly two-dimensional layouts with dramatically simpler and more semantic markup The CSS3 calc() expression has essentially the same availability as Flexbox and allows advanced margin-based grids that alleviate many of the challenges in padding-based grids that are common in CSS frameworks. It lets you specify arithmetic expressions in CSS properties, combining different types of units like % and rem, and seamlessly permitting advanced ratio-based grid logic.

”

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

Polyfill

polyfill.io The name and tagline – ‘Upgrade the web. Automatically’ – give a good indicator of what to expect. So, how does it work? It reads the User-Agent header of each request and returns polyfills that are suitable for the requesting browser. There is an extensive features list that shows which browser (and version) supports what feature.

Jest

cell

Gradient buttons

facebook.github.io/jest An easy-to-set-up JavaScript testing solution that works out of the box for React projects. Used by Facebook to test all JavaScript code.

www.celljs.org Cell describes itself as a self-driving web app framework. No framework classes, no API method calls and no HTML body tags keep it simple.

gradientbuttons.colorion.co Who wants a great-looking gradient button without the hard work of actually creating it? Head to Colorion, choose your favourite and get the CSS code.

Top 5 WordPress eCommerce themes

Build yourself an online shopping empire with this top-class selection

Presiden

Voltage

Mr Kofii

Claue

Organie

bit.ly/2sHSiwV A multitalented contemporary theme built to make people purchase. Choose from ten different layouts.

bit.ly/2ukvDsk Get your very own electronics and gadgets superstore with this professional-looking theme. Plenty of options.

bit.ly/2tci0gw A coffee-themed template that sells coffee-based products. If you want to sell anything coffee related, start here.

bit.ly/2sBbNvZ A modern and clean store with a host of homepage layouts. Includes store locator layouts and other useful pages.

bit.ly/2sBz7JW A Shopify Sections-ready theme with a focus on organic produce. Offers a selection of homepage layouts.

12h��header