Table of contents for No. 289 in Web Designer

THE WEB DESIGNER MISSION To be the most accessible and inspiring voice for the industry, offering cutting-edge features and techniques vital to building future-proof online content Follow us on Twitter for all the news & conversation @WebDesignerMag Visit our blog for opinion, freebies & more www.creativebloq.com We all like shiny and new JavaScript is no stranger to web designers and developers. But, like pretty much everything on the web, it is always moving forward. The core language itself is constantly on the march, which means the surrounding ecosystem of tools, APIs, libraries and frameworks will all be following in its footsteps. “APIs are programming interfaces which let you offload jobs to a server or browser module provided by a third party” We were just remembering when jQuery was all shiny…

01. Color of the year https://color-of-the-year.com Simple and straightforward with a big block of ever-changing colour and a well-known name to keep the user focused 02. Belazor Technologies http://belazortech.com Beautiful illustrations with smooth curved transitions, scaling backgrounds and subtle but effective animations 03. Anton Chalov’s Portfolio http://chalovak.tv A portfolio that grabs the attention wth its retro style, ceefax graphics and the smartphone remote that controls the desktop site 04. Bornfight https://ascc.bornfight.com Smart headline text animations that grab the users attention and make them want to engage further Graphics Evil Animals https://bit.ly/2wLhCGQ Great artwork, great fonts, great video, great soundtrack. Check out Airton Groba’s work Colour picker wwpB https://bit.ly/2XzmhqX Typesetter Cheddar Gothic Rough https://bit.ly/2R2clnE An all-caps condensed font with a hand-drawn, textured style. Great for branding and packaging with a…

1. Review and build upon your link profile https://www.semrush.com/features/backlinksA powerful website backlink checker that shows all links pointing to your domain and their quality, as well as helping you to discover everything about your competitors’ backlinks. 2. Monitor mentions of your competition https://www.google.co.uk/alertsMonitor the web for interesting new content, and mentions of your business and that of your competitors. Simply create an alert, and have it emailed to you directly. 3. Benchmark against the competition https://bit.ly/2RTBvUB Navigate to: Audience — Benchmarking within your Google Analytics profile. Here, you will find valuable performance benchmarks within your industry, to include: channel, location, device and user flow. 4. Advantageous keyword analysis https://ahrefs.com Browse the keywords your competitors rank for, closing the gap between those terms you are not taking advantage of and ultimately…

<comment> What our experts think of the site With a huge demographic ranging from 16 to 55 and over 7 million followers worldwide, the website had to appeal to all ages in an engaging and immersive manner. The main feature of the website was the home page; we wanted visitors to literally jump into the screen and join Bear on his adventures. To achieve this, we utilised some clever transitions, coupled with edited videos, dramatic imagery and the overall language on the site. Chris Wilcock (Co-founder & Creative Director - Outpost) & Dan Williams (Creative Director - Outpost) DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner…

twitter is a micro-blogging platform, which is dominated by the media, influencers, journalists, fans and more. What you should be asking yourself is this — do you see your audience or brand on Twitter? There are a couple of ways in which you could approach Twitter, but we are going to look at how you can create awareness. The trending page offers the chance for amazing visibility, and being prepared for large public days such as WorldSockDay (only joking.) But it is worth looking at what big days are coming up. These could be from sporting events, TV, national holidays and so on. Preparing assets against these topics ahead is a sure way to get noticed. However, you should always ask yourself before getting involved — can I add anything…

“‘Going again’ often leads to better, more considered ideas. Let’s face it, those initial creative answers MIGHT be brilliant — but they might also be a little bit off-brief” Most designers are in the ideas business. This means that our hunger for the daring, disruptive and different is insatiable — and every day, a whole industry of magazines, blogs, awards schemes and Insta-feeds relentlessly pump out shiny, perfectly-formed ideas that are eye-candy for us. Yet despite all this apparent success, no-one really talks about the failure and f**k-ups that precede the fanfare. The 20 or 30 so-so thoughts that came before the killer idea. The ‘genius move’ that the client just didn’t get. Or — dare I say it — the brief that wasn’t quite cracked? I honestly belief that…

As the team confirmed, one of the biggest challenges encountered during the backend development revolved around coding the Codex’s overview page. This was largely caused by the sheer amount of pages being summarised and the information being attached, while balancing depth of detail against keeping the frontend UX as streamlined as possible – on every platform. “First off, we had to take into account the requirement to show the information related to every single page of the Codex, including the percentage of subject for each page, the year the page is attributable, and the page number itself,” elaborates Daniele Berto. “In order to render more than 1000 glyphs with this information depth, we had to rework the code of the component multiple times, in order to make it as optimised…

