Page 1


<meta> welcome

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

Highlight

We plan to launch a Resn office in every continent by 2020. Then we will finally unleash our mind control ray and enslave you all

Steven Jenkins

Crafting next-generation digital masterpieces. Web Designer couldn’t resist talking to Resn Page 34

WebVR, WebAR, Chatbots. Are you using them?

W

e all know the web is forever moving forward. But, it’s when new specifications get browser support that things start to get interesting. So, what are the design trends that are/ should be making the web a better place today? WebVR, chatbots, SVG, CSS Grid, microinteractions, voice search and WebAR may not be new, but now’s the time to be using them. Who better to ask than those in the industry? They are at the forefront of design and technology, with a keen eye on what’s happening and implementing them in their projects. Get a

quickstart guide to CSS Grid, find out how to use SVG, learn how to build your own chatbot, work with microinteractions, optimise for voice search and get a glimpse at cutting-edge WebAR. Taking a step back we take a closer look at the very building block of the web: HTML. Producing five-star HTML is just as important as ever. We tell you why and how to keep up with the latest standards, how to work with semantic markup and the benefits data attributes bring. As well, we offer a look at the best and latest tags and what HTML 5.2 has and will offer. On the development side we look at jQuery vs JavaScript, the pros and cons for both and which one you should be using for what. Enjoy the issue.

Bots allow for a more human experience with technology, and it’s now possible to write something simple in one evening

Follow us on Twitter for all the news & conversation @WebDesignerMag Visit our blog for opinion, freebies & more www.gadgetdaily.xyz

FREE – exclusive with this issue

66

Designer resources Video Tuition – 1 52 minutes of expert video guides on JavaScript from Pluralsight (www.pluralsight.com) Assets – 14 plastered walls textures from Ehud Neuhaus 50 5K feather overlays from ArtPlanet

– The hand-written style font Caprica

www.filesilo.co.uk/webdesigner meta__________________________________________________________________________ 3


<meta> contributors

This issue’s panel of experts

Editor Steve Jenkins

steve.jenkins@futurenet.com 01202 586233

%

Designer Harriet Knight Production Editor Rachel Terzian Photographer James Sheppard Senior Art Editor Will Shum Editor in Chief Amy Hennessey Contributors Sari Griffiths, Craig Murphy, Leon Brown, David Howell, Dan Meineck, Greenwood Campbell, Jon Nemeth, ZURB, Mark Shufflebottom, Andrew Cox, Steven Roberts, Paul Betteridge, Paul Thomas, Green Chameleon, Neil Pearce, Mark Billen, Simon Jones, Tam Hanna, Matt Crouch, Lily Madar

“Bots allow for a

Steven Roberts Steven is a front-end developer from Teesside. He’s currently trying to find the time to play his guitars between personal projects, work and writing. This issue he teaches you how to create fullscreen menus with jQuery and Flexbox. Page 60

%

Editorial

Welcome to that bit of the mag where we learn more about the featured writers and contributors…

more human experience with technology, and it’s now possible to write something simple in one evening

Future Publishing Ltd Richmond House, 33 Richmond Hill Bournemouth, Dorset, BH2 6EZ +44 (0) 1202 586200 Web: w  ww.gadgetdaily.xyz www.greatdigitalmags.com www.futureplc.com

Advertising Digital or printed media packs are available on request. Commercial Sales Director Clare Dove Advertising Manager Mike Pyatt 01225 687538 michael.pyatt@futurenet.com Account Director George Lucas george.lucas@futurenet.com Advertising Sales Executive Chris Mitchell chris.mitchell@futurenet.com

7 Design trends contributors Not one, but seven industry pros reveal the latest must-use trends. Dan Meineck talks chatbots, Paul Thomas - SVG, Steven Roberts - CSS Grid, Andrew Cox - Microinteractions, Paul Betteridge - voice search optimisation, Mark Shufflebottom - WebAR and Jon Nemeth - WebVR. Page 42

Tam Hanna Tam’s long development career has seen him wrestle with a variety of stacks and languages. This issue he takes a closer look at JavaScript and jQuery and the pros and cons for both to help you decide which to use. Page 74

Simon Jones Simon feels strongly about the importance of well-structured, maintainable code. This issue, he looks at why it’s important to have a good understanding of HTML5 and best practices for HTML coding. Page 66

%

