Curt Long

Shaders are a key concept if you want to unleash the raw power of your GPU. I will help you understand how they work and even experiment with their inner power in an easy way, thanks to Babylon.js³⁷¹.

How Does It Work? Link

Before experimenting, we must see how things work internally.

When dealing with hardware-accelerated 3D, you will have to deal with two CPUs: the main CPU and the GPU. The GPU is a kind of extremely specialized CPU.

The GPU is a state machine that you set up using the CPU. For instance, the CPU will configure the GPU to render lines instead of triangles; it will define whether transparency is on; and so on.

Once all of the states are set, the CPU can define what to render: the geometry.

The geometry is composed of:

• a list of points that are called vertices and stored in an array called vertex buffer,
• a list of indexes that define the faces (or triangles) stored in an array named index buffer.

The final step for the CPU is to define how to render the geometry; for this task, the CPU will define shaders in the GPU. Shaders are pieces of code that the GPU will execute for each of the vertices and pixels it has to render. (A vertex — or vertices when there are several of them — is a “point” in 3D).

There are two kinds of shaders: vertex shaders and pixel (or fragment) shaders.

Graphics Pipeline Link

Before digging into shaders, let’s step back. To render pixels, the GPU will take the geometry defined by the CPU and will do the following:

• Using the index buffer, three vertices are gathered to define a triangle.
• Index buffer contains a list of vertex indexes. This means that each entry in the index buffer is the number of a vertex in the vertex buffer.
• This is really useful to avoid duplicating vertices.

For instance, the following index buffer is a list of two faces: [1 2 3 1 3 4]. The first face contains vertex 1, vertex 2 and vertex 3. The second face contains vertex 1, vertex 3 and vertex 4. So, there are four vertices in this geometry:

²

The vertex shader is applied to each vertex of the triangle. The primary goal of the vertex shader is to produce a pixel for each vertex (the projection on the 2D screen of the 3D vertex):

⁴

Using these three pixels (which define a 2D triangle on the screen), the GPU will interpolate all values attached to the pixel (at least their positions), and the pixel shader will be applied to every pixel included in the 2D triangle in order to generate a color for every pixel:

⁶

This process is done for every face defined by the index buffer.

Obviously, due to its parallel nature, the GPU is able to process this step for a lot of faces simultaneously and achieve really good performance.

GLSL Link

We have just seen that to render triangles, the GPU needs two shaders: the vertex shader and the pixel shader. These shaders are written in a language named Graphics Library Shader Language (GLSL). It looks like C.

Here is a sample of a common vertex shader:

precision highp float; // Attributes attribute vec3 position; attribute vec2 uv; // Uniforms uniform mat4 worldViewProjection; // Varying varying vec2 vUV; void main(void) { gl_Position = worldViewProjection * vec4(position, 1.0); vUV = uv; } 

Vertex Shader Structure Link

A vertex shader contains the following:

• Attributes
  
  An attribute defines a portion of a vertex. By default, a vertex should at least contain a position (a vector3:x, y, z). However, as a developer, you can decide to add more information. For instance, in the former shader, there is a vector2 named uv (i.e. texture coordinates that allow you to apply a 2D texture to a 3D object).
• Uniforms
  
  A uniform is a variable used by the shader and defined by the CPU. The only uniform we have here is a matrix used to project the position of the vertex (x, y, z) to the screen (x, y).
• Varying
  
  Varying variables are values created by the vertex shader and transmitted to the pixel shader. Here, the vertex shader will transmit a vUV (a simple copy of uv) value to the pixel shader. This means that a pixel is defined here with a position and texture coordinates. These values will be interpolated by the GPU and used by the pixel shader.
• Main
  
  The function named main is the code executed by the GPU for each vertex and must at least produce a value for gl_position (the position of the current vertex on the screen).

We can see in our sample that the vertex shader is pretty simple. It generates a system variable (starting with gl_) named gl_position to define the position of the associated pixel, and it sets a varying variable called vUV.

The Voodoo Behind Matrices Link

The thing about our shader is that we have a matrix named worldViewProjection, and we use this matrix to project the vertex position to the gl_position variable. That is cool, but how do we get the value of this matrix? It is a uniform, so we have to define it on the CPU side (using JavaScript).

This is one of the complex parts of doing 3D. You must understand complex math (or you will have to use a 3D engine such as Babylon.js, which we will see later).

The worldViewProjection matrix is the combination of three different matrices:

⁸

Using the resulting matrix enables us to transform 3D vertices to 2D pixels, while taking into account the point of view and everything related to the position, scale and rotation of the current object.

This is your responsibility as a 3D developer: to create and keep this matrix up to date.

Back to the Shaders Link

Once the vertex shader is executed on every vertex (three times, then), we will have three pixels with the correct gl_position and a vUV value. The GPU is going to interpolate these values on every pixel contained in the triangle produced with these pixels.

Then, for each pixel, it will execute the pixel shader:

precision highp float; varying vec2 vUV; uniform sampler2D textureSampler; void main(void) { gl_FragColor = texture2D(textureSampler, vUV); } 

Pixel (or Fragment) Shader Structure Link

The structure of a pixel shader is similar to that of a vertex shader:

• Varying
  
  Varying variables are value created by the vertex shader and transmitted to the pixel shader. Here, the pixel shader will receive a vUV value from the vertex shader.
• Uniforms
  
  A uniform is a variable used by the shader and defined by the CPU. The only uniform we have here is a sampler, which is a tool used to read texture colors.
• Main
  
  The function named main is the code executed by the GPU for each pixel and that must at least produce a value for gl_FragColor (i.e. the color of the current pixel).

This pixel shader is fairly simple: It reads the color from the texture using texture coordinates from the vertex shader (which, in turn, gets it from the vertex).

The problem is that when shaders are developed, you are only halfway there, because you then have to deal with a lot of WebGL code. Indeed, WebGL is really powerful but also really low-level, and you have to do everything yourself, from creating the buffers to defining vertex structures. You also have to do all of the math, set all of the states, handle texture-loading, and so on.

Too Hard? BABYLON.ShaderMaterial To The Rescue Link

I know what you’re thinking: “Shaders are really cool, but I do not want to bother with WebGL’s internal plumbing or even with the math.”

And you are right! This is a perfectly legitimate question, and that is exactly why I created Babylon.js!

To use Babylon.js, you first need a simple web page:

<!DOCTYPE html> <html> <head> <title>Babylon.js</title> <script src="Babylon.js"></script> <script type="application/vertexShader"> precision highp float; // Attributes attribute vec3 position; attribute vec2 uv; // Uniforms uniform mat4 worldViewProjection; // Normal varying vec2 vUV; void main(void) { gl_Position = worldViewProjection * vec4(position, 1.0); vUV = uv; } </script> <script type="application/fragmentShader"> precision highp float; varying vec2 vUV; uniform sampler2D textureSampler; void main(void) { gl_FragColor = texture2D(textureSampler, vUV); } </script> <script src="index.js"></script> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; margin: 0px; overflow: hidden; } #renderCanvas { width: 100%; height: 100%; touch-action: none; -ms-touch-action: none; } </style> </head> <body> <canvas></canvas> </body> </html> 

You’ll notice that shaders are defined by <script> tags. With Babylon.js, you can also define them in separate files (.fx files).

• Babylon.js source¹⁰
• GitHub repository¹¹

Finally, the main JavaScript code is this:

