Table of contents for November 2018 in net

One of my favourite things about the web design industry is that it’s inherently forward looking. No sooner has a new standard dropped – opening up in the process a whole new way of shaping sites – than designers and devs begin hacking away at its boundaries. As a result, the way we work on the web is continually improving. There’s perhaps no better example of this than in the continued evolution of CSS. Scarcely more than a year ago, CSS Grid burst onto the scene and turned the web world upside-down – and now a whole new raft of changes are on their way that promise to have a similar impact. This issue Rachel Andrew, co-founder of Perch CMS and Notist and invited expert to the CSS Working Group,…

SIDE PROJECT OF THE MONTH Tell us what Remixmonsta does. Remixmonsta is a music platform that showcases uprising artists in several music genres using the Soundcloud API. The platform is as much an opportunity for music lovers to find something amusing, as it is for the artists to be presented to a broader audience. The list of top remix songs is automatically refreshed every three hours, which not only gives users a reason to return, but also the ammunition for a whole day of headbanging. Why did you create it? The reason I created it was pretty selfish. I really like this (sometimes quirky) type of electronic music and I often searched for hours on various music sites looking for interesting artists, which was neither joyful or efficient, and so…

BEYOND PIXELS I’ve been an athlete for as long as I can remember. But there’s a particular layer to sport that has been unexpectedly helpful to my work as a designer: advanced analytics. For most, sports statistics are straightforward: goals, wins, points. But advanced analytics goes deeper. Technology records every action on a field or court and its output is analysed. Specialised statistics are used to fuel debates about whether or not teams are dynasties, who the real MVP is and myriad other things. We can find a player’s value down to the win to their team, for example. I became fascinated after reading ‘Stephen Curry is the Revolution’ on FiveThirtyEight. Using advanced stats, the piece is a deconstruction of the three-pointer, a contention that “Curry’s bad shots are better…

As knowledge workers toiling at the digital coalface, we regularly find ourselves managing multiple tasks at once. All too often those tasks add up, rendering it hard to focus and get things done. Establishing a task management – or to-do – system can make all the difference. Your system might be analogue or digital but, regardless, it’s important to have one. One approach on the analogue side of the equation is the Bullet Journal (bulletjournal.com), which bills itself as: “The analogue system for the digital age.” Ryder Carroll, creator of the Bullet Journal method, even has a book offering the tantalising prospect that you can “track the past, order the present and design the future”. The Bullet Journal method is tailored around a system of bespoke bullets: points (‘.’) for…

beyond-beauty.co Beyond Beauty showcases causes championed by four well-known female actors who are primarily known for their appearance. It highlights their active roles in politics, education and equal rights. The user experience is enhanced using a number of conventions, including sound and custom cursor states. While sound is key to the experience it’s refreshing to see an approach where it enhances the experience but is still functional without it. Co-designer Louis Ansa explains how sound forms a key aspect of the project: “The site’s core feature is, of course, the audio/visual speech approach that emphasises the immersive aspect and lets the user get carried by the topic. The concept of this project and the message delivered is as important as its realisation.” The high level of detail in the design…

koox.co.uk “Just want to visit this place from the website alone” CALVIN NCUBE – GRAPHIC DESIGNER NETM.AG/2NBPANP Koox is London’s first takeaway created by Michelin-star chefs. The combination of vivid illustrations by Jeanne Morel and Tristan Dion with subtle parallax effects creates a tempting offering. Blue Cheese Studio has created an enticing website that’s simple to use. Where you would traditionally expect a PDF menu, you are presented with an interactive array of dishes. The combination of photography and illustrations gives a clean finish, capturing the tone of the restaurant and the quality of the food. Performance has been considered throughout, with WordPress REST API utilised to retrieve data in JSON format. This avoids loading unnecessary elements, providing a smooth user experience. Images are also loaded in different sizes depending…

I have redesigned the Borough Market website to simplify the user journey and give it a bolder, more contemporary visual style. The theme is black against white, which is striking while still allowing the food photography to be the star of the show. The way the traders are organised has been updated for food lovers with all budgets in mind, with a function added to allow users to order traders by price as well as by cuisine or alphabetically. Directions and key information have been labelled more clearly for tourists and linked in a prominent place on the homepage. The flexible grid layout allows for different content blocks to be moved around to fit the market’s ever-changing needs. A spotlight feature on the homepage thrusts different traders into the spotlight;…

