Table of contents for January 2020 in net

What resources can help me wrap my head around project management? Name supplied BH: With project management, there truly is no right or wrong way to work. Sure, there are best practices but it’ll be up to you to adapt them to the project, team, scope and timeline you’re managing. The best way to learn those things is to sit down with your team and figure out what will work best for your projects. Conferences + When you have spare time, check out conferences like Deliver or the Digital PM Summit or hunt down your local DPM meetup. Online training + Trainings online include an apprenticeship through Louder Than Ten and a free video series at TeamGantt called The Art & Science of Leading Projects. Reading matter + Check out…

If I go on Mastermind, I know what my specialist subject will be: Christmas. For the last 19 years I’ve run what’s now the biggest Christmas information site on the web: whychristmas.com. It all started in 2000 when some primary school teachers came to me asking why they couldn’t find a Christmas site that was child friendly and “wasn’t trying to sell the kids something”. So, for a fun project, I created a little Christmas site for a single school. I could have never imagined it would grow like it has. Running the site takes up much of my Novembers and Decembers, as does answering questions from visitors and also taking part in media interviews on radio stations around the world talking about all things Christmas. I love it! When…

What does ‘being human’ mean, in an era where technology is rapidly becoming more humanised? Do brands have an ethical duty to help people be more human in every moment of their day? Can technology enable brands to communicate in a humanised way? WHAT DO WE MEAN BY BEING ‘HUMAN’? Psychologists believe that ‘self-determination’ is the ability within each person to make individual choices and, consequently, determine their own life. Not only does this ability have the power to make people believe that they have control over their choices but it also has an impact on their motivation, spurring them to take action when they’re sure it will have an effect or outcome. This ‘Self-Determination Theory’ was born out of the 1985 book Self-determination and Intrinsic Motivation in Human Behaviour…

#326 DEC 2019 Discover graphic JS libraries and create polished data viz and animations, learn the best Google tools and add top WebGL physics SUBSCRIBE TO NET & RECEIVE 3 DIGITAL BOOKAZINES SEE PAGE 18 #325 NOV 2019 Unify your UX across multiple platforms, discover whether PWAs or native apps are best and add physics to three.js sites #324 OCT 2019 Become a hybrid by learning both design and development skills, grow your sideline and land your dream job #323 SEP 2019 Bring 3D to your sites using three.js, offer screen sharing with WebRTC and JavaScript and make empathy part of your UX design #322 SUMMER 2019 Get expert advice on increasing your income, spend more time on profitable tasks and build custom Gutenberg themes #321 AUG 2019 Discover the…

weareframework.co.uk Is size important? Nottingham-based digital and branding studio Framework would argue so but not in the way you might expect. It believes that being small actually makes it easier to create great work for clients. We caught up with the team to discuss how they came into being, what constitutes an “honest perfectionist” and how to create crystal-clear UX for clients. Read on, as managing director Stephan Hayward, head of development Paul Quinn, technical director Richard McLeod, account manager Helena Soares, senior designer Sam Hall, creative director Luke Bamford, senior developer Raphael Boakye, front-end developers James Rowe and Joe Dunstall and junior designer Liberty Twidale reveal all. What’s the story behind Framework? SH: Framework Design was started in January 2015 by a former business owner, shortly after which I…

SCOTT O’HARA “The best way to ensure a website or application is accessible is to verify it by testing with real people. WCAG conformance, meeting the specifications of HTML and ARIA, getting good scores in validators and automated checkers, those are all good initial steps. But a technically accessible user interface can still produce a poor user experience. Test with real people to verify the accessibility of your projects.” NICOLAS GARNIER “Tests nowadays are made possible thanks to the browsers, which provide tools to check that good accessibility rules are respected. Using the Chrome Dev Tools, we can check, for example, if a colour has enough contrast against its background. Using a good code editor and a linter, we can check that HTML tags are not missing ARIA or alt…

