Tag: World

02 Sep

A Deep Dive Into The Wonderful World Of SVG Displacement Filtering

by TBSCategories: News

Even today, the magic, wicked realm of SVG Filter Effects is largely uncharted territory. The art of SVG filtering is still surrounded by an aura of alchemy: you have to bravely dive into a dark world of inconsistencies, your dedication will repeatedly be tested by buggy implementations and nerve-wracking side effects, and you must learn complicated incantations. But, once mastered, it gives you unprecedented power — a means to switch the total appearance of elements and websites by the snap of a finger.

In this article, we’ll be diving into one of the most spectacular filter effects: the SVG feDisplacementMap filter primitive. In order to make it all easier to digest, I’ve divided the article into three parts in which we’ll be exploring:

  1. how the feDisplacementMap works, i.e. how to apply it and how to control its output in a predictable manner;
  2. we’ll then explore methods to create fancy displacement maps in SVG (slightly more interesting as we will start playing with JavaScript);
  3. and finally, we’ll take a look at some of the methods to animate the filter and create dramatic visual effects.

As this will be a rather long read, the impatient ones may want to check out the demos we’re going to encounter before continuing. All the demos in this article have been optimized for the latest versions of the three major browser engines.

To get the most out of this article, you should already have a basic understanding of SVG filters. If you are a filter novice, you may want to take a short detour to Sara Soueidan’s introduction or head over on to my humble take on the subject first.

Be warned though: not applied properly, SVG Filters can hurt the performance of your site drastically. Always test extensively if you roll out one of the techniques described here.

A Short Primer On Displacement Filtering

So what’s a displacement filter? A displacement operation can visually distort any graphic it is applied to. You can create warp effects, twirls or ripples like you would do with a Photoshop distortion filter. Displacement filtering is an important tool in VFX, and most likely you already saw some displacement mapping operations on film and TV, created with a VFX tool like After Effects or GiantRed.

To achieve a distortion effect the filter needs two images as input:

  • The actual source graphic should be distorted (from now on just “source”);
  • The “displacement map” (from now on just “map”). This map contains information on how we want the source to be distorted.

Most of the time, a map will be some Bitmap image, but in the next part, I will demonstrate how to use SVG images or fragments as an input.

Let’s see what happens when we use an image of Barcelona’s famous La Sagrada Familia to “distort” the Mona Lisa:

  1. The first filter primitive is feImage which holds a reference to the map (there are other filter primitives that can be used as an input. You will find several fascinating demos out there where feTurbulence is used as displacement map, but in this article, we will mostly focus on feImage).
  2. This feImage is then fed into a feDisplacementMap primitive where the actual distortion happens:
    • A positive or negative scale attribute defines the strength of the distortion.
    • The purpose of xChannelSelector and yChannelSelector is to determine which of the input image’s four-color channels (red, green, blue, alpha) should be applied to which axis for distortion. Both attributes default to the map’s alpha channel (which means if you’re using a map without alpha channels and omit these attributes, you’ll see nothing more than a diagonal shift of the source).

We then apply the filter with CSS:

