Web Designer 291 (Sampler) by Future PLC

GENERATE CSS GET YOUR TICKET TODAY PAGE 10 SEE INSIDE

Expert tutorials, techniques and inspiration

SPEED UP WITH JAVASCRIPT

Use multi-core CPUs more efficiently

REVEALED: 7 PRO SEO STRATEGIES Expert info to win the race to top spot

the science of UI design

CODE WEB COMPONENTS with STENCIL ADD Water Ripple Effect Transitions

Build a design system Must have tools ESSENTIAL RULES Industry advice

how to ANIMATE FAST, FLEXIBLE CREATE FLUID JS WITH MO.JS BUILDS WITH GRAV BACKGROUNDS

Issue 291

Header

Comment

CSS Grid’s time has come CSS Grid Layout is the layout method we’ve always dreamed of – so let’s use it.

Michelle Barker Front-end developer at Ordoo https://css-irl.info

If you were building a cabinet, you wouldn’t deliberately leave a useful tool out of your toolbox — so why would you do it with CSS Grid?

elatively few of us are actually using CSS Grid in production. Grid is not just a layout method for the future: I would argue that the time is right to start using it in your projects today. Why CSS Grid? It’s the first specification that enables us to define a two-dimensional grid and have complete control over where on the grid items are placed. Unlike building a grid system in Flexbox (or any older layout method), Grid doesn’t require complicated hacks, or headaches with calc() — in fact, building one can be as simple as two lines of code. That’s not to say that we don’t need other layout methods. They all have perfectly valid uses, and Grid isn’t the right tool for every job. It just so happens that we’ve got used to hacking these methods for unintended purposes, bending them to fit our needs when no other option was available. But for many layouts, Grid is quite simply the best tool for the job. If you were building a cabinet, you wouldn’t deliberately leave a useful tool out of your toolbox — so why would you do it with CSS Grid? Rather than importing grid systems like Bootstrap into our projects (with all the overhead those dependencies bring, not to mention their limitations), what better way to build modern layouts than by using a tool that’s intrinsic to the very nature of the web? Jen Simmons coined the term “Intrinsic Web Design” to describe the next evolutionary stage of web layout, the next step beyond responsive design. She envisions an era in which we embrace the web’s intrinsic nature, rather than viewing it as an extension of print design. If we as designers and developers understand the new layout tools at our disposal, we can lead the way in helping to shape a rich new creative era of web design. Grid enables us to build new, imaginative layouts that quite simply aren’t possible in any other way — at least, not without some major restrictions. So why isn’t everyone using it? While all this sounds exciting in principle, I’m willing to acknowledge people’s valid concerns about jumping into Grid layout. High up on the list is browser support. While support is very good across modern browsers, only Grid’s older syntax is supported in IE10 and IE11. If you need to support these browsers, there’s no escaping the fact that you need to do a little bit of extra work around getting your layouts to play nicely. My personal preference is to treat those browsers as if they don’t support Grid at all, and simply give them a simpler fallback layout using feature queries (@supports), leveraging flexbox when needed. This strategy need not be time-consuming: if you find yourself spending more time on fallbacks than on the primary layout, you’re probably doing it wrong. Unfortunately, there is still a widespread misconception that websites need to look the same in all browsers. It shouldn’t be left to developers alone to bust those myths. Designers and project managers also need to step up and advocate for providing simpler layouts for older browsers, ensuring that clients understand the majority of users will get a richer layout experience, while for those using older browsers the experience will still be very much usable, albeit without the finesse and flourish that modern browsers will receive. Another concern of designers and developers reluctant to jump into CSS Grid is the training time. With any new technology, there is always a learning curve, but I would argue that Grid is fairly intuitive, and it feels like the more natural way to build many layouts once you have a handle on the basics. It’s true there are a lot of properties to remember — but that’s what documentation is for. I would argue that time spent learning new web standards is time better spent than learning fancy new frameworks. CSS Grid is here to stay, and isn’t going anywhere any time soon!

