Table of contents for December 2018 in net

Despite its reputation as a global medium, the early days of the net tended to be focused on a rather white western web. Things have certainly moved on over the last three decades – a Pew Research Center survey this year found the proportion of adults in the developing world owning a smartphone or using the internet at least occasionally has rocketed from 42 per cent to 64 per cent in the last four years (https://netm.ag/2RUlNt7). But it can still be easy to forget that many of our users in developing nations might not be packing 20GB-a-month 4G connections; as Ire Aderinokun comments in our interview this month, designing for the future of the internet requires you to consider a “huge spectrum of users [with] many varying needs”. In light…

Tell us what your side project does Blue Notes recreates classic Blue Note album sleeves from the 1950s and 1960s using HTML and CSS. All the layouts and typography are responsive. Why did you create it? My first real exposure to graphic design came through the jazz, funk and hip-hop scene of the early 1990s. Late last year I wanted a side project that would showcase my love for graphics, typography, layout and web development. Recreating these sleeves seemed like a great way to do this. What were you hoping to achieve? While this project was part homage and part test of my chops, it was also inspired by a desire to create and experiment with radically different layouts. My focus was on recreating the sleeves as exactly as possible…

THE DESIGN OF BUSINESS Regardless of whether money is involved, there’s one commodity in business that always changes hands: trust. Whether you’re working on a client project that involves confidential information or gathering your customer’s intimate personal details within a SaaS product, it’s important that you keep the bond of trust between business and customers sacred. Over the last year, we’ve witnessed a number of high-profile cases where the bond of trust between business and customer hasn’t been handled with the respect it deserves. Facebook’s launch of Portal – and the subsequent backlash the product received on social media – is evidence of how a breach of trust can erode brand loyalty in a manner that can rapidly spiral out of control. Why? Because the business abused the trust of…

When it comes to a CMS, we live in complicated times. Which system do you choose and what do you want to achieve? If your goal is simply to build an ‘editable website’ you need to rethink your goals. You should be aiming to create the beating heart of your digital ecosystem. So what exactly needs to be considered when making the toughest choice in digital? Here are a few pointers to get started. WHAT IS YOUR AIM? A CMS should be designed to support all of the critical interactions and functions your business needs. I hear now more than I have ever done: ‘We have invested all this money in a website but it’s not delivering what we expected.’ Establishing real KPIs for the site will help you make…

https://www.kikk.be/2018 This stunning site is linked to a digital culture festival, the KIKK Festival, taking place in Belgium later this year. The theme is all about microorganisms seen through the lens of a microscope. Just look at those vibrant colours and the playfulness! The transitions, hover effects and animations while scrolling and navigating are delightful and visually so impressive, as are the little touches throughout the responsive design. As you navigate deeper, a great example of implementing a complex, detailed timeline layout on mobile are the schedule pages, which need to quickly give us details and timings of the festival’s events. We chatted with Henry Daubrez, CEO of Dogstudio, whose team was behind the site and he explained how they wanted to convey a hand-drawn feeling to the whole design,…

Moviedrome has been an independent cinema since the late 1980s, showing arthouse, foreign and cult films. The site’s main purpose is to provide information on upcoming films, as well as help customers plan their visit to the cinema. It also needs to let people know about the benefits of becoming a member and how they can support the cinema. The stark design has a retro feel, reflecting the aesthetic tastes of its patrons, who tend to work in the creative industries. The main reason people will visit the site is to find out what films are on, so the homepage helps them do this. The site will be built on Craft CMS so admins can manage film timetables, ticket bookings and membership applications, as well as keep the site updated.…

CLOSE UP (1) The site’s ‘Projects and Practice’ introduction relates to the organisation’s ‘methodology and thinking’ approach to architecture. In order to help convey this, the area features slide-in HTML5 video. (2) We decided to let the imagery do a lot of work on the website. Therefore the quality of the content is integral to the success of the website. (3) We decided early on that the site should feature clean, minimal, editorial-style design layouts. (4) By creating content blocks that can be stacked and reordered in the back end (WordPress), we were able to give the client a lot of flexibility when creating content. (5) At the heart of this project was the desire to shine a spotlight on the faces, voices and minds in Page\Park who were behind…

A big part of ongoing performance UX is suggesting ideas to your client about how to improve the experience for the user or increase a particular on-site metric (click-through rate, for example). In the past if you didn’t have the development capacity to run experiments yourself, companies like Optimizely and VWO had the market cornered. With Google Optimize, there is a now a free alternative that not only is quick to pick up but that also works seamlessly with Google Analytics, so you can include the data it provides in your reports and dashboards. Optimize lets you run: server-side experiments and A/B, multivariate and redirect tests. It has a very easy to use visual editor that also enables you to alter the code directly should you want to get your…

+ Here are a few pointers when designing voice experiences for Alexa. Identify the user intents When developing your skill, it’s important to identify a list of all the things the user can do within the skill before planning the utterances. For example, the user might be able to update website content, update the website style and read posts. Be sure to make use of the built-in intents: you can see a full list of them at https://developer.amazon.com/docs/custom-skills/standard-built-in-intents.html. Identify the utterances Think about how your user may communicate with Alexa. To update a style, the user might say ‘Update background to red’. It’s also important to plan for miscommunication. Alexa might interpret ‘red’ as ‘ref’. A good way to deal with this would be by using the code below: Creating…

In previous articles, you have learnt about shaders and how to get them into your 3D projects. You learned how to make a cool Glitch shader in the last tutorial as well. This tutorial continues by showing you how to add post-processing effects via the EffectsComposer using Three.js and how to create your own blur effects. The blur effect you will be creating will be applied to your entire 3D scene as a post-processing effect. You could also apply it as a ShaderMaterial in Three.js to specific objects. This effect is written as a graphics shader and can be applied in other frameworks such as Unity, openFrameworks or Processing. SET UP YOUR 3D SCENE This tutorial uses the WebGL library, Three.js, which abstracts away the low level WebGL language, enabling…

CLIENTS FROM HELL A friend of a friend approached me to make a website for her. I drafted a contract where I would set her up with a site, PayPal integration and lessons on how to update it. I asked for half of the fee up front, which she paid. Within weeks, I developed a site for her. She also asked me to make a business card. I agreed to do it free of charge and delivered a printready image. She was ecstatic. I gave her a few lessons, which didn’t go as well, so I agreed to upload her next few updates. We agreed that once I did that, she would pay the remaining 50 per cent of my fee. I finalised the site, having done much more than…

Can you introduce yourself to those who might not know you? Sure! I’m fairly well-known on the web-dev scene for my work in web-standards education and evangelism. Originally I worked on print books in the early 2000s, then at Opera Software (doing talks and working on dev.opera.com). Also I was a fellow at W3C working on Web Platform Docs and more recently writing documentation at Mozilla on the awesome MDN Web Docs. I’m also a drummer and music lover, appreciating heavy music. What have you been up to at Mozilla this year that you’d like developers to know about? On MDN Web Docs, we’ve been concentrating on making our documentation and data more flexible and useful to as wide an audience as possible. The first big project I want to…

https://www.beoplay.com/en/collection/aw18 Bang & Olufsen’s biannual colour collections site is outstanding work. Jakob Kahlen, creative director at Trouble, gave us an insight into its process, which didn’t just include the website but also defining the colours of the products and executing the entire campaign. He revealed how the process started from a solid design research in culture and lifestyle trends, then moved on to creating a colour concept for the product palette. The limestone grey, terracotta red and dark plum purple are wonderful. The idea that people need to feel human and more in touch with nature as the world gets more technology-driven is at the driving force of the concept. To bring the AW18 collection to the market, Trouble went to the ancient and beautiful city of Marrakech. With its…

Mountain Picture House is a fully equipped, brand new, independent art-house cinema, presenting all the best from new filmmakers and appealing to the younger film enthusiast. The inspiration for the colour palette is from the RGB colour model. Curved edges within the UI reference spool holes on the side of film roll. The page scrolls from left to right, just as an analogue film camera would. The films themselves are separated by screen numbers. Doing this enables the films to sit consistently on the site but also create a level of intrigue, which is what the independent film industry does best. With just a single entry field, visitors can quickly select and book films. The ability to scroll through the films while choosing means lesser-known films surface. By adding another…

www.adamrobbins.co.uk Adam Robbins is a design director currently living and working in London who co-founded his own digital studio, Rotate°, in 2014, primarily designing and building ecommerce websites for luxury and lifestyle brands. With a nine-year career spent working in digital roles at a range of London-based studios across numerous clients, he’s recently said goodbye to Rotate° in order to pursue new ventures. We caught up with him to find out more. How did you get started in web design? My post-uni plan was always to move to London. I graduated in graphic design in July 2009, then spent a week at a music festival in Spain. After that I flew home and applied for a handful of junior roles. My final major project at uni had quite a digital…

Building interactive websites can involve sending JavaScript to your users. Often, too much of it. Have you been on a web page on your phone that looked like it had loaded only to tap on a link or try to scroll and nothing happens? We all have. Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones because it can delay interactivity in significant ways (bit.ly/interactivity-matters). Today we’ll cover some strategies for delivering JavaScript efficiently to your users on mobile while still giving them a valuable experience. The web is bloated by too much user ‘experience’ When users access your site you’re probably sending down a lot of files, many of which are scripts. Perhaps you added a quick JavaScript library or plugin but didn’t have a…

Real-world performance budgets https://bit.ly/perf-budgets A deep-dive into why performance budgets matter. This guide by Alex Russell questions if we can afford all the JavaScript we load for users on median mobile phones given their impact on user experience. Reducing JavaScript payloads with code splitting https://bit.ly/js-code-splitting A practical guide to reducing how much JavaScript you’re loading Webpack or Parcel. It also includes links to code-splitting guides for React, Angular and others. Reducing JavaScript payloads with tree shaking https://bit.ly/js-tree-shaking Tree shaking is a form of dead code elimination. This guide covers how to remove JavaScript imports not being used in your web pages to help trim down your JavaScript bundles. Lighthouse https://developers.google.com/web/tools/lighthouse/ Lighthouse is a free automated tool for improving the quality of web pages by the Chrome team. It has audits…

+ If you want to learn more about Alexa skills development after this tutorial, then check out the compiled list of resources below. Alexa Developer Home https://developer.amazon.com/alexa-skills-kit This is the best place to get started when building Alexa skills. It’s full of useful documentation, videos and has all the latest news on Alexa development. GitHub: Alexa Skills Kit SDK for Node.js https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs Here you will find lots of technical documentation and sample projects for the Alexa Skills Kit SDK. Comprehensive Alexa Skill Development Course https://www.udemy.com/comprehensive-alexa-skill-developmentcourse This Udemy course created by IOT Wonders will introduce you to Alexa development in video format. You will get the opportunity to learn by building out several skills and it is aimed at developers of all levels. Essential React Native development tools https://aws.amazon.com/lambda/getting-started When developing…

+ GLSL (OpenGL Shading Language) shaders compile and run on a wide range of platforms. You can apply what you learn to any environment that uses OpenGL, OpenGL ES or WebGL. This means you can use this knowledge for websites, Three.js, iOS games, interactive installations, Unity, openFrameworks, Processing and many others. The graphics pipeline Multiple shaders work together in the graphics pipeline. Some are programmable, some are locked to the hardware. We’re most interested in two shaders in the pipeline – vertex shaders and fragment shaders. These are the core of the OpenGL Shading Language and the WebGL graphics pipeline. Vertex shaders Vertex shaders handle the processing of individual vertices, which can be thought of as points on the triangles that form a mesh. Vertex shaders are used to transform…

Send your questions to netmag@futurenet.com How can a digital-first brand earn trust in an era of Facebook scandals and fake news? Jackie Clifford, Ontario, Canada MO: This is a great question and one all digital brands need to think about. Design and tone of voice are an easy fix. If your brand looks and feels considered, you’ll reassure consumers that you care about their experience. Likewise if you can show up in a coherent way across multiple channels, from your website through to social, you’ll prove there’s depth to what you’re doing. But looking trustworthy is just the first step. To stand out as a brand with genuine integrity, you need to show how you’re walking the walk. The trend for cost transparency, started by Everlane in the US, is…

WORKSPACE Situated between the beautiful Georgian city of Bath and the vibrant city of Bristol, the Bopgun (bopgun.com) studio is nestled on a farm in Wick with more than 40 acres of land, perfect for our office dog Dexter. Over the past decade we’ve been busy building brands, campaigns and digital solutions for a wide variety of clients including Sainsbury’s, London & Country, Hachette Partworks and Martin Grant Homes to name a few. Our office space is open plan for easy communication. We feel it’s important that we can all work together, bounce ideas off of each other and keep the creative energy flowing. We completed a rebrand two years ago, where we commissioned local signage company Voodoo Design to create our new logo in stainless steel [1] – and…

Unlike many of us, Ire Aderinokun has experienced first-hand what it’s like to develop websites for the much-talked about next billion users – people who are coming online for the first time in countries such as India, Indonesia, Brazil and Nigeria, where Aderinokun lives. “One of the most annoying things about Nigeria is the lack of consistent internet,” Aderinokun explains. “If it rains heavily, for example, the internet will not work very well and you just need to accept that. I have four or five different ISPs in my house. When one doesn’t work, I just use another one. It’s a lot of patchwork.” People also tend to use very different devices (typically low-end mobiles) and browsers than those in developed nations, while two-thirds of users in Nigeria are on…

https://www.littleleague.org The Little League site is a great example of clean, consistent design and UX but with a complex information architecture. The responsive brackets are expertly designed too. We caught up with Kyle Unzicker, director of design at Modern Tribe, who worked on the project, to learn more. “We had a diverse set of stakeholders. Our aim was to build a site that allowed a central team to edit, manage and create individual sites within the same administrative dashboard and to quickly and easily share content across multiple properties. We developed a design system that could be shared across all properties yet supported unique branding aspects such as swapping primary and secondary colours and logos when appropriate. The information architecture needed to support both users already involved in Little League…

Underground Art Cinema is a stylish alternative to traditional cinemas, specialising in art-house films in a comfortable underground setting, with the inclusion of a licensed bar and kitchen. The logo arrangement reflects the steps to the cinema, while the font nods to art-house films from the 1970s. The title font, Didot, brings the art feel. A clean, simple sans-serif font keeps clarity for the body text. All fonts have a relationship in size, using a square root of two font scale (1.414), giving a natural scaling ratio. With a dark feel, the site captures the character of art-house films. Subtle gradients and strong shadows give the page depth and placement, emphasising the film images. There are two key areas for visitors: the featured film in the hero and the booking…

One year ago, we brought a team together to rewrite our mobile website from scratch as a progressive web app. This was the culmination of several years of conversation, metrics and one large hypothesis: mobile web can be as good as a native app. With more than half of all Pinners based outside the US, building a first-class mobile website was an opportunity to make Pinterest more accessible globally and ultimately improve the experience for everyone. How did we make it fast? Performance was baked into the goals and process because of how tightly correlated it is to engagement and how sensitive it is on a mobile connection. In fact, our homepage JavaScript payload went from ~490kB to ~190kB. This was achieved through code splitting at the route level by…

We now design in a world with an abundance of tools that can fit almost every design process and meet your creative requirements. There truly is a solution out there for everyone and the possibilities are incredible. It’s such a great time to explore new tools and see what’s available to design and showcase your amazing projects. The big challenge is which ones should you use? Over the last few years, the combination of Sketch and InVision has been a popular choice for many designers but the rise of other tools has offered competitive features and options. There has never been a better choice out there, so we thought it was a good time to have a closer look at some of the best. Wireframing MockFlow + MockFlow is a…

The aim of this article is to provide an introduction to performance UX and help you understand its three core pillars. I’ll delve into a bit of history and let you know where the need for performance UX initially came from and how it can get clients bought into (and understanding) UX. Lastly, I’ll show you how to produce three performance UX tactical deliverables to help map your ongoing strategy. Performance UX is a perfect solution for those of you who work on websites that are already live. UX (within service delivery) has been at the heart of the most successful customer-centric businesses for many years. A decade or so ago the mid market started taking UX seriously and the results have been exactly what those already in the field…

Many of us now have some kind of voice assistant around the home, whether it be an Amazon Echo, Apple HomePod or a Google Home. It seems that voice is going to have a huge impact on the way we go about our daily lives and as web developers we need to ask ourselves, what are the ways we can implement voice into our websites and web applications? In this tutorial, we are going to be building a simple Alexa skill that updates the news content on a website. The category type will depend on the voice input by the user. It would help if you have some experience with AWS already but there is a lot of documentation out there to help you out if you get in a…

Retail websites aren’t just convenient for people with disabilities who might struggle to shop in a physical store – they are essential. This, coupled with the retailers’ need to innovate in order to maintain market position, means that companies have to ensure that no customer is neglected – and rightly so. As web designers, we should not only aim to make websites accessible for all but also make full use of the capabilities of new and emerging technology. From VR to voice tech, we now have a wealth of tools that can be implemented to further benefit the accessibility sector. As part of This Place’s ongoing work for Woolworths, Australia’s largest supermarket chain, we were asked to explore how to better serve the accessibility sector. We wanted to go beyond…

You are using Three.js as the WebGL renderer in this tutorial. If you are not familiar with Three.js, here is a quick primer on the elements you will be using. The scene The scene is a container object that encapsulates the other objects and elements that we wish to show. Camera Three.js has a few different camera classes, including a perspective camera, which we will use for 3D, and an orthographic camera, used for rendering 2D scenes or UI elements. Renderer The renderer handles the display of the 3D scene using WebGL. It targets an HTML <canvas> element to draw into. Typically you will call the renderer to render each frame. Materials Three.js comes with several materials, such as Normal, Basic, Lambert, Phong and Shader. Materials are used to texture…