TDD, or test-driven development, is a testing discipline that forces you to think about edge cases when you’re in the process of development. You start out with a hypothesis that forms the basis for your tests. This could be something like ‘it renders a button’ or ‘it renders a button using the dark mode UI on click’, then you go ahead and write your tests. Only after you have at least three robust tests that you can use to verify what your component’s behaviour will be, should you start coding the actual component. I like this concept because it forces you to think about the structure of your component from completely different angles. You’re not trying to preserve the code you already wrote, so you can find different ideas more…

MARK BILLEN Former editor of both Web Designer and Web Developer magazines, Billen is currently a freelance web and print writer. He uses both of the strings he has to his bow on page 60, writing on the changing a11y landscape. t: @Mark_Billen ADAM KUHN Kuhn is a senior web developer at Kong Inc, creative coder and frequent CodePen contributor with a passion for web animation. Showing off his skills on page 68, he reveals how you can code JS-free CSS animations. t: @cobra_winfrey RACHAEL GROCOTT Grocott is a product designer at Geckoboard and co-founded Triangirls with Anna Youngs. She explores how women can navigate and advance in their tech careers – and how others can empower them – on page 20. t: @rachaelgrocott BEN READ Read is a designer…

NETFLIX IS TESTING A FEATURE THAT LETS YOU SPEED UP BORING EPISODES Ever feel as though your binge-watch sessions are becoming a bit of a grind? A proposed update to the Netflix Android app will enable you to whizz through any tedious episodes by watching them at 1.5 speed. https://netm.ag/2CEdsmM GREAT EXPECTATIONS: USING STORY PRINCIPLES TO ANTICIPATE WHAT YOUR USER EXPECTS When users land on a site, they have certain expectations of how the experience is going to pan out. And with the help of storytelling, web designers can ensure they meet and even exceed these anticipations. This article explores what’s involved. https://netm.ag/2qNFqK9 HERE ARE THE WINNERS OF THE FIRST CONTEST TO DESIGN STOCK IMAGES OF HACKERS Hacking is quite an abstract and shadowy topic. That’s why you find news…

NICK SHERMAN Founder of HEX Projects, founder of V-fonts.com and co-founder of Fonts in Use w: nicksherman.com ROBOFONT RoboFont is my primary tool for making fonts. The app’s default functionality is streamlined but is built around the UFO font format for integration with user scripts and other UFO-based apps. It’s great for people who like to customise tools. robofont.com WAKAMAIFONDUE Wakamaifondue is a web-based tool that provides detailed reports on the functionality of any font you throw at it. I use it all the time to look under the hood of new variable fonts before I add them to v-fonts.com. wakamaifondue.com FLICKR Flickr is one of the most old-school platforms for sharing photos but it is still the best option if you care about image resolution, archiving, metadata or avoiding shady…

What’s on your desktop today? A funky blue(ish) gradient so I can pretend that I’m looking at the sky rather than staring at a digital screen. What do you have on the walls? Dinosaurs, beer magazines and abstract art (drawn caricatures of the group), with the occasional bit of plant foliage thrown in. What will you do for lunch? Eat a sad sandwich, while looking out the window at everyone else in the pub across the road. What hours do you work? It’s usually 9:00-5:30 but this can vary depending on what types of projects are currently being worked on. What else do you do in the office? Try to drown out the screams from the daily lunchtime FIFA matches. How often do you all hang out? We have a…

JANUARY 2019 Adult Swim briefs Active Theory and delivers drive of Rick and Morty art. The brief is building a hub in order to collect Rick and Morty content from all over the internet. FEBRUARY 2019 Inspired by time and dimension travel, Active Theory starts shaping the experience, developing UX and designing all the environments to be used on the website. MARCH 2019 Active Theory develops site structure and creates assets and layers for the website. The site requires hundreds of layers, so optimising the rendering is the biggest challenge. APRIL 2019 Once the core of the site is built, Active Theory is able to focus on the most exciting part – interactivity and the Easter eggs. MAY 2019 Active Theory and Adult Swim iterate on the site. Once it…