"use strict"; document.addEventListener("DOMContentLoaded", startGame, false); function startGame() { if (BABYLON.Engine.isSupported()) { var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, false); var scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("Camera", 0, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas); // Creating sphere var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 5, scene); var amigaMaterial = new BABYLON.ShaderMaterial("amiga", scene, { vertexElement: "vertexShaderCode", fragmentElement: "fragmentShaderCode", }, { attributes: ["position", "uv"], uniforms: ["worldViewProjection"] }); amigaMaterial.setTexture("textureSampler", new BABYLON.Texture("amiga.jpg", scene)); sphere.material = amigaMaterial; engine.runRenderLoop(function () { sphere.rotation.y += 0.05; scene.render(); }); } }; 

You can see that I use BABYLON.ShaderMaterial to get rid of the burden of compiling, linking and handling shaders.

When you create BABYLON.ShaderMaterial, you have to specify the DOM element used to store the shaders or the base name of the files where the shaders are. If you choose to use files, you must create a file for each shader and use the following pattern: basename.vertex.fx and basename.fragment.fx. Then, you will have to create the material like this:

var cloudMaterial = new BABYLON.ShaderMaterial("cloud", scene, "./myShader", { attributes: ["position", "uv"], uniforms: ["worldViewProjection"] }); 

You must also specify the names of attributes and uniforms that you use.

Then, you can directly set the values of your uniforms and samplers using setTexture, setFloat, setFloats, setColor3, setColor4, setVector2, setVector3, setVector4, setMatrix functions.

Pretty simple, right?

And do you remember the previous worldViewProjection matrix, using Babylon.js and BABYLON.ShaderMaterial. You just don’t have to worry about it! BABYLON.ShaderMaterial will automatically compute it for you because you’ll declare it in the list of uniforms.

BABYLON.ShaderMaterial can also handle the following matrices for you:

• world,
• view,
• projection,
• worldView,
• worldViewProjection.

No need for math anymore. For instance, each time you execute sphere.rotation.y += 0.05, the world matrix of the sphere will be generated for you and transmitted to the GPU.

See the live result¹² for yourself.

Create Your Own Shader (CYOS) Link

Now, let’s go bigger and create a page where you can dynamically create your own shaders and see the result immediately. This page is going to use the same code that we discussed previously and is going to use the BABYLON.ShaderMaterial object to compile and execute shaders that you will create.

I used the ACE code editor for Create Your Own Shader¹³ (CYOS). It is an incredible code editor, with syntax highlighting. Feel free to have a look at it¹⁴.

Using the first combo box, you will be able to select predefined shaders. We will see each of them right after.

You can also change the mesh (i.e. the 3D object) used to preview your shaders using the second combo box.

The compile button is used to create a new BABYLON.ShaderMaterial from your shaders. The code used by this button is as follows:

// Compile shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, { vertexElement: "vertexShaderCode", fragmentElement: "fragmentShaderCode", }, { attributes: ["position", "normal", "uv"], uniforms: ["world", "worldView", "worldViewProjection"] }); var refTexture = new BABYLON.Texture("ref.jpg", scene); refTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE; refTexture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE; var amigaTexture = new BABYLON.Texture("amiga.jpg", scene); shaderMaterial.setTexture("textureSampler", amigaTexture); shaderMaterial.setTexture("refSampler", refTexture); shaderMaterial.setFloat("time", 0); shaderMaterial.setVector3("cameraPosition", BABYLON.Vector3.Zero()); shaderMaterial.backFaceCulling = false; mesh.material = shaderMaterial; 

Incredibly simple, right? The material is ready to send you three pre-computed matrices (world, worldView and worldViewProjection). Vertices will come with position, normal and texture coordinates. Two textures are also already loaded for you:

¹⁵

¹⁷

Finally, the renderLoop is where I update two convenient uniforms:

• One is called time and gets some funny animations.
• The other is called cameraPosition, which gets the position of the camera into your shaders (useful for lighting equations).

engine.runRenderLoop(function () { mesh.rotation.y += 0.001; if (shaderMaterial) { shaderMaterial.setFloat("time", time); time += 0.02; shaderMaterial.setVector3("cameraPosition", camera.position); } scene.render(); }); 

Basic Shader Link

Let’s start with the very first shader defined in CYOS: the basic shader.

We already know this shader. It computes the gl_position and uses texture coordinates to fetch a color for every pixel.

To compute the pixel position, we just need the worldViewProjection matrix and the vertex’s position:

precision highp float; // Attributes attribute vec3 position; attribute vec2 uv; // Uniforms uniform mat4 worldViewProjection; // Varying varying vec2 vUV; void main(void) { gl_Position = worldViewProjection * vec4(position, 1.0); vUV = uv; } 

Texture coordinates (uv) are transmitted unmodified to the pixel shader.

Please note that we need to add precision mediump float on the first line for both the vertex and pixel shaders because Chrome requires it. It specifies that, for better performance, we do not use full precision floating values.

The pixel shader is even simpler, because we just need to use texture coordinates and fetch a texture color:

 precision highp float; varying vec2 vUV; uniform sampler2D textureSampler; void main(void) { gl_FragColor = texture2D(textureSampler, vUV); } 

We previously saw that the textureSampler uniform is filled with the amiga texture. So, the result is the following:

¹⁹

Black and White Shader Link

Let’s continue with a new shader: the black and white shader. The goal of this shader is to use the previous one but with a black and white-only rendering mode.

To do so, we can keep the same vertex shader. The pixel shader will be slightly modified.

The first option we have is to take only one component, such as the green one:

precision highp float; varying vec2 vUV; uniform sampler2D textureSampler; void main(void) { gl_FragColor = vec4(texture2D(textureSampler, vUV).ggg, 1.0); } 

As you can see, instead of using .rgb (this operation is called a swizzle), we’ve used .ggg.

But if we want a really accurate black and white effect, then computing the luminance (which takes into account all components) would be better:

precision highp float; varying vec2 vUV; uniform sampler2D textureSampler; void main(void) { float luminance = dot(texture2D(textureSampler, vUV).rgb, vec3(0.3, 0.59, 0.11)); gl_FragColor = vec4(luminance, luminance, luminance, 1.0); } 

The dot operation (or dot product) is computed like this: result = v0.x * v1.x + v0.y * v1.y + v0.z * v1.z.

So, in our case, luminance = r * 0.3 + g * 0.59 + b * 0.11. (These values are based on the fact that the human eye is more sensitive to green.)

Sounds cool, doesn’t it?

²¹

Cell-Shading Shader Link

Let’s move to a more complex shader: the cell-shading shader.

This one will require us to get the vertex’s normal and the vertex’s position into the pixel shader. So, the vertex shader will look like this:

precision highp float; // Attributes attribute vec3 position; attribute vec3 normal; attribute vec2 uv; // Uniforms uniform mat4 world; uniform mat4 worldViewProjection; // Varying varying vec3 vPositionW; varying vec3 vNormalW; varying vec2 vUV; void main(void) { vec4 outPosition = worldViewProjection * vec4(position, 1.0); gl_Position = outPosition; vPositionW = vec3(world * vec4(position, 1.0)); vNormalW = normalize(vec3(world * vec4(normal, 0.0))); vUV = uv; } 

Please note that we also use the world matrix because position and normal are stored without any transformation, and we must apply the world matrix to take into account the object’s rotation.

The pixel shader is as follows:

precision highp float; // Lights varying vec3 vPositionW; varying vec3 vNormalW; varying vec2 vUV; // Refs uniform sampler2D textureSampler; void main(void) { float ToonThresholds[4]; ToonThresholds[0] = 0.95; ToonThresholds[1] = 0.5; ToonThresholds[2] = 0.2; ToonThresholds[3] = 0.03; float ToonBrightnessLevels[5]; ToonBrightnessLevels[0] = 1.0; ToonBrightnessLevels[1] = 0.8; ToonBrightnessLevels[2] = 0.6; ToonBrightnessLevels[3] = 0.35; ToonBrightnessLevels[4] = 0.2; vec3 vLightPosition = vec3(0, 20, 10); // Light vec3 lightVectorW = normalize(vLightPosition - vPositionW); // diffuse float ndl = max(0., dot(vNormalW, lightVectorW)); vec3 color = texture2D(textureSampler, vUV).rgb; if (ndl > ToonThresholds[0]) { color *= ToonBrightnessLevels[0]; } else if (ndl > ToonThresholds[1]) { color *= ToonBrightnessLevels[1]; } else if (ndl > ToonThresholds[2]) { color *= ToonBrightnessLevels[2]; } else if (ndl > ToonThresholds[3]) { color *= ToonBrightnessLevels[3]; } else { color *= ToonBrightnessLevels[4]; } gl_FragColor = vec4(color, 1.); } 

The goal of this shader is to simulate light, and instead of computing smooth shading, we will apply the light according to specific brightness thresholds. For instance, if the light intensity is between 1 (maximum) and 0.95, the color of the object (fetched from the texture) would be applied directly. If the intensity is between 0.95 and 0.5, the color would be attenuated by a factor of 0.8. And so on.

There are mainly four steps in this shader.

First, we declare thresholds and levels constants.

Then, we compute the lighting using the Phong equation (we’ll consider that the light is not moving):

vec3 vLightPosition = vec3(0, 20, 10); // Light vec3 lightVectorW = normalize(vLightPosition - vPositionW); // diffuse float ndl = max(0., dot(vNormalW, lightVectorW)); 

The intensity of light per pixel depends on the angle between the normal and light direction.

Then, we get the texture color for the pixel.

Finally, we check the threshold and apply the level to the color.

The result looks like a cartoon object:

²³

Phong Shader Link

We used a portion of the Phong equation in the previous shader. Let’s use it completely now.

The vertex shader is clearly simple here because everything will be done in the pixel shader:

precision highp float; // Attributes attribute vec3 position; attribute vec3 normal; attribute vec2 uv; // Uniforms uniform mat4 worldViewProjection; // Varying varying vec3 vPosition; varying vec3 vNormal; varying vec2 vUV; void main(void) { vec4 outPosition = worldViewProjection * vec4(position, 1.0); gl_Position = outPosition; vUV = uv; vPosition = position; vNormal = normal; } 

According to the equation, we must compute the “diffuse” and “specular” parts using light direction and vertex’s normal:

precision highp float; // Varying varying vec3 vPosition; varying vec3 vNormal; varying vec2 vUV; // Uniforms uniform mat4 world; // Refs uniform vec3 cameraPosition; uniform sampler2D textureSampler; void main(void) { vec3 vLightPosition = vec3(0, 20, 10); // World values vec3 vPositionW = vec3(world * vec4(vPosition, 1.0)); vec3 vNormalW = normalize(vec3(world * vec4(vNormal, 0.0))); vec3 viewDirectionW = normalize(cameraPosition - vPositionW); // Light vec3 lightVectorW = normalize(vLightPosition - vPositionW); vec3 color = texture2D(textureSampler, vUV).rgb; // diffuse float ndl = max(0., dot(vNormalW, lightVectorW)); // Specular vec3 angleW = normalize(viewDirectionW + lightVectorW); float specComp = max(0., dot(vNormalW, angleW)); specComp = pow(specComp, max(1., 64.)) * 2.; gl_FragColor = vec4(color * ndl + vec3(specComp), 1.); } 

We already used the diffuse part in the previous shader, so here we just need to add the specular part. You can find more information about Phong shading on Wikipedia²⁵.

The result of our sphere:

²⁶

Discard Shader Link

For the discard shader, I would like to introduce a new concept: the discard keyword.

This shader discards every non-red pixel and creates the illusion of a dug object.

The vertex shader is the same used by the basic shader:

precision highp float; // Attributes attribute vec3 position; attribute vec3 normal; attribute vec2 uv; // Uniforms uniform mat4 worldViewProjection; // Varying varying vec2 vUV; void main(void) { gl_Position = worldViewProjection * vec4(position, 1.0); vUV = uv; } 

The pixel shader on its side will have to test the color and use discard when, for instance, the green component is too high:

precision highp float; varying vec2 vUV; // Refs uniform sampler2D textureSampler; void main(void) { vec3 color = texture2D(textureSampler, vUV).rgb; if (color.g > 0.5) { discard; } gl_FragColor = vec4(color, 1.); } 

The result is a little funny:

²⁸

Wave Shader Link

We’ve played a lot with pixel shader, but I also want to let you know that we can do a lot of thing with vertex shaders.

For the wave shader, we will reuse the Phong pixel shader.

The vertex shader will use the uniform named time to get some animated values. Using this uniform, the shader will generate a wave with the vertices’ positions:

precision highp float; // Attributes attribute vec3 position; attribute vec3 normal; attribute vec2 uv; // Uniforms uniform mat4 worldViewProjection; uniform float time; // Varying varying vec3 vPosition; varying vec3 vNormal; varying vec2 vUV; void main(void) { vec3 v = position; v.x += sin(2.0 * position.y + (time)) * 0.5; gl_Position = worldViewProjection * vec4(v, 1.0); vPosition = position; vNormal = normal; vUV = uv; } 

A sinus is applied to position.y, and the result is as follows:

³⁰

Spherical Environment Mapping Link

This one was largely inspired by the article “Creating a Spherical Reflection/Environment Mapping Shader³².” I’ll let you read that excellent article and play with the associated shader.

³³

Fresnel Shader Link

I would like to conclude this article with my favorite: the Fresnel shader.

This shader is used to apply a different intensity according to the angle between the view direction and the vertex’s normal.

The vertex shader is the same one used by the cell-shading shader, and we can easily compute the Fresnel term in our pixel shader (because we have the normal and the camera’s position, which can be used to evaluate the view direction):

precision highp float; // Lights varying vec3 vPositionW; varying vec3 vNormalW; // Refs uniform vec3 cameraPosition; uniform sampler2D textureSampler; void main(void) { vec3 color = vec3(1., 1., 1.); vec3 viewDirectionW = normalize(cameraPosition - vPositionW); // Fresnel float fresnelTerm = dot(viewDirectionW, vNormalW); fresnelTerm = clamp(1.0 - fresnelTerm, 0., 1.); gl_FragColor = vec4(color * fresnelTerm, 1.); } 

³⁵

Your Shader? Link

You are now more prepared to create your own shader. Feel free to post to the Babylon.js forum to share your experiments!

If you want to go further, here are some useful links:

• Babylon.js³⁷¹, official website
• Babylon.js³⁸, GitHub repository
• Babylon.js forum³⁹, HTML5 Game Devs
• Create Your Own Shader (CYOS)⁴⁰, Babylon.js
• OpenGL Shading Language⁴¹,” Wikipedia
• OpenGL Shading Language⁴², documentation

(rb, al)

Footnotes Link

1. 1 http://www.babylonjs.com/
2. 2 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-1-large-opt.png
3. 3 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-1-large-opt.png
4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-2-large-opt.png
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-2-large-opt.png
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-3-large-opt.png
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-3-large-opt.png
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-4-large-opt.png
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-4-large-opt.png
10. 10 http://www.babylonjs.com/babylon.js
11. 11 https://github.com/BabylonJS/Babylon.js
12. 12 http://www.catuhe.com/msdn/babylonjs/CYOS/step1/index.html
13. 13 http://www.babylonjs.com/CYOS
14. 14 http://ace.c9.io/#nav=about
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-5-amiga-large-opt.jpg
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-5-amiga-large-opt.jpg
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-6-ref-large-opt.jpg
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-6-ref-preview-opt.jpg
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-7-Capture1-large-opt.png
20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-7-Capture1-large-opt.png
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-8-Capture2-large-opt.png
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-8-Capture2-large-opt.png
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-9-Capture3-large-opt.png
24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-9-Capture3-large-opt.png
25. 25 https://en.wikipedia.org/wiki/Phong_reflection_model
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-10-Capture4-large-opt.png
27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-10-Capture4-large-opt.png
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-11-Capture5-large-opt.png
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-11-Capture5-large-opt.png
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-12-Capture6-large-opt.png
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-12-Capture6-large-opt.png
32. 32 http://www.clicktorelease.com/blog/creating-spherical-environment-mapping-shader
33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-13-Capture7-large-opt.png
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-13-Capture7-large-opt.png
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-14-Capture8-large-opt.png
36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/09/babylon-14-Capture8-large-opt.png
37. 37 http://www.babylonjs.com/
38. 38 https://github.com/BabylonJS/Babylon.js
39. 39 http://www.html5gamedevs.com/forum/16-babylonjs/
40. 40 http://www.babylonjs.com/CYOS
41. 41 http://en.wikipedia.org/wiki/OpenGL_Shading_Language
42. 42 https://www.opengl.org/documentation/glsl/

↑ Back to topTweet itShare on Facebook

Sometimes the best inspiration lies right in front of us. With that in mind, we embarked on a special creativity mission¹ eight years ago: to provide you with inspiring and unique desktop wallpapers every month. Wallpapers that are a little more distinctive than the usual crowd and that are bound to fuel your ideas.

We are very thankful to all artists and designers who have contributed and are still diligently contributing to this mission, who challenge their artistic abilities each month anew to keep the steady stream of wallpapers flowing. This post features their artwork for November 2016. Both versions with and without a calendar can be downloaded for free. It’s time to freshen up your desktop!

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 Calendars series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?

Welcome Home Dear Winter

“The smell of winter is lingering in the air. The time to be home! Winter reminds us of good food, of the warmth, the touch of a friendly hand, and a talk beside the fire. Keep calm and let us welcome winter.” — Designed by Acodez IT Solutions³ from India.

⁴

• preview⁵
• with calendar: 640×480⁶, 800×480⁷, 800×600⁸, 1024×768⁹, 1024×1024¹⁰, 1152×864¹¹, 1280×720¹², 1280×960¹³, 1280×1024¹⁴, 1366×768¹⁵, 1400×1050¹⁶, 1440×900¹⁷, 1600×1200¹⁸, 1680×1050¹⁹, 1680×1200²⁰, 1920×1080²¹, 1920×1200²², 1920×1440²³, 2560×1440²⁴
• without calendar: 640×480²⁵, 800×480²⁶, 800×600²⁷, 1024×768²⁸, 1024×1024²⁹, 1152×864³⁰, 1280×720³¹, 1280×960³², 1280×1024³³, 1366×768³⁴, 1400×1050³⁵, 1440×900³⁶, 1600×1200³⁷, 1680×1050³⁸, 1680×1200³⁹, 1920×1080⁴⁰, 1920×1200⁴¹, 1920×1440⁴², 2560×1440⁴³

Deer Fall, I Love You!

Designed by Maria Porter⁴⁴ from the United States.

⁴⁵

• preview⁴⁶
• with calendar: 320×480⁴⁷, 800×600⁴⁸, 1280×800⁴⁹, 1280×1024⁵⁰, 1440×900⁵¹, 1680×1050⁵², 2560×1440⁵³
• without calendar: 320×480⁵⁴, 800×600⁵⁵, 1280×800⁵⁶, 1280×1024⁵⁷, 1440×900⁵⁸, 1680×1050⁵⁹, 2560×1440⁶⁰

Time To Give Thanks!

Designed by Glynnis Owen⁶¹ from Australia.

⁶²

• preview⁶³
• with calendar: 320×480⁶⁴, 640×480⁶⁵, 800×600⁶⁶, 1024×768⁶⁷, 1152×864⁶⁸, 1280×720⁶⁹, 1280×960⁷⁰, 1600×1200⁷¹, 1920×1080⁷², 1920×1440⁷³, 2560×1440⁷⁴
• without calendar: 320×480⁷⁵, 640×480⁷⁶, 800×600⁷⁷, 1024×768⁷⁸, 1152×864⁷⁹, 1280×720⁸⁰, 1280×960⁸¹, 1600×1200⁸², 1920×1080⁸³, 1920×1440⁸⁴, 2560×1440⁸⁵

Remember, Remember!

“It’s Bonfire Night on the 5th, and the nursery rhyme we learn at school in the UK starts ‘Remember, remember the Fifth of November’, so this is my tribute!” — Designed by James Mitchell⁸⁶ from the United Kingdom.

⁸⁷

• preview⁸⁸
• with calendar: 1280×720⁸⁹, 1280×800⁹⁰, 1366×768⁹¹, 1440×900⁹², 1680×1050⁹³, 1920×1080⁹⁴, 1920×1200⁹⁵, 2560×1440⁹⁶, 2880×1800⁹⁷
• without calendar: 1280×720⁹⁸, 1280×800⁹⁹, 1366×768¹⁰⁰, 1440×900¹⁰¹, 1680×1050¹⁰², 1920×1080¹⁰³, 1920×1200¹⁰⁴, 2560×1440¹⁰⁵, 2880×1800¹⁰⁶

Perfect Time For Cats!

Designed by Brainer¹⁰⁷ from Ukraine.

¹⁰⁸

• preview¹⁰⁹
• with calendar: 800×600¹¹⁰, 1024×768¹¹¹, 1152×864¹¹², 1280×800¹¹³, 1280×960¹¹⁴, 1400×1050¹¹⁵, 1440×900¹¹⁶, 1600×1200¹¹⁷, 1680×1050¹¹⁸, 1920×1200¹¹⁹, 1920×1440¹²⁰
• without calendar: 800×600¹²¹, 1024×768¹²², 1152×864¹²³, 1280×800¹²⁴, 1280×960¹²⁵, 1400×1050¹²⁶, 1440×900¹²⁷, 1600×1200¹²⁸, 1680×1050¹²⁹, 1920×1200¹³⁰, 1920×1440¹³¹

Autumn Wreath

“I love the changing seasons — especially the autumn colors and festivals here around this time of year!” — Designed by Rachel Litzinger¹³² from the United States.

¹³³

• preview¹³⁴
• with calendar: 640×1136¹³⁵, 1080×1920¹³⁶, 1280×800¹³⁷, 1280×960¹³⁸, 1366×768¹³⁹, 1440×900¹⁴⁰, 1600×900¹⁴¹, 1680×1200¹⁴², 1920×1080¹⁴³, 1920×1200¹⁴⁴, 2048×2048¹⁴⁵, 2560×1440¹⁴⁶
• without calendar: 640×1136¹⁴⁷, 1080×1920¹⁴⁸, 1280×800¹⁴⁹, 1280×960¹⁵⁰, 1366×768¹⁵¹, 1440×900¹⁵², 1600×900¹⁵³, 1680×1200¹⁵⁴, 1920×1080¹⁵⁵, 1920×1200¹⁵⁶, 2048×2048¹⁵⁷, 2560×1440¹⁵⁸

Moonlight Bats

“I designed some Halloween characters and then this idea came into my mind – a bat family hanging around in the moonlight. A cute and scary mood is just perfect for autumn.” — Designed by Carmen Eisendle¹⁵⁹ from Germany.

¹⁶⁰

• preview¹⁶¹
• with calendar: 640×480¹⁶², 800×600¹⁶³, 1024×768¹⁶⁴, 1280×800¹⁶⁵, 1280×960¹⁶⁶, 1440×900¹⁶⁷, 1600×1200¹⁶⁸, 1680×1050¹⁶⁹, 1680×1260¹⁷⁰, 1920×1200¹⁷¹, 1920×1440¹⁷², 2560×1440¹⁷³, 2560×1600¹⁷⁴
• without calendar: 640×480¹⁷⁵, 800×600¹⁷⁶, 1024×768¹⁷⁷, 1280×800¹⁷⁸, 1280×960¹⁷⁹, 1440×900¹⁸⁰, 1600×1200¹⁸¹, 1680×1050¹⁸², 1680×1260¹⁸³, 1920×1200¹⁸⁴, 1920×1440¹⁸⁵, 2560×1440¹⁸⁶, 2560×1600¹⁸⁷

Be Grateful For The Unlikely Friends

“Thanksgiving is coming and I think one of the things we should be thankful for are the unlikely friendships.” — Designed by Maria Keller¹⁸⁸ from Mexico.

¹⁸⁹

• preview¹⁹⁰
• with calendar: 320×480¹⁹¹, 640×480¹⁹², 640×1136¹⁹³, 750×1334¹⁹⁴, 800×480¹⁹⁵, 800×600¹⁹⁶, 1024×768¹⁹⁷, 1024×1024¹⁹⁸, 1152×864¹⁹⁹, 1242×2208²⁰⁰, 1280×720²⁰¹, 1280×800²⁰², 1280×960²⁰³, 1280×1024²⁰⁴, 1366×768²⁰⁵, 1400×1050²⁰⁶, 1440×900²⁰⁷, 1600×1200²⁰⁸, 1680×1050²⁰⁹, 1680×1200²¹⁰, 1920×1080²¹¹, 1920×1200²¹², 1920×1440²¹³, 2560×1440²¹⁴, 2880×1800²¹⁵
• without calendar: 320×480²¹⁶, 640×480²¹⁷, 640×1136²¹⁸, 750×1334²¹⁹, 800×480²²⁰, 800×600²²¹, 1024×768²²², 1024×1024²²³, 1152×864²²⁴, 1242×2208²²⁵, 1280×720²²⁶, 1280×800²²⁷, 1280×960²²⁸, 1280×1024²²⁹, 1366×768²³⁰, 1400×1050²³¹, 1440×900²³², 1600×1200²³³, 1680×1050²³⁴, 1680×1200²³⁵, 1920×1080²³⁶, 1920×1200²³⁷, 1920×1440²³⁸, 2560×1440²³⁹, 2880×1800²⁴⁰

Coffee And Sweets

“The cold, almost winter weather. So nice to have a cup of hot coffee and some sweets.” — Designed by Karetina Irina²⁴¹ from the Russian Federation.

²⁴²

• preview²⁴³
• with calendar: 320×480²⁴⁴, 640×480²⁴⁵, 800×480²⁴⁶, 800×600²⁴⁷, 1024×768²⁴⁸, 1024×1024²⁴⁹, 1152×864²⁵⁰, 1280×720²⁵¹, 1280×800²⁵², 1280×960²⁵³, 1280×1024²⁵⁴, 1366×768²⁵⁵, 1400×1050²⁵⁶, 1440×900²⁵⁷, 1600×1200²⁵⁸, 1680×1050²⁵⁹, 1680×1200²⁶⁰, 1920×1080²⁶¹, 1920×1200²⁶², 1920×1440²⁶³, 2560×1440²⁶⁴, 2880×1800²⁶⁵
• without calendar: 320×480²⁶⁶, 640×480²⁶⁷, 800×480²⁶⁸, 800×600²⁶⁹, 1024×768²⁷⁰, 1024×1024²⁷¹, 1152×864²⁷², 1280×720²⁷³, 1280×800²⁷⁴, 1280×960²⁷⁵, 1280×1024²⁷⁶, 1366×768²⁷⁷, 1400×1050²⁷⁸, 1440×900²⁷⁹, 1600×1200²⁸⁰, 1680×1050²⁸¹, 1680×1200²⁸², 1920×1080²⁸³, 1920×1200²⁸⁴, 1920×1440²⁸⁵, 2560×1440²⁸⁶, 2880×1800²⁸⁷

Autumn In Paris

Designed by Lia Pantazi²⁸⁸ from Greece.

²⁸⁹

• preview²⁹⁰
• with calendar: 800×600²⁹¹, 1024×768²⁹², 1152×864²⁹³, 1280×720²⁹⁴, 1280×800²⁹⁵, 1280×960²⁹⁶, 1366×768²⁹⁷, 1400×1050²⁹⁸, 1440×900²⁹⁹, 1600×1200³⁰⁰, 1680×1050³⁰¹, 1920×1080³⁰², 1920×1200³⁰³, 1920×1440³⁰⁴, 2560×1440³⁰⁵
• without calendar: 800×600³⁰⁶, 1024×768³⁰⁷, 1152×864³⁰⁸, 1280×720³⁰⁹, 1280×800³¹⁰, 1280×960³¹¹, 1366×768³¹², 1400×1050³¹³, 1440×900³¹⁴, 1600×1200³¹⁵, 1680×1050³¹⁶, 1920×1080³¹⁷, 1920×1200³¹⁸, 1920×1440³¹⁹, 2560×1440³²⁰

Dream World

“Look at the baby’s smiling face! Babies are always happy. There is an untouched innocence behind their smile that we adults fail to enjoy and cherish. When a baby’s smile can present you with hope, dreams and the aspiration to spread happiness and love, then why can’t you? Yes, let us spread the dream of love, happiness and peace all over the world.” — Designed by Krishnankutty KN³²¹ from India.

³²²

• preview³²³
• with calendar: 320×480³²⁴, 640×480³²⁵, 800×480³²⁶, 800×600³²⁷, 1024×768³²⁸, 1024×1024³²⁹, 1152×864³³⁰, 1280×720³³¹, 1280×960³³², 1280×1024³³³, 1366×768³³⁴, 1400×1050³³⁵, 1440×900³³⁶, 1600×1200³³⁷, 1680×1050³³⁸, 1680×1200³³⁹, 1920×1080³⁴⁰, 1920×1200³⁴¹, 1920×1440³⁴², 2560×1440³⁴³
• without calendar: 320×480³⁴⁴, 640×480³⁴⁵, 800×480³⁴⁶, 800×600³⁴⁷, 1024×768³⁴⁸, 1024×1024³⁴⁹, 1152×864³⁵⁰, 1280×720³⁵¹, 1280×960³⁵², 1280×1024³⁵³, 1366×768³⁵⁴, 1400×1050³⁵⁵, 1440×900³⁵⁶, 1600×1200³⁵⁷, 1680×1050³⁵⁸, 1680×1200³⁵⁹, 1920×1080³⁶⁰, 1920×1200³⁶¹, 1920×1440³⁶², 2560×1440³⁶³

We Are All The Same Inside

“No man’s your enemy. No man’s your slave. Looking at people in an Apartheid way is a thing of the past. My blood is the same as yours, so why must we hurt our brothers and sisters when we are all the same? Believe in love, it will show wonders.” — Designed by Faheem Nistar³⁶⁴ from Dubai.

³⁶⁵

• preview³⁶⁶
• with calendar: 320×480³⁶⁷, 640×480³⁶⁸, 800×600³⁶⁹, 1152×864³⁷⁰, 1280×720³⁷¹, 1280×800³⁷², 1280×960³⁷³, 1366×768³⁷⁴, 1400×1050³⁷⁵, 1440×900³⁷⁶, 1600×1200³⁷⁷, 1680×1050³⁷⁸, 1920×1080³⁷⁹, 1920×1200³⁸⁰, 1920×1440³⁸¹, 2560×1440³⁸²
• without calendar: 320×480³⁸³, 640×480³⁸⁴, 800×600³⁸⁵, 1152×864³⁸⁶, 1280×720³⁸⁷, 1280×800³⁸⁸, 1280×960³⁸⁹, 1366×768³⁹⁰, 1400×1050³⁹¹, 1440×900³⁹², 1600×1200³⁹³, 1680×1050³⁹⁴, 1920×1080³⁹⁵, 1920×1200³⁹⁶, 1920×1440³⁹⁷, 2560×1440³⁹⁸

Coffee Time

“It’s the time for being at home and enjoying the small things… I love having a coffee while watching the rain outside my window.” — Designed by Veronica Valenzuela³⁹⁹ from Spain.

⁴⁰⁰

• preview⁴⁰¹
• with calendar: 800×480⁴⁰², 1024×768⁴⁰³, 1152×864⁴⁰⁴, 1280×800⁴⁰⁵, 1280×960⁴⁰⁶, 1440×900⁴⁰⁷, 1680×1200⁴⁰⁸, 1920×1080⁴⁰⁹, 2560×1440⁴¹⁰
• without calendar: 800×480⁴¹¹, 1024×768⁴¹², 1152×864⁴¹³, 1280×800⁴¹⁴, 1280×960⁴¹⁵, 1440×900⁴¹⁶, 1680×1200⁴¹⁷, 1920×1080⁴¹⁸, 2560×1440⁴¹⁹

Macy’s Thanksgiving Day Parade Fun

“One of the first things that everyone thinks of when they think of November is Thanksgiving. When I think of Thanksgiving, I think of my dad cooking tons of delicious food all day while my sisters and I sit in front of the fire and watch the Macy’s Day Parade. This is my favorite time in November.” — Designed by Gabi Minnich⁴²⁰ from the United States.

⁴²¹

• preview⁴²²
• with calendar: 1024×768⁴²³, 1280×800⁴²⁴, 1440×900⁴²⁵, 1600×1200⁴²⁶, 1920×1200⁴²⁷
• without calendar: 1024×768⁴²⁸, 1280×800⁴²⁹, 1440×900⁴³⁰, 1600×1200⁴³¹, 1920×1200⁴³²

Hot Drinks For Cold Sloths

“As an assignment for my Digital Theory & Skills class, we were asked to design a wallpaper for Smashing Magazine. I centered my idea around the idea of hot drinks because, in the U.S., we have three National days during the month of November dedicated to beverages that warm our cold, ‘sloth-like’ selves up!” — Designed by Rachel Keslosky⁴³³ from the United States.

⁴³⁴

• preview⁴³⁵
• with calendar: 1024×768⁴³⁶, 1280×1024⁴³⁷, 1440×900⁴³⁸, 1600×1200⁴³⁹, 1920×1200⁴⁴⁰, 2560×1440⁴⁴¹
• without calendar: 1024×768⁴⁴², 1280×1024⁴⁴³, 1440×900⁴⁴⁴, 1600×1200⁴⁴⁵, 1920×1200⁴⁴⁶, 2560×1440⁴⁴⁷

Join In Next Month! Link

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. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

A big thank you to all designers for their participation. Join in next month⁴⁴⁸!

What’s Your Favorite? Link

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.

(cm)

Footnotes Link

1. 1 https://www.smashingmagazine.com/tag/wallpapers/
2. 2 https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/
3. 3 http://acodez.in/
4. 4 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nov-16-welcome-home-dear-winter-full.png
5. 5 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nov-16-welcome-home-dear-winter-preview.png
6. 6 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-640×480.png
7. 7 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-800×480.png
8. 8 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-800×600.png
9. 9 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-1024×768.png
10. 10 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-1024×1024.png
11. 11 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-1152×864.png
12. 12 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-1280×720.png
13. 13 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-1280×960.png
14. 14 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-1280×1024.png
15. 15 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-1366×768.png
16. 16 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-1400×1050.png
17. 17 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-1440×900.png
18. 18 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-1600×1200.png
19. 19 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-1680×1050.png
20. 20 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-1680×1200.png
21. 21 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-1920×1080.png
22. 22 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-1920×1200.png
23. 23 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-1920×1440.png
24. 24 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/cal/nov-16-welcome-home-dear-winter-cal-2560×1440.png
25. 25 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-640×480.png
26. 26 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-800×480.png
27. 27 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-800×600.png
28. 28 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-1024×768.png
29. 29 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-1024×1024.png
30. 30 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-1152×864.png
31. 31 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-1280×720.png
32. 32 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-1280×960.png
33. 33 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-1280×1024.png
34. 34 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-1366×768.png
35. 35 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-1400×1050.png
36. 36 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-1440×900.png
37. 37 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-1600×1200.png
38. 38 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-1680×1050.png
39. 39 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-1680×1200.png
40. 40 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-1920×1080.png
41. 41 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-1920×1200.png
42. 42 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-1920×1440.png
43. 43 http://files.smashingmagazine.com/wallpapers/nov-16/welcome-home-dear-winter/nocal/nov-16-welcome-home-dear-winter-nocal-2560×1440.png
44. 44 http://www.mariaclaireporter.com/portfolio.html
45. 45 http://files.smashingmagazine.com/wallpapers/nov-16/deer-fall-i-love-you/nov-16-deer-fall-i-love-you-full.png
46. 46 http://files.smashingmagazine.com/wallpapers/nov-16/deer-fall-i-love-you/nov-16-deer-fall-i-love-you-preview.png
47. 47 http://files.smashingmagazine.com/wallpapers/nov-16/deer-fall-i-love-you/cal/nov-16-deer-fall-i-love-you-cal-320×480.png
48. 48 http://files.smashingmagazine.com/wallpapers/nov-16/deer-fall-i-love-you/cal/nov-16-deer-fall-i-love-you-cal-800×600.png
49. 49 http://files.smashingmagazine.com/wallpapers/nov-16/deer-fall-i-love-you/cal/nov-16-deer-fall-i-love-you-cal-1280×800.png
50. 50 http://files.smashingmagazine.com/wallpapers/nov-16/deer-fall-i-love-you/cal/nov-16-deer-fall-i-love-you-cal-1280×1024.png
51. 51 http://files.smashingmagazine.com/wallpapers/nov-16/deer-fall-i-love-you/cal/nov-16-deer-fall-i-love-you-cal-1440×900.png
52. 52 http://files.smashingmagazine.com/wallpapers/nov-16/deer-fall-i-love-you/cal/nov-16-deer-fall-i-love-you-cal-1680×1050.png
53. 53 http://files.smashingmagazine.com/wallpapers/nov-16/deer-fall-i-love-you/cal/nov-16-deer-fall-i-love-you-cal-2560×1440.png
54. 54 http://files.smashingmagazine.com/wallpapers/nov-16/deer-fall-i-love-you/nocal/nov-16-deer-fall-i-love-you-nocal-320×480.png
55. 55 http://files.smashingmagazine.com/wallpapers/nov-16/deer-fall-i-love-you/nocal/nov-16-deer-fall-i-love-you-nocal-800×600.png
56. 56 http://files.smashingmagazine.com/wallpapers/nov-16/deer-fall-i-love-you/nocal/nov-16-deer-fall-i-love-you-nocal-1280×800.png
57. 57 http://files.smashingmagazine.com/wallpapers/nov-16/deer-fall-i-love-you/nocal/nov-16-deer-fall-i-love-you-nocal-1280×1024.png
58. 58 http://files.smashingmagazine.com/wallpapers/nov-16/deer-fall-i-love-you/nocal/nov-16-deer-fall-i-love-you-nocal-1440×900.png
59. 59 http://files.smashingmagazine.com/wallpapers/nov-16/deer-fall-i-love-you/nocal/nov-16-deer-fall-i-love-you-nocal-1680×1050.png
60. 60 http://files.smashingmagazine.com/wallpapers/nov-16/deer-fall-i-love-you/nocal/nov-16-deer-fall-i-love-you-nocal-2560×1440.png
61. 61 http://www.tazi.com.au
62. 62 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/nov-16-time-to-give-thanks-full.png
63. 63 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/nov-16-time-to-give-thanks-preview.png
64. 64 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/cal/nov-16-time-to-give-thanks-cal-320×480.png
65. 65 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/cal/nov-16-time-to-give-thanks-cal-640×480.png
66. 66 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/cal/nov-16-time-to-give-thanks-cal-800×600.png
67. 67 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/cal/nov-16-time-to-give-thanks-cal-1024×768.png
68. 68 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/cal/nov-16-time-to-give-thanks-cal-1152×864.png
69. 69 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/cal/nov-16-time-to-give-thanks-cal-1280×720.png
70. 70 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/cal/nov-16-time-to-give-thanks-cal-1280×960.png
71. 71 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/cal/nov-16-time-to-give-thanks-cal-1600×1200.png
72. 72 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/cal/nov-16-time-to-give-thanks-cal-1920×1080.png
73. 73 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/cal/nov-16-time-to-give-thanks-cal-1920×1440.png
74. 74 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/cal/nov-16-time-to-give-thanks-cal-2560×1440.png
75. 75 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/nocal/nov-16-time-to-give-thanks-nocal-320×480.png
76. 76 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/nocal/nov-16-time-to-give-thanks-nocal-640×480.png
77. 77 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/nocal/nov-16-time-to-give-thanks-nocal-800×600.png
78. 78 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/nocal/nov-16-time-to-give-thanks-nocal-1024×768.png
79. 79 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/nocal/nov-16-time-to-give-thanks-nocal-1152×864.png
80. 80 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/nocal/nov-16-time-to-give-thanks-nocal-1280×720.png
81. 81 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/nocal/nov-16-time-to-give-thanks-nocal-1280×960.png
82. 82 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/nocal/nov-16-time-to-give-thanks-nocal-1600×1200.png
83. 83 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/nocal/nov-16-time-to-give-thanks-nocal-1920×1080.png
84. 84 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/nocal/nov-16-time-to-give-thanks-nocal-1920×1440.png
85. 85 http://files.smashingmagazine.com/wallpapers/nov-16/time-to-give-thanks/nocal/nov-16-time-to-give-thanks-nocal-2560×1440.png
86. 86 https://www.behance.net/jamesmitchell23
87. 87 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/nov-16-remember-remember-full.jpg
88. 88 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/nov-16-remember-remember-preview.jpg
89. 89 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/cal/nov-16-remember-remember-cal-1280×720.jpg
90. 90 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/cal/nov-16-remember-remember-cal-1280×800.jpg
91. 91 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/cal/nov-16-remember-remember-cal-1366×768.jpg
92. 92 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/cal/nov-16-remember-remember-cal-1440×900.jpg
93. 93 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/cal/nov-16-remember-remember-cal-1680×1050.jpg
94. 94 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/cal/nov-16-remember-remember-cal-1920×1080.jpg
95. 95 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/cal/nov-16-remember-remember-cal-1920×1200.jpg
96. 96 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/cal/nov-16-remember-remember-cal-2560×1440.jpg
97. 97 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/cal/nov-16-remember-remember-cal-2880×1800.jpg
98. 98 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/nocal/nov-16-remember-remember-nocal-1280×720.jpg
99. 99 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/nocal/nov-16-remember-remember-nocal-1280×800.jpg
100. 100 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/nocal/nov-16-remember-remember-nocal-1366×768.jpg
101. 101 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/nocal/nov-16-remember-remember-nocal-1440×900.jpg
102. 102 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/nocal/nov-16-remember-remember-nocal-1680×1050.jpg
103. 103 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/nocal/nov-16-remember-remember-nocal-1920×1080.jpg
104. 104 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/nocal/nov-16-remember-remember-nocal-1920×1200.jpg
105. 105 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/nocal/nov-16-remember-remember-nocal-2560×1440.jpg
106. 106 http://files.smashingmagazine.com/wallpapers/nov-16/remember-remember/nocal/nov-16-remember-remember-nocal-2880×1800.jpg
107. 107 https://www.behance.net/DesignStudioBrainer
108. 108 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/nov-16-perfect-time-for-cats-full.jpg
109. 109 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/nov-16-perfect-time-for-cats-preview.jpg
110. 110 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/cal/nov-16-perfect-time-for-cats-cal-800×600.jpg
111. 111 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/cal/nov-16-perfect-time-for-cats-cal-1024×768.jpg
112. 112 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/cal/nov-16-perfect-time-for-cats-cal-1152×864.jpg
113. 113 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/cal/nov-16-perfect-time-for-cats-cal-1280×800.jpg
114. 114 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/cal/nov-16-perfect-time-for-cats-cal-1280×960.jpg
115. 115 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/cal/nov-16-perfect-time-for-cats-cal-1400×1050.jpg
116. 116 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/cal/nov-16-perfect-time-for-cats-cal-1440×900.jpg
117. 117 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/cal/nov-16-perfect-time-for-cats-cal-1600×1200.jpg
118. 118 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/cal/nov-16-perfect-time-for-cats-cal-1680×1050.jpg
119. 119 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/cal/nov-16-perfect-time-for-cats-cal-1920×1200.jpg
120. 120 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/cal/nov-16-perfect-time-for-cats-cal-1920×1440.jpg
121. 121 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/nocal/nov-16-perfect-time-for-cats-nocal-800×600.jpg
122. 122 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/nocal/nov-16-perfect-time-for-cats-nocal-1024×768.jpg
123. 123 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/nocal/nov-16-perfect-time-for-cats-nocal-1152×864.jpg
124. 124 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/nocal/nov-16-perfect-time-for-cats-nocal-1280×800.jpg
125. 125 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/nocal/nov-16-perfect-time-for-cats-nocal-1280×960.jpg
126. 126 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/nocal/nov-16-perfect-time-for-cats-nocal-1400×1050.jpg
127. 127 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/nocal/nov-16-perfect-time-for-cats-nocal-1440×900.jpg
128. 128 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/nocal/nov-16-perfect-time-for-cats-nocal-1600×1200.jpg
129. 129 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/nocal/nov-16-perfect-time-for-cats-nocal-1680×1050.jpg
130. 130 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/nocal/nov-16-perfect-time-for-cats-nocal-1920×1200.jpg
131. 131 http://files.smashingmagazine.com/wallpapers/nov-16/perfect-time-for-cats/nocal/nov-16-perfect-time-for-cats-nocal-1920×1440.jpg
132. 132 http://plaidgecko.com/
133. 133 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/nov-16-autumn-wreath-full.jpg
134. 134 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/nov-16-autumn-wreath-preview.jpg
135. 135 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/cal/nov-16-autumn-wreath-cal-640×1136.jpg
136. 136 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/cal/nov-16-autumn-wreath-cal-1080×1920.jpg
137. 137 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/cal/nov-16-autumn-wreath-cal-1280×800.jpg
138. 138 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/cal/nov-16-autumn-wreath-cal-1280×960.jpg
139. 139 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/cal/nov-16-autumn-wreath-cal-1366×768.jpg
140. 140 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/cal/nov-16-autumn-wreath-cal-1440×900.jpg
141. 141 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/cal/nov-16-autumn-wreath-cal-1600×900.jpg
142. 142 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/cal/nov-16-autumn-wreath-cal-1680×1200.jpg
143. 143 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/cal/nov-16-autumn-wreath-cal-1920×1080.jpg
144. 144 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/cal/nov-16-autumn-wreath-cal-1920×1200.jpg
145. 145 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/cal/nov-16-autumn-wreath-cal-2048×2048.jpg
146. 146 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/cal/nov-16-autumn-wreath-cal-2560×1440.jpg
147. 147 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/nocal/nov-16-autumn-wreath-nocal-640×1136.jpg
148. 148 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/nocal/nov-16-autumn-wreath-nocal-1080×1920.jpg
149. 149 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/nocal/nov-16-autumn-wreath-nocal-1280×800.jpg
150. 150 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/nocal/nov-16-autumn-wreath-nocal-1280×960.jpg
151. 151 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/nocal/nov-16-autumn-wreath-nocal-1366×768.jpg
152. 152 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/nocal/nov-16-autumn-wreath-nocal-1440×900.jpg
153. 153 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/nocal/nov-16-autumn-wreath-nocal-1600×900.jpg
154. 154 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/nocal/nov-16-autumn-wreath-nocal-1680×1200.jpg
155. 155 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/nocal/nov-16-autumn-wreath-nocal-1920×1080.jpg
156. 156 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/nocal/nov-16-autumn-wreath-nocal-1920×1200.jpg
157. 157 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/nocal/nov-16-autumn-wreath-nocal-2048×2048.jpg
158. 158 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-wreath/nocal/nov-16-autumn-wreath-nocal-2560×1440.jpg
159. 159 http://www.carmen-eisendle.com
160. 160 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/nov-16-moonlight-bats-full.png
161. 161 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/nov-16-moonlight-bats-preview.png
162. 162 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/cal/nov-16-moonlight-bats-cal-640×480.png
163. 163 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/cal/nov-16-moonlight-bats-cal-800×600.png
164. 164 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/cal/nov-16-moonlight-bats-cal-1024×768.png
165. 165 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/cal/nov-16-moonlight-bats-cal-1280×800.png
166. 166 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/cal/nov-16-moonlight-bats-cal-1280×960.png
167. 167 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/cal/nov-16-moonlight-bats-cal-1440×900.png
168. 168 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/cal/nov-16-moonlight-bats-cal-1600×1200.png
169. 169 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/cal/nov-16-moonlight-bats-cal-1680×1050.png
170. 170 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/cal/nov-16-moonlight-bats-cal-1680×1260.png
171. 171 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/cal/nov-16-moonlight-bats-cal-1920×1200.png
172. 172 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/cal/nov-16-moonlight-bats-cal-1920×1440.png
173. 173 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/cal/nov-16-moonlight-bats-cal-2560×1440.png
174. 174 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/cal/nov-16-moonlight-bats-cal-2560×1600.png
175. 175 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/nocal/nov-16-moonlight-bats-nocal-640×480.png
176. 176 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/nocal/nov-16-moonlight-bats-nocal-800×600.png
177. 177 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/nocal/nov-16-moonlight-bats-nocal-1024×768.png
178. 178 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/nocal/nov-16-moonlight-bats-nocal-1280×800.png
179. 179 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/nocal/nov-16-moonlight-bats-nocal-1280×960.png
180. 180 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/nocal/nov-16-moonlight-bats-nocal-1440×900.png
181. 181 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/nocal/nov-16-moonlight-bats-nocal-1600×1200.png
182. 182 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/nocal/nov-16-moonlight-bats-nocal-1680×1050.png
183. 183 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/nocal/nov-16-moonlight-bats-nocal-1680×1260.png
184. 184 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/nocal/nov-16-moonlight-bats-nocal-1920×1200.png
185. 185 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/nocal/nov-16-moonlight-bats-nocal-1920×1440.png
186. 186 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/nocal/nov-16-moonlight-bats-nocal-2560×1440.png
187. 187 http://files.smashingmagazine.com/wallpapers/nov-16/moonlight-bats/nocal/nov-16-moonlight-bats-nocal-2560×1600.png
188. 188 http://www.mariakellerac.com
189. 189 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nov-16-be-grateful-for-the-unlikely-friends-full.png
190. 190 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nov-16-be-grateful-for-the-unlikely-friends-preview.png
191. 191 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-320×480.png
192. 192 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-640×480.png
193. 193 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-640×1136.png
194. 194 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-750×1334.png
195. 195 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-800×480.png
196. 196 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-800×600.png
197. 197 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-1024×768.png
198. 198 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-1024×1024.png
199. 199 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-1152×864.png
200. 200 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-1242×2208.png
201. 201 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-1280×720.png
202. 202 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-1280×800.png
203. 203 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-1280×960.png
204. 204 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-1280×1024.png
205. 205 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-1366×768.png
206. 206 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-1400×1050.png
207. 207 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-1440×900.png
208. 208 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-1600×1200.png
209. 209 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-1680×1050.png
210. 210 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-1680×1200.png
211. 211 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-1920×1080.png
212. 212 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-1920×1200.png
213. 213 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-1920×1440.png
214. 214 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-2560×1440.png
215. 215 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/cal/nov-16-be-grateful-for-the-unlikely-friends-cal-2880×1800.png
216. 216 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-320×480.png
217. 217 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-640×480.png
218. 218 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-640×1136.png
219. 219 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-750×1334.png
220. 220 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-800×480.png
221. 221 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-800×600.png
222. 222 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-1024×768.png
223. 223 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-1024×1024.png
224. 224 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-1152×864.png
225. 225 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-1242×2208.png
226. 226 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-1280×720.png
227. 227 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-1280×800.png
228. 228 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-1280×960.png
229. 229 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-1280×1024.png
230. 230 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-1366×768.png
231. 231 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-1400×1050.png
232. 232 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-1440×900.png
233. 233 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-1600×1200.png
234. 234 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-1680×1050.png
235. 235 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-1680×1200.png
236. 236 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-1920×1080.png
237. 237 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-1920×1200.png
238. 238 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-1920×1440.png
239. 239 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-2560×1440.png
240. 240 http://files.smashingmagazine.com/wallpapers/nov-16/be-grateful-for-the-unlikely-friends/nocal/nov-16-be-grateful-for-the-unlikely-friends-nocal-2880×1800.png
241. 241 https://www.shutterstock.com/g/IrinkaArt
242. 242 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nov-16-coffee-and-sweets-full.jpg
243. 243 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nov-16-coffee-and-sweets-preview.jpg
244. 244 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-320×480.jpg
245. 245 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-640×480.jpg
246. 246 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-800×480.jpg
247. 247 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-800×600.jpg
248. 248 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-1024×768.jpg
249. 249 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-1024×1024.jpg
250. 250 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-1152×864.jpg
251. 251 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-1280×720.jpg
252. 252 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-1280×800.jpg
253. 253 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-1280×960.jpg
254. 254 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-1280×1024.jpg
255. 255 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-1366×768.jpg
256. 256 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-1400×1050.jpg
257. 257 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-1440×900.jpg
258. 258 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-1600×1200.jpg
259. 259 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-1680×1050.jpg
260. 260 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-1680×1200.jpg
261. 261 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-1920×1080.jpg
262. 262 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-1920×1200.jpg
263. 263 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-1920×1440.jpg
264. 264 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-2560×1440.jpg
265. 265 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/cal/nov-16-coffee-and-sweets-cal-2880×1800.jpg
266. 266 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-320×480.jpg
267. 267 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-640×480.jpg
268. 268 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-800×480.jpg
269. 269 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-800×600.jpg
270. 270 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-1024×768.jpg
271. 271 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-1024×1024.jpg
272. 272 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-1152×864.jpg
273. 273 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-1280×720.jpg
274. 274 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-1280×800.jpg
275. 275 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-1280×960.jpg
276. 276 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-1280×1024.jpg
277. 277 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-1366×768.jpg
278. 278 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-1400×1050.jpg
279. 279 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-1440×900.jpg
280. 280 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-1600×1200.jpg
281. 281 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-1680×1050.jpg
282. 282 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-1680×1200.jpg
283. 283 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-1920×1080.jpg
284. 284 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-1920×1200.jpg
285. 285 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-1920×1440.jpg
286. 286 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-2560×1440.jpg
287. 287 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-and-sweets/nocal/nov-16-coffee-and-sweets-nocal-2880×1800.jpg
288. 288 http://liapantazi.com
289. 289 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/nov-16-autumn-in-paris-full.jpg
290. 290 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/nov-16-autumn-in-paris-preview.jpg
291. 291 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/cal/nov-16-autumn-in-paris-cal-800×600.jpg
292. 292 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/cal/nov-16-autumn-in-paris-cal-1024×768.jpg
293. 293 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/cal/nov-16-autumn-in-paris-cal-1152×864.jpg
294. 294 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/cal/nov-16-autumn-in-paris-cal-1280×720.jpg
295. 295 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/cal/nov-16-autumn-in-paris-cal-1280×800.jpg
296. 296 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/cal/nov-16-autumn-in-paris-cal-1280×960.jpg
297. 297 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/cal/nov-16-autumn-in-paris-cal-1366×768.jpg
298. 298 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/cal/nov-16-autumn-in-paris-cal-1400×1050.jpg
299. 299 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/cal/nov-16-autumn-in-paris-cal-1440×900.jpg
300. 300 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/cal/nov-16-autumn-in-paris-cal-1600×1200.jpg
301. 301 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/cal/nov-16-autumn-in-paris-cal-1680×1050.jpg
302. 302 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/cal/nov-16-autumn-in-paris-cal-1920×1080.jpg
303. 303 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/cal/nov-16-autumn-in-paris-cal-1920×1200.jpg
304. 304 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/cal/nov-16-autumn-in-paris-cal-1920×1440.jpg
305. 305 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/cal/nov-16-autumn-in-paris-cal-2560×1440.jpg
306. 306 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/nocal/nov-16-autumn-in-paris-nocal-800×600.jpg
307. 307 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/nocal/nov-16-autumn-in-paris-nocal-1024×768.jpg
308. 308 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/nocal/nov-16-autumn-in-paris-nocal-1152×864.jpg
309. 309 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/nocal/nov-16-autumn-in-paris-nocal-1280×720.jpg
310. 310 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/nocal/nov-16-autumn-in-paris-nocal-1280×800.jpg
311. 311 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/nocal/nov-16-autumn-in-paris-nocal-1280×960.jpg
312. 312 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/nocal/nov-16-autumn-in-paris-nocal-1366×768.jpg
313. 313 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/nocal/nov-16-autumn-in-paris-nocal-1400×1050.jpg
314. 314 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/nocal/nov-16-autumn-in-paris-nocal-1440×900.jpg
315. 315 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/nocal/nov-16-autumn-in-paris-nocal-1600×1200.jpg
316. 316 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/nocal/nov-16-autumn-in-paris-nocal-1680×1050.jpg
317. 317 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/nocal/nov-16-autumn-in-paris-nocal-1920×1080.jpg
318. 318 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/nocal/nov-16-autumn-in-paris-nocal-1920×1200.jpg
319. 319 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/nocal/nov-16-autumn-in-paris-nocal-1920×1440.jpg
320. 320 http://files.smashingmagazine.com/wallpapers/nov-16/autumn-in-paris/nocal/nov-16-autumn-in-paris-nocal-2560×1440.jpg
321. 321 http://acodez.co.in/
322. 322 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nov-16-dream-world-full.png
323. 323 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nov-16-dream-world-preview.png
324. 324 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-320×480.png
325. 325 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-640×480.png
326. 326 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-800×480.png
327. 327 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-800×600.png
328. 328 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-1024×768.png
329. 329 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-1024×1024.png
330. 330 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-1152×864.png
331. 331 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-1280×720.png
332. 332 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-1280×960.png
333. 333 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-1280×1024.png
334. 334 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-1366×768.png
335. 335 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-1400×1050.png
336. 336 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-1440×900.png
337. 337 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-1600×1200.png
338. 338 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-1680×1050.png
339. 339 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-1680×1200.png
340. 340 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-1920×1080.png
341. 341 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-1920×1200.png
342. 342 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-1920×1440.png
343. 343 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/cal/nov-16-dream-world-cal-2560×1440.png
344. 344 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-320×480.png
345. 345 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-640×480.png
346. 346 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-800×480.png
347. 347 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-800×600.png
348. 348 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-1024×768.png
349. 349 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-1024×1024.png
350. 350 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-1152×864.png
351. 351 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-1280×720.png
352. 352 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-1280×960.png
353. 353 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-1280×1024.png
354. 354 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-1366×768.png
355. 355 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-1400×1050.png
356. 356 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-1440×900.png
357. 357 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-1600×1200.png
358. 358 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-1680×1050.png
359. 359 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-1680×1200.png
360. 360 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-1920×1080.png
361. 361 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-1920×1200.png
362. 362 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-1920×1440.png
363. 363 http://files.smashingmagazine.com/wallpapers/nov-16/dream-world/nocal/nov-16-dream-world-nocal-2560×1440.png
364. 364 http://www.colormean.com
365. 365 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/nov-16-we-are-all-the-same-inside-full.jpg
366. 366 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/nov-16-we-are-all-the-same-inside-preview.jpg
367. 367 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/cal/nov-16-we-are-all-the-same-inside-cal-320×480.jpg
368. 368 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/cal/nov-16-we-are-all-the-same-inside-cal-640×480.jpg
369. 369 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/cal/nov-16-we-are-all-the-same-inside-cal-800×600.jpg
370. 370 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/cal/nov-16-we-are-all-the-same-inside-cal-1152×864.jpg
371. 371 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/cal/nov-16-we-are-all-the-same-inside-cal-1280×720.jpg
372. 372 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/cal/nov-16-we-are-all-the-same-inside-cal-1280×800.jpg
373. 373 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/cal/nov-16-we-are-all-the-same-inside-cal-1280×960.jpg
374. 374 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/cal/nov-16-we-are-all-the-same-inside-cal-1366×768.jpg
375. 375 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/cal/nov-16-we-are-all-the-same-inside-cal-1400×1050.jpg
376. 376 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/cal/nov-16-we-are-all-the-same-inside-cal-1440×900.jpg
377. 377 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/cal/nov-16-we-are-all-the-same-inside-cal-1600×1200.jpg
378. 378 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/cal/nov-16-we-are-all-the-same-inside-cal-1680×1050.jpg
379. 379 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/cal/nov-16-we-are-all-the-same-inside-cal-1920×1080.jpg
380. 380 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/cal/nov-16-we-are-all-the-same-inside-cal-1920×1200.jpg
381. 381 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/cal/nov-16-we-are-all-the-same-inside-cal-1920×1440.jpg
382. 382 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/cal/nov-16-we-are-all-the-same-inside-cal-2560×1440.jpg
383. 383 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/nocal/nov-16-we-are-all-the-same-inside-nocal-320×480.jpg
384. 384 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/nocal/nov-16-we-are-all-the-same-inside-nocal-640×480.jpg
385. 385 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/nocal/nov-16-we-are-all-the-same-inside-nocal-800×600.jpg
386. 386 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/nocal/nov-16-we-are-all-the-same-inside-nocal-1152×864.jpg
387. 387 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/nocal/nov-16-we-are-all-the-same-inside-nocal-1280×720.jpg
388. 388 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/nocal/nov-16-we-are-all-the-same-inside-nocal-1280×800.jpg
389. 389 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/nocal/nov-16-we-are-all-the-same-inside-nocal-1280×960.jpg
390. 390 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/nocal/nov-16-we-are-all-the-same-inside-nocal-1366×768.jpg
391. 391 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/nocal/nov-16-we-are-all-the-same-inside-nocal-1400×1050.jpg
392. 392 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/nocal/nov-16-we-are-all-the-same-inside-nocal-1440×900.jpg
393. 393 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/nocal/nov-16-we-are-all-the-same-inside-nocal-1600×1200.jpg
394. 394 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/nocal/nov-16-we-are-all-the-same-inside-nocal-1680×1050.jpg
395. 395 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/nocal/nov-16-we-are-all-the-same-inside-nocal-1920×1080.jpg
396. 396 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/nocal/nov-16-we-are-all-the-same-inside-nocal-1920×1200.jpg
397. 397 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/nocal/nov-16-we-are-all-the-same-inside-nocal-1920×1440.jpg
398. 398 http://files.smashingmagazine.com/wallpapers/nov-16/we-are-all-the-same-inside/nocal/nov-16-we-are-all-the-same-inside-nocal-2560×1440.jpg
399. 399 http://www.silocreativo.com/en
400. 400 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/nov-16-coffee-time-full.png
401. 401 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/nov-16-coffee-time-preview.png
402. 402 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/cal/nov-16-coffee-time-cal-800×480.png
403. 403 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/cal/nov-16-coffee-time-cal-1024×768.png
404. 404 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/cal/nov-16-coffee-time-cal-1152×864.png
405. 405 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/cal/nov-16-coffee-time-cal-1280×800.png
406. 406 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/cal/nov-16-coffee-time-cal-1280×960.png
407. 407 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/cal/nov-16-coffee-time-cal-1440×900.png
408. 408 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/cal/nov-16-coffee-time-cal-1680×1200.png
409. 409 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/cal/nov-16-coffee-time-cal-1920×1080.png
410. 410 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/cal/nov-16-coffee-time-cal-2560×1440.png
411. 411 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/nocal/nov-16-coffee-time-nocal-800×480.png
412. 412 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/nocal/nov-16-coffee-time-nocal-1024×768.png
413. 413 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/nocal/nov-16-coffee-time-nocal-1152×864.png
414. 414 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/nocal/nov-16-coffee-time-nocal-1280×800.png
415. 415 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/nocal/nov-16-coffee-time-nocal-1280×960.png
416. 416 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/nocal/nov-16-coffee-time-nocal-1440×900.png
417. 417 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/nocal/nov-16-coffee-time-nocal-1680×1200.png
418. 418 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/nocal/nov-16-coffee-time-nocal-1920×1080.png
419. 419 http://files.smashingmagazine.com/wallpapers/nov-16/coffee-time/nocal/nov-16-coffee-time-nocal-2560×1440.png
420. 420 https://www.instagram.com/gabiminnichart/?hl=en
421. 421 http://files.smashingmagazine.com/wallpapers/nov-16/macys-thanksgiving-day-parade-fun/nov-16-macys-thanksgiving-day-parade-fun-full.png
422. 422 http://files.smashingmagazine.com/wallpapers/nov-16/macys-thanksgiving-day-parade-fun/nov-16-macys-thanksgiving-day-parade-fun-preview.png
423. 423 http://files.smashingmagazine.com/wallpapers/nov-16/macys-thanksgiving-day-parade-fun/cal/nov-16-macys-thanksgiving-day-parade-fun-cal-1024×768.png
424. 424 http://files.smashingmagazine.com/wallpapers/nov-16/macys-thanksgiving-day-parade-fun/cal/nov-16-macys-thanksgiving-day-parade-fun-cal-1280×800.png
425. 425 http://files.smashingmagazine.com/wallpapers/nov-16/macys-thanksgiving-day-parade-fun/cal/nov-16-macys-thanksgiving-day-parade-fun-cal-1440×900.png
426. 426 http://files.smashingmagazine.com/wallpapers/nov-16/macys-thanksgiving-day-parade-fun/cal/nov-16-macys-thanksgiving-day-parade-fun-cal-1600×1200.png
427. 427 http://files.smashingmagazine.com/wallpapers/nov-16/macys-thanksgiving-day-parade-fun/cal/nov-16-macys-thanksgiving-day-parade-fun-cal-1920×1200.png
428. 428 http://files.smashingmagazine.com/wallpapers/nov-16/macys-thanksgiving-day-parade-fun/nocal/nov-16-macys-thanksgiving-day-parade-fun-nocal-1024×768.png
429. 429 http://files.smashingmagazine.com/wallpapers/nov-16/macys-thanksgiving-day-parade-fun/nocal/nov-16-macys-thanksgiving-day-parade-fun-nocal-1280×800.png
430. 430 http://files.smashingmagazine.com/wallpapers/nov-16/macys-thanksgiving-day-parade-fun/nocal/nov-16-macys-thanksgiving-day-parade-fun-nocal-1440×900.png
431. 431 http://files.smashingmagazine.com/wallpapers/nov-16/macys-thanksgiving-day-parade-fun/nocal/nov-16-macys-thanksgiving-day-parade-fun-nocal-1600×1200.png
432. 432 http://files.smashingmagazine.com/wallpapers/nov-16/macys-thanksgiving-day-parade-fun/nocal/nov-16-macys-thanksgiving-day-parade-fun-nocal-1920×1200.png
433. 433 http://rachelkeslosky.wixsite.com/photography
434. 434 http://files.smashingmagazine.com/wallpapers/nov-16/hot-drinks-for-cold-sloths/nov-16-hot-drinks-for-cold-sloths-full.png
435. 435 http://files.smashingmagazine.com/wallpapers/nov-16/hot-drinks-for-cold-sloths/nov-16-hot-drinks-for-cold-sloths-preview.png
436. 436 http://files.smashingmagazine.com/wallpapers/nov-16/hot-drinks-for-cold-sloths/cal/nov-16-hot-drinks-for-cold-sloths-cal-1024×768.png
437. 437 http://files.smashingmagazine.com/wallpapers/nov-16/hot-drinks-for-cold-sloths/cal/nov-16-hot-drinks-for-cold-sloths-cal-1280×1024.png
438. 438 http://files.smashingmagazine.com/wallpapers/nov-16/hot-drinks-for-cold-sloths/cal/nov-16-hot-drinks-for-cold-sloths-cal-1440×900.png
439. 439 http://files.smashingmagazine.com/wallpapers/nov-16/hot-drinks-for-cold-sloths/cal/nov-16-hot-drinks-for-cold-sloths-cal-1600×1200.png
440. 440 http://files.smashingmagazine.com/wallpapers/nov-16/hot-drinks-for-cold-sloths/cal/nov-16-hot-drinks-for-cold-sloths-cal-1920×1200.png
441. 441 http://files.smashingmagazine.com/wallpapers/nov-16/hot-drinks-for-cold-sloths/cal/nov-16-hot-drinks-for-cold-sloths-cal-2560×1440.png
442. 442 http://files.smashingmagazine.com/wallpapers/nov-16/hot-drinks-for-cold-sloths/nocal/nov-16-hot-drinks-for-cold-sloths-nocal-1024×768.png
443. 443 http://files.smashingmagazine.com/wallpapers/nov-16/hot-drinks-for-cold-sloths/nocal/nov-16-hot-drinks-for-cold-sloths-nocal-1280×1024.png
444. 444 http://files.smashingmagazine.com/wallpapers/nov-16/hot-drinks-for-cold-sloths/nocal/nov-16-hot-drinks-for-cold-sloths-nocal-1440×900.png
445. 445 http://files.smashingmagazine.com/wallpapers/nov-16/hot-drinks-for-cold-sloths/nocal/nov-16-hot-drinks-for-cold-sloths-nocal-1600×1200.png
446. 446 http://files.smashingmagazine.com/wallpapers/nov-16/hot-drinks-for-cold-sloths/nocal/nov-16-hot-drinks-for-cold-sloths-nocal-1920×1200.png
447. 447 http://files.smashingmagazine.com/wallpapers/nov-16/hot-drinks-for-cold-sloths/nocal/nov-16-hot-drinks-for-cold-sloths-nocal-2560×1440.png
448. 448 https://www.smashingmagazine.com/desktop-wallpaper-calendars-join-in/

↑ Back to topTweet itShare on Facebook

Is a person who is sitting by herself in a room alone? From an outside perspective, it might seem so, but the human brain is way more interesting in these regards. We carry a map of relationships inside ourselves, and it depends on this map if the person actually does feel alone or not.

I just read “Stress and the Social Self: How Relationships Affect Our Immune System¹”, and I feel that we can learn a lot from it. In fact, I might see social media from a different perspective now. We’re social beings, I love sharing good content with you, so, without further ado, here’s this week’s web dev reading list.

News Link

• Opera 41 and Chrome 54 are out², and they come with some interesting new features. The updates now support Custom Elements v1 as well as some new and convenient JavaScript methods like ParentNode.prototype.append() or unprefixed CSS user-select. On the other hand, they removed TouchEvent.prototype.initTouchEvent (you’ll need to use the constructor from now on), and KeyboardEvent.prototype.keyIdentifier has been replaced by KeyboardEvent.prototype.key.
• Following a suggestion by other major browser vendors, Mozilla will distrust WoSign and StartCom certificates³ from January 1st, 2017 due to backdated certificates and non-disclosure and denial of an acquisition of the two companies. A great step for better CA security.
• Node.js v6 transitioned to the current LTS version⁴ this week and Node.js v7 has been released⁵, too. It covers 98% of ES6, brings the new V8 engine, improved reliability and performance, and a new URL-parser based on the WHATWG URL standard.

General Link

• With the upcoming Chrome 55⁶ (now in beta), the browser will finally get support for Pointer Events. It will also support JavaScript async/await-functions and revive the CSS hyphens property after years of absence in Chromium browsers. The once Event Listener option will also be added and, to improve load times and prevent failed navigations, cross-origin and parser-blocking scripts injected using document.write() will no longer load over 2G connections (which also means that 3rd-party fallbacks as used by the HTML5Boilerplate⁷ won’t work anymore in upcoming Chrome versions).

Tools & Workflows Link

• Jack Franklin explains how to migrate from the current Webpack 1 to the upcoming Webpack 2⁸ and where the differences between the two lie.
• Similar to the already showcased Boxy SVG Editor⁹, Vectr¹³¹²¹⁰ is a new online/desktop vector graphics editor with real-time sharing.

¹¹

Security Link

• Paragon Initiative Enterprises share a comprehensive guide to automatic security updates for PHP developers¹⁴ that everyone developing with PHP should be aware of.
• Last week, Smashing Magazine had to deal with an expiring SSL certificate. While this is usually an easy thing to renew, problems may arise if you have HTTP Public Key Pinning (HPKP) enabled and set to a long expiry date (which usually is intended). Mathias Biilmann Christensen now wrote about the lessons learned from this and why you should be aware (and afraid!) of HPKP¹⁵ and how to issue a new certificate with an old key¹⁶ so that the site won’t break for your users with HPKP enabled.

Privacy Link

• Mattias Geniar shares how you can easily block ads and trackers from your entire home network¹⁷ using Pi-Hole¹⁸, a DNS-based blacklist for Raspberry Pi.

Web Performance Link

• Brian Armstrong from Canopy explains why you shouldn’t rely on default DNS settings¹⁹, as the recent Dyn DNS outage has shown. He covers how to configure DNS the right way, why a longer TTL is important, and why having different nameservers from different providers can save your service’s uptime.

²⁰

JavaScript Link

• Fuse.js²² is a new and light-weight JavaScript fuzzy-search library.

CSS/Sass Link

• Roman Komarov wrote about conditions in CSS Custom Properties²³, about solutions, challenges, and how you can benefit from preprocessors when it comes to more complex conditions. The article also mentions a couple of interesting ideas on how the web standard could be extended.

Work & Life Link

• Cal Newport shares his thoughts on how deep breaks during work can help your mind recharge and, thus, improve your productivity²⁴.

Going Beyond… Link

• It’s really interesting to see this kind of back-story: Katie Singer reveals the real amount of energy used to power the internet²⁵ and puts these figures into perspective by comparing how much power anyone of us would need to generate to power a website.

And with that, I’ll close for this week. If you like what I write each week, please support me with a donation²⁶ or share this resource with other people. You can learn more about the costs of the project here²⁷. It’s available via email, RSS, and online.

— Anselm

Footnotes Link

1. 1 https://www.brainpickings.org/2015/10/07/esther-sternberg-stress-relationships/
2. 2 https://dev.opera.com/blog/opera-41/
3. 3 https://blog.mozilla.org/security/2016/10/24/distrusting-new-wosign-and-startcom-certificates/
4. 4 https://medium.com/@nodejs/node-js-v6-transitions-to-lts-be7f18c17159
5. 5 https://nodejs.org/en/blog/release/v7.0.0/
6. 6 https://blog.chromium.org/2016/10/chrome-55-beta-input-handling.html
7. 7 https://github.com/h5bp/html5-boilerplate/blob/master/src/index.html#L26
8. 8 http://javascriptplayground.com/blog/2016/10/moving-to-webpack-2/
9. 9 https://wdrl.info/archive/135/boxy-svg-editor
10. 10 https://vectr.com/
11. 11 https://vectr.com/
12. 12 https://vectr.com/
13. 13 https://vectr.com/
14. 14 https://paragonie.com/blog/2016/10/guide-automatic-security-updates-for-php-developers
15. 15
16. 16
17. 17 https://ma.ttias.be/pi-hole-dns-based-blacklist-ads-tracking-raspberry-pi/
18. 18 https://pi-hole.net/
19. 19 https://medium.com/@brianarmstrong/youre-probably-doing-dns-wrong-like-we-were-6625efaed390
20. 20 https://medium.com/@brianarmstrong/youre-probably-doing-dns-wrong-like-we-were-6625efaed390
21. 21 https://medium.com/@brianarmstrong/youre-probably-doing-dns-wrong-like-we-were-6625efaed390
22. 22 http://fusejs.io/
23. 23 http://kizu.ru/en/fun/conditions-for-css-variables/
24. 24 http://calnewport.com/blog/2016/09/14/on-deep-breaks/
25. 25 http://www.electronicsilentspring.com/real-amount-energy-power-internet/
26. 26 https://wdrl.info/donate
27. 27 https://wdrl.info/costs/

↑ Back to topTweet itShare on Facebook

After a few years of designing products for clients, I began to feel fatigued. I wondered why. Turns out, I’d been chasing metric after metric. “Increase those page views!” “Help people spend more time in the app!” And it kept coming. Still, something was missing. I knew that meeting goals was part of what a designer does, but I could see how my work could easily become commoditized and less fulfilling unless something changed.

I thought of how bored I’d be if I kept on that path. I needed to build some guiding principles that would help me find my place in design. These principles would help grow and would shape my career in a way that fits me best.

What I’d like to share here is how I found my principles and regained a sense of fulfillment. I’ll also discuss one of them and hopefully convince you that it’s worth considering when we design products. Speaking of convincing, I’d also like to help you convince your boss that these things are important.

One small string that began to tie it together was watching Bret Victor’s talk “Inventing on Principle¹.” The first half is mostly a code demo; then, he gets philosophical and talks about how goals and principles help you. I believe that living by principles can lead you to some really interesting places — for me, they’ve helped me to find the right ways (and places) to work and the right projects to take on (like designing a typeface), and they’ve helped me to identify which areas of my life need to be nurtured so I don’t burn out.

Advocate For Design Having A Soul Link

I’ve worked on projects whose goals varied from increasing email signups by 10% to boosting ad impressions by 30%. It was honest work, to be sure. It’s important that our designs meet the needs of the product owners and our clients — this isn’t art school, and there are real constraints and requirements we need to address.

However, it’s not enough to do metrics-based design. That in itself is a bit too clinical and detached, and where’s the fun in that? We need more.

Validating and then meeting a project’s requirements should be the minimum of what we set out to do. Once we set those metrics as our baseline, we’re allowed to be more impactful and thoughtful as we get to the root of a design problem.

What we need to shoot for is to help people fall in love with our products. That means pushing to give our designs a soul.

Here’s what “emotionally connecting” means: It means you’ve created a product that stands out in someone’s heart. The product becomes what people reach for because it’s the most helpful. People might not be able to understand what you’ve done, but they’ll perceive that it’s better. This is one way to make a product that’s indescribably good.

I usually ask these two questions, which get at part of what helps people fall in love with a product:

• What’s going to help someone really find this useful?
• What’s going to make them care about it?

For years, we’ve focused on making our websites and products be functional, reliable and usable. These qualities are the bedrock of any good product, but it’s when we add a soul to a product that it really comes alive.

My first hint of a design having soul came back in 2005 when I logged into Flickr² for the first time. Sure, Flickr has undergone many, many changes since then, but I’d like to explain how it helped me, as someone who hadn’t shared much online before. I wasn’t sure how to share something, but I noticed right away that the website greeted me with a friendly “Hello.” The website helped me breeze through the process, and the friendly tone was really assuring.

My Flickr experience was like a pal gently leading me through the process, making it easy to succeed. It was a warm experience that made me want to return. Incidentally, I can say “hello” in a lot more languages now, thanks to what Flickr taught me.

Moving forward to newer examples, we can also consider Slack³, its competitors and email. All of these options help people communicate, but Slack has a personality that helps you feel more connected with it. Slackbot helps you get started by asking you questions in a conversation, much like a real human would when you meet them for the first time. The makers of Slack eschewed the standard idea of filling in a registration form in favor of something more conversational — this makes other services feel stale and unfriendly by comparison. Slack has soulful flourishes everywhere: from smooth animations to a cute little emoji that is shown when you’ve scrolled all the way to the newest message in your group.

To be fair, Slack and Flickr (which, by the way, share cofounders) weren’t the first to try for something more human — that desire has spanned centuries. Lovers of typographic history may recall that Gutenberg wanted the movable type he created to mimic the look of handwriting. He used blackletter-style letters, which were similar to the bible manuscripts that monks illuminated.

⁴

These examples makes a strong case for design having a soul. The personality that develops from having one is what wins someone’s heart and makes competitors feel like poor (or, at best, passable) copies. Consider this statement by John Medina in “Brain Rules⁷“:

Emotionally arousing events tend to do better remembered than neutral events… Emotionally charged events persist much longer in our memories and are recalled with greater accuracy than neutral memories.

In other words, we’re wired to remember products with a soul. Let’s use that to our advantage.

Next, let’s get a little more specific and see how that can play out.

Fiddle Factors Link

One example of a way to give a product a soul is by adding a “fiddle factor.” A fiddle factor is a playful part of a product that imparts a sense of joy or playfulness when used. I first heard this term in Jony Ive’s unofficial biography, Jony Ive: The Genius Behind Apple’s Greatest Products. Ive had a new take on, of all things, a pen. Noticing that people tend to fiddle with their pens when not writing, he added something to his pen design to give people something to play with when they were idle. Of course, Ive started by making the best possible pen, then added the fiddle factor.

According to Clive Grinyer⁸, Ive’s once-boss:

This was a new idea back then, to put something on a pen that was purely there to fiddle with. He was really thinking differently. The pen’s design was not just about shape, but also there was an emotional side to it.

Fiddle factors invite people to idly toy with them and form a deeper connection with what you’ve made. They become that warm little blanket that wraps a product around your heart and makes you want it more.

I’ve described one already with Slack and its emoji use, but here are a few more digital fiddle factors:

• That pull-to-refresh spinner with the really cool spinning animation? A fiddle factor.
• That fun animation you click to like something on Twitter? Fiddle factor.
• In MailChimp, when you find out that Freddy’s arm can extend almost forever when you’re testing an email’s responsive breakpoints? That’s a fiddle factor (albeit a cruel one).

One Way to Add a Little Soul to Your Project Link

To give a project a soul is to cultivate a relationship with it. You need to know what it needs and understand its nature. In this sense, this relationship is the same as a potter with clay or an architect with wood and steel. Once you understand the nature of your materials, you will know what it can become and what its limits are. This will help you to mold a soul in the right ways. Not doing this will ultimately cause your project to feel inauthentic and fail.

Let’s say you’ve built a playful iOS app. It’s meant to send short, fun replies to friends. In the app, you’ve got an overview page showing the latest emails, and the user can go into a detail view to read a particular message. You could go the standard route of sliding in the email from the right — it’s a simple thing to do, and it’s built right into iOS.

The drawback with built-in transitions is well covered: Anyone can use them. Sure, there are definite benefits to them (namely, that they’re cheaper and faster to implement), but it’s difficult to build something that’s soulful if you only use stock components and animation.

Instead, consider an alternative kind of transition. Think about it like this: Consider the personality you think the app should have. Think about the people who will use this app. I use this chart to help me determine the tone of a project:

⁹

Back to our email app. Let’s say it’s a fun email client. In this chart, it shows most strongly in the casual, energetic and easygoing categories. If we think about the animations we’ll use here, it makes sense to be more playful.

So, let’s animate the email message to come up from the bottom of the screen with a little spring in its step. When you’re finished with it, you can swipe it away or pull it back down.

Let’s take that even further, based on the chart and animation:

• Maybe the animation could be the basis for how you approach other animations in the app. Your other animations could be similarly fun (but don’t overdo it).
• Maybe it will affect which typefaces you choose.

What’s important here is to avoid forcing something in where it doesn’t belong. Don’t be different just for the sake of being different, and don’t overdo it. If we saw the President of the United States deliver the State of the Union address in a Hawaiian shirt, we’d probably feel like something’s amiss and might not take him as seriously as we should. Same here — what we do has to feel natural.

Other Ideas Link

Any interaction, be it with a button or a scroll, is a perfect place to explore adding a fiddle factor. Explore what might happen when the user scrolls to the bottom of the content. Or perhaps you could come up with something unexpected when the user hovers over a photo for a long time. Maybe you could make a neat hover or focus animation.

Adding soul isn’t limited to animation, either. It goes much deeper!

• How does it sound? Each person’s voice is totally unique, and your product’s should be, too.
• How does it look? We need to stand out and be ourselves; so do the things we make.
• How does it act? Could your product know the user on a deeper level and anticipate their needs? That would be deeply soulful.

Convincing Your Boss And Team Link

It’s all well and good for designers to talk about giving their products a soul, but here’s where it gets real: You have a deadline, and a budget. Your boss might not want to go for it, and your engineers might be resistant because it would take them extra time. Let’s talk about a framework for those conversations.

¹¹

The framework I use to have these discussions centers on the effort required to implement an idea and the idea’s impact on the customer and the business.

While there will inevitably be high-impact, high-effort items in a project, the sweet spot is low-effort, high-impact ideas. These types of ideas help the user in meaningful ways, without significantly affecting your timeline and budget.

This way of looking at ideas also helps me to let go of ideas that might be a little too egocentric. Those usually have low levels of impact and high levels of effort. Mapping them out in this way helps me to focus on what matters most.

I’ve found this approach effective because it enables us to differentiate our products, while making the most of our time.

Let’s go back to custom animations for a moment. If we’re talking about adding fiddle factors and animation to our email app, we can’t build something great by assembling it entirely from off-the-shelf components. If we use only basic components and built-in animations, the product wouldn’t be memorable enough to matter to people. Plus, it will make it difficult for us to fall in love with what we’re building and to give the product a soul.

¹³

One additional framework to keep in mind is the Kano model¹⁵, which was developed in the 1980s by Noriaki Kano.

There is a great explanation video¹⁶, but, in short, this model covers three areas:

• basic needs (Does the product work?),
• performance needs (How efficient is it?),
• attractive needs (What makes me love it?).

The soul of a product lives in the attractive needs. The Kano model invites us to think of one or two features that set the product apart from its competition. Framing your high-impact, low-effort ideas with this model will help you make a strong case for soul.

At our core, we’re people who care about our craft. We want to build great products, and the products need to have those nice touches. Being able to fully ply our trade also helps with employee retention. We’re happier when we’re able to do our best work. If we’re able to fully stretch ourselves to make something great, we’re going to keep giving our best in future. Conversely, if we’re prevented from doing our best work, we’ll become disconnected and disinterested, motivating us to go elsewhere when the opportunity presents itself.

If your boss or company doesn’t give you this freedom and you think it’s important, it might be time to plan your next transition.

Wrapping Up Link

It’s not enough to simply design something and meet a goal. This is a surefire way to burnout and boring products. We’ve got to do more for ourselves, our products and our industry. Finding our principles will help us find the right place to work and to do our best work.

Giving our products a soul will make them better, more engaging products. The next time you’re designing, ask yourself what would make someone find your product useful, and what would make them care about it more than another product? Once you do that, you’ll be well on your way to cultivating a healthy relationship with your products and building things that people really love.

Also, it’s not enough for us to have these ideas; convincing our team members and bosses to come along with us is important. Once we test and articulate the value of what we do, we’ll have a much easier and more rewarding time.

(mb, al, il)

Footnotes Link

1. 1 https://vimeo.com/36579366
2. 2 https://www.flickr.com/
3. 3 https://slack.com/
4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/10/the-gutenberg-bible-new-york-public-library-large-opt.jpg
5. 5 https://en.wikipedia.org/wiki/Gutenberg_Bible
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/10/the-gutenberg-bible-new-york-public-library-large-opt.jpg
7. 7 https://thrupages.com/2015/10/22/brain-rules/
8. 8 https://kindle.amazon.com/post/a5V977pDT6-sxrsR53eB6g
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/10/brand-personality-large-opt.png
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/10/brand-personality-large-opt.png
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/10/effort-graph-large-opt.png
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/10/effort-graph-large-opt.png
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/10/kano-model-large-opt.png
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/10/kano-model-large-opt.png
15. 15 https://en.wikipedia.org/wiki/Kano_model
16. 16 https://www.youtube.com/watch?v=iuOrEIBVQX4

↑ Back to topTweet itShare on Facebook

One of the most popular children’s television heroes here in the Czech Republic is The Little Mole¹, an innocent, speechless and cheerful creature who helps other animals in the forest.

TV heroes often fight against people who destroy their natural environment. When watching The Little Mole with my kids, I sometimes picture him as a mobile website user. Do you want to know why?

We, as web designers, often treat our users the same way the “bad guys” treat The Little Mole, especially on mobile websites.

One episode of the series is particularly dramatic. An old man tries to get rid of the mole in the garden by any means and eventually tries to poison him. Web designers do the same thing when they make it difficult to use the mobile version of a website and try to “poison” the user, eventually making them leave the website.

So let’s be a little sarcastic today and try to poison the mobile user. How does that sound? Just follow my instructions.

Let’s make a slow website, disable zooming, hide the navigation and fill up the page with fixed-positioned elements. I’ll bet the poor mobile user won’t be able to survive this.

1. Make The Website Load Slowly Link

Making the website load slowly is the best weapon against the mobile user. Can the visitor go to and return from the post office before the website has finished loading? Then you’re doing a great job! You are poisoning the mobile user effectively.

Now, let’s be serious. The transmission speed of mobile networks is slow, and even though speeds are increasing to 3G and 4G, the networks aren’t everywhere², and they just can’t compete with wired ones.

Various test and surveys show that the website speed has a significant impact³ on conversions and a website’s overall effectiveness. The user shouldn’t have to wait more than a couple of seconds for a website to render, even when using an EDGE connection.

Moreover, don’t forget that website speed is one of the criteria⁴ that Google considers for search results and AdWords campaigns. Therefore, it affects not only conversions but also whether users will land on your website at all.

The solution is quite simple: Think about speed when you are developing a website’s concept. Start with a performance budget⁵.

Optimizing speed is not that complicated. Let me share with you some best practices from Google⁶:

• Minimize data transmission.
  • Optimize images.⁷
  • Minify CSS, JavaScript and HTML⁸.
• Don’t block rendering.
  • Optimize CSS delivery.⁹
  • Remove render-blocking JavaScript.¹⁰
  • Prioritize visible content.¹¹
• Optimize the back end.
  • Improve the server’s response time.¹²
  • Enable compression.¹³
  • Leverage browser caching.¹⁴
  • Avoid unnecessary redirects.¹⁵

Don’t have time to read this now? I completely understand. Save the text for later. Fortunately, tools are available to tell you what is wrong with your website. First, test your website with PageSpeed Insights¹⁶, and then continue to WebPagetest¹⁷.

2. Design Your Carousel Poorly Link

The user will never come back.

It is true that various studies on carousels do not explicitly say they are inappropriate. However, carousels are complicated both in implementation and for the user experience. So, using them is risky.

¹⁸

It is highly probable that, by using carousels, you will be hiding some content, instead of promoting it. According to some surveys, the vast majority of users see only the first image²⁰, and banner-based carousels are usually just ignored because of “banner blindness.”

If you plan to use a mobile carousel²¹, make sure it meets the following criteria:

• Don’t use the carousel just as eye candy or to hide unnecessary content.
  
  Carousels are great at advertising secondary content that is related to the main content.
• Use the first slide to announce the other slides.
  
  The main purpose of that first slide is entice the user to view the second and third slides.
• Make the navigation usable on small phones.
  
  Those small dots used as navigation on the desktop do not count as “usable” on mobile phones!
• Make sure custom gestures don’t conflict with default browser gestures.
  
  Are you using the swipe gesture? Make sure it does not conflict with a built-in browser gesture.
• Don’t slow down the website.
  
  This has to do primarily with data demand and implementation of the carousel.

²²

3. Hide The Menu Under A Hamburger Icon Link

Make the navigation easily accessible? Come on, get serious! You could end up with thousands of users.

When you hide the menu on a website, people will stop using it. In a recently published study, Nielsen Norman Group found²⁴ that hidden navigation on mobile has a negative effect on content discoverability, task completion and time spent on task.

If there is something important in the navigation, and you can display it, do it. If you can’t show the whole menu, then simplify it, or at least show the important parts of it. For this reason, I tend to recommend the “priority plus” navigation pattern²⁵.

²⁶

What if you can’t show the important items? OK, then, hide it under a hamburger icon, label it “Menu”²⁸, and make sure users can use the website without the menu.

4. Always Rely On The Swipe Gesture Link

Swipe away all users with the swipe gesture.

I regard less common gestures to be risky for a mobile UI, for two reasons²⁹:

• Custom gestures might conflict with the browser’s default gestures.
  
  If your carousel supports swipe gestures, for example, the user might accidentally perform an “edge swipe” (a gesture very similar to a regular swipe), which some mobile browsers interpret as a command to navigate the browsing history.
• Less common gestures are unknown to many users.
  
  Therefore, you’ll have to teach the user. This makes sense if we are talking about daily-used apps, but not about websites.

Using a carousel does not have to be such a problem. However, I have seen news websites support swipe gesture for navigation between articles. For the user, this is unusual and confusing.

The swipe gesture is not the only problem here. Tapping the bottom part of the Safari browser on iOS will reveal a hidden menu. Therefore, if you stick navigation elements at the bottom, the user might be forced to tap twice³⁰.

Before using any uncommon gesture, test that it doesn’t conflict with any browser’s built-in gestures.

5. Make All Tap Targets Nice And Small Link

One millimeter is good enough.

OK, let’s be serious. Are your tap targets big enough that a basketball player could easily hit them with their thumb?

In his book Designing For Touch³¹, Josh Clark refers to a study by Steven Hoober and Patti Shank³². The researchers found that, if placed at the center of the mobile screen, a tap target can be as small as 7 square millimeters; however, if placed at the top or bottom, it should be at least 11 square millimeters.

However, millimeters are rather impractical for web use. We use pixels, right? So, how do we deal with the variety of DPIs on mobile devices? Probably to most readers’ surprise, Josh Clark says in his book:

Nearly all mobile browsers now report a device-width that sizes virtual pixel at roughly the same pixel density: 160 DPI is the de facto standard for touchscreen web pixels.

Again, all you need to do is set the viewport meta tag correctly:

<meta name="viewport" content="width=device-width, initial-scale=1">

There is one more step: Use em or rem units that best suit the responsive design. The default font size for most browsers is 16 pixels, so we can use the following conversion:

/* 7mm = 44px = 2.75rem */ .touch { height: 2.75rem; } /* 11mm = 69px = 4.3125rem */ .touch-big { height: 4.3125rem; } 

That’s it, folks. Don’t forget to provide a fallback for old browsers³³. And if you are into details, I suggest you buy Josh’s book³⁴.

6. Make It Responsive, But Only For Certain Resolutions Link

Force users to leave your website. Make them go buy a phone that has the “correct” resolution.

We are faced with an enormous variety of screen resolutions³⁵ on mobile devices. Before, only the Android platform was affected, but now Apple devices are³⁶, too.

³⁷

We can’t assume that smartphone screens are around 320 pixels, that tablets are around 768 pixels and that desktops are over 1024 pixels. A page should seamlessly adjust to screens that are 768 pixels and lower.

So, what resolutions should we take into account? All of them, my friend.

In my development career, I have been testing responsive websites from 240 to approximately 2600 pixels wide. I admit that making all sizes look perfect is sometimes not humanly possible, but the bottom line is that the layout should not fall apart — assuming your intention is not to scare away mobile users.

Like most of you, I simply expand the browser window (or use the developer tools’ responsive mode) from the smallest size to full width. It is a kind of “Hay! mode”, found in the Brad Frost’s testing tool³⁹.

Also, Don’t Change the Design When the Phone Switches from Portrait to Landscape Mode Link

I think that users expect the same, or at least a very similar, look when browsing a website, regardless of how they hold their phone. I remember one of my lecture participants telling me a story. When his company redesigned a website, a lot of people started calling the support desk. They were all complaining about a particular error: The website menu was disappearing. After a while, they discovered that these were tablet users. When they viewed the website in landscape mode, the menu was there. If the tablet was rotated into portrait mode, the menu was hidden under a “hamburger” icon.

7. Don’t Make Phone Numbers Tappable Link

Make the user angry. Prevent them from calling phone numbers directly from the website.

Contacting you can be a piece of cake for mobile users. Just set phone numbers as links that open a phone call⁴⁰. It is similar to activating FaceTime, SMS and Skype on Apple devices.

We have a problem, though. People usually can’t make calls from a desktop browser⁴¹. However, instead of ignoring phone links, desktop browsers open an incomprehensible dialog box that invites the user to select an app to make the call. In most cases, no such app is available.

Dear friend, we don’t want to poison desktop users either. So, on this rare occasion, I recommend using device detection and inserting an active link for mobile users only.

In the HTML, the phone number would be inactive. We’ll just wrap it in a span tag and apply Javascript later:

Phone: <span>123456789</span> 

Using jQuery and the isMobile⁴² detection library, we’ll replace the element with a phone-number class and a link:

if(isMobile.phone) { $('.phone-number').each(function() { $(this).replaceWith( $('<a href="tel:' + this.innerHTML + '">' + this.innerHTML + '</a>') ); }); } 

On smartphones, the markup looks like this:

Phone: <a href="tel:123456789">123456789</a> 

8. Disable Zooming Link

Disable the zoom if you really want to stick it to users. It’s inhumane — and very effective.

But seriously, by disabling zooming, you are not only making life a little more complicated for users with poor eyesight. Even users with good eyesight⁴³ zoom on mobile devices, for various reasons:

• to see an image up close,
• to more easily select text,
• to magnify content with low contrast.

Zooming is actually disabled on a sizeable proportion of mobile websites. Consider the importance of viewing image details in an online store. Zooming is disabled on 40% of e-commerce websites⁴⁴ tested by the Baymard Institute. Mind-boggling, isn’t it?

Just as desktop users can’t do without the back button and scrolling, so too do mobile users need zooming.

The WCAG’s accessibility guidelines tell us that users must be able to increase text size by 200%.⁴⁵

Sure, there are cases when you have to disable zooming — for fixed elements, for example. But zooming is sometimes disabled by accident, such as by insertion of the wrong meta viewport tag. The one below is the only correct one, whereas incorrect tags contain parameters such as maximum-scale=1 and user-scalable=no.

<meta name="viewport" content="width=device-width, initial-scale=1"> 

9. Set * { user-select: none }, And All Is Good Link

Some users will visit your beloved website and copy all of the text. This is shocking and must be stopped.

Dear friends, setting the user-select property⁴⁶ to none can be useful, but only in parts of an interface that you expect users to interact with, where selection might do no good.

Therefore, I recommend using user-select: none for the following elements only:

• icon navigation items,
• carousels with overlaid text,
• control elements such as dropdowns and navigation.

Please, never ever disable the selection of static text and images.

10. Load Web Fonts Incorrectly Link

If the user lives to see the page load, kill them for good by making the font flicker or hide the content completely.

Using web fonts is not wrong, but we have to make sure they are the first elements of the website to load. Some browsers wait for web fonts to load before displaying the content. This is known as a flash of invisible text (FOIT). Other browsers (Edge and Explorer) show a system font right where you least want it, known as a flash of unstyled text (FOUT).

There is a third possibility, flash of faux text⁴⁷ (FOFT). Here, content is rendered with a regular cut of the web font, and then bold and italic cuts are displayed right after that.

⁴⁸

My projects are usually content-based websites, so I prefer to display the content as quickly as possible using a system font (FOUT). This is when I like Microsoft browsers. I also use a small library named Font Face Observer⁵⁰. Let’s look at the code. First, the JavaScript:

var font = new FontFaceObserver('Webfont family'); font.load().then(function () { document.documentElement.className += ' webfont-loaded'; }); 

And here is the CSS:

body { font-family: sans-serif; } .webfont-loaded body { font-family: Webfont Family; } 

Every website requires something different. Refer to Zach Leatherman’s “Comprehensive Guide to Font-Loading Strategies⁵¹.”

11. Clutter The Page With Social Media Buttons Link

If you can’t poison them with your own concoction, use your neighbor’s.

Facebook, Twitter and Google buttons are uncomfortable for mobile users, for two reasons:

• They download a huge amount of data and slow the loading and rendering of websites.
  
  Tests show that when the official social sharing buttons are used, visitors will download 300 KB more over more than 20 requests.
• They are usually useless. Social sharing is often integrated in the operating system.
  
  A Moovweb study carried over the course of one year across 61 million mobile sessions showed that only 0.2% of mobile users do any social sharing.

The vast majority of social buttons are useless, even on desktop. Sharing is particularly useless in an online store, because a low sharing count is demotivating⁵² for the buyer. But let’s not go there. We are trying to poison the mobile beast.

If you don’t want to poison the mobile user but you need social sharing buttons, try using social sharing URLs⁵³ or a plugin such as Social Likes⁵⁴, which implements them with less impact on loading speed.

12. Faulty Redirection From Desktop To Mobile Link

A “killer” developer who has an m-dot version of a website has one more way to poison the user. Hooray!

We see faulty redirects⁵⁵ on practically every other website with an m-dot version.

The correct implementation looks something like this:

1. If a mobile visitor goes to www.example.com/example, the server detects their device and redirects them to m.example.com/example (not to m.example.com). The same happens on a mobile version accessed from a desktop.
2. If that URL does not exist, then leaving the user on the desktop version is better than redirecting them to the m-dot home page.
3. Let search engines know about the two versions of the website by using <link rel="alternate"> or by indicating it in the sitemap.xml file. A detailed guide⁵⁶ is in Google’s help section for webmasters.

The ideal solution is a responsive website that serves the same URLs to all devices. An m-dot version of a website increases development and maintenance costs. Also, it is not the only type of website that can be optimized for a strong smartphone UX or for mobile network speed.

Read what Karen McGrane says in her book Going Responsive⁵⁷, referring to a study by Doug Sillars⁵⁸, the technical lead for performance in AT&T’s Developer Program:

It’s a myth that the only way to make a fast-loading site on mobile is an m-dot. Good coding and decision-making practices can serve up responsive sites that are every bit as fast as any other method.

Now, the only thing left to do is hide what is not necessary — the content, for example.

13. Hide The Content Well Link

Hide content from the mobile user. They don’t need it anyway.

Whether you like it or not, people visit websites to see the content. Yes, we are forced to live among such spiteful creatures.

⁵⁹

Unfortunately, a lot of websites hide content, for reasons I don’t understand. Perhaps the content is not worthwhile, but I find that hard to believe. Numerous elements can cause content to be hidden:

• Cookie bar
  
  Some European websites are obliged to show the unfortunate cookie consent⁶¹ notification. And we can do nothing about it. However, this doesn’t mean that a cookie bar should be fixed and take up half the screen.
• Online chat window or newsletter subscription ad
  
  Positioning elements as fixed is very unfortunate on mobile devices. You are hiding content that the user came to see and are displaying content that they are not interested in. Using these elements is OK, but avoid fixing their position on mobile devices.
• App-download interstitials
  
  These are painful. Some websites invite you to install the accompanying app, instead of showing you the content. But users came to see the website! Instead, use smart app banners⁶² on iOS or native app install banners⁶³ on Android to advertise your native app.

Google has decided⁶⁴ that, effective January 2017, overlapping content on mobile websites will be penalized:

[Content that is visually obscured by an interstitial] can frustrate users because they are unable to easily access the content that they were expecting when they tapped on the search result.

Pages that show intrusive interstitials impair the user experience more than pages whose content is immediately accessible.

For the record, Google will not penalize websites that show interstitials, such as cookie bars or age confirmations on adult websites.

How Many Mobile Users Have You Poisoned Today? Link

That’s about it. Now, let’s be serious. There wasn’t anything “new” above, was there?

All the more reason to be sorry that the vast majority of responsive websites poison the mobile user.

Let’s summarize the critical information in a short checklist:

• Does your website render quickly enough on mobile?
  
  Do less important elements block more important ones? Have you chosen the optimal strategy to render web fonts? Are third-party plugins (such as for social media) slowing down the website?
• Are you hiding content?
  
  Are fixed elements getting in the way? Are you hiding content for particular resolutions or in landscape or portrait mode?
• Is the UI mobile-friendly?
  
  Are the tap targets large enough? Are complex UI elements such as carousels implemented correctly on mobile? Are phone numbers clickable? Does content selection remain enabled? Do you make navigation visible wherever possible?
• Do you respect the native browser?
  
  Have you disabled zooming by accident? Do you support gestures that conflict with browser defaults?
• Is your redirection implemented correctly (if you’re using an m-dot version)?

Be kind to mobile users. Do not be the wicked old man who tries to get rid of The Little Mole in his yard. Do you want to know how the fairy tale ends? The Little Mole survives, laughs at the old man and moves to another garden.

(da, yk, al, il)

Footnotes Link

1. 1 https://en.wikipedia.org/wiki/Mole_(Zden%C4%9Bk_Miler_character)
2. 2 https://twitter.com/firt/status/757587453234454528
3. 3 https://wpostats.com/
4. 4 https://adwords.googleblog.com/2008/06/landing-page-load-time-now-affects.html
5. 5 http://danielmall.com/articles/how-to-make-a-performance-budget/
6. 6 https://developers.google.com/speed/docs/insights/rules
7. 7 https://developers.google.com/speed/docs/insights/OptimizeImages
8. 8 https://developers.google.com/speed/docs/insights/MinifyResources
9. 9 https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
10. 10 https://developers.google.com/speed/docs/insights/BlockingJS
11. 11 https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent
12. 12 https://developers.google.com/speed/docs/insights/Server
13. 13 https://developers.google.com/speed/docs/insights/EnableCompression
14. 14 https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
15. 15 https://developers.google.com/speed/docs/insights/AvoidRedirects
16. 16 https://developers.google.com/speed/pagespeed/insights/
17. 17 http://www.webpagetest.org/
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/09/image_0-opt.png
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/09/image_0-opt.png
20. 20 https://erikrunyon.com/2013/07/carousel-interaction-stats/
21. 21 https://www.smashingmagazine.com/2015/02/carousel-usage-exploration-on-mobile-e-commerce-websites/
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/09/image_1-opt.png
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/09/image_1-opt.png
24. 24 https://www.nngroup.com/articles/hamburger-menus/
25. 25 https://css-tricks.com/diy-priority-plus-nav/
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/09/image_2-opt.png
27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/09/image_2-opt.png
28. 28 http://exisweb.net/mobile-menu-abtest
29. 29 https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570#.1qxxllypd
30. 30 https://www.eventbrite.com/engineering/mobile-safari-why/
31. 31 https://abookapart.com/products/designing-for-touch
32. 32 http://www.elearningguild.com/insights/index.cfm?id=174&action=viewonly
33. 33 https://github.com/robwierzbowski/grunt-pixrem
34. 34 https://abookapart.com/products/designing-for-touch
35. 35 http://screensiz.es/phone
36. 36 https://twitter.com/LiquidLightUK/status/644827716739592192
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/09/image_3-opt.png
38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/09/image_3-opt.png
39. 39 http://bradfrost.com/demo/ish/
40. 40 http://www.mobilexweb.com/blog/click-to-call-links-mobile-browsers
41. 41 https://css-tricks.com/the-current-state-of-telephone-links/#article-header-id-1
42. 42 https://github.com/kaimallea/isMobile
43. 43 http://adrianroselli.com/2015/10/dont-disable-zoom.html
44. 44 http://baymard.com/blog/mobile-image-gestures
45. 45 https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-scale
46. 46 https://css-tricks.com/almanac/properties/u/user-select/
47. 47 https://www.zachleat.com/web/foft/
48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/09/image_4-opt.png
49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/09/image_4-opt.png
50. 50 https://github.com/bramstein/fontfaceobserver
51. 51 https://www.zachleat.com/web/comprehensive-webfonts/
52. 52 https://vwo.com/blog/removing-social-sharing-buttons-from-ecommerce-product-page-increase-conversions/
53. 53 https://github.com/bradvin/social-share-urls#google
54. 54 http://social-likes.js.org/
55. 55 https://developers.google.com/webmasters/mobile-sites/mobile-seo/common-mistakes#faulty-redirects
56. 56 https://developers.google.com/webmasters/mobile-sites/mobile-seo/separate-urls
57. 57 https://abookapart.com/products/going-responsive
58. 58 http://trentwalton.com/2014/07/17/m-dot-or-rwd/
59. 59 https://www.smashingmagazine.com/wp-content/uploads/2016/09/image_5-opt.png
60. 60 https://www.smashingmagazine.com/wp-content/uploads/2016/09/image_5-opt.png
61. 61 https://www.cookiechoices.org/
62. 62 https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
63. 63 https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android#native
64. 64 https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html

↑ Back to topTweet itShare on Facebook

Editor’s note: So you’ve attended a conference, listened to some truly inspiring talks, made quite a few valuable connections, maybe even attended a hands-on workshop and learned a thing or two. What now? How do you bring back the new knowledge and ideas and connections to your team and to your work? This article highlights a practical strategy of getting there without much effort. With SmashingConf Barcelona¹ taking place next week, we thought this article would come in handy.

Have you ever been to a conference with top speakers, awesome people to network with and such a great energy that you got fired up and couldn’t wait to get home to start applying everything you’ve learned? How do things look two weeks later? Did you implement all of that learning into action? How about two months later? Were you still taking action on that knowledge?

If you got off track, don’t worry. That happens to most participants at any conference, no matter how great it is. In fact, the better the conference, the more likely you’ll be overwhelmed and won’t implement everything you wish to implement — unless you create a game plan to put the knowledge you acquire into action in a way that doesn’t overload you.

Here are a few tips on how you can do that in just a few minutes between sessions.

Set An Actionable Goal Link

It is easy to tell yourself, “I’ll implement this strategy in my organization as soon as I get back home,“ or “Two months from now, I’ll have mastered this skill.” The hardest part is ensuring that you actually implement the strategy or that you practice enough to master the skill.

To solve this problem, at the end of each presentation, commit yourself to applying the newly acquired knowledge for a certain period of time or for a certain number of times each day. Setting aside 30 minutes to focus on that subject every day is a lot more effective than completely transforming how you work in just a week, particularly if you have trouble acquiring habits.

²

Write Down The Reason Why You Are Implementing This New Action Link

Will this new action save you time in the future? Will it triple your productivity? Will it make you a better web designer? How so?

Write down your motivation right after the presentation is over, so that once you are back home and face the first setback, you can read again why you decided on it in the first place. This will help you to persevere until it works for you.

Be Clear On How This New Action Will Affect You Link

For every action there is a reaction. It would be naive to think that this new action won’t have any impact on you.

Maybe you will incur some extra costs. Maybe you will get frustrated until you master the new skill. Or maybe you will have to work a bit more in the beginning. When you become clear on those possible setbacks, you can create strategies to minimize or even eliminate them.

Also, be clear on the positive impact it will have on you. When things are in place and you start reaping the rewards of your actions, what will those rewards look like? Will you be making or saving more money? Will the quality of your work skyrocket? Once you know the rewards, you can create strategies to get the most out of them.

You don’t need to come up with those strategies at the conference. All you need is a quick brainstorm on the positive and negative impact of this new action. You can come up with the strategies later on, once the conference is over. For now, just have an idea of what might get in your way, so that you can prepare for it, and know what you might get out of it, so that you can leverage it.

Be Clear On How This New Action Will Affect Others Link

If you work on a team, your new action will directly or indirectly affect them, especially if you are the only one who attended the conference. Ideally, your whole team would go to the conference with you, but that is not always possible.

When you get back from a conference and start working harder, some of your team members might get jealous and try to undermine your efforts (even if subconsciously). You may have learned of a great idea at the conference that your colleagues don’t find so great because they don’t share the context in which you learned it; and, because of that, they might turn down your idea. That can be discouraging.

Once you’re clear on how your ideas or new work ethic might affect your colleagues, you can come up with ways to give them the context they need, so that they see the power of the idea before you present it to them.

⁴

If you feel comfortable presenting, you could even offer a mini-workshop for them based on what you’ve learned. That’s a double-win because, first, they will learn the key points and, secondly, by teaching them, you will assimilate about 90% of what you learned at the conference.

Once again, you don’t need to come up with strategies during breaks between sessions, but at least brainstorm on how this new action could impact those around you.

Take Only Essential Notes Link

Every conference has two types of audience members, the ones who are always with their head down taking notes and the others who don’t bother to write anything. Both types miss out on important aspects of live presentations. The person who is always writing very often gets so focused on the content that they end up missing the broader context. That leads to confusion and abstract content when they get around to reviewing their notes. The person who pays attention but doesn’t take notes might understand the context and learn a lot better, but because our brains can process only seven pieces⁶ of information at a time (give or take two), that person will have a hard time recalling everything they learned.

⁷

To solve this dilemma, develop the habit of taking notes quickly and effectively. Sketchnotes⁹, mindmaps and flowcharts are great options. Familiarize yourself with them, and apply whichever you feel is most appropriate for the moment. For instance, sketchnotes could be your standard method of note-taking; when you want to take notes about a complex strategy, you could draw a mindmap; and when you are learning about a process that has multiple steps and a certain order to those steps, you could opt for a flowchart. As you become familiar with these note-taking options, you’ll notice what works best for you in each situation. For now, just pick one and start with it.

Set Up A Reward System Link

In most cases, when you start implementing what you’ve learned, you won’t get results right away. Most likely you will go through some frustration before succeeding. Encountering challenges in implementing a new strategy or concept is perfectly natural. It simply means you are learning something new, and as a result, it will help you to become a better at what you do.

According to the four-stage model of learning a new skill, created by Noel Burch and made famous by Abraham Maslow, when we learn any new skill we move first from unconscious incompetence (where we have no idea that we don’t know something) to conscious incompetence (where we are aware of our lack of skill). This is the time when most people might get frustrated and give up.

To get yourself excited about the initial challenges and avoid the initial discouragement, set up a reward system. This will remind you that you are on the right track.

You could simply give yourself a small prize to reward your commitment. If you have taken the action you have committed to take for the entire week, reward yourself with a massage, a few hours of playing that video game you love or going to your favorite restaurant. This will keep you going when frustration would normally set in.

By using rewards to keep you from giving up, you will carry yourself through the initial challenges of the conscious-incompetence phase, and soon you will reach conscious competence, when you can perform the new skill quite well but still need to think about it. The great news is that, once you are at the conscious-competence level and keep performing this new skill, very soon it will become automatic, and you won’t need to even think about it — you will just do. This is the fourth stage, of unconscious competence.

Rewards will facilitate this process because they will condition you to perform the action more often.

Setting up a reward system is quite simple. Think of one or more small rewards you can give yourself each time you take the action you’ve committed to take. For example, If you’ve committed to working with a particular skill set for an hour every work day, by the end of that hour, give yourself a 30-minute break or your favorite candy bar or a bottle of your favorite beer. The reward doesn’t have to be big, but it has to feel like an acknowledgement of your effort.

¹⁰

You might be thinking, “This reward stuff won’t work for me; I’d rather reward myself when I finish the project.” Well, consider the famous research of Ivan Pavlov¹² on conditioning. If you reward yourself only when you complete a project, you will condition yourself to complete projects more quickly, and you will most likely grow willing to sacrifice the quality of your work for it. This process happens unconsciously. On the other hand, if you reward yourself for working hard, you will condition yourself to work hard and focus. By working hard and being focused, you will automatically get more work done in a shorter period of time, without sacrificing quality.

Pro tip: Think of many different rewards, write them down, and put the paper in a jar. Every time you earn a reward, pull a paper from the jar and give yourself that reward. This relies on the same psychological trick that subscription boxes and scratch cards use to hook you in, but this time you are the one in control, and you win every single time.

Get An Accountability Partner Link

During the conference, you will be among awesome people with objectives very similar to yours. You will also have plenty of opportunities to network with them. Why not take advantage of that?

When you meet a couple of fellow web designers with similar aspirations, and you are constantly in touch with them, even if only via Facebook, you can support each other to stay on track with your goals. You will also have a great source of learning because they will be implementing the same things as you.

Instead of asking the standard questions like, “Where are you from?” and “What do you do?,” ask questions that will reveal whether you could be good accountability partners for each other:

• “What topic have you liked most so far, and what are you most likely to put into practice right away?”
• “What inspired you to come to this conference?”
• “I really liked what the last speaker said. Have you tried doing that?”

Questions like these take the pressure off because, while they still count as small talk, they allow you to talk about many subjects without stalling the conversation. And you will be able to more easily spot who among the attendees would be a good accountability partner.

Identify Potential Obstacles Link

Perhaps a few pressing projects are awaiting your return. Or maybe some things will distract you in the coming weeks. Or perhaps you have a history of losing enthusiasm quickly.

Whatever it is, now is the time to become aware of those things. Devote a couple of minutes to thinking of what could prevent you from following through with your actions. After the event, you can devise ways to avoid those obstacles and to follow through on the actions until they get you the result you want.

Schedule Time To Take Action Daily Or Weekly Link

Let’s face it: You are a busy person and have a lot of things going on in your life right now. Chances are, when you get back to your daily life, your schedule will be full of activity. If you try to fit in the action “whenever you can,” you will either push it to the end of the day (causing you stress) or not do it at all.

Before you go home, schedule a specific time every day to take the action. Treat the time as if it were a meeting with someone else. Do not try to justify moving it around anytime something comes up. Move it only when something truly urgent comes up.

¹³

Implement One Strategy Or Action At A Time Link

You will learn a ton of great content at the conference, content that could help you a lot. Most people try to implement everything at once; after all, they don’t want to miss out on the potential benefits. What happens instead is that they end up getting overwhelmed and start slacking off. This is a waste of a great conference.

If you can successfully implement just one strategy or action in your daily life, then the conference will have been more than worth your investment of time and money. That being said, you can still try to implement everything you believe would be useful to you. All you need to do is to write a list of things to implement; as soon as you have successfully implemented one item on the list, and it is now a habit or requires little conscious effort on your part, move on to the next item.

Beware! There is a popular myth that developing a new habit takes 21 days. This myth is based on a misreading of Maxwell Maltz’ book Psycho-Cybernetics. The myth was debunked when researchers at the University College London found that developing a habit takes on average 66 days. You don’t have to take two months to move on to the next item in your list, though. The study just shows the average; according to the same study, some people developed habits in as little as 18 days, and others in as long as 254 days. What matters is not the time, but how much repetition and intensity you put into implementing the new skill.

Getting to the next item in the list might take a few days or a few months. Either way, you will eventually get through the list and have implemented everything you find valuable.

So, get excited to attend your next conference, because if you follow the steps in this article, you will have a concise and effective action plan, one that will bring you more results than all of the previous conferences you’ve attended combined!

(il, al)

Footnotes Link

1. 1 https://smashingconf.com/
2. 2 https://www.pexels.com/photo/clock-at-6-17-187490/
3. 3 https://www.pexels.com/photo/clock-at-6-17-187490/
4. 4 https://www.pexels.com/photo/people-coffee-meeting-team-7096/
5. 5 https://www.pexels.com/photo/people-coffee-meeting-team-7096/
6. 6 https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two
7. 7 https://www.flickr.com/photos/marcthiele/15068886599/in/album-72157647578471246/
8. 8 https://www.flickr.com/photos/marcthiele/15068886599/in/album-72157647578471246/
9. 9 https://www.smashingmagazine.com/2014/11/how-to-get-started-with-sketchnotes/
10. 10 https://www.pexels.com/photo/no-person-still-life-card-desktop-104966/
11. 11 https://www.pexels.com/photo/no-person-still-life-card-desktop-104966/
12. 12 http://www.simplypsychology.org/pavlov.html
13. 13 https://www.pexels.com/photo/hand-pen-writing-plant-58457/
14. 14 https://www.pexels.com/photo/hand-pen-writing-plant-58457/

↑ Back to topTweet itShare on Facebook

As people working in front of a screen all day, we often struggle to find the right balance. I’m not talking about work-life balance alone here, but of how our life that is completely virtual during the day often causes us to not take real life into account.

We tend to forget that our bodies need something else than coding all day. And we need to take care of our fellow human beings in real life as well. Just think about this number: The average US person will spend over 9 hours in front of a screen¹ today. Time to become more aware of how we can keep the balance between the virtual and the real world.

News Link

• Do you remember jsPerf²? It has been down for years (due to spam), now it celebrates its revival. Finally a chance to use this great, great tool again.

Concept & Design Link

• When it comes to error messages for mobile, there’s a lot that can go wrong. Prince Pal shares what we need to take into account to design error messages that don’t frustrate users³.

⁴

Tools & Workflows Link

• Automated browser testing usually causes a lot of trouble and custom build solutions. TestCafé⁷ now tries to solve this with a Node.js tool that takes care of all the stages: starting browsers, running tests, gathering test results, and generating reports without the need for a browser extension.

HTML & SVG Link

• Jason Grigsby explains how we can use Client Hints for responsive images⁸. With Client Hints, the browser can tell a server via HTTP headers what types of content it prefers based on information about the device pixel ratio, viewport width, and width of the image element on the page. This allows the server to serve the most appropriate image back to the client.

⁹

JavaScript Link

• It’s easy to think of a collection of DOM elements as a regular JavaScript array, but actually, it’s a bit different. Pawel Grzybek shares how you can loop through a collection of DOM elements in ES6¹¹.

CSS/Sass Link

• In the past months I’ve heard a lot of people question the need for normalize.css¹². But the truth is that normalize.css wasn’t only created to fix browser bugs but also to provide us developers with solid baseline styles. As Harry Roberts now points out, the latest normalize.css with 984 bytes after gzip doesn’t even add much to your existing codebase¹³ — in fact, it makes less than 1.3% of the average CSS project¹⁴.

Work & Life Link

• As developers, do we really need to code all day? Is it necessary to have side projects and participate in open-source? Belén Albeza doesn’t think so. She shares why having a life away from coding matters¹⁵ and why you can be a passionate developer nonetheless. It’s important to have a balance between your computer time and other life activities (to help gathering data on this matter, please fill out this survey ¹⁶), and that’s also the message we have to send across to new developers¹⁷. You can do great coding in a normal workday.
• Tea Ivanova wrote about the common misunderstanding that agile work methods are seen as operational and tactical¹⁸ rather than strategic. A good read for anyone working with agile methods.

¹⁹

And with that, I’ll close for this week. If you like what I write each week, please support me with a donation²² or share this resource with other people. You can learn more about the costs of the project here²³. It’s available via email, RSS and online.

— Anselm

Footnotes Link

1. 1 https://twitter.com/lukew/status/786605159858049024
2. 2 https://jsperf.com/
3. 3 https://think360studio.com/how-to-design-an-error-message-for-a-mobile-app/
4. 4 https://think360studio.com/how-to-design-an-error-message-for-a-mobile-app/
5. 5 https://think360studio.com/how-to-design-an-error-message-for-a-mobile-app/
6. 6 https://think360studio.com/how-to-design-an-error-message-for-a-mobile-app/
7. 7 https://devexpress.github.io/testcafe/
8. 8 https://cloudfour.com/thinks/responsive-images-201-client-hints/
9. 9 https://cloudfour.com/thinks/responsive-images-201-client-hints/
10. 10 https://cloudfour.com/thinks/responsive-images-201-client-hints/
11. 11 https://pawelgrzybek.com/loop-through-a-collection-of-dom-elements/
12. 12 http://nicolasgallagher.com/about-normalize-css/
13. 13 http://csswizardry.com/2016/10/continue-normalising-your-css/
14. 14 http://httparchive.org/interesting.php#bytesperpage
15. 15 https://belenalbeza.com/top-developers-can-have-a-life-outside-coding/
16. 16 https://brizk.typeform.com/to/ByT0Ml
17. 17 https://twitter.com/i/moments/789042973392658432
18. 18 http://clearleft.com/thinks/408
19. 19 https://belenalbeza.com/top-developers-can-have-a-life-outside-coding/
20. 20 https://belenalbeza.com/top-developers-can-have-a-life-outside-coding/
21. 21 https://twitter.com/i/moments/789042973392658432
22. 22 https://wdrl.info/donate
23. 23 https://wdrl.info/costs/

↑ Back to topTweet itShare on Facebook

Many apps today, such as Google Now, Spotify and Amazon, make assumptions about user preferences based on personal data. They may even use this information to make decisions on our behalf, without any direct input from us. For example, Facebook tailors your news feed and Amazon recommends products — both hiding “irrelevant” information and only showing what they think you will like.

This type of design pattern, where user choice is removed, has recently been coined “anticipatory design”. Its aim is to leverage data on user behavior to automate the decision-making process in user interfaces. The outcome lowers the excessive number of decisions people currently make, thereby reducing decision fatigue and improving decisions overall.

Despite the good intentions imbued in anticipatory design, though, automating decisions can implicitly raise trust issues — especially at a time when trust has been eroded through the use of dark patterns¹ in user interfaces. Therefore, in contrast to the deceitful dark patterns that are meant to trick users, this article will look at how we can give people confidence in the decisions made for them by using “light patterns,” which ensure that user interfaces are honest and transparent, while even nudging users to make better decisions for themselves.

First, Why Decide For Your User? Link

In today’s online world, consumers face more options than ever before. For example, consider shopping in marketplaces such as Amazon and eBay. Even when we know exactly what we want (replacement Apple headphones, for example), the choice can still be overwhelming:

²

Another example is all-you-can-eat music services, such as Spotify, which put huge amounts of music at our fingertips, with no extra cost to listen to more. The additional choices quickly add up:

While more choice is welcome, too much can create a daunting experience for the user, because then actually making a decision becomes difficult. This problem has been highlighted extensively before, most notably by Barry Shwartz’s paradox of choice and Hick’s Law:

• Barry Shwartz’s paradox of choice⁷
  “Lots of choice makes people less likely to choose anything, and less happy when they do choose.”
• Hick’s law⁸
  “Every additional choice increases the time required to take a decision.”

Both studies suggest that by reducing the amount of choice in a user interface, we can improve a user’s ability to make decisions, thereby reducing frustration and making the user experience better.

Articles about “decision fatigue” back this up, stating that making high numbers of decisions can cause people to be less effective at making the important decisions in life. That’s why Mark Zuckerberg wears the same style of clothes⁹ every day:

I really want to clear my life to make it so that I have to make as few decisions as possible about anything except how to best serve this community.

How To Reduce Choice Link

Reducing the number of choices for a user has, therefore, become the focus for many of today’s apps. This has been done in a number of ways, two of which we’ll discuss now.

Make Options More Relevant Link

Many products are personalized to individual preferences, limiting options only to those deemed relevant to the current user. This has been done famously by Amazon, both on its website and through tailored email recommendations based on data collected on customers:

¹⁰

Anticipate Decisions Link

Recommendations such as those above might not be enough to reduce the difficulty of choice, because users are still faced with the many relevant options that have been filtered through. This is where products can go a step further by making decisions on the user’s behalf, totally removing the burden of choice.

For example, apps such as Google Now¹³ are increasingly carrying out actions for users, without any direct user input:

¹⁴

Google Now makes a lot of decisions in the background, from finding out where you’ve parked your car to searching for football scores — and notifying you at the right time without even having to be asked:

¹⁷

Spotify shows another instance of this type of assumptive approach by creating playlists for users before they even think to. As was stated in the announcement²⁰:

It’s like having your best friend make you a personalised mixtape every single week.

²¹

The task of searching for new music and deciding which tracks to add to a playlist are carried out for you.

This notion of making decisions for users has been called “anticipatory design²⁴” and has become a topic of debate because of the ethics involved in making decisions on behalf of users.

Creating Trust In Anticipatory Design Link

In the process of reducing choices and making decisions for people using the approaches outlined above, one could be accused of being presumptuous about what users want. This can create distrust if the app doesn’t do what the user expects, especially at a time when many apps have been exposed for exhibiting dark patterns²⁵, tricking users into doing things they don’t want to do.

Consequently, the higher the number of decisions an app makes for users, the more transparent it should be in order to maintain trust. This can be done by avoiding certain dark behaviors and instead favoring transparency through “light patterns,” which keep users informed and in control, even when anticipatory design is used. Let’s explore a few light patterns.

Avoid Limiting Information Link

When options are filtered away to show users more of what they might like (through app personalization and recommendation systems), an inherent problem can be created whereby users begin to see more and more of the same type of content:

²⁶

This can making discovery of new things tricky. It is evident not only on e-commerce websites such as Amazon, but also on social media websites such as Facebook. As Time magazine states²⁹:

Facebook hopes to show more links to people who click lots of links, more videos to people who watch lots of videos and so forth.

Many users might not be happy with this because they don’t want brands to determine what they see. For instance, Joel Spolsky, CEO of Stack Overflow, accuses Facebook of hiding information³⁰:

Facebook is not showing all posts. It is choosing what to show you. An interesting question is to what extent does the Facebook algorithm tend to reinforce your preconceptions? Because that’s what it has been trained to do.

Give the User Control Link

One way to avoid limiting information is to make it easier for users to improve the assumptions that are made about them, through feedback mechanisms.

This can be done in different ways, from obvious (and, therefore, easier) mechanisms to less obvious ones:

³¹

• Google Now (top left) prompts users directly underneath its Now cards to check that the information shown is relevant.
• Facebook (top right) is slightly less obvious, employing a dropdown caret in the top right of each news item. Clicking the caret reveals options to hide news you don’t want to see.
• Amazon (bottom) makes it even more difficult to tailor recommendations. You need to navigate to “Your Account” → “Your Recommendations” → “Improve Recommendations” to adjust what it shows you.

Of these three examples, Google offers the most transparent feedback mechanisms, giving multiple obvious interactions for users to provide feedback on cards, ensuring that the user is in control:

³³

As well as swiping cards, you can also access customization settings from the menu icon on each card:

³⁶

In the case of Facebook and Amazon, even though users can provide feedback to tailor what they see, the underlying news feed and recommendation algorithms have greater control, as outlined by Joel Spolsky³⁸.

Avoid Disguising Ads as Content Link

Disguising ads as content is a common dark pattern³⁹, and it can happen when actions are carried out without the user’s explicit consent.

As an example, Google Now recently partnered with brands such as Lyft, Airbnb, Uber and Instacart to prompt users with services available from those apps, at the time it thinks you need them. While cards from third-party services can be useful, when the cards are for paid services, it can almost seem like another form of advertising:

⁴⁰

When similar dark shades of design can be seen in related products, the motivation behind anticipatory decisions becomes more suspect. Google Maps is a good example of this, appearing to disguise ads as pins⁴³ on map search results:

⁴⁴

Make Use of Existing User Input Link

When making assumptions about users, it’s important that they be accurate. A tried and tested way to do this is to make use of previous user input, as seen in web browsers features such as pre-populated forms, or by remembering credit-card details and passwords in anticipation of future use:

⁴⁷

This saves users from having to repeat the same tasks. The same principle can be applied when making more complex assumptions that combine multiple streams of data. Campaign Live⁴⁸ highlights an example of this when it discussed how the taxi service Hailo’s “Now card” combines time, geolocation and previous user input to rebook taxis in Google Now:

Let’s say you come into London and you book a Hailo cab, and you go into a particular area between 7am and 10am. If you’re still there at 5pm, there’s an assumption you may want to leave and that’s when the Google Now card would prompt you to book a cab.

The assumption is likely to be more accurate in this case (and will appear less like a disguised ad) because the offer is based on a previous booking made by the user via the same service, within a reasonable time period:

⁴⁹

Let Users Opt Out Link

Despite being able to customize the recommendations given to them, sometimes people don’t want apps to make decisions for them at all. In this case, opting out must be easy. Even though you can’t delete the Google Now app, you can disable Now cards in the settings:

⁵¹

In contrast, there is no way to turn off Amazon recommendations, unless you log out completely — which makes sense (for Amazon) because 35% of product sales⁵³ are a result of recommendations, according to Venture Beat.

A question remains, therefore, as to whether features that record and make use of user data in these ways should be opt-in by default. There is a big difference between opt-in by choice and presumed consent, as shown in this example of organ donors from Dark Patterns⁵⁶⁵⁴:

⁵⁵

Basically, when opt-in is the default, consent to be an organ donor is nearly 100%, whereas when the decision to opt-in is not presumed, the consent percentage is very low.

Use Dark Patterns To Help People Link

It’s evident that companies use dark patterns to advance their own agendas, and it’s even easier today with the tools that help companies make decisions on behalf of users. However, what if similar methods could be used to help people make better decisions for themselves? Currently, many of us make poor decisions due to human frailties such as lack of self-control or a focus on short-term gains.

Nudge People to the Right Option Link

In their book Nudge: Improving Decisions About Health, Wealth, and Happiness⁵⁷, Richard Thaler and Cass Sunstein suggest creating an ethical “choice architecture⁵⁸” that nudges the user towards choosing the best overall option in the long run.

⁵⁹

In this vein, the techniques we have seen being used to create dark patterns can also be used to form light patterns that nudge users to make better choices.

Auto-Enrolment Link

For example, as life expectancy has increased, it’s become important for people to save for old age through pension plans such as the US’ 401(k)⁶¹. However, as explained by Thaler and Sunstein, even though these plans offer “free money,” many people still don’t choose to enroll. Possibile solutions suggested by Thaler and Sunstein to help people save for old age include:

• automatically enrolling people (similar to the organ donor example),
• forcing people to make a simple yes or no decision on whether to enroll.

These approaches are examples of light patterns because they serve to benefit users, pushing people to take action and to make good long-term decisions. Even though the latter approach forces people to decide, it simplifies the decision to an easy binary choice, which encourages people to participate.

Create Good Behavioral Patterns Link

Alan Shapiro suggests⁶² that anticipatory apps could actually encourage behavioral patterns in users. By being constantly advised where to go and what to buy, people could become conditioned by app notifications and the decisions made on their behalf.

This could make for some scary scenarios, such as when a company is primarily interested in selling you products, because it’s more likely to instill behavior that favors impulse purchases and the use of its services. For instance, Amazon’s new Prime Pantry service is full of shady patterns, starting with its Pantry Boxes, which encourage people to buy more than they intended:

⁶³

As put by Matt Crowley⁶⁶, head of product at Circadia:

Amazon has shifted the conversation away from “do I need this?” to “what else do I need to fill up this box?”

Amazon has even gone as far as filing patents for a system that leverages user data to predict and deliver products before the customer has even placed an order. Amazon calls it anticipatory shipping⁶⁷:

⁶⁸

Putting these motives aside, what if the same tactics could be used to help people form good behaviors and habits? There are plenty of examples of this today, with the emergence of many self-improvement and habit-forming apps.

For example, stickK⁷¹helps you⁷² kick bad habits by using “the psychological power of loss aversion and accountability to drive behavior change.”

⁷³

Duolingo⁷⁶ reminds you to practice your new language every day, helping you to form a beneficial habit.

⁷⁷

From what we see above, the benefits people get from decisions being made on their behalf in anticipatory design are largely determined by the ethics of the company behind the app. How willing is a company to exploit customer data for its own purposes, and how much data are users willing to trade for convenience?

As explained throughout, giving users control and staying transparent are key to maintaining trust. What do you think about dark patterns used in anticipatory design? Do light patterns really exist, and who is in control when design assumptions are made?

(il, yk, al)

Footnotes Link

1. 1 http://www.darkpatterns.org
2. 2 https://www.smashingmagazine.com/wp-content/uploads/2016/09/1-A9vSF2GIo4k005KHHKOOqg-opt.png
3. 3 https://amazon.co.uk
4. 4 https://ebay.co.uk
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/09/1-A9vSF2GIo4k005KHHKOOqg-opt.png
6. 6 https://spotify.com
7. 7 http://www.ft.com/cms/s/9cebd444-cd9c-11de-8162-00144feabdc0,Authorised=false.html?siteedition=uk&_i_location=http%3A%2F%2Fwww.ft.com%2Fcms%2Fs%2F0%2F9cebd444-cd9c-11de-8162-00144feabdc0.html%3Fsiteedition%3Duk&_i_referer=&classification=conditional_standard&iab=barrier-app
8. 8 https://www.smashingmagazine.com/2012/02/redefining-hicks-law/
9. 9 http://www.independent.co.uk/news/people/why-mark-zuckerberg-wears-the-same-clothes-to-work-everyday-a6834161.html
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/09/amazon-choice-opt.png
11. 11 https://amazon.co.uk
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/09/amazon-choice-opt.png
13. 13 https://www.google.co.uk/landing/now/
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-now-opt.png
15. 15 https://google.co.uk
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-now-opt.png
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-now-overview-opt.png
18. 18 https://www.google.co.uk/landing/now/
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-now-overview-opt.png
20. 20 https://press.spotify.com/uk/2015/07/20/introducing-discover-weekly-your-ultimate-personalised-playlist/
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/09/spotify-discover-weekly-opt.png
22. 22 http://spotify.com
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/09/spotify-discover-weekly-opt.png
24. 24 https://www.smashingmagazine.com/2015/09/anticipatory-design/
25. 25 http://alistapart.com/article/dark-patterns-deception-vs.-honesty-in-ui-design
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/09/amazon-lamps-opt.png
27. 27 http://amazon.co.uk
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/09/amazon-lamps-opt.png
29. 29 http://time.com/3950525/facebook-news-feed-algorithm/
30. 30 http://www.techworld.com/social-media/facebook-makes-me-angry-stack-overflows-ceo-joel-spolsky-on-developers-ethical-choices-3644318/
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/09/feedback-mechanisms-opt.png
32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/09/feedback-mechanisms-opt.png
33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-control-opt.png
34. 34 https://www.google.com/search/about/learn-more/now/#cards
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-control-opt.png
36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-control-animated.gif
37. 37 https://www.google.com/search/about/learn-more/now/#cards
38. 38 http://www.techworld.com/social-media/facebook-makes-me-angry-stack-overflows-ceo-joel-spolsky-on-developers-ethical-choices-3644318/
39. 39 http://darkpatterns.org/disguised-ads/
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-now-services-opt.png
41. 41 https://www.google.com/search/about/learn-more/now/#cards
42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-now-services-opt.png
43. 43 http://thenextweb.com/google/2016/05/24/youll-soon-see-promoted-pins-google-maps-searches/#gref
44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-disguised-ads-opt.png
45. 45 http://thenextweb.com/google/2016/05/24/youll-soon-see-promoted-pins-google-maps-searches/#gref
46. 46 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-disguised-ads-opt.png
47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/09/browser-autocomplete-opt.png
48. 48 http://www.campaignlive.com/article/brands-show-cards-google/1332234#wMhCR4FsQU1PWOG7.99
49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/09/hailo-card-opt.png
50. 50 https://www.google.co.uk/landing/now/
51. 51 https://www.smashingmagazine.com/wp-content/uploads/2016/09/google-turn-off-opt.png
52. 52 https://www.google.co.uk/landing/now/
53. 53 http://venturebeat.com/2006/12/10/aggregate-knowledge-raises-5m-from-kleiner-on-a-roll/
54. 54 http://darkpatterns.org/
55. 55 https://www.smashingmagazine.com/wp-content/uploads/2016/09/dark-patterns-opt.jpeg
56. 56 http://darkpatterns.org/
57. 57 https://en.wikipedia.org/wiki/Nudge_(book)
58. 58 https://en.wikipedia.org/wiki/Choice_architecture
59. 59 https://www.smashingmagazine.com/wp-content/uploads/2016/09/nudge-opt.jpg
60. 60 https://en.wikipedia.org/wiki/Nudge_(book)
61. 61 https://en.wikipedia.org/wiki/401(k)
62. 62 http://www.fastcodesign.com/3045039/the-next-big-thing-in-design-fewer-choices
63. 63 https://www.smashingmagazine.com/wp-content/uploads/2016/09/amazon-pantry-opt.png
64. 64 http://redefinedmom.com/how-does-amazon-prime-pantry-work/
65. 65 https://www.smashingmagazine.com/wp-content/uploads/2016/09/amazon-pantry-opt.png
66. 66 https://medium.com/@mwcrowley/the-sketchy-ux-decisions-behind-amazons-prime-pantry-f7cf12878c17#.8lhlf42sv
67. 67 http://www.forbes.com/forbes/welcome/?toURL=http://www.forbes.com/sites/onmarketing/2014/01/28/why-amazons-anticipatory-shipping-is-pure-genius/&refURL=&referrer=#14fea58d2fac
68. 68 https://www.smashingmagazine.com/wp-content/uploads/2016/09/amazon-anticipatory-shipping-opt.png
69. 69 https://techcrunch.com/2014/01/18/amazon-pre-ships/
70. 70 https://www.smashingmagazine.com/wp-content/uploads/2016/09/amazon-anticipatory-shipping-opt.png
71. 71 http://www.stickk.com/
72. 72 http://www.stickk.com/tour
73. 73 https://www.smashingmagazine.com/wp-content/uploads/2016/09/stick-opt.png
74. 74 https://stickk.com/
75. 75 https://www.smashingmagazine.com/wp-content/uploads/2016/09/stick-opt.png
76. 76 https://www.duolingo.com/
77. 77 https://www.smashingmagazine.com/wp-content/uploads/2016/09/duolingo-opt.png
78. 78 http://upquire.com/blog/smart-targeting-dumb/

↑ Back to topTweet itShare on Facebook

Once upon a time, in the not-so-distant past, people considered websites to be a prime indication of how users’ attention was brief and unforgiving. Remember the dreaded bounce rate? Remember the numerous times you worried that your content and graphics might not be 100% clear to users? That was nothing. Compared to mobile, engaging users on the web is a piece of cake.

Researchers claim that we humans can no longer brag about being able to concentrate for a full 12 seconds on a coherent thought, thanks to the digitization of our lives. We now lose concentration after about 8 seconds¹, which, sadly, is 1 second less than the attention span of a goldfish. This is the attention-deficit state of mobile users that you need to overcome in order to successfully engage with them. Mobile users don’t just have brief attention spans — they also expect immediate satisfaction when interacting with your app, otherwise they might be quick to close or even uninstall it.

So, what should you do when tasked with “improving app engagement”? There are several actions you should take, but one of the most crucial is to get up close and personal with users. If you don’t segment and personalize your users’ journeys, then you should expect lower rates of conversion and retention.

Whether your product is a bookstore, baby supplies store or retail app, your users expect you to know who they are, what they want to get from your app and how they prefer to receive it. This means that only using your users’ first names in messages is not enough.

²

Here are the three fundamentals you should follow:

• Show that you understand them.
  
  To become personal with your app’s users, you have to truly know who they are and what they want. Segment your audiences, understand their activity patterns in your app, and respond appropriately to their interests and preferences. Several tools on the market⁴ enable you to analyze your users’ in-app behavior, and you can also connect the app to your CRM for deeper segmentation.
• Communicate with users at the right mobile moment.
  
  Analyzing your users’ general usage and past behavior is just one step. You also have to track their real-time interaction with the app⁵ and act upon it. People open your app to perform a particular action. Make sure to interact with them using mobile-engagement features such as surveys, messages and banners in a way that respects the reason they opened your app in the first place and that adds value to what they were planning to do.
• Provide meaningful content.
  
  Mobile engagement needs to be done in context. You need to know the point a user has reached in their journey, their demographics, their physical location, and information about their overall app usage. All of these should be taken into account for optimal personalization.

To better explain these three points, here are five examples of using personalization to drive mobile engagement.

Gamified In-App Messages Link

The first step towards personalization is to segment your users. Collecting data on users’ past interactions with your app will enable you to segment them by how active they are (visit frequency, time in app, actual usage, etc.).

Each and every app has its power users — the people who are most active and loyal. According to Capgemini Consulting, a customer who is loyal to a brand delivers a 23% premium⁶ in share of wallet, revenue and profitability compared to the average customer. Loyal users should receive a totally different type of in-app message than less active or dormant users, who might feel harassed by gamified messages.

At the right time and in the relevant context, power users should receive in-app messages that are gamified and that drive them to perform a certain action.

In the example below, a frequent user of a bookstore app is asked to recommend a book to a friend to gain 15 points to become a “Super Reader.” This is a great example of how gamified messages give users the feeling that they are an integral part of your app’s community. In addition, they will be thrilled to be recognized for their commitment to your app and to know that you appreciate them.

When users feel this way, they are more likely to rate the app or share it with their friends and connections, helping to create a community of readers who use the app.

⁷

Gamified in-app messages can be as simple as this one or more complex. You might choose to give your power users credits, points, access to special features and offers, and more.

Whatever type of gamified in-app message you choose, make it fun and make it personal.

Video Messages Link

Let’s say you want to drive users to learn more about one of your products and to purchase it. Understanding how the product works and its value is a strong motivator for consumers to purchase it, and even to learn about more products that they might purchase in the future.

If you’ve already used banners or in-app messages (triggered at the right time, of course) to promote this particular product, but your users aren’t converting as much as you’d like, then a video could be a great way to improve your conversion rates. In the example below, an explainer video is triggered when users who have already engaged with items such as baby food and baby clothes in past sessions are now visiting your toys section for the first time. The video drives purchasing intent by explaining how the baby toy would nurture their baby’s development.

⁹

Combining the right video with the right mobile moment could lead to better engagement results.

Don’t forget, too, that video is increasingly popular among mobile users. According to an IAB study¹¹, video is on the rise, with 35% of respondents viewing content on mobile devices (in the US, it’s almost 50%). Using mobile video messages is a great way to communicate with users to convey a message that requires a more detailed explanation, or to deliver an emotional message that connects retail buyers to your brand.

Reminder Push Notifications Link

It is not uncommon for a user to add items to their shopping cart but then suddenly not continue with the purchasing process. You want the user to complete the action as soon as possible, though. Push notifications are the ideal solution in this type of scenario, because they can be highly personalized and can contain a deep link that takes the user to exactly where they left off. Push notifications without personalization can drive users insane, whereas one small personalized message — triggered at the right mobile moment — can push (pun intended) users in the right direction.

When possible, add new information to push notifications that can help drive conversion decisions. For example, receiving an offer for free shipping after having added products to their shopping cart could persuade a user to take the next step and finalize the order. Just like the gamification example in our first point, push notifications serve to recognize and reward past activity in the app.

¹²

Use Surveys To Ask And Respond To User Feedback Link

You can’t only talk to your users; you need to listen, too. Whereas tracking their “digital body language” can help you understand what users feel about your app, surveys are more about listening to them and taking the conversation to the next level.

An important step when using surveys is to provide each user with different feedback (such as messages, a secondary survey screen, a video, etc.) and not to use identical “thank you” messages, which are sometimes a turn-off.

In the example below, a user who says that they wouldn’t likely return to a hotel is shown another screen that asks them their main reason for not returning. Meanwhile, those who respond very positively are asked whether they would like to write a short review.

¹³

A combo survey personalizes the responses of users and drives them to complete the proper action in the right mobile moment.

Offer Coupons Based On The User’s Journey And Purchasing History Link

Coupons have a better chance of being redeemed if they are relevant to the customer’s purchasing history. But you also need to consider the right moment to present a coupon. Choose a time when the user is most likely to be interested in what the coupon offers.

Let’s say you have a customer who has looked at a particular pair of shoes several times throughout the day but has yet to purchase them. To drive the user to purchase, you could offer a time-limited coupon of 20% off the item the next time they visit the screen.

Targeting the right users at the right moment is key to increasing your conversion rate.

¹⁵

Understanding the individual user’s journey and how they are using the app overall is key to personalizing your mobile app experience. Mobile users have high expectations¹⁶ of the mobile experience and brief attention spans, so careful personalization and in-context awareness are crucial for effective communication and engagement with them.

(yk, il, al)

Footnotes Link

1. 1 http://time.com/3858309/attention-spans-goldfish/
2. 2 https://www.smashingmagazine.com/wp-content/uploads/2016/08/personalization-large-preview-opt.png
3. 3 https://www.smashingmagazine.com/wp-content/uploads/2016/08/personalization-large-preview-opt.png
4. 4 http://www.apptamin.com/blog/app-analytics-tools/
5. 5 http://www.insert.io/real-time-personalization-2/
6. 6 https://www.capgemini-consulting.com/reinventing-loyalty-programs
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/08/books_sm-opt.png
8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/08/books_sm-opt.png
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/08/video_baby_sm-opt.png
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/08/video_baby_sm-opt.png
11. 11 http://www.businessofapps.com/video-gone-mobile-consumption-and-marketing-statistics/
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/08/cart-reminder-push-opt.png
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/08/travel_combo_survey-opt.png
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/08/travel_combo_survey-opt.png
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/08/Retail_banner2_coupon-opt.png
16. 16 http://www.cioinsight.com/it-strategy/mobile-wireless/slideshows/why-mobile-users-expect-a-better-experience.html

↑ Back to topTweet itShare on Facebook

Let’s say you want to quickly sketch out your idea of a website, or just quickly whip up a small site for testing purposes. Also, neither should take a lot of time to build nor should they need a full-stack toolkit. So, where and how do you start? Have you tried creating a website with some Dropbox-powered hosting tools? Well, they certainly can provide a fast and easy solution for these occasions. You don’t have to fiddle with servers or bother about deployment, some of them even come with pre-configured templates that you can use or customize to spare you coding time.

In today’s article, we’ve collected nine tools for you that hook up to your Dropbox to streamline the process of creating and hosting static websites. However, before you settle on a Dropbox-powered platform, always balance the pros and cons to make sure it is the right choice for your project — including performance-wise. As for prototyping, the following tools are a great way to make your workflow more efficient so you can spend more time on the details that really matter.

Small Victories Link

One creation tool that is based on Dropbox is Small Victories³¹. The idea behind it is simple: The tool connects to your Dropbox, creates a special folder there, and whatever you drop into the folder (be it HTML, Markdown or TXT files, images or videos) will automatically be turned into a website. No installation, server, CMS or uploading necessary; every change you make in the Dropbox folder will be pushed to your site instantly. To ease the job, you can draw on nine ready-made themes (among them a homepage, an e-commerce product page and a feed stream) or if you want more control, you can code your own static HTML files instead and use Dropbox essentially as a hosting service.

²

To keep everything as simple as possible, the content will be displayed on your site in the order as it appears in your Dropbox folder. This requires a bit of planning ahead when it comes to choosing file names, and, as it turns out, numbering them is the easiest way to maintain a structure. Alternatively, you can set the order to sort by date or by manually comma-delimiting the file names in the order you want them to appear in the settings.txt file. Despite its simplicity, the tool isn’t inflexible at all, but surprises with quite some customization features. Adding your own styles and scripts to the default CSS and JS files goes without saying, while Google Fonts and Typekit support give you even more freedom.

By default, every site created with Small Victories will be hosted as a subdomain of .smvi.co, but you can also use a custom domain if you prefer. Just enter the domain in the settings.txt file and make sure to register it in your domain’s DNS settings, too. If you want to make your content available only to a selected group of users, to show an idea to a client, for example, or to share slides, you can also set a password protection. Especially when you’re looking for fast results or want to collaborate with your team members, the tool is convenient to work with. A shared Dropbox folder is all it takes.

Here some examples of sites that were built using Small Victories:

⁴

⁶

⁸

¹⁰

Pancake Link

Also based on the “drop your files into a Dropbox folder” idea, is Pancake¹⁴¹². Apart from HTML, it supports .md and .txt and creates a page for every text file you save to the respective Dropbox folder. By default, your project will be hosted as a subdomain of .pancakeapps.com (which is SSL-secured, by the way), but you can also use your own domain with a Pancake site. Apart from Dropbox sync, the platform offers a beta version with git push that comes with version control and supports popular generators such as Jekyll, Sphinx, and Wintersmith.

¹³

DropPages Link

DropPages¹⁷¹⁵ already launched back in 2011 and offers the same approach as the tools above. Three sub-folders in your Dropbox’s project folder house text (which can also be written in Markdown), images and CSS, and, finally, HTML files to render the text. You simply edit the files on your computer, save, and they’ll automatically sync with your live site. If you don’t want to edit live content, create a folder called _drafts and get started with your new content in there. When you’re done, overwrite the live version with it. Content is minified, gzipped and cached. DropPages is free to use.

¹⁶

Site44 Link

Site44²⁰¹⁸ updates your website as soon as you’ve saved any changes within the folder you’ve created in Dropbox (it constantly monitors it specially for this purpose, too). Sites created with the tool usually live on a .site44.com sub-domain, but using custom domains is possible as well. For fast response times, your content will be cached on Site44’s servers. Advanced features include password protection, custom 404 pages, and support for redirects. A 30-day trial is free, personal plans start at $4.95 per month.

¹⁹

Sitebox.io Link

Another static site generator living in a symbiosis with Dropbox is Sitebox.io²¹. You can code your own layout (Markdown is supported) or use one of three ready-made, responsive themes. The possibility to set a meta description for every page helps make your website search-engine friendly. A nice bonus: The tool won’t push all changes you make to the folder live instantly. Instead, you can preview your changes first, and when everything is as you want it to be, you can publish in one click. Sitebox is free to use with up to five pages with a subdomain at .sitebox.io, a professional license with an unlimited amount of websites and the option to connect your own domain is available for $10 a month.

²²

Cloud Cannon Link

Cloud Cannon²⁶²⁴ is a simple CMS that syncs back and forth with Dropbox or, alternatively, GitHub and Bitbucket, to build and deploy your website to a test or custom domain. Focus lies on collaboration between developers and non-developers. While developers have full control over the source code and can use their favorite tools to build static or Jekyll sites, non-developers can update content visually in the inline editor. For improved performance, websites built with Cloud Cannon are optimized and assets served from a CDN.

Here’s a handy feature: You can set up a staging site for testing purposes and easily push to the live site when you’re ready. Restricting public access to your site or to parts of it is also possible. Plans for Cloud Cannon start at $25 for one user and unlimited websites, more expensive agency and enterprise plans are also available. If you just want to give it a try, there’s a 30-day free trial, too.

²⁵

KISSr Link

No frills, just a Dropbox-powered hosting service — that’s KISSr²⁹²⁷. You save your website to Dropbox, and when you update files, the changes will be copied to KISSr’s servers. One prototype site is free, for $5 per month you get unlimited sites, storage, and bandwidth.

²⁸

Paperplane Link

Paperplane³²³⁰ spares you fiddling around with FTP by connecting to your Dropbox (or GitHub if you prefer). To use it, pick a name, point Paperplane to your files, and that’s it — the service will transform your assets into a website. Custom domains can be used, too. Paperplane weighs in with $9 per month, but you can also test it out for free with three sites max and no custom domains.

³¹

Synkee Link

Synkee³⁵³³ works differently than the other tools on our list. It connects to your Dropbox but doesn’t replace an FTP server — simple deployment and version control are the magic words here. A typical workflow with Synkee is as follows: You save your website assets to Dropbox, edit them with your favorite text editor, and the changes get synced to your website’s server as your Dropbox syncs. Deployments can be handled via a dashboard either manually, or you set them to apply automatically when you save a file. Built-in version control and the possibility to revert changes on the FTP server also add to a more efficient workflow. Synkee also works with GitHub and Bitbucket and offers a two-week free trial. After the trial has ended, plans start at $5 per month for one user and ten projects, team plans are also available.

³⁴

What are your experiences? Have you used one of these tools before? Or do you know of one we haven’t listed? Let us know in the comment section below.

(il)

Footnotes Link

1. 1 http://www.smallvictori.es/
2. 2 http://www.smallvictori.es/
3. 3 http://www.smallvictori.es/
4. 4 http://vis.dmcg.co/
5. 5 http://vis.dmcg.co/
6. 6 http://www.salondesrefus.es/
7. 7 http://www.salondesrefus.es/
8. 8 http://xxix-store.smvi.co/
9. 9 http://xxix-store.smvi.co/
10. 10 http://www.wiseapp.com/
11. 11 http://www.wiseapp.com/
12. 12 https://www.pancake.io/
13. 13 https://www.pancake.io/
14. 14 https://www.pancake.io/
15. 15 http://droppages.com/
16. 16 http://droppages.com/
17. 17 http://droppages.com/
18. 18 http://www.site44.com/
19. 19 http://www.site44.com/
20. 20 http://www.site44.com/
21. 21 https://www.sitebox.io/
22. 22 https://www.sitebox.io/
23. 23 https://www.sitebox.io/
24. 24 http://cloudcannon.com/
25. 25 http://cloudcannon.com/
26. 26 http://cloudcannon.com/
27. 27 https://www.kissr.com/
28. 28 https://www.kissr.com/
29. 29 https://www.kissr.com/
30. 30 https://www.paperplane.io/
31. 31 https://www.paperplane.io/
32. 32 https://www.paperplane.io/
33. 33 https://www.synkee.com/
34. 34 https://www.synkee.com/
35. 35 https://www.synkee.com/

↑ Back to topTweet itShare on Facebook

It is often easy to overlook the underlying principles that compel people to take action. Instead, we tend to obsess over minute details — things like button color¹, pricing² and headlines. While these things can compel users to take action, it is worth considering the psychological principles that influence users’ behavior.

Unfortunately, few organizations try to understand what influences user action. Research by Eisenberg Holdings³ shows that for every $92 the average company spends attracting customers, a meager $1 is spent converting them. Real conversion optimization is rooted deeply in psychology.

In this article, we will analyze seven psychology studies that date as far back as 1961. Each experiment raises principles that will help you boost conversions on your website. Some of the experiments are so controversial that they will make you cringe, but the lessons are fundamental.

The Authority Principle: Leverage The Influence Of Authority Figures To Get People To Act Link

In perhaps the most famous study about obedience in psychology, Yale University psychologist Stanley Milgram conducted a series of experiments⁴ to observe how people react when instructed by an authority figure to do something that conflicts with their conscience. The aim of the experiment was to see how far people would go to obey authority, even if the act of obedience involved harming someone else and acting against their conscience.

For the studies, which began in 1961, Milgram selected participants for his experiment by placing an advert in a newspaper. Once people responded to the advert, Milgram paired the participants and cast lots to determine which of each pair would be the learner and which the teacher. Unbeknownst to the participants, the experiment was rigged — all of them would be teachers, while all of Milgram’s associates would be chosen as learners.

The learner (Milgram’s associate) was taken into a room and connected to an electric chair; the teacher (one of the participants) was then taken to a room next door that contained a row of switches, marked with a scale of 15 to 450 volts — with 15 volts being a “slight shock” and 450 volts producing a “fatal shock.” The teacher was able to see the reactions of the learner through a screen.

⁵

Once in the other room, the researcher told the teacher (i.e. the participant) to administer an electric shock every time the learner answered a question incorrectly. The learner was then asked a series of questions and mainly gave wrong answers (on purpose). In return, the authority figure — dressed in a gray lab coat — asked the teacher to administer an electric shock for each wrong answer. The result was stunning: 65% of participants administered the electric shock to the maximum 450 volts, even when the learner long stopped showing signs of breathing. In a variation of the experiment, the authority figure was replaced with an ordinary person, and compliance dropped to a stunning 20%.

Milgram’s experiment⁷ shows that we will go to great lengths to obey orders, especially from those seen to be as legitimate authorities (whether legal or moral).

How to Use The Authority Principle to Boost Conversions Link

The authority principle can be used to boost conversions in your business. For instance, getting authority endorsements will always go a long way to boosting your conversions and profits. You are far better off, of course, avoiding trying to sell products to people who don’t want them, but even scrupulous websites can boost conversions by tapping into the power of authority. Here are some tips:

• Get an authority figure or respected celebrity in your industry to endorse you.
  
  A great example⁸ of the effectiveness of endorsements from authority figures is Dr. Oz. Dr. Oz is renowned in the health field, and products will sell out at stores as soon as he recommends them. The phrase “Dr. Oz Approved” currently has 1.6 million results in Google (shown below), showing how seriously people take his recommendations.

  ⁹
  

  On a smaller scale, Plum District noticed that customers who were referred¹⁰ to its products by influential online mothers¹¹boosted the company’s sales by double¹² that of customers from other channels. Authority endorsement can come in many forms — a post on social media, a testimonial or active involvement with your brand.

• Get an authoritative publication to endorse you.
  
  Mainstream publications are also regarded as authorities. In the absence of an endorsement from a person, an endorsement from a reputable publication would go a long way to boosting your credibility. Rent the Runway reported a 200% increase in conversions¹³ from visitors referred by fashion magazines and blogs compared to visitors from paid search ads.
• Become an authority yourself.
  
  Why get Oprah to endorse you when you can be Oprah yourself? Establish yourself as an authority figure and an industry leader by writing for relevant publications, speaking at relevant events and conferences and establishing relationships with other authority figures. Think of the difference between receiving an email from a stranger and receiving an email from a known thought leader. Making a name for yourself is a great way to warm up your sales leads before you even reach out to them. Seven-figure blogger Neil Patel¹⁴ (pictured below) established himself as an authority by highlighting major brands he has worked with, his recognition from the United Nations and the President of the United States, and major publications that have featured him.

  ¹⁵
  

The Amos Tversky And Daniel Kahneman Experiment: Use Anchoring To Make People Feel They Are Getting A Bargain Link

Whether you are working for a company or selling your own products, you have probably seen prospective customers bounce from your website because they feel that your products are too expensive. Well, an experiment¹⁶ (PDF) conducted by psychologists Amos Tversky and Daniel Kahneman in 1974 holds a solution to boost conversions with these customers, too.

During the experiment, the researchers observed how an initial perception influenced the subjects’ behavior. They surveyed people and asked them to estimate the percentage of African nations that are a part of the United Nations. Before people were allowed to answer, though, the researchers had them spin a wheel painted with numbers from 0 to 100. Unbeknownst to the participants, the wheel had been rigged to stop at either 10 or 65. The experimenters found that the people who landed on the higher number on the wheel were more likely to choose a higher percentage than people who had landed on the lower number. Those who were shown 10 on the wheel estimated, on average, that 25% of African nations were a part of the UN, while those who were shown 65 estimated that the percentage was 45%.

The study reveals the effect of anchoring on our actions. If you want to buy a bomber jacket, and all of the jackets you find are around $200, and you later see a similar jacket that costs $150, you would think it’s a bargain, even if the jacket actually costs $50.

Amazon does this effectively, and automatically, for most of its products:

¹⁷

How to Use the Anchoring Principle to Boost Conversions Link

You can use this psychological effect to boost your sales. First, put your product in high esteem — if possible, make people feel that your product is so amazing that they would never be able to afford it. When they later find out the price you are asking, even if it is expensive, they will see it as a bargain. It is no longer a matter of “$500 is too much,” but rather, “Wow, this could easily sell for $2,500, and I’m getting it for $500!”

Many major brands leverage the anchoring effect by offering deals that appear to be such a great bargain that users might feel that they’re crazy to offer them. Below is shown AT&T deliberately offering both a 32 GB and a 64 GB iPad at the discount price of $529.

¹⁸

The original prices of the 32 GB and 64 GB iPads were $729 and $829, respectively. The latter would be regarded as expensive. At the discounted price of $529, however, it’s a bargain. The user feels, “Wow! I’m getting double the storage for the same price!” They no longer focus on the high cost of the 64 GB model, but rather on the fact that it costs the same as the model with half the storage.

The Little Albert Experiment: Use The Conditioning Principle To Turbocharge Your Conversions Link

The “Little Albert” experiment is pretty extreme compared to the other experiments discussed here, and it probably wouldn’t be allowed today, not only because of the nature of the experiment itself, but also because the subject was just a child at the time. (It was widely reported that the child, known as Little Albert, never recovered from the effects of the experiment.) The experiment, however, does teach some fundamental lessons about how the human brain is wired.

Psychologist John B. Watson conducted the experiment to observe the phenomenon of classical conditioning²⁰. In simple terms²¹, classical conditioning is “a learning process by which a subject comes to respond in a specific way to a previously neutral stimulus after the subject repeatedly encounters the neutral stimulus together with another stimulus that already elicits the response.”

The study observed a child who Watson referred to as Albert B. and who is popularly known today as “Little Albert.” Little Albert was nine months old at the time, and he loved animals prior to the experiment — particularly, a white rat. However, Watson began to pair the presence of the rat as well as other animals with the loud bang of a hammer hitting metal. Eventually, Little Albert developed a fear of animals, including the white rat he initially loved, due to the associated discomfort that came with the loud bang. Although the two stimuli were completely unrelated, their association was strong enough to elicit a response in Little Albert.

How to Use the Little Albert Principle to Boost Your Conversions Link

• Associate a positive emotion with your brand and products.
  
  In Little Albert’s case, the emotion associated with the presence of animals was fear and anxiety. As a result, he came to dislike animals. For Nike, this emotion is a feeling of being able to achieve your goals by using its products. Nike has carefully positioned itself as the brand to help you achieve your goals. From its trademarked “Just do it” slogan to its strategic use of the underdog character who becomes a hero in some of its ads, Nike has associated the positive emotion of achievement with its brand.
• Make this positive association obvious.
  
  Constantly repeat the association until an image is created in the mind of your users, and you’ll notice a significant increase in responses to your messages.

In Nike’s “Find Your Greatness²²” ad, we see an overweight boy running desperately and not giving up. The implied message is that anyone can do it, which is in line with Nike’s advertising over the decades.

²³

The Jam Study: Giving People Too Many Choices Can Cripple Sales Link

In his book The Paradox of Choice, psychologist Barry Schwartz famously argues that having too many choices isn’t necessarily good for people and might have unintended effects. This holds true for conversion optimization. The effect was well demonstrated through the famous “jam study.”

Psychologists Sheena Iyengar and Mark Lepper published the jam study in 2000. The study observed the behavior of 754 shoppers²⁵ in an upscale grocery store and how they responded to the choices they were presented with. The shoppers were observed on two consecutive Saturdays. A tasting booth was set up in the grocery store with jam selections on display. The first group of people were exposed to a table displaying 24 varieties of gourmet jam, while the second group were exposed to a table displaying 6 varieties of jam.

The study found that, while the table with more varieties of jam attracted more consumer attention (60% of shoppers stopped at the booth) than the table with fewer varieties of jam (40% of shoppers stopped at the booth), the latter outperformed the former in sales by a factor of 10 to 1.

That’s basically a 900% increase in conversion rate. How would you like the same?

²⁶

This has a fairly logical explanation. Research shows²⁸ that human attention span is rapidly declining, shrinking from 12 seconds back in 2000 to 8 seconds now. Rather than increasing your conversions, giving people more options will actually harm it by crippling their decision-making ability.

How to Use the Choice Principle to Boost Your Conversions Link

Offering more options sounds like a good thing, until it isn’t. Giving people more options will draw their attention; if you ask them, they will tell you that’s what they want. However, research shows that most people actually respond better to fewer options. Limit the choices you present to users, and you will more likely get them to take the action you desire right away.

Dropbox’s minimalist home page²⁹ is a great example of this. It’s plainly obvious that Dropbox simply wants you to sign up, and its home page focuses on helping you do just that.

³⁰

In “The Minimal Homepage³¹,” Mattan Griffel observes that the fastest-growing companies in the world — especially in their early days, when they needed fast adoption — all had something in common: a minimalist home page. Dropbox, Quora, LinkedIn, Twitter and Pinterest are some notable examples.

The Decoy Principle: Drive Users Toward One Option Link

Another famous conversion optimization experiment is known as the economist pricing experiment. Psychologist Dan Ariely popularized this experiment³² in his book Predictably Irrational. Ariely surveyed 100 of his students at the Massachusetts Institute of Technology and asked them to choose between the following three options:

• web-only subscription ($59),
• print-only subscription ($125),
• print and web subscription ($125).

The results of the experiment were amazing³³: 16 of the 100 people surveyed chose the web-only subscription, while 84 people chose the print and web subscription. Nobody chose the print-only subscription.

³⁴

Ariely then removed the print-only subscription, which nobody chose, and gave another group of 100 students the following options:

• web-only subscription ($59),
• print and web subscription ($125).

The findings were surprising: 68% chose the web-only option, while 32% chose the print and web option.

³⁵

Why is the contrast so sharp? This is the decoy effect in action; the print-only option was introduced to make the print and web option more attractive and to make the web-only option less attractive. Seeing that the print and web option cost the same amount as the print-only option, people felt that there must have been an error and that they were getting a bargain. But this was psychology in action.

The AT&T offer referred to earlier in the section on anchoring is also a form of decoy pricing. The fact that both the 32 and 64 GB iPads were sold at the same price made the 64 GB model an instant bargain. The 32 GB model could be said to be a decoy to boost sales of the 64 GB.

How to Use the Decoy Principle to Boost Your Conversions Link

You can use the decoy principle to boost sales by introducing an appealing offer that costs less and has more features. This way, people will feel that they are getting a bargain and will be compelled to act immediately. When people see that package A has twice the features of package B, yet both cost the same, they will instantly develop a preference for package A.

Here is another example of decoy pricing used by Apple to sell the iPod Touch:

³⁷

By putting the 8 and 32 GB iPod Touch models side by side and pricing them so closely, some users will feel compelled to select the 32 GB model without considering that competing products might be superior and cost less. Instead, they will focus on the fact that they are getting the 32 GB at a much better price. With those three models marked at those price points, and all with apparently similar features, the 32 GB model looks like the bargain!

As you can see, adding one or more purchasing options can boost conversions. However, something more fundamental is going on here. Why will many people easily hand over their money for a product from one brand, yet be reluctant to pay a fraction of that amount for a similar competing product? Let’s find out.

The Richard Thaler Experiment: Use Context To Boost The Perceived Value Of Your Product Link

Context influences value, which explains why people are more likely to bargain in a flea market than in a boutique. Richard Thaler conducted an experiment³⁹ to demonstrate this principle. Subjects were asked how much they were willing to pay for beer. The first group was told that the beer would be purchased from a local grocery store, while the second group was told that the beer would be purchased from a fancy hotel. The study revealed that people offered to pay more for the very same beer when it came from the fancy hotel.

To boost conversions, master the art of conveying exclusivity through context. The grander people consider your brand to be, the more likely they will pay for your product, even if it is worth much less.

For example, you are more likely to pay a premium for a baseball glove like the ones shown below if you see it on a curated e-commerce website than in an online superstore. Canopy’s home page lists one glove for $250, whereas Amazon’s search results display infielder baseball gloves ranging from $9 to $45.

⁴⁰

⁴²

How to Use the Principle of Context to Boost Your Conversions Link

Create a premium feel to attract premium customers. Some believe that offering discounts or competing on price is not a smart long-term approach to business. Instead, create a premium impression and you will command premium rates.

That being said, it’s not always about what you’re offering. Simple brand positioning and marketing can go a long way to improving your conversions. This brings us to our next point.

The Familiarity Principle: Use Repetition To Get People To Notice Your Offer Link

The power of repetition in boosting conversions is deeply rooted in psychology, and it is one of the principles advocated by Robert Cialdini in his book Influence: The Psychology of Persuasion.

A 2013 study by Jaroslaw Jankowski⁴⁴ found that content repetition can boost conversions on websites. The more exposed people are to your offer, the more familiar they become with it, and the higher the probability that they will act on it. This is known in marketing as the rule of seven⁴⁵; that is, prospective customers need to come across your offer at least seven times before they take action.

How to Use the Familiarity Principle to Boost Your Conversions Link

Don’t limit yourself to one marketing channel. Spread your message across multiple channels, maximizing touch points, and you will likely notice a boost in conversions. Jay Baer offers a great case study⁴⁶. He says that his Jay Today show, a daily three-minute video, is one of his strongest content-marketing performers. After each video is published, he repurposes it into eight different pieces of useful content, which he then distributes on eight different platforms, including YouTube, LinkedIn and Medium. This helps grow his business by attracting more attention and increasing his likability, using the power of repetition.

Below is the YouTube version of one of his recent shows promoted as a linked post on Facebook, followed by the same content in iTunes podcast form.

⁴⁷

⁴⁹

His effective distribution of content based on the familiarity principle has been a key driver of growth for Baer’s company.

The familiarity principle also works well in advertising. Research shows that companies will consistently repeat ads⁵¹ to the same people because it creates in them a subconscious desire for the products.

Conclusion Link

Effective conversion optimization goes beyond simply changing a button’s color or making a few tweaks here and there. The trick is knowing the fundamental principles that make people act the way they do. Hopefully, the psychology studies reviewed in this article have provided you with some practical insight to boost your conversion rates.

Whether by leveraging the power of classical conditioning (the Little Albert experiment), keying into the effectiveness of decoy pricing (the economist pricing experiment) or using plain-old social proof (Milgram’s experiments), you can do much to boost your website’s conversion rates. The key is in the implementation. Take lessons from the studies referred to above, implement them on your website, and watch your conversions increase.

Further Reading Link

• Influence: The Psychology of Persuasion, Robert Cialdini
• Predictably Irrational, Dan Ariely
• “More Isn’t Always Better⁵²,” Barry Schwartz, Harvard Business Review

(ah, yk, al, il)

Footnotes Link

1. 1 https://www.smashingmagazine.com/2009/10/call-to-action-buttons-examples-and-best-practices/
2. 2 https://www.smashingmagazine.com/2009/10/call-to-action-buttons-examples-and-best-practices/
3. 3 https://econsultancy.com/blog/7657-92-1-marketings-dirty-little-statistic-5/
4. 4 http://www.simplypsychology.org/milgram.html
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/08/milgram-scale-opt.jpg
6. 6 http://www.gina-perry.com/behind-the-shock/milgrams-obedience-experiments/
7. 7 https://www.mtholyoke.edu/~apkokot/results.htm
8. 8 https://blog.kissmetrics.com/being-an-authority/
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Dr-Oz-approved-opt.png
10. 10 https://techcrunch.com/2011/11/27/social-proof-why-people-like-to-follow-the-crowd/
11. 11 https://techcrunch.com/2011/11/27/social-proof-why-people-like-to-follow-the-crowd/
12. 12 https://techcrunch.com/2011/11/27/social-proof-why-people-like-to-follow-the-crowd/
13. 13 https://techcrunch.com/2011/11/27/social-proof-why-people-like-to-follow-the-crowd/
14. 14 https://www.quicksprout.com/blog/
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Neil-Patel-opt.png
16. 16 http://people.hss.caltech.edu/~camerer/Ec101/JudgementUncertainty.pdf
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Amazon-anchoring-opt.png
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/09/iPadSale-opt.png
19. 19 http://www.geek.com/apple/att-slashes-300-off-ipad-3g-64gb-1330393/
20. 20 http://www.simplypsychology.org/classical-conditioning.html
21. 21 http://www.thefreedictionary.com/classical+conditioning
22. 22 https://www.youtube.com/watch?v=2JnYcuRW_qo
23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/09/find-your-greatness.jpg
24. 24 http://www.dailymail.co.uk/news/article-2185150/Find-Your-Greatness-advert-Story-200lb-jogging-boy-Nathan-Sorrell-new-Nike-ad-charmed-America.html
25. 25 https://hbr.org/2006/06/more-isnt-always-better
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/09/jam-study-results-opt.jpg
27. 27 http://noahrickun.com/lets-jam-make-more-sales-by-using-the-paradox-of-choice/
28. 28 https://hostingfacts.com/internet-facts-stats-2016/
29. 29 https://www.dropbox.com/
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Dropbox-opt.png
31. 31 http://www.growhack.com/2013/04/the-minimal-homepage/#.V40u3esrLnA
32. 32 http://conversionxl.com/pricing-experiments-you-might-not-know-but-can-learn-from/
33. 33 http://www.digitalcurrent.com/digital-marketing/boost-conversion-optimization/
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/09/decoy-pricing-the-economist-pricing-opt.png
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/09/decoy-pricing-the-economist-pricing2-opt-.jpg
36. 36 http://conversionxl.com/pricing-experiments-you-might-not-know-but-can-learn-from/
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/09/The-Decoy-Effect-opt.jpg
38. 38 http://www.advancedwebranking.com/blog/eight-proven-pricing-strategies-guarantee-conversions/
39. 39 https://econsultancy.com/blog/62591-why-pricing-experiments-prove-our-assumptions-are-wrong/
40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Canopy-opt.png
41. 41 https://canopy.co/
42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Amazon-listings-opt.png
43. 43 http://www.amazon.com/
44. 44 http://link.springer.com/chapter/10.1007%2F978-3-642-36543-0_45
45. 45 http://www.effectivebusinessideas.com/the-rule-of-7/
46. 46 http://contentmarketinginstitute.com/content-inc/blog/repurpose-one-video/
47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Convince-and-Convert-opt.png
48. 48 https://www.facebook.com/ConvinceConvert
49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/09/Jay-Baer-opt.png
50. 50 https://itunes.apple.com/us/podcast/jay-today-podcast/id915527026?mt=2
51. 51 https://www.sciencedaily.com/releases/2008/12/081209125828.htm
52. 52 https://hbr.org/2006/06/more-isnt-always-better

↑ Back to topTweet itShare on Facebook

A long time ago, my personal website was attacked. I do not know how it happened, but it happened. Fortunately, the damage from the attack was quite minor: A piece of JavaScript was inserted at the bottom of some pages. I updated the FTP and other credentials, cleaned up some files, and that was that.

One point made me mad: At the time, there was no simple solution that could have informed me there was a problem and — more importantly — that could have protected the website’s visitors from this annoying piece of code.

A solution exists now, and it is a technology that succeeds in both roles. Its name is content security policy (CSP).

What Is A CSP? Link

The idea is quite simple: By sending a CSP header from a website, you are telling the browser what it is authorized to execute and what it is authorized to block.

Here is an example with PHP:

<?php header("Content-Security-Policy: <your directives>"); ?>

Some Directives Link

You may define global rules or define rules related to a type of asset:

default-src 'self' ; # self = same port, same domain name, same protocol => OK 

The base argument is default-src: If no directive is defined for a type of asset, then the browser will use this value.

script-src 'self' www.google-analytics.com ; # JS files on these domains => OK 

In this example, we’ve authorized the domain name www.google-analytics.com as a source of JavaScript files to use on our website. We’ve added the keyword 'self'; if we redefined the directive script-src with another rule, it would override default-src rules.

If no scheme or port is specified, then it enforces the same scheme or port from the current page. This prevents mixed content. If the page is https://example.com, then you wouldn’t be able to load http://www.google-analytics.com/file.js because it would be blocked (the scheme wouldn’t match). However, there is an exception to allow a scheme upgrade. If http://example.com tries to load https://www.google-analytics.com/file.js, then the scheme or port would be allowed to change to facilitate the scheme upgrade.

style-src 'self' data: ; # Data-Uri in a CSS => OK 

In this example, the keyword data: authorizes embedded content in CSS files.

Under the CSP level 1 specification, you may also define rules for the following:

• img-src
  
  valid sources of images
• connect-src
  
  applies to XMLHttpRequest (AJAX), WebSocket or EventSource
• font-src
  
  valid sources of fonts
• object-src
  
  valid sources of plugins (for example, <object>, <embed>, <applet>)
• media-src
  
  valid sources of <audio> and <video>

CSP level 2 rules include the following:

• child-src
  
  valid sources of web workers and elements such as <frame> and <iframe> (this replaces the deprecated frame-src from CSP level 1)
• form-action
  
  valid sources that can be used as an HTML <form> action
• frame-ancestors
  
  valid sources for embedding the resource using <frame>, <iframe>, <object>, <embed> or <applet>.
• upgrade-insecure-requests
  
  instructs user agents to rewrite URL schemes, changing HTTP to HTTPS (for websites with a lot of old URLs that need to be rewritten).

For better backwards-compatibility with deprecated properties, you may simply copy the contents of the actual directive and duplicate them in the deprecated one. For example, you may copy the contents of child-src and duplicate them in frame-src.

CSP 2 allows you to whitelist paths (CSP 1 allows only domains to be whitelisted). So, rather than whitelisting all of www.foo.com, you could whitelist www.foo.com/some/folder to restrict it further. This does require CSP 2 support in the browser, but it is obviously more secure.

An Example Link

I made a simple example for the Paris Web 2015 conference, where I presented a talk entitled “CSP in Action¹.”

Without CSP, the page would look like this:

²

Not very nice. What if we enabled the following CSP directives?

<?php header("Content-Security-Policy: default-src 'self' ; script-src 'self' www.google-analytics.com stats.g.doubleclick.net ; style-src 'self' data: ; img-src 'self' www.google-analytics.com stats.g.doubleclick.net data: ; frame-src 'self' ;"); ?>

What would the browser do? It would (very strictly) apply these directives under the primary rule of CSP, which is that anything not authorized in a CSP directive will be blocked (“blocked” meaning not executed, not displayed and not used by the website).

By default in CSP, inline scripts and styles are not authorized, which means that every <script>, onclick or style attribute will be blocked. You could authorize inline CSS with style-src 'unsafe-inline' ;.

In a modern browser with CSP support, the example would look like this:

⁴

What happened? The browser applied the directives and rejected anything that was not authorized. It sent these notifications to the console:

⁶

If you’re still not convinced of the value of CSP, have a look at Aaron Gustafson’s article “More Proof We Don’t Control Our Web Pages⁸.”

Of course, you may use stricter directives than the ones in the example provided above:

• set default-src to 'none',
• specify what you need for each rule,
• specify the exact paths of required files,
• etc.

More Information On CSP Link

Support Link

CSP is not a nightly feature requiring three flags to be activated in order for it to work. CSP levels 1 and 2 are candidate recommendations! Browser support for CSP level 1⁹ is excellent.

¹⁰

The level 2 specification is more recent¹², so it is a bit less supported.

¹³

CSP level 3 is an early draft now, so it is not yet supported, but you can already do great things with levels 1 and 2.

Other Considerations Link

CSP has been designed to reduce cross-site scripting (XSS) risks, which is why enabling inline scripts in script-src directives is not recommended. Firefox illustrates this issue very nicely: In the browser, hit Shift + F2 and type security csp, and it will show you directives and advice. For example, here it is used on Twitter’s website:

¹⁵

Another possibility for inline scripts or inline styles, if you really have to use them, is to create a hash value. For example, suppose you need to have this inline script:

<script>alert('Hello, world.');</script>

You might add 'sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng=' as a valid source in your script-src directives. The hash generated is the result of this in PHP:

<?phpecho base64_encode(hash('sha256', "alert('Hello, world.');", true)); ?>

I said earlier that CSP is designed to reduce XSS risks — I could have added, “… and reduce the risks of unsolicited content.” With CSP, you have to know where your sources of content are and what they are doing on your front end (inline styles, etc.). CSP can also help you force contributors, developers and others to respect your rules about sources of content!

Now your question is, “OK, this is great, but how do we use it in a production environment?”

How To Use It In The Real World Link

The easiest way to get discouraged with using CSP the first time is to test it in a live environment, thinking, “This will be easy. My code is bad ass and perfectly clean.” Don’t do this. I did it. It’s stupid, trust me.

As I explained, CSP directives are activated with a CSP header — there is no middle ground. You are the weak link here. You might forget to authorize something or forget a piece of code on your website. CSP will not forgive your oversight. However, two features of CSP greatly simplify this problem.

report-uri Link

Remember the notifications that CSP sends to the console? The directive report-uri can be used to tell the browser to send them to the specified address. Reports are sent in JSON format.

report-uri /csp-parser.php ; 

So, in the csp-parser.php file, we can process the data sent by the browser. Here is the most basic example in PHP:

$data = file_get_contents('php://input'); if ($data = json_decode($data, true)) { $data = json_encode( $data, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES ); mail(EMAIL, SUBJECT, $data); } 

This notification will be transformed into an email. During development, you might not need anything more complex than this.

For a production environment (or a more visited development environment), you’d better use a way other than email to collect information, because there is no auth or rate limiting on the endpoint, and CSP can be very noisy. Just imagine a page that generates 100 CSP notifications (for example, a script that display images from an unauthorized source) and that is viewed 100 times a day — you could get 10,000 notifications a day!

A service such as report-uri.io¹⁷ can be used to simplify the management of reporting. You can see other simple examples for report-uri¹⁸ (with a database, with some optimizations, etc.) on GitHub.

report-only Link

As we have seen, the biggest issue is that there is no middle ground between CSP being enabled and disabled. However, a feature named report-only sends a slightly different header:

<?php header("Content-Security-Policy-Report-Only: <your directives>"); ?>

Basically, this tells the browser, “Act as if these CSP directives were being applied, but do not block anything. Just send me the notifications.” It is a great way to test directives without the risk of blocking any required assets.

With report-only and report-uri, you can test CSP directives with no risk, and you can monitor in real time everything CSP-related on a website. These two features are really powerful for deploying and maintaining CSP!

Conclusion Link

Why CSP Is Cool Link

CSP is most important for your users: They don’t have to suffer any unsolicited scripts or content or XSS vulnerabilities on your website.

The most important advantage of CSP for website maintainers is awareness. If you’ve set strict rules for image sources, and a script kiddie attempts to insert an image on your website from an unauthorized source, that image will be blocked, and you will be notified instantly.

Developers, meanwhile, need to know exactly what their front-end code does, and CSP helps them master that. They will be prompted to refactor parts of their code (avoiding inline functions and styles, etc.) and to follow best practices.

How CSP Could Be Even Cooler Link

Ironically, CSP is too efficient in some browsers — it creates bugs with bookmarklets. So, do not update your CSP directives to allow bookmarklets. We can’t blame any one browser in particular; all of them have issues:

• Firefox¹⁹
• Chrome (Blink)²⁰
• WebKit²¹

Most of the time, the bugs are false positives in blocked notifications. All browser vendors are working on these issues, so we can expect fixes soon. Anyway, this should not stop you from using CSP.

Other Resources And Articles Link

General Information Link

• Content Security Policy Quick Reference Guide²², Foundeo
• “Content Security Policy Level 2²³,” W3C
• “An Introduction to Content Security Policy²⁴,” HTML5 Rocks
• SecurityHeaders.io²⁵, Scott Helme
• CSP Useful, a Collection of Scripts, Thoughts About CSP²⁶, Nicolas Hoffmann, GitHub
• CSP Validator²⁷
• “Upgrade Insecure Requests²⁸,” W3C
• “CSP Cheat Sheet²⁹,” Scott Helme

Dropbox’s Series on Its CSP Policies Link

• “[CSP] On Reporting and Filtering³⁰”
• “[CSP] Unsafe-Inline and Nonce Deployment³¹”
• “[CSP] The Unexpected Eval³²”
• “[CSP] Third Party Integrations and Privilege Separation³³”

GitHub’s CSP policies Link

• “GitHub’s CSP journey³⁴”

Other Companies Link

• “We Said We’d Be Transparent: WIRED’s First Big HTTPS Snag³⁵,” Wired
• “Content Security Policy for Single Page Web Apps³⁶,” Square

About Reporting Link

• “Twitter’s CSP Report Collector³⁷,” Neil Matatall, GitHub

Examples of Directives Link

• Collection of Examples³⁸, Nicolas Hoffmann, GitHub

The Future of CSP Link

• “Making CSP Great Again!³⁹” (slides), Michele Spagnuolo and Lukas Weichselbaum
• “Content Security Policy Level 3⁴⁰,” W3C
• “Content Security Policy⁴¹,” W3C, GitHub

(ds, il, al)

Footnotes Link

1. 1 https://rocssti.net/en/example-csp-paris-web2015
2. 2 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing1b.jpg
3. 3 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing1b.jpg
4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing5.jpg
5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing5.jpg
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing2.jpg
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing2.jpg
8. 8 https://www.aaron-gustafson.com/notebook/more-proof-we-dont-control-our-web-pages/
9. 9 http://caniuse.com/#feat=contentsecuritypolicy
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing3.jpg
11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing3.jpg
12. 12 http://caniuse.com/#feat=contentsecuritypolicy2
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing4.jpg
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing4.jpg
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing6b.jpg
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/09/csp_smashing6b.jpg
17. 17 https://report-uri.io/
18. 18 https://github.com/nico3333fr/CSP-useful/tree/master/report-uri
19. 19 https://bugzilla.mozilla.org/show_bug.cgi?id=866522
20. 20 https://bugs.chromium.org/p/chromium/issues/detail?id=233903
21. 21 https://bugs.webkit.org/show_bug.cgi?id=149000
22. 22 http://content-security-policy.com/
23. 23 http://www.w3.org/TR/CSP/
24. 24 http://www.html5rocks.com/en/tutorials/security/content-security-policy/
25. 25 https://securityheaders.io/
26. 26 https://github.com/nico3333fr/CSP-useful
27. 27 https://cspvalidator.org/
28. 28 https://www.w3.org/TR/upgrade-insecure-requests/
29. 29 https://scotthelme.co.uk/csp-cheat-sheet/
30. 30 https://blogs.dropbox.com/tech/2015/09/on-csp-reporting-and-filtering/
31. 31 https://blogs.dropbox.com/tech/2015/09/unsafe-inline-and-nonce-deployment/
32. 32 https://blogs.dropbox.com/tech/2015/09/csp-the-unexpected-eval/
33. 33 https://blogs.dropbox.com/tech/2015/09/csp-third-party-integrations-and-privilege-separation/
34. 34 http://githubengineering.com/githubs-csp-journey/
35. 35 https://www.wired.com/2016/05/wired-first-big-https-rollout-snag/
36. 36 https://corner.squareup.com/2016/05/content-security-policy-single-page-app.html
37. 37 https://oreoshake.github.io/csp/twitter/2014/07/25/twitters-csp-report-collector-design.html
38. 38 https://github.com/nico3333fr/CSP-useful/tree/master/csp-for-third-party-services
39. 39 https://speakerdeck.com/mikispag/making-csp-great-again-michele-spagnuolo-and-lukas-weichselbaum
40. 40 https://www.w3.org/TR/CSP3/
41. 41 https://github.com/w3c/webappsec-csp/

↑ Back to topTweet itShare on Facebook