Table of contents for No. 279 in Web Designer

“Barcelona-based artist Mariano Pascual’s online gallery portfolio is reimagined as a stylised operating system full of surprises” Designer: Achos achos.xxx Colours Tools HTML5, CSS3, jQuery, SVG Fonts Roboto by Christian Robertson and available via Google Fonts is used in Regular and Bold varieties.…

1. Document template The first step is to define the template structure of the HTML document. This consists a HTML container for describing the document, consisting of sections for head and body. The head section is used to reference the JavaScript and CSS resources, while the body section is used in step 2 to store the visible content elements. 2. Body content The page content consists of a 'main' container used for storing the effect. Visible text is placed inside the child article, allowing its content to avoid interference from any manipulation that will be applied via JavaScript and CSS. The use of the article as a container for content will also provide control for keeping all content to be displayed above the bubbles. 3. Hide overflow Create a new…

THE LOCKDOWN .com iOS: https://apple.co/2wCZmyW Android: https: //play.google.com/store/apps/details?id=com .abnamro.thelockdown AGENCY CODE D’AZUR codedazur .com @codedazur PROJECT DURATION 15 weeks PEOPLE INVOLVED 20 INTERVIEWEES JEROEN THISSEN Creative Director PRISCILLA DE GIER Art & Design Director ERIK RAVE Technology Director AS THE CONNECTED WORLD CONTINUES TO PROGRESS AT LIGHT SPEED, THE BANKING sector is a critical arena for innovation. This is, of course, largely reliant on the attraction of new talent into the industry and the attraction of the brightest IT prospects from each generation. The inherent challenge then is convincing these kinds of fledgling technologists that “traditional” banks are modernising enough to excite them, while providing a worthy platform for their skills. So when Dutch bank ABN AMRO was facing a huge recruitment drive for the…

Who Studio Republic What Web design, Website development, MODX CMS development, Branding and corporate identity, Graphic design, Charity branding and campaigns, and Advertising Where 10 Charlecote Mews, Winchester, Hampshire, SO23 8SR Web studiorepublic.com Key Clients Ismybillfair.com The Green Party Ordnance Survey Chartered Institution of Water and Environmental Management (CIWEM) Sailors’ Society IN 2003, STUDIO REPUBLIC, LIKE MANY DESIGN AGENCIES, BEGAN IN A SPARE ROOM. Chris Todhunter, the Digital Director and the Founder of Studio Republic, originally created the business as a digital freelance resource for local agencies. However, Chris’s journey to that point wasn’t all plain sailing. Dropping out of his Software Engineering Management course at Bournemouth University, Chris spent his spare time touring as a drummer with various bands, playing gigs across the country — and even having the…

Screens on mobile and desktop are two dimensional. They have x and y axes. A first step in 3D interactions is to translate the 2D co-ordinates of a touch or mouse position, into 3D space. This is done by casting a ray or line and capturing where it intersects with objects. Three. js has a ‘raycaster’ class that handles this and can return the array of objects intersected. You can analyse the intersected objects and react to the event. This can be triggered on clicks, touches, mouse movements or other events. Dragging, which is a combination of clicking and moving a finger or mouse, is common as well. Also using accelerometer or gyroscope data makes for exciting interactions as well.…

Progressive Web Apps (PWAs) are part of the current DNA for the mobile, web and desktop app space. Any website can now be an installable offline-capable app thanks to new technologies and APIs. They even offer similar experiences to native apps once installed. To provide the best possible experience, designers need to make an effort to provide a fast and mobile-optimised user experience, helping the user to navigate, install and use their apps. With app store distribution support now available, web design professionals need to pay close attention to every single detail when they offer a web-based progressive app. Here’s how… 1 Understand the reach of your PWA To create the best possible experience, testing your user interface in all possible user platforms is essential. While a PWA will work…

“When done, enter http://localhost:3000/into a browser of choice to look at the scaffolding created by the project generator” Express.JS prides itself in being ‘unopinionated’ - ie the framework allows the developer to mix and match in terms of architectures, templating and markup engines. Sadly, great power comes with great responsibility. The Express developer team seeks to soften the blow by introducing a project generator. It comes to your workstation in the form of an NPM package, and will aid our experiments with the following framework: The generator also contains dozens of project options – the figure accompanying this step shows the full help output. For simplicity’s sake, we will limit ourselves to a project based on the default settings. Kick off its generation process with: Warning: the default view engine…

Testing Express.JS-based applications is easy. Problems occur once you want the page to become accessible to third parties – due to it being generated by the Node.JS environment, there is no way to get a static image fit for FTP deployment to web hosting services. In theory, there is nothing against using a Raspberry Pi, an OrangePi, a dedicated server or a virtual machine rented from a cloud service or a web host provider that offers virtual hosting. However, renting a full virtual machine can burden you with the responsibilities of keeping the execution environment and operating system up to date. If this task is not to your taste, a Platform-as-a-Service provider can be a more attractive (albeit, in most cases, pretty pricey) choice. Many developers consider Heroku, with its…