Licensing Web Designer is available for licensing. Contact the licensing department to discuss further opportunities. Head of International Licensing Matt Ellis +44 (0) 1225 442244 matt.ellis@futurenet.com

%

Subscriptions For all subscription enquiries: webdesigner@servicehelpline.co.uk 0844 848 8413 Overseas +44 1795 592 878 www.imaginesubs.co.uk Head of subscriptions Sharon Todd

% %

FileSilo.co.uk Assets and resource files for this magazine can be found on this website. Register now to unlock thousands of useful files. Support filesilohelp@futurenet.com Circulation Circulation Director Darren Pearce 01202 586200

%

Production Production Controller Nola Cokely 01225 687565

%

Management Finance & Operations Director Marco Peroni Creative Director Aaron Asadi Art & Design Director Ross Andrews Printing & Distribution Printed by Southernprint Ltd, 17-21 Factory Road Upton Industrial Estate, Poole, Dorset, BH16 5SN Distributed in the UK, Eire & the Rest of the World by Marketforce, 5 Churchill Place, Canary Wharf, London, E14 5HU 0203 787 9060 www.marketforce.co.uk

%

Distributed in Australia by Gordon & Gotch Australia Pty Ltd, 26 Rodborough Road, Frenchs Forest, New South Wales 2086 + 61 2 9972 8800 www.gordongotch.com.au

%

Lily Madar Lily is a creative technologist with a tendency to tinker with hardware and web-based projects. This issue, she talks chatbots and shows how to use NodeJS to help create a calendar assistant. Page 86

Matt Crouch Matt is a front-end developer who is based in London. In this issue, he takes a look at the new Media Session API and how it integrates with the operating system to provide a native-like experience to a podcast web app. Page 80

Mark Shufflebottom Mark is a Professor of Interaction Design at Sheridan College of Advanced Learning. This issue he is using Multiple.js to share & extend background images across different content panels to build up a dashboard design. Page 52

Leon Brown Leon is a freelance web developer and trainer who assists 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

4___________________________________________________________________________meta

Neil Pearce Neil is a freelance web and UI designer from Essex and specialises in creating UI for mobile, web and software apps. In this issue, Neil will introduce you to Marvel, a quick-to-learn prototyping tool. He shows you how to get started. Page 56

Got web skills?

We’re always looking for the hottest web-design talent. Email webdesigner@imagine-publishing.co.uk with examples of your creative work.

Disclaimer

The publisher cannot accept responsibility for any unsolicited material lost or damaged in the post. All text and layout is the copyright of Future Publishing Ltd. Nothing in this magazine may be reproduced in whole or part without the written permission of the publisher. All copyrights are recognised and used specifically for the purpose of criticism and review. Although the magazine has endeavoured to ensure all information is correct at time of print, prices and availability may change. This magazine is fully independent and not affiliated in any way with the companies mentioned herein. If you submit material to Future Publishing via post, email, social network or any other means, you automatically grant Future Publishing an irrevocable, perpetual, royalty-free licence to use the material across its entire portfolio, in print, online and digital, and to deliver the material to existing and future clients, including but not limited to international licensees for reproduction in international, licensed editions of Future Publishing products. Any material you submit is sent at your risk and, although every care is taken, neither Future Publishing nor its employees, agents or subcontractors shall be liable for the loss or damage.

© 2017 Future Publishing Ltd ISSN 1745-3534


contents

<meta> inside issue 261

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

Quick look…

08 Web developers: how and what are you learning ?

@WebDesignerMag

www.gadgetdaily.xyz

Cover focus

Stack Overflow’s latest survey reveals what 64,000 developers are learning and using

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 Agile survival guide Red Badger’s chief design officer offers some practical tips and advice on being part of a team

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

26 A taste for change Find out how meat-eating creative agency Akeo discovered a love for tofu to create a site full of flavour

34 Digital obsessions Sitting at the frontier of design, Resn were an

42

agency that Web Designer simply had to talk to. Find out what they had to say

42  7 Design trends you need to know and use today A collection of industry pros delve into the design trends that need your attention

66 HTML5: Code like a pro HTML is more relevant than ever. Find out how to make sure that your code is up to scratch

74 jQuery vs JavaScript Which one is the best for what? We examine the pros and cons of both

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

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

98 Next month

What’s in the next issue of Web Designer?

6___________________________________________________________________________meta

34

ProFile: Resn

Crafting next-generation digital experiences today

14

Lightbox: Climatune

