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
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
Crafting next-generation digital masterpieces. Web Designer couldn’t resist talking to Resn Page 34
WebVR, WebAR, Chatbots. Are you using them?
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
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
– The hand-written style font Caprica
www.filesilo.co.uk/webdesigner meta__________________________________________________________________________ 3
This issue’s panel of experts
Editor Steve Jenkins
email@example.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
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 firstname.lastname@example.org Account Director George Lucas email@example.com Advertising Sales Executive Chris Mitchell firstname.lastname@example.org
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
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 email@example.com
Subscriptions For all subscription enquiries: firstname.lastname@example.org 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 email@example.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
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 firstname.lastname@example.org with examples of your creative work.
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
<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…
08 Web developers: how and what are you learning ?
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
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
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?
Crafting next-generation digital experiences today
Spotify brings the tunes of winter and summer
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
Web gurus take you step-by-step through professional techniques
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
Learn to code like a pro. Get top tips on producing first-class HTML
Turn to page 32 now USA readers turn to page 85 for an exclusive offer
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
Overflow developer survey
10 Webkit: The best must-try resources out there
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
this is where you should start
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
News CONTACT US AT: email@example.com | @WebDesignerMag
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
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
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.
Sites of the month
01. Shantell Martin
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.
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 is a very talented illustrator and produces gorgeous typography. Take a look and be inspired.
Resources CONTACT US AT: firstname.lastname@example.org | @WebDesignerMag
Discover the must-try resources that will make your site a better place
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 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
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.
HOW Design Live howdesignlive.com A large gathering of creative professionals, with speakers, previews and workshops.
An Event Apart
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.
An agile survival guide for designers Tips and advice to help you navigate your way as part of an agile team
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
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.
Resources CONTACT US AT: email@example.com | @WebDesignerMag
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.
CSS Gradient Animator
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
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.
You can subscribe to this magazine @ www.myfavouritemagazines.co.uk