Cloud service providers — be it Amazon with AWS, Microsoft with Azure or Google with its Web Services — tend to drag their feet when it comes to offering updates of Node. js. If past performance is an indicator, delays of up to one year are to be expected until the features discussed in this tutorial will become available. One way around the problem involves Babel (babeljs.io). It takes all kinds of JavaScript code, and outputs a version compatible with older versions. Some hackers — a hat tip to hackernoon.com/so-i-stillcant-run-my-node-js-10-code-on-aws-lambda-or-cani-d2a9e8b1eeec is in order — even go as far as to package Node.js via Babel, leading to a ‘portable’ version of the entire interpreter.…

Administrators loathe Node. js for the often frantic pace of development — hardly a month goes by without a new version of Node. A two-tier release schedule mitigates the problem: from time to time, a current version receives the LTS designation. From that moment onward, no new features will be added during an 18-month time frame. Maintenance, instead, limits itself to performing non-breaking changes. During the initial announcement of Node.js LTS releases, only “bug fixes for stability, security updates, possible npm updates, documentation updates and certain performance improvements that can be demonstrated to not break existing applications” were permitted — so far, that rule has stood the test of time.…

“More and more it’s becoming important to design interactive, animated content as a framework rather than a linear experience” Animate for the web This issue’s contributors include award-winning interactive designer Chris Gannon; Web Designer regular Richard Mattka, who shows you how to get started with GreenSock; and Dan Heywood, frontend developer and designer at Supremo, who offers inspiration and seven to follow on Twitter. Page 42 Maximiliano Firtman Max is the author of High Performance Mobile Web, a conference speaker and trainer with a focus on mobile apps, PWAs and web performance. This issue he reveals his essential tips to get the best from your mobile designs. Page 66 Mark Shufflebottom Mark is a professor of Interaction Design. In this issue Mark is looking at variable fonts in CSS and…

Goodshare.js bit.ly/2MKGLvt This a Vue.js component that allows for social sharing. Includes a simple install, extensive documentation, is SEOfriendly and has UI customisation options. Supports all the major social networks including Facebook, Twitter and tumblr. Plus, a host of lesser-known options. Can’t see what you want? Ask and the authors will try to add. F2 antv.gitbook.io/f2 F2 is a flexible, elegant and interactive charting library with a focus on mobile. It is HTML Canvas-based and compatible with Node.js, Weex and React Native. Evergreen evergreen.surge.sh This is a React UI framework that describes itself as a Design system for the web. It offers out-of-the-box functionality and full customisation. lazyestload.js https://bit.ly/2LRXZBL Images can be bandwidth heavy. This library only loads images when they come into the viewport. If the user scrolls past…

GRID grid.malven.co Grid layouts are big news and are the ideal way to create super-flexible and unique layouts. Any thing that helps to make the process easier is always worth a look. GRID is a simple, straightforward interactive cheat sheet. Pick the layout you want and the code gets copied to your clipboard ready to use. Vivid.js webkul.github.io/vivid Need some neat SVG icons that are ready to go? Vivid provides an easily customisable set of over 100 icons that look good anywhere. Bit bitsrc.io Bit is cloud component hosting. Hosting components in the cloud means teams can discover and organise the components of their projects. worker-dom bit.ly/2CoukRB In short worker-dom is “The same DOM API and Frameworks you know, but in a Web Worker”. Make sure you pay a visit…

1. Initiate HTML document The first step is to initiate the HTML document structure. This consists of the HTML document that contains two sections – head and body. While the head is used to contain references to the external CSS and JavaScript resources, it is the body section that will be used in step 2 for storing the page content elements. 2. HTML content The HTML content consists of a sample navigation and an article container used as the pop-up box. Links will activate their associated pop-up box by using their 'href' attribute to reference the box’s ID. A 'data-popup' attribute is applied to any container element that is to be used as a pop-up box. 3. CSS initiation Create a new file called 'styles.css'. The first step of the…

“Shoe brand DC’s slick catalogue for its BlackOps collection marries video clip backgrounds with the chance to win an LA trip” Designer: Ekkomedia ekkomedia.com Colours Tools Laravel (PHP MVC), Polyfill IO, Vue.js, Instagram API Fonts Helvetica Neue font is employed almost exclusively by the site, using the font-weight property to apply multiple typefaces. Helvetica Neue is also used in its Extended family form, appearing in both Thin and Black weightings.…