Spotify brings the tunes of winter and summer


FileSilo 

Visit the WEB DESIGNER online shop at

A comprehensive collection of free designer resources!

for back issues, bookazines and DVDs

96 Get the latest must-have resources and videos

• 152 minutes of expert JavaScript video guides from Pluralsight • 14 plastered walls textures • 50 5K feather overlays

<tutorials>

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

96

52  Share background images Unleash the Multiple.js library to continue images and gradients across multiple content panels

56  Prototype with Marvel Discover how to get to grips with the Marvel app and produce better designs

60 Fullscreen responsive menus

Combine Flexbox, jQuery and CSS animations to create navigation with a bit of flair

Never miss an issue

Subscribe

66

Learn to code like a pro. Get top tips on producing first-class HTML

<header>

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

web workshop

The tools and trends to inspire your web projects

50 Add distorted TV effects

08  How are web developers learning today?

64  Animated stencil-letter load screen

veilhymn.com Use Three.js to add realism to images puttertje.mauritshuis.nl/en Keep visitors engaged and focused

We take a closer look at the latest Stack

web developer

Overflow developer survey

10 Webkit: The best must-try resources out there

74  jQuery vs JavaScript We take a look at the pros and cons of using both and ask the experts what they think

Need a new framework or library? Then

some essential tips and advice on how to

Keep design moving, because it’s part of the iteration process. Don’t try to solve absolutely everything

integrate into an agile team

Sari Griffiths

this is where you should start

11

Comment: Sari Griffiths Chief design officer at Red Badger offers

80 Create a podcast app Use the Media Session API to provide rich information

and feedback for audio sources

86  Build a chatbot with Node.js Create a simple personal assistant with data from Google Calendar

meta__________________________________________________________________________ 7


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

Header

The tools, trends and news to inspire your web projects

What’s new with web development? Web Designer takes a closer look at the latest Stack Overflow developer survey

T

o get a closer look at the industry, surveys and reports provide invaluable information. And, the more participants involved, the more accurate and representative any results will be. Stack Overflow, the well-known and well-established question and answer site for professional and enthusiast programmers, has just released its annual developer survey for 2017. This is no flimsy hair product survey where 250 people take part; the Stack Overflow developer survey encompasses over 64,000 developers who reveal how they learn, which tools they’re using, and what they want. The purpose of the survey is to share the results to improve developers’ lives. As they say themselves, “We want to empower developers by providing them with rich information about themselves, their industry and their peers. And we want to use this information to educate employers about who developers are and what they need.” So what does the survey reveal? A few key bullet points from the survey summary includes the following:

Among professional developers, 11.3% got their first coding jobs within a year of first learning how to program. A further 36.9% learned to program between one and four years before beginning their careers as developers. The survey also revealed that only 13.1% of developers are actively looking for a job, but 75.2% of developers are interested in hearing about new job opportunities. When respondents were asked what they valued most when considering a new job, 53.3% said remote options were a top priority. A majority of developers, 63.9%, reported working remotely at least one day a month, and 11.1% say they’re full-time remote or almost all the time. As you can see, some interesting points are revealed in just this small snippet of information. But, the report has far more detail to reveal. The survey is split into five main sections: Developer Profile, Technology, Work, Community and Methodology. Inside each section there are a host of subsections, typically with a graph for quick and easy information absorption. A closer look at the Developer Profile section reveals that over 72% of respondents identified themselves as web

Node.js and Angular are the popular choice when it comes to libraries and frameworks

8________________________________________________________________________header

developers, while the next two spots were taken by desktop applications developers with nearly 29% and mobile developers with 23%. We know this doesn’t add up to 100%; this is because respondents saw themselves as fulfilling more than just one role. But, getting back into a little more granular detail, the developer types are split into three with full-stack developer being the big winner at just over 63%. Back-end developer was next with just over 24% and front-end web developer with nearly 12%. This does add up to 100%. A more precise indicator of what is happening in the world of web development lies in the Years Coding Professionally section. The majority of developers sit in the five years or less with over 50% showing how popular the profession has become in recent years. But, it not just a young person’s game with 7.5% of respondents having over 20 years of experience. What were they using to program/develop back in the Nineties? COBOL, dBase, Delphi or maybe the very first incarnation of JavaScript. And, as you might expect, according to the survey over 88% of developers were male. So what are the technologies that are keeping web developers on their toes? For the fifth year in a row it was JavaScript. Congratulations JS. On the frameworks and libraries front it was Node.js and AngularJS that claimed over 90% between them. Interestingly, JavaScript wasn’t the most loved, only coming in 11th behind Rust, Swift, Python and TypeScript among others, while React was out on top when it came to libraries and frameworks. The survey covers far too much than we can reveal in this article. Head over to bit. ly/2oXOC9t to get a closer inspection of what’s happening in web development.