Libraries  Libraries help solve commonly-faced issues. Here’s a few to make development easier 1 Do the Mathey https://mathjs.org While the JavaScript language standard does contain quite a few mathematical functions, it — of course — is in no way complete. One feature which is commonly missed involves complex numbers. Math.JS provides a relatively easy-to-use API whose basic usage looks like this: Floating number accuracy is another topic in JavaScript runtimes. Math.JS solves this problem by providing a fixed-point floating number implementation — simply set the desired precision, and raise your decimal number: Keep in mind that BigNumber and its various classes are not a panacea cure for all digital problems. Fixed point arithmetic is known to be a lot slower than hardware-accelerated float maths —if you don’t have a good…

A CSS framework is a collection of pre-written CSS classes that help with layout, styling and sometimes even include complete components that can be dropped into the HTML. They aim to remove repetition, help with cross-browser issues, and make website code easier to read, from developer to developer. There are many CSS frameworks out there, but this month, the framework in the spotlight is Bulma. Bulma is a popular CSS framework with a simple flexbox grid system. It differs from other frameworks by taking a lighter approach and not including any JavaScript — leaving that decision entirely up to the developer. The installation can seem daunting at first glance, but using the pre-compiled option served from the CDN, getting started is as easy as including just one CSS file. In…

Slack is an increasingly popular tool for businesses and teams who need to communicate instantly. While it may — in some cases — be considered a daily disruption, it also has a great automation potential, offering dozens of integrations to keep everything in one place, and it is slowly superseding emails. There are many ways to integrate your systems with Slack; the platform even provides a branded bot that lets you deliver reminders, or messages across your digital workspace. Slack offers various entities that could be considered as “bots”: • webhooks, which allow to post messages from other apps into Slack, but are a one-way form of communication, • apps, for advances integrations (with other apps), • bot users, more on them shortly. In this tutorial we’ll be looking particularly…

Just like Danny Ocean’s team, the Node. JS developer collective can not let its product be — as technology evolves, developers get access to new features. Various forces drive this process: in addition to security threats, which lead to improved protocols, the underlying JavaScript runtime also gets updated permanently. Finally, the Node.JS community is one that is known to be extraordinarily active, with hundreds of bug requests, issues and requests being raised every week. Node. JS 12 is, in many ways, a classic maintenance release. In addition to (significantly increased) performance, thanks to another update of the underlying V8 runtime, the latest version also advances a few protocols and features which have been in development for quite some time. Finally, some small-scale improvements were made to eliminate common roadblocks faced…