If you have been doing web development for a few years, you may be under the impression that new features take a very long time to get into our browsers and therefore there is no point looking at features with little browser support. Things have changed and the time that it takes for a new feature to be designed and implemented can be very short indeed. We saw with CSS Grid Layout how all the browser vendors shipped their implementation within a single year; making the web platform interoperable is something that everyone working on CSS cares about. When it comes to adding new CSS features to browsers, we sometimes wonder why one browser hasn’t added a feature that others already have. Ultimately, it comes down to the fact that…

AUTHOR Mattka is an award-winning creative director, designer and developer specialising in VFX and entertainment projects. w: richardmattka.com t: @synergyseeker Artificial intelligence (AI) is an integral part of our world, embedded in nearly every technology we have. AI is in the Google searches we run, the voice commands we give Alexa and the map directions we follow. It’s part of ordering our morning coffee and in the navigation system in our cars. Our AI-powered phones, which are never out of reach, have become an extension of our physical selves and our very identity. AI has the potential to make almost everything we do easier and vastly improve our world. As a technologist, it’s critical that you learn as much as you can about how to leverage these technologies and integrate them into…

If you would like to find out more about artistic aspects of CSS you can check out my talk at one of the front-end conferences organised in Utrecht: Frontend United. In my talk titled ‘Breaking the norm with creative CSS’, I point out that web design has fallen into a boring state and we all need to look for new sources of inspiration. For me, it was print. In newspapers and fashion magazines I explored visual styles, which I immediately wanted to transfer into the web browser. In my talk, you will find a couple of examples where I’ve used clip-path, shape-outside, mask-image and SVG. The future of web graphics and CSS as a design language is bright and it will finally make us less dependent on image editors. We’re…

+ 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 texture…

You’re well known in the web design community for your books, talks and work with big clients. But can you introduce yourself to those who might not know you? DM: Hi, I’m Dan, a creative director and advisor from Philly. I’m founder and director of SuperFriendly, a design collaborative that brings creative direction and design to some the world’s most important and interesting organisations. I’m also the co-founder and CEO of SuperBooked, a service that helps you find work with a little help from your friends. You’ve just launched a course about design systems. What can you tell us about that? DM: It’s a video-based course on Skillshare about how to create and work with design systems and get your colleagues on board. A design system is a tool to…

The open-source philosophy lets anyone take a project in a new direction by changing the original to create something unique. That philosophy is the reason we have projects like Firefox, a project originally forked from the Mozilla Application Suite. In Firefox’s case, the developers felt the software was too bloated, so they used the original codebase to create a more streamlined browsing experience. As a result, Firefox has become one of the most used browsers in the world. Forking a project is a sacred and important function of the open-source model, which is why it’s important to know when to do it right. When it comes to proper forking etiquette, there are best practices in regards to publishing forks. To be clear, fork privately any way you want. Experimenting with…

foosballworldcup18.com SITE OF THE MONTH “Foosball World Cup website is the coolest thing that’s ever happened.” TWITTER.COM/NOTLIKETHECAR Paying homage to the traditional arcade foosball table, Foosball World Cup 2018 (FWC) brings a futuristic take on the classic tabletop game. FWC is an R&D project by AQuest, created to test new technologies and their limitations. It showcases 3D WebGL in the browser to simulate an interactive game of Foosball against AI as the opponent. FWC is an impressive example of the level of interactivity that can be achieved within the browser, with no attention to detail spared. The complexities of the project are instantly clear; despite this, there is still more going on. Subtle but powerful additions include the 3D environment reacting to the colours of the selected teams and better…

I’ve created a design for a food market in Romsey. I began by thinking about what information is essential for my prospective market goers and what content could I include to help delight and encourage them to visit? The location, opening hours and information about the producers were essential to include. Without these the website wouldn’t be useful, so these needed to be clear and easy to read. To delight users I decided to include video profiles for each food producer. The aim is that it would help prospective visitors connect with what’s on offer and build relationships with the traders before they’ve even set foot in the market. Visually, the design puts the spotlight on essential information and the video profiles. People are able to filter the videos by…