comment________________________________________________9

Aaron McGuire

16l�� lightbox

https://aaronmcguire.co

LightBox Designer:

Aaron McGuire https://aaronmcguire.co

Californianbased freelance interactive developer serves up a dynamic story of his skills with this brand new online home.

Colours

#8DECC1

#502455

#F26764

#3F657D

Tools jQuery, CreateJS, GSAP

Fonts

Esteban font by AngĂŠlica DĂaz, available via Google Fonts, is used for subheadings and paragraph text.

lightbox__________________________________________________17

Muscle Memories With iconic motoring brand Dodge keen to put web audiences behind the wheels of its famous muscle cars, how would agency Grupo W rise to the challenge and Unleash the Beast?

n automotive terms, the definition of the “muscle car” is a uniquely transatlantic phenomenon. You don’t need to be a devout petrol head to appreciate the typically American, and not wholly undesirable, traits. Muscle cars are bulging, hulking lumps of raw machinery — a mixture of untameable speed and impossible steering. Brash maybe, but also tons of fun. Most of us on these shores, of course, will only really know this allure from iconic appearances in film and TV shows. From Bullitt’s Ford Mustang GT Fastback, to the 1977 Pontiac Firebird Trans Am that Burt Reynolds made famous in Smokey and the Bandit. Such classic pop culture references also include The Dukes of Hazzard, which featured an orange 1969 Dodge Charger known as The General Lee. Very much the star, this car particularly would have been an 80’s marketing dream for makers Dodge, who were founded in 1900 and later acquired by the Chrysler Corporation. The brand lives on, and promotes contemporary versions of its Charger and Challenger models for a new generation of drivers.

30d��design diary

Miguel Calderon Concept & Art Direction

Raul Uranga Direction & Development

PROJECT DETAILS

Rosy del Rio Definition & Concept

Ivan Oñate

PROJECT NAME

Muscle Cars “Unleash the Beast”

Design & Art Direction

Efrock Martinez Design & Art Direction

PROJECT URL

dodge.com.mx/muscle

Sebastian Mariscal Motion Graphics

Agency

Grupo W

Paul 3D Art

Agency URL

grupow.com

Jose Luis Esquivel Video Post Production

instagram.com/grupow

Edgar Espero Music & Audio

PROJECT STATS PROJECT DURATION

4 months NO. OF PEOPLE INVOLVED

Heidi Lopez Development

Carlos Seca Development

Jose Alberto Córdoba Development

Jose Luis Sandoval Development

Claudia Fuentes Copywriter

design diary___________________________________________31

Tutorials

Create rippling background effects Give your backgrounds the attention they deserve, using PixiJS and WebGL shaders to create displaced movement

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner 56t��tutorial

Tutorials

s web designers, we are charged with making products look their best for an online context, and sometimes it’s not possible to apply any special effects to the products as they will not be ‘on brand’. In cases like these, a little creativity is called for. Instead of focusing on the product, attention should instead be turned to how it is displayed on the screen, and sometimes subtle effects in the background will help a product in the foreground really stand out. In this tutorial, we are going to do exactly that, and create a shimmering, distorted ripple effect to the background image. The image will not be displayed as a regular image — it will be on the Canvas element instead, using PixiJS. Pixi has been around for some time now, and it’s currently moving to version 5. It provides a great way to create interactive and dynamic visuals. In this case, it has a displacement effect built right into it, so feeding in a background and an image to use as the displacement will give us the shimmering ripple effect that we are trying to achieve. The tutorial will also make use of taking an SVG blur effect to make a dynamic drop shadow for just the opaque parts of a PNG image, to give the shoe a drop shadow right in the browser.