the largest online platform in the world, with over 2 billion active users (https://bit.ly/2GcsJhM), but is Facebook still relevant? Data from taken from the top page categories showed that they have experienced a decline of up to 70% engagement. The worst affected in this case were artists’ pages (https://bit.ly/2UrNFcX). However, don’t be put off by the bleak stats. Facebook is in a changing state, so you’ve just got to be willing to move with it. Some say Facebook’s publishing tools are a little bloated, but here are a few that you should consider focusing on. GROUPS By creating a group on Facebook, you’re able to connect one on one with your audience. You are providing them with a space in which they can discuss and share their own opinions based…

VIDEO LENGTH 1 YouTube has moved from 2-3 minute videos up to 20/30 minutes with continuous retention. Although there is a want for longer format videos, it doesn’t always mean that’s the answer. Start short, and test the length by reviewing your audience retention stats. QUALITY 2 Users are expecting quality, and they often applaud YouTubers for their filming and editing skills. This is now the norm. Invest in a decent camera, lights and editing software if you want to compete in the creator space. OPTIMISATION 3 Tagging is important to help your audience find your content and to be discoverable through search. Use tags that reflect your video, as well as keywords from the title and description along with brand words. THUMBNAILS 4 Choose the best thumbnail that will…

“One of the most challenging and exciting aspects of the project was the design of the application for the touchscreen. The location of the screen (Biblioteca Ambrosiana) adds important value to the application, allowing the audience to understand and dig into the analysis of da Vinci’s work. It represents a new digital way to access information in service of ancient and precious material, otherwise difficult to obtain.”…

https://coachhub.resilienceboost.com COACHHUB — a responsive coaching web-platform we built with ORCAS — provides users with access to varying levels of health support: video chat, in-app messaging, public Q&A, webinars, and support groups, anywhere, anytime. CoachHub was used in a study by the National Institute of Health. Currently, the US Military and Coast Guard use CoachHub for internal health coaching. ORCAS had identified several barriers that kept clients from getting the right level of support when they need it. We aimed to create an inviting space for clients and coaches to quickly and easily access one another in dynamic and effective ways. After our research and concepting phase, OddBird helped ORCAS create a brand identity for CoachHub. Like their existing apps — MoodHacker and BlipHub — the CoachHub logo and overall…

Many websites and web apps are often designed with the full screen at the forefront of the user experience process. Making each section of the site fill the full screen on desktop and then creating transitions between these screens or states gives a fluidity to the user experience of moving from section to section. In this tutorial, the concept of moving from one page of design to another is going to be explored, and in particular, allowing elements to move independently to give them a sense of changing into place will be the aim of the project. Allowing the user to click on the navigation will transition between these states and quickly scroll the user to the next section, while elements move off screen to create a seamless bridge between…

A competitive analysis is a critical part of any businesses marketing plan. A well-reasoned competitor analysis will structure your whole marketing strategy and position your business for future success. Having a better understanding of the competitive landscape, an insight into what your competitors are doing well, and how you compare, will ultimately help you capitalise on it. Whether you are upscaling your existing website environment, developing a new marketing campaign, or launching a new product or service, you need to know how your competition is performing in the same field. This tutorial will explain how to gain insight into your competitors’ positioning, efficiency, traffic sources and how they got there. This includes their keyword targeting, social media presence, content marketing efforts, PPC targeting, position in SERP’s, backlink profile, reviews, differentiators,…

The many facets of parallax Parallax motion, the concept of moving layers at different speeds, has been used for years in animation. In this example, the originality comes from the scaling effect, as all the content moves into place on the screen and creates the final design. Always try and use an established effect in new and original ways. Rising text In the background of the page, the text ‘adventure’ rises up into place behind the mountains as it fades in. Exploring the site Having the menu on the top right allows users an opportunity to move forward and to explore the site’s content at any time. User instructions Keeping the user in the loop at all times is important — they should always know what action they need to…

Built-in commands are actions you get in Slack by default, by typing a forward slash, accompanied by a reserved keyword in the text bar. For example “/remind me to submit my timesheets every Friday at 5pm” will make Slackbot send you reminders as direct messages weekly. Slash commands are also used to interact with the workspace, with many actions such as “/join”, “/ leave”, or “/invite”. Slackbot can also be set to send custom responses across the space (in public and private channels) when it matches certain keywords. This is however matching the keyword all the time, so it has to be chosen carefully to avoid being counter-productive. In some cases, you might prefer to implement the ephemeral messages discussed in this tutorial.…

Many new features in Node. JS are described by links to GitHub issues. When opening the URL for the first time, you are dropped off in the conversation page shown in the screenshot accompanying this boxout. Talk and banter, however, is but part of the value of these pages. Click the other tabs below the header to switch modes, some of which reveal additional information. The “Files changed” sector is of particular importance. It provides an overview of changes done to the project structure – in addition to the implementation, one can usually find one or more unit tests intended to ensure code quality. This can, of course, also be used to create your own code using the newly-developed functions.…

URL A user has found you, and now they want to know more. Featuring your website will bring more direct traffic to your page/shop. HIGHLIGHTS Created something amazing that should live on longer than 24hours? Feature it on your home page. EMAIL Call to action buttons are really useful contact tools, which can be switched out based on what you need at the time. instagram has over 1 billion active users per month, and accounts that surpass 120m+ followers. It’s easy to see why so many brands have invested their energies into building an engaged community using this website. (https://bit.ly/2GcsJhM). It’s a given that your profile should feature some of your work, brand or products that you sell. All these points will help potential followers understand what you offer, but…

with 250 million monthly active users, it’s not a platform to ignore. The question is, do you need an account, or can you just be present by introducing better sharing functions on your website? How about both? Users come to Pinterest to find pins for inspiration, aspiration and motivation purposes, which you can work to your advantage by pinning against these points to seed content throughout the platform, creating links back to your website. Start small and build up. Work with what you have. For example, If you’re an illustrator and have a bank of work on facial expressions and features, use those files and start. You could organise them and create sections within your board to separate it by categories – eyes, smiles, happy or sad. Show a potential…

“Premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK” Netcetera netcetera.co.uk 03330 439780 About us Formed in 1996, Netcetera is one of Europe’s leading web hosting service providers, with customers in over 75 countries worldwide. As the premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK, Netcetera offers an array of services designed to more effectively manage IT infrastructures. A state-of-the-art data centre environment enables Netcetera to offer your business enterprise-level colocation and hosted solutions. Providing an unmatched value for your budget is the driving force behind our customer and managed infrastructure services. From single server to fully customised data centre suites, we focus on the IT solutions you need. What we…