CLOSE UP (1) We wanted to bring to life the idea of the ‘magic moment’ Verity could bring to any event. To do this, we mirrored Verity’s own blend of art and technology to immerse the visitor in the experience. Three.js particle simulations were used to create the drone choreographies on the home page. We also added light and smoke effects to the image of the girl. (2) We integrated simpler particle systems into the other page headers. We also implemented more subtle interactions, page transitions and animations along with parallax scrolling functionality. (3) The site was designed to work across all platforms and replicate the same user experience. (4) The site had to work as Verity’s main commercial and recruitment platform, so the interactive features and rich media had…

In this article I have referred to different levels of CSS specification. For example, the new work on CSS Grid subgrid is in Grid Level 2, while the new features for Media Queries are part of the Media Queries Level 4 specification. These levels refer to the progress of individual specifications through the standardisation process. You may have heard people talk about CSS3, and the modules that we used to refer to as CSS3 were all the modules that contained CSS, which existed in CS2.1 prior to the modularisation of CSS. In CSS2.1 we had one single specification that included everything in CSS. CSS3 marked the move to a more modular process and from this point each part of CSS could move forward at different rates. Therefore, a specification, which…

+ Here is a list of resources that will help you on your way when building mobile apps with React Native. React Native official documentation facebook.github.io/react-native/docs/getting-started.html This is the best place to get you started on your journey with React Native. It’s filled with documentation and code examples, which are constantly updated. Expo expo.io Expo offers a set of tools based around React Native, for things like sharing your app via a QR code or handling config steps for deployment. The Complete Native React and Redux Course udemy.com/the-complete-react-native-and-redux-course This Udemy course by Stephen Grider will help developers of all levels get started with React Native and you will even build some cool projects along the way. The course is currently one of the bestsellers and is highly rated. Essential React…

Creating transparent JPG files with SVG is possible and can be done directly in the web browser. Check out Chris Coyier’s article in which he shows, step-by-step, how to create transparent, cutout JPG files. (css-tricks.com/transparent-jpg-svg/) First, he creates a vector path that addresses the shape of the image he wants to display. The next step is about embedding SVG code into the HTML file and adding the clip-path property. Why we should even think of applying this technique into our workflow? The answer is simple: the size of the image file. If we compare images with transparency levels saved as PNGs to their JPG equivalent, we can see that the latter weighs less. As we all know smaller files are better from a performance and UX perspective. Although this method…

+ 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. Fragment Shaders This shader, which is typically the last in the pipeline, instructs each fragment or pixel which colour it should be. It does this by setting a value for fragColor…

Welcome back to our two-part service worker tutorial. In part one, we learned about the service-worker life cycle and set up our bare-bones worker to cache and serve our weighty static assets, providing a pretty impressive performance improvement on subsequent visits. In part two, we’re going to further enhance our worker to cache the dynamic API response, learn about caching strategies and give our app full offline support. You’re going to need recent versions of Node.js and npm installed on your computer. CACHING DYNAMIC RESPONSES OK, as it stands we’re only caching static assets, such as image and JS libraries. Service workers enable us to cache dynamic responses, such as API responses, but we need to put some thought into it first. And if we want to give our app…

Send your questions to netmag@futurenet.com QUESTION OF THE MONTH How do you present content for deaf users with BSL (British Sign Language) as their first language? Zara Gemmell, Nottingham SR: Video or face-to-face. Some think digital is all there is. We communicated pretty well before the internet! Always go to your audience. Citizens Advice has a team in Sheffield that is just for BSL users. The advisors are incredible. Many BSL users don’t read English. Many organisations think everyone who is profoundly deaf can read English. That’s simply not the case. The content can also be very different. It’s not always a case of taking content and making a video of it with a signer. Many government services can be very different for BSL users and I am guessing it…