1. Getting off the mark Open the ‘start’ folder in code editor, then open ‘index.html’. The project first adds various code elements to the head section. The pixi library is added, along with a CSS reset and some of the CSS needed. The typeface is added from Google Fonts. <script src="js/pixi.min.js"></script> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/design. css"> <link href="https://fonts.googleapis.com/ css?family= Raleway:400,700&display=swap" rel="stylesheet">

</ul> </div> </nav>

3. Distortion section The distort section will add a canvas into this later through JavaScript so that the background can be distorted. The mask is a transparent SVG, as the canvas can’t have corner borders or clipping mask applied. The shoe will be the main image above the background, and there is some text. <div id="distort"> <div id="mask"><img src="img/mask svg" alt="Mask Shape"></div> <div id="shoe" class="bounceIn"><img src="img/shoe.png" class="shadowed" alt="Running Shoes from a popular brand"></div> <div id="intro" class="fadeInLeftBig"> <h1>Nike<br>LunaCharge</h1>< div> </div>

in="SourceGraphic" /> </feMerge> </filter> </svg>

5. More content Underneath the main content on the page that is being featured, a simple three column grid will be placed on the screen, with the first column containing details of the product, and an ‘add to cart’ button which will be styled up through CSS. <div class="grid"> <div class="col3 md3"> <h3>Product Details</h3> <p><strong> Color:</strong> Black <br><strong> Material:< strong> Mesh/ Synthetic <br><strong> Sole:< strong> Air / Rubber</p> <div class="button">ADD TO CART</div> </div>

2. Bulking the body

4. Drop shadow hack

6. Middle column

The project needs some content, so the next steps will add the code into the ‘body’ section of the page. The ‘nav’ section will create a navigation bar fixed to the top of the page. A logo will be displayed on the left and the menu on the right.

Transparent PNG images can’t have specific drop shadows added through the CSS box blur. This hack creates a blur through SVG, which will be applied to the transparent image of the shoe through CSS.

The next column of content would just have a product description, so this has just some simple placeholder text in here for now. This allows the page to be seen as it would if this had a more detailed description of the materials being used in the product.

<nav> <div id="mainLogo"> <img src="img/logo.svg" alt="Your Shoe Logo"> </div> <div class="right"> <ul> <li><a href="about.html">About< a></li> <li><a href="shoes.html">Shoes< a></li> <li><a href="contact html">Contact</a></li>

<div class="col3 md3"> <h3>Unique Materials</h3> <p>Shared value capacity building radical activate youth revolutionary, NGO rubric collaborative

CSS Reset

At the start, a CSS reset was added. All this does is remove all browser formatting of elements so that there is more chance of consistent display across all browsers.

tutorial__________________________________________________ 57

Tutorials

Animate with the mo.js library In this tutorial we introduce the basics of working with mo.js and show how to create custom blast and bubble animations

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner 62t��tutorial

Tutorials

f you have been following the web design scene for a while now, chances are that you have come across — or perhaps interacted with — a wide array of animation techniques and libraries. Core technologies such as CSS, HTML5 and JavaScript are becoming even more powerful, and browser support is improving with time. The implication; more sophisticated web animations can be supported across devices. Web animation, as it appears, is here to stay. However, a shortcoming with most popular animation techniques is that they are gravitated towards animating conventional UI/UX elements such as slideshows, tabbed buttons and drop-down menus. As a result, using them can eventually make your site too familiar and non-exciting. Enter mo.js. A unique motion graphics JavaScript library that not only facilitates full-screen page animation loaders, but also click-to-animate micro-interactions, and tons of shape manipulations. Using the library helps to animate the not-so-ordinary site elements by utilizing its built-in components such as html, shape, swirl, burst and stagger. The library is very easy to use, fast, retina ready, modular and open source. In this tutorial, the basics of working with mo.js are introduced and two techniques demonstrated; blast and bubble.

1. Get started Begin by creating a folder, mo.js, on your desktop to store the tutorial files. Create three additional folders within it: css to store the styling files, img for images and js for the JavaScript files. HTML files will be stored in the root folder.

