Sommaire pour October 2017 de net

CSS Grid Layout is the biggest change to the way we design and develop websites in recent memory. Since it was officially launched into browsers in March this year, it’s finally become possible to define layout independently from content. CSS Grid has revolutionised web design in the space of a few months. It’s a powerful and elegant design solution, and we’ve no doubt you’ve been busy experimenting with it. But are you making the most of it? With that soundbite in mind, we tasked Rachel Andrew of Grid by Example (gridbyexample.com) fame to dig deep into the murky waters of the CSS Grid Layout specification to explain some features that you might have missed, and rather excitingly, preview some features that might be coming your way soon. Our second feature…

What are the tools and techniques required to get on board with progressive web apps today? Miguel Corrales, Mexico Run your site on HTTP. You need this for Service Worker and other modern APIs to work. If you need help, check out letsencrypt.org. Add a manifest. This JSON file provides details about your site, like its name and an icon for it if someone installs it. Go to developer.mozilla.org/en-US/docs/Web/Manifest for more details. Add a service worker. This will enable you to do things like cache assets offline and respond to page requests when the network connection has been lost. If you aren’t sure where to begin with the above steps then you can always visit PWABuilder.com and it will help you with the process.…

INFO job: Designer and illustrator, Sensible World w: sensibleworld.com symbolicons.com t: @sensibleworld @symbolicons Tell us a little bit about Symbolicons Pro. Symbolicons Pro is a new icon family I’m creating! The goal is to make over 2,000 icons neatly organised into categories for easy searching and discovery. The icons themselves are built on a 24px grid and balance versatility with friendliness. What’s the inspiration behind this idea? I love designing icons, and have been doing so for a decade now. But I haven’t released a new set in years, and realised that some of my past endeavours were growing a bit long in the tooth. My first icons were designed before iPhone apps were commonplace! Who is Symbolicons Pro aimed at, and how will it help them? The primary audience is…

Seven years ago a friend and I watched Whip It, a film about a young woman who decides she wants to quit taking part in beauty pageants and join a roller derby team instead. Roller derby was like nothing I had ever seen. It’s a full-contact sport played by two teams on roller skates. Each team has five skaters on the track: a jammer and four blockers. The blockers from both teams together make up the ‘pack’. The blockers work as a team to stop the opposing jammer getting past them while assisting their own jammer to get through the pack. The jammers score points for each blocker on the other team that they pass. Watching the actors fly around a track on their roller skates, throwing big hits at…

As a strategic agency, we work with clients to support their marketing in various ways; from brand planning and concept ideation, to advertising and activation, right through to understanding performance. However, we’ve noticed that a regular stumbling block occurs whenever it’s time to take the leap from strategy into effective campaigns. The brand has been deconstructed and rebuilt with the most critical audience personas in mind, resulting in a beautifully effective brand line that elegantly summarises the value proposition. And the newly designed website is live and waiting patiently half way down Google search results, just begging to be found. Now what? ‘Activation paralysis’ – no one knows how to activate the brand. BRAND IS CENTRAL The best way to overcome activation paralysis is to start thinking in commercial terms.…

INFO Job: Writer, designer and educator t: @fehler w: tinybooks.org In the tenth article in my ongoing series exploring the design of business, I’ll explore the role that content marketing can play to help promote your brand. By sharing content that others find value in, you can, at a low cost, build brand awareness and – as a welcome by-product – help others, too. One of the wonders of the web is its low barrier to entry. In today’s connected world it’s possible to share your thinking with a global audience who are just a click away. The web offers a wealth of content, but that doesn’t mean that there isn’t room for another voice: yours. With your product behind you, you have an opportunity to build brand awareness through sharing…

thenerodesign.com INFO Location: London, UK Established: 2011 Expertise: Web design, interaction design, front-end dev, app design, art direction Clients: Apple, Canon, Samsung, TIM, Coca-Cola Awards: FWA, Awwwards, CSS Design Awards Born and raised in Italy, designer Marco Grimaldi (thenerodesign.com) has been based in London since 2014, where he works as a senior designer at mobile app design and development studio Fueled (fueled.com). A lover of design, branding and typography, he also finds time to judge the latest cuttingedge sites for the FWA. We chatted with Marco to find out more about his work and some of his recent projects; here’s what he had to say. Hi Marco! What’s your background? I’m an Italian designer based in London since 2014. Before moving to the UK I studied computer science at Federico…