Get Web Designer digital editions Get your hands on a collection of the best contemporary techniques If you need an instant hit of Web Designer, then 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 03’. 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. Shantell Martin

04.

shantellmartin.art Black and white brought to life with some smart rollover effects.

02. Riverdale Comic Creator riverdalecomiccreator.tumblr.com Interactive comic book graphics engage the viewer in the story.

03. Visit Britain expedia.com/greatbritain Clever multiple in-sync video snapshots tell a tale from different destinations.

04. 15 Years of SB Dunk swoo.sh/2o9R53A Love Nike trainers? Then celebrate with this online homage with smart transitions.

Graphics

Colour picker

Typesetter

WordPress

bit.ly/2ofXNSn

bit.ly/2nur0ZJ

bit.ly/2oxiCs3

bit.ly/2oxC1sA

A dry marker handwritten font with textured

A multi-talented and multi-purpose theme

lines that comes in three different styles:

with a strong focus on big, bold typography

Regular, Slanted and Upright.

and fullscreen backgrounds.

Charles Williams

Dream Machine

Charles Williams is a very talented illustrator and produces gorgeous typography. Take a look and be inspired.

#fa6233

Born Ready

Honshi

#712201

#392e3f

#1f213a

#16385b

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

Swiper

idangero.us/swiper Swiper is a free and contemporary mobile touch slider with hardwareaccelerated transitions and native behaviour. Its intended purpose is for mobile sites, web apps and mobile native/hybrid apps. It is part of Framework7, the HTML framework for building iOS & Android apps, and is the default slider component in Ionic.

gulp-beer

Eagle.js

EasyAzon

github.com/lordgiotto/gulp-beer

github.com/zulko/eagle.js

easyazon.com

gulp-beer is a simple error handler function that derives its name from its tagline ‘better error reporting’. Includes an interactive system notification.

This is a web-based slideshow framework for Vue.js. It offers supports for animations, themes, interactive widgets and reusable components.

EasyAzon is an Amazon Affiliate WordPress plugin that helps the user make more commission. Plus, it helps save time creating affiliate links.

Top 5 Web conferences – May 2017

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

UX London

UpFront

2017.uxlondon.com A collection of engaging industry leaders presenting a combination of inspirational talks and hands-on workshops.

2017.upfrontconf.com ‘A front-end conference for anyone who makes for the web’. Get inspired by a number of well-known speakers.

10h���������������������������������������������������������������������header

HOW Design Live howdesignlive.com A large gathering of creative professionals, with speakers, previews and workshops.

An Event Apart

Respond

bit.ly/2nYDyIH Three days of intense focus on digital design and UX. Speakers include Chris Coyier, Jen Simmons and Val Head.

webdirections.org/respond16 Respond addresses challenges designers and developers face in delivering modern, responsive web experiences.


Header Opinion

An agile survival guide for designers Tips and advice to help you navigate your way as part of an agile team

M

Sari Griffiths

ore and more designers are thrown into cross-functional agile teams these days. What would be your worst nightmare working in an agile team as a designer? Not being given enough time to craft your design? Losing the big picture? Being asked to “just colour it in”? My first tip is specifically for designers who are struggling with no up-front design time or no brand – something that is common in the agile world. Simply put, my tip is to ask for a Design Sprint. A Design Sprint is essentially five days of rapid prototyping framework, made popular by Google Ventures. If you’re interested, I recommend reading Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days by Jake Knapp. In fact, we rebranded ourselves using this framework too. Assuming you have your product vision set out already, you should be able to get to your starting point – such as grid, typography and through-line idea – by the end of five days, with some assumptions validated by user testing, ready to take on more granular designs. Following on from that, my second tip is to design parts in situ. It’s a common misunderstanding that you don’t need to look at the big picture if you’re practising Atomic Design or Lean UX. But you do need to know the big picture, and most importantly, its context. What you don’t need to do is to replicate an entire page for each story in high fidelity – you just need them for your frame of reference. Be mindful what you share with engineers though, as they could get confused if something outside of your focused area is different from what they already see. So, we often put some sort of mask on top to show that these are for illustration purposes only. Alternatively, we remove the context from visuals that we share with the team, if appropriate. Keeping all design in context also enables you to keep refining your overall look, as well as your design system. Tip number three is to keep design moving, because it’s part of the iteration process. Don’t try to solve absolutely everything, as you perhaps used to do in