2. Create page structure Open your code editor and create an index.html document to contain mark up for the main web page. Begin by creating the basic structure and give a suitable title to the page. <! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Blast Technique < title> </head> <body> </body> </html>

<p> Mo.js Animation </p> </div> </body>

4. Link the CSS Open your code editor and create styles.css file inside the css folder. Create a link to this file in your html document by adding this code in the head section, <link rel=”stylesheet” href =”css/styles.css” >. Since no styles have been added, the page renders as illustrated in step 3. Alternatively, since the styling is minimal, you can opt to use inline styling by combining the HTML and CSS.

5. Style the background Next, we style the background by adding a background image. We have used the free scenic landscape background by Nikolai Ultang from Pexels. You can download it from www.pexels.com/photo/ scenic-view-of-landscape-against-sky-325139. Save this (or your own image) inside the img folder. Render the page to show changes to the background. body, html { background-image: url (bg.jpg); background-size: cover; padding: 0; margin: 0; width: 100%; height: 100%; overflow: hidden; }

3. Structuring the page

6. Style the text

The tutorial is divided into two parts; the first demonstrates the blast technique, whereas the second illustrates the bubble concept. As a result, we prepare two HTML files, one for each technique. To kick-start the blast technique, create a div section to contain the page title. Render the page in your browser where you should observe un-styled text at the top-left corner.

The text is then styled to render at the centre of the page, as it currently appears at the top left corner. Note that to centralise the text, we select an absolute position and set its exact positioning using the top, left and right margins. The text is also transformed using the text-transform property. The text-align property is also set to centre.

.text { font-family: Century Gothic, sans-serif; color: #fff;

text-transform: uppercase; font-size: 50px; font-weight: bolder; position: absolute; top:50px; left: 25%; right: 30%; text-align: center; }

7. Install mo.js As with other libraries, mo.js is installed through multiple options. The simplest approach, which we employ, is accessing it directly from a CDN server. Add the following code in the body section. <script src= ‘//cdn.jsdelivr.net mojs/0.265.6/mo.min.js’></script>

In case you are developing offline, the library can be downloaded directly from GitHub: github.com/mojs/ mojs and installed by using the Bower or NPM packages by using the appropriate commands.

The simplicity of building with mo.js

Building with mo.js is relatively straightforward as its in-built elements follow similar structures in development. For instance, building two different blast options is simply done by changing parameters, and without adding further code.

tutorial__________________________________________________63

web workshop Slideshow with wow

Create a water ripple effect

Most people are familiar with slideshows on web pages, so if you decide to use these in your designs, look for a way to delight and wow your users with something that they are not expecting. Hotel Particulier do that with the water ripple transition effect between the slides, and with the user being able to drag back and forth to see this.

Inspired by www.hotel-particulier-montmartre.com/en Water ripple transition

Call to action

The slideshow on the homepage of the site has a wonderful eye catching effect, with a rippling displacement effect as it transitions from one slide to another.

Making the call to action a stand out part of the page ensures that users can easily find a way to book at the hotel.

Help your users Just in case the user doesn’t opt to look at content from the slideshow, the instruction to scroll lets them know that more information is available.

User controlled transition If the user clicks on the image and drags left or right, they can control the transition and ripple effect as it changes between images.

Traditional navigation The navigation can be moved by using the buttons in the corner, and there is a timer here along with reference to the current slide.

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner 70t��tutorial

Tutorials

Build a formatting component using Stencil Use Stencil’s useful build tooling to create a web component that can be used across multiple projects

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner 72t��tutorial

84f��feature

9000

SEO Strategies you should implement today

Stay ahead of the competition with your SEO and get fast digital growth

Search, as we understand it now, is becoming less and less common. The way users interact with Google is moving more and more into discovery, as Google pushes information to users, rather than waiting for them to pull it

Hannah Thorpe https://found.co.uk

feature__________________________________________________85