CLIENTS FROM HELL The following all happened in person, as I worked on the client’s website at his office: Client: This text doesn’t look centred inside this box. Could you centre it? Me: It’s already centred via CSS. Client: I don’t think so. Could you move it a millimetre to the left? Me: OK but it won’t be centred. Client: No, it will be centred. I moved the text a millimetre to the left. Client: Hmm, this still doesn’t look centred. How hard can it be to centre it? Me: As you said, I moved it a millimetre to the left. It was centred before. Client: No, it wasn’t centred, let me get a ruler. The client grabbed one and then measured the gap on both sides of the text.…

WORKSPACE A boutique experience-design business based in Belfast, Little Thunder (littlethunder.co) was founded in 2013 by designers Gaby Muldoon and Tim Potter. Over its half a decade history, the company has grown from a two-person team to a rapidly expanding digital agency that includes designers, developers and animators. With a focus on the design of digital products, the studio counts Electronic Arts (EA), Visa and PwC as clients. Nestled in the heart of Belfast’s burgeoning ‘Cathedral Quarter’ creative district, Little Thunder’s studio is a hotbed of activity with a steady stream of visitors. Just five minutes from Belfast School of Art – where many members of the team give their time as guest lecturers – the studio is often a de facto tutorial space. A large LCD screen [1] occupies…

“Anybody can code and wireframe but being able to put yourself into other people’s shoes and really understand them is the most valuable skill any digital team can have,” exclaims customer experience consultant Gerry McGovern (gerrymcgovern.com), founder and CEO of Customer Carewords. “And it’s so rare to find: there are so many UX people who don’t interact with their customers – what the hell is your purpose? They know all about tools and methods but the percentage of actual time that most digital people spend with customers – getting to know and understand them – is tiny. No wonder they create crap products that don’t fit!” It’s for this reason that McGovern, who’s been in the business since 1994, isn’t a fan of personas anymore. “The theory is great but…

artistsweb.com The creative digital agency Artists Web present its online portfolio as an interactive experience. Its dynamic, modern approach utilises the latest technologies to create a solution that is impressive on a broad range of devices. With progressive web app (PWA) provisions in place, including service workers, the user is proactively prompted by the browser to ‘Add to homescreen’ when visiting the website on recent mobile versions of Chrome. Artists Web has been built on Vue.js and utilises Webpack, with GSAP and WebGL being key factors in its seamless transitions. The portfolio utilises mouse and touch gestures throughout to aid a unique navigation. A combination of simple gestures have been implemented to give an impressive custom feel, which is seamless when transitioning between areas. The use of mouse and touch…

bewegen.com Canadian company Bewegen Technologies is celebrating five years of bike sharing in over 20 cities across the world. It partners with digital agency Locomotive to showcase its new website. Photography and video are key to the experience with details of its electric-assisted bikes presented via interactive visuals, giving a deeper insight into its innovative products. TweenMax keeps the animations smooth throughout. Case studies detail the success of its bike-sharing system with a five-step ‘Build Your Bike Share’ form, enabling businesses to create their own custom installation. It demonstrates how even complex forms can be simple to use. Bewegen’s worldwide bike-share network locations are pinpointed on an interactive map, created using Mapbox. This open-source platform has been utilised to create a simple but effective visual display. The solution has been…

Food markets offer a unique experience to both local and international visitors. My aim with the Atlantico Market website is to satisfy the needs of these two audiences by offering a site that is intuitive and sophisticated. I looked to connect with locals by using the colours of the Barranquilla flag to highlight the categories and, with the international audience in mind, I’ve created a sophisticated, clean feel. Accessibility is what makes this site unique. Pushing the boundaries of what is thought of as a conventional website, the site feels more like an application where the content is the primary focus. The horizontal, Netflix-like approach of moving through cards brings familiarity to the experience and lowers the learning curve. I envision this site being built by JavaScript technologies, such as…

mxb.at Vienna-based front-end developer and digital designer Max Böck (mxb.at) has been building stuff on the web for the past 10 years, firstly as a freelancer and more recently as one third of Simpleloop (simpleloop.com), a studio he set up with a couple of colleagues at the start of the year. He’s worked on apps and sites for clients of all sizes across various industries and recently he’s been experimenting with CSS Grid to find new ways of making web layouts. We spoke to him to find out more. Your original qualification was in music. What drew you to web development? Yeah, I graduated from high school with a focus on music. I did a lot of gig posters, band logos and other design work for the local music scene…