ismybillfair.com Each client requires their own targeted set of services. For ismybillfair, they needed innovation. Ismybillfair came to Studio Republic with a new business that was set to disrupt the price comparison market. There is significant price disparity for UK customers of utility and service providers, from energy to broadband. The founders saw this unfairness and wanted to challenge it, supporting people to remain with their providers whilst still getting the fairest price. The task was to brand the business (which only had a working title at the time) and build the UK’s first price transparency site offering users the opportunity to stay with their providers for a better deal. To achieve the client’s goals, the team needed to innovate and utilise new technologies as well as create a highly…

ordnancesurvey.co.uk/blog/tag/os-photofit Studio Republic been working with Ordnance Survey (OS) for a number of years now, creating engaging campaigns and related software that has always inspired large numbers of people to get involved. Ordnance Survey had an idea that needed to be delivered within a very tight timeframe. The project was Photofit, which aimed to encourage customers to engage more with the OS brand. Together, the Studio and OS developed a national online competition that enabled members of the public to upload their own photographs using the bespoke GeoTagging service we designed and developed specifically for them, as well as allowing users to vote for their favourite shot. The GeoTagging functionality enabled the winners from each region to be selected with ease, with the winning photographs being featured on the iconic…

Menu overlay The menu reveals an overlay with a glowing cloud that follows the user’s mouse around as they navigate the options on the menu panel. The quick access menu The content for the page is available from this quick access menu, with each section being displayed as a point to orient the user. Animated hint The user is prompted to scroll down with the animated mouse icon on the screen. The point inside the mouse moves up and down to show the page has scrolling. Background slide show The image in the background is a transforming slideshow, with animated text for each slide explaining the breaks. Context information Information about the vacation breaks are located directly on the screen to enable the user to see options that are available.…

JavaScript is everywhere these days and it’s a skillset that most (if not all) front-end developers should at least know the basics of. As we all know, JavaScript was given a significant update from ES5 to ES6. Throughout this tutorial we used the ES6 syntax for the little bit of JavaScript we wrote. So in case you haven’t learned the basics of ES6, then what we did might have been a bit confusing to you, so let’s clear a few things up. Arrow functions are a more concise syntax for writing our functions and happen to be the most used feature of ES6. They are one-line mini anonymous functions and help keep our code tidy. One of the features of arrow functions is when you only have one parameter to…

Android Studio  https://bit.ly/2NxuSFK It includes the SDK that let web designers emulate PWAs on Android devices and Chromebooks (additional plugin required). PWA Builder  https://bit.ly/2wwx34V It helps convert a website into a PWA, and it creates packages for Google Play, App Store and Microsoft Store. WebHint  https://webhint.io A tool that will help with PWA’s accessibility, speed and security checking your code for best practices and common errors. Web App Manifest Generator  https://bit.ly/2eYETiN It will create the Manifest file and effortlessly take one icon and create all the necessary versions for Android and Windows.…

“Adding a new endpoint to an application is accomplished by adding a new worker into the queue” For the sake of simplicity, let us agree that a web application is usually made up of a sequence of entry points. Express.JS handles these via the router class – think of it as a repository of methods that get called upon in response to an incoming request (see above). Adding a new endpoint to an application is accomplished by adding a new worker into the queue. Our auto-generated example creates two router types, each of which is raised using the ‘require’ method: In the next step, ‘app.use’ registers the routers and connects them to the request strings. Our code furthermore adds an error handler that gets invoked if a non-existing URL is…

Express.JS’s development cycle is far from smooth: the developers are well-known for frequent API changes requiring rewrites of client code. The switch from 3.x to 4.x was especially painful, which is why the impending release of 5.x might leave quite a few of you feeling uncomfortable. While Express.JS 5.0 brings along a few breaking changes, their impact is more limited. First of all, a set of already-deprecated functions is removed for real – if code still uses them, upgrading to 5.x requires maintenance. Designers of view engines need to check ‘res.render():’ rank growth in regards to view renderers, which has led to some synchronous implementations slipping through. Version 5 of the framework enhances performance by enforcing asynchronous rendering. In addition to that, a set of sundry improvements and changes documented…

“Four recognisable female faces unite for an inspiring endorsement of inner beauty, applying engaging multimedia design techniques” Designer: Louis Ansa louisansa.com Colours Tools GSAP, PixiJS Fonts EF Hawthorn is a font designed by Esselte Letraset and Mike Daines and used here for key headings and <span> paragraphs. The Messina Sans font by Luzi Gantenbein for Luzi Type styles the main story text in Light, Regular and SemiBold varieties.…

1. Document initiation Initiate the page using a description of the document. This consists of the HTML document container, which stores the <head> and <body> sections. While the <head> section is used to reference the required JavaScript and CSS resources, the <body> section will be used in the next step to store the page content. 2. Page content The page content consists of two content containers using the ‘data-expand’ attribute. Each container has a ‘data-control’ to be used as an interaction button, along with a section container. Placing content inside the section container enables easy CSS rules to be created that can show or hide the content. 3. Unique container styles Create a new file called ‘styles.css’. This step uses the unique values applied to the ‘data-box’ attribute of the…