.filtered {   filter: url(#displacement-filter); }

It may be fun to play around distorting images this way but it is unpredictable how the result will look and most of the time it’s not aesthetically pleasing at all. Is there a way to get pixel-perfect control over the output? Here’s what the spec says:

This filter primitive uses the pixels values from the image from in2 to spatially displace the image from in. This is the transformation to be performed:

P'(x,y) ← P( x + scale (XC(x,y) – .5), y + scale (YC(x,y) – .5))

The displacement map, in2, defines the inverse of the mapping performed.

OK, looks complicated at a first glance, but it is actually pretty easy to understand when broken down:

  • P'(x,y) stands for the coordinates of a pixel in the result;
  • X and Y are the coordinates of this pixel in the unfiltered source;
  • XC and YC are the normalized (1/255) RGB color values of the given pixel in the map;
  • Finally, the result of the operation must be inverted (which basically means every + in the formula must be replaced by a -).

We will run some simple experiments to verify our formula by feeding primitive bitmaps into a filter, consisting of only one single color. Let’s say the map is filled with rgb(51, 51, 51), how would we expect the coordinates of a source pixel at x=100 / y=100 to be transformed when fed into a displacement primitive with a scale value of 100?

X: 100 – 100 (51/255 – .5) = 130

Y: 100 – 100 (51/255 – .5) = 130

To scale an image equally in all directions, the color values must gradually decline from a maximum at one edge to a minimum at the opposite edge. We will use red for X and blue for Y from now on, but in the end, it doesn’t matter which color you chose for x- and yChannelSelector.

  1. In your favorite Image editor, open a new document;
  2. Set the background color of the document to black;
  3. Create a new layer and fill it with a left to right gradient from rgb(255, 0, 0) to rgba(255, 0, 0, 0);
  4. Add a second layer and add a top to bottom gradient from rgb (0, 0, 255) to rgba(0, 0, 255, 0);
  5. Set the blending mode for this layer to screen.

Et voilà, you’ve built an absolute map! This map will serve as a solid foundation for all kinds of image distortions:

  • By applying Photoshop-like distortion filters to this map, we are able to use these effects in CSS filters!
  • We can control the scaling of the x- and y-axis independently by altering the transparency of the blue or red gradient.
  • It is possible to “mask” parts of the map with a “neutral” color (rgb(127, 0 ,127) or #7F007F) to prevent the corresponding parts in the image from displacing.

The Problem With Jagged Edges

You may have noticed the pixelated edges that sometimes appear in the output image. Especially source material with high contrast, e.g. typography or vector artwork, is prone to this effect.

This is caused by several reasons:

  • The filter will take the source image as a bitmap:
    If there exist antialiased edges in the source, the filter will not “re-initialize” them after displacing the source. Any pixel will be transformed to its new location, that’s it.
  • Rounding errors:
    Maybe a pixel from 100,100 must be shifted to 83.276, 124.217. The filter must somehow map these coordinates to non-decimal pixel values.
  • Gaps after displacement:
    Maybe two neighboring pixels, say at coordinates x1:100, x2:101 are shifted to different locations, maybe x1:207.4, x2: 211.3. How will the filter fill the space in between? Hint: not at all. The spec clearly states:

“Sometimes filter primitives result in undefined pixels. For example, filter primitive feOffset can shift an image down and to the right, leaving undefined pixels at the top and left. In these cases, the undefined pixels are set to transparent black.”

— Filter Effects Module Level 1, W3C

My weapon of choice to fix this issue is to add a slight blur, then increase the contrast with a feConvolveMatrix. Not perfect, but good enough for most situations. Here’s a demo on CodePen:

  1. Insert a feImage primitive with a reference to the absolutemap;
  2. Create the “magnifying glass”, an SVG containing a circle filled with a radial gradient, starting at rgba(127, 0, 127, 0) and ending at rgba(127, 0, 127, 1);
  3. Insert a second feImage with a reference to the “magnifying glass”;
  4. Merge both images into an feMerge primitive and make the result the feDisplacementMap’s in2. As you may have noticed we’re using a negative scale factor here to make sure the image will be scaled down outside and is displayed at its normal size inside the “magnifying glass”;
  5. Add some JavaScript so that the x and y attributes of the feImage referencing the “magnifying glass” match the mouse position.

Generating Arbitrary Maps With Blurred Paths

A totally different way to build an SVG displacement map is by making use of extremely thick blurred bezier paths instead of gradients. Here’s a little app that lets you change the bezier anchor points in a map created this way.

It’s possible to create some pretty rad maps this way, but you should keep in mind that blurring has an impact on rendering performance. Firefox even has a threshold of 100px on how much blurring is allowed.

Animation

By now we learned everything about the main principles behind displacement filtering and how to create displacement maps in SVG. We are ready for the fun part: how to set everything into motion.

SVG filters can be animated and transitioned. A big problem is the fact that filter values referencing a URL will not be interpolated, but swapped out immediately without any transition in-between, a behavior that is in line with the spec. Can be ok in some situations, but boring most of the time. We want animated twirls, ripples, warps, and morphs!

When thinking of animated maps, the first thing that comes to mind is an animated gif or WebP. Well, animated images will work in every browser somehow. But performance varies greatly from quite bad to extremely bad. And then there are platform-related limitations: e. g. Blink is not able to apply this animated displacement filter to elements that contain other animated elements. And we didn’t talk about file size yet. Instead we will focus on the two most reliable animation techniques IMHO: SMIL (yes, SMIL still is a thing these days) and JavaScript.

A filter will usually be constructed from a variety of different primitives and every attribute that was added to a node, like x, y, width, height or scale can be animated with SMIL.

A Simple Glitch Effect

Here’s a very simple example: making use of an animated feFlood primitive to create a basic glitch effect:

This effect can be leveraged even more by throwing masks, blurs, and some colors into the mix. Here’s a pimped-up version of the effect using the same techniques, but in a more advanced way.

You may have noticed that depending on your browser and CPU, the performance of these demos can vary drastically. It’s a disappointing fact that SVG Filters are still not optimized for performance. Your GPU will accelerate some simple primitives (e. g. color operations), but when you build a compound filter chaining and merging many primitives you will quickly find framerates dropping and fans going up — especially in WebKit and Firefox. Browser vendors have a lot of topics on their to-do lists and SVG Filter Effects don’t have the highest priority there, especially as they still are not found that often out in the wild.

This doesn’t mean that you can’t use animated SVG Filters now, but you should apply them in a responsible way: preferably limit the dimensions of the animated paint area to the smallest possible rectangle, limit the number of iterations to the minimum, be careful with blurs and blending operations and test test test on many browsers and devices.

A good use case for animated filter effects are small, locally constrained animations applied to UI elements. Below is a demonstration of how the animated feImage effect from above can be used to spice up a rather boring progress bar:

A Glitch Transition Between Elements

  • Create 2 different SVGs for each channel in our map. For each color create a grid of rectangles with randomly varying color intensity.
  • Create 2 different feImage primitives. URL-encode each SVG, then put it into the href-attribute of each feImage.
  • Add SMIL animations for width, height, and y attributes.
  • Insert a feBlend and blend both feImages into a single output.
  • Add some colored feDropShadows for a cool split-color effect.
  • Blend everything, then feed it into a feDisplacementmap.
  • Animate the scale attribute with SMIL.
  • Feel free to experiment by changing forms (e. g. use circles instead of rects), applying different timings, adding blur effects, and more.

Animating The Map Itself

So far we have learned that animating filter attributes with SMIL can help us to achieve really cool visual effects. On the other hand, we already saw how SVG fragments can be used as a displacement map. As SVGs are animatable with JavaScript, SMIL and CSS, it would seem obvious that we can apply animations directly to an SVG map right?

Unfortunately, SMIL and CSS animations in SVG images used as input for feImage will not run when the SVG or fragment is URL encoded. We will need to write some JavaScript for a reliable solution and take into account that two different approaches for Webkit and Blink/Quantum browsers are necessary. In a first step, let’s see how the “ideal” way of animating a map will look:

  • Create the SVG fragment containing your map;
  • Reference it from the feImage that controls your feDisplacementMap’s in2;
  • Feel free to animate everything in your fragment with JavaScript as you like. Roll your own script or use your favorite library.

“This sounds too easy. Where’s the catch?” Of course, you are right. The method described above is the ideal path, the way things should work but, here’s a strange matter of fact: It will not work anywhere but Webkit. In order for our animation to run in Blink and Firefox, we must implement a rather hacky solution and you won’t like it:

  • Create the SVG fragment containing your map.
  • In every frame of your animation, change all the values of every animated attribute.
  • In every frame of your animation create a new URL encoded string containing a “snapshot” of the fragment and write it into the feImages href attribute.

You’re probably thinking: “This is ugly! I don’t like it and you are a despicable person!”. I feel your pain. The front end is a hostile habitat and sometimes we must do abhorrent things to survive (fun fact: the “ugly” method performs better in Blink than the “pure” method in Webkit will).

Let’s Rock!

Let’s solve a real-world problem with this approach: here’s what happens to “The Rock” when we apply these two simple displacement maps:

2. Using Animejs’ Grid Animation

Animejs’ staggering and “grid” properties can help you create really cool typographic effects. This effect was created by animating a grid of circles:

3. A “Waving Flag” Menu

An unconventional way of swapping a second-level submenu. The fade-in effect is achieved by moving a striped map horizontally:

Please note that the demos shown above are highly experimental and mainly intended to demonstrate the concept of animated displacement maps. If you want to use any of these techniques in a live project, always take my earlier recommendations to heart. And forgive me for not going into detail on every example — it simply would exceed the scope of this article.

Articles on Smashing Magazine — For Web Designers And Developers

02 Sep

A Deep Dive Into The Wonderful World Of SVG Displacement Filtering

by TBSCategories: News

Even today, the magic, wicked realm of SVG Filter Effects is largely uncharted territory. The art of SVG filtering is still surrounded by an aura of alchemy: you have to bravely dive into a dark world of inconsistencies, your dedication will repeatedly be tested by buggy implementations and nerve-wracking side effects, and you must learn complicated incantations. But, once mastered, it gives you unprecedented power — a means to switch the total appearance of elements and websites by the snap of a finger.

In this article, we’ll be diving into one of the most spectacular filter effects: the SVG feDisplacementMap filter primitive. In order to make it all easier to digest, I’ve divided the article into three parts in which we’ll be exploring:

  1. how the feDisplacementMap works, i.e. how to apply it and how to control its output in a predictable manner;
  2. we’ll then explore methods to create fancy displacement maps in SVG (slightly more interesting as we will start playing with JavaScript);
  3. and finally, we’ll take a look at some of the methods to animate the filter and create dramatic visual effects.

As this will be a rather long read, the impatient ones may want to check out the demos we’re going to encounter before continuing. All the demos in this article have been optimized for the latest versions of the three major browser engines.

To get the most out of this article, you should already have a basic understanding of SVG filters. If you are a filter novice, you may want to take a short detour to Sara Soueidan’s introduction or head over on to my humble take on the subject first.

Be warned though: not applied properly, SVG Filters can hurt the performance of your site drastically. Always test extensively if you roll out one of the techniques described here.

A Short Primer On Displacement Filtering

So what’s a displacement filter? A displacement operation can visually distort any graphic it is applied to. You can create warp effects, twirls or ripples like you would do with a Photoshop distortion filter. Displacement filtering is an important tool in VFX, and most likely you already saw some displacement mapping operations on film and TV, created with a VFX tool like After Effects or GiantRed.

To achieve a distortion effect the filter needs two images as input:

  • The actual source graphic should be distorted (from now on just “source”);
  • The “displacement map” (from now on just “map”). This map contains information on how we want the source to be distorted.

Most of the time, a map will be some Bitmap image, but in the next part, I will demonstrate how to use SVG images or fragments as an input.

Let’s see what happens when we use an image of Barcelona’s famous La Sagrada Familia to “distort” the Mona Lisa:

  1. The first filter primitive is feImage which holds a reference to the map (there are other filter primitives that can be used as an input. You will find several fascinating demos out there where feTurbulence is used as displacement map, but in this article, we will mostly focus on feImage).
  2. This feImage is then fed into a feDisplacementMap primitive where the actual distortion happens:
    • A positive or negative scale attribute defines the strength of the distortion.
    • The purpose of xChannelSelector and yChannelSelector is to determine which of the input image’s four-color channels (red, green, blue, alpha) should be applied to which axis for distortion. Both attributes default to the map’s alpha channel (which means if you’re using a map without alpha channels and omit these attributes, you’ll see nothing more than a diagonal shift of the source).

We then apply the filter with CSS:

.filtered {   filter: url(#displacement-filter); }

It may be fun to play around distorting images this way but it is unpredictable how the result will look and most of the time it’s not aesthetically pleasing at all. Is there a way to get pixel-perfect control over the output? Here’s what the spec says:

This filter primitive uses the pixels values from the image from in2 to spatially displace the image from in. This is the transformation to be performed:

P'(x,y) ← P( x + scale (XC(x,y) – .5), y + scale (YC(x,y) – .5))

The displacement map, in2, defines the inverse of the mapping performed.

OK, looks complicated at a first glance, but it is actually pretty easy to understand when broken down:

  • P'(x,y) stands for the coordinates of a pixel in the result;
  • X and Y are the coordinates of this pixel in the unfiltered source;
  • XC and YC are the normalized (1/255) RGB color values of the given pixel in the map;
  • Finally, the result of the operation must be inverted (which basically means every + in the formula must be replaced by a -).

We will run some simple experiments to verify our formula by feeding primitive bitmaps into a filter, consisting of only one single color. Let’s say the map is filled with rgb(51, 51, 51), how would we expect the coordinates of a source pixel at x=100 / y=100 to be transformed when fed into a displacement primitive with a scale value of 100?

X: 100 – 100 (51/255 – .5) = 130

Y: 100 – 100 (51/255 – .5) = 130

To scale an image equally in all directions, the color values must gradually decline from a maximum at one edge to a minimum at the opposite edge. We will use red for X and blue for Y from now on, but in the end, it doesn’t matter which color you chose for x- and yChannelSelector.

  1. In your favorite Image editor, open a new document;
  2. Set the background color of the document to black;
  3. Create a new layer and fill it with a left to right gradient from rgb(255, 0, 0) to rgba(255, 0, 0, 0);
  4. Add a second layer and add a top to bottom gradient from rgb (0, 0, 255) to rgba(0, 0, 255, 0);
  5. Set the blending mode for this layer to screen.

Et voilà, you’ve built an absolute map! This map will serve as a solid foundation for all kinds of image distortions:

  • By applying Photoshop-like distortion filters to this map, we are able to use these effects in CSS filters!
  • We can control the scaling of the x- and y-axis independently by altering the transparency of the blue or red gradient.
  • It is possible to “mask” parts of the map with a “neutral” color (rgb(127, 0 ,127) or #7F007F) to prevent the corresponding parts in the image from displacing.

The Problem With Jagged Edges

You may have noticed the pixelated edges that sometimes appear in the output image. Especially source material with high contrast, e.g. typography or vector artwork, is prone to this effect.

This is caused by several reasons:

  • The filter will take the source image as a bitmap:
    If there exist antialiased edges in the source, the filter will not “re-initialize” them after displacing the source. Any pixel will be transformed to its new location, that’s it.
  • Rounding errors:
    Maybe a pixel from 100,100 must be shifted to 83.276, 124.217. The filter must somehow map these coordinates to non-decimal pixel values.
  • Gaps after displacement:
    Maybe two neighboring pixels, say at coordinates x1:100, x2:101 are shifted to different locations, maybe x1:207.4, x2: 211.3. How will the filter fill the space in between? Hint: not at all. The spec clearly states:

“Sometimes filter primitives result in undefined pixels. For example, filter primitive feOffset can shift an image down and to the right, leaving undefined pixels at the top and left. In these cases, the undefined pixels are set to transparent black.”

— Filter Effects Module Level 1, W3C

My weapon of choice to fix this issue is to add a slight blur, then increase the contrast with a feConvolveMatrix. Not perfect, but good enough for most situations. Here’s a demo on CodePen:

  1. Insert a feImage primitive with a reference to the absolutemap;
  2. Create the “magnifying glass”, an SVG containing a circle filled with a radial gradient, starting at rgba(127, 0, 127, 0) and ending at rgba(127, 0, 127, 1);
  3. Insert a second feImage with a reference to the “magnifying glass”;
  4. Merge both images into an feMerge primitive and make the result the feDisplacementMap’s in2. As you may have noticed we’re using a negative scale factor here to make sure the image will be scaled down outside and is displayed at its normal size inside the “magnifying glass”;
  5. Add some JavaScript so that the x and y attributes of the feImage referencing the “magnifying glass” match the mouse position.

Generating Arbitrary Maps With Blurred Paths

A totally different way to build an SVG displacement map is by making use of extremely thick blurred bezier paths instead of gradients. Here’s a little app that lets you change the bezier anchor points in a map created this way.

It’s possible to create some pretty rad maps this way, but you should keep in mind that blurring has an impact on rendering performance. Firefox even has a threshold of 100px on how much blurring is allowed.

Animation

By now we learned everything about the main principles behind displacement filtering and how to create displacement maps in SVG. We are ready for the fun part: how to set everything into motion.

SVG filters can be animated and transitioned. A big problem is the fact that filter values referencing a URL will not be interpolated, but swapped out immediately without any transition in-between, a behavior that is in line with the spec. Can be ok in some situations, but boring most of the time. We want animated twirls, ripples, warps, and morphs!

When thinking of animated maps, the first thing that comes to mind is an animated gif or WebP. Well, animated images will work in every browser somehow. But performance varies greatly from quite bad to extremely bad. And then there are platform-related limitations: e. g. Blink is not able to apply this animated displacement filter to elements that contain other animated elements. And we didn’t talk about file size yet. Instead we will focus on the two most reliable animation techniques IMHO: SMIL (yes, SMIL still is a thing these days) and JavaScript.

A filter will usually be constructed from a variety of different primitives and every attribute that was added to a node, like x, y, width, height or scale can be animated with SMIL.

A Simple Glitch Effect

Here’s a very simple example: making use of an animated feFlood primitive to create a basic glitch effect:

This effect can be leveraged even more by throwing masks, blurs, and some colors into the mix. Here’s a pimped-up version of the effect using the same techniques, but in a more advanced way.

You may have noticed that depending on your browser and CPU, the performance of these demos can vary drastically. It’s a disappointing fact that SVG Filters are still not optimized for performance. Your GPU will accelerate some simple primitives (e. g. color operations), but when you build a compound filter chaining and merging many primitives you will quickly find framerates dropping and fans going up — especially in WebKit and Firefox. Browser vendors have a lot of topics on their to-do lists and SVG Filter Effects don’t have the highest priority there, especially as they still are not found that often out in the wild.

This doesn’t mean that you can’t use animated SVG Filters now, but you should apply them in a responsible way: preferably limit the dimensions of the animated paint area to the smallest possible rectangle, limit the number of iterations to the minimum, be careful with blurs and blending operations and test test test on many browsers and devices.

A good use case for animated filter effects are small, locally constrained animations applied to UI elements. Below is a demonstration of how the animated feImage effect from above can be used to spice up a rather boring progress bar:

A Glitch Transition Between Elements

  • Create 2 different SVGs for each channel in our map. For each color create a grid of rectangles with randomly varying color intensity.
  • Create 2 different feImage primitives. URL-encode each SVG, then put it into the href-attribute of each feImage.
  • Add SMIL animations for width, height, and y attributes.
  • Insert a feBlend and blend both feImages into a single output.
  • Add some colored feDropShadows for a cool split-color effect.
  • Blend everything, then feed it into a feDisplacementmap.
  • Animate the scale attribute with SMIL.
  • Feel free to experiment by changing forms (e. g. use circles instead of rects), applying different timings, adding blur effects, and more.

Animating The Map Itself

So far we have learned that animating filter attributes with SMIL can help us to achieve really cool visual effects. On the other hand, we already saw how SVG fragments can be used as a displacement map. As SVGs are animatable with JavaScript, SMIL and CSS, it would seem obvious that we can apply animations directly to an SVG map right?

Unfortunately, SMIL and CSS animations in SVG images used as input for feImage will not run when the SVG or fragment is URL encoded. We will need to write some JavaScript for a reliable solution and take into account that two different approaches for Webkit and Blink/Quantum browsers are necessary. In a first step, let’s see how the “ideal” way of animating a map will look:

  • Create the SVG fragment containing your map;
  • Reference it from the feImage that controls your feDisplacementMap’s in2;
  • Feel free to animate everything in your fragment with JavaScript as you like. Roll your own script or use your favorite library.

“This sounds too easy. Where’s the catch?” Of course, you are right. The method described above is the ideal path, the way things should work but, here’s a strange matter of fact: It will not work anywhere but Webkit. In order for our animation to run in Blink and Firefox, we must implement a rather hacky solution and you won’t like it:

  • Create the SVG fragment containing your map.
  • In every frame of your animation, change all the values of every animated attribute.
  • In every frame of your animation create a new URL encoded string containing a “snapshot” of the fragment and write it into the feImages href attribute.

You’re probably thinking: “This is ugly! I don’t like it and you are a despicable person!”. I feel your pain. The front end is a hostile habitat and sometimes we must do abhorrent things to survive (fun fact: the “ugly” method performs better in Blink than the “pure” method in Webkit will).

Let’s Rock!

Let’s solve a real-world problem with this approach: here’s what happens to “The Rock” when we apply these two simple displacement maps:

2. Using Animejs’ Grid Animation

Animejs’ staggering and “grid” properties can help you create really cool typographic effects. This effect was created by animating a grid of circles:

3. A “Waving Flag” Menu

An unconventional way of swapping a second-level submenu. The fade-in effect is achieved by moving a striped map horizontally:

Please note that the demos shown above are highly experimental and mainly intended to demonstrate the concept of animated displacement maps. If you want to use any of these techniques in a live project, always take my earlier recommendations to heart. And forgive me for not going into detail on every example — it simply would exceed the scope of this article.

Articles on Smashing Magazine — For Web Designers And Developers

01 Sep

A Deep Dive Into The Wonderful World Of SVG Displacement Filtering

by TBSCategories: News

Even today, the magic, wicked realm of SVG Filter Effects is largely uncharted territory. The art of SVG filtering is still surrounded by an aura of alchemy: you have to bravely dive into a dark world of inconsistencies, your dedication will repeatedly be tested by buggy implementations and nerve-wracking side effects, and you must learn complicated incantations. But, once mastered, it gives you unprecedented power — a means to switch the total appearance of elements and websites by the snap of a finger.

In this article, we’ll be diving into one of the most spectacular filter effects: the SVG feDisplacementMap filter primitive. In order to make it all easier to digest, I’ve divided the article into three parts in which we’ll be exploring:

  1. how the feDisplacementMap works, i.e. how to apply it and how to control its output in a predictable manner;
  2. we’ll then explore methods to create fancy displacement maps in SVG (slightly more interesting as we will start playing with JavaScript);
  3. and finally, we’ll take a look at some of the methods to animate the filter and create dramatic visual effects.

As this will be a rather long read, the impatient ones may want to check out the demos we’re going to encounter before continuing. All the demos in this article have been optimized for the latest versions of the three major browser engines.

To get the most out of this article, you should already have a basic understanding of SVG filters. If you are a filter novice, you may want to take a short detour to Sara Soueidan’s introduction or head over on to my humble take on the subject first.

Be warned though: not applied properly, SVG Filters can hurt the performance of your site drastically. Always test extensively if you roll out one of the techniques described here.

A Short Primer On Displacement Filtering

So what’s a displacement filter? A displacement operation can visually distort any graphic it is applied to. You can create warp effects, twirls or ripples like you would do with a Photoshop distortion filter. Displacement filtering is an important tool in VFX, and most likely you already saw some displacement mapping operations on film and TV, created with a VFX tool like After Effects or GiantRed.

To achieve a distortion effect the filter needs two images as input:

  • The actual source graphic should be distorted (from now on just “source”);
  • The “displacement map” (from now on just “map”). This map contains information on how we want the source to be distorted.

Most of the time, a map will be some Bitmap image, but in the next part, I will demonstrate how to use SVG images or fragments as an input.

Let’s see what happens when we use an image of Barcelona’s famous La Sagrada Familia to “distort” the Mona Lisa:

  1. The first filter primitive is feImage which holds a reference to the map (there are other filter primitives that can be used as an input. You will find several fascinating demos out there where feTurbulence is used as displacement map, but in this article, we will mostly focus on feImage).
  2. This feImage is then fed into a feDisplacementMap primitive where the actual distortion happens:
    • A positive or negative scale attribute defines the strength of the distortion.
    • The purpose of xChannelSelector and yChannelSelector is to determine which of the input image’s four-color channels (red, green, blue, alpha) should be applied to which axis for distortion. Both attributes default to the map’s alpha channel (which means if you’re using a map without alpha channels and omit these attributes, you’ll see nothing more than a diagonal shift of the source).

We then apply the filter with CSS:

.filtered {   filter: url(#displacement-filter); }

It may be fun to play around distorting images this way but it is unpredictable how the result will look and most of the time it’s not aesthetically pleasing at all. Is there a way to get pixel-perfect control over the output? Here’s what the spec says:

This filter primitive uses the pixels values from the image from in2 to spatially displace the image from in. This is the transformation to be performed:

P'(x,y) ← P( x + scale (XC(x,y) – .5), y + scale (YC(x,y) – .5))

The displacement map, in2, defines the inverse of the mapping performed.

OK, looks complicated at a first glance, but it is actually pretty easy to understand when broken down:

  • P'(x,y) stands for the coordinates of a pixel in the result;
  • X and Y are the coordinates of this pixel in the unfiltered source;
  • XC and YC are the normalized (1/255) RGB color values of the given pixel in the map;
  • Finally, the result of the operation must be inverted (which basically means every + in the formula must be replaced by a -).

We will run some simple experiments to verify our formula by feeding primitive bitmaps into a filter, consisting of only one single color. Let’s say the map is filled with rgb(51, 51, 51), how would we expect the coordinates of a source pixel at x=100 / y=100 to be transformed when fed into a displacement primitive with a scale value of 100?

X: 100 – 100 (51/255 – .5) = 130

Y: 100 – 100 (51/255 – .5) = 130

To scale an image equally in all directions, the color values must gradually decline from a maximum at one edge to a minimum at the opposite edge. We will use red for X and blue for Y from now on, but in the end, it doesn’t matter which color you chose for x- and yChannelSelector.

  1. In your favorite Image editor, open a new document;
  2. Set the background color of the document to black;
  3. Create a new layer and fill it with a left to right gradient from rgb(255, 0, 0) to rgba(255, 0, 0, 0);
  4. Add a second layer and add a top to bottom gradient from rgb (0, 0, 255) to rgba(0, 0, 255, 0);
  5. Set the blending mode for this layer to screen.

Et voilà, you’ve built an absolute map! This map will serve as a solid foundation for all kinds of image distortions:

  • By applying Photoshop-like distortion filters to this map, we are able to use these effects in CSS filters!
  • We can control the scaling of the x- and y-axis independently by altering the transparency of the blue or red gradient.
  • It is possible to “mask” parts of the map with a “neutral” color (rgb(127, 0 ,127) or #7F007F) to prevent the corresponding parts in the image from displacing.

The Problem With Jagged Edges

You may have noticed the pixelated edges that sometimes appear in the output image. Especially source material with high contrast, e.g. typography or vector artwork, is prone to this effect.

This is caused by several reasons:

  • The filter will take the source image as a bitmap:
    If there exist antialiased edges in the source, the filter will not “re-initialize” them after displacing the source. Any pixel will be transformed to its new location, that’s it.
  • Rounding errors:
    Maybe a pixel from 100,100 must be shifted to 83.276, 124.217. The filter must somehow map these coordinates to non-decimal pixel values.
  • Gaps after displacement:
    Maybe two neighboring pixels, say at coordinates x1:100, x2:101 are shifted to different locations, maybe x1:207.4, x2: 211.3. How will the filter fill the space in between? Hint: not at all. The spec clearly states:

“Sometimes filter primitives result in undefined pixels. For example, filter primitive feOffset can shift an image down and to the right, leaving undefined pixels at the top and left. In these cases, the undefined pixels are set to transparent black.”

— Filter Effects Module Level 1, W3C

My weapon of choice to fix this issue is to add a slight blur, then increase the contrast with a feConvolveMatrix. Not perfect, but good enough for most situations. Here’s a demo on CodePen:

  1. Insert a feImage primitive with a reference to the absolutemap;
  2. Create the “magnifying glass”, an SVG containing a circle filled with a radial gradient, starting at rgba(127, 0, 127, 0) and ending at rgba(127, 0, 127, 1);
  3. Insert a second feImage with a reference to the “magnifying glass”;
  4. Merge both images into an feMerge primitive and make the result the feDisplacementMap’s in2. As you may have noticed we’re using a negative scale factor here to make sure the image will be scaled down outside and is displayed at its normal size inside the “magnifying glass”;
  5. Add some JavaScript so that the x and y attributes of the feImage referencing the “magnifying glass” match the mouse position.

Generating Arbitrary Maps With Blurred Paths

A totally different way to build an SVG displacement map is by making use of extremely thick blurred bezier paths instead of gradients. Here’s a little app that lets you change the bezier anchor points in a map created this way.

It’s possible to create some pretty rad maps this way, but you should keep in mind that blurring has an impact on rendering performance. Firefox even has a threshold of 100px on how much blurring is allowed.

Animation

By now we learned everything about the main principles behind displacement filtering and how to create displacement maps in SVG. We are ready for the fun part: how to set everything into motion.

SVG filters can be animated and transitioned. A big problem is the fact that filter values referencing a URL will not be interpolated, but swapped out immediately without any transition in-between, a behavior that is in line with the spec. Can be ok in some situations, but boring most of the time. We want animated twirls, ripples, warps, and morphs!

When thinking of animated maps, the first thing that comes to mind is an animated gif or WebP. Well, animated images will work in every browser somehow. But performance varies greatly from quite bad to extremely bad. And then there are platform-related limitations: e. g. Blink is not able to apply this animated displacement filter to elements that contain other animated elements. And we didn’t talk about file size yet. Instead we will focus on the two most reliable animation techniques IMHO: SMIL (yes, SMIL still is a thing these days) and JavaScript.

A filter will usually be constructed from a variety of different primitives and every attribute that was added to a node, like x, y, width, height or scale can be animated with SMIL.

A Simple Glitch Effect

Here’s a very simple example: making use of an animated feFlood primitive to create a basic glitch effect:

This effect can be leveraged even more by throwing masks, blurs, and some colors into the mix. Here’s a pimped-up version of the effect using the same techniques, but in a more advanced way.

You may have noticed that depending on your browser and CPU, the performance of these demos can vary drastically. It’s a disappointing fact that SVG Filters are still not optimized for performance. Your GPU will accelerate some simple primitives (e. g. color operations), but when you build a compound filter chaining and merging many primitives you will quickly find framerates dropping and fans going up — especially in WebKit and Firefox. Browser vendors have a lot of topics on their to-do lists and SVG Filter Effects don’t have the highest priority there, especially as they still are not found that often out in the wild.

This doesn’t mean that you can’t use animated SVG Filters now, but you should apply them in a responsible way: preferably limit the dimensions of the animated paint area to the smallest possible rectangle, limit the number of iterations to the minimum, be careful with blurs and blending operations and test test test on many browsers and devices.

A good use case for animated filter effects are small, locally constrained animations applied to UI elements. Below is a demonstration of how the animated feImage effect from above can be used to spice up a rather boring progress bar:

A Glitch Transition Between Elements

  • Create 2 different SVGs for each channel in our map. For each color create a grid of rectangles with randomly varying color intensity.
  • Create 2 different feImage primitives. URL-encode each SVG, then put it into the href-attribute of each feImage.
  • Add SMIL animations for width, height, and y attributes.
  • Insert a feBlend and blend both feImages into a single output.
  • Add some colored feDropShadows for a cool split-color effect.
  • Blend everything, then feed it into a feDisplacementmap.
  • Animate the scale attribute with SMIL.
  • Feel free to experiment by changing forms (e. g. use circles instead of rects), applying different timings, adding blur effects, and more.

Animating The Map Itself

So far we have learned that animating filter attributes with SMIL can help us to achieve really cool visual effects. On the other hand, we already saw how SVG fragments can be used as a displacement map. As SVGs are animatable with JavaScript, SMIL and CSS, it would seem obvious that we can apply animations directly to an SVG map right?

Unfortunately, SMIL and CSS animations in SVG images used as input for feImage will not run when the SVG or fragment is URL encoded. We will need to write some JavaScript for a reliable solution and take into account that two different approaches for Webkit and Blink/Quantum browsers are necessary. In a first step, let’s see how the “ideal” way of animating a map will look:

  • Create the SVG fragment containing your map;
  • Reference it from the feImage that controls your feDisplacementMap’s in2;
  • Feel free to animate everything in your fragment with JavaScript as you like. Roll your own script or use your favorite library.

“This sounds too easy. Where’s the catch?” Of course, you are right. The method described above is the ideal path, the way things should work but, here’s a strange matter of fact: It will not work anywhere but Webkit. In order for our animation to run in Blink and Firefox, we must implement a rather hacky solution and you won’t like it:

  • Create the SVG fragment containing your map.
  • In every frame of your animation, change all the values of every animated attribute.
  • In every frame of your animation create a new URL encoded string containing a “snapshot” of the fragment and write it into the feImages href attribute.

You’re probably thinking: “This is ugly! I don’t like it and you are a despicable person!”. I feel your pain. The front end is a hostile habitat and sometimes we must do abhorrent things to survive (fun fact: the “ugly” method performs better in Blink than the “pure” method in Webkit will).

Let’s Rock!

Let’s solve a real-world problem with this approach: here’s what happens to “The Rock” when we apply these two simple displacement maps:

2. Using Animejs’ Grid Animation

Animejs’ staggering and “grid” properties can help you create really cool typographic effects. This effect was created by animating a grid of circles:

3. A “Waving Flag” Menu

An unconventional way of swapping a second-level submenu. The fade-in effect is achieved by moving a striped map horizontally:

Please note that the demos shown above are highly experimental and mainly intended to demonstrate the concept of animated displacement maps. If you want to use any of these techniques in a live project, always take my earlier recommendations to heart. And forgive me for not going into detail on every example — it simply would exceed the scope of this article.

Articles on Smashing Magazine — For Web Designers And Developers

01 Sep

A Deep Dive Into The Wonderful World Of SVG Displacement Filtering

by TBSCategories: News

Even today, the magic, wicked realm of SVG Filter Effects is largely uncharted territory. The art of SVG filtering is still surrounded by an aura of alchemy: you have to bravely dive into a dark world of inconsistencies, your dedication will repeatedly be tested by buggy implementations and nerve-wracking side effects, and you must learn complicated incantations. But, once mastered, it gives you unprecedented power — a means to switch the total appearance of elements and websites by the snap of a finger.

In this article, we’ll be diving into one of the most spectacular filter effects: the SVG feDisplacementMap filter primitive. In order to make it all easier to digest, I’ve divided the article into three parts in which we’ll be exploring:

  1. how the feDisplacementMap works, i.e. how to apply it and how to control its output in a predictable manner;
  2. we’ll then explore methods to create fancy displacement maps in SVG (slightly more interesting as we will start playing with JavaScript);
  3. and finally, we’ll take a look at some of the methods to animate the filter and create dramatic visual effects.

As this will be a rather long read, the impatient ones may want to check out the demos we’re going to encounter before continuing. All the demos in this article have been optimized for the latest versions of the three major browser engines.

To get the most out of this article, you should already have a basic understanding of SVG filters. If you are a filter novice, you may want to take a short detour to Sara Soueidan’s introduction or head over on to my humble take on the subject first.

Be warned though: not applied properly, SVG Filters can hurt the performance of your site drastically. Always test extensively if you roll out one of the techniques described here.

A Short Primer On Displacement Filtering

So what’s a displacement filter? A displacement operation can visually distort any graphic it is applied to. You can create warp effects, twirls or ripples like you would do with a Photoshop distortion filter. Displacement filtering is an important tool in VFX, and most likely you already saw some displacement mapping operations on film and TV, created with a VFX tool like After Effects or GiantRed.

To achieve a distortion effect the filter needs two images as input:

  • The actual source graphic should be distorted (from now on just “source”);
  • The “displacement map” (from now on just “map”). This map contains information on how we want the source to be distorted.

Most of the time, a map will be some Bitmap image, but in the next part, I will demonstrate how to use SVG images or fragments as an input.

Let’s see what happens when we use an image of Barcelona’s famous La Sagrada Familia to “distort” the Mona Lisa:

  1. The first filter primitive is feImage which holds a reference to the map (there are other filter primitives that can be used as an input. You will find several fascinating demos out there where feTurbulence is used as displacement map, but in this article, we will mostly focus on feImage).
  2. This feImage is then fed into a feDisplacementMap primitive where the actual distortion happens:
    • A positive or negative scale attribute defines the strength of the distortion.
    • The purpose of xChannelSelector and yChannelSelector is to determine which of the input image’s four-color channels (red, green, blue, alpha) should be applied to which axis for distortion. Both attributes default to the map’s alpha channel (which means if you’re using a map without alpha channels and omit these attributes, you’ll see nothing more than a diagonal shift of the source).

We then apply the filter with CSS:

.filtered {   filter: url(#displacement-filter); }

It may be fun to play around distorting images this way but it is unpredictable how the result will look and most of the time it’s not aesthetically pleasing at all. Is there a way to get pixel-perfect control over the output? Here’s what the spec says:

This filter primitive uses the pixels values from the image from in2 to spatially displace the image from in. This is the transformation to be performed:

P'(x,y) ← P( x + scale (XC(x,y) – .5), y + scale (YC(x,y) – .5))

The displacement map, in2, defines the inverse of the mapping performed.

OK, looks complicated at a first glance, but it is actually pretty easy to understand when broken down:

  • P'(x,y) stands for the coordinates of a pixel in the result;
  • X and Y are the coordinates of this pixel in the unfiltered source;
  • XC and YC are the normalized (1/255) RGB color values of the given pixel in the map;
  • Finally, the result of the operation must be inverted (which basically means every + in the formula must be replaced by a -).

We will run some simple experiments to verify our formula by feeding primitive bitmaps into a filter, consisting of only one single color. Let’s say the map is filled with rgb(51, 51, 51), how would we expect the coordinates of a source pixel at x=100 / y=100 to be transformed when fed into a displacement primitive with a scale value of 100?

X: 100 – 100 (51/255 – .5) = 130

Y: 100 – 100 (51/255 – .5) = 130

To scale an image equally in all directions, the color values must gradually decline from a maximum at one edge to a minimum at the opposite edge. We will use red for X and blue for Y from now on, but in the end, it doesn’t matter which color you chose for x- and yChannelSelector.

  1. In your favorite Image editor, open a new document;
  2. Set the background color of the document to black;
  3. Create a new layer and fill it with a left to right gradient from rgb(255, 0, 0) to rgba(255, 0, 0, 0);
  4. Add a second layer and add a top to bottom gradient from rgb (0, 0, 255) to rgba(0, 0, 255, 0);
  5. Set the blending mode for this layer to screen.

Et voilà, you’ve built an absolute map! This map will serve as a solid foundation for all kinds of image distortions:

  • By applying Photoshop-like distortion filters to this map, we are able to use these effects in CSS filters!
  • We can control the scaling of the x- and y-axis independently by altering the transparency of the blue or red gradient.
  • It is possible to “mask” parts of the map with a “neutral” color (rgb(127, 0 ,127) or #7F007F) to prevent the corresponding parts in the image from displacing.

The Problem With Jagged Edges

You may have noticed the pixelated edges that sometimes appear in the output image. Especially source material with high contrast, e.g. typography or vector artwork, is prone to this effect.

This is caused by several reasons:

  • The filter will take the source image as a bitmap:
    If there exist antialiased edges in the source, the filter will not “re-initialize” them after displacing the source. Any pixel will be transformed to its new location, that’s it.
  • Rounding errors:
    Maybe a pixel from 100,100 must be shifted to 83.276, 124.217. The filter must somehow map these coordinates to non-decimal pixel values.
  • Gaps after displacement:
    Maybe two neighboring pixels, say at coordinates x1:100, x2:101 are shifted to different locations, maybe x1:207.4, x2: 211.3. How will the filter fill the space in between? Hint: not at all. The spec clearly states:

“Sometimes filter primitives result in undefined pixels. For example, filter primitive feOffset can shift an image down and to the right, leaving undefined pixels at the top and left. In these cases, the undefined pixels are set to transparent black.”

— Filter Effects Module Level 1, W3C

My weapon of choice to fix this issue is to add a slight blur, then increase the contrast with a feConvolveMatrix. Not perfect, but good enough for most situations. Here’s a demo on CodePen:

  1. Insert a feImage primitive with a reference to the absolutemap;
  2. Create the “magnifying glass”, an SVG containing a circle filled with a radial gradient, starting at rgba(127, 0, 127, 0) and ending at rgba(127, 0, 127, 1);
  3. Insert a second feImage with a reference to the “magnifying glass”;
  4. Merge both images into an feMerge primitive and make the result the feDisplacementMap’s in2. As you may have noticed we’re using a negative scale factor here to make sure the image will be scaled down outside and is displayed at its normal size inside the “magnifying glass”;
  5. Add some JavaScript so that the x and y attributes of the feImage referencing the “magnifying glass” match the mouse position.

Generating Arbitrary Maps With Blurred Paths

A totally different way to build an SVG displacement map is by making use of extremely thick blurred bezier paths instead of gradients. Here’s a little app that lets you change the bezier anchor points in a map created this way.

It’s possible to create some pretty rad maps this way, but you should keep in mind that blurring has an impact on rendering performance. Firefox even has a threshold of 100px on how much blurring is allowed.

Animation

By now we learned everything about the main principles behind displacement filtering and how to create displacement maps in SVG. We are ready for the fun part: how to set everything into motion.

SVG filters can be animated and transitioned. A big problem is the fact that filter values referencing a URL will not be interpolated, but swapped out immediately without any transition in-between, a behavior that is in line with the spec. Can be ok in some situations, but boring most of the time. We want animated twirls, ripples, warps, and morphs!

When thinking of animated maps, the first thing that comes to mind is an animated gif or WebP. Well, animated images will work in every browser somehow. But performance varies greatly from quite bad to extremely bad. And then there are platform-related limitations: e. g. Blink is not able to apply this animated displacement filter to elements that contain other animated elements. And we didn’t talk about file size yet. Instead we will focus on the two most reliable animation techniques IMHO: SMIL (yes, SMIL still is a thing these days) and JavaScript.

A filter will usually be constructed from a variety of different primitives and every attribute that was added to a node, like x, y, width, height or scale can be animated with SMIL.

A Simple Glitch Effect

Here’s a very simple example: making use of an animated feFlood primitive to create a basic glitch effect:

This effect can be leveraged even more by throwing masks, blurs, and some colors into the mix. Here’s a pimped-up version of the effect using the same techniques, but in a more advanced way.

You may have noticed that depending on your browser and CPU, the performance of these demos can vary drastically. It’s a disappointing fact that SVG Filters are still not optimized for performance. Your GPU will accelerate some simple primitives (e. g. color operations), but when you build a compound filter chaining and merging many primitives you will quickly find framerates dropping and fans going up — especially in WebKit and Firefox. Browser vendors have a lot of topics on their to-do lists and SVG Filter Effects don’t have the highest priority there, especially as they still are not found that often out in the wild.

This doesn’t mean that you can’t use animated SVG Filters now, but you should apply them in a responsible way: preferably limit the dimensions of the animated paint area to the smallest possible rectangle, limit the number of iterations to the minimum, be careful with blurs and blending operations and test test test on many browsers and devices.

A good use case for animated filter effects are small, locally constrained animations applied to UI elements. Below is a demonstration of how the animated feImage effect from above can be used to spice up a rather boring progress bar:

A Glitch Transition Between Elements

  • Create 2 different SVGs for each channel in our map. For each color create a grid of rectangles with randomly varying color intensity.
  • Create 2 different feImage primitives. URL-encode each SVG, then put it into the href-attribute of each feImage.
  • Add SMIL animations for width, height, and y attributes.
  • Insert a feBlend and blend both feImages into a single output.
  • Add some colored feDropShadows for a cool split-color effect.
  • Blend everything, then feed it into a feDisplacementmap.
  • Animate the scale attribute with SMIL.
  • Feel free to experiment by changing forms (e. g. use circles instead of rects), applying different timings, adding blur effects, and more.

Animating The Map Itself

So far we have learned that animating filter attributes with SMIL can help us to achieve really cool visual effects. On the other hand, we already saw how SVG fragments can be used as a displacement map. As SVGs are animatable with JavaScript, SMIL and CSS, it would seem obvious that we can apply animations directly to an SVG map right?

Unfortunately, SMIL and CSS animations in SVG images used as input for feImage will not run when the SVG or fragment is URL encoded. We will need to write some JavaScript for a reliable solution and take into account that two different approaches for Webkit and Blink/Quantum browsers are necessary. In a first step, let’s see how the “ideal” way of animating a map will look:

  • Create the SVG fragment containing your map;
  • Reference it from the feImage that controls your feDisplacementMap’s in2;
  • Feel free to animate everything in your fragment with JavaScript as you like. Roll your own script or use your favorite library.

“This sounds too easy. Where’s the catch?” Of course, you are right. The method described above is the ideal path, the way things should work but, here’s a strange matter of fact: It will not work anywhere but Webkit. In order for our animation to run in Blink and Firefox, we must implement a rather hacky solution and you won’t like it:

  • Create the SVG fragment containing your map.
  • In every frame of your animation, change all the values of every animated attribute.
  • In every frame of your animation create a new URL encoded string containing a “snapshot” of the fragment and write it into the feImages href attribute.

You’re probably thinking: “This is ugly! I don’t like it and you are a despicable person!”. I feel your pain. The front end is a hostile habitat and sometimes we must do abhorrent things to survive (fun fact: the “ugly” method performs better in Blink than the “pure” method in Webkit will).

Let’s Rock!

Let’s solve a real-world problem with this approach: here’s what happens to “The Rock” when we apply these two simple displacement maps:

2. Using Animejs’ Grid Animation

Animejs’ staggering and “grid” properties can help you create really cool typographic effects. This effect was created by animating a grid of circles:

3. A “Waving Flag” Menu

An unconventional way of swapping a second-level submenu. The fade-in effect is achieved by moving a striped map horizontally:

Please note that the demos shown above are highly experimental and mainly intended to demonstrate the concept of animated displacement maps. If you want to use any of these techniques in a live project, always take my earlier recommendations to heart. And forgive me for not going into detail on every example — it simply would exceed the scope of this article.

Articles on Smashing Magazine — For Web Designers And Developers

16 Mar

Good, Better, Best: Untangling The Complex World Of Accessible Patterns

by TBSCategories: News

Marc Benioff memorably stated that the only constant in the technology industry is change. Having worked in tech for over 15 years, I can confirm this. Fellow tech dinosaurs can attest that the way the web worked in the early days is drastically different than many of us could have even imagined.

While this constant change in the technology industry has led to innovation and advancements we see today, it has also introduced the concept of choice. While choice — on the surface — may seem like an inherently positive thing, it does not always equal rainbows and roses. The influx of technological change also brings the splintering of coding languages and the never-ending flavors of programming “hotness.” Sometimes this abundance of choice turns into overchoice — a well-studied cognitive impairment in which people have difficulty making a decision due to having too many options.

In this article, we will attempt to untangle the complex world of accessible patterns — one step at a time. We will kick things off by reviewing current accessible patterns and libraries, then we will consider our general pattern needs and potential restrictions, and lastly, we will walk through a series of critical thinking exercises to learn how to better evaluate patterns for accessibility.

What A Tangled Web We Weave

Overchoice has crept its way into all aspects of technology, including the patterns and libraries we use to build our digital creations — from the simple checkbox to the complex dynamic modal and everything in between. But how do we know which pattern or library is the right one when there are so many choices? Is it better to use established patterns/libraries that users encounter every day? Or is it better to create brand new patterns for a more delightful user experience?

With the myriad of options available, we can quickly become paralyzed by the overabundance of choices. But if we take a step back and consider why we build our digital products in the first place (i.e. the end-user) doesn’t it make sense to choose the pattern or library that can add the most value for the largest number of people?

If you thought choosing a pattern or library was an already daunting enough process, this might be the point where you start to get worried. But no need to fret — choosing an accessible pattern/library isn’t rocket science. Like everything else in technology, this journey starts with a little bit of knowledge, a huge heaping of trial and error, and an understanding that there is not just one perfect pattern/library that fits every user, situation, or framework.

How do I know this? Well, I have spent the past five years researching, building, and testing different types of accessible patterns while working on the A11y Style Guide, Deque’s ARIA Pattern Library, and evaluating popular SVG patterns. But I have also reviewed many client patterns and libraries on every framework/platform imaginable. At this point in time, I can say without qualms that there is an innate hierarchy for pattern accessibility that starts to develop when you look long enough. And while there are occasionally patterns to avoid at all costs, it isn’t always so clear-cut. When it comes to accessibility, I would argue most patterns fall into gradients of good, better, best. The difficult part is knowing which pattern belongs in what category.

Thinking Critically About Patterns

So how do we know which patterns are good, better, best when it comes to accessibility? It depends. This often invoked phrase from the digital accessibility community is not a cop-out but is shorthand for “we need more context to be able to give you the best answer.” However, the context is not always clear, so when building and evaluating the accessibility of a pattern, some fundamental questions I ask include:

  • Is there already an established accessible pattern we can use?
  • What browsers and assistive technology (AT) devices are we supporting?
  • Are there any framework limitations or other integrations/factors to consider?

Of course, your specific questions may vary from mine, but the point is you need to start using your critical thinking skills when evaluating patterns. You can do this by first observing, analyzing, and then ranking each pattern for accessibility before you jump to a final decision. But before we get to that, let’s first delve into the initial questions a bit more.

Is There Already An Established Accessible Pattern?

Why does it seem that with each new framework, we get a whole new set of patterns? This constant reinvention of the wheel with new pattern choices can confuse and frustrate developers, especially since it is not usually necessary to do so.

Don’t believe me? Well, think about it this way: If we subscribe to the atomic design system, we understand that several small “atoms” of code come together to create a larger digital product. But in the scientific world, atoms are not the smallest component of life. Each atom is made of many subatomic particles like protons, neutrons, and electrons.

That same logic can be applied to our patterns. If we look deeper into all the patterns available in the various frameworks that exist, the core subatomic structure is essentially the same, regardless of the actual coding language used. This is why I appreciate streamlined coding libraries with accessible patterns that we can build upon based on technological and design needs.

Note: Some great reputable sources include Inclusive Components, Accessible Components, and the Gov.UK Design System, in addition to the list of accessible patterns Smashing Magazine recently published (plus a more detailed list of patterns and libraries at the end of the article).

What Browsers And Assistive Technology (AT) Devices Are We Supporting?

After researching a few base patterns that might work, we can move on to the question of browser and assistive technology (AT) device support. On its own, browser support is no joke. When you add in AT devices and ARIA specifications to the mix, things begin to get tricky…not impossible, just a lot more time, effort, and thought-process involved to figure it all out.

But it’s not all bad news. There are some fabulous resources like HTML5 Accessibility and Accessibility Support that help us build a greater understanding of current browser + AT device support. These websites outline the different HTML and ARIA pattern sub-elements available, include open source community tests, and provide some pattern examples — for both desktop and mobile browsers/AT devices.

Are There Any Framework Limitations Or Other Integrations/Factors To Consider?

Once we have chosen a few accessible base patterns and factored in the browser/AT device support, we can move on to more fine-grained contextual questions around the pattern and its environment. For example, if we are using a pattern in a content management system (CMS) or have legacy code considerations, there will be certain pattern limitations. In this case, a handful of pattern choices can quickly be slashed down to one or two. On the flip side, some frameworks are more forgiving and open to accepting any pattern, so we can worry less about framework restrictions and focus more on making the most accessible pattern choice we can make.

Besides all that we have discussed so far, there are many additional considerations to weigh when choosing a pattern, like performance, security, search engine optimization, language translation, third-party integration, and more. These factors will undoubtedly play into your accessible pattern choice, but you should also be thinking about the people creating the content. The accessible pattern you choose must be built in a robust enough way to handle any potential limitations around editor-generated and/or user-generated content.

Evaluating Patterns For Accessibility

Code often speaks louder than words, but before we jump into all of that, a quick note that the following pattern examples are not the only patterns available for each situation, nor is the one deemed “best” in the group the best option in the entire world of accessible patterns.

For the pattern demos below, we should imagine a hypothetical situation in which we are comparing each group of patterns against themselves. While this is not a realistic situation, running through these critical thinking exercises and evaluating the patterns for accessibility should help you be more prepared when you encounter pattern choice in the real world.

Accessible Button Patterns

The first group of patterns we will review for accessibility are ubiquitous to almost every website or app: buttons. The first button pattern uses the ARIA button role to mimic a button, while the second and third button patterns use the HTML <button> element. The third pattern also adds aria-describedby and CSS to hide things visually.

See the Pen Accessible Button Patterns by Carie Fisher.

Good: role="button"
<a role="button" href="[link]">Sign up</a>
Better: <button>
<button type="button">Sign up</button>
Best: <button> + visually hidden + aria-describedby
<button type="button" aria-describedby="button-example">Sign up</button> <span id="button-example" class="visually-hidden"> for our monthly newsletter</span>

While the first patterns seem simple at first glance, they do evoke some accessibility questions. For example, on the first button pattern, we see ARIA role="button" is used on the “good” pattern instead of an HTML <button> element. Thinking in terms of accessibility, since we know the HTML <button> element was introduced in HTML4, we can reasonably speculate that it is fully supported by the latest versions of all the major browsers and will play nicely with most AT devices. But if we dig deeper and look at the accessibility support for ARIA role=”button” we see a slight advantage from an assistive technology perspective, while the HTML <button> element is missing some areas of browser + AT coverage, especially when we consider voice control support.

So then why isn’t the ARIA pattern in the “better” category? Doesn’t ARIA make it more accessible? Nope. In fact, in cases like this, accessibility professionals often recite the first rule of ARIA — don’t use ARIA. This is a tongue-in-cheek way of saying use HTML elements whenever possible. ARIA is indeed powerful, but in the wrong hands, it can do more harm than good. In fact, the WebAIM Million report states that “pages with ARIA present averaged 60% more errors than those without.” As such, you must know what you are doing when using ARIA.

Another strike against using ARIA in this situation is that the button functionality we need would need to be built for the role="button" pattern, while that functionality is already pre-baked into the <button> element. Considering the <button> element also has 100% browser support and is an easy pattern to implement, it edges slightly ahead in the hierarchy when evaluating the first two patterns. Hopefully, this comparison helps bust the myth that adding ARIA makes a pattern more accessible — oftentimes the opposite is true.

The third button pattern shows the HTML <button> element coupled with aria-describedby linked to an ID element that is visually hidden with CSS. While this pattern is slightly more complex, it adds a lot in terms of context by creating a relationship between the button and the purpose. When in doubt, anytime we can add more context to the situation, the better, so we can assume if coded correctly, it is the best pattern when comparing only these specific button patterns.

Accessible Contextual Link Patterns

The second group of patterns we will review are contextual links. These patterns help give more information to AT users than what is visible on the screen. The first link pattern utilizes CSS to visually hide the additional contextual information. While the second and third link patterns add ARIA attributes into the mix: aria-labelledby and aria-label, respectively.

See the Pen Accessible Link Patterns by Carie Fisher.

Good: visually-hidden
<p>“My mother always used to say: The older you get, the better you get, unless you’re a banana.” — Rose (Betty White)<a href="[link]">Read More<span class="visually-hidden"> Golden Girl quotes</span></a></p>

Better: visually-hidden + aria-labelledby
<p>“I'm either going to get ice cream or commit a felony...I'll decide in the car.” — Blanche (Rue McClanahan)<a href="[link]" aria-labelledby="quote">Read More</a><span class="visually-hidden" id="quote">Read more Golden Girl quotes</span></p>

Best: aria-label
<p>“People waste their time pondering whether a glass is half empty or half full. Me, I just drink whatever’s in the glass.” — Sophia (Estelle Getty)<a href="[link]" aria-label="Read more Golden Girls quotes">Read More</a></p>

While all three of the contextual link patterns look the same, when we inspect the code or test them with AT devices, there are some obvious differences. The first pattern uses a CSS technique to hide the content visually for sighted users but still renders the hidden content to non-sighted AT users. And while this technique should work in most cases, there is no real relationship formed between the link and the additional information, so the connection is tentative at best. As such, the first link pattern is an OK choice but not the most robust link pattern of the three.

The next two link patterns are a bit more tricky to evaluate. According to the ARIA specs from the W3C “The purpose of aria-label is the same as that of aria-labelledby. It provides the user with a recognizable name of the object.” So, in theory, both attributes should have the same basic functionality.

However, the specs also point out that user agents give precedence to aria-labelledby over aria-label when deciding which accessible name to convey to the user. Research has also shown issues around automatic translation and aria-label attributes. So that means we should use aria-labelledby, right?

Well, not so fast. The same ARIA specs go on to say “If the interface is such that it is not possible to have a visible label on the screen (or if a visible label is not the desired user experience), authors should use aria-label and should not use aria-labelledby.” Talk about confusing — so which pattern should we choose?

If we had large-scale translation needs, we might decide to change the visual aspect and write out the links with the full context displayed (e.g. “Read more about this awesome thing”) or decide to use aria-labelledby. However, let’s assume we did not have large-scale translation needs or could address those needs in a reasonable/accessible way, and we didn’t want to change the visual — what then?

Based on the current ARIA 1.1 recommendations (with the promise of translation of aria-label in ARIA 1.2) plus the fact that aria-label is a bit easier for devs to implement versus aria-labelledby, we could decide to weight aria-label over aria-labelledby in our pattern evaluation. This is a clear example of when context weighs heavily in our accessible pattern choice.

Accessible <svg> Patterns

Last, but certainly not least, let’s investigate a group of SVG image patterns for accessibility. SVGs are a visual representation of code, but code nonetheless. This means an AT device might skip over a non-decorative SVG image unless the role="img" is added to the pattern.

Assuming the following SVG patterns are informational in nature, a role="img" has been included in each. The first SVG pattern uses the <title> and <text> in conjunction with CSS to visually hide content from sighted users. The next two SVG patterns involve the <title> and <desc> elements, but with an aria-labelledby attribute added to the last pattern.

See the Pen Accessible SVG Patterns by Carie Fisher.

Good: role="img" + <title> + <text>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" role="img" x="0px" y="0px" viewBox="0 0 511.997 511.997" style="enable-background:new 0 0 511.997 511.997;" xml:space="preserve">     <title>The first little pig built a house out of straw.</title>     <text class="visually-hidden">Sadly, he was eaten by the wolf.</text>... </svg>

Better: role="img" + <title> + <desc>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" role="img" x="0px" y="0px" viewBox="0 0 511.997 511.997" style="enable-background:new 0 0 511.997 511.997;" xml:space="preserve">     <title>The second little pig built a house out of sticks.</title>     <desc>Sadly, he too was eaten by the big, bad wolf.</desc>... </svg>

Best: role="img" + <title> + <desc> + aria-labelledby="[id]"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" role="img" aria-labelledby="pig3house pig3wolf" x="0px" y="0px" viewBox="0 0 511.997 511.997" style="enable-background:new 0 0 511.997 511.997;" xml:space="preserve">     <title id="pig3house">The third little pig built a house out of bricks.</title>     <desc id="pig3wolf">Thankfully he wasn't eaten by the wolf.</desc>... </svg>

Let’s first look at the first pattern using <title> and <text> and visually hidden CSS. Unlike previous visibly hidden text in patterns, there _is_ an inherent relationship between the <title> and <text> elements since they are grouped under the same SVG element umbrella. However, this relationship is not very strong. In fact, if you look back at my research on SVG patterns, we see that only 3 out of 8 browser/AT combinations heard the complete message. (Note: Pig pattern #1 is equivalent to light bulb pattern #7.)

This is true though the working W3C SVG specs define the <text> element as “a graphics element consisting of text…the characters to be drawn are expressed as character data. As a result, text data in SVG content is readily accessible to the visually impaired.” This first pattern is OK, but we can do better.

The second pattern removes the <text> element and replaces it with a <desc> element. The W3C SVG specs state:

“The <title> child element represents a short text alternative for the element… and the <desc> element represents more detailed textual information for the element such as a description.”

Meaning the <title> and <desc> elements in SVGs can be used similarly to image alternative text and long description options found traditionally in <img> elements. After adding the <desc> element to the second SVG, we see similar browser/AT support with 3 out of 8 combinations hearing the complete message. (Note: Pig pattern #2 is equivalent to light bulb pattern #10.) While these test results seem to mirror the first pattern, the reason this pattern gets a bump into the “better” category is it is slightly easier to implement code-wise and it impacts more AT users, as it worked on JAWS, VoiceOver desktop, and VoiceOver mobile, while the first pattern supported less popular browser/AT combinations.

The third pattern again uses the <title> and <desc> elements but now has an aria-labelledby plus ID added into the mix. According to the same SVG tests, adding this additional piece of code means we can fully support 7 out of 8 browser/AT combinations. (Note: Pig pattern #3 is equivalent to light bulb pattern #11.) Out of the three SVG patterns, this third one is the “best” since it supports the most AT devices. But this pattern does have a draw-back in using some browser/AT combinations; you will hear duplicate image title/description content for this pattern. While potentially annoying to users, I’d argue it is generally better to hear duplicated content than none at all.

Closing Thoughts

While we all certainly value choice in tech, I wonder if we’ve come to a point in time where the overabundance of options has left us paralyzed and confused about what to do next? In terms of picking accessible patterns, we can ask straight-forward questions around pattern/library options, browser/AT device support, framework limitations, and more.

With the right data in hand, these questions are easy enough to answer. However, it becomes a bit more complicated when we go beyond patterns and really consider the people using them. It is then that we realize the impact our choices have on our users’ ability to succeed. As Prof. George Dei eloquently states:

“Inclusion is not bringing people into what already exists — it is making a new space, a better space for everyone.”

By taking a bit more time to critically think about patterns and choose the most accessible ones, we will undoubtedly create a more inclusive space to reach more users — on their terms.

Related Resources

Tools
Pattern Libraries

Articles on Smashing Magazine — For Web Designers And Developers

4-technology-creativity
28 Dec

Creativity In A World Of Technology: Does It Exist?

by TBSCategories: News

Technology has done our world wonders: from advancements in medicine, travel, communication, and not to mention our own day-to-day lives. There’s no doubt that it has “transformed human experience” by impacting the way our society functions, as well as how we interact with one another and ourselves. But is this actually a good thing?

By completely embracing technology as a part of our everyday lives, are we inadvertently impacting our ability to create and be creative — without the help of a screen? While some argue that as the world continues to advance, so do our creative pursuits. With so much being replaced and repurposed by technology, it nonetheless seems appropriate to question: how exactly is technology impacting creativity?

Defining Creativity

Before we go deeper into discussing the relationship between technology and creativity, it’s important to define terms. Alexander Rauser, CEO of Prototype, a digital strategy agency, defined that creativity “come[s] from observing the world, interpreting it and bringing us new concepts and ideas,” while technology has become a new lens through which “to see the world differently [and] access information…”. Creativity helps us to explore new paths, imagine new possibilities, and pursue new careers. Without creativity, I would not be a writer, and designers would probably not exist. Movies, TV shows, music; everything we love and enjoy, would have little engagement. The world would probably be quite dull and boring.

When we really take a look at what we surround ourselves with, I think we’d be hard-pressed to find something that doesn’t have a creative element to it. I suppose, it is inside this tension, where the challenge begins to set in. Given the ambiguous nature of creativity, a blanket statement of ‘creativity no longer exists’ is a very hard call to make. Creativity is not just one thing, but instead, is many.

As such, when we discuss the existence of creativity in a world immersed in technology, it’s incredibly important to define what aspects of creativity are being impacted and why. Are we discussing childhood creativity? Innovation creativity? Web design creativity? Each has its own set of parameters, influences, and complications when it comes to technology.

A study for the International Forum of Educational Technology & Society argued that in order to understand creativity as a complex phenomenon, we need to:

“…abandon the view of creativity, in which the person is at the center of everything, for a model in which the person is part of a system of mutual influences and information.”

— International Forum of Educational Technology & Society

It’s almost as though we need to change the question of whether or not creativity still exists, to “where does it exist, and who or what is it now coming from?”

Can Creativity And Technology Work Together?

The simple answer to this is yes. Creativity and technology do work together and are not mutually exclusive. Instead of suppressing creativity, technology has the ability to enhance specific areas of the creative process, by presenting a new platform for creativity to exist on (and come from). Through the advancement of technology, ideas (which may have once existed within our minds) can now be set free and come to life in the physical world. We now have the necessary tools for greater possibilities and more innovative solutions.

Technology has inspired new careers, as well as creations. In the last few decades, the amount of new industries that have blossomed to life is incredible. By taking a closer look at web design, it’s obvious that as technology rose, a new breed of designers emerged from the dark — planning to take over the Internet and help it thrive.

Espen Brunborg, Head of Design at Primate, wondered in an article for Smashing Magazine, if the Internet is, in fact, killing web design creativity, as there is an element of creative disruption occurring due to the convenience of automated grids and patterns. And while this undoubtedly has merit, there’s no denying how far web design has progressed and transformed because of technology. In such a short amount of time, web design has transversed from the first website in 1991 to the emergence of the term ‘User Experience’ in 1995, to the creation of Google in 1998, to Youtube in 2005, and now the uprising in social media giants like Instagram.

Nowadays, websites are more than just a page of information; they have become an experience. A character through which to understand a business and its values. As designers began experimenting more with animations, colors, parallax layouts, content creation, and even e-commerce features, such as one-click checkouts and paycheck scanners, this only enhanced the experience for users, inviting a rapid growth in website traffic. Cindy Moore, Director of Development for MTS, wrote that “designing websites requires the ability to brainstorm creatively, work with color theory, and appeal to users based on their wants, needs, and personal preference”.

Advancements in technology have, arguably, forced designers to become more creative as they have had to adapt to the growing climate of personal devices. Over 50.44% of web page views are accounted for by mobile devices, which means designers need to make sure that websites are user friendly across a wide range of platforms. Techniques such as responsive web design were thus created. It introduced new thought patterns and ideas on how to make websites more engaging for users, by highlighting the importance of fluid grids and flexible images.

A research paper written by Nathalie Bonnardel, a researcher at the University of Marseille, and Franck Zenasni, a professor at the University of Paris, investigating the impact of technology on creative design, argued that “new technologies and, especially, new CAD systems may help designers to easily express their creativity as well as to assess their ideas or solutions.”

How Has Technology Impacted Business Creativity?

It’s easy to see, then, how the business world has benefited from the creativity and technology dynamic. Businesses now have the opportunity to promote themselves more creatively over a myriad of platforms and mediums, whether that’s through websites, film advertisements, social media or radio, while addressing a wider range of audiences. This has ultimately contributed greatly to the constant exposure to online content, helping businesses to keep up-to-date with their competition, research the needs of consumers, and re-imagine content to suit their needs.

Amongst all of this, the most interesting phenomenon that stands out to me is how it can be flipped the other way. Because this all sounds amazing, right? How, then, could technology negatively impact the way we create, when it affords all these amazing possibilities?

The Complication Dynamic

Ultimately, everything has a push and a pull; a light side and a dark side. For instance, petrol cars are wonderful for transport, yet not so great for the environment; money can be an incredibly beneficial source but can ruin the lives of so many. While technology and creativity may be compatible in some areas, when we begin to look more closely, it’s easy to spot some of the drawbacks — particularly when it comes to reliance, originality, and human development. A simple and clear example, for instance, is the calculator: many of us rely so heavily on automated calculations nowadays, rather than taking the time to figure it out for ourselves.

Maybe the problem is that now it’s just all too easy. We no longer have to think of content, it’s merely right in front of us. Why bother spending hours trying to develop and nurture our creativity when it’s delivered to us on a silver platter? Given what Espen Brunborg said about how our increasing dependence on machines is ultimately going to be detrimental to our creative practices, we must ask ourselves:

Are we really in control of technology, or has it taken control of us?

The scary thing is, I don’t think we have truly seen the peak of this dynamic. What happens to creativity when the generation who has been constantly surrounded by devices since the day they were born, grows up?

Our children are undoubtedly spending more time on screens, whether they’re at home, at school, or with friends, and with “devices becoming a fabric of their lives,” they are consequently lessening the opportunities for them to come up with their own creations. We are so willing to give over our power to these devices, that it may come to a point where creativity “may be harder to find in older children and adults because their creative potential has been suppressed by a society that encourages intellectual conformity.”

Moreover, the best ideas and inspirations often come to us when we are otherwise occupied, such as washing the dishes, going for a walk, staring at the clouds, or being in nature. Our minds simultaneously go blank and become clear — as if waiting for ideas to flood in and take over. Daydreaming is such a subconscious yet fulfilling experience we all unwittingly partake in.

A recent study, written by the Department of Psychology at the University of British Columbia, determined that daydreaming is actually paramount to boosting our creativity. However, with our constant exposure to technology, we are lessening the likelihood of this boosting occurring. While we can sit and mindlessly watch TV, we are constantly fixated upon a screen, restricting any time for our minds to wander, empty, and allow space for ideas. Instead, we need to be nurturing our minds. Why not take the time to stare out the window? Leave your phone behind? Aimlessly gaze at the sky for an hour? You’d be surprised by how much creativity you can inspire when you’re not otherwise occupied by technology.

Where Does The Balance Need To Be?

In the long run, where does this leave us? Have the robots already taken over, as Espen Brunborg suggests, or is there a way to find a medium between technology and human creativity? I think so. While technology is a part of our lives, it is not our life entirely. I think sometimes we forget there is a world beyond our phones, or computers, or the content we see on TV.

Finding A World Beyond Technology

We have already proven that humanity and technology can co-exist. Now it is simply a matter of re-adjusting the scales to make sure that creativity is nurtured and not deterred by either humans or technology. Rather, it is simply influenced. The best way to shift, refocus, and find a balance, is to come back to the physical world — even if for just a moment. At the heart of it, the balance needs to come from within us. Technology is only going to continue to advance, and we, as a society, must find ways to harness its potential while keeping it from hindering our own.

A case study written by Linda Miksch and Charlotte Schulz of Lund University, investigating the phenomenon of a digital detox as a reaction to technology overload, states the following:

“Due to an abuse of digital devices … and the resulting constant availability and accessibility, the importance of finding a balance in connectivity … grows.”

— Disconnect to Reconnect: The Phenomenon of Digital Detox as a Reaction to Technology Overload

Miksch and Schulz go further as to explain specific actions we can take to limit our digital usage. These include establishing barriers around when, where, and how long we use our devices, creating awareness and living in the moment, and re-discovering the importance of offline activities and mediums. They conclude that while the use of technology itself can become habitual, so too can the implementation of daily actions “to lessen technology usage”. This simply highlights that there is a way to come back.

In fact, the documentary The Social Dilemma, directed by Jeff Orlowski, discusses the powerful impact of simply turning off the notifications on your phone. Think about it; the moment our phones ‘bing’ we jump; we see banners appear on our home screen and get a sudden rush of endorphins. It’s almost like that part of our brains attached to technology, never truly switches off. We are always on alert for the next message, next event, next piece of news. Instead, try turning your notifications off, or putting your phone on ‘Do Not Disturb’. You may even like to only turn off the notifications for a particular app, like Facebook or Instagram. Once you become accustomed to it, it’s astonishing how little you think about your phone, when the anticipation of a message is suddenly removed. Not only can switching off your notifications help you connect with the outside world, but it can also help to build a more harmonious relationship with your phone.

Recommended reading: Are Websites Adding To Consumer’s Health Issues?

Another way to reconnect with the world is, of course, to be in it and around it. Daily walks and exercise are a wonderful way to remove yourself from technology, breathe in nature, and open your mind. There is something so unexplainably calming about walking through a park lined with trees, gazing up, and seeing them softly sway in the wind. It’s almost like an instant sense of feeling grounded; a reminder that everything is okay. Perhaps it’s because nature is so far removed from technology that it shows us there is still life that exists without it. Even just half an hour a day, especially after being in front of a screen for hours at a time, can sometimes be all you need to reset, rebalance, and keep going. In the long run, a daily walk around a neighborhood can not only impact our creativity and imagination but further our mental and physical health and well-being. The good news is, it doesn’t stop here. There are so many actionable changes you can make to nurture the world beyond technology, and by extension our creativity, including meditation and yoga, keeping a journal, or reading.

The question is, how will you do it? Will you embark on a digital detox and go completely offline? Will you be conscious of putting your phone away when spending time with friends? Will you endeavor to find joy and purpose outside of a screen? The actions you choose to take, no matter their scale, will only help us to come back to a space of equilibrium and balance, changing the relationship between creativity and technology for the better. Because in the end, the key to the survival of our creativity starts with us.

Further Reading on SmashingMag:

Articles on Smashing Magazine — For Web Designers And Developers

search-engine-cartoon
28 Sep

A Smashing Guide To The World Of Search Engine Optimization

by TBSCategories: News

Search engine optimization is essential to most websites. The industry is worth more than $ 70 billion a year, and it’s only going to grow. It has specialists, sub-specialists, thought leaders, dedicated publications, fantastically complex tools, and constant uncertainty at its heart. As Bob Dylan says, it’s just a shadow we’re all chasing.

All the more reason to stay sharp, no? Every tweak to major search engine algorithms sends shockwaves throughout the web. For those who don’t follow the SEO space it can be easy to lose track of the latest trends, authorities, and resources.

That’s what this page is for. It will break down SEO’s hot topics, common questions, and the best resources for staying up to date with that world. As such, this isn’t so much a guide to SEO as it is a guide to the world of SEO. Think of it as a cliff-notes, a primer for those looking to top up their knowledge and understand the latest trends.

For those really in a rush to get back into the groove, skip ahead to the cheat sheet rounding up all the resources included in this piece. As for the rest of you, on we go. It’s quite Google-heavy, because Google currently holds 85%+ market share, but rest assured the points apply to the likes of Baidu and DuckDuckGo as well.

And remember, this is a live document. If there’s something we’ve missed, tell us. In a world as fast-changing as SEO no resources can afford to sit on their hands.

Why SEO Matters

We won’t linger on this point, but it’s useful to remind ourselves what SEO is, why it’s important, and how it has evolved over the years. Keeping the foundational principles in mind allow you to see the woods rather than the trees.

So, in a nutshell, search engine optimisation is the means by which websites appear in search engines like Google, Bing, Baidu, and DuckDuckGo. It remains one of the best ways for websites to be found. More than 90% of web traffic comes through search engines, with Google alone processing trillions of searches a year. If you want your website to be seen, you want to be appearing in relevant search results.

Although SEO isn’t controversy-free, it is in principle the great equalizer. Positions can’t be bought; they’re based on relevance and quality. It is in the interest of search engines to deliver the best results possible, so SEO is the process by which a site becomes the best results possible.

In a word, the appeal of SEO is traffic. It’s getting people to drop by and hopefully stick around. More traffic means more readers, more viewers, more customers, more attention.

Whatever your motivation is, the game is fundamentally the same. From content to site design, implementing makes websites better. Design is clearer and content is more focused, with visitors’ needs always front and centre. In a sense it gives you a 3D vision of the web, seeing web experiences from both human and computer perspectives.

Despite quick-fix guides to the contrary, SEO is best not retrofitted. As Suzanne Scacca writes, SEO belongs at the heart of the web design process. It can’t — and shouldn’t — be pushed off to writers or SEO executives. It is a sitewide concern, requiring sitewide attention.

Hot Topics

If you’re not comfortable with the basics of SEO — meta tags, alt text, link building, etc. — this page is not for you. This piece assumes a certain amount of foundational knowledge. Don’t panic, though, we won’t leave you hanging. Here are several terrific resources for getting started from scratch:

As for the rest of you, what follows are some of the SEO space’s slightly more technical hot topics, complete with conventional wisdom and resources for keeping up with their evolutions.

Great Content

I had to put this first. The sheer amount of data involved in SEO makes it easy to lose sight of an important fact: you’re making websites for people, not search engines. As corny as it sounds, in the long term the best way to perform well in organic search is to be the best you possible.

Search engines value good content above all else. However much the intricacies of SEO change, this remains true. It’s a rock solid foundation for SEO. Optimising a brilliant website is easy; optimising a bad one is hard, and often leads to black hat behaviour. (More on that below.) Yes, there are poorly optimised websites that perform well in search, for a variety of reasons, but grumbling about will get you nowhere.

What does ‘good content’ mean in concrete terms? It’s not as arbitrary as you might think. Search engines generally keep their cards close to their chest, but where content quality is concerned they’re as transparent as you could hope.

For those out of the SEO loop there are few better ways of getting up to speed than reading through Google’s latest Search Quality Evaluator Guidelines. Why guess what search engines want when they’ve written a book’s worth of documentation on the subject? Topics covered in the latest edition include:

  • Expertise, Authoritativeness, and Trustworthiness (E-A-T),
  • Your Money or Your Life (YMYL) Pages,
  • The reputation of websites and creators,
  • Mobile user needs,
  • Auto-generated content,
  • Deceptive page design,
  • What low quality pages look like.

Whether you’re a designer or a copywriter, this is all valuable information.

Say what you like about Google’s more nefarious practices, but where organic search is concerned they want websites to be goodie two shoes. Write brilliant articles; build fast, practical sites; use beautiful visuals; design ethically; be transparent about who you are and what you do; and never, ever let SEO be the tail that wags the dog. Quality will win out in the end.

Accessibility

Happily, the web development space seems to be warming up to talk of accessibility. There is plenty of natural overlap between SEO and accessibility, though sadly there is currently little evidence that super accessible websites get a boost in search. Accessibility barely features in Google’s mammoth Search Quality Guidelines document.

There is, however, a huge amount of overlap between accessibility best practice and SEO best practice. These include:

  • Image alt text,
  • Descriptive title and header tags,
  • Video transcriptions,
  • Content sections,
  • Clear, logical sitemaps,
  • Colour contrast,

Almost everything worth doing for its own sake becomes SEO best practice eventually, so I’m inclined to endorse accessibility on both counts. The Web Content Accessibility Guidelines are a great place to start, especially the Four Principles of Accessibility.

WebAIM publishes annual reports on web accessibility, and Global Accessibility Awareness Day is a fantastic hub for events and campaigns. Also, to get a Smashing plug in, Steven Lambert’s piece on designing for accessibility and inclusion breaks the topic down splendidly.

The Curious Case Of JavaScript

JavaScript has grown into the third pillar of web design — joining HTML and CSS. The language allows for all manner of fancy interactive features that aren’t possible on static sites. That sophistication has brought with it some confusion where SEO is concerned.

Can JavaScript-heavy websites perform well in search? Yes, they can and do. When issues arise it’s almost always in the indexing process, when search engines crawl and render web pages for their databases.

Google has a finite crawl budget. If your page takes ages to load, there’s a decent chance search engines will skip over it. Render-blocking JavaScript is also frowned upon, especially for above the fold content. If possible, execute scripts after the page is loaded.

In short, let search engines see pages the way people see them. Google Search Console has a URL Inspection Tool that will show you what it retrieves, what it renders, and any glaring issues.

Developers should not shy away from JavaScript for fear of angering the SEO gods. Yes, bloated, slow, gratuitous JavaScript will hurt your website’s search performance, but applied properly the language can also improve it. Indeed, formats like JSON are a staple of more sophisticated SEO markup, like Schema.

Here are some resources for getting into the weeds of JavaScript and SEO:

Remember also that the more solid your SEO foundations are, the less pressure there is on JavaScript to perform. Think of it as something that enhances the browsing experience rather than carries the water.

Structured Data

Metadata has come a long way since the early days of SEO. Meta titles and descriptions remain important, but there’s a whole other level becoming increasingly difficult to ignore — structured data.

Structured data, more specifically Schema, has been adopted by all the major search engines. Part of the Semantic Web push to make online data machine-readable, it allows you to label content with specificity that simply wasn’t possible before. Structured data is how search engines display rich results like recipes, reviews excerpts, event details, and more.

Schema vocabulary works alongside Microdata, RDFa, and JSON-LD formats, and there are plenty of free tools to help you learn the language and how to implement it. These include:

Search engines are ominously clever, but they’re not that clever. Structured data removes much of the guesswork from the crawling process, making it easier to understand and index content for relevant searches.

For a more in-depth introduction to the topic I humbly point you towards my article on Baking Structured Data Into the Design Process.

Site Speed

Search engines like fast websites. They’re easier to crawl, and they’re easier for users to browse. It doesn’t matter how wonderful your site is, if it takes ages to load people aren’t going to stick around to find out. Search engines are similarly impatient.

Like most things SEO, site speed best practice covers a spectrum all the way from common sense to highly technical tinkering. On the common sense side, don’t upload 12MB images when 200KB ones look exactly the same. If you absolutely must have massive high resolution images, link away to them instead. Images are the most popular resource type on the web, so don’t skimp on the compression. Most people will be browsing on their phones anyway.

Beyond that you get into more technical waters, though the goal remains the same: load quickly and smoothly. Streamline your code, cut out superfluous HTML, CSS, and JavaScript. Most importantly, as always, test what you’ve done. Site speed isn’t a theoretical concern; it’s a practical one.

Typically, Google has a dedicated tool for that purpose:

It will tell you exactly what’s wrong with a URL’s content and what you can do to improve it. Site speed is no great mystery; more often than not it’s simply a case of trimming the fat.

Mobile First

Most web browsing now takes place on mobile devices, not desktops. It is for this reason that Google will move to mobile-first indexing for all websites in September 2020. What that means is mobile renders of a page are what will be indexed, not desktop. That’s where you need to bring your A-game.

People are understandably drawn to the broad canvas offered by desktop-first design, but it’s not where our skills are most useful. If your website is a work of art on desktop but a mess on mobile your SEO will suffer — and that’s to say nothing of user experience.

More Articles On Mobile Usability

Think with your mobile cap on. Are ads monopolising above the fold space? Google dedicates 20 pages of its Search Quality Guidelines to understanding mobile user needs, covering everything from search engine result pages (SERPs) to location-specific search queries. Again, what search engines want needn’t be a mystery.

The Dark Side Of SEO

It would be remiss not to address the seedier side of SEO. There’s a lot of money to be made from ranking well for popular search terms. One of the main reasons search engines are so secretive about how they work is they know a number of websites will try to game the system in the name of Quick Wins™.

Black Hat SEO is quite a vibrant world in its own mustache-twirling way. From cramming keywords out of sight to purchasing backlinks from reputable websites, there’s an almost cartoonish instinct among some to avoid the hard work and self-improvement that good SEO entails.

Has black hat SEO worked in the past? Sometimes, yes. Sometimes very well indeed. However, search engines are always on the watch for bad behaviour, and they will punish it when they find it. The damage can be irreparable and besides, nobody likes a sleazeball.

There’s no substitute for quality long-term SEO strategies. Which brings us to…

Playing The Long Game

SEO is a marathon, not a sprint. Implementing best practice can produce immediate results, but long-term performance requires long-term maintenance. Besides, the journey is more important than the destination, isn’t it?

This article does not presume to give you a comprehensive guide to SEO. This is a resource for those who want to stay up to date with the industry as part of long-term self-improvement. In that spirit, the cheat sheet below is one of documentation, tools, journalists, thought leaders, podcasts, and other resources.

A reminder also that this is a live document, so don’t be shy about suggesting adjustments and additions as the SEO world continues to change.

Happy searching.

A Smashing SEO Cheat Sheet

This is not an exhaustive list, but hopefully there is enough for you to fall down the SEO rabbit hole. Please note that this cheat sheet will be updated occasionally, so if something/someone is missing, feel free to let us know! We’ll consider it for inclusion the next time we update the sheet.

Documentation

Authorities And Journalists

Publications, Blogs, & Forums

Tools

Free
Freemium/Paid

Podcasts And Video Series

Conferences

Articles on Smashing Magazine — For Web Designers And Developers

1-smashing-guide-search-engine-optimization
14 Aug

A Smashing Guide To The World Of Search Engine Optimization

by TBSCategories: News

A Smashing Guide To The World Of Search Engine Optimization

A Smashing Guide To The World Of Search Engine Optimization

Frederick O’Brien

Search engine optimization is essential to most websites. The industry is worth more than $ 70 billion a year, and it’s only going to grow. It has specialists, sub-specialists, thought leaders, dedicated publications, fantastically complex tools, and constant uncertainty at its heart. As Bob Dylan says, it’s just a shadow we’re all chasing.

All the more reason to stay sharp, no? Every tweak to major search engine algorithms sends shockwaves throughout the web. For those who don’t follow the SEO space it can be easy to lose track of the latest trends, authorities, and resources.

That’s what this page is for. It will break down SEO’s hot topics, common questions, and the best resources for staying up to date with that world. As such, this isn’t so much a guide to SEO as it is a guide to the world of SEO. Think of it as a cliff-notes, a primer for those looking to top up their knowledge and understand the latest trends.

For those really in a rush to get back into the groove, skip ahead to the cheat sheet rounding up all the resources included in this piece. As for the rest of you, on we go. It’s quite Google-heavy, because Google currently holds 85%+ market share, but rest assured the points apply to the likes of Baidu and DuckDuckGo as well.

And remember, this is a live document. If there’s something we’ve missed, tell us. In a world as fast-changing as SEO no resources can afford to sit on their hands.

Why SEO Matters

We won’t linger on this point, but it’s useful to remind ourselves what SEO is, why it’s important, and how it has evolved over the years. Keeping the foundational principles in mind allow you to see the woods rather than the trees.

So, in a nutshell, search engine optimisation is the means by which websites appear in search engines like Google, Bing, Baidu, and DuckDuckGo. It remains one of the best ways for websites to be found. More than 90% of web traffic comes through search engines, with Google alone processing trillions of searches a year. If you want your website to be seen, you want to be appearing in relevant search results.

Although SEO isn’t controversy-free, it is in principle the great equalizer. Positions can’t be bought; they’re based on relevance and quality. It is in the interest of search engines to deliver the best results possible, so SEO is the process by which a site becomes the best results possible.

The New Yorker's image
Image by John Caldwell of The New Yorker. (Large preview)

In a word, the appeal of SEO is traffic. It’s getting people to drop by and hopefully stick around. More traffic means more readers, more viewers, more customers, more attention.

Whatever your motivation is, the game is fundamentally the same. From content to site design, implementing makes websites better. Design is clearer and content is more focused, with visitors’ needs always front and centre. In a sense it gives you a 3D vision of the web, seeing web experiences from both human and computer perspectives.

Despite quick-fix guides to the contrary, SEO is best not retrofitted. As Suzanne Scacca writes, SEO belongs at the heart of the web design process. It can’t — and shouldn’t — be pushed off to writers or SEO executives. It is a sitewide concern, requiring sitewide attention.

Hot Topics

If you’re not comfortable with the basics of SEO — meta tags, alt text, link building, etc. — this page is not for you. This piece assumes a certain amount of foundational knowledge. Don’t panic, though, we won’t leave you hanging. Here are several terrific resources for getting started from scratch:

As for the rest of you, what follows are some of the SEO space’s slightly more technical hot topics, complete with conventional wisdom and resources for keeping up with their evolutions.

Great Content

I had to put this first. The sheer amount of data involved in SEO makes it easy to lose sight of an important fact: you’re making websites for people, not search engines. As corny as it sounds, in the long term the best way to perform well in organic search is to be the best you possible.

Search engines value good content above all else. However much the intricacies of SEO change, this remains true. It’s a rock solid foundation for SEO. Optimising a brilliant website is easy; optimising a bad one is hard, and often leads to black hat behaviour. (More on that below.) Yes, there are poorly optimised websites that perform well in search, for a variety of reasons, but grumbling about will get you nowhere.

What does ‘good content’ mean in concrete terms? It’s not as arbitrary as you might think. Search engines generally keep their cards close to their chest, but where content quality is concerned they’re as transparent as you could hope.

For those out of the SEO loop there are few better ways of getting up to speed than reading through Google’s latest Search Quality Evaluator Guidelines. Why guess what search engines want when they’ve written a book’s worth of documentation on the subject? Topics covered in the latest edition include:

  • Expertise, Authoritativeness, and Trustworthiness (E-A-T),
  • Your Money or Your Life (YMYL) Pages,
  • The reputation of websites and creators,
  • Mobile user needs,
  • Auto-generated content,
  • Deceptive page design,
  • What low quality pages look like.

Whether you’re a designer or a copywriter, this is all valuable information.

Say what you like about Google’s more nefarious practices, but where organic search is concerned they want websites to be goodie two shoes. Write brilliant articles; build fast, practical sites; use beautiful visuals; design ethically; be transparent about who you are and what you do; and never, ever let SEO be the tail that wags the dog. Quality will win out in the end.

Accessibility

Happily, the web development space seems to be warming up to talk of accessibility. There is plenty of natural overlap between SEO and accessibility, though sadly there is currently little evidence that super accessible websites get a boost in search. Accessibility barely features in Google’s mammoth Search Quality Guidelines document.

There is, however, a huge amount of overlap between accessibility best practice and SEO best practice. These include:

  • Image alt text,
  • Descriptive title and header tags,
  • Video transcriptions,
  • Content sections,
  • Clear, logical sitemaps,
  • Colour contrast,

Almost everything worth doing for its own sake becomes SEO best practice eventually, so I’m inclined to endorse accessibility on both counts. The Web Content Accessibility Guidelines are a great place to start, especially the Four Principles of Accessibility.

WebAIM publishes annual reports on web accessibility, and Global Accessibility Awareness Day is a fantastic hub for events and campaigns. Also, to get a Smashing plug in, Steven Lambert’s piece on designing for accessibility and inclusion breaks the topic down splendidly.

The Curious Case Of JavaScript

JavaScript has grown into the third pillar of web design — joining HTML and CSS. The language allows for all manner of fancy interactive features that aren’t possible on static sites. That sophistication has brought with it some confusion where SEO is concerned.

Can JavaScript-heavy websites perform well in search? Yes, they can and do. When issues arise it’s almost always in the indexing process, when search engines crawl and render web pages for their databases.

Google has a finite crawl budget. If your page takes ages to load, there’s a decent chance search engines will skip over it. Render-blocking JavaScript is also frowned upon, especially for above the fold content. If possible, execute scripts after the page is loaded.

URL Inspection Tool
(Large preview)

In short, let search engines see pages the way people see them. Google Search Console has a URL Inspection Tool that will show you what it retrieves, what it renders, and any glaring issues.

Developers should not shy away from JavaScript for fear of angering the SEO gods. Yes, bloated, slow, gratuitous JavaScript will hurt your website’s search performance, but applied properly the language can also improve it. Indeed, formats like JSON are a staple of more sophisticated SEO markup, like Schema.

Here are some resources for getting into the weeds of JavaScript and SEO:

Remember also that the more solid your SEO foundations are, the less pressure there is on JavaScript to perform. Think of it as something that enhances the browsing experience rather than carries the water.

Structured Data

Metadata has come a long way since the early days of SEO. Meta titles and descriptions remain important, but there’s a whole other level becoming increasingly difficult to ignore — structured data.

Structured data, more specifically Schema, has been adopted by all the major search engines. Part of the Semantic Web push to make online data machine-readable, it allows you to label content with specificity that simply wasn’t possible before. Structured data is how search engines display rich results like recipes, reviews excerpts, event details, and more.

Schema vocabulary works alongside Microdata, RDFa, and JSON-LD formats, and there are plenty of free tools to help you learn the language and how to implement it. These include:

Search engines are ominously clever, but they’re not that clever. Structured data removes much of the guesswork from the crawling process, making it easier to understand and index content for relevant searches.

For a more in-depth introduction to the topic I humbly point you towards my article on Baking Structured Data Into the Design Process.

Site Speed

Search engines like fast websites. They’re easier to crawl, and they’re easier for users to browse. It doesn’t matter how wonderful your site is, if it takes ages to load people aren’t going to stick around to find out. Search engines are similarly impatient.

Like most things SEO, site speed best practice covers a spectrum all the way from common sense to highly technical tinkering. On the common sense side, don’t upload 12MB images when 200KB ones look exactly the same. If you absolutely must have massive high resolution images, link away to them instead. Images are the most popular resource type on the web, so don’t skimp on the compression. Most people will be browsing on their phones anyway.

Beyond that you get into more technical waters, though the goal remains the same: load quickly and smoothly. Streamline your code, cut out superfluous HTML, CSS, and JavaScript. Most importantly, as always, test what you’ve done. Site speed isn’t a theoretical concern; it’s a practical one.

Typically, Google has a dedicated tool for that purpose:

It will tell you exactly what’s wrong with a URL’s content and what you can do to improve it. Site speed is no great mystery; more often than not it’s simply a case of trimming the fat.

Mobile First

Most web browsing now takes place on mobile devices, not desktops. It is for this reason that Google will move to mobile-first indexing for all websites in September 2020. What that means is mobile renders of a page are what will be indexed, not desktop. That’s where you need to bring your A-game.

People are understandably drawn to the broad canvas offered by desktop-first design, but it’s not where our skills are most useful. If your website is a work of art on desktop but a mess on mobile your SEO will suffer — and that’s to say nothing of user experience.

Think with your mobile cap on. Are ads monopolising above the fold space? Google dedicates 20 pages of its Search Quality Guidelines to understanding mobile user needs, covering everything from search engine result pages (SERPs) to location-specific search queries. Again, what search engines want needn’t be a mystery.

The Dark Side Of SEO

It would be remiss not to address the seedier side of SEO. There’s a lot of money to be made from ranking well for popular search terms. One of the main reasons search engines are so secretive about how they work is they know a number of websites will try to game the system in the name of Quick Wins™.

Black Hat SEO is quite a vibrant world in its own mustache-twirling way. From cramming keywords out of sight to purchasing backlinks from reputable websites, there’s an almost cartoonish instinct among some to avoid the hard work and self-improvement that good SEO entails.

Has black hat SEO worked in the past? Sometimes, yes. Sometimes very well indeed. However, search engines are always on the watch for bad behaviour, and they will punish it when they find it. The damage can be irreparable and besides, nobody likes a sleazeball.

There’s no substitute for quality long-term SEO strategies. Which brings us to…

Playing The Long Game

SEO is a marathon, not a sprint. Implementing best practice can produce immediate results, but long-term performance requires long-term maintenance. Besides, the journey is more important than the destination, isn’t it?

This article does not presume to give you a comprehensive guide to SEO. This is a resource for those who want to stay up to date with the industry as part of long-term self-improvement. In that spirit, the cheat sheet below is one of documentation, tools, journalists, thought leaders, podcasts, and other resources.

A reminder also that this is a live document, so don’t be shy about suggesting adjustments and additions as the SEO world continues to change.

Happy searching.

A Smashing SEO Cheat Sheet

This is not an exhaustive list, but hopefully there is enough for you to fall down the SEO rabbit hole. Please note that this cheat sheet will be updated occasionally, so if something/someone is missing, feel free to let us know! We’ll consider it for inclusion the next time we update the sheet.

Documentation

Authorities And Journalists

Publications, Blogs, & Forums

Tools

Free
Freemium/Paid

Podcasts And Video Series

Conferences

Smashing Editorial (ra, yk, il)


Articles on Smashing Magazine — For Web Designers And Developers

cat-smashingconf-sf
05 Apr

A Journey Through The World Of Music (April 2018 Desktop Wallpapers)

by TBSCategories: News

A Journey Through The World Of Music (April 2018 Desktop Wallpapers)

A Journey Through The World Of Music (April 2018 Desktop Wallpapers)

Cosima Mielke

A song can wake memories, give you an energy boost, or inspire you. It can help overcome a creative trough or make a beautiful moment even more beautiful. To pay tribute to the music you love, we announced the “Illustrate your favorite song” wallpapers challenge a few weeks ago. And, well, today, we’re happy to present the lucky winner.

The idea behind the challenge was to design a desktop wallpaper for April 2018 in which you tell us a little story about your favorite song. What is the song about? What images arise in your head when you listen to it? How does it make you feel? Is it bold and full of energy or calm and relaxing? Artists and designers from across the globe took on the challenge, and, well, the results are a colorful journey through the world of music — earworms guaranteed. So without further ado, let’s dive right in.

Bunnies ahead!

The fluffy little fellows are an unmistakable sign that Easter is here, and, well, we’ve got a wallpapers post dedicated entirely to them and their companions in crime, the small, yellow chicks. Happy Easter! →

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

And The Winner Is …

Nikes On My Feet

Nikes On My Feet

PopArt Web Design from Serbia designed a wallpaper based on the song ‘Nikes on My Feet’ by Mac Miller. A great reminder to put on your shoes, get outside, and embrace spring.

“We got inspired by the song ‘Nikes on My Feet’ by Mac Miller, which was perfect for the upcoming month of April and the warm weather that spring brings. As Mac Miller said, ‘All I really need is some shoes on my feet…”

Download the wallpaper:

Congratulations, dear PopArt Web Design team! You won a ticket to one of our upcoming SmashingConfs. We’re already looking forward to meet you there. In San Francisco or Toronto, maybe?

More Submissions

A big Thank You to everyone who participated. Keep up the brilliant work!

Wildest Dreams

“We love the art direction, story and overall cinematography of the ‘Wildest Dreams’ music video by Taylor Swift. It inspired us to create this illustration. Hope it will look good on your desktops.” — Designed by Kasra Design from Malaysia.

Wildest Dreams

Yellow Submarine

“The Beatles — ‘Yellow Submarine’: This song is fun and at the same time there is a lot of interesting text that changes your thinking. Like everything that makes The Beatles.” — Designed by WebToffee from India.

Yellow Submarine

Learning To Fly

“Man has always wanted to fly like a bird and his striving for freedom is remarkable. After watching this song from Pink Floyd, I wanted to jump off a cliff and become an eagle so many times as a kid.” — Designed by WPFloor from India.

Learning To Fly

Wonderful Life

“My favorite song is ‘Wonderful Life’ from Black from my childhood. This picture that was taken in a very beautiful dock in Belgrade evokes a calm feeling from that song, a peacefulness of soul and mind. Each of us has a gift, but what is truly wonderful is to embrace a flair toward life in small things because, no need to run and hide, it’s a wonderful, Wonderful Life. Cheers!” — Designed by Marija Zaric from Belgrade, Serbia.

Wonderful Life

Purple Rain

“I love Prince and I was very sad when he left. This song is pretty romantic and makes me dream…” — Designed by Purple from India.

Purple Rain

An Autumn Night

“‘My autumn night vanishes into light, Who will I leave you with, my flute?’ The famous song written by Rabindranath Tagore, Nobel Prize winner in Literature 1913. The song is taken from his famous song collection ‘Gitabitan’.” — Designed by Suman Sil from India.

An Autumn Night

Dreadlock Rasta

“‘Buffalo Soldier’ is a nickname bestowed by the Native Americans to members of the U.S. 10th Cavalry Regiment of the United States Army, denoting their stubborn courage and toughness in battle. The song ‘Buffalo Soldier’ reflects on the courage and valour of these soldiers despite the racist, prejudicial system in which they operated.” — Designed by Sweans from London.

Dreadlock Rasta

Buena Vista Social Club

“I dance salsa and other Latin dances since 10 years. This makes me happy and makes me love life even more. This song by Chan Chan is one of the first Latin songs I’ve ever fallen in love with.” — Designed by Material Admin from India.

Buena Vista Social Club

Stairway To Heaven

“‘Stairway To Heaven’ by Led Zeppelin.” — Designed by Stellar from India.

Stairway To Heaven

Sounds Like Spring

“In spring you can hear all those beautiful sounds outside of the birds singing. Therefore I created this wallpaper of an old phonograph with lovely flowers coming out like music.” — Designed by Melissa Bogemans from Belgium.

Sounds Like Spring

Spring Wallpapers

Your favorite song wasn’t part of the collection? No worries, we’ve got some seasonal wallpapers for you to get your desktop ready for April, too, of course — no matter the weather. Please note that some of them are from our archives, and, thus, don’t come with a calendar.

Enjoy Easter

Designed by UIG Studio from Poland.

Enjoy Easter

No Winter Lasts Forever

“Here comes spring, breathing new life into the world around us.” — Designed by Norjimm Pvt Ltd from India.

No Winter Lasts Forever

Bunny

“Easter is the time to celebrate new beginnings, welcoming spring while rejoicing the festival of abundance with your loved ones and your family.” — Designed by Vipin Nayar from India.

Bunny

Brushes Are Flowers

“April is just around the corner of spring, so I added the flower, but it is also a gray month with all the rain that usually comes with it, so I added gray colors with a twist.” — Designed by Tiago Oliveira from Portugal.

Brushes Are Flowers

Earth Yey!

“April has a very special day: Earth Day! So I decided to pay tribute to this amazing planet by creating this image with a happy universe.” — Designed by Sara Andreia Agostinho from Portugal.

Earth Yey!

Strength To Face the Challenges

“April is a month that most people look back to see how far they got with the new year’s resolutions. It’s always overwhelming to realize that it’s almost half way to one year and there’s still so much to be done. This calendar wallpaper is designed to remind you that, ‘you’ve got this!’” — Designed by Metrovista from Orlando, Florida.

Strength To Face the Challenges

Happy Easter

Designed by Tazi Design from Australia.

Happy Easter

Relax!

“…and enjoy your Easter holidays with some good chocolate.” — Designed by Ricardo Gimenes from Brazil.

Relax!

Clover Field

Designed by Nathalie Ouederni from France.

Clover Field

Fairytale

“A tribute to Hans Christian Andersen. Happy Birthday!” — Designed by Roxi Nastase from Romania.

Fairytale

Springtime Sage

“Spring and fresh herbs always feel like they compliment each other. Keeping it light and fresh with this wallpaper welcomes a new season!” — Designed by Susan Chiang from the United States.

Springtime Sage

Fusion

Designed by Rio Creativo from Poland.

Fusion

Be Happy Bee

“Smell of spring flowers, especially daisies and open landscapes, the joy of freedom.” — Designed by Kiraly Tamas from Romania.

Be Happy Bee

Spring Infographics

“Spring comes for everyone, for big and for small. How spring is arranged? I suggest us to understand this question.” — Designed by Ilya Denisenko from Russia.

Spring Infographics

Flying On A Rainy Day!

“April is the month of spring or autumn depending where you live on the globe! It’s also the second rainiest month of the year. I was inspired by one simple motif to illustrate rain, birds and flowers. So either you witness rainy days or colorful ones … Enjoy April!” — Designed by Rana Kadry from Egypt.

Flying on a rainy day!

Without The Rain There Would Be No Rainbows

“I love April showers and the spring blooms they bring!” — Designed by Denise Johnson from Chicago.

Without The Rain There Would Be No Rainbows.

Good Day

“Some pretty flowers and spring time always make for a good day.” — Designed by Amalia Van Bloom from the United States.

good day

The Perpetual Circle

“The Black Forest, which is beginning right behind our office windows, so we can watch the perpetual circle of nature, when we take a look outside.” — Designed by Nils Kunath from Germany.

The perpetual circle

April Brings Spring

“With April comes spring, flowers and a fresh breathe of warmth and creativity.” — Designed by Zack Aronson from New York, US.

April X Tribeca Film Festival

Silly Sheep

Designed by Pietje Precies from The Netherlands.

Smashing Wallpaper - April 2011

Sakura

“Spring is finally here with its sweet Sakura’s flowers, which reminds me of my trip to Japan.” Designed by Laurence Vagner from France.

Smashing Wallpaper - April 2011

A Time For Reflection

“‘We’re all equal before a wave.’ – Laird Hamilton.” — Designed by Shawna Armstrong from the United States.

A Time for Reflection

Spring Rain

“Even the rain is beautiful during spring!” — Designed by Zlatina Petrova from Bulgaria.

Spring Rain

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works.

Join in next month!


Articles on Smashing Magazine — For Web Designers And Developers

29 Jan

Offboarding In The Online World

by TBSCategories: News

By now, we’ve all heard about onboarding — the beginning of a relationship between a company and a user — but what about offboarding? Both go hand in hand as being two of the most important interactions you can have with a user, but offboarding gets much less publicity and sometimes is even altogether ignored. So, what exactly is it, and why is it so important? Offboarding is usually described as the interaction between a company and their customer at the end of the customer journey.
Articles on Smashing Magazine — For Web Designers And Developers

Newer postsOlder posts
×

Powered by WhatsApp Chat

WhatsApp Chat is free, download and try it now here!

× Chat with Us