red-badger.com

Chief design officer

You may not have a chance to iterate on them at all if the problem it’s causing is of low priority, so you should make sure you are happy with the quality of everything you produce. After all, if you can get it right the first time, it’s the most efficient way of delivering value. Tip five is to always remember your deliverable is the product, and not design artefacts. Don’t get me wrong, you will still produce some wireframes and high-fidelity designs, but the most important thing to remember is that you and your team’s aim is to have a beautifully functional product in the hands of its users. You shouldn’t be producing artefacts all the time – at Red Badger, we spend less than 50 per cent of our time on producing design artefacts. Most of the time we are validating stories, managing stakeholders, facilitating sketching sessions with the team, guerilla testing and pairing with engineers and testers to ensure design issues are solved appropriately and that designs are implemented as planned. My sixth and final tip is to keep in mind that you are making a ‘minimum desirable product’. Some product managers get project management mixed up with product management; trying to deliver all product features on time and on budget, rather than delivering a successful product. This mix-up often causes them to approach with the sentiment that “we just need functionality done for the minimum viable product (MVP)”, in order to tick boxes without putting enough thought into the user experience. But the reality is that if users don’t understand what is going on, they are not going to hang around to use the product. For the MVP to be successful, it has to have a minimum level of user experience to communicate the value of the product and make it ‘desirable’ enough to stick around. I like to swap the ‘viable’ with ‘desirable’ to remind product owners that we need to think about our users. As designers, we represent users and their relationship with the brand. Keep reminding your team that it’s got to be desirable for it to be functional.

For the MVP to be successful, it has to have a minimum level of user experience to communicate the value of the product

more linear ways of working. Usually agile teams operate with Lean Startup principles – build, measure and learn – meaning they will iterate, and design should be and will be a part of the iteration process. It will inevitably come back if it’s not successful at what it’s meant to do. Pick your battles and select situations that are high value, and, if in doubt, test it rather than simply theorising it. My fourth tip follows on from the above: continue to try and get it right the first time. Iteration only happens if it’s not functioning as it’s supposed to, and if it’s prioritised over other iterations. Iteration doesn’t mean that you can change your mind about your design at any time.

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

Better web typography betterwebtype.com Web designers should have good typography skills. If you don’t, this free email course will teach you the tricks of the trade. Lessons include Anatomy of a Typeface, Combining Typefaces, Modular Scales & Meaningful Typography and Dashes & Smart Quotes.

Atomic Free

CSS Gradient Animator

HTML Minifier

atomic.io/free Atomic has a host of design and prototyping tools that they have now made free. Sign up and start learning how to create great prototypes.

gradient-animator.com Build beautiful gradients for the web. CSS Gradient Animator provides an intuitive UI to create gradients and supplies ready-to-use code.

kangax.github.io/html-minifier Smaller code bases mean faster-loading sites. HTML Minifier uses a simple tick-box approach: select your options, hit Minify and get your optimised code.

Top 5 WordPress themes – May 2017

Add contemporary style and functionality with this collection

Xanadu

Lira

All4Home

Strings

rustic state

bit.ly/2p8vDZ7 An eCommerce theme with a strong focus on furniture. Offers contemporary styles to display products at their best.

wphash.com/wp/lira A simple, stylish and visually led blog theme. Perfect for photographers and designers to show off their wares.

bit.ly/2ofXhWP This collection of stylish themes concentrates on presenting home-based delights in an engaging manner.

bit.ly/2nRyghG One for musicians and bands. A big fullscreen hero image, ideal for big egos, is accompanied by videos, audio and podcasts.

bit.ly/2oHEYuI The name of this theme perfectly emulates its style; rustic fonts are matched with muted pastel palettes.

12h����������������������������������������������������������������������header


Web Designer 261 (Sampler)  

You can subscribe to this magazine @ www.myfavouritemagazines.co.uk

Web Designer 261 (Sampler)  

You can subscribe to this magazine @ www.myfavouritemagazines.co.uk