Google Analytics analytics.google.com User Explorer goes beyond the high-level data and focuses on a single user at a time to track their behaviour, time on pages, dates of visits and more. Hotjar hotjar.com Set up heatmaps, monitor conversion funnels, record the screen of anonymous users and set up polls or surveys on key pages of your website. This is an incredibly powerful tool for collecting qualitative and quantitative data for any project. Survey Monkey surveymonkey.com Collect direct feedback from stakeholders or clients. See live charted results to inform decisions quickly. You may also create individualised links for each survey to analyse trends based on those segments in addition to the whole.…

Check out the latest browser support for clip-path, including details of known issues. Firefox just shipped full support for clip-path in v54 and it works nicely in Chrome. Safari needs the -webkit- prefix but it works. (http://caniuse.com/#feat=css-clip-path) Profiling painting An excellent introduction to profiling painting in the browser using Chrome DevTools. You can see the Composite Layers at work. (http://netm.ag/298-devtools) Clippy A great tool for creating and modifying CSS clip-path shapes. Really useful for understanding the coordinate pairs. (http://bennettfeely.com/clippy) My portfolio I used a more complicated implementation of this technique with clickable areas and z-index layering. I also implemented a fallback using transforms for browsers that don’t yet support clip-path. (https://danielcrisp.com) Web Animations JS JavaScript implementation of the Web Animations API. It doesn’t yet support clip-path sadly, but once it…

ABOUT THE AUTHOR KRISZ TIAN PUSKA w: https://pyx.space t: @pyx job: Developer and designer areas of expertise: Frontend architecture, product and interaction design Whether you are iterating on a prototype for a client, updating your design portfolio, or building a large-scale web product in React, you are facing the same fundamental problems. You want to increase your velocity and write less code, while keeping visual and interactional consistency. The most valuable promise of immutability in atomic design is that it eliminates unwanted side effects. With single-state, easy-to-understand helper classes, you’re forced to think functionally. An Atomic CSS library instantly grants you a system that can be scaled, extended and built on. The best part is that you most likely already know this system, as you’ve worked with CSS before. Over the…

RACHEL ANDREW We could think of no one better than Rachel to delve deep into the inner workings of CSS Grid. She is the preeminent voice on the subject, so make sure you head to page 60 now. w: rachelandrew.co.uk t@rachelandrew JOSHUA GARITY Joshua has worked with agencies and Fortune 500s to refine user experience strategies for nearly 20 years. He starts your unmissable UX theory journey over on page 68. w: www.joshuagarity.com t: @iamlucid AMY PARKER Head over to page 40 to see Amy Parker from Fore Design share her favourite new sites in this month’s Gallery. Expect inspiration on every page. w: foredesign.co t: @amyhparker JOHNNY SLACK 3D design is the place to be right now for creativity and innovation in web development. Let Cartelle’s Johnny show you how to create…

Lacking a killer app in terms of tooling for composing complex scenes/sequences imo. @Planet_Scream It’s a shame you can’t interact with them from CSS (and JS?) when including them using the img tag or from CSS background url. @_LeonBrown Internet Explorer. @frontendben The inability to change the colour using CSS. @stephenhlane Browser bugs. So it’s not really SVG that’s annoying but its inconsistent implementations. @SaraSoueidan <header><svg><path> </path></svg></ header>. @danmarcial No consistent browser support for clip-path, allowing HTML elements to interact with SVG. @pauloafernandes <svg/> element not behaving like <img/> in term of responsiveness. @LeBenLeBen I know some super talented designers who are not experienced in climbing up and down an XML tree – which comes to have some disadvantages. @DigitalNomas…

SARAH COULTON Senior designer at Relish sarahcoulton.com THE DRIBBBLE APP Dribbble.com is a well-known source for inspiration and design feedback. Dribbble released an app in June and since then, I’ve been browsing other people’s work while on my commute. Looking at inspiring work helps my brain unwind after a long day and keeps me up to date. SCENIC SIMPSONS I started following @scenic_simpsons on Instagram a few months ago. The account showcases scenes and abstract compositions from The Simpsons. It’s an inspiring way of looking at the world, focusing on details you don’t normally notice, with interesting compositions. ART PICS CHANNEL I browse Twitter on my commute which can sometimes be dejecting. I discovered @ArtPicsChannel who tweet art they like, and now amongst the chaos of my feed, I get Van…

When something bad happens, the kneejerk reaction of ‘blame the internet’ is one that is overused and under-effective. In the wake of several devastating terror attacks on British shores, the government has once again wheeled out its favourite scapegoat, calling for yet more red tape and regulation online to stop the bad guys doing wrong. While the desire to find a villain in a terrible situation is understandable, providing such a simplistic answer to one of the world’s most complex questions is shortsighted at best and dangerous at worst. Moreover, it shows just how out of touch our politicians are when it comes to the wide-ranging issues of the web. Internet regulation has been on Prime Minister Theresa May’s to-do list since she first became home secretary in 2010. While…

INFO Job: UX designer, sketchnoter and visual improviser w: sketchnotesbook.com t: @evalottchen net: You’re a talented artist as well as a graphic and web designer. How did you develop all of these different skills? EL: Many things in my career happened organically. I have always been driven by curiosity and I like to try new things first and then see if I want to continue doing them. I find it hard to tell if I’ll like something without having tried it for at least for a little while. net: What was it like working as senior interaction designer for Android? How did that compare to working at Skype and Yahoo? EL: The best thing about working at Google were the people. I was surrounded by super talented designers in my team…

AMY PARKER Amy runs Fore Design, a brand-driven visual communications studio in Boston, Massachusetts. w: foredesign.co t: @amyhparker SITE OF THE MONTH TACHYONS, ANIMATE.CSS, JAVASCRIPT INTERFACE LOVERS interfacelovers.com Designing an interface for selfidentified “interface lovers” is no small task but as a designer for Facebook, Timothy Achumba brings elements from his first love, print design, into his work. “The design for Interface Lovers, based on a simple three-column grid taken from a newspaper layout, is uncomplicated and clean,” he says, with the focus “solely on the content”. Timothy teamed up with William Channer and Iheanyi Ekechukwu to create a place to inspire people, provide practical advice for cultivating their craft and celebrate each designer’s unique experience, origin story, routine and learnings. Though it was their first time working together, Timothy says things…

What’s on your desktop today? An iMac, my phone, a mug full of pencils and my personal mouse (nerd). Little things that make your life worthwhile Websites: Designer News, siteInspire, Typewolf; Apps: Twitter, WhatsApp, Citymapper; Audio [music, radio and podcasts]: Daft Punk, Pitchfork playlists, Spotify recommended; Reading: The Form of the Book – Jan Tschichold, Design as Art – Bruno Munari, Creativity, Inc. – Ed Catmull. What do you have on the walls? Five prints: two by the Spanish agency HEY studio, one from the Tate Museum, one by SNASK, and one ‘take me home’ street-art print that I found on the street. What will you do for lunch? Eat something light but not in front of the screen. Lunch is sacred. What hours do you work? I work from…

AUTHOR JOSHUA GARITY Joshua has worked with agencies and Fortune 500s to refine UX strategies for nearly 20 years. He founded Candorem to lead UX execution through partnerships within established organisations. candorem.com @iamlucid ILLUSTRATOR MARCUS FAINT Marcus (@MJFainty) is a graphic designer running MJ Faint Design Co. in Bath. He also works as an art editor on a national film and television publication. instagram.com/mjfainty User experience is not magic. You don’t run a simple test that Becky the marketing intern read a blog about once and uncover quick-fix solutions to generate huge growth. UX strategy is a science: a science that has been around since long before the first computer blipped into existence and long before UX became a buzzword in the Nineties. All scientific theories begin as a hypothesis.…

ABOUT THE AUTHOR JOHNNY SLACK w: www.cartelle.nl www.johnnyslack.co t: @cartelle @johnnycartelle job: Partner and developer at Cartelle areas of expertise: WebGL, JavaScript, WebVR Fornasetti, an incredible Italian decor company, approached our studio with a dream brief. The team wanted their homepage to be an infinite 3D tunnel that incorporates the imagery that is used in their latest collection. Our first instinct was to combine WebGL and Three.js to create an effect users haven’t quite experienced yet. We wanted to take visitors down an endless wormhole of beautiful textures and graphical treatments. DECIDING ON WEBGL We consider Cartelle to be an interactive arts studio; not another agency or web development company. This lends itself to a certain amount of responsibility when approaching projects. It’s very important that we are truly one of…

ABOUT THE AUTHOR DANIEL CRISP w: https://danielcrisp.com job: Senior front-end developer – contract/ freelance areas of expertise: JavaScript (Angular), HTML and CSS As front-end developers, we tend to think in rectangles. Rectangles inside rectangles inside rectangles inside rectangles. We might employ tricks with borders to make circles or triangles, but really they’re still just rectangular boxes in disguise. Well this is about to change with CSS Shapes, a W3C Candidate Recommendation, which will change the way you think. CSS Shapes allow you to create geometric shapes using shape functions: circle(), ellipsis(), inset() and polygon(), and apply them to elements or effects such as clipping and filters. What’s more, the shapes can affect the flow of the content, allowing you to wrap text neatly around features like circular avatars. Perhaps the most…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... AARON GUSTAFSON Based in Tennessee, Aaron is a web standards and accessibility advocate working at Microsoft. He’s also the author of the seminal book on progressive enhancement, Adaptive Web Design. w: aaron-gustafson.com t: @aarongustafson JAMIE MURPHY Based in Budapest, Hungary, Jamie is cofounder and technical lead at BudAffect, a digital agency specialising in optimising website conversion rates. w: budaffect.com t: @jjmu15 QUESTION OF THE MONTH What’s the biggest UX challenge facing PWAs? Christopher J Hodges, London Future features Chris Mills introduces the world of progressive web apps at netm.ag/298-futureofwebapps AG: To be honest, I think it’s us. There is a lot of technical info out there on how to build a progressive web app (PWA), service worker recipes and so on, but there has not been…

BROWSER STATISTICS You want to use a new feature, but then you look at some browser stats and find it’s not supported by a browser with a sizeable global share, so you can’t use it, right? “Nope!” says Chris Coyier. The only stats that matter are the ones for your site, and they’re often wildly different. Run Google Analytics and then make your decision. netm.ag/298-statistics ACCESSIBILITY INSIGHTS This is a fascinating collection of insights gleaned from the responses to a tweet by Safia Abdalla: “If you have a disability, what’s the hardest thing about browsing the web?” It’s interesting to read about the things that make a difference to actual people as opposed to looking at a dry standards document. netm.ag/298-insights TIMELESS WEB DESIGN If you had to design a…

FOCUS ON THE CODING @jacobwarduk takes the view that the primary role of managers is to shield developers from the rest of the business. “Reduce the process overhead and let them spend the bulk of their time coding solutions,” says @CerebraldormanC. CLARITY “Make sure briefs are clear and understood, always include contingency time for unforeseen issues, have regular reviews without micromanaging,” says @JudePurpleRiot. @rilwis also emphasised the importance of tasks being clear and also assigned to the right people. MEETINGS “Limit meetings to those that are necessary,” says @pfwd. @lynchy010 recommends limiting the number of reviewers per code review, and also: “Come up with an agreed-upon code style guide, then ban discussion of it during meetings and code reviews.” COWBOYS “Reign in the cowboy developer,” says @aaronpastle. “Too often good…

INFO job: Freelance web designer/ developer w: https://zellwk.com t: @zellwk Are you overwhelmed and confused by coding? Don’t worry; you’re in a safe space. Zell Liew has been through the same thing, and he’s here to help, with his popular series of in-depth courses, including Learning Susy, Automating Your Workflow With Gulp, and Mastering Responsive Typography. Of course, you don’t need to take our word for it. Just check out the articles on his blog, which cover nuts-and-bolts practical topics, like how to use the ‘this’ keyword in JavaScript, how to write modular CSS, and how to pair typefaces. His articles, which have also been published by the likes of SitePoint, Smashing Magazine and this very publication, also look at broader issues, such as how to read fast and remember more, how…

JONATHAN HILL CEO, 1minus1 1minus1.com As you learn to code, remember that no matter how good your code gets, no matter how elegant you make it, no matter how well you set it up for the future, that once you are working for a client, you have a business to deliver for. If you get sucked into the detail and forget about that bigger picture, you cannot write the best code for the client. So, be business focused as well as code focused. And finally, do your best to work with more experienced people that can strike this balance. LINDSEY MARAT TA Product designer, BuzzFeed buzzfeed.com There are a ton of online resources for learning to code. But while they’re helpful for getting familiar with vocabulary, syntax and other basics,…

ARTIST SHOWCASE PROFILES CÁTIA NEVES Cátia is a graphic designer with a penchant for information design working at Pixeldot. w: www.brandbypixel.com t: @pixeldotco NICOLA CONNOLLY Nicola is a freelance multidisciplinary creative designer and front-end developer. w: www.connollycreative.co.uk t: @ConnoCreative DARINK A KOSTELNIK Darinka is a design-thinking and minimalism enthusiast, and a freelance web designer. w: darinka.design t: @darishead BRIEF This month we’d like you to design a website to showcase the work of a visual artist. We want the site to convey a sense of the artist’s style and personality, but the design techniques used to do this shouldn’t compete with the artwork itself.…

For more than 50 years, Sullair has been on the leading edge of compressed air solutions. Candorem recently had the opportunity to guide their UX strategy on a global redesign. When did you know Sullair needed to invest in UX? Attending an end-user trade show in Las Vegas – and listening to the questions/comments regarding our products – cemented the fact that not all purchasers are expert users. Because our business goes through independent distribution, much of our work was focused on the distributor. An audience which has significant familiarity with our products, industry terms and inside knowledge. For those not deeply familiar with our products, our website was challenging to navigate and explore. What did UX analysis uncover for your organisation? User testing our site versus competitor’s sites provided tangible…

Below is the most basic setup of a 3D scene based off the Three.js documentation. This provides a brief introduction into setting up your renderer, adding a camera and spinning a cube in your scene. The following instantiates your scene and camera. The camera arguments allow a field of view to be passed, along with an aspect ratio and a near/far position. The near and far plane define the range at which your scene will be rendered. The renderer displays the final result in WebGL. The following code will create a cube. An object on-screen is a mesh, and it requires a piece of geometry and a material. Here we set the camera to a position on the z-axis so we can view the cube. Your WebGL renderer will always…

ABOUT THE AUTHOR DANIEL SCHWARZ w: mrdaniels.ch t: @mrdanielschwarz job: Co-editor at SitePoint areas of expertise: Interface design, UX, Sketch Version control was originally aimed at developers working with code, as a way for multiple developers to work on the same codebase at the same time with the ability to roll back to earlier versions if needed. It means that multiple versions of the codebase (earlier and current) aren’t scattered around the computer systems of various developers with no accountability and no clarity as to who is working on what. Version control is designed to alleviate the confusion that sometimes occurs when multiple developers are working on the same thing locally. Even non-developers can benefit from version control, because it’s fairly easy for developers to say what’s changed in the latest…

Atomic Design by Brad Frost http://atomicdesign.bradfrost.com The Atomic Design book from Brad Frost is a must-read. Functional Programming, CSS, and your sanity http://www.jon.gold/2015/07/functional-css An article about the beauties of functional programming by Jon Gold. Basscss https://github.com/basscss/basscss Popular low-level CSS toolkit by Brent Jackson. Tachyons https://github.com/tachyons-css/tachyons Functional CSS for humans by Adam Morse. Cooking with Design Systems http://danmall.me/articles/cooking-with-design-systems Thoughts about a design system by Dan Mall. Intro to CSS Grid http://labs.jensimmons.com Grid experiments by Jen Simmons. Grid by Example https://gridbyexample.com Everything you need to learn CSS Grid Layout by Rachel Andrew.…