AUTHOR Rachel Andrew is a web developer, writer and speaker. Co-founder of Perch CMS and Notist, editor in chief of Smashing Magazine and an invited expert to the CSS Working Group. w: rachelandrew.co.uk This is a very exciting time to be a web developer. We will take a look at some of the new CSS properties and entire specifications that are making their way into browsers. Some of these are behind flags or only available in beta versions of browsers now but you will be seeing them in release versions very soon. Gutters for Flexbox CSS Grid Layout introduced the grid-column-gap, grid-row-gap and grid-gap properties. Multi-column layout already had column-gap. It therefore made sense to remove these properties from the Grid and Multicol specifications and place them into Box Alignment,…

MDN developer.mozilla.org/en-US/docs/Web/CSS My go-to resource for anything about CSS is MDN. The project is documenting the entire web platform and the CSS documentation includes full guides to features such as grid, individual property pages with interactive examples and browser implementation data. CSS Grid Level 2 – Here Comes Subgrid smashingmagazine.com/2018/07/css-grid-2/ A useful article explaining how subgrid will work in our browsers, based on the in-progress Editor’s Draft, complete with code examples. Practical Scroll Snapping css-tricks.com/practical-css-scroll-snapping/ For more information about scroll-snapping see this article on CSS Tricks from Max Kohler. Using Feature Queries in CSS hacks.mozilla.org/2016/08/using-feature-queries-in-css/ To get started with Feature Queries, Jen Simmons has an article on the Mozilla Blog. Grid By Example gridbyexample.com For Grid Layout examples and a full free video tutorial, pay a visit to Grid by…

There used to be a time when developers would need to learn Swift/Objective C to build an iOS app, or Java if they wanted to build an Android app. We have now reached an exciting time where web developers can use their existing skills to build both websites and apps without having to learn a completely new language. React Native is a JavaScript library developed by Facebook. It was released back in 2013 and has helped shape apps like Skype, Bloomberg, Wix and many more (facebook.github.io/react-native/showcase.html). Not only can you use your existing knowledge of JavaScript but you can also use the same codebase to build for both iOS and Android. GETTING STARTED To get started building your React Native project, you will need to make sure that you have…

In this tutorial we are going to go through three CSS properties: mask-image, clip-path and shape-outside. Even if you have used them, don’t worry. I’ll show examples that will help you create effects you probably haven’t seen on many websites. My biggest inspiration in terms of using the mentioned properties is traditional collages. I was wondering if it’s possible to create them in a web browser, not by using any graphics editors or software. With the magic of CSS, it’s totally doable! Another bonus of creating them with code is having them scalable, animated and interactive. WHAT YOU WILL NEED: • Your favourite web browser and developer tools – I recommend using Google Chrome since it supports all the features I use in this tutorial. • A code editor. •…

In previous articles, you learned about shaders, how to get them into your 3D projects and created many of your own. You learned about post-processing, animations, cool effects and more. In this tutorial we’ll show you how to add post-processing effects via the EffectComposer using Three.js and how to create your own glitch effect. PART 1: SETUP A 3D SCENE You’ll need a Three.js scene to apply these effects to. If you have one already, you can skip to part 2. SETUP AN HTML PAGE This tutorial uses the WebGL library Three.js. Download it from: github.com/mrdoob/three.js. You’ll also use the OBJLoader.js. It’s located inside the Three.js folder named ‘examples/js/loaders’. ADD VARIABLES AND FUNCTIONS Next, add global variables and the Clock class. Create functions for init and render and a call…

I’ve spent many hours supporting people with developmental disabilities to carry out tasks on modern user interfaces. Doing so has left me with some observations about web development and cognitive accessibility. The most striking thing to me has been those moments where I know somebody is able to do a task in the real world, like writing a letter, but they struggle to do the online version of the same task: sending an email. There is a gap between the complexity of a given task itself and the complexity of the user interface created for accomplishing it. My job as somebody helping that person is often to bridge that gap with training. We teach the specific set of steps needed to send an email, add something to a calendar, check…