Can you think of any particular tags, markup, classes or code constructs that have been – and continue to prove – influential when it comes to accessible development? James Hall, creative director, HeX Productions “In response to that question, on a practical level, I’d say that every website is different but I would highly recommend reviewing ARIA. Below are some examples and reasons why: The aria-label definition will help screen readers read out a longer form of the ‘Read More’ link. If this was not used then a screen reader will only read “Read More” and this would be a non-descriptive link. Aside from that, the aria-live definition is one of my favourites and enables you to tell the user of any changes that may have happened: For example adding…

Quality assurance engineers are the secret superpower of web development. A good QA engineer and a strong QA process can save development time, reduce issues in production and have been known to save the reputation of entire development teams… and the companies they work for! QA engineers have a totally different mindset to developers: developers naturally build against assumptions about how something should work and can only test these assumptions. QAs, on the other hand, challenge these assumptions, using every trick they can think of to try to break the code in some way. This ensures that your customers aren’t acting as your QAs, causing you to lose money and good will in a very public manner. A dedicated QA engineer will write an automated tests suite that checks the…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING… DAVE BOWERS Bowers is head of strategy at Likely Story, an award-winning strategic creative agency that’s focused on digital, branding and storytelling. w: likely-story.co.uk t: @likelystorydave BRETT HARNED Harned is director of education at TeamGantt, founder of the event Digital PM Summit, author of Project Management for Humans and podcaster at Sprints & Milestones. w: brettharned.com t: @brettharned *QUESTION OF THE MONTH What are the biggest mistakes people make when doing user research? Avni Bonner, Carlisle, UK DB: Assumptions are the backbone of all erroneous findings – unfortunately they’re often unavoidable, as research can only show us part of the picture. When asked, users often won’t give accurate responses in the first place due to cognitive biases: they may twist their answers in order…

Providing the same functionality and information for everyone. Designing for keyboard-only user experience. Relying not only on colours and testing UI in grayscale. Choosing common UX patterns, which [are] familiar to users. @MaratFaz The first things should start before design. Discuss this as a team at the requirements stage. Things like which guidelines and level are we working to, what assistive technologies are we testing with, at what points are we testing with users with access needs to name just a few. @RooRonks We’d start by checking legal requirements. Next we’d try to understand any underlying issues that make this website hard to use by certain groups and work with the client to make sure web content is easily accessible. @signatureweb Feeling overwhelmed by the concept of accessibility? Use Chrome’s…

Chatbots have become an increasingly popular way for websites to communicate with visitors. With the help of natural language processing and keyword matching tools, chatbots are meant to aid the user experience and ease frustrations, although they don’t always succeed. To help make chatbots engaging instead of annoying, we asked @netmag’s followers what web designers should keep in mind when implementing them. WORK BACKWARDS Sometimes just identifying an issue can make it a lot easier to solve. It’s the same with making useful chatbots. “Think about the problem they’re trying to solve for the end user first and work back from there,” says @Foolproof_UX. KEEP IT REAL Chatbots might be powered by sophisticated software but that doesn’t mean they’re going to pass the Turing test any time soon. So rather…

Diversity and inclusion are big topics in tech at the moment. Men outnumber women in tech at a rate of four to one and women hold just five per cent of leadership positions. Yet it’s proven that diverse teams lead to better outcomes. We’re building products for a diverse audience, therefore it’s important that we have a diverse team inputting into the decisions we make along the way. I spent the majority of my career never seeing another woman professionally. Realising that this was the norm for others too, my co-founder Anna Youngs and I created a space for women to meet and support each other to navigate their careers in tech. While starting out as a small gathering, Triangirls is now over a year old and regularly sells out…