ciwem.org At the end of last year, the Chartered Institution of Water and Environmental Management (CIWEM) approached Studio Republic to pitch for their website redesign, and the agency jumped at the opportunity. Since refocusing their efforts at the end of 2014 to work only with clients that share their values, Studio Republic have wanted to work with an organisation that’s prioritising the environment. Since winning the pitch, Studio Republic have worked very closely with CIWEM, getting to know them and their organisation inside out, in order to pinpoint and understand the issues CIWEM’s website presented to their users as well as revealing opportunities within their business that could be developed or improved. As an international organisation with members in 89 countries and hopes to expand their member numbers, CIWEM required…

To get access to all that each font has to offer, and even to find out where to get hold of variable fonts, you need to access the site v-fonts.com. This is currently the main ‘go to’ resource for variable fonts. Here you will see many fonts that range from fully paid commercial fonts to open source variable fonts that are available to download from github.com. Amstelvar is open source but also has one of the widest selections of variables. You will see that most fonts only have the weight property, but that alone will still save linking to many fonts on Google Fonts. When you have manipulated the font to get the desired results, you can take those settings into your CSS.…

Logo’s placement The brand logo is placed in the top-left corner of the web page – allowing users to return to the menu from any selected page. Menu text Hovering over the menu options triggers movement of the grey line to the location of the menu item as part of the animation effect. Wavy line This line becomes an animated wave pattern that provides a response to the user’s mouse movement interactions with the page. Home return arrow Allows the user to return to the home page of the website. An arrow pointing in this direction is understood to mean ‘go back’. Background image The background image also responds to the user’s mouse interactions, moving in the opposite direction to provide a sense of depth. Technique 1. Document initiation The…

“Keep in mind that the Node.JS integration is not limited to database plug-ins” Being based on Node.JS means that the rich plugin ecosystem is at your command when working on web-based applications. For example, accessing SQL and NoSQL databases – usually an extraordinarily tedious task – can be handled using plugins provided by the database vendors. The actual deployment is as easy as installing the needed NPM module – if your code is to access a Redis database, simply add the following: Of course, in-memory SQLite is also supported: Keep in mind that the Node.JS integration is not limited to database plugins. Adventurous developers could go as far as to include products like Tessel, thereby creating web applications which can also interact with Internet of Things devices. Templating in style…

Node.js bravely enabled JavaScript go to places its creators never intended the language to go. Many well-liked features seen in new ECMAScript revisions started out as features added to Node.js — sadly, the standardised APIs often were incompatible with the ones thought up by the Node.js developer team. Thus, one of the recurring topics of the Node.js world revolves around reconciling differences between ‘web development’ and ‘node development’. For example, the module subsystem of Node.js does not work according to ECMAScript standards. Node.js 10 updates the versions of various core components used in the product, thereby enabling developers to harness speed and security improvements. Furthermore, work on HTTP/2 speeds up delivery of content in bandwidth- and/or latency-constrained scenarios. A change in the native interface will simplify the life of Node.js…

When HTTP was specified, websites were, by and large, simple affairs. Reestablishing a TCP connection for each resource was a rather mimimal overhead when taken in context. As page complexity increased, steps were made to eliminate protocol inefficiencies. This resulted in an upgraded HTTP protocol called HTTP/2, which lets the browser and the server recycle an already-established TCP connection in an attempt to reduce latency and overhead. Further information on HTTP/2’s technical benefits can be found at http2.github.io/ — while GitHub hosts the page, its contents are maintained by the IETF and contains all kinds of valuable information.…

First impressions matter a great deal, as it turns out. Within split seconds, people make snap judgments and form opinions on anything or anyone, and websites are no different. By spending a short time in your website, visitors are able to determine whether to continue browsing further or leave entirely. Consequently, enhancing the visual appeal of landing pages has received significant attention over the past few years. Companies acknowledge the importance of captivating visitors visually, and as such, seek to make their webpages unique and memorable. However, this puts pressure on front-end designers to keep learning new tricks to ensure their web projects not only deliver, but also offer a unique visual appeal. A modern JavaScript library that holds immense potential in meeting this need is Pts.js. The library, written…

Interaction with tons of example projects shared on the demo page https://ptsjs.org/demo reveals a similarity in the flow of logic in their development. As such, it is important to understand this logical flow before creating any project. In essence, only three key steps are involved. First, begin by declaring the Pts library in the global scope by using the ‘Pts.quickStart ()’ function. Pass the background colour and the targeted HTML element where the functionality is anticipated to be developed. This provides flexibility in creating with the library. Second, declare animation variables and add players to the space. This is the aspect that differentiates the different projects through the application of different maths logic. Finally, play the animation and decide whether it should respond to user activity.…