If he tried it today, Chris Ferdinandi isn't sure he would be able to make the jump into web development. He taught himself to code and transitioned from a career in HR when responsive design, HTML5 and CSS3 were the hot new things. As everyone wanted developers with JavaScript experience, Ferdinandi also started learning jQuery and plain JavaScript in order to land himself a job. These days, however, he’d be completely overwhelmed. He believes that the web has become a bloated, over-engineered mess and that many of our modern best practices are actually making the web worse. Now Ferdinandi has written an ebook, The Lean Web (leanweb.dev), to share some ideas on how to fix it and explore a new set of principles for a simpler and faster web. “If…

BAZ SEAL Co-founder, The Chemistry Works thechemistryworks.co.uk When I have hundreds of images to sift through and edit, music gets me into the rhythm of the task. My choices are dictated by the work – for instance, a fashion show edit demands a rockier approach, like Oasis, but for more corporate editing I’ll go for a Beatles playlist. If I’m writing a proposal I always choose an instrumental piece, FC Kahuna for example. If I hear lyrics when I’m trying to concentrate on words I tend to drift off and focus on the song rather than the job in hand! JULIE POT TER Designer, Greenwich Design greenwich-design.co.uk Our studio is noisy so music helps me to block out all the other distractions. As I’m often the first one in the office, I’ll…

If you’re interested in being featured, please tweet us @netmag or email us at netmag@futurenet.com *KARLA SILVAS LANDING PAGE w: https://www.behance.net/gallery/87909509/LandingPage-ShoppingCart-inspired-in-The-Sorry-Girls This is a personal project – I redesigned The Sorry Girls website, which belongs to a DIY YouTube channel with the same name. I divided the site into two parts: a landing page where I introduce them and a simple and minimalistic shopping cart. Kelsey and Becky’s styles are minimalistic and girly and to show that in the design, I used a light and a dark grey, combined with dark blue and what I call a pink matte. I used the pink matte to provide contrast to the pictures with cold lighting and the light grey to contrast the colourful and warm photos. For the typography, I used Helvetica Neue,…

Key dates for Framework JANUARY 2015 Framework Design is established. MAY 2015 Stephan Hayward joins as managing director. AUGUST 2015 Wins first Speedo project. NOVEMBER 2015 Wins complete overhaul of Speedo’s digital estate. JUNE 2016 Moves into first creative office space. APRIL 2017 Paul Quinn and Luke Bamford (technical director and creative director) join as shareholders for the birth of Framework 2.0. JUNE 2018 Works with Sytner to define sales online approach. JANUARY 2019 Stephan Hayward becomes judge for CSS Design Awards. JUNE 2019 Wins UNiDAYs as a client SEPTEMBER 2019 Honorable Mention Awwwards and Site of the Day from CSS Design Awards for Team Elite Kickboxing.…

Axe https://www.deque.com/axe/ Axe, by Deque Systems, is a family of tools that enables teams to test the accessibility of web, Android and iOS applications throughout the development cycle, with Chrome and Firefox extensions available. Pa11y https://pa11y.org/ Pa11y’s free and open-source tools include a useful command-line interface for testing loaded web pages for issues, in addition to a Dashboard for graphically tracking daily performance trends over time. WAVE Web Accessibility Tool https://wave.webaim.org/ WAVE comprises accessibility evaluation tools including an online URL checker, browser-based extensions, plus site-wide APIs and solutions. Pope Tech is an enterprise-level system, with WAVE Runner being a paid dataanalysis service. VisibleThread http://www.visiblethread.com Geared towards optimising content for clearer, more engaging communications across the board, VisibleThread provides measurable insights around web auditing of spelling, link checking, keyword discovery, readability…

Formik is designed to let validation happen in a way that suits each individual project. It has form- and field-level validation and can be written as plain JavaScript. For a more structured approach, it also supports Yup – an object schema validator package. There are two phases to validation using Yup. The first is the creation of an object schema. This describes the shape of a particular object. The package comes with a few standard descriptors to validate the data for each field. Using yup.email() for example, would check the value is a valid email address. This is similar to how React’s prop types work. Once a schema is constructed, it can then be used as a parser for a supplied object. The isValid method on each schema returns a…